@likec4/diagram 1.59.4 → 1.60.0

package/dist/editor/actor/actions.mjs

@@ -0,0 +1,208 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { machine } from "./setup.mjs";
+import { createViewChange } from "../../likec4diagram/state/createViewChange.mjs";
+import { typedSystem } from "../../likec4diagram/state/utils.mjs";
+import { filter, isNot, omit } from "remeda";
+import { assertEvent } from "xstate";
+
+//#region src/editor/actor/actions.ts
+/**
+* Actually this is DiagramActorRef
+* But we can't use it here due to circular type inference
+*/
+const getDiagramContext = function(system) {
+	return system.get("diagram").getSnapshot().context;
+};
+function makeSnapshot(system) {
+	const parentContext = getDiagramContext(system);
+	return {
+		xynodes: parentContext.xynodes.map(({ measured, data, ...n }) => ({
+			...omit(n, [
+				"selected",
+				"dragging",
+				"resizing"
+			]),
+			data: omit(data, ["dimmed", "hovered"]),
+			measured,
+			initialWidth: measured?.width ?? n.width ?? n.initialWidth,
+			initialHeight: measured?.height ?? n.height ?? n.initialHeight
+		})),
+		xyedges: parentContext.xyedges.map(({ data, ...e }) => ({
+			...omit(e, ["selected"]),
+			data: omit(data, [
+				"active",
+				"dimmed",
+				"hovered"
+			])
+		})),
+		change: createViewChange(parentContext),
+		view: parentContext.view
+	};
+}
+const isLayoutChange = (change) => change.op === "reset-manual-layout" || change.op === "save-view-snapshot";
+const isLayoutChangeOp = (op) => op === "apply-latest-to-manual" || op === "apply-semantic-layout" || op === "sync-snapshot" || isLayoutChange(op);
+const withoutSnapshotChanges = filter(isNot(isLayoutChange));
+const scheduleSync = (delay = 50) => {
+	return machine.raise({ type: "change.sync-snapshot" }, delay ? {
+		delay,
+		id: "sync-snapshot"
+	} : void 0);
+};
+const cancelSync = () => {
+	return machine.cancel("sync-snapshot");
+};
+/**
+* Save the state before editing starts
+*/
+const saveBeforeEditing = () => machine.assign(({ system, event }) => {
+	assertEvent(event, "edit.move.start");
+	if (import.meta.env.DEV) console.log("saveBeforeEditing", event);
+	return { editing: {
+		subject: event.subject,
+		before: makeSnapshot(system)
+	} };
+});
+/**
+* When editing finishes, push the "beforeEditing" state to the history stack
+*/
+const pushHistory = () => machine.enqueueActions(({ context, enqueue }) => {
+	const editing = context.editing;
+	if (import.meta.env.DEV) console.log("pushHistory", editing);
+	if (editing) {
+		enqueue.assign({
+			editing: null,
+			history: {
+				head: editing.before,
+				tail: context.history
+			},
+			redo: null
+		});
+		enqueue(scheduleSync());
+	}
+});
+const undo = () => machine.enqueueActions(({ context: { history, redo }, system, enqueue }) => {
+	if (!history) return;
+	const last = history.head;
+	enqueue.assign({
+		history: history.tail,
+		redo: {
+			head: makeSnapshot(system),
+			tail: redo
+		}
+	});
+	enqueue(cancelSync());
+	enqueue(scheduleSync(100));
+	enqueue.sendTo(typedSystem.diagramActor, {
+		type: "update.view",
+		view: last.view,
+		xyedges: last.xyedges,
+		xynodes: last.xynodes,
+		source: "editor"
+	});
+});
+const redo = () => machine.enqueueActions(({ context: { history, redo }, system, enqueue }) => {
+	if (!redo) return;
+	const last = redo.head;
+	enqueue.assign({
+		history: {
+			head: makeSnapshot(system),
+			tail: history
+		},
+		redo: redo.tail
+	});
+	enqueue(cancelSync());
+	enqueue(scheduleSync(100));
+	enqueue.sendTo(typedSystem.diagramActor, {
+		type: "update.view",
+		view: last.view,
+		xyedges: last.xyedges,
+		xynodes: last.xynodes,
+		source: "editor"
+	});
+});
+const deleteNodesAndEdges = () => machine.enqueueActions(({ context, system, event, enqueue }) => {
+	assertEvent(event, "delete.nodes-edges");
+	if (import.meta.env.DEV) console.log("deleteNodesAndEdges", {
+		history: context.history,
+		event
+	});
+	const deletedNodeIds = new Set(event.nodeIds);
+	const willNotBeDeletedNode = (node) => !deletedNodeIds.has(typeof node === "string" ? node : node.id);
+	const snapshot = makeSnapshot(system);
+	const deletedEdgeIds = new Set(event.edgeIds);
+	for (const edge of snapshot.view.edges) if (deletedNodeIds.has(edge.source) || deletedNodeIds.has(edge.target)) deletedEdgeIds.add(edge.id);
+	const willNotBeDeletedEdge = (edge) => !deletedEdgeIds.has(typeof edge === "string" ? edge : edge.id);
+	enqueue.assign({
+		history: {
+			head: snapshot,
+			tail: context.history
+		},
+		redo: null
+	});
+	const cleanupNode = (node) => {
+		if (node.children.every(willNotBeDeletedNode) && node.inEdges.every(willNotBeDeletedEdge) && node.outEdges.every(willNotBeDeletedEdge)) return node;
+		return {
+			...node,
+			children: node.children.filter(willNotBeDeletedNode),
+			inEdges: node.inEdges.filter(willNotBeDeletedEdge),
+			outEdges: node.outEdges.filter(willNotBeDeletedEdge)
+		};
+	};
+	enqueue(cancelSync());
+	enqueue(scheduleSync());
+	enqueue.sendTo(typedSystem.diagramActor, {
+		type: "update.view",
+		view: {
+			...snapshot.view,
+			nodes: snapshot.view.nodes.filter(willNotBeDeletedNode).map(cleanupNode),
+			edges: snapshot.view.edges.filter(willNotBeDeletedEdge)
+		},
+		source: "editor"
+	});
+});
+const pushToSyncQueue = () => machine.assign(({ context: { syncQueue }, event }) => {
+	let nextOp;
+	switch (event.type) {
+		case "change.view":
+			nextOp = event.change;
+			break;
+		case "change.semantic-layout":
+			nextOp = "apply-semantic-layout";
+			break;
+		case "change.latest-to-manual":
+			nextOp = "apply-latest-to-manual";
+			break;
+		case "change.sync-snapshot":
+			nextOp = "sync-snapshot";
+			break;
+		default: throw new Error(`Invalid event type: ${event.type}`);
+	}
+	if (syncQueue.length === 0) {
+		if (import.meta.env.DEV) console.log("syncQueue is empty, adding", { nextOp });
+		return { syncQueue: [nextOp] };
+	}
+	if (syncQueue.length === 1 && syncQueue[0] === nextOp) {
+		if (import.meta.env.DEV) console.log("syncQueue has only one item and it is the same, not changing", { nextOp });
+		return {};
+	}
+	const isNextLayoutChange = isLayoutChangeOp(nextOp);
+	let pending = syncQueue.filter((existingOp) => {
+		if (existingOp === nextOp) return false;
+		if (isNextLayoutChange && isLayoutChangeOp(existingOp)) return false;
+		return true;
+	});
+	const newQueue = pending.length > 0 ? [...pending, nextOp] : [nextOp];
+	if (import.meta.env.DEV) console.log("new sync queue", {
+		syncQueue,
+		nextOp,
+		newQueue
+	});
+	return { syncQueue: newQueue };
+});
+const clearQueue = () => machine.assign({
+	syncQueue: [],
+	processing: null
+});
+
+//#endregion
+export { cancelSync, clearQueue, deleteNodesAndEdges, isLayoutChange, isLayoutChangeOp, makeSnapshot, pushHistory, pushToSyncQueue, redo, saveBeforeEditing, scheduleSync, undo };

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

