From f6aee816518958f94a92e417226b4edf50a3793d Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 12 May 2022 10:02:35 +0100
Subject: [PATCH] Hide junction ports whilst dragging nodes

---
 .../@node-red/editor-client/src/js/ui/view.js         |  4 +++-
 .../@node-red/editor-client/src/sass/flow.scss        | 11 +++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

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 cdd76a4d2..04055b7f7 100755
--- 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
@@ -172,7 +172,8 @@ RED.view = (function() {
             length: function() { return set.length},
             get: function(i) { return set[i] },
             forEach: function(func) { set.forEach(func) },
-            nodes: function() { return set.map(function(n) { return n.n })}
+            nodes: function() { return set.map(function(n) { return n.n })},
+            has: function(node) { return setIds.has(node.id) }
         }
         return api;
     })();
@@ -4917,6 +4918,7 @@ RED.view = (function() {
                 var junction = d3.select(this);
                 this.setAttribute("transform", "translate(" + (d.x) + "," + (d.y) + ")");
                 if (d.dirty) {
+                    junction.classed("red-ui-flow-junction-dragging", mouse_mode === RED.state.MOVING_ACTIVE && movingSet.has(d))
                     junction.classed("selected", !!d.selected)
                     dirtyNodes[d.id] = d;
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
index 712731eb6..2e6de1932 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
@@ -379,13 +379,19 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     white-space: pre;
     @include disable-selection;
 }
-.red-ui-flow-junction:hover {
+.red-ui-flow-junction-dragging {
+    .red-ui-flow-junction-background {
+        background: red !important
+    }
+}
+.red-ui-flow-junction:not(.red-ui-flow-junction-dragging):hover {
     .red-ui-flow-junction-background {
         transform: scale(1.4);
         stroke-width: 0.6;
     }
     .red-ui-flow-junction-port {
-        opacity: 1
+        opacity: 1;
+        pointer-events: auto;
     }
     .red-ui-flow-junction-port-input {
         transform: translate(-10px,0)
@@ -401,6 +407,7 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     cursor: crosshair;
     transition: transform 0.1s;
     opacity: 0;
+    pointer-events: none;
 }
 .red-ui-flow-junction-background {
     stroke: $node-border;