wip: multiple edge renderers

2021-11-03 17:51:39 +01:00
parent 7333873822
commit 79e46d90ad
10 changed files with 201 additions and 275 deletions
@@ -235,8 +235,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
    connectionMode,
  } = useStore(selector, shallow);
  const nodeLookup = useNodeLookup();
-
-  const edges = useVisibleEdges(props.onlyRenderVisibleElements);
+  const edgeTree = useVisibleEdges(props.onlyRenderVisibleElements, nodeLookup);

  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} />
-      <g transform={`translate(${transform[0]},${transform[1]}) scale(${transform[2]})`}>
-        {edges.map((edge: Edge) => {
-          // @todo: getSourceTargetNodes is called many times during dragging/creating edges
-          const sourceNode = nodeLookup.get(edge.source);
-          const targetNode = nodeLookup.get(edge.target);
+    <>
+      {edgeTree.map(({ level, edges, isMaxLevel }) => (
+        <svg key={level} style={{ zIndex: 6 + level }} width={width} height={height} className="react-flow__edges">
+          {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} />}
+          <g>
+            {edges.map((edge: Edge) => {
+              const sourceNode = nodeLookup.get(edge.source);
+              const targetNode = nodeLookup.get(edge.target);

-          return (
-            <Edge
-              key={edge.id}
-              edge={edge}
-              sourceNodeWidth={sourceNode?.width}
-              sourceNodeHeight={sourceNode?.height}
-              sourceNodeX={sourceNode?.positionAbsolute?.x}
-              sourceNodeY={sourceNode?.positionAbsolute?.y}
-              sourceNodeHandleBounds={sourceNode?.handleBounds}
-              targetNodeWidth={targetNode?.width}
-              targetNodeHeight={targetNode?.height}
-              targetNodeX={targetNode?.positionAbsolute?.x}
-              targetNodeY={targetNode?.positionAbsolute?.y}
-              targetNodeHandleBounds={targetNode?.handleBounds}
-              elementsSelectable={elementsSelectable}
-              onEdgeContextMenu={props.onEdgeContextMenu}
-              onEdgeMouseEnter={props.onEdgeMouseEnter}
-              onEdgeMouseMove={props.onEdgeMouseMove}
-              onEdgeMouseLeave={props.onEdgeMouseLeave}
-              edgeUpdaterRadius={props.edgeUpdaterRadius}
-              onEdgeDoubleClick={props.onEdgeDoubleClick}
-              onEdgeUpdateStart={props.onEdgeUpdateStart}
-              onEdgeUpdateEnd={props.onEdgeUpdateEnd}
-              onEdgeUpdate={props.onEdgeUpdate}
-              edgeTypes={props.edgeTypes}
-              connectionMode={connectionMode}
-            />
-          );
-        })}
-        {renderConnectionLine && (
-          <ConnectionLine
-            connectionNodeId={connectionNodeId!}
-            connectionHandleId={connectionHandleId}
-            connectionHandleType={connectionHandleType!}
-            connectionPositionX={connectionPosition.x}
-            connectionPositionY={connectionPosition.y}
-            transform={transform}
-            connectionLineStyle={connectionLineStyle}
-            connectionLineType={connectionLineType}
-            isConnectable={nodesConnectable}
-            CustomConnectionLineComponent={connectionLineComponent}
-          />
-        )}
-      </g>
-    </svg>
+              return (
+                <Edge
+                  key={edge.id}
+                  edge={edge}
+                  sourceNodeWidth={sourceNode?.width}
+                  sourceNodeHeight={sourceNode?.height}
+                  sourceNodeX={sourceNode?.positionAbsolute?.x}
+                  sourceNodeY={sourceNode?.positionAbsolute?.y}
+                  sourceNodeHandleBounds={sourceNode?.handleBounds}
+                  targetNodeWidth={targetNode?.width}
+                  targetNodeHeight={targetNode?.height}
+                  targetNodeX={targetNode?.positionAbsolute?.x}
+                  targetNodeY={targetNode?.positionAbsolute?.y}
+                  targetNodeHandleBounds={targetNode?.handleBounds}
+                  elementsSelectable={elementsSelectable}
+                  onEdgeContextMenu={props.onEdgeContextMenu}
+                  onEdgeMouseEnter={props.onEdgeMouseEnter}
+                  onEdgeMouseMove={props.onEdgeMouseMove}
+                  onEdgeMouseLeave={props.onEdgeMouseLeave}
+                  edgeUpdaterRadius={props.edgeUpdaterRadius}
+                  onEdgeDoubleClick={props.onEdgeDoubleClick}
+                  onEdgeUpdateStart={props.onEdgeUpdateStart}
+                  onEdgeUpdateEnd={props.onEdgeUpdateEnd}
+                  onEdgeUpdate={props.onEdgeUpdate}
+                  edgeTypes={props.edgeTypes}
+                  connectionMode={connectionMode}
+                />
+              );
+            })}
+            {renderConnectionLine && isMaxLevel && (
+              <ConnectionLine
+                connectionNodeId={connectionNodeId!}
+                connectionHandleId={connectionHandleId}
+                connectionHandleType={connectionHandleType!}
+                connectionPositionX={connectionPosition.x}
+                connectionPositionY={connectionPosition.y}
+                transform={transform}
+                connectionLineStyle={connectionLineStyle}
+                connectionLineType={connectionLineType}
+                isConnectable={nodesConnectable}
+                CustomConnectionLineComponent={connectionLineComponent}
+              />
+            )}
+          </g>
+        </svg>
+      ))}
+    </>
  );
 };

