@likec4/diagram 1.8.1 → 1.12.0

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -1,27 +1,28 @@
 import {
   invariant,
+  isStepEdgeId,
   type NonEmptyArray,
   nonexhaustive,
   nonNullable,
   type Point,
   type RelationshipArrowType
 } from '@likec4/core'
-import { Box } from '@mantine/core'
 import { useDebouncedEffect } from '@react-hookz/web'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type { EdgeProps, XYPosition } from '@xyflow/react'
-import { EdgeLabelRenderer } from '@xyflow/react'
 import clsx from 'clsx'
 import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
-import { deepEqual, deepEqual as eq } from 'fast-equals'
+import { deepEqual as eq } from 'fast-equals'
 import { memo, type PointerEvent as ReactPointerEvent, useEffect, useRef, useState } from 'react'
 import { first, hasAtLeast, isArray, isTruthy, last } from 'remeda'
 import { useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
 import { useXYStoreApi } from '../../hooks/useXYFlow'
+import { vector, VectorImpl } from '../../utils/vector'
 import { ZIndexes } from '../const'
 import { EdgeMarkers, type EdgeMarkerType } from '../EdgeMarkers'
-import { type RelationshipData, type XYFlowEdge } from '../types'
+import { type XYFlowEdge } from '../types'
 import { bezierControlPoints } from '../utils'
+import { EdgeLabel } from './EdgeLabel'
 import * as edgesCss from './edges.css'
 import { getNodeIntersectionFromCenterToPoint } from './utils'
 // import { getEdgeParams } from './utils'
@@ -103,9 +104,8 @@ const isSame = (a: number, b: number) => {
 }
 
 const isSamePoint = (a: XYPosition | Point, b: XYPosition | Point) => {
-  const [ax, ay] = isArray(a) ? a : [a.x, a.y]
-  const [bx, by] = isArray(b) ? b : [b.x, b.y]
-  return isSame(ax, bx) && isSame(ay, by)
+  return isSame(isArray(a) ? a[0] : a.x, isArray(b) ? b[0] : b.x)
+    && isSame(isArray(a) ? a[1] : a.y, isArray(b) ? b[1] : b.y)
 }
 
 const sameControlPoints = (a: XYPosition[] | null, b: XYPosition[] | null) => {
@@ -123,7 +123,6 @@ const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>)
   && isSame(prev.sourceY, next.sourceY)
   && isSame(prev.targetX, next.targetX)
   && isSame(prev.targetY, next.targetY)
-  && eq(prev.data.stepNum, next.data.stepNum)
   && eq(prev.data.label, next.data.label)
   && sameControlPoints(prev.data.controlPoints, next.data.controlPoints)
   && eq(prev.data.edge, next.data.edge)
@@ -134,7 +133,7 @@ const curve = d3line<XYPosition>()
   .x(d => d.x)
   .y(d => d.y)
 
-export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
+export const RelationshipEdge = memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
   id,
   data,
   selected,
@@ -150,15 +149,25 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   const [isControlPointDragging, setIsControlPointDragging] = useState(false)
   const diagramStore = useDiagramStoreApi()
   const xyflowStore = useXYStoreApi()
-  const { isActive, isEdgePathEditable, isHovered, isDimmed, hasOpenSourceRelation } = useDiagramState(s => ({
+  const {
+    connectedToFocusedNode,
+    isActiveWalkthroughStep,
+    isEdgePathEditable,
+    isHovered,
+    isDimmed,
+    isActiveAsParallel
+  } = useDiagramState(s => ({
     isEdgePathEditable: s.readonly !== true && s.experimentalEdgeEditing === true && s.focusedNodeId === null
-      && s.activeDynamicViewStep === null,
-    isActive: s.focusedNodeId === source || s.focusedNodeId === target
-      || (s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum),
+      && s.activeWalkthrough === null,
+    connectedToFocusedNode: s.focusedNodeId === source || s.focusedNodeId === target,
+    isActiveWalkthroughStep: s.activeWalkthrough?.stepId === data.edge.id,
+    // If activeWalkthrough and this edge is part of the parallel group
+    isActiveAsParallel: !!s.activeWalkthrough?.parallelPrefix && id.startsWith(s.activeWalkthrough.parallelPrefix),
     isHovered: s.hoveredEdgeId === id,
-    isDimmed: s.dimmed.has(id),
-    hasOpenSourceRelation: !!s.onOpenSourceRelation
+    isDimmed: s.dimmed.has(id)
   }))
+
+  const isActive = connectedToFocusedNode || isActiveWalkthroughStep
   const { nodeLookup, edgeLookup } = xyflowStore.getState()
   const sourceNode = nonNullable(nodeLookup.get(source)!, `source node ${source} not found`)
   const targetNode = nonNullable(nodeLookup.get(target)!, `target node ${target} not found`)
@@ -180,7 +189,7 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
 
   let controlPoints = data.controlPoints ?? bezierControlPoints(data.edge)
 
-  const isStepEdge = data.stepNum !== null
+  const isStepEdge = isStepEdgeId(data.edge.id)
   const isDotted = line === 'dotted'
   const isDashed = isDotted || line === 'dashed'
 
@@ -194,7 +203,7 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   let labelX = labelBBox?.x ?? 0,
     labelY = labelBBox?.y ?? 0
 
-  const [labelPos, setLabelPosition] = useState<XYPosition>({
+  const [labelPos, setLabelPos] = useState<XYPosition>({
     x: label?.bbox.x ?? labelX,
     y: label?.bbox.y ?? labelY
   })
@@ -235,7 +244,7 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
       x: Math.round(dompoint.x),
       y: Math.round(dompoint.y)
     }
-    setLabelPosition(current => isSamePoint(current, point) ? current : point)
+    setLabelPos(current => isSamePoint(current, point) ? current : point)
   }, [edgePath])
 
   useDebouncedEffect(
@@ -263,35 +272,26 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     labelY = labelPos.y
   }
 
-  const onControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>) => {
-    const { domNode } = xyflowStore.getState()
-    if (!domNode || e.pointerType !== 'mouse') {
-      return
-    }
+  const onLmbControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>, domNode: HTMLDivElement) => {
+    const { addSelectedEdges } = xyflowStore.getState()
     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
-    }
+
+    addSelectedEdges([id])
+
     const wasCanceled = diagramStore.getState().cancelSaveManualLayout()
     e.stopPropagation()
     let hasMoved = false
     let pointer = { x: e.clientX, y: e.clientY }
 
     const onPointerMove = (e: PointerEvent) => {
-      if (hasMoved || !isSamePoint(pointer, [e.clientX, e.clientY])) {
+      const clientPoint = {
+        x: e.clientX,
+        y: e.clientY
+      }
+      if (!isSamePoint(pointer, clientPoint)) {
         setIsControlPointDragging(true)
         hasMoved = true
-        pointer = { x: e.clientX, y: e.clientY }
+        pointer = clientPoint
         const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false })
         xyflow.updateEdgeData(id, xyedge => {
           const cp = (xyedge.data.controlPoints ?? controlPoints).slice()
@@ -329,6 +329,105 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     })
   }
 
+  const onRmbControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>, domNode: HTMLDivElement) => {
+    const { xyflow } = diagramStore.getState()
+
+    if(controlPoints.length <= 1) {
+      return
+    }
+
+    const onPointerUp = (e: PointerEvent) => {
+      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 })
+        diagramStore.getState().scheduleSaveManualLayout()
+      }, 10)
+
+      domNode.removeEventListener('pointerup', onPointerUp, {
+        capture: true
+      })
+      e.stopPropagation()      
+    }
+
+    domNode.addEventListener('pointerup', onPointerUp, {
+      once: true,
+      capture: true
+    })
+
+    e.stopPropagation()
+  }
+
+  const onControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>) => {
+    const { domNode } = xyflowStore.getState()
+    if (!domNode || e.pointerType !== 'mouse') {
+      return
+    }
+
+    switch (e.button) {
+      case 0:
+        onLmbControlPointerDown(index, e, domNode)
+        break
+      case 2:
+        onRmbControlPointerDown(index, e, domNode)
+        break
+    }
+  }
+
+  const onEdgePointerDown = (e: ReactPointerEvent<SVGElement>) => {
+    const { domNode } = xyflowStore.getState()
+    const { xyflow, scheduleSaveManualLayout } = diagramStore.getState()
+
+    if (!domNode || e.pointerType !== 'mouse') {
+      return
+    }
+    if (e.button !== 2) {
+      return
+    }
+
+    xyflow.updateEdgeData(id, edge => {
+      const points: VectorImpl[] = [
+        new VectorImpl(sourceX, sourceY),
+        ...controlPoints.map(vector) || [],
+        new VectorImpl(targetX, targetY)
+      ]
+
+      let pointer = { x: e.clientX, y: e.clientY }
+      const newPoint = vector(xyflow.screenToFlowPosition(pointer, { snapToGrid: false }))
+
+      let insertionIndex = 0
+      let minDistance = Infinity
+      for (let i = 0; i < points.length - 1; i++) {
+        const a = points[i]!, b = points[i + 1]!
+        const fromCurrentToNext = b.sub(a)
+        const fromCurrentToNew = newPoint.sub(a)
+        const fromNextToNew = newPoint.sub(b)
+
+        // Is pointer above the current segment?
+        if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
+          // Calculate distance by approximating edge segment with a staight line
+          const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew).abs() / fromCurrentToNext.abs())
+
+          if (distanceToEdge < minDistance) {
+            minDistance = distanceToEdge
+            insertionIndex = i
+          }
+        }
+      }
+
+      const newControlPoints = edge.data.controlPoints?.slice() || []
+      newControlPoints.splice(insertionIndex, 0, newPoint)
+
+      return { controlPoints: newControlPoints }
+    })
+
+    scheduleSaveManualLayout()
+
+    e.stopPropagation()
+  }
+
   let markerStartName = toMarker(diagramEdge.tail)
   let markerEndName = toMarker(diagramEdge.head ?? 'normal')
   if (diagramEdge.dir === 'back') {
@@ -338,10 +437,11 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null
   const MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null
 
-  const labelZIndex = 1 + (isHovered ? ZIndexes.Element : (edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge))
-
-  const relationId = first(data.edge.relations)
-  const showOpenSourceRelation = hasOpenSourceRelation && relationId !== undefined
+  let labelZIndex = 1 + (isHovered ? ZIndexes.Element : (edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge))
+  if (isEdgePathEditable && selected) {
+    // Move label below ControlPoints, otherwise they don't capture events
+    labelZIndex = (edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge) - 1
+  }
 
   return (
     <g
@@ -353,6 +453,7 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
       data-likec4-color={color}
       data-edge-dir={diagramEdge.dir}
       data-edge-active={isActive}
+      data-edge-animated={isActive || isActiveAsParallel}
       data-edge-hovered={isHovered}>
       <path
         className={clsx('react-flow__edge-interaction')}
@@ -361,7 +462,7 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
         stroke={'transparent'}
         strokeWidth={interactionWidth ?? 10}
       />
-      <g className={edgesCss.markerContext}>
+      <g className={edgesCss.markerContext} onPointerDown={e => onEdgePointerDown(e)}>
         <defs>
           {MarkerStart && <MarkerStart id={'start' + id} />}
           {MarkerEnd && <MarkerEnd id={'end' + id} />}
@@ -404,102 +505,34 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
       )}
       {(data.label || isStepEdge) && (
         <EdgeLabel
-          {...({
-            isDimmed,
-            color,
-            isModified,
-            labelX,
-            labelY,
-            isEdgePathEditable,
-            selected: selected ?? false,
-            stepNum: data.stepNum,
-            label: data.label,
-            zIndex: labelZIndex,
-            isHovered,
-            isActive,
-            isStepEdge
-          })}
-          onClick={showOpenSourceRelation && ((e) => {
-            e.stopPropagation()
-            diagramStore.getState().onOpenSourceRelation?.(relationId)
-          })}
+          isDimmed={isDimmed}
+          edgeData={data}
+          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: labelZIndex
+          }}
+          mod={{
+            'data-likec4-color': color,
+            'data-edge-hovered': isHovered && !isActiveWalkthroughStep,
+            'data-edge-active': isActive
+          }}
         />
       )}
     </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
