@grafloria/element 0.4.66 → 0.4.67

package/package.json

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

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

@@ -996,6 +996,8 @@ export function bindDashboardGrid(api, group, options = {}) {
     let slabGesture = null;
     /** The gesture as it is NOW, for the same reason. */
     const currentGesture = () => gesture;
+    /** Where the hand was at the PREVIOUS move event — the strip is tested along the segment between the two. */
+    let prevWorld = null;
     /** The PARENT running a resize of OUR section from a press this tool claimed. */
     let forwardSlab = null;
     const frameOfGroup = (grp) => ({ x: grp.position.x, y: grp.position.y, width: sizeOf(grp).width, height: sizeOf(grp).height });
@@ -1236,6 +1238,7 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     // -- the gesture machine ----------------------------------------------------
     const beginGestureVisuals = (g) => {
+        prevWorld = null;
         engine.beginGesture();
         const snap = snapshotAll();
         g.startCells = snap.cells;
@@ -1432,6 +1435,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             nodeOf(g).setPosition(desired.x, desired.y);
             ghostStyleFastPath(g, desired);
         }
+        prevWorld = g.lastWorld;
         g.lastWorld = { x: ev.world.x, y: ev.world.y };
         g.lastScreen = { x: ev.screen.x, y: ev.screen.y };
         /** The ghost's pixel size on THIS board — a palette chip has spans, not a size. */
@@ -2194,7 +2198,7 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     /** What the pointer means for the dragged tile: the resolve over the live tree, with the beside the hand holds. */
     const resolveTileZone = (g, ev) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const roots = zoneRoots();
         // THE CONTAINERS THIS GESTURE HAS MOVED, at the frames they rest in. A
         // drag's own pushes must never change what the hand means — settled for a
@@ -2207,7 +2211,45 @@ export function bindDashboardGrid(api, group, options = {}) {
         if (((_a = options.tabDrop) === null || _a === void 0 ? void 0 : _a.tabIndexAt) && !isStatic && g.kind !== 'palette' && g.subject === 'node') {
             // A group never becomes a tab: over a container's strip it is over the
             // container's margin — a cell on the parent board, pushing with intent.
-            const hit = stripUnder({ x: ev.world.x, y: ev.world.y, roots, held: (_c = (_b = g.strip) === null || _b === void 0 ? void 0 : _b.containerId) !== null && _c !== void 0 ? _c : null, stay: STRIP_STAY / (clientPerWorld().y || 1), restFrames: rests });
+            const scaleY = clientPerWorld().y || 1;
+            let hit = stripUnder({ x: ev.world.x, y: ev.world.y, roots, held: (_c = (_b = g.strip) === null || _b === void 0 ? void 0 : _b.containerId) !== null && _c !== void 0 ? _c : null, stay: STRIP_STAY / scaleY, restFrames: rests });
+            if (!hit && prevWorld && !g.strip) {
+                // A HAND MOVES FASTER THAN A STRIP IS TALL. (Only for a hand ARRIVING:
+                // one already holding the strip leaves it by the stay, which reaches
+                // down and never up — the band above must stay reachable.) The strip is 30 px and a
+                // hand covers 40 to 80 px between events, so testing only where the
+                // pointer LANDS skips it — the user, coming down from above the panel:
+                // "it's not passing by the tab header, it drops directly to inside or
+                // outside." The segment it travelled is tested too, in steps of half a
+                // strip: crossing the rows and landing within one strip's height of
+                // them means the tabs. Flying far past them does not — a fast drag
+                // into the page must never snag on the header.
+                const dx = ev.world.x - prevWorld.x;
+                const dy = ev.world.y - prevWorld.y;
+                const n = Math.ceil(Math.hypot(dx, dy) / (TAB_STRIP_HEIGHT / 2));
+                let crossed = null;
+                for (let i = 1; i < n && !crossed; i++)
+                    crossed = (_e = (_d = stripUnder({ x: prevWorld.x + (dx * i) / n, y: prevWorld.y + (dy * i) / n, roots, held: null, stay: 0, restFrames: rests })) === null || _d === void 0 ? void 0 : _d.containerId) !== null && _e !== void 0 ? _e : null;
+                if (crossed) {
+                    const grp = diagram.getGroup(crossed);
+                    const f = (_f = rests.get(crossed)) !== null && _f !== void 0 ? _f : (grp ? frameOfGroup(grp) : null);
+                    if (f) {
+                        const top = f.y;
+                        const bottom = f.y + TAB_STRIP_HEIGHT;
+                        // A CROSSING is the two events on OPPOSITE sides of the rows — a
+                        // hand that swept along the tabs from beside the panel and ended
+                        // above it did not cross them, it went past them. And the sides
+                        // still take the corners (0.4.47): a hand landing in the outer
+                        // fifth meant "after it", whatever it crossed on the way.
+                        const through = (prevWorld.y < top && ev.world.y > bottom) || (prevWorld.y > bottom && ev.world.y < top);
+                        const away = ev.world.y < top ? top - ev.world.y : ev.world.y > bottom ? ev.world.y - bottom : 0;
+                        const rx = (ev.world.x - f.x) / Math.max(1, f.width);
+                        const inSideBand = rx < BESIDE_BAND || rx > 1 - BESIDE_BAND;
+                        if (through && !inSideBand && ev.world.x >= f.x && ev.world.x <= f.x + f.width && away <= TAB_STRIP_HEIGHT / scaleY)
+                            hit = { containerId: crossed };
+                    }
+                }
+            }
             if (hit) {
                 // The SLOT is the painted strip's business — its tabs are laid out by
                 // the browser. A container the gesture shifted sideways is painted
@@ -2228,7 +2270,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             strip,
             prev: beside
                 ? { containerId: beside.id, side: beside.side, frame0: beside.frame0, vacated: cellToRect({ x: beside.vacated.x, y: beside.vacated.y, w: g.spans.w, h: g.spans.h }, frame(), geom(), rows()) }
-                : ((_e = (_d = g.leg) === null || _d === void 0 ? void 0 : _d.adopted.besideState()) !== null && _e !== void 0 ? _e : null), // a beside another board holds for the ghost, through its leg
+                : ((_h = (_g = g.leg) === null || _g === void 0 ? void 0 : _g.adopted.besideState()) !== null && _h !== void 0 ? _h : null), // a beside another board holds for the ghost, through its leg
             maxDepth: nesting,
             ghostDepth: g.subject === 'group' ? 1 + levelsInside(g.id) : 0, // a group's widgets sit one board deeper than wherever it lands
             restFrames: rests,

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

@@ -190,50 +190,6 @@ export interface StripProbe {
 export declare function stripUnder(p: StripProbe): {
     containerId: string;
 } | null;
-export interface ContainerProbe {
-    x: number;
-    y: number;
-    roots: ZoneBoard[];
-    /** Containers the gesture has displaced, at the frames they rest in. */
-    restFrames?: ReadonlyMap<string, ZoneRect>;
-    /** The groups inside the dragged tile: never a target, so never lit. */
-    ghostSubtree?: ReadonlySet<string>;
-    /** The containers the dragged tile's own board sits in: their bands do not apply to it, so they are not lit either. */
-    homeChain?: ReadonlySet<string>;
-}
-/** A container's edges, for showing a hand what they mean. */
-export interface ContainerBands {
-    containerId: string;
-    frame: ZoneRect;
-    stripHeight: number;
-    band: number;
-    bandY?: number;
-    topOutside?: number;
-}
-/**
- * The deepest container under a pointer whose EDGES mean something — the one
- * whose bands a drag should be shown while it is held there.
- *
- * `bandOf` decides; this only reports where the decision lives, on the same
- * tree and the same frames, so a painted lane and the zone it stands for can
- * never disagree. Without it the bands are invisible: 0.4.62 made the top and
- * bottom a fixed 30 px, which is a fine target and an impossible guess — to
- * put a widget ABOVE a panel you point just BELOW its header, inside what
- * reads as page content. ("Nothing moves it any more, but how can I drag
- * something on top of the tab group?")
- */
-export declare function containerUnder(p: ContainerProbe): ContainerBands | null;
-/**
- * Where a container's bands are, in the same world units as its frame. TOP
- * appears twice: hanging above the frame, where a hand looking for "above it"
- * goes, and under the strip, which is the only one a container pressed against
- * the top of its canvas can offer. Both mean the same thing.
- */
-export declare function bandRects(c: ContainerBands): {
-    side: BesideSide;
-    name: string;
-    rect: ZoneRect;
-}[];
 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 {

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

@@ -125,82 +125,24 @@ export function stripUnder(p) {
         visit(r, 0, 0);
     return bestId === null ? null : { containerId: bestId };
 }
-/**
- * The deepest container under a pointer whose EDGES mean something — the one
- * whose bands a drag should be shown while it is held there.
- *
- * `bandOf` decides; this only reports where the decision lives, on the same
- * tree and the same frames, so a painted lane and the zone it stands for can
- * never disagree. Without it the bands are invisible: 0.4.62 made the top and
- * bottom a fixed 30 px, which is a fine target and an impossible guess — to
- * put a widget ABOVE a panel you point just BELOW its header, inside what
- * reads as page content. ("Nothing moves it any more, but how can I drag
- * something on top of the tab group?")
- */
-export function containerUnder(p) {
-    const { x, y } = p;
-    let best = null;
-    let bestDepth = -1;
-    const visit = (b, dx, dy) => {
-        var _a, _b, _c, _d;
-        for (const c of b.children()) {
-            if ((_a = p.ghostSubtree) === null || _a === void 0 ? void 0 : _a.has(c.id))
-                continue;
-            const rest = (_b = p.restFrames) === null || _b === void 0 ? void 0 : _b.get(c.id);
-            const atRest = rest && inRect(rest, x, y) ? rest : null;
-            const frame = atRest !== null && atRest !== void 0 ? atRest : c.frame;
-            const tx = atRest ? x : x + dx;
-            const ty = atRest ? y : y + dy;
-            const up = (_c = c.topOutside) !== null && _c !== void 0 ? _c : 0;
-            const inOverhang = up > 0 && tx >= frame.x && tx <= frame.x + frame.width && ty < frame.y && ty >= frame.y - up;
-            if (!inRect(frame, tx, ty) && !inOverhang)
-                continue;
-            if (c.band > 0 && !((_d = p.homeChain) === null || _d === void 0 ? void 0 : _d.has(c.id)) && b.depth >= bestDepth) {
-                best = Object.assign(Object.assign({ containerId: c.id, frame, stripHeight: c.stripHeight, band: c.band }, (c.bandY === undefined ? {} : { bandY: c.bandY })), (c.topOutside === undefined ? {} : { topOutside: c.topOutside }));
-                bestDepth = b.depth;
-            }
-            if (c.inner)
-                visit(c.inner, atRest ? c.frame.x - atRest.x : dx, atRest ? c.frame.y - atRest.y : dy);
-        }
-    };
-    for (const r of p.roots)
-        visit(r, 0, 0);
-    return best;
-}
-/**
- * Where a container's bands are, in the same world units as its frame. TOP
- * appears twice: hanging above the frame, where a hand looking for "above it"
- * goes, and under the strip, which is the only one a container pressed against
- * the top of its canvas can offer. Both mean the same thing.
- */
-export function bandRects(c) {
-    var _a;
-    const bodyY = c.frame.y + c.stripHeight;
-    const bodyH = Math.max(1, c.frame.height - c.stripHeight);
-    const w = Math.max(1, c.frame.width);
-    const side = w * c.band;
-    const depth = c.bandY !== undefined && c.bandY > 0 ? Math.min(c.bandY, bodyH / 2) : c.band * bodyH;
-    const up = (_a = c.topOutside) !== null && _a !== void 0 ? _a : 0;
-    return [
-        { side: 'left', name: 'left', rect: { x: c.frame.x, y: bodyY, width: side, height: bodyH } },
-        { side: 'right', name: 'right', rect: { x: c.frame.x + w - side, y: bodyY, width: side, height: bodyH } },
-        // above the frame: the whole width, since no side band is up there to take the corners
-        ...(up > 0 ? [{ side: 'top', name: 'top', rect: { x: c.frame.x, y: c.frame.y - up, width: w, height: up } }] : []),
-        // and under the strip; the sides take the corners here (bandOf tests rx first)
-        { side: 'top', name: 'top-inside', rect: { x: c.frame.x + side, y: bodyY, width: w - 2 * side, height: depth } },
-        { side: 'bottom', name: 'bottom', rect: { x: c.frame.x + side, y: bodyY + bodyH - depth, width: w - 2 * side, height: depth } },
-    ];
-}
 /**
  * The band a point is in for a TILE drag: the sides and the bottom as
  * `bandOf` gives them, and "top" ONLY from the band hanging above the frame.
- * The rows under the strip are the page.
+ * The rows under the strip are the page. A lane there meant "above" too
+ * (0.4.62–0.4.66), so a hand coming down at speed read above, above, page —
+ * the answer never changed across the header and the tabs looked skipped.
+ * One place means above: above (0.4.67).
  */
 function tileBand(f, stripHeight, x, y, band, bandY, topOutside, grow = 1) {
     const up = (topOutside !== null && topOutside !== void 0 ? topOutside : 0) * grow;
-    if (up > 0 && x >= f.x && x <= f.x + f.width && y < f.y && y >= f.y - up)
-        return 'top';
-    return bandOf(f, stripHeight, x, y, band, bandY === undefined ? undefined : bandY * grow);
+    if (up > 0 && x >= f.x && x <= f.x + f.width && y < f.y && y >= f.y - up) {
+        // the sides take the corners here too (0.4.48's precedence): a widget
+        // carried along the top of a panel to its far right means "after it"
+        const rx = (x - f.x) / Math.max(1, f.width);
+        return rx < band ? 'left' : rx > 1 - band ? 'right' : 'top';
+    }
+    const side = bandOf(f, stripHeight, x, y, band, bandY === undefined ? undefined : bandY * grow);
+    return side === 'top' ? null : side;
 }
 /** The board a container sits on, found by id through the tree. */
 function boardOf(roots, containerId) {
@@ -239,7 +181,12 @@ export function resolve(input) {
         const grow = 1 + BESIDE_STAY / BESIDE_BAND;
         const stay = tileBand(p.frame0, stripH, x, y, BESIDE_BAND + BESIDE_STAY, depth, c0 === null || c0 === void 0 ? void 0 : c0.topOutside, grow);
         const other = tileBand(p.frame0, stripH, x, y, BESIDE_BAND, depth, c0 === null || c0 === void 0 ? void 0 : c0.topOutside);
-        const onVacated = !!p.vacated && inRect(p.vacated, x, y, input.gap);
+        // The cell an "above" took is the container's own rest rows, so "over the
+        // vacated cell" would hold the beside 130 px into what is the PAGE — a
+        // fast hand then saw no change at all across the header. Inside the body
+        // the vacated cell does not count; beside the frame it still does.
+        const insideBody = inRect(p.frame0, x, y) && y >= p.frame0.y + stripH;
+        const onVacated = !!p.vacated && !insideBody && inRect(p.vacated, x, y, input.gap);
         const held = stay === p.side || (!(other !== null && other !== p.side) && onVacated);
         if (held) {
             const board = boardOf(input.roots, p.containerId);
@@ -311,8 +258,10 @@ export function resolve(input) {
             const frame = atRest !== null && atRest !== void 0 ? atRest : c.frame;
             const tx = atRest ? x : x + dx;
             const ty = atRest ? y : y + dy;
-            if (tileBand(frame, c.stripHeight, tx, ty, c.band, c.bandY, c.topOutside) === 'top')
-                return { kind: 'beside', board, containerId: c.id, side: 'top', kept: false };
+            // only the band above the frame can answer from out here — and its corners are the sides'
+            const side = tileBand(frame, c.stripHeight, tx, ty, c.band, c.bandY, c.topOutside);
+            if (side)
+                return { kind: 'beside', board, containerId: c.id, side, kept: false };
             const deeper = c.inner ? overhang(c.inner, atRest ? c.frame.x - atRest.x : dx, atRest ? c.frame.y - atRest.y : dy) : null;
             if (deeper)
                 return deeper;