handsontable 18.0.0 → 18.1.0-rc7

package/plugins/multipleSelectionHandles/multipleSelectionHandles.mjs

@@ -1,8 +1,104 @@
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) {
+        throw new TypeError("Cannot initialize the same private elements twice on an object");
+    }
+}
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) {
+        return descriptor.get.call(receiver);
+    }
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) {
+        descriptor.set.call(receiver, value);
+    } else {
+        if (!descriptor.writable) {
+            throw new TypeError("attempted to set read only private field");
+        }
+        descriptor.value = value;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to " + action + " private field on non-instance");
+    }
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
+function _class_private_method_get(receiver, privateSet, fn) {
+    if (!privateSet.has(receiver)) {
+        throw new TypeError("attempted to get private field on non-instance");
+    }
+    return fn;
+}
+function _class_private_method_init(obj, privateSet) {
+    _check_private_redeclaration(obj, privateSet);
+    privateSet.add(obj);
+}
 import { eventTargetEl, hasClass } from '../../helpers/dom/element.mjs';
+import { getCellCoordsFromMousePosition } from '../../helpers/dom/cellCoords.mjs';
+import { getFirstChangedTouch, getTouchPointById } from '../../helpers/dom/event.mjs';
 import { isMobileBrowser } from '../../helpers/browser.mjs';
 import { BasePlugin } from '../base/index.mjs';
 export const PLUGIN_KEY = 'multipleSelectionHandles';
 export const PLUGIN_PRIORITY = 160;
