Merge branch 'next' into absolute-origin

packages/system/src/utils/dom.ts

@@ -71,6 +71,7 @@ export const getHandleBounds = (
   selector: string,
   node: InternalNodeBase,
   nodeElement: HTMLDivElement,
+  nodeBounds: DOMRect,
   zoom: number,
   nodeOrigin: NodeOrigin = [0, 0]
 ): HandleElement[] | null => {
@@ -82,11 +83,9 @@ export const getHandleBounds = (
 
   const handlesArray = Array.from(handles) as HTMLDivElement[];
 
-  // @todo can't we use the node dimensions here?
-  const nodeBounds = nodeElement.getBoundingClientRect();
   const nodeOffset = {
-    x: nodeBounds.width * nodeOrigin[0],
-    y: nodeBounds.height * nodeOrigin[1],
+    x: nodeBounds.left + nodeBounds.width * nodeOrigin[0],
+    y: nodeBounds.top + nodeBounds.height * nodeOrigin[1],
   };
 
   return handlesArray.map((handle): HandleElement => {
@@ -95,8 +94,8 @@ export const getHandleBounds = (
     return {
       id: handle.getAttribute('data-handleid'),
       position: handle.getAttribute('data-handlepos') as unknown as Position,
-      x: (handleBounds.left - nodeBounds.left - nodeOffset.x) / zoom,
-      y: (handleBounds.top - nodeBounds.top - nodeOffset.y) / zoom,
+      x: (handleBounds.left - nodeOffset.x) / zoom,
+      y: (handleBounds.top - nodeOffset.y) / zoom,
       ...getDimensions(handle),
     };
   });

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

@@ -132,23 +132,23 @@ export const addEdge = <EdgeType extends EdgeBase>(
   return edges.concat(edge);
 };
 
-export type UpdateEdgeOptions = {
+export type ReconnectEdgeOptions = {
   shouldReplaceId?: boolean;
 };
 
 /**
- * A handy utility to update an existing Edge with new properties
+ * A handy utility to reconnect an existing edge with new properties
  * @param oldEdge - The edge you want to update
  * @param newConnection - The new connection you want to update the edge with
  * @param edges - The array of all current edges
  * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
  * @returns the updated edges array
  */
-export const updateEdge = <EdgeType extends EdgeBase>(
+export const reconnectEdge = <EdgeType extends EdgeBase>(
   oldEdge: EdgeType,
   newConnection: Connection,
   edges: EdgeType[],
-  options: UpdateEdgeOptions = { shouldReplaceId: true }
+  options: ReconnectEdgeOptions = { shouldReplaceId: true }
 ): EdgeType[] => {
   const { id: oldEdgeId, ...rest } = oldEdge;
 

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

@@ -42,8 +42,6 @@ export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | n
       : (targetHandleBounds?.target ?? []).concat(targetHandleBounds?.source ?? []),
     params.targetHandle
   );
-  const sourcePosition = sourceHandle?.position || Position.Bottom;
-  const targetPosition = targetHandle?.position || Position.Top;
 
   if (!sourceHandle || !targetHandle) {
     params.onError?.(
@@ -58,8 +56,10 @@ export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | n
     return null;
   }
 
-  const [sourceX, sourceY] = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
-  const [targetX, targetY] = getHandlePosition(targetPosition, targetNode, targetHandle);
+  const sourcePosition = sourceHandle?.position || Position.Bottom;
+  const targetPosition = targetHandle?.position || Position.Top;
+  const [sourceX, sourceY] = getHandlePosition(sourceNode, sourceHandle, sourcePosition);
+  const [targetX, targetY] = getHandlePosition(targetNode, targetHandle, targetPosition);
 
   return {
     sourceX,
@@ -96,10 +96,15 @@ function toHandleBounds(handles?: NodeHandle[]) {
   };
 }
 
-function getHandlePosition(position: Position, node: InternalNodeBase, handle: HandleElement | null = null): number[] {
+export function getHandlePosition(
+  node: InternalNodeBase,
+  handle: HandleElement | null,
+  fallbackPosition: Position = Position.Left
+): number[] {
   const x = (handle?.x ?? 0) + node.internals.positionAbsolute.x;
   const y = (handle?.y ?? 0) + node.internals.positionAbsolute.y;
   const { width, height } = handle ?? getNodeDimensions(node);
+  const position = handle?.position ?? fallbackPosition;
 
   switch (position) {
     case Position.Top:

packages/system/src/utils/general.ts

@@ -250,10 +250,17 @@ export function evaluateAbsolutePosition(
 ): XYPosition {
   const positionAbsolute = { ...position };
 
-  const parent = nodeLookup.get(parentId);
-  if (parent) {
-    positionAbsolute.x += parent.internals.positionAbsolute.x - dimensions.width * nodeOrigin[0];
-    positionAbsolute.y += parent.internals.positionAbsolute.y - dimensions.height * nodeOrigin[1];
+  while (nextParentId) {
+    const parent = nodeLookup.get(nextParentId);
+    nextParentId = parent?.parentId;
+
+    if (parent) {
+      const origin = parent.origin || nodeOrigin;
+      const xOffset = (parent.measured.width ?? 0) * origin[0];
+      const yOffset = (parent.measured.height ?? 0) * origin[1];
+      positionAbsolute.x += parent.internals.positionAbsolute.x - dimensions.width * nodeOrigin[0];
+      positionAbsolute.y += parent.internals.positionAbsolute.y - dimensions.height * nodeOrigin[1];
+    }
   }
 
   return positionAbsolute;

packages/system/src/utils/store.ts

@@ -282,14 +282,15 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
       );
 
       if (doUpdate) {
-        const positionAbsolute = getNodePositionWithOrigin(node, nodeOrigin);
+        const nodeBounds = update.nodeElement.getBoundingClientRect();
+        
         node.measured = dimensions;
         node.internals = {
           ...node.internals,
-          positionAbsolute: getNodePositionWithOrigin(node, nodeOrigin),
+          positionAbsolute,
           handleBounds: {
-            source: getHandleBounds('.source', node, update.nodeElement, zoom),
-            target: getHandleBounds('.target', node, update.nodeElement, zoom),
+            source: getHandleBounds('.source', update.nodeElement, nodeBounds, zoom),
+            target: getHandleBounds('.target', update.nodeElement, nodeBounds, zoom),
           },
         };
         if (node.parentId) {