frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1899 from node-red-hitachi/fa-icon

Browse Source 
Added font-awesome icons to user defined icon
This commit is contained in:
Nick O'Leary
2018-10-02 14:59:13 +01:00
committed by GitHub
parent a4ddfd404f ba49b2c681
commit 023391e22a
14 changed files with 984 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -498,7 +498,7 @@ RED.diff = (function() {
nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
$('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
RED.utils.createIconElement(icon_url, iconContainer, false);
return nodeDiv;
}

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

@@ -746,11 +746,11 @@ RED.editor = (function() {
var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
var colour = RED.utils.getNodeColor(node.type, node._def);
var icon_url = "icons/"+moduleName+"/"+icon;
iconDiv.data('icon',icon_url)
var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
iconDiv.data('icon',icon_url);
nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
$('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
RED.utils.createIconElement(icon_url, iconContainer, true);
if (iconPath.module === moduleName && iconPath.file === icon) {
iconDiv.addClass("selected");
@@ -820,7 +820,7 @@ RED.editor = (function() {
var icon_url = RED.utils.getNodeIcon(node._def,node);
nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
var iconDiv = $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
RED.utils.createIconElement(icon_url, iconContainer, true);
iconButton.click(function(e) {
e.preventDefault();
@@ -834,7 +834,7 @@ RED.editor = (function() {
showIconPicker(iconRow,node,iconPath,function(newIcon) {
$("#node-settings-icon").text(newIcon||"");
var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
iconDiv.css("backgroundImage","url("+icon_url+")");
RED.utils.createIconElement(icon_url, iconContainer, true);
});
})
$('<div class="uneditable-input" id="node-settings-icon">').text(node.icon).appendTo(iconRow);

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

@@ -129,9 +129,9 @@ RED.palette = (function() {
}
function setIcon(element,sf) {
var iconElement = element.find(".palette_icon");
var icon_url = RED.utils.getNodeIcon(sf._def,sf);
iconElement.attr("style", "background-image: url("+icon_url+")");
var iconContainer = element.find(".palette_icon_container");
RED.utils.createIconElement(icon_url, iconContainer, true);
}
function escapeNodeType(nt) {
@@ -169,7 +169,7 @@ RED.palette = (function() {
if (def.icon) {
var icon_url = RED.utils.getNodeIcon(def);
var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d);
$('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
RED.utils.createIconElement(icon_url, iconContainer, true);
}
d.style.backgroundColor = RED.utils.getNodeColor(nt,def);

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

@@ -203,7 +203,7 @@ RED.search = (function() {
nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
$('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
RED.utils.createIconElement(icon_url, iconContainer, true);
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
if (node.z) {

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

@@ -133,7 +133,7 @@ RED.typeSearch = (function() {
nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
$('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
RED.utils.createIconElement(icon_url, iconContainer, false);
if (def.inputs > 0) {
$('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv);

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

@@ -706,7 +706,11 @@ RED.utils = (function() {
function separateIconPath(icon) {
var result = {module: "", file: ""};
if (icon) {
var index = icon.indexOf('/');
var index = icon.indexOf('icons/');
if (index !== -1) {
icon = icon.substring(index+6);
}
index = icon.indexOf('/');
if (index !== -1) {
result.module = icon.slice(0, index);
result.file = icon.slice(index + 1);
@@ -763,7 +767,9 @@ RED.utils = (function() {
return RED.settings.apiRootUrl+"icons/node-red/alert.png"
} else if (node && node.icon) {
var iconPath = separateIconPath(node.icon);
if (isIconExists(iconPath)) {
if (iconPath.module === "font-awesome") {
return node.icon;
} else if (isIconExists(iconPath)) {
return RED.settings.apiRootUrl+"icons/" + node.icon;
}
}
@@ -774,7 +780,11 @@ RED.utils = (function() {
return RED.settings.apiRootUrl+"icons/node-red/subflow.png";
}
}
return RED.settings.apiRootUrl+"icons/"+iconPath.module+"/"+iconPath.file;
if (iconPath.module === "font-awesome") {
return iconPath.module+"/"+iconPath.file;
} else {
return RED.settings.apiRootUrl+"icons/"+iconPath.module+"/"+iconPath.file;
}
}
function getNodeLabel(node,defaultLabel) {
@@ -882,6 +892,35 @@ RED.utils = (function() {
return parts;
}
/**
* Create or update an icon element and append it to iconContainer.
* @param iconUrl - Url of icon.
* @param iconContainer - icon container element with palette_icon_container class.
* @param isLarge - whether the icon size is large.
*/
function createIconElement(iconUrl, iconContainer, isLarge) {
// Removes the previous icon when icon was changed.
var iconElement = iconContainer.find(".palette_icon");
if (iconElement.length !== 0) {
iconElement.remove();
}
var faIconElement = iconContainer.find("i");
if (faIconElement.length !== 0) {
faIconElement.remove();
}
// Show either icon image or font-awesome icon
var iconPath = separateIconPath(iconUrl);
if (iconPath.module === "font-awesome") {
var faIconElement = $('<i/>').appendTo(iconContainer);
var faLarge = isLarge ? "fa-lg " : "";
faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file);
} else {
var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
imageIconElement.css("backgroundImage", "url("+iconUrl+")");
}
}
return {
createObjectElement: buildMessageElement,
getMessageProperty: getMessageProperty,
@@ -894,6 +933,7 @@ RED.utils = (function() {
getNodeColor: getNodeColor,
addSpinnerOverlay: addSpinnerOverlay,
decodeObject: decodeObject,
parseContextKey: parseContextKey
parseContextKey: parseContextKey,
createIconElement: createIconElement
}
})();

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

@@ -1868,6 +1868,55 @@ RED.view = (function() {
RED.touch.radialMenu.show(obj,pos,options);
resetMouseVars();
}
function createIconAttributes(iconUrl, icon_group, d) {
var fontAwesomeUnicode = null;
if (iconUrl.indexOf("font-awesome/") === 0) {
var iconName = iconUrl.substr(13);
var fontAwesomeUnicode = RED.nodes.fontAwesome.getIconUnicode(iconName);
if (!fontAwesomeUnicode) {
var iconPath = RED.utils.getDefaultNodeIcon(d._def, d);
iconUrl = RED.settings.apiRootUrl+"icons/"+iconPath.module+"/"+iconPath.file;
}
}
if (fontAwesomeUnicode) {
// Since Node-RED workspace uses SVG, i tag cannot be used for font-awesome icon.
// On SVG, use text tag as an alternative.
icon_group.append("text")
.attr("xlink:href",iconUrl)
.attr("class","fa-lg")
.attr("x",15)
.attr("y",21)
.attr("stroke","none")
.attr("fill","#ffffff")
.attr("text-anchor","middle")
.attr("font-family", "FontAwesome")
.text(fontAwesomeUnicode);
} else {
var icon = icon_group.append("image")
.attr("xlink:href",iconUrl)
.attr("class","node_icon")
.attr("x",0)
.attr("width","30")
.attr("height","30");
var img = new Image();
img.src = iconUrl;
img.onload = function() {
icon.attr("width",Math.min(img.width,30));
icon.attr("height",Math.min(img.height,30));
icon.attr("x",15-Math.min(img.width,30)/2);
icon.attr("xlink:href",iconUrl);
icon.style("display",null);
//if ("right" == d._def.align) {
// icon.attr("x",function(d){return d.w-img.width-1-(d.outputs>0?5:0);});
// icon_shade.attr("x",function(d){return d.w-30});
// icon_shade_border.attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2);});
//}
}
}
}
function redraw() {
vis.attr("transform","scale("+scaleFactor+")");
outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);
@@ -2108,12 +2157,7 @@ RED.view = (function() {
.attr("fill-opacity","0.05")
.attr("height",function(d){return Math.min(50,d.h-4);});
var icon = icon_group.append("image")
.attr("xlink:href",icon_url)
.attr("class","node_icon")
.attr("x",0)
.attr("width","30")
.attr("height","30");
createIconAttributes(icon_url, icon_group, d);
var icon_shade_border = icon_group.append("path")
.attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
@@ -2139,19 +2183,6 @@ RED.view = (function() {
// icon_shade.attr("width",35); //icon.attr("x",5);
//}
var img = new Image();
img.src = icon_url;
img.onload = function() {
icon.attr("width",Math.min(img.width,30));
icon.attr("height",Math.min(img.height,30));
icon.attr("x",15-Math.min(img.width,30)/2);
//if ("right" == d._def.align) {
// icon.attr("x",function(d){return d.w-img.width-1-(d.outputs>0?5:0);});
// icon_shade.attr("x",function(d){return d.w-30});
// icon_shade_border.attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2);});
//}
}
//icon.style("pointer-events","none");
icon_group.style("pointer-events","none");
}
@@ -2288,18 +2319,23 @@ RED.view = (function() {
});
if (d._def.icon) {
icon = thisNode.select(".node_icon");
var current_url = icon.attr("xlink:href");
var icon = thisNode.select(".node_icon");
var faIcon = thisNode.select(".fa-lg");
var current_url;
if (!icon.empty()) {
current_url = icon.attr("xlink:href");
} else {
current_url = faIcon.attr("xlink:href");
}
var new_url = RED.utils.getNodeIcon(d._def,d);
if (new_url !== current_url) {
icon.attr("xlink:href",new_url);
var img = new Image();
img.src = new_url;
img.onload = function() {
icon.attr("width",Math.min(img.width,30));
icon.attr("height",Math.min(img.height,30));
icon.attr("x",15-Math.min(img.width,30)/2);
if (!icon.empty()) {
icon.remove();
} else {
faIcon.remove();
}
var iconGroup = thisNode.select(".node_icon_group");
createIconAttributes(new_url, iconGroup, d);
}
}