@likec4/diagram 1.55.1 → 1.56.0

package/dist/likec4diagram/custom/edges/SequenceStepEdge.js

@@ -1,78 +1,74 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { getSmoothStepPath } from '@xyflow/system';
-import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import '@xstate/react';
-import 'fast-equals';
-import 'react';
-import { useDiagram } from '../../../hooks/safeContext.js';
-import { EdgeDrifts } from './EdgeDrifts.js';
-import { EdgeContainer } from '../../../base-primitives/edge/EdgeContainer.js';
-import { EdgePath } from '../../../base-primitives/edge/EdgePath.js';
-import { EdgeLabelContainer } from '../../../base-primitives/edge/EdgeLabelContainer.js';
-import { EdgeLabel } from '../../../base-primitives/edge/EdgeLabel.js';
-import { EdgeActionButton } from '../../../base-primitives/edge/EdgeActionButton.js';
-
-const LABEL_OFFSET = 16;
+import "../../../_virtual/_rolldown/runtime.js";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
+import { useDiagram } from "../../../hooks/safeContext.js";
+import { EdgeActionButton } from "../../../base-primitives/edge/EdgeActionButton.js";
+import { EdgeContainer } from "../../../base-primitives/edge/EdgeContainer.js";
+import { EdgeLabel } from "../../../base-primitives/edge/EdgeLabel.js";
+import { EdgeLabelContainer } from "../../../base-primitives/edge/EdgeLabelContainer.js";
+import { EdgePath } from "../../../base-primitives/edge/EdgePath.js";
+import { EdgeDrifts } from "./EdgeDrifts.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getSmoothStepPath } from "@xyflow/system";
+//#region src/likec4diagram/custom/edges/SequenceStepEdge.tsx
+var LABEL_OFFSET = 16;
 function SequenceStepEdge(props) {
-  const { enableNavigateTo, enableCompareWithLatest } = useEnabledFeatures();
-  const diagram = useDiagram();
-  const { navigateTo } = props.data;
-  const isSelfLoop = props.source === props.target;
-  const isBack = props.sourceX > props.targetX;
-  const [path] = getSmoothStepPath({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    sourcePosition: props.sourcePosition,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    targetPosition: props.targetPosition,
-    ...isSelfLoop && {
-      offset: 30,
-      borderRadius: 16
-    }
-  });
-  let labelX = props.sourceX;
-  switch (true) {
-    case isSelfLoop:
-      labelX = props.sourceX + 24 + LABEL_OFFSET;
-      break;
-    case isBack:
-      labelX = props.sourceX - LABEL_OFFSET;
-      break;
-    default:
-      labelX = props.sourceX + LABEL_OFFSET;
-      break;
-  }
-  return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, children: [
-    /* @__PURE__ */ jsx(
-      EdgePath,
-      {
-        edgeProps: props,
-        svgPath: path
-      }
-    ),
-    enableCompareWithLatest && /* @__PURE__ */ jsx(EdgeDrifts, { edgeProps: props, svgPath: path }),
-    /* @__PURE__ */ jsx(
-      EdgeLabelContainer,
-      {
-        edgeProps: props,
-        labelPosition: {
-          x: labelX,
-          y: props.sourceY + (!isSelfLoop ? LABEL_OFFSET : 0),
-          translate: isBack ? "translate(-100%, 0)" : void 0
-        },
-        children: /* @__PURE__ */ jsx(EdgeLabel, { edgeProps: props, children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(
-          EdgeActionButton,
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              diagram.navigateTo(navigateTo);
-            }
-          }
-        ) })
-      }
-    )
-  ] });
+	const { enableNavigateTo, enableCompareWithLatest } = useEnabledFeatures();
+	const diagram = useDiagram();
+	const { navigateTo } = props.data;
+	const isSelfLoop = props.source === props.target;
+	const isBack = props.sourceX > props.targetX;
+	const [path] = getSmoothStepPath({
+		sourceX: props.sourceX,
+		sourceY: props.sourceY,
+		sourcePosition: props.sourcePosition,
+		targetX: props.targetX,
+		targetY: props.targetY,
+		targetPosition: props.targetPosition,
+		...isSelfLoop && {
+			offset: 30,
+			borderRadius: 16
+		}
+	});
+	let labelX = props.sourceX;
+	switch (true) {
+		case isSelfLoop:
+			labelX = props.sourceX + 24 + LABEL_OFFSET;
+			break;
+		case isBack:
+			labelX = props.sourceX - LABEL_OFFSET;
+			break;
+		default:
+			labelX = props.sourceX + LABEL_OFFSET;
+			break;
+	}
+	return /* @__PURE__ */ jsxs(EdgeContainer, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(EdgePath, {
+				edgeProps: props,
+				svgPath: path
+			}),
+			enableCompareWithLatest && /* @__PURE__ */ jsx(EdgeDrifts, {
+				edgeProps: props,
+				svgPath: path
+			}),
+			/* @__PURE__ */ jsx(EdgeLabelContainer, {
+				edgeProps: props,
+				labelPosition: {
+					x: labelX,
+					y: props.sourceY + (!isSelfLoop ? LABEL_OFFSET : 0),
+					translate: isBack ? "translate(-100%, 0)" : void 0
+				},
+				children: /* @__PURE__ */ jsx(EdgeLabel, {
+					edgeProps: props,
+					children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, { onClick: (e) => {
+						e.stopPropagation();
+						diagram.navigateTo(navigateTo);
+					} })
+				})
+			})
+		]
+	});
 }
