@likec4/diagram 1.41.0 → 1.42.0

package/src/likec4diagram/DiagramXYFlow.tsx

@@ -1,240 +0,0 @@
-import { type EdgeId, type NodeId, nonNullable } from '@likec4/core'
-import { cx } from '@likec4/styles/css'
-import { useCallbackRef, useDebouncedCallback, useTimeout } from '@mantine/hooks'
-import { useCustomCompareMemo } from '@react-hookz/web'
-import type { OnMove, OnMoveEnd } from '@xyflow/system'
-import { deepEqual, shallowEqual } from 'fast-equals'
-import { type PropsWithChildren } from 'react'
-import type { Simplify } from 'type-fest'
-import { BaseXYFlow } from '../base/BaseXYFlow'
-import { useDiagramEventHandlers } from '../context'
-import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics'
-import { useUpdateEffect } from '../hooks'
-import { useDiagram, useDiagramContext } from '../hooks/useDiagram'
-import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
-import type { DiagramContext } from '../state/types'
-import { BuiltinNodes as defaultNodeTypes, edgeTypes, SequenceParallelArea } from './custom'
-import { DiagramUI } from './DiagramUI'
-import type { Types } from './types'
-import { useLayoutConstraints } from './useLayoutConstraints'
-
-const selectXYProps = (ctx: DiagramContext) => ({
-  initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
-  nodes: ctx.xynodes,
-  edges: ctx.xyedges,
-  pannable: ctx.pannable,
-  zoomable: ctx.zoomable,
-  fitViewPadding: ctx.fitViewPadding,
-  enableFitView: ctx.features.enableFitView,
-  enableReadOnly: ctx.features.enableReadOnly || ctx.toggledFeatures.enableReadOnly
-    // if dynamic view display mode is sequence, enable readonly
-    || (ctx.dynamicViewVariant === 'sequence' && ctx.view._type === 'dynamic'),
-  ...(!ctx.features.enableFitView && {
-    viewport: {
-      x: -Math.min(ctx.view.bounds.x, 0),
-      y: -Math.min(ctx.view.bounds.y, 0),
-      zoom: 1,
-    },
-  }),
-})
-const equalsXYProps = (a: ReturnType<typeof selectXYProps>, b: ReturnType<typeof selectXYProps>): boolean =>
-  a.initialized === b.initialized &&
-  a.pannable === b.pannable &&
-  a.zoomable === b.zoomable &&
-  a.enableFitView === b.enableFitView &&
-  a.enableReadOnly === b.enableReadOnly &&
-  deepEqual(a.fitViewPadding, b.fitViewPadding) &&
-  shallowEqual(a.nodes, b.nodes) &&
-  shallowEqual(a.edges, b.edges) &&
-  shallowEqual(a.viewport ?? null, b.viewport ?? null)
-
-export type LikeC4DiagramXYFlowProps = PropsWithChildren<
-  Simplify<
-    Pick<
-      LikeC4DiagramProperties<any>,
-      | 'background'
-      | 'nodesDraggable'
-      | 'nodesSelectable'
-      | 'reactFlowProps'
-      | 'renderNodes'
-    >
-  >
->
-export function LikeC4DiagramXYFlow({
-  background = 'dots',
-  nodesDraggable = false,
-  nodesSelectable = false,
-  reactFlowProps = {},
-  children,
-  renderNodes,
-}: LikeC4DiagramXYFlowProps) {
-  const diagram = useDiagram()
-  const {
-    initialized,
-    nodes,
-    edges,
-    enableReadOnly,
-    enableFitView,
-    ...props
-  } = useDiagramContext(selectXYProps, equalsXYProps)
-
-  const {
-    onNodeContextMenu,
-    onCanvasContextMenu,
-    onEdgeContextMenu,
-    onNodeClick,
-    onEdgeClick,
-    onCanvasClick,
-    onCanvasDblClick,
-  } = useDiagramEventHandlers()
-
-  const notReadOnly = !enableReadOnly,
-    isReducedGraphics = useIsReducedGraphics(),
-    layoutConstraints = useLayoutConstraints(),
-    $isPanning = usePanningAtom(),
-    isPanning = useTimeout(() => {
-      $isPanning.set(true)
-    }, isReducedGraphics ? 120 : 400),
-    notPanning = useDebouncedCallback(() => {
-      isPanning.clear()
-      if ($isPanning.get()) {
-        $isPanning.set(false)
-      }
-    }, isReducedGraphics ? 350 : 200),
-    onMove: OnMove = useCallbackRef((event) => {
-      if (!event) {
-        return
-      }
-      if (!$isPanning.get()) {
-        isPanning.start()
-      }
-      notPanning()
-    }),
-    onMoveEnd: OnMoveEnd = useCallbackRef((event, viewport) => {
-      isPanning.clear()
-      diagram.send({ type: 'xyflow.viewportMoved', viewport, manually: !!event })
-    }),
-    onViewportResize = useCallbackRef(() => {
-      diagram.send({ type: 'xyflow.resized' })
-    }),
-    nodeTypes = useCustomCompareMemo(
-      () => {
-        return {
-          element: renderNodes?.element ?? defaultNodeTypes.element,
-          deployment: renderNodes?.deployment ?? defaultNodeTypes.deployment,
-          'compound-element': renderNodes?.compoundElement ?? defaultNodeTypes.compoundElement,
-          'compound-deployment': renderNodes?.compoundDeployment ?? defaultNodeTypes.compoundDeployment,
-          'view-group': renderNodes?.viewGroup ?? defaultNodeTypes.viewGroup,
-          'seq-actor': renderNodes?.sequenceActor ?? defaultNodeTypes.sequenceActor,
-          'seq-parallel': SequenceParallelArea,
-        } satisfies Record<Types.Node['type'], any>
-      },
-      [renderNodes],
-      shallowEqual,
-    )
-
-  useUpdateEffect(() => {
-    console.warn('renderNodes changed - this might degrade performance')
-  }, [nodeTypes])
-
-  return (
-    <>
-      <BaseXYFlow<Types.Node, Types.Edge>
-        nodes={nodes}
-        edges={edges}
-        className={cx(initialized ? 'initialized' : 'not-initialized')}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        onNodesChange={useCallbackRef((changes) => {
-          diagram.send({ type: 'xyflow.applyNodeChanges', changes })
-        })}
-        onEdgesChange={useCallbackRef((changes) => {
-          diagram.send({ type: 'xyflow.applyEdgeChanges', 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()
-          e.preventDefault()
-          diagram.send({ type: 'xyflow.paneDblClick' })
-          onCanvasDblClick?.(e as any)
-        })}
-        onNodeMouseEnter={useCallbackRef((_event, node) => {
-          _event.stopPropagation()
-          if (!node.data.hovered) {
-            diagram.send({ type: 'xyflow.nodeMouseEnter', node })
-          }
-        })}
-        onNodeMouseLeave={useCallbackRef((_event, node) => {
-          _event.stopPropagation()
-          if (node.data.hovered) {
-            diagram.send({ type: 'xyflow.nodeMouseLeave', node })
-          }
-        })}
-        onEdgeMouseEnter={useCallbackRef((event, edge) => {
-          event.stopPropagation()
-          if (!edge.data.hovered) {
-            diagram.send({ type: 'xyflow.edgeMouseEnter', edge, event })
-          }
-        })}
-        onEdgeMouseLeave={useCallbackRef((event, edge) => {
-          event.stopPropagation()
-          if (edge.data.hovered) {
-            diagram.send({ type: 'xyflow.edgeMouseLeave', edge, event })
-          }
-        })}
-        {...props.pannable && {
-          onMove,
-        }}
-        onMoveEnd={onMoveEnd}
-        onInit={useCallbackRef((instance) => {
-          diagram.send({ type: 'xyflow.init', instance })
-        })}
-        onNodeContextMenu={useCallbackRef((event, node) => {
-          const diagramNode = nonNullable(
-            diagram.findDiagramNode(node.id as NodeId),
-            `diagramNode ${node.id} not found`,
-          )
-          onNodeContextMenu?.(diagramNode, event)
-        })}
-        onEdgeContextMenu={useCallbackRef((event, edge) => {
-          const diagramEdge = nonNullable(
-            diagram.findDiagramEdge(edge.id as EdgeId),
-            `diagramEdge ${edge.id} not found`,
-          )
-          onEdgeContextMenu?.(diagramEdge, event)
-        })}
-        onPaneContextMenu={useCallbackRef((event) => {
-          onCanvasContextMenu?.(event as any)
-        })}
-        {...enableFitView && {
-          onViewportResize,
-        }}
-        nodesDraggable={notReadOnly && nodesDraggable}
-        nodesSelectable={nodesSelectable}
-        edgesFocusable={false}
-        {...(notReadOnly && nodesDraggable && layoutConstraints)}
-        {...props}
-        {...reactFlowProps}>
-        {children}
-      </BaseXYFlow>
-      <DiagramUI key={'DiagramUI'} />
-    </>
-  )
-}

package/src/likec4diagram/convert-to-xyflow.ts

@@ -1,45 +0,0 @@
-import type { DynamicViewDisplayVariant, LayoutedView, WhereOperator } from '@likec4/core/types'
-import type { Types } from './types'
-import { diagramToXY } from './xyflow-diagram/diagram-view'
-import { sequenceViewToXY } from './xyflow-sequence/sequence-view'
-
-type ConvertToXYFlowInput = {
-  view: LayoutedView
-  where: WhereOperator | null
-  nodesSelectable: boolean
-  dynamicViewVariant: DynamicViewDisplayVariant
-}
-
-export function convertToXYFlow({ dynamicViewVariant, ...params }: ConvertToXYFlowInput): {
-  view: LayoutedView
-  xynodes: Types.Node[]
-  xyedges: Types.Edge[]
-} {
-  const view = params.view
-  const isDynamic = view._type === 'dynamic'
-
-  const { bounds, xynodes, xyedges } = isDynamic && dynamicViewVariant === 'sequence'
-    ? sequenceViewToXY(view)
-    : diagramToXY(params)
-
-  if (isDynamic && view.variant !== dynamicViewVariant) {
-    return {
-      view: {
-        ...view,
-        bounds,
-        variant: dynamicViewVariant,
-      },
-      xynodes,
-      xyedges,
-    }
-  }
-
-  return {
-    view: bounds === view.bounds ? view : {
-      ...view,
-      bounds,
-    },
-    xynodes,
-    xyedges,
-  }
-}

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

@@ -1,373 +0,0 @@
-import {
-  type EdgeId,
-  nonNullable,
-} from '@likec4/core'
-import { cx as clsx } from '@likec4/styles/css'
-import { useDebouncedEffect } from '@react-hookz/web'
-import type { XYPosition } from '@xyflow/react'
-import { EdgeLabelRenderer } from '@xyflow/react'
-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 { ZIndexes } from '../../../base/const'
-import {
-  customEdge,
-  EdgeActionButton,
-  EdgeContainer,
-  EdgeLabel,
-  EdgeLabelContainer,
-  EdgePath,
-} from '../../../base/primitives'
-import { useEnabledFeatures } from '../../../context/DiagramFeatures'
-import { useDiagram } from '../../../hooks/useDiagram'
-import { useXYFlow, useXYInternalNode, useXYStoreApi } from '../../../hooks/useXYFlow'
-import { roundDpr } from '../../../utils/roundDpr'
-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 { 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,
-  } = useEnabledFeatures()
-  const {
-    id,
-    source,
-    sourceX,
-    sourceY,
-    target,
-    targetX,
-    targetY,
-    selected = false,
-    data: {
-      id: edgeId,
-      points,
-      hovered = false,
-      active = false,
-      dimmed = false,
-      labelBBox,
-      labelXY,
-      ...data
-    },
-    style = {},
-  } = props
-
-  const navigateTo = enableNavigateTo ? data.navigateTo : undefined
-
-  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: roundDpr(dompoint.x),
-      y: roundDpr(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
-      diagram.updateEdgeData(id as EdgeId, {
-        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)
-        if (!hasMoved) {
-          diagram.send({ type: 'xyflow.edgeEditingStarted', edge: props.data })
-          hasMoved = true
-        }
-        pointer = clientPoint
-        const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false })
-        const cp = controlPoints.slice()
-        cp[index] = {
-          x: roundDpr(x),
-          y: roundDpr(y),
-        }
-        diagram.updateEdgeData(id as EdgeId, {
-          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)
-    }
-
-    const onClick = (e: MouseEvent) => {
-      e.stopPropagation()
-      e.preventDefault()
-    }
-
-    domNode.addEventListener('pointermove', onPointerMove, {
-      capture: true,
-    })
-    domNode.addEventListener('pointerup', onPointerUp, {
-      once: true,
-      capture: true,
-    })
-    // Handle click to prevent it from being handled by the edge #1945
-    domNode.addEventListener('click', onClick, {
-      capture: true,
-      once: 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(() => {
-        diagram.updateEdgeData(id as EdgeId, { controlPoints: newControlPoints })
-        diagram.scheduleSaveManualLayout()
-      }, 10)
-    }
-
-    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
-    }
-    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]!,
-        fromCurrentToNext = b.sub(a),
-        fromCurrentToNew = newPoint.sub(a),
-        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 = controlPoints.slice() || []
-    newControlPoints.splice(insertionIndex, 0, newPoint)
-
-    diagram.updateEdgeData(id as EdgeId, { controlPoints: newControlPoints })
-
-    diagram.scheduleSaveManualLayout()
-
-    e.stopPropagation()
-  }
-
-  let zIndex = ZIndexes.Edge
-  if (hovered || active) {
-    // Move above the elements
-    zIndex = ZIndexes.Element + 1
-  }
-
-  return (
-    <>
-      <EdgeContainer {...props} className={clsx(isControlPointDragging && edgesCss.controlDragging)}>
-        <EdgePath
-          edgeProps={props}
-          svgPath={edgePath}
-          ref={svgPathRef}
-          {...enableEdgeEditing && {
-            onEdgePointerDown,
-          }} />
-        <EdgeLabelContainer
-          edgeProps={props}
-          labelPosition={{
-            x: labelX,
-            y: labelY,
-            translate: isModified ? 'translate(-50%, 0)' : undefined,
-          }}
-        >
-          <EdgeLabel edgeProps={props}>
-            {navigateTo && (
-              <EdgeActionButton
-                onClick={e => {
-                  e.stopPropagation()
-                  diagram.navigateTo(navigateTo)
-                }} />
-            )}
-          </EdgeLabel>
-        </EdgeLabelContainer>
-      </EdgeContainer>
-      {/* Render control points above edge label  */}
-      {enableEdgeEditing && controlPoints.length > 0 && (selected || hovered || isControlPointDragging) && (
-        <EdgeLabelRenderer>
-          <EdgeContainer
-            component="svg"
-            className={edgesCss.controlPointsContainer}
-            {...props}
-            style={{
-              ...style,
-              zIndex,
-            }}
-          >
-            <g
-              onContextMenu={e => {
-                e.preventDefault()
-                e.stopPropagation()
-              }}>
-              {controlPoints.map((p, i) => (
-                <circle
-                  onPointerDown={e => onControlPointerDown(i, e)}
-                  className={clsx('nodrag nopan', edgesCss.controlPoint)}
-                  key={'controlPoints' + edgeId + '#' + i}
-                  cx={Math.round(p.x)}
-                  cy={Math.round(p.y)}
-                  r={3}
-                />
-              ))}
-            </g>
-          </EdgeContainer>
-        </EdgeLabelRenderer>
-      )}
-    </>
-  )
-})