TiledPreview : follow up

src/css/preview-film-section.css

@@ -16,7 +16,7 @@
   position: absolute;
   left: 0;
   right: 12px;
-  
+
   -webkit-transition: all 500ms ease-out;
   -moz-transition: all 500ms ease-out;
   -ms-transition: all 500ms ease-out;
@@ -84,6 +84,8 @@
   border: #444 3px solid;
   border-radius: 3px;
   margin: 5px 0;
+  width: 96px;
+  height: 96px;
 }
 
 .preview-tile:first-child {

src/css/style.css

@@ -178,14 +178,22 @@ body {
   border : 0px Solid transparent;
 }
 
-#preview-canvas-container {
-  height :200px;
+#animated-preview-container {
+  background: #333;
+  border-radius : 0 0 2px 2px;
+  overflow : hidden;
 }
 
-.tiled-frame-renderer {
+#animated-preview-canvas-container {
+  height :200px;
+  width : 200px;
+}
+
+.tiled-frame-container {
   height: 100%;
   width: 100%;
-  position: absolute;
+  position: relative;
+  background-repeat : repeat;
 }
 
 .display-fps {

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

src/js/app.js

@@ -48,10 +48,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'));

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,33 +13,38 @@
 
     this.setFPS(Constants.DEFAULT.FPS);
 
-    var zoom = this.calculateZoom_();
     var frame = this.piskelController.getCurrentFrame();
-    var renderingOptions = {
-      "zoom": zoom,
-      "height" : 200,
-      "width" : 200
-    };
-
-    this.tiledRenderer = new pskl.rendering.frame.TiledFrameRenderer(this.container);
-    this.frameRenderer = new pskl.rendering.frame.FrameRenderer(this.container, renderingOptions);
-    this.renderer = new pskl.rendering.CompositeRenderer();
-    this.renderer.add(this.tiledRenderer);
-    this.renderer.add(this.frameRenderer);
 
+    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));
-    this.onUserSettingsChange_();
   };
 
   ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function () {
-    if(pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW)) {
-      this.frameRenderer.hide();
-      this.tiledRenderer.show();
-    } else {
-      this.tiledRenderer.hide();
-      this.frameRenderer.show();
-    }
+    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 () {
@@ -88,10 +96,30 @@
   };
 
   ns.AnimatedPreviewController.prototype.onFrameSizeChange_ = function () {
-    var frame = this.piskelController.getCurrentFrame();
-    var zoom = this.calculateZoom_();
-    this.renderer.setDisplaySize(frame.getWidth() * zoom, frame.getHeight() * zoom);
-    this.renderer.setZoom(zoom);
-    this.renderer.setOffset(0, 0);
+    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();
+      height = frame.getHeight() * zoom;
+      width = frame.getWidth() * zoom;
+    }
+
+    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/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.left = (offset.x * this.animationController.renderer.getZoom()) +  'px';
+    this.cropFrame.style.top = (offset.y * this.animationController.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(),
-      maxFrameDim = Math.max(frameWidth, frameHeight);
+      frameWidth = curFrame.getWidth();
 
-    var previewHeight = Constants.PREVIEW_FILM_SIZE * frameHeight / maxFrameDim;
-    var previewWidth = Constants.PREVIEW_FILM_SIZE * frameWidth / maxFrameDim;
-
-    return pskl.PixelUtils.calculateZoom(previewHeight, previewWidth, frameHeight, frameWidth) || 1;
+    return Math.min(Constants.PREVIEW_FILM_SIZE/frameHeight, Constants.PREVIEW_FILM_SIZE/frameWidth);
   };
 })();

src/js/rendering/AbstractRenderer.js

@@ -14,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 () {
-    var width = this.frame.getWidth() * this.zoom;
-    var height = this.frame.getHeight() * this.zoom;
+  ns.CanvasRenderer.prototype.createCanvas_ = function (zoom) {
+    zoom = zoom || 1;
+    var width = this.frame.getWidth() * zoom;
+    var height = this.frame.getHeight() * zoom;
     return pskl.CanvasUtils.createCanvas(width, height);
   };
 })();

src/js/rendering/CompositeRenderer.js

@@ -12,13 +12,6 @@
     return this;
   };
 
-
-  ns.CompositeRenderer.prototype.render = function (frame) {
-    this.renderers.forEach(function (renderer) {
-      renderer.render(frame);
-    });
-  };
-
   ns.CompositeRenderer.prototype.clear = function () {
     this.renderers.forEach(function (renderer) {
       renderer.clear();
@@ -45,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

@@ -58,7 +58,7 @@
     this.setGridWidth(pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH));
 
     this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
-    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
+    $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
   };
 
   pskl.utils.inherit(pskl.rendering.frame.FrameRenderer, pskl.rendering.AbstractRenderer);
@@ -70,18 +70,6 @@
     }
   };
 
