@neta-art/cohub 9.0.0 → 10.0.0

package/dist/board/editor/query.js

@@ -0,0 +1,201 @@
+import { rectContainsPoint, unionRects } from "../model/geometry.js";
+import { arrowHitRadius, arrowPathBounds, distanceToArrow, resolveSceneArrow } from "../model/arrow-geometry.js";
+import { createSpatialIndex } from "./spatial.js";
+//#region src/board/editor/query.ts
+const NO_IDS = /* @__PURE__ */ new Set();
+function createQueryModule(ctx) {
+	const { state, registry } = ctx;
+	const spatial = createSpatialIndex();
+	let indexedScene = null;
+	let spatialDirty = null;
+	let mediaIdsByPath = null;
+	function invalidate(ids) {
+		if (!ids) {
+			spatialDirty = null;
+			mediaIdsByPath = null;
+			return;
+		}
+		if (!spatialDirty) return;
+		const scene = state.scene;
+		const affected = /* @__PURE__ */ new Set();
+		const pending = [...ids];
+		while (pending.length) {
+			const id = pending.pop();
+			if (affected.has(id)) continue;
+			affected.add(id);
+			spatialDirty.add(id);
+			pending.push(...scene.children(id), ...scene.binders(id));
+		}
+	}
+	function ensureSpatial() {
+		const scene = state.scene;
+		if (indexedScene === scene) return;
+		const dirty = indexedScene ? spatialDirty : null;
+		indexedScene = scene;
+		spatialDirty = /* @__PURE__ */ new Set();
+		if (dirty === null) {
+			const entries = scene.items.map((item, order) => ({
+				id: item.id,
+				order,
+				rect: boundsOf(item)
+			}));
+			spatial.rebuild(entries);
+			return;
+		}
+		const upserts = /* @__PURE__ */ new Map();
+		for (const id of dirty) {
+			const item = scene.get(id);
+			upserts.set(id, item ? {
+				id,
+				order: scene.indexOf(id),
+				rect: boundsOf(item)
+			} : null);
+		}
+		spatial.upsert(upserts);
+	}
+	function boundsOf(item) {
+		if (item.type === "arrow") return arrowPathBounds(resolveSceneArrow(item, state.scene), item.style.strokeWidth);
+		return registry.bounds(item);
+	}
+	function itemById(id) {
+		return state.scene.get(id) ?? null;
+	}
+	function isLocked(item) {
+		return item.locked === true;
+	}
+	function unlockedIds(ids) {
+		const result = [];
+		for (const id of ids) {
+			const item = state.scene.get(id);
+			if (item && !isLocked(item)) result.push(id);
+		}
+		return result;
+	}
+	function rootsOf(ids) {
+		const scene = state.scene;
+		const set = new Set(ids);
+		return [...set].filter((id) => {
+			let cursor = scene.get(id)?.parent;
+			for (let depth = 0; cursor && depth < 64; depth += 1) {
+				if (set.has(cursor)) return false;
+				cursor = scene.get(cursor)?.parent;
+			}
+			return true;
+		});
+	}
+	function withSubtrees(ids) {
+		const result = /* @__PURE__ */ new Set();
+		for (const id of ids) {
+			result.add(id);
+			for (const child of state.scene.descendants(id)) result.add(child);
+		}
+		return result;
+	}
+	function mediaIdsForPath(path) {
+		if (!mediaIdsByPath) {
+			mediaIdsByPath = /* @__PURE__ */ new Map();
+			for (const item of state.scene.items) {
+				if (item.type !== "image" && item.type !== "video" && item.type !== "audio") continue;
+				const src = item.props.src;
+				const ids = mediaIdsByPath.get(src) ?? /* @__PURE__ */ new Set();
+				ids.add(item.id);
+				mediaIdsByPath.set(src, ids);
+			}
+		}
+		return mediaIdsByPath.get(path) ?? NO_IDS;
+	}
+	function contentBounds(ids) {
+		const scene = state.scene;
+		const list = ids ? [...ids].flatMap((id) => scene.get(id) ? [scene.get(id)] : []) : scene.items;
+		return unionRects(list.map(boundsOf));
+	}
+	function idsInRect(rect) {
+		ensureSpatial();
+		return spatial.idsInRect(rect);
+	}
+	function frameAt(point, exclude) {
+		ensureSpatial();
+		for (const id of spatial.idsAtPoint(point)) {
+			const item = state.scene.get(id);
+			if (item?.type !== "frame" || exclude?.has(id)) continue;
+			if (registry.hitTest(item, point)) return item;
+		}
+		return null;
+	}
+	function hitsItem(item, point) {
+		if (item.type === "arrow") {
+			const resolved = resolveSceneArrow(item, state.scene);
+			return distanceToArrow(resolved, point) <= arrowHitRadius(item.style.strokeWidth) / Math.min(1, state.camera.zoom);
+		}
+		return registry.hitTest(item, point);
+	}
+	function itemAt(point, exclude) {
+		ensureSpatial();
+		for (const id of spatial.idsAtPoint(point)) {
+			const item = state.scene.get(id);
+			if (item && !exclude?.has(id) && hitsItem(item, point)) return item;
+		}
+		return null;
+	}
+	function labelItemAt(point) {
+		ensureSpatial();
+		const { scene, selection, camera } = state;
+		const nearby = spatial.idsAtPoint(point);
+		const candidates = selection.length === 1 ? [...selection, ...nearby] : nearby;
+		for (const id of new Set(candidates)) {
+			const item = scene.get(id);
+			if (!item || isLocked(item)) continue;
+			if (item.type === "frame" && rectContainsPoint({
+				x: item.frame.x,
+				y: item.frame.y - 22,
+				width: Math.max(48, item.frame.width * .5),
+				height: 24
+			}, point)) return item;
+			if (item.type === "arrow") {
+				const resolved = resolveSceneArrow(item, scene);
+				const radius = Math.max(10, (item.props.fontSize ?? 14) * .9) / Math.min(1, camera.zoom);
+				if (Math.hypot(resolved.mid.x - point.x, resolved.mid.y - point.y) <= radius) return item;
+			}
+		}
+		return null;
+	}
+	function arrowHandleAt(point) {
+		if (state.selection.length !== 1) return null;
+		const item = state.scene.get(state.selection[0]);
+		if (item?.type !== "arrow" || isLocked(item)) return null;
+		const resolved = resolveSceneArrow(item, state.scene);
+		const radius = 10 / state.camera.zoom;
+		const distance = (target) => Math.hypot(target.x - point.x, target.y - point.y);
+		const start = distance(resolved.start.point);
+		const end = distance(resolved.end.point);
+		const mid = distance(resolved.mid);
+		if (start <= radius && start <= end && start <= mid) return "start";
+		if (end <= radius && end <= mid) return "end";
+		if (mid <= radius) return "mid";
+		return null;
+	}
+	function connectTargetAt(point, exclude = NO_IDS) {
+		const item = itemAt(point, exclude);
+		if (!item || isLocked(item) || item.type === "arrow") return null;
+		return registry.capabilities(item).canConnect ? item.id : null;
+	}
+	return {
+		invalidate,
+		boundsOf,
+		itemById,
+		isLocked,
+		unlockedIds,
+		rootsOf,
+		withSubtrees,
+		mediaIdsForPath,
+		contentBounds,
+		idsInRect,
+		frameAt,
+		itemAt,
+		labelItemAt,
+		arrowHandleAt,
+		connectTargetAt
+	};
+}
+//#endregion
+export { createQueryModule };

