cleanup of performance improvement

src/js/Constants.js

@@ -11,6 +11,8 @@ var Constants = {
   MAX_HEIGHT : 1024,
   MAX_WIDTH : 1024,
 
+  MAX_CURRENT_COLORS_DISPLAYED : 100,
+
   MINIMUM_ZOOM : 1,
 
   PREVIEW_FILM_SIZE : 96,

src/js/controller/PalettesListController.js

@@ -10,7 +10,6 @@
   // I apologize to my future self for this one.
   var NO_SCROLL_MAX_COLORS = 20;
 
-  var MAX_COLORS = 100;
 
   ns.PalettesListController = function (paletteController, usedColorService) {
     this.usedColorService = usedColorService;
@@ -80,8 +79,8 @@
       }
     }
 
-    if (colors.length > MAX_COLORS) {
+    if (colors.length > Constants.MAX_CURRENT_COLORS_DISPLAYED) {
-      colors = colors.slice(0, MAX_COLORS);
+      colors = colors.slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED);
     }
 
     return colors;

src/js/controller/PreviewFilmController.js

@@ -16,9 +16,9 @@
 
     this.redrawFlag = true;
 
-    this.cachedImageProcessor = new pskl.model.frame.CachedFrameProcessor();
+    this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
-    this.cachedImageProcessor.setFrameProcessor(this.frameToPreviewCanvas_.bind(this));
+    this.cachedFrameProcessor.setFrameProcessor(this.frameToPreviewCanvas_.bind(this));
-    this.cachedImageProcessor.setOutputCloner(this.clonePreviewCanvas_.bind(this));
+    this.cachedFrameProcessor.setOutputCloner(this.clonePreviewCanvas_.bind(this));
   };
 
   ns.PreviewFilmController.prototype.init = function() {
@@ -207,7 +207,7 @@
   };
 
   ns.PreviewFilmController.prototype.getCanvasForFrame = function (frame) {
-    var canvas = this.cachedImageProcessor.get(frame, this.zoom);
+    var canvas = this.cachedFrameProcessor.get(frame, this.zoom);
     canvas.classList.add('tile-view', 'canvas');
     return canvas;
   };

src/js/rendering/frame/TiledFrameRenderer.js

@@ -9,8 +9,8 @@
     this.displayContainer.classList.add('tiled-frame-container');
     container.get(0).appendChild(this.displayContainer);
 
-    this.cachedImageProcessor = new pskl.model.frame.CachedFrameProcessor();
+    this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
-    this.cachedImageProcessor.setFrameProcessor(this.frameToDataUrl_.bind(this));
+    this.cachedFrameProcessor.setFrameProcessor(this.frameToDataUrl_.bind(this));
   };
 
   ns.TiledFrameRenderer.prototype.frameToDataUrl_ = function (frame) {
@@ -19,7 +19,7 @@
   };
 
   ns.TiledFrameRenderer.prototype.render = function (frame) {
-    var imageSrc = this.cachedImageProcessor.get(frame, this.zoom);
+    var imageSrc = this.cachedFrameProcessor.get(frame, this.zoom);
     this.displayContainer.style.backgroundImage = 'url(' + imageSrc + ')';
   };
 

src/js/service/CurrentColorsService.js

@@ -4,6 +4,9 @@
   ns.CurrentColorsService = function (piskelController) {
     this.piskelController = piskelController;
     this.currentColors = [];
+    this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
+    this.cachedFrameProcessor.setFrameProcessor(this.frameToColors_.bind(this));
+
     this.framesColorsCache_ = {};
   };
 
@@ -16,33 +19,35 @@
     return this.currentColors;
   };
 
+  ns.CurrentColorsService.prototype.frameToColors_ = function (frame) {
+    var frameColors = {};
+    frame.forEachPixel(function (color, x, y) {
+      frameColors[color] = (frameColors[color] || 0) + 1;
+    });
+    return frameColors;
+  };
+
+
   ns.CurrentColorsService.prototype.onPiskelUpdated_ = function (evt) {
     var layers = this.piskelController.getLayers();
     var frames = layers.map(function (l) {return l.getFrames();}).reduce(function (p, n) {return p.concat(n);});
     var colors = {};
     frames.forEach(function (f) {
-      var frameHash = f.getHash();
+      var frameColors = this.cachedFrameProcessor.get(f);
-      if (!this.framesColorsCache_[frameHash]) {
+      Object.keys(frameColors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED).forEach(function (color) {
-        var frameColors = {};
+        colors[color] = (colors[color] || 0) + frameColors[color];
-        f.forEachPixel(function (color, x, y) {
-          frameColors[color] = true;
-        });
-        this.framesColorsCache_[frameHash] = frameColors;
-      }
-      Object.keys(this.framesColorsCache_[frameHash]).forEach(function (color) {
-        colors[color] = true;
       });
     }.bind(this));
+
+    // Remove transparent color from used colors
     delete colors[Constants.TRANSPARENT_COLOR];
-    this.currentColors = Object.keys(colors);
+
+    // limit the array to the max colors to display
+    this.currentColors = Object.keys(colors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED);
+
+    // sort by most frequent color
     this.currentColors = this.currentColors.sort(function (c1, c2) {
-      if (c1 < c2) {
+      return colors[c2] - colors[c1];
-        return -1;
-      } else if (c1 > c2) {
-        return 1;
-      } else {
-        return 0;
-      }
     });
 
     // TODO : only fire if there was a change