fabric-rails 1.0.12.1 → 1.2.1

data/vendor/assets/javascripts/fabric.js

@@ -7,7 +7,8 @@
 //= require event.js
 //
 //= require fabric/log.js
-//= require fabric/observable.mixin.js
+//= require fabric/mixins/observable.mixin.js
+//= require fabric/mixins/collection.mixin.js
 //
 //= require fabric/util/misc.js
 //= require fabric/util/lang_array.js
@@ -23,42 +24,64 @@
 //= require fabric/util/anim_ease.js
 //= require fabric/parser.js
 //
-//= require fabric/gradient.class.js
-//= require fabric/pattern.class.js
-//= require fabric/shadow.class.js
 //= require fabric/point.class.js
 //= require fabric/intersection.class.js
 //= require fabric/color.class.js
+//
+//= require fabric/gradient.class.js
+//= require fabric/pattern.class.js
+//= require fabric/shadow.class.js
+//
 //= require fabric/static_canvas.class.js
 //
-//= require fabric/freedrawing.class.js
+//= require fabric/brushes/base_brush.class.js
+//= require fabric/brushes/pencil_brush.class.js
+//= require fabric/brushes/circle_brush.class.js
+//= require fabric/brushes/spray_brush.class.js
+//= require fabric/brushes/pattern_brush.class.js
+//
 //= require fabric/canvas.class.js
-//= require fabric/canvas_events.mixin.js
-//
-//= require fabric/canvas_animation.mixin.js
-//
-//= require fabric/canvas_serialization.mixin.js
-//= require fabric/canvas_gestures.mixin.js
-//
-//= require fabric/object.class.js
-//= require fabric/object_origin.mixin.js
-//= require fabric/object_geometry.mixin.js
-//
-//= require fabric/object_interactivity.mixin.js
-//
-//= require fabric/line.class.js
-//= require fabric/circle.class.js
-//= require fabric/triangle.class.js
-//= require fabric/ellipse.class.js
-//= require fabric/rect.class.js
-//= require fabric/polyline.class.js
-//= require fabric/polygon.class.js
-//= require fabric/path.class.js
-//= require fabric/path_group.class.js
-//= require fabric/group.class.js
-//= require fabric/image.class.js
-//
-//= require fabric/object_straightening.mixin.js
-//= require fabric/image_filters.js
-//= require fabric/text.class.js
+//= require fabric/mixins/canvas_events.mixin.js
+//
+//= require fabric/mixins/canvas_animation.mixin.js
+//= require fabric/mixins/canvas_dataurl_exporter.mixin.js
+//
+//= require fabric/mixins/canvas_serialization.mixin.js
+//= require fabric/mixins/canvas_gestures.mixin.js
+//
+//= require fabric/shapes/object.class.js
+//= require fabric/mixins/object_origin.mixin.js
+//= require fabric/mixins/object_geometry.mixin.js
+//= require fabric/mixins/stateful.mixin.js
+//
+//= require fabric/mixins/object_interactivity.mixin.js
+//
+//= require fabric/shapes/line.class.js
+//= require fabric/shapes/circle.class.js
+//= require fabric/shapes/triangle.class.js
+//= require fabric/shapes/ellipse.class.js
+//= require fabric/shapes/rect.class.js
+//= require fabric/shapes/polyline.class.js
+//= require fabric/shapes/polygon.class.js
+//= require fabric/shapes/path.class.js
+//= require fabric/shapes/path_group.class.js
+//= require fabric/shapes/group.class.js
+//= require fabric/shapes/image.class.js
+//
+//= require fabric/mixins/object_straightening.mixin.js
+//
+//= require fabric/filters/brightness_filter.class.js
+//= require fabric/filters/convolute_filter.class.js
+//= require fabric/filters/gradienttransparency_filter.class.js
+//= require fabric/filters/grayscale_filter.class.js
+//= require fabric/filters/invert_filter.class.js
+//= require fabric/filters/noise_filter.class.js
+//= require fabric/filters/pixelate_filter.class.js
+//= require fabric/filters/removewhite_filter.class.js
+//= require fabric/filters/sepia_filter.class.js
+//= require fabric/filters/sepia2_filter.class.js
+//= require fabric/filters/tint_filter.class.js
+
+//= require fabric/shapes/text.class.js
+//= require fabric/shapes/text.cufon.js
 //

