@grafloria/element 0.4.36 → 0.4.37

package/package.json

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

package/src/index.d.ts

@@ -79,7 +79,7 @@ export type { JoinColumn, JoinEnd, MatchTier, JoinGuidanceApi, JoinGuidanceOptio
 export type { ErColumn, ErEntitySpec, ErRelationshipSpec, ErCardinality, ErSide, ErDiagramOptions, UmlClassSpec, UmlRelationshipSpec, UmlRelationKind, UmlSide, UmlDiagramOptions, ErEntityDelta, UmlClassDelta, CardEditingHandle, } from './lib/diagram-kit/index.js';
 export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField, ErColumnList, UmlClass, UmlMemberList, } from './lib/diagram-kit/index.js';
 export type { HandleApi } from './lib/diagram-kit/index.js';
-export { bindDashboardGrid, paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT, TAB_DRAG_THRESHOLD, normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, dashboard, defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './lib/dashboard-kit/index.js';
+export { bindDashboardGrid, paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT, TAB_DRAG_THRESHOLD, normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, DASHBOARD_KIT_CSS, dashboard, defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './lib/dashboard-kit/index.js';
 export type { DashboardGridApi, DashboardGridOptions, DashboardGridHandle, CellRect, WorldRect, DashboardGridGeometry, TileDelta, DashboardOptions, DashboardSpec, DashboardSnapshot, DragHandleOption, DragGripOptions, DashboardHandle, DashboardViewSpec, DashboardWidgetSpec, SectionCaption, SectionCaptionOptions, TabsOptions, TabPage, SectionCaptionAction, SectionCaptionFont, WidgetHandle, WidgetRenderer, KpiWidgetData, LineWidgetData, LineSeries, BarWidgetData, DonutWidgetData, FunnelWidgetData, TableWidgetData, } from './lib/dashboard-kit/index.js';
 export { bindStencilPalette, bindShapeDataPanel, ensureStencilKitStyles } from './lib/stencil-kit/index.js';
 export type { StencilPaletteApi, StencilPaletteOptions, StencilPaletteHandle, ShapeDataPanelApi, ShapeDataPanelOptions, ShapeDataPanelHandle, } from './lib/stencil-kit/index.js';

package/src/index.js

@@ -230,7 +230,7 @@ export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField,
 // GridItemConfig. Element-local code, so the Phase-0 wholesale re-export
 // below does NOT cover it — this curated block is its only door.
 // ===========================================================================
-export { bindDashboardGrid, paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT, TAB_DRAG_THRESHOLD, normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, 
+export { bindDashboardGrid, paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT, TAB_DRAG_THRESHOLD, normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, DASHBOARD_KIT_CSS, 
 // The DATA-FIRST authoring API — the erDiagram()/umlDiagram() equivalent.
 dashboard, 
 // …and the built-in renderers behind `kind`, so a dashboard is useful with

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

@@ -2,7 +2,7 @@ export { bindDashboardGrid, type DashboardGridApi, type DashboardGridOptions, ty
 export { bindDashboardSplit, SetSplitTreeCommand, SPLIT_TREE_KEY, type DashboardSplitOptions, type DashboardSplitHandle, } from './split-binder.js';
 export { projectSplit, dividersOf, addSplitLeaf, removeSplitLeaf, insertSplitLeaf, moveSplitDivider, splitFromCells, cellsFromSplit, splitLeaves, type SplitNode, type SplitGroup, type SplitLeaf, type SplitDir, type SplitSide, type SplitDivider, } from './split-layout.js';
 export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, type CellRect, type WorldRect, type DashboardGridGeometry, type TileDelta, } from './grid-mapping.js';
-export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID } from './styles.js';
+export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, DASHBOARD_KIT_CSS } from './styles.js';
 export { paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT, TAB_DRAG_THRESHOLD, type TabsOptions, type TabPage } from './tabs.js';
 export { normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, type SectionCaption, type SectionCaptionOptions, type SectionCaptionAction, type SectionCaptionFont, } from './caption.js';
 export { dashboard, type DashboardOptions, type DashboardSpec, type DashboardSnapshot, type DashboardHandle, type DashboardViewSpec, type DashboardWidgetSpec, type WidgetHandle, } from './dashboard.js';

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

@@ -2,7 +2,7 @@ export { bindDashboardGrid, normalizeDragHandle, } from './grid-binder.js';
 export { bindDashboardSplit, SetSplitTreeCommand, SPLIT_TREE_KEY, } from './split-binder.js';
 export { projectSplit, dividersOf, addSplitLeaf, removeSplitLeaf, insertSplitLeaf, moveSplitDivider, splitFromCells, cellsFromSplit, splitLeaves, } from './split-layout.js';
 export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, } from './grid-mapping.js';
-export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID } from './styles.js';
+export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, DASHBOARD_KIT_CSS } from './styles.js';
 export { paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT, TAB_DRAG_THRESHOLD } from './tabs.js';
 export { normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, } from './caption.js';
 // The DATA-FIRST authoring API (the erDiagram/umlDiagram equivalent).

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

