@likec4/diagram 1.55.1 → 1.57.0

package/dist/editor/actor/actions.d.ts

@@ -0,0 +1,115 @@
+import { ActorSystem, ActionFunction, CancelAction, PromiseActorLogic, EventObject, NonReducibleUnknown } from 'xstate';
+import { DiagramMachineRef } from '../../likec4diagram/state/machine';
+import { Snapshot, EditorActorContext, EditorActorEvent, EditorActorEmitedEvent } from './types';
+import { HotkeyActorLogic } from './hotkey';
+import type * as t from '@likec4/core/types';
+/**
+ * Actually this is DiagramActorRef
+ * But we can't use it here due to circular type inference
+ */
+export declare const diagramActorRef: (system: ActorSystem<any>) => DiagramMachineRef;
+export declare function makeSnapshot(system: ActorSystem<any>): Snapshot;
+type LayoutChanges = t.ViewChange.ResetManualLayout | t.ViewChange.SaveViewSnapshot;
+export declare const isLayoutChange: (change: t.ViewChange) => change is LayoutChanges;
+export declare const withoutSnapshotChanges: (data: t.ViewChange[]) => (t.ViewChange.ChangeElementStyle | t.ViewChange.ChangeAutoLayout | t.ViewChange.ChangeProperty)[];
+export declare const scheduleSync: (delay?: number) => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, never, never, never, "500ms" | "wait-after-edit", never>;
+export declare const cancelSync: () => CancelAction<EditorActorContext, EditorActorEvent, undefined, EditorActorEvent>;
+/**
+ * Save the state before editing starts
+ */
+export declare const saveBeforeEditing: ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, {
+    src: "hotkey";
+    logic: HotkeyActorLogic;
+    id: "hotkey";
+} | {
+    src: "applyLatest";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplyLatestToManual.Output, import("./setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "executeChange";
+    logic: PromiseActorLogic<NonReducibleUnknown, import("./setup").EditorCalls.ExecuteChange.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "applySemanticLayout";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplySemanticLayout.Output, import("./setup").EditorCalls.ApplySemanticLayout.Input, EventObject>;
+    id: string | undefined;
+}, never, never, never, never>;
+/**
+ * When editing finishes, push the "beforeEditing" state to the history stack
+ */
+export declare const pushHistory: () => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, {
+    src: "hotkey";
+    logic: HotkeyActorLogic;
+    id: "hotkey";
+} | {
+    src: "applyLatest";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplyLatestToManual.Output, import("./setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "executeChange";
+    logic: PromiseActorLogic<NonReducibleUnknown, import("./setup").EditorCalls.ExecuteChange.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "applySemanticLayout";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplySemanticLayout.Output, import("./setup").EditorCalls.ApplySemanticLayout.Input, EventObject>;
+    id: string | undefined;
+}, never, never, never, never>;
+export declare const reschedule: (delay?: number) => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, never, never, never, "500ms" | "wait-after-edit", never>;
+export declare const undo: () => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, {
+    src: "hotkey";
+    logic: HotkeyActorLogic;
+    id: "hotkey";
+} | {
+    src: "applyLatest";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplyLatestToManual.Output, import("./setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "executeChange";
+    logic: PromiseActorLogic<NonReducibleUnknown, import("./setup").EditorCalls.ExecuteChange.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "applySemanticLayout";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplySemanticLayout.Output, import("./setup").EditorCalls.ApplySemanticLayout.Input, EventObject>;
+    id: string | undefined;
+}, never, {
+    type: "has pending";
+    params: unknown;
+} | {
+    type: "can undo";
+    params: unknown;
+}, "500ms" | "wait-after-edit", EditorActorEmitedEvent>;
+export declare const pushToSyncQueue: () => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, {
+    src: "hotkey";
+    logic: HotkeyActorLogic;
+    id: "hotkey";
+} | {
+    src: "applyLatest";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplyLatestToManual.Output, import("./setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "executeChange";
+    logic: PromiseActorLogic<NonReducibleUnknown, import("./setup").EditorCalls.ExecuteChange.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "applySemanticLayout";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplySemanticLayout.Output, import("./setup").EditorCalls.ApplySemanticLayout.Input, EventObject>;
+    id: string | undefined;
+}, never, never, never, never>;
+export declare const clearQueue: () => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, {
+    src: "hotkey";
+    logic: HotkeyActorLogic;
+    id: "hotkey";
+} | {
+    src: "applyLatest";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplyLatestToManual.Output, import("./setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "executeChange";
+    logic: PromiseActorLogic<NonReducibleUnknown, import("./setup").EditorCalls.ExecuteChange.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "applySemanticLayout";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplySemanticLayout.Output, import("./setup").EditorCalls.ApplySemanticLayout.Input, EventObject>;
+    id: string | undefined;
+}, never, never, never, never>;
+export {};

package/dist/editor/actor/actions.js

@@ -0,0 +1,122 @@
+import "../../_virtual/_rolldown/runtime.js";
+import { machine } from "./setup.js";
+import { createViewChange } from "../../likec4diagram/state/createViewChange.js";
+import { typedSystem } from "../../likec4diagram/state/utils.js";
+import { isViewChange } from "./types.js";
+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
+*/
+var 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
+	};
+}
+var isLayoutChange = (change) => change.op === "reset-manual-layout" || change.op === "save-view-snapshot";
+filter(isNot(isLayoutChange));
+var scheduleSync = (delay = 50) => {
+	return machine.raise({ type: "change.sync-snapshot" }, delay ? {
+		delay,
+		id: "sync-snapshot"
+	} : void 0);
+};
+/**
+* Save the state before editing starts
+*/
+var saveBeforeEditing = machine.assign(({ system, event }) => {
+	assertEvent(event, "edit.move.start");
+	return { editing: {
+		subject: event.subject,
+		before: makeSnapshot(system)
+	} };
+});
+/**
+* When editing finishes, push the "beforeEditing" state to the history stack
+*/
+var pushHistory = () => machine.assign(({ context }) => {
+	const editing = context.editing;
+	if (editing) return {
+		editing: null,
+		history: {
+			head: editing.before,
+			tail: context.history
+		}
+	};
+	return {};
+});
+var reschedule = (delay = 300) => machine.raise(({ event }) => ({ ...event }), { delay });
+var undo = () => machine.enqueueActions(({ context: { history }, enqueue }) => {
+	if (!history) return;
+	const last = history.head;
+	enqueue.assign({ history: history.tail });
+	enqueue.sendTo(typedSystem.diagramActor, {
+		type: "update.view",
+		view: last.view,
+		xyedges: last.xyedges,
+		xynodes: last.xynodes,
+		source: "editor"
+	});
+	enqueue.cancel("undo-view");
+	enqueue.raise({
+		type: "change.view",
+		change: last.change
+	}, {
+		delay: 200,
+		id: "undo-view"
+	});
+});
+var 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-semantic-layout";
+			break;
+		case "change.sync-snapshot":
+			nextOp = "sync-snapshot";
+			break;
+		default: throw new Error(`Invalid event type: ${event.type}`);
+	}
+	if (syncQueue.length === 0) return { syncQueue: [nextOp] };
+	const isNextLayoutChange = isViewChange(nextOp) && isLayoutChange(nextOp);
+	let pending = syncQueue.filter((existingOp) => {
+		if (existingOp === nextOp) return false;
+		if (isNextLayoutChange && isViewChange(existingOp) && isLayoutChange(existingOp)) return false;
+		return true;
+	});
+	return { syncQueue: pending.length > 0 ? [...pending, nextOp] : [nextOp] };
+});
+//#endregion
+export { makeSnapshot, pushHistory, pushToSyncQueue, reschedule, saveBeforeEditing, scheduleSync, undo };

