gridstack 12.4.2 → 12.6.0

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 12.4.2
+ * GridStack 12.6.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2025  Alain Dumesny
@@ -619,8 +619,7 @@ class GridStack {
      * @see {@link http://gridstackjs.com/demo/serialization.html} for complete example
      */
     load(items, addRemove = GridStack.addRemoveCB || true) {
-        items = Utils.cloneDeep(items); // so we can mod
-        const column = this.getColumn();
+        // items = Utils.cloneDeep(items); // TODO: let callee decide by using directly instead of copy we can modify ?
         // make sure size 1x1 (default) is present as it may need to override current sizes
         items.forEach(n => { n.w = n.w || n.minW || 1; n.h = n.h || n.minH || 1; });
         // sort items. those without coord will be appended last
@@ -632,6 +631,7 @@ class GridStack {
         items.forEach(n => { maxColumn = Math.max(maxColumn, (n.x || 0) + n.w); });
         if (maxColumn > this.engine.defaultColumn)
             this.engine.defaultColumn = maxColumn;
+        const column = this.getColumn();
         if (maxColumn > column) {
             // if we're loading (from empty) into a smaller column, check for special responsive layout
             if (this.engine.nodes.length === 0 && this.responseLayout) {
@@ -1345,10 +1345,13 @@ class GridStack {
         }
         // responsive column take over actual count (keep what we have now)
         if (o.columnOpts) {
+            const hadColumnOpts = !!this.opts.columnOpts;
             this.opts.columnOpts = o.columnOpts;
+            if (hadColumnOpts !== !!this.opts.columnOpts)
+                this._updateResizeEvent();
             this.checkDynamicColumn();
         }
-        else if (o.columnOpts === null && this.opts.columnOpts) {
+        else if (o.columnOpts === null && this.opts.columnOpts) { // delete update cmd
             delete this.opts.columnOpts;
             this._updateResizeEvent();
         }
@@ -1374,7 +1377,7 @@ class GridStack {
                 this._updateContainerHeight();
             }
             if (o.maxRow !== undefined)
-                opts.maxRow = o.maxRow;
+                opts.maxRow = this.engine.maxRow = o.maxRow;
         }
         if (o.lazyLoad !== undefined)
             opts.lazyLoad = o.lazyLoad;
@@ -1785,9 +1788,10 @@ class GridStack {
     _writePosAttr(el, n) {
         // Avoid overwriting the inline style of the element during drag/resize, but always update the placeholder
         if ((!n._moving && !n._resizing) || this._placeholder === el) {
+            const xProp = this.opts.rtl ? 'right' : 'left';
             // width/height:1 x/y:0 is set by default in the main CSS, so no need to set inlined vars
             el.style.top = n.y ? (n.y === 1 ? `var(--gs-cell-height)` : `calc(${n.y} * var(--gs-cell-height))`) : null;
-            el.style.left = n.x ? (n.x === 1 ? `var(--gs-column-width)` : `calc(${n.x} * var(--gs-column-width))`) : null;
+            el.style[xProp] = n.x ? (n.x === 1 ? `var(--gs-column-width)` : `calc(${n.x} * var(--gs-column-width))`) : null;
             el.style.width = n.w > 1 ? `calc(${n.w} * var(--gs-column-width))` : null;
             el.style.height = n.h > 1 ? `calc(${n.h} * var(--gs-cell-height))` : null;
         }
@@ -2574,10 +2578,10 @@ class GridStack {
                 this._removeDD(el); // nukes everything instead of just disable, will add some styles back next
                 delete node._initDD;
             }
-            if (disable)
+            if (disable) {
                 el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435
-            if (!force)
                 return this;
+            }
         }
         if (!node._initDD) {
             // variables used/cashed between the 3 start/move/end methods, in addition to node passed above
@@ -2644,11 +2648,13 @@ class GridStack {
             dd.draggable(el, {
                 start: onStartMoving,
                 stop: onEndMoving,
-                drag: dragOrResize
+                drag: dragOrResize,
+                rtl: this.opts.rtl,
             }).resizable(el, {
                 start: onStartMoving,
                 stop: onEndMoving,
-                resize: dragOrResize
+                resize: dragOrResize,
+                rtl: this.opts.rtl,
             });
             node._initDD = true; // we've set DD support now
         }
@@ -2724,10 +2730,9 @@ class GridStack {
         if (event.type === 'drag') {
             if (node._temporaryRemoved)
                 return; // handled by dropover
-            const distance = ui.position.top - node._prevYPix;
             node._prevYPix = ui.position.top;
             if (this.opts.draggable.scroll !== false) {
-                Utils.updateScrollPosition(el, ui.position, distance);
+                DDManager.dragElement?.updateScrollPosition(this.el);
             }
             // get new position taking into account the margin in the direction we are moving! (need to pass mid point by margin)
             const left = ui.position.left + (ui.position.left > node._lastUiPosition.left ? -mRight : mLeft);
@@ -2765,11 +2770,17 @@ class GridStack {
                 return;
             if (node._lastTried && node._lastTried.w === p.w && node._lastTried.h === p.h)
                 return; // skip one we tried (but failed)
-            // if we size on left/top side this might move us, so get possible new position as well
-            const left = ui.position.left + mLeft;
-            const top = ui.position.top + mTop;
-            p.x = Math.round(left / cellWidth);
-            p.y = Math.round(top / cellHeight);
+            // only recalculate position for handles that move the top-left corner (N/W).
+            // for SE/S/E handles the top-left is anchored — recalculating from pixels causes
+            // rounding drift on fine grids where cellWidth/cellHeight are only a few pixels. #385 #1356
+            if (event.hasMovedX) {
+                const left = ui.position.left + mLeft;
+                p.x = Math.round(left / cellWidth);
+            }
+            if (event.hasMovedY) {
+                const top = ui.position.top + mTop;
+                p.y = Math.round(top / cellHeight);
+            }
             resizing = true;
         }
         node._event = event;
@@ -2858,6 +2869,6 @@ GridStack.Utils = Utils;
 /** scoping so users can call new GridStack.Engine(12) for example */
 GridStack.Engine = GridStackEngine;
 /** @internal current version compiled in code */
-GridStack.GDRev = '12.4.2';
+GridStack.GDRev = '12.6.0';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map