@likec4/diagram 1.19.1 → 1.20.0

package/src/likec4diagram/XYFlow.tsx

@@ -0,0 +1,137 @@
+import { type EdgeId, type NodeId, nonNullable } from '@likec4/core'
+import { useCallbackRef } from '@mantine/hooks'
+import clsx from 'clsx'
+import type { EnforceOptional } from 'type-fest/source/enforce-optional'
+import { BaseXYFlow } from '../base'
+import { useDiagramEventHandlers, useEnabledFeature } from '../context'
+import { useDiagram } from '../hooks/useDiagram'
+import { useDiagramContext } from '../hooks/useDiagramContext'
+import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
+import { edgeTypes, nodeTypes } from './custom'
+import type { DiagramContext } from './state/machine'
+import type { Types } from './types'
+import { useLayoutConstraints } from './useLayoutConstraints'
+
+const selectXYProps = (ctx: DiagramContext) => ({
+  initialized: ctx.initialized,
+  nodes: ctx.xynodes,
+  edges: ctx.xyedges,
+  pannable: ctx.pannable,
+  zoomable: ctx.zoomable,
+  fitViewPadding: ctx.fitViewPadding,
+})
+
+type Picked = EnforceOptional<
+  Pick<
+    LikeC4DiagramProperties,
+    | 'background'
+    | 'nodesDraggable'
+    | 'nodesSelectable'
+  >
+>
+export type LikeC4DiagramXYFlowProps = Required<Picked>
+
+export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlowProps) => {
+  const diagram = useDiagram()
+  const {
+    initialized,
+    nodes,
+    edges,
+    ...props
+  } = useDiagramContext(selectXYProps)
+
+  const {
+    onNodeContextMenu,
+    onCanvasContextMenu,
+    onEdgeContextMenu,
+    onNodeClick,
+    onEdgeClick,
+    onCanvasClick,
+    onCanvasDblClick,
+  } = useDiagramEventHandlers()
+
+  const {
+    enableFitView,
+    enableReadOnly,
+  } = useEnabledFeature('ReadOnly', 'FitView')
+
+  const notReadOnly = !enableReadOnly
+
+  const layoutConstraints = useLayoutConstraints()
+
+  return (
+    <BaseXYFlow<Types.Node, Types.Edge>
+      nodes={nodes}
+      edges={edges}
+      className={clsx(initialized ? 'initialized' : 'not-initialized')}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      onNodesChange={useCallbackRef((changes) => {
+        diagram.send({ type: 'xyflow.applyNodeChages', changes })
+      })}
+      onEdgesChange={useCallbackRef((changes) => {
+        diagram.send({ type: 'xyflow.applyEdgeChages', changes })
+      })}
+      background={initialized ? background : 'transparent'}
+      // Fitview is handled in onInit
+      fitView={false}
+      onNodeClick={useCallbackRef((e, node) => {
+        e.stopPropagation()
+        diagram.send({ type: 'xyflow.nodeClick', node })
+        onNodeClick?.(diagram.findDiagramNode(node.id as NodeId)!, e)
+      })}
+      onEdgeClick={useCallbackRef((e, edge) => {
+        e.stopPropagation()
+        diagram.send({ type: 'xyflow.edgeClick', edge })
+        onEdgeClick?.(diagram.findDiagramEdge(edge.id as EdgeId)!, e)
+      })}
+      onPaneClick={useCallbackRef((e) => {
+        e.stopPropagation()
+        diagram.send({ type: 'xyflow.paneClick' })
+        onCanvasClick?.(e as any)
+      })}
+      onDoubleClick={useCallbackRef(e => {
+        e.stopPropagation()
+        diagram.send({ type: 'xyflow.paneDblClick' })
+        onCanvasDblClick?.(e as any)
+      })}
+      onMoveEnd={useCallbackRef((event, viewport) => {
+        // if event is present, the move was triggered by user
+        diagram.send({ type: 'xyflow.viewportMoved', viewport, manually: !!event })
+      })}
+      onInit={useCallbackRef((instance) => {
+        diagram.send({ type: 'xyflow.init', instance })
+      })}
+      {...onNodeContextMenu && {
+        onNodeContextMenu: useCallbackRef((event, node) => {
+          const diagramNode = nonNullable(
+            diagram.findDiagramNode(node.id as NodeId),
+            `diagramNode ${node.id} not found`,
+          )
+          onNodeContextMenu(diagramNode, event)
+        }),
+      }}
+      {...onEdgeContextMenu && {
+        onEdgeContextMenu: useCallbackRef((event, edge) => {
+          const diagramEdge = nonNullable(
+            diagram.findDiagramEdge(edge.id as EdgeId),
+            `diagramEdge ${edge.id} not found`,
+          )
+          onEdgeContextMenu(diagramEdge, event)
+        }),
+      }}
+      {...onCanvasContextMenu && {
+        onPaneContextMenu: useCallbackRef((event) => {
+          onCanvasContextMenu(event as any)
+        }),
+      }}
+      {...enableFitView && {
+        onViewportResize: () => {
+          diagram.send({ type: 'xyflow.resized' })
+        },
+      }}
+      {...(notReadOnly && rest.nodesDraggable && layoutConstraints)}
+      {...props}
+      {...rest} />
+  )
+}

