merged from master

.gitignore

@@ -1 +1,9 @@
+# mac artefacts
 *.DS_Store
+
+# sublime text stuff (the -project should actually be shared, but then we'd have to share the same disk location)
+*.sublime-project
+*.sublime-workspace
+
+# git stackdumps
+*.stackdump

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - 0.6

Makefile

@@ -0,0 +1,2 @@
+test:
+	jshint js/*.js

css/tools.css

@@ -77,6 +77,13 @@
   cursor: url(../img/tools/cursors/hand.png) 14 12, pointer;
 }
 
+.tool-grid,
+.tool-grid label,
+.tool-grid input {
+  line-height: 2.5;
+  cursor: pointer;
+}
+
 .tool-icon.selected {
   cursor: auto;
   background-color: #eee;

index.html

@@ -53,6 +53,13 @@
       </li>
     </ul>
 
+    <ul class="tools-group">
+      <li class="tool-grid">
+        <input id="show-grid" type="checkbox"/>
+        <label for="show-grid">Show grid</label>
+      </li>
+    </ul>
+  
   </div>
 
   <div class='left-nav'>
@@ -89,6 +96,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/Constants.js

@@ -12,5 +12,8 @@ var Constants = {
     /*
      * Default entry point for piskel web service:
      */
-	PISKEL_SERVICE_URL: 'http://2.piskel-app.appspot.com'
+    PISKEL_SERVICE_URL: 'http://2.piskel-app.appspot.com',
+
+    GRID_STROKE_WIDTH: 1,
+    GRID_STROKE_COLOR: "lightgray"
 };

js/Events.js