-  onClick: false | ((e: ReactPointerEvent<HTMLDivElement>) => void)
-}
-
-const EdgeLabel = ({
-  isDimmed,
-  color,
-  isModified,
-  labelX,
-  labelY,
-  isEdgePathEditable,
-  selected,
-  label,
-  stepNum,
-  isHovered,
-  isActive,
-  zIndex,
-  onClick
-}: EdgeLabelProps) => {
-  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
-        }}
-        onClick={onClick || undefined}
-      >
-        {stepNum !== null && (
-          <Box className={edgesCss.stepEdgeNumber}>
-            {stepNum}
-          </Box>
-        )}
-        {isTruthy(label?.text) && (
-          <Box className={edgesCss.edgeLabelText}>
-            {label.text}
-          </Box>
-        )}
-      </Box>
-    </EdgeLabelRenderer>
-  )
-}

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

@@ -0,0 +1,60 @@
+import { style } from '@vanilla-extract/css'
+import { mantine, vars } from '../../theme-vars'
+
+export const menuDropdown = style({
+  minWidth: 250,
+  maxWidth: 'min(90vw, 500px)'
+})
+
+export const menuItemRelationship = style({
+  // padding: mantine.spacing.sm,
+  // paddingTop: mantine.spacing.xs,
+  // borderRadius: mantine.radius.sm,
+  // paddingTop: mantine.spacing.xs,
+  // paddingBottom: mantine.spacing.xs,
+  gap: 4
+  // cursor: 'pointer',
+  // ':hover': {
+  // borderColor: mantine.colors.gray.light,
+  // background: mantine.colors.gray[2]
+  // },
+
+  // selectors: {
+  //   [`:where([data-mantine-color-scheme="dark"]) &`]: {
+  //     // borderColor: mantine.colors.dark[6]
+  //   },
+  //   [`:where([data-mantine-color-scheme="dark"]) &:hover`]: {
+  //     // background: mantine.colors.dark[5]
+  //   }
+  // }
+})
+
+export const endpoint = style({
+  display: 'block',
+  fontSize: 10,
+  fontWeight: 500,
+  whiteSpace: 'nowrap',
+  padding: '2px 5px',
+  borderRadius: 2,
+  background: `color-mix(in srgb , ${vars.element.fill},  transparent 45%)`,
+  lineHeight: 1.1,
+  selectors: {
+    [`:where([data-mantine-color-scheme="dark"]) &`]: {
+      color: vars.element.loContrast
+    }
+  }
+})
+
+export const title = style({
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: mantine.fontSizes.sm
+})
+//
+// export const sourceId = style({
+//
+// })
+//
+// export const targetId = style({
+//   fontSize: 11,
+//   whiteSpace: 'nowrap'
+// })