Add reroute snap highlight (#813)

### Reroute snap highlight

When connecting links, a simple border now helps to indicate that a
connecting link can be dropped on a reroute below the pointer.

### Reroute ID badges

Optionally, intended for debugging purposes, drawing of ID badges can
also be manually enabled via console.

src/LGraphCanvas.ts

@@ -2671,12 +2671,14 @@ export class LGraphCanvas implements ConnectionColorContext {
         const reroute = graph.getRerouteOnPos(e.canvasX, e.canvasY)
         if (reroute) {
           underPointer |= CanvasItem.Reroute
+          linkConnector.overReroute = reroute
 
           if (linkConnector.isConnecting && linkConnector.isRerouteValidDrop(reroute)) {
             this._highlight_pos = reroute.pos
           }
         } else {
           this._highlight_pos &&= undefined
+          linkConnector.overReroute &&= undefined
         }
 
         // Not over a node
@@ -3947,7 +3949,14 @@ export class LGraphCanvas implements ConnectionColorContext {
     if (!LiteGraph.snap_highlights_node) return
 
     const { linkConnector } = this
-    const { overWidget } = linkConnector
+    const { overReroute, overWidget } = linkConnector
+    // Reroute highlight
+    if (overReroute) {
+      const { globalAlpha } = ctx
+      ctx.globalAlpha = 1
+      overReroute.drawHighlight(ctx, "#ffcc00aa")
+      ctx.globalAlpha = globalAlpha
+    }
 
     // Ensure we're mousing over a node and connecting a link
     const node = this.node_over

src/Reroute.ts

@@ -11,6 +11,7 @@ import type {
 import type { LGraphNode, NodeId } from "./LGraphNode"
 import type { Serialisable, SerialisableReroute } from "./types/serialisation"
 
+import { LGraphBadge } from "./LGraphBadge"
 import { type LinkId, LLink } from "./LLink"
 import { distance } from "./measure"
 
@@ -31,6 +32,7 @@ export interface FloatingRerouteSlot {
  */
 export class Reroute implements Positionable, LinkSegment, Serialisable<SerialisableReroute> {
   static radius: number = 10
+  static drawIdBadge: boolean = false
 
   #malloc = new Float32Array(8)
 
@@ -413,6 +415,31 @@ export class Reroute implements Positionable, LinkSegment, Serialisable<Serialis
       ctx.arc(pos[0], pos[1], Reroute.radius * 1.2, 0, 2 * Math.PI)
       ctx.stroke()
     }
+
+    if (Reroute.drawIdBadge) {
+      const idBadge = new LGraphBadge({ text: this.id.toString() })
+      const x = pos[0] - idBadge.getWidth(ctx) * 0.5
+      const y = pos[1] - idBadge.height - Reroute.radius - 2
+      idBadge.draw(ctx, x, y)
+    }
+  }
+
+  drawHighlight(ctx: CanvasRenderingContext2D, colour: CanvasColour): void {
+    const { pos } = this
+
+    const { strokeStyle, lineWidth } = ctx
+    ctx.strokeStyle = strokeStyle
+    ctx.lineWidth = lineWidth
+
+    ctx.strokeStyle = colour
+    ctx.lineWidth = 1
+
+    ctx.beginPath()
+    ctx.arc(pos[0], pos[1], Reroute.radius * 1.5, 0, 2 * Math.PI)
+    ctx.stroke()
+
+    ctx.strokeStyle = strokeStyle
+    ctx.lineWidth = lineWidth
   }
 
   /** @inheritdoc */

src/canvas/LinkConnector.ts

@@ -78,6 +78,9 @@ export class LinkConnector {
   /** The type (returned by downstream callback) for {@link overWidget} */
   overWidgetType?: string
 
+  /** The reroute beneath the pointer, if it is a valid connection target. */
+  overReroute?: Reroute
+
   readonly #setConnectingLinks: (value: ConnectingLink[]) => void
 
   constructor(setConnectingLinks: (value: ConnectingLink[]) => void) {