@likec4/diagram 1.57.0 → 1.59.0

package/dist/likec4diagram/state/diagram-api.js

@@ -1,233 +1,337 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { findDiagramEdge, findDiagramNode, findNodeByModelFqn, typedSystem } from "./utils.js";
-import { invariant, nonNullable } from "@likec4/core/utils";
+import { DefaultWeakMap, invariant, nonNullable } from "@likec4/core/utils";
 //#region src/likec4diagram/state/diagram-api.ts
-function makeDiagramApi(actorRef) {
-	return {
-		ref: actorRef,
-		get actor() {
-			return actorRef.current;
-		},
-		editorActor() {
-			const editorActor = typedSystem(actorRef.current.system).editorActorRef;
-			return nonNullable(editorActor, "Editor actor not found in actor system");
-		},
-		overlays() {
-			const overlaysActor = typedSystem(actorRef.current.system).overlaysActorRef;
-			return nonNullable(overlaysActor, "Overlays actor not found in actor system");
-		},
-		searchActor() {
-			const searchActor = typedSystem(actorRef.current.system).searchActorRef;
-			return nonNullable(searchActor, "Search actor not found in actor system");
-		},
-		send: (event) => actorRef.current.send(event),
-		navigateTo: (viewId, fromNode, focusOnElement) => {
-			actorRef.current.send({
-				type: "navigate.to",
-				viewId,
-				...fromNode && { fromNode },
-				...focusOnElement && { focusOnElement }
-			});
-		},
-		navigate: (direction) => {
-			actorRef.current.send({ type: `navigate.${direction}` });
-		},
-		fitDiagram: (duration = 350) => {
-			actorRef.current.send({
-				type: "xyflow.fitDiagram",
-				duration
-			});
-		},
-		openRelationshipsBrowser: (fqn) => {
-			actorRef.current.send({
-				type: "open.relationshipsBrowser",
-				fqn
-			});
-		},
-		openSource: (params) => {
-			actorRef.current.send({
-				type: "open.source",
-				...params
-			});
-		},
-		openElementDetails: (fqn, fromNode) => {
-			actorRef.current.send({
-				type: "open.elementDetails",
-				fqn,
-				fromNode
-			});
-		},
-		openRelationshipDetails: (...params) => {
-			if (params.length === 1) actorRef.current.send({
-				type: "open.relationshipDetails",
-				params: { edgeId: params[0] }
-			});
-			else actorRef.current.send({
-				type: "open.relationshipDetails",
-				params: {
-					source: params[0],
-					target: params[1]
-				}
-			});
-		},
-		updateNodeData: (nodeId, data) => {
-			actorRef.current.send({
-				type: "update.nodeData",
-				nodeId,
-				data
-			});
-		},
-		updateEdgeData: (edgeId, data) => {
-			actorRef.current.send({
-				type: "update.edgeData",
-				edgeId,
-				data
-			});
-		},
-		startEditing: (subject) => {
-			const editorActor = typedSystem(actorRef.current.system).editorActorRef;
-			invariant(editorActor, "No editor actor found in diagram actor system");
-			editorActor.send({
-				type: "edit.move.start",
-				subject
-			});
-		},
-		stopEditing: (wasChanged = false) => {
-			const editorActor = typedSystem(actorRef.current.system).editorActorRef;
-			invariant(editorActor, "No editor actor found in diagram actor system");
-			editorActor.send({ type: wasChanged ? "edit.move.end" : "edit.move.cancel" });
-		},
-		undoEditing: () => {
-			const editorActor = typedSystem(actorRef.current.system).editorActorRef;
-			invariant(editorActor, "No editor actor found in diagram actor system");
-			const hasUndo = editorActor.getSnapshot().context.history !== null;
-			if (hasUndo) editorActor.send({ type: "undo" });
-			return hasUndo;
-		},
-		align: (mode) => {
-			actorRef.current.send({
-				type: "layout.align",
-				mode
-			});
-		},
-		resetEdgeControlPoints: () => {
-			actorRef.current.send({ type: "layout.resetEdgeControlPoints" });
-		},
-		focusNode: (nodeId) => {
-			actorRef.current.send({
-				type: "focus.node",
-				nodeId
-			});
-		},
-		focusOnElement: (elementFqn) => {
-			const context = actorRef.current.getSnapshot().context;
-			const node = findNodeByModelFqn(context.xynodes, elementFqn);
-			if (node) actorRef.current.send({
-				type: "focus.node",
-				nodeId: node.id,
-				autoUnfocus: true
-			});
-		},
-		/**
-		* @warning Do not use in render phase
-		*/
-		get currentView() {
-			return actorRef.current.getSnapshot().context.view;
-		},
-		/**
-		* @warning Do not use in render phase
-		*/
-		getContext: () => actorRef.current.getSnapshot().context,
-		/**
-		* @warning Do not use in render phase
-		*/
-		findDiagramNode: (xynodeId) => {
-			return findDiagramNode(actorRef.current.getSnapshot().context, xynodeId);
-		},
-		findEdge: (xyedgeId) => {
-			return actorRef.current.getSnapshot().context.xyedges.find((e) => e.data.id === xyedgeId) ?? null;
-		},
-		/**
-		* @warning Do not use in render phase
-		*/
-		findDiagramEdge: (xyedgeId) => {
-			return findDiagramEdge(actorRef.current.getSnapshot().context, xyedgeId);
-		},
-		startWalkthrough: () => {
-			actorRef.current.send({ type: "walkthrough.start" });
-		},
-		walkthroughStep: (direction = "next") => {
-			actorRef.current.send({
-				type: "walkthrough.step",
-				direction
-			});
-		},
-		stopWalkthrough: () => {
-			actorRef.current.send({ type: "walkthrough.end" });
-		},
-		toggleFeature: (feature, forceValue) => {
-			actorRef.current.send({
-				type: "toggle.feature",
-				feature,
-				...forceValue !== void 0 && { forceValue }
-			});
-		},
-		highlightNotation: (notation, kind) => {
-			actorRef.current.send({
-				type: "notations.highlight",
-				notation,
-				...kind && { kind }
-			});
-		},
-		unhighlightNotation: () => {
-			actorRef.current.send({ type: "notations.unhighlight" });
-		},
-		openSearch: (searchValue) => {
-			actorRef.current.send({
-				type: "open.search",
-				...searchValue && { search: searchValue }
-			});
-		},
-		triggerChange: (change) => {
-			actorRef.current.send({
-				type: "trigger.change",
-				change
-			});
-		},
-		switchDynamicViewVariant: (variant) => {
-			actorRef.current.send({
-				type: "switch.dynamicViewVariant",
-				variant
-			});
-		},
-		highlightNode: (nodeId) => {
-			actorRef.current.send({
-				type: "highlight.node",
-				nodeId
-			});
-		},
-		highlightEdge: (edgeId) => {
-			actorRef.current.send({
-				type: "highlight.edge",
-				edgeId
-			});
-		},
-		unhighlightAll: () => {
-			actorRef.current.send({ type: "unhighlight.all" });
-		},
-		centerViewportOnNode: (nodeId) => {
-			actorRef.current.send({
-				type: "xyflow.centerViewport",
-				nodeId
-			});
-		},
-		centerViewportOnEdge: (edgeId) => {
-			actorRef.current.send({
-				type: "xyflow.centerViewport",
-				edgeId
-			});
-		}
-	};
-}
+var DiagramApi = class DiagramApi {
+	static cache = new DefaultWeakMap((ref) => new DiagramApi(ref));
+	static withActor(actorRef) {
+		return this.cache.get(actorRef);
+	}
+	/**
+	* React ref to the diagram actor
+	*/
+	ref;
+	constructor(actorRef) {
+		this.ref = actorRef;
+	}
+	/**
+	* @warning Do not use in render phase
+	*/
+	get actor() {
+		return this.ref.current;
+	}
+	/**
+	* @warning Do not use in render phase
+	*/
+	get currentView() {
+		return this.ref.current.getSnapshot().context.view;
+	}
+	/**
+	* Editor actor reference
+	* @warning Do not use in render phase
+	*/
+	editorActor() {
+		const editorActor = typedSystem(this.ref.current.system).editorActorRef;
+		return nonNullable(editorActor, "Editor actor not found in actor system");
+	}
+	/**
+	* Overlays actor reference
+	* @warning Do not use in render phase
+	*/
+	overlays() {
+		const overlaysActor = typedSystem(this.ref.current.system).overlaysActorRef;
+		return nonNullable(overlaysActor, "Overlays actor not found in actor system");
+	}
+	/**
+	* Search actor reference
+	* @warning Do not use in render phase
+	*/
+	searchActor() {
+		const searchActor = typedSystem(this.ref.current.system).searchActorRef;
+		return nonNullable(searchActor, "Search actor not found in actor system");
+	}
+	/**
+	* Send event to diagram actor
+	*/
+	send(event) {
+		this.ref.current.send(event);
+	}
+	/**
+	* Navigate to view
+	* @param viewId - Target view ID
+	* @param fromNode - Node from which navigation was triggered
+	* @param focusOnElement - Element FQN to focus after navigation (from search)
+	*/
+	navigateTo(viewId, fromNode, focusOnElement) {
+		this.send({
+			type: "navigate.to",
+			viewId,
+			...fromNode && { fromNode },
+			...focusOnElement && { focusOnElement }
+		});
+	}
+	/**
+	* Navigate back or forward in history
+	*/
+	navigate(direction) {
+		this.send({ type: `navigate.${direction}` });
+	}
+	/**
+	* Fit diagram to view
+	*/
+	fitDiagram(duration = 350) {
+		this.send({
+			type: "xyflow.fitDiagram",
+			duration
+		});
+	}
+	/**
+	* Open relationships browser
+	*/
+	openRelationshipsBrowser(fqn) {
+		this.send({
+			type: "open.relationshipsBrowser",
+			fqn
+		});
+	}
+	/**
+	* If running in editor, trigger opening source file
+	*/
+	openSource(params) {
+		this.send({
+			type: "open.source",
+			...params
+		});
+	}
+	/**
+	* Open element details card
+	*/
+	openElementDetails(fqn, fromNode) {
+		this.send({
+			type: "open.elementDetails",
+			fqn,
+			fromNode
+		});
+	}
+	openRelationshipDetails(...params) {
+		if (params.length === 1) this.send({
+			type: "open.relationshipDetails",
+			params: { edgeId: params[0] }
+		});
+		else this.send({
+			type: "open.relationshipDetails",
+			params: {
+				source: params[0],
+				target: params[1]
+			}
+		});
+	}
+	updateNodeData(nodeId, data) {
+		this.send({
+			type: "update.nodeData",
+			nodeId,
+			data
+		});
+	}
+	updateEdgeData(edgeId, data) {
+		this.send({
+			type: "update.edgeData",
+			edgeId,
+			data
+		});
+	}
+	highlightNode(nodeId) {
+		this.send({
+			type: "highlight.node",
+			nodeId
+		});
+	}
+	highlightEdge(edgeId) {
+		this.send({
+			type: "highlight.edge",
+			edgeId
+		});
+	}
+	unhighlightAll() {
+		this.send({ type: "unhighlight.all" });
+	}
+	/**
+	* Center viewport on a given node
+	*/
+	centerViewportOnNode(target) {
+		this.send({
+			type: "xyflow.centerViewport",
+			nodeId: target
+		});
+	}
+	/**
+	* Center viewport on a given edge (centering on edge means including both source and target nodes in view)
+	*/
+	centerViewportOnEdge(target) {
+		this.send({
+			type: "xyflow.centerViewport",
+			edgeId: target
+		});
+	}
+	/**
+	* Start editing, either node or edge
+	*/
+	startEditing(subject) {
+		const editorActor = typedSystem(this.ref.current.system).editorActorRef;
+		invariant(editorActor, "No editor actor found in diagram actor system");
+		editorActor.send({
+			type: "edit.move.start",
+			subject
+		});
+	}
+	/**
+	* Stop editing
+	* @param wasChanged - whether there were changes made during editing
+	* @default false
+	*/
+	stopEditing(wasChanged = false) {
+		const editorActor = typedSystem(this.ref.current.system).editorActorRef;
+		invariant(editorActor, "No editor actor found in diagram actor system");
+		editorActor.send({ type: wasChanged ? "edit.move.end" : "edit.move.cancel" });
+	}
+	/**
+	* Undo last editing operation
+	* @returns true if there was something to undo
+	*/
+	undoEditing() {
+		const editorActor = typedSystem(this.ref.current.system).editorActorRef;
+		invariant(editorActor, "No editor actor found in diagram actor system");
+		const hasUndo = editorActor.getSnapshot().context.history !== null;
+		if (hasUndo) editorActor.send({ type: "undo" });
+		return hasUndo;
+	}
+	/**
+	* Align nodes
+	*/
+	align(mode) {
+		this.send({
+			type: "layout.align",
+			mode
+		});
+	}
+	/**
+	* Reset edge control points
+	*/
+	resetEdgeControlPoints() {
+		this.send({ type: "layout.resetEdgeControlPoints" });
+	}
+	/**
+	* Focus node
+	*/
+	focusNode(nodeId) {
+		this.send({
+			type: "focus.node",
+			nodeId
+		});
+	}
+	/**
+	* Focus on element by FQN (finds the node and focuses on it).
+	* Used by search to highlight an element on the current view.
+	*/
+	focusOnElement(elementFqn) {
+		const context = this.ref.current.getSnapshot().context;
+		const node = findNodeByModelFqn(context.xynodes, elementFqn);
+		if (node) this.send({
+			type: "focus.node",
+			nodeId: node.id,
+			autoUnfocus: true
+		});
+	}
+	/**
+	* @warning Do not use in render phase
+	*/
+	getContext() {
+		return this.ref.current.getSnapshot().context;
+	}
+	/**
+	* @warning Do not use in render phase
+	*/
+	findDiagramNode(xynodeId) {
+		return findDiagramNode(this.ref.current.getSnapshot().context, xynodeId);
+	}
+	/**
+	* @warning Do not use in render phase
+	*/
+	findEdge(xyedgeId) {
+		return this.ref.current.getSnapshot().context.xyedges.find((e) => e.data.id === xyedgeId) ?? null;
+	}
+	/**
+	* @warning Do not use in render phase
+	*/
+	findDiagramEdge(xyedgeId) {
+		return findDiagramEdge(this.ref.current.getSnapshot().context, xyedgeId);
+	}
+	startWalkthrough(stepId) {
+		this.send({
+			type: "walkthrough.start",
+			stepId
+		});
+	}
+	walkthroughStep(value = "next") {
+		if (value === "next" || value === "prev") this.send({
+			type: "walkthrough.step",
+			direction: value
+		});
+		else this.send({
+			type: "walkthrough.step",
+			stepId: value.step
+		});
+	}
+	stopWalkthrough() {
+		this.send({ type: "walkthrough.end" });
+	}
+	toggleFeature(feature, forceValue) {
+		this.send({
+			type: "toggle.feature",
+			feature,
+			...forceValue !== void 0 && { forceValue }
+		});
+	}
+	highlightNotation(notation, kind) {
+		this.send({
+			type: "notations.highlight",
+			notation,
+			...kind && { kind }
+		});
+	}
+	unhighlightNotation() {
+		this.send({ type: "notations.unhighlight" });
+	}
+	openSearch(searchValue) {
+		this.send({
+			type: "open.search",
+			...searchValue && { search: searchValue }
+		});
+	}
+	triggerChange(change) {
+		this.send({
+			type: "trigger.change",
+			change
+		});
+	}
+	/**
+	* Switch dynamic view display variant
+	*/
+	switchDynamicViewVariant(variant) {
+		this.send({
+			type: "switch.dynamicViewVariant",
+			variant
+		});
+	}
+	/**
+	* Toggle sequence flow collapse/expand
+	*/
+	toggleSequenceFlow(flowId) {
+		this.send({
+			type: "sequence.flow.toggle",
+			flowId
+		});
+	}
+};
 //#endregion
-export { makeDiagramApi };
+export { DiagramApi };