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>

examples/Basic/Basic.vue

@@ -58,8 +58,8 @@ const toggleclasss = () => {
 </script>
 <template>
   <VueFlow
+    v-model="elements"
     class="vue-flow-basic-example"
-    :elements="elements"
     :default-zoom="1.5"
     :min-zoom="0.2"
     :max-zoom="4"

examples/CustomConnectionLine/CustomConnectionLine.vue

@@ -14,7 +14,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <VueFlow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
+  <VueFlow v-model="elements" @elements-remove="onElementsRemove" @connect="onConnect">
     <template #custom-connection-line="props">
       <ConnectionLine v-bind="props" />
     </template>

examples/CustomNode/CustomNode.vue

@@ -22,9 +22,6 @@ const elements = ref<Elements>([])
 const bgColor = ref('#1A192B')
 const connectionLineStyle = { stroke: '#fff' }
 const snapGrid: SnapGrid = [16, 16]
-const nodeTypes = {
-  selectorNode: markRaw(ColorSelectorNode),
-}
 
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()
@@ -114,7 +111,7 @@ const onConnect = (params: Connection | Edge) =>
   <VueFlow
     v-model="elements"
     :style="`background: ${bgColor}`"
-    :node-types="nodeTypes"
+    :node-types="['selectorNode']"
     :connection-mode="ConnectionMode.Loose"
     :connection-line-style="connectionLineStyle"
     :snap-to-grid="true"
@@ -126,6 +123,9 @@ const onConnect = (params: Connection | Edge) =>
     @node-drag-stop="onNodeDragStop"
     @load="onLoad"
   >
+    <template #node-selectorNode="props">
+      <ColorSelectorNode v-bind="props" />
+    </template>
     <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
     <Controls />
   </VueFlow>

examples/EdgeTypes/EdgeTypesExample.vue

@@ -23,7 +23,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <VueFlow :elements="elements" :min-zoom="0.2" @load="onLoad" @elements-remove="onElementsRemove" @connect="onConnect">
+  <VueFlow v-model="elements" :min-zoom="0.2" @load="onLoad" @elements-remove="onElementsRemove" @connect="onConnect">
     <MiniMap />
     <Controls />
   </VueFlow>

examples/EdgeWithButton/EdgeWithButton.vue

@@ -7,15 +7,11 @@ import {
   Connection,
   Controls,
   Edge,
-  EdgeType,
   Elements,
   MiniMap,
   FlowInstance,
   removeElements,
 } from '~/index'
-const edgeTypes = {
-  buttonedge: ButtonEdge as EdgeType,
-}
 
 const elements = ref<Elements>([
   {
@@ -29,7 +25,7 @@ const elements = ref<Elements>([
     id: 'edge-1-2',
     source: 'ewb-1',
     target: 'ewb-2',
-    type: 'buttonedge',
+    type: 'button',
   },
 ])
 
@@ -41,13 +37,16 @@ const onConnect = (params: Connection | Edge) =>
 <template>
   <VueFlow
     key="edge-with-button"
-    :elements="elements"
+    v-model="elements"
     :snap-to-grid="true"
-    :edge-types="edgeTypes"
+    :edge-types="['button']"
     @load="onLoad"
     @elementsRemove="onElementsRemove"
     @connect="onConnect"
   >
+    <template #edge-button="props">
+      <ButtonEdge v-bind="props" />
+    </template>
     <MiniMap />
     <Controls />
     <Background />

examples/Edges/EdgesExample.vue

@@ -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 />

examples/Hidden/HiddenExample.vue

@@ -23,7 +23,7 @@ watchEffect(() => {
 })
 </script>
 <template>
-  <VueFlow :elements="elements" @connect="onConnect">
+  <VueFlow v-model="elements" @connect="onConnect">
     <MiniMap />
     <Controls />
 

examples/Interaction/InteractionExample.vue

@@ -48,7 +48,7 @@ const captureElementClick = ref(false)
 </script>
 <template>
   <VueFlow
-    :elements="elements"
+    v-model="elements"
     :elements-selectable="isSelectable"
     :nodes-connectable="isConnectable"
     :nodes-draggable="isDraggable"

examples/Layouting/LayoutingExample.vue

@@ -59,7 +59,7 @@ const onLayout = (direction: string) => {
 <template>
   <div class="layoutflow">
     <VueFlow
-      :elements="elements"
+      v-model="elements"
       :node-extent="nodeExtent"
       :connection-mode="ConnectionMode.Loose"
       @connect="onConnect"

examples/MultiFlows/Flow.vue

@@ -14,7 +14,7 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
-  <VueFlow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
+  <VueFlow v-model="elements" @elements-remove="onElementsRemove" @connect="onConnect">
     <Background />
   </VueFlow>
 </template>

examples/NodeTypeChange/NodeTypeChangeExample.vue

@@ -41,7 +41,7 @@ const changeType = () => {
 }
 </script>
 <template>
-  <VueFlow :elements="elements" @connect="onConnect" @load="onLoad">
+  <VueFlow v-model="elements" @connect="onConnect" @load="onLoad">
     <button :style="buttonStyle" @click="changeType">change type</button>
   </VueFlow>
 </template>

examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue

@@ -27,12 +27,8 @@ const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, z
 const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' }
 
 const nodeTypesObjects: Record<string, NodeTypes> = {
-  a: {
-    a: NodeA,
-  },
-  b: {
-    b: NodeB,
-  },
+  a: ['a'],
+  b: ['b'],
 }
 
 const elements = ref(initialElements)

examples/Overview/Overview.vue

@@ -137,7 +137,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 </script>
 <template>
   <VueFlow
-    :elements="elements"
+    v-model="elements"
     :connection-line-style="connectionLineStyle"
     :snap-to-grid="true"
     :snap-grid="snapGrid"

examples/Provider/ProviderExample.vue

@@ -38,7 +38,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
     <Sidebar />
     <div class="vue-flow-wrapper">
       <VueFlow
-        :elements="elements"
+        v-model="elements"
         :connection-mode="ConnectionMode.Loose"
         @element-click="onElementClick"
         @connect="onConnect"

examples/RGBFlow/RGBFlow.vue

@@ -31,13 +31,8 @@ const color = ref<Colors>({
 })
 const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
 const store = useVueFlow({
-  nodeTypes: {
-    'rgb': true,
-    'rgb-output': true,
-  },
-  edgeTypes: {
-    pathfinding: true,
-  },
+  nodeTypes: ['rgb', 'rgb-output'],
+  edgeTypes: ['pathfinding'],
   zoomOnScroll: false,
 })
 </script>

examples/Stress/StressExample.vue

@@ -51,6 +51,7 @@ const updateElements = () => {
 <template>
   <VueFlow
     v-model="elements"
+    :worker="true"
     :loading="{ label: 'Loading...', transition: { name: 'fade', mode: 'out-in' } }"
     @load="onLoad"
     @elementsRemove="onElementsRemove"

examples/Switch/SwitchExample.vue

@@ -33,7 +33,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 </script>
 <template>
   <VueFlow
-    :elements="elements"
+    v-model="elements"
     @element-click="onElementClick"
     @elements-remove="onElementsRemove"
     @connect="onConnect"

examples/Unidirectional/UnidirectionalExample.vue

@@ -2,7 +2,6 @@
 import CustomNode from './CustomNode.vue'
 import {
   VueFlow,
-  NodeType,
   addEdge,
   useZoomPanHelper,
   Elements,
@@ -14,7 +13,6 @@ import {
   ConnectionMode,
   updateEdge,
   ArrowHeadType,
-  NodeTypes,
 } from '~/index'
 
 const initialElements: Elements = [
@@ -173,10 +171,6 @@ const initialElements: Elements = [
   },
 ]
 
-const nodeTypes: NodeTypes = {
-  custom: CustomNode,
-}
-
 let id = 4
 const getId = (): ElementId => `${id++}`
 
@@ -195,12 +189,16 @@ const onPaneClick = (evt: MouseEvent) =>
 </script>
 <template>
   <VueFlow
-    :elements="elements"
-    :node-types="nodeTypes"
+    v-model="elements"
+    :node-types="['custom']"
     :connection-line-type="ConnectionLineType.SmoothStep"
     :connection-mode="ConnectionMode.Loose"
     @connect="onConnect"
     @pane-click="onPaneClick"
     @edge-pdate="onEdgeUpdate"
-  />
+  >
+    <template #node-custom="props">
+      <CustomNode v-bind="props" />
+    </template>
+  </VueFlow>
 </template>

examples/UpdatableEdge/UpdatableEdgeExample.vue

@@ -51,7 +51,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 </script>
 <template>
   <VueFlow
-    :elements="elements"
+    v-model="elements"
     :snap-to-grid="true"
     :connection-mode="ConnectionMode.Loose"
     @load="onLoad"

examples/UpdateNode/UpdateNodeExample.vue

@@ -35,7 +35,7 @@ watchEffect(() => {
 })
 </script>
 <template>
-  <VueFlow :elements="elements" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
+  <VueFlow v-model="elements" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
     <div class="updatenode__controls">
       <label>label:</label>
       <input v-model="nodeName" />

examples/UpdateNodeInternals/CustomNode.vue

@@ -3,7 +3,10 @@ import { CSSProperties } from 'vue'
 import { Handle, Position, NodeProps } from '~/index'
 
 interface CustomNodeProps extends NodeProps {
-  data: any
+  data: {
+    handleCount: number
+    handlePosition: number
+  }
 }
 const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' }
 

examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue

@@ -3,7 +3,6 @@ import { CSSProperties } from 'vue'
 import CustomNode from './CustomNode.vue'
 import {
   VueFlow,
-  NodeType,
   addEdge,
   useZoomPanHelper,
   Node,
@@ -14,7 +13,6 @@ import {
   Position,
   isEdge,
   FlowInstance,
-  NodeTypes,
 } from '~/index'
 
 const initialHandleCount = 1
@@ -30,10 +28,6 @@ const initialElements: Elements = [
 
 const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 10 }
 
-const nodeTypes: NodeTypes = {
-  custom: CustomNode,
-}
-
 let id = 5
 const getId = (): ElementId => `${id++}`
 
@@ -72,7 +66,10 @@ const onLoad = (instance: FlowInstance) => {
 }
 </script>
 <template>
-  <VueFlow :elements="elements" :node-types="nodeTypes" @connect="onConnect" @pane-click="onPaneClick" @load="onLoad">
+  <VueFlow v-model="elements" :node-types="['custom']" @connect="onConnect" @pane-click="onPaneClick" @load="onLoad">
+    <template #node-custom="props">
+      <CustomNode v-bind="props" />
+    </template>
     <div :style="buttonWrapperStyles">
       <button @click="toggleHandleCount">toggle handle count</button>
       <button @click="toggleHandlePosition">toggle handle position</button>

examples/Validation/ValidationExample.vue

@@ -1,20 +1,7 @@
 <script lang="ts" setup>
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
-import {
-  VueFlow,
-  addEdge,
-  Handle,
-  Connection,
-  Position,
-  Elements,
-  Edge,
-  OnConnectStartParams,
-  NodeProps,
-  FlowInstance,
-  NodeType,
-  NodeTypes,
-} from '~/index'
+import { VueFlow, addEdge, Connection, Elements, Edge, OnConnectStartParams, FlowInstance } from '~/index'
 
 import './validation.css'
 
@@ -35,21 +22,24 @@ const onConnect = (params: Connection | Edge) => {
   console.log('on connect', params)
   elements.value = addEdge(params, elements.value)
 }
-const nodeTypes: NodeTypes = {
-  custominput: CustomInput,
-  customnode: CustomNode,
-}
 </script>
 <template>
   <VueFlow
-    :elements="elements"
+    v-model="elements"
     :select-nodes-on-drag="false"
+    :node-types="['custominput', 'customnode']"
     class="validationflow"
-    :node-types="nodeTypes"
     @connect="onConnect"
     @oad="onLoad"
     @connect-start="onConnectStart"
     @connect-stop="onConnectStop"
     @connect-end="onConnectEnd"
-  />
+  >
+    <template #node-custominput="props">
+      <CustomInput v-bind="props" />
+    </template>
+    <template #node-customnode="props">
+      <CustomNode v-bind="props" />
+    </template>
+  </VueFlow>
 </template>

examples/ZoomPanHelper/ZoomPanHelperExample.vue

@@ -44,7 +44,7 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
-  <VueFlow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect" @pane-click="onPaneClick">
+  <VueFlow v-model="elements" @elements-remove="onElementsRemove" @connect="onConnect" @pane-click="onPaneClick">
     <Background />
     <MiniMap />
   </VueFlow>