@oh-just-another/renderer-canvas 0.57.0

package/dist/recording-target.js

@@ -0,0 +1,260 @@
+/**
+ * `drawImage` is NOT serialisable through this command stream — image
+ * sources (HTMLImageElement, ImageBitmap, HTMLCanvasElement) either
+ * can't cross the postMessage boundary cleanly or require expensive
+ * transfers. The recording target silently skips `drawImage` calls and
+ * counts them in `skippedImageDraws` so the host UI can warn (or fall
+ * back to main-thread compositing for image-heavy scenes).
+ *
+ * `measureText` returns a synchronous heuristic — the worker has the
+ * authoritative measurement, but routing per-call is too chatty. Hosts
+ * that care about pixel-perfect text in offscreen mode should
+ * pre-measure on a sidecar text shaper.
+ */
+export class RecordingTarget {
+    commands = [];
+    _width;
+    _height;
+    /** Counter so hosts can warn when images are silently skipped. */
+    skippedImageDraws = 0;
+    constructor(width, height) {
+        this._width = width;
+        this._height = height;
+    }
+    get size() {
+        return { width: this._width, height: this._height };
+    }
+    resize(width, height) {
+        this._width = width;
+        this._height = height;
+        this.commands.push({ k: "resize", w: width, h: height });
+    }
+    /** Pop the buffered commands and clear the internal log. */
+    flush() {
+        const out = this.commands;
+        this.commands = [];
+        return out;
+    }
+    /** Snapshot of the buffered commands without clearing. */
+    peek() {
+        return this.commands;
+    }
+    setFill(color) {
+        this.commands.push({ k: "setFill", color });
+    }
+    setStroke(color) {
+        this.commands.push({ k: "setStroke", color });
+    }
+    setStrokeWidth(w) {
+        this.commands.push({ k: "setStrokeWidth", w });
+    }
+    setOpacity(a) {
+        this.commands.push({ k: "setOpacity", a });
+    }
+    setLineCap(cap) {
+        this.commands.push({ k: "setLineCap", cap });
+    }
+    setLineJoin(join) {
+        this.commands.push({ k: "setLineJoin", join });
+    }
+    setDashArray(dash) {
+        this.commands.push({ k: "setDashArray", dash });
+    }
+    setFont(family, size, options) {
+        this.commands.push({ k: "setFont", family, size, ...(options ? { options } : {}) });
+    }
+    setTextAlign(align) {
+        this.commands.push({ k: "setTextAlign", align });
+    }
+    setTextBaseline(baseline) {
+        this.commands.push({ k: "setTextBaseline", baseline });
+    }
+    save() {
+        this.commands.push({ k: "save" });
+    }
+    restore() {
+        this.commands.push({ k: "restore" });
+    }
+    translate(x, y) {
+        this.commands.push({ k: "translate", x, y });
+    }
+    rotate(r) {
+        this.commands.push({ k: "rotate", r });
+    }
+    scale(sx, sy) {
+        this.commands.push({ k: "scale", sx, sy });
+    }
+    setTransform(t) {
+        this.commands.push({ k: "setTransform", t });
+    }
+    resetTransform() {
+        this.commands.push({ k: "resetTransform" });
+    }
+    beginPath() {
+        this.commands.push({ k: "beginPath" });
+    }
+    closePath() {
+        this.commands.push({ k: "closePath" });
+    }
+    moveTo(x, y) {
+        this.commands.push({ k: "moveTo", x, y });
+    }
+    lineTo(x, y) {
+        this.commands.push({ k: "lineTo", x, y });
+    }
+    quadraticCurveTo(cx, cy, x, y) {
+        this.commands.push({ k: "quadraticCurveTo", cx, cy, x, y });
+    }
+    bezierCurveTo(c1x, c1y, c2x, c2y, x, y) {
+        this.commands.push({ k: "bezierCurveTo", c1x, c1y, c2x, c2y, x, y });
+    }
+    rect(x, y, w, h) {
+        this.commands.push({ k: "rect", x, y, w, h });
+    }
+    ellipse(cx, cy, rx, ry) {
+        this.commands.push({ k: "ellipse", cx, cy, rx, ry });
+    }
+    fill(rule) {
+        this.commands.push(rule !== undefined ? { k: "fill", rule } : { k: "fill" });
+    }
+    stroke() {
+        this.commands.push({ k: "stroke" });
+    }
+    fillText(text, x, y, maxWidth) {
+        this.commands.push(maxWidth !== undefined
+            ? { k: "fillText", text, x, y, maxWidth }
+            : { k: "fillText", text, x, y });
+    }
+    measureText(text) {
+        // Heuristic — same factor as @text-wasm's fallback so layout stays
+        // roughly proportional. The Editor's text rendering path re-measures
+        // on the real Canvas2D in the main thread when it needs precise
+        // widths (label wrapping, hit-test).
+        return { width: text.length * 8 };
+    }
+    drawImage(_image, _dx, _dy, _dw, _dh) {
+        this.skippedImageDraws++;
+    }
+    clear(bounds) {
+        this.commands.push(bounds !== undefined ? { k: "clear", bounds } : { k: "clear" });
+    }
+    markDirty(bounds) {
+        this.commands.push({ k: "markDirty", bounds });
+    }
+}
+/**
+ * Replay a previously-flushed command buffer onto a real RenderTarget.
+ * Used by the worker entry point to apply commands shipped from the
+ * main thread.
+ */
+export const replayCommands = (target, commands) => {
+    for (const cmd of commands) {
+        switch (cmd.k) {
+            case "setFill":
+                target.setFill(cmd.color);
+                break;
+            case "setStroke":
+                target.setStroke(cmd.color);
+                break;
+            case "setStrokeWidth":
+                target.setStrokeWidth(cmd.w);
+                break;
+            case "setOpacity":
+                target.setOpacity(cmd.a);
+                break;
+            case "setLineCap":
+                target.setLineCap(cmd.cap);
+                break;
+            case "setLineJoin":
+                target.setLineJoin(cmd.join);
+                break;
+            case "setDashArray":
+                target.setDashArray(cmd.dash);
+                break;
+            case "setFont":
+                target.setFont(cmd.family, cmd.size, cmd.options);
+                break;
+            case "setTextAlign":
+                target.setTextAlign(cmd.align);
+                break;
+            case "setTextBaseline":
+                target.setTextBaseline(cmd.baseline);
+                break;
+            case "save":
+                target.save();
+                break;
+            case "restore":
+                target.restore();
+                break;
+            case "translate":
+                target.translate(cmd.x, cmd.y);
+                break;
+            case "rotate":
+                target.rotate(cmd.r);
+                break;
+            case "scale":
+                target.scale(cmd.sx, cmd.sy);
+                break;
+            case "setTransform":
+                target.setTransform(cmd.t);
+                break;
+            case "resetTransform":
+                target.resetTransform();
+                break;
+            case "beginPath":
+                target.beginPath();
+                break;
+            case "closePath":
+                target.closePath();
+                break;
+            case "moveTo":
+                target.moveTo(cmd.x, cmd.y);
+                break;
+            case "lineTo":
+                target.lineTo(cmd.x, cmd.y);
+                break;
+            case "quadraticCurveTo":
+                target.quadraticCurveTo(cmd.cx, cmd.cy, cmd.x, cmd.y);
+                break;
+            case "bezierCurveTo":
+                target.bezierCurveTo(cmd.c1x, cmd.c1y, cmd.c2x, cmd.c2y, cmd.x, cmd.y);
+                break;
+            case "rect":
+                target.rect(cmd.x, cmd.y, cmd.w, cmd.h);
+                break;
+            case "ellipse":
+                target.ellipse(cmd.cx, cmd.cy, cmd.rx, cmd.ry);
+                break;
+            case "fill":
+                if (cmd.rule !== undefined)
+                    target.fill(cmd.rule);
+                else
+                    target.fill();
+                break;
+            case "stroke":
+                target.stroke();
+                break;
+            case "fillText":
+                if (cmd.maxWidth !== undefined)
+                    target.fillText(cmd.text, cmd.x, cmd.y, cmd.maxWidth);
+                else
+                    target.fillText(cmd.text, cmd.x, cmd.y);
+                break;
+            case "clear":
+                if (cmd.bounds !== undefined)
+                    target.clear(cmd.bounds);
+                else
+                    target.clear();
+                break;
+            case "markDirty":
+                target.markDirty?.(cmd.bounds);
+                break;
+            case "resize":
+                // No-op for replay — the worker owns the canvas size and
+                // resizes via its own `resize` message, not via the command
+                // stream.
+                break;
+        }
+    }
+};
+//# sourceMappingURL=recording-target.js.map

