first commit

node_modules/lottie-web/player/js/elements/helpers/FrameElement.js

@@ -0,0 +1,54 @@
+/**
+ * @file
+ * Handles element's layer frame update.
+ * Checks layer in point and out point
+ *
+ */
+
+function FrameElement() {}
+
+FrameElement.prototype = {
+  /**
+     * @function
+     * Initializes frame related properties.
+     *
+     */
+  initFrame: function () {
+    // set to true when inpoint is rendered
+    this._isFirstFrame = false;
+    // list of animated properties
+    this.dynamicProperties = [];
+    // If layer has been modified in current tick this will be true
+    this._mdf = false;
+  },
+  /**
+     * @function
+     * Calculates all dynamic values
+     *
+     * @param {number} num
+     * current frame number in Layer's time
+     * @param {boolean} isVisible
+     * if layers is currently in range
+     *
+     */
+  prepareProperties: function (num, isVisible) {
+    var i;
+    var len = this.dynamicProperties.length;
+    for (i = 0; i < len; i += 1) {
+      if (isVisible || (this._isParent && this.dynamicProperties[i].propType === 'transform')) {
+        this.dynamicProperties[i].getValue();
+        if (this.dynamicProperties[i]._mdf) {
+          this.globalData._mdf = true;
+          this._mdf = true;
+        }
+      }
+    }
+  },
+  addDynamicProperty: function (prop) {
+    if (this.dynamicProperties.indexOf(prop) === -1) {
+      this.dynamicProperties.push(prop);
+    }
+  },
+};
+
+export default FrameElement;

node_modules/lottie-web/player/js/elements/helpers/HierarchyElement.js

@@ -0,0 +1,52 @@
+/**
+ * @file
+ * Handles AE's layer parenting property.
+ *
+ */
+
+function HierarchyElement() {}
+
+HierarchyElement.prototype = {
+  /**
+     * @function
+     * Initializes hierarchy properties
+     *
+     */
+  initHierarchy: function () {
+    // element's parent list
+    this.hierarchy = [];
+    // if element is parent of another layer _isParent will be true
+    this._isParent = false;
+    this.checkParenting();
+  },
+  /**
+     * @function
+     * Sets layer's hierarchy.
+     * @param {array} hierarch
+     * layer's parent list
+     *
+     */
+  setHierarchy: function (hierarchy) {
+    this.hierarchy = hierarchy;
+  },
+  /**
+     * @function
+     * Sets layer as parent.
+     *
+     */
+  setAsParent: function () {
+    this._isParent = true;
+  },
+  /**
+     * @function
+     * Searches layer's parenting chain
+     *
+     */
+  checkParenting: function () {
+    if (this.data.parent !== undefined) {
+      this.comp.buildElementParenting(this, this.data.parent, []);
+    }
+  },
+};
+
+export default HierarchyElement;

node_modules/lottie-web/player/js/elements/helpers/RenderableDOMElement.js

@@ -0,0 +1,72 @@
+import {
+  extendPrototype,
+  createProxyFunction,
+} from '../../utils/functionExtensions';
+import RenderableElement from './RenderableElement';
+
+function RenderableDOMElement() {}
+
+(function () {
+  var _prototype = {
+    initElement: function (data, globalData, comp) {
+      this.initFrame();
+      this.initBaseData(data, globalData, comp);
+      this.initTransform(data, globalData, comp);
+      this.initHierarchy();
+      this.initRenderable();
+      this.initRendererElement();
+      this.createContainerElements();
+      this.createRenderableComponents();
+      this.createContent();
+      this.hide();
+    },
+    hide: function () {
+      // console.log('HIDE', this);
+      if (!this.hidden && (!this.isInRange || this.isTransparent)) {
+        var elem = this.baseElement || this.layerElement;
+        elem.style.display = 'none';
+        this.hidden = true;
+      }
+    },
+    show: function () {
+      // console.log('SHOW', this);
+      if (this.isInRange && !this.isTransparent) {
+        if (!this.data.hd) {
+          var elem = this.baseElement || this.layerElement;
+          elem.style.display = 'block';
+        }
+        this.hidden = false;
+        this._isFirstFrame = true;
+      }
+    },
+    renderFrame: function () {
+      // If it is exported as hidden (data.hd === true) no need to render
+      // If it is not visible no need to render
+      if (this.data.hd || this.hidden) {
+        return;
+      }
+      this.renderTransform();
+      this.renderRenderable();
+      this.renderLocalTransform();
+      this.renderElement();
+      this.renderInnerContent();
+      if (this._isFirstFrame) {
+        this._isFirstFrame = false;
+      }
+    },
+    renderInnerContent: function () {},
+    prepareFrame: function (num) {
+      this._mdf = false;
+      this.prepareRenderableFrame(num);
+      this.prepareProperties(num, this.isInRange);
+      this.checkTransparency();
+    },
+    destroy: function () {
+      this.innerElem = null;
+      this.destroyBaseElement();
+    },
+  };
+  extendPrototype([RenderableElement, createProxyFunction(_prototype)], RenderableDOMElement);
+}());
+
+export default RenderableDOMElement;

