fabric-rails 1.0.12 → 1.0.12.1

data/vendor/assets/javascripts/fabric/canvas_gestures.mixin.js

@@ -0,0 +1,79 @@
+(function() {
+
+  var degreesToRadians = fabric.util.degreesToRadians,
+      radiansToDegrees = fabric.util.radiansToDegrees;
+
+  fabric.util.object.extend(fabric.Canvas.prototype, /** @scope fabric.Canvas.prototype */ {
+
+    /**
+     * Method that defines actions when an Event.js gesture is detected on an object. Currently only supports
+     * 2 finger gestures.
+     *
+     * @method __onTransformGesture
+     * @param e Event object by Event.js
+     * @param self Event proxy object by Event.js
+     */
+    __onTransformGesture: function(e, self) {
+
+      if (this.isDrawingMode || e.touches.length !== 2 || 'gesture' !== self.gesture) {
+        return;
+      }
+
+      var target = this.findTarget(e);
+      if ('undefined' !== typeof target) {
+        this.onBeforeScaleRotate(target);
+        this._rotateObjectByAngle(self.rotation);
+        this._scaleObjectBy(self.scale);
+      }
+
+      this.fire('touch:gesture', {target: target, e: e, self: self});
+    },
+
+    /**
+     * Scales an object by a factor
+     * @param s {Number} The scale factor to apply to the current scale level
+     * @param by {String} Either 'x' or 'y' - specifies dimension constraint by which to scale an object.
+     *                    When not provided, an object is scaled by both dimensions equally
+     */
+    _scaleObjectBy: function(s, by) {
+      var t = this._currentTransform,
+        target = t.target;
+
+      var lockScalingX = target.get('lockScalingX'),
+        lockScalingY = target.get('lockScalingY');
+
+      if (lockScalingX && lockScalingY)
+        return;
+
+      target._scaling = true;
+
+      if (!by) {
+        if (!lockScalingX) {
+          target.set('scaleX', t.scaleX * s);
+        }
+        if (!lockScalingY) {
+          target.set('scaleY', t.scaleY * s);
+        }
+      }
+      else if (by === 'x' && !target.get('lockUniScaling')) {
+        lockScalingX || target.set('scaleX', t.scaleX * s);
+      }
+      else if (by === 'y' && !target.get('lockUniScaling')) {
+        lockScalingY || target.set('scaleY', t.scaleY * s);
+      }
+    },
+
+    /**
+     * Rotates object by an angle
+     * @param curAngle {Number} the angle of rotation in degrees
+     */
+    _rotateObjectByAngle: function(curAngle) {
+      var t = this._currentTransform;
+
+      if (t.target.get('lockRotation'))
+        return;
+
+      t.target.angle = radiansToDegrees(degreesToRadians(curAngle) + t.theta);
+    }
+  });
+})();

data/vendor/assets/javascripts/fabric/canvas_serialization.mixin.js

