gridstack 8.4.0 → 9.0.0

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 8.4.0
+ * GridStack 9.0.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -280,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.
@@ -612,6 +612,7 @@ class GridStack {
     batchUpdate(flag = true) {
         this.engine.batchUpdate(flag);
         if (!flag) {
+            this._updateContainerHeight();
             this._triggerRemoveEvent();
             this._triggerAddEvent();
             this._triggerChangeEvent();
@@ -655,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') {
@@ -710,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)
@@ -740,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();
@@ -765,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) {
@@ -911,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;
@@ -1090,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);
             }
@@ -1107,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
@@ -1300,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;
     }
@@ -1393,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;
     }
@@ -1991,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,
@@ -2114,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
@@ -2160,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.4.0';
+GridStack.GDRev = '9.0.0';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map