@likec4/diagram 1.30.0 → 1.32.0

package/src/hooks/useDiagram.ts

@@ -1,24 +1,129 @@
-import { type DiagramView, type EdgeId, type ElementNotation, type Fqn, type NodeId, type ViewId } from '@likec4/core'
+import {
+  type aux,
+  type DiagramEdge,
+  type DiagramNode,
+  type DiagramView,
+  type EdgeId,
+  type Fqn,
+  type NodeId,
+  type NodeNotation as ElementNotation,
+  type scalar,
+  type ViewId,
+} from '@likec4/core/types'
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector as useXstateSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
-import { useMemo } from 'react'
+import { type DependencyList, useCallback, useMemo } from 'react'
 import type { PartialDeep } from 'type-fest'
 import type { FeatureName } from '../context/DiagramFeatures'
 import type { OpenSourceParams } from '../LikeC4Diagram.props'
 import type { Types } from '../likec4diagram/types'
 import type { AlignmentMode } from '../state/aligners'
-import type { DiagramActorSnapshot, DiagramContext, SyncLayoutActorRef, SyncLayoutActorSnapshot } from '../state/types'
+import type {
+  DiagramActorEvent,
+  DiagramActorRef,
+  DiagramActorSnapshot,
+  DiagramContext,
+  SyncLayoutActorRef,
+  SyncLayoutActorSnapshot,
+} from '../state/types'
 import { findDiagramEdge, findDiagramNode } from '../state/utils'
 import { useDiagramActorRef } from './safeContext'
 
 export { useDiagramActorRef }
 
