Merge pull request #3647 from xyflow/svelte/refactor-position

refactor(svelte): node wrapper position types

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

@@ -27,8 +27,10 @@
   export let style: NodeWrapperProps['style'] = undefined;
   export let type: NodeWrapperProps['type'] = 'default';
   export let isParent: NodeWrapperProps['isParent'] = false;
-  export let positionAbsolute: NodeWrapperProps['positionAbsolute'] = undefined;
-  export let positionOrigin: NodeWrapperProps['positionOrigin'] = undefined;
+  export let positionX: NodeWrapperProps['positionX'];
+  export let positionY: NodeWrapperProps['positionY'];
+  export let positionOriginX: NodeWrapperProps['positionOriginX'];
+  export let positionOriginY: NodeWrapperProps['positionOriginY'];
   export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined;
   export let targetPosition: NodeWrapperProps['targetPosition'] = undefined;
   export let zIndex: NodeWrapperProps['zIndex'];
@@ -164,7 +166,7 @@
     class:nopan={draggable}
     class:parent={isParent}
     style:z-index={zIndex}
-    style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
+    style:transform="translate({positionOriginX}px, {positionOriginY}px)"
     style:visibility={initialized ? 'visible' : 'hidden'}
     style="{style} {node.size?.width ? `;width=${node.size?.width}px` : ''} {node.size?.height
       ? `;height=${node.size?.height}px;`
@@ -187,8 +189,8 @@
       {dragging}
       {dragHandle}
       isConnectable={connectable}
-      xPos={positionAbsolute?.x ?? 0}
-      yPos={positionAbsolute?.y ?? 0}
+      xPos={positionX}
+      yPos={positionY}
       on:connectstart
       on:connect
       on:connectend

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

@@ -1,4 +1,3 @@
-import type { XYPosition } from '@xyflow/system';
 import type { Node } from '$lib/types';
 
 export type NodeWrapperProps = Pick<
@@ -9,7 +8,6 @@ export type NodeWrapperProps = Pick<
   | 'data'
   | 'draggable'
   | 'dragging'
-  | 'positionAbsolute'
   | 'selected'
   | 'selectable'
   | 'style'
@@ -21,7 +19,10 @@ export type NodeWrapperProps = Pick<
   | 'dragHandle'
   | 'hidden'
 > & {
-  positionOrigin?: XYPosition;
+  positionX: number;
+  positionY: number;
+  positionOriginX: number;
+  positionOriginY: number;
   'on:nodeclick'?: (event: MouseEvent) => void;
   resizeObserver?: ResizeObserver | null;
   isParent?: boolean;

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -61,8 +61,10 @@
         node.connectable ||
         ($nodesConnectable && typeof node.connectable === 'undefined')
       )}
-      positionAbsolute={node.positionAbsolute}
-      positionOrigin={posOrigin}
+      positionX={node.positionAbsolute?.x ?? 0}
+      positionY={node.positionAbsolute?.y ?? 0}
+      positionOriginX={posOrigin.x ?? 0}
+      positionOriginY={posOrigin.y ?? 0}
       isParent={!!node[internalsSymbol]?.isParent}
       style={node.style}
       class={node.class}