@likec4/diagram 1.24.0 → 1.25.0

package/src/context/FramerMotionConfig.tsx

@@ -2,11 +2,22 @@ import { useMantineStyleNonce } from '@mantine/core'
 import { domMax, LazyMotion, MotionConfig } from 'framer-motion'
 import { type PropsWithChildren } from 'react'
 
-export const FramerMotionConfig = ({ children }: PropsWithChildren) => {
+export const FramerMotionConfig = ({
+  reducedMotion = 'user',
+  children,
+}: PropsWithChildren<{
+  /**
+   * If true, will respect the device prefersReducedMotion setting by switching
+   * transform animations off.
+   *
+   * @public
+   */
+  reducedMotion?: 'always' | 'never' | 'user'
+}>) => {
   const nonce = useMantineStyleNonce()?.()
   return (
     <LazyMotion features={domMax} strict>
-      <MotionConfig {...nonce && { nonce }}>
+      <MotionConfig reducedMotion={reducedMotion} {...nonce && { nonce }}>
         {children}
       </MotionConfig>
     </LazyMotion>

package/src/context/RootContainer.tsx

@@ -1,17 +1,26 @@
 import { Box } from '@mantine/core'
 import clsx from 'clsx'
-import { type PropsWithChildren, type RefObject, createContext, createRef, useContext, useRef } from 'react'
-import { rootClassName } from '../globals.css'
+import { type PropsWithChildren, createContext, createRef, useContext, useRef } from 'react'
+import { rootClassName } from '../theme-vars'
 
 const RootContainerContext = createContext(createRef<HTMLDivElement>())
 
 export function RootContainer({
   className,
+  reduceGraphics = false,
   children,
-}: PropsWithChildren<{ className?: string | undefined }>) {
+}: PropsWithChildren<{
+  className?: string | undefined
+  reduceGraphics?: boolean
+}>) {
   const ref = useRef<HTMLDivElement>(null)
   return (
-    <Box className={clsx(rootClassName, className)} ref={ref}>
+    <Box
+      className={clsx(rootClassName, className)}
+      ref={ref}
+      {...reduceGraphics && {
+        ['data-likec4-reduced-graphics']: true,
+      }}>
       <RootContainerContext.Provider value={ref}>
         {children}
       </RootContainerContext.Provider>

package/src/hooks/safeContext.tsx

@@ -1,4 +1,5 @@
-import { createContext, use } from 'react'
+import { createSafeContext } from '@mantine/core'
+import { createContext, use, useContext } from 'react'
 import type { DiagramActorRef } from '../state/types'
 
 /**

package/src/hooks/useDiagram.ts

@@ -18,6 +18,7 @@ export function useDiagram() {
   const actor = useDiagramActorRef()
   const [, startTransition] = useTransition()
   return useMemo(() => ({
+    actor,
     send: actor.send,
     navigateTo: (viewId: ViewId, fromNode?: NodeId) => {
       startTransition(() => {

package/src/hooks/useIsReducedGraphics.ts

@@ -0,0 +1,5 @@
+import { createSafeContext } from '@mantine/core'
+
+export const [ReducedGraphicsContext, useIsReducedGraphics] = createSafeContext<boolean>(
+  'ReducedGraphicsContext is not provided',
+)

package/src/hooks/useXYFlow.ts

@@ -20,7 +20,7 @@ export type XYStoreApi = ReturnType<typeof useXYStoreApi>
 
 export const useXYInternalNode = useInternalNode<Types.Node>
 
-const selectZoom = (state: ReactFlowState) => state.transform[2] < 0.2
+const selectZoom = (state: ReactFlowState) => state.transform[2] < 0.25
 export function useIsZoomTooSmall() {
   return useStore(selectZoom)
 }

package/src/index.ts

@@ -1,5 +1,6 @@
 import '@xyflow/react/dist/style.css'
 
+export type { ControlsCustomLayout, ControlsCustomLayoutProps } from './context/ControlsCustomLayout'
 export { FramerMotionConfig } from './context/FramerMotionConfig'
 export { LikeC4Diagram } from './LikeC4Diagram'
 export type { LikeC4DiagramProps } from './LikeC4Diagram'

package/src/likec4diagram/DiagramUI.tsx

@@ -1,16 +1,17 @@
+import { memo } from 'react'
 import { useEnabledFeatures } from '../context'
 import { useDiagramActorSnapshot } from '../hooks/useDiagram'
 import { Overlays } from '../overlays/Overlays'
 import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
 
-export function DiagramUI() {
+export const DiagramUI = memo(() => {
   const {
     enableViewTitle,
     enableNotations,
     enableDynamicViewWalkthrough,
   } = useEnabledFeatures()
 
-  const overlaysActorRef = useDiagramActorSnapshot(s => s.children.overlays)
+  const overlaysActorRef = useDiagramActorSnapshot(s => s.children.overlays, Object.is)
 
   return (
     <>
@@ -21,4 +22,5 @@ export function DiagramUI() {
       {enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
     </>
   )
-}
+})
+DiagramUI.displayName = 'DiagramUI'

package/src/likec4diagram/XYFlow.tsx

@@ -2,7 +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 PropsWithChildren, memo } from 'react'
 import type { EnforceOptional } from 'type-fest/source/enforce-optional'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
@@ -50,9 +50,14 @@ type Picked = EnforceOptional<
     | 'nodesSelectable'
   >
 >
-export type LikeC4DiagramXYFlowProps = Required<Picked>
+export type LikeC4DiagramXYFlowProps = PropsWithChildren<Required<Picked>>
 
-export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({ background, nodesDraggable, nodesSelectable }) => {
+export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
+  background,
+  nodesDraggable,
+  nodesSelectable,
+  children,
+}) => {
   const diagram = useDiagram()
   const {
     initialized,
@@ -150,6 +155,7 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({ background,
       {...(notReadOnly && nodesDraggable && layoutConstraints)}
       {...props}>
       <DiagramUI />
+      {children}
     </BaseXYFlow>
   )
 }, shallowEqual)

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

@@ -5,6 +5,7 @@ import {
 } from '@likec4/core'
 import { useDebouncedEffect } from '@react-hookz/web'
 import type { XYPosition } from '@xyflow/react'
+import { EdgeLabelRenderer } from '@xyflow/react'
 import clsx from 'clsx'
 import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { type PointerEvent as ReactPointerEvent, useEffect, useRef, useState } from 'react'
@@ -13,6 +14,7 @@ import { customEdge, EdgeActionButton, EdgeContainer, EdgeLabel, EdgePath } from
 import { useEnabledFeature } from '../../../context'
 import { useXYFlow, useXYInternalNode, useXYStoreApi } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
+import { useIsReducedGraphics } from '../../../hooks/useIsReducedGraphics'
 import { vector, VectorImpl } from '../../../utils/vector'
 import { bezierControlPoints, bezierPath, isSamePoint } from '../../../utils/xyflow'
 import type { Types } from '../../types'
@@ -27,6 +29,7 @@ const curve = d3line<XYPosition>()
   .y(d => d.y)
 
 export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) => {
+  const isReducedGraphicsMode = useIsReducedGraphics()
   const [isControlPointDragging, setIsControlPointDragging] = useState(false)
   const xyflowStore = useXYStoreApi()
   const xyflow = useXYFlow()
@@ -44,10 +47,11 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
     target,
     targetX,
     targetY,
+    selected = false,
     data: {
       id: edgeId,
-      navigateTo,
       points,
+      hovered = false,
       active = false,
       dimmed = false,
       labelBBox,
@@ -56,6 +60,8 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
     },
   } = props
 
+  const navigateTo = enableNavigateTo ? data.navigateTo : undefined
+
   const sourceNode = nonNullable(useXYInternalNode(source)!, `source node ${source} not found`)
   const targetNode = nonNullable(useXYInternalNode(target)!, `target node ${target} not found`)
 
@@ -297,7 +303,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
           <div {...props} />
         </NotePopover>
       )
-    } else if (enableRelationshipDetails) {
+    } else if (enableRelationshipDetails && (!isReducedGraphicsMode || hovered || selected || active)) {
       renderLabel = (props: any) => (
         <RelationshipsDropdownMenu
           disabled={!!dimmed}
@@ -313,24 +319,6 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
   return (
     <EdgeContainer {...props} className={clsx(isControlPointDragging && edgesCss.controlDragging)}>
       <EdgePath {...props} svgPath={edgePath} ref={svgPathRef} onEdgePointerDown={onEdgePointerDown} />
-      {enableEdgeEditing && (
-        <g
-          onContextMenu={e => {
-            e.preventDefault()
-            e.stopPropagation()
-          }}>
-          {controlPoints.map((p, i) => (
-            <circle
-              onPointerDown={e => onControlPointerDown(i, e)}
-              className={edgesCss.controlPoint}
-              key={i}
-              cx={p.x}
-              cy={p.y}
-              r={3}
-            />
-          ))}
-        </g>
-      )}
       <EdgeLabel
         edgeProps={props}
         labelPosition={{
@@ -340,7 +328,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
         }}
         {...renderLabel && { renderRoot: renderLabel }}
       >
-        {!isControlPointDragging && enableNavigateTo && navigateTo && (
+        {!isControlPointDragging && navigateTo && (
           <EdgeActionButton
             {...props}
             onClick={e => {
@@ -349,6 +337,29 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
             }} />
         )}
       </EdgeLabel>
+      {/* Render control points above edge label  */}
+      {enableEdgeEditing && controlPoints.length > 0 && (
+        <EdgeLabelRenderer>
+          <EdgeContainer component="svg" className={edgesCss.controlPointsContainer} {...props}>
+            <g
+              onContextMenu={e => {
+                e.preventDefault()
+                e.stopPropagation()
+              }}>
+              {controlPoints.map((p, i) => (
+                <circle
+                  onPointerDown={e => onControlPointerDown(i, e)}
+                  className={clsx('nodrag nopan', edgesCss.controlPoint)}
+                  key={i}
+                  cx={Math.round(p.x)}
+                  cy={Math.round(p.y)}
+                  r={3}
+                />
+              ))}
+            </g>
+          </EdgeContainer>
+        </EdgeLabelRenderer>
+      )}
     </EdgeContainer>
   )
 })

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