package/dist/recording-target.js.map

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

package/dist/render-worker.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=render-worker.d.ts.map

package/dist/render-worker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-worker.d.ts","sourceRoot":"","sources":["../src/render-worker.ts"],"names":[],"mappings":""}

package/dist/render-worker.js

@@ -0,0 +1,112 @@
+/// <reference lib="webworker" />
+import { installBuiltinRenderers, renderScene } from "@oh-just-another/renderer-core";
+import { Canvas2DTarget } from "./canvas-target.js";
+import { replayCommands } from "./recording-target.js";
+const state = { canvas: null, target: null, dpr: 1 };
+let renderersInstalled = false;
+const ensureRenderers = () => {
+    if (renderersInstalled)
+        return;
+    installBuiltinRenderers();
+    renderersInstalled = true;
+};
+const post = (msg, transfer) => {
+    if (transfer && transfer.length > 0) {
+        self.postMessage(msg, transfer);
+    }
+    else {
+        self.postMessage(msg);
+    }
+};
+const init = (canvas, width, height, dpr) => {
+    state.canvas = canvas;
+    state.dpr = dpr;
+    // Resize the bitmap to dpr-scaled pixels — the host's CSS size is
+    // (width, height); render into the bigger buffer and let the
+    // composite step downsample as needed.
+    canvas.width = Math.max(1, Math.round(width * dpr));
+    canvas.height = Math.max(1, Math.round(height * dpr));
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+        throw new Error("OffscreenCanvas 2D context unavailable");
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    state.target = new Canvas2DTarget(ctx, width, height, dpr);
+    post({ type: "ready" });
+};
+const resize = (width, height) => {
+    if (!state.canvas || !state.target)
+        return;
+    state.canvas.width = Math.max(1, Math.round(width * state.dpr));
+    state.canvas.height = Math.max(1, Math.round(height * state.dpr));
+    const ctx = state.canvas.getContext("2d");
+    if (!ctx)
+        return;
+    ctx.setTransform(state.dpr, 0, 0, state.dpr, 0, 0);
+    state.target.resize(width, height, state.dpr);
+};
+const snapshot = (scene) => {
+    if (!state.canvas || !state.target) {
+        post({ type: "error", message: "Worker not initialised" });
+        return;
+    }
+    ensureRenderers();
+    const ctx = state.canvas.getContext("2d");
+    if (ctx === null) {
+        post({ type: "error", message: "Worker not initialised" });
+        return;
+    }
+    ctx.save();
+    ctx.setTransform(state.dpr, 0, 0, state.dpr, 0, 0);
+    ctx.clearRect(0, 0, state.target.size.width, state.target.size.height);
+    renderScene(scene, state.target);
+    ctx.restore();
+    const bitmap = state.canvas.transferToImageBitmap();
+    post({ type: "frame-done", bitmap }, [bitmap]);
+};
+/**
+ * Replay a serialised RecordingTarget command stream onto the owned
+ * OffscreenCanvas. Used by the LayeredSurface "offscreen" backend: the
+ * main thread captures every RenderTarget call into a buffer and ships
+ * it here per frame; the worker replays.
+ */
+const replay = (commands) => {
+    if (!state.target) {
+        post({ type: "error", message: "Worker not initialised" });
+        return;
+    }
+    replayCommands(state.target, commands);
+};
+self.addEventListener("message", (ev) => {
+    const msg = ev.data;
+    try {
+        switch (msg.type) {
+            case "init":
+                init(msg.canvas, msg.width, msg.height, msg.dpr);
+                break;
+            case "resize":
+                resize(msg.width, msg.height);
+                break;
+            case "snapshot":
+                // A dpr update only takes effect on the next resize; snapshot
+                // honours whatever transform init established.
+                snapshot(msg.scene);
+                break;
+            case "replay":
+                replay(msg.commands);
+                break;
+            case "frame":
+                // Patch-stream frames are not implemented; the protocol is
+                // reserved. Reply with an error so callers don't hang on the
+                // awaited response.
+                post({ type: "error", message: "patch-stream frames not implemented" });
+                break;
+        }
+    }
+    catch (err) {
+        post({
+            type: "error",
+            message: err instanceof Error ? err.message : String(err),
+        });
+    }
+});
+//# sourceMappingURL=render-worker.js.map

