wip : needs tests

src/js/model/Frame.js

@@ -88,7 +88,7 @@
     if (this.containsPixel(x, y)) {
       var p = this.pixels[x][y];
       if (p !== color) {
-        this.pixels[x][y] = color;
+        this.pixels[x][y] = color || Constants.TRANSPARENT_COLOR;
         this.version++;
       }
     }

src/js/rendering/CanvasRenderer.js

@@ -18,19 +18,9 @@
 
   ns.CanvasRenderer.prototype.render = function  () {
     var canvas = this.createCanvas_();
-    var context = canvas.getContext('2d');
 
-    for (var x = 0, width = this.frame.getWidth(); x < width; x++) {
+    // Draw in canvas
-      for (var y = 0, height = this.frame.getHeight(); y < height; y++) {
+    pskl.utils.FrameUtils.drawToCanvas(this.frame, canvas, this.transparentColor_);
-        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');
@@ -49,14 +39,6 @@
     context.fillRect(x, y, 1, 1);
   };
 
-  ns.CanvasRenderer.prototype.renderLine_ = function (color, x, y, width, context) {
-    if (color == Constants.TRANSPARENT_COLOR) {
-      color = this.transparentColor_;
-    }
-    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

@@ -219,18 +219,8 @@
       this.canvas = pskl.utils.CanvasUtils.createCanvas(frame.getWidth(), frame.getHeight());
     }
 
-    var context = this.canvas.getContext('2d');
+    // Draw in canvas
-    for (var x = 0, width = frame.getWidth() ; x < width ; x++) {
+    pskl.utils.FrameUtils.drawToCanvas(frame, this.canvas);
-      for (var y = 0, height = frame.getHeight() ; y < height ; y++) {
-        var color = frame.getPixel(x, y);
-        var w = 1;
-        while (color === frame.getPixel(x, y + w)) {
-          w++;
-        }
-        this.renderLine_(color, x, y, w, context);
-        y = y + w - 1;
-      }
-    }
 
     this.updateMargins_(frame);
 
@@ -264,18 +254,4 @@
     }
     displayContext.restore();
   };
-
-  ns.FrameRenderer.prototype.renderPixel_ = function (color, x, y, context) {
-    if (color != Constants.TRANSPARENT_COLOR) {
-      context.fillStyle = color;
-      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/selection/BaseSelection.js

@@ -24,9 +24,15 @@
   };
 
   ns.BaseSelection.prototype.fillSelectionFromFrame = function (targetFrame) {
+    // on copy trim the selection if out of bounds
+    // this.pixels = this.pixels.filter(function (pixel) {
+    //   return targetFrame.containsPixel(pixel.col, pixel.row);
+    // });
+
     this.pixels.forEach(function (pixel) {
       pixel.color = targetFrame.getPixel(pixel.col, pixel.row);
     });
+
     this.hasPastedContent = true;
   };
 })();

src/js/utils/FrameUtils.js

@@ -16,6 +16,43 @@
       return canvasRenderer.render();
     },
 
+    /**
+     * Draw the provided frame in a 2d canvas
+     *
+     * @param  {pskl.model.Frame} frame the frame to draw
+     * @param  {Canvas} canvas the canvas target
+     * @param  {String} transparentColor (optional) color to use to represent transparent pixels.
+     */
+    drawToCanvas : function (frame, canvas, transparentColor) {
+      var context = canvas.getContext('2d');
+
+      transparentColor = transparentColor || Constants.TRANSPARENT_COLOR;
+      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);
+          var w = 1;
+          while (color === frame.getPixel(x, y + w) && (y + w) < height) {
+            w++;
+          }
+
+          if (color == Constants.TRANSPARENT_COLOR) {
+            color = transparentColor;
+          }
+
+          pskl.utils.FrameUtils.renderLine_(color, x, y, w, context);
+          y = y + w - 1;
+        }
+      }
+
+    },
+
+    renderLine_ : function (color, x, y, width, context) {
+      if (color != Constants.TRANSPARENT_COLOR) {
+        context.fillStyle = color;
+        context.fillRect(x, y, 1, width);
+      }
+    },
+
     merge : function (frames) {
       var merged = null;
       if (frames.length) {