From 549e56e2204a48639cb60fe2e83e847910d23125 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 27 Jul 2018 22:05:28 +0100
Subject: [PATCH] Add editorTheme.palette.theme to allow overriding colours

---
 CHANGELOG.md                   |  3 ++-
 editor/js/ui/diff.js           |  2 +-
 editor/js/ui/editor.js         |  4 ++--
 editor/js/ui/palette-editor.js |  2 +-
 editor/js/ui/palette.js        |  2 +-
 editor/js/ui/search.js         |  2 +-
 editor/js/ui/tab-info.js       |  2 +-
 editor/js/ui/typeSearch.js     |  2 +-
 editor/js/ui/utils.js          | 35 ++++++++++++++++++++++++++++++++++
 editor/js/ui/view-navigator.js |  2 +-
 editor/js/ui/view.js           |  4 ++--
 11 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f9acf83e1..ee591143f 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/editor/js/ui/diff.js b/editor/js/ui/diff.js
index eb822df1e..b5af903a0 100644
--- a/editor/js/ui/diff.js
+++ b/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";
diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js
index 16b6b65f5..e0445be54 100644
--- a/editor/js/ui/editor.js
+++ b/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);
diff --git a/editor/js/ui/palette-editor.js b/editor/js/ui/palette-editor.js
index cd5f0b289..90afe0aab 100644
--- a/editor/js/ui/palette-editor.js
+++ b/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 {
diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js
index c72ed4f7a..a345233ff 100644
--- a/editor/js/ui/palette.js
+++ b/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");
diff --git a/editor/js/ui/search.js b/editor/js/ui/search.js
index 9f468cb09..f13281807 100644
--- a/editor/js/ui/search.js
+++ b/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";
diff --git a/editor/js/ui/tab-info.js b/editor/js/ui/tab-info.js
index 83623c878..78dc246c0 100644
--- a/editor/js/ui/tab-info.js
+++ b/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);
diff --git a/editor/js/ui/typeSearch.js b/editor/js/ui/typeSearch.js
index 4ffdf4d15..7e3368bad 100644
--- a/editor/js/ui/typeSearch.js
+++ b/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);
 
diff --git a/editor/js/ui/utils.js b/editor/js/ui/utils.js
index 81da08dd3..13d27d5bd 100644
--- a/editor/js/ui/utils.js
+++ b/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
diff --git a/editor/js/ui/view-navigator.js b/editor/js/ui/view-navigator.js
index da1908982..2a67c4da5 100644
--- a/editor/js/ui/view-navigator.js
+++ b/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() {
diff --git a/editor/js/ui/view.js b/editor/js/ui/view.js
index 4559c5ec4..4688c15cd 100644
--- a/editor/js/ui/view.js
+++ b/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) {