@likec4/diagram 1.59.3 → 1.60.0

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

@@ -1,227 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { roundDpr } from "../../utils/roundDpr.js";
-import { Base } from "../../base/Base.js";
-import { machine, targetState, to } from "./machine.setup.js";
-import { assignViewportBefore, cancelFitDiagram, fitFocusedBounds, returnViewportBefore } from "./machine.actions.layout.js";
-import { assignLastClickedNode, cancelEditing, emitEdgeClick, emitPaneClick, resetLastClickedNode, resetSelection, startHotKeyActor, stopHotKeyActor, updateView } from "./machine.actions.js";
-import { clamp, firstBy, isNumber, map } from "remeda";
-import { invariant, nonNullable } from "@likec4/core";
-import { dynamicViewFlow as dynamicViewFlow$1, isDynamicView as isDynamicView$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
-var byId = (id) => (e) => e.data.id === id && isNumber(e.data.stepnum);
-var outlinePanelWidth = ({ activeWalkthrough, xystore }) => {
-	if (activeWalkthrough) return activeWalkthrough.outlinePanelWidth;
-	const { width } = xystore.getState();
-	return clamp(roundDpr(width * .3), {
-		min: 180,
-		max: 400
-	});
-};
-var 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());
-});
-var 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
-		}))
-	};
-});
-var emitWalkthroughStarted = () => machine.emit(({ context }) => {
-	return {
-		type: "walkthroughStarted",
-		edge: nonNullable(context.xyedges.find((x) => x.data.id === context.activeWalkthrough?.stepId), "Walkthrough step not found")
-	};
-});
-var emitWalkthroughStopped = () => machine.emit(() => ({ type: "walkthroughStopped" }));
-var 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
-	};
-});
-var 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"
-		}) },
-		"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, (flowId) => context.collapsedSequenceFlows[flowId] ?? false);
-				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.ts

@@ -1,12 +0,0 @@
-import { AnyEventObject, CallbackActorLogic, NonReducibleUnknown } from 'xstate';
-export type MediaPrintEvent = {
-    type: 'media.print.on';
-} | {
-    type: 'media.print.off';
-};
-export interface MediaPrintActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, MediaPrintEvent> {
-}
-/**
- * Actor logic to listen for media print events.
- */
-export declare const mediaPrintActorLogic: MediaPrintActorLogic;

package/dist/likec4diagram/state/mediaPrintActor.js

@@ -1,22 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { fromCallback } from "xstate";
-//#region src/likec4diagram/state/mediaPrintActor.ts
-/**
-* Actor logic to listen for media print events.
-*/
-var 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.d.ts

@@ -1,5 +0,0 @@
-import { EnabledFeatures } from '../../context/DiagramFeatures';
-export declare const DiagramToggledFeaturesPersistence: {
-    read(): Partial<EnabledFeatures> | null;
-    write<F extends Partial<EnabledFeatures>>(toggledFeatures: F): F;
-};

package/dist/likec4diagram/state/persistence.js

