Merge pull request #3420 from adumesny/master

don't recompute w/h during resize if not changed (rounding errors)

Author: adumesny

doc/CHANGES.md

@@ -152,6 +152,7 @@ Change log
 * fix: [#2666](https://github.com/gridstack/gridstack.js/issues/2666) iOS auto-scroll uses visualViewport, and un-bind touch handlers
 * fix: [#3418](https://github.com/gridstack/gridstack.js/pull/3418) preserve saved layout after cancelling a cross-grid drag- #3418 - thank you [sameerdeolalikar](https://github.com/sameerdeolalikar)
 * fix: [#2819](https://github.com/gridstack/gridstack.js/issues/2819) item not moved (to alt position) when colliding fails with an object
+* fix: [#3230](https://github.com/gridstack/gridstack.js/issues/3230) don't recompute w/h unless side can change (rounding errors)
 
 ## 14.0.0 (2026-09-20)
 * feat: [#754](https://github.com/gridstack/gridstack.js/issues/754), [#2866](https://github.com/gridstack/gridstack.js/issues/2866) new `mode?: 'top' | 'float' | 'list' | 'compact'` - items are continuously re-flowed in sequential (row-major) order, like a re-orderable list: dragging, resizing, adding or removing an item re-flows everyone else instead of pushing them down, and dropping an item on another takes its place. See new

spec/integration/gridstack-resize-direction.spec.ts

@@ -0,0 +1,51 @@
+import { GridStack } from '../../src/gridstack';
+import type { GridStackMouseEvent, DDUIData } from '../../src/types';
+
+// Regression test for https://github.com/gridstack/gridstack.js/issues/3230
+// "Horizontal resize unexpectedly changes height when using very high column count and small cellHeight"
+//
+// _dragOrResize() used to re-derive BOTH w and h from the resize helper's pixel size on every
+// 'resize' move event, regardless of which handle was actually being dragged. The dimension the
+// user isn't touching is supposed to stay constant in pixels, but re-deriving it via
+// Math.round(px / cellSize) is lossy: any subpixel/rounding noise in the measured pixel value can
+// flip it by a whole row/column once cellHeight (or cellWidth) is only a few pixels, which is
+// exactly the "column: 1000, cellHeight: 1" setup from the issue.
+describe('GridStack resize direction isolation (#3230)', () => {
+  it('does not change height when only the horizontal (w) handle is dragged', () => {
+    document.body.innerHTML = `
+      <div class="grid-stack">
+        <div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="10" gs-h="10">
+          <div class="grid-stack-item-content">item</div>
+        </div>
+      </div>
+    `;
+    const grid = GridStack.init({ cellHeight: 1, margin: 3 });
+    const node = grid.engine.nodes[0];
+    const el = node.el!;
+
+    const cellWidth = 1;
+    const cellHeight = 1;
+
+    // simulate dragging only the 'w' (west/left) resize handle
+    const event = {
+      type: 'resize',
+      target: el,
+      resizeDir: 'w',
+      hasMovedX: true,
+      hasMovedY: false,
+    } as unknown as GridStackMouseEvent;
+
+    // height carries subpixel rounding noise (10.5 instead of an exact 10) even though the 'w'
+    // handle never touches height - DDResizable leaves it as the untouched original pixel height
+    const ui = {
+      position: { top: 0, left: 2 },
+      size: { width: 8, height: 10.5 },
+    } as DDUIData;
+
+    (grid as unknown as { _dragOrResize: (...args: unknown[]) => void })
+      ._dragOrResize(el, event, ui, node, cellWidth, cellHeight);
+
+    expect(node.w).toBe(8); // the dragged dimension updates correctly
+    expect(node.h).toBe(10); // the untouched dimension must not drift because of pixel rounding noise
+  });
+});

spec/utils-spec.ts

@@ -818,15 +818,47 @@ describe('gridstack utils', () => {
     it('should get transform values from parent', () => {
       const parent = document.createElement('div');
       document.body.appendChild(parent);
-      
+
       const result = Utils.getValuesFromTransformedElement(parent);
-      
+
       expect(result.xScale).toBeDefined();
       expect(result.yScale).toBeDefined();
       expect(result.xOffset).toBeDefined();
       expect(result.yOffset).toBeDefined();
-      
+
+      document.body.removeChild(parent);
+    });
+
+    // Regression test for https://github.com/gridstack/gridstack.js/issues/3230
+    it('keeps scale close to 1 despite device-pixel snapping error, thanks to a large probe', () => {
+      const parent = document.createElement('div');
+      document.body.appendChild(parent);
+      const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
+
+      // Simulate what real browsers do at fractional OS/browser zoom (125%, 150%,...): any
+      // measured element's getBoundingClientRect() is off from its authored CSS size by a fixed
+      // absolute snapping error, regardless of how big that element is.
+      const snapError = 0.5;
+      HTMLElement.prototype.getBoundingClientRect = function (this: HTMLElement) {
+        const width = parseFloat(this.style.width) || 0;
+        const height = parseFloat(this.style.height) || 0;
+        return {
+          width: width + snapError,
+          height: height + snapError,
+          top: 0, left: 0, right: width + snapError, bottom: height + snapError, x: 0, y: 0,
+          toJSON: () => ({}),
+        } as DOMRect;
+      };
+
+      const { xScale, yScale } = Utils.getValuesFromTransformedElement(parent);
+
+      HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
       document.body.removeChild(parent);
+
+      // a 0.5px absolute snapping error is only a 0.05% relative deviation on a 1000px probe -
+      // it would have been a 33% deviation (scale 0.667) on the old 1x1px probe
+      expect(xScale).toBeCloseTo(1, 3);
+      expect(yScale).toBeCloseTo(1, 3);
     });
   });
 
@@ -936,11 +968,11 @@ describe('gridstack utils', () => {
     it('should handle scroll resize events', () => {
       // Test that the function exists and can be called
       expect(typeof Utils.updateScrollResize).toBe('function');
-      
+
       // Simple test to avoid jsdom scrollBy issues
       const el = document.createElement('div');
       const mockEvent = { clientY: 50 } as MouseEvent;
-      
+
       // The function implementation involves DOM scrolling which is complex in jsdom
       // We just verify it's callable without extensive mocking
       try {
@@ -951,4 +983,5 @@ describe('gridstack utils', () => {
       }
     });
   });
+
 });

src/gridstack.ts

@@ -3129,9 +3129,13 @@ export class GridStack {
       // Scrolling page if needed
       Utils.updateScrollResize(event, el, cellHeight);
 
-      // get new size
-      p.w = Math.round((ui.size!.width - mLeft) / cellWidth);
-      p.h = Math.round((ui.size!.height - mTop) / cellHeight);
+      // get new size - only re-derive the dimension(s) the active handle actually changes.
+      // re-deriving an untouched dimension from measured pixels is lossy (subpixel/rounding noise)
+      // and can drift it by a row/column on fine grids where cellWidth/cellHeight are only a few
+      // pixels (e.g. high column count + cellHeight:1). #3230
+      const dir = event.resizeDir || '';
+      p.w = (dir.indexOf('e') > -1 || dir.indexOf('w') > -1) ? Math.round((ui.size!.width - mLeft) / cellWidth) : node.w!;
+      p.h = (dir.indexOf('n') > -1 || dir.indexOf('s') > -1) ? Math.round((ui.size!.height - mTop) / cellHeight) : node.h!;
       if (node.w === p.w && node.h === p.h) return;
       if (node._lastTried && node._lastTried.w === p.w && node._lastTried.h === p.h) return; // skip one we tried (but failed)
 

src/utils.ts

@@ -693,23 +693,29 @@ export class Utils {
    * returns the scale and offsets from said element
   */
   public static getValuesFromTransformedElement(parent: HTMLElement): DragTransform {
+    // use a large probe rather than 1x1px: getBoundingClientRect() reflects the browser's
+    // device-pixel-snapped render, and that snapping error (up to ~1 device pixel) is a huge
+    // relative error on a 1px probe (can be several %) but negligible on a large one, at
+    // fractional OS/browser zoom (125%, 150%,...). A wrong scale here directly corrupts
+    // drag/resize pixel->grid-unit math downstream. #3230
+    const probeSize = 1000;
     const transformReference = document.createElement('div');
     Utils.addElStyles(transformReference, {
       opacity: '0',
       position: 'fixed',
       top: 0 + 'px',
       left: 0 + 'px',
-      width: '1px',
-      height: '1px',
+      width: probeSize + 'px',
+      height: probeSize + 'px',
       zIndex: '-999999',
     });
     parent.appendChild(transformReference);
     const transformValues = transformReference.getBoundingClientRect();
     parent.removeChild(transformReference);
     transformReference.remove();
     return {
-      xScale: 1 / transformValues.width,
-      yScale: 1 / transformValues.height,
+      xScale: probeSize / transformValues.width,
+      yScale: probeSize / transformValues.height,
       xOffset: transformValues.left,
       yOffset: transformValues.top,
     }