Merge branch 'v11' of github.com:wbkd/react-flow into v11

2022-07-18 18:13:19 +02:00
parent b0f362bf60 6baf325b24
commit 97a9d0440f
39 changed files with 7344 additions and 7241 deletions
--- a/packages/core/example/package.json
+++ b/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",
--- a/packages/core/example/src/Basic/index.tsx
+++ b/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}
--- a/packages/core/example/src/CustomConnectionLine/ConnectionLine.tsx
+++ b/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>
  );
 };
--- a/packages/core/example/src/CustomConnectionLine/index.tsx
+++ b/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
--- a/packages/core/example/src/SaveRestore/Controls.tsx
+++ b/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 { setViewport } = useReactFlow();
+const Controls: FC<ControlsProps> = ({ setNodes, setEdges }) => {
+  const { setViewport, toObject } = useReactFlow();

  const onSave = useCallback(() => {
-    if (rfInstance) {
-      const flow = rfInstance.toObject();
-      localforage.setItem(flowKey, flow);
-    }
-  }, [rfInstance]);
+    const flow = toObject();
+    localforage.setItem(flowKey, flow);
+  }, [toObject]);

  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 });
--- a/packages/core/example/src/SaveRestore/index.tsx
+++ b/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>
  );
--- a/packages/core/example/src/Subflow/DebugNode.tsx
+++ b/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);
--- a/packages/core/example/src/Subflow/index.tsx
+++ b/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}
--- a/packages/core/example/src/Validation/index.tsx
+++ b/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) => {
-    console.log('on connect', params);
-    setEdges((eds) => addEdge(params, eds));
-  };
+  const onConnectStart = useCallback(
+    (event: React.MouseEvent, params: OnConnectStartParams) => {
+      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
    />
--- a/packages/core/package-lock.json
+++ b/packages/core/package-lock.json
--- a/packages/core/src/additional-components/MiniMap/index.tsx
+++ b/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,
-  height: s.height,
-  transform: s.transform,
+  viewBBox: {
+    x: -s.transform[0] / s.transform[2],
+    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 = {
-    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 boundingRect = nodes.length > 0 ? getBoundsofRects(getRectOfNodes(nodes), viewBBox) : viewBBox;
  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"
      />
--- a/packages/core/src/components/ConnectionLine/index.tsx
+++ b/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 handleId = connectionHandleId;
+  const { fromNode, handleId, toX, toY } = useStore(
+    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);
-  const fromNode = useRef<Node | undefined>(nodeInternals.get(nodeId));
-  const fromHandleBounds = fromNode.current?.[internalsSymbol]?.handleBounds;
-
-  if (!fromNode.current || !isConnectable || !fromHandleBounds?.[connectionHandleType]) {
+  if (!fromNode || !isConnectable || !fromHandleBounds?.[connectionHandleType]) {
    return null;
  }

-  const handleBound = fromHandleBounds[connectionHandleType];
-  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 fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.current?.height ?? 0;
-  const fromX = (fromNode.current.positionAbsolute?.x || 0) + fromHandleX;
-  const fromY = (fromNode.current.positionAbsolute?.y || 0) + fromHandleY;
-
-  const toX = (connectionPositionX - transform[0]) / transform[2];
-  const toY = (connectionPositionY - transform[1]) / transform[2];
+  const handleBound = fromHandleBounds[connectionHandleType]!;
+  const fromHandle = handleId ? handleBound.find((d) => d.id === handleId) : handleBound[0];
+  const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode?.width ?? 0) / 2;
+  const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode?.height ?? 0;
+  const fromX = (fromNode?.positionAbsolute?.x || 0) + fromHandleX;
+  const fromY = (fromNode?.positionAbsolute?.y || 0) + fromHandleY;

  const fromPosition = fromHandle?.position;

-  let toPosition: Position | undefined;
-  switch (fromPosition) {
-    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;
+  if (!fromPosition) {
+    return null;
  }

+  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?
-          sourceNode={fromNode.current}
+          fromX={fromX}
+          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>
    );
--- a/packages/core/src/components/Edges/wrapEdge.tsx
+++ b/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 { EdgeProps, WrapEdgeProps, ReactFlowState, Connection } from '../../types';
+import { useStoreApi } from '../../store';
+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 { edges } = store.getState();
-        const edge = edges.find((e) => e.id === id);
+      const onConnectEdge = (connection: Connection) => onEdgeUpdate?.(edge, connection);

-        if (edge && onEdgeUpdate) {
-          onEdgeUpdate(edge, connection);
-        }
-      };
-
-      handleMouseDown(
+      handleMouseDown({
        event,
        handleId,
        nodeId,
-        store.setState,
-        onConnectEdge,
+        onConnect: onConnectEdge,
        isTarget,
+        getState: store.getState,
+        setState: store.setState,
        isValidConnection,
-        connectionMode,
-        handleType,
-        _onEdgeUpdate,
-        store.getState
-      );
+        elementEdgeUpdaterType: handleType,
+        onEdgeUpdateEnd: _onEdgeUpdateEnd,
+      });
    };

    const onEdgeUpdaterSourceMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
--- a/packages/core/src/components/Handle/handler.ts
+++ b/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 {
-  OnConnect,
-  OnConnectStart,
-  OnConnectStop,
-  OnConnectEnd,
-  ConnectionMode,
-  Connection,
-  HandleType,
-  ReactFlowState,
-} from '../../types';
+import { OnConnect, 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(
-  event: ReactMouseEvent,
-  handleId: string | null,
-  nodeId: string,
-  setState: SetState<ReactFlowState>,
-  onConnect: OnConnect,
-  isTarget: boolean,
-  isValidConnection: ValidConnectionFunc,
-  connectionMode: ConnectionMode,
-  elementEdgeUpdaterType?: HandleType,
-  onEdgeUpdateEnd?: (evt: MouseEvent) => void,
-  onConnectStart?: OnConnectStart,
-  onConnectStop?: OnConnectStop,
-  onConnectEnd?: OnConnectEnd
-): void {
+export function handleMouseDown({
+  event,
+  handleId,
+  nodeId,
+  onConnect,
+  isTarget,
+  getState,
+  setState,
+  isValidConnection,
+  elementEdgeUpdaterType,
+  onEdgeUpdateEnd,
+}: {
+  event: ReactMouseEvent;
+  handleId: string | null;
+  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 (!isOwnHandle && elementBelow) {
+    if (connection.source !== connection.target && 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,
--- a/packages/core/src/components/Handle/index.tsx
+++ b/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 {
-      onConnectAction,
-      onConnectStart,
-      onConnectStop,
-      onConnectEnd,
-      onClickConnectStart,
-      onClickConnectStop,
-      onClickConnectEnd,
-      connectionMode,
-      connectionStartHandle,
-      connectOnClick,
-      hasDefaultEdges,
-    } = useStore(selector, shallow);
+    const { connectionStartHandle, connectOnClick } = 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,
-          onConnectExtended,
+          onConnect: 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}
--- a/packages/core/src/components/Nodes/utils.ts
+++ b/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) => {
-  const bounds = nodeElement.getBoundingClientRect();
-
-  return {
-    source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale),
-    target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale),
-  };
-};
-
-export const getHandleBoundsByHandleType = (
+export const getHandleBounds = (
  selector: string,
  nodeElement: HTMLDivElement,
-  parentBounds: DOMRect,
-  k: number
+  zoom: 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 dimensions = getDimensions(handle);
-    const handleId = handle.getAttribute('data-handleid');
-    const handlePosition = handle.getAttribute('data-handlepos') as unknown as Position;
+    const handleBounds = handle.getBoundingClientRect();

    return {
-      id: handleId,
-      position: handlePosition,
-      x: (bounds.left - parentBounds.left) / k,
-      y: (bounds.top - parentBounds.top) / k,
-      ...dimensions,
+      id: handle.getAttribute('data-handleid'),
+      position: handle.getAttribute('data-handlepos') as unknown as Position,
+      x: (handleBounds.left - nodeBounds.left) / zoom,
+      y: (handleBounds.top - nodeBounds.top) / zoom,
+      ...getDimensions(handle),
    };
  });
 };
--- a/packages/core/src/components/Nodes/wrapNode.tsx
+++ b/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,
--- a/packages/core/src/components/NodesSelection/index.tsx
+++ b/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) {
-  return useCallback((event: MouseEvent, _: Node, nodes: Node[]) => handler?.(event, nodes), [handler]);
-}
-
-function NodesSelection({
-  onSelectionDragStart,
-  onSelectionDrag,
-  onSelectionDragStop,
-  onSelectionContextMenu,
-  noPanClassName,
-}: NodesSelectionProps) {
+function NodesSelection({ 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
--- a/packages/core/src/components/StoreUpdater/index.tsx
+++ b/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 {
-  Node,
-  Edge,
-  ReactFlowState,
-  OnConnect,
-  OnConnectStart,
-  OnConnectStop,
-  OnConnectEnd,
-  CoordinateExtent,
-  OnNodesChange,
-  OnEdgesChange,
-  ConnectionMode,
-  SnapGrid,
-  DefaultEdgeOptions,
-  FitViewOptions,
-  OnNodesDelete,
-  OnEdgesDelete,
-} from '../../types';
+import { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps } from '../../types';

-interface StoreUpdaterProps {
-  nodes?: Node[];
-  edges?: Edge[];
-  defaultNodes?: Node[];
-  defaultEdges?: Edge[];
-  onConnect?: OnConnect;
-  onConnectStart?: OnConnectStart;
-  onConnectStop?: OnConnectStop;
-  onConnectEnd?: OnConnectEnd;
-  onClickConnectStart?: OnConnectStart;
-  onClickConnectStop?: OnConnectStop;
-  onClickConnectEnd?: OnConnectEnd;
-  nodesDraggable?: boolean;
-  nodesConnectable?: boolean;
-  minZoom?: number;
-  maxZoom?: number;
-  nodeExtent?: CoordinateExtent;
-  onNodesChange?: OnNodesChange;
-  onEdgesChange?: OnEdgesChange;
-  elementsSelectable?: boolean;
-  connectionMode?: ConnectionMode;
-  snapToGrid?: boolean;
-  snapGrid?: SnapGrid;
-  translateExtent?: CoordinateExtent;
-  connectOnClick: boolean;
-  defaultEdgeOptions?: DefaultEdgeOptions;
-  fitView?: boolean;
-  fitViewOptions?: FitViewOptions;
-  onNodesDelete?: OnNodesDelete;
-  onEdgesDelete?: OnEdgesDelete;
-}
+type StoreUpdaterProps = Pick<
+  ReactFlowProps,
+  | 'nodes'
+  | 'edges'
+  | 'defaultNodes'
+  | 'defaultEdges'
+  | 'onConnect'
+  | 'onConnectStart'
+  | 'onConnectStop'
+  | 'onConnectEnd'
+  | 'onClickConnectStart'
+  | 'onClickConnectStop'
+  | 'onClickConnectEnd'
+  | 'nodesDraggable'
+  | 'nodesConnectable'
+  | 'minZoom'
+  | 'maxZoom'
+  | 'nodeExtent'
+  | 'onNodesChange'
+  | 'onEdgesChange'
+  | 'elementsSelectable'
+  | 'connectionMode'
+  | 'snapToGrid'
+  | 'snapGrid'
+  | 'translateExtent'
+  | 'connectOnClick'
+  | 'defaultEdgeOptions'
+  | 'fitView'
+  | 'fitViewOptions'
+  | '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);
--- a/packages/core/src/container/EdgeRenderer/index.tsx
+++ b/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}
--- a/packages/core/src/container/FlowRenderer/index.tsx
+++ b/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) => ({
-  resetSelectedElements: s.resetSelectedElements,
-  nodesSelectionActive: s.nodesSelectionActive,
-});
+const selector = (s: ReactFlowState) => 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
-          onSelectionDragStart={onSelectionDragStart}
-          onSelectionDrag={onSelectionDrag}
-          onSelectionDragStop={onSelectionDragStop}
-          onSelectionContextMenu={onSelectionContextMenu}
-          noPanClassName={noPanClassName}
-        />
+        <NodesSelection onSelectionContextMenu={onSelectionContextMenu} noPanClassName={noPanClassName} />
      )}
      <div
        className="react-flow__pane react-flow__container"
--- a/packages/core/src/container/GraphView/index.tsx
+++ b/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}
--- a/packages/core/src/container/NodeRenderer/index.tsx
+++ b/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 {
-  NodeDragHandler,
-  NodeMouseHandler,
-  NodeTypesWrapped,
-  Position,
-  ReactFlowState,
-  WrapNodeProps,
-} from '../../types';
+import { 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}
--- a/packages/core/src/container/ReactFlow/index.tsx
+++ b/packages/core/src/container/ReactFlow/index.tsx
@@ -162,9 +162,6 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
            onNodeMouseLeave={onNodeMouseLeave}
            onNodeContextMenu={onNodeContextMenu}
            onNodeDoubleClick={onNodeDoubleClick}
