@likec4/diagram 1.59.4 → 1.61.0

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

@@ -1,401 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useCallbackRef } from "../../../hooks/useCallbackRef.js";
-import { useUpdateEffect as useUpdateEffect$1 } from "../../../hooks/useUpdateEffect.js";
-import { useXYFlow, useXYStoreApi } from "../../../hooks/useXYFlow.js";
-import { isSamePoint } from "../../../utils/xyflow.js";
-import { useSetState } from "../../../hooks/useSetState.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 { memoEdge } from "../../../base-primitives/memoEdge.js";
-import { EdgeDrifts } from "./EdgeDrifts.js";
-import { controlPoint, controlPointsContainer, labelDraggable } from "./edges.css.js";
-import { useControlPoints } from "./useControlPoints.js";
-import { useRelationshipEdgePath } from "./useRelationshipEdgePath.js";
-import { css, cx } from "@likec4/styles/css";
-import { useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useRafEffect } from "@react-hookz/web";
-import { EdgeLabelRenderer } from "@xyflow/react";
-import { isNumber } from "remeda";
-//#region src/likec4diagram/custom/edges/RelationshipEdge.tsx
-var getEdgeCenter = (path) => {
-	const dompoint = path.getPointAtLength(path.getTotalLength() * .5);
-	return {
-		x: Math.round(dompoint.x),
-		y: Math.round(dompoint.y)
-	};
-};
-var RelationshipEdge = memoEdge((props) => {
-	const [isControlPointDragging, setIsControlPointDragging] = useState(false);
-	const isControlPointDraggingRef = useRef(isControlPointDragging);
-	isControlPointDraggingRef.current = isControlPointDragging;
-	const [isLabelDragging, setIsLabelDragging] = useState(false);
-	const isLabelDraggingRef = useRef(isLabelDragging);
-	isLabelDraggingRef.current = isLabelDragging;
-	const xyflow = useXYFlow();
-	const xyflowStore = useXYStoreApi();
-	const diagram = useDiagram();
-	const { enableNavigateTo, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
-	const enabledEditing = !enableReadOnly;
-	const { id, selected = false, data: { labelBBox, labelXY, ...data } } = props;
-	const navigateTo = enableNavigateTo && !isControlPointDragging ? data.navigateTo : void 0;
-	const { controlPoints, setControlPoints, insertControlPoint } = useControlPoints(props);
-	let edgePath = useRelationshipEdgePath({
-		props,
-		controlPoints,
-		isControlPointDragging
-	});
-	let labelX = labelBBox?.x ?? 0;
-	let labelY = labelBBox?.y ?? 0;
-	const [labelPos, setLabelPos] = useSetState({
-		x: labelXY?.x ?? labelX,
-		y: labelXY?.y ?? labelY
-	}, isSamePoint);
-	useUpdateEffect$1(() => {
-		if (isControlPointDraggingRef.current || isLabelDraggingRef.current) return;
-		setLabelPos({
-			x: labelX,
-			y: labelY
-		});
-	}, [labelX, labelY]);
-	const svgPathRef = useRef(null);
-	const labelOffsetRef = useRef({
-		x: 0,
-		y: 0
-	});
-	const captureLabelOffset = useCallbackRef(() => {
-		const path = svgPathRef.current;
-		if (data.isLabelCustomized && path && labelBBox) {
-			const center = getEdgeCenter(path);
-			labelOffsetRef.current = {
-				x: labelBBox.x - center.x,
-				y: labelBBox.y - center.y
-			};
-		} else labelOffsetRef.current = {
-			x: 0,
-			y: 0
-		};
-	});
-	useRafEffect(() => {
-		const path = svgPathRef.current;
-		if (!path || !isControlPointDragging) return;
-		const center = getEdgeCenter(path);
-		const offset = labelOffsetRef.current;
-		setLabelPos({
-			x: center.x + offset.x,
-			y: center.y + offset.y
-		});
-	}, [edgePath, isControlPointDragging]);
-	const updateEdgeData = useCallbackRef((controlPoints) => {
-		const center = labelBBox && svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
-		if (center) {
-			const offset = labelOffsetRef.current;
-			diagram.updateEdgeData(id, {
-				controlPoints,
-				labelBBox: {
-					...labelBBox,
-					x: center.x + offset.x,
-					y: center.y + offset.y
-				}
-			});
-		} else diagram.updateEdgeData(id, { controlPoints });
-		diagram.stopEditing(true);
-		setIsControlPointDragging(false);
-	});
-	const onControlPointerStartMove = useCallbackRef(() => {
-		captureLabelOffset();
-		diagram.startEditing("edge");
-		setIsControlPointDragging(true);
-	});
-	const onControlPointerCancelMove = useCallbackRef(() => {
-		diagram.stopEditing();
-		setIsControlPointDragging(false);
-	});
-	const onControlPointerFinishMove = useCallbackRef((points) => {
-		setControlPoints(points);
-		requestAnimationFrame(() => {
-			updateEdgeData(points);
-		});
-	});
-	const onControlPointerDelete = useCallbackRef((points) => {
-		captureLabelOffset();
-		diagram.startEditing("edge");
-		setIsControlPointDragging(true);
-		setControlPoints(points);
-		requestAnimationFrame(() => {
-			updateEdgeData(points);
-		});
-	});
-	/**
-	* Handle pointer down event on the edge to add new control points
-	*/
-	const onEdgePointerDown = useCallbackRef((e) => {
-		if (e.pointerType !== "mouse") return;
-		if (e.button !== 2 && !selected) return;
-		e.stopPropagation();
-		e.preventDefault();
-		diagram.startEditing("edge");
-		const newControlPoints = insertControlPoint(xyflow.screenToFlowPosition({
-			x: e.clientX,
-			y: e.clientY
-		}, { snapToGrid: false }));
-		diagram.updateEdgeData(id, { controlPoints: newControlPoints });
-		diagram.stopEditing(true);
-	});
-	const updateLabelPosition = useCallbackRef((pos) => {
-		if (labelBBox) diagram.updateEdgeData(id, {
-			labelBBox: {
-				...labelBBox,
-				x: pos.x,
-				y: pos.y
-			},
-			isLabelCustomized: true
-		});
-		diagram.stopEditing(true);
-		setIsLabelDragging(false);
-	});
-	/**
-	* Handle pointer down on the edge label to drag it to a custom position.
-	* Mirrors the control-point LMB drag.
-	*/
-	const onLabelPointerDown = useCallbackRef((e) => {
-		if (e.pointerType !== "mouse" || e.button !== 0 || !labelBBox || isControlPointDraggingRef.current) return;
-		const { domNode, edges, addSelectedEdges, unselectNodesAndEdges } = xyflowStore.getState();
-		if (!domNode) return;
-		e.stopPropagation();
-		if (!selected) {
-			unselectNodesAndEdges({ edges: edges.filter((ed) => ed.selected && ed.id !== id) });
-			addSelectedEdges([id]);
-		}
-		let hasMoved = false;
-		const initialPoint = {
-			x: e.clientX,
-			y: e.clientY
-		};
-		const clientPoint = { ...initialPoint };
-		const flowStart = xyflow.screenToFlowPosition(initialPoint, { snapToGrid: false });
-		const grab = {
-			x: flowStart.x - labelBBox.x,
-			y: flowStart.y - labelBBox.y
-		};
-		let pos = {
-			x: labelBBox.x,
-			y: labelBBox.y
-		};
-		let animationFrameId = null;
-		const onPointerMove = (ev) => {
-			clientPoint.x = ev.clientX;
-			clientPoint.y = ev.clientY;
-			if (!isSamePoint(initialPoint, clientPoint)) {
-				if (!hasMoved) {
-					hasMoved = true;
-					diagram.startEditing("edge");
-					setIsLabelDragging(true);
-				}
-				animationFrameId ??= requestAnimationFrame(() => {
-					animationFrameId = null;
-					const { x, y } = xyflow.screenToFlowPosition(clientPoint, { snapToGrid: false });
-					pos = {
-						x: Math.round(x - grab.x),
-						y: Math.round(y - grab.y)
-					};
-					setLabelPos(pos);
-				});
-			}
-			ev.stopPropagation();
-		};
-		const onPointerUp = (ev) => {
-			ev.stopPropagation();
-			domNode.removeEventListener("pointermove", onPointerMove, { capture: true });
-			if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
-			if (hasMoved) {
-				domNode.addEventListener("click", stopAndPrevent, {
-					capture: true,
-					once: true
-				});
-				updateLabelPosition(pos);
-			}
-		};
-		domNode.addEventListener("pointermove", onPointerMove, { capture: true });
-		domNode.addEventListener("pointerup", onPointerUp, {
-			once: true,
-			capture: true
-		});
-	});
-	if (isControlPointDragging && !props.data.hovered) props = {
-		...props,
-		data: {
-			...props.data,
-			hovered: true
-		}
-	};
-	const sequenceStepData = isNumber(props.data.stepnum) ? {
-		isSequenceStep: true,
-		stepNum: props.data.stepnum
-	} : void 0;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(EdgeContainer, {
-		...props,
-		className: css({ "& .react-flow__edge-interaction": { cursor: enabledEditing && selected ? "[copy]" : "inherit" } }),
-		children: [
-			/* @__PURE__ */ jsx(EdgePath, {
-				edgeProps: props,
-				svgPath: edgePath,
-				ref: svgPathRef,
-				isDragging: isControlPointDragging,
-				...enabledEditing && { onEdgePointerDown }
-			}),
-			enableCompareWithLatest && /* @__PURE__ */ jsx(EdgeDrifts, {
-				edgeProps: props,
-				svgPath: edgePath
-			}),
-			labelBBox && /* @__PURE__ */ jsx(EdgeLabelContainer, {
-				edgeProps: props,
-				labelPosition: isControlPointDragging || isLabelDragging ? labelPos : {
-					x: labelX,
-					y: labelY
-				},
-				...enabledEditing && { onPointerDown: onLabelPointerDown },
-				children: /* @__PURE__ */ jsx(EdgeLabel, {
-					pointerEvents: "all",
-					className: enabledEditing ? labelDraggable : void 0,
-					...sequenceStepData,
-					edgeProps: props,
-					children: navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, {
-						ariaLabel: "Navigate to view",
-						onClick: (e) => {
-							e.stopPropagation();
-							diagram.navigateTo(navigateTo);
-						}
-					})
-				})
-			})
-		]
-	}), enabledEditing && controlPoints.length > 0 && /* @__PURE__ */ jsx(ControlPoints, {
-		isControlPointDragging,
-		edgeProps: props,
-		controlPoints,
-		onMove: setControlPoints,
-		onStartMove: onControlPointerStartMove,
-		onCancelMove: onControlPointerCancelMove,
-		onFinishMove: onControlPointerFinishMove,
-		onDelete: onControlPointerDelete
-	})] });
-});
-RelationshipEdge.displayName = "RelationshipEdge";
-function ControlPoints({ isControlPointDragging, edgeProps, controlPoints, onMove, onStartMove, onCancelMove, onFinishMove, onDelete }) {
-	const xyflowStore = useXYStoreApi();
-	const xyflow = useXYFlow();
-	const edgeId = edgeProps.data.id;
-	const controlPointsRef = useRef(controlPoints);
-	controlPointsRef.current = controlPoints;
-	const onLmbControlPointerDown = (index, e, domNode) => {
-		let hasMoved = false;
-		let initialPoint = {
-			x: e.clientX,
-			y: e.clientY
-		};
-		let clientPoint = { ...initialPoint };
-		let animationFrameId = null;
-		let cp = [...controlPointsRef.current];
-		const onPointerMove = (e) => {
-			clientPoint.x = e.clientX;
-			clientPoint.y = e.clientY;
-			if (!isSamePoint(initialPoint, clientPoint)) {
-				if (!hasMoved) {
-					hasMoved = true;
-					onStartMove();
-				}
-				animationFrameId ??= requestAnimationFrame(() => {
-					animationFrameId = null;
-					const { x, y } = xyflow.screenToFlowPosition(clientPoint, { snapToGrid: false });
-					cp = [...cp];
-					cp[index] = {
-						x: Math.trunc(x),
-						y: Math.trunc(y)
-					};
-					onMove(cp);
-				});
-			}
-			e.stopPropagation();
-		};
-		const onPointerUp = (e) => {
-			e.stopPropagation();
-			domNode.removeEventListener("pointermove", onPointerMove, { capture: true });
-			domNode.removeEventListener("click", stopAndPrevent, { capture: true });
-			if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
-			if (hasMoved) onFinishMove(cp);
-			else onCancelMove();
-		};
-		domNode.addEventListener("pointermove", onPointerMove, { capture: true });
-		domNode.addEventListener("pointerup", onPointerUp, {
-			once: true,
-			capture: true
-		});
-		domNode.addEventListener("click", stopAndPrevent, {
-			capture: true,
-			once: true
-		});
-	};
-	const onRmbControlPointerDown = (index, e) => {
-		const newControlPoints = [...controlPointsRef.current];
-		if (newControlPoints.length <= 1 || index >= newControlPoints.length) return;
-		stopAndPrevent(e);
-		newControlPoints.splice(index, 1);
-		setTimeout(() => {
-			onDelete(newControlPoints);
-		}, 10);
-	};
-	const onControlPointerDown = useCallbackRef((e) => {
-		const { domNode, addSelectedEdges, edges, unselectNodesAndEdges } = xyflowStore.getState();
-		if (!domNode || e.pointerType !== "mouse") return;
-		const index = parseFloat(e.currentTarget.getAttribute("data-control-point-index") || "");
-		if (isNaN(index)) throw new Error("data-control-point-index is not a number");
-		switch (e.button) {
-			case 0:
-				e.stopPropagation();
-				unselectNodesAndEdges({ edges: edges.filter((ed) => ed.selected && ed.id !== edgeId) });
-				addSelectedEdges([edgeId]);
-				onLmbControlPointerDown(index, e, domNode);
-				break;
-			case 2: onRmbControlPointerDown(index, e);
-		}
-	});
-	const onControlPointerDblClick = useCallbackRef((e) => {
-		if (e.pointerType !== "mouse") return;
-		const index = parseFloat(e.currentTarget.getAttribute("data-control-point-index") || "");
-		if (isNaN(index)) {
-			console.error(e.currentTarget);
-			throw new Error("data-control-point-index is not a number");
-		}
-		onRmbControlPointerDown(index, e);
-	});
-	return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(EdgeContainer, {
-		component: "svg",
-		className: controlPointsContainer,
-		...edgeProps,
-		children: /* @__PURE__ */ jsx("g", {
-			"data-active": isControlPointDragging ? true : void 0,
-			className: "group",
-			onContextMenu: stopAndPrevent,
-			children: controlPoints.map((p, i) => /* @__PURE__ */ jsx("circle", {
-				"data-control-point-index": i,
-				onPointerDownCapture: onControlPointerDown,
-				onDoubleClick: onControlPointerDblClick,
-				className: cx("nodrag nopan", controlPoint),
-				cx: p.x,
-				cy: p.y
-			}, "controlPoints" + edgeId + "#" + i))
-		})
-	}) });
-}
-var stopAndPrevent = (e) => {
-	e.stopPropagation();
-	e.preventDefault();
-};
-//#endregion
-export { RelationshipEdge };

