likec4 0.50.0 → 0.52.0

package/dist/@likec4/core/utils/fqn.js

@@ -67,10 +67,16 @@ export function ancestorsFqn(fqn) {
 export function compareFqnHierarchically(a, b) {
   const depthA = a.split(".").length;
   const depthB = b.split(".").length;
-  if (depthA === depthB) {
-    return 0;
-  } else {
-    return depthA - depthB;
+  switch (true) {
+    case depthA > depthB: {
+      return 1;
+    }
+    case depthA < depthB: {
+      return -1;
+    }
+    default: {
+      return 0;
+    }
   }
 }
 export function compareByFqnHierarchically(a, b) {

package/dist/@likec4/core/utils/relations.js

@@ -10,7 +10,14 @@ export const compareRelations = (a, b) => {
     return -1;
   }
   const compareParents = parentA && parentB ? compareFqnHierarchically(parentA, parentB) : 0;
-  return compareParents || compareFqnHierarchically(a.source, b.source) || compareFqnHierarchically(a.target, b.target);
+  if (compareParents === 0) {
+    const compareSource = compareFqnHierarchically(a.source, b.source);
+    if (compareSource !== 0) {
+      return compareSource;
+    }
+    return compareFqnHierarchically(a.target, b.target);
+  }
+  return compareParents;
 };
 const isInside = (parent) => {
   const prefix = parent + ".";

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

@@ -3,8 +3,9 @@ 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 { mix, toHex, lighten } from "khroma";
+import { lighten, mix, toHex } from "khroma";
 import { memo, useRef } from "react";
+import { Group } from "react-konva";
 import { AnimatedCircle, AnimatedGroup, Rect } from "../konva.js";
 import { Portal } from "../konva-portal.js";
 import { ZoomInIcon } from "./icons/index.js";
@@ -14,7 +15,6 @@ 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":

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
   });
@@ -52,7 +53,7 @@ function EdgeLabelBg({
       ...props,
       perfectDrawEnabled: false,
       fill: springs.labelBgColor,
-      cornerRadius: 2,
+      cornerRadius: 3,
       globalCompositeOperation: "lighten",
       hitStrokeWidth: 20
     }

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, Code, Flex, ScrollArea } from '@radix-ui/themes';
+import useSWR from 'swr';
 import { d2Source } from 'virtual:likec4/d2-sources';
 import { CopyToClipboard } from '../../../components';
+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 { data: krokiSvg } = useSWR(src, fetchFromKroki, {
+        keepPreviousData: true,
+        revalidateIfStale: false
+    });
+    return (<Flex gap='2' shrink='1' grow='1' align={'stretch'} wrap={'nowrap'} style={{
+            overflow: 'hidden'
         }}>
-          <Code variant='soft' autoFocus>
-            {src}
-          </Code>
-        </Box>
-      </ScrollArea>
-      <CopyToClipboard text={src}/>
-    </>);
+      <Box py={'2'} position={'relative'} style={{
+            overflow: 'scroll'
+        }}>
+        <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}/>
+      </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>);
 }

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

@@ -1,6 +1,5 @@
 import { Box, Code, Grid, ScrollArea } from '@radix-ui/themes';
 import { dotSource, svgSource } from 'virtual:likec4/dot-sources';
-import styles from '../view-page.module.css';
 import { CopyToClipboard } from '../../../components';
 export default function ViewAsDot({ viewId }) {
     const dot = dotSource(viewId);
@@ -12,7 +11,8 @@ export default function ViewAsDot({ viewId }) {
         }}>
         <ScrollArea scrollbars='both'>
           <Box asChild display={'block'} p='2' style={{
-            whiteSpace: 'pre'
+            whiteSpace: 'pre',
+            minHeight: '100%'
         }}>
             <Code variant='soft' autoFocus>
               {dot}
@@ -25,7 +25,7 @@ export default function ViewAsDot({ viewId }) {
             overflow: 'scroll',
             overscrollBehavior: 'none'
         }}>
-        <Box asChild position={'relative'} className={styles.dotSvg}>
+        <Box asChild position={'relative'} className={'svg-container'}>
           <div dangerouslySetInnerHTML={{ __html: svgSource(viewId) }}></div>
         </Box>
       </Box>

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

@@ -1,18 +1,49 @@
-import { Box, Code, ScrollArea } from '@radix-ui/themes';
+import { Box, Code, Flex, 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';
+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 (<Flex gap='2' shrink='1' grow='1' align={'stretch'} wrap={'nowrap'} style={{
+            overflow: 'hidden'
         }}>
-          <Code variant='soft' autoFocus>
-            {src}
-          </Code>
-        </Box>
-      </ScrollArea>
-      <CopyToClipboard text={src}/>
-    </>);
+      <Box py={'2'} position={'relative'} style={{
+            overflow: 'scroll'
+        }}>
+        <ScrollArea scrollbars='both'>
+          <Box asChild display={'block'} p='2' style={{
+            whiteSpace: 'pre',
+            minHeight: '100%'
+        }}>
+            <Code variant='soft' autoFocus>
+              {src}
+            </Code>
+          </Box>
+          <CopyToClipboard text={src}/>
+        </ScrollArea>
+      </Box>
+      <Box py={'2'} position={'relative'} grow={'1'} shrink={'0'} style={{
+            minWidth: '50vw',
+            overflow: 'scroll'
+        }}>
+        <ScrollArea scrollbars='both'>
+          {mmdSvg.result && (<Box grow={'1'} asChild position={'relative'} className={'svg-container'}>
+              <div dangerouslySetInnerHTML={{ __html: mmdSvg.result }}></div>
+            </Box>)}
+        </ScrollArea>
+      </Box>
+    </Flex>);
 }

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

@@ -4,32 +4,54 @@ 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 (<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='dot'>Graphviz</Tabs.Trigger>
-            <Tabs.Trigger value='mmd'>Mermaid</Tabs.Trigger>
-            <Tabs.Trigger value='d2'>D2</Tabs.Trigger>
-          </Tabs.List>
-        </Box>
+    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>
+
+          <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='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>);
+            <Tabs.Content value='d2'>
+              <ViewAsD2 viewId={viewId}/>
+            </Tabs.Content>
+          </Box>
+        </Tabs.Root>
+      </Flex>
+    </SWRConfig>);
     // switch (viewMode) {
     //   case 'dot':
     //     return <ViewAsDot viewId={viewId} />

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;
@@ -77,5 +78,9 @@
     &[hidden] {
       display: none;
     }
+
+    & :global(.rt-ScrollAreaViewport) > div {
+      height: inherit;
+    }
   }
 }