@@ -0,0 +1,8 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { AnyEventObject, CallbackActorLogic, NonReducibleUnknown } from "xstate";
+//#region src/editor/actor/hotkey.d.ts
+export type HotKeyEvent = {
+  type: 'undo' | 'redo';
+};
+export interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {}
+//#endregion

package/dist/editor/actor/hotkey.mjs

@@ -0,0 +1,29 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { getHotkeyHandler } from "@mantine/hooks";
+import { fromCallback } from "xstate";
+
+//#region src/editor/actor/hotkey.ts
+const hotkey = fromCallback(({ sendBack }) => {
+	const ctrlZHandler = getHotkeyHandler([[
+		"mod + z",
+		(event) => {
+			event.stopPropagation();
+			sendBack({ type: "undo" });
+		},
+		{ preventDefault: true }
+	], [
+		"mod + shift + z",
+		(event) => {
+			event.stopPropagation();
+			sendBack({ type: "redo" });
+		},
+		{ preventDefault: true }
+	]]);
+	document.body.addEventListener("keydown", ctrlZHandler, { capture: true });
+	return () => {
+		document.body.removeEventListener("keydown", ctrlZHandler, { capture: true });
+	};
+});
+
+//#endregion
+export { hotkey };

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

@@ -0,0 +1,9 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { EditorActorEmitedEvent, EditorActorEvent } from "./types.mjs";
+import { BaseEditorActorLogic } from "./setup.mjs";
+import { ActorRef, SnapshotFrom } from "xstate";
+//#region src/editor/actor/machine.d.ts
+export interface EditorActorLogic extends BaseEditorActorLogic {}
+export type EditorActorSnapshot = SnapshotFrom<EditorActorLogic>;
+export interface EditorActorRef extends ActorRef<EditorActorSnapshot, EditorActorEvent, EditorActorEmitedEvent> {}
+//#endregion