package/dist/render-worker.js.map

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

package/dist/tile-compositor.d.ts

@@ -0,0 +1,44 @@
+import { type TileCache } from "@oh-just-another/renderer-core";
+import type { Bounds, ElementId } from "@oh-just-another/types";
+import { type Scene } from "@oh-just-another/scene";
+import type { Canvas2DTarget } from "./canvas-target.js";
+/**
+ * Main-thread Canvas2D tile compositor.
+ *
+ * Splits the visible viewport into a fixed-size world-space grid
+ * (`TILE_SIZE` per side; default 2048 world units). Each tile is
+ * rasterised once into its own OffscreenCanvas, stored in a
+ * `TileCache`, and composited onto the main canvas via `drawImage`.
+ * Pure pan re-composites from cache; zoom changes the bucket and may
+ * invalidate.
+ *
+ * Designed for very large scenes where the per-frame `renderScene`
+ * walks every visible shape — composite of N cached bitmaps is far
+ * cheaper than re-rasterising N shapes.
+ */
+export interface ChangedElementRecord {
+    /** World bbox of the shape in the previous frame, or null if it was just added. */
+    readonly before: Bounds | null;
+    /** World bbox of the shape in the current frame, or null if it was just removed. */
+    readonly after: Bounds | null;
+}
+export interface RenderViaTilesOptions {
+    /** World-space rect currently visible. Tiles outside are skipped. */
+    readonly viewport: Bounds;
+    /** Persistent tile cache — same instance across frames. */
+    readonly cache: TileCache<OffscreenCanvas>;
+    /**
+     * Element ids whose scene-reference changed since the previous frame,
+     * each with the before/after world bbox. The compositor routes
+     * invalidation by case:
+     *   • removed   (after null)  → invalidateForElement (id present in
+     *     reverse index)
+     *   • added     (before null) → invalidateRect (no id yet)
+     *   • mutated/moved (both)    → both rects
+     */
+    readonly changedElements?: ReadonlyMap<ElementId, ChangedElementRecord>;
+    /** Current zoom (used to pick the cache bucket). */
+    readonly zoomBucket: number;
+}
+export declare const renderViaTiles: (scene: Scene, mainTarget: Canvas2DTarget, options: RenderViaTilesOptions) => void;
+//# sourceMappingURL=tile-compositor.d.ts.map

