Support rectangular resolution & maximize viewport usage

src/css/toolbox-animated-preview.css

@@ -3,9 +3,9 @@
  */
 
 .preview-container {
-  border : 0px Solid black;
-  border-radius:5px 0px 0px 5px;
-  box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
+  border : 0 Solid black;
+  border-radius:5px 0 0 5px;
+  box-shadow : 0 0 2px rgba(0,0,0,0.2);
   font-size: 0;
 }
 
@@ -14,7 +14,12 @@
 }
 
 .preview-container canvas {
-  border : 0px Solid transparent;
+  border : 0 Solid transparent;
+}
+
+.canvas-container .animated-preview-canvas-background {
+  position : relative;
+  height: 100%;
 }
 
 #animated-preview-container {
@@ -23,9 +28,10 @@
   overflow : hidden;
 }
 
-#animated-preview-canvas-container {
+.canvas-container-wrapper {
   height :200px;
   width : 200px;
+  overflow:hidden;
 }
 
 .tiled-frame-container {

src/js/controller/AnimatedPreviewController.js

@@ -35,6 +35,7 @@
 
     this.updateZoom_();
     this.updateOnionSkinPreview_();
+    this.updateContainerDimensions_();
   };
 
   ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) {
@@ -140,10 +141,14 @@
 
     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";
+
+    var horizontalPadding = (PREVIEW_SIZE - height) / 2;
+    containerEl.style.marginTop = horizontalPadding + "px";
+    containerEl.style.marginBottom = horizontalPadding + "px";
+
+    var verticalPadding = (PREVIEW_SIZE - width) / 2;
+    containerEl.style.marginLeft = verticalPadding + "px";
+    containerEl.style.marginRight = verticalPadding + "px";
   };
 
   ns.AnimatedPreviewController.prototype.toggleOnionSkin_ = function () {

src/js/controller/DrawingController.js

@@ -22,7 +22,6 @@
      */
     this.container = container;
 
-    // TODO(vincz): Store user prefs in a localstorage string ?
     var renderingOptions = {
       "zoom": this.calculateZoom_(),
       "supportGridRendering" : true,
@@ -32,6 +31,8 @@
       "yOffset" : 0
     };
 
+    console.log('DrawingController:getContainerWidth_', this.getContainerWidth_());
+
     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.onionSkinRenderer = new pskl.rendering.OnionSkinRenderer(this.container, renderingOptions, piskelController);
@@ -70,7 +71,10 @@
     pskl.app.shortcutService.addShortcut('+', this.increaseZoom_.bind(this, 1));
     pskl.app.shortcutService.addShortcut('-', this.decreaseZoom_.bind(this, 1));
 
-    window.setTimeout(this.afterWindowResize_.bind(this), 100);
+    window.setTimeout(function () {
+      this.afterWindowResize_();
+      this.resetZoom_();
+    }.bind(this), 100);
   };
 
   ns.DrawingController.prototype.initMouseBehavior = function() {
@@ -89,6 +93,7 @@
 
     // Deactivate right click:
     body.contextmenu(this.onCanvasContextMenu_);
+
   };
 
   ns.DrawingController.prototype.startResizeTimer_ = function () {
@@ -100,6 +105,7 @@
 
   ns.DrawingController.prototype.afterWindowResize_ = function () {
     var initialWidth = this.compositeRenderer.getDisplaySize().width;
+
     this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
     this.centerColumnWrapperHorizontally_();
     var ratio = this.compositeRenderer.getDisplaySize().width / initialWidth;
@@ -358,11 +364,11 @@
   };
 
   ns.DrawingController.prototype.getContainerHeight_ = function () {
-    return this.calculateZoom_() * this.piskelController.getCurrentFrame().getHeight();
+    return this.getAvailableHeight_();
   };
 
   ns.DrawingController.prototype.getContainerWidth_ = function () {
-    return this.calculateZoom_() * this.piskelController.getCurrentFrame().getWidth();
+    return this.getAvailableWidth_();
   };
 
   /**

src/js/controller/MinimapController.js

@@ -5,7 +5,7 @@
     this.piskelController = piskelController;
     this.animationController = animationController;
     this.drawingController = drawingController;
-    this.container = container;
+    this.container = container.parent();
 
     this.isClicked = false;
   };
@@ -27,6 +27,8 @@
 
   ns.MinimapController.prototype.renderMinimap_ = function () {
     var zoomRatio = this.getDrawingAreaZoomRatio_();
+    console.log('zoomRatio', zoomRatio);
+    console.log('this.animationController.getZoom()', this.animationController.getZoom());
     if (zoomRatio > 1) {
       this.displayCropFrame_(zoomRatio, this.drawingController.getRenderer().getOffset());
     } else {
@@ -36,11 +38,33 @@
 
   ns.MinimapController.prototype.displayCropFrame_ = function (ratio, offset) {
     this.cropFrame.style.display = 'block';
-    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';
+
+    var containerHeight = this.container.height();
+    var containerWidth = this.container.width();
+    var displaySize = this.drawingController.getRenderer().getDisplaySize();
+    var width  = displaySize.width / ratio;
+    var height = displaySize.height / ratio;
+    this.cropFrame.style.width = Math.min(width, containerWidth) + 'px';
+    this.cropFrame.style.height = Math.min(height, containerHeight) + 'px';
+
+
+    var containerSize = Math.max(containerHeight, containerWidth);
+    var margin = this.drawingController.renderer.margin;
+
+    var frame = this.piskelController.getCurrentFrame();
+    var framePreviewWidth = frame.getWidth() * this.animationController.getZoom();
+    var framePreviewHeight = frame.getHeight() * this.animationController.getZoom();
+
+    var left = (containerSize - Math.max(width, framePreviewWidth))/2;
+    left += offset.x * this.animationController.getZoom();
+    left = Math.max(0, left);
+    this.cropFrame.style.left = left +  'px';
+
+    var top = (containerSize - Math.max(height, framePreviewHeight))/2;
+    top += offset.y * this.animationController.getZoom();
+    top = Math.max(0, top);
+    this.cropFrame.style.top = top +  'px';
+
 
   };
 
@@ -82,8 +106,16 @@
 
   ns.MinimapController.prototype.getDrawingAreaZoomRatio_ = function () {
     var drawingAreaZoom = this.drawingController.getRenderer().getZoom();
-    var drawingAreaFullHeight = this.piskelController.getCurrentFrame().getHeight() * drawingAreaZoom;
-    var zoomRatio = drawingAreaFullHeight / this.drawingController.getRenderer().getDisplaySize().height;
+    var frame = this.piskelController.getCurrentFrame();
+    var dim = Math.max(frame.getHeight(), frame.getWidth());
+    var drawingAreaSize = dim * drawingAreaZoom;
+
+    var containerHeight = this.container.height();
+    var containerWidth = this.container.width();
+
+    var containerSize = Math.max(containerHeight, containerWidth);
+
+    var zoomRatio = drawingAreaSize / containerSize;
 
     return zoomRatio;
   };

src/js/rendering/frame/FrameRenderer.js

@@ -239,7 +239,7 @@
     var displayContext = this.displayCanvas.getContext('2d');
     displayContext.save();
 
-    if (this.canvas.width*this.zoom < this.displayCanvas.width) {
+    if (this.canvas.width*this.zoom < this.displayCanvas.width || this.canvas.height*this.zoom < this.displayCanvas.height) {
       displayContext.fillStyle = Constants.ZOOMED_OUT_BACKGROUND_COLOR;
       displayContext.fillRect(0,0,this.displayCanvas.width, this.displayCanvas.height);
     }

src/templates/layers-list.html

@@ -2,7 +2,7 @@
   <h3 class="toolbox-title layers-title">Layers
     <div title="Toggle layer preview (alt+L)"
          rel="tooltip"
-         data-placement="top"
+         data-placement="left"
          class="layers-toggle-preview piskel-icon-eye"></div>
   </h3>
   <div class="layers-button-container">

src/templates/preview.html

@@ -1,6 +1,8 @@
 <div id="animated-preview-container" class="preview-container">
-  <div id="animated-preview-canvas-container" class="canvas-container">
-    <div class="canvas-background"></div>
+  <div class="canvas-container-wrapper">
+    <div id="animated-preview-canvas-container" class="canvas-container">
+      <div class="canvas-background"></div>
+    </div>
   </div>
   <div>
     <div title="Toggle onion skin (alt+O)"