gridstack 12.3.3 → 12.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "12.3.3",
+  "version": "12.4.0",
   "license": "MIT",
   "author": "Alain Dumesny <alaind831+github@gmail.com> (https://github.com/adumesny)",
   "contributors": [
@@ -25,10 +25,10 @@
     }
   ],
   "scripts": {
-    "build": "yarn --no-progress && yarn build:ng && grunt && webpack && tsc --stripInternal && yarn doc",
+    "build": "yarn build:ng && grunt && webpack && tsc --project tsconfig.build.json --stripInternal && yarn doc",
     "build:ng": "cd angular && yarn --no-progress && yarn build lib",
     "w": "webpack",
-    "t": "rm -rf dist/* && grunt && tsc --stripInternal",
+    "t": "rm -rf dist/* && grunt && tsc --project tsconfig.build.json --stripInternal",
     "doc": "doctoc ./README.md && doctoc ./doc/CHANGES.md && node scripts/generate-docs.js",
     "doc:main": "node scripts/generate-docs.js --main-only",
     "doc:angular": "node scripts/generate-docs.js --angular-only",
@@ -44,7 +44,7 @@
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:headed": "playwright test --headed",
-    "lint": "tsc --noEmit && eslint src/*.ts",
+    "lint": "tsc --project tsconfig.build.json --noEmit && eslint src/*.ts angular/projects/lib/src/**/*.ts",
     "reset": "rm -rf dist node_modules",
     "prepublishOnly": "yarn build"
   },
@@ -93,7 +93,7 @@
     "grunt-protractor-runner": "^5.0.0",
     "grunt-protractor-webdriver": "^0.2.5",
     "grunt-sass": "3.1.0",
-    "happy-dom": "^15.7.4",
+    "happy-dom": "^20.0.0",
     "jsdom": "^25.0.0",
     "protractor": "^7.0.0",
     "sass": "^1.62.0",

package/dist/dd-base-impl.d.ts

@@ -1,69 +0,0 @@
-/**
- * dd-base-impl.ts 12.3.2
- * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
- */
-/**
- * Type for event callback functions used in drag & drop operations.
- * Can return boolean to indicate if the event should continue propagation.
- */
-export type EventCallback = (event: Event) => boolean | void;
-/**
- * Abstract base class for all drag & drop implementations.
- * Provides common functionality for event handling, enable/disable state,
- * and lifecycle management used by draggable, droppable, and resizable implementations.
- */
-export declare abstract class DDBaseImplement {
-    /**
-     * Returns the current disabled state.
-     * Note: Use enable()/disable() methods to change state as other operations need to happen.
-     */
-    get disabled(): boolean;
-    /**
-     * Register an event callback for the specified event.
-     *
-     * @param event - Event name to listen for
-     * @param callback - Function to call when event occurs
-     */
-    on(event: string, callback: EventCallback): void;
-    /**
-     * Unregister an event callback for the specified event.
-     *
-     * @param event - Event name to stop listening for
-     */
-    off(event: string): void;
-    /**
-     * Enable this drag & drop implementation.
-     * Subclasses should override to perform additional setup.
-     */
-    enable(): void;
-    /**
-     * Disable this drag & drop implementation.
-     * Subclasses should override to perform additional cleanup.
-     */
-    disable(): void;
-    /**
-     * Destroy this drag & drop implementation and clean up resources.
-     * Removes all event handlers and clears internal state.
-     */
-    destroy(): void;
-    /**
-     * Trigger a registered event callback if one exists and the implementation is enabled.
-     *
-     * @param eventName - Name of the event to trigger
-     * @param event - DOM event object to pass to the callback
-     * @returns Result from the callback function, if any
-     */
-    triggerEvent(eventName: string, event: Event): boolean | void;
-}
-/**
- * Interface for HTML elements extended with drag & drop options.
- * Used to associate DD configuration with DOM elements.
- */
-export interface HTMLElementExtendOpt<T> {
-    /** The HTML element being extended */
-    el: HTMLElement;
-    /** The drag & drop options/configuration */
-    option: T;
-    /** Method to update the options and return the DD implementation */
-    updateOption(T: any): DDBaseImplement;
-}

package/dist/dd-base-impl.js

@@ -1,70 +0,0 @@
-/**
- * dd-base-impl.ts 12.3.2
- * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
- */
-/**
- * Abstract base class for all drag & drop implementations.
- * Provides common functionality for event handling, enable/disable state,
- * and lifecycle management used by draggable, droppable, and resizable implementations.
- */
-export class DDBaseImplement {
-    constructor() {
-        /** @internal */
-        this._eventRegister = {};
-    }
-    /**
-     * Returns the current disabled state.
-     * Note: Use enable()/disable() methods to change state as other operations need to happen.
-     */
-    get disabled() { return this._disabled; }
-    /**
-     * Register an event callback for the specified event.
-     *
-     * @param event - Event name to listen for
-     * @param callback - Function to call when event occurs
-     */
-    on(event, callback) {
-        this._eventRegister[event] = callback;
-    }
-    /**
-     * Unregister an event callback for the specified event.
-     *
-     * @param event - Event name to stop listening for
-     */
-    off(event) {
-        delete this._eventRegister[event];
-    }
-    /**
-     * Enable this drag & drop implementation.
-     * Subclasses should override to perform additional setup.
-     */
-    enable() {
-        this._disabled = false;
-    }
-    /**
-     * Disable this drag & drop implementation.
-     * Subclasses should override to perform additional cleanup.
-     */
-    disable() {
-        this._disabled = true;
-    }
-    /**
-     * Destroy this drag & drop implementation and clean up resources.
-     * Removes all event handlers and clears internal state.
-     */
-    destroy() {
-        delete this._eventRegister;
-    }
-    /**
-     * Trigger a registered event callback if one exists and the implementation is enabled.
-     *
-     * @param eventName - Name of the event to trigger
-     * @param event - DOM event object to pass to the callback
-     * @returns Result from the callback function, if any
-     */
-    triggerEvent(eventName, event) {
-        if (!this.disabled && this._eventRegister && this._eventRegister[eventName])
-            return this._eventRegister[eventName](event);
-    }
-}
-//# sourceMappingURL=dd-base-impl.js.map

