@likec4/diagram 1.18.0 → 1.19.0

package/src/ui/DiagramTitlePanel.tsx

@@ -11,14 +11,14 @@ const selector = (s: DiagramState) => ({
   id: s.view.id,
   title: s.view.title ?? 'untitled',
   description: s.view.description,
-  links: s.view.links
+  links: s.view.links,
 })
 
 export default function DiagramTitlePanel() {
   const { id, title, description, links } = useDiagramState(selector)
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: 'diagram-title-webview-collapsed',
-    defaultValue: false
+    defaultValue: false,
   })
   const toggle = () => setCollapsed(v => !v)
 
@@ -46,11 +46,11 @@ export default function DiagramTitlePanel() {
         animate={{ opacity: 1, scale: 1 }}
         exit={{
           opacity: 0.05,
-          scale: 0.6
+          scale: 0.6,
         }}
         className={clsx('react-flow__panel', css.container)}
         style={{
-          transformOrigin: 'left center'
+          transformOrigin: 'left center',
         }}
       >
         <Card
@@ -116,7 +116,7 @@ export default function DiagramTitlePanel() {
                   fw={500}
                   c={'dimmed'}
                   style={{
-                    userSelect: 'all'
+                    userSelect: 'all',
                   }}>
                   <span style={{ userSelect: 'none' }}>id:{' '}</span>
                   {id}
@@ -152,7 +152,7 @@ export default function DiagramTitlePanel() {
                   gap={3}
                   justify="stretch"
                   align="stretch">
-                  {links.map((link) => <Link link={link} />)}
+                  {links.map((link) => <Link link={link} key={link.url} />)}
                 </Stack>
               )}
             </>

package/src/utils/types.ts

@@ -0,0 +1,6 @@
+import type { Edge, Node } from '@xyflow/react'
+import type { Merge } from 'type-fest'
+
+export type AddNodeData<T extends Node, Data> = Omit<T, 'data'> & { data: Merge<T['data'], Data> }
+
+export type AddEdgeData<T extends Edge, Data> = Omit<T, 'data'> & { data: Merge<T['data'], Data> }

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -5,7 +5,7 @@ import { getBoundsOfRects, getViewportForBounds } from '@xyflow/system'
 import { useUpdateEffect } from '../hooks'
 import { useDiagramState, useDiagramStoreApi } from '../hooks/useDiagramState'
 import { MinZoom } from './const'
-import type { XYFlowEdge, XYFlowNode } from './types'
+import type { DiagramFlowTypes } from './types'
 import { nodeToRect } from './utils'
 
 export function SelectEdgesOnNodeFocus() {
@@ -22,8 +22,8 @@ export function SelectEdgesOnNodeFocus() {
       return
     }
 
-    const edgeChanges = [] as EdgeChange<XYFlowEdge>[]
-    const nodeChanges = [] as NodeChange<XYFlowNode>[]
+    const edgeChanges = [] as EdgeChange<DiagramFlowTypes.Edge>[]
+    const nodeChanges = [] as NodeChange<DiagramFlowTypes.Node>[]
     const {
       edgeLookup,
       nodeLookup,

package/src/xyflow/XYFlow.tsx

@@ -8,9 +8,9 @@ import { MaxZoom, MinZoom } from './const'
 import { RelationshipEdge } from './edges/RelationshipEdge'
 import { CompoundNode } from './nodes/compound'
 import { ElementNode } from './nodes/element'
-import { XYFlowEdge, XYFlowNode } from './types'
 import { useLayoutConstraints } from './useLayoutConstraints'
 import { useXYFlowEvents } from './useXYFlowEvents'
+import type { DiagramFlowTypes } from './types'
 
 const nodeTypes = {
   element: ElementNode,
@@ -117,7 +117,7 @@ export function XYFlow({
   // }, [])
 
   return (
-    <ReactFlow<XYFlowNode, XYFlowEdge>
+    <ReactFlow<DiagramFlowTypes.Node, DiagramFlowTypes.Edge>
       className={className}
       style={style}
       {...colorMode && { colorMode }}

package/src/xyflow/edges/EdgeLabel.tsx

@@ -1,8 +1,8 @@
-import { extractStep, isStepEdgeId, type ViewId } from '@likec4/core'
+import { type ViewId, extractStep, isStepEdgeId } from '@likec4/core'
 import {
+  type BoxProps,
   ActionIcon,
   Box,
-  type BoxProps,
   Button,
   CloseButton,
   Group,
@@ -11,7 +11,7 @@ import {
   PopoverTarget,
   ScrollAreaAutosize,
   Stack,
-  Text
+  Text,
 } from '@mantine/core'
 import { useDebouncedEffect } from '@react-hookz/web'
 import { IconZoomScan } from '@tabler/icons-react'
@@ -21,21 +21,21 @@ import { type PropsWithChildren, type ReactNode, useState } from 'react'
 import { isTruthy } from 'remeda'
 import { useDiagramState, useDiagramStoreApi, useMantinePortalProps } from '../../hooks'
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
-import type { RelationshipData } from '../types'
+import type { DiagramFlowTypes } from '../types'
 import { stopPropagation } from '../utils'
 import * as edgesCss from './edges.css'
 import { RelationshipsDropdownMenu } from './RelationshipsDropdownMenu'
 
 export interface EdgeLabelProps extends Omit<BoxProps, 'label'> {
   isDimmed: boolean
-  edgeData: RelationshipData
+  edgeData: DiagramFlowTypes.DiagramEdgeData
 }
 
 export const EdgeLabel = ({
   isDimmed,
   edgeData: {
     label,
-    edge
+    edge,
   },
   ...props
 }: EdgeLabelProps) => {
@@ -43,11 +43,11 @@ export const EdgeLabel = ({
   const {
     enableRelationshipDetails,
     isActiveWalkthroughStep,
-    hasOnNavigateTo
+    hasOnNavigateTo,
   } = useDiagramState(s => ({
     enableRelationshipDetails: s.enableRelationshipDetails,
     isActiveWalkthroughStep: s.activeWalkthrough?.stepId === edge.id,
-    hasOnNavigateTo: !!s.onNavigateTo
+    hasOnNavigateTo: !!s.onNavigateTo,
   }))
   const notes = isActiveWalkthroughStep ? (edge.notes ?? null) : null
   const stepNum = isStepEdgeId(edge.id) ? extractStep(edge.id) : null
@@ -79,13 +79,20 @@ export const EdgeLabel = ({
               {stepNum}
             </Box>
           )}
-          {isTruthy(label?.text) && (
-            <Text component="div" className={edgesCss.edgeLabelText} lineClamp={5}>
-              {label.text}
-            </Text>
-          )}
-          {navigateTo && <NavigateToBtn viewId={navigateTo} />}
-        </Box>
+          <Stack gap={4} align="center">
+            {isTruthy(label?.text) && (
+              <Text component="div" className={edgesCss.edgeLabelText} lineClamp={5}>
+                {label.text}
+              </Text>
+            )}
+            {isTruthy(edge.technology) && (
+              <Text component="div" className={edgesCss.edgeLabelTechnology}>
+                {'[ ' + edge.technology + ' ]'}
+              </Text>
+            )}
+            {navigateTo && <NavigateToBtn viewId={navigateTo} />}
+          </Stack>
+        </Box>,
       )}
     </EdgeLabelRenderer>
   )
@@ -95,11 +102,11 @@ const NotePopover = ({ notes, children }: PropsWithChildren<{ notes: string }>)
   const {
     nextDynamicStep,
     hasNext,
-    hasPrevious
+    hasPrevious,
   } = useDiagramState(s => ({
     nextDynamicStep: s.nextDynamicStep,
     hasNext: s.activeWalkthrough?.hasNext ?? false,
-    hasPrevious: s.activeWalkthrough?.hasPrevious ?? false
+    hasPrevious: s.activeWalkthrough?.hasPrevious ?? false,
   }))
 
   const [isOpened, setIsOpened] = useState(false)
@@ -110,7 +117,7 @@ const NotePopover = ({ notes, children }: PropsWithChildren<{ notes: string }>)
       setIsOpened(true)
     },
     [],
-    300
+    300,
   )
 
   return (

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -20,11 +20,11 @@ import { useXYStoreApi } from '../../hooks/useXYFlow'
 import { vector, VectorImpl } from '../../utils/vector'
 import { ZIndexes } from '../const'
 import { EdgeMarkers, type EdgeMarkerType } from '../EdgeMarkers'
-import { type XYFlowEdge } from '../types'
 import { bezierControlPoints } from '../utils'
 import { EdgeLabel } from './EdgeLabel'
 import * as edgesCss from './edges.css'
 import { getNodeIntersectionFromCenterToPoint } from './utils'
+import type { DiagramFlowTypes } from '../types'
 // import { getEdgeParams } from './utils'
 
 // function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size = 8): string {
@@ -115,7 +115,9 @@ const sameControlPoints = (a: XYPosition[] | null, b: XYPosition[] | null) => {
   return a.every((ap, i) => isSamePoint(ap, b[i]!))
 }
 
-const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>) => (
+type DiagramEdgeProps = EdgeProps<DiagramFlowTypes.Edge>
+
+const isEqualProps = (prev: DiagramEdgeProps, next: DiagramEdgeProps) => (
   prev.id === next.id
   && eq(prev.source, next.source)
   && eq(prev.target, next.target)
@@ -134,7 +136,7 @@ const curve = d3line<XYPosition>()
   .x(d => d.x)
   .y(d => d.y)
 
-export const RelationshipEdge = memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
+export const RelationshipEdge = memo<DiagramEdgeProps>(function RelationshipEdgeR({
   id,
   data,
   sourceX,

package/src/xyflow/edges/RelationshipsDropdownMenu.tsx

@@ -22,8 +22,8 @@ import { forwardRef, Fragment, type MouseEventHandler, type PropsWithChildren, u
 import { filter, isTruthy, map, partition, pick, pipe } from 'remeda'
 import { useDiagramState, useDiagramStoreApi, useMantinePortalProps, useXYNodesData } from '../../hooks'
 import { Link } from '../../ui/Link'
-import type { RelationshipData } from '../types'
 import * as css from './RelationshipsDropdownMenu.css'
+import type { DiagramFlowTypes } from '../types'
 
 const stopPropagation: MouseEventHandler = (e) => e.stopPropagation()
 
@@ -44,7 +44,7 @@ export function RelationshipsDropdownMenu({
   likec4model,
   children
 }: PropsWithChildren<{
-  edge: RelationshipData['edge']
+  edge: DiagramFlowTypes.DiagramEdgeData['edge']
   disabled?: boolean | undefined
   likec4model: LikeC4Model
 }>) {
@@ -157,7 +157,7 @@ const Relationship = forwardRef<
   HTMLDivElement,
   StackProps & {
     relationship: LikeC4Model.AnyRelation
-    edge: RelationshipData['edge']
+    edge: DiagramFlowTypes.DiagramEdgeData['edge']
     sourceNode: DiagramNode
     targetNode: DiagramNode
   }

package/src/xyflow/edges/edges.css.ts

@@ -1,6 +1,6 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { mantine, vars, xyvars } from '../../theme-vars'
+import { mantine, transitions, vars, xyvars } from '../../theme-vars'
 
 const mixColor = createVar('mix-color')
 
@@ -11,16 +11,16 @@ export const container = style({
     [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
     [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 40%)`,
     [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 40%)`,
-    [xyvars.edge.strokeWidth]: '3'
-  }
+    [xyvars.edge.strokeWidth]: '3',
+  },
 })
 
 globalStyle(`:where([data-mantine-color-scheme="dark"]) ${container}`, {
   vars: {
     [mixColor]: `white`,
     [xyvars.edge.labelColor]: vars.relation.labelColor,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
-  }
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`,
+  },
 })
 
 const isSelected = '.react-flow__edge.selected'
@@ -28,29 +28,29 @@ const isSelected = '.react-flow__edge.selected'
 globalStyle(`:where(${isSelected}) ${container}`, {
   vars: {
     [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
-    [xyvars.edge.strokeWidth]: '3'
-  }
+    [xyvars.edge.strokeWidth]: '3',
+  },
 })
 
 globalStyle(`${container}:is([data-edge-hovered='true'],[data-edge-active='true'])`, {
   vars: {
     // [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
     [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
-    [xyvars.edge.strokeWidth]: '3'
-  }
+    [xyvars.edge.strokeWidth]: '3',
+  },
 })
 
 globalStyle(`:where(${isSelected}) ${container}[data-edge-hovered='true']`, {
   vars: {
-    [xyvars.edge.strokeWidth]: '4'
-  }
+    [xyvars.edge.strokeWidth]: '4',
+  },
 })
 
 globalStyle(`.likec4-diagram .react-flow__edges > svg`, {
-  mixBlendMode: 'plus-lighter'
+  mixBlendMode: 'plus-lighter',
 })
 globalStyle(`:where([data-mantine-color-scheme="light"]) .likec4-diagram .react-flow__edges > svg`, {
-  mixBlendMode: 'screen'
+  mixBlendMode: 'screen',
 })
 
 export const dimmed = style({})
@@ -60,7 +60,7 @@ globalStyle(`.likec4-diagram .react-flow__edges > svg:has(${dimmed})`, {
   transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
   transitionDelay: '200ms',
   filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-  willChange: 'opacity, filter'
+  willChange: 'opacity, filter',
 })
 
 export const edgePathBg = style({
@@ -74,15 +74,15 @@ export const edgePathBg = style({
   selectors: {
     [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
       strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8)`,
-      strokeOpacity: 0.15
-    }
-  }
+      strokeOpacity: 0.15,
+    },
+  },
 })
 
 // To fix issue with marker not inheriting color from path - we need to create container
 export const markerContext = style({
   fill: xyvars.edge.stroke,
-  stroke: xyvars.edge.stroke
+  stroke: xyvars.edge.stroke,
 })
 
 export const controlPoint = style({
@@ -96,7 +96,7 @@ export const controlPoint = style({
   ':hover': {
     stroke: mantine.colors.primaryColors.filledHover,
     strokeWidth: 9,
-    transition: 'stroke 100ms ease-out, stroke-width 100ms ease-out'
+    transition: 'stroke 100ms ease-out, stroke-width 100ms ease-out',
   },
   selectors: {
     [`:where(${isSelected}, [data-edge-hovered='true']) &`]: {
@@ -104,26 +104,26 @@ export const controlPoint = style({
       transition: 'fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out',
       transitionDelay: '50ms',
       fillOpacity: 1,
-      strokeWidth: 5
-    }
-  }
+      strokeWidth: 5,
+    },
+  },
 })
 
 export const controlDragging = style({
-  cursor: 'grabbing'
+  cursor: 'grabbing',
 })
 
 globalStyle(`${controlDragging} *`, {
-  cursor: 'grabbing !important'
+  cursor: 'grabbing !important',
 })
 
 const strokeKeyframes = keyframes({
   'from': {
-    strokeDashoffset: 18 * 2 + 10
+    strokeDashoffset: 18 * 2 + 10,
   },
   'to': {
-    strokeDashoffset: 10
-  }
+    strokeDashoffset: 10,
+  },
 })
 
 export const cssEdgePath = style({
@@ -136,20 +136,20 @@ export const cssEdgePath = style({
     [`:where([data-edge-hovered='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '450ms',
-      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out'
+      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
     },
     [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '0ms',
-      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out'
+      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
     },
     [`:where([data-edge-dir='back']) &`]: {
-      animationDirection: 'reverse'
+      animationDirection: 'reverse',
     },
     [`${dimmed} &`]: {
-      animationPlayState: 'paused'
-    }
-  }
+      animationPlayState: 'paused',
+    },
+  },
 })
 
 const labelBorderRadius = 2
@@ -167,12 +167,12 @@ export const stepEdgeNumber = style({
   fontVariantNumeric: 'tabular-nums',
   selectors: {
     [`:where([data-mantine-color-scheme="dark"]) :where([data-likec4-color="gray"]) &`]: {
-      backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 15%)`
+      backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 15%)`,
     },
     [`:where([data-edge-active='true']) &`]: {
-      backgroundColor: 'transparent'
-    }
-  }
+      backgroundColor: 'transparent',
+    },
+  },
 })
 
 export const varLabelX = createVar('label-x')
@@ -197,43 +197,50 @@ export const edgeLabel = style({
   borderRadius: labelBorderRadius,
   transform: varTranslate,
   vars: {
-    [varTranslate]: `translate(${fallbackVar(varLabelX, '-50%')}, ${fallbackVar(varLabelY, '-50%')})`
+    [varTranslate]: `translate(${fallbackVar(varLabelX, '-50%')}, ${fallbackVar(varLabelY, '-50%')})`,
   },
   selectors: {
     '&[data-edge-hovered="true"]': {
       transition: 'all 140ms ease-in-out',
-      transform: `${varTranslate} scale(1.12)`
+      transform: `${varTranslate} scale(1.12)`,
     },
     [`&:has(${stepEdgeNumber})`]: {
       padding: 0,
-      gap: 2
+      gap: 2,
     },
     [`&:is(${dimmed})`]: {
       opacity: 0.3,
       transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
       transitionDelay: '200ms',
       filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-      willChange: 'opacity, filter'
-    }
-  }
+      willChange: 'opacity, filter',
+    },
+  },
 })
 
 export const edgeLabelText = style({
-  textAlign: 'center',
   whiteSpaceCollapse: 'preserve-breaks',
   fontSize: rem(14),
-  lineHeight: 1.185
+  lineHeight: 1.185,
+})
+
+export const edgeLabelTechnology = style({
+  textAlign: 'center',
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: rem(11),
+  lineHeight: 1,
+  opacity: 0.75,
 })
 
 globalStyle(`${edgeLabel}:has(${stepEdgeNumber}) ${edgeLabelText}`, {
-  padding: '2px 5px 4px 2px'
+  padding: '2px 5px 4px 2px',
 })
 
 export const edgeNoteCloseButton = style({
   position: 'absolute',
   top: 4,
   right: 4,
-  zIndex: 9
+  zIndex: 9,
 })
 
 export const edgeNoteText = style({
@@ -243,52 +250,39 @@ export const edgeNoteText = style({
   textWrap: 'pretty',
   lineHeight: 1.25,
   vars: {
-    '--text-fz': mantine.fontSizes.sm
+    '--text-fz': mantine.fontSizes.sm,
   },
   '@media': {
     [mantine.largerThan('md')]: {
       vars: {
-        '--text-fz': mantine.fontSizes.md
-      }
-    }
-  }
+        '--text-fz': mantine.fontSizes.md,
+      },
+    },
+  },
 })
 
 export const cssNavigateBtn = style({
   zIndex: 'calc(var(--layer-overlays, 1) + 1)',
-  position: 'absolute',
   pointerEvents: 'all',
-  left: '50%',
-  top: 'calc(100% + 1px)',
   color: xyvars.edge.labelColor,
   cursor: 'pointer',
-  transformOrigin: 'top center',
-  opacity: 0.8,
-  transition: 'all 150ms ease-in-out',
-  transform: 'translate(-50%, 0)',
-  transitionDelay: '0ms',
+  opacity: 1,
+  transition: transitions.fast,
   backgroundColor: 'var(--ai-bg)',
   vars: {
     '--ai-bg': vars.relation.labelBgColor,
-    '--ai-hover': `color-mix(in srgb , ${vars.relation.labelBgColor}, ${mixColor} 10%)`
-  },
-  selectors: {
-    [`:is(${dimmed}) &`]: {
-      display: 'none'
-    }
+    '--ai-hover': `color-mix(in srgb , ${vars.relation.labelBgColor}, ${mixColor} 10%)`,
   },
   ':hover': {
-    boxShadow: mantine.shadows.lg,
-    transform: 'translate(-50%, 0) scale(1.3)',
-    opacity: 1
+    transform: 'translateY(1px) scale(1.15)',
   },
   ':active': {
-    transform: 'translate(-50%, 0) scale(1.02)'
-  }
+    transform: 'translateY(-1px) scale(0.9)',
+  },
 })
 globalStyle(`${cssNavigateBtn} .tabler-icon`, {
-  width: '75%',
-  height: '75%',
-  strokeWidth: 2
+  width: '80%',
+  height: '80%',
+  strokeWidth: 2,
 })
 export const cssNavigateBtnIcon = style({})

package/src/xyflow/edges/utils.ts

@@ -1,8 +1,8 @@
 import { Position, type XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
-import type { InternalXYFlowNode } from '../types'
+import type { DiagramFlowTypes } from '../types'
 
-export function getNodeCenter(node: InternalXYFlowNode): XYPosition {
+export function getNodeCenter(node: DiagramFlowTypes.InternalNode): XYPosition {
   const { width, height } = getNodeDimensions(node)
   const { x, y } = node.internals.positionAbsolute
 
@@ -15,7 +15,7 @@ export function getNodeCenter(node: InternalXYFlowNode): XYPosition {
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
 export function getNodeIntersectionFromCenterToPoint(
-  intersectionNode: InternalXYFlowNode,
+  intersectionNode: DiagramFlowTypes.InternalNode,
   { x: x1, y: y1 }: XYPosition
 ) {
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
@@ -47,7 +47,7 @@ export function getNodeIntersectionFromCenterToPoint(
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
-function getNodeIntersection(intersectionNode: InternalXYFlowNode, targetNode: InternalXYFlowNode): XYPosition {
+function getNodeIntersection(intersectionNode: DiagramFlowTypes.InternalNode, targetNode: DiagramFlowTypes.InternalNode): XYPosition {
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
   const {
     width: intersectionNodeWidth,
@@ -81,7 +81,7 @@ function getNodeIntersection(intersectionNode: InternalXYFlowNode, targetNode: I
 }
 
 // returns the position (top,right,bottom or right) passed node compared to the intersection point
-export function getPointPosition(node: InternalXYFlowNode, intersectionPoint: XYPosition) {
+export function getPointPosition(node: DiagramFlowTypes.InternalNode, intersectionPoint: XYPosition) {
   const n = {
     // x: node.data.element.position[0],
     // y: node.data.element.position[1],
@@ -135,7 +135,7 @@ export function getPointPosition(node: InternalXYFlowNode, intersectionPoint: XY
 }
 
 // returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
-export function getEdgeParams(source: InternalXYFlowNode, target: InternalXYFlowNode) {
+export function getEdgeParams(source: DiagramFlowTypes.InternalNode, target: DiagramFlowTypes.InternalNode) {
   const sourceIntersectionPoint = getNodeIntersection(source, target)
   const targetIntersectionPoint = getNodeIntersection(target, source)