package/dist/editor/{hotkeyActor.d.ts → actor/hotkey.d.ts}

@@ -4,4 +4,4 @@ export type HotKeyEvent = {
 };
 export interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {
 }
-export declare const hotkeyActorLogic: HotkeyActorLogic;
+export declare const hotkey: HotkeyActorLogic;

package/dist/editor/actor/hotkey.js

@@ -0,0 +1,20 @@
+import "../../_virtual/_rolldown/runtime.js";
+import { getHotkeyHandler } from "@mantine/hooks";
+import { fromCallback } from "xstate";
+//#region src/editor/actor/hotkey.ts
+var hotkey = fromCallback(({ sendBack }) => {
+	const ctrlZHandler = getHotkeyHandler([[
+		"mod + z",
+		(event) => {
+			event.stopPropagation();
+			sendBack({ type: "undo" });
+		},
+		{ 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.ts

@@ -0,0 +1,11 @@
+import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
+import { EditorActorEvent, EditorActorContext, EditorActorEmitedEvent, EditorActorInput, EditorActorStateTag } from './types';
+export interface EditorActorLogic extends StateMachine<EditorActorContext, EditorActorEvent, any, any, any, any, any, {
+    editor: 'idle' | 'moving';
+    syncQueue: 'idle' | 'pending' | 'suspended' | 'process';
+}, EditorActorStateTag, EditorActorInput, any, EditorActorEmitedEvent, any, any> {
+}
+export declare const editorActorLogic: EditorActorLogic;
+export type EditorActorSnapshot = SnapshotFrom<EditorActorLogic>;
+export interface EditorActorRef extends ActorRef<EditorActorSnapshot, EditorActorEvent, EditorActorEmitedEvent> {
+}

package/dist/editor/actor/machine.js

@@ -0,0 +1,22 @@
+import "../../_virtual/_rolldown/runtime.js";
+import { machine } from "./setup.js";
+import { editor } from "./state.editor.js";
+import { syncQueue } from "./state.sync-queue.js";
+var editorActorLogic = machine.createMachine({
+	id: "editor",
+	context: ({ input }) => ({
+		viewId: input.viewId,
+		editing: null,
+		history: null,
+		pending: null,
+		syncQueue: [],
+		processing: null
+	}),
+	type: "parallel",
+	states: {
+		editor,
+		syncQueue
+	}
+});
+//#endregion
+export { editorActorLogic };

package/dist/editor/{editorActor.setup.d.ts → actor/setup.d.ts}

@@ -1,6 +1,6 @@
 import { NonReducibleUnknown, SetupReturn, PromiseActorLogic, EventObject, MetaObject } from 'xstate';
-import { Types } from '../likec4diagram/types';
-import { HotKeyEvent, HotkeyActorLogic } from './hotkeyActor';
+import { EditorActorContext, EditorActorEmitedEvent, EditorActorEvent, EditorActorInput, EditorActorStateTag } from './types';
+import { HotkeyActorLogic } from './hotkey';
 import type * as t from '@likec4/core/types';
 export declare namespace EditorCalls {
     type ApplyLatestToManual = (params: {
@@ -15,6 +15,15 @@ export declare namespace EditorCalls {
             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>;
@@ -26,59 +35,14 @@ export declare namespace EditorCalls {
         type Output = NonReducibleUnknown;
     }
 }
-export type EditorActorEvent = {
-    type: 'sync';
-} | {
-    type: 'change';
-    change: t.ViewChange;
-} | {
-    type: 'edit.start';
-    subject: 'node' | 'edge';
-} | {
-    type: 'edit.finish';
-    wasChanged?: boolean;
-} | {
-    type: 'applyLatestToManual';
-} | {
-    type: 'synced';
-} | {
-    type: 'cancel';
-} | {
-    type: 'reset';
-} | HotKeyEvent;
-export type HistorySnapshot = {
-    view: t.LayoutedView;
-    change: t.ViewChange.SaveViewSnapshot;
-    xynodes: Types.Node[];
-    xyedges: Types.Edge[];
-    synched: boolean;
-};
-export interface EditorActorInput {
-    viewId: t.ViewId;
-}
-export interface EditorActorContext {
-    viewId: t.ViewId;
-    pendingChanges: t.ViewChange[];
-    history: ReadonlyArray<HistorySnapshot>;
-    /**
-     * The state before editing started
-     */
-    beforeEditing: HistorySnapshot | null;
-    /**
-     * The subject of the edit
-     */
-    editing: 'node' | 'edge' | null;
-}
-export type EditorActorEmitedEvent = {
-    type: 'idle';
-};
 export declare const machine: SetupReturn<EditorActorContext, EditorActorEvent, {
     applyLatest: PromiseActorLogic<EditorCalls.ApplyLatestToManual.Output, EditorCalls.ApplyLatestToManual.Input, EventObject>;
     executeChange: PromiseActorLogic<NonReducibleUnknown, EditorCalls.ExecuteChange.Input, EventObject>;
+    applySemanticLayout: PromiseActorLogic<EditorCalls.ApplySemanticLayout.Output, EditorCalls.ApplySemanticLayout.Input, EventObject>;
     hotkey: HotkeyActorLogic;
 }, {
     hotkey: "hotkey";
 }, {}, {
     'has pending': unknown;
     'can undo': unknown;
-}, "500ms" | "waitBeforeSync", "pending", EditorActorInput, NonReducibleUnknown, EditorActorEmitedEvent, MetaObject>;
+}, "500ms" | "wait-after-edit", EditorActorStateTag, EditorActorInput, NonReducibleUnknown, EditorActorEmitedEvent, MetaObject>;

package/dist/editor/actor/setup.js

@@ -0,0 +1,35 @@
+import "../../_virtual/_rolldown/runtime.js";
+import { hotkey } from "./hotkey.js";
+import { fromPromise, setup } from "xstate";
+var machine = setup({
+	types: {
+		context: {},
+		events: {},
+		emitted: {},
+		input: {},
+		children: {},
+		tags: ""
+	},
+	actors: {
+		applyLatest: fromPromise(() => {
+			throw new Error("Not implemented");
+		}),
+		executeChange: fromPromise(() => {
+			throw new Error("Not implemented");
+		}),
+		applySemanticLayout: fromPromise(() => {
+			throw new Error("Not implemented");
+		}),
+		hotkey
+	},
+	delays: {
+		"500ms": 500,
+		"wait-after-edit": 1e3
+	},
+	guards: {
+		"has pending": ({ context }) => context.syncQueue.length > 0 || !!context.processing,
+		"can undo": ({ context }) => context.history !== null
+	}
+});
+//#endregion
+export { machine };

package/dist/editor/actor/state.editor.d.ts

@@ -0,0 +1,97 @@
+import { StopAction, ActionFunction, PromiseActorLogic, EventObject, NonReducibleUnknown } from 'xstate';
+import { EditorActorContext, EditorActorEvent, EditorActorEmitedEvent } from './types';
+import { HotkeyActorLogic } from './hotkey';
+export declare const editor: {
+    initial: string;
+    states: {
+        idle: {
+            on: {
+                'edit.move.start': {
+                    target: "#moving";
+                };
+            };
+            id: string;
+        };
+        moving: {
+            entry: StopAction<EditorActorContext, EditorActorEvent, undefined, EditorActorEvent>[];
+            on: {
+                'edit.move.end': {
+                    target: "#idle";
+                    actions: ( ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, never, never, never, "500ms" | "wait-after-edit", never> | ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, {
+                        src: "hotkey";
+                        logic: HotkeyActorLogic;
+                        id: "hotkey";
+                    } | {
+                        src: "applyLatest";
+                        logic: PromiseActorLogic<import("./setup").EditorCalls.ApplyLatestToManual.Output, import("./setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+                        id: string | undefined;
+                    } | {
+                        src: "executeChange";
+                        logic: PromiseActorLogic<NonReducibleUnknown, import("./setup").EditorCalls.ExecuteChange.Input, EventObject>;
+                        id: string | undefined;
+                    } | {
+                        src: "applySemanticLayout";
+                        logic: PromiseActorLogic<import("./setup").EditorCalls.ApplySemanticLayout.Output, import("./setup").EditorCalls.ApplySemanticLayout.Input, EventObject>;
+                        id: string | undefined;
+                    }, never, never, never, never>)[];
+                };
+                'edit.move.cancel': {
+                    target: "#idle";
+                    actions: ActionFunction<EditorActorContext, {
+                        type: "edit.move.cancel";
+                    }, EditorActorEvent, undefined, {
+                        src: "hotkey";
+                        logic: HotkeyActorLogic;
+                        id: "hotkey";
+                    } | {
+                        src: "applyLatest";
+                        logic: PromiseActorLogic<import("./setup").EditorCalls.ApplyLatestToManual.Output, import("./setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+                        id: string | undefined;
+                    } | {
+                        src: "executeChange";
+                        logic: PromiseActorLogic<NonReducibleUnknown, import("./setup").EditorCalls.ExecuteChange.Input, EventObject>;
+                        id: string | undefined;
+                    } | {
+                        src: "applySemanticLayout";
+                        logic: PromiseActorLogic<import("./setup").EditorCalls.ApplySemanticLayout.Output, import("./setup").EditorCalls.ApplySemanticLayout.Input, EventObject>;
+                        id: string | undefined;
+                    }, never, never, never, never>[];
+                };
+                undo: {
+                    target: "#idle";
+                };
+            };
+            id: string;
+        };
+    };
+    on: {
+        cancel: {
+            target: "#idle";
+        };
+        '*': {
+            actions: ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, {
+                src: "hotkey";
+                logic: HotkeyActorLogic;
+                id: "hotkey";
+            } | {
+                src: "applyLatest";
+                logic: PromiseActorLogic<import("./setup").EditorCalls.ApplyLatestToManual.Output, import("./setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+                id: string | undefined;
+            } | {
+                src: "executeChange";
+                logic: PromiseActorLogic<NonReducibleUnknown, import("./setup").EditorCalls.ExecuteChange.Input, EventObject>;
+                id: string | undefined;
+            } | {
+                src: "applySemanticLayout";
+                logic: PromiseActorLogic<import("./setup").EditorCalls.ApplySemanticLayout.Output, import("./setup").EditorCalls.ApplySemanticLayout.Input, EventObject>;
+                id: string | undefined;
+            }, never, {
+                type: "has pending";
+                params: unknown;
+            } | {
+                type: "can undo";
+                params: unknown;
+            }, "500ms" | "wait-after-edit", EditorActorEmitedEvent>;
+        };
+    };
+};

package/dist/editor/actor/state.editor.js

@@ -0,0 +1,55 @@
+import "../../_virtual/_rolldown/runtime.js";
+import { machine } from "./setup.js";
+import { pushHistory, saveBeforeEditing, scheduleSync } from "./actions.js";
+import { assign } from "xstate";
+//#region src/editor/actor/state.editor.ts
+var to = {
+	idle: { target: "#idle" },
+	moving: { target: "#moving" }
+};
+var idOf = (t) => ({ id: t.target.substring(1) });
+var stopHotkey = () => machine.stopChild("hotkey");
+var ensureHotKey = () => machine.enqueueActions(({ check, enqueue, self }) => {
+	const hasUndo = check("can undo");
+	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
+*/
+var idle = machine.createStateConfig({
+	...idOf(to.idle),
+	on: { "edit.move.start": { ...to.moving } }
+});
+var moving = machine.createStateConfig({
+	...idOf(to.moving),
+	entry: [saveBeforeEditing, stopHotkey()],
+	on: {
+		"edit.move.end": {
+			actions: [pushHistory(), scheduleSync()],
+			...to.idle
+		},
+		"edit.move.cancel": {
+			actions: [assign({ editing: null })],
+			...to.idle
+		},
+		"undo": { ...to.idle }
+	}
+});
+var editor = machine.createStateConfig({
+	initial: "idle",
+	states: {
+		idle,
+		moving
+	},
+	on: {
+		"cancel": { ...to.idle },
+		"*": { actions: ensureHotKey() }
+	}
+});
+//#endregion
+export { editor };