From 6631a36ddb7fbb61ccb43bf387832bb80d69002d Mon Sep 17 00:00:00 2001 From: mohamedsalem401 Date: Wed, 22 Jan 2025 15:39:06 +0200 Subject: [PATCH 1/2] 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 3b52f7cc26..2540eb1669 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; + } } From 9970350d6569c0ac9e07fa8b6a77989212ca654c Mon Sep 17 00:00:00 2001 From: mohamedsalem401 Date: Mon, 27 Jan 2025 15:05:01 +0200 Subject: [PATCH 2/2] Improve calculation performance --- packages/core/src/utils/Resizer.ts | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/packages/core/src/utils/Resizer.ts b/packages/core/src/utils/Resizer.ts index 2540eb1669..52f511cadd 100644 --- a/packages/core/src/utils/Resizer.ts +++ b/packages/core/src/utils/Resizer.ts @@ -760,16 +760,7 @@ export default class Resizer { 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; + // If the element's offsetParent is not the body or null, it has a positioned ancestor + return element.offsetParent !== document.body && element.offsetParent !== null; } }