likec4 0.45.0 → 0.46.0

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

@@ -1,7 +1,16 @@
-import { compareFqnHierarchically, isAncestor } from "./fqn.js";
+import { commonAncestor, compareFqnHierarchically, isAncestor } from "./fqn.js";
 import { either } from "rambdax";
 export const compareRelations = (a, b) => {
-  return compareFqnHierarchically(a.source, b.source) || compareFqnHierarchically(a.target, b.target);
+  const parentA = commonAncestor(a.source, a.target);
+  const parentB = commonAncestor(b.source, b.target);
+  if (parentA && !parentB) {
+    return 1;
+  }
+  if (!parentA && parentB) {
+    return -1;
+  }
+  const compareParents = parentA && parentB ? compareFqnHierarchically(parentA, parentB) : 0;
+  return compareParents || compareFqnHierarchically(a.source, b.source) || compareFqnHierarchically(a.target, b.target);
 };
 const isInside = (parent) => {
   const prefix = parent + ".";

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { nonNullable, defaultTheme as theme } from "@likec4/core";
 import { useHookableRef, useUpdateEffect } from "@react-hookz/web/esm";
-import { easings, useSpring } from "@react-spring/konva";
+import { useSpring } from "@react-spring/konva";
 import { clamp } from "rambdax";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { AnimatedStage, Layer } from "../konva.js";
@@ -30,7 +30,7 @@ function diagramNodeId(konvaNode) {
 export const Diagram = /* @__PURE__ */ forwardRef(
   ({
     diagram,
-    padding: _padding = NoPadding,
+    padding = NoPadding,
     pannable = true,
     zoomable = true,
     animate = true,
@@ -56,11 +56,11 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       }
       return value;
     });
-    const width = _width ?? diagram.width;
-    const height = _height ?? diagram.height;
+    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = Array.isArray(padding) ? padding : [padding, padding, padding, padding];
+    const width = _width ?? diagram.width + paddingLeft + paddingRight;
+    const height = _height ?? diagram.height + paddingTop + paddingBottom;
     const toCenterOnRect = (centerTo) => {
-      const [paddingTop, paddingRight, paddingBottom, paddingLeft] = Array.isArray(_padding) ? _padding : [_padding, _padding, _padding, _padding];
-      const container = stageRef.current?.container();
+      const container = containerRef.current;
       const viewRect = {
         width: Math.min(container?.clientWidth ?? width, width) - paddingLeft - paddingRight,
         height: Math.min(container?.clientHeight ?? height, height) - paddingTop - paddingBottom
@@ -80,11 +80,13 @@ export const Diagram = /* @__PURE__ */ forwardRef(
     const [stageProps, stageSpringApi] = useSpring(
       () => initialPosition ? {
         from: initialPosition,
-        to: toFitDiagram()
+        to: toFitDiagram(),
+        immediate
       } : {
-        from: toFitDiagram(),
+        to: toFitDiagram(),
         immediate
-      }
+      },
+      []
     );
     const centerOnRect = (centerTo) => {
       stageSpringApi.start({
@@ -93,14 +95,10 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       });
       return;
     };
-    const centerAndFit = (delay = 70, durationMs) => {
+    const centerAndFit = (delay = 0) => {
       stageSpringApi.start({
         to: toFitDiagram(),
         delay,
-        config: durationMs ? {
-          duration: durationMs,
-          easing: easings.easeInOutCubic
-        } : {},
         immediate
       });
       return;
@@ -128,13 +126,13 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       ref,
       () => ({
         get stage() {
-          return nonNullable(stageRef.current, "not mounted");
+          return stageRef.current;
         },
         get diagramView() {
           return refs.current.diagram;
         },
         get container() {
-          return nonNullable(stageRef.current?.container(), "not mounted");
+          return stageRef.current?.container() ?? null;
         },
         resetStageZoom: (_immediate) => {
           refs.current.resetStageZoom(_immediate);
@@ -147,15 +145,18 @@ export const Diagram = /* @__PURE__ */ forwardRef(
         }),
         centerAndFit: () => refs.current.centerAndFit()
       }),
-      [refs, id, stageRef]
+      [refs, stageRef]
     );
     const resetHoveredStates = useResetHoveredStates();
     useUpdateEffect(() => {
       resetHoveredStates();
     }, [id]);
     useUpdateEffect(() => {
-      refs.current.centerAndFit(80, 650);
-    }, [id, height, width]);
+      refs.current.centerAndFit(200);
+    }, [id]);
+    useUpdateEffect(() => {
+      refs.current.centerAndFit(50);
+    }, [height, width]);
     useEffect(() => {
       if (!zoomable) {
         return;
@@ -170,39 +171,41 @@ export const Diagram = /* @__PURE__ */ forwardRef(
     }, [zoomable]);
     useGesture(
       {
-        onDragEnd: () => {
-          DiagramGesture.isDragging = false;
-        },
         onDrag: (state) => {
           const {
-            pinching,
+            first,
+            last,
             down,
-            cancel,
             intentional,
             offset: [x, y]
           } = state;
-          if (pinching) {
-            return cancel();
+          if (!intentional) {
+            return;
           }
-          if (intentional) {
-            DiagramGesture.isDragging = true;
-            stageSpringApi.start({
-              to: {
-                x,
-                y
-              },
-              immediate: immediate || down
-            });
+          if (first || last) {
+            DiagramGesture.isDragging = first && !last;
           }
+          stageSpringApi.start({
+            to: {
+              x,
+              y
+            },
+            delay: 0,
+            immediate: immediate || down && !last
+          });
         },
         onPinch: ({ memo, first, last, origin: [ox, oy], movement: [ms], offset: [scale] }) => {
           if (first) {
+            DiagramGesture.isDragging = true;
             const stage = nonNullable(stageRef.current);
             const { x: x2, y: y2 } = stage.getAbsolutePosition();
             const tx = Math.round(ox - x2);
             const ty = Math.round(oy - y2);
             memo = [stage.x(), stage.y(), tx, ty];
           }
+          if (last) {
+            DiagramGesture.isDragging = false;
+          }
           const x = Math.round(memo[0] - (ms - 1) * memo[2]);
           const y = Math.round(memo[1] - (ms - 1) * memo[3]);
           stageSpringApi.start({
@@ -211,7 +214,7 @@ export const Diagram = /* @__PURE__ */ forwardRef(
               y,
               scale
             },
-            immediate: immediate || !last || !first
+            delay: 0
           });
           return memo;
         }
@@ -222,23 +225,27 @@ export const Diagram = /* @__PURE__ */ forwardRef(
           target: containerRef,
           enabled: pannable,
           threshold: 4,
-          from: () => [stageProps.x.get(), stageProps.y.get()],
-          pointer: {
-            buttons: -1,
-            keys: false,
-            touch: true,
-            capture: true
-          }
+          from: () => [stageRef.current?.x() ?? 0, stageRef.current?.y() ?? 0],
+          pointer: Object.assign(
+            {
+              keys: false,
+              mouse: true,
+              capture: true
+            },
+            !onNodeContextMenu && !onStageContextMenu && {
+              buttons: -1
+            }
+          )
         },
         pinch: {
           target: containerRef,
           pointer: {
             touch: true
           },
+          from: () => [stageRef.current?.scaleX() ?? 1, 0],
           enabled: zoomable,
-          // eventOptions
           scaleBounds: { min: minZoom, max: maxZoom + 0.4 },
-          rubberband: 0.04,
+          rubberband: 0.045,
           pinchOnWheel: true
         }
       }

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

@@ -133,7 +133,7 @@ const NodeShape = memo(
   ({ animate, node, ctrl, theme, isHovered, expired, onNodeClick }) => {
     const setHoveredNode = useSetHoveredNode();
     const _isCompound = isCompound(node);
-    const isNavigatable = !!node.navigateTo && !!onNodeClick;
+    const isNavigatable = animate && !!node.navigateTo && !!onNodeClick;
     const Shape = nodeShape(node);
     const springs = ctrl.springs;
     let zoomInIconY;
@@ -150,18 +150,16 @@ const NodeShape = memo(
       {
         name: node.id,
         visible: expired !== true,
-        ...animate && {
-          onPointerEnter: (e) => {
-            setHoveredNode(node);
-            if (isNavigatable) {
-              mousePointer(e);
-            }
-          },
-          onPointerLeave: (e) => {
-            setHoveredNode(null);
-            mouseDefault(e);
+        onPointerEnter: (e) => {
+          setHoveredNode(node);
+          if (isNavigatable) {
+            mousePointer(e);
           }
         },
+        onPointerLeave: (e) => {
+          setHoveredNode(null);
+          mouseDefault(e);
+        },
         ...onNodeClick && {
           onPointerClick: (e) => {
             if (DiagramGesture.isDragging || e.evt.button !== 0) {

package/dist/@likec4/diagrams/diagram/shapes/Edge.js

@@ -20,11 +20,11 @@ function EdgeArrow({
       closed: true,
       fill: isOutline ? void 0 : springs.lineColor,
       stroke: springs.lineColor,
-      strokeWidth: 1.6,
-      hitStrokeWidth: 5,
+      strokeWidth: 1,
       lineCap: "round",
       lineJoin: "miter",
       perfectDrawEnabled: false,
+      listening: false,
       globalCompositeOperation
     }
   );
@@ -35,7 +35,7 @@ function EdgeLabelBg({
   isHovered,
   springs
 }) {
-  const padding = 4;
+  const padding = 2;
   const props = useSpring({
     to: {
       x: labelBBox.x - padding,

package/dist/@likec4/diagrams/hooks/useDiagramApi.js

@@ -1,27 +1,24 @@
-import { useRef, useMemo } from "react";
 import { nonNullable } from "@likec4/core";
+import { useRef, useState } from "react";
 export function useDiagramApi() {
   const ref = useRef(null);
-  return useMemo(
-    () => [
-      ref,
-      {
-        get stage() {
-          return nonNullable(ref.current, "not mounted, use ref").stage;
-        },
-        get diagramView() {
-          return nonNullable(ref.current, "not mounted, use ref").diagramView;
-        },
-        get container() {
-          return nonNullable(ref.current, "not mounted, use ref").container;
-        },
-        resetStageZoom: (_immediate) => {
-          nonNullable(ref.current, "not mounted, use ref").resetStageZoom(_immediate);
-        },
-        centerOnNode: (node) => nonNullable(ref.current, "not mounted, use ref").centerOnNode(node),
-        centerAndFit: () => nonNullable(ref.current, "not mounted, use ref").centerAndFit()
-      }
-    ],
-    [ref]
+  const [api] = useState(
+    () => ({
+      get stage() {
+        return ref.current?.stage ?? null;
+      },
+      get diagramView() {
+        return nonNullable(ref.current, "not mounted, use ref").diagramView;
+      },
+      get container() {
+        return ref.current?.container ?? null;
+      },
+      resetStageZoom: (_immediate) => {
+        nonNullable(ref.current, "not mounted, use ref").resetStageZoom(_immediate);
+      },
+      centerOnNode: (node) => nonNullable(ref.current, "not mounted, use ref").centerOnNode(node),
+      centerAndFit: () => nonNullable(ref.current, "not mounted, use ref").centerAndFit()
+    })
   );
+  return [ref, api];
 }

package/dist/__app__/index.html

@@ -8,7 +8,7 @@
   <link rel="stylesheet" type="text/css" href="/likec4.css" />
 </head>
 <body>
-  <div id="like4-root" class="w-screen h-screen m-0 p-0"></div>
+  <div id="like4-root"></div>
   <script type="module" src="/src/main"></script>
 </body>
 </html>

package/dist/__app__/likec4.css

@@ -8,9 +8,28 @@
   --font-weight-bold: 600;
 }
 
+*,
+:before,
+:after {
+  box-sizing: border-box;
+  outline: none;
+  border-width: 0;
+  border-style: solid;
+  border-color: transparent;
+}
+
 html, body {
   margin: 0;
   padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+#like4-root {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
 }
 
 .transparent-bg {

package/dist/__app__/src/App.jsx

@@ -5,8 +5,10 @@ import { ExportPage, IndexPage, EmbedPage, ViewPage } from './pages';
 import { useRoute } from './router';
 import { Theme } from '@radix-ui/themes';
 import { nonexhaustive } from '@likec4/core';
+import { isNil } from 'remeda';
 const Routes = () => {
     const r = useRoute();
+    const theme = r.params?.theme;
     let page = null;
     switch (r.route) {
         case 'view': {
@@ -18,7 +20,7 @@ const Routes = () => {
             break;
         }
         case 'embed': {
-            page = <EmbedPage key='embed' viewId={r.params.viewId} padding={r.params.padding}/>;
+            page = (<EmbedPage key='embed' viewId={r.params.viewId} padding={r.params.padding} transparentBg={isNil(r.params.theme)}/>);
             break;
         }
         case 'index': {
@@ -28,7 +30,7 @@ const Routes = () => {
         default:
             nonexhaustive(r);
     }
-    return (<Theme hasBackground={r.route !== 'export'} accentColor='indigo' radius='small' appearance={r.route !== 'export' ? r.params?.theme ?? 'inherit' : undefined}>
+    return (<Theme hasBackground={!!theme} accentColor='indigo' radius='small' appearance={theme}>
       {page}
       {r.showUI && (<Fragment key='ui'>
           <Sidebar />

package/dist/__app__/src/components/sidebar/Sidebar.jsx

@@ -2,7 +2,7 @@ import { Box, Button, Flex, IconButton, ScrollArea, Separator } from '@radix-ui/
 import { useClickOutside, useToggle } from '@react-hookz/web/esm';
 import { HamburgerMenuIcon, ArrowLeftIcon } from '@radix-ui/react-icons';
 import { useRef } from 'react';
-import { cn } from '~/utils';
+import { cn } from '../../utils';
 import { DiagramsTree } from './DiagramsTree';
 import styles from './styles.module.css';
 import { $pages } from '../../router';

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

@@ -25,7 +25,7 @@ export const DisplayModeSelector = () => {
     };
     return (<Flex display={{
             initial: 'none',
-            md: 'flex'
+            sm: 'flex'
         }} gap='3' align='center'>
       <Button variant={current === first ? 'solid' : 'ghost'} size='1' onClick={changeMode(first)}>
         {Mode[first]}

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

@@ -2,11 +2,13 @@ import { Diagram } from '@likec4/diagrams';
 import { useWindowSize } from '@react-hookz/web/esm';
 import { DiagramNotFound } from '../components';
 import { useLikeC4View } from '../data';
-export function EmbedPage({ viewId, padding }) {
+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 diagram={diagram} padding={padding} width={width} height={height}/>;
+    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,24 +1,12 @@
 import { Diagram } from '@likec4/diagrams';
 import { useWindowSize } from '@react-hookz/web/esm';
-import { useEffect } 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
-    useEffect(() => {
-        const htmlEl = document.body.parentElement;
-        if (!htmlEl)
-            return;
-        // see ../../likec4.css
-        const classname = 'transparent-bg';
-        htmlEl.classList.add(classname);
-        return () => {
-            htmlEl.classList.remove(classname);
-        };
-    }, []);
+    useTransparentBackground(!!diagram);
     if (!diagram) {
         return <DiagramNotFound viewId={viewId}/>;
     }

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