Support secondary color for color picker

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

View File

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

View File

@ -98,7 +98,8 @@
coords.col, coords.row,
this.getCurrentColor_(),
this.framesheet.getCurrentFrame(),
this.overlayFrame
this.overlayFrame,
this.wrapEvtInfo_(event)
);
$.publish(Events.LOCALSTORAGE_REQUEST);
@ -118,7 +119,8 @@
coords.col, coords.row,
this.getCurrentColor_(),
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.
@ -131,7 +133,8 @@
coords.col, coords.row,
this.getCurrentColor_(),
this.framesheet.getCurrentFrame(),
this.overlayFrame
this.overlayFrame,
this.wrapEvtInfo_(event)
);
}
this.previousMousemoveTime = currentTime;
@ -157,13 +160,27 @@
coords.col, coords.row,
this.getCurrentColor_(),
this.framesheet.getCurrentFrame(),
this.overlayFrame
this.overlayFrame,
this.wrapEvtInfo_(event)
);
$.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
*/

View File

@ -18,27 +18,7 @@
$.publish(Events.SECONDARY_COLOR_SELECTED, [inputPicker.val()]);
}
};
/**
* @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
*/
@ -102,11 +82,9 @@
// Initialize palette:
this.addColorsToPalette_(this.framesheet.getUsedColors());
this.createPaletteMarkup_();
$.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) {
this.addColorsToPalette_(this.framesheet.getUsedColors());
this.createPaletteMarkup_();
}, this));
this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this));
@ -114,13 +92,11 @@
$.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));
// Initialize colorpickers:

View File

@ -16,10 +16,14 @@
/**
* @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)) {
var sampledColor = frame.getPixel(col, row);
$.publish(Events.PRIMARY_COLOR_SELECTED, [sampledColor]);
if (context.button == Constants.LEFT_BUTTON) {
$.publish(Events.PRIMARY_COLOR_SELECTED, [sampledColor]);
} else if (context.button == Constants.RIGHT_BUTTON) {
$.publish(Events.SECONDARY_COLOR_SELECTED, [sampledColor]);
}
}
};
})();