@grafloria/element 0.4.3 → 0.4.4

package/package.json

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

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

@@ -111,6 +111,8 @@ export function bindDashboardSplit(api, group, options = {}) {
         w: api.container.clientWidth || 0,
         h: api.container.clientHeight || 0,
     });
+    /** Reentrancy guard: our own frame write must not re-project through bounds:changed. */
+    let writing = false;
     /** FLUID: the frame is the container, both axes. Returns true when it changed. */
     const applyFluidFrame = () => {
         if (!fluid || disposed)
@@ -124,7 +126,13 @@ export function bindDashboardSplit(api, group, options = {}) {
             return false;
         designW = box.w;
         designH = height;
-        diagram.runSystemWrite(() => group.setFrame({ x: f.x, y: f.y, width: box.w, height }));
+        writing = true;
+        try {
+            diagram.runSystemWrite(() => group.setFrame({ x: f.x, y: f.y, width: box.w, height }));
+        }
+        finally {
+            writing = false;
+        }
         return true;
     };
     // -- the tree ---------------------------------------------------------------
@@ -840,6 +848,32 @@ export function bindDashboardSplit(api, group, options = {}) {
     api.container.addEventListener('focusin', onFocusIn);
     api.container.addEventListener('keydown', onKey);
     // -- observers --------------------------------------------------------------
+    // THE GROUP'S FRAME IS THE BOARD. When it moves — a view parked off-camera by
+    // showView, a container re-slotted by its parent, an external resize — the
+    // widgets must follow, exactly as the grid binder's do. Without this the
+    // parked view's hosts stayed on camera under the shown view (the Angular
+    // conformance drive: the sales cards bleeding through the ops tab). Member
+    // churn re-reconciles the tree the same way.
+    const groupSubs = [
+        group.on('bounds:changed', (() => {
+            if (disposed || writing)
+                return;
+            project();
+            api.render();
+        })),
+        group.on('member:added', (() => {
+            if (disposed)
+                return;
+            project(reconcile());
+            api.render();
+        })),
+        group.on('member:removed', (() => {
+            if (disposed)
+                return;
+            project(reconcile());
+            api.render();
+        })),
+    ];
     const containerObserver = fluid && typeof ResizeObserver !== 'undefined'
         ? new ResizeObserver(() => {
             if (disposed)
@@ -1023,6 +1057,8 @@ export function bindDashboardSplit(api, group, options = {}) {
             api.container.removeEventListener('keydown', onKey);
             containerObserver === null || containerObserver === void 0 ? void 0 : containerObserver.disconnect();
             hostObserver === null || hostObserver === void 0 ? void 0 : hostObserver.disconnect();
+            for (const off of groupSubs)
+                off();
             for (const el of dividerEls)
                 el.remove();
             dividerEls.length = 0;