@ankhorage/zora 25.11.0 → 25.11.1

package/src/features/graph-view/adapters/inbound/web-artifact/shouldFitGraphAfterLayout.test.ts

@@ -4,14 +4,18 @@ import { shouldFitGraphAfterLayout } from './shouldFitGraphAfterLayout';
 
 describe('shouldFitGraphAfterLayout', () => {
   it('fits the initial layout once', () => {
-    expect(shouldFitGraphAfterLayout(false, false)).toBe(true);
+    expect(shouldFitGraphAfterLayout(false, false, false)).toBe(true);
   });
 
   it('preserves viewport after the graph is ready', () => {
-    expect(shouldFitGraphAfterLayout(true, false)).toBe(false);
+    expect(shouldFitGraphAfterLayout(true, false, false)).toBe(false);
   });
 
   it('fits a changed package depth or filtered topology after readiness', () => {
-    expect(shouldFitGraphAfterLayout(true, true)).toBe(true);
+    expect(shouldFitGraphAfterLayout(true, true, false)).toBe(true);
+  });
+
+  it('fits a newly selected layout algorithm with unchanged topology', () => {
+    expect(shouldFitGraphAfterLayout(true, false, true)).toBe(true);
   });
 });

package/src/features/graph-view/adapters/inbound/web-artifact/shouldFitGraphAfterLayout.ts

