@likec4/diagram 1.21.1 → 1.22.0

package/dist/LikeC4Diagram.js

@@ -4,7 +4,6 @@ import { useRef } from "react";
 import { isEmpty } from "remeda";
 import { LikeC4CustomColors } from "./LikeC4CustomColors.js";
 import { DiagramActor } from "./likec4diagram/DiagramActor.js";
-import { DiagramUI } from "./likec4diagram/DiagramUI.js";
 import { useViewToNodesEdges } from "./likec4diagram/useViewToNodesEdges.js";
 import { LikeC4DiagramXYFlow } from "./likec4diagram/XYFlow.js";
 import { useLikeC4Model } from "./likec4model/useLikeC4Model.js";
@@ -113,7 +112,7 @@ function LikeC4Diagram({
               {
                 fitView,
                 ...initialRef.current,
-                children: /* @__PURE__ */ jsxs(
+                children: /* @__PURE__ */ jsx(
                   DiagramActor,
                   {
                     input: {
@@ -123,17 +122,14 @@ function LikeC4Diagram({
                       fitViewPadding,
                       ...xyNodesEdges
                     },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        LikeC4DiagramXYFlow,
-                        {
-                          nodesDraggable,
-                          nodesSelectable,
-                          background
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(DiagramUI, {})
-                    ]
+                    children: /* @__PURE__ */ jsx(
+                      LikeC4DiagramXYFlow,
+                      {
+                        nodesDraggable,
+                        nodesSelectable,
+                        background
+                      }
+                    )
                   }
                 )
               }

package/dist/base/index.d.ts

@@ -1,3 +1,2 @@
 export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow';
 export { Base, type EdgeProps, type NodeProps, type NonOptional, type ReactFlowEdge, type ReactFlowNode, } from './types';
-export { Link } from './Link';

package/dist/base/primitives/element/styles.css.js

@@ -1,6 +1,6 @@
 /* empty css                                        */
 /* empty css                          */
-var iconSize = "var(--v7x5jk2)";
+var iconSize = "var(--likec4-icon-size)";
 export {
   iconSize
 };

package/dist/{base → components}/Link.css.js

@@ -1,7 +1,7 @@
 /* empty css                        */
-var elementLink = "_180738q0";
-var linkIcon = "_180738q1";
-var linkTitleBox = "_180738q2";
+var elementLink = "_1acgss10";
+var linkIcon = "_1acgss11";
+var linkTitleBox = "_1acgss12";
 export {
   elementLink,
   linkIcon,

package/dist/components/SearchControl.css.d.ts

@@ -0,0 +1,2 @@
+export declare const root: string;
+export declare const shortcut: string;

package/dist/components/SearchControl.css.js

@@ -0,0 +1,7 @@
+/* empty css                                 */
+var root = "xmhqho2";
+var shortcut = "xmhqho3";
+export {
+  root,
+  shortcut
+};

package/dist/components/SearchControl.d.ts

@@ -0,0 +1,5 @@
+import { ElementProps, UnstyledButtonProps } from '@mantine/core';
+interface SearchControlProps extends UnstyledButtonProps, ElementProps<'button'> {
+}
+export declare function SearchControl({ className, ...others }: SearchControlProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SearchControl.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { UnstyledButton, Group, rem, Text } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import { isMacOs } from "@xyflow/system";
+import clsx from "clsx";
+import { shortcut, root } from "./SearchControl.css.js";
+function SearchControl({ className, ...others }) {
+  const isMac = isMacOs();
+  return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: clsx(root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(IconSearch, { style: { width: rem(15), height: rem(15) }, stroke: 2 }),
+    /* @__PURE__ */ jsx(Text, { fz: "sm", fw: "500", pr: 50, children: "Search" }),
+    /* @__PURE__ */ jsx(Text, { fw: 700, className: shortcut, children: isMac ? "⌘ + K" : "Ctrl + K" })
+  ] }) });
+}
+export {
+  SearchControl
+};

package/dist/context/IconRenderer.d.ts

@@ -1,3 +1,4 @@
+import { ElementShape } from '@likec4/core';
 import { ElementIconRenderer } from '../LikeC4Diagram.props';
 import { Provider } from 'react';
 export declare const IconRendererProvider: Provider<ElementIconRenderer | null>;
@@ -9,3 +10,12 @@ export declare function IconRenderer({ element, className, }: {
     };
     className: string;
 }): import("react/jsx-runtime").JSX.Element | null;
+export declare function IconOrShapeRenderer({ element, className, }: {
+    element: {
+        id: string;
+        title: string;
+        shape: ElementShape;
+        icon?: string | null | undefined;
+    };
+    className: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/context/IconRenderer.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { IconCylinder, IconRectangularPrism, IconReorder, IconUser, IconDeviceMobile, IconBrowser } from "@tabler/icons-react";
 import clsx from "clsx";
 import { createContext, useContext } from "react";
 const IconRendererContext = createContext(null);
@@ -32,7 +33,40 @@ function IconRenderer({
     }
   );
 }
+const ShapeIcons = {
+  browser: IconBrowser,
+  cylinder: IconCylinder,
+  mobile: IconDeviceMobile,
+  person: IconUser,
+  queue: IconReorder,
+  rectangle: IconRectangularPrism,
+  storage: IconCylinder
+};
+function IconOrShapeRenderer({
+  element,
+  className
+}) {
+  const icon = IconRenderer({
+    element,
+    className
+  });
+  if (icon) {
+    return icon;
+  }
+  const ShapeIcon = ShapeIcons[element.shape];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        className,
+        "likec4-shape-icon"
+      ),
+      children: /* @__PURE__ */ jsx(ShapeIcon, {})
+    }
+  );
+}
 export {
+  IconOrShapeRenderer,
   IconRenderer,
   IconRendererProvider
 };