package/dist/board/editor/remote.d.ts

@@ -0,0 +1,11 @@
+import { BoardDocument } from "../../protocol/dist/board-model.js";
+import "../model/index.js";
+import { EditorContext } from "./context.js";
+//#region src/board/editor/remote.d.ts
+declare function createRemoteModule(ctx: EditorContext): {
+  loadDocument: (next: BoardDocument, key?: string) => void;
+  flushPending: () => void;
+};
+type RemoteModule = ReturnType<typeof createRemoteModule>;
+//#endregion
+export { RemoteModule, createRemoteModule };

package/dist/board/editor/remote.js

@@ -0,0 +1,55 @@
+//#region src/board/editor/remote.ts
+function createRemoteModule(ctx) {
+	const { state } = ctx;
+	let currentKey = ctx.options.key;
+	let pending = null;
+	function apply(next, key) {
+		const sameDocument = key !== void 0 && key === currentKey;
+		currentKey = key;
+		pending = null;
+		if (sameDocument) {
+			const { base } = state;
+			const added = Object.keys(next.items).filter((id) => !base.items[id]);
+			ctx.document.markAdded(added);
+			const changed = /* @__PURE__ */ new Set([...added, ...Object.keys(base.items).filter((id) => next.items[id] !== base.items[id])]);
+			const draftTextId = state.draftTextId;
+			const keep = draftTextId ? ctx.document.draftItem(draftTextId) : void 0;
+			ctx.document.adopt(next, changed);
+			if (draftTextId && keep) ctx.document.writeDraft(/* @__PURE__ */ new Map([[draftTextId, keep]]), true);
+			state.selection = state.selection.filter((id) => state.scene.get(id));
+			if (state.playhead && !next.animations[state.playhead.animationId]) ctx.animation.setPlayhead(null);
+			return;
+		}
+		state.playhead = null;
+		state.recording = false;
+		ctx.document.reset(next);
+		state.undoStack = [];
+		state.redoStack = [];
+		state.selection = [];
+		state.editingId = null;
+		state.draftTextId = null;
+		state.saveError = null;
+	}
+	function loadDocument(next, key) {
+		if (next === state.base) return;
+		if (key !== void 0 && key === currentKey && (state.interaction.type !== "idle" || state.editingId)) {
+			pending = {
+				document: next,
+				key
+			};
+			return;
+		}
+		apply(next, key);
+	}
+	function flushPending() {
+		if (!pending) return;
+		const { document, key } = pending;
+		apply(document, key);
+	}
+	return {
+		loadDocument,
+		flushPending
+	};
+}
+//#endregion
+export { createRemoteModule };