package/src/likec4diagram/custom/edges/NotePopover.css.ts

@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css'
+import { mantine } from '../../../theme-vars'
+
+export const edgeNoteCloseButton = style({
+  position: 'absolute',
+  top: 1,
+  right: 1,
+  zIndex: 9,
+})
+
+export const edgeNoteText = style({
+  userSelect: 'all',
+  textAlign: 'left',
+  whiteSpaceCollapse: 'preserve-breaks',
+  textWrap: 'pretty',
+  lineHeight: 1.25,
+  vars: {
+    '--text-fz': mantine.fontSizes.sm,
+  },
+  '@media': {
+    [mantine.largerThan('md')]: {
+      vars: {
+        '--text-fz': mantine.fontSizes.md,
+      },
+    },
+  },
+})

package/src/likec4diagram/custom/edges/NotePopover.tsx

@@ -0,0 +1,96 @@
+import {
+  Button,
+  CloseButton,
+  Group,
+  Popover,
+  PopoverDropdown,
+  PopoverTarget,
+  ScrollAreaAutosize,
+  Stack,
+  Text,
+} from '@mantine/core'
+import { useDebouncedEffect } from '@react-hookz/web'
+import { type PropsWithChildren, useState } from 'react'
+import { isNonNull, isTruthy } from 'remeda'
+import { useMantinePortalProps } from '../../../hooks'
+import { useDiagram } from '../../../hooks/useDiagram'
+import { useDiagramContext } from '../../../hooks/useDiagramContext'
+import { stopPropagation } from '../../../utils'
+import * as edgesCss from './NotePopover.css'
+
+export const NotePopover = ({ notes, children }: PropsWithChildren<{ notes: string }>) => {
+  const {
+    isActive,
+    isParallel,
+    hasNext,
+    hasPrevious,
+  } = useDiagramContext(s => ({
+    isActive: isNonNull(s.activeWalkthrough),
+    isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
+    hasNext: s.xyedges.findIndex(e => e.id === s.activeWalkthrough?.stepId) < s.xyedges.length - 1,
+    hasPrevious: s.xyedges.findIndex(e => e.id === s.activeWalkthrough?.stepId) > 0,
+  }))
+
+  const diagram = useDiagram()
+  const [isOpened, setIsOpened] = useState(false)
+  const portalProps = useMantinePortalProps()
+
+  useDebouncedEffect(
+    () => {
+      setIsOpened(true)
+    },
+    [],
+    300,
+  )
+
+  return (
+    <Popover
+      shadow="xs"
+      offset={16}
+      opened={isOpened}
+      closeOnClickOutside={false}
+      {...portalProps}>
+      <PopoverTarget>
+        {children}
+      </PopoverTarget>
+      <PopoverDropdown
+        component={Stack}
+        p={'xs'}
+        onPointerDownCapture={stopPropagation}
+        onClick={stopPropagation}
+        onDoubleClick={stopPropagation}
+      >
+        <ScrollAreaAutosize miw={180} maw={450} mah={350} type="scroll" mx={'auto'} mt={2}>
+          <Text component="div" className={edgesCss.edgeNoteText} p={4}>{notes}</Text>
+        </ScrollAreaAutosize>
+        <CloseButton
+          size={'xs'}
+          className={edgesCss.edgeNoteCloseButton}
+          onClick={() => setIsOpened(false)}
+        />
+        {(hasPrevious || hasNext) && (
+          <Group gap={0} justify={hasPrevious ? 'flex-start' : 'flex-end'}>
+            {hasPrevious && (
+              <Button
+                variant="subtle"
+                radius={'xs'}
+                size="compact-xs"
+                onClick={() => diagram.walkthroughStep('previous')}>
+                back
+              </Button>
+            )}
+            {hasNext && (
+              <Button
+                variant="subtle"
+                radius={'xs'}
+                size="compact-xs"
+                onClick={() => diagram.walkthroughStep('next')}>
+                next
+              </Button>
+            )}
+          </Group>
+        )}
+      </PopoverDropdown>
+    </Popover>
+  )
+}

package/src/likec4diagram/custom/edges/RelationshipEdge.tsx

