gridstack 10.3.1 → 11.0.1

package/dist/angular/src/gridstack.component.ts

@@ -1,12 +1,11 @@
 /**
- * gridstack.component.ts 10.3.1
- * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ * gridstack.component.ts 11.0.1
+ * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
  */
 
 import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input,
   OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
 import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
 
 import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
@@ -22,8 +21,12 @@ export type NgCompInputs = {[key: string]: any};
 
 /** extends to store Ng Component selector, instead/inAddition to content */
 export interface NgGridStackWidget extends GridStackWidget {
-  selector?: string; // component type to create as content
-  input?: NgCompInputs; // serialized data for the component input fields
+  /** Angular tag selector for this component to create at runtime */
+  selector?: string;
+  /** serialized data for the component input fields */
+  input?: NgCompInputs;
+  /** nested grid options */
+  subGridOpts?: NgGridStackOptions;
 }
 export interface NgGridStackNode extends GridStackNode {
   selector?: string; // component type to create as content
@@ -117,15 +120,15 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
     return reflectComponentType(type)!.selector;
   }
 
-  private _options?: GridStackOptions;
-  private _grid?: GridStack;
-  private loaded?: boolean;
-  private ngUnsubscribe: Subject<void> = new Subject();
+  protected _options?: GridStackOptions;
+  protected _grid?: GridStack;
+  protected _sub: Subscription | undefined;
+  protected loaded?: boolean;
 
   constructor(
-    // private readonly zone: NgZone,
-    // private readonly cd: ChangeDetectorRef,
-    private readonly elementRef: ElementRef<GridCompHTMLElement>,
+    // protected readonly zone: NgZone,
+    // protected readonly cd: ChangeDetectorRef,
+    protected readonly elementRef: ElementRef<GridCompHTMLElement>,
   ) {
     this.el._gridComp = this;
   }
@@ -142,21 +145,20 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   /** wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first) */
   public ngAfterContentInit(): void {
     // track whenever the children list changes and update the layout...
-    this.gridstackItems?.changes
-      .pipe(takeUntil(this.ngUnsubscribe))
-      .subscribe(() => this.updateAll());
+    this._sub = this.gridstackItems?.changes.subscribe(() => this.updateAll());
     // ...and do this once at least unless we loaded children already
     if (!this.loaded) this.updateAll();
     this.hookEvents(this.grid);
   }
 
   public ngOnDestroy(): void {
-    delete this.ref;
-    this.ngUnsubscribe.next();
-    this.ngUnsubscribe.complete();
-    this.grid?.destroy();
+    this.unhookEvents(this._grid);
+    this._sub?.unsubscribe();
+    this._grid?.destroy();
     delete this._grid;
     delete this.el._gridComp;
+    delete this.container;
+    delete this.ref;
   }
 
   /**
@@ -183,46 +185,55 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   }
 
   /** get all known events as easy to use Outputs for convenience */