package/dist/board/editor/selection-transform.d.ts

@@ -0,0 +1,24 @@
+import { BoardFrame } from "../../protocol/dist/board-layout.js";
+import { Rect, ResizeHandle, WorldPoint } from "../model/geometry.js";
+import { BoardSceneItem } from "../model/scene.js";
+import { BoardItemResizeMode } from "../model/items/definition.js";
+import { BoardRegistry } from "../model/items/registry.js";
+import "../model/index.js";
+//#region src/board/editor/selection-transform.d.ts
+type BoardTransformControl = {
+  kind: "resize";
+  handle: ResizeHandle;
+} | {
+  kind: "rotate";
+};
+declare const RESIZE_CURSORS: readonly ["ew-resize", "nwse-resize", "ns-resize", "nesw-resize"];
+declare function resizeCursorForHandle(handle: ResizeHandle, rotation: number): (typeof RESIZE_CURSORS)[number];
+type BoardSelectionTransform = {
+  frame: BoardFrame;
+  resizeMode: BoardItemResizeMode;
+  canRotate: boolean;
+};
+declare function resolveSelectionTransform(registry: BoardRegistry, items: BoardSceneItem[], bounds: Rect | null): BoardSelectionTransform | null;
+declare function selectionTransformControlAt(transform: BoardSelectionTransform | null, point: WorldPoint, zoom: number, pointerType: string): BoardTransformControl | null;
+//#endregion
+export { BoardSelectionTransform, BoardTransformControl, resizeCursorForHandle, resolveSelectionTransform, selectionTransformControlAt };

package/dist/board/editor/selection-transform.js

