@likec4/diagram 1.59.4 → 1.60.0

package/dist/editor/actor/state.sync-queue.mjs

@@ -0,0 +1,276 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { machine } from "./setup.mjs";
+import { typedSystem } from "../../likec4diagram/state/utils.mjs";
+import { cancelSync, clearQueue, deleteNodesAndEdges, makeSnapshot, pushToSyncQueue, redo, scheduleSync, undo } from "./actions.mjs";
+import { isViewChange } from "./types.mjs";
+import { findLast } from "remeda";
+import { invariant } from "@likec4/core";
+import { assign, enqueueActions, log, sendTo } from "xstate";
+
+//#region src/editor/actor/state.sync-queue.ts
+const to = {
+	idle: { target: "#queue-idle" },
+	pending: { target: "#queue-pending" },
+	suspended: { target: "#queue-suspended" },
+	process: { target: "#queue-process" }
+};
+const idOf = (t) => ({ id: t.target.substring(1) });
+/**
+* Idle state, no pending operations
+*/
+const idle = machine.createStateConfig({
+	...idOf(to.idle),
+	always: {
+		guard: "has pending",
+		...to.pending
+	},
+	on: {
+		"delete.nodes-edges": { actions: deleteNodesAndEdges() },
+		"change.sync-snapshot": {
+			actions: pushToSyncQueue(),
+			...to.pending
+		},
+		"change.*": {
+			actions: pushToSyncQueue(),
+			...to.process
+		},
+		"undo": { actions: undo() },
+		"redo": { actions: redo() },
+		"cancel": {
+			actions: cancelSync(),
+			...to.idle
+		},
+		"view.synched": { actions: log("in idle got view.synched") }
+	}
+});
+/**
+* Has pending operations
+*/
+const pending = machine.createStateConfig({
+	...idOf(to.pending),
+	on: {
+		"change.sync-snapshot": {
+			reenter: true,
+			actions: pushToSyncQueue(),
+			...to.pending
+		},
+		"change.*": {
+			actions: pushToSyncQueue(),
+			...to.process
+		},
+		"delete.nodes-edges": {
+			actions: deleteNodesAndEdges(),
+			reenter: true,
+			...to.pending
+		},
+		"edit.move.start": { ...to.suspended },
+		"undo": {
+			reenter: true,
+			actions: undo(),
+			...to.pending
+		},
+		"redo": {
+			reenter: true,
+			actions: redo(),
+			...to.pending
+		},
+		"cancel": {
+			actions: clearQueue(),
+			...to.idle
+		},
+		"view.synched": { actions: log("in pending got view.synched") }
+	},
+	after: { "wait-after-edit": [{
+		guard: "has pending",
+		...to.process
+	}, to.idle] }
+});
+/**
+* When editing starts, we suspend the queue
+*/
+const suspended = machine.createStateConfig({
+	...idOf(to.suspended),
+	on: {
+		"edit.*": to.idle,
+		"cancel": {
+			actions: [clearQueue(), cancelSync()],
+			...to.idle
+		}
+	}
+});
+const peekFromQueue = () => machine.assign(({ system, context: { syncQueue } }) => {
+	let [head, ...tail] = syncQueue;
+	if (head === "sync-snapshot") head = makeSnapshot(system).change;
+	return {
+		processing: head ?? null,
+		syncQueue: tail
+	};
+});
+const clearProcessing = () => ({ processing: null });
+/**
+* Processing pending operation
+*/
+const process = machine.createStateConfig({
+	...idOf(to.process),
+	initial: "peekFromQueue",
+	tags: ["busy"],
+	states: {
+		peekFromQueue: {
+			entry: peekFromQueue(),
+			always: [
+				{
+					guard: ({ context: { processing } }) => processing === "apply-latest-to-manual",
+					target: "applyLatestToManual"
+				},
+				{
+					guard: ({ context: { processing } }) => processing === "apply-semantic-layout",
+					target: "applySemanticLayout"
+				},
+				{
+					guard: ({ context: { processing } }) => isViewChange(processing),
+					target: "executeChanges"
+				},
+				{
+					guard: "has pending",
+					reenter: true,
+					...to.process
+				},
+				{
+					actions: clearQueue(),
+					...to.idle
+				}
+			]
+		},
+		/**
+		* Syncing state, some edits are not yet synced
+		*/
+		applyLatestToManual: machine.createStateConfig({
+			initial: "call",
+			entry: assign(({ system }) => ({ processing: makeSnapshot(system).change })),
+			states: {
+				call: { invoke: {
+					src: "applyLatest",
+					input: ({ context }) => {
+						const current = context.processing;
+						invariant(isViewChange(current) && current.op === "save-view-snapshot");
+						return {
+							current: current.layout,
+							viewId: context.viewId
+						};
+					},
+					onDone: {
+						actions: sendTo(typedSystem.diagramActor, ({ event }) => ({
+							type: "update.view",
+							view: event.output.updated
+						}), { delay: 20 }),
+						target: "wait"
+					},
+					onError: {
+						actions: assign(({ event }) => {
+							console.error("applyLatestToManual onError", { error: event.error });
+							return {
+								processing: null,
+								syncQueue: []
+							};
+						}),
+						...to.idle
+					}
+				} },
+				wait: {
+					on: { "*": { actions: log(({ event }) => `wait: ignoring event ${event.type}`) } },
+					after: { "500ms": {
+						actions: [
+							clearQueue(),
+							assign({ redo: null }),
+							scheduleSync()
+						],
+						...to.idle
+					} }
+				}
+			}
+		}),
+		/**
+		* User requested semantic layout, we will call the AI
+		*/
+		applySemanticLayout: machine.createStateConfig({
+			tags: ["ai-semantic-layout"],
+			invoke: {
+				src: "applySemanticLayout",
+				input: ({ context }) => ({ viewId: context.viewId }),
+				onDone: { target: "decideNext" },
+				onError: {
+					actions: ({ event }) => {
+						console.error("applySemanticLayout onError", { error: event.error });
+					},
+					target: "failure"
+				}
+			}
+		}),
+		/**
+		* Calls `executeChange` to save the snapshot
+		*/
+		executeChanges: machine.createStateConfig({ invoke: {
+			src: "executeChange",
+			input: ({ context: { processing, syncQueue, viewId } }) => {
+				invariant(processing && isViewChange(processing));
+				return {
+					changes: [processing, ...syncQueue.filter(isViewChange)],
+					viewId
+				};
+			},
+			onDone: {
+				actions: enqueueActions(({ context, event, enqueue }) => {
+					if (import.meta.env.DEV) console.log("executeChanges onDone", { event });
+					const requested = event.output.requested;
+					enqueue.assign({
+						processing: null,
+						syncQueue: context.syncQueue.filter((change) => !isViewChange(change) || !requested.includes(change))
+					});
+					const lastSyncSnapshot = findLast(event.output.applied, (c) => c.op === "save-view-snapshot");
+					if (lastSyncSnapshot) enqueue.sendTo(typedSystem.diagramActor, {
+						type: "update.view-bounds",
+						bounds: lastSyncSnapshot.layout.bounds
+					});
+					if (!event.output.waitForViewSync) enqueue.raise({ type: "view.synched" });
+				}),
+				target: "waitViewSynced"
+			},
+			onError: {
+				actions: ({ event }) => {
+					console.error("executeChanges onError", { error: event.error });
+				},
+				target: "failure"
+			}
+		} }),
+		waitViewSynced: {
+			on: { "view.synched": { target: "decideNext" } },
+			after: { 2e3: "decideNext" }
+		},
+		decideNext: {
+			entry: assign(clearProcessing),
+			always: [{
+				guard: "has pending",
+				reenter: true,
+				...to.process
+			}, to.idle]
+		},
+		failure: { always: {
+			actions: clearQueue(),
+			...to.idle
+		} }
+	},
+	on: {}
+});
+const syncQueue = machine.createStateConfig({
+	initial: "idle",
+	states: {
+		idle,
+		pending,
+		suspended,
+		process
+	},
+	on: {}
+});
+
+//#endregion
+export { syncQueue };