package/dist/hooks/useCurrentViewId.js

@@ -0,0 +1,8 @@
+import { useDiagramContext } from "./useDiagramContext.js";
+const selectViewId = (state) => state.view.id;
+function useCurrentViewId() {
+  return useDiagramContext(selectViewId);
+}
+export {
+  useCurrentViewId
+};

package/dist/hooks/useDiagram.d.ts

@@ -7556,9 +7556,9 @@ export declare function useDiagram(): {
             };
         };
         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: {
@@ -7771,9 +7771,9 @@ export declare function useDiagram(): {
                     };
                 }>, 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: {

package/dist/likec4diagram/DiagramUI.js

@@ -1,5 +1,4 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { LikeC4Search } from "../LikeC4Search.js";
 import { Overlays } from "../overlays/Overlays.js";
 import { Controls } from "./ui/controls/Controls.js";
 import { IfEnabled } from "../context/DiagramFeatures.js";
@@ -10,7 +9,6 @@ function DiagramUI() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Controls, {}),
     /* @__PURE__ */ jsx(Overlays, {}),
-    /* @__PURE__ */ jsx(IfEnabled, { feature: "Search", children: /* @__PURE__ */ jsx(LikeC4Search, {}) }),
     /* @__PURE__ */ jsx(IfEnabled, { feature: "ViewTitle", children: /* @__PURE__ */ jsx(DiagramTitlePanel, {}) }),
     /* @__PURE__ */ jsx(IfEnabled, { feature: "Notations", children: /* @__PURE__ */ jsx(NotationPanel, {}) }),
     /* @__PURE__ */ jsx(IfEnabled, { feature: "DynamicViewWalkthrough", children: /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}) })

package/dist/likec4diagram/XYFlow.d.ts

@@ -1,6 +1,11 @@
 import { EnforceOptional } from 'type-fest/source/enforce-optional';
 import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
+import { NamedExoticComponent } from 'react';
 type Picked = EnforceOptional<Pick<LikeC4DiagramProperties, 'background' | 'nodesDraggable' | 'nodesSelectable'>>;
 export type LikeC4DiagramXYFlowProps = Required<Picked>;
