Merge pull request #180 from juliandescottes/feature-tiled-preview

Feature tiled preview

src/css/preview-film-section.css

@@ -84,6 +84,8 @@
   border: #444 3px solid;
   border-radius: 3px;
   margin: 5px 0;
+  width: 96px;
+  height: 96px;
 }
 
 .preview-tile:first-child {

src/css/settings.css

@@ -137,13 +137,17 @@
   margin-bottom: 10px;
 }
 
+.settings-item {
+  margin : 10px 0;
+}
+
 /************************************************************************************************/
 /* Application settings                                                                         */
 /************************************************************************************************/
 
 .background-picker-wrapper {
   overflow: hidden;
-  padding: 10px 5px 20px 5px;
+  padding: 5px;
 }
 
 .background-picker {

src/css/style.css

@@ -178,6 +178,24 @@ body {
   border : 0px Solid transparent;
 }
 
+#animated-preview-container {
+  background: #333;
+  border-radius : 0 0 2px 2px;
+  overflow : hidden;
+}
+
+#animated-preview-canvas-container {
+  height :200px;
+  width : 200px;
+}
+
+.tiled-frame-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background-repeat : repeat;
+}
+
 .display-fps {
   float: left;
   color: #aaa;
@@ -190,6 +208,8 @@ body {
 .range-fps {
   overflow: hidden;
   width: 120px;
+  height : 24px;
+  margin : 0;
 }
 
 /**

src/css/toolbox.css

@@ -4,7 +4,9 @@
   color: white;
   text-align: left;
   border-radius: 4px;
-  margin-top: 10px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  overflow: hidden;
 }
 
 .toolbox-title {

src/js/Constants.js

@@ -13,7 +13,7 @@ var Constants = {
 
   MINIMUM_ZOOM : 1,
 
-  PREVIEW_FILM_SIZE : 120,
+  PREVIEW_FILM_SIZE : 96,
   ANIMATED_PREVIEW_WIDTH : 200,
 
   DEFAULT_PEN_COLOR : '#000000',
@@ -62,5 +62,6 @@ var Constants = {
   RIGHT_BUTTON : 2,
   MOUSEMOVE_THROTTLING : 10,
 
-  ABSTRACT_FUNCTION : function () {throw 'abstract method should be implemented';}
+  ABSTRACT_FUNCTION : function () {throw 'abstract method should be implemented';},
+  EMPTY_FUNCTION : function () {}
 };

src/js/app.js

@@ -51,10 +51,10 @@
       this.drawingController = new pskl.controller.DrawingController(this.piskelController, this.paletteController, $('#drawing-canvas-container'));
       this.drawingController.init();
 
-      this.animationController = new pskl.controller.AnimatedPreviewController(this.piskelController, $('#preview-canvas-container'));
+      this.animationController = new pskl.controller.AnimatedPreviewController(this.piskelController, $('#animated-preview-canvas-container'));
       this.animationController.init();
 
-      this.minimapController = new pskl.controller.MinimapController(this.piskelController, this.animationController, this.drawingController, $('#preview-canvas-container'));
+      this.minimapController = new pskl.controller.MinimapController(this.piskelController, this.animationController, this.drawingController, $('#animated-preview-canvas-container'));
       this.minimapController.init();
 
       this.previewFilmController = new pskl.controller.PreviewFilmController(this.piskelController, $('#preview-list'));
@@ -81,6 +81,9 @@
       this.notificationController = new pskl.controller.NotificationController();
       this.notificationController.init();
 
+      this.canvasBackgroundController = new pskl.controller.CanvasBackgroundController();
+      this.canvasBackgroundController.init();
+
       this.localStorageService = new pskl.service.LocalStorageService(this.piskelController);
       this.localStorageService.init();
 
@@ -93,6 +96,7 @@
       this.savedStatusService = new pskl.service.SavedStatusService(this.piskelController);
       this.savedStatusService.init();
 
+
       if (this.isAppEngineVersion) {
         this.storageService = new pskl.service.AppEngineStorageService(this.piskelController);
       } else {

src/js/controller/AnimatedPreviewController.js

@@ -1,6 +1,9 @@
 (function () {
   var ns = $.namespace("pskl.controller");
 
+  // Preview is a square of PREVIEW_SIZE x PREVIEW_SIZE
+  var PREVIEW_SIZE = 200;
+
   ns.AnimatedPreviewController = function (piskelController, container) {
     this.piskelController = piskelController;
     this.container = container;
@@ -10,16 +13,38 @@
 
     this.setFPS(Constants.DEFAULT.FPS);
 
-    var zoom = this.calculateZoom_();
     var frame = this.piskelController.getCurrentFrame();
-    var renderingOptions = {
-      "zoom": zoom,
-      "height" : frame.getHeight() * zoom,
-      "width" : frame.getWidth() * zoom
-    };
-    this.renderer = new pskl.rendering.frame.FrameRenderer(this.container, renderingOptions);
 
+    this.renderer = new pskl.rendering.frame.TiledFrameRenderer(this.container);
+    this.updateZoom_();
     $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
+    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
+  };
+
+  ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function () {
+    this.updateZoom_();
+    this.updateContainerDimensions_();
+  };
+
+  ns.AnimatedPreviewController.prototype.updateZoom_ = function () {
+    var isTiled = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
+    var zoom = isTiled ? 1 : this.calculateZoom_();
+    this.renderer.setZoom(zoom);
+  };
+
+  ns.AnimatedPreviewController.prototype.getZoom = function () {
+    return this.calculateZoom_();
+  };
+
+  ns.AnimatedPreviewController.prototype.getCoordinates = function(x, y) {
+    var containerOffset = this.container.offset();
+    x = x - containerOffset.left;
+    y = y - containerOffset.top;
+    var zoom = this.getZoom();
+    return {
+      x : Math.floor(x / zoom),
+      y : Math.floor(y / zoom)
+    };
   };
 
   ns.AnimatedPreviewController.prototype.init = function () {
@@ -53,7 +78,8 @@
         this.currentIndex = 0;
         this.elapsedTime = 0;
       }
-      this.renderer.render(this.piskelController.getFrameAt(this.currentIndex));
+      var frame = this.piskelController.getFrameAt(this.currentIndex);
+      this.renderer.render(frame);
     }
   };
 
@@ -70,10 +96,30 @@
   };
 
   ns.AnimatedPreviewController.prototype.onFrameSizeChange_ = function () {
+    this.updateZoom_();
+    this.updateContainerDimensions_();
+  };
+
+  ns.AnimatedPreviewController.prototype.updateContainerDimensions_ = function () {
+    var containerEl = this.container.get(0);
+    var isTiled = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
+    var height, width;
+
+    if (isTiled) {
+      height = PREVIEW_SIZE;
+      width = PREVIEW_SIZE;
+    } else {
+      var zoom = this.getZoom();
       var frame = this.piskelController.getCurrentFrame();
-    var zoom = this.calculateZoom_();
+      height = frame.getHeight() * zoom;
-    this.renderer.setDisplaySize(frame.getWidth() * zoom, frame.getHeight() * zoom);
+      width = frame.getWidth() * zoom;
-    this.renderer.setZoom(zoom);
+    }
-    this.renderer.setOffset(0, 0);
+
+    containerEl.style.height = height + "px";
+    containerEl.style.width = width + "px";
+    containerEl.style.marginTop = ((PREVIEW_SIZE - height) / 2) + "px";
+    containerEl.style.marginBottom = ((PREVIEW_SIZE - height) / 2) + "px";
+    containerEl.style.marginLeft = ((PREVIEW_SIZE - width) / 2) + "px";
+    containerEl.style.marginRight = ((PREVIEW_SIZE - width) / 2) + "px";
   };
 })();

src/js/controller/CanvasBackgroundController.js

@@ -0,0 +1,28 @@
+(function () {
+  var ns = $.namespace('pskl.controller');
+
+  ns.CanvasBackgroundController = function () {
+    this.body = document.body;
+  };
+
+  ns.CanvasBackgroundController.prototype.init = function () {
+    $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
+    this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
+  };
+
+
+  ns.CanvasBackgroundController.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
+    if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
+      this.updateBackgroundClass_(settingValue);
+    }
+  };
+
+  ns.CanvasBackgroundController.prototype.updateBackgroundClass_ = function (newClass) {
+    var currentClass = this.body.dataset.currentBackgroundClass;
+    if (currentClass) {
+      this.body.classList.remove(currentClass);
+    }
+    this.body.classList.add(newClass);
+    this.body.dataset.currentBackgroundClass = newClass;
+  };
+})();

src/js/controller/DrawingController.js

@@ -109,6 +109,7 @@
 
   ns.DrawingController.prototype.onFrameSizeChanged_ = function () {
     this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
+    this.centerColumnWrapperHorizontally_();
     this.compositeRenderer.setZoom(this.calculateZoom_());
     this.compositeRenderer.setOffset(0, 0);
     $.publish(Events.ZOOM_CHANGED);

src/js/controller/MinimapController.js

@@ -36,8 +36,8 @@
 
   ns.MinimapController.prototype.displayCropFrame_ = function (ratio, offset) {
     this.cropFrame.style.display = 'block';
-    this.cropFrame.style.top = (offset.y * this.animationController.renderer.getZoom()) +  'px';
+    this.cropFrame.style.top = (offset.y * this.animationController.getZoom()) +  'px';
-    this.cropFrame.style.left = (offset.x * this.animationController.renderer.getZoom()) +  'px';
+    this.cropFrame.style.left = (offset.x * this.animationController.getZoom()) +  'px';
     var zoomRatio = this.getDrawingAreaZoomRatio_();
     this.cropFrame.style.width = (this.container.width() / zoomRatio) +  'px';
     this.cropFrame.style.height = (this.container.height() / zoomRatio) +  'px';
@@ -66,7 +66,7 @@
   };
 
   ns.MinimapController.prototype.getCoordinatesCenteredAround_ = function (x, y) {
-    var frameCoords = this.animationController.renderer.getCoordinates(x, y);
+    var frameCoords = this.animationController.getCoordinates(x, y);
     var zoomRatio = this.getDrawingAreaZoomRatio_();
     var frameWidth = this.piskelController.getCurrentFrame().getWidth();
     var frameHeight = this.piskelController.getCurrentFrame().getHeight();

src/js/controller/PreviewFilmController.js

@@ -212,12 +212,8 @@
   ns.PreviewFilmController.prototype.calculateZoom_ = function () {
     var curFrame = this.piskelController.getCurrentFrame(),
       frameHeight = curFrame.getHeight(),
-      frameWidth = curFrame.getWidth(),
+      frameWidth = curFrame.getWidth();
-      maxFrameDim = Math.max(frameWidth, frameHeight);
 
-    var previewHeight = Constants.PREVIEW_FILM_SIZE * frameHeight / maxFrameDim;
+    return Math.min(Constants.PREVIEW_FILM_SIZE/frameHeight, Constants.PREVIEW_FILM_SIZE/frameWidth);
-    var previewWidth = Constants.PREVIEW_FILM_SIZE * frameWidth / maxFrameDim;
-
-    return pskl.PixelUtils.calculateZoom(previewHeight, previewWidth, frameHeight, frameWidth) || 1;
   };
 })();

src/js/controller/settings/ApplicationSettingsController.js

@@ -18,6 +18,10 @@
     $('#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));
+
     // Handle canvas background changes:
     $('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
   };
@@ -27,6 +31,11 @@
     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.onBackgroundClick = function (evt) {
     var target = $(evt.target).closest('.background-picker');
     if (target.length) {

src/js/rendering/AbstractRenderer.js

@@ -4,6 +4,7 @@
   ns.AbstractRenderer = function () {};
 
   ns.AbstractRenderer.prototype.clear = Constants.ABSTRACT_FUNCTION;
+  ns.AbstractRenderer.prototype.render = Constants.ABSTRACT_FUNCTION;
 
   ns.AbstractRenderer.prototype.getCoordinates = Constants.ABSTRACT_FUNCTION;
 
@@ -13,7 +14,6 @@
   ns.AbstractRenderer.prototype.setZoom = Constants.ABSTRACT_FUNCTION;
   ns.AbstractRenderer.prototype.getZoom = Constants.ABSTRACT_FUNCTION;
 
-  ns.AbstractRenderer.prototype.moveOffset = Constants.ABSTRACT_FUNCTION;
   ns.AbstractRenderer.prototype.setOffset = Constants.ABSTRACT_FUNCTION;
   ns.AbstractRenderer.prototype.getOffset = Constants.ABSTRACT_FUNCTION;
 

src/js/rendering/CanvasRenderer.js

@@ -19,12 +19,17 @@
   ns.CanvasRenderer.prototype.render = function  () {
     var canvas = this.createCanvas_();
     var context = canvas.getContext('2d');
-
     this.frame.forEachPixel(function (color, x, y) {
       this.renderPixel_(color, x, y, context);
     }.bind(this));
 
-    return canvas;
+    var scaledCanvas = this.createCanvas_(this.zoom);
+    var scaledContext = scaledCanvas.getContext('2d');
+    pskl.CanvasUtils.disableImageSmoothing(scaledCanvas);
+    scaledContext.scale(this.zoom, this.zoom);
+    scaledContext.drawImage(canvas, 0, 0);
+
+    return scaledCanvas;
   };
 
   ns.CanvasRenderer.prototype.renderPixel_ = function (color, x, y, context) {
@@ -32,12 +37,13 @@
       color = this.transparentColor_;
     }
     context.fillStyle = color;
-    context.fillRect(x * this.zoom, y * this.zoom, this.zoom, this.zoom);
+    context.fillRect(x, y, 1, 1);
   };
 
-  ns.CanvasRenderer.prototype.createCanvas_ = function () {
+  ns.CanvasRenderer.prototype.createCanvas_ = function (zoom) {
-    var width = this.frame.getWidth() * this.zoom;
+    zoom = zoom || 1;
-    var height = this.frame.getHeight() * this.zoom;
+    var width = this.frame.getWidth() * zoom;
+    var height = this.frame.getHeight() * zoom;
     return pskl.CanvasUtils.createCanvas(width, height);
   };
 })();

src/js/rendering/CompositeRenderer.js

@@ -38,12 +38,6 @@
     return this.getSampleRenderer_().getDisplaySize();
   };
 
-  ns.CompositeRenderer.prototype.moveOffset = function (x, y) {
-    this.renderers.forEach(function (renderer) {
-      renderer.moveOffset(x, y);
-    });
-  };
-
   ns.CompositeRenderer.prototype.setOffset = function (x, y) {
     this.renderers.forEach(function (renderer) {
       renderer.setOffset(x, y);

src/js/rendering/frame/FrameRenderer.js

@@ -57,8 +57,7 @@
 
     this.setGridWidth(pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH));
 
-    this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
+    $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
-    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
   };
 
   pskl.utils.inherit(pskl.rendering.frame.FrameRenderer, pskl.rendering.AbstractRenderer);
@@ -118,10 +117,6 @@
     };
   };
 
-  ns.FrameRenderer.prototype.moveOffset = function (x, y) {
-    this.setOffset(this.offset.x + x, this.offset.y + y);
-  };
-
   ns.FrameRenderer.prototype.setOffset = function (x, y) {
     // TODO : provide frame size information to the FrameRenderer constructor
     // here I first need to verify I have a 'canvas' which I can use to infer the frame information
@@ -148,11 +143,11 @@
     }
   };
 
-  ns.FrameRenderer.prototype.updateMargins_ = function () {
+  ns.FrameRenderer.prototype.updateMargins_ = function (frame) {
-    var deltaX = this.displayWidth - (this.zoom * this.canvas.width);
+    var deltaX = this.displayWidth - (this.zoom * frame.getWidth());
     this.margin.x = Math.max(0, deltaX) / 2;
 
-    var deltaY = this.displayHeight - (this.zoom * this.canvas.height);
+    var deltaY = this.displayHeight - (this.zoom * frame.getHeight());
     this.margin.y = Math.max(0, deltaY) / 2;
   };
 
@@ -161,29 +156,16 @@
     var width = this.displayWidth;
 
     this.displayCanvas = pskl.CanvasUtils.createCanvas(width, height, this.classes);
-    if (true || this.zoom > 2) {
     pskl.CanvasUtils.disableImageSmoothing(this.displayCanvas);
-    }
     this.container.append(this.displayCanvas);
   };
 
   ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
-    if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
+    if (settingName == pskl.UserSettings.GRID_WIDTH) {
-      this.updateBackgroundClass_(settingValue);
-    } else if (settingName == pskl.UserSettings.GRID_WIDTH) {
       this.setGridWidth(settingValue);
     }
   };
 
-  ns.FrameRenderer.prototype.updateBackgroundClass_ = function (newClass) {
-    var currentClass = this.container.data('current-background-class');
-    if (currentClass) {
-      this.container.removeClass(currentClass);
-    }
-    this.container.addClass(newClass);
-    this.container.data('current-background-class', newClass);
-  };
-
   ns.FrameRenderer.prototype.renderPixel_ = function (color, x, y, context) {
     if(color != Constants.TRANSPARENT_COLOR) {
       context.fillStyle = color;
@@ -232,22 +214,22 @@
       }
     }
 
-    this.updateMargins_();
+    this.updateMargins_(frame);
 
-    context = this.displayCanvas.getContext('2d');
+    var displayContext = this.displayCanvas.getContext('2d');
-    context.save();
+    displayContext.save();
 
     if (this.canvas.width*this.zoom < this.displayCanvas.width) {
-      context.fillStyle = Constants.ZOOMED_OUT_BACKGROUND_COLOR;
+      displayContext.fillStyle = Constants.ZOOMED_OUT_BACKGROUND_COLOR;
-      context.fillRect(0,0,this.displayCanvas.width, this.displayCanvas.height);
+      displayContext.fillRect(0,0,this.displayCanvas.width, this.displayCanvas.height);
     }
 
-    context.translate(
+    displayContext.translate(
       this.margin.x-this.offset.x*this.zoom,
       this.margin.y-this.offset.y*this.zoom
     );
 
-    context.clearRect(0, 0, this.canvas.width*this.zoom, this.canvas.height*this.zoom);
+    displayContext.clearRect(0, 0, this.canvas.width*this.zoom, this.canvas.height*this.zoom);
 
     var isIE10 = pskl.utils.UserAgent.isIE && pskl.utils.UserAgent.version === 10;
 
@@ -255,11 +237,11 @@
     var isGridEnabled = gridWidth > 0;
     if (isGridEnabled || isIE10) {
       var scaled = pskl.utils.ImageResizer.resizeNearestNeighbour(this.canvas, this.zoom, gridWidth);
-      context.drawImage(scaled, 0, 0);
+      displayContext.drawImage(scaled, 0, 0);
     } else {
-      context.scale(this.zoom, this.zoom);
+      displayContext.scale(this.zoom, this.zoom);
-      context.drawImage(this.canvas, 0, 0);
+      displayContext.drawImage(this.canvas, 0, 0);
     }
-    context.restore();
+    displayContext.restore();
   };
 })();

src/js/rendering/frame/TiledFrameRenderer.js

@@ -0,0 +1,31 @@
+(function () {
+  var ns = $.namespace('pskl.rendering.frame');
+
+  ns.TiledFrameRenderer = function (container, zoom) {
+    this.container = container;
+    this.setZoom(zoom);
+
+    this.displayContainer = document.createElement('div');
+    this.displayContainer.classList.add('tiled-frame-container');
+    container.get(0).appendChild(this.displayContainer);
+  };
+
+  ns.TiledFrameRenderer.prototype.render = function (frame) {
+    var canvas = new pskl.utils.FrameUtils.toImage(frame, this.zoom);
+    this.displayContainer.style.backgroundImage = 'url(' + canvas.toDataURL('image/png') + ')';
+  };
+
+  ns.TiledFrameRenderer.prototype.show = function () {
+    if (this.displayContainer) {
+      this.displayContainer.style.display = 'block';
+    }
+  };
+
+  ns.TiledFrameRenderer.prototype.setZoom = function (zoom) {
+    this.zoom = zoom;
+  };
+
+  ns.TiledFrameRenderer.prototype.getZoom = function () {
+    return this.zoom;
+  };
+})();

src/js/utils/FrameUtils.js

@@ -159,9 +159,11 @@
       return hex.length == 1 ? "0" + hex : hex;
     },
 
-    toImage : function (frame) {
+    toImage : function (frame, zoom, bgColor) {
-      var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, 1);
+      zoom = zoom || 1;
-      canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);
+      bgColor = bgColor || Constants.TRANSPARENT_COLOR;
+      var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
+      canvasRenderer.drawTransparentAs(bgColor);
       return canvasRenderer.render();
     }
   };

src/js/utils/PixelUtils.js

@@ -156,22 +156,6 @@
      */
     calculateZoomForContainer : function (container, pictureHeight, pictureWidth) {
       return this.calculateZoom(container.height(), container.width(), pictureHeight, pictureWidth);
-    },
-
-    /**
-     * Calculate and return the maximal zoom to display a picture for a given height and width.
-     *
-     * @param height number Height available to display the picture
-     * @param width number Width available to display the picture
-     * @param number pictureHeight height in pixels of the picture to display
-     * @param number pictureWidth width in pixels of the picture to display
-     * @return number maximal zoom
-     */
-    calculateZoom : function (height, width, pictureHeight, pictureWidth) {
-      var heightRatio = Math.floor(height / pictureHeight),
-        widthRatio = Math.floor(width / pictureWidth);
-
-      return Math.min(heightRatio, widthRatio);
     }
   };
 })();

