fabric 5.3.0-browser → 6.0.0-beta1

package/src/mixins/animation.mixin.js

@@ -1,231 +0,0 @@
-fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
-
-  /**
-   * Animation duration (in ms) for fx* methods
-   * @type Number
-   * @default
-   */
-  FX_DURATION: 500,
-
-  /**
-   * Centers object horizontally with animation.
-   * @param {fabric.Object} object Object to center
-   * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
-   * @param {Function} [callbacks.onComplete] Invoked on completion
-   * @param {Function} [callbacks.onChange] Invoked on every step of animation
-   * @return {fabric.AnimationContext} context
-   */
-  fxCenterObjectH: function (object, callbacks) {
-    callbacks = callbacks || { };
-
-    var empty = function() { },
-        onComplete = callbacks.onComplete || empty,
-        onChange = callbacks.onChange || empty,
-        _this = this;
-
-    return fabric.util.animate({
-      target: this,
-      startValue: object.left,
-      endValue: this.getCenterPoint().x,
-      duration: this.FX_DURATION,
-      onChange: function(value) {
-        object.set('left', value);
-        _this.requestRenderAll();
-        onChange();
-      },
-      onComplete: function() {
-        object.setCoords();
-        onComplete();
-      }
-    });
-  },
-
-  /**
-   * Centers object vertically with animation.
-   * @param {fabric.Object} object Object to center
-   * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
-   * @param {Function} [callbacks.onComplete] Invoked on completion
-   * @param {Function} [callbacks.onChange] Invoked on every step of animation
-   * @return {fabric.AnimationContext} context
-   */
-  fxCenterObjectV: function (object, callbacks) {
-    callbacks = callbacks || { };
-
-    var empty = function() { },
-        onComplete = callbacks.onComplete || empty,
-        onChange = callbacks.onChange || empty,
-        _this = this;
-
-    return fabric.util.animate({
-      target: this,
-      startValue: object.top,
-      endValue: this.getCenterPoint().y,
-      duration: this.FX_DURATION,
-      onChange: function(value) {
-        object.set('top', value);
-        _this.requestRenderAll();
-        onChange();
-      },
-      onComplete: function() {
-        object.setCoords();
-        onComplete();
-      }
-    });
-  },
-
-  /**
-   * Same as `fabric.Canvas#remove` but animated
-   * @param {fabric.Object} object Object to remove
-   * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
-   * @param {Function} [callbacks.onComplete] Invoked on completion
-   * @param {Function} [callbacks.onChange] Invoked on every step of animation
-   * @return {fabric.AnimationContext} context
-   */
-  fxRemove: function (object, callbacks) {
-    callbacks = callbacks || { };
-
-    var empty = function() { },
-        onComplete = callbacks.onComplete || empty,
-        onChange = callbacks.onChange || empty,
-        _this = this;
-
-    return fabric.util.animate({
-      target: this,
-      startValue: object.opacity,
-      endValue: 0,
-      duration: this.FX_DURATION,
-      onChange: function(value) {
-        object.set('opacity', value);
-        _this.requestRenderAll();
-        onChange();
-      },
-      onComplete: function () {
-        _this.remove(object);
-        onComplete();
-      }
-    });
-  }
-});
-
-fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
-  /**
-   * Animates object's properties
-   * @param {String|Object} property Property to animate (if string) or properties to animate (if object)
-   * @param {Number|Object} value Value to animate property to (if string was given first) or options object
-   * @return {fabric.Object} thisArg
-   * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#animation}
-   * @return {fabric.AnimationContext | fabric.AnimationContext[]} animation context (or an array if passed multiple properties)
-   *
-   * As object — multiple properties
-   *
-   * object.animate({ left: ..., top: ... });
-   * object.animate({ left: ..., top: ... }, { duration: ... });
-   *
-   * As string — one property
-   *
-   * object.animate('left', ...);
-   * object.animate('left', { duration: ... });
-   *
-   */
-  animate: function () {
-    if (arguments[0] && typeof arguments[0] === 'object') {
-      var propsToAnimate = [], prop, skipCallbacks, out = [];
-      for (prop in arguments[0]) {
-        propsToAnimate.push(prop);
-      }
-      for (var i = 0, len = propsToAnimate.length; i < len; i++) {
-        prop = propsToAnimate[i];
-        skipCallbacks = i !== len - 1;
-        out.push(this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks));
-      }
-      return out;
-    }
-    else {
-      return this._animate.apply(this, arguments);
-    }
-  },
-
-  /**
-   * @private
-   * @param {String} property Property to animate
-   * @param {String} to Value to animate to
-   * @param {Object} [options] Options object
-   * @param {Boolean} [skipCallbacks] When true, callbacks like onchange and oncomplete are not invoked
-   */
-  _animate: function(property, to, options, skipCallbacks) {
-    var _this = this, propPair;
-
-    to = to.toString();
-
-    if (!options) {
-      options = { };
-    }
-    else {
-      options = fabric.util.object.clone(options);
-    }
-
-    if (~property.indexOf('.')) {
-      propPair = property.split('.');
-    }
-
-    var propIsColor =
-      _this.colorProperties.indexOf(property) > -1 ||
-      (propPair && _this.colorProperties.indexOf(propPair[1]) > -1);
-
-    var currentValue = propPair
-      ? this.get(propPair[0])[propPair[1]]
-      : this.get(property);
-
-    if (!('from' in options)) {
-      options.from = currentValue;
-    }
-
-    if (!propIsColor) {
-      if (~to.indexOf('=')) {
-        to = currentValue + parseFloat(to.replace('=', ''));
-      }
-      else {
-        to = parseFloat(to);
-      }
-    }
-
-    var _options = {
-      target: this,
-      startValue: options.from,
-      endValue: to,
-      byValue: options.by,
-      easing: options.easing,
-      duration: options.duration,
-      abort: options.abort && function(value, valueProgress, timeProgress) {
-        return options.abort.call(_this, value, valueProgress, timeProgress);
-      },
-      onChange: function (value, valueProgress, timeProgress) {
-        if (propPair) {
-          _this[propPair[0]][propPair[1]] = value;
-        }
-        else {
-          _this.set(property, value);
-        }
-        if (skipCallbacks) {
-          return;
-        }
-        options.onChange && options.onChange(value, valueProgress, timeProgress);
-      },
-      onComplete: function (value, valueProgress, timeProgress) {
-        if (skipCallbacks) {
-          return;
-        }
-
-        _this.setCoords();
-        options.onComplete && options.onComplete(value, valueProgress, timeProgress);
-      }
-    };
-
-    if (propIsColor) {
-      return fabric.util.animateColor(_options.startValue, _options.endValue, _options.duration, _options);
-    }
-    else {
-      return fabric.util.animate(_options);
-    }
-  }
-});