@@ -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
-        nodeTypes={nodeTypes}
-        onNodeClick={onNodeClick}
-        onNodeDoubleClick={onNodeDoubleClick}
-        onNodeMouseEnter={onNodeMouseEnter}
-        onNodeMouseMove={onNodeMouseMove}
-        onNodeMouseLeave={onNodeMouseLeave}
-        onNodeContextMenu={onNodeContextMenu}
-        onNodeDragStop={onNodeDragStop}
-        onNodeDrag={onNodeDrag}
-        onNodeDragStart={onNodeDragStart}
-        selectNodesOnDrag={selectNodesOnDrag}
-        onlyRenderVisibleElements={onlyRenderVisibleElements}
-      />
-      <EdgeRenderer
-        edgeTypes={edgeTypes}
-        onEdgeClick={onEdgeClick}
-        onEdgeDoubleClick={onEdgeDoubleClick}
-        connectionLineType={connectionLineType}
-        connectionLineStyle={connectionLineStyle}
-        connectionLineComponent={connectionLineComponent}
-        onEdgeUpdate={onEdgeUpdate}
-        onlyRenderVisibleElements={onlyRenderVisibleElements}
-        onEdgeContextMenu={onEdgeContextMenu}
-        onEdgeMouseEnter={onEdgeMouseEnter}
-        onEdgeMouseMove={onEdgeMouseMove}
-        onEdgeMouseLeave={onEdgeMouseLeave}
-        onEdgeUpdateStart={onEdgeUpdateStart}
-        onEdgeUpdateEnd={onEdgeUpdateEnd}
-        edgeUpdaterRadius={edgeUpdaterRadius}
-        defaultMarkerColor={defaultMarkerColor}
-      />
+      <div className="react-flow__container" style={{ zIndex: 2, ...transformStyle }}>
+        <EdgeRenderer
+          edgeTypes={edgeTypes}
+          onEdgeClick={onEdgeClick}
+          onEdgeDoubleClick={onEdgeDoubleClick}
+          connectionLineType={connectionLineType}
+          connectionLineStyle={connectionLineStyle}
+          connectionLineComponent={connectionLineComponent}
+          onEdgeUpdate={onEdgeUpdate}
+          onlyRenderVisibleElements={onlyRenderVisibleElements}
+          onEdgeContextMenu={onEdgeContextMenu}
+          onEdgeMouseEnter={onEdgeMouseEnter}
+          onEdgeMouseMove={onEdgeMouseMove}
+          onEdgeMouseLeave={onEdgeMouseLeave}
+          onEdgeUpdateStart={onEdgeUpdateStart}
+          onEdgeUpdateEnd={onEdgeUpdateEnd}
+          edgeUpdaterRadius={edgeUpdaterRadius}
+          defaultMarkerColor={defaultMarkerColor}
+        />
+        <NodeRenderer
+          nodeTypes={nodeTypes}
+          onNodeClick={onNodeClick}
+          onNodeDoubleClick={onNodeDoubleClick}
+          onNodeMouseEnter={onNodeMouseEnter}
+          onNodeMouseMove={onNodeMouseMove}
+          onNodeMouseLeave={onNodeMouseLeave}
+          onNodeContextMenu={onNodeContextMenu}
+          onNodeDragStop={onNodeDragStop}
+          onNodeDrag={onNodeDrag}
+          onNodeDragStart={onNodeDragStart}
+          selectNodesOnDrag={selectNodesOnDrag}
+          onlyRenderVisibleElements={onlyRenderVisibleElements}
+        />
+      </div>
    </FlowRenderer>
  );
 };
@@ -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 {
-  Node,
-  NodeTypesType,
-  ReactFlowState,
-  WrapNodeProps,
-  SnapGrid,
-  NodeRendererNode,
-  NodeLookup,
-} from '../../types';
+import { Node, NodeTypesType, ReactFlowState, WrapNodeProps, SnapGrid, NodeRendererNode } 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 {
-  nodes: NodeRendererNode[];
-  nodeLookup: NodeLookup;
+interface NodeProps extends NodeRendererProps {
+  node: Node;
+  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;
-  parentId?: string;
-}
-
-interface NodeProps extends Omit<NodesProps, 'nodes' | 'nodeLookup'> {
-  node: Node;
-  nodeType: string;
-  childNodes?: NodeRendererNode[];
-  positionAbsoluteX?: number;
-  positionAbsoluteY?: number;
+  treeLevel?: number;
+  isParentNode?: boolean;
 }

 function Node({
@@ -74,9 +61,10 @@ function Node({
  nodesDraggable,
  nodesConnectable,
  elementsSelectable,
-  recursionDepth,
-  positionAbsoluteX,
-  positionAbsoluteY,
+  treeLevel = 0,
+  xPos,
+  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}
-      yPos={positionAbsoluteY || 0}
+      xPos={xPos || 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}>
-      <MemoizedNodes
-        nodes={nodes}
-        nodeLookup={nodeLookup}
-        snapToGrid={snapToGrid}
-        snapGrid={snapGrid}
-        nodesDraggable={nodesDraggable}
-        nodesConnectable={nodesConnectable}
-        resizeObserver={resizeObserver}
-        elementsSelectable={elementsSelectable}
-        scale={transform[2]}
-        recursionDepth={0}
-        {...props}
-      />
+    <div className="react-flow__nodes">
+      {nodes.map((node) => {
+        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 (
+          <Node
+            key={node.id}
+            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>
  );
 };