@@ -0,0 +1,355 @@
+import {
+  type EdgeId,
+  type NodeId,
+  isStepEdgeId,
+  nonNullable,
+} from '@likec4/core'
+import { useDebouncedEffect } from '@react-hookz/web'
+import type { XYPosition } from '@xyflow/react'
+import clsx from 'clsx'
+import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
+import { type PointerEvent as ReactPointerEvent, useEffect, useRef, useState } from 'react'
+import { first, isTruthy, last } from 'remeda'
+import { customEdge, EdgeActionButton, EdgeContainer, EdgeLabel, EdgePath } from '../../../base/primitives'
+import { useEnabledFeature } from '../../../context'
+import { useXYFlow, useXYInternalNode, useXYStoreApi } from '../../../hooks'
+import { useDiagram } from '../../../hooks/useDiagram'
+import { vector, VectorImpl } from '../../../utils/vector'
+import { bezierControlPoints, bezierPath, isSamePoint } from '../../../utils/xyflow'
+import type { Types } from '../../types'
+import * as edgesCss from './edges.css'
+import { NotePopover } from './NotePopover'
+import { RelationshipsDropdownMenu } from './RelationshipsDropdownMenu'
+import { getNodeIntersectionFromCenterToPoint } from './utils'
+
+const curve = d3line<XYPosition>()
+  .curve(curveCatmullRomOpen)
+  .x(d => d.x)
+  .y(d => d.y)
+
+export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) => {
+  const [isControlPointDragging, setIsControlPointDragging] = useState(false)
+  const xyflowStore = useXYStoreApi()
+  const xyflow = useXYFlow()
+  const diagram = useDiagram()
+  const { enableNavigateTo, enableEdgeEditing, enableRelationshipDetails } = useEnabledFeature(
+    'NavigateTo',
+    'EdgeEditing',
+    'RelationshipDetails',
+  )
+  const {
+    id,
+    source,
+    sourceX,
+    sourceY,
+    target,
+    targetX,
+    targetY,
+    data: {
+      id: edgeId,
+      navigateTo,
+      points,
+      active = false,
+      dimmed = false,
+      labelBBox,
+      labelXY,
+      ...data
+    },
+  } = props
+
+  const sourceNode = nonNullable(useXYInternalNode(source)!, `source node ${source} not found`)
+  const targetNode = nonNullable(useXYInternalNode(target)!, `target node ${target} not found`)
+
+  const isModified = isTruthy(data.controlPoints)
+    || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.position)
+    || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.position)
+
+  let controlPoints = data.controlPoints ?? bezierControlPoints(props.data)
+
+  let edgePath: string
+
+  if (isModified) {
+    const sourceCenterPos = { x: sourceX, y: sourceY }
+    const targetCenterPos = { x: targetX, y: targetY }
+
+    const nodeMargin = 6
+    const points = data.dir === 'back'
+      ? [
+        targetCenterPos,
+        getNodeIntersectionFromCenterToPoint(targetNode, first(controlPoints) ?? sourceCenterPos, nodeMargin),
+        ...controlPoints,
+        getNodeIntersectionFromCenterToPoint(sourceNode, last(controlPoints) ?? targetCenterPos, nodeMargin),
+        sourceCenterPos,
+      ]
+      : [
+        sourceCenterPos,
+        getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints) ?? targetCenterPos, nodeMargin),
+        ...controlPoints,
+        getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints) ?? sourceCenterPos, nodeMargin),
+        targetCenterPos,
+      ]
+
+    edgePath = nonNullable(curve(points))
+  } else {
+    edgePath = bezierPath(points)
+  }
+
+  let labelX = labelBBox?.x ?? 0,
+    labelY = labelBBox?.y ?? 0
+
+  const [labelPos, setLabelPos] = useState<XYPosition>({
+    x: labelXY?.x ?? labelX,
+    y: labelXY?.y ?? labelY,
+  })
+
+  const svgPathRef = useRef<SVGPathElement>(null)
+  useEffect(() => {
+    const path = svgPathRef.current
+    if (!path) return
+    const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5)
+    const point = {
+      x: Math.round(dompoint.x),
+      y: Math.round(dompoint.y),
+    }
+    setLabelPos(current => isSamePoint(current, point) ? current : point)
+  }, [edgePath])
+
+  useDebouncedEffect(
+    () => {
+      if (!labelBBox || labelBBox.x === labelPos.x && labelBBox.y === labelPos.y) {
+        return
+      }
+      // This update stays only in internal xystate, not in diagram xstate
+      xyflow.updateEdgeData(id, {
+        labelXY: {
+          x: labelPos.x,
+          y: labelPos.y,
+        },
+      })
+    },
+    [labelPos],
+    50,
+    300,
+  )
+
+  if (isModified || isControlPointDragging) {
+    labelX = labelPos.x
+    labelY = labelPos.y
+  }
+
+  const onLmbControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>, domNode: HTMLDivElement) => {
+    const { addSelectedEdges } = xyflowStore.getState()
+
+    addSelectedEdges([id])
+
+    const wasCanceled = diagram.cancelSaveManualLayout()
+    e.stopPropagation()
+    let hasMoved = false
+    let pointer = { x: e.clientX, y: e.clientY }
+
+    const onPointerMove = (e: PointerEvent) => {
+      const clientPoint = {
+        x: e.clientX,
+        y: e.clientY,
+      }
+      if (!isSamePoint(pointer, clientPoint)) {
+        setIsControlPointDragging(true)
+        hasMoved = true
+        pointer = clientPoint
+        const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false })
+        xyflow.updateEdgeData(id, xyedge => {
+          const cp = (xyedge.data.controlPoints ?? controlPoints).slice()
+          cp[index] = {
+            x: Math.round(x),
+            y: Math.round(y),
+          }
+          return {
+            controlPoints: cp,
+          }
+        })
+      }
+      e.stopPropagation()
+    }
+
+    const onPointerUp = (e: PointerEvent) => {
+      domNode.removeEventListener('pointermove', onPointerMove, {
+        capture: true,
+      })
+      if (hasMoved) {
+        e.stopPropagation()
+      }
+      if (hasMoved || wasCanceled) {
+        diagram.scheduleSaveManualLayout()
+      }
+      setIsControlPointDragging(false)
+    }
+
+    domNode.addEventListener('pointermove', onPointerMove, {
+      capture: true,
+    })
+    domNode.addEventListener('pointerup', onPointerUp, {
+      once: true,
+      capture: true,
+    })
+  }
+
+  const onRmbControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>, domNode: HTMLDivElement) => {
+    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 as EdgeId, { controlPoints: newControlPoints })
+        diagram.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()
+
+    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 }
+    })
+
+    diagram.scheduleSaveManualLayout()
+
+    e.stopPropagation()
+  }
+
+  let renderLabel: undefined | ((props: any) => any)
+  if (!isControlPointDragging) {
+    const notes = props.data.notes
+    if (notes && isStepEdgeId(props.id) && diagram.getState().context.activeWalkthrough?.stepId === props.id) {
+      renderLabel = (props: any) => (
+        <NotePopover notes={notes}>
+          <div {...props} />
+        </NotePopover>
+      )
+    } else if (enableRelationshipDetails) {
+      renderLabel = (props: any) => (
+        <RelationshipsDropdownMenu
+          disabled={!!dimmed}
+          source={source}
+          target={target}
+          edgeId={edgeId}>
+          <div {...props} />
+        </RelationshipsDropdownMenu>
+      )
+    }
+  }
+
+  return (
+    <EdgeContainer {...props} className={clsx(isControlPointDragging && edgesCss.controlDragging)}>
+      <EdgePath {...props} svgPath={edgePath} ref={svgPathRef} onEdgePointerDown={onEdgePointerDown} />
+      {enableEdgeEditing && (
+        <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>
+      )}
+      <EdgeLabel
+        edgeProps={props}
+        labelPosition={{
+          x: labelX,
+          y: labelY,
+          translate: isModified ? 'translate(-50%, 0)' : undefined,
+        }}
+        {...renderLabel && { renderRoot: renderLabel }}
+      >
+        {!isControlPointDragging && enableNavigateTo && navigateTo && (
+          <EdgeActionButton
+            {...props}
+            onClick={e => {
+              e.stopPropagation()
+              diagram.navigateTo(navigateTo)
+            }} />
+        )}
+      </EdgeLabel>
+    </EdgeContainer>
+  )
+})

