@likec4/diagram 1.21.1 → 1.22.1

package/dist/likec4diagram/state/assign.js

@@ -277,7 +277,7 @@ function resetEdgeControlPoints({ context }) {
     if (!sourceCenter || !targetCenter) {
       return [];
     }
-    if (source == target) {
+    if (source === target) {
       const loopSize = 80;
       const centerOfTopBoundary = new VectorImpl(0, source.height || 0).mul(-0.5).add(sourceCenter);
       return [

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

@@ -1,8 +1,9 @@
-import { BBox, DiagramView, EdgeId, Fqn, NodeId, RelationId, StepEdgeId, ViewChange, ViewId, XYPoint, DiagramNode, Color, RelationshipLineType, NonEmptyArray } from '@likec4/core';
+import { BBox, DiagramView, EdgeId, Fqn, NodeId, StepEdgeId, ViewChange, ViewId, XYPoint, DiagramNode, RelationId, Color, RelationshipLineType, NonEmptyArray } from '@likec4/core';
 import { ReactFlowInstance, useStoreApi, GeneralHelpers, ViewportHelperFunctions } from '@xyflow/react';
 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;
@@ -70,10 +73,10 @@ export type Events = HotKeyEvent | {
     type: 'xyflow.init';
     instance: ReactFlowInstance<Types.Node, Types.Edge>;
 } | {
-    type: 'xyflow.applyNodeChages';
+    type: 'xyflow.applyNodeChanges';
     changes: NodeChange<Types.Node>[];
 } | {
-    type: 'xyflow.applyEdgeChages';
+    type: 'xyflow.applyEdgeChanges';
     changes: EdgeChange<Types.Edge>[];
 } | {
     type: 'xyflow.viewportMoved';
@@ -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";
@@ -7600,9 +7638,9 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
         };
     };
     readonly on: {
-        readonly 'xyflow.applyNodeChages': {
+        readonly 'xyflow.applyNodeChanges': {
             readonly actions: ActionFunction<DiagramContext, {
-                type: "xyflow.applyNodeChages";
+                type: "xyflow.applyNodeChanges";
                 changes: NodeChange<Types.Node>[];
             }, Events, undefined, Values<{
                 hotkeyActor: {
@@ -7815,9 +7853,9 @@ export declare const diagramMachine: StateMachine<DiagramContext, Events, {
                 };
             }>, never, never, never, never>;
         };
-        readonly 'xyflow.applyEdgeChages': {
+        readonly 'xyflow.applyEdgeChanges': {
             readonly actions: ActionFunction<DiagramContext, {
-                type: "xyflow.applyEdgeChages";
+                type: "xyflow.applyEdgeChanges";
                 changes: EdgeChange<Types.Edge>[];
             }, Events, undefined, Values<{
                 hotkeyActor: {
@@ -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,
@@ -472,7 +483,7 @@ const diagramMachine = setup({
         pending: {
           entry: enqueueActions(({ enqueue }) => {
             enqueue.sendTo((c) => c.context.syncLayoutActorRef, { type: "stop" });
-            enqueue.stopChild("layout");
+            enqueue.stopChild("syncLayout");
             enqueue({
               type: "trigger:NavigateTo",
               params: ({ context }) => ({
@@ -495,15 +506,16 @@ const diagramMachine = setup({
                       }
                     }
                   });
+                  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.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 75 });
               }),
               target: "done"
             }
@@ -602,12 +614,12 @@ const diagramMachine = setup({
     }
   },
   on: {
-    "xyflow.applyNodeChages": {
+    "xyflow.applyNodeChanges": {
       actions: assign({
         xynodes: ({ context, event }) => applyNodeChanges(event.changes, context.xynodes)
       })
     },
-    "xyflow.applyEdgeChages": {
+    "xyflow.applyEdgeChanges": {
       actions: assign({
         xyedges: ({ context, event }) => applyEdgeChanges(event.changes, context.xyedges)
       })
@@ -673,17 +685,19 @@ const diagramMachine = setup({
                   }
                 }
               });
+              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 });
             }
           } else {
             enqueue.sendTo((c) => c.context.syncLayoutActorRef, { type: "synced" });
-          }
-          if (isAnotherView || !context.viewportChangedManually) {
-            enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 90 });
+            if (!context.viewportChangedManually) {
+              enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 50 });
+            }
           }
           enqueue.assign(mergeXYNodesEdges);
           enqueue.assign({
@@ -696,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)
@@ -755,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: {