@likec4/diagram 1.59.4 → 1.60.0

package/dist/likec4diagram/state/machine.state.ready.mjs

@@ -0,0 +1,154 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { typedSystem } from "./utils.mjs";
+import { machine, to } from "./machine.setup.mjs";
+import { cancelFitDiagram, centerOnNodeOrEdge, fitDiagram, raiseFitDiagram, setViewport } from "./machine.actions.layout.mjs";
+import { assignLastClickedNode, assignToggledFeatures, cancelEditing, closeAllOverlays, collapseOrExpandSequenceFlow, disableCompareWithLatest, emitEdgeClick, emitNodeClick, emitOpenSource, emitOpenSourceOfView, emitPaneClick, ensureAllActors, ensureEditorActor, ensureOverlaysActor, ensureSearchActor, handleNavigate, highlightNodeOrEdge, layoutAlign, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openOverlay, resetEdgesControlPoints, resetLastClickedNode, startEditing, stopEditing, tagHighlight, triggerChange, undimEverything, updateFeatures, updateView } from "./machine.actions.mjs";
+import { focused } from "./machine.state.ready.focused.mjs";
+import { idle } from "./machine.state.ready.idle.mjs";
+import { printing } from "./machine.state.ready.printing.mjs";
+import { walkthrough } from "./machine.state.ready.walkthrough.mjs";
+import { assign, sendTo, spawnChild, stopChild } from "xstate/actions";
+import { and } from "xstate/guards";
+
+//#region src/likec4diagram/state/machine.state.ready.ts
+const ready = machine.createStateConfig({
+	initial: "idle",
+	entry: [spawnChild("mediaPrint", { id: "mediaPrint" }), ensureAllActors()],
+	exit: [
+		cancelFitDiagram(),
+		closeAllOverlays(),
+		stopChild("mediaPrint"),
+		stopChild(typedSystem.overlaysActor),
+		stopChild(typedSystem.editorActor),
+		stopChild(typedSystem.searchActor)
+	],
+	states: {
+		idle,
+		focused,
+		walkthrough,
+		printing
+	},
+	on: {
+		"layout.align": {
+			guard: "not readonly",
+			actions: [
+				startEditing("node"),
+				layoutAlign(),
+				stopEditing(true)
+			]
+		},
+		"layout.resetEdgeControlPoints": {
+			guard: "not readonly",
+			actions: [
+				startEditing("edge"),
+				resetEdgesControlPoints(),
+				stopEditing(true)
+			]
+		},
+		"layout.resetManualLayout": {
+			guard: "enabled: Editor",
+			actions: [
+				cancelEditing(),
+				disableCompareWithLatest(),
+				assign({ viewportChangedManually: false }),
+				triggerChange({ op: "reset-manual-layout" })
+			]
+		},
+		"media.print.on": { ...to.printing },
+		"navigate.*": { actions: handleNavigate() },
+		"notations.highlight": { actions: notationsHighlight() },
+		"notations.unhighlight": { actions: undimEverything() },
+		"highlight.*": { actions: highlightNodeOrEdge() },
+		"unhighlight.all": { actions: undimEverything() },
+		"open.elementDetails": { actions: openOverlay() },
+		"open.relationshipDetails": { actions: openOverlay() },
+		"open.relationshipsBrowser": { actions: openOverlay() },
+		"open.search": {
+			guard: "enabled: Search",
+			actions: sendTo(typedSystem.searchActor, ({ event }) => ({
+				type: "open",
+				search: event.search
+			}))
+		},
+		"open.source": { actions: emitOpenSource() },
+		"tag.highlight": { actions: tagHighlight() },
+		"tag.unhighlight": { actions: undimEverything() },
+		"toggle.feature": { actions: assignToggledFeatures() },
+		"update.features": { actions: [
+			updateFeatures(),
+			ensureOverlaysActor(),
+			ensureSearchActor(),
+			ensureEditorActor()
+		] },
+		"update.view": [{
+			guard: "is another view",
+			...to.navigating
+		}, { actions: updateView() }],
+		"walkthrough.start": {
+			guard: "is dynamic view",
+			...to.walkthrough
+		},
+		"sequence.flow.*": {
+			guard: "is dynamic view",
+			actions: [collapseOrExpandSequenceFlow(), resetLastClickedNode()]
+		},
+		"xyflow.edgeClick": { actions: [resetLastClickedNode(), emitEdgeClick()] },
+		"xyflow.edgeDoubleClick": {
+			guard: and(["not readonly", ({ event }) => !!event.edge.data.controlPoints && event.edge.data.controlPoints.length > 0]),
+			actions: [
+				startEditing("edge"),
+				onEdgeDoubleClick(),
+				stopEditing(true)
+			]
+		},
+		"xyflow.edgeMouseEnter": { actions: onEdgeMouseEnter() },
+		"xyflow.edgeMouseLeave": { actions: onEdgeMouseLeave() },
+		"xyflow.centerViewport": { actions: centerOnNodeOrEdge() },
+		"xyflow.fitDiagram": {
+			guard: "enabled: FitView",
+			actions: [assign({ viewportChangedManually: false }), fitDiagram()]
+		},
+		"xyflow.nodeClick": { actions: [assignLastClickedNode(), emitNodeClick()] },
+		"xyflow.nodeMouseEnter": { actions: onNodeMouseEnter() },
+		"xyflow.nodeMouseLeave": { actions: onNodeMouseLeave() },
+		"xyflow.paneClick": { actions: [resetLastClickedNode(), emitPaneClick()] },
+		"xyflow.resetSelection": { actions: ({ context }) => {
+			context.xystore?.getState().resetSelectedElements();
+		} },
+		"xyflow.select": { actions: assign(({ context, event }) => ({
+			xynodes: context.xynodes.map((node) => {
+				let selected = false;
+				if (event.nodes && event.nodes.length > 0) selected = event.nodes.includes(node.data.id);
+				if (selected !== (node.selected ?? false)) return {
+					...node,
+					selected
+				};
+				return node;
+			}),
+			xyedges: context.xyedges.map((edge) => {
+				let selected = false;
+				if (event.edges && event.edges.length > 0) selected = event.edges.includes(edge.data.id);
+				if (selected !== (edge.selected ?? false)) return {
+					...edge,
+					selected
+				};
+				return edge;
+			})
+		})) },
+		"xyflow.paneDblClick": { actions: [
+			resetLastClickedNode(),
+			cancelFitDiagram(),
+			raiseFitDiagram(),
+			emitOpenSourceOfView(),
+			emitPaneClick()
+		] },
+		"xyflow.resized": {
+			guard: ({ context }) => context.features.enableFitView && !context.viewportChangedManually,
+			actions: [cancelFitDiagram(), raiseFitDiagram({ delay: 150 })]
+		},
+		"xyflow.setViewport": { actions: setViewport() }
+	}
+});
+
+//#endregion
+export { ready };

