simplified resize events

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

@@ -66,7 +66,7 @@ function ResizeControl({
 
           const changes: NodeChange[] = [];
 
-          if (change.isXPosChange || change.isYPosChange) {
+          if (change.x !== undefined && change.y !== undefined) {
             const positionChange: NodePositionChange = {
               id,
               type: 'position',
@@ -79,7 +79,7 @@ function ResizeControl({
             changes.push(positionChange);
           }
 
-          if (change.isWidthChange || change.isHeightChange) {
+          if (change.width !== undefined && change.height !== undefined) {
             const dimensionChange: NodeDimensionChange = {
               id,
               type: 'dimensions',

packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte

@@ -70,13 +70,18 @@
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
           const node = $nodeLookup.get(id)?.internals.userNode;
-          if (node) {
+          if (!node) {
-            node.height = change.isHeightChange ? change.height : node.height;
+            return;
-            node.width = change.isWidthChange ? change.width : node.width;
+          }
-            node.position =
+
-              change.isXPosChange || change.isYPosChange
+          if (change.x !== undefined && change.y !== undefined) {
-                ? { x: change.x, y: change.y }
+            node.position = { x: change.x, y: change.y };
-                : node.position;
+          }
+
+          if (change.width !== undefined && change.height !== undefined) {
+            node.width = change.width;
+            node.height = change.height;
+          }
 
           for (const childChange of childChanges) {
             const childNode = $nodeLookup.get(childChange.id)?.internals.userNode;
@@ -87,7 +92,6 @@
 
           $nodes = $nodes;
         }
-        }
       });
     }
     return () => {

packages/system/src/xyresizer/XYResizer.ts

@@ -15,19 +15,13 @@ const initStartValues = {
   aspectRatio: 1,
 };
 
-const initChange = {
+export type XYResizerChange = {
-  x: 0,
+  x?: number;
-  y: 0,
+  y?: number;
-  width: 0,
+  width?: number;
-  height: 0,
+  height?: number;
-  isXPosChange: false,
-  isYPosChange: false,
-  isWidthChange: false,
-  isHeightChange: false,
 };
 
-export type XYResizerChange = typeof initChange;
-
 export type XYResizerChildChange = {
   id: string;
   position: XYPosition;
@@ -117,7 +111,10 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
         const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems();
         node = nodeLookup.get(nodeId);
 
-        if (node) {
+        if (!node) {
+          return;
+        }
+
         const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
 
         prevValues = {
@@ -171,16 +168,17 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
         }
 
         onResizeStart?.(event, { ...prevValues });
-        }
       })
       .on('drag', (event: ResizeDragEvent) => {
         const { transform, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems();
         const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
         const childChanges: XYResizerChildChange[] = [];
 
-        if (node) {
+        if (!node) {
+          return;
+        }
         const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
-          const change = { ...initChange };
+        const change: XYResizerChange = {};
         const nodeOrigin = node.origin ?? storeNodeOrigin;
 
         const { width, height, x, y } = getDimensionsAfterResize(
@@ -200,23 +198,27 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
         const isXPosChange = x !== prevX && isWidthChange;
         const isYPosChange = y !== prevY && isHeightChange;
 
+        if (!isXPosChange && !isYPosChange && !isWidthChange && !isHeightChange) {
+          return;
+        }
+
+        console.log(isXPosChange, x, isYPosChange, y);
+
         if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) {
-            change.isXPosChange = isXPosChange;
+          change.x = isXPosChange ? x : prevValues.x;
-            change.isYPosChange = isYPosChange;
+          change.y = isYPosChange ? y : prevValues.y;
-            change.x = isXPosChange ? x : prevX;
-            change.y = isYPosChange ? y : prevY;
 
           prevValues.x = change.x;
           prevValues.y = change.y;
 
           // Fix expandParent when resizing from top/left
           if (parentNode && node.expandParent) {
-              if (change.x < 0) {
+            if (change.x && change.x < 0) {
               prevValues.x = 0;
               startValues.x = startValues.x - change.x;
             }
 
-              if (change.y < 0) {
+            if (change.y && change.y < 0) {
               prevValues.y = 0;
               startValues.y = startValues.y - change.y;
             }
@@ -237,17 +239,13 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
         }
 
         if (isWidthChange || isHeightChange) {
-            change.isWidthChange = isWidthChange;
+          change.width = isWidthChange ? width : prevValues.width;
-            change.isHeightChange = isHeightChange;
+          change.height = isHeightChange ? height : prevValues.height;
-            change.width = width;
-            change.height = height;
           prevValues.width = change.width;
           prevValues.height = change.height;
         }
 
-          if (!change.isXPosChange && !change.isYPosChange && !isWidthChange && !isHeightChange) {
+        console.log(change);
-            return;
-          }
 
         const direction = getResizeDirection({
           width: prevValues.width,
@@ -268,7 +266,6 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
 
         onResize?.(event, nextValues);
         onChange(change, childChanges);
-        }
       })
       .on('end', (event: ResizeDragEvent) => {
         onResizeEnd?.(event, { ...prevValues });