@@ -3,7 +3,6 @@ Events = {
     TOOL_SELECTED : "TOOL_SELECTED",
     TOOL_RELEASED : "TOOL_RELEASED",
     COLOR_SELECTED: "COLOR_SELECTED",
-	COLOR_USED: "COLOR_USED",
 
     /**
      *  When this event is emitted, a request is sent to the localstorage
@@ -13,7 +12,6 @@ Events = {
     LOCALSTORAGE_REQUEST: "LOCALSTORAGE_REQUEST",
 
     CANVAS_RIGHT_CLICKED: "CANVAS_RIGHT_CLICKED",
-	CANVAS_RIGHT_CLICK_RELEASED: "CANVAS_RIGHT_CLICK_RELEASED",
 
     /**
      * Event to request a refresh of the display.
@@ -22,6 +20,15 @@ Events = {
      */
     REFRESH: "REFRESH",
 
+    /**
+     * Temporary event to bind the redraw of right preview film to the canvas.
+     * This redraw should be driven by model updates.
+     * TODO(vincz): Remove.
+     */
+    REDRAW_PREVIEWFILM: "REDRAW_PREVIEWFILM",
+
+    GRID_DISPLAY_STATE_CHANGED: "GRID_DISPLAY_STATE_CHANGED",
+
     /**
      * The framesheet was reseted and is now probably drastically different.
      * Number of frames, content of frames, color used for the palette may have changed.

js/HistoryManager.js

@@ -1,6 +1,8 @@
 (function () {
 	var ns = $.namespace("pskl");
-	ns.HistoryManager = function () {};
+	ns.HistoryManager = function (framesheet) {
+    this.framesheet = framesheet; 
+  };
 
 	ns.HistoryManager.prototype.init = function () {
     document.body.addEventListener('keyup', this.onKeyup.bind(this));
@@ -8,7 +10,7 @@
 	};
 
   ns.HistoryManager.prototype.saveState = function () {
-      piskel.getCurrentFrame().saveState();
+    this.framesheet.getCurrentFrame().saveState();
   };
 
 	ns.HistoryManager.prototype.onKeyup = function (evt) {
@@ -22,19 +24,17 @@
   };
 
   ns.HistoryManager.prototype.undo = function () {
-      piskel.getCurrentFrame().loadPreviousState();
+    this.framesheet.getCurrentFrame().loadPreviousState();
     this.redraw();
   };
 
   ns.HistoryManager.prototype.redo = function () {
-      piskel.getCurrentFrame().loadNextState();
+    this.framesheet.getCurrentFrame().loadNextState();
     this.redraw();
   };
 
   ns.HistoryManager.prototype.redraw = function () {
-      piskel.drawingController.renderFrame();
+    this.framesheet.drawingController.renderFrame();
-      piskel.previewsController.createPreviews();
+    this.framesheet.previewsController.createPreviews();
   };
-
-    ns.HistoryManager = new ns.HistoryManager();
 })();

js/LocalStorageService.js

@@ -21,7 +21,7 @@ pskl.LocalStorageService = (function() {
     var persistToLocalStorageRequest_ = function() {
       // Persist to localStorage when drawing. We throttle localStorage accesses
       // for high frequency drawing (eg mousemove).
-      if(localStorageThrottler_ != null) {
+      if(localStorageThrottler_ !== null) {
           window.clearTimeout(localStorageThrottler_);
       }
       localStorageThrottler_ = window.setTimeout(function() {
@@ -34,32 +34,30 @@ pskl.LocalStorageService = (function() {
      * @private
      */
     var persistToLocalStorage_ = function() {
-      console.log('[LocalStorage service]: Snapshot stored')
+      console.log('[LocalStorage service]: Snapshot stored');
-      window.localStorage['snapShot'] = frameSheet_.serialize();
+      window.localStorage.snapShot = frameSheet_.serialize();
     };
 
     /**
      * @private
      */
     var restoreFromLocalStorage_ = function() {
-      frameSheet_.deserialize(window.localStorage['snapShot']);
+      frameSheet_.deserialize(window.localStorage.snapShot);
-      // Model updated, redraw everything:
-      $.publish(Events.REFRESH);
     };
 
     /**
      * @private
      */
     var cleanLocalStorage_ = function() {
-      console.log('[LocalStorage service]: Snapshot removed')
+      console.log('[LocalStorage service]: Snapshot removed');
-      delete window.localStorage['snapShot'];
+      delete window.localStorage.snapShot;
     };  
 
     return {
         init: function(frameSheet) {
 
-			if(frameSheet == undefined) {
+            if(frameSheet === undefined) {
-				throw "Bad LocalStorageService initialization: <undefined frameSheet>"
+                throw "Bad LocalStorageService initialization: <undefined frameSheet>";
             }
             frameSheet_ = frameSheet;
 
@@ -68,7 +66,7 @@ pskl.LocalStorageService = (function() {
 
         // TODO(vincz): Find a good place to put this UI rendering, a service should not render UI.
         displayRestoreNotification: function() {
-			if(window.localStorage && window.localStorage['snapShot']) {
+            if(window.localStorage && window.localStorage.snapShot) {
                 var reloadLink = "<a href='#' class='localstorage-restore onclick='piskel.restoreFromLocalStorage()'>reload</a>";
                 var discardLink = "<a href='#' class='localstorage-discard' onclick='piskel.cleanLocalStorage()'>discard</a>";
                 var content = "Non saved version found. " + reloadLink + " or " + discardLink;

js/Palette.js

@@ -77,7 +77,7 @@ pskl.Palette = (function() {
       } else {
         colorPicker[0].color.fromString(color);
       }
-    }
+    };
 
   return {
     init: function(framesheet) {

js/ToolSelector.js

@@ -20,16 +20,6 @@ pskl.ToolSelector = (function() {
     var currentSelectedTool = toolInstances.simplePen;
     var previousSelectedTool = toolInstances.simplePen;
 
-	var selectTool_ = function(tool) {
-		var maincontainer = $("body");
-        var previousSelectedToolClass = maincontainer.data("selected-tool-class");
-        if(previousSelectedToolClass) {
-          maincontainer.removeClass(previousSelectedToolClass);
-        }
-        maincontainer.addClass(toolBehavior.toolId);
-        $("#drawing-canvas-container").data("selected-tool-class", toolBehavior.toolId);
-	};
-
     var activateToolOnStage_ = function(tool) {
         var stage = $("body");
         var previousSelectedToolClass = stage.data("selected-tool-class");
@@ -56,7 +46,7 @@ pskl.ToolSelector = (function() {
 
         if(clickedTool.length) {
             for(var tool in toolInstances) {
-				if (toolInstances[tool].toolId == clickedTool.data()["toolId"]) {
+                if (toolInstances[tool].toolId == clickedTool.data().toolId) {
                     selectTool_(toolInstances[tool]);
 
                     // Show tool as selected:
@@ -67,6 +57,17 @@ pskl.ToolSelector = (function() {
         }
     };
 
+    /**
+     * Get state for the checkbox that control the display of the grid
+     * on the drawing canvas.
+     * @private
+     */
+    var isShowGridChecked_ = function() {
+        var showGridCheckbox = $('#show-grid');
+        var isChecked = showGridCheckbox.is(':checked');
+        return isChecked;
+    };
+
     return {
         init: function() {
             
@@ -75,6 +76,13 @@ pskl.ToolSelector = (function() {
             selectTool_(toolInstances.simplePen);
             // Activate listener on tool panel:
             $("#tools-container").click(onToolIconClicked_);
+
+            // Show/hide the grid on drawing canvas:
+            $.publish(Events.GRID_DISPLAY_STATE_CHANGED, [isShowGridChecked_()]);
+            $('#show-grid').change(function(evt) {
+                var checked = isShowGridChecked_();
+                $.publish(Events.GRID_DISPLAY_STATE_CHANGED, [checked]);
+            });
         }
     };
 })();

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);
 		
@@ -14,40 +16,24 @@
 	};
 
 	ns.AnimatedPreviewController.prototype.init = function () {
-		this.initDom();
-
-		this.renderer.init(this.framesheet.getFrameByIndex(this.animIndex));
-
-		this.startAnimationTimer();
-	};
-
-	ns.AnimatedPreviewController.prototype.initDom = function () {
 		$("#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 (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++;
-		this.startAnimationTimer();
     };
 
 })();

js/controller/DrawingController.js

@@ -1,48 +1,213 @@
 (function () {
 	var ns = $.namespace("pskl.controller");
-	ns.DrawingController = function (frame, container, dpi) {
+	ns.DrawingController = function (framesheet, container, dpi) {
-		this.dpi = dpi;
+		// TODO(vincz): Store user prefs in a localstorage string ?
-
 		var renderingOptions = {
 			"dpi": dpi,
-			"displayGrid": true // Retrieve from localsotrage config 
+			"hasGrid" : true
-		}
+		};
 
-		// Public
+		/**
-		this.frame = frame;
+		 * @public
-		this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame); // Type is frame
+		 */
+		this.framesheet = framesheet;
 		
-		// Private
+		/**
+		 * @public
+		 */
+		this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
+
+		/**
+		 * @private
+		 */
 		this.container = container;
+		
 		this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
 		this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
 		
-		this.renderer.init(this.frame);
+		this.renderer.init(framesheet.getCurrentFrame());
-		this.overlayRenderer.init(this.frame);
+		this.overlayRenderer.init(this.overlayFrame);
+
+		// State of drawing controller:
+		this.isClicked = false;
+		this.isRightClicked = false;
+		this.previousMousemoveTime = 0;
+		this.currentToolBehavior = null;
+		this.primaryColor =  Constants.DEFAULT_PEN_COLOR;
+		this.secondaryColor =  Constants.TRANSPARENT_COLOR;
+
+		this.initMouseBehavior();
+
+		$.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
+      console.log("Tool selected: ", toolBehavior);
+      this.currentToolBehavior = toolBehavior;
+    }, this));
+
+    $.subscribe(Events.COLOR_SELECTED, $.proxy(function(evt, color, isPrimary) {
+      console.log("Color selected: ", color);
+      if (isPrimary) {
+        this.primaryColor = color;
+      } else {
+        this.secondaryColor = color;
+      }
+    }, this));
+	};
+
+	ns.DrawingController.prototype.initMouseBehavior = function() {
+		var body = $('body');
+        this.container.mousedown($.proxy(this.onMousedown_, this));
+        this.container.mousemove($.proxy(this.onMousemove_, this));
+        body.mouseup($.proxy(this.onMouseup_, this));
+        
+        // Deactivate right click:
+        this.container.contextmenu(this.onCanvasContextMenu_);
+	};
+
+	/**
+	 * @private
+	 */
+	ns.DrawingController.prototype.onMousedown_ = function (event) {
+      this.isClicked = true;
+      
+      if(event.button == 2) { // right click
+        this.isRightClicked = true;
+        $.publish(Events.CANVAS_RIGHT_CLICKED);
+      }
+
+      var coords = this.getSpriteCoordinates(event);
+      
+      this.currentToolBehavior.applyToolAt(
+        coords.col, coords.row,
+        this.getCurrentColor_(),
+        this.framesheet.getCurrentFrame(),
+        this.overlayFrame
+      );      
+        
+      $.publish(Events.LOCALSTORAGE_REQUEST);
+    };
+
+    /**
+	 * @private
+	 */
+    ns.DrawingController.prototype.onMousemove_ = function (event) {
+      var currentTime = new Date().getTime();
+      // Throttling of the mousemove event:
+      if ((currentTime - this.previousMousemoveTime) > 40 ) {
+        var coords = this.getSpriteCoordinates(event);
+        if (this.isClicked) {
+       
+          this.currentToolBehavior.moveToolAt(
+            coords.col, coords.row,
+            this.getCurrentColor_(),
+            this.framesheet.getCurrentFrame(),
+            this.overlayFrame
+          );
+		  
+          // TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
+          // Eg when drawing, it may make sense to have it here. However for a non drawing tool,
+          // you don't need to draw anything when mousemoving and you request useless localStorage.
+          $.publish(Events.LOCALSTORAGE_REQUEST);
+        }
+        this.previousMousemoveTime = currentTime;
+      }
+    };
+
+    /**
+	 * @private
+	 */
+    ns.DrawingController.prototype.onMouseup_ = function (event) {
+      if(this.isClicked || this.isRightClicked) {
+        // A mouse button was clicked on the drawing canvas before this mouseup event,
+        // the user was probably drawing on the canvas.
+        // Note: The mousemove movement (and the mouseup) may end up outside
+        // of the drawing canvas.
+
+        this.isClicked = false;
+        this.isRightClicked = false;
+
+        var coords = this.getSpriteCoordinates(event);
+        //console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
+        this.currentToolBehavior.releaseToolAt(
+          coords.col, coords.row,
+          this.getCurrentColor_(),
+          this.framesheet.getCurrentFrame(),
+          this.overlayFrame
+        );
+
+        $.publish(Events.TOOL_RELEASED);
+      }
+    },
+
+    /**
+	 * @private
+	 */
+    ns.DrawingController.prototype.getRelativeCoordinates = function (clientX, clientY) {
+      var canvasPageOffset = this.container.offset();
+      return {
+        x : clientX - canvasPageOffset.left,
+        y : clientY - canvasPageOffset.top
+      };
+    };
+
+    /**
+	 * @private
+	 */
+    ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
+        var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
+        return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
+    };
+
+    /**
+	 * @private
+	 */
+    ns.DrawingController.prototype.getCurrentColor_ = function () {
+      if(this.isRightClicked) {
+        return this.secondaryColor;
+      } else {
+        return this.primaryColor;
+      }
+    };
+
+    /**
+	 * @private
+	 */
+    ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.cancelBubble = true;
+      return false;
     };
 	
 	ns.DrawingController.prototype.updateDPI = function (newDPI) {
 		this.renderer.updateDPI(newDPI);
 		this.overlayRenderer.updateDPI(newDPI);
 
-		this.renderer.render(this.frame);
+		this.render();
-		this.overlayRenderer.render(this.overlayFrame);
+	};
+
+  ns.DrawingController.prototype.render = function () {
+    try {
+      this.renderFrame();
+      this.renderOverlay();
+    } catch (e) {
+      // TODO : temporary t/c for integration
+    }
   };
 
 	ns.DrawingController.prototype.renderFrame = function () {
-		this.renderer.render(this.frame);
+    var frame = this.framesheet.getCurrentFrame();
-	};
+    var serializedFrame = frame.serialize();
-
+    if (this.serializedFrame != serializedFrame) {
-	ns.DrawingController.prototype.renderFramePixel = function (col, row) {
+      this.serializedFrame = serializedFrame
-		this.renderer.drawPixel(col, row, this.frame);
+		  this.renderer.render(frame);
+    }
 	};
 
 	ns.DrawingController.prototype.renderOverlay = function () {
+    var serializedOverlay = this.overlayFrame.serialize();
+    if (this.serializedOverlay != serializedOverlay) {
+      this.serializedOverlay = serializedOverlay
       this.overlayRenderer.render(this.overlayFrame);
-	};
+    }
-
-	ns.DrawingController.prototype.clearOverlay = function () {
-		this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(this.frame);
-		this.overlayRenderer.clear();
 	};
 })();

js/controller/PreviewFilmController.js

@@ -5,23 +5,36 @@
 		this.dpi = dpi;
 		this.framesheet = framesheet;
 		this.container = container;
+
+		this.redrawFlag = false;
+
+    	$.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
+		$.subscribe(Events.FRAMESHEET_RESET, this.flagForRedraw_.bind(this));
 	};
 
 	ns.PreviewFilmController.prototype.init = function() {
 		var addFrameButton = $('#add-frame-button')[0];
 		addFrameButton.addEventListener('mousedown', this.addFrame.bind(this));
-      this.createPreviews();
-
-
     };
 
     ns.PreviewFilmController.prototype.addFrame = function () {
  		this.framesheet.addEmptyFrame();
-        piskel.setActiveFrameAndRedraw(this.framesheet.getFrameCount() - 1);
+        this.framesheet.setCurrentFrameIndex(this.framesheet.getFrameCount() - 1);
     };
 
-    ns.PreviewFilmController.prototype.createPreviews = function () {
+    ns.PreviewFilmController.prototype.flagForRedraw_ = function () {
+    	this.redrawFlag = true;
+    };
+
+    ns.PreviewFilmController.prototype.render = function () {
+		if (this.redrawFlag) {
 			// TODO(vincz): Full redraw on any drawing modification, optimize.
+			this.createPreviews_();
+			this.redrawFlag = false;
+		}
+    };
+
+    ns.PreviewFilmController.prototype.createPreviews_ = function () {
 		this.container.html("");
 
 		var frameCount = this.framesheet.getFrameCount();
@@ -42,12 +55,12 @@
      * @private
      */
     ns.PreviewFilmController.prototype.createInterstitialTile_ = function (tileNumber) {
-    	var initerstitialTile = document.createElement("div");
+    	var interstitialTile = document.createElement("div");
-		initerstitialTile.className = "interstitial-tile"
+		interstitialTile.className = "interstitial-tile"
-		initerstitialTile.setAttribute("data-tile-type", "interstitial");
+		interstitialTile.setAttribute("data-tile-type", "interstitial");
-		initerstitialTile.setAttribute("data-inject-drop-tile-at", tileNumber);
+		interstitialTile.setAttribute("data-inject-drop-tile-at", tileNumber);
 
-		return initerstitialTile;
+		return interstitialTile;
     };
 
     /**
@@ -96,8 +109,8 @@
 		// inside the drag target. We normalize that by taking the correct ancestor:
 		var originTile = $(event.srcElement).closest(".preview-tile");
 		var originFrameId = parseInt(originTile.data("tile-number"), 10);
-		var dropTarget = $(event.target);
 
+		var dropTarget = $(event.target);
 		if(dropTarget.data("tile-type") == "interstitial") {
 			var targetInsertionId = parseInt(dropTarget.data("inject-drop-tile-at"), 10);
 			// In case we drop outside of the tile container
@@ -115,8 +128,7 @@
 			if(activeFrame > (this.framesheet.getFrameCount() - 1)) {
 				activeFrame = targetInsertionId - 1;
 			}
-		}
+		} else {
-		else {
 			var targetSwapId = parseInt(dropTarget.data("tile-number"), 10);
 			// In case we drop outside of the tile container
 			if(isNaN(originFrameId) || isNaN(targetSwapId)) {
@@ -130,12 +142,10 @@
 		
 		$('#preview-list').removeClass("show-interstitial-tiles");
 
-		// TODO(vincz): deprecate.
+		this.framesheet.setCurrentFrameIndex(activeFrame);
-		piskel.setActiveFrameAndRedraw(activeFrame);
 
 		// TODO(vincz): move localstorage request to the model layer?
 		$.publish(Events.LOCALSTORAGE_REQUEST);
-		
 	};
 
 	/**
@@ -144,54 +154,35 @@
      */
     ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber) {
     	var currentFrame = this.framesheet.getFrameByIndex(tileNumber);
-    	//var width = frame.getWidth() * this.dpi,
-    	//	height = frame.getHeight() * this.dpi;
     	
 		var previewTileRoot = document.createElement("li");
 		var classname = "preview-tile";
 		previewTileRoot.setAttribute("data-tile-number", tileNumber);
 
-		if (piskel.getActiveFrameIndex() == tileNumber) {
+		if (this.framesheet.getCurrentFrame() == currentFrame) {
 			classname += " selected";
 		}
 		previewTileRoot.className = classname;
 
 		var canvasContainer = document.createElement("div");
 		canvasContainer.className = "canvas-container";
-		//canvasContainer.setAttribute('style', 'width:' + width + 'px; height:' + height + 'px;');
 		
 		var canvasBackground = document.createElement("div");
 		canvasBackground.className = "canvas-background";
 		canvasContainer.appendChild(canvasBackground);
-		/*
-		var canvasPreview = document.createElement("canvas");
-		canvasPreview.className = "canvas tile-view"
 		
-		canvasPreview.setAttribute('width', width);
+		previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
-		canvasPreview.setAttribute('height', height);     
-        */
-		
-		previewTileRoot.addEventListener('click', function(evt) {
-			// has not class tile-action:
-			if(!evt.target.classList.contains('tile-action')) {
-				piskel.setActiveFrameAndRedraw(tileNumber);
-			}    
-		});
 
 		var canvasPreviewDuplicateAction = document.createElement("button");
 		canvasPreviewDuplicateAction.className = "tile-action"
 		canvasPreviewDuplicateAction.innerHTML = "dup"
 
-		canvasPreviewDuplicateAction.addEventListener('click', function(evt) {
+		canvasPreviewDuplicateAction.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
-			piskel.duplicateFrame(tileNumber);
-		});
-
-		//this.renderer.render(this.framesheet.getFrameByIndex(tileNumber), canvasPreview);
 
 		// TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
 		// is to make this update function (#createPreviewTile) less aggressive.
 		var renderingOptions = {"dpi": this.dpi };
-		var currentFrameRenderer = new pskl.rendering.FrameRenderer(canvasContainer, renderingOptions, "tile-view");
+		var currentFrameRenderer = new pskl.rendering.FrameRenderer($(canvasContainer), renderingOptions, "tile-view");
 		currentFrameRenderer.init(currentFrame);
 		
 		previewTileRoot.appendChild(canvasContainer);
@@ -201,12 +192,29 @@
 			var canvasPreviewDeleteAction = document.createElement("button");
 			canvasPreviewDeleteAction.className = "tile-action"
 			canvasPreviewDeleteAction.innerHTML = "del"
-			canvasPreviewDeleteAction.addEventListener('click', function(evt) {
+			canvasPreviewDeleteAction.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber));
-				piskel.removeFrame(tileNumber);
-			});
 			previewTileRoot.appendChild(canvasPreviewDeleteAction);
 		}
 
 		return previewTileRoot;
     };
+
+    ns.PreviewFilmController.prototype.onPreviewClick_ = function (index, evt) {
+    	// has not class tile-action:
+		if(!evt.target.classList.contains('tile-action')) {
+			this.framesheet.setCurrentFrameIndex(index);
+		}    
+    };
+
+    ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) {
+    	this.framesheet.removeFrameByIndex(index);
+		$.publish(Events.FRAMESHEET_RESET);
+		$.publish(Events.LOCALSTORAGE_REQUEST);	// Should come from model	
+    };
+
+    ns.PreviewFilmController.prototype.onAddButtonClick_ = function (index, evt) {
+    	this.framesheet.duplicateFrameByIndex(index);
+		$.publish(Events.LOCALSTORAGE_REQUEST);	 // Should come from model
+		this.framesheet.setCurrentFrameIndex(index + 1);
+    };
 })();

js/drawingtools/BaseTool.js

@@ -8,11 +8,11 @@
 
 	ns.BaseTool = function() {};
 
-	ns.BaseTool.prototype.applyToolAt = function(col, row, frame) {};
+	ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay) {};
 	
-	ns.BaseTool.prototype.moveToolAt = function(col, row, frame) {};
+	ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay) {};
 
-	ns.BaseTool.prototype.releaseToolAt = function(col, row, frame) {};
+	ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay) {};
 
 	/**
 	 * Bresenham line algorihtm: Get an array of pixels from

js/drawingtools/Eraser.js

@@ -16,7 +16,7 @@
 	/**
 	 * @override
 	 */
-	ns.Eraser.prototype.applyToolAt = function(col, row, color, drawer) {
+	ns.Eraser.prototype.applyToolAt = function(col, row, color, frame, overlay) {
-		this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, drawer);
+		this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, frame, overlay);
 	};
 })();