package/dist/likec4diagram/state/machine.state.ready.printing.mjs

@@ -0,0 +1,42 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { viewBounds } from "./utils.mjs";
+import { machine, targetState, to } from "./machine.setup.mjs";
+import { assignViewportBefore, cancelFitDiagram, returnViewportBefore, setViewport } from "./machine.actions.layout.mjs";
+import { enqueueActions, log } from "xstate";
+
+//#region src/likec4diagram/state/machine.state.ready.printing.ts
+/**
+* State when the diagram is being prepared for printing.
+* Adjusts the viewport to fit the entire diagram for optimal printing.
+* Restores the previous viewport upon exiting the state.
+*/
+const printing = machine.createStateConfig({
+	id: targetState.printing.slice(1),
+	entry: [
+		cancelFitDiagram(),
+		assignViewportBefore(),
+		enqueueActions(({ enqueue, context }) => {
+			const bounds = viewBounds(context);
+			const OFFSET = 16;
+			enqueue(setViewport({
+				viewport: {
+					x: bounds.x + OFFSET,
+					y: bounds.y + OFFSET,
+					zoom: 1
+				},
+				duration: 0
+			}));
+		})
+	],
+	exit: [returnViewportBefore({
+		delay: 0,
+		duration: 0
+	})],
+	on: {
+		"media.print.off": { ...to.idle },
+		"*": { actions: [log(({ event }) => `Printing state - ignoring event: ${event.type}`)] }
+	}
+});
+
+//#endregion
+export { printing };

