likec4 0.48.0 → 0.50.0

package/README.md

@@ -4,9 +4,9 @@
 
 Features:
 
-- Preview diagrams in a local web server (with lightning fast updates) ⚡️
+- Preview diagrams in a local web server (with lightning-fast updates) ⚡️
 - Build a static .website (deploy to github pages, netlify...) 🔗
-- Export to PNG, Mermaid, Dot, D2 (if you something static) 🖼️
+- Export to PNG, JSON, Mermaid, Dot, D2 (if you need something static) 🖼️
 - Generate React components (for custom integrations ) 🛠️
 
 ## Install
@@ -76,7 +76,7 @@ likec4 start
 likec4 dev
 ```
 
-This recursively searchs for `*.c4`, `*.likec4` files in current folder, parses and serves diagrams in a local web server.  
+This recursively searches for `*.c4`, `*.likec4` files in the current folder, parses and serves diagrams in a local web server.  
 Any changes in the sources trigger a super-fast hot update and you see changes in the browser immediately.
 
 > **Tip:**  
@@ -92,7 +92,7 @@ likec4 build -o ./dist
 
 Example [https://template.likec4.dev](https://template.likec4.dev/view/cloud)
 
-When you deployed the website, you can use "Share" button to get a link to a specific diagram.
+When you deploy the website, you can use the "Share" button to get links.
 
 > **Tip:**  
 > [likec4/template](https://github.com/likec4/template) repository demonstrates how to deploy to github pages.
@@ -111,9 +111,15 @@ For example, this command can be used on CI, to compare diagrams with ones from
 likec4 export png -o ./assets
 ```
 
