likec4 0.41.0 → 0.42.1

package/README.md

@@ -1,3 +1,111 @@
 # LikeC4
 
+`likec4` is a CLI tool for various operations and automation over LikeC4 projects, such as:
+
+1. LikeC4
+   1. Install
+      1. Local installation
+      2. Global installation
+   2. Usage
+      1. Preview diagrams
+      2. Build static website
+      3. Export to PNG
+      4. Export to Mermaid, Dot, D2
+      5. Generate React components
+      6. Generate structured data
+   3. Support
+
+## Install
+
+> **Compatibility Note:**  
+> LikeC4 requires [Node.js](https://nodejs.org/en/) version 18+, 20+
+
+### Local installation
+
+If you're using it in an npm project, install it as a development dependency:
+
+```sh
+npm install --save-dev likec4
+```
+
+You can reference it directly in the `package.json#scripts` object:
+
+```json5
+{
+  scripts: {
+    dev: 'likec4 serve ...',
+    build: 'likec4 build ...'
+  }
+}
+```
+
+> Check out the template repository [likec4/template](https://github.com/likec4/template)
+> with pre-configured CI for building and deploying to github pages.
+
+To use the binary, you can call it with [`npx`](https://docs.npmjs.com/cli/v10/commands/npx) while in the project directory:
+
+```sh
+npx likec4 ...
+```
+
+### Global installation
+
+If you want to use it in any arbitrary project without [`npx`](https://docs.npmjs.com/cli/v10/commands/npx), install it globally:
+
+```sh
+npm install --global likec4
+```
+
+Then, you can call `likec4` directly:
+
+```sh
+likec4 ...
+```
+
+## Usage
+
+### Preview diagrams
+
+In a folder with LikeC4 sources:
+
+```sh
+likec4 serve
+```
+
+This will recursively search for `*.c4`, `*.likec4` files and serve them in a local web server.
+
+Any changes to the sources will trigger a live-update of diagrams.
+
+Refer to the help for more options:
+
+```sh
+likec4 serve --help
+```
+
+### Build static website
+
+```sh
+likec4 build -o ./dist
+```
+
+The output folder will contain a static website (single-page application).
+
+### Export to PNG
+
+...
+
+### Export to Mermaid, Dot, D2
+
+...
+
+### Generate React components
+
 ...
+
+### Generate structured data
+
+...
+
+## Support
+
+If there's a problem you're encountering or something you need help with, don't hesitate to take advantage of my [_Priority Support_ service](https://github.com/sponsors/davydkov) where you can ask me questions in an exclusive forum. I'm well equppied to assist you with this project and would be happy to help you out! 🙂

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>);
 };