@likec4/diagram 1.55.1 → 1.56.0

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

@@ -1,230 +1,195 @@
-import { BBox } from '@likec4/core/geometry';
-import { invariant } from '@likec4/core/utils';
-import { isTruthy } from 'remeda';
-import { enqueueActions, assertEvent } from 'xstate';
-import { roundDpr } from '../../utils/roundDpr.js';
-import { parsePaddings } from '../../utils/xyflow.js';
-import { convertToXYFlow } from '../convert-to-xyflow.js';
-import { mergeXYNodesEdges } from './assign.js';
-import { disableCompareWithLatest } from './machine.actions.js';
-import { machine, to, targetState } from './machine.setup.js';
-import { viewBounds, calcViewportForBounds, findCorrespondingNode, findNodeByModelFqn, nodeRef } from './utils.js';
-import { cancelFitDiagram, raiseSetViewport } from './machine.actions.layout.js';
-
-const handleBrowserForwardBackward = () => machine.assign(({ context, event }) => {
-  assertEvent(event, "update.view");
-  let {
-    lastOnNavigate,
-    navigationHistory: {
-      currentIndex,
-      history
-    }
-  } = context;
-  const stepCurrent = history[currentIndex];
-  if (!stepCurrent || stepCurrent.viewId === event.view.id || !!lastOnNavigate) {
-    return {};
-  }
-  const stepBack = currentIndex > 0 ? history.at(currentIndex - 1) : null;
-  if (stepBack && stepBack.viewId === event.view.id) {
-    return {
-      navigationHistory: {
-        currentIndex: currentIndex - 1,
-        history
-      },
-      lastOnNavigate: null
-    };
-  }
-  const stepForward = currentIndex < history.length - 1 ? history.at(currentIndex + 1) : null;
-  if (stepForward && stepForward.viewId === event.view.id) {
-    return {
-      navigationHistory: {
-        currentIndex: currentIndex + 1,
-        history
-      },
-      lastOnNavigate: null
-    };
-  }
-  if (event.view._type === "element" && event.view.viewOf) {
-    const toRef = event.view.viewOf;
-    const existingNode = context.xynodes.find((n) => nodeRef(n) === toRef);
-    if (existingNode) {
-      return {
-        lastOnNavigate: {
-          fromView: context.view.id,
-          toView: event.view.id,
-          fromNode: existingNode.id
-        }
-      };
-    }
-  }
-  return {};
+import "../../_virtual/_rolldown/runtime.js";
+import { roundDpr } from "../../utils/roundDpr.js";
+import { parsePaddings } from "../../utils/xyflow.js";
+import { calcViewportForBounds, findCorrespondingNode, findNodeByModelFqn, nodeRef, viewBounds } from "./utils.js";
+import { machine, targetState, to } from "./machine.setup.js";
+import { mergeXYNodesEdges } from "./assign.js";
+import { convertToXYFlow } from "../convert-to-xyflow.js";
+import { cancelFitDiagram, raiseSetViewport } from "./machine.actions.layout.js";
+import { disableCompareWithLatest } from "./machine.actions.js";
+import { isTruthy } from "remeda";
+import { BBox } from "@likec4/core/geometry";
+import { invariant } from "@likec4/core/utils";
+import { assertEvent, enqueueActions } from "xstate";
+//#region src/likec4diagram/state/machine.state.navigating.ts
+/**
+* If the user navigates back or forward using the browser's back/forward buttons,
+* update the navigation history and return to the previous or next view.
+*/
+var handleBrowserForwardBackward = () => machine.assign(({ context, event }) => {
+	assertEvent(event, "update.view");
+	let { lastOnNavigate, navigationHistory: { currentIndex, history } } = context;
+	const stepCurrent = history[currentIndex];
+	if (!stepCurrent || stepCurrent.viewId === event.view.id || !!lastOnNavigate) return {};
+	const stepBack = currentIndex > 0 ? history.at(currentIndex - 1) : null;
+	if (stepBack && stepBack.viewId === event.view.id) return {
+		navigationHistory: {
+			currentIndex: currentIndex - 1,
+			history
+		},
+		lastOnNavigate: null
+	};
+	const stepForward = currentIndex < history.length - 1 ? history.at(currentIndex + 1) : null;
+	if (stepForward && stepForward.viewId === event.view.id) return {
+		navigationHistory: {
+			currentIndex: currentIndex + 1,
+			history
+		},
+		lastOnNavigate: null
+	};
+	if (event.view._type === "element" && event.view.viewOf) {
+		const toRef = event.view.viewOf;
+		const existingNode = context.xynodes.find((n) => nodeRef(n) === toRef);
+		if (existingNode) return { lastOnNavigate: {
+			fromView: context.view.id,
+			toView: event.view.id,
+			fromNode: existingNode.id
+		} };
+	}
+	return {};
 });
-const navigating = machine.createStateConfig({
-  id: targetState.navigating.slice(1),
-  always: {
-    ...to.idle,
-    actions: [
-      cancelFitDiagram(),
-      handleBrowserForwardBackward(),
-      disableCompareWithLatest(),
-      enqueueActions(({ enqueue, context, event }) => {
-        assertEvent(event, "update.view");
-        const {
-          xyflow,
-          xystore,
-          navigationHistory: {
-            currentIndex,
-            history
-          }
-        } = context;
-        const eventWithXYData = "xynodes" in event ? event : {
-          ...event,
-          ...convertToXYFlow({
-            currentViewId: context.view.id,
-            dynamicViewVariant: context.dynamicViewVariant,
-            view: event.view,
-            where: context.where
-          })
-        };
-        invariant(xyflow, "xyflow is not initialized");
-        const currentViewport = xyflow.getViewport();
-        const calcZoomTowardsNextViewport = (nextViewport2) => {
-          const zoom = currentViewport.zoom;
-          const diff = nextViewport2.zoom - zoom;
-          if (Math.abs(diff) < 0.01) {
-            return nextViewport2.zoom;
-          }
-          const coef = diff < 0 ? 0.6 : 0.3;
-          return Math.trunc(1e4 * (zoom + diff * coef)) / 1e4;
-        };
-        const moveTowardsNextViewport = (nextViewport2) => {
-          const zoom = calcZoomTowardsNextViewport(nextViewport2);
-          if (zoom !== nextViewport2.zoom) {
-            xyflow.setViewport({
-              x: roundDpr(nextViewport2.x * (1 + currentViewport.zoom - zoom)),
-              y: roundDpr(nextViewport2.y * (1 + currentViewport.zoom - zoom)),
-              zoom
-            });
-            enqueue(raiseSetViewport({
-              delay: 100,
-              viewport: nextViewport2
-            }));
-          } else {
-            xyflow.setViewport(nextViewport2, { duration: 0 });
-          }
-        };
-        const fromHistory = history[currentIndex];
-        if (fromHistory && fromHistory.viewId === eventWithXYData.view.id) {
-          const {
-            focusedNode: wasFocused,
-            activeWalkthrough: wasActiveWalkthrough,
-            viewportBefore
-          } = fromHistory;
-          const nextCtx = {
-            ...mergeXYNodesEdges(context, eventWithXYData),
-            dynamicViewVariant: fromHistory.dynamicViewVariant ?? (eventWithXYData.view._type === "dynamic" ? eventWithXYData.view.variant : void 0) ?? context.dynamicViewVariant,
-            viewportChangedManually: viewportBefore?.wasChangedManually ?? fromHistory.viewportChangedManually,
-            viewport: viewportBefore?.value ?? fromHistory.viewport,
-            viewportBefore: null
-          };
-          enqueue.assign(nextCtx);
-          moveTowardsNextViewport(nextCtx.viewport);
-          if (wasFocused) {
-            enqueue.raise({
-              type: "focus.node",
-              nodeId: wasFocused
-            }, { delay: 150 });
-            return;
-          }
-          if (wasActiveWalkthrough) {
-            enqueue.raise({
-              type: "walkthrough.start",
-              stepId: wasActiveWalkthrough
-            }, { delay: 150 });
-            return;
-          }
-          return;
-        }
-        const nextBounds = viewBounds(context, eventWithXYData.view);
-        const nextViewport = calcViewportForBounds(
-          context,
-          nextBounds
-        );
-        const { fromNode, toNode } = findCorrespondingNode(context, eventWithXYData);
-        if (fromNode && toNode) {
-          const elFrom = xyflow.getInternalNode(fromNode.id);
-          const fromPoint = xyflow.flowToScreenPosition({
-            x: elFrom.internals.positionAbsolute.x,
-            y: elFrom.internals.positionAbsolute.y
-          });
-          const toPoint = xyflow.flowToScreenPosition({
-            x: toNode.data.x,
-            y: toNode.data.y
-          });
-          xystore.getState().panBy({
-            x: Math.round(fromPoint.x - toPoint.x),
-            y: Math.round(fromPoint.y - toPoint.y)
-          }).catch((err) => {
-            console.error("Error during xyflow.panBy", { err });
-          });
-          enqueue(raiseSetViewport({
-            delay: 100,
-            viewport: nextViewport
-          }));
-        } else {
-          const zoom = calcZoomTowardsNextViewport(nextViewport);
-          if (zoom !== nextViewport.zoom) {
-            const { width, height } = context.xystore.getState();
-            const nextCenter = BBox.center(nextBounds);
-            const paddings = parsePaddings(context.fitViewPadding, width, height);
-            xyflow.setViewport({
-              x: roundDpr(
-                (width - paddings.x) / 2 - nextCenter.x * zoom + paddings.left
-              ),
-              y: roundDpr(
-                (height - paddings.y) / 2 - nextCenter.y * zoom + paddings.top
-              ),
-              zoom
-            });
-            enqueue(raiseSetViewport({
-              delay: 100,
-              viewport: nextViewport
-            }));
-          } else {
-            xyflow.setViewport(nextViewport, { duration: 0 });
-          }
-        }
-        const updatedHistory = currentIndex < history.length - 1 ? history.slice(0, currentIndex + 1) : [...history];
-        if (updatedHistory.length > 20) {
-          updatedHistory.shift();
-        }
-        updatedHistory.push({
-          viewId: event.view.id,
-          viewport: { ...nextViewport },
-          viewportChangedManually: false
-        });
-        const focusOnElement = context.lastOnNavigate?.focusOnElement;
-        const nodeToFocus = isTruthy(focusOnElement) ? findNodeByModelFqn(eventWithXYData.xynodes, focusOnElement) : null;
-        enqueue.assign({
-          ...mergeXYNodesEdges(context, eventWithXYData),
-          viewportChangedManually: false,
-          lastOnNavigate: null,
-          dynamicViewVariant: eventWithXYData.view._type === "dynamic" ? eventWithXYData.view.variant : context.dynamicViewVariant,
-          navigationHistory: {
-            currentIndex: updatedHistory.length - 1,
-            history: updatedHistory
-          }
-        });
-        if (nodeToFocus) {
-          enqueue.raise({
-            type: "focus.node",
-            nodeId: nodeToFocus.id,
-            autoUnfocus: true
-          }, { delay: 250 });
-        }
-      })
-    ]
-  }
+/**
+* State for handling navigation to a different view.
+* Closes overlays and search, stops sync layout and fit diagram actions,
+* then processes the view update and transitions back to idle state.
+*/
+var navigating = machine.createStateConfig({
+	id: targetState.navigating.slice(1),
+	always: {
+		...to.idle,
+		actions: [
+			cancelFitDiagram(),
+			handleBrowserForwardBackward(),
+			disableCompareWithLatest(),
+			enqueueActions(({ enqueue, context, event }) => {
+				assertEvent(event, "update.view");
+				const { xyflow, xystore, navigationHistory: { currentIndex, history } } = context;
+				const eventWithXYData = "xynodes" in event ? event : {
+					...event,
+					...convertToXYFlow({
+						currentViewId: context.view.id,
+						dynamicViewVariant: context.dynamicViewVariant,
+						view: event.view,
+						where: context.where
+					})
+				};
+				invariant(xyflow, "xyflow is not initialized");
+				const currentViewport = xyflow.getViewport();
+				const calcZoomTowardsNextViewport = (nextViewport) => {
+					const zoom = currentViewport.zoom;
+					const diff = nextViewport.zoom - zoom;
+					if (Math.abs(diff) < .01) return nextViewport.zoom;
+					return Math.trunc(1e4 * (zoom + diff * (diff < 0 ? .6 : .3))) / 1e4;
+				};
+				const moveTowardsNextViewport = (nextViewport) => {
+					const zoom = calcZoomTowardsNextViewport(nextViewport);
+					if (zoom !== nextViewport.zoom) {
+						xyflow.setViewport({
+							x: roundDpr(nextViewport.x * (1 + currentViewport.zoom - zoom)),
+							y: roundDpr(nextViewport.y * (1 + currentViewport.zoom - zoom)),
+							zoom
+						});
+						enqueue(raiseSetViewport({
+							delay: 100,
+							viewport: nextViewport
+						}));
+					} else xyflow.setViewport(nextViewport, { duration: 0 });
+				};
+				const fromHistory = history[currentIndex];
+				if (fromHistory && fromHistory.viewId === eventWithXYData.view.id) {
+					const { focusedNode: wasFocused, activeWalkthrough: wasActiveWalkthrough, viewportBefore } = fromHistory;
+					const nextCtx = {
+						...mergeXYNodesEdges(context, eventWithXYData),
+						dynamicViewVariant: fromHistory.dynamicViewVariant ?? (eventWithXYData.view._type === "dynamic" ? eventWithXYData.view.variant : void 0) ?? context.dynamicViewVariant,
+						viewportChangedManually: viewportBefore?.wasChangedManually ?? fromHistory.viewportChangedManually,
+						viewport: viewportBefore?.value ?? fromHistory.viewport,
+						viewportBefore: null
+					};
+					enqueue.assign(nextCtx);
+					moveTowardsNextViewport(nextCtx.viewport);
+					if (wasFocused) {
+						enqueue.raise({
+							type: "focus.node",
+							nodeId: wasFocused
+						}, { delay: 150 });
+						return;
+					}
+					if (wasActiveWalkthrough) {
+						enqueue.raise({
+							type: "walkthrough.start",
+							stepId: wasActiveWalkthrough
+						}, { delay: 150 });
+						return;
+					}
+					return;
+				}
+				const nextBounds = viewBounds(context, eventWithXYData.view);
+				const nextViewport = calcViewportForBounds(context, nextBounds);
+				const { fromNode, toNode } = findCorrespondingNode(context, eventWithXYData);
+				if (fromNode && toNode) {
+					const elFrom = xyflow.getInternalNode(fromNode.id);
+					const fromPoint = xyflow.flowToScreenPosition({
+						x: elFrom.internals.positionAbsolute.x,
+						y: elFrom.internals.positionAbsolute.y
+					});
+					const toPoint = xyflow.flowToScreenPosition({
+						x: toNode.data.x,
+						y: toNode.data.y
+					});
+					xystore.getState().panBy({
+						x: Math.round(fromPoint.x - toPoint.x),
+						y: Math.round(fromPoint.y - toPoint.y)
+					}).catch((err) => {
+						console.error("Error during xyflow.panBy", { err });
+					});
+					enqueue(raiseSetViewport({
+						delay: 100,
+						viewport: nextViewport
+					}));
+				} else {
+					const zoom = calcZoomTowardsNextViewport(nextViewport);
+					if (zoom !== nextViewport.zoom) {
+						const { width, height } = context.xystore.getState();
+						const nextCenter = BBox.center(nextBounds);
+						const paddings = parsePaddings(context.fitViewPadding, width, height);
+						xyflow.setViewport({
+							x: roundDpr((width - paddings.x) / 2 - nextCenter.x * zoom + paddings.left),
+							y: roundDpr((height - paddings.y) / 2 - nextCenter.y * zoom + paddings.top),
+							zoom
+						});
+						enqueue(raiseSetViewport({
+							delay: 100,
+							viewport: nextViewport
+						}));
+					} else xyflow.setViewport(nextViewport, { duration: 0 });
+				}
+				const updatedHistory = currentIndex < history.length - 1 ? history.slice(0, currentIndex + 1) : [...history];
+				if (updatedHistory.length > 20) updatedHistory.shift();
+				updatedHistory.push({
+					viewId: event.view.id,
+					viewport: { ...nextViewport },
+					viewportChangedManually: false
+				});
+				const focusOnElement = context.lastOnNavigate?.focusOnElement;
+				const nodeToFocus = isTruthy(focusOnElement) ? findNodeByModelFqn(eventWithXYData.xynodes, focusOnElement) : null;
+				enqueue.assign({
+					...mergeXYNodesEdges(context, eventWithXYData),
+					viewportChangedManually: false,
+					lastOnNavigate: null,
+					dynamicViewVariant: eventWithXYData.view._type === "dynamic" ? eventWithXYData.view.variant : context.dynamicViewVariant,
+					navigationHistory: {
+						currentIndex: updatedHistory.length - 1,
+						history: updatedHistory
+					}
+				});
+				if (nodeToFocus) enqueue.raise({
+					type: "focus.node",
+					nodeId: nodeToFocus.id,
+					autoUnfocus: true
+				}, { delay: 250 });
+			})
+		]
+	}
 });
-
+//#endregion
 export { navigating };

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

@@ -1,90 +1,74 @@
-import { focusOnNodesAndEdges, emitPaneClick, assignFocusedNode, openSourceOfFocusedOrLastClickedNode, assignLastClickedNode, openElementDetails, emitNodeClick, stopHotKeyActor, undimEverything, cancelAutoUnfocusTimer, startHotKeyActor, startAutoUnfocusTimer } from './machine.actions.js';
-import { machine, to, targetState } from './machine.setup.js';
-import { fitFocusedBounds, returnViewportBefore, cancelFitDiagram, assignViewportBefore } from './machine.actions.layout.js';
-import { x as xstateGuards_cjsExports } from '../../_virtual/xstate-guards.cjs.js';
-import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
-
-const focused = machine.createStateConfig({
-  id: targetState.focused.slice(1),
-  entry: [
-    cancelFitDiagram(),
-    focusOnNodesAndEdges(),
-    assignViewportBefore(),
-    openSourceOfFocusedOrLastClickedNode(),
-    startHotKeyActor(),
-    fitFocusedBounds(),
-    startAutoUnfocusTimer()
-  ],
-  exit: [
-    stopHotKeyActor(),
-    undimEverything(),
-    returnViewportBefore(),
-    cancelAutoUnfocusTimer(),
-    xstateActions_cjsExports.assign({
-      focusedNode: null,
-      autoUnfocusTimer: false
-    })
-  ],
-  on: {
-    "focus.autoUnfocus": {
-      ...to.idle
-    },
-    "xyflow.nodeClick": [
-      {
-        guard: xstateGuards_cjsExports.and([
-          "enabled: ElementDetails",
-          "click: focused node",
-          "click: node has modelFqn"
-        ]),
-        actions: [
-          assignLastClickedNode(),
-          openElementDetails(),
-          emitNodeClick()
-        ]
-      },
-      {
-        guard: "click: focused node",
-        actions: [
-          assignLastClickedNode(),
-          emitNodeClick()
-        ],
-        ...to.idle
-      },
-      {
-        actions: [
-          assignLastClickedNode(),
-          xstateActions_cjsExports.raise(({ event }) => ({
-            type: "focus.node",
-            nodeId: event.node.id
-          })),
-          emitNodeClick()
-        ]
-      }
-    ],
-    "focus.node": {
-      actions: [
-        assignFocusedNode(),
-        focusOnNodesAndEdges(),
-        openSourceOfFocusedOrLastClickedNode(),
-        fitFocusedBounds()
-      ]
-    },
-    "key.esc": {
-      ...to.idle
-    },
-    "xyflow.paneClick": {
-      actions: [
-        emitPaneClick()
-      ],
-      ...to.idle
-    },
-    "notations.unhighlight": {
-      actions: focusOnNodesAndEdges()
-    },
-    "tag.unhighlight": {
-      actions: focusOnNodesAndEdges()
-    }
-  }
+import "../../_virtual/_rolldown/runtime.js";
+import { machine, targetState, to } from "./machine.setup.js";
+import { assignViewportBefore, cancelFitDiagram, fitFocusedBounds, returnViewportBefore } from "./machine.actions.layout.js";
+import { assignFocusedNode, assignLastClickedNode, cancelAutoUnfocusTimer, emitNodeClick, emitPaneClick, focusOnNodesAndEdges, openElementDetails, openSourceOfFocusedOrLastClickedNode, startAutoUnfocusTimer, startHotKeyActor, stopHotKeyActor, undimEverything } from "./machine.actions.js";
+import { and } from "xstate/guards";
+import { assign, raise } from "xstate/actions";
+//#region src/likec4diagram/state/machine.state.ready.focused.ts
+var focused = machine.createStateConfig({
+	id: targetState.focused.slice(1),
+	entry: [
+		cancelFitDiagram(),
+		focusOnNodesAndEdges(),
+		assignViewportBefore(),
+		openSourceOfFocusedOrLastClickedNode(),
+		startHotKeyActor(),
+		fitFocusedBounds(),
+		startAutoUnfocusTimer()
+	],
+	exit: [
+		stopHotKeyActor(),
+		undimEverything(),
+		returnViewportBefore(),
+		cancelAutoUnfocusTimer(),
+		assign({
+			focusedNode: null,
+			autoUnfocusTimer: false
+		})
+	],
+	on: {
+		"focus.autoUnfocus": { ...to.idle },
+		"xyflow.nodeClick": [
+			{
+				guard: and([
+					"enabled: ElementDetails",
+					"click: focused node",
+					"click: node has modelFqn"
+				]),
+				actions: [
+					assignLastClickedNode(),
+					openElementDetails(),
+					emitNodeClick()
+				]
+			},
+			{
+				guard: "click: focused node",
+				actions: [assignLastClickedNode(), emitNodeClick()],
+				...to.idle
+			},
+			{ actions: [
+				assignLastClickedNode(),
+				raise(({ event }) => ({
+					type: "focus.node",
+					nodeId: event.node.id
+				})),
+				emitNodeClick()
+			] }
+		],
+		"focus.node": { actions: [
+			assignFocusedNode(),
+			focusOnNodesAndEdges(),
+			openSourceOfFocusedOrLastClickedNode(),
+			fitFocusedBounds()
+		] },
+		"key.esc": { ...to.idle },
+		"xyflow.paneClick": {
+			actions: [emitPaneClick()],
+			...to.idle
+		},
+		"notations.unhighlight": { actions: focusOnNodesAndEdges() },
+		"tag.unhighlight": { actions: focusOnNodesAndEdges() }
+	}
 });
-
+//#endregion
 export { focused };