package/dist/likec4diagram/state/machine.state.ready.walkthrough.mjs

@@ -0,0 +1,262 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { roundDpr } from "../../utils/roundDpr.mjs";
+import { Base } from "../../base/Base.mjs";
+import { machine, targetState, to } from "./machine.setup.mjs";
+import { assignViewportBefore, cancelFitDiagram, fitFocusedBounds, returnViewportBefore } from "./machine.actions.layout.mjs";
+import { assignLastClickedNode, cancelEditing, collapseOrExpandSequenceFlow, emitEdgeClick, emitPaneClick, resetLastClickedNode, resetSelection, startHotKeyActor, stopHotKeyActor, updateView } from "./machine.actions.mjs";
+import { clamp, find, firstBy, isNumber, map } from "remeda";
+import { invariant, nonNullable } from "@likec4/core";
+import { dynamicViewFlow as dynamicViewFlow$1, flowAncestors as flowAncestors$1, flowGuards, flowHelpers, isDynamicView as isDynamicView$1, isDynamicViewWithFlow as isDynamicViewWithFlow$1, isStepPath as isStepPath$1, parentFlow } from "@likec4/core/types";
+import { assertEvent, enqueueActions } from "xstate";
+import { assign as assign$1, raise as raise$1 } from "xstate/actions";
+
+//#region src/likec4diagram/state/machine.state.ready.walkthrough.ts
+const byId = (id) => (e) => e.data.id === id && isNumber(e.data.stepnum);
+const outlinePanelWidth = ({ activeWalkthrough, xystore }) => {
+	if (activeWalkthrough) return activeWalkthrough.outlinePanelWidth;
+	const { width } = xystore.getState();
+	return clamp(roundDpr(width * .3), {
+		min: 240,
+		max: 500
+	});
+};
+const guardContext = (context) => {
+	const { activeWalkthrough, view } = context;
+	invariant(isDynamicViewWithFlow$1(view), "View must be a dynamic view with flows");
+	invariant(activeWalkthrough, "Active walkthrough must not be null");
+	return {
+		activeWalkthrough,
+		view
+	};
+};
+/**
+* Creates a predicate that checks if a step is collapsed based on the current state
+*/
+const isCollapsed = (context) => (step) => {
+	const path = flowHelpers.extractPath(step);
+	return context.collapsedSequenceFlows[path] ?? false;
+};
+const updateActiveWalkthroughState = () => machine.enqueueActions(({ context, enqueue }) => {
+	const { activeWalkthrough } = context;
+	if (!activeWalkthrough) {
+		console.warn("Active walkthrough is null");
+		enqueue.raise({ type: "walkthrough.end" });
+		return;
+	}
+	const { stepId, activeFlow } = activeWalkthrough;
+	const step = context.xyedges.find(byId(stepId));
+	if (!step) {
+		console.warn("Invalid walkthrough stepId:", stepId);
+		enqueue.raise({ type: "walkthrough.end" });
+		return;
+	}
+	invariant(isDynamicView$1(context.view));
+	let processedSteps;
+	if (context.view.flow && context.dynamicViewVariant == "sequence") {
+		const flow = dynamicViewFlow$1(context.view);
+		processedSteps = new Set(flow.stepPathsBefore(stepId));
+	} else processedSteps = /* @__PURE__ */ new Set();
+	const parentActiveFlow = activeFlow ? parentFlow(activeFlow) : null;
+	enqueue.assign({
+		xyedges: context.xyedges.map((edge) => {
+			if (edge.data.id === step.data.id) return Base.setData(edge, {
+				active: true,
+				state: "active",
+				dimmed: false
+			});
+			if (processedSteps.has(edge.data.id)) return Base.setData(edge, {
+				active: false,
+				state: "processed",
+				dimmed: true
+			});
+			if (isNumber(edge.data.stepnum) && edge.data.stepnum <= step.data.stepnum) return Base.setData(edge, {
+				active: false,
+				state: "skipped",
+				dimmed: true
+			});
+			return Base.setData(edge, {
+				active: false,
+				state: "pending",
+				dimmed: true
+			});
+		}),
+		xynodes: context.xynodes.map((node) => {
+			const dimmed = step.source !== node.id && step.target !== node.id;
+			if (node.type === "seq-subflow" && activeFlow) switch (true) {
+				case node.data.flowId == parentActiveFlow && (node.data.flowType === "try" || node.data.flowType === "alt"):
+				case node.data.flowId == activeFlow: return Base.setDimmed(node, false);
+				default: return Base.setDimmed(node, true);
+			}
+			return Base.setDimmed(node, dimmed);
+		})
+	});
+	enqueue(resetSelection());
+});
+const clearWalkthroughState = () => machine.assign(({ context }) => {
+	return {
+		activeWalkthrough: null,
+		xynodes: map(context.xynodes, Base.setDimmed(false)),
+		xyedges: map(context.xyedges, Base.setData({
+			state: null,
+			dimmed: false,
+			active: false
+		}))
+	};
+});
+const checkIfActiveStepCollapsed = () => machine.enqueueActions(({ context, enqueue }) => {
+	const { activeWalkthrough, view } = guardContext(context);
+	const checkIsCollapsed = isCollapsed(context);
+	if (!find(flowAncestors$1(activeWalkthrough.stepId), checkIsCollapsed)) return;
+	const { prev, next } = dynamicViewFlow$1(view).prevAndNext(activeWalkthrough.stepId, checkIsCollapsed);
+	const goToStep = prev ?? next;
+	if (!goToStep) return;
+	enqueue.raise({
+		type: "walkthrough.step",
+		stepId: goToStep
+	});
+});
+const emitWalkthroughStarted = () => machine.emit(({ context }) => {
+	return {
+		type: "walkthroughStarted",
+		edge: nonNullable(context.xyedges.find((x) => x.data.id === context.activeWalkthrough?.stepId), "Walkthrough step not found")
+	};
+});
+const emitWalkthroughStopped = () => machine.emit(() => ({ type: "walkthroughStopped" }));
+const emitWalkthroughStep = () => machine.emit(({ context }) => {
+	const stepId = nonNullable(context.activeWalkthrough?.stepId);
+	return {
+		type: "walkthroughStep",
+		edge: nonNullable(context.xyedges.find((x) => x.data.id === stepId), `Walkthrough step edge ${stepId} not found`),
+		stepId
+	};
+});
+const walkthrough = machine.createStateConfig({
+	id: targetState.walkthrough.slice(1),
+	entry: [
+		cancelEditing(),
+		cancelFitDiagram(),
+		assignViewportBefore(),
+		assign$1(({ context, event }) => {
+			assertEvent(event, "walkthrough.start");
+			const stepId = event.stepId ?? firstBy(context.xyedges, (e) => isStepPath$1(e.data.id))?.data.id;
+			return { activeWalkthrough: isStepPath$1(stepId) ? {
+				stepId,
+				activeFlow: parentFlow(stepId),
+				outlinePanelWidth: outlinePanelWidth(context)
+			} : null };
+		}),
+		updateActiveWalkthroughState(),
+		fitFocusedBounds(),
+		emitWalkthroughStarted(),
+		startHotKeyActor()
+	],
+	exit: [
+		stopHotKeyActor(),
+		cancelFitDiagram(),
+		clearWalkthroughState(),
+		resetSelection(),
+		returnViewportBefore(),
+		emitWalkthroughStopped()
+	],
+	on: {
+		"key.esc": { target: targetState.idle },
+		"key.arrow.left": { actions: raise$1({
+			type: "walkthrough.step",
+			direction: "prev"
+		}) },
+		"key.arrow.up": { actions: raise$1({
+			type: "walkthrough.step",
+			direction: "prev"
+		}) },
+		"key.arrow.right": { actions: raise$1({
+			type: "walkthrough.step",
+			direction: "next"
+		}) },
+		"key.arrow.down": { actions: raise$1({
+			type: "walkthrough.step",
+			direction: "next"
+		}) },
+		"sequence.flow.*": { actions: [
+			collapseOrExpandSequenceFlow(),
+			resetLastClickedNode(),
+			checkIfActiveStepCollapsed()
+		] },
+		"walkthrough.step": { actions: [enqueueActions(({ enqueue, context, event }) => {
+			let predicate;
+			const activeWalkthrough = nonNullable(context.activeWalkthrough, "walkthrough.step: activeWalkthrough is null");
+			if (event.direction) {
+				invariant(isDynamicView$1(context.view));
+				const { stepId } = activeWalkthrough;
+				const prevNext = dynamicViewFlow$1(context.view).prevAndNext(stepId, isCollapsed(context));
+				predicate = (edge) => edge.data.id === prevNext[event.direction];
+			} else predicate = (edge) => edge.data.id === event.stepId;
+			const nextStepId = context.xyedges.find(predicate)?.data.id;
+			if (!isStepPath$1(nextStepId) || activeWalkthrough.stepId === nextStepId) return;
+			enqueue.assign({ activeWalkthrough: {
+				...activeWalkthrough,
+				stepId: nextStepId,
+				activeFlow: parentFlow(nextStepId)
+			} });
+			enqueue(updateActiveWalkthroughState());
+			enqueue(fitFocusedBounds());
+			enqueue(emitWalkthroughStep());
+		})] },
+		"xyflow.edgeClick": [{
+			guard: "click: active walkthrough step",
+			actions: [fitFocusedBounds(), emitEdgeClick()]
+		}, { actions: [
+			assign$1(({ event, context }) => {
+				invariant(!!context.activeWalkthrough);
+				const stepId = event.edge.data.id;
+				invariant(isStepPath$1(stepId), `Expected step edge, but got "${stepId}"`);
+				return { activeWalkthrough: {
+					...context.activeWalkthrough,
+					stepId,
+					activeFlow: parentFlow(stepId)
+				} };
+			}),
+			updateActiveWalkthroughState(),
+			fitFocusedBounds({ duration: 600 }),
+			emitEdgeClick(),
+			emitWalkthroughStep()
+		] }],
+		"xyflow.nodeClick": {
+			guard: "click: node.type = seq-subflow",
+			actions: [enqueueActions(({ enqueue, event: { node }, context }) => {
+				invariant(node.type === "seq-subflow");
+				if (node.data.collapsed) {
+					enqueue.raise({
+						type: "sequence.flow.expand",
+						flowId: node.data.flowId
+					});
+					return;
+				}
+				invariant(isDynamicView$1(context.view));
+				const flow = dynamicViewFlow$1(context.view);
+				const nextStepId = flow.firstStep(node.data.flowId) ?? flow.firstStep();
+				if (nextStepId !== context.activeWalkthrough?.stepId) {
+					enqueue.raise({
+						type: "walkthrough.step",
+						stepId: nextStepId
+					});
+					return;
+				}
+				if (context.lastClickedNode?.id === node.id && context.lastClickedNode.clicks > 2) enqueue.raise({ type: "walkthrough.end" });
+			}), assignLastClickedNode()]
+		},
+		"notations.unhighlight": { actions: updateActiveWalkthroughState() },
+		"tag.unhighlight": { actions: updateActiveWalkthroughState() },
+		"update.view": {
+			guard: "is same view",
+			actions: [updateView(), updateActiveWalkthroughState()]
+		},
+		"walkthrough.end": { ...to.idle },
+		"xyflow.paneDblClick": {
+			actions: [resetLastClickedNode(), emitPaneClick()],
+			...to.idle
+		}
+	}
+});
+
+//#endregion
+export { walkthrough };