-  private hookEvents(grid?: GridStack) {
+  protected hookEvents(grid?: GridStack) {
     if (!grid) return;
     grid
-    .on('added', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.addedCB.emit({event, nodes}); })
-    .on('change', (event: Event, nodes: GridStackNode[]) => this.changeCB.emit({event, nodes}))
-    .on('disable', (event: Event) => this.disableCB.emit({event}))
-    .on('drag', (event: Event, el: GridItemHTMLElement) => this.dragCB.emit({event, el}))
-    .on('dragstart', (event: Event, el: GridItemHTMLElement) => this.dragStartCB.emit({event, el}))
-    .on('dragstop', (event: Event, el: GridItemHTMLElement) => this.dragStopCB.emit({event, el}))
-    .on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.droppedCB.emit({event, previousNode, newNode}))
-    .on('enable', (event: Event) => this.enableCB.emit({event}))
-    .on('removed', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.removedCB.emit({event, nodes}); })
-    .on('resize', (event: Event, el: GridItemHTMLElement) => this.resizeCB.emit({event, el}))
-    .on('resizestart', (event: Event, el: GridItemHTMLElement) => this.resizeStartCB.emit({event, el}))
-    .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.resizeStopCB.emit({event, el}))
+      .on('added', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.addedCB.emit({event, nodes}); })
+      .on('change', (event: Event, nodes: GridStackNode[]) => this.changeCB.emit({event, nodes}))
+      .on('disable', (event: Event) => this.disableCB.emit({event}))
+      .on('drag', (event: Event, el: GridItemHTMLElement) => this.dragCB.emit({event, el}))
+      .on('dragstart', (event: Event, el: GridItemHTMLElement) => this.dragStartCB.emit({event, el}))
+      .on('dragstop', (event: Event, el: GridItemHTMLElement) => this.dragStopCB.emit({event, el}))
+      .on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.droppedCB.emit({event, previousNode, newNode}))
+      .on('enable', (event: Event) => this.enableCB.emit({event}))
+      .on('removed', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.removedCB.emit({event, nodes}); })
+      .on('resize', (event: Event, el: GridItemHTMLElement) => this.resizeCB.emit({event, el}))
+      .on('resizestart', (event: Event, el: GridItemHTMLElement) => this.resizeStartCB.emit({event, el}))
+      .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.resizeStopCB.emit({event, el}))
+  }
+
+  protected unhookEvents(grid?: GridStack) {
+    if (!grid) return;
+    grid.off('added change disable drag dragstart dragstop dropped enable removed resize resizestart resizestop');
   }
 }
 
 /**
  * can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip)
  **/
