@likec4/diagram 1.58.0 → 1.59.0

package/dist/likec4diagram/state/DiagramActorProvider.js

@@ -2,14 +2,13 @@ import "../../_virtual/_rolldown/runtime.js";
 import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
 import { useDiagramEventHandlersRef } from "../../context/DiagramEventHandlers.js";
 import { DiagramFeatures, useEnabledFeatures } from "../../context/DiagramFeatures.js";
-import { DiagramActorContextProvider, DiagramApiContextProvider, useDiagram } from "../../hooks/safeContext.js";
-import { selectDiagramActorContext, useDiagramSnapshot, useOnDiagramEvent } from "../../hooks/useDiagram.js";
-import { ErrorBoundary } from "../../components/ErrorFallback.js";
-import { useEditorActorLogic } from "../../editor/useEditorActorLogic.js";
-import { makeDiagramApi } from "./diagram-api.js";
+import { DiagramActorContextProvider, DiagramApiContextProvider, selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.js";
+import { useOnDiagramEvent } from "../../hooks/useDiagram.js";
 import { DiagramToggledFeaturesPersistence } from "./persistence.js";
+import { useEditorActorLogic } from "../../editor/useEditorActorLogic.js";
+import { DiagramApi } from "./diagram-api.js";
 import { diagramMachine } from "./machine.js";
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useStoreApi } from "@xyflow/react";
 import { isNullish } from "remeda";
