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

Added font-awesome icons to user defined icon

Browse Source
This commit is contained in:
nakanishi
2018-09-26 09:16:15 +09:00
parent d887ab126b
commit f13e02a1a9
14 changed files with 992 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -498,7 +498,8 @@ 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);
var iconPath = RED.utils.separateIconPath(icon_url);
RED.utils.createIconElement(iconPath.module, iconPath.file, iconContainer, false);
return nodeDiv;
}

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

@@ -750,7 +750,7 @@ RED.editor = (function() {
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(moduleName, icon, 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);
var iconElements = RED.utils.createDynamicIconElement(icon_url, iconContainer);
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.changeIconElement(icon_url, iconElements.image, iconElements.fa);
});
})
$('<div class="uneditable-input" id="node-settings-icon">').text(node.icon).appendTo(iconRow);

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

@@ -130,8 +130,9 @@ RED.palette = (function() {
function setIcon(element,sf) {
var iconElement = element.find(".palette_icon");
var faIconElement = element.find("i");
var icon_url = RED.utils.getNodeIcon(sf._def,sf);
iconElement.attr("style", "background-image: url("+icon_url+")");
RED.utils.changeIconElement(icon_url, iconElement, faIconElement);
}
function escapeNodeType(nt) {
@@ -169,7 +170,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.createDynamicIconElement(icon_url, iconContainer);
}
d.style.backgroundColor = RED.utils.getNodeColor(nt,def);

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

@@ -203,7 +203,8 @@ 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);
var iconPath = RED.utils.separateIconPath(icon_url);
RED.utils.createIconElement(iconPath.module, iconPath.file, iconContainer, true);
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
if (node.z) {

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

@@ -133,7 +133,8 @@ 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);
var iconPath = RED.utils.separateIconPath(icon_url);
RED.utils.createIconElement(iconPath.module, iconPath.file, iconContainer, false);
if (def.inputs > 0) {
$('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv);

59
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,44 @@ RED.utils = (function() {
return parts;
}
function createIconElement(moduleName, iconName, iconContainer, isLarge) {
if (moduleName === "font-awesome") {
var faLarge = isLarge ? "fa-lg " : "";
$('<i class="palette_icon_fa fa fa-fw '+faLarge+iconName+'"></i>').appendTo(iconContainer);
} else {
var iconUrl = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+iconName;
$('<div/>',{class:"palette_icon",style:"background-image: url("+iconUrl+")"}).appendTo(iconContainer);
}
}
function createDynamicIconElement(iconUrl, iconContainer) {
var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
var faIconElement = $('<i/>').appendTo(iconContainer);
var iconPath = separateIconPath(iconUrl);
if (iconPath.module === "font-awesome") {
faIconElement.addClass("palette_icon_fa fa fa-lg fa-fw " + iconPath.file);
} else {
imageIconElement.css("backgroundImage", "url("+iconUrl+")");
}
var iconElements = {
"image": imageIconElement,
"fa": faIconElement
};
return iconElements;
}
function changeIconElement(iconUrl, imageIconElement, faIconElement) {
var iconPath = separateIconPath(iconUrl);
faIconElement.removeClass();
if (iconPath.module === "font-awesome") {
imageIconElement.hide();
faIconElement.addClass("palette_icon_fa fa fa-lg fa-fw " + iconPath.file);
} else {
imageIconElement.css("backgroundImage", "url("+iconUrl+")");
imageIconElement.show();
}
}
return {
createObjectElement: buildMessageElement,
getMessageProperty: getMessageProperty,
@@ -894,6 +942,9 @@ RED.utils = (function() {
getNodeColor: getNodeColor,
addSpinnerOverlay: addSpinnerOverlay,
decodeObject: decodeObject,
parseContextKey: parseContextKey
parseContextKey: parseContextKey,
createIconElement: createIconElement,
createDynamicIconElement: createDynamicIconElement,
changeIconElement: changeIconElement
}
})();

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

@@ -1868,6 +1868,50 @@ RED.view = (function() {
RED.touch.radialMenu.show(obj,pos,options);
resetMouseVars();
}
function updateIconAttributes(iconUrl, icon, fontAwesomeIcon, d) {
var isIconImage = true;
if (iconUrl.indexOf("font-awesome/") === 0) {
var iconName = iconUrl.substr(13);
var fontAwesomeUnicode = RED.nodes.fontAwesome.getIconUnicode(iconName);
if (fontAwesomeUnicode) {
isIconImage = false;
fontAwesomeIcon.text(fontAwesomeUnicode);
} else {
var iconPath = RED.utils.getDefaultNodeIcon(d._def, d);
iconUrl = "icons/"+iconPath.module+"/"+iconPath.file;
}
}
if (isIconImage) {
// Hide font-awesome icon.
fontAwesomeIcon.attr("xlink:href",null);
fontAwesomeIcon.text(null);
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);});
//}
}
} else {
// Hide icon image.
icon.attr("xlink:href",null);
icon.style("display","none");
fontAwesomeIcon.attr("xlink:href",iconUrl);
}
return iconUrl;
}
function redraw() {
vis.attr("transform","scale("+scaleFactor+")");
outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);
@@ -2118,6 +2162,16 @@ RED.view = (function() {
.attr("width","30")
.attr("height","30");
var fontAwesomeIcon = icon_group.append("text")
.attr("xlink:href",icon_url)
.attr("class","fa-lg")
.attr("x",15)
.attr("y",21)
.attr("stroke","none")
.attr("fill","#ffffff")
.attr("text-anchor","middle")
.attr("font-family", "FontAwesome");
var icon_shade_border = icon_group.append("path")
.attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
.attr("class","node_icon_shade_border")
@@ -2142,18 +2196,7 @@ 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);});
//}
}
updateIconAttributes(icon_url, icon, fontAwesomeIcon, d);
//icon.style("pointer-events","none");
icon_group.style("pointer-events","none");
@@ -2292,17 +2335,16 @@ RED.view = (function() {
if (d._def.icon) {
icon = thisNode.select(".node_icon");
var current_url = icon.attr("xlink:href");
var faIcon = thisNode.select(".fa-lg");
var current_url;
if (icon.attr("xlink:href")) {
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);
}
updateIconAttributes(new_url, icon, faIcon, d);
}
}