gridstack 8.3.0 → 9.0.0

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 8.3.0
+ * GridStack 9.0.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -185,7 +185,8 @@ class GridStack {
                 handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || gridDefaults.draggable.handle,
             },
             removableOptions: {
-                accept: opts.itemClass ? '.' + opts.itemClass : gridDefaults.removableOptions.accept,
+                accept: opts.itemClass || gridDefaults.removableOptions.accept,
+                decline: gridDefaults.removableOptions.decline
             },
         };
         if (el.getAttribute('gs-animate')) { // default to true, but if set to false use that instead
@@ -279,7 +280,7 @@ class GridStack {
             DDManager.pauseDrag = this.opts.draggable.pause;
         this._setupRemoveDrop();
         this._setupAcceptWidget();
-        this._updateWindowResizeEvent();
+        this._updateResizeEvent();
     }
     /**
      * add a new widget and returns it.
@@ -541,11 +542,13 @@ class GridStack {
      * see http://gridstackjs.com/demo/serialization.html
      **/
     load(layout, addRemove = GridStack.addRemoveCB || true) {
-        let items = GridStack.Utils.sort([...layout], -1, this._prevColumn || this.getColumn()); // make copy before we mod/sort
-        this._insertNotAppend = true; // since create in reverse order...
+        // if passed list has coordinates, use them (insert from end to beginning for conflict resolution) else force widget same order
+        const haveCoord = layout.some(w => w.x !== undefined || w.y !== undefined);
+        let items = haveCoord ? Utils.sort(layout, -1, this._prevColumn || this.getColumn()) : layout;
+        this._insertNotAppend = haveCoord; // if we create in reverse order...
         // if we're loading a layout into for example 1 column (_prevColumn is set only when going to 1) and items don't fit, make sure to save
         // the original wanted layout so we can scale back up correctly #1471
-        if (this._prevColumn && this._prevColumn !== this.opts.column && items.some(n => (n.x + n.w) > this.opts.column)) {
+        if (this._prevColumn && this._prevColumn !== this.opts.column && items.some(n => ((n.x || 0) + n.w) > this.opts.column)) {
             this._ignoreLayoutsNodeChange = true; // skip layout update
             this.engine.cacheLayout(items, this._prevColumn, true);
         }
@@ -568,10 +571,19 @@ class GridStack {
                 }
             });
         }
