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

Add node body tooltip - limit to link nodes for now

Browse Source
This commit is contained in:
Nick O'Leary 2018-10-03 15:40:05 +01:00
parent 6cb3699ee9
commit 22ede79799
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 92 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1649,6 +1649,55 @@ RED.view = (function() {
}
return result;
}
function showTooltip(x,y,content,direction) {
var tooltip = vis.append("g")
.attr("transform","translate("+x+","+y+")")
.attr("class","port_tooltip");
var lines = content.split("\n");
var labelWidth = 0;
var labelHeight = 4;
var labelHeights = [];
lines.forEach(function(l) {
var labelDimensions = calculateTextDimensions(l, "port_tooltip_label", 8,0);
labelWidth = Math.max(labelWidth,labelDimensions[0]);
labelHeights.push(0.8*labelDimensions[1]);
labelHeight += 0.8*labelDimensions[1];
});
var labelWidth1 = (labelWidth/2)-5-2;
var labelWidth2 = labelWidth - 4;
var labelHeight1 = (labelHeight/2)-5-2;
var labelHeight2 = labelHeight - 4;
var path;
var lx;
var ly = -labelHeight/2-2;
var anchor;
if (direction === "left") {
path = "M0 0 l -5 -5 v -"+(labelHeight1)+" q 0 -2 -2 -2 h -"+labelWidth+" q -2 0 -2 2 v "+(labelHeight2)+" q 0 2 2 2 h "+labelWidth+" q 2 0 2 -2 v -"+(labelHeight1)+" l 5 -5";
lx = -10;
anchor = "end";
} else if (direction === "right") {
path = "M0 0 l 5 -5 v -"+(labelHeight1)+" q 0 -2 2 -2 h "+labelWidth+" q 2 0 2 2 v "+(labelHeight2)+" q 0 2 -2 2 h -"+labelWidth+" q -2 0 -2 -2 v -"+(labelHeight1)+" l -5 -5"
lx = 10;
anchor = "start";
} else if (direction === "top") {
path = "M0 0 l 5 -5 h "+(labelWidth1)+" q 2 0 2 -2 v -"+labelHeight+" q 0 -2 -2 -2 h -"+(labelWidth2)+" q -2 0 -2 2 v "+labelHeight+" q 0 2 2 2 h "+(labelWidth1)+" l 5 5"
lx = labelWidth/2 - 4;
ly = -labelHeight-labelHeight / 2 + 2;
anchor = "end";
}
tooltip.append("path").attr("d",path);
lines.forEach(function(l,i) {
ly += labelHeights[i];
tooltip.append("svg:text").attr("class","port_tooltip_label")
.attr("x", lx)
.attr("y", ly)
.attr("text-anchor",anchor)
.text(l)
});
return tooltip;
}
function portMouseOver(port,d,portType,portIndex) {
clearTimeout(portLabelHoverTimeout);
var active = (mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== portType));
@ -1660,37 +1709,12 @@ RED.view = (function() {
}
var pos = getElementPosition(port.node());
portLabelHoverTimeout = null;
portLabelHover = vis.append("g")
.attr("transform","translate("+(pos[0]+(portType===PORT_TYPE_INPUT?-2:12))+","+(pos[1]+5)+")")
.attr("class","port_tooltip");
var lines = tooltip.split("\n");
var labelWidth = 0;
var labelHeight = 4;
var labelHeights = [];
lines.forEach(function(l) {
var labelDimensions = calculateTextDimensions(l, "port_tooltip_label", 8,0);
labelWidth = Math.max(labelWidth,labelDimensions[0]);
labelHeights.push(0.8*labelDimensions[1]);
labelHeight += 0.8*labelDimensions[1];
});
var labelHeight1 = (labelHeight/2)-5-2;
var labelHeight2 = labelHeight - 4;
portLabelHover.append("path").attr("d",
portType===PORT_TYPE_INPUT?
"M0 0 l -5 -5 v -"+(labelHeight1)+" q 0 -2 -2 -2 h -"+labelWidth+" q -2 0 -2 2 v "+(labelHeight2)+" q 0 2 2 2 h "+labelWidth+" q 2 0 2 -2 v -"+(labelHeight1)+" l 5 -5"
:
"M0 0 l 5 -5 v -"+(labelHeight1)+" q 0 -2 2 -2 h "+labelWidth+" q 2 0 2 2 v "+(labelHeight2)+" q 0 2 -2 2 h -"+labelWidth+" q -2 0 -2 -2 v -"+(labelHeight1)+" l -5 -5"
);
var y = -labelHeight/2-2;
lines.forEach(function(l,i) {
y += labelHeights[i];
portLabelHover.append("svg:text").attr("class","port_tooltip_label")
.attr("x", portType===PORT_TYPE_INPUT?-10:10)
.attr("y", y)
.attr("text-anchor",portType===PORT_TYPE_INPUT?"end":"start")
.text(l)
});
portLabelHover = showTooltip(
(pos[0]+(portType===PORT_TYPE_INPUT?-2:12)),
(pos[1]+5),
tooltip,
portType===PORT_TYPE_INPUT?"left":"right"
);
},500);
}
port.classed("port_hovered",active);
@ -2133,13 +2157,43 @@ RED.view = (function() {
})
.on("mouseover",function(d) {
if (mouse_mode === 0) {
var node = d3.select(this);
node.classed("node_hovered",true);
var nodeBody = d3.select(this);
nodeBody.classed("node_hovered",true);
clearTimeout(portLabelHoverTimeout);
if (d.type === "link in" || d.type === "link out") {
portLabelHoverTimeout = setTimeout(function() {
var tooltip;
if (d._def.label) {
tooltip = d._def.label;
try {
tooltip = (typeof tooltip === "function" ? tooltip.call(d) : tooltip)||"";
} catch(err) {
console.log("Definition error: "+d.type+".label",err);
tooltip = d.type;
}
}
if (tooltip !== "") {
var pos = getElementPosition(node.node());
portLabelHoverTimeout = null;
portLabelHover = showTooltip(
(pos[0] + d.w/2),
(pos[1]-1),
tooltip,
"top"
);
}
},500);
}
}
})
.on("mouseout",function(d) {
var node = d3.select(this);
node.classed("node_hovered",false);
var nodeBody = d3.select(this);
nodeBody.classed("node_hovered",false);
clearTimeout(portLabelHoverTimeout);
if (portLabelHover) {
portLabelHover.remove();
portLabelHover = null;
}
});
//node.append("rect").attr("class", "node-gradient-top").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-top)").style("pointer-events","none");

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

@ -281,14 +281,14 @@ g.link_unknown path.link_line {
pointer-events: none;
path {
fill: white;
stroke: #999;
fill: $popover-background;
stroke: $popover-background;
stroke-width: 1;
}
}
.port_tooltip_label {
stroke-width: 0;
fill: #666;
fill: $popover-color;
font-size: 12px;
pointer-events: none;
-webkit-touch-callout: none;