-export declare const LikeC4DiagramXYFlow: ({ background, ...rest }: LikeC4DiagramXYFlowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LikeC4DiagramXYFlow: NamedExoticComponent<Required<{
+    background?: "solid" | "transparent" | "dots" | "lines" | "cross";
+    nodesDraggable?: boolean;
+    nodesSelectable?: boolean;
+}>>;
 export {};

package/dist/likec4diagram/XYFlow.js

@@ -3,10 +3,12 @@ import { nonNullable } from "@likec4/core";
 import { useCallbackRef } from "@mantine/hooks";
 import clsx from "clsx";
 import { shallowEqual } from "fast-equals";
+import { memo } from "react";
 import { BaseXYFlow } from "../base/BaseXYFlow.js";
 import { useDiagram } from "../hooks/useDiagram.js";
 import { useDiagramContext } from "../hooks/useDiagramContext.js";
 import { edgeTypes } from "./custom/index.js";
+import { DiagramUI } from "./DiagramUI.js";
 import { useLayoutConstraints } from "./useLayoutConstraints.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
 import { nodeTypes } from "./custom/nodes/nodeTypes.js";
@@ -21,7 +23,7 @@ const selectXYProps = (ctx) => ({
   enableReadOnly: ctx.features.enableReadOnly
 });
 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 LikeC4DiagramXYFlow = ({ background, ...rest }) => {
+const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable }) => {
   const diagram = useDiagram();
   const {
     initialized,
@@ -54,10 +56,10 @@ const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
       nodeTypes,
       edgeTypes,
       onNodesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyNodeChages", changes });
+        diagram.send({ type: "xyflow.applyNodeChanges", changes });
       }),
       onEdgesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyEdgeChages", changes });
+        diagram.send({ type: "xyflow.applyEdgeChanges", changes });
       }),
       background: initialized ? background : "transparent",
       fitView: false,
@@ -78,6 +80,7 @@ const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
       }),
       onDoubleClick: useCallbackRef((e) => {
         e.stopPropagation();
+        e.preventDefault();
         diagram.send({ type: "xyflow.paneDblClick" });
         onCanvasDblClick == null ? void 0 : onCanvasDblClick(e);
       }),
@@ -87,38 +90,34 @@ const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
       onInit: useCallbackRef((instance) => {
         diagram.send({ type: "xyflow.init", instance });
       }),
-      ...onNodeContextMenu && {
-        onNodeContextMenu: useCallbackRef((event, node) => {
-          const diagramNode = nonNullable(
-            diagram.findDiagramNode(node.id),
-            `diagramNode ${node.id} not found`
-          );
-          onNodeContextMenu(diagramNode, event);
-        })
-      },
-      ...onEdgeContextMenu && {
-        onEdgeContextMenu: useCallbackRef((event, edge) => {
-          const diagramEdge = nonNullable(
-            diagram.findDiagramEdge(edge.id),
-            `diagramEdge ${edge.id} not found`
-          );
-          onEdgeContextMenu(diagramEdge, event);
-        })
-      },
-      ...onCanvasContextMenu && {
-        onPaneContextMenu: useCallbackRef((event) => {
-          onCanvasContextMenu(event);
-        })
-      },
+      onNodeContextMenu: useCallbackRef((event, node) => {
+        const diagramNode = nonNullable(
+          diagram.findDiagramNode(node.id),
+          `diagramNode ${node.id} not found`
+        );
+        onNodeContextMenu == null ? void 0 : onNodeContextMenu(diagramNode, event);
+      }),
+      onEdgeContextMenu: useCallbackRef((event, edge) => {
+        const diagramEdge = nonNullable(
+          diagram.findDiagramEdge(edge.id),
+          `diagramEdge ${edge.id} not found`
+        );
+        onEdgeContextMenu == null ? void 0 : onEdgeContextMenu(diagramEdge, event);
+      }),
+      onPaneContextMenu: useCallbackRef((event) => {
+        onCanvasContextMenu == null ? void 0 : onCanvasContextMenu(event);
+      }),
       ...enableFitView && {
         onViewportResize
       },
-      ...notReadOnly && rest.nodesDraggable && layoutConstraints,
+      nodesDraggable,
+      nodesSelectable,
+      ...notReadOnly && nodesDraggable && layoutConstraints,
       ...props,
-      ...rest
+      children: /* @__PURE__ */ jsx(DiagramUI, {})
     }
   );
-};
+}, shallowEqual);
 export {
   LikeC4DiagramXYFlow
 };

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js

@@ -5,7 +5,7 @@ import { IconInfoCircle, IconArrowRight, IconZoomScan, IconFileSymlink } from "@
 import clsx from "clsx";
 import { useCallback, Fragment as Fragment$1, forwardRef } from "react";
 import { pipe, map, filter, isTruthy, partition } from "remeda";
