@neta-art/cohub 9.0.0 → 10.0.0

package/dist/board/editor/editor.js

@@ -0,0 +1,429 @@
+import { clampBoardStrokeSize } from "../../protocol/dist/board-constants.js";
+import { normalizeViewport } from "../model/geometry.js";
+import { isBoardColorId } from "../model/palette.js";
+import { buildBoardScene } from "../model/scene.js";
+import { isShapeKind } from "../model/shape-types.js";
+import { createBoardToolStyles } from "../model/tool-styles.js";
+import { titleForBoardItem } from "../model/items/create.js";
+import { defaultBoardRegistry } from "../model/items/registry.js";
+import { createAnimationModule } from "./animation.js";
+import { createCameraModule } from "./camera.js";
+import { STATE_CHANNELS } from "./context.js";
+import { createCopyModule } from "./copy.js";
+import { isCreationBoardTool } from "./tool.js";
+import { createCreationModule } from "./creation.js";
+import { createDeletionModule } from "./deletion.js";
+import { createDocumentModule } from "./document.js";
+import { createChannels, observable } from "./state.js";
+import { createInteractionModule } from "./interaction.js";
+import { createQueryModule } from "./query.js";
+import { createRemoteModule } from "./remote.js";
+import { createSelectionModule } from "./selection.js";
+import { createSnapshotsModule } from "./snapshots.js";
+//#region src/board/editor/editor.ts
+function styledToolId(tool) {
+	switch (tool) {
+		case "text":
+		case "shape":
+		case "draw":
+		case "arrow":
+		case "frame": return tool;
+		default: return null;
+	}
+}
+function createBoardEditor(options) {
+	const registry = options.registry ?? defaultBoardRegistry;
+	const channels = createChannels();
+	const track = options.track ?? (() => {});
+	const preferences = options.preferences;
+	const state = observable({
+		base: options.document,
+		settingsPreview: null,
+		scene: buildBoardScene(options.document),
+		structureVersion: 0,
+		geometryVersion: 0,
+		selection: [],
+		camera: normalizeViewport(options.viewport ?? {
+			x: 0,
+			y: 0,
+			zoom: 1
+		}),
+		surfaceSize: {
+			width: 0,
+			height: 0
+		},
+		cameraPolicy: preferences?.cameraPolicy ?? "follow",
+		tool: options.initialTool ?? "select",
+		toolStyles: preferences?.toolStyles ?? createBoardToolStyles(),
+		interaction: { type: "idle" },
+		snapGuides: [],
+		spaceHeld: false,
+		hoverId: null,
+		hoverPoint: null,
+		hoverPointerType: "mouse",
+		editingId: null,
+		draftTextId: null,
+		playhead: null,
+		recording: false,
+		undoStack: [],
+		redoStack: [],
+		saveError: null,
+		pendingCommits: 0
+	}, STATE_CHANNELS, channels);
+	const ctx = {
+		options,
+		registry,
+		state,
+		channels,
+		preferencesChanged() {
+			options.onPreferencesChange?.({
+				toolStyles: state.toolStyles,
+				cameraPolicy: state.cameraPolicy
+			});
+		}
+	};
+	ctx.document = createDocumentModule(ctx);
+	ctx.query = createQueryModule(ctx);
+	ctx.camera = createCameraModule(ctx);
+	ctx.selection = createSelectionModule(ctx);
+	ctx.creation = createCreationModule(ctx);
+	ctx.deletion = createDeletionModule(ctx);
+	ctx.copy = createCopyModule(ctx);
+	ctx.interaction = createInteractionModule(ctx);
+	ctx.animation = createAnimationModule(ctx);
+	ctx.snapshots = createSnapshotsModule(ctx);
+	ctx.remote = createRemoteModule(ctx);
+	const { document, query, camera, selection, creation, deletion, copy, interaction, animation, snapshots, remote } = ctx;
+	let viewStateQueued = false;
+	function emitViewState() {
+		viewStateQueued = false;
+		const onViewStateChange = options.onViewStateChange;
+		if (!onViewStateChange) return;
+		const selectedNodes = selection.items().map((item) => {
+			const title = titleForBoardItem(item).trim();
+			return {
+				id: item.id,
+				type: item.type,
+				...title ? { title } : {}
+			};
+		});
+		onViewStateChange({
+			visibleRect: camera.visibleRect(),
+			selectedNodes
+		});
+	}
+	function queueViewState() {
+		if (viewStateQueued || !options.onViewStateChange) return;
+		viewStateQueued = true;
+		queueMicrotask(emitViewState);
+	}
+	const stopViewState = channels.subscribe([
+		"camera",
+		"selection",
+		"scene"
+	], queueViewState);
+	queueViewState();
+	function setToolStyle(tool, patch) {
+		state.toolStyles = {
+			...state.toolStyles,
+			[tool]: {
+				...state.toolStyles[tool],
+				...patch
+			}
+		};
+		ctx.preferencesChanged();
+	}
+	function read(channel, value) {
+		if (typeof channel === "string") track(channel);
+		else for (const each of channel) track(each);
+		return value();
+	}
+	function tracked(channels, query) {
+		return (...args) => read(channels, () => query(...args));
+	}
+	return {
+		registry,
+		readonly: options.readonly === true,
+		subscribe: channels.subscribe,
+		get document() {
+			return read("document", () => state.base);
+		},
+		get settings() {
+			return read("document", () => state.settingsPreview ?? state.base.board);
+		},
+		get animations() {
+			return read("document", () => state.base.animations);
+		},
+		get scene() {
+			return read("scene", () => state.scene);
+		},
+		get items() {
+			return read("scene", () => state.scene.items);
+		},
+		get hasContent() {
+			return read("scene", () => state.scene.items.length > 0);
+		},
+		get structureVersion() {
+			return read("scene", () => state.structureVersion);
+		},
+		get geometryVersion() {
+			return read("scene", () => state.geometryVersion);
+		},
+		get selection() {
+			return read("selection", () => state.selection);
+		},
+		get selectedItems() {
+			return read(["scene", "selection"], selection.items);
+		},
+		get hasFocusableSelection() {
+			return read(["scene", "selection"], () => selection.items().length > 0);
+		},
+		get selectionLocked() {
+			return read(["scene", "selection"], () => {
+				const items = selection.items();
+				return items.length > 0 && items.every((item) => item.locked);
+			});
+		},
+		get bounds() {
+			return read(["scene", "selection"], selection.bounds);
+		},
+		get selectionTransform() {
+			return read(["scene", "selection"], selection.transform);
+		},
+		get camera() {
+			return read("camera", () => state.camera);
+		},
+		get cameraPolicy() {
+			return read("camera", () => state.cameraPolicy);
+		},
+		get playhead() {
+			return read("playback", () => state.playhead);
+		},
+		get recording() {
+			return read("playback", () => state.recording);
+		},
+		get tool() {
+			return read("tool", () => state.tool);
+		},
+		set tool(value) {
+			if (options.readonly && value !== "hand" && value !== "select") {
+				state.tool = "hand";
+				return;
+			}
+			state.tool = value;
+			if (isCreationBoardTool(value)) state.hoverId = null;
+			if (value === "draw" || value === "arrow") {
+				state.selection = [];
+				state.editingId = null;
+			}
+		},
+		get activeColor() {
+			return read("tool", () => state.toolStyles[styledToolId(state.tool) ?? "text"].color);
+		},
+		set activeColor(value) {
+			const tool = styledToolId(state.tool);
+			if (tool && isBoardColorId(value)) setToolStyle(tool, { color: value });
+		},
+		get activeShape() {
+			return read("tool", () => state.toolStyles.shape.geometry);
+		},
+		set activeShape(value) {
+			if (isShapeKind(value)) setToolStyle("shape", { geometry: value });
+		},
+		get activeStrokeSize() {
+			return read("tool", () => (state.tool === "arrow" ? state.toolStyles.arrow : state.toolStyles.draw).size);
+		},
+		set activeStrokeSize(value) {
+			if (!Number.isFinite(value) || state.tool !== "arrow" && state.tool !== "draw") return;
+			setToolStyle(state.tool, { size: clampBoardStrokeSize(value) });
+		},
+		get interaction() {
+			return read("interaction", () => state.interaction);
+		},
+		get gestureActive() {
+			return read("interaction", () => state.interaction.type !== "idle");
+		},
+		get marquee() {
+			return read("interaction", interaction.marquee);
+		},
+		get snapGuides() {
+			return read("interaction", () => state.snapGuides);
+		},
+		get spaceHeld() {
+			return read("interaction", () => state.spaceHeld);
+		},
+		set spaceHeld(value) {
+			state.spaceHeld = value;
+		},
+		get arrowDraft() {
+			return read(["interaction", "scene"], () => {
+				const gesture = state.interaction;
+				if (gesture.type !== "creatingArrow") return null;
+				const target = gesture.targetItemId ? state.scene.get(gesture.targetItemId) : null;
+				return {
+					from: gesture.start,
+					to: gesture.current,
+					size: gesture.size,
+					color: gesture.color,
+					targetFrame: target?.frame ?? null
+				};
+			});
+		},
+		get bindTargetFrame() {
+			return read(["interaction", "scene"], () => {
+				const gesture = state.interaction;
+				const id = gesture.type === "draggingArrowHandle" ? gesture.targetItemId : null;
+				return id ? state.scene.get(id)?.frame ?? null : null;
+			});
+		},
+		get hoverId() {
+			return read("hover", () => state.hoverId);
+		},
+		get pointerType() {
+			return read("hover", () => state.hoverPointerType);
+		},
+		get hoveredTransformControl() {
+			return read([
+				"interaction",
+				"hover",
+				"tool",
+				"camera",
+				"scene",
+				"selection"
+			], interaction.hoveredControl);
+		},
+		get connectionPorts() {
+			return read([
+				"interaction",
+				"hover",
+				"tool",
+				"camera",
+				"scene",
+				"selection",
+				"editing"
+			], interaction.ports);
+		},
+		get hoveredConnectionPort() {
+			return read([
+				"interaction",
+				"hover",
+				"tool",
+				"camera",
+				"scene",
+				"selection",
+				"editing"
+			], interaction.hoveredPort);
+		},
+		get editingId() {
+			return read("editing", () => state.editingId);
+		},
+		set editingId(value) {
+			state.editingId = value;
+		},
+		get canUndo() {
+			return read("history", () => state.undoStack.length > 0);
+		},
+		get canRedo() {
+			return read("history", () => state.redoStack.length > 0);
+		},
+		get saveError() {
+			return read("status", () => state.saveError);
+		},
+		get saving() {
+			return read("status", () => state.pendingCommits > 0);
+		},
+		set surfaceSize(value) {
+			state.surfaceSize = value;
+		},
+		loadDocument: remote.loadDocument,
+		undo: document.undo,
+		redo: document.redo,
+		retrySave: () => {
+			state.saveError = null;
+		},
+		setSettings: document.setSettings,
+		previewSettings: document.previewSettings,
+		setPlayedItems: document.setPlayedItems,
+		consumeRecentlyAdded: document.consumeRecentlyAdded,
+		itemAt: tracked(["scene", "camera"], query.itemAt),
+		itemById: tracked(["scene"], query.itemById),
+		labelItemAt: tracked([
+			"scene",
+			"camera",
+			"selection"
+		], query.labelItemAt),
+		idsInRect: tracked(["scene"], query.idsInRect),
+		setCamera: camera.setCamera,
+		setCameraPolicy: camera.setCameraPolicy,
+		takeCameraControl: camera.takeCameraControl,
+		viewCenter: tracked(["camera"], camera.viewCenter),
+		zoomAt: camera.zoomAt,
+		zoomIn: camera.zoomIn,
+		zoomOut: camera.zoomOut,
+		resetZoom: camera.resetZoom,
+		fitView: camera.fitView,
+		focusRect: camera.focusRect,
+		focusItems: camera.focusItems,
+		focusNode: camera.focusNode,
+		focusSelection: camera.focusSelection,
+		wheel: camera.wheel,
+		setSelection: selection.set,
+		clearSelection: selection.clear,
+		selectAll: selection.selectAll,
+		nudgeSelection: selection.nudge,
+		alignSelection: selection.align,
+		distributeSelection: selection.distribute,
+		toggleSelectionLock: selection.toggleLock,
+		setSelectionColor: selection.setColor,
+		setSelectionStyle: selection.setStyle,
+		setSelectionProps: selection.setProps,
+		bringToFront: selection.bringToFront,
+		sendToBack: selection.sendToBack,
+		addItem: creation.addItem,
+		addApp: creation.addApp,
+		addFile: creation.addFile,
+		addTask: creation.addTask,
+		addTaskWithSources: creation.addTaskWithSources,
+		addText: creation.addText,
+		addShape: creation.addShape,
+		addFrame: creation.addFrame,
+		beginTextDraft: creation.beginTextDraft,
+		commitTextEdit: creation.commitTextEdit,
+		updateText: creation.updateText,
+		previewTextLayout: creation.previewTextLayout,
+		deleteSelection: deletion.deleteSelection,
+		deleteItem: deletion.deleteItem,
+		duplicateSelection: copy.duplicateSelection,
+		copySelection: copy.copySelection,
+		cutSelection: copy.cutSelection,
+		pasteClipboard: copy.pasteClipboard,
+		applyMediaFileChange: snapshots.applyMediaFileChange,
+		adoptMediaNaturalSizes: snapshots.adoptMediaNaturalSizes,
+		applyFileSnapshots: snapshots.applyFileSnapshots,
+		applyTaskSnapshots: snapshots.applyTaskSnapshots,
+		setPlayhead: animation.setPlayhead,
+		setRecording: animation.setRecording,
+		keyframeState: tracked([
+			"document",
+			"scene",
+			"selection",
+			"playback"
+		], animation.keyframeState),
+		toggleKeyframe: animation.toggleKeyframe,
+		removeKeyframe: animation.removeKeyframe,
+		setKeyframeEase: animation.setKeyframeEase,
+		createAnimation: animation.createAnimation,
+		pointerDown: interaction.pointerDown,
+		pointerMove: interaction.pointerMove,
+		pointerUp: interaction.pointerUp,
+		pointerLeave: interaction.pointerLeave,
+		cancelPointerInteraction: interaction.cancel,
+		destroy() {
+			stopViewState();
+			camera.cancelAnimation();
+			interaction.destroy();
+		}
+	};
+}
+//#endregion
+export { createBoardEditor };

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

