refactor(types)!: Remove elements prop, change EdgeTypes/NodeTypes prop to string[]

* no more elements prop - v-model instead!
* Instead of passing an object map to components just pass in an array of strings as nodeTypes/edgeTypes object
* the string name will either be resolved to a dynamic component with :is="type" or a slot with the type-name
* update all examples

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-20 22:10:25 +01:00
parent 0a1c2d4ede
commit 39b21faa5b
34 changed files with 169 additions and 200 deletions
+8 -7
View File
@@ -75,11 +75,6 @@ const initialElements: Elements = [
},
]
const edgeTypes: Record<string, any> = {
custom: CustomEdge,
custom2: CustomEdge2,
}
const elements = ref<Elements>(initialElements)
const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
@@ -90,15 +85,21 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
</script>
<template>
<VueFlow
:elements="elements"
v-model="elements"
:snap-to-grid="true"
:edge-types="edgeTypes"
:edge-types="['custom', 'custom2']"
@element-click="onElementClick"
@elements-remove="onElementsRemove"
@connect="onConnect"
@node-drag-stop="onNodeDragStop"
@load="onLoad"
>
<template #edge-custom="props">
<CustomEdge v-bind="props" />
</template>
<template #edge-custom2="props">
<CustomEdge2 v-bind="props" />
</template>
<MiniMap />
<Controls />
<Background />