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

packages/react/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @xyflow/react
 
+## 12.9.3
+
+### Patch Changes
+
+- [#5621](https://github.com/xyflow/xyflow/pull/5621) [`c1304dba7`](https://github.com/xyflow/xyflow/commit/c1304dba7a20bb8d74c7aceb23cd80b56e4c0482) Thanks [@moklick](https://github.com/moklick)! - Set `paneClickDistance` default value to `1`.
+
+- [#5578](https://github.com/xyflow/xyflow/pull/5578) [`00bcb9f5f`](https://github.com/xyflow/xyflow/commit/00bcb9f5f45f49814b9ac19b3f55cfe069ee3773) Thanks [@peterkogo](https://github.com/peterkogo)! - Pass current pointer position to connection
+
+- Updated dependencies [[`00bcb9f5f`](https://github.com/xyflow/xyflow/commit/00bcb9f5f45f49814b9ac19b3f55cfe069ee3773)]:
+  - @xyflow/system@0.0.73
+
 ## 12.9.2
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/react",
-  "version": "12.9.2",
+  "version": "12.9.3",
   "description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
   "keywords": [
     "react",

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') {