package/src/mixins/canvas_dataurl_exporter.mixin.js

@@ -1,97 +0,0 @@
-(function () {
-  fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
-
-    /**
-     * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately
-     * @param {Object} [options] Options object
-     * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png"
-     * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.
-     * @param {Number} [options.multiplier=1] Multiplier to scale by, to have consistent
-     * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14
-     * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14
-     * @param {Number} [options.width] Cropping width. Introduced in v1.2.14
-     * @param {Number} [options.height] Cropping height. Introduced in v1.2.14
-     * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 2.0.0
-     * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format
-     * @see {@link http://jsfiddle.net/fabricjs/NfZVb/|jsFiddle demo}
-     * @example <caption>Generate jpeg dataURL with lower quality</caption>
-     * var dataURL = canvas.toDataURL({
-     *   format: 'jpeg',
-     *   quality: 0.8
-     * });
-     * @example <caption>Generate cropped png dataURL (clipping of canvas)</caption>
-     * var dataURL = canvas.toDataURL({
-     *   format: 'png',
-     *   left: 100,
-     *   top: 100,
-     *   width: 200,
-     *   height: 200
-     * });
-     * @example <caption>Generate double scaled png dataURL</caption>
-     * var dataURL = canvas.toDataURL({
-     *   format: 'png',
-     *   multiplier: 2
-     * });
-     */
-    toDataURL: function (options) {
-      options || (options = { });
-
-      var format = options.format || 'png',
-          quality = options.quality || 1,
-          multiplier = (options.multiplier || 1) * (options.enableRetinaScaling ? this.getRetinaScaling() : 1),
-          canvasEl = this.toCanvasElement(multiplier, options);
-      return fabric.util.toDataURL(canvasEl, format, quality);
-    },
-
-    /**
-     * Create a new HTMLCanvas element painted with the current canvas content.
-     * No need to resize the actual one or repaint it.
-     * Will transfer object ownership to a new canvas, paint it, and set everything back.
-     * This is an intermediary step used to get to a dataUrl but also it is useful to
-     * create quick image copies of a canvas without passing for the dataUrl string
-     * @param {Number} [multiplier] a zoom factor.
-     * @param {Object} [cropping] Cropping informations
-     * @param {Number} [cropping.left] Cropping left offset.
-     * @param {Number} [cropping.top] Cropping top offset.
-     * @param {Number} [cropping.width] Cropping width.
-     * @param {Number} [cropping.height] Cropping height.
-     */
-    toCanvasElement: function(multiplier, cropping) {
-      multiplier = multiplier || 1;
-      cropping = cropping || { };
-      var scaledWidth = (cropping.width || this.width) * multiplier,
-          scaledHeight = (cropping.height || this.height) * multiplier,
-          zoom = this.getZoom(),
-          originalWidth = this.width,
-          originalHeight = this.height,
-          newZoom = zoom * multiplier,
-          vp = this.viewportTransform,
-          translateX = (vp[4] - (cropping.left || 0)) * multiplier,
-          translateY = (vp[5] - (cropping.top || 0)) * multiplier,
-          originalInteractive = this.interactive,
-          newVp = [newZoom, 0, 0, newZoom, translateX, translateY],
-          originalRetina = this.enableRetinaScaling,
-          canvasEl = fabric.util.createCanvasElement(),
-          originalContextTop = this.contextTop;
-      canvasEl.width = scaledWidth;
-      canvasEl.height = scaledHeight;
-      this.contextTop = null;
-      this.enableRetinaScaling = false;
-      this.interactive = false;
-      this.viewportTransform = newVp;
-      this.width = scaledWidth;
-      this.height = scaledHeight;
-      this.calcViewportBoundaries();
-      this.renderCanvas(canvasEl.getContext('2d'), this._objects);
-      this.viewportTransform = vp;
-      this.width = originalWidth;
-      this.height = originalHeight;
-      this.calcViewportBoundaries();
-      this.interactive = originalInteractive;
-      this.enableRetinaScaling = originalRetina;
-      this.contextTop = originalContextTop;
-      return canvasEl;
-    },
-  });
-
-})();