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

Allow shift-click to detach existing wires

Browse Source
This commit is contained in:
Nick O'Leary 2016-01-09 00:29:04 +00:00
parent ed19e4fa08
commit f35dd34da9
1 changed files with 135 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
editor/js/ui/view.js
View File

@ -231,7 +231,21 @@ RED.view = (function() {
}); });
grid.style("visibility","hidden"); grid.style("visibility","hidden");
var drag_line = vis.append("svg:path").attr("class", "drag_line"); var dragGroup = vis.append('g');
var drag_lines = [];
function showDragLines(nodes) {
for (var i=0;i<nodes.length;i++) {
var node = nodes[i];
node.el = dragGroup.append("svg:path").attr("class", "drag_line");
drag_lines.push(node);
}
}
function hideDragLines() {
while(drag_lines.length) {
(drag_lines.pop()).el.remove();
}
}
function updateActiveNodes() { function updateActiveNodes() {
var activeWorkspace = RED.workspaces.active(); var activeWorkspace = RED.workspaces.active();
@ -497,36 +511,73 @@ RED.view = (function() {
var mousePos; var mousePos;
if (mouse_mode == RED.state.JOINING) { if (mouse_mode == RED.state.JOINING) {
// update drag line // update drag line
drag_line.attr("class", "drag_line"); if (drag_lines.length === 0) {
mousePos = mouse_position; if (d3.event.shiftKey) {
var numOutputs = (mousedown_port_type === 0)?(mousedown_node.outputs || 1):1; // Get all the wires we need to detach.
var sourcePort = mousedown_port_index; var links = [];
var portY = -((numOutputs-1)/2)*13 +13*sourcePort; var filter;
if (mousedown_port_type === 0) {
var sc = (mousedown_port_type === 0)?1:-1; filter = {
source:mousedown_node,
var dy = mousePos[1]-(mousedown_node.y+portY); sourcePort: mousedown_port_index
var dx = mousePos[0]-(mousedown_node.x+sc*mousedown_node.w/2); }
var delta = Math.sqrt(dy*dy+dx*dx); } else {
var scale = lineCurveScale; filter = {
var scaleY = 0; target: mousedown_node
}
if (delta < node_width) { }
scale = 0.75-0.75*((node_width-delta)/node_width); var existingLinks = RED.nodes.filterLinks(filter);
} for (var i=0;i<existingLinks.length;i++) {
if (dx*sc < 0) { var link = existingLinks[i];
scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width)); RED.nodes.removeLink(link);
if (Math.abs(dy) < 3*node_height) { links.push({
scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ; link:link,
node: (mousedown_port_type===0)?link.target:link.source,
port: (mousedown_port_type===0)?0:link.sourcePort,
portType: (mousedown_port_type===0)?1:0
})
}
showDragLines(links);
mouse_mode = 0;
updateActiveNodes();
redraw();
mouse_mode = RED.state.JOINING;
} else {
showDragLines([{node:mousedown_node,port:mousedown_port_index,portType:mousedown_port_type}]);
} }
} }
mousePos = mouse_position;
for (var i=0;i<drag_lines.length;i++) {
var drag_line = drag_lines[i];
var numOutputs = (drag_line.portType === 0)?(drag_line.node.outputs || 1):1;
var sourcePort = drag_line.port;
var portY = -((numOutputs-1)/2)*13 +13*sourcePort;
drag_line.attr("d", var sc = (drag_line.portType === 0)?1:-1;
"M "+(mousedown_node.x+sc*mousedown_node.w/2)+" "+(mousedown_node.y+portY)+
" C "+(mousedown_node.x+sc*(mousedown_node.w/2+node_width*scale))+" "+(mousedown_node.y+portY+scaleY*node_height)+" "+ var dy = mousePos[1]-(drag_line.node.y+portY);
(mousePos[0]-sc*(scale)*node_width)+" "+(mousePos[1]-scaleY*node_height)+" "+ var dx = mousePos[0]-(drag_line.node.x+sc*drag_line.node.w/2);
mousePos[0]+" "+mousePos[1] var delta = Math.sqrt(dy*dy+dx*dx);
); var scale = lineCurveScale;
var scaleY = 0;
if (delta < node_width) {
scale = 0.75-0.75*((node_width-delta)/node_width);
}
if (dx*sc < 0) {
scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width));
if (Math.abs(dy) < 3*node_height) {
scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
}
}
drag_line.el.attr("d",
"M "+(drag_line.node.x+sc*drag_line.node.w/2)+" "+(drag_line.node.y+portY)+
" C "+(drag_line.node.x+sc*(drag_line.node.w/2+node_width*scale))+" "+(drag_line.node.y+portY+scaleY*node_height)+" "+
(mousePos[0]-sc*(scale)*node_width)+" "+(mousePos[1]-scaleY*node_height)+" "+
mousePos[0]+" "+mousePos[1]
);
}
d3.event.preventDefault(); d3.event.preventDefault();
} else if (mouse_mode == RED.state.MOVING) { } else if (mouse_mode == RED.state.MOVING) {
mousePos = d3.mouse(document.body); mousePos = d3.mouse(document.body);
@ -587,7 +638,19 @@ RED.view = (function() {
function canvasMouseUp() { function canvasMouseUp() {
if (mousedown_node && mouse_mode == RED.state.JOINING) { if (mousedown_node && mouse_mode == RED.state.JOINING) {
drag_line.attr("class", "drag_line_hidden"); var removedLinks = [];
for (var i=0;i<drag_lines.length;i++) {
if (drag_lines[i].link) {
removedLinks.push(drag_lines[i].link)
}
}
var historyEvent = {
t:'delete',
links: removedLinks,
dirty:RED.nodes.dirty()
};
RED.history.push(historyEvent);
hideDragLines();
} }
if (lasso) { if (lasso) {
var x = parseInt(lasso.attr("x")); var x = parseInt(lasso.attr("x"));
@ -925,46 +988,59 @@ RED.view = (function() {
} }
function portMouseUp(d,portType,portIndex) { function portMouseUp(d,portType,portIndex) {
var i;
document.body.style.cursor = ""; document.body.style.cursor = "";
if (mouse_mode == RED.state.JOINING && mousedown_node) { if (mouse_mode == RED.state.JOINING && drag_lines.length > 0) {
if (typeof TouchEvent != "undefined" && d3.event instanceof TouchEvent) { if (typeof TouchEvent != "undefined" && d3.event instanceof TouchEvent) {
RED.nodes.eachNode(function(n) { RED.nodes.eachNode(function(n) {
if (n.z == RED.workspaces.active()) { if (n.z == RED.workspaces.active()) {
var hw = n.w/2; var hw = n.w/2;
var hh = n.h/2; var hh = n.h/2;
if (n.x-hw<mouse_position[0] && n.x+hw> mouse_position[0] && if (n.x-hw<mouse_position[0] && n.x+hw> mouse_position[0] &&
n.y-hh<mouse_position[1] && n.y+hh>mouse_position[1]) { n.y-hh<mouse_position[1] && n.y+hh>mouse_position[1]) {
mouseup_node = n; mouseup_node = n;
portType = mouseup_node.inputs>0?1:0; portType = mouseup_node.inputs>0?1:0;
portIndex = 0; portIndex = 0;
}
} }
}
}); });
} else { } else {
mouseup_node = d; mouseup_node = d;
} }
if (portType == mousedown_port_type || mouseup_node === mousedown_node) { var addedLinks = [];
drag_line.attr("class", "drag_line_hidden"); var removedLinks = [];
resetMouseVars();
return; for (i=0;i<drag_lines.length;i++) {
if (drag_lines[i].link) {
removedLinks.push(drag_lines[i].link)
}
} }
var src,dst,src_port; for (i=0;i<drag_lines.length;i++) {
if (mousedown_port_type === 0) { if (portType != drag_lines[i].portType && mouseup_node !== drag_lines[i].node) {
src = mousedown_node; var drag_line = drag_lines[i];
src_port = mousedown_port_index; var src,dst,src_port;
dst = mouseup_node; if (drag_line.portType === 0) {
} else if (mousedown_port_type == 1) { src = drag_line.node;
src = mouseup_node; src_port = drag_line.port;
dst = mousedown_node; dst = mouseup_node;
src_port = portIndex; } else if (drag_line.portType == 1) {
src = mouseup_node;
dst = drag_line.node;
src_port = portIndex;
}
var existingLink = RED.nodes.filterLinks({source:src,target:dst,sourcePort: src_port}).length !== 0;
if (!existingLink) {
var link = {source: src, sourcePort:src_port, target: dst};
RED.nodes.addLink(link);
addedLinks.push(link);
}
}
} }
var existingLink = RED.nodes.filterLinks({source:src,target:dst,sourcePort: src_port}).length !== 0; if (addedLinks.length > 0 || removedLinks.length > 0) {
if (!existingLink) {
var link = {source: src, sourcePort:src_port, target: dst};
RED.nodes.addLink(link);
var historyEvent = { var historyEvent = {
t:'add', t:'add',
links:[link], links:addedLinks,
removedLinks: removedLinks,
dirty:RED.nodes.dirty() dirty:RED.nodes.dirty()
}; };
if (activeSubflow) { if (activeSubflow) {
@ -980,8 +1056,9 @@ RED.view = (function() {
RED.history.push(historyEvent); RED.history.push(historyEvent);
updateActiveNodes(); updateActiveNodes();
RED.nodes.dirty(true); RED.nodes.dirty(true);
} else {
} }
resetMouseVars();
hideDragLines();
selected_link = null; selected_link = null;
redraw(); redraw();
} }