package/dist/editor/actor/types.d.mts

@@ -0,0 +1,66 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { Types } from "../../likec4diagram/types.mjs";
+import { HotKeyEvent } from "./hotkey.mjs";
+import * as t from "@likec4/core/types";
+//#region src/editor/actor/types.d.ts
+export type EditorActorEvent = {
+  type: 'change.view';
+  change: t.ViewChange;
+} | {
+  type: 'change.semantic-layout';
+} | {
+  type: 'change.latest-to-manual';
+} | {
+  type: 'change.sync-snapshot';
+} | {
+  type: 'delete.nodes-edges';
+  nodeIds: t.NodeId[];
+  edgeIds: t.EdgeId[];
+} | {
+  type: 'view.synched';
+} | {
+  type: 'cancel';
+} | {
+  type: 'edit.move.start';
+  subject: 'node' | 'edge';
+} | {
+  type: 'edit.move.end';
+} | {
+  type: 'edit.move.cancel';
+} | HotKeyEvent;
+export type Snapshot = {
+  view: t.LayoutedView;
+  change: t.ViewChange.SaveViewSnapshot;
+  xynodes: Types.Node[];
+  xyedges: Types.Edge[];
+};
+export type LinkedSnapshot = {
+  head: Snapshot;
+  tail: LinkedSnapshot | null;
+};
+export interface EditorActorInput {
+  viewId: t.ViewId;
+}
+export type SyncOp = t.ViewChange | 'sync-snapshot' | 'apply-semantic-layout' | 'apply-latest-to-manual';
+export interface EditorActorContext {
+  viewId: t.ViewId;
+  history: LinkedSnapshot | null;
+  redo: LinkedSnapshot | null;
+  editing: null | {
+    /**
+     * The subject of the edit
+     */
+    subject: 'node' | 'edge';
+    /**
+     * The state before editing started
+     */
+    before: Snapshot;
+  };
+  syncQueue: Array<SyncOp>;
+  processing: Exclude<SyncOp, 'sync-snapshot'> | null;
+}
+export type EditorActorEmitedEvent = {
+  type: 'idle';
+};
+export type EditorActorStateTag = 'pending' | 'busy' | 'ai-semantic-layout';
+//#endregion

