1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Add createNodeIcon and getDarkerColor to RED.utils

This commit is contained in:
Nick O'Leary 2020-05-01 17:37:15 +01:00
parent 12dc4ab1fa
commit 597c4a2e4f
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
4 changed files with 84 additions and 41 deletions

View File

@ -1,26 +1,5 @@
RED.colorPicker = (function() { RED.colorPicker = (function() {
function getDarkerColor(c) {
var r,g,b;
if (/^#[a-f0-9]{6}$/i.test(c)) {
r = parseInt(c.substring(1, 3), 16);
g = parseInt(c.substring(3, 5), 16);
b = parseInt(c.substring(5, 7), 16);
} else if (/^#[a-f0-9]{3}$/i.test(c)) {
r = parseInt(c.substring(1, 2)+c.substring(1, 2), 16);
g = parseInt(c.substring(2, 3)+c.substring(2, 3), 16);
b = parseInt(c.substring(3, 4)+c.substring(3, 4), 16);
} else {
return c;
}
var l = 0.3 * r/255 + 0.59 * g/255 + 0.11 * b/255 ;
r = Math.max(0,r-50);
g = Math.max(0,g-50);
b = Math.max(0,b-50);
var s = ((r<<16) + (g<<8) + b).toString(16);
return '#'+'000000'.slice(0, 6-s.length)+s;
}
function create(options) { function create(options) {
var color = options.value; var color = options.value;
var id = options.id; var id = options.id;
@ -57,7 +36,7 @@ RED.colorPicker = (function() {
"background-color": color, "background-color": color,
"opacity": opacity "opacity": opacity
}); });
var border = getDarkerColor(color); var border = RED.utils.getDarkerColor(color);
if (border[0] === '#') { if (border[0] === '#') {
border += Math.round(255*Math.floor(opacity*100)/100).toString(16); border += Math.round(255*Math.floor(opacity*100)/100).toString(16);
} else { } else {
@ -132,7 +111,7 @@ RED.colorPicker = (function() {
height: height+"px", height: height+"px",
margin: margin+"px", margin: margin+"px",
backgroundColor: col, backgroundColor: col,
"border-color": getDarkerColor(col) "border-color": RED.utils.getDarkerColor(col)
}).appendTo(row); }).appendTo(row);
button.on("click", function (e) { button.on("click", function (e) {
e.preventDefault(); e.preventDefault();

View File

@ -790,6 +790,11 @@ RED.editor = (function() {
nodeDiv.css({ nodeDiv.css({
'backgroundColor': backgroundColor 'backgroundColor': backgroundColor
}); });
var borderColor = RED.utils.getDarkerColor(backgroundColor);
if (borderColor !== backgroundColor) {
nodeDiv.css('border-color',borderColor)
}
} }
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, true); RED.utils.createIconElement(icon_url, iconContainer, true);
@ -932,7 +937,12 @@ RED.editor = (function() {
$("#red-ui-editor-node-color").on('change', function(ev) { $("#red-ui-editor-node-color").on('change', function(ev) {
// Horribly out of scope... // Horribly out of scope...
nodeDiv.css('backgroundColor',$(this).val()); var colour = $(this).val();
nodeDiv.css('backgroundColor',colour);
var borderColor = RED.utils.getDarkerColor(colour);
if (borderColor !== colour) {
nodeDiv.css('border-color',borderColor)
}
}) })
} }
@ -948,6 +958,11 @@ RED.editor = (function() {
var colour = RED.utils.getNodeColor(node.type, node._def); var colour = RED.utils.getNodeColor(node.type, node._def);
var icon_url = RED.utils.getNodeIcon(node._def,node); var icon_url = RED.utils.getNodeIcon(node._def,node);
nodeDiv.css('backgroundColor',colour); nodeDiv.css('backgroundColor',colour);
var borderColor = RED.utils.getDarkerColor(colour);
if (borderColor !== colour) {
nodeDiv.css('border-color',borderColor)
}
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, true); RED.utils.createIconElement(icon_url, iconContainer, true);

View File

@ -251,17 +251,7 @@ RED.search = (function() {
var def = node._def; var def = node._def;
div = $('<a>',{href:'#',class:"red-ui-search-result"}).appendTo(container); div = $('<a>',{href:'#',class:"red-ui-search-result"}).appendTo(container);
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div); RED.utils.createNodeIcon(node).appendTo(div);
var colour = RED.utils.getNodeColor(node.type,def);
var icon_url = RED.utils.getNodeIcon(def,node);
if (node.type === 'tab') {
colour = "#C0DEED";
}
nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, true);
var contentDiv = $('<div>',{class:"red-ui-search-result-node-description"}).appendTo(div); var contentDiv = $('<div>',{class:"red-ui-search-result-node-description"}).appendTo(div);
if (node.z) { if (node.z) {
var workspace = RED.nodes.workspace(node.z); var workspace = RED.nodes.workspace(node.z);

View File

@ -806,9 +806,9 @@ RED.utils = (function() {
function separateIconPath(icon) { function separateIconPath(icon) {
var result = {module: "", file: ""}; var result = {module: "", file: ""};
if (icon) { if (icon) {
var index = icon.indexOf('icons/'); var index = icon.indexOf(RED.settings.apiRootUrl+'icons/');
if (index !== -1) { if (index === 0) {
icon = icon.substring(index+6); icon = icon.substring((RED.settings.apiRootUrl+'icons/').length);
} }
index = icon.indexOf('/'); index = icon.indexOf('/');
if (index !== -1) { if (index !== -1) {
@ -859,12 +859,15 @@ RED.utils = (function() {
} }
function getNodeIcon(def,node) { function getNodeIcon(def,node) {
if (node && node.type === 'group') { if (node && node.type === '_selection_') {
return "font-awesome/fa-object-ungroup";
} else if (node && node.type === 'group') {
return "font-awesome/fa-object-group" return "font-awesome/fa-object-group"
} else if (def.category === 'config') { } else if (def.category === 'config') {
return RED.settings.apiRootUrl+"icons/node-red/cog.svg" return RED.settings.apiRootUrl+"icons/node-red/cog.svg"
} else if (node && node.type === 'tab') { } else if (node && node.type === 'tab') {
return RED.settings.apiRootUrl+"icons/node-red/subflow.svg" return "red-ui-icons/red-ui-icons-flow"
// return RED.settings.apiRootUrl+"images/subflow_tab.svg"
} else if (node && node.type === 'unknown') { } else if (node && node.type === 'unknown') {
return RED.settings.apiRootUrl+"icons/node-red/alert.svg" return RED.settings.apiRootUrl+"icons/node-red/alert.svg"
} else if (node && node.icon) { } else if (node && node.icon) {
@ -923,6 +926,8 @@ RED.utils = (function() {
var l; var l;
if (node.type === 'tab') { if (node.type === 'tab') {
l = node.label || defaultLabel l = node.label || defaultLabel
} else if (node.type === 'group') {
l = node.name || defaultLabel
} else { } else {
l = node._def.label; l = node._def.label;
try { try {
@ -1056,11 +1061,63 @@ RED.utils = (function() {
} }
// If the specified name is not defined in font-awesome, show arrow-in icon. // If the specified name is not defined in font-awesome, show arrow-in icon.
iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.svg" iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.svg"
} else if (iconPath.module === "red-ui-icons") {
var redIconElement = $('<i/>').appendTo(iconContainer);
redIconElement.addClass("red-ui-palette-icon red-ui-icons " + iconPath.file);
return;
} }
var imageIconElement = $('<div/>',{class:"red-ui-palette-icon"}).appendTo(iconContainer); var imageIconElement = $('<div/>',{class:"red-ui-palette-icon"}).appendTo(iconContainer);
imageIconElement.css("backgroundImage", "url("+iconUrl+")"); imageIconElement.css("backgroundImage", "url("+iconUrl+")");
} }
function createNodeIcon(node) {
var def = node._def;
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"})
if (node.type === "_selection_") {
nodeDiv.addClass("red-ui-palette-icon-selection");
} else if (node.type === "group") {
nodeDiv.addClass("red-ui-palette-icon-group");
} else if (node.type === 'tab') {
nodeDiv.addClass("red-ui-palette-icon-flow");
} else {
var colour = RED.utils.getNodeColor(node.type,def);
// if (node.type === 'tab') {
// colour = "#C0DEED";
// }
nodeDiv.css('backgroundColor',colour);
var borderColor = getDarkerColor(colour);
if (borderColor !== colour) {
nodeDiv.css('border-color',borderColor)
}
}
var icon_url = RED.utils.getNodeIcon(def,node);
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, true);
return nodeDiv;
}
function getDarkerColor(c) {
var r,g,b;
if (/^#[a-f0-9]{6}$/i.test(c)) {
r = parseInt(c.substring(1, 3), 16);
g = parseInt(c.substring(3, 5), 16);
b = parseInt(c.substring(5, 7), 16);
} else if (/^#[a-f0-9]{3}$/i.test(c)) {
r = parseInt(c.substring(1, 2)+c.substring(1, 2), 16);
g = parseInt(c.substring(2, 3)+c.substring(2, 3), 16);
b = parseInt(c.substring(3, 4)+c.substring(3, 4), 16);
} else {
return c;
}
var l = 0.3 * r/255 + 0.59 * g/255 + 0.11 * b/255 ;
r = Math.max(0,r-50);
g = Math.max(0,g-50);
b = Math.max(0,b-50);
var s = ((r<<16) + (g<<8) + b).toString(16);
return '#'+'000000'.slice(0, 6-s.length)+s;
}
return { return {
createObjectElement: buildMessageElement, createObjectElement: buildMessageElement,
getMessageProperty: getMessageProperty, getMessageProperty: getMessageProperty,
@ -1078,6 +1135,8 @@ RED.utils = (function() {
parseContextKey: parseContextKey, parseContextKey: parseContextKey,
createIconElement: createIconElement, createIconElement: createIconElement,
sanitize: sanitize, sanitize: sanitize,
renderMarkdown: renderMarkdown renderMarkdown: renderMarkdown,
createNodeIcon: createNodeIcon,
getDarkerColor: getDarkerColor
} }
})(); })();