@likec4/diagram 1.55.0 → 1.56.0

package/dist/likec4diagram/state/utils.js

@@ -1,192 +1,161 @@
-import { BBox } from '@likec4/core/geometry';
-import { nonNullable, nonexhaustive } from '@likec4/core/utils';
-import { getViewportForBounds, getNodesBounds, getNodeDimensions, getEdgePosition } from '@xyflow/system';
-import { MinZoom } from '../../base/const.js';
-import { pickViewBounds } from '../../utils/view-bounds.js';
-
-const findNodeByModelFqn = (xynodes, elementFqn) => {
-  const node = xynodes.find((n) => "modelFqn" in n.data && n.data["modelFqn"] === elementFqn);
-  return node ? node : null;
+import "../../_virtual/_rolldown/runtime.js";
+import { MinZoom } from "../../base/const.js";
+import { pickViewBounds } from "../../utils/view-bounds.js";
+import { BBox } from "@likec4/core/geometry";
+import { nonNullable, nonexhaustive } from "@likec4/core/utils";
+import { getEdgePosition, getNodeDimensions, getNodesBounds, getViewportForBounds } from "@xyflow/system";
+//#region src/likec4diagram/state/utils.ts
+var findNodeByModelFqn = (xynodes, elementFqn) => {
+	const node = xynodes.find((n) => "modelFqn" in n.data && n.data["modelFqn"] === elementFqn);
+	return node ? node : null;
 };
 function typedSystem(system) {
-  return {
-    get overlaysActorRef() {
-      return system.get("overlays") ?? null;
-    },
-    get diagramActorRef() {
-      return nonNullable(system.get("diagram"), "Diagram actor not found");
-    },
-    get searchActorRef() {
-      return system.get("search") ?? null;
-    },
-    get editorActorRef() {
-      return system.get("editor") ?? null;
-    }
-  };
+	return {
+		get overlaysActorRef() {
+			return system.get("overlays") ?? null;
+		},
+		get diagramActorRef() {
+			return nonNullable(system.get("diagram"), "Diagram actor not found");
+		},
+		get searchActorRef() {
+			return system.get("search") ?? null;
+		},
+		get editorActorRef() {
+			return system.get("editor") ?? null;
+		}
+	};
 }
 typedSystem.editorActor = ({ system }) => {
-  return system.get("editor");
+	return system.get("editor");
 };
 typedSystem.overlaysActor = ({ system }) => {
-  return system.get("overlays");
+	return system.get("overlays");
 };
 typedSystem.diagramActor = ({ system }) => {
-  return system.get("diagram");
+	return system.get("diagram");
 };
 typedSystem.searchActor = ({ system }) => {
-  return system.get("search");
+	return system.get("search");
 };
 function findDiagramNode(ctx, xynodeId) {
-  return ctx.view.nodes.find((n) => n.id === xynodeId) ?? null;
+	return ctx.view.nodes.find((n) => n.id === xynodeId) ?? null;
 }
 function findDiagramEdge(ctx, xyedgeId) {
-  return ctx.view.edges.find((e) => e.id === xyedgeId) ?? null;
+	return ctx.view.edges.find((e) => e.id === xyedgeId) ?? null;
 }
+/**
+* Returns the bounds of the current view from the context.
+* If {@link nextView} is provided, returns the bounds of the next view.
+*/
 function viewBounds(ctx, nextView) {
-  const view = nextView ?? ctx.view;
-  return pickViewBounds(view, ctx.dynamicViewVariant);
+	return pickViewBounds(nextView ?? ctx.view, ctx.dynamicViewVariant);
 }
 function focusedBounds(params) {
-  const knownAbsolutes = /* @__PURE__ */ new Map();
-  const b = params.context.xynodes.reduce((acc, node) => {
-    let position = node.position;
-    if (node.parentId) {
-      const parent = knownAbsolutes.get(node.parentId) ?? { x: 0, y: 0 };
-      position = {
-        x: position.x + parent.x,
-        y: position.y + parent.y
-      };
-    }
-    knownAbsolutes.set(node.id, position);
-    if (node.hidden || node.data.dimmed) {
-      return acc;
-    }
-    const width = node.measured?.width ?? node.width ?? node.initialWidth;
-    const height = node.measured?.height ?? node.height ?? node.initialHeight;
-    acc.minX = Math.min(acc.minX, position.x);
-    acc.minY = Math.min(acc.minY, position.y);
-    acc.maxX = Math.max(acc.maxX, position.x + width);
-    acc.maxY = Math.max(acc.maxY, position.y + height);
-    return acc;
-  }, {
-    minX: Infinity,
-    minY: Infinity,
-    maxX: -Infinity,
-    maxY: -Infinity
-  });
-  if (b.minX === Infinity) {
-    return {
-      bounds: viewBounds(params.context)
-    };
-  }
-  return {
-    duration: 350,
-    bounds: {
-      x: b.minX - 10,
-      y: b.minY - 10,
-      width: b.maxX - b.minX + 20,
-      height: b.maxY - b.minY + 20
-    }
-  };
+	const knownAbsolutes = /* @__PURE__ */ new Map();
+	const b = params.context.xynodes.reduce((acc, node) => {
+		let position = node.position;
+		if (node.parentId) {
+			const parent = knownAbsolutes.get(node.parentId) ?? {
+				x: 0,
+				y: 0
+			};
+			position = {
+				x: position.x + parent.x,
+				y: position.y + parent.y
+			};
+		}
+		knownAbsolutes.set(node.id, position);
+		if (node.hidden || node.data.dimmed) return acc;
+		const width = node.measured?.width ?? node.width ?? node.initialWidth;
+		const height = node.measured?.height ?? node.height ?? node.initialHeight;
+		acc.minX = Math.min(acc.minX, position.x);
+		acc.minY = Math.min(acc.minY, position.y);
+		acc.maxX = Math.max(acc.maxX, position.x + width);
+		acc.maxY = Math.max(acc.maxY, position.y + height);
+		return acc;
+	}, {
+		minX: Infinity,
+		minY: Infinity,
+		maxX: -Infinity,
+		maxY: -Infinity
+	});
+	if (b.minX === Infinity) return { bounds: viewBounds(params.context) };
+	return {
+		duration: 350,
+		bounds: {
+			x: b.minX - 10,
+			y: b.minY - 10,
+			width: b.maxX - b.minX + 20,
+			height: b.maxY - b.minY + 20
+		}
+	};
 }
-const MARGIN = 32;
+var MARGIN = 32;
 function activeSequenceBounds(params) {
-  const activeWalkthrough = nonNullable(params.context.activeWalkthrough);
-  const stepEdge = nonNullable(params.context.xyedges.find((e) => e.id === activeWalkthrough.stepId));
-  const xystate = params.context.xystore.getState();
-  const sourceNode = nonNullable(xystate.nodeLookup.get(stepEdge.source));
-  const targetNode = nonNullable(xystate.nodeLookup.get(stepEdge.target));
-  const actorsBounds = getNodesBounds([sourceNode, targetNode], xystate);
-  let stepBounds;
-  if (activeWalkthrough.parallelPrefix) {
-    const parallelArea = params.context.xynodes.find(
-      (n) => n.type === "seq-parallel" && n.data.parallelPrefix === activeWalkthrough.parallelPrefix
-    );
-    if (parallelArea) {
-      stepBounds = {
-        x: parallelArea.position.x,
-        y: parallelArea.position.y,
-        ...getNodeDimensions(parallelArea)
-      };
-    }
-  }
-  stepBounds ??= getEdgeBounds(stepEdge, xystate);
-  if (stepBounds) {
-    stepBounds = BBox.merge(stepBounds, actorsBounds);
-  } else {
-    stepBounds = actorsBounds;
-  }
-  return {
-    duration: 350,
-    bounds: BBox.expand(
-      stepBounds,
-      MARGIN
-    )
-  };
+	const activeWalkthrough = nonNullable(params.context.activeWalkthrough);
+	const stepEdge = nonNullable(params.context.xyedges.find((e) => e.id === activeWalkthrough.stepId));
+	const xystate = params.context.xystore.getState();
+	const actorsBounds = getNodesBounds([nonNullable(xystate.nodeLookup.get(stepEdge.source)), nonNullable(xystate.nodeLookup.get(stepEdge.target))], xystate);
+	let stepBounds;
+	if (activeWalkthrough.parallelPrefix) {
+		const parallelArea = params.context.xynodes.find((n) => n.type === "seq-parallel" && n.data.parallelPrefix === activeWalkthrough.parallelPrefix);
+		if (parallelArea) stepBounds = {
+			x: parallelArea.position.x,
+			y: parallelArea.position.y,
+			...getNodeDimensions(parallelArea)
+		};
+	}
+	stepBounds ??= getEdgeBounds(stepEdge, xystate);
+	if (stepBounds) stepBounds = BBox.merge(stepBounds, actorsBounds);
+	else stepBounds = actorsBounds;
+	return {
+		duration: 350,
+		bounds: BBox.expand(stepBounds, MARGIN)
+	};
 }
 function getEdgeBounds(edge, store) {
-  const sourceNode = store.nodeLookup.get(edge.source);
-  const targetNode = store.nodeLookup.get(edge.target);
-  if (!sourceNode || !targetNode) {
-    return null;
-  }
-  const edgePosition = getEdgePosition({
-    id: edge.id,
-    sourceNode,
-    targetNode,
-    sourceHandle: edge.sourceHandle || null,
-    targetHandle: edge.targetHandle || null,
-    connectionMode: store.connectionMode
-  });
-  if (!edgePosition) {
-    return null;
-  }
-  return BBox.fromPoints([
-    [edgePosition.sourceX, edgePosition.sourceY],
-    [edgePosition.targetX, edgePosition.targetY]
-  ]);
+	const sourceNode = store.nodeLookup.get(edge.source);
+	const targetNode = store.nodeLookup.get(edge.target);
+	if (!sourceNode || !targetNode) return null;
+	const edgePosition = getEdgePosition({
+		id: edge.id,
+		sourceNode,
+		targetNode,
+		sourceHandle: edge.sourceHandle || null,
+		targetHandle: edge.targetHandle || null,
+		connectionMode: store.connectionMode
+	});
+	if (!edgePosition) return null;
+	return BBox.fromPoints([[edgePosition.sourceX, edgePosition.sourceY], [edgePosition.targetX, edgePosition.targetY]]);
 }
 function nodeRef(node) {
-  switch (node.type) {
-    case "element":
-    case "compound-element":
-    case "seq-actor":
-      return node.data.modelFqn;
-    case "deployment":
-    case "compound-deployment":
-      return node.data.modelFqn ?? node.data.deploymentFqn;
-    case "seq-parallel":
-    case "view-group":
-      return null;
-    default:
-      nonexhaustive(node);
-  }
+	switch (node.type) {
+		case "element":
+		case "compound-element":
+		case "seq-actor": return node.data.modelFqn;
+		case "deployment":
+		case "compound-deployment": return node.data.modelFqn ?? node.data.deploymentFqn;
+		case "seq-parallel":
+		case "view-group": return null;
+		default: nonexhaustive(node);
+	}
 }
 function findCorrespondingNode(context, event) {
-  const fromNodeId = context.lastOnNavigate?.fromNode;
-  const fromNode = fromNodeId && context.xynodes.find((n) => n.id === fromNodeId);
-  const fromRef = fromNode && nodeRef(fromNode);
-  if (!fromNode || !fromRef) {
-    return { fromNode: null, toNode: null };
-  }
-  const toNode = event.xynodes.find((n) => nodeRef(n) === fromRef) ?? null;
-  return { fromNode, toNode };
+	const fromNodeId = context.lastOnNavigate?.fromNode;
+	const fromNode = fromNodeId && context.xynodes.find((n) => n.id === fromNodeId);
+	const fromRef = fromNode && nodeRef(fromNode);
+	if (!fromNode || !fromRef) return {
+		fromNode: null,
+		toNode: null
+	};
+	return {
+		fromNode,
+		toNode: event.xynodes.find((n) => nodeRef(n) === fromRef) ?? null
+	};
 }
 function calcViewportForBounds(context, bounds) {
-  let {
-    width,
-    height,
-    transform
-  } = context.xystore.getState();
-  const maxZoom = Math.max(transform[2], 1);
-  return getViewportForBounds(
-    bounds,
-    width,
-    height,
-    MinZoom,
-    maxZoom,
-    context.fitViewPadding
-  );
+	let { width, height, transform } = context.xystore.getState();
+	return getViewportForBounds(bounds, width, height, MinZoom, Math.max(transform[2], 1), context.fitViewPadding);
 }
-
+//#endregion
 export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, findNodeByModelFqn, focusedBounds, nodeRef, typedSystem, viewBounds };

