likec4 0.41.0 → 0.42.1

package/dist/@likec4/diagrams/diagram/icons/ExternalLink.mjs

@@ -1,90 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { AnimatedGroup, Circle, Path } from "../../konva.mjs";
-import { defaultTheme as theme } from "@likec4/core";
-export const ExternalLink = ({
-  visible = true,
-  fill,
-  fillIcon = theme.colors.primary.loContrast,
-  opacity = 1,
-  scale = 1,
-  x = 0,
-  y = 0
-}) => {
-  const width = 34;
-  const offsetXY = width / 2;
-  const iconSize = 20;
-  const offsetIcon = iconSize / 2;
-  return (
-    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    /* @__PURE__ */ jsxs(
-      AnimatedGroup,
-      {
-        x: x + offsetXY,
-        y: y + width - 10,
-        offsetX: offsetXY,
-        offsetY: width - 10,
-        visible,
-        scaleX: scale,
-        scaleY: scale,
-        opacity,
-        width,
-        height: width,
-        children: [
-          /* @__PURE__ */ jsx(
-            Circle,
-            {
-              x: 0,
-              y: 0,
-              radius: offsetXY,
-              fill,
-              stroke: fill,
-              strokeWidth: 1,
-              hitStrokeWidth: 25,
-              strokeScaleEnabled: false,
-              perfectDrawEnabled: false,
-              shadowBlur: 12,
-              shadowOpacity: 0.5,
-              shadowOffsetX: 0,
-              shadowOffsetY: 2,
-              shadowColor: theme.shadow,
-              shadowForStrokeEnabled: false
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Path,
-            {
-              data: "M11 3a1 1 0 1 0 0 2h2.586l-6.293 6.293a1 1 0 1 0 1.414 1.414L15 6.414V9a1 1 0 1 0 2 0V4a1 1 0 0 0-1-1h-5z",
-              fill: fillIcon,
-              strokeEnabled: false,
-              perfectDrawEnabled: false,
-              listening: false,
-              x: 0,
-              y: 0,
-              offsetX: offsetIcon,
-              offsetY: offsetIcon,
-              width: iconSize,
-              height: iconSize
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Path,
-            {
-              data: "M5 5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-3a1 1 0 1 0-2 0v3H5V7h3a1 1 0 0 0 0-2H5z",
-              fill: fillIcon,
-              strokeEnabled: false,
-              perfectDrawEnabled: false,
-              listening: false,
-              x: 0,
-              y: 0,
-              offsetX: offsetIcon,
-              offsetY: offsetIcon,
-              width: iconSize,
-              height: iconSize
-            }
-          )
-        ]
-      }
-    )
-  );
-};

package/dist/@likec4/diagrams/diagram/icons/index.mjs

@@ -1,2 +0,0 @@
-export * from "./ExternalLink.mjs";
-export * from "./BrainIcon.mjs";

package/dist/@likec4/diagrams/diagram/index.mjs

@@ -1,2 +0,0 @@
-export { Diagram } from "./Diagram.mjs";
-export * from "./state/index.mjs";

package/dist/@likec4/diagrams/diagram/shapes/Browser.mjs

@@ -1,49 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useShadowSprings } from "../springs.mjs";
-import { AnimatedRect, Circle } from "../../konva.mjs";
-import { NodeLabels } from "./NodeLabel.mjs";
-export function BrowserShape({ node, theme, springs, isHovered }) {
-  const colors = theme.colors[node.color];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      AnimatedRect,
-      {
-        ...useShadowSprings(isHovered, theme, springs),
-        cornerRadius: 6,
-        perfectDrawEnabled: false,
-        strokeEnabled: false,
-        width: springs.width,
-        height: springs.height,
-        fill: springs.stroke
-      }
-    ),
-    /* @__PURE__ */ jsx(Circle, { x: 16, y: 15, radius: 7, fill: colors.fill, listening: false }),
-    /* @__PURE__ */ jsx(Circle, { x: 36, y: 15, radius: 7, fill: colors.fill, listening: false }),
-    /* @__PURE__ */ jsx(Circle, { x: 56, y: 15, radius: 7, fill: colors.fill, listening: false }),
-    /* @__PURE__ */ jsx(
-      AnimatedRect,
-      {
-        cornerRadius: 5,
-        x: 70,
-        y: 7,
-        width: springs.width.to((w) => w - 80),
-        height: 16,
-        fill: springs.fill,
-        listening: false
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      AnimatedRect,
-      {
-        cornerRadius: 5,
-        x: 9,
-        y: 31,
-        width: springs.width.to((w) => w - 18),
-        height: springs.height.to((h) => h - 40),
-        fill: springs.fill,
-        listening: false
-      }
-    ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, theme, offsetY: -8 })
-  ] });
-}

