@likec4/diagram 1.55.0 → 1.56.0

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

@@ -1,155 +1,227 @@
-import { invariant, nonNullable } from '@likec4/core/utils';
-import { findDiagramEdge, findDiagramNode, findNodeByModelFqn, typedSystem } from './utils.js';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { findDiagramEdge, findDiagramNode, findNodeByModelFqn, typedSystem } from "./utils.js";
+import { invariant, nonNullable } from "@likec4/core/utils";
+//#region src/likec4diagram/state/diagram-api.ts
 function makeDiagramApi(actorRef) {
-  return {
-    ref: actorRef,
-    get actor() {
-      return actorRef.current;
-    },
-    overlays() {
-      return nonNullable(actorRef.current.getSnapshot().children.overlays, "Overlays actor not found");
-    },
-    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.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: "edit.finish", wasChanged });
-    },
-    undoEditing: () => {
-      const editorActor = typedSystem(actorRef.current.system).editorActorRef;
-      invariant(editorActor, "No editor actor found in diagram actor system");
-      const hasUndo = editorActor.getSnapshot().context.history.length > 0;
-      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 });
-    }
-  };
+	return {
+		ref: actorRef,
+		get actor() {
+			return actorRef.current;
+		},
+		overlays() {
+			return nonNullable(actorRef.current.getSnapshot().children.overlays, "Overlays actor not found");
+		},
+		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.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: "edit.finish",
+				wasChanged
+			});
+		},
+		undoEditing: () => {
+			const editorActor = typedSystem(actorRef.current.system).editorActorRef;
+			invariant(editorActor, "No editor actor found in diagram actor system");
+			const hasUndo = editorActor.getSnapshot().context.history.length > 0;
+			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
+			});
+		}
+	};
 }
-
+//#endregion
 export { makeDiagramApi };

package/dist/likec4diagram/state/hotkeyActor.js

@@ -1,47 +1,56 @@
-import { getHotkeyHandler } from '@mantine/hooks';
-import { fromCallback } from 'xstate';
-
-const hotkeyActorLogic = fromCallback(({ sendBack }) => {
-  const escHandler = getHotkeyHandler([
-    ["Escape", (event) => {
-      event.stopPropagation();
-      sendBack({ type: "key.esc" });
-    }, {
-      preventDefault: true
-    }]
-  ]);
-  const arrowshandler = getHotkeyHandler([
-    ["ArrowLeft", (event) => {
-      event.stopPropagation();
-      sendBack({ type: "key.arrow.left" });
-    }, {
-      preventDefault: true
-    }],
-    ["ArrowUp", (event) => {
-      event.stopPropagation();
-      sendBack({ type: "key.arrow.up" });
-    }, {
-      preventDefault: true
-    }],
-    ["ArrowRight", (event) => {
-      event.stopPropagation();
-      sendBack({ type: "key.arrow.right" });
-    }, {
-      preventDefault: true
-    }],
-    ["ArrowDown", (event) => {
-      event.stopPropagation();
-      sendBack({ type: "key.arrow.down" });
-    }, {
-      preventDefault: true
-    }]
-  ]);
-  document.body.addEventListener("keydown", escHandler);
-  document.body.addEventListener("keydown", arrowshandler, { capture: true });
-  return () => {
-    document.body.removeEventListener("keydown", escHandler);
-    document.body.removeEventListener("keydown", arrowshandler, { capture: true });
-  };
+import "../../_virtual/_rolldown/runtime.js";
+import { getHotkeyHandler } from "@mantine/hooks";
+import { fromCallback } from "xstate";
+//#region src/likec4diagram/state/hotkeyActor.ts
+var hotkeyActorLogic = fromCallback(({ sendBack }) => {
+	const escHandler = getHotkeyHandler([[
+		"Escape",
+		(event) => {
+			event.stopPropagation();
+			sendBack({ type: "key.esc" });
+		},
+		{ preventDefault: true }
+	]]);
+	const arrowshandler = getHotkeyHandler([
+		[
+			"ArrowLeft",
+			(event) => {
+				event.stopPropagation();
+				sendBack({ type: "key.arrow.left" });
+			},
+			{ preventDefault: true }
+		],
+		[
+			"ArrowUp",
+			(event) => {
+				event.stopPropagation();
+				sendBack({ type: "key.arrow.up" });
+			},
+			{ preventDefault: true }
+		],
+		[
+			"ArrowRight",
+			(event) => {
+				event.stopPropagation();
+				sendBack({ type: "key.arrow.right" });
+			},
+			{ preventDefault: true }
+		],
+		[
+			"ArrowDown",
+			(event) => {
+				event.stopPropagation();
+				sendBack({ type: "key.arrow.down" });
+			},
+			{ preventDefault: true }
+		]
+	]);
+	document.body.addEventListener("keydown", escHandler);
+	document.body.addEventListener("keydown", arrowshandler, { capture: true });
+	return () => {
+		document.body.removeEventListener("keydown", escHandler);
+		document.body.removeEventListener("keydown", arrowshandler, { capture: true });
+	};
 });
-
+//#endregion
 export { hotkeyActorLogic };