likec4 0.45.0 → 0.46.0

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

@@ -1,19 +1,55 @@
-import { Diagram } from '@likec4/diagrams';
+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';
-import { Fragment } from 'react';
+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 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 viewId={viewId}/>;
     }
-    return (<Box position={'fixed'} inset='0' className='overflow-hidden'>
-      <Diagram diagram={diagram} padding={showUI ? Paddings : undefined} width={width} height={height} onNodeClick={node => {
+    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);
             }

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,7 +28,8 @@ 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
         };
@@ -48,6 +47,9 @@ const $route = computed([$router, $searchParams], (r, v) => {
     }
     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__/tsconfig.json

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