mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jdescottes 2015-10-02 01:27:59 +02:00
parent 48d1214a6d
commit a8f727fdcd
17 changed files with 2794 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/js/Events.js
View File

@ -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'

11
src/js/controller/TransformationsController.js
View File

@ -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) {
var toolId = evt.target.dataset.toolId;
ns.TransformationsController.prototype.applyTool = function (toolId, evt) {
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');

6
src/js/devtools/DrawingTestPlayer.js
View File

@ -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);
};

27
src/js/devtools/DrawingTestRecorder.js
View File

@ -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,
shiftKey : keyboardEvent.shiftKey,
altKey : keyboardEvent.altKey,
ctrlKey : keyboardEvent.ctrlKey,
which : domEvent.which,
shiftKey : domEvent.shiftKey,
altKey : domEvent.altKey,
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 = {};

19
src/js/tools/transform/AbstractTransformTool.js
View File

@ -20,10 +20,25 @@
this.applyToolOnFrame_(frame, altKey);
}.bind(this));
}.bind(this));
$.publish(Events.PISKEL_RESET);
$.publish(Events.PISKEL_SAVE_STATE, {
type : pskl.service.HistoryService.SNAPSHOT
this.raiseSaveStateEvent_({
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);
};
})();

6
src/js/tools/transform/Clone.js
View File

@ -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, {
type : pskl.service.HistoryService.SNAPSHOT
});
this.raiseSaveStateEvent_({});
};
})();

4
test/casperjs/DrawingTest.js
View File

@ -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

8
test/drawing/DrawingTests.browser.js
View File

@ -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"
]}

9
test/drawing/DrawingTests.casper.js
View File

@ -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"
];

655
test/drawing/tests/bucket.drawing.json
View File

File diff suppressed because one or more lines are too long

1594
test/drawing/tests/lighten.darken.json
View File

File diff suppressed because one or more lines are too long

86
test/drawing/tests/transform.clone.once.json Normal file
View File

@ -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=="
}

187
test/drawing/tests/transform.clone.twice.undo.once.json Normal file
View File

@ -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=="
}

1
test/drawing/tests/transform.mirror.once.alt.json Normal file
View File

@ -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="}

100
test/drawing/tests/transform.mirror.twice.undo.once.json Normal file
View File

@ -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="
}

1
test/drawing/tests/transform.rotate.once.alt.json Normal file
View File

@ -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"}

100
test/drawing/tests/transform.rotate.twice.undo.once.json Normal file
View File

@ -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=="
}