@likec4/diagram 1.55.1 → 1.56.0

package/dist/base-primitives/edge/EdgeMarkers.js

@@ -1,219 +1,161 @@
-import { jsx } from 'react/jsx-runtime';
-import { nonexhaustive } from '@likec4/core';
-
-const Open = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "-4 -4 14 16",
-    refX: 5,
-    refY: 4,
-    markerWidth: "7",
-    markerHeight: "8",
-    preserveAspectRatio: "xMaxYMid meet",
-    orient: "auto-start-reverse",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M0,0 L7,4 L0,8 L4,4 Z",
-        stroke: "context-stroke",
-        fill: "context-stroke",
-        strokeDasharray: 0,
-        strokeWidth: 1,
-        strokeLinecap: "round"
-      }
-    )
-  }
-);
-const Arrow = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "-1 -1 12 10",
-    refX: 4,
-    refY: 3,
-    markerWidth: "8",
-    markerHeight: "6",
-    preserveAspectRatio: "xMaxYMid meet",
-    orient: "auto-start-reverse",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
-        fill: "context-stroke",
-        strokeWidth: 0
-      }
-    )
-  }
-);
-const Crow = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "-1 -1 12 12",
-    refX: 8,
-    refY: 4,
-    markerWidth: "8",
-    markerHeight: "8",
-    preserveAspectRatio: "xMaxYMid meet",
-    orient: "auto-start-reverse",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M 8 0 L 0 4 L 8 8 M 8 4 L 0 4",
-        fill: "none",
-        strokeWidth: 1
-      }
-    )
-  }
-);
-const OArrow = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "-1 -1 12 10",
-    refX: 4,
-    refY: 3,
-    markerWidth: "8",
-    markerHeight: "6",
-    preserveAspectRatio: "xMaxYMid meet",
-    orient: "auto-start-reverse",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
-        stroke: "context-stroke",
-        fill: "var(--likec4-background-color)",
-        strokeWidth: 1.25,
-        strokeLinejoin: "miter",
-        strokeLinecap: "square"
-      }
-    )
-  }
-);
-const Diamond = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "-4 -4 16 14",
-    refX: 5,
-    refY: 4,
-    markerWidth: "10",
-    markerHeight: "8",
-    preserveAspectRatio: "xMaxYMid meet",
-    orient: "auto-start-reverse",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M5,0 L10,4 L5,8 L0,4 Z",
-        fill: "context-stroke",
-        strokeWidth: 0,
-        strokeLinecap: "round"
-      }
-    )
-  }
-);
-const ODiamond = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "-4 -4 16 14",
-    refX: 6,
-    refY: 4,
-    markerWidth: "10",
-    markerHeight: "8",
-    preserveAspectRatio: "xMaxYMid meet",
-    orient: "auto-start-reverse",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M5,0 L10,4 L5,8 L0,4 Z",
-        stroke: "context-stroke",
-        fill: "var(--likec4-background-color)",
-        strokeWidth: 1.25,
-        strokeLinecap: "round"
-      }
-    )
-  }
-);
-const Dot = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "0 0 10 10",
-    refX: 4,
-    refY: 4,
-    markerWidth: "6",
-    markerHeight: "6",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "circle",
-      {
-        strokeWidth: 0,
-        fill: "context-stroke",
-        cx: 4,
-        cy: 4,
-        r: 3
-      }
-    )
-  }
-);
-const ODot = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "0 0 10 10",
-    refX: 4,
-    refY: 4,
-    markerWidth: "6",
-    markerHeight: "6",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "circle",
-      {
-        strokeWidth: 1.25,
-        stroke: "context-stroke",
-        fill: "var(--likec4-background-color)",
-        cx: 4,
-        cy: 4,
-        r: 3
-      }
-    )
-  }
-);
-const EdgeMarkers = {
-  Arrow,
-  Crow,
-  OArrow,
-  Open,
-  Diamond,
-  ODiamond,
-  Dot,
-  ODot
+import "../../_virtual/_rolldown/runtime.js";
+import { jsx } from "react/jsx-runtime";
+import { nonexhaustive } from "@likec4/core";
+//#region src/base-primitives/edge/EdgeMarkers.tsx
+var Open = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "-4 -4 14 16",
+	refX: 5,
+	refY: 4,
+	markerWidth: "7",
+	markerHeight: "8",
+	preserveAspectRatio: "xMaxYMid meet",
+	orient: "auto-start-reverse",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M0,0 L7,4 L0,8 L4,4 Z",
+		stroke: "context-stroke",
+		fill: "context-stroke",
+		strokeDasharray: 0,
+		strokeWidth: 1,
+		strokeLinecap: "round"
+	})
+});
+var Arrow = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "-1 -1 12 10",
+	refX: 4,
+	refY: 3,
+	markerWidth: "8",
+	markerHeight: "6",
+	preserveAspectRatio: "xMaxYMid meet",
+	orient: "auto-start-reverse",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
+		fill: "context-stroke",
+		strokeWidth: 0
+	})
+});
+var Crow = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "-1 -1 12 12",
+	refX: 8,
+	refY: 4,
+	markerWidth: "8",
+	markerHeight: "8",
+	preserveAspectRatio: "xMaxYMid meet",
+	orient: "auto-start-reverse",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M 8 0 L 0 4 L 8 8 M 8 4 L 0 4",
+		fill: "none",
+		strokeWidth: 1
+	})
+});
+var OArrow = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "-1 -1 12 10",
+	refX: 4,
+	refY: 3,
+	markerWidth: "8",
+	markerHeight: "6",
+	preserveAspectRatio: "xMaxYMid meet",
+	orient: "auto-start-reverse",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
+		stroke: "context-stroke",
+		fill: "var(--likec4-background-color)",
+		strokeWidth: 1.25,
+		strokeLinejoin: "miter",
+		strokeLinecap: "square"
+	})
+});
+var Diamond = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "-4 -4 16 14",
+	refX: 5,
+	refY: 4,
+	markerWidth: "10",
+	markerHeight: "8",
+	preserveAspectRatio: "xMaxYMid meet",
+	orient: "auto-start-reverse",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M5,0 L10,4 L5,8 L0,4 Z",
+		fill: "context-stroke",
+		strokeWidth: 0,
+		strokeLinecap: "round"
+	})
+});
+var ODiamond = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "-4 -4 16 14",
+	refX: 6,
+	refY: 4,
+	markerWidth: "10",
+	markerHeight: "8",
+	preserveAspectRatio: "xMaxYMid meet",
+	orient: "auto-start-reverse",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M5,0 L10,4 L5,8 L0,4 Z",
+		stroke: "context-stroke",
+		fill: "var(--likec4-background-color)",
+		strokeWidth: 1.25,
+		strokeLinecap: "round"
+	})
+});
+var Dot = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "0 0 10 10",
+	refX: 4,
+	refY: 4,
+	markerWidth: "6",
+	markerHeight: "6",
+	...props,
+	children: /* @__PURE__ */ jsx("circle", {
+		strokeWidth: 0,
+		fill: "context-stroke",
+		cx: 4,
+		cy: 4,
+		r: 3
+	})
+});
+var ODot = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "0 0 10 10",
+	refX: 4,
+	refY: 4,
+	markerWidth: "6",
+	markerHeight: "6",
+	...props,
+	children: /* @__PURE__ */ jsx("circle", {
+		strokeWidth: 1.25,
+		stroke: "context-stroke",
+		fill: "var(--likec4-background-color)",
+		cx: 4,
+		cy: 4,
+		r: 3
+	})
+});
+var EdgeMarkers = {
+	Arrow,
+	Crow,
+	OArrow,
+	Open,
+	Diamond,
+	ODiamond,
+	Dot,
+	ODot
 };
 function arrowTypeToMarker(arrowType) {
-  if (!arrowType || arrowType === "none") {
-    return void 0;
-  }
-  switch (arrowType) {
-    case "normal":
-      return "Arrow";
-    case "crow":
-      return "Crow";
-    case "onormal":
-      return "OArrow";
-    case "diamond":
-      return "Diamond";
-    case "odiamond":
-      return "ODiamond";
-    case "open":
-    case "vee":
-      return "Open";
-    case "dot":
-      return "Dot";
-    case "odot":
-      return `ODot`;
-    default:
-      nonexhaustive(arrowType);
-  }
+	if (!arrowType || arrowType === "none") return;
+	switch (arrowType) {
+		case "normal": return "Arrow";
+		case "crow": return "Crow";
+		case "onormal": return "OArrow";
+		case "diamond": return "Diamond";
+		case "odiamond": return "ODiamond";
+		case "open":
+		case "vee": return "Open";
+		case "dot": return "Dot";
+		case "odot": return `ODot`;
+		default: nonexhaustive(arrowType);
+	}
 }
