pi-weave 0.3.11 → 0.3.12

package/src/web/client/graph/Graph.tsx

@@ -154,6 +154,18 @@ export function Graph(props: GraphProps) {
   // mount frames the *starting* positions, which a settling simulation then
   // pushes past the edges — a two-note vault opened with clipped circles.
   const fitted = useRef(false);
+  // A re-frame asked for while the layout was still moving, done when it rests.
+  const reframe = useRef(false);
+  /**
+   * Frame the graph for where it is shown: the full view fits everything, and
+   * the Context card's note graph opens on the open note and its neighbours,
+   * since you read it while on that note (`renderer.ts`'s `focus`).
+   */
+  const frame = useCallback(() => {
+    const { full: whole, model: shown } = live.current;
+    if (whole) renderer.current?.fit();
+    else renderer.current?.focus(shown.highlight);
+  }, []);
   /**
    * Arm the simulation clock — idempotent.
    *
@@ -171,9 +183,10 @@ export function Graph(props: GraphProps) {
       engine.tick();
       // Asleep: let the clock die. The next pin re-arms it.
       if (!engine.awake()) {
-        if (!fitted.current) {
+        if (!fitted.current || reframe.current) {
           fitted.current = true;
-          renderer.current?.fit();
+          reframe.current = false;
+          frame();
         }
         return;
       }
@@ -220,8 +233,8 @@ export function Graph(props: GraphProps) {
   // Read by the mount-time `onSelect`, which outlives this render.
   const trailRef = useRef<ReadonlyMap<string, TrailGlow>>(NO_GLOWS);
   trailRef.current = props.trail ?? NO_GLOWS;
-  const live = useRef({ view, model, picture, onSelect: props.onSelect, selectedId: props.selectedId });
-  live.current = { view, model, picture, onSelect: props.onSelect, selectedId: props.selectedId };
+  const live = useRef({ view, model, picture, full, onSelect: props.onSelect, selectedId: props.selectedId });
+  live.current = { view, model, picture, full, onSelect: props.onSelect, selectedId: props.selectedId };
 
   useEffect(() => {
     const instance = props.renderer(scheme);
@@ -320,6 +333,16 @@ export function Graph(props: GraphProps) {
     renderer.current?.setHighlight(picture.highlight, picture.selectedId, picture.style);
   }, [picture]);
 
+  // Re-frame when another note opens under the Context card's graph, or the
+  // graph moves between the card and the full view. A click in the full view
+  // leaves the camera where it is. Before the first layout rests, the settle
+  // frames it; while the layout is still moving, the frame waits for it.
+  useEffect(() => {
+    if (!fitted.current) return;
+    if (clock.current !== null) reframe.current = true;
+    else frame();
+  }, [full, full ? null : props.selectedId]);
+
   useEffect(() => {
     renderer.current?.setTrail(trailRef.current);
   }, [props.trail]);

package/src/web/client/graph/graph.model.ts

@@ -545,6 +545,47 @@ export function frameBox(points: readonly Point[]): ViewBox | null {
   return { x: [minX - padding, maxX + padding], y: [minY - padding, maxY + padding] };
 }
 
+/** Where sigma's camera looks, in the unit square a {@link ViewBox} is normalized onto. */
+export interface CameraTarget {
+  readonly x: number;
+  readonly y: number;
+  /** Sigma's zoom: 1 shows the whole box, smaller is closer. */
+  readonly ratio: number;
+}
+
+/** Room a focus leaves around what it frames, as a multiple of its span. */
+export const FOCUS_MARGIN = 1.2;
+
+/** The smallest span a focus frames, so a note with no links is not blown up to fill the card. */
+export const FOCUS_MIN_SPAN = COLLIDE_RADIUS * 10;
+
+/**
+ * The camera that frames `points` in a view frozen on `box`.
+ *
+ * The Context card's note graph is read while you are on a note, so it opens
+ * on that note and its neighbours instead of the whole vault. This is the
+ * arithmetic. Sigma normalizes the box onto a unit square centred on 0.5 (its
+ * longer side becomes 1), and a camera ratio of 1 shows that whole square. So
+ * the camera's centre is the points' centre in that square, and its ratio is
+ * their padded span as a share of the box. Never above 1: a focus does not
+ * zoom out past the fit.
+ *
+ * `null` when there is nothing to frame: no box, or no finite point.
+ */
+export function focusCamera(box: ViewBox | null, points: readonly Point[]): CameraTarget | null {
+  const around = frameBox(points);
+  if (box === null || around === null) return null;
+  const extent = Math.max(box.x[1] - box.x[0], box.y[1] - box.y[0]);
+  const scale = extent > 0 && Number.isFinite(extent) ? extent : 1;
+  const span = Math.max(around.x[1] - around.x[0], around.y[1] - around.y[0], FOCUS_MIN_SPAN);
+  const centre = (range: readonly [number, number]): number => (range[0] + range[1]) / 2;
+  return {
+    x: 0.5 + (centre(around.x) - centre(box.x)) / scale,
+    y: 0.5 + (centre(around.y) - centre(box.y)) / scale,
+    ratio: Math.min(1, (span * FOCUS_MARGIN) / scale),
+  };
+}
+
 /** The empty graph. What the column renders before the first payload lands. */
 export const EMPTY_RENDER_GRAPH: RenderGraph = { nodes: [], edges: [] };
 

package/src/web/client/graph/renderer.ts

@@ -1,7 +1,7 @@
 import type { GraphTheme } from "../../shared/themes";
 import type { Point } from "../../shared/layout";
-import type { EdgeDisplayOverride, GraphSettings, HighlightStyle, NodeDisplayOverride, RenderEdge, RenderGraph, RenderNode, TrailGlow, ViewBox } from "./graph.model";
-import { edgeReducer, fadeStep, frameBox, graphSettings, labelThreshold, nodeReducer, trailOverride } from "./graph.model";
+import type { CameraTarget, EdgeDisplayOverride, GraphSettings, HighlightStyle, NodeDisplayOverride, RenderEdge, RenderGraph, RenderNode, TrailGlow, ViewBox } from "./graph.model";
+import { edgeReducer, fadeStep, focusCamera, frameBox, graphSettings, labelThreshold, nodeReducer, trailOverride } from "./graph.model";
 import type { ProjectedGraph } from "./project";
 import { positionsOf, project, syncPositions } from "./project";
 
@@ -68,7 +68,7 @@ export interface SigmaLike {
    */
   setCustomBBox(box: ViewBox | null): unknown;
   refresh(): unknown;
-  getCamera(): { animatedReset(): Promise<void> };
+  getCamera(): { animatedReset(): Promise<void>; animate(state: CameraTarget): Promise<void> };
   kill(): void;
 }
 
@@ -169,6 +169,20 @@ export function sigmaRenderer(
   /** The box to freeze the view on, from the graph's *current* positions. */
   const boxOf = (): ViewBox | null => frameBox([...positionsOf(graph).values()]);
 
+  /**
+   * Repaint once a camera move lands. Sigma leaves edges out of frames drawn
+   * while the camera moves (`hideEdgesOnMove`) and repaints when the camera
+   * changes; a move onto where the camera already is changes nothing, so the
+   * frame drawn during it, without edges, stayed on screen until something
+   * else repainted. A renderer destroyed mid-move paints nothing, and a
+   * rejection from a camera killed mid-flight is noise.
+   */
+  const settle = (instance: SigmaLike, move: Promise<void>): void => {
+    move.then(() => {
+      if (sigma === instance) instance.refresh();
+    }, () => {});
+  };
+
   /**
    * Push the current highlight into sigma's reducers (§7.4).
    *
@@ -346,14 +360,24 @@ export function sigmaRenderer(
       const instance = sigma;
       if (instance === null) return;
       instance.setCustomBBox(boxOf());
-      // Sigma leaves edges out of frames drawn while the camera moves
-      // (`hideEdgesOnMove`) and repaints when the camera changes. A reset onto
-      // where the camera already is changes nothing, so the frame drawn during
-      // it, without edges, stayed on screen until something else repainted.
-      // One refresh once it settles draws them back.
-      instance.getCamera().animatedReset().then(() => {
-        if (sigma === instance) instance.refresh();
-      }, () => {});
+      settle(instance, instance.getCamera().animatedReset());
+    },
+
+    /**
+     * Frame these nodes instead of the whole graph — the Context card's note
+     * graph opening on the note you are reading (`focusCamera`). Re-frames on
+     * the current positions first, like `fit`, so the camera and the box
+     * agree. Nothing to frame (`null`, or no drawn node among `ids`) is a fit.
+     */
+    focus(ids: ReadonlySet<string> | null) {
+      const instance = sigma;
+      if (instance === null) return;
+      const box = boxOf();
+      const at = positionsOf(graph);
+      const points = [...(ids ?? [])].flatMap((id) => at.get(id) ?? []);
+      const target = focusCamera(box, points);
+      instance.setCustomBBox(box);
+      settle(instance, target === null ? instance.getCamera().animatedReset() : instance.getCamera().animate(target));
     },
 
     positions() {