From 0642e17aa8d2e1fa72a648ea836bf91b6b144b6c Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Fri, 19 Dec 2014 08:28:15 +0100
Subject: [PATCH] Draw lines of pixels instead of single pixels

---
 .../controller/AnimatedPreviewController.js   |  1 -
 src/js/rendering/CanvasRenderer.js            | 22 ++++++++++++++++---
 src/js/rendering/frame/FrameRenderer.js       | 14 +++++++++++-
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/js/controller/AnimatedPreviewController.js b/src/js/controller/AnimatedPreviewController.js
index 9d5f2eb4..2ada9fad 100644
--- a/src/js/controller/AnimatedPreviewController.js
+++ b/src/js/controller/AnimatedPreviewController.js
@@ -178,7 +178,6 @@
   };
 
   ns.AnimatedPreviewController.prototype.setRenderFlag_ = function (bool) {
-    console.log('setRenderFlag_', bool);
     this.renderFlag = bool;
   };
 
diff --git a/src/js/rendering/CanvasRenderer.js b/src/js/rendering/CanvasRenderer.js
index c124c73b..3108419e 100644
--- a/src/js/rendering/CanvasRenderer.js
+++ b/src/js/rendering/CanvasRenderer.js
@@ -19,9 +19,18 @@
   ns.CanvasRenderer.prototype.render = function  () {
     var canvas = this.createCanvas_();
     var context = canvas.getContext('2d');
-    this.frame.forEachPixel(function (color, x, y) {
-      this.renderPixel_(color, x, y, context);
-    }.bind(this));
+
+    for(var x = 0, width = this.frame.getWidth(); x < width; x++) {
+      for(var y = 0, height = this.frame.getHeight(); y < height; y++) {
+        var color = this.frame.getPixel(x, y);
+        var w = 1;
+        while (color === this.frame.getPixel(x, y+w)) {
+          w++;
+        }
+        this.renderLine_(color, x, y, w, context);
+        y = y + w - 1;
+      }
+    }
 
     var scaledCanvas = this.createCanvas_(this.zoom);
     var scaledContext = scaledCanvas.getContext('2d');
@@ -40,6 +49,13 @@
     context.fillRect(x, y, 1, 1);
   };
 
+  ns.CanvasRenderer.prototype.renderLine_ = function (color, x, y, width, context) {
+    if(color != Constants.TRANSPARENT_COLOR) {
+      context.fillStyle = color;
+      context.fillRect(x, y, 1, width);
+    }
+  };
+
   ns.CanvasRenderer.prototype.createCanvas_ = function (zoom) {
     zoom = zoom || 1;
     var width = this.frame.getWidth() * zoom;
diff --git a/src/js/rendering/frame/FrameRenderer.js b/src/js/rendering/frame/FrameRenderer.js
index 9a0eaa74..d8291a5f 100644
--- a/src/js/rendering/frame/FrameRenderer.js
+++ b/src/js/rendering/frame/FrameRenderer.js
@@ -223,7 +223,12 @@
     for(var x = 0, width = frame.getWidth(); x < width; x++) {
       for(var y = 0, height = frame.getHeight(); y < height; y++) {
         var color = frame.getPixel(x, y);
-        this.renderPixel_(color, x, y, context);
+        var w = 1;
+        while (color === frame.getPixel(x, y+w)) {
+          w++;
+        }
+        this.renderLine_(color, x, y, w, context);
+        y = y + w - 1;
       }
     }
 
@@ -264,4 +269,11 @@
       context.fillRect(x, y, 1, 1);
     }
   };
+
+  ns.FrameRenderer.prototype.renderLine_ = function (color, x, y, width, context) {
+    if(color != Constants.TRANSPARENT_COLOR) {
+      context.fillStyle = color;
+      context.fillRect(x, y, 1, width);
+    }
+  };
 })();
\ No newline at end of file