@likec4/diagram 1.1.1 → 1.2.0

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -8,14 +8,13 @@ import clsx from 'clsx'
 import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { deepEqual as eq } from 'fast-equals'
 import { type CSSProperties, memo } from 'react'
-import { hasAtLeast } from 'remeda'
+import { first, hasAtLeast, last, zip } from 'remeda'
 import { useDiagramState } from '../../state'
 import { ZIndexes } from '../const'
 import { useXYStoreApi } from '../hooks'
 import { type XYFlowEdge } from '../types'
-import { toDomPrecision } from '../utils'
 import * as edgesCss from './edges.css'
-import { getEdgeParams } from './utils'
+import { getEdgeParams, getNodeIntersectionFromCenterToPoint } from './utils'
 // import { getEdgeParams } from './utils'
 
 // function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size = 8): string {
@@ -63,9 +62,9 @@ function bezierPath(bezierSpline: NonEmptyArray<Point>) {
   return path
 }
 
-// If points are within 2px, consider them the same
+// If points are within 3px, consider them the same
 const isSamePoint = (a: number, b: number) => {
-  return Math.abs(a - b) < 2.1
+  return Math.abs(a - b) < 3.1
 }
 
 const isSamePosition = (a: XYPosition, [bx, by]: Point) => {
@@ -81,10 +80,15 @@ const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>)
   && isSamePoint(prev.sourceY, next.sourceY)
   && isSamePoint(prev.targetX, next.targetX)
   && isSamePoint(prev.targetY, next.targetY)
-  && eq(prev.data, next.data)
+  && eq(prev.data.stepNum, next.data.stepNum)
+  && eq(prev.data.edge, next.data.edge)
+  && zip(prev.data.controlPoints, next.data.controlPoints).every(([a, b]) =>
+    isSamePoint(a[0], b[0]) && isSamePoint(a[1], b[1])
+  )
 )
 
-const curve = d3line<Point>().curve(curveCatmullRomOpen.alpha(1))
+const curve = d3line<Point>()
+  .curve(curveCatmullRomOpen)
 
 export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
   id,
@@ -99,14 +103,20 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   const sourceNode = nonNullable(nodeLookup.get(source)!, `source node ${source} not found`)
   const targetNode = nonNullable(nodeLookup.get(target)!, `target node ${target} not found`)
 
-  const isNotModified = isSamePosition(sourceNode.internals.positionAbsolute, sourceNode.data.element.position)
-    && isSamePosition(targetNode.internals.positionAbsolute, targetNode.data.element.position)
+  const isModified = !isSamePosition(sourceNode.internals.positionAbsolute, sourceNode.data.element.position)
+    || !isSamePosition(targetNode.internals.positionAbsolute, targetNode.data.element.position)
 
   const { edge: diagramEdge, controlPoints } = data
+
   // const edgePath = bezierPath(edge.points)
 
   const color = diagramEdge.color ?? 'gray'
-  const isHovered = useDiagramState(s => s.hoveredEdgeId === id)
+  const isStepEdge = data.stepNum !== null
+  const { isActive, isHovered, isDimmed } = useDiagramState(s => ({
+    isActive: s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum,
+    isHovered: s.hoveredEdgeId === id,
+    isDimmed: s.dimmed.has(id)
+  }))
 
   const line = diagramEdge.line ?? 'dashed'
   const isDotted = line === 'dotted'
@@ -123,8 +133,14 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
 
   let edgePath: string, labelX: number, labelY: number
 
