@likec4/diagram 1.55.1 → 1.56.0

package/dist/likec4diagram/xyflow-sequence/sequence-layout.js

@@ -1,191 +1,188 @@
-import { nonNullable } from '@likec4/core';
-import { SeqZIndex, SeqParallelAreaColor } from './const.js';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { SeqParallelAreaColor, SeqZIndex } from "./const.js";
+import { nonNullable } from "@likec4/core";
+//#region src/likec4diagram/xyflow-sequence/sequence-layout.ts
+/**
+* Converts a sequence layout to XY flow nodes and edges.
+* @param view The next dynamic view which contains the sequence layout.
+* @param currentViewId The ID of the current view (optional, used to exclude navigation to the current view)
+*/
 function sequenceLayoutToXY(view, currentViewId) {
-  const { actors, steps, compounds, parallelAreas, bounds } = view.sequenceLayout;
-  const xynodes = [];
-  const xyedges = [];
-  const getNode = (id) => {
-    return nonNullable(view.nodes.find((n) => n.id === id));
-  };
-  for (const compound of compounds) {
-    xynodes.push(toCompoundArea(compound, getNode(compound.origin), view));
-  }
-  for (const parallelArea of parallelAreas) {
-    xynodes.push(toSeqParallelArea(parallelArea, view));
-  }
-  for (const actor of actors) {
-    xynodes.push(toSeqActorNode(actor, getNode(actor.id), bounds, view));
-  }
-  for (const step of steps) {
-    const edge = view.edges.find((e) => e.id === step.id);
-    if (!edge) {
-      throw new Error(`Edge ${step.id} not found`);
-    }
-    xyedges.push(toSeqStepEdge(step, edge, currentViewId ?? view.id));
-  }
-  return {
-    xynodes,
-    xyedges
-  };
+	const { actors, steps, compounds, parallelAreas, bounds } = view.sequenceLayout;
+	const xynodes = [];
+	const xyedges = [];
+	const getNode = (id) => {
+		return nonNullable(view.nodes.find((n) => n.id === id));
+	};
+	for (const compound of compounds) xynodes.push(toCompoundArea(compound, getNode(compound.origin), view));
+	for (const parallelArea of parallelAreas) xynodes.push(toSeqParallelArea(parallelArea, view));
+	for (const actor of actors) xynodes.push(toSeqActorNode(actor, getNode(actor.id), bounds, view));
+	for (const step of steps) {
+		const edge = view.edges.find((e) => e.id === step.id);
+		if (!edge) throw new Error(`Edge ${step.id} not found`);
+		xyedges.push(toSeqStepEdge(step, edge, currentViewId ?? view.id));
+	}
+	return {
+		xynodes,
+		xyedges
+	};
 }
