@wise-community/drawing-tool/app/scripts/tools/shape-tools/free-draw.js

HTML5 Drawing Tool

var inherit   = require('../../inherit');
var ShapeTool = require('../shape-tool');

function FreeDrawTool(name, drawTool) {
  ShapeTool.call(this, name, drawTool);

  var self = this;

  self.canvas.freeDrawingBrush.color = this.master.state.stroke;
  self.canvas.freeDrawingBrush.width = this.master.state.strokeWidth;

  this.master.on('state:changed', function(e) {
    self.canvas.freeDrawingBrush.color = self.master.state.stroke;
    self.canvas.freeDrawingBrush.width = self.master.state.strokeWidth;
  });
}

inherit(FreeDrawTool, ShapeTool);

FreeDrawTool.prototype.mouseDown = function (opt) {
  FreeDrawTool.super.mouseDown.call(this, opt);
  if (!this.active) { return; }
  if (!this.canvas.isDrawingMode) {
    // If we are here, it means the handler is called for the first time.
    // Activate drawing mode and call manually FabricJS handler to handle
    // mouse down in drawing mode correctly.
    //
    // If you take look at FabricJS's methods like:
    // - _onMouseDownInDrawingMode
    // - _onMouseMoveInDrawingMode
    // - _onMouseUpInDrawingMode
    // it's visible that we could implement whole functionality using public
    // `freeDrawingBrush` object. That would be better solution if these methods
    // didn't handle clipping too. It would force us to literally copy the same
    // code. So unless almost everything is handled in brush class, IMHO it's
    // better to use this solution which is at least short and simple.
    this.canvas.isDrawingMode = true;
    this.canvas._onMouseDownInDrawingMode(opt.e);
  }
};

FreeDrawTool.prototype.mouseUp = function (opt) {
  var objects = this.canvas.getObjects();
  var lastObject = objects[objects.length - 1];
  this.curr = lastObject;
  // Empty string == transparent
  // Null or missing values for fill default to rbg(0,0,0)
  this.curr.fill = this.master.state.fill;
  this.curr.objectCaching = false;
  FreeDrawTool.super.mouseUp.call(this, opt);
  if (!this._locked) {
    this.canvas.isDrawingMode = false;
  }
  this.actionComplete(lastObject);
  this.curr = undefined;
  this.master.pushToHistory();
};

FreeDrawTool.prototype.deactivate = function () {
  FreeDrawTool.super.deactivate.call(this);
  this.canvas.isDrawingMode = false;
};

module.exports = FreeDrawTool;