@nasser-sw/fabric 7.0.1-beta2 → 7.0.1-beta4

package/debug/konva/src/Tween.ts

@@ -1,811 +0,0 @@
-import { Util } from './Util.ts';
-import { Animation } from './Animation.ts';
-import type { NodeConfig } from './Node.ts';
-import { Node } from './Node.ts';
-import { Konva } from './Global.ts';
-import type { Line } from './shapes/Line.ts';
-
-const blacklist = {
-    node: 1,
-    duration: 1,
-    easing: 1,
-    onFinish: 1,
-    yoyo: 1,
-  },
-  PAUSED = 1,
-  PLAYING = 2,
-  REVERSING = 3,
-  colorAttrs = ['fill', 'stroke', 'shadowColor'];
-let idCounter = 0;
-
-class TweenEngine {
-  prop: string;
-  propFunc: Function;
-  begin: number;
-  _pos: number;
-  duration: number;
-  prevPos: number;
-  yoyo: boolean;
-  _time: number;
-  _position: number;
-  _startTime: number;
-  _finish: number;
-  func: Function;
-  _change: number;
-  state: number;
-
-  onPlay: Function;
-  onReverse: Function;
-  onPause: Function;
-  onReset: Function;
-  onFinish: Function;
-  onUpdate: Function;
-
-  constructor(prop, propFunc, func, begin, finish, duration, yoyo) {
-    this.prop = prop;
-    this.propFunc = propFunc;
-    this.begin = begin;
-    this._pos = begin;
-    this.duration = duration;
-    this._change = 0;
-    this.prevPos = 0;
-    this.yoyo = yoyo;
-    this._time = 0;
-    this._position = 0;
-    this._startTime = 0;
-    this._finish = 0;
-    this.func = func;
-    this._change = finish - this.begin;
-    this.pause();
-  }
-  fire(str) {
-    const handler = this[str];
-    if (handler) {
-      handler();
-    }
-  }
-  setTime(t) {
-    if (t > this.duration) {
-      if (this.yoyo) {
-        this._time = this.duration;
-        this.reverse();
-      } else {
-        this.finish();
-      }
-    } else if (t < 0) {
-      if (this.yoyo) {
-        this._time = 0;
-        this.play();
-      } else {
-        this.reset();
-      }
-    } else {
-      this._time = t;
-      this.update();
-    }
-  }
-  getTime() {
-    return this._time;
-  }
-  setPosition(p) {
-    this.prevPos = this._pos;
-    this.propFunc(p);
-    this._pos = p;
-  }
-  getPosition(t) {
-    if (t === undefined) {
-      t = this._time;
-    }
-    return this.func(t, this.begin, this._change, this.duration);
-  }
-  play() {
-    this.state = PLAYING;
-    this._startTime = this.getTimer() - this._time;
-    this.onEnterFrame();
-    this.fire('onPlay');
-  }
-  reverse() {
-    this.state = REVERSING;
-    this._time = this.duration - this._time;
-    this._startTime = this.getTimer() - this._time;
-    this.onEnterFrame();
-    this.fire('onReverse');
-  }
-  seek(t) {
-    this.pause();
-    this._time = t;
-    this.update();
-    this.fire('onSeek');
-  }
-  reset() {
-    this.pause();
-    this._time = 0;
-    this.update();
-    this.fire('onReset');
-  }
-  finish() {
-    this.pause();
-    this._time = this.duration;
-    this.update();
-    this.fire('onFinish');
-  }
-  update() {
-    this.setPosition(this.getPosition(this._time));
-    this.fire('onUpdate');
-  }
-  onEnterFrame() {
-    const t = this.getTimer() - this._startTime;
-    if (this.state === PLAYING) {
-      this.setTime(t);
-    } else if (this.state === REVERSING) {
-      this.setTime(this.duration - t);
-    }
-  }
-  pause() {
-    this.state = PAUSED;
-    this.fire('onPause');
-  }
-  getTimer() {
-    return new Date().getTime();
-  }
-}
-
-export interface TweenConfig extends NodeConfig {
-  onFinish?: Function;
-  onUpdate?: Function;
-  duration?: number;
-  node: Node;
-}
-
-/**
- * Tween constructor.  Tweens enable you to animate a node between the current state and a new state.
- *  You can play, pause, reverse, seek, reset, and finish tweens.  By default, tweens are animated using
- *  a linear easing.  For more tweening options, check out {@link Konva.Easings}
- * @constructor
- * @memberof Konva
- * @example
- * // instantiate new tween which fully rotates a node in 1 second
- * var tween = new Konva.Tween({
- *   // list of tween specific properties
- *   node: node,
- *   duration: 1,
- *   easing: Konva.Easings.EaseInOut,
- *   onUpdate: () => console.log('node attrs updated')
- *   onFinish: () => console.log('finished'),
- *   // set new values for any attributes of a passed node
- *   rotation: 360,
- *   fill: 'red'
- * });
- *
- * // play tween
- * tween.play();
- *
- * // pause tween
- * tween.pause();
- */
-export class Tween {
-  static attrs = {};
-  static tweens = {};
-
-  node: Node;
-  anim: Animation;
-  tween: TweenEngine;
-  _id: number;
-  onFinish: Function | undefined;
-  onReset: Function | undefined;
-  onUpdate: Function | undefined;
-
-  constructor(config: TweenConfig) {
-    const that = this,
-      node = config.node as any,
-      nodeId = node._id,
-      easing = config.easing || Easings.Linear,
-      yoyo = !!config.yoyo;
-    let duration, key;
-
-    if (typeof config.duration === 'undefined') {
-      duration = 0.3;
-    } else if (config.duration === 0) {
-      // zero is bad value for duration
-      duration = 0.001;
-    } else {
-      duration = config.duration;
-    }
-    this.node = node;
-    this._id = idCounter++;
-
-    const layers =
-      node.getLayer() ||
-      (node instanceof Konva['Stage'] ? node.getLayers() : null);
-    if (!layers) {
-      Util.error(
-        'Tween constructor have `node` that is not in a layer. Please add node into layer first.'
-      );
-    }
-    this.anim = new Animation(function () {
-      that.tween.onEnterFrame();
-    }, layers);
-
-    this.tween = new TweenEngine(
-      key,
-      function (i) {
-        that._tweenFunc(i);
-      },
-      easing,
-      0,
-      1,
-      duration * 1000,
-      yoyo
-    );
-
-    this._addListeners();
-
-    // init attrs map
-    if (!Tween.attrs[nodeId]) {
-      Tween.attrs[nodeId] = {};
-    }
-    if (!Tween.attrs[nodeId][this._id]) {
-      Tween.attrs[nodeId][this._id] = {};
-    }
-    // init tweens map
-    if (!Tween.tweens[nodeId]) {
-      Tween.tweens[nodeId] = {};
-    }
-
-    for (key in config) {
-      if (blacklist[key] === undefined) {
-        this._addAttr(key, config[key]);
-      }
-    }
-
-    this.reset();
-
-    // callbacks
-    this.onFinish = config.onFinish;
-    this.onReset = config.onReset;
-    this.onUpdate = config.onUpdate;
-  }
-  _addAttr(key, end) {
-    const node = this.node,
-      nodeId = node._id;
-    let diff, len, trueEnd, trueStart, endRGBA;
-
-    // remove conflict from tween map if it exists
-    const tweenId = Tween.tweens[nodeId][key];
-
-    if (tweenId) {
-      delete Tween.attrs[nodeId][tweenId][key];
-    }
-
-    // add to tween map
-    let start = node.getAttr(key);
-
-    if (Util._isArray(end)) {
-      diff = [];
-      len = Math.max(end.length, start.length);
-
-      if (key === 'points' && end.length !== start.length) {
-        // before tweening points we need to make sure that start.length === end.length
-        // Util._prepareArrayForTween thinking that end.length > start.length
-        if (end.length > start.length) {
-          // so in this case we will increase number of starting points
-          trueStart = start;
-          start = Util._prepareArrayForTween(
-            start,
-            end,
-            (node as Line).closed()
-          );
-        } else {
-          // in this case we will increase number of eding points
-          trueEnd = end;
-          end = Util._prepareArrayForTween(end, start, (node as Line).closed());
-        }
-      }
-
-      if (key.indexOf('fill') === 0) {
-        for (let n = 0; n < len; n++) {
-          if (n % 2 === 0) {
-            diff.push(end[n] - start[n]);
-          } else {
-            const startRGBA = Util.colorToRGBA(start[n])!;
-            endRGBA = Util.colorToRGBA(end[n]);
-            start[n] = startRGBA;
-            diff.push({
-              r: endRGBA.r - startRGBA.r,
-              g: endRGBA.g - startRGBA.g,
-              b: endRGBA.b - startRGBA.b,
-              a: endRGBA.a - startRGBA.a,
-            });
-          }
-        }
-      } else {
-        for (let n = 0; n < len; n++) {
-          diff.push(end[n] - start[n]);
-        }
-      }
-    } else if (colorAttrs.indexOf(key) !== -1) {
-      start = Util.colorToRGBA(start);
-      endRGBA = Util.colorToRGBA(end);
-      diff = {
-        r: endRGBA.r - start.r,
-        g: endRGBA.g - start.g,
-        b: endRGBA.b - start.b,
-        a: endRGBA.a - start.a,
-      };
-    } else {
-      diff = end - start;
-    }
-
-    Tween.attrs[nodeId][this._id][key] = {
-      start: start,
-      diff: diff,
-      end: end,
-      trueEnd: trueEnd,
-      trueStart: trueStart,
-    };
-    Tween.tweens[nodeId][key] = this._id;
-  }
-  _tweenFunc(i) {
-    const node = this.node,
-      attrs = Tween.attrs[node._id][this._id];
-    let key, attr, start, diff, newVal, n, len, end;
-
-    for (key in attrs) {
-      attr = attrs[key];
-      start = attr.start;
-      diff = attr.diff;
-      end = attr.end;
-
-      if (Util._isArray(start)) {
-        newVal = [];
-        len = Math.max(start.length, end.length);
-        if (key.indexOf('fill') === 0) {
-          for (n = 0; n < len; n++) {
-            if (n % 2 === 0) {
-              newVal.push((start[n] || 0) + diff[n] * i);
-            } else {
-              newVal.push(
-                'rgba(' +
-                  Math.round(start[n].r + diff[n].r * i) +
-                  ',' +
-                  Math.round(start[n].g + diff[n].g * i) +
-                  ',' +
-                  Math.round(start[n].b + diff[n].b * i) +
-                  ',' +
-                  (start[n].a + diff[n].a * i) +
-                  ')'
-              );
-            }
-          }
-        } else {
-          for (n = 0; n < len; n++) {
-            newVal.push((start[n] || 0) + diff[n] * i);
-          }
-        }
-      } else if (colorAttrs.indexOf(key) !== -1) {
-        newVal =
-          'rgba(' +
-          Math.round(start.r + diff.r * i) +
-          ',' +
-          Math.round(start.g + diff.g * i) +
-          ',' +
-          Math.round(start.b + diff.b * i) +
-          ',' +
-          (start.a + diff.a * i) +
-          ')';
-      } else {
-        newVal = start + diff * i;
-      }
-
-      node.setAttr(key, newVal);
-    }
-  }
-  _addListeners() {
-    // start listeners
-    this.tween.onPlay = () => {
-      this.anim.start();
-    };
-    this.tween.onReverse = () => {
-      this.anim.start();
-    };
-
-    // stop listeners
-    this.tween.onPause = () => {
-      this.anim.stop();
-    };
-    this.tween.onFinish = () => {
-      const node = this.node as Node;
-
-      // after tweening  points of line we need to set original end
-      const attrs = Tween.attrs[node._id][this._id];
-      if (attrs.points && attrs.points.trueEnd) {
-        node.setAttr('points', attrs.points.trueEnd);
-      }
-
-      if (this.onFinish) {
-        this.onFinish.call(this);
-      }
-    };
-    this.tween.onReset = () => {
-      const node = this.node as any;
-      // after tweening  points of line we need to set original start
-      const attrs = Tween.attrs[node._id][this._id];
-      if (attrs.points && attrs.points.trueStart) {
-        node.points(attrs.points.trueStart);
-      }
-
-      if (this.onReset) {
-        this.onReset();
-      }
-    };
-    this.tween.onUpdate = () => {
-      if (this.onUpdate) {
-        this.onUpdate.call(this);
-      }
-    };
-  }
-  /**
-   * play
-   * @method
-   * @name Konva.Tween#play
-   * @returns {Tween}
-   */
-  play() {
-    this.tween.play();
-    return this;
-  }
-  /**
-   * reverse
-   * @method
-   * @name Konva.Tween#reverse
-   * @returns {Tween}
-   */
-  reverse() {
-    this.tween.reverse();
-    return this;
-  }
-  /**
-   * reset
-   * @method
-   * @name Konva.Tween#reset
-   * @returns {Tween}
-   */
-  reset() {
-    this.tween.reset();
-    return this;
-  }
-  /**
-   * seek
-   * @method
-   * @name Konva.Tween#seek(
-   * @param {Integer} t time in seconds between 0 and the duration
-   * @returns {Tween}
-   */
-  seek(t) {
-    this.tween.seek(t * 1000);
-    return this;
-  }
-  /**
-   * pause
-   * @method
-   * @name Konva.Tween#pause
-   * @returns {Tween}
-   */
-  pause() {
-    this.tween.pause();
-    return this;
-  }
-  /**
-   * finish
-   * @method
-   * @name Konva.Tween#finish
-   * @returns {Tween}
-   */
-  finish() {
-    this.tween.finish();
-    return this;
-  }
-  /**
-   * destroy
-   * @method
-   * @name Konva.Tween#destroy
-   */
-  destroy() {
-    const nodeId = this.node._id,
-      thisId = this._id,
-      attrs = Tween.tweens[nodeId];
-
-    this.pause();
-
-    // Clean up animation
-    if (this.anim) {
-      this.anim.stop();
-    }
-
-    // Clean up tween entries
-    for (const key in attrs) {
-      delete Tween.tweens[nodeId][key];
-    }
-
-    // Clean up attrs entry
-    delete Tween.attrs[nodeId][thisId];
-
-    // Clean up parent objects if empty
-    if (Tween.tweens[nodeId]) {
-      if (Object.keys(Tween.tweens[nodeId]).length === 0) {
-        delete Tween.tweens[nodeId];
-      }
-      if (Object.keys(Tween.attrs[nodeId]).length === 0) {
-        delete Tween.attrs[nodeId];
-      }
-    }
-  }
-}
-
-/**
- * Tween node properties. Shorter usage of {@link Konva.Tween} object.
- *
- * @method Konva.Node#to
- * @param {Object} [params] tween params
- * @example
- *
- * circle.to({
- *   x : 50,
- *   duration : 0.5,
- *   onUpdate: () => console.log('props updated'),
- *   onFinish: () => console.log('finished'),
- * });
- */
-Node.prototype.to = function (params) {
-  const onFinish = params.onFinish;
-  params.node = this;
-  params.onFinish = function () {
-    this.destroy();
-    if (onFinish) {
-      onFinish();
-    }
-  };
-  const tween = new Tween(params as any);
-  tween.play();
-};
-
-/*
- * These eases were ported from an Adobe Flash tweening library to JavaScript
- * by Xaric
- */
-
-/**
- * @namespace Easings
- * @memberof Konva
- */
-export const Easings = {
-  /**
-   * back ease in
-   * @function
-   * @memberof Konva.Easings
-   */
-  BackEaseIn(t, b, c, d) {
-    const s = 1.70158;
-    return c * (t /= d) * t * ((s + 1) * t - s) + b;
-  },
-  /**
-   * back ease out
-   * @function
-   * @memberof Konva.Easings
-   */
-  BackEaseOut(t, b, c, d) {
-    const s = 1.70158;
-    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
-  },
-  /**
-   * back ease in out
-   * @function
-   * @memberof Konva.Easings
-   */
-  BackEaseInOut(t, b, c, d) {
-    let s = 1.70158;
-    if ((t /= d / 2) < 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;
-  },
-  /**
-   * elastic ease in
-   * @function
-   * @memberof Konva.Easings
-   */
-  ElasticEaseIn(t, b, c, d, a, p) {
-    // added s = 0
-    let s = 0;
-    if (t === 0) {
-      return b;
-    }
-    if ((t /= d) === 1) {
-      return b + c;
-    }
-    if (!p) {
-      p = d * 0.3;
-    }
-    if (!a || a < Math.abs(c)) {
-      a = c;
-      s = p / 4;
-    } else {
-      s = (p / (2 * Math.PI)) * Math.asin(c / a);
-    }
-    return (
-      -(
-        a *
-        Math.pow(2, 10 * (t -= 1)) *
-        Math.sin(((t * d - s) * (2 * Math.PI)) / p)
-      ) + b
-    );
-  },
-  /**
-   * elastic ease out
-   * @function
-   * @memberof Konva.Easings
-   */
-  ElasticEaseOut(t, b, c, d, a, p) {
-    // added s = 0
-    let s = 0;
-    if (t === 0) {
-      return b;
-    }
-    if ((t /= d) === 1) {
-      return b + c;
-    }
-    if (!p) {
-      p = d * 0.3;
-    }
-    if (!a || a < Math.abs(c)) {
-      a = c;
-      s = p / 4;
-    } else {
-      s = (p / (2 * Math.PI)) * Math.asin(c / a);
-    }
-    return (
-      a * Math.pow(2, -10 * t) * Math.sin(((t * d - s) * (2 * Math.PI)) / p) +
-      c +
-      b
-    );
-  },
-  /**
-   * elastic ease in out
-   * @function
-   * @memberof Konva.Easings
-   */
-  ElasticEaseInOut(t, b, c, d, a, p) {
-    // added s = 0
-    let s = 0;
-    if (t === 0) {
-      return b;
-    }
-    if ((t /= d / 2) === 2) {
-      return b + c;
-    }
-    if (!p) {
-      p = d * (0.3 * 1.5);
-    }
-    if (!a || a < Math.abs(c)) {
-      a = c;
-      s = p / 4;
-    } else {
-      s = (p / (2 * Math.PI)) * Math.asin(c / a);
-    }
-    if (t < 1) {
-      return (
-        -0.5 *
-          (a *
-            Math.pow(2, 10 * (t -= 1)) *
-            Math.sin(((t * d - s) * (2 * Math.PI)) / p)) +
-        b
-      );
-    }
-    return (
-      a *
-        Math.pow(2, -10 * (t -= 1)) *
-        Math.sin(((t * d - s) * (2 * Math.PI)) / p) *
-        0.5 +
-      c +
-      b
-    );
-  },
-  /**
-   * bounce ease out
-   * @function
-   * @memberof Konva.Easings
-   */
-  BounceEaseOut(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;
-    }
-  },
-  /**
-   * bounce ease in
-   * @function
-   * @memberof Konva.Easings
-   */
-  BounceEaseIn(t, b, c, d) {
-    return c - Easings.BounceEaseOut(d - t, 0, c, d) + b;
-  },
-  /**
-   * bounce ease in out
-   * @function
-   * @memberof Konva.Easings
-   */
-  BounceEaseInOut(t, b, c, d) {
-    if (t < d / 2) {
-      return Easings.BounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
-    } else {
-      return Easings.BounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
-    }
-  },
-  /**
-   * ease in
-   * @function
-   * @memberof Konva.Easings
-   */
-  EaseIn(t, b, c, d) {
-    return c * (t /= d) * t + b;
-  },
-  /**
-   * ease out
-   * @function
-   * @memberof Konva.Easings
-   */
-  EaseOut(t, b, c, d) {
-    return -c * (t /= d) * (t - 2) + b;
-  },
-  /**
-   * ease in out
-   * @function
-   * @memberof Konva.Easings
-   */
-  EaseInOut(t, b, c, d) {
-    if ((t /= d / 2) < 1) {
-      return (c / 2) * t * t + b;
-    }
-    return (-c / 2) * (--t * (t - 2) - 1) + b;
-  },
-  /**
-   * strong ease in
-   * @function
-   * @memberof Konva.Easings
-   */
-  StrongEaseIn(t, b, c, d) {
-    return c * (t /= d) * t * t * t * t + b;
-  },
-  /**
-   * strong ease out
-   * @function
-   * @memberof Konva.Easings
-   */
-  StrongEaseOut(t, b, c, d) {
-    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
-  },
-  /**
-   * strong ease in out
-   * @function
-   * @memberof Konva.Easings
-   */
-  StrongEaseInOut(t, b, c, d) {
-    if ((t /= d / 2) < 1) {
-      return (c / 2) * t * t * t * t * t + b;
-    }
-    return (c / 2) * ((t -= 2) * t * t * t * t + 2) + b;
-  },
-  /**
-   * linear
-   * @function
-   * @memberof Konva.Easings
-   */
-  Linear(t, b, c, d) {
-    return (c * t) / d + b;
-  },
-};