@likec4/diagram 1.35.0 → 1.36.0

package/dist/state/DiagramActorProvider.js

@@ -5,7 +5,7 @@ import { useStoreApi } from '@xyflow/react';
 import { shallowEqual, deepEqual } from 'fast-equals';
 import { useRef, useEffect, useState } from 'react';
 import { ErrorBoundary } from '../components/ErrorFallback.js';
-import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers.js';
+import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../context/DiagramFeatures.js';
 import { DiagramActorContextProvider } from '../hooks/safeContext.js';
 import { useCurrentViewId } from '../hooks/useCurrentViewId.js';
@@ -33,24 +33,11 @@ function DiagramActorProvider({
   where,
   children
 }) {
-  const handlersRef = useDiagramEventHandlersRef();
+  const { handlersRef } = useDiagramEventHandlers();
   const xystore = useStoreApi();
   const machineRef = useRef(null);
   if (!machineRef.current) {
     machineRef.current = diagramMachine.provide({
-      actions: {
-        "trigger:NavigateTo": (_, { viewId }) => {
-          setTimeout(() => {
-            handlersRef.current.onNavigateTo?.(viewId);
-          }, 40);
-        },
-        "trigger:OnChange": (_, params) => {
-          handlersRef.current.onChange?.(params);
-        },
-        "trigger:OpenSource": (_, params) => {
-          handlersRef.current.onOpenSource?.(params);
-        }
-      },
       actors: {
         syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
           actions: {
@@ -78,6 +65,7 @@ function DiagramActorProvider({
       }
     }
   );
+  useActorEventHandlers(actorRef);
   const features = useEnabledFeatures();
   useCustomCompareEffect(
     () => {
@@ -129,5 +117,36 @@ Make sure you have LikeC4ModelProvider with layouted model.`);
   }
   return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children });
 }
+function useActorEventHandlers(actorRef) {
+  const {
+    onChange,
+    onNavigateTo,
+    onOpenSource
+  } = useDiagramEventHandlers();
+  useEffect(() => {
+    if (!onChange) return;
+    const subscription = actorRef.on("viewChange", ({ change }) => onChange({ change }));
+    return () => subscription.unsubscribe();
+  }, [actorRef, onChange]);
+  useEffect(() => {
+    if (!onNavigateTo) return;
+    let frame;
+    const subscription = actorRef.on("navigateTo", ({ viewId }) => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        onNavigateTo(viewId);
+      });
+    });
+    return () => {
+      cancelAnimationFrame(frame);
+      subscription.unsubscribe();
+    };
+  }, [actorRef, onNavigateTo]);
+  useEffect(() => {
+    if (!onOpenSource) return;
+    const subscription = actorRef.on("openSource", ({ params }) => onOpenSource(params));
+    return () => subscription.unsubscribe();
+  }, [actorRef, onOpenSource]);
+}
 
 export { DiagramActorProvider };

package/dist/state/diagram-machine.d.ts

@@ -1,8 +1,8 @@
-import { DiagramView, EdgeId, Fqn, NodeId, NodeNotation as ElementNotation, StepEdgeId, ViewChange, ViewId, XYPoint, BBox, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType } from '@likec4/core';
+import { DiagramView, EdgeId, Fqn, NodeId, NodeNotation as ElementNotation, StepEdgeId, ViewChange, ViewId, XYPoint, BBox, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, MarkdownOrString } from '@likec4/core';
 import { ReactFlowInstance, useStoreApi } from '@xyflow/react';
 import { EdgeChange, NodeChange, Rect, Viewport, EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
 import { PartialDeep } from 'type-fest';
-import { ActorLogicFrom, ActorRef, AnyEventObject, Snapshot, StateMachine, ActorRefFromLogic, Values, NonReducibleUnknown, EventObject, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, MachineSnapshot, AnyActorRef, StateValue, ActionFunction, CancelAction, StopAction } from 'xstate';
+import { ActorLogicFrom, ActorRef, AnyEventObject, Snapshot, StateMachine, ActorRefFromLogic, Values, NonReducibleUnknown, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, MachineSnapshot, AnyActorRef, StateValue, ActionFunction, CancelAction, StopAction } from 'xstate';
 import { Base } from '../base/types';
 import { EnabledFeatures, FeatureName } from '../context/DiagramFeatures';
 import { OpenSourceParams, ViewPadding } from '../LikeC4Diagram.props';
@@ -192,6 +192,16 @@ export type Events = HotKeyEvent | {
     feature: FeatureName;
     forceValue?: boolean;
 };
+export type EmittedEvents = {
+    type: 'navigateTo';
+    viewId: ViewId;
+} | {
+    type: 'viewChange';
+    change: ViewChange;
+} | {
+    type: 'openSource';
+    params: OpenSourceParams;
+};
 export type ActionArg = {
     context: Context;
     event: Events;
@@ -283,9 +293,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
     };
     "trigger:NavigateTo": {
         type: "trigger:NavigateTo";
-        params: {
-            viewId: ViewId;
-        };
+        params: NonReducibleUnknown;
     };
     "trigger:OpenSource": {
         type: "trigger:OpenSource";
@@ -419,7 +427,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
     };
 }>, never, "isReady" | "initializing" | "navigating" | {
     ready: "idle" | "walkthrough" | "focused";
-}, string, Input, NonReducibleUnknown, EventObject, MetaObject, {
+}, string, Input, NonReducibleUnknown, EmittedEvents, MetaObject, {
     readonly initial: "initializing";
     readonly context: ({ input }: {
         spawn: {
@@ -901,7 +909,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                                         tail: RelationshipArrowType | undefined;
                                         labelBBox: BBox | null | undefined;
                                         navigateTo: ViewId<string> | null | undefined;
-                                        notes: string | undefined;
+                                        notes: MarkdownOrString | undefined;
                                         labelXY: XYPosition | null;
                                         controlPoints: XYPosition[] | undefined | null;
                                     };
@@ -951,7 +959,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                                     tail: RelationshipArrowType | undefined;
                                     labelBBox: BBox | null | undefined;
                                     navigateTo: ViewId<string> | null | undefined;
-                                    notes: string | undefined;
+                                    notes: MarkdownOrString | undefined;
                                     labelXY: XYPosition | null;
                                     controlPoints: XYPosition[] | undefined | null;
                                 };
@@ -1008,7 +1016,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                                         tail: RelationshipArrowType | undefined;
                                         labelBBox: BBox | null | undefined;
                                         navigateTo: ViewId<string> | null | undefined;
-                                        notes: string | undefined;
+                                        notes: MarkdownOrString | undefined;
                                         labelXY: XYPosition | null;
                                         controlPoints: XYPosition[] | undefined | null;
                                     };
@@ -1058,7 +1066,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                                     tail: RelationshipArrowType | undefined;
                                     labelBBox: BBox | null | undefined;
                                     navigateTo: ViewId<string> | null | undefined;
-                                    notes: string | undefined;
+                                    notes: MarkdownOrString | undefined;
                                     labelXY: XYPosition | null;
                                     controlPoints: XYPosition[] | undefined | null;
                                 };
@@ -1355,9 +1363,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                         };
                         "trigger:NavigateTo": {
                             type: "trigger:NavigateTo";
-                            params: {
-                                viewId: ViewId;
-                            };
+                            params: NonReducibleUnknown;
                         };
                         "trigger:OpenSource": {
                             type: "trigger:OpenSource";
@@ -1489,7 +1495,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "click: selected edge";
                             params: unknown;
                         };
-                    }>, never, EventObject>;
+                    }>, never, EmittedEvents>;
                     readonly on: {
                         readonly 'xyflow.nodeClick': readonly [{
                             readonly guard: "click: focused node";
@@ -1729,9 +1735,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                                 };
                                 "trigger:NavigateTo": {
                                     type: "trigger:NavigateTo";
-                                    params: {
-                                        viewId: ViewId;
-                                    };
+                                    params: NonReducibleUnknown;
                                 };
                                 "trigger:OpenSource": {
                                     type: "trigger:OpenSource";
@@ -1863,7 +1867,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                                     type: "click: selected edge";
                                     params: unknown;
                                 };
-                            }>, never, EventObject>;
+                            }>, never, EmittedEvents>;
                         };
                         readonly 'xyflow.edgeClick': {
                             readonly actions: readonly [ ActionFunction<Context, {
@@ -1997,9 +2001,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                         };
                         "trigger:NavigateTo": {
                             type: "trigger:NavigateTo";
-                            params: {
-                                viewId: ViewId;
-                            };
+                            params: NonReducibleUnknown;
                         };
                         "trigger:OpenSource": {
                             type: "trigger:OpenSource";
@@ -2131,229 +2133,13 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "click: selected edge";
                             params: unknown;
                         };
-                    }>, never, EventObject>;
+                    }>, never, EmittedEvents>;
                 };
             };
         };
         readonly navigating: {
             readonly id: "navigating";
-            readonly entry: readonly ["closeAllOverlays", "closeSearch", "stopSyncLayout", ActionFunction<Context, Events, Events, undefined, Values<{
-                syncManualLayoutActorLogic: {
-                    src: "syncManualLayoutActorLogic";
-                    logic: SyncLayoutActorLogic;
-                    id: "syncLayout";
-                };
-                hotkeyActorLogic: {
-                    src: "hotkeyActorLogic";
-                    logic: HotkeyActorLogic;
-                    id: "hotkey";
-                };
-                overlaysActorLogic: {
-                    src: "overlaysActorLogic";
-                    logic: OverlaysActorLogic;
-                    id: "overlays";
-                };
-                searchActorLogic: {
-                    src: "searchActorLogic";
-                    logic: SearchActorLogic;
-                    id: "search";
-                };
-            }>, Values<{
-                onNodeMouseEnter: {
-                    type: "onNodeMouseEnter";
-                    params: {
-                        node: Types.Node;
-                    };
-                };
-                onNodeMouseLeave: {
-                    type: "onNodeMouseLeave";
-                    params: {
-                        node: Types.Node;
-                    };
-                };
-                onEdgeMouseEnter: {
-                    type: "onEdgeMouseEnter";
-                    params: {
-                        edge: Types.Edge;
-                    };
-                };
-                onEdgeMouseLeave: {
-                    type: "onEdgeMouseLeave";
-                    params: {
-                        edge: Types.Edge;
-                    };
-                };
-                "trigger:OnChange": {
-                    type: "trigger:OnChange";
-                    params: {
-                        change: ViewChange;
-                    };
-                };
-                "layout.align": {
-                    type: "layout.align";
-                    params: {
-                        mode: AlignmentMode;
-                    };
-                };
-                "notations.highlight": {
-                    type: "notations.highlight";
-                    params: {
-                        notation: ElementNotation;
-                        kind?: string;
-                    };
-                };
-                "tag.highlight": {
-                    type: "tag.highlight";
-                    params: NonReducibleUnknown;
-                };
-                "xyflow:fitDiagram": {
-                    type: "xyflow:fitDiagram";
-                    params: {
-                        duration?: number;
-                        bounds?: BBox;
-                    } | undefined;
-                };
-                closeAllOverlays: {
-                    type: "closeAllOverlays";
-                    params: NonReducibleUnknown;
-                };
-                "trigger:NavigateTo": {
-                    type: "trigger:NavigateTo";
-                    params: {
-                        viewId: ViewId;
-                    };
-                };
-                "trigger:OpenSource": {
-                    type: "trigger:OpenSource";
-                    params: OpenSourceParams;
-                };
-                "assign lastClickedNode": {
-                    type: "assign lastClickedNode";
-                    params: NonReducibleUnknown;
-                };
-                "open source of focused or last clicked node": {
-                    type: "open source of focused or last clicked node";
-                    params: NonReducibleUnknown;
-                };
-                "xyflow:fitFocusedBounds": {
-                    type: "xyflow:fitFocusedBounds";
-                    params: unknown;
-                };
-                "xyflow:setViewportCenter": {
-                    type: "xyflow:setViewportCenter";
-                    params: {
-                        x: number;
-                        y: number;
-                    };
-                };
-                "xyflow:setViewport": {
-                    type: "xyflow:setViewport";
-                    params: {
-                        viewport: Viewport;
-                        duration?: number;
-                    };
-                };
-                "xyflow:alignNodeFromToAfterNavigate": {
-                    type: "xyflow:alignNodeFromToAfterNavigate";
-                    params: {
-                        fromNode: NodeId;
-                        toPosition: XYPoint;
-                    };
-                };
-                "ensure overlays actor state": {
-                    type: "ensure overlays actor state";
-                    params: NonReducibleUnknown;
-                };
-                "ensure search actor state": {
-                    type: "ensure search actor state";
-                    params: NonReducibleUnknown;
-                };
-                updateFeatures: {
-                    type: "updateFeatures";
-                    params: NonReducibleUnknown;
-                };
-                closeSearch: {
-                    type: "closeSearch";
-                    params: NonReducibleUnknown;
-                };
-                startSyncLayout: {
-                    type: "startSyncLayout";
-                    params: NonReducibleUnknown;
-                };
-                stopSyncLayout: {
-                    type: "stopSyncLayout";
-                    params: NonReducibleUnknown;
-                };
-                "focus on nodes and edges": {
-                    type: "focus on nodes and edges";
-                    params: NonReducibleUnknown;
-                };
-                "undim everything": {
-                    type: "undim everything";
-                    params: NonReducibleUnknown;
-                };
-                "update active walkthrough": {
-                    type: "update active walkthrough";
-                    params: NonReducibleUnknown;
-                };
-            }>, Values<{
-                isReady: {
-                    type: "isReady";
-                    params: unknown;
-                };
-                "enabled: FitView": {
-                    type: "enabled: FitView";
-                    params: unknown;
-                };
-                "enabled: FocusMode": {
-                    type: "enabled: FocusMode";
-                    params: unknown;
-                };
-                "enabled: Readonly": {
-                    type: "enabled: Readonly";
-                    params: unknown;
-                };
-                "enabled: RelationshipDetails": {
-                    type: "enabled: RelationshipDetails";
-                    params: unknown;
-                };
-                "enabled: Search": {
-                    type: "enabled: Search";
-                    params: unknown;
-                };
-                "not readonly": {
-                    type: "not readonly";
-                    params: unknown;
-                };
-                "is dynamic view": {
-                    type: "is dynamic view";
-                    params: unknown;
-                };
-                "is another view": {
-                    type: "is another view";
-                    params: unknown;
-                };
-                "click: selected node": {
-                    type: "click: selected node";
-                    params: unknown;
-                };
-                "click: same node": {
-                    type: "click: same node";
-                    params: unknown;
-                };
-                "click: focused node": {
-                    type: "click: focused node";
-                    params: unknown;
-                };
-                "click: node has connections": {
-                    type: "click: node has connections";
-                    params: unknown;
-                };
-                "click: selected edge": {
-                    type: "click: selected edge";
-                    params: unknown;
-                };
-            }>, never, EventObject>];
+            readonly entry: readonly ["closeAllOverlays", "closeSearch", "stopSyncLayout", "trigger:NavigateTo"];
             readonly on: {
                 readonly 'update.view': {
                     readonly actions: ActionFunction<Context, {
@@ -2443,9 +2229,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                         };
                         "trigger:NavigateTo": {
                             type: "trigger:NavigateTo";
-                            params: {
-                                viewId: ViewId;
-                            };
+                            params: NonReducibleUnknown;
                         };
                         "trigger:OpenSource": {
                             type: "trigger:OpenSource";
@@ -2577,7 +2361,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "click: selected edge";
                             params: unknown;
                         };
-                    }>, never, EventObject>;
+                    }>, never, EmittedEvents>;
                     readonly target: "#idle";
                 };
             };
@@ -2841,9 +2625,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                 };
                 "trigger:NavigateTo": {
                     type: "trigger:NavigateTo";
-                    params: {
-                        viewId: ViewId;
-                    };
+                    params: NonReducibleUnknown;
                 };
                 "trigger:OpenSource": {
                     type: "trigger:OpenSource";
@@ -2975,7 +2757,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                     type: "click: selected edge";
                     params: unknown;
                 };
-            }>, never, EventObject>];
+            }>, never, EmittedEvents>];
         };
         readonly 'update.inputs': {
             readonly actions: ActionFunction<Context, {

package/dist/state/diagram-machine.js

@@ -2,7 +2,7 @@ import { nonNullable, invariant, nonexhaustive, BBox, isStepEdgeId, getParallelS
 import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
 import { nodeToRect } from '@xyflow/system';
 import { hasAtLeast, prop, clamp, first } from 'remeda';
-import { setup, assign, enqueueActions, sendTo, assertEvent, cancel, stopChild, raise, spawnChild, and, or } from 'xstate';
+import { setup, assign, enqueueActions, sendTo, emit, assertEvent, cancel, stopChild, raise, spawnChild, and, or } from 'xstate';
 import { MinZoom } from '../base/const.js';
 import { AllDisabled } from '../context/DiagramFeatures.js';
 import { createLayoutConstraints } from '../likec4diagram/useLayoutConstraints.js';
@@ -21,7 +21,8 @@ const _diagramMachine = setup({
     context: {},
     input: {},
     children: {},
-    events: {}
+    events: {},
+    emitted: {}
   },
   actors: {
     syncManualLayoutActorLogic,
@@ -70,12 +71,18 @@ const _diagramMachine = setup({
     }
   },
   actions: {
-    "trigger:NavigateTo": (_, _params) => {
-    },
-    "trigger:OnChange": (_, _params) => {
-    },
-    "trigger:OpenSource": (_, _params) => {
-    },
+    "trigger:NavigateTo": emit(({ context }) => ({
+      type: "navigateTo",
+      viewId: nonNullable(context.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
+    })),
+    "trigger:OnChange": emit((_, _params) => ({
+      type: "viewChange",
+      change: _params.change
+    })),
+    "trigger:OpenSource": emit((_, _params) => ({
+      type: "openSource",
+      params: _params
+    })),
     "assign lastClickedNode": assign(({ context, event }) => {
       assertEvent(event, "xyflow.nodeClick");
       return {
@@ -819,14 +826,7 @@ const _diagramMachine = setup({
         "closeAllOverlays",
         "closeSearch",
         "stopSyncLayout",
-        enqueueActions(({ enqueue, context }) => {
-          enqueue({
-            type: "trigger:NavigateTo",
-            params: {
-              viewId: nonNullable(context.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
-            }
-          });
-        })
+        "trigger:NavigateTo"
       ],
       on: {
         "update.view": {