-  if (isNotModified) {
+  if (!isModified) {
     edgePath = bezierPath(diagramEdge.points)
+    // if (diagramEdge.tailArrowPoint) {
+    //   edgePath = `M ${diagramEdge.tailArrowPoint[0]},${diagramEdge.tailArrowPoint[1]} L ${edgePath.substring(1)}`
+    // }
+    // if (diagramEdge.headArrowPoint) {
+    //   edgePath += ` L ${diagramEdge.headArrowPoint[0]},${diagramEdge.headArrowPoint[1]}`
+    // }
     labelX = data.label?.bbox.x ?? 0
     labelY = data.label?.bbox.y ?? 0
   } else {
@@ -147,28 +163,36 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
 
     edgePath = curve([
       [sourceCenterPos.positionAbsolute.x, sourceCenterPos.positionAbsolute.y],
-      [sx, sy],
+      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints)!),
       ...controlPoints,
-      [tx, ty],
+      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints)!),
       [targetCenterPos.positionAbsolute.x, targetCenterPos.positionAbsolute.y]
     ])!
   }
 
   return (
-    <g className={clsx(edgesCss.container)} data-likec4-color={color} data-edge-hovered={isHovered}>
-      <g className={clsx(edgesCss.fillStrokeCtx)}>
+    <g
+      className={clsx([
+        edgesCss.container,
+        isDimmed && edgesCss.dimmed
+      ])}
+      data-likec4-color={color}
+      data-edge-dir={diagramEdge.dir}
+      data-edge-active={isActive}
+      data-edge-hovered={isHovered}>
+      <g className={edgesCss.markerContext}>
         <defs>
           <marker
             id={`arrow-${id}`}
-            viewBox="0 0 10 8"
-            refX="0"
-            refY="4"
+            viewBox="0 0 16 10"
+            refX={isModified ? '12' : '10'}
+            refY="5"
             markerWidth="5"
-            markerHeight="5"
+            markerHeight="4"
             markerUnits="strokeWidth"
             preserveAspectRatio="xMaxYMid meet"
             orient="auto-start-reverse">
-            <path d="M 0 0 L 10 4 L 0 8 z" stroke="context-stroke" fill="context-stroke" />
+            <path d="M 0 0 L 16 5 L 0 10 z" stroke="context-stroke" fill="context-stroke" />
           </marker>
         </defs>
       </g>
@@ -179,37 +203,49 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
         markerStart={diagramEdge.tailArrow ? marker : undefined}
         markerEnd={diagramEdge.headArrow ? marker : undefined}
         style={style} />
-      {
-        /* controlPoints.map((p, i) => (
+      {isModified && controlPoints.map((p, i) => (
         <circle
           className={edgesCss.controlPoint}
           key={i}
           cx={p[0]}
           cy={p[1]}
-          r={5}
+          r={3}
         />
-      )) */
-      }
-      {data.label && (
+      ))}
+      {(data.label || isStepEdge) && (
         <EdgeLabelRenderer>
           <Box
-            className={clsx(edgesCss.container, edgesCss.edgeLabel)}
+            className={clsx([
+              edgesCss.container,
+              edgesCss.edgeLabel,
+              isDimmed && edgesCss.dimmed
+            ])}
             data-likec4-color={color}
             style={{
               ...assignInlineVars({
-                [edgesCss.varLabelX]: toDomPrecision(labelX) + 'px',
-                [edgesCss.varLabelY]: toDomPrecision(labelY) + 'px'
+                [edgesCss.varLabelX]: Math.floor(labelX) + 'px',
+                [edgesCss.varLabelY]: Math.floor(labelY) + 'px'
+              }),
+              ...(data.label && {
+                maxWidth: data.label.bbox.width + 12
               }),
-              maxWidth: data.label.bbox.width + 10,
               zIndex: edgeLookup.get(id)?.zIndex ?? ZIndexes.Edge
             }}
             mod={{
-              'data-edge-hovered': isHovered
+              'data-edge-hovered': isHovered,
+              'data-edge-active': isActive
             }}
           >
-            <Box className={edgesCss.edgeLabelBody}>
-              {data.label.text}
-            </Box>
+            {isStepEdge && (
+              <Box className={edgesCss.stepEdgeNumber}>
+                {data.stepNum}
+              </Box>
+            )}
+            {data.label?.text && (
+              <Box className={edgesCss.edgeLabelText}>
+                {data.label.text}
+              </Box>
+            )}
             {
               /* <Popover
                 position="bottom"

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

@@ -1,5 +1,5 @@
 import { rem } from '@mantine/core'
-import { createVar, generateIdentifier, globalKeyframes, globalStyle, style } from '@vanilla-extract/css'
+import { createVar, fallbackVar, generateIdentifier, globalKeyframes, globalStyle, style } from '@vanilla-extract/css'
 import { vars, xyvars } from '../../theme.css'
 
 const mixColor = createVar('mix-color')
@@ -15,6 +15,13 @@ export const container = style({
   }
 })
 
+export const dimmed = style({})
+
+globalStyle(`svg:has(${dimmed})`, {
+  filter: vars.filterDimmed,
+  transition: 'filter 800ms ease-out'
+})
+
 globalStyle(`:where([data-mantine-color-scheme="dark"]) ${container}`, {
   vars: {
     [mixColor]: `white`,
@@ -32,7 +39,7 @@ globalStyle(`:where(${isSelected}) ${container}`, {
   }
 })
 
-globalStyle(`${container}[data-edge-hovered='true']`, {
+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,
@@ -54,39 +61,46 @@ globalStyle(`:where(${isSelected}) ${container}[data-edge-hovered='true']`, {
 globalStyle(`.react-flow__edges > svg`, {
   mixBlendMode: 'screen'
 })
-globalStyle(`:where([data-mantine-color-scheme="dark"]) .react-flow__edges > svg`, {
-  mixBlendMode: 'lighten'
-})
+// globalStyle(`:where([data-mantine-color-scheme="dark"]) .react-flow__edges > svg`, {
+//   mixBlendMode: 'lighten'
+// })
 
 export const edgePathBg = style({
   strokeWidth: xyvars.edge.strokeWidth,
-  strokeOpacity: 0.05,
+  strokeOpacity: 0.08,
   // transition: 'stroke-width 175ms ease-in-out',
   // transition: 'stroke-width 175ms ease-in-out, stroke-opacity 150ms ease-out',
   transitionProperty: 'stroke-width, stroke-opacity',
   transitionDuration: '155ms',
   transitionTimingFunction: 'ease-out',
   selectors: {
-    [`:where(${isSelected}, [data-edge-hovered='true']) &`]: {
+    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
       strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8px)`,
-      strokeOpacity: 0.11
+      strokeOpacity: 0.15
     }
   }
 })
 
-export const fillStrokeCtx = style({
+// 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,
+  pointerEvents: 'none'
 })
 
 export const controlPoint = style({
   fill: xyvars.edge.stroke,
-  stroke: xyvars.edge.stroke
-})
-
-globalStyle(`:where(${isSelected}) ${fillStrokeCtx}`, {
-  vars: {
-    [xyvars.edge.stroke]: xyvars.edge.strokeSelected
+  stroke: xyvars.edge.stroke,
+  fillOpacity: 0.75,
+  strokeWidth: 1,
+  cursor: 'grab',
+  pointerEvents: 'visible',
+  selectors: {
+    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
+      transition: 'all 150ms ease-out',
+      fillOpacity: 1,
+      strokeWidth: 3
+    }
   }
 })
 
@@ -107,13 +121,16 @@ export const cssEdgePath = style({
   selectors: {
     [`:where([data-edge-hovered='true']) &`]: {
       animationName: strokeKeyframes,
-      animationDelay: '500ms',
+      animationDelay: '350ms',
       transition: 'all 130ms ease-out'
     },
-    [`:where(${isSelected}) &`]: {
+    [`:where(${isSelected}, [data-edge-active='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '0ms',
       transition: 'all 130ms ease-out'
+    },
+    [`:where([data-edge-dir='back']) &`]: {
+      animationDirection: 'reverse'
     }
   }
 })
@@ -131,35 +148,52 @@ export const edgeLabel = style({
   pointerEvents: 'all',
   cursor: 'pointer',
   transformOrigin: '50% 50%',
-  textAlign: 'left',
   mixBlendMode: 'screen',
-  padding: '2px 6px 4px 6px',
-  width: 'max-content',
+  color: xyvars.edge.labelColor,
   backgroundColor: xyvars.edge.labelBgColor,
   borderRadius: '3px',
   transform: varTranslate,
-  backfaceVisibility: 'hidden',
   vars: {
-    // [varTranslate]: `translate(calc(${varLabelX} - 50%), calc(${varLabelY} - 50%))`,
-    [varTranslate]: `translate(${varLabelX}, ${varLabelY})`,
-    [varLabelX]: '50%',
-    [varLabelY]: '50%'
+    [varTranslate]: `translate(${fallbackVar(varLabelX, '50%')}, ${fallbackVar(varLabelY, '50%')})`
   },
   selectors: {
-    // [mantine.darkSelector]: {
-    //   mixBlendMode: 'luminosity'
-    // },
     '&[data-edge-hovered="true"]': {
       transition: 'all 140ms ease-out',
       transform: `${varTranslate} scale(1.1)`
+    },
+    [`&:is(${dimmed})`]: {
+      transition: 'filter 800ms ease-out',
+      filter: vars.filterDimmed
     }
   }
 })
 
-export const edgeLabelBody = style({
-  // display: 'inline',
-  color: xyvars.edge.labelColor,
+export const stepEdgeNumber = style({
+  position: 'absolute',
+  top: -2,
+  left: -2,
+  fontWeight: 500,
+  fontSize: rem(16),
+  lineHeight: 0.9,
+  padding: '4px 6px',
+  borderRadius: 99999,
+  textAlign: 'center',
+  minWidth: 22,
+  backgroundColor: xyvars.edge.labelBgColor,
+  transition: 'all 120ms ease-out',
+  transform: 'translateX(-100%)',
+  fontVariantNumeric: 'tabular-nums',
+  selectors: {
+    ':where([data-edge-hovered="true"],[data-edge-active="true"]) &': {
+      fontWeight: 600,
+      backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 5%)`
+    }
+  }
+})
+
+export const edgeLabelText = style({
+  padding: '2px 6px 4px 6px',
+  textAlign: 'left',
   fontSize: rem(12.5),
-  lineHeight: 1.12,
-  transition: 'color 120ms ease-out'
+  lineHeight: 1.2
 })

package/src/xyflow/edges/utils.ts

@@ -1,7 +1,38 @@
+import type { Point } from '@likec4/core'
 import { Position, type XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import type { InternalXYFlowNode } from '../types'
 
+// 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, [x1, y1]: Point) {
+  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
+  const {
+    width: intersectionNodeWidth,
+    height: intersectionNodeHeight
+  } = getNodeDimensions(intersectionNode)
+
+  const intersectionNodePosition = intersectionNode.internals.positionAbsolute
+
+  const w = intersectionNodeWidth / 2
+  const h = intersectionNodeHeight / 2
+
+  const x2 = intersectionNodePosition.x + w
+  const y2 = intersectionNodePosition.y + h
+  // const x1 = targetPoint.x
+  // const y1 = targetPoint.y
+
+  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h)
+  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h)
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1))
+  const xx3 = a * xx1
+  const yy3 = a * yy1
+  const x = w * (xx3 + yy3) + x2
+  const y = h * (-xx3 + yy3) + y2
+
+  return [x, y] as const
+}
+
 // 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 {

package/src/xyflow/nodes/compound/CompoundNode.css.ts

@@ -11,6 +11,11 @@ export const container = style({
   margin: 0
 })
 
+export const dimmed = style({
+  filter: vars.filterDimmed,
+  transition: 'filter 800ms ease-out'
+})
+
 export const varTransparency = createVar('transparency')
 
 const outlineColor = fallbackVar(
@@ -71,8 +76,7 @@ export const transparent = style({
       vars: {
         [bgTransparencyDelta]: '15%'
       }
-    },
-
+    }
   }
 })
 

package/src/xyflow/nodes/compound/CompoundNode.tsx

@@ -37,15 +37,17 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
   // const h = toDomPrecision(height ?? compound.height)
   const opacity = style.opacity ?? 100
 
-  const { isHovered, hasOnNavigateTo } = useDiagramState(s => ({
+  const { isHovered, isDimmed, hasOnNavigateTo } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
+    isDimmed: s.dimmed.has(id),
     hasOnNavigateTo: !!s.onNavigateTo
   }))
   const isnavigable = !!compound.navigateTo && hasOnNavigateTo
 
+  // invert opacity to transparency
   const transparency = clamp(100 - opacity, {
     min: 0,
-    max: 98
+    max: 99
   })
 
   return (
@@ -53,7 +55,8 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
       className={clsx(
         css.container,
         'likec4-compound-node',
-        opacity < 100 && 'likec4-compound-transparent'
+        opacity < 100 && 'likec4-compound-transparent',
+        isDimmed && css.dimmed
       )}
       mod={{
         'compound-depth': depth,

package/src/xyflow/nodes/element/ElementLink.tsx

@@ -68,7 +68,10 @@ export function ElementLink({
             <span>links</span>
           </UnstyledButton>
         </HoverCardTarget>
-        <HoverCardDropdown onClick={e => e.stopPropagation()} p={'xs'}>
+        <HoverCardDropdown
+          onPointerDownCapture={e => e.stopPropagation()}
+          onClick={e => e.stopPropagation()}
+          p={'xs'}>
           <Stack gap={'xs'}>
             {element.links.map((link) => (
               <Group key={link} wrap="nowrap" gap={'sm'}>
@@ -79,8 +82,15 @@ export function ElementLink({
                 </Box>
                 <CopyButton value={link}>
                   {({ copied, copy }) => (
-                    <Button size="compact-xs" fz={'12'} onClick={copy} color={copied ? 'teal' : 'gray'}>
-                      {copied ? 'Copied' : 'Copy'}
+                    <Button
+                      size="compact-xs"
+                      fz={'10'}
+                      variant="light"
+                      onClick={copy}
+                      color={copied
+                        ? 'teal'
+                        : 'gray'}>
+                      {copied ? 'copied' : 'copy'}
                     </Button>
                   )}
                 </CopyButton>

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -7,16 +7,7 @@ import { useDiagramState } from '../../../state'
 import type { ElementXYFlowNode } from '../../types'
 import { toDomPrecision } from '../../utils'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
-import {
-  container,
-  cssElement,
-  cssNavigateBtn,
-  cssShapeSvg,
-  description as cssdescription,
-  indicator,
-  technology as csstechnology,
-  title as cssTitle
-} from './element.css'
+import * as css from './element.css'
 import { ElementIcon } from './ElementIcon'
 import { ElementLink } from './ElementLink'
 import { ElementShapeSvg, SelectedIndicator } from './ElementShapeSvg'
@@ -38,6 +29,13 @@ const variants = {
       delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
     }
   }),
+  // dimmed: {
+  //   filter: 'brightness(0.5)',
+  //   transition: {
+  //     duration: 0.8,
+  //     ease: 'easeInOut',
+  //   }
+  // },
   // dragging: {
   //   scale: selectedScale
   // },
@@ -76,8 +74,9 @@ export function ElementNode({
   width,
   height
 }: ElementNodeProps) {
-  const { isHovered, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
+  const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
+    isDimmed: s.dimmed.has(id),
     isInteractive: s.nodesDraggable || s.nodesSelectable || !!s.onNavigateTo,
     isHovercards: s.showElementLinks,
     hasOnNavigateTo: !!s.onNavigateTo
@@ -112,7 +111,11 @@ export function ElementNode({
   return (
     <motion.div
       id={id}
-      className={clsx(container, 'likec4-element-node')}
+      className={clsx([
+        css.container,
+        isDimmed && css.dimmed,
+        'likec4-element-node'
+      ])}
       data-likec4-color={element.color}
       data-likec4-shape={element.shape}
       variants={variants}
@@ -162,12 +165,14 @@ export function ElementNode({
         style={{ visibility: 'hidden' }}
       />
       <svg
-        className={cssShapeSvg}
+        className={clsx(
+          css.cssShapeSvg
+        )}
         viewBox={`0 0 ${w} ${h}`}
         width={w}
         height={h}
       >
-        <g className={indicator}>
+        <g className={css.indicator}>
           <SelectedIndicator
             shape={element.shape}
             w={w}
@@ -180,24 +185,24 @@ export function ElementNode({
           h={h}
         />
       </svg>
-      <div className={clsx(cssElement, 'likec4-element')}>
+      <div className={clsx(css.element, 'likec4-element')}>
         {element.icon && <ElementIcon node={element} />}
         <Text
           component="div"
-          className={clsx(cssTitle, 'likec4-element-title')}>
+          className={clsx(css.title, 'likec4-element-title')}>
           {element.title}
         </Text>
         {element.technology && (
           <Text
             component="div"
-            className={clsx(csstechnology, 'likec4-element-technology')}>
+            className={clsx(css.technology, 'likec4-element-technology')}>
             {element.technology}
           </Text>
         )}
         {element.description && (
           <Text
             component="div"
-            className={clsx(cssdescription, 'likec4-element-description')}>
+            className={clsx(css.description, 'likec4-element-description')}>
             {element.description}
           </Text>
         )}
@@ -219,7 +224,7 @@ export function ElementNode({
       ))} */
       }
       {isHovercards && element.links && <ElementLink element={element} />}
-      {isNavigable && <NavigateToBtn xynodeId={id} className={cssNavigateBtn} />}
+      {isNavigable && <NavigateToBtn xynodeId={id} className={css.cssNavigateBtn} />}
     </motion.div>
   )
 }