@@ -0,0 +1,18 @@
+import { BOARD_CLIPBOARD_MIME } from "../../protocol/dist/board.js";
+import { AlignMode, DistributeAxis, alignFrames, distributeFrames, framesBounds } from "./align.js";
+import { BoardFocusOptions } from "./camera.js";
+import { BoardSelectionTransform, BoardTransformControl, resizeCursorForHandle, resolveSelectionTransform, selectionTransformControlAt } from "./selection-transform.js";
+import { BoardInteraction, BoardPointerEvent } from "./interaction.js";
+import { BoardAppMetadata, BoardTaskSource } from "./creation.js";
+import { BOARD_CLIPBOARD_VERSION, BoardClipboardPayload, DUPLICATE_OFFSET, MAX_CLIPBOARD_CHARS, MAX_CLIPBOARD_ITEMS, defaultPasteOffset, encodeClipboard, materializeClipboard, parseClipboard, remapItems } from "./clipboard.js";
+import { BoardNaturalSize } from "./snapshots.js";
+import { SnapAxis, SnapGuide, SnapOptions, SnapResult, computeSnap } from "./snapping.js";
+import { BoardEditorChannel, BoardEditorListener } from "./state.js";
+import { BOARD_HAND_TAP_SLOP, BoardToolId, canTapSelectWithHand, defaultBoardTool, isContinuousBoardTool, isCreationBoardTool, isWithinHandTapSlop } from "./tool.js";
+import { BoardCameraPolicy, BoardEditorOptions, BoardEditorPreferences, BoardPlayhead, BoardViewState } from "./context.js";
+import { CONNECTION_PORT_HIT_RADIUS, CONNECTION_PORT_OFFSET, CONNECTION_PORT_RADIUS, CONNECTION_PORT_TOUCH_HIT_RADIUS, CONNECTION_SIDES, ConnectionPort, connectionPortAt, connectionPorts, portHitRadius } from "./connection-ports.js";
+import { BoardEditPlayhead, diffBoardEdits, isEmptyBoardPatch, readPath, routeBoardEdits, sameJson, writePath } from "./document-edits.js";
+import { BoardEditor, createBoardEditor } from "./editor.js";
+import { SpatialEntry, SpatialIndex, createSpatialIndex } from "./spatial.js";
+import { normalizeWheelDelta, wheelZoomFactor } from "./wheel.js";
+export { AlignMode, BOARD_CLIPBOARD_MIME, BOARD_CLIPBOARD_VERSION, BOARD_HAND_TAP_SLOP, type BoardAppMetadata, type BoardCameraPolicy, BoardClipboardPayload, BoardEditPlayhead, type BoardEditor, type BoardEditorChannel, type BoardEditorListener, type BoardEditorOptions, type BoardEditorPreferences, type BoardFocusOptions, type BoardInteraction, type BoardNaturalSize, type BoardPlayhead, type BoardPointerEvent, BoardSelectionTransform, type BoardTaskSource, BoardToolId, BoardTransformControl, type BoardViewState, CONNECTION_PORT_HIT_RADIUS, CONNECTION_PORT_OFFSET, CONNECTION_PORT_RADIUS, CONNECTION_PORT_TOUCH_HIT_RADIUS, CONNECTION_SIDES, ConnectionPort, DUPLICATE_OFFSET, DistributeAxis, MAX_CLIPBOARD_CHARS, MAX_CLIPBOARD_ITEMS, SnapAxis, SnapGuide, SnapOptions, SnapResult, SpatialEntry, SpatialIndex, alignFrames, canTapSelectWithHand, computeSnap, connectionPortAt, connectionPorts, createBoardEditor, createSpatialIndex, defaultBoardTool, defaultPasteOffset, diffBoardEdits, distributeFrames, encodeClipboard, framesBounds, isContinuousBoardTool, isCreationBoardTool, isEmptyBoardPatch, isWithinHandTapSlop, materializeClipboard, normalizeWheelDelta, parseClipboard, portHitRadius, readPath, remapItems, resizeCursorForHandle, resolveSelectionTransform, routeBoardEdits, sameJson, selectionTransformControlAt, wheelZoomFactor, writePath };

