handsontable 0.0.0-next-b914b0f-20230828 → 0.0.0-next-c8688e9-20230828

package/helpers/dom/event.d.ts

@@ -2,3 +2,4 @@ export function stopImmediatePropagation(event: Event): void;
 export function isImmediatePropagationStopped(event: Event): boolean;
 export function isRightClick(event: Event): boolean;
 export function isLeftClick(event: Event): boolean;
+export function offsetRelativeTo(event: Event, untilElement: HTMLElement | undefined): { x: number, y: number };

package/helpers/dom/event.js

@@ -4,6 +4,7 @@ exports.__esModule = true;
 exports.isImmediatePropagationStopped = isImmediatePropagationStopped;
 exports.isLeftClick = isLeftClick;
 exports.isRightClick = isRightClick;
+exports.offsetRelativeTo = offsetRelativeTo;
 exports.stopImmediatePropagation = stopImmediatePropagation;
 /**
  * Prevent other listeners of the same event from being called.
@@ -43,4 +44,28 @@ function isRightClick(event) {
  */
 function isLeftClick(event) {
   return event.button === 0;
+}
+
+/**
+ * Calculates the event offset until reaching the element defined by `relativeElement` argument.
+ *
+ * @param {Event} event The mouse event object.
+ * @param {HTMLElement|undefined} [untilElement] The element to which the offset will be calculated.
+ * @returns {{ x: number, y: number }}
+ */
+function offsetRelativeTo(event, untilElement) {
+  const offset = {
+    x: event.offsetX,
+    y: event.offsetY
+  };
+  let element = event.target;
+  if (!(untilElement instanceof HTMLElement) || element !== untilElement && element.contains(untilElement)) {
+    return offset;
+  }
+  while (element !== untilElement) {
+    offset.x += element.offsetLeft;
+    offset.y += element.offsetTop;
+    element = element.offsetParent;
+  }
+  return offset;
 }

package/helpers/dom/event.mjs

