gridstack 10.3.0 → 11.0.0

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

@@ -0,0 +1,312 @@
+/**
+ * gridstack.component.ts 11.0.0
+ * 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 { Subscription } from 'rxjs';
+import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
+
+import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
+import { BaseWidget } from './base-widget';
+
+/** events handlers emitters signature for different events */
+export type eventCB = {event: Event};
+export type elementCB = {event: Event, el: GridItemHTMLElement};
+export type nodesCB = {event: Event, nodes: GridStackNode[]};
+export type droppedCB = {event: Event, previousNode: GridStackNode, newNode: GridStackNode};
+
+export type NgCompInputs = {[key: string]: any};
+
+/** extends to store Ng Component selector, instead/inAddition to content */
+export interface NgGridStackWidget extends GridStackWidget {
+  /** 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
+}
+export interface NgGridStackOptions extends GridStackOptions {
+  children?: NgGridStackWidget[];
+  subGridOpts?: NgGridStackOptions;
+}
+
+/** store element to Ng Class pointer back */
+export interface GridCompHTMLElement extends GridHTMLElement {
+  _gridComp?: GridstackComponent;
+}
+
+/** selector string to runtime Type mapping */
+export type SelectorToType = {[key: string]: Type<Object>};
+
+/**
+ * HTML Component Wrapper for gridstack, in combination with GridstackItemComponent for the items
+ */
+@Component({
+  selector: 'gridstack',
+  template: `
+    <!-- content to show when when grid is empty, like instructions on how to add widgets -->
+    <ng-content select="[empty-content]" *ngIf="isEmpty"></ng-content>
+    <!-- where dynamic items go -->
+    <ng-template #container></ng-template>
+    <!-- where template items go -->
+    <ng-content></ng-content>
+  `,
+  styles: [`
+    :host { display: block; }
+  `],
+  // changeDetection: ChangeDetectionStrategy.OnPush, // IFF you want to optimize and control when ChangeDetection needs to happen...
+})
+export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
+
+  /** track list of TEMPLATE grid items so we can sync between DOM and GS internals */
+  @ContentChildren(GridstackItemComponent) public gridstackItems?: QueryList<GridstackItemComponent>;
+  /** container to append items dynamically */
+  @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef;
+
+  /** initial options for creation of the grid */
+  @Input() public set options(val: GridStackOptions) { this._options = val; }
+  /** return the current running options */
+  public get options(): GridStackOptions { return this._grid?.opts || this._options || {}; }
+
+  /** true while ng-content with 'no-item-content' should be shown when last item is removed from a grid */
+  @Input() public isEmpty?: boolean;
+
+  /** individual list of GridStackEvent callbacks handlers as output
+   * otherwise use this.grid.on('name1 name2 name3', callback) to handle multiple at once
+   * see https://github.com/gridstack/gridstack.js/blob/master/demo/events.js#L4
+   *
+   * Note: camel casing and 'CB' added at the end to prevent @angular-eslint/no-output-native
+   * eg: 'change' would trigger the raw CustomEvent so use different name.
+   */
+  @Output() public addedCB = new EventEmitter<nodesCB>();
+  @Output() public changeCB = new EventEmitter<nodesCB>();
+  @Output() public disableCB = new EventEmitter<eventCB>();
+  @Output() public dragCB = new EventEmitter<elementCB>();
+  @Output() public dragStartCB = new EventEmitter<elementCB>();
+  @Output() public dragStopCB = new EventEmitter<elementCB>();
+  @Output() public droppedCB = new EventEmitter<droppedCB>();
+  @Output() public enableCB = new EventEmitter<eventCB>();
+  @Output() public removedCB = new EventEmitter<nodesCB>();
+  @Output() public resizeCB = new EventEmitter<elementCB>();
+  @Output() public resizeStartCB = new EventEmitter<elementCB>();
+  @Output() public resizeStopCB = new EventEmitter<elementCB>();
+
+  /** return the native element that contains grid specific fields as well */
+  public get el(): GridCompHTMLElement { return this.elementRef.nativeElement; }
+
+  /** return the GridStack class */
+  public get grid(): GridStack | undefined { return this._grid; }
+
+  /** ComponentRef of ourself - used by dynamic object to correctly get removed */
+  public ref: ComponentRef<GridstackComponent> | undefined;
+
+  /**
+   * stores the selector -> Type mapping, so we can create items dynamically from a string.
+   * Unfortunately Ng doesn't provide public access to that mapping.
+   */
+  public static selectorToType: SelectorToType = {};
+  /** add a list of ng Component to be mapped to selector */
+  public static addComponentToSelectorType(typeList: Array<Type<Object>>) {
+    typeList.forEach(type => GridstackComponent.selectorToType[ GridstackComponent.getSelector(type) ] = type);
+  }
+  /** return the ng Component selector */
+  public static getSelector(type: Type<Object>): string {
+    return reflectComponentType(type)!.selector;
+  }
+
+  protected _options?: GridStackOptions;
+  protected _grid?: GridStack;
+  protected _sub: Subscription | undefined;
+  protected loaded?: boolean;
+
+  constructor(
+    // protected readonly zone: NgZone,
+    // protected readonly cd: ChangeDetectorRef,
+    protected readonly elementRef: ElementRef<GridCompHTMLElement>,
+  ) {
+    this.el._gridComp = this;
+  }
+
+  public ngOnInit(): void {
+    // init ourself before any template children are created since we track them below anyway - no need to double create+update widgets
+    this.loaded = !!this.options?.children?.length;
+    this._grid = GridStack.init(this._options, this.el);
+    delete this._options; // GS has it now
+
+    this.checkEmpty();
+  }
+
+  /** 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._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 {
+    this.unhookEvents(this._grid);
+    this._sub?.unsubscribe();
+    this._grid?.destroy();
+    delete this._grid;
+    delete this.el._gridComp;
+    delete this.container;
+    delete this.ref;
+  }
+
+  /**
+   * called when the TEMPLATE list of items changes - get a list of nodes and
+   * update the layout accordingly (which will take care of adding/removing items changed by Angular)
+   */
+  public updateAll() {
+    if (!this.grid) return;
+    const layout: GridStackWidget[] = [];
+    this.gridstackItems?.forEach(item => {
+      layout.push(item.options);
+      item.clearOptions();
+    });
+    this.grid.load(layout); // efficient that does diffs only
+  }
+
+  /** check if the grid is empty, if so show alternative content */
+  public checkEmpty() {
+    if (!this.grid) return;
+    const isEmpty = !this.grid.engine.nodes.length;
+    if (isEmpty === this.isEmpty) return;
+    this.isEmpty = isEmpty;
+    // this.cd.detectChanges();
+  }
+
+  /** get all known events as easy to use Outputs for convenience */
+  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}))
+  }
+
+  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, 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) {
+      // 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 = n;
+      return grid.el;
+    } else {
+      const gridComp = (host as GridCompHTMLElement)._gridComp;
+      const gridItemRef = gridComp?.container?.createComponent(GridstackItemComponent);
+      const gridItem = gridItemRef?.instance;
+      if (!gridItem) return;
+      gridItem.ref = gridItemRef
+
+      // 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(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;
+    }
+  } else {
+    //
+    // 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
+    //
+    if (isGrid) {
+      const grid = (n.el as GridCompHTMLElement)?._gridComp;
+      if (grid?.ref) grid.ref.destroy();
+      else grid?.ngOnDestroy();
+    } else {
+      const gridItem = (n.el as GridItemCompHTMLElement)?._gridItemComp;
+      if (gridItem?.ref) gridItem.ref.destroy();
+      else gridItem?.ngOnDestroy();
+    }
+  }
+  return;
+}
+
+/**
+ * called for each item in the grid - check if additional information needs to be saved.
+ * 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()
+ */
+export function gsSaveAdditionalNgInfo(n: NgGridStackNode, w: NgGridStackWidget) {
+  const gridItem = (n.el as GridItemCompHTMLElement)?._gridItemComp;
+  if (gridItem) {
+    const input = gridItem.childWidget?.serialize();
+    if (input) {
+      w.input = input;
+    }
+    return;
+  }
+  // else check if Grid
+  const grid = (n.el as GridCompHTMLElement)?._gridComp;
+  if (grid) {
+    //.... save any custom data
+  }
+}

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