package/dist/board/editor/index.js

@@ -0,0 +1,12 @@
+import { BOARD_CLIPBOARD_MIME } from "../../protocol/dist/board.js";
+import { alignFrames, distributeFrames, framesBounds } from "./align.js";
+import { diffBoardEdits, isEmptyBoardPatch, readPath, routeBoardEdits, sameJson, writePath } from "./document-edits.js";
+import { normalizeWheelDelta, wheelZoomFactor } from "./wheel.js";
+import { BOARD_CLIPBOARD_VERSION, DUPLICATE_OFFSET, MAX_CLIPBOARD_CHARS, MAX_CLIPBOARD_ITEMS, defaultPasteOffset, encodeClipboard, materializeClipboard, parseClipboard, remapItems } from "./clipboard.js";
+import { CONNECTION_PORT_HIT_RADIUS, CONNECTION_PORT_OFFSET, CONNECTION_PORT_RADIUS, CONNECTION_PORT_TOUCH_HIT_RADIUS, CONNECTION_SIDES, connectionPortAt, connectionPorts, portHitRadius } from "./connection-ports.js";
+import { BOARD_HAND_TAP_SLOP, canTapSelectWithHand, defaultBoardTool, isContinuousBoardTool, isCreationBoardTool, isWithinHandTapSlop } from "./tool.js";
+import { resizeCursorForHandle, resolveSelectionTransform, selectionTransformControlAt } from "./selection-transform.js";
+import { computeSnap } from "./snapping.js";
+import { createSpatialIndex } from "./spatial.js";
+import { createBoardEditor } from "./editor.js";
+export { BOARD_CLIPBOARD_MIME, BOARD_CLIPBOARD_VERSION, BOARD_HAND_TAP_SLOP, CONNECTION_PORT_HIT_RADIUS, CONNECTION_PORT_OFFSET, CONNECTION_PORT_RADIUS, CONNECTION_PORT_TOUCH_HIT_RADIUS, CONNECTION_SIDES, DUPLICATE_OFFSET, MAX_CLIPBOARD_CHARS, MAX_CLIPBOARD_ITEMS, alignFrames, canTapSelectWithHand, computeSnap, connectionPortAt, connectionPorts, createBoardEditor, createSpatialIndex, defaultBoardTool, defaultPasteOffset, diffBoardEdits, distributeFrames, encodeClipboard, framesBounds, isContinuousBoardTool, isCreationBoardTool, isEmptyBoardPatch, isWithinHandTapSlop, materializeClipboard, normalizeWheelDelta, parseClipboard, portHitRadius, readPath, remapItems, resizeCursorForHandle, resolveSelectionTransform, routeBoardEdits, sameJson, selectionTransformControlAt, wheelZoomFactor, writePath };

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

