Merge branch 'main' into v11

.gitignore

@@ -9,3 +9,4 @@ dist
 stats.html
 .eslintcache
 .idea
+.yarn

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

packages/core/example/package.json

@@ -10,7 +10,7 @@
     "react-flow-renderer": "file:../",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.4"
   },
   "scripts": {
     "start": "react-scripts start",

packages/core/example/src/Basic/index.tsx

@@ -9,6 +9,7 @@ import ReactFlow, {
   useReactFlow,
 } from 'react-flow-renderer';
 
+const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 
@@ -61,6 +62,7 @@ const BasicFlow = () => {
       defaultEdges={initialEdges}
       onNodeClick={onNodeClick}
       onNodeDragStop={onNodeDragStop}
+      onNodeDrag={onNodeDrag}
       className="react-flow-basic-example"
       minZoom={0.2}
       maxZoom={4}

packages/core/example/src/CustomConnectionLine/ConnectionLine.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { ConnectionLineComponentProps } from 'react-flow-renderer';
 
-const ConnectionLine: FC<ConnectionLineComponentProps> = ({ sourceX, sourceY, targetX, targetY }) => {
+const ConnectionLine: FC<ConnectionLineComponentProps> = ({ sourceX, sourceY, targetX, targetY, toX, toY }) => {
   return (
     <g>
       <path
@@ -11,7 +11,7 @@ const ConnectionLine: FC<ConnectionLineComponentProps> = ({ sourceX, sourceY, ta
         className="animated"
         d={`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`}
       />
-      <circle cx={targetX} cy={targetY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
+      <circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
     </g>
   );
 };

packages/core/example/src/CustomConnectionLine/index.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import ReactFlow, {
   Node,
   addEdge,
@@ -11,13 +12,13 @@ import ReactFlow, {
 
 import ConnectionLine from './ConnectionLine';
 
-const initialNodes: Node[] = [{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }];
+const initialNodes: Node[] = [{ id: '1', type: 'default', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }];
 const initialEdges: Edge[] = [];
 
 const ConnectionLineFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
   return (
     <ReactFlow

packages/core/example/src/SaveRestore/Controls.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, Dispatch, FC } from 'react';
-import { useReactFlow, ReactFlowInstance, Edge, Node, ReactFlowJsonObject } from 'react-flow-renderer';
+import { useReactFlow, Edge, Node, ReactFlowJsonObject } from 'react-flow-renderer';
 import localforage from 'localforage';
 
 localforage.config({
@@ -12,20 +12,17 @@ const flowKey = 'example-flow';
 const getNodeId = () => `randomnode_${+new Date()}`;
 
 type ControlsProps = {
-  rfInstance?: ReactFlowInstance;
   setNodes: Dispatch<React.SetStateAction<Node<any>[]>>;
   setEdges: Dispatch<React.SetStateAction<Edge<any>[]>>;
 };
 
-const Controls: FC<ControlsProps> = ({ rfInstance, setNodes, setEdges }) => {
+const Controls: FC<ControlsProps> = ({ setNodes, setEdges }) => {
-  const { setViewport } = useReactFlow();
+  const { setViewport, toObject } = useReactFlow();
 
   const onSave = useCallback(() => {
-    if (rfInstance) {
+    const flow = toObject();
-      const flow = rfInstance.toObject();
+    localforage.setItem(flowKey, flow);
-      localforage.setItem(flowKey, flow);
+  }, [toObject]);
-    }
-  }, [rfInstance]);
 
   const onRestore = useCallback(() => {
     const restoreFlow = async () => {
@@ -33,6 +30,7 @@ const Controls: FC<ControlsProps> = ({ rfInstance, setNodes, setEdges }) => {
 
       if (flow) {
         const { x, y, zoom } = flow.viewport;
+
         setNodes(flow.nodes || []);
         setEdges(flow.edges || []);
         setViewport({ x, y, zoom: zoom || 0 });

packages/core/example/src/SaveRestore/index.tsx

@@ -1,11 +1,10 @@
-import { useState } from 'react';
+import { useCallback } from 'react';
 import ReactFlow, {
   ReactFlowProvider,
   Node,
   addEdge,
   Connection,
   Edge,
-  ReactFlowInstance,
   useNodesState,
   useEdgesState,
 } from 'react-flow-renderer';
@@ -22,10 +21,9 @@ const initialNodes: Node[] = [
 const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
 
 const SaveRestore = () => {
-  const [rfInstance, setRfInstance] = useState<ReactFlowInstance>();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
   return (
     <ReactFlowProvider>
@@ -35,9 +33,8 @@ const SaveRestore = () => {
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
-        onInit={setRfInstance}
       >
-        <Controls rfInstance={rfInstance} setNodes={setNodes} setEdges={setEdges} />
+        <Controls setNodes={setNodes} setEdges={setEdges} />
       </ReactFlow>
     </ReactFlowProvider>
   );

packages/core/example/src/Subflow/DebugNode.tsx

@@ -11,7 +11,7 @@ const idStyle: CSSProperties = {
   left: 2,
 };
 
-const ColorSelectorNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
+const DebugNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
   return (
     <>
       <Handle type="target" position={Position.Top} />
@@ -24,4 +24,4 @@ const ColorSelectorNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
   );
 };
 
-export default memo(ColorSelectorNode);
+export default memo(DebugNode);

packages/core/example/src/Subflow/index.tsx

@@ -15,6 +15,7 @@ import ReactFlow, {
 } from 'react-flow-renderer';
 import DebugNode from './DebugNode';
 
+const onNodeDrag = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
 const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
@@ -82,6 +83,7 @@ const initialNodes: Node[] = [
     position: { x: 25, y: 50 },
     className: 'light',
     parentNode: '5',
+    extent: 'parent',
   },
   {
     id: '5b',
@@ -89,6 +91,7 @@ const initialNodes: Node[] = [
     position: { x: 225, y: 50 },
     className: 'light',
     parentNode: '5',
+    expandParent: true,
   },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
   { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
@@ -167,6 +170,7 @@ const Subflow = () => {
       onNodeClick={onNodeClick}
       onEdgeClick={onEdgeClick}
       onConnect={onConnect}
+      onNodeDrag={onNodeDrag}
       onNodeDragStop={onNodeDragStop}
       className="react-flow-basic-example"
       defaultZoom={1.5}

packages/core/example/src/Validation/index.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent as ReactMouseEvent, FC } from 'react';
+import { FC, useCallback, useState } from 'react';
 import ReactFlow, {
   addEdge,
   Handle,
@@ -6,11 +6,11 @@ import ReactFlow, {
   Position,
   Node,
   Edge,
-  OnConnectStartParams,
   NodeProps,
   NodeTypes,
   useNodesState,
   useEdgesState,
+  OnConnectStartParams,
 } from 'react-flow-renderer';
 
 import './validation.css';
@@ -23,10 +23,6 @@ const initialNodes: Node[] = [
 ];
 
 const isValidConnection = (connection: Connection) => connection.target === 'B';
-const onConnectStart = (_: ReactMouseEvent, { nodeId, handleType }: OnConnectStartParams) =>
-  console.log('on connect start', { nodeId, handleType });
-const onConnectStop = (event: MouseEvent) => console.log('on connect stop', event);
-const onConnectEnd = (event: MouseEvent) => console.log('on connect end', event);
 
 const CustomInput: FC<NodeProps> = () => (
   <>
@@ -49,13 +45,33 @@ const nodeTypes: NodeTypes = {
 };
 
 const ValidationFlow = () => {
+  const [value, setValue] = useState(0);
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-  const onConnect = (params: Connection | Edge) => {
+  const onConnectStart = useCallback(
-    console.log('on connect', params);
+    (event: React.MouseEvent, params: OnConnectStartParams) => {
-    setEdges((eds) => addEdge(params, eds));
+      console.log('on connect start', params, event, value);
-  };
+      setValue(1);
+    },
+    [value]
+  );
+
+  const onConnect = useCallback(
+    (params: Connection | Edge) => {
+      console.log('on connect', params);
+      setEdges((eds) => addEdge(params, eds));
+    },
+    [setEdges]
+  );
+
+  const onConnectEnd = useCallback(
+    (event: MouseEvent) => {
+      console.log('on connect end', event, value);
+      setValue(0);
+    },
+    [value]
+  );
 
   return (
     <ReactFlow
@@ -68,7 +84,6 @@ const ValidationFlow = () => {
       className="validationflow"
       nodeTypes={nodeTypes}
       onConnectStart={onConnectStart}
-      onConnectStop={onConnectStop}
       onConnectEnd={onConnectEnd}
       fitView
     />

packages/core/src/additional-components/MiniMap/index.tsx

@@ -7,7 +7,7 @@ import { useStore } from '../../store';
 import { getRectOfNodes } from '../../utils/graph';
 import { getBoundsofRects } from '../../utils';
 
-import { MiniMapProps, GetMiniMapNodeAttribute, ReactFlowState, Rect } from '../../types';
+import { MiniMapProps, GetMiniMapNodeAttribute, ReactFlowState } from '../../types';
 
 declare const window: any;
 
@@ -15,9 +15,12 @@ const defaultWidth = 200;
 const defaultHeight = 150;
 
 const selector = (s: ReactFlowState) => ({
-  width: s.width,
+  viewBBox: {
-  height: s.height,
+    x: -s.transform[0] / s.transform[2],
-  transform: s.transform,
+    y: -s.transform[1] / s.transform[2],
+    width: s.width / s.transform[2],
+    height: s.height / s.transform[2],
+  },
   nodes: Array.from(s.nodeInternals.values()),
 });
 
@@ -33,19 +36,13 @@ const MiniMap = ({
   nodeStrokeWidth = 2,
   maskColor = 'rgb(240, 242, 243, 0.7)',
 }: MiniMapProps) => {
-  const { width: containerWidth, height: containerHeight, transform, nodes } = useStore(selector, shallow);
+  const { viewBBox, nodes } = useStore(selector, shallow);
   const elementWidth = (style?.width as number) ?? defaultWidth;
   const elementHeight = (style?.height as number) ?? defaultHeight;
   const nodeColorFunc = getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
   const nodeClassNameFunc = getAttrFunction(nodeClassName);
-  const viewBB: Rect = {
+  const boundingRect = nodes.length > 0 ? getBoundsofRects(getRectOfNodes(nodes), viewBBox) : viewBBox;
-    x: -transform[0] / transform[2],
-    y: -transform[1] / transform[2],
-    width: containerWidth / transform[2],
-    height: containerHeight / transform[2],
-  };
-  const boundingRect = nodes.length > 0 ? getBoundsofRects(getRectOfNodes(nodes), viewBB) : viewBB;
   const scaledWidth = boundingRect.width / elementWidth;
   const scaledHeight = boundingRect.height / elementHeight;
   const viewScale = Math.max(scaledWidth, scaledHeight);
@@ -89,7 +86,7 @@ const MiniMap = ({
       <path
         className="react-flow__minimap-mask"
         d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
-        M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
+        M${viewBBox.x},${viewBBox.y}h${viewBBox.width}v${viewBBox.height}h${-viewBBox.width}z`}
         fill={maskColor}
         fillRule="evenodd"
       />

packages/core/src/components/ConnectionLine/index.tsx

@@ -1,77 +1,70 @@
-import React, { useRef, CSSProperties } from 'react';
+import React, { CSSProperties, useCallback } from 'react';
 import shallow from 'zustand/shallow';
 
 import { useStore } from '../../store';
 import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
-import { ConnectionLineType, ConnectionLineComponent, HandleType, Node, ReactFlowState, Position } from '../../types';
+import { ConnectionLineType, ConnectionLineComponent, HandleType, Position } from '../../types';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
 import { internalsSymbol } from '../../utils';
 
-interface ConnectionLineProps {
+type ConnectionLineProps = {
   connectionNodeId: string;
-  connectionHandleId: string | null;
   connectionHandleType: HandleType;
-  connectionPositionX: number;
-  connectionPositionY: number;
   connectionLineType: ConnectionLineType;
   isConnectable: boolean;
   connectionLineStyle?: CSSProperties;
   CustomConnectionLineComponent?: ConnectionLineComponent;
-}
+};
 
-const selector = (s: ReactFlowState) => ({ nodeInternals: s.nodeInternals, transform: s.transform });
+const oppositePosition = {
+  [Position.Left]: Position.Right,
+  [Position.Right]: Position.Left,
+  [Position.Top]: Position.Bottom,
+  [Position.Bottom]: Position.Top,
+};
 
 export default ({
   connectionNodeId,
-  connectionHandleId,
   connectionHandleType,
   connectionLineStyle,
-  connectionPositionX,
-  connectionPositionY,
   connectionLineType = ConnectionLineType.Bezier,
   isConnectable,
   CustomConnectionLineComponent,
 }: ConnectionLineProps) => {
-  const nodeId = connectionNodeId;
+  const { fromNode, handleId, toX, toY } = useStore(
-  const handleId = connectionHandleId;
+    useCallback(
+      (s) => ({
+        fromNode: s.nodeInternals.get(connectionNodeId),
+        handleId: s.connectionHandleId,
+        toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
+        toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
+      }),
+      [connectionNodeId]
+    ),
+    shallow
+  );
+  const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
 
-  const { nodeInternals, transform } = useStore(selector, shallow);
+  if (!fromNode || !isConnectable || !fromHandleBounds?.[connectionHandleType]) {
-  const fromNode = useRef<Node | undefined>(nodeInternals.get(nodeId));
-  const fromHandleBounds = fromNode.current?.[internalsSymbol]?.handleBounds;
-
-  if (!fromNode.current || !isConnectable || !fromHandleBounds?.[connectionHandleType]) {
     return null;
   }
 
-  const handleBound = fromHandleBounds[connectionHandleType];
+  const handleBound = fromHandleBounds[connectionHandleType]!;
-  const fromHandle = handleId ? handleBound?.find((d) => d.id === handleId) : handleBound?.[0];
+  const fromHandle = handleId ? handleBound.find((d) => d.id === handleId) : handleBound[0];
-  const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.current?.width ?? 0) / 2;
+  const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode?.width ?? 0) / 2;
-  const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.current?.height ?? 0;
+  const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode?.height ?? 0;
-  const fromX = (fromNode.current.positionAbsolute?.x || 0) + fromHandleX;
+  const fromX = (fromNode?.positionAbsolute?.x || 0) + fromHandleX;
-  const fromY = (fromNode.current.positionAbsolute?.y || 0) + fromHandleY;
+  const fromY = (fromNode?.positionAbsolute?.y || 0) + fromHandleY;
-
-  const toX = (connectionPositionX - transform[0]) / transform[2];
-  const toY = (connectionPositionY - transform[1]) / transform[2];
 
   const fromPosition = fromHandle?.position;
 
-  let toPosition: Position | undefined;
+  if (!fromPosition) {
-  switch (fromPosition) {
+    return null;
-    case Position.Left:
-      toPosition = Position.Right;
-      break;
-    case Position.Right:
-      toPosition = Position.Left;
-      break;
-    case Position.Top:
-      toPosition = Position.Bottom;
-      break;
-    case Position.Bottom:
-      toPosition = Position.Top;
-      break;
   }
 
+  let toPosition: Position = oppositePosition[fromPosition];
+
   let sourceX: number,
     sourceY: number,
     sourcePosition: Position | undefined,
@@ -106,19 +99,25 @@ export default ({
     return (
       <g className="react-flow__connection">
         <CustomConnectionLineComponent
-          sourceX={sourceX}
-          sourceY={sourceY}
-          sourcePosition={sourcePosition}
-          targetX={targetX}
-          targetY={targetY}
-          targetPosition={targetPosition}
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
-          fromNode={fromNode.current}
+          fromNode={fromNode}
           fromHandle={fromHandle}
-          // backward compatibility, mark as deprecated?
+          fromX={fromX}
-          sourceNode={fromNode.current}
+          fromY={fromY}
+          toX={toX}
+          toY={toY}
+          fromPosition={fromPosition}
+          toPosition={toPosition}
+          // remove in v11
+          sourcePosition={sourcePosition}
+          targetPosition={targetPosition}
+          sourceNode={fromNode}
           sourceHandle={fromHandle}
+          targetX={targetX}
+          targetY={targetY}
+          sourceX={sourceX}
+          sourceY={sourceY}
         />
       </g>
     );

packages/core/src/components/Edges/wrapEdge.tsx

@@ -1,19 +1,13 @@
 import React, { memo, ComponentType, useState, useMemo } from 'react';
 import cc from 'classcat';
-import shallow from 'zustand/shallow';
 
-import { useStore, useStoreApi } from '../../store';
+import { useStoreApi } from '../../store';
-import { EdgeProps, WrapEdgeProps, ReactFlowState, Connection } from '../../types';
+import { EdgeProps, WrapEdgeProps, Connection } from '../../types';
 import { handleMouseDown } from '../../components/Handle/handler';
 import { EdgeAnchor } from './EdgeAnchor';
 import { getMarkerId } from '../../utils/graph';
 import { getMouseHandler } from './utils';
 
-const selector = (s: ReactFlowState) => ({
-  addSelectedEdges: s.addSelectedEdges,
-  connectionMode: s.connectionMode,
-});
-
 export default (EdgeComponent: ComponentType<EdgeProps>) => {
   const EdgeWrapper = ({
     id,
@@ -56,11 +50,11 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     rfId,
   }: WrapEdgeProps): JSX.Element | null => {
     const [updating, setUpdating] = useState<boolean>(false);
-    const { addSelectedEdges, connectionMode } = useStore(selector, shallow);
     const store = useStoreApi();
 
     const onEdgeClick = (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
-      const edge = store.getState().edges.find((e) => e.id === id)!;
+      const { edges, addSelectedEdges } = store.getState();
+      const edge = edges.find((e) => e.id === id)!;
 
       if (elementsSelectable) {
         store.setState({ nodesSelectionActive: false });
@@ -86,32 +80,24 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
 
       onEdgeUpdateStart?.(event, edge, handleType);
 
-      const _onEdgeUpdate = onEdgeUpdateEnd
+      const _onEdgeUpdateEnd = onEdgeUpdateEnd
         ? (evt: MouseEvent): void => onEdgeUpdateEnd(evt, edge, handleType)
         : undefined;
 
-      const onConnectEdge = (connection: Connection) => {
+      const onConnectEdge = (connection: Connection) => onEdgeUpdate?.(edge, connection);
-        const { edges } = store.getState();
-        const edge = edges.find((e) => e.id === id);
 
-        if (edge && onEdgeUpdate) {
+      handleMouseDown({
-          onEdgeUpdate(edge, connection);
-        }
-      };
-
-      handleMouseDown(
         event,
         handleId,
         nodeId,
-        store.setState,
+        onConnect: onConnectEdge,
-        onConnectEdge,
         isTarget,
+        getState: store.getState,
+        setState: store.setState,
         isValidConnection,
-        connectionMode,
+        elementEdgeUpdaterType: handleType,
-        handleType,
+        onEdgeUpdateEnd: _onEdgeUpdateEnd,
-        _onEdgeUpdate,
+      });
-        store.getState
-      );
     };
 
     const onEdgeUpdaterSourceMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>

packages/core/src/components/Handle/handler.ts

@@ -1,17 +1,8 @@
 import { MouseEvent as ReactMouseEvent } from 'react';
-import { SetState } from 'zustand';
+import { GetState, SetState } from 'zustand';
 
 import { getHostForElement } from '../../utils';
-import {
+import { OnConnect, ConnectionMode, Connection, HandleType, ReactFlowState } from '../../types';
-  OnConnect,
-  OnConnectStart,
-  OnConnectStop,
-  OnConnectEnd,
-  ConnectionMode,
-  Connection,
-  HandleType,
-  ReactFlowState,
-} from '../../types';
 
 type ValidConnectionFunc = (connection: Connection) => boolean;
 
@@ -46,6 +37,24 @@ export function checkElementBelowIsValid(
   if (elementBelow && (elementBelowIsTarget || elementBelowIsSource)) {
     result.isHoveringHandle = true;
 
+    const elementBelowNodeId = elementBelow.getAttribute('data-nodeid');
+    const elementBelowHandleId = elementBelow.getAttribute('data-handleid');
+    const connection: Connection = isTarget
+      ? {
+          source: elementBelowNodeId,
+          sourceHandle: elementBelowHandleId,
+          target: nodeId,
+          targetHandle: handleId,
+        }
+      : {
+          source: nodeId,
+          sourceHandle: handleId,
+          target: elementBelowNodeId,
+          targetHandle: elementBelowHandleId,
+        };
+
+    result.connection = connection;
+
     // in strict mode we don't allow target to target or source to source connections
     const isValid =
       connectionMode === ConnectionMode.Strict
@@ -53,23 +62,6 @@ export function checkElementBelowIsValid(
         : true;
 
     if (isValid) {
-      const elementBelowNodeId = elementBelow.getAttribute('data-nodeid');
-      const elementBelowHandleId = elementBelow.getAttribute('data-handleid');
-      const connection: Connection = isTarget
-        ? {
-            source: elementBelowNodeId,
-            sourceHandle: elementBelowHandleId,
-            target: nodeId,
-            targetHandle: handleId,
-          }
-        : {
-            source: nodeId,
-            sourceHandle: handleId,
-            target: elementBelowNodeId,
-            targetHandle: elementBelowHandleId,
-          };
-
-      result.connection = connection;
       result.isValid = isValidConnection(connection);
     }
   }
@@ -82,21 +74,29 @@ function resetRecentHandle(hoveredHandle: Element): void {
   hoveredHandle?.classList.remove('react-flow__handle-connecting');
 }
 
-export function handleMouseDown(
+export function handleMouseDown({
-  event: ReactMouseEvent,
+  event,
-  handleId: string | null,
+  handleId,
-  nodeId: string,
+  nodeId,
-  setState: SetState<ReactFlowState>,
+  onConnect,
-  onConnect: OnConnect,
+  isTarget,
-  isTarget: boolean,
+  getState,
-  isValidConnection: ValidConnectionFunc,
+  setState,
-  connectionMode: ConnectionMode,
+  isValidConnection,
-  elementEdgeUpdaterType?: HandleType,
+  elementEdgeUpdaterType,
-  onEdgeUpdateEnd?: (evt: MouseEvent) => void,
+  onEdgeUpdateEnd,
-  onConnectStart?: OnConnectStart,
+}: {
-  onConnectStop?: OnConnectStop,
+  event: ReactMouseEvent;
-  onConnectEnd?: OnConnectEnd
+  handleId: string | null;
-): void {
+  nodeId: string;
+  onConnect: OnConnect;
+  isTarget: boolean;
+  getState: GetState<ReactFlowState>;
+  setState: SetState<ReactFlowState>;
+  isValidConnection: ValidConnectionFunc;
+  elementEdgeUpdaterType?: HandleType;
+  onEdgeUpdateEnd?: (evt: MouseEvent) => void;
+}): void {
   const reactFlowNode = (event.target as Element).closest('.react-flow');
   // when react-flow is used inside a shadow root we can't use document
   const doc = getHostForElement(event.target as HTMLElement);
@@ -113,6 +113,7 @@ export function handleMouseDown(
     return;
   }
 
+  const { onConnectStart, connectionMode } = getState();
   const handleType = elementEdgeUpdaterType ? elementEdgeUpdaterType : elementBelowIsTarget ? 'target' : 'source';
   const containerBounds = reactFlowNode.getBoundingClientRect();
   let recentHoveredHandle: Element;
@@ -151,9 +152,7 @@ export function handleMouseDown(
       return resetRecentHandle(recentHoveredHandle);
     }
 
-    const isOwnHandle = connection.source === connection.target;
+    if (connection.source !== connection.target && elementBelow) {
-
-    if (!isOwnHandle && elementBelow) {
       recentHoveredHandle = elementBelow;
       elementBelow.classList.add('react-flow__handle-connecting');
       elementBelow.classList.toggle('react-flow__handle-valid', isValid);
@@ -161,6 +160,7 @@ export function handleMouseDown(
   }
 
   function onMouseUp(event: MouseEvent) {
+    const { onConnectStop, onConnectEnd } = getState();
     const { connection, isValid } = checkElementBelowIsValid(
       event,
       connectionMode,

packages/core/src/components/Handle/index.tsx

@@ -14,17 +14,8 @@ const alwaysValid = () => true;
 export type HandleComponentProps = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>;
 
 const selector = (s: ReactFlowState) => ({
-  onConnectAction: s.onConnect,
-  onConnectStart: s.onConnectStart,
-  onConnectStop: s.onConnectStop,
-  onConnectEnd: s.onConnectEnd,
-  onClickConnectStart: s.onClickConnectStart,
-  onClickConnectStop: s.onClickConnectStop,
-  onClickConnectEnd: s.onClickConnectEnd,
-  connectionMode: s.connectionMode,
   connectionStartHandle: s.connectionStartHandle,
   connectOnClick: s.connectOnClick,
-  hasDefaultEdges: s.hasDefaultEdges,
 });
 
 const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
@@ -45,25 +36,13 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
   ) => {
     const store = useStoreApi();
     const nodeId = useContext(NodeIdContext) as string;
-    const {
+    const { connectionStartHandle, connectOnClick } = useStore(selector, shallow);
-      onConnectAction,
-      onConnectStart,
-      onConnectStop,
-      onConnectEnd,
-      onClickConnectStart,
-      onClickConnectStop,
-      onClickConnectEnd,
-      connectionMode,
-      connectionStartHandle,
-      connectOnClick,
-      hasDefaultEdges,
-    } = useStore(selector, shallow);
 
     const handleId = id || null;
     const isTarget = type === 'target';
 
     const onConnectExtended = (params: Connection) => {
-      const { defaultEdgeOptions } = store.getState();
+      const { defaultEdgeOptions, onConnect: onConnectAction, hasDefaultEdges } = store.getState();
 
       const edgeParams = {
         ...defaultEdgeOptions,
@@ -80,26 +59,22 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
 
     const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {
       if (event.button === 0) {
-        handleMouseDown(
+        handleMouseDown({
           event,
           handleId,
           nodeId,
-          store.setState,
+          onConnect: onConnectExtended,
-          onConnectExtended,
           isTarget,
+          getState: store.getState,
+          setState: store.setState,
           isValidConnection,
-          connectionMode,
+        });
-          undefined,
-          undefined,
-          onConnectStart,
-          onConnectStop,
-          onConnectEnd
-        );
       }
       onMouseDown?.(event);
     };
 
     const onClick = (event: React.MouseEvent) => {
+      const { onClickConnectStart, onClickConnectStop, onClickConnectEnd, connectionMode } = store.getState();
       if (!connectionStartHandle) {
         onClickConnectStart?.(event, { nodeId, handleId, handleType: type });
         store.setState({ connectionStartHandle: { nodeId, type, handleId } });
@@ -128,28 +103,26 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       store.setState({ connectionStartHandle: null });
     };
 
-    const handleClasses = cc([
-      'react-flow__handle',
-      `react-flow__handle-${position}`,
-      'nodrag',
-      className,
-      {
-        source: !isTarget,
-        target: isTarget,
-        connectable: isConnectable,
-        connecting:
-          connectionStartHandle?.nodeId === nodeId &&
-          connectionStartHandle?.handleId === handleId &&
-          connectionStartHandle?.type === type,
-      },
-    ]);
-
     return (
       <div
         data-handleid={handleId}
         data-nodeid={nodeId}
         data-handlepos={position}
-        className={handleClasses}
+        className={cc([
+          'react-flow__handle',
+          `react-flow__handle-${position}`,
+          'nodrag',
+          className,
+          {
+            source: !isTarget,
+            target: isTarget,
+            connectable: isConnectable,
+            connecting:
+              connectionStartHandle?.nodeId === nodeId &&
+              connectionStartHandle?.handleId === handleId &&
+              connectionStartHandle?.type === type,
+          },
+        ])}
         onMouseDown={onMouseDownHandler}
         onClick={connectOnClick ? onClick : undefined}
         ref={ref}

packages/core/src/components/Nodes/utils.ts

@@ -4,20 +4,10 @@ import { GetState, SetState } from 'zustand';
 import { HandleElement, Node, Position, ReactFlowState } from '../../types';
 import { getDimensions } from '../../utils';
 
-export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
+export const getHandleBounds = (
-  const bounds = nodeElement.getBoundingClientRect();
-
-  return {
-    source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale),
-    target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale),
-  };
-};
-
-export const getHandleBoundsByHandleType = (
   selector: string,
   nodeElement: HTMLDivElement,
-  parentBounds: DOMRect,
+  zoom: number
-  k: number
 ): HandleElement[] | null => {
   const handles = nodeElement.querySelectorAll(selector);
 
@@ -26,19 +16,17 @@ export const getHandleBoundsByHandleType = (
   }
 
   const handlesArray = Array.from(handles) as HTMLDivElement[];
+  const nodeBounds = nodeElement.getBoundingClientRect();
 
   return handlesArray.map((handle): HandleElement => {
-    const bounds = handle.getBoundingClientRect();
+    const handleBounds = handle.getBoundingClientRect();
-    const dimensions = getDimensions(handle);
-    const handleId = handle.getAttribute('data-handleid');
-    const handlePosition = handle.getAttribute('data-handlepos') as unknown as Position;
 
     return {
-      id: handleId,
+      id: handle.getAttribute('data-handleid'),
-      position: handlePosition,
+      position: handle.getAttribute('data-handlepos') as unknown as Position,
-      x: (bounds.left - parentBounds.left) / k,
+      x: (handleBounds.left - nodeBounds.left) / zoom,
-      y: (bounds.top - parentBounds.top) / k,
+      y: (handleBounds.top - nodeBounds.top) / zoom,
-      ...dimensions,
+      ...getDimensions(handle),
     };
   });
 };

packages/core/src/components/Nodes/wrapNode.tsx

@@ -1,14 +1,12 @@
 import React, { useEffect, useRef, memo, ComponentType, MouseEvent } from 'react';
 import cc from 'classcat';
 
-import { useStore, useStoreApi } from '../../store';
+import { useStoreApi } from '../../store';
 import { Provider } from '../../contexts/NodeIdContext';
-import { NodeProps, WrapNodeProps, ReactFlowState } from '../../types';
+import { NodeProps, WrapNodeProps } from '../../types';
 import useDrag from '../../hooks/useDrag';
 import { getMouseHandler, handleNodeClick } from './utils';
 
-const selector = (s: ReactFlowState) => s.updateNodeDimensions;
-
 export default (NodeComponent: ComponentType<NodeProps>) => {
   const NodeWrapper = ({
     id,
@@ -23,9 +21,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     onMouseLeave,
     onContextMenu,
     onDoubleClick,
-    onDragStart,
-    onDrag,
-    onDragStop,
     style,
     className,
     isDraggable,
@@ -44,7 +39,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     initialized,
   }: WrapNodeProps) => {
     const store = useStoreApi();
-    const updateNodeDimensions = useStore(selector);
     const nodeRef = useRef<HTMLDivElement>(null);
     const prevSourcePosition = useRef(sourcePosition);
     const prevTargetPosition = useRef(targetPosition);
@@ -96,14 +90,11 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
         if (targetPosChanged) {
           prevTargetPosition.current = targetPosition;
         }
-        updateNodeDimensions([{ id, nodeElement: nodeRef.current, forceUpdate: true }]);
+        store.getState().updateNodeDimensions([{ id, nodeElement: nodeRef.current, forceUpdate: true }]);
       }
     }, [id, type, sourcePosition, targetPosition]);
 
     const dragging = useDrag({
-      onStart: onDragStart,
-      onDrag: onDrag,
-      onStop: onDragStop,
       nodeRef,
       disabled: hidden || !isDraggable,
       noDragClassName,

packages/core/src/components/NodesSelection/index.tsx

@@ -3,7 +3,7 @@
  * made a selection with on or several nodes
  */
 
-import React, { memo, useCallback, useRef, MouseEvent } from 'react';
+import React, { memo, useRef, MouseEvent } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 
@@ -13,16 +13,14 @@ import { getRectOfNodes } from '../../utils/graph';
 import useDrag from '../../hooks/useDrag';
 
 export interface NodesSelectionProps {
-  onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
-  onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
-  onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
   onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
   noPanClassName?: string;
 }
 
 const selector = (s: ReactFlowState) => ({
-  transform: s.transform,
+  transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`,
   userSelectionActive: s.userSelectionActive,
+  ...getRectOfNodes(Array.from(s.nodeInternals.values()).filter((n) => n.selected)),
 });
 
 const bboxSelector = (s: ReactFlowState) => {
@@ -30,31 +28,14 @@ const bboxSelector = (s: ReactFlowState) => {
   return getRectOfNodes(selectedNodes);
 };
 
-function useGetMemoizedHandler(handler?: (event: MouseEvent, nodes: Node[]) => void) {
+function NodesSelection({ onSelectionContextMenu, noPanClassName }: NodesSelectionProps) {
-  return useCallback((event: MouseEvent, _: Node, nodes: Node[]) => handler?.(event, nodes), [handler]);
-}
-
-function NodesSelection({
-  onSelectionDragStart,
-  onSelectionDrag,
-  onSelectionDragStop,
-  onSelectionContextMenu,
-  noPanClassName,
-}: NodesSelectionProps) {
   const store = useStoreApi();
-  const { transform, userSelectionActive } = useStore(selector, shallow);
+  const { transformString, userSelectionActive } = useStore(selector, shallow);
   const { width, height, x: left, y: top } = useStore(bboxSelector, shallow);
+
   const nodeRef = useRef(null);
 
-  // it's important that these handlers are memoized to avoid multiple creation of d3 drag handler
-  const onStart = useGetMemoizedHandler(onSelectionDragStart);
-  const onDrag = useGetMemoizedHandler(onSelectionDrag);
-  const onStop = useGetMemoizedHandler(onSelectionDragStop);
-
   useDrag({
-    onStart,
-    onDrag,
-    onStop,
     nodeRef,
   });
 
@@ -73,7 +54,7 @@ function NodesSelection({
     <div
       className={cc(['react-flow__nodesselection', 'react-flow__container', noPanClassName])}
       style={{
-        transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
+        transform: transformString,
       }}
     >
       <div

packages/core/src/components/StoreUpdater/index.tsx

@@ -3,56 +3,46 @@ import { SetState } from 'zustand';
 import shallow from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../store';
-import {
+import { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps } from '../../types';
-  Node,
-  Edge,
-  ReactFlowState,
-  OnConnect,
-  OnConnectStart,
-  OnConnectStop,
-  OnConnectEnd,
-  CoordinateExtent,
-  OnNodesChange,
-  OnEdgesChange,
-  ConnectionMode,
-  SnapGrid,
-  DefaultEdgeOptions,
-  FitViewOptions,
-  OnNodesDelete,
-  OnEdgesDelete,
-} from '../../types';
 
-interface StoreUpdaterProps {
+type StoreUpdaterProps = Pick<
-  nodes?: Node[];
+  ReactFlowProps,
-  edges?: Edge[];
+  | 'nodes'
-  defaultNodes?: Node[];
+  | 'edges'
-  defaultEdges?: Edge[];
+  | 'defaultNodes'
-  onConnect?: OnConnect;
+  | 'defaultEdges'
-  onConnectStart?: OnConnectStart;
+  | 'onConnect'
-  onConnectStop?: OnConnectStop;
+  | 'onConnectStart'
-  onConnectEnd?: OnConnectEnd;
+  | 'onConnectStop'
-  onClickConnectStart?: OnConnectStart;
+  | 'onConnectEnd'
-  onClickConnectStop?: OnConnectStop;
+  | 'onClickConnectStart'
-  onClickConnectEnd?: OnConnectEnd;
+  | 'onClickConnectStop'
-  nodesDraggable?: boolean;
+  | 'onClickConnectEnd'
-  nodesConnectable?: boolean;
+  | 'nodesDraggable'
-  minZoom?: number;
+  | 'nodesConnectable'
-  maxZoom?: number;
+  | 'minZoom'
-  nodeExtent?: CoordinateExtent;
+  | 'maxZoom'
-  onNodesChange?: OnNodesChange;
+  | 'nodeExtent'
-  onEdgesChange?: OnEdgesChange;
+  | 'onNodesChange'
-  elementsSelectable?: boolean;
+  | 'onEdgesChange'
-  connectionMode?: ConnectionMode;
+  | 'elementsSelectable'
-  snapToGrid?: boolean;
+  | 'connectionMode'
-  snapGrid?: SnapGrid;
+  | 'snapToGrid'
-  translateExtent?: CoordinateExtent;
+  | 'snapGrid'
-  connectOnClick: boolean;
+  | 'translateExtent'
-  defaultEdgeOptions?: DefaultEdgeOptions;
+  | 'connectOnClick'
-  fitView?: boolean;
+  | 'defaultEdgeOptions'
-  fitViewOptions?: FitViewOptions;
+  | 'fitView'
-  onNodesDelete?: OnNodesDelete;
+  | 'fitViewOptions'
-  onEdgesDelete?: OnEdgesDelete;
+  | 'onNodesDelete'
-}
+  | 'onEdgesDelete'
+  | 'onNodeDragStart'
+  | 'onNodeDrag'
+  | 'onNodeDragStop'
+  | 'onSelectionDragStart'
+  | 'onSelectionDrag'
+  | 'onSelectionDragStop'
+>;
 
 const selector = (s: ReactFlowState) => ({
   setNodes: s.setNodes,
@@ -112,6 +102,12 @@ const StoreUpdater = ({
   fitViewOptions,
   onNodesDelete,
   onEdgesDelete,
+  onNodeDrag,
+  onNodeDragStart,
+  onNodeDragStop,
+  onSelectionDrag,
+  onSelectionDragStart,
+  onSelectionDragStop,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -154,6 +150,12 @@ const StoreUpdater = ({
   useDirectStoreUpdater('fitViewOnInitOptions', fitViewOptions, store.setState);
   useDirectStoreUpdater('onNodesDelete', onNodesDelete, store.setState);
   useDirectStoreUpdater('onEdgesDelete', onEdgesDelete, store.setState);
+  useDirectStoreUpdater('onNodeDrag', onNodeDrag, store.setState);
+  useDirectStoreUpdater('onNodeDragStart', onNodeDragStart, store.setState);
+  useDirectStoreUpdater('onNodeDragStop', onNodeDragStop, store.setState);
+  useDirectStoreUpdater('onSelectionDrag', onSelectionDrag, store.setState);
+  useDirectStoreUpdater('onSelectionDragStart', onSelectionDragStart, store.setState);
+  useDirectStoreUpdater('onSelectionDragStop', onSelectionDragStop, store.setState);
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);

packages/core/src/container/EdgeRenderer/index.tsx

@@ -45,9 +45,7 @@ interface EdgeRendererProps {
 
 const selector = (s: ReactFlowState) => ({
   connectionNodeId: s.connectionNodeId,
-  connectionHandleId: s.connectionHandleId,
   connectionHandleType: s.connectionHandleType,
-  connectionPosition: s.connectionPosition,
   nodesConnectable: s.nodesConnectable,
   elementsSelectable: s.elementsSelectable,
   width: s.width,
@@ -59,9 +57,7 @@ const selector = (s: ReactFlowState) => ({
 const EdgeRenderer = (props: EdgeRendererProps) => {
   const {
     connectionNodeId,
-    connectionHandleId,
     connectionHandleType,
-    connectionPosition,
     nodesConnectable,
     elementsSelectable,
     width,
@@ -201,10 +197,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
         >
           <ConnectionLine
             connectionNodeId={connectionNodeId!}
-            connectionHandleId={connectionHandleId}
             connectionHandleType={connectionHandleType!}
-            connectionPositionX={connectionPosition.x}
-            connectionPositionY={connectionPosition.y}
             connectionLineStyle={connectionLineStyle}
             connectionLineType={connectionLineType}
             isConnectable={nodesConnectable}

packages/core/src/container/FlowRenderer/index.tsx

@@ -1,5 +1,4 @@
 import React, { memo, ReactNode, WheelEvent, MouseEvent } from 'react';
-import shallow from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../store';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
@@ -27,10 +26,7 @@ export type FlowRendererProps = Omit<
   children: ReactNode;
 };
 
-const selector = (s: ReactFlowState) => ({
+const selector = (s: ReactFlowState) => s.nodesSelectionActive;
-  resetSelectedElements: s.resetSelectedElements,
-  nodesSelectionActive: s.nodesSelectionActive,
-});
 
 const FlowRenderer = ({
   children,
@@ -55,27 +51,24 @@ const FlowRenderer = ({
   defaultPosition,
   defaultZoom,
   preventScrolling,
-  onSelectionDragStart,
-  onSelectionDrag,
-  onSelectionDragStop,
   onSelectionContextMenu,
   noWheelClassName,
   noPanClassName,
 }: FlowRendererProps) => {
   const store = useStoreApi();
-  const { resetSelectedElements, nodesSelectionActive } = useStore(selector, shallow);
+  const nodesSelectionActive = useStore(selector);
   const selectionKeyPressed = useKeyPress(selectionKeyCode);
 
   useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
 
   const onClick = (event: MouseEvent) => {
     onPaneClick?.(event);
-    resetSelectedElements();
+    store.getState().resetSelectedElements();
-
     store.setState({ nodesSelectionActive: false });
   };
-  const onContextMenu = (event: MouseEvent) => onPaneContextMenu?.(event);
+
-  const onWheel = (event: WheelEvent) => onPaneScroll?.(event);
+  const onContextMenu = onPaneContextMenu ? (event: MouseEvent) => onPaneContextMenu(event) : undefined;
+  const onWheel = onPaneScroll ? (event: WheelEvent) => onPaneScroll(event) : undefined;
 
   return (
     <ZoomPane
@@ -101,13 +94,7 @@ const FlowRenderer = ({
       {children}
       <UserSelection selectionKeyPressed={selectionKeyPressed} />
       {nodesSelectionActive && (
-        <NodesSelection
+        <NodesSelection onSelectionContextMenu={onSelectionContextMenu} noPanClassName={noPanClassName} />
-          onSelectionDragStart={onSelectionDragStart}
-          onSelectionDrag={onSelectionDrag}
-          onSelectionDragStop={onSelectionDragStop}
-          onSelectionContextMenu={onSelectionContextMenu}
-          noPanClassName={noPanClassName}
-        />
       )}
       <div
         className="react-flow__pane react-flow__container"

packages/core/src/container/GraphView/index.tsx

@@ -40,12 +40,6 @@ const GraphView = ({
   onNodeMouseMove,
   onNodeMouseLeave,
   onNodeContextMenu,
-  onNodeDragStart,
-  onNodeDrag,
-  onNodeDragStop,
-  onSelectionDragStart,
-  onSelectionDrag,
-  onSelectionDragStop,
   onSelectionContextMenu,
   connectionLineType,
   connectionLineStyle,
@@ -110,9 +104,6 @@ const GraphView = ({
       panOnDrag={panOnDrag}
       defaultPosition={defaultPosition}
       defaultZoom={defaultZoom}
-      onSelectionDragStart={onSelectionDragStart}
-      onSelectionDrag={onSelectionDrag}
-      onSelectionDragStop={onSelectionDragStop}
       onSelectionContextMenu={onSelectionContextMenu}
       preventScrolling={preventScrolling}
       noDragClassName={noDragClassName}
@@ -150,9 +141,6 @@ const GraphView = ({
           onNodeMouseMove={onNodeMouseMove}
           onNodeMouseLeave={onNodeMouseLeave}
           onNodeContextMenu={onNodeContextMenu}
-          onNodeDragStop={onNodeDragStop}
-          onNodeDrag={onNodeDrag}
-          onNodeDragStart={onNodeDragStart}
           selectNodesOnDrag={selectNodesOnDrag}
           onlyRenderVisibleElements={onlyRenderVisibleElements}
           noPanClassName={noPanClassName}

packages/core/src/container/NodeRenderer/index.tsx

@@ -3,14 +3,7 @@ import shallow from 'zustand/shallow';
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
 import { useStore } from '../../store';
-import {
+import { NodeMouseHandler, NodeTypesWrapped, Position, ReactFlowState, WrapNodeProps } from '../../types';
-  NodeDragHandler,
-  NodeMouseHandler,
-  NodeTypesWrapped,
-  Position,
-  ReactFlowState,
-  WrapNodeProps,
-} from '../../types';
 import { internalsSymbol } from '../../utils';
 
 interface NodeRendererProps {
@@ -22,9 +15,6 @@ interface NodeRendererProps {
   onNodeMouseMove?: NodeMouseHandler;
   onNodeMouseLeave?: NodeMouseHandler;
   onNodeContextMenu?: NodeMouseHandler;
-  onNodeDragStart?: NodeDragHandler;
-  onNodeDrag?: NodeDragHandler;
-  onNodeDragStop?: NodeDragHandler;
   onlyRenderVisibleElements: boolean;
   noPanClassName: string;
   noDragClassName: string;
@@ -109,9 +99,6 @@ const NodeRenderer = (props: NodeRendererProps) => {
             onMouseLeave={props.onNodeMouseLeave}
             onContextMenu={props.onNodeContextMenu}
             onDoubleClick={props.onNodeDoubleClick}
-            onDragStart={props.onNodeDragStart}
-            onDrag={props.onNodeDrag}
-            onDragStop={props.onNodeDragStop}
             selected={!!node.selected}
             isDraggable={isDraggable}
             isSelectable={isSelectable}

packages/core/src/container/ReactFlow/index.tsx

@@ -165,9 +165,6 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onNodeMouseLeave={onNodeMouseLeave}
             onNodeContextMenu={onNodeContextMenu}
             onNodeDoubleClick={onNodeDoubleClick}
-            onNodeDragStart={onNodeDragStart}
-            onNodeDrag={onNodeDrag}
-            onNodeDragStop={onNodeDragStop}
             nodeTypes={nodeTypesWrapped}
             edgeTypes={edgeTypesWrapped}
             connectionLineType={connectionLineType}
@@ -193,9 +190,6 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onPaneClick={onPaneClick}
             onPaneScroll={onPaneScroll}
             onPaneContextMenu={onPaneContextMenu}
-            onSelectionDragStart={onSelectionDragStart}
-            onSelectionDrag={onSelectionDrag}
-            onSelectionDragStop={onSelectionDragStop}
             onSelectionContextMenu={onSelectionContextMenu}
             onEdgeUpdate={onEdgeUpdate}
             onEdgeContextMenu={onEdgeContextMenu}
@@ -243,6 +237,12 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             fitViewOptions={fitViewOptions}
             onNodesDelete={onNodesDelete}
             onEdgesDelete={onEdgesDelete}
+            onNodeDragStart={onNodeDragStart}
+            onNodeDrag={onNodeDrag}
+            onNodeDragStop={onNodeDragStop}
+            onSelectionDrag={onSelectionDrag}
+            onSelectionDragStart={onSelectionDragStart}
+            onSelectionDragStop={onSelectionDragStop}
           />
           {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
           {children}

packages/core/src/container/Viewport/index.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import { useStore } from '../../store';
 import { ReactFlowState } from '../../types';
 
-const selector = (s: ReactFlowState) => s.transform;
+const selector = (s: ReactFlowState) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
 
 type ViewportProps = {
   children: ReactNode;
@@ -13,10 +13,7 @@ function Viewport({ children }: ViewportProps) {
   const transform = useStore(selector);
 
   return (
-    <div
+    <div className="react-flow__viewport react-flow__container" style={{ transform: transform }}>
-      className="react-flow__viewport react-flow__container"
-      style={{ transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})` }}
-    >
       {children}
     </div>
   );

packages/core/src/container/ZoomPane/index.tsx

@@ -54,6 +54,7 @@ const ZoomPane = ({
   noPanClassName,
 }: ZoomPaneProps) => {
   const store = useStoreApi();
+  const isZoomingOrPanning = useRef(false);
   const zoomPane = useRef<HTMLDivElement>(null);
   const prevTransform = useRef<Viewport>({ x: 0, y: 0, zoom: 0 });
   const { d3Zoom, d3Selection, d3ZoomHandler } = useStore(selector, shallow);
@@ -146,12 +147,11 @@ const ZoomPane = ({
 
   useEffect(() => {
     if (d3Zoom) {
-      if (selectionKeyPressed) {
+      if (selectionKeyPressed && !isZoomingOrPanning.current) {
         d3Zoom.on('zoom', null);
-      } else {
+      } else if (!selectionKeyPressed) {
         d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
           store.setState({ transform: [event.transform.x, event.transform.y, event.transform.k] });
-
           if (onMove) {
             const flowTransform = eventToFlowTransform(event.transform);
             onMove(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
@@ -163,33 +163,31 @@ const ZoomPane = ({
 
   useEffect(() => {
     if (d3Zoom) {
-      if (onMoveStart) {
+      d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-        d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+        isZoomingOrPanning.current = true;
+
+        if (onMoveStart) {
           const flowTransform = eventToFlowTransform(event.transform);
           prevTransform.current = flowTransform;
 
           onMoveStart(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
-        });
+        }
-      } else {
+      });
-        d3Zoom.on('start', null);
-      }
     }
   }, [d3Zoom, onMoveStart]);
 
   useEffect(() => {
     if (d3Zoom) {
-      if (onMoveEnd) {
+      d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-        d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+        isZoomingOrPanning.current = false;
-          if (viewChanged(prevTransform.current, event.transform)) {
-            const flowTransform = eventToFlowTransform(event.transform);
-            prevTransform.current = flowTransform;
 
-            onMoveEnd(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
+        if (onMoveEnd && viewChanged(prevTransform.current, event.transform)) {
-          }
+          const flowTransform = eventToFlowTransform(event.transform);
-        });
+          prevTransform.current = flowTransform;
-      } else {
+
-        d3Zoom.on('end', null);
+          onMoveEnd(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
-      }
+        }
+      });
     }
   }, [d3Zoom, onMoveEnd]);
 

packages/core/src/hooks/useDrag/index.ts

@@ -4,7 +4,7 @@ import { select } from 'd3-selection';
 
 import { useStoreApi } from '../../store';
 import { pointToRendererPoint } from '../../utils/graph';
-import { NodeDragItem, NodeDragHandler } from '../../types';
+import { NodeDragItem, Node, SelectionDragHandler } from '../../types';
 import { getDragItems, getEventHandlerParams, hasSelector, updatePosition } from './utils';
 import { handleNodeClick } from '../../components/Nodes/utils';
 
@@ -13,9 +13,6 @@ export type UseDragData = { dx: number; dy: number };
 
 type UseDragParams = {
   nodeRef: RefObject<Element>;
-  onStart?: NodeDragHandler;
-  onDrag?: NodeDragHandler;
-  onStop?: NodeDragHandler;
   disabled?: boolean;
   noDragClassName?: string;
   handleSelector?: string;
@@ -24,10 +21,11 @@ type UseDragParams = {
   selectNodesOnDrag?: boolean;
 };
 
+function wrapSelectionDragFunc(selectionFunc?: SelectionDragHandler) {
+  return (event: MouseEvent, _: Node, nodes: Node[]) => selectionFunc?.(event, nodes);
+}
+
 function useDrag({
-  onStart,
-  onDrag,
-  onStop,
   nodeRef,
   disabled = false,
   noDragClassName,
@@ -60,7 +58,15 @@ function useDrag({
       } else {
         const dragHandler = drag()
           .on('start', (event: UseDragEvent) => {
-            const { nodeInternals, multiSelectionActive, unselectNodesAndEdges } = store.getState();
+            const {
+              nodeInternals,
+              multiSelectionActive,
+              unselectNodesAndEdges,
+              onNodeDragStart,
+              onSelectionDragStart,
+            } = store.getState();
+
+            const onStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
 
             if (!selectNodesOnDrag && !multiSelectionActive && nodeId) {
               if (!nodeInternals.get(nodeId)?.selected) {
@@ -77,6 +83,7 @@ function useDrag({
             }
 
             const pointerPos = getPointerPosition(event);
+            lastPos.current = pointerPos;
             dragItems.current = getDragItems(nodeInternals, pointerPos, nodeId);
 
             if (onStart && dragItems.current) {
@@ -89,7 +96,7 @@ function useDrag({
             }
           })
           .on('drag', (event: UseDragEvent) => {
-            const { updateNodePositions, nodeInternals, nodeExtent } = store.getState();
+            const { updateNodePositions, nodeInternals, nodeExtent, onNodeDrag, onSelectionDrag } = store.getState();
             const pointerPos = getPointerPosition(event);
 
             // skip events without movement
@@ -99,6 +106,8 @@ function useDrag({
                 updatePosition(n, pointerPos, nodeInternals, nodeExtent)
               );
 
+              const onDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
+
               updateNodePositions(dragItems.current, true, true);
               setDragging(true);
 
@@ -115,6 +124,9 @@ function useDrag({
             event.on('end', (event) => {
               setDragging(false);
               if (dragItems.current) {
+                const { updateNodePositions, nodeInternals, onNodeDragStop, onSelectionDragStop } = store.getState();
+                const onStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
+
                 updateNodePositions(dragItems.current, false, false);
 
                 if (onStop) {
@@ -146,9 +158,6 @@ function useDrag({
       }
     }
   }, [
-    onStart,
-    onDrag,
-    onStop,
     nodeRef,
     disabled,
     noDragClassName,

packages/core/src/hooks/useDrag/utils.ts

@@ -39,7 +39,8 @@ export function getDragItems(nodeInternals: NodeInternals, mousePos: XYPosition,
     .filter((n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, nodeInternals)))
     .map((n) => ({
       id: n.id,
-      position: n.positionAbsolute || { x: 0, y: 0 },
+      position: n.position || { x: 0, y: 0 },
+      positionAbsolute: n.positionAbsolute || { x: 0, y: 0 },
       distance: {
         x: mousePos.x - (n.positionAbsolute?.x ?? 0),
         y: mousePos.y - (n.positionAbsolute?.y ?? 0),
@@ -94,14 +95,28 @@ export function updatePosition(
     ];
   }
 
-  dragItem.position = currentExtent ? clampPosition(nextPosition, currentExtent as CoordinateExtent) : nextPosition;
+  let parentPosition = { x: 0, y: 0 };
+
+  if (dragItem.parentNode) {
+    const parentNode = nodeInternals.get(dragItem.parentNode);
+    parentPosition = { x: parentNode?.positionAbsolute?.x ?? 0, y: parentNode?.positionAbsolute?.y ?? 0 };
+  }
+
+  dragItem.positionAbsolute = currentExtent
+    ? clampPosition(nextPosition, currentExtent as CoordinateExtent)
+    : nextPosition;
+
+  dragItem.position = {
+    x: dragItem.positionAbsolute.x - parentPosition.x,
+    y: dragItem.positionAbsolute.y - parentPosition.y,
+  };
 
   return dragItem;
 }
 
 // returns two params:
 // 1. the dragged node (or the first of the list, if we are dragging a node selection)
-// 2. array of selected nodes (handy when multi selection is active)
+// 2. array of selected nodes (for multi selections)
 export function getEventHandlerParams({
   nodeId,
   dragItems,
@@ -116,6 +131,8 @@ export function getEventHandlerParams({
 
     return {
       ...node,
+      position: n.position,
+      positionAbsolute: n.positionAbsolute,
     };
   });
 

packages/core/src/hooks/useViewportHelper.ts

@@ -38,12 +38,12 @@ const useViewportHelper = (): ViewportHelperFunctions => {
         zoomIn: (options) => d3Zoom.scaleBy(getD3Transition(d3Selection, options?.duration), 1.2),
         zoomOut: (options) => d3Zoom.scaleBy(getD3Transition(d3Selection, options?.duration), 1 / 1.2),
         zoomTo: (zoomLevel, options) => d3Zoom.scaleTo(getD3Transition(d3Selection, options?.duration), zoomLevel),
-        getZoom: () => {
+        getZoom: () => store.getState().transform[2],
-          const [, , zoom] = store.getState().transform;
-          return zoom;
-        },
         setViewport: (transform, options) => {
-          const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom);
+          const [x, y, zoom] = store.getState().transform;
+          const nextTransform = zoomIdentity
+            .translate(transform.x ?? x, transform.y ?? y)
+            .scale(transform.zoom ?? zoom);
           d3Zoom.transform(getD3Transition(d3Selection, options?.duration), nextTransform);
         },
         getViewport: () => {

packages/core/src/hooks/useVisibleNodes.ts

@@ -8,11 +8,10 @@ import { ReactFlowState } from '../types';
 function useVisibleNodes(onlyRenderVisible: boolean) {
   const nodes = useStore(
     useCallback(
-      (s: ReactFlowState) => {
+      (s: ReactFlowState) =>
-        return onlyRenderVisible
+        onlyRenderVisible
           ? getNodesInside(s.nodeInternals, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
-          : Array.from(s.nodeInternals.values());
+          : Array.from(s.nodeInternals.values()),
-      },
       [onlyRenderVisible]
     )
   );

packages/core/src/store/index.ts

@@ -43,7 +43,10 @@ const createStore = () =>
       set({ nodeInternals, edges: nextEdges, hasDefaultNodes, hasDefaultEdges });
     },
     updateNodeDimensions: (updates: NodeDimensionUpdate[]) => {
-      const { onNodesChange, transform, nodeInternals, fitViewOnInit, fitViewOnInitDone, fitViewOnInitOptions } = get();
+      const { onNodesChange, nodeInternals, fitViewOnInit, fitViewOnInitDone, fitViewOnInitOptions } = get();
+
+      const style = window.getComputedStyle(document.querySelector('.react-flow__viewport')!);
+      const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
 
       const changes: NodeDimensionChange[] = updates.reduce<NodeDimensionChange[]>((res, update) => {
         const node = nodeInternals.get(update.id);
@@ -57,12 +60,14 @@ const createStore = () =>
           );
 
           if (doUpdate) {
-            const handleBounds = getHandleBounds(update.nodeElement, transform[2]);
             nodeInternals.set(node.id, {
               ...node,
               [internalsSymbol]: {
                 ...node[internalsSymbol],
-                handleBounds,
+                handleBounds: {
+                  source: getHandleBounds('.source', update.nodeElement, zoom),
+                  target: getHandleBounds('.target', update.nodeElement, zoom),
+                },
               },
               ...dimensions,
             });
@@ -99,16 +104,8 @@ const createStore = () =>
           };
 
           if (positionChanged) {
-            change.positionAbsolute = node.position;
+            change.positionAbsolute = node.positionAbsolute;
             change.position = node.position;
-
-            if (node.parentNode) {
-              const parentNode = nodeInternals.get(node.parentNode);
-              change.position = {
-                x: change.position.x - (parentNode?.positionAbsolute?.x ?? 0),
-                y: change.position.y - (parentNode?.positionAbsolute?.y ?? 0),
-              };
-            }
           }
 
           return change;

packages/core/src/types/component-props.ts

@@ -38,6 +38,7 @@ import {
   OnMoveEnd,
   NodeDragHandler,
   NodeMouseHandler,
+  SelectionDragHandler,
 } from '.';
 import { HandleType } from './handles';
 
@@ -73,9 +74,9 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   onMoveStart?: OnMoveStart;
   onMoveEnd?: OnMoveEnd;
   onSelectionChange?: OnSelectionChangeFunc;
-  onSelectionDragStart?: (event: ReactMouseEvent, nodes: Node[]) => void;
+  onSelectionDragStart?: SelectionDragHandler;
-  onSelectionDrag?: (event: ReactMouseEvent, nodes: Node[]) => void;
+  onSelectionDrag?: SelectionDragHandler;
-  onSelectionDragStop?: (event: ReactMouseEvent, nodes: Node[]) => void;
+  onSelectionDragStop?: SelectionDragHandler;
   onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void;
   onPaneScroll?: (event?: WheelEvent) => void;
   onPaneClick?: (event: ReactMouseEvent) => void;

packages/core/src/types/edges.ts

@@ -148,17 +148,23 @@ export enum ConnectionLineType {
 }
 
 export type ConnectionLineComponentProps = {
+  connectionLineStyle?: CSSProperties;
+  connectionLineType: ConnectionLineType;
+  fromNode?: Node;
+  fromHandle?: HandleElement;
+  fromX: number;
+  fromY: number;
+  toX: number;
+  toY: number;
+  fromPosition: Position;
+  toPosition: Position;
+  // remove in v11
   sourceX: number;
   sourceY: number;
   sourcePosition?: Position;
   targetX: number;
   targetY: number;
   targetPosition?: Position;
-  connectionLineStyle?: CSSProperties;
-  connectionLineType: ConnectionLineType;
-  fromNode?: Node;
-  fromHandle?: HandleElement;
-  // backward compatibility, mark as deprecated?
   sourceNode?: Node;
   sourceHandle?: HandleElement;
 };

packages/core/src/types/general.ts

@@ -3,7 +3,16 @@ import { Selection as D3Selection, ZoomBehavior } from 'd3';
 
 import { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
 import { NodeChange, EdgeChange } from './changes';
-import { Node, NodeInternals, NodeDimensionUpdate, NodeProps, WrapNodeProps, NodeDragItem } from './nodes';
+import {
+  Node,
+  NodeInternals,
+  NodeDimensionUpdate,
+  NodeProps,
+  WrapNodeProps,
+  NodeDragItem,
+  NodeDragHandler,
+  SelectionDragHandler,
+} from './nodes';
 import { Edge, EdgeProps, WrapEdgeProps } from './edges';
 import { HandleType, StartHandle } from './handles';
 import { DefaultEdgeOptions } from '.';
@@ -165,6 +174,14 @@ export type ReactFlowStore = {
 
   connectionStartHandle: StartHandle | null;
 
+  onNodeDragStart?: NodeDragHandler;
+  onNodeDrag?: NodeDragHandler;
+  onNodeDragStop?: NodeDragHandler;
+
+  onSelectionDragStart?: SelectionDragHandler;
+  onSelectionDrag?: SelectionDragHandler;
+  onSelectionDragStop?: SelectionDragHandler;
+
   onConnect?: OnConnect;
   onConnectStart?: OnConnectStart;
   onConnectStop?: OnConnectStop;

packages/core/src/types/nodes.ts

@@ -55,6 +55,7 @@ export interface NodeProps<T = any> {
 
 export type NodeMouseHandler = (event: ReactMouseEvent, node: Node) => void;
 export type NodeDragHandler = (event: ReactMouseEvent, node: Node, nodes: Node[]) => void;
+export type SelectionDragHandler = (event: ReactMouseEvent, nodes: Node[]) => void;
 
 export interface WrapNodeProps<T = any> {
   id: string;
@@ -74,9 +75,6 @@ export interface WrapNodeProps<T = any> {
   onMouseMove?: NodeMouseHandler;
   onMouseLeave?: NodeMouseHandler;
   onContextMenu?: NodeMouseHandler;
-  onDragStart?: NodeDragHandler;
-  onDrag?: NodeDragHandler;
-  onDragStop?: NodeDragHandler;
   style?: CSSProperties;
   className?: string;
   sourcePosition: Position;
@@ -110,8 +108,8 @@ export type NodeBounds = XYPosition & {
 
 export type NodeDragItem = {
   id: string;
-  // relative node position
   position: XYPosition;
+  positionAbsolute: XYPosition;
   // distance from the mouse cursor to the node when start dragging
   distance: XYPosition;
   width?: number | null;

packages/core/src/utils/changes.ts

@@ -10,17 +10,14 @@ function handleParentExpand(res: any[], updateItem: any) {
     if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
       parent.style = { ...parent.style } || {};
 
+      parent.style.width = parent.style.width ?? parent.width;
+      parent.style.height = parent.style.height ?? parent.height;
+
       if (extendWidth > 0) {
-        if (!parent.style.width) {
-          parent.style.width = parent.width;
-        }
         parent.style.width += extendWidth;
       }
 
       if (extendHeight > 0) {
-        if (!parent.style.height) {
-          parent.style.height = parent.height;
-        }
         parent.style.height += extendHeight;
       }