Merge branch 'main' into drag-edge

src/container/EdgeRenderer/index.tsx

@@ -102,6 +102,10 @@ function getHandle(bounds: HandleElement[], handleId: ElementId | null): HandleE
     handle = bounds.find((d) => d.id === handleId);
   }
 
+  if (typeof handle === 'undefined') {
+    return null;
+  }
+
   return handle;
 }
 
@@ -138,18 +142,22 @@ function renderEdge(
   setConnectionNodeId: SetSourceIdFunc,
   setPosition: (pos: XYPosition) => void,
 ) {
-  const [sourceId, sourceHandleId] = edge.source.split('__');
-  const [targetId, targetHandleId] = edge.target.split('__');
+  const sourceId = edge.source;
+  const sourceHandleId = edge.sourceHandle || null;
+  const targetId = edge.target;
+  const targetHandleId = edge.targetHandle || null;
 
   const sourceNode = nodes.find((n) => n.id === sourceId);
   const targetNode = nodes.find((n) => n.id === targetId);
 
   if (!sourceNode) {
-    throw new Error(`couldn't create edge for source id: ${sourceId}`);
+    console.warn(`couldn't create edge for source id: ${sourceId}`);
+    return null;
   }
 
   if (!targetNode) {
-    throw new Error(`couldn't create edge for target id: ${targetId}`);
+    console.warn(`couldn't create edge for target id: ${targetId}`);
+    return null;
   }
 
   if (!sourceNode.__rf.width || !sourceNode.__rf.height) {
@@ -163,6 +171,16 @@ function renderEdge(
   const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom;
   const targetPosition = targetHandle ? targetHandle.position : Position.Top;
 
+  if (!sourceHandle) {
+    console.warn(`couldn't create edge for source handle id: ${sourceHandleId}`);
+    return null;
+  }
+
+  if (!targetHandle) {
+    console.warn(`couldn't create edge for source handle id: ${targetHandleId}`);
+    return null;
+  }
+
   const { sourceX, sourceY, targetX, targetY } = getEdgePositions(
     sourceNode,
     sourceHandle,
@@ -239,6 +257,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
   const edges = useStoreState((state) => state.edges);
   const nodes = useStoreState((state) => state.nodes);
   const connectionNodeId = useStoreState((state) => state.connectionNodeId);
+  const connectionHandleId = useStoreState((state) => state.connectionHandleId);
   const connectionHandleType = useStoreState((state) => state.connectionHandleType);
   const connectionPosition = useStoreState((state) => state.connectionPosition);
   const selectedElements = useStoreState((state) => state.selectedElements);
@@ -276,6 +295,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
           <ConnectionLine
             nodes={nodes}
             connectionNodeId={connectionNodeId!}
+            connectionHandleId={connectionHandleId}
             connectionHandleType={connectionHandleType!}
             connectionPositionX={connectionPosition.x}
             connectionPositionY={connectionPosition.y}

src/container/FlowRenderer/index.tsx

@@ -1,12 +1,11 @@
-import React, { useCallback, useRef, memo, ReactNode, WheelEvent, MouseEvent } from 'react';
+import React, { useCallback, memo, ReactNode, WheelEvent, MouseEvent } from 'react';
 import { useStoreActions, useStoreState } from '../../store/hooks';
 
-import useResizeHandler from '../../hooks/useResizeHandler';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
-import useD3Zoom from '../../hooks/useD3Zoom';
 import useKeyPress from '../../hooks/useKeyPress';
 
 import { GraphViewProps } from '../GraphView';
+import ZoomPane from '../ZoomPane';
 import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
 
@@ -36,7 +35,10 @@ const FlowRenderer = ({
   onMoveStart,
   onMoveEnd,
   selectionKeyCode,
+  elementsSelectable,
   zoomOnScroll,
+  panOnScroll,
+  panOnScrollSpeed,
   zoomOnDoubleClick,
   paneMoveable,
   defaultPosition,
@@ -47,29 +49,12 @@ const FlowRenderer = ({
   onSelectionDragStop,
   onSelectionContextMenu,
 }: FlowRendererProps) => {
-  const zoomPane = useRef<HTMLDivElement>(null);
-  const rendererNode = useRef<HTMLDivElement>(null);
   const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection);
   const nodesSelectionActive = useStoreState((state) => state.nodesSelectionActive);
   const selectionKeyPressed = useKeyPress(selectionKeyCode);
 
-  useResizeHandler(rendererNode);
   useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
 
-  useD3Zoom({
-    zoomPane,
-    onMove,
-    onMoveStart,
-    onMoveEnd,
-    selectionKeyPressed,
-    zoomOnScroll,
-    zoomOnDoubleClick,
-    paneMoveable,
-    defaultPosition,
-    defaultZoom,
-    translateExtent,
-  });
-
   const onClick = useCallback(
     (event: MouseEvent) => {
       onPaneClick?.(event);
@@ -93,7 +78,21 @@ const FlowRenderer = ({
   );
 
   return (
-    <div className="react-flow__renderer" ref={rendererNode}>
+    <ZoomPane
+      onMove={onMove}
+      onMoveStart={onMoveStart}
+      onMoveEnd={onMoveEnd}
+      selectionKeyPressed={selectionKeyPressed}
+      elementsSelectable={elementsSelectable}
+      zoomOnScroll={zoomOnScroll}
+      panOnScroll={panOnScroll}
+      panOnScrollSpeed={panOnScrollSpeed}
+      zoomOnDoubleClick={zoomOnDoubleClick}
+      paneMoveable={paneMoveable}
+      defaultPosition={defaultPosition}
+      defaultZoom={defaultZoom}
+      translateExtent={translateExtent}
+    >
       {children}
       <UserSelection selectionKeyPressed={selectionKeyPressed} />
       {nodesSelectionActive && (
@@ -104,14 +103,8 @@ const FlowRenderer = ({
           onSelectionContextMenu={onSelectionContextMenu}
         />
       )}
-      <div
-        className="react-flow__pane"
-        onClick={onClick}
-        onContextMenu={onContextMenu}
-        onWheel={onWheel}
-        ref={zoomPane}
-      />
-    </div>
+      <div className="react-flow__pane" onClick={onClick} onContextMenu={onContextMenu} onWheel={onWheel} />
+    </ZoomPane>
   );
 };
 

src/container/GraphView/index.tsx

@@ -71,6 +71,8 @@ export interface GraphViewProps {
   arrowHeadColor: string;
   markerEndId?: string;
   zoomOnScroll?: boolean;
+  panOnScroll?: boolean;
+  panOnScrollSpeed?: number;
   zoomOnDoubleClick?: boolean;
   paneMoveable?: boolean;
   onEdgeUpdate?: OnEdgeUpdateFunc; 
@@ -120,6 +122,8 @@ const GraphView = ({
   arrowHeadColor,
   markerEndId,
   zoomOnScroll,
+  panOnScroll,
+  panOnScrollSpeed,
   zoomOnDoubleClick,
   paneMoveable,
   onPaneClick,
@@ -248,11 +252,14 @@ const GraphView = ({
       onElementsRemove={onElementsRemove}
       deleteKeyCode={deleteKeyCode}
       selectionKeyCode={selectionKeyCode}
+      elementsSelectable={elementsSelectable}
       onMove={onMove}
       onMoveStart={onMoveStart}
       onMoveEnd={onMoveEnd}
       zoomOnScroll={zoomOnScroll}
       zoomOnDoubleClick={zoomOnDoubleClick}
+      panOnScroll={panOnScroll}
+      panOnScrollSpeed={panOnScrollSpeed}
       paneMoveable={paneMoveable}
       defaultPosition={defaultPosition}
       defaultZoom={defaultZoom}

src/container/ReactFlow/index.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, CSSProperties, HTMLAttributes, MouseEvent, WheelEvent } from 'react';
 import cc from 'classcat';
 
-const nodeEnv: string = process.env.NODE_ENV as string;
+const nodeEnv: string = (typeof __ENV__ !== 'undefined' && __ENV__) as string;
 
 if (nodeEnv !== 'production') {
   const whyDidYouRender = require('@welldone-software/why-did-you-render');
@@ -99,6 +99,8 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   arrowHeadColor?: string;
   markerEndId?: string;
   zoomOnScroll?: boolean;
+  panOnScroll?: boolean;
+  panOnScrollSpeed?: number;
   zoomOnDoubleClick?: boolean;
   onEdgeUpdate?: OnEdgeUpdateFunc;
 }
@@ -149,6 +151,8 @@ const ReactFlow = ({
   arrowHeadColor = '#b1b1b7',
   markerEndId,
   zoomOnScroll = true,
+  panOnScroll = false,
+  panOnScrollSpeed = 0.5,
   zoomOnDoubleClick = true,
   paneMoveable = true,
   onPaneClick,
@@ -206,6 +210,8 @@ const ReactFlow = ({
           markerEndId={markerEndId}
           zoomOnScroll={zoomOnScroll}
           zoomOnDoubleClick={zoomOnDoubleClick}
+          panOnScroll={panOnScroll}
+          panOnScrollSpeed={panOnScrollSpeed}
           paneMoveable={paneMoveable}
           onPaneClick={onPaneClick}
           onPaneScroll={onPaneScroll}

src/container/ZoomPane/index.tsx

@@ -0,0 +1,194 @@
+import React, { useEffect, useRef, ReactNode } from 'react';
+
+import useResizeHandler from '../../hooks/useResizeHandler';
+import { useStoreState, useStoreActions } from '../../store/hooks';
+import { FlowTransform, TranslateExtent } from '../../types';
+
+interface ZoomPaneProps {
+  selectionKeyPressed: boolean;
+  elementsSelectable?: boolean;
+  zoomOnScroll?: boolean;
+  panOnScroll?: boolean;
+  panOnScrollSpeed?: number;
+  zoomOnDoubleClick?: boolean;
+  paneMoveable?: boolean;
+  defaultPosition?: [number, number];
+  defaultZoom?: number;
+  translateExtent?: TranslateExtent;
+  onMove?: (flowTransform?: FlowTransform) => void;
+  onMoveStart?: (flowTransform?: FlowTransform) => void;
+  onMoveEnd?: (flowTransform?: FlowTransform) => void;
+  children: ReactNode;
+}
+
+const viewChanged = (prevTransform: FlowTransform, eventTransform: any): boolean =>
+  prevTransform.x !== eventTransform.x ||
+  prevTransform.y !== eventTransform.y ||
+  prevTransform.zoom !== eventTransform.k;
+
+const eventToFlowTransform = (eventTransform: any): FlowTransform => ({
+  x: eventTransform.x,
+  y: eventTransform.y,
+  zoom: eventTransform.k,
+});
+
+const ZoomPane = ({
+  onMove,
+  onMoveStart,
+  onMoveEnd,
+  zoomOnScroll = true,
+  panOnScroll = false,
+  panOnScrollSpeed = 0.5,
+  zoomOnDoubleClick = true,
+  selectionKeyPressed,
+  elementsSelectable,
+  paneMoveable = true,
+  defaultPosition = [0, 0],
+  defaultZoom = 1,
+  translateExtent,
+  children,
+}: ZoomPaneProps) => {
+  const zoomPane = useRef<HTMLDivElement>(null);
+  const prevTransform = useRef<FlowTransform>({ x: 0, y: 0, zoom: 0 });
+
+  const d3Zoom = useStoreState((s) => s.d3Zoom);
+  const d3Selection = useStoreState((s) => s.d3Selection);
+  const d3ZoomHandler = useStoreState((s) => s.d3ZoomHandler);
+
+  const initD3 = useStoreActions((actions) => actions.initD3);
+  const updateTransform = useStoreActions((actions) => actions.updateTransform);
+
+  useResizeHandler(zoomPane);
+
+  useEffect(() => {
+    if (zoomPane.current) {
+      initD3({ zoomPane: zoomPane.current, defaultPosition, defaultZoom, translateExtent });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (d3Selection && d3Zoom) {
+      if (panOnScroll) {
+        d3Selection
+          .on('wheel', (event: any) => {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+
+            const currentZoom = d3Selection.property('__zoom').k || 1;
+
+            d3Zoom.translateBy(
+              d3Selection,
+              (event.wheelDeltaX / currentZoom) * panOnScrollSpeed,
+              (event.wheelDeltaY / currentZoom) * panOnScrollSpeed
+            );
+          })
+          .on('wheel.zoom', null);
+      } else if (typeof d3ZoomHandler !== 'undefined') {
+        d3Selection.on('wheel', null).on('wheel.zoom', d3ZoomHandler);
+      }
+    }
+  }, [panOnScroll, d3Selection, d3Zoom, d3ZoomHandler]);
+
+  useEffect(() => {
+    if (d3Zoom) {
+      if (selectionKeyPressed) {
+        d3Zoom.on('zoom', null);
+      } else {
+        d3Zoom.on('zoom', (event: any) => {
+          updateTransform(event.transform);
+
+          if (onMove) {
+            const flowTransform = eventToFlowTransform(event.transform);
+            onMove(flowTransform);
+          }
+        });
+      }
+    }
+  }, [selectionKeyPressed, d3Zoom, updateTransform, onMove]);
+
+  useEffect(() => {
+    if (d3Zoom) {
+      if (onMoveStart) {
+        d3Zoom.on('start', (event: any) => {
+          if (viewChanged(prevTransform.current, event.transform)) {
+            const flowTransform = eventToFlowTransform(event.transform);
+            prevTransform.current = flowTransform;
+
+            onMoveStart(flowTransform);
+          }
+        });
+      } else {
+        d3Zoom.on('start', null);
+      }
+    }
+  }, [d3Zoom, onMoveStart]);
+
+  useEffect(() => {
+    if (d3Zoom) {
+      if (onMoveEnd) {
+        d3Zoom.on('end', (event: any) => {
+          if (viewChanged(prevTransform.current, event.transform)) {
+            const flowTransform = eventToFlowTransform(event.transform);
+            prevTransform.current = flowTransform;
+
+            onMoveEnd(flowTransform);
+          }
+        });
+      } else {
+        d3Zoom.on('end', null);
+      }
+    }
+  }, [d3Zoom, onMoveEnd]);
+
+  useEffect(() => {
+    if (d3Zoom) {
+      d3Zoom.filter((event: any) => {
+        // if all interactions are disabled, we prevent all zoom events
+        if (!paneMoveable && !zoomOnScroll && !panOnScroll && !zoomOnDoubleClick) {
+          return false;
+        }
+
+        // during a selection we prevent all other interactions
+        if (selectionKeyPressed) {
+          return false;
+        }
+
+        // if zoom on double click is disabled, we prevent the double click event
+        if (!zoomOnDoubleClick && event.type === 'dblclick') {
+          return false;
+        }
+
+        // when the target element is a node, we still allow zooming
+        if (event.target.closest('.react-flow__node') && event.type !== 'wheel') {
+          return false;
+        }
+
+        // when the target element is a node selection, we still allow zooming
+        if (event.target.closest('.react-flow__nodesselection') && event.type !== 'wheel') {
+          return false;
+        }
+
+        // when there is no scroll handling enabled, we prevent all wheel events
+        if (!zoomOnScroll && !panOnScroll && event.type === 'wheel') {
+          return false;
+        }
+
+        // if the pane is not movable, we prevent dragging it with the mouse
+        if (!paneMoveable && event.type === 'mousedown') {
+          return false;
+        }
+
+        // default filter for d3-zoom, prevents zooming on buttons and when ctrl is pressed
+        return !event.ctrlKey && !event.button;
+      });
+    }
+  }, [d3Zoom, zoomOnScroll, panOnScroll, zoomOnDoubleClick, paneMoveable, selectionKeyPressed, elementsSelectable]);
+
+  return (
+    <div className="react-flow__renderer react-flow__zoompane" ref={zoomPane}>
+      {children}
+    </div>
+  );
+};
+
+export default ZoomPane;