package/dist/likec4diagram/state/mediaPrintActor.d.mts

@@ -0,0 +1,10 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { AnyEventObject, CallbackActorLogic, NonReducibleUnknown } from "xstate";
+//#region src/likec4diagram/state/mediaPrintActor.d.ts
+export type MediaPrintEvent = {
+  type: 'media.print.on';
+} | {
+  type: 'media.print.off';
+};
+export interface MediaPrintActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, MediaPrintEvent> {}
+//#endregion

package/dist/likec4diagram/state/mediaPrintActor.mjs

@@ -0,0 +1,24 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { fromCallback } from "xstate";
+
+//#region src/likec4diagram/state/mediaPrintActor.ts
+/**
+* Actor logic to listen for media print events.
+*/
+const mediaPrintActorLogic = fromCallback(({ sendBack }) => {
+	const beforePrint = () => {
+		sendBack({ type: "media.print.on" });
+	};
+	const afterPrint = () => {
+		sendBack({ type: "media.print.off" });
+	};
+	window.addEventListener("beforeprint", beforePrint);
+	window.addEventListener("afterprint", afterPrint);
+	return () => {
+		window.removeEventListener("beforeprint", beforePrint);
+		window.removeEventListener("afterprint", afterPrint);
+	};
+});
+
+//#endregion
+export { mediaPrintActorLogic };

