Slight performance improvement, previewfilmcontroller still buggy

js/controller/AnimatedPreviewController.js

@@ -3,7 +3,9 @@
 	ns.AnimatedPreviewController = function (framesheet, container, dpi) {
 		this.framesheet = framesheet;
 		this.container = container;
-		this.animIndex = 0;
+
+		this.elapsedTime = 0;
+		this.currentIndex = 0;
 
 		this.fps = parseInt($("#preview-fps")[0].value, 10);
 		this.deltaTime = 0;
@@ -15,11 +17,6 @@
 	};
 
 	ns.AnimatedPreviewController.prototype.init = function () {
-		this.initDom();
-		this.renderer.init(this.framesheet.getFrameByIndex(this.animIndex));
-	};
-
-	ns.AnimatedPreviewController.prototype.initDom = function () {
 		$("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
 	};
 
@@ -27,12 +24,17 @@
 		this.fps = parseInt($("#preview-fps")[0].value, 10);
 	};
 
-   	ns.AnimatedPreviewController.prototype.render = function () {
-   		if (!this.framesheet.hasFrameAtIndex(this.animIndex)) {
-   			this.animIndex = 0;
+   	ns.AnimatedPreviewController.prototype.render = function (delta) {
+   		this.elapsedTime += delta;
+   		var index = Math.floor(this.elapsedTime / (1000/this.fps));
+   		if (index != this.currentIndex) {
+   			this.currentIndex = index;
+   			if (!this.framesheet.hasFrameAtIndex(this.currentIndex)) {
+	   			this.currentIndex = 0;
+	   			this.elapsedTime = 0;
+	   		}
+	   		this.renderer.render(this.framesheet.getFrameByIndex(this.currentIndex));
    		}
-   		this.renderer.render(this.framesheet.getFrameByIndex(this.animIndex));
-		this.animIndex++;
     };
 
 })();

js/controller/DrawingController.js

@@ -212,6 +212,7 @@
 
   ns.DrawingController.prototype.render = function () {
     try {
+
       this.renderFrame();
       this.renderOverlay();
     } catch (e) {
@@ -220,7 +221,11 @@
   };
 
 	ns.DrawingController.prototype.renderFrame = function () {
+    var serializedFrame = this.frame.serialize();
+    if (this.serializedFrame != serializedFrame) {
+      this.serializedFrame = serializedFrame
 		  this.renderer.render(this.frame);
+    }
 	};
 
 	ns.DrawingController.prototype.renderFramePixel = function (col, row) {
@@ -228,7 +233,11 @@
 	};
 
 	ns.DrawingController.prototype.renderOverlay = function () {
-		this.overlayRenderer.render(this.overlayFrame);
+    var serializedOverlay = this.overlayFrame.serialize();
+    if (this.serializedOverlay != serializedOverlay) {
+      this.serializedOverlay = serializedOverlay
+      this.renderer.render(this.overlayFrame);
+    }
 	};
 
 	ns.DrawingController.prototype.clearOverlay = function () {

js/controller/PreviewFilmController.js

@@ -6,8 +6,10 @@
 		this.framesheet = framesheet;
 		this.container = container;
 
+		this.dirty = false;
+
 		$.subscribe(Events.REDRAW_PREVIEWFILM, $.proxy(function(evt) {
-			// this.render();
+			this.dirty = true;
 		}, this));
 	};
 
@@ -18,10 +20,11 @@
 
     ns.PreviewFilmController.prototype.addFrame = function () {
  		this.framesheet.addEmptyFrame();
-        piskel.setActiveFrameAndRedraw(this.framesheet.getFrameCount() - 1);
+        piskel.setActiveFrame(this.framesheet.getFrameCount() - 1);
     };
 
     ns.PreviewFilmController.prototype.render = function () {
+		if (!this.dirty) return
 		// TODO(vincz): Full redraw on any drawing modification, optimize.
 		this.container.html("");
 
@@ -37,6 +40,7 @@
 		if(needDragndropBehavior) {
 			this.initDragndropBehavior_();
 		}
+		this.dirty = false;
     };
 
     /**
@@ -132,7 +136,7 @@
 		$('#preview-list').removeClass("show-interstitial-tiles");
 
 		// TODO(vincz): deprecate.
-		piskel.setActiveFrameAndRedraw(activeFrame);
+		piskel.setActiveFrame(activeFrame);
 
 		// TODO(vincz): move localstorage request to the model layer?
 		$.publish(Events.LOCALSTORAGE_REQUEST);
@@ -165,7 +169,7 @@
 		previewTileRoot.addEventListener('click', function(evt) {
 			// has not class tile-action:
 			if(!evt.target.classList.contains('tile-action')) {
-				piskel.setActiveFrameAndRedraw(tileNumber);
+				piskel.setActiveFrame(tileNumber);
 			}    
 		});
 

js/piskel.js

@@ -79,7 +79,7 @@ $.namespace("pskl");
       }
 
       $.subscribe('SET_ACTIVE_FRAME', function(evt, frameId) {
-        piskel.setActiveFrameAndRedraw(frameId);
+        piskel.setActiveFrame(frameId);
       });
 
       $.subscribe('FRAMESHEET_RESET', function(evt, frameId) {