@grafloria/element 0.4.8 → 0.4.9

package/package.json

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

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

@@ -268,6 +268,12 @@ export interface DashboardHandle {
     readonly activeView: string;
     /** A widget handle by id (undefined when unknown). */
     widget(id: string): WidgetHandle | undefined;
+    /**
+     * SELECT a widget and move keyboard focus to it — what a press on the widget
+     * does. The selected widget shows its painted grip (`dragHandle: { grip }`)
+     * and a quiet ring; a void click clears. False when the id is unknown.
+     */
+    focusWidget(id: string): boolean;
     /** Every widget handle of a view (default: the active one). */
     widgetsOf(viewId?: string): WidgetHandle[];
     /**

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

@@ -504,6 +504,11 @@ export function createDashboardHandle(ctx) {
         widget(id) {
             return makeWidgetHandle(id);
         },
+        focusWidget(id) {
+            var _a, _b;
+            const b = binders.get((_a = viewOfWidget.get(id)) !== null && _a !== void 0 ? _a : '');
+            return (_b = b === null || b === void 0 ? void 0 : b.focusWidget(id)) !== null && _b !== void 0 ? _b : false;
+        },
         widgetsOf(viewId) {
             var _a;
             const v = views.find((x) => x.id === (viewId !== null && viewId !== void 0 ? viewId : ctx.active));

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

@@ -609,6 +609,20 @@ export function bindDashboardGrid(api, group, options = {}) {
      * and the ROVING TABINDEX — exactly one member per board is a tab stop.
      * Runs with the handles, so a repainted host gets it back too.
      */
+    /**
+     * THE SELECTED WIDGET — the one a press or keyboard focus last landed on.
+     * Stamped on its host as `axdb-selected`; that is what shows the painted
+     * grip (the DevExpress designer shows an item's bar on the selected item
+     * only). A press on a member selects it even when it starts no gesture; a
+     * void click clears it. Distinct from the roving tab stop, which must stay.
+     */
+    let selectedId;
+    const selectWidget = (id) => {
+        if (id === selectedId)
+            return;
+        selectedId = id;
+        syncA11y();
+    };
     const syncA11y = (only) => {
         var _a, _b;
         if (disposed)
@@ -616,6 +630,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         const members = [...((_a = group.members) !== null && _a !== void 0 ? _a : [])].filter((id) => !!diagram.getNode(id));
         if (focusedId && !members.includes(focusedId))
             focusedId = undefined;
+        if (selectedId && !members.includes(selectedId))
+            selectedId = undefined;
         const stop = focusedId !== null && focusedId !== void 0 ? focusedId : members[0];
         for (const id of members) {
             if (only && !only.has(id))
@@ -634,6 +650,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             host.setAttribute('aria-roledescription', 'dashboard widget');
             host.setAttribute('aria-label', bits.join(', '));
             host.setAttribute('tabindex', id === stop ? '0' : '-1');
+            host.classList.toggle('axdb-selected', id === selectedId);
         }
     };
     /**
@@ -1688,11 +1705,15 @@ 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.
                 (_f = (_e = diagram).clearSelection) === null || _f === void 0 ? void 0 : _f.call(_e);
+                selectWidget(undefined);
                 api.render();
                 return;
             }
             const node = diagram.getNode(onGrip ? gripId : hit.node.id);
-            if (!node || ((_g = node.state) === null || _g === void 0 ? void 0 : _g.locked) === true)
+            if (!node)
+                return;
+            selectWidget(node.id); // a press selects, whether or not it starts a gesture
+            if (((_g = node.state) === null || _g === void 0 ? void 0 : _g.locked) === true)
                 return; // pinned: refuse; click still focuses
             if (isStatic)
                 return; // a static board: claimed and deadened, click still focuses
@@ -1833,8 +1854,9 @@ export function bindDashboardGrid(api, group, options = {}) {
         const hit = memberHostAt(e.target);
         if (!hit || disposed)
             return;
-        if (focusedId !== hit.id) {
+        if (focusedId !== hit.id || selectedId !== hit.id) {
             focusedId = hit.id;
+            selectedId = hit.id;
             syncA11y();
         }
     };
@@ -2186,6 +2208,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;
             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

@@ -369,11 +369,21 @@ export function bindDashboardSplit(api, group, options = {}) {
             return '';
         return `${Math.round((r.width / f.width) * 100)} percent wide, ${Math.round((r.height / f.height) * 100)} percent tall`;
     };
+    /** The selected widget (see grid-binder): stamped `axdb-selected`, shows the grip. */
+    let selectedId;
+    const selectWidget = (id) => {
+        if (id === selectedId)
+            return;
+        selectedId = id;
+        syncA11y();
+    };
     const syncA11y = () => {
         var _a, _b, _c, _d;
         if (disposed)
             return;
         const order = splitLeaves(paintedTree()).filter((id) => !!diagram.getNode(id));
+        if (selectedId && !order.includes(selectedId))
+            selectedId = undefined;
         // No corner handles on a split board: size comes from the dividers. A host
         // that carried the grid's handle (a board switched live) sheds it here.
         for (const id of order)
@@ -401,6 +411,7 @@ export function bindDashboardSplit(api, group, options = {}) {
             host.setAttribute('aria-roledescription', 'dashboard widget');
             host.setAttribute('aria-label', bits.filter(Boolean).join(', '));
             host.setAttribute('tabindex', id === stop ? '0' : '-1');
+            host.classList.toggle('axdb-selected', id === selectedId);
         });
     };
     // -- commit -----------------------------------------------------------------
