function drawEdge()

in web/js/render.js [162:231]

• 45 lines of code
• 5 McCabe index (conditional complexity)

function drawEdge(graph, edge) {
    const from = graph.nodes.get(edge.from)
    const to = graph.nodes.get(edge.to)
    const ctx = graph.canvas.getContext("2d")

    setEdgeStyle(ctx, edge)

    // Do some math to connect the two circles from outside to outside

    // Get the angle from center to center
    const angle = angleBetweenNodes(from, to)

    // Get the opposite and adjacent lengths of the side of a triangle in the circle
    const o = Math.abs(graph.NODE_RADIUS * Math.sin(angle))
    const a = Math.abs(graph.NODE_RADIUS * Math.cos(angle))

    // console.log(`o: ${o}, a: ${a}`)

    // Draw the connecting line by substracting the line segments inside the circles
    ctx.beginPath()

    let dx = 1
    if (from.x > to.x) dx = -1
    const startx = from.x + (o * dx)
    const endx = to.x - (o * dx)

    let dy = 1
    if (from.y > to.y) dy = -1
    const starty = from.y + (a * dy)
    const endy = to.y - (a * dy)

    ctx.moveTo(startx, starty)
    ctx.lineTo(endx, endy)
    ctx.stroke()

    // Record the start and end of the arrow for hit testing
    edge.startx = startx
    edge.starty = starty
    edge.endx = endx
    edge.endy = endy

    // Draw the arrow head
    ctx.save()
    ctx.translate(endx, endy)
    // console.log("angle", angle)
    ctx.rotate(-angle)
    drawArrow(ctx)
    ctx.restore()

    // Locate the center of the edge label
    const leftx = (from.x > to.x) ? to.x : from.x
    const topy = (from.y > to.y) ? to.y : from.y
    edge.x = leftx + Math.abs(to.x - from.x) / 2
    edge.y = topy + Math.abs(to.y - from.y) / 2

    // Draw a white circle to hide part of the arrow
    ctx.beginPath()
    ctx.arc(edge.x, edge.y, 12, 0, 2 * Math.PI)
    ctx.strokeStyle = "white"
    ctx.fillStyle = "white"
    ctx.stroke()
    ctx.fill()
    
    // Draw the edge label
    ctx.textAlign = "center"
    ctx.textBaseline = "middle"
    setEdgeStyle(ctx, edge)
    ctx.fillText(edge.label, edge.x, edge.y)
    edge.located = true
}