From 754bc9b83084fcbb0e03382f1c7a3ffd1e67bb62 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Mon, 24 Aug 2015 23:56:09 +0200 Subject: [PATCH] Issue #215 : Dev environment : support keyboard/undo/redo events in drawing tests --- src/js/Events.js | 4 ++-- src/js/devtools/DrawingTestPlayer.js | 15 ++++++++++++++ src/js/devtools/DrawingTestRecorder.js | 18 +++++++++++++++++ src/js/devtools/TestRecordController.js | 2 +- src/js/service/keyboard/ShortcutService.js | 3 ++- src/js/tools/drawing/selection/BaseSelect.js | 3 +-- .../drawing/selection/RectangleSelect.js | 20 ++++++++++++++++--- test/drawing/DrawingTests.browser.js | 1 + test/drawing/DrawingTests.casper.js | 1 + test/drawing/tests/selection.rectangular.json | 1 + 10 files changed, 59 insertions(+), 9 deletions(-) create mode 100644 test/drawing/tests/selection.rectangular.json diff --git a/src/js/Events.js b/src/js/Events.js index f3e39d82..8b71a254 100644 --- a/src/js/Events.js +++ b/src/js/Events.js @@ -59,9 +59,9 @@ var Events = { CURRENT_COLORS_UPDATED : 'CURRENT_COLORS_UPDATED', - MOUSE_EVENT : 'MOUSE_EVENT', - // Tests + MOUSE_EVENT : 'MOUSE_EVENT', + KEYBOARD_EVENT : 'KEYBOARD_EVENT', TEST_RECORD_END : 'TEST_RECORD_END', TEST_CASE_END : 'TEST_CASE_END', TEST_SUITE_END : 'TEST_SUITE_END' diff --git a/src/js/devtools/DrawingTestPlayer.js b/src/js/devtools/DrawingTestPlayer.js index 208649e9..232cbc1e 100644 --- a/src/js/devtools/DrawingTestPlayer.js +++ b/src/js/devtools/DrawingTestPlayer.js @@ -59,6 +59,9 @@ }; }; + /** + * Catch all mouse events to avoid perturbations during the test + */ ns.DrawingTestPlayer.prototype.createMouseShim_ = function () { this.shim = document.createElement('DIV'); this.shim.style.cssText = 'position:fixed;top:0;left:0;right:0;left:0;bottom:0;z-index:15000'; @@ -80,6 +83,8 @@ if (recordEvent.type === 'mouse-event') { this.playMouseEvent_(recordEvent); + } else if (recordEvent.type === 'keyboard-event') { + this.playKeyboardEvent_(recordEvent); } else if (recordEvent.type === 'color-event') { this.playColorEvent_(recordEvent); } else if (recordEvent.type === 'tool-event') { @@ -114,6 +119,16 @@ } }; + ns.DrawingTestPlayer.prototype.playKeyboardEvent_ = function (recordEvent) { + var event = recordEvent.event; + if (pskl.utils.UserAgent.isMac && event.ctrlKey) { + event.metaKey = true; + } + + event.preventDefault = function () {}; + pskl.app.shortcutService.onKeyUp_(event); + }; + ns.DrawingTestPlayer.prototype.playColorEvent_ = function (recordEvent) { if (recordEvent.isPrimary) { $.publish(Events.SELECT_PRIMARY_COLOR, [recordEvent.color]); diff --git a/src/js/devtools/DrawingTestRecorder.js b/src/js/devtools/DrawingTestRecorder.js index b15bba54..0b40e241 100644 --- a/src/js/devtools/DrawingTestRecorder.js +++ b/src/js/devtools/DrawingTestRecorder.js @@ -9,6 +9,7 @@ ns.DrawingTestRecorder.prototype.init = function () { $.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.PRIMARY_COLOR_SELECTED, this.onColorEvent_.bind(this, true)); $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onColorEvent_.bind(this, false)); @@ -73,6 +74,23 @@ } }; + ns.DrawingTestRecorder.prototype.onKeyboardEvent_ = function (evt, keyboardEvent) { + if (this.isRecording) { + var recordEvent = {}; + recordEvent.type = 'keyboard-event'; + recordEvent.event = { + which : keyboardEvent.which, + shiftKey : keyboardEvent.shiftKey, + altKey : keyboardEvent.altKey, + ctrlKey : keyboardEvent.ctrlKey, + target : { + nodeName : keyboardEvent.target.nodeName + } + }; + this.events.push(recordEvent); + } + }; + ns.DrawingTestRecorder.prototype.onColorEvent_ = function (isPrimary, evt, color) { if (this.isRecording) { var recordEvent = {}; diff --git a/src/js/devtools/TestRecordController.js b/src/js/devtools/TestRecordController.js index 4c3b6f31..c5748096 100644 --- a/src/js/devtools/TestRecordController.js +++ b/src/js/devtools/TestRecordController.js @@ -70,7 +70,7 @@ }; ns.TestRecordController.prototype.onTestRecordEnd_ = function (evt, success) { - window.alert('Test finished : ', success); + window.alert('Test finished : ' + (success ? 'success' : 'failed')); }; })(); diff --git a/src/js/service/keyboard/ShortcutService.js b/src/js/service/keyboard/ShortcutService.js index 43e3eb58..9ffdfa90 100644 --- a/src/js/service/keyboard/ShortcutService.js +++ b/src/js/service/keyboard/ShortcutService.js @@ -77,6 +77,7 @@ return 'normal'; } }; + /** * @private */ @@ -84,7 +85,6 @@ if (!this.isInInput_(evt)) { // jquery names FTW ... var keycode = evt.which; - var targetTagName = evt.target.nodeName.toUpperCase(); var charkey = pskl.service.keyboard.KeycodeTranslator.toChar(keycode); var keyShortcuts = this.shortcuts_[charkey]; @@ -101,6 +101,7 @@ if (bubble !== true) { evt.preventDefault(); } + $.publish(Events.KEYBOARD_EVENT, [evt]); } } } diff --git a/src/js/tools/drawing/selection/BaseSelect.js b/src/js/tools/drawing/selection/BaseSelect.js index 2c1aaf99..4b1620cd 100644 --- a/src/js/tools/drawing/selection/BaseSelect.js +++ b/src/js/tools/drawing/selection/BaseSelect.js @@ -133,8 +133,7 @@ // The list of callbacks that define the drag'n drop behavior of the selection. /** @private */ - ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, color, frame, overlay) { - }; + ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, color, frame, overlay) {}; /** @private */ ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, color, frame, overlay) { diff --git a/src/js/tools/drawing/selection/RectangleSelect.js b/src/js/tools/drawing/selection/RectangleSelect.js index 9d61d51a..e11fde65 100644 --- a/src/js/tools/drawing/selection/RectangleSelect.js +++ b/src/js/tools/drawing/selection/RectangleSelect.js @@ -13,6 +13,8 @@ ns.BaseSelect.call(this); this.hasSelection = false; + + this.selectionOrigin_ = null; }; pskl.utils.inherit(ns.RectangleSelect, ns.BaseSelect); @@ -21,18 +23,26 @@ * @override */ ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) { + this.selectionOrigin_ = { + col : col, + row : row + }; if (this.hasSelection) { this.hasSelection = false; overlay.clear(); $.publish(Events.SELECTION_DISMISSED); } else { - this.hasSelection = true; - $.publish(Events.DRAG_START, [col, row]); - // Drawing the first point of the rectangle in the fake overlay canvas: + this.startSelection_(); overlay.setPixel(col, row, color); } }; + ns.RectangleSelect.prototype.startSelection_ = function (col, row, color) { + this.hasSelection = true; + $.publish(Events.DRAG_START, [col, row]); + // Drawing the first point of the rectangle in the fake overlay canvas: + }; + /** * When creating the rectangle selection, we clear the current overlayFrame and * redraw the current rectangle based on the orgin coordinate and @@ -40,6 +50,10 @@ * @override */ ns.RectangleSelect.prototype.onSelect_ = function (col, row, color, frame, overlay) { + if (!this.hasSelection && (this.selectionOrigin_.col !== col || this.selectionOrigin_.row !== row)) { + this.startSelection_(); + } + if (this.hasSelection) { overlay.clear(); this.selection = new pskl.selection.RectangularSelection( diff --git a/test/drawing/DrawingTests.browser.js b/test/drawing/DrawingTests.browser.js index 7db7ef2b..fcb306c0 100644 --- a/test/drawing/DrawingTests.browser.js +++ b/test/drawing/DrawingTests.browser.js @@ -8,6 +8,7 @@ "lighten.darken.json", "move.json", "pen.secondary.color.json", + "selection.rectangular.json", "squares.circles.json", "stroke.json", "verticalpen.drawing.json" diff --git a/test/drawing/DrawingTests.casper.js b/test/drawing/DrawingTests.casper.js index 6dd57335..8e9108c6 100644 --- a/test/drawing/DrawingTests.casper.js +++ b/test/drawing/DrawingTests.casper.js @@ -6,6 +6,7 @@ "layers.merge.json", "move.json", "pen.secondary.color.json", + "selection.rectangular.json", "squares.circles.json", "stroke.json", "verticalpen.drawing.json" diff --git a/test/drawing/tests/selection.rectangular.json b/test/drawing/tests/selection.rectangular.json new file mode 100644 index 00000000..77c9e539 --- /dev/null +++ b/test/drawing/tests/selection.rectangular.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":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":0},"type":"mouse-event"},{"type":"tool-event","toolId":"tool-rectangle-select"},{"type":"keyboard-event","event":{"which":83,"shiftKey":false,"altKey":false,"ctrlKey":false,"target":{"nodeName":"BODY"}}},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":1},"type":"mouse-event"},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":1},"type":"mouse-event"},{"type":"keyboard-event","event":{"which":67,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"type":"keyboard-event","event":{"which":86,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"event":{"type":"keyup","shiftKey":false,"altKey":false,"ctrlKey":true},"coords":{"x":null,"y":null},"type":"mouse-event"},{"event":{"type":"keyup","shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":null,"y":null},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","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":true},"coords":{"x":0,"y":1},"type":"mouse-event"},{"type":"keyboard-event","event":{"which":86,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"type":"keyboard-event","event":{"which":67,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":1},"type":"mouse-event"},{"type":"keyboard-event","event":{"which":86,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}}],"initialState":{"size":{"width":4,"height":4},"primaryColor":"rgb(125, 205, 238)","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen"},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAF0lEQVQIW2OsPfvuPwMSYCQsgKwcxAYA0kUJqtGbV5YAAAAASUVORK5CYII="} \ No newline at end of file