frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Initial port label behaviour

This commit is contained in:
Nick O'Leary 2017-01-26 15:38:25 +00:00
parent d008b1970c
commit 92a928680c
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 101 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,6 +70,9 @@ RED.view = (function() {
"grey": "#d3d3d3"
}
var PORT_TYPE_INPUT = 1;
var PORT_TYPE_OUTPUT = 0;
var outer = d3.select("#chart")
.append("svg:svg")
.attr("width", space_width)
@ -548,11 +551,11 @@ RED.view = (function() {
var drag_line = drag_lines[0];
var src = null,dst,src_port;
if (drag_line.portType === 0 && nn.inputs > 0) {
if (drag_line.portType === PORT_TYPE_OUTPUT && nn.inputs > 0) {
src = drag_line.node;
src_port = drag_line.port;
dst = nn;
} else if (drag_line.portType === 1 && nn.outputs > 0) {
} else if (drag_line.portType === PORT_TYPE_INPUT && nn.outputs > 0) {
src = nn;
dst = drag_line.node;
src_port = 0;
@ -562,10 +565,10 @@ RED.view = (function() {
RED.nodes.addLink(link);
historyEvent.links = [link];
hideDragLines();
if (drag_line.portType === 0 && nn.outputs > 0) {
showDragLines([{node:nn,port:0,portType:0}]);
} else if (drag_line.portType === 1 && nn.inputs > 0) {
showDragLines([{node:nn,port:0,portType:1}]);
if (drag_line.portType === PORT_TYPE_OUTPUT && nn.outputs > 0) {
showDragLines([{node:nn,port:0,portType:PORT_TYPE_OUTPUT}]);
} else if (drag_line.portType === PORT_TYPE_INPUT && nn.inputs > 0) {
showDragLines([{node:nn,port:0,portType:PORT_TYPE_INPUT}]);
} else {
resetMouseVars();
}
@ -575,9 +578,9 @@ RED.view = (function() {
}
} else {
if (nn.outputs > 0) {
showDragLines([{node:nn,port:0,portType:0}]);
showDragLines([{node:nn,port:0,portType:PORT_TYPE_OUTPUT}]);
} else if (nn.inputs > 0) {
showDragLines([{node:nn,port:0,portType:1}]);
showDragLines([{node:nn,port:0,portType:PORT_TYPE_INPUT}]);
} else {
resetMouseVars();
}
@ -677,18 +680,18 @@ RED.view = (function() {
var links = [];
var existingLinks = [];
if (selected_link &&
((mousedown_port_type === 0 &&
((mousedown_port_type === PORT_TYPE_OUTPUT &&
selected_link.source === mousedown_node &&
selected_link.sourcePort === mousedown_port_index
) ||
(mousedown_port_type === 1 &&
(mousedown_port_type === PORT_TYPE_INPUT &&
selected_link.target === mousedown_node
))
) {
existingLinks = [selected_link];
} else {
var filter;
if (mousedown_port_type === 0) {
if (mousedown_port_type === PORT_TYPE_OUTPUT) {
filter = {
source:mousedown_node,
sourcePort: mousedown_port_index
@ -705,9 +708,9 @@ RED.view = (function() {
RED.nodes.removeLink(link);
links.push({
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
node: (mousedown_port_type===PORT_TYPE_OUTPUT)?link.target:link.source,
port: (mousedown_port_type===PORT_TYPE_OUTPUT)?0:link.sourcePort,
portType: (mousedown_port_type===PORT_TYPE_OUTPUT)?PORT_TYPE_INPUT:PORT_TYPE_OUTPUT
})
}
if (links.length === 0) {
@ -728,11 +731,11 @@ RED.view = (function() {
mousePos = mouse_position;
for (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 numOutputs = (drag_line.portType === PORT_TYPE_OUTPUT)?(drag_line.node.outputs || 1):1;
var sourcePort = drag_line.port;
var portY = -((numOutputs-1)/2)*13 +13*sourcePort;
var sc = (drag_line.portType === 0)?1:-1;
var sc = (drag_line.portType === PORT_TYPE_OUTPUT)?1:-1;
var dy = mousePos[1]-(drag_line.node.y+portY);
var dx = mousePos[0]-(drag_line.node.x+sc*drag_line.node.w/2);
@ -1315,7 +1318,7 @@ RED.view = (function() {
mouseup_node = null;
mousedown_link = null;
mouse_mode = 0;
mousedown_port_type = 0;
mousedown_port_type = PORT_TYPE_OUTPUT;
activeSpliceLink = null;
spliceActive = false;
d3.select(".link_splice").classed("link_splice",false);
@ -1372,7 +1375,7 @@ RED.view = (function() {
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]) {
mouseup_node = n;
portType = mouseup_node.inputs>0?1:0;
portType = mouseup_node.inputs>0?PORT_TYPE_INPUT:PORT_TYPE_OUTPUT;
portIndex = 0;
}
}
@ -1392,11 +1395,11 @@ RED.view = (function() {
if (portType != drag_lines[i].portType && mouseup_node !== drag_lines[i].node) {
var drag_line = drag_lines[i];
var src,dst,src_port;
if (drag_line.portType === 0) {
if (drag_line.portType === PORT_TYPE_OUTPUT) {
src = drag_line.node;
src_port = drag_line.port;
dst = mouseup_node;
} else if (drag_line.portType == 1) {
} else if (drag_line.portType === PORT_TYPE_INPUT) {
src = mouseup_node;
dst = drag_line.node;
src_port = portIndex;
@ -1433,10 +1436,10 @@ RED.view = (function() {
if (mouse_mode === RED.state.QUICK_JOINING) {
if (addedLinks.length > 0) {
hideDragLines();
if (portType === 1 && d.outputs > 0) {
showDragLines([{node:d,port:0,portType:0}]);
} else if (portType === 0 && d.inputs > 0) {
showDragLines([{node:d,port:0,portType:1}]);
if (portType === PORT_TYPE_INPUT && d.outputs > 0) {
showDragLines([{node:d,port:0,portType:PORT_TYPE_OUTPUT}]);
} else if (portType === PORT_TYPE_OUTPUT && d.inputs > 0) {
showDragLines([{node:d,port:0,portType:PORT_TYPE_INPUT}]);
} else {
resetMouseVars();
}
@ -1452,6 +1455,41 @@ RED.view = (function() {
}
}
var portLabelHoverTimeout = null;
var portLabelHover = null;
function portMouseOver(port,d,portType,portIndex) {
clearTimeout(portLabelHoverTimeout);
var active = (mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== portType));
if (active) {
portLabelHoverTimeout = setTimeout(function() {
portLabelHoverTimeout = null;
portLabelHover = d3.select(port.node().parentNode)
.append("g")
.attr("transform","translate("+(portType===PORT_TYPE_INPUT?"-2":"12")+",5)");
portLabelHover.append("path").attr("d",
portType===PORT_TYPE_INPUT?
"M0 0 l -5 -5 v -3 q 0 -2 -2 -2 h -50 q -2 0 -2 2 v 16 q 0 2 2 2 h 50 q 2 0 2 -2 v -3 l 5 -5"
:
"M0 0 l 5 -5 v -3 q 0 -2 2 -2 h 50 q 2 0 2 2 v 16 q 0 2 -2 2 h -50 q -2 0 -2 -2 v -3 l -5 -5"
)
.attr("class","port_label_fadeIn")
// console.log(port,d,portType,portIndex);
},500);
}
port.classed("port_hovered",active);
}
function portMouseOut(port,d,portType,portIndex) {
clearTimeout(portLabelHoverTimeout);
if (portLabelHover) {
portLabelHover.remove();
portLabelHover = null;
}
port.classed("port_hovered",false);
}
function nodeMouseUp(d) {
if (dblClickPrimed && mousedown_node == d && clickElapsed > 0 && clickElapsed < 750) {
mouse_mode = RED.state.DEFAULT;
@ -1646,13 +1684,13 @@ RED.view = (function() {
nodeMouseUp.call(this,d);
});
outGroup.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10).attr("x",-5).attr("y",15)
.on("mousedown", function(d,i){portMouseDown(d,1,0);} )
.on("touchstart", function(d,i){portMouseDown(d,1,0);} )
.on("mouseup", function(d,i){portMouseUp(d,1,0);})
.on("touchend",function(d,i){portMouseUp(d,1,0);} )
.on("mouseover",function(d,i) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== 1)));})
.on("mouseout",function(d,i) { var port = d3.select(this); port.classed("port_hovered",false);});
outGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
.on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
.on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
.on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
.on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);} )
.on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
.on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
outGroup.append("svg:text").attr("class","port_label").attr("x",20).attr("y",8).style("font-size","10px").text("output");
outGroup.append("svg:text").attr("class","port_label port_index").attr("x",20).attr("y",24).text(function(d,i){ return i+1});
@ -1689,13 +1727,15 @@ RED.view = (function() {
nodeMouseUp.call(this,d);
});
inGroup.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10).attr("x",35).attr("y",15)
.on("mousedown", function(d,i){portMouseDown(d,0,i);} )
.on("touchstart", function(d,i){portMouseDown(d,0,i);} )
.on("mouseup", function(d,i){portMouseUp(d,0,i);})
.on("touchend",function(d,i){portMouseUp(d,0,i);} )
.on("mouseover",function(d,i) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== 0) ));})
.on("mouseout",function(d,i) { var port = d3.select(this); port.classed("port_hovered",false);});
inGroup.append("g").attr('transform','translate(35,15)').append("rect").attr("class","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);} )
.on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);})
.on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);} )
.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);});
inGroup.append("svg:text").attr("class","port_label").attr("x",18).attr("y",20).style("font-size","10px").text("input");
@ -1960,12 +2000,12 @@ RED.view = (function() {
} else if (d.inputs === 1 && inputPorts.empty()) {
var inputGroup = thisNode.append("g").attr("class","port_input");
inputGroup.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
.on("mousedown",function(d){portMouseDown(d,1,0);})
.on("touchstart",function(d){portMouseDown(d,1,0);})
.on("mouseup",function(d){portMouseUp(d,1,0);} )
.on("touchend",function(d){portMouseUp(d,1,0);} )
.on("mouseover",function(d) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== 1) ));})
.on("mouseout",function(d) { var port = d3.select(this); port.classed("port_hovered",false);})
.on("mousedown",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);})
.on("touchstart",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);})
.on("mouseup",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);} )
.on("touchend",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);} )
.on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
.on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
}
var numOutputs = d.outputs;
@ -1975,12 +2015,12 @@ RED.view = (function() {
var output_group = d._ports.enter().append("g").attr("class","port_output");
output_group.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
.on("mousedown",(function(){var node = d; return function(d,i){portMouseDown(node,0,i);}})() )
.on("touchstart",(function(){var node = d; return function(d,i){portMouseDown(node,0,i);}})() )
.on("mouseup",(function(){var node = d; return function(d,i){portMouseUp(node,0,i);}})() )
.on("touchend",(function(){var node = d; return function(d,i){portMouseUp(node,0,i);}})() )
.on("mouseover",function(d,i) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== 0) ));})
.on("mouseout",function(d,i) { var port = d3.select(this); port.classed("port_hovered",false);});
.on("mousedown",(function(){var node = d; return function(d,i){portMouseDown(node,PORT_TYPE_OUTPUT,i);}})() )
.on("touchstart",(function(){var node = d; return function(d,i){portMouseDown(node,PORT_TYPE_OUTPUT,i);}})() )
.on("mouseup",(function(){var node = d; return function(d,i){portMouseUp(node,PORT_TYPE_OUTPUT,i);}})() )
.on("touchend",(function(){var node = d; return function(d,i){portMouseUp(node,PORT_TYPE_OUTPUT,i);}})() )
.on("mouseover",(function(){var node = d; return function(d){portMouseOver(d3.select(this),d,PORT_TYPE_OUTPUT,0);}})())
.on("mouseout",(function(){var node = d; return function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_OUTPUT,0);}})());
d._ports.exit().remove();
if (d._ports) {

11
editor/sass/flow.scss
View File

@ -272,3 +272,14 @@ g.link_unknown path.link_line {
stroke-width: 2;
stroke-dasharray: 10, 4;
}
@keyframes port_label_fadeIn { from { opacity:0; } to { opacity:1; } }
.port_label_fadeIn {
opacity:0;
animation: 0.2s ease-in 0s 1 normal forwards port_label_fadeIn;
fill: white;
stroke: #999;
stroke-width: 1;
pointer-events: none;
}