From ed32ddc747d81bfd55cb1b14a87d05479652e1fe Mon Sep 17 00:00:00 2001 From: grosbouddha Date: Mon, 14 Sep 2015 21:41:10 +0200 Subject: [PATCH 1/4] Introduce basic dithering tool --- src/css/tools.css | 9 ++++++- src/img/tools/dithering.png | Bin 0 -> 642 bytes src/js/app.js | 3 +++ src/js/controller/PaletteController.js | 1 + src/js/controller/ToolController.js | 1 + src/js/service/SelectedColorsService.js | 28 ++++++++++++++++++++++ src/js/tools/drawing/DitheringTool.js | 30 ++++++++++++++++++++++++ src/piskel-script-list.js | 2 ++ 8 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 src/img/tools/dithering.png create mode 100644 src/js/service/SelectedColorsService.js create mode 100644 src/js/tools/drawing/DitheringTool.js diff --git a/src/css/tools.css b/src/css/tools.css index c2a7be7c..de0936ac 100644 --- a/src/css/tools.css +++ b/src/css/tools.css @@ -114,6 +114,12 @@ background-size: 30px; } +.tool-icon.tool-dithering { + background-image: url(../img/tools/dithering.png); + background-position: 8px 9px; + background-size: 30px; +} + /* * Tool cursors: */ @@ -128,7 +134,8 @@ } .tool-pen .drawing-canvas-container:hover, -.tool-lighten .drawing-canvas-container:hover { +.tool-lighten .drawing-canvas-container:hover, +.tool-dithering .drawing-canvas-container:hover { cursor: url(../img/icons/pen.png) 0 15, pointer; } diff --git a/src/img/tools/dithering.png b/src/img/tools/dithering.png new file mode 100644 index 0000000000000000000000000000000000000000..6bd0f11b646252e8497d824f8828729901e73b10 GIT binary patch literal 642 zcmeAS@N?(olHy`uVBq!ia0vp^DImL&bz;bp~fyRD-E5f1qno@*E^X)CI9Z(9L0WHvCQKw zOOeNBP8OC4vzgxRmsmFWS7vFd_utDce)GjAgsgNeZO{?2+RLl3GN}6%L!?Scm9#_9 wQn9Oyn>=28F>6@jrMrqbW#WaGxpj<|6B?RlDS2)JCM^a}S3j3^P6 Date: Mon, 14 Sep 2015 21:53:29 +0200 Subject: [PATCH 2/4] Fixing lint errors --- src/js/service/SelectedColorsService.js | 4 ++-- src/js/tools/drawing/DitheringTool.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/service/SelectedColorsService.js b/src/js/service/SelectedColorsService.js index 6d3e3d38..8ef6a9b2 100644 --- a/src/js/service/SelectedColorsService.js +++ b/src/js/service/SelectedColorsService.js @@ -12,8 +12,8 @@ }; ns.SelectedColorsService.prototype.getColors = function () { - if (this.primaryColor_ == null || this.secondaryColor_ == null) { - throw "SelectedColorsService not properly intialized."; + if (this.primaryColor_ === null || this.secondaryColor_ === null) { + throw 'SelectedColorsService not properly intialized.'; } return [this.primaryColor_, this.secondaryColor_]; }; diff --git a/src/js/tools/drawing/DitheringTool.js b/src/js/tools/drawing/DitheringTool.js index 95c8c4f2..34c70ce5 100644 --- a/src/js/tools/drawing/DitheringTool.js +++ b/src/js/tools/drawing/DitheringTool.js @@ -20,7 +20,7 @@ var ditheringColor; var currentColors = pskl.app.selectedColorsService.getColors(); // XOR on either row or col parity. - if (((col % 2 == 0) && !(row % 2 == 0)) || (!(col % 2 == 0) && (row % 2 == 0))) { + if ((col % 2 === 0 && row % 2 !== 0) || (col % 2 !== 0 && row % 2 === 0)) { ditheringColor = currentColors[0]; } else { ditheringColor = currentColors[1]; From d0acb625cf2896eda28d495c6aff505a55842926 Mon Sep 17 00:00:00 2001 From: grosbouddha Date: Mon, 14 Sep 2015 23:40:16 +0200 Subject: [PATCH 3/4] Applying review comments for dithering tool --- src/js/service/SelectedColorsService.js | 2 +- src/js/tools/drawing/DitheringTool.js | 17 +++++++++-------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/js/service/SelectedColorsService.js b/src/js/service/SelectedColorsService.js index 8ef6a9b2..2e7d46c2 100644 --- a/src/js/service/SelectedColorsService.js +++ b/src/js/service/SelectedColorsService.js @@ -13,7 +13,7 @@ ns.SelectedColorsService.prototype.getColors = function () { if (this.primaryColor_ === null || this.secondaryColor_ === null) { - throw 'SelectedColorsService not properly intialized.'; + throw 'SelectedColorsService not properly initialized.'; } return [this.primaryColor_, this.secondaryColor_]; }; diff --git a/src/js/tools/drawing/DitheringTool.js b/src/js/tools/drawing/DitheringTool.js index 34c70ce5..7477fdf9 100644 --- a/src/js/tools/drawing/DitheringTool.js +++ b/src/js/tools/drawing/DitheringTool.js @@ -17,14 +17,15 @@ * @override */ ns.DitheringTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { - var ditheringColor; - var currentColors = pskl.app.selectedColorsService.getColors(); - // XOR on either row or col parity. - if ((col % 2 === 0 && row % 2 !== 0) || (col % 2 !== 0 && row % 2 === 0)) { - ditheringColor = currentColors[0]; - } else { - ditheringColor = currentColors[1]; - } + // Use primary selected color on cell with either an odd col or row. + // Use secondary color otherwise. + // When using the right mouse button, invert the above behavior to allow quick corrections. + var usePrimaryColor = (col + row) % 2; + var invertColors = event.button === Constants.RIGHT_BUTTON; + usePrimaryColor = invertColors ? !usePrimaryColor : usePrimaryColor; + + var selectedColors = pskl.app.selectedColorsService.getColors(); + var ditheringColor = usePrimaryColor ? selectedColors[0] : selectedColors[1]; this.superclass.applyToolAt.call(this, col, row, ditheringColor, frame, overlay, event); }; })(); From 7d964c7fdec5a795f32e7a04af367a273d2db1e7 Mon Sep 17 00:00:00 2001 From: grosbouddha Date: Tue, 15 Sep 2015 00:57:13 +0200 Subject: [PATCH 4/4] Fix dithering right-click color inversion on FF/IE Record pressed mouse button type only at mousedown time. On IE/FF, the button type is not available during mousemove. Did a round of testing on both FF and Chrome. --- src/js/tools/drawing/DitheringTool.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/js/tools/drawing/DitheringTool.js b/src/js/tools/drawing/DitheringTool.js index 7477fdf9..505cf86b 100644 --- a/src/js/tools/drawing/DitheringTool.js +++ b/src/js/tools/drawing/DitheringTool.js @@ -17,12 +17,17 @@ * @override */ ns.DitheringTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { + // On Firefox/IE, the clicked button type is not part of the mousemove event. + // Ensure we record the pressed button on the initial mousedown only. + if (event.type == 'mousedown') { + this.invertColors_ = event.button === Constants.RIGHT_BUTTON; + } + // Use primary selected color on cell with either an odd col or row. // Use secondary color otherwise. // When using the right mouse button, invert the above behavior to allow quick corrections. var usePrimaryColor = (col + row) % 2; - var invertColors = event.button === Constants.RIGHT_BUTTON; - usePrimaryColor = invertColors ? !usePrimaryColor : usePrimaryColor; + usePrimaryColor = this.invertColors_ ? !usePrimaryColor : usePrimaryColor; var selectedColors = pskl.app.selectedColorsService.getColors(); var ditheringColor = usePrimaryColor ? selectedColors[0] : selectedColors[1];