Cleaned FrameRenderer.js FrameRenderer should also keep a reference on the frame it is updating - initially I wanted the renderer to be frame independant, but it doesnt bring much

js/controller/DrawingController.js

@@ -206,13 +206,11 @@
 		this.renderer.updateDPI(newDPI);
 		this.overlayRenderer.updateDPI(newDPI);
 
-		this.renderer.render(this.frame);
+		this.render();
-		this.overlayRenderer.render(this.overlayFrame);
 	};
 
   ns.DrawingController.prototype.render = function () {
     try {
-
       this.renderFrame();
       this.renderOverlay();
     } catch (e) {
@@ -236,12 +234,11 @@
     var serializedOverlay = this.overlayFrame.serialize();
     if (this.serializedOverlay != serializedOverlay) {
       this.serializedOverlay = serializedOverlay
-      this.renderer.render(this.overlayFrame);
+      this.overlayRenderer.render(this.overlayFrame);
     }
 	};
 
 	ns.DrawingController.prototype.clearOverlay = function () {
 		this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(this.frame);
-		this.overlayRenderer.clear();
 	};
 })();

js/drawingtools/Stroke.js

@@ -35,7 +35,6 @@
 		// The fake canvas where we will draw the preview of the stroke:
 		// Drawing the first point of the stroke in the fake overlay canvas:
 		drawer.overlayFrame.setPixel(col, row, color);
-		drawer.renderOverlay();
 	};
 
 	ns.Stroke.prototype.moveToolAt = function(col, row, color, drawer) {
@@ -59,7 +58,6 @@
 			}			
 			drawer.overlayFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
 		}
-		drawer.renderOverlay();
 	};
 
 	/**
@@ -78,7 +76,6 @@
 			}
 			// Draw in canvas:
 			// TODO: Remove that when we have the centralized redraw loop
-			drawer.renderFrame();
 		} 
 		// For now, we are done with the stroke tool and don't need an overlay anymore:
 		drawer.clearOverlay();   

js/rendering/FrameRenderer.js

@@ -58,33 +58,42 @@
 	};
 
 	ns.FrameRenderer.prototype.render = function (frame) {
+		this.clear(frame);
+		var context = this.getCanvas_(frame).getContext('2d');
 		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.getCanvas_(frame, col, row), this.dpi);
+				var color = frame.getPixel(col, row);
+				this.renderPixel_(color, col, row, context);
 			}
 		}
 		this.lastRenderedFrame = frame;
 	};
 
 	ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) {
-		var context = this.getCanvas_(frame, col, row).getContext('2d');
+		var context = this.getCanvas_(frame).getContext('2d');
 		var color = frame.getPixel(col, row);
 		if(color == Constants.TRANSPARENT_COLOR) {
-			context.clearRect(this.getFrameY_(col), this.getFrameY_(row), this.dpi, this.dpi);   
+			context.clearRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);   
-		} 
+		} else {
-		else {
+			this.renderPixel_(color, col, row, context);
-			if(color != Constants.SELECTION_TRANSPARENT_COLOR) {
-				// TODO(vincz): Found a better design to update the palette, it's called too frequently.
-				$.publish(Events.COLOR_USED, [color]);
-			}
-			context.fillStyle = color;
-			context.fillRect(this.getFrameY_(col), this.getFrameY_(row), this.dpi, this.dpi);
 		}
 		this.lastRenderedFrame = frame;
 	};
 
-	ns.FrameRenderer.prototype.clear = function (col, row, frame) {
+	ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
-		var canvas = this.getCanvas_(frame, col, row)
+		if(color != Constants.TRANSPARENT_COLOR) {
+			context.fillStyle = color;
+			context.fillRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);
+		} 
+		
+		if(color != Constants.SELECTION_TRANSPARENT_COLOR) {
+			// TODO(vincz): Found a better design to update the palette, it's called too frequently.
+			$.publish(Events.COLOR_USED, [color]);
+		}
+	};
+
+	ns.FrameRenderer.prototype.clear = function (frame) {
+		var canvas = this.getCanvas_(frame);
 		canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
 	};
 
@@ -104,15 +113,8 @@
 	/**
 	 * @private
 	 */
-	ns.FrameRenderer.prototype.getFrameX_ = function(col) {
+	ns.FrameRenderer.prototype.getFramePos_ = function(index) {
-		return col * this.dpi + ((col - 1) * this.gridStrokeWidth);
+		return index * this.dpi + ((index - 1) * this.gridStrokeWidth);
-	};
-
-	/**
-	 * @private
-	 */
-	ns.FrameRenderer.prototype.getFrameY_ = function(row) {
-		return row * this.dpi + ((row - 1) * this.gridStrokeWidth);
 	};
 
 	/**
@@ -123,14 +125,14 @@
 		ctx.lineWidth = Constants.GRID_STROKE_WIDTH;
 		ctx.strokeStyle = Constants.GRID_STROKE_COLOR;
 		for(var c=1; c < col; c++) {			
-	        ctx.moveTo(this.getFrameX_(c), 0);
+	        ctx.moveTo(this.getFramePos_(c), 0);
-	        ctx.lineTo(this.getFrameX_(c), height);
+	        ctx.lineTo(this.getFramePos_(c), height);
 	        ctx.stroke();
 		}
 		
 		for(var r=1; r < row; r++) {
-	        ctx.moveTo(0, this.getFrameY_(r));
+	        ctx.moveTo(0, this.getFramePos_(r));
-	        ctx.lineTo(width, this.getFrameY_(r));
+	        ctx.lineTo(width, this.getFramePos_(r));
 	        ctx.stroke();
 		}
 	};
@@ -168,18 +170,4 @@
 		}
 		return this.canvas;
 	};
-
-	/**
-	 * @private
-	 */
-	ns.FrameRenderer.prototype.createCanvasForFrame_ = function (frame) {
-		var canvas = document.createElement("canvas");
-		canvas.setAttribute("width", frame.getWidth() * this.dpi);
-		canvas.setAttribute("height", frame.getHeight() * this.dpi);
-		
-		canvas.classList.add("canvas");
-		if(this.className) canvas.classList.add(this.className);
-
-		return canvas;
-	};
 })();