@@ -23,7 +23,7 @@
  * the authored size.
  */
 import { __awaiter } from "tslib";
-import { Command } from '@grafloria/engine';
+import { BatchCommand, Command } from '@grafloria/engine';
 import { LiveRegionController, registerTool } from '@grafloria/renderer';
 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';
@@ -779,6 +779,192 @@ export function bindDashboardSplit(api, group, options = {}) {
         },
     };
     const unregisterTool = registerTool(tool);
+    // -- a tab torn out of a container on THIS board (0.4.37) --------------------
+    // The split board REFUSED every tear-out ("no cells to drop a page into"),
+    // so on a split board a tab press was a dead click — no chip, no reorder,
+    // no join. The board has a drop model of its own: a widget dropped on a
+    // pane's edge inserts there. A torn-out page uses it — the page becomes a
+    // one-tab group that IS a pane — and keeps the strip rules of the grid
+    // board: its own strip reorders, another container's strip or the centre of
+    // its body joins, the centre of its own body is home, off the canvas is
+    // nothing. One history step, like every other drop.
+    let tearing = false;
+    const EDGE_GRACE = 60;
+    const execute = (name, commands) => {
+        if (commands.length === 0)
+            return false;
+        void execCommand(new BatchCommand(name, commands));
+        return true;
+    };
+    const beginTearOut = (pageId, fromGroupId, ev, plan) => {
+        var _a;
+        if (disposed || isStatic || gesture || tearing)
+            return false;
+        const from = diagram.getGroup(fromGroupId);
+        if (!from)
+            return false;
+        const tree0 = readTree();
+        tearing = true;
+        const doc = (_a = api.container.ownerDocument) !== null && _a !== void 0 ? _a : document;
+        const chip = doc.createElement('div');
+        chip.className = 'axdb-drag-chip axdb-tab-chip';
+        chip.textContent = plan.label;
+        doc.body.appendChild(chip);
+        const moveChip = (cx, cy) => {
+            chip.style.left = `${cx + 6}px`;
+            chip.style.top = `${cy + 6}px`;
+        };
+        moveChip(ev.clientX, ev.clientY);
+        const layer = htmlLayer();
+        let joinEl = null;
+        const showJoin = (r) => {
+            if (!layer)
+                return;
+            if (!joinEl) {
+                joinEl = doc.createElement('div');
+                joinEl.className = 'axdb-join';
+                layer.prepend(joinEl);
+            }
+            joinEl.style.left = `${r.x}px`;
+            joinEl.style.top = `${r.y}px`;
+            joinEl.style.width = `${r.width}px`;
+            joinEl.style.height = `${r.height}px`;
+        };
+        const hideJoin = () => {
+            joinEl === null || joinEl === void 0 ? void 0 : joinEl.remove();
+            joinEl = null;
+        };
+        const frameOfGroup = (g) => { var _a, _b, _c, _d; return ({ x: g.position.x, y: g.position.y, width: (_b = (_a = g.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0, height: (_d = (_c = g.size) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0 }); };
+        const inRect = (r, x, y) => x >= r.x && x <= r.x + r.width && y >= r.y && y <= r.y + r.height;
+        const targets = plan.joinTargets
+            .map((id) => diagram.getGroup(id))
+            .filter((g) => !!g && g.id !== fromGroupId && !plan.ownBoards.includes(g.id));
+        /** Inside the visible canvas plus a grace band; an unmeasurable container (no layout) is never off. */
+        const clientInsideCanvasGrace = (cx, cy) => {
+            const rect = api.container.getBoundingClientRect();
+            if (rect.width <= 0 || rect.height <= 0)
+                return true;
+            return cx >= rect.left - EDGE_GRACE && cx <= rect.right + EDGE_GRACE && cy >= rect.top - EDGE_GRACE && cy <= rect.bottom + EDGE_GRACE;
+        };
+        /** The centre third of a container's BODY (below its strip), both axes — the grid board's join zone. */
+        const centreThird = (g, w) => {
+            const f = frameOfGroup(g);
+            if (!inRect(f, w.x, w.y))
+                return false;
+            const top = f.y + plan.stripHeight(g.id);
+            const h = Math.max(0, f.y + f.height - top);
+            return w.x >= f.x + f.width / 3 && w.x <= f.x + (2 * f.width) / 3 && w.y >= top + h / 3 && w.y <= top + (2 * h) / 3;
+        };
+        const zoneAt = (cx, cy, w) => {
+            if (!clientInsideCanvasGrace(cx, cy))
+                return { kind: 'off' };
+            const own = plan.stripIndex(fromGroupId, cx, cy);
+            if (own !== null)
+                return { kind: 'reorder', index: own };
+            for (const t of targets) {
+                const i = plan.stripIndex(t.id, cx, cy);
+                if (i !== null)
+                    return { kind: 'strip', targetId: t.id, index: i };
+            }
+            for (const t of targets)
+                if (centreThird(t, w))
+                    return { kind: 'join', targetId: t.id };
+            if (centreThird(from, w))
+                return { kind: 'home' };
+            if (worldInsideBoard(w.x, w.y)) {
+                const t = dropTargetAt(tree0, w.x, w.y);
+                if (t)
+                    return { kind: 'pane', target: t };
+            }
+            return { kind: 'home' };
+        };
+        const apply = (z) => {
+            plan.markDrop(z.kind === 'reorder' ? fromGroupId : z.kind === 'strip' ? z.targetId : null, z.kind === 'reorder' || z.kind === 'strip' ? z.index : null);
+            const jt = z.kind === 'join' ? diagram.getGroup(z.targetId) : undefined;
+            if (jt)
+                showJoin(frameOfGroup(jt));
+            else
+                hideJoin();
+            showInsertion(z.kind === 'pane' ? insertionRect(z.target.rect, z.target.side) : null);
+            chip.classList.toggle('axdb-out', z.kind === 'home' || z.kind === 'off');
+        };
+        let last = { x: ev.clientX, y: ev.clientY };
+        const detach = () => {
+            window.removeEventListener('pointermove', onMove, true);
+            window.removeEventListener('pointerup', onUp, true);
+            window.removeEventListener('pointercancel', onCancel, true);
+            window.removeEventListener('keydown', onKey, true);
+        };
+        const done = (changed, kind) => {
+            tearing = false;
+            project(readTree());
+            api.renderNow();
+            fire({ type: kind, kind: 'move', nodeId: pageId, changed });
+        };
+        const finish = (commit) => {
+            detach();
+            chip.remove();
+            hideJoin();
+            showInsertion(null);
+            plan.markDrop(null, null);
+            if (disposed) {
+                tearing = false;
+                return;
+            }
+            const z = commit ? zoneAt(last.x, last.y, toWorld(last.x, last.y)) : { kind: 'home' };
+            if (z.kind === 'home' || z.kind === 'off') {
+                done(false, 'cancel');
+                return;
+            }
+            if (z.kind === 'reorder') {
+                const cmds = plan.reorder(z.index);
+                const changed = cmds.length > 0 && execute('Reorder tab', cmds);
+                done(changed, changed ? 'commit' : 'cancel');
+                return;
+            }
+            if (z.kind === 'strip' || z.kind === 'join') {
+                const index = z.kind === 'strip' ? z.index : plan.dropIndex(z.targetId, last.x, last.y);
+                const planned = plan.join(z.targetId, index, group.id);
+                done(execute('Move tab', [...planned.move, ...planned.collapse]), 'commit');
+                return;
+            }
+            // A PANE: the page's new group takes the named side of the target — the
+            // widget drop's own rule — and the tree swap rides in the same step as
+            // the group's birth, so one undo removes both.
+            const side = rtl && (z.target.side === 'left' || z.target.side === 'right') ? (z.target.side === 'left' ? 'right' : 'left') : z.target.side;
+            const after = normalizeSplit(insertSplitLeaf(tree0, plan.arrivingId, targetRef(z.target), side));
+            const rect = rectsOf(after).get(plan.arrivingId);
+            const cell = cellsFromSplit(after, columns, rowsGuess()).get(plan.arrivingId);
+            if (!rect || !cell) {
+                done(false, 'cancel');
+                return;
+            }
+            const planned = plan.commands(cell, rect, group.id);
+            done(execute('Move tab out', [...planned.move, new SetSplitTreeCommand(group.id, tree0, after), ...planned.collapse]), 'commit');
+            live.announce(`${plan.label} is a pane ${side === 'left' || side === 'top' ? 'before' : 'after'} ${targetName(z.target)}`, 'polite', true);
+        };
+        const onMove = (e) => {
+            if (disposed)
+                return finish(false);
+            last = { x: e.clientX, y: e.clientY };
+            moveChip(e.clientX, e.clientY);
+            apply(zoneAt(e.clientX, e.clientY, toWorld(e.clientX, e.clientY)));
+            api.render();
+        };
+        const onUp = () => finish(true);
+        const onCancel = () => finish(false);
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                finish(false);
+        };
+        window.addEventListener('pointermove', onMove, true);
+        window.addEventListener('pointerup', onUp, true);
+        window.addEventListener('pointercancel', onCancel, true);
+        window.addEventListener('keydown', onKey, true);
+        apply(zoneAt(ev.clientX, ev.clientY, toWorld(ev.clientX, ev.clientY)));
+        api.render();
+        return true;
+    };
     // -- palette drag-in --------------------------------------------------------
     const beginPaletteDrag = (node, spec, event) => {
         var _a;
@@ -1251,9 +1437,8 @@ export function bindDashboardSplit(api, group, options = {}) {
         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 }),
-        // A split board has no cells to drop a torn-out page into: it refuses,
-        // and the press stays a plain tab click.
-        tearOutMember: (_pageId, _fromGroupId, _ev, _plan) => false,
+        // A torn-out page becomes a PANE (0.4.37) — see beginTearOut.
+        tearOutMember: (pageId, fromGroupId, ev, plan) => beginTearOut(pageId, fromGroupId, ev, plan),
         // …and it has no cells to move a section across: a strip press stays a selection.
         dragMember: () => false,
         containsWorld: (x, y) => worldInsideBoard(x, y),