data/vendor/assets/javascripts/fabric/HEADER.js

@@ -1,6 +1,6 @@
 /*! Fabric.js Copyright 2008-2013, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: "1.0.12" };
+var fabric = fabric || { version: "1.2.1" };
 
 if (typeof exports !== 'undefined') {
   exports.fabric = fabric;
@@ -18,14 +18,12 @@ else {
 
 /**
  * True when in environment that supports touch events
- * @property isTouchSupported
  * @type boolean
  */
 fabric.isTouchSupported = "ontouchstart" in fabric.document.documentElement;
 
 /**
  * True when in environment that's probably Node.js
- * @property isLikelyNode
  * @type boolean
  */
-fabric.isLikelyNode = typeof Buffer !== 'undefined' && typeof window === 'undefined';
+fabric.isLikelyNode = typeof Buffer !== 'undefined' && typeof window === 'undefined';

data/vendor/assets/javascripts/fabric/brushes/base_brush.class.js

@@ -0,0 +1,96 @@
+/**
+ * BaseBrush class
+ * @class fabric.BaseBrush
+ */
+fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype */ {
+
+  /**
+   * Color of a brush
+   * @type String
+   * @default
+   */
+  color:            'rgb(0, 0, 0)',
+
+  /**
+   * Width of a brush
+   * @type Number
+   * @default
+   */
+  width:            1,
+
+  /**
+   * Shadow blur of a brush
+   * @type Number
+   * @default
+   */
+  shadowBlur:       0,
+
+  /**
+   * Shadow color of a brush
+   * @type String
+   * @default
+   */
+  shadowColor:      '',
+
+  /**
+   * Shadow offset x of a brush
+   * @type Number
+   * @default
+   */
+  shadowOffsetX:    0,
+
+  /**
+   * Shadow offset y of a brush
+   * @type Number
+   * @default
+   */
+  shadowOffsetY:    0,
+
+  /**
+   * Line endings style of a brush (one of "butt", "round", "square")
+   * @type String
+   * @default
+   */
+  strokeLineCap:    'round',
+
+  /**
+   * Corner style of a brush (one of "bevil", "round", "miter")
+   * @type String
+   * @default
+   */
+  strokeLineJoin:   'round',
+
+  /**
+   * Sets brush styles
+   */
+  setBrushStyles: function() {
+    var ctx = this.canvas.contextTop;
+
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = this.width;
+    ctx.lineCap = this.strokeLineCap;
+    ctx.lineJoin = this.strokeLineJoin;
+  },
+
+  /**
+   * Sets brush shadow styles
+   */
+  setShadowStyles: function() {
+    var ctx = this.canvas.contextTop;
+
+    ctx.shadowBlur = this.shadowBlur;
+    ctx.shadowColor = this.shadowColor || this.color;
+    ctx.shadowOffsetX = this.shadowOffsetX;
+    ctx.shadowOffsetY = this.shadowOffsetY;
+  },
+
+  /**
+   * Remove brush shadow styles
+   */
+  removeShadowStyles: function() {
+    var ctx = this.canvas.contextTop;
+
+    ctx.shadowColor = '';
+    ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0;
+  }
+});

data/vendor/assets/javascripts/fabric/brushes/circle_brush.class.js