@@ -17,9 +16,9 @@ import { useActorRef } from "@xstate/react";
 //#region src/likec4diagram/state/DiagramActorProvider.tsx
 function DiagramActorProvider({ id, view, zoomable, pannable, nodesDraggable, nodesSelectable, fitViewPadding, where = null, children, dynamicViewVariant: _defaultVariant }) {
 	const xystore = useStoreApi();
-	const editorActor = useEditorActorLogic();
+	const editor = useEditorActorLogic();
 	const features = useEnabledFeatures();
-	const actor = useActorRef(diagramMachine.provide({ actors: { editorActor } }), {
+	const actor = useActorRef(diagramMachine.provide({ actors: { editor } }), {
 		id: `diagram-${id}`,
 		systemId: "diagram",
 		input: {
@@ -43,14 +42,6 @@ function DiagramActorProvider({ id, view, zoomable, pannable, nodesDraggable, no
 		});
 		actorRef.current = actor;
 	}
-	const [api, setApi] = useState(() => makeDiagramApi(actorRef));
-	useEffect(() => {
-		setApi((api) => {
-			if (api.ref === actorRef) return api;
-			console.error("DiagramMachine actorRef changed, creating new DiagramApi instance, this should not happen during the lifetime of the actor");
-			return makeDiagramApi(actorRef);
-		});
-	}, [actorRef]);
 	useEffect(() => {
 		actor.send({
 			type: "update.features",
@@ -91,12 +82,12 @@ function DiagramActorProvider({ id, view, zoomable, pannable, nodesDraggable, no
 	return /* @__PURE__ */ jsx(DiagramActorContextProvider, {
 		value: actor,
 		children: /* @__PURE__ */ jsxs(DiagramApiContextProvider, {
-			value: api,
-			children: [/* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(ToggledFeatures, { children }) }), /* @__PURE__ */ jsx(PropagateDiagramActorEvents, {})]
+			value: DiagramApi.withActor(actorRef),
+			children: [/* @__PURE__ */ jsx(ToggledFeatures, { children }), /* @__PURE__ */ jsx(PropagateDiagramActorEvents, {})]
 		})
 	});
 }
-var selectToggledFeatures = selectDiagramActorContext((context) => {
+var selectToggledFeatures = selectDiagramContext((context) => {
 	let toggledFeatures = context.toggledFeatures;
 	const enableCompareWithLatest = context.view.drifts != null && context.view.drifts.length > 0 && context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isNullish(context.activeWalkthrough);
 	const enableReadOnly = context.features.enableReadOnly || toggledFeatures.enableReadOnly || !!context.activeWalkthrough || enableCompareWithLatest && context.view._layout === "auto";
@@ -108,7 +99,7 @@ var selectToggledFeatures = selectDiagramActorContext((context) => {
 	return toggledFeatures;
 });
 function ToggledFeatures({ children }) {
-	const toggledFeatures = useDiagramSnapshot(selectToggledFeatures);
+	const toggledFeatures = useDiagramSelector(selectToggledFeatures);
 	useUpdateEffect(() => {
 		DiagramToggledFeaturesPersistence.write(toggledFeatures);
 	}, [toggledFeatures]);

package/dist/likec4diagram/state/aligners.js

@@ -289,4 +289,4 @@ function getAligner(mode) {
 	}
 }
 //#endregion
-export { getAligner, toNodeRect };
+export { Aligner, GridAligner, LinearAligner, getAligner, getLinearAligner, toNodeRect };

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

@@ -18,7 +18,7 @@ export declare function mergeXYNodesEdges(context: Pick<DiagramContext, 'xynodes
     view: LayoutedView;
 };
 export declare function focusNodesEdges(context: DiagramContext): {
-    xynodes: Types.Node<"element" | "deployment" | "compound-element" | "compound-deployment" | "view-group" | "seq-actor" | "seq-parallel">[];
+    xynodes: Types.Node<"element" | "deployment" | "compound-element" | "compound-deployment" | "view-group" | "seq-actor" | "seq-parallel" | "seq-subflow">[];
     xyedges: Types.Edge<"relationship" | "seq-step">[];
 } | null;
 export declare function updateNodeData({ context, event }: ActionArg): Partial<DiagramContext>;

package/dist/likec4diagram/state/assign.js

@@ -27,7 +27,7 @@ function mergeXYNodesEdges(context, event) {
 function focusNodesEdges(context) {
 	const { xynodes: _xynodes, xyedges: _xyedges, focusedNode } = context;
 	if (!focusedNode) return null;
-	const focused = new Set([focusedNode]);
+	const focused = /* @__PURE__ */ new Set([focusedNode]);
 	const xyedges = _xyedges.map((edge) => {
 		if (edge.source === focusedNode || edge.target === focusedNode) {
 			focused.add(edge.source);

package/dist/likec4diagram/state/createViewChange.js

@@ -14,7 +14,7 @@ function createViewChange(parentContext) {
 			console.error(`Internal node not found for ${node.id}`);
 			return node;
 		}
-		const xynodedata = xynodes.find((n) => n.id === node.id)?.data ?? internal.data;
+		const xynodedata = xynodes.find((n) => n.data.id === node.id)?.data ?? internal.data;
 		const position = internal.internals.positionAbsolute;
 		const { width, height } = getNodeDimensions(internal);
 		if (!isSamePoint(position, node) || node.width !== width || node.height !== height) movedNodes.add(node.id);

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

@@ -1,7 +1,7 @@
 import { DynamicViewDisplayVariant, NodeNotation as ElementNotation, ViewChange } from '@likec4/core/types';
 import { RefObject } from 'react';
 import { PartialDeep } from 'type-fest';
-import { FeatureName } from '../../context/DiagramFeatures';
+import { TogglableFeature } from '../../context/DiagramFeatures';
 import { EditorActorRef } from '../../editor/actor/machine';
 import { OpenSourceParams } from '../../LikeC4Diagram.props';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
@@ -16,19 +16,22 @@ 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 interface DiagramApi<A extends Any = Unknown> {
+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
      */
-    readonly actor: DiagramActorRef;
+    get actor(): DiagramActorRef;
     /**
      * @warning Do not use in render phase
      */
-    readonly currentView: t.DiagramView<A>;
+    get currentView(): t.DiagramView<A>;
     /**
      * Editor actor reference
      * @warning Do not use in render phase
@@ -70,7 +73,7 @@ export interface DiagramApi<A extends Any = Unknown> {
     /**
      * If running in editor, trigger opening source file
      */
-    openSource(params: OpenSourceParams<A>): void;
+    openSource(params: OpenSourceParams<Unknown>): void;
     /**
      * Open element details card
      */
@@ -137,18 +140,23 @@ export interface DiagramApi<A extends Any = Unknown> {
      * @warning Do not use in render phase
      */
     findDiagramEdge(xyedgeId: string): t.DiagramEdge<A> | null;
-    startWalkthrough(): void;
-    walkthroughStep(direction?: 'next' | 'previous'): void;
+    startWalkthrough(stepId?: t.StepPath): void;
+    walkthroughStep(value?: 'next' | 'prev' | {
+        step: t.StepPath;
+    }): void;
     stopWalkthrough(): void;
-    toggleFeature(feature: FeatureName, forceValue?: boolean): void;
+    toggleFeature(feature: TogglableFeature, forceValue?: boolean): void;
     highlightNotation(notation: ElementNotation, kind?: string): void;
     unhighlightNotation(): void;
     openSearch(searchValue?: string): void;
-    triggerChange(viewChange: ViewChange): 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 declare function makeDiagramApi<A extends Any = Unknown>(actorRef: RefObject<DiagramActorRef>): DiagramApi<A>;
 export {};