package/src/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.css.ts

@@ -1,9 +1,9 @@
 import { style } from '@vanilla-extract/css'
-import { mantine, vars } from '../../theme-vars'
+import { mantine, vars } from '../../../theme-vars'
 
 export const menuDropdown = style({
   minWidth: 250,
-  maxWidth: 'min(90vw, 500px)'
+  maxWidth: 'min(90vw, 500px)',
 })
 
 export const menuItemRelationship = style({
@@ -12,7 +12,7 @@ export const menuItemRelationship = style({
   // borderRadius: mantine.radius.sm,
   // paddingTop: mantine.spacing.xs,
   // paddingBottom: mantine.spacing.xs,
-  gap: 4
+  gap: 4,
   // cursor: 'pointer',
   // ':hover': {
   // borderColor: mantine.colors.gray.light,
@@ -40,14 +40,14 @@ export const endpoint = style({
   lineHeight: 1.1,
   selectors: {
     [`:where([data-mantine-color-scheme="dark"]) &`]: {
-      color: vars.element.loContrast
-    }
-  }
+      color: vars.element.loContrast,
+    },
+  },
 })
 
 export const title = style({
   whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: mantine.fontSizes.sm
+  fontSize: mantine.fontSizes.sm,
 })
 //
 // export const sourceId = style({