@grafloria/element 0.4.54 → 0.4.56

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

@@ -790,6 +790,54 @@ export function createDashboardHandle(ctx) {
      * looked like. Undo reopens the page (its grid re-binds on the history event)
      * and then the widget comes back into it.
      */
+    /**
+     * A CONTAINER CROSSES BOARDS by hand (tile first, 4b-ii): a section carried
+     * into a page, a tab container into a section. The membership commands
+     * move it; this moves what the kit keeps beside the membership — the
+     * authored entry from the old board's list to the new one's, and which
+     * board the container is filed under — as a register/unregister pair, the
+     * way the tear-out plan files a group it creates. `toJSON()` reads the
+     * membership, so the document is right either way; the registry is what
+     * `addWidget` and the page-closing rule read.
+     */
+    ctx.moveContainerCommands = (containerId, fromBoardId, toBoardId) => {
+        if (!ctx.boardGroups.has(containerId))
+            return [];
+        const spec = specById.get(containerId);
+        const fromArr = ctx.boardWidgets.get(fromBoardId);
+        const toArr = ctx.boardWidgets.get(toBoardId);
+        const prevFiled = viewOfWidget.get(containerId);
+        let slot = -1;
+        const moved = {
+            register: () => {
+                viewOfWidget.set(containerId, toBoardId);
+                if (spec && fromArr) {
+                    const i = fromArr.findIndex((w) => w.id === containerId);
+                    if (i >= 0) {
+                        slot = i;
+                        fromArr.splice(i, 1);
+                    }
+                }
+                if (spec && toArr && !toArr.some((w) => w.id === containerId))
+                    toArr.push(spec);
+            },
+            unregister: () => {
+                if (prevFiled !== undefined)
+                    viewOfWidget.set(containerId, prevFiled);
+                else
+                    viewOfWidget.delete(containerId);
+                if (spec && toArr) {
+                    const i = toArr.findIndex((w) => w.id === containerId);
+                    if (i >= 0)
+                        toArr.splice(i, 1);
+                }
+                if (spec && fromArr && !fromArr.some((w) => w.id === containerId)) {
+                    fromArr.splice(slot < 0 ? fromArr.length : Math.min(slot, fromArr.length), 0, spec);
+                }
+            },
+        };
+        return [new RegisterWidgetCommand(moved, 'register')];
+    };
     ctx.closePageIfEmptied = (boardId, leaving) => {
         var _a, _b, _c, _d, _e, _f;
         const model = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel();
@@ -2303,7 +2351,7 @@ export function dashboard(options) {
                         if (e.type === 'commit')
                             reportChanged();
                         (_b = (_a = options.binder) === null || _a === void 0 ? void 0 : _a.onGesture) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    }, onSelect: (id) => { var _a; return (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id, v.id); } }), captionHooks(v.id)), { onMemberLeaving: (memberId) => { var _a, _b; return (_b = (_a = ctx.closePageIfEmptied) === null || _a === void 0 ? void 0 : _a.call(ctx, v.id, memberId)) !== null && _b !== void 0 ? _b : []; } }), (ctx.tabDrop ? { tabDrop: ctx.tabDrop } : {}));
+                    }, onSelect: (id) => { var _a; return (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id, v.id); } }), captionHooks(v.id)), { onMemberLeaving: (memberId) => { var _a, _b; return (_b = (_a = ctx.closePageIfEmptied) === null || _a === void 0 ? void 0 : _a.call(ctx, v.id, memberId)) !== null && _b !== void 0 ? _b : []; }, onMemberMoving: (memberId, from, to) => { var _a, _b; return (_b = (_a = ctx.moveContainerCommands) === null || _a === void 0 ? void 0 : _a.call(ctx, memberId, from, to)) !== null && _b !== void 0 ? _b : []; } }), (ctx.tabDrop ? { tabDrop: ctx.tabDrop } : {}));
                 if (viewLayout === 'split') {
                     return bindDashboardSplit(a, g, Object.assign(Object.assign(Object.assign({}, common), { columns: (_h = v.columns) !== null && _h !== void 0 ? _h : columns, baseRowHeight: rowHeight, designHeight: viewH(v) }), (v.tree !== undefined ? { tree: v.tree } : {})));
                 }