package/dist/@likec4/diagrams/diagram/shapes/Compound.mjs

@@ -1,48 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatedRect, AnimatedText } from "../../konva.mjs";
-export function CompoundShape({ node, theme, springs }) {
-  const { labels } = node;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      AnimatedRect,
-      {
-        cornerRadius: 4,
-        shadowColor: theme.shadow,
-        shadowBlur: node.level > 0 ? 20 : 10,
-        shadowOpacity: node.level > 0 ? 0.35 : 0.8,
-        shadowOffsetX: 0,
-        shadowOffsetY: 4,
-        shadowEnabled: springs.opacity.to((v) => v > 0.7),
-        width: springs.width,
-        height: springs.height,
-        fill: springs.fill,
-        strokeEnabled: false,
-        listening: false
-      }
-    ),
-    labels.map(({ pt: [x, y], ...label }, i) => /* @__PURE__ */ jsx(
-      AnimatedText,
-      {
-        x,
-        y: y - label.fontSize / 2,
-        offsetX: 4,
-        offsetY: 4,
-        width: springs.width.to((v) => v - x - 4),
-        fill: "#BABABA",
-        fontFamily: theme.font,
-        fontSize: label.fontSize,
-        fontStyle: label.fontStyle ?? "normal",
-        letterSpacing: 0.8,
-        align: label.align,
-        text: label.text,
-        wrap: "none",
-        ellipsis: true,
-        perfectDrawEnabled: false,
-        padding: 6,
-        hitStrokeWidth: 3,
-        globalCompositeOperation: "luminosity"
-      },
-      i
-    ))
-  ] });
-}

package/dist/@likec4/diagrams/diagram/shapes/Cylinder.mjs

