Issue #306 : Switch implementation for memoizer

src/js/Events.js

@@ -30,13 +30,6 @@ var Events = {
 
   CLOSE_SETTINGS_DRAWER : 'CLOSE_SETTINGS_DRAWER',
 
-  /**
-   * Fire this event to update the opacity of the overlay frame.
-   * Payload :
-   *   1st argument : opacity {Number} between 0 and 1
-   */
-  SET_OVERLAY_OPACITY : 'SET_OVERLAY_OPACITY',
-
   /**
    * The framesheet was reseted and is now probably drastically different.
    * Number of frames, content of frames, color used for the palette may have changed.

src/js/controller/DrawingController.js

@@ -64,7 +64,6 @@
 
     $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
     $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
-    $.subscribe(Events.SET_OVERLAY_OPACITY, this.onSetOverlayOpacity_.bind(this));
 
     pskl.app.shortcutService.addShortcut('0', this.resetZoom_.bind(this));
     pskl.app.shortcutService.addShortcut('+', this.increaseZoom_.bind(this, 1));
@@ -137,10 +136,6 @@
     $.publish(Events.ZOOM_CHANGED);
   };
 
-  ns.DrawingController.prototype.onSetOverlayOpacity_ = function (evt, opacity) {
-    this.overlayRenderer.setCanvasOpacity(opacity);
-  };
-
   /**
    * @private
    */

src/js/rendering/frame/FrameRenderer.js

@@ -99,12 +99,6 @@
     return this.zoom;
   };
 
-  ns.FrameRenderer.prototype.setCanvasOpacity = function (opacity) {
-    if (this.displayCanvas) {
-      this.displayCanvas.style.opacity = opacity;
-    }
-  };
-
   ns.FrameRenderer.prototype.setDisplaySize = function (width, height) {
     this.displayWidth = width;
     this.displayHeight = height;

src/js/tools/drawing/selection/BaseSelect.js

@@ -35,8 +35,6 @@
     this.lastCol = col;
     this.lastRow = row;
 
-    $.publish(Events.SET_OVERLAY_OPACITY, [0.5]);
-
     // The select tool can be in two different state.
     // If the inital click of the tool is not on a selection, we go in 'select'
     // mode to create a selection.
@@ -71,8 +69,6 @@
     } else if (this.mode == 'moveSelection') {
       this.onSelectionDragEnd_(col, row, color, frame, overlay);
     }
-
-    $.publish(Events.SET_OVERLAY_OPACITY, [1]);
   };
 
   /**
@@ -113,12 +109,19 @@
     for (var i = 0, l = pixels.length; i < l ; i++) {
       var pixel = pixels[i];
       var hasColor = pixel.color && pixel.color !== Constants.TRANSPARENT_COLOR ;
-      var color = hasColor ? pixel.color : Constants.SELECTION_TRANSPARENT_COLOR;
+      var color = hasColor ? this.getTransparentVariant_(pixel.color) : Constants.SELECTION_TRANSPARENT_COLOR;
 
       overlay.setPixel(pixels[i].col, pixels[i].row, color);
     }
   };
 
+  ns.BaseSelect.prototype.getTransparentVariant_ = pskl.utils.FunctionUtils.memo(function (colorStr) {
+    var color = window.tinycolor(colorStr);
+    color = window.tinycolor.lighten(color, 10);
+    color.setAlpha(0.5);
+    return color.toRgbString();
+  }, {});
+
   // The list of callbacks to implement by specialized tools to implement the selection creation behavior.
   /** @protected */
   ns.BaseSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {};

src/js/utils/FunctionUtils.js

@@ -0,0 +1,16 @@
+(function () {
+  var ns = $.namespace('pskl.utils');
+
+  ns.FunctionUtils = {
+    memo : function (fn, cache, scope) {
+      var memoized = function () {
+        var key = Array.prototype.join.call(arguments, '-');
+        if (!cache[key]) {
+          cache[key] = fn.apply(scope, arguments);
+        }
+        return cache[key];
+      };
+      return memoized;
+    }
+  };
+})();

src/piskel-script-list.js

@@ -23,6 +23,7 @@
   "js/utils/Dom.js",
   "js/utils/Event.js",
   "js/utils/Environment.js",
+  "js/utils/FunctionUtils.js",
   "js/utils/Math.js",
   "js/utils/FileUtils.js",
   "js/utils/FileUtilsDesktop.js",