@@ -2321,7 +2369,7 @@ export function dashboard(options) {
                         if (e.type === 'commit')
                             reportChanged();
                         (_b = (_a = options.binder) === null || _a === void 0 ? void 0 : _a.onGesture) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    }, onSelect: (id) => { var _a, _b; return (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id, (_b = ctx.viewOfBoard.get(w.id)) !== null && _b !== void 0 ? _b : ctx.active); } }), captionHooks((_h = ctx.viewOfBoard.get(w.id)) !== null && _h !== void 0 ? _h : ctx.active)), { onMemberLeaving: (memberId) => { var _a, _b; return (_b = (_a = ctx.closePageIfEmptied) === null || _a === void 0 ? void 0 : _a.call(ctx, w.id, memberId)) !== null && _b !== void 0 ? _b : []; } }), (ctx.tabDrop ? { tabDrop: ctx.tabDrop } : {}));
+                    }, onSelect: (id) => { var _a, _b; return (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id, (_b = ctx.viewOfBoard.get(w.id)) !== null && _b !== void 0 ? _b : ctx.active); } }), captionHooks((_h = ctx.viewOfBoard.get(w.id)) !== null && _h !== void 0 ? _h : ctx.active)), { onMemberLeaving: (memberId) => { var _a, _b; return (_b = (_a = ctx.closePageIfEmptied) === null || _a === void 0 ? void 0 : _a.call(ctx, w.id, memberId)) !== null && _b !== void 0 ? _b : []; }, onMemberMoving: (memberId, from, to) => { var _a, _b; return (_b = (_a = ctx.moveContainerCommands) === null || _a === void 0 ? void 0 : _a.call(ctx, memberId, from, to)) !== null && _b !== void 0 ? _b : []; } }), (ctx.tabDrop ? { tabDrop: ctx.tabDrop } : {}));
                 if (((_j = ctx.layoutOf.get(w.id)) !== null && _j !== void 0 ? _j : w.layout) === 'split') {
                     // A splitter tree covering the pane; the pane's frame is the parent's
                     // slab, so no design height of its own.

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

@@ -0,0 +1,15 @@
+/** Which edges of a tile a press takes, and the cursor that says so (tile first, step 4b-i: out of the binder). */
+/** 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 NO_EDGES: ResizeEdges;
+/** Which of a host's edges a client point is within EDGE_GRIP of (none when outside). */
+export declare function edgesNear(host: Element, cx: number, cy: number): ResizeEdges;
+export declare const anyEdge: (E: ResizeEdges) => boolean;
+/** The resize cursor for a set of edges ('' when none). */
+export declare function cursorFor(E: ResizeEdges): string;

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

@@ -0,0 +1,30 @@
+/** Which edges of a tile a press takes, and the cursor that says so (tile first, step 4b-i: out of the binder). */
+/** A press this close (CSS px) to a tile's border takes that edge for a resize. */
+export const EDGE_GRIP = 7;
+export 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). */
+export function edgesNear(host, cx, cy) {
+    const r = host.getBoundingClientRect();
+    if (cx < r.left - 2 || cx > r.right + 2 || cy < r.top - 2 || cy > r.bottom + 2)
+        return NO_EDGES;
+    return {
+        n: cy - r.top <= EDGE_GRIP,
+        s: r.bottom - cy <= EDGE_GRIP,
+        w: cx - r.left <= EDGE_GRIP,
+        e: r.right - cx <= EDGE_GRIP,
+    };
+}
+export const anyEdge = (E) => E.n || E.e || E.s || E.w;
+/** The resize cursor for a set of edges ('' when none). */
+export function cursorFor(E) {
+    const v = E.n || E.s;
+    const h = E.e || E.w;
+    if (v && h)
+        return (E.n && E.w) || (E.s && E.e) ? 'nwse-resize' : 'nesw-resize';
+    if (v)
+        return 'ns-resize';
+    if (h)
+        return 'ew-resize';
+    return '';
+}
+//# sourceMappingURL=edges.js.map

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

