refactor(flow)!: properly nest components

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/CustomNode/ColorSelectorNode.vue

@@ -25,13 +25,11 @@ const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px'
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params)
 </script>
 <template>
-  <div class="vue-flow__node-color-selector">
-    <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
-    <div>
-      Custom Color Picker Node: <strong>{{ data.color }}</strong>
-    </div>
-    <input class="nodrag" type="color" :value="data.color" @input="props.data.onChange" />
-    <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
-    <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
+  <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
+  <div>
+    Custom Color Picker Node: <strong>{{ data.color }}</strong>
   </div>
+  <input class="nodrag" type="color" :value="data.color" @input="props.data.onChange" />
+  <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
+  <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
 </template>

examples/CustomNode/CustomNode.vue

@@ -63,7 +63,7 @@ onMounted(() => {
     {
       id: '1',
       type: 'input',
-      data: { label: 'An input node' },
+      label: 'An input node',
       position: { x: 0, y: 50 },
       sourcePosition: Position.Right,
     },
@@ -77,14 +77,14 @@ onMounted(() => {
     {
       id: '3',
       type: 'output',
-      data: { label: 'Output A' },
+      label: 'Output A',
       position: { x: 650, y: 25 },
       targetPosition: Position.Left,
     },
     {
       id: '4',
       type: 'output',
-      data: { label: 'Output B' },
+      label: 'Output B',
       position: { x: 650, y: 100 },
       targetPosition: Position.Left,
     },

examples/EdgeWithButton/ButtonEdge.vue

@@ -17,7 +17,7 @@ interface CustomEdgeProps<T = any> extends EdgeProps<T> {
 const props = defineProps<CustomEdgeProps>()
 const store = useVueFlow()
 const onEdgeClick = (evt: Event, id: string) => {
-  const edge = store.getEdges.find((edge) => edge.id === id)
+  const edge = store.getEdge(id)
   if (edge) {
     store.hooks.elementsRemove.trigger([edge])
   }

examples/Empty/EmptyExample.vue

@@ -29,10 +29,10 @@ const addRandomNode = () => {
   const nodeId = (elements.value.length + 1).toString()
   const newNode: Node = {
     id: nodeId,
-    data: { label: `Node: ${nodeId}` },
+    label: `Node: ${nodeId}`,
     position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight },
   } as Node
-  elements.value = [...elements.value, newNode]
+  elements.value.push(newNode)
 }
 </script>
 <template>
@@ -41,7 +41,7 @@ const addRandomNode = () => {
     @load="onLoad"
     @element-click="onElementClick"
     @elements-remove="onElementsRemove"
-    @connect="(p) => onConnect(p)"
+    @connect="onConnect"
     @node-drag-stop="onNodeDragStop"
   >
     <MiniMap />

examples/Stress/StressExample.vue

@@ -1,21 +1,6 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
 import { getElements } from './utils'
-import {
-  VueFlow,
-  removeElements,
-  addEdge,
-  MiniMap,
-  isNode,
-  Controls,
-  Background,
-  FlowInstance,
-  Elements,
-  Connection,
-  Edge,
-} from '~/index'
-
-const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 4 }
+import { VueFlow, FlowInstance } from '~/index'
 
 const instance = ref<FlowInstance>()
 const onLoad = (flowInstance: FlowInstance) => {
@@ -24,50 +9,10 @@ const onLoad = (flowInstance: FlowInstance) => {
   console.log(flowInstance.getNodes())
 }
 
-const initialElements: Elements = getElements(50, 20)
-const elements = ref(initialElements)
-
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-const updatePos = () => {
-  elements.value = elements.value.map((el) => {
-    if (isNode(el)) {
-      return {
-        ...el,
-        position: {
-          x: Math.random() * window.innerWidth,
-          y: Math.random() * window.innerHeight,
-        },
-      }
-    }
-
-    return el
-  })
-}
-
-const updateElements = () => {
-  const grid = Math.ceil(Math.random() * 10)
-  elements.value = getElements(grid, grid)
-  setTimeout(() => instance.value.fitView({ padding: 0.5 }))
-}
+const { nodes, edges } = getElements(5, 5)
 </script>
 <template>
-  <VueFlow
-    v-model="elements"
-    loading="One moment please..."
-    @load="onLoad"
-    @elementsRemove="onElementsRemove"
-    @connect="onConnect"
-  >
-    <MiniMap />
-    <Controls />
-    <Background />
-
-    <div :style="buttonWrapperStyles">
-      <button style="margin-right: 5px" @click="updatePos">change pos</button>
-      <button @click="updateElements">update elements</button>
-    </div>
-  </VueFlow>
+  <VueFlow :nodes="nodes" :edges="edges" @load="onLoad"> </VueFlow>
 </template>
 <style>
 .fade-enter-active,

examples/Stress/utils.ts

@@ -1,24 +1,24 @@
-import { Elements } from '~/index'
+import { Edge, Node } from '~/index'
 
-export function getElements(xElements = 10, yElements = 10): Elements {
-  const initialElements = []
+export function getElements(xElements = 10, yElements = 10) {
+  const initialNodes: Node[] = []
+  const initialEdges: Edge[] = []
   let nodeId = 1
   let recentNodeId = null
 
   for (let y = 0; y < yElements; y++) {
     for (let x = 0; x < xElements; x++) {
       const position = { x: x * 100, y: y * 50 }
-      const data = { label: `Node ${nodeId}` }
       const node = {
         id: nodeId.toString(),
         style: { width: 50, fontSize: 11 },
-        data,
+        label: `Node ${nodeId}`,
         position,
       }
-      initialElements.push(node)
+      initialNodes.push(node)
 
       if (recentNodeId && nodeId <= xElements * yElements) {
-        initialElements.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() })
+        initialEdges.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() })
       }
 
       recentNodeId = nodeId
@@ -26,5 +26,8 @@ export function getElements(xElements = 10, yElements = 10): Elements {
     }
   }
 
-  return initialElements
+  return {
+    nodes: initialNodes,
+    edges: initialEdges,
+  }
 }