+/**
+ * How far the finger must travel, in pixels, before its position is resolved to a cell again.
+ */ const TOUCH_MOVE_THRESHOLD = 2;
+var /**
+   * Viewport coordinates of the dragging finger. Kept so the drag can carry on after DragToScroll
+   * moves the viewport, when no further `touchmove` arrives.
+   */ _lastTouchPosition = /*#__PURE__*/ new WeakMap(), /**
+   * The cell the selection was last extended to. Guards against redundant `setRangeEnd` calls while
+   * the finger moves within one cell.
+   */ _lastTargetCoords = /*#__PURE__*/ new WeakMap(), /**
+   * Which handle each finger currently holding one grabbed, keyed by `Touch.identifier`. Lets a
+   * touch event be matched to the finger it is about, rather than to whatever else is on the screen.
+   */ _dragTouches = /*#__PURE__*/ new WeakMap(), /**
+   * Forgets every finger and the range the gesture started from.
+   */ _resetDrag = /*#__PURE__*/ new WeakSet(), /**
+   * Reads where the finger driving the drag currently is.
+   *
+   * Follows the fingers that actually grabbed a handle, by identifier. Reading `touches[0]` instead
+   * would follow whichever finger touched the screen first, so a thumb already resting on the grid
+   * when the handle was grabbed would drive the selection.
+   *
+   * @param {Event} event The `touchmove` event.
+   * @returns {object|null} The finger's position as `{clientX, clientY}`, or `null` when no
+   * handle-holding finger appears in the event.
+   */ _getDragTouchPoint = /*#__PURE__*/ new WeakSet(), /**
+   * Carries the drag on after DragToScroll moves the viewport.
+   *
+   * A finger held still past the grid edge produces no further `touchmove`, so without this the
+   * selection would stop growing at the last cell that was on screen when the finger got there.
+   *
+   * `#extendSelection` can itself scroll its target into view, which fires `afterScroll` again. That
+   * does not run away: the target is resolved against the CURRENT viewport and then de-duplicated on
+   * coordinates, so it reaches a fixed point after one step. Measured with `dragToScroll: false`,
+   * where nothing suppresses the scroll-into-view: it stops after one row and stays there.
+   */ _onAfterScroll = /*#__PURE__*/ new WeakMap(), /**
+   * Extends the selected range to the cell under the given viewport position.
+   *
+   * The position is resolved with `getCellCoordsFromMousePosition`, which clamps it to the viewport
+   * and returns the nearest cell. That is what lets a finger dragged past the grid edge keep
+   * extending the selection while DragToScroll scrolls the viewport underneath it.
+   *
+   * @param {number} clientX The finger's viewport X coordinate.
+   * @param {number} clientY The finger's viewport Y coordinate.
+   */ _extendSelection = /*#__PURE__*/ new WeakSet();
 /**
  * @private
  * @plugin MultipleSelectionHandles
@@ -31,10 +127,21 @@ export const PLUGIN_PRIORITY = 160;
         if (this.enabled) {
             return;
         }
+        this.addHook('afterScroll', _class_private_field_get(this, _onAfterScroll));
         this.registerListeners();
         super.enablePlugin();
     }
     /**
+   * Disables the plugin and forgets any drag in progress.
+   *
+   * Without the reset, an `updateSettings()` mid-drag would take the listeners away while
+   * `#dragTouches` still reported a drag - and because browsers recycle `Touch.identifier`, a later
+   * unrelated finger handed a stale id would pass `isDraggedBy()` and start scrolling the grid.
+   */ disablePlugin() {
+        _class_private_method_get(this, _resetDrag, resetDrag).call(this);
+        super.disablePlugin();
+    }
+    /**
    * Bind the touch events.
    *
    * @private
@@ -45,6 +152,8 @@ export const PLUGIN_PRIORITY = 160;
      * @param {string} query Query for the position.
      * @returns {boolean}
      */ const removeFromDragged = (query)=>{
+            _class_private_field_set(this, _lastTouchPosition, null);
+            _class_private_field_set(this, _lastTargetCoords, null);
             if (this.dragged.length === 1) {
                 // clear array
                 this.dragged.splice(0, this.dragged.length);
@@ -53,10 +162,54 @@ export const PLUGIN_PRIORITY = 160;
             const entryPosition = this.dragged.indexOf(query);
             if (entryPosition === -1) {
                 return false;
-            } else if (entryPosition === 0) {
-                this.dragged = this.dragged.slice(0, 1);
-            } else if (entryPosition === 1) {
-                this.dragged = this.dragged.slice(-1);
+            }
+            // Both former branches sliced the array so that the handle being removed was the one KEPT, so
+            // with two handles held the survivor drove the rest of the drag through `this.dragged[0]` and
+            // moved the wrong corner of the range.
+            this.dragged.splice(entryPosition, 1);
+        };
+        /**
+     * Starts tracking one finger's grip on a handle. Refuses when the finger carries no identifier,
+     * because an untracked finger could never be released - the drag would look stuck for good.
+     *
+     * @private
+     * @param {Event} event The `touchstart` event.
+     * @param {string} handle Which handle the finger grabbed.
+     * @returns {boolean} `true` when the drag started.
+     */ const beginDrag = (event, handle)=>{
+            const touch = getFirstChangedTouch(event);
+            if (touch === null) {
+                return false;
+            }
+            _class_private_field_get(this, _dragTouches).set(touch.identifier, handle);
+            this.dragged.push(handle);
+            return true;
+        };
+        /**
+     * Ends the part of the drag owned by every finger that has left the screen, and leaves the rest
+     * of the gesture running. `touchend` and `touchcancel` both fire once per finger, so neither is
+     * a statement about the gesture as a whole.
+     *
+     * @private
+     * @param {Event} event The `touchend` or `touchcancel` event.
+     */ const releaseLiftedTouches = (event)=>{
+            let released = false;
+            for (const [identifier, handle] of [
+                ..._class_private_field_get(this, _dragTouches)
+            ]){
+                if (getTouchPointById(event, identifier) === null) {
+                    _class_private_field_get(this, _dragTouches).delete(identifier);
+                    removeFromDragged(handle);
+                    released = true;
+                }
+            }
+            if (!released) {
+                return;
+            }
+            _class_private_field_set(this, _lastTouchPosition, null);
+            _class_private_field_set(this, _lastTargetCoords, null);
+            if (this.dragged.length === 0) {
+                this.touchStartRange = undefined;
             }
         };
         this.eventManager.addEventListener(rootElement, 'touchstart', (event)=>{
@@ -67,7 +220,9 @@ export const PLUGIN_PRIORITY = 160;
                 if (!selectedRange) {
                     return false;
                 }
-                this.dragged.push('top');
+                if (!beginDrag(event, 'top')) {
+                    return false;
+                }
                 this.touchStartRange = {
                     width: selectedRange.getWidth(),
                     height: selectedRange.getHeight(),
@@ -80,7 +235,9 @@ export const PLUGIN_PRIORITY = 160;
                 if (!selectedRange) {
                     return false;
                 }
-                this.dragged.push('bottom');
+                if (!beginDrag(event, 'bottom')) {
+                    return false;
+                }
                 this.touchStartRange = {
                     width: selectedRange.getWidth(),
                     height: selectedRange.getHeight(),
@@ -90,61 +247,40 @@ export const PLUGIN_PRIORITY = 160;
                 return false;
             }
         });
-        this.eventManager.addEventListener(rootElement, 'touchend', (event)=>{
-            const target = eventTargetEl(event);
-            if (hasClass(target, 'topSelectionHandle-HitArea')) {
-                removeFromDragged('top');
-                this.touchStartRange = undefined;
-                event.preventDefault();
-                return false;
-            } else if (hasClass(target, 'bottomSelectionHandle-HitArea')) {
-                removeFromDragged('bottom');
-                this.touchStartRange = undefined;
-                event.preventDefault();
-                return false;
-            }
-        });
+        // A cancelled gesture never reaches `touchend`, and browsers cancel often on a real phone - a
+        // system gesture, an incoming call, the browser claiming the touch for scrolling. Both events are
+        // handled the same way, because both answer the same question: which fingers are gone?
+        for (const eventName of [
+            'touchend',
+            'touchcancel'
+        ]){
+            this.eventManager.addEventListener(rootElement, eventName, (event)=>{
+                const target = eventTargetEl(event);
+                releaseLiftedTouches(event);
+                if (hasClass(target, 'topSelectionHandle-HitArea') || hasClass(target, 'bottomSelectionHandle-HitArea')) {
+                    event.preventDefault();
+                    return false;
+                }
+            });
+        }
         this.eventManager.addEventListener(rootElement, 'touchmove', (event)=>{
-            const { rootDocument } = this.hot;
-            let targetCoords;
-            let selectedRange;
-            let rangeWidth;
-            let rangeHeight;
-            let rangeDirection;
-            let newRangeCoords;
             if (this.dragged.length === 0) {
                 return;
             }
-            const te = event.touches[0];
-            const endTarget = rootDocument.elementFromPoint(te.clientX, te.clientY);
-            if (!endTarget || endTarget === this.lastSetCell) {
+            const point = _class_private_method_get(this, _getDragTouchPoint, getDragTouchPoint).call(this, event);
+            if (point === null) {
                 return;
             }
-            if (endTarget.nodeName === 'TD' || endTarget.nodeName === 'TH') {
-                targetCoords = this.hot.getCoords(endTarget);
-                if (!targetCoords) {
-                    return;
-                }
-                if (targetCoords.col === -1) {
-                    targetCoords.col = 0;
-                }
-                selectedRange = this.hot.getSelectedRangeActive();
-                if (!selectedRange) {
-                    return;
-                }
-                rangeWidth = selectedRange.getWidth();
-                rangeHeight = selectedRange.getHeight();
-                rangeDirection = selectedRange.getDirection();
-                if (rangeWidth === 1 && rangeHeight === 1) {
-                    this.hot.selection.setRangeEnd(targetCoords);
-                }
-                newRangeCoords = this.getCurrentRangeCoords(selectedRange, targetCoords, this.touchStartRange.direction, rangeDirection, this.dragged[0]);
-                if (newRangeCoords.start !== null) {
-                    this.hot.selection.setRangeStart(newRangeCoords.start);
-                }
-                this.hot.selection.setRangeEnd(newRangeCoords.end);
-                this.lastSetCell = endTarget;
+            // Resolving a position walks the visible cells reading their geometry, and a phone can send
+            // 120 touchmove/s. Skip that while the finger has barely moved - the cell cannot have changed.
+            // The threshold lives here, NOT in `#extendSelection`: `#onAfterScroll` calls it with an
+            // unchanged position on purpose, because there it is the viewport that moved.
+            if (_class_private_field_get(this, _lastTouchPosition) !== null && Math.abs(point.clientX - _class_private_field_get(this, _lastTouchPosition).clientX) < TOUCH_MOVE_THRESHOLD && Math.abs(point.clientY - _class_private_field_get(this, _lastTouchPosition).clientY) < TOUCH_MOVE_THRESHOLD) {
+                event.preventDefault();
+                return;
             }
+            _class_private_field_set(this, _lastTouchPosition, point);
+            _class_private_method_get(this, _extendSelection, extendSelection).call(this, point.clientX, point.clientY);
             event.preventDefault();
         });
     }
@@ -317,11 +453,90 @@ export const PLUGIN_PRIORITY = 160;
    */ isDragged() {
         return this.dragged.length > 0;
     }
+    /**
+   * Checks whether one specific finger is the one holding a handle. Reachable through `getPlugin`
+   * because DragToScroll needs it - `isDragged()` alone would let it arm auto-scroll for any finger
+   * landing anywhere while a drag happens to be running.
+   *
+   * @private
+   * @param {number} identifier The finger's `Touch.identifier`.
+   * @returns {boolean} Whether that finger grabbed a handle.
+   */ isDraggedBy(identifier) {
+        return _class_private_field_get(this, _dragTouches).has(identifier);
+    }
     constructor(...args){
-        super(...args), /**
+        super(...args), _class_private_method_init(this, _resetDrag), _class_private_method_init(this, _getDragTouchPoint), _class_private_method_init(this, _extendSelection), _class_private_field_init(this, _lastTouchPosition, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _lastTargetCoords, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _dragTouches, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterScroll, {
+            writable: true,
+            value: void 0
+        }), /**
    * @type {Array}
-   */ this.dragged = [], /**
-   * @type {null}
-   */ this.lastSetCell = null;
+   */ this.dragged = [], _class_private_field_set(this, _lastTouchPosition, null), _class_private_field_set(this, _lastTargetCoords, null), _class_private_field_set(this, _dragTouches, new Map()), _class_private_field_set(this, _onAfterScroll, ()=>{
+            if (this.dragged.length === 0 || _class_private_field_get(this, _lastTouchPosition) === null) {
+                return;
+            }
+            const { clientX, clientY } = _class_private_field_get(this, _lastTouchPosition);
+            _class_private_method_get(this, _extendSelection, extendSelection).call(this, clientX, clientY);
+        });
+    }
+}
+function resetDrag() {
+    this.dragged.splice(0, this.dragged.length);
+    _class_private_field_get(this, _dragTouches).clear();
+    this.touchStartRange = undefined;
+    _class_private_field_set(this, _lastTouchPosition, null);
+    _class_private_field_set(this, _lastTargetCoords, null);
+}
+function getDragTouchPoint(event) {
+    for (const identifier of _class_private_field_get(this, _dragTouches).keys()){
+        const point = getTouchPointById(event, identifier);
+        if (point !== null) {
+            return point;
+        }
+    }
+    return null;
+}
+function extendSelection(clientX, clientY) {
+    const selectedRange = this.hot.getSelectedRangeActive();
+    if (!selectedRange || this.touchStartRange === undefined) {
+        return;
+    }
+    const targetCoords = getCellCoordsFromMousePosition(this.hot, clientX, clientY);
+    // `getCellCoordsFromMousePosition` clamps into the body, so a position over a header already
+    // resolves to a real cell - there is no -1 to normalize. The floor only guards the helper's
+    // empty-grid fallback, where `countCols() - 1` / `countRows() - 1` would be -1.
+    const targetRow = Math.max(targetCoords.row ?? 0, 0);
+    const targetCol = Math.max(targetCoords.col ?? 0, 0);
+    // Compare coordinates rather than the resolved cell element: Walkontable reuses the same `td`
+    // elements across scrolls, so the element under a stationary finger stays identical while the
+    // cell it represents changes on every scroll tick.
+    if (_class_private_field_get(this, _lastTargetCoords)?.row === targetRow && _class_private_field_get(this, _lastTargetCoords)?.col === targetCol) {
+        return;
+    }
+    _class_private_field_set(this, _lastTargetCoords, {
+        row: targetRow,
+        col: targetCol
+    });
+    const target = this.hot._createCellCoords(targetRow, targetCol);
+    // Read before the `setRangeEnd` below, which mutates the range: the direction that matters is
+    // the one the range had on entry.
+    const rangeDirection = selectedRange.getDirection();
+    if (selectedRange.getWidth() === 1 && selectedRange.getHeight() === 1) {
+        this.hot.selection.setRangeEnd(target);
+    }
+    const newRangeCoords = this.getCurrentRangeCoords(selectedRange, target, this.touchStartRange.direction, rangeDirection, this.dragged[0]);
+    if (newRangeCoords.start !== null) {
+        this.hot.selection.setRangeStart(newRangeCoords.start);
+    }
+    if (newRangeCoords.end !== null) {
+        this.hot.selection.setRangeEnd(newRangeCoords.end);
     }
 }

package/plugins/nestedHeaders/nestedHeaders.d.ts

@@ -1,7 +1,7 @@
 import { BasePlugin } from '../base';
 import StateManager from './stateManager';
 import type { HeaderNodeData } from './stateManager/headersTree';
-import type { HeaderVisibility } from './stateManager/utils';
+import type { ColumnDropMode, HeaderVisibility } from './stateManager/utils';
 import GhostTable from './utils/ghostTable';
 /**
  * A single configured nested header. Declares the header label and how it spans and behaves.
@@ -30,6 +30,15 @@ export interface NestedHeaderSettings {
      * See the `CollapsibleColumns` plugin.
      */
     visibleWhen?: HeaderVisibility;
+    /**
+     * Controls what a group does when a column move (with the `ManualColumnMove` plugin) drops a foreign
+     * column - one belonging to another group - into its span. When `'adopt'` (default), the group stays
+     * a single banner and adopts that column as a child. When `'split'`, the group keeps its identity and
+     * renders as several same-label banners around the foreign column (it splits). A group always reclaims
+     * its own columns moved back into its span, regardless of this setting. Set per group; meaningful only
+     * on a header that spans columns.
+     */
+    columnDropMode?: ColumnDropMode;
     [key: string]: unknown;
 }
 /**