likec4 0.43.0 → 0.44.0

package/README.md

@@ -4,10 +4,10 @@
 
 Features:
 
-- preview diagrams in a local web server (with fast hot-reload on changes)
-- build a static website for sharing and embedding diagrams
-- export to PNG, Mermaid, Dot, D2
-- generate React components
+- 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) 🖼️
+- Generate React components (for custom integrations ) 🛠️
 
 ## Install
 
@@ -33,10 +33,6 @@ You can reference it directly in the `package.json#scripts` object:
 }
 ```
 
-> **Template:**  
-> Check out the template repository [likec4/template](https://github.com/likec4/template)  
-> with pre-configured CI for building and deploying to github pages.
-
 To use the binary, you can call it with [`npx`](https://docs.npmjs.com/cli/v10/commands/npx) while in the project directory:
 
 ```sh
@@ -88,14 +84,15 @@ Any changes in the sources trigger a super-fast hot update and you see changes i
 
 ### Build static website
 
-Example [https://template.likec4.dev](https://template.likec4.dev/view/cloud)  
-Build a single-page application with all diagrams:
+Build a single HTML with diagrams, ready to be embedded into your website:
 
 ```sh
 likec4 build -o ./dist
 ```
 
-When you deploy the website, you can use "Share" button to get a link to a specific diagram.
+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.
 
 > **Tip:**  
 > [likec4/template](https://github.com/likec4/template) repository demonstrates how to deploy to github pages.
@@ -106,13 +103,16 @@ There is also a supplementary command to preview the build:
 likec4 preview -o ./dist
 ```
 
+For example, this command can be used on CI, to compare diagrams with ones from the previous/main build.
+
 ### Export to PNG
 
 ```sh
 likec4 export png -o ./assets
 ```
 
-This command starts temporary local web server and uses [Playwright](https://playwright.dev/) to take screenshots of diagrams.
+This command starts 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 Mermaid, Dot, D2
 
@@ -131,11 +131,15 @@ likec4 codegen d2
 likec4 codegen react --outfile ./src/likec4.generated.tsx
 ```
 
+Check [documentation](https://likec4.dev/docs/tools/react/)
+
 > Output file should have `.tsx` extension  
 > By default, it generates `likec4.generated.tsx` in current directory
 
 ### Generate structured data
 
+Generate a TypeScript file with `LikeC4Views` object, which contains all diagrams and their metadata.
+
 ```sh
 likec4 codegen views-data --outfile ./src/likec4.generated.ts
 
@@ -147,6 +151,18 @@ likec4 codegen ts ...
 > Output file should have `.ts` extension  
 > By default, it generates `likec4.generated.ts` in current directory
 
+## Development
+
+In root workspace:
+
+```sh
+yarn install
+yarn build
+
+cd packages/likec4
+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! 🙂

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

@@ -86,24 +86,22 @@ export function Edges({ animate, theme, diagram, onEdgeClick }) {
   return edgeTransitions((springs, edge, { key }) => /* @__PURE__ */ jsx(
     Group,
     {
-      ...onEdgeClick && {
-        onPointerClick: (e) => {
-          if (DiagramGesture.isDragging || e.evt.button !== 0) {
-            return;
-          }
-          e.cancelBubble = true;
-          onEdgeClick(edge, e);
-        },
-        onPointerEnter: (e) => {
-          if (animate) {
-            setHoveredEdge(edge);
-            mousePointer(e);
-          }
-        },
-        onPointerLeave: (e) => {
-          setHoveredEdge(null);
-          mouseDefault(e);
+      onPointerClick: (e) => {
+        if (!onEdgeClick || DiagramGesture.isDragging || e.evt.button !== 0) {
+          return;
         }
+        e.cancelBubble = true;
+        onEdgeClick(edge, e);
+      },
+      onPointerEnter: (e) => {
+        if (animate) {
+          setHoveredEdge(edge);
+          mousePointer(e);
+        }
+      },
+      onPointerLeave: (e) => {
+        setHoveredEdge(null);
+        mouseDefault(e);
       },
       children: /* @__PURE__ */ jsx(
         EdgeShape,

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

@@ -1,9 +1,10 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { nonexhaustive } from "@likec4/core";
 import { useTransition } from "@react-spring/konva";
 import { useRef } from "react";
 import { AnimatedGroup } 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";
 import { BrowserShape } from "./shapes/Browser.js";
 import { CompoundShape } from "./shapes/Compound.js";
@@ -137,9 +138,11 @@ function NodeSnape({
   onNodeClick
 }) {
   const setHoveredNode = useSetHoveredNode();
-  const Shape = isCompound(node) ? CompoundShape : nodeShape(node);
+  const _isCompound = isCompound(node);
+  const isNavigatable = !!node.navigateTo && !!onNodeClick;
+  const Shape = nodeShape(node);
   const springs = ctrl.springs;
-  return /* @__PURE__ */ jsx(Portal, { selector: ".top", enabled: isHovered && !isCompound(node), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Portal, { selector: ".top", enabled: isHovered && !_isCompound, children: /* @__PURE__ */ jsxs(
     AnimatedGroup,
     {
       name: node.id,
@@ -172,7 +175,32 @@ function NodeSnape({
       scaleX: springs.scaleX,
       scaleY: springs.scaleY,
       opacity: springs.opacity,
-      children: /* @__PURE__ */ jsx(Shape, { node, theme, springs, isHovered })
+      children: [
+        _isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            CompoundShape,
+            {
+              node,
+              theme,
+              springs,
+              labelOffsetX: isNavigatable ? -12 : 4
+            }
+          ),
+          isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { fill: "#BABABA", opacity: 0.9, size: 16, x: 16, y: 18 })
+        ] }),
+        !_isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Shape, { node, theme, springs, isHovered }),
+          isNavigatable && /* @__PURE__ */ jsx(
+            ZoomInIcon,
+            {
+              fill: "#BABABA",
+              size: 16,
+              x: node.size.width / 2,
+              y: node.size.height - 20
+            }
+          )
+        ] })
+      ]
     }
   ) });
 }

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

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { Path } from "../../konva.js";
+export const ZoomInIcon = ({ fill, opacity = 1, size = 20, x, y }) => {
+  const originalSize = 15;
+  const scale = size / originalSize;
+  const offsetIcon = originalSize / 2;
+  return /* @__PURE__ */ jsx(
+    Path,
+    {
+      data: "M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159ZM4.25 6.5C4.25 6.22386 4.47386 6 4.75 6H6V4.75C6 4.47386 6.22386 4.25 6.5 4.25C6.77614 4.25 7 4.47386 7 4.75V6H8.25C8.52614 6 8.75 6.22386 8.75 6.5C8.75 6.77614 8.52614 7 8.25 7H7V8.25C7 8.52614 6.77614 8.75 6.5 8.75C6.22386 8.75 6 8.52614 6 8.25V7H4.75C4.47386 7 4.25 6.77614 4.25 6.5Z",
+      fill,
+      fillRule: "evenodd",
+      strokeEnabled: false,
+      x,
+      y,
+      offsetX: offsetIcon,
+      offsetY: offsetIcon,
+      scaleX: scale,
+      scaleY: scale,
+      width: originalSize,
+      height: originalSize,
+      opacity,
+      globalCompositeOperation: "luminosity",
+      hitStrokeWidth: 5
+    }
+  );
+};

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

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

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

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatedRect, AnimatedText } from "../../konva.js";
-export function CompoundShape({ node, theme, springs }) {
+export function CompoundShape({ node, theme, springs, labelOffsetX = 4 }) {
   const { labels } = node;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -24,9 +24,9 @@ export function CompoundShape({ node, theme, springs }) {
       AnimatedText,
       {
         x,
-        y: y - label.fontSize / 2,
-        offsetX: 4,
-        offsetY: 4,
+        y: y - 4,
+        offsetX: labelOffsetX,
+        offsetY: label.fontSize / 2,
         width: springs.width.to((v) => v - x - 4),
         fill: "#BABABA",
         fontFamily: theme.font,

package/dist/@likec4/diagrams/diagram/state/atoms.js

@@ -7,6 +7,7 @@ export const hoveredNodeAtom = atom(
   (get) => get(currentHoveredNodeAtom),
   (get, set, update) => {
     clearTimeout(get(nodeTimeoutAtom));
+    clearTimeout(get(edgeTimeoutAtom));
     const _prev = get(currentHoveredNodeAtom);
     const _next = typeof update === "function" ? update(_prev) : update;
     if (equals(_prev, _next)) {
@@ -17,7 +18,6 @@ export const hoveredNodeAtom = atom(
         nodeTimeoutAtom,
         setTimeout(() => {
           set(currentHoveredNodeAtom, _next);
-          clearTimeout(get(edgeTimeoutAtom));
           set(currentHoveredEdgeAtom, null);
         }, 200)
       );
@@ -28,6 +28,7 @@ export const hoveredNodeAtom = atom(
         nodeTimeoutAtom,
         setTimeout(() => {
           set(currentHoveredNodeAtom, _next);
+          set(currentHoveredEdgeAtom, null);
         }, 150)
       );
       return true;
@@ -37,7 +38,7 @@ export const hoveredNodeAtom = atom(
         nodeTimeoutAtom,
         setTimeout(() => {
           set(currentHoveredNodeAtom, null);
-        }, 200)
+        }, 150)
       );
       return true;
     }
@@ -51,6 +52,7 @@ const edgeTimeoutAtom = atom(void 0);
 export const hoveredEdgeAtom = atom(
   (get) => get(currentHoveredEdgeAtom),
   (get, set, update) => {
+    clearTimeout(get(nodeTimeoutAtom));
     clearTimeout(get(edgeTimeoutAtom));
     const _prev = get(currentHoveredEdgeAtom);
     const _next = typeof update === "function" ? update(_prev) : update;
@@ -62,9 +64,8 @@ export const hoveredEdgeAtom = atom(
         edgeTimeoutAtom,
         setTimeout(() => {
           set(currentHoveredEdgeAtom, _next);
-          clearTimeout(get(nodeTimeoutAtom));
           set(currentHoveredNodeAtom, null);
-        }, 600)
+        }, 400)
       );
       return true;
     }
@@ -73,7 +74,8 @@ export const hoveredEdgeAtom = atom(
         edgeTimeoutAtom,
         setTimeout(() => {
           set(currentHoveredEdgeAtom, _next);
-        }, 200)
+          set(currentHoveredNodeAtom, null);
+        }, 150)
       );
       return true;
     }
@@ -82,7 +84,7 @@ export const hoveredEdgeAtom = atom(
         edgeTimeoutAtom,
         setTimeout(() => {
           set(currentHoveredEdgeAtom, null);
-        }, 300)
+        }, 150)
       );
       return true;
     }

