likec4 0.52.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

@@ -53,7 +53,7 @@ function EdgeLabelBg({
       ...props,
       perfectDrawEnabled: false,
       fill: springs.labelBgColor,
-      cornerRadius: 3,
+      cornerRadius: 2,
       globalCompositeOperation: "lighten",
       hitStrokeWidth: 20
     }

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/other-formats/ViewAsD2.jsx

@@ -1,7 +1,8 @@
-import { Box, Code, Flex, ScrollArea } from '@radix-ui/themes';
-import useSWR from 'swr';
+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',
@@ -21,16 +22,9 @@ const fetchFromKroki = async (d2) => {
 };
 export default function ViewAsD2({ viewId }) {
     const src = d2Source(viewId);
-    const { data: krokiSvg } = useSWR(src, fetchFromKroki, {
-        keepPreviousData: true,
-        revalidateIfStale: false
-    });
-    return (<Flex gap='2' shrink='1' grow='1' align={'stretch'} wrap={'nowrap'} style={{
-            overflow: 'hidden'
-        }}>
-      <Box py={'2'} position={'relative'} style={{
-            overflow: 'scroll'
-        }}>
+    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',
@@ -40,18 +34,24 @@ export default function ViewAsD2({ viewId }) {
               {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>
-        <CopyToClipboard text={src}/>
-      </Box>
-      {krokiSvg && (<Box py={'2'} grow={'1'} shrink={'0'} style={{
-                width: '50%',
-                overflow: 'scroll'
-            }}>
-          <ScrollArea scrollbars='both'>
-            <Box grow={'1'} asChild className={'svg-container'}>
-              <div dangerouslySetInnerHTML={{ __html: krokiSvg }}></div>
-            </Box>
-          </ScrollArea>
-        </Box>)}
-    </Flex>);
+      </Panel>
+    </PanelGroup>);
 }

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

@@ -1,14 +1,11 @@
-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 { 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',
@@ -18,16 +15,23 @@ export default function ViewAsDot({ viewId }) {
               {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={'svg-container'}>
-          <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,8 +1,9 @@
-import { Box, Code, Flex, ScrollArea } from '@radix-ui/themes';
+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({
@@ -17,12 +18,8 @@ export default function ViewAsMmd({ viewId }) {
     useEffect(() => {
         void execute(viewId, src);
     }, [src]);
-    return (<Flex gap='2' shrink='1' grow='1' align={'stretch'} wrap={'nowrap'} style={{
-            overflow: 'hidden'
-        }}>
-      <Box py={'2'} position={'relative'} style={{
-            overflow: 'scroll'
-        }}>
+    return (<PanelGroup direction='horizontal' autoSaveId='ViewAsD2'>
+      <Panel minSizePixels={100}>
         <ScrollArea scrollbars='both'>
           <Box asChild display={'block'} p='2' style={{
             whiteSpace: 'pre',
@@ -34,16 +31,16 @@ export default function ViewAsMmd({ viewId }) {
           </Box>
           <CopyToClipboard text={src}/>
         </ScrollArea>
-      </Box>
-      <Box py={'2'} position={'relative'} grow={'1'} shrink={'0'} style={{
-            minWidth: '50vw',
-            overflow: 'scroll'
-        }}>
+      </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>
-      </Box>
-    </Flex>);
+      </Panel>
+    </PanelGroup>);
 }

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

@@ -4,54 +4,35 @@ import ViewAsD2 from './other-formats/ViewAsD2';
 import ViewAsDot from './other-formats/ViewAsDot';
 import ViewAsMmd from './other-formats/ViewAsMmd';
 import styles from './view-page.module.css';
-import { SWRConfig } from 'swr';
-function localStorageProvider() {
-    // When initializing, we restore the data from `localStorage` into a map.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const map = new Map(JSON.parse(localStorage.getItem('swr-cache') || '[]'));
-    // Before unloading the app, we write back all the data into `localStorage`.
-    window.addEventListener('beforeunload', () => {
-        const appCache = JSON.stringify(Array.from(map.entries()));
-        localStorage.setItem('swr-cache', appCache);
-    });
-    // We still use the map for write & read for performance.
-    return map;
-}
 export default function ViewDiagramInOtherFormats({ viewId, viewMode }) {
-    return (<SWRConfig value={{
-            keepPreviousData: true,
-            errorRetryCount: 5,
-            provider: localStorageProvider
-        }}>
-      <Flex asChild position={'fixed'} inset={'0'} pt={'8'} pl={'8'} pr={'2'} align={'stretch'} direction={'column'}>
-        <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>
-            </Tabs.List>
-          </Box>
+    return (<Flex asChild position={'fixed'} inset={'0'} pt={'8'} pl={'8'} pr={'2'} align={'stretch'} direction={'column'}>
+      <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>
+          </Tabs.List>
+        </Box>
 
-          <Box p='2' className={styles.otherFormats} position={'relative'}>
-            <Tabs.Content value='react'>{''}</Tabs.Content>
+        <Box p='2' className={styles.otherFormats} position={'relative'}>
+          <Tabs.Content value='react'>{''}</Tabs.Content>
 
-            <Tabs.Content value='dot'>
-              <ViewAsDot viewId={viewId}/>
-            </Tabs.Content>
+          <Tabs.Content value='dot'>
+            <ViewAsDot viewId={viewId}/>
+          </Tabs.Content>
 
-            <Tabs.Content value='mmd'>
-              <ViewAsMmd viewId={viewId}/>
-            </Tabs.Content>
+          <Tabs.Content value='mmd'>
+            <ViewAsMmd viewId={viewId}/>
+          </Tabs.Content>
 
-            <Tabs.Content value='d2'>
-              <ViewAsD2 viewId={viewId}/>
-            </Tabs.Content>
-          </Box>
-        </Tabs.Root>
-      </Flex>
-    </SWRConfig>);
+          <Tabs.Content value='d2'>
+            <ViewAsD2 viewId={viewId}/>
+          </Tabs.Content>
+        </Box>
+      </Tabs.Root>
+    </Flex>);
     // switch (viewMode) {
     //   case 'dot':
     //     return <ViewAsDot viewId={viewId} />

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

@@ -68,7 +68,7 @@
   display: flex;
   align-items: stretch;
   flex: 1 1 auto;
-  overflow: scroll;
+  overflow: auto;
 
   & > :global(.rt-TabsContent) {
     display: flex;