Issue #290: allow to drag selection when using SHIFT while selection

src/js/Events.js

@@ -63,6 +63,9 @@ var Events = {
   SELECTION_CREATED: 'SELECTION_CREATED',
   SELECTION_MOVE_REQUEST: 'SELECTION_MOVE_REQUEST',
   SELECTION_DISMISSED: 'SELECTION_DISMISSED',
+  SELECTION_COPY: 'SELECTION_COPY',
+  SELECTION_CUT: 'SELECTION_CUT',
+  SELECTION_PASTE: 'SELECTION_PASTE',
 
   SHOW_NOTIFICATION: 'SHOW_NOTIFICATION',
   HIDE_NOTIFICATION: 'HIDE_NOTIFICATION',

src/js/selection/SelectionManager.js

@@ -17,6 +17,9 @@
     $.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
     $.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));
     $.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
+    $.subscribe(Events.SELECTION_COPY, this.copy.bind(this));
+    $.subscribe(Events.SELECTION_CUT, this.cut.bind(this));
+    $.subscribe(Events.SELECTION_PASTE, this.paste.bind(this));
 
     var shortcuts = pskl.service.keyboard.Shortcuts;
     pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.PASTE, this.paste.bind(this));
@@ -149,6 +152,10 @@
   ns.SelectionManager.prototype.onSelectionMoved_ = function(evt, colDiff, rowDiff) {
     if (this.currentSelection) {
       this.currentSelection.move(colDiff, rowDiff);
+      if (evt.shiftKey) {
+        this.cut();
+        this.paste();
+      }
     } else {
       console.error('Bad state: No currentSelection set when trying to move it in SelectionManager');
     }

src/js/tools/drawing/selection/AbstractDragSelect.js

@@ -18,6 +18,12 @@
   ns.AbstractDragSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {
     if (this.hasSelection) {
       this.hasSelection = false;
+
+      if (this.dragMode_) {
+        $.publish(Events.SELECTION_PASTE);
+        this.dragMode_ = false;
+      }
+
       overlay.clear();
       $.publish(Events.SELECTION_DISMISSED);
     } else {

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

@@ -48,6 +48,10 @@
       this.onSelectStart_(col, row, frame, overlay);
     } else {
       this.mode = 'moveSelection';
+      if (event.shiftKey && !this.dragMode_) {
+        this.dragMode_ = true;
+        $.publish(Events.SELECTION_CUT);
+      }
       this.onSelectionMoveStart_(col, row, frame, overlay);
     }
   };
@@ -103,6 +107,20 @@
     // there is no highlighted pixel for selection tools, do nothing
   };
 
+  /**
+   * Protected method, should be called when the selection is dismissed.
+   */
+  ns.BaseSelect.prototype.dismissSelection = function () {
+    if (this.dragMode_) {
+      $.publish(Events.SELECTION_PASTE);
+      this.dragMode_ = false;
+    }
+
+    // Clean previous selection:
+    $.publish(Events.SELECTION_DISMISSED);
+    overlay.clear();
+  };
+
   /**
    * For each pixel in the selection draw it in white transparent on the tool overlay
    * @protected

src/js/tools/drawing/selection/ShapeSelect.js

@@ -8,6 +8,7 @@
 
   ns.ShapeSelect = function() {
     ns.BaseSelect.call(this);
+    this.hasSelection = false;
 
     this.toolId = 'tool-shape-select';
     this.helpText = 'Shape selection';
@@ -22,16 +23,18 @@
    * @override
    */
   ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {
-    // Clean previous selection:
+    if (this.hasSelection) {
-    $.publish(Events.SELECTION_DISMISSED);
+      this.hasSelection = false;
-    overlay.clear();
+      this.dismissSelection();
-
+    } else {
+      this.hasSelection = true;
       // From the pixel cliked, get shape using an algorithm similar to the paintbucket one:
       var pixels = pskl.PixelUtils.getSimilarConnectedPixelsFromFrame(frame, col, row);
       this.selection = new pskl.selection.ShapeSelection(pixels);
 
       $.publish(Events.SELECTION_CREATED, [this.selection]);
       this.drawSelectionOnOverlay_(overlay);
+    }
   };
 
 })();