@@ -0,0 +1,99 @@
+/**
+ * CircleBrush class
+ * @class fabric.CircleBrush
+ */
+fabric.CircleBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric.CircleBrush.prototype */ {
+
+  /**
+   * Width of a brush
+   * @type Number
+   */
+  width: 10,
+
+  /**
+   * Constructor
+   * @param {fabric.Canvas} canvas
+   * @return {fabric.CircleBrush} Instance of a circle brush
+   */
+  initialize: function(canvas) {
+    this.canvas = canvas;
+    this.points = [ ];
+  },
+
+  /**
+   * Invoked on mouse down
+   * @param {Object} pointer
+   */
+  onMouseDown: function() {
+    this.points.length = 0;
+    this.canvas.clearContext(this.canvas.contextTop);
+    this.setShadowStyles();
+  },
+
+  /**
+   * Invoked on mouse move
+   * @param {Object} pointer
+   */
+  onMouseMove: function(pointer) {
+    var point = this.addPoint(pointer);
+    var ctx = this.canvas.contextTop;
+
+    ctx.fillStyle = point.fill;
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false);
+    ctx.closePath();
+    ctx.fill();
+  },
+
+  /**
+   * Invoked on mouse up
+   */
+  onMouseUp: function() {
+    var originalRenderOnAddition = this.canvas.renderOnAddition;
+    this.canvas.renderOnAddition = false;
+
+    for (var i = 0, len = this.points.length; i < len; i++) {
+      var point = this.points[i];
+      var circle = new fabric.Circle({
+        radius: point.radius,
+        left: point.x,
+        top: point.y,
+        fill: point.fill,
+        shadow: {
+          color: this.shadowColor || this.color,
+          blur: this.shadowBlur,
+          offsetX: this.shadowOffsetX,
+          offsetY: this.shadowOffsetY
+        }
+      });
+      this.canvas.add(circle);
+    }
+
+    this.canvas.clearContext(this.canvas.contextTop);
+    this.removeShadowStyles();
+    this.canvas.renderOnAddition = originalRenderOnAddition;
+    this.canvas.renderAll();
+  },
+
+  /**
+   * @param {Object} pointer
+   * @return {fabric.Point} Just added pointer point
+   */
+  addPoint: function(pointer) {
+    var pointerPoint = new fabric.Point(pointer.x, pointer.y);
+
+    var circleRadius = fabric.util.getRandomInt(
+                        Math.max(0, this.width - 20), this.width + 20) / 2;
+
+    var circleColor = new fabric.Color(this.color)
+                        .setAlpha(fabric.util.getRandomInt(0, 100) / 100)
+                        .toRgba();
+
+    pointerPoint.radius = circleRadius;
+    pointerPoint.fill = circleColor;
+
+    this.points.push(pointerPoint);
+
+    return pointerPoint;
+  }
+});

data/vendor/assets/javascripts/fabric/brushes/pattern_brush.class.js

@@ -0,0 +1,55 @@
+/**
+ * PatternBrush class
+ * @class fabric.PatternBrush
+ * @extends fabric.BaseBrush
+ */
+fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fabric.PatternBrush.prototype */ {
+
+  getPatternSrc: function() {
+
+    var dotWidth = 20,
+        dotDistance = 5,
+        patternCanvas = fabric.document.createElement('canvas'),
+        patternCtx = patternCanvas.getContext('2d');
+
+    patternCanvas.width = patternCanvas.height = dotWidth + dotDistance;
+
+    patternCtx.fillStyle = this.color;
+    patternCtx.beginPath();
+    patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false);
+    patternCtx.closePath();
+    patternCtx.fill();
+
+    return patternCanvas;
+  },
+
+  getPatternSrcFunction: function() {
+    return String(this.getPatternSrc).replace('this.color', '"' + this.color + '"');
+  },
+
+  /**
+   * Creates "pattern" instance property
+   */
+  getPattern: function() {
+    return this.canvas.contextTop.createPattern(this.source || this.getPatternSrc(), 'repeat');
+  },
+
+  /**
+   * Sets brush styles
+   */
+  setBrushStyles: function() {
+    this.callSuper('setBrushStyles');
+    this.canvas.contextTop.strokeStyle = this.getPattern();
+  },
+
+  /**
+   * Creates path
+   */
+  createPath: function(pathData) {
+    var path = this.callSuper('createPath', pathData);
+    path.stroke = new fabric.Pattern({
+      source: this.source || this.getPatternSrcFunction()
+    });
+    return path;
+  }
+});