-  ns.FrameRenderer.prototype.hide = function () {
-    if (this.displayCanvas) {
-      this.displayCanvas.style.display = 'none';
-    }
-  };
-
-  ns.FrameRenderer.prototype.show = function () {
-    if (this.displayCanvas) {
-      this.displayCanvas.style.display = 'block';
-    }
-  };
-
   ns.FrameRenderer.prototype.clear = function () {
     pskl.CanvasUtils.clear(this.canvas);
     pskl.CanvasUtils.clear(this.displayCanvas);
@@ -130,10 +118,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
@@ -160,11 +144,11 @@
     }
   };
 
-  ns.FrameRenderer.prototype.updateMargins_ = function () {
-    var deltaX = this.displayWidth - (this.zoom * this.canvas.width);
+  ns.FrameRenderer.prototype.updateMargins_ = function (frame) {
+    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;
   };
 
@@ -173,9 +157,7 @@
     var width = this.displayWidth;
 
     this.displayCanvas = pskl.CanvasUtils.createCanvas(width, height, this.classes);
-    if (true || this.zoom > 2) {
-      pskl.CanvasUtils.disableImageSmoothing(this.displayCanvas);
-    }
+    pskl.CanvasUtils.disableImageSmoothing(this.displayCanvas);
     this.container.append(this.displayCanvas);
   };
 
@@ -244,22 +226,22 @@
       }
     }
 
-    this.updateMargins_();
+    this.updateMargins_(frame);
 
-    context = this.displayCanvas.getContext('2d');
-    context.save();
+    var displayContext = this.displayCanvas.getContext('2d');
+    displayContext.save();
 
     if (this.canvas.width*this.zoom < this.displayCanvas.width) {
-      context.fillStyle = Constants.ZOOMED_OUT_BACKGROUND_COLOR;
-      context.fillRect(0,0,this.displayCanvas.width, this.displayCanvas.height);
+      displayContext.fillStyle = Constants.ZOOMED_OUT_BACKGROUND_COLOR;
+      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;
 
@@ -267,11 +249,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);
-      context.drawImage(this.canvas, 0, 0);
+      displayContext.scale(this.zoom, this.zoom);
+      displayContext.drawImage(this.canvas, 0, 0);
     }
-    context.restore();
+    displayContext.restore();
   };
 })();

src/js/rendering/frame/TiledFrameRenderer.js

@@ -1,46 +1,42 @@
 (function () {
   var ns = $.namespace('pskl.rendering.frame');
 
-  ns.TiledFrameRenderer = function (container) {
-    this.displayContainer = document.createElement('div');
-    container.get(0).appendChild(this.displayContainer);
-    this.displayContainer.style.backgroundRepeat = 'repeat';
-    this.displayContainer.classList.add('tiled-frame-renderer');
+  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);
+
     this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
-    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
+
+    this.onUserSettingsChange_listener = this.onUserSettingsChange_.bind(this);
+    $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_listener);
   };
 
   ns.TiledFrameRenderer.prototype.render = function (frame) {
-    var canvas = new pskl.utils.FrameUtils.toImage(frame);
+    var canvas = new pskl.utils.FrameUtils.toImage(frame, this.zoom);
     this.displayContainer.style.backgroundImage = 'url(' + canvas.toDataURL('image/png') + ')';
   };
 
-
-
-  ns.TiledFrameRenderer.prototype.hide = function () {
-    if (this.displayContainer) {
-      this.displayContainer.style.display = 'none';
-    }
-  };
-
   ns.TiledFrameRenderer.prototype.show = function () {
     if (this.displayContainer) {
       this.displayContainer.style.display = 'block';
     }
   };
-  
-  ns.TiledFrameRenderer.prototype.setZoom = Constants.EMPTY_FUNCTION;
 
-  ns.TiledFrameRenderer.prototype.setOffset = Constants.EMPTY_FUNCTION;
+  ns.TiledFrameRenderer.prototype.setZoom = function (zoom) {
+    this.zoom = zoom;
+  };
 
-  ns.TiledFrameRenderer.prototype.setDisplaySize = Constants.EMPTY_FUNCTION;
+  ns.TiledFrameRenderer.prototype.getZoom = function () {
+    return this.zoom;
+  };
 
   ns.TiledFrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
     if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
       this.updateBackgroundClass_(settingValue);
-    } else if (settingName == pskl.UserSettings.GRID_WIDTH) {
-      this.setGridWidth(settingValue);
     }
   };
 

src/js/utils/FrameUtils.js

@@ -159,9 +159,11 @@
       return hex.length == 1 ? "0" + hex : hex;
     },
 
-    toImage : function (frame) {
-      var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, 1);
-      canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);
+    toImage : function (frame, zoom, bgColor) {
+      zoom = zoom || 1;
+      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/templates/preview.html

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