@@ -36,4 +36,28 @@ export function isRightClick(event) {
  */
 export function isLeftClick(event) {
   return event.button === 0;
+}
+
+/**
+ * Calculates the event offset until reaching the element defined by `relativeElement` argument.
+ *
+ * @param {Event} event The mouse event object.
+ * @param {HTMLElement|undefined} [untilElement] The element to which the offset will be calculated.
+ * @returns {{ x: number, y: number }}
+ */
+export function offsetRelativeTo(event, untilElement) {
+  const offset = {
+    x: event.offsetX,
+    y: event.offsetY
+  };
+  let element = event.target;
+  if (!(untilElement instanceof HTMLElement) || element !== untilElement && element.contains(untilElement)) {
+    return offset;
+  }
+  while (element !== untilElement) {
+    offset.x += element.offsetLeft;
+    offset.y += element.offsetTop;
+    element = element.offsetParent;
+  }
+  return offset;
 }

package/helpers/mixed.js

@@ -134,7 +134,7 @@ const domMessages = {
 function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-b914b0f-20230828";
+  const hotVersion = "0.0.0-next-c8688e9-20230828";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';

package/helpers/mixed.mjs

@@ -124,7 +124,7 @@ const domMessages = {
 export function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-b914b0f-20230828";
+  const hotVersion = "0.0.0-next-c8688e9-20230828";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/handsontable/handsontable/issues"
   },
   "author": "Handsoncode <hello@handsontable.com>",
-  "version": "0.0.0-next-b914b0f-20230828",
+  "version": "0.0.0-next-c8688e9-20230828",
   "main": "index",
   "module": "index.mjs",
   "jsnext:main": "index.mjs",

package/plugins/manualColumnMove/manualColumnMove.js

@@ -6,6 +6,7 @@ var _base = require("../base");
 var _pluginHooks = _interopRequireDefault(require("../../pluginHooks"));
 var _array = require("../../helpers/array");
 var _element = require("../../helpers/dom/element");
+var _event = require("../../helpers/dom/event");
 var _number = require("../../helpers/number");
 var _eventManager = _interopRequireDefault(require("../../eventManager"));
 var _backlight = _interopRequireDefault(require("./ui/backlight"));
@@ -513,8 +514,8 @@ class ManualColumnMove extends _base.BasePlugin {
     if (coords.row < 0 && coords.col >= start && coords.col <= end) {
       controller.column = true;
       priv.pressed = true;
+      const eventOffsetX = TD.firstChild ? (0, _event.offsetRelativeTo)(event, TD.firstChild).x : event.offsetX;
       priv.target.eventPageX = event.pageX;
-      priv.target.eventOffsetX = event.offsetX;
       priv.hoveredColumn = coords.col;
       priv.target.TD = TD;
       priv.target.col = coords.col;
@@ -526,8 +527,8 @@ class ManualColumnMove extends _base.BasePlugin {
       const countColumnsFrom = priv.hasRowHeaders ? -1 : 0;
       const topPos = wtTable.holder.scrollTop + wtTable.getColumnHeaderHeight(0) + 1;
       const fixedColumnsStart = coords.col < priv.fixedColumnsStart;
-      const horizontalScrollPosition = Math.abs(this.hot.view._wt.wtOverlays.inlineStartOverlay.getScrollPosition());
-      const offsetX = Math.abs(event.offsetX - (this.hot.isRtl() ? event.target.offsetWidth : 0));
+      const horizontalScrollPosition = this.hot.view._wt.wtOverlays.inlineStartOverlay.getOverlayOffset();
+      const offsetX = Math.abs(eventOffsetX - (this.hot.isRtl() ? TD.offsetWidth : 0));
       const inlineOffset = this.getColumnsWidth(start, coords.col - 1) + offsetX;
       const inlinePos = this.getColumnsWidth(countColumnsFrom, start - 1) + (fixedColumnsStart ? horizontalScrollPosition : 0) + inlineOffset;
       this.backlight.setPosition(topPos, inlinePos);
@@ -552,15 +553,6 @@ class ManualColumnMove extends _base.BasePlugin {
     if (!priv.pressed) {
       return;
     }
-
-    // callback for browser which doesn't supports CSS pointer-event: none
-    if (event.target === this.backlight.element) {
-      const width = this.backlight.getSize().width;
-      this.backlight.setSize(0);
-      setTimeout(function () {
-        this.backlight.setPosition(width);
-      });
-    }
     priv.target.eventPageX = event.pageX;
     this.refreshPositions();
   }

package/plugins/manualColumnMove/manualColumnMove.mjs

@@ -3,6 +3,7 @@ import { BasePlugin } from "../base/index.mjs";
 import Hooks from "../../pluginHooks.mjs";
 import { arrayReduce } from "../../helpers/array.mjs";
 import { addClass, removeClass, offset, hasClass, outerWidth } from "../../helpers/dom/element.mjs";
+import { offsetRelativeTo } from "../../helpers/dom/event.mjs";
 import { rangeEach } from "../../helpers/number.mjs";
 import EventManager from "../../eventManager.mjs";
 import BacklightUI from "./ui/backlight.mjs";
@@ -507,8 +508,8 @@ export class ManualColumnMove extends BasePlugin {
     if (coords.row < 0 && coords.col >= start && coords.col <= end) {
       controller.column = true;
       priv.pressed = true;
+      const eventOffsetX = TD.firstChild ? offsetRelativeTo(event, TD.firstChild).x : event.offsetX;
       priv.target.eventPageX = event.pageX;
-      priv.target.eventOffsetX = event.offsetX;
       priv.hoveredColumn = coords.col;
       priv.target.TD = TD;
       priv.target.col = coords.col;
@@ -520,8 +521,8 @@ export class ManualColumnMove extends BasePlugin {
       const countColumnsFrom = priv.hasRowHeaders ? -1 : 0;
       const topPos = wtTable.holder.scrollTop + wtTable.getColumnHeaderHeight(0) + 1;
       const fixedColumnsStart = coords.col < priv.fixedColumnsStart;
-      const horizontalScrollPosition = Math.abs(this.hot.view._wt.wtOverlays.inlineStartOverlay.getScrollPosition());
-      const offsetX = Math.abs(event.offsetX - (this.hot.isRtl() ? event.target.offsetWidth : 0));
+      const horizontalScrollPosition = this.hot.view._wt.wtOverlays.inlineStartOverlay.getOverlayOffset();
+      const offsetX = Math.abs(eventOffsetX - (this.hot.isRtl() ? TD.offsetWidth : 0));
       const inlineOffset = this.getColumnsWidth(start, coords.col - 1) + offsetX;
       const inlinePos = this.getColumnsWidth(countColumnsFrom, start - 1) + (fixedColumnsStart ? horizontalScrollPosition : 0) + inlineOffset;
       this.backlight.setPosition(topPos, inlinePos);
@@ -546,15 +547,6 @@ export class ManualColumnMove extends BasePlugin {
     if (!priv.pressed) {
       return;
     }
-
-    // callback for browser which doesn't supports CSS pointer-event: none
-    if (event.target === this.backlight.element) {
-      const width = this.backlight.getSize().width;
-      this.backlight.setSize(0);
-      setTimeout(function () {
-        this.backlight.setPosition(width);
-      });
-    }
     priv.target.eventPageX = event.pageX;
     this.refreshPositions();
   }

package/plugins/manualRowMove/manualRowMove.js

@@ -416,14 +416,7 @@ class ManualRowMove extends _base.BasePlugin {
     const rootElementOffset = (0, _element.offset)(rootElement);
     const trimmingContainer = (0, _element.getTrimmingContainer)(rootElement);
     const tableScroll = wtTable.holder.scrollTop;
-    let trimmingContainerScroll;
-
-    // Trimming container is the `window` element.
-    if (this.hot.rootWindow === trimmingContainer) {
-      trimmingContainerScroll = trimmingContainer.scrollY;
-    } else {
-      trimmingContainerScroll = trimmingContainer.scrollTop;
-    }
+    const trimmingContainerScroll = this.hot.rootWindow !== trimmingContainer ? trimmingContainer.scrollTop : 0;
     const pixelsAbove = rootElementOffset.top - trimmingContainerScroll;
     const pixelsRelToTableStart = priv.target.eventPageY - pixelsAbove + tableScroll;
     const hiderHeight = wtTable.hider.offsetHeight;
@@ -435,7 +428,7 @@ class ManualRowMove extends _base.BasePlugin {
     let tdStartPixel = this.hot.view.THEAD.offsetHeight + this.getRowsHeight(0, coords.row - 1);
     const isBelowTable = pixelsRelToTableStart >= tdStartPixel + tdMiddle;
     if (this.isFixedRowTop(coords.row)) {
-      tdStartPixel += wtTable.holder.scrollTop;
+      tdStartPixel += this.hot.view._wt.wtOverlays.topOverlay.getOverlayOffset();
     }
     if (coords.row < 0) {
       // if hover on colHeader
@@ -532,9 +525,10 @@ class ManualRowMove extends _base.BasePlugin {
       priv.target.TD = TD;
       priv.rowsToMove = this.prepareRowsToMoving();
       const leftPos = wtTable.holder.scrollLeft + wtViewport.getRowHeaderWidth();
+      const topOffset = this.getRowsHeight(start, coords.row - 1) + event.offsetY;
       this.backlight.setPosition(null, leftPos);
       this.backlight.setSize(wtTable.hider.offsetWidth - leftPos, this.getRowsHeight(start, end));
-      this.backlight.setOffset((this.getRowsHeight(start, coords.row - 1) + event.offsetY) * -1, null);
+      this.backlight.setOffset(-topOffset, null);
       (0, _element.addClass)(this.hot.rootElement, CSS_ON_MOVING);
       this.refreshPositions();
     } else {
@@ -555,15 +549,6 @@ class ManualRowMove extends _base.BasePlugin {
     if (!priv.pressed) {
       return;
     }
-
-    // callback for browser which doesn't supports CSS pointer-event: none
-    if (event.target === this.backlight.element) {
-      const height = this.backlight.getSize().height;
-      this.backlight.setSize(null, 0);
-      setTimeout(function () {
-        this.backlight.setPosition(null, height);
-      });
-    }
     priv.target.eventPageY = event.pageY;
     this.refreshPositions();
   }

package/plugins/manualRowMove/manualRowMove.mjs

@@ -410,14 +410,7 @@ export class ManualRowMove extends BasePlugin {
     const rootElementOffset = offset(rootElement);
     const trimmingContainer = getTrimmingContainer(rootElement);
     const tableScroll = wtTable.holder.scrollTop;
-    let trimmingContainerScroll;
-
-    // Trimming container is the `window` element.
-    if (this.hot.rootWindow === trimmingContainer) {
-      trimmingContainerScroll = trimmingContainer.scrollY;
-    } else {
-      trimmingContainerScroll = trimmingContainer.scrollTop;
-    }
+    const trimmingContainerScroll = this.hot.rootWindow !== trimmingContainer ? trimmingContainer.scrollTop : 0;
     const pixelsAbove = rootElementOffset.top - trimmingContainerScroll;
     const pixelsRelToTableStart = priv.target.eventPageY - pixelsAbove + tableScroll;
     const hiderHeight = wtTable.hider.offsetHeight;
@@ -429,7 +422,7 @@ export class ManualRowMove extends BasePlugin {
     let tdStartPixel = this.hot.view.THEAD.offsetHeight + this.getRowsHeight(0, coords.row - 1);
     const isBelowTable = pixelsRelToTableStart >= tdStartPixel + tdMiddle;
     if (this.isFixedRowTop(coords.row)) {
-      tdStartPixel += wtTable.holder.scrollTop;
+      tdStartPixel += this.hot.view._wt.wtOverlays.topOverlay.getOverlayOffset();
     }
     if (coords.row < 0) {
       // if hover on colHeader
@@ -526,9 +519,10 @@ export class ManualRowMove extends BasePlugin {
       priv.target.TD = TD;
       priv.rowsToMove = this.prepareRowsToMoving();
       const leftPos = wtTable.holder.scrollLeft + wtViewport.getRowHeaderWidth();
+      const topOffset = this.getRowsHeight(start, coords.row - 1) + event.offsetY;
       this.backlight.setPosition(null, leftPos);
       this.backlight.setSize(wtTable.hider.offsetWidth - leftPos, this.getRowsHeight(start, end));
-      this.backlight.setOffset((this.getRowsHeight(start, coords.row - 1) + event.offsetY) * -1, null);
+      this.backlight.setOffset(-topOffset, null);
       addClass(this.hot.rootElement, CSS_ON_MOVING);
       this.refreshPositions();
     } else {
@@ -549,15 +543,6 @@ export class ManualRowMove extends BasePlugin {
     if (!priv.pressed) {
       return;
     }
-
-    // callback for browser which doesn't supports CSS pointer-event: none
-    if (event.target === this.backlight.element) {
-      const height = this.backlight.getSize().height;
-      this.backlight.setSize(null, 0);
-      setTimeout(function () {
-        this.backlight.setPosition(null, height);
-      });
-    }
     priv.target.eventPageY = event.pageY;
     this.refreshPositions();
   }