@likec4/diagram 1.3.0 → 1.5.0

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

@@ -1,20 +1,10 @@
-import {
-  type DiagramNode,
-  type DiagramView,
-  extractStep,
-  type Fqn,
-  invariant,
-  type NonEmptyArray,
-  nonNullable,
-  type Point
-} from '@likec4/core'
-import { Bezier } from 'bezier-js'
-import { hasAtLeast, reduce } from 'remeda'
+import { extractStep, invariant, nonNullable } from '@likec4/core'
+import type { DiagramNode, DiagramView, Fqn } from '@likec4/core/types'
+import { hasAtLeast } from 'remeda'
 import type { XYFlowData } from '../xyflow/types'
-import { toDomPrecision } from './utils'
+import { ZIndexes } from './const'
 
-// const nodeZIndex = (node: DiagramNode) => node.level + (hasAtLeast(node.children, 1) ? 2 : 1)
-const nodeZIndex = (node: DiagramNode) => node.level + 1
+// const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
 
 export function diagramViewToXYFlowData(
   view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__' | 'manualLayout'>,
@@ -50,10 +40,10 @@ export function diagramViewToXYFlowData(
   const nodeById = (id: Fqn) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`)
 
   let next: typeof traverse[0] | undefined
-  while ((next = traverse.pop())) {
+  while ((next = traverse.shift())) {
     const { node, parent } = next
     if (node.children.length > 0) {
-      traverse.unshift(...node.children.map(child => ({ node: nodeById(child), parent: node })))
+      traverse.push(...node.children.map(child => ({ node: nodeById(child), parent: node })))
     }
     const isCompound = hasAtLeast(node.children, 1)
     const position = {
@@ -69,6 +59,7 @@ export function diagramViewToXYFlowData(
     // const inEdges = node.inEdges.map(e => view.edges.find(edge => edge.id === e)).filter(Boolean)
 
     const id = ns + node.id
+    const draggable = opts.draggable && (!parent || parent.children.length > 1)
     editor.nodes.push({
       id,
       type: isCompound ? 'compound' : 'element',
@@ -76,43 +67,22 @@ export function diagramViewToXYFlowData(
         fqn: node.id,
         element: node
       },
-      draggable: opts.draggable && (!parent || parent.children.length > 1),
+      draggable,
       selectable: opts.selectable,
       deletable: false,
       position,
-      zIndex: nodeZIndex(node),
+      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
       hidden: false,
-      /*       initialWidth: node.width,
-      initialHeight: node.height, */
+      initialWidth: node.width,
+      initialHeight: node.height,
       width: node.width,
       height: node.height,
-      // measured: {
-      //   width: node.width,
-      //   height: node.height
-      // },
       ...(parent && {
         parentId: ns + parent.id
+      }),
+      ...(isCompound && {
+        dragHandle: '.likec4-compound-title'
       })
-      // 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
-      //   }))
-      // ],
     })
   }
 
@@ -131,33 +101,28 @@ export function diagramViewToXYFlowData(
     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)))
+    // const level = Math.max(nodeZIndex(nodeById(source)), nodeZIndex(nodeById(target)))
 
     editor.edges.push({
       id,
       type: 'relationship',
       source: ns + source,
       target: ns + target,
-      zIndex: level,
+      zIndex: ZIndexes.Edge,
+      selectable: opts.selectable,
       deletable: false,
       data: {
         edge,
         type: 'bezier',
         controlPoints: view.manualLayout?.edges[edge.id]?.controlPoints || null,
-        headPoint: edge.headArrowPoint ?? null,
-        tailPoint: edge.tailArrowPoint ?? null,
         stepNum: isDynamicView ? extractStep(edge.id) : null,
         label: !!edge.labelBBox
           ? {
             bbox: edge.labelBBox,
-            // text: edge.labels ? edge.labels.map(l => l.text).join('\n') : ''
             text: edge.label ?? ''
           }
           : null
       },
-      // markerEnd: {
-      //   type: MarkerType.ArrowClosed
-      // },
       interactionWidth: 20
     })
   }

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -1,20 +1,27 @@
-import { invariant, type NonEmptyArray, nonNullable, type Point } from '@likec4/core'
+import {
+  invariant,
+  type NonEmptyArray,
+  nonexhaustive,
+  nonNullable,
+  type Point,
+  type RelationshipArrowType
+} from '@likec4/core'
 import { Box } from '@mantine/core'
 import { useIsomorphicLayoutEffect } from '@react-hookz/web'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type { EdgeProps, XYPosition } from '@xyflow/react'
 import { EdgeLabelRenderer } from '@xyflow/react'
-import { getNodePositionWithOrigin } from '@xyflow/system'
 import clsx from 'clsx'
 import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
-import { deepEqual as eq } from 'fast-equals'
-import { memo, useRef, useState } from 'react'
+import { deepEqual, deepEqual as eq } from 'fast-equals'
+import { memo, type PointerEvent as ReactPointerEvent, useRef, useState } from 'react'
 import { first, hasAtLeast, isArray, isTruthy, last } from 'remeda'
-import { useDiagramState, useDiagramStoreApi } from '../../state'
+import { useDiagramState, useDiagramStoreApi } from '../../state/hooks'
 import { ZIndexes } from '../const'
-import { useXYFlow, useXYStoreApi } from '../hooks'
-import { type XYFlowEdge } from '../types'
-import { bezierControlPoints, toDomPrecision } from '../utils'
+import { EdgeMarkers } from '../EdgeMarkers'
+import { useXYStoreApi } from '../hooks'
+import { type RelationshipData, type XYFlowEdge } from '../types'
+import { bezierControlPoints } from '../utils'
 import * as edgesCss from './edges.css'
 import { getNodeIntersectionFromCenterToPoint } from './utils'
 // import { getEdgeParams } from './utils'
@@ -49,6 +56,32 @@ import { getNodeIntersectionFromCenterToPoint } from './utils'
 //   return path + segment
 // }
 
+const toMarker = (arrowType?: RelationshipArrowType) => {
+  if (!arrowType || arrowType === 'none') {
+    return undefined
+  }
+  switch (arrowType) {
+    case 'normal':
+    case 'crow':
+      return 'Arrow' as const
+    case 'onormal':
+      return 'OArrow' as const
+    case 'diamond':
+      return 'Diamond' as const
+    case 'odiamond':
+      return 'ODiamond' as const
+    case 'open':
+    case 'vee':
+      return 'Open' as const
+    case 'dot':
+      return 'Dot' as const
+    case 'odot':
+      return `ODot` as const
+    default:
+      nonexhaustive(arrowType)
+  }
+}
+
 function bezierPath(bezierSpline: NonEmptyArray<Point>) {
   let [start, ...points] = bezierSpline
   invariant(start, 'start should be defined')
@@ -83,8 +116,8 @@ const sameControlPoints = (a: XYPosition[] | null, b: XYPosition[] | null) => {
 
 const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>) => (
   prev.id === next.id
-  && prev.source === next.source
-  && prev.target === next.target
+  && eq(prev.source, next.source)
+  && eq(prev.target, next.target)
   && eq(prev.selected ?? false, next.selected ?? false)
   && isSame(prev.sourceX, next.sourceX)
   && isSame(prev.sourceY, next.sourceY)
@@ -103,12 +136,17 @@ const curve = d3line<XYPosition>()
 export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
   id,
   data,
-  selected: _selected,
+  selected,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
   style,
   source,
   target,
   interactionWidth
 }) {
+  const [isControlPointDragging, setIsControlPointDragging] = useState(false)
   const diagramStore = useDiagramStoreApi()
   const xyflowStore = useXYStoreApi()
   const { isActive, isEditable, isEdgePathEditable, isHovered, isDimmed } = useDiagramState(s => ({
@@ -164,16 +202,24 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   if (isModified) {
     labelX = labelPos.x
     labelY = labelPos.y
-    const sourceCenterPos = getNodePositionWithOrigin(sourceNode, [-0.5, -0.5])
-    const targetCenterPos = getNodePositionWithOrigin(targetNode, [-0.5, -0.5])
+    const sourceCenterPos = { x: sourceX, y: sourceY }
+    const targetCenterPos = { x: targetX, y: targetY }
 
-    const points = [
-      sourceCenterPos.positionAbsolute,
-      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints)!),
-      ...controlPoints,
-      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints)!),
-      targetCenterPos.positionAbsolute
-    ]
+    const points = diagramEdge.dir === 'back'
+      ? [
+        targetCenterPos,
+        getNodeIntersectionFromCenterToPoint(targetNode, first(controlPoints) ?? sourceCenterPos),
+        ...controlPoints,
+        getNodeIntersectionFromCenterToPoint(sourceNode, last(controlPoints) ?? targetCenterPos),
+        sourceCenterPos
+      ]
+      : [
+        sourceCenterPos,
+        getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints) ?? targetCenterPos),
+        ...controlPoints,
+        getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints) ?? sourceCenterPos),
+        targetCenterPos
+      ]
 
     edgePath = nonNullable(curve(points))
   } else {
@@ -198,69 +244,88 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     setLabelPosition(current => isSamePoint(current, point) ? current : point)
   }, [edgePath])
 
-  const onControlPointerDown = (index: number, e: React.PointerEvent) => {
+  const onControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>) => {
     const { domNode } = xyflowStore.getState()
-    if (!domNode) return
+    if (!domNode || e.pointerType !== 'mouse') {
+      return
+    }
     const { xyflow } = diagramStore.getState()
+    if (e.button === 2 && controlPoints.length > 1) {
+      const newControlPoints = controlPoints.slice()
+      newControlPoints.splice(index, 1)
+      e.stopPropagation()
+      // Defer the update to avoid conflict with the pointerup event
+      setTimeout(() => {
+        xyflow.updateEdgeData(id, { controlPoints: newControlPoints })
+      }, 10)
+      return
+    }
+    if (e.button !== 0) {
+      return
+    }
     e.stopPropagation()
     let hasMoved = false
     let pointer = { x: e.clientX, y: e.clientY }
     const onPointerMove = (e: PointerEvent) => {
       if (!isSamePoint(pointer, [e.clientX, e.clientY])) {
+        setIsControlPointDragging(true)
+        if (!hasMoved) {
+          diagramStore.getState().cancelSaveManualLayout()
+        }
         hasMoved = true
         pointer = { x: e.clientX, y: e.clientY }
         const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false })
         const newControlPoints = controlPoints.slice()
         newControlPoints[index] = {
-          x: toDomPrecision(x),
-          y: toDomPrecision(y)
+          x: Math.round(x),
+          y: Math.round(y)
         }
         xyflow.updateEdgeData(id, { controlPoints: newControlPoints })
       }
     }
     const onPointerUp = () => {
+      setIsControlPointDragging(false)
       domNode.removeEventListener('pointermove', onPointerMove)
       domNode.removeEventListener('pointerup', onPointerUp)
       if (hasMoved) {
-        diagramStore.getState().triggerSaveManualLayout(xyflowStore)
+        diagramStore.getState().triggerSaveManualLayout()
       }
     }
     domNode.addEventListener('pointermove', onPointerMove)
     domNode.addEventListener('pointerup', onPointerUp, { once: true })
   }
 
-  const marker = `url(#arrow-${id})`
-  let markerStart = diagramEdge.tailArrow ? marker : undefined
-  let markerEnd = diagramEdge.headArrow ? marker : undefined
-  if (isModified && diagramEdge.dir === 'back') {
-    ;[markerStart, markerEnd] = [markerEnd, markerStart]
+  let markerStartName = toMarker(diagramEdge.tail)
+  let markerEndName = toMarker(diagramEdge.head ?? 'normal')
+  if (diagramEdge.dir === 'back') {
+    ;[markerStartName, markerEndName] = [markerEndName, markerStartName]
   }
 
+  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null
+  const MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null
+
   return (
     <g
       className={clsx([
         edgesCss.container,
-        isDimmed && edgesCss.dimmed
+        isDimmed && edgesCss.dimmed,
+        isControlPointDragging && edgesCss.controlDragging
       ])}
       data-likec4-color={color}
       data-edge-dir={diagramEdge.dir}
       data-edge-active={isActive}
       data-edge-hovered={isHovered}>
+      <path
+        className={clsx('react-flow__edge-interaction')}
+        d={edgePath}
+        fill="none"
+        stroke={'transparent'}
+        strokeWidth={interactionWidth ?? 10}
+      />
       <g className={edgesCss.markerContext}>
         <defs>
-          <marker
-            id={`arrow-${id}`}
-            viewBox="0 0 16 10"
-            // TODO: graphviz cut bezier path at arrow, we don't
-            refX={isModified ? '15' : '1'}
-            refY="5"
-            markerWidth="5"
-            markerHeight="4"
-            markerUnits="strokeWidth"
-            preserveAspectRatio="xMaxYMid meet"
-            orient="auto-start-reverse">
-            <path d="M 0 0 L 16 5 L 0 10 z" stroke="context-stroke" fill="context-stroke" />
-          </marker>
+          {MarkerStart && <MarkerStart id={'start' + id} />}
+          {MarkerEnd && <MarkerEnd id={'end' + id} />}
         </defs>
         <path
           className={clsx('react-flow__edge-path', edgesCss.edgePathBg)}
@@ -275,92 +340,119 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
           style={style}
           strokeLinecap={'round'}
           strokeDasharray={strokeDasharray}
-          markerStart={markerStart}
-          markerEnd={markerEnd}
+          markerStart={MarkerStart ? `url(#start${id})` : undefined}
+          markerEnd={MarkerEnd ? `url(#end${id})` : undefined}
         />
       </g>
-      <path
-        className={clsx('react-flow__edge-interaction')}
-        d={edgePath}
-        fill="none"
-        strokeOpacity={0}
-        strokeWidth={interactionWidth ?? 10}
-      />
-      {isEdgePathEditable && controlPoints.map((p, i) => (
-        <circle
-          onPointerDown={e => onControlPointerDown(i, e)}
-          className={edgesCss.controlPoint}
-          key={i}
-          cx={p.x}
-          cy={p.y}
-          r={3}
-        />
-      ))}
+
+      {isEdgePathEditable && (
+        <g
+          onContextMenu={e => {
+            e.preventDefault()
+            e.stopPropagation()
+          }}>
+          {controlPoints.map((p, i) => (
+            <circle
+              onPointerDown={e => onControlPointerDown(i, e)}
+              className={edgesCss.controlPoint}
+              key={i}
+              cx={p.x}
+              cy={p.y}
+              r={3}
+            />
+          ))}
+        </g>
+      )}
       {(data.label || isStepEdge) && (
-        <EdgeLabelRenderer>
-          <Box
-            className={clsx([
-              edgesCss.container,
-              edgesCss.edgeLabel,
-              isDimmed && edgesCss.dimmed
-            ])}
-            data-likec4-color={color}
-            style={{
-              ...assignInlineVars({
-                [edgesCss.varLabelX]: isModified ? `calc(${labelX}px - 10%)` : `${labelX}px`,
-                [edgesCss.varLabelY]: isModified ? `${labelY - 5}px` : `${labelY}px`
-              }),
-              ...(isEdgePathEditable && {
-                pointerEvents: 'none'
-              }),
-              ...(data.label && {
-                maxWidth: data.label.bbox.width + 12
-              }),
-              zIndex: edgeLookup.get(id)?.zIndex ?? ZIndexes.Edge
-            }}
-            mod={{
-              'data-edge-hovered': isHovered,
-              'data-edge-active': isActive
-            }}
-          >
-            {isStepEdge && (
-              <Box className={edgesCss.stepEdgeNumber}>
-                {data.stepNum}
-              </Box>
-            )}
-            {data.label?.text && (
-              <Box className={edgesCss.edgeLabelText}>
-                {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>
+        <EdgeLabel
+          {...({
+            isDimmed,
+            color,
+            isModified,
+            labelX,
+            labelY,
+            isEdgePathEditable,
+            selected: selected ?? false,
+            stepNum: data.stepNum,
+            label: data.label,
+            zIndex: edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge,
+            isHovered,
+            isActive,
+            isStepEdge
+          })} />
       )}
     </g>
   )
 }, isEqualProps)
+
+type EdgeLabelProps = {
+  isDimmed: boolean
+  color: string
+  isModified: boolean
+  labelX: number
+  labelY: number
+  isEdgePathEditable: boolean
+  selected: boolean
+  stepNum: number | null
+  label: RelationshipData['label']
+  isHovered: boolean
+  isActive: boolean
+  zIndex: number
+}
+
+const EdgeLabel = memo<EdgeLabelProps>(({
+  isDimmed,
+  color,
+  isModified,
+  labelX,
+  labelY,
+  isEdgePathEditable,
+  selected,
+  label,
+  stepNum,
+  isHovered,
+  isActive,
+  zIndex
+}) => {
+  return (
+    <EdgeLabelRenderer>
+      <Box
+        className={clsx([
+          'nodrag nopan',
+          edgesCss.container,
+          edgesCss.edgeLabel,
+          isDimmed && edgesCss.dimmed
+        ])}
+        style={{
+          ...assignInlineVars({
+            [edgesCss.varLabelX]: isModified ? `calc(${labelX}px - 10%)` : `${labelX}px`,
+            [edgesCss.varLabelY]: isModified ? `${labelY - 5}px` : `${labelY}px`
+          }),
+          ...(isEdgePathEditable && selected && {
+            pointerEvents: 'none'
+          }),
+          ...(label && {
+            maxWidth: label.bbox.width + 18
+          }),
+          zIndex
+        }}
+        mod={{
+          'data-likec4-color': color,
+          'data-edge-hovered': isHovered,
+          'data-edge-active': isActive
+        }}
+      >
+        {stepNum !== null && (
+          <Box className={edgesCss.stepEdgeNumber}>
+            {stepNum}
+          </Box>
+        )}
+        {isTruthy(label?.text) && (
+          <Box className={edgesCss.edgeLabelText}>
+            {label.text}
+          </Box>
+        )}
+      </Box>
+    </EdgeLabelRenderer>
+  )
+}, deepEqual)