@@ -0,0 +1,32 @@
+/**
+ * gridstack.component.ts 11.0.0
+ * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
+ */
+
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+
+import { GridStack } from "gridstack";
+import { GridstackComponent, gsCreateNgComponents, gsSaveAdditionalNgInfo } from "./gridstack.component";
+import { GridstackItemComponent } from "./gridstack-item.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [
+    GridstackComponent,
+    GridstackItemComponent,
+  ],
+  exports: [
+    GridstackComponent,
+    GridstackItemComponent,
+  ],
+})
+export class GridstackModule {
+  constructor() {
+    // set globally our method to create the right widget type
+    GridStack.addRemoveCB = gsCreateNgComponents;
+    GridStack.saveCB = gsSaveAdditionalNgInfo;
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
- * dd-base-impl.ts 10.3.0
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
+ * dd-base-impl.ts 11.0.0
+ * 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.0
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
+ * dd-base-impl.ts 11.0.0
+ * 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.0\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.0\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.0
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
+ * dd-draggable.ts 11.0.0
+ * 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.0
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
+ * dd-draggable.ts 11.0.0
+ * Copyright (c) 2021-2024  Alain Dumesny - see GridStack root license
  */
 import { DDManager } from './dd-manager';
 import { Utils } from './utils';
@@ -22,8 +22,9 @@ class DDDraggable extends DDBaseImplement {
             yOffset: 0
         };
         // get the element that is actually supposed to be dragged by
-        let handleName = option.handle.substring(1);
-        this.dragEls = el.classList.contains(handleName) ? [el] : Array.from(el.querySelectorAll(option.handle));
+        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];
         }
@@ -98,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;
@@ -113,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.
@@ -137,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);
@@ -159,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);
@@ -187,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;
@@ -199,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!
@@ -254,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);
@@ -265,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 */
@@ -293,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)
@@ -312,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 };
@@ -370,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