fabric 5.3.0 → 6.0.0-beta10

package/src/util/anim_ease.js

@@ -1,398 +0,0 @@
-(function() {
-
-  function normalize(a, c, p, s) {
-    if (a < Math.abs(c)) {
-      a = c;
-      s = p / 4;
-    }
-    else {
-      //handle the 0/0 case:
-      if (c === 0 && a === 0) {
-        s = p / (2 * Math.PI) * Math.asin(1);
-      }
-      else {
-        s = p / (2 * Math.PI) * Math.asin(c / a);
-      }
-    }
-    return { a: a, c: c, p: p, s: s };
-  }
-
-  function elastic(opts, t, d) {
-    return opts.a *
-      Math.pow(2, 10 * (t -= 1)) *
-      Math.sin( (t * d - opts.s) * (2 * Math.PI) / opts.p );
-  }
-
-  /**
-   * Cubic easing out
-   * @memberOf fabric.util.ease
-   */
-  function easeOutCubic(t, b, c, d) {
-    return c * ((t = t / d - 1) * t * t + 1) + b;
-  }
-
-  /**
-   * Cubic easing in and out
-   * @memberOf fabric.util.ease
-   */
-  function easeInOutCubic(t, b, c, d) {
-    t /= d / 2;
-    if (t < 1) {
-      return c / 2 * t * t * t + b;
-    }
-    return c / 2 * ((t -= 2) * t * t + 2) + b;
-  }
-
-  /**
-   * Quartic easing in
-   * @memberOf fabric.util.ease
-   */
-  function easeInQuart(t, b, c, d) {
-    return c * (t /= d) * t * t * t + b;
-  }
-
-  /**
-   * Quartic easing out
-   * @memberOf fabric.util.ease
-   */
-  function easeOutQuart(t, b, c, d) {
-    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
-  }
-
-  /**
-   * Quartic easing in and out
-   * @memberOf fabric.util.ease
-   */
-  function easeInOutQuart(t, b, c, d) {
-    t /= d / 2;
-    if (t < 1) {
-      return c / 2 * t * t * t * t + b;
-    }
-    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
-  }
-
-  /**
-   * Quintic easing in
-   * @memberOf fabric.util.ease
-   */
-  function easeInQuint(t, b, c, d) {
-    return c * (t /= d) * t * t * t * t + b;
-  }
-
-  /**
-   * Quintic easing out
-   * @memberOf fabric.util.ease
-   */
-  function easeOutQuint(t, b, c, d) {
-    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
-  }
-
-  /**
-   * Quintic easing in and out
-   * @memberOf fabric.util.ease
-   */
-  function easeInOutQuint(t, b, c, d) {
-    t /= d / 2;
-    if (t < 1) {
-      return c / 2 * t * t * t * t * t + b;
-    }
-    return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
-  }
-
-  /**
-   * Sinusoidal easing in
-   * @memberOf fabric.util.ease
-   */
-  function easeInSine(t, b, c, d) {
-    return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
-  }
-
-  /**
-   * Sinusoidal easing out
-   * @memberOf fabric.util.ease
-   */
-  function easeOutSine(t, b, c, d) {
-    return c * Math.sin(t / d * (Math.PI / 2)) + b;
-  }
-
-  /**
-   * Sinusoidal easing in and out
-   * @memberOf fabric.util.ease
-   */
-  function easeInOutSine(t, b, c, d) {
-    return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
-  }
-
-  /**
-   * Exponential easing in
-   * @memberOf fabric.util.ease
-   */
-  function easeInExpo(t, b, c, d) {
-    return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
-  }
-
-  /**
-   * Exponential easing out
-   * @memberOf fabric.util.ease
-   */
-  function easeOutExpo(t, b, c, d) {
-    return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
-  }
-
-  /**
-   * Exponential easing in and out
-   * @memberOf fabric.util.ease
-   */
-  function easeInOutExpo(t, b, c, d) {
-    if (t === 0) {
-      return b;
-    }
-    if (t === d) {
-      return b + c;
-    }
-    t /= d / 2;
-    if (t < 1) {
-      return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
-    }
-    return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
-  }
-
-  /**
-   * Circular easing in
-   * @memberOf fabric.util.ease
-   */
-  function easeInCirc(t, b, c, d) {
-    return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
-  }
-
-  /**
-   * Circular easing out
-   * @memberOf fabric.util.ease
-   */
-  function easeOutCirc(t, b, c, d) {
-    return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
-  }
-
-  /**
-   * Circular easing in and out
-   * @memberOf fabric.util.ease
-   */
-  function easeInOutCirc(t, b, c, d) {
-    t /= d / 2;
-    if (t < 1) {
-      return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
-    }
-    return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
-  }
-
-  /**
-   * Elastic easing in
-   * @memberOf fabric.util.ease
-   */
-  function easeInElastic(t, b, c, d) {
-    var s = 1.70158, p = 0, a = c;
-    if (t === 0) {
-      return b;
-    }
-    t /= d;
-    if (t === 1) {
-      return b + c;
-    }
-    if (!p) {
-      p = d * 0.3;
-    }
-    var opts = normalize(a, c, p, s);
-    return -elastic(opts, t, d) + b;
-  }
-
-  /**
-   * Elastic easing out
-   * @memberOf fabric.util.ease
-   */
-  function easeOutElastic(t, b, c, d) {
-    var s = 1.70158, p = 0, a = c;
-    if (t === 0) {
-      return b;
-    }
-    t /= d;
-    if (t === 1) {
-      return b + c;
-    }
-    if (!p) {
-      p = d * 0.3;
-    }
-    var opts = normalize(a, c, p, s);
-    return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) + opts.c + b;
-  }
-
-  /**
-   * Elastic easing in and out
-   * @memberOf fabric.util.ease
-   */
-  function easeInOutElastic(t, b, c, d) {
-    var s = 1.70158, p = 0, a = c;
-    if (t === 0) {
-      return b;
-    }
-    t /= d / 2;
-    if (t === 2) {
-      return b + c;
-    }
-    if (!p) {
-      p = d * (0.3 * 1.5);
-    }
-    var opts = normalize(a, c, p, s);
-    if (t < 1) {
-      return -0.5 * elastic(opts, t, d) + b;
-    }
-    return opts.a * Math.pow(2, -10 * (t -= 1)) *
-      Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) * 0.5 + opts.c + b;
-  }
-
-  /**
-   * Backwards easing in
-   * @memberOf fabric.util.ease
-   */
-  function easeInBack(t, b, c, d, s) {
-    if (s === undefined) {
-      s = 1.70158;
-    }
-    return c * (t /= d) * t * ((s + 1) * t - s) + b;
-  }
-
-  /**
-   * Backwards easing out
-   * @memberOf fabric.util.ease
-   */
-  function easeOutBack(t, b, c, d, s) {
-    if (s === undefined) {
-      s = 1.70158;
-    }
-    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
-  }
-
-  /**
-   * Backwards easing in and out
-   * @memberOf fabric.util.ease
-   */
-  function easeInOutBack(t, b, c, d, s) {
-    if (s === undefined) {
-      s = 1.70158;
-    }
-    t /= d / 2;
-    if (t < 1) {
-      return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
-    }
-    return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
-  }
-
-  /**
-   * Bouncing easing in
-   * @memberOf fabric.util.ease
-   */
-  function easeInBounce(t, b, c, d) {
-    return c - easeOutBounce (d - t, 0, c, d) + b;
-  }
-
-  /**
-   * Bouncing easing out
-   * @memberOf fabric.util.ease
-   */
-  function easeOutBounce(t, b, c, d) {
-    if ((t /= d) < (1 / 2.75)) {
-      return c * (7.5625 * t * t) + b;
-    }
-    else if (t < (2 / 2.75)) {
-      return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
-    }
-    else if (t < (2.5 / 2.75)) {
-      return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
-    }
-    else {
-      return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
-    }
-  }
-
-  /**
-   * Bouncing easing in and out
-   * @memberOf fabric.util.ease
-   */
-  function easeInOutBounce(t, b, c, d) {
-    if (t < d / 2) {
-      return easeInBounce (t * 2, 0, c, d) * 0.5 + b;
-    }
-    return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
-  }
-
-  /**
-   * Easing functions
-   * See <a href="http://gizma.com/easing/">Easing Equations by Robert Penner</a>
-   * @namespace fabric.util.ease
-   */
-  fabric.util.ease = {
-
-    /**
-     * Quadratic easing in
-     * @memberOf fabric.util.ease
-     */
-    easeInQuad: function(t, b, c, d) {
-      return c * (t /= d) * t + b;
-    },
-
-    /**
-     * Quadratic easing out
-     * @memberOf fabric.util.ease
-     */
-    easeOutQuad: function(t, b, c, d) {
-      return -c * (t /= d) * (t - 2) + b;
-    },
-
-    /**
-     * Quadratic easing in and out
-     * @memberOf fabric.util.ease
-     */
-    easeInOutQuad: function(t, b, c, d) {
-      t /= (d / 2);
-      if (t < 1) {
-        return c / 2 * t * t + b;
-      }
-      return -c / 2 * ((--t) * (t - 2) - 1) + b;
-    },
-
-    /**
-     * Cubic easing in
-     * @memberOf fabric.util.ease
-     */
-    easeInCubic: function(t, b, c, d) {
-      return c * (t /= d) * t * t + b;
-    },
-
-    easeOutCubic: easeOutCubic,
-    easeInOutCubic: easeInOutCubic,
-    easeInQuart: easeInQuart,
-    easeOutQuart: easeOutQuart,
-    easeInOutQuart: easeInOutQuart,
-    easeInQuint: easeInQuint,
-    easeOutQuint: easeOutQuint,
-    easeInOutQuint: easeInOutQuint,
-    easeInSine: easeInSine,
-    easeOutSine: easeOutSine,
-    easeInOutSine: easeInOutSine,
-    easeInExpo: easeInExpo,
-    easeOutExpo: easeOutExpo,
-    easeInOutExpo: easeInOutExpo,
-    easeInCirc: easeInCirc,
-    easeOutCirc: easeOutCirc,
-    easeInOutCirc: easeInOutCirc,
-    easeInElastic: easeInElastic,
-    easeOutElastic: easeOutElastic,
-    easeInOutElastic: easeInOutElastic,
-    easeInBack: easeInBack,
-    easeOutBack: easeOutBack,
-    easeInOutBack: easeInOutBack,
-    easeInBounce: easeInBounce,
-    easeOutBounce: easeOutBounce,
-    easeInOutBounce: easeInOutBounce
-  };
-
-})();

