mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Feature : add onion skin option
New option in application settings : onion skin. You can choose the overlay to display now : - no overlay - onion skin (default) - layer preview (previous default) Available in Application Settings panel. Only one overlay can be used at the same time. The onion skin overlay is driven by a new OnionSkinRenderer maanged by the drawing. The drawing controller is responsible for instanciating and 'choosing' the overlay renderer. When switching to a new overlay, other overlays are cleared and flushed (they cache their rendering frame, flush empties the cache). NB : flush is only available on LayersRenderer and OnionSkinRenderer for now.
This commit is contained in:
@ -32,13 +32,15 @@
|
||||
|
||||
this.overlayRenderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, renderingOptions, ["canvas-overlay"]);
|
||||
this.renderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, renderingOptions, ["drawing-canvas"]);
|
||||
this.onionSkinRenderer = new pskl.rendering.OnionSkinRenderer(this.container, renderingOptions, piskelController);
|
||||
this.layersRenderer = new pskl.rendering.layer.LayersRenderer(this.container, renderingOptions, piskelController);
|
||||
|
||||
this.compositeRenderer = new pskl.rendering.CompositeRenderer();
|
||||
this.compositeRenderer
|
||||
.add(this.overlayRenderer)
|
||||
.add(this.renderer)
|
||||
.add(this.layersRenderer);
|
||||
.add(this.layersRenderer)
|
||||
.add(this.onionSkinRenderer);
|
||||
|
||||
// State of drawing controller:
|
||||
this.isClicked = false;
|
||||
@ -111,6 +113,12 @@
|
||||
ns.DrawingController.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) {
|
||||
if(settingsName == pskl.UserSettings.SHOW_GRID) {
|
||||
console.warn('DrawingController:onUserSettingsChange_ not implemented !');
|
||||
} else if (settingsName == pskl.UserSettings.OVERLAY) {
|
||||
this.onionSkinRenderer.clear();
|
||||
this.onionSkinRenderer.flush();
|
||||
this.layersRenderer.clear();
|
||||
this.layersRenderer.flush();
|
||||
this.render();
|
||||
}
|
||||
};
|
||||
|
||||
@ -311,7 +319,13 @@
|
||||
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(currentFrame);
|
||||
}
|
||||
|
||||
this.layersRenderer.render();
|
||||
var overlaySetting = pskl.UserSettings.get(pskl.UserSettings.OVERLAY);
|
||||
if (overlaySetting === Constants.OVERLAY_ONION_SKIN) {
|
||||
this.onionSkinRenderer.render();
|
||||
} else if (overlaySetting === Constants.OVERLAY_LAYER_PREVIEW) {
|
||||
this.layersRenderer.render();
|
||||
}
|
||||
|
||||
this.renderer.render(currentFrame);
|
||||
this.overlayRenderer.render(this.overlayFrame);
|
||||
};
|
||||
|
@ -18,9 +18,9 @@
|
||||
$('#grid-width').val(gridWidth);
|
||||
$('#grid-width').change(this.onGridWidthChange.bind(this));
|
||||
|
||||
var tiledPreview = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
|
||||
$('#tiled-preview').prop('checked', tiledPreview);
|
||||
$('#tiled-preview').change(this.onTiledPreviewChange.bind(this));
|
||||
var overlay = pskl.UserSettings.get(pskl.UserSettings.OVERLAY);
|
||||
$('#overlay').val(overlay);
|
||||
$('#overlay').change(this.onOverlayChange.bind(this));
|
||||
|
||||
// Handle canvas background changes:
|
||||
$('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
|
||||
@ -31,9 +31,9 @@
|
||||
pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, parseInt(width, 10));
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.onTiledPreviewChange = function (evt) {
|
||||
var checked = $('#tiled-preview').prop('checked');
|
||||
pskl.UserSettings.set(pskl.UserSettings.TILED_PREVIEW, checked);
|
||||
ns.ApplicationSettingsController.prototype.onOverlayChange = function (evt) {
|
||||
var overlay = $('#overlay').val();
|
||||
pskl.UserSettings.set(pskl.UserSettings.OVERLAY, overlay);
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.onBackgroundClick = function (evt) {
|
||||
|
Reference in New Issue
Block a user