Issue #315 : Implement custom replay for transform tools + add drawing test support

src/js/Events.js

@@ -75,6 +75,7 @@ var Events = {
   // Tests
   MOUSE_EVENT : 'MOUSE_EVENT',
   KEYBOARD_EVENT : 'KEYBOARD_EVENT',
+  TRANSFORMATION_EVENT : 'TRANSFORMATION_EVENT',
   TEST_RECORD_END : 'TEST_RECORD_END',
   TEST_CASE_END : 'TEST_CASE_END',
   TEST_SUITE_END : 'TEST_SUITE_END'

src/js/controller/TransformationsController.js

@@ -19,19 +19,24 @@
   ns.TransformationsController.prototype.init = function () {
     var container = document.querySelector('.transformations-container');
     this.toolsContainer = container.querySelector('.tools-wrapper');
-    container.addEventListener('click', this.onTransformationClick.bind(this));
+    container.addEventListener('click', this.onTransformationClick_.bind(this));
     this.createToolsDom_();
   };
 
-  ns.TransformationsController.prototype.onTransformationClick = function (evt) {
+  ns.TransformationsController.prototype.applyTool = function (toolId, evt) {
-    var toolId = evt.target.dataset.toolId;
     this.tools.forEach(function (tool) {
       if (tool.instance.toolId === toolId) {
+        $.publish(Events.TRANSFORMATION_EVENT, [toolId, evt]);
         tool.instance.apply(evt);
       }
     }.bind(this));
   };
 
+  ns.TransformationsController.prototype.onTransformationClick_ = function (evt) {
+    var toolId = evt.target.dataset.toolId;
+    this.applyTool(toolId, evt);
+  };
+
   ns.TransformationsController.prototype.createToolsDom_ = function() {
     var html = this.tools.reduce(function (p, tool) {
       return p + this.toolIconRenderer.render(tool.instance, tool.shortcut, 'left');

src/js/devtools/DrawingTestPlayer.js

@@ -94,6 +94,8 @@
         this.playColorEvent_(recordEvent);
       } else if (recordEvent.type === 'tool-event') {
         this.playToolEvent_(recordEvent);
+      } else if (recordEvent.type === 'transformtool-event') {
+        this.playTransformToolEvent_(recordEvent);
       } else if (recordEvent.type === 'instrumented-event') {
         this.playInstrumentedEvent_(recordEvent);
       }
@@ -142,6 +144,10 @@
     $.publish(Events.SELECT_TOOL, [recordEvent.toolId]);
   };
 
+  ns.DrawingTestPlayer.prototype.playTransformToolEvent_ = function (recordEvent) {
+    pskl.app.transformationsController.applyTool(recordEvent.toolId, recordEvent.event);
+  };
+
   ns.DrawingTestPlayer.prototype.playInstrumentedEvent_ = function (recordEvent) {
     pskl.app.piskelController[recordEvent.methodName].apply(pskl.app.piskelController, recordEvent.args);
   };

src/js/devtools/DrawingTestRecorder.js

@@ -11,6 +11,7 @@
     $.subscribe(Events.MOUSE_EVENT, this.onMouseEvent_.bind(this));
     $.subscribe(Events.KEYBOARD_EVENT, this.onKeyboardEvent_.bind(this));
     $.subscribe(Events.TOOL_SELECTED, this.onToolEvent_.bind(this));
+    $.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));
 
@@ -74,17 +75,17 @@
     }
   };
 
