From 1441dcd67a9ccf6a42a906732b54169f8ecb0cf4 Mon Sep 17 00:00:00 2001 From: grosbouddha Date: Tue, 9 Apr 2013 01:32:30 +0200 Subject: [PATCH 1/2] Adding simple color picker Left click colorpicker tool: - Create PRIMARY/SECONDARY_COLOR_SELECTED/UPDATED events - remove isPrimary arguments --- css/tools.css | 8 ++++++++ img/tools/dropper.png | Bin 0 -> 543 bytes index.html | 3 ++- js/Events.js | 5 ++++- js/controller/DrawingController.js | 20 ++++++++++++------- js/controller/PaletteController.js | 30 +++++++++++++++++++++-------- js/controller/ToolController.js | 3 ++- js/drawingtools/ColorPicker.js | 25 ++++++++++++++++++++++++ 8 files changed, 76 insertions(+), 18 deletions(-) create mode 100644 img/tools/dropper.png create mode 100644 js/drawingtools/ColorPicker.js diff --git a/css/tools.css b/css/tools.css index 66224346..07e9aeb8 100644 --- a/css/tools.css +++ b/css/tools.css @@ -78,6 +78,10 @@ background-image: url(../img/tools/wand.png); } +.tool-icon.tool-colorpicker { + background-image: url(../img/tools/dropper.png); +} + /*.tool-icon.tool-palette { background-image: url(../img/tools/color-palette.png); }*/ @@ -126,6 +130,10 @@ cursor: url(../img/tools/wand.png) 15 15, pointer; } +.tool-colorpicker .drawing-canvas-container:hover { + cursor: url(../img/tools/dropper.png) 0 15, pointer; +} + .tool-grid, .tool-grid label, .tool-grid input { diff --git a/img/tools/dropper.png b/img/tools/dropper.png new file mode 100644 index 0000000000000000000000000000000000000000..2a161faeb79a247dbd80ad204e01108ea328ecc1 GIT binary patch literal 543 zcmV+)0^t3LP)A3!~jw>Ki$8d;SW1I!v_WiHn30@PX?`T+jM%F?tO8AtA>5R;@Y>jE&9zku-w<6S~u(nw@fs zs|pPj1T0Q2xwQWHnl)!b!@^8~HV6HOc#q*fvJ0?j-gEiY9U&gJm)kp|U%wC#nDBko zssf;r8mtKk1pfT_qx|X9C&z-aTDaz-Xy=navHgGl{=EaVaS6_pc=_^W26lFK+m61e zMKH}-!PZBBm179+>8M4}$~m-n}~nwD~SkdEwTrTh^;K zY|r-d^PP72?C}r4us90LANO%-;sZuE2eJV`+ullx^7R0j2S83nP7laH7$~j)q}hS^ hBUFr$((DWnU;xEL=rr*FUHkw5002ovPDHLkV1mZ;^XLEo literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 59869064..c7753760 100644 --- a/index.html +++ b/index.html @@ -80,7 +80,7 @@ - + @@ -133,6 +133,7 @@ + diff --git a/js/Events.js b/js/Events.js index cdf31c42..ab065356 100644 --- a/js/Events.js +++ b/js/Events.js @@ -2,7 +2,10 @@ Events = { TOOL_SELECTED : "TOOL_SELECTED", TOOL_RELEASED : "TOOL_RELEASED", - COLOR_SELECTED: "COLOR_SELECTED", + PRIMARY_COLOR_SELECTED: "PRIMARY_COLOR_SELECTED", + PRIMARY_COLOR_UPDATED: "PRIMARY_COLOR_UPDATED", + SECONDARY_COLOR_SELECTED: "SECONDARY_COLOR_SELECTED", + SECONDARY_COLOR_UPDATED: "SECONDARY_COLOR_UPDATED", /** * When this event is emitted, a request is sent to the localstorage diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js index 94069b9e..422fc4bc 100644 --- a/js/controller/DrawingController.js +++ b/js/controller/DrawingController.js @@ -43,13 +43,19 @@ this.currentToolBehavior = toolBehavior; }, this)); - $.subscribe(Events.COLOR_SELECTED, $.proxy(function(evt, color, isPrimary) { - console.log("Color selected: ", color); - if (isPrimary) { - this.primaryColor = color; - } else { - this.secondaryColor = color; - } + /** + * 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)); diff --git a/js/controller/PaletteController.js b/js/controller/PaletteController.js index bca36b94..9287927a 100644 --- a/js/controller/PaletteController.js +++ b/js/controller/PaletteController.js @@ -11,7 +11,12 @@ */ ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) { var inputPicker = $(evt.target); - $.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]); + if(evt.data.isPrimary) { + $.publish(Events.PRIMARY_COLOR_SELECTED, [inputPicker.val()]); + } + else { + $.publish(Events.SECONDARY_COLOR_SELECTED, [inputPicker.val()]); + } }; /** @@ -57,12 +62,12 @@ */ ns.PaletteController.prototype.onPaletteColorClick_ = function (event) { var selectedColor = $(event.target).data("color"); - if (event.which == 1) { // left button - this.updateColorPicker_(selectedColor, $('#color-picker')); - $.publish(Events.COLOR_SELECTED, [selectedColor, true]); - } else if (event.which == 3) { // right button - this.updateColorPicker_(selectedColor, $('#secondary-color-picker')); - $.publish(Events.COLOR_SELECTED, [selectedColor, false]); + var isLeftClick = (event.which == 1); + var isRightClick = (event.which == 3); + if (isLeftClick) { + $.publish(Events.PRIMARY_COLOR_SELECTED, [selectedColor]); + } else if (isRightClick) { + $.publish(Events.SECONDARY_COLOR_SELECTED, [selectedColor]); } }; @@ -106,7 +111,16 @@ this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this)); - $.subscribe(Events.COLOR_SELECTED, $.proxy(function(evt, color) { + // Many interactions can trigger a COLOR_SELECTED event (eg the canvas colorpicker + // or palette color picker). Only the following code can + $.subscribe(Events.PRIMARY_COLOR_UPDATED, $.proxy(function(evt, color) { + this.updateColorPicker_(color, $('#color-picker')); + this.addColorToPalette_(color); + this.createPaletteMarkup_(); + }, this)); + + $.subscribe(Events.SECONDARY_COLOR_UPDATED, $.proxy(function(evt, color) { + this.updateColorPicker_(color, $('#secondary-color-picker')); this.addColorToPalette_(color); this.createPaletteMarkup_(); }, this)); diff --git a/js/controller/ToolController.js b/js/controller/ToolController.js index 5fe0f50c..921cb9af 100644 --- a/js/controller/ToolController.js +++ b/js/controller/ToolController.js @@ -14,7 +14,8 @@ "circle" : new pskl.drawingtools.Circle(), "move" : new pskl.drawingtools.Move(), "rectangleSelect" : new pskl.drawingtools.RectangleSelect(), - "shapeSelect" : new pskl.drawingtools.ShapeSelect() + "shapeSelect" : new pskl.drawingtools.ShapeSelect(), + "colorPicker" : new pskl.drawingtools.ColorPicker() }; this.currentSelectedTool = this.toolInstances.simplePen; diff --git a/js/drawingtools/ColorPicker.js b/js/drawingtools/ColorPicker.js new file mode 100644 index 00000000..a786daed --- /dev/null +++ b/js/drawingtools/ColorPicker.js @@ -0,0 +1,25 @@ +/* + * @provide pskl.drawingtools.ColorPicker + * + * @require pskl.utils + */ +(function() { + var ns = $.namespace("pskl.drawingtools"); + + ns.ColorPicker = function() { + this.toolId = "tool-colorpicker"; + this.helpText = "Color picker"; + }; + + pskl.utils.inherit(ns.ColorPicker, ns.BaseTool); + + /** + * @override + */ + ns.ColorPicker.prototype.applyToolAt = function(col, row, color, frame, overlay) { + if (frame.containsPixel(col, row)) { + var sampledColor = frame.getPixel(col, row); + $.publish(Events.PRIMARY_COLOR_SELECTED, [sampledColor]); + } + }; +})(); From afe75c56bfbfcaf6f81f3a3ac2add6113fb21285 Mon Sep 17 00:00:00 2001 From: grosbouddha Date: Tue, 9 Apr 2013 01:37:30 +0200 Subject: [PATCH 2/2] Clean comments --- js/controller/PaletteController.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/js/controller/PaletteController.js b/js/controller/PaletteController.js index 9287927a..a1dd161a 100644 --- a/js/controller/PaletteController.js +++ b/js/controller/PaletteController.js @@ -111,8 +111,6 @@ this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this)); - // Many interactions can trigger a COLOR_SELECTED event (eg the canvas colorpicker - // or palette color picker). Only the following code can $.subscribe(Events.PRIMARY_COLOR_UPDATED, $.proxy(function(evt, color) { this.updateColorPicker_(color, $('#color-picker')); this.addColorToPalette_(color);