@likec4/diagram 1.59.3 → 1.60.0

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

@@ -1,273 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { machine } from "./setup.js";
-import { typedSystem } from "../../likec4diagram/state/utils.js";
-import { cancelSync, clearQueue, deleteNodesAndEdges, makeSnapshot, pushToSyncQueue, redo, scheduleSync, undo } from "./actions.js";
-import { isViewChange } from "./types.js";
-import { findLast } from "remeda";
-import { invariant } from "@likec4/core";
-import { assign, enqueueActions, log, sendTo } from "xstate";
-//#region src/editor/actor/state.sync-queue.ts
-var to = {
-	idle: { target: "#queue-idle" },
-	pending: { target: "#queue-pending" },
-	suspended: { target: "#queue-suspended" },
-	process: { target: "#queue-process" }
-};
-var idOf = (t) => ({ id: t.target.substring(1) });
-/**
-* Idle state, no pending operations
-*/
-var 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
-*/
-var 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
-*/
-var suspended = machine.createStateConfig({
-	...idOf(to.suspended),
-	on: {
-		"edit.*": to.idle,
-		"cancel": {
-			actions: [clearQueue(), cancelSync()],
-			...to.idle
-		}
-	}
-});
-var peekFromQueue = () => machine.assign(({ system, context: { syncQueue } }) => {
-	let [head, ...tail] = syncQueue;
-	if (head === "sync-snapshot") head = makeSnapshot(system).change;
-	return {
-		processing: head ?? null,
-		syncQueue: tail
-	};
-});
-var clearProcessing = () => ({ processing: null });
-/**
-* Processing pending operation
-*/
-var 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 }) => {
-					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: {}
-});
-var syncQueue = machine.createStateConfig({
-	initial: "idle",
-	states: {
-		idle,
-		pending,
-		suspended,
-		process
-	},
-	on: {}
-});
-//#endregion
-export { syncQueue };

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

@@ -1,64 +0,0 @@
-import { Types } from '../../likec4diagram/types';
-import { HotKeyEvent } from './hotkey';
-import type * as t from '@likec4/core/types';
-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 declare const isViewChange: (change: SyncOp | null) => change is t.ViewChange;
-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';

package/dist/editor/actor/types.js

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

package/dist/editor/applyChangesToManualLayout.d.ts

@@ -1,8 +0,0 @@
-import * as t from '@likec4/core/types';
-/**
- * Applies changes to a manual layout.
- *
- * @param manual - The manual layout.
- * @param latest - The latest layout.
- */
-export declare function applyChangesToManualLayout(manualView: t.LayoutedView, latestView: t.LayoutedView): t.LayoutedView;

package/dist/editor/applyChangesToManualLayout.js

@@ -1,164 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-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);
-	}
-}
-var 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, nodesMap.get(latest.source), nodesMap.get(latest.target));
-	});
-	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)
-*/
-var 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;
-		}
-		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;
-		}
-		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.ts

@@ -1,5 +0,0 @@
-export type * from './actor/machine';
-export type * from './actor/types';
-export { createLikeC4Editor } from './LikeC4EditorCallbacks';
-export type { LikeC4EditorCallbacks, LikeC4EditorChangeResult, } from './LikeC4EditorCallbacks';
-export { EnsureEditorContext, LikeC4EditorProvider, useOptionalLikeC4Editor, } from './LikeC4EditorProvider';

package/dist/editor/useEditorActorLogic.d.ts

@@ -1,8 +0,0 @@
-import { EditorActorLogic } from './actor/machine';
-export declare function useEditorActorLogic(): EditorActorLogic & {
-    /**
-     * True if the editor is running in stub mode (no actual editor port available)
-     * This happens when the diagram is rendered outside of vscode extension / vite- plugin
-     */
-    readonly isStub: boolean;
-};

package/dist/editor/useEditorActorLogic.js

@@ -1,74 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { useCallbackRef } from "../hooks/useCallbackRef.js";
-import { shouldWaitForViewSync } from "./LikeC4EditorCallbacks.js";
-import { useOptionalLikeC4Editor } from "./LikeC4EditorProvider.js";
-import { editorActorLogic } from "./actor/machine.js";
-import { applyChangesToManualLayout } from "./applyChangesToManualLayout.js";
-import { useMemo } from "react";
-import { isNullish } from "remeda";
-import { fromPromise } from "xstate";
-//#region src/editor/useEditorActorLogic.ts
-var 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");
-		}
-		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");
-		}
-		await port.applySemanticLayout(input.viewId);
-		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 };

package/dist/hooks/index.d.ts

@@ -1,14 +0,0 @@
-export { useCallbackRef } from './useCallbackRef';
-export { useId } from './useId';
-export { useMantinePortalProps } from './useMantinePortalProps';
-export { useMediaPrint } from './useMediaPrint';
-export { useSetState } from './useSetState';
-export { useUpdateEffect } from './useUpdateEffect';
-export { useCurrentZoom, useCurrentZoomAtLeast, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi, } from './useXYFlow';
-export type { XYFlowInstance, XYStoreApi, XYStoreState } from './useXYFlow';
-export { useCurrentView, useCurrentViewId } from './useCurrentView';
-export { useCurrentViewModel } from './useCurrentViewModel';
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, useOptionalLikeC4Model, } from './useLikeC4Model';
-export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './useLikeC4Project';
-export { useLikeC4Styles } from './useLikeC4Styles';
-export { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramSelector, useOnDiagramEvent, } from './useDiagram';