From 6631a36ddb7fbb61ccb43bf387832bb80d69002d Mon Sep 17 00:00:00 2001 From: mohamedsalem401 Date: Wed, 22 Jan 2025 15:39:06 +0200 Subject: [PATCH] Fix resizer on absolute drag mode when the parent is positioned ( position: relative | absolute | .... ) --- packages/core/src/utils/Resizer.ts | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/core/src/utils/Resizer.ts b/packages/core/src/utils/Resizer.ts index 3b52f7cc2..2540eb166 100644 --- a/packages/core/src/utils/Resizer.ts +++ b/packages/core/src/utils/Resizer.ts @@ -672,15 +672,21 @@ export default class Resizer { const maxDim = opts.maxDim; const deltaX = data.delta!.x; const deltaY = data.delta!.y; + const parentEl = this.getParentEl(); + const parentRect = parentEl ? this.getElementPos(parentEl) : { top: 0, left: 0, width: 0, height: 0 }; const parentW = this.parentDim!.w; const parentH = this.parentDim!.h; const unitWidth = this.opts.unitWidth; const unitHeight = this.opts.unitHeight; const startW = unitWidth === '%' ? (startDim.w / 100) * parentW : startDim.w; const startH = unitHeight === '%' ? (startDim.h / 100) * parentH : startDim.h; + + // Check if the parent or any ancestor has `position: relative`, `absolute`, `fixed`, or `sticky` + const hasPositionedParent = parentEl && this.hasPositionedParent(parentEl); + const box: RectDim = { - t: startDim.t, - l: startDim.l, + t: hasPositionedParent ? startDim.t - parentRect.top : startDim.t, // Subtract only if parent or ancestor is positioned + l: hasPositionedParent ? startDim.l - parentRect.left : startDim.l, // Subtract only if parent or ancestor is positioned w: startW, h: startH, }; @@ -750,4 +756,20 @@ export default class Resizer { return box; } + + hasPositionedParent(element: HTMLElement | null): boolean { + if (!element) return false; + + let currentElement: HTMLElement | null = element; + + while (currentElement) { + const position = window.getComputedStyle(currentElement).position; + if (position === 'relative' || position === 'absolute' || position === 'fixed' || position === 'sticky') { + return true; + } + currentElement = currentElement.parentElement; + } + + return false; + } }