Issue #306 : Selection : set opacity for overlay instead of pixel per pixel

src/js/Events.js

@@ -30,6 +30,13 @@ 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

@@ -62,8 +62,9 @@
 
     $(window).resize($.proxy(this.startResizeTimer_, this));
 
-    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
+    $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
-    $.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.onFrameSizeChange_, 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));
@@ -136,6 +137,10 @@
     $.publish(Events.ZOOM_CHANGED);
   };
 
+  ns.DrawingController.prototype.onSetOverlayOpacity_ = function (evt, opacity) {
+    this.overlayRenderer.setCanvasOpacity(opacity);
+  };
+
   /**
    * @private
    */

src/js/rendering/frame/FrameRenderer.js

@@ -93,6 +93,12 @@
     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,6 +35,8 @@
     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.
@@ -67,9 +69,10 @@
     if (this.mode == 'select') {
       this.onSelectEnd_(col, row, color, frame, overlay);
     } else if (this.mode == 'moveSelection') {
-
       this.onSelectionDragEnd_(col, row, color, frame, overlay);
     }
+
+    $.publish(Events.SET_OVERLAY_OPACITY, [1]);
   };
 
   /**
@@ -110,19 +113,12 @@
     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 ? this.getTransparentVariant(pixel.color) : Constants.SELECTION_TRANSPARENT_COLOR;
+      var color = hasColor ? pixel.color : Constants.SELECTION_TRANSPARENT_COLOR;
 
       overlay.setPixel(pixels[i].col, pixels[i].row, color);
     }
   };
 
-  ns.BaseSelect.prototype.getTransparentVariant = 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) {};