diff --git a/js/Constants.js b/js/Constants.js index abf2726c..6ca8844e 100644 --- a/js/Constants.js +++ b/js/Constants.js @@ -48,5 +48,6 @@ var Constants = { GRID_STROKE_WIDTH: 1, LEFT_BUTTON : 'left_button_1', - RIGHT_BUTTON : 'right_button_2' + RIGHT_BUTTON : 'right_button_2', + MOUSEMOVE_THROTTLING : 10 }; \ No newline at end of file diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js index e3520975..11e773e3 100644 --- a/js/controller/DrawingController.js +++ b/js/controller/DrawingController.js @@ -143,7 +143,7 @@ ns.DrawingController.prototype.onMousemove_ = function (event) { var currentTime = new Date().getTime(); // Throttling of the mousemove event: - if ((currentTime - this.previousMousemoveTime) > 40 ) { + if ((currentTime - this.previousMousemoveTime) > Constants.MOUSEMOVE_THROTTLING ) { var coords = this.renderer.getCoordinates(event.clientX, event.clientY); if (this.isClicked) { diff --git a/js/rendering/CachedRenderer.js b/js/rendering/CachedRenderer.js deleted file mode 100644 index e02040f5..00000000 --- a/js/rendering/CachedRenderer.js +++ /dev/null @@ -1,64 +0,0 @@ -(function () { - var ns = $.namespace('pskl.rendering'); - - /** - * Decorator on a renderer that will only render the frame if something has changed in the frame itself or in the renderer's configuration - * @param {pskl.rendering.AbstractRenderer} renderer - */ - ns.CachedRenderer = function (renderer) { - this.decoratedRenderer = renderer; - this.serializedFrame = ''; - }; - - pskl.utils.inherit(ns.CachedRenderer, ns.AbstractRenderer); - - ns.CachedRenderer.prototype.render = function (frame) { - var offset = this.getOffset(); - var size = this.getDisplaySize(); - var serializedFrame = [this.getZoom(), offset.x, offset.y, size.width, size.height, frame.serialize()].join('-'); - if (this.serializedFrame != serializedFrame) { - this.serializedFrame = serializedFrame; - this.decoratedRenderer.render(frame); - } - }; - - ns.CachedRenderer.prototype.clear = function () { - this.decoratedRenderer.clear(); - }; - - ns.CachedRenderer.prototype.getCoordinates = function (x, y) { - return this.decoratedRenderer.getCoordinates(x, y); - }; - - ns.CachedRenderer.prototype.setGridEnabled = function (b) { - this.decoratedRenderer.setGridEnabled(b); - }; - - ns.CachedRenderer.prototype.isGridEnabled = function () { - return this.decoratedRenderer.isGridEnabled(); - }; - - ns.CachedRenderer.prototype.getZoom = function () { - return this.decoratedRenderer.getZoom(); - }; - - ns.CachedRenderer.prototype.setZoom = function (zoom) { - return this.decoratedRenderer.setZoom(zoom); - }; - - ns.CachedRenderer.prototype.moveOffset = function (x, y) { - this.decoratedRenderer.moveOffset(x, y); - }; - - ns.CachedRenderer.prototype.getOffset = function () { - return this.decoratedRenderer.getOffset(); - }; - - ns.CachedRenderer.prototype.setDisplaySize = function (w, h) { - this.decoratedRenderer.setDisplaySize(w, h); - }; - - ns.CachedRenderer.prototype.getDisplaySize = function () { - return this.decoratedRenderer.getDisplaySize(); - }; -})(); \ No newline at end of file diff --git a/js/rendering/frame/CachedFrameRenderer.js b/js/rendering/frame/CachedFrameRenderer.js index 4949549d..819f66ea 100644 --- a/js/rendering/frame/CachedFrameRenderer.js +++ b/js/rendering/frame/CachedFrameRenderer.js @@ -2,17 +2,25 @@ var ns = $.namespace('pskl.rendering.frame'); /** - * Cached renderer that can uses the same constructor as pskl.rendering.FrameRenderer - * It will build a FrameRenderer on the fly to use as decorated renderer + * 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 */ ns.CachedFrameRenderer = function (container, renderingOptions, classes) { - var frameRenderer = new pskl.rendering.frame.FrameRenderer(container, renderingOptions, classes); - pskl.rendering.CachedRenderer.call(this, frameRenderer); + pskl.rendering.frame.FrameRenderer.call(this, container, renderingOptions, classes); + this.serializedFrame = ''; }; - pskl.utils.inherit(pskl.rendering.frame.CachedFrameRenderer, pskl.rendering.CachedRenderer); + pskl.utils.inherit(pskl.rendering.frame.CachedFrameRenderer, pskl.rendering.frame.FrameRenderer); + ns.CachedFrameRenderer.prototype.render = function (frame) { + var offset = this.getOffset(); + var size = this.getDisplaySize(); + var serializedFrame = [this.getZoom(), offset.x, offset.y, size.width, size.height, frame.serialize()].join('-'); + if (this.serializedFrame != serializedFrame) { + this.serializedFrame = serializedFrame; + this.superclass.render.call(this, frame); + } + }; })(); diff --git a/js/utils/FrameUtils.js b/js/utils/FrameUtils.js index 7f422006..b28d154d 100644 --- a/js/utils/FrameUtils.js +++ b/js/utils/FrameUtils.js @@ -5,7 +5,7 @@ merge : function (frames) { var merged = null; if (frames.length) { - merged = frames[0]; + merged = frames[0].clone(); var w = merged.getWidth(), h = merged.getHeight(); for (var i = 1 ; i < frames.length ; i++) { pskl.utils.FrameUtils.mergeFrames_(merged, frames[i]); diff --git a/piskel-script-list.js b/piskel-script-list.js index 9ab2f1b2..fe681dd6 100644 --- a/piskel-script-list.js +++ b/piskel-script-list.js @@ -38,7 +38,6 @@ exports.scripts = [ // Rendering "js/rendering/RendererManager.js", "js/rendering/AbstractRenderer.js", - "js/rendering/CachedRenderer.js", "js/rendering/frame/FrameRenderer.js", "js/rendering/frame/CachedFrameRenderer.js", "js/rendering/CanvasRenderer.js",