From 6631a36ddb7fbb61ccb43bf387832bb80d69002d Mon Sep 17 00:00:00 2001 From: mohamedsalem401 Date: Wed, 22 Jan 2025 15:39:06 +0200 Subject: [PATCH 1/3] 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/3] 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; } } From bd740f2bc031b368922e9da98fadec5379d4032c Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Mon, 3 Feb 2025 14:13:25 +0400 Subject: [PATCH 3/3] Up Resizer --- packages/core/src/utils/Resizer.ts | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/core/src/utils/Resizer.ts b/packages/core/src/utils/Resizer.ts index 52f511cadd..e239fab4eb 100644 --- a/packages/core/src/utils/Resizer.ts +++ b/packages/core/src/utils/Resizer.ts @@ -672,21 +672,17 @@ 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 parentRect = this.getParentRect(); 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: 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 + t: startDim.t - parentRect.top, + l: startDim.l - parentRect.left, w: startW, h: startH, }; @@ -757,10 +753,19 @@ export default class Resizer { return box; } - hasPositionedParent(element: HTMLElement | null): boolean { - if (!element) return false; + 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); + } - // If the element's offsetParent is not the body or null, it has a positioned ancestor - return element.offsetParent !== document.body && element.offsetParent !== null; + return parentRect; } }