Enhancement : preview copied selection + paste only opaque

src/js/drawingtools/selectiontools/BaseSelect.js

@@ -76,18 +76,24 @@
    */
   ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay, event) {
     if (overlay.containsPixel(col, row)) {
-      if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
+      if(this.isInSelection(col, row)) {
         // We're hovering the selection, show the move tool:
-        this.BodyRoot.addClass(this.toolId);
-        this.BodyRoot.removeClass(this.secondaryToolId);
-      } else {
-        // We're not hovering the selection, show create selection tool:
         this.BodyRoot.addClass(this.secondaryToolId);
         this.BodyRoot.removeClass(this.toolId);
+      } else {
+        // We're not hovering the selection, show create selection tool:
+        this.BodyRoot.addClass(this.toolId);
+        this.BodyRoot.removeClass(this.secondaryToolId);
       }
     }
   };
 
+  ns.BaseSelect.prototype.isInSelection = function (col, row) {
+    return this.selection && this.selection.pixels.some(function (pixel) {
+      return pixel.col === col && pixel.row === row;
+    });
+  };
+
   ns.BaseSelect.prototype.hideHighlightedPixel = function() {
     // there is no highlighted pixel for selection tools, do nothing
   };
@@ -99,10 +105,20 @@
   ns.BaseSelect.prototype.drawSelectionOnOverlay_ = function (overlay) {
     var pixels = this.selection.pixels;
     for(var i=0, l=pixels.length; i<l; i++) {
-      overlay.setPixel(pixels[i].col, pixels[i].row, Constants.SELECTION_TRANSPARENT_COLOR);
+      var pixel = pixels[i];
+      var hasColor = pixel.color && pixel.color !== Constants.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 = 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 */

src/js/selection/SelectionManager.js

@@ -19,6 +19,7 @@
     $.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
 
     pskl.app.shortcutService.addShortcut('ctrl+V', this.paste.bind(this));
+    pskl.app.shortcutService.addShortcut('shift+V', this.pasteOpaqueOnly.bind(this));
     pskl.app.shortcutService.addShortcut('ctrl+X', this.cut.bind(this));
     pskl.app.shortcutService.addShortcut('ctrl+C', this.copy.bind(this));
     pskl.app.shortcutService.addShortcut('del', this.erase.bind(this));
@@ -93,6 +94,21 @@
   ns.SelectionManager.prototype.paste = function() {
     if(this.currentSelection && this.currentSelection.hasPastedContent) {
       var pixels = this.currentSelection.pixels;
+      this.pastePixels(pixels);
+    }
+  };
+
+  ns.SelectionManager.prototype.pasteOpaqueOnly = function() {
+    if(this.currentSelection && this.currentSelection.hasPastedContent) {
+      var pixels = this.currentSelection.pixels;
+      var opaquePixels = pixels.filter(function (p) {
+        return p.color !== Constants.TRANSPARENT_COLOR;
+      });
+      this.pastePixels(opaquePixels);
+    }
+  };
+
+  ns.SelectionManager.prototype.pastePixels = function(pixels) {
     var currentFrame = this.piskelController.getCurrentFrame();
 
     $.publish(Events.PISKEL_SAVE_STATE, {
@@ -107,7 +123,6 @@
     pixels.forEach(function (pixel) {
       currentFrame.setPixel(pixel.col,pixel.row,pixel.color);
     });
-    }
   };
 
   ns.SelectionManager.prototype.replay = function (frame, replayData) {