gridstack 5.0.0 → 6.0.0

package/dist/gridstack.css

@@ -1,5 +1,5 @@
 /**
- * gridstack SASS styles 5.0
+ * gridstack SASS styles 6.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 :root .grid-stack-item > .ui-resizable-handle {
@@ -16,7 +16,7 @@
   direction: rtl;
 }
 .grid-stack .grid-stack-placeholder > .placeholder-content {
-  border: 1px dashed lightgray;
+  background-color: rgba(0, 0, 0, 0.1);
   margin: 0;
   position: absolute;
   width: auto;
@@ -45,13 +45,6 @@
 .grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle, .grid-stack > .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
   display: none;
 }
-.grid-stack > .grid-stack-item.ui-draggable-dragging, .grid-stack > .grid-stack-item.ui-resizable-resizing {
-  z-index: 100;
-}
-.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
-  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
-  opacity: 0.8;
-}
 .grid-stack > .grid-stack-item > .ui-resizable-se,
 .grid-stack > .grid-stack-item > .ui-resizable-sw {
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
@@ -305,4 +298,23 @@
   -ms-transition: left 0s, top 0s, height 0s, width 0s;
   -o-transition: left 0s, top 0s, height 0s, width 0s;
   transition: left 0s, top 0s, height 0s, width 0s;
+}
+
+.ui-draggable-dragging,
+.ui-resizable-resizing {
+  z-index: 100;
+}
+.ui-draggable-dragging > .grid-stack-item-content,
+.ui-resizable-resizing > .grid-stack-item-content {
+  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
+  opacity: 0.8;
+}
+
+.ui-draggable-dragging {
+  will-change: left, top;
+  cursor: move;
+}
+
+.ui-resizable-resizing {
+  will-change: width, height;
 }

package/dist/gridstack.d.ts

@@ -1,8 +1,8 @@
 /*!
- * GridStack 5.0
+ * GridStack 6.0.0
  * https://gridstackjs.com/
  *
- * Copyright (c) 2021 Alain Dumesny
+ * Copyright (c) 2021-2022 Alain Dumesny
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
 import { GridStackEngine } from './gridstack-engine';
@@ -11,7 +11,6 @@ import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHan
 export * from './types';
 export * from './utils';
 export * from './gridstack-engine';
-export * from './gridstack-ddi';
 export interface GridHTMLElement extends HTMLElement {
     gridstack?: GridStack;
 }
@@ -70,6 +69,11 @@ export declare class GridStack {
      * @param opt grids options used to initialize the grid, and list of children
      */
     static addGrid(parent: HTMLElement, opt?: GridStackOptions): GridStack;
+    /** call this method to register your engine instead of the default one.
+     * See instead `GridStackOptions.engineClass` if you only need to
+     * replace just one instance.
+     */
+    static registerEngine(engineClass: typeof GridStackEngine): void;
     /** scoping so users can call GridStack.Utils.sort() for example */
     static Utils: typeof Utils;
     /** scoping so users can call new GridStack.Engine(12) for example */
