likec4 0.44.2 → 0.46.0

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

@@ -1,7 +1,7 @@
 import { Diagram, useDiagramApi } from '@likec4/diagrams';
 import { Box, Portal } from '@radix-ui/themes';
 import { useDebouncedEffect } from '@react-hookz/web/esm';
-import { memo } from 'react';
+import { memo, useRef } from 'react';
 function downloadBlob(blob, name) {
     // Convert your blob into a Blob URL (a special url that points to an object in the browser's memory)
     const blobUrl = URL.createObjectURL(blob);
@@ -32,13 +32,19 @@ function downloadBlob(blob, name) {
 }
 const ExportDiagram = memo(({ diagram, onCompleted }) => {
     const id = diagram.id;
-    const [ref, diagramApi] = useDiagramApi();
+    const [ref, api] = useDiagramApi();
     const padding = 20;
     const width = diagram.width + padding * 2;
     const height = diagram.height + padding * 2;
+    const onCompletedRef = useRef(onCompleted);
+    onCompletedRef.current = onCompleted;
     // To avoid flickering and double rendering
     useDebouncedEffect(() => {
-        void diagramApi.stage
+        const stage = api.stage;
+        if (!stage) {
+            return;
+        }
+        void stage
             .toBlob({
             pixelRatio: 2,
             mimeType: 'image/png',
@@ -46,17 +52,17 @@ const ExportDiagram = memo(({ diagram, onCompleted }) => {
                 if (blob) {
                     downloadBlob(blob, `${diagram.id}.png`);
                 }
-                onCompleted();
+                onCompletedRef.current();
             }
         })
             .catch(err => {
-            onCompleted();
+            onCompletedRef.current();
             // Show error after 100ms to avoid blocking the UI
             setTimeout(() => {
                 window.alert(err);
             }, 100);
         });
-    }, [id], 400);
+    }, [id, api], 400);
     return (<Portal>
       <Box position={'fixed'} style={{
             top: 0,
@@ -65,7 +71,7 @@ const ExportDiagram = memo(({ diagram, onCompleted }) => {
             height,
             transform: `translateY(${-height}px)`
         }}>
-        <Diagram ref={ref} animate={false} pannable={false} zoomable={false} diagram={diagram} padding={padding} width={width} height={height}/>
+        <Diagram ref={ref} animate={false} pannable={false} zoomable={false} minZoom={1} maxZoom={1} diagram={diagram} padding={padding} width={width} height={height}/>
       </Box>
     </Portal>);
 });

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

@@ -34,11 +34,17 @@ const ExportMenu = ({ onExport, children }) => (<DropdownMenu.Root>
   </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'>
+    return (<Flex position='fixed' top='0' right='0' p={{
+            initial: '3',
+            md: '2'
+        }} gap={'3'} justify='end' align='center'>
       <DisplayModeSelector />
       <Dialog.Root>
         <Dialog.Trigger>
-          <Button variant='solid'>
+          <Button variant='solid' size={{
+            initial: '1',
+            md: '2'
+        }}>
             <ShareIcon />
             <Text>Share</Text>
           </Button>
@@ -46,7 +52,10 @@ export const ViewActionsToolbar = ({ diagram }) => {
         <ShareDialog diagram={diagram}/>
       </Dialog.Root>
       <ExportMenu onExport={setExportTo}>
-        <Button variant='soft' color='gray'>
+        <Button variant='soft' color='gray' size={{
+            initial: '1',
+            md: '2'
+        }}>
           <Text>Export</Text>
           <CaretDownIcon />
         </Button>

package/dist/__app__/src/data/atoms.js

@@ -58,26 +58,15 @@ export const selectLikeC4ViewAtom = (viewId) => {
 if (import.meta.hot) {
     let $updateViews;
     viewsAtom.onMount = set => {
-        console.log('mount viewsAtom');
         $updateViews = set;
         return () => {
-            console.log('unmount viewsAtom');
             $updateViews = undefined;
         };
     };
     import.meta.hot.accept('/@vite-plugin-likec4/likec4-generated', md => {
         const update = md?.LikeC4Views;
-        console.debug('accept ./data update');
-        console.dir(update, {
-            colors: true,
-            compact: false,
-            depth: 10
-        });
         if (update) {
             $updateViews?.(update);
         }
-        else {
-            console.warn('no update', md);
-        }
     });
 }

package/dist/__app__/src/pages/embed.page.jsx

@@ -0,0 +1,14 @@
+import { Diagram } from '@likec4/diagrams';
+import { useWindowSize } from '@react-hookz/web/esm';
+import { DiagramNotFound } from '../components';
+import { useLikeC4View } from '../data';
+import { useTransparentBackground } from './useTransparentBackground';
+export function EmbedPage({ viewId, padding, transparentBg = true }) {
+    const { width, height } = useWindowSize();
+    const diagram = useLikeC4View(viewId);
+    useTransparentBackground(transparentBg && !!diagram);
+    if (!diagram) {
+        return <DiagramNotFound viewId={viewId}/>;
+    }
+    return (<Diagram animate={false} pannable={false} zoomable={false} diagram={diagram} padding={padding} width={width} height={height}/>);
+}

package/dist/__app__/src/pages/export.page.jsx

@@ -1,23 +1,14 @@
 import { Diagram } from '@likec4/diagrams';
 import { useWindowSize } from '@react-hookz/web/esm';
-import { useLayoutEffect } from 'react';
 import { DiagramNotFound } from '../components';
 import { useLikeC4View } from '../data';
+import { useTransparentBackground } from './useTransparentBackground';
 export function ExportPage({ viewId, padding }) {
     const { width, height } = useWindowSize();
     const diagram = useLikeC4View(viewId);
-    // To get the transparent background
-    // We need to add a class to the HTML element
-    useLayoutEffect(() => {
-        // see ../../likec4.css
-        const classname = 'transparent-bg';
-        document.body.parentElement?.classList.add(classname);
-        return () => {
-            document.body.parentElement?.classList.remove(classname);
-        };
-    }, []);
+    useTransparentBackground(!!diagram);
     if (!diagram) {
-        return <DiagramNotFound />;
+        return <DiagramNotFound viewId={viewId}/>;
     }
-    return (<Diagram animate={false} pannable={false} zoomable={false} diagram={diagram} padding={padding} width={width} height={height}/>);
+    return (<Diagram animate={false} pannable={false} zoomable={false} maxZoom={1} minZoom={1} diagram={diagram} padding={padding} width={width} height={height}/>);
 }

package/dist/__app__/src/pages/index.js

@@ -1,3 +1,4 @@
 export * from './index.page';
 export * from './export.page';
+export * from './embed.page';
 export * from './view.page';

package/dist/__app__/src/pages/useTransparentBackground.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+// To get the transparent background
+// We need to add a class to the HTML element
+export function useTransparentBackground(enabled = true) {
+    useEffect(() => {
+        const htmlEl = document.body.parentElement;
+        if (!htmlEl || !enabled)
+            return;
+        // see ../../likec4.css
+        const classname = 'transparent-bg';
+        htmlEl.classList.add(classname);
+        return () => {
+            htmlEl.classList.remove(classname);
+        };
+    }, [enabled]);
+}

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

@@ -0,0 +1,30 @@
+.diagramBg {
+  overscroll-behavior: none;
+  overflow: hidden;
+  --diagram-bg-size: 24px;
+  --diagram-bg-position-x: 0;
+  --diagram-bg-position-y: 0;
+
+  :global(.konvajs-content) {
+
+    &::before {
+      content: '';
+      position: absolute;
+      padding: 0;
+      margin: 0;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      touch-action: none;
+      user-select: none;
+      background-origin: border-box;
+      background-attachment: fixed;
+      background-image: radial-gradient(var(--gray-a3) 12%, transparent 12%);
+      background-position: var(--diagram-bg-position-x) var(--diagram-bg-position-y);
+      background-size: var(--diagram-bg-size) var(--diagram-bg-size);
+      z-index: -1;
+    }
+  }
+}

package/dist/__app__/src/pages/view.page.jsx

@@ -1,24 +1,60 @@
 import { Diagram, useDiagramApi } from '@likec4/diagrams';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
 import { useWindowSize } from '@react-hookz/web/esm';
-import { $pages } from '~/router';
+import { $pages } from '../router';
 import { DiagramNotFound, ViewActionsToolbar } from '../components';
 import { useLikeC4View } from '../data';
-const Paddings = [60, 20, 20, 20];
+import { Fragment, useCallback, useEffect, useRef } from 'react';
+import styles from './view-page.module.css';
+const Paddings = [70, 20, 20, 40];
+function round(n, d = 1) {
+    const m = Math.pow(10, d);
+    return Math.round(n * m) / m;
+}
 export function ViewPage({ viewId, showUI = true }) {
     const { width, height } = useWindowSize();
-    const [ref, diagramApi] = useDiagramApi();
     const diagram = useLikeC4View(viewId);
+    const pageDivRef = useRef(null);
+    const [ref, api] = useDiagramApi();
+    const handleTransform = useCallback(() => {
+        const stage = api.stage;
+        const style = pageDivRef.current?.style;
+        if (!stage || !style) {
+            return;
+        }
+        const pos = stage.getAbsolutePosition();
+        let scale = stage.scaleX();
+        while (scale < 0.5) {
+            scale = scale / 0.5;
+        }
+        const size = round(24 * scale);
+        const x = round(pos.x);
+        const y = round(pos.y);
+        style.setProperty('--diagram-bg-size', `${size}px`);
+        style.setProperty('--diagram-bg-position-x', `${x}px`);
+        style.setProperty('--diagram-bg-position-y', `${y}px`);
+    }, [api, pageDivRef]);
+    useEffect(() => {
+        const stage = api.stage;
+        if (!stage) {
+            return;
+        }
+        stage.on('absoluteTransformChange', handleTransform);
+        handleTransform();
+        return () => {
+            stage.off('absoluteTransformChange', handleTransform);
+        };
+    }, [api]);
     if (!diagram) {
-        return <DiagramNotFound />;
+        return <DiagramNotFound viewId={viewId}/>;
     }
-    return (<Box position={'fixed'} inset='0' className='overflow-hidden'>
+    return (<Box position={'fixed'} inset='0' className={styles.diagramBg} ref={pageDivRef}>
       <Diagram ref={ref} diagram={diagram} padding={showUI ? Paddings : undefined} width={width} height={height} onNodeClick={node => {
             if (node.navigateTo) {
                 $pages.view.open(node.navigateTo);
             }
         }} onEdgeClick={_ => ({})}/>
-      {showUI && (<>
+      {showUI && (<Fragment key='ui'>
           <Flex position={'fixed'} top='0' p='3' style={{
                 left: 54
             }} direction={'column'}>
@@ -29,7 +65,7 @@ export function ViewPage({ viewId, showUI = true }) {
               {diagram.title || 'Untitled'}
             </Heading>
           </Flex>
-          <ViewActionsToolbar diagramApi={diagramApi} diagram={diagram}/>
-        </>)}
+          <ViewActionsToolbar diagram={diagram}/>
+        </Fragment>)}
     </Box>);
 }

package/dist/__app__/src/router.js

@@ -1,5 +1,3 @@
-// stores/router.ts
-import { logger } from '@nanostores/logger';
 import { useStore } from '@nanostores/react';
 import { createSearchParams, createRouter, openPage, getPagePath } from '@nanostores/router';
 import { computed } from 'nanostores';
@@ -30,24 +28,28 @@ const $route = computed([$router, $searchParams], (r, v) => {
         return {
             route: 'view',
             params: {
-                viewId: r.params.viewId ?? 'index'
+                viewId: r.params.viewId ?? 'index',
+                theme: asTheme(v.theme) ?? 'dark'
             },
             showUI: 'showUI' in v ? v.showUI === 'true' : true
         };
     }
     if (r?.route === 'export' || r?.route === 'embed') {
         return {
-            route: 'export',
+            route: r.route,
             params: {
                 viewId: r.params.viewId,
                 padding: asPadding(v.padding),
-                theme: asTheme(v.theme)
+                theme: r.route === 'embed' ? asTheme(v.theme) : undefined
             },
             showUI: false
         };
     }
     return {
         route: 'index',
+        params: {
+            theme: asTheme(v.theme) ?? 'dark'
+        },
         showUI: 'showUI' in v ? v.showUI === 'true' : true
     };
 });
@@ -67,10 +69,10 @@ export const $pages = {
         path: (viewId) => getPagePath($router, 'embed', { viewId })
     }
 };
-if (import.meta.env.DEV) {
-    logger({
-        $searchParams,
-        $router,
-        $route
-    });
-}
+// if (import.meta.env.DEV) {
+//   logger({
+//     $searchParams,
+//     $router,
+//     $route
+//   })
+// }

package/dist/__app__/tailwind.config.cjs

@@ -1,5 +1,4 @@
 const { radixThemePreset } = require('radix-themes-tw');
-const tailwindcssAnimate = require('tailwindcss-animate');
 const { resolve } = require('node:path');
 
 /** @type {import('tailwindcss').Config} */
@@ -14,6 +13,5 @@ module.exports = {
     // ...
     // Preflight is enabled by default, we disable it here
     preflight: false
-  },
-  plugins: [tailwindcssAnimate],
+  }
 };

package/dist/__app__/tsconfig.json

@@ -21,17 +21,11 @@
     "noFallthroughCasesInSwitch": true,
     "baseUrl": ".",
     "rootDir": ".",
-    "paths": {
-      "~/*": [
-        "./src/*"
-      ]
-    },
     "types": [
       "vite/client"
     ]
   },
   "include": [
-    "src",
-    "src/likec4-views.ts"
+    "src"
   ]
 }