@likec4/diagram 1.45.0 → 1.46.0

package/dist/likec4diagram/state/machine.state.initializing.d.ts

@@ -1,11 +1,11 @@
 import { ActionFunction, Values } from 'xstate';
 import { Context, Events, EmittedEvents } from './machine.setup';
 import { XYFlowInstance } from '../../hooks';
-import { SyncLayoutActorLogic } from './syncManualLayoutActor';
 import { HotkeyActorLogic } from './hotkeyActor';
 import { OverlaysActorLogic } from '../../overlays/overlaysActor';
 import { SearchActorLogic } from '../../search/searchActor';
 import { MediaPrintActorLogic } from './mediaPrintActor';
+import { EditorActorLogic } from '../../editor';
 import { DiagramView } from '@likec4/core';
 /**
  * To be in `initializing` state, the diagram must wait for two events:
@@ -21,11 +21,6 @@ export declare const initializing: {
                 type: "xyflow.init";
                 instance: XYFlowInstance;
             }, Events, undefined, Values<{
-                syncManualLayoutActorLogic: {
-                    src: "syncManualLayoutActorLogic";
-                    logic: SyncLayoutActorLogic;
-                    id: "syncLayout";
-                };
                 hotkeyActorLogic: {
                     src: "hotkeyActorLogic";
                     logic: HotkeyActorLogic;
@@ -46,6 +41,11 @@ export declare const initializing: {
                     logic: MediaPrintActorLogic;
                     id: "mediaPrint";
                 };
+                editorActor: {
+                    src: "editorActor";
+                    logic: EditorActorLogic;
+                    id: "editor";
+                };
             }>, never, never, never, never>;
             target: string;
         };
@@ -53,15 +53,14 @@ export declare const initializing: {
             actions: ActionFunction<Context, {
                 type: "update.view";
                 view: DiagramView;
+                source?: "editor" | "external";
+            } | {
+                type: "update.view";
+                view: DiagramView;
+                source?: "editor" | "external";
                 xynodes: import("../types").Types.Node[];
                 xyedges: import("../types").Types.Edge[];
-                source?: "internal" | "external";
             }, Events, undefined, Values<{
-                syncManualLayoutActorLogic: {
-                    src: "syncManualLayoutActorLogic";
-                    logic: SyncLayoutActorLogic;
-                    id: "syncLayout";
-                };
                 hotkeyActorLogic: {
                     src: "hotkeyActorLogic";
                     logic: HotkeyActorLogic;
@@ -82,7 +81,12 @@ export declare const initializing: {
                     logic: MediaPrintActorLogic;
                     id: "mediaPrint";
                 };
-            }>, never, never, never, never>;
+                editorActor: {
+                    src: "editorActor";
+                    logic: EditorActorLogic;
+                    id: "editor";
+                };
+            }>, never, never, never, never>[];
             target: string;
         };
     };
@@ -96,11 +100,6 @@ export declare const isReady: {
     always: ({
         guard: "isReady";
         actions: ActionFunction<Context, Events, Events, undefined, Values<{
-            syncManualLayoutActorLogic: {
-                src: "syncManualLayoutActorLogic";
-                logic: SyncLayoutActorLogic;
-                id: "syncLayout";
-            };
             hotkeyActorLogic: {
                 src: "hotkeyActorLogic";
                 logic: HotkeyActorLogic;
@@ -121,11 +120,20 @@ export declare const isReady: {
                 logic: MediaPrintActorLogic;
                 id: "mediaPrint";
             };
+            editorActor: {
+                src: "editorActor";
+                logic: EditorActorLogic;
+                id: "editor";
+            };
         }>, never, Values<{
             isReady: {
                 type: "isReady";
                 params: unknown;
             };
+            "enabled: Editor": {
+                type: "enabled: Editor";
+                params: unknown;
+            };
             "enabled: FitView": {
                 type: "enabled: FitView";
                 params: unknown;
@@ -158,6 +166,10 @@ export declare const isReady: {
                 type: "enabled: DynamicViewWalkthrough";
                 params: unknown;
             };
+            "focus.node: autoUnfocus": {
+                type: "focus.node: autoUnfocus";
+                params: unknown;
+            };
             "enabled: Overlays": {
                 type: "enabled: Overlays";
                 params: unknown;
@@ -170,6 +182,10 @@ export declare const isReady: {
                 type: "is dynamic view";
                 params: unknown;
             };
+            "is same view": {
+                type: "is same view";
+                params: unknown;
+            };
             "is another view": {
                 type: "is another view";
                 params: unknown;

package/dist/likec4diagram/state/machine.state.initializing.js

@@ -1,4 +1,4 @@
-import { emitInitialized } from './machine.actions.js';
+import { emitInitialized, assignXYDataFromView } from './machine.actions.js';
 import { fitDiagram } from './machine.actions.layout.js';
 import { machine } from './machine.setup.js';
 import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
@@ -16,15 +16,15 @@ const initializing = machine.createStateConfig({
       target: "isReady"
     },
     "update.view": {
-      actions: xstateActions_cjsExports.assign(({ context, event }) => ({
-        initialized: {
-          ...context.initialized,
-          xydata: true
-        },
-        view: event.view,
-        xynodes: event.xynodes,
-        xyedges: event.xyedges
-      })),
+      actions: [
+        assignXYDataFromView(),
+        xstateActions_cjsExports.assign(({ context }) => ({
+          initialized: {
+            ...context.initialized,
+            xydata: true
+          }
+        }))
+      ],
       target: "isReady"
     }
   }

package/dist/likec4diagram/state/machine.state.navigating.js

@@ -1,10 +1,12 @@
 import { BBox } from '@likec4/core/types';
 import { invariant, nonNullable } from '@likec4/core/utils';
+import { isTruthy } from 'remeda';
 import { enqueueActions, assertEvent } from 'xstate';
+import { convertToXYFlow } from '../convert-to-xyflow.js';
 import { mergeXYNodesEdges } from './assign.js';
 import { disableCompareWithLatest } from './machine.actions.js';
 import { machine, targetState } from './machine.setup.js';
-import { calcViewportForBounds, findCorrespondingNode, nodeRef } from './utils.js';
+import { calcViewportForBounds, findCorrespondingNode, findNodeByModelFqn, nodeRef } from './utils.js';
 import { cancelFitDiagram, raiseSetViewport, raiseFitDiagram } from './machine.actions.layout.js';
 
 const handleBrowserForwardBackward = () => machine.assign(({ context, event }) => {
@@ -73,17 +75,24 @@ const navigating = machine.createStateConfig({
             history
           }
         } = context;
+        const eventWithXYData = "xynodes" in event ? event : {
+          ...event,
+          ...convertToXYFlow({
+            dynamicViewVariant: context.dynamicViewVariant,
+            view: event.view,
+            where: context.where
+          })
+        };
         invariant(xyflow, "xyflow is not initialized");
         const calcZoomTowardsNextViewport = (nextViewport2) => {
           const zoom = xyflow.getZoom();
-          const coef = nextViewport2.zoom < zoom ? 0.7 : 0.3;
+          const coef = nextViewport2.zoom < zoom ? 0.8 : 0.4;
           return zoom + (nextViewport2.zoom - zoom) * coef;
         };
         const fromHistory = history[currentIndex];
         if (fromHistory && fromHistory.viewId === event.view.id) {
-          console.log("Navigating: fromHistory", fromHistory);
           enqueue.assign({
-            ...mergeXYNodesEdges(context, event),
+            ...mergeXYNodesEdges(context, eventWithXYData),
             dynamicViewVariant: fromHistory.dynamicViewVariant ?? context.dynamicViewVariant,
             viewportChangedManually: fromHistory.viewportChangedManually
           });
@@ -128,7 +137,7 @@ const navigating = machine.createStateConfig({
           context,
           event.view.bounds
         );
-        const { fromNode, toNode } = findCorrespondingNode(context, event);
+        const { fromNode, toNode } = findCorrespondingNode(context, eventWithXYData);
         if (fromNode && toNode) {
           const elFrom = xyflow.getInternalNode(fromNode.id);
           const fromPoint = xyflow.flowToScreenPosition({
@@ -158,8 +167,10 @@ const navigating = machine.createStateConfig({
           viewport: { ...nextViewport },
           viewportChangedManually: false
         });
+        const focusOnElement = context.lastOnNavigate?.focusOnElement;
+        const nodeToFocus = isTruthy(focusOnElement) ? findNodeByModelFqn(eventWithXYData.xynodes, focusOnElement) : null;
         enqueue.assign({
-          ...mergeXYNodesEdges(context, event),
+          ...mergeXYNodesEdges(context, eventWithXYData),
           viewportChangedManually: false,
           lastOnNavigate: null,
           navigationHistory: {
@@ -167,9 +178,17 @@ const navigating = machine.createStateConfig({
             history: updatedHistory
           }
         });
-        enqueue(raiseFitDiagram({
-          delay: 100
-        }));
+        if (nodeToFocus) {
+          enqueue.raise({
+            type: "focus.node",
+            nodeId: nodeToFocus.id,
+            autoUnfocus: true
+          }, { delay: 150 });
+        } else {
+          enqueue(raiseFitDiagram({
+            delay: 100
+          }));
+        }
       })
     ]
   }