package/dist/likec4diagram/custom/edges/SequenceStepEdge.d.ts

@@ -1,2 +0,0 @@
-import { Types } from '../../types';
-export declare function SequenceStepEdge(props: Types.EdgeProps<'seq-step'>): import("react").JSX.Element;

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

@@ -1,79 +0,0 @@
-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;
-	}
-	const { state, stepnum } = props.data;
-	return /* @__PURE__ */ jsxs(EdgeContainer, {
-		...props,
-		...state && { "data-seq-edge-state": state },
-		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,
-					isSequenceStep: true,
-					stepNum: stepnum,
-					children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, {
-						ariaLabel: "Navigate to view",
-						onClick: (e) => {
-							e.stopPropagation();
-							diagram.navigateTo(navigateTo);
-						}
-					})
-				})
-			})
-		]
-	});
-}
-//#endregion
-export { SequenceStepEdge };

package/dist/likec4diagram/custom/edges/edges.css.d.ts

@@ -1,3 +0,0 @@
-export declare const controlPointsContainer: string;
-export declare const labelDraggable: string;
-export declare const controlPoint: string;

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

@@ -1,48 +0,0 @@
-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]"
-});
-var labelDraggable = css({
-	cursor: "grab!",
-	_active: { cursor: "grabbing!" }
-});
-var controlPoint = css({
-	fill: `[var(--xy-edge-stroke)]`,
-	stroke: `transparent`,
-	fillOpacity: "0.5",
-	strokeWidth: "[10]",
-	r: "[4]",
-	cursor: "grab",
-	pointerEvents: "all",
-	visibility: "hidden",
-	transitionDuration: "fast",
-	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: "0"
-	},
-	[`:where([data-likec4-selected='true']) &`]: { r: "[6]" },
-	[`:is([data-likec4-hovered='true']) &`]: { r: "[8]" },
-	_hover: {
-		fill: "primary.body.hover",
-		r: "[10]",
-		transitionDuration: "fastest"
-	},
-	_groupActive: { cursor: "grabbing" }
-});
-//#endregion
-export { controlPoint, controlPointsContainer, labelDraggable };