@@ -0,0 +1,311 @@
+fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @scope fabric.StaticCanvas.prototype */ {
+
+  /**
+   * Populates canvas with data from the specified dataless JSON
+   * JSON format must conform to the one of `fabric.Canvas#toDatalessJSON`
+   * @method loadFromDatalessJSON
+   * @param {String|Object} json JSON string or object
+   * @param {Function} callback Callback, invoked when json is parsed
+   *                            and corresponding objects (e.g: fabric.Image)
+   *                            are initialized
+   * @return {fabric.Canvas} instance
+   * @chainable
+   */
+  loadFromDatalessJSON: function (json, callback) {
+
+    if (!json) return;
+
+    // serialize if it wasn't already
+    var serialized = (typeof json === 'string')
+      ? JSON.parse(json)
+      : json;
+
+    if (!serialized || (serialized && !serialized.objects)) return;
+
+    this.clear();
+
+    var _this = this;
+    this._enlivenDatalessObjects(serialized.objects, function() {
+      _this._setBgOverlayImages(serialized, callback);
+    });
+  },
+
+  /**
+   * @method _enlivenDatalessObjects
+   * @param {Array} objects
+   * @param {Function} callback
+   */
+  _enlivenDatalessObjects: function (objects, callback) {
+    var _this = this,
+        numLoadedObjects = 0,
+        numTotalObjects = objects.length;
+
+    /** @ignore */
+    function onObjectLoaded(object, index) {
+      _this.insertAt(object, index, true);
+      object.setCoords();
+      if (++numLoadedObjects === numTotalObjects) {
+        callback && callback();
+      }
+    }
+
+    /** @ignore */
+    function loadObject(obj, index) {
+
+      var pathProp = obj.paths ? 'paths' : 'path';
+      var path = obj[pathProp];
+
+      delete obj[pathProp];
+
+      if (typeof path !== 'string') {
+        if (obj.type === 'image' || obj.type === 'group') {
+          fabric[fabric.util.string.capitalize(obj.type)].fromObject(obj, function (o) {
+            onObjectLoaded(o, index);
+          });
+        }
+        else {
+          var klass = fabric[fabric.util.string.camelize(fabric.util.string.capitalize(obj.type))];
+          if (!klass || !klass.fromObject) return;
+
+          // restore path
+          if (path) {
+            obj[pathProp] = path;
+          }
+          onObjectLoaded(klass.fromObject(obj), index);
+        }
+      }
+      else {
+        if (obj.type === 'image') {
+          fabric.util.loadImage(path, function (image) {
+            var oImg = new fabric.Image(image);
+
+            oImg.setSourcePath(path);
+
+            fabric.util.object.extend(oImg, obj);
+            oImg.setAngle(obj.angle);
+
+            onObjectLoaded(oImg, index);
+          });
+        }
+        else if (obj.type === 'text') {
+
+          if (obj.useNative) {
+            onObjectLoaded(fabric.Text.fromObject(obj), index);
+          }
+          else {
+            obj.path = path;
+            var object = fabric.Text.fromObject(obj);
+            /** @ignore */
+            var onscriptload = function () {
+              // TODO (kangax): find out why Opera refuses to work without this timeout
+              if (Object.prototype.toString.call(fabric.window.opera) === '[object Opera]') {
+                setTimeout(function () {
+                  onObjectLoaded(object, index);
+                }, 500);
+              }
+              else {
+                onObjectLoaded(object, index);
+              }
+            };
+
+            fabric.util.getScript(path, onscriptload);
+          }
+        }
+        else {
+          fabric.loadSVGFromURL(path, function (elements) {
+            var object = fabric.util.groupSVGElements(elements, obj, path);
+
+            // copy parameters from serialied json to object (left, top, scaleX, scaleY, etc.)
+            // skip this step if an object is a PathGroup, since we already passed it options object before
+            if (!(object instanceof fabric.PathGroup)) {
+              fabric.util.object.extend(object, obj);
+              if (typeof obj.angle !== 'undefined') {
+                object.setAngle(obj.angle);
+              }
+            }
+
+            onObjectLoaded(object, index);
+          });
+        }
+      }
+    }
+
+    if (numTotalObjects === 0 && callback) {
+      callback();
+    }
+
+    try {
+      objects.forEach(loadObject, this);
+    }
+    catch(e) {
+      fabric.log(e);
+    }
+  },
+
+  /**
+   * Populates canvas with data from the specified JSON
+   * JSON format must conform to the one of `fabric.Canvas#toJSON`
+   * @method loadFromJSON
+   * @param {String|Object} json JSON string or object
+   * @param {Function} callback Callback, invoked when json is parsed
+   *                            and corresponding objects (e.g: fabric.Image)
+   *                            are initialized
+   * @return {fabric.Canvas} instance
+   * @chainable
+   */
+  loadFromJSON: function (json, callback) {
+    if (!json) return;
+
+    // serialize if it wasn't already
+    var serialized = (typeof json === 'string')
+      ? JSON.parse(json)
+      : json;
+
+    var _this = this;
+    this._enlivenObjects(serialized.objects, function () {
+      _this._setBgOverlayImages(serialized, callback);
+    });
+
+    return this;
+  },
+
+  _setBgOverlayImages: function(serialized, callback) {
+
+    var _this = this,
+        backgroundPatternLoaded,
+        backgroundImageLoaded,
+        overlayImageLoaded;
+
+    if (serialized.backgroundImage) {
+      this.setBackgroundImage(serialized.backgroundImage, function() {
+
+        _this.backgroundImageOpacity = serialized.backgroundImageOpacity;
+        _this.backgroundImageStretch = serialized.backgroundImageStretch;
+
+        _this.renderAll();
+
+        backgroundImageLoaded = true;
+
+        callback && overlayImageLoaded && backgroundPatternLoaded && callback();
+      });
+    }
+    else {
+      backgroundImageLoaded = true;
+    }
+
+    if (serialized.overlayImage) {
+      this.setOverlayImage(serialized.overlayImage, function() {
+
+        _this.overlayImageLeft = serialized.overlayImageLeft || 0;
+        _this.overlayImageTop = serialized.overlayImageTop || 0;
+
+        _this.renderAll();
+        overlayImageLoaded = true;
+
+        callback && backgroundImageLoaded && backgroundPatternLoaded && callback();
+      });
+    }
+    else {
+      overlayImageLoaded = true;
+    }
+
+    if (serialized.background) {
+      this.setBackgroundColor(serialized.background, function() {
+
+        _this.renderAll();
+        backgroundPatternLoaded = true;
+
+        callback && overlayImageLoaded && backgroundImageLoaded && callback();
+      });
+    }
+    else {
+      backgroundPatternLoaded = true;
+    }
+
+    if (!serialized.backgroundImage && !serialized.overlayImage && !serialized.background) {
+      callback && callback();
+    }
+  },
+
+  /**
+   * @method _enlivenObjects
+   * @param {Array} objects
+   * @param {Function} callback
+   */
+  _enlivenObjects: function (objects, callback) {
+    var _this = this;
+    fabric.util.enlivenObjects(objects, function(enlivenedObjects) {
+      enlivenedObjects.forEach(function(obj, index) {
+        _this.insertAt(obj, index, true);
+      });
+      callback && callback();
+    });
+  },
+
+  /**
+   * @private
+   * @method _toDataURL
+   * @param {String} format
+   * @param {Function} callback
+   */
+  _toDataURL: function (format, callback) {
+    this.clone(function (clone) {
+      callback(clone.toDataURL(format));
+    });
+  },
+
+  /**
+   * @private
+   * @method _toDataURLWithMultiplier
+   * @param {String} format
+   * @param {Number} multiplier
+   * @param {Function} callback
+   */
+  _toDataURLWithMultiplier: function (format, multiplier, callback) {
+    this.clone(function (clone) {
+      callback(clone.toDataURLWithMultiplier(format, multiplier));
+    });
+  },
+
+  /**
+   * Clones canvas instance
+   * @method clone
+   * @param {Object} [callback] Receives cloned instance as a first argument
+   */
+  clone: function (callback) {
+    var data = JSON.stringify(this);
+    this.cloneWithoutData(function(clone) {
+      clone.loadFromJSON(data, function() {
+        callback && callback(clone);
+      });
+    });
+  },
+
+  /**
+   * Clones canvas instance without cloning existing data.
+   * This essentially copies canvas dimensions, clipping properties, etc.
+   * but leaves data empty (so that you can populate it with your own)
+   * @method cloneWithoutData
+   * @param {Object} [callback] Receives cloned instance as a first argument
+   */
+  cloneWithoutData: function(callback) {
+    var el = fabric.document.createElement('canvas');
+
+    el.width = this.getWidth();
+    el.height = this.getHeight();
+
+    var clone = new fabric.Canvas(el);
+    clone.clipTo = this.clipTo;
+    if (this.backgroundImage) {
+      clone.setBackgroundImage(this.backgroundImage.src, function() {
+        clone.renderAll();
+        callback && callback(clone);
+      });
+      clone.backgroundImageOpacity = this.backgroundImageOpacity;
+      clone.backgroundImageStretch = this.backgroundImageStretch;
+    }
+    else {
+      callback && callback(clone);
+    }
+  }
+});

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