node_modules/lottie-web/player/js/elements/helpers/RenderableElement.js

@@ -0,0 +1,87 @@
+function RenderableElement() {
+
+}
+
+RenderableElement.prototype = {
+  initRenderable: function () {
+    // layer's visibility related to inpoint and outpoint. Rename isVisible to isInRange
+    this.isInRange = false;
+    // layer's display state
+    this.hidden = false;
+    // If layer's transparency equals 0, it can be hidden
+    this.isTransparent = false;
+    // list of animated components
+    this.renderableComponents = [];
+  },
+  addRenderableComponent: function (component) {
+    if (this.renderableComponents.indexOf(component) === -1) {
+      this.renderableComponents.push(component);
+    }
+  },
+  removeRenderableComponent: function (component) {
+    if (this.renderableComponents.indexOf(component) !== -1) {
+      this.renderableComponents.splice(this.renderableComponents.indexOf(component), 1);
+    }
+  },
+  prepareRenderableFrame: function (num) {
+    this.checkLayerLimits(num);
+  },
+  checkTransparency: function () {
+    if (this.finalTransform.mProp.o.v <= 0) {
+      if (!this.isTransparent && this.globalData.renderConfig.hideOnTransparent) {
+        this.isTransparent = true;
+        this.hide();
+      }
+    } else if (this.isTransparent) {
+      this.isTransparent = false;
+      this.show();
+    }
+  },
+  /**
+     * @function
+     * Initializes frame related properties.
+     *
+     * @param {number} num
+     * current frame number in Layer's time
+     *
+     */
+  checkLayerLimits: function (num) {
+    if (this.data.ip - this.data.st <= num && this.data.op - this.data.st > num) {
+      if (this.isInRange !== true) {
+        this.globalData._mdf = true;
+        this._mdf = true;
+        this.isInRange = true;
+        this.show();
+      }
+    } else if (this.isInRange !== false) {
+      this.globalData._mdf = true;
+      this.isInRange = false;
+      this.hide();
+    }
+  },
+  renderRenderable: function () {
+    var i;
+    var len = this.renderableComponents.length;
+    for (i = 0; i < len; i += 1) {
+      this.renderableComponents[i].renderFrame(this._isFirstFrame);
+    }
+    /* this.maskManager.renderFrame(this.finalTransform.mat);
+        this.renderableEffectsManager.renderFrame(this._isFirstFrame); */
+  },
+  sourceRectAtTime: function () {
+    return {
+      top: 0,
+      left: 0,
+      width: 100,
+      height: 100,
+    };
+  },
+  getLayerSize: function () {
+    if (this.data.ty === 5) {
+      return { w: this.data.textData.width, h: this.data.textData.height };
+    }
+    return { w: this.data.width, h: this.data.height };
+  },
+};
+
+export default RenderableElement;

node_modules/lottie-web/player/js/elements/helpers/TransformElement.js

