Move clipboard events to dedicated service and fix tests

src/js/Events.js

@@ -65,6 +65,10 @@ var Events = {
   SELECTION_MOVE_REQUEST: 'SELECTION_MOVE_REQUEST',
   SELECTION_DISMISSED: 'SELECTION_DISMISSED',
 
+  CLIPBOARD_COPY: 'CLIPBOARD_COPY',
+  CLIPBOARD_CUT: 'CLIPBOARD_CUT',
+  CLIPBOARD_PASTE: 'CLIPBOARD_PASTE',
+
   SHOW_NOTIFICATION: 'SHOW_NOTIFICATION',
   HIDE_NOTIFICATION: 'HIDE_NOTIFICATION',
 

src/js/app.js

@@ -174,6 +174,9 @@
         this.currentColorsService);
       this.performanceReportService.init();
 
+      this.clipboardService = new pskl.service.ClipboardService(this.piskelController);
+      this.clipboardService.init();
+
       this.drawingLoop = new pskl.rendering.DrawingLoop();
       this.drawingLoop.addCallback(this.render, this);
       this.drawingLoop.start();

src/js/devtools/DrawingTestPlayer.js

@@ -108,6 +108,8 @@
         this.playTransformToolEvent_(recordEvent);
       } else if (recordEvent.type === 'instrumented-event') {
         this.playInstrumentedEvent_(recordEvent);
+      } else if (recordEvent.type === 'clipboard-event') {
+        this.playClipboardEvent_(recordEvent);
       }
 
       // Record the time spent replaying the event
@@ -169,6 +171,16 @@
     pskl.app.piskelController[recordEvent.methodName].apply(pskl.app.piskelController, recordEvent.args);
   };
 
+  ns.DrawingTestPlayer.prototype.playClipboardEvent_ = function (recordEvent) {
+    $.publish(recordEvent.event.type, {
+      preventDefault: function () {},
+      clipboardData: {
+        items: [],
+        setData: function () {}
+      }
+    });
+  };
+
   ns.DrawingTestPlayer.prototype.onTestEnd_ = function () {
     this.removeMouseShim_();
     // Restore the original drawing loop.

src/js/devtools/DrawingTestRecorder.js

@@ -15,6 +15,10 @@
     $.subscribe(Events.TRANSFORMATION_EVENT, this.onTransformationEvent_.bind(this));
     $.subscribe(Events.PRIMARY_COLOR_SELECTED, this.onColorEvent_.bind(this, true));
     $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onColorEvent_.bind(this, false));
+    $.subscribe(Events.CLIPBOARD_COPY, this.onClipboardEvent_.bind(this));
+    $.subscribe(Events.CLIPBOARD_CUT, this.onClipboardEvent_.bind(this));
+    $.subscribe(Events.CLIPBOARD_PASTE, this.onClipboardEvent_.bind(this));
+
 
     for (var key in this.piskelController) {
       if (typeof this.piskelController[key] == 'function') {
@@ -136,6 +140,15 @@
     }
   };
 
+  ns.DrawingTestRecorder.prototype.onClipboardEvent_ = function (evt) {
+    if (this.isRecording) {
+      var recordEvent = {};
+      recordEvent.type = 'clipboard-event';
+      recordEvent.event = evt;
+      this.events.push(recordEvent);
+    }
+  };
+
   ns.DrawingTestRecorder.prototype.onInstrumentedMethod_ = function (callee, methodName, args) {
     if (this.isRecording) {
       var recordEvent = {};

src/js/selection/SelectionManager.js

@@ -17,16 +17,14 @@
     $.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.CLIPBOARD_COPY, this.copy.bind(this));
+    $.subscribe(Events.CLIPBOARD_CUT, this.copy.bind(this));
+    $.subscribe(Events.CLIPBOARD_PASTE, this.paste.bind(this));
 
     var shortcuts = pskl.service.keyboard.Shortcuts;
     pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.DELETE, this.onDeleteShortcut_.bind(this));
     pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.COMMIT, this.commit.bind(this));
 
