feature : zoom :

- Extracted layers rendering logic from DrawingController to dedicated
  class
- Turned RendererManager into Composite renderer (extends
  AbstractRenderer)
- AbstractRenderer no longer contains a render(frame) method, implementing
  the render differs too much between my current renderers to impose a
  single signature, but I should improve this later if too much time on ma
  hands

js/controller/DrawingController.js

@@ -28,16 +28,13 @@
 
     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.layersRenderer = new pskl.rendering.layer.LayersRenderer(this.container, renderingOptions, piskelController);
 
-    this.layersBelowRenderer = new pskl.rendering.frame.FrameRenderer(this.container, renderingOptions, ["layers-canvas", "layers-below-canvas"]);
-    this.layersAboveRenderer = new pskl.rendering.frame.FrameRenderer(this.container, renderingOptions, ["layers-canvas", "layers-above-canvas"]);
-
-    this.rendererManager = new pskl.rendering.RendererManager();
-    this.rendererManager
+    this.compositeRenderer = new pskl.rendering.CompositeRenderer();
+    this.compositeRenderer
       .add(this.overlayRenderer)
       .add(this.renderer)
-      .add(this.layersBelowRenderer)
-      .add(this.layersAboveRenderer);
+      .add(this.layersRenderer);
 
     // State of drawing controller:
     this.isClicked = false;
@@ -100,7 +97,7 @@
   },
 
   ns.DrawingController.prototype.afterWindowResize_ = function () {
-    this.rendererManager.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
+    this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
   },
 
   /**
@@ -181,9 +178,9 @@
     var delta = event.wheelDeltaY;
     var currentZoom = this.renderer.getZoom();
     if (delta > 0) {
-      this.rendererManager.setZoom(currentZoom + 1);
+      this.compositeRenderer.setZoom(currentZoom + 1);
     } else if (delta < 0) {
-      this.rendererManager.setZoom(currentZoom - 1);
+      this.compositeRenderer.setZoom(currentZoom - 1);
     }
   };
 
@@ -261,60 +258,16 @@
   };
 
   ns.DrawingController.prototype.render = function () {
-    this.renderLayers();
-    this.renderFrame();
-    this.renderOverlay();
-  };
-
-  ns.DrawingController.prototype.renderFrame = function () {
-    this.renderer.render(this.piskelController.getCurrentFrame());
-  };
-
-  ns.DrawingController.prototype.renderOverlay = function () {
     var currentFrame = this.piskelController.getCurrentFrame();
     if (!currentFrame.isSameSize(this.overlayFrame)) {
       this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(currentFrame);
     }
+
+    this.layersRenderer.render();
+    this.renderer.render(currentFrame);
     this.overlayRenderer.render(this.overlayFrame);
   };
 
-  ns.DrawingController.prototype.renderLayers = function () {
-    var layers = this.piskelController.getLayers();
-    var currentFrameIndex = this.piskelController.currentFrameIndex;
-    var currentLayerIndex = this.piskelController.currentLayerIndex;
-
-    var serializedLayerFrame = [
-      this.zoom,
-      currentFrameIndex,
-      currentLayerIndex,
-      layers.length
-    ].join("-");
-
-    if (this.serializedLayerFrame != serializedLayerFrame) {
-      this.layersAboveRenderer.clear();
-      this.layersBelowRenderer.clear();
-
-      var downLayers = layers.slice(0, currentLayerIndex);
-      var downFrame = this.getFrameForLayersAt_(currentFrameIndex, downLayers);
-      this.layersBelowRenderer.render(downFrame);
-
-      if (currentLayerIndex + 1 < layers.length) {
-        var upLayers = layers.slice(currentLayerIndex + 1, layers.length);
-        var upFrame = this.getFrameForLayersAt_(currentFrameIndex, upLayers);
-        this.layersAboveRenderer.render(upFrame);
-      }
-
-      this.serializedLayerFrame = serializedLayerFrame;
-    }
-  };
-
-  ns.DrawingController.prototype.getFrameForLayersAt_ = function (frameIndex, layers) {
-    var frames = layers.map(function (l) {
-      return l.getFrameAt(frameIndex);
-    });
-    return pskl.utils.FrameUtils.merge(frames);
-  };
-
   /**
    * @private
    */
@@ -356,6 +309,6 @@
   };
 
   ns.DrawingController.prototype.moveOffset = function (xOffset, yOffset) {
-    this.rendererManager.moveOffset(xOffset, yOffset);
+    this.compositeRenderer.moveOffset(xOffset, yOffset);
   };
 })();

js/rendering/AbstractRenderer.js

@@ -3,7 +3,6 @@
 
   ns.AbstractRenderer = function () {};
 
-  ns.AbstractRenderer.prototype.render =         function (frame)  {throw 'abstract method should be implemented';};
   ns.AbstractRenderer.prototype.clear =          function ()       {throw 'abstract method should be implemented';};
 
   ns.AbstractRenderer.prototype.getCoordinates = function (x, y)   {throw 'abstract method should be implemented';};

js/rendering/RendererManager.js

@@ -1,30 +0,0 @@
-(function () {
-  var ns = $.namespace('pskl.rendering');
-
-  ns.RendererManager = function () {
-    this.renderers = [];
-  };
-
-  ns.RendererManager.prototype.add = function (renderer) {
-    this.renderers.push(renderer);
-    return this;
-  };
-
-  ns.RendererManager.prototype.setZoom = function (zoom) {
-    this.renderers.forEach(function (renderer) {
-      renderer.setZoom(zoom);
-    });
-  };
-
-  ns.RendererManager.prototype.setDisplaySize = function (w, h) {
-    this.renderers.forEach(function (renderer) {
-      renderer.setDisplaySize(w, h);
-    });
-  };
-
-  ns.RendererManager.prototype.moveOffset = function (offsetX, offsetY) {
-    this.renderers.forEach(function (renderer) {
-      renderer.moveOffset(offsetX, offsetY);
-    });
-  };
-})();

js/rendering/frame/FrameRenderer.js

@@ -61,6 +61,8 @@
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
   };
 
+  pskl.utils.inherit(pskl.rendering.frame.FrameRenderer, pskl.rendering.AbstractRenderer);
+
   ns.FrameRenderer.prototype.render = function (frame) {
     if (frame) {
       this.clear();

piskel-script-list.js

@@ -36,8 +36,9 @@ exports.scripts = [
   "js/selection/ShapeSelection.js",
 
   // Rendering
-  "js/rendering/RendererManager.js",
   "js/rendering/AbstractRenderer.js",
+  "js/rendering/CompositeRenderer.js",
+  "js/rendering/layer/LayersRenderer.js",
   "js/rendering/frame/FrameRenderer.js",
   "js/rendering/frame/CachedFrameRenderer.js",
   "js/rendering/CanvasRenderer.js",