-        // now add/update the widgets
+        // now add/update the widgets - starting with an empty list to reduce collision and add no-coord ones at next available spot
+        let copyNodes = this.engine.nodes;
+        this.engine.nodes = [];
         items.forEach(w => {
-            let item = (w.id !== undefined) ? this.engine.nodes.find(n => n.id === w.id) : undefined;
+            let item = (w.id !== undefined) ? copyNodes.find(n => n.id === w.id) : undefined;
             if (item) {
+                // check if missing coord, in which case find next empty slot with new (or old if missing) sizes
+                if (w.autoPosition || w.x === undefined || w.y === undefined) {
+                    w.w = w.w || item.w;
+                    w.h = w.h || item.h;
+                    this.engine.findEmptyPosition(w);
+                }
+                this.engine.nodes.push(item); // now back to current list...
                 this.update(item.el, w);
                 if (w.subGridOpts?.children) { // update any sub grid as well
                     let sub = item.el.querySelector('.grid-stack');
@@ -600,6 +612,7 @@ class GridStack {
     batchUpdate(flag = true) {
         this.engine.batchUpdate(flag);
         if (!flag) {
+            this._updateContainerHeight();
             this._triggerRemoveEvent();
             this._triggerAddEvent();
             this._triggerChangeEvent();
@@ -643,7 +656,7 @@ class GridStack {
         if (update && val !== undefined) {
             if (this._isAutoCellHeight !== (val === 'auto')) {
                 this._isAutoCellHeight = (val === 'auto');
-                this._updateWindowResizeEvent();
+                this._updateResizeEvent();
             }
         }
         if (val === 'initial' || val === 'auto') {
@@ -698,7 +711,7 @@ class GridStack {
      * Note: items will never be outside of the current column boundaries. default ('moveScale'). Ignored for 1 column
      */
     column(column, layout = 'moveScale') {
-        if (column < 1 || this.opts.column === column)
+        if (!column || column < 1 || this.opts.column === column)
             return this;
         let oldColumn = this.getColumn();
         // if we go into 1 column mode (which happens if we're sized less than minW unless disableOneColumnMode is on)
@@ -728,6 +741,7 @@ class GridStack {
         this.engine.columnChanged(oldColumn, column, domNodes, layout);
         if (this._isAutoCellHeight)
             this.cellHeight();
+        this.doContentResize();
         // and trigger our event last...
         this._ignoreLayoutsNodeChange = true; // skip layout update
         this._triggerChangeEvent();
@@ -753,7 +767,7 @@ class GridStack {
         if (!this.el)
             return; // prevent multiple calls
         this.offAll();
-        this._updateWindowResizeEvent(true);
+        this._updateResizeEvent(true);
         this.setStatic(true, false); // permanently removes DD but don't set CSS class (we're going away)
         this.setAnimation(false);
         if (!removeDOM) {
@@ -899,7 +913,8 @@ class GridStack {
             }
             this.el.addEventListener(name, this._gsEventHandler[name]);
         }
-        else if (name === 'drag' || name === 'dragstart' || name === 'dragstop' || name === 'resizestart' || name === 'resize' || name === 'resizestop' || name === 'dropped') {
+        else if (name === 'drag' || name === 'dragstart' || name === 'dragstop' || name === 'resizestart' || name === 'resize'
+            || name === 'resizestop' || name === 'dropped' || name === 'resizecontent') {
             // drag&drop stop events NEED to be call them AFTER we update node attributes so handle them ourself.
             // do same for start event to make it easier...
             this._gsEventHandler[name] = callback;
@@ -1033,9 +1048,9 @@ class GridStack {
             return this.update(els, opt);
         }
         GridStack.getElements(els).forEach(el => {
-            if (!el || !el.gridstackNode)
+            let n = el?.gridstackNode;
+            if (!n)
                 return;
-            let n = el.gridstackNode;
             let w = Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items
             delete w.autoPosition;
             // move/resize widget if anything changed
@@ -1053,10 +1068,16 @@ class GridStack {
                 m = {}; // will use node position but validate values
             }
             // check for content changing
-            if (w.content) {
-                let sub = el.querySelector('.grid-stack-item-content');
-                if (sub && sub.innerHTML !== w.content) {
-                    sub.innerHTML = w.content;
+            if (w.content !== undefined) {
+                const itemContent = el.querySelector('.grid-stack-item-content');
+                if (!itemContent || itemContent.innerHTML === w.content)
+                    return;
+                itemContent.innerHTML = w.content;
+                // restore any sub-grid back
+                if (n.subGrid?.el) {
+                    itemContent.appendChild(n.subGrid.el);
+                    if (!n.subGrid.opts.styleInHead)
+                        n.subGrid._updateStyles(true); // force create
                 }
                 delete w.content;
             }
@@ -1072,14 +1093,8 @@ class GridStack {
             }
             Utils.sanitizeMinMax(n);
             // finally move the widget
-            if (m) {
-                this.engine.cleanNodes()
-                    .beginUpdate(n)
-                    .moveNode(n, m);
-                this._updateContainerHeight();
-                this._triggerChangeEvent();
-                this.engine.endUpdate();
-            }
+            if (m)
+                this.moveNode(n, m);
             if (changed) { // move will only update x,y,w,h so update the rest too
                 this._writeAttr(el, n);
             }
@@ -1089,6 +1104,54 @@ class GridStack {
         });
         return this;
     }
+    moveNode(n, m) {
+        this.engine.cleanNodes()
+            .beginUpdate(n)
+            .moveNode(n, m);
+        this._updateContainerHeight();
+        this._triggerChangeEvent();
+        this.engine.endUpdate();
+    }
+    /** Updates widget height to match the content height to avoid v-scrollbar or dead space.
+     Note: this assumes only 1 child under '.grid-stack-item-content' (sized to gridItem minus padding) that is at the entire content size wanted */
+    resizeToContent(els) {
+        GridStack.getElements(els).forEach(el => {
+            let n = el?.gridstackNode;
+            if (!n)
+                return;
+            if (el.parentElement !== n.grid.el)
+                return; // skip if we are not inside a grid
+            let height = el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth
+            if (!height)
+                return; // 0 when hidden, skip
+            const item = el.querySelector(GridStack.resizeToContentParent);
+            if (!item)
+                return;
+            const itemH = item.clientHeight; // available height to our child (minus border, padding...)
+            const wantedH = item.firstChild?.getBoundingClientRect().height || itemH; // NOTE: clientHeight & getBoundingClientRect() is undefined for text and other leaf nodes. use <div> container!
+            if (itemH === wantedH)
+                return;
+            height += wantedH - itemH;
+            const cell = this.getCellHeight();
+            if (!cell)
+                return;
+            let h = Math.ceil(height / cell);
+            if (n.maxH && h > n.maxH)
+                h = n.maxH;
+            if (h !== n.h) {
+                this._ignoreLayoutsNodeChange = true;
+                this.moveNode(n, { h });
+                delete this._ignoreLayoutsNodeChange;
+            }
+        });
+    }
+    /** call the user resize (so we can do extra work) else our build in version */
+    resizeToContentCheck(el) {
+        if (GridStack.resizeToContentCB)
+            GridStack.resizeToContentCB(el);
+        else
+            this.resizeToContent(el);
+    }
     /**
      * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options (CSS string format of 1,2,4 values or single number).
      * @param value margin value
@@ -1282,6 +1345,8 @@ class GridStack {
         if (!Utils.same(node, copy)) {
             this._writeAttr(el, node);
         }
+        if (Utils.shouldFitToContent(node))
+            el.classList.add('fit-to-content');
         this._prepareDragDropByNode(node);
         return this;
     }
@@ -1375,65 +1440,81 @@ class GridStack {
         return this;
     }
     /**
-     * called when we are being resized by the window - check if the one Column Mode needs to be turned on/off
-     * and remember the prev columns we used, or get our count from parent, as well as check for auto cell height (square)
+     * called when we are being resized - check if the one Column Mode needs to be turned on/off
+     * and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square)
+     * or `fitToContent` gridItem options.
      */
-    onParentResize() {
-        if (!this.el || !this.el.clientWidth)
+    onResize() {
+        if (!this.el?.clientWidth)
             return; // return if we're gone or no size yet (will get called again)
-        let changedColumn = false;
+        if (this.prevWidth === this.el.clientWidth)
+            return; // no-op
+        this.prevWidth = this.el.clientWidth;
+        // console.log('onResize ', this.el.clientWidth);
+        this.batchUpdate();
         // see if we're nested and take our column count from our parent....
+        let columnChanged = false;
         if (this._autoColumn && this.parentGridItem) {
             if (this.opts.column !== this.parentGridItem.w) {
-                changedColumn = true;
                 this.column(this.parentGridItem.w, 'none');
+                columnChanged = true;
             }
         }
         else {
             // else check for 1 column in/out behavior
-            let oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize;
+            let oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize ||
+                (this.opts.column === 1 && !this._prevColumn);
             if ((this.opts.column === 1) !== oneColumn) {
-                changedColumn = true;
-                if (this.opts.animate) {
-                    this.setAnimation(false);
-                } // 1 <-> 12 is too radical, turn off animation
+                // if (this.opts.animate) this.setAnimation(false); // 1 <-> 12 is too radical, turn off animation and we need it for fitToContent
                 this.column(oneColumn ? 1 : this._prevColumn);
-                if (this.opts.animate) {
-                    this.setAnimation(true);
-                }
+                // if (this.opts.animate) setTimeout(() => this.setAnimation(true));
+                columnChanged = true;
             }
         }
         // make the cells content square again
-        if (this._isAutoCellHeight) {
-            if (!changedColumn && this.opts.cellHeightThrottle) {
-                if (!this._cellHeightThrottle) {
-                    this._cellHeightThrottle = Utils.throttle(() => this.cellHeight(), this.opts.cellHeightThrottle);
-                }
-                this._cellHeightThrottle();
-            }
-            else {
-                // immediate update if we've changed column count or have no threshold
-                this.cellHeight();
-            }
-        }
-        // finally update any nested grids
+        if (this._isAutoCellHeight)
+            this.cellHeight();
+        // update any nested grids, or items size
         this.engine.nodes.forEach(n => {
             if (n.subGrid)
-                n.subGrid.onParentResize();
+                n.subGrid.onResize();
         });
+        this.doContentResize(columnChanged);
+        this.batchUpdate(false);
         return this;
     }
-    /** add or remove the window size event handler */
-    _updateWindowResizeEvent(forceRemove = false) {
+    doContentResize(delay = true, n = undefined) {
+        // update any gridItem height with fitToContent, but wait for DOM $animation_speed to settle if we changed column count
+        // TODO: is there a way to know what the final (post animation) size of the content will be so we can animate the column width and height together rather than sequentially ?
+        setTimeout(() => {
+            if (n) {
+                if (Utils.shouldFitToContent(n))
+                    this.resizeToContentCheck(n.el);
+            }
+            else {
+                this.engine.nodes.forEach(n => {
+                    if (Utils.shouldFitToContent(n))
+                        this.resizeToContentCheck(n.el);
+                });
+            }
+            if (this._gsEventHandler['resizeContent'])
+                this._gsEventHandler['resizeContent'](null, n ? [n] : this.engine.nodes);
+        }, delay ? 300 + 10 : 0);
+    }
+    /** add or remove the grid element size event handler */
+    _updateResizeEvent(forceRemove = false) {
         // only add event if we're not nested (parent will call us) and we're auto sizing cells or supporting oneColumn (i.e. doing work)
-        const workTodo = (this._isAutoCellHeight || !this.opts.disableOneColumnMode) && !this.parentGridItem;
-        if (!forceRemove && workTodo && !this._windowResizeBind) {
-            this._windowResizeBind = this.onParentResize.bind(this); // so we can properly remove later
-            window.addEventListener('resize', this._windowResizeBind);
-        }
-        else if ((forceRemove || !workTodo) && this._windowResizeBind) {
-            window.removeEventListener('resize', this._windowResizeBind);
-            delete this._windowResizeBind; // remove link to us so we can free
+        // or supporting new fitToContent option.
+        const trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.fitToContent || !this.opts.disableOneColumnMode || this.engine.nodes.find(n => n.fitToContent));
+        if (!forceRemove && trackSize && !this.resizeObserver) {
+            this._sizeThrottle = Utils.throttle(() => this.onResize(), this.opts.cellHeightThrottle);
+            this.resizeObserver = new ResizeObserver(entries => this._sizeThrottle());
+            this.resizeObserver.observe(this.el);
+        }
+        else if ((forceRemove || !trackSize) && this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            delete this.resizeObserver;
+            delete this._sizeThrottle;
         }
         return this;
     }
@@ -1879,7 +1960,7 @@ class GridStack {
     /** @internal mark item for removal */
     _itemRemoving(el, remove) {
         let node = el ? el.gridstackNode : undefined;
-        if (!node || !node.grid)
+        if (!node || !node.grid || el.classList.contains(this.opts.removableOptions.decline))
             return;
         remove ? node._isAboutToRemove = true : delete node._isAboutToRemove;
         remove ? el.classList.add('grid-stack-item-removing') : el.classList.remove('grid-stack-item-removing');
@@ -1945,17 +2026,12 @@ class GridStack {
                     return;
                 node.el = target;
                 if (node._isAboutToRemove) {
-                    let gridToNotify = el.gridstackNode.grid;
-                    if (gridToNotify._gsEventHandler[event.type]) {
-                        gridToNotify._gsEventHandler[event.type](event, target);
+                    let grid = el.gridstackNode.grid;
+                    if (grid._gsEventHandler[event.type]) {
+                        grid._gsEventHandler[event.type](event, target);
                     }
-                    this._removeDD(el);
-                    gridToNotify.engine.removedNodes.push(node);
-                    gridToNotify._triggerRemoveEvent();
-                    // break circular links and remove DOM
-                    delete el.gridstackNode;
-                    delete node.el;
-                    el.remove();
+                    grid.engine.nodes.push(node); // temp add it back so we can proper remove it next
+                    grid.removeWidget(el, true, true);
                 }
                 else {
                     Utils.removePositioningStyles(target);
@@ -1978,6 +2054,8 @@ class GridStack {
                 this._updateContainerHeight(); // @ts-ignore
                 this._triggerChangeEvent();
                 this.engine.endUpdate();
+                if (event.type === 'resizestop')
+                    this.doContentResize(false, node);
             };
             dd.draggable(el, {
                 start: onStartMoving,
@@ -2101,7 +2179,7 @@ class GridStack {
             this.engine.cacheRects(cellWidth, cellHeight, mTop, mRight, mBottom, mLeft);
             delete node._skipDown;
             if (resizing && node.subGrid)
-                node.subGrid.onParentResize();
+                node.subGrid.onResize();
             this._extraDragRow = 0; // @ts-ignore
             this._updateContainerHeight();
             let target = event.target; // @ts-ignore
@@ -2147,10 +2225,12 @@ class GridStack {
     // legacy method removed
     commit() { obsolete(this, this.batchUpdate(false), 'commit', 'batchUpdate', '5.2'); return this; }
 }
+/** parent class for sizing content. defaults to '.grid-stack-item-content' */
+GridStack.resizeToContentParent = '.grid-stack-item-content';
 /** scoping so users can call GridStack.Utils.sort() for example */
 GridStack.Utils = Utils;
 /** scoping so users can call new GridStack.Engine(12) for example */
 GridStack.Engine = GridStackEngine;
-GridStack.GDRev = '8.3.0';
+GridStack.GDRev = '9.0.0';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map