@@ -1,57 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useSpring } from "@react-spring/konva";
-import { AnimatedEllipse, AnimatedPath } from "../../konva.mjs";
-import { NodeLabels } from "./NodeLabel.mjs";
-import { useShadowSprings } from "../springs.mjs";
-function cylinderSVGPath(diameter, height, tilt = 0.0825) {
-  const radius = Math.round(diameter / 2);
-  const rx = radius;
-  const ry = Math.round(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}
-        `.replace(/\s+/g, " ").trim();
-  return {
-    path,
-    ry,
-    rx
-  };
-}
-export function CylinderShape({ node, theme, springs, isHovered }) {
-  const {
-    size: { width, height }
-  } = node;
-  const { path, rx, ry } = cylinderSVGPath(width, height);
-  const cylinder = useSpring({
-    to: {
-      rx,
-      ry
-    }
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      AnimatedPath,
-      {
-        ...useShadowSprings(isHovered, theme, springs),
-        data: path,
-        perfectDrawEnabled: false,
-        shadowForStrokeEnabled: false,
-        fill: springs.fill
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      AnimatedEllipse,
-      {
-        x: cylinder.rx,
-        y: cylinder.ry,
-        radiusX: cylinder.rx,
-        radiusY: cylinder.ry,
-        fill: springs.stroke
-      }
-    ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, offsetY: -ry * (node.icon ? 1.5 : 0.5), theme })
-  ] });
-}

package/dist/@likec4/diagrams/diagram/shapes/Edge.mjs

@@ -1,63 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatedCircle, AnimatedLine, AnimatedText } from "../../konva.mjs";
-import { invariant, nonNullable } from "@likec4/core";
-export function EdgeShape({ edge, theme, isHovered, springs }) {
-  const { points, headArrow, labels } = edge;
-  invariant(points[0], "Edge must have at least one point");
-  const [x, y] = nonNullable(points[0]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      AnimatedCircle,
-      {
-        opacity: springs.opacity,
-        x,
-        y,
-        radius: springs.lineWidth.to((v) => v + 1),
-        fill: springs.lineColor,
-        visible: isHovered
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      AnimatedLine,
-      {
-        opacity: springs.opacity,
-        bezier: true,
-        dashEnabled: true,
-        points: points.flat(),
-        stroke: springs.lineColor,
-        strokeWidth: springs.lineWidth,
-        hitStrokeWidth: 20
-      }
-    ),
-    headArrow && /* @__PURE__ */ jsx(
-      AnimatedLine,
-      {
-        opacity: springs.opacity,
-        points: headArrow.flat(),
-        closed: true,
-        fill: springs.lineColor,
-        stroke: springs.lineColor,
-        strokeWidth: 2,
-        hitStrokeWidth: 5
-      }
-    ),
-    labels.map((label, i) => /* @__PURE__ */ jsx(
-      AnimatedText,
-      {
-        x: label.pt[0] - 4,
-        y: label.pt[1] - label.fontSize / 2 - 4,
-        opacity: springs.opacity,
-        padding: 4,
-        fill: springs.labelColor,
-        fontFamily: theme.font,
-        fontSize: label.fontSize,
-        fontStyle: label.fontStyle ?? "normal",
-        align: label.align,
-        text: label.text,
-        perfectDrawEnabled: false,
-        hitStrokeWidth: 10
-      },
-      i
-    ))
-  ] });
-}

package/dist/@likec4/diagrams/diagram/shapes/Mobile.mjs

@@ -1,33 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatedRect, Circle } from "../../konva.mjs";
-import { NodeLabels } from "./NodeLabel.mjs";
-import { useShadowSprings } from "../springs.mjs";
-export function MobileShape({ node, theme, springs, isHovered }) {
-  const colors = theme.colors[node.color];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      AnimatedRect,
-      {
-        ...useShadowSprings(isHovered, theme, springs),
-        cornerRadius: 6,
-        width: springs.width,
-        height: springs.height,
-        fill: springs.stroke
-      }
-    ),
-    /* @__PURE__ */ jsx(Circle, { x: 16, y: node.size.height / 2, radius: 10, fill: colors.fill, listening: false }),
-    /* @__PURE__ */ jsx(
-      AnimatedRect,
-      {
-        cornerRadius: 4,
-        x: 31,
-        y: 12,
-        width: springs.width.to((w) => w - 43),
-        height: springs.height.to((h) => h - 24),
-        fill: springs.fill,
-        listening: false
-      }
-    ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, theme, offsetX: -6 })
-  ] });
-}

package/dist/@likec4/diagrams/diagram/shapes/NodeIcon.mjs

@@ -1,28 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import useImageLoader from "../../hooks/useImageLoader.mjs";
-import { Image } from "../../konva.mjs";
-export function NodeIcon({ icon, maxWidth, maxHeight, offsetX = 0, offsetY = 0 }) {
-  const [image] = useImageLoader(icon);
-  if (!image) {
-    return null;
-  }
-  const padding = 16;
-  const maxIconWidth = Math.round(maxWidth - padding * 2);
-  const maxIconHeight = Math.round(maxHeight - padding * 2);
-  const scale = Math.min(maxIconWidth / image.width, maxIconHeight / image.height, 1);
-  const iconWidth = Math.floor(image.width * scale);
-  const iconHeight = Math.floor(image.height * scale);
-  return /* @__PURE__ */ jsx(
-    Image,
-    {
-      image,
-      x: padding + (maxIconWidth - iconWidth) / 2,
-      y: padding + (maxIconHeight - iconHeight) / 2,
-      offsetX,
-      offsetY,
-      width: iconWidth,
-      height: iconHeight,
-      listening: false
-    }
-  );
-}

package/dist/@likec4/diagrams/diagram/shapes/NodeLabel.mjs

@@ -1,59 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Text } from "../../konva.mjs";
-import { NodeIcon } from "./NodeIcon.mjs";
-export function NodeLabels({
-  node: { icon, labels, size, color },
-  theme,
-  offsetX = 0,
-  offsetY = 0,
-  maxWidth
-}) {
-  const colors = theme.colors[color];
-  const width = maxWidth ?? size.width;
-  const firstLabel = labels[0];
-  const titleFontSize = firstLabel?.fontSize ?? 12;
-  let nodeIcon;
-  if (icon) {
-    const maxHeight = firstLabel ? Math.floor(firstLabel.pt[1] - firstLabel.fontSize / 2) : size.height;
-    nodeIcon = /* @__PURE__ */ jsx(
-      NodeIcon,
-      {
-        icon,
-        maxWidth: width,
-        maxHeight,
-        offsetX,
-        offsetY
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    nodeIcon,
-    labels.map((label, i) => {
-      let color2 = colors.hiContrast;
-      if (label.fontSize !== titleFontSize) {
-        color2 = colors.loContrast;
-      }
-      return /* @__PURE__ */ jsx(
-        Text,
-        {
-          x: 8,
-          width: width - 16,
-          y: label.pt[1],
-          offsetY: offsetY + label.fontSize / 2,
-          offsetX,
-          fill: color2,
-          fontFamily: theme.font,
-          fontSize: label.fontSize,
-          fontStyle: label.fontStyle ?? "normal",
-          align: "center",
-          text: label.text,
-          strokeEnabled: false,
-          perfectDrawEnabled: false,
-          listening: false
-        },
-        label.text + i
-      );
-    })
-  ] });
-}
-NodeLabels.displayName = "NodeLabels";

package/dist/@likec4/diagrams/diagram/shapes/Person.mjs

@@ -1,42 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useShadowSprings } from "../springs.mjs";
-import { AnimatedPath, AnimatedRect } from "../../konva.mjs";
-import { NodeLabels } from "./NodeLabel.mjs";
-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`
-};
-export function PersonShape({ node, theme, springs, isHovered }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      AnimatedRect,
-      {
-        ...useShadowSprings(isHovered, theme, springs),
-        cornerRadius: 6,
-        perfectDrawEnabled: false,
-        strokeEnabled: false,
-        width: springs.width,
-        height: springs.height,
-        fill: springs.fill
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      AnimatedPath,
-      {
-        x: springs.width.to((v) => v - 8),
-        y: springs.height,
-        data: PersonIcon.path,
-        width: PersonIcon.width,
-        height: PersonIcon.height,
-        fill: springs.stroke,
-        opacity: 0.7,
-        perfectDrawEnabled: false,
-        offsetX: PersonIcon.width,
-        offsetY: PersonIcon.height,
-        listening: false
-      }
-    ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, theme })
-  ] });
-}