@@ -1,9 +1,9 @@
 import {
   type DiagramEdge,
   type EdgeId,
+  type LikeC4Model,
   type NodeId,
   DiagramNode,
-  LikeC4Model,
   nameFromFqn,
 } from '@likec4/core'
 import {

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

@@ -1,8 +1,23 @@
 import { globalStyle, style } from '@vanilla-extract/css'
+import { ZIndexes } from '../../../base/const'
 import { mantine, xyvars } from '../../../theme-vars'
 
 const isSelected = '.react-flow__edge.selected'
 
+export const controlPointsContainer = style({
+  overflow: 'visible',
+  position: 'absolute',
+  pointerEvents: 'none',
+  top: 0,
+  left: 0,
+  zIndex: ZIndexes.Edge,
+  selectors: {
+    [`&:is([data-edge-hovered='true'])`]: {
+      zIndex: ZIndexes.Edge + 1,
+    },
+  },
+})
+
 export const controlPoint = style({
   fill: xyvars.edge.stroke,
   stroke: xyvars.edge.stroke,

package/src/likec4diagram/custom/index.tsx

@@ -1,7 +1,20 @@
 import type { Types } from '../types'
 import { RelationshipEdge } from './edges/RelationshipEdge'
+import {
+  CompoundDeploymentNode,
+  CompoundElementNode,
+  DeploymentNode,
+  ElementNode,
+  ViewGroupNode,
+} from './nodes/nodeTypes'
 
-export { nodeTypes } from './nodes/nodeTypes'
+export const nodeTypes = {
+  element: ElementNode,
+  deployment: DeploymentNode,
+  'compound-element': CompoundElementNode,
+  'compound-deployment': CompoundDeploymentNode,
+  'view-group': ViewGroupNode,
+} satisfies { [key in Types.Node['type']]: any }
 
 export const edgeTypes = {
   relationship: RelationshipEdge,

package/src/likec4diagram/custom/nodes/nodeTypes.tsx

@@ -36,72 +36,74 @@ const ElementDetailsButtonWithHandler = ({ fqn, ...props }: NodeProps<Types.Node
   )
 }
 
-export const nodeTypes = {
-  element: customNode<Types.ElementNodeData>((props) => (
-    <ElementNodeContainer nodeProps={props}>
-      <ElementShape {...props} isMultiple={props.data.isMultiple} />
-      <ElementTitle {...props} />
-      <ElementActions {...props} />
+export const ElementNode = customNode<Types.ElementNodeData>((props) => (
+  <ElementNodeContainer nodeProps={props}>
+    <ElementShape {...props} isMultiple={props.data.isMultiple} withSelectedIndicator={props.selected} />
+    <ElementTitle {...props} />
+    <ElementActions {...props} />
+    <ElementDetailsButtonWithHandler
+      fqn={props.data.modelFqn}
+      {...props} />
+    <IfNotEnabled feature="ReadOnly">
+      <ElementToolbar {...props} />
+    </IfNotEnabled>
+    <DefaultHandles />
+  </ElementNodeContainer>
+))
+
+export const DeploymentNode = customNode<Types.DeploymentElementNodeData>((props) => (
+  <ElementNodeContainer nodeProps={props}>
+    <ElementShape {...props} isMultiple={props.data.isMultiple} withSelectedIndicator={props.selected} />
+    <ElementTitle {...props} />
+    <DeploymentElementActions {...props} />
+    {!!props.data.modelFqn && (
       <ElementDetailsButtonWithHandler
         fqn={props.data.modelFqn}
         {...props} />
-      <IfNotEnabled feature="ReadOnly">
-        <ElementToolbar {...props} />
-      </IfNotEnabled>
-      <DefaultHandles />
-    </ElementNodeContainer>
-  )),
-  deployment: customNode<Types.DeploymentElementNodeData>((props) => (
-    <ElementNodeContainer nodeProps={props}>
-      <ElementShape {...props} isMultiple={props.data.isMultiple} />
-      <ElementTitle {...props} />
-      <DeploymentElementActions {...props} />
-      {!!props.data.modelFqn && (
-        <ElementDetailsButtonWithHandler
-          fqn={props.data.modelFqn}
-          {...props} />
-      )}
-      <IfNotEnabled feature="ReadOnly">
-        <DeploymentElementToolbar {...props} />
-      </IfNotEnabled>
-      <DefaultHandles />
-    </ElementNodeContainer>
-  )),
-  'compound-element': customNode<Types.CompoundElementNodeData>((props) => {
-    const diagram = useDiagram()
-    return (
-      <CompoundNodeContainer nodeProps={props}>
-        <CompoundTitle {...props} />
-        <CompoundActions {...props} />
-        <IfEnabled feature="ElementDetails">
-          <CompoundDetailsButton
-            {...props}
-            onClick={e => {
-              e.stopPropagation()
-              diagram.openElementDetails(props.data.modelFqn, props.id as NodeId)
-            }} />
-        </IfEnabled>
-        <IfNotEnabled feature="ReadOnly">
-          <CompoundElementToolbar {...props} />
-        </IfNotEnabled>
-        <DefaultHandles />
-      </CompoundNodeContainer>
-    )
-  }),
-  'compound-deployment': customNode<Types.CompoundDeploymentNodeData>((props) => (
+    )}
+    <IfNotEnabled feature="ReadOnly">
+      <DeploymentElementToolbar {...props} />
+    </IfNotEnabled>
+    <DefaultHandles />
+  </ElementNodeContainer>
+))
+
+export const CompoundElementNode = customNode<Types.CompoundElementNodeData>((props) => {
+  const diagram = useDiagram()
+  return (
     <CompoundNodeContainer nodeProps={props}>
       <CompoundTitle {...props} />
       <CompoundActions {...props} />
+      <IfEnabled feature="ElementDetails">
+        <CompoundDetailsButton
+          {...props}
+          onClick={e => {
+            e.stopPropagation()
+            diagram.openElementDetails(props.data.modelFqn, props.id as NodeId)
+          }} />
+      </IfEnabled>
       <IfNotEnabled feature="ReadOnly">
-        <CompoundDeploymentToolbar {...props} />
+        <CompoundElementToolbar {...props} />
       </IfNotEnabled>
       <DefaultHandles />
     </CompoundNodeContainer>
-  )),
-  'view-group': customNode<Types.ViewGroupNodeData>((props) => (
-    <CompoundNodeContainer nodeProps={props}>
-      <CompoundTitle {...props} />
-      <DefaultHandles />
-    </CompoundNodeContainer>
-  )),
-} satisfies { [key in Types.Node['type']]: any }
+  )
+})
+
+export const CompoundDeploymentNode = customNode<Types.CompoundDeploymentNodeData>((props) => (
+  <CompoundNodeContainer nodeProps={props}>
+    <CompoundTitle {...props} />
+    <CompoundActions {...props} />
+    <IfNotEnabled feature="ReadOnly">
+      <CompoundDeploymentToolbar {...props} />
+    </IfNotEnabled>
+    <DefaultHandles />
+  </CompoundNodeContainer>
+))
+
+export const ViewGroupNode = customNode<Types.ViewGroupNodeData>((props) => (
+  <CompoundNodeContainer nodeProps={props}>
+    <CompoundTitle {...props} />
+    <DefaultHandles />
+  </CompoundNodeContainer>
+))

package/src/likec4diagram/ui/controls/Controls.tsx

@@ -1,9 +1,10 @@
-import { ActionIconGroup, Badge, Group, Loader, Stack } from '@mantine/core'
+import { ActionIconGroup, Badge, Box, Group, Loader, Stack } from '@mantine/core'
 import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react'
 import { clsx } from 'clsx'
-import { LayoutGroup } from 'framer-motion'
+import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
 import { memo } from 'react'
 import { useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
+import { type ControlsCustomLayout, useControlsCustomLayout } from '../../../context/ControlsCustomLayout'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram, useDiagramContext, useDiagramSyncLayoutState } from '../../../hooks/useDiagram'
 import { stopPropagation } from '../../../utils'
@@ -16,11 +17,62 @@ import { NavigationButtons } from './NavigationButtons'
 import * as css from './styles.css'
 import { ToggleReadonly } from './ToggleReadonly'
 
+const ControlsDefaultLayout: ControlsCustomLayout = ({
+  burgerMenu,
+  navigationButtons,
+  search,
+  actionsGroup,
+}) => (
+  <Group
+    component={m.div}
+    // @ts-expect-error group component not fully polymorphic
+    initial={{
+      opacity: 0.05,
+      translateX: -30,
+      translateY: -16,
+    }}
+    animate={{
+      opacity: 1,
+      translateX: 0,
+      translateY: 0,
+    }}
+    exit={{
+      opacity: 0.05,
+      translateX: -30,
+      translateY: -10,
+    }}
+    align="flex-start"
+    className={clsx(
+      'react-flow__panel',
+      css.panel,
+      'likec4-top-left-panel',
+    )}
+    gap="xs"
+    onClick={stopPropagation}
+  >
+    <Stack align="flex-start" gap="xs">
+      <LayoutGroup>
+        <Group
+          className={clsx(css.navigationButtons, 'likec4-navigation-webview')}
+          gap={'xs'}>
+          {burgerMenu}
+          {navigationButtons}
+        </Group>
+      </LayoutGroup>
+      {actionsGroup}
+    </Stack>
+    <Box>
+      {search}
+    </Box>
+  </Group>
+)
+
 export const Controls = memo(() => {
-  const { viewId, hasLayoutDrift, viewportChanged } = useDiagramContext(c => ({
+  const { viewId, hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext(c => ({
     viewId: c.view.id,
     hasLayoutDrift: c.view.hasLayoutDrift ?? false,
     viewportChanged: c.viewportChangedManually,
+    isNotActiveWalkthrough: c.activeWalkthrough === null,
   }))
   const diagram = useDiagram()
   const {
@@ -36,24 +88,13 @@ export const Controls = memo(() => {
   } = useEnabledFeatures()
   const notReadOnly = !enableReadOnly
   const portalProps = useMantinePortalProps()
-
+  const ControlsLayout = useControlsCustomLayout() ?? ControlsDefaultLayout
   return (
-    <Group
-      align="flex-start"
-      className={clsx(
-        'react-flow__panel',
-        css.panel,
-        'likec4-top-left-panel',
-      )}
-      gap="xs"
-      onClick={stopPropagation}
-    >
-      <Stack align="flex-start" gap="xs">
-        <LayoutGroup>
-          <Group
-            className={clsx(css.navigationButtons, 'likec4-navigation-webview')}
-            gap={'xs'}>
-            {onBurgerMenuClick && (
+    <LayoutGroup inherit={false}>
+      <AnimatePresence initial={false} mode="wait">
+        {isNotActiveWalkthrough && (
+          <ControlsLayout
+            burgerMenu={onBurgerMenuClick && (
               <ActionIcon
                 onClick={e => {
                   e.stopPropagation()
@@ -62,47 +103,47 @@ export const Controls = memo(() => {
                 <IconMenu2 />
               </ActionIcon>
             )}
-            {enableNavigationButtons && <NavigationButtons />}
-          </Group>
-        </LayoutGroup>
-        <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
-          {enableVscode && (
-            <Tooltip label="Open source" {...portalProps}>
-              <ActionIcon
-                onClick={e => {
-                  e.stopPropagation()
-                  onOpenSource?.({ view: viewId })
-                }}>
-                <IconFileSymlink stroke={1.5} />
-              </ActionIcon>
-            </Tooltip>
-          )}
-          {enableControls && <ToggleReadonly />}
-          {enableControls && hasLayoutDrift && <LayoutDriftNotification {...portalProps} />}
-          {enableControls && notReadOnly && (
-            <>
-              <ChangeAutoLayoutButton {...portalProps} />
-              <ManualLayoutToolsButton {...portalProps} />
-            </>
-          )}
-          {enableControls && (
-            <Tooltip label={viewportChanged ? 'Center camera' : 'Camera is centered'} {...portalProps}>
-              <ActionIcon
-                onClick={e => {
-                  e.stopPropagation()
-                  diagram.fitDiagram()
-                }}>
-                <IconFocusCentered />
-              </ActionIcon>
-            </Tooltip>
-          )}
-        </ActionIconGroup>
-      </Stack>
-      <Group>
-        {enableSearch && <LikeC4Search />}
-        {/* {notReadOnly && <SyncLayoutBadge />} */}
-      </Group>
-    </Group>
+            navigationButtons={enableNavigationButtons && <NavigationButtons />}
+            search={enableSearch && <LikeC4Search />}
+            syncInProgressBadge={<SyncLayoutBadge />}
+            actionsGroup={
+              <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
+                {enableVscode && (
+                  <Tooltip label="Open source" {...portalProps}>
+                    <ActionIcon
+                      onClick={e => {
+                        e.stopPropagation()
+                        onOpenSource?.({ view: viewId })
+                      }}>
+                      <IconFileSymlink stroke={1.5} />
+                    </ActionIcon>
+                  </Tooltip>
+                )}
+                {enableControls && <ToggleReadonly />}
+                {enableControls && hasLayoutDrift && <LayoutDriftNotification {...portalProps} />}
+                {enableControls && notReadOnly && (
+                  <>
+                    <ChangeAutoLayoutButton {...portalProps} />
+                    <ManualLayoutToolsButton {...portalProps} />
+                  </>
+                )}
+                {enableControls && (
+                  <Tooltip label={viewportChanged ? 'Center camera' : 'Camera is centered'} {...portalProps}>
+                    <ActionIcon
+                      onClick={e => {
+                        e.stopPropagation()
+                        diagram.fitDiagram()
+                      }}>
+                      <IconFocusCentered />
+                    </ActionIcon>
+                  </Tooltip>
+                )}
+              </ActionIconGroup>
+            }
+          />
+        )}
+      </AnimatePresence>
+    </LayoutGroup>
   )
 })