@@ -0,0 +1,115 @@
+import { BoardArrowItem, BoardDrawPoint } from "../../protocol/dist/board-model.js";
+import { BoardFrame } from "../../protocol/dist/board-layout.js";
+import { BoardViewport, Rect, ResizeHandle, ScreenPoint, WorldPoint } from "../model/geometry.js";
+import { BoardDrawInputSample } from "../model/draw-input.js";
+import "../model/index.js";
+import { BoardTransformControl } from "./selection-transform.js";
+import { EditorContext } from "./context.js";
+//#region src/board/editor/interaction.d.ts
+type BoardInteraction = {
+  type: "idle";
+} | {
+  type: "panning";
+  start: ScreenPoint;
+  origin: BoardViewport;
+  moved: boolean;
+  tapSelection: {
+    targetId: string | null;
+  } | null;
+} | {
+  type: "translating";
+  start: WorldPoint;
+  origin: Map<string, BoardFrame>;
+  moved: boolean;
+  duplicate: boolean;
+} | {
+  type: "resizing";
+  handle: ResizeHandle;
+  single: BoardFrame | null;
+  bounds: Rect;
+  origin: Map<string, BoardFrame>;
+  moved: boolean;
+} | {
+  type: "rotating";
+  pivot: WorldPoint;
+  startAngle: number;
+  current: WorldPoint;
+  origin: Map<string, BoardFrame>;
+  moved: boolean;
+} | {
+  type: "brushing";
+  start: WorldPoint;
+  current: WorldPoint;
+  additive: boolean;
+  baseSelection: string[];
+} | {
+  type: "drawing";
+  id: string;
+  pointerId: number;
+  points: BoardDrawPoint[];
+  color: string;
+  size: number;
+} | {
+  type: "creatingArrow";
+  id: string;
+  start: WorldPoint;
+  current: WorldPoint;
+  startItemId: string | null;
+  startSide: "top" | "right" | "bottom" | "left" | null;
+  targetItemId: string | null;
+  color: string;
+  size: number;
+} | {
+  type: "creatingBox";
+  id: string;
+  kind: "shape" | "frame";
+  start: WorldPoint;
+  current: WorldPoint;
+  color: string;
+  geometry: string;
+} | {
+  type: "draggingArrowHandle";
+  arrowId: string;
+  which: "start" | "end" | "mid";
+  origin: BoardArrowItem;
+  targetItemId: string | null;
+  moved: boolean;
+};
+type BoardPointerEvent = {
+  pointerId: number;
+  screen: ScreenPoint;
+  world: WorldPoint;
+  shiftKey: boolean;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  altKey: boolean;
+  button: number;
+  buttons: number;
+  pointerType: string;
+  cancelled: boolean;
+  pressure: number;
+  samples?: readonly BoardDrawInputSample[];
+};
+declare function createInteractionModule(ctx: EditorContext): {
+  marquee: () => Rect | null;
+  hoveredControl: () => BoardTransformControl | null;
+  ports: () => {
+    itemId: string;
+    x: number;
+    y: number;
+    radius: number;
+  }[];
+  hoveredPort: () => {
+    x: number;
+    y: number;
+  } | null;
+  pointerDown: (event: BoardPointerEvent) => void;
+  pointerMove: (event: BoardPointerEvent) => void;
+  pointerUp: (event: BoardPointerEvent) => void;
+  pointerLeave: () => void;
+  cancel: () => void;
+  destroy: () => void;
+};
+type InteractionModule = ReturnType<typeof createInteractionModule>;
+//#endregion
+export { BoardInteraction, BoardPointerEvent, InteractionModule, createInteractionModule };