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 () {
+   	ns.AnimatedPreviewController.prototype.render = function (delta) {
-   		if (!this.framesheet.hasFrameAtIndex(this.animIndex)) {
+   		this.elapsedTime += delta;
-   			this.animIndex = 0;
+   		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 () {
-		this.renderer.render(this.frame);
+    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,37 +6,41 @@
 		this.framesheet = framesheet;
 		this.container = container;
 
+		this.dirty = false;
+
 		$.subscribe(Events.REDRAW_PREVIEWFILM, $.proxy(function(evt) {
-			// this.render();
+			this.dirty = true;
 		}, this));
 	};
 
 	ns.PreviewFilmController.prototype.init = function() {
-      var addFrameButton = $('#add-frame-button')[0];
+		var addFrameButton = $('#add-frame-button')[0];
-      addFrameButton.addEventListener('mousedown', this.addFrame.bind(this));
+		addFrameButton.addEventListener('mousedown', this.addFrame.bind(this));
     };
 
     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 () {
-      // TODO(vincz): Full redraw on any drawing modification, optimize.
+		if (!this.dirty) return
-      this.container.html("");
+		// TODO(vincz): Full redraw on any drawing modification, optimize.
+		this.container.html("");
 
-      var frameCount = this.framesheet.getFrameCount();
+		var frameCount = this.framesheet.getFrameCount();
-      
-      for (var i = 0, l = frameCount; i < l ; i++) {
-        this.container.append(this.createInterstitialTile_(i));
-        this.container.append(this.createPreviewTile_(i, this.framesheet));
-      }
-      this.container.append(this.createInterstitialTile_(frameCount));
 
-      var needDragndropBehavior = !!(frameCount > 1);
+		for (var i = 0, l = frameCount; i < l ; i++) {
-      if(needDragndropBehavior) {
+		this.container.append(this.createInterstitialTile_(i));
-      	this.initDragndropBehavior_();
+		this.container.append(this.createPreviewTile_(i, this.framesheet));
-      }
+		}
+		this.container.append(this.createInterstitialTile_(frameCount));
+
+		var needDragndropBehavior = !!(frameCount > 1);
+		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) {