@neta-art/cohub 10.0.0 → 11.0.0

package/dist/board/stage/stage.js

@@ -1,18 +1,24 @@
-import { cameraForFocus, cameraForState, screenPoint, screenToWorld, stableCullRect, visibleWorldRect, worldPoint } from "../model/geometry.js";
+import { applyMatrix, invertMatrix } from "../../protocol/dist/board-layout.js";
+import { screenPoint, screenToWorld, stableCullRect, visibleWorldRect, worldPoint } from "../model/geometry.js";
+import { boardScriptScope, composeBoardScriptItems, prepareBoardScriptOutput, validateBoardScriptCommit } from "../model/script-scene.js";
+import { boardScriptTarget } from "../model/script-hit.js";
+import { createBoardAnimationSampler, resolveBoardAnimationCamera } from "../model/sampling.js";
 import { resolveSceneArrow } from "../model/arrow-geometry.js";
 import { buildFallbackShapeColors, pickBoardColor, resolveItemColor } from "../model/palette.js";
 import { featuredTaskArtifact } from "../model/task.js";
 import { isCreationBoardTool } from "../editor/tool.js";
 import { resizeCursorForHandle } from "../editor/selection-transform.js";
 import { parseBoardCssColor } from "../render/css-color.js";
+import { defaultBoardPalette, itemAlpha } from "../render/palette.js";
 import { createBoardBackground, updateBoardBackground } from "../render/board-background.js";
 import { getBoardResolution, textZoomBucket } from "../render/text-resolution.js";
-import { defaultBoardPalette } from "../render/palette.js";
 import { getBoardCardRenderer } from "../render/renderers/board-renderer-registry.js";
-import { createBoardSketchHost } from "../render/sketch-host.js";
+import { createBoardScriptHost } from "../render/script-host.js";
 import { createBoardPlayer } from "../player/index.js";
 import { toBoardPointerEvent } from "./pointer.js";
 import { createBoardScene } from "./scene.js";
+import { scheduleBoardMaintenance } from "./maintenance.js";
+import { createBoardScriptPointerRouter } from "./script-pointer.js";
 import { createBoardItemViewLayer } from "./views.js";
 import { Application, Container, Graphics, RendererType } from "pixi.js";
 //#region src/board/stage/stage.ts