package/dist/dd-base-impl.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dd-base-impl.js","sourceRoot":"","sources":["../src/dd-base-impl.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAQH;;;;GAIG;AACH,MAAM,OAAgB,eAAe;IAArC;QASE,gBAAgB;QACN,mBAAc,GAEpB,EAAE,CAAC;IAwDT,CAAC;IAnEC;;;OAGG;IACH,IAAW,QAAQ,KAAgB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAS3D;;;;;OAKG;IACI,EAAE,CAAC,KAAa,EAAE,QAAuB;QAC9C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACI,GAAG,CAAC,KAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED;;;OAGG;IACI,MAAM;QACX,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED;;;OAGG;IACI,OAAO;QACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED;;;OAGG;IACI,OAAO;QACZ,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAED;;;;;;OAMG;IACI,YAAY,CAAC,SAAiB,EAAE,KAAY;QACjD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;YACzE,OAAO,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC;IACjD,CAAC;CACF","sourcesContent":["/**\n * dd-base-impl.ts 12.3.2\n * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license\n */\n\n/**\n * Type for event callback functions used in drag & drop operations.\n * Can return boolean to indicate if the event should continue propagation.\n */\nexport type EventCallback = (event: Event) => boolean|void;\n\n/**\n * Abstract base class for all drag & drop implementations.\n * Provides common functionality for event handling, enable/disable state,\n * and lifecycle management used by draggable, droppable, and resizable implementations.\n */\nexport abstract class DDBaseImplement {\n  /**\n   * Returns the current disabled state.\n   * Note: Use enable()/disable() methods to change state as other operations need to happen.\n   */\n  public get disabled(): boolean   { return this._disabled; }\n\n  /** @internal */\n  protected _disabled: boolean; // initial state to differentiate from false\n  /** @internal */\n  protected _eventRegister: {\n    [eventName: string]: EventCallback;\n  } = {};\n\n  /**\n   * Register an event callback for the specified event.\n   * \n   * @param event - Event name to listen for\n   * @param callback - Function to call when event occurs\n   */\n  public on(event: string, callback: EventCallback): void {\n    this._eventRegister[event] = callback;\n  }\n\n  /**\n   * Unregister an event callback for the specified event.\n   * \n   * @param event - Event name to stop listening for\n   */\n  public off(event: string): void {\n    delete this._eventRegister[event];\n  }\n\n  /**\n   * Enable this drag & drop implementation.\n   * Subclasses should override to perform additional setup.\n   */\n  public enable(): void {\n    this._disabled = false;\n  }\n\n  /**\n   * Disable this drag & drop implementation.\n   * Subclasses should override to perform additional cleanup.\n   */\n  public disable(): void {\n    this._disabled = true;\n  }\n\n  /**\n   * Destroy this drag & drop implementation and clean up resources.\n   * Removes all event handlers and clears internal state.\n   */\n  public destroy(): void {\n    delete this._eventRegister;\n  }\n\n  /**\n   * Trigger a registered event callback if one exists and the implementation is enabled.\n   * \n   * @param eventName - Name of the event to trigger\n   * @param event - DOM event object to pass to the callback\n   * @returns Result from the callback function, if any\n   */\n  public triggerEvent(eventName: string, event: Event): boolean|void {\n    if (!this.disabled && this._eventRegister && this._eventRegister[eventName])\n      return this._eventRegister[eventName](event);\n  }\n}\n\n/**\n * Interface for HTML elements extended with drag & drop options.\n * Used to associate DD configuration with DOM elements.\n */\nexport interface HTMLElementExtendOpt<T> {\n  /** The HTML element being extended */\n  el: HTMLElement;\n  /** The drag & drop options/configuration */\n  option: T;\n  /** Method to update the options and return the DD implementation */\n  updateOption(T): DDBaseImplement;\n}\n"]}

package/dist/dd-draggable.d.ts

@@ -1,20 +0,0 @@
-/**
- * dd-draggable.ts 12.3.2
- * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
- */
-import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
-import { GridItemHTMLElement, DDDragOpt } from './types';
-type DDDragEvent = 'drag' | 'dragstart' | 'dragstop';
-export declare class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDragOpt> {
-    el: GridItemHTMLElement;
-    option: DDDragOpt;
-    helper: HTMLElement;
-    constructor(el: GridItemHTMLElement, option?: DDDragOpt);
-    on(event: DDDragEvent, callback: (event: DragEvent) => void): void;
-    off(event: DDDragEvent): void;
-    enable(): void;
-    disable(forDestroy?: boolean): void;
-    destroy(): void;
-    updateOption(opts: DDDragOpt): DDDraggable;
-}
-export {};

package/dist/dd-draggable.js

@@ -1,364 +0,0 @@
-/**
- * dd-draggable.ts 12.3.2
- * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
- */
-import { DDManager } from './dd-manager';
-import { Utils } from './utils';
-import { DDBaseImplement } from './dd-base-impl';
-import { isTouch, touchend, touchmove, touchstart, pointerdown } from './dd-touch';
-// make sure we are not clicking on known object that handles mouseDown
-const skipMouseDown = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
-// let count = 0; // TEST
-class DDDraggable extends DDBaseImplement {
-    constructor(el, option = {}) {
-        super();
-        this.el = el;
-        this.option = option;
-        /** @internal */
-        this.dragTransform = {
-            xScale: 1,
-            yScale: 1,
-            xOffset: 0,
-            yOffset: 0
-        };
-        // get the element that is actually supposed to be dragged by
-        const handleName = option?.handle?.substring(1);
-        const n = el.gridstackNode;
-        this.dragEls = !handleName || el.classList.contains(handleName) ? [el] : (n?.subGrid ? [el.querySelector(option.handle) || el] : Array.from(el.querySelectorAll(option.handle)));
-        if (this.dragEls.length === 0) {
-            this.dragEls = [el];
-        }
-        // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
-        this._mouseDown = this._mouseDown.bind(this);
-        this._mouseMove = this._mouseMove.bind(this);
-        this._mouseUp = this._mouseUp.bind(this);
-        this._keyEvent = this._keyEvent.bind(this);
-        this.enable();
-    }
-    on(event, callback) {
-        super.on(event, callback);
-    }
-    off(event) {
-        super.off(event);
-    }
-    enable() {
-        if (this.disabled === false)
-            return;
-        super.enable();
-        this.dragEls.forEach(dragEl => {
-            dragEl.addEventListener('mousedown', this._mouseDown);
-            if (isTouch) {
-                dragEl.addEventListener('touchstart', touchstart);
-                dragEl.addEventListener('pointerdown', pointerdown);
-                // dragEl.style.touchAction = 'none'; // not needed unlike pointerdown doc comment
-            }
-        });
-        this.el.classList.remove('ui-draggable-disabled');
-    }
-    disable(forDestroy = false) {
-        if (this.disabled === true)
-            return;
-        super.disable();
-        this.dragEls.forEach(dragEl => {
-            dragEl.removeEventListener('mousedown', this._mouseDown);
-            if (isTouch) {
-                dragEl.removeEventListener('touchstart', touchstart);
-                dragEl.removeEventListener('pointerdown', pointerdown);
-            }
-        });
-        if (!forDestroy)
-            this.el.classList.add('ui-draggable-disabled');
-    }
-    destroy() {
-        if (this.dragTimeout)
-            window.clearTimeout(this.dragTimeout);
-        delete this.dragTimeout;
-        if (this.mouseDownEvent)
-            this._mouseUp(this.mouseDownEvent);
-        this.disable(true);
-        delete this.el;
-        delete this.helper;
-        delete this.option;
-        super.destroy();
-    }
-    updateOption(opts) {
-        Object.keys(opts).forEach(key => this.option[key] = opts[key]);
-        return this;
-    }
-    /** @internal call when mouse goes down before a dragstart happens */
-    _mouseDown(e) {
-        // don't let more than one widget handle mouseStart
-        if (DDManager.mouseHandled)
-            return;
-        if (e.button !== 0)
-            return true; // only left click
-        // make sure we are not clicking on known object that handles mouseDown, or ones supplied by the user
-        if (!this.dragEls.find(el => el === e.target) && e.target.closest(skipMouseDown))
-            return true;
-        if (this.option.cancel) {
-            if (e.target.closest(this.option.cancel))
-                return true;
-        }
-        this.mouseDownEvent = e;
-        delete this.dragging;
-        delete DDManager.dragElement;
-        delete DDManager.dropElement;
-        // document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack
-        document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true }); // true=capture, not bubble
-        document.addEventListener('mouseup', this._mouseUp, true);
-        if (isTouch) {
-            e.currentTarget.addEventListener('touchmove', touchmove);
-            e.currentTarget.addEventListener('touchend', touchend);
-        }
-        e.preventDefault();
-        // preventDefault() prevents blur event which occurs just after mousedown event.
-        // if an editable content has focus, then blur must be call
-        if (document.activeElement)
-            document.activeElement.blur();
-        DDManager.mouseHandled = true;
-        return true;
-    }
-    /** @internal method to call actual drag event */
-    _callDrag(e) {
-        if (!this.dragging)
-            return;
-        const ev = Utils.initEvent(e, { target: this.el, type: 'drag' });
-        if (this.option.drag) {
-            this.option.drag(ev, this.ui());
-        }
-        this.triggerEvent('drag', ev);
-    }
-    /** @internal called when the main page (after successful mousedown) receives a move event to drag the item around the screen */
-    _mouseMove(e) {
-        // console.log(`${count++} move ${e.x},${e.y}`)
-        const s = this.mouseDownEvent;
-        this.lastDrag = e;
-        if (this.dragging) {
-            this._dragFollow(e);
-            // delay actual grid handling drag until we pause for a while if set
-            if (DDManager.pauseDrag) {
-                const pause = Number.isInteger(DDManager.pauseDrag) ? DDManager.pauseDrag : 100;
-                if (this.dragTimeout)
-                    window.clearTimeout(this.dragTimeout);
-                this.dragTimeout = window.setTimeout(() => this._callDrag(e), pause);
-            }
-            else {
-                this._callDrag(e);
-            }
-        }
-        else if (Math.abs(e.x - s.x) + Math.abs(e.y - s.y) > 3) {
-            /**
-             * don't start unless we've moved at least 3 pixels
-             */
-            this.dragging = true;
-            DDManager.dragElement = this;
-            // if we're dragging an actual grid item, set the current drop as the grid (to detect enter/leave)
-            const grid = this.el.gridstackNode?.grid;
-            if (grid) {
-                DDManager.dropElement = grid.el.ddElement.ddDroppable;
-            }
-            else {
-                delete DDManager.dropElement;
-            }
-            this.helper = this._createHelper();
-            this._setupHelperContainmentStyle();
-            this.dragTransform = Utils.getValuesFromTransformedElement(this.helperContainment);
-            this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);
-            this._setupHelperStyle(e);
-            const ev = Utils.initEvent(e, { target: this.el, type: 'dragstart' });
-            if (this.option.start) {
-                this.option.start(ev, this.ui());
-            }
-            this.triggerEvent('dragstart', ev);
-            // now track keyboard events to cancel or rotate
-            document.addEventListener('keydown', this._keyEvent);
-        }
-        // e.preventDefault(); // passive = true. OLD: was needed otherwise we get text sweep text selection as we drag around
-        return true;
-    }
-    /** @internal call when the mouse gets released to drop the item at current location */
-    _mouseUp(e) {
-        document.removeEventListener('mousemove', this._mouseMove, true);
-        document.removeEventListener('mouseup', this._mouseUp, true);
-        if (isTouch && e.currentTarget) { // destroy() during nested grid call us again wit fake _mouseUp
-            e.currentTarget.removeEventListener('touchmove', touchmove, true);
-            e.currentTarget.removeEventListener('touchend', touchend, true);
-        }
-        if (this.dragging) {
-            delete this.dragging;
-            delete this.el.gridstackNode?._origRotate;
-            document.removeEventListener('keydown', this._keyEvent);
-            // reset the drop target if dragging over ourself (already parented, just moving during stop callback below)
-            if (DDManager.dropElement?.el === this.el.parentElement) {
-                delete DDManager.dropElement;
-            }
-            this.helperContainment.style.position = this.parentOriginStylePosition || null;
-            if (this.helper !== this.el)
-                this.helper.remove(); // hide now
-            this._removeHelperStyle();
-            const ev = Utils.initEvent(e, { target: this.el, type: 'dragstop' });
-            if (this.option.stop) {
-                this.option.stop(ev); // NOTE: destroy() will be called when removing item, so expect NULL ptr after!
-            }
-            this.triggerEvent('dragstop', ev);
-            // call the droppable method to receive the item
-            if (DDManager.dropElement) {
-                DDManager.dropElement.drop(e);
-            }
-        }
-        delete this.helper;
-        delete this.mouseDownEvent;
-        delete DDManager.dragElement;
-        delete DDManager.dropElement;
-        delete DDManager.mouseHandled;
-        e.preventDefault();
-    }
-    /** @internal call when keys are being pressed - use Esc to cancel, R to rotate */
-    _keyEvent(e) {
-        const n = this.el.gridstackNode;
-        const grid = n?.grid || DDManager.dropElement?.el?.gridstack;
-        if (e.key === 'Escape') {
-            if (n && n._origRotate) {
-                n._orig = n._origRotate;
-                delete n._origRotate;
-            }
-            grid?.cancelDrag();
-            this._mouseUp(this.mouseDownEvent);
-        }
-        else if (n && grid && (e.key === 'r' || e.key === 'R')) {
-            if (!Utils.canBeRotated(n))
-                return;
-            n._origRotate = n._origRotate || { ...n._orig }; // store the real orig size in case we Esc after doing rotation
-            delete n._moving; // force rotate to happen (move waits for >50% coverage otherwise)
-            grid.setAnimation(false) // immediate rotate so _getDragOffset() gets the right dom size below
-                .rotate(n.el, { top: -this.dragOffset.offsetTop, left: -this.dragOffset.offsetLeft })
-                .setAnimation();
-            n._moving = true;
-            this.dragOffset = this._getDragOffset(this.lastDrag, n.el, this.helperContainment);
-            this.helper.style.width = this.dragOffset.width + 'px';
-            this.helper.style.height = this.dragOffset.height + 'px';
-            Utils.swap(n._orig, 'w', 'h');
-            delete n._rect;
-            this._mouseMove(this.lastDrag);
-        }
-    }
-    /** @internal create a clone copy (or user defined method) of the original drag item if set */
-    _createHelper() {
-        let helper = this.el;
-        if (typeof this.option.helper === 'function') {
-            helper = this.option.helper(this.el);
-        }
-        else if (this.option.helper === 'clone') {
-            helper = Utils.cloneNode(this.el);
-        }
-        if (!helper.parentElement) {
-            Utils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentElement : this.option.appendTo);
-        }
-        this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]);
-        return helper;
-    }
-    /** @internal set the fix position of the dragged item */
-    _setupHelperStyle(e) {
-        this.helper.classList.add('ui-draggable-dragging');
-        this.el.gridstackNode?.grid?.el.classList.add('grid-stack-dragging');
-        // TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593
-        const style = this.helper.style;
-        style.pointerEvents = 'none'; // needed for over items to get enter/leave
-        // style.cursor = 'move'; //  TODO: can't set with pointerEvents=none ! (no longer in CSS either as no-op)
-        style.width = this.dragOffset.width + 'px';
-        style.height = this.dragOffset.height + 'px';
-        style.willChange = 'left, top';
-        style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'
-        this._dragFollow(e); // now position it
-        style.transition = 'none'; // show up instantly
-        setTimeout(() => {
-            if (this.helper) {
-                style.transition = null; // recover animation
-            }
-        }, 0);
-        return this;
-    }
-    /** @internal restore back the original style before dragging */
-    _removeHelperStyle() {
-        this.helper.classList.remove('ui-draggable-dragging');
-        this.el.gridstackNode?.grid?.el.classList.remove('grid-stack-dragging');
-        const node = this.helper?.gridstackNode;
-        // don't bother restoring styles if we're gonna remove anyway...
-        if (!node?._isAboutToRemove && this.dragElementOriginStyle) {
-            const helper = this.helper;
-            // don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed'.
-            // TODO: this also removes resizing animation which doesn't have this issue, but others.
-            // Ideally both would animate ('move' would immediately restore 'absolute' and adjust coordinate to match,
-            // then trigger a delay (repaint) to restore to final dest with animate) but then we need to make sure 'resizestop'
-            // is called AFTER 'transitionend' event is received (see https://github.com/gridstack/gridstack.js/issues/2033)
-            const transition = this.dragElementOriginStyle['transition'] || null;
-            helper.style.transition = this.dragElementOriginStyle['transition'] = 'none'; // can't be NULL #1973
-            DDDraggable.originStyleProp.forEach(prop => helper.style[prop] = this.dragElementOriginStyle[prop] || null);
-            setTimeout(() => helper.style.transition = transition, 50); // recover animation from saved vars after a pause (0 isn't enough #1973)
-        }
-        delete this.dragElementOriginStyle;
-        return this;
-    }
-    /** @internal updates the top/left position to follow the mouse */
-    _dragFollow(e) {
-        const containmentRect = { left: 0, top: 0 };
-        // if (this.helper.style.position === 'absolute') { // we use 'fixed'
-        //   const { left, top } = this.helperContainment.getBoundingClientRect();
-        //   containmentRect = { left, top };
-        // }
-        const style = this.helper.style;
-        const offset = this.dragOffset;
-        style.left = (e.clientX + offset.offsetLeft - containmentRect.left) * this.dragTransform.xScale + 'px';
-        style.top = (e.clientY + offset.offsetTop - containmentRect.top) * this.dragTransform.yScale + 'px';
-    }
-    /** @internal */
-    _setupHelperContainmentStyle() {
-        this.helperContainment = this.helper.parentElement;
-        if (this.helper.style.position !== 'fixed') {
-            this.parentOriginStylePosition = this.helperContainment.style.position;
-            if (getComputedStyle(this.helperContainment).position.match(/static/)) {
-                this.helperContainment.style.position = 'relative';
-            }
-        }
-        return this;
-    }
-    /** @internal */
-    _getDragOffset(event, el, parent) {
-        // in case ancestor has transform/perspective css properties that change the viewpoint
-        let xformOffsetX = 0;
-        let xformOffsetY = 0;
-        if (parent) {
-            xformOffsetX = this.dragTransform.xOffset;
-            xformOffsetY = this.dragTransform.yOffset;
-        }
-        const targetOffset = el.getBoundingClientRect();
-        return {
-            left: targetOffset.left,
-            top: targetOffset.top,
-            offsetLeft: -event.clientX + targetOffset.left - xformOffsetX,
-            offsetTop: -event.clientY + targetOffset.top - xformOffsetY,
-            width: targetOffset.width * this.dragTransform.xScale,
-            height: targetOffset.height * this.dragTransform.yScale
-        };
-    }
-    /** @internal TODO: set to public as called by DDDroppable! */
-    ui() {
-        const containmentEl = this.el.parentElement;
-        const containmentRect = containmentEl.getBoundingClientRect();
-        const offset = this.helper.getBoundingClientRect();
-        return {
-            position: {
-                top: (offset.top - containmentRect.top) * this.dragTransform.yScale,
-                left: (offset.left - containmentRect.left) * this.dragTransform.xScale
-            }
-            /* not used by GridStack for now...
-            helper: [this.helper], //The object arr representing the helper that's being dragged.
-            offset: { top: offset.top, left: offset.left } // Current offset position of the helper as { top, left } object.
-            */
-        };
-    }
-}
-/** @internal properties we change during dragging, and restore back */
-DDDraggable.originStyleProp = ['width', 'height', 'transform', 'transform-origin', 'transition', 'pointerEvents', 'position', 'left', 'top', 'minWidth', 'willChange'];
-export { DDDraggable };
-//# sourceMappingURL=dd-draggable.js.map