js/drawingtools/Move.js

@@ -19,17 +19,16 @@
 	/**
 	 * @override
 	 */
-	ns.Move.prototype.applyToolAt = function(col, row, color, drawer) {
+	ns.Move.prototype.applyToolAt = function(col, row, color, frame, overlay) {
 		this.startCol = col;
 		this.startRow = row;
-		this.frameClone = drawer.frame.clone();
+		this.frameClone = frame.clone();
 	};
 
-	ns.Move.prototype.moveToolAt = function(col, row, color, drawer) {	
+	ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay) {	
 		var colDiff = col - this.startCol, rowDiff = row - this.startRow;
 		if (colDiff != 0 || rowDiff != 0) {
-			this.shiftFrame(colDiff, rowDiff, drawer.frame, this.frameClone);
+			this.shiftFrame(colDiff, rowDiff, frame, this.frameClone);
-			drawer.renderFrame();
 		}
 	};
 
@@ -50,7 +49,7 @@
 	/**
 	 * @override
 	 */
-	ns.Move.prototype.releaseToolAt = function(col, row, color, drawer) {
+	ns.Move.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
-		this.moveToolAt(col, row, color, drawer);
+		this.moveToolAt(col, row, color, frame, overlay);
 	};
 })();

js/drawingtools/PaintBucket.js

