From 222c65a8a545ae5ab823f3f0f9bb1d362c313a6c Mon Sep 17 00:00:00 2001 From: jdescottes Date: Tue, 17 Nov 2015 00:19:25 +0100 Subject: [PATCH 01/10] Issue #258 : Initial implementation : missing tests + cleanup --- src/css/pensize.css | 53 +++++++++++++++++++++++ src/js/Events.js | 2 + src/js/app.js | 6 +++ src/js/controller/PenSizeController.js | 35 +++++++++++++++ src/js/service/pensize/PenSizeService.js | 46 ++++++++++++++++++++ src/js/tools/drawing/BaseTool.js | 20 ++++++--- src/js/tools/drawing/Circle.js | 10 ++++- src/js/tools/drawing/DitheringTool.js | 8 ++++ src/js/tools/drawing/Lighten.js | 10 ++++- src/js/tools/drawing/Rectangle.js | 10 ++++- src/js/tools/drawing/ShapeTool.js | 9 +++- src/js/tools/drawing/SimplePen.js | 22 +++++++--- src/js/tools/drawing/Stroke.js | 32 ++++++++++++-- src/js/tools/drawing/VerticalMirrorPen.js | 23 +++------- src/js/utils/UserSettings.js | 3 +- src/piskel-script-list.js | 2 + src/piskel-style-list.js | 1 + src/templates/drawing-tools.html | 6 +++ 18 files changed, 257 insertions(+), 41 deletions(-) create mode 100644 src/css/pensize.css create mode 100644 src/js/controller/PenSizeController.js create mode 100644 src/js/service/pensize/PenSizeService.js diff --git a/src/css/pensize.css b/src/css/pensize.css new file mode 100644 index 00000000..568d6dff --- /dev/null +++ b/src/css/pensize.css @@ -0,0 +1,53 @@ +.pen-size-container { + overflow: hidden; + padding: 5px 5px; +} + +.pen-size-option { + float: left; + box-sizing: border-box; + width: 20px; + height: 20px; + margin-right: 2px; + border-style: solid; + border-width: 2px; + border-color: #444; + cursor: pointer; +} + +.pen-size-option[data-size='1'] { + padding: 6px; +} +.pen-size-option[data-size='2'] { + padding: 5px; +} +.pen-size-option[data-size='3'] { + padding: 4px; +} +.pen-size-option[data-size='4'] { + padding: 3px; +} + +.pen-size-option:before { + content: ''; + width: 100%; + height: 100%; + background-color: #444; + display: block; +} + +.pen-size-option:hover:before { + background-color: #888; +} + +.pen-size-option:hover { + border-color: #888; +} + +.pen-size-option.selected:before { + background-color: gold; +} + +.pen-size-option.selected { + border-color: gold; +} \ No newline at end of file diff --git a/src/js/Events.js b/src/js/Events.js index 49cad986..c00f29c8 100644 --- a/src/js/Events.js +++ b/src/js/Events.js @@ -43,6 +43,8 @@ var Events = { HISTORY_STATE_SAVED: 'HISTORY_STATE_SAVED', HISTORY_STATE_LOADED: 'HISTORY_STATE_LOADED', + PEN_SIZE_CHANGED : 'PEN_SIZE_CHANGED', + /** * Fired when a Piskel is successfully saved */ diff --git a/src/js/app.js b/src/js/app.js index bd43b32c..6c7985a8 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -139,6 +139,12 @@ this.headerController = new pskl.controller.HeaderController(this.piskelController, this.savedStatusService); this.headerController.init(); + this.penSizeService = new pskl.service.pensize.PenSizeService(); + this.penSizeService.init(); + + this.penSizeController = new pskl.controller.PenSizeController(); + this.penSizeController.init(); + this.fileDropperService = new pskl.service.FileDropperService( this.piskelController, document.querySelector('#drawing-canvas-container')); diff --git a/src/js/controller/PenSizeController.js b/src/js/controller/PenSizeController.js new file mode 100644 index 00000000..0e8bc1fa --- /dev/null +++ b/src/js/controller/PenSizeController.js @@ -0,0 +1,35 @@ +(function () { + var ns = $.namespace('pskl.controller'); + + ns.PenSizeController = function () {}; + + ns.PenSizeController.prototype.init = function () { + this.container = document.querySelector('.pen-size-container'); + pskl.utils.Event.addEventListener(this.container, 'click', this.onPenSizeOptionClick_, this); + + $.subscribe(Events.PEN_SIZE_CHANGED, this.onPenSizeChanged_.bind(this)); + + this.updateSelectedOption_(); + }; + + ns.PenSizeController.prototype.onPenSizeOptionClick_ = function (e) { + var size = e.target.dataset.size; + if (!isNaN(size)) { + size = parseInt(size, 10); + pskl.app.penSizeService.setPenSize(size); + } + }; + + ns.PenSizeController.prototype.onPenSizeChanged_ = function (e) { + this.updateSelectedOption_(); + }; + + ns.PenSizeController.prototype.updateSelectedOption_ = function () { + pskl.utils.Dom.removeClass('selected', this.container); + var size = pskl.app.penSizeService.getPenSize(); + var selectedOption = this.container.querySelector('[data-size="' + size + '"]'); + if (selectedOption) { + selectedOption.classList.add('selected'); + } + }; +})(); diff --git a/src/js/service/pensize/PenSizeService.js b/src/js/service/pensize/PenSizeService.js new file mode 100644 index 00000000..bde04220 --- /dev/null +++ b/src/js/service/pensize/PenSizeService.js @@ -0,0 +1,46 @@ +(function () { + var ns = $.namespace('pskl.service.pensize'); + + ns.PenSizeService = function () {}; + + ns.PenSizeService.prototype.init = function () { + this.size = pskl.UserSettings.get('PEN_SIZE'); + }; + + ns.PenSizeService.prototype.setPenSize = function (size) { + if (size != this.size) { + this.size = size; + pskl.UserSettings.set('PEN_SIZE', size); + $.publish(Events.PEN_SIZE_CHANGED); + } + }; + + ns.PenSizeService.prototype.getPenSize = function () { + return this.size; + }; + + ns.PenSizeService.prototype.getPixelsForPenSize = function (col, row, penSize) { + var size = penSize || this.size; + if (size == 1) { + return [[col, row]]; + } else if (size == 2) { + return [ + [col, row], [col + 1, row], + [col, row + 1], [col + 1, row + 1] + ]; + } else if (size == 3) { + return [ + [col - 1, row - 1], [col, row - 1], [col + 1, row - 1], + [col - 1, row + 0], [col, row + 0], [col + 1, row + 0], + [col - 1, row + 1], [col, row + 1], [col + 1, row + 1], + ]; + } else if (size == 4) { + return [ + [col - 1, row - 1], [col, row - 1], [col + 1, row - 1], [col + 2, row - 1], + [col - 1, row + 0], [col, row + 0], [col + 1, row + 0], [col + 2, row + 0], + [col - 1, row + 1], [col, row + 1], [col + 1, row + 1], [col + 2, row + 1], + [col - 1, row + 2], [col, row + 2], [col + 1, row + 2], [col + 2, row + 2], + ]; + } + }; +})(); diff --git a/src/js/tools/drawing/BaseTool.js b/src/js/tools/drawing/BaseTool.js index 2c335457..f306496c 100644 --- a/src/js/tools/drawing/BaseTool.js +++ b/src/js/tools/drawing/BaseTool.js @@ -19,6 +19,10 @@ ns.BaseTool.prototype.replay = Constants.ABSTRACT_FUNCTION; + ns.BaseTool.prototype.supportsDynamicPenSize = function() { + return false; + }; + ns.BaseTool.prototype.getToolColor = function() { if (pskl.app.mouseStateService.isRightButtonPressed()) { return pskl.app.selectedColorsService.getSecondaryColor(); @@ -45,7 +49,15 @@ } var frameColor = frame.getPixel(col, row); - overlay.setPixel(col, row, this.getHighlightColor_(frameColor)); + + if (this.supportsDynamicPenSize()) { + var pixels = pskl.app.penSizeService.getPixelsForPenSize(col, row); + pixels.forEach(function (p) { + overlay.setPixel(p[0], p[1], this.getHighlightColor_(frameColor)); + }.bind(this)); + } else { + overlay.setPixel(col, row, this.getHighlightColor_(frameColor)); + } this.highlightedPixelCol = col; this.highlightedPixelRow = row; @@ -66,11 +78,7 @@ ns.BaseTool.prototype.hideHighlightedPixel = function (overlay) { if (this.highlightedPixelRow !== null && this.highlightedPixelCol !== null) { - try { - overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR); - } catch (e) { - window.console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed'); - } + overlay.clear(); this.highlightedPixelRow = null; this.highlightedPixelCol = null; } diff --git a/src/js/tools/drawing/Circle.js b/src/js/tools/drawing/Circle.js index 92bf9a36..bf0ec702 100644 --- a/src/js/tools/drawing/Circle.js +++ b/src/js/tools/drawing/Circle.js @@ -19,11 +19,17 @@ /** * @override */ - ns.Circle.prototype.draw = function (col, row, color, targetFrame) { + ns.Circle.prototype.draw = function (col, row, color, targetFrame, penSize) { var circlePoints = this.getCirclePixels_(this.startCol, this.startRow, col, row); + + var applyDraw = function (p) { + targetFrame.setPixel(p[0], p[1], color); + }.bind(this); + for (var i = 0 ; i < circlePoints.length ; i++) { // Change model: - targetFrame.setPixel(circlePoints[i].col, circlePoints[i].row, color); + var pixels = pskl.app.penSizeService.getPixelsForPenSize(circlePoints[i].col, circlePoints[i].row, penSize); + pixels.forEach(applyDraw); } }; diff --git a/src/js/tools/drawing/DitheringTool.js b/src/js/tools/drawing/DitheringTool.js index a7ce716e..77ee4044 100644 --- a/src/js/tools/drawing/DitheringTool.js +++ b/src/js/tools/drawing/DitheringTool.js @@ -12,12 +12,20 @@ this.helpText = 'Dithering tool'; this.shortcut = pskl.service.keyboard.Shortcuts.TOOL.DITHERING; }; + pskl.utils.inherit(ns.DitheringTool, ns.SimplePen); + ns.DitheringTool.prototype.supportsDynamicPenSize = function() { + return false; + }; + /** * @override */ ns.DitheringTool.prototype.applyToolAt = function(col, row, frame, overlay, event) { + this.previousCol = col; + this.previousRow = row; + var usePrimaryColor = (col + row) % 2; usePrimaryColor = pskl.app.mouseStateService.isRightButtonPressed() ? !usePrimaryColor : usePrimaryColor; diff --git a/src/js/tools/drawing/Lighten.js b/src/js/tools/drawing/Lighten.js index f0cfb98e..24040bcb 100644 --- a/src/js/tools/drawing/Lighten.js +++ b/src/js/tools/drawing/Lighten.js @@ -43,8 +43,14 @@ * @Override */ ns.Lighten.prototype.applyToolAt = function(col, row, frame, overlay, event) { - var modifiedColor = this.getModifiedColor_(col, row, frame, overlay, event); - this.draw(modifiedColor, col, row, frame, overlay); + this.previousCol = col; + this.previousRow = row; + + var pixels = pskl.app.penSizeService.getPixelsForPenSize(col, row); + pixels.forEach(function (p) { + var modifiedColor = this.getModifiedColor_(p[0], p[1], frame, overlay, event); + this.draw(modifiedColor, p[0], p[1], frame, overlay); + }.bind(this)); }; ns.Lighten.prototype.getModifiedColor_ = function(col, row, frame, overlay, event) { diff --git a/src/js/tools/drawing/Rectangle.js b/src/js/tools/drawing/Rectangle.js index f74721db..e1b8fe28 100644 --- a/src/js/tools/drawing/Rectangle.js +++ b/src/js/tools/drawing/Rectangle.js @@ -19,11 +19,17 @@ /** * @override */ - ns.Rectangle.prototype.draw = function (col, row, color, targetFrame) { + ns.Rectangle.prototype.draw = function (col, row, color, targetFrame, penSize) { var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row); + + var applyDraw = function (p) { + targetFrame.setPixel(p[0], p[1], color); + }.bind(this); + for (var i = 0 ; i < strokePoints.length ; i++) { // Change model: - targetFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color); + var pixels = pskl.app.penSizeService.getPixelsForPenSize(strokePoints[i].col, strokePoints[i].row, penSize); + pixels.forEach(applyDraw); } }; })(); diff --git a/src/js/tools/drawing/ShapeTool.js b/src/js/tools/drawing/ShapeTool.js index fb460aac..be33f95a 100644 --- a/src/js/tools/drawing/ShapeTool.js +++ b/src/js/tools/drawing/ShapeTool.js @@ -16,6 +16,10 @@ pskl.utils.inherit(ns.ShapeTool, ns.BaseTool); + ns.ShapeTool.prototype.supportsDynamicPenSize = function() { + return true; + }; + /** * @override */ @@ -57,7 +61,8 @@ row : coords.row, startCol : this.startCol, startRow : this.startRow, - color : color + color : color, + penSize : pskl.app.penSizeService.getPenSize() }); }; @@ -67,7 +72,7 @@ ns.ShapeTool.prototype.replay = function(frame, replayData) { this.startCol = replayData.startCol; this.startRow = replayData.startRow; - this.draw(replayData.col, replayData.row, replayData.color, frame); + this.draw(replayData.col, replayData.row, replayData.color, frame, replayData.penSize); }; /** diff --git a/src/js/tools/drawing/SimplePen.js b/src/js/tools/drawing/SimplePen.js index 19741732..12b450c0 100644 --- a/src/js/tools/drawing/SimplePen.js +++ b/src/js/tools/drawing/SimplePen.js @@ -19,18 +19,30 @@ pskl.utils.inherit(ns.SimplePen, ns.BaseTool); + ns.SimplePen.prototype.supportsDynamicPenSize = function() { + return true; + }; + /** * @override */ ns.SimplePen.prototype.applyToolAt = function(col, row, frame, overlay, event) { - var color = this.getToolColor(); - this.draw(color, col, row, frame, overlay); - }; - - ns.SimplePen.prototype.draw = function(color, col, row, frame, overlay) { this.previousCol = col; this.previousRow = row; + var color = this.getToolColor(); + + this.drawUsingPenSize(color, col, row, frame, overlay); + }; + + ns.SimplePen.prototype.drawUsingPenSize = function(color, col, row, frame, overlay) { + var pixels = pskl.app.penSizeService.getPixelsForPenSize(col, row); + pixels.forEach(function (p) { + this.draw(color, p[0], p[1], frame, overlay); + }.bind(this)); + }; + + ns.SimplePen.prototype.draw = function(color, col, row, frame, overlay) { overlay.setPixel(col, row, color); if (color === Constants.TRANSPARENT_COLOR) { frame.setPixel(col, row, color); diff --git a/src/js/tools/drawing/Stroke.js b/src/js/tools/drawing/Stroke.js index 70d34301..3b442b1c 100644 --- a/src/js/tools/drawing/Stroke.js +++ b/src/js/tools/drawing/Stroke.js @@ -21,6 +21,10 @@ pskl.utils.inherit(ns.Stroke, ns.BaseTool); + ns.Stroke.prototype.supportsDynamicPenSize = function() { + return true; + }; + /** * @override */ @@ -55,6 +59,11 @@ // Drawing current stroke: var color = this.getToolColor(); + + var setPixel = function (p) { + overlay.setPixel(p[0], p[1], color); + }.bind(this); + for (var i = 0; i < strokePoints.length; i++) { if (color == Constants.TRANSPARENT_COLOR) { @@ -66,7 +75,9 @@ // eg deleting the equivalent of a stroke. color = Constants.SELECTION_TRANSPARENT_COLOR; } - overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color); + + var pixels = pskl.app.penSizeService.getPixelsForPenSize(strokePoints[i].col, strokePoints[i].row); + pixels.forEach(setPixel); } }; @@ -82,25 +93,38 @@ row = coords.row; } + var setPixel = function (p) { + frame.setPixel(p[0], p[1], color); + }.bind(this); + // The user released the tool to draw a line. We will compute the pixel coordinate, impact // the model and draw them in the drawing canvas (not the fake overlay anymore) var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row); for (var i = 0; i < strokePoints.length; i++) { // Change model: - frame.setPixel(strokePoints[i].col, strokePoints[i].row, color); + + var pixels = pskl.app.penSizeService.getPixelsForPenSize(strokePoints[i].col, strokePoints[i].row); + pixels.forEach(setPixel); } // For now, we are done with the stroke tool and don't need an overlay anymore: overlay.clear(); this.raiseSaveStateEvent({ pixels : strokePoints, - color : color + color : color, + penSize : pskl.app.penSizeService.getPenSize() }); }; ns.Stroke.prototype.replay = function(frame, replayData) { + var color = replayData.color; + var setPixel = function (p) { + frame.setPixel(p[0], p[1], color); + }.bind(this); + replayData.pixels.forEach(function (pixel) { - frame.setPixel(pixel.col, pixel.row, replayData.color); + var pixels = pskl.app.penSizeService.getPixelsForPenSize(pixel.col, pixel.row); + pixels.forEach(setPixel); }); }; diff --git a/src/js/tools/drawing/VerticalMirrorPen.js b/src/js/tools/drawing/VerticalMirrorPen.js index d51ce73b..cdc50cc3 100644 --- a/src/js/tools/drawing/VerticalMirrorPen.js +++ b/src/js/tools/drawing/VerticalMirrorPen.js @@ -16,42 +16,31 @@ pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen); - ns.VerticalMirrorPen.prototype.backupPreviousPositions_ = function () { - this.backupPreviousCol = this.previousCol; - this.backupPreviousRow = this.previousRow; - }; - - ns.VerticalMirrorPen.prototype.restorePreviousPositions_ = function () { - this.previousCol = this.backupPreviousCol; - this.previousRow = this.backupPreviousRow; - }; - /** * @override */ ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, frame, overlay, event) { var color = this.getToolColor(); - this.draw(color, col, row, frame, overlay); - - this.backupPreviousPositions_(); + this.drawUsingPenSize(color, col, row, frame, overlay); var mirroredCol = this.getSymmetricCol_(col, frame); var mirroredRow = this.getSymmetricRow_(row, frame); var hasCtrlKey = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey; if (!hasCtrlKey) { - this.draw(color, mirroredCol, row, frame, overlay); + this.drawUsingPenSize(color, mirroredCol, row, frame, overlay); } if (event.shiftKey || hasCtrlKey) { - this.draw(color, col, mirroredRow, frame, overlay); + this.drawUsingPenSize(color, col, mirroredRow, frame, overlay); } if (event.shiftKey) { - this.draw(color, mirroredCol, mirroredRow, frame, overlay); + this.drawUsingPenSize(color, mirroredCol, mirroredRow, frame, overlay); } - this.restorePreviousPositions_(); + this.previousCol = col; + this.previousRow = row; }; ns.VerticalMirrorPen.prototype.getSymmetricCol_ = function(col, frame) { diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index eb9cbb5f..59d282ab 100644 --- a/src/js/utils/UserSettings.js +++ b/src/js/utils/UserSettings.js @@ -13,8 +13,8 @@ LAYER_PREVIEW : 'LAYER_PREVIEW', LAYER_OPACITY : 'LAYER_OPACITY', EXPORT_SCALING: 'EXPORT_SCALING', + PEN_SIZE : 'PEN_SIZE', RESIZE_SETTINGS: 'RESIZE_SETTINGS', - KEY_TO_DEFAULT_VALUE_MAP_ : { 'GRID_WIDTH' : 0, 'MAX_FPS' : 24, @@ -30,6 +30,7 @@ 'LAYER_OPACITY' : 0.2, 'LAYER_PREVIEW' : true, 'EXPORT_SCALING' : 1, + 'PEN_SIZE' : 1, 'RESIZE_SETTINGS': { maintainRatio : true, resizeContent : false, diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index c88b3c66..3c654888 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -103,6 +103,7 @@ "js/controller/ToolController.js", "js/controller/PaletteController.js", "js/controller/PalettesListController.js", + "js/controller/PenSizeController.js", "js/controller/ProgressBarController.js", "js/controller/NotificationController.js", "js/controller/TransformationsController.js", @@ -157,6 +158,7 @@ "js/service/palette/reader/PalettePalReader.js", "js/service/palette/reader/PaletteTxtReader.js", "js/service/palette/PaletteImportService.js", + "js/service/pensize/PenSizeService.js", "js/service/SavedStatusService.js", "js/service/keyboard/KeycodeTranslator.js", "js/service/keyboard/KeyUtils.js", diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js index 5fcddc6c..9199543e 100644 --- a/src/piskel-style-list.js +++ b/src/piskel-style-list.js @@ -14,6 +14,7 @@ "css/settings-resize.css", "css/settings-save.css", "css/tools.css", + "css/pensize.css", "css/icons.css", "css/color-picker-slider.css", "css/dialogs.css", diff --git a/src/templates/drawing-tools.html b/src/templates/drawing-tools.html index e50de90e..d0427766 100644 --- a/src/templates/drawing-tools.html +++ b/src/templates/drawing-tools.html @@ -1,6 +1,12 @@
+
+
+
+
+
+
From 3cc32049393935c7431d667abcc3da8a237fd118 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Tue, 17 Nov 2015 00:36:45 +0100 Subject: [PATCH 02/10] Issue #258 : Update style and tooltip --- src/css/pensize.css | 6 +----- src/templates/drawing-tools.html | 10 +++++----- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/css/pensize.css b/src/css/pensize.css index 568d6dff..231041a3 100644 --- a/src/css/pensize.css +++ b/src/css/pensize.css @@ -32,14 +32,10 @@ content: ''; width: 100%; height: 100%; - background-color: #444; + background-color: white; display: block; } -.pen-size-option:hover:before { - background-color: #888; -} - .pen-size-option:hover { border-color: #888; } diff --git a/src/templates/drawing-tools.html b/src/templates/drawing-tools.html index d0427766..638e6646 100644 --- a/src/templates/drawing-tools.html +++ b/src/templates/drawing-tools.html @@ -1,11 +1,11 @@
-
-
-
-
-
+
+
+
+
+
    From fce9bb5727db70382cd1d13a0aa9a3d1b6dc140d Mon Sep 17 00:00:00 2001 From: jdescottes Date: Fri, 20 Nov 2015 00:26:17 +0100 Subject: [PATCH 03/10] Issue #258 : Fix replay for Stroke tool with != pensizes --- src/js/tools/drawing/Stroke.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/tools/drawing/Stroke.js b/src/js/tools/drawing/Stroke.js index 3b442b1c..529dbd5c 100644 --- a/src/js/tools/drawing/Stroke.js +++ b/src/js/tools/drawing/Stroke.js @@ -123,7 +123,7 @@ }.bind(this); replayData.pixels.forEach(function (pixel) { - var pixels = pskl.app.penSizeService.getPixelsForPenSize(pixel.col, pixel.row); + var pixels = pskl.app.penSizeService.getPixelsForPenSize(pixel.col, pixel.row, replayData.penSize); pixels.forEach(setPixel); }); }; From 3525b318a6539efcabc50120ce9da862d73402a3 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Wed, 25 Nov 2015 22:34:15 +0100 Subject: [PATCH 04/10] Issue #258 : KB shortcuts to increase/decrease pensize --- src/js/service/keyboard/Shortcuts.js | 2 ++ src/js/service/pensize/PenSizeService.js | 25 +++++++++++++++++++++++- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/src/js/service/keyboard/Shortcuts.js b/src/js/service/keyboard/Shortcuts.js index 4c111605..70151fea 100644 --- a/src/js/service/keyboard/Shortcuts.js +++ b/src/js/service/keyboard/Shortcuts.js @@ -45,6 +45,8 @@ RESET_ZOOM : createShortcut('reset-zoom', 'Reset zoom level', '0'), INCREASE_ZOOM : createShortcut('increase-zoom', 'Increase zoom level', '+'), DECREASE_ZOOM : createShortcut('decrease-zoom', 'Decrease zoom level', '-'), + INCREASE_PENSIZE : createShortcut('increase-pensize', 'Increase pen size', ']'), + DECREASE_PENSIZE : createShortcut('decrease-pensize', 'Decrease pen size', '['), UNDO : createShortcut('undo', 'Undo', 'ctrl+Z'), REDO : createShortcut('redo', 'Redo', ['ctrl+Y', 'ctrl+shift+Z']), PREVIOUS_FRAME : createShortcut('previous-frame', 'Select previous frame', 'up'), diff --git a/src/js/service/pensize/PenSizeService.js b/src/js/service/pensize/PenSizeService.js index bde04220..1fe2669d 100644 --- a/src/js/service/pensize/PenSizeService.js +++ b/src/js/service/pensize/PenSizeService.js @@ -1,20 +1,43 @@ (function () { var ns = $.namespace('pskl.service.pensize'); + var MIN_PENSIZE = 1; + var MAX_PENSIZE = 4; + ns.PenSizeService = function () {}; ns.PenSizeService.prototype.init = function () { this.size = pskl.UserSettings.get('PEN_SIZE'); + + var shortcuts = pskl.service.keyboard.Shortcuts; + pskl.app.shortcutService.registerShortcut(shortcuts.MISC.INCREASE_PENSIZE, this.increasePenSize_.bind(this)); + pskl.app.shortcutService.registerShortcut(shortcuts.MISC.DECREASE_PENSIZE, this.decreasePenSize_.bind(this)); + }; + + ns.PenSizeService.prototype.increasePenSize_ = function () { + this.setPenSize(this.size + 1); + }; + + ns.PenSizeService.prototype.decreasePenSize_ = function () { + this.setPenSize(this.size - 1); }; ns.PenSizeService.prototype.setPenSize = function (size) { - if (size != this.size) { + if (this.isPenSizeValid_(size) && size != this.size) { this.size = size; pskl.UserSettings.set('PEN_SIZE', size); $.publish(Events.PEN_SIZE_CHANGED); } }; + ns.PenSizeService.prototype.isPenSizeValid_ = function (size) { + if (isNaN(size)) { + return false; + } + + return size >= MIN_PENSIZE && size <= MAX_PENSIZE; + }; + ns.PenSizeService.prototype.getPenSize = function () { return this.size; }; From 12ac85f0f6ad04e48fc3e4b14256ea474b4dbcd5 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Wed, 25 Nov 2015 22:50:43 +0100 Subject: [PATCH 05/10] Issue #258 : add support for left/right keys + bugfix --- src/js/controller/dialogs/CheatsheetController.js | 14 ++++++++++---- src/js/service/keyboard/KeycodeTranslator.js | 2 ++ 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/js/controller/dialogs/CheatsheetController.js b/src/js/controller/dialogs/CheatsheetController.js index 989f802a..1a079086 100644 --- a/src/js/controller/dialogs/CheatsheetController.js +++ b/src/js/controller/dialogs/CheatsheetController.js @@ -50,9 +50,10 @@ var shortcut = pskl.app.shortcutService.getShortcutById(shortcutId); if (shortcutEl.classList.contains(SHORTCUT_EDITING_CLASSNAME)) { - shortcutEl.classList.remove(SHORTCUT_EDITING_CLASSNAME); + pskl.utils.Dom.removeClass(SHORTCUT_EDITING_CLASSNAME); this.eventTrapInput.blur(); } else if (shortcut.isEditable()) { + pskl.utils.Dom.removeClass(SHORTCUT_EDITING_CLASSNAME); shortcutEl.classList.add(SHORTCUT_EDITING_CLASSNAME); this.eventTrapInput.focus(); } @@ -64,11 +65,14 @@ return; } + var shortcutKeyObject = pskl.service.keyboard.KeyUtils.createKeyFromEvent(evt); + if (!shortcutKeyObject) { + return; + } + + var shortcutKeyString = pskl.service.keyboard.KeyUtils.stringify(shortcutKeyObject); var shortcutId = shortcutEl.dataset.shortcutId; var shortcut = pskl.app.shortcutService.getShortcutById(shortcutId); - var shortcutKeyObject = pskl.service.keyboard.KeyUtils.createKeyFromEvent(evt); - var shortcutKeyString = pskl.service.keyboard.KeyUtils.stringify(shortcutKeyObject); - pskl.app.shortcutService.updateShortcut(shortcut, shortcutKeyString); shortcutEl.classList.remove(SHORTCUT_EDITING_CLASSNAME); @@ -147,7 +151,9 @@ if (pskl.utils.UserAgent.isMac) { key = key.replace('ctrl', 'cmd'); } + key = key.replace(/left/i, '￩'); key = key.replace(/up/i, '￪'); + key = key.replace(/right/i, '￫'); key = key.replace(/down/i, '￬'); key = key.replace(/>/g, '>'); key = key.replace(/ Date: Thu, 26 Nov 2015 00:04:03 +0100 Subject: [PATCH 06/10] Issue #258 : Simplify Lighten & update test --- src/js/tools/drawing/Lighten.js | 51 +- test/drawing/tests/lighten.darken.json | 1446 +++++------------------- 2 files changed, 292 insertions(+), 1205 deletions(-) diff --git a/src/js/tools/drawing/Lighten.js b/src/js/tools/drawing/Lighten.js index 24040bcb..f2820b16 100644 --- a/src/js/tools/drawing/Lighten.js +++ b/src/js/tools/drawing/Lighten.js @@ -19,26 +19,10 @@ {key : 'ctrl', description : 'Darken'}, {key : 'shift', description : 'Apply only once per pixel'} ]; - - this.usedPixels_ = { - darken : {}, - lighten : {} - }; }; pskl.utils.inherit(ns.Lighten, ns.SimplePen); - /** - * @Override - */ - ns.Lighten.prototype.resetUsedPixels_ = function() { - this.usedPixels_ = { - darken : {}, - lighten : {} - }; - this.superclass.resetUsedPixels_.call(this); - }; - /** * @Override */ @@ -54,29 +38,32 @@ }; ns.Lighten.prototype.getModifiedColor_ = function(col, row, frame, overlay, event) { + // get colors in overlay and in frame var overlayColor = overlay.getPixel(col, row); var frameColor = frame.getPixel(col, row); - var pixelColor = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor; - var isDarken = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey; - var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR; - var isSinglePass = event.shiftKey; - var usedPixels = isDarken ? this.usedPixels_.darken : this.usedPixels_.lighten; - var key = col + '-' + row; - var doNotModify = isTransparent || (isSinglePass && usedPixels[key]); + var isPixelModified = overlayColor !== Constants.TRANSPARENT_COLOR; + var pixelColor = isPixelModified ? overlayColor : frameColor; + + var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR; + if (isTransparent) { + return Constants.TRANSPARENT_COLOR; + } + + var oncePerPixel = event.shiftKey; + if (oncePerPixel && isPixelModified) { + return pixelColor; + } + + var step = oncePerPixel ? DEFAULT_STEP * 2 : DEFAULT_STEP; + var isDarken = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey; var color; - if (doNotModify) { - color = window.tinycolor(pixelColor); + if (isDarken) { + color = window.tinycolor.darken(pixelColor, step); } else { - var step = isSinglePass ? DEFAULT_STEP * 2 : DEFAULT_STEP; - if (isDarken) { - color = window.tinycolor.darken(pixelColor, step); - } else { - color = window.tinycolor.lighten(pixelColor, step); - } + color = window.tinycolor.lighten(pixelColor, step); } - usedPixels[key] = true; // Convert tinycolor color to string format. return color.toHexString(); diff --git a/test/drawing/tests/lighten.darken.json b/test/drawing/tests/lighten.darken.json index 80d16984..2e065606 100644 --- a/test/drawing/tests/lighten.darken.json +++ b/test/drawing/tests/lighten.darken.json @@ -11,8 +11,8 @@ "ctrlKey": false }, "coords": { - "x": 0, - "y": 1 + "x": 2, + "y": 2 }, "type": "mouse-event" }, { @@ -24,8 +24,8 @@ "ctrlKey": false }, "coords": { - "x": 0, - "y": 1 + "x": 2, + "y": 2 }, "type": "mouse-event" }, { @@ -122,98 +122,10 @@ "y": 0 }, "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 1 - }, - "type": "mouse-event" - }, { + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { "event": { "type": "mousedown", "button": 0, @@ -304,7 +216,10 @@ "y": 0 }, "type": "mouse-event" - }, { + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { "event": { "type": "mousedown", "button": 0, @@ -314,513 +229,6 @@ }, "coords": { "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 0 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 0 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 0 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, "y": 0 }, "type": "mouse-event" @@ -837,58 +245,6 @@ "y": 0 }, "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 4 - }, - "type": "mouse-event" }, { "event": { "type": "mousemove", @@ -899,7 +255,7 @@ }, "coords": { "x": 1, - "y": 4 + "y": 0 }, "type": "mouse-event" }, { @@ -912,7 +268,7 @@ }, "coords": { "x": 2, - "y": 4 + "y": 0 }, "type": "mouse-event" }, { @@ -925,7 +281,7 @@ }, "coords": { "x": 3, - "y": 4 + "y": 0 }, "type": "mouse-event" }, { @@ -938,7 +294,7 @@ }, "coords": { "x": 4, - "y": 4 + "y": 0 }, "type": "mouse-event" }, { @@ -951,400 +307,13 @@ }, "coords": { "x": 4, - "y": 4 + "y": 0 }, "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 4 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 4 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 4 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 4 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 4 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 4 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 4 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { "event": { "type": "mousedown", "button": 0, @@ -1353,104 +322,26 @@ "ctrlKey": true }, "coords": { - "x": 0, - "y": 3 + "x": 2, + "y": 0 }, "type": "mouse-event" }, { "event": { - "type": "mouseup", + "type": "mousemove", "button": 0, "shiftKey": true, "altKey": false, "ctrlKey": true }, "coords": { - "x": 0, - "y": 3 + "x": 2, + "y": 0 }, "type": "mouse-event" }, { "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 4, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 4, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 3, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 3, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 1, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 1, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", + "type": "mousemove", "button": 0, "shiftKey": true, "altKey": false, @@ -1461,6 +352,19 @@ "y": 0 }, "type": "mouse-event" + }, { + "event": { + "type": "mousemove", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": true + }, + "coords": { + "x": 0, + "y": 0 + }, + "type": "mouse-event" }, { "event": { "type": "mouseup", @@ -1469,12 +373,189 @@ "altKey": false, "ctrlKey": true }, + "coords": { + "x": 0, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 0, + "y": 0 + }, + "type": "mouse-event" + }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 0, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, "coords": { "x": 1, "y": 0 }, "type": "mouse-event" }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 1, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 1, + "y": 0 + }, + "type": "mouse-event" + }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 1, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { "event": { "type": "mousedown", "button": 0, @@ -1483,7 +564,7 @@ "ctrlKey": true }, "coords": { - "x": 3, + "x": 2, "y": 0 }, "type": "mouse-event" @@ -1496,11 +577,43 @@ "ctrlKey": true }, "coords": { - "x": 3, + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": true + }, + "coords": { + "x": 2, "y": 0 }, "type": "mouse-event" }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": true + }, + "coords": { + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { "event": { "type": "mousedown", "button": 0, @@ -1509,8 +622,8 @@ "ctrlKey": true }, "coords": { - "x": 0, - "y": 2 + "x": 2, + "y": 0 }, "type": "mouse-event" }, { @@ -1522,11 +635,14 @@ "ctrlKey": true }, "coords": { - "x": 0, - "y": 2 + "x": 2, + "y": 0 }, "type": "mouse-event" - }, { + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { "event": { "type": "mousedown", "button": 0, @@ -1535,8 +651,8 @@ "ctrlKey": true }, "coords": { - "x": 4, - "y": 2 + "x": 2, + "y": 0 }, "type": "mouse-event" }, { @@ -1548,36 +664,21 @@ "ctrlKey": true }, "coords": { - "x": 4, - "y": 2 + "x": 2, + "y": 0 }, "type": "mouse-event" }, { + "type": "keyboard-event", "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, + "which": 90, + "shiftKey": false, "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 0, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 0, - "y": 1 - }, - "type": "mouse-event" + "ctrlKey": true, + "target": { + "nodeName": "BODY" + } + } }], "initialState": { "size": { @@ -1586,8 +687,7 @@ }, "primaryColor": "#000000", "secondaryColor": "rgba(0, 0, 0, 0)", - "selectedTool": "tool-move", - "step" : 100 + "selectedTool": "tool-pen" }, - "png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAARklEQVQIW2PU1dX9//HjRwZ+fn4GGM0I5PxnQAIgSUYbGxtMlUBF/4FGMHh7ezNs3bqV4fLlywxg7SAtcnJyDI8ePQKbCwDi5B7DVPJoXAAAAABJRU5ErkJggg==" + "png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAI0lEQVQIW2PU1dX9z8/Pz/Do0SMGEA0CjAwMDP/BLCRAoSAAeuwIiFt0t6sAAAAASUVORK5CYII=" } From f767d24280b8cfe3cd59a0f93a09a0ec2fd74497 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Thu, 26 Nov 2015 00:04:44 +0100 Subject: [PATCH 07/10] Issue #258 : Update test recorder after ToolController refactor --- src/js/devtools/DrawingTestRecorder.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/devtools/DrawingTestRecorder.js b/src/js/devtools/DrawingTestRecorder.js index f89eecfb..14849d1d 100644 --- a/src/js/devtools/DrawingTestRecorder.js +++ b/src/js/devtools/DrawingTestRecorder.js @@ -48,7 +48,7 @@ }, primaryColor : pskl.app.selectedColorsService.getPrimaryColor(), secondaryColor : pskl.app.selectedColorsService.getSecondaryColor(), - selectedTool : pskl.app.toolController.currentSelectedTool.instance.toolId + selectedTool : pskl.app.toolController.currentSelectedTool.toolId }; }; From 67b66e4a1065665feb1096e7c0b34d8cb5541ffa Mon Sep 17 00:00:00 2001 From: jdescottes Date: Thu, 26 Nov 2015 00:05:41 +0100 Subject: [PATCH 08/10] Issue #258 : Support pensize for DitheringTool --- src/js/tools/drawing/DitheringTool.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/js/tools/drawing/DitheringTool.js b/src/js/tools/drawing/DitheringTool.js index 77ee4044..12b65d3a 100644 --- a/src/js/tools/drawing/DitheringTool.js +++ b/src/js/tools/drawing/DitheringTool.js @@ -16,7 +16,7 @@ pskl.utils.inherit(ns.DitheringTool, ns.SimplePen); ns.DitheringTool.prototype.supportsDynamicPenSize = function() { - return false; + return true; }; /** @@ -26,13 +26,24 @@ this.previousCol = col; this.previousRow = row; + var pixels = pskl.app.penSizeService.getPixelsForPenSize(col, row); + pixels.forEach(function (p) { + this.applyToolOnPixel(p[0], p[1], frame, overlay, event); + }.bind(this)); + }; + + ns.DitheringTool.prototype.applyToolOnPixel = function(col, row, frame, overlay, event) { var usePrimaryColor = (col + row) % 2; - usePrimaryColor = - pskl.app.mouseStateService.isRightButtonPressed() ? !usePrimaryColor : usePrimaryColor; + + if (pskl.app.mouseStateService.isRightButtonPressed()) { + usePrimaryColor = !usePrimaryColor; + } + var ditheringColor = usePrimaryColor ? pskl.app.selectedColorsService.getPrimaryColor() : pskl.app.selectedColorsService.getSecondaryColor(); this.draw(ditheringColor, col, row, frame, overlay); }; + })(); From f0ed4927e8fd75e99fc3b26e104164f722709eea Mon Sep 17 00:00:00 2001 From: jdescottes Date: Thu, 26 Nov 2015 23:35:33 +0100 Subject: [PATCH 09/10] Issue #258 : Move resize method to utils + add unit test --- src/js/service/pensize/PenSizeService.js | 43 +++----- src/js/tools/drawing/BaseTool.js | 14 +-- src/js/tools/drawing/Circle.js | 15 +-- src/js/tools/drawing/DitheringTool.js | 7 +- src/js/tools/drawing/Lighten.js | 9 +- src/js/tools/drawing/Rectangle.js | 14 +-- src/js/tools/drawing/ShapeTool.js | 11 +- src/js/tools/drawing/SimplePen.js | 7 +- src/js/tools/drawing/Stroke.js | 102 +++++++----------- src/js/utils/PixelUtils.js | 47 ++++++++ test/js/service/pensize/PenSizeServiceTest.js | 73 +++++++++++++ 11 files changed, 206 insertions(+), 136 deletions(-) create mode 100644 test/js/service/pensize/PenSizeServiceTest.js diff --git a/src/js/service/pensize/PenSizeService.js b/src/js/service/pensize/PenSizeService.js index 1fe2669d..5866cff2 100644 --- a/src/js/service/pensize/PenSizeService.js +++ b/src/js/service/pensize/PenSizeService.js @@ -4,10 +4,15 @@ var MIN_PENSIZE = 1; var MAX_PENSIZE = 4; - ns.PenSizeService = function () {}; + /** + * Service to retrieve and modify the current pen size. + */ + ns.PenSizeService = function () { + this.size = MIN_PENSIZE; + }; ns.PenSizeService.prototype.init = function () { - this.size = pskl.UserSettings.get('PEN_SIZE'); + this.size = pskl.UserSettings.get(pskl.UserSettings.PEN_SIZE); var shortcuts = pskl.service.keyboard.Shortcuts; pskl.app.shortcutService.registerShortcut(shortcuts.MISC.INCREASE_PENSIZE, this.increasePenSize_.bind(this)); @@ -22,10 +27,14 @@ this.setPenSize(this.size - 1); }; + ns.PenSizeService.prototype.getPenSize = function () { + return this.size; + }; + ns.PenSizeService.prototype.setPenSize = function (size) { if (this.isPenSizeValid_(size) && size != this.size) { this.size = size; - pskl.UserSettings.set('PEN_SIZE', size); + pskl.UserSettings.set(pskl.UserSettings.PEN_SIZE, size); $.publish(Events.PEN_SIZE_CHANGED); } }; @@ -38,32 +47,4 @@ return size >= MIN_PENSIZE && size <= MAX_PENSIZE; }; - ns.PenSizeService.prototype.getPenSize = function () { - return this.size; - }; - - ns.PenSizeService.prototype.getPixelsForPenSize = function (col, row, penSize) { - var size = penSize || this.size; - if (size == 1) { - return [[col, row]]; - } else if (size == 2) { - return [ - [col, row], [col + 1, row], - [col, row + 1], [col + 1, row + 1] - ]; - } else if (size == 3) { - return [ - [col - 1, row - 1], [col, row - 1], [col + 1, row - 1], - [col - 1, row + 0], [col, row + 0], [col + 1, row + 0], - [col - 1, row + 1], [col, row + 1], [col + 1, row + 1], - ]; - } else if (size == 4) { - return [ - [col - 1, row - 1], [col, row - 1], [col + 1, row - 1], [col + 2, row - 1], - [col - 1, row + 0], [col, row + 0], [col + 1, row + 0], [col + 2, row + 0], - [col - 1, row + 1], [col, row + 1], [col + 1, row + 1], [col + 2, row + 1], - [col - 1, row + 2], [col, row + 2], [col + 1, row + 2], [col + 2, row + 2], - ]; - } - }; })(); diff --git a/src/js/tools/drawing/BaseTool.js b/src/js/tools/drawing/BaseTool.js index f306496c..4b58408a 100644 --- a/src/js/tools/drawing/BaseTool.js +++ b/src/js/tools/drawing/BaseTool.js @@ -49,15 +49,11 @@ } var frameColor = frame.getPixel(col, row); - - if (this.supportsDynamicPenSize()) { - var pixels = pskl.app.penSizeService.getPixelsForPenSize(col, row); - pixels.forEach(function (p) { - overlay.setPixel(p[0], p[1], this.getHighlightColor_(frameColor)); - }.bind(this)); - } else { - overlay.setPixel(col, row, this.getHighlightColor_(frameColor)); - } + var highlightColor = this.getHighlightColor_(frameColor); + var size = this.supportsDynamicPenSize() ? pskl.app.penSizeService.getPenSize() : 1; + pskl.PixelUtils.resizePixel(col, row, size).forEach(function (point) { + overlay.setPixel(point[0], point[1], highlightColor); + }); this.highlightedPixelCol = col; this.highlightedPixelRow = row; diff --git a/src/js/tools/drawing/Circle.js b/src/js/tools/drawing/Circle.js index bf0ec702..05cfb1e7 100644 --- a/src/js/tools/drawing/Circle.js +++ b/src/js/tools/drawing/Circle.js @@ -20,17 +20,10 @@ * @override */ ns.Circle.prototype.draw = function (col, row, color, targetFrame, penSize) { - var circlePoints = this.getCirclePixels_(this.startCol, this.startRow, col, row); - - var applyDraw = function (p) { - targetFrame.setPixel(p[0], p[1], color); - }.bind(this); - - for (var i = 0 ; i < circlePoints.length ; i++) { - // Change model: - var pixels = pskl.app.penSizeService.getPixelsForPenSize(circlePoints[i].col, circlePoints[i].row, penSize); - pixels.forEach(applyDraw); - } + var circlePixels = this.getCirclePixels_(this.startCol, this.startRow, col, row); + pskl.PixelUtils.resizePixels(circlePixels, penSize).forEach(function (point) { + targetFrame.setPixel(point[0], point[1], color); + }); }; ns.Circle.prototype.getCirclePixels_ = function (x0, y0, x1, y1) { diff --git a/src/js/tools/drawing/DitheringTool.js b/src/js/tools/drawing/DitheringTool.js index 12b65d3a..fa469c03 100644 --- a/src/js/tools/drawing/DitheringTool.js +++ b/src/js/tools/drawing/DitheringTool.js @@ -26,9 +26,10 @@ this.previousCol = col; this.previousRow = row; - var pixels = pskl.app.penSizeService.getPixelsForPenSize(col, row); - pixels.forEach(function (p) { - this.applyToolOnPixel(p[0], p[1], frame, overlay, event); + var penSize = pskl.app.penSizeService.getPenSize(); + var points = pskl.PixelUtils.resizePixel(col, row, penSize); + points.forEach(function (point) { + this.applyToolOnPixel(point[0], point[1], frame, overlay, event); }.bind(this)); }; diff --git a/src/js/tools/drawing/Lighten.js b/src/js/tools/drawing/Lighten.js index f2820b16..2ad6e3c3 100644 --- a/src/js/tools/drawing/Lighten.js +++ b/src/js/tools/drawing/Lighten.js @@ -30,10 +30,11 @@ this.previousCol = col; this.previousRow = row; - var pixels = pskl.app.penSizeService.getPixelsForPenSize(col, row); - pixels.forEach(function (p) { - var modifiedColor = this.getModifiedColor_(p[0], p[1], frame, overlay, event); - this.draw(modifiedColor, p[0], p[1], frame, overlay); + var penSize = pskl.app.penSizeService.getPenSize(); + var points = pskl.PixelUtils.resizePixel(col, row, penSize); + points.forEach(function (point) { + var modifiedColor = this.getModifiedColor_(point[0], point[1], frame, overlay, event); + this.draw(modifiedColor, point[0], point[1], frame, overlay); }.bind(this)); }; diff --git a/src/js/tools/drawing/Rectangle.js b/src/js/tools/drawing/Rectangle.js index e1b8fe28..9b83d1bf 100644 --- a/src/js/tools/drawing/Rectangle.js +++ b/src/js/tools/drawing/Rectangle.js @@ -20,16 +20,10 @@ * @override */ ns.Rectangle.prototype.draw = function (col, row, color, targetFrame, penSize) { - var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row); + var rectanglePixels = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row); - var applyDraw = function (p) { - targetFrame.setPixel(p[0], p[1], color); - }.bind(this); - - for (var i = 0 ; i < strokePoints.length ; i++) { - // Change model: - var pixels = pskl.app.penSizeService.getPixelsForPenSize(strokePoints[i].col, strokePoints[i].row, penSize); - pixels.forEach(applyDraw); - } + pskl.PixelUtils.resizePixels(rectanglePixels, penSize).forEach(function (point) { + targetFrame.setPixel(point[0], point[1], color); + }); }; })(); diff --git a/src/js/tools/drawing/ShapeTool.js b/src/js/tools/drawing/ShapeTool.js index be33f95a..837809f5 100644 --- a/src/js/tools/drawing/ShapeTool.js +++ b/src/js/tools/drawing/ShapeTool.js @@ -29,7 +29,8 @@ this.startRow = row; // Drawing the first point of the rectangle in the fake overlay canvas: - overlay.setPixel(col, row, this.getToolColor()); + var penSize = pskl.app.penSizeService.getPenSize(); + this.draw(col, row, this.getToolColor(), overlay, penSize); }; ns.ShapeTool.prototype.moveToolAt = function(col, row, frame, overlay, event) { @@ -43,7 +44,8 @@ } // draw in overlay - this.draw(coords.col, coords.row, color, overlay); + var penSize = pskl.app.penSizeService.getPenSize(); + this.draw(coords.col, coords.row, color, overlay, penSize); }; /** @@ -53,7 +55,8 @@ overlay.clear(); var coords = this.getCoordinates_(col, row, event); var color = this.getToolColor(); - this.draw(coords.col, coords.row, color, frame); + var penSize = pskl.app.penSizeService.getPenSize(); + this.draw(coords.col, coords.row, color, frame, penSize); $.publish(Events.DRAG_END); this.raiseSaveStateEvent({ @@ -62,7 +65,7 @@ startCol : this.startCol, startRow : this.startRow, color : color, - penSize : pskl.app.penSizeService.getPenSize() + penSize : penSize }); }; diff --git a/src/js/tools/drawing/SimplePen.js b/src/js/tools/drawing/SimplePen.js index 12b450c0..f4d3fe81 100644 --- a/src/js/tools/drawing/SimplePen.js +++ b/src/js/tools/drawing/SimplePen.js @@ -36,9 +36,10 @@ }; ns.SimplePen.prototype.drawUsingPenSize = function(color, col, row, frame, overlay) { - var pixels = pskl.app.penSizeService.getPixelsForPenSize(col, row); - pixels.forEach(function (p) { - this.draw(color, p[0], p[1], frame, overlay); + var penSize = pskl.app.penSizeService.getPenSize(); + var points = pskl.PixelUtils.resizePixel(col, row, penSize); + points.forEach(function (point) { + this.draw(color, point[0], point[1], frame, overlay); }.bind(this)); }; diff --git a/src/js/tools/drawing/Stroke.js b/src/js/tools/drawing/Stroke.js index 529dbd5c..527d327e 100644 --- a/src/js/tools/drawing/Stroke.js +++ b/src/js/tools/drawing/Stroke.js @@ -47,85 +47,65 @@ ns.Stroke.prototype.moveToolAt = function(col, row, frame, overlay, event) { overlay.clear(); - if (event.shiftKey) { - var coords = this.getStraightLineCoordinates_(col, row); - col = coords.col; - row = coords.row; - } - - // When the user moussemove (before releasing), we dynamically compute the - // pixel to draw the line and draw this line in the overlay canvas: - var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row); - - // Drawing current stroke: + var penSize = pskl.app.penSizeService.getPenSize(); + var isStraight = event.shiftKey; var color = this.getToolColor(); - - var setPixel = function (p) { - overlay.setPixel(p[0], p[1], color); - }.bind(this); - - for (var i = 0; i < strokePoints.length; i++) { - - if (color == Constants.TRANSPARENT_COLOR) { - // When mousemoving the stroke tool, we draw in the canvas overlay above the drawing canvas. - // If the stroke color is transparent, we won't be - // able to see it during the movement. - // We set it to a semi-opaque white during the tool mousemove allowing to see colors below the stroke. - // When the stroke tool will be released, It will draw a transparent stroke, - // eg deleting the equivalent of a stroke. - color = Constants.SELECTION_TRANSPARENT_COLOR; - } - - var pixels = pskl.app.penSizeService.getPixelsForPenSize(strokePoints[i].col, strokePoints[i].row); - pixels.forEach(setPixel); + if (color == Constants.TRANSPARENT_COLOR) { + // When mousemoving the stroke tool, we draw in the canvas overlay above the drawing canvas. + // If the stroke color is transparent, we won't be + // able to see it during the movement. + // We set it to a semi-opaque white during the tool mousemove allowing to see colors below the stroke. + // When the stroke tool will be released, It will draw a transparent stroke, + // eg deleting the equivalent of a stroke. + color = Constants.SELECTION_TRANSPARENT_COLOR; } + + this.draw_(col, row, color, overlay, penSize, isStraight); }; /** * @override */ ns.Stroke.prototype.releaseToolAt = function(col, row, frame, overlay, event) { + var penSize = pskl.app.penSizeService.getPenSize(); + var isStraight = event.shiftKey; var color = this.getToolColor(); - if (event.shiftKey) { + // The user released the tool to draw a line. We will compute the pixel coordinate, impact + // the model and draw them in the drawing canvas (not the fake overlay anymore) + this.draw_(col, row, color, frame, penSize, isStraight); + + // For now, we are done with the stroke tool and don't need an overlay anymore: + overlay.clear(); + + this.raiseSaveStateEvent({ + col : col, + row : row, + startCol : this.startCol, + startRow : this.startRow, + color : color, + penSize : penSize, + isStraight : isStraight + }); + }; + + ns.Stroke.prototype.draw_ = function (col, row, color, targetFrame, penSize, isStraight) { + if (isStraight) { var coords = this.getStraightLineCoordinates_(col, row); col = coords.col; row = coords.row; } - var setPixel = function (p) { - frame.setPixel(p[0], p[1], color); - }.bind(this); - - // The user released the tool to draw a line. We will compute the pixel coordinate, impact - // the model and draw them in the drawing canvas (not the fake overlay anymore) - var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row); - for (var i = 0; i < strokePoints.length; i++) { - // Change model: - - var pixels = pskl.app.penSizeService.getPixelsForPenSize(strokePoints[i].col, strokePoints[i].row); - pixels.forEach(setPixel); - } - // For now, we are done with the stroke tool and don't need an overlay anymore: - overlay.clear(); - - this.raiseSaveStateEvent({ - pixels : strokePoints, - color : color, - penSize : pskl.app.penSizeService.getPenSize() + var linePixels = this.getLinePixels_(this.startCol, col, this.startRow, row); + pskl.PixelUtils.resizePixels(linePixels, penSize).forEach(function (point) { + targetFrame.setPixel(point[0], point[1], color); }); }; ns.Stroke.prototype.replay = function(frame, replayData) { - var color = replayData.color; - var setPixel = function (p) { - frame.setPixel(p[0], p[1], color); - }.bind(this); - - replayData.pixels.forEach(function (pixel) { - var pixels = pskl.app.penSizeService.getPixelsForPenSize(pixel.col, pixel.row, replayData.penSize); - pixels.forEach(setPixel); - }); + this.startCol = replayData.startCol; + this.startRow = replayData.startRow; + this.draw_(replayData.col, replayData.row, replayData.color, frame, replayData.penSize, replayData.isStraight); }; /** @@ -139,7 +119,7 @@ var dist = Math.sqrt(Math.pow(tCol, 2) + Math.pow(tRow, 2)); var axisDistance = Math.round(dist); - var diagDistance = Math.round(Math.sqrt(Math.pow(dist, 2) / 2)); + var diagDistance = Math.round(dist / Math.sqrt(2)); var PI8 = Math.PI / 8; var angle = Math.atan2(tRow, tCol); diff --git a/src/js/utils/PixelUtils.js b/src/js/utils/PixelUtils.js index ae42e736..d6d77fe5 100644 --- a/src/js/utils/PixelUtils.js +++ b/src/js/utils/PixelUtils.js @@ -70,6 +70,53 @@ return paintedPixels; }, + /** + * Resize the pixel at {col, row} for the provided size. Will return the array of pixels centered + * around the original pixel, forming a pixel square of side=size + * + * @param {Number} row x-coordinate of the original pixel + * @param {Number} col y-coordinate of the original pixel + * @param {Number} size >= 1 && <= 4 + * @return {Array} array of arrays of 2 Numbers (eg. [[0,0], [0,1], [1,0], [1,1]]) + */ + resizePixel : function (col, row, size) { + if (size == 1) { + return [[col, row]]; + } else if (size == 2) { + return [ + [col, row], [col + 1, row], + [col, row + 1], [col + 1, row + 1] + ]; + } else if (size == 3) { + return [ + [col - 1, row - 1], [col, row - 1], [col + 1, row - 1], + [col - 1, row + 0], [col, row + 0], [col + 1, row + 0], + [col - 1, row + 1], [col, row + 1], [col + 1, row + 1], + ]; + } else if (size == 4) { + return [ + [col - 1, row - 1], [col, row - 1], [col + 1, row - 1], [col + 2, row - 1], + [col - 1, row + 0], [col, row + 0], [col + 1, row + 0], [col + 2, row + 0], + [col - 1, row + 1], [col, row + 1], [col + 1, row + 1], [col + 2, row + 1], + [col - 1, row + 2], [col, row + 2], [col + 1, row + 2], [col + 2, row + 2], + ]; + } else { + console.error('Unsupported size : ' + size); + } + }, + + /** + * Shortcut to reduce the output of pskl.PixelUtils.resizePixel for several pixels + * @param {Array} pixels Array of pixels (objects {col:Number, row:Number}) + * @param {Number} >= 1 && <= 4 + * @return {Array} array of arrays of 2 Numbers (eg. [[0,0], [0,1], [1,0], [1,1]]) + */ + resizePixels : function (pixels, size) { + return pixels.reduce(function (p, pixel) { + return p.concat(pskl.PixelUtils.resizePixel(pixel.col, pixel.row, size)); + }, []); + }, + /** * Apply the paintbucket tool in a frame at the (col, row) initial position * with the replacement color. diff --git a/test/js/service/pensize/PenSizeServiceTest.js b/test/js/service/pensize/PenSizeServiceTest.js new file mode 100644 index 00000000..3fd48c13 --- /dev/null +++ b/test/js/service/pensize/PenSizeServiceTest.js @@ -0,0 +1,73 @@ +describe("PenSize test suite", function() { + var penSizeService; + var userSettingsBackup; + var userSettingsPenSize; + + beforeEach(function() { + userSettingsBackup = pskl.UserSettings; + + pskl.UserSettings = { + PEN_SIZE : 'PEN_SIZE_TEST_KEY', + get : function () { + return userSettingsPenSize; + }, + + set : function (size) { + userSettingsPenSize = size; + } + }; + + spyOn(pskl.UserSettings, 'get').and.callThrough(); + spyOn(pskl.UserSettings, 'set').and.callThrough(); + spyOn($, 'publish').and.callThrough(); + + + penSizeService = new pskl.service.pensize.PenSizeService(); + }); + + afterEach(function () { + pskl.UserSettings = userSettingsBackup; + }); + + it("gets initial value from user settings", function() { + console.log('[PenSizeService] gets initial value from user settings'); + userSettingsPenSize = 2; + + penSizeService.init(); + expect(penSizeService.getPenSize()).toBe(2); + expect(pskl.UserSettings.get).toHaveBeenCalledWith('PEN_SIZE_TEST_KEY'); + }); + + it("saves valid value to user settings", function() { + console.log('[PenSizeService] saves valid value to user settings'); + userSettingsPenSize = 1; + + penSizeService.init(); + penSizeService.setPenSize(3); + expect(penSizeService.getPenSize()).toBe(3); + + expect(pskl.UserSettings.set).toHaveBeenCalledWith('PEN_SIZE_TEST_KEY', 3); + expect($.publish).toHaveBeenCalledWith(Events.PEN_SIZE_CHANGED); + }); + + it("skips invalid value (outside of [1, 4])", function() { + console.log('[PenSizeService] skips invalid value (outside of [1, 4])'); + userSettingsPenSize = 1; + + penSizeService.init(); + // MAX_VALUE is 4 + penSizeService.setPenSize(5); + expect(penSizeService.getPenSize()).toBe(1); + // MIN_VALUE is 1 + penSizeService.setPenSize(0); + expect(penSizeService.getPenSize()).toBe(1); + // value should be a number + penSizeService.setPenSize("test"); + expect(penSizeService.getPenSize()).toBe(1); + + // nothing set in usersettings + expect(pskl.UserSettings.set.calls.any()).toBe(false); + // no event fired + expect($.publish.calls.any()).toBe(false); + }); +}); \ No newline at end of file From 92d5a4a2fe0d18ccf528c52b463e876866b68f07 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sat, 28 Nov 2015 00:24:52 +0100 Subject: [PATCH 10/10] Issue #258 : Add pensize support to DrawingTest + add pensize test suite --- src/js/devtools/DrawingTestPlayer.js | 9 ++ src/js/devtools/DrawingTestRecorder.js | 13 +- test/drawing/DrawingTests.pensize.js | 12 ++ test/drawing/tests/pensize.circle.basic.json | 1 + test/drawing/tests/pensize.circle.undo.json | 1 + test/drawing/tests/pensize.eraser.basic.json | 1 + test/drawing/tests/pensize.eraser.undo.json | 1 + test/drawing/tests/pensize.pen.basic.json | 140 ++++++++++++++++++ test/drawing/tests/pensize.pen.undo.json | 1 + .../tests/pensize.rectangle.basic.json | 1 + .../drawing/tests/pensize.rectangle.undo.json | 1 + test/drawing/tests/pensize.stroke.basic.json | 1 + test/drawing/tests/pensize.stroke.undo.json | 1 + 13 files changed, 182 insertions(+), 1 deletion(-) create mode 100644 test/drawing/DrawingTests.pensize.js create mode 100644 test/drawing/tests/pensize.circle.basic.json create mode 100644 test/drawing/tests/pensize.circle.undo.json create mode 100644 test/drawing/tests/pensize.eraser.basic.json create mode 100644 test/drawing/tests/pensize.eraser.undo.json create mode 100644 test/drawing/tests/pensize.pen.basic.json create mode 100644 test/drawing/tests/pensize.pen.undo.json create mode 100644 test/drawing/tests/pensize.rectangle.basic.json create mode 100644 test/drawing/tests/pensize.rectangle.undo.json create mode 100644 test/drawing/tests/pensize.stroke.basic.json create mode 100644 test/drawing/tests/pensize.stroke.undo.json diff --git a/src/js/devtools/DrawingTestPlayer.js b/src/js/devtools/DrawingTestPlayer.js index 4d29a61e..66e1b86f 100644 --- a/src/js/devtools/DrawingTestPlayer.js +++ b/src/js/devtools/DrawingTestPlayer.js @@ -28,6 +28,9 @@ $.publish(Events.SELECT_PRIMARY_COLOR, [this.initialState.primaryColor]); $.publish(Events.SELECT_SECONDARY_COLOR, [this.initialState.secondaryColor]); $.publish(Events.SELECT_TOOL, [this.initialState.selectedTool]); + if (this.initialState.penSize) { + pskl.app.penSizeService.setPenSize(this.initialState.penSize); + } }; ns.DrawingTestPlayer.prototype.createPiskel_ = function (width, height) { @@ -94,6 +97,8 @@ this.playColorEvent_(recordEvent); } else if (recordEvent.type === 'tool-event') { this.playToolEvent_(recordEvent); + } else if (recordEvent.type === 'pensize-event') { + this.playPenSizeEvent_(recordEvent); } else if (recordEvent.type === 'transformtool-event') { this.playTransformToolEvent_(recordEvent); } else if (recordEvent.type === 'instrumented-event') { @@ -144,6 +149,10 @@ $.publish(Events.SELECT_TOOL, [recordEvent.toolId]); }; + ns.DrawingTestPlayer.prototype.playPenSizeEvent_ = function (recordEvent) { + pskl.app.penSizeService.setPenSize(recordEvent.penSize); + }; + ns.DrawingTestPlayer.prototype.playTransformToolEvent_ = function (recordEvent) { pskl.app.transformationsController.applyTool(recordEvent.toolId, recordEvent.event); }; diff --git a/src/js/devtools/DrawingTestRecorder.js b/src/js/devtools/DrawingTestRecorder.js index 14849d1d..96ba50fc 100644 --- a/src/js/devtools/DrawingTestRecorder.js +++ b/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.PEN_SIZE_CHANGED, this.onPenSizeChanged_.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)); @@ -48,7 +49,8 @@ }, primaryColor : pskl.app.selectedColorsService.getPrimaryColor(), secondaryColor : pskl.app.selectedColorsService.getSecondaryColor(), - selectedTool : pskl.app.toolController.currentSelectedTool.toolId + selectedTool : pskl.app.toolController.currentSelectedTool.toolId, + penSize : pskl.app.penSizeService.getPenSize() }; }; @@ -111,6 +113,15 @@ } }; + ns.DrawingTestRecorder.prototype.onPenSizeChanged_ = function (evt) { + if (this.isRecording) { + var recordEvent = {}; + recordEvent.type = 'pensize-event'; + recordEvent.penSize = pskl.app.penSizeService.getPenSize(); + this.events.push(recordEvent); + } + }; + ns.DrawingTestRecorder.prototype.onTransformationEvent_ = function (evt, toolId, domEvent) { if (this.isRecording) { var recordEvent = {}; diff --git a/test/drawing/DrawingTests.pensize.js b/test/drawing/DrawingTests.pensize.js new file mode 100644 index 00000000..b422eec6 --- /dev/null +++ b/test/drawing/DrawingTests.pensize.js @@ -0,0 +1,12 @@ +{"tests" : [ + "pensize.circle.basic.json", + "pensize.circle.undo.json", + "pensize.eraser.basic.json", + "pensize.eraser.undo.json", + "pensize.pen.basic.json", + "pensize.pen.undo.json", + "pensize.rectangle.basic.json", + "pensize.rectangle.undo.json", + "pensize.stroke.basic.json", + "pensize.stroke.undo.json" +]} \ No newline at end of file diff --git a/test/drawing/tests/pensize.circle.basic.json b/test/drawing/tests/pensize.circle.basic.json new file mode 100644 index 00000000..af2a2f0c --- /dev/null +++ b/test/drawing/tests/pensize.circle.basic.json @@ -0,0 +1 @@ +{"events":[{"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":"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":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":2,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"type":"pensize-event","penSize":2},{"type":"color-event","color":"#2d2dbd","isPrimary":true},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"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":"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":4,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":4},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":4},"type":"mouse-event"},{"type":"color-event","color":"#ff9100","isPrimary":true},{"type":"pensize-event","penSize":3},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":7},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":7},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":8},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":9},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":9},"type":"mouse-event"},{"type":"color-event","color":"#31a626","isPrimary":true},{"type":"pensize-event","penSize":4},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":8,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":8,"y":7},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":7},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":8},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":9},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":9},"type":"mouse-event"}],"initialState":{"size":{"width":12,"height":12},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-circle","penSize":1},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAd0lEQVQoU2NkYGBg+M/A8J+RgYERxNbV3fsfRMPA5cvOYHEYYIQpBtF6unsZWCozkeXh7PNRt8AawQRMk+EyNRTT0XWCNEE0TGT4bySqhtVkdEFGkGKQIP01nHt9C+wadJsH0Em4ggwerMSEFDwekE3DFXmwmAYAMYQ08T2NnxoAAAAASUVORK5CYII="} \ No newline at end of file diff --git a/test/drawing/tests/pensize.circle.undo.json b/test/drawing/tests/pensize.circle.undo.json new file mode 100644 index 00000000..006d7d24 --- /dev/null +++ b/test/drawing/tests/pensize.circle.undo.json @@ -0,0 +1 @@ +{"events":[{"type":"tool-event","toolId":"tool-circle"},{"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":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":1,"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":"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":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"type":"color-event","color":"#2d2dbd","isPrimary":true},{"event":{"type":"mousedown","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":3,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":3},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":3},"type":"mouse-event"},{"type":"pensize-event","penSize":2},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":6},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":6},"type":"mouse-event"},{"type":"color-event","color":"#ff9100","isPrimary":true},{"type":"pensize-event","penSize":3},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":7},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":7},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":8},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":8},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":8},"type":"mouse-event"},{"type":"color-event","color":"#31a626","isPrimary":true},{"type":"pensize-event","penSize":4},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":8,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":8,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":7},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":10,"y":7},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":10,"y":8},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":10,"y":9},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":10,"y":9},"type":"mouse-event"},{"type":"keyboard-event","event":{"which":90,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"type":"keyboard-event","event":{"which":90,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"type":"keyboard-event","event":{"which":89,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"type":"tool-event","toolId":"tool-pen"}],"initialState":{"size":{"width":12,"height":12},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen","penSize":1},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAb0lEQVQoU2NkgID/DAwMjFA2XgqkCKYYTOvq7gXRDJcvO2M1ACb4//9ETIMZ8zFtBWv4PxFsC1aArokRn2KYCciaMDSAJNENwatBb85ehkspzijOw6sBm0dQNJDsaZiJ2DyPM1iJiWF4iJGiGKQWAIC4JQ2hxlSDAAAAAElFTkSuQmCC"} \ No newline at end of file diff --git a/test/drawing/tests/pensize.eraser.basic.json b/test/drawing/tests/pensize.eraser.basic.json new file mode 100644 index 00000000..f3c02914 --- /dev/null +++ b/test/drawing/tests/pensize.eraser.basic.json @@ -0,0 +1 @@ +{"events":[{"type":"tool-event","toolId":"tool-paint-bucket"},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":2},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":2},"type":"mouse-event"},{"type":"tool-event","toolId":"tool-eraser"},{"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":"pensize-event","penSize":2},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":0},"type":"mouse-event"},{"type":"pensize-event","penSize":3},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":1},"type":"mouse-event"},{"type":"pensize-event","penSize":4},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":5},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":5},"type":"mouse-event"}],"initialState":{"size":{"width":8,"height":8},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen","penSize":1},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAMUlEQVQYV2NkgID/DAwMjFjYYEGQJAgQVABVh6IYxQRkBXA2zFhkSZiVqEYhqaCyAgALQwoEbRLEzQAAAABJRU5ErkJggg=="} \ No newline at end of file diff --git a/test/drawing/tests/pensize.eraser.undo.json b/test/drawing/tests/pensize.eraser.undo.json new file mode 100644 index 00000000..bb0edc1c --- /dev/null +++ b/test/drawing/tests/pensize.eraser.undo.json @@ -0,0 +1 @@ +{"events":[{"type":"tool-event","toolId":"tool-paint-bucket"},{"type":"keyboard-event","event":{"which":66,"shiftKey":false,"altKey":false,"ctrlKey":false,"target":{"nodeName":"BODY"}}},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"type":"tool-event","toolId":"tool-eraser"},{"type":"pensize-event","penSize":1},{"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":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"type":"pensize-event","penSize":2},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":0},"type":"mouse-event"},{"type":"pensize-event","penSize":3},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":1},"type":"mouse-event"},{"type":"pensize-event","penSize":4},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":5},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":5},"type":"mouse-event"},{"type":"keyboard-event","event":{"which":90,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"type":"keyboard-event","event":{"which":90,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"type":"keyboard-event","event":{"which":89,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"type":"tool-event","toolId":"tool-pen"}],"initialState":{"size":{"width":8,"height":8},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen","penSize":4},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAKUlEQVQYV2NkgID/DAwMjFjYYEGQJAgQVABVh6IYxQRkBXA2shUDpQAASwMKBCPYrL8AAAAASUVORK5CYII="} \ No newline at end of file diff --git a/test/drawing/tests/pensize.pen.basic.json b/test/drawing/tests/pensize.pen.basic.json new file mode 100644 index 00000000..a3879572 --- /dev/null +++ b/test/drawing/tests/pensize.pen.basic.json @@ -0,0 +1,140 @@ +{ + "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": "pensize-event", + "penSize": 2 + }, { + "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": "pensize-event", + "penSize": 3 + }, { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": false, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 4, + "y": 1 + }, + "type": "mouse-event" + }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": false, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 4, + "y": 1 + }, + "type": "mouse-event" + }, { + "type": "pensize-event", + "penSize": 4 + }, { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": false, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 5, + "y": 4 + }, + "type": "mouse-event" + }, { + "event": { + "type": "mousemove", + "button": 0, + "shiftKey": false, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 5, + "y": 4 + }, + "type": "mouse-event" + }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": false, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 5, + "y": 4 + }, + "type": "mouse-event" + }], + "initialState": { + "size": { + "width": 8, + "height": 8 + }, + "primaryColor": "#000000", + "secondaryColor": "rgba(0, 0, 0, 0)", + "selectedTool": "tool-pen", + "penSize": 1 + }, + "png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALUlEQVQYV2NkYGD4z4AdMIKEwQQORSgKYGYgm4ZVAYZpMCuQXYHiJtooQPE0ABsyBwXCqrdKAAAAAElFTkSuQmCC" +} diff --git a/test/drawing/tests/pensize.pen.undo.json b/test/drawing/tests/pensize.pen.undo.json new file mode 100644 index 00000000..082a6e9b --- /dev/null +++ b/test/drawing/tests/pensize.pen.undo.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":"pensize-event","penSize":2},{"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":"pensize-event","penSize":3},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":1},"type":"mouse-event"},{"type":"pensize-event","penSize":4},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":5},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":5},"type":"mouse-event"},{"type":"keyboard-event","event":{"which":90,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}}],"initialState":{"size":{"width":8,"height":8},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen","penSize":1},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAK0lEQVQYV2NkYGD4z4AdMIKEwQQORSgKYGYgm4ZVAYZlMCtwOAPhBhoqAACekgMJrfUpnQAAAABJRU5ErkJggg=="} \ No newline at end of file diff --git a/test/drawing/tests/pensize.rectangle.basic.json b/test/drawing/tests/pensize.rectangle.basic.json new file mode 100644 index 00000000..f5490b69 --- /dev/null +++ b/test/drawing/tests/pensize.rectangle.basic.json @@ -0,0 +1 @@ +{"events":[{"type":"color-event","color":"#ff0000","isPrimary":true},{"type":"tool-event","toolId":"tool-rectangle"},{"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":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":1,"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":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"type":"color-event","color":"#2d2dbd","isPrimary":true},{"type":"pensize-event","penSize":2},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"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":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":4},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":4},"type":"mouse-event"},{"type":"color-event","color":"#ff9100","isPrimary":true},{"type":"pensize-event","penSize":3},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":10,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":10,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":8,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":7},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":7},"type":"mouse-event"},{"type":"color-event","color":"#31a626","isPrimary":true},{"type":"pensize-event","penSize":4},{"event":{"type":"mousedown","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":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":2,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":7},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":8,"y":7},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":8,"y":8},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":8},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":9},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":9},"type":"mouse-event"}],"initialState":{"size":{"width":12,"height":12},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen","penSize":1},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAOElEQVQoU2M0XKb2n4EEwDgENJx7fQvsI705e8E0S2Umig8x/EC2BpixRqJqxNlAtAZCUTII4wEAtH4n3fmJ9+kAAAAASUVORK5CYII="} \ No newline at end of file diff --git a/test/drawing/tests/pensize.rectangle.undo.json b/test/drawing/tests/pensize.rectangle.undo.json new file mode 100644 index 00000000..17478e9f --- /dev/null +++ b/test/drawing/tests/pensize.rectangle.undo.json @@ -0,0 +1 @@ +{"events":[{"type":"tool-event","toolId":"tool-rectangle"},{"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":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"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":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"type":"color-event","color":"#2d2dbd","isPrimary":true},{"type":"pensize-event","penSize":2},{"event":{"type":"mousedown","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":1,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"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":3,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":4},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":4},"type":"mouse-event"},{"type":"color-event","color":"#ff9100","isPrimary":true},{"type":"pensize-event","penSize":3},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":7},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":8,"y":7},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":8,"y":8},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":8,"y":8},"type":"mouse-event"},{"type":"color-event","color":"#31a626","isPrimary":true},{"type":"pensize-event","penSize":4},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":7},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":7},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":8},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":8,"y":8},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":8,"y":9},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":9},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":10},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":10,"y":10},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":11,"y":10},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":11,"y":11},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":12,"y":11},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":12,"y":12},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":13,"y":12},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":14,"y":12},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":13,"y":12},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":13,"y":11},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":12,"y":11},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":11,"y":11},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":11,"y":10},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":10,"y":10},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":10,"y":9},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":9},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":8},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":8,"y":8},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":8},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":9,"y":9},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":10,"y":9},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":10,"y":10},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":10,"y":10},"type":"mouse-event"},{"type":"keyboard-event","event":{"which":90,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"type":"keyboard-event","event":{"which":90,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"type":"keyboard-event","event":{"which":89,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"type":"tool-event","toolId":"tool-pen"}],"initialState":{"size":{"width":12,"height":12},"primaryColor":"#ff0000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen","penSize":1},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAXElEQVQoU2P8z8DwnwEKGBkYGGFsXDQjSIOe7l4M+cuXnbFqJl0DyGhd3b1gZ11KccbpIsZ8iHPBBO01wNzxfyJSiOUzMKLz4U7CpgHdMyh+oJ8GQrGM4QdiNAAAlfwnDeKFMp0AAAAASUVORK5CYII="} \ No newline at end of file diff --git a/test/drawing/tests/pensize.stroke.basic.json b/test/drawing/tests/pensize.stroke.basic.json new file mode 100644 index 00000000..4ffa20f4 --- /dev/null +++ b/test/drawing/tests/pensize.stroke.basic.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":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":0},"type":"mouse-event"},{"type":"pensize-event","penSize":2},{"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":4,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":1},"type":"mouse-event"},{"type":"pensize-event","penSize":3},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":5},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":5},"type":"mouse-event"},{"type":"color-event","color":"#ff0000","isPrimary":true},{"type":"pensize-event","penSize":4},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":2},"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"}],"initialState":{"size":{"width":8,"height":8},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-stroke","penSize":1},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAK0lEQVQYV2NkYGD4zwAjQAwoYESiKVcANuw/1CokK8C2gAjKrSBoAl43AADRvhADjb+9VAAAAABJRU5ErkJggg=="} \ No newline at end of file diff --git a/test/drawing/tests/pensize.stroke.undo.json b/test/drawing/tests/pensize.stroke.undo.json new file mode 100644 index 00000000..037eb46e --- /dev/null +++ b/test/drawing/tests/pensize.stroke.undo.json @@ -0,0 +1 @@ +{"events":[{"type":"tool-event","toolId":"tool-stroke"},{"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":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":0},"type":"mouse-event"},{"type":"pensize-event","penSize":2},{"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":0,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":3},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":3},"type":"mouse-event"},{"type":"pensize-event","penSize":3},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":3},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":3},"type":"mouse-event"},{"type":"color-event","color":"#b8ff00","isPrimary":true},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":3},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":3},"type":"mouse-event"},{"type":"keyboard-event","event":{"which":90,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}}],"initialState":{"size":{"width":8,"height":8},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen","penSize":1},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NkYGD4z4AHMCIpALExAC4FcFOpowCb1ShWUKYAAPGuCwKQGbMQAAAAAElFTkSuQmCC"} \ No newline at end of file