refactor(libs) add width, height and positionAbsolute props to NodeProps

examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx

@@ -7,7 +7,7 @@ const sourceHandleStyleB: CSSProperties = {
   left: 'auto',
 };
 
-const CustomNode: FC<NodeProps> = ({ data, xPos, yPos }) => {
+const CustomNode: FC<NodeProps> = ({ data, positionAbsolute }) => {
   return (
     <>
       <Handle type="target" position={Position.Top} />
@@ -18,7 +18,7 @@ const CustomNode: FC<NodeProps> = ({ data, xPos, yPos }) => {
         <div>
           Position:{' '}
           <strong>
-            {xPos.toFixed(2)},{yPos.toFixed(2)}
+            {positionAbsolute.x.toFixed(2)},{positionAbsolute.y.toFixed(2)}
           </strong>
         </div>
       </div>

examples/react/src/examples/Subflow/DebugNode.tsx

@@ -11,13 +11,13 @@ const idStyle: CSSProperties = {
   left: 2,
 };
 
-const DebugNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
+const DebugNode: FC<NodeProps> = ({ zIndex, positionAbsolute, id }) => {
   return (
     <>
       <Handle type="target" position={Position.Top} />
       <div style={idStyle}>{id}</div>
       <div style={infoStyle}>
-        x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
+        x:{Math.round(positionAbsolute.x)} y:{Math.round(positionAbsolute.y)} z:{zIndex}
       </div>
       <Handle type="source" position={Position.Bottom} />
     </>

examples/svelte/src/routes/examples/overview/CustomNode.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
-	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps, type XYPosition } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
 	export let data: { label: string } = { label: 'Node' };
-	export let xPos: number = 0;
+	export let positionAbsolute: XYPosition = { x: 0, y: 0 };
-	export let yPos: number = 0;
 </script>
 
 <div class="custom">
 	<div>{data.label}</div>
-	<div>{~~xPos}, {~~yPos}</div>
+	<div>{~~positionAbsolute.x}, {~~positionAbsolute.y}</div>
 
 	<Handle type="target" position={Position.Top} />
 

examples/svelte/src/routes/examples/subflows/DebugNode.svelte

@@ -1,24 +1,16 @@
 <script lang="ts">
-	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps, type XYPosition } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
 	export let id: string;
-	export let xPos: number = 0;
+	export let positionAbsolute: XYPosition = { x: 0, y: 0 };
-	export let yPos: number = 0;
 	export let zIndex: number = 0;
 </script>
 
 <Handle type="target" position={Position.Top} />
 <div>{id}</div>
 <div>
-	x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
+	x:{Math.round(positionAbsolute.x)} y:{Math.round(positionAbsolute.y)} z:{zIndex}
 </div>
 <Handle type="source" position={Position.Bottom} />
-
-<style>
-	.custom {
-		background: #ffcc00;
-		padding: 10px;
-	}
-</style>

packages/react/src/components/Nodes/wrapNode.tsx

@@ -52,6 +52,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     disableKeyboardA11y,
     ariaLabel,
     rfId,
+    positionAbsolute,
     width,
     height,
   }: WrapNodeProps) => {
@@ -209,8 +210,9 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
             id={id}
             data={data}
             type={type}
-            xPos={xPos}
+            width={width}
-            yPos={yPos}
+            height={height}
+            positionAbsolute={positionAbsolute}
             selected={selected}
             isConnectable={isConnectable}
             sourcePosition={sourcePosition}

packages/react/src/container/NodeRenderer/index.tsx

@@ -122,6 +122,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
             yPos={posY}
             xPosOrigin={posOrigin.x}
             yPosOrigin={posOrigin.y}
+            positionAbsolute={clampedPosition || { x: 0, y: 0 }}
             onClick={props.onNodeClick}
             onMouseEnter={props.onNodeMouseEnter}
             onMouseMove={props.onNodeMouseMove}

packages/react/src/types/nodes.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-import type { NodeBase } from '@xyflow/system';
+import type { NodeBase, XYPosition } from '@xyflow/system';
 
 export type Node<NodeData = any, NodeType extends string | undefined = string | undefined> = NodeBase<
   NodeData,
@@ -24,6 +24,7 @@ export type WrapNodeProps<NodeData = any> = Pick<
     yPos: number;
     xPosOrigin: number;
     yPosOrigin: number;
+    positionAbsolute: XYPosition;
     initialized: boolean;
     isSelectable: boolean;
     isDraggable: boolean;

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

@@ -191,8 +191,9 @@
       {dragging}
       {dragHandle}
       isConnectable={connectable}
-      xPos={positionX}
+      positionAbsolute={{ x: positionX, y: positionY }}
-      yPos={positionY}
+      {width}
+      {height}
       on:connectstart
       on:connect
       on:connectend

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

@@ -11,14 +11,14 @@ export type NodeWrapperProps = Pick<
   | 'selected'
   | 'selectable'
   | 'style'
-  | 'width'
-  | 'height'
   | 'type'
   | 'sourcePosition'
   | 'targetPosition'
   | 'dragHandle'
   | 'hidden'
 > & {
+  width?: number;
+  height?: number;
   type: string;
   positionX: number;
   positionY: number;

packages/svelte/src/lib/components/nodes/DefaultNode.svelte

@@ -11,24 +11,29 @@
 
   // unused props - we need to list them here in order to prevent warnings
   export let id: $$Props['id'] = '';
+  export let width: $$Props['width'] = undefined;
+  export let height: $$Props['height'] = undefined;
   export let selected: $$Props['selected'] = undefined;
   export let type: $$Props['type'] = undefined;
   export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let xPos: $$Props['xPos'] = 0;
+  export let positionAbsolute: $$Props['positionAbsolute'] = {
-  export let yPos: $$Props['yPos'] = 0;
+    x: 0,
+    y: 0
+  };
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
   id;
+  width;
+  height;
   selected;
   type;
   zIndex;
   dragging;
   dragHandle;
-  xPos;
+  positionAbsolute;
-  yPos;
   isConnectable;
 </script>
 

packages/svelte/src/lib/components/nodes/GroupNode.svelte

@@ -5,6 +5,8 @@
 
   // unused props - we need to list them here in order to prevent warnings
   export let id: $$Props['id'] = '';
+  export let width: $$Props['width'] = undefined;
+  export let height: $$Props['height'] = undefined;
   export let data: $$Props['data'] = {};
   export let selected: $$Props['selected'] = undefined;
   export let sourcePosition: $$Props['sourcePosition'] = undefined;
@@ -13,12 +15,16 @@
   export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let xPos: $$Props['xPos'] = 0;
+  export let positionAbsolute: $$Props['positionAbsolute'] = {
-  export let yPos: $$Props['yPos'] = 0;
+    x: 0,
+    y: 0
+  };
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
   id;
+  width;
+  height;
   data;
   selected;
   sourcePosition;
@@ -27,7 +33,6 @@
   zIndex;
   dragging;
   dragHandle;
-  xPos;
+  positionAbsolute;
-  yPos;
   isConnectable;
 </script>

packages/svelte/src/lib/components/nodes/InputNode.svelte

@@ -10,26 +10,31 @@
 
   // unused props - we need to list them here in order to prevent warnings
   export let id: $$Props['id'] = '';
+  export let width: $$Props['width'] = undefined;
+  export let height: $$Props['height'] = undefined;
   export let selected: $$Props['selected'] = undefined;
   export let targetPosition: $$Props['targetPosition'] = undefined;
   export let type: $$Props['type'] = undefined;
   export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let xPos: $$Props['xPos'] = 0;
+  export let positionAbsolute: $$Props['positionAbsolute'] = {
-  export let yPos: $$Props['yPos'] = 0;
+    x: 0,
+    y: 0
+  };
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
   id;
+  width;
+  height;
   selected;
   targetPosition;
   type;
   zIndex;
   dragging;
   dragHandle;
-  xPos;
+  positionAbsolute;
-  yPos;
   isConnectable;
 </script>
 

packages/svelte/src/lib/components/nodes/OutputNode.svelte

@@ -10,26 +10,28 @@
 
   // unused props - we need to list them here in order to prevent warnings
   export let id: $$Props['id'] = '';
+  export let width: $$Props['width'] = undefined;
+  export let height: $$Props['height'] = undefined;
   export let selected: $$Props['selected'] = undefined;
   export let sourcePosition: $$Props['sourcePosition'] = undefined;
   export let type: $$Props['type'] = undefined;
   export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let xPos: $$Props['xPos'] = 0;
+  export let positionAbsolute: $$Props['positionAbsolute'] = { x: 0, y: 0 };
-  export let yPos: $$Props['yPos'] = 0;
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
   id;
+  width;
+  height;
   selected;
   sourcePosition;
   type;
   zIndex;
   dragging;
   dragHandle;
-  xPos;
+  positionAbsolute;
-  yPos;
   isConnectable;
 </script>
 

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

@@ -68,14 +68,14 @@
       isParent={!!node[internalsSymbol]?.isParent}
       style={node.style}
       class={node.class}
-      type={node.type || 'default'}
+      type={node.type ?? 'default'}
       sourcePosition={node.sourcePosition}
       targetPosition={node.targetPosition}
       dragging={node.dragging}
       zIndex={node[internalsSymbol]?.z ?? 0}
       dragHandle={node.dragHandle}
-      width={node.width}
+      width={node.width ?? undefined}
-      height={node.height}
+      height={node.height ?? undefined}
       initialized={(!!node.computed?.width && !!node.computed?.height) ||
         (!!node.width && !!node.height)}
       {resizeObserver}

packages/system/src/types/nodes.ts

@@ -52,8 +52,9 @@ export type NodeProps<T = any> = {
   selected: NodeBase['selected'];
   isConnectable: NodeBase['connectable'];
   zIndex: NodeBase['zIndex'];
-  xPos: number;
+  positionAbsolute: XYPosition;
-  yPos: number;
+  width?: number;
+  height?: number;
   dragging: boolean;
   targetPosition?: Position;
   sourcePosition?: Position;

packages/system/src/utils/graph.ts

@@ -254,8 +254,8 @@ export function calcNextPosition<NodeType extends NodeBase>(
           ? [
               [parentPos.x + nodeWidth * currNodeOrigin[0], parentPos.y + nodeHeight * currNodeOrigin[1]],
               [
-                parentPos.x + parentNode.computed.width - nodeWidth + nodeWidth * currNodeOrigin[0],
+                parentPos.x + (parentNode.computed?.width ?? 0) - nodeWidth + nodeWidth * currNodeOrigin[0],
-                parentPos.y + parentNode.computed.height - nodeHeight + nodeHeight * currNodeOrigin[1],
+                parentPos.y + (parentNode.computed?.height ?? 0) - nodeHeight + nodeHeight * currNodeOrigin[1],
               ],
             ]
           : currentExtent;