@likec4/diagram 1.44.0 → 1.45.0

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

@@ -1,318 +1,96 @@
-import { isStepEdgeId, getParallelStepsPrefix } from '@likec4/core';
-import { clamp, first } from 'remeda';
-import { assertEvent } from 'xstate';
-import { SeqParallelAreaColor } from '../xyflow-sequence/const.js';
-import { navigateForward, navigateBack } from './assign.js';
-import { cancelFitDiagram, undimEverything, tagHighlight, notationsHighlight, onEdgeDoubleClick, onEdgeMouseLeave, onEdgeMouseEnter, onNodeMouseLeave, onNodeMouseEnter, toggleFeature, ensureSyncLayout, emitOpenSource, openElementDetails, raiseFitDiagram, stopSyncLayout, disableCompareWithLatest, startEditing, resetEdgesControlPoints, stopEditing, layoutAlign, updateActiveWalkthroughState, xyflow, emitEdgeClick, emitWalkthroughStep, emitWalkthroughStarted, emitWalkthroughStopped, focusOnNodesAndEdges, resetLastClickedNode, emitPaneClick, assignFocusedNode, openSourceOfFocusedOrLastClickedNode, emitNodeClick, assignLastClickedNode } from './machine.actions.js';
-import { machine } from './machine.setup.js';
-import { typedSystem } from './utils.js';
+import { BBox } from '@likec4/core';
+import { resetLastClickedNode, emitEdgeClick, assignLastClickedNode, emitNodeClick, emitPaneClick, undimEverything, tagHighlight, notationsHighlight, startEditing, onEdgeDoubleClick, stopEditing, onEdgeMouseLeave, onEdgeMouseEnter, onNodeMouseLeave, onNodeMouseEnter, updateFeatures, ensureOverlaysActor, ensureSearchActor, ensureSyncLayoutActor, assignToggledFeatures, emitOpenSource, openElementDetails, stopSyncLayout, disableCompareWithLatest, resetEdgesControlPoints, layoutAlign, handleNavigate, closeAllOverlays, closeSearch, updateXYNodesEdges, sendSynced } from './machine.actions.js';
+import { machine, targetState } from './machine.setup.js';
+import { focused } from './machine.state.ready.focused.js';
+import { idle } from './machine.state.ready.idle.js';
+import { printing } from './machine.state.ready.printing.js';
+import { walkthrough } from './machine.state.ready.walkthrough.js';
+import { typedSystem, calcViewportForBounds } from './utils.js';
 import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
 import { x as xstateGuards_cjsExports } from '../../_virtual/xstate-guards.cjs.js';
-import { Base } from '../../base/Base.js';
+import { setViewport, fitDiagram, cancelFitDiagram, raiseFitDiagram } from './machine.actions.layout.js';
 
