likec4 0.44.1 → 0.45.0

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

@@ -1,23 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import useImageLoader from "../../hooks/useImageLoader.js";
 import { Image } from "../../konva.js";
-export function NodeIcon({ icon, maxWidth, maxHeight, offsetX = 0, offsetY = 0 }) {
+function IconImage({
+  icon,
+  centerX,
+  centerY,
+  maxWidth,
+  maxHeight,
+  offsetX = 0,
+  offsetY = 0
+}) {
   const [image] = useImageLoader(icon);
   if (!image) {
     return null;
   }
-  const padding = 16;
-  const maxIconWidth = Math.round(maxWidth - padding * 2);
-  const maxIconHeight = Math.round(maxHeight - padding * 2);
-  const scale = Math.min(maxIconWidth / image.width, maxIconHeight / image.height, 1);
-  const iconWidth = Math.floor(image.width * scale);
-  const iconHeight = Math.floor(image.height * scale);
+  const scale = Math.min(maxWidth / image.naturalWidth, maxHeight / image.naturalHeight);
+  const iconWidth = Math.floor(image.naturalWidth * scale);
+  const iconHeight = Math.floor(image.naturalHeight * scale);
   return /* @__PURE__ */ jsx(
     Image,
     {
       image,
-      x: padding + (maxIconWidth - iconWidth) / 2,
-      y: padding + (maxIconHeight - iconHeight) / 2,
+      x: centerX - iconWidth / 2,
+      y: centerY - iconHeight / 2,
       offsetX,
       offsetY,
       width: iconWidth,
@@ -27,3 +32,36 @@ export function NodeIcon({ icon, maxWidth, maxHeight, offsetX = 0, offsetY = 0 }
     }
   );
 }
+export function NodeIcon({
+  node,
+  maxWidth,
+  paddingX = 24,
+  paddingY = 24,
+  offsetX = 0,
+  offsetY = 0
+}) {
+  if (!node.icon) {
+    return null;
+  }
+  const firstLabel = node.labels[0];
+  if (!firstLabel) {
+    return null;
+  }
+  const firstLabelY = Math.floor(firstLabel.pt[1] - firstLabel.fontSize * 1.25);
+  const maxIconHeight = Math.round(firstLabelY - paddingY - 8);
+  const maxIconWidth = maxWidth ?? node.size.width - paddingX * 2;
+  const centerY = paddingY + Math.floor(maxIconHeight / 2);
+  const centerX = Math.floor(node.size.width / 2);
+  return /* @__PURE__ */ jsx(
+    IconImage,
+    {
+      icon: node.icon,
+      centerX,
+      centerY,
+      maxWidth: maxIconWidth,
+      maxHeight: maxIconHeight,
+      offsetX,
+      offsetY
+    }
+  );
+}

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

@@ -1,59 +1,36 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Text } from "../../konva.js";
-import { NodeIcon } from "./NodeIcon.js";
-export function NodeLabels({
-  node: { icon, labels, size, color },
-  theme,
-  offsetX = 0,
-  offsetY = 0,
-  maxWidth
-}) {
+import { jsx } from "react/jsx-runtime";
+import { Group, Text } from "../../konva.js";
+export function NodeLabels({ node, theme, offsetX = 0, offsetY = 0, maxWidth }) {
+  const { labels, size, color } = node;
   const colors = theme.elements[color];
-  const width = maxWidth ?? size.width;
-  const firstLabel = labels[0];
-  const titleFontSize = firstLabel?.fontSize ?? 12;
-  let nodeIcon;
-  if (icon) {
-    const maxHeight = firstLabel ? Math.floor(firstLabel.pt[1] - firstLabel.fontSize / 2) : size.height;
-    nodeIcon = /* @__PURE__ */ jsx(
-      NodeIcon,
+  const width = maxWidth ?? size.width - 40;
+  const titleFontSize = labels[0]?.fontSize ?? 18;
+  const x = Math.ceil((size.width - width) / 2);
+  return /* @__PURE__ */ jsx(Group, { x, y: 3, offsetX, offsetY, children: labels.map((label, i) => {
+    const isTitle = label.fontSize === titleFontSize;
+    let color2 = colors.hiContrast;
+    if (!isTitle) {
+      color2 = colors.loContrast;
+    }
+    return /* @__PURE__ */ jsx(
+      Text,
       {
-        icon,
-        maxWidth: width,
-        maxHeight,
-        offsetX,
-        offsetY
-      }
+        text: label.text,
+        x: 0,
+        y: label.pt[1] - label.fontSize,
+        width,
+        fill: color2,
+        fontFamily: theme.font,
+        fontSize: label.fontSize,
+        fontStyle: label.fontStyle ?? "normal",
+        align: "center",
+        wrap: "none",
+        strokeEnablaed: false,
+        perfectDrawEnabled: false,
+        listening: false
+      },
+      label.text + i
     );
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    nodeIcon,
-    labels.map((label, i) => {
-      let color2 = colors.hiContrast;
-      if (label.fontSize !== titleFontSize) {
-        color2 = colors.loContrast;
-      }
-      return /* @__PURE__ */ jsx(
-        Text,
-        {
-          x: 8,
-          width: width - 16,
-          y: label.pt[1],
-          offsetY: offsetY + label.fontSize / 2,
-          offsetX,
-          fill: color2,
-          fontFamily: theme.font,
-          fontSize: label.fontSize,
-          fontStyle: label.fontStyle ?? "normal",
-          align: "center",
-          text: label.text,
-          strokeEnabled: false,
-          perfectDrawEnabled: false,
-          listening: false
-        },
-        label.text + i
-      );
-    })
-  ] });
+  }) });
 }
 NodeLabels.displayName = "NodeLabels";

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

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useShadowSprings } from "../springs.js";
 import { AnimatedPath, AnimatedRect } from "../../konva.js";
 import { NodeLabels } from "./NodeLabel.js";