@@ -80,6 +84,7 @@ export declare class GridStack {
     engine: GridStackEngine;
     /** grid options - public for classes to access, but use methods to modify! */
     opts: GridStackOptions;
+    protected static engineClass: typeof GridStackEngine;
     /**
      * Construct a grid item from the given element and options
      * @param el
@@ -124,9 +129,10 @@ export declare class GridStack {
      **/
     load(layout: GridStackWidget[], addAndRemove?: boolean | ((g: GridStack, w: GridStackWidget, add: boolean) => GridItemHTMLElement)): GridStack;
     /**
-     * Initializes batch updates. You will see no changes until `commit()` method is called.
+     * use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)
+     * and get a single event callback. You will see no changes until `batchUpdate(false)` is called.
      */
-    batchUpdate(): GridStack;
+    batchUpdate(flag?: boolean): GridStack;
     /**
      * Gets current cell height.
      */
@@ -149,11 +155,7 @@ export declare class GridStack {
     /** Gets current cell width. */
     cellWidth(): number;
     /** return our expected width (or parent) for 1 column check */
-    private _widthOrContainer;
-    /**
-     * Finishes batch updates. Updates DOM nodes. You must call it after batchUpdate.
-     */
-    commit(): GridStack;
+    protected _widthOrContainer(): number;
     /** re-layout grid items to reclaim any empty space */
     compact(): GridStack;
     /**
@@ -294,13 +296,14 @@ export declare class GridStack {
      */
     onParentResize(): GridStack;
     /** add or remove the window size event handler */
-    private _updateWindowResizeEvent;
+    protected _updateWindowResizeEvent(forceRemove?: boolean): GridStack;
+    static GDRev: string;
     /**
      * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
      * Called during GridStack.init() as options, but can also be called directly (last param are cached) in case the toolbar
      * is dynamically create and needs to change later.
      * @param dragIn string selector (ex: '.sidebar .grid-stack-item')
-     * @param dragInOptions options - see DDDragInOpt. (default: {revert: 'invalid', handle: '.grid-stack-item-content', scroll: false, appendTo: 'body'}
+     * @param dragInOptions options - see DDDragInOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}
      **/
     static setupDragIn(dragIn?: string, dragInOptions?: DDDragInOpt): void;
     /**
@@ -343,4 +346,6 @@ export declare class GridStack {
      * Enables/disables widget resizing. No-op for static grids.
      */
     enableResize(doEnable: boolean): GridStack;
+    commit(): GridStack;
 }
+export * from './dd-gridstack';

package/dist/gridstack.js

@@ -12,20 +12,18 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridStack = void 0;
 /*!
- * GridStack 5.0
+ * GridStack 6.0.0
  * https://gridstackjs.com/
  *
- * Copyright (c) 2021 Alain Dumesny
+ * Copyright (c) 2021-2022 Alain Dumesny
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
 const gridstack_engine_1 = require("./gridstack-engine");
 const utils_1 = require("./utils");
-const gridstack_ddi_1 = require("./gridstack-ddi");
 // export all dependent file as well to make it easier for users to just import the main file
 __exportStar(require("./types"), exports);
 __exportStar(require("./utils"), exports);
 __exportStar(require("./gridstack-engine"), exports);
-__exportStar(require("./gridstack-ddi"), exports);
 // default values for grid options - used during init and when saving out
 const GridDefaults = {
     column: 12,
@@ -41,18 +39,16 @@ const GridDefaults = {
     cellHeightThrottle: 100,
     margin: 10,
     auto: true,
-    minWidth: 768,
+    oneColumnSize: 768,
     float: false,
     staticGrid: false,
     animate: true,
-    alwaysShowResizeHandle: false,
+    alwaysShowResizeHandle: 'mobile',
     resizable: {
-        autoHide: true,
         handles: 'se'
     },
     draggable: {
         handle: '.grid-stack-item-content',
-        scroll: false,
         appendTo: 'body'
     },
     disableDrag: false,
@@ -65,7 +61,7 @@ const GridDefaults = {
     marginUnit: 'px',
     cellHeightUnit: 'px',
     disableOneColumnMode: false,
-    oneColumnModeDomSort: false
+    oneColumnModeDomSort: false,
 };
 /**
  * Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid.
@@ -100,25 +96,31 @@ class GridStack {
         if (opts.column === 'auto') {
             delete opts.column;
         }
-        // elements attributes override any passed options (like CSS style) - merge the two together
-        let defaults = Object.assign(Object.assign({}, utils_1.Utils.cloneDeep(GridDefaults)), { column: utils_1.Utils.toNumber(el.getAttribute('gs-column')) || 12, minRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-min-row')) || 0, maxRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-max-row')) || 0, staticGrid: utils_1.Utils.toBool(el.getAttribute('gs-static')) || false, _styleSheetClass: 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0), alwaysShowResizeHandle: opts.alwaysShowResizeHandle || false, resizable: {
-                autoHide: !(opts.alwaysShowResizeHandle || false),
-                handles: 'se'
-            }, draggable: {
-                handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || '.grid-stack-item-content',
-                scroll: false,
-                appendTo: 'body'
+        // 'minWidth' legacy support in 5.1
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        let anyOpts = opts;
+        if (anyOpts.minWidth !== undefined) {
+            opts.oneColumnSize = opts.oneColumnSize || anyOpts.minWidth;
+            delete anyOpts.minWidth;
+        }
+        // save original setting so we can restore on save
+        if (opts.alwaysShowResizeHandle !== undefined) {
+            opts._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;
+        }
+        // elements DOM attributes override any passed options (like CSS style) - merge the two together
+        let defaults = Object.assign(Object.assign({}, utils_1.Utils.cloneDeep(GridDefaults)), { column: utils_1.Utils.toNumber(el.getAttribute('gs-column')) || GridDefaults.column, minRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-min-row')) || GridDefaults.minRow, maxRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-max-row')) || GridDefaults.maxRow, staticGrid: utils_1.Utils.toBool(el.getAttribute('gs-static')) || GridDefaults.staticGrid, _styleSheetClass: 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0), draggable: {
+                handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || GridDefaults.draggable.handle,
             }, removableOptions: {
-                accept: '.' + (opts.itemClass || 'grid-stack-item')
+                accept: opts.itemClass ? '.' + opts.itemClass : GridDefaults.removableOptions.accept,
             } });
         if (el.getAttribute('gs-animate')) { // default to true, but if set to false use that instead
             defaults.animate = utils_1.Utils.toBool(el.getAttribute('gs-animate'));
         }
         this.opts = utils_1.Utils.defaults(opts, defaults);
         opts = null; // make sure we use this.opts instead
-        this.initMargin(); // part of settings defaults...
+        this._initMargin(); // part of settings defaults...
         // Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
-        if (this.opts.column !== 1 && !this.opts.disableOneColumnMode && this._widthOrContainer() <= this.opts.minWidth) {
+        if (this.opts.column !== 1 && !this.opts.disableOneColumnMode && this._widthOrContainer() <= this.opts.oneColumnSize) {
             this._prevColumn = this.getColumn();
             this.opts.column = 1;
         }
@@ -149,9 +151,14 @@ class GridStack {
             }
             this.cellHeight(this.opts.cellHeight, false);
         }
+        // see if we need to adjust auto-hide
+        if (this.opts.alwaysShowResizeHandle === 'mobile') {
+            this.opts.alwaysShowResizeHandle = dd_touch_1.isTouch;
+        }
         this.el.classList.add(this.opts._styleSheetClass);
         this._setStaticClass();
-        this.engine = new gridstack_engine_1.GridStackEngine({
+        let engineClass = this.opts.engineClass || GridStack.engineClass || gridstack_engine_1.GridStackEngine;
+        this.engine = new engineClass({
             column: this.getColumn(),
             float: this.opts.float,
             maxRow: this.opts.maxRow,
@@ -187,7 +194,7 @@ class GridStack {
                 });
             });
             elements.sort((a, b) => a.i - b.i).forEach(e => this._prepareElement(e.el));
-            this.commit();
+            this.batchUpdate(false);
         }
         this.setAnimation(this.opts.animate);
         this._updateStyles();
@@ -285,6 +292,13 @@ class GridStack {
         }
         return grid;
     }
+    /** call this method to register your engine instead of the default one.
+     * See instead `GridStackOptions.engineClass` if you only need to
+     * replace just one instance.
+     */
+    static registerEngine(engineClass) {
+        GridStack.engineClass = engineClass;
+    }
     /** @internal create placeholder DIV as needed */
     get placeholder() {
         if (!this._placeholder) {
@@ -431,6 +445,14 @@ class GridStack {
                 o.column = 'auto';
                 delete o.disableOneColumnMode;
             }
+            const origShow = o._alwaysShowResizeHandle;
+            delete o._alwaysShowResizeHandle;
+            if (origShow !== undefined) {
+                o.alwaysShowResizeHandle = origShow;
+            }
+            else {
+                delete o.alwaysShowResizeHandle;
+            }
             utils_1.Utils.removeInternalAndSame(o, GridDefaults);
             o.children = list;
             return o;
@@ -497,17 +519,23 @@ class GridStack {
             }
         });
         this.engine.removedNodes = removed;
-        this.commit();
+        this.batchUpdate(false);
         // after commit, clear that flag
         delete this._ignoreLayoutsNodeChange;
         delete this._insertNotAppend;
         return this;
     }
     /**
-     * Initializes batch updates. You will see no changes until `commit()` method is called.
+     * use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)
+     * and get a single event callback. You will see no changes until `batchUpdate(false)` is called.
      */