+/**
+* Shows a compound as a view group node
+*/
 function toCompoundArea({ id, x, y, width, height, depth }, node, view) {
-  return {
-    id,
-    type: "view-group",
-    data: {
-      id: node.id,
-      title: node.title,
-      color: node.color ?? "gray",
-      shape: node.shape,
-      style: node.style,
-      tags: node.tags,
-      x,
-      y,
-      viewId: view.id,
-      depth,
-      isViewGroup: true,
-      drifts: node.drifts ?? null,
-      viewLayoutDir: "LR",
-      // Ignore notes for Compound nodes
-      notes: void 0
-    },
-    // zIndex: SeqZIndex.compound,
-    position: {
-      x,
-      y
-    },
-    draggable: false,
-    selectable: false,
-    focusable: false,
-    style: {
-      pointerEvents: "none"
-    },
-    width,
-    initialWidth: width,
-    height,
-    initialHeight: height
-  };
+	return {
+		id,
+		type: "view-group",
+		data: {
+			id: node.id,
+			title: node.title,
+			color: node.color ?? "gray",
+			shape: node.shape,
+			style: node.style,
+			tags: node.tags,
+			x,
+			y,
+			viewId: view.id,
+			depth,
+			isViewGroup: true,
+			drifts: node.drifts ?? null,
+			viewLayoutDir: "LR",
+			notes: void 0
+		},
+		position: {
+			x,
+			y
+		},
+		draggable: false,
+		selectable: false,
+		focusable: false,
+		style: { pointerEvents: "none" },
+		width,
+		initialWidth: width,
+		height,
+		initialHeight: height
+	};
 }
 function toSeqParallelArea({ parallelPrefix, x, y, width, height }, view) {
-  return {
-    id: `seq-parallel-${parallelPrefix}`,
-    type: "seq-parallel",
-    data: {
-      id: `seq-parallel-${parallelPrefix}`,
-      title: "PARALLEL",
-      technology: null,
-      color: SeqParallelAreaColor.default,
-      shape: "rectangle",
-      style: {},
-      tags: [],
-      x,
-      y,
-      level: 0,
-      icon: null,
-      width,
-      height,
-      description: null,
-      viewId: view.id,
-      parallelPrefix,
-      drifts: null,
-      viewLayoutDir: "LR",
-      // Ignore notes for Parallel Area nodes
-      notes: void 0
-    },
-    zIndex: SeqZIndex.parallel,
-    position: {
-      x,
-      y
-    },
-    draggable: false,
-    deletable: false,
-    selectable: false,
-    focusable: false,
-    style: {
-      pointerEvents: "none"
-    },
-    width,
-    initialWidth: width,
-    height,
-    initialHeight: height
-  };
+	return {
+		id: `seq-parallel-${parallelPrefix}`,
+		type: "seq-parallel",
+		data: {
+			id: `seq-parallel-${parallelPrefix}`,
+			title: "PARALLEL",
+			technology: null,
+			color: SeqParallelAreaColor.default,
+			shape: "rectangle",
+			style: {},
+			tags: [],
+			x,
+			y,
+			level: 0,
+			icon: null,
+			width,
+			height,
+			description: null,
+			viewId: view.id,
+			parallelPrefix,
+			drifts: null,
+			viewLayoutDir: "LR",
+			notes: void 0
+		},
+		zIndex: SeqZIndex.parallel,
+		position: {
+			x,
+			y
+		},
+		draggable: false,
+		deletable: false,
+		selectable: false,
+		focusable: false,
+		style: { pointerEvents: "none" },
+		width,
+		initialWidth: width,
+		height,
+		initialHeight: height
+	};
 }
 function toSeqActorNode({ id, x, y, width, height, ports }, actor, bounds, view) {
-  return {
-    id,
-    type: "seq-actor",
-    data: {
-      id: actor.id,
-      x,
-      y,
-      level: 0,
-      icon: actor.icon ?? null,
-      isMultiple: actor.style.multiple ?? false,
-      title: actor.title,
-      width,
-      height,
-      color: actor.color,
-      navigateTo: actor.navigateTo ?? null,
-      shape: actor.shape,
-      style: actor.style,
-      tags: actor.tags,
-      modelFqn: actor.modelRef ?? null,
-      technology: actor.technology ?? null,
-      description: actor.description ?? null,
-      viewHeight: bounds.height,
-      viewId: view.id,
-      notes: actor.notes,
-      ports,
-      drifts: actor.drifts ?? null,
-      viewLayoutDir: "LR"
-    },
-    deletable: false,
-    selectable: true,
-    zIndex: SeqZIndex.actor,
-    position: { x, y },
-    width,
-    initialWidth: width,
-    height,
-    initialHeight: height
-  };
+	return {
+		id,
+		type: "seq-actor",
+		data: {
+			id: actor.id,
+			x,
+			y,
+			level: 0,
+			icon: actor.icon ?? null,
+			isMultiple: actor.style.multiple ?? false,
+			title: actor.title,
+			width,
+			height,
+			color: actor.color,
+			navigateTo: actor.navigateTo ?? null,
+			shape: actor.shape,
+			style: actor.style,
+			tags: actor.tags,
+			modelFqn: actor.modelRef ?? null,
+			technology: actor.technology ?? null,
+			description: actor.description ?? null,
+			viewHeight: bounds.height,
+			viewId: view.id,
+			notes: actor.notes,
+			ports,
+			drifts: actor.drifts ?? null,
+			viewLayoutDir: "LR"
+		},
+		deletable: false,
+		selectable: true,
+		zIndex: SeqZIndex.actor,
+		position: {
+			x,
+			y
+		},
+		width,
+		initialWidth: width,
+		height,
+		initialHeight: height
+	};
 }
 function toSeqStepEdge({ id, labelBBox, sourceHandle, targetHandle }, edge, currentViewId) {
-  return {
-    id,
-    type: "seq-step",
-    data: {
-      id,
-      label: edge.label,
-      technology: edge.technology,
-      notes: edge.notes ?? null,
-      navigateTo: edge.navigateTo !== currentViewId ? edge.navigateTo : null,
-      controlPoints: null,
-      labelBBox: {
-        x: 0,
-        y: 0,
-        width: labelBBox?.width ?? edge.labelBBox?.width ?? 32,
-        height: labelBBox?.height ?? edge.labelBBox?.height ?? 32
-      },
-      labelXY: null,
-      points: edge.points,
-      color: edge.color,
-      line: edge.line,
-      dir: "forward",
-      head: edge.head ?? "normal",
-      tail: edge.tail ?? "none",
-      astPath: edge.astPath,
-      drifts: edge.drifts ?? null
-    },
-    selectable: true,
-    focusable: false,
-    zIndex: 20,
-    interactionWidth: 40,
-    source: edge.source,
-    sourceHandle,
-    target: edge.target,
-    targetHandle
-  };
+	return {
+		id,
+		type: "seq-step",
+		data: {
+			id,
+			label: edge.label,
+			technology: edge.technology,
+			notes: edge.notes ?? null,
+			navigateTo: edge.navigateTo !== currentViewId ? edge.navigateTo : null,
+			controlPoints: null,
+			labelBBox: {
+				x: 0,
+				y: 0,
+				width: labelBBox?.width ?? edge.labelBBox?.width ?? 32,
+				height: labelBBox?.height ?? edge.labelBBox?.height ?? 32
+			},
+			labelXY: null,
+			points: edge.points,
+			color: edge.color,
+			line: edge.line,
+			dir: "forward",
+			head: edge.head ?? "normal",
+			tail: edge.tail ?? "none",
+			astPath: edge.astPath,
+			drifts: edge.drifts ?? null
+		},
+		selectable: true,
+		focusable: false,
+		zIndex: 20,
+		interactionWidth: 40,
+		source: edge.source,
+		sourceHandle,
+		target: edge.target,
+		targetHandle
+	};
 }
