@likec4/diagram 1.22.0 → 1.22.1

package/dist/context/DiagramFeatures.d.ts

@@ -1,7 +1,7 @@
 import { ExclusiveUnion, NonEmptyArray } from '@likec4/core';
 import { PropsWithChildren } from 'react';
 declare const FeatureNames: readonly ["Controls", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "EdgeEditing", "ViewTitle", "FitView", "LikeC4Model", "Vscode"];
-type FeatureName = typeof FeatureNames[number];
+export type FeatureName = typeof FeatureNames[number];
 export type EnabledFeatures = {
     [P in `enable${FeatureName}`]: boolean;
 };

package/dist/hooks/useDiagram.d.ts

@@ -1,5 +1,6 @@
 import { EdgeId, Fqn, NodeId, ViewId, DiagramView, ViewChange, RelationId, Color, RelationshipLineType, NonEmptyArray, Point, RelationshipArrowType, BBox, XYPoint, DiagramNode, DiagramEdge } from '@likec4/core';
 import { PartialDeep } from 'type-fest';
+import { FeatureName } from '../context/DiagramFeatures';
 import { OpenSourceParams } from '../LikeC4Diagram.props';
 import { AlignmentMode } from '../likec4diagram/state/aligners';
 import { DiagramContext, Events, Input, ActionArg } from '../likec4diagram/state/machine';
@@ -14,7 +15,6 @@ import { ReactNode, CSSProperties } from 'react';
 import { Input, XYStoreApi, Events } from '../overlays/relationships-browser/actor';
 import { LayoutRelationshipsViewResult } from '../overlays/relationships-browser/-useRelationshipsView';
 import { focusedBounds } from '../likec4diagram/state/utils';
-import { EnabledFeatures } from '../context';
 export declare function useDiagram(): {
     send: (event: Events) => void;
     navigateTo: (viewId: ViewId, fromNode?: NodeId) => void;
@@ -1028,6 +1028,9 @@ export declare function useDiagram(): {
                 enableLikeC4Model: boolean;
                 enableVscode: boolean;
             };
+            toggledFeatures: {
+                enableReadOnly: true;
+            };
             initialized: false;
             viewportChangedManually: false;
             lastOnNavigate: null;
@@ -1787,6 +1790,10 @@ export declare function useDiagram(): {
                                     toPosition: XYPoint;
                                 };
                             };
+                            updateFeatures: {
+                                type: "updateFeatures";
+                                params: NonReducibleUnknown;
+                            };
                         }>, Values<{
                             "enabled: FitView": {
                                 type: "enabled: FitView";
@@ -4487,6 +4494,10 @@ export declare function useDiagram(): {
                             toPosition: XYPoint;
                         };
                     };
+                    updateFeatures: {
+                        type: "updateFeatures";
+                        params: NonReducibleUnknown;
+                    };
                 }>, Values<{
                     "enabled: FitView": {
                         type: "enabled: FitView";
@@ -5731,6 +5742,10 @@ export declare function useDiagram(): {
                                     toPosition: XYPoint;
                                 };
                             };
+                            updateFeatures: {
+                                type: "updateFeatures";
+                                params: NonReducibleUnknown;
+                            };
                         }>, Values<{
                             "enabled: FitView": {
                                 type: "enabled: FitView";
@@ -6036,6 +6051,10 @@ export declare function useDiagram(): {
                                             toPosition: XYPoint;
                                         };
                                     };
+                                    updateFeatures: {
+                                        type: "updateFeatures";
+                                        params: NonReducibleUnknown;
+                                    };
                                 }>, Values<{
                                     "enabled: FitView": {
                                         type: "enabled: FitView";
@@ -7202,6 +7221,10 @@ export declare function useDiagram(): {
                                     toPosition: XYPoint;
                                 };
                             };
+                            updateFeatures: {
+                                type: "updateFeatures";
+                                params: NonReducibleUnknown;
+                            };
                         }>, Values<{
                             "enabled: FitView": {
                                 type: "enabled: FitView";
@@ -7515,6 +7538,10 @@ export declare function useDiagram(): {
                             toPosition: XYPoint;
                         };
                     };
+                    updateFeatures: {
+                        type: "updateFeatures";
+                        params: NonReducibleUnknown;
+                    };
                 }>, Values<{
                     "enabled: FitView": {
                         type: "enabled: FitView";
@@ -9341,6 +9368,10 @@ export declare function useDiagram(): {
                             toPosition: XYPoint;
                         };
                     };
+                    updateFeatures: {
+                        type: "updateFeatures";
+                        params: NonReducibleUnknown;
+                    };
                 }>, Values<{
                     "enabled: FitView": {
                         type: "enabled: FitView";
@@ -9596,10 +9627,10 @@ export declare function useDiagram(): {
                 }>, 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>;
@@ -9810,7 +9841,7 @@ export declare function useDiagram(): {
                     };
                 }>, never, never, never, never>;
             };
