wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding simple color picker

Browse source 
Left click colorpicker tool:
- Create PRIMARY/SECONDARY_COLOR_SELECTED/UPDATED events
- remove isPrimary arguments
This commit is contained in:
grosbouddha 2013-04-09 01:32:30 +02:00
parent 198bbaa65d
commit 1441dcd67a
8 changed files with 76 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
css/tools.css
View file

@ -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 {

BIN
img/tools/dropper.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 543 B

3
index.html
View file

@ -80,7 +80,7 @@
<script src="js/lib/pubsub.js"></script>
<script src="js/lib/bootstrap/bootstrap.js"></script>
<!-- GIF Encoding DEVICES ! -->
<!-- GIF Encoding DEVICES ! OH YEAY! -->
<script src="js/lib/gif/GIFEncoder.js"></script>
<script src="js/lib/gif/b64.js"></script>
<script src="js/lib/gif/NeuQuant.js"></script>
@ -133,6 +133,7 @@
<script src="js/drawingtools/selectiontools/BaseSelect.js"></script>
<script src="js/drawingtools/selectiontools/RectangleSelect.js"></script>
<script src="js/drawingtools/selectiontools/ShapeSelect.js"></script>
<script src="js/drawingtools/ColorPicker.js"></script>
<!-- Application controller and initialization -->
<script src="js/piskel.js"></script>

5
js/Events.js
View file

@ -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

20
js/controller/DrawingController.js
View file

@ -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));

30
js/controller/PaletteController.js
View file

@ -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));

3
js/controller/ToolController.js
View file

@ -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
View 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]);
}
};
})();