feat(system): add handles and dimensions for ssr

packages/system/src/types/handles.ts

@@ -1,12 +1,16 @@
-import type { XYPosition, Position, Dimensions, OnConnect, IsValidConnection } from '.';
+import type { Position, OnConnect, IsValidConnection } from '.';
 
 export type HandleType = 'source' | 'target';
 
-export type HandleElement = XYPosition &
+export type HandleElement = {
-  Dimensions & {
+  id?: string | null;
-    id?: string | null;
+  x: number;
-    position: Position;
+  y: number;
-  };
+  width: number;
+  height: number;
+  position: Position;
+  type?: HandleType;
+};
 
 export type ConnectingHandle = {
   nodeId: string;

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 } from '.';
+import type { XYPosition, Position, CoordinateExtent, HandleElement, Dimensions } from '.';
 
 // this is stuff that all nodes share independent of the framework
 export type NodeBase<T = any, U extends string | undefined = string | undefined> = {
@@ -28,6 +28,8 @@ export type NodeBase<T = any, U extends string | undefined = string | undefined>
   ariaLabel?: string;
   focusable?: boolean;
   origin?: NodeOrigin;
+  handles?: HandleElement[];
+  dimensions?: Dimensions;
 
   // only used internally
   [internalsSymbol]?: {

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

@@ -16,10 +16,10 @@ export type GetEdgePositionParams = {
 };
 
 export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | null {
-  const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getHandleDataByNode(params.sourceNode);
+  const [sourceNodeRect, sourceHandleBounds, isSourceValid] = getHandleDataByNode(params.sourceNode);
-  const [targetNodeRect, targetHandleBounds, targetIsValid] = getHandleDataByNode(params.targetNode);
+  const [targetNodeRect, targetHandleBounds, isTargetValid] = getHandleDataByNode(params.targetNode);
 
-  if (!sourceIsValid || !targetIsValid) {
+  if (!isSourceValid || !isTargetValid) {
     return null;
   }
 
@@ -59,13 +59,39 @@ export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | n
   };
 }
 
+function toHandleBounds(handles?: HandleElement[]) {
+  if (!handles) {
+    return null;
+  }
+
+  return handles.reduce<NodeHandleBounds>(
+    (res, item) => {
+      if (item.type === 'source') {
+        res.source?.push(item);
+      }
+
+      if (item.type === 'target') {
+        res.target?.push(item);
+      }
+
+      return res;
+    },
+    {
+      source: [],
+      target: [],
+    }
+  );
+}
+
 function getHandleDataByNode(node?: NodeBase): [Rect, NodeHandleBounds | null, boolean] {
-  const handleBounds = node?.[internalsSymbol]?.handleBounds || null;
+  const handleBounds = node?.[internalsSymbol]?.handleBounds || toHandleBounds(node?.handles) || null;
+  const nodeWidth = node?.width || node?.dimensions?.width;
+  const nodeHeight = node?.height || node?.dimensions?.height;
 
   const isValid =
     handleBounds &&
-    node?.width &&
+    nodeWidth &&
-    node?.height &&
+    nodeHeight &&
     typeof node?.positionAbsolute?.x !== 'undefined' &&
     typeof node?.positionAbsolute?.y !== 'undefined';
 
@@ -73,8 +99,8 @@ function getHandleDataByNode(node?: NodeBase): [Rect, NodeHandleBounds | null, b
     {
       x: node?.positionAbsolute?.x || 0,
       y: node?.positionAbsolute?.y || 0,
-      width: node?.width || 0,
+      width: nodeWidth || 0,
-      height: node?.height || 0,
+      height: nodeHeight || 0,
     },
     handleBounds,
     !!isValid,