package/dist/likec4diagram/custom/edges/useControlPoints.d.ts

@@ -1,8 +0,0 @@
-import { XYPosition } from '@xyflow/react';
-import { Types } from '../../types';
-import { Dispatch, SetStateAction } from 'react';
-export declare function useControlPoints({ sourceX, sourceY, targetX, targetY, data, }: Types.EdgeProps<'relationship'>): {
-    controlPoints: XYPosition[];
-    setControlPoints: Dispatch<SetStateAction<XYPosition[]>>;
-    insertControlPoint: ({ x, y }: XYPosition) => XYPosition[];
-};

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

@@ -1,54 +0,0 @@
-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.d.ts

@@ -1,10 +0,0 @@
-import { XYPosition } from '@xyflow/react';
-import { Types } from '../../types';
-/**
- * @returns SVG path data string for relationship edge
- */
-export declare function useRelationshipEdgePath({ props: { sourceX, sourceY, source, target, targetX, targetY, data, }, controlPoints, isControlPointDragging, }: {
-    props: Types.EdgeProps<'relationship'>;
-    controlPoints: XYPosition[];
-    isControlPointDragging: boolean;
-}): string;

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

@@ -1,57 +0,0 @@
-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;
-	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));
-}
-//#endregion
-export { useRelationshipEdgePath };

package/dist/likec4diagram/custom/edges/utils.d.ts

@@ -1,10 +0,0 @@
-import { InternalNode, XYPosition, Position } from '@xyflow/react';
-export declare function getPointPosition(node: InternalNode, intersectionPoint: XYPosition): readonly [number, number, Position];
-export declare function getEdgeParams(source: InternalNode, target: InternalNode): {
-    sx: number;
-    sy: number;
-    tx: number;
-    ty: number;
-    sourcePos: Position;
-    targetPos: Position;
-};