-This command starts local web server and uses Playwright to take screenshots.  
+This command starts the local web server and uses Playwright to take screenshots.  
 If you plan to use it on CI, refer to [Playwright documentation](https://playwright.dev/docs/ci) for details.
 
+### Export to JSON
+
+```sh
+likec4 export json -o dump.json
+```
+
 ### Export to Mermaid, Dot, D2
 
 Export to various formats via codegen:
@@ -165,4 +171,4 @@ yarn dev
 
 ## Support
 
-If there's a problem you're encountering or something you need help with, don't hesitate to take advantage of my [_Priority Support_ service](https://github.com/sponsors/davydkov) where you can ask me questions in an exclusive forum. I'm well equppied to assist you with this project and would be happy to help you out! 🙂
+If there's a problem you're encountering or something you need help with, don't hesitate to take advantage of my [_Priority Support_ service](https://github.com/sponsors/davydkov) where you can ask me questions in an exclusive forum. I'm well-equipped to assist you with this project and would be happy to help you out! 🙂

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

@@ -2,13 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { nonNullable, defaultTheme as theme } from "@likec4/core";
 import { useHookableRef, useUpdateEffect } from "@react-hookz/web/esm";
 import { useSpring } from "@react-spring/konva";
-import { clamp } from "rambdax";
+import { clamp, isNil } from "rambdax";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { AnimatedStage, Layer } from "../konva.js";
 import { Edges } from "./Edges.js";
 import { createUseGesture, dragAction, pinchAction } from "@use-gesture/react";
 import { Nodes } from "./Nodes.js";
-import { DiagramGesture, useResetHoveredStates } from "./state/index.js";
+import { DiagramGesture, DiagramStateProvider, useResetHoveredStates } from "./state/index.js";
+import { isNumber } from "./utils.js";
 const useGesture = createUseGesture([dragAction, pinchAction]);
 const useSyncedRef = (value) => {
   const ref = useRef(value);
@@ -27,7 +28,7 @@ function diagramNodeId(konvaNode) {
   }
   return null;
 }
-export const Diagram = /* @__PURE__ */ forwardRef(
+const DiagramKonva = /* @__PURE__ */ forwardRef(
   ({
     diagram,
     padding = NoPadding,
@@ -56,15 +57,17 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       }
       return value;
     });
-    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = Array.isArray(padding) ? padding : [padding, padding, padding, padding];
+    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isNumber(padding) ? [padding, padding, padding, padding] : padding;
     const width = _width ?? diagram.width + paddingLeft + paddingRight;
     const height = _height ?? diagram.height + paddingTop + paddingBottom;
-    const toCenterOnRect = (centerTo) => {
+    const toCenterOnRect = (centerTo, opts) => {
+      const keepZoom = opts?.keepZoom ?? false;
       const container = containerRef.current;
+      const _maxZoom = keepZoom === true && !isNil(stageRef.current) ? stageRef.current.scaleX() : maxZoom;
       const viewRect = {
         width: Math.min(container?.clientWidth ?? width, width) - paddingLeft - paddingRight,
         height: Math.min(container?.clientHeight ?? height, height) - paddingTop - paddingBottom
-      }, viewScale = Math.min(viewRect.width / centerTo.width, viewRect.height / centerTo.height), scale = clamp(minZoom, maxZoom, viewScale), centeringAjustment = {
+      }, viewScale = Math.min(viewRect.width / centerTo.width, viewRect.height / centerTo.height), scale = clamp(minZoom, _maxZoom, viewScale), centeringAjustment = {
         x: ((width - centerTo.width) * scale + viewRect.width) / 2,
         y: ((height - centerTo.height) * scale + viewRect.height) / 2
       }, finalPosition = {
@@ -88,18 +91,21 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       },
       []
     );
-    const centerOnRect = (centerTo) => {
+    const centerOnRect = (centerTo, opts) => {
       stageSpringApi.start({
-        to: toCenterOnRect(centerTo),
-        immediate
+        to: toCenterOnRect(centerTo, {
+          keepZoom: opts?.keepZoom ?? true
+        }),
+        delay: opts?.delay ?? 0,
+        immediate: immediate || (opts?.immediate ?? false)
       });
       return;
     };
-    const centerAndFit = (delay = 0) => {
+    const centerAndFit = (opts) => {
       stageSpringApi.start({
         to: toFitDiagram(),
-        delay,
-        immediate
+        delay: opts?.delay ?? 0,
+        immediate: immediate || (opts?.immediate ?? false)
       });
       return;
     };
@@ -137,25 +143,31 @@ export const Diagram = /* @__PURE__ */ forwardRef(
         resetStageZoom: (_immediate) => {
           refs.current.resetStageZoom(_immediate);
         },
-        centerOnNode: (node) => refs.current.centerOnRect({
-          x: node.position[0],
-          y: node.position[1],
-          width: node.size.width,
-          height: node.size.height
-        }),
-        centerAndFit: () => refs.current.centerAndFit()
+        centerOnNode: (node, opts) => refs.current.centerOnRect(
+          {
+            x: node.position[0],
+            y: node.position[1],
+            width: node.size.width,
+            height: node.size.height
+          },
+          opts
+        ),
+        centerOnRect: (rect, opts) => refs.current.centerOnRect(rect, opts),
+        centerAndFit: (opts) => refs.current.centerAndFit(opts)
       }),
       [refs, stageRef]
     );
     const resetHoveredStates = useResetHoveredStates();
     useUpdateEffect(() => {
       resetHoveredStates();
+      refs.current.centerAndFit({
+        delay: 200
+      });
     }, [id]);
     useUpdateEffect(() => {
-      refs.current.centerAndFit(200);
-    }, [id]);
-    useUpdateEffect(() => {
-      refs.current.centerAndFit(50);
+      refs.current.centerAndFit({
+        keepZoom: true
+      });
     }, [height, width]);
     useEffect(() => {
       if (!zoomable) {
@@ -259,9 +271,12 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       theme,
       diagram
     };
+    const layerCenterX = diagram.width / 2;
+    const layerCenterY = diagram.height / 2;
     return /* @__PURE__ */ jsxs(
       AnimatedStage,
       {
+        _useStrictMode: true,
         ref: stageRef,
         width,
         height,
@@ -316,14 +331,27 @@ export const Diagram = /* @__PURE__ */ forwardRef(
         },
         ...props,
         children: [
-          /* @__PURE__ */ jsxs(Layer, { children: [
-            /* @__PURE__ */ jsx(Nodes, { ...sharedProps, onNodeClick }),
-            /* @__PURE__ */ jsx(Edges, { ...sharedProps, onEdgeClick })
-          ] }),
+          /* @__PURE__ */ jsxs(
+            Layer,
+            {
+              x: layerCenterX,
+              offsetX: layerCenterX,
+              y: layerCenterY,
+              offsetY: layerCenterY,
+              scaleX: 1,
+              scaleY: 1,
+              children: [
+                /* @__PURE__ */ jsx(Nodes, { ...sharedProps, onNodeClick }),
+                /* @__PURE__ */ jsx(Edges, { ...sharedProps, onEdgeClick })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx(Layer, { name: "top" })
         ]
       }
     );
   }
 );
+DiagramKonva.displayName = "DiagramKonva";
+export const Diagram = /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */ jsx(DiagramStateProvider, { children: /* @__PURE__ */ jsx(DiagramKonva, { ...props, ref }) }));
 Diagram.displayName = "Diagram";

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

@@ -102,23 +102,26 @@ const EdgeShape = memo(({ animate, edge, ctrl, theme, isHovered, onEdgeClick })
     AnimatedGroup,
     {
       opacity: ctrl.springs.opacity,
-      onPointerClick: (e) => {
-        if (!onEdgeClick || DiagramGesture.isDragging || e.evt.button !== 0) {
-          return;
+      ...onEdgeClick && {
+        onPointerClick: (e) => {
+          if (DiagramGesture.isDragging || e.evt.button !== 0) {
+            return;
+          }
+          e.cancelBubble = true;
+          onEdgeClick(edge, e);
         }
-        e.cancelBubble = true;
-        onEdgeClick(edge, e);
       },
-      onPointerEnter: (e) => {
-        if (animate) {
+      ...animate && {
+        onPointerEnter: (e) => {
           setHoveredEdge(edge);
           mousePointer(e);
+          e.cancelBubble = true;
+        },
+        onPointerLeave: (e) => {
+          setHoveredEdge(null);
+          mouseDefault(e);
         }
       },
-      onPointerLeave: (e) => {
-        setHoveredEdge(null);
-        mouseDefault(e);
-      },
       children: /* @__PURE__ */ jsx(
         Edge,
         {

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

@@ -1,9 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { nonexhaustive } from "@likec4/core";
 import { isEqualSimple } from "@react-hookz/deep-equal/esnext";
-import { useTransition } from "@react-spring/konva";
+import { useToggle } from "@react-hookz/web/esm";
+import { useSpring, useTransition } from "@react-spring/konva";
+import { mix, toHex, lighten } from "khroma";
 import { memo, useRef } from "react";
-import { AnimatedGroup } from "../konva.js";
+import { AnimatedCircle, AnimatedGroup, Rect } from "../konva.js";
 import { Portal } from "../konva-portal.js";
 import { ZoomInIcon } from "./icons/index.js";
 import { CylinderShape, MobileShape, PersonShape, QueueShape, RectangleShape } from "./shapes/index.js";
@@ -12,6 +14,7 @@ import { CompoundShape } from "./shapes/Compound.js";
 import { mouseDefault, mousePointer } from "./shapes/utils.js";
 import { isCompound, useNodeSpringsFn } from "./springs.js";
 import { DiagramGesture, useHoveredEdge, useHoveredNodeId, useSetHoveredNode } from "./state/index.js";
+import { Group } from "react-konva";
 function nodeShape({ shape }) {
   switch (shape) {
     case "cylinder":
@@ -136,37 +139,29 @@ const NodeShape = memo(
     const isNavigatable = animate && !!node.navigateTo && !!onNodeClick;
     const Shape = nodeShape(node);
     const springs = ctrl.springs;
-    let zoomInIconY;
-    switch (node.shape) {
-      case "browser":
-      case "mobile":
-        zoomInIconY = node.size.height - 20;
-        break;
-      default:
-        zoomInIconY = node.size.height - 16;
-    }
     return /* @__PURE__ */ jsx(Portal, { selector: ".top", enabled: isHovered && !_isCompound, children: /* @__PURE__ */ jsxs(
       AnimatedGroup,
       {
         name: node.id,
         visible: expired !== true,
-        onPointerEnter: (e) => {
-          setHoveredNode(node);
-          if (isNavigatable) {
-            mousePointer(e);
+        ...animate && {
+          onPointerEnter: (_) => {
+            setHoveredNode(node);
+          },
+          onPointerLeave: (e) => {
+            setHoveredNode(null);
+            mouseDefault(e);
           }
         },
-        onPointerLeave: (e) => {
-          setHoveredNode(null);
-          mouseDefault(e);
-        },
         ...onNodeClick && {
           onPointerClick: (e) => {
             if (DiagramGesture.isDragging || e.evt.button !== 0) {
               return;
             }
             e.cancelBubble = true;
-            onNodeClick(node, e);
+            if (!isNavigatable) {
+              onNodeClick(node, e);
+            }
           }
         },
         x: springs.x,
@@ -186,14 +181,46 @@ const NodeShape = memo(
                 node,
                 theme,
                 springs,
-                labelOffsetX: isNavigatable ? -20 : 0
+                labelOffsetX: isNavigatable ? -22 : 0
               }
             ),
-            isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { opacity: 0.9, size: 20, x: 18, y: 21 })
+            isNavigatable && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Rect,
+                {
+                  x: 0,
+                  y: 0,
+                  width: node.size.width,
+                  height: Math.min(node.size.height, 150),
+                  perfectDrawEnabled: false
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CompoundZoomBtn,
+                {
+                  animate,
+                  node,
+                  ctrl,
+                  theme,
+                  isHovered,
+                  onNodeClick
+                }
+              )
+            ] })
           ] }),
           !_isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Shape, { node, theme, springs, isHovered }),
-            isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { size: 16, x: node.size.width / 2, y: zoomInIconY })
+            isNavigatable && /* @__PURE__ */ jsx(
+              NodeZoomBtn,
+              {
+                animate,
+                node,
+                ctrl,
+                theme,
+                isHovered,
+                onNodeClick
+              }
+            )
           ] })
         ]
       }
@@ -202,3 +229,165 @@ 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/ZoomIn.js

@@ -21,7 +21,8 @@ export const ZoomInIcon = ({ fill = "#BABABA", opacity = 1, size = 20, x, y }) =
       height: originalSize,
       opacity,
       perfectDrawEnabled: false,
-      globalCompositeOperation: "luminosity"
+      globalCompositeOperation: "luminosity",
+      listening: false
     }
   );
 };

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

@@ -36,7 +36,8 @@ export function CompoundShape({ node, theme, springs, labelOffsetX = 0 }) {
         wrap: "none",
         ellipsis: true,
         perfectDrawEnabled: false,
-        globalCompositeOperation: "luminosity"
+        globalCompositeOperation: "luminosity",
+        listening: false
       },
       i
     ))

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

@@ -54,7 +54,7 @@ function EdgeLabelBg({
       fill: springs.labelBgColor,
       cornerRadius: 2,
       globalCompositeOperation: "lighten",
-      hitStrokeWidth: 5
+      hitStrokeWidth: 20
     }
   );
 }