diff --git a/packages/common/src/core/slickCore.ts b/packages/common/src/core/slickCore.ts index fac6b6018..ef1813d60 100644 --- a/packages/common/src/core/slickCore.ts +++ b/packages/common/src/core/slickCore.ts @@ -672,19 +672,6 @@ export class Utils { public static noop() { } - public static offset(el: HTMLElement | null) { - if (!el || !el.getBoundingClientRect) { - return undefined; - } - const box = el.getBoundingClientRect(); - const docElem = document.documentElement; - - return { - top: box.top + window.pageYOffset - docElem.clientTop, - left: box.left + window.pageXOffset - docElem.clientLeft - }; - } - public static width(el: HTMLElement, value?: number | string): number | void { if (!el || !el.getBoundingClientRect) { return; } if (value === undefined) { diff --git a/packages/common/src/core/slickGrid.ts b/packages/common/src/core/slickGrid.ts index b290e7f1e..11283c6b7 100644 --- a/packages/common/src/core/slickGrid.ts +++ b/packages/common/src/core/slickGrid.ts @@ -81,7 +81,7 @@ import type { SlickPlugin, SlickGridEventData, } from '../interfaces'; -import { createDomElement, emptyElement } from '../services/domUtilities'; +import { createDomElement, emptyElement, getHtmlElementOffset } from '../services/domUtilities'; /** * @license @@ -1752,13 +1752,13 @@ export class SlickGrid = Column, O e scroll: !this.hasFrozenColumns(), // enable auto-scroll onStart: (e: { item: any; originalEvent: MouseEvent; }) => { canDragScroll = !this.hasFrozenColumns() || - Utils.offset(e.item)!.left > Utils.offset(this._viewportScrollContainerX)!.left; + getHtmlElementOffset(e.item)!.left > getHtmlElementOffset(this._viewportScrollContainerX)!.left; if (canDragScroll && e.originalEvent.pageX > this._container.clientWidth) { if (!(columnScrollTimer)) { columnScrollTimer = setInterval(scrollColumnsRight, 100); } - } else if (canDragScroll && e.originalEvent.pageX < Utils.offset(this._viewportScrollContainerX)!.left) { + } else if (canDragScroll && e.originalEvent.pageX < getHtmlElementOffset(this._viewportScrollContainerX)!.left) { if (!(columnScrollTimer)) { columnScrollTimer = setInterval(scrollColumnsLeft, 100); } @@ -5048,7 +5048,7 @@ export class SlickGrid = Column, O e if (this.hasFrozenRows) { let rowOffset = 0; - const c = Utils.offset(Utils.parents(cellNode, '.grid-canvas')[0] as HTMLElement); + const c = getHtmlElementOffset(Utils.parents(cellNode, '.grid-canvas')[0] as HTMLElement); const isBottom = Utils.parents(cellNode, '.grid-canvas-bottom').length; if (isBottom) { @@ -5166,8 +5166,8 @@ export class SlickGrid = Column, O e this.activeCellNode = newCell; if (isDefined(this.activeCellNode)) { - const activeCellOffset = Utils.offset(this.activeCellNode); - let rowOffset = Math.floor(Utils.offset(Utils.parents(this.activeCellNode, '.grid-canvas')[0] as HTMLElement)!.top); + const activeCellOffset = getHtmlElementOffset(this.activeCellNode); + let rowOffset = Math.floor(getHtmlElementOffset(Utils.parents(this.activeCellNode, '.grid-canvas')[0] as HTMLElement)!.top); const isBottom = Utils.parents(this.activeCellNode, '.grid-canvas-bottom').length; if (this.hasFrozenRows && isBottom) { diff --git a/packages/common/src/editors/longTextEditor.ts b/packages/common/src/editors/longTextEditor.ts index 15b032270..ad453c937 100644 --- a/packages/common/src/editors/longTextEditor.ts +++ b/packages/common/src/editors/longTextEditor.ts @@ -303,7 +303,7 @@ export class LongTextEditor implements Editor { * Same goes for the top/bottom position, Most of the time positioning the editor to the "bottom" but we are clicking on a cell at the bottom of the grid then we might need to reposition to "top" instead. * NOTE: this only applies to Inline Editing and will not have any effect when using the Composite Editor modal window. */ - position(parentPosition: HtmlElementPosition) { + position(parentPosition: Partial) { const containerOffset = getHtmlElementOffset(this.args.container); const containerHeight = this.args.container.offsetHeight; const containerWidth = this.args.container.offsetWidth; diff --git a/packages/common/src/interfaces/htmlElementPosition.interface.ts b/packages/common/src/interfaces/htmlElementPosition.interface.ts index 31837a47f..1c1ada610 100644 --- a/packages/common/src/interfaces/htmlElementPosition.interface.ts +++ b/packages/common/src/interfaces/htmlElementPosition.interface.ts @@ -1,6 +1,6 @@ export interface HtmlElementPosition { - top?: number; - bottom?: number; - left?: number; - right?: number; + top: number; + bottom: number; + left: number; + right: number; } diff --git a/packages/common/src/services/domUtilities.ts b/packages/common/src/services/domUtilities.ts index cd6f5a860..24159a6e2 100644 --- a/packages/common/src/services/domUtilities.ts +++ b/packages/common/src/services/domUtilities.ts @@ -229,21 +229,23 @@ export function getElementOffsetRelativeToParent(parentElm: HTMLElement | null, } /** Get HTML element offset with pure JS */ -export function getHtmlElementOffset(element?: HTMLElement | null): HtmlElementPosition | undefined { - if (!element) { +export function getHtmlElementOffset(elm?: HTMLElement | null): HtmlElementPosition | undefined { + if (!elm || !elm.getBoundingClientRect) { return undefined; } - const rect = element?.getBoundingClientRect?.(); + const box = elm.getBoundingClientRect(); + const docElem = document.documentElement; + let top = 0; let left = 0; let bottom = 0; let right = 0; - if (rect?.top !== undefined && rect.left !== undefined) { - top = rect.top + window.pageYOffset; - left = rect.left + window.pageXOffset; - right = rect.right; - bottom = rect.bottom; + if (box?.top !== undefined && box.left !== undefined) { + top = box.top + window.pageYOffset - docElem.clientTop; + left = box.left + window.pageXOffset - docElem.clientLeft; + right = box.right; + bottom = box.bottom; } return { top, left, bottom, right }; }