feat(nested-nodes): change data structure to flat array of nodes

src/container/EdgeRenderer/utils.ts

@@ -3,7 +3,6 @@ import { ComponentType } from 'react';
 import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
 import { rectToBox } from '../../utils/graph';
-import { nodeHelper } from '../../utils/nodes';
 
 import {
   EdgeTypesType,
@@ -172,18 +171,16 @@ type SourceTargetNode = {
 };
 
 export const getSourceTargetNodes = (edge: Edge, nodes: Node[]): SourceTargetNode => {
-  return nodeHelper(nodes)
-    .flatten()
-    .reduce(
-      (res, node) => {
-        if (node.id === edge.source) {
-          res.sourceNode = node;
-        }
-        if (node.id === edge.target) {
-          res.targetNode = node;
-        }
-        return res;
-      },
-      { sourceNode: null, targetNode: null } as SourceTargetNode
-    );
+  return nodes.reduce(
+    (res, node) => {
+      if (node.id === edge.source) {
+        res.sourceNode = node;
+      }
+      if (node.id === edge.target) {
+        res.targetNode = node;
+      }
+      return res;
+    },
+    { sourceNode: null, targetNode: null } as SourceTargetNode
+  );
 };

src/container/NodeRenderer/index.tsx

@@ -77,8 +77,16 @@ function Nodes({
       typeof node.height !== 'undefined';
     let childRect;
 
-    if (node.childNodes) {
-      childRect = getRectOfNodes(node.childNodes);
+    const childNodes = nodes.filter((n) => n.parentNode === node.id);
+
+    // if (childNodes.length) {
+    //   console.log(node.id, childNodes, getRectOfNodes(childNodes));
+    // }
+
+    // console.log(childNodes);
+
+    if (childNodes.length) {
+      childRect = getRectOfNodes(childNodes);
       node.position = node.isDragging
         ? node.position
         : { x: Math.round(childRect.x) - 10, y: Math.round(childRect.y) - 10 };
@@ -126,20 +134,6 @@ function Nodes({
           dragHandle={node.dragHandle}
           zIndex={3 + recursionDepth}
         />
-        {node.childNodes && (
-          <MemoizedNodes
-            nodes={node.childNodes}
-            snapToGrid={snapToGrid}
-            snapGrid={snapGrid}
-            nodesDraggable={nodesDraggable}
-            nodesConnectable={nodesConnectable}
-            resizeObserver={resizeObserver}
-            elementsSelectable={elementsSelectable}
-            scale={scale}
-            recursionDepth={recursionDepth + 1}
-            {...props}
-          />
-        )}
       </Fragment>
     );
   });