Add caching to CurrentColorsService

src/js/service/CurrentColorsService.js

@@ -90,25 +90,46 @@
   ns.CurrentColorsService.prototype.updateCurrentColors_ = function () {
     var layers = this.piskelController.getLayers();
     var frames = layers.map(function (l) {return l.getFrames();}).reduce(function (p, n) {return p.concat(n);});
-
     var job = function (frame) {
       return this.cachedFrameProcessor.get(frame);
     }.bind(this);
 
-    // TODO: Cache frame -> color
+    var colors = {};
-    for (var i = 0, length = frames.length; i < length; i++) {
+    var framesToBatch = [];
+    for (var i = 0, length = frames.length; i < length; ++i) {
       var frame = frames[i];
       var hash = frame.getHash();
       
+      if (frameCache[hash]) {
+        colors = Object.assign(colors, frameCache[hash]);
+
+        var hashParts = hash.split('-');
+        var hashVersion = parseInt(hashParts.pop());
+
+        if (hashVersion > 0) {
+          var lastColors = frameCache[hashParts.join('-')+'-'+(hashVersion - 1)];
+
+          if (lastColors) {
+            Object.keys(lastColors).forEach(function(color) {
+              if (!colors[color]) {
+                delete colors[color];
+              }
+            });
+          }
+        }
+      } else {
+        framesToBatch.push(frame);
+      }
     }
 
-    batchAll(frames, job).then(function (results) {
+    var batchAllThen = function (results) {
       var colors = {};
       results.forEach(function (result) {
         Object.keys(result).forEach(function (color) {
           colors[color] = true;
         });
       });
+
       // Remove transparent color from used colors
       delete colors[pskl.utils.colorToInt(Constants.TRANSPARENT_COLOR)];
 
@@ -118,7 +139,13 @@
       }
 
       this.setCurrentColors(hexColors);
-    }.bind(this));
+    }.bind(this)
+
+    if (framesToBatch.length == 0) {
+      batchAllThen([colors]);
+    } else {
+      batchAll(framesToBatch, job).then(batchAllThen);
+    }
   };
 
   ns.CurrentColorsService.prototype.isCurrentColorsPaletteSelected_ = function () {
@@ -138,7 +165,7 @@
 
   ns.CurrentColorsService.prototype.getFrameColors_ = function (frame, processorCallback) {
     var frameColorsWorker = new pskl.worker.framecolors.FrameColors(frame,
-      function (event) {processorCallback(event.data.colors);},
+      function (event) {frameCache[frame.getHash()] = event.data.colors; processorCallback(event.data.colors);},
       function () {},
       function (event) {processorCallback({});}
     );

src/js/worker/framecolors/FrameColors.js

@@ -13,7 +13,7 @@
   };
 
   ns.FrameColors.prototype.process = function () {
-    this.worker.postMessage(this.pixels);
+    this.worker.postMessage([pskl.utils.colorToInt(Constants.TRANSPARENT_COLOR), Constants.MAX_PALETTE_COLORS, this.pixels]);
   };
 
   ns.FrameColors.prototype.onWorkerMessage = function (event) {

src/js/worker/framecolors/FrameColorsWorker.js

@@ -47,11 +47,15 @@
 
     var getFrameColors = function (frame) {
       var frameColors = {};
-      var transparentColorInt = 0; // TODO: Fix magic number
+      var transparentColorInt = this.TRANSPARENT_COLOR;
-      for (var i = 0; i < frame.length; i++) {
+      var colors = 0;
+      for (var i = 0, length = frame.length; i < length && colors < this.MAX_PALETTE_COLORS; i++) {
         var color = frame[i];
         if (color !== transparentColorInt) {
-          frameColors[color] = true;
+         if (!frameColors[color]) {
+            frameColors[color] = true;
+            colors++;
+          }
         }
       }
       return frameColors;
@@ -59,7 +63,9 @@
 
     this.onmessage = function(event) {
       try {
-        var frame = event.data;
+        this.TRANSPARENT_COLOR = event.data[0];
+        this.MAX_PALETTE_COLORS = event.data[1];
+        var frame = event.data[2];
         var colors = getFrameColors(frame);
         this.postMessage({
           type : 'SUCCESS',