mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Support secondary color for color picker
This commit is contained in:
parent
7357ed0908
commit
9b40b11703
@ -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",
|
||||
};
|
@ -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
|
||||
*/
|
||||
|
@ -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:
|
||||
|
@ -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]);
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
Loading…
Reference in New Issue
Block a user