+import { NodeIcon } from "./NodeIcon.js";
 const PersonIcon = {
   width: 115,
   height: 120,
@@ -37,6 +38,7 @@ export function PersonShape({ node, theme, springs, isHovered }) {
         listening: false
       }
     ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, theme })
+    /* @__PURE__ */ jsx(NodeLabels, { node, theme }),
+    /* @__PURE__ */ jsx(NodeIcon, { node })
   ] });
 }

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

@@ -3,6 +3,7 @@ import { useShadowSprings } from "../springs.js";
 import { AnimatedEllipse, AnimatedPath } from "../../konva.js";
 import { NodeLabels } from "./NodeLabel.js";
 import { useSpring } from "@react-spring/konva";
+import { NodeIcon } from "./NodeIcon.js";
 function queueSVGPath(width, height, tilt = 0.2) {
   const diameter = height;
   const radius = Math.round(diameter / 2);
@@ -52,6 +53,7 @@ export function QueueShape({ node, theme, springs, isHovered }) {
         fill: springs.stroke
       }
     ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, maxWidth: width - rx * 2, theme })
+    /* @__PURE__ */ jsx(NodeLabels, { node, maxWidth: width - 2 * rx - 10, offsetX: rx, theme }),
+    /* @__PURE__ */ jsx(NodeIcon, { node, maxWidth: width - 2 * rx - 10, offsetX: rx })
   ] });
 }

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

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatedRect } from "../../konva.js";
 import { useShadowSprings } from "../springs.js";
+import { NodeIcon } from "./NodeIcon.js";
 import { NodeLabels } from "./NodeLabel.js";
 export function RectangleShape({ node, theme, springs, isHovered }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -15,6 +16,7 @@ export function RectangleShape({ node, theme, springs, isHovered }) {
         fill: springs.fill
       }
     ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, theme })
+    /* @__PURE__ */ jsx(NodeLabels, { node, theme }),
+    /* @__PURE__ */ jsx(NodeIcon, { node })
   ] });
 }

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

@@ -4,4 +4,4 @@ export { CylinderShape } from "./Cylinder.js";
 export { MobileShape } from "./Mobile.js";
 export { QueueShape } from "./Queue.js";
 export { PersonShape } from "./Person.js";
-export { EdgeShape } from "./Edge.js";
+export { Edge } from "./Edge.js";

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

