refactor(store)!: use stored node data when re-parsing elements

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

src/store/actions.ts

@@ -96,35 +96,32 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     state.elementsSelectable = isInteractive
   }
 
-  function getParent(root: Node[], id: string): GraphNode | undefined {
+  const getParent = (root: Node[], id: string): GraphNode | undefined => {
     let node
-
     root.some((n) => {
-      if (n.id === id) {
-        return (node = n)
-      }
-      if (n.children) {
-        return (node = getParent(n.children, id))
-      }
+      if (n.id === id) return (node = n)
+      if (n.children) return (node = getParent(n.children, id))
       return false
     })
     return node
   }
 
-  const setNodes: FlowActions['setNodes'] = (nodes, extent: CoordinateExtent) => {
-    const parseChildren = (n: Node, p?: GraphNode, arr: GraphNode[] = []) => {
-      const parent = typeof p === 'undefined' || typeof p !== 'object' ? getParent(arr, n.id) : p
-      const parsed = parseNode(n, extent, {
-        parentNode: parent,
-      })
-      arr.push(parsed)
-      if (n.children && n.children.length) {
-        n.children.forEach((c) => parseChildren(c, parsed, arr))
-      }
+  const parseChildren = (n: Node, p: GraphNode | undefined, arr: GraphNode[], extent: CoordinateExtent) => {
+    const parent = typeof p === 'undefined' || typeof p !== 'object' ? getParent(arr, n.id) : p
+    const parsed = parseNode(n, extent, {
+      ...getters.getNode.value(n.id),
+      parentNode: parent,
+    })
+    arr.push(parsed)
+    if (n.children && n.children.length) {
+      n.children.forEach((c) => parseChildren(c, parsed, arr, extent))
     }
+  }
+
+  const setNodes: FlowActions['setNodes'] = (nodes, extent: CoordinateExtent) => {
     nodes = nodes.flatMap((node) => {
       const children: GraphNode[] = []
-      parseChildren(node, undefined, children)
+      parseChildren(node, undefined, children, extent)
       return children
     })
     state.nodes = <GraphNode[]>nodes
@@ -139,6 +136,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
         console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
 
       return parseEdge(edge, {
+        ...getters.getEdge.value(edge.id),
         sourceNode,
         targetNode,
       })

src/utils/graph.ts

@@ -163,40 +163,54 @@ export const pointToRendererPoint = (
 export const onLoadProject = (currentStore: FlowStore) => (position: XYPosition) =>
   pointToRendererPoint(position, currentStore.transform, currentStore.snapToGrid, currentStore.snapGrid)
 
-export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: Partial<GraphNode>): GraphNode => ({
-  ...defaults,
-  ...node,
-  id: node.id.toString(),
-  type: node.type ?? 'default',
-  dimensions: {
-    width: 0,
-    height: 0,
-  },
-  handleBounds: {
-    source: [],
-    target: [],
-  },
-  computedPosition: {
-    z: typeof node.style?.zIndex === 'string' ? parseInt(node.style?.zIndex) : node.style?.zIndex ?? 0,
-    ...clampPosition(node.position, nodeExtent),
-  },
-  isParent: !!(node.children && node.children.length),
-  dragging: false,
-})
+export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: Partial<GraphNode>): GraphNode => {
+  defaults = !isGraphNode(node)
+    ? {
+        type: node.type ?? 'default',
+        dimensions: {
+          width: 0,
+          height: 0,
+        },
+        handleBounds: {
+          source: [],
+          target: [],
+        },
+        computedPosition: {
+          z: typeof node.style?.zIndex === 'string' ? parseInt(node.style?.zIndex) : node.style?.zIndex ?? 0,
+          ...clampPosition(node.position, nodeExtent),
+        },
+        isParent: !!(node.children && node.children.length),
+        dragging: false,
+        ...defaults,
+      }
+    : defaults
+  return {
+    ...node,
+    ...(defaults as GraphNode),
+    id: node.id.toString(),
+  }
+}
 
 export const parseEdge = (
   edge: Edge,
   defaults: Partial<GraphEdge> & { sourceNode: GraphNode; targetNode: GraphNode },
-): GraphEdge => ({
-  ...defaults,
-  ...edge,
-  source: edge.source.toString(),
-  target: edge.target.toString(),
-  sourceHandle: edge.sourceHandle ? edge.sourceHandle.toString() : undefined,
-  targetHandle: edge.targetHandle ? edge.targetHandle.toString() : undefined,
-  id: edge.id.toString(),
-  type: edge.type ?? 'default',
-})
+): GraphEdge => {
+  defaults = !isGraphEdge(edge)
+    ? {
+        sourceHandle: edge.sourceHandle ? edge.sourceHandle.toString() : undefined,
+        targetHandle: edge.targetHandle ? edge.targetHandle.toString() : undefined,
+        type: edge.type ?? 'default',
+        source: edge.source.toString(),
+        target: edge.target.toString(),
+        ...defaults,
+      }
+    : defaults
+  return {
+    ...edge,
+    ...defaults,
+    id: edge.id.toString(),
+  }
+}
 
 const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({
   x: Math.min(box1.x, box2.x),