@grafloria/element 0.4.17 → 0.4.18

package/package.json

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

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

@@ -429,6 +429,13 @@ interface BinderPeer {
     group: GroupModel;
     /** True when this board's engine holds `id` as an item (member lookup). */
     hasItem(id: string): boolean;
+    /**
+     * Drop this board's selection: a press that selects a tile on ONE board of
+     * a canvas clears the others, so a section and its parent never show two
+     * rings at once (Quantia Groups page: three tiles selected across three
+     * boards after three clicks).
+     */
+    clearSelection?(): void;
     /** The member's current cell in this board (undefined when absent). */
     memberCell(id: string): CellRect | undefined;
     /**
@@ -490,6 +497,8 @@ interface AdoptedLeg {
  * unregister. A split board adopts nothing and grows no slab: its `adopt`
  * answers null and `resizeMemberBy` answers unchanged.
  */
+/** 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 };
 export declare function bindDashboardGrid(api: DashboardGridApi, group: GroupModel, options?: DashboardGridOptions): DashboardGridHandle;

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

@@ -153,6 +153,13 @@ const BOARD_REGISTRY = new WeakMap();
  * unregister. A split board adopts nothing and grows no slab: its `adopt`
  * answers null and `resizeMemberBy` answers unchanged.
  */
+/** Clear the selection on every OTHER board of the canvas — one selection per canvas. */
+export function clearOtherSelections(container, self) {
+    var _a, _b;
+    for (const p of (_a = BOARD_REGISTRY.get(container)) !== null && _a !== void 0 ? _a : [])
+        if (p !== self)
+            (_b = p.clearSelection) === null || _b === void 0 ? void 0 : _b.call(p);
+}
 export function registerBoardPeer(container, peer) {
     let set = BOARD_REGISTRY.get(container);
     if (!set) {
@@ -701,11 +708,15 @@ export function bindDashboardGrid(api, group, options = {}) {
      */
     let selectedId;
     const selectWidget = (id) => {
+        if (id !== undefined)
+            clearOtherSelections(api.container, selfPeerRef);
         if (id === selectedId)
             return;
         selectedId = id;
         syncA11y();
     };
+    /** Set once the peer object exists (below); `selectWidget` runs before that only on boot. */
+    let selfPeerRef = null;
     const syncA11y = (only) => {
         var _a, _b;
         if (disposed)
@@ -1790,6 +1801,12 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     const selfPeer = {
         group,
+        clearSelection: () => {
+            if (selectedId === undefined)
+                return;
+            selectedId = undefined;
+            syncA11y();
+        },
         hasItem: (id) => !!engine.getItem(id),
         memberCell: (id) => {
             const it = engine.getItem(id);
@@ -1826,6 +1843,9 @@ export function bindDashboardGrid(api, group, options = {}) {
         adopt,
     };
     peersOnCanvas().add(selfPeer);
+    selfPeerRef = selfPeer;
+    // The board's gap, for chrome that must fit BETWEEN tiles (the outside grip tab).
+    api.container.style.setProperty('--axdb-gap', `${gap}px`);
     const tool = {
         id: `dashboard-grid:${group.id}:${++binderSeq}`,
         priority: 2, // point-specific claim — outranks mode-style tools (see ext/tools.ts)
@@ -2070,7 +2090,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             return;
         if (focusedId !== hit.id || selectedId !== hit.id) {
             focusedId = hit.id;
-            selectedId = hit.id;
+            selectWidget(hit.id);
             syncA11y();
         }
     };
@@ -2422,7 +2442,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             if (disposed || !((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id) || !diagram.getNode(id))
                 return false;
             focusedId = id;
-            selectedId = id;
+            selectWidget(id);
             syncA11y();
             (_c = (_b = hostOf(id)) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b, { preventScroll: true });
             return true;

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 { dragHandleSelector, gripHostOf, gripOf, normalizeDragHandle, ownsPress, pressOnDragHandle, registerBoardPeer, syncGrip, DRAG_HANDLE_CLASS } from './grid-binder.js';
+import { clearOtherSelections, dragHandleSelector, gripHostOf, gripOf, normalizeDragHandle, ownsPress, pressOnDragHandle, registerBoardPeer, syncGrip, DRAG_HANDLE_CLASS } 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';
@@ -372,11 +372,14 @@ export function bindDashboardSplit(api, group, options = {}) {
     /** The selected widget (see grid-binder): stamped `axdb-selected`, shows the grip. */
     let selectedId;
     const selectWidget = (id) => {
+        if (id !== undefined)
+            clearOtherSelections(api.container, selfPeerRef);
         if (id === selectedId)
             return;
         selectedId = id;
         syncA11y();
     };
+    let selfPeerRef = null;
     // Static boards let content be clicked — see grid-binder's staticGuard.
     const staticGuard = (e) => {
         var _a, _b, _c, _d;
@@ -823,7 +826,7 @@ export function bindDashboardSplit(api, group, options = {}) {
             return;
         if (focusedId !== hit.id || selectedId !== hit.id) {
             focusedId = hit.id;
-            selectedId = hit.id;
+            selectWidget(hit.id);
             syncA11y();
         }
     };
@@ -967,7 +970,26 @@ export function bindDashboardSplit(api, group, options = {}) {
     if (layerEl && hostObserver)
         hostObserver.observe(layerEl, { childList: true });
     // -- the handle -------------------------------------------------------------
-    const rowsGuess = () => Math.max(1, Math.round(frame().height / (baseRowHeight + gap)));
+    /**
+     * The row count the tree's cells are written in. A grid-authored board (or
+     * one switched from the grid) carries its members' cells: their extent IS
+     * the row count, and switching back must return the same cells — the guess
+     * below quantised three 14-row sections on a 758-px fit board to 5 rows
+     * (base row height 130), and the grid came back with 14-row inner grids
+     * inside 5-row slabs (Quantia, Groups page, Split → Grid). The guess stays
+     * for a tree-authored board that never had cells.
+     */
+    const rowsAtBind = (() => {
+        let max = 0;
+        for (const id of members()) {
+            const c = persistedCell(id);
+            if (!c)
+                return undefined;
+            max = Math.max(max, c.y + c.h);
+        }
+        return max > 0 ? max : undefined;
+    })();
+    const rowsGuess = () => rowsAtBind !== null && rowsAtBind !== void 0 ? rowsAtBind : Math.max(1, Math.round(frame().height / (baseRowHeight + gap)));
     const handle = {
         sync() {
             if (disposed)
@@ -1021,7 +1043,7 @@ export function bindDashboardSplit(api, group, options = {}) {
             if (!((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id) || !diagram.getNode(id))
                 return false;
             focusedId = id;
-            selectedId = id;
+            selectWidget(id);
             syncA11y();
             (_c = (_b = hostOf(id)) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b, { preventScroll: true });
             return true;
@@ -1168,8 +1190,14 @@ export function bindDashboardSplit(api, group, options = {}) {
     api.renderNow();
     // A split board on a CONTAINER (item 7) sits inside a parent grid: register
     // as a peer so the parent's hitTest hands presses on our tiles to us.
-    const unregisterPeer = registerBoardPeer(api.container, {
+    const selfPeer = {
         group,
+        clearSelection: () => {
+            if (selectedId === undefined)
+                return;
+            selectedId = undefined;
+            syncA11y();
+        },
         hasItem: (id) => { var _a; return ((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id); },
         memberCell: (id) => handle.cellOf(id),
         resizeMemberBy: () => ({ changed: false }),
@@ -1180,7 +1208,10 @@ export function bindDashboardSplit(api, group, options = {}) {
             return f.width * f.height;
         },
         adopt: () => null,
-    });
+    };
+    const unregisterPeer = registerBoardPeer(api.container, selfPeer);
+    selfPeerRef = selfPeer;
+    api.container.style.setProperty('--axdb-gap', `${gap}px`);
     const disposeHandle = handle.dispose.bind(handle);
     handle.dispose = () => {
         unregisterPeer();

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

@@ -235,7 +235,10 @@ const CSS = `
   .grafloria-node-host > .axdb-grip--inside { top: 2px; }
 }
 /* OUTSIDE: a tab on the card's top edge, its corners in line with the card's. */
-.grafloria-node-host > .axdb-grip--outside { top: -11px; height: 11px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; box-shadow: 0 -1px 2px rgba(16, 24, 40, .08); }
+/* The OUTSIDE tab lives in the gap between tiles: never taller than the gap
+   less a pixel (an 11-px tab in a 10-px gap sat on the tile above), never
+   shorter than 6 px so the dots still read. */
+.grafloria-node-host > .axdb-grip--outside { top: calc(-1 * clamp(6px, var(--axdb-gap, 11px) - 1px, 11px)); height: clamp(6px, calc(var(--axdb-gap, 11px) - 1px), 11px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; box-shadow: 0 -1px 2px rgba(16, 24, 40, .08); }
 .grafloria-node-host > .axdb-grip--outside.axdb-grip--left { left: 10px; }
 .grafloria-node-host > .axdb-grip--outside.axdb-grip--right { right: 10px; }
 .grafloria-node-host > .axdb-grip--center { left: 50%; transform: translateX(-50%); }