alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(lint): Update eslint rules

Browse Source 
* Remove semi
This commit is contained in:
Braks
2021-10-20 22:39:54 +02:00
parent 5ed1094dfe
commit 77eac0c12a
74 changed files with 2007 additions and 1827 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/App.tsx
+7 -7
View File
@@ -1,6 +1,6 @@
import { computed, defineComponent } from 'vue';
import Header from './Header';
import { useRoute } from 'vue-router';
import { computed, defineComponent } from 'vue'
import Header from './Header'
import { useRoute } from 'vue-router'
export default defineComponent({
name: 'App',
@@ -8,13 +8,13 @@ export default defineComponent({
Header
},
setup() {
const route = useRoute();
const key = computed(() => route.fullPath);
const route = useRoute()
const key = computed(() => route.fullPath)
return () => (
<>
<Header />
<router-view ref="view" key={key.value} />
</>
);
)
}
});
})
examples/DragNDrop/Sidebar.tsx
+6 -6
View File
@@ -1,9 +1,9 @@
const onDragStart = (event: DragEvent, nodeType: string) => {
if (event.dataTransfer) {
event.dataTransfer.setData('application/revueflow', nodeType);
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('application/revueflow', nodeType)
event.dataTransfer.effectAllowed = 'move'
}
};
}
const Sidebar = () => {
return (
@@ -19,7 +19,7 @@ const Sidebar = () => {
Output Node
</div>
</aside>
);
};
)
}
export default Sidebar;
export default Sidebar
examples/EdgeTypes/index.tsx
+13 -13
View File
@@ -11,22 +11,22 @@ import RevueFlow, {
Connection,
Edge,
Elements
} from '../../src';
import { getElements } from './utils';
import { defineComponent, ref } from 'vue';
} from '../../src'
import { getElements } from './utils'
import { defineComponent, ref } from 'vue'
const onLoad = (reactFlowInstance: OnLoadParams) => {
reactFlowInstance.fitView();
console.log(reactFlowInstance.getElements());
};
reactFlowInstance.fitView()
console.log(reactFlowInstance.getElements())
}
const initialElements = getElements();
const initialElements = getElements()
const EdgeTypesFlow = defineComponent({
setup() {
const elements = ref<Elements>(initialElements);
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
const elements = ref<Elements>(initialElements)
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
return () => (
<RevueFlow
@@ -36,8 +36,8 @@ const EdgeTypesFlow = defineComponent({
onConnect={onConnect}
minZoom={0.2}
></RevueFlow>
);
)
}
});
})
export default EdgeTypesFlow;
export default EdgeTypesFlow
examples/EdgeTypes/utils.ts
+27 -27
View File
@@ -1,18 +1,18 @@
import { ElementId, Elements, Position } from '../../src';
import { ElementId, Elements, Position } from '../../src'
const nodeWidth = 80;
const nodeGapWidth = nodeWidth * 2;
const nodeStyle = { width: nodeWidth + 'px', fontSize: '11px', color: 'white' };
const nodeWidth = 80
const nodeGapWidth = nodeWidth * 2
const nodeStyle = { width: nodeWidth + 'px', fontSize: '11px', color: 'white' }
const sourceTargetPositions = [
{ source: Position.Bottom, target: Position.Top },
{ source: Position.Right, target: Position.Left }
];
]
const nodeColors = [
['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4'],
['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8']
];
const edgeTypes = ['default', 'step', 'smoothstep', 'straight'];
]
const edgeTypes = ['default', 'step', 'smoothstep', 'straight']
const offsets = [
{
x: 0,
@@ -46,30 +46,30 @@ const offsets = [
x: -nodeGapWidth,
y: -nodeGapWidth
}
];
]
let id = 0;
const getNodeId = (): ElementId => (id++).toString();
let id = 0
const getNodeId = (): ElementId => (id++).toString()
export function getElements(): Elements {
const initialElements = [];
const initialElements = []
for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) {
const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex];
const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex]
for (let edgeTypeIndex = 0; edgeTypeIndex < edgeTypes.length; edgeTypeIndex++) {
const currEdgeType = edgeTypes[edgeTypeIndex];
const currEdgeType = edgeTypes[edgeTypeIndex]
for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
const currOffset = offsets[offsetIndex];
const currOffset = offsets[offsetIndex]
const style = { ...nodeStyle, background: nodeColors[sourceTargetIndex][edgeTypeIndex] };
const style = { ...nodeStyle, background: nodeColors[sourceTargetIndex][edgeTypeIndex] }
const sourcePosition = {
x: offsetIndex * nodeWidth * 4,
y: edgeTypeIndex * 300 + sourceTargetIndex * edgeTypes.length * 300
};
const sourceId = getNodeId();
const sourceData = { label: `Source ${sourceId}` };
}
const sourceId = getNodeId()
const sourceData = { label: `Source ${sourceId}` }
const sourceNode = {
id: sourceId,
style,
@@ -77,14 +77,14 @@ export function getElements(): Elements {
position: sourcePosition,
sourcePosition: currSourceTargetPos.source,
targetPosition: currSourceTargetPos.target
};
}
const targetId = getNodeId();
const targetData = { label: `Target ${targetId}` };
const targetId = getNodeId()
const targetData = { label: `Target ${targetId}` }
const targetPosition = {
x: sourcePosition.x + currOffset.x,
y: sourcePosition.y + currOffset.y
};
}
const targetNode = {
id: targetId,
style,
@@ -92,15 +92,15 @@ export function getElements(): Elements {
position: targetPosition,
sourcePosition: currSourceTargetPos.source,
targetPosition: currSourceTargetPos.target
};
}
initialElements.push(sourceNode);
initialElements.push(targetNode);
initialElements.push(sourceNode)
initialElements.push(targetNode)
initialElements.push({ id: `${sourceId}-${targetId}`, source: sourceId, target: targetId, type: currEdgeType });
initialElements.push({ id: `${sourceId}-${targetId}`, source: sourceId, target: targetId, type: currEdgeType })
}
}
}
return initialElements as Elements;
return initialElements as Elements
}
examples/EdgeWithButton/ButtonEdge.tsx
+17 -17
View File
@@ -1,25 +1,25 @@
import { computed, defineComponent, inject } from 'vue';
import { getBezierPath, getEdgeCenter, getMarkerEnd, RevueFlowStore } from '../../src';
import { DefaultEdgeProps } from '../../src/components/Edges/utils';
import { RevueFlowHooks } from '../../src/hooks/RevueFlowHooks';
import { computed, defineComponent, inject } from 'vue'
import { getBezierPath, getEdgeCenter, getMarkerEnd, RevueFlowStore } from '../../src'
import { DefaultEdgeProps } from '../../src/components/Edges/utils'
import { RevueFlowHooks } from '../../src/hooks/RevueFlowHooks'
export default defineComponent({
props: {
...DefaultEdgeProps
},
setup(props) {
const store = inject<RevueFlowStore>('store')!;
const hooks = inject<RevueFlowHooks>('hooks')!;
const store = inject<RevueFlowStore>('store')!
const hooks = inject<RevueFlowHooks>('hooks')!
const onEdgeClick = (evt: Event, id: string) => {
const edge = store.edges.find((edge) => edge.id === id);
const edge = store.edges.find((edge) => edge.id === id)
if (edge) {
hooks.elementsRemove.trigger([edge]);
hooks.elementsRemove.trigger([edge])
}
evt.stopPropagation();
alert(`remove ${id}`);
};
evt.stopPropagation()
alert(`remove ${id}`)
}
const foreignObjectSize = 40;
const foreignObjectSize = 40
const edgePath = computed(() =>
getBezierPath({
@@ -30,8 +30,8 @@ export default defineComponent({
targetY: props.targetY,
targetPosition: props.targetPosition
})
);
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId));
)
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
const center = computed(() =>
getEdgeCenter({
sourceX: props.sourceX,
@@ -39,7 +39,7 @@ export default defineComponent({
targetX: props.targetX,
targetY: props.targetY
})
);
)
return () => (
<>
@@ -59,6 +59,6 @@ export default defineComponent({
</body>
</foreignObject>
</>
);
)
}
});
})
examples/Edges/CustomEdge.tsx
+8 -8
View File
@@ -1,6 +1,6 @@
import { getBezierPath, getMarkerEnd } from '../../src';
import { computed, defineComponent } from 'vue';
import { DefaultEdgeProps } from '../../src/components/Edges/utils';
import { getBezierPath, getMarkerEnd } from '../../src'
import { computed, defineComponent } from 'vue'
import { DefaultEdgeProps } from '../../src/components/Edges/utils'
const CustomEdge = defineComponent({
props: {
@@ -16,8 +16,8 @@ const CustomEdge = defineComponent({
targetY: props.targetY,
targetPosition: props.targetPosition
})
);
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId));
)
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
return () => (
<>
@@ -28,8 +28,8 @@ const CustomEdge = defineComponent({
</textPath>
</text>
</>
);
)
}
});
})
export default CustomEdge;
export default CustomEdge
examples/Edges/CustomEdge2.tsx
+9 -9
View File
@@ -1,6 +1,6 @@
import { computed, defineComponent } from 'vue';
import { EdgeText, getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src';
import { DefaultEdgeProps } from '../../src/components/Edges/utils';
import { computed, defineComponent } from 'vue'
import { EdgeText, getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src'
import { DefaultEdgeProps } from '../../src/components/Edges/utils'
const CustomEdge = defineComponent({
props: {
@@ -16,8 +16,8 @@ const CustomEdge = defineComponent({
targetY: props.targetY,
targetPosition: props.targetPosition
})
);
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId));
)
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
const center = computed(() =>
getEdgeCenter({
sourceX: props.sourceX,
@@ -25,7 +25,7 @@ const CustomEdge = defineComponent({
targetX: props.targetX,
targetY: props.targetY
})
);
)
return () => (
<>
@@ -42,8 +42,8 @@ const CustomEdge = defineComponent({
onClick={() => console.log(props.data)}
/>
</>
);
)
}
});
})
export default CustomEdge;
export default CustomEdge
examples/Edges/index.tsx
+15 -15
View File
@@ -1,6 +1,6 @@
import { ref } from 'vue';
import CustomEdge from './CustomEdge';
import CustomEdge2 from './CustomEdge2';
import { ref } from 'vue'
import CustomEdge from './CustomEdge'
import CustomEdge2 from './CustomEdge2'
import RevueFlow, {
Elements,
FlowElement,
@@ -13,7 +13,7 @@ import RevueFlow, {
Connection,
Edge,
removeElements
} from '../../src';
} from '../../src'
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
@@ -73,21 +73,21 @@ const initialElements = [
type: 'custom2',
data: { text: 'custom edge 2' }
}
];
]
const edgeTypes: Record<string, any> = {
custom: CustomEdge,
custom2: CustomEdge2
};
}
const EdgesFlow = () => {
const elements = ref<Elements>(initialElements as Elements);
const elements = ref<Elements>(initialElements as Elements)
const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
return (
<RevueFlow
@@ -104,7 +104,7 @@ const EdgesFlow = () => {
<Controls />
<Background />
</RevueFlow>
);
};
)
}
export default EdgesFlow;
export default EdgesFlow
examples/Empty/index.tsx
+16 -17
View File
@@ -12,32 +12,31 @@ import RevueFlow, {
BackgroundVariant,
Connection,
Edge
} from '../../src';
import { CSSProperties, defineComponent, ref } from 'vue';
} from '../../src'
import { CSSProperties, defineComponent, ref } from 'vue'
const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance);
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance)
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
const buttonStyle: CSSProperties = { position: 'absolute', left: '10px', top: '10px', zIndex: 4 };
const buttonStyle: CSSProperties = { position: 'absolute', left: '10px', top: '10px', zIndex: 4 }
const EmptyFlow = defineComponent({
setup() {
{
const elements = ref<Elements>([]);
const onElementsRemove = (elementsToRemove: Elements) =>
(elements.value = removeElements(elementsToRemove, elements.value));
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
const elements = ref<Elements>([])
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
const addRandomNode = () => {
const nodeId: ElementId = (elements.value.length + 1).toString();
const nodeId: ElementId = (elements.value.length + 1).toString()
const newNode: Node = {
id: nodeId,
data: { label: `Node: ${nodeId}` },
position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
} as Node;
elements.value = [...elements.value, newNode];
};
} as Node
elements.value = [...elements.value, newNode]
}
return () => (
<RevueFlow
@@ -57,9 +56,9 @@ const EmptyFlow = defineComponent({
add node
</button>
</RevueFlow>
);
)
}
}
});
})
export default EmptyFlow;
export default EmptyFlow
examples/Header.tsx
+10 -10
View File
@@ -1,14 +1,14 @@
import { defineComponent } from 'vue';
import { routes } from './router';
import { useRoute, useRouter } from 'vue-router';
import { defineComponent } from 'vue'
import { routes } from './router'
import { useRoute, useRouter } from 'vue-router'
const Header = defineComponent({
setup() {
const router = useRouter();
const route = useRoute();
const router = useRouter()
const route = useRoute()
const onChange = async (event: any) => {
await router.push(event.target.value);
};
await router.push(event.target.value)
}
return () => (
<header>
@@ -25,8 +25,8 @@ const Header = defineComponent({
)}
</select>
</header>
);
)
}
});
})
export default Header;
export default Header
examples/Hidden/index.tsx
+17 -17
View File
@@ -1,5 +1,5 @@
import RevueFlow, { addEdge, MiniMap, Controls, Connection, Edge, Elements } from '../../src';
import { defineComponent, ref, watchEffect } from 'vue';
import RevueFlow, { addEdge, MiniMap, Controls, Connection, Edge, Elements } from '../../src'
import { defineComponent, ref, watchEffect } from 'vue'
const initialElements: Elements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
@@ -9,26 +9,26 @@ const initialElements: Elements = [
{ id: 'e1-2', source: '1', target: '2' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4' }
] as Elements;
] as Elements
const HiddenFlow = defineComponent({
setup() {
const elements = ref<Elements>(initialElements);
const isHidden = ref<boolean>(false);
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
const elements = ref<Elements>(initialElements)
const isHidden = ref<boolean>(false)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
watchEffect(() => {
console.log(isHidden.value);
console.log(isHidden.value)
elements.value = elements.value.map((e) => {
e.isHidden = isHidden.value;
return e;
});
});
e.isHidden = isHidden.value
return e
})
})
const toggle = (event) => {
console.log(event.target);
isHidden.value = event.target?.checked;
};
console.log(event.target)
isHidden.value = event.target?.checked
}
return () => (
<RevueFlow v-model={elements.value} onConnect={onConnect}>
@@ -44,8 +44,8 @@ const HiddenFlow = defineComponent({
</div>
</div>
</RevueFlow>
);
)
}
});
})
export default HiddenFlow;
export default HiddenFlow
examples/Interaction/index.tsx
+27 -27
View File
@@ -9,8 +9,8 @@ import RevueFlow, {
Edge,
PanOnScrollMode,
FlowTransform
} from '../../src';
import { defineComponent, ref } from 'vue';
} from '../../src'
import { defineComponent, ref } from 'vue'
const initialElements: Elements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
@@ -19,33 +19,33 @@ const initialElements: Elements = [
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' }
] as Elements;
] as Elements
const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event);
const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
const onMoveEnd = (flowTranasform?: FlowTransform) => console.log('onMoveEnd', flowTranasform);
const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node)
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event)
const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event)
const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event)
const onMoveEnd = (flowTranasform?: FlowTransform) => console.log('onMoveEnd', flowTranasform)
const InteractionFlow = defineComponent({
setup() {
const elements = ref<Elements>(initialElements);
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
const elements = ref<Elements>(initialElements)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
const isSelectable = ref(false);
const isDraggable = ref(false);
const isConnectable = ref(false);
const zoomOnScroll = ref(false);
const zoomOnPinch = ref(false);
const panOnScroll = ref(false);
const panOnScrollMode = ref<PanOnScrollMode>(PanOnScrollMode.Free);
const zoomOnDoubleClick = ref(false);
const paneMoveable = ref(true);
const captureZoomClick = ref(false);
const captureZoomScroll = ref(false);
const captureElementClick = ref(false);
const isSelectable = ref(false)
const isDraggable = ref(false)
const isConnectable = ref(false)
const zoomOnScroll = ref(false)
const zoomOnPinch = ref(false)
const panOnScroll = ref(false)
const panOnScrollMode = ref<PanOnScrollMode>(PanOnScrollMode.Free)
const zoomOnDoubleClick = ref(false)
const paneMoveable = ref(true)
const captureZoomClick = ref(false)
const captureZoomScroll = ref(false)
const captureElementClick = ref(false)
return () => (
<RevueFlow
@@ -165,8 +165,8 @@ const InteractionFlow = defineComponent({
</div>
</div>
</RevueFlow>
);
)
}
});
})
export default InteractionFlow;
export default InteractionFlow
examples/main.ts
+12 -12
View File
@@ -1,14 +1,14 @@
import { createApp } from 'vue';
import './index.css';
import App from './App';
import { router } from './router';
import { createPinia } from 'pinia';
import { DraggablePlugin } from '@braks/revue-draggable';
import { createApp } from 'vue'
import './index.css'
import App from './App'
import { router } from './router'
import { createPinia } from 'pinia'
import { DraggablePlugin } from '@braks/revue-draggable'
const app = createApp(App);
const app = createApp(App)
app.config.performance = true;
app.use(router);
app.use(DraggablePlugin);
app.use(createPinia());
app.mount('#root');
app.config.performance = true
app.use(router)
app.use(DraggablePlugin)
app.use(createPinia())
app.mount('#root')
examples/router.ts
+3 -3
View File
@@ -1,4 +1,4 @@
import { createRouter, createWebHashHistory, RouterOptions } from 'vue-router';
import { createRouter, createWebHashHistory, RouterOptions } from 'vue-router'
export const routes: RouterOptions['routes'] = [
{
@@ -45,9 +45,9 @@ export const routes: RouterOptions['routes'] = [
path: '/interaction',
component: () => import('./Interaction')
}
];
]
export const router = createRouter({
history: createWebHashHistory(),
routes
});
})