@@ -0,0 +1,140 @@
+import Matrix from '../../3rd_party/transformation-matrix';
+import TransformPropertyFactory from '../../utils/TransformProperty';
+import effectTypes from '../../utils/helpers/effectTypes';
+
+function TransformElement() {}
+
+TransformElement.prototype = {
+  initTransform: function () {
+    var mat = new Matrix();
+    this.finalTransform = {
+      mProp: this.data.ks ? TransformPropertyFactory.getTransformProperty(this, this.data.ks, this) : { o: 0 },
+      _matMdf: false,
+      _localMatMdf: false,
+      _opMdf: false,
+      mat: mat,
+      localMat: mat,
+      localOpacity: 1,
+    };
+    if (this.data.ao) {
+      this.finalTransform.mProp.autoOriented = true;
+    }
+
+    // TODO: check TYPE 11: Guided elements
+    if (this.data.ty !== 11) {
+      // this.createElements();
+    }
+  },
+  renderTransform: function () {
+    this.finalTransform._opMdf = this.finalTransform.mProp.o._mdf || this._isFirstFrame;
+    this.finalTransform._matMdf = this.finalTransform.mProp._mdf || this._isFirstFrame;
+
+    if (this.hierarchy) {
+      var mat;
+      var finalMat = this.finalTransform.mat;
+      var i = 0;
+      var len = this.hierarchy.length;
+      // Checking if any of the transformation matrices in the hierarchy chain has changed.
+      if (!this.finalTransform._matMdf) {
+        while (i < len) {
+          if (this.hierarchy[i].finalTransform.mProp._mdf) {
+            this.finalTransform._matMdf = true;
+            break;
+          }
+          i += 1;
+        }
+      }
+
+      if (this.finalTransform._matMdf) {
+        mat = this.finalTransform.mProp.v.props;
+        finalMat.cloneFromProps(mat);
+        for (i = 0; i < len; i += 1) {
+          finalMat.multiply(this.hierarchy[i].finalTransform.mProp.v);
+        }
+      }
+    }
+    if (this.finalTransform._matMdf) {
+      this.finalTransform._localMatMdf = this.finalTransform._matMdf;
+    }
+    if (this.finalTransform._opMdf) {
+      this.finalTransform.localOpacity = this.finalTransform.mProp.o.v;
+    }
+  },
+  renderLocalTransform: function () {
+    if (this.localTransforms) {
+      var i = 0;
+      var len = this.localTransforms.length;
+      this.finalTransform._localMatMdf = this.finalTransform._matMdf;
+      if (!this.finalTransform._localMatMdf || !this.finalTransform._opMdf) {
+        while (i < len) {
+          if (this.localTransforms[i]._mdf) {
+            this.finalTransform._localMatMdf = true;
+          }
+          if (this.localTransforms[i]._opMdf && !this.finalTransform._opMdf) {
+            this.finalTransform.localOpacity = this.finalTransform.mProp.o.v;
+            this.finalTransform._opMdf = true;
+          }
+          i += 1;
+        }
+      }
+      if (this.finalTransform._localMatMdf) {
+        var localMat = this.finalTransform.localMat;
+        this.localTransforms[0].matrix.clone(localMat);
+        for (i = 1; i < len; i += 1) {
+          var lmat = this.localTransforms[i].matrix;
+          localMat.multiply(lmat);
+        }
+        localMat.multiply(this.finalTransform.mat);
+      }
+      if (this.finalTransform._opMdf) {
+        var localOp = this.finalTransform.localOpacity;
+        for (i = 0; i < len; i += 1) {
+          localOp *= this.localTransforms[i].opacity * 0.01;
+        }
+        this.finalTransform.localOpacity = localOp;
+      }
+    }
+  },
+  searchEffectTransforms: function () {
+    if (this.renderableEffectsManager) {
+      var transformEffects = this.renderableEffectsManager.getEffects(effectTypes.TRANSFORM_EFFECT);
+      if (transformEffects.length) {
+        this.localTransforms = [];
+        this.finalTransform.localMat = new Matrix();
+        var i = 0;
+        var len = transformEffects.length;
+        for (i = 0; i < len; i += 1) {
+          this.localTransforms.push(transformEffects[i]);
+        }
+      }
+    }
+  },
+  globalToLocal: function (pt) {
+    var transforms = [];
+    transforms.push(this.finalTransform);
+    var flag = true;
+    var comp = this.comp;
+    while (flag) {
+      if (comp.finalTransform) {
+        if (comp.data.hasMask) {
+          transforms.splice(0, 0, comp.finalTransform);
+        }
+        comp = comp.comp;
+      } else {
+        flag = false;
+      }
+    }
+    var i;
+    var len = transforms.length;
+    var ptNew;
+    for (i = 0; i < len; i += 1) {
+      ptNew = transforms[i].mat.applyToPointArray(0, 0, 0);
+      // ptNew = transforms[i].mat.applyToPointArray(pt[0],pt[1],pt[2]);
+      pt = [pt[0] - ptNew[0], pt[1] - ptNew[1], 0];
+    }
+    return pt;
+  },
+  mHelper: new Matrix(),
+};
+
+export default TransformElement;

node_modules/lottie-web/player/js/elements/helpers/shapes/CVShapeData.js