@@ -7,6 +7,6 @@ export function mousePointer(e) {
 export function mouseDefault(e) {
   const container = e.target.getStage()?.container();
   if (container) {
-    container.style.cursor = "auto";
+    container.style.cursor = "";
   }
 }

package/dist/@likec4/diagrams/diagram/state/atoms.js

@@ -93,3 +93,9 @@ export const hoveredEdgeAtom = atom(
   }
 );
 export const hoveredEdgeIdAtom = selectAtom(hoveredEdgeAtom, (edge) => edge?.id ?? null);
+export const resetHoveredStatesAtom = atom(void 0, (get, set) => {
+  clearTimeout(get(nodeTimeoutAtom));
+  clearTimeout(get(edgeTimeoutAtom));
+  set(currentHoveredNodeAtom, null);
+  set(currentHoveredEdgeAtom, null);
+});

package/dist/@likec4/diagrams/diagram/state/hooks.js

@@ -1,5 +1,11 @@
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { hoveredEdgeAtom, hoveredEdgeIdAtom, hoveredNodeAtom, hoveredNodeIdAtom } from "./atoms.js";
+import {
+  hoveredEdgeAtom,
+  hoveredEdgeIdAtom,
+  hoveredNodeAtom,
+  hoveredNodeIdAtom,
+  resetHoveredStatesAtom
+} from "./atoms.js";
 export function useHoveredNode() {
   return useAtom(hoveredNodeAtom);
 }
