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:
jdescottes
2014-06-19 23:33:57 +02:00
parent fbb5ccc7e2
commit 98f59fecf1
9 changed files with 129 additions and 13 deletions

View File

@ -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);
};

View File

@ -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) {