@@ -1,4 +1,8 @@
-/*** Fit initial or structurally changed graphs while preserving the viewport across spacing updates. */
-export function shouldFitGraphAfterLayout(ready: boolean, topologyChanged: boolean): boolean {
-  return !ready || topologyChanged;
+/*** Fit initial, topology, or layout-algorithm changes while preserving viewport intent otherwise. */
+export function shouldFitGraphAfterLayout(
+  ready: boolean,
+  topologyChanged: boolean,
+  layoutChanged: boolean,
+): boolean {
+  return !ready || topologyChanged || layoutChanged;
 }

package/web-dist/components/graph-view/GraphView.js

@@ -122736,7 +122736,8 @@ function createGraphController(cy, fitPaddingRef, optimizeFit) {
     readableSize: 0,
     fitSize: Infinity,
     readableZoom: 0,
-    fitZoom: Infinity
+    fitZoom: Infinity,
+    resizeSnapshot: null
   };
   const controller = {
     fit(options) {
@@ -122786,6 +122787,9 @@ function createGraphController(cy, fitPaddingRef, optimizeFit) {
     getReadableZoomTarget() {
       return state.readableZoom;
     },
+    beginResize() {
+      state.resizeSnapshot = captureResizeSnapshot(cy);
+    },
     settle(fit) {
       const logicalZoom = cy.zoom() / state.scale;
       const fonts = cy.nodes().filter((node) => !node.isParent() && Boolean(node.style("label"))).map((node) => Number.parseFloat(String(node.style("font-size")))).filter((size) => Number.isFinite(size) && size > 0);
@@ -122793,15 +122797,66 @@ function createGraphController(cy, fitPaddingRef, optimizeFit) {
       state.fitZoom = fonts.length ? state.fitSize / fonts.reduce((maximum, size) => Math.max(maximum, size), 0) : Infinity;
       state.scale = state.relative ? Math.min(getNodeFitZoom(cy, fitPaddingRef.current), state.fitZoom) : 1;
       applyZoomLimits(cy, state);
-      if (fit)
+      if (fit) {
+        state.resizeSnapshot = null;
+        controller.fit();
+      } else if (settlePreservedViewport(cy, state, logicalZoom))
         controller.fit();
-      else if (state.relative) {
-        setCenteredZoom(cy, logicalZoom * state.scale);
-        cy.center(cy.nodes());
-      }
     }
   };
 }
+function captureResizeSnapshot(cy) {
+  const viewport = { width: cy.width(), height: cy.height() };
+  const zoom = cy.zoom();
+  if (!isUsableViewport(viewport) || !Number.isFinite(zoom) || zoom <= 0)
+    return null;
+  const pan = cy.pan();
+  const renderedCenter = { x: viewport.width / 2, y: viewport.height / 2 };
+  return {
+    center: {
+      x: (renderedCenter.x - pan.x) / zoom,
+      y: (renderedCenter.y - pan.y) / zoom
+    },
+    nodeBounds: getNodeBoundsStatus(cy, viewport)
+  };
+}
+function settlePreservedViewport(cy, state, logicalZoom) {
+  const snapshot = state.resizeSnapshot;
+  state.resizeSnapshot = null;
+  const zoom = state.relative ? logicalZoom * state.scale : cy.zoom();
+  if (snapshot === null) {
+    if (state.relative)
+      setCenteredZoom(cy, zoom);
+    return false;
+  }
+  const viewport = { width: cy.width(), height: cy.height() };
+  if (!isUsableViewport(viewport))
+    return false;
+  cy.viewport({
+    zoom,
+    pan: {
+      x: viewport.width / 2 - snapshot.center.x * zoom,
+      y: viewport.height / 2 - snapshot.center.y * zoom
+    }
+  });
+  const nodeBounds = getNodeBoundsStatus(cy, viewport);
+  return nodeBounds === "unusable" || snapshot.nodeBounds === "fit" && nodeBounds === "clipped";
+}
+function getNodeBoundsStatus(cy, viewport) {
+  if (cy.nodes().empty())
+    return "empty";
+  if (!isUsableViewport(viewport))
+    return "unusable";
+  const bounds = cy.nodes().renderedBoundingBox();
+  if (![bounds.x1, bounds.x2, bounds.y1, bounds.y2].every(Number.isFinite))
+    return "unusable";
+  const fitsHorizontally = bounds.x1 >= 0 && bounds.x2 <= viewport.width;
+  const fitsVertically = bounds.y1 >= 0 && bounds.y2 <= viewport.height;
+  return fitsHorizontally && fitsVertically ? "fit" : "clipped";
+}
+function isUsableViewport(viewport) {
+  return Number.isFinite(viewport.width) && Number.isFinite(viewport.height) && viewport.width > 0 && viewport.height > 0;
+}
 function measureRenderedNodes(cy, nodeIds) {
   const viewport = { width: cy.width(), height: cy.height() };
   if (viewport.width <= 0 || viewport.height <= 0 || nodeIds.length === 0)
@@ -122900,31 +122955,62 @@ function createGraphResizeObserver(input) {
   if (Observer === null)
     return null;
   const sizeRef = { height: -1, width: -1 };
+  const pendingLayoutResizeRef = { current: false };
+  const pendingResizeSnapshotRef = { current: false };
+  const resizeScheduledRef = { current: false };
   const observer = new Observer((entries) => {
     const entry = entries.at(0);
     if (entry === undefined || !hasSizeChanged(sizeRef, entry.contentRect))
       return;
     sizeRef.height = entry.contentRect.height;
     sizeRef.width = entry.contentRect.width;
-    if (input.layoutRunningRef.current)
-      return;
     if (!input.readyRef.current && !input.pendingInitialFitRef.current)
       return;
-    scheduleResizeFit(input);
+    captureResizeSnapshot2(input, pendingResizeSnapshotRef);
+    if (input.layoutRunningRef.current) {
+      pendingLayoutResizeRef.current = true;
+      return;
+    }
+    scheduleResizeFit(input, pendingLayoutResizeRef, pendingResizeSnapshotRef, resizeScheduledRef);
   });
   observer.observe(input.container);
-  return observer;
+  return {
+    disconnect: () => observer.disconnect(),
+    flushAfterLayout: () => flushAfterLayout(input, pendingLayoutResizeRef, pendingResizeSnapshotRef)
+  };
+}
+function captureResizeSnapshot2(input, pendingResizeSnapshotRef) {
+  if (pendingResizeSnapshotRef.current)
+    return;
+  input.beginViewportResize();
+  pendingResizeSnapshotRef.current = true;
+}
+function flushAfterLayout(input, pendingLayoutResizeRef, pendingResizeSnapshotRef) {
+  if (!pendingLayoutResizeRef.current || input.cy.destroyed() || input.layoutRunningRef.current)
+    return;
+  pendingLayoutResizeRef.current = false;
+  pendingResizeSnapshotRef.current = false;
+  input.cy.resize();
 }
-function scheduleResizeFit(input) {
+function scheduleResizeFit(input, pendingLayoutResizeRef, pendingResizeSnapshotRef, resizeScheduledRef) {
+  if (resizeScheduledRef.current)
+    return;
+  resizeScheduledRef.current = true;
   scheduleGraphFrame(() => {
-    if (input.cy.destroyed() || input.layoutRunningRef.current)
+    resizeScheduledRef.current = false;
+    if (input.cy.destroyed())
       return;
+    if (input.layoutRunningRef.current) {
+      pendingLayoutResizeRef.current = true;
+      return;
+    }
     input.cy.resize();
     if (input.cy.width() <= 0 || input.cy.height() <= 0)
       return;
+    pendingResizeSnapshotRef.current = false;
     const completedPendingInitialFit = input.pendingInitialFitRef.current;
     input.pendingInitialFitRef.current = false;
-    input.settleViewport();
+    input.settleViewport(completedPendingInitialFit);
     input.onViewportSettled(completedPendingInitialFit);
   });
 }
@@ -123233,8 +123319,8 @@ function stopGraphLayout(layout, handleStop) {
 }
 
 // src/features/graph-view/adapters/inbound/web-artifact/shouldFitGraphAfterLayout.ts
-function shouldFitGraphAfterLayout(ready, topologyChanged) {
-  return !ready || topologyChanged;
+function shouldFitGraphAfterLayout(ready, topologyChanged, layoutChanged) {
+  return !ready || topologyChanged || layoutChanged;
 }
 
 // src/features/graph-view/adapters/inbound/web-artifact/sizeGraphNodesToLabels.ts
@@ -123384,6 +123470,7 @@ function createRuntimeState(cy, container, callbacksRef) {
     loopSizer: createGraphLoopSizer(cy),
     pendingInitialFitRef: { current: false },
     readyRef,
+    settledLayoutRef: { current: null },
     settledTopologyRef: { current: null },
     relayoutScheduledRef: { current: false },
     renderedNodeListeners
@@ -123392,7 +123479,8 @@ function createRuntimeState(cy, container, callbacksRef) {
   const resizeObserver = createGraphResizeObserver({
     container,
     cy,
-    settleViewport: () => viewport.settle(true),
+    beginViewportResize: () => viewport.beginResize(),
+    settleViewport: (fit) => viewport.settle(fit),
     layoutRunningRef,
     pendingInitialFitRef: stateBase.pendingInitialFitRef,
     onViewportSettled: (completedPendingInitialFit) => {
@@ -123468,6 +123556,7 @@ function completeCurrentLayout(state, generation) {
     state.layoutRef.current = null;
     state.cy.resize();
     state.layoutRunningRef.current = false;
+    state.resizeObserver?.flushAfterLayout();
     if (!hasUsableViewport(state.cy)) {
       if (!state.readyRef.current)
         state.pendingInitialFitRef.current = true;
@@ -123478,8 +123567,9 @@ function completeCurrentLayout(state, generation) {
     if (input === null)
       return;
     const topology = getGraphTopologyKey(input.nodes, input.edges);
-    const shouldFit = shouldFitGraphAfterLayout(state.readyRef.current, topology !== state.settledTopologyRef.current);
+    const shouldFit = shouldFitGraphAfterLayout(state.readyRef.current, topology !== state.settledTopologyRef.current, input.layout !== state.settledLayoutRef.current);
     state.viewport.settle(shouldFit);
+    state.settledLayoutRef.current = input.layout;
     state.settledTopologyRef.current = topology;
     const fitRequest = state.fitRequestRef.current;
     state.fitRequestRef.current = null;