@glissade/backend-canvas2d 0.1.0 → 0.3.0

package/README.md

@@ -0,0 +1,26 @@
+# @glissade/backend-canvas2d
+
+The browser rasterizer: consumes a DisplayList and draws it to a `<canvas>` / `OffscreenCanvas` 2D context — transforms, paths, text, group compositing. Per-path deterministic twin of `@glissade/backend-skia`; the two are held together by an SSIM parity suite in CI.
+
+```sh
+npm i @glissade/backend-canvas2d
+```
+
+```ts
+import { Canvas2DBackend } from '@glissade/backend-canvas2d';
+import { evaluate } from '@glissade/scene';
+
+const backend = new Canvas2DBackend(canvas);
+backend.render(evaluate(scene, doc, t));
+```
+
+Most apps don't use this directly — `mount()` from `@glissade/player` wires it up.
+
+## Part of glissade
+
+*(glide & slide)* — programmatic motion graphics for TypeScript: realtime-first in any web page, deterministic headless video export from the same code, a visual studio over the same document. No generator functions.
+
+- [Repository & full README](https://github.com/tyevco/glissade)
+- [Getting started](https://github.com/tyevco/glissade/blob/main/docs/getting-started.md) · [Concepts](https://github.com/tyevco/glissade/blob/main/docs/concepts.md) · [Interactivity](https://github.com/tyevco/glissade/blob/main/docs/interactivity.md)
+
+Apache-2.0.

package/dist/index.d.ts

@@ -1,34 +1,22 @@
-import { DisplayList, DrawCommand, FontSpec, VideoFrameSource } from "@glissade/scene";
+import { DisplayList, DrawCommand, FontSpec, TextMetricsLite, TextMetricsLite as TextMetricsLite$1, VideoFrameSource } from "@glissade/scene";
 
 //#region src/index.d.ts
 
 type Drawable = Exclude<CanvasImageSource, SVGImageElement>;
 type AnyCanvas = HTMLCanvasElement | OffscreenCanvas;
-interface TextMetricsLite {
-  width: number;
-  ascent: number;
-  descent: number;
-}
 declare class Canvas2DBackend {
   private readonly target;
-  private readonly pool;
-  private pathCache;
-  private readonly images;
-  private readonly videos;
+  private readonly raster;
   constructor(target: AnyCanvas);
   /** Register a decoded still (kind 'image' assets). */
   setImageAsset(assetId: string, image: Drawable): void;
   /** Register a warmed-on-demand video source (kind 'video' assets, §3.8). */
   setVideoAsset(assetId: string, source: VideoFrameSource): void;
-  private resolveDrawable;
-  measureText(text: string, font: FontSpec): TextMetricsLite;
+  measureText(text: string, font: FontSpec): TextMetricsLite$1;
   render(list: DisplayList): void;
   readPixels(): Promise<Uint8ClampedArray>;
   dispose(): void;
   private context;
-  private path;
-  private acquire;
-  private release;
 }
 //#endregion
-export { Canvas2DBackend, type DisplayList, type DrawCommand, TextMetricsLite };
+export { Canvas2DBackend, type DisplayList, type DrawCommand, type TextMetricsLite };

package/dist/index.js

@@ -1,71 +1,29 @@
-import { ColdAssetError } from "@glissade/scene";
+import { Raster2D, fontString } from "@glissade/scene";
 //#region src/index.ts
 /**
 * @glissade/backend-canvas2d — rasterize DisplayLists onto Canvas 2D
-* (DESIGN.md §3.4–§3.5). Groups realize as pooled temporary canvases so
-* group opacity/blend composite correctly (children don't individually fade).
+* (DESIGN.md §3.4–§3.5). A thin adapter over the shared Raster2D interpreter
+* in @glissade/scene: this file owns only the DOM canvas flavor (context
+* acquisition, OffscreenCanvas layers, Path2D) and text measurement.
 */
-function fontString(font) {
-	return `${font.style === "italic" ? "italic " : ""}${font.weight !== void 0 && font.weight !== 400 ? `${font.weight} ` : ""}${font.size}px ${font.family}`;
-}
-function buildPath(segs) {
-	const p = new Path2D();
-	for (const seg of segs) switch (seg[0]) {
-		case "M":
-			p.moveTo(seg[1], seg[2]);
-			break;
-		case "L":
-			p.lineTo(seg[1], seg[2]);
-			break;
-		case "C":
-			p.bezierCurveTo(seg[1], seg[2], seg[3], seg[4], seg[5], seg[6]);
-			break;
-		case "Q":
-			p.quadraticCurveTo(seg[1], seg[2], seg[3], seg[4]);
-			break;
-		case "E":
-			p.ellipse(seg[1], seg[2], seg[3], seg[4], seg[5], seg[6], seg[7]);
-			break;
-		case "Z":
-			p.closePath();
-			break;
-	}
-	return p;
-}
 var Canvas2DBackend = class {
 	target;
-	pool = [];
-	pathCache = /* @__PURE__ */ new WeakMap();
-	images = /* @__PURE__ */ new Map();
-	videos = /* @__PURE__ */ new Map();
+	raster;
 	constructor(target) {
 		this.target = target;
+		this.raster = new Raster2D({
+			context: (c) => this.context(c),
+			createCanvas: (w, h) => new OffscreenCanvas(w, h),
+			newPath: () => new Path2D()
+		});
 	}
 	/** Register a decoded still (kind 'image' assets). */
 	setImageAsset(assetId, image) {
-		this.images.set(assetId, image);
+		this.raster.setImageAsset(assetId, image);
 	}
 	/** Register a warmed-on-demand video source (kind 'video' assets, §3.8). */
 	setVideoAsset(assetId, source) {
-		this.videos.set(assetId, source);
-	}
-	resolveDrawable(res, id) {
-		if (res.kind === "image") {
-			const img = this.images.get(res.assetId);
-			if (!img) throw new ColdAssetError(res.assetId, "no decoded image registered");
-			return img;
-		}
-		if (res.kind === "videoFrame") {
-			const source = this.videos.get(res.assetId);
-			if (!source) throw new ColdAssetError(res.assetId, "no VideoFrameSource registered", res.mediaT);
-			try {
-				return source.getFrameSync(res.mediaT);
-			} catch (e) {
-				if (e instanceof ColdAssetError) throw new ColdAssetError(res.assetId, e.detail, res.mediaT);
-				throw e;
-			}
-		}
-		throw new Error(`resource ${id} is not drawable`);
+		this.raster.setVideoAsset(assetId, source);
 	}
 	measureText(text, font) {
 		const ctx = this.context(this.target);
@@ -80,133 +38,19 @@ var Canvas2DBackend = class {
 		};
 	}
 	render(list) {
-		const base = this.context(this.target);
-		const { w, h } = list.size;
-		if (this.target.width !== w) this.target.width = w;
-		if (this.target.height !== h) this.target.height = h;
-		base.resetTransform();
-		base.clearRect(0, 0, w, h);
-		const layers = [{
-			ctx: base,
-			canvas: null,
-			opacity: 1,
-			blend: "source-over"
-		}];
-		const ctxOf = () => layers[layers.length - 1].ctx;
-		for (const cmd of list.commands) switch (cmd.op) {
-			case "save":
-				ctxOf().save();
-				break;
-			case "restore":
-				ctxOf().restore();
-				break;
-			case "transform":
-				ctxOf().transform(cmd.m[0], cmd.m[1], cmd.m[2], cmd.m[3], cmd.m[4], cmd.m[5]);
-				break;
-			case "clip":
-				ctxOf().clip(this.path(list.resources, cmd.path), cmd.rule ?? "nonzero");
-				break;
-			case "fillPath": {
-				const ctx = ctxOf();
-				ctx.fillStyle = cmd.paint.color;
-				ctx.fill(this.path(list.resources, cmd.path));
-				break;
-			}
-			case "strokePath": {
-				const ctx = ctxOf();
-				ctx.strokeStyle = cmd.paint.color;
-				ctx.lineWidth = cmd.stroke.width;
-				ctx.lineCap = cmd.stroke.cap ?? "butt";
-				ctx.lineJoin = cmd.stroke.join ?? "miter";
-				if (cmd.stroke.dash) ctx.setLineDash(cmd.stroke.dash);
-				ctx.stroke(this.path(list.resources, cmd.path));
-				if (cmd.stroke.dash) ctx.setLineDash([]);
-				break;
-			}
-			case "fillText": {
-				const ctx = ctxOf();
-				ctx.font = fontString(cmd.font);
-				ctx.fillStyle = cmd.paint.color;
-				ctx.textBaseline = "alphabetic";
-				ctx.textAlign = cmd.align ?? "left";
-				ctx.fillText(cmd.text, cmd.x, cmd.y);
-				break;
-			}
-			case "drawImage": {
-				const res = list.resources[cmd.image];
-				if (!res) throw new Error(`drawImage references missing resource ${cmd.image}`);
-				const drawable = this.resolveDrawable(res, cmd.image);
-				const ctx = ctxOf();
-				if (cmd.smoothing !== void 0) ctx.imageSmoothingEnabled = cmd.smoothing;
-				const { x, y, w: dw, h: dh } = cmd.dst;
-				if (cmd.src) ctx.drawImage(drawable, cmd.src.x, cmd.src.y, cmd.src.w, cmd.src.h, x, y, dw, dh);
-				else ctx.drawImage(drawable, x, y, dw, dh);
-				break;
-			}
-			case "pushGroup": {
-				const parent = ctxOf();
-				const layerCanvas = this.acquire(w, h);
-				const layerCtx = layerCanvas.getContext("2d");
-				layerCtx.resetTransform();
-				layerCtx.clearRect(0, 0, w, h);
-				layerCtx.setTransform(parent.getTransform());
-				layers.push({
-					ctx: layerCtx,
-					canvas: layerCanvas,
-					opacity: cmd.opacity,
-					blend: cmd.blend
-				});
-				break;
-			}
-			case "popGroup": {
-				const layer = layers.pop();
-				if (!layer || layer.canvas === null) throw new Error("popGroup without matching pushGroup");
-				const parent = ctxOf();
-				parent.save();
-				parent.resetTransform();
-				parent.globalAlpha = layer.opacity;
-				parent.globalCompositeOperation = layer.blend;
-				parent.drawImage(layer.canvas, 0, 0);
-				parent.restore();
-				this.release(layer.canvas);
-				break;
-			}
-		}
-		if (layers.length !== 1) throw new Error("unbalanced pushGroup/popGroup in DisplayList");
+		this.raster.render(this.target, list);
 	}
 	async readPixels() {
 		return this.context(this.target).getImageData(0, 0, this.target.width, this.target.height).data;
 	}
 	dispose() {
-		this.pool.length = 0;
+		this.raster.dispose();
 	}
 	context(canvas) {
 		const ctx = canvas.getContext("2d");
 		if (!ctx) throw new Error("canvas 2d context unavailable");
 		return ctx;
 	}
-	path(resources, id) {
-		const res = resources[id];
-		if (!res || res.kind !== "path") throw new Error(`resource ${id} is not a path`);
-		let p = this.pathCache.get(res);
-		if (!p) {
-			p = buildPath(res.segs);
-			this.pathCache.set(res, p);
-		}
-		return p;
-	}
-	acquire(w, h) {
-		const pooled = this.pool.pop();
-		if (pooled) {
-			if (pooled.width !== w) pooled.width = w;
-			if (pooled.height !== h) pooled.height = h;
-			return pooled;
-		}
-		return new OffscreenCanvas(w, h);
-	}
-	release(canvas) {
-		if (this.pool.length < 8) this.pool.push(canvas);
-	}
 };
 //#endregion
 export { Canvas2DBackend };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/backend-canvas2d",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "glissade Canvas 2D render backend: DisplayList -> CanvasRenderingContext2D/OffscreenCanvas.",
   "license": "Apache-2.0",
   "type": "module",
@@ -15,8 +15,8 @@
     "dist"
   ],
   "dependencies": {
-    "@glissade/core": "0.1.0",
-    "@glissade/scene": "0.1.0"
+    "@glissade/core": "0.3.0",
+    "@glissade/scene": "0.3.0"
   },
   "repository": {
     "type": "git",