fixed node resizer & inlineWidth and inlineHeight

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -184,7 +184,7 @@
     style:z-index={zIndex}
     style:transform="translate({positionOriginX}px, {positionOriginY}px)"
     style:visibility={initialized ? 'visible' : 'hidden'}
-    style="{inlineStyleDimensions.width} {inlineStyleDimensions.height} {style ?? ''};"
+    style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
     on:click={onSelectNodeHandler}
     on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
     on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })}

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

@@ -35,7 +35,7 @@
   let className: $$Props['class'] = '';
   export { className as class };
 
-  const { nodeLookup, snapGrid, viewport, nodes } = useStore();
+  const { nodeLookup, snapGrid, viewport, nodes, nodeOrigin } = useStore();
 
   const contextNodeId = getContext<string>('svelteflow__node_id');
   $: id = typeof nodeId === 'string' ? nodeId : contextNodeId;
@@ -64,7 +64,8 @@
             nodeLookup: $nodeLookup,
             transform: [$viewport.x, $viewport.y, $viewport.zoom],
             snapGrid: $snapGrid ?? undefined,
-            snapToGrid: !!$snapGrid
+            snapToGrid: !!$snapGrid,
+            nodeOrigin: $nodeOrigin
           };
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {

packages/system/src/xyresizer/utils.ts

@@ -94,7 +94,7 @@ function xor(a: boolean, b: boolean) {
 
 /**
  * Calculates new width & height and x & y of node after resize based on pointer position
- * @description - Buckle up, this is a chunky one! If you want to determine the new dimensions of a node after a resize,
+ * @description - Buckle up, this is a chunky one... If you want to determine the new dimensions of a node after a resize,
  * you have to account for all possible restrictions: min/max width/height of the node, the maximum extent the node is allowed
  * to move in (in this case: resize into) determined by the parent node, the minimal extent determined by child nodes
  * with expandParent or extent: 'parent' set and oh yeah, these things also have to work with keepAspectRatio!
@@ -102,6 +102,8 @@ function xor(a: boolean, b: boolean) {
  * strongest restriction. Because the resize affects x, y and width, height and width, height of a opposing side with keepAspectRatio,
  * the resize amount is always kept in distX & distY amount (the distance in mouse movement)
  * Instead of clamping each value, we first calculate the biggest 'clamp' (for the lack of a better name) and then apply it to all values.
+ * To complicate things nodeOrigin has to be taken into account as well. This is done by offsetting the nodes depending on their origin,
+ * calculating the restrictions, normally and then
  * @param startValues - starting values of resize
  * @param controlDirection - dimensions affected by the resize
  * @param pointerPosition - the current pointer position corrected for snapping
@@ -266,15 +268,12 @@ export function getDimensionsAfterResize(
     }
   }
 
-  const width = startWidth + (affectsX ? -distX : distX);
-  const height = startHeight + (affectsY ? -distY : distY);
-
   const x = affectsX ? startX + distX : startX;
   const y = affectsY ? startY + distY : startY;
 
   return {
-    width: width,
+    width: startWidth + (affectsX ? -distX : distX),
-    height: height,
+    height: startHeight + (affectsY ? -distY : distY),
     x: nodeOrigin[0] * distX * (!affectsX ? 1 : -1) + x,
     y: nodeOrigin[1] * distY * (!affectsY ? 1 : -1) + y,
   };