frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Merge pull request #3340 from node-red/cut-wires

Browse Source 
Add wire-slice mode to delete wires with Ctrl-RHClick-Drag
This commit is contained in:
Nick O'Leary 2022-01-12 17:52:54 +00:00 committed by GitHub
commit 459a52d31d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 73 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/node_modules/@node-red/editor-client/src/js/ui/state.js vendored
View File

@ -28,5 +28,6 @@ RED.state = {
SELECTING_NODE: 11, SELECTING_NODE: 11,
GROUP_DRAGGING: 12, GROUP_DRAGGING: 12,
GROUP_RESIZE: 13, GROUP_RESIZE: 13,
DETACHED_DRAGGING: 14 DETACHED_DRAGGING: 14,
SLICING: 15
} }

78
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@ -74,6 +74,8 @@ RED.view = (function() {
var mouse_mode = 0; var mouse_mode = 0;
var mousedown_group_handle = null; var mousedown_group_handle = null;
var lasso = null; var lasso = null;
var slicePath = null;
var slicePathLast = null;
var ghostNode = null; var ghostNode = null;
var showStatus = false; var showStatus = false;
var lastClickNode = null; var lastClickNode = null;
@ -229,6 +231,12 @@ RED.view = (function() {
} }
} else if (mouse_mode === RED.state.PANNING && d3.event.buttons !== 4) { } else if (mouse_mode === RED.state.PANNING && d3.event.buttons !== 4) {
resetMouseVars(); resetMouseVars();
} else if (slicePath) {
if (d3.event.buttons !== 2) {
slicePath.remove();
slicePath = null;
resetMouseVars()
}
} }
}) })
.on("touchend", function() { .on("touchend", function() {
@ -957,19 +965,18 @@ RED.view = (function() {
lasso = null; lasso = null;
} }
} }
if (mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) { if ((mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) && (d3.event.touches || d3.event.button === 0) && (d3.event.metaKey || d3.event.ctrlKey)) {
if (d3.event.metaKey || d3.event.ctrlKey) { // Trigger quick add dialog
d3.event.stopPropagation(); d3.event.stopPropagation();
clearSelection(); clearSelection();
point = d3.mouse(this); point = d3.mouse(this);
var clickedGroup = getGroupAt(point[0],point[1]); var clickedGroup = getGroupAt(point[0],point[1]);
if (drag_lines.length > 0) { if (drag_lines.length > 0) {
clickedGroup = clickedGroup || RED.nodes.group(drag_lines[0].node.g) clickedGroup = clickedGroup || RED.nodes.group(drag_lines[0].node.g)
}
showQuickAddDialog({position:point, group:clickedGroup});
} }
} showQuickAddDialog({position:point, group:clickedGroup});
if (mouse_mode === 0 && !(d3.event.metaKey || d3.event.ctrlKey)) { } else if (mouse_mode === 0 && (d3.event.touches || d3.event.button === 0) && !(d3.event.metaKey || d3.event.ctrlKey)) {
// Tigger lasso
if (!touchStartTime) { if (!touchStartTime) {
point = d3.mouse(this); point = d3.mouse(this);
lasso = eventLayer.append("rect") lasso = eventLayer.append("rect")
@ -984,6 +991,13 @@ RED.view = (function() {
.attr("class","nr-ui-view-lasso"); .attr("class","nr-ui-view-lasso");
d3.event.preventDefault(); d3.event.preventDefault();
} }
} else if (mouse_mode === 0 && d3.event.button === 2 && (d3.event.metaKey || d3.event.ctrlKey)) {
clearSelection();
mouse_mode = RED.state.SLICING;
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();
} }
} }
@ -1380,6 +1394,17 @@ RED.view = (function() {
.attr("height",h) .attr("height",h)
; ;
return; return;
} else if (mouse_mode === RED.state.SLICING) {
if (slicePath) {
var delta = Math.max(1,Math.abs(slicePathLast[0]-mouse_position[0]))*Math.max(1,Math.abs(slicePathLast[1]-mouse_position[1]))
if (delta > 20) {
var currentPath = slicePath.attr("d")
currentPath += " L"+mouse_position[0]+" "+mouse_position[1]
slicePath.attr("d",currentPath);
slicePathLast = mouse_position
}
}
return
} }
if (mouse_mode === RED.state.SELECTING_NODE) { if (mouse_mode === RED.state.SELECTING_NODE) {
@ -1777,6 +1802,11 @@ RED.view = (function() {
} else if (mouse_mode == RED.state.DEFAULT && mousedown_link == null && !d3.event.ctrlKey && !d3.event.metaKey ) { } else if (mouse_mode == RED.state.DEFAULT && mousedown_link == null && !d3.event.ctrlKey && !d3.event.metaKey ) {
clearSelection(); clearSelection();
updateSelection(); updateSelection();
} else if (slicePath) {
deleteSelection();
slicePath.remove();
slicePath = null;
RED.view.redraw(true);
} }
if (mouse_mode == RED.state.MOVING_ACTIVE) { if (mouse_mode == RED.state.MOVING_ACTIVE) {
if (movingSet.length() > 0) { if (movingSet.length() > 0) {
@ -1929,6 +1959,16 @@ RED.view = (function() {
clearSelection(); clearSelection();
RED.history.pop(); RED.history.pop();
mouse_mode = 0; mouse_mode = 0;
} else if (mouse_mode === RED.state.SLICING) {
if (slicePath) {
slicePath.remove();
slicePath = null;
resetMouseVars()
}
clearSelection();
} else if (lasso) {
lasso.remove();
lasso = null;
} else if (activeGroup) { } else if (activeGroup) {
exitActiveGroup() exitActiveGroup()
} else { } else {
@ -2571,7 +2611,7 @@ RED.view = (function() {
activeHoverGroup.hovered = false; activeHoverGroup.hovered = false;
activeHoverGroup = null; activeHoverGroup = null;
} }
d3.select(".red-ui-flow-link-splice").classed("red-ui-flow-link-splice",false); d3.selectAll(".red-ui-flow-link-splice").classed("red-ui-flow-link-splice",false);
if (spliceTimer) { if (spliceTimer) {
clearTimeout(spliceTimer); clearTimeout(spliceTimer);
spliceTimer = null; spliceTimer = null;
@ -3471,6 +3511,9 @@ RED.view = (function() {
d3.event.stopPropagation(); d3.event.stopPropagation();
return; return;
} }
if (d3.event.button === 2) {
return
}
mousedown_link = d; mousedown_link = d;
if (!(d3.event.metaKey || d3.event.ctrlKey)) { if (!(d3.event.metaKey || d3.event.ctrlKey)) {
@ -3491,7 +3534,7 @@ RED.view = (function() {
redraw(); redraw();
focusView(); focusView();
d3.event.stopPropagation(); d3.event.stopPropagation();
if (!mousedown_link.link && movingSet.length() === 0 && selectedLinks.length() === 1 && selectedLinks.has(mousedown_link) && (d3.event.metaKey || d3.event.ctrlKey)) { if (!mousedown_link.link && movingSet.length() === 0 && (d3.event.touches || d3.event.button === 0) && selectedLinks.length() === 1 && selectedLinks.has(mousedown_link) && (d3.event.metaKey || d3.event.ctrlKey)) {
d3.select(this).classed("red-ui-flow-link-splice",true); d3.select(this).classed("red-ui-flow-link-splice",true);
var point = d3.mouse(this); var point = d3.mouse(this);
var clickedGroup = getGroupAt(point[0],point[1]); var clickedGroup = getGroupAt(point[0],point[1]);
@ -4479,6 +4522,13 @@ RED.view = (function() {
d3.select(pathBack) d3.select(pathBack)
.on("mousedown",linkMouseDown) .on("mousedown",linkMouseDown)
.on("touchstart",linkTouchStart) .on("touchstart",linkTouchStart)
.on("mousemove", function(d) {
if (mouse_mode === RED.state.SLICING) {
selectedLinks.add(d)
l.classed("red-ui-flow-link-splice",true)
redraw()
}
})
var pathOutline = document.createElementNS("http://www.w3.org/2000/svg","path"); var pathOutline = document.createElementNS("http://www.w3.org/2000/svg","path");
pathOutline.__data__ = d; pathOutline.__data__ = d;

7
packages/node_modules/@node-red/editor-client/src/sass/flow.scss vendored
View File

@ -21,6 +21,13 @@
stroke-dasharray: 10 5; stroke-dasharray: 10 5;
} }
.nr-ui-view-slice {
stroke-width: 1px;
stroke: $view-lasso-stroke;
fill: none;
stroke-dasharray: 10 5;
}
.node_label_italic, // deprecated: use red-ui-flow-node-label-italic .node_label_italic, // deprecated: use red-ui-flow-node-label-italic
.red-ui-flow-node-label-italic { .red-ui-flow-node-label-italic {
font-style: italic; font-style: italic;