@@ -0,0 +1,33 @@
+import ShapePropertyFactory from '../../../utils/shapes/ShapeProperty';
+import SVGShapeData from './SVGShapeData';
+
+function CVShapeData(element, data, styles, transformsManager) {
+  this.styledShapes = [];
+  this.tr = [0, 0, 0, 0, 0, 0];
+  var ty = 4;
+  if (data.ty === 'rc') {
+    ty = 5;
+  } else if (data.ty === 'el') {
+    ty = 6;
+  } else if (data.ty === 'sr') {
+    ty = 7;
+  }
+  this.sh = ShapePropertyFactory.getShapeProp(element, data, ty, element);
+  var i;
+  var len = styles.length;
+  var styledShape;
+  for (i = 0; i < len; i += 1) {
+    if (!styles[i].closed) {
+      styledShape = {
+        transforms: transformsManager.addTransformSequence(styles[i].transforms),
+        trNodes: [],
+      };
+      this.styledShapes.push(styledShape);
+      styles[i].elements.push(styledShape);
+    }
+  }
+}
+
+CVShapeData.prototype.setAsAnimated = SVGShapeData.prototype.setAsAnimated;
+
+export default CVShapeData;

node_modules/lottie-web/player/js/elements/helpers/shapes/ProcessedElement.js

@@ -0,0 +1,6 @@
+function ProcessedElement(element, position) {
+  this.elem = element;
+  this.pos = position;
+}
+
+export default ProcessedElement;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGElementsRenderer.js

