@kgdiff/viewer 0.2.0 → 0.3.0

package/README.md

@@ -38,9 +38,50 @@ ESM only. Runs in evergreen browsers.
   `@kgdiff/viewer/standalone/compute` add-on brings the diff engine and force layout for `load()`.
 
 Attributes: `mode` (`overlay` | `swipe` | `replay` | `changes`), `theme`, `palette`, `locale`,
-`sidebar`, `sync-hash`, `global-shortcuts`. Methods: `load`, `selectHunk`, `next`, `prev`, `play`, `pause`,
-`fit`, `exportDelta`, `reviewState`, `setReviewed`. Events: `kgdiff-ready`, `kgdiff-select`,
-`kgdiff-mode`, `kgdiff-review`, `kgdiff-error`.
+`sidebar`, `sync-hash`, `global-shortcuts`, `header`, `chrome`, `legend`, `loop`, `loop-delay`,
+`pause-on-hover`. Methods: `load`, `selectHunk`, `next`, `prev`, `play`, `pause`, `fit`,
+`exportDelta`, `reviewState`, `setReviewed`. Events: `kgdiff-ready`, `kgdiff-select`,
+`kgdiff-mode`, `kgdiff-review`, `kgdiff-error`, `kgdiff-replay-end`.
+
+## Embed a small looping replay
+
+To show a graph's changes as a small strip on another page, leave the review UI out and let the
+replay loop:
+
+```html
+<kgdiff-viewer mode="replay" chrome="none" loop style="height: 320px"></kgdiff-viewer>
+```
+
+| Attribute (property)              | Values                         | Default                                          |
+| --------------------------------- | ------------------------------ | ------------------------------------------------ |
+| `chrome` (`chrome`)               | `full`, `none`                 | `full`                                           |
+| `legend` (`legend`)               | `auto`, `full`, `mini`, `none` | `auto`: `full`, or `mini` with `chrome="none"`   |
+| `loop` (`loop`)                   | boolean                        | off                                              |
+| `loop-delay` (`loopDelay`)        | ms between the end and restart | `1200`                                           |
+| `pause-on-hover` (`pauseOnHover`) | `false` to keep playing        | on: a looping replay pauses under a mouse or pen |
+
+- `chrome="none"` shows the graph alone: no header (view switch, theme, full screen, help,
+  sidebar button), change list, step caption, playback bar, finished card, zoom buttons, minimap
+  or legend card. The hover tooltip stays, and the legend becomes one line with the families this
+  diff has, then unchanged. Clicks and keyboard shortcuts do nothing. The minimum height drops
+  from 420px to 120px. The view stays fitted: when the canvas is resized (unless the user
+  panned or zoomed since) and at the start of every loop. Labels are never cut at the edge: one
+  pushed from its spot by a neighbour moves inside the canvas or is left out (the tooltip
+  still names it).
+- `loop` plays the replay by itself (in `replay` mode) and starts it again `loop-delay` ms after
+  it ends. `pause()` stops it until `play()`; a new diff starts it again.
+- `kgdiff-replay-end` fires each time playback reaches the end, with `detail.loop` telling
+  whether it will start again. Set `loop = false` or call `pause()` in the listener to stop
+  there.
+- `fit({ padding })` fits the graph with its labels into view, keeping `padding` px around them
+  (default 24, kept for the later automatic fits); `fit({ animate: false })` jumps.
+
+```js
+let rounds = 0;
+viewer.addEventListener('kgdiff-replay-end', (event) => {
+  if (event.detail.loop && ++rounds === 3) viewer.loop = false; // three rounds, then stop
+});
+```
 
 ## Learn more
 

package/dist/controller.d.ts

@@ -12,7 +12,7 @@
  */
 import type { DiffResult, DiffStats, Locale, Rect, UnionId } from '@kgdiff/core';
 import type { LayoutResult } from '@kgdiff/layout';
