update: pass store state as props to edge-renderer and edge

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

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -1,17 +1,26 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ConnectionLineType } from '../../types'
-import { useStore } from '../../composables'
-import Edge from '../../components/Edges/EdgeWrapper.vue'
+import { ConnectionLineType, Dimensions, Edge, EdgeComponent, GraphNode, HandleType, Transform } from '../../types'
+import { getSourceTargetNodes } from '../../utils'
+import EdgeWrapper from '../../components/Edges/EdgeWrapper.vue'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
 interface EdgeRendererProps {
+  edges: Edge[]
+  nodes: GraphNode[]
+  edgeTypes: Record<string, EdgeComponent>
+  transform: Transform
+  dimensions: Dimensions
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
   arrowHeadColor?: string
   markerEndId?: string
+  elementsSelectable?: boolean
   edgeUpdaterRadius?: number
+  connectionNodeId?: string
+  connectionHandleType?: HandleType
+  nodesConnectable?: boolean
 }
 
 const props = withDefaults(defineProps<EdgeRendererProps>(), {
@@ -20,14 +29,35 @@ const props = withDefaults(defineProps<EdgeRendererProps>(), {
   edgeUpdaterRadius: 10,
 })
 
-const store = useStore()
+const getType = (type: string) => {
+  const t = type ?? 'default'
+  let edgeType = props.edgeTypes[t]
+  if (!edgeType) {
+    edgeType = props.edgeTypes.default
+    console.warn(`Edge type "${type}" not found. Using fallback type "default".`)
+  }
+  return edgeType
+}
 
-const sourceNode = computed(() => store.nodes.find((n) => n.id === store.connectionNodeId))
+const sourceNode = computed(() => props.nodes.find((n) => n.id === props.connectionNodeId))
 const connectionLineVisible = computed(
-  () => !!(store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType),
+  () =>
+    !!(
+      sourceNode.value &&
+      (typeof sourceNode.value.selectable === 'undefined' ? props.nodesConnectable : sourceNode.value.selectable) &&
+      props.connectionNodeId &&
+      props.connectionHandleType
+    ),
 )
-const dimensions = computed(() => store.dimensions)
-const transform = computed(() => `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`)
+
+const transform = computed(() => `translate(${props.transform[0]},${props.transform[1]}) scale(${props.transform[2]})`)
+
+const sourceTargetNodes = (edge: Edge) => {
+  const { sourceNode, targetNode } = getSourceTargetNodes(edge, props.nodes)
+  if (!sourceNode) console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
+  if (!targetNode) console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
+  return { sourceNode, targetNode }
+}
 </script>
 <script lang="ts">
 export default {
@@ -35,20 +65,23 @@ export default {
 }
 </script>
 <template>
-  <svg :width="dimensions.width" :height="dimensions.height" class="vue-flow__edges">
+  <svg :width="props.dimensions.width" :height="props.dimensions.height" class="vue-flow__edges">
     <MarkerDefinitions :color="props.arrowHeadColor" />
     <g :transform="transform">
-      <Edge
-        v-for="(edge, i) of store.getEdges"
+      <EdgeWrapper
+        v-for="(edge, i) of props.edges"
         :id="edge.id"
         :key="`${edge.id}-${i}`"
         :edge="edge"
+        :source-target-nodes="sourceTargetNodes(edge)"
         :type="edge.type"
+        :component="getType(edge.type)"
         :source="edge.source"
         :target="edge.target"
         :source-handle="edge.sourceHandle"
         :target-handle="edge.targetHandle"
         :selected="edge.selected"
+        :selectable="props.elementsSelectable"
         :source-position="edge.sourcePosition"
         :target-position="edge.targetPosition"
         :label="edge.label"
@@ -69,7 +102,7 @@ export default {
         <template #default="edgeProps">
           <slot :name="`edge-${edge.type}`" v-bind="edgeProps"></slot>
         </template>
-      </Edge>
+      </EdgeWrapper>
       <ConnectionLine
         v-if="connectionLineVisible && sourceNode"
         :source-node="sourceNode"

src/container/NodeRenderer/NodeRenderer.vue

@@ -38,7 +38,7 @@ const snapGrid = computed(() => (props.snapToGrid ? props.snapGrid : undefined))
 </script>
 <script lang="ts">
 export default {
-  name: 'Node',
+  name: 'Nodes',
 }
 </script>
 <template>

src/container/VueFlow/VueFlow.vue

@@ -231,6 +231,15 @@ const transitionName = computed(() => {
                 <slot name="edge-renderer" v-bind="{ edges: store.getEdges, edgeTypes: store.getEdgeTypes }">
                   <EdgeRenderer
                     :key="`edge-renderer-${store.$id}`"
+                    :transform="store.transform"
+                    :dimensions="store.dimensions"
+                    :edges="store.getEdges"
+                    :edge-types="store.getEdgeTypes"
+                    :nodes="store.getNodes"
+                    :elements-selectable="store.elementsSelectable"
+                    :connection-node-id="store.connectionNodeId"
+                    :connection-handle-type="store.connectionHandleType"
+                    :nodes-connectable="store.nodesConnectable"
                     :connection-line-type="store.connectionLineType"
                     :connection-line-style="store.connectionLineStyle"
                     :arrow-head-color="store.arrowHeadColor"

src/container/ZoomPane/ZoomPane.vue

@@ -176,10 +176,6 @@ invoke(async () => {
 })
 
 const { width, height } = useElementBounding(zoomPaneEl)
-store.dimensions = {
-  width: width.value,
-  height: height.value,
-}
 
 // skip waiting for ssr
 const window = useWindow()
@@ -191,7 +187,7 @@ watch(
     store.dimensions.width = newWidth
     store.dimensions.height = newHeight
   },
-  { flush: 'pre' },
+  { flush: 'sync', immediate: true },
 )
 watch(
   transform,
@@ -201,7 +197,7 @@ watch(
       clamp(val.y, store.translateExtent[0][0], store.translateExtent[1][0]),
       clamp(val.zoom, store.translateExtent[0][0], store.translateExtent[1][0]),
     ]),
-  { flush: 'pre' },
+  { flush: 'sync', immediate: true },
 )
 </script>
 <script lang="ts">