package/dist/@likec4/diagrams/diagram/shapes/Queue.mjs

@@ -1,58 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useShadowSprings } from "../springs.mjs";
-import { AnimatedEllipse, AnimatedPath } from "../../konva.mjs";
-import { NodeLabels } from "./NodeLabel.mjs";
-import { useSpring } from "@react-spring/konva";
-function queueSVGPath(width, height, tilt = 0.2) {
-  const diameter = height;
-  const radius = Math.round(diameter / 2);
-  const ry = radius;
-  const rx = Math.round(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}
-        `.replace(/\s+/g, " ").trim();
-  return {
-    path,
-    ry,
-    rx
-  };
-}
-export function QueueShape({ node, theme, springs, isHovered }) {
-  const {
-    size: { width, height }
-  } = node;
-  const { path, rx, ry } = queueSVGPath(width, height);
-  const props = useSpring({
-    to: {
-      x: width - rx,
-      y: ry,
-      rx,
-      ry
-    }
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      AnimatedPath,
-      {
-        ...useShadowSprings(isHovered, theme, springs),
-        data: path,
-        perfectDrawEnabled: false,
-        fill: springs.fill
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      AnimatedEllipse,
-      {
-        x: props.x,
-        y: props.y,
-        radiusX: props.rx,
-        radiusY: props.ry,
-        fill: springs.stroke
-      }
-    ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, maxWidth: width - rx * 2, theme })
-  ] });
-}

package/dist/@likec4/diagrams/diagram/shapes/Rectangle.mjs

@@ -1,20 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatedRect } from "../../konva.mjs";
-import { NodeLabels } from "./NodeLabel.mjs";
-import { useShadowSprings } from "../springs.mjs";
-export function RectangleShape({ node, theme, springs, isHovered }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      AnimatedRect,
-      {
-        ...useShadowSprings(isHovered, theme, springs),
-        cornerRadius: 6,
-        strokeEnabled: false,
-        width: springs.width,
-        height: springs.height,
-        fill: springs.fill
-      }
-    ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, theme })
-  ] });
-}

package/dist/@likec4/diagrams/diagram/shapes/index.mjs

@@ -1,7 +0,0 @@
-export { CompoundShape } from "./Compound.mjs";
-export { RectangleShape } from "./Rectangle.mjs";
-export { CylinderShape } from "./Cylinder.mjs";
-export { MobileShape } from "./Mobile.mjs";
-export { QueueShape } from "./Queue.mjs";
-export { PersonShape } from "./Person.mjs";
-export { EdgeShape } from "./Edge.mjs";

package/dist/@likec4/diagrams/diagram/shapes/utils.mjs

@@ -1,12 +0,0 @@
-export function mousePointer(e) {
-  const container = e.target.getStage()?.container();
-  if (container) {
-    container.style.cursor = "pointer";
-  }
-}
-export function mouseDefault(e) {
-  const container = e.target.getStage()?.container();
-  if (container) {
-    container.style.cursor = "auto";
-  }
-}

package/dist/@likec4/diagrams/diagram/springs.mjs

@@ -1,57 +0,0 @@
-import { useSpring } from "@react-spring/konva";
-import { scale, toHex } from "khroma";
-import { memoize } from "rambdax";
-import { useCallback } from "react";
-const compoundColor = memoize(
-  (color, depth) => toHex(
-    scale(color, {
-      l: -35 - 5 * depth,
-      s: -15 - 5 * depth
-    })
-  )
-);
-const isCompound = (node) => {
-  return node.children.length > 0;
-};
-function nodeSprings(theme, node) {
-  const {
-    position: [x, y],
-    size: { width, height },
-    color
-  } = node;
-  const colors = theme.colors[color];
-  const offsetX = Math.round(width / 2);
-  const offsetY = Math.round(height / 2);
-  return {
-    opacity: 1,
-    scaleX: 1,
-    scaleY: 1,
-    x: x + offsetX,
-    y: y + offsetY,
-    fill: isCompound(node) ? compoundColor(colors.fill, node.depth ?? 1) : colors.fill,
-    stroke: isCompound(node) ? compoundColor(colors.stroke, node.depth ?? 1) : colors.stroke,
-    width,
-    height,
-    offsetX,
-    offsetY
-  };
-}
-export const useNodeSpringsFn = (theme) => {
-  return useCallback((node) => nodeSprings(theme, node), [theme]);
-};
-export const useShadowSprings = (isHovered = false, theme, springs) => {
-  const [values] = useSpring(
-    {
-      shadowBlur: isHovered ? 30 : 12,
-      shadowOpacity: isHovered ? 0.5 : 0.35,
-      shadowOffsetX: 0,
-      shadowOffsetY: isHovered ? 16 : 4,
-      shadowColor: theme.shadow
-    },
-    [isHovered, theme]
-  );
-  return {
-    shadowEnabled: springs.opacity.to((v) => v > 0.8),
-    ...values
-  };
-};