Merge branch 'feat/zindexmode' of github.com:xyflow/xyflow into feat/zindexmode

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

@@ -1,4 +1,5 @@
 import { memo, type ReactNode } from 'react';
+import { shallow } from 'zustand/shallow';
 
 import { useStore } from '../../hooks/useStore';
 import { useGlobalKeyHandler } from '../../hooks/useGlobalKeyHandler';
@@ -72,7 +73,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
   onViewportChange,
   isControlledViewport,
 }: FlowRendererProps<NodeType>) {
-  const { nodesSelectionActive, userSelectionActive } = useStore(selector);
+  const { nodesSelectionActive, userSelectionActive } = useStore(selector, shallow);
   const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win });
   const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win });
 

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

@@ -104,7 +104,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     onPaneMouseLeave,
     onPaneScroll,
     onPaneContextMenu,
-    paneClickDistance = 0,
+    paneClickDistance = 1,
     nodeClickDistance = 0,
     children,
     onReconnect,

packages/react/src/store/index.ts

@@ -14,7 +14,9 @@ import {
   NodeOrigin,
   CoordinateExtent,
   fitViewport,
-  ZIndexMode,
+  getHandlePosition,
+  Position,
+  ZIndexMode
 } from '@xyflow/system';
 
 import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
@@ -191,7 +193,7 @@ const createStore = ({
       updateNodePositions: (nodeDragItems, dragging = false) => {
         const parentExpandChildren: ParentExpandChild[] = [];
         const changes = [];
-        const { nodeLookup, triggerNodeChanges } = get();
+        const { nodeLookup, triggerNodeChanges, connection, updateConnection } = get();
 
         for (const [id, dragItem] of nodeDragItems) {
           // we are using the nodelookup to be sure to use the current expandParent and parentId value
@@ -210,6 +212,11 @@ const createStore = ({
             dragging,
           };
 
+          if (node && connection.inProgress && connection.fromNode.id === node.id) {
+            const updatedFrom = getHandlePosition(node, connection.fromHandle, Position.Left, true);
+            updateConnection({ ...connection, from: updatedFrom });
+          }
+
           if (expandParent && node.parentId) {
             parentExpandChildren.push({
               id,

packages/react/src/utils/changes.ts

@@ -125,9 +125,9 @@ function applyChange(change: any, element: any): any {
 
     case 'dimensions': {
       if (typeof change.dimensions !== 'undefined') {
-        element.measured ??= {};
-        element.measured.width = change.dimensions.width;
-        element.measured.height = change.dimensions.height;
+        element.measured = {
+          ...change.dimensions,
+        };
 
         if (change.setAttributes) {
           if (change.setAttributes === true || change.setAttributes === 'width') {