refactor: pass props to edge/nodewrapper separately

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

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -40,9 +40,30 @@ export default {
     <g :transform="transform">
       <Edge
         v-for="(edge, i) of store.getEdges"
+        :id="edge.id"
         :key="`${edge.id}-${i}`"
         :edge="edge"
-        :marker-end-id="props.markerEndId"
+        :type="edge.type"
+        :source="edge.source"
+        :target="edge.target"
+        :source-handle="edge.sourceHandle"
+        :target-handle="edge.targetHandle"
+        :selected="edge.selected"
+        :source-position="edge.sourcePosition"
+        :target-position="edge.targetPosition"
+        :label="edge.label"
+        :label-tyle="edge.labelStyle"
+        :label-show-bg="edge.labelShowBg"
+        :label-bg-style="edge.labelBgStyle"
+        :label-bg-padding="edge.labelBgPadding"
+        :label-bg-border-radius="edge.labelBgBorderRadius"
+        :style="edge.style"
+        :animated="edge.animated"
+        :arrow-head-type="edge.arrowHeadType"
+        :data="edge.data"
+        :class="edge.class"
+        :is-hidden="edge.isHidden"
+        :marker-end-id="edge.markerEndId ?? props.markerEndId"
         :edge-updater-radius="props.edgeUpdaterRadius"
       >
         <template #default="edgeProps">

src/container/NodeRenderer/NodeRenderer.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useStore } from '../../composables'
-import Node from '../../components/Nodes/NodeWrapper.vue'
 import { SnapGrid } from '../../types'
+import Node from '../../components/Nodes/NodeWrapper.vue'
 
 interface NodeRendererProps {
   selectNodesOnDrag?: boolean
@@ -20,15 +20,29 @@ const snapGrid = computed(() => (props.snapToGrid || store.snapToGrid ? props.sn
 </script>
 <script lang="ts">
 export default {
-  name: 'Nodes',
+  name: 'Node',
 }
 </script>
 <template>
   <div class="vue-flow__nodes" :style="{ transform }">
     <Node
       v-for="node of store.getNodes"
+      :id="node.id"
       :key="node.id"
       :node="node"
+      :vf="node.__vf"
+      :position="node.position"
+      :type="node.type"
+      :class="node.class"
+      :style="node.style"
+      :data="node.data"
+      :target-position="node.targetPosition"
+      :source-position="node.sourcePosition"
+      :is-hidden="node.isHidden"
+      :draggable="node.draggable"
+      :selectable="node.selectable"
+      :connectable="node.connectable"
+      :drag-handle="node.dragHandle"
       :snap-grid="snapGrid"
       :select-nodes-on-drag="props.selectNodesOnDrag"
     >

src/container/VueFlow/VueFlow.vue

@@ -116,15 +116,16 @@ const options = Object.assign({}, store.$state, props)
 
 const init = async (state: FlowState) => {
   // set state variables
+  const skip = ['modelValue', 'd3Zoom', 'd3Selection', 'd3ZoomHandler', 'minZoom', 'maxZoom', 'translateExtent', 'nodeExtent']
   for (const opt of Object.keys(state)) {
     const val = state[opt as keyof FlowState]
-    if (typeof val !== 'undefined' && opt !== 'modelValue' && opt !== 'elements') {
+    if (typeof val !== 'undefined' && !skip.includes(opt)) {
       if (typeof val === 'object' && !Array.isArray(val)) {
         ;(store as any)[opt] = { ...(store as any)[opt], ...val }
       } else (store as any)[opt] = val
     }
   }
-  await until(() => store.d3Zoom).not.toBeUndefined()
+  if (!store.isReady) await until(() => store.d3Zoom).not.toBeUndefined()
   store.setMinZoom(state.minZoom)
   store.setMaxZoom(state.maxZoom)
   store.setTranslateExtent(state.translateExtent)
@@ -155,12 +156,6 @@ invoke(async () => {
   }
   store.hooks.load.trigger(instance)
   store.instance = instance
-})
-
-throttledWatch(elements, store.setElements, { flush: 'post', deep: true, throttle: 10 })
-throttledWatch(store.elements, (val) => (elements.value = val), { flush: 'post', deep: true, throttle: 10 })
-
-onMounted(() => {
   watch(
     () => props,
     () => init({ ...store.$state, ...props } as FlowState),
@@ -168,6 +163,9 @@ onMounted(() => {
   )
 })
 
+throttledWatch(elements, store.setElements, { flush: 'post', deep: true, throttle: 10 })
+throttledWatch(store.elements, (val) => (elements.value = val), { flush: 'post', deep: true, throttle: 10 })
+
 const transitionName = computed(() => {
   let name = ''
   if (typeof store.loading === 'object' && store.loading.transition) {