@likec4/diagram 1.18.0 → 1.19.0

package/src/overlays/relationships-of/RelationshipsXYFlow.tsx

@@ -1,4 +1,4 @@
-import { delay, type DiagramView, type Fqn, isAncestor, type Relation } from '@likec4/core'
+import { type AbstractRelation, delay, type DiagramView, type Fqn, isAncestor } from '@likec4/core'
 import { useId } from '@mantine/hooks'
 import { useDebouncedCallback, useDeepCompareEffect, useSyncedRef } from '@react-hookz/web'
 import {
@@ -19,7 +19,7 @@ import { isNullish, map, omit, only, prop, setPath, unique } from 'remeda'
 import { useUpdateEffect } from '../../hooks'
 import { centerXYInternalNode } from '../../xyflow/utils'
 import { cssReactflowMarker } from '../Overlays.css'
-import type { XYFlowTypes } from './_types'
+import type { RelationshipsOfFlowTypes } from './_types'
 import { ZIndexes } from './use-layouted-relationships'
 import { CompoundNode } from './xyflow/CompoundNode'
 import { ElementNode } from './xyflow/ElementNode'
@@ -38,10 +38,10 @@ const edgeTypes = {
 /**
  * Root node in 'subjects' column
  */
-const findRootSubject = (nodes: XYFlowTypes.Node[]) =>
-  nodes.find((n): n is XYFlowTypes.ElementNode => n.data.column === 'subjects' && isNullish(n.parentId))
+const findRootSubject = (nodes: RelationshipsOfFlowTypes.Node[]) =>
+  nodes.find((n): n is RelationshipsOfFlowTypes.ElementNode => n.data.column === 'subjects' && isNullish(n.parentId))
 
-const resetDimmedAndHovered = (xyflow: ReactFlowInstance<XYFlowTypes.Node, XYFlowTypes.Edge>) => {
+const resetDimmedAndHovered = (xyflow: ReactFlowInstance<RelationshipsOfFlowTypes.Node, RelationshipsOfFlowTypes.Edge>) => {
   xyflow.setEdges(edges =>
     edges.map(edge => ({
       ...edge,
@@ -62,12 +62,12 @@ const resetDimmedAndHovered = (xyflow: ReactFlowInstance<XYFlowTypes.Node, XYFlo
           dimmed: false,
           hovered: false
         }
-      }) as XYFlowTypes.Node
+      }) as RelationshipsOfFlowTypes.Node
     )
   )
 }
 
-const animateEdge = (node: XYFlowTypes.Node, animated = true) => (edges: XYFlowTypes.Edge[]) => {
+const animateEdge = (node: RelationshipsOfFlowTypes.Node, animated = true) => (edges: RelationshipsOfFlowTypes.Edge[]) => {
   return edges.map(edge => {
     const isConnected = edge.source === node.id || edge.target === node.id || isAncestor(node.id, edge.source)
       || isAncestor(node.id, edge.target)
@@ -78,10 +78,10 @@ const animateEdge = (node: XYFlowTypes.Node, animated = true) => (edges: XYFlowT
   })
 }
 
-const onlyOneUnique = <T extends keyof Relation>(
-  data: XYFlowTypes.Edge['data'],
+const onlyOneUnique = <T extends keyof AbstractRelation>(
+  data: RelationshipsOfFlowTypes.Edge['data'],
   property: T
-): Relation[T] | undefined => {
+): AbstractRelation[T] | undefined => {
   return only(unique(map(data.relations, prop(property))))
 }
 
@@ -89,8 +89,8 @@ type RelationshipsXYFlowProps =
   & PropsWithChildren<{
     subjectId: Fqn
     view: DiagramView
-    nodes: XYFlowTypes.Node[]
-    edges: XYFlowTypes.Edge[]
+    nodes: RelationshipsOfFlowTypes.Node[]
+    edges: RelationshipsOfFlowTypes.Edge[]
     bounds: {
       x: number
       y: number
@@ -100,7 +100,7 @@ type RelationshipsXYFlowProps =
     viewportPadding?: number | undefined
   }>
   & Pick<
-    ReactFlowProps<XYFlowTypes.Node, XYFlowTypes.Edge>,
+    ReactFlowProps<RelationshipsOfFlowTypes.Node, RelationshipsOfFlowTypes.Edge>,
     | 'onNodeClick'
     | 'elementsSelectable'
     | 'maxZoom'
@@ -122,10 +122,10 @@ function RelationshipsXYFlowWrapped({
 }: RelationshipsXYFlowProps) {
   const id = useId()
 
-  const lastClickedNodeRef = useRef<XYFlowTypes.NonEmptyNode | null>(null)
+  const lastClickedNodeRef = useRef<RelationshipsOfFlowTypes.NonEmptyNode | null>(null)
 
-  const xyflow = useReactFlow<XYFlowTypes.Node, XYFlowTypes.Edge>()
-  const xystore = useStoreApi<XYFlowTypes.Node, XYFlowTypes.Edge>()
+  const xyflow = useReactFlow<RelationshipsOfFlowTypes.Node, RelationshipsOfFlowTypes.Edge>()
+  const xystore = useStoreApi<RelationshipsOfFlowTypes.Node, RelationshipsOfFlowTypes.Edge>()
 
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(true)
 
@@ -183,7 +183,7 @@ function RelationshipsXYFlowWrapped({
 
     // If subject node is the same, don't animate
     if (currentSubjectNode && nextSubjectNode?.data.fqn === currentSubjectNode.data.fqn) {
-      setNodes(map(nodes, setPath(['data', 'initialAnimation'], false)))
+      setNodes(map(nodes, setPath(['data', 'entering'], false)))
       setEdges(edges)
       fitview()
       return
@@ -227,7 +227,7 @@ function RelationshipsXYFlowWrapped({
               dimmed: n.data.column === 'subjects' ? 'immediate' : false
             }
             // hidden: n.data.column === 'subjects'
-          } as XYFlowTypes.Node
+          } as RelationshipsOfFlowTypes.Node
         }
         // Move existing node
         return {
@@ -242,7 +242,7 @@ function RelationshipsXYFlowWrapped({
             leaving: false,
             dimmed: false
           }
-        } as XYFlowTypes.Node
+        } as RelationshipsOfFlowTypes.Node
       }))
       setEdges(_edges.map(e => ({
         ...e,
@@ -282,7 +282,7 @@ function RelationshipsXYFlowWrapped({
         isCancelled = true
       }
     }
-    setNodes(map(nodes, setPath(['data', 'initialAnimation'], false)))
+    setNodes(map(nodes, setPath(['data', 'entering'], false)))
     setEdges(edges)
     fitview()
     return undefined
@@ -291,8 +291,8 @@ function RelationshipsXYFlowWrapped({
   return (
     <ReactFlow
       id={id}
-      defaultEdges={[] as XYFlowTypes.Edge[]}
-      defaultNodes={[] as XYFlowTypes.Node[]}
+      defaultEdges={[] as RelationshipsOfFlowTypes.Edge[]}
+      defaultNodes={[] as RelationshipsOfFlowTypes.Node[]}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       defaultMarkerColor="var(--likec4-relation-lineColor)"
@@ -344,7 +344,7 @@ function RelationshipsXYFlowWrapped({
               ...n.data,
               dimmed: n.id !== edge.source && n.id !== edge.target
             }
-          } as XYFlowTypes.Node))
+          } as RelationshipsOfFlowTypes.Node))
         )
       }}
       onEdgeMouseLeave={() => {

package/src/overlays/relationships-of/_types.ts

@@ -1,78 +1,40 @@
-import type { ComputedNode, Fqn, Relation, ViewId } from '@likec4/core'
-import type {
-  Edge as ReactFlowEdge,
-  InternalNode as ReactFlowInternalNode,
-  Node as ReactFlowNode,
-  ReactFlowInstance
-} from '@xyflow/react'
-import type { SetRequired } from 'type-fest'
+import type { AddEdgeData, AddNodeData } from '../../utils/types'
+import type { SharedFlowTypes } from '../shared/xyflow/_types'
+
+export namespace RelationshipsOfFlowTypes {
 
-export namespace XYFlowTypes {
   /**
-   * Handle in ReactFlow terms
+   * Data that is exclusive to the relationships-of overlay. It will be merged into the node types
+   * provided by SharedFlowTypes.
    */
-  export type Port = {
-    id: string
-    type: 'in' | 'out'
-  }
-
-  type NodeProps = {
+  type RelationshipsOfNodeData = {
     depth?: number
     column: 'incomers' | 'subjects' | 'outgoers'
-    fqn: Fqn
     existsInCurrentView: boolean
-    element: Pick<ComputedNode, 'color' | 'title' | 'description' | 'shape' | 'kind'>
-    ports: {
-      left: Port[]
-      right: Port[]
-    }
-    navigateTo: ViewId | null
-    hovered?: boolean
     layoutId?: string
-    leaving?: boolean
-    /**
-     * @default true
-     */
-    initialAnimation?: boolean
-    /**
-     * Whether the node is dimmed
-     * 'immediate' means that the node is dimmed without delay
-     */
-    dimmed?: 'immediate' | boolean
   }
 
-  export type ElementNode = SetRequired<ReactFlowNode<NodeProps, 'element'>, 'type'>
+  // Extend the node types provided by SharedFlowTypes with RelationshipsOfNodeData
+
+  export type ElementNode = AddNodeData<SharedFlowTypes.ElementNode, RelationshipsOfNodeData>
 
-  export type CompoundNode = SetRequired<ReactFlowNode<NodeProps, 'compound'>, 'type'>
+  export type CompoundNode = AddNodeData<SharedFlowTypes.CompoundNode, RelationshipsOfNodeData>
 
   export type NonEmptyNode = ElementNode | CompoundNode
 
-  export type EmptyNode = SetRequired<
-    ReactFlowNode<{
-      column: 'incomers' | 'subjects' | 'outgoers'
-      hovered?: boolean
-      dimmed?: boolean
-      /**
-       * @default true
-       */
-      initialAnimation?: boolean
-    }, 'empty'>,
-    'type'
-  >
+  export type EmptyNode = AddNodeData<SharedFlowTypes.EmptyNode, RelationshipsOfNodeData>
 
   export type Node = NonEmptyNode | EmptyNode
 
-  export type Edge = Omit<ReactFlowEdge, 'data' | 'type'> & {
-    data: {
-      relations: [Relation, ...Relation[]]
-      includedInCurrentView: boolean
-      hovered?: boolean
-      dimmed?: 'immediate' | boolean
-    }
-    type: 'relation'
+  /**
+   * Data that is exclusive to the relationships-of overlay. It will be merged into the edge types
+   * provided by SharedFlowTypes.
+   */
+  type RelationshipsOfEdgeData = {
+    existsInCurrentView: boolean
   }
 
-  export type Instance = ReactFlowInstance<Node, Edge>
+  // Extend the edge types provided by SharedFlowTypes with RelationshipsOfEdgeData
 
-  export type InternalNode = ReactFlowInternalNode<Node>
+  export type Edge = AddEdgeData<SharedFlowTypes.Edge, RelationshipsOfEdgeData>
 }

package/src/overlays/relationships-of/use-layouted-relationships.ts

@@ -38,7 +38,7 @@ import {
   tap
 } from 'remeda'
 import { useLikeC4Model } from '../../likec4model'
-import type { XYFlowTypes } from './_types'
+import type { RelationshipsOfFlowTypes } from './_types'
 
 const columns = ['incomers', 'subjects', 'outgoers'] as const
 type ColumnKey = typeof columns[number]
@@ -134,11 +134,11 @@ type Context = {
     outgoers: Set<Fqn>
   }
   columns: {
-    incomers: Map<Fqn, XYFlowTypes.Node>
-    subjects: Map<Fqn, XYFlowTypes.Node>
-    outgoers: Map<Fqn, XYFlowTypes.Node>
+    incomers: Map<Fqn, RelationshipsOfFlowTypes.Node>
+    subjects: Map<Fqn, RelationshipsOfFlowTypes.Node>
+    outgoers: Map<Fqn, RelationshipsOfFlowTypes.Node>
   }
-  edges: XYFlowTypes.Edge[]
+  edges: RelationshipsOfFlowTypes.Edge[]
 }
 
 const sized = (height: number = Sizes.hodeHeight) => ({
@@ -146,7 +146,7 @@ const sized = (height: number = Sizes.hodeHeight) => ({
   height
 })
 
-const graphId = (node: XYFlowTypes.Node) => ({
+const graphId = (node: RelationshipsOfFlowTypes.Node) => ({
   id: node.id,
   port: node.type === 'compound' ? `${node.id}::port` : node.id,
   body: `${node.id}`,
@@ -156,7 +156,7 @@ const graphId = (node: XYFlowTypes.Node) => ({
 function nodeData(
   element: LikeC4Model.Element,
   ctx: Context
-): Omit<XYFlowTypes.NonEmptyNode['data'], 'column'> {
+): Omit<RelationshipsOfFlowTypes.NonEmptyNode['data'], 'column'> {
   // We try to inherit style from existing diagram node
   let diagramNode = ctx.diagramNodes.get(element.id)
 
@@ -183,8 +183,8 @@ function nodeData(
     },
     navigateTo: diagramNode?.navigateTo ?? element.defaultView?.id ?? null,
     ports: {
-      left: [],
-      right: []
+      in: [],
+      out: []
     }
   }
 }
@@ -192,7 +192,7 @@ function nodeData(
 function createEmptyNode(
   column: ColumnKey,
   ctx: Context
-): XYFlowTypes.EmptyNode {
+): RelationshipsOfFlowTypes.EmptyNode {
   const id = `${column}__empty` as Fqn
   const xynodes = ctx.columns[column]
   let node = xynodes.get(id)
@@ -200,12 +200,13 @@ function createEmptyNode(
     invariant(node.type === 'empty', 'Node is not empty')
     return node
   }
-  const xynode: XYFlowTypes.EmptyNode = {
+  const xynode: RelationshipsOfFlowTypes.EmptyNode = {
     type: 'empty',
     id,
     position: { x: 0, y: 0 },
     data: {
-      column
+      column,
+      existsInCurrentView: true
     },
     zIndex: ZIndexes.empty
   }
@@ -224,11 +225,11 @@ function createEmptyNode(
 
 function createNode(
   column: ColumnKey,
-  nodeType: Exclude<XYFlowTypes.Node['type'], 'empty'>,
+  nodeType: Exclude<RelationshipsOfFlowTypes.Node['type'], 'empty'>,
   element: LikeC4Model.Element,
   ctx: Context,
   depth: number = 0
-): XYFlowTypes.ElementNode | XYFlowTypes.CompoundNode {
+): RelationshipsOfFlowTypes.ElementNode | RelationshipsOfFlowTypes.CompoundNode {
   const xynodes = ctx.columns[column]
   let node = xynodes.get(element.id)
   if (node) {
@@ -251,7 +252,7 @@ function createNode(
     found => found ? createNode(column, 'compound', found, ctx, depth + 2) : null
   )
 
-  const xynode: XYFlowTypes.NonEmptyNode = {
+  const xynode: RelationshipsOfFlowTypes.NonEmptyNode = {
     type: nodeType,
     id: `${column}::${element.id}`,
     position: { x: 0, y: 0 },
@@ -289,7 +290,7 @@ function createNode(
  * And return a function to get node bounds for xyflow
  */
 function applyDagreLayout(g: dagre.graphlib.Graph) {
-  type NodeBounds = Required<Pick<XYFlowTypes.Node, 'position' | 'width' | 'height'>>
+  type NodeBounds = Required<Pick<RelationshipsOfFlowTypes.Node, 'position' | 'width' | 'height'>>
   dagre.layout(g)
   return function nodeBounds(nodeId: string): NodeBounds {
     const { x, y, width, height } = g.node(nodeId)
@@ -307,18 +308,18 @@ function applyDagreLayout(g: dagre.graphlib.Graph) {
 function addEdge(
   ctx: Context,
   props: {
-    includedInCurrentView: boolean
+    existsInCurrentView: boolean
     source: string
     target: string
-    relations: XYFlowTypes.Edge['data']['relations']
+    relations: RelationshipsOfFlowTypes.Edge['data']['relations']
   }
 ) {
-  const { source, target, relations, includedInCurrentView } = props
+  const { source, target, relations, existsInCurrentView } = props
   const ids = relations.map(r => r.id).join('_')
   const label = only(relations)?.title ?? 'untitled'
 
   const isMultiple = relations.length > 1
-  const edge: XYFlowTypes.Edge = {
+  const edge: RelationshipsOfFlowTypes.Edge = {
     id: `rel${ctx.edges.length + 1}_${ids}`,
     type: 'relation',
     source,
@@ -326,7 +327,7 @@ function addEdge(
     sourceHandle: target,
     targetHandle: source,
     data: {
-      includedInCurrentView,
+      existsInCurrentView: existsInCurrentView,
       relations
     },
     label: isMultiple ? `${relations.length} relationships` : label,
@@ -361,8 +362,8 @@ function layout(
   viewIncludesSubject: boolean
   notIncludedRelations: number
   subject: LikeC4Model.Element
-  nodes: XYFlowTypes.Node[]
-  edges: XYFlowTypes.Edge[]
+  nodes: RelationshipsOfFlowTypes.Node[]
+  edges: RelationshipsOfFlowTypes.Edge[]
   bounds: {
     x: number
     y: number
@@ -372,6 +373,7 @@ function layout(
 } {
   const diagramNodes = new Map(view.nodes.map(n => [n.id, n]))
   const subjectElement = likec4model.element(subjectId)
+
   const viewIncludesSubject = diagramNodes.has(subjectId)
 
   const viewRelationships = new Set(
@@ -500,7 +502,7 @@ function layout(
           relation,
           source,
           target,
-          includedInCurrentView: viewRelationships.has(relation.id),
+          existsInCurrentView: viewRelationships.has(relation.id),
           id: `${source.id}:${target.id}`
         })
       })
@@ -512,14 +514,8 @@ function layout(
       const { source, target } = grouped[0]
       const relations = map(grouped, g => g.relation)
 
-      source.data.ports.right.push({
-        id: target.id,
-        type: 'out'
-      })
-      target.data.ports.left.push({
-        id: source.id,
-        type: 'in'
-      })
+      source.data.ports.out.push(target.id)
+      target.data.ports.in.push(source.id)
 
       const isAnyCompound = source.type === 'compound' || target.type === 'compound'
 
@@ -530,7 +526,7 @@ function layout(
 
       addEdge(ctx, {
         // if view does not include subject - do not highlight
-        includedInCurrentView: !viewIncludesSubject || grouped.every(g => g.includedInCurrentView),
+        existsInCurrentView: !viewIncludesSubject || grouped.every(g => g.existsInCurrentView),
         source: source.id,
         target: target.id,
         relations
@@ -555,7 +551,7 @@ function layout(
     if (subject.type !== 'element') {
       continue
     }
-    const subjectPortsCount = Math.max(subject.data.ports.left.length, subject.data.ports.right.length)
+    const subjectPortsCount = Math.max(subject.data.ports.in.length, subject.data.ports.out.length)
     if (subjectPortsCount > 2) {
       g.node(subject.id).height = Sizes.hodeHeight + (subjectPortsCount - 3) * 14
     }
@@ -628,13 +624,13 @@ function layout(
   }
 
   // Sort ports in subject vertically
-  const sortedPorts = (ports: XYFlowTypes.Port[]) => {
+  const sortedPorts = (ports: string[]) => {
     return pipe(
       ports,
       map(port => {
         return {
           port,
-          topY: nodeBounds(port.id).position.y
+          topY: nodeBounds(port).position.y
         }
       }),
       sortBy(prop('topY')),
@@ -658,11 +654,11 @@ function layout(
       continue
     }
     // Sort ports by their position
-    if (node.data.ports.left.length > 1) {
-      node.data.ports.left = sortedPorts(node.data.ports.left)
+    if (node.data.ports.in.length > 1) {
+      node.data.ports.in = sortedPorts(node.data.ports.in)
     }
-    if (node.data.ports.right.length > 1) {
-      node.data.ports.right = sortedPorts(node.data.ports.right)
+    if (node.data.ports.out.length > 1) {
+      node.data.ports.out = sortedPorts(node.data.ports.out)
     }
   }
 

package/src/overlays/relationships-of/xyflow/CompoundNode.tsx

@@ -1,17 +1,13 @@
-import { Text as MantineText } from '@mantine/core'
 import { Handle, type NodeProps, Position, useStore } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual, shallowEqual } from 'fast-equals'
 import { m } from 'framer-motion'
 import { memo, useCallback } from 'react'
-import type { XYFlowTypes } from '../_types'
+import type { RelationshipsOfFlowTypes } from '../_types'
 import * as css from './styles.css'
+import { Text } from '../../../controls/Text'
 
-const Text = MantineText.withProps({
-  component: 'div'
-})
-
-type CompoundNodeProps = NodeProps<XYFlowTypes.CompoundNode>
+type CompoundNodeProps = NodeProps<RelationshipsOfFlowTypes.CompoundNode>
 
 export const CompoundNode = memo<CompoundNodeProps>(({
   id,
@@ -20,7 +16,7 @@ export const CompoundNode = memo<CompoundNodeProps>(({
     ports,
     layoutId = id,
     leaving = false,
-    initialAnimation = true,
+    entering = true,
     ...data
   },
   width = 200,
@@ -61,7 +57,7 @@ export const CompoundNode = memo<CompoundNodeProps>(({
         layoutId={layoutId}
         data-compound-depth={data.depth ?? 1}
         data-likec4-color={element.color}
-        initial={(layoutId === id && initialAnimation)
+        initial={(layoutId === id && entering)
           ? {
             ...scale(-20),
             opacity: 0,
@@ -99,22 +95,22 @@ export const CompoundNode = memo<CompoundNodeProps>(({
           {element.title}
         </Text>
       </m.div>
-      {ports.left.map(({ id, type }, i) => (
+      {ports.in.map((id, i) => (
         <Handle
           key={id}
           id={id}
-          type={type === 'in' ? 'target' : 'source'}
+          type="target"
           position={Position.Left}
           style={{
             visibility: 'hidden',
             top: `${20 * (i + 1)}px`
           }} />
       ))}
-      {ports.right.map(({ id, type }, i) => (
+      {ports.out.map((id, i) => (
         <Handle
           key={id}
           id={id}
-          type={type === 'in' ? 'target' : 'source'}
+          type="source"
           position={Position.Right}
           style={{
             visibility: 'hidden',

package/src/overlays/relationships-of/xyflow/ElementNode.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Box, Group, Text as MantineText } from '@mantine/core'
+import { ActionIcon, Box, Group } from '@mantine/core'
 import { IconFileSymlink, IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
@@ -9,8 +9,9 @@ import { type DiagramState, useDiagramState } from '../../../hooks'
 import { ElementShapeSvg } from '../../../xyflow/nodes/element/ElementShapeSvg'
 import { stopPropagation } from '../../../xyflow/utils'
 import { useOverlayDialog } from '../../OverlayContext'
-import type { XYFlowTypes } from '../_types'
+import type { RelationshipsOfFlowTypes } from '../_types'
 import * as css from './styles.css'
+import { Text } from '../../../controls/Text'
 
 const Action = ActionIcon.withProps({
   className: 'nodrag nopan ' + css.navigateBtn,
@@ -20,11 +21,7 @@ const Action = ActionIcon.withProps({
   onPointerDownCapture: stopPropagation
 })
 
-const Text = MantineText.withProps({
-  component: 'div'
-})
-
-type ElementNodeProps = NodeProps<XYFlowTypes.ElementNode>
+type ElementNodeProps = NodeProps<RelationshipsOfFlowTypes.ElementNode>
 
 function selector(s: DiagramState) {
   return {
@@ -42,7 +39,7 @@ export const ElementNode = memo<ElementNodeProps>(({
     navigateTo,
     layoutId = id,
     leaving = false,
-    initialAnimation = true,
+    entering = true,
     ...data
   },
   selectable = true,
@@ -82,7 +79,7 @@ export const ElementNode = memo<ElementNodeProps>(({
         ])}
         layoutId={layoutId}
         data-likec4-color={element.color}
-        initial={(layoutId === id && initialAnimation)
+        initial={(layoutId === id && entering)
           ? {
             ...scale(-20),
             opacity: 0,
@@ -168,26 +165,26 @@ export const ElementNode = memo<ElementNodeProps>(({
           )}
         </Group>
       </m.div>
-      {ports.left.map(({ id, type }, i) => (
+      {ports.in.map((id, i) => (
         <Handle
           key={id}
           id={id}
-          type={type === 'in' ? 'target' : 'source'}
+          type="target"
           position={Position.Left}
           style={{
             visibility: 'hidden',
-            top: `${15 + (i + 1) * ((h - 30) / (ports.left.length + 1))}px`
+            top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
           }} />
       ))}
-      {ports.right.map(({ id, type }, i) => (
+      {ports.out.map((id, i) => (
         <Handle
           key={id}
           id={id}
-          type={type === 'in' ? 'target' : 'source'}
+          type="source"
           position={Position.Right}
           style={{
             visibility: 'hidden',
-            top: `${15 + (i + 1) * ((h - 30) / (ports.right.length + 1))}px`
+            top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
           }} />
       ))}
     </>

package/src/overlays/relationships-of/xyflow/EmptyNode.tsx

@@ -1,13 +1,10 @@
-import { Box, Text as MantineText } from '@mantine/core'
+import { Box } from '@mantine/core'
 import { type NodeProps } from '@xyflow/react'
-import type { XYFlowTypes } from '../_types'
+import type { RelationshipsOfFlowTypes } from '../_types'
 import * as css from './styles.css'
+import { Text } from '../../../controls/Text'
 
-const Text = MantineText.withProps({
-  component: 'div'
-})
-
-type EmptyNodeProps = NodeProps<XYFlowTypes.EmptyNode>
+type EmptyNodeProps = NodeProps<RelationshipsOfFlowTypes.EmptyNode>
 
 export function EmptyNode({
   data: {