From 22ede7979968a3b56bfbf24f109f99d2cc9e371e Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 3 Oct 2018 15:40:05 +0100 Subject: [PATCH] Add node body tooltip - limit to link nodes for now --- .../@node-red/editor-client/src/js/ui/view.js | 124 +++++++++++++----- .../editor-client/src/sass/flow.scss | 6 +- 2 files changed, 92 insertions(+), 38 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 5bd04b3e7..b0988a2cb 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -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"); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss index dd2d4e286..2608c8d43 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss @@ -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;