@@ -637,11 +648,15 @@ export function bindDashboardSplit(api, group, options = {}) {
             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);
+                selectWidget(undefined);
                 api.render();
                 return;
             }
             const node = diagram.getNode(onGrip ? gripId : hit.node.id);
-            if (!node || ((_j = node.state) === null || _j === void 0 ? void 0 : _j.locked) === true || isStatic)
+            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)
                 return;
             if (((_k = node.getMetadata) === null || _k === void 0 ? void 0 : _k.call(node, 'widgetMovable')) === false)
                 return;
@@ -779,8 +794,9 @@ export function bindDashboardSplit(api, group, options = {}) {
         const hit = memberHostAt(e.target);
         if (!hit || disposed)
             return;
-        if (focusedId !== hit.id) {
+        if (focusedId !== hit.id || selectedId !== hit.id) {
             focusedId = hit.id;
+            selectedId = hit.id;
             syncA11y();
         }
     };
@@ -978,6 +994,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;
             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/styles.js

@@ -192,21 +192,50 @@ const CSS = `
 .grafloria-node-host > .axdb-grip {
   position: absolute; z-index: 4; box-sizing: border-box; width: 24px; height: 12px;
   border: 1px solid var(--axdb-line, #e7eaf1); border-radius: 3px; background: var(--axdb-card, #fff);
-  color: var(--axdb-muted, #5a6478); cursor: grab; opacity: .8;
+  color: var(--axdb-muted, #5a6478); cursor: grab;
+  /* Shown on the SELECTED widget only (the DevExpress designer shows an item's
+     bar on the selected item): a press or keyboard focus selects, a void
+     click clears. Hidden, it takes no pointer either. */
+  opacity: 0; pointer-events: none; transition: opacity .12s ease;
 }
+.grafloria-node-host.axdb-selected > .axdb-grip, .grafloria-node-host:focus-within > .axdb-grip { opacity: 1; pointer-events: auto; }
 .grafloria-node-host > .axdb-grip::before {
   content: ''; position: absolute; left: 5px; top: 2px; width: 12px; height: 6px;
   background: radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 0 / 4px 3px;
 }
-.grafloria-node-host:hover > .axdb-grip, .grafloria-node-host > .axdb-grip:hover { opacity: 1; border-color: #3b52d9; color: #3b52d9; }
-.grafloria-node-host > .axdb-grip--inside { top: 5px; }
+.grafloria-node-host > .axdb-grip:hover { border-color: #3b52d9; color: #3b52d9; }
+/* The selected card says so, quietly. */
+.grafloria-node-host.axdb-selected > .axdb-widget { box-shadow: 0 0 0 1.5px rgba(59, 82, 217, .55), 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05); }
+/* INSIDE: centred on the header's text line and flush with the card padding,
+   per size tier (padding 13/15, then 8/14, 4/12, 2/12). */
+.grafloria-node-host > .axdb-grip--inside { top: 14px; }
+.grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 15px; }
+.grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 15px; }
+.grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 3px; }
+@container axdb-tile (max-height: 90px) {
+  .grafloria-node-host > .axdb-grip--inside { top: 9px; }
+  .grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 14px; }
+  .grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 14px; }
+  .grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 2px; }
+}
+@container axdb-tile (max-height: 46px) {
+  .grafloria-node-host > .axdb-grip--inside { top: 5px; }
+  .grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 12px; }
+  .grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 12px; }
+  .grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 1px; }
+}
+@container axdb-tile (max-height: 26px) {
+  .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); }
-.grafloria-node-host > .axdb-grip--left { left: 8px; }
-.grafloria-node-host > .axdb-grip--right { right: 8px; }
+.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%); }
-.grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 24px; }
-.grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 24px; }
-.grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 10px; }
+/* The header makes room for an inside grip on its side; a centred one sits above it. */
+.grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 32px; }
+.grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 32px; }
+.grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 12px; }
 .axdb-widget-b { flex: 1; min-height: 0; position: relative; }
 .axdb-widget-b > svg { display: block; width: 100%; height: 100%; }
 .axdb-widget-b.axdb-scroll { overflow: auto; }