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

update: fix names

Browse Source
This commit is contained in:
Braks
2021-10-21 17:42:33 +02:00
parent e9392b13c5
commit 20e9d1d396
23 changed files with 210 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/Layouting/LayoutingExample.vue
+3 -2
View File
@@ -14,9 +14,10 @@ const nodeExtent: NodeExtent = [
]
const elements = ref<Elements>(initialElements)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
const onConnect = (params: Connection | Edge) => (elements.value = addEdge({ ...params, animated: true }, elements.value))
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
// todo changing elements not properly updating flowchart...
const onLayout = (direction: string) => {
const isHorizontal = direction === 'LR'
dagreGraph.setGraph({ rankdir: direction })
@@ -50,7 +51,7 @@ const onLayout = (direction: string) => {
:node-extent="nodeExtent"
@connect="onConnect"
@clements-remove="onElementsRemove"
@load="() => onLayout('TB')"
@load="() => onLayout('LR')"
>
<Controls />
</Flow>
examples/Layouting/initial-elements.ts
+9 -9
View File
@@ -56,16 +56,16 @@ const elements: Elements = [
position,
},
{ id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } },
{ id: 'e12', source: '1', target: '2', type: 'smoothstep' },
{ id: 'e13', source: '1', target: '3', type: 'smoothstep' },
{ id: 'e22a', source: '2', target: '2a', type: 'smoothstep' },
{ id: 'e22b', source: '2', target: '2b', type: 'smoothstep' },
{ id: 'e22c', source: '2', target: '2c', type: 'smoothstep' },
{ id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep' },
{ id: 'e12', source: '1', target: '2', type: 'smoothstep', animated: true },
{ id: 'e13', source: '1', target: '3', type: 'smoothstep', animated: true },
{ id: 'e22a', source: '2', target: '2a', type: 'smoothstep', animated: true },
{ id: 'e22b', source: '2', target: '2b', type: 'smoothstep', animated: true },
{ id: 'e22c', source: '2', target: '2c', type: 'smoothstep', animated: true },
{ id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep', animated: true },
{ id: 'e45', source: '4', target: '5', type: 'smoothstep' },
{ id: 'e56', source: '5', target: '6', type: 'smoothstep' },
{ id: 'e57', source: '5', target: '7', type: 'smoothstep' },
{ id: 'e45', source: '4', target: '5', type: 'smoothstep', animated: true },
{ id: 'e56', source: '5', target: '6', type: 'smoothstep', animated: true },
{ id: 'e57', source: '5', target: '7', type: 'smoothstep', animated: true },
] as Elements
export default elements