Dynamic DPIs !

css/style.css

@@ -73,10 +73,7 @@
 }
 
 .drawing-canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
+  float: left;
 }
 
 .canvas-overlay {

js/controller/DrawingController.js

@@ -16,15 +16,17 @@
 		this.container = container;
 		this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
 		this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
-		//this.mainCanvas = this.createMainCanvas();
-		//this.overlayCanvas = this.createOverlayCanvas();
+		
 		this.renderer.init(this.frame);
 		this.overlayRenderer.init(this.frame);
 	};
 
 	ns.DrawingController.prototype.updateDPI = function (newDPI) {
-		//this.renderer.updateDPI(newDPI);
-		//this.overlayRenderer.updateDPI(newDPI);
+		this.renderer.updateDPI(newDPI);
+		this.overlayRenderer.updateDPI(newDPI);
+
+		this.renderer.render(this.frame);
+		this.overlayRenderer.render(this.frame);
 	};
 
 	ns.DrawingController.prototype.renderFrame = function () {

js/piskel.js

@@ -11,23 +11,18 @@ $.namespace("pskl");
    */
   var frameSheet,
 
-      // Temporary zoom implementation to easily get bigger canvases to
-      // see how good perform critical algorithms on big canvas.
-      zoom = 1,
-
       // Configuration:
       // Canvas size in pixel size (not dpi related)
-      framePixelWidth = 32 * zoom, 
-      framePixelHeight = 32 * zoom,
-
+      framePixelWidth = 32, 
+      framePixelHeight = 32,
 
       // Scaling factors for a given frameSheet rendering:
       // Main drawing area:
-      drawingCanvasDpi = Math.ceil(20/ zoom),
-      // Canvas previous in the slideshow:
-      previewTileCanvasDpi = Math.ceil(4 / zoom),
-      // Ainmated canvas preview:
-      previewAnimationCanvasDpi = Math.ceil(8 / zoom),
+      drawingCanvasDpi = 20,   
+      // Canvas preview film canvases:
+      previewTileCanvasDpi = 4,
+      // Animated canvas preview:
+      previewAnimationCanvasDpi = 8,
 
       // DOM references:
       drawingAreaContainer,
@@ -53,6 +48,9 @@ $.namespace("pskl");
   var piskel = {
 
     init : function () {
+
+      piskel.initDPIs_();
+
       frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
       frameSheet.addEmptyFrame();
 
@@ -95,6 +93,29 @@ $.namespace("pskl");
       }
     },
 
+    /**
+     * Override default DPIs.
+     * @private
+     */
+    initDPIs_ : function() {
+
+      drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_();
+      // TODO(vincz): Add throttling on window.resize event.
+      $(window).resize($.proxy(function() {
+        drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_();
+        this.drawingController.updateDPI(drawingCanvasDpi);
+      }, this));
+      // TODO(vincz): Check for user settings eventually from localstorage.
+    },
+
+    /**
+     * @private
+     */
+    calculateDPIsForDrawingCanvas_ : function() {
+      var availableViewportHeight = $('.main-panel').height();
+      return Math.floor(availableViewportHeight / framePixelHeight);    
+    },
+
     finishInit : function () {
 
       $.subscribe(Events.TOOL_SELECTED, function(evt, toolBehavior) {
@@ -186,8 +207,6 @@ $.namespace("pskl");
         document.body.addEventListener('mouseup', this.onMouseup.bind(this));
         drawingAreaContainer.addEventListener('mousedown', this.onMousedown.bind(this));
         drawingAreaContainer.addEventListener('mousemove', this.onMousemove.bind(this));
-        drawingAreaContainer.style.width = framePixelWidth * drawingCanvasDpi + "px";
-        drawingAreaContainer.style.height = framePixelHeight * drawingCanvasDpi + "px";
         document.body.addEventListener('contextmenu', this.onCanvasContextMenu);
     },
 

js/rendering/FrameRenderer.js

@@ -17,24 +17,30 @@
 		this.displayGrid = !!renderingOptions.displayGrid;
 		this.dpi = renderingOptions.dpi;
 		this.className = className;
+
+		// Flag to know if the config was altered
+		this.canvasConfigDirty = true;
 	};
 
 	ns.FrameRenderer.prototype.init = function (frame) {
-		
-		this.createCanvas_(frame);
 		this.render(frame);
 	};
 
+	ns.FrameRenderer.prototype.updateDPI = function (newDPI) {
+		this.dpi = newDPI;
+		this.canvasConfigDirty = true;
+	};
+
 	ns.FrameRenderer.prototype.render = function (frame) {
 		for(var col = 0, width = frame.getWidth(); col < width; col++) {
 			for(var row = 0, height = frame.getHeight(); row < height; row++) {
-				this.drawPixel(col, row, frame, this.canvas, this.dpi);
+				this.drawPixel(col, row, frame, this.getCanvas_(frame), this.dpi);
 			}
 		}
 	};
 
 	ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) {
-		var context = this.canvas.getContext('2d');
+		var context = this.getCanvas_(frame).getContext('2d');
 		var color = frame.getPixel(col, row);
 		if(color == Constants.TRANSPARENT_COLOR) {
 			context.clearRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi);   
@@ -50,17 +56,19 @@
 	};
 
 	ns.FrameRenderer.prototype.clear = function (col, row, frame) {
-		this.canvas.getContext("2d").clearRect(0, 0, this.canvas.width, this.canvas.height);
+		var canvas = this.getCanvas_(frame)
+		canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
 	};
 
 	/**
 	 * @private
 	 */
-	ns.FrameRenderer.prototype.createCanvas_ = function (frame) {
-		if(this.canvas == undefined) {
+	ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
+		if(this.canvasConfigDirty) {
+			$(this.canvas).remove();
 			var width = frame.getWidth(),
 				height = frame.getHeight();
-
+			
 			var canvas = document.createElement("canvas");
 			canvas.setAttribute("width", width * this.dpi);
 			canvas.setAttribute("height", height * this.dpi);
@@ -72,7 +80,10 @@
 			canvas.setAttribute("class", canvasClassname);
 			
 			this.canvas = canvas;
+			this.container.appendChild(this.canvas);
+
+			this.canvasConfigDirty = false;
 		}
-		this.container.appendChild(this.canvas);
+		return this.canvas;
 	};
 })();