-const navigating = "#navigating";
-const idle = machine.createStateConfig({
-  id: "idle",
-  on: {
-    "xyflow.nodeClick": [
-      {
-        guard: xstateGuards_cjsExports.and([
-          "enabled: FocusMode",
-          "click: node has connections",
-          xstateGuards_cjsExports.or([
-            "click: same node",
-            "click: selected node"
-          ])
-        ]),
-        actions: [
-          assignLastClickedNode(),
-          assignFocusedNode(),
-          emitNodeClick()
-        ],
-        target: "focused"
-      },
-      {
-        guard: xstateGuards_cjsExports.and([
-          "enabled: Readonly",
-          "enabled: ElementDetails",
-          "click: node has modelFqn",
-          xstateGuards_cjsExports.or([
-            "click: same node",
-            "click: selected node"
-          ])
-        ]),
-        actions: [
-          assignLastClickedNode(),
-          openSourceOfFocusedOrLastClickedNode(),
-          openElementDetails(),
-          emitNodeClick()
-        ]
-      },
-      {
-        actions: [
-          assignLastClickedNode(),
-          openSourceOfFocusedOrLastClickedNode(),
-          emitNodeClick()
-        ]
-      }
-    ],
-    "xyflow.paneClick": {
-      actions: [
-        resetLastClickedNode(),
-        emitPaneClick()
-      ]
-    },
-    "xyflow.paneDblClick": {
-      actions: [
-        resetLastClickedNode(),
-        xyflow.fitDiagram(),
-        xstateActions_cjsExports.enqueueActions(({ context, enqueue }) => {
-          enqueue(
-            emitOpenSource({ view: context.view.id })
-          );
-        })
-      ]
-    },
-    "focus.node": {
-      guard: "enabled: FocusMode",
-      actions: assignFocusedNode(),
-      target: "focused"
-    },
-    "xyflow.edgeClick": {
-      guard: xstateGuards_cjsExports.and([
-        "enabled: Readonly",
-        "is dynamic view",
-        "enabled: DynamicViewWalkthrough",
-        "click: selected edge"
-      ]),
-      actions: [
-        xstateActions_cjsExports.raise(({ event }) => ({
-          type: "walkthrough.start",
-          stepId: event.edge.id
-        })),
-        emitEdgeClick()
-      ]
+const updateView = () => machine.enqueueActions(
+  ({ enqueue, event, context, self }) => {
+    if (event.type !== "update.view") {
+      console.warn(`Ignoring unexpected event type: ${event.type} in action 'update.view'`);
+      return;
     }
-  }
-});
-const focused = machine.createStateConfig({
-  entry: [
-    focusOnNodesAndEdges(),
-    xstateActions_cjsExports.assign((s) => ({
-      viewportBeforeFocus: { ...s.context.viewport }
-    })),
-    openSourceOfFocusedOrLastClickedNode(),
-    xstateActions_cjsExports.spawnChild("hotkeyActorLogic", { id: "hotkey" }),
-    xyflow.fitFocusedBounds()
-  ],
-  exit: xstateActions_cjsExports.enqueueActions(({ enqueue, context }) => {
-    enqueue.stopChild("hotkey");
-    if (context.viewportBeforeFocus) {
-      enqueue(xyflow.setViewport({ viewport: context.viewportBeforeFocus }));
-    } else {
-      enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 20 });
+    const nextView = event.view;
+    const isAnotherView = nextView.id !== context.view.id;
+    if (isAnotherView) {
+      console.warn("updateView called for another view - ignoring", { event });
+      return;
     }
-    enqueue(undimEverything());
-    enqueue.assign({
-      viewportBeforeFocus: null,
-      focusedNode: null
-    });
-  }),
-  on: {
-    "xyflow.nodeClick": [
-      {
-        guard: xstateGuards_cjsExports.and([
-          "click: focused node",
-          "click: node has modelFqn"
-        ]),
-        actions: [
-          openElementDetails(),
-          emitNodeClick()
-        ]
-      },
-      {
-        guard: "click: focused node",
-        actions: emitNodeClick(),
-        target: "#idle"
-      },
-      {
-        actions: [
-          assignLastClickedNode(),
-          xstateActions_cjsExports.raise(({ event }) => ({
-            type: "focus.node",
-            nodeId: event.node.id
-          })),
-          emitNodeClick()
-        ]
-      }
-    ],
-    "focus.node": {
-      actions: [
-        assignFocusedNode(),
-        focusOnNodesAndEdges(),
-        openSourceOfFocusedOrLastClickedNode(),
-        xyflow.fitFocusedBounds()
-      ]
-    },
-    "key.esc": {
-      target: "idle"
-    },
-    "xyflow.paneClick": {
-      actions: [
-        resetLastClickedNode(),
-        emitPaneClick()
-      ],
-      target: "idle"
-    },
-    "notations.unhighlight": {
-      actions: focusOnNodesAndEdges()
-    },
-    "tag.unhighlight": {
-      actions: focusOnNodesAndEdges()
+    enqueue(updateXYNodesEdges());
+    if (event.source === "internal") {
+      return;
     }
-  }
-});
-const walkthrough = machine.createStateConfig({
-  entry: [
-    xstateActions_cjsExports.spawnChild("hotkeyActorLogic", { id: "hotkey" }),
-    xstateActions_cjsExports.assign({
-      viewportBeforeFocus: ({ context }) => context.viewport,
-      activeWalkthrough: ({ context, event }) => {
-        assertEvent(event, "walkthrough.start");
-        const stepId = event.stepId ?? first(context.xyedges).id;
-        return {
-          stepId,
-          parallelPrefix: getParallelStepsPrefix(stepId)
-        };
+    enqueue(sendSynced());
+    let recenter = !context.viewportChangedManually;
+    if (context.toggledFeatures.enableCompareWithLatest === true && context.view._layout !== nextView._layout) {
+      if (nextView._layout === "auto" && context.viewportOnAutoLayout) {
+        enqueue(
+          setViewport({
+            viewport: context.viewportOnAutoLayout,
+            duration: 0
+          })
+        );
+        return;
+      }
+      if (nextView._layout === "manual" && context.viewportOnManualLayout) {
+        enqueue(
+          setViewport({
+            viewport: context.viewportOnManualLayout,
+            duration: 0
+          })
+        );
+        return;
       }
-    }),
-    updateActiveWalkthroughState(),
-    xyflow.fitFocusedBounds(),
-    emitWalkthroughStarted()
-  ],
-  exit: xstateActions_cjsExports.enqueueActions(({ enqueue, context }) => {
-    enqueue.stopChild("hotkey");
-    if (context.viewportBeforeFocus) {
-      enqueue(xyflow.setViewport({ viewport: context.viewportBeforeFocus }));
-    } else {
-      enqueue(raiseFitDiagram({ delay: 10 }));
-    }
-    if (context.dynamicViewVariant === "sequence" && context.activeWalkthrough?.parallelPrefix) {
-      enqueue.assign({
-        xynodes: context.xynodes.map((n) => {
-          if (n.type === "seq-parallel") {
-            return Base.setData(n, {
-              color: SeqParallelAreaColor.default
-            });
-          }
-          return n;
-        })
-      });
     }
-    enqueue(undimEverything());
-    enqueue.assign({
-      activeWalkthrough: null,
-      viewportBeforeFocus: null
-    });
-    enqueue(emitWalkthroughStopped());
-  }),
-  on: {
-    "key.esc": {
-      target: "idle"
-    },
-    "key.arrow.left": {
-      actions: xstateActions_cjsExports.raise({ type: "walkthrough.step", direction: "previous" })
-    },
-    "key.arrow.right": {
-      actions: xstateActions_cjsExports.raise({ type: "walkthrough.step", direction: "next" })
-    },
-    "walkthrough.step": {
-      actions: [
-        xstateActions_cjsExports.assign(({ context, event }) => {
-          const { stepId } = context.activeWalkthrough;
-          const stepIndex = context.xyedges.findIndex((e) => e.id === stepId);
-          const nextStepIndex = clamp(event.direction === "next" ? stepIndex + 1 : stepIndex - 1, {
-            min: 0,
-            max: context.xyedges.length - 1
-          });
-          if (nextStepIndex === stepIndex) {
-            return {};
-          }
-          const nextStepId = context.xyedges[nextStepIndex].id;
-          return {
-            activeWalkthrough: {
-              stepId: nextStepId,
-              parallelPrefix: getParallelStepsPrefix(nextStepId)
-            }
-          };
-        }),
-        updateActiveWalkthroughState(),
-        xyflow.fitFocusedBounds(),
-        emitWalkthroughStep()
-      ]
-    },
-    "xyflow.edgeClick": {
-      actions: [
-        xstateActions_cjsExports.assign(({ event, context }) => {
-          if (!isStepEdgeId(event.edge.id) || event.edge.id === context.activeWalkthrough?.stepId) {
-            return {};
-          }
-          return {
-            activeWalkthrough: {
-              stepId: event.edge.id,
-              parallelPrefix: getParallelStepsPrefix(event.edge.id)
-            }
-          };
-        }),
-        updateActiveWalkthroughState(),
-        xyflow.fitFocusedBounds(),
-        emitEdgeClick(),
-        emitWalkthroughStep()
-      ]
-    },
-    "notations.unhighlight": {
-      actions: updateActiveWalkthroughState()
-    },
-    "tag.unhighlight": {
-      actions: updateActiveWalkthroughState()
-    },
-    "walkthrough.end": {
-      target: "idle"
-    },
-    "xyflow.paneDblClick": {
-      target: "idle"
-    },
-    // We received another view, close overlay and process event again
-    "update.view": {
-      guard: "is another view",
-      actions: xstateActions_cjsExports.raise(({ event }) => event, { delay: 50 }),
-      target: "idle"
+    recenter = recenter || nextView._type === "dynamic" && context.view._type === "dynamic" && nextView.variant !== context.view.variant;
+    recenter = recenter || context.toggledFeatures.enableCompareWithLatest === true && !!nextView._layout && context.view._layout !== nextView._layout;
+    if (recenter) {
+      enqueue(cancelFitDiagram());
+      const nextViewport = calcViewportForBounds(
+        context,
+        event.view.bounds
+      );
+      let zoom = Math.min(nextViewport.zoom, context.viewport.zoom);
+      const center = BBox.center(event.view.bounds);
+      context.xyflow.setCenter(
+        Math.round(center.x),
+        Math.round(center.y),
+        { zoom }
+      );
+      enqueue(raiseFitDiagram());
     }
   }
-});
+);
 const ready = machine.createStateConfig({
   initial: "idle",
+  entry: [
+    xstateActions_cjsExports.spawnChild("mediaPrintActorLogic", { id: "mediaPrint" }),
+    ensureSyncLayoutActor(),
+    ensureOverlaysActor(),
+    ensureSearchActor()
+  ],
+  exit: [
+    cancelFitDiagram(),
+    xstateActions_cjsExports.stopChild("mediaPrint"),
+    closeAllOverlays(),
+    closeSearch(),
+    stopSyncLayout()
+  ],
+  states: {
+    idle,
+    focused,
+    walkthrough,
+    printing
+  },
   on: {
-    "navigate.to": {
-      guard: "is another view",
-      actions: xstateActions_cjsExports.assign({
-        lastOnNavigate: ({ context, event }) => ({
-          fromView: context.view.id,
-          toView: event.viewId,
-          fromNode: event.fromNode ?? null
-        })
-      }),
-      target: navigating
-    },
-    "navigate.back": {
-      guard: ({ context }) => context.navigationHistory.currentIndex > 0,
-      actions: xstateActions_cjsExports.assign(navigateBack),
-      target: navigating
-    },
-    "navigate.forward": {
-      guard: ({ context }) => context.navigationHistory.currentIndex < context.navigationHistory.history.length - 1,
-      actions: xstateActions_cjsExports.assign(navigateForward),
-      target: navigating
+    "navigate.*": {
+      actions: handleNavigate()
     },
     "layout.align": {
       guard: "not readonly",
@@ -325,7 +103,7 @@ const ready = machine.createStateConfig({
     "layout.resetEdgeControlPoints": {
       guard: "not readonly",
       actions: [
-        startEditing("node"),
+        startEditing("edge"),
         resetEdgesControlPoints(),
         stopEditing(true)
       ]
@@ -335,13 +113,13 @@ const ready = machine.createStateConfig({
       actions: [
         stopSyncLayout(),
         disableCompareWithLatest(),
-        ensureSyncLayout(),
         xstateActions_cjsExports.emit({
           type: "onChange",
           change: {
             op: "reset-manual-layout"
           }
-        })
+        }),
+        ensureSyncLayoutActor()
       ]
     },
     "xyflow.resized": {
@@ -376,16 +154,25 @@ const ready = machine.createStateConfig({
       }))
     },
     "open.source": {
+      guard: "enabled: OpenSource",
       actions: emitOpenSource()
     },
     "walkthrough.start": {
       guard: "is dynamic view",
-      target: ".walkthrough"
+      target: targetState.walkthrough
     },
     "toggle.feature": {
       actions: [
-        toggleFeature(),
-        ensureSyncLayout()
+        assignToggledFeatures(),
+        ensureSyncLayoutActor()
+      ]
+    },
+    "update.features": {
+      actions: [
+        updateFeatures(),
+        ensureOverlaysActor(),
+        ensureSearchActor(),
+        ensureSyncLayoutActor()
       ]
     },
     "xyflow.nodeMouseEnter": {
@@ -401,8 +188,15 @@ const ready = machine.createStateConfig({
       actions: onEdgeMouseLeave()
     },
     "xyflow.edgeDoubleClick": {
-      guard: "not readonly",
-      actions: onEdgeDoubleClick()
+      guard: xstateGuards_cjsExports.and([
+        "not readonly",
+        ({ event }) => !!event.edge.data.controlPoints && event.edge.data.controlPoints.length > 0
+      ]),
+      actions: [
+        startEditing("edge"),
+        onEdgeDoubleClick(),
+        stopEditing(true)
+      ]
     },
     "notations.highlight": {
       actions: notationsHighlight()
@@ -422,16 +216,47 @@ const ready = machine.createStateConfig({
         type: "open",
         search: event.search
       }))
+    },
+    "xyflow.paneClick": {
+      actions: [
+        resetLastClickedNode(),
+        emitPaneClick()
+      ]
+    },
+    "xyflow.nodeClick": {
+      actions: [
+        assignLastClickedNode(),
+        emitNodeClick()
+      ]
+    },
+    "xyflow.edgeClick": {
+      actions: [
+        resetLastClickedNode(),
+        emitEdgeClick()
+      ]
+    },
+    "xyflow.fitDiagram": {
+      guard: "enabled: FitView",
+      actions: fitDiagram()
+    },
+    "xyflow.setViewport": {
+      actions: setViewport()
+    },
+    "update.view": [
+      // Redirect to navigating state if received another view
+      {
+        guard: "is another view",
+        target: targetState.navigating
+      },
+      // Otherwise, just update the view in place
+      {
+        actions: updateView()
+      }
+    ],
+    "media.print.on": {
+      target: targetState.printing
     }
-  },
-  exit: [
-    cancelFitDiagram()
-  ],
-  states: {
-    idle,
-    focused,
-    walkthrough
   }
 });
 
-export { focused, idle, ready, walkthrough };
+export { ready };

package/dist/likec4diagram/state/machine.state.ready.printing.d.ts

@@ -0,0 +1,128 @@
+import { CancelAction, ActionFunction, Values, LogAction } from 'xstate';
+import { Context, Events, EmittedEvents } from './machine.setup';
+import { SyncLayoutActorLogic } from './syncManualLayoutActor';
+import { HotkeyActorLogic } from './hotkeyActor';
+import { OverlaysActorLogic } from '../../overlays/overlaysActor';
+import { SearchActorLogic } from '../../search/searchActor';
+import { MediaPrintActorLogic } from './mediaPrintActor';
+/**
+ * State when the diagram is being prepared for printing.
+ * Adjusts the viewport to fit the entire diagram for optimal printing.
+ * Restores the previous viewport upon exiting the state.
+ */
+export declare const printing: {
+    id: string;
+    entry: CancelAction<Context, Events, undefined, Events>[];
+    exit: 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";
+        };
+        mediaPrintActorLogic: {
+            src: "mediaPrintActorLogic";
+            logic: MediaPrintActorLogic;
+            id: "mediaPrint";
+        };
+    }>, never, 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;
+        };
+        "enabled: ElementDetails": {
+            type: "enabled: ElementDetails";
+            params: unknown;
+        };
+        "enabled: OpenSource": {
+            type: "enabled: OpenSource";
+            params: unknown;
+        };
+        "enabled: DynamicViewWalkthrough": {
+            type: "enabled: DynamicViewWalkthrough";
+            params: unknown;
+        };
+        "enabled: Overlays": {
+            type: "enabled: Overlays";
+            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: node has modelFqn": {
+            type: "click: node has modelFqn";
+            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, EmittedEvents>[];
+    on: {
+        'media.print.off': {
+            target: string;
+        };
+        '*': {
+            actions: LogAction<Context, Events, undefined, Events>[];
+        };
+    };
+};

package/dist/likec4diagram/state/machine.state.ready.printing.js

@@ -0,0 +1,40 @@
+import { log, enqueueActions } from 'xstate';
+import { machine, targetState } from './machine.setup.js';
+import { returnViewportBefore, cancelFitDiagram, assignViewportBefore, setViewport } from './machine.actions.layout.js';
+
+const printing = machine.createStateConfig({
+  id: targetState.printing.slice(1),
+  entry: [
+    cancelFitDiagram(),
+    assignViewportBefore(),
+    enqueueActions(({ enqueue, context }) => {
+      const bounds = context.view.bounds;
+      const OFFSET = 16;
+      enqueue(
+        setViewport({
+          viewport: {
+            x: bounds.x + OFFSET,
+            y: bounds.y + OFFSET,
+            zoom: 1
+          },
+          duration: 0
+        })
+      );
+    })
+  ],
+  exit: [
+    returnViewportBefore({ delay: 0, duration: 0 })
+  ],
+  on: {
+    "media.print.off": {
+      target: targetState.idle
+    },
+    "*": {
+      actions: [
+        log(({ event }) => `Printing state - ignoring event: ${event.type}`)
+      ]
+    }
+  }
+});
+
+export { printing };