@@ -0,0 +1,182 @@
+(function(global) {
+
+  "use strict";
+
+  var fabric  = global.fabric || (global.fabric = { }),
+      piBy2   = Math.PI * 2,
+      extend = fabric.util.object.extend;
+
+  if (fabric.Circle) {
+    fabric.warn('fabric.Circle is already defined.');
+    return;
+  }
+
+  /**
+   * Circle class
+   * @class Circle
+   * @extends fabric.Object
+   */
+  fabric.Circle = fabric.util.createClass(fabric.Object, /** @scope fabric.Circle.prototype */ {
+
+    /**
+     * Type of an object
+     * @property
+     * @type String
+     */
+    type: 'circle',
+
+    /**
+     * Constructor
+     * @method initialize
+     * @param {Object} [options] Options object
+     * @return {fabric.Circle} thisArg
+     */
+    initialize: function(options) {
+      options = options || { };
+
+      this.set('radius', options.radius || 0);
+      this.callSuper('initialize', options);
+
+      var diameter = this.get('radius') * 2;
+      this.set('width', diameter).set('height', diameter);
+    },
+
+    /**
+     * Returns object representation of an instance
+     * @method toObject
+     * @param {Array} propertiesToInclude
+     * @return {Object} object representation of an instance
+     */
+    toObject: function(propertiesToInclude) {
+      return extend(this.callSuper('toObject', propertiesToInclude), {
+        radius: this.get('radius')
+      });
+    },
+
+    /**
+     * Returns svg representation of an instance
+     * @method toSVG
+     * @return {String} svg representation of an instance
+     */
+    toSVG: function() {
+      return ('<circle ' +
+        'cx="0" cy="0" ' +
+        'r="' + this.radius + '" ' +
+        'style="' + this.getSvgStyles() + '" ' +
+        'transform="' + this.getSvgTransform() + '" ' +
+        '/>');
+    },
+
+    /**
+     * @private
+     * @method _render
+     * @param ctx {CanvasRenderingContext2D} context to render on
+     */
+    _render: function(ctx, noTransform) {
+      ctx.beginPath();
+      // multiply by currently set alpha (the one that was set by path group where this object is contained, for example)
+      ctx.globalAlpha = this.group ? (ctx.globalAlpha * this.opacity) : this.opacity;
+      ctx.arc(noTransform ? this.left : 0, noTransform ? this.top : 0, this.radius, 0, piBy2, false);
+      ctx.closePath();
+      if (this.fill) {
+        ctx.fill();
+      }
+      this._removeShadow(ctx);
+      if (this.stroke) {
+        ctx.stroke();
+      }
+    },
+
+    /**
+     * Returns horizontal radius of an object (according to how an object is scaled)
+     * @method getRadiusX
+     * @return {Number}
+     */
+    getRadiusX: function() {
+      return this.get('radius') * this.get('scaleX');
+    },
+
+    /**
+     * Returns vertical radius of an object (according to how an object is scaled)
+     * @method getRadiusY
+     * @return {Number}
+     */
+    getRadiusY: function() {
+      return this.get('radius') * this.get('scaleY');
+    },
+
+    /**
+     * Sets radius of an object (and updates width accordingly)
+     * @method setRadius
+     * @return {Number}
+     */
+    setRadius: function(value) {
+      this.radius = value;
+      this.set('width', value * 2).set('height', value * 2);
+    },
+
+    /**
+     * Returns complexity of an instance
+     * @method complexity
+     * @return {Number} complexity of this instance
+     */
+    complexity: function() {
+      return 1;
+    }
+  });
+
+  /**
+   * List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement})
+   * @static
+   * @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement
+   */
+  fabric.Circle.ATTRIBUTE_NAMES = 'cx cy r fill fill-opacity opacity stroke stroke-width transform'.split(' ');
+
+  /**
+   * Returns {@link fabric.Circle} instance from an SVG element
+   * @static
+   * @method fabric.Circle.fromElement
+   * @param {SVGElement} element Element to parse
+   * @param {Object} [options] Options object
+   * @throws {Error} If value of `r` attribute is missing or invalid
+   * @return {Object} Instance of fabric.Circle
+   */
+  fabric.Circle.fromElement = function(element, options) {
+    options || (options = { });
+    var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES);
+    if (!isValidRadius(parsedAttributes)) {
+      throw new Error('value of `r` attribute is required and can not be negative');
+    }
+    if ('left' in parsedAttributes) {
+      parsedAttributes.left -= (options.width / 2) || 0;
+    }
+    if ('top' in parsedAttributes) {
+      parsedAttributes.top -= (options.height / 2) || 0;
+    }
+    var obj = new fabric.Circle(extend(parsedAttributes, options));
+
+    obj.cx = parseFloat(element.getAttribute('cx')) || 0;
+    obj.cy = parseFloat(element.getAttribute('cy')) || 0;
+
+    return obj;
+  };
+
+  /**
+   * @private
+   */
+  function isValidRadius(attributes) {
+    return (('radius' in attributes) && (attributes.radius > 0));
+  }
+
+  /**
+   * Returns {@link fabric.Circle} instance from an object representation
+   * @static
+   * @method fabric.Circle.fromObject
+   * @param {Object} object Object to create an instance from
+   * @return {Object} Instance of fabric.Circle
+   */
+  fabric.Circle.fromObject = function(object) {
+    return new fabric.Circle(object);
+  };
+
+})(typeof exports !== 'undefined' ? exports : this);