piskel/js/controller/DrawingController.js

(function () {
	var ns = $.namespace("pskl.controller");
	ns.DrawingController = function (frame, container, dpi) {
		this.dpi = dpi;

		// TODO(vincz): Store user prefs in a localstorage string ?
		var renderingOptions = {
			"dpi": dpi,
			"hasGrid" : true
		};

		// jQuery deep copy of the rendering config:
		overlayRenderingOptions = $.extend(true, {}, renderingOptions);
		overlayRenderingOptions.hasGrid = false;
		

		/**
		 * @public
		 */
		this.frame = frame;
		
		/**
		 * @public
		 */
		this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame);

		/**
		 * @private
		 */
		this.container = container;
		
		this.renderer = new pskl.rendering.FrameRenderer(
			this.container,
			renderingOptions,
			"drawing-canvas");

		this.overlayRenderer = new pskl.rendering.FrameRenderer(
			this.container,
			overlayRenderingOptions,
			"canvas-overlay");
		
		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 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.overlayRenderer.render(this.frame);
	};

	ns.DrawingController.prototype.renderFrame = function () {
		this.renderer.render(this.frame);
	};

	ns.DrawingController.prototype.renderFramePixel = function (col, row) {
		this.renderer.drawPixel(col, row, this.frame);
	};

	ns.DrawingController.prototype.renderOverlay = function () {
		this.overlayRenderer.render(this.overlayFrame);
	};

	ns.DrawingController.prototype.clearOverlay = function () {
		this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(this.frame);
		this.overlayRenderer.clear();
	};
})();