From a0273edb3e0a367345ca739bc30be8a37982b5ad Mon Sep 17 00:00:00 2001 From: jdescottes Date: Tue, 19 Nov 2013 07:40:35 +0100 Subject: [PATCH] feature : add keyboard shortcuts + cleanup of color management + colors are now stored in palette controller + drawing controller has a dependency on palette controller + UPDATE COLOR events have been removed (they were used only for synchronizing palette and drawing controller) --- js/Events.js | 6 +-- js/app.js | 7 ++-- js/controller/DrawingController.js | 25 +++--------- js/controller/PaletteController.js | 62 +++++++++++++++++++++--------- js/drawingtools/ColorPicker.js | 6 +-- 5 files changed, 57 insertions(+), 49 deletions(-) diff --git a/js/Events.js b/js/Events.js index f6a642f7..329b5221 100644 --- a/js/Events.js +++ b/js/Events.js @@ -3,10 +3,8 @@ var Events = { TOOL_SELECTED : "TOOL_SELECTED", TOOL_RELEASED : "TOOL_RELEASED", - PRIMARY_COLOR_SELECTED: "PRIMARY_COLOR_SELECTED", - PRIMARY_COLOR_UPDATED: "PRIMARY_COLOR_UPDATED", - SECONDARY_COLOR_SELECTED: "SECONDARY_COLOR_SELECTED", - SECONDARY_COLOR_UPDATED: "SECONDARY_COLOR_UPDATED", + SELECT_PRIMARY_COLOR: "SELECT_PRIMARY_COLOR", + SELECT_SECONDARY_COLOR: "SELECT_SECONDARY_COLOR", /** * When this event is emitted, a request is sent to the localstorage diff --git a/js/app.js b/js/app.js index 53f59dbd..33f34f9c 100644 --- a/js/app.js +++ b/js/app.js @@ -21,7 +21,10 @@ this.piskelController = new pskl.controller.PiskelController(piskel); - this.drawingController = new pskl.controller.DrawingController(this.piskelController, $('#drawing-canvas-container')); + this.paletteController = new pskl.controller.PaletteController(); + this.paletteController.init(); + + this.drawingController = new pskl.controller.DrawingController(this.piskelController, this.paletteController, $('#drawing-canvas-container')); this.drawingController.init(); this.animationController = new pskl.controller.AnimatedPreviewController(this.piskelController, $('#preview-canvas-container')); @@ -60,8 +63,6 @@ this.cheatsheetService = new pskl.service.keyboard.CheatsheetService(); this.cheatsheetService.init(); - this.paletteController = new pskl.controller.PaletteController(); - this.paletteController.init(); var drawingLoop = new pskl.rendering.DrawingLoop(); drawingLoop.addCallback(this.render, this); diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js index 00e25d9c..a7c8e1a4 100644 --- a/js/controller/DrawingController.js +++ b/js/controller/DrawingController.js @@ -1,11 +1,13 @@ (function () { var ns = $.namespace("pskl.controller"); - ns.DrawingController = function (piskelController, container) { + ns.DrawingController = function (piskelController, paletteController,container) { /** * @public */ this.piskelController = piskelController; + this.paletteController = paletteController; + /** * @public */ @@ -35,8 +37,6 @@ this.isRightClicked = false; this.previousMousemoveTime = 0; this.currentToolBehavior = null; - this.primaryColor = Constants.DEFAULT_PEN_COLOR; - this.secondaryColor = Constants.TRANSPARENT_COLOR; }; ns.DrawingController.prototype.init = function () { @@ -47,21 +47,6 @@ this.overlayFrame.clear(); }, this)); - /** - * TODO(grosbouddha): Primary/secondary color state are kept in this general controller. - * Find a better place to store that. Perhaps PaletteController? - */ - $.subscribe(Events.PRIMARY_COLOR_SELECTED, $.proxy(function(evt, color) { - console.log("Primary color selected: ", color); - this.primaryColor = color; - $.publish(Events.PRIMARY_COLOR_UPDATED, [color]); - }, this)); - $.subscribe(Events.SECONDARY_COLOR_SELECTED, $.proxy(function(evt, color) { - console.log("Secondary color selected: ", color); - this.secondaryColor = color; - $.publish(Events.SECONDARY_COLOR_UPDATED, [color]); - }, this)); - $(window).resize($.proxy(this.startDPIUpdateTimer_, this)); $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); @@ -221,9 +206,9 @@ */ ns.DrawingController.prototype.getCurrentColor_ = function () { if(this.isRightClicked) { - return this.secondaryColor; + return this.paletteController.getSecondaryColor(); } else { - return this.primaryColor; + return this.paletteController.getPrimaryColor(); } }; diff --git a/js/controller/PaletteController.js b/js/controller/PaletteController.js index 58fc8278..6c0c58ee 100644 --- a/js/controller/PaletteController.js +++ b/js/controller/PaletteController.js @@ -1,7 +1,10 @@ (function () { var ns = $.namespace("pskl.controller"); - ns.PaletteController = function () {}; + ns.PaletteController = function () { + this.primaryColor = Constants.DEFAULT_PEN_COLOR; + this.secondaryColor = Constants.TRANSPARENT_COLOR; + }; /** * @public @@ -10,24 +13,18 @@ var transparentColorPalette = $(".palette-color[data-color=TRANSPARENT]"); transparentColorPalette.mouseup($.proxy(this.onPaletteColorClick_, this)); - $.subscribe(Events.PRIMARY_COLOR_UPDATED, $.proxy(function(evt, color) { - this.updateColorPicker_(color, $('#color-picker')); - }, this)); - - $.subscribe(Events.SECONDARY_COLOR_UPDATED, $.proxy(function(evt, color) { - this.updateColorPicker_(color, $('#secondary-color-picker')); - }, this)); - + $.subscribe(Events.SELECT_PRIMARY_COLOR, this.onColorSelected_.bind(this, {isPrimary:true})); + $.subscribe(Events.SELECT_SECONDARY_COLOR, this.onColorSelected_.bind(this, {isPrimary:false})); $.subscribe(Events.SWAP_COLORS, this.onSwapColorsEvent_.bind(this)); // Initialize colorpickers: var colorPicker = $('#color-picker'); - colorPicker.val(Constants.DEFAULT_PEN_COLOR); + colorPicker.val(this.primaryColor); colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this)); var secondaryColorPicker = $('#secondary-color-picker'); - secondaryColorPicker.val(Constants.TRANSPARENT_COLOR); + secondaryColorPicker.val(this.secondaryColor); secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this)); window.jscolor.install(); @@ -39,19 +36,46 @@ ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) { var inputPicker = $(evt.target); if(evt.data.isPrimary) { - $.publish(Events.PRIMARY_COLOR_SELECTED, [inputPicker.val()]); + this.setPrimaryColor(inputPicker.val()); } else { - $.publish(Events.SECONDARY_COLOR_SELECTED, [inputPicker.val()]); + this.setSecondaryColor(inputPicker.val()); } }; + /** + * @private + */ + ns.PaletteController.prototype.onColorSelected_ = function(args, evt, color) { + var inputPicker = $(evt.target); + if(args.isPrimary) { + this.setPrimaryColor(color); + } else { + this.setSecondaryColor(color); + } + }; + + ns.PaletteController.prototype.setPrimaryColor = function (color) { + this.primaryColor = color; + this.updateColorPicker_(color, $('#color-picker')); + }; + + ns.PaletteController.prototype.setSecondaryColor = function (color) { + this.secondaryColor = color; + this.updateColorPicker_(color, $('#secondary-color-picker')); + }; + + ns.PaletteController.prototype.getPrimaryColor = function () { + return this.primaryColor; + }; + + ns.PaletteController.prototype.getSecondaryColor = function () { + return this.secondaryColor; + }; + ns.PaletteController.prototype.onSwapColorsEvent_ = function () { - // TODO : juliandescottes : oooooh huge crap ... palette controller doesn't know which colors are selected !! - // JC Denton commented : 'what a shame' - var primaryColor = pskl.app.drawingController.primaryColor; - var secondaryColor = pskl.app.drawingController.secondaryColor; - $.publish(Events.PRIMARY_COLOR_SELECTED, [secondaryColor]); - $.publish(Events.SECONDARY_COLOR_SELECTED, [primaryColor]); + var primaryColor = this.getPrimaryColor(); + this.setPrimaryColor(this.getSecondaryColor()); + this.setSecondaryColor(primaryColor); }; /** diff --git a/js/drawingtools/ColorPicker.js b/js/drawingtools/ColorPicker.js index 8bbedf0d..fba7d5a9 100644 --- a/js/drawingtools/ColorPicker.js +++ b/js/drawingtools/ColorPicker.js @@ -12,7 +12,7 @@ }; pskl.utils.inherit(ns.ColorPicker, ns.BaseTool); - + /** * @override */ @@ -20,9 +20,9 @@ if (frame.containsPixel(col, row)) { var sampledColor = frame.getPixel(col, row); if (context.button == Constants.LEFT_BUTTON) { - $.publish(Events.PRIMARY_COLOR_SELECTED, [sampledColor]); + $.publish(Events.SELECT_PRIMARY_COLOR, [sampledColor]); } else if (context.button == Constants.RIGHT_BUTTON) { - $.publish(Events.SECONDARY_COLOR_SELECTED, [sampledColor]); + $.publish(Events.SELECT_SECONDARY_COLOR, [sampledColor]); } } };