package/dist/editor/actor/machine.mjs

@@ -0,0 +1,27 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { machine } from "./setup.mjs";
+import { editor } from "./state.editor.mjs";
+import { syncQueue } from "./state.sync-queue.mjs";
+
+//#region src/editor/actor/machine.ts
+const _editorActorLogic = machine.createMachine({
+	id: "editor",
+	context: ({ input }) => ({
+		viewId: input.viewId,
+		editing: null,
+		history: null,
+		redo: null,
+		pending: null,
+		syncQueue: [],
+		processing: null
+	}),
+	type: "parallel",
+	states: {
+		editor,
+		syncQueue
+	}
+});
+const editorActorLogic = _editorActorLogic;
+
+//#endregion
+export { editorActorLogic };

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

@@ -0,0 +1,59 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { HotkeyActorLogic } from "./hotkey.mjs";
+import { inferChildrenRef, inferProvidedActor } from "../../utils/defineActors.mjs";
+import { EditorActorContext, EditorActorEmitedEvent, EditorActorEvent, EditorActorInput, EditorActorStateTag } from "./types.mjs";
+import * as t from "@likec4/core/types";
+import { ActorRefFromLogic, StateMachine, StateValue } from "xstate";
+//#region src/editor/actor/setup.d.ts
+export declare namespace EditorCalls {
+  type ApplyLatestToManual = (params: {
+    input: ApplyLatestToManual.Input;
+  }) => Promise<ApplyLatestToManual.Output>;
+  namespace ApplyLatestToManual {
+    type Input = {
+      viewId: t.ViewId;
+      current: t.LayoutedView | undefined;
+    };
+    type Output = {
+      updated: t.LayoutedView;
+    };
+  }
+  type ApplySemanticLayout = (params: {
+    input: ApplySemanticLayout.Input;
+  }) => Promise<ApplySemanticLayout.Output>;
+  namespace ApplySemanticLayout {
+    type Input = {
+      viewId: t.ViewId;
+    };
+    type Output = {};
+  }
+  type ExecuteChange = (params: {
+    input: ExecuteChange.Input;
+  }) => Promise<ExecuteChange.Output>;
+  namespace ExecuteChange {
+    type Input = {
+      viewId: t.ViewId;
+      changes: t.ViewChange[];
+    };
+    /**
+     * Returns the changes that were applied to the view
+     */
+    type Output = {
+      requested: t.ViewChange[];
+      applied: t.ViewChange[];
+      waitForViewSync: boolean;
+    };
+  }
+}
+declare const actors: {
+  hotkey: HotkeyActorLogic;
+  applyLatest: import("xstate").PromiseActorLogic<EditorCalls.ApplyLatestToManual.Output, EditorCalls.ApplyLatestToManual.Input, import("xstate").EventObject>;
+  executeChange: import("xstate").PromiseActorLogic<EditorCalls.ExecuteChange.Output, EditorCalls.ExecuteChange.Input, import("xstate").EventObject>;
+  applySemanticLayout: import("xstate").PromiseActorLogic<EditorCalls.ApplySemanticLayout.Output, EditorCalls.ApplySemanticLayout.Input, import("xstate").EventObject>;
+};
+/**
+ * to workaround circular dependency issue between editor and diagram packages
+ */
+export interface BaseEditorActorLogic<State extends StateValue = any> extends StateMachine<EditorActorContext, EditorActorEvent, inferChildrenRef<typeof actors>, inferProvidedActor<typeof actors>, never, never, never, State, EditorActorStateTag, EditorActorInput, never, EditorActorEmitedEvent, never, never> {}
+export type BaseEditorActorRef = ActorRefFromLogic<BaseEditorActorLogic>;
+//#endregion

