@likec4/diagram 1.22.0 → 1.22.1

package/dist/likec4diagram/state/machine.d.ts

@@ -3,6 +3,7 @@ import { ReactFlowInstance, useStoreApi, GeneralHelpers, ViewportHelperFunctions
 import { EdgeChange, NodeChange, Rect, Viewport, EdgeMarkerType, HandleType } from '@xyflow/system';
 import { ActorRefFromLogic, SnapshotFrom, StateMachine, CallbackActorLogic, AnyEventObject, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, ActionFunction, ActorLogic, Values, RequiredActorOptions, GetConcreteByKey, StopAction, CancelAction } from 'xstate';
 import { EnabledFeatures } from '../../context';
+import { FeatureName } from '../../context/DiagramFeatures';
 import { OpenSourceParams } from '../../LikeC4Diagram.props';
 import { Types } from '../types';
 import { AlignmentMode } from './aligners';
@@ -31,8 +32,10 @@ export interface Input {
     pannable: boolean;
     fitViewPadding: number;
 }
+type ToggledFeatures = Partial<EnabledFeatures>;
 export interface DiagramContext extends Input {
     features: EnabledFeatures;
+    toggledFeatures: ToggledFeatures;
     initialized: boolean;
     viewport: Viewport;
     viewportChangedManually: boolean;
@@ -156,6 +159,10 @@ export type Events = HotKeyEvent | {
     direction: 'next' | 'previous';
 } | {
     type: 'walkthrough.end';
+} | {
+    type: 'toggle.feature';
+    feature: FeatureName;
+    forceValue?: boolean;
 };
 export type ActionArg = {
     context: DiagramContext;
@@ -614,6 +621,10 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
             toPosition: XYPoint;
         };
     };
+    updateFeatures: {
+        type: "updateFeatures";
+        params: NonReducibleUnknown;
+    };
 }>, Values<{
     "enabled: FitView": {
         type: "enabled: FitView";
@@ -1444,6 +1455,9 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
             enableLikeC4Model: boolean;
             enableVscode: boolean;
         };
+        toggledFeatures: {
+            enableReadOnly: true;
+        };
         initialized: false;
         viewportChangedManually: false;
         lastOnNavigate: null;
@@ -1831,6 +1845,10 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
                                 toPosition: XYPoint;
                             };
                         };
+                        updateFeatures: {
+                            type: "updateFeatures";
+                            params: NonReducibleUnknown;
+                        };
                     }>, Values<{
                         "enabled: FitView": {
                             type: "enabled: FitView";
@@ -4531,6 +4549,10 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
                         toPosition: XYPoint;
                     };
                 };
+                updateFeatures: {
+                    type: "updateFeatures";
+                    params: NonReducibleUnknown;
+                };
             }>, Values<{
                 "enabled: FitView": {
                     type: "enabled: FitView";
@@ -5775,6 +5797,10 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
                                 toPosition: XYPoint;
                             };
                         };
+                        updateFeatures: {
+                            type: "updateFeatures";
+                            params: NonReducibleUnknown;
+                        };
                     }>, Values<{
                         "enabled: FitView": {
                             type: "enabled: FitView";
@@ -6080,6 +6106,10 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
                                         toPosition: XYPoint;
                                     };
                                 };
+                                updateFeatures: {
+                                    type: "updateFeatures";
+                                    params: NonReducibleUnknown;
+                                };
                             }>, Values<{
                                 "enabled: FitView": {
                                     type: "enabled: FitView";
@@ -7246,6 +7276,10 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
                                 toPosition: XYPoint;
                             };
                         };
+                        updateFeatures: {
+                            type: "updateFeatures";
+                            params: NonReducibleUnknown;
+                        };
                     }>, Values<{
                         "enabled: FitView": {
                             type: "enabled: FitView";
@@ -7559,6 +7593,10 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
                         toPosition: XYPoint;
                     };
                 };
+                updateFeatures: {
+                    type: "updateFeatures";
+                    params: NonReducibleUnknown;
+                };
             }>, Values<{
                 "enabled: FitView": {
                     type: "enabled: FitView";
@@ -9385,6 +9423,10 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
                         toPosition: XYPoint;
                     };
                 };
