mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Adding simple color picker
Left click colorpicker tool: - Create PRIMARY/SECONDARY_COLOR_SELECTED/UPDATED events - remove isPrimary arguments
This commit is contained in:
@ -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
|
||||
|
@ -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));
|
||||
|
@ -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));
|
||||
|
@ -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;
|
||||
|
25
js/drawingtools/ColorPicker.js
Normal file
25
js/drawingtools/ColorPicker.js
Normal file
@ -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]);
|
||||
}
|
||||
};
|
||||
})();
|
Reference in New Issue
Block a user