@lumen5/lottie-web 5.14.0

package/player/js/3rd_party/transformation-matrix.js

@@ -0,0 +1,449 @@
+import {
+  createTypedArray,
+} from '../utils/helpers/arrays';
+
+/*!
+ Transformation Matrix v2.0
+ (c) Epistemex 2014-2015
+ www.epistemex.com
+ By Ken Fyrstenberg
+ Contributions by leeoniya.
+ License: MIT, header required.
+ */
+
+/**
+ * 2D transformation matrix object initialized with identity matrix.
+ *
+ * The matrix can synchronize a canvas context by supplying the context
+ * as an argument, or later apply current absolute transform to an
+ * existing context.
+ *
+ * All values are handled as floating point values.
+ *
+ * @param {CanvasRenderingContext2D} [context] - Optional context to sync with Matrix
+ * @prop {number} a - scale x
+ * @prop {number} b - shear y
+ * @prop {number} c - shear x
+ * @prop {number} d - scale y
+ * @prop {number} e - translate x
+ * @prop {number} f - translate y
+ * @prop {CanvasRenderingContext2D|null} [context=null] - set or get current canvas context
+ * @constructor
+ */
+
+const Matrix = (function () {
+  var _cos = Math.cos;
+  var _sin = Math.sin;
+  var _tan = Math.tan;
+  var _rnd = Math.round;
+
+  function reset() {
+    this.props[0] = 1;
+    this.props[1] = 0;
+    this.props[2] = 0;
+    this.props[3] = 0;
+    this.props[4] = 0;
+    this.props[5] = 1;
+    this.props[6] = 0;
+    this.props[7] = 0;
+    this.props[8] = 0;
+    this.props[9] = 0;
+    this.props[10] = 1;
+    this.props[11] = 0;
+    this.props[12] = 0;
+    this.props[13] = 0;
+    this.props[14] = 0;
+    this.props[15] = 1;
+    return this;
+  }
+
+  function rotate(angle) {
+    if (angle === 0) {
+      return this;
+    }
+    var mCos = _cos(angle);
+    var mSin = _sin(angle);
+    return this._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  function rotateX(angle) {
+    if (angle === 0) {
+      return this;
+    }
+    var mCos = _cos(angle);
+    var mSin = _sin(angle);
+    return this._t(1, 0, 0, 0, 0, mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1);
+  }
+
+  function rotateY(angle) {
+    if (angle === 0) {
+      return this;
+    }
+    var mCos = _cos(angle);
+    var mSin = _sin(angle);
+    return this._t(mCos, 0, mSin, 0, 0, 1, 0, 0, -mSin, 0, mCos, 0, 0, 0, 0, 1);
+  }
+
+  function rotateZ(angle) {
+    if (angle === 0) {
+      return this;
+    }
+    var mCos = _cos(angle);
+    var mSin = _sin(angle);
+    return this._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  function shear(sx, sy) {
+    return this._t(1, sy, sx, 1, 0, 0);
+  }
+
+  function skew(ax, ay) {
+    return this.shear(_tan(ax), _tan(ay));
+  }
+
+  function skewFromAxis(ax, angle) {
+    var mCos = _cos(angle);
+    var mSin = _sin(angle);
+    return this._t(mCos, mSin, 0, 0, -mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+      ._t(1, 0, 0, 0, _tan(ax), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+      ._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    // return this._t(mCos, mSin, -mSin, mCos, 0, 0)._t(1, 0, _tan(ax), 1, 0, 0)._t(mCos, -mSin, mSin, mCos, 0, 0);
+  }
+
+  function scale(sx, sy, sz) {
+    if (!sz && sz !== 0) {
+      sz = 1;
+    }
+    if (sx === 1 && sy === 1 && sz === 1) {
+      return this;
+    }
+    return this._t(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1);
+  }
+
+  function setTransform(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) {
+    this.props[0] = a;
+    this.props[1] = b;
+    this.props[2] = c;
+    this.props[3] = d;
+    this.props[4] = e;
+    this.props[5] = f;
+    this.props[6] = g;
+    this.props[7] = h;
+    this.props[8] = i;
+    this.props[9] = j;
+    this.props[10] = k;
+    this.props[11] = l;
+    this.props[12] = m;
+    this.props[13] = n;
+    this.props[14] = o;
+    this.props[15] = p;
+    return this;
+  }
+
+  function translate(tx, ty, tz) {
+    tz = tz || 0;
+    if (tx !== 0 || ty !== 0 || tz !== 0) {
+      return this._t(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, ty, tz, 1);
+    }
+    return this;
+  }
+
+  function transform(a2, b2, c2, d2, e2, f2, g2, h2, i2, j2, k2, l2, m2, n2, o2, p2) {
+    var _p = this.props;
+
+    if (a2 === 1 && b2 === 0 && c2 === 0 && d2 === 0 && e2 === 0 && f2 === 1 && g2 === 0 && h2 === 0 && i2 === 0 && j2 === 0 && k2 === 1 && l2 === 0) {
+      // NOTE: commenting this condition because TurboFan deoptimizes code when present
+      // if(m2 !== 0 || n2 !== 0 || o2 !== 0){
+      _p[12] = _p[12] * a2 + _p[15] * m2;
+      _p[13] = _p[13] * f2 + _p[15] * n2;
+      _p[14] = _p[14] * k2 + _p[15] * o2;
+      _p[15] *= p2;
+      // }
+      this._identityCalculated = false;
+      return this;
+    }
+
+    var a1 = _p[0];
+    var b1 = _p[1];
+    var c1 = _p[2];
+    var d1 = _p[3];
+    var e1 = _p[4];
+    var f1 = _p[5];
+    var g1 = _p[6];
+    var h1 = _p[7];
+    var i1 = _p[8];
+    var j1 = _p[9];
+    var k1 = _p[10];
+    var l1 = _p[11];
+    var m1 = _p[12];
+    var n1 = _p[13];
+    var o1 = _p[14];
+    var p1 = _p[15];
+
+    /* matrix order (canvas compatible):
+         * ace
+         * bdf
+         * 001
+         */
+    _p[0] = a1 * a2 + b1 * e2 + c1 * i2 + d1 * m2;
+    _p[1] = a1 * b2 + b1 * f2 + c1 * j2 + d1 * n2;
+    _p[2] = a1 * c2 + b1 * g2 + c1 * k2 + d1 * o2;
+    _p[3] = a1 * d2 + b1 * h2 + c1 * l2 + d1 * p2;
+
+    _p[4] = e1 * a2 + f1 * e2 + g1 * i2 + h1 * m2;
+    _p[5] = e1 * b2 + f1 * f2 + g1 * j2 + h1 * n2;
+    _p[6] = e1 * c2 + f1 * g2 + g1 * k2 + h1 * o2;
+    _p[7] = e1 * d2 + f1 * h2 + g1 * l2 + h1 * p2;
+
+    _p[8] = i1 * a2 + j1 * e2 + k1 * i2 + l1 * m2;
+    _p[9] = i1 * b2 + j1 * f2 + k1 * j2 + l1 * n2;
+    _p[10] = i1 * c2 + j1 * g2 + k1 * k2 + l1 * o2;
+    _p[11] = i1 * d2 + j1 * h2 + k1 * l2 + l1 * p2;
+
+    _p[12] = m1 * a2 + n1 * e2 + o1 * i2 + p1 * m2;
+    _p[13] = m1 * b2 + n1 * f2 + o1 * j2 + p1 * n2;
+    _p[14] = m1 * c2 + n1 * g2 + o1 * k2 + p1 * o2;
+    _p[15] = m1 * d2 + n1 * h2 + o1 * l2 + p1 * p2;
+
+    this._identityCalculated = false;
+    return this;
+  }
+
+  function multiply(matrix) {
+    var matrixProps = matrix.props;
+    return this.transform(
+      matrixProps[0],
+      matrixProps[1],
+      matrixProps[2],
+      matrixProps[3],
+      matrixProps[4],
+      matrixProps[5],
+      matrixProps[6],
+      matrixProps[7],
+      matrixProps[8],
+      matrixProps[9],
+      matrixProps[10],
+      matrixProps[11],
+      matrixProps[12],
+      matrixProps[13],
+      matrixProps[14],
+      matrixProps[15]
+    );
+  }
+
+  function isIdentity() {
+    if (!this._identityCalculated) {
+      this._identity = !(this.props[0] !== 1 || this.props[1] !== 0 || this.props[2] !== 0 || this.props[3] !== 0 || this.props[4] !== 0 || this.props[5] !== 1 || this.props[6] !== 0 || this.props[7] !== 0 || this.props[8] !== 0 || this.props[9] !== 0 || this.props[10] !== 1 || this.props[11] !== 0 || this.props[12] !== 0 || this.props[13] !== 0 || this.props[14] !== 0 || this.props[15] !== 1);
+      this._identityCalculated = true;
+    }
+    return this._identity;
+  }
+
+  function equals(matr) {
+    var i = 0;
+    while (i < 16) {
+      if (matr.props[i] !== this.props[i]) {
+        return false;
+      }
+      i += 1;
+    }
+    return true;
+  }
+
+  function clone(matr) {
+    var i;
+    for (i = 0; i < 16; i += 1) {
+      matr.props[i] = this.props[i];
+    }
+    return matr;
+  }
+
+  function cloneFromProps(props) {
+    var i;
+    for (i = 0; i < 16; i += 1) {
+      this.props[i] = props[i];
+    }
+  }
+
+  function applyToPoint(x, y, z) {
+    return {
+      x: x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],
+      y: x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],
+      z: x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14],
+    };
+    /* return {
+         x: x * me.a + y * me.c + me.e,
+         y: x * me.b + y * me.d + me.f
+         }; */
+  }
+  function applyToX(x, y, z) {
+    return x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12];
+  }
+  function applyToY(x, y, z) {
+    return x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13];
+  }
+  function applyToZ(x, y, z) {
+    return x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14];
+  }
+
+  function getInverseMatrix() {
+    var determinant = this.props[0] * this.props[5] - this.props[1] * this.props[4];
+    var a = this.props[5] / determinant;
+    var b = -this.props[1] / determinant;
+    var c = -this.props[4] / determinant;
+    var d = this.props[0] / determinant;
+    var e = (this.props[4] * this.props[13] - this.props[5] * this.props[12]) / determinant;
+    var f = -(this.props[0] * this.props[13] - this.props[1] * this.props[12]) / determinant;
+    var inverseMatrix = new Matrix();
+    inverseMatrix.props[0] = a;
+    inverseMatrix.props[1] = b;
+    inverseMatrix.props[4] = c;
+    inverseMatrix.props[5] = d;
+    inverseMatrix.props[12] = e;
+    inverseMatrix.props[13] = f;
+    return inverseMatrix;
+  }
+
+  function inversePoint(pt) {
+    var inverseMatrix = this.getInverseMatrix();
+    return inverseMatrix.applyToPointArray(pt[0], pt[1], pt[2] || 0);
+  }
+
+  function inversePoints(pts) {
+    var i;
+    var len = pts.length;
+    var retPts = [];
+    for (i = 0; i < len; i += 1) {
+      retPts[i] = inversePoint(pts[i]);
+    }
+    return retPts;
+  }
+
+  function applyToTriplePoints(pt1, pt2, pt3) {
+    var arr = createTypedArray('float32', 6);
+    if (this.isIdentity()) {
+      arr[0] = pt1[0];
+      arr[1] = pt1[1];
+      arr[2] = pt2[0];
+      arr[3] = pt2[1];
+      arr[4] = pt3[0];
+      arr[5] = pt3[1];
+    } else {
+      var p0 = this.props[0];
+      var p1 = this.props[1];
+      var p4 = this.props[4];
+      var p5 = this.props[5];
+      var p12 = this.props[12];
+      var p13 = this.props[13];
+      arr[0] = pt1[0] * p0 + pt1[1] * p4 + p12;
+      arr[1] = pt1[0] * p1 + pt1[1] * p5 + p13;
+      arr[2] = pt2[0] * p0 + pt2[1] * p4 + p12;
+      arr[3] = pt2[0] * p1 + pt2[1] * p5 + p13;
+      arr[4] = pt3[0] * p0 + pt3[1] * p4 + p12;
+      arr[5] = pt3[0] * p1 + pt3[1] * p5 + p13;
+    }
+    return arr;
+  }
+
+  function applyToPointArray(x, y, z) {
+    var arr;
+    if (this.isIdentity()) {
+      arr = [x, y, z];
+    } else {
+      arr = [
+        x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],
+        x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],
+        x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14],
+      ];
+    }
+    return arr;
+  }
+
+  function applyToPointStringified(x, y) {
+    if (this.isIdentity()) {
+      return x + ',' + y;
+    }
+    var _p = this.props;
+    return Math.round((x * _p[0] + y * _p[4] + _p[12]) * 100) / 100 + ',' + Math.round((x * _p[1] + y * _p[5] + _p[13]) * 100) / 100;
+  }
+
+  function toCSS() {
+    // Doesn't make much sense to add this optimization. If it is an identity matrix, it's very likely this will get called only once since it won't be keyframed.
+    /* if(this.isIdentity()) {
+            return '';
+        } */
+    var i = 0;
+    var props = this.props;
+    var cssValue = 'matrix3d(';
+    var v = 10000;
+    while (i < 16) {
+      cssValue += _rnd(props[i] * v) / v;
+      cssValue += i === 15 ? ')' : ',';
+      i += 1;
+    }
+    return cssValue;
+  }
+
+  function roundMatrixProperty(val) {
+    var v = 10000;
+    if ((val < 0.000001 && val > 0) || (val > -0.000001 && val < 0)) {
+      return _rnd(val * v) / v;
+    }
+    return val;
+  }
+
+  function to2dCSS() {
+    // Doesn't make much sense to add this optimization. If it is an identity matrix, it's very likely this will get called only once since it won't be keyframed.
+    /* if(this.isIdentity()) {
+            return '';
+        } */
+    var props = this.props;
+    var _a = roundMatrixProperty(props[0]);
+    var _b = roundMatrixProperty(props[1]);
+    var _c = roundMatrixProperty(props[4]);
+    var _d = roundMatrixProperty(props[5]);
+    var _e = roundMatrixProperty(props[12]);
+    var _f = roundMatrixProperty(props[13]);
+    return 'matrix(' + _a + ',' + _b + ',' + _c + ',' + _d + ',' + _e + ',' + _f + ')';
+  }
+
+  return function () {
+    this.reset = reset;
+    this.rotate = rotate;
+    this.rotateX = rotateX;
+    this.rotateY = rotateY;
+    this.rotateZ = rotateZ;
+    this.skew = skew;
+    this.skewFromAxis = skewFromAxis;
+    this.shear = shear;
+    this.scale = scale;
+    this.setTransform = setTransform;
+    this.translate = translate;
+    this.transform = transform;
+    this.multiply = multiply;
+    this.applyToPoint = applyToPoint;
+    this.applyToX = applyToX;
+    this.applyToY = applyToY;
+    this.applyToZ = applyToZ;
+    this.applyToPointArray = applyToPointArray;
+    this.applyToTriplePoints = applyToTriplePoints;
+    this.applyToPointStringified = applyToPointStringified;
+    this.toCSS = toCSS;
+    this.to2dCSS = to2dCSS;
+    this.clone = clone;
+    this.cloneFromProps = cloneFromProps;
+    this.equals = equals;
+    this.inversePoints = inversePoints;
+    this.inversePoint = inversePoint;
+    this.getInverseMatrix = getInverseMatrix;
+    this._t = this.transform;
+    this.isIdentity = isIdentity;
+    this._identity = true;
+    this._identityCalculated = false;
+
+    this.props = createTypedArray('float32', 16);
+    this.reset();
+  };
+}());
+
+export default Matrix;

