fabric-rails 1.0.12 → 1.0.12.1

data/vendor/assets/javascripts/fabric/freedrawing.class.js

@@ -0,0 +1,256 @@
+(function(global) {
+
+  "use strict";
+
+  var fabric = global.fabric || (global.fabric = { });
+
+  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
+   */
+  fabric.FreeDrawing = fabric.util.createClass( /** @scope fabric.FreeDrawing.prototype */ {
+
+    /**
+     * Constructor
+     * @metod initialize
+     * @param fabricCanvas {fabric.Canvas}
+     * @return {fabric.FreeDrawing}
+     */
+    initialize: function(fabricCanvas) {
+      this.canvas = fabricCanvas;
+      this._points = [];
+    },
+
+    /**
+     * @private
+     * @method _addPoint
+     *
+     */
+    _addPoint: function(point) {
+      this._points.push(point);
+    },
+
+    /**
+     * Clear points array and set contextTop canvas
+     * 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);
+    },
+
+    /**
+     * @private
+     * @method _captureDrawingPath
+     *
+     * @param point {pointer} (fabric.util.pointer) actual mouse position
+     *   related to the canvas.
+     */
+    _captureDrawingPath: function(pointer) {
+      var pointerPoint = new fabric.Point(pointer.x, pointer.y);
+      this._addPoint(pointerPoint);
+    },
+
+    /**
+     * Draw a smooth path on the topCanvas using
+     * quadraticCurveTo.
+     *
+     * @private
+     * @method _render
+     *
+     */
+    _render: function() {
+      var ctx  = this.canvas.contextTop;
+      ctx.beginPath();
+
+      var p1 = this._points[0];
+      var p2 = this._points[1];
+
+      ctx.moveTo(p1.x, p1.y);
+
+      for (var i = 1, len = this._points.length; i < len; i++) {
+        // we pick the point between pi+1 & pi+2 as the
+        // end point and p1 as our control point.
+        var midPoint = p1.midPointFrom(p2);
+        ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
+
+        p1 = this._points[i];
+        p2 = this._points[i+1];
+      }
+      // Draw last line as a straight line while
+      // we wait for the next point to be able to calculate
+      // the bezier control point
+      ctx.lineTo(p1.x, p1.y);
+      ctx.stroke();
+    },
+
+    /**
+     * Return an SVG path based on our
+     * captured points and their boundinb box.
+     *
+     * @private
+     * @method _getSVGPathData
+     *
+     */
+    _getSVGPathData: function() {
+      this.box = this.getPathBoundingBox(this._points);
+      return this.convertPointsToSVGPath(
+        this._points, this.box.minx, this.box.maxx, this.box.miny, this.box.maxy);
+     },
+
+     /**
+      * Returns bounding box of a path based on given points
+      * @method getPathBoundingBox
+      * @param {Array} points
+      * @return {Object} object with minx, miny, maxx, maxy
+      */
+     getPathBoundingBox: function(points) {
+      var xBounds = [],
+          yBounds = [],
+          p1 = points[0],
+          p2 = points[1],
+          startPoint = p1;
+
+      for (var i = 1, len = points.length; i < len; i++) {
+        var midPoint = p1.midPointFrom(p2);
+        // with startPoint, p1 as control point, midpoint as end point
+        xBounds.push(startPoint.x);
+        xBounds.push(midPoint.x);
+        yBounds.push(startPoint.y);
+        yBounds.push(midPoint.y);
+
+        p1 = points[i];
+        p2 = points[i+1];
+        startPoint = midPoint;
+     } // end for
+
+     xBounds.push(p1.x);
+     yBounds.push(p1.y);
+
+     return {
+       minx: utilMin(xBounds),
+       miny: utilMin(yBounds),
+       maxx: utilMax(xBounds),
+       maxy: utilMax(yBounds)
+     };
+    },
+
+    /**
+     * Converts points to SVG path
+     * @method convertPointsToSVGPath
+     * @param {Array} points Array of points
+     * @return {String} SVG path
+     */
+    convertPointsToSVGPath: function(points, minX, maxX, minY, maxY) {
+      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);
+
+      path.push('M ', points[0].x - minX, ' ', points[0].y - minY, ' ');
+      for (var i = 1, len = points.length; i < len; i++) {
+        var midPoint = p1.midPointFrom(p2);
+        // p1 is our bezier control point
+        // midpoint is our endpoint
+        // start point is p(i-1) value.
+        path.push('Q ', p1.x, ' ', p1.y, ' ', midPoint.x, ' ', midPoint.y, ' ');
+        p1 = new fabric.Point(points[i].x - minX, points[i].y - minY);
+        if ((i+1) < points.length) {
+          p2 = new fabric.Point(points[i+1].x - minX, points[i+1].y - minY);
+        }
+      }
+      path.push('L ', p1.x, ' ', p1.y, ' ');
+      return path;
+    },
+
+    /**
+     * 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;
+      return path;
+    },
+
+    /**
+     * On mouseup after drawing the path on contextTop canvas
+     * 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();
+
+      var pathData = this._getSVGPathData().join('');
+      if (pathData === "M 0 0 Q 0 0 0 0 L 0 0") {
+        // do not create 0 width/height paths, as they are
+        // rendered inconsistently across browsers
+        // Firefox 4, for example, renders a dot,
+        // whereas Chrome 10 renders nothing
+        this.canvas.renderAll();
+        return;
+      }
+
+      // set path origin coordinates based on our bounding box
+      var originLeft = this.box.minx  + (this.box.maxx - this.box.minx) /2;
+      var originTop = this.box.miny  + (this.box.maxy - this.box.miny) /2;
+
+      this.canvas.contextTop.arc(originLeft, originTop, 3, 0, Math.PI * 2, false);
+
+      var path = this.createPath(pathData);
+      path.set({ left: originLeft, top: originTop });
+
+      this.canvas.add(path);
+      path.setCoords();
+
+      this.canvas.contextTop && this.canvas.clearContext(this.canvas.contextTop);
+      this.canvas.renderAll();
+
+      // fire event 'path' created
+      this.canvas.fire('path:created', { path: path });
+    }
+  });
+
+})(typeof exports !== 'undefined' ? exports : this);

data/vendor/assets/javascripts/fabric/gradient.class.js

@@ -0,0 +1,211 @@
+(function() {
+
+  function getColorStopFromStyle(el) {
+    var style = el.getAttribute('style');
+
+    if (style) {
+      var keyValuePairs = style.split(/\s*;\s*/);
+
+      if (keyValuePairs[keyValuePairs.length-1] === '') {
+        keyValuePairs.pop();
+      }
+
+      for (var i = keyValuePairs.length; i--; ) {
+
+        var split = keyValuePairs[i].split(/\s*:\s*/),
+            key = split[0].trim(),
+            value = split[1].trim();
+
+        if (key === 'stop-color') {
+          return value;
+        }
+      }
+    }
+  }
+
+  /**
+   * Gradient class
+   * @class Gradient
+   * @memberOf fabric
+   */
+  fabric.Gradient = fabric.util.createClass(/** @scope fabric.Gradient.prototype */ {
+
+    /**
+     * Constructor
+     * @method initialize
+     * @param [options] Options object with x1, y1, x2, y2 and colorStops
+     * @return {fabric.Gradient} thisArg
+     */
+    initialize: function(options) {
+
+      options || (options = { });
+
+      this.x1 = options.x1 || 0;
+      this.y1 = options.y1 || 0;
+      this.x2 = options.x2 || 0;
+      this.y2 = options.y2 || 0;
+
+      this.colorStops = options.colorStops;
+    },
+
+    /**
+     * Returns object representation of a gradient
+     * @method toObject
+     * @return {Object}
+     */
+    toObject: function() {
+      return {
+        x1: this.x1,
+        x2: this.x2,
+        y1: this.y1,
+        y2: this.y2,
+        colorStops: this.colorStops
+      };
+    },
+
+    /**
+     * Returns an instance of CanvasGradient
+     * @method toLive
+     * @param ctx
+     * @return {CanvasGradient}
+     */
+    toLive: function(ctx) {
+      var gradient = ctx.createLinearGradient(
+        this.x1, this.y1, this.x2 || ctx.canvas.width, this.y2);
+
+      for (var position in this.colorStops) {
+        var colorValue = this.colorStops[position];
+        gradient.addColorStop(parseFloat(position), colorValue);
+      }
+
+      return gradient;
+    }
+  });
+
+  fabric.util.object.extend(fabric.Gradient, {
+
+    /**
+     * Returns {@link fabric.Gradient} instance from an SVG element
+     * @method fromElement
+     * @static
+     * @memberof fabric.Gradient
+     * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement
+     */
+    fromElement: function(el, instance) {
+
+      /**
+       *  @example:
+       *
+       *  <linearGradient id="grad1">
+       *    <stop offset="0%" stop-color="white"/>
+       *    <stop offset="100%" stop-color="black"/>
+       *  </linearGradient>
+       *
+       *  OR
+       *
+       *  <linearGradient id="grad1">
+       *    <stop offset="0%" style="stop-color:rgb(255,255,255)"/>
+       *    <stop offset="100%" style="stop-color:rgb(0,0,0)"/>
+       *  </linearGradient>
+       *
+       */
+
+      var colorStopEls = el.getElementsByTagName('stop'),
+          offset,
+          colorStops = { },
+          coords = {
+            x1: el.getAttribute('x1') || 0,
+            y1: el.getAttribute('y1') || 0,
+            x2: el.getAttribute('x2') || '100%',
+            y2: el.getAttribute('y2') || 0
+          };
+
+      for (var i = colorStopEls.length; i--; ) {
+        el = colorStopEls[i];
+        offset = el.getAttribute('offset');
+
+        // convert percents to absolute values
+        offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1);
+        colorStops[offset] = getColorStopFromStyle(el) || el.getAttribute('stop-color');
+      }
+
+      _convertPercentUnitsToValues(instance, coords);
+
+      return new fabric.Gradient({
+        x1: coords.x1,
+        y1: coords.y1,
+        x2: coords.x2,
+        y2: coords.y2,
+        colorStops: colorStops
+      });
+    },
+
+    /**
+     * Returns {@link fabric.Gradient} instance from its object representation
+     * @method forObject
+     * @static
+     * @param obj
+     * @param [options]
+     * @memberof fabric.Gradient
+     */
+    forObject: function(obj, options) {
+      options || (options = { });
+      _convertPercentUnitsToValues(obj, options);
+      return new fabric.Gradient(options);
+    }
+  });
+
+  function _convertPercentUnitsToValues(object, options) {
+    for (var prop in options) {
+      if (typeof options[prop] === 'string' && /^\d+%$/.test(options[prop])) {
+        var percents = parseFloat(options[prop], 10);
+        if (prop === 'x1' || prop === 'x2') {
+          options[prop] = fabric.util.toFixed(object.width * percents / 100, 2);
+        }
+        else if (prop === 'y1' || prop === 'y2') {
+          options[prop] = fabric.util.toFixed(object.height * percents / 100, 2);
+        }
+      }
+      // normalize rendering point (should be from top/left corner rather than center of the shape)
+      if (prop === 'x1' || prop === 'x2') {
+        options[prop] -= fabric.util.toFixed(object.width / 2, 2);
+      }
+      else if (prop === 'y1' || prop === 'y2') {
+        options[prop] -= fabric.util.toFixed(object.height / 2, 2);
+      }
+    }
+  }
+
+  /**
+   * Parses an SVG document, returning all of the gradient declarations found in it
+   * @static
+   * @function
+   * @memberOf fabric
+   * @method getGradientDefs
+   * @param {SVGDocument} doc SVG document to parse
+   * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element
+   */
+  function getGradientDefs(doc) {
+    var linearGradientEls = doc.getElementsByTagName('linearGradient'),
+        radialGradientEls = doc.getElementsByTagName('radialGradient'),
+        el, i,
+        gradientDefs = { };
+
+    i = linearGradientEls.length;
+    for (; i--; ) {
+      el = linearGradientEls[i];
+      gradientDefs[el.getAttribute('id')] = el;
+    }
+
+    i = radialGradientEls.length;
+    for (; i--; ) {
+      el = radialGradientEls[i];
+      gradientDefs[el.getAttribute('id')] = el;
+    }
+
+    return gradientDefs;
+  }
+
+  fabric.getGradientDefs = getGradientDefs;
+
+})();