@@ -0,0 +1,239 @@
+import Matrix from '../../../3rd_party/transformation-matrix';
+import buildShapeString from '../../../utils/shapes/shapePathBuilder';
+import { bmFloor } from '../../../utils/common';
+
+const SVGElementsRenderer = (function () {
+  var _identityMatrix = new Matrix();
+  var _matrixHelper = new Matrix();
+
+  var ob = {
+    createRenderFunction: createRenderFunction,
+  };
+
+  function createRenderFunction(data) {
+    switch (data.ty) {
+      case 'fl':
+        return renderFill;
+      case 'gf':
+        return renderGradient;
+      case 'gs':
+        return renderGradientStroke;
+      case 'st':
+        return renderStroke;
+      case 'sh':
+      case 'el':
+      case 'rc':
+      case 'sr':
+        return renderPath;
+      case 'tr':
+        return renderContentTransform;
+      case 'no':
+        return renderNoop;
+      default:
+        return null;
+    }
+  }
+
+  function renderContentTransform(styleData, itemData, isFirstFrame) {
+    if (isFirstFrame || itemData.transform.op._mdf) {
+      itemData.transform.container.setAttribute('opacity', itemData.transform.op.v);
+    }
+    if (isFirstFrame || itemData.transform.mProps._mdf) {
+      itemData.transform.container.setAttribute('transform', itemData.transform.mProps.v.to2dCSS());
+    }
+  }
+
+  function renderNoop() {
+
+  }
+
+  function renderPath(styleData, itemData, isFirstFrame) {
+    var j;
+    var jLen;
+    var pathStringTransformed;
+    var redraw;
+    var pathNodes;
+    var l;
+    var lLen = itemData.styles.length;
+    var lvl = itemData.lvl;
+    var paths;
+    var mat;
+    var iterations;
+    var k;
+    for (l = 0; l < lLen; l += 1) {
+      redraw = itemData.sh._mdf || isFirstFrame;
+      if (itemData.styles[l].lvl < lvl) {
+        mat = _matrixHelper.reset();
+        iterations = lvl - itemData.styles[l].lvl;
+        k = itemData.transformers.length - 1;
+        while (!redraw && iterations > 0) {
+          redraw = itemData.transformers[k].mProps._mdf || redraw;
+          iterations -= 1;
+          k -= 1;
+        }
+        if (redraw) {
+          iterations = lvl - itemData.styles[l].lvl;
+          k = itemData.transformers.length - 1;
+          while (iterations > 0) {
+            mat.multiply(itemData.transformers[k].mProps.v);
+            iterations -= 1;
+            k -= 1;
+          }
+        }
+      } else {
+        mat = _identityMatrix;
+      }
+      paths = itemData.sh.paths;
+      jLen = paths._length;
+      if (redraw) {
+        pathStringTransformed = '';
+        for (j = 0; j < jLen; j += 1) {
+          pathNodes = paths.shapes[j];
+          if (pathNodes && pathNodes._length) {
+            pathStringTransformed += buildShapeString(pathNodes, pathNodes._length, pathNodes.c, mat);
+          }
+        }
+        itemData.caches[l] = pathStringTransformed;
+      } else {
+        pathStringTransformed = itemData.caches[l];
+      }
+      itemData.styles[l].d += styleData.hd === true ? '' : pathStringTransformed;
+      itemData.styles[l]._mdf = redraw || itemData.styles[l]._mdf;
+    }
+  }
+
+  function renderFill(styleData, itemData, isFirstFrame) {
+    var styleElem = itemData.style;
+
+    if (itemData.c._mdf || isFirstFrame) {
+      styleElem.pElem.setAttribute('fill', 'rgb(' + bmFloor(itemData.c.v[0]) + ',' + bmFloor(itemData.c.v[1]) + ',' + bmFloor(itemData.c.v[2]) + ')');
+    }
+    if (itemData.o._mdf || isFirstFrame) {
+      styleElem.pElem.setAttribute('fill-opacity', itemData.o.v);
+    }
+  }
+
+  function renderGradientStroke(styleData, itemData, isFirstFrame) {
+    renderGradient(styleData, itemData, isFirstFrame);
+    renderStroke(styleData, itemData, isFirstFrame);
+  }
+
+  function renderGradient(styleData, itemData, isFirstFrame) {
+    var gfill = itemData.gf;
+    var hasOpacity = itemData.g._hasOpacity;
+    var pt1 = itemData.s.v;
+    var pt2 = itemData.e.v;
+
+    if (itemData.o._mdf || isFirstFrame) {
+      var attr = styleData.ty === 'gf' ? 'fill-opacity' : 'stroke-opacity';
+      itemData.style.pElem.setAttribute(attr, itemData.o.v);
+    }
+    if (itemData.s._mdf || isFirstFrame) {
+      var attr1 = styleData.t === 1 ? 'x1' : 'cx';
+      var attr2 = attr1 === 'x1' ? 'y1' : 'cy';
+      gfill.setAttribute(attr1, pt1[0]);
+      gfill.setAttribute(attr2, pt1[1]);
+      if (hasOpacity && !itemData.g._collapsable) {
+        itemData.of.setAttribute(attr1, pt1[0]);
+        itemData.of.setAttribute(attr2, pt1[1]);
+      }
+    }
+    var stops;
+    var i;
+    var len;
+    var stop;
+    if (itemData.g._cmdf || isFirstFrame) {
+      stops = itemData.cst;
+      var cValues = itemData.g.c;
+      len = stops.length;
+      for (i = 0; i < len; i += 1) {
+        stop = stops[i];
+        stop.setAttribute('offset', cValues[i * 4] + '%');
+        stop.setAttribute('stop-color', 'rgb(' + cValues[i * 4 + 1] + ',' + cValues[i * 4 + 2] + ',' + cValues[i * 4 + 3] + ')');
+      }
+    }
+    if (hasOpacity && (itemData.g._omdf || isFirstFrame)) {
+      var oValues = itemData.g.o;
+      if (itemData.g._collapsable) {
+        stops = itemData.cst;
+      } else {
+        stops = itemData.ost;
+      }
+      len = stops.length;
+      for (i = 0; i < len; i += 1) {
+        stop = stops[i];
+        if (!itemData.g._collapsable) {
+          stop.setAttribute('offset', oValues[i * 2] + '%');
+        }
+        stop.setAttribute('stop-opacity', oValues[i * 2 + 1]);
+      }
+    }
+    if (styleData.t === 1) {
+      if (itemData.e._mdf || isFirstFrame) {
+        gfill.setAttribute('x2', pt2[0]);
+        gfill.setAttribute('y2', pt2[1]);
+        if (hasOpacity && !itemData.g._collapsable) {
+          itemData.of.setAttribute('x2', pt2[0]);
+          itemData.of.setAttribute('y2', pt2[1]);
+        }
+      }
+    } else {
+      var rad;
+      if (itemData.s._mdf || itemData.e._mdf || isFirstFrame) {
+        rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
+        gfill.setAttribute('r', rad);
+        if (hasOpacity && !itemData.g._collapsable) {
+          itemData.of.setAttribute('r', rad);
+        }
+      }
+      if (itemData.e._mdf || itemData.h._mdf || itemData.a._mdf || isFirstFrame) {
+        if (!rad) {
+          rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
+        }
+        var ang = Math.atan2(pt2[1] - pt1[1], pt2[0] - pt1[0]);
+
+        var percent = itemData.h.v;
+        if (percent >= 1) {
+          percent = 0.99;
+        } else if (percent <= -1) {
+          percent = -0.99;
+        }
+        var dist = rad * percent;
+        var x = Math.cos(ang + itemData.a.v) * dist + pt1[0];
+        var y = Math.sin(ang + itemData.a.v) * dist + pt1[1];
+        gfill.setAttribute('fx', x);
+        gfill.setAttribute('fy', y);
+        if (hasOpacity && !itemData.g._collapsable) {
+          itemData.of.setAttribute('fx', x);
+          itemData.of.setAttribute('fy', y);
+        }
+      }
+      // gfill.setAttribute('fy','200');
+    }
+  }
+
+  function renderStroke(styleData, itemData, isFirstFrame) {
+    var styleElem = itemData.style;
+    var d = itemData.d;
+    if (d && (d._mdf || isFirstFrame) && d.dashStr) {
+      styleElem.pElem.setAttribute('stroke-dasharray', d.dashStr);
+      styleElem.pElem.setAttribute('stroke-dashoffset', d.dashoffset[0]);
+    }
+    if (itemData.c && (itemData.c._mdf || isFirstFrame)) {
+      styleElem.pElem.setAttribute('stroke', 'rgb(' + bmFloor(itemData.c.v[0]) + ',' + bmFloor(itemData.c.v[1]) + ',' + bmFloor(itemData.c.v[2]) + ')');
+    }
+    if (itemData.o._mdf || isFirstFrame) {
+      styleElem.pElem.setAttribute('stroke-opacity', itemData.o.v);
+    }
+    if (itemData.w._mdf || isFirstFrame) {
+      styleElem.pElem.setAttribute('stroke-width', itemData.w.v);
+      if (styleElem.msElem) {
+        styleElem.msElem.setAttribute('stroke-width', itemData.w.v);
+      }
+    }
+  }
+
+  return ob;
+}());
+
+export default SVGElementsRenderer;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGFillStyleData.js

