From 4c1c96095f4eff151550bd7d31a75aad4a00b3c0 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Thu, 6 Sep 2012 22:37:19 +0200 Subject: [PATCH] Added secondary color support. Added : - second color picker - removed automatic switch to eraser when using right click - colors are automatically added to palette when selected --- css/tools.css | 15 ++++++++++++--- index.html | 1 + js/Palette.js | 37 +++++++++++++++++++++++++------------ js/ToolSelector.js | 12 ------------ js/piskel.js | 30 +++++++++++++++++++++++------- 5 files changed, 61 insertions(+), 34 deletions(-) diff --git a/css/tools.css b/css/tools.css index 2c1a0ba6..d4622d9c 100644 --- a/css/tools.css +++ b/css/tools.css @@ -9,6 +9,7 @@ .tool-icon { float: left; + cursor : pointer; width: 30px; height: 30px; background-color: transparent; @@ -74,17 +75,25 @@ } .tool-icon:hover { - cursor: pointer; background-color: #eee; } +.tool-color-picker { + padding: 5px 0 0 5px; + cursor : default; +} + .tool-color-picker input { - width: 12px; height: 12px; + width: 8px; height: 8px; border: 1px solid black; padding: 1px; background: white; - margin: 7px 0 0 7px; cursor: pointer; + position : relative; +} + +#secondary-color-picker { + top : 8px; } .tool-palette { diff --git a/index.html b/index.html index c9148848..2ebd044e 100644 --- a/index.html +++ b/index.html @@ -40,6 +40,7 @@
  • +
    • diff --git a/js/Palette.js b/js/Palette.js index e0336c92..e0ff02a8 100644 --- a/js/Palette.js +++ b/js/Palette.js @@ -14,9 +14,9 @@ pskl.Palette = (function() { /** * @private */ - var onPickerChange_ = function(evt) { + var onPickerChange_ = function(evt, isPrimary) { var inputPicker = $(evt.target); - $.publish(Events.COLOR_SELECTED, [inputPicker.val()]); + $.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]); }; /** @@ -52,8 +52,17 @@ pskl.Palette = (function() { */ var onPaletteColorClick_ = function (event) { var selectedColor = $(event.target).data("color"); - var colorPicker = $('#color-picker'); - if (selectedColor == Constants.TRANSPARENT_COLOR) { + if (event.which == 1) { // left button + updateColorPicker(selectedColor, $('#color-picker')[0]); + $.publish(Events.COLOR_SELECTED, [selectedColor, true]); + } else if (event.which == 3) { // right button + updateColorPicker(selectedColor, $('#secondary-color-picker')[0]); + $.publish(Events.COLOR_SELECTED, [selectedColor, false]); + } + }; + + var updateColorPicker = function (color, colorPicker) { + if (color == Constants.TRANSPARENT_COLOR) { // We can set the current palette color to transparent. // You can then combine this transparent color with an advanced // tool for customized deletions. @@ -63,13 +72,12 @@ pskl.Palette = (function() { // The colorpicker can't be set to a transparent state. // We set its background to white and insert the // string "TRANSPARENT" to mimic this state: - colorPicker[0].color.fromString("#fff"); - colorPicker.val("TRANSPARENT"); + colorPicker.color.fromString("#fff"); + colorPicker.val(Constants.TRANSPARENT_COLOR); } else { - colorPicker[0].color.fromString(selectedColor); + colorPicker.color.fromString(color); } - $.publish(Events.COLOR_SELECTED, [selectedColor]) - }; + } return { init: function(framesheet) { @@ -83,15 +91,20 @@ pskl.Palette = (function() { createPalette_(framesheet.getUsedColors()); }); - paletteRoot.click(onPaletteColorClick_); - $.subscribe(Events.COLOR_USED, function(evt, color) { + paletteRoot.mouseup(onPaletteColorClick_); + $.subscribe(Events.COLOR_SELECTED, function(evt, color) { addColorToPalette_(color); }); // Initialize colorpicker: var colorPicker = $('#color-picker'); colorPicker.val(Constants.DEFAULT_PEN_COLOR); - colorPicker.change(onPickerChange_); + colorPicker.change({isPrimary : true}, onPickerChange_); + + + var secondaryColorPicker = $('#secondary-color-picker'); + secondaryColorPicker.val(Constants.TRANSPARENT_COLOR); + secondaryColorPicker.change({isPrimary : false}, onPickerChange_); } }; diff --git a/js/ToolSelector.js b/js/ToolSelector.js index 1cf873fb..f00e3576 100644 --- a/js/ToolSelector.js +++ b/js/ToolSelector.js @@ -74,18 +74,6 @@ pskl.ToolSelector = (function() { selectTool_(toolInstances.simplePen); // Activate listener on tool panel: $("#tools-container").click(onToolIconClicked_); - - // Special right click handlers (select the eraser tool) - $.subscribe(Events.CANVAS_RIGHT_CLICKED, function() { - previousSelectedTool = currentSelectedTool; - currentSelectedTool = toolInstances.eraser; - $.publish(Events.TOOL_SELECTED, [currentSelectedTool]); - }); - - $.subscribe(Events.CANVAS_RIGHT_CLICK_RELEASED, function() { - currentSelectedTool = previousSelectedTool; - $.publish(Events.TOOL_SELECTED, [currentSelectedTool]); - }); } }; })(); diff --git a/js/piskel.js b/js/piskel.js index 6ebef1bc..da2f09c6 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -39,7 +39,10 @@ $.namespace("pskl"); isRightClicked = false, activeFrameIndex = -1, animIndex = 0, - penColor = Constants.DEFAULT_PEN_COLOR, + + primaryColor = Constants.DEFAULT_PEN_COLOR, + secondaryColor = Constants.TRANSPARENT_COLOR, + currentFrame = null; currentToolBehavior = null, previousMousemoveTime = 0; @@ -98,9 +101,13 @@ $.namespace("pskl"); currentToolBehavior = toolBehavior; }); - $.subscribe(Events.COLOR_SELECTED, function(evt, color) { + $.subscribe(Events.COLOR_SELECTED, function(evt, color, isPrimary) { console.log("Color selected: ", color); - penColor = color; + if (isPrimary) { + primaryColor = color; + } else { + secondaryColor = color; + } }); $.subscribe(Events.REFRESH, function() { @@ -176,7 +183,7 @@ $.namespace("pskl"); drawingAreaContainer.addEventListener('mousemove', this.onMousemove.bind(this)); drawingAreaContainer.style.width = framePixelWidth * drawingCanvasDpi + "px"; drawingAreaContainer.style.height = framePixelHeight * drawingCanvasDpi + "px"; - drawingAreaContainer.addEventListener('contextmenu', this.onCanvasContextMenu); + document.body.addEventListener('contextmenu', this.onCanvasContextMenu); }, removeFrame: function(frameIndex) { @@ -190,6 +197,14 @@ $.namespace("pskl"); this.setActiveFrameAndRedraw(frameIndex + 1); }, + getCurrentColor : function () { + if(isRightClicked) { + return secondaryColor; + } else { + return primaryColor; + } + }, + onMousedown : function (event) { isClicked = true; @@ -197,11 +212,12 @@ $.namespace("pskl"); isRightClicked = true; $.publish(Events.CANVAS_RIGHT_CLICKED); } + var spriteCoordinate = this.getSpriteCoordinate(event); currentToolBehavior.applyToolAt( spriteCoordinate.col, spriteCoordinate.row, - penColor, + this.getCurrentColor(), this.drawingController ); @@ -218,7 +234,7 @@ $.namespace("pskl"); currentToolBehavior.moveToolAt( spriteCoordinate.col, spriteCoordinate.row, - penColor, + this.getCurrentColor(), this.drawingController ); @@ -251,7 +267,7 @@ $.namespace("pskl"); currentToolBehavior.releaseToolAt( spriteCoordinate.col, spriteCoordinate.row, - penColor, + this.getCurrentColor(), this.drawingController );