-            readonly 'update.nodeData': {
+            readonly 'update.edgeData': {
                 readonly actions: ActionFunction<DiagramContext, Events, Events, undefined, Values<{
                     hotkeyActor: {
                         src: "hotkeyActor";
@@ -10022,8 +10053,27 @@ export declare function useDiagram(): {
                     };
                 }>, 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>;
@@ -10232,29 +10282,26 @@ export declare function useDiagram(): {
                         }, "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>;
@@ -10463,25 +10510,37 @@ export declare function useDiagram(): {
                         }, "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";
@@ -10692,30 +10751,6 @@ export declare function useDiagram(): {
                         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<{
@@ -10944,4 +10979,5 @@ export declare function useDiagram(): {
     startWalkthrough: () => void;
     walkthroughStep: (direction?: "next" | "previous") => void;
     stopWalkthrough: () => void;
+    toggleFeature: (feature: FeatureName, forceValue?: boolean) => void;
 };

package/dist/hooks/useDiagram.js

@@ -111,6 +111,9 @@ function useDiagram() {
     },
     stopWalkthrough: () => {
       actor.send({ type: "walkthrough.end" });
+    },
+    toggleFeature: (feature, forceValue) => {
+      actor.send({ type: "toggle.feature", feature, ...forceValue !== void 0 && { forceValue } });
     }
   }), [actor]);
 }

package/dist/likec4diagram/DiagramActor.js

@@ -5,10 +5,11 @@ import { useEffect } from "react";
 import { useDiagramActor } from "../hooks/useDiagramActor.js";
 import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
 import { LikeC4ViewMachineContextProvider } from "./state/actorContext.js";
+import { useDiagramContext } from "../hooks/useDiagramContext.js";
 import { diagramMachine } from "./state/machine.js";
 import { syncManualLayoutActor } from "./state/syncManualLayoutActor.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
-import { useEnabledFeatures } from "../context/DiagramFeatures.js";
+import { useEnabledFeatures, DiagramFeatures } from "../context/DiagramFeatures.js";
 function DiagramActor({ input, children }) {
   const { onNavigateTo, onOpenSource, onChange } = useDiagramEventHandlers();
   const xystore = useStoreApi();
@@ -47,7 +48,7 @@ function DiagramActor({ input, children }) {
       },
       children: [
         /* @__PURE__ */ jsx(SyncStore, { input }),
-        children
+        /* @__PURE__ */ jsx(DiagramActorToggledFeatures, { children })
       ]
     }
   );
@@ -66,6 +67,16 @@ const SyncStore = ({ input: { view, xyedges, xynodes, ...inputs } }) => {
   }, [send, view, xyedges, xynodes]);
   return null;
 };
+function DiagramActorToggledFeatures({ children }) {
+  const toggledFeatures = useDiagramContext((s) => s.toggledFeatures);
+  return /* @__PURE__ */ jsx(
+    DiagramFeatures,
+    {
+      overrides: toggledFeatures,
+      children
+    }
+  );
+}
 export {
   DiagramActor
 };

package/dist/likec4diagram/XYFlow.js

@@ -20,9 +20,16 @@ const selectXYProps = (ctx) => ({
   zoomable: ctx.zoomable,
   fitViewPadding: ctx.fitViewPadding,
   enableFitView: ctx.features.enableFitView,
-  enableReadOnly: ctx.features.enableReadOnly
+  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, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
+const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport, b.viewport);
 const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable }) => {
   const diagram = useDiagram();
   const {