package/src/util/animate.js

@@ -1,254 +0,0 @@
-(function () {
-
-  var extend = fabric.util.object.extend,
-      clone = fabric.util.object.clone;
-
-  /**
-   * @typedef {Object} AnimationOptions
-   * Animation of a value or list of values.
-   * When using lists, think of something like this:
-   * fabric.util.animate({
-   *   startValue: [1, 2, 3],
-   *   endValue: [2, 4, 6],
-   *   onChange: function([a, b, c]) {
-   *     canvas.zoomToPoint({x: b, y: c}, a)
-   *     canvas.renderAll()
-   *   }
-   * });
-   * @example
-   * @property {Function} [onChange] Callback; invoked on every value change
-   * @property {Function} [onComplete] Callback; invoked when value change is completed
-   * @example
-   * // Note: startValue, endValue, and byValue must match the type
-   * var animationOptions = { startValue: 0, endValue: 1, byValue: 0.25 }
-   * var animationOptions = { startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] }
-   * @property {number | number[]} [startValue=0] Starting value
-   * @property {number | number[]} [endValue=100] Ending value
-   * @property {number | number[]} [byValue=100] Value to modify the property by
-   * @property {Function} [easing] Easing function
-   * @property {Number} [duration=500] Duration of change (in ms)
-   * @property {Function} [abort] Additional function with logic. If returns true, animation aborts.
-   *
-   * @typedef {() => void} CancelFunction
-   *
-   * @typedef {Object} AnimationCurrentState
-   * @property {number | number[]} currentValue value in range [`startValue`, `endValue`]
-   * @property {number} completionRate value in range [0, 1]
-   * @property {number} durationRate value in range [0, 1]
-   *
-   * @typedef {(AnimationOptions & AnimationCurrentState & { cancel: CancelFunction }} AnimationContext
-   */
-
-  /**
-   * Array holding all running animations
-   * @memberof fabric
-   * @type {AnimationContext[]}
-   */
-  var RUNNING_ANIMATIONS = [];
-  fabric.util.object.extend(RUNNING_ANIMATIONS, {
-
-    /**
-     * cancel all running animations at the next requestAnimFrame
-     * @returns {AnimationContext[]}
-     */
-    cancelAll: function () {
-      var animations = this.splice(0);
-      animations.forEach(function (animation) {
-        animation.cancel();
-      });
-      return animations;
-    },
-
-    /**
-     * cancel all running animations attached to canvas at the next requestAnimFrame
-     * @param {fabric.Canvas} canvas
-     * @returns {AnimationContext[]}
-     */
-    cancelByCanvas: function (canvas) {
-      if (!canvas) {
-        return [];
-      }
-      var cancelled = this.filter(function (animation) {
-        return typeof animation.target === 'object' && animation.target.canvas === canvas;
-      });
-      cancelled.forEach(function (animation) {
-        animation.cancel();
-      });
-      return cancelled;
-    },
-
-    /**
-     * cancel all running animations for target at the next requestAnimFrame
-     * @param {*} target
-     * @returns {AnimationContext[]}
-     */
-    cancelByTarget: function (target) {
-      var cancelled = this.findAnimationsByTarget(target);
-      cancelled.forEach(function (animation) {
-        animation.cancel();
-      });
-      return cancelled;
-    },
-
-    /**
-     *
-     * @param {CancelFunction} cancelFunc the function returned by animate
-     * @returns {number}
-     */
-    findAnimationIndex: function (cancelFunc) {
-      return this.indexOf(this.findAnimation(cancelFunc));
-    },
-
-    /**
-     *
-     * @param {CancelFunction} cancelFunc the function returned by animate
-     * @returns {AnimationContext | undefined} animation's options object
-     */
-    findAnimation: function (cancelFunc) {
-      return this.find(function (animation) {
-        return animation.cancel === cancelFunc;
-      });
-    },
-
-    /**
-     *
-     * @param {*} target the object that is assigned to the target property of the animation context
-     * @returns {AnimationContext[]} array of animation options object associated with target
-     */
-    findAnimationsByTarget: function (target) {
-      if (!target) {
-        return [];
-      }
-      return this.filter(function (animation) {
-        return animation.target === target;
-      });
-    }
-  });
-
-  function noop() {
-    return false;
-  }
-
-  function defaultEasing(t, b, c, d) {
-    return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
-  }
-
-  /**
-   * Changes value from one to another within certain period of time, invoking callbacks as value is being changed.
-   * @memberOf fabric.util
-   * @param {AnimationOptions} [options] Animation options
-   * @example
-   * // Note: startValue, endValue, and byValue must match the type
-   * fabric.util.animate({ startValue: 0, endValue: 1, byValue: 0.25 })
-   * fabric.util.animate({ startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] })
-   * @returns {CancelFunction} cancel function
-   */
-  function animate(options) {
-    options || (options = {});
-    var cancel = false,
-        context,
-        removeFromRegistry = function () {
-          var index = fabric.runningAnimations.indexOf(context);
-          return index > -1 && fabric.runningAnimations.splice(index, 1)[0];
-        };
-
-    context = extend(clone(options), {
-      cancel: function () {
-        cancel = true;
-        return removeFromRegistry();
-      },
-      currentValue: 'startValue' in options ? options.startValue : 0,
-      completionRate: 0,
-      durationRate: 0
-    });
-    fabric.runningAnimations.push(context);
-
-    requestAnimFrame(function(timestamp) {
-      var start = timestamp || +new Date(),
-          duration = options.duration || 500,
-          finish = start + duration, time,
-          onChange = options.onChange || noop,
-          abort = options.abort || noop,
-          onComplete = options.onComplete || noop,
-          easing = options.easing || defaultEasing,
-          isMany = 'startValue' in options ? options.startValue.length > 0 : false,
-          startValue = 'startValue' in options ? options.startValue : 0,
-          endValue = 'endValue' in options ? options.endValue : 100,
-          byValue = options.byValue || (isMany ? startValue.map(function(value, i) {
-            return endValue[i] - startValue[i];
-          }) : endValue - startValue);
-
-      options.onStart && options.onStart();
-
-      (function tick(ticktime) {
-        time = ticktime || +new Date();
-        var currentTime = time > finish ? duration : (time - start),
-            timePerc = currentTime / duration,
-            current = isMany ? startValue.map(function(_value, i) {
-              return easing(currentTime, startValue[i], byValue[i], duration);
-            }) : easing(currentTime, startValue, byValue, duration),
-            valuePerc = isMany ? Math.abs((current[0] - startValue[0]) / byValue[0])
-              : Math.abs((current - startValue) / byValue);
-        //  update context
-        context.currentValue = isMany ? current.slice() : current;
-        context.completionRate = valuePerc;
-        context.durationRate = timePerc;
-        if (cancel) {
-          return;
-        }
-        if (abort(current, valuePerc, timePerc)) {
-          removeFromRegistry();
-          return;
-        }
-        if (time > finish) {
-          //  update context
-          context.currentValue = isMany ? endValue.slice() : endValue;
-          context.completionRate = 1;
-          context.durationRate = 1;
-          //  execute callbacks
-          onChange(isMany ? endValue.slice() : endValue, 1, 1);
-          onComplete(endValue, 1, 1);
-          removeFromRegistry();
-          return;
-        }
-        else {
-          onChange(current, valuePerc, timePerc);
-          requestAnimFrame(tick);
-        }
-      })(start);
-    });
-
-    return context.cancel;
-  }
-
-  var _requestAnimFrame = fabric.window.requestAnimationFrame       ||
-                          fabric.window.webkitRequestAnimationFrame ||
-                          fabric.window.mozRequestAnimationFrame    ||
-                          fabric.window.oRequestAnimationFrame      ||
-                          fabric.window.msRequestAnimationFrame     ||
-                          function(callback) {
-                            return fabric.window.setTimeout(callback, 1000 / 60);
-                          };
-
-  var _cancelAnimFrame = fabric.window.cancelAnimationFrame || fabric.window.clearTimeout;
-
-  /**
-   * requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/
-   * In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method
-   * @memberOf fabric.util
-   * @param {Function} callback Callback to invoke
-   * @param {DOMElement} element optional Element to associate with animation
-   */
-  function requestAnimFrame() {
-    return _requestAnimFrame.apply(fabric.window, arguments);
-  }
-
-  function cancelAnimFrame() {
-    return _cancelAnimFrame.apply(fabric.window, arguments);
-  }
-
-  fabric.util.animate = animate;
-  fabric.util.requestAnimFrame = requestAnimFrame;
-  fabric.util.cancelAnimFrame = cancelAnimFrame;
-  fabric.runningAnimations = RUNNING_ANIMATIONS;
-})();