Added drawing loop, unplugged traditional renderers

index.html

@@ -89,6 +89,7 @@
   <script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
 
   <!-- Application libraries-->
+  <script src="js/rendering/DrawingLoop.js"></script>
   <script src="js/model/Frame.js"></script>
   <script src="js/model/FrameSheet.js"></script>
   <script src="js/rendering/FrameRenderer.js"></script>

js/controller/AnimatedPreviewController.js

@@ -6,7 +6,8 @@
 		this.animIndex = 0;
 
 		this.fps = parseInt($("#preview-fps")[0].value, 10);
-
+		this.deltaTime = 0;
+		this.previousTime = 0;
 		var renderingOptions = {
 			"dpi": dpi
 		};
@@ -25,29 +26,16 @@
 		$("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
 	};
 
-   	ns.AnimatedPreviewController.prototype.startAnimationTimer = function () {
-   		this.stopAnimationTimer();
-		this.animationTimer = window.setTimeout(this.refreshAnimatedPreview.bind(this), 1000/this.fps);
-    };
-
-   	ns.AnimatedPreviewController.prototype.stopAnimationTimer = function () {
-   		if (this.animationTimer) {
-   			window.clearInterval(this.animationTimer);
-   			this.animationTimer = null;
-   		}
-    };
-
     ns.AnimatedPreviewController.prototype.onFPSSliderChange = function(evt) {
 		this.fps = parseInt($("#preview-fps")[0].value, 10);
 	};
 
-   	ns.AnimatedPreviewController.prototype.refreshAnimatedPreview = function () {
+   	ns.AnimatedPreviewController.prototype.render = function () {
    		if (!this.framesheet.hasFrameAtIndex(this.animIndex)) {
    			this.animIndex = 0;
    		}
    		this.renderer.render(this.framesheet.getFrameByIndex(this.animIndex));
 		this.animIndex++;
-		this.startAnimationTimer();
     };
 
 })();

js/drawingtools/Move.js

@@ -29,7 +29,6 @@
 		var colDiff = col - this.startCol, rowDiff = row - this.startRow;
 		if (colDiff != 0 || rowDiff != 0) {
 			this.shiftFrame(colDiff, rowDiff, drawer.frame, this.frameClone);
-			drawer.renderFrame();
 		}
 	};
 

js/drawingtools/PaintBucket.js

@@ -21,10 +21,6 @@
 		var targetColor = drawer.frame.getPixel(col, row);
 		//this.recursiveFloodFill_(frame, col, row, targetColor, color);
 		this.queueLinearFloodFill_(drawer.frame, col, row, targetColor, color);
-		
-		// Draw in canvas:
-		// TODO: Remove that when we have the centralized redraw loop
-		drawer.renderFrame();
 	};
 
 	/**

js/drawingtools/Rectangle.js

@@ -25,7 +25,6 @@
 		
 		// Drawing the first point of the rectangle in the fake overlay canvas:
 		drawer.overlayFrame.setPixel(col, row, color);
-		drawer.renderOverlay();
 	};
 
 	ns.Rectangle.prototype.moveToolAt = function(col, row, color, drawer) {
@@ -44,13 +43,13 @@
 			}			
 			drawer.overlayFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
 		}
-		drawer.renderOverlay();
 	};
 
 	/**
 	 * @override
 	 */
 	ns.Rectangle.prototype.releaseToolAt = function(col, row, color, drawer) {		
+		drawer.clearOverlay();
 		// If the stroke tool is released outside of the canvas, we cancel the stroke: 
 		if(drawer.frame.containsPixel(col, row)) {
 			var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
@@ -59,12 +58,8 @@
 				drawer.frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
 			}
 			// The user released the tool to draw a line. We will compute the pixel coordinate, impact
-			// the model and draw them in the drawing canvas (not the fake overlay anymore)
-			// Draw in canvas:
-			// TODO: Remove that when we have the centralized redraw loop
-			drawer.renderFrame();		
+			// the model and draw them in the drawing canvas (not the fake overlay anymore)		
 		}
-		drawer.clearOverlay();
 	};
 
 	/**

js/drawingtools/SimplePen.js

@@ -23,10 +23,6 @@
 			this.previousCol = col;
 			this.previousRow = row;
 		    drawer.frame.setPixel(col, row, color);
-
-		    // Draw on canvas:
-		    // TODO: Remove that when we have the centralized redraw loop
-		    drawer.renderFramePixel(col, row);
 		}
 	};
 

js/piskel.js

@@ -51,6 +51,7 @@ $.namespace("pskl");
 
       piskel.initDPIs_();
 
+
       frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
       frameSheet.addEmptyFrame();
 
@@ -91,6 +92,16 @@ $.namespace("pskl");
         this.finishInit();
         pskl.LocalStorageService.displayRestoreNotification();
       }
+
+      var drawingLoop = new pskl.rendering.DrawingLoop();
+      drawingLoop.addCallback(this.render, this);
+      drawingLoop.start();
+    },
+
+    render : function (delta) {
+      this.drawingController.render(delta);
+      this.animationController.render(delta);
+      this.previewsController.render(delta);
     },
 
     /**
@@ -157,7 +168,7 @@ $.namespace("pskl");
       });
 
       $.subscribe(Events.REFRESH, function() {
-        piskel.setActiveFrameAndRedraw(0);
+        piskel.setActiveFrame(0);
       });
 
       // TODO: Move this into their service or behavior files:
@@ -186,13 +197,12 @@ $.namespace("pskl");
         piskel.setActiveFrame(0);  
         $.publish(Events.HIDE_NOTIFICATION);
         piskel.finishInit();
-        piskel.setActiveFrameAndRedraw(0);  
       };
 
       xhr.onerror = function () {
         $.publish(Events.HIDE_NOTIFICATION);
         piskel.finishInit();
-        piskel.setActiveFrameAndRedraw(0);
+        piskel.setActiveFrame(0);  
       };
 
       xhr.send();
@@ -203,18 +213,6 @@ $.namespace("pskl");
       this.drawingController.frame = this.getCurrentFrame(); 
     },
 
-    setActiveFrameAndRedraw: function(index) {
-      this.setActiveFrame(index);
-      this.redraw();
-    },
-
-    redraw : function () {
-      // Update drawing canvas:
-      this.drawingController.renderFrame();
-      // Update slideshow:
-      this.previewsController.createPreviews();
-    },
-
     getActiveFrameIndex: function() {
       if(-1 == activeFrameIndex) {
         throw "Bad active frame initialization."
@@ -237,12 +235,12 @@ $.namespace("pskl");
     removeFrame: function(frameIndex) {     
       frameSheet.removeFrameByIndex(frameIndex);
       var activeFrameIndex = frameIndex ? frameIndex - 1 : 0;
-      this.setActiveFrameAndRedraw(activeFrameIndex);
+      this.setActiveFrame(activeFrameIndex);
     },
 
     duplicateFrame: function(frameIndex) {
       frameSheet.duplicateFrameByIndex(frameIndex);
-      this.setActiveFrameAndRedraw(frameIndex + 1);
+      this.setActiveFrame(frameIndex + 1);
     },
 
     getCurrentColor : function () {
@@ -323,8 +321,6 @@ $.namespace("pskl");
 
 
         $.publish(Events.TOOL_RELEASED);
-        // TODO: Remove that when we have the centralized redraw loop
-        this.previewsController.createPreviews();
       }
     },