Fix resizer on absolute drag mode when the parent is positioned ( pos…

…ition: relative | absolute | .... ) (#6382) * Fix resizer on absolute drag mode when the parent is positioned ( position: relative | absolute | .... ) * Improve calculation performance * Up Resizer --------- Co-authored-by: Artur Arseniev <[email protected]>
GrapesJS · Feb 3, 2025 · 4d34f52 · 4d34f52
1 parent 8298c4d
commit 4d34f52
Showing 1 changed file with 20 additions and 2 deletions.
diff --git a/packages/core/src/utils/Resizer.ts b/packages/core/src/utils/Resizer.ts
@@ -676,11 +676,13 @@ export default class Resizer {
     const parentH = this.parentDim!.h;
     const unitWidth = this.opts.unitWidth;
     const unitHeight = this.opts.unitHeight;
+    const parentRect = this.getParentRect();
     const startW = unitWidth === '%' ? (startDim.w / 100) * parentW : startDim.w;
     const startH = unitHeight === '%' ? (startDim.h / 100) * parentH : startDim.h;
+
     const box: RectDim = {
-      t: startDim.t,
-      l: startDim.l,
+      t: startDim.t - parentRect.top,
+      l: startDim.l - parentRect.left,
       w: startW,
       h: startH,
     };
@@ -750,4 +752,20 @@ export default class Resizer {
 
     return box;
   }
+
+  getParentRect(): BoundingRect {
+    let parentRect = { left: 0, top: 0, width: 0, height: 0 };
+    const { el } = this;
+
+    if (!el) return parentRect;
+
+    const { offsetParent } = el;
+
+    // Check if the parent or any ancestor has `position: relative`, `absolute`, `fixed`, or `sticky`
+    if (offsetParent && offsetParent.tagName !== 'BODY') {
+      parentRect = this.getElementPos(offsetParent as HTMLElement);
+    }
+
+    return parentRect;
+  }
 }