@@ -53,6 +53,10 @@ import { Command, type DiagramModel, type GridColumnLayout, type GroupModel, typ
 import { type ToolPointerEvent } from '@grafloria/renderer';
 import { type CellRect, type WorldRect } from './grid-mapping.js';
 import { type BesideSide } from './zones.js';
+import { type ResizeEdges } from './edges.js';
+import { type DragHandleOption } from './grip.js';
+export { EDGE_GRIP, anyEdge, type ResizeEdges } from './edges.js';
+export { GRIP_CLASS, DRAG_HANDLE_CLASS, CAPTION_BAND, normalizeDragHandle, dragHandleSelector, gripOf, syncGrip, gripHostOf, pressOnDragHandle, type DragGripOptions, type DragHandleOption } from './grip.js';
 export { SequenceCommand, SetGroupCellCommand } from './commit.js';
 /** The slice of a DiagramInstance the binder needs (structural, test-friendly). */
 export interface DashboardGridApi {
@@ -199,6 +203,12 @@ export interface DashboardGridOptions {
      * it in the same batch — a tab page emptied by the move closes.
      */
     onMemberLeaving?: (memberId: string) => Command[];
+    /**
+     * A member CONTAINER is moving from this board to another by a gesture
+     * (tile first, 4b-ii). Answers the commands that carry the host's own
+     * bookkeeping for it — the spec entry, the registry — in the same batch.
+     */
+    onMemberMoving?: (memberId: string, fromBoardId: string, toBoardId: string) => Command[];
     /** A widget dragged over a tab STRIP becomes a new tab there: the hooks that hit-test, mark and commit it. */
     tabDrop?: TabDropHooks;
     /** Fires after commits/cancels/removals so the page can refocus/refit/flash. */
@@ -275,30 +285,6 @@ export interface DashboardGridOptions {
      */
     squeeze?: boolean;
 }
-/** A painted grip: the only drag zone, placed along the card's top edge. */
-export interface DragGripOptions {
-    grip: true;
-    /** Where along the top edge. Default 'left'. */
-    position?: 'left' | 'center' | 'right';
-    /** In the header band, or a tab above the card. Default 'inside'. */
-    placement?: 'inside' | 'outside';
-}
-export type DragHandleOption = boolean | string | DragGripOptions;
-/** The class of the painted grip element (a child of the node host). */
-export declare const GRIP_CLASS = "axdb-grip";
-/** The container class that turns the caption strip's grip dots on. */
-export declare const DRAG_HANDLE_CLASS = "axdb-drag-handle";
-/** A `dragHandle` value with its defaults filled in — the form the handle reports. */
-export declare const normalizeDragHandle: (v: DragHandleOption | undefined) => DragHandleOption;
-/** The selector a `dragHandle` value names — `null` when the whole card is the handle. */
-export declare const dragHandleSelector: (v: DragHandleOption) => string | null;
-/** The grip config of a value, or null when it paints no grip. */
-export declare const gripOf: (v: DragHandleOption) => DragGripOptions | null;
-/**
- * Paint (or remove) the grip on one host, and stamp the host with the grip's
- * placement so the header can make room for it. `movable` false = no grip.
- */
-export declare function syncGrip(host: HTMLElement, cfg: DragGripOptions | null, movable: boolean): void;
 /** The member host a press on a painted grip belongs to (the grip may sit OUTSIDE the host's box). */
 /**
  * Is this press OURS? The renderer's tool registry is PAGE-GLOBAL: every
@@ -317,16 +303,6 @@ export declare function ownsPress(container: HTMLElement, diagram: {
         id: string;
     };
 }): boolean;
-export declare function gripHostOf(target: Element | null): HTMLElement | null;
-/**
- * Did a press land on the drag handle? A press INSIDE the handle element
- * always does. The default handle is a CAPTION BAR the DevExpress way: the
- * strip from the card's top edge down to the header's bottom, padding
- * included — so the pointer need not hit the header's text to grab the tile.
- */
-export declare function pressOnDragHandle(sel: string, target: Element | null, hostEl: HTMLElement | null, clientX: number, clientY: number): boolean;
-/** The caption strip of a host with no kit header, px from the card's top. */
-export declare const CAPTION_BAND = 28;
 export interface DashboardGridHandle {
     /** Rebuild the engine from the group's members + their cells, re-project pixels. */
     sync(): void;
@@ -705,13 +681,4 @@ export declare function parentPeerOf(container: HTMLElement, groupId: string): B
 export declare function clearOtherSelections(container: HTMLElement, self: BinderPeer | null): void;
 export declare function registerBoardPeer(container: HTMLElement, peer: BinderPeer): () => void;
 export type { BinderPeer };
-/** 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;