@@ -45,7 +51,21 @@ function mountBoardStage(host, options) {
 	let overlay = null;
 	let background = null;
 	let scene = null;
-	let sketches = null;
+	let scripts = null;
+	let scriptMode = editor.readonly ? "interact" : "edit";
+	let scriptTime = 0;
+	let scriptLastTick = performance.now();
+	const scriptOutputs = /* @__PURE__ */ new Map();
+	const scriptListeners = /* @__PURE__ */ new Set();
+	let scriptVersion = 0;
+	let composedVersion = -1;
+	let composedZoom = 0;
+	let composedPlayhead = "";
+	let composedMoving = false;
+	let composedDocument = null;
+	let scriptHover = null;
+	const scriptPointers = createBoardScriptPointerRouter();
+	let stopMaintenance = null;
 	let active = true;
 	let disposed = false;
 	let renderFrame = 0;
@@ -63,7 +83,10 @@ function mountBoardStage(host, options) {
 	const views = createBoardItemViewLayer(host, editor, options.views ?? [], renderCamera);
 	const player = createBoardPlayer({ resolveColor: (color) => {
 		const current = theme();
-		return resolveItemColor(color, "brand", current.colors, current.colorScheme, parseBoardCssColor);
+		return {
+			color: resolveItemColor(color, "brand", current.colors, current.colorScheme, parseBoardCssColor),
+			alpha: itemAlpha(current, color)
+		};
 	} });
 	let cull = {
 		rect: null,
@@ -77,7 +100,7 @@ function mountBoardStage(host, options) {
 		if (same && cull.scene === editor.scene) return cull.ids;
 		cull = {
 			rect: same ? cull.rect : rect,
-			ids: new Set(editor.idsInRect(rect)),
+			ids: new Set(editor.idsInRect(rect, true)),
 			scene: editor.scene
 		};
 		options.onVisibleChange?.(cull.ids);
@@ -112,7 +135,7 @@ function mountBoardStage(host, options) {
 			settings: editor.settings,
 			scene: renderScene,
 			time,
-			...sketches ? { sketches } : {},
+			...scripts ? { scripts } : {},
 			selectedIds: new Set(editor.selection),
 			hoveredId: editor.hoverId,
 			resizingIds: interaction.type === "resizing" ? new Set(interaction.origin.keys()) : /* @__PURE__ */ new Set(),
@@ -175,28 +198,11 @@ function mountBoardStage(host, options) {
 		return strokes;
 	}
 	function followCamera(frame, renderScene) {
-		let camera = { ...editor.camera };
-		const focus = frame.camera.focus;
-		if (focus !== void 0 && surface.width > 0 && surface.height > 0) camera = cameraForFocus(focus, (id) => renderScene.get(id)?.frame, surface, { padding: 48 }) ?? camera;
-		if (frame.camera.zoom !== void 0) camera = {
-			...camera,
-			zoom: frame.camera.zoom
-		};
-		if (frame.camera.center) camera = cameraForState({
-			centerX: frame.camera.center.x,
-			centerY: frame.camera.center.y,
-			zoom: camera.zoom
-		}, surface);
-		if (frame.camera.shake) {
-			const t = frame.time / 1e3;
-			camera = {
-				...camera,
-				x: camera.x + Math.sin(t * 91.3) * frame.camera.shake,
-				y: camera.y + Math.cos(t * 77.9) * frame.camera.shake
-			};
-		}
-		return camera;
+		return resolveBoardAnimationCamera(frame.camera, (id) => renderScene.get(id)?.frame, surface, frame.time, editor.camera);
 	}
+	let effectSampler;
+	let effectDocument;
+	let effectAnimation = null;
 	function arrowHead(target, from, to, color, width, inv, alpha) {
 		const angle = Math.atan2(to.y - from.y, to.x - from.x);
 		const head = Math.max(14, 16 * inv);
@@ -248,6 +254,10 @@ function mountBoardStage(host, options) {
 		}
 	}
 	function cursorFor() {
+		if (scriptMode === "interact" && scriptHover) {
+			const output = scriptOutputs.get(scriptHover.owner);
+			return output?.hits[scriptHover.target]?.cursor ?? (output?.listens.includes("click") ? "pointer" : "default");
+		}
 		const interaction = editor.interaction;
 		switch (interaction.type) {
 			case "panning":
@@ -279,9 +289,63 @@ function mountBoardStage(host, options) {
 			sync();
 		});
 	}
+	function createScripts() {
+		return createBoardScriptHost({
+			host,
+			capabilities: {
+				...options.scriptCapabilities,
+				"board.emit": async (id, value) => {
+					const message = value;
+					if (!message || typeof message.target !== "string" || typeof message.type !== "string" || !boardScriptScope(editor.document, id).has(message.target)) throw new Error("Invalid script event target.");
+					scripts?.event(message.target, {
+						type: message.type,
+						data: message.data
+					});
+				},
+				...!editor.readonly ? { "board.commit": async (id, value) => {
+					validateBoardScriptCommit(editor.document, id, value);
+					await editor.commitPatch(value);
+				} } : {}
+			},
+			onOutput: (id, output) => {
+				if (output) {
+					prepareBoardScriptOutput(editor.document, id, output);
+					scriptOutputs.set(id, output);
+				} else scriptOutputs.delete(id);
+				scriptVersion++;
+				scheduleTick();
+			},
+			readModule: async (src) => {
+				const url = await options.source.resolveFileUrl(src);
+				if (!url) throw new Error(`${src} is not available.`);
+				const response = await fetch(url, { signal: AbortSignal.timeout(15e3) });
+				if (!response.ok) throw new Error(`${src} could not be read.`);
+				return response.text();
+			},
+			onFrame: () => {
+				scheduleTick();
+				for (const listener of scriptListeners) listener();
+			}
+		});
+	}
 	function sync() {
 		if (!app || !world || !scene || !overlay) return;
 		const current = theme();
+		const hasScripts = editor.hasScripts;
+		if (hasScripts && !scripts) {
+			scripts = createScripts();
+			scriptTime = 0;
+			scriptLastTick = performance.now();
+		} else if (!hasScripts && scripts) {
+			const previous = scripts;
+			scripts = null;
+			previous.destroy();
+			scriptOutputs.clear();
+			editor.setScriptItems(/* @__PURE__ */ new Map());
+			scriptHover = null;
+			composedVersion = -1;
+			composedDocument = null;
+		}
 		syncBackground(current);
 		player.enter(editor.consumeRecentlyAdded(), editor.document);
 		const playback = options.playback?.() ?? null;
@@ -290,15 +354,51 @@ function mountBoardStage(host, options) {
 		const moving = new Map(previews);
 		for (const [id, item] of frame.items) moving.set(id, item);
 		editor.setPlayedItems(moving);
+		if (scripts && (scriptOutputs.size || composedVersion !== scriptVersion)) {
+			const playheadKey = `${editor.playhead?.animationId ?? ""}:${editor.playhead?.time ?? ""}`;
+			if (scriptVersion !== composedVersion || composedDocument !== editor.document || moving.size || composedMoving || composedZoom !== editor.camera.zoom || composedPlayhead !== playheadKey) {
+				const animationItems = editor.animationItems();
+				const composed = composeBoardScriptItems(editor.document, editor.scene, scriptOutputs, animationItems, editor.camera, (owner, error) => scripts?.fault(owner, error instanceof Error ? error.message : String(error)));
+				const scriptedIds = new Set([...scriptOutputs.values()].flatMap((output) => Object.keys(output.patches)));
+				for (const id of animationItems.keys()) if (!scriptedIds.has(id)) composed.delete(id);
+				editor.setScriptItems(composed);
+				composedMoving = moving.size > 0;
+				composedPlayhead = playheadKey;
+				composedZoom = editor.camera.zoom;
+				composedVersion = scriptVersion;
+				composedDocument = editor.document;
+			}
+		}
 		const renderScene = editor.scene;
+		const animationId = editor.playhead?.animationId ?? (frame.playbackTime !== null ? playback?.animationId : null) ?? null;
+		if (animationId && (effectDocument !== editor.document || effectAnimation !== animationId)) {
+			effectDocument = editor.document;
+			effectAnimation = animationId;
+			effectSampler = createBoardAnimationSampler(editor.document, animationId);
+		}
+		if (editor.playhead && effectSampler) {
+			frame.camera = effectSampler.at(editor.playhead.time).evaluation.camera;
+			frame.time = editor.playhead.time;
+		}
 		playbackCamera = editor.cameraPolicy === "follow" && Object.keys(frame.camera).length > 0 ? followCamera(frame, renderScene) : null;
 		const camera = renderCamera();
+		if (scripts) {
+			const now = performance.now();
+			if (scriptMode !== "paused") scriptTime += Math.min(250, Math.max(0, now - scriptLastTick));
+			scriptLastTick = now;
+			scripts.sync(editor.document, renderScene, camera, scriptTime, scriptMode === "interact", visibleIds());
+		}
 		world.position.set(camera.x, camera.y);
 		world.scale.set(camera.zoom);
 		const ids = visibleIds();
 		syncAssets(ids);
 		const context = renderContext(current, renderScene, frame.time);
+		if (animationId && effectSampler) {
+			context.time = editor.playhead?.time ?? frame.time;
+			context.frameAt = effectSampler.frameAt;
+		}
 		const pinnedIds = new Set(editor.selection);
+		for (const item of renderScene.items) if (item.type === "effect" && item.props.kind === "trail" && renderScene.opacity(item.id) > 0) pinnedIds.add(item.id);
 		for (const id of previews.keys()) pinnedIds.add(id);
 		if (editor.editingId) pinnedIds.add(editor.editingId);
 		for (const id of frame.items.keys()) {
@@ -366,7 +466,7 @@ function mountBoardStage(host, options) {
 		const nextCursor = cursorFor();
 		if (nextCursor !== cursor) host.style.cursor = cursor = nextCursor;
 		scheduleRender();
-		if (frame.running || scene.animated) scheduleTick();
+		if (frame.running || scene.animated || scriptMode !== "paused" && scripts?.animated) scheduleTick();
 	}
 	function resize() {
 		cancelAnimationFrame(resizeFrame);
@@ -387,10 +487,75 @@ function mountBoardStage(host, options) {
 	function toInput(event) {
 		return toBoardPointerEvent(event, rectOf(), renderCamera(), event.type === "pointermove" && editor.interaction.type === "drawing");
 	}
+	function scriptTarget(input) {
+		if (!scriptOutputs.size) return null;
+		const point = input.world;
+		const candidates = editor.idsInRect({
+			x: point.x - .01,
+			y: point.y - .01,
+			width: .02,
+			height: .02
+		}, true);
+		return boardScriptTarget(editor.scene, candidates, point, scriptOutputs, editor.registry.hitTest);
+	}
+	function sendScriptEvent(target, type, event, input, related) {
+		if (!scripts) return;
+		const point = applyMatrix(invertMatrix(editor.scene.layout.matrix(target.owner)), input.world);
+		scripts?.event(target.owner, {
+			type,
+			target: target.target,
+			relatedTarget: related?.target,
+			relatedOwner: related?.owner,
+			point,
+			pointerId: event.pointerId,
+			pointerType: event.pointerType,
+			buttons: event.buttons,
+			shiftKey: event.shiftKey,
+			altKey: event.altKey,
+			ctrlKey: event.ctrlKey,
+			metaKey: event.metaKey
+		});
+	}
+	function scriptPointer(type, event, input) {
+		if (!scriptPointers.needsRouting(event.pointerId, scripts !== null)) return false;
+		const enabled = scriptMode === "interact" && !editor.gestureActive && !editor.spaceHeld && event.button !== 1;
+		const target = type === "leave" || !enabled || scriptPointers.owner(event.pointerId) === "editor" ? null : scriptTarget(input);
+		if (target?.owner !== scriptHover?.owner || target?.target !== scriptHover?.target) {
+			if (scriptHover) sendScriptEvent(scriptHover, "pointerleave", event, input, target);
+			if (target) sendScriptEvent(target, "pointerenter", event, input, scriptHover);
+			scriptHover = target;
+		}
+		const { recipient, click } = scriptPointers.route(type, event.pointerId, target, {
+			x: event.clientX,
+			y: event.clientY
+		}, event.type !== "pointerup");
+		if (type === "down" && recipient) {
+			host.setPointerCapture(event.pointerId);
+			host.focus({ preventScroll: true });
+		}
+		if (recipient && type !== "leave") sendScriptEvent(recipient, input.cancelled ? "pointercancel" : `pointer${type}`, event, input);
+		if (click) sendScriptEvent(click, "click", event, input);
+		return recipient !== null;
+	}
+	function handleScriptKey(event) {
+		if (scriptMode !== "interact" || !scriptHover || event.target !== host) return;
+		const input = {
+			type: event.type,
+			target: scriptHover.target,
+			key: event.key,
+			shiftKey: event.shiftKey,
+			altKey: event.altKey,
+			ctrlKey: event.ctrlKey,
+			metaKey: event.metaKey
+		};
+		scripts?.event(scriptHover.owner, input);
+		event.stopPropagation();
+	}
 	function handlePointerDown(event) {
 		if (inViews(event)) return;
 		editor.takeCameraControl();
 		const input = toInput(event);
+		if (scriptPointer("down", event, input)) return;
 		if (options.onPointer?.("down", event, input) === false) return;
 		host.setPointerCapture(event.pointerId);
 		editor.pointerDown(input);
@@ -398,18 +563,21 @@ function mountBoardStage(host, options) {
 	function handlePointerMove(event) {
 		if (inViews(event)) return;
 		const input = toInput(event);
+		if (scriptPointer("move", event, input)) return;
 		if (options.onPointer?.("move", event, input) === false) return;
 		editor.pointerMove(input);
 	}
 	function handlePointerUp(event) {
 		if (inViews(event)) return;
 		const input = toInput(event);
+		if (scriptPointer("up", event, input)) return;
 		if (options.onPointer?.("up", event, input) === false) return;
 		editor.pointerUp(input);
 		if (event.type === "pointercancel" || event.pointerType !== "mouse") editor.pointerLeave();
 	}
 	function handlePointerLeave(event) {
 		if (event.buttons !== 0) return;
+		scriptPointer("leave", event, toInput(event));
 		if (options.onPointer?.("leave", event, toInput(event)) === false) return;
 		editor.pointerLeave();
 	}
@@ -436,6 +604,8 @@ function mountBoardStage(host, options) {
 		else if (!item) editor.beginTextDraft(point);
 	}
 	const listeners = [
+		["keydown", handleScriptKey],
+		["keyup", handleScriptKey],
 		["pointerdown", handlePointerDown],
 		["pointermove", handlePointerMove],
 		["pointerup", handlePointerUp],
@@ -478,13 +648,22 @@ function mountBoardStage(host, options) {
 				return false;
 			}
 			app = instance;
-			instance.canvas.style.cssText = "position:relative;z-index:1;display:block";
+			stopMaintenance = scheduleBoardMaintenance(instance.renderer);
+			Object.assign(instance.canvas.style, {
+				position: "relative",
+				zIndex: "1",
+				display: "block",
+				touchAction: "none"
+			});
 			host.insertBefore(instance.canvas, views.element);
 			world = new Container({
 				isRenderGroup: true,
 				label: "board-world"
 			});
-			const nodes = new Container({ label: "board-nodes" });
+			const nodes = new Container({
+				isRenderGroup: true,
+				label: "board-nodes"
+			});
 			overlay = new Graphics({ label: "board-interaction-overlay" });
 			world.addChild(nodes, overlay);
 			instance.stage.addChild(world);
@@ -494,16 +673,6 @@ function mountBoardStage(host, options) {
 				getRenderer: resolveRenderer,
 				onFarLayerFrame: scheduleTick
 			});
-			sketches = createBoardSketchHost({
-				readModule: async (src) => {
-					const url = await options.source.resolveFileUrl(src);
-					if (!url) throw new Error(`${src} is not available.`);
-					const response = await fetch(url);
-					if (!response.ok) throw new Error(`${src} could not be read.`);
-					return response.text();
-				},
-				onFrame: () => sync()
-			});
 			for (const [type, listener, listenerOptions] of listeners) host.addEventListener(type, listener, listenerOptions);
 			resizeObserver.observe(host);
 			resize();
@@ -518,6 +687,38 @@ function mountBoardStage(host, options) {
 		get theme() {
 			return theme();
 		},
+		setScriptMode(mode) {
+			if (mode === scriptMode) return;
+			scriptMode = mode;
+			scriptLastTick = performance.now();
+			scheduleTick();
+		},
+		resetScripts() {
+			scriptTime = 0;
+			scripts?.invalidate();
+		},
+		invalidateScript(path) {
+			scripts?.invalidate(path);
+		},
+		scriptOutput: (id) => scripts?.output(id) ?? null,
+		async snapshotScripts() {
+			const result = {};
+			await Promise.all([...scriptOutputs.keys()].map(async (id) => {
+				const snapshot = await scripts?.snapshot(id);
+				if (snapshot) result[id] = snapshot;
+			}));
+			return result;
+		},
+		restoreScript(id, snapshot) {
+			scripts?.restore(id, snapshot);
+		},
+		subscribeScripts(listener) {
+			scriptListeners.add(listener);
+			return () => {
+				scriptListeners.delete(listener);
+			};
+		},
+		scriptError: (id) => scripts?.error(id) ?? null,
 		setActive(next) {
 			if (active === next) return;
 			active = next;
@@ -529,6 +730,7 @@ function mountBoardStage(host, options) {
 				return;
 			}
 			player.reset();
+			scriptLastTick = performance.now();
 			resize();
 		},
 		invalidate(invalidation) {
@@ -542,6 +744,9 @@ function mountBoardStage(host, options) {
 		toWorld: (clientX, clientY) => screenToWorld(clientX, clientY, rectOf(), renderCamera()),
 		destroy() {
 			disposed = true;
+			scriptPointers.clear();
+			scriptListeners.clear();
+			stopMaintenance?.();
 			stopEditor();
 			stopAssets();
 			resizeObserver.disconnect();
@@ -550,10 +755,11 @@ function mountBoardStage(host, options) {
 			cancelAnimationFrame(tickFrame);
 			for (const [type, listener] of listeners) host.removeEventListener(type, listener);
 			editor.setPlayedItems(/* @__PURE__ */ new Map());
+			editor.setScriptItems(/* @__PURE__ */ new Map());
 			scene?.destroy(renderContext(theme(), editor.scene, 0));
 			scene = null;
-			sketches?.destroy();
-			sketches = null;
+			scripts?.destroy();
+			scripts = null;
 			background?.destroy({ children: true });
 			background = null;
 			views.destroy();

package/dist/board/stage/texture-pool.js

@@ -34,11 +34,10 @@ async function loadUncachedTexture(url) {
 */
 async function loadImageTexture(url) {
 	try {
-		const asset = /[?&]x-oss-process=/.test(url) ? {
+		return await Assets.load({
 			src: url,
 			parser: "texture"
-		} : url;
-		return await Assets.load(asset);
+		});
 	} catch (workerError) {
 		const errors = [workerError];
 		for (const load of [loadImageElementTexture, loadUncachedTexture]) try {