@likec4/diagram 1.59.3 → 1.60.0

package/dist/likec4diagram/state/createViewChange.js

@@ -1,71 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { calcViewBounds } from "../../utils/view-bounds.js";
-import { hasAtLeast, map } from "remeda";
-import { getNodeDimensions } from "@xyflow/system";
-//#region src/likec4diagram/state/createViewChange.ts
-function createViewChange(parentContext) {
-	const { view: { drifts: _1, _layout: _2, ...view }, xynodes, xystore } = parentContext;
-	const { nodeLookup, edgeLookup } = xystore.getState();
-	const nodes = map(view.nodes, (node) => {
-		const internal = nodeLookup.get(node.id);
-		if (!internal) {
-			console.error(`Internal node not found for ${node.id}`);
-			return node;
-		}
-		const xynodedata = xynodes.find((n) => n.data.id === node.id)?.data ?? internal.data;
-		const position = internal.internals.positionAbsolute;
-		const { width, height } = getNodeDimensions(internal);
-		return {
-			...node,
-			shape: xynodedata.shape,
-			color: xynodedata.color,
-			style: { ...xynodedata.style },
-			x: Math.floor(position.x),
-			y: Math.floor(position.y),
-			width: Math.ceil(width),
-			height: Math.ceil(height)
-		};
-	});
-	const edges = map(view.edges, (edge) => {
-		const xyedge = edgeLookup.get(edge.id);
-		if (!xyedge) {
-			console.error(`Internal edge not found for ${edge.id}`);
-			return edge;
-		}
-		const data = xyedge.data;
-		const controlPoints = data.controlPoints ?? [];
-		const _updated = {
-			...edge,
-			points: data.points
-		};
-		if (data.labelBBox) _updated.labelBBox = {
-			x: Math.round(data.labelBBox.x),
-			y: Math.round(data.labelBBox.y),
-			width: Math.round(data.labelBBox.width),
-			height: Math.round(data.labelBBox.height)
-		};
-		else _updated.labelBBox = null;
-		if (data.isLabelCustomized !== void 0) _updated.isLabelCustomized = data.isLabelCustomized;
-		if (hasAtLeast(controlPoints, 1)) _updated.controlPoints = map(controlPoints, (v) => ({
-			x: Math.round(v.x),
-			y: Math.round(v.y)
-		}));
-		else _updated.controlPoints = null;
-		return _updated;
-	});
-	return {
-		op: "save-view-snapshot",
-		layout: {
-			...view,
-			_layout: "manual",
-			bounds: calcViewBounds({
-				nodes,
-				edges
-			}),
-			nodes,
-			edges
-		}
-	};
-}
-//#endregion
-export { createViewChange };

package/dist/likec4diagram/state/diagram-api.d.ts

