@likec4/diagram 1.55.1 → 1.56.0

package/dist/base-primitives/element/ElementShape.js

@@ -1,351 +1,365 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { nonexhaustive } from '@likec4/core';
-import { elementShapeRecipe } from '@likec4/styles/recipes';
-import { roundDpr } from '../../utils/roundDpr.js';
-
-function cylinderSVGPath(diameter, height, tilt = 0.07) {
-  const radius = Math.round(diameter / 2);
-  const rx = radius;
-  const ry = roundDpr(tilt * radius);
-  const tiltAdjustedHeight = height - 2 * ry;
-  const path = `  M ${diameter},${ry}
+import "../../_virtual/_rolldown/runtime.js";
+import { roundDpr } from "../../utils/roundDpr.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { nonexhaustive } from "@likec4/core";
+import { elementShapeRecipe } from "@likec4/styles/recipes";
+//#region src/base-primitives/element/ElementShape.tsx
+function cylinderSVGPath(diameter, height, tilt = .07) {
+	const radius = Math.round(diameter / 2);
+	const rx = radius;
+	const ry = roundDpr(tilt * radius);
+	const tiltAdjustedHeight = height - 2 * ry;
+	return {
+		path: `  M ${diameter},${ry}
         a ${rx},${ry} 0,0,0 ${-diameter} 0
         l 0,${tiltAdjustedHeight}
         a ${rx},${ry} 0,0,0 ${diameter} 0
         l 0,${-tiltAdjustedHeight}
         z
-        `.replace(/\s+/g, " ").trim();
-  return {
-    path,
-    ry,
-    rx
-  };
+        `.replace(/\s+/g, " ").trim(),
+		ry,
+		rx
+	};
 }
 function docSVGPath(width, height) {
-  const waveHeight = height / 8;
-  const baseY = roundDpr(height - waveHeight / 2);
-  const amplitude = roundDpr(height / 6);
-  const radius = 6;
-  const path = `
+	const baseY = roundDpr(height - height / 8 / 2);
+	const amplitude = roundDpr(height / 6);
+	const radius = 6;
+	return { path: `
     M 0 ${baseY}
     V ${radius}
     Q 0 0 ${radius} 0
     H ${width - radius}
     Q ${width} 0 ${width} ${radius}
     V ${baseY}
-    C ${roundDpr(width * 0.75)} ${baseY + amplitude}, ${roundDpr(width * 0.5)} ${baseY - amplitude}, 0 ${baseY}
-  `.replace(/\s+/g, " ").trim();
-  return {
-    path
-  };
+    C ${roundDpr(width * .75)} ${baseY + amplitude}, ${roundDpr(width * .5)} ${baseY - amplitude}, 0 ${baseY}
+  `.replace(/\s+/g, " ").trim() };
 }
 function bucketSVGPath(width, height) {
-  const cx = width / 2;
-  const topRx = roundDpr(cx);
-  const topRy = roundDpr(Math.min(height / 8, topRx * 0.08));
-  const bottomRx = roundDpr(topRx * 0.8);
-  const bottomRy = roundDpr(topRy * 1.05);
-  const topY = topRy;
-  const bottomY = height - bottomRy;
-  const leftBottomX = cx - bottomRx;
-  const path = `
+	const cx = width / 2;
+	const topRx = roundDpr(cx);
+	const topRy = roundDpr(Math.min(height / 8, topRx * .08));
+	const bottomRx = roundDpr(topRx * .8);
+	const bottomRy = roundDpr(topRy * 1.05);
+	const topY = topRy;
+	const bottomY = height - bottomRy;
+	const leftBottomX = cx - bottomRx;
+	return {
+		path: `
     M ${width},${topY}
     a ${topRx},${topRy} 0,0,0 ${-width} 0
     L ${leftBottomX},${bottomY}
     a ${bottomRx},${bottomRy} 0,0,0 ${bottomRx * 2} 0
     Z
-  `.replace(/\s+/g, " ").trim();
-  return {
-    path,
-    topRx,
-    topRy,
-    bottomRx,
-    bottomRy
-  };
+  `.replace(/\s+/g, " ").trim(),
+		topRx,
+		topRy,
+		bottomRx,
+		bottomRy
+	};
 }
