@likec4/diagram 1.18.0 → 1.19.0

package/dist/xyflow/nodes/element/ElementShapeSvg.js

@@ -0,0 +1,175 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { nonexhaustive } from "@likec4/core";
+import { toDomPrecision } from "../../utils.js";
+import { fillMixStroke, fillElementFill } from "./element.css.js";
+function cylinderSVGPath(diameter, height, tilt = 0.065) {
+  const radius = Math.round(diameter / 2);
+  const rx = radius;
+  const ry = toDomPrecision(tilt * radius);
+  const tiltAdjustedHeight = height - 2 * ry;
+  const 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
+  };
+}
+function queueSVGPath(width, height, tilt = 0.185) {
+  const diameter = height;
+  const radius = Math.round(diameter / 2);
+  const ry = radius;
+  const rx = toDomPrecision(diameter / 2 * tilt);
+  const tiltAdjustedWidth = width - 2 * rx;
+  const path = `
+    M ${rx},0
+    a ${rx},${ry} 0,0,0 0 ${diameter}
+    l ${tiltAdjustedWidth},0
+    a ${rx},${ry} 0,0,0 0 ${-diameter}
+    z`.replace(/\s+/g, " ").trim();
+  return {
+    path,
+    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`
+};
+function ElementShapeSvg({ shape, w, h }) {
+  switch (shape) {
+    case "mobile": {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: w,
+            height: h,
+            rx: 6,
+            className: fillMixStroke,
+            strokeWidth: 0
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { className: fillElementFill, 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 "browser": {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: w,
+            height: h,
+            rx: 6,
+            className: fillMixStroke,
+            strokeWidth: 0
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { className: fillElementFill, 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}`,
+            className: fillMixStroke,
+            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, className: fillMixStroke, 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, className: fillMixStroke, strokeWidth: 2 })
+      ] });
+    }
+    case "rectangle": {
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          width: w,
+          height: h,
+          rx: 6,
+          strokeWidth: 0
+        }
+      );
+    }
+    default: {
+      return nonexhaustive(shape);
+    }
+  }
+}
+function SelectedIndicator({ shape, w, h }) {
+  switch (shape) {
+    case "queue":
+      return /* @__PURE__ */ jsx("path", { d: queueSVGPath(w, h).path });
+    case "storage":
+    case "cylinder": {
+      return /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w, h).path });
+    }
+    default: {
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: -1,
+          y: -1,
+          width: w + 2,
+          height: h + 2,
+          rx: 6
+        }
+      );
+    }
+  }
+}
+export {
+  ElementShapeSvg,
+  SelectedIndicator,
+  cylinderSVGPath
+};

package/dist/xyflow/nodes/element/element.css.d.ts

@@ -0,0 +1,18 @@
+export declare const stokeFillMix: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const container: string;
+export declare const handleCenter: string;
+export declare const containerAnimated: string;
+export declare const indicator: string;
+export declare const fillElementFill: string;
+export declare const fillElementStroke: string;
+export declare const fillMixStroke: string;
+export declare const hasIcon: string;
+export declare const title: string;
+export declare const description: string;
+export declare const technology: string;
+export declare const elementDataContainer: string;
+export declare const elementTextData: string;
+export declare const elementIcon: string;
+export declare const shapeSvgMultiple: string;
+export declare const shapeSvg: string;
+export declare const bottomButtonsContainer: string;

package/dist/xyflow/nodes/element/element.css.js

@@ -0,0 +1,31 @@
+/* empty css                           */
+var container = "_1b6tkn1";
+var handleCenter = "_1b6tkn2";
+var containerAnimated = "_1b6tkn3";
+var indicator = "_1b6tkn6";
+var fillElementFill = "_1b6tkn7";
+var fillMixStroke = "_1b6tkn9";
+var hasIcon = "_1b6tkna";
+var title = "_1b6tknd";
+var description = "_1b6tkne";
+var technology = "_1b6tknf";
+var elementDataContainer = "_1b6tkng";
+var elementTextData = "_1b6tknh";
+var elementIcon = "_1b6tkni";
+var shapeSvg = "_1b6tknl";
+export {
+  container,
+  containerAnimated,
+  description,
+  elementDataContainer,
+  elementIcon,
+  elementTextData,
+  fillElementFill,
+  fillMixStroke,
+  handleCenter,
+  hasIcon,
+  indicator,
+  shapeSvg,
+  technology,
+  title
+};

package/dist/xyflow/nodes/element/index.d.ts

@@ -0,0 +1 @@
+export { ElementNodeMemo as ElementNode } from './ElementNode';

package/dist/xyflow/nodes/shared/ElementIcon.d.ts

@@ -0,0 +1,8 @@
+import { DiagramNode } from '@likec4/core';
+import { ElementIconRenderer } from '../../../LikeC4Diagram.props';
+export declare const ElementIcon: ({ element, viewId, className, renderIcon: RenderIcon }: {
+    element: DiagramNode;
+    viewId: string;
+    className: string;
+    renderIcon: ElementIconRenderer | null;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/xyflow/nodes/shared/ElementIcon.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { m } from "framer-motion";
+const ElementIcon = ({
+  element,
+  viewId,
+  className,
+  renderIcon: RenderIcon
+}) => {
+  if (!element.icon || element.icon === "none") {
+    return null;
+  }
+  let icon = null;
+  if (element.icon.startsWith("http://") || element.icon.startsWith("https://")) {
+    icon = /* @__PURE__ */ jsx("img", { src: element.icon, alt: element.title });
+  } else if (RenderIcon) {
+    icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
+  }
+  if (!icon) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    m.div,
+    {
+      layoutId: `${viewId}:element:icon:${element.id}`,
+      className: clsx(
+        className,
+        "likec4-element-icon"
+      ),
+      "data-likec4-icon": element.icon,
+      children: icon
+    },
+    `${viewId}:element:icon:${element.id}`
+  );
+};
+export {
+  ElementIcon
+};

package/dist/xyflow/nodes/shared/Toolbar.d.ts

@@ -0,0 +1,9 @@
+import { ThemeColor, DiagramNode } from '@likec4/core';
+import { NodeToolbarProps } from '@xyflow/react';
+type ToolbarProps = NodeToolbarProps & {
+    element: DiagramNode;
+    onColorPreview: (color: ThemeColor | null) => void;
+};
+export declare function CompoundToolbar({ element, onColorPreview, ...props }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementToolbar({ element, onColorPreview, ...props }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};