-
+//#endregion
 export { EdgeMarkers, arrowTypeToMarker };

package/dist/base-primitives/edge/EdgePath.js

@@ -1,118 +1,65 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
-import { edgePath } from '@likec4/styles/recipes';
-import { forwardRef } from 'react';
-import { arrowTypeToMarker, EdgeMarkers } from './EdgeMarkers.js';
-
-const EdgePath = forwardRef(({
-  edgeProps: {
-    id,
-    data: {
-      line,
-      dir,
-      tail,
-      head
-    },
-    selectable = true,
-    style,
-    interactionWidth
-  },
-  isDragging = false,
-  // omit
-  onEdgePointerDown,
-  strokeWidth,
-  svgPath
-}, svgPathRef) => {
-  let markerStartName = arrowTypeToMarker(tail);
-  let markerEndName = arrowTypeToMarker(head ?? "normal");
-  if (dir === "back") {
-    [markerStartName, markerEndName] = [markerEndName, markerStartName];
-  }
-  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null;
-  const MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null;
-  const isDotted = line === "dotted";
-  const isDashed = isDotted || line === "dashed";
-  let strokeDasharray;
-  if (isDotted) {
-    strokeDasharray = "1,8";
-  } else if (isDashed) {
-    strokeDasharray = "8,10";
-  }
-  const classes = edgePath();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    selectable && /* @__PURE__ */ jsx(
-      "path",
-      {
-        className: cx(
-          "react-flow__edge-interaction",
-          css({
-            fill: "none"
-          })
-        ),
-        onPointerDown: onEdgePointerDown,
-        d: svgPath,
-        style: {
-          strokeWidth: interactionWidth ?? 10,
-          stroke: "currentcolor",
-          strokeOpacity: 0,
-          ...isDragging ? { display: "none" } : {}
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "circle",
-      {
-        className: cx(
-          // This class is queried by RelationshipPopover to position in the middle of the edge
-          "likec4-edge-middle-point",
-          classes.middlePoint
-        ),
-        "data-edge-id": id,
-        style: {
-          offsetPath: `path("${svgPath}")`
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs("g", { className: classes.markersCtx, onPointerDown: onEdgePointerDown, children: [
-      /* @__PURE__ */ jsxs("defs", { children: [
-        MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id }),
-        MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id })
-      ] }),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          className: cx(
-            "react-flow__edge-path",
-            "hide-on-reduced-graphics",
-            classes.pathBg,
-            isDragging && css({ display: "none" })
-          ),
-          d: svgPath,
-          style,
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          ref: svgPathRef,
-          className: cx(
-            "react-flow__edge-path",
-            classes.path,
-            selectable && "react-flow__edge-interaction"
-          ),
-          d: svgPath,
-          style,
-          strokeWidth,
-          strokeLinecap: "round",
-          strokeDasharray,
-          markerStart: MarkerStart ? `url(#start${id})` : void 0,
-          markerEnd: MarkerEnd ? `url(#end${id})` : void 0
-        }
-      )
-    ] })
-  ] });
+import "../../_virtual/_rolldown/runtime.js";
+import { EdgeMarkers, arrowTypeToMarker } from "./EdgeMarkers.js";
+import { css, cx } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { edgePath } from "@likec4/styles/recipes";
+//#region src/base-primitives/edge/EdgePath.tsx
+var EdgePath = forwardRef(({ edgeProps: { id, data: { line, dir, tail, head }, selectable = true, style, interactionWidth }, isDragging = false, onEdgePointerDown, strokeWidth, svgPath }, svgPathRef) => {
+	let markerStartName = arrowTypeToMarker(tail);
+	let markerEndName = arrowTypeToMarker(head ?? "normal");
+	if (dir === "back") [markerStartName, markerEndName] = [markerEndName, markerStartName];
+	const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null;
+	const MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null;
+	const isDotted = line === "dotted";
+	const isDashed = isDotted || line === "dashed";
+	let strokeDasharray;
+	if (isDotted) strokeDasharray = "1,8";
+	else if (isDashed) strokeDasharray = "8,10";
+	const classes = edgePath();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		selectable && /* @__PURE__ */ jsx("path", {
+			className: cx("react-flow__edge-interaction", css({ fill: "none" })),
+			onPointerDown: onEdgePointerDown,
+			d: svgPath,
+			style: {
+				strokeWidth: interactionWidth ?? 10,
+				stroke: "currentcolor",
+				strokeOpacity: 0,
+				...isDragging ? { display: "none" } : {}
+			}
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			className: cx("likec4-edge-middle-point", classes.middlePoint),
+			"data-edge-id": id,
+			style: { offsetPath: `path("${svgPath}")` }
+		}),
+		/* @__PURE__ */ jsxs("g", {
+			className: classes.markersCtx,
+			onPointerDown: onEdgePointerDown,
+			children: [
+				/* @__PURE__ */ jsxs("defs", { children: [MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id }), MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id })] }),
+				/* @__PURE__ */ jsx("path", {
+					className: cx("react-flow__edge-path", "hide-on-reduced-graphics", classes.pathBg, isDragging && css({ display: "none" })),
+					d: svgPath,
+					style,
+					strokeLinecap: "round"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					ref: svgPathRef,
+					className: cx("react-flow__edge-path", classes.path, selectable && "react-flow__edge-interaction"),
+					d: svgPath,
+					style,
+					strokeWidth,
+					strokeLinecap: "round",
+					strokeDasharray,
+					markerStart: MarkerStart ? `url(#start${id})` : void 0,
+					markerEnd: MarkerEnd ? `url(#end${id})` : void 0
+				})
+			]
+		})
+	] });
 });
 EdgePath.displayName = "EdgePath";
-
+//#endregion
 export { EdgePath };