package/dist/editor/actor/types.mjs

@@ -0,0 +1,7 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+
+//#region src/editor/actor/types.ts
+const isViewChange = (change) => change !== null && typeof change !== "string";
+
+//#endregion
+export { isViewChange };

package/dist/editor/applyChangesToManualLayout.mjs

@@ -0,0 +1,169 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { isNullish, map } from "remeda";
+import { invariant, nonNullable } from "@likec4/core";
+import { BBox as BBox$1, convertPoint, vector } from "@likec4/core/geometry";
+import "@likec4/core/types";
+import { castDraft, produce, setAutoFreeze } from "immer";
+
+//#region src/editor/applyChangesToManualLayout.ts
+/**
+* Applies changes to a manual layout.
+*
+* @param manual - The manual layout.
+* @param latest - The latest layout.
+*/
+function applyChangesToManualLayout(manualView, latestView) {
+	try {
+		setAutoFreeze(false);
+		return _applyChangesToManualLayout(manualView, latestView);
+	} finally {
+		setAutoFreeze(true);
+	}
+}
+const isRootNode = (node) => isNullish(node.parent);
+function _applyChangesToManualLayout(manualView, latestView) {
+	invariant(manualView.id === latestView.id, "View IDs do not match");
+	invariant(manualView._type === latestView._type, "View types do not match");
+	invariant(manualView._layout === "manual" && latestView._layout === "auto", "Views must be manual and auto");
+	const compounds = /* @__PURE__ */ new Set();
+	const newnodes = /* @__PURE__ */ new Set();
+	const isNotCompound = (node) => !compounds.has(typeof node === "string" ? node : node.id);
+	const isBetweenNewLeafNodes = (edge) => newnodes.has(edge.source) && newnodes.has(edge.target) && isNotCompound(edge.source) && isNotCompound(edge.target);
+	const nodesMap = new Map(latestView.nodes.map((latest) => {
+		if (latest.children && latest.children.length > 0) compounds.add(latest.id);
+		const manual = manualView.nodes.find((n) => n.id === latest.id);
+		if (manual) return [latest.id, applyFromManualNode({
+			latest,
+			manual
+		})];
+		newnodes.add(latest.id);
+		return [latest.id, removeDrift(latest)];
+	}));
+	if (newnodes.size === nodesMap.size) return produce(latestView, (draft) => {
+		draft._layout = "manual";
+		draft.nodes = castDraft([...nodesMap.values()]);
+		draft.edges = castDraft(latestView.edges.map(removeDrift));
+		delete draft.drifts;
+	});
+	if (compounds.size > 0) expandCompoundNodes(nodesMap);
+	const nodes = [...nodesMap.values()];
+	const edges = latestView.edges.map((latest) => {
+		const dir = latest.dir ?? "forward";
+		const hasSameEndpoints = (candidate) => candidate.source === latest.source && candidate.target === latest.target && (candidate.dir === dir || !candidate.dir && !latest.dir);
+		let manual = manualView.edges.find((e) => e.id === latest.id && hasSameEndpoints(e));
+		if (!manual) manual = manualView.edges.find((e) => hasSameEndpoints(e));
+		if (manual) return applyFromManualEdge({
+			latest,
+			manual
+		});
+		if (isBetweenNewLeafNodes(latest)) return removeDrift(latest);
+		return makeAsStraightLine(latest, nonNullable(nodesMap.get(latest.source), `Source node ${latest.source} not found in processed nodes`), nonNullable(nodesMap.get(latest.target), `Target node ${latest.target} not found in processed nodes`));
+	});
+	const bounds = BBox$1.merge(...nodes.filter(isRootNode));
+	return produce(latestView, (draft) => {
+		draft._layout = "manual";
+		draft.nodes = castDraft(nodes);
+		draft.edges = castDraft(edges);
+		draft.bounds = bounds;
+		delete draft.drifts;
+	});
+}
+/**
+* Padding constants for compound nodes (same as in useLayoutConstraints)
+*/
+const COMPOUND_PADDING = {
+	Left: 42,
+	Right: 42,
+	Top: 60,
+	Bottom: 42
+};
+/**
+* Expands compound nodes to wrap all their children with proper padding.
+* Processes nodes recursively from leaves up to ensure correct bounding boxes.
+*/
+function expandCompoundNodes(nodes) {
+	function expand(nodeId) {
+		const node = nonNullable(nodes.get(nodeId), `Node ${nodeId} not found`);
+		if (node.children.length === 0) return node;
+		const childBBoxes = [];
+		for (const childId of node.children) childBBoxes.push(expand(childId));
+		const childrenBBox = BBox$1.merge(...childBBoxes);
+		node.x = childrenBBox.x - COMPOUND_PADDING.Left;
+		node.y = childrenBBox.y - COMPOUND_PADDING.Top;
+		node.width = childrenBBox.width + COMPOUND_PADDING.Left + COMPOUND_PADDING.Right;
+		node.height = childrenBBox.height + COMPOUND_PADDING.Top + COMPOUND_PADDING.Bottom;
+		return node;
+	}
+	for (const node of nodes.values()) {
+		if (!isRootNode(node) || node.children.length === 0) continue;
+		expand(node.id);
+	}
+}
+function applyFromManualNode({ latest, manual }) {
+	invariant(manual.id === latest.id, "Node IDs do not match");
+	return produce(latest, (next) => {
+		next.x = manual.x;
+		next.y = manual.y;
+		next.drifts = null;
+	});
+}
+function applyFromManualEdge(edges) {
+	const { manual, latest } = edges;
+	return produce(latest, (draft) => {
+		if (manual.controlPoints) draft.controlPoints = manual.controlPoints;
+		else delete draft.controlPoints;
+		draft.points = castDraft(manual.points);
+		if (manual.labelBBox) {
+			draft.labelBBox = latest.labelBBox ?? manual.labelBBox;
+			draft.labelBBox.x = manual.labelBBox.x;
+			draft.labelBBox.y = manual.labelBBox.y;
+		}
+		if (manual.isLabelCustomized === true) draft.isLabelCustomized = true;
+		else delete draft.isLabelCustomized;
+		draft.drifts = null;
+	});
+}
+function removeDrift(object) {
+	if ("drifts" in object && object.drifts !== null) {
+		const result = { ...object };
+		result.drifts = null;
+		return result;
+	}
+	return object;
+}
+function makeAsStraightLine(edge, sourceNode, targetNode) {
+	const controlPoints = edgeControlPoints(sourceNode, targetNode);
+	const labelPos = controlPoints[0];
+	return produce(edge, (draft) => {
+		draft.points = castDraft(map(controlPoints, convertPoint));
+		draft.controlPoints = controlPoints;
+		if (edge.labelBBox) {
+			draft.labelBBox.x = labelPos.x;
+			draft.labelBBox.y = labelPos.y;
+			if (edge.isLabelCustomized === true) delete draft.isLabelCustomized;
+		}
+		delete draft.drifts;
+	});
+}
+function getBorderPointOnVector(node, nodeCenter, v) {
+	const xScale = node.width / 2 / v.x;
+	const yScale = node.height / 2 / v.y;
+	const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
+	return vector(v).multiply(scale).add(nodeCenter);
+}
+function edgeControlPoints(source, target) {
+	const sourceCenter = vector(BBox$1.center(source));
+	const targetCenter = vector(BBox$1.center(target));
+	if (source === target) {
+		const loopSize = 80;
+		const centerOfTopBoundary = vector(0, source.height || 0).multiply(-.5).add(sourceCenter);
+		return [centerOfTopBoundary.add(vector(-32, -80)).trunc().toObject(), centerOfTopBoundary.add(vector(loopSize / 2.5, -80)).trunc().toObject()];
+	}
+	const sourceToTargetVector = targetCenter.subtract(sourceCenter);
+	const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector);
+	const sourceToTarget = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.multiply(-1)).subtract(sourceBorderPoint);
+	return [sourceBorderPoint.add(sourceToTarget.multiply(.4)).trunc().toObject(), sourceBorderPoint.add(sourceToTarget.multiply(.6)).trunc().toObject()];
+}
+
+//#endregion
+export { applyChangesToManualLayout };

