From 8502cf8498476df5452cd2adab7d384355bafac4 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 18 Dec 2018 21:45:33 +0000
Subject: [PATCH] Highlight port on node hover while joining

---
 .../@node-red/editor-client/src/js/ui/view.js | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
index c4ed62d48..131f49b52 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -2033,8 +2033,9 @@ RED.view = (function() {
             return;
         }
         var direction = d._def? (d.inputs > 0 ? 1: 0) : (d.direction == "in" ? 0: 1)
-
+        var wasJoining = false;
         if (mouse_mode === RED.state.JOINING || mouse_mode === RED.state.QUICK_JOINING) {
+            wasJoining = true;
             if (drag_lines.length > 0) {
                 if (drag_lines[0].virtualLink) {
                     if (d.type === 'link in') {
@@ -2045,7 +2046,11 @@ RED.view = (function() {
                 }
             }
         }
+
         portMouseUp(d, direction, 0);
+        if (wasJoining) {
+            d3.selectAll(".port_hovered").classed("port_hovered",false);
+        }
     }
 
     function nodeMouseDown(d) {
@@ -2499,6 +2504,19 @@ RED.view = (function() {
                                         }
                                     },500);
                                 }
+                            } else if (mouse_mode === RED.state.JOINING || mouse_mode === RED.state.QUICK_JOINING) {
+                                if (drag_lines.length > 0) {
+                                    var selectClass;
+                                    var portType;
+                                    if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) {
+                                        selectClass = ".port_input .port";
+                                        portType = PORT_TYPE_INPUT;
+                                    } else {
+                                        selectClass = ".port_output .port";
+                                        portType = PORT_TYPE_OUTPUT;
+                                    }
+                                    portMouseOver(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
+                                }
                             }
                         })
                         .on("mouseout",function(d) {
@@ -2509,6 +2527,20 @@ RED.view = (function() {
                                 portLabelHover.remove();
                                 portLabelHover = null;
                             }
+                            if (mouse_mode === RED.state.JOINING || mouse_mode === RED.state.QUICK_JOINING) {
+                                if (drag_lines.length > 0) {
+                                    var selectClass;
+                                    var portType;
+                                    if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) {
+                                        selectClass = ".port_input .port";
+                                        portType = PORT_TYPE_INPUT;
+                                    } else {
+                                        selectClass = ".port_output .port";
+                                        portType = PORT_TYPE_OUTPUT;
+                                    }
+                                    portMouseOut(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
+                                }
+                            }
                         });
 
                    //node.append("rect").attr("class", "node-gradient-top").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-top)").style("pointer-events","none");