temp

src/js/controller/PreviewFilmController.js

@@ -1,6 +1,8 @@
 (function () {
   var ns = $.namespace("pskl.controller");
 
+  var CACHE_RESET_INTERVAL = 1000 * 60 * 10;
+
   var ACTION = {
     SELECT : 'select',
     CLONE : 'clone',
@@ -15,6 +17,9 @@
     this.refreshZoom_();
 
     this.redrawFlag = true;
+
+    this.cache_ = {};
+    window.setInterval(function () {this.cache_ = {};}.bind(this), CACHE_RESET_INTERVAL);
   };
 
   ns.PreviewFilmController.prototype.init = function() {
@@ -175,11 +180,8 @@
     cloneFrameButton.className = "tile-overlay duplicate-frame-action";
     previewTileRoot.appendChild(cloneFrameButton);
 
-    var canvasRenderer = new pskl.rendering.CanvasRenderer(currentFrame, this.zoom);
+
-    canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);
+    canvasContainer.appendChild(this.getCanvasForFrame(currentFrame));
-    var canvas = canvasRenderer.render();
-    canvas.classList.add('tile-view', 'canvas');
-    canvasContainer.appendChild(canvas);
     previewTileRoot.appendChild(canvasContainer);
 
     if(tileNumber > 0 || this.piskelController.getFrameCount() > 1) {
@@ -206,6 +208,27 @@
     return previewTileRoot;
   };
 
+  ns.PreviewFilmController.prototype.getCanvasForFrame = function (frame) {
+    var canvas = null;
+    var cacheKey = frame.getHash() + this.zoom;
+    if (this.cache_[cacheKey]) {
+      canvas = this.cache_[cacheKey];
+    } else {
+      var frameAsString = JSON.stringify(frame.getPixels());
+      if (this.cache_[frameAsString]) {
+        canvas = pskl.CanvasUtils.clone(this.cache_[frameAsString]);
+      } else {
+        var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, this.zoom);
+        canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);
+        canvas = canvasRenderer.render();
+        this.cache_[frameAsString] = canvas;
+      }
+      canvas.classList.add('tile-view', 'canvas');
+      this.cache_[cacheKey] = canvas;
+    }
+    return canvas;
+  };
+
   /**
    * Calculate the preview zoom depending on the piskel size
    */

src/js/controller/piskel/PiskelController.js

@@ -77,10 +77,16 @@
   };
 
   ns.PiskelController.prototype.getFrameAt = function (index) {
+    var hash = [];
     var frames = this.getLayers().map(function (l) {
-      return l.getFrameAt(index);
+      var frame = l.getFrameAt(index);
+      hash.push(frame.getHash());
+      return frame;
     });
-    return pskl.utils.FrameUtils.merge(frames);
+    var mergedFrame = pskl.utils.FrameUtils.merge(frames);
+    mergedFrame.id = hash.join('-');
+    mergedFrame.version = 0;
+    return mergedFrame;
   };
 
   ns.PiskelController.prototype.hasFrameAt = function (index) {

src/js/drawingtools/SimplePen.js

@@ -22,7 +22,7 @@
    * @override
    */
   ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
-    frame.setPixel(col, row, color);
+    overlay.setPixel(col, row, color);
     this.previousCol = col;
     this.previousRow = row;
     this.pixels.push({
@@ -55,17 +55,26 @@
 
 
   ns.SimplePen.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
+    // apply on real frame
+    this.setPixelsToFrame_(frame, this.pixels, color);
+
+    // save state
     this.raiseSaveStateEvent({
       pixels : this.pixels.slice(0),
       color : color
     });
+
+    // reset
     this.pixels = [];
   };
 
   ns.SimplePen.prototype.replay = function (frame, replayData) {
-    var pixels = replayData.pixels;
+    this.setPixelsToFrame_(frame, replayData.pixels, replayData.color);
+  };
+
+  ns.SimplePen.prototype.setPixelsToFrame_ = function (frame, pixels, color) {
     pixels.forEach(function (pixel) {
-      frame.setPixel(pixel.col, pixel.row, replayData.color);
+      frame.setPixel(pixel.col, pixel.row, color);
     });
   };
 })();

src/js/rendering/frame/TiledFrameRenderer.js

@@ -1,6 +1,8 @@
 (function () {
   var ns = $.namespace('pskl.rendering.frame');
 
+  var CACHE_RESET_INTERVAL = 1000 * 60 * 10;
+
   ns.TiledFrameRenderer = function (container, zoom) {
     this.container = container;
     this.setZoom(zoom);
@@ -8,11 +10,31 @@
     this.displayContainer = document.createElement('div');
     this.displayContainer.classList.add('tiled-frame-container');
     container.get(0).appendChild(this.displayContainer);
+
+    this.cache_ = {};
+    window.setInterval(function () {this.cache_ = {};}.bind(this), CACHE_RESET_INTERVAL);
   };
 
   ns.TiledFrameRenderer.prototype.render = function (frame) {
-    var canvas = new pskl.utils.FrameUtils.toImage(frame, this.zoom);
+    var frameData = null;
-    this.displayContainer.style.backgroundImage = 'url(' + canvas.toDataURL('image/png') + ')';
+
+    var hash = frame.getHash();
+    if (this.cache_[hash]) {
+      frameData = this.cache_[hash];
+    } else {
+      var frameAsString = JSON.stringify(frame.getPixels());
+      if (this.cache_[frameAsString]) {
+        frameData = this.cache_[frameAsString];
+      } else {
+        var canvas = new pskl.utils.FrameUtils.toImage(frame, this.zoom);
+        frameData = canvas.toDataURL('image/png');
+        this.cache_[frameAsString] = frameData;
+      }
+
+      this.cache_[hash] = frameData;
+    }
+
+    this.displayContainer.style.backgroundImage = 'url(' + frameData + ')';
   };
 
   ns.TiledFrameRenderer.prototype.show = function () {

src/js/utils/CanvasUtils.js

@@ -48,6 +48,16 @@
       }
     },
 
+    clone : function (canvas) {
+      var clone = pskl.CanvasUtils.createCanvas(canvas.width, canvas.height);
+
+      //apply the old canvas to the new one
+      clone.getContext('2d').drawImage(canvas, 0, 0);
+
+      //return the new canvas
+      return clone;
+    },
+
     getImageDataFromCanvas : function (canvas) {
       var sourceContext = canvas.getContext('2d');
       return sourceContext.getImageData(0, 0, canvas.width, canvas.height).data;