likec4 0.41.0 → 0.42.0

package/dist/__app__/src/App.jsx

@@ -6,7 +6,7 @@ import { useRoute } from './router';
 import { Theme } from '@radix-ui/themes';
 const Routes = () => {
     const r = useRoute();
-    return (<Theme accentColor='iris' panelBackground='translucent' appearance={r.params?.theme} radius='small'>
+    return (<Theme hasBackground={r.route !== 'export'} accentColor='indigo' radius='small' appearance={r.params?.theme}>
       {r.route === 'index' && <IndexPage key='index'/>}
       {r.route === 'view' && <ViewPage key='view' viewId={r.params.viewId} showUI={r.showUI}/>}
       {r.route === 'export' && (<ExportPage key='export' viewId={r.params.viewId} padding={r.params.padding}/>)}

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

@@ -0,0 +1,72 @@
+import { Diagram, useDiagramApi } from '@likec4/diagrams';
+import { Box, Portal } from '@radix-ui/themes';
+import { useDebouncedEffect } from '@react-hookz/web/esm';
+import { memo } 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);
+    // Create a link element
+    const link = document.createElement('a');
+    link.style.display = 'none';
+    // Set link's href to point to the Blob URL
+    link.href = blobUrl;
+    link.download = name;
+    // Click handler that releases the object URL after the element has been clicked
+    // This is required for one-off downloads of the blob content
+    const clickHandler = () => {
+        setTimeout(() => {
+            URL.revokeObjectURL(blobUrl);
+            removeEventListener('click', clickHandler);
+            document.body.removeChild(link);
+        }, 200);
+    };
+    link.addEventListener('click', clickHandler, false);
+    // Append link to the body
+    document.body.appendChild(link);
+    // Dispatch click event on the link
+    link.dispatchEvent(new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: window
+    }));
+}
+const ExportDiagram = memo(({ diagram, onCompleted }) => {
+    const id = diagram.id;
+    const [ref, diagramApi] = useDiagramApi();
+    const padding = 20;
+    const width = diagram.width + padding * 2;
+    const height = diagram.height + padding * 2;
+    // To avoid flickering and double rendering
+    useDebouncedEffect(() => {
+        void diagramApi.stage
+            .toBlob({
+            pixelRatio: 2,
+            mimeType: 'image/png',
+            callback(blob) {
+                if (blob) {
+                    downloadBlob(blob, `${diagram.id}.png`);
+                }
+                onCompleted();
+            }
+        })
+            .catch(err => {
+            onCompleted();
+            // Show error after 100ms to avoid blocking the UI
+            setTimeout(() => {
+                window.alert(err);
+            }, 100);
+        });
+    }, [id], 400);
+    return (<Portal>
+      <Box position={'fixed'} style={{
+            top: 0,
+            left: 0,
+            width,
+            height,
+            transform: `translateY(${-height}px)`
+        }}>
+        <Diagram ref={ref} animate={false} pannable={false} zoomable={false} diagram={diagram} padding={padding} width={width} height={height}/>
+      </Box>
+    </Portal>);
+});
+export default ExportDiagram;

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

@@ -1,8 +1,10 @@
 import { CaretDownIcon, Share1Icon as ShareIcon } from '@radix-ui/react-icons';
-import { Button, Dialog, DropdownMenu, Flex, Text } from '@radix-ui/themes';
-import { ThemePanelToggle } from '../ThemePanelToggle';
+import { Button, Dialog, DropdownMenu, Flex, IconButton, Separator, Text } from '@radix-ui/themes';
+import { useState } from 'react';
+// import { ThemePanelToggle } from '../ThemePanelToggle'
+import ExportDiagram from './ExportDiagram';
 import { ShareDialog } from './ShareDialog';
-const ExportMenu = ({ diagramApi, children }) => (<DropdownMenu.Root>
+const ExportMenu = ({ onExport, children }) => (<DropdownMenu.Root>
     <DropdownMenu.Trigger>{children}</DropdownMenu.Trigger>
     <DropdownMenu.Content>
       <DropdownMenu.Label>
@@ -10,8 +12,12 @@ const ExportMenu = ({ diagramApi, children }) => (<DropdownMenu.Root>
       </DropdownMenu.Label>
       <DropdownMenu.Group>
         <DropdownMenu.Item onClick={_ => {
+        onExport('png');
         // const { boundingBox } = diagramApi.diagramView()
-        console.log('Serialized: ', diagramApi.stage.toObject());
+        // console.log('Serialized: ', diagramApi.stage.toObject())
+        // const k = new KonvaCore.Canvas({
+        //   height: diagramApi.
+        // })
         // diagramApi.stage().toBlob({
         //   ...boundingBox,
         //   callback(blob) {
@@ -27,21 +33,40 @@ const ExportMenu = ({ diagramApi, children }) => (<DropdownMenu.Root>
     }}>
           Export as .png
         </DropdownMenu.Item>
-        <DropdownMenu.Item>Export as .dot</DropdownMenu.Item>
-        <DropdownMenu.Item>Export as .d2</DropdownMenu.Item>
-        <DropdownMenu.Item>Export as .mmd</DropdownMenu.Item>
+        <DropdownMenu.Item disabled>Export as .dot</DropdownMenu.Item>
+        <DropdownMenu.Item disabled>Export as .mmd</DropdownMenu.Item>
+        <DropdownMenu.Item disabled>Export as .d2</DropdownMenu.Item>
       </DropdownMenu.Group>
       <DropdownMenu.Separator />
       <DropdownMenu.Label>
         <Text weight='medium'>All views</Text>
       </DropdownMenu.Label>
       <DropdownMenu.Group>
-        <DropdownMenu.Item>Download as ZIP</DropdownMenu.Item>
+        <DropdownMenu.Item disabled>Download as ZIP</DropdownMenu.Item>
       </DropdownMenu.Group>
     </DropdownMenu.Content>
   </DropdownMenu.Root>);
-export const ViewActionsToolbar = ({ diagramApi, diagram }) => {
-    return (<Flex position='fixed' top='0' right='0' p='2' gap={'3'} justify='end'>
+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'>
+      <Flex display={{
+            initial: 'none',
+            md: 'flex'
+        }} gap='3' align='center'>
+        <Button variant='solid' size='1'>
+          React
+        </Button>
+        <Button variant='ghost' size='1'>
+          Graphviz
+        </Button>
+        <Button variant='ghost' size='1'>
+          Mermaid
+        </Button>
+        <IconButton variant='ghost' size='1'>
+          <CaretDownIcon />
+        </IconButton>
+        <Separator orientation='vertical'/>
+      </Flex>
       <Dialog.Root>
         <Dialog.Trigger>
           <Button variant='solid'>
@@ -51,12 +76,13 @@ export const ViewActionsToolbar = ({ diagramApi, diagram }) => {
         </Dialog.Trigger>
         <ShareDialog diagram={diagram}/>
       </Dialog.Root>
-      <ExportMenu diagramApi={diagramApi}>
+      <ExportMenu onExport={setExportTo}>
         <Button variant='soft' color='gray'>
           <Text>Export</Text>
           <CaretDownIcon />
         </Button>
       </ExportMenu>
-      <ThemePanelToggle />
+      {exportTo === 'png' && (<ExportDiagram key={'export-diagram-png'} diagram={diagram} onCompleted={() => setExportTo(null)}/>)}
+      {/* <ThemePanelToggle /> */}
     </Flex>);
 };