@perspective-dev/viewer-charts 4.5.0 → 4.5.2

package/src/ts/interaction/zoom-router.ts

@@ -24,134 +24,11 @@ export interface ZoomTarget {
     controller: ZoomController;
     layout: PlotLayout;
 }
-export type ZoomTargetResolver = (mx: number, my: number) => ZoomTarget | null;
 
 /**
- * One set of wheel / pointer listeners on the GL canvas that dispatches
- * zoom + pan events to a {@link ZoomController} resolved from the
- * cursor position. Replaces `ZoomController.attach` so multiple
- * controllers (one per facet) can coexist on a single canvas.
- */
-export class ZoomRouter {
-    private _element: HTMLElement | null = null;
-    private _resolve: ZoomTargetResolver | null = null;
-    private _onUpdate: (() => void) | null = null;
-
-    private _pointerDown = false;
-    private _pointerTarget: ZoomTarget | null = null;
-    private _lastPointerX = 0;
-    private _lastPointerY = 0;
-
-    private _onWheel: ((e: WheelEvent) => void) | null = null;
-    private _onPointerDown: ((e: PointerEvent) => void) | null = null;
-    private _onPointerMove: ((e: PointerEvent) => void) | null = null;
-    private _onPointerUp: ((e: PointerEvent) => void) | null = null;
-
-    attach(
-        element: HTMLElement,
-        resolve: ZoomTargetResolver,
-        onUpdate: () => void,
-    ): void {
-        this.detach();
-        this._element = element;
-        this._resolve = resolve;
-        this._onUpdate = onUpdate;
-
-        this._onWheel = (e: WheelEvent) => {
-            const rect = element.getBoundingClientRect();
-            const mouseX = e.clientX - rect.left;
-            const mouseY = e.clientY - rect.top;
-            const target = resolve(mouseX, mouseY);
-            if (!target) {
-                return;
-            }
-
-            e.preventDefault();
-            applyWheel(target, mouseX, mouseY, e.deltaY);
-            onUpdate();
-        };
-
-        this._onPointerDown = (e: PointerEvent) => {
-            const rect = element.getBoundingClientRect();
-            const mouseX = e.clientX - rect.left;
-            const mouseY = e.clientY - rect.top;
-            const target = resolve(mouseX, mouseY);
-            if (!target) {
-                return;
-            }
-
-            this._pointerDown = true;
-            this._pointerTarget = target;
-            this._lastPointerX = e.clientX;
-            this._lastPointerY = e.clientY;
-            element.setPointerCapture(e.pointerId);
-        };
-
-        this._onPointerMove = (e: PointerEvent) => {
-            if (!this._pointerDown || !this._pointerTarget) {
-                return;
-            }
-
-            const dx = e.clientX - this._lastPointerX;
-            const dy = e.clientY - this._lastPointerY;
-            this._lastPointerX = e.clientX;
-            this._lastPointerY = e.clientY;
-            applyPan(this._pointerTarget, dx, dy);
-            onUpdate();
-        };
-
-        this._onPointerUp = () => {
-            this._pointerDown = false;
-            this._pointerTarget = null;
-        };
-
-        element.addEventListener("wheel", this._onWheel, { passive: false });
-        element.addEventListener("pointerdown", this._onPointerDown);
-        element.addEventListener("pointermove", this._onPointerMove);
-        element.addEventListener("pointerup", this._onPointerUp);
-    }
-
-    detach(): void {
-        if (this._element) {
-            if (this._onWheel) {
-                this._element.removeEventListener("wheel", this._onWheel);
-            }
-
-            if (this._onPointerDown) {
-                this._element.removeEventListener(
-                    "pointerdown",
-                    this._onPointerDown,
-                );
-            }
-
-            if (this._onPointerMove) {
-                this._element.removeEventListener(
-                    "pointermove",
-                    this._onPointerMove,
-                );
-            }
-
-            if (this._onPointerUp) {
-                this._element.removeEventListener(
-                    "pointerup",
-                    this._onPointerUp,
-                );
-            }
-        }
-
-        this._element = null;
-        this._resolve = null;
-        this._onUpdate = null;
-        this._pointerDown = false;
-        this._pointerTarget = null;
-    }
-}
-
-/**
- * Apply a wheel-zoom delta to the resolved target. Exported for
- * re-use inside the worker, where the renderer dispatches interaction
- * events forwarded from the host's `RawEventForwarder` instead of
- * receiving DOM events directly.
+ * Apply a wheel-zoom delta to the resolved target. The worker
+ * dispatches interaction events forwarded from the host's
+ * `RawEventForwarder` and calls this directly.
  */
 export function applyWheel(
     target: ZoomTarget,

package/src/ts/map/tile-layer.ts

@@ -18,6 +18,7 @@ import { TileLoader, tileKey } from "./tile-loader";
 import type { TileSource } from "./tile-source";
 import tileVert from "../shaders/tile.vert.glsl";
 import tileFrag from "../shaders/tile.frag.glsl";
+import { compileProgram } from "../webgl/program-cache";
 
 type GL = WebGL2RenderingContext | WebGLRenderingContext;
 
@@ -344,24 +345,23 @@ export class TileLayer {
         }
 
         const gl = glManager.gl;
-        const program = glManager.shaders.getOrCreate(
+        this._program = compileProgram<TileProgramCache>(
+            glManager,
             "map-tile",
             tileVert,
             tileFrag,
+            [
+                "u_projection",
+                "u_extent_min",
+                "u_extent_max",
+                "u_uv_min",
+                "u_uv_max",
+                "u_tile",
+                "u_alpha",
+            ],
+            ["a_corner"],
         );
 
-        this._program = {
-            program,
-            u_projection: gl.getUniformLocation(program, "u_projection"),
-            u_extent_min: gl.getUniformLocation(program, "u_extent_min"),
-            u_extent_max: gl.getUniformLocation(program, "u_extent_max"),
-            u_uv_min: gl.getUniformLocation(program, "u_uv_min"),
-            u_uv_max: gl.getUniformLocation(program, "u_uv_max"),
-            u_tile: gl.getUniformLocation(program, "u_tile"),
-            u_alpha: gl.getUniformLocation(program, "u_alpha"),
-            a_corner: gl.getAttribLocation(program, "a_corner"),
-        };
-
         const buf = gl.createBuffer();
         if (!buf) {
             return;

package/src/ts/plugin/plugin.ts

@@ -38,173 +38,85 @@ import { RENDER_BLIT_MODE } from "../config";
 const FACET_CONFIG_DEFAULTS: FacetConfig = { ...DEFAULT_FACET_CONFIG };
 
 /**
- * Build a UI control spec for one plugin-config field. Mirrors the
- * shape `column_config_schema` already returns (datagrid). Numeric
- * fields get a `Number` control with min/max clamps; fractions get a
- * 0..1 range; enums + booleans pass through their variant list.
+ * Static UI-control spec per `plugin_config` field. Mirrors the shape
+ * `column_config_schema` already returns (datagrid). The runtime default
+ * is sourced separately from the chart-type-effective defaults at
+ * `fieldSpec` call time so per-chart overrides like
+ * `include_zero=true` for Y Bar / Y Area / X Bar surface in the UI.
  */
+type FieldSpec =
+    | { kind: "Bool" }
+    | {
+          kind: "Enum";
+          variants: ReadonlyArray<{ value: string; label: string }>;
+      }
+    | { kind: "Number"; min: number; max: number; step?: number };
+
+const FIELD_SCHEMAS: Record<PluginConfigField, FieldSpec> = {
+    auto_alt_y_axis: { kind: "Bool" },
+    include_zero: { kind: "Bool" },
+    domain_mode: {
+        kind: "Enum",
+        variants: [
+            { value: "fit", label: "Fit" },
+            { value: "expand", label: "Expand" },
+        ],
+    },
+    facet_mode: {
+        kind: "Enum",
+        variants: [
+            { value: "grid", label: "Grid" },
+            { value: "overlay", label: "Overlay" },
+        ],
+    },
+    facet_zoom_mode: {
+        kind: "Enum",
+        variants: [
+            { value: "shared", label: "Shared" },
+            { value: "independent", label: "Independent" },
+        ],
+    },
+    series_zoom_mode: {
+        kind: "Enum",
+        variants: [
+            { value: "dynamic", label: "Dynamic" },
+            { value: "fixed", label: "Fixed" },
+        ],
+    },
+    line_width_px: { kind: "Number", min: 0.5, step: 0.5, max: 16 },
+    point_size_px: { kind: "Number", min: 1, max: 32 },
+    band_inner_frac: { kind: "Number", min: 0.1, max: 1, step: 0.01 },
+    bar_inner_pad: { kind: "Number", min: 0, max: 0.9, step: 0.01 },
+    wick_width_px: { kind: "Number", min: 0.5, step: 0.5, max: 8 },
+    ohlc_line_width_px: { kind: "Number", min: 0.5, step: 0.5, max: 8 },
+    gradient_radius_px: { kind: "Number", min: 2, step: 1, max: 256 },
+    gradient_intensity: { kind: "Number", min: 0.05, step: 0.05, max: 4 },
+    gradient_heat_max: { kind: "Number", min: 0.1, step: 0.1, max: 64 },
+    gradient_color_mode: {
+        kind: "Enum",
+        variants: [
+            { value: "mean", label: "Mean (density-weighted)" },
+            { value: "density", label: "Density only" },
+            { value: "extreme", label: "Extremes" },
+            { value: "signed", label: "Signed sum" },
+        ],
+    },
+    map_tile_provider: {
+        kind: "Enum",
+        variants: [
+            { value: "carto-positron", label: "Light (Positron)" },
+            { value: "carto-dark-matter", label: "Dark Matter" },
+            { value: "carto-voyager", label: "Voyager" },
+        ],
+    },
+    map_tile_alpha: { kind: "Number", min: 0, max: 1, step: 0.05 },
+};
+
 function fieldSpec(
     key: PluginConfigField,
     defaults: PluginConfig,
 ): Record<string, unknown> & { kind: string } {
-    switch (key) {
-        case "auto_alt_y_axis":
-            return { kind: "Bool", key, default: defaults.auto_alt_y_axis };
-        case "include_zero":
-            return { kind: "Bool", key, default: defaults.include_zero };
-        case "domain_mode":
-            return {
-                kind: "Enum",
-                key,
-                default: defaults.domain_mode,
-                variants: [
-                    { value: "fit", label: "Fit" },
-                    { value: "expand", label: "Expand" },
-                ],
-            };
-        case "facet_mode":
-            return {
-                kind: "Enum",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.facet_mode,
-                variants: [
-                    { value: "grid", label: "Grid" },
-                    { value: "overlay", label: "Overlay" },
-                ],
-            };
-        case "facet_zoom_mode":
-            return {
-                kind: "Enum",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.facet_zoom_mode,
-                variants: [
-                    { value: "shared", label: "Shared" },
-                    { value: "independent", label: "Independent" },
-                ],
-            };
-        case "series_zoom_mode":
-            return {
-                kind: "Enum",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.series_zoom_mode,
-                variants: [
-                    { value: "dynamic", label: "Dynamic" },
-                    { value: "fixed", label: "Fixed" },
-                ],
-            };
-        case "line_width_px":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.line_width_px,
-                min: 0.5,
-                step: 0.5,
-                max: 16,
-            };
-        case "point_size_px":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.point_size_px,
-                min: 1,
-                max: 32,
-            };
-        case "band_inner_frac":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.band_inner_frac,
-                min: 0.1,
-                max: 1,
-                step: 0.01,
-            };
-        case "bar_inner_pad":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.bar_inner_pad,
-                min: 0,
-                max: 0.9,
-                step: 0.01,
-            };
-        case "wick_width_px":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.wick_width_px,
-                min: 0.5,
-                step: 0.5,
-                max: 8,
-            };
-        case "ohlc_line_width_px":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.ohlc_line_width_px,
-                min: 0.5,
-                step: 0.5,
-                max: 8,
-            };
-        case "gradient_radius_px":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.gradient_radius_px,
-                min: 2,
-                step: 1,
-                max: 256,
-            };
-        case "gradient_intensity":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.gradient_intensity,
-                min: 0.05,
-                step: 0.05,
-                max: 4,
-            };
-        case "gradient_heat_max":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.gradient_heat_max,
-                min: 0.1,
-                step: 0.1,
-                max: 64,
-            };
-        case "gradient_color_mode":
-            return {
-                kind: "Enum",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.gradient_color_mode,
-                variants: [
-                    { value: "mean", label: "Mean (density-weighted)" },
-                    { value: "density", label: "Density only" },
-                    { value: "extreme", label: "Extremes" },
-                    { value: "signed", label: "Signed sum" },
-                ],
-            };
-        case "map_tile_provider":
-            return {
-                kind: "Enum",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.map_tile_provider,
-                variants: [
-                    { value: "carto-positron", label: "Light (Positron)" },
-                    { value: "carto-dark-matter", label: "Dark Matter" },
-                    { value: "carto-voyager", label: "Voyager" },
-                ],
-            };
-        case "map_tile_alpha":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.map_tile_alpha,
-                min: 0,
-                max: 1,
-                step: 0.05,
-            };
-    }
+    return { ...FIELD_SCHEMAS[key], key, default: defaults[key] };
 }
 
 const GLOBAL_STYLES = (() => {
@@ -213,6 +125,22 @@ const GLOBAL_STYLES = (() => {
     return [sheet];
 })();
 
+/**
+ * Process-global GL presentation strategy, shared by *every* chart-type
+ * plugin in this renderer. Seeded from the build-time {@link RENDER_BLIT_MODE}
+ * and overridable at runtime via
+ * {@link HTMLPerspectiveViewerWebGLPluginElement.setBlitMode}.
+ *
+ * Module scope (not per-instance) on purpose: blit-vs-direct is a
+ * whole-renderer decision — in `"blit"` mode the worker shares a pool of
+ * GL contexts across all charts ([webgl/context-pool.ts]), so a page
+ * can't sensibly mix strategies per chart. Every per-chart-type subclass
+ * registered in [index.ts] reads this one value when it builds its
+ * renderer, so setting it once (before the first chart renders) applies
+ * to all of them.
+ */
+let BLIT_MODE: "direct" | "blit" = RENDER_BLIT_MODE;
+
 export class HTMLPerspectiveViewerWebGLPluginElement
     extends HTMLElement
     implements IPerspectiveViewerPlugin
@@ -227,7 +155,6 @@ export class HTMLPerspectiveViewerWebGLPluginElement
     private _rendererPromise: Promise<RendererTransport> | null = null;
     private _rawEventForwarder: RawEventForwarder | null = null;
     private _generation = 0;
-    private _renderBlitMode: "direct" | "blit" = RENDER_BLIT_MODE;
     private _resetClickAbort: AbortController | null = null;
 
     /**
@@ -345,13 +272,41 @@ export class HTMLPerspectiveViewerWebGLPluginElement
             return this._rendererPromise;
         }
 
-        this._rendererPromise = this._buildRenderer(view).then((r) => {
-            this._renderer = r;
-            this._setupInteraction(r);
-            return r;
-        });
+        // `_buildRenderer` is async — it awaits `getClient`, `getTable`,
+        // and a full worker handshake — so a `disconnectedCallback`
+        // (toggle / chart-type switch) frequently lands *before* this
+        // `.then` runs. At that point `this._renderer` is still null,
+        // so `delete()`'s `if (this._renderer)` teardown is skipped and
+        // the freshly-built transport (and its WebGL context) would be
+        // assigned to a detached element and leak — one context per
+        // raced toggle, until the browser evicts the oldest.
+        //
+        // `delete()` sets `_rendererPromise = null`, so promise identity
+        // is the dispose signal: if `this._rendererPromise` no longer
+        // points at *this* build when it resolves, the element was
+        // deleted (or a reconnect started a newer build) and we destroy
+        // the orphan instead of adopting it. Promise identity — not
+        // `_generation`, which every `draw`/`update` bumps — is the
+        // right token: a rapid draw→update must NOT tear down the
+        // single in-flight build it shares via this memoized promise.
+        const p: Promise<RendererTransport> = this._buildRenderer(view).then(
+            (r) => {
+                if (this._rendererPromise !== p) {
+                    r.destroy();
+                    throw new Error("renderer disposed during init");
+                }
+
+                this._renderer = r;
+                this._setupInteraction(r);
+                return r;
+            },
+        );
 
-        return this._rendererPromise;
+        // Swallow the dispose rejection so it doesn't surface as an
+        // unhandled rejection; `_drawImpl` catches it and bails.
+        p.catch(() => {});
+        this._rendererPromise = p;
+        return p;
     }
 
     /**
@@ -438,15 +393,28 @@ export class HTMLPerspectiveViewerWebGLPluginElement
             },
             pluginConfig: this._pluginConfig,
             defaultChartType: this._chartType.default_chart_type,
-            renderBlitMode: this._renderBlitMode,
+            renderBlitMode: BLIT_MODE,
         });
 
         return transport;
     }
 
-    setBlitMode(mode: "direct" | "blit") {
-        console.assert(this._initialized, "Already initialized");
-        this._renderBlitMode = mode;
+    /**
+     * Select the GL presentation strategy for *all* chart-type plugins
+     * in this renderer. Static + process-global: the value is shared by
+     * every per-chart-type subclass, so it must be set once before the
+     * charts that should use it build their renderers (a renderer reads
+     * {@link BLIT_MODE} at construction in `_buildRenderer`; charts
+     * already built keep their mode until torn down and rebuilt).
+     *
+     * - `"direct"` — each chart owns a GL context 1:1 with its visible
+     *   canvas (lowest latency; bounded by the browser's ~16-context
+     *   cap).
+     * - `"blit"` — charts render off-screen and share a pool of GL
+     *   contexts ([webgl/context-pool.ts]), so a page can exceed the cap.
+     */
+    static setBlitMode(mode: "direct" | "blit") {
+        BLIT_MODE = mode;
     }
 
     get_static_config(): PluginStaticConfig {
@@ -519,6 +487,32 @@ export class HTMLPerspectiveViewerWebGLPluginElement
                     default: false,
                 });
             }
