Basic export - opening new window with concatenated spritesheet in PNG format

css/tools.css

@@ -22,11 +22,15 @@
   background-image: url(../img/actions/save.png);
 }
 
+.tool-icon.tool-export {
+  background-image: url(../img/actions/image-export.png);
+  background-position: 6px 3px;
+}
+
 .tool-icon.tool-add-frame {
   background-image: url(../img/actions/add.png);
 }
 
-
 /*
  * Tool icons:
  */

index.html

@@ -26,6 +26,7 @@
         <!-- TODO: Remove that from here or change CSS class naming since
           they are framesheet level actions, not tools --> 
         <li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></li>
+        <li class="tool-icon tool-export" data-tool-id="tool-export" title="Export" onclick="piskel.exportToPNG()" rel="tooltip" data-placement="bottom" ></li>
         <li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame" rel="tooltip" data-placement="bottom" ></li>
       </ul>
     </div>
@@ -84,7 +85,8 @@
   
   <!-- Libraries -->
   <script src="js/utils/core.js"></script>
-  <script src="js/utils/pixelUtils.js"></script>
+  <script src="js/utils/PixelUtils.js"></script>
+  <script src="js/utils/CanvasUtils.js"></script>
   <script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
 
   <!-- Application libraries-->
@@ -98,8 +100,9 @@
   <script src="js/selection/ShapeSelection.js"></script>
   <!-- Rendering -->
   <script src="js/rendering/FrameRenderer.js"></script>
-  <script src="js/controller/DrawingController.js"></script>
+  <script src="js/rendering/SpritesheetRenderer.js"></script>
   <!-- Controllers -->
+  <script src="js/controller/DrawingController.js"></script>
   <script src="js/controller/PreviewFilmController.js"></script>
   <script src="js/controller/AnimatedPreviewController.js"></script>
   <script src="js/controller/ToolController.js"></script>

js/model/FrameSheet.js

@@ -7,6 +7,14 @@
 		this.currentFrameIndex = 0;
 	};
 
+	ns.FrameSheet.prototype.getHeight = function () {
+		return this.height;
+	};
+
+	ns.FrameSheet.prototype.getWidth = function () {
+		return this.width;
+	};
+
 	ns.FrameSheet.prototype.addEmptyFrame = function () {
 		this.addFrame(ns.Frame.createEmpty(this.width, this.height));
 	};

js/piskel.js

@@ -163,6 +163,13 @@ $.namespace("pskl");
         event.preventDefault();
       }
       return false;
+    },
+
+    /**
+     * Open new window with spritesheet as PNG
+     */
+    exportToPNG : function () {
+      (new pskl.rendering.SpritesheetRenderer(frameSheet)).render();
     }
   };
 

js/rendering/FrameRenderer.js

@@ -63,17 +63,6 @@
 		this.lastRenderedFrame = frame;
 	};
 
-	ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) {
-		var context = this.getCanvas_(frame).getContext('2d');
-		var color = frame.getPixel(col, row);
-		if(color == Constants.TRANSPARENT_COLOR) {
-			context.clearRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);   
-		} else {
-			this.renderPixel_(color, col, row, context);
-		}
-		this.lastRenderedFrame = frame;
-	};
-
 	ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
 		if(color != Constants.TRANSPARENT_COLOR) {
 			context.fillStyle = color;
@@ -136,23 +125,15 @@
 			var col = frame.getWidth(),
 				row = frame.getHeight();
 			
-			var canvas = document.createElement("canvas");
-			
 			var pixelWidth =  col * this.dpi + this.gridStrokeWidth * (col - 1);
 			var pixelHeight =  row * this.dpi + this.gridStrokeWidth * (row - 1);
-			canvas.setAttribute("width", pixelWidth);
-			canvas.setAttribute("height", pixelHeight);
-			var canvasClassname =  "canvas";
-			if(this.className) {
-				canvasClassname += " " + this.className;	
-			}
-			canvas.setAttribute("class", canvasClassname);
+			var canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, ["canvas", this.className]);
+
 			this.container.append(canvas);
 
 			if(this.gridStrokeWidth > 0) {
 				this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row);
 			}
-			
 				
 			this.canvas = canvas;
 			this.canvasConfigDirty = false;

js/rendering/SpritesheetRenderer.js

@@ -0,0 +1,54 @@
+(function () {
+
+	var ns = $.namespace("pskl.rendering");
+
+	ns.SpritesheetRenderer = function (framesheet, renderingOptions) {
+		this.framesheet = framesheet;
+	};
+
+
+	/**
+	 * Will open a new window displaying the spritesheet as a png 
+	 */
+	ns.SpritesheetRenderer.prototype.render = function () {
+		var canvas = this.createCanvas_();
+		for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) {
+			var frame = this.framesheet.getFrameByIndex(i);
+			var offsetWidth = i * this.framesheet.getWidth();
+			var offsetHeight = 0;
+			this.drawFrameInCanvas_(frame, canvas, offsetWidth, offsetHeight);
+		}
+		var options = [
+		"dialog=yes", "scrollbars=no", "status=no",
+		"width=" + this.framesheet.getWidth() * this.framesheet.getFrameCount(),
+		"height="+this.framesheet.getHeight()
+		].join(",");
+
+		window.open(canvas.toDataURL("image/png"), "piskel-export", options);
+	};
+
+	ns.SpritesheetRenderer.prototype.createCanvas_ = function () {
+		var frameCount = this.framesheet.getFrameCount();
+		if (frameCount > 0){
+			var width = frameCount * this.framesheet.getWidth();
+			var height = this.framesheet.getHeight();
+			var canvas = pskl.CanvasUtils.createCanvas(width, height);
+			return canvas;
+		} else {
+			throw "Cannot render empty Spritesheet"
+		}
+	};
+
+	ns.SpritesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) {
+		var context = canvas.getContext('2d');
+		for(var col = 0, width = frame.getWidth(); col < width; col++) {
+			for(var row = 0, height = frame.getHeight(); row < height; row++) {
+				var color = frame.getPixel(col, row);
+				if(color != Constants.TRANSPARENT_COLOR) {
+					context.fillStyle = color;
+					context.fillRect(col + offsetWidth, row + offsetHeight, 1, 1);
+				}
+			}
+		}
+	}
+})();

js/utils/CanvasUtils.js

@@ -0,0 +1,22 @@
+(function () {
+    var ns = $.namespace("pskl");
+
+    ns.CanvasUtils = {
+    	createCanvas : function (width, height, classList) {
+    		var canvas = document.createElement("canvas");
+			canvas.setAttribute("width", width);
+			canvas.setAttribute("height", height);
+
+			if (typeof classList == "string") {
+    			classList = [classList];
+    		}
+    		if (Array.isArray(classList)) {
+    			for (var i = 0 ; i < classList.length ; i++) {
+    				canvas.classList.add(classList[i]);
+				}
+    		}
+			
+			return canvas;
+    	}
+    };
+})();