From 3eb9533ad2ecf1767a5f978f81fb05ffd19ccaec Mon Sep 17 00:00:00 2001
From: Eike Michel Wobken <eike_michel.wobken@porsche-engineering.de>
Date: Thu, 8 Jul 2021 17:05:37 +0200
Subject: [PATCH] Highlight arrow shape when connecting slots with arrow shape

---
 src/litegraph.js | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/litegraph.js b/src/litegraph.js
index 95f1527d3..f997c7c71 100755
--- a/src/litegraph.js
+++ b/src/litegraph.js
@@ -5682,9 +5682,11 @@ LGraphNode.prototype.executeAction = function(action)
                             var slot_type = node.inputs[slot].type;
                             if ( LiteGraph.isValidConnection( this.connecting_output.type, slot_type ) ) {
                                 this._highlight_input = pos;
+                                this._highlight_input_slot = node.inputs[slot];
                             }
                         } else {
                             this._highlight_input = null;
+                            this._highlight_input_slot = null;
                         }
                     }
                 }
@@ -6922,7 +6924,13 @@ LGraphNode.prototype.executeAction = function(action)
                         14,
                         10
                     );
-                } else {
+                } else if (this.connecting_output.shape === LiteGraph.ARROW_SHAPE) {
+                    ctx.moveTo(this.connecting_pos[0] + 8, this.connecting_pos[1] + 0.5);
+                    ctx.lineTo(this.connecting_pos[0] - 4, this.connecting_pos[1] + 6 + 0.5);
+                    ctx.lineTo(this.connecting_pos[0] - 4, this.connecting_pos[1] - 6 + 0.5);
+                    ctx.closePath();
+                } 
+                else {
                     ctx.arc(
                         this.connecting_pos[0],
                         this.connecting_pos[1],
@@ -6936,13 +6944,21 @@ LGraphNode.prototype.executeAction = function(action)
                 ctx.fillStyle = "#ffcc00";
                 if (this._highlight_input) {
                     ctx.beginPath();
-                    ctx.arc(
-                        this._highlight_input[0],
-                        this._highlight_input[1],
-                        6,
-                        0,
-                        Math.PI * 2
-                    );
+                    var shape = this._highlight_input_slot.shape;
+                    if (shape === LiteGraph.ARROW_SHAPE) {
+                        ctx.moveTo(this._highlight_input[0] + 8, this._highlight_input[1] + 0.5);
+                        ctx.lineTo(this._highlight_input[0] - 4, this._highlight_input[1] + 6 + 0.5);
+                        ctx.lineTo(this._highlight_input[0] - 4, this._highlight_input[1] - 6 + 0.5);
+                        ctx.closePath();
+                    } else {
+                        ctx.arc(
+                            this._highlight_input[0],
+                            this._highlight_input[1],
+                            6,
+                            0,
+                            Math.PI * 2
+                        );
+                    }
                     ctx.fill();
                 }
             }