-    // These 3 events should be handled by a new separated service
-    window.addEventListener('cut', this.cut.bind(this), true);
-    window.addEventListener('copy', this.copy.bind(this), true);
-    window.addEventListener('paste', this.paste.bind(this), true);
-
     $.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this));
   };
 
@@ -82,26 +80,21 @@
     });
   };
 
-  ns.SelectionManager.prototype.copy = function(event) {
+  ns.SelectionManager.prototype.copy = function(event, domEvent) {
     if (this.currentSelection && this.piskelController.getCurrentFrame()) {
       this.currentSelection.fillSelectionFromFrame(this.piskelController.getCurrentFrame());
-      event.clipboardData.setData('text/plain', this.currentSelection.stringify());
-      event.preventDefault();
+      if (domEvent) {
+        domEvent.clipboardData.setData('text/plain', this.currentSelection.stringify());
+        domEvent.preventDefault();
+      }
+      if (event.type === Events.CLIPBOARD_CUT) {
+        this.erase();
+      }
     }
   };
 
-  ns.SelectionManager.prototype.cut = function(event) {
-    if (this.currentSelection && this.piskelController.getCurrentFrame()) {
-      // Put cut target into the selection:
-      this.currentSelection.fillSelectionFromFrame(this.piskelController.getCurrentFrame());
-      event.clipboardData.setData('text/plain', JSON.stringify(this.currentSelection));
-      event.preventDefault();
-      this.erase();
-    }
-  };
-
-  ns.SelectionManager.prototype.paste = function(event) {
-    var items = event.clipboardData.items;
+  ns.SelectionManager.prototype.paste = function(event, domEvent) {
+    var items = domEvent ? domEvent.clipboardData.items : [];
 
     try {
       for (var i = 0 ; i < items.length ; i++) {

src/js/service/ClipboardService.js

@@ -0,0 +1,25 @@
+(function () {
+  var ns = $.namespace('pskl.service');
+
+  ns.ClipboardService = function (piskelController) {
+    this.piskelController = piskelController;
+  };
+
+  ns.ClipboardService.prototype.init = function () {
+    window.addEventListener('copy', this._onCopy.bind(this), true);
+    window.addEventListener('cut', this._onCut.bind(this), true);
+    window.addEventListener('paste', this._onPaste.bind(this), true);
+  };
+
+  ns.ClipboardService.prototype._onCut = function (event) {
+    $.publish(Events.CLIPBOARD_CUT, event);
+  };
+
+  ns.ClipboardService.prototype._onCopy = function (event) {
+    $.publish(Events.CLIPBOARD_COPY, event);
+  };
+
+  ns.ClipboardService.prototype._onPaste = function (event) {
+    $.publish(Events.CLIPBOARD_PASTE, event);
+  };
+})();

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

@@ -54,7 +54,7 @@
       this.mode = 'moveSelection';
       if (event.shiftKey && !this.isMovingContent_) {
         this.isMovingContent_ = true;
-        $.publish(Events.SELECTION_CUT);
+        $.publish(Events.CLIPBOARD_CUT);
         this.drawSelectionOnOverlay_(overlay);
       }
       this.onSelectionMoveStart_(col, row, frame, overlay);
@@ -118,7 +118,7 @@
    */
   ns.BaseSelect.prototype.commitSelection = function () {
     if (this.isMovingContent_) {
-      $.publish(Events.SELECTION_PASTE);
+      $.publish(Events.CLIPBOARD_PASTE);
       this.isMovingContent_ = false;
     }
 

src/piskel-script-list.js

@@ -204,6 +204,7 @@
   "js/service/keyboard/ShortcutService.js",
   "js/service/ImportService.js",
   "js/service/ImageUploadService.js",
+  "js/service/ClipboardService.js",
   "js/service/CurrentColorsService.js",
   "js/service/FileDropperService.js",
   "js/service/SelectedColorsService.js",