From 7e8bcd8825ad985be9f478b2bc9fe4eec478b880 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 22 Apr 2024 14:51:23 +0200
Subject: [PATCH] refactor(react): add setAttributes for dimension changes

---
 packages/react/CHANGELOG.md                               | 8 ++++++--
 .../NodeResizer/NodeResizeControl.tsx                     | 1 +
 packages/react/src/utils/changes.ts                       | 2 +-
 packages/system/src/types/changes.ts                      | 3 +++
 packages/system/src/utils/store.ts                        | 2 +-
 5 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 232dccb4..a658fddc 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,12 +1,16 @@
 # @xyflow/react
 
-## 12.0.0-next.xx
+## 12.0.0-next.15
 
 ## Patch changes
 
+- re-observe nodes when using `onlyRenderVisibleElements={true}`
 - use correct positions for intersection helpers
 - fix minimap interaction for touch devices
-- pass user nodes to `onSelectionChange` instead of internal ones
+- pass user nodes to `onSelectionChange` instead of internal ones to work with Redux
+- call `onEnd` in XYResizer thanks @tonyf
+- cleanup `getPositionWithOrigin` usage
+- use `setAttributes` flag for dimension change when `width`/`height` should be set
 
 ## 12.0.0-next.14
 
diff --git a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx
index 8e6ca2f1..79746f84 100644
--- a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx
+++ b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx
@@ -113,6 +113,7 @@ function ResizeControl({
               id,
               type: 'dimensions',
               resizing: true,
+              setAttributes: true,
               dimensions: {
                 width: change.width,
                 height: change.height,
diff --git a/packages/react/src/utils/changes.ts b/packages/react/src/utils/changes.ts
index 69b220f6..294af3e1 100644
--- a/packages/react/src/utils/changes.ts
+++ b/packages/react/src/utils/changes.ts
@@ -100,7 +100,7 @@ function applyChange(change: any, element: any): any {
         element.measured.width = change.dimensions.width;
         element.measured.height = change.dimensions.height;
 
-        if (change.resizing) {
+        if (change.setAttributes) {
           element.width = change.dimensions.width;
           element.height = change.dimensions.height;
         }
diff --git a/packages/system/src/types/changes.ts b/packages/system/src/types/changes.ts
index d2da81cf..5db0b6de 100644
--- a/packages/system/src/types/changes.ts
+++ b/packages/system/src/types/changes.ts
@@ -4,7 +4,10 @@ export type NodeDimensionChange = {
   id: string;
   type: 'dimensions';
   dimensions?: Dimensions;
+  /* if this is true, the node is currently being resized via the NodeResizer */
   resizing?: boolean;
+  /* if this is true, we will set width and height of the node and not just the measured dimensions */
+  setAttributes?: boolean;
 };
 
 export type NodePositionChange = {
diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts
index 385b44ef..e3e378eb 100644
--- a/packages/system/src/utils/store.ts
+++ b/packages/system/src/utils/store.ts
@@ -217,7 +217,7 @@ export function handleExpandParent(
         changes.push({
           id: parentId,
           type: 'dimensions',
-          resizing: true,
+          setAttributes: true,
           dimensions: {
             width: Math.max(dimensions.width, Math.round(expandedRect.width)),
             height: Math.max(dimensions.height, Math.round(expandedRect.height)),