@grafloria/element 0.4.27 → 0.4.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafloria/element",
-  "version": "0.4.27",
+  "version": "0.4.28",
   "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, 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, 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 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, 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, 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, 
 // 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/dashboard.js

@@ -230,6 +230,29 @@ function buildWidgetNode(w, rowHeight) {
         node.removePort(p.id);
     return node;
 }
+/**
+ * EVERY CHILD OF A TAB CONTAINER IS A PAGE. A page is a container, so a plain
+ * widget written among them is wrapped in one carrying its title. Without this
+ * the tab system simply ignored it: it was never positioned and painted at the
+ * board's origin at its 100×60 placeholder size, silently losing part of the
+ * author's layout (measured on a container mixing a widget with two pages).
+ */
+function wrapTabPages(ws) {
+    for (const w of ws) {
+        if (!w.widgets)
+            continue;
+        if (w.layout === 'tabs') {
+            w.widgets = w.widgets.map((c) => {
+                var _a;
+                return c.widgets
+                    ? c
+                    : Object.assign(Object.assign({ id: `${c.id}__page`, title: (_a = c.title) !== null && _a !== void 0 ? _a : c.id }, (w.columns !== undefined ? { columns: w.columns } : {})), { widgets: [Object.assign(Object.assign({}, c), { x: 0, y: 0 })] });
+            });
+        }
+        wrapTabPages(w.widgets);
+    }
+    return ws;
+}
 function cloneWidgets(ws) {
     return ws.map((w) => (Object.assign(Object.assign({}, w), (w.widgets ? { widgets: cloneWidgets(w.widgets) } : {}))));
 }
@@ -1133,8 +1156,8 @@ export function dashboard(options) {
     const sizing = (_h = options.sizing) !== null && _h !== void 0 ? _h : (mode === 'fluid' ? 'grow' : 'fit');
     const layout = (_j = options.layout) !== null && _j !== void 0 ? _j : 'grid';
     const views = options.views
-        ? options.views.map((v) => (Object.assign(Object.assign({}, v), { widgets: cloneWidgets(v.widgets) })))
-        : [{ id: 'main', widgets: cloneWidgets((_k = options.widgets) !== null && _k !== void 0 ? _k : []) }];
+        ? options.views.map((v) => (Object.assign(Object.assign({}, v), { widgets: wrapTabPages(cloneWidgets(v.widgets)) })))
+        : [{ id: 'main', widgets: wrapTabPages(cloneWidgets((_k = options.widgets) !== null && _k !== void 0 ? _k : [])) }];
     for (const v of views)
         assignCellsDeep(v.widgets, (_l = v.columns) !== null && _l !== void 0 ? _l : columns);
     // -- the render spec: one custom-HTML node per widget ----------------------

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

@@ -2116,6 +2116,28 @@ export function bindDashboardGrid(api, group, options = {}) {
         return best;
     };
     /** This binder's side of an adoption: enter gateless, then live-push. */
+    /**
+     * Put an ARRIVING tile as close to the pointer as the board allows. The
+     * exact cell is often refused because a SECTION is a locked tile and the
+     * incoming tile overlaps it (E4b), and a refused placement left the tile
+     * wherever it entered — the bottom row. That read as "it did not drop where
+     * I put it". Slide along the row instead, nearest first, so a tile that
+     * cannot take the cell under the pointer still lands beside it.
+     */
+    const placeNear = (id, x, y, w) => {
+        if (engine.moveCheck(id, x, y, { gate: false }).changed)
+            return true;
+        const maxX = Math.max(0, columns - w);
+        for (let d = 1; d <= columns; d++) {
+            for (const cx of [x - d, x + d]) {
+                if (cx < 0 || cx > maxX)
+                    continue;
+                if (engine.moveCheck(id, cx, y, { gate: false }).changed)
+                    return true;
+            }
+        }
+        return false;
+    };
     const adopt = (node, world, pxSize) => {
         if (disposed)
             return null;
@@ -2153,7 +2175,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         adoptedGhostId = node.id;
         const tl = centredTopLeft(world.x, world.y, span);
         const cell0 = pointToCell(tl.x, tl.y, f, gg, rows(), span.w);
-        engine.moveCheck(node.id, cell0.x, cell0.y, { gate: false });
+        placeNear(node.id, cell0.x, cell0.y, span.w);
         armGlide();
         project();
         syncPlaceholder();
@@ -2165,7 +2187,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                     return;
                 const tlm = centredTopLeft(w.x, w.y, { w: item.w, h: item.h });
                 const cell = pointToCell(tlm.x, tlm.y, frame(), geom(), rows(), item.w);
-                if (engine.moveCheck(node.id, cell.x, cell.y).changed)
+                if (placeNear(node.id, cell.x, cell.y, item.w))
                     project();
                 syncPlaceholder();
             },