-
+//#endregion
 export { sequenceLayoutToXY };

package/dist/navigationpanel/NavigationPanel.js

@@ -1,128 +1,118 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { VStack } from '@likec4/styles/jsx';
-import { hstack } from '@likec4/styles/patterns';
-import { Popover, PopoverTarget } from '@mantine/core';
-import { useActorRef, useSelector } from '@xstate/react';
-import { LayoutGroup, AnimatePresence } from 'motion/react';
-import * as m from 'motion/react-m';
-import { memo, useEffect } from 'react';
-import { useDiagram } from '../hooks/safeContext.js';
-import { useCurrentView } from '../hooks/useCurrentView.js';
-import { useOptionalCurrentViewModel } from '../context/LikeC4ModelContext.js';
-import { useDiagramContext } from '../hooks/useDiagram.js';
-import { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
-import { navigationPanelActorLogic } from './actor.js';
-import { NavigationPanelActorContextProvider } from './hooks.js';
-import { NavigationPanelControls } from './NavigationPanelControls.js';
-import { NavigationPanelDropdown } from './NavigationPanelDropdown.js';
-import { WalkthroughPanel } from './walkthrough/WalkthroughPanel.js';
-import { ComparePanel } from './comparepanel/ComparePanel.js';
-import { EditorPanel } from './editorpanel/EditorPanel.js';
-import { ActiveWalkthroughControls } from './walkthrough/ActiveWalkthroughControls.js';
-
-const NavigationPanel = memo(() => {
-  const diagram = useDiagram();
-  const view = useCurrentView();
-  const viewModel = useOptionalCurrentViewModel();
-  const actorRef = useActorRef(
-    navigationPanelActorLogic,
-    {
-      input: {
-        view,
-        viewModel
-      }
-    }
-  );
-  useEffect(() => {
-    const subscription = actorRef.on("navigateTo", (event) => {
-      diagram.navigateTo(event.viewId);
-    });
-    return () => subscription.unsubscribe();
-  }, [actorRef, diagram]);
-  useEffect(() => {
-    actorRef.send({ type: "update.inputs", inputs: { viewModel, view } });
-  }, [actorRef, viewModel, view]);
-  return /* @__PURE__ */ jsx(
-    VStack,
-    {
-      css: {
-        alignItems: "flex-start",
-        pointerEvents: "none",
-        position: "absolute",
-        top: "0",
-        left: "0",
-        margin: "0",
-        width: "100%",
-        gap: "xxs",
-        maxWidth: [
-          "calc(100vw)",
-          "calc(100cqw)"
-        ],
-        "@/sm": {
-          margin: "xs",
-          gap: "xs",
-          width: "max-content",
-          maxWidth: [
-            "calc(100vw - 2 * {spacing.md})",
-            "calc(100cqw - 2 * {spacing.md})"
-          ]
-        },
-        _print: {
-          display: "none"
-        }
-      },
-      children: /* @__PURE__ */ jsxs(NavigationPanelActorContextProvider, { value: actorRef, children: [
-        /* @__PURE__ */ jsx(NavigationPanelImpl, { actor: actorRef }),
-        /* @__PURE__ */ jsx(ComparePanel, {}),
-        /* @__PURE__ */ jsx(WalkthroughPanel, {}),
-        /* @__PURE__ */ jsx(EditorPanel, {})
-      ] })
-    }
-  );
+import "../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../hooks/safeContext.js";
+import { useDiagramContext } from "../hooks/useDiagram.js";
+import { useCurrentView } from "../hooks/useCurrentView.js";
+import { useOptionalCurrentViewModel } from "../context/LikeC4ModelContext.js";
+import { useMantinePortalProps } from "../hooks/useMantinePortalProps.js";
+import { navigationPanelActorLogic } from "./actor.js";
+import { ComparePanel } from "./comparepanel/ComparePanel.js";
+import { EditorPanel } from "./editorpanel/EditorPanel.js";
+import { NavigationPanelActorContextProvider } from "./hooks.js";
+import { ActiveWalkthroughControls } from "./walkthrough/ActiveWalkthroughControls.js";
+import { NavigationPanelControls } from "./NavigationPanelControls.js";
+import { NavigationPanelDropdown } from "./NavigationPanelDropdown.js";
+import { WalkthroughPanel } from "./walkthrough/WalkthroughPanel.js";
+import { memo, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover, PopoverTarget } from "@mantine/core";
+import { AnimatePresence, LayoutGroup } from "motion/react";
+import { useActorRef, useSelector } from "@xstate/react";
+import { VStack } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
+import * as m$1 from "motion/react-m";
+//#region src/navigationpanel/NavigationPanel.tsx
+var NavigationPanel = memo(() => {
+	const diagram = useDiagram();
+	const view = useCurrentView();
+	const viewModel = useOptionalCurrentViewModel();
+	const actorRef = useActorRef(navigationPanelActorLogic, { input: {
+		view,
+		viewModel
+	} });
+	useEffect(() => {
+		const subscription = actorRef.on("navigateTo", (event) => {
+			diagram.navigateTo(event.viewId);
+		});
+		return () => subscription.unsubscribe();
+	}, [actorRef, diagram]);
+	useEffect(() => {
+		actorRef.send({
+			type: "update.inputs",
+			inputs: {
+				viewModel,
+				view
+			}
+		});
+	}, [
+		actorRef,
+		viewModel,
+		view
+	]);
+	return /* @__PURE__ */ jsx(VStack, {
+		css: {
+			alignItems: "flex-start",
+			pointerEvents: "none",
+			position: "absolute",
+			top: "0",
+			left: "0",
+			margin: "0",
+			width: "100%",
+			gap: "xxs",
+			maxWidth: ["calc(100vw)", "calc(100cqw)"],
+			"@/sm": {
+				margin: "xs",
+				gap: "xs",
+				width: "max-content",
+				maxWidth: ["calc(100vw - 2 * {spacing.md})", "calc(100cqw - 2 * {spacing.md})"]
+			},
+			_print: { display: "none" }
+		},
+		children: /* @__PURE__ */ jsxs(NavigationPanelActorContextProvider, {
+			value: actorRef,
+			children: [
+				/* @__PURE__ */ jsx(NavigationPanelImpl, { actor: actorRef }),
+				/* @__PURE__ */ jsx(ComparePanel, {}),
+				/* @__PURE__ */ jsx(WalkthroughPanel, {}),
+				/* @__PURE__ */ jsx(EditorPanel, {})
+			]
+		})
+	});
 });
 NavigationPanel.displayName = "NavigationPanel";
-const stateHasActiveTag = (state) => state.hasTag("active");
-const NavigationPanelImpl = ({ actor }) => {
-  const opened = useSelector(actor, stateHasActiveTag);
-  const portalProps = useMantinePortalProps();
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      offset: {
-        mainAxis: 4
-      },
-      opened,
-      position: "bottom-start",
-      trapFocus: opened,
-      ...portalProps,
-      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      onDismiss: () => actor.send({ type: "dropdown.dismiss" }),
-      children: [
-        /* @__PURE__ */ jsx(NavigationPanelPopoverTarget, { actor }),
-        opened && /* @__PURE__ */ jsx(NavigationPanelDropdown, {})
-      ]
-    }
-  );
+var stateHasActiveTag = (state) => state.hasTag("active");
+var NavigationPanelImpl = ({ actor }) => {
+	const opened = useSelector(actor, stateHasActiveTag);
+	return /* @__PURE__ */ jsxs(Popover, {
+		offset: { mainAxis: 4 },
+		opened,
+		position: "bottom-start",
+		trapFocus: opened,
+		...useMantinePortalProps(),
+		clickOutsideEvents: [
+			"pointerdown",
+			"mousedown",
+			"click"
+		],
+		onDismiss: () => actor.send({ type: "dropdown.dismiss" }),
+		children: [/* @__PURE__ */ jsx(NavigationPanelPopoverTarget, { actor }), opened && /* @__PURE__ */ jsx(NavigationPanelDropdown, {})]
+	});
 };
-const NavigationPanelPopoverTarget = ({ actor }) => {
-  const isActiveWalkthrough = useDiagramContext((c) => c.activeWalkthrough !== null);
-  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(
-    m.div,
-    {
-      layout: true,
-      layoutDependency: isActiveWalkthrough,
-      className: hstack({
-        layerStyle: "likec4.panel",
-        position: "relative",
-        gap: "xs",
-        cursor: "pointer",
-        pointerEvents: "all",
-        width: "100%"
-      }),
-      onMouseLeave: () => actor.send({ type: "breadcrumbs.mouseLeave" }),
-      children: /* @__PURE__ */ jsx(AnimatePresence, { children: isActiveWalkthrough ? /* @__PURE__ */ jsx(ActiveWalkthroughControls, {}) : /* @__PURE__ */ jsx(NavigationPanelControls, {}) })
-    }
-  ) }) });
+var NavigationPanelPopoverTarget = ({ actor }) => {
+	const isActiveWalkthrough = useDiagramContext((c) => c.activeWalkthrough !== null);
+	return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(m$1.div, {
+		layout: true,
+		layoutDependency: isActiveWalkthrough,
+		className: hstack({
+			layerStyle: "likec4.panel",
+			position: "relative",
+			gap: "xs",
+			cursor: "pointer",
+			pointerEvents: "all",
+			width: "100%"
+		}),
+		onMouseLeave: () => actor.send({ type: "breadcrumbs.mouseLeave" }),
+		children: /* @__PURE__ */ jsx(AnimatePresence, { children: isActiveWalkthrough ? /* @__PURE__ */ jsx(ActiveWalkthroughControls, {}) : /* @__PURE__ */ jsx(NavigationPanelControls, {}) })
+	}) }) });
 };
-
+//#endregion
 export { NavigationPanel };