Add editorTheme.palette.theme to allow overriding colours

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 Editor
 
- - Add Context data sidebar
+ - Add editorTheme.palette.theme to allow overriding colours
  - Index all node properties when searching Fixes #1446
  - Handle NaN and Infinity properly in debug sidebar Fixes #1778 #1779
  - Prevent horizontal scroll when palette name cannot wrap
@@ -44,6 +44,7 @@ Nodes
 
 Persistent Context
 
+ - Add Context data sidebar
  - Add persistable context option
  - Add default memory store
  - Add file-based context store

editor/js/ui/diff.js

@@ -490,7 +490,7 @@ RED.diff = (function() {
     }
     function createNodeIcon(node,def) {
         var nodeDiv = $("<div>",{class:"node-diff-node-entry-node"});
-        var colour = def.color;
+        var colour = RED.utils.getNodeColor(node.type,def);
         var icon_url = RED.utils.getNodeIcon(def,node);
         if (node.type === 'tab') {
             colour = "#C0DEED";

editor/js/ui/editor.js

@@ -745,7 +745,7 @@ RED.editor = (function() {
                 icons.forEach(function(icon) {
                     var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
                     var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
-                    var colour = node._def.color;
+                    var colour = RED.utils.getNodeColor(node.type, node._def);
                     var icon_url = "icons/"+moduleName+"/"+icon;
                     iconDiv.data('icon',icon_url)
                     nodeDiv.css('backgroundColor',colour);
@@ -816,7 +816,7 @@ RED.editor = (function() {
             var iconButton = $('<button class="editor-button">').appendTo(iconRow);
 
             var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton);
-            var colour = node._def.color;
+            var colour = RED.utils.getNodeColor(node.type, node._def);
             var icon_url = RED.utils.getNodeIcon(node._def,node);
             nodeDiv.css('backgroundColor',colour);
             var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);

editor/js/ui/palette-editor.js

@@ -233,7 +233,7 @@ RED.palette.editor = (function() {
                             if (set.enabled) {
                                 var def = RED.nodes.getType(t);
                                 if (def && def.color) {
-                                    swatch.css({background:def.color});
+                                    swatch.css({background:RED.utils.getNodeColor(t,def)});
                                     swatch.css({border: "1px solid "+getContrastingBorder(swatch.css('backgroundColor'))})
 
                                 } else {

editor/js/ui/palette.js

@@ -172,7 +172,7 @@ RED.palette = (function() {
                 $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
             }
 
-            d.style.backgroundColor = def.color;
+            d.style.backgroundColor = RED.utils.getNodeColor(nt,def);
 
             if (def.outputs > 0) {
                 var portOut = document.createElement("div");

editor/js/ui/search.js

@@ -193,7 +193,7 @@ RED.search = (function() {
                     var div = $('<a>',{href:'#',class:"red-ui-search-result"}).appendTo(container);
 
                     var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div);
-                    var colour = def.color;
+                    var colour = RED.utils.getNodeColor(node.type,def);
                     var icon_url = RED.utils.getNodeIcon(def,node);
                     if (node.type === 'tab') {
                         colour = "#C0DEED";

editor/js/ui/tab-info.js

@@ -221,7 +221,7 @@ RED.sidebar.info = (function() {
 
                                         var div = $('<span>',{class:""}).appendTo(container);
                                         var nodeDiv = $('<div>',{class:"palette_node palette_node_small"}).appendTo(div);
-                                        var colour = configNode._def.color;
+                                        var colour = RED.utils.getNodeColor(configNode.type,configNode._def);
                                         var icon_url = RED.utils.getNodeIcon(configNode._def);
                                         nodeDiv.css({'backgroundColor':colour, "cursor":"pointer"});
                                         var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);

editor/js/ui/typeSearch.js

@@ -128,7 +128,7 @@ RED.typeSearch = (function() {
                 var div = $('<a>',{href:'#',class:"red-ui-search-result"}).appendTo(container);
 
                 var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div);
-                var colour = def.color;
+                var colour = RED.utils.getNodeColor(object.type,def);
                 var icon_url = RED.utils.getNodeIcon(def);
                 nodeDiv.css('backgroundColor',colour);
 

editor/js/ui/utils.js

@@ -794,6 +794,40 @@ RED.utils = (function() {
         return RED.text.bidi.enforceTextDirectionWithUCC(l);
     }
 
+    var nodeColorCache = {};
+    function getNodeColor(type, def) {
+        var result = def.color;
+        var paletteTheme = RED.settings.theme('palette.theme') || [];
+        if (paletteTheme.length > 0) {
+            if (!nodeColorCache.hasOwnProperty(type)) {
+                var l = paletteTheme.length;
+                for (var i=0;i<l;i++ ){
+                    var themeRule = paletteTheme[i];
+                    if (themeRule.hasOwnProperty('category')) {
+                        if (!themeRule.hasOwnProperty('_category')) {
+                            themeRule._category = new RegExp(themeRule.category);
+                        }
+                        if (!themeRule._category.test(def.category)) {
+                            continue;
+                        }
+                    }
+                    if (themeRule.hasOwnProperty('type')) {
+                        if (!themeRule.hasOwnProperty('_type')) {
+                            themeRule._type = new RegExp(themeRule.type);
+                        }
+                        if (!themeRule._type.test(type)) {
+                            continue;
+                        }
+                    }
+                    nodeColorCache[type] = themeRule.color || def.color;
+                    break;
+                }
+            }
+            result = nodeColorCache[type];
+        }
+        return result;
+    }
+
     function addSpinnerOverlay(container,contain) {
         var spinner = $('<div class="projects-dialog-spinner "><img src="red/images/spin.svg"/></div>').appendTo(container);
         if (contain) {
@@ -852,6 +886,7 @@ RED.utils = (function() {
         getDefaultNodeIcon: getDefaultNodeIcon,
         getNodeIcon: getNodeIcon,
         getNodeLabel: getNodeLabel,
+        getNodeColor: getNodeColor,
         addSpinnerOverlay: addSpinnerOverlay,
         decodeObject: decodeObject,
         parseContextKey: parseContextKey

editor/js/ui/view-navigator.js

@@ -46,7 +46,7 @@
              .attr("y",function(d) { return (d.y-d.h/2)/nav_scale })
              .attr("width",function(d) { return Math.max(9,d.w/nav_scale) })
              .attr("height",function(d) { return Math.max(3,d.h/nav_scale) })
-             .attr("fill",function(d) { return d._def.color;})
+             .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def);})
          });
      }
      function onScroll() {

editor/js/ui/view.js

@@ -2038,7 +2038,7 @@ RED.view = (function() {
                             .attr("ry",4)
                             .attr("width",16)
                             .attr("height",node_height-12)
-                            .attr("fill",function(d) { return d._def.color;})
+                            .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def); /*d._def.color;*/})
                             .attr("cursor","pointer")
                             .on("mousedown",function(d) {if (!lasso && isButtonEnabled(d)) {focusView();d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}})
                             .on("mouseup",function(d) {if (!lasso && isButtonEnabled(d)) { d3.select(this).attr("fill-opacity",0.4);d3.event.preventDefault();d3.event.stopPropagation();}})
@@ -2059,7 +2059,7 @@ RED.view = (function() {
                         .classed("node_unknown",function(d) { return d.type == "unknown"; })
                         .attr("rx", 5)
                         .attr("ry", 5)
-                        .attr("fill",function(d) { return d._def.color;})
+                        .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def); /*d._def.color;*/})
                         .on("mouseup",nodeMouseUp)
                         .on("mousedown",nodeMouseDown)
                         .on("touchstart",function(d) {