Moved drawing logic outside of tools. Previews and animations are broken. Performance is somehow degraded

js/rendering/DrawingController.js

@@ -0,0 +1,64 @@
+(function () {
+	var ns = $.namespace("pskl.rendering");
+	ns.DrawingController = function (frame, container, dpi) {
+		this.dpi = dpi;
+
+		// Public
+		this.frame = frame;
+		this.overlay = ns.Frame.createEmptyFromFrame(frame);
+
+		// Private
+		this.container = container;
+		this.mainCanvas = this.createMainCanvas();
+		this.overlayCanvas = this.createOverlayCanvas();
+		this.renderer = new ns.FrameRenderer();
+	};
+
+	ns.DrawingController.prototype.renderFrame = function () {
+		this.renderer.render(this.frame, this.mainCanvas, this.dpi);
+	};
+
+	ns.DrawingController.prototype.renderFramePixel = function (col, row) {
+		this.renderer.drawPixel(col, row, this.frame, this.mainCanvas, this.dpi);
+	};
+
+	ns.DrawingController.prototype.renderOverlay = function () {
+		this.renderer.render(this.overlay, this.overlayCanvas, this.dpi);
+	};
+
+	ns.DrawingController.prototype.clearOverlay = function () {
+		this.overlay = ns.Frame.createEmptyFromFrame(this.frame);
+		this.overlayCanvas.getContext("2d").clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);
+	};
+
+	ns.DrawingController.prototype.createMainCanvas = function () {
+		var mainCanvas = this.createCanvas();
+		mainCanvas.className = "canvas-main";
+		this.container.appendChild(mainCanvas);
+		return mainCanvas;
+	};
+
+	// For some tools, we need a fake canvas that overlay the drawing canvas. These tools are
+	// generally 'drap and release' based tools (stroke, selection, etc) and the fake canvas
+	// will help to visualize the tool interaction (without modifying the canvas).
+	ns.DrawingController.prototype.createOverlayCanvas = function () {
+		var overlayCanvas = this.createCanvas();
+		overlayCanvas.className = "canvas-overlay";
+		this.container.appendChild(overlayCanvas);
+		return overlayCanvas;
+	};
+
+	// For some tools, we need a fake canvas that overlay the drawing canvas. These tools are
+	// generally 'drap and release' based tools (stroke, selection, etc) and the fake canvas
+	// will help to visualize the tool interaction (without modifying the canvas).
+	ns.DrawingController.prototype.createCanvas = function () {
+		var width = this.frame.getWidth(),
+			height = this.frame.getHeight();
+
+		var canvas = document.createElement("canvas");
+		canvas.setAttribute("width", width * this.dpi);
+		canvas.setAttribute("height", height * this.dpi);
+		
+		return canvas;
+	};
+})();

js/rendering/Frame.js

@@ -0,0 +1,53 @@
+(function () {
+	var ns = $.namespace("pskl.rendering");
+	ns.Frame = function (pixels) {
+		this.pixels = pixels;
+	};
+
+	ns.Frame.createEmpty = function (width, height) {
+		var pixels = []; //new Array(width);
+		for (var columnIndex=0; columnIndex < width; columnIndex++) {
+			var columnArray = [];
+			for(var heightIndex = 0; heightIndex < height; heightIndex++) {
+				columnArray.push(Constants.TRANSPARENT_COLOR);
+			}
+			pixels[columnIndex] = columnArray;
+    	}
+		return new ns.Frame(pixels);
+	};
+
+	ns.Frame.createEmptyFromFrame = function (frame) {
+		return ns.Frame.createEmpty(frame.getWidth(), frame.getHeight());
+	};
+
+	ns.Frame.prototype.clone = function () {
+		var clone = ns.Frame.createEmptyFromFrame(this);
+		for (var col = 0 ; col < clone.getWidth() ; col++) {
+			for (var row = 0 ; row < clone.getHeight() ; row++) {
+				clone.setPixel(col, row, this.getPixel(col, row));
+			}
+		}
+		return clone;
+	};
+
+	ns.Frame.prototype.setPixel = function (col, row, color) {
+		this.pixels[col][row] = color;
+	};
+
+	ns.Frame.prototype.getPixel = function (col, row) {
+		return this.pixels[col][row];
+	};
+
+	ns.Frame.prototype.getWidth = function () {
+		return this.pixels.length;
+	};
+
+	ns.Frame.prototype.getHeight = function () {
+		return this.pixels[0].length;
+	};
+
+	ns.Frame.prototype.isInFrame = function (col, row) {
+		return col >= 0 && row >= 0 && col <= this.pixels.length && row <= this.pixels[0].length;
+	};
+
+})();

js/rendering/FrameRenderer.js

@@ -1,31 +1,28 @@
-(function () {
-	var ns = $.namespace("pskl.rendering");
-	ns.FrameRenderer = function () {};
-
-	ns.FrameRenderer.prototype.render = function (frame, canvas, dpi) {
-		var color;
-		for(var col = 0, num_col = frame.length; col < num_col; col++) {
-			for(var row = 0, num_row = frame[col].length; row < num_row; row++) {
-				color = frame[col][row];
-				this.drawPixelInCanvas(col, row, canvas, color, dpi);
-			}
-		}
-	};
-
-	ns.FrameRenderer.prototype.drawPixelInCanvas = function () {
-		var context = canvas.getContext('2d');
-		if(color == Constants.TRANSPARENT_COLOR) {
-			context.clearRect(col * dpi, row * dpi, dpi, dpi);   
-		} 
-		else {
-			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(col * dpi, row * dpi, dpi, dpi);
-		}
-
-	} 
-
+(function () {
+	var ns = $.namespace("pskl.rendering");
+	ns.FrameRenderer = function () {};
+
+	ns.FrameRenderer.prototype.render = function (frame, canvas, dpi) {
+		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, canvas, dpi);
+			}
+		}
+	};
+
+	ns.FrameRenderer.prototype.drawPixel = function (col, row, frame, canvas, dpi) {
+		var context = canvas.getContext('2d');
+		var color = frame.getPixel(col, row);
+		if(color == Constants.TRANSPARENT_COLOR) {
+			context.clearRect(col * dpi, row * dpi, dpi, dpi);   
+		} 
+		else {
+			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(col * dpi, row * dpi, dpi, dpi);
+		}
+	};
 })();