package/src/xyflow/nodes/element/element.css.ts

@@ -19,6 +19,13 @@ export const container = style({
   }
 })
 
+export const dimmed = style({})
+
+globalStyle(`.react-flow__node:has(${dimmed})`, {
+  filter: vars.filterDimmed,
+  transition: 'filter 800ms ease-out'
+})
+
 const indicatorKeyframes = generateIdentifier('indicator')
 globalKeyframes(indicatorKeyframes, {
   'from': {
@@ -92,7 +99,7 @@ export const description = style({
   fontStyle: 'normal',
   fontWeight: 400,
   fontSize: rem(14),
-  lineHeight: 1.125,
+  lineHeight: 1.25,
   textAlign: 'center',
   textWrap: 'pretty',
   color: vars.element.loContrast,
@@ -120,7 +127,7 @@ export const technology = style({
   }
 })
 
-export const cssElement = style({
+export const element = style({
   position: 'relative',
   width: '100%',
   height: '100%',

package/src/xyflow/nodes/shared/NavigateToBtn.tsx

@@ -14,6 +14,7 @@ export function NavigateToBtn({ xynodeId, className }: NavigateToBtnProps) {
     <ActionIcon
       className={clsx('nodrag nopan', className)}
       radius="xl"
+      onPointerDownCapture={e => e.stopPropagation()}
       onClick={event => {
         event.stopPropagation()
         diagramApi.getState().triggerOnNavigateTo(xynodeId, event)

package/src/xyflow/types.ts

@@ -24,6 +24,10 @@ type TypedXYFlowNode<D extends Record<string, unknown>, T extends string> = SetR
   SetRequired<Node<D, T>, 'type'>,
   'id' | 'type'
 >
+type TypedXYFlowEdge<D extends Record<string, unknown>, T extends string> = SetReadonly<
+  SetRequired<Edge<D, T>, 'type' | 'data'>,
+  'id' | 'type'
+>
 
 export type ElementXYFlowNode = TypedXYFlowNode<ElementNodeData, 'element'>
 
@@ -57,20 +61,15 @@ export type RelationshipData = {
   headPoint: Point | null
   tailPoint: Point | null
   type: 'bezier' | 'poly'
+  // if dynamic view
+  stepNum: number | null
   label: null | {
     bbox: BBox
     text: string
   }
 }
 
-export type RelationshipEdge = Simplify<
-  SetRequired<
-    Omit<Edge<RelationshipData>, 'type'>,
-    'data'
-  > & {
-    type: 'relationship'
-  }
->
+export type RelationshipEdge = TypedXYFlowEdge<RelationshipData, 'relationship'>
 
 export type XYFlowEdge = RelationshipEdge