@likec4/diagram 1.55.0 → 1.56.0

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

@@ -1,117 +1,108 @@
-import { nonexhaustive } from '@likec4/core';
-import { mapValues, isTruthy } from 'remeda';
-import { setup, assertEvent } from 'xstate';
-import { editorActorLogic } from '../../editor/editorActor.states.js';
-import { overlaysActorLogic } from '../../overlays/overlaysActor.js';
-import { searchActorLogic } from '../../search/searchActor.js';
-import { hotkeyActorLogic } from './hotkeyActor.js';
-import { mediaPrintActorLogic } from './mediaPrintActor.js';
-
-const deriveToggledFeatures = (context) => {
-  let toggledFeatures = context.toggledFeatures;
-  const hasActiveWalkthrough = isTruthy(context.activeWalkthrough);
-  const enableCompareWithLatest = context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isTruthy(context.view._layout) && !hasActiveWalkthrough;
-  const enableReadOnly = context.features.enableReadOnly || (toggledFeatures.enableReadOnly ?? false) || hasActiveWalkthrough || enableCompareWithLatest && context.view._layout === "auto";
-  return {
-    enableCompareWithLatest,
-    enableReadOnly
-  };
+import "../../_virtual/_rolldown/runtime.js";
+import { editorActorLogic } from "../../editor/editorActor.states.js";
+import { overlaysActorLogic } from "../../overlays/overlaysActor.js";
+import { searchActorLogic } from "../../search/searchActor.js";
+import { hotkeyActorLogic } from "./hotkeyActor.js";
+import { mediaPrintActorLogic } from "./mediaPrintActor.js";
+import { isTruthy, mapValues } from "remeda";
+import { nonexhaustive } from "@likec4/core";
+import "@likec4/core/geometry";
+import { assertEvent, setup } from "xstate";
+//#region src/likec4diagram/state/machine.setup.ts
+var deriveToggledFeatures = (context) => {
+	let toggledFeatures = context.toggledFeatures;
+	const hasActiveWalkthrough = isTruthy(context.activeWalkthrough);
+	const enableCompareWithLatest = context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isTruthy(context.view._layout) && !hasActiveWalkthrough;
+	return {
+		enableCompareWithLatest,
+		enableReadOnly: context.features.enableReadOnly || (toggledFeatures.enableReadOnly ?? false) || hasActiveWalkthrough || enableCompareWithLatest && context.view._layout === "auto"
+	};
 };
-const isReadOnly = (context) => deriveToggledFeatures(context).enableReadOnly;
-const machine = setup({
-  types: {
-    context: {},
-    input: {},
-    children: {},
-    events: {},
-    emitted: {}
-  },
-  actors: {
-    hotkeyActorLogic,
-    overlaysActorLogic,
-    searchActorLogic,
-    mediaPrintActorLogic,
-    editorActor: editorActorLogic
-  },
-  guards: {
-    "isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
-    "enabled: Editor": ({ context }) => context.features.enableEditor,
-    "enabled: FitView": ({ context }) => context.features.enableFitView,
-    "enabled: FocusMode": ({ context }) => context.features.enableFocusMode && isReadOnly(context),
-    "enabled: Readonly": ({ context }) => isReadOnly(context),
-    "enabled: RelationshipDetails": ({ context }) => context.features.enableRelationshipDetails,
-    "enabled: Search": ({ context }) => context.features.enableSearch,
-    "enabled: ElementDetails": ({ context }) => context.features.enableElementDetails,
-    "enabled: OpenSource": ({ context }) => context.features.enableVscode,
-    "enabled: DynamicViewWalkthrough": ({ context }) => context.features.enableDynamicViewWalkthrough,
-    "focus.node: autoUnfocus": ({ event }) => {
-      assertEvent(event, "focus.node");
-      return event.autoUnfocus === true;
-    },
-    "enabled: Overlays": ({ context }) => context.features.enableElementDetails || context.features.enableRelationshipBrowser || context.features.enableRelationshipDetails,
-    "not readonly": ({ context }) => !isReadOnly(context),
-    "is dynamic view": ({ context }) => context.view._type === "dynamic",
-    "is same view": ({ context, event }) => {
-      assertEvent(event, ["update.view", "navigate.to"]);
-      if (event.type === "update.view") {
-        return context.view.id === event.view.id;
-      }
-      if (event.type === "navigate.to") {
-        return context.view.id === event.viewId;
-      }
-      nonexhaustive(event);
-    },
-    "is another view": ({ context, event }) => {
-      assertEvent(event, ["update.view", "navigate.to"]);
-      if (event.type === "update.view") {
-        return context.view.id !== event.view.id;
-      }
-      if (event.type === "navigate.to") {
-        return context.view.id !== event.viewId;
-      }
-      nonexhaustive(event);
-    },
-    "click: node has modelFqn": ({ event }) => {
-      assertEvent(event, "xyflow.nodeClick");
-      return "modelFqn" in event.node.data;
-    },
-    "click: selected node": ({ event }) => {
-      assertEvent(event, "xyflow.nodeClick");
-      return event.node.selected === true;
-    },
-    "click: same node": ({ context, event }) => {
-      assertEvent(event, "xyflow.nodeClick");
-      return context.lastClickedNode?.id === event.node.id;
-    },
-    "click: focused node": ({ context, event }) => {
-      assertEvent(event, "xyflow.nodeClick");
-      return context.focusedNode === event.node.id;
-    },
-    "click: node has connections": ({ context, event }) => {
-      assertEvent(event, "xyflow.nodeClick");
-      return context.xyedges.some((e) => e.source === event.node.id || e.target === event.node.id);
-    },
-    "click: selected edge": ({ event }) => {
-      assertEvent(event, ["xyflow.edgeClick", "xyflow.edgeDoubleClick"]);
-      return event.edge.selected === true || event.edge.data.active === true;
-    },
-    "click: active walkthrough step": ({ context, event }) => {
-      assertEvent(event, ["xyflow.edgeClick", "xyflow.edgeDoubleClick"]);
-      if (!context.activeWalkthrough) {
-        return false;
-      }
-      const { stepId } = context.activeWalkthrough;
-      return event.edge.id === stepId;
-    }
-  }
+var isReadOnly = (context) => deriveToggledFeatures(context).enableReadOnly;
+var machine = setup({
+	types: {
+		context: {},
+		input: {},
+		children: {},
+		events: {},
+		emitted: {}
+	},
+	actors: {
+		hotkeyActorLogic,
+		overlaysActorLogic,
+		searchActorLogic,
+		mediaPrintActorLogic,
+		editorActor: editorActorLogic
+	},
+	guards: {
+		"isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
+		"enabled: Editor": ({ context }) => context.features.enableEditor,
+		"enabled: FitView": ({ context }) => context.features.enableFitView,
+		"enabled: FocusMode": ({ context }) => context.features.enableFocusMode && isReadOnly(context),
+		"enabled: Readonly": ({ context }) => isReadOnly(context),
+		"enabled: RelationshipDetails": ({ context }) => context.features.enableRelationshipDetails,
+		"enabled: Search": ({ context }) => context.features.enableSearch,
+		"enabled: ElementDetails": ({ context }) => context.features.enableElementDetails,
+		"enabled: OpenSource": ({ context }) => context.features.enableVscode,
+		"enabled: DynamicViewWalkthrough": ({ context }) => context.features.enableDynamicViewWalkthrough,
+		"focus.node: autoUnfocus": ({ event }) => {
+			assertEvent(event, "focus.node");
+			return event.autoUnfocus === true;
+		},
+		"enabled: Overlays": ({ context }) => context.features.enableElementDetails || context.features.enableRelationshipBrowser || context.features.enableRelationshipDetails,
+		"not readonly": ({ context }) => !isReadOnly(context),
+		"is dynamic view": ({ context }) => context.view._type === "dynamic",
+		"is same view": ({ context, event }) => {
+			assertEvent(event, ["update.view", "navigate.to"]);
+			if (event.type === "update.view") return context.view.id === event.view.id;
+			if (event.type === "navigate.to") return context.view.id === event.viewId;
+			nonexhaustive(event);
+		},
+		"is another view": ({ context, event }) => {
+			assertEvent(event, ["update.view", "navigate.to"]);
+			if (event.type === "update.view") return context.view.id !== event.view.id;
+			if (event.type === "navigate.to") return context.view.id !== event.viewId;
+			nonexhaustive(event);
+		},
+		"click: node has modelFqn": ({ event }) => {
+			assertEvent(event, "xyflow.nodeClick");
+			return "modelFqn" in event.node.data;
+		},
+		"click: selected node": ({ event }) => {
+			assertEvent(event, "xyflow.nodeClick");
+			return event.node.selected === true;
+		},
+		"click: same node": ({ context, event }) => {
+			assertEvent(event, "xyflow.nodeClick");
+			return context.lastClickedNode?.id === event.node.id;
+		},
+		"click: focused node": ({ context, event }) => {
+			assertEvent(event, "xyflow.nodeClick");
+			return context.focusedNode === event.node.id;
+		},
+		"click: node has connections": ({ context, event }) => {
+			assertEvent(event, "xyflow.nodeClick");
+			return context.xyedges.some((e) => e.source === event.node.id || e.target === event.node.id);
+		},
+		"click: selected edge": ({ event }) => {
+			assertEvent(event, ["xyflow.edgeClick", "xyflow.edgeDoubleClick"]);
+			return event.edge.selected === true || event.edge.data.active === true;
+		},
+		"click: active walkthrough step": ({ context, event }) => {
+			assertEvent(event, ["xyflow.edgeClick", "xyflow.edgeDoubleClick"]);
+			if (!context.activeWalkthrough) return false;
+			const { stepId } = context.activeWalkthrough;
+			return event.edge.id === stepId;
+		}
+	}
 });
-const targetState = {
-  idle: "#idle",
-  focused: "#focused",
-  walkthrough: "#walkthrough",
-  printing: "#printing",
-  navigating: "#navigating"
+var targetState = {
+	idle: "#idle",
+	focused: "#focused",
+	walkthrough: "#walkthrough",
+	printing: "#printing",
+	navigating: "#navigating"
 };
-const to = mapValues(targetState, (id) => ({ target: id }));
-
+var to = mapValues(targetState, (id) => ({ target: id }));
+//#endregion
 export { deriveToggledFeatures, machine, targetState, to };

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

@@ -1,55 +1,55 @@
-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';
-
-const initializing = machine.createStateConfig({
-  on: {
-    "xyflow.init": {
-      actions: xstateActions_cjsExports.assign(({ context, event }) => ({
-        initialized: {
-          ...context.initialized,
-          xyflow: true
-        },
-        xyflow: event.instance
-      })),
-      target: "isReady"
-    },
-    "update.view": {
-      actions: [
-        assignXYDataFromView(),
-        xstateActions_cjsExports.assign(({ context }) => ({
-          initialized: {
-            ...context.initialized,
-            xydata: true
-          }
-        }))
-      ],
-      target: "isReady"
-    }
-  }
-});
-const isReady = machine.createStateConfig({
-  always: [{
-    guard: "isReady",
-    actions: [
-      fitDiagram({ duration: 0 }),
-      xstateActions_cjsExports.assign(({ context }) => ({
-        navigationHistory: {
-          currentIndex: 0,
-          history: [{
-            viewId: context.view.id,
-            viewport: { ...context.xyflow.getViewport() },
-            viewportChangedManually: false
-          }]
-        }
-      })),
-      emitInitialized()
-    ],
-    target: "ready"
-  }, {
-    target: "initializing"
-  }]
-});
-
+import "../../_virtual/_rolldown/runtime.js";
+import { machine } from "./machine.setup.js";
+import { fitDiagram } from "./machine.actions.layout.js";
+import { assignXYDataFromView, emitInitialized } from "./machine.actions.js";
+import { assign } from "xstate/actions";
+//#region src/likec4diagram/state/machine.state.initializing.ts
+/**
+* To be in `initializing` state, the diagram must wait for two events:
+* - `xyflow.init` - indicates that the `xyflow` instance is ready
+* - `update.view` - provides the initial diagram data (nodes and edges)
+*
+* Once both events have been received, the diagram transitions to `isReady` state.
+*/
+var initializing = machine.createStateConfig({ on: {
+	"xyflow.init": {
+		actions: assign(({ context, event }) => ({
+			initialized: {
+				...context.initialized,
+				xyflow: true
+			},
+			xyflow: event.instance
+		})),
+		target: "isReady"
+	},
+	"update.view": {
+		actions: [assignXYDataFromView(), assign(({ context }) => ({ initialized: {
+			...context.initialized,
+			xydata: true
+		} }))],
+		target: "isReady"
+	}
+} });
+/**
+* State that checks whether the diagram is ready to be used.
+* Transitions to `ready` state if both `xyflow` and `xydata` are initialized,
+* otherwise goes back to `initializing` state.`
+*/
+var isReady = machine.createStateConfig({ always: [{
+	guard: "isReady",
+	actions: [
+		fitDiagram({ duration: 0 }),
+		assign(({ context }) => ({ navigationHistory: {
+			currentIndex: 0,
+			history: [{
+				viewId: context.view.id,
+				viewport: { ...context.xyflow.getViewport() },
+				viewportChangedManually: false
+			}]
+		} })),
+		emitInitialized()
+	],
+	target: "ready"
+}, { target: "initializing" }] });
+//#endregion
 export { initializing, isReady };