@likec4/diagram 1.0.0-next.2 → 1.0.0

package/src/xyflow/diagram-to-xyflow.ts

@@ -0,0 +1,197 @@
+import {
+  type DiagramNode,
+  type DiagramView,
+  type Fqn,
+  invariant,
+  type NonEmptyArray,
+  nonNullable,
+  type Point
+} from '@likec4/core'
+import { getBezierEdgeCenter } from '@xyflow/react'
+import { hasAtLeast } from 'remeda'
+import type { XYFlowData } from '../xyflow/types'
+
+function deriveEdgePoints(bezierSpline: NonEmptyArray<Point>) {
+  let [start, ...bezierPoints] = bezierSpline
+  invariant(start, 'start should be defined')
+  const handles = [
+    // start
+  ] as Point[]
+
+  while (hasAtLeast(bezierPoints, 3)) {
+    const [cp1, cp2, end, ...rest] = bezierPoints
+    const [centerX, centerY] = getBezierEdgeCenter({
+      sourceX: start[0],
+      sourceY: start[1],
+      targetX: end[0],
+      targetY: end[1],
+      sourceControlX: cp1[0],
+      sourceControlY: cp1[1],
+      targetControlX: cp2[0],
+      targetControlY: cp2[1]
+    })
+    handles.push(
+      [centerX, centerY]
+    )
+    // if (rest.length === 0) {
+    //   handles.push(
+    //     end
+    //   )
+    // }
+    bezierPoints = rest
+    start = end
+  }
+  invariant(bezierPoints.length === 0, 'all points should be consumed')
+
+  return handles
+}
+
+// const nodeZIndex = (node: DiagramNode) => node.level + (hasAtLeast(node.children, 1) ? 2 : 1)
+const nodeZIndex = (node: DiagramNode) => node.level + 1
+
+export function diagramViewToXYFlowData(
+  view: Pick<DiagramView, 'nodes' | 'edges'>,
+  opts: {
+    draggable: boolean
+    selectable: boolean
+  }
+): XYFlowData {
+  const editor: XYFlowData = {
+    nodes: [],
+    edges: []
+  }
+
+  const nodeLookup = new Map<Fqn, DiagramNode>()
+
+  const traverse = view.nodes.reduce(
+    (acc, node) => {
+      nodeLookup.set(node.id, node)
+      if (!node.parent) {
+        acc.push({ node, parent: null })
+      }
+      return acc
+    },
+    new Array<{
+      node: DiagramNode
+      parent: DiagramNode | null
+    }>()
+  )
+
+  // namespace to force unique ids
+  const ns = ''
+  const nodeById = (id: Fqn) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`)
+
+  let next: typeof traverse[0] | undefined
+  while ((next = traverse.pop())) {
+    const { node, parent } = next
+    if (node.children.length > 0) {
+      traverse.unshift(...node.children.map(child => ({ node: nodeById(child), parent: node })))
+    }
+    const isCompound = hasAtLeast(node.children, 1)
+    const position = {
+      x: node.position[0],
+      y: node.position[1]
+    }
+    if (parent) {
+      position.x -= parent.position[0]
+      position.y -= parent.position[1]
+    }
+
+    // const outEdges = node.outEdges.map(e => view.edges.find(edge => edge.id === e)).filter(Boolean)
+    // const inEdges = node.inEdges.map(e => view.edges.find(edge => edge.id === e)).filter(Boolean)
+
+    const id = ns + node.id
+    editor.nodes.push({
+      id,
+      type: isCompound ? 'compound' : 'element',
+      data: {
+        fqn: node.id,
+        element: node
+      },
+      draggable: opts.draggable && (!parent || parent.children.length > 1),
+      selectable: opts.selectable,
+      deletable: false,
+      position,
+      zIndex: nodeZIndex(node),
+      hidden: false,
+      /*       initialWidth: node.width,
+      initialHeight: node.height, */
+      width: node.width,
+      height: node.height,
+      measured: {
+        width: node.width,
+        height: node.height
+      },
+      ...(parent && {
+        parentId: ns + parent.id
+      })
+      // handles: [
+      //   ...outEdges.map(out => ({
+      //     id: `${out.id}`,
+      //     type: 'source' as const,
+      //     position: Position.Bottom,
+      //     x: out.points[0][0],
+      //     y: out.points[0][1],
+      //     width: 10,
+      //     height: 10
+      //   })),
+      //   ...inEdges.map(out => ({
+      //     id: out.id,
+      //     type: 'target' as const,
+      //     position: Position.Top,
+      //     x: out.points[0][0],
+      //     y: out.points[0][1],
+      //     width: 10,
+      //     height: 10
+      //   }))
+      // ],
+    })
+  }
+
+  for (const edge of view.edges) {
+    const source = edge.source
+    const target = edge.target
+    const id = ns + edge.id
+    // const points = isElkEdge(edge) ? edge.points : deriveEdgePoints(edge.points)
+    const controlPoints = deriveEdgePoints(edge.points)
+    // if (edge.tailArrowPoint) {
+    //   controlPoints.unshift([...edge.tailArrowPoint])
+    // }
+    // if (edge.headArrowPoint) {
+    //   controlPoints.push([...edge.headArrowPoint])
+    // }
+    invariant(hasAtLeast(edge.points, 2), 'edge should have at least 2 points')
+    // invariant(hasAtLeast(controlPoints, 2), 'edge controlPoints should have at least 2 points')
+
+    const level = Math.max(nodeZIndex(nodeById(source)), nodeZIndex(nodeById(target)))
+
+    editor.edges.push({
+      id,
+      type: 'relationship',
+      source: ns + source,
+      target: ns + target,
+      zIndex: level,
+      deletable: false,
+      data: {
+        edge,
+        type: 'bezier',
+        controlPoints,
+        headPoint: edge.headArrowPoint ?? null,
+        tailPoint: edge.tailArrowPoint ?? null,
+        label: edge.labelBBox && edge.label
+          ? {
+            bbox: edge.labelBBox,
+            // text: edge.labels ? edge.labels.map(l => l.text).join('\n') : ''
+            text: edge.label
+          }
+          : null
+      },
+      // markerEnd: {
+      //   type: MarkerType.ArrowClosed
+      // },
+      interactionWidth: 20
+    })
+  }
+
+  return editor
+}

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -0,0 +1,288 @@
+import { invariant, type NonEmptyArray, nonNullable, type Point } from '@likec4/core'
+import { Box } from '@mantine/core'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
+import type { EdgeProps, XYPosition } from '@xyflow/react'
+import { EdgeLabelRenderer, getBezierPath } from '@xyflow/react'
+import clsx from 'clsx'
+import { deepEqual as eq } from 'fast-equals'
+import { type CSSProperties, memo } from 'react'
+import { hasAtLeast } from 'remeda'
+import { useDiagramState } from '../../state'
+import { ZIndexes } from '../const'
+import { useXYStoreApi } from '../hooks'
+import { type XYFlowEdge } from '../types'
+import { toDomPrecision } from '../utils'
+import {
+  container,
+  cssEdgePath,
+  edgeLabel,
+  edgeLabelBody,
+  edgePathBg,
+  fillStrokeCtx,
+  varLabelX,
+  varLabelY
+} from './edges.css'
+import { getEdgeParams } from './utils'
+// import { getEdgeParams } from './utils'
+
+// function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size = 8): string {
+//   const bendSize = Math.min(distance(a, b) / 2, distance(b, c) / 2, size)
+//   const { x, y } = b
+//   // no bend
+//   if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) {
+//     return `L${x} ${y}`
+//   }
+
+//   // first segment is horizontal
+//   if (a.y === y) {
+//     const xDir = a.x < c.x ? -1 : 1
+//     const yDir = a.y < c.y ? 1 : -1
+//     return `L ${x + bendSize * xDir},${y}Q ${x},${y} ${x},${y + bendSize * yDir}`
+//   }
+
+//   const xDir = a.x < c.x ? 1 : -1
+//   const yDir = a.y < c.y ? -1 : 1
+//   return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`
+// }
+
+// const reduceToPath = (path: string, p: XYPosition, i: number, points: XYPosition[]) => {
+//   let segment = ''
+//   if (i > 0 && i < points.length - 1) {
+//     segment = getBend(points[i - 1]!, p, points[i + 1]!)
+//   } else {
+//     segment = `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`
+//   }
+//   return path + segment
+// }
+
+function bezierPath(bezierSpline: NonEmptyArray<Point>) {
+  let [start, ...points] = bezierSpline
+  invariant(start, 'start should be defined')
+  let path = `M ${start[0]},${start[1]}`
+
+  while (hasAtLeast(points, 3)) {
+    const [cp1, cp2, end, ...rest] = points
+    path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`
+    points = rest
+  }
+  invariant(points.length === 0, 'all points should be consumed')
+
+  return path
+}
+
+// If points are within 2px, consider them the same
+const isSamePoint = (a: number, b: number) => {
+  return Math.abs(a - b) < 2.1
+}
+
+const isSamePosition = (a: XYPosition, [bx, by]: Point) => {
+  return isSamePoint(a.x, bx) && isSamePoint(a.y, by)
+}
+
+const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>) => (
+  prev.id === next.id
+  && prev.source === next.source
+  && prev.target === next.target
+  && isSamePoint(prev.sourceX, next.sourceX)
+  && isSamePoint(prev.sourceY, next.sourceY)
+  && isSamePoint(prev.targetX, next.targetX)
+  && isSamePoint(prev.targetY, next.targetY)
+  && eq(prev.data, next.data)
+)
+
+export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
+  id,
+  data,
+  selected: _selected,
+  markerEnd: _markerEnd,
+  style,
+  source,
+  target,
+  interactionWidth
+}) {
+  const { nodeLookup, edgeLookup } = useXYStoreApi().getState()
+  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)
+
+  invariant(data, 'data is required')
+  const {
+    edge
+  } = data
+  // const edgePath = bezierPath(edge.points)
+
+  const color = edge.color ?? 'gray'
+  const isHovered = useDiagramState(s => s.hoveredEdgeId === id)
+
+  const line = edge.line ?? 'dashed'
+  const isDotted = line === 'dotted'
+  const isDashed = isDotted || line === 'dashed'
+
+  let strokeDasharray: string | undefined
+  if (isDotted) {
+    strokeDasharray = '1,8'
+  } else if (isDashed) {
+    strokeDasharray = '8,10'
+  }
+
+  const marker = `url(#arrow-${id})`
+
+  let edgePath: string, labelX: number, labelY: number
+
+  if (isNotModified) {
+    edgePath = bezierPath(edge.points)
+    labelX = data.label?.bbox.x ?? 0
+    labelY = data.label?.bbox.y ?? 0
+  } else {
+    const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode)
+
+    const [_edgePath, _labelX, _labelY] = getBezierPath({
+      sourceX: sx,
+      sourceY: sy,
+      sourcePosition: sourcePos,
+      targetPosition: targetPos,
+      targetX: tx,
+      targetY: ty
+    })
+    edgePath = _edgePath
+    labelX = _labelX
+    labelY = _labelY
+  }
+  // const deferredEdgePath = edgePath
+  //   useTilg()`
+  //   ${id}
+  //   path=${edgePath}
+  //   isModified=${isModified}
+  // `
+
+  return (
+    <g className={clsx(container)} data-likec4-color={color} data-edge-hovered={isHovered}>
+      <g className={clsx(fillStrokeCtx)}>
+        <defs>
+          <marker
+            id={`arrow-${id}`}
+            viewBox="0 0 10 8"
+            refX="0"
+            refY="4"
+            markerWidth="5"
+            markerHeight="5"
+            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" />
+          </marker>
+        </defs>
+      </g>
+      <RelationshipPath
+        edgePath={edgePath}
+        interactionWidth={interactionWidth ?? 10}
+        strokeDasharray={strokeDasharray}
+        markerStart={edge.tailArrow ? marker : undefined}
+        markerEnd={edge.headArrow ? marker : undefined}
+        style={style} />
+      {
+        /*
+      {controlPoints.map((p, i) => (
+        <circle
+          className={styles.controlPoint}
+          key={i}
+          cx={p[0]}
+          cy={p[1]}
+          r={5}
+        />
+      ))} */
+      }
+      {data.label && (
+        <EdgeLabelRenderer>
+          <Box
+            className={clsx(container, edgeLabel)}
+            data-likec4-color={color}
+            style={{
+              ...assignInlineVars({
+                [varLabelX]: toDomPrecision(labelX) + 'px',
+                [varLabelY]: toDomPrecision(labelY) + 'px'
+              }),
+              maxWidth: data.label.bbox.width + 10,
+              zIndex: edgeLookup.get(id)?.zIndex ?? ZIndexes.Edge
+            }}
+            mod={{
+              'data-edge-hovered': isHovered
+            }}
+          >
+            <Box className={edgeLabelBody}>
+              {data.label.text}
+            </Box>
+            {
+              /* <Popover
+                position="bottom"
+                floatingStrategy="fixed"
+                shadow="lg"
+                disabled={!selected}
+                transitionProps={{
+                  transition: 'pop'
+                }}>
+                <Popover.Target>
+                  <Box className={clsx('nodrag nopan', edgeLabelBody)}>
+                    {data.label.text}
+                  </Box>
+                </Popover.Target>
+                <Popover.Dropdown>
+                  {edge.relations.map((relation) => (
+                    <Box key={relation}>
+                      <Text size='xs'>{relation}</Text>
+                    </Box>
+                  ))}
+                  <TextInput label="Name" placeholder="Name" size="xs" />
+                  <TextInput label="Email" placeholder="john@doe.com" size="xs" mt="xs" />
+                </Popover.Dropdown>
+              </Popover> */
+            }
+          </Box>
+        </EdgeLabelRenderer>
+      )}
+    </g>
+  )
+}, isEqualProps)
+
+const RelationshipPath = memo<{
+  edgePath: string
+  interactionWidth: number
+  strokeDasharray: string | undefined
+  markerStart: string | undefined
+  markerEnd: string | undefined
+  style: CSSProperties | undefined
+}>(({
+  edgePath,
+  interactionWidth,
+  strokeDasharray,
+  markerStart,
+  markerEnd,
+  style
+}) => (
+  <>
+    <path
+      className={clsx('react-flow__edge-path', edgePathBg)}
+      d={edgePath}
+      style={style}
+      strokeLinecap={'round'}
+    />
+    <path
+      className={clsx('react-flow__edge-path', cssEdgePath)}
+      d={edgePath}
+      style={style}
+      strokeLinecap={'round'}
+      strokeDasharray={strokeDasharray}
+      markerStart={markerStart}
+      markerEnd={markerEnd}
+    />
+    <path
+      className={clsx('react-flow__edge-interaction')}
+      d={edgePath}
+      fill="none"
+      strokeOpacity={0}
+      strokeWidth={interactionWidth}
+    />
+  </>
+))

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

@@ -0,0 +1,124 @@
+import { rem } from '@mantine/core'
+import { createVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../../mantine.css'
+import { vars, xyvars } from '../../theme.css'
+
+export const container = style({
+  vars: {
+    [xyvars.edge.stroke]: vars.relation.lineColor,
+    [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, white 30%)`,
+    [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 20%)`,
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 35%)`,
+    [xyvars.edge.strokeWidth]: '2.5px'
+  },
+  selectors: {
+    [mantine.darkSelector]: {
+      vars: {
+        [xyvars.edge.labelColor]: vars.relation.labelColor,
+        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 75%)`
+      }
+    }
+    // [mantine.lightSelector]: {
+    //   // mixBlendMode: 'luminosity',
+    //   vars: {
+    //     // [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, #000 85%)`
+    //   }
+    // }
+  }
+})
+
+globalStyle(`${container}[data-edge-hovered='true']`, {
+  vars: {
+    [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, white 30%)`,
+    [xyvars.edge.strokeWidth]: '3px'
+  }
+})
+// globalStyle(`${container}[data-edge-hovered='true']`, {
+//   vars: {
+//     [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, white 35%)`
+//   },
+// })
+
+globalStyle(`.react-flow__edge.selected ${container}`, {
+  vars: {
+    [xyvars.edge.strokeWidth]: '2.5'
+  }
+})
+
+globalStyle(`.react-flow__edges > svg`, {
+  mixBlendMode: 'screen'
+})
+globalStyle(`:where([data-mantine-color-scheme="dark"]) .react-flow__edges > svg`, {
+  mixBlendMode: 'lighten'
+})
+
+export const edgePathBg = style({
+  strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8)`,
+  strokeOpacity: 0.1
+})
+
+export const fillStrokeCtx = style({
+  fill: xyvars.edge.stroke,
+  stroke: xyvars.edge.stroke,
+  selectors: {
+    '.react-flow__edge.selected &': {
+      vars: {
+        [xyvars.edge.stroke]: xyvars.edge.strokeSelected
+      }
+    }
+  }
+})
+
+export const cssEdgePath = style({
+  selectors: {
+    [`${container}[data-edge-hovered='true'] &`]: {
+      transition: 'all 130ms ease-out'
+    }
+  }
+})
+
+export const varLabelX = createVar('label-x')
+export const varLabelY = createVar('label-y')
+
+const varTranslate = createVar('translate')
+
+export const edgeLabel = style({
+  top: 0,
+  left: 0,
+  fontFamily: vars.likec4.font,
+  position: 'absolute',
+  pointerEvents: 'all',
+  cursor: 'pointer',
+  transformOrigin: '50% 50%',
+  textAlign: 'left',
+  mixBlendMode: 'screen',
+  padding: '2px 6px 4px 6px',
+  width: 'max-content',
+  backgroundColor: xyvars.edge.labelBgColor,
+  borderRadius: '3px',
+  transform: varTranslate,
+  willChange: 'transform',
+  vars: {
+    // [varTranslate]: `translate(calc(${varLabelX} - 50%), calc(${varLabelY} - 50%))`,
+    [varTranslate]: `translate(${varLabelX}, ${varLabelY})`,
+    [varLabelX]: '50%',
+    [varLabelY]: '50%'
+  },
+  selectors: {
+    [mantine.darkSelector]: {
+      mixBlendMode: 'luminosity'
+    },
+    '&[data-edge-hovered="true"]': {
+      transition: 'all 140ms ease-out',
+      transform: `${varTranslate} scale(1.1)`
+    }
+  }
+})
+
+export const edgeLabelBody = style({
+  // display: 'inline',
+  color: xyvars.edge.labelColor,
+  fontSize: rem(12.5),
+  lineHeight: 1.12,
+  transition: 'color 120ms ease-out'
+})