@neta-art/cohub 11.0.0 → 11.2.0

package/dist/board/stage/stage.js

@@ -1,24 +1,27 @@
 import { applyMatrix, invertMatrix } from "../../protocol/dist/board-layout.js";
+import { featuredTaskArtifact } from "../../protocol/dist/board-task.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 { getBoardCardRenderer } from "../render/renderers/board-renderer-registry.js";
+import { DEFAULT_BOARD_RENDER_LABELS, getBoardCardRenderer } from "../render/renderers/board-renderer-registry.js";
 import { createBoardScriptHost } from "../render/script-host.js";
+import { defaultBoardRenderStyle } from "../render/style.js";
+import { createBoardScriptObservers } from "../model/script-observers.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 { drawBoardOverlay } from "./overlay.js";
 import { createBoardItemViewLayer } from "./views.js";
 import { Application, Container, Graphics, RendererType } from "pixi.js";
 //#region src/board/stage/stage.ts
@@ -41,7 +44,19 @@ function defaultTheme() {
 		colorScheme: "dark"
 	};
 }
+const NO_IDS = /* @__PURE__ */ new Set();
+const MARCH_STEP_MS = 160;
+const MARCH_SMOOTH_MS = 40;
 const ROTATE_CURSOR = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36L21 8M21 3v5h-5' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36L21 8M21 3v5h-5' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, crosshair`;
+const defaultStyles = /* @__PURE__ */ new Map();
+function styleOf(theme) {
+	if (theme.style) return theme.style;
+	const cached = defaultStyles.get(theme.colorScheme);
+	if (cached) return cached;
+	const style = defaultBoardRenderStyle(theme.colorScheme);
+	defaultStyles.set(theme.colorScheme, style);
+	return style;
+}
 function mountBoardStage(host, options) {
 	const { editor, assets } = options;
 	const theme = options.theme ?? defaultTheme;
@@ -56,12 +71,26 @@ function mountBoardStage(host, options) {
 	let scriptTime = 0;
 	let scriptLastTick = performance.now();
 	const scriptOutputs = /* @__PURE__ */ new Map();
+	const interactiveScripts = /* @__PURE__ */ new Set();
+	const screenScripts = /* @__PURE__ */ new Set();
+	const scriptObservers = createBoardScriptObservers((owner, event) => scripts?.event(owner, event));
+	let stopTransforms = null;
+	function syncTransformSubscription() {
+		if (scriptObservers.transforms && !stopTransforms) stopTransforms = editor.subscribeTransforms((event) => {
+			if (active && scriptMode !== "paused") scriptObservers.transform(editor.document, event);
+		});
+		else if (!scriptObservers.transforms && stopTransforms) {
+			stopTransforms();
+			stopTransforms = null;
+		}
+	}
 	const scriptListeners = /* @__PURE__ */ new Set();
 	let scriptVersion = 0;
 	let composedVersion = -1;
 	let composedZoom = 0;
 	let composedPlayhead = "";
 	let composedMoving = false;
+	let composedGesture = false;
 	let composedDocument = null;
 	let scriptHover = null;
 	const scriptPointers = createBoardScriptPointerRouter();
@@ -70,6 +99,10 @@ function mountBoardStage(host, options) {
 	let disposed = false;
 	let renderFrame = 0;
 	let tickFrame = 0;
+	let cardTickFrame = 0;
+	let cardTickTimer = null;
+	let cardTickDue = 0;
+	const staleIds = /* @__PURE__ */ new Set();
 	let resizeFrame = 0;
 	let cardEpoch = 0;
 	let assetVersion = 0;
@@ -129,6 +162,19 @@ function mountBoardStage(host, options) {
 		}
 		if (sizes.length > 0) editor.adoptMediaNaturalSizes(sizes);
 	}
+	let lifted = null;
+	function liftedIds() {
+		const interaction = editor.interaction;
+		if (interaction.type !== "translating" || !interaction.moved) {
+			lifted = null;
+			return NO_IDS;
+		}
+		if (lifted?.origin !== interaction.origin) lifted = {
+			origin: interaction.origin,
+			ids: new Set(interaction.origin.keys())
+		};
+		return lifted.ids;
+	}
 	function renderContext(current, renderScene, time) {
 		const interaction = editor.interaction;
 		return {
@@ -139,11 +185,17 @@ function mountBoardStage(host, options) {
 			selectedIds: new Set(editor.selection),
 			hoveredId: editor.hoverId,
 			resizingIds: interaction.type === "resizing" ? new Set(interaction.origin.keys()) : /* @__PURE__ */ new Set(),
+			liftedIds: liftedIds(),
 			palette: current.palette,
 			colors: current.colors,
 			colorScheme: current.colorScheme,
+			style: styleOf(current),
+			themeKey: current.key,
 			rendererType: app?.renderer.type === RendererType.CANVAS ? "canvas" : "gpu",
 			zoom: renderCamera().zoom,
+			reducedMotion: options.reducedMotion?.() ?? false,
+			labels: options.labels?.() ?? DEFAULT_BOARD_RENDER_LABELS,
+			taskRun: options.taskRun ?? (() => null),
 			assetKey: assets.assetKey,
 			getTexture: (key) => assets.getTexture(key),
 			hasError: (key) => assets.hasError(key),
@@ -253,6 +305,72 @@ function mountBoardStage(host, options) {
 			});
 		}
 	}
+	let march = 0;
+	let marchTimer = null;
+	function stopMarch() {
+		if (marchTimer !== null) clearTimeout(marchTimer);
+		marchTimer = null;
+	}
+	function scheduleMarch(style) {
+		const stepped = style.motion === "stepped";
+		if (marchTimer !== null || !active || disposed) return;
+		marchTimer = setTimeout(() => {
+			marchTimer = null;
+			march += stepped ? 2 : 1;
+			drawInteraction();
+			scheduleRender();
+		}, stepped ? MARCH_STEP_MS : MARCH_SMOOTH_MS);
+	}
+	function drawInteraction() {
+		if (!overlay) return;
+		const current = theme();
+		const style = styleOf(current);
+		const renderScene = editor.scene;
+		const camera = renderCamera();
+		const interaction = editor.interaction;
+		const selected = editor.selection.flatMap((id) => renderScene.get(id) ?? []);
+		const single = selected.length === 1 ? selected[0] : void 0;
+		let arrowEndpoints;
+		if (single?.type === "arrow" && !single.locked) {
+			const resolved = resolveSceneArrow(single, renderScene);
+			arrowEndpoints = [
+				resolved.start.point,
+				resolved.mid,
+				resolved.end.point
+			];
+		}
+		const hoverId = interaction.type === "idle" ? editor.hoverId : null;
+		const hovered = hoverId && !editor.selection.includes(hoverId) ? renderScene.get(hoverId) ?? null : null;
+		overlay.clear();
+		drawBoardOverlay(overlay, {
+			zoom: camera.zoom,
+			pointerType: editor.pointerType,
+			palette: current.palette,
+			style,
+			scene: renderScene,
+			hovered,
+			selected,
+			march,
+			marquee: editor.marquee,
+			transform: editor.selectionTransform,
+			controls: editor.tool === "select",
+			hoveredControl: editor.hoveredTransformControl,
+			rotationPointer: interaction.type === "rotating" ? interaction.current : null,
+			arrowEndpoints,
+			ports: editor.connectionPorts,
+			hoveredPort: editor.hoveredConnectionPort,
+			bindTarget: editor.bindTargetFrame ?? editor.arrowDraft?.targetFrame ?? null
+		});
+		options.drawOverlay?.(overlay, {
+			zoom: camera.zoom,
+			theme: current,
+			scene: renderScene
+		});
+		drawTransient(overlay, current);
+		editor.controlOutset = style.selection.outset;
+		if (style.selection.dash > 0 && selected.length > 0 && !(options.reducedMotion?.() ?? false)) scheduleMarch(style);
+		else stopMarch();
+	}
 	function cursorFor() {
 		if (scriptMode === "interact" && scriptHover) {
 			const output = scriptOutputs.get(scriptHover.owner);
@@ -282,6 +400,28 @@ function mountBoardStage(host, options) {
 			app?.render();
 		});
 	}
+	function scheduleCardTick(wait) {
+		if (!active || disposed) return;
+		const due = performance.now() + wait;
+		if (cardTickFrame || cardTickTimer !== null && cardTickDue <= due) return;
+		if (cardTickTimer !== null) clearTimeout(cardTickTimer);
+		cardTickTimer = null;
+		if (wait > 0) {
+			cardTickDue = due;
+			cardTickTimer = setTimeout(() => {
+				cardTickTimer = null;
+				scheduleCardTick(0);
+			}, wait);
+			return;
+		}
+		cardTickFrame = requestAnimationFrame(() => {
+			cardTickFrame = 0;
+			if (!scene) return;
+			const next = scene.tick(performance.now());
+			scheduleRender();
+			if (next !== null) scheduleCardTick(next);
+		});
+	}
 	function scheduleTick() {
 		if (tickFrame || !active || disposed) return;
 		tickFrame = requestAnimationFrame(() => {
@@ -289,6 +429,16 @@ function mountBoardStage(host, options) {
 			sync();
 		});
 	}
+	function cancelScriptPointers(owner, retained) {
+		scriptPointers.cancelScripts((pointerId, target) => {
+			scripts?.event(target.owner, {
+				type: "pointercancel",
+				target: target.target,
+				pointerId
+			});
+		}, owner, retained);
+		if (!retained || scriptHover && scriptHover.owner === owner && !Object.hasOwn(retained, scriptHover.target)) scriptHover = null;
+	}
 	function createScripts() {
 		return createBoardScriptHost({
 			host,
@@ -310,8 +460,20 @@ function mountBoardStage(host, options) {
 			onOutput: (id, output) => {
 				if (output) {
 					prepareBoardScriptOutput(editor.document, id, output);
+					cancelScriptPointers(id, output.hits);
 					scriptOutputs.set(id, output);
-				} else scriptOutputs.delete(id);
+					if (Object.keys(output.hits).length) interactiveScripts.add(id);
+					else interactiveScripts.delete(id);
+					if (output.space === "screen" && Object.keys(output.items).length) screenScripts.add(id);
+					else screenScripts.delete(id);
+				} else {
+					cancelScriptPointers(id);
+					scriptOutputs.delete(id);
+					interactiveScripts.delete(id);
+					screenScripts.delete(id);
+				}
+				scriptObservers.update(id, output);
+				syncTransformSubscription();
 				scriptVersion++;
 				scheduleTick();
 			},
@@ -340,6 +502,10 @@ function mountBoardStage(host, options) {
 			const previous = scripts;
 			scripts = null;
 			previous.destroy();
+			scriptObservers.clear();
+			syncTransformSubscription();
+			interactiveScripts.clear();
+			screenScripts.clear();
 			scriptOutputs.clear();
 			editor.setScriptItems(/* @__PURE__ */ new Map());
 			scriptHover = null;
@@ -354,38 +520,48 @@ function mountBoardStage(host, options) {
 		const moving = new Map(previews);
 		for (const [id, item] of frame.items) moving.set(id, item);
 		editor.setPlayedItems(moving);
+		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, editor.scene) : null;
+		const camera = renderCamera();
 		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) {
+			if (scriptVersion !== composedVersion || composedDocument !== editor.document || screenScripts.size > 0 && editor.gestureActive || composedGesture || moving.size || composedMoving || composedZoom !== 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 composed = composeBoardScriptItems(editor.document, editor.scene, scriptOutputs, animationItems, camera, (owner, error) => scripts?.fault(owner, error instanceof Error ? error.message : String(error)), editor.gestureActive ? editor.scene.layout : void 0);
 				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;
+				composedZoom = camera.zoom;
+				composedGesture = screenScripts.size > 0 && editor.gestureActive;
 				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;
+			if (scriptMode !== "paused" && scriptObservers.size) scriptObservers.sync(editor.document, editor.selection, () => ({
+				camera: { ...camera },
+				...surface,
+				safeRect: options.safeRect?.() ?? {
+					x: 0,
+					y: 0,
+					...surface
+				}
+			}));
 			scripts.sync(editor.document, renderScene, camera, scriptTime, scriptMode === "interact", visibleIds());
 		}
 		world.position.set(camera.x, camera.y);
@@ -420,42 +596,13 @@ function mountBoardStage(host, options) {
 				current.key,
 				textZoomBucket(camera.zoom)
 			].join("|"),
+			staleIds,
 			structureVersion: editor.structureVersion,
 			geometryVersion: editor.geometryVersion,
 			gestureActive: editor.gestureActive && editor.interaction.type !== "panning"
 		});
-		const single = editor.selection.length === 1 ? renderScene.get(editor.selection[0]) : null;
-		let arrowEndpoints;
-		if (single?.type === "arrow" && !single.locked) {
-			const resolved = resolveSceneArrow(single, renderScene);
-			arrowEndpoints = [
-				resolved.start.point,
-				resolved.mid,
-				resolved.end.point
-			];
-		}
-		const interaction = editor.interaction;
-		scene.drawOverlay({
-			zoom: camera.zoom,
-			pointerType: editor.pointerType,
-			marquee: editor.marquee,
-			selection: editor.selection,
-			transform: editor.selectionTransform,
-			controls: editor.tool === "select",
-			hoveredControl: editor.hoveredTransformControl,
-			rotationPointer: interaction.type === "rotating" ? interaction.current : null,
-			arrowEndpoints,
-			ports: editor.connectionPorts,
-			hoveredPort: editor.hoveredConnectionPort,
-			arrowDraft: null,
-			bindTarget: editor.bindTargetFrame ?? editor.arrowDraft?.targetFrame ?? null
-		}, current.palette);
-		options.drawOverlay?.(overlay, {
-			zoom: camera.zoom,
-			theme: current,
-			scene: renderScene
-		});
-		drawTransient(overlay, current);
+		staleIds.clear();
+		drawInteraction();
 		views.sync({
 			ids,
 			scene: renderScene,
@@ -467,6 +614,8 @@ function mountBoardStage(host, options) {
 		if (nextCursor !== cursor) host.style.cursor = cursor = nextCursor;
 		scheduleRender();
 		if (frame.running || scene.animated || scriptMode !== "paused" && scripts?.animated) scheduleTick();
+		const cardWait = scene.tick(performance.now());
+		if (cardWait !== null) scheduleCardTick(cardWait);
 	}
 	function resize() {
 		cancelAnimationFrame(resizeFrame);
@@ -517,7 +666,7 @@ function mountBoardStage(host, options) {
 		});
 	}
 	function scriptPointer(type, event, input) {
-		if (!scriptPointers.needsRouting(event.pointerId, scripts !== null)) return false;
+		if (!scriptPointers.needsRouting(event.pointerId, interactiveScripts.size > 0)) 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) {
@@ -525,6 +674,7 @@ function mountBoardStage(host, options) {
 			if (target) sendScriptEvent(target, "pointerenter", event, input, scriptHover);
 			scriptHover = target;
 		}
+		const consumed = scriptPointers.owner(event.pointerId) === "script";
 		const { recipient, click } = scriptPointers.route(type, event.pointerId, target, {
 			x: event.clientX,
 			y: event.clientY
@@ -535,10 +685,10 @@ function mountBoardStage(host, options) {
 		}
 		if (recipient && type !== "leave") sendScriptEvent(recipient, input.cancelled ? "pointercancel" : `pointer${type}`, event, input);
 		if (click) sendScriptEvent(click, "click", event, input);
-		return recipient !== null;
+		return consumed || recipient !== null;
 	}
 	function handleScriptKey(event) {
-		if (scriptMode !== "interact" || !scriptHover || event.target !== host) return;
+		if (scriptMode !== "interact" || !scriptHover || event.target !== host || !scriptOutputs.get(scriptHover.owner)?.listens.includes(event.type)) return;
 		const input = {
 			type: event.type,
 			target: scriptHover.target,
@@ -689,6 +839,7 @@ function mountBoardStage(host, options) {
 		},
 		setScriptMode(mode) {
 			if (mode === scriptMode) return;
+			if (mode !== "interact") cancelScriptPointers();
 			scriptMode = mode;
 			scriptLastTick = performance.now();
 			scheduleTick();
@@ -723,10 +874,16 @@ function mountBoardStage(host, options) {
 			if (active === next) return;
 			active = next;
 			if (!active) {
+				stopMarch();
+				cancelScriptPointers();
 				cancelAnimationFrame(renderFrame);
 				cancelAnimationFrame(tickFrame);
+				cancelAnimationFrame(cardTickFrame);
+				if (cardTickTimer !== null) clearTimeout(cardTickTimer);
 				renderFrame = 0;
 				tickFrame = 0;
+				cardTickFrame = 0;
+				cardTickTimer = null;
 				return;
 			}
 			player.reset();
@@ -738,13 +895,17 @@ function mountBoardStage(host, options) {
 				cardEpoch += 1;
 				requestAssets = true;
 			}
+			for (const id of invalidation?.items ?? []) staleIds.add(id);
 			scheduleTick();
 		},
 		isMaterialized: (id) => Boolean(scene?.getNode(id)),
 		toWorld: (clientX, clientY) => screenToWorld(clientX, clientY, rectOf(), renderCamera()),
 		destroy() {
 			disposed = true;
+			stopMarch();
 			scriptPointers.clear();
+			stopTransforms?.();
+			scriptObservers.clear();
 			scriptListeners.clear();
 			stopMaintenance?.();
 			stopEditor();
@@ -753,6 +914,9 @@ function mountBoardStage(host, options) {
 			cancelAnimationFrame(resizeFrame);
 			cancelAnimationFrame(renderFrame);
 			cancelAnimationFrame(tickFrame);
+			cancelAnimationFrame(cardTickFrame);
+			if (cardTickTimer !== null) clearTimeout(cardTickTimer);
+			cardTickTimer = null;
 			for (const [type, listener] of listeners) host.removeEventListener(type, listener);
 			editor.setPlayedItems(/* @__PURE__ */ new Map());
 			editor.setScriptItems(/* @__PURE__ */ new Map());