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

fix(example): custom edges not displayed correctly

Browse Source
This commit is contained in:
Braks
2021-08-08 19:28:45 +02:00
parent e7513b898c
commit 9e397e6817
4 changed files with 82 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/Edges/index.tsx
+5 -7
View File
@@ -1,4 +1,4 @@
import { FunctionalComponent, ref } from 'vue';
import { ref } from 'vue';
import CustomEdge from './CustomEdge';
import CustomEdge2 from './CustomEdge2';
import RevueFlow, {
@@ -12,14 +12,9 @@ import RevueFlow, {
addEdge,
Connection,
Edge,
EdgeProps,
removeElements
} from '../../src';
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 initialElements = [
{ id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
@@ -80,7 +75,7 @@ const initialElements = [
}
];
const edgeTypes: Record<string, FunctionalComponent<EdgeProps>> = {
const edgeTypes: Record<string, any> = {
custom: CustomEdge,
custom2: CustomEdge2
};
@@ -88,6 +83,9 @@ const edgeTypes: Record<string, FunctionalComponent<EdgeProps>> = {
const EdgesFlow = () => {
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));