package/dist/tile-compositor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-compositor.d.ts","sourceRoot":"","sources":["../src/tile-compositor.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAGf,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAIL,KAAK,KAAK,EAEX,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGzD;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,oBAAoB;IACnC,mFAAmF;IACnF,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,oFAAoF;IACpF,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAqB;IACpC,qEAAqE;IACrE,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C;;;;;;;;OAQG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAC;IACxE,oDAAoD;IACpD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,EACZ,YAAY,cAAc,EAC1B,SAAS,qBAAqB,KAC7B,IA0CF,CAAC"}

package/dist/tile-compositor.js

@@ -0,0 +1,110 @@
+import { TILE_SIZE, } from "@oh-just-another/renderer-core";
+import { getElementsInLayer, getElementWorldBounds, getLayersInOrder, } from "@oh-just-another/scene";
+import { createOffscreenCanvas2DTarget } from "./offscreen.js";
+import { getElementRenderer } from "@oh-just-another/renderer-core";
+export const renderViaTiles = (scene, mainTarget, options) => {
+    const { viewport, cache, changedElements, zoomBucket } = options;
+    // 1) Invalidate cached tiles per patch (covers add / remove / move).
+    if (changedElements) {
+        for (const [id, record] of changedElements) {
+            cache.invalidateForPatch({
+                ...(record.after === null ? { removedElementId: id } : {}),
+                ...(record.before ? { beforeBounds: record.before } : {}),
+                ...(record.after ? { afterBounds: record.after } : {}),
+            });
+        }
+    }
+    // 2) Visible tile range.
+    const colMin = Math.floor(viewport.x / TILE_SIZE);
+    const rowMin = Math.floor(viewport.y / TILE_SIZE);
+    const colMax = Math.floor((viewport.x + viewport.width) / TILE_SIZE);
+    const rowMax = Math.floor((viewport.y + viewport.height) / TILE_SIZE);
+    // 3) For each visible tile, hit cache or render fresh.
+    for (let row = rowMin; row <= rowMax; row++) {
+        for (let col = colMin; col <= colMax; col++) {
+            const key = { col, row, zoom: zoomBucket };
+            let entry = cache.get(key);
+            if (!entry) {
+                const fresh = rasteriseTile(scene, col, row, zoomBucket);
+                if (!fresh)
+                    continue;
+                cache.set(fresh);
+                entry = fresh;
+            }
+            // Composite — draw the cached bitmap at its world position. The
+            // main target's transform already maps world→screen.
+            mainTarget.drawImage(entry.bitmap, entry.bounds.x, entry.bounds.y, entry.bounds.width, entry.bounds.height);
+        }
+    }
+};
+/**
+ * Render a single tile's worth of shapes into a fresh OffscreenCanvas
+ * sized at `TILE_SIZE * zoomBucket` device pixels per side. Returns
+ * `null` when the tile contains no shapes.
+ */
+const rasteriseTile = (scene, col, row, zoomBucket) => {
+    if (typeof OffscreenCanvas === "undefined")
+        return null;
+    const worldX = col * TILE_SIZE;
+    const worldY = row * TILE_SIZE;
+    const worldBounds = {
+        x: worldX,
+        y: worldY,
+        width: TILE_SIZE,
+        height: TILE_SIZE,
+    };
+    const shapes = elementsIntersectingTile(scene, worldBounds);
+    if (shapes.length === 0)
+        return null;
+    // Bitmap size — `TILE_SIZE * zoomBucket` device pixels so the tile
+    // stays crisp at this bucket. Higher buckets allocate more memory;
+    // cache eviction keeps total bounded.
+    const bitmapSize = Math.max(1, Math.round(TILE_SIZE * zoomBucket));
+    const { canvas, target } = createOffscreenCanvas2DTarget(bitmapSize, bitmapSize);
+    // World → tile-local + zoom scaling.
+    target.save();
+    target.scale(zoomBucket, zoomBucket);
+    target.translate(-worldX, -worldY);
+    for (const shape of shapes) {
+        const renderer = getElementRenderer(shape.type);
+        if (!renderer)
+            continue;
+        target.save();
+        target.translate(shape.position.x, shape.position.y);
+        if (shape.rotation !== 0)
+            target.rotate(shape.rotation);
+        if (shape.scale.x !== 1 || shape.scale.y !== 1) {
+            target.scale(shape.scale.x, shape.scale.y);
+        }
+        renderer(shape, target, { zoom: zoomBucket });
+        target.restore();
+    }
+    target.restore();
+    // 4 bytes per pixel (RGBA) — byte accounting for LRU.
+    const bytes = bitmapSize * bitmapSize * 4;
+    return {
+        key: { col, row, zoom: zoomBucket },
+        bitmap: canvas,
+        bounds: worldBounds,
+        bytes,
+        elements: shapes.map((s) => s.id),
+    };
+};
+const elementsIntersectingTile = (scene, tileBounds) => {
+    const out = [];
+    for (const layer of getLayersInOrder(scene)) {
+        if (!layer.visible)
+            continue;
+        for (const shape of getElementsInLayer(scene, layer.id)) {
+            const b = getElementWorldBounds(shape);
+            if (intersects(b, tileBounds))
+                out.push(shape);
+        }
+    }
+    return out;
+};
+const intersects = (a, b) => a.x < b.x + b.width &&
+    a.x + a.width > b.x &&
+    a.y < b.y + b.height &&
+    a.y + a.height > b.y;
+//# sourceMappingURL=tile-compositor.js.map