+
+            // Line / area glyphs can bridge interior nulls by linear
+            // interpolation. Bar / scatter ignore the flag.
+            const supports_interpolate =
+                effective_chart_type === "line" ||
+                effective_chart_type === "area";
+
+            if (supports_interpolate) {
+                const variants =
+                    effective_chart_type === "area"
+                        ? [
+                              { value: "skip", label: "Skip" },
+                              { value: "solid", label: "Solid" },
+                          ]
+                        : [
+                              { value: "skip", label: "Skip" },
+                              { value: "solid", label: "Solid" },
+                              { value: "transparent", label: "Transparent" },
+                          ];
+                fields.push({
+                    kind: "Enum",
+                    key: "interpolate",
+                    default: "solid",
+                    variants,
+                });
+            }
         }
 
         // Per-column formatter widgets. Surfaced for every chart type so
@@ -561,7 +555,15 @@ export class HTMLPerspectiveViewerWebGLPluginElement
 
     private async _drawImpl(view: View): Promise<void> {
         const gen = ++this._generation;
-        const renderer = await this._ensureRenderer(view);
+        let renderer: RendererTransport;
+        try {
+            renderer = await this._ensureRenderer(view);
+        } catch {
+            // Renderer was disposed mid-init (element disconnected
+            // during the async build) — nothing to draw.
+            return;
+        }
+
         if (this._generation !== gen) {
             return;
         }
@@ -599,28 +601,6 @@ export class HTMLPerspectiveViewerWebGLPluginElement
         return 5;
     }
 
-    save() {
-        const state: any = {};
-        const zoom = this._renderer?.saveZoom();
-        if (zoom) {
-            state.zoom = zoom;
-        }
-
-        // Only emit the keys this chart actually consumes.
-        const cfg: Partial<PluginConfig> = {};
-        for (const key of this._chartType.applicable_plugin_fields) {
-            // `key` is `PluginConfigField` = `keyof PluginConfig`, so this
-            // indexed assignment is type-safe without a cast.
-            (cfg[key] as PluginConfig[typeof key]) = this._pluginConfig[key];
-        }
-
-        if (Object.keys(cfg).length > 0) {
-            state.plugin_config = cfg;
-        }
-
-        return state;
-    }
-
     async render(view: View): Promise<Blob> {
         await this._ensureRenderer(view);
         await this.draw(view);