@grafloria/element 0.4.20 → 0.4.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafloria/element",
-  "version": "0.4.20",
+  "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;
@@ -2127,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)
@@ -2150,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

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();
         },
     };