wip: multiple edge renderers

example/src/Basic/index.tsx

@@ -28,7 +28,7 @@ const initialNodes: Node[] = [
     data: { label: 'Node 4' },
     position: { x: 100, y: 200 },
     className: 'light',
-    style: { backgroundColor: 'rgba(255, 0, 0, .2)' },
+    style: { backgroundColor: 'rgba(255, 0, 0, 1)' },
     width: 600,
     height: 300,
   },
@@ -44,7 +44,7 @@ const initialNodes: Node[] = [
     data: { label: 'Node 4b' },
     position: { x: 80, y: 80 },
     className: 'light',
-    style: { backgroundColor: 'rgba(255, 0, 0, .2)' },
+    style: { backgroundColor: 'rgba(255, 255, 0, 0.2)' },
     parentNode: '4',
     height: 200,
     width: 350,

src/components/Nodes/wrapNode.tsx

@@ -67,7 +67,8 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
     const nodeStyle: CSSProperties = useMemo(
       () => ({
-        zIndex: isSelected ? zIndex + 1 : zIndex,
+        zIndex,
+        // zIndex: isSelected ? zIndex + 1 : zIndex,
         transform: `translate(${xPos}px,${yPos}px)`,
         pointerEvents:
           isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave ? 'all' : 'none',

src/container/EdgeRenderer/index.tsx

@@ -235,8 +235,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
     connectionMode,
   } = useStore(selector, shallow);
   const nodeLookup = useNodeLookup();
-
+  const edgeTree = useVisibleEdges(props.onlyRenderVisibleElements, nodeLookup);
-  const edges = useVisibleEdges(props.onlyRenderVisibleElements);
 
   if (!width) {
     return null;
@@ -246,59 +245,62 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
   const renderConnectionLine = connectionNodeId && connectionHandleType;
 
   return (
-    <svg width={width} height={height} className="react-flow__edges">
+    <>
-      <MarkerDefinitions defaultColor={defaultMarkerColor} />
+      {edgeTree.map(({ level, edges, isMaxLevel }) => (
-      <g transform={`translate(${transform[0]},${transform[1]}) scale(${transform[2]})`}>
+        <svg key={level} style={{ zIndex: 6 + level }} width={width} height={height} className="react-flow__edges">
-        {edges.map((edge: Edge) => {
+          {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} />}
-          // @todo: getSourceTargetNodes is called many times during dragging/creating edges
+          <g>
-          const sourceNode = nodeLookup.get(edge.source);
+            {edges.map((edge: Edge) => {
-          const targetNode = nodeLookup.get(edge.target);
+              const sourceNode = nodeLookup.get(edge.source);
+              const targetNode = nodeLookup.get(edge.target);
 
-          return (
+              return (
-            <Edge
+                <Edge
-              key={edge.id}
+                  key={edge.id}
-              edge={edge}
+                  edge={edge}
-              sourceNodeWidth={sourceNode?.width}
+                  sourceNodeWidth={sourceNode?.width}
-              sourceNodeHeight={sourceNode?.height}
+                  sourceNodeHeight={sourceNode?.height}
-              sourceNodeX={sourceNode?.positionAbsolute?.x}
+                  sourceNodeX={sourceNode?.positionAbsolute?.x}
-              sourceNodeY={sourceNode?.positionAbsolute?.y}
+                  sourceNodeY={sourceNode?.positionAbsolute?.y}
-              sourceNodeHandleBounds={sourceNode?.handleBounds}
+                  sourceNodeHandleBounds={sourceNode?.handleBounds}
-              targetNodeWidth={targetNode?.width}
+                  targetNodeWidth={targetNode?.width}
-              targetNodeHeight={targetNode?.height}
+                  targetNodeHeight={targetNode?.height}
-              targetNodeX={targetNode?.positionAbsolute?.x}
+                  targetNodeX={targetNode?.positionAbsolute?.x}
-              targetNodeY={targetNode?.positionAbsolute?.y}
+                  targetNodeY={targetNode?.positionAbsolute?.y}
-              targetNodeHandleBounds={targetNode?.handleBounds}
+                  targetNodeHandleBounds={targetNode?.handleBounds}
-              elementsSelectable={elementsSelectable}
+                  elementsSelectable={elementsSelectable}
-              onEdgeContextMenu={props.onEdgeContextMenu}
+                  onEdgeContextMenu={props.onEdgeContextMenu}
-              onEdgeMouseEnter={props.onEdgeMouseEnter}
+                  onEdgeMouseEnter={props.onEdgeMouseEnter}
-              onEdgeMouseMove={props.onEdgeMouseMove}
+                  onEdgeMouseMove={props.onEdgeMouseMove}
-              onEdgeMouseLeave={props.onEdgeMouseLeave}
+                  onEdgeMouseLeave={props.onEdgeMouseLeave}
-              edgeUpdaterRadius={props.edgeUpdaterRadius}
+                  edgeUpdaterRadius={props.edgeUpdaterRadius}
-              onEdgeDoubleClick={props.onEdgeDoubleClick}
+                  onEdgeDoubleClick={props.onEdgeDoubleClick}
-              onEdgeUpdateStart={props.onEdgeUpdateStart}
+                  onEdgeUpdateStart={props.onEdgeUpdateStart}
-              onEdgeUpdateEnd={props.onEdgeUpdateEnd}
+                  onEdgeUpdateEnd={props.onEdgeUpdateEnd}
-              onEdgeUpdate={props.onEdgeUpdate}
+                  onEdgeUpdate={props.onEdgeUpdate}
-              edgeTypes={props.edgeTypes}
+                  edgeTypes={props.edgeTypes}
-              connectionMode={connectionMode}
+                  connectionMode={connectionMode}
-            />
+                />
-          );
+              );
-        })}
+            })}
-        {renderConnectionLine && (
+            {renderConnectionLine && isMaxLevel && (
-          <ConnectionLine
+              <ConnectionLine
-            connectionNodeId={connectionNodeId!}
+                connectionNodeId={connectionNodeId!}
-            connectionHandleId={connectionHandleId}
+                connectionHandleId={connectionHandleId}
-            connectionHandleType={connectionHandleType!}
+                connectionHandleType={connectionHandleType!}
-            connectionPositionX={connectionPosition.x}
+                connectionPositionX={connectionPosition.x}
-            connectionPositionY={connectionPosition.y}
+                connectionPositionY={connectionPosition.y}
-            transform={transform}
+                transform={transform}
-            connectionLineStyle={connectionLineStyle}
+                connectionLineStyle={connectionLineStyle}
-            connectionLineType={connectionLineType}
+                connectionLineType={connectionLineType}
-            isConnectable={nodesConnectable}
+                isConnectable={nodesConnectable}
-            CustomConnectionLineComponent={connectionLineComponent}
+                CustomConnectionLineComponent={connectionLineComponent}
-          />
+              />
-        )}
+            )}
-      </g>
+          </g>
-    </svg>
+        </svg>
+      ))}
+    </>
   );
 };
 

src/container/GraphView/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, memo } from 'react';
 
-import { useStoreApi } from '../../store';
+import { useStoreApi, useStore } from '../../store';
 import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
@@ -82,7 +82,8 @@ const GraphView = ({
 }: GraphViewProps) => {
   const isInitialized = useRef<boolean>(false);
   const store = useStoreApi();
-  const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
+  const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView, initialized } = useZoomPanHelper();
+  const transform = useStore((s) => s.transform);
 
   useEffect(() => {
     if (!isInitialized.current && initialized) {
@@ -92,7 +93,7 @@ const GraphView = ({
           zoomIn,
           zoomOut,
           zoomTo,
-          setTransform: transform,
+          setTransform: setTransform,
           project: onLoadProject(store.getState),
           getNodes: onLoadGetNodes(store.getState),
           getEdges: onLoadGetEdges(store.getState),
@@ -104,6 +105,11 @@ const GraphView = ({
     }
   }, [onLoad, zoomIn, zoomOut, zoomTo, transform, fitView, initialized]);
 
+  const transformStyle = {
+    transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
+    transformOrigin: '0 0',
+  };
+
   return (
     <FlowRenderer
       onPaneClick={onPaneClick}
@@ -132,38 +138,40 @@ const GraphView = ({
       onSelectionContextMenu={onSelectionContextMenu}
       preventScrolling={preventScrolling}
     >
-      <NodeRenderer
+      <div className="react-flow__container" style={{ zIndex: 2, ...transformStyle }}>
-        nodeTypes={nodeTypes}
+        <EdgeRenderer
-        onNodeClick={onNodeClick}
+          edgeTypes={edgeTypes}
-        onNodeDoubleClick={onNodeDoubleClick}
+          onEdgeClick={onEdgeClick}
-        onNodeMouseEnter={onNodeMouseEnter}
+          onEdgeDoubleClick={onEdgeDoubleClick}
-        onNodeMouseMove={onNodeMouseMove}
+          connectionLineType={connectionLineType}
-        onNodeMouseLeave={onNodeMouseLeave}
+          connectionLineStyle={connectionLineStyle}
-        onNodeContextMenu={onNodeContextMenu}
+          connectionLineComponent={connectionLineComponent}
-        onNodeDragStop={onNodeDragStop}
+          onEdgeUpdate={onEdgeUpdate}
-        onNodeDrag={onNodeDrag}
+          onlyRenderVisibleElements={onlyRenderVisibleElements}
-        onNodeDragStart={onNodeDragStart}
+          onEdgeContextMenu={onEdgeContextMenu}
-        selectNodesOnDrag={selectNodesOnDrag}
+          onEdgeMouseEnter={onEdgeMouseEnter}
-        onlyRenderVisibleElements={onlyRenderVisibleElements}
+          onEdgeMouseMove={onEdgeMouseMove}
-      />
+          onEdgeMouseLeave={onEdgeMouseLeave}
-      <EdgeRenderer
+          onEdgeUpdateStart={onEdgeUpdateStart}
-        edgeTypes={edgeTypes}
+          onEdgeUpdateEnd={onEdgeUpdateEnd}
-        onEdgeClick={onEdgeClick}
+          edgeUpdaterRadius={edgeUpdaterRadius}
-        onEdgeDoubleClick={onEdgeDoubleClick}
+          defaultMarkerColor={defaultMarkerColor}
-        connectionLineType={connectionLineType}
+        />
-        connectionLineStyle={connectionLineStyle}
+        <NodeRenderer
-        connectionLineComponent={connectionLineComponent}
+          nodeTypes={nodeTypes}
-        onEdgeUpdate={onEdgeUpdate}
+          onNodeClick={onNodeClick}
-        onlyRenderVisibleElements={onlyRenderVisibleElements}
+          onNodeDoubleClick={onNodeDoubleClick}
-        onEdgeContextMenu={onEdgeContextMenu}
+          onNodeMouseEnter={onNodeMouseEnter}
-        onEdgeMouseEnter={onEdgeMouseEnter}
+          onNodeMouseMove={onNodeMouseMove}
-        onEdgeMouseMove={onEdgeMouseMove}
+          onNodeMouseLeave={onNodeMouseLeave}
-        onEdgeMouseLeave={onEdgeMouseLeave}
+          onNodeContextMenu={onNodeContextMenu}
-        onEdgeUpdateStart={onEdgeUpdateStart}
+          onNodeDragStop={onNodeDragStop}
-        onEdgeUpdateEnd={onEdgeUpdateEnd}
+          onNodeDrag={onNodeDrag}
-        edgeUpdaterRadius={edgeUpdaterRadius}
+          onNodeDragStart={onNodeDragStart}
-        defaultMarkerColor={defaultMarkerColor}
+          selectNodesOnDrag={selectNodesOnDrag}
-      />
+          onlyRenderVisibleElements={onlyRenderVisibleElements}
+        />
+      </div>
     </FlowRenderer>
   );
 };

src/container/NodeRenderer/index.tsx

@@ -1,16 +1,8 @@
-import React, { memo, useMemo, ComponentType, MouseEvent, Fragment } from 'react';
+import React, { memo, useMemo, ComponentType, MouseEvent } from 'react';
 import shallow from 'zustand/shallow';
 
 import { useStore } from '../../store';
-import {
+import { Node, NodeTypesType, ReactFlowState, WrapNodeProps, SnapGrid, NodeRendererNode } from '../../types';
-  Node,
-  NodeTypesType,
-  ReactFlowState,
-  WrapNodeProps,
-  SnapGrid,
-  NodeRendererNode,
-  NodeLookup,
-} from '../../types';
 import useVisibleNodes from '../../hooks/useVisibleNodes';
 import useNodeLookup from '../../hooks/useNodeLookup';
 interface NodeRendererProps {
@@ -39,9 +31,12 @@ const selector = (s: ReactFlowState) => ({
   nodeLookup: s.nodeLookup,
 });
 
-interface NodesProps extends NodeRendererProps {
+interface NodeProps extends NodeRendererProps {
-  nodes: NodeRendererNode[];
+  node: Node;
-  nodeLookup: NodeLookup;
+  nodeType: string;
+  childNodes?: NodeRendererNode[];
+  xPos?: number;
+  yPos?: number;
   isDraggable?: boolean;
   resizeObserver: ResizeObserver | null;
   scale: number;
@@ -50,16 +45,8 @@ interface NodesProps extends NodeRendererProps {
   nodesDraggable: boolean;
   nodesConnectable: boolean;
   elementsSelectable: boolean;
-  recursionDepth: number;
+  treeLevel?: number;
-  parentId?: string;
+  isParentNode?: boolean;
-}
-
-interface NodeProps extends Omit<NodesProps, 'nodes' | 'nodeLookup'> {
-  node: Node;
-  nodeType: string;
-  childNodes?: NodeRendererNode[];
-  positionAbsoluteX?: number;
-  positionAbsoluteY?: number;
 }
 
 function Node({
@@ -74,9 +61,10 @@ function Node({
   nodesDraggable,
   nodesConnectable,
   elementsSelectable,
-  recursionDepth,
+  treeLevel = 0,
-  positionAbsoluteX,
+  xPos,
-  positionAbsoluteY,
+  yPos,
+  isParentNode = false,
   ...props
 }: NodeProps) {
   // const onNodesChange = useStore((s) => s.onNodesChange);
@@ -93,8 +81,6 @@ function Node({
     typeof node.width !== 'undefined' &&
     typeof node.height !== 'undefined';
 
-  const isParentNode = !!childNodes?.length;
-
   return (
     <NodeComponent
       id={node.id}
@@ -105,8 +91,8 @@ function Node({
       sourcePosition={node.sourcePosition}
       targetPosition={node.targetPosition}
       isHidden={node.isHidden}
-      xPos={positionAbsoluteX || 0}
+      xPos={xPos || 0}
-      yPos={positionAbsoluteY || 0}
+      yPos={yPos || 0}
       width={node.width}
       height={node.height}
       isDragging={node.isDragging}
@@ -130,76 +116,12 @@ function Node({
       isConnectable={isConnectable}
       resizeObserver={resizeObserver}
       dragHandle={node.dragHandle}
-      zIndex={3 + recursionDepth}
+      zIndex={6 + treeLevel}
       isParentNode={isParentNode}
     />
   );
 }
 
-function Nodes({
-  nodes,
-  nodeLookup,
-  isDraggable,
-  resizeObserver,
-  scale,
-  snapToGrid,
-  snapGrid,
-  nodesDraggable,
-  nodesConnectable,
-  elementsSelectable,
-  recursionDepth,
-  ...props
-}: NodesProps): any {
-  return nodes.map(({ node, childNodes }) => {
-    const nodeType = node.type || 'default';
-    const lookupNode = nodeLookup.get(node.id);
-
-    if (!props.nodeTypes[nodeType]) {
-      console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
-    }
-
-    return (
-      <Fragment key={node.id}>
-        <Node
-          node={node}
-          childNodes={childNodes}
-          nodeType={nodeType}
-          parentId={node.id}
-          snapToGrid={snapToGrid}
-          snapGrid={snapGrid}
-          nodesDraggable={nodesDraggable}
-          nodesConnectable={nodesConnectable}
-          resizeObserver={resizeObserver}
-          elementsSelectable={elementsSelectable}
-          scale={scale}
-          recursionDepth={recursionDepth}
-          positionAbsoluteX={lookupNode?.positionAbsolute?.x}
-          positionAbsoluteY={lookupNode?.positionAbsolute?.y}
-          {...props}
-        />
-        {childNodes && childNodes.length > 0 && (
-          <MemoizedNodes
-            nodes={childNodes}
-            nodeLookup={nodeLookup}
-            parentId={node.id}
-            snapToGrid={snapToGrid}
-            snapGrid={snapGrid}
-            nodesDraggable={nodesDraggable}
-            nodesConnectable={nodesConnectable}
-            resizeObserver={resizeObserver}
-            elementsSelectable={elementsSelectable}
-            scale={scale}
-            recursionDepth={recursionDepth + 1}
-            {...props}
-          />
-        )}
-      </Fragment>
-    );
-  });
-}
-
-const MemoizedNodes = memo(Nodes);
-
 const NodeRenderer = (props: NodeRendererProps) => {
   const {
     transform,
@@ -210,17 +132,10 @@ const NodeRenderer = (props: NodeRendererProps) => {
     snapGrid,
     snapToGrid,
   } = useStore(selector, shallow);
+
   const nodeLookup = useNodeLookup();
-
   const nodes = useVisibleNodes(props.onlyRenderVisibleElements);
 
-  const transformStyle = useMemo(
-    () => ({
-      transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
-    }),
-    [transform[0], transform[1], transform[2]]
-  );
-
   const resizeObserver = useMemo(() => {
     if (typeof ResizeObserver === 'undefined') {
       return null;
@@ -236,23 +151,36 @@ const NodeRenderer = (props: NodeRendererProps) => {
     });
   }, []);
 
-  console.log(nodeLookup);
-
   return (
-    <div className="react-flow__nodes" style={transformStyle}>
+    <div className="react-flow__nodes">
-      <MemoizedNodes
+      {nodes.map((node) => {
-        nodes={nodes}
+        const nodeType = node.type || 'default';
-        nodeLookup={nodeLookup}
+        const lookupNode = nodeLookup.get(node.id);
-        snapToGrid={snapToGrid}
+
-        snapGrid={snapGrid}
+        if (!props.nodeTypes[nodeType]) {
-        nodesDraggable={nodesDraggable}
+          console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
-        nodesConnectable={nodesConnectable}
+        }
-        resizeObserver={resizeObserver}
+
-        elementsSelectable={elementsSelectable}
+        return (
-        scale={transform[2]}
+          <Node
-        recursionDepth={0}
+            key={node.id}
-        {...props}
+            node={node}
-      />
+            nodeType={nodeType}
+            snapToGrid={snapToGrid}
+            snapGrid={snapGrid}
+            nodesDraggable={nodesDraggable}
+            nodesConnectable={nodesConnectable}
+            resizeObserver={resizeObserver}
+            elementsSelectable={elementsSelectable}
+            scale={transform[2]}
+            xPos={lookupNode?.positionAbsolute?.x}
+            yPos={lookupNode?.positionAbsolute?.y}
+            treeLevel={lookupNode?.treeLevel}
+            isParentNode={lookupNode?.isParentNode}
+            {...props}
+          />
+        );
+      })}
     </div>
   );
 };

src/hooks/useVisibleEdges.ts

@@ -1,10 +1,40 @@
 import { useCallback } from 'react';
 
 import { useStore } from '../store';
-import { isEdgeVisible, getSourceTargetNodes } from '../container/EdgeRenderer/utils';
+import { isEdgeVisible } from '../container/EdgeRenderer/utils';
-import { ReactFlowState } from '../types';
+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,
+              sourcePos: sourceNode.position || { x: 0, y: 0 },
-              targetPos: targetNode.position,
+              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';
+import { ReactFlowState } 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;
-  });
-}
 
 function useVisibleNodes(onlyRenderVisible: boolean) {
   const nodes = useStore(
@@ -35,7 +16,7 @@ function useVisibleNodes(onlyRenderVisible: boolean) {
     )
   );
 
-  return getChildNodes(nodes);
+  return nodes;
 }
 
 export default useVisibleNodes;

src/store/index.ts

@@ -40,39 +40,6 @@ const createNodeOrEdgeSelectionChange = (isSelected: boolean) => (item: Node | E
   isSelected,
 });
 
-// @todo needs refactoring / improvements
-// function findMatchingNodes(id: string | undefined, nodes: Node[]): Node[] {
-//   if (!id) {
-//     return nodes.filter((n) => !!n.isSelected);
-//   }
-
-//   const result = [];
-//   const children = [];
-
-//   for (let i = 0; i < nodes.length; i++) {
-//     const n = nodes[i];
-
-//     if (n.id === id) {
-//       result.push(n);
-//     }
-
-//     if (n.parentNode === id) {
-//       children.push(n);
-//     }
-//   }
-
-//   for (let i = 0; i < children.length; i++) {
-//     const n = children[i];
-//     const matches = findMatchingNodes(n.id, nodes);
-
-//     for (let j = 0; j < matches.length; j++) {
-//       result.push(matches[j]);
-//     }
-//   }
-
-//   return result;
-// }
-
 type XYPosAndTreeLevel = XYPosition & { treeLevel: number };
 
 function addPositions(a: XYPosAndTreeLevel, b: XYPosition): XYPosAndTreeLevel {
@@ -185,6 +152,8 @@ const createStore = () =>
             treeLevel: 0,
           });
 
+          nodeLookup.set(node.parentNode!, { ...nodeLookup.get(node.parentNode!), isParentNode: true });
+
           if (positionAbsoluteAndTreeLevel) {
             nodeLookup.set(node.id, {
               ...nodeLookup.get(node.id),

src/style.css

@@ -38,7 +38,6 @@
   top: 0;
   left: 0;
   pointer-events: none;
-  z-index: 2;
 }
 
 .react-flow__edge {
@@ -87,7 +86,6 @@
   height: 100%;
   pointer-events: none;
   transform-origin: 0 0;
-  z-index: 3;
 }
 
 .react-flow__node {
@@ -186,3 +184,10 @@
   bottom: 10px;
   right: 10px;
 }
+
+.react-flow__container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}

src/types/index.ts

@@ -466,6 +466,7 @@ export type NodeLookupItem = {
   positionAbsolute?: XYPosition;
   handleBounds?: NodeHandleBounds;
   treeLevel?: number;
+  isParentNode?: boolean;
 };
 
 export type NodeLookup = Map<ElementId, NodeLookupItem>;