package/dist/likec4diagram/ui/LayoutDriftFrame.js

@@ -1,66 +1,55 @@
-import { jsx } from 'react/jsx-runtime';
-import { css } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { hstack } from '@likec4/styles/patterns';
-import { UnstyledButton } from '@mantine/core';
-import { memo } from 'react';
-import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js';
-
-const LayoutDriftFrame = memo(() => {
-  const [{ layout, isActive }, { toggleCompare }] = useDiagramCompareLayout();
-  const bgColor = layout === "manual" ? "var(--mantine-color-orange-6)" : "var(--mantine-color-green-6)";
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      className: hstack({
-        position: "absolute",
-        top: "0",
-        left: "0",
-        width: "full",
-        height: "full",
-        border: `default`,
-        borderWidth: 4,
-        pointerEvents: "none",
-        alignItems: "flex-start",
-        justifyContent: "center"
-      }),
-      style: {
-        zIndex: "9999",
-        display: !isActive ? "none" : void 0,
-        borderColor: bgColor
-      },
-      children: /* @__PURE__ */ jsx(
-        Btn,
-        {
-          style: {
-            backgroundColor: bgColor
-          },
-          onClick: (e) => {
-            e.stopPropagation();
-            toggleCompare();
-          },
-          children: "Close compare"
-        }
-      )
-    }
-  );
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.js";
+import { css } from "@likec4/styles/css";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { UnstyledButton } from "@mantine/core";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
+//#region src/likec4diagram/ui/LayoutDriftFrame.tsx
+var LayoutDriftFrame = memo(() => {
+	const [{ layout, isActive }, { toggleCompare }] = useDiagramCompareLayout();
+	const bgColor = layout === "manual" ? "var(--mantine-color-orange-6)" : "var(--mantine-color-green-6)";
+	return /* @__PURE__ */ jsx(Box$1, {
+		className: hstack({
+			position: "absolute",
+			top: "0",
+			left: "0",
+			width: "full",
+			height: "full",
+			border: `default`,
+			borderWidth: 4,
+			pointerEvents: "none",
+			alignItems: "flex-start",
+			justifyContent: "center"
+		}),
+		style: {
+			zIndex: "9999",
+			display: !isActive ? "none" : void 0,
+			borderColor: bgColor
+		},
+		children: /* @__PURE__ */ jsx(Btn, {
+			style: { backgroundColor: bgColor },
+			onClick: (e) => {
+				e.stopPropagation();
+				toggleCompare();
+			},
+			children: "Close compare"
+		})
+	});
 });