-  ns.DrawingTestRecorder.prototype.onKeyboardEvent_ = function (evt, keyboardEvent) {
+  ns.DrawingTestRecorder.prototype.onKeyboardEvent_ = function (evt, domEvent) {
     if (this.isRecording) {
       var recordEvent = {};
       recordEvent.type = 'keyboard-event';
       recordEvent.event = {
-        which : keyboardEvent.which,
+        which : domEvent.which,
-        shiftKey : keyboardEvent.shiftKey,
+        shiftKey : domEvent.shiftKey,
-        altKey : keyboardEvent.altKey,
+        altKey : domEvent.altKey,
-        ctrlKey : keyboardEvent.ctrlKey,
+        ctrlKey : domEvent.ctrlKey,
         target : {
-          nodeName : keyboardEvent.target.nodeName
+          nodeName : domEvent.target.nodeName
         }
       };
       this.events.push(recordEvent);
@@ -110,6 +111,20 @@
     }
   };
 
+  ns.DrawingTestRecorder.prototype.onTransformationEvent_ = function (evt, toolId, domEvent) {
+    if (this.isRecording) {
+      var recordEvent = {};
+      recordEvent.type = 'transformtool-event';
+      recordEvent.toolId = toolId;
+      recordEvent.event = {
+        shiftKey : domEvent.shiftKey,
+        altKey : domEvent.altKey,
+        ctrlKey : domEvent.ctrlKey
+      };
+      this.events.push(recordEvent);
+    }
+  };
+
   ns.DrawingTestRecorder.prototype.onInstrumentedMethod_ = function (callee, methodName, args) {
     if (this.isRecording) {
       var recordEvent = {};

src/js/tools/transform/AbstractTransformTool.js

@@ -20,10 +20,25 @@
         this.applyToolOnFrame_(frame, altKey);
       }.bind(this));
     }.bind(this));
+
     $.publish(Events.PISKEL_RESET);
-    $.publish(Events.PISKEL_SAVE_STATE, {
+    this.raiseSaveStateEvent_({
-      type : pskl.service.HistoryService.SNAPSHOT
+      altKey : altKey,
+      allFrames : allFrames,
+      allLayers : allLayers
     });
   };
 
+  ns.AbstractTransformTool.prototype.raiseSaveStateEvent_ = function (replayData) {
+    $.publish(Events.PISKEL_SAVE_STATE, {
+      type : pskl.service.HistoryService.REPLAY,
+      scope : this,
+      replay : replayData
+    });
+  };
+
+  ns.AbstractTransformTool.prototype.replay = function (replayData) {
+    this.applyTool_(replayData.altKey, replayData.allFrames, replayData.allLayers);
+  };
+
 })();

src/js/tools/transform/Clone.js

@@ -9,7 +9,7 @@
 
   pskl.utils.inherit(ns.Clone, ns.AbstractTransformTool);
 
-  ns.Clone.prototype.apply = function (evt) {
+  ns.Clone.prototype.applyTool_ = function (altKey, allFrames, allLayers) {
     var ref = pskl.app.piskelController.getCurrentFrame();
     var layer = pskl.app.piskelController.getCurrentLayer();
     layer.getFrames().forEach(function (frame) {
@@ -18,8 +18,6 @@
       }
     });
     $.publish(Events.PISKEL_RESET);
-    $.publish(Events.PISKEL_SAVE_STATE, {
+    this.raiseSaveStateEvent_({});
-      type : pskl.service.HistoryService.SNAPSHOT
-    });
   };
 })();

test/casperjs/DrawingTest.js

