@ankhorage/zora 25.11.0 → 25.11.1

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

@@ -1,5 +1,5 @@
 import { expect, test } from 'bun:test';
-import cytoscape from 'cytoscape';
+import cytoscape, { type Core } from 'cytoscape';
 
 import { createGraphController } from './createGraphController';
 
@@ -68,6 +68,123 @@ test('keeps absolute zoom semantics for consumers that do not opt in', () => {
   }
 });
 
+test('preserves manual pan while recomputing a fit-relative zoom reference', () => {
+  const cy = cytoscape({
+    headless: true,
+    elements: [{ data: { id: 'a' } }, { data: { id: 'b' }, position: { x: 300, y: 200 } }],
+  });
+  cy.width = () => 800;
+  cy.height = () => 600;
+  const owner = createGraphController(cy, { current: 50 });
+  owner.configure({ nodes: [], edges: [], richNodeRendering: false, zoomMode: 'fit-relative' });
+  try {
+    owner.settle(true);
+    owner.controller.setPan({ x: 140, y: 90 });
+    owner.settle(false);
+    expect(owner.controller.getViewport().pan).toEqual({ x: 140, y: 90 });
+
+    // Atlas #332: selecting a compound must not recenter a fit-relative viewport.
+    const atlasViewport = { x: -331.42857142857133, y: -222.85714285714278 };
+    owner.controller.setPan(atlasViewport);
+    cy.getElementById('a').select();
+    owner.settle(false);
+    expect(owner.controller.getViewport().pan).toEqual(atlasViewport);
+  } finally {
+    cy.destroy();
+  }
+});
+
+test('preserves the manual fit-relative center through grow and sidebar resizes', () => {
+  let width = 800;
+  let height = 600;
+  const cy = cytoscape({
+    headless: true,
+    elements: [
+      { data: { id: 'a' }, position: { x: 0, y: 0 } },
+      { data: { id: 'b' }, position: { x: 100, y: 80 } },
+    ],
+  });
+  cy.width = () => width;
+  cy.height = () => height;
+  const owner = createGraphController(cy, { current: 0 });
+  owner.configure({ nodes: [], edges: [], richNodeRendering: false, zoomMode: 'fit-relative' });
+  try {
+    owner.settle(true);
+    owner.controller.setZoom(0.5);
+    owner.controller.setPan({ x: 330, y: 250 });
+    const center = getViewportModelCenter(cy, width, height);
+
+    owner.beginResize();
+    width = 1000;
+    height = 700;
+    owner.settle(false);
+    expect(owner.controller.getViewport().zoom).toBeCloseTo(0.5);
+    expectViewportModelCenter(cy, width, height, center);
+
+    owner.beginResize();
+    width = 700;
+    owner.settle(false);
+    expect(owner.controller.getViewport().zoom).toBeCloseTo(0.5);
+    expectViewportModelCenter(cy, width, height, center);
+  } finally {
+    cy.destroy();
+  }
+});
+
+test('fits only when a shrink clips graph bounds that were previously visible', () => {
+  let width = 800;
+  const cy = cytoscape({
+    headless: true,
+    styleEnabled: true,
+    layout: { name: 'preset' },
+    elements: [
+      { data: { id: 'a' }, position: { x: 0, y: 0 } },
+      { data: { id: 'b' }, position: { x: 300, y: 200 } },
+    ],
+    style: [{ selector: 'node', style: { height: 40, width: 40 } }],
+  });
+  cy.width = () => width;
+  cy.height = () => 600;
+  const owner = createGraphController(cy, { current: 0 });
+  owner.configure({ nodes: [], edges: [], richNodeRendering: false });
+  try {
+    owner.settle(true);
+    owner.beginResize();
+    width = 200;
+    owner.settle(false);
+    expectRenderedNodesToFit(cy, width, 600);
+  } finally {
+    cy.destroy();
+  }
+});
+
+test('keeps an intentionally clipped manual absolute viewport instead of auto-fitting it', () => {
+  let width = 800;
+  const cy = cytoscape({
+    headless: true,
+    elements: [
+      { data: { id: 'a' }, position: { x: 0, y: 0 } },
+      { data: { id: 'b' }, position: { x: 300, y: 200 } },
+    ],
+  });
+  cy.width = () => width;
+  cy.height = () => 600;
+  const owner = createGraphController(cy, { current: 0 });
+  owner.configure({ nodes: [], edges: [], richNodeRendering: false });
+  try {
+    owner.settle(true);
+    owner.controller.setPan({ x: -600, y: -400 });
+    const center = getViewportModelCenter(cy, width, 600);
+    owner.beginResize();
+    width = 700;
+    owner.settle(false);
+    expectViewportModelCenter(cy, width, 600, center);
+    expect(cy.nodes().renderedBoundingBox().x2).toBeLessThan(0);
+  } finally {
+    cy.destroy();
+  }
+});
+
 test('caps automatic label size for tiny graphs and expands manual zoom for large graphs', () => {
   const cy = cytoscape({
     headless: true,
@@ -146,3 +263,30 @@ test('measures requested rendered nodes without exposing Cytoscape', () => {
     cy.destroy();
   }
 });
+
+function getViewportModelCenter(cy: Core, width: number, height: number) {
+  const pan = cy.pan();
+  return {
+    x: (width / 2 - pan.x) / cy.zoom(),
+    y: (height / 2 - pan.y) / cy.zoom(),
+  };
+}
+
+function expectRenderedNodesToFit(cy: Core, width: number, height: number) {
+  const bounds = cy.nodes().renderedBoundingBox();
+  expect(bounds.x1).toBeGreaterThanOrEqual(0);
+  expect(bounds.y1).toBeGreaterThanOrEqual(0);
+  expect(bounds.x2).toBeLessThanOrEqual(width);
+  expect(bounds.y2).toBeLessThanOrEqual(height);
+}
+
+function expectViewportModelCenter(
+  cy: Core,
+  width: number,
+  height: number,
+  expected: { readonly x: number; readonly y: number },
+) {
+  const actual = getViewportModelCenter(cy, width, height);
+  expect(actual.x).toBeCloseTo(expected.x);
+  expect(actual.y).toBeCloseTo(expected.y);
+}

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

@@ -23,6 +23,7 @@ export function createGraphController(
     fitSize: Infinity,
     readableZoom: 0,
     fitZoom: Infinity,
+    resizeSnapshot: null as GraphResizeSnapshot | null,
   };
   const controller: GraphViewController = {
     fit(options) {
@@ -78,6 +79,10 @@ export function createGraphController(
     getReadableZoomTarget() {
       return state.readableZoom;
     },
+    /*** Capture the model point beneath the current viewport center before Cytoscape resizes. */
+    beginResize() {
+      state.resizeSnapshot = captureResizeSnapshot(cy);
+    },
     settle(fit: boolean) {
       const logicalZoom = cy.zoom() / state.scale;
       const fonts = cy
@@ -95,15 +100,91 @@ export function createGraphController(
         ? Math.min(getNodeFitZoom(cy, fitPaddingRef.current), state.fitZoom)
         : 1;
       applyZoomLimits(cy, state);
-      if (fit) controller.fit();
-      else if (state.relative) {
-        setCenteredZoom(cy, logicalZoom * state.scale);
-        cy.center(cy.nodes());
-      }
+      if (fit) {
+        state.resizeSnapshot = null;
+        controller.fit();
+      } else if (settlePreservedViewport(cy, state, logicalZoom)) controller.fit();
     },
   };
 }
 
+interface GraphResizeSnapshot {
+  readonly center: { readonly x: number; readonly y: number };
+  readonly nodeBounds: GraphNodeBoundsStatus;
+}
+
+type GraphNodeBoundsStatus = 'clipped' | 'empty' | 'fit' | 'unusable';
+
+/*** Capture the model-space center and whether the prior viewport was an intact graph fit. */
+function captureResizeSnapshot(cy: Core): GraphResizeSnapshot | null {
+  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),
+  };
+}
+
+/*** Preserve a manual viewport through resize, fitting only when an intact prior fit becomes invalid. */
+function settlePreservedViewport(
+  cy: Core,
+  state: {
+    readonly relative: boolean;
+    resizeSnapshot: GraphResizeSnapshot | null;
+    readonly scale: number;
+  },
+  logicalZoom: number,
+): boolean {
+  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');
+}
+
+/*** Accept only finite non-empty node bounds that are wholly visible in a usable viewport. */
+function getNodeBoundsStatus(
+  cy: Core,
+  viewport: { readonly width: number; readonly height: number },
+): GraphNodeBoundsStatus {
+  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';
+}
+
+/*** Reject zero, negative, and non-finite renderer dimensions before viewport arithmetic. */
+function isUsableViewport(viewport: { readonly width: number; readonly height: number }): boolean {
+  return (
+    Number.isFinite(viewport.width) &&
+    Number.isFinite(viewport.height) &&
+    viewport.width > 0 &&
+    viewport.height > 0
+  );
+}
+
 /*** Measure rendered node geometry for public consumers while keeping Cytoscape private. */
 function measureRenderedNodes(cy: Core, nodeIds: readonly string[]): GraphViewMeasurement | null {
   const viewport = { width: cy.width(), height: cy.height() };

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

@@ -18,7 +18,7 @@ test('settles a pending initial fit only after the viewport becomes usable', ()
   let callback: ResizeCallback | null = null;
   let width = 0;
   let height = 0;
-  const calls = { resize: 0, settle: 0, completedPending: [] as boolean[] };
+  const calls = { resize: 0, settle: [] as boolean[], completedPending: [] as boolean[] };
   const observerCalls = { disconnect: 0, observe: 0 };
 
   class FakeResizeObserver {
@@ -57,8 +57,9 @@ test('settles a pending initial fit only after the viewport becomes usable', ()
     const observer = createGraphResizeObserver({
       container: {},
       cy,
-      settleViewport: () => {
-        calls.settle += 1;
+      beginViewportResize: () => undefined,
+      settleViewport: (fit) => {
+        calls.settle.push(fit);
       },
       layoutRunningRef,
       pendingInitialFitRef,
@@ -71,12 +72,12 @@ test('settles a pending initial fit only after the viewport becomes usable', ()
     expect(observerCalls.observe).toBe(1);
 
     callback?.([{ contentRect: { height: 0, width: 0 } }]);
-    expect(calls).toEqual({ resize: 0, settle: 0, completedPending: [] });
+    expect(calls).toEqual({ resize: 0, settle: [], completedPending: [] });
 
     pendingInitialFitRef.current = true;
     callback?.([{ contentRect: { height: 1, width: 1 } }]);
     expect(calls.resize).toBe(1);
-    expect(calls.settle).toBe(0);
+    expect(calls.settle).toEqual([]);
     expect(pendingInitialFitRef.current).toBe(true);
 
     width = 640;
@@ -84,7 +85,7 @@ test('settles a pending initial fit only after the viewport becomes usable', ()
     callback?.([{ contentRect: { height, width } }]);
 
     expect(calls.resize).toBe(2);
-    expect(calls.settle).toBe(1);
+    expect(calls.settle).toEqual([true]);
     expect(calls.completedPending).toEqual([true]);
     expect(pendingInitialFitRef.current).toBe(false);
 
@@ -97,3 +98,159 @@ test('settles a pending initial fit only after the viewport becomes usable', ()
     else globals.requestAnimationFrame = previousFrame;
   }
 });
+
+test('preserves the settled viewport on ordinary resizes', () => {
+  interface ResizeEntry {
+    readonly contentRect: { readonly height: number; readonly width: number };
+  }
+  type ResizeCallback = (entries: readonly ResizeEntry[]) => void;
+
+  const globals = globalThis as unknown as {
+    ResizeObserver?: unknown;
+    requestAnimationFrame?: (callback: () => void) => number;
+  };
+  const previousObserver = globals.ResizeObserver;
+  const previousFrame = globals.requestAnimationFrame;
+  let callback: ResizeCallback | null = null;
+  const calls = { settle: [] as boolean[] };
+  const frames: (() => void)[] = [];
+
+  class FakeResizeObserver {
+    constructor(next: ResizeCallback) {
+      callback = next;
+    }
+
+    observe() {
+      return undefined;
+    }
+
+    disconnect() {
+      return undefined;
+    }
+  }
+
+  globals.ResizeObserver = FakeResizeObserver;
+  globals.requestAnimationFrame = (scheduled) => {
+    frames.push(scheduled);
+    return frames.length;
+  };
+
+  try {
+    createGraphResizeObserver({
+      container: {},
+      cy: {
+        destroyed: () => false,
+        height: () => 480,
+        resize: () => undefined,
+        width: () => 640,
+      } as unknown as Core,
+      beginViewportResize: () => undefined,
+      settleViewport: (fit) => calls.settle.push(fit),
+      layoutRunningRef: { current: false },
+      pendingInitialFitRef: { current: false },
+      readyRef: { current: true },
+      onViewportSettled: () => undefined,
+    });
+
+    callback?.([{ contentRect: { height: 480, width: 640 } }]);
+    callback?.([{ contentRect: { height: 600, width: 800 } }]);
+    expect(frames).toHaveLength(1);
+    frames[0]?.();
+    expect(calls.settle).toEqual([false]);
+  } finally {
+    if (previousObserver === undefined) delete globals.ResizeObserver;
+    else globals.ResizeObserver = previousObserver;
+    if (previousFrame === undefined) delete globals.requestAnimationFrame;
+    else globals.requestAnimationFrame = previousFrame;
+  }
+});
+
+test('transfers a queued manual viewport resize to a newly started unchanged layout', () => {
+  interface ResizeEntry {
+    readonly contentRect: { readonly height: number; readonly width: number };
+  }
+  type ResizeCallback = (entries: readonly ResizeEntry[]) => void;
+
+  const globals = globalThis as unknown as {
+    ResizeObserver?: unknown;
+    requestAnimationFrame?: (callback: () => void) => number;
+  };
+  const previousObserver = globals.ResizeObserver;
+  const previousFrame = globals.requestAnimationFrame;
+  let callback: ResizeCallback | null = null;
+  const frames: (() => void)[] = [];
+  const calls = {
+    begin: [] as {
+      readonly pan: { readonly x: number; readonly y: number };
+      readonly zoom: number;
+    }[],
+    resize: 0,
+    settle: [] as boolean[],
+  };
+  const layoutRunningRef = { current: false };
+  const manualViewport = { pan: { x: 140, y: 90 }, zoom: 0.5 };
+
+  class FakeResizeObserver {
+    constructor(next: ResizeCallback) {
+      callback = next;
+    }
+
+    observe() {
+      return undefined;
+    }
+
+    disconnect() {
+      return undefined;
+    }
+  }
+
+  globals.ResizeObserver = FakeResizeObserver;
+  globals.requestAnimationFrame = (scheduled) => {
+    frames.push(scheduled);
+    return frames.length;
+  };
+  try {
+    const observer = createGraphResizeObserver({
+      container: {},
+      cy: {
+        destroyed: () => false,
+        height: () => 480,
+        resize: () => {
+          calls.resize += 1;
+        },
+        width: () => 640,
+      } as unknown as Core,
+      beginViewportResize: () => {
+        calls.begin.push(manualViewport);
+      },
+      settleViewport: (fit) => {
+        calls.settle.push(fit);
+      },
+      layoutRunningRef,
+      pendingInitialFitRef: { current: false },
+      readyRef: { current: true },
+      onViewportSettled: () => undefined,
+    });
+
+    callback?.([{ contentRect: { height: 480, width: 640 } }]);
+    expect(calls.begin).toEqual([manualViewport]);
+    expect(frames).toHaveLength(1);
+
+    // A same-topology layout starts after ResizeObserver captured the manual pan/zoom.
+    layoutRunningRef.current = true;
+    frames[0]?.();
+    expect(calls).toEqual({ begin: [manualViewport], resize: 0, settle: [] });
+
+    // Its latest completion consumes the preserved snapshot through the normal non-fitting settle.
+    layoutRunningRef.current = false;
+    observer?.flushAfterLayout();
+    expect(calls).toEqual({ begin: [manualViewport], resize: 1, settle: [] });
+    calls.settle.push(false);
+    expect(calls.settle).toEqual([false]);
+  } finally {
+    if (previousObserver === undefined) delete globals.ResizeObserver;
+    else globals.ResizeObserver = previousObserver;
+    if (previousFrame === undefined) delete globals.requestAnimationFrame;
+    else globals.requestAnimationFrame = previousFrame;
+  }
+});

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

@@ -5,7 +5,8 @@ import { scheduleGraphFrame } from './scheduleGraphFrame';
 interface CreateGraphResizeObserverInput {
   readonly container: unknown;
   readonly cy: Core;
-  readonly settleViewport: () => void;
+  readonly beginViewportResize: () => void;
+  readonly settleViewport: (fit: boolean) => void;
   readonly layoutRunningRef: { current: boolean };
   readonly pendingInitialFitRef: { current: boolean };
   readonly readyRef: { current: boolean };
@@ -14,6 +15,7 @@ interface CreateGraphResizeObserverInput {
 
 export interface GraphResizeObserver {
   disconnect(): void;
+  flushAfterLayout(): void;
 }
 
 /*** Observe settled container resizing without racing an active layout generation. */
@@ -23,29 +25,76 @@ export function createGraphResizeObserver(
   const Observer = readResizeObserverConstructor();
   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);
+    captureResizeSnapshot(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),
+  };
+}
+
+/*** Keep the first pre-resize viewport intent until its resize or layout settlement consumes it. */
+function captureResizeSnapshot(
+  input: CreateGraphResizeObserverInput,
+  pendingResizeSnapshotRef: { current: boolean },
+) {
+  if (pendingResizeSnapshotRef.current) return;
+  input.beginViewportResize();
+  pendingResizeSnapshotRef.current = true;
 }
 
-/*** Fit one genuine resize only after the active layout has settled. */
-function scheduleResizeFit(input: CreateGraphResizeObserverInput) {
+/*** Apply a resize observed during layout before that layout settles the preserved viewport. */
+function flushAfterLayout(
+  input: CreateGraphResizeObserverInput,
+  pendingLayoutResizeRef: { current: boolean },
+  pendingResizeSnapshotRef: { current: boolean },
+) {
+  if (!pendingLayoutResizeRef.current || input.cy.destroyed() || input.layoutRunningRef.current)
+    return;
+  pendingLayoutResizeRef.current = false;
+  pendingResizeSnapshotRef.current = false;
+  input.cy.resize();
+}
+
+/*** Preserve settled viewport intent across one coalesced resize, except the deferred initial fit. */
+function scheduleResizeFit(
+  input: CreateGraphResizeObserverInput,
+  pendingLayoutResizeRef: { current: boolean },
+  pendingResizeSnapshotRef: { current: boolean },
+  resizeScheduledRef: { current: boolean },
+) {
+  if (resizeScheduledRef.current) return;
+  resizeScheduledRef.current = true;
   scheduleGraphFrame(() => {
-    if (input.cy.destroyed() || input.layoutRunningRef.current) return;
+    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);
   });
 }

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

@@ -109,6 +109,48 @@ test('fits changed topology but preserves viewport and avoids relayout for highl
   }
 });
 
+test('fits a changed layout algorithm even when visible topology is unchanged', async () => {
+  const initial = Promise.withResolvers<GraphViewController>();
+  const completed = Promise.withResolvers<GraphViewController>();
+  const callbacks: { current: GraphViewCallbacks } = { current: { onReady: initial.resolve } };
+  const runtime = createGraphRuntime(undefined, callbacks);
+  const input = {
+    nodes: [{ id: 'a' }, { id: 'b' }, { id: 'c' }],
+    edges: [
+      { source: 'a', target: 'b' },
+      { source: 'b', target: 'c' },
+    ],
+    layout: 'grid' as const,
+    richNodeRendering: false,
+    zoomMode: 'fit-relative' as const,
+  };
+  try {
+    runtime.update(input);
+    const controller = await initial.promise;
+    controller.setZoom(0.7);
+    controller.setPan({ x: 40, y: 30 });
+    callbacks.current = { onLayoutComplete: completed.resolve };
+    runtime.update({ ...input, layout: 'circle' });
+    const settled = await completed.promise;
+    expect(settled.getViewport().zoom).not.toBeCloseTo(0.7);
+    expectMeasuredNodesToFit(settled, ['a', 'b', 'c']);
+  } finally {
+    runtime.destroy();
+  }
+});
+
+function expectMeasuredNodesToFit(controller: GraphViewController, nodeIds: readonly string[]) {
+  const measurement = controller.measureNodes?.(nodeIds);
+  expect(measurement).not.toBeNull();
+  if (measurement === null) return;
+  for (const node of measurement.nodes) {
+    expect(node.position.x - node.size.width / 2).toBeGreaterThanOrEqual(0);
+    expect(node.position.y - node.size.height / 2).toBeGreaterThanOrEqual(0);
+    expect(node.position.x + node.size.width / 2).toBeLessThanOrEqual(measurement.viewport.width);
+    expect(node.position.y + node.size.height / 2).toBeLessThanOrEqual(measurement.viewport.height);
+  }
+}
+
 test('preserves selection and positions through hover presentation updates without relayout', async () => {
   const ready = Promise.withResolvers<GraphViewController>();
   const events: GraphViewElementEvent[] = [];

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

@@ -61,6 +61,7 @@ interface GraphRuntimeState {
   readonly loopSizer: ReturnType<typeof createGraphLoopSizer>;
   readonly pendingInitialFitRef: { current: boolean };
   readonly readyRef: { current: boolean };
+  readonly settledLayoutRef: { current: GraphRuntimeUpdate['layout'] | null };
   readonly settledTopologyRef: { current: string | null };
   readonly relayoutScheduledRef: { current: boolean };
   readonly renderedNodeListeners: Set<RenderedNodeListener>;
@@ -127,6 +128,7 @@ function createRuntimeState(
     loopSizer: createGraphLoopSizer(cy),
     pendingInitialFitRef: { current: false },
     readyRef,
+    settledLayoutRef: { current: null as GraphRuntimeUpdate['layout'] | null },
     settledTopologyRef: { current: null as string | null },
     relayoutScheduledRef: { current: false },
     renderedNodeListeners,
@@ -137,7 +139,8 @@ function createRuntimeState(
   const resizeObserver = createGraphResizeObserver({
     container,
     cy,
-    settleViewport: () => viewport.settle(true),
+    beginViewportResize: () => viewport.beginResize(),
+    settleViewport: (fit) => viewport.settle(fit),
     layoutRunningRef,
     pendingInitialFitRef: stateBase.pendingInitialFitRef,
     onViewportSettled: (completedPendingInitialFit) => {
@@ -242,6 +245,7 @@ function completeCurrentLayout(state: GraphRuntimeState, generation: number) {
     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;
       return;
@@ -253,8 +257,10 @@ function completeCurrentLayout(state: GraphRuntimeState, generation: number) {
     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;