@@ -0,0 +1,81 @@
+import { CORNER_RESIZE_HANDLES, frameCornerRotationHandleAt, frameEdgeHandleAt, frameHandlePosition, rotationHandlePosition } from "../model/geometry.js";
+//#region src/board/editor/selection-transform.ts
+const HANDLE_ANGLE = {
+	e: 0,
+	w: 0,
+	se: 45,
+	nw: 45,
+	n: 90,
+	s: 90,
+	ne: 135,
+	sw: 135
+};
+const RESIZE_CURSORS = [
+	"ew-resize",
+	"nwse-resize",
+	"ns-resize",
+	"nesw-resize"
+];
+function resizeCursorForHandle(handle, rotation) {
+	const angle = HANDLE_ANGLE[handle] + rotation;
+	const bucket = (Math.round(angle / 45) % 4 + 4) % 4;
+	return RESIZE_CURSORS[bucket] ?? "ew-resize";
+}
+function resolveSelectionTransform(registry, items, bounds) {
+	if (!bounds || items.length === 0) return null;
+	const frame = items.length === 1 ? items[0]?.frame : {
+		...bounds,
+		rotation: 0
+	};
+	if (!frame) return null;
+	let canResize = true;
+	let canRotate = true;
+	let singleResizeMode = "none";
+	for (let index = 0; index < items.length; index += 1) {
+		const item = items[index];
+		if (!item) continue;
+		const capabilities = registry.capabilities(item);
+		const resizeMode = registry.resizeMode(item);
+		if (index === 0) singleResizeMode = resizeMode;
+		if (item.locked || resizeMode === "none") canResize = false;
+		if (item.locked || !capabilities.canRotate) canRotate = false;
+	}
+	return {
+		frame,
+		resizeMode: canResize ? items.length === 1 ? singleResizeMode : "uniform" : "none",
+		canRotate
+	};
+}
+function controlHitRadius(pointerType) {
+	if (pointerType === "touch") return 20;
+	if (pointerType === "pen") return 12;
+	return 8;
+}
+function selectionTransformControlAt(transform, point, zoom, pointerType) {
+	if (!transform) return null;
+	const screenRadius = controlHitRadius(pointerType);
+	const radius = screenRadius / Math.max(zoom, 1e-4);
+	if (transform.resizeMode !== "none") for (const handle of CORNER_RESIZE_HANDLES) {
+		const position = frameHandlePosition(transform.frame, handle);
+		if (Math.hypot(position.x - point.x, position.y - point.y) <= radius) return {
+			kind: "resize",
+			handle
+		};
+	}
+	if (transform.canRotate) {
+		if (pointerType === "touch" || transform.resizeMode === "none") {
+			const position = rotationHandlePosition(transform.frame, zoom);
+			if (Math.hypot(position.x - point.x, position.y - point.y) <= radius) return { kind: "rotate" };
+		} else if (frameCornerRotationHandleAt(transform.frame, point, zoom, screenRadius)) return { kind: "rotate" };
+	}
+	if (transform.resizeMode === "free") {
+		const handle = frameEdgeHandleAt(transform.frame, point, zoom, screenRadius);
+		if (handle) return {
+			kind: "resize",
+			handle
+		};
+	}
+	return null;
+}
+//#endregion
+export { resizeCursorForHandle, resolveSelectionTransform, selectionTransformControlAt };

package/dist/board/editor/selection.d.ts

@@ -0,0 +1,33 @@
+import { BoardItem } from "../../protocol/dist/board-model.js";
+import { BoardFrame } from "../../protocol/dist/board-layout.js";
+import { Rect } from "../model/geometry.js";
+import { BoardSceneItem } from "../model/scene.js";
+import "../model/index.js";
+import { AlignMode, DistributeAxis } from "./align.js";
+import { BoardSelectionTransform } from "./selection-transform.js";
+import { EditorContext } from "./context.js";
+//#region src/board/editor/selection.d.ts
+declare function createSelectionModule(ctx: EditorContext): {
+  items: () => BoardSceneItem[];
+  bounds: () => Rect | null;
+  transform: () => BoardSelectionTransform | null;
+  set: (ids: string[]) => void;
+  toggle: (id: string) => void;
+  clear: () => void;
+  selectAll: () => void;
+  framesFor: (ids: Iterable<string>) => Map<string, BoardFrame>;
+  placed: (frames: ReadonlyMap<string, BoardFrame>) => Map<string, BoardItem>;
+  movable: () => string[];
+  nudge: (dx: number, dy: number, large: boolean) => void;
+  align: (mode: AlignMode) => void;
+  distribute: (axis: DistributeAxis) => void;
+  toggleLock: () => void;
+  setColor: (color: string) => void;
+  setStyle: (style: Partial<BoardItem["style"]>) => void;
+  setProps: (type: string, props: Record<string, unknown>) => void;
+  bringToFront: () => void;
+  sendToBack: () => void;
+};
+type SelectionModule = ReturnType<typeof createSelectionModule>;
+//#endregion
+export { SelectionModule, createSelectionModule };

