From 7ec1d4280847013b9e330beba896f4f383a2d235 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 13 May 2022 16:43:27 +0100
Subject: [PATCH] Change slicing op to mouse button 0 fixes #3582

---
 .../@node-red/editor-client/src/js/ui/view.js | 90 ++++++++++---------
 1 file changed, 50 insertions(+), 40 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 87db82f8e..adab87e38 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
@@ -955,8 +955,9 @@ RED.view = (function() {
     }
 
     function canvasMouseDown() {
-        if (RED.view.DEBUG) { console.warn("canvasMouseDown", mouse_mode); }
-        var point;
+        if (RED.view.DEBUG) { 
+            console.warn("canvasMouseDown", { mouse_mode, point: d3.mouse(this), event: d3.event });
+        }
         if (mouse_mode === RED.state.SELECTING_NODE) {
             d3.event.stopPropagation();
             return;
@@ -973,45 +974,49 @@ RED.view = (function() {
             selectedLinks.clear();
             updateSelection();
         }
-        if (mouse_mode === 0) {
-            if (lasso) {
-                lasso.remove();
-                lasso = null;
-            }
+        if (mouse_mode === 0 && lasso) {
+            lasso.remove();
+            lasso = null;
         }
-        if ((mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) && (d3.event.touches || d3.event.button === 0) && (d3.event.metaKey || d3.event.ctrlKey)) {
-            // Trigger quick add dialog
-            d3.event.stopPropagation();
-            clearSelection();
-            point = d3.mouse(this);
-            var clickedGroup = getGroupAt(point[0],point[1]);
-            if (drag_lines.length > 0) {
-                clickedGroup = clickedGroup || RED.nodes.group(drag_lines[0].node.g)
+        if (d3.event.touches || d3.event.button === 0) {
+            if ((mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) && (d3.event.metaKey || d3.event.ctrlKey) && !(d3.event.altKey || d3.event.shiftKey)) {
+                // Trigger quick add dialog
+                d3.event.stopPropagation();
+                clearSelection();
+                const point = d3.mouse(this);
+                var clickedGroup = getGroupAt(point[0], point[1]);
+                if (drag_lines.length > 0) {
+                    clickedGroup = clickedGroup || RED.nodes.group(drag_lines[0].node.g)
+                }
+                showQuickAddDialog({ position: point, group: clickedGroup });
+            } else if (mouse_mode === 0 && !(d3.event.metaKey || d3.event.ctrlKey)) {
+                // CTRL not being held
+                if (!d3.event.altKey) {
+                    // ALT not held (shift is allowed) Trigger lasso
+                    if (!touchStartTime) {
+                        const point = d3.mouse(this);
+                        lasso = eventLayer.append("rect")
+                            .attr("ox", point[0])
+                            .attr("oy", point[1])
+                            .attr("rx", 1)
+                            .attr("ry", 1)
+                            .attr("x", point[0])
+                            .attr("y", point[1])
+                            .attr("width", 0)
+                            .attr("height", 0)
+                            .attr("class", "nr-ui-view-lasso");
+                        d3.event.preventDefault();
+                    }
+                } else if (d3.event.altKey) {
+                    //Alt [+shift] held - Begin slicing
+                    clearSelection();
+                    mouse_mode = (d3.event.shiftKey) ? RED.state.SLICING_JUNCTION : RED.state.SLICING;
+                    const point = d3.mouse(this);
+                    slicePath = eventLayer.append("path").attr("class", "nr-ui-view-slice").attr("d", `M${point[0]} ${point[1]}`)
+                    slicePathLast = point;
+                    RED.view.redraw();
+                }
             }
-            showQuickAddDialog({position:point, group:clickedGroup});
-        } else if (mouse_mode === 0 && (d3.event.touches || d3.event.button === 0) && !(d3.event.metaKey || d3.event.ctrlKey)) {
-            // Tigger lasso
-            if (!touchStartTime) {
-                point = d3.mouse(this);
-                lasso = eventLayer.append("rect")
-                .attr("ox",point[0])
-                .attr("oy",point[1])
-                .attr("rx",1)
-                .attr("ry",1)
-                .attr("x",point[0])
-                .attr("y",point[1])
-                .attr("width",0)
-                .attr("height",0)
-                .attr("class","nr-ui-view-lasso");
-                d3.event.preventDefault();
-            }
-        } else if (mouse_mode === 0 && d3.event.button === 2 && (d3.event.metaKey || d3.event.ctrlKey || d3.event.shiftKey)) {
-            clearSelection();
-            mouse_mode = (d3.event.metaKey || d3.event.ctrlKey)?RED.state.SLICING : RED.state.SLICING_JUNCTION;
-            point = d3.mouse(this);
-            slicePath = eventLayer.append("path").attr("class","nr-ui-view-slice").attr("d",`M${point[0]} ${point[1]}`)
-            slicePathLast = point;
-            RED.view.redraw();
         }
     }
 
@@ -1714,7 +1719,9 @@ RED.view = (function() {
 
     function canvasMouseUp() {
         lastClickPosition = [d3.event.offsetX/scaleFactor,d3.event.offsetY/scaleFactor];
-        if (RED.view.DEBUG) { console.warn("canvasMouseUp", mouse_mode); }
+        if (RED.view.DEBUG) { 
+            console.warn("canvasMouseUp", { mouse_mode, point: d3.mouse(this), event: d3.event });
+        }
         var i;
         var historyEvent;
         if (mouse_mode === RED.state.PANNING) {
@@ -3712,6 +3719,9 @@ RED.view = (function() {
     function junctionMouseOutProxy(e) { junctionMouseOut(d3.select(this), this.__data__) }
 
     function linkMouseDown(d) {
+        if (RED.view.DEBUG) { 
+            console.warn("linkMouseDown", { mouse_mode, point: d3.mouse(this), event: d3.event });
+        }
         if (mouse_mode === RED.state.SELECTING_NODE) {
             d3.event.stopPropagation();
             return;