@glissade/scene 0.1.0

package/dist/layoutEngine.js

@@ -0,0 +1,655 @@
+import { TARGET_PATH, computed, signal, vec2Signal } from "@glissade/core";
+//#region src/matrix.ts
+const IDENTITY = [
+	1,
+	0,
+	0,
+	1,
+	0,
+	0
+];
+const z = (v) => v === 0 ? 0 : v;
+function multiply(m1, m2) {
+	const [a1, b1, c1, d1, e1, f1] = m1;
+	const [a2, b2, c2, d2, e2, f2] = m2;
+	return [
+		z(a1 * a2 + c1 * b2),
+		z(b1 * a2 + d1 * b2),
+		z(a1 * c2 + c1 * d2),
+		z(b1 * c2 + d1 * d2),
+		z(a1 * e2 + c1 * f2 + e1),
+		z(b1 * e2 + d1 * f2 + f1)
+	];
+}
+/** Compose translate × rotate × scale (rotation in degrees). */
+function fromTRS(position, rotationDeg, scale) {
+	const r = rotationDeg * Math.PI / 180;
+	const cos = Math.cos(r);
+	const sin = Math.sin(r);
+	const [sx, sy] = scale;
+	return [
+		z(cos * sx),
+		z(sin * sx),
+		z(-sin * sy),
+		z(cos * sy),
+		z(position[0]),
+		z(position[1])
+	];
+}
+function applyToPoint(m, p) {
+	return [m[0] * p[0] + m[2] * p[1] + m[4], m[1] * p[0] + m[3] * p[1] + m[5]];
+}
+function matEquals(a, b) {
+	return a[0] === b[0] && a[1] === b[1] && a[2] === b[2] && a[3] === b[3] && a[4] === b[4] && a[5] === b[5];
+}
+//#endregion
+//#region src/displayList.ts
+function createDisplayListBuilder(size) {
+	const commands = [];
+	const resources = [];
+	const interned = /* @__PURE__ */ new Map();
+	return {
+		push: (cmd) => {
+			commands.push(cmd);
+		},
+		resource: (res) => {
+			const k = JSON.stringify(res);
+			const hit = interned.get(k);
+			if (hit !== void 0) return hit;
+			const id = resources.length;
+			resources.push(res);
+			interned.set(k, id);
+			return id;
+		},
+		finish: () => ({
+			commands,
+			resources,
+			size
+		})
+	};
+}
+//#endregion
+//#region src/text.ts
+/** §3.6 measurement quantum. */
+function quantize(v) {
+	return Math.round(v * 2) / 2;
+}
+/**
+* Estimating fallback measurer — used only when no backend has been injected
+* (e.g. evaluating for IR-level tests). Deterministic but not metrically
+* faithful; mount(), the CLI, and exporters always inject the real one.
+*/
+const estimatingMeasurer = { measureText(text, font) {
+	return {
+		width: text.length * font.size * .52,
+		ascent: font.size * .8,
+		descent: font.size * .2
+	};
+} };
+let wordSegmenter;
+function segmentWords(text) {
+	if (wordSegmenter === void 0) wordSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "word" }) : null;
+	if (wordSegmenter) {
+		const raw = [...wordSegmenter.segment(text)].map((s) => s.segment);
+		const glued = [];
+		for (const seg of raw) if (glued.length > 0 && /^[^\p{L}\p{N}\s]+$/u.test(seg)) glued[glued.length - 1] += seg;
+		else glued.push(seg);
+		return glued;
+	}
+	return text.split(/(\s+)/).filter((w) => w.length > 0);
+}
+/**
+* Greedy line breaking: explicit '\n' always breaks; otherwise word segments
+* flow until maxWidth is exceeded (Intl.Segmenter boundaries, so CJK wraps
+* without spaces). A segment wider than maxWidth gets its own line (no
+* intra-word breaking in v1).
+*/
+function breakLines(text, font, maxWidth, measurer) {
+	const paragraphs = text.split("\n");
+	if (maxWidth === void 0 || maxWidth <= 0) return paragraphs;
+	const lines = [];
+	for (const para of paragraphs) {
+		const words = segmentWords(para);
+		let line = "";
+		for (const word of words) {
+			const candidate = line + word;
+			if (line !== "" && quantize(measurer.measureText(candidate.trimEnd(), font).width) > maxWidth) {
+				lines.push(line.trimEnd());
+				line = word.trimStart() === "" ? "" : word;
+			} else line = candidate;
+		}
+		lines.push(line.trimEnd());
+	}
+	return lines;
+}
+//#endregion
+//#region src/node.ts
+/**
+* Scene-graph node base (DESIGN.md §3.1): every animatable property is a
+* signal; transforms are computed matrix signals; emit() is pure — it reads
+* signals and ctx only, and produces IR commands, never canvas calls.
+*/
+function initScalar(sig, init) {
+	if (typeof init === "function") sig.bindSource(init);
+	else if (init !== void 0) sig.set(init);
+	return sig;
+}
+function initVec2(sig, init) {
+	if (typeof init === "function") sig.bindSource(init);
+	else if (init !== void 0) sig.set(init);
+	return sig;
+}
+var Node = class {
+	id;
+	position;
+	rotation;
+	scale;
+	opacity;
+	blend;
+	zIndex;
+	filters;
+	parent = null;
+	localMatrix;
+	worldMatrix;
+	/** Track-target paths → bindable signals; subclasses register their own props. */
+	targets = /* @__PURE__ */ new Map();
+	constructor(props = {}) {
+		this.id = props.id;
+		this.position = initVec2(vec2Signal([0, 0]), props.position);
+		this.rotation = initScalar(signal(0), props.rotation);
+		this.scale = initVec2(vec2Signal([1, 1]), props.scale);
+		this.opacity = initScalar(signal(1), props.opacity);
+		this.blend = initScalar(signal("source-over"), props.blend);
+		this.zIndex = initScalar(signal(0), props.zIndex);
+		this.filters = initScalar(signal([]), void 0);
+		this.localMatrix = computed(() => fromTRS(this.position(), this.rotation(), this.scale()), { equals: matEquals });
+		this.worldMatrix = computed(() => this.parent ? multiply(this.parent.worldMatrix(), this.localMatrix()) : this.localMatrix(), { equals: matEquals });
+		this.registerTarget("position", this.position);
+		this.registerTarget("position.x", this.position.x);
+		this.registerTarget("position.y", this.position.y);
+		this.registerTarget("rotation", this.rotation);
+		this.registerTarget("scale", this.scale);
+		this.registerTarget("scale.x", this.scale.x);
+		this.registerTarget("scale.y", this.scale.y);
+		this.registerTarget("opacity", this.opacity);
+		this.registerTarget("zIndex", this.zIndex);
+	}
+	registerTarget(path, sig) {
+		this.targets.set(path, sig);
+		if (this.id !== void 0) sig[TARGET_PATH] = `${this.id}/${path}`;
+	}
+	resolveTarget(path) {
+		return this.targets.get(path);
+	}
+	/**
+	* Natural size for flex flow (§3.2); null = not flowable (a Layout parent
+	* emits such children absolutely, untouched).
+	*/
+	intrinsicSize(measurer) {
+		return null;
+	}
+	/**
+	* Vector from the node origin to its intrinsic box's TOP-LEFT, so Layout
+	* can place any anchor correctly. Default: center-anchored (every shape).
+	* Text overrides — it draws from a left/center/right baseline origin.
+	*/
+	flowOffset(measurer) {
+		const size = this.intrinsicSize(measurer) ?? {
+			w: 0,
+			h: 0
+		};
+		return {
+			x: -size.w / 2,
+			y: -size.h / 2
+		};
+	}
+	/** §3.5 predicate: composite-as-a-unit when opacity/blend demand it. */
+	requiresGroup() {
+		return this.opacity() < 1 || this.blend() !== "source-over";
+	}
+	emit(out, ctx) {
+		const opacity = this.opacity();
+		if (opacity <= 0) return;
+		const local = this.localMatrix();
+		const isIdentity = matEquals(local, IDENTITY);
+		const group = this.requiresGroup();
+		out.push({ op: "save" });
+		if (!isIdentity) out.push({
+			op: "transform",
+			m: local
+		});
+		if (group) out.push({
+			op: "pushGroup",
+			opacity,
+			blend: this.blend(),
+			filters: this.filters()
+		});
+		this.draw(out, ctx);
+		if (group) out.push({ op: "popGroup" });
+		out.push({ op: "restore" });
+	}
+};
+//#endregion
+//#region src/nodes.ts
+/**
+* Built-in nodes for M1 (DESIGN.md §3.1): Group, Rect, Circle, Text.
+* Path/Image/Video/Layout arrive with their milestones.
+*/
+var Group = class extends Node {
+	children;
+	constructor(props = {}) {
+		super(props);
+		this.children = props.children ?? [];
+		for (const child of this.children) child.parent = this;
+	}
+	add(child) {
+		child.parent = this;
+		this.children.push(child);
+		return this;
+	}
+	draw(out, ctx) {
+		const sorted = this.children.map((node, i) => ({
+			node,
+			i
+		})).sort((a, b) => a.node.zIndex() - b.node.zIndex() || a.i - b.i).map((e) => e.node);
+		for (const child of sorted) child.emit(out, ctx);
+	}
+};
+var Shape = class extends Node {
+	fill;
+	stroke;
+	strokeWidth;
+	constructor(props = {}) {
+		super(props);
+		this.fill = initProp(signal(""), props.fill);
+		this.stroke = initProp(signal(""), props.stroke);
+		this.strokeWidth = initProp(signal(0), props.strokeWidth);
+		this.registerTarget("fill", this.fill);
+		this.registerTarget("stroke", this.stroke);
+		this.registerTarget("strokeWidth", this.strokeWidth);
+	}
+	draw(out) {
+		const segs = this.pathSegs();
+		const path = out.resource({
+			kind: "path",
+			segs
+		});
+		const fill = this.fill();
+		if (fill) out.push({
+			op: "fillPath",
+			path,
+			paint: {
+				kind: "color",
+				color: fill
+			}
+		});
+		const stroke = this.stroke();
+		const width = this.strokeWidth();
+		if (stroke && width > 0) out.push({
+			op: "strokePath",
+			path,
+			paint: {
+				kind: "color",
+				color: stroke
+			},
+			stroke: { width }
+		});
+	}
+};
+function initProp(sig, init) {
+	if (typeof init === "function") sig.bindSource(init);
+	else if (init !== void 0) sig.set(init);
+	return sig;
+}
+var Rect = class extends Shape {
+	width;
+	height;
+	/** Corner radius; clamped to half the smaller dimension. radius = h/2 makes a pill. */
+	cornerRadius;
+	constructor(props = {}) {
+		super(props);
+		this.width = initProp(signal(0), props.width);
+		this.height = initProp(signal(0), props.height);
+		this.cornerRadius = initProp(signal(0), props.cornerRadius);
+		this.registerTarget("width", this.width);
+		this.registerTarget("height", this.height);
+		this.registerTarget("cornerRadius", this.cornerRadius);
+	}
+	intrinsicSize() {
+		return {
+			w: this.width(),
+			h: this.height()
+		};
+	}
+	pathSegs() {
+		const w = this.width();
+		const h = this.height();
+		const x = -w / 2;
+		const y = -h / 2;
+		const r = Math.min(Math.max(0, this.cornerRadius()), w / 2, h / 2);
+		if (r <= 0) return [
+			[
+				"M",
+				x,
+				y
+			],
+			[
+				"L",
+				x + w,
+				y
+			],
+			[
+				"L",
+				x + w,
+				y + h
+			],
+			[
+				"L",
+				x,
+				y + h
+			],
+			["Z"]
+		];
+		const HALF = Math.PI / 2;
+		return [
+			[
+				"M",
+				x + r,
+				y
+			],
+			[
+				"L",
+				x + w - r,
+				y
+			],
+			[
+				"E",
+				x + w - r,
+				y + r,
+				r,
+				r,
+				0,
+				-HALF,
+				0
+			],
+			[
+				"L",
+				x + w,
+				y + h - r
+			],
+			[
+				"E",
+				x + w - r,
+				y + h - r,
+				r,
+				r,
+				0,
+				0,
+				HALF
+			],
+			[
+				"L",
+				x + r,
+				y + h
+			],
+			[
+				"E",
+				x + r,
+				y + h - r,
+				r,
+				r,
+				0,
+				HALF,
+				Math.PI
+			],
+			[
+				"L",
+				x,
+				y + r
+			],
+			[
+				"E",
+				x + r,
+				y + r,
+				r,
+				r,
+				0,
+				Math.PI,
+				Math.PI + HALF
+			],
+			["Z"]
+		];
+	}
+};
+var Circle = class extends Shape {
+	radius;
+	constructor(props = {}) {
+		super(props);
+		this.radius = initProp(signal(0), props.radius);
+		this.registerTarget("radius", this.radius);
+	}
+	intrinsicSize() {
+		const d = this.radius() * 2;
+		return {
+			w: d,
+			h: d
+		};
+	}
+	pathSegs() {
+		const r = this.radius();
+		return [[
+			"E",
+			0,
+			0,
+			r,
+			r,
+			0,
+			0,
+			Math.PI * 2
+		], ["Z"]];
+	}
+};
+var ImageNode = class extends Node {
+	assetId;
+	width;
+	height;
+	constructor(props) {
+		super(props);
+		this.assetId = props.assetId;
+		this.width = initProp(signal(0), props.width);
+		this.height = initProp(signal(0), props.height);
+		this.registerTarget("width", this.width);
+		this.registerTarget("height", this.height);
+	}
+	intrinsicSize() {
+		return {
+			w: this.width(),
+			h: this.height()
+		};
+	}
+	draw(out) {
+		const w = this.width();
+		const h = this.height();
+		if (w <= 0 || h <= 0) return;
+		const image = out.resource({
+			kind: "image",
+			assetId: this.assetId
+		});
+		out.push({
+			op: "drawImage",
+			image,
+			dst: {
+				x: -w / 2,
+				y: -h / 2,
+				w,
+				h
+			}
+		});
+	}
+};
+/**
+* Pure given a warmed VideoFrameSource (§3.8): emit() does only the
+* frame-indexed media-time arithmetic — mediaT = trimStart + (t - at) * rate —
+* and references the exact source-grid frame; backends resolve it.
+*/
+var Video = class extends Node {
+	assetId;
+	at;
+	trimStart;
+	playbackRate;
+	clipDuration;
+	sourceFps;
+	width;
+	height;
+	constructor(props) {
+		super(props);
+		this.assetId = props.assetId;
+		this.at = props.at ?? 0;
+		this.trimStart = props.trimStart ?? 0;
+		this.playbackRate = props.playbackRate ?? 1;
+		this.clipDuration = props.clipDuration;
+		this.sourceFps = props.sourceFps;
+		this.width = initProp(signal(0), props.width);
+		this.height = initProp(signal(0), props.height);
+		this.registerTarget("width", this.width);
+		this.registerTarget("height", this.height);
+	}
+	/** Frame-indexed media time for timeline time t; null when outside the clip. */
+	mediaTime(t) {
+		const local = (t - this.at) * this.playbackRate;
+		if (local < 0) return null;
+		if (this.clipDuration !== void 0 && t - this.at >= this.clipDuration) return null;
+		const mediaT = this.trimStart + local;
+		if (this.sourceFps !== void 0) return Math.floor(mediaT * this.sourceFps + 1e-9) / this.sourceFps;
+		return mediaT;
+	}
+	draw(out, ctx) {
+		const mediaT = this.mediaTime(ctx.time);
+		if (mediaT === null) return;
+		const w = this.width();
+		const h = this.height();
+		if (w <= 0 || h <= 0) return;
+		const image = out.resource({
+			kind: "videoFrame",
+			assetId: this.assetId,
+			mediaT
+		});
+		out.push({
+			op: "drawImage",
+			image,
+			dst: {
+				x: -w / 2,
+				y: -h / 2,
+				w,
+				h
+			}
+		});
+	}
+};
+var Text = class extends Node {
+	text;
+	fill;
+	fontSize;
+	fontFamily;
+	fontWeight;
+	align;
+	width;
+	lineHeight;
+	constructor(props = {}) {
+		super(props);
+		this.text = initProp(signal(""), props.text);
+		this.fill = initProp(signal("#000000"), props.fill);
+		this.fontSize = initProp(signal(16), props.fontSize);
+		this.fontFamily = props.fontFamily ?? "sans-serif";
+		this.fontWeight = props.fontWeight ?? 400;
+		this.align = props.align ?? "left";
+		this.width = initProp(signal(0), props.width);
+		this.lineHeight = props.lineHeight ?? 1.25;
+		this.registerTarget("width", this.width);
+		this.registerTarget("text", this.text);
+		this.registerTarget("fill", this.fill);
+		this.registerTarget("fontSize", this.fontSize);
+	}
+	intrinsicSize(measurer) {
+		const text = this.text();
+		if (!text) return {
+			w: 0,
+			h: 0
+		};
+		const font = {
+			family: this.fontFamily,
+			size: this.fontSize(),
+			weight: this.fontWeight
+		};
+		const maxWidth = this.width();
+		const lines = breakLines(text, font, maxWidth > 0 ? maxWidth : void 0, measurer);
+		const widest = Math.max(...lines.map((l) => quantize(measurer.measureText(l, font).width)), 0);
+		return {
+			w: maxWidth > 0 ? maxWidth : widest,
+			h: quantize(font.size * this.lineHeight) * lines.length
+		};
+	}
+	/** Text draws from a baseline origin at its align edge, not a center (§3.6). */
+	flowOffset(measurer) {
+		const size = this.intrinsicSize(measurer);
+		const font = {
+			family: this.fontFamily,
+			size: this.fontSize(),
+			weight: this.fontWeight
+		};
+		const firstLine = breakLines(this.text(), font, this.width() > 0 ? this.width() : void 0, measurer)[0] ?? "";
+		const ascent = measurer.measureText(firstLine, font).ascent;
+		return {
+			x: this.align === "left" ? 0 : this.align === "center" ? -size.w / 2 : -size.w,
+			y: -ascent
+		};
+	}
+	draw(out, ctx) {
+		const text = this.text();
+		if (!text) return;
+		const font = {
+			family: this.fontFamily,
+			size: this.fontSize(),
+			weight: this.fontWeight
+		};
+		const maxWidth = this.width();
+		const lines = breakLines(text, font, maxWidth > 0 ? maxWidth : void 0, ctx.measurer);
+		const step = quantize(font.size * this.lineHeight);
+		for (let i = 0; i < lines.length; i++) {
+			if (!lines[i]) continue;
+			out.push({
+				op: "fillText",
+				text: lines[i],
+				font,
+				paint: {
+					kind: "color",
+					color: this.fill()
+				},
+				x: 0,
+				y: i * step,
+				...this.align !== "left" ? { align: this.align } : {}
+			});
+		}
+	}
+};
+//#endregion
+//#region src/layoutEngine.ts
+var LayoutEngineMissingError = class extends Error {
+	constructor() {
+		super("a Layout node was evaluated but no LayoutEngine is registered — await loadYogaLayoutEngine() from '@glissade/scene/layout' before mounting/rendering (the engine is wasm and loads async; evaluate() never awaits, §2.5)");
+		this.name = "LayoutEngineMissingError";
+	}
+};
+let engine = null;
+function setLayoutEngine(e) {
+	engine = e;
+}
+function getLayoutEngine() {
+	return engine;
+}
+function requireLayoutEngine() {
+	if (!engine) throw new LayoutEngineMissingError();
+	return engine;
+}
+//#endregion
+export { applyToPoint as _, Circle as a, multiply as b, Rect as c, Node as d, breakLines as f, IDENTITY as g, createDisplayListBuilder as h, setLayoutEngine as i, Text as l, quantize as m, getLayoutEngine as n, Group as o, estimatingMeasurer as p, requireLayoutEngine as r, ImageNode as s, LayoutEngineMissingError as t, Video as u, fromTRS as v, matEquals as y };

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@glissade/scene",
+  "version": "0.1.0",
+  "description": "glissade scene graph: nodes, transforms, DisplayList emission. Renderer-agnostic; zero DOM/Node dependencies.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./layout": {
+      "types": "./dist/layout.d.ts",
+      "default": "./dist/layout.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "yoga-layout": "^3.2.1",
+    "@glissade/core": "0.1.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tyevco/glissade.git",
+    "directory": "packages/scene"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit"
+  }
+}