@grafloria/element 0.4.19 → 0.4.20

package/package.json

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

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

@@ -453,7 +453,15 @@ export function bindDashboardGrid(api, group, options = {}) {
         designHeight: sizing === 'fit' ? frame().height : designH,
         rtl,
     });
-    const rows = () => Math.max(1, engine.rows());
+    /**
+     * The rows the board is laid out in. A BOUNDED board (a section) keeps its
+     * bound's rows even when its content ends higher — empty rows stay empty
+     * rows, as in gridstack — instead of stretching the rest to fill the slab:
+     * that stretch made a tile pulled shorter shrink FASTER than the pointer
+     * (each row it gave up made the remaining rows taller, so the same pixel
+     * height quantised to fewer rows on the next move — kit lab L37).
+     */
+    const rows = () => Math.max(1, engine.rows(), maxRows !== null && maxRows !== void 0 ? maxRows : 0);
     const htmlLayer = () => api.container.querySelector('.grafloria-html-layer');
     const hostOf = (id) => {
         const esc = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id.replace(/"/g, '\\"');
@@ -1692,6 +1700,10 @@ export function bindDashboardGrid(api, group, options = {}) {
                             touched = true;
                         }
                     }
+                    else if (!E.s) {
+                        // A top-edge pull needs the row ABOVE: the anchored resize path
+                        // decides it (refused when that row is taken) — never the section.
+                    }
                     else if (!engine.resizeCheck(g.id, pulled.w, pulled.h + 1).changed) {
                         const res = parent.resizeMemberBy(group.id, +1);
                         if (res.changed) {
@@ -1720,15 +1732,22 @@ export function bindDashboardGrid(api, group, options = {}) {
                             touched = true;
                         }
                     }
-                    else if (pulled.h > 1) {
-                        engine.resizeCheck(g.id, pulled.w, pulled.h - 1);
+                    else if (pulled.h > 1 && E.s) {
+                        // Shrink to the row the pointer asks for (one row per move lagged
+                        // a fast pull and overshot a slow one), then hand every row the
+                        // layout no longer needs back to the board.
+                        engine.resizeCheck(g.id, pulled.w, Math.max(1, wantRows));
                         const floor = Math.max(designRows, extentOf(engine.getItems()));
-                        if (slabRows > floor) {
+                        let slab = slabRows;
+                        let bound = inner;
+                        while (slab > floor) {
                             const res = parent.resizeMemberBy(group.id, -1);
-                            if (res.changed) {
-                                record(res, -1);
-                                setInnerRows(inner - 1);
-                            }
+                            if (!res.changed)
+                                break;
+                            record(res, -1);
+                            slab -= 1;
+                            bound -= 1;
+                            setInnerRows(bound);
                         }
                         touched = true;
                     }
@@ -1797,9 +1816,23 @@ export function bindDashboardGrid(api, group, options = {}) {
             const moves = tx !== itemNow.x || ty !== itemNow.y;
             const growing = span.w > itemNow.w || span.h > itemNow.h;
             let changed = false;
-            if (moves && growing)
-                changed = engine.moveCheck(g.id, tx, ty, { gate: false }).changed || changed;
-            changed = engine.resizeCheck(g.id, span.w, span.h).changed || changed;
+            // A north or west pull grows by MOVING the anchor first; when that move
+            // is refused (the row above is taken) the growth is refused with it —
+            // the first version fell through to a plain resize and grew the tile at
+            // the OPPOSITE edge, so pulling a control's top edge up made it taller
+            // at the bottom and pushed its section a row (kit lab L37).
+            let anchored = true;
+            if (moves && growing) {
+                // The anchor may move only into FREE cells: a move that pushes would
+                // relocate the tile (a top-edge pull sent a control to row 0 and its
+                // neighbours below it) instead of growing it.
+                const probe = { x: tx, y: ty, w: itemNow.w, h: itemNow.h };
+                const blocked = engine.getItems().some((o) => o.id !== g.id && o.x < probe.x + probe.w && probe.x < o.x + o.w && o.y < probe.y + probe.h && probe.y < o.y + o.h);
+                anchored = !blocked && engine.moveCheck(g.id, tx, ty, { gate: false }).changed;
+                changed = anchored || changed;
+            }
+            if (anchored)
+                changed = engine.resizeCheck(g.id, span.w, span.h).changed || changed;
             if (moves && !growing)
                 changed = engine.moveCheck(g.id, tx, ty, { gate: false }).changed || changed;
             if (changed)
@@ -2126,7 +2159,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             return insideMemberGroupFrame(ev.world.x, ev.world.y) || worldInsideBoard(ev.world.x, ev.world.y);
         },
         onPointerDown(ev, hit) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
             if (gesture)
                 return; // mid-palette
             const target = ((_b = (_a = ev.source) === null || _a === void 0 ? void 0 : _a.target) !== null && _b !== void 0 ? _b : null);
@@ -2136,12 +2169,15 @@ export function bindDashboardGrid(api, group, options = {}) {
             const gripHost = gripHostOf(target);
             const gripId = (_c = gripHost === null || gripHost === void 0 ? void 0 : gripHost.getAttribute('data-node-id')) !== null && _c !== void 0 ? _c : null;
             const onGrip = !!gripId && ((_d = group.members) !== null && _d !== void 0 ? _d : new Set()).has(gripId);
-            if (!hit.node && !onGrip) {
+            // A SECTION's corner handle sits on top of whatever tile shares that
+            // corner; the DOM target names the section, the hit test the tile.
+            const sectionHandle = (_e = target === null || target === void 0 ? void 0 : target.closest) === null || _e === void 0 ? void 0 : _e.call(target, '.axdb-slab > .axdb-rs');
+            if ((!hit.node && !onGrip) || sectionHandle) {
                 // A press on a SECTION — its empty band, its corner handle or its
                 // frame edge — selects the section; the handle or an edge resizes it.
-                const slabHandle = (_e = target === null || target === void 0 ? void 0 : target.closest) === null || _e === void 0 ? void 0 : _e.call(target, '.axdb-slab > .axdb-rs');
-                const slabId = (_g = (_f = slabHandle === null || slabHandle === void 0 ? void 0 : slabHandle.parentElement) === null || _f === void 0 ? void 0 : _f.getAttribute('data-slab-id')) !== null && _g !== void 0 ? _g : memberGroupAt(ev.world.x, ev.world.y);
-                const grp = slabId && ((_h = group.members) !== null && _h !== void 0 ? _h : new Set()).has(slabId) ? diagram.getGroup(slabId) : undefined;
+                const slabHandle = (_f = target === null || target === void 0 ? void 0 : target.closest) === null || _f === void 0 ? void 0 : _f.call(target, '.axdb-slab > .axdb-rs');
+                const slabId = (_h = (_g = slabHandle === null || slabHandle === void 0 ? void 0 : slabHandle.parentElement) === null || _g === void 0 ? void 0 : _g.getAttribute('data-slab-id')) !== null && _h !== void 0 ? _h : memberGroupAt(ev.world.x, ev.world.y);
+                const grp = slabId && ((_j = group.members) !== null && _j !== void 0 ? _j : new Set()).has(slabId) ? diagram.getGroup(slabId) : undefined;
                 if (slabId && grp) {
                     selectWidget(slabId);
                     api.render();
@@ -2160,7 +2196,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 // forwards the pointer sequence.
                 const parent = parentPeer();
                 if ((parent === null || parent === void 0 ? void 0 : parent.selectMember) && worldInsideBoard(ev.world.x, ev.world.y)) {
-                    const ownHandle = ((_j = slabHandle === null || slabHandle === void 0 ? void 0 : slabHandle.parentElement) === null || _j === void 0 ? void 0 : _j.getAttribute('data-slab-id')) === group.id;
+                    const ownHandle = ((_k = slabHandle === null || slabHandle === void 0 ? void 0 : slabHandle.parentElement) === null || _k === void 0 ? void 0 : _k.getAttribute('data-slab-id')) === group.id;
                     parent.selectMember(group.id);
                     if (!isStatic && parent.beginSlabResize) {
                         const edges = ownHandle
@@ -2173,7 +2209,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 }
                 // The board's own empty area: a void click. Nothing to drag, and the
                 // selection clears exactly as a click outside any board would.
-                (_l = (_k = diagram).clearSelection) === null || _l === void 0 ? void 0 : _l.call(_k);
+                (_m = (_l = diagram).clearSelection) === null || _m === void 0 ? void 0 : _m.call(_l);
                 selectWidget(undefined);
                 api.render();
                 return;
@@ -2182,17 +2218,17 @@ export function bindDashboardGrid(api, group, options = {}) {
             if (!node)
                 return;
             selectWidget(node.id); // a press selects, whether or not it starts a gesture
-            if (((_m = node.state) === null || _m === void 0 ? void 0 : _m.locked) === true)
+            if (((_o = node.state) === null || _o === void 0 ? void 0 : _o.locked) === true)
                 return; // pinned: refuse; click still focuses
             if (isStatic)
                 return; // a static board: claimed and deadened, click still focuses
             // Which edges did the press take? The corner handle names its own (s+e,
             // or s+w on RTL); a bare press within EDGE_GRIP of the tile's border
             // takes that border; anywhere else is a move. A grip press is a move.
-            const onHandle = !!((_o = target === null || target === void 0 ? void 0 : target.closest) === null || _o === void 0 ? void 0 : _o.call(target, '.axdb-rs'));
+            const onHandle = !!((_p = target === null || target === void 0 ? void 0 : target.closest) === null || _p === void 0 ? void 0 : _p.call(target, '.axdb-rs'));
             const hostEl = hostOf(node.id);
-            const resizable = ((_p = node.getMetadata) === null || _p === void 0 ? void 0 : _p.call(node, 'widgetResizable')) !== false;
-            const movable = ((_q = node.getMetadata) === null || _q === void 0 ? void 0 : _q.call(node, 'widgetMovable')) !== false;
+            const resizable = ((_q = node.getMetadata) === null || _q === void 0 ? void 0 : _q.call(node, 'widgetResizable')) !== false;
+            const movable = ((_r = node.getMetadata) === null || _r === void 0 ? void 0 : _r.call(node, 'widgetMovable')) !== false;
             // `ev.screen` is ELEMENT-LOCAL px; host rects are in client px. Compare
             // like with like — the source event's clientX/Y when there is one, else
             // the container's origin plus the local offset.
@@ -2240,7 +2276,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 startSize: { width: node.size.width, height: node.size.height },
                 startPos: { x: node.position.x, y: node.position.y },
                 edges,
-                spans: { w: (_r = it === null || it === void 0 ? void 0 : it.w) !== null && _r !== void 0 ? _r : 1, h: (_s = it === null || it === void 0 ? void 0 : it.h) !== null && _s !== void 0 ? _s : 1 },
+                spans: { w: (_s = it === null || it === void 0 ? void 0 : it.w) !== null && _s !== void 0 ? _s : 1, h: (_t = it === null || it === void 0 ? void 0 : it.h) !== null && _t !== void 0 ? _t : 1 },
                 removedFromBoard: false,
                 leg: null,
                 lastWorld: null,

package/src/lib/dashboard-kit/styles.js

@@ -358,9 +358,11 @@ const CSS = `
 /* SECTION CHROME: a pointer-transparent overlay on every member group. It
    wears the selection ring and, while selected, the corner handle. */
 .grafloria-html-layer > .axdb-slab { position: absolute; pointer-events: none; border-radius: var(--axdb-rs-radius, 3px); z-index: 4; }
-.grafloria-html-layer > .axdb-slab.axdb-slab--selected { box-shadow: 0 0 0 1.5px var(--axdb-accent-ring, rgba(59, 82, 217, .55)); }
-.grafloria-html-layer > .axdb-slab > .axdb-rs { pointer-events: auto; opacity: 0; }
-.grafloria-html-layer > .axdb-slab.axdb-slab--selected > .axdb-rs { opacity: 1; }
+/* Selected, the overlay rises above the tiles so ITS corner handle wins a
+   corner it shares with a child's; unselected, its handle takes no presses. */
+.grafloria-html-layer > .axdb-slab.axdb-slab--selected { z-index: 6; box-shadow: 0 0 0 1.5px var(--axdb-accent-ring, rgba(59, 82, 217, .55)); }
+.grafloria-html-layer > .axdb-slab > .axdb-rs { pointer-events: none; opacity: 0; }
+.grafloria-html-layer > .axdb-slab.axdb-slab--selected > .axdb-rs { pointer-events: auto; opacity: 1; }
 .grafloria-html-layer > .axdb-slab.axdb-slab--static > .axdb-rs { display: none; }
 
 /* legend chips, shared by line and donut */