-
+//#endregion
 export { SequenceStepEdge };

package/dist/likec4diagram/custom/edges/edges.css.js

@@ -1,50 +1,44 @@
-import { css } from '@likec4/styles/css';
-
-const controlPointsContainer = css({
-  overflow: "visible",
-  position: "absolute",
-  pointerEvents: "none",
-  top: "0",
-  left: "0",
-  mixBlendMode: {
-    _dark: "screen",
-    _light: "multiply"
-  },
-  zIndex: "[100]"
+import { css } from "@likec4/styles/css";
+//#region src/likec4diagram/custom/edges/edges.css.ts
+var controlPointsContainer = css({
+	overflow: "visible",
+	position: "absolute",
+	pointerEvents: "none",
+	top: "0",
+	left: "0",
+	mixBlendMode: {
+		_dark: "screen",
+		_light: "multiply"
+	},
+	zIndex: "[100]"
 });
-const controlPoint = css({
-  fill: `[var(--xy-edge-stroke)]`,
-  stroke: `transparent`,
-  fillOpacity: 0.5,
-  strokeWidth: 10,
-  r: 4,
-  cursor: "grab",
-  pointerEvents: "all",
-  visibility: "hidden",
-  transitionDuration: "120ms",
-  transitionProperty: "visibility, fill, fill-opacity, r",
-  transitionTimingFunction: "inOut",
-  transitionDelay: "20ms",
-  [`:where([data-likec4-selected='true'], [data-likec4-hovered='true']) &`]: {
-    visibility: "visible",
-    fillOpacity: 1,
-    transitionTimingFunction: "out",
-    transitionDelay: "0ms"
-  },
-  [`:where([data-likec4-selected='true']) &`]: {
-    r: 6
-  },
-  [`:is([data-likec4-hovered='true']) &`]: {
-    r: 8
-  },
-  _hover: {
-    fill: "mantine.colors.primary.filledHover",
-    r: 10,
-    transitionDuration: "100ms"
-  },
-  _groupActive: {
-    cursor: "grabbing"
-  }
+var controlPoint = css({
+	fill: `[var(--xy-edge-stroke)]`,
+	stroke: `transparent`,
+	fillOpacity: .5,
+	strokeWidth: 10,
+	r: 4,
+	cursor: "grab",
+	pointerEvents: "all",
+	visibility: "hidden",
+	transitionDuration: "120ms",
+	transitionProperty: "visibility, fill, fill-opacity, r",
+	transitionTimingFunction: "inOut",
+	transitionDelay: "20ms",
+	[`:where([data-likec4-selected='true'], [data-likec4-hovered='true']) &`]: {
+		visibility: "visible",
+		fillOpacity: 1,
+		transitionTimingFunction: "out",
+		transitionDelay: "0ms"
+	},
+	[`:where([data-likec4-selected='true']) &`]: { r: 6 },
+	[`:is([data-likec4-hovered='true']) &`]: { r: 8 },
+	_hover: {
+		fill: "mantine.colors.primary.filledHover",
+		r: 10,
+		transitionDuration: "100ms"
+	},
+	_groupActive: { cursor: "grabbing" }
 });
-
+//#endregion
 export { controlPoint, controlPointsContainer };

package/dist/likec4diagram/custom/edges/useControlPoints.js

@@ -1,58 +1,54 @@
-import { vector } from '@likec4/core/geometry';
-import { deepEqual } from 'fast-equals';
-import { useState } from 'react';
-import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
-import { useUpdateEffect } from '../../../hooks/useUpdateEffect.js';
-import { bezierControlPoints } from '../../../utils/xyflow.js';
-
-function useControlPoints({
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  data
-}) {
-  const [controlPoints, setControlPoints] = useState(
-    () => data.controlPoints ?? bezierControlPoints(data.points)
-  );
-  useUpdateEffect(() => {
-    const next = data.controlPoints ?? bezierControlPoints(data.points);
-    setControlPoints((prev) => deepEqual(prev, next) ? prev : next);
-  }, [
-    data.points,
-    data.controlPoints ?? []
-  ]);
-  const insertControlPoint = useCallbackRef(({ x, y }) => {
-    const sourceV = vector(sourceX, sourceY);
-    const targetV = vector(targetX, targetY);
-    const points = [
-      data.dir === "back" ? targetV : sourceV,
-      ...controlPoints.map(vector) || [],
-      data.dir === "back" ? sourceV : targetV
-    ];
-    const newPointV = vector(x, y).round();
-    let insertionIndex = 0;
-    let minDistance = Infinity;
-    for (let i = 0; i < points.length - 1; i++) {
-      const a = points[i], b = points[i + 1], fromCurrentToNext = b.subtract(a), fromCurrentToNew = newPointV.subtract(a), fromNextToNew = newPointV.subtract(b);
-      if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
-        const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew)) / fromCurrentToNext.length();
-        if (distanceToEdge < minDistance) {
-          minDistance = distanceToEdge;
-          insertionIndex = i;
-        }
-      }
-    }
-    const newControlPoints = controlPoints.slice();
-    newControlPoints.splice(insertionIndex, 0, { x: newPointV.x, y: newPointV.y });
-    setControlPoints(newControlPoints);
-    return newControlPoints;
-  });
-  return {
-    controlPoints,
-    setControlPoints,
-    insertControlPoint
-  };
+import "../../../_virtual/_rolldown/runtime.js";
+import { useCallbackRef } from "../../../hooks/useCallbackRef.js";
+import { useUpdateEffect } from "../../../hooks/useUpdateEffect.js";
+import { bezierControlPoints } from "../../../utils/xyflow.js";
+import { useState } from "react";
+import { deepEqual } from "fast-equals";
+import { vector } from "@likec4/core/geometry";
+//#region src/likec4diagram/custom/edges/useControlPoints.ts
+function useControlPoints({ sourceX, sourceY, targetX, targetY, data }) {
+	const [controlPoints, setControlPoints] = useState(() => data.controlPoints ?? bezierControlPoints(data.points));
+	useUpdateEffect(() => {
+		const next = data.controlPoints ?? bezierControlPoints(data.points);
+		setControlPoints((prev) => deepEqual(prev, next) ? prev : next);
+	}, [data.points, data.controlPoints ?? []]);
+	return {
+		controlPoints,
+		setControlPoints,
+		insertControlPoint: useCallbackRef(({ x, y }) => {
+			const sourceV = vector(sourceX, sourceY);
+			const targetV = vector(targetX, targetY);
+			const points = [
+				data.dir === "back" ? targetV : sourceV,
+				...controlPoints.map(vector) || [],
+				data.dir === "back" ? sourceV : targetV
+			];
+			const newPointV = vector(x, y).round();
+			let insertionIndex = 0;
+			let minDistance = Infinity;
+			for (let i = 0; i < points.length - 1; i++) {
+				const a = points[i];
+				const b = points[i + 1];
+				const fromCurrentToNext = b.subtract(a);
+				const fromCurrentToNew = newPointV.subtract(a);
+				const fromNextToNew = newPointV.subtract(b);
+				if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
+					const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew)) / fromCurrentToNext.length();
+					if (distanceToEdge < minDistance) {
+						minDistance = distanceToEdge;
+						insertionIndex = i;
+					}
+				}
+			}
+			const newControlPoints = controlPoints.slice();
+			newControlPoints.splice(insertionIndex, 0, {
+				x: newPointV.x,
+				y: newPointV.y
+			});
+			setControlPoints(newControlPoints);
+			return newControlPoints;
+		})
+	};
 }