@@ -1,22 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { isBoolean, pickBy } from "remeda";
-//#region src/likec4diagram/state/persistence.ts
-var key = `likec4:diagram:toggledFeatures`;
-var DiagramToggledFeaturesPersistence = {
-	read() {
-		try {
-			let fromStorage = sessionStorage.getItem(key);
-			if (fromStorage) return JSON.parse(fromStorage);
-			return null;
-		} catch (e) {
-			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.ts

@@ -1,23 +0,0 @@
-import { ActorSystem } from 'xstate';
-import { BaseEditorActorRef } from '../../editor/actor/setup';
-import { NavigationPanelActorRef } from '../../navigationpanel/actor';
-import { OverlaysActorRef } from '../../overlays/overlaysActor';
-import { SearchActorRef } from '../../search/searchActor';
-import { DiagramMachineRef } from './machine';
-export type NodeWithData = {
-    id: string;
-    data: Record<string, unknown>;
-};
-export type System = ActorSystem<{
-    actors: {
-        diagram: DiagramMachineRef;
-        overlays: OverlaysActorRef;
-        search: SearchActorRef;
-        editor: BaseEditorActorRef;
-        navigationPanel: NavigationPanelActorRef;
-    };
-}>;
-export interface DiagramActorRef extends DiagramMachineRef {
-    system: System;
-}
-export type { DiagramContext, DiagramEmittedEvents, DiagramEvents, DiagramMachineSnapshot as DiagramActorSnapshot, } from './machine';

package/dist/likec4diagram/state/utils.d.ts

@@ -1,73 +0,0 @@
-import { BBox } from '@likec4/core/geometry';
-import { DeploymentFqn, DiagramEdge, DiagramNode, DiagramView, Fqn } from '@likec4/core/types';
-import { Viewport } from '@xyflow/system';
-import { ActorSystem } from 'xstate';
-import { EditorActorRef } from '../../editor/actor/machine';
-import { XYStoreState } from '../../hooks/useXYFlow';
-import { NavigationPanelActorRef } from '../../navigationpanel/actor';
-import { OverlaysActorRef } from '../../overlays/overlaysActor';
-import { SearchActorRef } from '../../search/searchActor';
-import { Types } from '../types';
-import { Context } from './machine.setup';
-import { DiagramActorRef, NodeWithData } from './types';
-export declare const findNodeByModelFqn: <T extends NodeWithData>(xynodes: T[], elementFqn: Fqn) => (T & {
-    data: {
-        modelFqn: Fqn;
-    };
-}) | null;
-export declare function typedSystem(system: ActorSystem<any>): {
-    readonly overlaysActorRef: OverlaysActorRef | null;
-    readonly diagramActorRef: DiagramActorRef;
-    readonly searchActorRef: SearchActorRef | null;
-    readonly editorActorRef: EditorActorRef | null;
-    readonly navigationActorRef: NavigationPanelActorRef | null;
-};
-export declare namespace typedSystem {
-    var editorActor: ({ system }: {
-        system: ActorSystem<any>;
-    }) => EditorActorRef;
-    var overlaysActor: ({ system }: {
-        system: ActorSystem<any>;
-    }) => OverlaysActorRef;
-    var diagramActor: ({ system }: {
-        system: ActorSystem<any>;
-    }) => DiagramActorRef;
-    var searchActor: ({ system }: {
-        system: ActorSystem<any>;
-    }) => SearchActorRef;
-    var navigationActor: ({ system }: {
-        system: ActorSystem<any>;
-    }) => NavigationPanelActorRef;
-}
-export declare function findDiagramNode(ctx: Context, xynodeId: string): DiagramNode | null;
-export declare function findDiagramEdge(ctx: Context, xyedgeId: string): DiagramEdge | null;
-/**
- * Returns the bounds of the current view from the context.
- * If {@link nextView} is provided, returns the bounds of the next view.
- */
-export declare function viewBounds(ctx: Pick<Context, 'view' | 'dynamicViewVariant'>, nextView?: DiagramView): BBox;
-export declare function focusedBounds(params: {
-    context: Context;
-}): {
-    bounds: BBox;
-    duration?: number;
-};
-export declare function activeSequenceBounds(params: {
-    context: Context;
-}): {
-    bounds: BBox;
-    duration: number;
-};
-export declare function getEdgeBounds(edge: Types.Edge, store: XYStoreState): BBox | null;
-export declare function nodeRef(node: Types.Node): Fqn | DeploymentFqn | null;
-export declare function findCorrespondingNode(context: Pick<Context, 'lastOnNavigate' | 'xynodes'>, event: {
-    view: DiagramView;
-    xynodes: Types.Node[];
-}): {
-    fromNode: null;
-    toNode: null;
-} | {
-    fromNode: Types.Node;
-    toNode: Types.Node | null;
-};
-export declare function calcViewportForBounds(context: Pick<Context, 'xystore' | 'fitViewPadding'>, bounds: BBox): Viewport;

package/dist/likec4diagram/state/utils.js

@@ -1,167 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { MinZoom } from "../../base/const.js";
-import { pickViewBounds } from "../../utils/view-bounds.js";
-import { BBox } from "@likec4/core/geometry";
-import { invariant, nonNullable, nonexhaustive } from "@likec4/core/utils";
-import { getEdgePosition, getNodesBounds, getViewportForBounds } from "@xyflow/system";
-import { isDynamicView } from "@likec4/core/types";
-//#region src/likec4diagram/state/utils.ts
-var findNodeByModelFqn = (xynodes, elementFqn) => {
-	const node = xynodes.find((n) => "modelFqn" in n.data && n.data["modelFqn"] === elementFqn);
-	return node ? node : null;
-};
-function typedSystem(system) {
-	const sys = system;
-	return {
-		get overlaysActorRef() {
-			return sys.get("overlays") ?? null;
-		},
-		get diagramActorRef() {
-			return nonNullable(sys.get("diagram"), "Diagram actor not found");
-		},
-		get searchActorRef() {
-			return sys.get("search") ?? null;
-		},
-		get editorActorRef() {
-			return sys.get("editor") ?? null;
-		},
-		get navigationActorRef() {
-			return sys.get("navigationPanel") ?? null;
-		}
-	};
-}
-typedSystem.editorActor = ({ system }) => {
-	return system.get("editor");
-};
-typedSystem.overlaysActor = ({ system }) => {
-	return system.get("overlays");
-};
-typedSystem.diagramActor = ({ system }) => {
-	return system.get("diagram");
-};
-typedSystem.searchActor = ({ system }) => {
-	return system.get("search");
-};
-typedSystem.navigationActor = ({ system }) => {
-	return system.get("navigationPanel");
-};
-function findDiagramNode(ctx, xynodeId) {
-	return ctx.view.nodes.find((n) => n.id === xynodeId) ?? null;
-}
-function findDiagramEdge(ctx, xyedgeId) {
-	return ctx.view.edges.find((e) => e.id === xyedgeId) ?? null;
-}
-/**
-* Returns the bounds of the current view from the context.
-* If {@link nextView} is provided, returns the bounds of the next view.
-*/
-function viewBounds(ctx, nextView) {
-	const view = nextView ?? ctx.view;
-	return pickViewBounds(view, ctx.dynamicViewVariant);
-}
-function focusedBounds(params) {
-	const b = params.context.xynodes.reduce((acc, node) => {
-		let position = node.data;
-		if (node.hidden || node.data.dimmed) return acc;
-		const width = node.measured?.width ?? node.width ?? node.initialWidth;
-		const height = node.measured?.height ?? node.height ?? node.initialHeight;
-		acc.minX = Math.min(acc.minX, position.x);
-		acc.minY = Math.min(acc.minY, position.y);
-		acc.maxX = Math.max(acc.maxX, position.x + width);
-		acc.maxY = Math.max(acc.maxY, position.y + height);
-		return acc;
-	}, {
-		minX: Infinity,
-		minY: Infinity,
-		maxX: -Infinity,
-		maxY: -Infinity
-	});
-	if (b.minX === Infinity) return { bounds: viewBounds(params.context) };
-	return {
-		duration: 350,
-		bounds: {
-			x: b.minX - 10,
-			y: b.minY - 10,
-			width: b.maxX - b.minX + 20,
-			height: b.maxY - b.minY + 20
-		}
-	};
-}
-var MARGIN = 32;
-function activeSequenceBounds(params) {
-	const activeWalkthrough = nonNullable(params.context.activeWalkthrough);
-	const view = params.context.view;
-	invariant(isDynamicView(view));
-	const stepEdge = nonNullable(params.context.xyedges.find((e) => e.data.id === activeWalkthrough.stepId));
-	const xystate = params.context.xystore.getState();
-	const edgeBounds = getEdgeBounds(stepEdge, xystate);
-	if (edgeBounds && params.context.dynamicViewVariant === "sequence") {
-		const h = stepEdge.data.labelBBox?.height ?? 80;
-		const [top, bottom] = stepEdge.data.dir !== "back" ? [20, h] : [h, 20];
-		return {
-			duration: 500,
-			bounds: BBox.expand(edgeBounds, {
-				left: 100,
-				right: 100,
-				top,
-				bottom
-			})
-		};
-	}
-	const sourceNode = nonNullable(xystate.nodeLookup.get(stepEdge.source));
-	const targetNode = nonNullable(xystate.nodeLookup.get(stepEdge.target));
-	const actorsBounds = getNodesBounds([sourceNode, targetNode], xystate);
-	let stepBounds = edgeBounds ? BBox.merge(edgeBounds, actorsBounds) : actorsBounds;
-	return {
-		duration: 500,
-		bounds: BBox.expand(stepBounds, MARGIN)
-	};
-}
-function getEdgeBounds(edge, store) {
-	const sourceNode = store.nodeLookup.get(edge.source);
-	const targetNode = store.nodeLookup.get(edge.target);
-	if (!sourceNode || !targetNode) return null;
-	const edgePosition = getEdgePosition({
-		id: edge.id,
-		sourceNode,
-		targetNode,
-		sourceHandle: edge.sourceHandle || null,
-		targetHandle: edge.targetHandle || null,
-		connectionMode: store.connectionMode
-	});
-	if (!edgePosition) return edge.data.labelBBox ?? null;
-	return BBox.fromPoints([[edgePosition.sourceX, edgePosition.sourceY], [edgePosition.targetX, edgePosition.targetY]]);
-}
-function nodeRef(node) {
-	switch (node.type) {
-		case "element":
-		case "compound-element":
-		case "seq-actor": return node.data.modelFqn;
-		case "deployment":
-		case "compound-deployment": return node.data.modelFqn ?? node.data.deploymentFqn;
-		case "seq-parallel":
-		case "seq-subflow":
-		case "view-group": return null;
-		default: nonexhaustive(node);
-	}
-}
-function findCorrespondingNode(context, event) {
-	const fromNodeId = context.lastOnNavigate?.fromNode;
-	const fromNode = fromNodeId && context.xynodes.find((n) => n.id === fromNodeId);
-	const fromRef = fromNode && nodeRef(fromNode);
-	if (!fromNode || !fromRef) return {
-		fromNode: null,
-		toNode: null
-	};
-	return {
-		fromNode,
-		toNode: event.xynodes.find((n) => nodeRef(n) === fromRef) ?? null
-	};
-}
-function calcViewportForBounds(context, bounds) {
-	let { width, height, transform } = context.xystore.getState();
-	const maxZoom = Math.max(transform[2], 1);
-	return getViewportForBounds(bounds, width, height, MinZoom, maxZoom, context.fitViewPadding);
-}
-//#endregion
-export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, findNodeByModelFqn, focusedBounds, getEdgeBounds, nodeRef, typedSystem, viewBounds };