likec4 0.52.0 → 0.54.0

package/dist/@likec4/diagrams/diagram/Nodes.js

@@ -1,18 +1,15 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { nonexhaustive } from "@likec4/core";
 import { isEqualSimple } from "@react-hookz/deep-equal/esnext";
-import { useToggle } from "@react-hookz/web/esm";
-import { useSpring, useTransition } from "@react-spring/konva";
-import { lighten, mix, toHex } from "khroma";
+import { useTransition } from "@react-spring/konva";
 import { memo, useRef } from "react";
-import { Group } from "react-konva";
-import { AnimatedCircle, AnimatedGroup, Rect } from "../konva.js";
+import { AnimatedGroup, Rect } from "../konva.js";
 import { Portal } from "../konva-portal.js";
-import { ZoomInIcon } from "./icons/index.js";
+import { CompoundZoomBtn, NodeLinkBtn, NodeZoomBtn } from "./nodes/index.js";
 import { CylinderShape, MobileShape, PersonShape, QueueShape, RectangleShape } from "./shapes/index.js";
 import { BrowserShape } from "./shapes/Browser.js";
 import { CompoundShape } from "./shapes/Compound.js";
-import { mouseDefault, mousePointer } from "./shapes/utils.js";
+import { mouseDefault } from "./shapes/utils.js";
 import { isCompound, useNodeSpringsFn } from "./springs.js";
 import { DiagramGesture, useHoveredEdge, useHoveredNodeId, useSetHoveredNode } from "./state/index.js";
 function nodeShape({ shape }) {
@@ -59,65 +56,71 @@ export function Nodes({ animate, theme, diagram, onNodeClick }) {
   const hoveredNodeId = useHoveredNodeId();
   const [hoveredEdge] = useHoveredEdge();
   const nodeSprings = useNodeSpringsFn(theme);
-  const nodeTransitions = useTransition(diagram.nodes, {
-    initial: nodeSprings,
-    from: (node) => {
-      const prevNode = prevNodes.get(node.id);
-      if (prevNode) {
-        return nodeSprings(prevNode);
-      }
-      return {
-        ...nodeSprings(node),
-        opacity: 0,
-        scaleX: isCompound(node) ? 0.85 : 0.6,
-        scaleY: isCompound(node) ? 0.85 : 0.6
-      };
-    },
-    enter: (node) => {
-      const isReplacing = prevNodes.has(node.id);
-      return {
-        ...nodeSprings(node),
-        delay: isReplacing ? 50 : 70
-      };
-    },
-    // update: nodeSprings(),
-    update: (node) => {
-      const isInactive = animate && hoveredEdge && hoveredEdge.source !== node.id && hoveredEdge.target !== node.id;
-      const scale = animate && !isCompound(node) && hoveredNodeId === node.id ? 1.08 : 1;
-      return {
-        ...nodeSprings(node),
-        opacity: isInactive ? 0.3 : 1,
-        scaleX: scale,
-        scaleY: scale
-      };
-    },
-    leave: (node) => {
-      const replacedWith = diagram.nodes.find((n) => n.id === node.id);
-      if (replacedWith && keyOf(node) !== keyOf(replacedWith)) {
+  const nodeTransitions = useTransition(
+    diagram.nodes,
+    {
+      initial: nodeSprings,
+      from: (node) => {
+        const prevNode = prevNodes.get(node.id);
+        if (prevNode) {
+          return nodeSprings(prevNode);
+        }
+        const scale = isCompound(node) ? 0.85 : 0.6;
         return {
+          ...nodeSprings(node),
           opacity: 0,
-          immediate: true
+          scaleX: scale,
+          scaleY: scale
         };
-      }
-      return {
-        opacity: 0,
-        scaleX: isCompound(node) ? 0.7 : 0.5,
-        scaleY: isCompound(node) ? 0.7 : 0.5,
-        config: {
-          duration: 120
+      },
+      enter: (node) => {
+        const isReplacing = prevNodes.has(node.id);
+        return {
+          ...nodeSprings(node),
+          delay: isReplacing ? 50 : 70
+        };
+      },
+      // update: nodeSprings(),
+      update: (node) => {
+        const isInactive = animate && hoveredEdge && hoveredEdge.source !== node.id && hoveredEdge.target !== node.id;
+        const isHovered = animate && !isInactive && !isCompound(node) && hoveredNodeId === node.id;
+        const scale = isHovered ? 1.08 : 1;
+        return {
+          ...nodeSprings(node),
+          opacity: isInactive ? 0.3 : 1,
+          scaleX: scale,
+          scaleY: scale
+        };
+      },
+      leave: (node) => {
+        const replacedWith = diagram.nodes.find((n) => n.id === node.id);
+        if (replacedWith && keyOf(node) !== keyOf(replacedWith)) {
+          return {
+            opacity: 0,
+            immediate: true
+          };
         }
-      };
-    },
-    sort: (a, b) => {
-      if (isCompound(a) === isCompound(b)) {
-        return a.level - b.level;
-      }
-      return isCompound(a) ? -1 : 1;
-    },
-    expires: true,
-    immediate: !animate,
-    keys: keyOf
-  });
+        const scale = isCompound(node) ? 0.7 : 0.5;
+        return {
+          opacity: 0,
+          scaleX: scale,
+          scaleY: scale,
+          config: {
+            duration: 120
+          }
+        };
+      },
+      sort: (a, b) => {
+        if (isCompound(a) === isCompound(b)) {
+          return a.level - b.level;
+        }
+        return isCompound(a) ? -1 : 1;
+      },
+      expires: true,
+      immediate: !animate,
+      keys: keyOf
+    }
+  );
   return nodeTransitions((_, node, { key, ctrl, expired }) => /* @__PURE__ */ jsx(
     NodeShape,
     {
@@ -220,6 +223,16 @@ const NodeShape = memo(
                 isHovered,
                 onNodeClick
               }
+            ),
+            node.links && /* @__PURE__ */ jsx(
+              NodeLinkBtn,
+              {
+                animate,
+                node,
+                ctrl,
+                theme,
+                isHovered
+              }
             )
           ] })
         ]
@@ -229,165 +242,3 @@ const NodeShape = memo(
   isEqualSimple
 );
 NodeShape.displayName = "NodeShape";
-const NodeZoomBtn = ({ animate, node, theme, isHovered: _isHovered, onNodeClick }) => {
-  const size = 30;
-  const halfSize = size / 2;
-  const colors = theme.elements[node.color];
-  let zoomInIconY;
-  switch (node.shape) {
-    case "browser":
-    case "mobile":
-      zoomInIconY = node.size.height - 20;
-      break;
-    default:
-      zoomInIconY = node.size.height - 16;
-  }
-  const fill = toHex(mix(colors.fill, colors.stroke, 65));
-  const onOver = toHex(mix(colors.fill, colors.stroke, 75));
-  const [isOver, toggleOver] = useToggle(false);
-  const isHovered = _isHovered || isOver;
-  const props = useSpring({
-    to: {
-      fill: isOver ? onOver : fill,
-      opacity: isOver ? 1 : 0,
-      y: zoomInIconY + (isOver ? 2 : 0),
-      scale: isOver ? 1.38 : 1,
-      // shadowBlur: isOver ? 6 : 4,
-      shadowOpacity: isOver ? 0.3 : 0.15
-      // shadowOffsetY: isOver ? 8 : 6
-    },
-    delay: isHovered && !isOver ? 100 : 0,
-    immediate: !animate
-  });
-  return /* @__PURE__ */ jsxs(
-    AnimatedGroup,
-    {
-      x: node.size.width / 2,
-      y: props.y,
-      offsetX: halfSize,
-      offsetY: halfSize,
-      scaleX: props.scale,
-      scaleY: props.scale,
-      width: size,
-      height: size,
-      onPointerEnter: (e) => {
-        toggleOver(true);
-        mousePointer(e);
-      },
-      onPointerLeave: (e) => {
-        toggleOver(false);
-        mouseDefault(e);
-      },
-      onPointerClick: (e) => {
-        if (DiagramGesture.isDragging || e.evt.button !== 0) {
-          return;
-        }
-        e.cancelBubble = true;
-        onNodeClick(node, e);
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          AnimatedCircle,
-          {
-            x: halfSize,
-            y: halfSize,
-            radius: halfSize,
-            fill: props.fill,
-            shadowBlur: 4,
-            shadowOpacity: props.shadowOpacity,
-            shadowOffsetX: 2,
-            shadowOffsetY: 6,
-            shadowColor: theme.shadow,
-            shadowEnabled: isHovered,
-            perfectDrawEnabled: false,
-            opacity: props.opacity,
-            hitStrokeWidth: halfSize
-          }
-        ),
-        /* @__PURE__ */ jsx(ZoomInIcon, { size: 16, x: halfSize, y: halfSize })
-      ]
-    }
-  );
-};
-const CompoundZoomBtn = ({
-  animate,
-  node,
-  theme,
-  ctrl,
-  isHovered: _isHovered,
-  onNodeClick
-}) => {
-  const size = 28;
-  const [isOver, toggleOver] = useToggle(false);
-  const halfSize = size / 2;
-  const fill = toHex(lighten(ctrl.springs.fill.get(), 10));
-  const isHovered = _isHovered || isOver;
-  const props = useSpring({
-    to: {
-      opacity: isOver ? 1 : 0,
-      x: halfSize + 4 - (isOver ? 4 : 0),
-      y: halfSize + 6 - (isOver ? 4 : 0),
-      scale: isOver ? 1.35 : 1,
-      // shadowBlur: isOver ? 6 : 4,
-      shadowOpacity: isOver ? 0.3 : 0.15
-      // shadowOffsetY: isOver ? 8 : 6
-    },
-    delay: isHovered && !isOver ? 100 : 0,
-    // delay: isOver ? 150 : (isHovered ? 70 : 0),
-    immediate: !animate
-  });
-  return /* @__PURE__ */ jsx(
-    Group,
-    {
-      onPointerEnter: (e) => {
-        toggleOver(true);
-        mousePointer(e);
-      },
-      onPointerLeave: (e) => {
-        toggleOver(false);
-        mouseDefault(e);
-      },
-      onPointerClick: (e) => {
-        if (DiagramGesture.isDragging || e.evt.button !== 0) {
-          return;
-        }
-        e.cancelBubble = true;
-        onNodeClick(node, e);
-      },
-      children: /* @__PURE__ */ jsxs(
-        AnimatedGroup,
-        {
-          x: props.x,
-          y: props.y,
-          offsetX: halfSize,
-          offsetY: halfSize,
-          scaleX: props.scale,
-          scaleY: props.scale,
-          width: size,
-          height: size,
-          children: [
-            /* @__PURE__ */ jsx(
-              AnimatedCircle,
-              {
-                x: halfSize,
-                y: halfSize,
-                radius: halfSize,
-                fill,
-                shadowBlur: 4,
-                shadowOpacity: props.shadowOpacity,
-                shadowOffsetX: 2,
-                shadowOffsetY: 6,
-                shadowColor: theme.shadow,
-                shadowEnabled: isHovered,
-                perfectDrawEnabled: false,
-                opacity: props.opacity,
-                hitStrokeWidth: halfSize
-              }
-            ),
-            /* @__PURE__ */ jsx(ZoomInIcon, { size: 16, x: halfSize, y: halfSize })
-          ]
-        }
-      )
-    }
-  );
-};

