@grafloria/element 0.4.24 → 0.4.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafloria/element",
-  "version": "0.4.24",
+  "version": "0.4.26",
   "type": "module",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",

package/src/lib/dashboard-kit/grid-binder.js

@@ -1706,6 +1706,19 @@ export function bindDashboardGrid(api, group, options = {}) {
         // ratchet's second disguise (grow committed; a fresh shrink gesture could
         // never pull low enough to ask the parent for a row back).
         let h = bottom - top;
+        /**
+         * Did the escalation below move this tile AS PART OF THE STRIP? A
+         * full-height tile shares its row count with every other full-height tile
+         * in the section, so once the strip grew, this tile's height is the
+         * strip's — not whatever its own pixels re-quantise to. Without this the
+         * gesture undid itself for its own tile and left the NEIGHBOUR grown:
+         * drag Churn's bottom 70 px and ORDERS became two rows while Churn stayed
+         * one (reported from the fluid demo). The cause is the row height
+         * changing mid-gesture: 86 px rows make +70 read as 2 rows, and the
+         * moment the section grows, rows become 108 px and the same pixels read
+         * as 1 again. See the sibling rule for the un-pulled axis below.
+         */
+        let stripFollow = false;
         // NESTED HEIGHT ESCALATION (live report: "i cant increase height"). A
         // bounded strip cannot grow a tile taller than itself — so pulling
         // clearly past its bottom GROWS THE STRIP: the slab gains a row in the
@@ -1720,10 +1733,13 @@ export function bindDashboardGrid(api, group, options = {}) {
         // commit and for Escape.
         // NESTED ESCALATION — a section is a board one level down, and a pull
         // inside it can need rows the section does not hold. Two shapes:
-        //  · a tile spanning the section's FULL HEIGHT (every tile of a one-row
-        //    KPI strip): the section gains a row and every full-height tile grows
-        //    with it — a row of tiles pulled taller stays a row (s21) — and gives
-        //    it back when pulled up, never below the design;
+        //  · a tile spanning the section's FULL HEIGHT (any tile of a one-row KPI
+        //    strip): the section gains a row and THE DRAGGED TILE takes it; its
+        //    siblings keep their own cells, and the row goes back when the tile is
+        //    pulled up again, never below the design. (Until 0.4.26 every
+        //    full-height tile grew together — "a row stays a row" — but that
+        //    resized the widget NEXT to the one under the pointer, which is not
+        //    what a grid resize means.)
         //  · a PARTIAL tile (a one-row control in a 14-row panel): it pushes what
         //    is below it; a row the pushed layout needs and the section does not
         //    hold is asked of the board, one per pointer step, and rows the
@@ -1764,25 +1780,49 @@ export function bindDashboardGrid(api, group, options = {}) {
                 // The SAME rounding the resize path quantises with, or the tile shrinks
                 // through that path first and the section never gets its row back.
                 const wantRows = Math.max(1, Math.round((h + gap) / rowPx));
-                const wantsMore = wantRows > pulled.h;
-                const wantsLess = wantRows < pulled.h;
                 const fullHeight = pulled.y === 0 && pulled.h >= inner;
-                const fullOnes = engine.getItems().filter((i) => i.y === 0 && i.h >= inner).map((i) => i.id);
-                const resizeAll = (ids, rowsTo) => {
-                    for (const id of ids) {
-                        const it = engine.getItem(id);
-                        if (it)
-                            engine.resizeCheck(id, it.w, rowsTo);
-                    }
-                };
+                // For the WHOLE gesture, not just the move that escalated: a strip
+                // tile's height is its cells. Set on every move so the tile cannot
+                // re-quantise back a row on the moves in between.
+                stripFollow = fullHeight;
+                /**
+                 * A STRIP IS MEASURED FROM THE PRESS, NOT FROM ITSELF. Growing the
+                 * strip changes the row height, so quantising the live pixels against
+                 * the LIVE row height feeds the decision back into its own input: at
+                 * 86 px rows a +80 px pull reads as 2 rows, the section grows, rows
+                 * become 108 px, the same pointer now reads as 1 row, the section
+                 * shrinks — and the gesture oscillates and lands wherever the last
+                 * move left it (measured: +60/+70/+90 grew, +80 did nothing).
+                 * Counting rows from the row height AT PRESS is monotonic in the
+                 * pointer, so the strip cannot fight itself.
+                 */
+                const startCell = g.startCells.get(g.id);
+                const startRowPx = startCell && startCell.h > 0 ? (g.startSize.height + gap) / startCell.h : rowPx;
+                const stripRows = startCell
+                    ? Math.max(1, startCell.h + Math.round((h - g.startSize.height) / startRowPx))
+                    : wantRows;
+                const effWant = fullHeight ? stripRows : wantRows;
+                const wantsMore = effWant > pulled.h;
+                const wantsLess = effWant < pulled.h;
                 let touched = false;
                 if (wantsMore) {
-                    if (fullHeight) {
+                    if (fullHeight && !E.s) {
+                        // A tile that already starts at row 0 has nothing above it, so a
+                        // TOP-edge pull has nowhere to go: refuse it rather than growing
+                        // the tile downwards, away from the edge under the pointer. Same
+                        // rule the partial path follows (0.4.20).
+                    }
+                    else if (fullHeight) {
                         const res = parent.resizeMemberBy(group.id, +1);
                         if (res.changed) {
                             record(res, +1);
                             setInnerRows(inner + 1);
-                            resizeAll(fullOnes, inner + 1);
+                            // ONLY THE TILE UNDER THE POINTER CHANGES. The section grows to
+                            // hold it and its siblings keep their own cells — a grid resize
+                            // adjusts what you grabbed, nothing else. (This board used to
+                            // grow EVERY full-height tile together, so pulling one KPI of a
+                            // strip silently resized its neighbour too.)
+                            engine.resizeCheck(g.id, pulled.w, pulled.h + 1);
                             touched = true;
                         }
                     }
@@ -1806,14 +1846,21 @@ export function bindDashboardGrid(api, group, options = {}) {
                 else if (wantsLess) {
                     if (fullHeight) {
                         if (slabRows > designRows && inner > 1) {
-                            resizeAll(fullOnes, inner - 1);
-                            const res = parent.resizeMemberBy(group.id, -1);
-                            if (res.changed) {
+                            // Shrink the dragged tile, then hand back only the rows the
+                            // section no longer needs — a sibling still using them keeps
+                            // them (the extent floor below).
+                            engine.resizeCheck(g.id, pulled.w, Math.max(1, effWant));
+                            const floor = Math.max(designRows, extentOf(engine.getItems()));
+                            let slab = slabRows;
+                            let bound = inner;
+                            while (slab > floor) {
+                                const res = parent.resizeMemberBy(group.id, -1);
+                                if (!res.changed)
+                                    break;
                                 record(res, -1);
-                                setInnerRows(inner - 1);
-                            }
-                            else {
-                                resizeAll(fullOnes, inner);
+                                slab -= 1;
+                                bound -= 1;
+                                setInnerRows(bound);
                             }
                             touched = true;
                         }
@@ -1871,7 +1918,11 @@ export function bindDashboardGrid(api, group, options = {}) {
             // projection of its cell span instead of the start-of-gesture pixels.
             if (!pullsX)
                 w = itemNow.w * (cuNow + gap) - gap;
-            if (!pullsY)
+            // …and a tile the STRIP just moved follows its cells on the pulled axis
+            // too: the strip is one row of tiles, so the dragged tile keeps the row
+            // count its peers were given rather than re-quantising against the row
+            // height the escalation itself just changed.
+            if (!pullsY || stripFollow)
                 h = itemNow.h * (rhNow + gap) - gap;
         }
         // Anchor: the pulled edges follow w/h, the opposite ones stay put — on