@@ -0,0 +1,18 @@
+import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
+
+import {
+  extendPrototype,
+} from '../../../utils/functionExtensions';
+import PropertyFactory from '../../../utils/PropertyFactory';
+
+function SVGFillStyleData(elem, data, styleOb) {
+  this.initDynamicPropertyContainer(elem);
+  this.getValue = this.iterateDynamicProperties;
+  this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);
+  this.c = PropertyFactory.getProp(elem, data.c, 1, 255, this);
+  this.style = styleOb;
+}
+
+extendPrototype([DynamicPropertyContainer], SVGFillStyleData);
+
+export default SVGFillStyleData;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGGradientFillStyleData.js

@@ -0,0 +1,100 @@
+import {
+  degToRads,
+  createElementID,
+} from '../../../utils/common';
+import { getLocationHref } from '../../../main';
+import {
+  extendPrototype,
+} from '../../../utils/functionExtensions';
+import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
+import PropertyFactory from '../../../utils/PropertyFactory';
+import createNS from '../../../utils/helpers/svg_elements';
+import GradientProperty from '../../../utils/shapes/GradientProperty';
+import {
+  lineCapEnum,
+  lineJoinEnum,
+} from '../../../utils/helpers/shapeEnums';
+
+function SVGGradientFillStyleData(elem, data, styleOb) {
+  this.initDynamicPropertyContainer(elem);
+  this.getValue = this.iterateDynamicProperties;
+  this.initGradientData(elem, data, styleOb);
+}
+
+SVGGradientFillStyleData.prototype.initGradientData = function (elem, data, styleOb) {
+  this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);
+  this.s = PropertyFactory.getProp(elem, data.s, 1, null, this);
+  this.e = PropertyFactory.getProp(elem, data.e, 1, null, this);
+  this.h = PropertyFactory.getProp(elem, data.h || { k: 0 }, 0, 0.01, this);
+  this.a = PropertyFactory.getProp(elem, data.a || { k: 0 }, 0, degToRads, this);
+  this.g = new GradientProperty(elem, data.g, this);
+  this.style = styleOb;
+  this.stops = [];
+  this.setGradientData(styleOb.pElem, data);
+  this.setGradientOpacity(data, styleOb);
+  this._isAnimated = !!this._isAnimated;
+};
+
+SVGGradientFillStyleData.prototype.setGradientData = function (pathElement, data) {
+  var gradientId = createElementID();
+  var gfill = createNS(data.t === 1 ? 'linearGradient' : 'radialGradient');
+  gfill.setAttribute('id', gradientId);
+  gfill.setAttribute('spreadMethod', 'pad');
+  gfill.setAttribute('gradientUnits', 'userSpaceOnUse');
+  var stops = [];
+  var stop;
+  var j;
+  var jLen;
+  jLen = data.g.p * 4;
+  for (j = 0; j < jLen; j += 4) {
+    stop = createNS('stop');
+    gfill.appendChild(stop);
+    stops.push(stop);
+  }
+  pathElement.setAttribute(data.ty === 'gf' ? 'fill' : 'stroke', 'url(' + getLocationHref() + '#' + gradientId + ')');
+  this.gf = gfill;
+  this.cst = stops;
+};
+
+SVGGradientFillStyleData.prototype.setGradientOpacity = function (data, styleOb) {
+  if (this.g._hasOpacity && !this.g._collapsable) {
+    var stop;
+    var j;
+    var jLen;
+    var mask = createNS('mask');
+    var maskElement = createNS('path');
+    mask.appendChild(maskElement);
+    var opacityId = createElementID();
+    var maskId = createElementID();
+    mask.setAttribute('id', maskId);
+    var opFill = createNS(data.t === 1 ? 'linearGradient' : 'radialGradient');
+    opFill.setAttribute('id', opacityId);
+    opFill.setAttribute('spreadMethod', 'pad');
+    opFill.setAttribute('gradientUnits', 'userSpaceOnUse');
+    jLen = data.g.k.k[0].s ? data.g.k.k[0].s.length : data.g.k.k.length;
+    var stops = this.stops;
+    for (j = data.g.p * 4; j < jLen; j += 2) {
+      stop = createNS('stop');
+      stop.setAttribute('stop-color', 'rgb(255,255,255)');
+      opFill.appendChild(stop);
+      stops.push(stop);
+    }
+    maskElement.setAttribute(data.ty === 'gf' ? 'fill' : 'stroke', 'url(' + getLocationHref() + '#' + opacityId + ')');
+    if (data.ty === 'gs') {
+      maskElement.setAttribute('stroke-linecap', lineCapEnum[data.lc || 2]);
+      maskElement.setAttribute('stroke-linejoin', lineJoinEnum[data.lj || 2]);
+      if (data.lj === 1) {
+        maskElement.setAttribute('stroke-miterlimit', data.ml);
+      }
+    }
+    this.of = opFill;
+    this.ms = mask;
+    this.ost = stops;
+    this.maskId = maskId;
+    styleOb.msElem = maskElement;
+  }
+};
+
+extendPrototype([DynamicPropertyContainer], SVGGradientFillStyleData);
+
+export default SVGGradientFillStyleData;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGGradientStrokeStyleData.js

