wip: multiple edge renderers

src/hooks/useVisibleEdges.ts

@@ -1,10 +1,40 @@
 import { useCallback } from 'react';
 
 import { useStore } from '../store';
-import { isEdgeVisible, getSourceTargetNodes } from '../container/EdgeRenderer/utils';
-import { ReactFlowState } from '../types';
+import { isEdgeVisible } from '../container/EdgeRenderer/utils';
+import { ReactFlowState, NodeLookup, Edge } from '../types';
 
-function useVisibleEdges(onlyRenderVisible: boolean) {
+function groupEdgesByTreeLevel(edges: Edge[], nodeLookup: NodeLookup) {
+  let maxLevel = -1;
+
+  const levelLookup = edges.reduce<Record<string, Edge[]>>((tree, edge) => {
+    const treeLevel = Math.max(
+      nodeLookup.get(edge.source)?.treeLevel || 0,
+      nodeLookup.get(edge.target)?.treeLevel || 0
+    );
+    if (tree[treeLevel]) {
+      tree[treeLevel].push(edge);
+    } else {
+      tree[treeLevel] = [edge];
+    }
+
+    maxLevel = treeLevel > maxLevel ? treeLevel : maxLevel;
+
+    return tree;
+  }, {});
+
+  return Object.entries(levelLookup).map(([key, edges]) => {
+    const level = +key;
+
+    return {
+      edges,
+      level,
+      isMaxLevel: level === maxLevel,
+    };
+  });
+}
+
+function useVisibleEdges(onlyRenderVisible: boolean, nodeLookup: NodeLookup) {
   const edges = useStore(
     useCallback(
       (s: ReactFlowState) => {
@@ -13,7 +43,8 @@ function useVisibleEdges(onlyRenderVisible: boolean) {
         }
 
         return s.edges.filter((e) => {
-          const { sourceNode, targetNode } = getSourceTargetNodes(e, s.nodes);
+          const sourceNode = nodeLookup.get(e.source);
+          const targetNode = nodeLookup.get(e.target);
 
           return (
             sourceNode?.width &&
@@ -21,8 +52,8 @@ function useVisibleEdges(onlyRenderVisible: boolean) {
             targetNode?.width &&
             targetNode?.height &&
             isEdgeVisible({
-              sourcePos: sourceNode.position,
-              targetPos: targetNode.position,
+              sourcePos: sourceNode.position || { x: 0, y: 0 },
+              targetPos: targetNode.position || { x: 0, y: 0 },
               sourceWidth: sourceNode.width,
               sourceHeight: sourceNode.height,
               targetWidth: targetNode.width,
@@ -34,11 +65,11 @@ function useVisibleEdges(onlyRenderVisible: boolean) {
           );
         });
       },
-      [onlyRenderVisible]
+      [onlyRenderVisible, nodeLookup]
     )
   );
 
-  return edges;
+  return groupEdgesByTreeLevel(edges, nodeLookup);
 }
 
 export default useVisibleEdges;

src/hooks/useVisibleNodes.ts

@@ -2,26 +2,7 @@ import { useCallback } from 'react';
 
 import { useStore } from '../store';
 import { getNodesInside } from '../utils/graph';
-import { ReactFlowState, Node, NodeRendererNode } from '../types';
-
-function getChildNodes(nodes: Node[], parent?: Node): NodeRendererNode[] {
-  const children: NodeRendererNode[] = [];
-  const remaining: Node[] = [];
-
-  for (let i = 0; i < nodes.length; i++) {
-    const n = nodes[i];
-    if ((!parent && !n.parentNode) || n.parentNode === parent?.id) {
-      children.push({ node: n });
-    } else {
-      remaining.push(n);
-    }
-  }
-
-  return children.map((child) => {
-    child.childNodes = getChildNodes(remaining, child.node);
-    return child;
-  });
-}
+import { ReactFlowState } from '../types';
 
 function useVisibleNodes(onlyRenderVisible: boolean) {
   const nodes = useStore(
@@ -35,7 +16,7 @@ function useVisibleNodes(onlyRenderVisible: boolean) {
     )
   );
 
-  return getChildNodes(nodes);
+  return nodes;
 }
 
 export default useVisibleNodes;