@@ -18,3 +24,6 @@ export function useHoveredEdgeId() {
 export function useSetHoveredEdge() {
   return useSetAtom(hoveredEdgeAtom);
 }
+export function useResetHoveredStates() {
+  return useSetAtom(resetHoveredStatesAtom);
+}

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

@@ -8,10 +8,14 @@ export default function useImageLoader(url, crossOrigin, referrerpolicy) {
   const statusRef = useRef(imageRef.current ? "loaded" : "loading");
   const [_, setStateToken] = useState(0);
   const urlRef = useRef(url);
-  if (!url || urlRef.current !== url) {
+  const crossOriginRef = useRef(crossOrigin);
+  const referrerPolicyRef = useRef(referrerpolicy);
+  if (!url || urlRef.current !== url || crossOriginRef.current !== crossOrigin || referrerPolicyRef.current !== referrerpolicy) {
     statusRef.current = "loading";
     imageRef.current = void 0;
     urlRef.current = url;
+    crossOriginRef.current = crossOrigin;
+    referrerPolicyRef.current = referrerpolicy;
   }
   useLayoutEffect(() => {
     if (!url) {
@@ -28,6 +32,8 @@ export default function useImageLoader(url, crossOrigin, referrerpolicy) {
       return;
     }
     const img = document.createElement("img");
+    img.style.width = "100%";
+    img.style.height = "auto";
     function onload() {
       if (!isMounted())
         return;

package/dist/__app__/likec4.css

@@ -15,4 +15,8 @@ html, body {
 
 .transparent-bg {
   --color-page-background: transparent !important;
+
+  body {
+    background-color: transparent !important;
+  }
 }

package/dist/__app__/src/App.jsx

@@ -1,15 +1,35 @@
 import { Provider } from 'jotai';
 import { Fragment } from 'react';
 import { Sidebar } from './components';
-import { ExportPage, IndexPage, ViewPage } from './pages';
+import { ExportPage, IndexPage, EmbedPage, ViewPage } from './pages';
 import { useRoute } from './router';
 import { Theme } from '@radix-ui/themes';
+import { nonexhaustive } from '@likec4/core';
 const Routes = () => {
     const r = useRoute();
-    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}/>)}
+    let page = null;
+    switch (r.route) {
+        case 'view': {
+            page = <ViewPage key='view' viewId={r.params.viewId} showUI={r.showUI}/>;
+            break;
+        }
+        case 'export': {
+            page = <ExportPage key='export' viewId={r.params.viewId} padding={r.params.padding}/>;
+            break;
+        }
+        case 'embed': {
+            page = <EmbedPage key='embed' viewId={r.params.viewId} padding={r.params.padding}/>;
+            break;
+        }
+        case 'index': {
+            page = <IndexPage key='index'/>;
+            break;
+        }
+        default:
+            nonexhaustive(r);
+    }
+    return (<Theme hasBackground={r.route !== 'export'} accentColor='indigo' radius='small' appearance={r.route !== 'export' ? r.params?.theme ?? 'inherit' : undefined}>
+      {page}
       {r.showUI && (<Fragment key='ui'>
           <Sidebar />
         </Fragment>)}

package/dist/__app__/src/components/DiagramNotFound.jsx

@@ -1,7 +1,7 @@
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
-import { Box, Button, Card, Flex, Heading, IconButton, Text } from '@radix-ui/themes';
+import { Box, Button, Card, Code, Flex, Heading, IconButton, Text } from '@radix-ui/themes';
 import { $pages } from '../router';
-export const DiagramNotFound = () => {
+export const DiagramNotFound = ({ viewId }) => {
     return (<Flex position='fixed' inset='0' align='center' justify='center'>
       <Card color='red' size='3'>
         <Flex gap='4' direction='row' align='start'>
@@ -14,9 +14,15 @@ export const DiagramNotFound = () => {
             <Heading trim='both' color='amber' size='4'>
               Diagram not found
             </Heading>
-            <Text as='div'>The diagram you are looking for does not exist.</Text>
+            <Text as='div'>
+              The diagram{' '}
+              <Code color='amber' variant='soft'>
+                {viewId}
+              </Code>{' '}
+              does not exist
+            </Text>
             <Box pt='2'>
-              <Button variant='soft' color='amber' onClick={() => $pages.index.open()}>
+              <Button variant='soft' color='amber' className='cursor-pointer' onClick={() => $pages.index.open()}>
                 Go to overview
               </Button>
             </Box>

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

@@ -0,0 +1,12 @@
+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 }) {
+    const { width, height } = useWindowSize();
+    const diagram = useLikeC4View(viewId);
+    if (!diagram) {
+        return <DiagramNotFound viewId={viewId}/>;
+    }
+    return <Diagram diagram={diagram} padding={padding} width={width} height={height}/>;
+}

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

@@ -1,6 +1,6 @@
 import { Diagram } from '@likec4/diagrams';
 import { useWindowSize } from '@react-hookz/web/esm';
-import { useLayoutEffect } from 'react';
+import { useEffect } from 'react';
 import { DiagramNotFound } from '../components';
 import { useLikeC4View } from '../data';
 export function ExportPage({ viewId, padding }) {
@@ -8,16 +8,19 @@ export function ExportPage({ viewId, padding }) {
     const diagram = useLikeC4View(viewId);
     // To get the transparent background
     // We need to add a class to the HTML element
-    useLayoutEffect(() => {
+    useEffect(() => {
+        const htmlEl = document.body.parentElement;
+        if (!htmlEl)
+            return;
         // see ../../likec4.css
         const classname = 'transparent-bg';
-        document.body.parentElement?.classList.add(classname);
+        htmlEl.classList.add(classname);
         return () => {
-            document.body.parentElement?.classList.remove(classname);
+            htmlEl.classList.remove(classname);
         };
     }, []);
     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/view.page.jsx

@@ -1,24 +1,24 @@
-import { Diagram, useDiagramApi } from '@likec4/diagrams';
+import { Diagram } from '@likec4/diagrams';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
 import { useWindowSize } from '@react-hookz/web/esm';
 import { $pages } from '~/router';
 import { DiagramNotFound, ViewActionsToolbar } from '../components';
 import { useLikeC4View } from '../data';
-const Paddings = [60, 20, 20, 20];
+import { Fragment } from 'react';
+const Paddings = [70, 20, 20, 40];
 export function ViewPage({ viewId, showUI = true }) {
     const { width, height } = useWindowSize();
-    const [ref, diagramApi] = useDiagramApi();
     const diagram = useLikeC4View(viewId);
     if (!diagram) {
-        return <DiagramNotFound />;
+        return <DiagramNotFound viewId={viewId}/>;
     }
     return (<Box position={'fixed'} inset='0' className='overflow-hidden'>
-      <Diagram ref={ref} diagram={diagram} padding={showUI ? Paddings : undefined} width={width} height={height} onNodeClick={node => {
+      <Diagram 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 +29,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

@@ -37,11 +37,11 @@ const $route = computed([$router, $searchParams], (r, v) => {
     }
     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
         };

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

@@ -31,7 +31,6 @@
     ]
   },
   "include": [
-    "src",
-    "src/likec4-views.ts"
+    "src"
   ]
 }