@grafloria/element 0.4.46 → 0.4.48

package/package.json

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

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

@@ -1264,8 +1264,10 @@ export function bindDashboardGrid(api, group, options = {}) {
     const TAB_FRAME_GRIP = 3;
     const edgeGripFor = (grp) => (isTabsGroup(grp) ? TAB_FRAME_GRIP : EDGE_GRIP);
     const BESIDE_BAND = 0.2;
+    /** How much wider the band is for a pointer ALREADY in it — a hand resting on the boundary must not flicker between beside and into. */
+    const BESIDE_STAY = 0.05;
     /** The outer band of a container FRAME the point is in — null in the strip, in the middle, or outside. */
-    const bandOf = (f, wx, wy) => {
+    const bandOf = (f, wx, wy, band = BESIDE_BAND) => {
         if (wx < f.x || wx > f.x + f.width || wy < f.y || wy > f.y + f.height)
             return null;
         const bodyY = f.y + TAB_STRIP_HEIGHT;
@@ -1274,11 +1276,15 @@ export function bindDashboardGrid(api, group, options = {}) {
         const ry = (wy - bodyY) / bodyH;
         if (ry < 0)
             return null; // the strip: a new tab, the strip's own business
-        if (rx >= BESIDE_BAND && rx <= 1 - BESIDE_BAND && ry >= BESIDE_BAND && ry <= 1 - BESIDE_BAND)
-            return null; // the middle: into the page
-        const d = [['left', rx], ['right', 1 - rx], ['top', ry], ['bottom', 1 - ry]];
-        d.sort((a, b) => a[1] - b[1]);
-        return d[0][0];
+        if (rx < band)
+            return 'left'; // the sides first: they take the corners
+        if (rx > 1 - band)
+            return 'right';
+        if (ry < band)
+            return 'top';
+        if (ry > 1 - band)
+            return 'bottom';
+        return null; // the middle: into the page
     };
     const besideZoneAt = (wx, wy) => {
         var _a;
@@ -2072,6 +2078,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                         g.leg.adopted.abort();
                         g.leg = null;
                     }
+                    endBeside(true); // a band's shift gives way to the strip: the container comes back
                     if (!g.removedFromBoard) {
                         g.removedFromBoard = true;
                         engine.remove(g.id);
@@ -2092,7 +2099,8 @@ export function bindDashboardGrid(api, group, options = {}) {
                 }
             }
             // BESIDE a tab container (0.4.45): its outer band puts the widget next
-            // to it — at the board's edge the container shifts over to make room.
+            // to it — at the board's edge the container shifts over to make room,
+            // live and gliding, like any widget gives way (0.4.48).
             if (!isStatic) {
                 const z = besideZoneAt(ev.world.x, ev.world.y);
                 if (z) {
@@ -2108,16 +2116,18 @@ export function bindDashboardGrid(api, group, options = {}) {
                     // read as "elsewhere" a move later, and the shift undid itself).
                     // "Still here" is the pointer in the SAME band of the container's
                     // ORIGINAL frame (it asked for beside from there, and the container
-                    // is what moved) or over the cell the widget took: a one-row
-                    // widget's cell is not where a hand hovering the band sits, and
-                    // testing only that undid the shift on the next move, which pushed
-                    // the widget to the bottom as the panel came back (live walk N).
-                    // "Anywhere inside the original frame" is too much: a hand crossing
-                    // the bottom band on its way to the middle never reached the page
-                    // (lab L73) — the middle of the original frame is a zone change.
+                    // is what moved; the band is a little wider for a hand already in
+                    // it, so it does not flicker against "into the page" at the line)
+                    // or over the cell the widget took: a one-row widget's cell is not
+                    // where a hand hovering the band sits, and testing only that undid
+                    // the shift on the next move, which pushed the widget to the bottom
+                    // as the panel came back (live walk N). "Anywhere inside the
+                    // original frame" is too much: a hand crossing the bottom band on
+                    // its way to the middle never reached the page (lab L73) — the
+                    // middle of the original frame is a zone change.
                     const r = cellToRect({ x: beside.vacated.x, y: beside.vacated.y, w: g.spans.w, h: g.spans.h }, frame(), geom(), rows());
                     const inR = (q) => ev.world.x >= q.x - gap && ev.world.x <= q.x + q.width + gap && ev.world.y >= q.y - gap && ev.world.y <= q.y + q.height + gap;
-                    const over = bandOf(beside.frame0, ev.world.x, ev.world.y) === beside.side || inR(r);
+                    const over = bandOf(beside.frame0, ev.world.x, ev.world.y, BESIDE_BAND + BESIDE_STAY) === beside.side || inR(r);
                     if (!over)
                         endBeside(true);
                     else {