@likec4/diagram 1.43.0 → 1.45.0

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

@@ -0,0 +1,262 @@
+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 { setViewport, fitDiagram, cancelFitDiagram, raiseFitDiagram } from './machine.actions.layout.js';
+
+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 nextView = event.view;
+    const isAnotherView = nextView.id !== context.view.id;
+    if (isAnotherView) {
+      console.warn("updateView called for another view - ignoring", { event });
+      return;
+    }
+    enqueue(updateXYNodesEdges());
+    if (event.source === "internal") {
+      return;
+    }
+    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;
+      }
+    }
+    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.*": {
+      actions: handleNavigate()
+    },
+    "layout.align": {
+      guard: "not readonly",
+      actions: [
+        startEditing("node"),
+        layoutAlign(),
+        stopEditing(true)
+      ]
+    },
+    "layout.resetEdgeControlPoints": {
+      guard: "not readonly",
+      actions: [
+        startEditing("edge"),
+        resetEdgesControlPoints(),
+        stopEditing(true)
+      ]
+    },
+    "layout.resetManualLayout": {
+      guard: "not readonly",
+      actions: [
+        stopSyncLayout(),
+        disableCompareWithLatest(),
+        xstateActions_cjsExports.emit({
+          type: "onChange",
+          change: {
+            op: "reset-manual-layout"
+          }
+        }),
+        ensureSyncLayoutActor()
+      ]
+    },
+    "xyflow.resized": {
+      guard: ({ context }) => context.features.enableFitView && !context.viewportChangedManually,
+      actions: [
+        cancelFitDiagram(),
+        raiseFitDiagram({ delay: 200 })
+      ]
+    },
+    "open.elementDetails": {
+      guard: "enabled: ElementDetails",
+      actions: openElementDetails()
+    },
+    "open.relationshipsBrowser": {
+      actions: xstateActions_cjsExports.sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event, self }) => ({
+        type: "open.relationshipsBrowser",
+        subject: event.fqn,
+        viewId: context.view.id,
+        scope: "view",
+        closeable: true,
+        enableChangeScope: true,
+        enableSelectSubject: true,
+        openSourceActor: self
+      }))
+    },
+    "open.relationshipDetails": {
+      actions: xstateActions_cjsExports.sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event, self }) => ({
+        type: "open.relationshipDetails",
+        viewId: context.view.id,
+        openSourceActor: self,
+        ...event.params
+      }))
+    },
+    "open.source": {
+      guard: "enabled: OpenSource",
+      actions: emitOpenSource()
+    },
+    "walkthrough.start": {
+      guard: "is dynamic view",
+      target: targetState.walkthrough
+    },
+    "toggle.feature": {
+      actions: [
+        assignToggledFeatures(),
+        ensureSyncLayoutActor()
+      ]
+    },
+    "update.features": {
+      actions: [
+        updateFeatures(),
+        ensureOverlaysActor(),
+        ensureSearchActor(),
+        ensureSyncLayoutActor()
+      ]
+    },
+    "xyflow.nodeMouseEnter": {
+      actions: onNodeMouseEnter()
+    },
+    "xyflow.nodeMouseLeave": {
+      actions: onNodeMouseLeave()
+    },
+    "xyflow.edgeMouseEnter": {
+      actions: onEdgeMouseEnter()
+    },
+    "xyflow.edgeMouseLeave": {
+      actions: onEdgeMouseLeave()
+    },
+    "xyflow.edgeDoubleClick": {
+      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()
+    },
+    "notations.unhighlight": {
+      actions: undimEverything()
+    },
+    "tag.highlight": {
+      actions: tagHighlight()
+    },
+    "tag.unhighlight": {
+      actions: undimEverything()
+    },
+    "open.search": {
+      guard: "enabled: Search",
+      actions: xstateActions_cjsExports.sendTo(({ system }) => typedSystem(system).searchActorRef, ({ event }) => ({
+        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
+    }
+  }
+});
+
+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 };