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

Include module name in requests for node icons

This commit is contained in:
Nick O'Leary 2017-01-18 13:06:22 +00:00
parent 64daaeb310
commit 11f4ae019c
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
10 changed files with 70 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
editor/js/nodes.js
View File

@ -115,6 +115,7 @@ RED.nodes = (function() {
}, },
registerNodeType: function(nt,def) { registerNodeType: function(nt,def) {
nodeDefinitions[nt] = def; nodeDefinitions[nt] = def;
def.type = nt;
if (def.category != "subflows") { if (def.category != "subflows") {
def.set = nodeSets[typeToId[nt]]; def.set = nodeSets[typeToId[nt]];
nodeSets[typeToId[nt]].added = true; nodeSets[typeToId[nt]].added = true;

11
editor/js/ui/diff.js
View File

@ -342,21 +342,14 @@ RED.diff = (function() {
function createNodeIcon(node,def) { function createNodeIcon(node,def) {
var nodeDiv = $("<div>",{class:"node-diff-node-entry-node"}); var nodeDiv = $("<div>",{class:"node-diff-node-entry-node"});
var colour = def.color; var colour = def.color;
var icon_url = "arrow-in.png"; var icon_url = RED.utils.getNodeIcon(def,node);
if (node.type === 'tab') { if (node.type === 'tab') {
colour = "#C0DEED"; colour = "#C0DEED";
icon_url = "subflow.png";
} else if (def.category === 'config') {
icon_url = "cog.png";
} else if (node.type === 'unknown') {
icon_url = "alert.png";
} else {
icon_url = def.icon;
} }
nodeDiv.css('backgroundColor',colour); nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
$('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+icon_url+")"}).appendTo(iconContainer); $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
return nodeDiv; return nodeDiv;
} }

11
editor/js/ui/palette.js
View File

@ -149,14 +149,9 @@ RED.palette = (function() {
if (def.icon) { if (def.icon) {
var icon_url = "arrow-in.png"; var icon_url = RED.utils.getNodeIcon(def);
try {
icon_url = (typeof def.icon === "function" ? def.icon.call({}) : def.icon);
} catch(err) {
console.log("Definition error: "+nt+".icon",err);
}
var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d); var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d);
$('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+icon_url+")"}).appendTo(iconContainer); $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
} }
d.style.backgroundColor = def.color; d.style.backgroundColor = def.color;
@ -236,7 +231,7 @@ RED.palette = (function() {
// it here makes me sad // it here makes me sad
//console.log(ui.helper.position()); //console.log(ui.helper.position());
ui.position.left += 17.5; ui.position.left += 17.5;
if (def.inputs > 0 && def.outputs > 0) { if (def.inputs > 0 && def.outputs > 0) {
mouseX = ui.position.left+(ui.helper.width()/2) - chartOffset.left + chart.scrollLeft(); mouseX = ui.position.left+(ui.helper.width()/2) - chartOffset.left + chart.scrollLeft();
mouseY = ui.position.top+(ui.helper.height()/2) - chartOffset.top + chart.scrollTop(); mouseY = ui.position.top+(ui.helper.height()/2) - chartOffset.top + chart.scrollTop();

15
editor/js/ui/search.js
View File

@ -189,25 +189,14 @@ RED.search = (function() {
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div); var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div);
var colour = def.color; var colour = def.color;
var icon_url = "arrow-in.png"; var icon_url = RED.utils.getNodeIcon(def,node);
if (node.type === 'tab') { if (node.type === 'tab') {
colour = "#C0DEED"; colour = "#C0DEED";
icon_url = "subflow.png";
} else if (def.category === 'config') {
icon_url = "cog.png";
} else if (node.type === 'unknown') {
icon_url = "alert.png";
} else {
try {
icon_url = (typeof def.icon === "function" ? def.icon.call({}) : def.icon);
} catch(err) {
console.log("Definition error: "+nt+".icon",err);
}
} }
nodeDiv.css('backgroundColor',colour); nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
$('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+icon_url+")"}).appendTo(iconContainer); $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div); var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
if (node.z) { if (node.z) {

13
editor/js/ui/typeSearch.js
View File

@ -110,20 +110,11 @@ RED.typeSearch = (function() {
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div); var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div);
var colour = def.color; var colour = def.color;
var icon_url = "arrow-in.png"; var icon_url = RED.utils.getNodeIcon(def);
if (def.category === 'config') {
icon_url = "cog.png";
} else {
try {
icon_url = (typeof def.icon === "function" ? def.icon.call({}) : def.icon);
} catch(err) {
console.log("Definition error: "+object.type+".icon",err);
}
}
nodeDiv.css('backgroundColor',colour); nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
$('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+icon_url+")"}).appendTo(iconContainer); $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
if (def.inputs > 0) { if (def.inputs > 0) {
$('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv); $('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv);

25
editor/js/ui/utils.js
View File

@ -367,8 +367,31 @@ RED.utils = (function() {
return true; return true;
} }
function getNodeIcon(def,node) {
if (def.category === 'config') {
return "icons/node-red/cog.png"
} else if (node && node.type === 'tab') {
return "icons/node-red/subflow.png"
} else if (node && node.type === 'unknown') {
return "icons/node-red/alert.png"
}
var icon_url;
if (typeof def.icon === "function") {
try {
icon_url = def.icon.call(node);
} catch(err) {
console.log("Definition error: "+def.type+".icon",err);
icon_url = "arrow-in.png";
}
} else {
icon_url = def.icon;
}
return "icons/"+def.set.module+"/"+icon_url;
}
return { return {
createObjectElement: buildMessageElement, createObjectElement: buildMessageElement,
validatePropertyExpression: validatePropertyExpression validatePropertyExpression: validatePropertyExpression,
getNodeIcon: getNodeIcon
} }
})(); })();

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

@ -1832,7 +1832,7 @@ RED.view = (function() {
//node.append("rect").attr("class", "node-gradient-bottom").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-bottom)").style("pointer-events","none"); //node.append("rect").attr("class", "node-gradient-bottom").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-bottom)").style("pointer-events","none");
if (d._def.icon) { if (d._def.icon) {
var icon_url = RED.utils.getNodeIcon(d._def,d);
var icon_group = node.append("g") var icon_group = node.append("g")
.attr("class","node_icon_group") .attr("class","node_icon_group")
.attr("x",0).attr("y",0); .attr("x",0).attr("y",0);
@ -1847,7 +1847,7 @@ RED.view = (function() {
.attr("height",function(d){return Math.min(50,d.h-4);}); .attr("height",function(d){return Math.min(50,d.h-4);});
var icon = icon_group.append("image") var icon = icon_group.append("image")
.attr("xlink:href","icons/"+d._def.icon) .attr("xlink:href",icon_url)
.attr("class","node_icon") .attr("class","node_icon")
.attr("x",0) .attr("x",0)
.attr("width","30") .attr("width","30")
@ -1878,7 +1878,7 @@ RED.view = (function() {
//} //}
var img = new Image(); var img = new Image();
img.src = "icons/"+d._def.icon; img.src = icon_url;
img.onload = function() { img.onload = function() {
icon.attr("width",Math.min(img.width,30)); icon.attr("width",Math.min(img.width,30));
icon.attr("height",Math.min(img.height,30)); icon.attr("height",Math.min(img.height,30));
@ -1915,8 +1915,10 @@ RED.view = (function() {
//node.append("circle").attr({"class":"centerDot","cx":0,"cy":0,"r":5}); //node.append("circle").attr({"class":"centerDot","cx":0,"cy":0,"r":5});
//node.append("path").attr("class","node_error").attr("d","M 3,-3 l 10,0 l -5,-8 z"); //node.append("path").attr("class","node_error").attr("d","M 3,-3 l 10,0 l -5,-8 z");
node.append("image").attr("class","node_error hidden").attr("xlink:href","icons/node-error.png").attr("x",0).attr("y",-6).attr("width",10).attr("height",9);
node.append("image").attr("class","node_changed hidden").attr("xlink:href","icons/node-changed.png").attr("x",12).attr("y",-6).attr("width",10).attr("height",10); //TODO: these ought to be SVG
node.append("image").attr("class","node_error hidden").attr("xlink:href","icons/node-red/node-error.png").attr("x",0).attr("y",-6).attr("width",10).attr("height",9);
node.append("image").attr("class","node_changed hidden").attr("xlink:href","icons/node-red/node-changed.png").attr("x",12).attr("y",-6).attr("width",10).attr("height",10);
}); });
node.each(function(d,i) { node.each(function(d,i) {
@ -2032,21 +2034,11 @@ RED.view = (function() {
if (d._def.icon) { if (d._def.icon) {
icon = thisNode.select(".node_icon"); icon = thisNode.select(".node_icon");
var current_url = icon.attr("xlink:href"); var current_url = icon.attr("xlink:href");
var icon_url; var new_url = RED.utils.getNodeIcon(d._def,d);
if (typeof d._def.icon == "function") { if (new_url !== current_url) {
try { icon.attr("xlink:href",new_url);
icon_url = d._def.icon.call(d);
} catch(err) {
console.log("icon",err);
icon_url = "arrow-in.png";
}
} else {
icon_url = d._def.icon;
}
if ("icons/"+icon_url != current_url) {
icon.attr("xlink:href","icons/"+icon_url);
var img = new Image(); var img = new Image();
img.src = "icons/"+d._def.icon; img.src = new_url;
img.onload = function() { img.onload = function() {
icon.attr("width",Math.min(img.width,30)); icon.attr("width",Math.min(img.width,30));
icon.attr("height",Math.min(img.height,30)); icon.attr("height",Math.min(img.height,30));

2
red/api/index.js
View File

@ -94,7 +94,7 @@ function init(_server,_runtime) {
}); });
} }
editorApp.get("/",ensureRuntimeStarted,ui.ensureSlash,ui.editor); editorApp.get("/",ensureRuntimeStarted,ui.ensureSlash,ui.editor);
editorApp.get("/icons/:icon",ui.icon); editorApp.get("/icons/:module/:icon",ui.icon);
theme.init(runtime); theme.init(runtime);
if (settings.editorTheme) { if (settings.editorTheme) {
editorApp.use("/theme",theme.app()); editorApp.use("/theme",theme.app());

35
red/api/ui.js
View File

@ -21,7 +21,9 @@ var theme = require("./theme");
var Mustache = require("mustache"); var Mustache = require("mustache");
var icon_paths = [path.resolve(__dirname + '/../../public/icons')]; var icon_paths = {
"node-red":[path.resolve(__dirname + '/../../public/icons')]
};
var iconCache = {}; var iconCache = {};
//TODO: create a default icon //TODO: create a default icon
var defaultIcon = path.resolve(__dirname + '/../../public/icons/arrow-in.png'); var defaultIcon = path.resolve(__dirname + '/../../public/icons/arrow-in.png');
@ -29,7 +31,8 @@ var templateDir = path.resolve(__dirname+"/../../editor/templates");
var editorTemplate; var editorTemplate;
function nodeIconDir(dir) { function nodeIconDir(dir) {
icon_paths.push(path.resolve(dir)); icon_paths[dir.name] = icon_paths[dir.name] || [];
icon_paths[dir.name].push(path.resolve(dir.path));
} }
module.exports = { module.exports = {
@ -54,18 +57,24 @@ module.exports = {
} }
}, },
icon: function(req,res) { icon: function(req,res) {
if (iconCache[req.params.icon]) { var icon = req.params.icon;
res.sendFile(iconCache[req.params.icon]); // if not found, express prints this to the console and serves 404 var module = req.params.module;
var iconName = module+"/"+icon;
if (iconCache[iconName]) {
res.sendFile(iconCache[iconName]); // if not found, express prints this to the console and serves 404
} else { } else {
for (var p=0;p<icon_paths.length;p++) { var paths = icon_paths[module];
var iconPath = path.join(icon_paths[p],req.params.icon); if (paths) {
try { for (var p=0;p<paths.length;p++) {
fs.statSync(iconPath); var iconPath = path.join(paths[p],icon);
res.sendFile(iconPath); try {
iconCache[req.params.icon] = iconPath; fs.statSync(iconPath);
return; res.sendFile(iconPath);
} catch(err) { iconCache[iconName] = iconPath;
// iconPath doesn't exist return;
} catch(err) {
// iconPath doesn't exist
}
} }
} }
res.sendFile(defaultIcon); res.sendFile(defaultIcon);

4
red/runtime/nodes/registry/localfilesystem.js
View File

@ -89,7 +89,7 @@ function getLocalNodeFiles(dir) {
if (!/^(\..*|lib|icons|node_modules|test|locales)$/.test(fn)) { if (!/^(\..*|lib|icons|node_modules|test|locales)$/.test(fn)) {
result = result.concat(getLocalNodeFiles(path.join(dir,fn))); result = result.concat(getLocalNodeFiles(path.join(dir,fn)));
} else if (fn === "icons") { } else if (fn === "icons") {
events.emit("node-icon-dir",path.join(dir,fn)); events.emit("node-icon-dir",{name:'node-red',path:path.join(dir,fn)});
} }
} }
}); });
@ -182,7 +182,7 @@ function getModuleNodeFiles(module) {
if (iconDirs.indexOf(iconDir) == -1) { if (iconDirs.indexOf(iconDir) == -1) {
try { try {
fs.statSync(iconDir); fs.statSync(iconDir);
events.emit("node-icon-dir",iconDir); events.emit("node-icon-dir",{name:pkg.name,path:iconDir});
iconDirs.push(iconDir); iconDirs.push(iconDir);
} catch(err) { } catch(err) {
} }