@lupinum/board-connections

const plugin = connectionsPlugin({ routing: 'bezier' })

import { createBoardEngine } from '@lupinum/board-core'
import { connectionsPlugin } from '@lupinum/board-connections'

const engine = createBoardEngine({
  plugins: [connectionsPlugin({ routing: 'bezier' })],
})

createEdge<T>(input: {
  id?: EdgeId
  from: NodeId
  to: NodeId
  fromAnchor?: AnchorPosition
  toAnchor?: AnchorPosition
  fromEnd?: EdgeEnd
  toEnd?: EdgeEnd
  label?: string
  color?: string
  data: T
  zIndex?: number
}): BoardEdge<T>

const edge = engine.plugins.connections.createEdge({
  from: nodeA,
  to: nodeB,
  label: 'depends on',
  color: '#0f766e',
  data: {},
})

deleteEdge(id: EdgeId): void

updateEdge<T>(id: EdgeId, patch: BoardEdgePatch<T>): BoardEdge<T>

engine.plugins.connections.updateEdge(edge.id, {
  to: anotherNodeId,
  toAnchor: undefined,
})

getEdge(id: EdgeId): BoardEdge | undefined

getEdges(): BoardEdge[]

getEdgesFrom(id: NodeId): BoardEdge[]

getEdgesTo(id: NodeId): BoardEdge[]

getEdgesBetween(from: NodeId, to: NodeId): BoardEdge[]

import { BoardConnectionLayer } from '@lupinum/board-connections/vue'

<BoardConnectionLayer routing="smooth-step">
  <template #edge="{ edge, route }">
    <path :d="route.path" stroke="blue" stroke-width="2" fill="none" />
    <text :x="route.labelPoint.x" :y="route.labelPoint.y">{{ edge.label }}</text>
  </template>
</BoardConnectionLayer>

<BoardRoot :engine="engine">
  <BoardConnectionLayer />
</BoardRoot>

function resolveAnchorPoint(
  node: Pick<BoardNode, 'x' | 'y' | 'width' | 'height'>,
  anchor: AnchorPosition,
): Point

function resolveAutoAnchorSide(
  source: Pick<BoardNode, 'x' | 'y' | 'width' | 'height'>,
  target: Pick<BoardNode, 'x' | 'y' | 'width' | 'height'>,
  role: 'source' | 'target',
  previousSide?: AnchorSide,
): AnchorSide

function resolveConnectionEndpoint(
  edge: BoardEdge,
  node: Pick<BoardNode, 'id' | 'x' | 'y' | 'width' | 'height'>,
  otherNode: Pick<BoardNode, 'id' | 'x' | 'y' | 'width' | 'height'>,
  role: 'source' | 'target',
  previousSide?: AnchorSide,
): ResolvedConnectionEndpoint

function buildConnectionRoute(input: {
  source: ResolvedConnectionEndpoint
  target: ResolvedConnectionEndpoint
  routing?: ConnectionRouting
}): ConnectionRoute

function buildArcRoute(
  source: ResolvedConnectionEndpoint,
  target: ResolvedConnectionEndpoint,
  options?: ArcOptions,
): ConnectionRoute

import {
  EDGE_COLOR_PRESETS,
  colorForPreset,
  presetForColor,
  resolvePresetColor,
} from '@lupinum/board-connections'

function resolveFloatingEndpoint(
  point: Point,
  otherPoint: Point,
  role: 'source' | 'target',
  previousSide?: AnchorSide,
): ResolvedConnectionEndpoint

function resolveEdgeRenderState(
  edge: BoardEdge,
  sourceNode: Pick<BoardNode, 'id' | 'x' | 'y' | 'width' | 'height'>,
  targetNode: Pick<BoardNode, 'id' | 'x' | 'y' | 'width' | 'height'>,
  options?: {
    routing?: ConnectionRouting
    previousSourceSide?: AnchorSide
    previousTargetSide?: AnchorSide
  },
): {
  source: ResolvedConnectionEndpoint
  target: ResolvedConnectionEndpoint
  route: ConnectionRoute
}

function getVisibleEdges(
  engine: BoardEngine,
  bounds: Bounds,
  routing?: ConnectionRouting,
): BoardEdge[]

interface BoardEdge<T = Record<string, unknown>> {
  id: EdgeId
  from: NodeId
  to: NodeId
  fromAnchor?: AnchorPosition // where the edge attaches on the source node
  toAnchor?: AnchorPosition // where the edge attaches on the target node
  fromEnd?: EdgeEnd
  toEnd?: EdgeEnd
  label?: string
  color?: string
  data: T // custom edge payload
  zIndex: number
}

interface BoardEdgePatch<T = Record<string, unknown>> {
  from?: NodeId
  to?: NodeId
  fromAnchor?: AnchorPosition
  toAnchor?: AnchorPosition
  fromEnd?: EdgeEnd
  toEnd?: EdgeEnd
  label?: string
  color?: string
  data?: T
}

interface AnchorPosition {
  side: AnchorSide // 'top' | 'right' | 'bottom' | 'left'
  offset: number // 0–1 position along the side (0.5 = center)
}

engine.plugins.connections.updateEdge(edgeId, {
  fromAnchor: undefined,
})

type AnchorSide = 'top' | 'right' | 'bottom' | 'left'

type ConnectionRouting = 'bezier' | 'smooth-step' | 'step' | 'straight' | 'arc'

type ConnectionEndpointMode = 'auto' | 'manual'

type EdgeEnd = 'none' | 'arrow'

interface ConnectionConfig {
  routing: ConnectionRouting
  endpointMode: ConnectionEndpointMode
  defaultArrow: 'none' | 'start' | 'end' | 'both'
}

interface CreateNodeForConnectionContext {
  sourceNodeId: NodeId
  sourceSide: AnchorSide
  pointerWorld: Point
  candidateAnchor: AnchorPosition | null
}

interface ResolvedConnectionEndpoint {
  nodeId: NodeId
  node: Pick<BoardNode, 'id' | 'x' | 'y' | 'width' | 'height'>
  side: AnchorSide
  offset: number
  point: Point
  kind: 'explicit' | 'auto'
}

interface ConnectionRoute {
  routing: ConnectionRouting
  path: string
  labelPoint: Point
  bounds: Bounds
  waypoints: Point[]
  segments: ConnectionRouteSegment[]
}

type ConnectionRouteSegment =
  | { type: 'line'; from: Point; to: Point }
  | {
      type: 'cubic'
      from: Point
      control1: Point
      control2: Point
      to: Point
    }

interface ConnectionsApi {
  createEdge<T>(input: CreateEdgeInput<T>): BoardEdge<T>
  updateEdge<T>(id: EdgeId, patch: BoardEdgePatch<T>): BoardEdge<T>
  deleteEdge(id: EdgeId): void
  getEdge(id: EdgeId): BoardEdge | undefined
  getEdges(): BoardEdge[]
  getEdgesFrom(id: NodeId): BoardEdge[]
  getEdgesTo(id: NodeId): BoardEdge[]
  getEdgesBetween(from: NodeId, to: NodeId): BoardEdge[]
  getConfig(): ConnectionConfig
}

engine.on('edge:created', (edge) => {
  console.log('New edge:', edge.from, '->', edge.to)
})

engine.on('edge:updated', (edge, prev) => {
  console.log('Moved edge:', prev.id, prev.to, '->', edge.to)
})