@likec4/diagram 1.24.1 → 1.25.0

package/dist/state/diagram-machine.js

@@ -12,7 +12,7 @@ import { lastClickedNode, resetEdgeControlPoints, updateEdgeData, updateNodeData
 import { hotkeyActorLogic } from "./hotkeyActor.js";
 import { DiagramToggledFeaturesPersistence } from "./persistence.js";
 import { syncManualLayoutActorLogic } from "./syncManualLayoutActor.js";
-import { typedSystem, findDiagramNode, focusedBounds } from "./utils.js";
+import { typedSystem, focusedBounds, findDiagramNode } from "./utils.js";
 const diagramMachine = setup({
   types: {
     context: {},
@@ -103,6 +103,22 @@ const diagramMachine = setup({
       viewport.y = Math.round(viewport.y);
       panZoom == null ? void 0 : panZoom.setViewport(viewport, duration > 0 ? { duration } : void 0);
     },
+    "xyflow:fitFocusedBounds": ({ context }) => {
+      const { bounds, duration = 450 } = focusedBounds({ context });
+      const { width, height, panZoom, transform } = context.xystore.getState();
+      const maxZoom = Math.max(1, transform[2]);
+      const viewport = getViewportForBounds(
+        bounds,
+        width,
+        height,
+        MinZoom,
+        maxZoom,
+        context.fitViewPadding
+      );
+      viewport.x = Math.round(viewport.x);
+      viewport.y = Math.round(viewport.y);
+      panZoom == null ? void 0 : panZoom.setViewport(viewport, duration > 0 ? { duration } : void 0);
+    },
     "xyflow:setViewportCenter": ({ context }, params) => {
       const { x, y } = params;
       invariant(context.xyflow, "xyflow is not initialized");
@@ -311,10 +327,7 @@ const diagramMachine = setup({
         })),
         "open source of focused or last clicked node",
         spawnChild("hotkeyActorLogic", { id: "hotkey" }),
-        {
-          type: "xyflow:fitDiagram",
-          params: focusedBounds
-        }
+        "xyflow:fitFocusedBounds"
       ],
       exit: enqueueActions(({ enqueue, context }) => {
         enqueue.stopChild("hotkey");
@@ -338,15 +351,12 @@ const diagramMachine = setup({
           {
             actions: [
               assign({
-                lastClickedNode,
-                focusedNode: ({ event }) => event.node.id
+                lastClickedNode
               }),
-              assign(focusNodesEdges),
-              "open source of focused or last clicked node",
-              {
-                type: "xyflow:fitDiagram",
-                params: focusedBounds
-              }
+              raise(({ event }) => ({
+                type: "focus.node",
+                nodeId: event.node.id
+              }))
             ]
           }
         ],
@@ -357,10 +367,7 @@ const diagramMachine = setup({
             }),
             assign(focusNodesEdges),
             "open source of focused or last clicked node",
-            {
-              type: "xyflow:fitDiagram",
-              params: focusedBounds
-            }
+            "xyflow:fitFocusedBounds"
           ]
         },
         "key.esc": {
@@ -454,10 +461,7 @@ const diagramMachine = setup({
           }
         }),
         assign(updateActiveWalkthrough),
-        {
-          type: "xyflow:fitDiagram",
-          params: focusedBounds
-        }
+        "xyflow:fitFocusedBounds"
       ],
       on: {
         "key.esc": {
@@ -488,15 +492,15 @@ const diagramMachine = setup({
               }
             });
             enqueue.assign(updateActiveWalkthrough);
-            enqueue({
-              type: "xyflow:fitDiagram",
-              params: focusedBounds
-            });
+            enqueue("xyflow:fitFocusedBounds");
           })
         },
         "walkthrough.end": {
           target: "idle"
         },
+        "xyflow.paneDblClick": {
+          target: "idle"
+        },
         // We received another view, close overlay and process event again
         "update.view": {
           guard: "is another view",
@@ -504,18 +508,18 @@ const diagramMachine = setup({
           target: "idle"
         }
       },
-      exit: enqueueActions(({ enqueue, context }) => {
+      exit: enqueueActions(({ enqueue, context, event }) => {
         enqueue.stopChild("hotkey");
         if (context.viewportBeforeFocus) {
           enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
         } else {
           enqueue({ type: "xyflow:fitDiagram" });
         }
-        enqueue.assign((s) => ({
+        enqueue.assign({
           activeWalkthrough: null,
-          ...unfocusNodesEdges(s),
+          ...unfocusNodesEdges({ context }),
           viewportBeforeFocus: null
-        }));
+        });
       })
     }
   },
@@ -545,15 +549,13 @@ const diagramMachine = setup({
     },
     "navigate.to": {
       guard: "is another view",
-      actions: [
-        assign({
-          lastOnNavigate: ({ context, event }) => ({
-            fromView: context.view.id,
-            toView: event.viewId,
-            fromNode: event.fromNode ?? null
-          })
+      actions: assign({
+        lastOnNavigate: ({ context, event }) => ({
+          fromView: context.view.id,
+          toView: event.viewId,
+          fromNode: event.fromNode ?? null
         })
-      ],
+      }),
       target: ".navigating"
     },
     "navigate.back": {
@@ -630,7 +632,10 @@ const diagramMachine = setup({
     "layout.align": {
       guard: "not readonly",
       actions: [
-        { type: "layout.align", params: ({ event }) => ({ mode: event.mode }) },
+        {
+          type: "layout.align",
+          params: ({ event }) => ({ mode: event.mode })
+        },
         raise({ type: "saveManualLayout.schedule" })
       ]
     },
@@ -649,7 +654,7 @@ const diagramMachine = setup({
       ]
     },
     "open.elementDetails": {
-      actions: enqueueActions(({ context, enqueue, system, event }) => {
+      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => {
         var _a;
         let initiatedFrom = null;
         const fromNodeId = event.fromNode ?? ((_a = context.view.nodes.find((n) => DiagramNode.modelRef(n) === event.fqn)) == null ? void 0 : _a.id);
@@ -667,12 +672,12 @@ const diagramMachine = setup({
             clientRect
           };
         }
-        enqueue.sendTo(typedSystem(system).overlaysActorRef, {
+        return {
           type: "open.elementDetails",
           subject: event.fqn,
           currentView: context.view,
           ...initiatedFrom && { initiatedFrom }
-        });
+        };
       })
     },
     "open.relationshipsBrowser": {

package/dist/state/persistence.js

@@ -7,7 +7,7 @@ const DiagramToggledFeaturesPersistence = {
       if (fromStorage) {
         return JSON.parse(fromStorage);
       }
-      throw new Error(`Workspace ${key} not found`);
+      return null;
     } catch (e) {
       console.error(`Error reading fromStorage ${key}:`, e);
       return null;

package/dist/theme-vars.css.d.ts

@@ -61,12 +61,3 @@ export declare const xyvars: {
         borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
 };
-export declare const whereLight = ":where([data-mantine-color-scheme=\"light\"])";
-export declare const whereDark = ":where([data-mantine-color-scheme=\"dark\"])";
-export declare const easings: {
-    out: string;
-    inOut: string;
-};
-export declare const transitions: {
-    fast: string;
-};

package/dist/theme-vars.d.ts

@@ -1,3 +1,15 @@
 import { MantineVars } from '@mantine/vanilla-extract';
-export { easings, transitions, vars, whereDark, whereLight, xyvars, } from './theme-vars.css';
+export { vars, xyvars, } from './theme-vars.css';
+export declare const rootClassName = "likec4-diagram-root";
+export declare const whereNotReducedGraphics = ":where(.likec4-diagram-root:not([data-likec4-reduced-graphics]))";
+export declare const whereReducedGraphics = ":where(.likec4-diagram-root:is([data-likec4-reduced-graphics=\"true\"]))";
+export declare const whereLight = ":where([data-mantine-color-scheme=\"light\"])";
+export declare const whereDark = ":where([data-mantine-color-scheme=\"dark\"])";
+export declare const easings: {
+    out: string;
+    inOut: string;
+};
+export declare const transitions: {
+    fast: string;
+};
 export declare const mantine: MantineVars;

package/dist/theme-vars.js

@@ -1,5 +1,7 @@
 import { themeToVars } from "@mantine/vanilla-extract";
+const rootClassName = "likec4-diagram-root";
 const mantine = themeToVars({});
 export {
-  mantine
+  mantine,
+  rootClassName
 };

package/dist/utils/css.d.ts

@@ -0,0 +1 @@
+export declare function getVarName(variable: string): string;

package/dist/utils/css.js

@@ -0,0 +1,10 @@
+function getVarName(variable) {
+  var matches = variable.match(/^var\((.*)\)$/);
+  if (matches) {
+    return matches[1];
+  }
+  return variable;
+}
+export {
+  getVarName
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.24.1",
+  "version": "1.25.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -27,15 +27,21 @@
         "default": "./dist/index.js"
       }
     },
-    "./style.css": "./dist/style.css"
+    "./package.json": "./package.json",
+    "./diagram.css": "./dist/diagram.css"
+  },
+  "wireit": {
+    "build:watch": {
+      "command": "vite build --watch --mode development --clearScreen=false -l warn",
+      "service": true
+    }
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@mantine/vanilla-extract": "7.17.0",
+    "@mantine/vanilla-extract": "7.17.1",
     "@nanostores/react": "0.8.4",
     "@react-hookz/web": "^25.0.1",
     "@tabler/icons-react": "3.29.0",
-    "@vanilla-extract/dynamic": "^2.1.2",
     "@xstate/react": "^5.0.2",
     "@xyflow/react": "12.4.4",
     "@xyflow/system": "0.0.52",
@@ -51,11 +57,11 @@
     "remeda": "^2.20.2",
     "type-fest": "4.34.1",
     "xstate": "^5.19.2",
-    "@likec4/core": "1.24.1"
+    "@likec4/core": "1.25.0"
   },
   "peerDependencies": {
-    "@mantine/core": "7.17.0",
-    "@mantine/hooks": "7.17.0",
+    "@mantine/core": "7.17.1",
+    "@mantine/hooks": "7.17.1",
     "react": "~19.0.0",
     "react-dom": "~19.0.0"
   },
@@ -73,11 +79,13 @@
     "vite": "6.1.0",
     "vite-plugin-dts": "^4.5.0",
     "vitest": "^3.0.6",
-    "@likec4/tsconfig": "1.24.1"
+    "wireit": "^0.14.11",
+    "@likec4/tsconfig": "1.25.0"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
     "build": "vite build",
+    "build:watch": "wireit",
     "lint": "run -T eslint src/ --fix",
     "clean": "rm -r -f -g \"dist/*\" .tsbuildinfo",
     "test": "vitest run --no-isolate"

package/src/LikeC4Diagram.css.ts

@@ -1,6 +1,16 @@
-import { globalStyle, style } from '@vanilla-extract/css'
-import { whereNotReducedGraphics, whereReducedGraphics } from './globals.css'
-import { vars, xyvars } from './theme-vars'
+import { defaultTheme } from '@likec4/core'
+import { createGlobalTheme, globalStyle, style } from '@vanilla-extract/css'
+import { scale, toHex } from 'khroma'
+import { keys, omit } from 'remeda'
+import {
+  mantine,
+  rootClassName,
+  vars,
+  whereDark,
+  whereNotReducedGraphics,
+  whereReducedGraphics,
+  xyvars,
+} from './theme-vars'
 
 export const cssReactFlow = style({
   '@supports': {
@@ -16,7 +26,6 @@ export const cssReactFlow = style({
 
 export const reactFlowReducedGraphics = `${whereReducedGraphics} ${cssReactFlow}`
 export const reactFlow = `${whereNotReducedGraphics} ${cssReactFlow}`
-export { whereNotReducedGraphics, whereReducedGraphics }
 
 export const notInitialized = style({
   opacity: 0,
@@ -66,3 +75,124 @@ export const hiddenIfReducedGraphics = style({
     },
   },
 })
+
+globalStyle(`.${rootClassName}`, {
+  overflow: 'hidden',
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  margin: 0,
+  boxSizing: 'border-box',
+  WebkitFontSmoothing: mantine.webkitFontSmoothing,
+  MozOsxFontSmoothing: mantine.mozFontSmoothing,
+})
+globalStyle(`:where(.${rootClassName}) .mantine-ActionIcon-icon .tabler-icon`, {
+  width: '75%',
+  height: '75%',
+})
+
+createGlobalTheme(`.${rootClassName}`, {
+  ...omit(vars, ['optionsPanel', 'navigationPanel', 'safariAnimationHook', 'default']),
+}, {
+  likec4: {
+    font:
+      `var(--likec4-default-font-family,'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"')`,
+    background: {
+      color: mantine.colors.body,
+      pattern: {
+        color: mantine.colors.gray[4],
+      },
+    },
+  },
+  compound: {
+    font: vars.likec4.font,
+    titleColor: vars.element.loContrast,
+  },
+  element: {
+    font: vars.likec4.font,
+    ...defaultTheme.elements.primary,
+  },
+  relation: {
+    ...defaultTheme.relationships.slate,
+  },
+})
+
+createGlobalTheme(`${whereDark} .${rootClassName}`, {
+  likec4: {
+    background: {
+      pattern: {
+        color: vars.likec4.background.pattern.color,
+      },
+    },
+  },
+}, {
+  likec4: {
+    background: {
+      pattern: {
+        color: mantine.colors.dark[5],
+      },
+    },
+  },
+})
+
+for (const color of keys(defaultTheme.elements)) {
+  createGlobalTheme(`:where([data-likec4-color='${color}'])`, {
+    element: {
+      fill: vars.element.fill,
+      stroke: vars.element.stroke,
+      hiContrast: vars.element.hiContrast,
+      loContrast: vars.element.loContrast,
+    },
+    compound: {
+      titleColor: vars.compound.titleColor,
+    },
+    relation: vars.relation,
+  }, {
+    element: defaultTheme.elements[color],
+    compound: {
+      titleColor: defaultTheme.elements[color].loContrast,
+    },
+    relation: defaultTheme.relationships[color],
+  })
+
+  const compoundDarkColor = (color: string, depth: number) =>
+    toHex(
+      scale(color, {
+        l: -22 - 5 * depth,
+        s: -10 - 6 * depth,
+      }),
+    )
+  const compoundLightColor = (color: string, depth: number) =>
+    toHex(
+      scale(color, {
+        l: -20 - 3 * depth,
+        s: -3 - 6 * depth,
+      }),
+    )
+
+  const compounds = {
+    fill: vars.element.fill,
+    stroke: vars.element.stroke,
+  }
+
+  for (let depth = 1; depth <= 6; depth++) {
+    createGlobalTheme(
+      `:where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`,
+      compounds,
+      {
+        fill: compoundLightColor(defaultTheme.elements[color].fill, depth),
+        stroke: compoundLightColor(defaultTheme.elements[color].stroke, depth),
+      },
+    )
+
+    createGlobalTheme(
+      `${whereDark} :where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`,
+      compounds,
+      {
+        fill: compoundDarkColor(defaultTheme.elements[color].fill, depth),
+        stroke: compoundDarkColor(defaultTheme.elements[color].stroke, depth),
+      },
+    )
+  }
+}

package/src/LikeC4Diagram.props.ts

@@ -9,6 +9,7 @@ import type {
   WhereOperator,
 } from '@likec4/core'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
+import type { ControlsCustomLayout } from './context/ControlsCustomLayout'
 
 export type { WhereOperator }
 
@@ -185,6 +186,11 @@ export interface LikeC4DiagramProperties {
    */
   renderIcon?: ElementIconRenderer | undefined
 
+  /**
+   * Customize layout of the controls on the top left
+   */
+  renderControls?: ControlsCustomLayout | undefined
+
   /**
    * Dynamic filter, applies both to nodes and edges
    */

package/src/LikeC4Diagram.tsx

@@ -1,5 +1,5 @@
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
-import { useRef } from 'react'
+import { type PropsWithChildren, useRef } from 'react'
 import { isEmpty } from 'remeda'
 import {
   DiagramEventHandlers,
@@ -9,6 +9,7 @@ import {
   IconRendererProvider,
   RootContainer,
 } from './context'
+import { ControlsCustomLayoutProvider } from './context/ControlsCustomLayout'
 import { ReducedGraphicsContext } from './hooks/useIsReducedGraphics'
 import { LikeC4CustomColors } from './LikeC4CustomColors'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
@@ -18,7 +19,7 @@ import { LikeC4DiagramXYFlow } from './likec4diagram/XYFlow'
 import { useLikeC4Model } from './likec4model'
 import { DiagramActorProvider } from './state/DiagramActorProvider'
 
-export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers
+export type LikeC4DiagramProps = PropsWithChildren<LikeC4DiagramProperties & LikeC4DiagramEventHandlers>
 export function LikeC4Diagram({
   view,
   className,
@@ -55,8 +56,10 @@ export function LikeC4Diagram({
   onOpenSource,
   onBurgerMenuClick,
   renderIcon,
+  renderControls,
   where,
   showNavigationButtons = !!onNavigateTo,
+  children,
 }: LikeC4DiagramProps) {
   const hasLikec4model = !!useLikeC4Model()
   const initialRef = useRef<{
@@ -83,14 +86,17 @@ export function LikeC4Diagram({
     }
   }
 
-  // If view has more then 3000 * 2000 pixels - assume it is a big diagram
   const isReducedGraphicsMode = reduceGraphics === 'auto'
-    ? (view.bounds?.width ?? 1) * (view.bounds?.height ?? 1) > 6_000_000
+    // If view has more then 3000 * 2000 pixels - assume it is a big diagram
+    // Enable reduced graphics mode if diagram is "big" and pannable
+    ? pannable && ((view.bounds?.width ?? 1) * (view.bounds?.height ?? 1) > 6_000_000)
     : reduceGraphics
 
   return (
     <EnsureMantine>
-      <FramerMotionConfig>
+      <FramerMotionConfig
+        {...isReducedGraphicsMode && { reducedMotion: 'always' }}
+      >
         <IconRendererProvider value={renderIcon ?? null}>
           <DiagramFeatures
             features={{
@@ -127,7 +133,7 @@ export function LikeC4Diagram({
                 onBurgerMenuClick,
               }}>
               <ReducedGraphicsContext value={isReducedGraphicsMode}>
-                <RootContainer className={className}>
+                <RootContainer className={className} reduceGraphics={isReducedGraphicsMode}>
                   {!isEmpty(view.customColorDefinitions) && (
                     <LikeC4CustomColors customColors={view.customColorDefinitions} />
                   )}
@@ -143,11 +149,15 @@ export function LikeC4Diagram({
                         fitViewPadding,
                         ...xyNodesEdges,
                       }}>
-                      <LikeC4DiagramXYFlow
-                        nodesDraggable={nodesDraggable}
-                        nodesSelectable={nodesSelectable}
-                        background={background}
-                      />
+                      <ControlsCustomLayoutProvider value={renderControls ?? null}>
+                        <LikeC4DiagramXYFlow
+                          nodesDraggable={nodesDraggable}
+                          nodesSelectable={nodesSelectable}
+                          background={background}
+                        >
+                          {children}
+                        </LikeC4DiagramXYFlow>
+                      </ControlsCustomLayoutProvider>
                     </DiagramActorProvider>
                   </XYFlowProvider>
                 </RootContainer>

package/src/StaticLikeC4Diagram.tsx

@@ -11,6 +11,7 @@ export type StaticLikeC4DiagramProps = Pick<
   | 'enableElementDetails'
   | 'enableRelationshipDetails'
   | 'enableRelationshipBrowser'
+  | 'reduceGraphics'
   | 'initialWidth'
   | 'initialHeight'
   | 'renderIcon'

package/src/base/BaseXYFlow.tsx

@@ -9,11 +9,11 @@ import {
 } from '@xyflow/react'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
 import { useIsReducedGraphics } from '../hooks/useIsReducedGraphics'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
-import { useIsZoomTooSmall } from '../hooks/useXYFlow'
+import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow'
 import * as css from '../LikeC4Diagram.css'
 import { stopPropagation } from '../utils/xyflow'
 import { type XYBackground, Background } from './Background'
@@ -80,6 +80,17 @@ export const BaseXYFlow = <
   const isBgWithPattern = background !== 'transparent' && background !== 'solid'
   const isZoomTooSmall = useIsZoomTooSmall()
   const reduceGraphics = useIsReducedGraphics()
+
+  const isPanningRef = useRef(false)
+
+  const xystore = useXYStoreApi()
+
+  useEffect(() => {
+    return xystore.subscribe((state) => {
+      isPanningRef.current = state.paneDragging
+    })
+  }, [xystore])
+
   return (
     <ReactFlow<NodeType, EdgeType>
       colorMode={colorMode}
@@ -118,10 +129,10 @@ export const BaseXYFlow = <
       noPanClassName="nopan"
       panOnScroll={pannable}
       panOnDrag={pannable}
+      panActivationKeyCode={null}
       {...(!pannable && {
         selectionKeyCode: null,
       })}
-      onlyRenderVisibleElements={reduceGraphics}
       elementsSelectable={nodesSelectable}
       nodesFocusable={nodesDraggable || nodesSelectable}
       edgesFocusable={false}
@@ -134,6 +145,7 @@ export const BaseXYFlow = <
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onNodeMouseEnter={useCallbackRef((_event, node) => {
+        if (isPanningRef.current) return
         onNodesChange([{
           id: node.id,
           type: 'replace',
@@ -141,6 +153,7 @@ export const BaseXYFlow = <
         }])
       })}
       onNodeMouseLeave={useCallbackRef((_event, node) => {
+        if (node.data.hovered !== true) return
         onNodesChange([{
           id: node.id,
           type: 'replace',
@@ -148,6 +161,7 @@ export const BaseXYFlow = <
         }])
       })}
       onEdgeMouseEnter={useCallbackRef((_event, edge) => {
+        if (isPanningRef.current) return
         onEdgesChange([{
           id: edge.id,
           type: 'replace',
@@ -155,6 +169,7 @@ export const BaseXYFlow = <
         }])
       })}
       onEdgeMouseLeave={useCallbackRef((_event, edge) => {
+        if (edge.data.hovered !== true) return
         onEdgesChange([{
           id: edge.id,
           type: 'replace',

package/src/base/const.ts

@@ -1,7 +1,7 @@
 export const ZIndexes = {
-  Compound: 2,
-  Edge: 4,
-  Element: 6,
+  Compound: 0,
+  Edge: 2,
+  Element: 2,
   Max: 8,
 } as const