@likec4/diagram 1.21.0 → 1.22.0

package/src/base/primitives/element/ElementTitle.css.ts

@@ -37,10 +37,7 @@ export const description = style({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   selectors: {
-    [`:where(${hasIcon}) &`]: {
-      textWrap: 'wrap',
-    },
-    [`:where([data-likec4-shape-size="xs"], [data-likec4-shape-size="sm"]) &`]: {
+    [`:where([data-likec4-shape-size="xs"]) &`]: {
       display: 'none',
     },
   },
@@ -71,17 +68,22 @@ export const technology = style({
 export const elementDataContainer = style({
   flex: '1',
   height: 'fit-content',
+  width: 'fit-content',
+  margin: '0 auto',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   flexDirection: 'row',
-  padding: paddingSize,
+  paddingTop: paddingSize,
+  paddingBottom: paddingSize,
+  paddingLeft: calc(paddingSize).add('8px').toString(),
+  paddingRight: calc(paddingSize).add('8px').toString(),
   overflow: 'hidden',
   gap: rem(12),
   selectors: {
     ':where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) &': {
-      paddingLeft: 40,
-      paddingRight: 20,
+      paddingLeft: 46,
+      paddingRight: 16,
     },
     ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
       paddingTop: 30,
@@ -98,7 +100,8 @@ globalStyle(`:where([data-likec4-shape-size="lg"], [data-likec4-shape-size="xl"]
 
 export const elementTextData = style({
   height: 'fit-content',
-  width: 'max-content',
+  width: 'fit-content',
+  flex: '0 1 auto',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'stretch',
@@ -114,7 +117,7 @@ export const elementTextData = style({
       gap: rem(6),
     },
     [`:where(${hasIcon}) &`]: {
-      minWidth: `calc(100% - ${iconSize} - ${calc(paddingSize).multiply(2).toString()})`,
+      minWidth: `calc(50% + ${iconSize})`,
       alignItems: 'flex-start',
       'vars': {
         [textAlign]: 'left',

package/src/base/primitives/element/ElementTitle.tsx

@@ -6,6 +6,7 @@ import { isNumber, isTruthy } from 'remeda'
 import { IconRenderer } from '../../../context/IconRenderer'
 import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import type { NodeProps } from '../../types'
+import { nodeSizes } from './ElementNodeContainer'
 import * as css from './ElementTitle.css'
 import { iconSize as varIconSize } from './styles.css'
 
@@ -35,6 +36,9 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
     },
     className: css.elementIcon,
   })
+  const size = nodeSizes(data.style).size
+  const isSm = size === 'sm'
+  const isSmOrXs = isSm || size === 'xs'
   return (
     <Box
       className={clsx(
@@ -53,7 +57,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
         <Text
           component="h3"
           className={clsx(css.title, 'likec4-element-title')}
-          lineClamp={3}>
+          lineClamp={isSmOrXs ? 2 : 3}>
           {data.title}
         </Text>
 
@@ -69,7 +73,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
           <Text
             component="div"
             className={clsx(css.description, 'likec4-element-description')}
-            lineClamp={5}>
+            lineClamp={isSmOrXs ? 3 : 5}>
             {data.description}
           </Text>
         )}

package/src/base/primitives/element/styles.css.ts

@@ -1,11 +1,11 @@
 import { defaultTheme } from '@likec4/core'
 import { rem } from '@mantine/core'
-import { createVar, globalStyle } from '@vanilla-extract/css'
+import { createGlobalVar, createVar, globalStyle } from '@vanilla-extract/css'
 import { container } from './ElementNodeContainer.css'
 
 export const textSize = createVar('text-size')
 export const paddingSize = createVar('padding-size')
-export const iconSize = createVar('icon-size')
+export const iconSize = createGlobalVar('likec4-icon-size')
 
 globalStyle(`${container}`, {
   vars: {
@@ -25,50 +25,28 @@ globalStyle(`${container}[data-likec4-shape-size="sm"]`, {
     [iconSize]: '36px',
   },
 })
-globalStyle(`${container}[data-likec4-shape-size="lg"], ${container}[data-likec4-shape-size="xl"]`, {
+globalStyle(`${container}[data-likec4-shape-size="lg"]`, {
   vars: {
     [iconSize]: '82px',
   },
 })
-
-globalStyle(`${container}[data-likec4-text-size="xs"]`, {
-  vars: {
-    [textSize]: rem(defaultTheme.textSizes.xs),
-  },
-})
-globalStyle(`${container}[data-likec4-text-size="sm"]`, {
+globalStyle(`${container}[data-likec4-shape-size="xl"]`, {
   vars: {
-    [textSize]: rem(defaultTheme.textSizes.sm),
-  },
-})
-globalStyle(`${container}[data-likec4-text-size="lg"]`, {
-  vars: {
-    [textSize]: rem(defaultTheme.textSizes.lg),
-  },
-})
-globalStyle(`${container}[data-likec4-text-size="xl"]`, {
-  vars: {
-    [textSize]: rem(defaultTheme.textSizes.xl),
+    [iconSize]: '90px',
   },
 })
 
-globalStyle(`${container}[data-likec4-padding="xs"]`, {
-  vars: {
-    [paddingSize]: rem(defaultTheme.spacing.xs),
-  },
-})
-globalStyle(`${container}[data-likec4-padding="sm"]`, {
-  vars: {
-    [paddingSize]: rem(defaultTheme.spacing.sm),
-  },
-})
-globalStyle(`${container}[data-likec4-padding="lg"]`, {
-  vars: {
-    [paddingSize]: rem(defaultTheme.spacing.lg),
-  },
-})
-globalStyle(`${container}[data-likec4-padding="xl"]`, {
-  vars: {
-    [paddingSize]: rem(defaultTheme.spacing.xl),
-  },
+const sizes = ['xs', 'sm', 'lg', 'xl'] as const
+sizes.forEach((size) => {
+  globalStyle(`${container}[data-likec4-text-size="${size}"]`, {
+    vars: {
+      [textSize]: rem(defaultTheme.textSizes[size]),
+    },
+  })
+
+  globalStyle(`${container}[data-likec4-padding="${size}"]`, {
+    vars: {
+      [paddingSize]: rem(defaultTheme.spacing[size]),
+    },
+  })
 })

package/src/{base → components}/Link.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 import { mantine } from '../theme-vars'
-import { easings, whereDark } from '../theme-vars.css'
+import { easings, transitions, whereDark } from '../theme-vars.css'
 
 export const elementLink = style({
   display: 'flex',
@@ -8,7 +8,7 @@ export const elementLink = style({
   alignItems: 'center',
   gap: 3,
   justifyContent: 'stretch',
-  // transition: transitions.fast,
+  transition: transitions.fast,
   border: `1px dashed ${mantine.colors.defaultBorder}`,
   borderRadius: mantine.radius.sm,
   minHeight: 30,
@@ -38,7 +38,7 @@ export const linkIcon = style({
 
 export const linkTitleBox = style({
   flex: '1 1 100%',
-  transition: `transform 130ms ${easings.inOut}`,
+  transition: `transform 100ms ${easings.inOut}`,
   selectors: {
     [`${elementLink}:hover &`]: {
       transitionTimingFunction: easings.out,

package/src/components/SearchControl.css.ts

@@ -0,0 +1,69 @@
+import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine, transitions, vars, whereDark, whereLight } from '../theme-vars'
+
+const transparent = createVar('transparent')
+const bgColor = createVar('bgcolor')
+export const root = style({
+  height: '32px',
+  paddingLeft: mantine.spacing.sm,
+  paddingRight: '4px',
+  borderRadius: mantine.radius.sm,
+  color: mantine.colors.placeholder,
+  boxShadow: mantine.shadows.xs,
+  border: '1px solid',
+  cursor: 'pointer',
+  transition: transitions.fast,
+  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  backgroundColor: `color-mix(in srgb, ${bgColor}, transparent ${transparent})`,
+  vars: {
+    [transparent]: '20%',
+    [bgColor]: mantine.colors.default,
+  },
+  selectors: {
+    [`${whereLight} &`]: {
+      borderColor: mantine.colors.gray[4],
+      vars: {
+        [bgColor]: mantine.colors.white,
+      },
+    },
+    [`${whereDark} &`]: {
+      borderColor: mantine.colors.dark[4],
+      vars: {
+        [bgColor]: mantine.colors.dark[6],
+      },
+    },
+  },
+  ':hover': {
+    borderColor: mantine.colors.defaultBorder,
+    boxShadow: mantine.shadows.sm,
+    vars: {
+      [transparent]: '10%',
+      [bgColor]: mantine.colors.defaultHover,
+    },
+  },
+})
+globalStyle(`${root} .tabler-icon`, {
+  color: mantine.colors.text,
+})
+
+export const shortcut = style({
+  fontSize: '11px',
+  lineHeight: 1,
+  padding: '4px 7px',
+  borderRadius: mantine.radius.sm,
+  border: '1px solid',
+  fontWeight: 'bold',
+  selectors: {
+    [`${whereLight} &`]: {
+      color: mantine.colors.gray[7],
+      borderColor: mantine.colors.gray[2],
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.gray[2]}, transparent 20%)`,
+    },
+    [`${whereDark} &`]: {
+      color: mantine.colors.dark[0],
+      borderColor: mantine.colors.dark[7],
+      backgroundColor: mantine.colors.dark[8],
+    },
+  },
+})

package/src/components/SearchControl.tsx

@@ -0,0 +1,33 @@
+import {
+  type BoxProps,
+  type ElementProps,
+  type UnstyledButtonProps,
+  Box,
+  Group,
+  rem,
+  Text,
+  UnstyledButton,
+} from '@mantine/core'
+import { IconSearch } from '@tabler/icons-react'
+import { isMacOs } from '@xyflow/system'
+import cx from 'clsx'
+import * as classes from './SearchControl.css'
+
+interface SearchControlProps extends UnstyledButtonProps, ElementProps<'button'> {}
+
+export function SearchControl({ className, ...others }: SearchControlProps) {
+  const isMac = isMacOs()
+  return (
+    <UnstyledButton {...others} className={cx(classes.root, className)}>
+      <Group gap="xs">
+        <IconSearch style={{ width: rem(15), height: rem(15) }} stroke={2} />
+        <Text fz="sm" fw="500" pr={50}>
+          Search
+        </Text>
+        <Text fw={700} className={classes.shortcut}>
+          {isMac ? '⌘ + K' : 'Ctrl + K'}
+        </Text>
+      </Group>
+    </UnstyledButton>
+  )
+}

package/src/context/IconRenderer.tsx

@@ -1,5 +1,16 @@
+import type { ElementShape } from '@likec4/core'
+import {
+  type Icon,
+  type IconProps,
+  IconBrowser,
+  IconCylinder,
+  IconDeviceMobile,
+  IconRectangularPrism,
+  IconReorder,
+  IconUser,
+} from '@tabler/icons-react'
 import clsx from 'clsx'
-import { type ReactNode, createContext, useContext } from 'react'
+import { type ForwardRefExoticComponent, type ReactNode, type RefAttributes, createContext, useContext } from 'react'
 import type { ElementIconRenderer } from '../LikeC4Diagram.props'
 
 const IconRendererContext = createContext<ElementIconRenderer | null>(null)
@@ -43,3 +54,45 @@ export function IconRenderer({
     </div>
   )
 }
+
+const ShapeIcons = {
+  browser: IconBrowser,
+  cylinder: IconCylinder,
+  mobile: IconDeviceMobile,
+  person: IconUser,
+  queue: IconReorder,
+  rectangle: IconRectangularPrism,
+  storage: IconCylinder,
+} satisfies Record<ElementShape, ForwardRefExoticComponent<IconProps & RefAttributes<Icon>>>
+
+export function IconOrShapeRenderer({
+  element,
+  className,
+}: {
+  element: {
+    id: string
+    title: string
+    shape: ElementShape
+    icon?: string | null | undefined
+  }
+  className: string
+}) {
+  const icon = IconRenderer({
+    element,
+    className,
+  })
+  if (icon) {
+    return icon
+  }
+  const ShapeIcon = ShapeIcons[element.shape]
+  return (
+    <div
+      className={clsx(
+        className,
+        'likec4-shape-icon',
+      )}
+    >
+      <ShapeIcon />
+    </div>
+  )
+}

package/src/hooks/index.ts

@@ -1,5 +1,4 @@
 export { useCurrentViewId } from './useCurrentViewId'
-export type { DiagramContext } from './useDiagramContext'
 export { useMantinePortalProps } from './useMantinePortalProps'
 export { useSetState } from './useSetState'
 export { useUpdateEffect } from './useUpdateEffect'

package/src/index.ts

@@ -16,7 +16,21 @@ export { useSetState } from './hooks/useSetState'
 export { useUpdateEffect } from './hooks/useUpdateEffect'
 export { vars, xyvars } from './theme-vars'
 
-export type * from './LikeC4Diagram.props'
+export type {
+  ChangeEvent,
+  DiagramNodeWithNavigate,
+  ElementIconRenderer,
+  LikeC4ColorScheme,
+  LikeC4DiagramEventHandlers,
+  LikeC4DiagramProperties,
+  OnCanvasClick,
+  OnChange,
+  OnEdgeClick,
+  OnNavigateTo,
+  OnNodeClick,
+  OpenSourceParams,
+  WhereOperator,
+} from './LikeC4Diagram.props'
 
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram'

package/src/likec4diagram/DiagramUI.tsx

@@ -1,19 +1,12 @@
-import { memo } from 'react'
 import { IfEnabled } from '../context'
-import { LikeC4Search } from '../LikeC4Search'
 import { Overlays } from '../overlays/Overlays'
-import { Controls, DiagramTitlePanel } from './ui'
-import NotationPanel from './ui/notation'
-import { DynamicViewWalkthrough } from './ui/walkthrough/DynamicViewWalkthrough'
+import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
 
 export function DiagramUI() {
   return (
     <>
       <Controls />
       <Overlays />
-      <IfEnabled feature="Search">
-        <LikeC4Search />
-      </IfEnabled>
       <IfEnabled feature="ViewTitle">
         <DiagramTitlePanel />
       </IfEnabled>

package/src/likec4diagram/XYFlow.tsx

@@ -2,6 +2,7 @@ import { type EdgeId, type NodeId, nonNullable } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
+import { memo } from 'react'
 import type { EnforceOptional } from 'type-fest/source/enforce-optional'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
@@ -9,6 +10,7 @@ import { useDiagram } from '../hooks/useDiagram'
 import { useDiagramContext } from '../hooks/useDiagramContext'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import { edgeTypes, nodeTypes } from './custom'
+import { DiagramUI } from './DiagramUI'
 import type { DiagramContext } from './state/machine'
 import type { Types } from './types'
 import { useLayoutConstraints } from './useLayoutConstraints'
@@ -43,7 +45,7 @@ type Picked = EnforceOptional<
 >
 export type LikeC4DiagramXYFlowProps = Required<Picked>
 
-export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlowProps) => {
+export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({ background, nodesDraggable, nodesSelectable }) => {
   const diagram = useDiagram()
   const {
     initialized,
@@ -80,10 +82,10 @@ export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlow
       nodeTypes={nodeTypes}
       edgeTypes={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 is handled in onInit
@@ -105,6 +107,7 @@ export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlow
       })}
       onDoubleClick={useCallbackRef(e => {
         e.stopPropagation()
+        e.preventDefault()
         diagram.send({ type: 'xyflow.paneDblClick' })
         onCanvasDblClick?.(e as any)
       })}
@@ -115,34 +118,31 @@ export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlow
       onInit={useCallbackRef((instance) => {
         diagram.send({ type: 'xyflow.init', instance })
       })}
-      {...onNodeContextMenu && {
-        onNodeContextMenu: useCallbackRef((event, node) => {
-          const diagramNode = nonNullable(
-            diagram.findDiagramNode(node.id as NodeId),
-            `diagramNode ${node.id} not found`,
-          )
-          onNodeContextMenu(diagramNode, event)
-        }),
-      }}
-      {...onEdgeContextMenu && {
-        onEdgeContextMenu: useCallbackRef((event, edge) => {
-          const diagramEdge = nonNullable(
-            diagram.findDiagramEdge(edge.id as EdgeId),
-            `diagramEdge ${edge.id} not found`,
-          )
-          onEdgeContextMenu(diagramEdge, event)
-        }),
-      }}
-      {...onCanvasContextMenu && {
-        onPaneContextMenu: useCallbackRef((event) => {
-          onCanvasContextMenu(event as any)
-        }),
-      }}
+      onNodeContextMenu={useCallbackRef((event, node) => {
+        const diagramNode = nonNullable(
+          diagram.findDiagramNode(node.id as NodeId),
+          `diagramNode ${node.id} not found`,
+        )
+        onNodeContextMenu?.(diagramNode, event)
+      })}
+      onEdgeContextMenu={useCallbackRef((event, edge) => {
+        const diagramEdge = nonNullable(
+          diagram.findDiagramEdge(edge.id as EdgeId),
+          `diagramEdge ${edge.id} not found`,
+        )
+        onEdgeContextMenu?.(diagramEdge, event)
+      })}
+      onPaneContextMenu={useCallbackRef((event) => {
+        onCanvasContextMenu?.(event as any)
+      })}
       {...enableFitView && {
         onViewportResize,
       }}
-      {...(notReadOnly && rest.nodesDraggable && layoutConstraints)}
-      {...props}
-      {...rest} />
+      nodesDraggable={nodesDraggable}
+      nodesSelectable={nodesSelectable}
+      {...(notReadOnly && nodesDraggable && layoutConstraints)}
+      {...props}>
+      <DiagramUI />
+    </BaseXYFlow>
   )
-}
+}, shallowEqual)

package/src/likec4diagram/custom/edges/RelationshipEdge.tsx

@@ -1,6 +1,5 @@
 import {
   type EdgeId,
-  type NodeId,
   isStepEdgeId,
   nonNullable,
 } from '@likec4/core'

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.css.ts

@@ -2,6 +2,7 @@ import { style } from '@vanilla-extract/css'
 import { mantine, vars } from '../../../theme-vars'
 
 export const menuDropdown = style({
+  overflowY: 'scroll',
   minWidth: 250,
   maxWidth: 'min(90vw, 500px)',
 })

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -27,7 +27,7 @@ import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@
 import clsx from 'clsx'
 import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, useCallback } from 'react'
 import { filter, isTruthy, map, partition, pipe } from 'remeda'
-import { Link } from '../../../base/Link'
+import { Link } from '../../../components/Link'
 import { IfEnabled, useDiagramEventHandlers, useEnabledFeature } from '../../../context'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
@@ -127,9 +127,11 @@ export function RelationshipsDropdownMenu({
       closeOnClickOutside
       clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
       closeOnEscape
+      keepMounted={false}
       closeOnItemClick={false}
       disabled={disabled}
       position="bottom-start"
+      middlewares={{ size: { padding: 8 } }}
       {...portalProps}
     >
       <MenuTarget>

package/src/likec4diagram/state/assign.ts

@@ -321,7 +321,7 @@ export function resetEdgeControlPoints({ context }: ActionArg): Partial<DiagramC
     }
 
     // Edge is a loop
-    if (source == target) {
+    if (source === target) {
       const loopSize = 80
       const centerOfTopBoundary = new VectorImpl(0, source.height || 0)
         .mul(-0.5)

package/src/likec4diagram/state/machine.ts

@@ -4,7 +4,6 @@ import {
   type EdgeId,
   type Fqn,
   type NodeId,
-  type RelationId,
   type StepEdgeId,
   type ViewChange,
   type ViewId,
@@ -136,8 +135,8 @@ export namespace DiagramContext {
 export type Events =
   | HotKeyEvent
   | { type: 'xyflow.init'; instance: ReactFlowInstance<Types.Node, Types.Edge> }
-  | { type: 'xyflow.applyNodeChages'; changes: NodeChange<Types.Node>[] }
-  | { type: 'xyflow.applyEdgeChages'; changes: EdgeChange<Types.Edge>[] }
+  | { type: 'xyflow.applyNodeChanges'; changes: NodeChange<Types.Node>[] }
+  | { type: 'xyflow.applyEdgeChanges'; changes: EdgeChange<Types.Edge>[] }
   | { type: 'xyflow.viewportMoved'; viewport: Viewport; manually: boolean }
   | { type: 'xyflow.nodeClick'; node: Types.Node }
   | { type: 'xyflow.edgeClick'; edge: Types.Edge }
@@ -634,7 +633,7 @@ export 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 }) => ({
@@ -657,15 +656,16 @@ export 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',
             },
@@ -765,12 +765,12 @@ export 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),
       }),
@@ -838,17 +838,19 @@ export 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({