chore(react/svelte): rename node.dimensions to node.size

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

@@ -16,7 +16,7 @@ import CustomNode from './CustomNode';
 
 import '@xyflow/react/dist/style.css';
 
-const nodeDimensions = {
+const nodeSize = {
   width: 100,
   height: 40,
 };
@@ -29,13 +29,13 @@ const initialNodes: Node[] = [
     type: 'input',
     data: { label: 'Node 1' },
     position: { x: 250, y: 5 },
-    dimensions: nodeDimensions,
+    size: nodeSize,
     handles: [
       {
         type: 'source',
         position: Position.Bottom,
-        x: nodeDimensions.width * 0.5,
+        x: nodeSize.width * 0.5,
-        y: nodeDimensions.height,
+        y: nodeSize.height,
         width: 1,
         height: 1,
       },
@@ -45,20 +45,20 @@ const initialNodes: Node[] = [
     id: '2',
     data: { label: 'Node 2' },
     position: { x: 100, y: 100 },
-    dimensions: nodeDimensions,
+    size: nodeSize,
     handles: [
       {
         type: 'source',
         position: Position.Bottom,
-        x: nodeDimensions.width * 0.5,
+        x: nodeSize.width * 0.5,
-        y: nodeDimensions.height,
+        y: nodeSize.height,
         width: 1,
         height: 1,
       },
       {
         type: 'target',
         position: Position.Top,
-        x: nodeDimensions.width * 0.5,
+        x: nodeSize.width * 0.5,
         y: 0,
         width: 1,
         height: 1,
@@ -69,20 +69,20 @@ const initialNodes: Node[] = [
     id: '3',
     data: { label: 'Node 3' },
     position: { x: 400, y: 100 },
-    dimensions: nodeDimensions,
+    size: nodeSize,
     handles: [
       {
         type: 'source',
         position: Position.Bottom,
-        x: nodeDimensions.width * 0.5,
+        x: nodeSize.width * 0.5,
-        y: nodeDimensions.height,
+        y: nodeSize.height,
         width: 1,
         height: 1,
       },
       {
         type: 'target',
         position: Position.Top,
-        x: nodeDimensions.width * 0.5,
+        x: nodeSize.width * 0.5,
         y: 0,
         width: 1,
         height: 1,

examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte

@@ -7,7 +7,7 @@
   const nodeDefaults = {
     sourcePosition: Position.Right,
     targetPosition: Position.Left,
-    dimensions: {
+    size: {
       width: 100,
       height: 40,
     },

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

@@ -52,8 +52,8 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     disableKeyboardA11y,
     ariaLabel,
     rfId,
-    dimensionWidth,
+    sizeWidth,
-    dimensionHeight,
+    sizeHeight,
   }: WrapNodeProps) => {
     const store = useStoreApi();
     const nodeRef = useRef<HTMLDivElement>(null);
@@ -184,8 +184,8 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
           transform: `translate(${xPosOrigin}px,${yPosOrigin}px)`,
           pointerEvents: hasPointerEvents ? 'all' : 'none',
           visibility: initialized ? 'visible' : 'hidden',
-          width: dimensionWidth,
+          width: sizeWidth,
-          height: dimensionHeight,
+          height: sizeHeight,
           ...style,
         }}
         data-id={id}

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

@@ -98,7 +98,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
           height: node.height ?? 0,
           origin: node.origin || props.nodeOrigin,
         });
-        const initialized = (!!node.width && !!node.height) || (!!node.dimensions?.width && !!node.dimensions?.height);
+        const initialized = (!!node.width && !!node.height) || (!!node.size?.width && !!node.size?.height);
 
         return (
           <NodeComponent
@@ -106,8 +106,8 @@ const NodeRenderer = (props: NodeRendererProps) => {
             id={node.id}
             className={node.className}
             style={node.style}
-            dimensionWidth={node.dimensions?.width}
+            sizeWidth={node.size?.width}
-            dimensionHeight={node.dimensions?.height}
+            sizeHeight={node.size?.height}
             type={nodeType}
             data={node.data}
             sourcePosition={node.sourcePosition || Position.Bottom}

packages/react/src/types/nodes.ts

@@ -40,6 +40,6 @@ export type WrapNodeProps<NodeData = any> = Pick<
     noPanClassName: string;
     rfId: string;
     disableKeyboardA11y: boolean;
-    dimensionWidth?: number;
+    sizeWidth?: number;
-    dimensionHeight?: number;
+    sizeHeight?: number;
   };

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

@@ -118,8 +118,8 @@
     class:parent={isParent}
     style:z-index={zIndex}
     style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
-    style:width={node.dimensions?.width && `${node.dimensions?.width}px`}
+    style:width={node.size?.width && `${node.size?.width}px`}
-    style:height={node.dimensions?.height && `${node.dimensions?.height}px`}
+    style:height={node.size?.height && `${node.size?.height}px`}
     {style}
     on:click={onSelectNodeHandler}
     on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}

packages/system/src/types/nodes.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { internalsSymbol } from '../constants';
-import type { XYPosition, Position, CoordinateExtent, HandleElement, Dimensions } from '.';
+import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.';
 
 // this is stuff that all nodes share independent of the framework
 export type NodeBase<T = any, U extends string | undefined = string | undefined> = {
@@ -29,7 +29,10 @@ export type NodeBase<T = any, U extends string | undefined = string | undefined>
   focusable?: boolean;
   origin?: NodeOrigin;
   handles?: HandleElement[];
-  dimensions?: Dimensions;
+  size?: {
+    width?: number;
+    height?: number;
+  };
 
   // only used internally
   [internalsSymbol]?: {

packages/system/src/utils/edges/positions.ts

@@ -85,8 +85,8 @@ function toHandleBounds(handles?: HandleElement[]) {
 
 function getHandleDataByNode(node?: NodeBase): [Rect, NodeHandleBounds | null, boolean] {
   const handleBounds = node?.[internalsSymbol]?.handleBounds || toHandleBounds(node?.handles) || null;
-  const nodeWidth = node?.width || node?.dimensions?.width;
+  const nodeWidth = node?.width || node?.size?.width;
-  const nodeHeight = node?.height || node?.dimensions?.height;
+  const nodeHeight = node?.height || node?.size?.height;
 
   const isValid =
     handleBounds &&