@@ -0,0 +1,20 @@
+import {
+  extendPrototype,
+} from '../../../utils/functionExtensions';
+import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
+import PropertyFactory from '../../../utils/PropertyFactory';
+import DashProperty from '../../../utils/shapes/DashProperty';
+import SVGGradientFillStyleData from './SVGGradientFillStyleData';
+
+function SVGGradientStrokeStyleData(elem, data, styleOb) {
+  this.initDynamicPropertyContainer(elem);
+  this.getValue = this.iterateDynamicProperties;
+  this.w = PropertyFactory.getProp(elem, data.w, 0, null, this);
+  this.d = new DashProperty(elem, data.d || {}, 'svg', this);
+  this.initGradientData(elem, data, styleOb);
+  this._isAnimated = !!this._isAnimated;
+}
+
+extendPrototype([SVGGradientFillStyleData, DynamicPropertyContainer], SVGGradientStrokeStyleData);
+
+export default SVGGradientStrokeStyleData;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGNoStyleData.js

@@ -0,0 +1,15 @@
+import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
+
+import {
+  extendPrototype,
+} from '../../../utils/functionExtensions';
+
+function SVGNoStyleData(elem, data, styleOb) {
+  this.initDynamicPropertyContainer(elem);
+  this.getValue = this.iterateDynamicProperties;
+  this.style = styleOb;
+}
+
+extendPrototype([DynamicPropertyContainer], SVGNoStyleData);
+
+export default SVGNoStyleData;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGShapeData.js

@@ -0,0 +1,28 @@
+function SVGShapeData(transformers, level, shape) {
+  this.caches = [];
+  this.styles = [];
+  this.transformers = transformers;
+  this.lStr = '';
+  this.sh = shape;
+  this.lvl = level;
+  // TODO find if there are some cases where _isAnimated can be false.
+  // For now, since shapes add up with other shapes. They have to be calculated every time.
+  // One way of finding out is checking if all styles associated to this shape depend only of this shape
+  this._isAnimated = !!shape.k;
+  // TODO: commenting this for now since all shapes are animated
+  var i = 0;
+  var len = transformers.length;
+  while (i < len) {
+    if (transformers[i].mProps.dynamicProperties.length) {
+      this._isAnimated = true;
+      break;
+    }
+    i += 1;
+  }
+}
+
+SVGShapeData.prototype.setAsAnimated = function () {
+  this._isAnimated = true;
+};
+
+export default SVGShapeData;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGStrokeStyleData.js

