sketchyPad.js

// Generated by CoffeeScript 1.6.3
(function() {
  var SketchController, SketchListener, SketchStroke, SketchView, addCurveSegment, distance, distortPoints, root, slope, smoothConfig,
    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

  root = typeof exports !== "undefined" && exports !== null ? exports : this;

  SketchStroke = (function() {
    function SketchStroke() {
      this.color = 'rgba(255,0,0,0.2)';
      this.points = [];
      this.pressures = [];
      this.timestamps = [];
    }

    SketchStroke.prototype.add = function(x, y, pressure) {
      this.points.push([x, y]);
      this.pressures.push(pressure);
      return this.timestamps.push(new Date().getTime());
    };

    return SketchStroke;

  })();

  smoothConfig = {
    method: 'cubic',
    clip: 'clamp',
    lanczosFilterSize: 0,
    cubicTension: 0
  };

  distance = function(a, b) {
    return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2));
  };

  slope = function(p1, p2) {
    return (p2[1] - p1[1]) / (p2[0] - p1[0]);
  };

  addCurveSegment = function(context, i, points, s) {
    var averageLineLength, du, end, pieceCount, pieceLength, start, t, u, _i, _j, _ref, _ref1, _ref2;
    averageLineLength = 1;
    pieceCount = 2;
    for (t = _i = 0, _ref = 1 / pieceCount; _i < 1; t = _i += _ref) {
      _ref1 = [s(i + t), s(i + t + 1 / pieceCount)], start = _ref1[0], end = _ref1[1];
      pieceLength = distance(start, end);
      du = averageLineLength / pieceLength;
      for (u = _j = 0, _ref2 = 1 / pieceCount; du > 0 ? _j < _ref2 : _j > _ref2; u = _j += du) {
        context.lineTo.apply(context, s(i + t + u));
      }
    }
    return context.lineTo.apply(context, s(i + 1));
  };

  distortPoints = function(points, pressures, direction) {
    var distortion, i, new_points, perp_angle, x_distort, y_distort, _i, _ref;
    if (direction == null) {
      direction = 1;
    }
    new_points = [];
    for (i = _i = 1, _ref = pressures.length - 2; 1 <= _ref ? _i <= _ref : _i >= _ref; i = 1 <= _ref ? ++_i : --_i) {
      distortion = Math.pow(pressures[i], 2) * 5;
      perp_angle = Math.atan2(points[i - 1][1] - points[i][1], points[i - 1][0] - points[i][0]) + 1.57079633;
      x_distort = distortion * Math.cos(perp_angle);
      y_distort = distortion * Math.sin(perp_angle);
      new_points.push([points[i][0] + direction * x_distort, points[i][1] + direction * y_distort]);
    }
    new_points.push(points[points.length - 1]);
    new_points.unshift(points[0]);
    return new_points;
  };

  SketchView = (function() {
    function SketchView(opts) {
      this.$canvas = $('<canvas>', opts).attr('width', opts['width']).attr('height', opts['height']);
      this.$canvas.css('position', 'absolute').css('cursor', 'crosshair');
      this.width = this.$canvas.width();
      this.height = this.$canvas.height();
      this.ctx = this.$canvas[0].getContext('2d');
      this.ctx.globalCompositeOperation = "source-over";
    }

    SketchView.prototype.drawStroke = function(stroke) {
      var color, grd, i, lastIndex, new_points_one, new_points_two, points, pressures, s, _i, _j, _ref, _ref1;
      color = stroke.color;
      points = stroke.points;
      pressures = stroke.pressures;
      if (points.length > 2) {
        this.ctx.strokeStyle = "rgba(255,0,0,0.7)";
        this.ctx.fillStyle = "rgba(255,0,0,0.7)";
        this.ctx.lineWidth = 1;
        this.ctx.lineJoin = 'round';
        this.ctx.lineCap = 'round';
        this.ctx.beginPath();
        (_ref = this.ctx).moveTo.apply(_ref, points[0]);
        lastIndex = points.length - 1;
        new_points_one = distortPoints(points, pressures, 1);
        s = Smooth(new_points_one, smoothConfig);
        for (i = _i = 0; 0 <= lastIndex ? _i < lastIndex : _i > lastIndex; i = 0 <= lastIndex ? ++_i : --_i) {
          addCurveSegment(this.ctx, i, new_points_one, s);
        }
        new_points_two = distortPoints(points, pressures, -1).reverse();
        s = Smooth(new_points_two, smoothConfig);
        for (i = _j = 0; 0 <= lastIndex ? _j < lastIndex : _j > lastIndex; i = 0 <= lastIndex ? ++_j : --_j) {
          addCurveSegment(this.ctx, i, new_points_two, s);
        }
        (_ref1 = this.ctx).lineTo.apply(_ref1, points[0]);
        grd = this.ctx.createLinearGradient(0, 0, this.width, this.height);
        grd.addColorStop(0, 'rgba(255,0,0,0.1)');
        grd.addColorStop(1, '#004CB3');
        this.ctx.fillStyle = grd;
        return this.ctx.fill();
      }
    };

    SketchView.prototype.drawStrokes = function(strokes) {
      var stroke, _i, _len, _results;
      _results = [];
      for (_i = 0, _len = strokes.length; _i < _len; _i++) {
        stroke = strokes[_i];
        _results.push(this.drawStroke(stroke));
      }
      return _results;
    };

    SketchView.prototype.playbackStrokes = function(strokes) {};

    SketchView.prototype.clear = function() {
      return this.ctx.clearRect(0, 0, this.width, this.height);
    };

    return SketchView;

  })();

  SketchListener = (function() {
    function SketchListener(element) {
      this.getPressure = __bind(this.getPressure, this);
      this.onCanvasMouseUp = __bind(this.onCanvasMouseUp, this);
      this.onCanvasMouseMove = __bind(this.onCanvasMouseMove, this);
      this.getMouseCoord = __bind(this.getMouseCoord, this);
      this.onCanvasMouseDown = __bind(this.onCanvasMouseDown, this);
      this.onCanvasMouseOut = __bind(this.onCanvasMouseOut, this);
      this.onCanvasMouseHover = __bind(this.onCanvasMouseHover, this);
      this.removeCallback = __bind(this.removeCallback, this);
      this.addCallback = __bind(this.addCallback, this);
      this.stop = __bind(this.stop, this);
      this.start = __bind(this.start, this);
      this.$wacom_object = $('<object>', {
        id: 'wtPlugin',
        type: 'application/x-wacomtabletplugin'
      });
      this.$wacom_object.append($('<param>', {
        name: 'onload',
        value: 'pluginLoaded'
      }));
      $('body').append(this.$wacom_object).css('-webkit-touch-callout', 'none').css('-webkit-user-select', 'none').css('-khtml-user-select', 'none').css('-moz-user-select', 'none').css('-ms-user-select', 'none').css('user-select', 'none');
      this.$element = element;
      this.callbacks = {
        onCanvasMouseHover: [],
        onCanvasMouseDown: [],
        onCanvasMouseMove: [],
        onCanvasMouseUp: [],
        onCanvasMouseOut: []
      };
      this.mouseCoord = [0, 0];
      this.touchSupported = (__indexOf.call(window, 'ontouchstart') >= 0);
    }

    SketchListener.prototype.start = function() {
      if (this.touchSupported) {
        this.mouseDownEvent = "touchstart";
        this.mouseMoveEvent = "touchmove";
        this.mouseUpEvent = "touchend";
      } else {
        this.mouseDownEvent = "mousedown";
        this.mouseMoveEvent = "mousemove";
        this.mouseUpEvent = "mouseup";
        this.$element.bind(this.mouseMoveEvent, this.onCanvasMouseHover);
        this.$element.bind('mouseout', this.onCanvasMouseOut);
      }
      return this.$element.bind(this.mouseDownEvent, this.onCanvasMouseDown);
    };

    SketchListener.prototype.stop = function() {
      return this.$element.unbind();
    };

    SketchListener.prototype.addCallback = function(eventName, func) {
      return this.callbacks[eventName].push(func);
    };

    SketchListener.prototype.removeCallback = function(eventName, func) {
      var indexOfCallback;
      indexOfCallback = this.callbacks[eventName].indexOf(func);
      return this.callbacks[eventName].splice(indexOfCallback, 1);
    };

    SketchListener.prototype.onCanvasMouseHover = function(event) {
      var callback, _i, _len, _ref, _results;
      this.getMouseCoord(event);
      _ref = this.callbacks['onCanvasMouseHover'];
      _results = [];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        callback = _ref[_i];
        _results.push(callback.call());
      }
      return _results;
    };

    SketchListener.prototype.onCanvasMouseOut = function(event) {
      var callback, _i, _len, _ref, _results;
      _ref = this.callbacks['onCanvasMouseOut'];
      _results = [];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        callback = _ref[_i];
        _results.push(callback.call());
      }
      return _results;
    };

    SketchListener.prototype.onCanvasMouseDown = function(event) {
      var callback, _i, _len, _ref;
      this.getMouseCoord(event);
      _ref = this.callbacks['onCanvasMouseDown'];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        callback = _ref[_i];
        callback.call();
      }
      if (!this.touchSupported) {
        this.$element.unbind(this.mouseMoveEvent, this.onCanvasMouseHover);
      }
      $(document).bind(this.mouseMoveEvent, this.onCanvasMouseMove);
      return $(document).bind(this.mouseUpEvent, this.onCanvasMouseUp);
    };

    SketchListener.prototype.getMouseCoord = function(event) {
      var offset, target;
      if (this.touchSupported) {
        target = event.originalEvent.touches[0];
      } else {
        target = event;
      }
      offset = this.$element.offset();
      this.mouseCoord[0] = Math.round(target.pageX - offset.left);
      return this.mouseCoord[1] = Math.round(target.pageY - offset.top);
    };

    SketchListener.prototype.onCanvasMouseMove = function(event) {
      var callback, _i, _len, _ref;
      this.getMouseCoord(event);
      _ref = this.callbacks['onCanvasMouseMove'];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        callback = _ref[_i];
        callback.call();
      }
      event.preventDefault();
      return false;
    };

    SketchListener.prototype.onCanvasMouseUp = function(event) {
      var callback, _i, _len, _ref;
      _ref = this.callbacks['onCanvasMouseUp'];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        callback = _ref[_i];
        callback.call();
      }
      $(document).unbind(this.mouseMoveEvent, this.onCanvasMouseMove);
      $(document).unbind(this.mouseUpEvent, this.onCanvasMouseUp);
      if (!this.touchSupported) {
        return this.$element.bind(this.mouseMoveEvent, this.onCanvasMouseHover);
      }
    };

    SketchListener.prototype.getPressure = function() {
      var pressure;
      pressure = document.getElementById('wtPlugin').penAPI.pressure;
      if (pressure === 0) {
        pressure = 0.5;
      }
      return pressure;
    };

    return SketchListener;

  })();

  SketchController = (function() {
    function SketchController(element) {
      this.process_mouse_up = __bind(this.process_mouse_up, this);
      this.process_mouse_move = __bind(this.process_mouse_move, this);
      this.process_mouse_down = __bind(this.process_mouse_down, this);
      this.$element = element;
      this.$element.css('position', 'relative');
      this.width = this.$element.width();
      this.height = this.$element.height();
      this.fg_view = new SketchView({
        id: 'sketch_pad_fg',
        width: this.width,
        height: this.height
      });
      this.bg_view = new SketchView({
        id: 'sketch_page_bg',
        width: this.width,
        height: this.height
      });
      this.$element.prepend(this.fg_view.$canvas);
      this.$element.prepend(this.bg_view.$canvas);
      this.listener = new SketchListener(this.fg_view.$canvas);
      this.listener.addCallback('onCanvasMouseUp', this.process_mouse_up);
      this.listener.addCallback('onCanvasMouseMove', this.process_mouse_move);
      this.listener.addCallback('onCanvasMouseDown', this.process_mouse_down);
      this.sketchData = [];
      this.strokeData = new SketchStroke();
      this.listener.start();
    }

    SketchController.prototype.process_mouse_down = function() {
      return this.strokeData.add(this.listener.mouseCoord[0], this.listener.mouseCoord[1], this.listener.getPressure());
    };

    SketchController.prototype.process_mouse_move = function() {
      this.strokeData.add(this.listener.mouseCoord[0], this.listener.mouseCoord[1], this.listener.getPressure());
      this.fg_view.clear();
      return this.fg_view.drawStroke(this.strokeData);
    };

    SketchController.prototype.process_mouse_up = function() {
      this.fg_view.clear();
      this.sketchData.push(this.strokeData);
      this.strokeData = new SketchStroke();
      this.bg_view.clear();
      return this.bg_view.drawStrokes(this.sketchData);
    };

    return SketchController;

  })();

  root.SketchListener = SketchListener;

  (function($, window, document) {
    var $this, methods, _anotherState, _flag, _internals, _settings, _sketch_controller;
    $this = void 0;
    _settings = {
      "default": 'cool!'
    };
    _flag = false;
    _anotherState = null;
    _sketch_controller = null;
    methods = {
      init: function(options) {
        $this = $(this);
        _sketch_controller = new SketchController($this);
        $.extend(_settings, options || {});
        return $this;
      },
      doSomething: function(what) {
        return $this;
      },
      destroy: function() {
        return $this;
      }
    };
    _internals = {
      toggleFlag: function() {
        return _flag = !_flag;
      },
      computeSomething: function(state, flag) {
        return flag != null ? flag : {
          state: "No, that's not right."
        };
      }
    };
    return $.fn.sketchyPad = function(method) {
      if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
      } else if (typeof method === "object" || !method) {
        return methods.init.apply(this, arguments);
      } else {
        return $.error("Method " + method + " does not exist on jquery.sketchyPad");
      }
    };
  })(jQuery, window, document);

}).call(this);