package/dist/dd-draggable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dd-draggable.js","sourceRoot":"","sources":["../src/dd-draggable.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * dd-draggable.ts 12.3.2\n * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license\n */\n\nimport { DDManager } from './dd-manager';\nimport { DragTransform, Utils } from './utils';\nimport { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';\nimport { GridItemHTMLElement, DDUIData, GridStackNode, GridStackPosition, DDDragOpt } from './types';\nimport { DDElementHost } from './dd-element';\nimport { isTouch, touchend, touchmove, touchstart, pointerdown } from './dd-touch';\nimport { GridHTMLElement } from './gridstack';\n\ninterface DragOffset {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n  offsetLeft: number;\n  offsetTop: number;\n}\n\ninterface GridStackNodeRotate extends GridStackNode {\n  _origRotate?: GridStackPosition;\n}\n\ntype DDDragEvent = 'drag' | 'dragstart' | 'dragstop';\n\n// make sure we are not clicking on known object that handles mouseDown\nconst skipMouseDown = 'input,textarea,button,select,option,[contenteditable=\"true\"],.ui-resizable-handle';\n\n// let count = 0; // TEST\n\nexport class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDragOpt> {\n  public helper: HTMLElement; // used by GridStackDDNative\n\n  /** @internal */\n  protected mouseDownEvent: MouseEvent;\n  /** @internal */\n  protected dragOffset: DragOffset;\n  /** @internal */\n  protected dragElementOriginStyle: Array<string>;\n  /** @internal */\n  protected dragEls: HTMLElement[];\n  /** @internal true while we are dragging an item around */\n  protected dragging: boolean;\n  /** @internal last drag event */\n  protected lastDrag: DragEvent;\n  /** @internal */\n  protected parentOriginStylePosition: string;\n  /** @internal */\n  protected helperContainment: HTMLElement;\n  /** @internal properties we change during dragging, and restore back */\n  protected static originStyleProp = ['width', 'height', 'transform', 'transform-origin', 'transition', 'pointerEvents', 'position', 'left', 'top', 'minWidth', 'willChange'];\n  /** @internal pause before we call the actual drag hit collision code */\n  protected dragTimeout: number;\n  /** @internal */\n  protected dragTransform: DragTransform = {\n    xScale: 1,\n    yScale: 1,\n    xOffset: 0,\n    yOffset: 0\n  };\n\n  constructor(public el: GridItemHTMLElement, public option: DDDragOpt = {}) {\n    super();\n\n    // get the element that is actually supposed to be dragged by\n    const handleName = option?.handle?.substring(1);\n    const n = el.gridstackNode;\n    this.dragEls = !handleName || el.classList.contains(handleName) ? [el] : (n?.subGrid ? [el.querySelector(option.handle) || el] : Array.from(el.querySelectorAll(option.handle)));\n    if (this.dragEls.length === 0) {\n      this.dragEls = [el];\n    }\n    // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)\n    this._mouseDown = this._mouseDown.bind(this);\n    this._mouseMove = this._mouseMove.bind(this);\n    this._mouseUp = this._mouseUp.bind(this);\n    this._keyEvent = this._keyEvent.bind(this);\n    this.enable();\n  }\n\n  public on(event: DDDragEvent, callback: (event: DragEvent) => void): void {\n    super.on(event, callback);\n  }\n\n  public off(event: DDDragEvent): void {\n    super.off(event);\n  }\n\n  public enable(): void {\n    if (this.disabled === false) return;\n    super.enable();\n    this.dragEls.forEach(dragEl => {\n      dragEl.addEventListener('mousedown', this._mouseDown);\n      if (isTouch) {\n        dragEl.addEventListener('touchstart', touchstart);\n        dragEl.addEventListener('pointerdown', pointerdown);\n        // dragEl.style.touchAction = 'none'; // not needed unlike pointerdown doc comment\n      }\n    });\n    this.el.classList.remove('ui-draggable-disabled');\n  }\n\n  public disable(forDestroy = false): void {\n    if (this.disabled === true) return;\n    super.disable();\n    this.dragEls.forEach(dragEl => {\n      dragEl.removeEventListener('mousedown', this._mouseDown);\n      if (isTouch) {\n        dragEl.removeEventListener('touchstart', touchstart);\n        dragEl.removeEventListener('pointerdown', pointerdown);\n      }\n    });\n    if (!forDestroy) this.el.classList.add('ui-draggable-disabled');\n  }\n\n  public destroy(): void {\n    if (this.dragTimeout) window.clearTimeout(this.dragTimeout);\n    delete this.dragTimeout;\n    if (this.mouseDownEvent) this._mouseUp(this.mouseDownEvent);\n    this.disable(true);\n    delete this.el;\n    delete this.helper;\n    delete this.option;\n    super.destroy();\n  }\n\n  public updateOption(opts: DDDragOpt): DDDraggable {\n    Object.keys(opts).forEach(key => this.option[key] = opts[key]);\n    return this;\n  }\n\n  /** @internal call when mouse goes down before a dragstart happens */\n  protected _mouseDown(e: MouseEvent): boolean {\n    // don't let more than one widget handle mouseStart\n    if (DDManager.mouseHandled) return;\n    if (e.button !== 0) return true; // only left click\n\n    // make sure we are not clicking on known object that handles mouseDown, or ones supplied by the user\n    if (!this.dragEls.find(el => el === e.target) && (e.target as HTMLElement).closest(skipMouseDown)) return true;\n    if (this.option.cancel) {\n      if ((e.target as HTMLElement).closest(this.option.cancel)) return true;\n    }\n\n    this.mouseDownEvent = e;\n    delete this.dragging;\n    delete DDManager.dragElement;\n    delete DDManager.dropElement;\n    // document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack\n    document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true }); // true=capture, not bubble\n    document.addEventListener('mouseup', this._mouseUp, true);\n    if (isTouch) {\n      e.currentTarget.addEventListener('touchmove', touchmove);\n      e.currentTarget.addEventListener('touchend', touchend);\n    }\n\n    e.preventDefault();\n    // preventDefault() prevents blur event which occurs just after mousedown event.\n    // if an editable content has focus, then blur must be call\n    if (document.activeElement) (document.activeElement as HTMLElement).blur();\n\n    DDManager.mouseHandled = true;\n    return true;\n  }\n\n  /** @internal method to call actual drag event */\n  protected _callDrag(e: DragEvent): void {\n    if (!this.dragging) return;\n    const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'drag' });\n    if (this.option.drag) {\n      this.option.drag(ev, this.ui());\n    }\n    this.triggerEvent('drag', ev);\n  }\n\n  /** @internal called when the main page (after successful mousedown) receives a move event to drag the item around the screen */\n  protected _mouseMove(e: DragEvent): boolean {\n    // console.log(`${count++} move ${e.x},${e.y}`)\n    const s = this.mouseDownEvent;\n    this.lastDrag = e;\n\n    if (this.dragging) {\n      this._dragFollow(e);\n      // delay actual grid handling drag until we pause for a while if set\n      if (DDManager.pauseDrag) {\n        const pause = Number.isInteger(DDManager.pauseDrag) ? DDManager.pauseDrag as number : 100;\n        if (this.dragTimeout) window.clearTimeout(this.dragTimeout);\n        this.dragTimeout = window.setTimeout(() => this._callDrag(e), pause);\n      } else {\n        this._callDrag(e);\n      }\n    } else if (Math.abs(e.x - s.x) + Math.abs(e.y - s.y) > 3) {\n      /**\n       * don't start unless we've moved at least 3 pixels\n       */\n      this.dragging = true;\n      DDManager.dragElement = this;\n      // if we're dragging an actual grid item, set the current drop as the grid (to detect enter/leave)\n      const grid = this.el.gridstackNode?.grid;\n      if (grid) {\n        DDManager.dropElement = (grid.el as DDElementHost).ddElement.ddDroppable;\n      } else {\n        delete DDManager.dropElement;\n      }\n      this.helper = this._createHelper();\n      this._setupHelperContainmentStyle();\n      this.dragTransform = Utils.getValuesFromTransformedElement(this.helperContainment);\n      this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);\n      this._setupHelperStyle(e);\n\n      const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dragstart' });\n      if (this.option.start) {\n        this.option.start(ev, this.ui());\n      }\n      this.triggerEvent('dragstart', ev);\n      // now track keyboard events to cancel or rotate\n      document.addEventListener('keydown', this._keyEvent);\n    }\n    // e.preventDefault(); // passive = true. OLD: was needed otherwise we get text sweep text selection as we drag around\n    return true;\n  }\n\n  /** @internal call when the mouse gets released to drop the item at current location */\n  protected _mouseUp(e: MouseEvent): void {\n    document.removeEventListener('mousemove', this._mouseMove, true);\n    document.removeEventListener('mouseup', this._mouseUp, true);\n    if (isTouch && e.currentTarget) { // destroy() during nested grid call us again wit fake _mouseUp\n      e.currentTarget.removeEventListener('touchmove', touchmove, true);\n      e.currentTarget.removeEventListener('touchend', touchend, true);\n    }\n    if (this.dragging) {\n      delete this.dragging;\n      delete (this.el.gridstackNode as GridStackNodeRotate)?._origRotate;\n      document.removeEventListener('keydown', this._keyEvent);\n\n      // reset the drop target if dragging over ourself (already parented, just moving during stop callback below)\n      if (DDManager.dropElement?.el === this.el.parentElement) {\n        delete DDManager.dropElement;\n      }\n\n      this.helperContainment.style.position = this.parentOriginStylePosition || null;\n      if (this.helper !== this.el) this.helper.remove(); // hide now\n      this._removeHelperStyle();\n\n      const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dragstop' });\n      if (this.option.stop) {\n        this.option.stop(ev); // NOTE: destroy() will be called when removing item, so expect NULL ptr after!\n      }\n      this.triggerEvent('dragstop', ev);\n\n      // call the droppable method to receive the item\n      if (DDManager.dropElement) {\n        DDManager.dropElement.drop(e);\n      }\n    }\n    delete this.helper;\n    delete this.mouseDownEvent;\n    delete DDManager.dragElement;\n    delete DDManager.dropElement;\n    delete DDManager.mouseHandled;\n    e.preventDefault();\n  }\n\n  /** @internal call when keys are being pressed - use Esc to cancel, R to rotate */\n  protected _keyEvent(e: KeyboardEvent): void {\n    const n = this.el.gridstackNode as GridStackNodeRotate;\n    const grid = n?.grid || (DDManager.dropElement?.el as GridHTMLElement)?.gridstack;\n\n    if (e.key === 'Escape') {\n      if (n && n._origRotate) {\n        n._orig = n._origRotate;\n        delete n._origRotate;\n      }\n      grid?.cancelDrag();\n      this._mouseUp(this.mouseDownEvent);\n    } else if (n && grid && (e.key === 'r' || e.key === 'R')) {\n      if (!Utils.canBeRotated(n)) return;\n      n._origRotate = n._origRotate || { ...n._orig }; // store the real orig size in case we Esc after doing rotation\n      delete n._moving; // force rotate to happen (move waits for >50% coverage otherwise)\n      grid.setAnimation(false) // immediate rotate so _getDragOffset() gets the right dom size below\n        .rotate(n.el, { top: -this.dragOffset.offsetTop, left: -this.dragOffset.offsetLeft })\n        .setAnimation();\n      n._moving = true;\n      this.dragOffset = this._getDragOffset(this.lastDrag, n.el, this.helperContainment);\n      this.helper.style.width = this.dragOffset.width + 'px';\n      this.helper.style.height = this.dragOffset.height + 'px';\n      Utils.swap(n._orig, 'w', 'h');\n      delete n._rect;\n      this._mouseMove(this.lastDrag);\n    }\n  }\n\n  /** @internal create a clone copy (or user defined method) of the original drag item if set */\n  protected _createHelper(): HTMLElement {\n    let helper = this.el;\n    if (typeof this.option.helper === 'function') {\n      helper = this.option.helper(this.el);\n    } else if (this.option.helper === 'clone') {\n      helper = Utils.cloneNode(this.el);\n    }\n    if (!helper.parentElement) {\n      Utils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentElement : this.option.appendTo);\n    }\n    this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]);\n    return helper;\n  }\n\n  /** @internal set the fix position of the dragged item */\n  protected _setupHelperStyle(e: DragEvent): DDDraggable {\n    this.helper.classList.add('ui-draggable-dragging');\n    this.el.gridstackNode?.grid?.el.classList.add('grid-stack-dragging');\n    // TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593\n    const style = this.helper.style;\n    style.pointerEvents = 'none'; // needed for over items to get enter/leave\n    // style.cursor = 'move'; //  TODO: can't set with pointerEvents=none ! (no longer in CSS either as no-op)\n    style.width = this.dragOffset.width + 'px';\n    style.height = this.dragOffset.height + 'px';\n    style.willChange = 'left, top';\n    style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'\n    this._dragFollow(e); // now position it\n    style.transition = 'none'; // show up instantly\n    setTimeout(() => {\n      if (this.helper) {\n        style.transition = null; // recover animation\n      }\n    }, 0);\n    return this;\n  }\n\n  /** @internal restore back the original style before dragging */\n  protected _removeHelperStyle(): DDDraggable {\n    this.helper.classList.remove('ui-draggable-dragging');\n    this.el.gridstackNode?.grid?.el.classList.remove('grid-stack-dragging');\n    const node = (this.helper as GridItemHTMLElement)?.gridstackNode;\n    // don't bother restoring styles if we're gonna remove anyway...\n    if (!node?._isAboutToRemove && this.dragElementOriginStyle) {\n      const helper = this.helper;\n      // don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed'.\n      // TODO: this also removes resizing animation which doesn't have this issue, but others.\n      // Ideally both would animate ('move' would immediately restore 'absolute' and adjust coordinate to match,\n      // then trigger a delay (repaint) to restore to final dest with animate) but then we need to make sure 'resizestop'\n      // is called AFTER 'transitionend' event is received (see https://github.com/gridstack/gridstack.js/issues/2033)\n      const transition = this.dragElementOriginStyle['transition'] || null;\n      helper.style.transition = this.dragElementOriginStyle['transition'] = 'none'; // can't be NULL #1973\n      DDDraggable.originStyleProp.forEach(prop => helper.style[prop] = this.dragElementOriginStyle[prop] || null);\n      setTimeout(() => helper.style.transition = transition, 50); // recover animation from saved vars after a pause (0 isn't enough #1973)\n    }\n    delete this.dragElementOriginStyle;\n    return this;\n  }\n\n  /** @internal updates the top/left position to follow the mouse */\n  protected _dragFollow(e: DragEvent): void {\n    const containmentRect = { left: 0, top: 0 };\n    // if (this.helper.style.position === 'absolute') { // we use 'fixed'\n    //   const { left, top } = this.helperContainment.getBoundingClientRect();\n    //   containmentRect = { left, top };\n    // }\n    const style = this.helper.style;\n    const offset = this.dragOffset;\n    style.left = (e.clientX + offset.offsetLeft - containmentRect.left) * this.dragTransform.xScale + 'px';\n    style.top = (e.clientY + offset.offsetTop - containmentRect.top) * this.dragTransform.yScale + 'px';\n  }\n\n  /** @internal */\n  protected _setupHelperContainmentStyle(): DDDraggable {\n    this.helperContainment = this.helper.parentElement;\n    if (this.helper.style.position !== 'fixed') {\n      this.parentOriginStylePosition = this.helperContainment.style.position;\n      if (getComputedStyle(this.helperContainment).position.match(/static/)) {\n        this.helperContainment.style.position = 'relative';\n      }\n    }\n    return this;\n  }\n\n  /** @internal */\n  protected _getDragOffset(event: DragEvent, el: HTMLElement, parent: HTMLElement): DragOffset {\n\n    // in case ancestor has transform/perspective css properties that change the viewpoint\n    let xformOffsetX = 0;\n    let xformOffsetY = 0;\n    if (parent) {\n      xformOffsetX = this.dragTransform.xOffset;\n      xformOffsetY = this.dragTransform.yOffset;\n    }\n\n    const targetOffset = el.getBoundingClientRect();\n    return {\n      left: targetOffset.left,\n      top: targetOffset.top,\n      offsetLeft: - event.clientX + targetOffset.left - xformOffsetX,\n      offsetTop: - event.clientY + targetOffset.top - xformOffsetY,\n      width: targetOffset.width * this.dragTransform.xScale,\n      height: targetOffset.height * this.dragTransform.yScale\n    };\n  }\n\n  /** @internal TODO: set to public as called by DDDroppable! */\n  public ui(): DDUIData {\n    const containmentEl = this.el.parentElement;\n    const containmentRect = containmentEl.getBoundingClientRect();\n    const offset = this.helper.getBoundingClientRect();\n    return {\n      position: { //Current CSS position of the helper as { top, left } object\n        top: (offset.top - containmentRect.top) * this.dragTransform.yScale,\n        left: (offset.left - containmentRect.left) * this.dragTransform.xScale\n      }\n      /* not used by GridStack for now...\n      helper: [this.helper], //The object arr representing the helper that's being dragged.\n      offset: { top: offset.top, left: offset.left } // Current offset position of the helper as { top, left } object.\n      */\n    };\n  }\n}\n"]}