@@ -0,0 +1,21 @@
+import {
+  extendPrototype,
+} from '../../../utils/functionExtensions';
+import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
+import PropertyFactory from '../../../utils/PropertyFactory';
+import DashProperty from '../../../utils/shapes/DashProperty';
+
+function SVGStrokeStyleData(elem, data, styleOb) {
+  this.initDynamicPropertyContainer(elem);
+  this.getValue = this.iterateDynamicProperties;
+  this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);
+  this.w = PropertyFactory.getProp(elem, data.w, 0, null, this);
+  this.d = new DashProperty(elem, data.d || {}, 'svg', this);
+  this.c = PropertyFactory.getProp(elem, data.c, 1, 255, this);
+  this.style = styleOb;
+  this._isAnimated = !!this._isAnimated;
+}
+
+extendPrototype([DynamicPropertyContainer], SVGStrokeStyleData);
+
+export default SVGStrokeStyleData;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGStyleData.js

@@ -0,0 +1,19 @@
+import createNS from '../../../utils/helpers/svg_elements';
+
+function SVGStyleData(data, level) {
+  this.data = data;
+  this.type = data.ty;
+  this.d = '';
+  this.lvl = level;
+  this._mdf = false;
+  this.closed = data.hd === true;
+  this.pElem = createNS('path');
+  this.msElem = null;
+}
+
+SVGStyleData.prototype.reset = function () {
+  this.d = '';
+  this._mdf = false;
+};
+
+export default SVGStyleData;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGTransformData.js

@@ -0,0 +1,11 @@
+function SVGTransformData(mProps, op, container) {
+  this.transform = {
+    mProps: mProps,
+    op: op,
+    container: container,
+  };
+  this.elements = [];
+  this._isAnimated = this.transform.mProps.dynamicProperties.length || this.transform.op.effectsSequence.length;
+}
+
+export default SVGTransformData;

node_modules/lottie-web/player/js/elements/helpers/shapes/ShapeElement.js

@@ -0,0 +1,5 @@
+function ShapeElementData() {
+
+}
+
+export default ShapeElementData;

node_modules/lottie-web/player/js/elements/helpers/shapes/ShapeGroupData.js

@@ -0,0 +1,9 @@
+import createNS from '../../../utils/helpers/svg_elements';
+
+function ShapeGroupData() {
+  this.it = [];
+  this.prevViewData = [];
+  this.gr = createNS('g');
+}
+
+export default ShapeGroupData;

node_modules/lottie-web/player/js/elements/helpers/shapes/ShapeTransformManager.js

@@ -0,0 +1,61 @@
+import Matrix from '../../../3rd_party/transformation-matrix';
+
+function ShapeTransformManager() {
+  this.sequences = {};
+  this.sequenceList = [];
+  this.transform_key_count = 0;
+}
+
+ShapeTransformManager.prototype = {
+  addTransformSequence: function (transforms) {
+    var i;
+    var len = transforms.length;
+    var key = '_';
+    for (i = 0; i < len; i += 1) {
+      key += transforms[i].transform.key + '_';
+    }
+    var sequence = this.sequences[key];
+    if (!sequence) {
+      sequence = {
+        transforms: [].concat(transforms),
+        finalTransform: new Matrix(),
+        _mdf: false,
+      };
+      this.sequences[key] = sequence;
+      this.sequenceList.push(sequence);
+    }
+    return sequence;
+  },
+  processSequence: function (sequence, isFirstFrame) {
+    var i = 0;
+    var len = sequence.transforms.length;
+    var _mdf = isFirstFrame;
+    while (i < len && !isFirstFrame) {
+      if (sequence.transforms[i].transform.mProps._mdf) {
+        _mdf = true;
+        break;
+      }
+      i += 1;
+    }
+    if (_mdf) {
+      sequence.finalTransform.reset();
+      for (i = len - 1; i >= 0; i -= 1) {
+        sequence.finalTransform.multiply(sequence.transforms[i].transform.mProps.v);
+      }
+    }
+    sequence._mdf = _mdf;
+  },
+  processSequences: function (isFirstFrame) {
+    var i;
+    var len = this.sequenceList.length;
+    for (i = 0; i < len; i += 1) {
+      this.processSequence(this.sequenceList[i], isFirstFrame);
+    }
+  },
+  getNewKey: function () {
+    this.transform_key_count += 1;
+    return '_' + this.transform_key_count;
+  },
+};
+
+export default ShapeTransformManager;