-    batchUpdate() {
-        this.engine.batchUpdate();
+    batchUpdate(flag = true) {
+        this.engine.batchUpdate(flag);
+        if (!flag) {
+            this._triggerRemoveEvent();
+            this._triggerAddEvent();
+            this._triggerChangeEvent();
+        }
         return this;
     }
     /**
@@ -580,16 +608,6 @@ class GridStack {
         // https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
         return (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);
     }
-    /**
-     * Finishes batch updates. Updates DOM nodes. You must call it after batchUpdate.
-     */
-    commit() {
-        this.engine.commit();
-        this._triggerRemoveEvent();
-        this._triggerAddEvent();
-        this._triggerChangeEvent();
-        return this;
-    }
     /** re-layout grid items to reclaim any empty space */
     compact() {
         this.engine.compact();
@@ -837,7 +855,7 @@ class GridStack {
                 return;
             // remove our DOM data (circular link) and drag&drop permanently
             delete el.gridstackNode;
-            gridstack_ddi_1.GridStackDDI.get().remove(el);
+            this._removeDD(el);
             this.engine.removeNode(node, removeDOM, triggerEvent);
             if (removeDOM && el.parentElement) {
                 el.remove(); // in batch mode engine.removeNode doesn't call back to remove DOM
@@ -857,7 +875,7 @@ class GridStack {
         // always remove our DOM data (circular link) before list gets emptied and drag&drop permanently
         this.engine.nodes.forEach(n => {
             delete n.el.gridstackNode;
-            gridstack_ddi_1.GridStackDDI.get().remove(n.el);
+            this._removeDD(n.el);
         });
         this.engine.removeAll(removeDOM);
         this._triggerRemoveEvent();
@@ -978,7 +996,7 @@ class GridStack {
         // re-use existing margin handling
         this.opts.margin = value;
         this.opts.marginTop = this.opts.marginBottom = this.opts.marginLeft = this.opts.marginRight = undefined;
-        this.initMargin();
+        this._initMargin();
         this._updateStyles(true); // true = force re-create
         return this;
     }
@@ -1262,7 +1280,7 @@ class GridStack {
         }
         else {
             // else check for 1 column in/out behavior
-            let oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.minWidth;
+            let oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize;
             if ((this.opts.column === 1) !== oneColumn) {
                 changedColumn = true;
                 if (this.opts.animate) {
@@ -1318,7 +1336,7 @@ class GridStack {
     /** @internal */
     static getGridElements(els) { return utils_1.Utils.getElements(els); }
     /** @internal initialize margin top/bottom/left/right and units */
-    initMargin() {
+    _initMargin() {
         let data;
         let margin = 0;
         // support passing multiple values like CSS (ex: '5px 10px 0 20px')
@@ -1381,7 +1399,7 @@ class GridStack {
         return this;
     }
     /*
-     * drag&drop empty stubs that will be implemented in gridstack-dd.ts for non static grid
+     * drag&drop empty stubs that will be implemented in dd-gridstack.ts for non static grid
      * so we don't incur the load unless needed.
      * NOTE: had to make those methods public in order to define them else as
      *   GridStack.prototype._setupAcceptWidget = function()
@@ -1393,7 +1411,7 @@ class GridStack {
      * Called during GridStack.init() as options, but can also be called directly (last param are cached) in case the toolbar
      * is dynamically create and needs to change later.
      * @param dragIn string selector (ex: '.sidebar .grid-stack-item')
-     * @param dragInOptions options - see DDDragInOpt. (default: {revert: 'invalid', handle: '.grid-stack-item-content', scroll: false, appendTo: 'body'}
+     * @param dragInOptions options - see DDDragInOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}
      **/
     static setupDragIn(dragIn, dragInOptions) { }
     /**
@@ -1436,6 +1454,8 @@ class GridStack {
      * Enables/disables widget resizing. No-op for static grids.
      */
     enableResize(doEnable) { return this; }
+    /** @internal removes any drag&drop present (called during destroy) */
+    _removeDD(el) { return this; }
     /** @internal called to add drag over support to support widgets */
     _setupAcceptWidget() { return this; }
     /** @internal called to setup a trash drop zone if the user specifies it */
@@ -1448,10 +1468,15 @@ class GridStack {
     _dragOrResize(el, event, ui, node, cellWidth, cellHeight) { return; }
     /** @internal called when a node leaves our area (mouse out or shape outside) **/
     _leave(el, helper) { return; }
+    // legacy method removed
+    commit() { utils_1.obsolete(this, this.batchUpdate(false), 'commit', 'batchUpdate', '5.2'); return this; }
 }
 exports.GridStack = GridStack;
 /** scoping so users can call GridStack.Utils.sort() for example */
 GridStack.Utils = utils_1.Utils;
 /** scoping so users can call new GridStack.Engine(12) for example */
 GridStack.Engine = gridstack_engine_1.GridStackEngine;
+GridStack.GDRev = '6.0.0';
+const dd_touch_1 = require("./dd-touch");
+__exportStar(require("./dd-gridstack"), exports);
 //# sourceMappingURL=gridstack.js.map