From 1a25a7da485e7e9155080f4b16503188d1ac3d1d Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 24 Jun 2024 14:38:45 +0200
Subject: [PATCH] fix(store): calc handle pos

---
 packages/system/src/utils/dom.ts     | 30 ++++++----------------------
 packages/system/src/utils/general.ts |  1 +
 packages/system/src/utils/store.ts   |  4 ++--
 3 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/packages/system/src/utils/dom.ts b/packages/system/src/utils/dom.ts
index 82f51153..4bbc151a 100644
--- a/packages/system/src/utils/dom.ts
+++ b/packages/system/src/utils/dom.ts
@@ -1,13 +1,4 @@
-import type {
-  Transform,
-  XYPosition,
-  SnapGrid,
-  Dimensions,
-  NodeOrigin,
-  HandleElement,
-  Position,
-  InternalNodeBase,
-} from '../types';
+import type { Transform, XYPosition, SnapGrid, Dimensions, HandleElement, Position } from '../types';
 import { snapPosition, pointToRendererPoint } from './general';
 
 export type GetPointerPositionParams = {
@@ -69,11 +60,9 @@ export const getEventPosition = (event: MouseEvent | TouchEvent, bounds?: DOMRec
 // unnecessary recalculations.
 export const getHandleBounds = (
   selector: string,
-  node: InternalNodeBase,
   nodeElement: HTMLDivElement,
   nodeBounds: DOMRect,
-  zoom: number,
-  nodeOrigin: NodeOrigin = [0, 0]
+  zoom: number
 ): HandleElement[] | null => {
   const handles = nodeElement.querySelectorAll(selector);
 
@@ -81,22 +70,15 @@ export const getHandleBounds = (
     return null;
   }
 
-  const handlesArray = Array.from(handles) as HTMLDivElement[];
-
-  const nodeOffset = {
-    x: nodeBounds.left + nodeBounds.width * nodeOrigin[0],
-    y: nodeBounds.top + nodeBounds.height * nodeOrigin[1],
-  };
-
-  return handlesArray.map((handle): HandleElement => {
+  return Array.from(handles).map((handle): HandleElement => {
     const handleBounds = handle.getBoundingClientRect();
 
     return {
       id: handle.getAttribute('data-handleid'),
       position: handle.getAttribute('data-handlepos') as unknown as Position,
-      x: (handleBounds.left - nodeOffset.x) / zoom,
-      y: (handleBounds.top - nodeOffset.y) / zoom,
-      ...getDimensions(handle),
+      x: (handleBounds.left - nodeBounds.left) / zoom,
+      y: (handleBounds.top - nodeBounds.top) / zoom,
+      ...getDimensions(handle as HTMLDivElement),
     };
   });
 };
diff --git a/packages/system/src/utils/general.ts b/packages/system/src/utils/general.ts
index a6767c20..95a02f81 100644
--- a/packages/system/src/utils/general.ts
+++ b/packages/system/src/utils/general.ts
@@ -248,6 +248,7 @@ export function evaluateAbsolutePosition(
   nodeLookup: NodeLookup,
   nodeOrigin: NodeOrigin
 ): XYPosition {
+  let nextParentId: string | undefined = parentId;
   const positionAbsolute = { ...position };
 
   while (nextParentId) {
diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts
index dced6091..ae0de3f7 100644
--- a/packages/system/src/utils/store.ts
+++ b/packages/system/src/utils/store.ts
@@ -283,11 +283,11 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
 
       if (doUpdate) {
         const nodeBounds = update.nodeElement.getBoundingClientRect();
-        
+
         node.measured = dimensions;
         node.internals = {
           ...node.internals,
-          positionAbsolute,
+          positionAbsolute: getNodePositionWithOrigin(node, nodeOrigin),
           handleBounds: {
             source: getHandleBounds('.source', update.nodeElement, nodeBounds, zoom),
             target: getHandleBounds('.target', update.nodeElement, nodeBounds, zoom),