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

Convert node-change/error icons to SVG

Browse Source
This commit is contained in:
Nick O'Leary 2019-05-08 19:05:30 +01:00
parent 50228c5970
commit db5e79a19b
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 50 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2054,10 +2054,14 @@ RED.view = (function() {
var labelWidth = 0; var labelWidth = 0;
var labelHeight = 4; var labelHeight = 4;
var labelHeights = []; var labelHeights = [];
lines.forEach(function(l) { var lineHeight = 0;
var labelDimensions = calculateTextDimensions(l, "port_tooltip_label", 8,0); lines.forEach(function(l,i) {
var labelDimensions = calculateTextDimensions(l||" ", "port_tooltip_label", 8,0);
labelWidth = Math.max(labelWidth,labelDimensions[0]); labelWidth = Math.max(labelWidth,labelDimensions[0]);
labelHeights.push(0.8*labelDimensions[1]); labelHeights.push(0.8*labelDimensions[1]);
if (i === 0) {
lineHeight = 0.8*labelDimensions[1];
}
labelHeight += 0.8*labelDimensions[1]; labelHeight += 0.8*labelDimensions[1];
}); });
var labelWidth1 = (labelWidth/2)-5-2; var labelWidth1 = (labelWidth/2)-5-2;
@ -2079,9 +2083,9 @@ RED.view = (function() {
anchor = "start"; anchor = "start";
} else if (direction === "top") { } 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" 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; lx = -labelWidth/2 + 4;
ly = -labelHeight-labelHeight / 2 + 2; ly = -labelHeight-lineHeight + 6;
anchor = "end"; anchor = "start";
} }
tooltip.append("path").attr("d",path); tooltip.append("path").attr("d",path);
lines.forEach(function(l,i) { lines.forEach(function(l,i) {
@ -2090,7 +2094,7 @@ RED.view = (function() {
.attr("x", lx) .attr("x", lx)
.attr("y", ly) .attr("y", ly)
.attr("text-anchor",anchor) .attr("text-anchor",anchor)
.text(l) .text(l||" ")
}); });
return tooltip; return tooltip;
} }
@ -2783,13 +2787,27 @@ RED.view = (function() {
.attr("class","node_status_label") .attr("class","node_status_label")
.attr("x",20).attr("y",10); .attr("x",20).attr("y",10);
//node.append("circle").attr({"class":"centerDot","cx":0,"cy":0,"r":5}); node.append("g").attr("class","red-ui-view-node-changed hide").attr("transform","translate(20, -2)").append("circle").attr("r",5);
var nodeErrorButton = node.append("g").attr("class","red-ui-view-node-error hide").attr("transform","translate(0, -2)").append("path").attr("d","M -5,4 l 10,0 -5,-8 z");
//node.append("path").attr("class","node_error").attr("d","M 3,-3 l 10,0 l -5,-8 z"); // nodeErrorButton.on("mouseenter", function() {
// clearTimeout(portLabelHoverTimeout);
//TODO: these ought to be SVG // portLabelHoverTimeout = setTimeout(function() {
node.append("image").attr("class","node_error hide").attr("xlink:href","red/images/icons/node-error.png").attr("x",0).attr("y",-6).attr("width",10).attr("height",9); // var pos = getElementPosition(nodeErrorButton.node());
node.append("image").attr("class","node_changed hide").attr("xlink:href","red/images/icons/node-changed.png").attr("x",12).attr("y",-6).attr("width",10).attr("height",10); // portLabelHoverTimeout = null;
// portLabelHover = showTooltip(
// (pos[0]),
// (pos[1]),
// tooltip,
// "top"
// );
// },500);
// }).on("mouseleave", function() {
// clearTimeout(portLabelHoverTimeout);
// if (portLabelHover) {
// portLabelHover.remove();
// portLabelHover = null;
// }
// });
}); });
node.each(function(d,i) { node.each(function(d,i) {
@ -2967,12 +2985,12 @@ RED.view = (function() {
} }
} }
thisNode.selectAll(".node_changed") thisNode.selectAll(".red-ui-view-node-changed")
.attr("x",function(d){return d.w-10}) .attr("transform",function(d){return "translate("+(d.w-10)+", -2)"})
.classed("hide",function(d) { return !(d.changed||d.moved); }); .classed("hide",function(d) { return !(d.changed||d.moved); });
thisNode.selectAll(".node_error") thisNode.selectAll(".red-ui-view-node-error")
.attr("x",function(d){return d.w-10-((d.changed||d.moved)?13:0)}) .attr("transform",function(d){ return "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)"})
.classed("hide",function(d) { return d.valid; }); .classed("hide",function(d) { return d.valid; });
thisNode.selectAll(".port_input").each(function(d,i) { thisNode.selectAll(".port_input").each(function(d,i) {

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

@ -91,10 +91,21 @@
fill-opacity: 0.5; fill-opacity: 0.5;
} }
.node_error { .red-ui-view-node-error {
stroke: #ff0000; fill: rgb(255, 102, 0);
stroke-width: 2; stroke: rgb(145, 16, 2);
fill: #ff7f0e; stroke-width:1px;
cursor: default;
stroke-linejoin: round;
stroke-linecap: round;
}
.red-ui-view-node-changed {
fill: rgb(0, 188, 255);
stroke: rgb(28, 102, 140);
cursor: default;
stroke-width:1px;
stroke-linejoin: round;
stroke-linecap: round;
} }
.node_badge { .node_badge {