feature : zoom : continued

- simplified Renderer(s) architecture (removed decorator,
  CachedFrameRenderer simply inherits from FrameRenderer now)
- keeping AbstractRenderer to act as interface
- fixed issue with layers : forgot to clone the first frame while merging
  and therefore was modifying the original frame when I just wanted to
  create a tmp frame (FrameUtils.js)
- extracted the mousemove throttling delay used in DrawingController to
  Constants.js and reduced it from 40ms to 10ms

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

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

js/rendering/CachedRenderer.js

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

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);
+    }
+  };
 })();

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]);

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",