-
+//#endregion
 export { useControlPoints };

package/dist/likec4diagram/custom/edges/useRelationshipEdgePath.js

@@ -1,78 +1,56 @@
-import { vector } from '@likec4/core/geometry';
-import { nonNullable } from '@likec4/core/utils';
-import { getNodeDimensions } from '@xyflow/system';
-import { line, curveCatmullRomOpen } from 'd3-shape';
-import { shallowEqual } from 'fast-equals';
-import { useCallback } from 'react';
-import { isTruthy, first, last } from 'remeda';
-import { useXYStore } from '../../../hooks/useXYFlow.js';
-import { bezierPath, getNodeIntersectionFromCenterToPoint } from '../../../utils/xyflow.js';
-
-const curve = line().curve(curveCatmullRomOpen.alpha(0.7)).x((d) => Math.trunc(d.x)).y((d) => Math.trunc(d.y));
-function useRelationshipEdgePath({
-  props: {
-    sourceX,
-    sourceY,
-    source,
-    target,
-    targetX,
-    targetY,
-    data
-  },
-  controlPoints,
-  isControlPointDragging
-}) {
-  const [
-    sourceNodeWidth,
-    sourceNodeHeight,
-    targetNodeWidth,
-    targetNodeHeight
-  ] = useXYStore(
-    useCallback(({ nodeLookup }) => {
-      const sourceNode = getNodeDimensions(nonNullable(nodeLookup.get(source), `source node ${source} not found`));
-      const targetNode = getNodeDimensions(nonNullable(nodeLookup.get(target), `target node ${target} not found`));
-      return [
-        Math.ceil(sourceNode.width),
-        Math.ceil(sourceNode.height),
-        Math.ceil(targetNode.width),
-        Math.ceil(targetNode.height)
-      ];
-    }, [source, target]),
-    shallowEqual
-  );
-  const isModified = isTruthy(data.controlPoints) || isControlPointDragging;
-  if (!isModified) {
-    return bezierPath(data.points);
-  }
-  const sourceCenterPos = vector(sourceX, sourceY).trunc();
-  const targetCenterPos = vector(targetX, targetY).trunc();
-  const sourceNd = {
-    // Calculate node top-left from center position
-    ...sourceCenterPos.subtract(vector(sourceNodeWidth, sourceNodeHeight).divide(2)).trunc().toObject(),
-    width: sourceNodeWidth,
-    height: sourceNodeHeight
-  };
-  const targetNd = {
-    // Calculate node top-left from center position
-    ...targetCenterPos.subtract(vector(targetNodeWidth, targetNodeHeight).divide(2)).trunc().toObject(),
-    width: targetNodeWidth,
-    height: targetNodeHeight
-  };
-  const nodeMargin = 6;
-  const points = data.dir === "back" ? [
-    targetCenterPos,
-    getNodeIntersectionFromCenterToPoint(targetNd, first(controlPoints) ?? sourceCenterPos, nodeMargin),
-    ...controlPoints,
-    getNodeIntersectionFromCenterToPoint(sourceNd, last(controlPoints) ?? targetCenterPos, nodeMargin),
-    sourceCenterPos
-  ] : [
-    sourceCenterPos,
-    getNodeIntersectionFromCenterToPoint(sourceNd, first(controlPoints) ?? targetCenterPos, nodeMargin),
-    ...controlPoints,
-    getNodeIntersectionFromCenterToPoint(targetNd, last(controlPoints) ?? sourceCenterPos, nodeMargin),
-    targetCenterPos
-  ];
-  return nonNullable(curve(points));
+import "../../../_virtual/_rolldown/runtime.js";
+import { useXYStore } from "../../../hooks/useXYFlow.js";
+import { bezierPath, getNodeIntersectionFromCenterToPoint } from "../../../utils/xyflow.js";
+import { useCallback } from "react";
+import { shallowEqual } from "fast-equals";
+import { first, isTruthy, last } from "remeda";
+import { vector } from "@likec4/core/geometry";
+import { nonNullable } from "@likec4/core/utils";
+import { getNodeDimensions } from "@xyflow/system";
+import { curveCatmullRomOpen, line } from "d3-shape";
+//#region src/likec4diagram/custom/edges/useRelationshipEdgePath.ts
+var curve = line().curve(curveCatmullRomOpen.alpha(.7)).x((d) => Math.trunc(d.x)).y((d) => Math.trunc(d.y));
+/**
+* @returns SVG path data string for relationship edge
+*/
+function useRelationshipEdgePath({ props: { sourceX, sourceY, source, target, targetX, targetY, data }, controlPoints, isControlPointDragging }) {
+	const [sourceNodeWidth, sourceNodeHeight, targetNodeWidth, targetNodeHeight] = useXYStore(useCallback(({ nodeLookup }) => {
+		const sourceNode = getNodeDimensions(nonNullable(nodeLookup.get(source), `source node ${source} not found`));
+		const targetNode = getNodeDimensions(nonNullable(nodeLookup.get(target), `target node ${target} not found`));
+		return [
+			Math.ceil(sourceNode.width),
+			Math.ceil(sourceNode.height),
+			Math.ceil(targetNode.width),
+			Math.ceil(targetNode.height)
+		];
+	}, [source, target]), shallowEqual);
+	if (!(isTruthy(data.controlPoints) || isControlPointDragging)) return bezierPath(data.points);
+	const sourceCenterPos = vector(sourceX, sourceY).trunc();
+	const targetCenterPos = vector(targetX, targetY).trunc();
+	const sourceNd = {
+		...sourceCenterPos.subtract(vector(sourceNodeWidth, sourceNodeHeight).divide(2)).trunc().toObject(),
+		width: sourceNodeWidth,
+		height: sourceNodeHeight
+	};
+	const targetNd = {
+		...targetCenterPos.subtract(vector(targetNodeWidth, targetNodeHeight).divide(2)).trunc().toObject(),
+		width: targetNodeWidth,
+		height: targetNodeHeight
+	};
+	const nodeMargin = 6;
+	return nonNullable(curve(data.dir === "back" ? [
+		targetCenterPos,
+		getNodeIntersectionFromCenterToPoint(targetNd, first(controlPoints) ?? sourceCenterPos, nodeMargin),
+		...controlPoints,
+		getNodeIntersectionFromCenterToPoint(sourceNd, last(controlPoints) ?? targetCenterPos, nodeMargin),
+		sourceCenterPos
+	] : [
+		sourceCenterPos,
+		getNodeIntersectionFromCenterToPoint(sourceNd, first(controlPoints) ?? targetCenterPos, nodeMargin),
+		...controlPoints,
+		getNodeIntersectionFromCenterToPoint(targetNd, last(controlPoints) ?? sourceCenterPos, nodeMargin),
+		targetCenterPos
+	]));
 }
-
+//#endregion
 export { useRelationshipEdgePath };

package/dist/likec4diagram/custom/index.js

@@ -1,20 +1,20 @@
-import { RelationshipEdge } from './edges/RelationshipEdge.js';
-import { SequenceStepEdge } from './edges/SequenceStepEdge.js';
-import { SequenceParallelArea, SequenceActorNode } from './nodes/SequenceActorNode.js';
-import { ViewGroupNode, CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode } from './nodes/nodes.js';
-
-const BuiltinNodes = {
-  ElementNode,
-  DeploymentNode,
-  CompoundElementNode,
-  CompoundDeploymentNode,
-  ViewGroupNode,
-  SequenceActorNode,
-  SequenceParallelArea
+import { RelationshipEdge } from "./edges/RelationshipEdge.js";
+import { SequenceStepEdge } from "./edges/SequenceStepEdge.js";
+import { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, ViewGroupNode } from "./nodes/nodes.js";
+import { SequenceActorNode, SequenceParallelArea } from "./nodes/SequenceActorNode.js";
+//#region src/likec4diagram/custom/index.tsx
+var BuiltinNodes = {
+	ElementNode,
+	DeploymentNode,
+	CompoundElementNode,
+	CompoundDeploymentNode,
+	ViewGroupNode,
+	SequenceActorNode,
+	SequenceParallelArea
 };
-const BuiltinEdges = {
-  RelationshipEdge,
-  SequenceStepEdge
+var BuiltinEdges = {
+	RelationshipEdge,
+	SequenceStepEdge
 };
-
+//#endregion
 export { BuiltinEdges, BuiltinNodes };

package/dist/likec4diagram/custom/nodes/CompoundActions.js

@@ -1,28 +1,21 @@
-import { jsx } from 'react/jsx-runtime';
-import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import '@xstate/react';
-import 'fast-equals';
-import 'react';
-import { useDiagram } from '../../../hooks/safeContext.js';
-import { CompoundActionButton } from '../../../base-primitives/compound/CompoundActionButton.js';
-
-const CompoundActions = (props) => {
-  const { enableNavigateTo } = useEnabledFeatures();
-  const diagram = useDiagram();
-  const { navigateTo } = props.data;
-  if (navigateTo && enableNavigateTo) {
-    return /* @__PURE__ */ jsx(
-      CompoundActionButton,
-      {
-        onClick: (e) => {
-          e.stopPropagation();
-          diagram.navigateTo(navigateTo, props.id);
-        },
-        ...props
-      }
-    );
-  }
-  return null;
+import "../../../_virtual/_rolldown/runtime.js";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
+import { useDiagram } from "../../../hooks/safeContext.js";
+import { CompoundActionButton } from "../../../base-primitives/compound/CompoundActionButton.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/likec4diagram/custom/nodes/CompoundActions.tsx
+var CompoundActions = (props) => {
+	const { enableNavigateTo } = useEnabledFeatures();
+	const diagram = useDiagram();
+	const { navigateTo } = props.data;
+	if (navigateTo && enableNavigateTo) return /* @__PURE__ */ jsx(CompoundActionButton, {
+		onClick: (e) => {
+			e.stopPropagation();
+			diagram.navigateTo(navigateTo, props.id);
+		},
+		...props
+	});
+	return null;
 };
-
+//#endregion
 export { CompoundActions };