package/dist/board/editor/selection.js

@@ -0,0 +1,196 @@
+import { selectionBounds } from "../model/geometry.js";
+import { sceneItemToItem } from "../model/scene.js";
+import { alignFrames, distributeFrames } from "./align.js";
+import { resolveSelectionTransform } from "./selection-transform.js";
+import { memo } from "./state.js";
+//#region src/board/editor/selection.ts
+const NUDGE_STEP = 1;
+const NUDGE_STEP_LARGE = 10;
+function createSelectionModule(ctx) {
+	const { state, registry } = ctx;
+	const items = memo(() => [state.scene, state.selection], (scene, selection) => {
+		const result = [];
+		for (const id of selection) {
+			const item = scene.get(id);
+			if (item) result.push(item);
+		}
+		return result;
+	});
+	const bounds = memo(() => [items()], (selected) => selectionBounds(selected.map((item) => item.frame)));
+	const transform = memo(() => [items(), bounds()], (selected, rect) => resolveSelectionTransform(registry, selected, rect));
+	function set(ids) {
+		state.selection = ids;
+	}
+	function toggle(id) {
+		const { selection } = state;
+		state.selection = selection.includes(id) ? selection.filter((selected) => selected !== id) : [...selection, id];
+	}
+	function framesFor(ids) {
+		const frames = /* @__PURE__ */ new Map();
+		for (const id of ids) {
+			const frame = state.scene.get(id)?.frame;
+			if (frame) frames.set(id, { ...frame });
+		}
+		return frames;
+	}
+	function placed(frames) {
+		const changes = /* @__PURE__ */ new Map();
+		for (const [id, frame] of frames) {
+			const item = state.scene.get(id);
+			if (item) changes.set(id, sceneItemToItem({
+				...item,
+				frame
+			}, state.scene.layout));
+		}
+		return changes;
+	}
+	function movable() {
+		return ctx.query.rootsOf(ctx.query.unlockedIds(state.selection));
+	}
+	function nudge(dx, dy, large) {
+		const ids = movable();
+		if (ids.length === 0) return;
+		const step = large ? NUDGE_STEP_LARGE : NUDGE_STEP;
+		const frames = /* @__PURE__ */ new Map();
+		for (const [id, frame] of framesFor(ids)) frames.set(id, {
+			...frame,
+			x: frame.x + dx * step,
+			y: frame.y + dy * step
+		});
+		ctx.document.commitItems(placed(frames));
+	}
+	function align(mode) {
+		const ids = movable();
+		if (ids.length < 2) return;
+		ctx.document.commitItems(placed(alignFrames(framesFor(ids), mode)));
+	}
+	function distribute(axis) {
+		const ids = movable();
+		if (ids.length < 3) return;
+		ctx.document.commitItems(placed(distributeFrames(framesFor(ids), axis)));
+	}
+	function edit(update, ids = ctx.query.unlockedIds(state.selection)) {
+		const changes = /* @__PURE__ */ new Map();
+		for (const id of ids) {
+			const item = ctx.document.displayItem(id);
+			const next = item ? update(item) : null;
+			if (next && next !== item) changes.set(id, next);
+		}
+		ctx.document.commitItems(changes);
+	}
+	function toggleLock() {
+		if (state.selection.length === 0) return;
+		const lock = items().some((item) => !item.locked);
+		edit((item) => {
+			if (lock) return {
+				...item,
+				locked: true
+			};
+			const { locked: _locked, ...unlocked } = item;
+			return unlocked;
+		}, state.selection);
+	}
+	function setColor(color) {
+		edit((item) => {
+			switch (item.type) {
+				case "text":
+				case "effect": return {
+					...item,
+					style: {
+						...item.style,
+						fill: color
+					}
+				};
+				case "shape":
+				case "frame": return {
+					...item,
+					style: {
+						...item.style,
+						stroke: color,
+						...item.style.fill ? { fill: color } : {}
+					}
+				};
+				case "draw":
+				case "arrow": return {
+					...item,
+					style: {
+						...item.style,
+						stroke: color
+					}
+				};
+				default: return null;
+			}
+		});
+	}
+	function setStyle(style) {
+		edit((item) => ({
+			...item,
+			style: {
+				...item.style,
+				...style
+			}
+		}));
+	}
+	function setProps(type, props) {
+		edit((item) => {
+			if (item.type !== type) return null;
+			const next = {
+				...item.props,
+				...props
+			};
+			const valid = registry.validateProps(type, next);
+			if (!valid.ok) throw new Error(valid.message);
+			return {
+				...item,
+				props: next
+			};
+		});
+	}
+	function restack(front) {
+		const { scene } = state;
+		const ids = ctx.query.rootsOf(state.selection);
+		if (ids.length === 0) return;
+		const changes = /* @__PURE__ */ new Map();
+		const byParent = /* @__PURE__ */ new Map();
+		for (const id of ids) {
+			const parent = scene.get(id)?.parent;
+			byParent.set(parent, [...byParent.get(parent) ?? [], id]);
+		}
+		for (const [parent, members] of byParent) {
+			const siblings = scene.children(parent).map((id) => ctx.document.displayItem(id)?.z ?? 0);
+			let z = front ? Math.max(0, ...siblings) + 1 : Math.min(0, ...siblings) - members.length;
+			const ordered = members.sort((a, b) => scene.indexOf(a) - scene.indexOf(b));
+			for (const id of ordered) {
+				const item = ctx.document.displayItem(id);
+				if (item) changes.set(id, {
+					...item,
+					z: z++
+				});
+			}
+		}
+		ctx.document.commitItems(changes);
+	}
+	return {
+		items,
+		bounds,
+		transform,
+		set,
+		toggle,
+		clear: () => set([]),
+		selectAll: () => set(state.scene.children(void 0).slice()),
+		framesFor,
+		placed,
+		movable,
+		nudge,
+		align,
+		distribute,
+		toggleLock,
+		setColor,
+		setStyle,
+		setProps,
+		bringToFront: () => restack(true),
+		sendToBack: () => restack(false)
+	};
+}
+//#endregion
+export { createSelectionModule };

