mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Support secondary color for color picker

Browse Source
This commit is contained in:
jdescottes
2013-04-09 07:24:07 +02:00
parent 7357ed0908
commit 9b40b11703
4 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
js/Constants.js
View File

@ -28,5 +28,8 @@ var Constants = {
PISKEL_SERVICE_URL: 'http://3.piskel-app.appspot.com', PISKEL_SERVICE_URL: 'http://3.piskel-app.appspot.com',
GRID_STROKE_WIDTH: 1, GRID_STROKE_WIDTH: 1,
GRID_STROKE_COLOR: "lightgray" GRID_STROKE_COLOR: "lightgray",
LEFT_BUTTON : "left_button_1",
RIGHT_BUTTON : "right_button_2",
}; };

25
js/controller/DrawingController.js
View File

@ -98,7 +98,8 @@
coords.col, coords.row, coords.col, coords.row,
this.getCurrentColor_(), this.getCurrentColor_(),
this.framesheet.getCurrentFrame(), this.framesheet.getCurrentFrame(),
this.overlayFrame this.overlayFrame,
this.wrapEvtInfo_(event)
); );
$.publish(Events.LOCALSTORAGE_REQUEST); $.publish(Events.LOCALSTORAGE_REQUEST);
@ -118,7 +119,8 @@
coords.col, coords.row, coords.col, coords.row,
this.getCurrentColor_(), this.getCurrentColor_(),
this.framesheet.getCurrentFrame(), this.framesheet.getCurrentFrame(),
this.overlayFrame this.overlayFrame,
this.wrapEvtInfo_(event)
); );
// TODO(vincz): Find a way to move that to the model instead of being at the interaction level. // TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
@ -131,7 +133,8 @@
coords.col, coords.row, coords.col, coords.row,
this.getCurrentColor_(), this.getCurrentColor_(),
this.framesheet.getCurrentFrame(), this.framesheet.getCurrentFrame(),
this.overlayFrame this.overlayFrame,
this.wrapEvtInfo_(event)
); );
} }
this.previousMousemoveTime = currentTime; this.previousMousemoveTime = currentTime;
@ -157,13 +160,27 @@
coords.col, coords.row, coords.col, coords.row,
this.getCurrentColor_(), this.getCurrentColor_(),
this.framesheet.getCurrentFrame(), this.framesheet.getCurrentFrame(),
this.overlayFrame this.overlayFrame,
this.wrapEvtInfo_(event)
); );
$.publish(Events.TOOL_RELEASED); $.publish(Events.TOOL_RELEASED);
} }
}, },
/**
* @private
*/
ns.DrawingController.prototype.wrapEvtInfo_ = function (event) {
var evtInfo = {};
if (event.button == 0) {
evtInfo.button = Constants.LEFT_BUTTON;
} else if (event.button == 2) {
evtInfo.button = Constants.RIGHT_BUTTON;
}
return evtInfo;
},
/** /**
* @private * @private
*/ */

24
js/controller/PaletteController.js
View File

@ -19,26 +19,6 @@
} }
}; };
/**
* @private
*/
ns.PaletteController.prototype.createPaletteMarkup_ = function (colors) {
// Always adding transparent color
this.paletteRoot.html('<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>');
for(var i=0, l=this.paletteColors.length; i<l; i++) {
if(color != Constants.TRANSPARENT_COLOR) {
var color = this.paletteColors[i];
var colorEl = document.createElement("li");
colorEl.className = "palette-color";
colorEl.setAttribute("data-color", color);
colorEl.setAttribute("title", color);
colorEl.style.background = color;
this.paletteRoot.append(colorEl);
}
}
};
/** /**
* @private * @private
*/ */
@ -102,11 +82,9 @@
// Initialize palette: // Initialize palette:
this.addColorsToPalette_(this.framesheet.getUsedColors()); this.addColorsToPalette_(this.framesheet.getUsedColors());
this.createPaletteMarkup_();
$.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) { $.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) {
this.addColorsToPalette_(this.framesheet.getUsedColors()); this.addColorsToPalette_(this.framesheet.getUsedColors());
this.createPaletteMarkup_();
}, this)); }, this));
this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this)); this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this));
@ -114,13 +92,11 @@
$.subscribe(Events.PRIMARY_COLOR_UPDATED, $.proxy(function(evt, color) { $.subscribe(Events.PRIMARY_COLOR_UPDATED, $.proxy(function(evt, color) {
this.updateColorPicker_(color, $('#color-picker')); this.updateColorPicker_(color, $('#color-picker'));
this.addColorToPalette_(color); this.addColorToPalette_(color);
this.createPaletteMarkup_();
}, this)); }, this));
$.subscribe(Events.SECONDARY_COLOR_UPDATED, $.proxy(function(evt, color) { $.subscribe(Events.SECONDARY_COLOR_UPDATED, $.proxy(function(evt, color) {
this.updateColorPicker_(color, $('#secondary-color-picker')); this.updateColorPicker_(color, $('#secondary-color-picker'));
this.addColorToPalette_(color); this.addColorToPalette_(color);
this.createPaletteMarkup_();
}, this)); }, this));
// Initialize colorpickers: // Initialize colorpickers:

6
js/drawingtools/ColorPicker.js
View File

@ -16,10 +16,14 @@
/** /**
* @override * @override
*/ */
ns.ColorPicker.prototype.applyToolAt = function(col, row, color, frame, overlay) { ns.ColorPicker.prototype.applyToolAt = function(col, row, color, frame, overlay, context) {
if (frame.containsPixel(col, row)) { if (frame.containsPixel(col, row)) {
var sampledColor = frame.getPixel(col, row); var sampledColor = frame.getPixel(col, row);
if (context.button == Constants.LEFT_BUTTON) {
$.publish(Events.PRIMARY_COLOR_SELECTED, [sampledColor]); $.publish(Events.PRIMARY_COLOR_SELECTED, [sampledColor]);
} else if (context.button == Constants.RIGHT_BUTTON) {
$.publish(Events.SECONDARY_COLOR_SELECTED, [sampledColor]);
}
} }
}; };
})(); })();