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

Issue #306 : Selection : set opacity for overlay instead of pixel per pixel

Browse Source
This commit is contained in:
jdescottes 2015-09-13 21:32:45 +02:00
parent 3853a78019
commit 089b4ea14d
4 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/js/Events.js
View File

@ -30,6 +30,13 @@ var Events = {
CLOSE_SETTINGS_DRAWER : 'CLOSE_SETTINGS_DRAWER',
/**
* Fire this event to update the opacity of the overlay frame.
* Payload :
* 1st argument : opacity {Number} between 0 and 1
*/
SET_OVERLAY_OPACITY : 'SET_OVERLAY_OPACITY',
/**
* The framesheet was reseted and is now probably drastically different.
* Number of frames, content of frames, color used for the palette may have changed.

9
src/js/controller/DrawingController.js
View File

@ -62,8 +62,9 @@
$(window).resize($.proxy(this.startResizeTimer_, this));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
$.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.onFrameSizeChange_, this));
$.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
$.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
$.subscribe(Events.SET_OVERLAY_OPACITY, this.onSetOverlayOpacity_.bind(this));
pskl.app.shortcutService.addShortcut('0', this.resetZoom_.bind(this));
pskl.app.shortcutService.addShortcut('+', this.increaseZoom_.bind(this, 1));
@ -136,6 +137,10 @@
$.publish(Events.ZOOM_CHANGED);
};
ns.DrawingController.prototype.onSetOverlayOpacity_ = function (evt, opacity) {
this.overlayRenderer.setCanvasOpacity(opacity);
};
/**
* @private
*/

6
src/js/rendering/frame/FrameRenderer.js
View File

@ -93,6 +93,12 @@
return this.zoom;
};
ns.FrameRenderer.prototype.setCanvasOpacity = function (opacity) {
if (this.displayCanvas) {
this.displayCanvas.style.opacity = opacity;
}
};
ns.FrameRenderer.prototype.setDisplaySize = function (width, height) {
this.displayWidth = width;
this.displayHeight = height;

14
src/js/tools/drawing/selection/BaseSelect.js
View File

@ -35,6 +35,8 @@
this.lastCol = col;
this.lastRow = row;
$.publish(Events.SET_OVERLAY_OPACITY, [0.5]);
// The select tool can be in two different state.
// If the inital click of the tool is not on a selection, we go in 'select'
// mode to create a selection.
@ -67,9 +69,10 @@
if (this.mode == 'select') {
this.onSelectEnd_(col, row, color, frame, overlay);
} else if (this.mode == 'moveSelection') {
this.onSelectionDragEnd_(col, row, color, frame, overlay);
}
$.publish(Events.SET_OVERLAY_OPACITY, [1]);
};
/**
@ -110,19 +113,12 @@
for (var i = 0, l = pixels.length; i < l ; i++) {
var pixel = pixels[i];
var hasColor = pixel.color && pixel.color !== Constants.TRANSPARENT_COLOR ;
var color = hasColor ? this.getTransparentVariant(pixel.color) : Constants.SELECTION_TRANSPARENT_COLOR;
var color = hasColor ? pixel.color : Constants.SELECTION_TRANSPARENT_COLOR;
overlay.setPixel(pixels[i].col, pixels[i].row, color);
}
};
ns.BaseSelect.prototype.getTransparentVariant = function (colorStr) {
var color = window.tinycolor(colorStr);
color = window.tinycolor.lighten(color, 10);
color.setAlpha(0.5);
return color.toRgbString();
};
// The list of callbacks to implement by specialized tools to implement the selection creation behavior.
/** @protected */
ns.BaseSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {};