Moving drawing canvas code from piskel.js to drawingController.js

js/controller/DrawingController.js

@@ -19,8 +19,175 @@
 		
 		this.renderer.init(this.frame);
 		this.overlayRenderer.init(this.frame);
+
+		// 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 spriteCoordinate = this.getSpriteCoordinate(event);
+      //console.log("mousedown: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
+      
+      this.currentToolBehavior.applyToolAt(
+        spriteCoordinate.col,
+        spriteCoordinate.row,
+        this.getCurrentColor_(),
+        this
+      );      
+        
+      $.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 spriteCoordinate = this.getSpriteCoordinate(event);
+        if (this.isClicked) {
+       
+          this.currentToolBehavior.moveToolAt(
+            spriteCoordinate.col,
+            spriteCoordinate.row,
+            this.getCurrentColor_(),
+            this
+          );
+		  
+          //console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
+      
+          // 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.clearOverlay();
+            // this.overlayFrame.setPixel( spriteCoordinate.col,spriteCoordinate.row, "#ff0000");
+            // this.renderOverlay();
+        }
+        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.
+        if(this.isRightClicked) {
+          $.publish(Events.CANVAS_RIGHT_CLICK_RELEASED);
+        }
+
+
+        this.isClicked = false;
+        this.isRightClicked = false;
+        var spriteCoordinate = this.getSpriteCoordinate(event);
+        console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
+        this.currentToolBehavior.releaseToolAt(
+          spriteCoordinate.col,
+          spriteCoordinate.row,
+          this.getCurrentColor_(),
+          this
+        );
+
+        $.publish(Events.TOOL_RELEASED);
+
+        // TODO: Remove that when we have the centralized redraw loop
+        $.publish(Events.REDRAW_PREVIEWFILM);
+      }
+    },
+
+    /**
+	 * @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.getSpriteCoordinate = function(event) {
+        var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
+        return {
+          "col" : (coords.x - coords.x % this.dpi) / this.dpi,
+          "row" : (coords.y - coords.y % this.dpi) / this.dpi
+        }
+    };
+
+    /**
+	 * @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);

js/controller/PreviewFilmController.js

@@ -5,6 +5,10 @@
 		this.dpi = dpi;
 		this.framesheet = framesheet;
 		this.container = container;
+
+		$.subscribe(Events.REDRAW_PREVIEWFILM, $.proxy(function(evt) {
+			this.createPreviews()
+		}, this));
 	};
 
 	ns.PreviewFilmController.prototype.init = function() {
@@ -28,7 +32,7 @@
       
       for (var i = 0, l = frameCount; i < l ; i++) {
         this.container.append(this.createInterstitialTile_(i));
-        this.container.append(this.createPreviewTile_(i));
+        this.container.append(this.createPreviewTile_(i, this.framesheet));
       }
       this.container.append(this.createInterstitialTile_(frameCount));
 
@@ -142,7 +146,7 @@
      * @private
      * TODO(vincz): clean this giant rendering function & remove listeners.
      */
-    ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber) {
+    ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber, framesheet) {
     	var currentFrame = this.framesheet.getFrameByIndex(tileNumber);
     	//var width = frame.getWidth() * this.dpi,
     	//	height = frame.getHeight() * this.dpi;
@@ -183,7 +187,8 @@
 		canvasPreviewDuplicateAction.innerHTML = "dup"
 
 		canvasPreviewDuplicateAction.addEventListener('click', function(evt) {
-			piskel.duplicateFrame(tileNumber);
+			framesheet.duplicateFrameByIndex(tileNumber);
+      		$.publish('SET_ACTIVE_FRAME', [tileNumber + 1]);
 		});
 
 		//this.renderer.render(this.framesheet.getFrameByIndex(tileNumber), canvasPreview);
@@ -191,7 +196,7 @@
 		// 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);