refactor(react): add setAttributes for dimension changes

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
 

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,

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;
         }

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 = {

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)),