-import type { Camera } from '@kgdiff/renderer';
+import { type Camera } from '@kgdiff/renderer';
 import { type ChangeFamily, type FocusState, type PaletteName, type Scene, type Theme, type ThemeName, type VisualResolver } from '@kgdiff/scene';
 import { type ChromeLayout } from './framing.js';
 import type { LoadOptions, ReportPayload, ReviewState, ThemePreference, ViewerMode } from './index.js';
@@ -30,6 +30,13 @@ export interface ControllerHost {
     review(hunk: string, reviewed: boolean, progress: ReviewState): void;
     error(error: Error): void;
     announce(text: string): void;
+    /** Playback reached the end of the replay; `loop`: it starts again after the loop delay. */
+    replayEnd(loop: boolean): void;
+}
+export interface FitOptions {
+    readonly animate?: boolean;
+    /** Room around the content, px (default `FRAME_PADDING`); kept for later automatic fits. */
+    readonly padding?: number;
 }
 export interface ControllerDeps {
     readonly now: () => number;
@@ -84,6 +91,13 @@ export declare class ViewerController {
     clock: ReplayClock | null;
     split: number;
     emphasis: number;
+    /**
+     * Keep the view fitted (embeds without controls): fit again when the canvas is resized unless
+     * the user moved the camera since, and at the start of every loop.
+     */
+    autoFit: boolean;
+    /** Canvas clicks select (and double clicks fly); off for embeds without controls. */
+    selectOnClick: boolean;
     constructor(host: ControllerHost, deps: ControllerDeps);
     subscribe(listener: (topics: ReadonlySet<Topic>) => void): () => void;
     /** Deliver pending notifications now (also used by tests). */
@@ -108,7 +122,15 @@ export declare class ViewerController {
      * Every fit and flight frames its target in the free part of the canvas (`framing.ts`).
      */
     setChrome(provider: (() => ChromeLayout) | null): void;
-    /** The canvas was laid out or resized: run the initial fit a new diff is waiting for. */
+    /**
+     * Keep labels whole inside the canvas (embeds without camera controls): a label pushed from
+     * its spot by a neighbour moves inside or is left out, never cut at the edge.
+     */
+    setLabelsInside(inside: boolean): void;
+    /**
+     * The canvas was laid out or resized: run the initial fit a new diff is waiting for, or (with
+     * `autoFit`) fit again unless the user moved the camera since the last fit.
+     */
     layoutChanged(): void;
     /** The user panned / zoomed: suspend replay camera follow for `USER_CAMERA_GRACE`. */
     noteUserCamera(): void;
@@ -143,12 +165,10 @@ export declare class ViewerController {
     flyToNode(i: number): void;
     flyToSelection(): void;
     /**
-     * Fit everything visible (the focus in changes-only mode) into the free part of the canvas.
-     * Before the canvas is laid out it falls back to the renderer's own fit.
+     * Fit everything visible (the focus in changes-only mode), labels included, into the free part
+     * of the canvas. Before the canvas is laid out it falls back to the renderer's own fit.
      */
-    fit(options?: {
-        readonly animate?: boolean;
-    }): Promise<void>;
+    fit(options?: FitOptions): Promise<void>;
     zoom(direction: 1 | -1): void;
     /** Clear hover state (pointer left the canvas). */
     clearHover(): void;
@@ -178,8 +198,21 @@ export declare class ViewerController {
     /** Bring a union node into the scene and the focus (search results), then select it. */
     revealNode(id: UnionId): Promise<void>;
     play(): void;
+    /** Pause; a looping replay stays paused (until `play`, a new diff or loop turned on again). */
     pause(): void;
     togglePlay(): void;
+    /**
+     * Play the replay over and over: `delay` ms after it ends it starts again; null plays it
+     * once. Turning the loop on starts a replay that is shown but not playing.
+     */
+    setLoop(delay: number | null): void;
+    get loopDelay(): number | null;
+    /**
+     * Hold playback while the pointer rests on the graph (`pause-on-hover`): a playing replay
+     * pauses and continues on release; a pending loop restart waits for the release, then the
+     * full loop delay.
+     */
+    hold(held: boolean): void;
     seek(t: number): void;
     stepReplay(direction: 1 | -1): void;
     restart(): void;

package/dist/controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../src/controller.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../src/controller.ts"],"names":[],"mappings":"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"}

package/dist/controller.js

@@ -1,7 +1,8 @@
 import { KgdiffError } from '@kgdiff/core';
+import { labelFootprint, } from '@kgdiff/renderer';
 import { buildScene, computeFocus, createViewState, createVisualResolver, frameBounds, getTheme, } from '@kgdiff/scene';
 import { computeNow, computeStatus, loadCompute } from './compute-loader.js';
-import { chromeInsets, FRAME_PADDING, freeView, NO_INSETS, } from './framing.js';
+import { chromeInsets, FRAME_PADDING, freeView, NO_INSETS, zoomFit, } from './framing.js';
 import { translate } from './i18n.js';
 import { buildList, EMPTY_LIST, stepHunk } from './list-model.js';
 import { readPayload, runLoad } from './pipeline.js';
@@ -72,6 +73,14 @@ export class ViewerController {
     clock = null;
     split = 0.5;
     emphasis = 1;
+    /**
+     * Keep the view fitted (embeds without controls): fit again when the canvas is resized unless
+     * the user moved the camera since, and at the start of every loop.
+     */
+    autoFit = false;
+    /** Canvas clicks select (and double clicks fly); off for embeds without controls. */
+    selectOnClick = true;
+    #labelsInside = false;
     #review = null;
     #searchIndex = null;
     #renderer = null;
@@ -94,6 +103,16 @@ export class ViewerController {
     #savedCamera = null;
     /** A new diff is installed but has not been fitted to a laid-out canvas yet. */
     #needsFit = false;
+    /** The user panned or zoomed since the last fit. */
+    #userMoved = false;
+    #fitPadding = FRAME_PADDING;
+    /** A finished replay starts again this long (ms) after its end; null: it plays once. */
+    #loopDelay = null;
+    /** When a finished looping replay starts again (`deps.now()` time), else NaN. */
+    #restartAt = Number.NaN;
+    /** Playback is held (pointer over the graph); `#resume`: it was playing and continues after. */
+    #held = false;
+    #resume = false;
     #listeners = new Set();
     #pendingTopics = new Set();
     #flushQueued = false;
@@ -206,6 +225,8 @@ export class ViewerController {
     fail(error) {
         this.#loadToken++;
         this.clock?.pause();
+        this.#restartAt = Number.NaN;
+        this.#resume = false;
         this.status = 'error';
         this.error = error;
         this.step = null;
@@ -275,6 +296,8 @@ export class ViewerController {
         this.#pendingHunk = null;
         if (pending !== null)
             this.selectHunkById(pending.id, { fly: pending.fly });
+        else
+            this.#autoplay();
     }
     /** (Re)build scene, resolver, list, clock and focus; selection is carried over by id. */
     #rebuildScene() {
@@ -328,7 +351,10 @@ export class ViewerController {
         if (this.#renderer)
             return;
         const backend = renderBackend();
-        const renderer = backend.createRenderer(stage, { theme: this.theme });
+        const renderer = backend.createRenderer(stage, {
+            theme: this.theme,
+            labelsInside: this.#labelsInside,
+        });
         this.#renderer = renderer;
         // Re-attached (element moved): keep the view; this also stops the renderer's auto-fit.
         if (this.#savedCamera)
@@ -371,10 +397,26 @@ export class ViewerController {
     setChrome(provider) {
         this.#chrome = provider;
     }
-    /** The canvas was laid out or resized: run the initial fit a new diff is waiting for. */
+    /**
+     * Keep labels whole inside the canvas (embeds without camera controls): a label pushed from
+     * its spot by a neighbour moves inside or is left out, never cut at the edge.
+     */
+    setLabelsInside(inside) {
+        this.#labelsInside = inside;
+        this.#renderer?.setLabelsInside(inside);
+    }
+    /**
+     * The canvas was laid out or resized: run the initial fit a new diff is waiting for, or (with
+     * `autoFit`) fit again unless the user moved the camera since the last fit.
+     */
     layoutChanged() {
-        if (!this.#needsFit || this.status !== 'ready')
+        if (this.status !== 'ready')
+            return;
+        if (!this.#needsFit) {
+            if (this.autoFit && !this.#userMoved)
+                void this.fit({ animate: false });
             return;
+        }
         // A selection made before the first layout (deep link, `kgdiff-ready` handler) wins.
         const target = this.#selectionBounds();
         if (target) {
@@ -384,17 +426,16 @@ export class ViewerController {
             this.#flyTo(target, { animate: false });
             return;
         }
-        const bounds = this.#contentBounds();
-        const padding = bounds ? this.#frameInsets(bounds, FIT_MAX_ZOOM) : null;
+        const fit = this.#fitTarget();
         const camera = this.#renderer?.camera;
-        if (!bounds || !padding || !camera)
+        if (!fit || !camera)
             return;
-        this.#needsFit = false;
-        void camera.fit(bounds, { animate: false, padding, maxZoom: FIT_MAX_ZOOM });
+        void this.#fitTo(camera, fit, { animate: false });
     }
     /** The user panned / zoomed: suspend replay camera follow for `USER_CAMERA_GRACE`. */
     noteUserCamera() {
         this.#lastUserCamera = this.#deps.now();
+        this.#userMoved = true;
     }
     // ─── Frame loop ───────────────────────────────────────────────────────────
     /** Redraw on the next animation frame. */
@@ -423,7 +464,13 @@ export class ViewerController {
             if (clock.playing)
                 animating = true;
             else if (clock.finished)
-                this.#host.announce(translate(this.locale, 'announce.finished'));
+                this.#ended();
+        }
+        if (!Number.isNaN(this.#restartAt) && !this.#held) {
+            if (now >= this.#restartAt)
+                this.#loopAgain();
+            else
+                animating = true;
         }
         if (this.#emphasisAnim) {
             const a = this.#emphasisAnim;
@@ -529,8 +576,11 @@ export class ViewerController {
         if (mode === null || mode === this.mode)
             return;
         this.mode = mode;
-        if (mode !== 'replay')
+        if (mode !== 'replay') {
             this.clock?.pause();
+            this.#restartAt = Number.NaN;
+            this.#resume = false;
+        }
         this.#followed = '';
         this.#updateFocus();
         this.#minimapDirty = true;
@@ -540,6 +590,8 @@ export class ViewerController {
             this.#host.mode(mode);
             this.#host.announce(translate(this.locale, 'announce.mode', { mode: translate(this.locale, `mode.${mode}`) }));
         }
+        if (mode === 'replay')
+            this.#autoplay();
     }
     // ─── Selection ────────────────────────────────────────────────────────────
     selectHunkById(id, options = {}) {
@@ -581,6 +633,8 @@ export class ViewerController {
             if (this.mode === 'replay' && this.clock) {
                 const end = this.clock.windowEnd(h);
                 this.clock.pause();
+                this.#restartAt = Number.NaN;
+                this.#resume = false;
                 if (end !== null)
                     this.clock.seek(end);
                 this.#followed = '';
@@ -795,47 +849,61 @@ export class ViewerController {
             this.#flyTo(b);
     }
     /**
-     * Fit everything visible (the focus in changes-only mode) into the free part of the canvas.
-     * Before the canvas is laid out it falls back to the renderer's own fit.
+     * Fit everything visible (the focus in changes-only mode), labels included, into the free part
+     * of the canvas. Before the canvas is laid out it falls back to the renderer's own fit.
      */
     fit(options = {}) {
         const camera = this.#renderer?.camera;
         if (!camera)
             return Promise.resolve();
-        const bounds = this.#contentBounds();
-        const padding = bounds ? this.#frameInsets(bounds, FIT_MAX_ZOOM) : null;
-        if (!bounds || !padding)
-            return camera.fit(undefined, options);
+        const { padding, ...transition } = options;
+        if (padding !== undefined) {
+            this.#fitPadding = Number.isFinite(padding) && padding >= 0 ? padding : FRAME_PADDING;
+        }
+        const fit = this.#fitTarget();
+        if (!fit)
+            return camera.fit(undefined, transition);
+        return this.#fitTo(camera, fit, transition);
+    }
+    #fitTo(camera, fit, transition) {
         this.#needsFit = false;
-        return camera.fit(bounds, { ...options, padding, maxZoom: FIT_MAX_ZOOM });
+        this.#userMoved = false;
+        return camera.fit(fit.bounds, { ...transition, padding: fit.insets, maxZoom: FIT_MAX_ZOOM });
     }
-    /** Bounds of what is drawn: the scene, or the visible part of the changes-only focus. */
-    #contentBounds() {
-        const scene = this.scene;
-        if (!scene)
+    /**
+     * Bounds and insets that show everything visible (the changes-only focus) with every label
+     * in its spot below its node, clear of the chrome, or null before layout. Measured in the
+     * union layer, which holds every state a replay or swipe passes through. Insets depend on
+     * what is framed, which depends on the zoom they allow: they are settled once more.
+     */
+    #fitTarget() {
+        const layout = this.#chrome?.();
+        const resolver = this.resolver;
+        if (!layout || !resolver || !(layout.width > 0) || !(layout.height > 0))
             return null;
-        const focus = this.focus;
-        if (!focus)
-            return frameBounds(scene);
-        let x0 = Number.POSITIVE_INFINITY;
-        let y0 = Number.POSITIVE_INFINITY;
-        let x1 = Number.NEGATIVE_INFINITY;
-        let y1 = Number.NEGATIVE_INFINITY;
-        const add = (x, y, rx, top, bottom) => {
-            x0 = Math.min(x0, x - rx);
-            x1 = Math.max(x1, x + rx);
-            y0 = Math.min(y0, y - top);
-            y1 = Math.max(y1, y + bottom);
-        };
-        // Labels sit centered below their node: leave room for a typical one.
-        for (const n of scene.nodes)
-            if (focus.nodes[n.index] === 1)
-                add(n.x, n.y, n.r + 48, n.r, n.r + 24);
-        for (const g of focus.collapsed)
-            add(g.x, g.y, 48, 12, 12);
-        if (!(x0 <= x1))
-            return frameBounds(scene);
-        return padRect({ x: x0, y: y0, width: x1 - x0, height: y1 - y0 }, 160, 1.12);
+        const frame = resolver.resolve(createViewState({
+            layer: 'union',
+            focus: this.focus,
+            families: this.families,
+            reducedMotion: this.reducedMotion,
+        }));
+        const footprint = labelFootprint(frame, this.theme);
+        const extent = (k) => footprint.at(k);
+        const discs = extent(Number.POSITIVE_INFINITY);
+        if (!discs)
+            return null;
+        const { width, height } = layout;
+        const padding = this.#fitPadding;
+        let insets = chromeInsets(discs, layout, padding, FIT_MAX_ZOOM);
+        let fit = zoomFit(extent, width, height, insets, FIT_MAX_ZOOM);
+        if (!fit)
+            return null;
+        const settled = chromeInsets(fit.content, layout, padding, FIT_MAX_ZOOM);
+        if (!sameInsets(settled, insets)) {
+            insets = settled;
+            fit = zoomFit(extent, width, height, insets, FIT_MAX_ZOOM) ?? fit;
+        }
+        return { bounds: fit.bounds, insets };
     }
     zoom(direction) {
         this.noteUserCamera();
@@ -878,6 +946,8 @@ export class ViewerController {
         this.#onHover(null);
     }
     #onCanvasClick(pick) {
+        if (!this.selectOnClick)
+            return;
         if (!pick) {
             this.clearSelection();
             return;
@@ -902,7 +972,7 @@ export class ViewerController {
         }
     }
     #onCanvasDblClick(pick) {
-        if (pick?.type !== 'node')
+        if (!this.selectOnClick || pick?.type !== 'node')
             return;
         const n = this.scene?.nodes[pick.index];
         if (!n)
@@ -1101,13 +1171,18 @@ export class ViewerController {
             return;
         if (this.mode !== 'replay')
             this.setMode('replay');
+        this.#restartAt = Number.NaN;
+        this.#resume = false;
         clock.play();
         this.#followed = '';
         this.#lastTick = 0;
         this.#notify('replay');
         this.invalidate();
     }
+    /** Pause; a looping replay stays paused (until `play`, a new diff or loop turned on again). */
     pause() {
+        this.#restartAt = Number.NaN;
+        this.#resume = false;
         if (!this.clock?.playing)
             return;
         this.clock.pause();
@@ -1120,10 +1195,79 @@ export class ViewerController {
         else
             this.play();
     }
+    /**
+     * Play the replay over and over: `delay` ms after it ends it starts again; null plays it
+     * once. Turning the loop on starts a replay that is shown but not playing.
+     */
+    setLoop(delay) {
+        const was = this.#loopDelay;
+        this.#loopDelay = delay === null ? null : Number.isFinite(delay) ? Math.max(0, delay) : 0;
+        if (this.#loopDelay === null)
+            this.#restartAt = Number.NaN;
+        else if (was === null)
+            this.#autoplay();
+    }
+    get loopDelay() {
+        return this.#loopDelay;
+    }
+    /**
+     * Hold playback while the pointer rests on the graph (`pause-on-hover`): a playing replay
+     * pauses and continues on release; a pending loop restart waits for the release, then the
+     * full loop delay.
+     */
+    hold(held) {
+        if (held === this.#held)
+            return;
+        this.#held = held;
+        const clock = this.clock;
+        if (held) {
+            if (!clock?.playing)
+                return;
+            clock.pause();
+            this.#resume = true;
+            this.#notify('replay');
+            this.invalidate();
+            return;
+        }
+        if (!Number.isNaN(this.#restartAt) && this.#loopDelay !== null) {
+            this.#restartAt = this.#deps.now() + this.#loopDelay;
+            this.#schedule();
+        }
+        if (this.#resume)
+            this.play();
+    }
+    /** Looping and showing a replay that is not playing: start it (or after the hold). */
+    #autoplay() {
+        if (this.#loopDelay === null || this.status !== 'ready' || this.mode !== 'replay')
+            return;
+        if (!this.clock || this.clock.playing || !Number.isNaN(this.#restartAt))
+            return;
+        if (this.#held)
+            this.#resume = true;
+        else
+            this.play();
+    }
+    /** Playback reached the end: announce it, tell the host and arm the loop restart. */
+    #ended() {
+        this.#host.announce(translate(this.locale, 'announce.finished'));
+        const loop = this.#loopDelay !== null;
+        // Armed first, so a `kgdiff-replay-end` listener can still cancel it (pause, loop off).
+        if (loop)
+            this.#restartAt = this.#deps.now() + (this.#loopDelay ?? 0);
+        this.#host.replayEnd(loop);
+    }
+    #loopAgain() {
+        this.#restartAt = Number.NaN;
+        if (this.autoFit)
+            void this.fit();
+        this.clock?.seek(0);
+        this.play();
+    }
     seek(t) {
         const clock = this.clock;
         if (!clock)
             return;
+        this.#restartAt = Number.NaN;
         clock.seek(t);
         this.#notify('replay');
         this.#follow();
@@ -1134,6 +1278,8 @@ export class ViewerController {
         if (!clock)
             return;
         clock.step(direction);
+        this.#restartAt = Number.NaN;
+        this.#resume = false;
         this.#followed = '';
         // Follow (and announce) the hunk that just completed: stops sit at window ends.
         const w = clock.timeline.windows[clock.position() - 1];
@@ -1245,6 +1391,9 @@ export class ViewerController {
 function isString(x) {
     return x !== undefined;
 }
+function sameInsets(a, b) {
+    return a.top === b.top && a.right === b.right && a.bottom === b.bottom && a.left === b.left;
+}
 /** Pad a small rect so a node is shown with its neighbourhood. */
 function padRect(r, min = 200, ratio = 1.4) {
     const w = Math.max(min, r.width * ratio);