likec4 0.51.0 → 0.53.0

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

@@ -0,0 +1,174 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isEqualSimple } from "@react-hookz/deep-equal/esnext";
+import { useToggle } from "@react-hookz/web/esm";
+import { useSpring } from "@react-spring/konva";
+import { lighten, mix, toHex } from "khroma";
+import { memo } from "react";
+import { AnimatedCircle, AnimatedGroup, Group } from "../../konva.js";
+import { ZoomInIcon } from "../icons/index.js";
+import { DiagramGesture } from "../state/index.js";
+import { mouseDefault, mousePointer } from "../utils.js";
+export const NodeZoomBtn = memo(({ 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 })
+      ]
+    }
+  );
+}, isEqualSimple);
+NodeZoomBtn.displayName = "NodeZoomBtn";
+export const CompoundZoomBtn = memo(({
+  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 })
+          ]
+        }
+      )
+    }
+  );
+}, isEqualSimple);
+CompoundZoomBtn.displayName = "CompoundZoomBtn";

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

@@ -0,0 +1,2 @@
+export * from "./NodeLinkBtn.js";
+export * from "./NodeZoomBtn.js";

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

@@ -9,9 +9,9 @@ export function CompoundShape({ node, theme, springs, labelOffsetX = 0 }) {
         cornerRadius: 4,
         shadowColor: theme.shadow,
         shadowBlur: node.level > 0 ? 20 : 10,
-        shadowOpacity: node.level > 0 ? 0.35 : 0.8,
+        shadowOpacity: node.level > 0 ? 0.35 : 0.6,
         shadowOffsetX: 0,
-        shadowOffsetY: 4,
+        shadowOffsetY: 5,
         shadowEnabled: springs.opacity.to((v) => v > 0.7),
         width: springs.width,
         height: springs.height,

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

@@ -35,14 +35,15 @@ function EdgeLabelBg({
   isHovered,
   springs
 }) {
-  const padding = 2;
+  const paddingX = 2;
+  const paddingY = 1;
   const props = useSpring({
     to: {
-      x: labelBBox.x - padding,
-      y: labelBBox.y - padding,
-      width: labelBBox.width + padding * 2,
-      height: labelBBox.height + padding * 2,
-      opacity: isHovered ? 0.75 : 0.65
+      x: labelBBox.x - paddingX,
+      y: labelBBox.y - paddingY,
+      width: labelBBox.width + paddingX * 2,
+      height: labelBBox.height + paddingY * 2,
+      opacity: isHovered ? 0.8 : 0.55
     },
     immediate: !animate
   });

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

@@ -42,10 +42,10 @@ export const useNodeSpringsFn = (theme) => {
 export const useShadowSprings = (isHovered = false, theme, springs) => {
   const [values] = useSpring(
     {
-      shadowBlur: isHovered ? 30 : 12,
-      shadowOpacity: isHovered ? 0.5 : 0.35,
+      shadowBlur: isHovered ? 30 : 10,
+      shadowOpacity: isHovered ? 0.5 : 0.3,
       shadowOffsetX: 0,
-      shadowOffsetY: isHovered ? 16 : 4,
+      shadowOffsetY: isHovered ? 16 : 5,
       shadowColor: theme.shadow
     },
     [isHovered, theme]

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

@@ -24,7 +24,7 @@ export const hoveredNodeAtom = atom(
     if (equals(_prev, _next)) {
       return false;
     }
-    const timeout = !!_next && !!_prev ? 120 : 175;
+    const timeout = !!_next && !!_prev ? 50 : 120;
     if (_next != null) {
       clearTimeout(get(edgeTimeoutAtom));
       scheduleHoveredEdge(set, null, timeout);
@@ -57,9 +57,8 @@ export const hoveredEdgeAtom = atom(
     if (equals(_prev, _next)) {
       return false;
     }
-    let timeout = 175;
+    const timeout = !!_next && !!_prev ? 50 : 120;
     if (_next != null) {
-      timeout = _prev != null ? 120 : 300;
       clearTimeout(get(nodeTimeoutAtom));
       scheduleHoveredNode(set, null, timeout);
     }

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

@@ -12,3 +12,36 @@ export function mouseDefault(e) {
   }
 }
 export const isNumber = is(Number);
+export const getBoundingRect = (elements) => {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const element of elements) {
+    if ("size" in element && "position" in element) {
+      minX = Math.min(minX, element.position[0]);
+      minY = Math.min(minY, element.position[1]);
+      maxX = Math.max(maxX, element.position[0] + element.size.width);
+      maxY = Math.max(maxY, element.position[1] + element.size.height);
+      continue;
+    }
+    element.points.forEach(([x, y]) => {
+      minX = Math.min(minX, x);
+      minY = Math.min(minY, y);
+      maxX = Math.max(maxX, x);
+      maxY = Math.max(maxY, y);
+    });
+    if (element.labelBBox) {
+      minX = Math.min(minX, element.labelBBox.x);
+      minY = Math.min(minY, element.labelBBox.y);
+      maxX = Math.max(maxX, element.labelBBox.x + element.labelBBox.width);
+      maxY = Math.max(maxY, element.labelBBox.y + element.labelBBox.height);
+    }
+  }
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+};

package/dist/__app__/src/App.jsx

@@ -9,29 +9,22 @@ import { useRoute } from './router';
 const Routes = () => {
     const r = useDeferredValue(useRoute());
     const theme = r.params?.theme;
-    let page = null;
-    switch (r.route) {
-        case 'view': {
-            page = (<ViewPage key='view' viewId={r.params.viewId} viewMode={r.params.mode} showUI={r.showUI}/>);
-            break;
+    const page = () => {
+        switch (r.route) {
+            case 'view':
+                return <ViewPage viewId={r.params.viewId} viewMode={r.params.mode} showUI={r.showUI}/>;
+            case 'export':
+                return <ExportPage viewId={r.params.viewId} padding={r.params.padding}/>;
+            case 'embed':
+                return (<EmbedPage viewId={r.params.viewId} padding={r.params.padding} transparentBg={isNil(r.params.theme)}/>);
+            case 'index':
+                return <IndexPage />;
+            default:
+                nonexhaustive(r);
         }
-        case 'export': {
-            page = <ExportPage key='export' viewId={r.params.viewId} padding={r.params.padding}/>;
-            break;
-        }
-        case 'embed': {
-            page = (<EmbedPage key='embed' viewId={r.params.viewId} padding={r.params.padding} transparentBg={isNil(r.params.theme)}/>);
-            break;
-        }
-        case 'index': {
-            page = <IndexPage key='index'/>;
-            break;
-        }
-        default:
-            nonexhaustive(r);
-    }
+    };
     return (<Theme hasBackground={!!theme} accentColor='indigo' radius='small' appearance={theme ?? 'inherit'}>
-      {page}
+      {page()}
       <Fragment key='ui'>{r.showUI && <Sidebar />}</Fragment>
     </Theme>);
 };

package/dist/__app__/src/pages/view-page/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { lazy } from 'react';
 export * from './ViewAsReact';
-export const ViewAs = lazy(() => import('./other-formats'));
+export const ViewAs = lazy(async () => await import('./other-formats'));
 // export const ViewAs = {
 //   Dot: ViewAsDot,
 //   D2: ViewAsD2,

package/dist/__app__/src/pages/view-page/other-formats/ViewAsD2.jsx

@@ -1,18 +1,57 @@
-import { Box, Code, ScrollArea } from '@radix-ui/themes';
+import { Box, Button, Code, ScrollArea } from '@radix-ui/themes';
+import { useAsync } from '@react-hookz/web/esm';
 import { d2Source } from 'virtual:likec4/d2-sources';
 import { CopyToClipboard } from '../../../components';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+const fetchFromKroki = async (d2) => {
+    const res = await fetch('https://kroki.io/d2/svg', {
+        method: 'POST',
+        cache: 'force-cache',
+        body: JSON.stringify({
+            diagram_source: d2,
+            // diagram_options: {
+            //   theme: 'colorblind-clear'
+            // },
+            output_format: 'svg'
+        }),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+    return await res.text();
+};
 export default function ViewAsD2({ viewId }) {
     const src = d2Source(viewId);
-    return (<>
-      <ScrollArea scrollbars='both'>
-        <Box asChild display={'block'} p='2' style={{
-            whiteSpace: 'pre'
+    const [krokiSvg, { execute }] = useAsync(fetchFromKroki, null);
+    return (<PanelGroup direction='horizontal' autoSaveId='ViewAsD2'>
+      <Panel minSizePixels={100}>
+        <ScrollArea scrollbars='both'>
+          <Box asChild display={'block'} p='2' style={{
+            whiteSpace: 'pre',
+            minHeight: '100%'
         }}>
-          <Code variant='soft' autoFocus>
-            {src}
-          </Code>
-        </Box>
-      </ScrollArea>
-      <CopyToClipboard text={src}/>
-    </>);
+            <Code variant='soft' autoFocus>
+              {src}
+            </Code>
+          </Box>
+          <CopyToClipboard text={src}/>
+        </ScrollArea>
+      </Panel>
+      <PanelResizeHandle style={{
+            width: 10
+        }}/>
+      <Panel minSizePixels={100}>
+        <ScrollArea scrollbars='both'>
+          {krokiSvg.status !== 'success' && (<>
+              <Button disabled={krokiSvg.status === 'loading'} onClick={() => void execute(src)}>
+                {krokiSvg.status === 'loading' ? 'Loading...' : 'Render with Kroki'}
+              </Button>
+              {krokiSvg.status === 'error' && <Box>{krokiSvg.error?.message}</Box>}
+            </>)}
+          {krokiSvg.status === 'success' && (<Box grow={'1'} asChild className={'svg-container'}>
+              {!krokiSvg.result ? (<Box>Empty result</Box>) : (<div dangerouslySetInnerHTML={{ __html: krokiSvg.result }}></div>)}
+            </Box>)}
+        </ScrollArea>
+      </Panel>
+    </PanelGroup>);
 }

package/dist/__app__/src/pages/view-page/other-formats/ViewAsDot.jsx

@@ -1,33 +1,37 @@
-import { Box, Code, Grid, ScrollArea } from '@radix-ui/themes';
+import { Box, Code, ScrollArea } from '@radix-ui/themes';
 import { dotSource, svgSource } from 'virtual:likec4/dot-sources';
-import styles from '../view-page.module.css';
 import { CopyToClipboard } from '../../../components';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 export default function ViewAsDot({ viewId }) {
     const dot = dotSource(viewId);
-    return (<Grid 
-    //@ts-expect-error TODO: fails on columns prop due to `exactOptionalPropertyTypes: true` in tsconfig
-    columns='2' gap='2' shrink='1' grow='1'>
-      <Box py={'2'} position={'relative'} style={{
-            overflow: 'scroll'
-        }}>
+    return (<PanelGroup direction='horizontal' autoSaveId='viewAsDot'>
+      <Panel minSizePixels={100}>
         <ScrollArea scrollbars='both'>
           <Box asChild display={'block'} p='2' style={{
-            whiteSpace: 'pre'
+            whiteSpace: 'pre',
+            minHeight: '100%'
         }}>
             <Code variant='soft' autoFocus>
               {dot}
             </Code>
           </Box>
+          <CopyToClipboard text={dot}/>
         </ScrollArea>
-        <CopyToClipboard text={dot}/>
-      </Box>
-      <Box py={'2'} style={{
+      </Panel>
+      <PanelResizeHandle style={{
+            width: 10
+        }}/>
+      <Panel minSizePixels={100}>
+        <ScrollArea scrollbars='both'>
+          <Box py={'2'} style={{
             overflow: 'scroll',
             overscrollBehavior: 'none'
         }}>
-        <Box asChild position={'relative'} className={styles.dotSvg}>
-          <div dangerouslySetInnerHTML={{ __html: svgSource(viewId) }}></div>
-        </Box>
-      </Box>
-    </Grid>);
+            <Box asChild position={'relative'} className={'svg-container'}>
+              <div dangerouslySetInnerHTML={{ __html: svgSource(viewId) }}></div>
+            </Box>
+          </Box>
+        </ScrollArea>
+      </Panel>
+    </PanelGroup>);
 }

package/dist/__app__/src/pages/view-page/other-formats/ViewAsMmd.jsx

@@ -1,18 +1,46 @@
 import { Box, Code, ScrollArea } from '@radix-ui/themes';
+import { useAsync } from '@react-hookz/web/esm';
+import { useEffect } from 'react';
 import { mmdSource } from 'virtual:likec4/mmd-sources';
 import { CopyToClipboard } from '../../../components';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+const renderSvg = async (viewId, diagram) => {
+    const { default: mermaid } = await import('https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs');
+    mermaid.initialize({
+        theme: 'dark'
+    });
+    const { svg } = await mermaid.render(viewId, diagram);
+    return svg;
+};
 export default function ViewAsMmd({ viewId }) {
     const src = mmdSource(viewId);
-    return (<>
-      <ScrollArea scrollbars='both'>
-        <Box asChild display={'block'} p='2' style={{
-            whiteSpace: 'pre'
+    const [mmdSvg, { execute }] = useAsync(renderSvg, null);
+    useEffect(() => {
+        void execute(viewId, src);
+    }, [src]);
+    return (<PanelGroup direction='horizontal' autoSaveId='ViewAsD2'>
+      <Panel minSizePixels={100}>
+        <ScrollArea scrollbars='both'>
+          <Box asChild display={'block'} p='2' style={{
+            whiteSpace: 'pre',
+            minHeight: '100%'
         }}>
-          <Code variant='soft' autoFocus>
-            {src}
-          </Code>
-        </Box>
-      </ScrollArea>
-      <CopyToClipboard text={src}/>
-    </>);
+            <Code variant='soft' autoFocus>
+              {src}
+            </Code>
+          </Box>
+          <CopyToClipboard text={src}/>
+        </ScrollArea>
+      </Panel>
+      <PanelResizeHandle style={{
+            width: 10
+        }}/>
+      <Panel minSizePixels={100}>
+        <ScrollArea scrollbars='both'>
+          {mmdSvg.result && (<Box grow={'1'} asChild position={'relative'} className={'svg-container'}>
+              <div dangerouslySetInnerHTML={{ __html: mmdSvg.result }}></div>
+            </Box>)}
+        </ScrollArea>
+      </Panel>
+    </PanelGroup>);
 }

package/dist/__app__/src/pages/view-page/other-formats.jsx

@@ -9,6 +9,7 @@ export default function ViewDiagramInOtherFormats({ viewId, viewMode }) {
       <Tabs.Root value={viewMode} onValueChange={mode => mode !== viewMode && updateSearchParams({ mode: mode })}>
         <Box asChild shrink={'0'} grow={'0'}>
           <Tabs.List>
+            <Tabs.Trigger value='react'>React</Tabs.Trigger>
             <Tabs.Trigger value='dot'>Graphviz</Tabs.Trigger>
             <Tabs.Trigger value='mmd'>Mermaid</Tabs.Trigger>
             <Tabs.Trigger value='d2'>D2</Tabs.Trigger>
@@ -16,6 +17,8 @@ export default function ViewDiagramInOtherFormats({ viewId, viewMode }) {
         </Box>
 
         <Box p='2' className={styles.otherFormats} position={'relative'}>
+          <Tabs.Content value='react'>{''}</Tabs.Content>
+
           <Tabs.Content value='dot'>
             <ViewAsDot viewId={viewId}/>
           </Tabs.Content>

package/dist/__app__/src/pages/view-page/view-page.module.css

@@ -56,7 +56,8 @@
   }
 } */
 
-.dotSvg {
+:global(.svg-container) {
+  min-width: 300px;
   & > svg {
     width: 100%;
     height: auto;
@@ -67,7 +68,7 @@
   display: flex;
   align-items: stretch;
   flex: 1 1 auto;
-  overflow: scroll;
+  overflow: auto;
 
   & > :global(.rt-TabsContent) {
     display: flex;
@@ -77,5 +78,9 @@
     &[hidden] {
       display: none;
     }
+
+    & :global(.rt-ScrollAreaViewport) > div {
+      height: inherit;
+    }
   }
 }