@@ -17,11 +17,11 @@
     });
 
     casper.then(function () {
-      this.echo('Waiting for test result : ' + resultSelector);
+      this.echo('... Waiting for test result : ' + resultSelector);
       this.waitForSelector(resultSelector, function () {
         // then
         var result = this.getHTML(resultSelector);
-        this.echo('Test finished : ' + result);
+        this.echo('... Test finished : ' + result);
         this.test.assertEquals(result, 'OK');
       }, function () {
         // onTimeout

test/drawing/DrawingTests.browser.js

@@ -14,5 +14,11 @@
   "squares.circles.json",
   "stroke.json",
   "verticalpen.drawing.json",
-  "dithering.basic.json"
+  "dithering.basic.json",
+  "transform.clone.once.json",
+  "transform.clone.twice.undo.once.json",
+  "transform.rotate.once.alt.json",
+  "transform.rotate.twice.undo.once.json",
+  "transform.mirror.once.alt.json",
+  "transform.mirror.twice.undo.once.json"
 ]}

test/drawing/DrawingTests.casper.js

@@ -5,6 +5,7 @@
   "history.basic.json",
   "layers.fun.json",
   "layers.merge.json",
+  "lighten.darken.json",
   "move.json",
   "move-alllayers-allframes.json",
   "pen.secondary.color.json",
@@ -12,5 +13,11 @@
   "squares.circles.json",
   "stroke.json",
   "verticalpen.drawing.json",
-  "dithering.basic.json"
+  "dithering.basic.json",
+  "transform.clone.once.json",
+  "transform.clone.twice.undo.once.json",
+  "transform.rotate.once.alt.json",
+  "transform.rotate.twice.undo.once.json",
+  "transform.mirror.once.alt.json",
+  "transform.mirror.twice.undo.once.json"
 ];

test/drawing/tests/transform.clone.once.json

@@ -0,0 +1,86 @@
+{
+    "events": [{
+        "type": "instrumented-event",
+        "methodName": "duplicateFrameAt",
+        "args": [0]
+    }, {
+        "type": "instrumented-event",
+        "methodName": "createLayer",
+        "args": []
+    }, {
+        "event": {
+            "type": "mousedown",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 1,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mouseup",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 1,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "type": "instrumented-event",
+        "methodName": "setCurrentLayerIndex",
+        "args": [0]
+    }, {
+        "event": {
+            "type": "mousedown",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 1
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mouseup",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 1
+        },
+        "type": "mouse-event"
+    }, {
+        "type": "transformtool-event",
+        "toolId": "tool-clone",
+        "event": {
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        }
+    }],
+    "initialState": {
+        "size": {
+            "width": 2,
+            "height": 2
+        },
+        "primaryColor": "#000000",
+        "secondaryColor": "rgba(0, 0, 0, 0)",
+        "selectedTool": "tool-pen",
+        "step" : 100
+    },
+    "png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAAFklEQVQIW2NkQAX/GRkYGP4zMDDAaQAkOwMC7/zdVgAAAABJRU5ErkJggg=="
+}

test/drawing/tests/transform.clone.twice.undo.once.json

@@ -0,0 +1,187 @@
+{
+    "events": [{
+        "type": "instrumented-event",
+        "methodName": "duplicateFrameAt",
+        "args": [0]
+    }, {
+        "type": "instrumented-event",
+        "methodName": "createLayer",
+        "args": []
+    }, {
+        "type": "instrumented-event",
+        "methodName": "createLayer",
+        "args": []
+    }, {
+        "event": {
+            "type": "mousedown",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 1,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mouseup",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 1,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "type": "instrumented-event",
+        "methodName": "setCurrentLayerIndex",
+        "args": [1]
+    }, {
+        "event": {
+            "type": "mousedown",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mouseup",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "type": "instrumented-event",
+        "methodName": "setCurrentLayerIndex",
+        "args": [0]
+    }, {
+        "event": {
+            "type": "mousedown",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 1
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mouseup",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 1
+        },
+        "type": "mouse-event"
+    }, {
+        "type": "transformtool-event",
+        "toolId": "tool-clone",
+        "event": {
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        }
+    }, {
+        "type": "instrumented-event",
+        "methodName": "setCurrentLayerIndex",
+        "args": [1]
+    }, {
+        "type": "transformtool-event",
+        "toolId": "tool-clone",
+        "event": {
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        }
+    }, {
+        "type": "keyboard-event",
+        "event": {
+            "which": 90,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": true,
+            "target": {
+                "nodeName": "BODY"
+            }
+        }
+    }, {
+        "type": "keyboard-event",
+        "event": {
+            "which": 38,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false,
+            "target": {
+                "nodeName": "BODY"
+            }
+        }
+    }, {
+        "type": "tool-event",
+        "toolId": "tool-stroke"
+    }, {
+        "type": "color-event",
+        "color": "#ff0000",
+        "isPrimary": true
+    }, {
+        "event": {
+            "type": "mousedown",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mouseup",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }],
+    "initialState": {
+        "size": {
+            "width": 2,
+            "height": 2
+        },
+        "primaryColor": "#000000",
+        "secondaryColor": "rgba(0, 0, 0, 0)",
+        "selectedTool": "tool-pen",
+        "step" : 100
+    },
+    "png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAAHElEQVQIW2P8z8Dwn5GBgZGBgeE/AwOCARNgBABnLwUCTlSTegAAAABJRU5ErkJggg=="
+}

test/drawing/tests/transform.mirror.once.alt.json

@@ -0,0 +1 @@
+{"events":[{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"type":"transformtool-event","toolId":"tool-flip","event":{"shiftKey":false,"altKey":true,"ctrlKey":false}}],"initialState":{"size":{"width":2,"height":2},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen"},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIW2NkgAJGBgaG/wwMDIwABSkBAyQtNbwAAAAASUVORK5CYII="}

test/drawing/tests/transform.mirror.twice.undo.once.json

@@ -0,0 +1,100 @@
+{
+    "events": [{
+        "event": {
+            "type": "mousedown",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mouseup",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "type": "transformtool-event",
+        "toolId": "tool-flip",
+        "event": {
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        }
+    }, {
+        "type": "transformtool-event",
+        "toolId": "tool-flip",
+        "event": {
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        }
+    }, {
+        "type": "keyboard-event",
+        "event": {
+            "which": 90,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": true,
+            "target": {
+                "nodeName": "BODY"
+            }
+        }
+    }, {
+        "type": "tool-event",
+        "toolId": "tool-stroke"
+    }, {
+        "type": "color-event",
+        "color": "#ff0000",
+        "isPrimary": true
+    }, {
+        "event": {
+            "type": "mousedown",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mouseup",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }],
+    "initialState": {
+        "size": {
+            "width": 2,
+            "height": 2
+        },
+        "primaryColor": "#000000",
+        "secondaryColor": "rgba(0, 0, 0, 0)",
+        "selectedTool": "tool-pen",
+        "step" : 100
+    },
+    "png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIW2P8z8Dwn5GBgQGEwQAAHxsCAoill14AAAAASUVORK5CYII="
+}

test/drawing/tests/transform.rotate.once.alt.json

@@ -0,0 +1 @@
+{"events":[{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"type":"transformtool-event","toolId":"tool-rotate","event":{"shiftKey":false,"altKey":true,"ctrlKey":false}}],"initialState":{"size":{"width":2,"height":2},"primaryColor":"#ff0000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-stroke"},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFUlEQVQIW2NkYGBg+M/A8J8RxAABABcWAgFMzp95AAAAAElFTkSuQmCC"}

test/drawing/tests/transform.rotate.twice.undo.once.json

@@ -0,0 +1,100 @@
+{
+    "events": [{
+        "event": {
+            "type": "mousedown",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mouseup",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "type": "transformtool-event",
+        "toolId": "tool-rotate",
+        "event": {
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        }
+    }, {
+        "type": "transformtool-event",
+        "toolId": "tool-rotate",
+        "event": {
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        }
+    }, {
+        "type": "keyboard-event",
+        "event": {
+            "which": 90,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": true,
+            "target": {
+                "nodeName": "BODY"
+            }
+        }
+    }, {
+        "type": "tool-event",
+        "toolId": "tool-stroke"
+    }, {
+        "type": "color-event",
+        "color": "#ff0000",
+        "isPrimary": true
+    }, {
+        "event": {
+            "type": "mousedown",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 1,
+            "y": 1
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mouseup",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 1,
+            "y": 1
+        },
+        "type": "mouse-event"
+    }],
+    "initialState": {
+        "size": {
+            "width": 2,
+            "height": 2
+        },
+        "primaryColor": "#000000",
+        "secondaryColor": "rgba(0, 0, 0, 0)",
+        "selectedTool": "tool-pen",
+        "step" : 100
+    },
+    "png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAE0lEQVQIW2NkgAJGBgaG//+BHAAJJAIBS+4zcQAAAABJRU5ErkJggg=="
+}