Merge branch 'next' into handle-connection-fixes

packages/system/src/types/nodes.ts

@@ -39,8 +39,10 @@ export type NodeBase<
   connectable?: boolean;
   deletable?: boolean;
   dragHandle?: string;
-  width?: number | null;
-  height?: number | null;
+  width?: number;
+  height?: number;
+  initialWidth?: number;
+  initialHeight?: number;
   /** Parent node id, used for creating sub-flows */
   parentNode?: string;
   zIndex?: number;

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

@@ -4,6 +4,7 @@ import { NodeBase, NodeHandle } from '../../types/nodes';
 import { Position } from '../../types/utils';
 import { errorMessages, internalsSymbol } from '../../constants';
 import { HandleElement } from '../../types';
+import { getNodeDimensions } from '../general';
 
 export type GetEdgePositionParams = {
   id: string;
@@ -16,7 +17,10 @@ export type GetEdgePositionParams = {
 };
 
 function isNodeInitialized(node: NodeBase): boolean {
-  return !!(node?.[internalsSymbol]?.handleBounds || node?.handles?.length) && !!(node?.computed?.width || node?.width);
+  return (
+    !!(node?.[internalsSymbol]?.handleBounds || node?.handles?.length) &&
+    !!(node?.computed?.width || node?.width || node?.initialWidth)
+  );
 }
 
 export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | null {
@@ -75,8 +79,8 @@ function toHandleBounds(handles?: NodeHandle[]) {
   const target = [];
 
   for (const handle of handles) {
-    handle.width = handle.width || 1;
-    handle.height = handle.height || 1;
+    handle.width = handle.width ?? 1;
+    handle.height = handle.height ?? 1;
 
     if (handle.type === 'source') {
       source.push(handle as HandleElement);
@@ -94,8 +98,7 @@ function toHandleBounds(handles?: NodeHandle[]) {
 function getHandlePosition(position: Position, node: NodeBase, handle: HandleElement | null = null): number[] {
   const x = (handle?.x ?? 0) + (node.computed?.positionAbsolute?.x ?? 0);
   const y = (handle?.y ?? 0) + (node.computed?.positionAbsolute?.y ?? 0);
-  const width = handle?.width || (node?.computed?.width ?? node?.width ?? 0);
-  const height = handle?.height || (node?.computed?.height ?? node?.height ?? 0);
+  const { width, height } = handle ?? getNodeDimensions(node);
 
   switch (position) {
     case Position.Top:

packages/system/src/utils/general.ts

@@ -202,3 +202,19 @@ export const isMacOs = () => typeof navigator !== 'undefined' && navigator?.user
 export function isCoordinateExtent(extent?: CoordinateExtent | 'parent'): extent is CoordinateExtent {
   return extent !== undefined && extent !== 'parent';
 }
+
+export function getNodeDimensions<NodeType extends NodeBase = NodeBase>(
+  node: NodeType
+): { width: number; height: number } {
+  return {
+    width: node.computed?.width ?? node.width ?? node.initialWidth ?? 0,
+    height: node.computed?.height ?? node.height ?? node.initialHeight ?? 0,
+  };
+}
+
+export function nodeHasDimensions<NodeType extends NodeBase = NodeBase>(node: NodeType): boolean {
+  return (
+    (node.computed?.width ?? node.width ?? node.initialWidth) !== undefined &&
+    (node.computed?.height ?? node.height ?? node.initialHeight) !== undefined
+  );
+}

packages/system/src/utils/graph.ts

@@ -9,6 +9,7 @@ import {
   pointToRendererPoint,
   getViewportForBounds,
   isCoordinateExtent,
+  getNodeDimensions,
 } from './general';
 import {
   type Transform,
@@ -116,8 +117,9 @@ export const getNodePositionWithOrigin = (
     };
   }
 
-  const offsetX = (node.computed?.width ?? node.width ?? 0) * nodeOrigin[0];
-  const offsetY = (node.computed?.height ?? node.height ?? 0) * nodeOrigin[1];
+  const { width, height } = getNodeDimensions(node);
+  const offsetX = width * nodeOrigin[0];
+  const offsetY = height * nodeOrigin[1];
 
   const position: XYPosition = {
     x: node.position.x - offsetX,
@@ -164,8 +166,7 @@ export const getNodesBounds = (
         currBox,
         rectToBox({
           ...nodePos[params.useRelativePosition ? 'position' : 'positionAbsolute'],
-          width: node.computed?.width ?? node.width ?? 0,
-          height: node.computed?.height ?? node.height ?? 0,
+          ...getNodeDimensions(node),
         })
       );
     },
@@ -192,8 +193,8 @@ export const getNodesInside = <NodeType extends NodeBase>(
 
   const visibleNodes = nodes.reduce<NodeType[]>((res, node) => {
     const { computed, selectable = true, hidden = false } = node;
-    const width = computed?.width ?? node.width ?? null;
-    const height = computed?.height ?? node.height ?? null;
+    const width = computed?.width ?? node.width ?? node.initialWidth ?? null;
+    const height = computed?.height ?? node.height ?? node.initialHeight ?? null;
 
     if ((excludeNonSelectableNodes && !selectable) || hidden) {
       return res;