+                updateFeatures: {
+                    type: "updateFeatures";
+                    params: NonReducibleUnknown;
+                };
             }>, Values<{
                 "enabled: FitView": {
                     type: "enabled: FitView";
@@ -9640,10 +9682,10 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
             }>, never, never, never, never>;
         };
         readonly 'update.features': {
-            readonly actions: ActionFunction<DiagramContext, {
-                type: "update.features";
-                features: EnabledFeatures;
-            }, Events, undefined, Values<{
+            readonly actions: "updateFeatures";
+        };
+        readonly 'update.nodeData': {
+            readonly actions: ActionFunction<DiagramContext, Events, Events, undefined, Values<{
                 hotkeyActor: {
                     src: "hotkeyActor";
                     logic: CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent>;
@@ -9854,7 +9896,7 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
                 };
             }>, never, never, never, never>;
         };
-        readonly 'update.nodeData': {
+        readonly 'update.edgeData': {
             readonly actions: ActionFunction<DiagramContext, Events, Events, undefined, Values<{
                 hotkeyActor: {
                     src: "hotkeyActor";
@@ -10066,8 +10108,27 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
                 };
             }>, never, never, never, never>;
         };
-        readonly 'update.edgeData': {
-            readonly actions: ActionFunction<DiagramContext, Events, Events, undefined, Values<{
+        readonly 'layout.align': {
+            readonly guard: "not readonly";
+            readonly actions: readonly [{
+                readonly type: "layout.align";
+                readonly params: ({ event }: {
+                    context: DiagramContext;
+                    event: {
+                        type: "layout.align";
+                        mode: AlignmentMode;
+                    };
+                }) => {
+                    mode: AlignmentMode;
+                };
+            }, ActionFunction<DiagramContext, {
+                type: "layout.align";
+                mode: AlignmentMode;
+            }, Events, undefined, never, never, never, never, never>];
+        };
+        readonly 'layout.resetEdgeControlPoints': {
+            readonly guard: "not readonly";
+            readonly actions: readonly [ ActionFunction<DiagramContext, Events, Events, undefined, Values<{
                 hotkeyActor: {
                     src: "hotkeyActor";
                     logic: CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent>;
@@ -10276,29 +10337,26 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
                     }, "active", any, any, any>, Events, Input, any, any>;
                     id: "relationshipsBrowser";
                 };
-            }>, never, never, never, never>;
+            }>, never, never, never, never>, ActionFunction<DiagramContext, {
+                type: "layout.resetEdgeControlPoints";
+            }, Events, undefined, never, never, never, never, never>];
         };
-        readonly 'layout.align': {
-            readonly guard: "not readonly";
-            readonly actions: readonly [{
-                readonly type: "layout.align";
-                readonly params: ({ event }: {
-                    context: DiagramContext;
-                    event: {
-                        type: "layout.align";
-                        mode: AlignmentMode;
-                    };
-                }) => {
-                    mode: AlignmentMode;
-                };
-            }, ActionFunction<DiagramContext, {
-                type: "layout.align";
-                mode: AlignmentMode;
+        readonly 'xyflow.resized': {
+            readonly guard: ({ context }: {
+                context: DiagramContext;
+            }) => boolean;
+            readonly actions: readonly [ CancelAction<DiagramContext, {
+                type: "xyflow.resized";
+            }, undefined, Events>, ActionFunction<DiagramContext, {
+                type: "xyflow.resized";
             }, Events, undefined, never, never, never, never, never>];
         };
-        readonly 'layout.resetEdgeControlPoints': {
-            readonly guard: "not readonly";
-            readonly actions: readonly [ ActionFunction<DiagramContext, Events, Events, undefined, Values<{
+        readonly 'open.elementDetails': {
+            readonly actions: ActionFunction<DiagramContext, {
+                type: "open.elementDetails";
+                fqn: Fqn;
+                fromNode?: NodeId | undefined;
+            }, Events, undefined, Values<{
                 hotkeyActor: {
                     src: "hotkeyActor";
                     logic: CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent>;
@@ -10507,25 +10565,37 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
                     }, "active", any, any, any>, Events, Input, any, any>;
                     id: "relationshipsBrowser";
                 };
-            }>, never, never, never, never>, ActionFunction<DiagramContext, {
-                type: "layout.resetEdgeControlPoints";
-            }, Events, undefined, never, never, never, never, never>];
+            }>, never, never, never, never>;
+            readonly target: ".overlay.elementDetails";
         };
-        readonly 'xyflow.resized': {
-            readonly guard: ({ context }: {
-                context: DiagramContext;
-            }) => boolean;
-            readonly actions: readonly [ CancelAction<DiagramContext, {
-                type: "xyflow.resized";
-            }, undefined, Events>, ActionFunction<DiagramContext, {
-                type: "xyflow.resized";
-            }, Events, undefined, never, never, never, never, never>];
+        readonly 'open.relationshipDetails': {
+            readonly target: ".overlay.relationshipDetails";
         };
-        readonly 'open.elementDetails': {
+        readonly 'open.relationshipsBrowser': {
+            readonly target: ".overlay.relationshipsBrowser";
+        };
+        readonly 'open.source': {
+            readonly actions: {
+                readonly type: "trigger:OpenSource";
+                readonly params: (data: {
+                    context: DiagramContext;
+                    event: {
+                        type: "open.source";
+                    } & OpenSourceParams;
+                }) => {
+                    type: "open.source";
+                } & OpenSourceParams;
+            };
+        };
+        readonly 'walkthrough.start': {
+            readonly guard: "is dynamic view";
+            readonly target: ".walkthrough";
+        };
+        readonly 'toggle.feature': {
             readonly actions: ActionFunction<DiagramContext, {
-                type: "open.elementDetails";
-                fqn: Fqn;
-                fromNode?: NodeId | undefined;
+                type: "toggle.feature";
+                feature: FeatureName;
+                forceValue?: boolean;
             }, Events, undefined, Values<{
                 hotkeyActor: {
                     src: "hotkeyActor";
@@ -10736,30 +10806,6 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
                     id: "relationshipsBrowser";
                 };
             }>, never, never, never, never>;
-            readonly target: ".overlay.elementDetails";
-        };
-        readonly 'open.relationshipDetails': {
-            readonly target: ".overlay.relationshipDetails";
-        };
-        readonly 'open.relationshipsBrowser': {
-            readonly target: ".overlay.relationshipsBrowser";
-        };
-        readonly 'open.source': {
-            readonly actions: {
-                readonly type: "trigger:OpenSource";
-                readonly params: (data: {
-                    context: DiagramContext;
-                    event: {
-                        type: "open.source";
-                    } & OpenSourceParams;
-                }) => {
-                    type: "open.source";
-                } & OpenSourceParams;
-            };
-        };
-        readonly 'walkthrough.start': {
-            readonly guard: "is dynamic view";
-            readonly target: ".walkthrough";
         };
     };
     readonly exit: readonly [ StopAction<DiagramContext, Events, undefined, Events>, StopAction<DiagramContext, Events, undefined, Events>, ActionFunction<DiagramContext, Events, Events, undefined, Values<{

package/dist/likec4diagram/state/machine.js

@@ -2,7 +2,7 @@ import { nonNullable, invariant, nonexhaustive, getBBoxCenter, getParallelStepsP
 import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
 import { nodeToRect } from "@xyflow/system";
 import { hasAtLeast, prop, clamp, first } from "remeda";
-import { setup, assertEvent, stopChild, assign, cancel, raise, enqueueActions, spawnChild, sendTo, and, or } from "xstate";
+import { setup, assign, assertEvent, stopChild, cancel, raise, enqueueActions, spawnChild, sendTo, and, or } from "xstate";
 import { MinZoom } from "../../base/const.js";
 import { AllDisabled } from "../../context/DiagramFeatures.js";
 import { relationshipDetailsActor } from "../../overlays/relationship-details/actor.js";
@@ -143,13 +143,24 @@ const diagramMachine = setup({
           };
         });
       });
-    }
+    },
+    "updateFeatures": assign(({ event }) => {
+      assertEvent(event, "update.features");
+      return {
+        features: {
+          ...event.features
+        }
+      };
+    })
   }
 }).createMachine({
   initial: "initializing",
   context: ({ input, self, spawn }) => ({
     ...input,
     features: { ...AllDisabled },
+    toggledFeatures: {
+      enableReadOnly: true
+    },
     initialized: false,
     viewportChangedManually: false,
     lastOnNavigate: null,
@@ -699,9 +710,7 @@ const diagramMachine = setup({
       actions: assign(({ event }) => ({ ...event.inputs }))
     },
     "update.features": {
-      actions: assign({
-        features: ({ event }) => event.features
-      })
+      actions: "updateFeatures"
     },
     "update.nodeData": {
       actions: assign(updateNodeData)
@@ -758,6 +767,14 @@ const diagramMachine = setup({
     "walkthrough.start": {
       guard: "is dynamic view",
       target: ".walkthrough"
+    },
+    "toggle.feature": {
+      actions: assign({
+        toggledFeatures: ({ context, event }) => ({
+          ...context.toggledFeatures,
+          [`enable${event.feature}`]: event.forceValue ?? !(context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`])
+        })
+      })
     }
   },
   exit: [

package/dist/likec4diagram/state/syncManualLayoutActor.js

@@ -98,12 +98,7 @@ function createViewChange(parentContext) {
   const { view, xystore, xyflow } = parentContext;
   const { nodeLookup } = xystore.getState();
   const movedNodes = /* @__PURE__ */ new Set();
-  let bounds = {
-    x: 0,
-    y: 0,
-    width: 1,
-    height: 1
-  };
+  let bounds;
   const nodes = reduce([...nodeLookup.values()], (acc, node) => {
     const dimensions = getNodeDimensions(node);
     if (!isSamePoint(node.internals.positionAbsolute, node.data.position) || node.initialWidth !== dimensions.width || node.initialHeight !== dimensions.height) {
@@ -116,7 +111,7 @@ function createViewChange(parentContext) {
       width: Math.ceil(dimensions.width),
       height: Math.ceil(dimensions.height)
     };
-    bounds = getBoundsOfRects(bounds, rect);
+    bounds = bounds ? getBoundsOfRects(bounds, rect) : rect;
     return acc;
   }, {});
   const edges = reduce((xyflow == null ? void 0 : xyflow.getEdges()) ?? [], (acc, { source, target, data }) => {
@@ -159,9 +154,10 @@ function createViewChange(parentContext) {
       x2: Math.ceil(Math.max(...allX)),
       y2: Math.ceil(Math.max(...allY))
     });
-    bounds = getBoundsOfRects(bounds, rect);
+    bounds = bounds ? getBoundsOfRects(bounds, rect) : rect;
     return acc;
   }, {});
+  bounds ?? (bounds = view.bounds);
   return {
     op: "save-manual-layout",
     layout: {

package/dist/likec4diagram/ui/controls/Controls.js

@@ -14,6 +14,7 @@ import { LayoutDriftNotification } from "./LayoutDriftNotification.js";
 import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
 import { NavigationButtons } from "./NavigationButtons.js";
 import { navigationButtons, actionIconGroup, panel } from "./styles.css.js";
+import { ToggleReadonly } from "./ToggleReadonly.js";
 import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
 import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
@@ -82,6 +83,7 @@ const Controls = memo(() => {
                 children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
               }
             ) }),
+            enableControls && /* @__PURE__ */ jsx(ToggleReadonly, {}),
             enableControls && hasLayoutDrift && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
             enableControls && notReadOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),

package/dist/likec4diagram/ui/controls/ToggleReadonly.d.ts

@@ -0,0 +1 @@
+export declare const ToggleReadonly: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/likec4diagram/ui/controls/ToggleReadonly.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { IconLock, IconLockOpen2 } from "@tabler/icons-react";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
+import { Tooltip, ActionIcon } from "./_shared.js";
+const selector = (state) => ({
+  visible: state.features.enableReadOnly !== true,
+  isReadOnly: state.toggledFeatures.enableReadOnly ?? state.features.enableReadOnly
+});
+const ToggleReadonly = () => {
+  const { visible, isReadOnly } = useDiagramContext(selector);
+  const diagram = useDiagram();
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { label: isReadOnly ? "Enable editing" : "Disable editing", children: /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.toggleFeature("ReadOnly");
+      },
+      children: isReadOnly ? /* @__PURE__ */ jsx(IconLock, {}) : /* @__PURE__ */ jsx(IconLockOpen2, {})
+    }
+  ) });
+};
+export {
+  ToggleReadonly
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.22.0",
+  "version": "1.22.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -39,14 +39,13 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@likec4/core": "1.22.0",
+    "@likec4/core": "1.22.1",
     "@mantine/vanilla-extract": "7.16.3",
     "@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",
-    "@xstate/store": "^2.6.2",
     "@xyflow/react": "12.4.2",
     "@xyflow/system": "0.0.50",
     "bezier-js": "^6.1.4",
@@ -69,7 +68,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.22.0",
+    "@likec4/tsconfig": "1.22.1",
     "@mantine/core": "7.16.3",
     "@mantine/hooks": "7.16.3",
     "@statelyai/inspect": "^0.4.0",

package/src/context/DiagramFeatures.tsx

@@ -28,7 +28,7 @@ const FeatureNames = [
    */
   'Vscode',
 ] as const
-type FeatureName = typeof FeatureNames[number]
+export type FeatureName = typeof FeatureNames[number]
 export type EnabledFeatures = {
   [P in `enable${FeatureName}`]: boolean
 }

package/src/hooks/useDiagram.ts

@@ -1,6 +1,7 @@
 import type { EdgeId, Fqn, NodeId, ViewId } from '@likec4/core'
 import { useMemo, useTransition } from 'react'
 import type { PartialDeep } from 'type-fest'
+import type { FeatureName } from '../context/DiagramFeatures'
 import { useDiagramActor } from '../hooks/useDiagramActor'
 import type { OpenSourceParams } from '../LikeC4Diagram.props'
 import type { AlignmentMode } from '../likec4diagram/state/aligners'
@@ -125,5 +126,9 @@ export function useDiagram() {
     stopWalkthrough: () => {
       actor.send({ type: 'walkthrough.end' })
     },
+
+    toggleFeature: (feature: FeatureName, forceValue?: boolean) => {
+      actor.send({ type: 'toggle.feature', feature, ...(forceValue !== undefined && { forceValue }) })
+    },
   }), [actor])
 }

package/src/likec4diagram/DiagramActor.tsx

@@ -2,11 +2,12 @@ import type { ViewId } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { useStoreApi } from '@xyflow/react'
 import { type PropsWithChildren, useEffect } from 'react'
-import { useDiagramEventHandlers, useEnabledFeatures } from '../context'
+import { DiagramFeatures, useDiagramEventHandlers, useEnabledFeatures } from '../context'
 import { useDiagramActor } from '../hooks/useDiagramActor'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
 import { LikeC4ViewMachineContextProvider } from './state/actorContext'
 // import { useInspector } from './state/inspector'
+import { useDiagramContext } from '../hooks/useDiagramContext'
 import { type Input, diagramMachine } from './state/machine'
 import { syncManualLayoutActor } from './state/syncManualLayoutActor'
 import type { Types } from './types'
@@ -54,7 +55,9 @@ export function DiagramActor({ input, children }: PropsWithChildren<{ input: Act
         }}
       >
         <SyncStore input={input} />
-        {children}
+        <DiagramActorToggledFeatures>
+          {children}
+        </DiagramActorToggledFeatures>
       </LikeC4ViewMachineContextProvider>
     )
   )
@@ -77,3 +80,13 @@ const SyncStore = ({ input: { view, xyedges, xynodes, ...inputs } }: { input: Ac
 
   return null
 }
+
+function DiagramActorToggledFeatures({ children }: PropsWithChildren) {
+  const toggledFeatures = useDiagramContext(s => s.toggledFeatures)
+  return (
+    <DiagramFeatures
+      overrides={toggledFeatures}>
+      {children}
+    </DiagramFeatures>
+  )
+}

package/src/likec4diagram/XYFlow.tsx

@@ -24,6 +24,13 @@ const selectXYProps = (ctx: DiagramContext) => ({
   fitViewPadding: ctx.fitViewPadding,
   enableFitView: ctx.features.enableFitView,
   enableReadOnly: ctx.features.enableReadOnly,
+  ...(!ctx.features.enableFitView && {
+    viewport: {
+      x: -Math.min(ctx.view.bounds.x, 0),
+      y: -Math.min(ctx.view.bounds.y, 0),
+      zoom: 1,
+    },
+  }),
 })
 const equalsXYProps = (a: ReturnType<typeof selectXYProps>, b: ReturnType<typeof selectXYProps>): boolean =>
   a.initialized === b.initialized &&
@@ -33,7 +40,8 @@ const equalsXYProps = (a: ReturnType<typeof selectXYProps>, b: ReturnType<typeof
   a.enableFitView === b.enableFitView &&
   a.enableReadOnly === b.enableReadOnly &&
   shallowEqual(a.nodes, b.nodes) &&
-  shallowEqual(a.edges, b.edges)
+  shallowEqual(a.edges, b.edges) &&
+  shallowEqual(a.viewport, b.viewport)
 
 type Picked = EnforceOptional<
   Pick<

package/src/likec4diagram/state/machine.ts

@@ -41,7 +41,7 @@ import {
 } from 'xstate'
 import { MinZoom } from '../../base/const'
 import type { EnabledFeatures } from '../../context'
-import { AllDisabled } from '../../context/DiagramFeatures'
+import { type FeatureName, AllDisabled } from '../../context/DiagramFeatures'
 import type { OpenSourceParams } from '../../LikeC4Diagram.props'
 import { relationshipDetailsActor } from '../../overlays/relationship-details/actor'
 import { relationshipsBrowserActor } from '../../overlays/relationships-browser/actor'
@@ -86,8 +86,12 @@ export interface Input {
   fitViewPadding: number
 }
 
+type ToggledFeatures = Partial<EnabledFeatures>
+
 export interface DiagramContext extends Input {
   features: EnabledFeatures
+  // This is used to override features from props
+  toggledFeatures: ToggledFeatures
   initialized: boolean
   viewport: Viewport
   viewportChangedManually: boolean
@@ -165,6 +169,7 @@ export type Events =
   | { type: 'walkthrough.start'; stepId?: StepEdgeId }
   | { type: 'walkthrough.step'; direction: 'next' | 'previous' }
   | { type: 'walkthrough.end' }
+  | { type: 'toggle.feature'; feature: FeatureName; forceValue?: boolean }
 
 export type ActionArg = { context: DiagramContext; event: Events }
 
@@ -306,12 +311,24 @@ export const diagramMachine = setup({
         })
       })
     },
+
+    'updateFeatures': assign(({ event }) => {
+      assertEvent(event, 'update.features')
+      return {
+        features: {
+          ...event.features,
+        },
+      }
+    }),
   },
 }).createMachine({
   initial: 'initializing',
   context: ({ input, self, spawn }) => ({
     ...input,
     features: { ...AllDisabled },
+    toggledFeatures: {
+      enableReadOnly: true,
+    },
     initialized: false,
     viewportChangedManually: false,
     lastOnNavigate: null,
@@ -863,9 +880,7 @@ export const diagramMachine = setup({
       actions: assign(({ event }) => ({ ...event.inputs })),
     },
     'update.features': {
-      actions: assign({
-        features: ({ event }) => event.features,
-      }),
+      actions: 'updateFeatures',
     },
     'update.nodeData': {
       actions: assign(updateNodeData),
@@ -921,6 +936,15 @@ export const diagramMachine = setup({
       guard: 'is dynamic view',
       target: '.walkthrough',
     },
+    'toggle.feature': {
+      actions: assign({
+        toggledFeatures: ({ context, event }) => ({
+          ...context.toggledFeatures,
+          [`enable${event.feature}`]: event.forceValue ??
+            !(context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`]),
+        }),
+      }),
+    },
   },
   exit: [
     stopChild('layout'),