@@ -15,16 +15,11 @@
 	/**
 	 * @override
 	 */
-	ns.PaintBucket.prototype.applyToolAt = function(col, row, color, drawer) {
+	ns.PaintBucket.prototype.applyToolAt = function(col, row, color, frame, overlay) {
 
 		// Change model:
-		var targetColor = drawer.frame.getPixel(col, row);
+		var targetColor = frame.getPixel(col, row);
-		//this.recursiveFloodFill_(frame, col, row, targetColor, color);
+		this.queueLinearFloodFill_(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

@@ -19,18 +19,16 @@
 	/**
 	 * @override
 	 */
-	ns.Rectangle.prototype.applyToolAt = function(col, row, color, drawer) {
+	ns.Rectangle.prototype.applyToolAt = function(col, row, color, frame, overlay) {
 		this.startCol = col;
 		this.startRow = row;
 		
 		// Drawing the first point of the rectangle in the fake overlay canvas:
-		drawer.overlayFrame.setPixel(col, row, color);
+		overlay.setPixel(col, row, color);
-		drawer.renderOverlay();
 	};
 
-	ns.Rectangle.prototype.moveToolAt = function(col, row, color, drawer) {
+	ns.Rectangle.prototype.moveToolAt = function(col, row, color, frame, overlay) {
-		// Clean overlay canvas:
+		overlay.clear();
-		drawer.clearOverlay();
 
 		// When the user moussemove (before releasing), we dynamically compute the 
 		// pixel to draw the line and draw this line in the overlay :
@@ -42,29 +40,25 @@
 			if(color == Constants.TRANSPARENT_COLOR) {
 				color = Constants.SELECTION_TRANSPARENT_COLOR;
 			}			
-			drawer.overlayFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
+			overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
 		}
-		drawer.renderOverlay();
 	};
 
 	/**
 	 * @override
 	 */
-	ns.Rectangle.prototype.releaseToolAt = function(col, row, color, drawer) {		
+	ns.Rectangle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {		
+		overlay.clear();
 		// If the stroke tool is released outside of the canvas, we cancel the stroke: 
-		if(drawer.frame.containsPixel(col, row)) {
+		if(frame.containsPixel(col, row)) {
 			var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
 			for(var i = 0; i< strokePoints.length; i++) {
 				// Change model:
-				drawer.frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
+				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();		
 		}
-		drawer.clearOverlay();
 	};
 
 	/**

js/drawingtools/SimplePen.js

@@ -18,31 +18,27 @@
 	/**
 	 * @override
 	 */
-	ns.SimplePen.prototype.applyToolAt = function(col, row, color, drawer) {
+	ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay) {
-		if (drawer.frame.containsPixel(col, row)) {
+		if (frame.containsPixel(col, row)) {
 			this.previousCol = col;
 			this.previousRow = row;
-		    drawer.frame.setPixel(col, row, color);
+		    frame.setPixel(col, row, color);
-
-		    // Draw on canvas:
-		    // TODO: Remove that when we have the centralized redraw loop
-		    drawer.renderFramePixel(col, row);
 		}
 	};
 
-	ns.SimplePen.prototype.moveToolAt = function(col, row, color, drawer) {
+	ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay) {
-		
 		if((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) {
 			// The pen movement is too fast for the mousemove frequency, there is a gap between the
 			// current point and the previously drawn one.
 			// We fill the gap by calculating missing dots (simple linear interpolation) and draw them.
 			var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
 			for(var i=0, l=interpolatedPixels.length; i<l; i++) {
-				this.applyToolAt(interpolatedPixels[i].col, interpolatedPixels[i].row, color, drawer);
+				var coords = interpolatedPixels[i];
+				this.applyToolAt(coords.col, coords.row, color, frame, overlay);
 			}
 		}
 		else {
-			this.applyToolAt(col, row, color, drawer);
+			this.applyToolAt(col, row, color, frame, overlay);
 		}
 
 		this.previousCol = col;

js/drawingtools/Stroke.js

@@ -12,8 +12,6 @@
 		// Stroke's first point coordinates (set in applyToolAt)
 		this.startCol = null;
 		this.startRow = null;
-		
-		this.canvasOverlay = null;
 	};
 
 	pskl.utils.inherit(ns.Stroke, ns.BaseTool);
@@ -21,7 +19,7 @@
 	/**
 	 * @override
 	 */
-	ns.Stroke.prototype.applyToolAt = function(col, row, color, drawer) {
+	ns.Stroke.prototype.applyToolAt = function(col, row, color, frame, overlay) {
 		this.startCol = col;
 		this.startRow = row;
 		
@@ -34,12 +32,11 @@
 
 		// The fake canvas where we will draw the preview of the stroke:
 		// Drawing the first point of the stroke in the fake overlay canvas:
-		drawer.overlayFrame.setPixel(col, row, color);
+		overlay.setPixel(col, row, color);
-		drawer.renderOverlay();
 	};
 
-	ns.Stroke.prototype.moveToolAt = function(col, row, color, drawer) {
+	ns.Stroke.prototype.moveToolAt = function(col, row, color, frame, overlay) {
-		drawer.clearOverlay();
+		overlay.clear();
 
 		// When the user moussemove (before releasing), we dynamically compute the 
 		// pixel to draw the line and draw this line in the overlay canvas:
@@ -57,30 +54,26 @@
 				// eg deleting the equivalent of a stroke.		
 				color = Constants.SELECTION_TRANSPARENT_COLOR;
 			}			
-			drawer.overlayFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
+			overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
 		}
-		drawer.renderOverlay();
 	};
 
 	/**
 	 * @override
 	 */
-	ns.Stroke.prototype.releaseToolAt = function(col, row, color, drawer) {
+	ns.Stroke.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
 		// If the stroke tool is released outside of the canvas, we cancel the stroke:
 		// TODO: Mutualize this check in common method
-		if(drawer.frame.containsPixel(col, row)) {
+		if(frame.containsPixel(col, row)) {
 			// 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)
 			var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
 			for(var i = 0; i< strokePoints.length; i++) {
 				// Change model:
-				drawer.frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
+				frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
 			}
-			// Draw in canvas:
-			// TODO: Remove that when we have the centralized redraw loop
-			drawer.renderFrame();
 		} 
 		// For now, we are done with the stroke tool and don't need an overlay anymore:
-		drawer.clearOverlay();   
+		overlay.clear();   
 	};
 })();

js/model/Frame.js

@@ -8,6 +8,11 @@
 	};
 
 	ns.Frame.createEmpty = function (width, height) {
+    	var pixels = ns.Frame.createEmptyPixelGrid_(width, height);
+		return new ns.Frame(pixels);
+	};
+
+	ns.Frame.createEmptyPixelGrid_ = function (width, height) {
 		var pixels = []; //new Array(width);
 		for (var columnIndex=0; columnIndex < width; columnIndex++) {
 			var columnArray = [];
@@ -16,7 +21,7 @@
 			}
 			pixels[columnIndex] = columnArray;
     	}
-		return new ns.Frame(pixels);
+		return pixels;
 	};
 
 	ns.Frame.createEmptyFromFrame = function (frame) {
@@ -41,6 +46,13 @@
 		this.pixels = this.clonePixels_(pixels);
 	};
 
+
+
+	ns.Frame.prototype.clear = function () {
+		var pixels = ns.Frame.createEmptyPixelGrid_(this.getWidth(), this.getHeight());
+		this.setPixels(pixels);
+	};
+
 	/**
 	 * Clone a set of pixels. Should be static utility method
 	 * @private
@@ -48,7 +60,7 @@
 	ns.Frame.prototype.clonePixels_ = function (pixels) {
 		var clonedPixels = [];
 		for (var col = 0 ; col < pixels.length ; col++) {
-			clonedPixels[col] = pixels[col].slice(0 , pixels[col].length-1);
+			clonedPixels[col] = pixels[col].slice(0 , pixels[col].length);
 		}
 		return clonedPixels;
 	};

js/model/FrameSheet.js

@@ -4,10 +4,7 @@
 		this.width = width;
 		this.height = height;
 		this.frames = [];
-	};
+		this.currentFrameIndex = 0;
-
-	ns.FrameSheet.prototype.validate = function () {
-		throw "FrameSheet.prototype.validate not implemented"
 	};
 
 	ns.FrameSheet.prototype.addEmptyFrame = function () {
@@ -22,6 +19,15 @@
 		return this.frames.length;
 	};
 
+	ns.FrameSheet.prototype.getCurrentFrame = function () {
+		return this.frames[this.currentFrameIndex];
+	};
+
+	ns.FrameSheet.prototype.setCurrentFrameIndex = function (index) {
+		this.currentFrameIndex = index;
+		$.publish(Events.FRAMESHEET_RESET);
+	};
+
 	ns.FrameSheet.prototype.getUsedColors = function() {
 		var colors = {};
 		for (var frameIndex=0; frameIndex < this.frames.length; frameIndex++) {

js/piskel.js

@@ -22,25 +22,7 @@ $.namespace("pskl");
       // Canvas preview film canvases:
       previewTileCanvasDpi = 4,
       // Animated canvas preview:
-      previewAnimationCanvasDpi = 8,
+      previewAnimationCanvasDpi = 8;
-
-      // DOM references:
-      drawingAreaContainer,
-      drawingAreaCanvas,
-      previewCanvas,
-      
-      // States:
-      isClicked = false, 
-      isRightClicked = false, 
-      activeFrameIndex = -1, 
-      animIndex = 0,
-
-      primaryColor = Constants.DEFAULT_PEN_COLOR,
-      secondaryColor = Constants.TRANSPARENT_COLOR,
-
-      currentFrame = null;
-      currentToolBehavior = null,
-      previousMousemoveTime = 0;
 
   /**
    * Main application controller
@@ -48,23 +30,20 @@ $.namespace("pskl");
   var piskel = {
 
     init : function () {
-
       piskel.initDPIs_();
 
       frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
       frameSheet.addEmptyFrame();
 
       this.drawingController = new pskl.controller.DrawingController(
-        frameSheet.getFrameByIndex(0),
+        frameSheet,
-        $('#drawing-canvas-container')[0], 
+        $('#drawing-canvas-container'), 
         drawingCanvasDpi
       );
 
-      this.setActiveFrame(0);
-
       this.animationController = new pskl.controller.AnimatedPreviewController(
         frameSheet,
-        $('#preview-canvas-container')[0], 
+        $('#preview-canvas-container'), 
         previewAnimationCanvasDpi
       );
 
@@ -78,7 +57,9 @@ $.namespace("pskl");
       this.animationController.init();
       this.previewsController.init();
 
-      pskl.HistoryManager.init();
+      this.historyManager = new pskl.HistoryManager(frameSheet);
+      this.historyManager.init();
+
       pskl.NotificationService.init();
       pskl.LocalStorageService.init(frameSheet);
 
@@ -91,6 +72,20 @@ $.namespace("pskl");
         this.finishInit();
         pskl.LocalStorageService.displayRestoreNotification();
       }
+
+      $.subscribe('SET_ACTIVE_FRAME', function(evt, frameId) {
+        frameSheet.setCurrentFrameIndex(frameId);
+      });
+
+      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);
     },
 
     /**
@@ -98,7 +93,6 @@ $.namespace("pskl");
      * @private
      */
     initDPIs_ : function() {
-
       drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_();
       // TODO(vincz): Add throttling on window.resize event.
       $(window).resize($.proxy(function() {
@@ -112,7 +106,7 @@ $.namespace("pskl");
      * @private
      */
     calculateDPIsForDrawingCanvas_ : function() {
-      var availableViewportHeight = $('.main-panel').height(),
+      var availableViewportHeight = $('.main-panel').height() - 50,
           availableViewportWidth = $('.main-panel').width(),
           previewHeight = $(".preview-container").height(),
           previewWidth = $(".preview-container").width();
@@ -141,28 +135,6 @@ $.namespace("pskl");
     },
 
     finishInit : function () {
-
-      $.subscribe(Events.TOOL_SELECTED, function(evt, toolBehavior) {
-        console.log("Tool selected: ", toolBehavior);
-        currentToolBehavior = toolBehavior;
-      });
-
-      $.subscribe(Events.COLOR_SELECTED, function(evt, color, isPrimary) {
-        console.log("Color selected: ", color);
-        if (isPrimary) {
-          primaryColor = color;
-        } else {
-          secondaryColor = color;
-        }
-      });
-
-      $.subscribe(Events.REFRESH, function() {
-        piskel.setActiveFrameAndRedraw(0);
-      });
-
-      // TODO: Move this into their service or behavior files:
-      this.initDrawingArea();
-      
       pskl.ToolSelector.init();
       pskl.Palette.init(frameSheet);
     },
@@ -183,175 +155,18 @@ $.namespace("pskl");
 
       xhr.onload = function(e) {
         frameSheet.deserialize(this.responseText);
-        piskel.setActiveFrame(0);  
         $.publish(Events.HIDE_NOTIFICATION);
         piskel.finishInit();
-        piskel.setActiveFrameAndRedraw(0);  
       };
 
       xhr.onerror = function () {
         $.publish(Events.HIDE_NOTIFICATION);
         piskel.finishInit();
-        piskel.setActiveFrameAndRedraw(0);
       };
 
       xhr.send();
     },
 
-    setActiveFrame: function(index) {
-      activeFrameIndex = index;
-      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."
-      }
-      return activeFrameIndex;
-    },
-
-    getCurrentFrame : function () {
-      return frameSheet.getFrameByIndex(activeFrameIndex);
-    },
-
-    initDrawingArea : function() {
-        drawingAreaContainer = $('#drawing-canvas-container')[0];
-        document.body.addEventListener('mouseup', this.onMouseup.bind(this));
-        drawingAreaContainer.addEventListener('mousedown', this.onMousedown.bind(this));
-        drawingAreaContainer.addEventListener('mousemove', this.onMousemove.bind(this));
-        document.body.addEventListener('contextmenu', this.onCanvasContextMenu);
-    },
-
-    removeFrame: function(frameIndex) {     
-      frameSheet.removeFrameByIndex(frameIndex);
-      var activeFrameIndex = frameIndex ? frameIndex - 1 : 0;
-      this.setActiveFrameAndRedraw(activeFrameIndex);
-    },
-
-    duplicateFrame: function(frameIndex) {
-      frameSheet.duplicateFrameByIndex(frameIndex);
-      this.setActiveFrameAndRedraw(frameIndex + 1);
-    },
-
-    getCurrentColor : function () {
-      if(isRightClicked) {
-        return secondaryColor;
-      } else {
-        return primaryColor;
-      }
-    },
-
-    onMousedown : function (event) {
-      isClicked = true;
-      
-      if(event.button == 2) { // right click
-        isRightClicked = true;
-        $.publish(Events.CANVAS_RIGHT_CLICKED);
-      }
-
-      var spriteCoordinate = this.getSpriteCoordinate(event);
-      currentToolBehavior.applyToolAt(
-        spriteCoordinate.col,
-        spriteCoordinate.row,
-        this.getCurrentColor(),
-        this.drawingController
-      );
-        
-      $.publish(Events.LOCALSTORAGE_REQUEST);
-    },
-
-    onMousemove : function (event) {
-      var currentTime = new Date().getTime();
-      // Throttling of the mousemove event:
-      if ((currentTime - previousMousemoveTime) > 40 ) {
-        var spriteCoordinate = this.getSpriteCoordinate(event);
-        if (isClicked) {
-          
-          currentToolBehavior.moveToolAt(
-            spriteCoordinate.col,
-            spriteCoordinate.row,
-            this.getCurrentColor(),
-            this.drawingController
-          );
-          
-          // TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
-          // Eg when drawing, it may make sense to have it here. However for a non drawing tool,
-          // you don't need to draw anything when mousemoving and you request useless localStorage.
-          $.publish(Events.LOCALSTORAGE_REQUEST);
-        } else {
-            // debug mode to see the selected pixel
-            // this.drawingController.clearOverlay();
-            // this.drawingController.overlay.setPixel( spriteCoordinate.col,spriteCoordinate.row, "#ff0000");
-            // this.drawingController.renderOverlay();
-        }
-        previousMousemoveTime = currentTime;
-      }
-    },
-    
-    onMouseup : function (event) {
-      if(isClicked || isRightClicked) {
-        // A mouse button was clicked on the drawing canvas before this mouseup event,
-        // the user was probably drawing on the canvas.
-        // Note: The mousemove movement (and the mouseup) may end up outside
-        // of the drawing canvas.
-        if(isRightClicked) {
-          $.publish(Events.CANVAS_RIGHT_CLICK_RELEASED);
-        }
-
-
-        isClicked = false;
-        isRightClicked = false;
-        var spriteCoordinate = this.getSpriteCoordinate(event);
-        currentToolBehavior.releaseToolAt(
-          spriteCoordinate.col,
-          spriteCoordinate.row,
-          this.getCurrentColor(),
-          this.drawingController
-        );
-
-
-        $.publish(Events.TOOL_RELEASED);
-        // TODO: Remove that when we have the centralized redraw loop
-        this.previewsController.createPreviews();
-      }
-    },
-
-    onCanvasContextMenu : function (event) {
-      event.preventDefault();
-      event.stopPropagation();
-      event.cancelBubble = true;
-      return false;
-    },
-
-    getRelativeCoordinates : function (x, y) {
-      var canvasRect = $(".drawing-canvas")[0].getBoundingClientRect();
-      return {
-        x : x - canvasRect.left,
-        y : y - canvasRect.top
-      }
-    },
-
-    getSpriteCoordinate : function(event) {
-        var coord = this.getRelativeCoordinates(event.x, event.y);
-        var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
-        return {
-          "col" : (coords.x - coords.x%drawingCanvasDpi) / drawingCanvasDpi,
-          "row" : (coords.y - coords.y%drawingCanvasDpi) / drawingCanvasDpi
-        }
-    },
-
     // TODO(julz): Create package ?
     storeSheet : function (event) {
       // TODO Refactor using jquery ?

js/rendering/DrawingLoop.js

@@ -0,0 +1,58 @@
+(function () {
+	var ns = $.namespace("pskl.rendering");
+
+	ns.DrawingLoop = function () {
+		this.requestAnimationFrame = this.getRequestAnimationFrameShim_();
+		this.isRunning = false;
+		this.previousTime = 0;
+		this.callbacks = [];
+	};
+
+	ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) {
+		var callbackObj = {
+			fn : callback, 
+			scope : scope, 
+			args : args
+		};
+		this.callbacks.push(callbackObj);
+		return callbackObj;
+	};
+
+	ns.DrawingLoop.prototype.removeCallback = function (callbackObj) {
+		var index = this.callbacks.indexOf(callbackObj);
+		if (index != -1) {
+			this.callbacks.splice(index, 1);
+		}
+	};
+
+	ns.DrawingLoop.prototype.start = function () {
+		this.isRunning = true;
+		this.loop_();
+	};
+
+	ns.DrawingLoop.prototype.loop_ = function () {
+		var currentTime = Date.now();
+		var delta = currentTime - this.previousTime;
+		this.executeCallbacks_(delta);
+		this.previousTime = currentTime;
+		this.requestAnimationFrame.call(window, this.loop_.bind(this));
+	};
+
+	ns.DrawingLoop.prototype.executeCallbacks_ = function (deltaTime) {
+		for (var i = 0 ; i < this.callbacks.length ; i++) {
+			var cb = this.callbacks[i];
+			cb.fn.call(cb.scope, deltaTime, cb.args);
+		}
+	};
+
+	ns.DrawingLoop.prototype.stop = function () {
+		this.isRunning = false;
+	};
+
+	ns.DrawingLoop.prototype.getRequestAnimationFrameShim_ = function () {
+		var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||  
+		window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000/60)};
+
+		return requestAnimationFrame;
+	}
+})()

js/rendering/FrameRenderer.js

@@ -1,29 +1,41 @@
 (function () {
 	var ns = $.namespace("pskl.rendering");
 
-	this.dpi = null;
-	this.canvas = null;
-
 	ns.FrameRenderer = function (container, renderingOptions, className) {
+		
+		this.defaultRenderingOptions = {
+			"hasGrid" : false
+		};
+		renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
+
 		if(container == undefined) {
 			throw "Bad FrameRenderer initialization. <container> undefined.";
 		}
-		this.container = container;
 		
-		if(renderingOptions == undefined || renderingOptions.dpi == undefined || isNaN(dpi)) {
+		if(isNaN(renderingOptions.dpi)) {
 			throw "Bad FrameRenderer initialization. <dpi> not well defined.";
 		}
 
-		this.displayGrid = !!renderingOptions.displayGrid;
+		this.container = container;
 		this.dpi = renderingOptions.dpi;
 		this.className = className;
+		this.canvas = null;
+		this.hasGrid = renderingOptions.hasGrid;
+		this.gridStrokeWidth = 0;
+		
+		this.lastRenderedFrame = null;
 
 		// Flag to know if the config was altered
 		this.canvasConfigDirty = true;
+
+		if(this.hasGrid) {
+			$.subscribe(Events.GRID_DISPLAY_STATE_CHANGED, $.proxy(this.showGrid, this));	
+		}	
 	};
 
 	ns.FrameRenderer.prototype.init = function (frame) {
 		this.render(frame);
+		this.lastRenderedFrame = frame;
 	};
 
 	ns.FrameRenderer.prototype.updateDPI = function (newDPI) {
@@ -31,57 +43,124 @@
 		this.canvasConfigDirty = true;
 	};
 
+	ns.FrameRenderer.prototype.showGrid = function (evt, show) {
+		
+		this.gridStrokeWidth = 0;
+		if(show) {
+			this.gridStrokeWidth = Constants.GRID_STROKE_WIDTH;
+		}
+		
+		this.canvasConfigDirty = true;
+
+		if(this.lastRenderedFrame) {
+			this.render(this.lastRenderedFrame);
+		}
+	};
+
 	ns.FrameRenderer.prototype.render = function (frame) {
+		this.clear(frame);
+		var context = this.getCanvas_(frame).getContext('2d');
 		for(var col = 0, width = frame.getWidth(); col < width; col++) {
 			for(var row = 0, height = frame.getHeight(); row < height; row++) {
-				this.drawPixel(col, row, frame, this.getCanvas_(frame), this.dpi);
+				var color = frame.getPixel(col, row);
+				this.renderPixel_(color, col, row, context);
 			}
 		}
+		this.lastRenderedFrame = frame;
 	};
 
 	ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) {
 		var context = this.getCanvas_(frame).getContext('2d');
 		var color = frame.getPixel(col, row);
 		if(color == Constants.TRANSPARENT_COLOR) {
-			context.clearRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi);   
+			context.clearRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);   
-		} 
+		} else {
-		else {
+			this.renderPixel_(color, col, row, context);
-			if(color != Constants.SELECTION_TRANSPARENT_COLOR) {
-				// TODO(vincz): Found a better design to update the palette, it's called too frequently.
-				$.publish(Events.COLOR_USED, [color]);
 		}
+		this.lastRenderedFrame = frame;
+	};
+
+	ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
+		if(color != Constants.TRANSPARENT_COLOR) {
 			context.fillStyle = color;
-			context.fillRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi);
+			context.fillRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);
 		}
 	};
 
-	ns.FrameRenderer.prototype.clear = function (col, row, frame) {
+	ns.FrameRenderer.prototype.clear = function (frame) {
-		var canvas = this.getCanvas_(frame)
+		var canvas = this.getCanvas_(frame);
 		canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
 	};
 
+	/**
+	 * Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered
+	 * frame) into a sprite coordinate in column and row.
+     * @public
+     */
+    ns.FrameRenderer.prototype.convertPixelCoordinatesIntoSpriteCoordinate = function(coords) {
+    	var cellSize = this.dpi + this.gridStrokeWidth;
+    	return {
+    	  "col" : (coords.x - coords.x % cellSize) / cellSize,
+          "row" : (coords.y - coords.y % cellSize) / cellSize
+    	};
+    };
+
+	/**
+	 * @private
+	 */
+	ns.FrameRenderer.prototype.getFramePos_ = function(index) {
+		return index * this.dpi + ((index - 1) * this.gridStrokeWidth);
+	};
+
+	/**
+	 * @private
+	 */
+	ns.FrameRenderer.prototype.drawGrid_ = function(canvas, width, height, col, row) {
+		var ctx = canvas.getContext("2d");
+		ctx.lineWidth = Constants.GRID_STROKE_WIDTH;
+		ctx.strokeStyle = Constants.GRID_STROKE_COLOR;
+		for(var c=1; c < col; c++) {			
+	        ctx.moveTo(this.getFramePos_(c), 0);
+	        ctx.lineTo(this.getFramePos_(c), height);
+	        ctx.stroke();
+		}
+		
+		for(var r=1; r < row; r++) {
+	        ctx.moveTo(0, this.getFramePos_(r));
+	        ctx.lineTo(width, this.getFramePos_(r));
+	        ctx.stroke();
+		}
+	};
+
 	/**
 	 * @private
 	 */
 	ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
 		if(this.canvasConfigDirty) {
 			$(this.canvas).remove();
-			var width = frame.getWidth(),
+			
-				height = frame.getHeight();
+			var col = frame.getWidth(),
+				row = frame.getHeight();
 			
 			var canvas = document.createElement("canvas");
-			canvas.setAttribute("width", width * this.dpi);
-			canvas.setAttribute("height", height * this.dpi);
 			
+			var pixelWidth =  col * this.dpi + this.gridStrokeWidth * (col - 1);
+			var pixelHeight =  row * this.dpi + this.gridStrokeWidth * (row - 1);
+			canvas.setAttribute("width", pixelWidth);
+			canvas.setAttribute("height", pixelHeight);
 			var canvasClassname =  "canvas";
 			if(this.className) {
 				canvasClassname += " " + this.className;	
 			}
 			canvas.setAttribute("class", canvasClassname);
+			this.container.append(canvas);
+
+			if(this.gridStrokeWidth > 0) {
+				this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row);
+			}
+			
 				
 			this.canvas = canvas;
-			this.container.appendChild(this.canvas);
-
 			this.canvasConfigDirty = false;
 		}
 		return this.canvas;

js/utils.js

@@ -16,7 +16,7 @@ jQuery.namespace = function() {
  *
  * @require Constants
  */
-(function(ns) { // namespace: pskl.utils
+(function() { // namespace: pskl.utils
 
     var ns = $.namespace("pskl.utils");
 
@@ -35,5 +35,5 @@ jQuery.namespace = function() {
         //prototypeskl.ToolBehavior.Eraser.prototype.constructor = pskl.ToolBehavior.Eraser;
     };
 
-})()
+})();
 

package.json

@@ -0,0 +1,15 @@
+{
+  "author": "People",
+  "name": "piskel",
+  "description": "Web based 2d animations editor",
+  "version": "0.0.1",
+  "homepage": "http://github.com/juliandescottes/piskel",
+  "repository": {
+    "type": "git",
+    "url": "http://github.com/juliandescottes/piskel.git"
+  },
+  "scripts": { "test": "make test" },
+  "devDependencies": {
+  	"jshint": "0.6.1"
+  }
+}