-const Btn = UnstyledButton.withProps({
-  className: css({
-    fontSize: "xs",
-    fontWeight: "medium",
-    py: "1.5",
-    lineHeight: "1",
-    borderBottomLeftRadius: "sm",
-    borderBottomRightRadius: "sm",
-    transform: "translateY(-4px)",
-    px: "4",
-    color: "mantine.colors.gray[9]",
-    pointerEvents: "all",
-    _active: {
-      transform: "translateY(-3px)"
-    }
-  })
-});
-
+var Btn = UnstyledButton.withProps({ className: css({
+	fontSize: "xs",
+	fontWeight: "medium",
+	py: "1.5",
+	lineHeight: "1",
+	borderBottomLeftRadius: "sm",
+	borderBottomRightRadius: "sm",
+	transform: "translateY(-4px)",
+	px: "4",
+	color: "mantine.colors.gray[9]",
+	pointerEvents: "all",
+	_active: { transform: "translateY(-3px)" }
+}) });
+//#endregion
 export { LayoutDriftFrame };

package/dist/likec4diagram/ui/notation/NotationPanel.css.js

@@ -1,91 +1,69 @@
-import { css } from '@likec4/styles/css';
-
-const container = css({
-  position: "absolute",
-  bottom: "0",
-  right: "0",
-  padding: "2",
-  margin: "0",
-  width: "min-content",
-  height: "min-content",
-  _print: {
-    display: "none"
-  }
+import { css } from "@likec4/styles/css";
+//#region src/likec4diagram/ui/notation/NotationPanel.css.ts
+var container = css({
+	position: "absolute",
+	bottom: "0",
+	right: "0",
+	padding: "2",
+	margin: "0",
+	width: "min-content",
+	height: "min-content",
+	_print: { display: "none" }
 });
-const icon = css({
-  ["--ai-radius"]: "0px",
-  _noReduceGraphics: {
-    ["--ai-radius"]: "{radii.md}"
-  }
+var icon = css({
+	["--ai-radius"]: "0px",
+	_noReduceGraphics: { ["--ai-radius"]: "{radii.md}" }
 });
-const card = css({
-  cursor: "default",
-  userSelect: "none",
-  minWidth: 200,
-  maxWidth: "calc(100vw - 20px)",
-  backgroundColor: `body/80`,
-  // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  sm: {
-    minWidth: 300,
-    maxWidth: `65vw`
-  },
-  md: {
-    maxWidth: `40vw`
-  },
-  _dark: {
-    backgroundColor: `mantine.colors.dark[6]/80`
-  }
+var card = css({
+	cursor: "default",
+	userSelect: "none",
+	minWidth: 200,
+	maxWidth: "calc(100vw - 20px)",
+	backgroundColor: `body/80`,
+	sm: {
+		minWidth: 300,
+		maxWidth: `65vw`
+	},
+	md: { maxWidth: `40vw` },
+	_dark: { backgroundColor: `mantine.colors.dark[6]/80` }
 });
-const tabPanel = css({
-  padding: "xxs"
-});
-const elementNotation = css({
-  backgroundColor: "transparent",
-  transition: "all 100ms ease-in",
-  // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  // vars: {
-  //   // [stokeFillMix]: `color-mix(in oklab, ${vars.element.stroke} 90%, ${vars.element.fill})`
-  // },
-  _hover: {
-    transition: "all 120ms ease-out",
-    // backgroundColor:
-    backgroundColor: `mantine.colors.primary[2]/50`
-  },
-  _dark: {
-    _hover: {
-      backgroundColor: `mantine.colors.dark[3]/40`
-    }
-  }
+var tabPanel = css({ padding: "xxs" });
+var elementNotation = css({
+	backgroundColor: "transparent",
+	transition: "all 100ms ease-in",
+	_hover: {
+		transition: "all 120ms ease-out",
+		backgroundColor: `mantine.colors.primary[2]/50`
+	},
+	_dark: { _hover: { backgroundColor: `mantine.colors.dark[3]/40` } }
 });
 css({
-  fill: "var(--likec4-palette-fill)",
-  stroke: "var(--likec4-palette-stroke)",
-  strokeWidth: 1,
-  overflow: "visible",
-  width: "100%",
-  height: "auto",
-  filter: `
+	fill: "var(--likec4-palette-fill)",
+	stroke: "var(--likec4-palette-stroke)",
+	strokeWidth: 1,
+	overflow: "visible",
+	width: "100%",
+	height: "auto",
+	filter: `
     drop-shadow(0 2px 3px rgb(0 0 0 / 22%))
     drop-shadow(0 1px 8px rgb(0 0 0 / 10%))
   `
 });
-const shapeBadge = css({
-  fontWeight: "medium",
-  letterSpacing: "0.2px",
-  paddingTop: "0",
-  paddingBottom: "0",
-  textTransform: "lowercase",
-  transition: "all 150ms ease-in-out",
-  cursor: "pointer",
-  ["--badge-radius"]: "2px",
-  ["--badge-fz"]: "9.5px",
-  ["--badge-padding-x"]: "3px",
-  ["--badge-height"]: "13.5px",
-  ["--badge-lh"]: "1",
-  ["--badge-bg"]: "var(--likec4-palette-fill)",
-  ["--badge-color"]: "var(--likec4-palette-hiContrast)"
+var shapeBadge = css({
+	fontWeight: "medium",
+	letterSpacing: "0.2px",
+	paddingTop: "0",
+	paddingBottom: "0",
+	textTransform: "lowercase",
+	transition: "all 150ms ease-in-out",
+	cursor: "pointer",
+	["--badge-radius"]: "2px",
+	["--badge-fz"]: "9.5px",
+	["--badge-padding-x"]: "3px",
+	["--badge-height"]: "13.5px",
+	["--badge-lh"]: "1",
+	["--badge-bg"]: "var(--likec4-palette-fill)",
+	["--badge-color"]: "var(--likec4-palette-hiContrast)"
 });
-
+//#endregion
 export { card, container, elementNotation, icon, shapeBadge, tabPanel };