Merge pull request #239 from juliandescottes/enhancement-performance-improvements

Enhancement performance improvements

src/css/style.css

@@ -1,9 +1,5 @@
 body {
-  background: radial-gradient(circle, #000, #373737);
-  /* 16/06/2013 : -webkit still needed for
-  safari, safari mobile and android browser and chrome for android
-  cf http://caniuse.com/css-gradients */
-  background: -webkit-radial-gradient(circle, #000, #373737);
+  background: #1D1D1D;
 }
 
 /* Browser fixes */

src/js/Constants.js

@@ -21,16 +21,8 @@ var Constants = {
   DEFAULT_PEN_COLOR : '#000000',
   TRANSPARENT_COLOR : 'rgba(0, 0, 0, 0)',
 
-  OVERLAY_ONION_SKIN : 'onion-skin',
-  OVERLAY_LAYER_PREVIEW : 'layer-preview',
-  OVERLAY_DISABLED : 'no-overlay',
-
-  NO_PALETTE_ID : '__no-palette',
   CURRENT_COLORS_PALETTE_ID : '__current-colors',
 
-  // Used for Spectrum input
-  PREFERRED_COLOR_FORMAT : 'rgb',
-
   /*
    * Fake semi-transparent color used to highlight transparent
    * strokes and rectangles:
@@ -43,22 +35,6 @@ var Constants = {
    */
   TOOL_TARGET_HIGHLIGHT_COLOR: 'rgba(255, 255, 255, 0.2)',
 
-  /*
-   * Default entry point for piskel web service:
-   */
-  STATIC : {
-    URL : {
-      SAVE : 'http://3.piskel-app.appspot.com/store',
-      GET : 'http://3.piskel-app.appspot.com/get'
-    }
-  },
-  APPENGINE : {
-    URL : {
-      SAVE : 'save'
-    }
-  },
-  IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-a.appspot.com/__/upload',
-  IMAGE_SERVICE_GET_URL : 'http://piskel-imgstore-a.appspot.com/img/',
 
   ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0',
 
@@ -71,5 +47,10 @@ var Constants = {
   EMPTY_FUNCTION : function () {},
 
   // TESTS
-  DRAWING_TEST_FOLDER : 'drawing'
+  DRAWING_TEST_FOLDER : 'drawing',
+
+  // SERVICE URLS
+  APPENGINE_SAVE_URL : 'save',
+  IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-b.appspot.com/__/upload',
+  IMAGE_SERVICE_GET_URL : 'http://piskel-imgstore-b.appspot.com/img/'
 };

src/js/controller/AnimatedPreviewController.js

@@ -178,7 +178,6 @@
   };
 
   ns.AnimatedPreviewController.prototype.setRenderFlag_ = function (bool) {
-    console.log('setRenderFlag_', bool);
     this.renderFlag = bool;
   };
 

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;

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);
+    }
+  };
 })();

src/js/service/AppEngineStorageService.js

@@ -35,6 +35,6 @@
       callbacks.after();
     };
 
-    pskl.utils.Xhr.post(Constants.APPENGINE.URL.SAVE, data, success, error);
+    pskl.utils.Xhr.post(Constants.APPENGINE_SAVE_URL, data, success, error);
   };
 })();