-export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w: NgGridStackWidget | GridStackNode, add: boolean, isGrid: boolean): HTMLElement | undefined {
+export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, n: NgGridStackNode, add: boolean, isGrid: boolean): HTMLElement | undefined {
   if (add) {
     //
     // create the component dynamically - see https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
     //
     if (!host) return;
     if (isGrid) {
-      const container = (host.parentElement as GridItemCompHTMLElement)?._gridItemComp?.container;
       // TODO: figure out how to create ng component inside regular Div. need to access app injectors...
       // if (!container) {
       //   const hostElement: Element = host;
       //   const environmentInjector: EnvironmentInjector;
       //   grid = createComponent(GridstackComponent, {environmentInjector, hostElement})?.instance;
       // }
+
+      const gridItemComp = (host.parentElement as GridItemCompHTMLElement)?._gridItemComp;
+      if (!gridItemComp) return;
+      // check if gridItem has a child component with 'container' exposed to create under..
+      const container = (gridItemComp.childWidget as any)?.container || gridItemComp.container;
       const gridRef = container?.createComponent(GridstackComponent);
       const grid = gridRef?.instance;
       if (!grid) return;
       grid.ref = gridRef;
-      grid.options = w as GridStackOptions;
+      grid.options = n;
       return grid.el;
     } else {
       const gridComp = (host as GridCompHTMLElement)._gridComp;
@@ -231,18 +242,31 @@ export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w:
       if (!gridItem) return;
       gridItem.ref = gridItemRef
 
-      // IFF we're not a subGrid, define what type of component to create as child, OR you can do it GridstackItemComponent template, but this is more generic
-      if (!w.subGridOpts) {
-        const selector = (w as NgGridStackWidget).selector;
-        const type = selector ? GridstackComponent.selectorToType[selector] : undefined;
-        if (type) {
+      // define what type of component to create as child, OR you can do it GridstackItemComponent template, but this is more generic
+      const selector = n.selector;
+      const type = selector ? GridstackComponent.selectorToType[selector] : undefined;
+      if (type) {
+        // shared code to create our selector component
+        const createComp = () => {
           const childWidget = gridItem.container?.createComponent(type)?.instance as BaseWidget;
           // if proper BaseWidget subclass, save it and load additional data
           if (childWidget && typeof childWidget.serialize === 'function' && typeof childWidget.deserialize === 'function') {
             gridItem.childWidget = childWidget;
-            childWidget.deserialize(w);
+            childWidget.deserialize(n);
           }
         }
+
+        const lazyLoad = n.lazyLoad || n.grid?.opts?.lazyLoad && n.lazyLoad !== false;
+        if (lazyLoad) {
+          if (!n.visibleObservable) {
+            n.visibleObservable = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) {
+              n.visibleObservable?.disconnect();
+              delete n.visibleObservable;
+              createComp();
+            }});
+            window.setTimeout(() => n.visibleObservable?.observe(gridItem.el)); // wait until callee sets position attributes
+          }
+        } else createComp();
       }
 
       return gridItem.el;
@@ -252,7 +276,6 @@ export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w:
     // REMOVE - have to call ComponentRef:destroy() for dynamic objects to correctly remove themselves
     // Note: this will destroy all children dynamic components as well: gridItem -> childWidget
     //
-    const n = w as GridStackNode;
     if (isGrid) {
       const grid = (n.el as GridCompHTMLElement)?._gridComp;
       if (grid?.ref) grid.ref.destroy();
@@ -268,7 +291,7 @@ export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w:
 
 /**
  * called for each item in the grid - check if additional information needs to be saved.
- * Note: since this is options minus gridstack private members using Utils.removeInternalForSave(),
+ * Note: since this is options minus gridstack protected members using Utils.removeInternalForSave(),
  * this typically doesn't need to do anything. However your custom Component @Input() are now supported
  * using BaseWidget.serialize()
  */

package/dist/angular/src/gridstack.module.ts

@@ -1,6 +1,6 @@
 /**
- * gridstack.component.ts 10.3.1
- * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ * gridstack.component.ts 11.0.1
+ * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
  */
 
 import { NgModule } from "@angular/core";

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

@@ -1,6 +1,6 @@
 /**
- * dd-base-impl.ts 10.3.1
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
+ * dd-base-impl.ts 11.0.1
+ * Copyright (c) 2021-2024  Alain Dumesny - see GridStack root license
  */
 export type EventCallback = (event: Event) => boolean | void;
 export declare abstract class DDBaseImplement {

package/dist/dd-base-impl.js

@@ -1,6 +1,6 @@
 /**
- * dd-base-impl.ts 10.3.1
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
+ * dd-base-impl.ts 11.0.1
+ * Copyright (c) 2021-2024  Alain Dumesny - see GridStack root license
  */
 export class DDBaseImplement {
     constructor() {

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

@@ -1 +1 @@
-{"version":3,"file":"dd-base-impl.js","sourceRoot":"","sources":["../src/dd-base-impl.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,MAAM,OAAgB,eAAe;IAArC;QAME,gBAAgB;QACN,mBAAc,GAEpB,EAAE,CAAC;IA0BT,CAAC;IAlCC,mHAAmH;IACnH,IAAW,QAAQ,KAAgB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IASpD,EAAE,CAAC,KAAa,EAAE,QAAuB;QAC9C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;IACxC,CAAC;IAEM,GAAG,CAAC,KAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAEM,OAAO;QACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEM,OAAO;QACZ,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAEM,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 10.3.1\n * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license\n */\n\nexport type EventCallback = (event: Event) => boolean|void;\nexport abstract class DDBaseImplement {\n  /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */\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  public on(event: string, callback: EventCallback): void {\n    this._eventRegister[event] = callback;\n  }\n\n  public off(event: string): void {\n    delete this._eventRegister[event];\n  }\n\n  public enable(): void {\n    this._disabled = false;\n  }\n\n  public disable(): void {\n    this._disabled = true;\n  }\n\n  public destroy(): void {\n    delete this._eventRegister;\n  }\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\nexport interface HTMLElementExtendOpt<T> {\n  el: HTMLElement;\n  option: T;\n  updateOption(T): DDBaseImplement;\n}\n"]}
+{"version":3,"file":"dd-base-impl.js","sourceRoot":"","sources":["../src/dd-base-impl.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,MAAM,OAAgB,eAAe;IAArC;QAME,gBAAgB;QACN,mBAAc,GAEpB,EAAE,CAAC;IA0BT,CAAC;IAlCC,mHAAmH;IACnH,IAAW,QAAQ,KAAgB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IASpD,EAAE,CAAC,KAAa,EAAE,QAAuB;QAC9C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;IACxC,CAAC;IAEM,GAAG,CAAC,KAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAEM,OAAO;QACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEM,OAAO;QACZ,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAEM,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 11.0.1\n * Copyright (c) 2021-2024  Alain Dumesny - see GridStack root license\n */\n\nexport type EventCallback = (event: Event) => boolean|void;\nexport abstract class DDBaseImplement {\n  /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */\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  public on(event: string, callback: EventCallback): void {\n    this._eventRegister[event] = callback;\n  }\n\n  public off(event: string): void {\n    delete this._eventRegister[event];\n  }\n\n  public enable(): void {\n    this._disabled = false;\n  }\n\n  public disable(): void {\n    this._disabled = true;\n  }\n\n  public destroy(): void {\n    delete this._eventRegister;\n  }\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\nexport interface HTMLElementExtendOpt<T> {\n  el: HTMLElement;\n  option: T;\n  updateOption(T): DDBaseImplement;\n}\n"]}

package/dist/dd-draggable.d.ts

@@ -1,29 +1,20 @@
 /**
- * dd-draggable.ts 10.3.1
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
+ * dd-draggable.ts 11.0.1
+ * Copyright (c) 2021-2024  Alain Dumesny - see GridStack root license
  */
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
-import { GridItemHTMLElement, DDUIData } from './types';
-export interface DDDraggableOpt {
-    appendTo?: string | HTMLElement;
-    handle?: string;
-    helper?: 'clone' | HTMLElement | ((event: Event) => HTMLElement);
-    cancel?: string;
-    start?: (event: Event, ui: DDUIData) => void;
-    stop?: (event: Event) => void;
-    drag?: (event: Event, ui: DDUIData) => void;
-}
+import { GridItemHTMLElement, DDDragOpt } from './types';
 type DDDragEvent = 'drag' | 'dragstart' | 'dragstop';
-export declare class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDraggableOpt> {
+export declare class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDragOpt> {
     el: GridItemHTMLElement;
-    option: DDDraggableOpt;
+    option: DDDragOpt;
     helper: HTMLElement;
-    constructor(el: GridItemHTMLElement, option?: DDDraggableOpt);
+    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: DDDraggableOpt): DDDraggable;
+    updateOption(opts: DDDragOpt): DDDraggable;
 }
 export {};

package/dist/dd-draggable.js

@@ -1,6 +1,6 @@
 /**
- * dd-draggable.ts 10.3.1
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
+ * dd-draggable.ts 11.0.1
+ * Copyright (c) 2021-2024  Alain Dumesny - see GridStack root license
  */
 import { DDManager } from './dd-manager';
 import { Utils } from './utils';
@@ -22,9 +22,9 @@ class DDDraggable extends DDBaseImplement {
             yOffset: 0
         };
         // get the element that is actually supposed to be dragged by
-        const handleName = option.handle.substring(1);
+        const handleName = option?.handle?.substring(1);
         const n = el.gridstackNode;
-        this.dragEls = el.classList.contains(handleName) ? [el] : (n?.subGrid ? [el.querySelector(option.handle) || el] : Array.from(el.querySelectorAll(option.handle)));
+        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];
         }
@@ -99,13 +99,6 @@ class DDDraggable extends DDBaseImplement {
             if (e.target.closest(this.option.cancel))
                 return true;
         }
-        // REMOVE: why would we get the event if it wasn't for us or child ?
-        // make sure we are clicking on a drag handle or child of it...
-        // Note: we don't need to check that's handle is an immediate child, as mouseHandled will prevent parents from also handling it (lowest wins)
-        // let className = this.option.handle.substring(1);
-        // let el = e.target as HTMLElement;
-        // while (el && !el.classList.contains(className)) { el = el.parentElement; }
-        // if (!el) return;
         this.mouseDownEvent = e;
         delete this.dragging;
         delete DDManager.dragElement;
@@ -114,8 +107,8 @@ class DDDraggable extends DDBaseImplement {
         document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true }); // true=capture, not bubble
         document.addEventListener('mouseup', this._mouseUp, true);
         if (isTouch) {
-            e.target.addEventListener('touchmove', touchmove);
-            e.target.addEventListener('touchend', touchend);
+            e.currentTarget.addEventListener('touchmove', touchmove);
+            e.currentTarget.addEventListener('touchend', touchend);
         }
         e.preventDefault();
         // preventDefault() prevents blur event which occurs just after mousedown event.
@@ -138,7 +131,7 @@ class DDDraggable extends DDBaseImplement {
     /** @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}`)
-        let s = this.mouseDownEvent;
+        const s = this.mouseDownEvent;
         this.lastDrag = e;
         if (this.dragging) {
             this._dragFollow(e);
@@ -160,14 +153,14 @@ class DDDraggable extends DDBaseImplement {
             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)
-            let grid = this.el.gridstackNode?.grid;
+            const grid = this.el.gridstackNode?.grid;
             if (grid) {
                 DDManager.dropElement = grid.el.ddElement.ddDroppable;
             }
             else {
                 delete DDManager.dropElement;
             }
-            this.helper = this._createHelper(e);
+            this.helper = this._createHelper();
             this._setupHelperContainmentStyle();
             this.dragTransform = Utils.getValuesFromTransformedElement(this.helperContainment);
             this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);
@@ -188,8 +181,8 @@ class DDDraggable extends DDBaseImplement {
         document.removeEventListener('mousemove', this._mouseMove, true);
         document.removeEventListener('mouseup', this._mouseUp, true);
         if (isTouch) {
-            e.target.removeEventListener('touchmove', touchmove, true);
-            e.target.removeEventListener('touchend', touchend, true);
+            e.currentTarget.removeEventListener('touchmove', touchmove, true);
+            e.currentTarget.removeEventListener('touchend', touchend, true);
         }
         if (this.dragging) {
             delete this.dragging;
@@ -200,12 +193,9 @@ class DDDraggable extends DDBaseImplement {
                 delete DDManager.dropElement;
             }
             this.helperContainment.style.position = this.parentOriginStylePosition || null;
-            if (this.helper === this.el) {
-                this._removeHelperStyle();
-            }
-            else {
-                this.helper.remove();
-            }
+            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!
@@ -255,10 +245,10 @@ class DDDraggable extends DDBaseImplement {
         }
     }
     /** @internal create a clone copy (or user defined method) of the original drag item if set */
-    _createHelper(event) {
+    _createHelper() {
         let helper = this.el;
         if (typeof this.option.helper === 'function') {
-            helper = this.option.helper(event);
+            helper = this.option.helper(this.el);
         }
         else if (this.option.helper === 'clone') {
             helper = Utils.cloneNode(this.el);
@@ -266,9 +256,7 @@ class DDDraggable extends DDBaseImplement {
         if (!document.body.contains(helper)) {
             Utils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentElement : this.option.appendTo);
         }
-        if (helper === this.el) {
-            this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]);
-        }
+        this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]);
         return helper;
     }
     /** @internal set the fix position of the dragged item */
@@ -294,16 +282,16 @@ class DDDraggable extends DDBaseImplement {
     /** @internal restore back the original style before dragging */
     _removeHelperStyle() {
         this.helper.classList.remove('ui-draggable-dragging');
-        let node = this.helper?.gridstackNode;
+        const node = this.helper?.gridstackNode;
         // don't bother restoring styles if we're gonna remove anyway...
         if (!node?._isAboutToRemove && this.dragElementOriginStyle) {
-            let helper = this.helper;
+            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)
-            let transition = this.dragElementOriginStyle['transition'] || null;
+            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)
@@ -313,7 +301,7 @@ class DDDraggable extends DDBaseImplement {
     }
     /** @internal updates the top/left position to follow the mouse */
     _dragFollow(e) {
-        let containmentRect = { left: 0, top: 0 };
+        const containmentRect = { left: 0, top: 0 };
         // if (this.helper.style.position === 'absolute') { // we use 'fixed'
         //   const { left, top } = this.helperContainment.getBoundingClientRect();
         //   containmentRect = { left, top };
@@ -371,6 +359,6 @@ class DDDraggable extends DDBaseImplement {
     }
 }
 /** @internal properties we change during dragging, and restore back */
-DDDraggable.originStyleProp = ['transition', 'pointerEvents', 'position', 'left', 'top', 'minWidth', 'willChange'];
+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 +1 @@
-{"version":3,"file":"dd-draggable.js","sourceRoot":"","sources":["../src/dd-draggable.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * dd-draggable.ts 10.3.1\n * Copyright (c) 2021-2022 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 } from './types';\nimport { DDElementHost } from './dd-element';\nimport { isTouch, touchend, touchmove, touchstart, pointerdown } from './dd-touch';\n\n// TODO: merge with DDDragOpt ?\nexport interface DDDraggableOpt {\n  appendTo?: string | HTMLElement;\n  handle?: string;\n  helper?: 'clone' | HTMLElement | ((event: Event) => HTMLElement);\n  cancel?: string;\n  // containment?: string | HTMLElement; // TODO: not implemented yet\n  // revert?: string | boolean | unknown; // TODO: not implemented yet\n  // scroll?: boolean;\n  start?: (event: Event, ui: DDUIData) => void;\n  stop?: (event: Event) => void;\n  drag?: (event: Event, ui: DDUIData) => void;\n}\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<DDDraggableOpt> {\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 = ['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: DDDraggableOpt = {}) {\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 = 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: DDDraggableOpt): 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    // REMOVE: why would we get the event if it wasn't for us or child ?\n    // make sure we are clicking on a drag handle or child of it...\n    // Note: we don't need to check that's handle is an immediate child, as mouseHandled will prevent parents from also handling it (lowest wins)\n    // let className = this.option.handle.substring(1);\n    // let el = e.target as HTMLElement;\n    // while (el && !el.classList.contains(className)) { el = el.parentElement; }\n    // if (!el) return;\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.target.addEventListener('touchmove', touchmove);\n      e.target.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    let 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      let 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(e);\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) {\n      e.target.removeEventListener('touchmove', touchmove, true);\n      e.target.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) {\n        this._removeHelperStyle();\n      } else {\n        this.helper.remove();\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    if (!n?.grid) return;\n    const grid = n.grid;\n\n    if (e.key === 'Escape') {\n      if (n._origRotate) {\n        n._orig = n._origRotate;\n        delete n._origRotate;\n      }\n      grid.engine.restoreInitial();\n      this._mouseUp(this.mouseDownEvent);\n    } else if (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(event: DragEvent): HTMLElement {\n    let helper = this.el;\n    if (typeof this.option.helper === 'function') {\n      helper = this.option.helper(event);\n    } else if (this.option.helper === 'clone') {\n      helper = Utils.cloneNode(this.el);\n    }\n    if (!document.body.contains(helper)) {\n      Utils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentElement : this.option.appendTo);\n    }\n    if (helper === this.el) {\n      this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]);\n    }\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    // 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 ! (done in CSS as well)\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    let 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      let 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      let 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    let 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"]}
+{"version":3,"file":"dd-draggable.js","sourceRoot":"","sources":["../src/dd-draggable.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * dd-draggable.ts 11.0.1\n * Copyright (c) 2021-2024  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';\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) {\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    if (!n?.grid) return;\n    const grid = n.grid;\n\n    if (e.key === 'Escape') {\n      if (n._origRotate) {\n        n._orig = n._origRotate;\n        delete n._origRotate;\n      }\n      grid.engine.restoreInitial();\n      this._mouseUp(this.mouseDownEvent);\n    } else if (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 (!document.body.contains(helper)) {\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    // 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 ! (done in CSS as well)\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    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"]}

package/dist/dd-droppable.d.ts

@@ -1,6 +1,6 @@
 /**
- * dd-droppable.ts 10.3.1
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
+ * dd-droppable.ts 11.0.1
+ * Copyright (c) 2021-2024  Alain Dumesny - see GridStack root license
  */
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
 import { DDUIData } from './types';

package/dist/dd-droppable.js

@@ -1,6 +1,6 @@
 /**
- * dd-droppable.ts 10.3.1
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
+ * dd-droppable.ts 11.0.1
+ * Copyright (c) 2021-2024  Alain Dumesny - see GridStack root license
  */
 import { DDManager } from './dd-manager';
 import { DDBaseImplement } from './dd-base-impl';