-function queueSVGPath(width, height, tilt = 0.185) {
-  const diameter = height;
-  const radius = Math.round(diameter / 2);
-  const ry = radius;
-  const rx = roundDpr(diameter / 2 * tilt);
-  const tiltAdjustedWidth = width - 2 * rx;
-  const path = `
+function queueSVGPath(width, height, tilt = .185) {
+	const diameter = height;
+	const ry = Math.round(diameter / 2);
+	const rx = roundDpr(diameter / 2 * tilt);
+	return {
+		path: `
     M ${rx},0
     a ${rx},${ry} 0,0,0 0 ${diameter}
-    l ${tiltAdjustedWidth},0
+    l ${width - 2 * rx},0
     a ${rx},${ry} 0,0,0 0 ${-diameter}
-    z`.replace(/\s+/g, " ").trim();
-  return {
-    path,
-    ry,
-    rx
-  };
+    z`.replace(/\s+/g, " ").trim(),
+		ry,
+		rx
+	};
 }
-const PersonIcon = {
-  width: 115,
-  height: 120,
-  path: `M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z`
+var PersonIcon = {
+	width: 115,
+	height: 120,
+	path: `M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z`
 };
-const ComponentTopLeftRect = ({ index, size }) => {
-  let width, height, offsetX, offsetY, between;
-  switch (size) {
-    case "xs":
-    case "sm": {
-      width = 40;
-      height = 18;
-      offsetX = -16;
-      offsetY = 16;
-      between = 10;
-      break;
-    }
-    case "md": {
-      width = 60;
-      height = 26;
-      offsetX = -20;
-      offsetY = 22;
-      between = 14;
-      break;
-    }
-    case "lg":
-    case "xl": {
-      width = 70;
-      height = 32;
-      offsetX = -24;
-      offsetY = 32;
-      between = 18;
-      break;
-    }
-    default: {
-      nonexhaustive(size);
-    }
-  }
-  return /* @__PURE__ */ jsx(
-    "rect",
-    {
-      x: offsetX,
-      y: offsetY + (height + between) * index,
-      width,
-      height,
-      rx: 3,
-      className: "top-left-rect",
-      strokeWidth: 2
-    }
-  );
+var ComponentTopLeftRect = ({ index, size }) => {
+	let width;
+	let height;
+	let offsetX;
+	let offsetY;
+	let between;
+	switch (size) {
+		case "xs":
+		case "sm":
+			width = 40;
+			height = 18;
+			offsetX = -16;
+			offsetY = 16;
+			between = 10;
+			break;
+		case "md":
+			width = 60;
+			height = 26;
+			offsetX = -20;
+			offsetY = 22;
+			between = 14;
+			break;
+		case "lg":
+		case "xl":
+			width = 70;
+			height = 32;
+			offsetX = -24;
+			offsetY = 32;
+			between = 18;
+			break;
+		default: nonexhaustive(size);
+	}
+	return /* @__PURE__ */ jsx("rect", {
+		x: offsetX,
+		y: offsetY + (height + between) * index,
+		width,
+		height,
+		rx: 3,
+		className: "top-left-rect",
+		strokeWidth: 2
+	});
 };
 function ShapeSvg({ shape, w, h, size = "md" }) {
-  switch (shape) {
-    case "component": {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: w,
-            height: h,
-            rx: 6,
-            strokeWidth: 0
-          }
-        ),
-        /* @__PURE__ */ jsx(ComponentTopLeftRect, { index: 0, size }),
-        /* @__PURE__ */ jsx(ComponentTopLeftRect, { index: 1, size })
-      ] });
-    }
-    case "mobile": {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: w,
-            height: h,
-            rx: 6,
-            "data-likec4-fill": "mix-stroke",
-            strokeWidth: 0
-          }
-        ),
-        /* @__PURE__ */ jsxs("g", { "data-likec4-fill": "fill", strokeWidth: 0, children: [
-          /* @__PURE__ */ jsx("circle", { cx: 17, cy: h / 2, r: 12 }),
-          /* @__PURE__ */ jsx("rect", { x: 33, y: 12, width: w - 44, height: h - 24, rx: 5 })
-        ] })
-      ] });
-    }
-    case "document": {
-      const { path } = docSVGPath(w, h);
-      return /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: path,
-          "data-likec4-fill": "fill",
-          strokeWidth: 2
-        }
-      );
-    }
-    case "browser": {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: w,
-            height: h,
-            rx: 6,
-            "data-likec4-fill": "mix-stroke",
-            strokeWidth: 0
-          }
-        ),
-        /* @__PURE__ */ jsxs("g", { "data-likec4-fill": "fill", strokeWidth: 0, children: [
-          /* @__PURE__ */ jsx("circle", { cx: 16, cy: 17, r: 7 }),
-          /* @__PURE__ */ jsx("circle", { cx: 36, cy: 17, r: 7 }),
-          /* @__PURE__ */ jsx("circle", { cx: 56, cy: 17, r: 7 }),
-          /* @__PURE__ */ jsx("rect", { x: 70, y: 8, width: w - 80, height: 17, rx: 4 }),
-          /* @__PURE__ */ jsx("rect", { x: 10, y: 32, width: w - 20, height: h - 42, rx: 4 })
-        ] })
-      ] });
-    }
-    case "person": {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: w,
-            height: h,
-            rx: 6,
-            strokeWidth: 0
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            x: w - PersonIcon.width - 6,
-            y: h - PersonIcon.height,
-            width: PersonIcon.width,
-            height: PersonIcon.height,
-            viewBox: `0 0 ${PersonIcon.width} ${PersonIcon.height}`,
-            "data-likec4-fill": "mix-stroke",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeWidth: 0,
-                d: PersonIcon.path
-              }
-            )
-          }
-        )
-      ] });
-    }
-    case "queue": {
-      const { path, rx, ry } = queueSVGPath(w, h);
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry: ry - 0.75, rx, "data-likec4-fill": "mix-stroke", strokeWidth: 2 })
-      ] });
-    }
-    case "bucket": {
-      const { path, topRx, topRy } = bucketSVGPath(w, h);
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
-        /* @__PURE__ */ jsx(
-          "ellipse",
-          {
-            cx: w / 2,
-            cy: topRy,
-            rx: topRx,
-            ry: topRy,
-            "data-likec4-fill": "mix-stroke",
-            strokeWidth: 2
-          }
-        )
-      ] });
-    }
-    case "storage":
-    case "cylinder": {
-      const { path, rx, ry } = cylinderSVGPath(w, h);
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
-        /* @__PURE__ */ jsx(
-          "ellipse",
-          {
-            cx: rx,
-            cy: ry,
-            ry,
-            rx: rx - 0.75,
-            "data-likec4-fill": "mix-stroke",
-            strokeWidth: 2
-          }
-        )
-      ] });
-    }
-    default: {
-      return nonexhaustive(shape);
-    }
-  }
+	switch (shape) {
+		case "component": return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("rect", {
+				width: w,
+				height: h,
+				rx: 6,
+				strokeWidth: 0
+			}),
+			/* @__PURE__ */ jsx(ComponentTopLeftRect, {
+				index: 0,
+				size
+			}),
+			/* @__PURE__ */ jsx(ComponentTopLeftRect, {
+				index: 1,
+				size
+			})
+		] });
+		case "mobile": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			width: w,
+			height: h,
+			rx: 6,
+			"data-likec4-fill": "mix-stroke",
+			strokeWidth: 0
+		}), /* @__PURE__ */ jsxs("g", {
+			"data-likec4-fill": "fill",
+			strokeWidth: 0,
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: 17,
+				cy: h / 2,
+				r: 12
+			}), /* @__PURE__ */ jsx("rect", {
+				x: 33,
+				y: 12,
+				width: w - 44,
+				height: h - 24,
+				rx: 5
+			})]
+		})] });
+		case "document": {
+			const { path } = docSVGPath(w, h);
+			return /* @__PURE__ */ jsx("path", {
+				d: path,
+				"data-likec4-fill": "fill",
+				strokeWidth: 2
+			});
+		}
+		case "browser": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			width: w,
+			height: h,
+			rx: 6,
+			"data-likec4-fill": "mix-stroke",
+			strokeWidth: 0
+		}), /* @__PURE__ */ jsxs("g", {
+			"data-likec4-fill": "fill",
+			strokeWidth: 0,
+			children: [
+				/* @__PURE__ */ jsx("circle", {
+					cx: 16,
+					cy: 17,
+					r: 7
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: 36,
+					cy: 17,
+					r: 7
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: 56,
+					cy: 17,
+					r: 7
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: 70,
+					y: 8,
+					width: w - 80,
+					height: 17,
+					rx: 4
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: 10,
+					y: 32,
+					width: w - 20,
+					height: h - 42,
+					rx: 4
+				})
+			]
+		})] });
+		case "person": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			width: w,
+			height: h,
+			rx: 6,
+			strokeWidth: 0
+		}), /* @__PURE__ */ jsx("svg", {
+			x: w - PersonIcon.width - 6,
+			y: h - PersonIcon.height,
+			width: PersonIcon.width,
+			height: PersonIcon.height,
+			viewBox: `0 0 ${PersonIcon.width} ${PersonIcon.height}`,
+			"data-likec4-fill": "mix-stroke",
+			children: /* @__PURE__ */ jsx("path", {
+				strokeWidth: 0,
+				d: PersonIcon.path
+			})
+		})] });
+		case "queue": {
+			const { path, rx, ry } = queueSVGPath(w, h);
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", {
+				d: path,
+				strokeWidth: 2
+			}), /* @__PURE__ */ jsx("ellipse", {
+				cx: rx,
+				cy: ry,
+				ry: ry - .75,
+				rx,
+				"data-likec4-fill": "mix-stroke",
+				strokeWidth: 2
+			})] });
+		}
+		case "bucket": {
+			const { path, topRx, topRy } = bucketSVGPath(w, h);
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", {
+				d: path,
+				strokeWidth: 2
+			}), /* @__PURE__ */ jsx("ellipse", {
+				cx: w / 2,
+				cy: topRy,
+				rx: topRx,
+				ry: topRy,
+				"data-likec4-fill": "mix-stroke",
+				strokeWidth: 2
+			})] });
+		}
+		case "storage":
+		case "cylinder": {
+			const { path, rx, ry } = cylinderSVGPath(w, h);
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", {
+				d: path,
+				strokeWidth: 2
+			}), /* @__PURE__ */ jsx("ellipse", {
+				cx: rx,
+				cy: ry,
+				ry,
+				rx: rx - .75,
+				"data-likec4-fill": "mix-stroke",
+				strokeWidth: 2
+			})] });
+		}
+		default: return nonexhaustive(shape);
+	}
 }
