refactor(react): use node.width/height for resizer changes

packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx

@@ -74,7 +74,6 @@ function ResizeControl({
             const dimensionChange: NodeDimensionChange = {
               id,
               type: 'dimensions',
-              updateStyle: true,
               resizing: true,
               dimensions: {
                 width: change.width,

packages/react/src/components/NodeWrapper/index.tsx

@@ -219,9 +219,9 @@ export function NodeWrapper({
         transform: `translate(${positionAbsoluteOrigin.x}px,${positionAbsoluteOrigin.y}px)`,
         pointerEvents: hasPointerEvents ? 'all' : 'none',
         visibility: initialized ? 'visible' : 'hidden',
-        width,
-        height,
         ...node.style,
+        width: width ?? node.style?.width,
+        height: height ?? node.style?.height,
       }}
       data-id={id}
       data-testid={`rf__node-${id}`}

packages/react/src/types/changes.ts

@@ -7,7 +7,6 @@ export type NodeDimensionChange = {
   id: string;
   type: 'dimensions';
   dimensions?: Dimensions;
-  updateStyle?: boolean;
   resizing?: boolean;
 };
 

packages/react/src/utils/changes.ts

@@ -121,10 +121,12 @@ function applyChanges(changes: any[], elements: any[]): any[] {
               }
               updateItem.computed.width = currentChange.dimensions.width;
               updateItem.computed.height = currentChange.dimensions.height;
-            }
 
-            if (typeof currentChange.updateStyle !== 'undefined') {
+              // this is needed for the node resizer to work
-              updateItem.style = { ...(updateItem.style || {}), ...currentChange.dimensions };
+              if (currentChange.resizing) {
+                updateItem.width = currentChange.dimensions.width;
+                updateItem.height = currentChange.dimensions.height;
+              }
             }
 
             if (typeof currentChange.resizing === 'boolean') {