package/dist/tile-compositor.js.map

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

package/dist/webgl2-color.d.ts

@@ -0,0 +1,13 @@
+import type { Color } from "@oh-just-another/types";
+/**
+ * Parse a CSS color into normalised RGBA `[r, g, b, a]` where every
+ * component is in `[0, 1]`. Delegates to `@math/color` so the WebGL2
+ * backend understands the same syntaxes as Canvas2D — short hex
+ * (`#bbb`), `rgb()`/`rgba()`, named colors (`white`, `transparent`),
+ * and `#rrggbbaa` with explicit alpha.
+ *
+ * Anything unparseable falls back to opaque black plus a dev-time
+ * warning.
+ */
+export declare const parseWebGL2Color: (color: Color | null) => [number, number, number, number];
+//# sourceMappingURL=webgl2-color.d.ts.map

package/dist/webgl2-color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl2-color.d.ts","sourceRoot":"","sources":["../src/webgl2-color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAGpD;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,GAAG,IAAI,KAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAYrF,CAAC"}

package/dist/webgl2-color.js

@@ -0,0 +1,26 @@
+import { color as colorParser } from "@oh-just-another/math";
+/**
+ * Parse a CSS color into normalised RGBA `[r, g, b, a]` where every
+ * component is in `[0, 1]`. Delegates to `@math/color` so the WebGL2
+ * backend understands the same syntaxes as Canvas2D — short hex
+ * (`#bbb`), `rgb()`/`rgba()`, named colors (`white`, `transparent`),
+ * and `#rrggbbaa` with explicit alpha.
+ *
+ * Anything unparseable falls back to opaque black plus a dev-time
+ * warning.
+ */
+export const parseWebGL2Color = (color) => {
+    if (color === null)
+        return [0, 0, 0, 0];
+    try {
+        const { r, g, b, a } = colorParser.parse(color);
+        return [r / 255, g / 255, b / 255, a];
+    }
+    catch {
+        if (typeof console !== "undefined") {
+            console.warn(`[WebGL2Target] cannot parse color '${color}', falling back to black`);
+        }
+        return [0, 0, 0, 1];
+    }
+};
+//# sourceMappingURL=webgl2-color.js.map

package/dist/webgl2-color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl2-color.js","sourceRoot":"","sources":["../src/webgl2-color.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAE7D;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAmB,EAAoC,EAAE;IACxF,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACxC,IAAI,CAAC;QACH,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAChD,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC;IACxC,CAAC;IAAC,MAAM,CAAC;QACP,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE,CAAC;YAEnC,OAAO,CAAC,IAAI,CAAC,sCAAsC,KAAK,0BAA0B,CAAC,CAAC;QACtF,CAAC;QACD,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACtB,CAAC;AACH,CAAC,CAAC"}