package/dist/@likec4/diagrams/diagram/icons/LinkIcon.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isEqualSimple } from "@react-hookz/deep-equal/esnext";
+import { memo } from "react";
+import { Group, Path } from "../../konva.js";
+export const LinkIcon = memo(({ color = "#BABABA", opacity = 1, size = 24, x, y }) => {
+  const originalSize = 24;
+  const scale = size / originalSize;
+  const offsetIcon = originalSize / 2;
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      x,
+      y,
+      offsetX: offsetIcon,
+      offsetY: offsetIcon,
+      scaleX: scale,
+      scaleY: scale,
+      opacity,
+      globalCompositeOperation: "luminosity",
+      children: [
+        /* @__PURE__ */ jsx(
+          Path,
+          {
+            data: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+            stroke: color,
+            strokeWidth: 2,
+            lineCap: "round",
+            lineJoin: "round",
+            listening: false,
+            perfectDrawEnabled: false
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Path,
+          {
+            data: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
+            stroke: color,
+            strokeWidth: 2,
+            lineCap: "round",
+            lineJoin: "round",
+            listening: false,
+            perfectDrawEnabled: false
+          }
+        )
+      ]
+    }
+  );
+}, isEqualSimple);

package/dist/@likec4/diagrams/diagram/icons/ZoomInIcon.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isEqualSimple } from "@react-hookz/deep-equal/esnext";
+import { memo } from "react";
+import { Circle, Group, Line } from "../../konva.js";
+export const ZoomInIcon = memo(({ fill = "#BABABA", opacity = 1, size = 20, x, y }) => {
+  const originalSize = 24;
+  const scale = size / originalSize;
+  const offsetIcon = originalSize / 2;
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      x,
+      y,
+      offsetX: offsetIcon,
+      offsetY: offsetIcon,
+      scaleX: scale,
+      scaleY: scale,
+      width: originalSize,
+      height: originalSize,
+      opacity,
+      globalCompositeOperation: "luminosity",
+      children: [
+        /* @__PURE__ */ jsx(
+          Circle,
+          {
+            x: 11,
+            y: 11,
+            radius: 8,
+            stroke: fill,
+            strokeWidth: 2,
+            perfectDrawEnabled: false,
+            listening: false
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Line,
+          {
+            points: [22, 22, 16.65, 16.65],
+            stroke: fill,
+            strokeWidth: 2,
+            perfectDrawEnabled: false,
+            listening: false,
+            lineCap: "round",
+            lineJoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Line,
+          {
+            points: [11, 8, 11, 14],
+            stroke: fill,
+            strokeWidth: 2,
+            perfectDrawEnabled: false,
+            listening: false,
+            lineCap: "round",
+            lineJoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Line,
+          {
+            points: [8, 11, 14, 11],
+            stroke: fill,
+            strokeWidth: 2,
+            perfectDrawEnabled: false,
+            listening: false,
+            lineCap: "round",
+            lineJoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}, isEqualSimple);

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

@@ -1,3 +1,2 @@
-export * from "./ExternalLink.js";
-export * from "./BrainIcon.js";
-export * from "./ZoomIn.js";
+export * from "./LinkIcon.js";
+export * from "./ZoomInIcon.js";

package/dist/@likec4/diagrams/diagram/nodes/NodeLinkBtn.js

@@ -0,0 +1,139 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { invariant } from "@likec4/core";
+import { isEqualSimple } from "@react-hookz/deep-equal/esnext";
+import { useToggle } from "@react-hookz/web/esm";
+import { useSpring } from "@react-spring/konva";
+import { mix, toHex } from "khroma";
+import { memo } from "react";
+import { AnimatedCircle, AnimatedGroup } from "../../konva.js";
+import { LinkIcon } from "../icons/index.js";
+import { DiagramGesture } from "../state/index.js";
+import { mouseDefault, mousePointer } from "../utils.js";
+export const NodeLinkBtn = memo(
+  ({ animate, node, theme, isHovered: _isHovered }) => {
+    const links = node.links;
+    invariant(links, "NodeLinkBtn: node.links is undefined");
+    const size = 30;
+    const halfSize = size / 2;
+    const colors = theme.elements[node.color];
+    let iconX;
+    switch (node.shape) {
+      case "browser": {
+        iconX = 21;
+        break;
+      }
+      case "mobile": {
+        iconX = 16;
+        break;
+      }
+      case "queue": {
+        iconX = 26;
+        break;
+      }
+      case "cylinder":
+      case "storage": {
+        iconX = 14;
+        break;
+      }
+      default:
+        iconX = 16;
+    }
+    let iconY;
+    switch (node.shape) {
+      case "browser": {
+        iconY = node.size.height - 20;
+        break;
+      }
+      case "queue": {
+        iconY = node.size.height - 14;
+        break;
+      }
+      case "cylinder":
+      case "storage": {
+        iconY = node.size.height - 22;
+        break;
+      }
+      default:
+        iconY = node.size.height - 16;
+    }
+    const fill = toHex(mix(colors.fill, colors.stroke, 65));
+    const onOver = toHex(mix(colors.fill, colors.stroke, 75));
+    const [isOver, toggleOver] = useToggle(false);
+    const isHovered = _isHovered || isOver;
+    const props = useSpring({
+      to: {
+        fill: isOver ? onOver : fill,
+        opacity: isOver ? 1 : 0,
+        // y: zoomInIconY + (isOver ? 2 : 0),
+        scale: isOver ? 1.38 : 1,
+        // shadowBlur: isOver ? 6 : 4,
+        shadowOpacity: isOver ? 0.3 : 0.15
+        // shadowOffsetY: isOver ? 8 : 6
+      },
+      delay: isHovered && !isOver ? 100 : 0,
+      immediate: !animate
+    });
+    return /* @__PURE__ */ jsxs(
+      AnimatedGroup,
+      {
+        x: iconX,
+        y: iconY,
+        offsetX: halfSize,
+        offsetY: halfSize,
+        scaleX: props.scale,
+        scaleY: props.scale,
+        width: size,
+        height: size,
+        onPointerEnter: (e) => {
+          toggleOver(true);
+          mousePointer(e);
+        },
+        onPointerLeave: (e) => {
+          toggleOver(false);
+          mouseDefault(e);
+        },
+        onPointerClick: (e) => {
+          if (DiagramGesture.isDragging || e.evt.button !== 0) {
+            return;
+          }
+          e.cancelBubble = true;
+          e.evt.stopPropagation();
+          if (!window.open(links[0], "_blank")) {
+            window.alert("Please allow popups for this website");
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            AnimatedCircle,
+            {
+              x: halfSize,
+              y: halfSize,
+              radius: halfSize,
+              fill: props.fill,
+              shadowBlur: 4,
+              shadowOpacity: props.shadowOpacity,
+              shadowOffsetX: 2,
+              shadowOffsetY: 6,
+              shadowColor: theme.shadow,
+              shadowEnabled: isHovered,
+              perfectDrawEnabled: false,
+              opacity: props.opacity,
+              hitStrokeWidth: halfSize
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            LinkIcon,
+            {
+              size: isHovered ? 16 : 14,
+              opacity: isHovered ? 1 : 0.9,
+              x: halfSize,
+              y: halfSize
+            }
+          )
+        ]
+      }
+    );
+  },
+  isEqualSimple
+);
+NodeLinkBtn.displayName = "NodeLinkBtn";