src/js/utils/UserSettings.js

@@ -5,11 +5,13 @@
     GRID_WIDTH : 'GRID_WIDTH',
     CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
     SELECTED_PALETTE : 'SELECTED_PALETTE',
+    TILED_PREVIEW : 'TILED_PREVIEW',
 
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
       'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background',
-      'SELECTED_PALETTE' : Constants.CURRENT_PALETTE_ID
+      'SELECTED_PALETTE' : Constants.CURRENT_COLORS_PALETTE_ID,
+      'TILED_PREVIEW' : false
     },
 
     /**

src/piskel-script-list.js

@@ -59,6 +59,7 @@
   "js/rendering/CompositeRenderer.js",
   "js/rendering/layer/LayersRenderer.js",
   "js/rendering/frame/FrameRenderer.js",
+  "js/rendering/frame/TiledFrameRenderer.js",
   "js/rendering/frame/CachedFrameRenderer.js",
   "js/rendering/CanvasRenderer.js",
   "js/rendering/FramesheetRenderer.js",
@@ -77,6 +78,7 @@
   "js/controller/PaletteController.js",
   "js/controller/PalettesListController.js",
   "js/controller/NotificationController.js",
+  "js/controller/CanvasBackgroundController.js",
 
   // Settings sub-controllers
   "js/controller/settings/ApplicationSettingsController.js",

src/templates/preview.html

@@ -1,5 +1,5 @@
-<div class='preview-container'>
+<div id="animated-preview-container" class="preview-container">
-  <div id='preview-canvas-container' class="canvas-container">
+  <div id="animated-preview-canvas-container" class="canvas-container">
     <div class="canvas-background"></div>
   </div>
   <div>

src/templates/settings/application.html

@@ -29,5 +29,9 @@
       <option value="4">Enabled - 4px wide</option>
     </select>
   </div>
+  <div class="settings-item">
+    <label for="tiled-preview">Display tiled preview :</label>
+    <input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>
+  </div>
 </div>