-            onNodeDragStart={onNodeDragStart}
-            onNodeDrag={onNodeDrag}
-            onNodeDragStop={onNodeDragStop}
            nodeTypes={nodeTypesWrapped}
            edgeTypes={edgeTypesWrapped}
            connectionLineType={connectionLineType}
@@ -190,9 +187,6 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
            onPaneClick={onPaneClick}
            onPaneScroll={onPaneScroll}
            onPaneContextMenu={onPaneContextMenu}
-            onSelectionDragStart={onSelectionDragStart}
-            onSelectionDrag={onSelectionDrag}
-            onSelectionDragStop={onSelectionDragStop}
            onSelectionContextMenu={onSelectionContextMenu}
            onEdgeUpdate={onEdgeUpdate}
            onEdgeContextMenu={onEdgeContextMenu}
@@ -240,6 +234,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}
--- a/packages/core/src/container/Viewport/index.tsx
+++ b/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
-      className="react-flow__viewport react-flow__container"
-      style={{ transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})` }}
-    >
+    <div className="react-flow__viewport react-flow__container" style={{ transform: transform }}>
      {children}
    </div>
  );
--- a/packages/core/src/container/ZoomPane/index.tsx
+++ b/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>) => {
-          if (viewChanged(prevTransform.current, event.transform)) {
-            const flowTransform = eventToFlowTransform(event.transform);
-            prevTransform.current = flowTransform;
+      d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+        isZoomingOrPanning.current = false;

-            onMoveEnd(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
-          }
-        });
-      } else {
-        d3Zoom.on('end', null);
-      }
+        if (onMoveEnd && viewChanged(prevTransform.current, event.transform)) {
+          const flowTransform = eventToFlowTransform(event.transform);
+          prevTransform.current = flowTransform;
+
+          onMoveEnd(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
+        }
+      });
    }
  }, [d3Zoom, onMoveEnd]);

--- a/packages/core/src/hooks/useDrag/index.ts
+++ b/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,
--- a/packages/core/src/hooks/useDrag/utils.ts
+++ b/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,
    };
  });

--- a/packages/core/src/hooks/useViewportHelper.ts
+++ b/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: () => {
-          const [, , zoom] = store.getState().transform;
-          return zoom;
-        },
+        getZoom: () => store.getState().transform[2],
        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: () => {
--- a/packages/core/src/hooks/useVisibleNodes.ts
+++ b/packages/core/src/hooks/useVisibleNodes.ts
@@ -8,11 +8,10 @@ import { ReactFlowState } from '../types';
 function useVisibleNodes(onlyRenderVisible: boolean) {
  const nodes = useStore(
    useCallback(
-      (s: ReactFlowState) => {
-        return onlyRenderVisible
+      (s: ReactFlowState) =>
+        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]
    )
  );
--- a/packages/core/src/store/index.ts
+++ b/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;
--- a/packages/core/src/types/component-props.ts
+++ b/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;
-  onSelectionDrag?: (event: ReactMouseEvent, nodes: Node[]) => void;
-  onSelectionDragStop?: (event: ReactMouseEvent, nodes: Node[]) => void;
+  onSelectionDragStart?: SelectionDragHandler;
+  onSelectionDrag?: SelectionDragHandler;
+  onSelectionDragStop?: SelectionDragHandler;
  onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void;
  onPaneScroll?: (event?: WheelEvent) => void;
  onPaneClick?: (event: ReactMouseEvent) => void;
--- a/packages/core/src/types/edges.ts
+++ b/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;
 };
--- a/packages/core/src/types/general.ts
+++ b/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;
--- a/packages/core/src/types/nodes.ts
+++ b/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;
--- a/packages/core/src/utils/changes.ts
+++ b/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;
      }