package/dist/editor/actor/setup.mjs

@@ -0,0 +1,44 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { defineActors } from "../../utils/defineActors.mjs";
+import { hotkey } from "./hotkey.mjs";
+import { fromPromise, setup } from "xstate";
+
+//#region src/editor/actor/setup.ts
+const applyLatest = fromPromise(() => {
+	throw new Error("Not implemented");
+});
+const executeChange = fromPromise(() => {
+	throw new Error("Not implemented");
+});
+const applySemanticLayout = fromPromise(() => {
+	throw new Error("Not implemented");
+});
+const actors = defineActors({
+	hotkey,
+	applyLatest,
+	executeChange,
+	applySemanticLayout
+});
+const machine = setup({
+	types: {
+		context: {},
+		events: {},
+		emitted: {},
+		input: {},
+		children: {},
+		tags: ""
+	},
+	actors,
+	delays: {
+		"500ms": 500,
+		"wait-after-edit": 1e3
+	},
+	guards: {
+		"has pending": ({ context }) => context.syncQueue.length > 0,
+		"can undo": ({ context }) => context.history !== null,
+		"can redo": ({ context }) => context.redo !== null
+	}
+});
+
+//#endregion
+export { machine };

package/dist/editor/actor/state.editor.mjs

@@ -0,0 +1,58 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { machine } from "./setup.mjs";
+import { pushHistory, saveBeforeEditing } from "./actions.mjs";
+
+//#region src/editor/actor/state.editor.ts
+const to = {
+	idle: { target: "#idle" },
+	moving: { target: "#moving" }
+};
+const idOf = (t) => ({ id: t.target.substring(1) });
+const stopHotkey = () => machine.stopChild("hotkey");
+const ensureHotKey = () => machine.enqueueActions(({ check, enqueue, self }) => {
+	const hasUndo = check("can undo") || check("can redo");
+	const hotkey = self.getSnapshot().children["hotkey"];
+	if (!hasUndo && hotkey) {
+		enqueue.stopChild(hotkey);
+		return;
+	}
+	if (hasUndo && !hotkey) enqueue.spawnChild("hotkey", { id: "hotkey" });
+});
+/**
+* Idle state, no pending operations
+*/
+const idle = machine.createStateConfig({
+	...idOf(to.idle),
+	on: { "edit.move.start": { ...to.moving } }
+});
+const clearEditing = () => machine.assign({ editing: null });
+const moving = machine.createStateConfig({
+	...idOf(to.moving),
+	entry: [saveBeforeEditing(), stopHotkey()],
+	exit: [ensureHotKey()],
+	on: {
+		"edit.move.end": {
+			actions: pushHistory(),
+			...to.idle
+		},
+		"edit.move.cancel": {
+			actions: clearEditing(),
+			...to.idle
+		},
+		"cancel": {
+			actions: clearEditing(),
+			...to.idle
+		}
+	}
+});
+const editor = machine.createStateConfig({
+	initial: "idle",
+	states: {
+		idle,
+		moving
+	},
+	on: { "*": { actions: ensureHotKey() } }
+});
+
+//#endregion
+export { editor };