refactor(store): remove nodes/edges field

* nodes/edges are accessed via getter - that retains reactivity on elements

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

src/store/stateStore.ts

@@ -1,6 +1,6 @@
 import microDiff from 'microdiff'
 import { setActivePinia, createPinia, defineStore, StoreDefinition, acceptHMRUpdate } from 'pinia'
-import { FlowState, FlowActions, Elements, FlowGetters, GraphNode, NextElements, GraphEdge, FlowElements } from '~/types'
+import { FlowState, FlowActions, Elements, FlowGetters, GraphNode, NextElements, GraphEdge } from '~/types'
 import {
   clampPosition,
   getConnectedEdges,
@@ -13,6 +13,7 @@ import {
   isGraphNode,
   getSourceTargetNodes,
   isEdge,
+  isGraphEdge,
 } from '~/utils'
 import parseElementsWorker from '~/workers/parseElements'
 
@@ -58,26 +59,31 @@ export default (id: string, preloadedState: FlowState) => {
             )
           : nodes
 
-        return n.filter((node) => !node.isHidden)
+        return n.filter((node) => !node.isHidden) ?? []
       },
       getEdges(): GraphEdge[] {
         const edges = this.elements.filter(isEdge)
-        return edges
+        return (
-          .filter((edge) => !edge.isHidden)
+          edges
-          .map((edge) => {
+            .filter((edge) => !edge.isHidden)
-            const { sourceNode, targetNode } = getSourceTargetNodes(edge, this.getNodes)
+            .map((edge) => {
-            if (!sourceNode) console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
+              if (!isGraphEdge(edge)) {
-            if (!targetNode) console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
+                const { sourceNode, targetNode } = getSourceTargetNodes(edge, this.getNodes)
+                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 {
+                return {
-              ...edge,
+                  ...edge,
-              sourceTargetNodes: {
+                  sourceTargetNodes: {
-                sourceNode,
+                    sourceNode,
-                targetNode,
+                    targetNode,
-              },
+                  },
-            }
+                }
-          })
+              }
-          .filter(({ sourceTargetNodes: { sourceNode, targetNode } }) => !!(sourceNode && targetNode))
+              return edge
+            })
+            .filter(({ sourceTargetNodes: { sourceNode, targetNode } }) => !!(sourceNode && targetNode)) ?? []
+        )
       },
       getSelectedNodes(): GraphNode[] {
         return this.selectedElements?.filter(isGraphNode) ?? []
@@ -90,13 +96,13 @@ export default (id: string, preloadedState: FlowState) => {
           nextNodes: [],
         }
         if (!this.worker || import.meta.env.SSR || typeof window === 'undefined') {
-          next = await parseElements(elements, this.nodes, this.edges, this.nodeExtent)
+          next = await parseElements(elements, this.getNodes, this.getEdges, this.nodeExtent)
         } else if (this.worker) {
           const { workerFn, workerTerminate } = parseElementsWorker()
           const res = await workerFn(
             deepUnref(elements),
-            deepUnref(this.nodes),
+            deepUnref(this.getNodes),
-            deepUnref(this.edges),
+            deepUnref(this.getEdges),
             deepUnref(this.nodeExtent),
           ).catch((err) => {
             console.error(err)
@@ -105,9 +111,9 @@ export default (id: string, preloadedState: FlowState) => {
           if (res) {
             workerTerminate('SUCCESS')
             next = res
-          } else next = await parseElements(elements, this.nodes, this.edges, this.nodeExtent)
+          } else next = await parseElements(elements, this.getNodes, this.getEdges, this.nodeExtent)
         } else {
-          next = await parseElements(elements, this.nodes, this.edges, this.nodeExtent)
+          next = await parseElements(elements, this.getNodes, this.getEdges, this.nodeExtent)
         }
         this.elements = [...next.nextNodes, ...next.nextEdges]
       },
@@ -177,12 +183,6 @@ export default (id: string, preloadedState: FlowState) => {
       },
       setNodeExtent(nodeExtent) {
         this.nodeExtent = nodeExtent
-        this.nodes = this.nodes.map((node) => {
-          return {
-            ...node,
-            position: node.position ? clampPosition(node.position, nodeExtent) : { x: 0, y: 0 },
-          }
-        })
       },
       resetSelectedElements() {
         this.selectedElements = undefined
@@ -204,10 +204,8 @@ export default (id: string, preloadedState: FlowState) => {
         this.elementsSelectable = isInteractive
       },
       async addElements(elements: Elements) {
-        const { nextNodes, nextEdges } = await parseElements(elements, this.nodes, this.edges, this.nodeExtent)
+        const { nextNodes, nextEdges } = await parseElements(elements, this.getNodes, this.getEdges, this.nodeExtent)
         this.elements = [...this.elements, ...nextNodes, ...nextEdges]
-        this.nodes = [...this.nodes, ...nextNodes]
-        this.edges = [...this.edges, ...nextEdges]
       },
     },
   })

src/types/store.ts

@@ -31,8 +31,6 @@ export interface FlowState extends FlowOptions {
   instance?: FlowInstance
 
   elements: FlowElements
-  nodes: GraphNode[]
-  edges: Edge[]
 
   d3Zoom?: D3Zoom
   d3Selection?: D3Selection

src/utils/store.ts

@@ -7,9 +7,9 @@ import {
   NodeExtent,
   GraphNode,
   PanOnScrollMode,
-  GraphEdge,
   DefaultNodeTypes,
   DefaultEdgeTypes,
+  Edge,
 } from '~/types'
 import { DefaultNode, InputNode, OutputNode, BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components'
 import { createHooks } from '~/composables'
@@ -34,8 +34,6 @@ export const initialState = (): FlowState => ({
   },
   transform: [0, 0, 1],
   elements: [],
-  nodes: [],
-  edges: [],
   selectedElements: undefined,
   selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
 
@@ -99,7 +97,7 @@ export const initialState = (): FlowState => ({
   vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
 })
 
-export const parseElements = async (elements: Elements, nodes: GraphNode[], edges: GraphEdge[], nodeExtent: NodeExtent) =>
+export const parseElements = async (elements: Elements, nodes: GraphNode[], edges: Edge[], nodeExtent: NodeExtent) =>
   new Promise<NextElements>((resolve) => {
     const { nextEdges, nextNodes }: NextElements = {
       nextNodes: [],