-import { Link } from "../../../base/Link.js";
+import { Link } from "../../../components/Link.js";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
 import { DiagramContext } from "../../state/machine.js";
@@ -89,6 +89,7 @@ function RelationshipsDropdownMenu({
       closeOnClickOutside: true,
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
       closeOnEscape: true,
+      keepMounted: false,
       closeOnItemClick: false,
       disabled,
       position: "bottom-start",

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

@@ -9055,9 +9055,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
             };
         };
         readonly on: {
-            readonly 'xyflow.applyNodeChages': {
+            readonly 'xyflow.applyNodeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
-                    type: "xyflow.applyNodeChages";
+                    type: "xyflow.applyNodeChanges";
                     changes: NodeChange<import("../types").Types.Node>[];
                 }, Events, undefined, Values<{
                     hotkeyActor: {
@@ -9307,9 +9307,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
                     };
                 }>, never, never, never, never>;
             };
-            readonly 'xyflow.applyEdgeChages': {
+            readonly 'xyflow.applyEdgeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
-                    type: "xyflow.applyEdgeChages";
+                    type: "xyflow.applyEdgeChanges";
                     changes: EdgeChange<{
                         id: string;
                         source: string;
@@ -22116,9 +22116,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
             };
         };
         readonly on: {
-            readonly 'xyflow.applyNodeChages': {
+            readonly 'xyflow.applyNodeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
-                    type: "xyflow.applyNodeChages";
+                    type: "xyflow.applyNodeChanges";
                     changes: NodeChange<import("../types").Types.Node>[];
                 }, Events, undefined, Values<{
                     hotkeyActor: {
@@ -22368,9 +22368,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
                     };
                 }>, never, never, never, never>;
             };
-            readonly 'xyflow.applyEdgeChages': {
+            readonly 'xyflow.applyEdgeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
-                    type: "xyflow.applyEdgeChages";
+                    type: "xyflow.applyEdgeChanges";
                     changes: EdgeChange<{
                         id: string;
                         source: string;
@@ -34842,9 +34842,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
         };
     };
     readonly on: {
-        readonly 'xyflow.applyNodeChages': {
+        readonly 'xyflow.applyNodeChanges': {
             readonly actions: ActionFunction<DiagramContext, {
-                type: "xyflow.applyNodeChages";
+                type: "xyflow.applyNodeChanges";
                 changes: NodeChange<import("../types").Types.Node>[];
             }, Events, undefined, Values<{
                 hotkeyActor: {
@@ -35094,9 +35094,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
                 };
             }>, never, never, never, never>;
         };
-        readonly 'xyflow.applyEdgeChages': {
+        readonly 'xyflow.applyEdgeChanges': {
             readonly actions: ActionFunction<DiagramContext, {
-                type: "xyflow.applyEdgeChages";
+                type: "xyflow.applyEdgeChanges";
                 changes: EdgeChange<{
                     id: string;
                     source: string;
@@ -47901,9 +47901,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
         };
     };
     readonly on: {
-        readonly 'xyflow.applyNodeChages': {
+        readonly 'xyflow.applyNodeChanges': {
             readonly actions: ActionFunction<DiagramContext, {
-                type: "xyflow.applyNodeChages";
+                type: "xyflow.applyNodeChanges";
                 changes: NodeChange<import("../types").Types.Node>[];
             }, Events, undefined, Values<{
                 hotkeyActor: {
@@ -48153,9 +48153,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
                 };
             }>, never, never, never, never>;
         };
-        readonly 'xyflow.applyEdgeChages': {
+        readonly 'xyflow.applyEdgeChanges': {
             readonly actions: ActionFunction<DiagramContext, {
-                type: "xyflow.applyEdgeChages";
+                type: "xyflow.applyEdgeChanges";
                 changes: EdgeChange<{
                     id: string;
                     source: string;

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,4 +1,4 @@
-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';
@@ -70,10 +70,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';
@@ -7600,9 +7600,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 +7815,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: {

package/dist/likec4diagram/state/machine.js

@@ -472,7 +472,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 +495,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 +603,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 +674,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({