From 3a50fbf4715b2ad7ebe682e2d6b9213a7d963a6f Mon Sep 17 00:00:00 2001
From: lathesky <43309591+fullmooooon@users.noreply.github.com>
Date: Wed, 6 Mar 2024 07:07:00 +0000
Subject: [PATCH] Double the web UI performance when using "DragLine".

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

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 fa20f3f61..2ab136085 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
@@ -954,6 +954,7 @@ RED.view = (function() {
     }
 
     function showDragLines(nodes) {
+        globalThis.isShowingDragLines = true
         showAllLinkPorts = -1;
         for (var i=0;i<nodes.length;i++) {
             var node = nodes[i];
@@ -975,6 +976,7 @@ RED.view = (function() {
         }
     }
     function hideDragLines() {
+        globalThis.isShowingDragLines = false
         if (showAllLinkPorts !== -1) {
             activeNodes.forEach(function(n) {
                 if (n.type === "link in" || n.type === "link out") {
@@ -4236,6 +4238,32 @@ RED.view = (function() {
     }
 
     function _redraw() {
+        if(globalThis.isShowingDragLines){
+            if (showAllLinkPorts !== -1 || mouse_mode != RED.state.JOINING) {
+                if (activeSubflow) {
+                    inGroup.append("g").attr('transform','translate(35,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
+                        .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} )
+                        .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);d3.event.preventDefault();} )
+                        .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);})
+                        .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);d3.event.preventDefault();} )
+                        .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_OUTPUT,0);})
+                        .on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_OUTPUT,0);});
+                } else {
+                    nodeLayer.selectAll(".red-ui-flow-subflow-port-output").remove();
+                    nodeLayer.selectAll(".red-ui-flow-subflow-port-input").remove();
+                    nodeLayer.selectAll(".red-ui-flow-subflow-port-status").remove();
+                }
+            } else {
+                // JOINING - unselect any selected links
+                linkLayer.selectAll(".red-ui-flow-link-selected").data(
+                    activeLinks,
+                    function(d) {
+                        return d.source.id+":"+d.sourcePort+":"+d.target.id+":"+d.target.i;
+                    }
+                ).classed("red-ui-flow-link-selected", false);
+            }
+            return
+        }
         eventLayer.attr("transform","scale("+scaleFactor+")");
         outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);