@likec4/diagram 1.55.1 → 1.56.0

package/dist/likec4diagram/state/machine.actions.layout.js

@@ -1,194 +1,165 @@
-import { nonNullable, isNonEmptyArray, BBox, invariant } from '@likec4/core';
-import { getViewportForBounds, getNodesBounds } from '@xyflow/react';
-import { assertEvent } from 'xstate';
-import { calcEdgeBounds } from '../../utils/view-bounds.js';
-import { machine } from './machine.setup.js';
-import { viewBounds, activeSequenceBounds, focusedBounds } from './utils.js';
-import { MinZoom } from '../../base/const.js';
-
-const setViewport = (params) => machine.createAction(({ context, event }) => {
-  let viewport, duration;
-  if (params) {
-    viewport = params.viewport;
-    duration = params.duration;
-  } else {
-    assertEvent(event, "xyflow.setViewport");
-    viewport = event.viewport;
-    duration = event.duration;
-  }
-  duration = duration ?? 450;
-  const { panZoom } = nonNullable(context.xystore).getState();
-  const animationProps = duration > 0 ? { duration, interpolate: "smooth" } : void 0;
-  panZoom?.setViewport({
-    x: Math.round(viewport.x),
-    y: Math.round(viewport.y),
-    zoom: viewport.zoom
-  }, animationProps).catch((err) => {
-    console.error("Error during setViewport", { err });
-  });
+import "../../_virtual/_rolldown/runtime.js";
+import { MinZoom } from "../../base/const.js";
+import { calcEdgeBounds } from "../../utils/view-bounds.js";
+import { activeSequenceBounds, focusedBounds, viewBounds } from "./utils.js";
+import { machine } from "./machine.setup.js";
+import { getNodesBounds, getViewportForBounds } from "@xyflow/react";
+import { BBox, invariant, isNonEmptyArray, nonNullable } from "@likec4/core";
+import { assertEvent } from "xstate";
+//#region src/likec4diagram/state/machine.actions.layout.ts
+var setViewport = (params) => machine.createAction(({ context, event }) => {
+	let viewport;
+	let duration;
+	if (params) {
+		viewport = params.viewport;
+		duration = params.duration;
+	} else {
+		assertEvent(event, "xyflow.setViewport");
+		viewport = event.viewport;
+		duration = event.duration;
+	}
+	duration = duration ?? 450;
+	const { panZoom } = nonNullable(context.xystore).getState();
+	const animationProps = duration > 0 ? {
+		duration,
+		interpolate: "smooth"
+	} : void 0;
+	panZoom?.setViewport({
+		x: Math.round(viewport.x),
+		y: Math.round(viewport.y),
+		zoom: viewport.zoom
+	}, animationProps).catch((err) => {
+		console.error("Error during setViewport", { err });
+	});
 });
-const setViewportCenter = (params) => machine.createAction(({ context, event }) => {
-  let center;
-  if (params) {
-    center = params;
-  } else if (event.type === "update.view") {
-    center = BBox.center(viewBounds(context, event.view));
-  } else {
-    center = BBox.center(viewBounds(context));
-  }
-  invariant(context.xyflow, "xyflow is not initialized");
-  const zoom = context.xyflow.getZoom();
-  context.xyflow.setCenter(
-    Math.round(center.x),
-    Math.round(center.y),
-    { zoom }
-  ).catch((err) => {
-    console.error("Error during setViewportCenter", { err });
-  });
+var setViewportCenter = (params) => machine.createAction(({ context, event }) => {
+	let center;
+	if (params) center = params;
+	else if (event.type === "update.view") center = BBox.center(viewBounds(context, event.view));
+	else center = BBox.center(viewBounds(context));
+	invariant(context.xyflow, "xyflow is not initialized");
+	const zoom = context.xyflow.getZoom();
+	context.xyflow.setCenter(Math.round(center.x), Math.round(center.y), { zoom }).catch((err) => {
+		console.error("Error during setViewportCenter", { err });
+	});
 });
-const centerOnNodeOrEdge = () => machine.raise(({ context, event }) => {
-  assertEvent(event, "xyflow.centerViewport");
-  const xystate = context.xystore.getState();
-  if ("edgeId" in event) {
-    const edge = xystate.edgeLookup.get(event.edgeId);
-    if (!edge) {
-      return { type: "noop" };
-    }
-    const sourceNode = xystate.nodeLookup.get(edge.source);
-    const targetNode = xystate.nodeLookup.get(edge.target);
-    if (!sourceNode || !targetNode) {
-      return { type: "noop" };
-    }
-    const bounds2 = getNodesBounds([sourceNode, targetNode], xystate);
-    const edgeBounds = calcEdgeBounds({
-      points: edge.data.points,
-      controlPoints: edge.data.controlPoints && isNonEmptyArray(edge.data.controlPoints) ? edge.data.controlPoints : null,
-      labelBBox: edge.data.labelBBox ?? null
-    });
-    return {
-      type: "xyflow.fitDiagram",
-      bounds: BBox.merge(bounds2, edgeBounds)
-    };
-  }
-  const node = xystate.nodeLookup.get(event.nodeId);
-  if (!node) {
-    return { type: "noop" };
-  }
-  const bounds = getNodesBounds([node], xystate);
-  return {
-    type: "xyflow.fitDiagram",
-    bounds
-  };
+var centerOnNodeOrEdge = () => machine.raise(({ context, event }) => {
+	assertEvent(event, "xyflow.centerViewport");
+	const xystate = context.xystore.getState();
+	if ("edgeId" in event) {
+		const edge = xystate.edgeLookup.get(event.edgeId);
+		if (!edge) return { type: "noop" };
+		const sourceNode = xystate.nodeLookup.get(edge.source);
+		const targetNode = xystate.nodeLookup.get(edge.target);
+		if (!sourceNode || !targetNode) return { type: "noop" };
+		const bounds = getNodesBounds([sourceNode, targetNode], xystate);
+		const edgeBounds = calcEdgeBounds({
+			points: edge.data.points,
+			controlPoints: edge.data.controlPoints && isNonEmptyArray(edge.data.controlPoints) ? edge.data.controlPoints : null,
+			labelBBox: edge.data.labelBBox ?? null
+		});
+		return {
+			type: "xyflow.fitDiagram",
+			bounds: BBox.merge(bounds, edgeBounds)
+		};
+	}
+	const node = xystate.nodeLookup.get(event.nodeId);
+	if (!node) return { type: "noop" };
+	return {
+		type: "xyflow.fitDiagram",
+		bounds: getNodesBounds([node], xystate)
+	};
 });
-const fitDiagram = (params) => machine.createAction(({ context, event }) => {
-  let bounds, duration;
-  if (params) {
-    bounds = params.bounds;
-    duration = params.duration;
-  } else if (event.type === "xyflow.fitDiagram") {
-    bounds = event.bounds;
-    duration = event.duration;
-  }
-  bounds ??= viewBounds(context);
-  duration ??= 450;
-  const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
-  const maxZoom = Math.max(1, transform[2]);
-  const viewport = getViewportForBounds(
-    bounds,
-    width,
-    height,
-    MinZoom,
-    maxZoom,
-    context.fitViewPadding
-  );
-  viewport.x = Math.round(viewport.x);
-  viewport.y = Math.round(viewport.y);
-  const animationProps = duration > 0 ? { duration, interpolate: "smooth" } : void 0;
-  panZoom?.setViewport(viewport, animationProps).catch((err) => {
-    console.error("Error during fitDiagram panZoom setViewport", { err });
-  });
+var fitDiagram = (params) => machine.createAction(({ context, event }) => {
+	let bounds;
+	let duration;
+	if (params) {
+		bounds = params.bounds;
+		duration = params.duration;
+	} else if (event.type === "xyflow.fitDiagram") {
+		bounds = event.bounds;
+		duration = event.duration;
+	}
+	bounds ??= viewBounds(context);
+	duration ??= 450;
+	const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
+	const maxZoom = Math.max(1, transform[2]);
+	const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, context.fitViewPadding);
+	viewport.x = Math.round(viewport.x);
+	viewport.y = Math.round(viewport.y);
+	const animationProps = duration > 0 ? {
+		duration,
+		interpolate: "smooth"
+	} : void 0;
+	panZoom?.setViewport(viewport, animationProps).catch((err) => {
+		console.error("Error during fitDiagram panZoom setViewport", { err });
+	});
 });
-const fitFocusedBounds = () => machine.createAction(({ context }) => {
-  const isActiveSequenceWalkthrough = !!context.activeWalkthrough && context.dynamicViewVariant === "sequence";
-  const { bounds, duration = 450 } = isActiveSequenceWalkthrough ? activeSequenceBounds({ context }) : focusedBounds({ context });
-  const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
-  const maxZoom = Math.max(1, transform[2]);
-  const viewport = getViewportForBounds(
-    bounds,
-    width,
-    height,
-    MinZoom,
-    maxZoom,
-    context.fitViewPadding
-  );
-  viewport.x = Math.round(viewport.x);
-  viewport.y = Math.round(viewport.y);
-  const animationProps = duration > 0 ? { duration, interpolate: "smooth" } : void 0;
-  panZoom?.setViewport(viewport, animationProps).catch((err) => {
-    console.error("Error during fitFocusedBounds panZoom setViewport", { err });
-  });
+var fitFocusedBounds = () => machine.createAction(({ context }) => {
+	const { bounds, duration = 450 } = !!context.activeWalkthrough && context.dynamicViewVariant === "sequence" ? activeSequenceBounds({ context }) : focusedBounds({ context });
+	const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
+	const viewport = getViewportForBounds(bounds, width, height, MinZoom, Math.max(1, transform[2]), context.fitViewPadding);
+	viewport.x = Math.round(viewport.x);
+	viewport.y = Math.round(viewport.y);
+	const animationProps = duration > 0 ? {
+		duration,
+		interpolate: "smooth"
+	} : void 0;
+	panZoom?.setViewport(viewport, animationProps).catch((err) => {
+		console.error("Error during fitFocusedBounds panZoom setViewport", { err });
+	});
 });
-const DEFAULT_DELAY = 30;
-const raiseSetViewport = (params) => {
-  const { delay = DEFAULT_DELAY, ...rest } = params ?? {};
-  return machine.raise(
-    {
-      type: "xyflow.setViewport",
-      ...rest
-    },
-    {
-      id: "fitDiagram",
-      delay
-    }
-  );
+var DEFAULT_DELAY = 30;
+var raiseSetViewport = (params) => {
+	const { delay = DEFAULT_DELAY, ...rest } = params ?? {};
+	return machine.raise({
+		type: "xyflow.setViewport",
+		...rest
+	}, {
+		id: "fitDiagram",
+		delay
+	});
 };
-const cancelFitDiagram = () => machine.cancel("fitDiagram");
-const raiseFitDiagram = (params) => {
-  const { delay = DEFAULT_DELAY, ...rest } = params ?? {};
-  return machine.raise(
-    {
-      type: "xyflow.fitDiagram",
-      ...rest
-    },
-    {
-      id: "fitDiagram",
-      delay
-    }
-  );
+var cancelFitDiagram = () => machine.cancel("fitDiagram");
+var raiseFitDiagram = (params) => {
+	const { delay = DEFAULT_DELAY, ...rest } = params ?? {};
+	return machine.raise({
+		type: "xyflow.fitDiagram",
+		...rest
+	}, {
+		id: "fitDiagram",
+		delay
+	});
 };
-const raiseUpdateView = (view) => machine.raise(({ context }) => ({
-  type: "update.view",
-  view: context.view
+var raiseUpdateView = (view) => machine.raise(({ context }) => ({
+	type: "update.view",
+	view: view ?? context.view
 }), { delay: DEFAULT_DELAY });
-const assignViewportBefore = (viewport) => machine.assign(({ context }) => {
-  return {
-    // We can assign
-    viewportBefore: {
-      wasChangedManually: context.viewportChangedManually,
-      value: { ...context.viewport }
-    }
-  };
+var assignViewportBefore = (viewport) => machine.assign(({ context }) => {
+	if (viewport === false) return { viewportBefore: null };
+	return { viewportBefore: {
+		wasChangedManually: context.viewportChangedManually,
+		value: viewport ?? { ...context.viewport }
+	} };
 });
-const returnViewportBefore = (params) => machine.enqueueActions(({ enqueue, context: { viewportBefore } }) => {
-  enqueue(cancelFitDiagram());
-  const noDelay = params?.delay === 0;
-  if (viewportBefore) {
-    enqueue.assign({
-      viewportChangedManually: viewportBefore.wasChangedManually,
-      viewportBefore: null
-    });
-    if (noDelay) {
-      enqueue(setViewport({ viewport: viewportBefore.value, ...params }));
-    } else {
-      enqueue(raiseSetViewport({ viewport: viewportBefore.value, ...params }));
-    }
-  } else {
-    if (noDelay) {
-      enqueue(fitDiagram({ ...params }));
-    } else {
-      enqueue(raiseFitDiagram({ ...params }));
-    }
-  }
+var returnViewportBefore = (params) => machine.enqueueActions(({ enqueue, context: { viewportBefore } }) => {
+	enqueue(cancelFitDiagram());
+	const noDelay = params?.delay === 0;
+	if (viewportBefore) {
+		enqueue.assign({
+			viewportChangedManually: viewportBefore.wasChangedManually,
+			viewportBefore: null
+		});
+		if (noDelay) enqueue(setViewport({
+			viewport: viewportBefore.value,
+			...params
+		}));
+		else enqueue(raiseSetViewport({
+			viewport: viewportBefore.value,
+			...params
+		}));
+	} else if (noDelay) enqueue(fitDiagram({ ...params }));
+	else enqueue(raiseFitDiagram({ ...params }));
 });
-
+//#endregion
 export { assignViewportBefore, cancelFitDiagram, centerOnNodeOrEdge, fitDiagram, fitFocusedBounds, raiseFitDiagram, raiseSetViewport, raiseUpdateView, returnViewportBefore, setViewport, setViewportCenter };

package/dist/likec4diagram/state/machine.js

@@ -1,136 +1,115 @@
-import { applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
-import { DefaultFeatures } from '../../context/DiagramFeatures.js';
-import { updateEdgeData, updateNodeData } from './assign.js';
-import { stopEditorActor, emitOnLayoutTypeChange, triggerChange, updateFeatures, updateInputs, assignDynamicViewVariant } from './machine.actions.js';
-import { machine } from './machine.setup.js';
-import { isReady, initializing } from './machine.state.initializing.js';
-import { navigating } from './machine.state.navigating.js';
-import { ready } from './machine.state.ready.js';
-import { DiagramToggledFeaturesPersistence } from './persistence.js';
-import { cancelFitDiagram, raiseUpdateView } from './machine.actions.layout.js';
-import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
-
-const _diagramMachine = machine.createMachine({
-  initial: "initializing",
-  context: ({ input }) => ({
-    ...input,
-    xyedges: [],
-    xynodes: [],
-    features: {
-      ...DefaultFeatures,
-      ...input.features
-    },
-    toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
-      enableReadOnly: true,
-      enableCompareWithLatest: false
-    },
-    initialized: {
-      xydata: false,
-      xyflow: false
-    },
-    viewportChangedManually: false,
-    lastOnNavigate: null,
-    lastClickedNode: null,
-    focusedNode: null,
-    autoUnfocusTimer: false,
-    activeElementDetails: null,
-    viewportBefore: null,
-    viewportOnManualLayout: null,
-    viewportOnAutoLayout: null,
-    navigationHistory: {
-      currentIndex: 0,
-      history: []
-    },
-    viewport: { x: 0, y: 0, zoom: 1 },
-    xyflow: null,
-    dynamicViewVariant: input.dynamicViewVariant ?? (input.view._type === "dynamic" ? input.view.variant : "diagram") ?? "diagram",
-    activeWalkthrough: null
-  }),
-  states: {
-    initializing,
-    isReady,
-    ready,
-    navigating,
-    final: {
-      type: "final"
-    }
-  },
-  on: {
-    "update.nodeData": {
-      actions: xstateActions_cjsExports.assign(updateNodeData)
-    },
-    "update.edgeData": {
-      actions: xstateActions_cjsExports.assign(updateEdgeData)
-    },
-    "switch.dynamicViewVariant": {
-      guard: ({ context, event }) => context.dynamicViewVariant !== event.variant,
-      actions: [
-        assignDynamicViewVariant(),
-        xstateActions_cjsExports.assign({
-          viewportChangedManually: false
-        }),
-        raiseUpdateView()
-      ]
-    },
-    "update.inputs": {
-      actions: updateInputs()
-    },
-    "update.view-bounds": {
-      actions: xstateActions_cjsExports.assign(({ context, event }) => {
-        return {
-          view: {
-            ...context.view,
-            bounds: event.bounds
-          }
-        };
-      })
-    },
-    "update.features": {
-      actions: updateFeatures()
-    },
-    "trigger.change": {
-      actions: triggerChange()
-    },
-    "emit.onLayoutTypeChange": {
-      actions: emitOnLayoutTypeChange()
-    },
-    "xyflow.applyChanges": {
-      actions: xstateActions_cjsExports.assign(({ context, event }) => {
-        return {
-          xynodes: event.nodes ? applyNodeChanges(event.nodes, context.xynodes) : context.xynodes,
-          xyedges: event.edges ? applyEdgeChanges(event.edges, context.xyedges) : context.xyedges
-        };
-      })
-    },
-    "xyflow.viewportMoved": {
-      actions: xstateActions_cjsExports.assign(({ event, context }) => ({
-        viewportChangedManually: context.viewportChangedManually || event.manually,
-        viewport: event.viewport
-      }))
-    },
-    "destroy": {
-      target: ".final",
-      actions: [
-        stopEditorActor(),
-        cancelFitDiagram(),
-        xstateActions_cjsExports.stopChild("hotkey"),
-        xstateActions_cjsExports.stopChild("overlays"),
-        xstateActions_cjsExports.stopChild("search"),
-        xstateActions_cjsExports.stopChild("mediaPrint"),
-        xstateActions_cjsExports.assign({
-          xyflow: null,
-          xystore: null,
-          xyedges: [],
-          xynodes: [],
-          initialized: {
-            xydata: false,
-            xyflow: false
-          }
-        })
-      ]
-    }
-  }
+import "../../_virtual/_rolldown/runtime.js";
+import { DefaultFeatures } from "../../context/DiagramFeatures.js";
+import { machine } from "./machine.setup.js";
+import { updateEdgeData, updateNodeData } from "./assign.js";
+import { cancelFitDiagram, raiseUpdateView } from "./machine.actions.layout.js";
+import { assignDynamicViewVariant, emitOnLayoutTypeChange, stopEditorActor, triggerChange, updateFeatures, updateInputs } from "./machine.actions.js";
+import { initializing, isReady } from "./machine.state.initializing.js";
+import { navigating } from "./machine.state.navigating.js";
+import { ready } from "./machine.state.ready.js";
+import { DiagramToggledFeaturesPersistence } from "./persistence.js";
+import { applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
+import { assign, stopChild } from "xstate/actions";
+var diagramMachine = machine.createMachine({
+	initial: "initializing",
+	context: ({ input }) => ({
+		...input,
+		xyedges: [],
+		xynodes: [],
+		features: {
+			...DefaultFeatures,
+			...input.features
+		},
+		toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
+			enableReadOnly: true,
+			enableCompareWithLatest: false
+		},
+		initialized: {
+			xydata: false,
+			xyflow: false
+		},
+		viewportChangedManually: false,
+		lastOnNavigate: null,
+		lastClickedNode: null,
+		focusedNode: null,
+		autoUnfocusTimer: false,
+		activeElementDetails: null,
+		viewportBefore: null,
+		viewportOnManualLayout: null,
+		viewportOnAutoLayout: null,
+		navigationHistory: {
+			currentIndex: 0,
+			history: []
+		},
+		viewport: {
+			x: 0,
+			y: 0,
+			zoom: 1
+		},
+		xyflow: null,
+		dynamicViewVariant: input.dynamicViewVariant ?? (input.view._type === "dynamic" ? input.view.variant : "diagram") ?? "diagram",
+		activeWalkthrough: null
+	}),
+	states: {
+		initializing,
+		isReady,
+		ready,
+		navigating,
+		final: { type: "final" }
+	},
+	on: {
+		"update.nodeData": { actions: assign(updateNodeData) },
+		"update.edgeData": { actions: assign(updateEdgeData) },
+		"switch.dynamicViewVariant": {
+			guard: ({ context, event }) => context.dynamicViewVariant !== event.variant,
+			actions: [
+				assignDynamicViewVariant(),
+				assign({ viewportChangedManually: false }),
+				raiseUpdateView()
+			]
+		},
+		"update.inputs": { actions: updateInputs() },
+		"update.view-bounds": { actions: assign(({ context, event }) => {
+			return { view: {
+				...context.view,
+				bounds: event.bounds
+			} };
+		}) },
+		"update.features": { actions: updateFeatures() },
+		"trigger.change": { actions: triggerChange() },
+		"emit.onLayoutTypeChange": { actions: emitOnLayoutTypeChange() },
+		"xyflow.applyChanges": { actions: assign(({ context, event }) => {
+			return {
+				xynodes: event.nodes ? applyNodeChanges(event.nodes, context.xynodes) : context.xynodes,
+				xyedges: event.edges ? applyEdgeChanges(event.edges, context.xyedges) : context.xyedges
+			};
+		}) },
+		"xyflow.viewportMoved": { actions: assign(({ event, context }) => ({
+			viewportChangedManually: context.viewportChangedManually || event.manually,
+			viewport: event.viewport
+		})) },
+		"destroy": {
+			target: ".final",
+			actions: [
+				stopEditorActor(),
+				cancelFitDiagram(),
+				stopChild("hotkey"),
+				stopChild("overlays"),
+				stopChild("search"),
+				stopChild("mediaPrint"),
+				assign({
+					xyflow: null,
+					xystore: null,
+					xyedges: [],
+					xynodes: [],
+					initialized: {
+						xydata: false,
+						xyflow: false
+					}
+				})
+			]
+		}
+	}
 });
-const diagramMachine = _diagramMachine;
-
+//#endregion
 export { diagramMachine };