Prep link connector (#725)

Prepration for LinkConnector replacement

- Simplifies code
- Minor perf improvement
- nits and clean up

src/LGraphCanvas.ts

@@ -2736,16 +2736,9 @@ export class LGraphCanvas implements ConnectionColorContext {
                 node.inputs[inputId] &&
                 LiteGraph.isValidConnection(firstLink.output.type, node.inputs[inputId].type)
               ) {
-                // check if I have a slot below de mouse
-                if (
-                  inputId != -1 &&
-                  node.inputs[inputId] &&
-                  LiteGraph.isValidConnection(firstLink.output.type, node.inputs[inputId].type)
-                ) {
-                  highlightPos = pos
-                  // XXX CHECK THIS
-                  highlightInput = node.inputs[inputId]
-                }
+                highlightPos = pos
+                // XXX CHECK THIS
+                highlightInput = node.inputs[inputId]
               }
             } else if (firstLink.input) {
               // Connecting from an input to an output
@@ -4090,9 +4083,10 @@ export class LGraphCanvas implements ConnectionColorContext {
 
       if (this.connecting_links?.length) {
         // current connection (the one being dragged by the mouse)
-        for (const link of this.connecting_links) {
-          ctx.lineWidth = this.connections_width
+        const highlightPos = this.#getHighlightPosition()
+        ctx.lineWidth = this.connections_width
 
+        for (const link of this.connecting_links) {
           const connInOrOut = link.output || link.input
 
           const connType = connInOrOut?.type
@@ -4114,7 +4108,6 @@ export class LGraphCanvas implements ConnectionColorContext {
           const pos = rerouteIdToConnectTo == null
             ? link.pos
             : (this.graph.reroutes.get(rerouteIdToConnectTo)?.pos ?? link.pos)
-          const highlightPos = this.#getHighlightPosition()
           // the connection being dragged by the mouse
           this.renderLink(
             ctx,
@@ -4151,10 +4144,10 @@ export class LGraphCanvas implements ConnectionColorContext {
             ctx.arc(this.graph_mouse[0], this.graph_mouse[1], 4, 0, Math.PI * 2)
           }
           ctx.fill()
-
-          // Gradient half-border over target node
-          this.#renderSnapHighlight(ctx, highlightPos)
         }
+
+        // Gradient half-border over target node
+        this.#renderSnapHighlight(ctx, highlightPos)
       }
 
       // Area-selection rectangle
@@ -4853,13 +4846,12 @@ export class LGraphCanvas implements ConnectionColorContext {
     ctx.globalAlpha = this.editor_alpha
     // for every node
     const nodes = this.graph._nodes
-    for (let n = 0, l = nodes.length; n < l; ++n) {
-      const node = nodes[n]
+    for (const node of nodes) {
       // for every input (we render just inputs because it is easier as every slot can only have one input)
-      if (!node.inputs || !node.inputs.length) continue
+      const { inputs } = node
+      if (!inputs?.length) continue
 
-      for (let i = 0; i < node.inputs.length; ++i) {
-        const input = node.inputs[i]
+      for (const [i, input] of inputs.entries()) {
         if (!input || input.link == null) continue
 
         const link_id = input.link
@@ -4902,14 +4894,10 @@ export class LGraphCanvas implements ConnectionColorContext {
           continue
 
         const start_slot = start_node.outputs[outputId]
-        const end_slot = node.inputs[i]
-        if (!start_slot || !end_slot) continue
-        const start_dir =
-          start_slot.dir ||
-          LinkDirection.RIGHT
-        const end_dir =
-          end_slot.dir ||
-          LinkDirection.LEFT
+        if (!start_slot) continue
+
+        const start_dir = start_slot.dir || LinkDirection.RIGHT
+        const end_dir = input.dir || LinkDirection.LEFT
 
         // Has reroutes
         if (reroutes.length) {

src/NodeSlot.ts

@@ -127,8 +127,8 @@ export abstract class NodeSlot implements INodeSlot {
       lowQuality = false,
       renderText = true,
       highlight = false,
-      doStroke: _doStroke = false,
     } = options
+    let { doStroke = false } = options
 
     // Save the current fillStyle and strokeStyle
     const originalFillStyle = ctx.fillStyle
@@ -141,7 +141,6 @@ export abstract class NodeSlot implements INodeSlot {
     ) as SlotShape
 
     ctx.beginPath()
-    let doStroke = _doStroke
     let doFill = true
 
     ctx.fillStyle = this.renderingColor(colorContext)