@grafloria/element 0.4.19 → 0.4.21

package/package.json

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

package/src/lib/dashboard-kit/grid-binder.d.ts

@@ -513,14 +513,19 @@ interface AdoptedLeg {
  * unregister. A split board adopts nothing and grows no slab: its `adopt`
  * answers null and `resizeMemberBy` answers unchanged.
  */
+/** The board on the canvas that holds `groupId` as a member — a nested board's parent. */
+export declare function parentPeerOf(container: HTMLElement, groupId: string): BinderPeer | null;
 /** Clear the selection on every OTHER board of the canvas — one selection per canvas. */
 export declare function clearOtherSelections(container: HTMLElement, self: BinderPeer | null): void;
 export declare function registerBoardPeer(container: HTMLElement, peer: BinderPeer): () => void;
 export type { BinderPeer };
-interface ResizeEdges {
+/** A press this close (CSS px) to a tile's border takes that edge for a resize. */
+export declare const EDGE_GRIP = 7;
+export interface ResizeEdges {
     n: boolean;
     e: boolean;
     s: boolean;
     w: boolean;
 }
+export declare const anyEdge: (E: ResizeEdges) => boolean;
 export declare function bindDashboardGrid(api: DashboardGridApi, group: GroupModel, options?: DashboardGridOptions): DashboardGridHandle;

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

@@ -153,6 +153,14 @@ const BOARD_REGISTRY = new WeakMap();
  * unregister. A split board adopts nothing and grows no slab: its `adopt`
  * answers null and `resizeMemberBy` answers unchanged.
  */
+/** The board on the canvas that holds `groupId` as a member — a nested board's parent. */
+export function parentPeerOf(container, groupId) {
+    var _a;
+    for (const p of (_a = BOARD_REGISTRY.get(container)) !== null && _a !== void 0 ? _a : [])
+        if (p.group.id !== groupId && p.hasItem(groupId))
+            return p;
+    return null;
+}
 /** Clear the selection on every OTHER board of the canvas — one selection per canvas. */
 export function clearOtherSelections(container, self) {
     var _a, _b;
@@ -241,7 +249,7 @@ class SetGroupCellCommand extends Command {
 const DRAG_THRESHOLD = 4;
 const GLIDE_OFF_DELAY = 400;
 /** A press this close (CSS px) to a tile's border takes that edge for a resize. */
-const EDGE_GRIP = 7;
+export const EDGE_GRIP = 7;
 const NO_EDGES = { n: false, e: false, s: false, w: false };
 /** Which of a host's edges a client point is within EDGE_GRIP of (none when outside). */
 function edgesNear(host, cx, cy) {
@@ -255,7 +263,7 @@ function edgesNear(host, cx, cy) {
         e: r.right - cx <= EDGE_GRIP,
     };
 }
-const anyEdge = (E) => E.n || E.e || E.s || E.w;
+export const anyEdge = (E) => E.n || E.e || E.s || E.w;
 /** The resize cursor for a set of edges ('' when none). */
 function cursorFor(E) {
     const v = E.n || E.s;
@@ -453,7 +461,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 +1708,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 +1740,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 +1824,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)
@@ -2094,7 +2135,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         id: `dashboard-grid:${group.id}:${++binderSeq}`,
         priority: 2, // point-specific claim — outranks mode-style tools (see ext/tools.ts)
         hitTest(ev, hit) {
-            var _a, _b;
+            var _a, _b, _c, _d;
             if (disposed)
                 return false;
             if (gesture || slabGesture || forwardSlab)
@@ -2117,6 +2158,17 @@ export function bindDashboardGrid(api, group, options = {}) {
                 }
                 return insideMemberGroupFrame(ev.world.x, ev.world.y);
             }
+            // An EMPTY press inside a NESTED board's frame is that board's: its
+            // dividers, its band, its own section press (which it hands back up).
+            // Ties went to the first registered tool, and a section re-bound by a
+            // layout switch registers AFTER its parent — so the parent took every
+            // divider press in a split section (dead dividers) and, near the
+            // section's edge, turned it into a section resize (the width changed
+            // while a control's height was being dragged — Quantia, Groups page).
+            for (const p of (_c = BOARD_REGISTRY.get(api.container)) !== null && _c !== void 0 ? _c : []) {
+                if (p !== selfPeer && ((_d = group.members) !== null && _d !== void 0 ? _d : new Set()).has(p.group.id) && p.containsWorld(ev.world.x, ev.world.y))
+                    return false;
+            }
             // Claim (and deaden) empty presses inside a member group's frame so the
             // built-in group-drag cannot fight the pack layout for the KPI slab —
             // and empty presses on the BOARD itself: its group is a layout
@@ -2126,7 +2178,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 +2188,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 +2215,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 +2228,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 +2237,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 +2295,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/split-binder.js

@@ -25,7 +25,7 @@
 import { __awaiter } from "tslib";
 import { Command } from '@grafloria/engine';
 import { LiveRegionController, registerTool } from '@grafloria/renderer';
-import { clearOtherSelections, dragHandleSelector, gripHostOf, gripOf, normalizeDragHandle, ownsPress, pressOnDragHandle, registerBoardPeer, syncGrip, DRAG_HANDLE_CLASS } from './grid-binder.js';
+import { anyEdge, clearOtherSelections, dragHandleSelector, gripHostOf, gripOf, normalizeDragHandle, ownsPress, parentPeerOf, pressOnDragHandle, registerBoardPeer, syncGrip, DRAG_HANDLE_CLASS, EDGE_GRIP } from './grid-binder.js';
 import { cellFromGridItem } from './grid-mapping.js';
 import { addSplitLeaf, cellsFromSplit, cloneSplit, dividersOf, groupRectsOf, insertSplitLeaf, moveSplitDivider, normalizeSplit, pathToLeaf, projectSplit, removeSplitLeaf, splitFromCells, splitLeaves, } from './split-layout.js';
 import { ensureDashboardKitStyles } from './styles.js';
@@ -99,6 +99,8 @@ export function bindDashboardSplit(api, group, options = {}) {
     let designW = (_k = (_j = group.size) === null || _j === void 0 ? void 0 : _j.width) !== null && _k !== void 0 ? _k : 0;
     let disposed = false;
     let gesture = null;
+    /** The PARENT running a resize of OUR section from a press this tool claimed. */
+    let forwardSlab = null;
     let focusedId;
     const live = liveRegionFor(api.container);
     // -- geometry ---------------------------------------------------------------
@@ -634,7 +636,7 @@ export function bindDashboardSplit(api, group, options = {}) {
             var _a;
             if (disposed)
                 return false;
-            if (gesture)
+            if (gesture || forwardSlab)
                 return true;
             if (!ownsPress(api.container, diagram, ev, hit))
                 return false;
@@ -643,7 +645,7 @@ export function bindDashboardSplit(api, group, options = {}) {
             return worldInsideBoard(ev.world.x, ev.world.y);
         },
         onPointerDown(ev, hit) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             if (gesture)
                 return;
             const target = ((_b = (_a = ev.source) === null || _a === void 0 ? void 0 : _a.target) !== null && _b !== void 0 ? _b : null);
@@ -678,8 +680,27 @@ export function bindDashboardSplit(api, group, options = {}) {
             // sits above the card's box) — see grid-binder.
             const gripId = (_e = (_d = gripHostOf(target)) === null || _d === void 0 ? void 0 : _d.getAttribute('data-node-id')) !== null && _e !== void 0 ? _e : null;
             const onGrip = !!gripId && ((_f = group.members) !== null && _f !== void 0 ? _f : new Set()).has(gripId);
-            if (!hit.node && !onGrip) {
-                (_h = (_g = diagram).clearSelection) === null || _h === void 0 ? void 0 : _h.call(_g);
+            const sectionHandle = (_g = target === null || target === void 0 ? void 0 : target.closest) === null || _g === void 0 ? void 0 : _g.call(target, '.axdb-slab > .axdb-rs');
+            if ((!hit.node && !onGrip) || sectionHandle) {
+                // OUR OWN empty band or corner handle, and we are a section of a
+                // parent board: select the section there; an edge or the handle
+                // starts the section resize, which the parent runs while this tool
+                // forwards the pointer sequence (the grid binder does the same).
+                const parent = parentPeerOf(api.container, group.id);
+                if ((parent === null || parent === void 0 ? void 0 : parent.selectMember) && (sectionHandle || worldInsideBoard(ev.world.x, ev.world.y))) {
+                    const own = ((_h = sectionHandle === null || sectionHandle === void 0 ? void 0 : sectionHandle.parentElement) === null || _h === void 0 ? void 0 : _h.getAttribute('data-slab-id')) === group.id;
+                    parent.selectMember(group.id);
+                    if (!isStatic && parent.beginSlabResize) {
+                        const f = frame();
+                        const edges = own
+                            ? rtl ? { n: false, e: false, s: true, w: true } : { n: false, e: true, s: true, w: false }
+                            : { n: ev.world.y - f.y <= EDGE_GRIP, s: f.y + f.height - ev.world.y <= EDGE_GRIP, w: ev.world.x - f.x <= EDGE_GRIP, e: f.x + f.width - ev.world.x <= EDGE_GRIP };
+                        if (anyEdge(edges) && parent.beginSlabResize(group.id, edges, ev))
+                            forwardSlab = parent;
+                    }
+                    return;
+                }
+                (_k = (_j = diagram).clearSelection) === null || _k === void 0 ? void 0 : _k.call(_j);
                 selectWidget(undefined);
                 api.render();
                 return;
@@ -688,9 +709,9 @@ export function bindDashboardSplit(api, group, options = {}) {
             if (!node)
                 return;
             selectWidget(node.id); // a press selects, whether or not it starts a gesture
-            if (((_j = node.state) === null || _j === void 0 ? void 0 : _j.locked) === true || isStatic)
+            if (((_l = node.state) === null || _l === void 0 ? void 0 : _l.locked) === true || isStatic)
                 return;
-            if (((_k = node.getMetadata) === null || _k === void 0 ? void 0 : _k.call(node, 'widgetMovable')) === false)
+            if (((_m = node.getMetadata) === null || _m === void 0 ? void 0 : _m.call(node, 'widgetMovable')) === false)
                 return;
             // Drag-handle mode: only the handle (the caption strip, a custom element
             // or the painted grip) lifts a widget out — see pressOnDragHandle.
@@ -723,12 +744,27 @@ export function bindDashboardSplit(api, group, options = {}) {
             };
         },
         onPointerMove(ev) {
-            onToolMove(ev);
+            var _a;
+            if (forwardSlab)
+                (_a = forwardSlab.slabMove) === null || _a === void 0 ? void 0 : _a.call(forwardSlab, ev);
+            else
+                onToolMove(ev);
         },
         onPointerUp() {
-            onToolUp();
+            var _a;
+            if (forwardSlab) {
+                (_a = forwardSlab.slabUp) === null || _a === void 0 ? void 0 : _a.call(forwardSlab);
+                forwardSlab = null;
+            }
+            else
+                onToolUp();
         },
         onCancel() {
+            var _a;
+            if (forwardSlab) {
+                (_a = forwardSlab.slabCancel) === null || _a === void 0 ? void 0 : _a.call(forwardSlab);
+                forwardSlab = null;
+            }
             cancelActiveGesture();
         },
     };

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 */