@likec4/diagram 1.55.1 → 1.56.0

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

@@ -1,378 +1,281 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { css, cx } from '@likec4/styles/css';
-import { useRafEffect } from '@react-hookz/web';
-import { EdgeLabelRenderer } from '@xyflow/react';
-import { useState, useRef } from 'react';
-import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
-import '@xstate/react';
-import 'fast-equals';
-import { useDiagram } from '../../../hooks/safeContext.js';
-import { useSetState } from '../../../hooks/useSetState.js';
-import { useUpdateEffect } from '../../../hooks/useUpdateEffect.js';
-import { useXYFlow, useXYStoreApi } from '../../../hooks/useXYFlow.js';
-import { isSamePoint } from '../../../utils/xyflow.js';
-import { EdgeDrifts } from './EdgeDrifts.js';
-import { controlPointsContainer, controlPoint } from './edges.css.js';
-import { useControlPoints } from './useControlPoints.js';
-import { useRelationshipEdgePath } from './useRelationshipEdgePath.js';
-import { memoEdge } from '../../../base-primitives/memoEdge.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 getEdgeCenter = (path) => {
-  const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5);
-  return {
-    x: Math.round(dompoint.x),
-    y: Math.round(dompoint.y)
-  };
+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 } 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";
+//#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)
+	};
 };
-const RelationshipEdge = memoEdge((props) => {
-  const [isControlPointDragging, setIsControlPointDragging] = useState(false);
-  const isControlPointDraggingRef = useRef(isControlPointDragging);
-  isControlPointDraggingRef.current = isControlPointDragging;
-  const xyflow = useXYFlow();
-  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, labelY = labelBBox?.y ?? 0;
-  const [labelPos, setLabelPos] = useSetState({
-    x: labelXY?.x ?? labelX,
-    y: labelXY?.y ?? labelY
-  }, isSamePoint);
-  useUpdateEffect(() => {
-    if (isControlPointDraggingRef.current) {
-      return;
-    }
-    setLabelPos({
-      x: labelX,
-      y: labelY
-    });
-  }, [labelX, labelY]);
-  const svgPathRef = useRef(null);
-  useRafEffect(() => {
-    const path = svgPathRef.current;
-    if (!path || !isControlPointDragging) return;
-    setLabelPos(getEdgeCenter(path));
-  }, [edgePath, isControlPointDragging]);
-  const updateEdgeData = useCallbackRef((controlPoints2) => {
-    const point = labelBBox && svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
-    if (point) {
-      diagram.updateEdgeData(id, {
-        controlPoints: controlPoints2,
-        labelBBox: {
-          ...labelBBox,
-          ...point
-        }
-      });
-    } else {
-      diagram.updateEdgeData(id, { controlPoints: controlPoints2 });
-    }
-    diagram.stopEditing(true);
-    setIsControlPointDragging(false);
-  });
-  const onControlPointerStartMove = useCallbackRef(() => {
-    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) => {
-    diagram.startEditing("edge");
-    setIsControlPointDragging(true);
-    setControlPoints(points);
-    requestAnimationFrame(() => {
-      updateEdgeData(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);
-  });
-  if (isControlPointDragging && !props.data.hovered) {
-    props = {
-      ...props,
-      data: {
-        ...props.data,
-        hovered: true
-      }
-    };
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      EdgeContainer,
-      {
-        ...props,
-        className: css({
-          "& .react-flow__edge-interaction": {
-            cursor: enabledEditing && selected ? "copy" : void 0
-          }
-        }),
-        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 ? labelPos : { x: labelX, y: labelY },
-              children: /* @__PURE__ */ jsx(
-                EdgeLabel,
-                {
-                  pointerEvents: enabledEditing ? "none" : "all",
-                  edgeProps: props,
-                  children: navigateTo && /* @__PURE__ */ jsx(
-                    EdgeActionButton,
-                    {
-                      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
-      }
-    )
-  ] });
+var RelationshipEdge = memoEdge((props) => {
+	const [isControlPointDragging, setIsControlPointDragging] = useState(false);
+	const isControlPointDraggingRef = useRef(isControlPointDragging);
+	isControlPointDraggingRef.current = isControlPointDragging;
+	const xyflow = useXYFlow();
+	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) return;
+		setLabelPos({
+			x: labelX,
+			y: labelY
+		});
+	}, [labelX, labelY]);
+	const svgPathRef = useRef(null);
+	useRafEffect(() => {
+		const path = svgPathRef.current;
+		if (!path || !isControlPointDragging) return;
+		setLabelPos(getEdgeCenter(path));
+	}, [edgePath, isControlPointDragging]);
+	const updateEdgeData = useCallbackRef((controlPoints) => {
+		const point = labelBBox && svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
+		if (point) diagram.updateEdgeData(id, {
+			controlPoints,
+			labelBBox: {
+				...labelBBox,
+				...point
+			}
+		});
+		else diagram.updateEdgeData(id, { controlPoints });
+		diagram.stopEditing(true);
+		setIsControlPointDragging(false);
+	});
+	const onControlPointerStartMove = useCallbackRef(() => {
+		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) => {
+		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);
+	});
+	if (isControlPointDragging && !props.data.hovered) props = {
+		...props,
+		data: {
+			...props.data,
+			hovered: true
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(EdgeContainer, {
+		...props,
+		className: css({ "& .react-flow__edge-interaction": { cursor: enabledEditing && selected ? "copy" : void 0 } }),
+		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 ? labelPos : {
+					x: labelX,
+					y: labelY
+				},
+				children: /* @__PURE__ */ jsx(EdgeLabel, {
+					pointerEvents: enabledEditing ? "none" : "all",
+					edgeProps: props,
+					children: navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, { 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 = (e2) => {
-      clientPoint.x = e2.clientX;
-      clientPoint.y = e2.clientY;
-      const isDragging = !isSamePoint(initialPoint, clientPoint);
-      if (isDragging) {
-        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);
-        });
-      }
-      e2.stopPropagation();
-    };
-    const onPointerUp = (e2) => {
-      e2.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);
-        break;
-    }
-  });
-  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
-          ))
-        }
-      )
-    }
-  ) });
+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);
+				break;
+		}
+	});
+	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))
+		})
+	}) });
 }
-const stopAndPrevent = (e) => {
-  e.stopPropagation();
-  e.preventDefault();
+var stopAndPrevent = (e) => {
+	e.stopPropagation();
+	e.preventDefault();
 };
-
+//#endregion
 export { RelationshipEdge };