-export function useDiagram() {
+export interface DiagramApi {
+  readonly actor: DiagramActorRef
+  /**
+   * @warning Do not use in render phase
+   */
+  readonly currentView: DiagramView
+  /**
+   * Send event to diagram actor
+   */
+  send(event: DiagramActorEvent): void
+  /**
+   * Navigate to view
+   */
+  navigateTo(viewId: scalar.ViewId, fromNode?: scalar.NodeId): void
+  /**
+   * Navigate back or forward in history
+   */
+  navigate(direction: 'back' | 'forward'): void
+  /**
+   * Fit diagram to view
+   */
+  fitDiagram(duration?: number): void
+  /**
+   * Open relationships browser
+   */
+  openRelationshipsBrowser(fqn: scalar.Fqn): void
+  /**
+   * If running in editor, trigger opening source file
+   */
+  openSource(params: OpenSourceParams<aux.Unknown>): void
+  /**
+   * Open element details card
+   */
+  openElementDetails(fqn: scalar.Fqn, fromNode?: scalar.NodeId): void
+  openRelationshipDetails(...params: [edgeId: scalar.EdgeId] | [source: scalar.Fqn, target: scalar.Fqn]): void
+  updateNodeData(nodeId: scalar.NodeId, data: PartialDeep<Types.NodeData>): void
+  updateEdgeData(edgeId: scalar.EdgeId, data: PartialDeep<Types.EdgeData>): void
+  /**
+   * Schedule save manual layout
+   */
+  scheduleSaveManualLayout(): void
+  /**
+   * @returns true if there was pending request to save layout
+   */
+  cancelSaveManualLayout(): boolean
+  /**
+   * Align nodes
+   */
+  align(mode: AlignmentMode): void
+  /**
+   * Reset edge control points
+   */
+  resetEdgeControlPoints(): void
+  /**
+   * Focus node
+   */
+  focusNode(nodeId: NodeId): void
+
+  /**
+   * @warning Do not use in render phase
+   */
+  getSnapshot(): DiagramActorSnapshot
+  /**
+   * @warning Do not use in render phase
+   */
+  getContext(): DiagramContext
+  /**
+   * @warning Do not use in render phase
+   */
+  findDiagramNode(xynodeId: string): DiagramNode | null
+  /**
+   * @warning Do not use in render phase
+   */
+  findDiagramEdge(xyedgeId: string): DiagramEdge | null
+  startWalkthrough(): void
+  walkthroughStep(direction?: 'next' | 'previous'): void
+  stopWalkthrough(): void
+  toggleFeature(feature: FeatureName, forceValue?: boolean): void
+  highlightNotation(notation: ElementNotation, kind?: string): void
+  unhighlightNotation(): void
+  openSearch(searchValue?: string): void
+}
+
+/**
+ * Diagram API
+ * Mostly for internal use
+ */
+export function useDiagram(): DiagramApi {
   const actor = useDiagramActorRef()
-  return useMemo(() => ({
+  return useMemo((): DiagramApi => ({
     actor,
-    send: actor.send,
+    send: (event: DiagramActorEvent) => actor.send(event),
     navigateTo: (viewId: ViewId, fromNode?: NodeId) => {
       actor.send({
         type: 'navigate.to',
@@ -32,16 +137,16 @@ export function useDiagram() {
     fitDiagram: (duration = 350) => {
       actor.send({ type: 'fitDiagram', duration })
     },
-    openRelationshipsBrowser: (fqn: Fqn) => {
+    openRelationshipsBrowser: (fqn) => {
       actor.send({ type: 'open.relationshipsBrowser', fqn })
     },
-    openSource: (params: OpenSourceParams) => {
+    openSource: (params: OpenSourceParams<aux.Unknown>) => {
       actor.send({ type: 'open.source', ...params })
     },
-    openElementDetails: (fqn: Fqn, fromNode?: NodeId) => {
+    openElementDetails: (fqn, fromNode?: scalar.NodeId) => {
       actor.send({ type: 'open.elementDetails', fqn, fromNode })
     },
-    openRelationshipDetails: (...params: [edgeId: EdgeId] | [source: Fqn, target: Fqn]) => {
+    openRelationshipDetails: (...params: [edgeId: scalar.EdgeId] | [source: scalar.Fqn, target: scalar.Fqn]) => {
       if (params.length === 1) {
         actor.send({ type: 'open.relationshipDetails', params: { edgeId: params[0] } })
       } else {
@@ -49,14 +154,13 @@ export function useDiagram() {
       }
     },
 
-    updateNodeData: (nodeId: NodeId, data: PartialDeep<Types.NodeData>) => {
+    updateNodeData: (nodeId: scalar.NodeId, data: PartialDeep<Types.NodeData>) => {
       actor.send({ type: 'update.nodeData', nodeId, data })
     },
-    updateEdgeData: (edgeId: EdgeId, data: PartialDeep<Types.Edge['data']>) => {
+    updateEdgeData: (edgeId: scalar.EdgeId, data: PartialDeep<Types.EdgeData>) => {
       actor.send({
         type: 'update.edgeData',
         edgeId,
-        // @ts-expect-error TODO: fix this
         data,
       })
     },
@@ -93,21 +197,21 @@ export function useDiagram() {
     /**
      * @warning Do not use in render phase
      */
-    getSnapshot: () => actor.getSnapshot(),
+    getSnapshot: (): DiagramActorSnapshot => actor.getSnapshot(),
     /**
      * @warning Do not use in render phase
      */
-    getContext: () => actor.getSnapshot().context,
+    getContext: (): DiagramContext => actor.getSnapshot().context,
     /**
      * @warning Do not use in render phase
      */
-    findDiagramNode: (xynodeId: string) => {
+    findDiagramNode: (xynodeId: string): DiagramNode | null => {
       return findDiagramNode(actor.getSnapshot().context, xynodeId)
     },
     /**
      * @warning Do not use in render phase
      */
-    findDiagramEdge: (xyedgeId: string) => {
+    findDiagramEdge: (xyedgeId: string): DiagramEdge | null => {
       return findDiagramEdge(actor.getSnapshot().context, xyedgeId)
     },
 
@@ -133,6 +237,10 @@ export function useDiagram() {
     unhighlightNotation: () => {
       actor.send({ type: 'notations.unhighlight' })
     },
+
+    openSearch: (searchValue?: string) => {
+      actor.send({ type: 'open.search', ...(searchValue && { search: searchValue }) })
+    },
   }), [actor])
 }
 
@@ -152,10 +260,15 @@ export function useDiagramSyncLayoutState<T = unknown>(
   return useXstateSelector(syncLayoutActorRef, useCallbackRef(selector), compare)
 }
 
+/**
+ * Read diagram context
+ */
 export function useDiagramContext<T = unknown>(
   selector: (context: DiagramContext) => T,
   compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
+  deps?: DependencyList,
 ): T {
   const actorRef = useDiagramActorRef()
-  return useXstateSelector(actorRef, useCallbackRef(s => selector(s.context)), compare)
+  const select = useCallback((s: DiagramActorSnapshot) => selector(s.context), deps ?? [])
+  return useXstateSelector(actorRef, select, compare)
 }

package/src/hooks/useMantinePortalProps.ts

@@ -2,7 +2,16 @@ import { useMemo } from 'react'
 
 import { useRootContainer } from '../context'
 
-export function useMantinePortalProps() {
+export function useMantinePortalProps():
+  | {
+    portalProps: { target: HTMLDivElement }
+    withinPortal: true
+  }
+  | {
+    withinPortal: false
+    portalProps?: never
+  }
+{
   const target = useRootContainer()
   return useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target])
 }

package/src/hooks/useSearchActor.ts

@@ -0,0 +1,11 @@
+import type { SearchActorRef } from '../search/searchActor'
+import type { DiagramActorSnapshot } from '../state/types'
+import { useDiagramActorSnapshot } from './useDiagram'
+
+const select = (s: DiagramActorSnapshot) => {
+  return s.children.search ?? null
+}
+
+export function useSearchActorRef(): SearchActorRef | null {
+  return useDiagramActorSnapshot(select, Object.is)
+}

package/src/hooks/useUpdateEffect.ts

@@ -2,7 +2,7 @@ import {
   type DependenciesComparator,
   type EffectHook,
   useCustomCompareEffect,
-  useFirstMountState
+  useFirstMountState,
 } from '@react-hookz/web'
 import { shallowEqual } from 'fast-equals'
 import { type DependencyList, type EffectCallback } from 'react'
@@ -17,6 +17,9 @@ export const depsShallowEqual: DependenciesComparator = (d1, d2) => {
     return false
   }
   for (const [i, element] of d1.entries()) {
+    if (element === d2[i]) {
+      continue
+    }
     if (!shallowEqual(element, d2[i])) {
       return false
     }
@@ -26,18 +29,18 @@ export const depsShallowEqual: DependenciesComparator = (d1, d2) => {
 
 export function useUpdateEffect<
   Callback extends EffectCallback = EffectCallback,
-  Deps extends DependencyList = DependencyList
+  Deps extends DependencyList = DependencyList,
 >(
   callback: Callback,
   deps: Deps,
   equalityFn?: DependenciesComparator<Deps>,
-  effectHook?: EffectHook<Callback, Deps>
+  effectHook?: EffectHook<Callback, Deps>,
 ) {
   const isFirstMount = useFirstMountState()
   useCustomCompareEffect(
     isFirstMount ? noop as Callback : callback,
     deps,
     equalityFn ?? depsShallowEqual,
-    effectHook
+    effectHook,
   )
 }

package/src/hooks/useXYFlow.ts

@@ -20,6 +20,11 @@ export type XYStoreApi = ReturnType<typeof useXYStoreApi>
 
 export const useXYInternalNode = useInternalNode<Types.Node>
 
+const selectCurrentZoom = (state: ReactFlowState) => Math.round(state.transform[2] * 100) / 100
+export function useCurrentZoom(): number {
+  return useStore(selectCurrentZoom)
+}
+
 const selectZoom = (state: ReactFlowState) => state.transform[2] < 0.2
 export function useIsZoomTooSmall(): boolean {
   return useStore(selectZoom)

package/src/index.ts

@@ -5,19 +5,13 @@ export { LikeC4Diagram } from './LikeC4Diagram'
 export type { LikeC4DiagramProps } from './LikeC4Diagram'
 export { Overlay } from './overlays/overlay/Overlay'
 
-export {
-  useLikeC4ElementsTree,
-  useLikeC4Model,
-} from './likec4model'
-
 export { LikeC4ModelProvider } from './LikeC4ModelProvider'
 
-export { useSetState } from './hooks/useSetState'
-export { useUpdateEffect } from './hooks/useUpdateEffect'
-// export { vars, xyvars } from './theme-vars'
+export * from './custom/hooks'
 
 export type {
   ChangeEvent,
+  CustomNodes,
   DiagramNodeWithNavigate,
   ElementIconRenderer,
   LikeC4ColorScheme,
@@ -29,6 +23,8 @@ export type {
   OnNavigateTo,
   OnNodeClick,
   OpenSourceParams,
+  PaddingUnit,
+  PaddingWithUnit,
   WhereOperator,
 } from './LikeC4Diagram.props'
 

package/src/likec4diagram/DiagramUI.tsx

@@ -1,7 +1,9 @@
 import { memo } from 'react'
 import { useEnabledFeatures } from '../context'
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor'
+import { useSearchActorRef } from '../hooks/useSearchActor'
 import { Overlays } from '../overlays/Overlays'
+import { Search } from '../search/Search'
 import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
 
 export const DiagramUI = memo(() => {
@@ -9,9 +11,11 @@ export const DiagramUI = memo(() => {
     enableViewTitle,
     enableNotations,
     enableDynamicViewWalkthrough,
+    enableSearch,
   } = useEnabledFeatures()
 
   const overlaysActorRef = useOverlaysActorRef()
+  const searchActorRef = useSearchActorRef()
 
   return (
     <>
@@ -20,6 +24,7 @@ export const DiagramUI = memo(() => {
       {enableViewTitle && <DiagramTitlePanel />}
       {enableNotations && <NotationPanel />}
       {enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
+      {enableSearch && searchActorRef && <Search searchActorRef={searchActorRef} />}
     </>
   )
 })

package/src/likec4diagram/DiagramXYFlow.tsx

@@ -1,16 +1,19 @@
 import { type EdgeId, type NodeId, nonNullable } from '@likec4/core'
 import { cx } from '@likec4/styles/css'
 import { useCallbackRef, useDebouncedCallback, useTimeout } from '@mantine/hooks'
+import { useCustomCompareMemo } from '@react-hookz/web'
 import type { OnMove, OnMoveEnd } from '@xyflow/system'
-import { deepEqual, shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, memo } from 'react'
+import { shallowEqual } from 'fast-equals'
+import { type PropsWithChildren } from 'react'
+import type { Simplify } from 'type-fest'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
 import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics'
+import { useUpdateEffect } from '../hooks'
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import type { DiagramContext } from '../state/types'
-import { edgeTypes, nodeTypes } from './custom'
+import { BuiltinNodes as defaultNodeTypes, edgeTypes } from './custom'
 import { DiagramUI } from './DiagramUI'
 import type { Types } from './types'
 import { useLayoutConstraints } from './useLayoutConstraints'
@@ -44,28 +47,25 @@ const equalsXYProps = (a: ReturnType<typeof selectXYProps>, b: ReturnType<typeof
   shallowEqual(a.viewport ?? null, b.viewport ?? null)
 
 export type LikeC4DiagramXYFlowProps = PropsWithChildren<
-  Pick<
-    LikeC4DiagramProperties,
-    | 'background'
-    | 'nodesDraggable'
-    | 'nodesSelectable'
-    | 'reactFlowProps'
+  Simplify<
+    Pick<
+      LikeC4DiagramProperties<any>,
+      | 'background'
+      | 'nodesDraggable'
+      | 'nodesSelectable'
+      | 'reactFlowProps'
+      | 'renderNodes'
+    >
   >
 >
-
-const compareProps = <T extends LikeC4DiagramXYFlowProps>(a: T, b: T): boolean =>
-  a.nodesDraggable === b.nodesDraggable &&
-  a.nodesSelectable === b.nodesSelectable &&
-  deepEqual(a.background, b.background) &&
-  deepEqual(a.reactFlowProps ?? {}, b.reactFlowProps ?? {})
-
-export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
+export function LikeC4DiagramXYFlow({
   background = 'dots',
   nodesDraggable = false,
   nodesSelectable = false,
   reactFlowProps = {},
   children,
-}) => {
+  renderNodes,
+}: LikeC4DiagramXYFlowProps) {
   const diagram = useDiagram()
   const {
     initialized,
@@ -116,104 +116,124 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
     }),
     onViewportResize = useCallbackRef(() => {
       diagram.send({ type: 'xyflow.resized' })
-    })
+    }),
+    nodeTypes = useCustomCompareMemo(
+      () => {
+        return {
+          element: renderNodes?.element ?? defaultNodeTypes.element,
+          deployment: renderNodes?.deployment ?? defaultNodeTypes.deployment,
+          'compound-element': renderNodes?.compoundElement ?? defaultNodeTypes['compound-element'],
+          'compound-deployment': renderNodes?.compoundDeployment ?? defaultNodeTypes['compound-deployment'],
+          'view-group': renderNodes?.viewGroup ?? defaultNodeTypes['view-group'],
+        } satisfies {
+          [key in Types.Node['type']]: any
+        }
+      },
+      [renderNodes],
+      shallowEqual,
+    )
+
+  useUpdateEffect(() => {
+    console.warn('renderNodes changed - this might degrade performance')
+  }, [nodeTypes])
 
   return (
-    <BaseXYFlow<Types.Node, Types.Edge>
-      nodes={nodes}
-      edges={edges}
-      className={cx(initialized ? 'initialized' : 'not-initialized')}
-      nodeTypes={nodeTypes}
-      edgeTypes={edgeTypes}
-      onNodesChange={useCallbackRef((changes) => {
-        diagram.send({ type: 'xyflow.applyNodeChanges', changes })
-      })}
-      onEdgesChange={useCallbackRef((changes) => {
-        diagram.send({ type: 'xyflow.applyEdgeChanges', changes })
-      })}
-      background={initialized ? background : 'transparent'}
-      // Fitview is handled in onInit
-      fitView={false}
-      onNodeClick={useCallbackRef((e, node) => {
-        e.stopPropagation()
-        diagram.send({ type: 'xyflow.nodeClick', node })
-        onNodeClick?.(diagram.findDiagramNode(node.id as NodeId)!, e)
-      })}
-      onEdgeClick={useCallbackRef((e, edge) => {
-        e.stopPropagation()
-        diagram.send({ type: 'xyflow.edgeClick', edge })
-        onEdgeClick?.(diagram.findDiagramEdge(edge.id as EdgeId)!, e)
-      })}
-      onPaneClick={useCallbackRef((e) => {
-        e.stopPropagation()
-        diagram.send({ type: 'xyflow.paneClick' })
-        onCanvasClick?.(e as any)
-      })}
-      onDoubleClick={useCallbackRef(e => {
-        e.stopPropagation()
-        e.preventDefault()
-        diagram.send({ type: 'xyflow.paneDblClick' })
-        onCanvasDblClick?.(e as any)
-      })}
-      onNodeMouseEnter={useCallbackRef((_event, node) => {
-        _event.stopPropagation()
-        if (!node.data.hovered) {
-          diagram.send({ type: 'xyflow.nodeMouseEnter', node })
-        }
-      })}
-      onNodeMouseLeave={useCallbackRef((_event, node) => {
-        _event.stopPropagation()
-        if (node.data.hovered) {
-          diagram.send({ type: 'xyflow.nodeMouseLeave', node })
-        }
-      })}
-      onEdgeMouseEnter={useCallbackRef((_event, edge) => {
-        _event.stopPropagation()
-        if (!edge.data.hovered) {
-          diagram.send({ type: 'xyflow.edgeMouseEnter', edge })
-        }
-      })}
-      onEdgeMouseLeave={useCallbackRef((_event, edge) => {
-        _event.stopPropagation()
-        if (edge.data.hovered) {
-          diagram.send({ type: 'xyflow.edgeMouseLeave', edge })
-        }
-      })}
-      {...props.pannable && {
-        onMove,
-      }}
-      onMoveEnd={onMoveEnd}
-      onInit={useCallbackRef((instance) => {
-        diagram.send({ type: 'xyflow.init', instance })
-      })}
-      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,
-      }}
-      nodesDraggable={notReadOnly && nodesDraggable}
-      nodesSelectable={nodesSelectable}
-      {...(notReadOnly && nodesDraggable && layoutConstraints)}
-      {...props}
-      {...reactFlowProps}>
+    <>
+      <BaseXYFlow<Types.Node, Types.Edge>
+        nodes={nodes}
+        edges={edges}
+        className={cx(initialized ? 'initialized' : 'not-initialized')}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        onNodesChange={useCallbackRef((changes) => {
+          diagram.send({ type: 'xyflow.applyNodeChanges', changes })
+        })}
+        onEdgesChange={useCallbackRef((changes) => {
+          diagram.send({ type: 'xyflow.applyEdgeChanges', changes })
+        })}
+        background={initialized ? background : 'transparent'}
+        // Fitview is handled in onInit
+        fitView={false}
+        onNodeClick={useCallbackRef((e, node) => {
+          e.stopPropagation()
+          diagram.send({ type: 'xyflow.nodeClick', node })
+          onNodeClick?.(diagram.findDiagramNode(node.id as NodeId)!, e)
+        })}
+        onEdgeClick={useCallbackRef((e, edge) => {
+          e.stopPropagation()
+          diagram.send({ type: 'xyflow.edgeClick', edge })
+          onEdgeClick?.(diagram.findDiagramEdge(edge.id as EdgeId)!, e)
+        })}
+        onPaneClick={useCallbackRef((e) => {
+          e.stopPropagation()
+          diagram.send({ type: 'xyflow.paneClick' })
+          onCanvasClick?.(e as any)
+        })}
+        onDoubleClick={useCallbackRef(e => {
+          e.stopPropagation()
+          e.preventDefault()
+          diagram.send({ type: 'xyflow.paneDblClick' })
+          onCanvasDblClick?.(e as any)
+        })}
+        onNodeMouseEnter={useCallbackRef((_event, node) => {
+          _event.stopPropagation()
+          if (!node.data.hovered) {
+            diagram.send({ type: 'xyflow.nodeMouseEnter', node })
+          }
+        })}
+        onNodeMouseLeave={useCallbackRef((_event, node) => {
+          _event.stopPropagation()
+          if (node.data.hovered) {
+            diagram.send({ type: 'xyflow.nodeMouseLeave', node })
+          }
+        })}
+        onEdgeMouseEnter={useCallbackRef((_event, edge) => {
+          _event.stopPropagation()
+          if (!edge.data.hovered) {
+            diagram.send({ type: 'xyflow.edgeMouseEnter', edge })
+          }
+        })}
+        onEdgeMouseLeave={useCallbackRef((_event, edge) => {
+          _event.stopPropagation()
+          if (edge.data.hovered) {
+            diagram.send({ type: 'xyflow.edgeMouseLeave', edge })
+          }
+        })}
+        {...props.pannable && {
+          onMove,
+        }}
+        onMoveEnd={onMoveEnd}
+        onInit={useCallbackRef((instance) => {
+          diagram.send({ type: 'xyflow.init', instance })
+        })}
+        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,
+        }}
+        nodesDraggable={notReadOnly && nodesDraggable}
+        nodesSelectable={nodesSelectable}
+        {...(notReadOnly && nodesDraggable && layoutConstraints)}
+        {...props}
+        {...reactFlowProps}>
+        {children}
+      </BaseXYFlow>
       <DiagramUI key={'DiagramUI'} />
-      {children}
-    </BaseXYFlow>
+    </>
   )
-}, compareProps)
-LikeC4DiagramXYFlow.displayName = 'LikeC4DiagramXYFlow'
+}