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

Fix #242, onion skin rendered not cleared if 0 frames

Browse Source
This commit is contained in:
juliandescottes
2014-12-27 15:02:41 +01:00
parent 043f077408
commit 5831447f75
8 changed files with 201 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/js/rendering/OnionSkinRenderer.js
View File

@@ -1,32 +1,63 @@
(function () {
var ns = $.namespace('pskl.rendering');
ns.OnionSkinRenderer = function (container, renderingOptions, piskelController) {
ns.OnionSkinRenderer = function (renderer, piskelController) {
pskl.rendering.CompositeRenderer.call(this);
this.piskelController = piskelController;
// Do not use CachedFrameRenderers here, since the caching will be performed in the render method of LayersRenderer
this.renderer = new pskl.rendering.frame.FrameRenderer(container, renderingOptions, ["onion-skin-canvas"]);
this.renderer = renderer;
this.add(this.renderer);
this.serializedRendering = '';
this.hash = '';
};
ns.OnionSkinRenderer.createInContainer = function (container, renderingOptions, piskelController) {
// Do not use CachedFrameRenderers here, caching is performed in the render method
var renderer = new pskl.rendering.frame.FrameRenderer(container, renderingOptions, ['onion-skin-canvas']);
return new ns.OnionSkinRenderer(renderer, piskelController);
};
pskl.utils.inherit(pskl.rendering.OnionSkinRenderer, pskl.rendering.CompositeRenderer);
ns.OnionSkinRenderer.prototype.render = function () {
var frames = this.getOnionFrames_();
var hash = this.computeHash_(frames);
if (this.hash != hash) {
this.hash = hash;
this.clear();
if (frames.length > 0) {
var mergedFrame = pskl.utils.FrameUtils.merge(frames);
this.renderer.render(mergedFrame);
}
}
};
ns.OnionSkinRenderer.prototype.getOnionFrames_ = function () {
var frames = [];
var currentFrameIndex = this.piskelController.getCurrentFrameIndex();
var layer = this.piskelController.getCurrentLayer();
var previousIndex = currentFrameIndex - 1;
var previousFrame = layer.getFrameAt(previousIndex);
if (previousFrame) {
frames.push(previousFrame);
}
var nextIndex = currentFrameIndex + 1;
var nextFrame = layer.getFrameAt(nextIndex);
if (nextFrame) {
frames.push(nextFrame);
}
return frames;
};
ns.OnionSkinRenderer.prototype.computeHash_ = function (frames) {
var offset = this.getOffset();
var size = this.getDisplaySize();
var layers = this.piskelController.getLayers();
var currentFrameIndex = this.piskelController.getCurrentFrameIndex();
var frames = [];
this.addFrameAtIndexToArray_(currentFrameIndex - 1, frames);
this.addFrameAtIndexToArray_(currentFrameIndex + 1, frames);
var serializedRendering = [
return [
this.getZoom(),
this.getGridWidth(),
offset.x,
@@ -37,25 +68,7 @@
return f.getHash();
}).join('-'),
layers.length
].join("-");
if (this.serializedRendering != serializedRendering) {
this.serializedRendering = serializedRendering;
if (frames.length > 0) {
this.clear();
var mergedFrame = pskl.utils.FrameUtils.merge(frames);
this.renderer.render(mergedFrame);
}
}
};
ns.OnionSkinRenderer.prototype.addFrameAtIndexToArray_ = function (frameIndex, frames) {
var layer = this.piskelController.getCurrentLayer();
if (this.piskelController.hasFrameAt(frameIndex)) {
frames.push(layer.getFrameAt(frameIndex));
}
].join('-');
};
/**
@@ -72,6 +85,6 @@
};
ns.OnionSkinRenderer.prototype.flush = function () {
this.serializedRendering = '';
this.hash = '';
};
})();

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

@@ -5,10 +5,10 @@
* FrameRenderer implementation that prevents unnecessary redraws.
* @param {HtmlElement} container HtmlElement to use as parentNode of the Frame
* @param {Object} renderingOptions
* @param {Array} classes array of strings to use for css classes
* @param {Array} classList array of strings to use for css classes
*/
ns.CachedFrameRenderer = function (container, renderingOptions, classes) {
pskl.rendering.frame.FrameRenderer.call(this, container, renderingOptions, classes);
ns.CachedFrameRenderer = function (container, renderingOptions, classList) {
pskl.rendering.frame.FrameRenderer.call(this, container, renderingOptions, classList);
this.serializedFrame = '';
};

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

@@ -5,9 +5,9 @@
* FrameRenderer will display a given frame inside a canvas element.
* @param {HtmlElement} container HtmlElement to use as parentNode of the Frame
* @param {Object} renderingOptions
* @param {Array} classes array of strings to use for css classes
* @param {Array} classList array of strings to use for css classList
*/
ns.FrameRenderer = function (container, renderingOptions, classes) {
ns.FrameRenderer = function (container, renderingOptions, classList) {
this.defaultRenderingOptions = {
'supportGridRendering' : false,
'zoom' : 1
@@ -39,8 +39,8 @@
this.supportGridRendering = renderingOptions.supportGridRendering;
this.classes = classes || [];
this.classes.push('canvas');
this.classList = classList || [];
this.classList.push('canvas');
/**
* Off dom canvas, will be used to draw the frame at 1:1 ratio
@@ -153,7 +153,7 @@
var height = this.displayHeight;
var width = this.displayWidth;
this.displayCanvas = pskl.utils.CanvasUtils.createCanvas(width, height, this.classes);
this.displayCanvas = pskl.utils.CanvasUtils.createCanvas(width, height, this.classList);
pskl.utils.CanvasUtils.disableImageSmoothing(this.displayCanvas);
this.container.append(this.displayCanvas);
};