@perspective-dev/viewer-charts 4.5.1 → 5.0.0

package/src/ts/transport/renderer-transport.ts

@@ -84,7 +84,11 @@ interface RendererHandle {
     terminate(): void;
 }
 
-type PendingRenderType = "saveZoom" | "loadAndRender" | "snapshotPng";
+type PendingRenderType =
+    | "saveZoom"
+    | "loadAndRender"
+    | "snapshotPng"
+    | "resize";
 interface PendingRenderRequest {
     kind: PendingRenderType;
     resolve: (v: any) => void;
@@ -110,11 +114,22 @@ interface PendingRenderRequest {
  */
 export class RendererTransport {
     private _handle: RendererHandle | null = null;
+
+    /**
+     * Set by {@link destroy}. Requests allocated after teardown settle
+     * immediately in `_allocPending` — `_post` is already a no-op once
+     * `_handle` is null, so a late request would otherwise never
+     * receive its reply and pend forever.
+     */
+    private _destroyed = false;
     private _proxyChannel: MessageChannel | null = null;
     private _proxySession: any = null;
     private _client: Client;
     private _view: View;
     private _tableName: string | undefined;
+    /** Source panel `slot`, tagged onto dispatched interaction events so the
+     * host can route them (master/detail, global filter) to the right panel. */
+    private _panel: string | undefined;
     private _clientWorkerURL: URL;
     private _clientWasm: WebAssembly.Module;
     private _chartTag: string;
@@ -158,6 +173,37 @@ export class RendererTransport {
      */
     private _displayCtx: CanvasRenderingContext2D | null = null;
 
+    /**
+     * Present-hold state for the staged-present presize protocol
+     * ({@link presize}). While holding, inbound `frameBitmap`s are
+     * STAGED (latest wins) instead of blitted, so the on-screen frame
+     * — old dimensions in the old, unchanged box — stays put until the
+     * host invokes the present closure `presize` resolved to, in the
+     * same task as its layout commit. Entered only by `presize`;
+     * exited by the present closure, by `presize`'s rejection path, or
+     * by `destroy` — every settle path releases the hold or hands the
+     * caller the release.
+     */
+    /**
+     * The last `(cssWidth, cssHeight, dpr)` posted to the worker — at init
+     * or any resize — i.e. the dimensions the worker has already rendered
+     * (or has an in-flight render for). {@link resize} short-circuits when
+     * its measurement matches (±0.5px, the presize protocol's own
+     * threshold): reactive resizes fan in from several host paths per
+     * layout transition (the post-commit fan-out, activation nudges, the
+     * fresh-restore tail), and every worker resize is an unconditional
+     * full re-render.
+     */
+    private _lastPostedSize: {
+        cssWidth: number;
+        cssHeight: number;
+        dpr: number;
+    } | null = null;
+
+    private _holdPresent = false;
+
+    private _stagedFrame: ImageBitmap | null = null;
+
     /**
      * Host-side sink for tooltip + cursor side-effects. The chart
      * inside the renderer calls into a `MessageHostSink` that posts
@@ -182,6 +228,7 @@ export class RendererTransport {
         client: Client;
         view: View;
         tableName?: string;
+        panel?: string;
         clientWasm: WebAssembly.Module;
         clientWorkerURL: URL;
         chartTag: string;
@@ -192,6 +239,7 @@ export class RendererTransport {
         this._client = opts.client;
         this._view = opts.view;
         this._tableName = opts.tableName;
+        this._panel = opts.panel;
         this._clientWorkerURL = opts.clientWorkerURL;
         this._clientWasm = opts.clientWasm;
         this._chartTag = opts.chartTag;
@@ -301,6 +349,11 @@ export class RendererTransport {
             precompileShaders: this._precompileShaders,
         };
 
+        this._lastPostedSize = {
+            cssWidth: rect.width,
+            cssHeight: rect.height,
+            dpr,
+        };
         this._handle = await this._createHandle(workerURL, initMsg);
         this._handle.addMessageListener((msg) =>
             this._handleRendererMsg(msg as WorkerMsg),
@@ -438,7 +491,8 @@ export class RendererTransport {
      * `loadAndRenderAck`. Per the worker's "resolve on stale"
      * contract, a mid-flight cancellation (a newer `loadAndRender`
      * superseding this one) still acks — the host's awaiter just
-     * resolves quietly.
+     * resolves quietly. Calls issued after `destroy()` resolve
+     * immediately (see `_allocPending`).
      */
     loadAndRender(opts: {
         viewerConfig: {
@@ -464,19 +518,96 @@ export class RendererTransport {
         this._post({ kind: "redraw" });
     }
 
-    resize(): void {
+    /**
+     * Silently clear the worker chart's selection state (pinned tooltip) —
+     * no selection events are emitted; the worker echoes `dismissTooltip`
+     * to drop the host-side pinned artifact. See `DeselectMsg`.
+     */
+    deselect(): void {
+        this._post({ kind: "deselect" });
+    }
+
+    /**
+     * Resize the chart to the GL canvas's CURRENT CSS box and resolve
+     * once the resized frame has PRESENTED (the worker's `resizeAck`) —
+     * not at message-post, which would let callers proceed while the
+     * old-dimensions bitmap is still on screen. Reactive geometry
+     * changes only; anticipated ones go through {@link presize}.
+     *
+     * A measurement matching {@link _lastPostedSize} resolves immediately
+     * WITHOUT a worker round trip: the worker has already rendered (or is
+     * presenting) that exact frame, and re-posting would be a full
+     * re-render of an identical bitmap.
+     */
+    resize(): Promise<void> {
         if (!this._hostGlCanvas) {
-            return;
+            return Promise.resolve();
         }
 
         const rect = this._hostGlCanvas.getBoundingClientRect();
         const dpr = window.devicePixelRatio || 1;
+        const last = this._lastPostedSize;
+        if (
+            last &&
+            Math.abs(last.cssWidth - rect.width) <= 0.5 &&
+            Math.abs(last.cssHeight - rect.height) <= 0.5 &&
+            last.dpr === dpr
+        ) {
+            return Promise.resolve();
+        }
+
+        return this._postResize(rect.width, rect.height);
+    }
+
+    /**
+     * Staged-present variant of {@link resize}: render at the given
+     * TARGET canvas CSS box (no measurement — the caller supplies the
+     * box the pending layout commit will produce), HOLDING the
+     * resulting frame (and any others that arrive meanwhile) offscreen
+     * instead of blitting, so nothing on screen changes. Resolves,
+     * once the resized frame is staged, to a present closure: calling
+     * it blits the latest staged frame and exits the hold — the host
+     * runs it in the same task as its layout commit so geometry and
+     * pixels land in one paint. On rejection (teardown) the hold is
+     * released here, so every settle path either frees the display or
+     * hands the caller the release.
+     */
+    presize(cssWidth: number, cssHeight: number): Promise<(() => void) | void> {
+        if (!this._hostGlCanvas) {
+            return Promise.resolve();
+        }
+
+        this._holdPresent = true;
+        return this._postResize(cssWidth, cssHeight).then(
+            () => () => this._presentStaged(),
+            (err) => {
+                this._presentStaged();
+                throw err;
+            },
+        );
+    }
+
+    private _postResize(cssWidth: number, cssHeight: number): Promise<void> {
+        const dpr = window.devicePixelRatio || 1;
+        const { id, promise } = this._allocPending<void>("resize");
+        this._lastPostedSize = { cssWidth, cssHeight, dpr };
         this._post({
             kind: "resize",
-            cssWidth: rect.width,
-            cssHeight: rect.height,
+            msgId: id,
+            cssWidth,
+            cssHeight,
             dpr,
         });
+        return promise;
+    }
+
+    private _presentStaged(): void {
+        this._holdPresent = false;
+        const staged = this._stagedFrame;
+        this._stagedFrame = null;
+        if (staged) {
+            this._drawFrameBitmap(staged);
+        }
     }
 
     clear() {
@@ -501,12 +632,39 @@ export class RendererTransport {
      * Allocate a pending request slot of the given `kind`. Returns the
      * id (encoded into the outgoing `ControlMsg`) and a promise that
      * resolves / rejects when the matching reply arrives or
-     * `destroy()` drains the table.
+     * `destroy()` drains the table. Requests issued *after* `destroy()`
+     * settle immediately with the same per-kind semantics as the drain.
      */
     private _allocPending<T>(kind: PendingRenderType): {
         id: number;
         promise: Promise<T>;
     } {
+        // A request issued after `destroy()` would never settle: `_post`
+        // no-ops with no handle, so no reply ever lands — and the host
+        // awaits `loadAndRender` while holding its per-renderer draw
+        // lock, so a pending-forever promise wedges that panel's lock
+        // permanently. (Reachable when an external DOM disconnect
+        // `delete()`s the element mid-draw; the host's own teardown
+        // paths are serialized behind the same lock.) Mirror the
+        // `destroy()` drain: `loadAndRender` resolves silently,
+        // reply-bearing kinds reject. The pre-attached no-op `catch`
+        // marks the rejection handled for fire-and-forget callers
+        // (`saveZoom`) without affecting real awaiters.
+        if (this._destroyed) {
+            if (kind === "loadAndRender") {
+                return {
+                    id: -1,
+                    promise: Promise.resolve(undefined as unknown as T),
+                };
+            }
+
+            const promise = Promise.reject<T>(
+                new Error("RendererTransport destroyed"),
+            );
+            promise.catch(() => {});
+            return { id: -1, promise };
+        }
+
         const id = ++this._pendingCounter;
         const promise = new Promise<T>((resolve, reject) => {
             this._pending.set(id, { kind, resolve, reject });
@@ -548,6 +706,7 @@ export class RendererTransport {
     }
 
     destroy(): void {
+        this._destroyed = true;
         this._post({ kind: "destroy" });
         if (this._proxySession) {
             this._proxySession.close().catch(() => {});
@@ -572,6 +731,9 @@ export class RendererTransport {
         // them, and so the GPU-backed 2D context can release earlier.
         this._hostGlCanvas = null;
         this._displayCtx = null;
+        this._holdPresent = false;
+        this._stagedFrame?.close();
+        this._stagedFrame = null;
 
         // Drain pending request promises with kind-aware semantics:
         //  - `loadAndRender` resolves silently (the host's awaited draw
@@ -633,7 +795,9 @@ export class RendererTransport {
                         {
                             bubbles: true,
                             composed: true,
-                            detail: msg.detail,
+                            // Tag with the source panel so a multi-panel host
+                            // can attribute the click to the right panel.
+                            detail: { ...msg.detail, panel: this._panel },
                         },
                     ),
                 );
@@ -658,6 +822,9 @@ export class RendererTransport {
                     removeConfigs as any,
                     insertConfigs as any,
                 );
+                // Tag with the source panel so the host's master/detail +
+                // global-filter routing can identify the originating panel.
+                detail.panel = this._panel;
                 this._dispatchOnViewer(
                     new CustomEvent<PerspectiveSelectDetail>(
                         "perspective-global-filter",
@@ -672,7 +839,13 @@ export class RendererTransport {
             }
 
             case "frameBitmap":
-                this._drawFrameBitmap(msg.bitmap);
+                if (this._holdPresent) {
+                    this._stagedFrame?.close();
+                    this._stagedFrame = msg.bitmap;
+                } else {
+                    this._drawFrameBitmap(msg.bitmap);
+                }
+
                 break;
             case "error":
                 this._rejectReady(new Error(msg.message));
@@ -680,6 +853,9 @@ export class RendererTransport {
             case "loadAndRenderAck":
                 this._resolvePending(msg.msgId, "loadAndRender", undefined);
                 break;
+            case "resizeAck":
+                this._resolvePending(msg.msgId, "resize", undefined);
+                break;
             case "snapshotPngReply":
                 this._resolvePending(msg.requestId, "snapshotPng", msg.blob);
                 break;