From a0350ff2e8d6c37f0f9ea3a7a8b5c1c9fbe51bab Mon Sep 17 00:00:00 2001 From: grosbouddha Date: Wed, 16 Sep 2015 02:24:56 +0200 Subject: [PATCH 01/13] Integrate selectedColorsService into PaletteController and PaletteListController - update selectedColorsService getColors array API to explicit getPrimary/getSecondary - update drawing test helper as well --- src/js/app.js | 4 +-- src/js/controller/DrawingController.js | 4 +-- src/js/controller/PaletteController.js | 37 ++++++--------------- src/js/controller/PalettesListController.js | 7 ++-- src/js/devtools/DrawingTestRecorder.js | 4 +-- src/js/service/SelectedColorsService.js | 19 +++++++---- src/js/tools/drawing/DitheringTool.js | 5 +-- 7 files changed, 34 insertions(+), 46 deletions(-) diff --git a/src/js/app.js b/src/js/app.js index b0a2e6d..249acc6 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -47,9 +47,7 @@ this.currentColorsService = new pskl.service.CurrentColorsService(this.piskelController); this.currentColorsService.init(); - this.palettesListController = new pskl.controller.PalettesListController( - this.paletteController, - this.currentColorsService); + this.palettesListController = new pskl.controller.PalettesListController(this.currentColorsService); this.palettesListController.init(); this.cursorCoordinatesController = new pskl.controller.CursorCoordinatesController(this.piskelController); diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index 430664f..246df20 100644 --- a/src/js/controller/DrawingController.js +++ b/src/js/controller/DrawingController.js @@ -321,9 +321,9 @@ // This always matches a LEFT mouse button which is __really__ not helpful if (this.currentMouseButton_ == Constants.RIGHT_BUTTON) { - return this.paletteController.getSecondaryColor(); + return pskl.app.selectedColorsService.getSecondaryColor(); } else if (this.currentMouseButton_ == Constants.LEFT_BUTTON) { - return this.paletteController.getPrimaryColor(); + return pskl.app.selectedColorsService.getPrimaryColor(); } else { return Constants.DEFAULT_PEN_COLOR; } diff --git a/src/js/controller/PaletteController.js b/src/js/controller/PaletteController.js index f6e0559..36986b9 100644 --- a/src/js/controller/PaletteController.js +++ b/src/js/controller/PaletteController.js @@ -1,11 +1,7 @@ (function () { var ns = $.namespace('pskl.controller'); - ns.PaletteController = function () { - // TODO(grosbouddha): Reuse default colors from SelectedColorsService. - this.primaryColor = Constants.DEFAULT_PEN_COLOR; - this.secondaryColor = Constants.TRANSPARENT_COLOR; - }; + ns.PaletteController = function () {}; /** * @public @@ -52,9 +48,9 @@ ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) { var inputPicker = $(evt.target); if (evt.data.isPrimary) { - this.setPrimaryColor(inputPicker.val()); + this.setPrimaryColor_(inputPicker.val()); } else { - this.setSecondaryColor(inputPicker.val()); + this.setSecondaryColor_(inputPicker.val()); } }; @@ -64,41 +60,30 @@ ns.PaletteController.prototype.onColorSelected_ = function(args, evt, color) { var inputPicker = $(evt.target); if (args.isPrimary) { - this.setPrimaryColor(color); + this.setPrimaryColor_(color); } else { - this.setSecondaryColor(color); + this.setSecondaryColor_(color); } }; - ns.PaletteController.prototype.setPrimaryColor = function (color) { - this.primaryColor = color; + ns.PaletteController.prototype.setPrimaryColor_ = function (color) { this.updateColorPicker_(color, $('#color-picker')); $.publish(Events.PRIMARY_COLOR_SELECTED, [color]); }; - ns.PaletteController.prototype.setSecondaryColor = function (color) { - this.secondaryColor = color; + ns.PaletteController.prototype.setSecondaryColor_ = function (color) { this.updateColorPicker_(color, $('#secondary-color-picker')); $.publish(Events.SECONDARY_COLOR_SELECTED, [color]); }; - ns.PaletteController.prototype.getPrimaryColor = function () { - return this.primaryColor; - }; - - ns.PaletteController.prototype.getSecondaryColor = function () { - return this.secondaryColor; - }; - ns.PaletteController.prototype.swapColors = function () { - var primaryColor = this.getPrimaryColor(); - this.setPrimaryColor(this.getSecondaryColor()); - this.setSecondaryColor(primaryColor); + var primaryColor = pskl.app.selectedColorsService.getPrimaryColor(); + this.setPrimaryColor_(pskl.app.selectedColorsService.getSecondaryColor()); + this.setSecondaryColor_(primaryColor); }; ns.PaletteController.prototype.resetColors = function () { - this.setPrimaryColor(Constants.DEFAULT_PEN_COLOR); - this.setSecondaryColor(Constants.TRANSPARENT_COLOR); + pskl.app.selectedColorsService.reset(); }; /** diff --git a/src/js/controller/PalettesListController.js b/src/js/controller/PalettesListController.js index 5f33279..c31e521 100644 --- a/src/js/controller/PalettesListController.js +++ b/src/js/controller/PalettesListController.js @@ -10,10 +10,9 @@ // I apologize to my future self for this one. var NO_SCROLL_MAX_COLORS = 20; - ns.PalettesListController = function (paletteController, usedColorService) { + ns.PalettesListController = function (usedColorService) { this.usedColorService = usedColorService; this.paletteService = pskl.app.paletteService; - this.paletteController = paletteController; }; ns.PalettesListController.prototype.init = function () { @@ -184,13 +183,13 @@ this.removeClass_(PRIMARY_COLOR_CLASSNAME); this.removeClass_(SECONDARY_COLOR_CLASSNAME); - var colorContainer = this.getColorContainer_(this.paletteController.getSecondaryColor()); + var colorContainer = this.getColorContainer_(pskl.app.selectedColorsService.getSecondaryColor()); if (colorContainer) { colorContainer.classList.remove(PRIMARY_COLOR_CLASSNAME); colorContainer.classList.add(SECONDARY_COLOR_CLASSNAME); } - colorContainer = this.getColorContainer_(this.paletteController.getPrimaryColor()); + colorContainer = this.getColorContainer_(pskl.app.selectedColorsService.getPrimaryColor()); if (colorContainer) { colorContainer.classList.remove(SECONDARY_COLOR_CLASSNAME); colorContainer.classList.add(PRIMARY_COLOR_CLASSNAME); diff --git a/src/js/devtools/DrawingTestRecorder.js b/src/js/devtools/DrawingTestRecorder.js index 0b40e24..5b6c312 100644 --- a/src/js/devtools/DrawingTestRecorder.js +++ b/src/js/devtools/DrawingTestRecorder.js @@ -45,8 +45,8 @@ width : this.piskelController.getWidth(), height : this.piskelController.getHeight() }, - primaryColor : pskl.app.paletteController.getPrimaryColor(), - secondaryColor : pskl.app.paletteController.getSecondaryColor(), + primaryColor : pskl.app.selectedColorsService.getPrimaryColor(), + secondaryColor : pskl.app.selectedColorsService.getSecondaryColor(), selectedTool : pskl.app.toolController.currentSelectedTool.instance.toolId }; }; diff --git a/src/js/service/SelectedColorsService.js b/src/js/service/SelectedColorsService.js index 2e7d46c..fa049f1 100644 --- a/src/js/service/SelectedColorsService.js +++ b/src/js/service/SelectedColorsService.js @@ -2,8 +2,7 @@ var ns = $.namespace('pskl.service'); ns.SelectedColorsService = function () { - this.primaryColor_ = Constants.DEFAULT_PEN_COLOR; - this.secondaryColor_ = Constants.TRANSPARENT_COLOR; + this.reset(); }; ns.SelectedColorsService.prototype.init = function () { @@ -11,11 +10,17 @@ $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onSecondaryColorUpdate_.bind(this)); }; - ns.SelectedColorsService.prototype.getColors = function () { - if (this.primaryColor_ === null || this.secondaryColor_ === null) { - throw 'SelectedColorsService not properly initialized.'; - } - return [this.primaryColor_, this.secondaryColor_]; + ns.SelectedColorsService.prototype.getPrimaryColor = function () { + return this.primaryColor_; + }; + + ns.SelectedColorsService.prototype.getSecondaryColor = function () { + return this.secondaryColor_; + }; + + ns.SelectedColorsService.prototype.reset = function () { + this.primaryColor_ = Constants.DEFAULT_PEN_COLOR; + this.secondaryColor_ = Constants.TRANSPARENT_COLOR; }; ns.SelectedColorsService.prototype.onPrimaryColorUpdate_ = function (evt, color) { diff --git a/src/js/tools/drawing/DitheringTool.js b/src/js/tools/drawing/DitheringTool.js index 505cf86..ceedee6 100644 --- a/src/js/tools/drawing/DitheringTool.js +++ b/src/js/tools/drawing/DitheringTool.js @@ -29,8 +29,9 @@ var usePrimaryColor = (col + row) % 2; usePrimaryColor = this.invertColors_ ? !usePrimaryColor : usePrimaryColor; - var selectedColors = pskl.app.selectedColorsService.getColors(); - var ditheringColor = usePrimaryColor ? selectedColors[0] : selectedColors[1]; + var ditheringColor = usePrimaryColor ? + pskl.app.selectedColorsService.getPrimaryColor() : + pskl.app.selectedColorsService.getSecondaryColor(); this.superclass.applyToolAt.call(this, col, row, ditheringColor, frame, overlay, event); }; })(); From 5d3880452316fcdbaa086edf2f398d77e0237be5 Mon Sep 17 00:00:00 2001 From: grosbouddha Date: Wed, 16 Sep 2015 02:24:56 +0200 Subject: [PATCH 02/13] Integrate selectedColorsService into PaletteController and PaletteListController - update selectedColorsService getColors array API to explicit getPrimary/getSecondary - update drawing test helper as well --- src/js/app.js | 4 +-- src/js/controller/DrawingController.js | 4 +-- src/js/controller/PaletteController.js | 37 ++++++--------------- src/js/controller/PalettesListController.js | 7 ++-- src/js/devtools/DrawingTestRecorder.js | 4 +-- src/js/service/SelectedColorsService.js | 19 +++++++---- src/js/tools/drawing/DitheringTool.js | 5 +-- 7 files changed, 34 insertions(+), 46 deletions(-) diff --git a/src/js/app.js b/src/js/app.js index b0a2e6d..249acc6 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -47,9 +47,7 @@ this.currentColorsService = new pskl.service.CurrentColorsService(this.piskelController); this.currentColorsService.init(); - this.palettesListController = new pskl.controller.PalettesListController( - this.paletteController, - this.currentColorsService); + this.palettesListController = new pskl.controller.PalettesListController(this.currentColorsService); this.palettesListController.init(); this.cursorCoordinatesController = new pskl.controller.CursorCoordinatesController(this.piskelController); diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index 430664f..246df20 100644 --- a/src/js/controller/DrawingController.js +++ b/src/js/controller/DrawingController.js @@ -321,9 +321,9 @@ // This always matches a LEFT mouse button which is __really__ not helpful if (this.currentMouseButton_ == Constants.RIGHT_BUTTON) { - return this.paletteController.getSecondaryColor(); + return pskl.app.selectedColorsService.getSecondaryColor(); } else if (this.currentMouseButton_ == Constants.LEFT_BUTTON) { - return this.paletteController.getPrimaryColor(); + return pskl.app.selectedColorsService.getPrimaryColor(); } else { return Constants.DEFAULT_PEN_COLOR; } diff --git a/src/js/controller/PaletteController.js b/src/js/controller/PaletteController.js index f6e0559..36986b9 100644 --- a/src/js/controller/PaletteController.js +++ b/src/js/controller/PaletteController.js @@ -1,11 +1,7 @@ (function () { var ns = $.namespace('pskl.controller'); - ns.PaletteController = function () { - // TODO(grosbouddha): Reuse default colors from SelectedColorsService. - this.primaryColor = Constants.DEFAULT_PEN_COLOR; - this.secondaryColor = Constants.TRANSPARENT_COLOR; - }; + ns.PaletteController = function () {}; /** * @public @@ -52,9 +48,9 @@ ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) { var inputPicker = $(evt.target); if (evt.data.isPrimary) { - this.setPrimaryColor(inputPicker.val()); + this.setPrimaryColor_(inputPicker.val()); } else { - this.setSecondaryColor(inputPicker.val()); + this.setSecondaryColor_(inputPicker.val()); } }; @@ -64,41 +60,30 @@ ns.PaletteController.prototype.onColorSelected_ = function(args, evt, color) { var inputPicker = $(evt.target); if (args.isPrimary) { - this.setPrimaryColor(color); + this.setPrimaryColor_(color); } else { - this.setSecondaryColor(color); + this.setSecondaryColor_(color); } }; - ns.PaletteController.prototype.setPrimaryColor = function (color) { - this.primaryColor = color; + ns.PaletteController.prototype.setPrimaryColor_ = function (color) { this.updateColorPicker_(color, $('#color-picker')); $.publish(Events.PRIMARY_COLOR_SELECTED, [color]); }; - ns.PaletteController.prototype.setSecondaryColor = function (color) { - this.secondaryColor = color; + ns.PaletteController.prototype.setSecondaryColor_ = function (color) { this.updateColorPicker_(color, $('#secondary-color-picker')); $.publish(Events.SECONDARY_COLOR_SELECTED, [color]); }; - ns.PaletteController.prototype.getPrimaryColor = function () { - return this.primaryColor; - }; - - ns.PaletteController.prototype.getSecondaryColor = function () { - return this.secondaryColor; - }; - ns.PaletteController.prototype.swapColors = function () { - var primaryColor = this.getPrimaryColor(); - this.setPrimaryColor(this.getSecondaryColor()); - this.setSecondaryColor(primaryColor); + var primaryColor = pskl.app.selectedColorsService.getPrimaryColor(); + this.setPrimaryColor_(pskl.app.selectedColorsService.getSecondaryColor()); + this.setSecondaryColor_(primaryColor); }; ns.PaletteController.prototype.resetColors = function () { - this.setPrimaryColor(Constants.DEFAULT_PEN_COLOR); - this.setSecondaryColor(Constants.TRANSPARENT_COLOR); + pskl.app.selectedColorsService.reset(); }; /** diff --git a/src/js/controller/PalettesListController.js b/src/js/controller/PalettesListController.js index 5f33279..c31e521 100644 --- a/src/js/controller/PalettesListController.js +++ b/src/js/controller/PalettesListController.js @@ -10,10 +10,9 @@ // I apologize to my future self for this one. var NO_SCROLL_MAX_COLORS = 20; - ns.PalettesListController = function (paletteController, usedColorService) { + ns.PalettesListController = function (usedColorService) { this.usedColorService = usedColorService; this.paletteService = pskl.app.paletteService; - this.paletteController = paletteController; }; ns.PalettesListController.prototype.init = function () { @@ -184,13 +183,13 @@ this.removeClass_(PRIMARY_COLOR_CLASSNAME); this.removeClass_(SECONDARY_COLOR_CLASSNAME); - var colorContainer = this.getColorContainer_(this.paletteController.getSecondaryColor()); + var colorContainer = this.getColorContainer_(pskl.app.selectedColorsService.getSecondaryColor()); if (colorContainer) { colorContainer.classList.remove(PRIMARY_COLOR_CLASSNAME); colorContainer.classList.add(SECONDARY_COLOR_CLASSNAME); } - colorContainer = this.getColorContainer_(this.paletteController.getPrimaryColor()); + colorContainer = this.getColorContainer_(pskl.app.selectedColorsService.getPrimaryColor()); if (colorContainer) { colorContainer.classList.remove(SECONDARY_COLOR_CLASSNAME); colorContainer.classList.add(PRIMARY_COLOR_CLASSNAME); diff --git a/src/js/devtools/DrawingTestRecorder.js b/src/js/devtools/DrawingTestRecorder.js index 0b40e24..5b6c312 100644 --- a/src/js/devtools/DrawingTestRecorder.js +++ b/src/js/devtools/DrawingTestRecorder.js @@ -45,8 +45,8 @@ width : this.piskelController.getWidth(), height : this.piskelController.getHeight() }, - primaryColor : pskl.app.paletteController.getPrimaryColor(), - secondaryColor : pskl.app.paletteController.getSecondaryColor(), + primaryColor : pskl.app.selectedColorsService.getPrimaryColor(), + secondaryColor : pskl.app.selectedColorsService.getSecondaryColor(), selectedTool : pskl.app.toolController.currentSelectedTool.instance.toolId }; }; diff --git a/src/js/service/SelectedColorsService.js b/src/js/service/SelectedColorsService.js index 2e7d46c..fa049f1 100644 --- a/src/js/service/SelectedColorsService.js +++ b/src/js/service/SelectedColorsService.js @@ -2,8 +2,7 @@ var ns = $.namespace('pskl.service'); ns.SelectedColorsService = function () { - this.primaryColor_ = Constants.DEFAULT_PEN_COLOR; - this.secondaryColor_ = Constants.TRANSPARENT_COLOR; + this.reset(); }; ns.SelectedColorsService.prototype.init = function () { @@ -11,11 +10,17 @@ $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onSecondaryColorUpdate_.bind(this)); }; - ns.SelectedColorsService.prototype.getColors = function () { - if (this.primaryColor_ === null || this.secondaryColor_ === null) { - throw 'SelectedColorsService not properly initialized.'; - } - return [this.primaryColor_, this.secondaryColor_]; + ns.SelectedColorsService.prototype.getPrimaryColor = function () { + return this.primaryColor_; + }; + + ns.SelectedColorsService.prototype.getSecondaryColor = function () { + return this.secondaryColor_; + }; + + ns.SelectedColorsService.prototype.reset = function () { + this.primaryColor_ = Constants.DEFAULT_PEN_COLOR; + this.secondaryColor_ = Constants.TRANSPARENT_COLOR; }; ns.SelectedColorsService.prototype.onPrimaryColorUpdate_ = function (evt, color) { diff --git a/src/js/tools/drawing/DitheringTool.js b/src/js/tools/drawing/DitheringTool.js index 505cf86..ceedee6 100644 --- a/src/js/tools/drawing/DitheringTool.js +++ b/src/js/tools/drawing/DitheringTool.js @@ -29,8 +29,9 @@ var usePrimaryColor = (col + row) % 2; usePrimaryColor = this.invertColors_ ? !usePrimaryColor : usePrimaryColor; - var selectedColors = pskl.app.selectedColorsService.getColors(); - var ditheringColor = usePrimaryColor ? selectedColors[0] : selectedColors[1]; + var ditheringColor = usePrimaryColor ? + pskl.app.selectedColorsService.getPrimaryColor() : + pskl.app.selectedColorsService.getSecondaryColor(); this.superclass.applyToolAt.call(this, col, row, ditheringColor, frame, overlay, event); }; })(); From 3209c50304b1037441541c04e72b4acc919ee05c Mon Sep 17 00:00:00 2001 From: grosbouddha Date: Wed, 16 Sep 2015 20:27:51 +0200 Subject: [PATCH 03/13] Create MouseStateService and integrate --- src/js/app.js | 3 ++ src/js/controller/DrawingController.js | 19 +++---------- src/js/service/MouseStateService.js | 39 ++++++++++++++++++++++++++ src/piskel-script-list.js | 1 + 4 files changed, 47 insertions(+), 15 deletions(-) create mode 100644 src/js/service/MouseStateService.js diff --git a/src/js/app.js b/src/js/app.js index 249acc6..ef4adb2 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -41,6 +41,9 @@ this.selectedColorsService = new pskl.service.SelectedColorsService(); this.selectedColorsService.init(); + this.mouseStateService = new pskl.service.MouseStateService(); + this.mouseStateService.init(); + this.paletteController = new pskl.controller.PaletteController(); this.paletteController.init(); diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index 246df20..18d5296 100644 --- a/src/js/controller/DrawingController.js +++ b/src/js/controller/DrawingController.js @@ -47,9 +47,6 @@ this.isClicked = false; this.previousMousemoveTime = 0; this.currentToolBehavior = null; - - // State of clicked button (need to be stateful here, see comment in getCurrentColor_) - this.currentMouseButton_ = Constants.LEFT_BUTTON; }; ns.DrawingController.prototype.init = function () { @@ -145,7 +142,6 @@ var coords = this.getSpriteCoordinates(event.clientX, event.clientY); this.isClicked = true; - this.setCurrentButton(event); if (event.button === Constants.MIDDLE_BUTTON) { this.dragHandler.startDrag(event.clientX, event.clientY); @@ -191,12 +187,10 @@ var currentFrame = this.piskelController.getCurrentFrame(); if (this.isClicked) { - if (this.currentMouseButton_ == Constants.MIDDLE_BUTTON) { + if (pskl.app.mouseStateService.isMiddleButtonPressed()) { this.dragHandler.updateDrag(x, y); } else { $.publish(Events.MOUSE_EVENT, [event, this]); - // Warning : do not call setCurrentButton here - // mousemove do not have the correct mouse button information on all browsers this.currentToolBehavior.moveToolAt( coords.x | 0, coords.y | 0, @@ -269,9 +263,8 @@ // of the drawing canvas. this.isClicked = false; - this.setCurrentButton(event); - if (event.button === Constants.MIDDLE_BUTTON) { + if (pskl.app.mouseStateService.isMiddleButtonPressed()) { if (this.dragHandler.isDragging()) { this.dragHandler.stopDrag(); } else if (frame.containsPixel(coords.x, coords.y)) { @@ -306,10 +299,6 @@ return this.renderer.reverseCoordinates(spriteX, spriteY); }; - ns.DrawingController.prototype.setCurrentButton = function (event) { - this.currentMouseButton_ = event.button; - }; - /** * @private */ @@ -320,9 +309,9 @@ // on a mouse move event // This always matches a LEFT mouse button which is __really__ not helpful - if (this.currentMouseButton_ == Constants.RIGHT_BUTTON) { + if (pskl.app.mouseStateService.isRightButtonPressed()) { return pskl.app.selectedColorsService.getSecondaryColor(); - } else if (this.currentMouseButton_ == Constants.LEFT_BUTTON) { + } else if (pskl.app.mouseStateService.isLeftButtonPressed()) { return pskl.app.selectedColorsService.getPrimaryColor(); } else { return Constants.DEFAULT_PEN_COLOR; diff --git a/src/js/service/MouseStateService.js b/src/js/service/MouseStateService.js new file mode 100644 index 0000000..4325319 --- /dev/null +++ b/src/js/service/MouseStateService.js @@ -0,0 +1,39 @@ +(function () { + var ns = $.namespace('pskl.service'); + + var BUTTON_UNSET = null; + + ns.MouseStateService = function () { + this.lastButtonPressed_ = BUTTON_UNSET; + }; + + ns.MouseStateService.prototype.init = function () { + $.subscribe(Events.MOUSE_EVENT, this.onMouseEvent_.bind(this)); + }; + + ns.MouseStateService.prototype.isLeftButtonPressed = function () { + return this.isMouseButtonPressed_(Constants.LEFT_BUTTON); + }; + + ns.MouseStateService.prototype.isRightButtonPressed = function () { + return this.isMouseButtonPressed_(Constants.RIGHT_BUTTON); + }; + + ns.MouseStateService.prototype.isMiddleButtonPressed = function () { + return this.isMouseButtonPressed_(Constants.MIDDLE_BUTTON); + }; + + ns.MouseStateService.prototype.isMouseButtonPressed_ = function (mouseButton) { + return this.lastButtonPressed_ != BUTTON_UNSET && this.lastButtonPressed_ == mouseButton; + } + + ns.MouseStateService.prototype.onMouseEvent_ = function(evt, mouseEvent) { + if (mouseEvent.type == 'mousedown') { + this.lastButtonPressed_ = mouseEvent.button; + } else if (mouseEvent.type == 'mouseup') { + this.lastButtonPressed_ = BUTTON_UNSET; + } + // Warning : do not call setCurrentButton here + // mousemove do not have the correct mouse button information on all browsers + }; +})(); \ No newline at end of file diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index f478e0d..627c623 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -162,6 +162,7 @@ "js/service/CurrentColorsService.js", "js/service/FileDropperService.js", "js/service/SelectedColorsService.js", + "js/service/MouseStateService.js", // Tools "js/tools/ToolsHelper.js", From e9c99a241fd39d9b620928d6d8700d77345a3c7b Mon Sep 17 00:00:00 2001 From: grosbouddha Date: Wed, 16 Sep 2015 22:55:33 +0200 Subject: [PATCH 04/13] Migrate tools to BaseTool#getToolColor --- src/js/controller/DrawingController.js | 2 +- src/js/tools/drawing/BaseTool.js | 7 +++ src/js/tools/drawing/ColorPicker.js | 2 +- src/js/tools/drawing/ColorSwap.js | 4 +- src/js/tools/drawing/DitheringTool.js | 32 ++++++------- src/js/tools/drawing/Eraser.js | 10 +--- src/js/tools/drawing/Lighten.js | 47 +++++++++++-------- src/js/tools/drawing/Move.js | 6 +-- src/js/tools/drawing/PaintBucket.js | 3 +- src/js/tools/drawing/Rectangle.js | 4 +- src/js/tools/drawing/ShapeTool.js | 10 ++-- src/js/tools/drawing/SimplePen.js | 14 +++--- src/js/tools/drawing/Stroke.js | 10 ++-- src/js/tools/drawing/VerticalMirrorPen.js | 10 ++-- src/js/tools/drawing/selection/BaseSelect.js | 34 +++++++------- .../drawing/selection/RectangleSelect.js | 6 +-- src/js/tools/drawing/selection/ShapeSelect.js | 2 +- 17 files changed, 109 insertions(+), 94 deletions(-) diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index 18d5296..6081203 100644 --- a/src/js/controller/DrawingController.js +++ b/src/js/controller/DrawingController.js @@ -256,7 +256,6 @@ var frame = this.piskelController.getCurrentFrame(); var coords = this.getSpriteCoordinates(event.clientX, event.clientY); if (this.isClicked) { - $.publish(Events.MOUSE_EVENT, [event, this]); // A mouse button was clicked on the drawing canvas before this mouseup event, // the user was probably drawing on the canvas. // Note: The mousemove movement (and the mouseup) may end up outside @@ -282,6 +281,7 @@ $.publish(Events.TOOL_RELEASED); } + $.publish(Events.MOUSE_EVENT, [event, this]); } }; diff --git a/src/js/tools/drawing/BaseTool.js b/src/js/tools/drawing/BaseTool.js index 39c18b2..f1a82ef 100644 --- a/src/js/tools/drawing/BaseTool.js +++ b/src/js/tools/drawing/BaseTool.js @@ -19,6 +19,13 @@ ns.BaseTool.prototype.replay = Constants.ABSTRACT_FUNCTION; + ns.BaseTool.prototype.getToolColor = function() { + if (pskl.app.mouseStateService.isRightButtonPressed()) { + return pskl.app.selectedColorsService.getSecondaryColor(); + } + return pskl.app.selectedColorsService.getPrimaryColor(); + }; + ns.BaseTool.prototype.moveUnactiveToolAt = function (col, row, color, frame, overlay, event) { if (overlay.containsPixel(col, row)) { this.updateHighlightedPixel(frame, overlay, col, row); diff --git a/src/js/tools/drawing/ColorPicker.js b/src/js/tools/drawing/ColorPicker.js index 468aeb2..87385c9 100644 --- a/src/js/tools/drawing/ColorPicker.js +++ b/src/js/tools/drawing/ColorPicker.js @@ -16,7 +16,7 @@ /** * @override */ - ns.ColorPicker.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { + ns.ColorPicker.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { if (frame.containsPixel(col, row)) { var sampledColor = frame.getPixel(col, row); if (event.button == Constants.LEFT_BUTTON) { diff --git a/src/js/tools/drawing/ColorSwap.js b/src/js/tools/drawing/ColorSwap.js index a574910..dcc4a03 100644 --- a/src/js/tools/drawing/ColorSwap.js +++ b/src/js/tools/drawing/ColorSwap.js @@ -21,14 +21,14 @@ /** * @override */ - ns.ColorSwap.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { + ns.ColorSwap.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { if (frame.containsPixel(col, row)) { var sampledColor = frame.getPixel(col, row); var allLayers = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey; var allFrames = event.shiftKey; - this.swapColors(sampledColor, color, allLayers, allFrames); + this.swapColors(sampledColor, this.getToolColor(), allLayers, allFrames); $.publish(Events.PISKEL_SAVE_STATE, { type : pskl.service.HistoryService.SNAPSHOT diff --git a/src/js/tools/drawing/DitheringTool.js b/src/js/tools/drawing/DitheringTool.js index ceedee6..90caa8e 100644 --- a/src/js/tools/drawing/DitheringTool.js +++ b/src/js/tools/drawing/DitheringTool.js @@ -16,22 +16,22 @@ /** * @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; - usePrimaryColor = this.invertColors_ ? !usePrimaryColor : usePrimaryColor; - + ns.DitheringTool.prototype.getToolColor = function() { + var usePrimaryColor = (this.col_ + this.row_) % 2; + usePrimaryColor = + pskl.app.mouseStateService.isRightButtonPressed() ? !usePrimaryColor : usePrimaryColor; var ditheringColor = usePrimaryColor ? - pskl.app.selectedColorsService.getPrimaryColor() : - pskl.app.selectedColorsService.getSecondaryColor(); - this.superclass.applyToolAt.call(this, col, row, ditheringColor, frame, overlay, event); + pskl.app.selectedColorsService.getPrimaryColor() : + pskl.app.selectedColorsService.getSecondaryColor(); + return ditheringColor; + }; + + /** + * @override + */ + ns.DitheringTool.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { + this.col_ = col; + this.row_ = row; + this.superclass.applyToolAt.call(this, col, row, color_legacy, frame, overlay, event); }; })(); diff --git a/src/js/tools/drawing/Eraser.js b/src/js/tools/drawing/Eraser.js index 148c1c5..977f830 100644 --- a/src/js/tools/drawing/Eraser.js +++ b/src/js/tools/drawing/Eraser.js @@ -18,13 +18,7 @@ /** * @override */ - ns.Eraser.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { - this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, frame, overlay, event); - }; - /** - * @override - */ - ns.Eraser.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) { - this.superclass.releaseToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, frame, overlay, event); + ns.Eraser.prototype.getToolColor = function() { + return Constants.TRANSPARENT_COLOR; }; })(); diff --git a/src/js/tools/drawing/Lighten.js b/src/js/tools/drawing/Lighten.js index 8b55ff5..4553bf0 100644 --- a/src/js/tools/drawing/Lighten.js +++ b/src/js/tools/drawing/Lighten.js @@ -1,5 +1,5 @@ /** - * @provide pskl.tools.drawing.Eraser + * @provide pskl.tools.drawing.Lighten * * @require Constants * @require pskl.utils @@ -41,33 +41,42 @@ /** * @Override */ - ns.Lighten.prototype.applyToolAt = function(col, row, color, frame, overlay, event, mouseButton) { - var overlayColor = overlay.getPixel(col, row); - var frameColor = frame.getPixel(col, row); - var pixelColor = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor; + ns.Lighten.prototype.getToolColor = function() { + var color = this.superclass.getToolColor.call(); - var isDarken = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey; - var isSinglePass = event.shiftKey; - - var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR; - var usedPixels = isDarken ? this.usedPixels_.darken : this.usedPixels_.lighten; - var key = col + '-' + row; - - var doNotModify = isTransparent || (isSinglePass && usedPixels[key]); + var usedPixels = this.isDarken_ ? this.usedPixels_.darken : this.usedPixels_.lighten; + var key = this.col_ + '-' + this.row_; + var doNotModify = this.isTransparent_ || (this.isSinglePass_ && usedPixels[key]); if (doNotModify) { - color = window.tinycolor(pixelColor); + color = window.tinycolor(this.pixelColor_); } else { - var step = isSinglePass ? DEFAULT_STEP * 2 : DEFAULT_STEP; - if (isDarken) { - color = window.tinycolor.darken(pixelColor, step); + var step = this.isSinglePass_ ? DEFAULT_STEP * 2 : DEFAULT_STEP; + if (this.isDarken_) { + color = window.tinycolor.darken(this.pixelColor_, step); } else { - color = window.tinycolor.lighten(pixelColor, step); + color = window.tinycolor.lighten(this.pixelColor_, step); } } if (color) { usedPixels[key] = true; - this.superclass.applyToolAt.call(this, col, row, color.toRgbString(), frame, overlay, event); } + return color.toRgbString(); }; + /** + * @Override + */ + ns.Lighten.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event, mouseButton) { + var overlayColor = overlay.getPixel(col, row); + var frameColor = frame.getPixel(col, row); + + this.col_ = col; + this.row_ = row; + this.pixelColor_ = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor; + this.isDarken_ = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;; + this.isTransparent_ = this.pixelColor_ === Constants.TRANSPARENT_COLOR; + this.isSinglePass_ = event.shiftKey; + + this.superclass.applyToolAt.call(this, col, row, color_legacy, frame, overlay, event); + }; })(); diff --git a/src/js/tools/drawing/Move.js b/src/js/tools/drawing/Move.js index f63655f..663432f 100644 --- a/src/js/tools/drawing/Move.js +++ b/src/js/tools/drawing/Move.js @@ -28,14 +28,14 @@ /** * @override */ - ns.Move.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { + ns.Move.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { this.startCol = col; this.startRow = row; this.currentFrame = frame; this.currentFrameClone = frame.clone(); }; - ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay, event) { + ns.Move.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) { var colDiff = col - this.startCol; var rowDiff = row - this.startRow; this.shiftFrame(colDiff, rowDiff, frame, this.currentFrameClone, event); @@ -66,7 +66,7 @@ /** * @override */ - ns.Move.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) { + ns.Move.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) { var colDiff = col - this.startCol; var rowDiff = row - this.startRow; diff --git a/src/js/tools/drawing/PaintBucket.js b/src/js/tools/drawing/PaintBucket.js index 894ce52..12fb177 100644 --- a/src/js/tools/drawing/PaintBucket.js +++ b/src/js/tools/drawing/PaintBucket.js @@ -16,7 +16,8 @@ /** * @override */ - ns.PaintBucket.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { + ns.PaintBucket.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { + var color = this.getToolColor(); pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, col, row, color); this.raiseSaveStateEvent({ diff --git a/src/js/tools/drawing/Rectangle.js b/src/js/tools/drawing/Rectangle.js index 9415238..24e7c4f 100644 --- a/src/js/tools/drawing/Rectangle.js +++ b/src/js/tools/drawing/Rectangle.js @@ -16,11 +16,11 @@ pskl.utils.inherit(ns.Rectangle, ns.ShapeTool); - ns.Rectangle.prototype.draw_ = function (col, row, color, targetFrame) { + ns.Rectangle.prototype.draw_ = function (col, row, color_legacy, targetFrame) { var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row); for (var i = 0 ; i < strokePoints.length ; i++) { // Change model: - targetFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color); + targetFrame.setPixel(strokePoints[i].col, strokePoints[i].row, this.getToolColor()); } }; })(); diff --git a/src/js/tools/drawing/ShapeTool.js b/src/js/tools/drawing/ShapeTool.js index 7efff67..1e8092e 100644 --- a/src/js/tools/drawing/ShapeTool.js +++ b/src/js/tools/drawing/ShapeTool.js @@ -19,20 +19,21 @@ /** * @override */ - ns.ShapeTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { + ns.ShapeTool.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { $.publish(Events.DRAG_START, [col, row]); this.startCol = col; this.startRow = row; // Drawing the first point of the rectangle in the fake overlay canvas: - overlay.setPixel(col, row, color); + overlay.setPixel(col, row, this.getToolColor()); }; - ns.ShapeTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) { + ns.ShapeTool.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) { var coords = this.getCoordinates_(col, row, event); $.publish(Events.CURSOR_MOVED, [coords.col, coords.row]); overlay.clear(); + var color = this.getToolColor(); if (color == Constants.TRANSPARENT_COLOR) { color = Constants.SELECTION_TRANSPARENT_COLOR; } @@ -44,9 +45,10 @@ /** * @override */ - ns.ShapeTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) { + ns.ShapeTool.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) { overlay.clear(); var coords = this.getCoordinates_(col, row, event); + var color = this.getToolColor(); this.draw_(coords.col, coords.row, color, frame); $.publish(Events.DRAG_END, [coords.col, coords.row]); diff --git a/src/js/tools/drawing/SimplePen.js b/src/js/tools/drawing/SimplePen.js index ef49841..35428c6 100644 --- a/src/js/tools/drawing/SimplePen.js +++ b/src/js/tools/drawing/SimplePen.js @@ -21,10 +21,10 @@ /** * @override */ - ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { + ns.SimplePen.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { this.previousCol = col; this.previousRow = row; - + var color = this.getToolColor(); overlay.setPixel(col, row, color); if (color === Constants.TRANSPARENT_COLOR) { @@ -40,7 +40,7 @@ /** * @override */ - ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay, event) { + ns.SimplePen.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) { if ((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) { // The pen movement is too fast for the mousemove frequency, there is a gap between the // current point and the previously drawn one. @@ -48,24 +48,24 @@ var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow); for (var i = 0, l = interpolatedPixels.length ; i < l ; i++) { var coords = interpolatedPixels[i]; - this.applyToolAt(coords.col, coords.row, color, frame, overlay, event); + this.applyToolAt(coords.col, coords.row, color_legacy, frame, overlay, event); } } else { - this.applyToolAt(col, row, color, frame, overlay, event); + this.applyToolAt(col, row, color_legacy, frame, overlay, event); } this.previousCol = col; this.previousRow = row; }; - ns.SimplePen.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) { + ns.SimplePen.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) { // apply on real frame this.setPixelsToFrame_(frame, this.pixels); // save state this.raiseSaveStateEvent({ pixels : this.pixels.slice(0), - color : color + color : this.getToolColor() }); // reset diff --git a/src/js/tools/drawing/Stroke.js b/src/js/tools/drawing/Stroke.js index d5d3f47..af8901d 100644 --- a/src/js/tools/drawing/Stroke.js +++ b/src/js/tools/drawing/Stroke.js @@ -20,7 +20,7 @@ /** * @override */ - ns.Stroke.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { + ns.Stroke.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { this.startCol = col; this.startRow = row; @@ -33,10 +33,10 @@ // The fake canvas where we will draw the preview of the stroke: // Drawing the first point of the stroke in the fake overlay canvas: - overlay.setPixel(col, row, color); + overlay.setPixel(col, row, this.getToolColor()); }; - ns.Stroke.prototype.moveToolAt = function(col, row, color, frame, overlay, event) { + ns.Stroke.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) { overlay.clear(); // When the user moussemove (before releasing), we dynamically compute the @@ -44,6 +44,7 @@ var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row); // Drawing current stroke: + var color = this.getToolColor(); for (var i = 0; i < strokePoints.length; i++) { if (color == Constants.TRANSPARENT_COLOR) { @@ -62,7 +63,8 @@ /** * @override */ - ns.Stroke.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) { + ns.Stroke.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) { + var color = this.getToolColor(); // 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); diff --git a/src/js/tools/drawing/VerticalMirrorPen.js b/src/js/tools/drawing/VerticalMirrorPen.js index 55ac798..f96a5c0 100644 --- a/src/js/tools/drawing/VerticalMirrorPen.js +++ b/src/js/tools/drawing/VerticalMirrorPen.js @@ -28,8 +28,8 @@ /** * @override */ - ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { - this.superclass.applyToolAt.call(this, col, row, color, frame, overlay); + ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { + this.superclass.applyToolAt.call(this, col, row, color_legacy, frame, overlay); this.backupPreviousPositions_(); var mirroredCol = this.getSymmetricCol_(col, frame); @@ -37,15 +37,15 @@ var hasCtrlKey = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey; if (!hasCtrlKey) { - this.superclass.applyToolAt.call(this, mirroredCol, row, color, frame, overlay); + this.superclass.applyToolAt.call(this, mirroredCol, row, color_legacy, frame, overlay); } if (event.shiftKey || hasCtrlKey) { - this.superclass.applyToolAt.call(this, col, mirroredRow, color, frame, overlay); + this.superclass.applyToolAt.call(this, col, mirroredRow, color_legacy, frame, overlay); } if (event.shiftKey) { - this.superclass.applyToolAt.call(this, mirroredCol, mirroredRow, color, frame, overlay); + this.superclass.applyToolAt.call(this, mirroredCol, mirroredRow, color_legacy, frame, overlay); } this.restorePreviousPositions_(); diff --git a/src/js/tools/drawing/selection/BaseSelect.js b/src/js/tools/drawing/selection/BaseSelect.js index 644423d..10798c9 100644 --- a/src/js/tools/drawing/selection/BaseSelect.js +++ b/src/js/tools/drawing/selection/BaseSelect.js @@ -28,7 +28,7 @@ /** * @override */ - ns.BaseSelect.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { + ns.BaseSelect.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { this.startCol = col; this.startRow = row; @@ -42,32 +42,32 @@ // mode to allow to move the selection by drag'n dropping it. if (this.isInSelection(col, row)) { this.mode = 'moveSelection'; - this.onSelectionDragStart_(col, row, color, frame, overlay); + this.onSelectionDragStart_(col, row, color_legacy, frame, overlay); } else { this.mode = 'select'; - this.onSelectStart_(col, row, color, frame, overlay); + this.onSelectStart_(col, row, color_legacy, frame, overlay); } }; /** * @override */ - ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay, event) { + ns.BaseSelect.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) { if (this.mode == 'select') { - this.onSelect_(col, row, color, frame, overlay); + this.onSelect_(col, row, color_legacy, frame, overlay); } else if (this.mode == 'moveSelection') { - this.onSelectionDrag_(col, row, color, frame, overlay); + this.onSelectionDrag_(col, row, color_legacy, frame, overlay); } }; /** * @override */ - ns.BaseSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) { + ns.BaseSelect.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) { if (this.mode == 'select') { - this.onSelectEnd_(col, row, color, frame, overlay); + this.onSelectEnd_(col, row, color_legacy, frame, overlay); } else if (this.mode == 'moveSelection') { - this.onSelectionDragEnd_(col, row, color, frame, overlay); + this.onSelectionDragEnd_(col, row, color_legacy, frame, overlay); } }; @@ -76,7 +76,7 @@ * instead of the 'select' one. It indicates that we can move the selection by dragndroping it. * @override */ - ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay, event) { + ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color_legacy, frame, overlay, event) { if (overlay.containsPixel(col, row)) { if (this.isInSelection(col, row)) { // We're hovering the selection, show the move tool: @@ -124,18 +124,18 @@ // The list of callbacks to implement by specialized tools to implement the selection creation behavior. /** @protected */ - ns.BaseSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {}; + ns.BaseSelect.prototype.onSelectStart_ = function (col, row, color_legacy, frame, overlay) {}; /** @protected */ - ns.BaseSelect.prototype.onSelect_ = function (col, row, color, frame, overlay) {}; + ns.BaseSelect.prototype.onSelect_ = function (col, row, color_legacy, frame, overlay) {}; /** @protected */ - ns.BaseSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) {}; + ns.BaseSelect.prototype.onSelectEnd_ = function (col, row, color_legacy, frame, overlay) {}; // The list of callbacks that define the drag'n drop behavior of the selection. /** @private */ - ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, color, frame, overlay) {}; + ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, color_legacy, frame, overlay) {}; /** @private */ - ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, color, frame, overlay) { + ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, color_legacy, frame, overlay) { var deltaCol = col - this.lastCol; var deltaRow = row - this.lastRow; @@ -152,7 +152,7 @@ }; /** @private */ - ns.BaseSelect.prototype.onSelectionDragEnd_ = function (col, row, color, frame, overlay) { - this.onSelectionDrag_(col, row, color, frame, overlay); + ns.BaseSelect.prototype.onSelectionDragEnd_ = function (col, row, color_legacy, frame, overlay) { + this.onSelectionDrag_(col, row, color_legacy, frame, overlay); }; })(); diff --git a/src/js/tools/drawing/selection/RectangleSelect.js b/src/js/tools/drawing/selection/RectangleSelect.js index 42146af..90ea01d 100644 --- a/src/js/tools/drawing/selection/RectangleSelect.js +++ b/src/js/tools/drawing/selection/RectangleSelect.js @@ -49,7 +49,7 @@ * the current mouse coordiinate in sprite. * @override */ - ns.RectangleSelect.prototype.onSelect_ = function (col, row, color, frame, overlay) { + ns.RectangleSelect.prototype.onSelect_ = function (col, row, color_legacy, frame, overlay) { if (!this.hasSelection && (this.selectionOrigin_.col !== col || this.selectionOrigin_.row !== row)) { this.startSelection_(col, row); } @@ -63,9 +63,9 @@ } }; - ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) { + ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color_legacy, frame, overlay) { if (this.hasSelection) { - this.onSelect_(col, row, color, frame, overlay); + this.onSelect_(col, row, color_legacy, frame, overlay); $.publish(Events.DRAG_END, [col, row]); } }; diff --git a/src/js/tools/drawing/selection/ShapeSelect.js b/src/js/tools/drawing/selection/ShapeSelect.js index b9712e1..5e61bc3 100644 --- a/src/js/tools/drawing/selection/ShapeSelect.js +++ b/src/js/tools/drawing/selection/ShapeSelect.js @@ -21,7 +21,7 @@ * So we jsut need to implement onSelectStart_ (no need for onSelect_ & onSelectEnd_) * @override */ - ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) { + ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, color_legacy, frame, overlay) { // Clean previous selection: $.publish(Events.SELECTION_DISMISSED); overlay.clear(); From 8faa6db4c01185a11033a588614a24a9a4af283c Mon Sep 17 00:00:00 2001 From: grosbouddha Date: Wed, 16 Sep 2015 23:36:55 +0200 Subject: [PATCH 05/13] Fix SelectedColorsService tests --- test/js/service/SelectedColorsServiceTest.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/test/js/service/SelectedColorsServiceTest.js b/test/js/service/SelectedColorsServiceTest.js index cb6f558..fdbd6d8 100644 --- a/test/js/service/SelectedColorsServiceTest.js +++ b/test/js/service/SelectedColorsServiceTest.js @@ -3,10 +3,8 @@ describe("SelectedColorsService test suite", function() { it("returns the default selected colors initially", function() { var service = new pskl.service.SelectedColorsService(); - var defaultSelectedColors = service.getColors(); - expect(defaultSelectedColors.length).toBe(2); - expect(defaultSelectedColors[0]).toBe(Constants.DEFAULT_PEN_COLOR); - expect(defaultSelectedColors[1]).toBe(Constants.TRANSPARENT_COLOR); + expect(service.getPrimaryColor()).toBe(Constants.DEFAULT_PEN_COLOR); + expect(service.getSecondaryColor()).toBe(Constants.TRANSPARENT_COLOR); }); it("reacts to PRIMARY_COLOR_SELECTED event", function() { @@ -16,10 +14,8 @@ describe("SelectedColorsService test suite", function() { var expectedColor = "#123456"; $.publish(Events.PRIMARY_COLOR_SELECTED, [expectedColor]); - var defaultSelectedColors = service.getColors(); - expect(defaultSelectedColors.length).toBe(2); - expect(defaultSelectedColors[0]).toBe(expectedColor); - expect(defaultSelectedColors[1]).toBe(Constants.TRANSPARENT_COLOR); + expect(service.getPrimaryColor()).toBe(expectedColor); + expect(service.getSecondaryColor()).toBe(Constants.TRANSPARENT_COLOR); }); it("reacts to SECONDARY_COLOR_SELECTED event", function() { @@ -29,9 +25,7 @@ describe("SelectedColorsService test suite", function() { var expectedColor = "#123456"; $.publish(Events.SECONDARY_COLOR_SELECTED, [expectedColor]); - var defaultSelectedColors = service.getColors(); - expect(defaultSelectedColors.length).toBe(2); - expect(defaultSelectedColors[0]).toBe(Constants.DEFAULT_PEN_COLOR); - expect(defaultSelectedColors[1]).toBe(expectedColor); + expect(service.getPrimaryColor()).toBe(Constants.DEFAULT_PEN_COLOR); + expect(service.getSecondaryColor()).toBe(expectedColor); }); }); \ No newline at end of file From 5a469202e964ab527abfe4595d38d2ca0b1266f0 Mon Sep 17 00:00:00 2001 From: grosbouddha Date: Wed, 16 Sep 2015 23:40:44 +0200 Subject: [PATCH 06/13] Remove color argument from BaseTool/BaseSelect interfaces --- src/js/controller/DrawingController.js | 23 ------------- src/js/service/MouseStateService.js | 12 ++++--- src/js/tools/drawing/BaseTool.js | 8 ++--- src/js/tools/drawing/Circle.js | 5 ++- src/js/tools/drawing/ColorPicker.js | 2 +- src/js/tools/drawing/ColorSwap.js | 2 +- src/js/tools/drawing/DitheringTool.js | 4 +-- src/js/tools/drawing/Lighten.js | 6 ++-- src/js/tools/drawing/Move.js | 6 ++-- src/js/tools/drawing/PaintBucket.js | 2 +- src/js/tools/drawing/Rectangle.js | 5 ++- src/js/tools/drawing/ShapeTool.js | 16 ++++----- src/js/tools/drawing/SimplePen.js | 12 +++---- src/js/tools/drawing/Stroke.js | 6 ++-- src/js/tools/drawing/VerticalMirrorPen.js | 10 +++--- src/js/tools/drawing/selection/BaseSelect.js | 34 +++++++++---------- .../drawing/selection/RectangleSelect.js | 10 +++--- src/js/tools/drawing/selection/ShapeSelect.js | 2 +- 18 files changed, 76 insertions(+), 89 deletions(-) diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index 6081203..3e85220 100644 --- a/src/js/controller/DrawingController.js +++ b/src/js/controller/DrawingController.js @@ -151,7 +151,6 @@ this.currentToolBehavior.applyToolAt( coords.x, coords.y, - this.getCurrentColor_(), frame, this.overlayFrame, event @@ -194,7 +193,6 @@ this.currentToolBehavior.moveToolAt( coords.x | 0, coords.y | 0, - this.getCurrentColor_(), currentFrame, this.overlayFrame, event @@ -204,7 +202,6 @@ this.currentToolBehavior.moveUnactiveToolAt( coords.x, coords.y, - this.getCurrentColor_(), currentFrame, this.overlayFrame, event @@ -273,7 +270,6 @@ this.currentToolBehavior.releaseToolAt( coords.x, coords.y, - this.getCurrentColor_(), this.piskelController.getCurrentFrame(), this.overlayFrame, event @@ -299,25 +295,6 @@ return this.renderer.reverseCoordinates(spriteX, spriteY); }; - /** - * @private - */ - ns.DrawingController.prototype.getCurrentColor_ = function () { - // WARNING : Do not rely on the current event to get the current color! - // It might seem like a good idea, and works perfectly fine on Chrome - // Sadly Firefox and IE found clever, for some reason, to set event.button to 0 - // on a mouse move event - // This always matches a LEFT mouse button which is __really__ not helpful - - if (pskl.app.mouseStateService.isRightButtonPressed()) { - return pskl.app.selectedColorsService.getSecondaryColor(); - } else if (pskl.app.mouseStateService.isLeftButtonPressed()) { - return pskl.app.selectedColorsService.getPrimaryColor(); - } else { - return Constants.DEFAULT_PEN_COLOR; - } - }; - /** * @private */ diff --git a/src/js/service/MouseStateService.js b/src/js/service/MouseStateService.js index 4325319..f83f390 100644 --- a/src/js/service/MouseStateService.js +++ b/src/js/service/MouseStateService.js @@ -3,6 +3,12 @@ var BUTTON_UNSET = null; + /** + * This service exists mostly due to a FF/IE bug. + * For mousemove events, the button type is set to 0 (e.g. left button type) whatever was the + * pressed button on mousedown. We use this service to cache the button type value on mousedown + * and make it available to mousemove events. + */ ns.MouseStateService = function () { this.lastButtonPressed_ = BUTTON_UNSET; }; @@ -25,7 +31,7 @@ ns.MouseStateService.prototype.isMouseButtonPressed_ = function (mouseButton) { return this.lastButtonPressed_ != BUTTON_UNSET && this.lastButtonPressed_ == mouseButton; - } + }; ns.MouseStateService.prototype.onMouseEvent_ = function(evt, mouseEvent) { if (mouseEvent.type == 'mousedown') { @@ -33,7 +39,5 @@ } else if (mouseEvent.type == 'mouseup') { this.lastButtonPressed_ = BUTTON_UNSET; } - // Warning : do not call setCurrentButton here - // mousemove do not have the correct mouse button information on all browsers }; -})(); \ No newline at end of file +})(); diff --git a/src/js/tools/drawing/BaseTool.js b/src/js/tools/drawing/BaseTool.js index f1a82ef..e89c75b 100644 --- a/src/js/tools/drawing/BaseTool.js +++ b/src/js/tools/drawing/BaseTool.js @@ -13,9 +13,9 @@ pskl.utils.inherit(ns.BaseTool, pskl.tools.Tool); - ns.BaseTool.prototype.applyToolAt = function (col, row, color, frame, overlay, event) {}; + ns.BaseTool.prototype.applyToolAt = function (col, row, frame, overlay, event) {}; - ns.BaseTool.prototype.moveToolAt = function (col, row, color, frame, overlay, event) {}; + ns.BaseTool.prototype.moveToolAt = function (col, row, frame, overlay, event) {}; ns.BaseTool.prototype.replay = Constants.ABSTRACT_FUNCTION; @@ -26,7 +26,7 @@ return pskl.app.selectedColorsService.getPrimaryColor(); }; - ns.BaseTool.prototype.moveUnactiveToolAt = function (col, row, color, frame, overlay, event) { + ns.BaseTool.prototype.moveUnactiveToolAt = function (col, row, frame, overlay, event) { if (overlay.containsPixel(col, row)) { this.updateHighlightedPixel(frame, overlay, col, row); } else { @@ -84,7 +84,7 @@ }); }; - ns.BaseTool.prototype.releaseToolAt = function (col, row, color, frame, overlay, event) {}; + ns.BaseTool.prototype.releaseToolAt = function (col, row, frame, overlay, event) {}; /** * Bresenham line algorithm: Get an array of pixels from diff --git a/src/js/tools/drawing/Circle.js b/src/js/tools/drawing/Circle.js index b230527..5285e21 100644 --- a/src/js/tools/drawing/Circle.js +++ b/src/js/tools/drawing/Circle.js @@ -15,7 +15,10 @@ pskl.utils.inherit(ns.Circle, ns.ShapeTool); - ns.Circle.prototype.draw_ = function (col, row, color, targetFrame) { + /** + * @override + */ + ns.Circle.prototype.draw = function (col, row, color, targetFrame) { var circlePoints = this.getCirclePixels_(this.startCol, this.startRow, col, row); for (var i = 0 ; i < circlePoints.length ; i++) { // Change model: diff --git a/src/js/tools/drawing/ColorPicker.js b/src/js/tools/drawing/ColorPicker.js index 87385c9..671eac9 100644 --- a/src/js/tools/drawing/ColorPicker.js +++ b/src/js/tools/drawing/ColorPicker.js @@ -16,7 +16,7 @@ /** * @override */ - ns.ColorPicker.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.ColorPicker.prototype.applyToolAt = function(col, row, frame, overlay, event) { if (frame.containsPixel(col, row)) { var sampledColor = frame.getPixel(col, row); if (event.button == Constants.LEFT_BUTTON) { diff --git a/src/js/tools/drawing/ColorSwap.js b/src/js/tools/drawing/ColorSwap.js index dcc4a03..fc8cd3b 100644 --- a/src/js/tools/drawing/ColorSwap.js +++ b/src/js/tools/drawing/ColorSwap.js @@ -21,7 +21,7 @@ /** * @override */ - ns.ColorSwap.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.ColorSwap.prototype.applyToolAt = function(col, row, frame, overlay, event) { if (frame.containsPixel(col, row)) { var sampledColor = frame.getPixel(col, row); diff --git a/src/js/tools/drawing/DitheringTool.js b/src/js/tools/drawing/DitheringTool.js index 90caa8e..47397db 100644 --- a/src/js/tools/drawing/DitheringTool.js +++ b/src/js/tools/drawing/DitheringTool.js @@ -29,9 +29,9 @@ /** * @override */ - ns.DitheringTool.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.DitheringTool.prototype.applyToolAt = function(col, row, frame, overlay, event) { this.col_ = col; this.row_ = row; - this.superclass.applyToolAt.call(this, col, row, color_legacy, frame, overlay, event); + this.superclass.applyToolAt.call(this, col, row, frame, overlay, event); }; })(); diff --git a/src/js/tools/drawing/Lighten.js b/src/js/tools/drawing/Lighten.js index 4553bf0..29fdead 100644 --- a/src/js/tools/drawing/Lighten.js +++ b/src/js/tools/drawing/Lighten.js @@ -66,17 +66,17 @@ /** * @Override */ - ns.Lighten.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event, mouseButton) { + ns.Lighten.prototype.applyToolAt = function(col, row, frame, overlay, event, mouseButton) { var overlayColor = overlay.getPixel(col, row); var frameColor = frame.getPixel(col, row); this.col_ = col; this.row_ = row; this.pixelColor_ = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor; - this.isDarken_ = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;; + this.isDarken_ = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey; this.isTransparent_ = this.pixelColor_ === Constants.TRANSPARENT_COLOR; this.isSinglePass_ = event.shiftKey; - this.superclass.applyToolAt.call(this, col, row, color_legacy, frame, overlay, event); + this.superclass.applyToolAt.call(this, col, row, frame, overlay, event); }; })(); diff --git a/src/js/tools/drawing/Move.js b/src/js/tools/drawing/Move.js index 663432f..0c01e60 100644 --- a/src/js/tools/drawing/Move.js +++ b/src/js/tools/drawing/Move.js @@ -28,14 +28,14 @@ /** * @override */ - ns.Move.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.Move.prototype.applyToolAt = function(col, row, frame, overlay, event) { this.startCol = col; this.startRow = row; this.currentFrame = frame; this.currentFrameClone = frame.clone(); }; - ns.Move.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.Move.prototype.moveToolAt = function(col, row, frame, overlay, event) { var colDiff = col - this.startCol; var rowDiff = row - this.startRow; this.shiftFrame(colDiff, rowDiff, frame, this.currentFrameClone, event); @@ -66,7 +66,7 @@ /** * @override */ - ns.Move.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.Move.prototype.releaseToolAt = function(col, row, frame, overlay, event) { var colDiff = col - this.startCol; var rowDiff = row - this.startRow; diff --git a/src/js/tools/drawing/PaintBucket.js b/src/js/tools/drawing/PaintBucket.js index 12fb177..5c9034d 100644 --- a/src/js/tools/drawing/PaintBucket.js +++ b/src/js/tools/drawing/PaintBucket.js @@ -16,7 +16,7 @@ /** * @override */ - ns.PaintBucket.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.PaintBucket.prototype.applyToolAt = function(col, row, frame, overlay, event) { var color = this.getToolColor(); pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, col, row, color); diff --git a/src/js/tools/drawing/Rectangle.js b/src/js/tools/drawing/Rectangle.js index 24e7c4f..4f4d64f 100644 --- a/src/js/tools/drawing/Rectangle.js +++ b/src/js/tools/drawing/Rectangle.js @@ -16,7 +16,10 @@ pskl.utils.inherit(ns.Rectangle, ns.ShapeTool); - ns.Rectangle.prototype.draw_ = function (col, row, color_legacy, targetFrame) { + /** + * @override + */ + ns.Rectangle.prototype.draw = function (col, row, color, targetFrame) { var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row); for (var i = 0 ; i < strokePoints.length ; i++) { // Change model: diff --git a/src/js/tools/drawing/ShapeTool.js b/src/js/tools/drawing/ShapeTool.js index 1e8092e..518ce92 100644 --- a/src/js/tools/drawing/ShapeTool.js +++ b/src/js/tools/drawing/ShapeTool.js @@ -2,7 +2,7 @@ var ns = $.namespace('pskl.tools.drawing'); /** * Abstract shape tool class, parent to all shape tools (rectangle, circle). - * Shape tools should override only the draw_ method + * Shape tools should override only the draw method */ ns.ShapeTool = function() { // Shapes's first point coordinates (set in applyToolAt) @@ -19,7 +19,7 @@ /** * @override */ - ns.ShapeTool.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.ShapeTool.prototype.applyToolAt = function(col, row, frame, overlay, event) { $.publish(Events.DRAG_START, [col, row]); this.startCol = col; this.startRow = row; @@ -28,7 +28,7 @@ overlay.setPixel(col, row, this.getToolColor()); }; - ns.ShapeTool.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.ShapeTool.prototype.moveToolAt = function(col, row, frame, overlay, event) { var coords = this.getCoordinates_(col, row, event); $.publish(Events.CURSOR_MOVED, [coords.col, coords.row]); @@ -39,17 +39,17 @@ } // draw in overlay - this.draw_(coords.col, coords.row, color, overlay); + this.draw(coords.col, coords.row, color, overlay); }; /** * @override */ - ns.ShapeTool.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.ShapeTool.prototype.releaseToolAt = function(col, row, frame, overlay, event) { overlay.clear(); var coords = this.getCoordinates_(col, row, event); var color = this.getToolColor(); - this.draw_(coords.col, coords.row, color, frame); + this.draw(coords.col, coords.row, color, frame); $.publish(Events.DRAG_END, [coords.col, coords.row]); this.raiseSaveStateEvent({ @@ -67,7 +67,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); }; /** @@ -108,6 +108,6 @@ }; }; - ns.ShapeTool.prototype.draw_ = Constants.ABSTRACT_FUNCTION; + ns.ShapeTool.prototype.draw = Constants.ABSTRACT_FUNCTION; })(); diff --git a/src/js/tools/drawing/SimplePen.js b/src/js/tools/drawing/SimplePen.js index 35428c6..1369a64 100644 --- a/src/js/tools/drawing/SimplePen.js +++ b/src/js/tools/drawing/SimplePen.js @@ -21,10 +21,10 @@ /** * @override */ - ns.SimplePen.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.SimplePen.prototype.applyToolAt = function(col, row, frame, overlay, event) { this.previousCol = col; this.previousRow = row; - var color = this.getToolColor(); + var color = this.getToolColor(); overlay.setPixel(col, row, color); if (color === Constants.TRANSPARENT_COLOR) { @@ -40,7 +40,7 @@ /** * @override */ - ns.SimplePen.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.SimplePen.prototype.moveToolAt = function(col, row, frame, overlay, event) { if ((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) { // The pen movement is too fast for the mousemove frequency, there is a gap between the // current point and the previously drawn one. @@ -48,17 +48,17 @@ var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow); for (var i = 0, l = interpolatedPixels.length ; i < l ; i++) { var coords = interpolatedPixels[i]; - this.applyToolAt(coords.col, coords.row, color_legacy, frame, overlay, event); + this.applyToolAt(coords.col, coords.row, frame, overlay, event); } } else { - this.applyToolAt(col, row, color_legacy, frame, overlay, event); + this.applyToolAt(col, row, frame, overlay, event); } this.previousCol = col; this.previousRow = row; }; - ns.SimplePen.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.SimplePen.prototype.releaseToolAt = function(col, row, frame, overlay, event) { // apply on real frame this.setPixelsToFrame_(frame, this.pixels); diff --git a/src/js/tools/drawing/Stroke.js b/src/js/tools/drawing/Stroke.js index af8901d..6f7a3e5 100644 --- a/src/js/tools/drawing/Stroke.js +++ b/src/js/tools/drawing/Stroke.js @@ -20,7 +20,7 @@ /** * @override */ - ns.Stroke.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.Stroke.prototype.applyToolAt = function(col, row, frame, overlay, event) { this.startCol = col; this.startRow = row; @@ -36,7 +36,7 @@ overlay.setPixel(col, row, this.getToolColor()); }; - ns.Stroke.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.Stroke.prototype.moveToolAt = function(col, row, frame, overlay, event) { overlay.clear(); // When the user moussemove (before releasing), we dynamically compute the @@ -63,7 +63,7 @@ /** * @override */ - ns.Stroke.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.Stroke.prototype.releaseToolAt = function(col, row, frame, overlay, event) { var color = this.getToolColor(); // 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) diff --git a/src/js/tools/drawing/VerticalMirrorPen.js b/src/js/tools/drawing/VerticalMirrorPen.js index f96a5c0..bc5445e 100644 --- a/src/js/tools/drawing/VerticalMirrorPen.js +++ b/src/js/tools/drawing/VerticalMirrorPen.js @@ -28,8 +28,8 @@ /** * @override */ - ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { - this.superclass.applyToolAt.call(this, col, row, color_legacy, frame, overlay); + ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, frame, overlay, event) { + this.superclass.applyToolAt.call(this, col, row, frame, overlay); this.backupPreviousPositions_(); var mirroredCol = this.getSymmetricCol_(col, frame); @@ -37,15 +37,15 @@ var hasCtrlKey = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey; if (!hasCtrlKey) { - this.superclass.applyToolAt.call(this, mirroredCol, row, color_legacy, frame, overlay); + this.superclass.applyToolAt.call(this, mirroredCol, row, frame, overlay); } if (event.shiftKey || hasCtrlKey) { - this.superclass.applyToolAt.call(this, col, mirroredRow, color_legacy, frame, overlay); + this.superclass.applyToolAt.call(this, col, mirroredRow, frame, overlay); } if (event.shiftKey) { - this.superclass.applyToolAt.call(this, mirroredCol, mirroredRow, color_legacy, frame, overlay); + this.superclass.applyToolAt.call(this, mirroredCol, mirroredRow, frame, overlay); } this.restorePreviousPositions_(); diff --git a/src/js/tools/drawing/selection/BaseSelect.js b/src/js/tools/drawing/selection/BaseSelect.js index 10798c9..9d4a23d 100644 --- a/src/js/tools/drawing/selection/BaseSelect.js +++ b/src/js/tools/drawing/selection/BaseSelect.js @@ -28,7 +28,7 @@ /** * @override */ - ns.BaseSelect.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.BaseSelect.prototype.applyToolAt = function(col, row, frame, overlay, event) { this.startCol = col; this.startRow = row; @@ -42,32 +42,32 @@ // mode to allow to move the selection by drag'n dropping it. if (this.isInSelection(col, row)) { this.mode = 'moveSelection'; - this.onSelectionDragStart_(col, row, color_legacy, frame, overlay); + this.onSelectionDragStart_(col, row, frame, overlay); } else { this.mode = 'select'; - this.onSelectStart_(col, row, color_legacy, frame, overlay); + this.onSelectStart_(col, row, frame, overlay); } }; /** * @override */ - ns.BaseSelect.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.BaseSelect.prototype.moveToolAt = function(col, row, frame, overlay, event) { if (this.mode == 'select') { - this.onSelect_(col, row, color_legacy, frame, overlay); + this.onSelect_(col, row, frame, overlay); } else if (this.mode == 'moveSelection') { - this.onSelectionDrag_(col, row, color_legacy, frame, overlay); + this.onSelectionDrag_(col, row, frame, overlay); } }; /** * @override */ - ns.BaseSelect.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.BaseSelect.prototype.releaseToolAt = function(col, row, frame, overlay, event) { if (this.mode == 'select') { - this.onSelectEnd_(col, row, color_legacy, frame, overlay); + this.onSelectEnd_(col, row, frame, overlay); } else if (this.mode == 'moveSelection') { - this.onSelectionDragEnd_(col, row, color_legacy, frame, overlay); + this.onSelectionDragEnd_(col, row, frame, overlay); } }; @@ -76,7 +76,7 @@ * instead of the 'select' one. It indicates that we can move the selection by dragndroping it. * @override */ - ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color_legacy, frame, overlay, event) { + ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, frame, overlay, event) { if (overlay.containsPixel(col, row)) { if (this.isInSelection(col, row)) { // We're hovering the selection, show the move tool: @@ -124,18 +124,18 @@ // The list of callbacks to implement by specialized tools to implement the selection creation behavior. /** @protected */ - ns.BaseSelect.prototype.onSelectStart_ = function (col, row, color_legacy, frame, overlay) {}; + ns.BaseSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {}; /** @protected */ - ns.BaseSelect.prototype.onSelect_ = function (col, row, color_legacy, frame, overlay) {}; + ns.BaseSelect.prototype.onSelect_ = function (col, row, frame, overlay) {}; /** @protected */ - ns.BaseSelect.prototype.onSelectEnd_ = function (col, row, color_legacy, frame, overlay) {}; + ns.BaseSelect.prototype.onSelectEnd_ = function (col, row, frame, overlay) {}; // The list of callbacks that define the drag'n drop behavior of the selection. /** @private */ - ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, color_legacy, frame, overlay) {}; + ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, frame, overlay) {}; /** @private */ - ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, color_legacy, frame, overlay) { + ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, frame, overlay) { var deltaCol = col - this.lastCol; var deltaRow = row - this.lastRow; @@ -152,7 +152,7 @@ }; /** @private */ - ns.BaseSelect.prototype.onSelectionDragEnd_ = function (col, row, color_legacy, frame, overlay) { - this.onSelectionDrag_(col, row, color_legacy, frame, overlay); + ns.BaseSelect.prototype.onSelectionDragEnd_ = function (col, row, frame, overlay) { + this.onSelectionDrag_(col, row, frame, overlay); }; })(); diff --git a/src/js/tools/drawing/selection/RectangleSelect.js b/src/js/tools/drawing/selection/RectangleSelect.js index 90ea01d..d1e6ea2 100644 --- a/src/js/tools/drawing/selection/RectangleSelect.js +++ b/src/js/tools/drawing/selection/RectangleSelect.js @@ -22,7 +22,7 @@ /** * @override */ - ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) { + ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) { this.selectionOrigin_ = { col : col, row : row @@ -33,7 +33,7 @@ $.publish(Events.SELECTION_DISMISSED); } else { this.startSelection_(col, row); - overlay.setPixel(col, row, color); + overlay.setPixel(col, row, Constants.SELECTION_TRANSPARENT_COLOR); } }; @@ -49,7 +49,7 @@ * the current mouse coordiinate in sprite. * @override */ - ns.RectangleSelect.prototype.onSelect_ = function (col, row, color_legacy, frame, overlay) { + ns.RectangleSelect.prototype.onSelect_ = function (col, row, frame, overlay) { if (!this.hasSelection && (this.selectionOrigin_.col !== col || this.selectionOrigin_.row !== row)) { this.startSelection_(col, row); } @@ -63,9 +63,9 @@ } }; - ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color_legacy, frame, overlay) { + ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, frame, overlay) { if (this.hasSelection) { - this.onSelect_(col, row, color_legacy, frame, overlay); + this.onSelect_(col, row, frame, overlay); $.publish(Events.DRAG_END, [col, row]); } }; diff --git a/src/js/tools/drawing/selection/ShapeSelect.js b/src/js/tools/drawing/selection/ShapeSelect.js index 5e61bc3..9b9eabf 100644 --- a/src/js/tools/drawing/selection/ShapeSelect.js +++ b/src/js/tools/drawing/selection/ShapeSelect.js @@ -21,7 +21,7 @@ * So we jsut need to implement onSelectStart_ (no need for onSelect_ & onSelectEnd_) * @override */ - ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, color_legacy, frame, overlay) { + ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) { // Clean previous selection: $.publish(Events.SELECTION_DISMISSED); overlay.clear(); From 90c2ed347059badaabdcd9725f5dd7d2db45e488 Mon Sep 17 00:00:00 2001 From: grosbouddha Date: Thu, 17 Sep 2015 02:26:59 +0200 Subject: [PATCH 07/13] Removing states in class members and using a SimplePen#draw method instead. --- src/js/tools/drawing/DitheringTool.js | 14 ++---- src/js/tools/drawing/Lighten.js | 58 ++++++++++++----------- src/js/tools/drawing/SimplePen.js | 8 +++- src/js/tools/drawing/VerticalMirrorPen.js | 10 ++-- 4 files changed, 45 insertions(+), 45 deletions(-) diff --git a/src/js/tools/drawing/DitheringTool.js b/src/js/tools/drawing/DitheringTool.js index 47397db..d8de338 100644 --- a/src/js/tools/drawing/DitheringTool.js +++ b/src/js/tools/drawing/DitheringTool.js @@ -16,22 +16,14 @@ /** * @override */ - ns.DitheringTool.prototype.getToolColor = function() { - var usePrimaryColor = (this.col_ + this.row_) % 2; + ns.DitheringTool.prototype.applyToolAt = function(col, row, frame, overlay, event) { + var usePrimaryColor = (col + row) % 2; usePrimaryColor = pskl.app.mouseStateService.isRightButtonPressed() ? !usePrimaryColor : usePrimaryColor; var ditheringColor = usePrimaryColor ? pskl.app.selectedColorsService.getPrimaryColor() : pskl.app.selectedColorsService.getSecondaryColor(); - return ditheringColor; - }; - /** - * @override - */ - ns.DitheringTool.prototype.applyToolAt = function(col, row, frame, overlay, event) { - this.col_ = col; - this.row_ = row; - this.superclass.applyToolAt.call(this, col, row, frame, overlay, event); + this.draw(ditheringColor, col, row, frame, overlay); }; })(); diff --git a/src/js/tools/drawing/Lighten.js b/src/js/tools/drawing/Lighten.js index 29fdead..efbba94 100644 --- a/src/js/tools/drawing/Lighten.js +++ b/src/js/tools/drawing/Lighten.js @@ -41,42 +41,44 @@ /** * @Override */ - ns.Lighten.prototype.getToolColor = function() { - var color = this.superclass.getToolColor.call(); + ns.Lighten.prototype.applyToolAt = function(col, row, frame, overlay, event, mouseButton) { + var modifiedColor = this.getModifiedColor_(col, row, frame, overlay, event); + this.draw(modifiedColor, col, row, frame, overlay); + }; - var usedPixels = this.isDarken_ ? this.usedPixels_.darken : this.usedPixels_.lighten; - var key = this.col_ + '-' + this.row_; - var doNotModify = this.isTransparent_ || (this.isSinglePass_ && usedPixels[key]); + ns.Lighten.prototype.getModifiedColor_ = function(col, row, frame, overlay, event) { + 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 color; if (doNotModify) { - color = window.tinycolor(this.pixelColor_); + color = window.tinycolor(pixelColor); } else { - var step = this.isSinglePass_ ? DEFAULT_STEP * 2 : DEFAULT_STEP; - if (this.isDarken_) { - color = window.tinycolor.darken(this.pixelColor_, step); + var step = isSinglePass ? DEFAULT_STEP * 2 : DEFAULT_STEP; + if (isDarken) { + color = window.tinycolor.darken(pixelColor, step); } else { - color = window.tinycolor.lighten(this.pixelColor_, step); + color = window.tinycolor.lighten(pixelColor, step); } } if (color) { - usedPixels[key] = true; + // Convert tinycolor color to string format. + color = color.toRgbString(); + } else { + // Not sure why this check exists in the first place. + // Fallback to the always defined SimplePen tool color in this case. + color = this.getToolColor(); } - return color.toRgbString(); - }; + usedPixels[key] = true; - /** - * @Override - */ - ns.Lighten.prototype.applyToolAt = function(col, row, frame, overlay, event, mouseButton) { - var overlayColor = overlay.getPixel(col, row); - var frameColor = frame.getPixel(col, row); - - this.col_ = col; - this.row_ = row; - this.pixelColor_ = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor; - this.isDarken_ = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey; - this.isTransparent_ = this.pixelColor_ === Constants.TRANSPARENT_COLOR; - this.isSinglePass_ = event.shiftKey; - - this.superclass.applyToolAt.call(this, col, row, frame, overlay, event); + return color; }; })(); diff --git a/src/js/tools/drawing/SimplePen.js b/src/js/tools/drawing/SimplePen.js index 1369a64..ec66574 100644 --- a/src/js/tools/drawing/SimplePen.js +++ b/src/js/tools/drawing/SimplePen.js @@ -22,11 +22,15 @@ * @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(); - overlay.setPixel(col, row, color); + overlay.setPixel(col, row, color); if (color === Constants.TRANSPARENT_COLOR) { frame.setPixel(col, row, color); } diff --git a/src/js/tools/drawing/VerticalMirrorPen.js b/src/js/tools/drawing/VerticalMirrorPen.js index bc5445e..b98c493 100644 --- a/src/js/tools/drawing/VerticalMirrorPen.js +++ b/src/js/tools/drawing/VerticalMirrorPen.js @@ -29,7 +29,9 @@ * @override */ ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, frame, overlay, event) { - this.superclass.applyToolAt.call(this, col, row, frame, overlay); + var color = this.getToolColor(); + this.draw(color, col, row, frame, overlay); + this.backupPreviousPositions_(); var mirroredCol = this.getSymmetricCol_(col, frame); @@ -37,15 +39,15 @@ var hasCtrlKey = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey; if (!hasCtrlKey) { - this.superclass.applyToolAt.call(this, mirroredCol, row, frame, overlay); + this.draw(color, mirroredCol, row, frame, overlay); } if (event.shiftKey || hasCtrlKey) { - this.superclass.applyToolAt.call(this, col, mirroredRow, frame, overlay); + this.draw(color, col, mirroredRow, frame, overlay); } if (event.shiftKey) { - this.superclass.applyToolAt.call(this, mirroredCol, mirroredRow, frame, overlay); + this.draw(color, mirroredCol, mirroredRow, frame, overlay); } this.restorePreviousPositions_(); From 3f992cbb4aa33f94508b9d27e80896a1a902eed0 Mon Sep 17 00:00:00 2001 From: grosbouddha Date: Sun, 20 Sep 2015 02:12:59 +0200 Subject: [PATCH 08/13] Applying review comments --- src/js/tools/drawing/ColorPicker.js | 4 ++-- src/js/tools/drawing/Lighten.js | 11 ++--------- src/js/tools/drawing/Rectangle.js | 3 +-- 3 files changed, 5 insertions(+), 13 deletions(-) diff --git a/src/js/tools/drawing/ColorPicker.js b/src/js/tools/drawing/ColorPicker.js index 671eac9..62e2238 100644 --- a/src/js/tools/drawing/ColorPicker.js +++ b/src/js/tools/drawing/ColorPicker.js @@ -19,9 +19,9 @@ ns.ColorPicker.prototype.applyToolAt = function(col, row, frame, overlay, event) { if (frame.containsPixel(col, row)) { var sampledColor = frame.getPixel(col, row); - if (event.button == Constants.LEFT_BUTTON) { + if (pskl.app.mouseStateService.isLeftButtonPressed()) { $.publish(Events.SELECT_PRIMARY_COLOR, [sampledColor]); - } else if (event.button == Constants.RIGHT_BUTTON) { + } else if (pskl.app.mouseStateService.isRightButtonPressed()) { $.publish(Events.SELECT_SECONDARY_COLOR, [sampledColor]); } } diff --git a/src/js/tools/drawing/Lighten.js b/src/js/tools/drawing/Lighten.js index efbba94..3e90dc8 100644 --- a/src/js/tools/drawing/Lighten.js +++ b/src/js/tools/drawing/Lighten.js @@ -69,16 +69,9 @@ color = window.tinycolor.lighten(pixelColor, step); } } - if (color) { - // Convert tinycolor color to string format. - color = color.toRgbString(); - } else { - // Not sure why this check exists in the first place. - // Fallback to the always defined SimplePen tool color in this case. - color = this.getToolColor(); - } usedPixels[key] = true; - return color; + // Convert tinycolor color to string format. + return color.toRgbString(); }; })(); diff --git a/src/js/tools/drawing/Rectangle.js b/src/js/tools/drawing/Rectangle.js index 4f4d64f..80b9c2e 100644 --- a/src/js/tools/drawing/Rectangle.js +++ b/src/js/tools/drawing/Rectangle.js @@ -10,7 +10,6 @@ ns.ShapeTool.call(this); this.toolId = 'tool-rectangle'; - this.helpText = 'Rectangle tool'; }; @@ -23,7 +22,7 @@ var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row); for (var i = 0 ; i < strokePoints.length ; i++) { // Change model: - targetFrame.setPixel(strokePoints[i].col, strokePoints[i].row, this.getToolColor()); + targetFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color); } }; })(); From 9f31b2c7e4dd9c18dcf3ff11ae86b54b444245d4 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sat, 19 Sep 2015 00:07:14 +0200 Subject: [PATCH 09/13] Fix : Hide grid when zoom no longer allows proper display --- src/js/rendering/frame/FrameRenderer.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/js/rendering/frame/FrameRenderer.js b/src/js/rendering/frame/FrameRenderer.js index 82ea9ad..c5cb70a 100644 --- a/src/js/rendering/frame/FrameRenderer.js +++ b/src/js/rendering/frame/FrameRenderer.js @@ -140,11 +140,23 @@ }; ns.FrameRenderer.prototype.getGridWidth = function () { - if (this.supportGridRendering) { - return this.gridWidth_; - } else { + if (!this.supportGridRendering) { return 0; } + + return this.gridWidth_; + }; + + /** + * Compute a grid width value best suited to the current display context, + * particularly for the current zoom level + */ + ns.FrameRenderer.prototype.computeGridWidthForDisplay_ = function () { + var gridWidth = this.getGridWidth(); + while (this.zoom < 6 * gridWidth) { + gridWidth--; + } + return gridWidth; }; ns.FrameRenderer.prototype.updateMargins_ = function (frame) { @@ -249,7 +261,7 @@ var isIE10 = pskl.utils.UserAgent.isIE && pskl.utils.UserAgent.version === 10; - var gridWidth = this.getGridWidth(); + var gridWidth = this.computeGridWidthForDisplay_(); var isGridEnabled = gridWidth > 0; if (isGridEnabled || isIE10) { var scaled = pskl.utils.ImageResizer.resizeNearestNeighbour(this.canvas, this.zoom, gridWidth); From 87341b049efeff968efd7aa57449bb1192f21ad8 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sat, 19 Sep 2015 00:25:33 +0200 Subject: [PATCH 10/13] Fix : Add peer dependency to jasmine-core in package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index e0e9c6c..bc5afe3 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "karma-chrome-launcher": "^0.1.4", "karma-jasmine": "^0.3.5", "karma-phantomjs-launcher": "^0.1.4", + "jasmine-core": "^2.1.0", "load-grunt-tasks": "^3.1.0" }, "window": { From ef05cc4fd1e9ebc8c4d0fc89c1321244d3861d75 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sat, 19 Sep 2015 17:56:32 +0200 Subject: [PATCH 11/13] Refactor : move FrameTransform to transform package --- ...{Transform.js => AbstractTransformTool.js} | 12 ++--- src/js/tools/transform/Clone.js | 2 +- src/js/tools/transform/Flip.js | 8 +-- src/js/tools/transform/Rotate.js | 8 +-- .../transform/TransformUtils.js} | 14 +++--- src/piskel-script-list.js | 4 +- .../transform/TransformUtilsTest.js} | 50 +++++++++---------- 7 files changed, 47 insertions(+), 51 deletions(-) rename src/js/tools/transform/{Transform.js => AbstractTransformTool.js} (70%) rename src/js/{utils/FrameTransform.js => tools/transform/TransformUtils.js} (81%) rename test/js/{utils/FrameTransformTest.js => tools/transform/TransformUtilsTest.js} (68%) diff --git a/src/js/tools/transform/Transform.js b/src/js/tools/transform/AbstractTransformTool.js similarity index 70% rename from src/js/tools/transform/Transform.js rename to src/js/tools/transform/AbstractTransformTool.js index 3d7bdb9..7dac651 100644 --- a/src/js/tools/transform/Transform.js +++ b/src/js/tools/transform/AbstractTransformTool.js @@ -1,21 +1,17 @@ (function () { var ns = $.namespace('pskl.tools.transform'); - ns.Transform = function () { - this.toolId = 'tool-transform'; - this.helpText = 'Transform tool'; - this.tooltipDescriptors = []; - }; + ns.AbstractTransformTool = function () {}; - pskl.utils.inherit(ns.Transform, pskl.tools.Tool); + pskl.utils.inherit(ns.AbstractTransformTool, pskl.tools.Tool); - ns.Transform.prototype.apply = function (evt) { + ns.AbstractTransformTool.prototype.apply = function (evt) { var allFrames = evt.shiftKey; var allLayers = evt.ctrlKey; this.applyTool_(evt.altKey, allFrames, allLayers); }; - ns.Transform.prototype.applyTool_ = function (altKey, allFrames, allLayers) { + ns.AbstractTransformTool.prototype.applyTool_ = function (altKey, allFrames, allLayers) { var currentFrameIndex = pskl.app.piskelController.getCurrentFrameIndex(); var layers = allLayers ? pskl.app.piskelController.getLayers() : [pskl.app.piskelController.getCurrentLayer()]; layers.forEach(function (layer) { diff --git a/src/js/tools/transform/Clone.js b/src/js/tools/transform/Clone.js index 5f2ddfa..9a6698e 100644 --- a/src/js/tools/transform/Clone.js +++ b/src/js/tools/transform/Clone.js @@ -7,7 +7,7 @@ this.tooltipDescriptors = []; }; - pskl.utils.inherit(ns.Clone, ns.Transform); + pskl.utils.inherit(ns.Clone, ns.AbstractTransformTool); ns.Clone.prototype.apply = function (evt) { var ref = pskl.app.piskelController.getCurrentFrame(); diff --git a/src/js/tools/transform/Flip.js b/src/js/tools/transform/Flip.js index 71a054c..b7e7e23 100644 --- a/src/js/tools/transform/Flip.js +++ b/src/js/tools/transform/Flip.js @@ -11,18 +11,18 @@ ]; }; - pskl.utils.inherit(ns.Flip, ns.Transform); + pskl.utils.inherit(ns.Flip, ns.AbstractTransformTool); ns.Flip.prototype.applyToolOnFrame_ = function (frame, altKey) { var axis; if (altKey) { - axis = pskl.utils.FrameTransform.HORIZONTAL; + axis = ns.TransformUtils.HORIZONTAL; } else { - axis = pskl.utils.FrameTransform.VERTICAL; + axis = ns.TransformUtils.VERTICAL; } - pskl.utils.FrameTransform.flip(frame, axis); + ns.TransformUtils.flip(frame, axis); }; })(); diff --git a/src/js/tools/transform/Rotate.js b/src/js/tools/transform/Rotate.js index 71144a3..b928788 100644 --- a/src/js/tools/transform/Rotate.js +++ b/src/js/tools/transform/Rotate.js @@ -10,18 +10,18 @@ {key : 'shift', description : 'Apply to all frames'}]; }; - pskl.utils.inherit(ns.Rotate, ns.Transform); + pskl.utils.inherit(ns.Rotate, ns.AbstractTransformTool); ns.Rotate.prototype.applyToolOnFrame_ = function (frame, altKey) { var direction; if (altKey) { - direction = pskl.utils.FrameTransform.CLOCKWISE; + direction = ns.TransformUtils.CLOCKWISE; } else { - direction = pskl.utils.FrameTransform.COUNTERCLOCKWISE; + direction = ns.TransformUtils.COUNTERCLOCKWISE; } - pskl.utils.FrameTransform.rotate(frame, direction); + ns.TransformUtils.rotate(frame, direction); }; })(); diff --git a/src/js/utils/FrameTransform.js b/src/js/tools/transform/TransformUtils.js similarity index 81% rename from src/js/utils/FrameTransform.js rename to src/js/tools/transform/TransformUtils.js index eb2b46c..03657f3 100644 --- a/src/js/utils/FrameTransform.js +++ b/src/js/tools/transform/TransformUtils.js @@ -1,8 +1,8 @@ (function () { - var ns = $.namespace('pskl.utils'); + var ns = $.namespace('pskl.tools.transform'); - ns.FrameTransform = { - VERTICAL : 'vertical', + ns.TransformUtils = { + VERTICAL : 'VERTICAL', HORIZONTAL : 'HORIZONTAL', flip : function (frame, axis) { var clone = frame.clone(); @@ -10,9 +10,9 @@ var h = frame.getHeight(); clone.forEachPixel(function (color, x, y) { - if (axis === ns.FrameTransform.VERTICAL) { + if (axis === ns.TransformUtils.VERTICAL) { x = w - x - 1; - } else if (axis === ns.FrameTransform.HORIZONTAL) { + } else if (axis === ns.TransformUtils.HORIZONTAL) { y = h - y - 1; } frame.pixels[x][y] = color; @@ -43,10 +43,10 @@ // Perform the rotation var tmpX = x; var tmpY = y; - if (direction === ns.FrameTransform.CLOCKWISE) { + if (direction === ns.TransformUtils.CLOCKWISE) { x = tmpY; y = max - 1 - tmpX; - } else if (direction === ns.FrameTransform.COUNTERCLOCKWISE) { + } else if (direction === ns.TransformUtils.COUNTERCLOCKWISE) { y = tmpX; x = max - 1 - tmpY; } diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 627c623..bf118e7 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -27,7 +27,6 @@ "js/utils/Math.js", "js/utils/FileUtils.js", "js/utils/FileUtilsDesktop.js", - "js/utils/FrameTransform.js", "js/utils/FrameUtils.js", "js/utils/LayerUtils.js", "js/utils/ImageResizer.js", @@ -185,10 +184,11 @@ "js/tools/drawing/ColorPicker.js", "js/tools/drawing/ColorSwap.js", "js/tools/drawing/DitheringTool.js", - "js/tools/transform/Transform.js", + "js/tools/transform/AbstractTransformTool.js", "js/tools/transform/Clone.js", "js/tools/transform/Flip.js", "js/tools/transform/Rotate.js", + "js/tools/transform/TransformUtils.js", // Devtools "js/devtools/DrawingTestPlayer.js", diff --git a/test/js/utils/FrameTransformTest.js b/test/js/tools/transform/TransformUtilsTest.js similarity index 68% rename from test/js/utils/FrameTransformTest.js rename to test/js/tools/transform/TransformUtilsTest.js index 0a8455a..0756548 100644 --- a/test/js/utils/FrameTransformTest.js +++ b/test/js/tools/transform/TransformUtilsTest.js @@ -1,13 +1,13 @@ -describe("FrameTransform suite", function() { +describe("TransformUtils suite", function() { var A = '#000000'; var B = '#ff0000'; var O = Constants.TRANSPARENT_COLOR; - var HORIZONTAL = pskl.utils.FrameTransform.HORIZONTAL; - var VERTICAL = pskl.utils.FrameTransform.VERTICAL; + var HORIZONTAL = pskl.tools.transform.TransformUtils.HORIZONTAL; + var VERTICAL = pskl.tools.transform.TransformUtils.VERTICAL; - var CLOCKWISE = pskl.utils.FrameTransform.CLOCKWISE; - var COUNTERCLOCKWISE = pskl.utils.FrameTransform.COUNTERCLOCKWISE; + var CLOCKWISE = pskl.tools.transform.TransformUtils.CLOCKWISE; + var COUNTERCLOCKWISE = pskl.tools.transform.TransformUtils.COUNTERCLOCKWISE; // shortcuts var frameEqualsGrid = test.testutils.frameEqualsGrid; @@ -25,7 +25,7 @@ describe("FrameTransform suite", function() { ])); // should have flipped - pskl.utils.FrameTransform.flip(frame, VERTICAL); + pskl.tools.transform.TransformUtils.flip(frame, VERTICAL); frameEqualsGrid(frame, [ [O, A], [B, O] @@ -40,7 +40,7 @@ describe("FrameTransform suite", function() { ])); // should have flipped - pskl.utils.FrameTransform.flip(frame, HORIZONTAL); + pskl.tools.transform.TransformUtils.flip(frame, HORIZONTAL); frameEqualsGrid(frame, [ [O, B], [A, O] @@ -56,7 +56,7 @@ describe("FrameTransform suite", function() { ])); // should have flipped - pskl.utils.FrameTransform.flip(frame, VERTICAL); + pskl.tools.transform.TransformUtils.flip(frame, VERTICAL); frameEqualsGrid(frame, [ [O, A], [O, A], @@ -64,7 +64,7 @@ describe("FrameTransform suite", function() { ]); // should be the same - pskl.utils.FrameTransform.flip(frame, HORIZONTAL); + pskl.tools.transform.TransformUtils.flip(frame, HORIZONTAL); frameEqualsGrid(frame, [ [O, A], [O, A], @@ -84,28 +84,28 @@ describe("FrameTransform suite", function() { ])); // rotate once - pskl.utils.FrameTransform.rotate(frame, COUNTERCLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, COUNTERCLOCKWISE); frameEqualsGrid(frame, [ [O, B], [A, O] ]); // rotate twice - pskl.utils.FrameTransform.rotate(frame, COUNTERCLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, COUNTERCLOCKWISE); frameEqualsGrid(frame, [ [B, O], [O, A] ]); // rotate 3 - pskl.utils.FrameTransform.rotate(frame, COUNTERCLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, COUNTERCLOCKWISE); frameEqualsGrid(frame, [ [O, A], [B, O] ]); // rotate 4 - back to initial state - pskl.utils.FrameTransform.rotate(frame, COUNTERCLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, COUNTERCLOCKWISE); frameEqualsGrid(frame, [ [A, O], [O, B] @@ -120,28 +120,28 @@ describe("FrameTransform suite", function() { ])); // rotate once - pskl.utils.FrameTransform.rotate(frame, CLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, CLOCKWISE); frameEqualsGrid(frame, [ [O, A], [B, O] ]); // rotate twice - pskl.utils.FrameTransform.rotate(frame, CLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, CLOCKWISE); frameEqualsGrid(frame, [ [B, O], [O, A] ]); // rotate 3 - pskl.utils.FrameTransform.rotate(frame, CLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, CLOCKWISE); frameEqualsGrid(frame, [ [O, B], [A, O] ]); // rotate 4 - back to initial state - pskl.utils.FrameTransform.rotate(frame, CLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, CLOCKWISE); frameEqualsGrid(frame, [ [A, O], [O, B] @@ -158,7 +158,7 @@ describe("FrameTransform suite", function() { ])); // rotate once - pskl.utils.FrameTransform.rotate(frame, CLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, CLOCKWISE); frameEqualsGrid(frame, [ [O, O], [B, A], @@ -167,7 +167,7 @@ describe("FrameTransform suite", function() { ]); // rotate twice - pskl.utils.FrameTransform.rotate(frame, CLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, CLOCKWISE); frameEqualsGrid(frame, [ [O, O], [O, B], @@ -176,7 +176,7 @@ describe("FrameTransform suite", function() { ]); // rotate 3 - pskl.utils.FrameTransform.rotate(frame, CLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, CLOCKWISE); frameEqualsGrid(frame, [ [O, O], [O, O], @@ -185,7 +185,7 @@ describe("FrameTransform suite", function() { ]); // rotate 4 - pskl.utils.FrameTransform.rotate(frame, CLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, CLOCKWISE); frameEqualsGrid(frame, [ [O, O], [A, O], @@ -202,28 +202,28 @@ describe("FrameTransform suite", function() { ])); // rotate once - pskl.utils.FrameTransform.rotate(frame, CLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, CLOCKWISE); frameEqualsGrid(frame, [ [O, A, O, O], [O, B, O, O] ]); // rotate twice - pskl.utils.FrameTransform.rotate(frame, CLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, CLOCKWISE); frameEqualsGrid(frame, [ [O, B, A, O], [O, O, O, O] ]); // rotate 3 - pskl.utils.FrameTransform.rotate(frame, CLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, CLOCKWISE); frameEqualsGrid(frame, [ [O, O, B, O], [O, O, A, O] ]); // rotate 4 - pskl.utils.FrameTransform.rotate(frame, CLOCKWISE); + pskl.tools.transform.TransformUtils.rotate(frame, CLOCKWISE); frameEqualsGrid(frame, [ [O, O, O, O], [O, A, B, O] From 1abd6113a3826664242fadb7493e1d0220d9a3e1 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sat, 19 Sep 2015 18:22:56 +0200 Subject: [PATCH 12/13] Fix : Speed up dialog animations --- src/css/dialogs.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/css/dialogs.css b/src/css/dialogs.css index 1ce9dd4..5994f94 100644 --- a/src/css/dialogs.css +++ b/src/css/dialogs.css @@ -21,7 +21,7 @@ } #dialog-container-wrapper.animated { - transition: opacity 0.5s; + transition: opacity 0.2s; } #dialog-container-wrapper.show { @@ -45,7 +45,7 @@ } .animated #dialog-container { - transition:margin-top 0.5s; + transition:margin-top 0.2s; } .show #dialog-container { From fddec5c95c5b3b7edbd4a68cef1f94b944fba873 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sat, 19 Sep 2015 22:58:01 +0200 Subject: [PATCH 13/13] Fix : Update package.json version to 0.5.5-SNAPSHOT --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bc5afe3..0af7377 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "name": "piskel", "main": "./dest/index.html", "description": "Web based 2d animations editor", - "version": "0.5.2", + "version": "0.5.5-SNAPSHOT", "homepage": "http://github.com/juliandescottes/piskel", "repository": { "type": "git",