package/dist/likec4diagram/state/persistence.mjs

@@ -0,0 +1,24 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { isBoolean, pickBy } from "remeda";
+
+//#region src/likec4diagram/state/persistence.ts
+const key = `likec4:diagram:toggledFeatures`;
+const DiagramToggledFeaturesPersistence = {
+	read() {
+		try {
+			let fromStorage = sessionStorage.getItem(key);
+			if (fromStorage) return JSON.parse(fromStorage);
+			return null;
+		} catch (e) {
+			if (import.meta.env.MODE !== "test") console.error(`Error reading fromStorage ${key}:`, e);
+			return null;
+		}
+	},
+	write(toggledFeatures) {
+		sessionStorage.setItem(key, JSON.stringify(pickBy(toggledFeatures, isBoolean)));
+		return toggledFeatures;
+	}
+};
+
+//#endregion
+export { DiagramToggledFeaturesPersistence };

package/dist/likec4diagram/state/types.d.mts

@@ -0,0 +1,23 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { BaseEditorActorRef } from "../../editor/actor/setup.mjs";
+import { NavigationPanelActorRef } from "../../navigationpanel/actor.mjs";
+import { OverlaysActorRef } from "../../overlays/overlaysActor.mjs";
+import { SearchActorRef } from "../../search/searchActor.mjs";
+import { Context, ElementViewDisplayVariant, EmittedEvents, Events } from "./machine.setup.mjs";
+import { DiagramMachineRef, DiagramMachineSnapshot } from "./machine.mjs";
+import { ActorSystem } from "xstate";
+//#region src/likec4diagram/state/types.d.ts
+export type System = ActorSystem<{
+  actors: {
+    diagram: DiagramMachineRef;
+    overlays: OverlaysActorRef;
+    search: SearchActorRef;
+    editor: BaseEditorActorRef;
+    navigationPanel: NavigationPanelActorRef;
+  };
+}>;
+export interface DiagramActorRef extends DiagramMachineRef {
+  system: System;
+}
+//#endregion
+export type { DiagramMachineSnapshot as DiagramActorSnapshot, Context as DiagramContext, EmittedEvents as DiagramEmittedEvents, Events as DiagramEvents };