data/vendor/assets/javascripts/fabric/{freedrawing.class.js → brushes/pencil_brush.class.js}

@@ -1,42 +1,71 @@
-(function(global) {
-
-  "use strict";
-
-  var fabric = global.fabric || (global.fabric = { });
+(function() {
 
   var utilMin = fabric.util.array.min,
       utilMax = fabric.util.array.max;
 
-  if (fabric.FreeDrawing) {
-    fabric.warn('fabric.FreeDrawing is already defined');
-    return;
-  }
-
   /**
-   * Free drawing class
-   * Free Drawer handles scribbling on a fabric canvas
-   * It converts the hand writting to a SVG Path and adds this path to the canvas
-   *
-   * @class FreeDrawing
-   * @memberOf fabric
+   * PencilBrush class
+   * @class fabric.PencilBrush
+   * @extends fabric.BaseBrush
    */
-  fabric.FreeDrawing = fabric.util.createClass( /** @scope fabric.FreeDrawing.prototype */ {
+  fabric.PencilBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric.PencilBrush.prototype */ {
 
     /**
      * Constructor
-     * @metod initialize
-     * @param fabricCanvas {fabric.Canvas}
-     * @return {fabric.FreeDrawing}
+     * @param {fabric.Canvas} canvas
+     * @return {fabric.PencilBrush} Instance of a pencil brush
+     */
+    initialize: function(canvas) {
+      this.canvas = canvas;
+      this._points = [ ];
+    },
+
+    /**
+     * Inovoked on mouse down
+     * @param {Object} pointer
+     */
+    onMouseDown: function(pointer) {
+      this._prepareForDrawing(pointer);
+      // capture coordinates immediately
+      // this allows to draw dots (when movement never occurs)
+      this._captureDrawingPath(pointer);
+    },
+
+    /**
+     * Inovoked on mouse move
+     * @param {Object} pointer
      */
-    initialize: function(fabricCanvas) {
-      this.canvas = fabricCanvas;
-      this._points = [];
+    onMouseMove: function(pointer) {
+      this._captureDrawingPath(pointer);
+      // redraw curve
+      // clear top canvas
+      this.canvas.clearContext(this.canvas.contextTop);
+      this._render(this.canvas.contextTop);
+    },
+
+    /**
+     * Invoked on mouse up
+     */
+    onMouseUp: function() {
+      this._finalizeAndAddPath();
+    },
+
+    /**
+     * @param {Object} pointer
+     */
+    _prepareForDrawing: function(pointer) {
+
+      var p = new fabric.Point(pointer.x, pointer.y);
+
+      this._reset();
+      this._addPoint(p);
+
+      this.canvas.contextTop.moveTo(p.x, p.y);
     },
 
     /**
      * @private
-     * @method _addPoint
-     *
+     * @param {fabric.Point} point
      */
     _addPoint: function(point) {
       this._points.push(point);
@@ -47,36 +76,17 @@
      * style.
      *
      * @private
-     * @method _reset
      *
      */
     _reset: function() {
       this._points.length = 0;
-      var ctx = this.canvas.contextTop;
-
-      // set freehanddrawing line canvas parameters
-      ctx.strokeStyle = this.canvas.freeDrawingColor;
-      ctx.lineWidth = this.canvas.freeDrawingLineWidth;
-      ctx.lineCap = ctx.lineJoin = 'round';
-    },
-
-     /**
-     * @method _prepareForDrawing
-     */
-     _prepareForDrawing: function(pointer) {
-
-      this.canvas._isCurrentlyDrawing = true;
-      this.canvas.discardActiveObject().renderAll();
 
-      var p = new fabric.Point(pointer.x, pointer.y);
-      this._reset();
-      this._addPoint(p);
-      this.canvas.contextTop.moveTo(p.x, p.y);
+      this.setBrushStyles();
+      this.setShadowStyles();
     },
 
     /**
      * @private
-     * @method _captureDrawingPath
      *
      * @param point {pointer} (fabric.util.pointer) actual mouse position
      *   related to the canvas.
@@ -87,12 +97,9 @@
     },
 
     /**
-     * Draw a smooth path on the topCanvas using
-     * quadraticCurveTo.
+     * Draw a smooth path on the topCanvas using quadraticCurveTo
      *
      * @private
-     * @method _render
-     *
      */
     _render: function() {
       var ctx  = this.canvas.contextTop;
@@ -120,12 +127,9 @@
     },
 
     /**
-     * Return an SVG path based on our
-     * captured points and their boundinb box.
+     * Return an SVG path based on our captured points and their bounding box
      *
      * @private
-     * @method _getSVGPathData
-     *
      */
     _getSVGPathData: function() {
       this.box = this.getPathBoundingBox(this._points);
@@ -135,7 +139,6 @@
 
      /**
       * Returns bounding box of a path based on given points
-      * @method getPathBoundingBox
       * @param {Array} points
       * @return {Object} object with minx, miny, maxx, maxy
       */
@@ -172,11 +175,10 @@
 
     /**
      * Converts points to SVG path
-     * @method convertPointsToSVGPath
      * @param {Array} points Array of points
      * @return {String} SVG path
      */
-    convertPointsToSVGPath: function(points, minX, maxX, minY, maxY) {
+    convertPointsToSVGPath: function(points, minX, maxX, minY) {
       var path = [];
       var p1 = new fabric.Point(points[0].x - minX, points[0].y - minY);
       var p2 = new fabric.Point(points[1].x - minX, points[1].y - minY);
@@ -199,15 +201,23 @@
 
     /**
      * Creates fabric.Path object to add on canvas
-     * @method createPath
      * @param {String} pathData Path data
      * @return {fabric.Path} path to add on canvas
      */
     createPath: function(pathData) {
       var path = new fabric.Path(pathData);
       path.fill = null;
-      path.stroke = this.canvas.freeDrawingColor;
-      path.strokeWidth = this.canvas.freeDrawingLineWidth;
+      path.stroke = this.color;
+      path.strokeWidth = this.width;
+      path.strokeLineCap = this.strokeLineCap;
+      path.strokeLineJoin = this.strokeLineJoin;
+      path.setShadow({
+        color: this.shadowColor || this.color,
+        blur: this.shadowBlur,
+        offsetX: this.shadowOffsetX,
+        offsetY: this.shadowOffsetY,
+        affectStroke: true
+      });
       return path;
     },
 
@@ -216,10 +226,8 @@
      * we use the points captured to create an new fabric path object
      * and add it to the fabric canvas.
      *
-     * @method _finalizeAndAddPath
      */
     _finalizeAndAddPath: function() {
-      this.canvas._isCurrentlyDrawing = false;
       var ctx = this.canvas.contextTop;
       ctx.closePath();
 
@@ -245,12 +253,12 @@
       this.canvas.add(path);
       path.setCoords();
 
-      this.canvas.contextTop && this.canvas.clearContext(this.canvas.contextTop);
+      this.canvas.clearContext(this.canvas.contextTop);
+      this.removeShadowStyles();
       this.canvas.renderAll();
 
       // fire event 'path' created
       this.canvas.fire('path:created', { path: path });
     }
   });
-
-})(typeof exports !== 'undefined' ? exports : this);
+})();