package/dist/board/editor/snapping.d.ts

@@ -0,0 +1,33 @@
+import { Rect } from "../model/geometry.js";
+import "../model/index.js";
+//#region src/board/editor/snapping.d.ts
+type SnapAxis = "x" | "y";
+/** A rendered alignment guide: a segment along one axis at a world position. */
+type SnapGuide = {
+  axis: SnapAxis;
+  /** World position of the guide line (x for vertical, y for horizontal). */
+  at: number;
+  /** Extent of the guide segment (the other axis), inclusive. */
+  from: number;
+  to: number;
+};
+type SnapResult = {
+  /** Correction to apply to the moving selection (0 when no snap on that axis). */
+  dx: number;
+  dy: number;
+  guides: SnapGuide[];
+};
+type SnapOptions = {
+  /** World-space snap threshold (typically screenPx / zoom). */
+  threshold: number;
+  /** Snap to a regular grid of this size (0 disables grid snapping). */
+  gridSize?: number;
+};
+/**
+ * Compute the snap for a moving selection bounds against candidate target
+ * bounds. Each axis is solved independently: the nearest matching edge/center
+ * within `threshold` wins. Grid lines are included as targets when enabled.
+ */
+declare function computeSnap(moving: Rect, targets: Rect[], options: SnapOptions): SnapResult;
+//#endregion
+export { SnapAxis, SnapGuide, SnapOptions, SnapResult, computeSnap };