@@ -1,162 +0,0 @@
-import { DynamicViewDisplayVariant, NodeNotation as ElementNotation, ViewChange } from '@likec4/core/types';
-import { RefObject } from 'react';
-import { PartialDeep } from 'type-fest';
-import { TogglableFeature } from '../../context/DiagramFeatures';
-import { EditorActorRef } from '../../editor/actor/machine';
-import { OpenSourceParams } from '../../LikeC4Diagram.props';
-import { OverlaysActorRef } from '../../overlays/overlaysActor';
-import { SearchActorRef } from '../../search/searchActor';
-import { Types } from '../types';
-import { AlignmentMode } from './aligners';
-import { DiagramActorRef, DiagramContext, DiagramEvents } from './types';
-import type * as t from '@likec4/core/types';
-type Any = t.aux.Any;
-type Unknown = t.aux.UnknownLayouted;
-type ViewId<A> = t.aux.ViewId<A>;
-type Fqn<A> = t.aux.Fqn<A>;
-type NodeId = t.aux.NodeId;
-type EdgeId = t.aux.EdgeId;
-export declare class DiagramApi<A extends Any = Unknown> {
-    private static cache;
-    static withActor(actorRef: RefObject<DiagramActorRef>): DiagramApi;
-    /**
-     * React ref to the diagram actor
-     */
-    readonly ref: RefObject<DiagramActorRef>;
-    private constructor();
-    /**
-     * @warning Do not use in render phase
-     */
-    get actor(): DiagramActorRef;
-    /**
-     * @warning Do not use in render phase
-     */
-    get currentView(): t.DiagramView<A>;
-    /**
-     * Editor actor reference
-     * @warning Do not use in render phase
-     */
-    editorActor(): EditorActorRef;
-    /**
-     * Overlays actor reference
-     * @warning Do not use in render phase
-     */
-    overlays(): OverlaysActorRef;
-    /**
-     * Search actor reference
-     * @warning Do not use in render phase
-     */
-    searchActor(): SearchActorRef;
-    /**
-     * Send event to diagram actor
-     */
-    send(event: DiagramEvents): void;
-    /**
-     * 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: ViewId<A>, fromNode?: NodeId, focusOnElement?: Fqn<A>): void;
-    /**
-     * Navigate back or forward in history
-     */
-    navigate(direction: 'back' | 'forward'): void;
-    /**
-     * Fit diagram to view
-     */
-    fitDiagram(duration?: number): void;
-    /**
-     * Open relationships browser
-     */
-    openRelationshipsBrowser(fqn: Fqn<A>): void;
-    /**
-     * If running in editor, trigger opening source file
-     */
-    openSource(params: OpenSourceParams<Unknown>): void;
-    /**
-     * Open element details card
-     */
-    openElementDetails(fqn: Fqn<A>, fromNode?: NodeId): void;
-    openRelationshipDetails(...params: [edgeId: EdgeId] | [source: Fqn<A>, target: Fqn<A>]): void;
-    updateNodeData(nodeId: NodeId, data: PartialDeep<Types.NodeData>): void;
-    updateEdgeData(edgeId: EdgeId, data: PartialDeep<Types.EdgeData>): void;
-    highlightNode(nodeId: NodeId): void;
-    highlightEdge(edgeId: EdgeId): void;
-    unhighlightAll(): void;
-    /**
-     * Center viewport on a given node
-     */
-    centerViewportOnNode(target: NodeId): void;
-    /**
-     * Center viewport on a given edge (centering on edge means including both source and target nodes in view)
-     */
-    centerViewportOnEdge(target: EdgeId): void;
-    /**
-     * Start editing, either node or edge
-     */
-    startEditing(subject: 'node' | 'edge'): void;
-    /**
-     * Stop editing
-     * @param wasChanged - whether there were changes made during editing
-     * @default false
-     */
-    stopEditing(wasChanged?: boolean): void;
-    /**
-     * Undo last editing operation
-     * @returns true if there was something to undo
-     */
-    undoEditing(): boolean;
-    /**
-     * Align nodes
-     */
-    align(mode: AlignmentMode): void;
-    /**
-     * Reset edge control points
-     */
-    resetEdgeControlPoints(): void;
-    /**
-     * Focus node
-     */
-    focusNode(nodeId: NodeId): void;
-    /**
-     * 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: Fqn<A>): void;
-    /**
-     * @warning Do not use in render phase
-     */
-    getContext(): DiagramContext;
-    /**
-     * @warning Do not use in render phase
-     */
-    findDiagramNode(xynodeId: string): t.DiagramNode<A> | null;
-    /**
-     * @warning Do not use in render phase
-     */
-    findEdge(xyedgeId: string): Types.Edge | null;
-    /**
-     * @warning Do not use in render phase
-     */
-    findDiagramEdge(xyedgeId: string): t.DiagramEdge<A> | null;
-    startWalkthrough(stepId?: t.StepPath): void;
-    walkthroughStep(value?: 'next' | 'prev' | {
-        step: t.StepPath;
-    }): void;
-    stopWalkthrough(): void;
-    toggleFeature(feature: TogglableFeature, forceValue?: boolean): void;
-    highlightNotation(notation: ElementNotation, kind?: string): void;
-    unhighlightNotation(): void;
-    openSearch(searchValue?: string): void;
-    triggerChange(change: ViewChange): void;
-    /**
-     * Switch dynamic view display variant
-     */
-    switchDynamicViewVariant(variant: DynamicViewDisplayVariant): void;
-    /**
-     * Toggle sequence flow collapse/expand
-     */
-    toggleSequenceFlow(flowId: t.StepPath): void;
-}
-export {};

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

@@ -1,337 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { findDiagramEdge, findDiagramNode, findNodeByModelFqn, typedSystem } from "./utils.js";
-import { DefaultWeakMap, invariant, nonNullable } from "@likec4/core/utils";
-//#region src/likec4diagram/state/diagram-api.ts
-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 { DiagramApi };

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

@@ -1,7 +0,0 @@
-import { AnyEventObject, CallbackActorLogic, NonReducibleUnknown } from 'xstate';
-export type HotKeyEvent = {
-    type: 'key.esc' | `key.arrow.${'left' | 'right' | 'up' | 'down'}`;
-};
-export interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {
-}
-export declare const hotkeyActorLogic: HotkeyActorLogic;

package/dist/likec4diagram/state/hotkeyActor.js

@@ -1,56 +0,0 @@
-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 };

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

@@ -1,4 +0,0 @@
-import { Observer, InspectionEvent } from 'xstate';
-export declare const inspector: {
-    inspect: Observer<InspectionEvent> | (() => void);
-};