mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Merge pull request #3340 from node-red/cut-wires
Add wire-slice mode to delete wires with Ctrl-RHClick-Drag
This commit is contained in:
commit
459a52d31d
@ -28,5 +28,6 @@ RED.state = {
|
||||
SELECTING_NODE: 11,
|
||||
GROUP_DRAGGING: 12,
|
||||
GROUP_RESIZE: 13,
|
||||
DETACHED_DRAGGING: 14
|
||||
DETACHED_DRAGGING: 14,
|
||||
SLICING: 15
|
||||
}
|
||||
|
@ -74,6 +74,8 @@ RED.view = (function() {
|
||||
var mouse_mode = 0;
|
||||
var mousedown_group_handle = null;
|
||||
var lasso = null;
|
||||
var slicePath = null;
|
||||
var slicePathLast = null;
|
||||
var ghostNode = null;
|
||||
var showStatus = false;
|
||||
var lastClickNode = null;
|
||||
@ -229,6 +231,12 @@ RED.view = (function() {
|
||||
}
|
||||
} else if (mouse_mode === RED.state.PANNING && d3.event.buttons !== 4) {
|
||||
resetMouseVars();
|
||||
} else if (slicePath) {
|
||||
if (d3.event.buttons !== 2) {
|
||||
slicePath.remove();
|
||||
slicePath = null;
|
||||
resetMouseVars()
|
||||
}
|
||||
}
|
||||
})
|
||||
.on("touchend", function() {
|
||||
@ -957,19 +965,18 @@ RED.view = (function() {
|
||||
lasso = null;
|
||||
}
|
||||
}
|
||||
if (mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) {
|
||||
if (d3.event.metaKey || d3.event.ctrlKey) {
|
||||
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)
|
||||
}
|
||||
showQuickAddDialog({position:point, group:clickedGroup});
|
||||
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 (mouse_mode === 0 && !(d3.event.metaKey || d3.event.ctrlKey)) {
|
||||
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")
|
||||
@ -984,6 +991,13 @@ RED.view = (function() {
|
||||
.attr("class","nr-ui-view-lasso");
|
||||
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)
|
||||
;
|
||||
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) {
|
||||
@ -1777,6 +1802,11 @@ RED.view = (function() {
|
||||
} else if (mouse_mode == RED.state.DEFAULT && mousedown_link == null && !d3.event.ctrlKey && !d3.event.metaKey ) {
|
||||
clearSelection();
|
||||
updateSelection();
|
||||
} else if (slicePath) {
|
||||
deleteSelection();
|
||||
slicePath.remove();
|
||||
slicePath = null;
|
||||
RED.view.redraw(true);
|
||||
}
|
||||
if (mouse_mode == RED.state.MOVING_ACTIVE) {
|
||||
if (movingSet.length() > 0) {
|
||||
@ -1929,6 +1959,16 @@ RED.view = (function() {
|
||||
clearSelection();
|
||||
RED.history.pop();
|
||||
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) {
|
||||
exitActiveGroup()
|
||||
} else {
|
||||
@ -2571,7 +2611,7 @@ RED.view = (function() {
|
||||
activeHoverGroup.hovered = false;
|
||||
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) {
|
||||
clearTimeout(spliceTimer);
|
||||
spliceTimer = null;
|
||||
@ -3471,6 +3511,9 @@ RED.view = (function() {
|
||||
d3.event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
if (d3.event.button === 2) {
|
||||
return
|
||||
}
|
||||
mousedown_link = d;
|
||||
|
||||
if (!(d3.event.metaKey || d3.event.ctrlKey)) {
|
||||
@ -3491,7 +3534,7 @@ RED.view = (function() {
|
||||
redraw();
|
||||
focusView();
|
||||
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);
|
||||
var point = d3.mouse(this);
|
||||
var clickedGroup = getGroupAt(point[0],point[1]);
|
||||
@ -4479,6 +4522,13 @@ RED.view = (function() {
|
||||
d3.select(pathBack)
|
||||
.on("mousedown",linkMouseDown)
|
||||
.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");
|
||||
pathOutline.__data__ = d;
|
||||
|
@ -21,6 +21,13 @@
|
||||
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
|
||||
.red-ui-flow-node-label-italic {
|
||||
font-style: italic;
|
||||
|
Loading…
Reference in New Issue
Block a user