+/**
+* When element is selected, this component is used to render the indicator
+*/
 function ShapeSvgOutline({ shape, w, h }) {
-  let svg;
-  switch (shape) {
-    case "bucket":
-      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: bucketSVGPath(w + 6, h + 6).path }) });
-      break;
-    case "queue":
-      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: queueSVGPath(w + 6, h + 6).path }) });
-      break;
-    case "document":
-      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: docSVGPath(w + 6, h + 6).path }) });
-      break;
-    case "storage":
-    case "cylinder": {
-      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w + 6, h + 6).path }) });
-      break;
-    }
-    default: {
-      svg = /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x: -3,
-          y: -3,
-          width: w + 6,
-          height: h + 6,
-          rx: 8
-        }
-      );
-      break;
-    }
-  }
-  return /* @__PURE__ */ jsx("g", { className: "likec4-shape-outline", children: svg });
+	let svg;
+	switch (shape) {
+		case "bucket":
+			svg = /* @__PURE__ */ jsx("g", {
+				transform: "translate(-3 -3)",
+				children: /* @__PURE__ */ jsx("path", { d: bucketSVGPath(w + 6, h + 6).path })
+			});
+			break;
+		case "queue":
+			svg = /* @__PURE__ */ jsx("g", {
+				transform: "translate(-3 -3)",
+				children: /* @__PURE__ */ jsx("path", { d: queueSVGPath(w + 6, h + 6).path })
+			});
+			break;
+		case "document":
+			svg = /* @__PURE__ */ jsx("g", {
+				transform: "translate(-3 -3)",
+				children: /* @__PURE__ */ jsx("path", { d: docSVGPath(w + 6, h + 6).path })
+			});
+			break;
+		case "storage":
+		case "cylinder":
+			svg = /* @__PURE__ */ jsx("g", {
+				transform: "translate(-3 -3)",
+				children: /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w + 6, h + 6).path })
+			});
+			break;
+		default:
+			svg = /* @__PURE__ */ jsx("rect", {
+				x: -3,
+				y: -3,
+				width: w + 6,
+				height: h + 6,
+				rx: 8
+			});
+			break;
+	}
+	return /* @__PURE__ */ jsx("g", {
+		className: "likec4-shape-outline",
+		children: svg
+	});
 }
 function ElementShape({ data, width, height, showSelectionOutline = true }) {
-  let w = !!width && width > 10 ? width : data.width;
-  let h = !!height && height > 10 ? height : data.height;
-  const isMultiple = data.style?.multiple ?? false;
-  const borderStyle = data.style?.border ?? "none";
-  const withBorder = borderStyle !== "none";
-  if (data.shape === "rectangle") {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          borderStyle
-        },
-        className: elementShapeRecipe({
-          shapetype: "html",
-          withBorder,
-          withOutline: showSelectionOutline
-        }),
-        children: [
-          isMultiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }),
-          /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })
-        ]
-      }
-    );
-  }
-  const className = elementShapeRecipe({
-    shapetype: "svg",
-    withOutline: showSelectionOutline
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isMultiple && /* @__PURE__ */ jsx("svg", { className, "data-likec4-shape-multiple": "true", viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, size: data.style?.size, w, h }) }),
-    /* @__PURE__ */ jsxs("svg", { className, viewBox: `0 0 ${w} ${h}`, children: [
-      /* @__PURE__ */ jsx(ShapeSvgOutline, { shape: data.shape, w, h }),
-      /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, size: data.style?.size, w, h })
-    ] })
-  ] });
+	let w = !!width && width > 10 ? width : data.width;
+	let h = !!height && height > 10 ? height : data.height;
+	const isMultiple = data.style?.multiple ?? false;
+	const borderStyle = data.style?.border ?? "none";
+	const withBorder = borderStyle !== "none";
+	if (data.shape === "rectangle") return /* @__PURE__ */ jsxs("div", {
+		style: { borderStyle },
+		className: elementShapeRecipe({
+			shapetype: "html",
+			withBorder,
+			withOutline: showSelectionOutline
+		}),
+		children: [isMultiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }), /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })]
+	});
+	const className = elementShapeRecipe({
+		shapetype: "svg",
+		withOutline: showSelectionOutline
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [isMultiple && /* @__PURE__ */ jsx("svg", {
+		className,
+		"data-likec4-shape-multiple": "true",
+		viewBox: `0 0 ${w} ${h}`,
+		children: /* @__PURE__ */ jsx(ShapeSvg, {
+			shape: data.shape,
+			size: data.style?.size,
+			w,
+			h
+		})
+	}), /* @__PURE__ */ jsxs("svg", {
+		className,
+		viewBox: `0 0 ${w} ${h}`,
+		children: [/* @__PURE__ */ jsx(ShapeSvgOutline, {
+			shape: data.shape,
+			w,
+			h
+		}), /* @__PURE__ */ jsx(ShapeSvg, {
+			shape: data.shape,
+			size: data.style?.size,
+			w,
+			h
+		})]
+	})] });
 }
-
+//#endregion
 export { ElementShape };