package/player/js/EffectsManager.js

@@ -0,0 +1,83 @@
+import {
+  extendPrototype,
+} from './utils/functionExtensions';
+import {
+  SliderEffect,
+  AngleEffect,
+  ColorEffect,
+  PointEffect,
+  LayerIndexEffect,
+  MaskIndexEffect,
+  CheckboxEffect,
+  NoValueEffect,
+} from './effects/SliderEffect';
+import DynamicPropertyContainer from './utils/helpers/dynamicProperties';
+
+function EffectsManager(data, element) {
+  var effects = data.ef || [];
+  this.effectElements = [];
+  var i;
+  var len = effects.length;
+  var effectItem;
+  for (i = 0; i < len; i += 1) {
+    effectItem = new GroupEffect(effects[i], element);
+    this.effectElements.push(effectItem);
+  }
+}
+
+function GroupEffect(data, element) {
+  this.init(data, element);
+}
+
+extendPrototype([DynamicPropertyContainer], GroupEffect);
+
+GroupEffect.prototype.getValue = GroupEffect.prototype.iterateDynamicProperties;
+
+GroupEffect.prototype.init = function (data, element) {
+  this.data = data;
+  this.effectElements = [];
+  this.initDynamicPropertyContainer(element);
+  var i;
+  var len = this.data.ef.length;
+  var eff;
+  var effects = this.data.ef;
+  for (i = 0; i < len; i += 1) {
+    eff = null;
+    switch (effects[i].ty) {
+      case 0:
+        eff = new SliderEffect(effects[i], element, this);
+        break;
+      case 1:
+        eff = new AngleEffect(effects[i], element, this);
+        break;
+      case 2:
+        eff = new ColorEffect(effects[i], element, this);
+        break;
+      case 3:
+        eff = new PointEffect(effects[i], element, this);
+        break;
+      case 4:
+      case 7:
+        eff = new CheckboxEffect(effects[i], element, this);
+        break;
+      case 10:
+        eff = new LayerIndexEffect(effects[i], element, this);
+        break;
+      case 11:
+        eff = new MaskIndexEffect(effects[i], element, this);
+        break;
+      case 5:
+        eff = new EffectsManager(effects[i], element, this);
+        break;
+        // case 6:
+      default:
+        eff = new NoValueEffect(effects[i], element, this);
+        break;
+    }
+    if (eff) {
+      this.effectElements.push(eff);
+    }
+  }
+};
+
+export default EffectsManager;