@likec4/diagram 1.24.0 → 1.24.1

package/dist/state/diagram-machine.js

@@ -2,14 +2,15 @@ import { nonNullable, invariant, DiagramNode, nonexhaustive, getBBoxCenter, getP
 import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
 import { nodeToRect } from "@xyflow/system";
 import { hasAtLeast, prop, clamp, first } from "remeda";
-import { setup, enqueueActions, assertEvent, stopChild, assign, sendTo, cancel, raise, spawnChild, and, or } from "xstate";
+import { setup, enqueueActions, assign, assertEvent, stopChild, sendTo, cancel, raise, spawnChild, and, or } from "xstate";
 import { MinZoom } from "../base/const.js";
 import { AllDisabled } from "../context/DiagramFeatures.js";
 import { createLayoutConstraints } from "../likec4diagram/useLayoutConstraints.js";
 import { overlaysActorLogic } from "../overlays/overlaysActor.js";
 import { getAligner, toNodeRect } from "./aligners.js";
-import { resetEdgeControlPoints, updateEdgeData, updateNodeData, updateNavigationHistory, mergeXYNodesEdges, navigateForward, navigateBack, unfocusNodesEdges, updateActiveWalkthrough, focusNodesEdges, lastClickedNode } from "./assign.js";
+import { lastClickedNode, resetEdgeControlPoints, updateEdgeData, updateNodeData, updateNavigationHistory, mergeXYNodesEdges, navigateForward, navigateBack, unfocusNodesEdges, updateActiveWalkthrough, focusNodesEdges } from "./assign.js";
 import { hotkeyActorLogic } from "./hotkeyActor.js";
+import { DiagramToggledFeaturesPersistence } from "./persistence.js";
 import { syncManualLayoutActorLogic } from "./syncManualLayoutActor.js";
 import { typedSystem, findDiagramNode, focusedBounds } from "./utils.js";
 const diagramMachine = setup({
@@ -40,7 +41,7 @@ const diagramMachine = setup({
       }
       nonexhaustive(event.type);
     },
-    "click: selected node ": ({ event }) => {
+    "click: selected node": ({ event }) => {
       assertEvent(event, "xyflow.nodeClick");
       return event.node.selected === true;
     },
@@ -52,6 +53,10 @@ const diagramMachine = setup({
     "click: focused node": ({ context, event }) => {
       assertEvent(event, "xyflow.nodeClick");
       return context.focusedNode === event.node.id;
+    },
+    "click: node has connections": ({ context, event }) => {
+      assertEvent(event, "xyflow.nodeClick");
+      return context.xyedges.some((e) => e.source === event.node.id || e.target === event.node.id);
     }
   },
   actions: {
@@ -61,21 +66,22 @@ const diagramMachine = setup({
     },
     "trigger:OpenSource": (_, _params) => {
     },
-    "open source of focused node": enqueueActions(({ context, enqueue }) => {
-      if (!context.focusedNode || !context.features.enableVscode) return;
-      const diagramNode = findDiagramNode(context, context.focusedNode);
+    "assign lastClickedNode": assign(({ context, event }) => {
+      assertEvent(event, "xyflow.nodeClick");
+      return {
+        lastClickedNode: lastClickedNode({ context, event })
+      };
+    }),
+    "open source of focused or last clicked node": enqueueActions(({ context, enqueue }) => {
+      var _a;
+      const nodeId = context.focusedNode ?? ((_a = context.lastClickedNode) == null ? void 0 : _a.id);
+      if (!nodeId || !context.features.enableVscode) return;
+      const diagramNode = findDiagramNode(context, nodeId);
       if (!diagramNode) return;
-      enqueue.cancel("openSource");
       if (DiagramNode.deploymentRef(diagramNode)) {
-        enqueue.raise({ type: "open.source", deployment: DiagramNode.deploymentRef(diagramNode) }, {
-          id: "openSource",
-          delay: 100
-        });
+        enqueue.raise({ type: "open.source", deployment: DiagramNode.deploymentRef(diagramNode) });
       } else if (DiagramNode.modelRef(diagramNode)) {
-        enqueue.raise({ type: "open.source", element: DiagramNode.modelRef(diagramNode) }, {
-          id: "openSource",
-          delay: 100
-        });
+        enqueue.raise({ type: "open.source", element: DiagramNode.modelRef(diagramNode) });
       }
     }),
     "xyflow:fitDiagram": ({ context }, params) => {
@@ -183,7 +189,7 @@ const diagramMachine = setup({
   context: ({ input, self, spawn }) => ({
     ...input,
     features: { ...AllDisabled },
-    toggledFeatures: {
+    toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
       enableReadOnly: true
     },
     initialized: false,
@@ -242,9 +248,10 @@ const diagramMachine = setup({
             // TODO: xstate fails to infer the type of the guard
             guard: and([
               "enabled: FocusMode",
+              "click: node has connections",
               or([
                 "click: same node",
-                "click: selected node "
+                "click: selected node"
               ])
             ]),
             actions: [
@@ -256,9 +263,10 @@ const diagramMachine = setup({
             target: "focused"
           },
           {
-            actions: assign({
-              lastClickedNode
-            })
+            actions: [
+              "assign lastClickedNode",
+              "open source of focused or last clicked node"
+            ]
           }
         ],
         "xyflow.paneClick": {
@@ -301,7 +309,7 @@ const diagramMachine = setup({
           ...focusNodesEdges(s),
           viewportBeforeFocus: { ...s.context.viewport }
         })),
-        "open source of focused node",
+        "open source of focused or last clicked node",
         spawnChild("hotkeyActorLogic", { id: "hotkey" }),
         {
           type: "xyflow:fitDiagram",
@@ -334,7 +342,7 @@ const diagramMachine = setup({
                 focusedNode: ({ event }) => event.node.id
               }),
               assign(focusNodesEdges),
-              "open source of focused node",
+              "open source of focused or last clicked node",
               {
                 type: "xyflow:fitDiagram",
                 params: focusedBounds
@@ -348,7 +356,7 @@ const diagramMachine = setup({
               focusedNode: ({ event }) => event.nodeId
             }),
             assign(focusNodesEdges),
-            "open source of focused node",
+            "open source of focused or last clicked node",
             {
               type: "xyflow:fitDiagram",
               params: focusedBounds
@@ -380,69 +388,60 @@ const diagramMachine = setup({
     },
     // Navigating to another view (after `navigateTo` event)
     navigating: {
-      initial: "pending",
-      type: "compound",
-      states: {
-        pending: {
-          entry: enqueueActions(({ enqueue }) => {
-            enqueue("closeAllOverlays");
-            enqueue("stopSyncLayout");
-            enqueue({
-              type: "trigger:NavigateTo",
-              params: ({ context }) => ({
-                viewId: nonNullable(context.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
-              })
-            });
-          }),
-          on: {
-            "update.view": {
-              actions: enqueueActions(({ enqueue, context, event }) => {
-                const { fromNode, toNode } = findCorrespondingNode(context, event);
-                if (fromNode && toNode) {
-                  enqueue({
-                    type: "xyflow:alignNodeFromToAfterNavigate",
-                    params: {
-                      fromNode: fromNode.id,
-                      toPosition: {
-                        x: toNode.position[0],
-                        y: toNode.position[1]
-                      }
-                    }
-                  });
-                  enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 80 });
-                } else {
-                  enqueue({
-                    type: "xyflow:setViewportCenter",
-                    params: getBBoxCenter(event.view.bounds)
-                  });
-                  enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 25 });
-                }
-                enqueue.assign(updateNavigationHistory);
-                enqueue.assign(mergeXYNodesEdges);
-              }),
-              target: "done"
-            }
-          }
-        },
-        done: {
-          type: "final"
+      entry: [
+        "closeAllOverlays",
+        "stopSyncLayout",
+        {
+          type: "trigger:NavigateTo",
+          params: ({ context }) => ({
+            viewId: nonNullable(context.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
+          })
         }
-      },
-      onDone: {
-        target: "idle"
-      },
+      ],
       exit: assign({
         syncLayoutActorRef: ({ self, context, spawn }) => spawn("syncManualLayoutActorLogic", {
           id: "syncLayout",
           systemId: "syncLayout",
           input: { parent: self, viewId: context.view.id }
-        }),
-        lastOnNavigate: null
-      })
+        })
+        // lastOnNavigate: null,
+      }),
+      on: {
+        "update.view": {
+          actions: enqueueActions(({ enqueue, context, event }) => {
+            const { fromNode, toNode } = findCorrespondingNode(context, event);
+            if (fromNode && toNode) {
+              enqueue({
+                type: "xyflow:alignNodeFromToAfterNavigate",
+                params: {
+                  fromNode: fromNode.id,
+                  toPosition: {
+                    x: toNode.position[0],
+                    y: toNode.position[1]
+                  }
+                }
+              });
+              enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 80 });
+            } else {
+              enqueue({
+                type: "xyflow:setViewportCenter",
+                params: getBBoxCenter(event.view.bounds)
+              });
+              enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 25 });
+            }
+            enqueue.assign(updateNavigationHistory);
+            enqueue.assign(mergeXYNodesEdges);
+            enqueue.assign({
+              lastOnNavigate: null
+            });
+          }),
+          target: "#idle"
+        }
+      }
     },
     walkthrough: {
       entry: [
-        // spawnChild('hotkeyActor', { id: 'hotkey' }),
+        spawnChild("hotkeyActorLogic", { id: "hotkey" }),
         assign({
           viewportBeforeFocus: ({ context }) => context.viewport,
           activeWalkthrough: ({ context, event }) => {
@@ -702,10 +701,12 @@ const diagramMachine = setup({
     },
     "toggle.feature": {
       actions: assign({
-        toggledFeatures: ({ context, event }) => ({
-          ...context.toggledFeatures,
-          [`enable${event.feature}`]: event.forceValue ?? !(context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`])
-        })
+        toggledFeatures: ({ context, event }) => {
+          return DiagramToggledFeaturesPersistence.write({
+            ...context.toggledFeatures,
+            [`enable${event.feature}`]: event.forceValue ?? !(context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`])
+          });
+        }
       })
     }
   },

package/dist/state/persistence.d.ts

@@ -0,0 +1,5 @@
+import { EnabledFeatures } from '../context/DiagramFeatures';
+export declare const DiagramToggledFeaturesPersistence: {
+    read(): Partial<EnabledFeatures> | null;
+    write<F extends Partial<EnabledFeatures>>(toggledFeatures: F): F;
+};

package/dist/state/persistence.js

@@ -0,0 +1,23 @@
+import { pickBy, isBoolean } from "remeda";
+const key = `likec4:diagram:toggledFeatures`;
+const DiagramToggledFeaturesPersistence = {
+  read() {
+    try {
+      let fromStorage = sessionStorage.getItem(key);
+      if (fromStorage) {
+        return JSON.parse(fromStorage);
+      }
+      throw new Error(`Workspace ${key} not found`);
+    } catch (e) {
+      console.error(`Error reading fromStorage ${key}:`, e);
+      return null;
+    }
+  },
+  write(toggledFeatures) {
+    sessionStorage.setItem(key, JSON.stringify(pickBy(toggledFeatures, isBoolean)));
+    return toggledFeatures;
+  }
+};
+export {
+  DiagramToggledFeaturesPersistence
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.24.0",
+  "version": "1.24.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -37,21 +37,21 @@
     "@tabler/icons-react": "3.29.0",
     "@vanilla-extract/dynamic": "^2.1.2",
     "@xstate/react": "^5.0.2",
-    "@xyflow/react": "12.4.3",
-    "@xyflow/system": "0.0.51",
+    "@xyflow/react": "12.4.4",
+    "@xyflow/system": "0.0.52",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.2.2",
     "fast-equals": "^5.2.2",
-    "framer-motion": "^12.4.2",
+    "framer-motion": "^12.4.7",
     "khroma": "^2.1.0",
     "nanostores": "0.11.3",
     "react-error-boundary": "^5.0.0",
-    "remeda": "^2.20.1",
+    "remeda": "^2.20.2",
     "type-fest": "4.34.1",
     "xstate": "^5.19.2",
-    "@likec4/core": "1.24.0"
+    "@likec4/core": "1.24.1"
   },
   "peerDependencies": {
     "@mantine/core": "7.17.0",
@@ -72,14 +72,14 @@
     "typescript": "5.7.3",
     "vite": "6.1.0",
     "vite-plugin-dts": "^4.5.0",
-    "vitest": "^3.0.4",
-    "@likec4/tsconfig": "1.24.0"
+    "vitest": "^3.0.6",
+    "@likec4/tsconfig": "1.24.1"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
     "build": "vite build",
     "lint": "run -T eslint src/ --fix",
-    "clean": "rm -r -f -g 'dist/*' .tsbuildinfo",
+    "clean": "rm -r -f -g \"dist/*\" .tsbuildinfo",
     "test": "vitest run --no-isolate"
   }
 }

package/src/LikeC4Diagram.css.ts

@@ -1,4 +1,5 @@
 import { globalStyle, style } from '@vanilla-extract/css'
+import { whereNotReducedGraphics, whereReducedGraphics } from './globals.css'
 import { vars, xyvars } from './theme-vars'
 
 export const cssReactFlow = style({
@@ -13,6 +14,10 @@ export const cssReactFlow = style({
   },
 })
 
+export const reactFlowReducedGraphics = `${whereReducedGraphics} ${cssReactFlow}`
+export const reactFlow = `${whereNotReducedGraphics} ${cssReactFlow}`
+export { whereNotReducedGraphics, whereReducedGraphics }
+
 export const notInitialized = style({
   opacity: 0,
 })
@@ -30,11 +35,6 @@ globalStyle(`.react-flow${cssReactFlow}`, {
 globalStyle(`.react-flow${cssReactFlow} .react-flow__pane`, {
   WebkitUserSelect: 'none',
 })
-
-globalStyle(`.react-flow${cssReactFlow} .xyflow__viewport`, {
-  willChange: 'transform',
-})
-
 export const cssDisablePan = style({})
 
 export const cssTransparentBg = style({})
@@ -58,3 +58,11 @@ export const hiddenIfZoomTooSmall = style({
     },
   },
 })
+
+export const hiddenIfReducedGraphics = style({
+  selectors: {
+    [`${reactFlowReducedGraphics} &`]: {
+      visibility: 'hidden',
+    },
+  },
+})

package/src/LikeC4Diagram.props.ts

@@ -172,6 +172,13 @@ export interface LikeC4DiagramProperties {
    */
   experimentalEdgeEditing?: boolean | undefined
 
+  /**
+   * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+   *
+   * @default 'auto' - will be set to true if view has more then 3000 * 2000 pixels
+   */
+  reduceGraphics?: 'auto' | boolean | undefined
+
   /**
    * Render icon for an element, bundled or remote
    * By default, if icon is http:// or https://, it will be rendered as an image

package/src/LikeC4Diagram.tsx

@@ -9,6 +9,7 @@ import {
   IconRendererProvider,
   RootContainer,
 } from './context'
+import { ReducedGraphicsContext } from './hooks/useIsReducedGraphics'
 import { LikeC4CustomColors } from './LikeC4CustomColors'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import type { Types } from './likec4diagram/types'
@@ -41,6 +42,7 @@ export function LikeC4Diagram({
   initialWidth,
   initialHeight,
   experimentalEdgeEditing = false,
+  reduceGraphics = 'auto',
   onCanvasClick,
   onCanvasContextMenu,
   onCanvasDblClick,
@@ -81,6 +83,11 @@ 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
+    : reduceGraphics
+
   return (
     <EnsureMantine>
       <FramerMotionConfig>
@@ -119,30 +126,32 @@ export function LikeC4Diagram({
                 onOpenSource,
                 onBurgerMenuClick,
               }}>
-              <RootContainer className={className}>
-                {!isEmpty(view.customColorDefinitions) && (
-                  <LikeC4CustomColors customColors={view.customColorDefinitions} />
-                )}
-                <XYFlowProvider
-                  fitView={fitView}
-                  {...initialRef.current}
-                >
-                  <DiagramActorProvider
-                    input={{
-                      view,
-                      pannable,
-                      zoomable,
-                      fitViewPadding,
-                      ...xyNodesEdges,
-                    }}>
-                    <LikeC4DiagramXYFlow
-                      nodesDraggable={nodesDraggable}
-                      nodesSelectable={nodesSelectable}
-                      background={background}
-                    />
-                  </DiagramActorProvider>
-                </XYFlowProvider>
-              </RootContainer>
+              <ReducedGraphicsContext value={isReducedGraphicsMode}>
+                <RootContainer className={className}>
+                  {!isEmpty(view.customColorDefinitions) && (
+                    <LikeC4CustomColors customColors={view.customColorDefinitions} />
+                  )}
+                  <XYFlowProvider
+                    fitView={fitView}
+                    {...initialRef.current}
+                  >
+                    <DiagramActorProvider
+                      input={{
+                        view,
+                        pannable,
+                        zoomable,
+                        fitViewPadding,
+                        ...xyNodesEdges,
+                      }}>
+                      <LikeC4DiagramXYFlow
+                        nodesDraggable={nodesDraggable}
+                        nodesSelectable={nodesSelectable}
+                        background={background}
+                      />
+                    </DiagramActorProvider>
+                  </XYFlowProvider>
+                </RootContainer>
+              </ReducedGraphicsContext>
             </DiagramEventHandlers>
           </DiagramFeatures>
         </IconRendererProvider>

package/src/base/BaseXYFlow.tsx

@@ -8,9 +8,11 @@ import {
   useStoreApi,
 } from '@xyflow/react'
 import clsx from 'clsx'
+import { shallowEqual } from 'fast-equals'
 import { useMemo } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
-import { useUpdateEffect } from '../hooks'
+import { useIsReducedGraphics } from '../hooks/useIsReducedGraphics'
+import { useUpdateEffect } from '../hooks/useUpdateEffect'
 import { useIsZoomTooSmall } from '../hooks/useXYFlow'
 import * as css from '../LikeC4Diagram.css'
 import { stopPropagation } from '../utils/xyflow'
@@ -41,10 +43,8 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
       | 'zoomActivationKeyCode'
       | 'zoomOnScroll'
       | 'elementsSelectable'
-      | 'onNodeMouseEnter'
-      | 'onNodeMouseLeave'
-      | 'onEdgeMouseEnter'
-      | 'onEdgeMouseLeave'
+      | 'onNodeDoubleClick'
+      | 'onEdgeDoubleClick'
       | 'fitViewOptions'
     >,
     // Required props
@@ -79,6 +79,7 @@ export const BaseXYFlow = <
 }: BaseXYFlowProps<NodeType, EdgeType>) => {
   const isBgWithPattern = background !== 'transparent' && background !== 'solid'
   const isZoomTooSmall = useIsZoomTooSmall()
+  const reduceGraphics = useIsReducedGraphics()
   return (
     <ReactFlow<NodeType, EdgeType>
       colorMode={colorMode}
@@ -90,7 +91,12 @@ export const BaseXYFlow = <
         background === 'transparent' && css.cssTransparentBg,
         className,
       )}
-      data-likec4-zoom-small={isZoomTooSmall}
+      {...isZoomTooSmall && {
+        ['data-likec4-zoom-small']: true,
+      }}
+      {...reduceGraphics && {
+        ['data-likec4-reduced-graphics']: true,
+      }}
       zoomOnPinch={zoomable}
       zoomOnScroll={!pannable && zoomable}
       {...(!zoomable && {
@@ -115,8 +121,7 @@ export const BaseXYFlow = <
       {...(!pannable && {
         selectionKeyCode: null,
       })}
-      // TODO: benchmarks first
-      //onlyRenderVisibleElements={nodes.length > 75}
+      onlyRenderVisibleElements={reduceGraphics}
       elementsSelectable={nodesSelectable}
       nodesFocusable={nodesDraggable || nodesSelectable}
       edgesFocusable={false}
@@ -202,7 +207,7 @@ const ViewportResizeHanlder = ({
 }: {
   onViewportResize: () => void
 }) => {
-  const { width, height } = useStore(selectDimensions)
+  const { width, height } = useStore(selectDimensions, shallowEqual)
   useUpdateEffect(onViewportResize, [width, height])
 
   return <></>

package/src/base/const.ts

@@ -5,5 +5,5 @@ export const ZIndexes = {
   Max: 8,
 } as const
 
-export const MinZoom = 0.1
+export const MinZoom = 0.05
 export const MaxZoom = 2

package/src/base/primitives/compound/CompoundActionButton.css.ts

@@ -1,4 +1,5 @@
 import { style } from '@vanilla-extract/css'
+import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
 import { transitions, vars } from '../../../theme-vars'
 
 export const container = style({
@@ -45,11 +46,16 @@ export const actionIcon = style({
     },
     [`:where([data-hovered='true']) &`]: {
       opacity: 1,
+      transitionDelay: '100ms',
+      transitionDuration: '300ms',
       // boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
       // color: `var(--ai-color-hover)`,
       // vars: {
       //   '--ai-bg': `var(--ai-bg-hover)`,
       // },
     },
+    [`${reactFlowReducedGraphics} &`]: {
+      boxShadow: 'none',
+    },
   },
 })

package/src/base/primitives/compound/CompoundDetailsButton.css.ts

@@ -1,4 +1,5 @@
 import { createVar, globalStyle, style } from '@vanilla-extract/css'
+import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
 import { vars } from '../../../theme-vars'
 
 export const container = style({
@@ -47,6 +48,9 @@ export const actionIcon = style({
         '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
       },
     },
+    [`${reactFlowReducedGraphics} &`]: {
+      boxShadow: 'none',
+    },
   },
 })