@grafloria/element 0.4.50 → 0.4.51

package/package.json

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

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

@@ -56,7 +56,7 @@ import { buildCommitCommands, cellFromGridItem, cellToRect, columnUnitFor, gridI
 import { ensureDashboardKitStyles } from './styles.js';
 import { captionOfGroup, captionPainted, captionPassThrough, captionKey, paintCaptionBand, sectionCaptionReserve, sizeCaptionBand } from './caption.js';
 import { TAB_STRIP_HEIGHT } from './tabs.js';
-import { BESIDE_BAND, resolve as resolveZone } from './zones.js';
+import { BESIDE_BAND, resolve as resolveZone, resolveTabZone } from './zones.js';
 /** The class of the painted grip element (a child of the node host). */
 export const GRIP_CLASS = 'axdb-grip';
 /** The container class that turns the caption strip's grip dots on. */
@@ -3836,7 +3836,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         // thirds, and the user, putting a page back into the panel it came from,
         // never found the "into": "close to the edge means beside it, the content
         // area means inside, the header means a new tab" (0.4.42).
-        const EDGE_BAND = 0.2;
+        const EDGE_BAND = BESIDE_BAND; // one band for a tab's split and a widget's beside (zones.ts)
         const visibleFrame = () => {
             const rect = api.container.getBoundingClientRect();
             const o = toWorld(rect.left, rect.top);
@@ -3954,47 +3954,55 @@ export function bindDashboardGrid(api, group, options = {}) {
         const zoneAt = (cx, cy, world) => {
             // A pointer OUTSIDE the visible canvas is off, full stop: a camera that
             // moved can map it to a world point inside a group, and that group
-            // took a join or a split from a release in the page header.
-            if (!clientInsideCanvasGrace(cx, cy))
-                return { kind: 'off' };
-            const target = targetAt(world.x, world.y);
-            const home = !target && worldInsideGroup(from, world.x, world.y);
-            // A strip is the most precise target there is: anyone's wins outright.
-            if (target) {
-                const idx = plan.stripIndex(target.id, cx, cy);
-                if (idx !== null)
-                    return { kind: 'strip', target, index: idx };
-            }
-            else if (home) {
-                const idx = plan.stripIndex(fromGroupId, cx, cy);
-                if (idx !== null)
-                    return { kind: 'reorder', index: idx };
-            }
-            // The board's own edges beat whatever sits against them — Dockview's
-            // container edges over its groups — so a group at the top of the board
-            // still leaves the top band to the board.
-            const root = rootAt(cx, cy);
-            if (root)
-                return root;
-            if (target) {
-                const f = anchor && anchor.g === target ? anchor.frame : frameOfGroup(target);
-                const stripH = anchor && anchor.g === target ? anchor.stripH : plan.stripHeight(target.id);
-                const bodyH = Math.max(1, f.height - stripH);
-                const rx = Math.min(1, Math.max(0, (world.x - f.x) / Math.max(1, f.width)));
-                const ry = Math.min(1, Math.max(0, (world.y - f.y - stripH) / bodyH));
-                if (rx >= EDGE_BAND && rx <= 1 - EDGE_BAND && ry >= EDGE_BAND && ry <= 1 - EDGE_BAND)
-                    return { kind: 'join', target };
-                const d = [['left', rx], ['right', 1 - rx], ['top', ry], ['bottom', 1 - ry]];
-                d.sort((p, q) => p[1] - q[1]);
-                const h = halves(target, d[0][0]);
-                return h ? Object.assign({ kind: 'split', target, side: d[0][0] }, h) : { kind: 'join', target };
-            }
-            if (home)
-                return { kind: 'home' };
+            // took a join or a split from a release in the page header. The
+            // target is looked up (and anchored) only inside it.
+            const clientInside = clientInsideCanvasGrace(cx, cy);
+            const target = clientInside ? targetAt(world.x, world.y) : null;
+            const root = clientInside ? rootAt(cx, cy) : null;
             const foreign = foreignAt(world.x, world.y);
-            if (foreign && (!worldInsideBoard(world.x, world.y) || foreign.frameArea() < boardArea()))
-                return { kind: 'board', peer: foreign };
-            return { kind: 'board' };
+            // The ORDER is zones.ts's, shared with the split board: a strip, the
+            // board's own edges, the target's fifth or middle, home, then a board.
+            const tz = resolveTabZone({
+                x: world.x,
+                y: world.y,
+                clientInside,
+                ownStrip: plan.stripIndex(fromGroupId, cx, cy),
+                stripOf: (id) => plan.stripIndex(id, cx, cy),
+                root: root && root.kind === 'root' ? { side: root.side } : null,
+                target: target
+                    ? {
+                        id: target.id,
+                        frame: anchor && anchor.g === target ? anchor.frame : frameOfGroup(target),
+                        stripHeight: anchor && anchor.g === target ? anchor.stripH : plan.stripHeight(target.id),
+                    }
+                    : null,
+                home: worldInsideGroup(from, world.x, world.y) ? frameOfGroup(from) : null,
+                homeBand: 0, // on a grid board the whole source frame is home
+                band: EDGE_BAND,
+                canSplit: (_id, side) => !!target && !!halves(target, side),
+                pane: false,
+                foreign: !!foreign && (!worldInsideBoard(world.x, world.y) || foreign.frameArea() < boardArea()),
+            });
+            switch (tz.kind) {
+                case 'off':
+                    return { kind: 'off' };
+                case 'strip':
+                    return { kind: 'strip', target: target, index: tz.index };
+                case 'reorder':
+                    return { kind: 'reorder', index: tz.index };
+                case 'root':
+                    return root;
+                case 'join':
+                    return { kind: 'join', target: target };
+                case 'split': {
+                    const h = halves(target, tz.side);
+                    return h ? Object.assign({ kind: 'split', target: target, side: tz.side }, h) : { kind: 'join', target: target };
+                }
+                case 'home':
+                    return { kind: 'home' };
+                default:
+                    return tz.kind === 'board' && tz.foreign && foreign ? { kind: 'board', peer: foreign } : { kind: 'board' };
+            }
         };
         const zoneKey = (z) => JSON.stringify(z, (k, v) => (k === 'target' ? v.id : k === 'peer' ? v.group.id : v));
         // DOCKING PUSHES SECTIONS. A section is a locked tile so that a widget

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

@@ -23,6 +23,7 @@
  * the authored size.
  */
 import { __awaiter } from "tslib";
+import { BESIDE_BAND, resolveTabZone } from './zones.js';
 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';
@@ -1037,37 +1038,48 @@ export function bindDashboardSplit(api, group, options = {}) {
                 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 };
+            var _a;
+            // The ORDER is zones.ts's, shared with the grid board: a strip, the
+            // target's fifth (a pane beside it on that side, the sides taking the
+            // corners) or its middle (a join), home — the source's middle, its own
+            // edges meaning a pane beside itself — then the pane under the pointer.
+            // The fifth replaced the centre third here too (0.4.42's rule, at last
+            // on both boards).
+            const clientInside = clientInsideCanvasGrace(cx, cy);
+            const target = clientInside ? ((_a = targets.find((t) => inRect(frameOfGroup(t), w.x, w.y))) !== null && _a !== void 0 ? _a : null) : null;
+            const paneTarget = clientInside && worldInsideBoard(w.x, w.y) ? dropTargetAt(tree0, w.x, w.y) : null;
+            const tz = resolveTabZone({
+                x: w.x,
+                y: w.y,
+                clientInside,
+                ownStrip: plan.stripIndex(fromGroupId, cx, cy),
+                stripOf: (id) => plan.stripIndex(id, cx, cy),
+                root: null,
+                target: target ? { id: target.id, frame: frameOfGroup(target), stripHeight: plan.stripHeight(target.id) } : null,
+                home: inRect(frameOfGroup(from), w.x, w.y) ? frameOfGroup(from) : null,
+                homeBand: BESIDE_BAND,
+                band: BESIDE_BAND,
+                canSplit: () => true,
+                pane: !!paneTarget,
+                foreign: false,
+            });
+            switch (tz.kind) {
+                case 'off':
+                    return { kind: 'off' };
+                case 'strip':
+                    return { kind: 'strip', targetId: tz.targetId, index: tz.index };
+                case 'reorder':
+                    return { kind: 'reorder', index: tz.index };
+                case 'join':
+                    return { kind: 'join', targetId: tz.targetId };
+                case 'split':
+                    return { kind: 'pane', target: { id: tz.targetId, side: tz.side, rect: frameOfGroup(target) } };
+                case 'pane':
+                    return { kind: 'pane', target: paneTarget };
+                default:
+                    return { kind: 'home' };
             }
-            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);

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

@@ -111,3 +111,74 @@ export declare const BESIDE_STAY = 0.05;
  */
 export declare function bandOf(f: ZoneRect, stripHeight: number, x: number, y: number, band?: number): BesideSide | null;
 export declare function resolve(input: ResolveInput): Zone;
+/** A join target as the walk sees it: another tab container, its frame anchored by the binder while the pointer is inside it. */
+export interface TabTarget {
+    id: string;
+    frame: ZoneRect;
+    stripHeight: number;
+}
+export interface TabZoneInput {
+    x: number;
+    y: number;
+    /** Inside the visible canvas plus its grace, in CLIENT space: off otherwise, whatever the world point says. */
+    clientInside: boolean;
+    /** The source strip's slot under the pointer (client space), else null. */
+    ownStrip: number | null;
+    /** A target strip's slot under the pointer (client space), else null. */
+    stripOf(targetId: string): number | null;
+    /** The board's own edge band under the pointer (client space) — a dock; null on boards that have none. */
+    root: {
+        side: BesideSide;
+    } | null;
+    /** The join target whose frame holds the point, or null. */
+    target: TabTarget | null;
+    /** The source group's frame, when the pointer is inside it. */
+    home: ZoneRect | null;
+    /** The source group's own band: 0 keeps its whole frame "home", a fifth lets its edges mean "beside myself". */
+    homeBand: number;
+    /** The outer fraction of a target's body that splits it (Dockview's fifth). */
+    band: number;
+    /** Whether the target can be halved on that side (a grid target too small refuses; a pane always can). */
+    canSplit(targetId: string, side: BesideSide): boolean;
+    /** A pane insertion exists under the pointer (split boards). */
+    pane: boolean;
+    /** A foreign board lies under the pointer and takes the drop (grid boards). */
+    foreign: boolean;
+}
+export type TabZone = {
+    kind: 'off';
+} | {
+    kind: 'reorder';
+    index: number;
+} | {
+    kind: 'strip';
+    targetId: string;
+    index: number;
+} | {
+    kind: 'root';
+    side: BesideSide;
+} | {
+    kind: 'join';
+    targetId: string;
+} | {
+    kind: 'split';
+    targetId: string;
+    side: BesideSide;
+} | {
+    kind: 'home';
+} | {
+    kind: 'pane';
+} | {
+    kind: 'board';
+    foreign: boolean;
+};
+/**
+ * What a pointer means for a TORN-OUT PAGE, in the one order both binders
+ * use: off the canvas, then a strip (the most precise target there is —
+ * a target's, or the source's own for a reorder), then the board's own
+ * edges (Dockview's container edges beat the groups against them), then the
+ * target under the pointer — its outer fifth splits it on that side, the
+ * sides taking the corners, its middle joins it — then home, then a pane, a
+ * foreign board, or this board.
+ */
+export declare function resolveTabZone(input: TabZoneInput): TabZone;

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

@@ -159,4 +159,39 @@ function stripHeightOf(roots, containerId) {
     }
     return 0;
 }
+/**
+ * What a pointer means for a TORN-OUT PAGE, in the one order both binders
+ * use: off the canvas, then a strip (the most precise target there is —
+ * a target's, or the source's own for a reorder), then the board's own
+ * edges (Dockview's container edges beat the groups against them), then the
+ * target under the pointer — its outer fifth splits it on that side, the
+ * sides taking the corners, its middle joins it — then home, then a pane, a
+ * foreign board, or this board.
+ */
+export function resolveTabZone(input) {
+    if (!input.clientInside)
+        return { kind: 'off' };
+    const { x, y } = input;
+    if (input.target) {
+        const idx = input.stripOf(input.target.id);
+        if (idx !== null)
+            return { kind: 'strip', targetId: input.target.id, index: idx };
+    }
+    else if (input.ownStrip !== null)
+        return { kind: 'reorder', index: input.ownStrip };
+    if (input.root)
+        return { kind: 'root', side: input.root.side };
+    if (input.target) {
+        const t = input.target;
+        const side = bandOf(t.frame, t.stripHeight, x, y, input.band);
+        if (side && input.canSplit(t.id, side))
+            return { kind: 'split', targetId: t.id, side };
+        return { kind: 'join', targetId: t.id };
+    }
+    if (input.home && inRect(input.home, x, y) && !bandOf(input.home, 0, x, y, input.homeBand))
+        return { kind: 'home' };
+    if (input.pane)
+        return { kind: 'pane' };
+    return { kind: 'board', foreign: input.foreign };
+}
 //# sourceMappingURL=zones.js.map