package/dist/editor/index.d.mts

@@ -0,0 +1,5 @@
+import { EditorActorContext, EditorActorEmitedEvent, EditorActorEvent, EditorActorInput, EditorActorStateTag, LinkedSnapshot, Snapshot, SyncOp } from "./actor/types.mjs";
+import { EditorActorLogic, EditorActorRef, EditorActorSnapshot } from "./actor/machine.mjs";
+import { LikeC4EditorCallbacks, LikeC4EditorChangeResult, createLikeC4Editor } from "./LikeC4EditorCallbacks.mjs";
+import { LikeC4EditorProvider } from "./LikeC4EditorProvider.mjs";
+export type { EditorActorContext, EditorActorEmitedEvent, EditorActorEvent, EditorActorInput, EditorActorLogic, EditorActorRef, EditorActorSnapshot, EditorActorStateTag, LinkedSnapshot, Snapshot, SyncOp };

package/dist/editor/useEditorActorLogic.mjs

@@ -0,0 +1,79 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "../hooks/useCallbackRef.mjs";
+import { shouldWaitForViewSync } from "./LikeC4EditorCallbacks.mjs";
+import { useOptionalLikeC4Editor } from "./LikeC4EditorProvider.mjs";
+import { editorActorLogic } from "./actor/machine.mjs";
+import { applyChangesToManualLayout } from "./applyChangesToManualLayout.mjs";
+import { useMemo } from "react";
+import { isNullish } from "remeda";
+import { fromPromise } from "xstate";
+
+//#region src/editor/useEditorActorLogic.ts
+const promisify = (fn) => {
+	return Promise.resolve().then(() => fn());
+};
+function useEditorActorLogic() {
+	const port = useOptionalLikeC4Editor();
+	const isStub = isNullish(port);
+	const applyLatest = useCallbackRef(async ({ input: { viewId, current } }) => {
+		if (!port) {
+			console.error("No editor port available for applying latest to manual layout");
+			throw new Error("No editor port");
+		}
+		const manual = await promisify(() => current ?? port.fetchView(viewId, "manual"));
+		const latest = await promisify(() => port.fetchView(viewId, "auto"));
+		return { updated: applyChangesToManualLayout(manual, latest) };
+	});
+	const executeChange = useCallbackRef(async ({ input }) => {
+		if (!port) {
+			console.error("No editor port available for executing change");
+			throw new Error("No editor port");
+		}
+		if (import.meta.env.DEV) console.debug("Executing change", { input });
+		const applied = [];
+		let waitForViewSync = false;
+		for (const change of input.changes) try {
+			const result = await promisify(() => port.handleChange(input.viewId, change));
+			applied.push(change);
+			waitForViewSync ||= shouldWaitForViewSync(result);
+		} catch (error) {
+			console.error("Failed to execute change", {
+				change,
+				error
+			});
+			waitForViewSync ||= shouldWaitForViewSync();
+		}
+		return {
+			requested: input.changes,
+			applied,
+			waitForViewSync
+		};
+	});
+	const applySemanticLayout = useCallbackRef(async ({ input }) => {
+		if (!port) {
+			console.error("No editor port available for applying semantic layout");
+			throw new Error("No editor port");
+		}
+		if (!port.applySemanticLayout) {
+			console.error("No applySemanticLayout method available on editor port");
+			throw new Error("No applySemanticLayout method");
+		}
+		if (import.meta.env.DEV) console.debug("Applying semantic layout", { input });
+		await port.applySemanticLayout(input.viewId);
+		if (import.meta.env.DEV) console.debug("Applied semantic layout", { input });
+		return {};
+	});
+	return useMemo(() => Object.assign(editorActorLogic.provide({ actors: {
+		applyLatest: fromPromise(applyLatest),
+		executeChange: fromPromise(executeChange),
+		applySemanticLayout: fromPromise(applySemanticLayout)
+	} }), { isStub }), [
+		applyLatest,
+		executeChange,
+		applySemanticLayout,
+		isStub
+	]);
+}
+
+//#endregion
+export { useEditorActorLogic };