package/dist/__app__/src/components/view-page/DisplayModeSelector.jsx

@@ -0,0 +1,50 @@
+import { CaretDownIcon } from '@radix-ui/react-icons';
+import { Button, DropdownMenu, Flex, IconButton, Separator } from '@radix-ui/themes';
+import { useState } from 'react';
+import { keys } from 'remeda';
+const Mode = {
+    react: 'React',
+    dot: 'Graphviz',
+    mmd: 'Mermaid',
+    d2: 'D2'
+};
+const mode_keys = keys.strict(Mode);
+export const DisplayModeSelector = () => {
+    const [current, setCurrent] = useState('react');
+    const [[first, second, ...rest], setModes] = useState(mode_keys);
+    const changeMode = (mode) => () => {
+        if (mode === current) {
+            return;
+        }
+        setCurrent(mode);
+        if (mode === first || mode === second) {
+            return;
+        }
+        // change only second
+        setModes(([first, ...rest]) => [first, mode, ...rest.filter(m => m !== mode)]);
+    };
+    return (<Flex display={{
+            initial: 'none',
+            md: 'flex'
+        }} gap='3' align='center'>
+      <Button variant={current === first ? 'solid' : 'ghost'} size='1' onClick={changeMode(first)}>
+        {Mode[first]}
+      </Button>
+      <Button variant={current === second ? 'solid' : 'ghost'} size='1' onClick={changeMode(second)}>
+        {Mode[second]}
+      </Button>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <IconButton variant='ghost' size='1'>
+            <CaretDownIcon />
+          </IconButton>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          {rest.map(mode => (<DropdownMenu.Item key={mode} onClick={changeMode(mode)}>
+              {Mode[mode]}
+            </DropdownMenu.Item>))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+      <Separator orientation='vertical'/>
+    </Flex>);
+};

package/dist/__app__/src/components/view-page/ViewActionsToolbar.jsx

@@ -1,7 +1,8 @@
 import { CaretDownIcon, Share1Icon as ShareIcon } from '@radix-ui/react-icons';
-import { Button, Dialog, DropdownMenu, Flex, IconButton, Separator, Text } from '@radix-ui/themes';
+import { Button, Dialog, DropdownMenu, Flex, Text } from '@radix-ui/themes';
 import { useState } from 'react';
 // import { ThemePanelToggle } from '../ThemePanelToggle'
+import { DisplayModeSelector } from './DisplayModeSelector';
 import ExportDiagram from './ExportDiagram';
 import { ShareDialog } from './ShareDialog';
 const ExportMenu = ({ onExport, children }) => (<DropdownMenu.Root>
@@ -13,29 +14,14 @@ const ExportMenu = ({ onExport, children }) => (<DropdownMenu.Root>
       <DropdownMenu.Group>
         <DropdownMenu.Item onClick={_ => {
         onExport('png');
-        // const { boundingBox } = diagramApi.diagramView()
-        // console.log('Serialized: ', diagramApi.stage.toObject())
-        // const k = new KonvaCore.Canvas({
-        //   height: diagramApi.
-        // })
-        // diagramApi.stage().toBlob({
-        //   ...boundingBox,
-        //   callback(blob) {
-        //     const url = URL.createObjectURL(blob)
-        //     window.open(url)
-        //     // const a = document.createElement('a')
-        //     // a.href = url
-        //     // a.download = 'diagram.png'
-        //     // a.click()
-        //     URL.revokeObjectURL(url)
-        //   },
-        // })
     }}>
           Export as .png
         </DropdownMenu.Item>
         <DropdownMenu.Item disabled>Export as .dot</DropdownMenu.Item>
         <DropdownMenu.Item disabled>Export as .mmd</DropdownMenu.Item>
         <DropdownMenu.Item disabled>Export as .d2</DropdownMenu.Item>
+        <DropdownMenu.Item disabled>Export to Draw.io</DropdownMenu.Item>
+        <DropdownMenu.Item disabled>Export to Miro</DropdownMenu.Item>
       </DropdownMenu.Group>
       <DropdownMenu.Separator />
       <DropdownMenu.Label>
@@ -49,24 +35,7 @@ const ExportMenu = ({ onExport, children }) => (<DropdownMenu.Root>
 export const ViewActionsToolbar = ({ diagram }) => {
     const [exportTo, setExportTo] = useState(null);
     return (<Flex position='fixed' top='0' right='0' p='2' gap={'3'} justify='end' align='center'>
-      <Flex display={{
-            initial: 'none',
-            md: 'flex'
-        }} gap='3' align='center'>
-        <Button variant='solid' size='1'>
-          React
-        </Button>
-        <Button variant='ghost' size='1'>
-          Graphviz
-        </Button>
-        <Button variant='ghost' size='1'>
-          Mermaid
-        </Button>
-        <IconButton variant='ghost' size='1'>
-          <CaretDownIcon />
-        </IconButton>
-        <Separator orientation='vertical'/>
-      </Flex>
+      <DisplayModeSelector />
       <Dialog.Root>
         <Dialog.Trigger>
           <Button variant='solid'>