first commit

node_modules/lottie-web/player/js/elements/htmlElements/HBaseElement.js

@@ -0,0 +1,88 @@
+import {
+  styleDiv,
+} from '../../utils/common';
+import createNS from '../../utils/helpers/svg_elements';
+import createTag from '../../utils/helpers/html_elements';
+import BaseRenderer from '../../renderers/BaseRenderer';
+import SVGBaseElement from '../svgElements/SVGBaseElement';
+import CVEffects from '../canvasElements/CVEffects';
+import MaskElement from '../../mask';
+
+function HBaseElement() {}
+HBaseElement.prototype = {
+  checkBlendMode: function () {},
+  initRendererElement: function () {
+    this.baseElement = createTag(this.data.tg || 'div');
+    if (this.data.hasMask) {
+      this.svgElement = createNS('svg');
+      this.layerElement = createNS('g');
+      this.maskedElement = this.layerElement;
+      this.svgElement.appendChild(this.layerElement);
+      this.baseElement.appendChild(this.svgElement);
+    } else {
+      this.layerElement = this.baseElement;
+    }
+    styleDiv(this.baseElement);
+  },
+  createContainerElements: function () {
+    this.renderableEffectsManager = new CVEffects(this);
+    this.transformedElement = this.baseElement;
+    this.maskedElement = this.layerElement;
+    if (this.data.ln) {
+      this.layerElement.setAttribute('id', this.data.ln);
+    }
+    if (this.data.cl) {
+      this.layerElement.setAttribute('class', this.data.cl);
+    }
+    if (this.data.bm !== 0) {
+      this.setBlendMode();
+    }
+  },
+  renderElement: function () {
+    var transformedElementStyle = this.transformedElement ? this.transformedElement.style : {};
+    if (this.finalTransform._matMdf) {
+      var matrixValue = this.finalTransform.mat.toCSS();
+      transformedElementStyle.transform = matrixValue;
+      transformedElementStyle.webkitTransform = matrixValue;
+    }
+    if (this.finalTransform._opMdf) {
+      transformedElementStyle.opacity = this.finalTransform.mProp.o.v;
+    }
+  },
+  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.renderElement();
+    this.renderInnerContent();
+    if (this._isFirstFrame) {
+      this._isFirstFrame = false;
+    }
+  },
+  destroy: function () {
+    this.layerElement = null;
+    this.transformedElement = null;
+    if (this.matteElement) {
+      this.matteElement = null;
+    }
+    if (this.maskManager) {
+      this.maskManager.destroy();
+      this.maskManager = null;
+    }
+  },
+  createRenderableComponents: function () {
+    this.maskManager = new MaskElement(this.data, this, this.globalData);
+  },
+  addEffects: function () {
+  },
+  setMatte: function () {},
+};
+HBaseElement.prototype.getBaseElement = SVGBaseElement.prototype.getBaseElement;
+HBaseElement.prototype.destroyBaseElement = HBaseElement.prototype.destroy;
+HBaseElement.prototype.buildElementParenting = BaseRenderer.prototype.buildElementParenting;
+
+export default HBaseElement;

node_modules/lottie-web/player/js/elements/htmlElements/HCameraElement.js

@@ -0,0 +1,170 @@
+import {
+  degToRads,
+} from '../../utils/common';
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import PropertyFactory from '../../utils/PropertyFactory';
+import BaseElement from '../BaseElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import Matrix from '../../3rd_party/transformation-matrix';
+
+function HCameraElement(data, globalData, comp) {
+  this.initFrame();
+  this.initBaseData(data, globalData, comp);
+  this.initHierarchy();
+  var getProp = PropertyFactory.getProp;
+  this.pe = getProp(this, data.pe, 0, 0, this);
+  if (data.ks.p.s) {
+    this.px = getProp(this, data.ks.p.x, 1, 0, this);
+    this.py = getProp(this, data.ks.p.y, 1, 0, this);
+    this.pz = getProp(this, data.ks.p.z, 1, 0, this);
+  } else {
+    this.p = getProp(this, data.ks.p, 1, 0, this);
+  }
+  if (data.ks.a) {
+    this.a = getProp(this, data.ks.a, 1, 0, this);
+  }
+  if (data.ks.or.k.length && data.ks.or.k[0].to) {
+    var i;
+    var len = data.ks.or.k.length;
+    for (i = 0; i < len; i += 1) {
+      data.ks.or.k[i].to = null;
+      data.ks.or.k[i].ti = null;
+    }
+  }
+  this.or = getProp(this, data.ks.or, 1, degToRads, this);
+  this.or.sh = true;
+  this.rx = getProp(this, data.ks.rx, 0, degToRads, this);
+  this.ry = getProp(this, data.ks.ry, 0, degToRads, this);
+  this.rz = getProp(this, data.ks.rz, 0, degToRads, this);
+  this.mat = new Matrix();
+  this._prevMat = new Matrix();
+  this._isFirstFrame = true;
+
+  // TODO: find a better way to make the HCamera element to be compatible with the LayerInterface and TransformInterface.
+  this.finalTransform = {
+    mProp: this,
+  };
+}
+extendPrototype([BaseElement, FrameElement, HierarchyElement], HCameraElement);
+
+HCameraElement.prototype.setup = function () {
+  var i;
+  var len = this.comp.threeDElements.length;
+  var comp;
+  var perspectiveStyle;
+  var containerStyle;
+  for (i = 0; i < len; i += 1) {
+    // [perspectiveElem,container]
+    comp = this.comp.threeDElements[i];
+    if (comp.type === '3d') {
+      perspectiveStyle = comp.perspectiveElem.style;
+      containerStyle = comp.container.style;
+      var perspective = this.pe.v + 'px';
+      var origin = '0px 0px 0px';
+      var matrix = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
+      perspectiveStyle.perspective = perspective;
+      perspectiveStyle.webkitPerspective = perspective;
+      containerStyle.transformOrigin = origin;
+      containerStyle.mozTransformOrigin = origin;
+      containerStyle.webkitTransformOrigin = origin;
+      perspectiveStyle.transform = matrix;
+      perspectiveStyle.webkitTransform = matrix;
+    }
+  }
+};
+
+HCameraElement.prototype.createElements = function () {
+};
+
+HCameraElement.prototype.hide = function () {
+};
+
+HCameraElement.prototype.renderFrame = function () {
+  var _mdf = this._isFirstFrame;
+  var i;
+  var len;
+  if (this.hierarchy) {
+    len = this.hierarchy.length;
+    for (i = 0; i < len; i += 1) {
+      _mdf = this.hierarchy[i].finalTransform.mProp._mdf || _mdf;
+    }
+  }
+  if (_mdf || this.pe._mdf || (this.p && this.p._mdf) || (this.px && (this.px._mdf || this.py._mdf || this.pz._mdf)) || this.rx._mdf || this.ry._mdf || this.rz._mdf || this.or._mdf || (this.a && this.a._mdf)) {
+    this.mat.reset();
+
+    if (this.hierarchy) {
+      len = this.hierarchy.length - 1;
+      for (i = len; i >= 0; i -= 1) {
+        var mTransf = this.hierarchy[i].finalTransform.mProp;
+        this.mat.translate(-mTransf.p.v[0], -mTransf.p.v[1], mTransf.p.v[2]);
+        this.mat.rotateX(-mTransf.or.v[0]).rotateY(-mTransf.or.v[1]).rotateZ(mTransf.or.v[2]);
+        this.mat.rotateX(-mTransf.rx.v).rotateY(-mTransf.ry.v).rotateZ(mTransf.rz.v);
+        this.mat.scale(1 / mTransf.s.v[0], 1 / mTransf.s.v[1], 1 / mTransf.s.v[2]);
+        this.mat.translate(mTransf.a.v[0], mTransf.a.v[1], mTransf.a.v[2]);
+      }
+    }
+    if (this.p) {
+      this.mat.translate(-this.p.v[0], -this.p.v[1], this.p.v[2]);
+    } else {
+      this.mat.translate(-this.px.v, -this.py.v, this.pz.v);
+    }
+    if (this.a) {
+      var diffVector;
+      if (this.p) {
+        diffVector = [this.p.v[0] - this.a.v[0], this.p.v[1] - this.a.v[1], this.p.v[2] - this.a.v[2]];
+      } else {
+        diffVector = [this.px.v - this.a.v[0], this.py.v - this.a.v[1], this.pz.v - this.a.v[2]];
+      }
+      var mag = Math.sqrt(Math.pow(diffVector[0], 2) + Math.pow(diffVector[1], 2) + Math.pow(diffVector[2], 2));
+      // var lookDir = getNormalizedPoint(getDiffVector(this.a.v,this.p.v));
+      var lookDir = [diffVector[0] / mag, diffVector[1] / mag, diffVector[2] / mag];
+      var lookLengthOnXZ = Math.sqrt(lookDir[2] * lookDir[2] + lookDir[0] * lookDir[0]);
+      var mRotationX = (Math.atan2(lookDir[1], lookLengthOnXZ));
+      var mRotationY = (Math.atan2(lookDir[0], -lookDir[2]));
+      this.mat.rotateY(mRotationY).rotateX(-mRotationX);
+    }
+    this.mat.rotateX(-this.rx.v).rotateY(-this.ry.v).rotateZ(this.rz.v);
+    this.mat.rotateX(-this.or.v[0]).rotateY(-this.or.v[1]).rotateZ(this.or.v[2]);
+    this.mat.translate(this.globalData.compSize.w / 2, this.globalData.compSize.h / 2, 0);
+    this.mat.translate(0, 0, this.pe.v);
+
+    var hasMatrixChanged = !this._prevMat.equals(this.mat);
+    if ((hasMatrixChanged || this.pe._mdf) && this.comp.threeDElements) {
+      len = this.comp.threeDElements.length;
+      var comp;
+      var perspectiveStyle;
+      var containerStyle;
+      for (i = 0; i < len; i += 1) {
+        comp = this.comp.threeDElements[i];
+        if (comp.type === '3d') {
+          if (hasMatrixChanged) {
+            var matValue = this.mat.toCSS();
+            containerStyle = comp.container.style;
+            containerStyle.transform = matValue;
+            containerStyle.webkitTransform = matValue;
+          }
+          if (this.pe._mdf) {
+            perspectiveStyle = comp.perspectiveElem.style;
+            perspectiveStyle.perspective = this.pe.v + 'px';
+            perspectiveStyle.webkitPerspective = this.pe.v + 'px';
+          }
+        }
+      }
+      this.mat.clone(this._prevMat);
+    }
+  }
+  this._isFirstFrame = false;
+};
+
+HCameraElement.prototype.prepareFrame = function (num) {
+  this.prepareProperties(num, true);
+};
+
+HCameraElement.prototype.destroy = function () {
+};
+HCameraElement.prototype.getBaseElement = function () { return null; };
+
+export default HCameraElement;

node_modules/lottie-web/player/js/elements/htmlElements/HCompElement.js

@@ -0,0 +1,61 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+import PropertyFactory from '../../utils/PropertyFactory';
+import HybridRendererBase from '../../renderers/HybridRendererBase';
+import HBaseElement from './HBaseElement';
+import ICompElement from '../CompElement';
+import SVGCompElement from '../svgElements/SVGCompElement';
+
+function HCompElement(data, globalData, comp) {
+  this.layers = data.layers;
+  this.supports3d = !data.hasMask;
+  this.completeLayers = false;
+  this.pendingElements = [];
+  this.elements = this.layers ? createSizedArray(this.layers.length) : [];
+  this.initElement(data, globalData, comp);
+  this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : { _placeholder: true };
+}
+
+extendPrototype([HybridRendererBase, ICompElement, HBaseElement], HCompElement);
+HCompElement.prototype._createBaseContainerElements = HCompElement.prototype.createContainerElements;
+
+HCompElement.prototype.createContainerElements = function () {
+  this._createBaseContainerElements();
+  // divElement.style.clip = 'rect(0px, '+this.data.w+'px, '+this.data.h+'px, 0px)';
+  if (this.data.hasMask) {
+    this.svgElement.setAttribute('width', this.data.w);
+    this.svgElement.setAttribute('height', this.data.h);
+    this.transformedElement = this.baseElement;
+  } else {
+    this.transformedElement = this.layerElement;
+  }
+};
+
+HCompElement.prototype.addTo3dContainer = function (elem, pos) {
+  var j = 0;
+  var nextElement;
+  while (j < pos) {
+    if (this.elements[j] && this.elements[j].getBaseElement) {
+      nextElement = this.elements[j].getBaseElement();
+    }
+    j += 1;
+  }
+  if (nextElement) {
+    this.layerElement.insertBefore(elem, nextElement);
+  } else {
+    this.layerElement.appendChild(elem);
+  }
+};
+
+HCompElement.prototype.createComp = function (data) {
+  if (!this.supports3d) {
+    return new SVGCompElement(data, this.globalData, this);
+  }
+  return new HCompElement(data, this.globalData, this);
+};
+
+export default HCompElement;

node_modules/lottie-web/player/js/elements/htmlElements/HEffects.js

@@ -0,0 +1,3 @@
+function HEffects() {
+}
+HEffects.prototype.renderFrame = function () {};

node_modules/lottie-web/player/js/elements/htmlElements/HImageElement.js

@@ -0,0 +1,42 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import createNS from '../../utils/helpers/svg_elements';
+import RenderableElement from '../helpers/RenderableElement';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import HBaseElement from './HBaseElement';
+import HSolidElement from './HSolidElement';
+
+function HImageElement(data, globalData, comp) {
+  this.assetData = globalData.getAssetData(data.refId);
+  this.initElement(data, globalData, comp);
+}
+
+extendPrototype([BaseElement, TransformElement, HBaseElement, HSolidElement, HierarchyElement, FrameElement, RenderableElement], HImageElement);
+
+HImageElement.prototype.createContent = function () {
+  var assetPath = this.globalData.getAssetsPath(this.assetData);
+  var img = new Image();
+
+  if (this.data.hasMask) {
+    this.imageElem = createNS('image');
+    this.imageElem.setAttribute('width', this.assetData.w + 'px');
+    this.imageElem.setAttribute('height', this.assetData.h + 'px');
+    this.imageElem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', assetPath);
+    this.layerElement.appendChild(this.imageElem);
+    this.baseElement.setAttribute('width', this.assetData.w);
+    this.baseElement.setAttribute('height', this.assetData.h);
+  } else {
+    this.layerElement.appendChild(img);
+  }
+  img.crossOrigin = 'anonymous';
+  img.src = assetPath;
+  if (this.data.ln) {
+    this.baseElement.setAttribute('id', this.data.ln);
+  }
+};
+
+export default HImageElement;

node_modules/lottie-web/player/js/elements/htmlElements/HShapeElement.js

@@ -0,0 +1,261 @@
+import {
+  bmPow,
+  bmMax,
+  bmMin,
+  bmSqrt,
+} from '../../utils/common';
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import createNS from '../../utils/helpers/svg_elements';
+import RenderableElement from '../helpers/RenderableElement';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import HBaseElement from './HBaseElement';
+import HSolidElement from './HSolidElement';
+import SVGShapeElement from '../svgElements/SVGShapeElement';
+
+function HShapeElement(data, globalData, comp) {
+  // List of drawable elements
+  this.shapes = [];
+  // Full shape data
+  this.shapesData = data.shapes;
+  // List of styles that will be applied to shapes
+  this.stylesList = [];
+  // List of modifiers that will be applied to shapes
+  this.shapeModifiers = [];
+  // List of items in shape tree
+  this.itemsData = [];
+  // List of items in previous shape tree
+  this.processedElements = [];
+  // List of animated components
+  this.animatedContents = [];
+  this.shapesContainer = createNS('g');
+  this.initElement(data, globalData, comp);
+  // Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
+  // List of elements that have been created
+  this.prevViewData = [];
+  this.currentBBox = {
+    x: 999999,
+    y: -999999,
+    h: 0,
+    w: 0,
+  };
+}
+extendPrototype([BaseElement, TransformElement, HSolidElement, SVGShapeElement, HBaseElement, HierarchyElement, FrameElement, RenderableElement], HShapeElement);
+HShapeElement.prototype._renderShapeFrame = HShapeElement.prototype.renderInnerContent;
+
+HShapeElement.prototype.createContent = function () {
+  var cont;
+  this.baseElement.style.fontSize = 0;
+  if (this.data.hasMask) {
+    this.layerElement.appendChild(this.shapesContainer);
+    cont = this.svgElement;
+  } else {
+    cont = createNS('svg');
+    var size = this.comp.data ? this.comp.data : this.globalData.compSize;
+    cont.setAttribute('width', size.w);
+    cont.setAttribute('height', size.h);
+    cont.appendChild(this.shapesContainer);
+    this.layerElement.appendChild(cont);
+  }
+
+  this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.shapesContainer, 0, [], true);
+  this.filterUniqueShapes();
+  this.shapeCont = cont;
+};
+
+HShapeElement.prototype.getTransformedPoint = function (transformers, point) {
+  var i;
+  var len = transformers.length;
+  for (i = 0; i < len; i += 1) {
+    point = transformers[i].mProps.v.applyToPointArray(point[0], point[1], 0);
+  }
+  return point;
+};
+
+HShapeElement.prototype.calculateShapeBoundingBox = function (item, boundingBox) {
+  var shape = item.sh.v;
+  var transformers = item.transformers;
+  var i;
+  var len = shape._length;
+  var vPoint;
+  var oPoint;
+  var nextIPoint;
+  var nextVPoint;
+  if (len <= 1) {
+    return;
+  }
+  for (i = 0; i < len - 1; i += 1) {
+    vPoint = this.getTransformedPoint(transformers, shape.v[i]);
+    oPoint = this.getTransformedPoint(transformers, shape.o[i]);
+    nextIPoint = this.getTransformedPoint(transformers, shape.i[i + 1]);
+    nextVPoint = this.getTransformedPoint(transformers, shape.v[i + 1]);
+    this.checkBounds(vPoint, oPoint, nextIPoint, nextVPoint, boundingBox);
+  }
+  if (shape.c) {
+    vPoint = this.getTransformedPoint(transformers, shape.v[i]);
+    oPoint = this.getTransformedPoint(transformers, shape.o[i]);
+    nextIPoint = this.getTransformedPoint(transformers, shape.i[0]);
+    nextVPoint = this.getTransformedPoint(transformers, shape.v[0]);
+    this.checkBounds(vPoint, oPoint, nextIPoint, nextVPoint, boundingBox);
+  }
+};
+
+HShapeElement.prototype.checkBounds = function (vPoint, oPoint, nextIPoint, nextVPoint, boundingBox) {
+  this.getBoundsOfCurve(vPoint, oPoint, nextIPoint, nextVPoint);
+  var bounds = this.shapeBoundingBox;
+  boundingBox.x = bmMin(bounds.left, boundingBox.x);
+  boundingBox.xMax = bmMax(bounds.right, boundingBox.xMax);
+  boundingBox.y = bmMin(bounds.top, boundingBox.y);
+  boundingBox.yMax = bmMax(bounds.bottom, boundingBox.yMax);
+};
+
+HShapeElement.prototype.shapeBoundingBox = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+};
+
+HShapeElement.prototype.tempBoundingBox = {
+  x: 0,
+  xMax: 0,
+  y: 0,
+  yMax: 0,
+  width: 0,
+  height: 0,
+};
+
+HShapeElement.prototype.getBoundsOfCurve = function (p0, p1, p2, p3) {
+  var bounds = [[p0[0], p3[0]], [p0[1], p3[1]]];
+
+  for (var a, b, c, t, b2ac, t1, t2, i = 0; i < 2; ++i) { // eslint-disable-line no-plusplus
+    b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
+    a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
+    c = 3 * p1[i] - 3 * p0[i];
+
+    b |= 0; // eslint-disable-line no-bitwise
+    a |= 0; // eslint-disable-line no-bitwise
+    c |= 0; // eslint-disable-line no-bitwise
+
+    if (a === 0 && b === 0) {
+      //
+    } else if (a === 0) {
+      t = -c / b;
+
+      if (t > 0 && t < 1) {
+        bounds[i].push(this.calculateF(t, p0, p1, p2, p3, i));
+      }
+    } else {
+      b2ac = b * b - 4 * c * a;
+
+      if (b2ac >= 0) {
+        t1 = (-b + bmSqrt(b2ac)) / (2 * a);
+        if (t1 > 0 && t1 < 1) bounds[i].push(this.calculateF(t1, p0, p1, p2, p3, i));
+        t2 = (-b - bmSqrt(b2ac)) / (2 * a);
+        if (t2 > 0 && t2 < 1) bounds[i].push(this.calculateF(t2, p0, p1, p2, p3, i));
+      }
+    }
+  }
+
+  this.shapeBoundingBox.left = bmMin.apply(null, bounds[0]);
+  this.shapeBoundingBox.top = bmMin.apply(null, bounds[1]);
+  this.shapeBoundingBox.right = bmMax.apply(null, bounds[0]);
+  this.shapeBoundingBox.bottom = bmMax.apply(null, bounds[1]);
+};
+
+HShapeElement.prototype.calculateF = function (t, p0, p1, p2, p3, i) {
+  return bmPow(1 - t, 3) * p0[i]
+        + 3 * bmPow(1 - t, 2) * t * p1[i]
+        + 3 * (1 - t) * bmPow(t, 2) * p2[i]
+        + bmPow(t, 3) * p3[i];
+};
+
+HShapeElement.prototype.calculateBoundingBox = function (itemsData, boundingBox) {
+  var i;
+  var len = itemsData.length;
+  for (i = 0; i < len; i += 1) {
+    if (itemsData[i] && itemsData[i].sh) {
+      this.calculateShapeBoundingBox(itemsData[i], boundingBox);
+    } else if (itemsData[i] && itemsData[i].it) {
+      this.calculateBoundingBox(itemsData[i].it, boundingBox);
+    } else if (itemsData[i] && itemsData[i].style && itemsData[i].w) {
+      this.expandStrokeBoundingBox(itemsData[i].w, boundingBox);
+    }
+  }
+};
+
+HShapeElement.prototype.expandStrokeBoundingBox = function (widthProperty, boundingBox) {
+  var width = 0;
+  if (widthProperty.keyframes) {
+    for (var i = 0; i < widthProperty.keyframes.length; i += 1) {
+      var kfw = widthProperty.keyframes[i].s;
+      if (kfw > width) {
+        width = kfw;
+      }
+    }
+    width *= widthProperty.mult;
+  } else {
+    width = widthProperty.v * widthProperty.mult;
+  }
+
+  boundingBox.x -= width;
+  boundingBox.xMax += width;
+  boundingBox.y -= width;
+  boundingBox.yMax += width;
+};
+
+HShapeElement.prototype.currentBoxContains = function (box) {
+  return this.currentBBox.x <= box.x
+    && this.currentBBox.y <= box.y
+    && this.currentBBox.width + this.currentBBox.x >= box.x + box.width
+    && this.currentBBox.height + this.currentBBox.y >= box.y + box.height;
+};
+
+HShapeElement.prototype.renderInnerContent = function () {
+  this._renderShapeFrame();
+
+  if (!this.hidden && (this._isFirstFrame || this._mdf)) {
+    var tempBoundingBox = this.tempBoundingBox;
+    var max = 999999;
+    tempBoundingBox.x = max;
+    tempBoundingBox.xMax = -max;
+    tempBoundingBox.y = max;
+    tempBoundingBox.yMax = -max;
+    this.calculateBoundingBox(this.itemsData, tempBoundingBox);
+    tempBoundingBox.width = tempBoundingBox.xMax < tempBoundingBox.x ? 0 : tempBoundingBox.xMax - tempBoundingBox.x;
+    tempBoundingBox.height = tempBoundingBox.yMax < tempBoundingBox.y ? 0 : tempBoundingBox.yMax - tempBoundingBox.y;
+    // var tempBoundingBox = this.shapeCont.getBBox();
+    if (this.currentBoxContains(tempBoundingBox)) {
+      return;
+    }
+    var changed = false;
+    if (this.currentBBox.w !== tempBoundingBox.width) {
+      this.currentBBox.w = tempBoundingBox.width;
+      this.shapeCont.setAttribute('width', tempBoundingBox.width);
+      changed = true;
+    }
+    if (this.currentBBox.h !== tempBoundingBox.height) {
+      this.currentBBox.h = tempBoundingBox.height;
+      this.shapeCont.setAttribute('height', tempBoundingBox.height);
+      changed = true;
+    }
+    if (changed || this.currentBBox.x !== tempBoundingBox.x || this.currentBBox.y !== tempBoundingBox.y) {
+      this.currentBBox.w = tempBoundingBox.width;
+      this.currentBBox.h = tempBoundingBox.height;
+      this.currentBBox.x = tempBoundingBox.x;
+      this.currentBBox.y = tempBoundingBox.y;
+
+      this.shapeCont.setAttribute('viewBox', this.currentBBox.x + ' ' + this.currentBBox.y + ' ' + this.currentBBox.w + ' ' + this.currentBBox.h);
+      var shapeStyle = this.shapeCont.style;
+      var shapeTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
+      shapeStyle.transform = shapeTransform;
+      shapeStyle.webkitTransform = shapeTransform;
+    }
+  }
+};
+
+export default HShapeElement;

node_modules/lottie-web/player/js/elements/htmlElements/HSolidElement.js

@@ -0,0 +1,36 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import createNS from '../../utils/helpers/svg_elements';
+import createTag from '../../utils/helpers/html_elements';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import RenderableDOMElement from '../helpers/RenderableDOMElement';
+import HBaseElement from './HBaseElement';
+
+function HSolidElement(data, globalData, comp) {
+  this.initElement(data, globalData, comp);
+}
+extendPrototype([BaseElement, TransformElement, HBaseElement, HierarchyElement, FrameElement, RenderableDOMElement], HSolidElement);
+
+HSolidElement.prototype.createContent = function () {
+  var rect;
+  if (this.data.hasMask) {
+    rect = createNS('rect');
+    rect.setAttribute('width', this.data.sw);
+    rect.setAttribute('height', this.data.sh);
+    rect.setAttribute('fill', this.data.sc);
+    this.svgElement.setAttribute('width', this.data.sw);
+    this.svgElement.setAttribute('height', this.data.sh);
+  } else {
+    rect = createTag('div');
+    rect.style.width = this.data.sw + 'px';
+    rect.style.height = this.data.sh + 'px';
+    rect.style.backgroundColor = this.data.sc;
+  }
+  this.layerElement.appendChild(rect);
+};
+
+export default HSolidElement;

node_modules/lottie-web/player/js/elements/htmlElements/HTextElement.js

@@ -0,0 +1,290 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+import createNS from '../../utils/helpers/svg_elements';
+import createTag from '../../utils/helpers/html_elements';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import RenderableDOMElement from '../helpers/RenderableDOMElement';
+import ITextElement from '../TextElement';
+import HBaseElement from './HBaseElement';
+import {
+  lineCapEnum,
+  lineJoinEnum,
+} from '../../utils/helpers/shapeEnums';
+import {
+  styleDiv,
+} from '../../utils/common';
+
+function HTextElement(data, globalData, comp) {
+  this.textSpans = [];
+  this.textPaths = [];
+  this.currentBBox = {
+    x: 999999,
+    y: -999999,
+    h: 0,
+    w: 0,
+  };
+  this.renderType = 'svg';
+  this.isMasked = false;
+  this.initElement(data, globalData, comp);
+}
+extendPrototype([BaseElement, TransformElement, HBaseElement, HierarchyElement, FrameElement, RenderableDOMElement, ITextElement], HTextElement);
+
+HTextElement.prototype.createContent = function () {
+  this.isMasked = this.checkMasks();
+  if (this.isMasked) {
+    this.renderType = 'svg';
+    this.compW = this.comp.data.w;
+    this.compH = this.comp.data.h;
+    this.svgElement.setAttribute('width', this.compW);
+    this.svgElement.setAttribute('height', this.compH);
+    var g = createNS('g');
+    this.maskedElement.appendChild(g);
+    this.innerElem = g;
+  } else {
+    this.renderType = 'html';
+    this.innerElem = this.layerElement;
+  }
+
+  this.checkParenting();
+};
+
+HTextElement.prototype.buildNewText = function () {
+  var documentData = this.textProperty.currentData;
+  this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0);
+  var innerElemStyle = this.innerElem.style;
+  var textColor = documentData.fc ? this.buildColor(documentData.fc) : 'rgba(0,0,0,0)';
+  innerElemStyle.fill = textColor;
+  innerElemStyle.color = textColor;
+  if (documentData.sc) {
+    innerElemStyle.stroke = this.buildColor(documentData.sc);
+    innerElemStyle.strokeWidth = documentData.sw + 'px';
+  }
+  var fontData = this.globalData.fontManager.getFontByName(documentData.f);
+  if (!this.globalData.fontManager.chars) {
+    innerElemStyle.fontSize = documentData.finalSize + 'px';
+    innerElemStyle.lineHeight = documentData.finalSize + 'px';
+    if (fontData.fClass) {
+      this.innerElem.className = fontData.fClass;
+    } else {
+      innerElemStyle.fontFamily = fontData.fFamily;
+      var fWeight = documentData.fWeight;
+      var fStyle = documentData.fStyle;
+      innerElemStyle.fontStyle = fStyle;
+      innerElemStyle.fontWeight = fWeight;
+    }
+  }
+  var i;
+  var len;
+
+  var letters = documentData.l;
+  len = letters.length;
+  var tSpan;
+  var tParent;
+  var tCont;
+  var matrixHelper = this.mHelper;
+  var shapes;
+  var shapeStr = '';
+  var cnt = 0;
+  for (i = 0; i < len; i += 1) {
+    if (this.globalData.fontManager.chars) {
+      if (!this.textPaths[cnt]) {
+        tSpan = createNS('path');
+        tSpan.setAttribute('stroke-linecap', lineCapEnum[1]);
+        tSpan.setAttribute('stroke-linejoin', lineJoinEnum[2]);
+        tSpan.setAttribute('stroke-miterlimit', '4');
+      } else {
+        tSpan = this.textPaths[cnt];
+      }
+      if (!this.isMasked) {
+        if (this.textSpans[cnt]) {
+          tParent = this.textSpans[cnt];
+          tCont = tParent.children[0];
+        } else {
+          tParent = createTag('div');
+          tParent.style.lineHeight = 0;
+          tCont = createNS('svg');
+          tCont.appendChild(tSpan);
+          styleDiv(tParent);
+        }
+      }
+    } else if (!this.isMasked) {
+      if (this.textSpans[cnt]) {
+        tParent = this.textSpans[cnt];
+        tSpan = this.textPaths[cnt];
+      } else {
+        tParent = createTag('span');
+        styleDiv(tParent);
+        tSpan = createTag('span');
+        styleDiv(tSpan);
+        tParent.appendChild(tSpan);
+      }
+    } else {
+      tSpan = this.textPaths[cnt] ? this.textPaths[cnt] : createNS('text');
+    }
+    // tSpan.setAttribute('visibility', 'hidden');
+    if (this.globalData.fontManager.chars) {
+      var charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
+      var shapeData;
+      if (charData) {
+        shapeData = charData.data;
+      } else {
+        shapeData = null;
+      }
+      matrixHelper.reset();
+      if (shapeData && shapeData.shapes && shapeData.shapes.length) {
+        shapes = shapeData.shapes[0].it;
+        matrixHelper.scale(documentData.finalSize / 100, documentData.finalSize / 100);
+        shapeStr = this.createPathShape(matrixHelper, shapes);
+        tSpan.setAttribute('d', shapeStr);
+      }
+      if (!this.isMasked) {
+        this.innerElem.appendChild(tParent);
+        if (shapeData && shapeData.shapes) {
+          // document.body.appendChild is needed to get exact measure of shape
+          document.body.appendChild(tCont);
+          var boundingBox = tCont.getBBox();
+          tCont.setAttribute('width', boundingBox.width + 2);
+          tCont.setAttribute('height', boundingBox.height + 2);
+          tCont.setAttribute('viewBox', (boundingBox.x - 1) + ' ' + (boundingBox.y - 1) + ' ' + (boundingBox.width + 2) + ' ' + (boundingBox.height + 2));
+          var tContStyle = tCont.style;
+          var tContTranslation = 'translate(' + (boundingBox.x - 1) + 'px,' + (boundingBox.y - 1) + 'px)';
+          tContStyle.transform = tContTranslation;
+          tContStyle.webkitTransform = tContTranslation;
+
+          letters[i].yOffset = boundingBox.y - 1;
+        } else {
+          tCont.setAttribute('width', 1);
+          tCont.setAttribute('height', 1);
+        }
+        tParent.appendChild(tCont);
+      } else {
+        this.innerElem.appendChild(tSpan);
+      }
+    } else {
+      tSpan.textContent = letters[i].val;
+      tSpan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
+      if (!this.isMasked) {
+        this.innerElem.appendChild(tParent);
+        //
+        var tStyle = tSpan.style;
+        var tSpanTranslation = 'translate3d(0,' + -documentData.finalSize / 1.2 + 'px,0)';
+        tStyle.transform = tSpanTranslation;
+        tStyle.webkitTransform = tSpanTranslation;
+      } else {
+        this.innerElem.appendChild(tSpan);
+      }
+    }
+    //
+    if (!this.isMasked) {
+      this.textSpans[cnt] = tParent;
+    } else {
+      this.textSpans[cnt] = tSpan;
+    }
+    this.textSpans[cnt].style.display = 'block';
+    this.textPaths[cnt] = tSpan;
+    cnt += 1;
+  }
+  while (cnt < this.textSpans.length) {
+    this.textSpans[cnt].style.display = 'none';
+    cnt += 1;
+  }
+};
+
+HTextElement.prototype.renderInnerContent = function () {
+  this.validateText();
+  var svgStyle;
+  if (this.data.singleShape) {
+    if (!this._isFirstFrame && !this.lettersChangedFlag) {
+      return;
+    } if (this.isMasked && this.finalTransform._matMdf) {
+      // Todo Benchmark if using this is better than getBBox
+      this.svgElement.setAttribute('viewBox', -this.finalTransform.mProp.p.v[0] + ' ' + -this.finalTransform.mProp.p.v[1] + ' ' + this.compW + ' ' + this.compH);
+      svgStyle = this.svgElement.style;
+      var translation = 'translate(' + -this.finalTransform.mProp.p.v[0] + 'px,' + -this.finalTransform.mProp.p.v[1] + 'px)';
+      svgStyle.transform = translation;
+      svgStyle.webkitTransform = translation;
+    }
+  }
+
+  this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
+  if (!this.lettersChangedFlag && !this.textAnimator.lettersChangedFlag) {
+    return;
+  }
+  var i;
+  var len;
+  var count = 0;
+  var renderedLetters = this.textAnimator.renderedLetters;
+
+  var letters = this.textProperty.currentData.l;
+
+  len = letters.length;
+  var renderedLetter;
+  var textSpan;
+  var textPath;
+  for (i = 0; i < len; i += 1) {
+    if (letters[i].n) {
+      count += 1;
+    } else {
+      textSpan = this.textSpans[i];
+      textPath = this.textPaths[i];
+      renderedLetter = renderedLetters[count];
+      count += 1;
+      if (renderedLetter._mdf.m) {
+        if (!this.isMasked) {
+          textSpan.style.webkitTransform = renderedLetter.m;
+          textSpan.style.transform = renderedLetter.m;
+        } else {
+          textSpan.setAttribute('transform', renderedLetter.m);
+        }
+      }
+      /// /textSpan.setAttribute('opacity',renderedLetter.o);
+      textSpan.style.opacity = renderedLetter.o;
+      if (renderedLetter.sw && renderedLetter._mdf.sw) {
+        textPath.setAttribute('stroke-width', renderedLetter.sw);
+      }
+      if (renderedLetter.sc && renderedLetter._mdf.sc) {
+        textPath.setAttribute('stroke', renderedLetter.sc);
+      }
+      if (renderedLetter.fc && renderedLetter._mdf.fc) {
+        textPath.setAttribute('fill', renderedLetter.fc);
+        textPath.style.color = renderedLetter.fc;
+      }
+    }
+  }
+
+  if (this.innerElem.getBBox && !this.hidden && (this._isFirstFrame || this._mdf)) {
+    var boundingBox = this.innerElem.getBBox();
+
+    if (this.currentBBox.w !== boundingBox.width) {
+      this.currentBBox.w = boundingBox.width;
+      this.svgElement.setAttribute('width', boundingBox.width);
+    }
+    if (this.currentBBox.h !== boundingBox.height) {
+      this.currentBBox.h = boundingBox.height;
+      this.svgElement.setAttribute('height', boundingBox.height);
+    }
+
+    var margin = 1;
+    if (this.currentBBox.w !== (boundingBox.width + margin * 2) || this.currentBBox.h !== (boundingBox.height + margin * 2) || this.currentBBox.x !== (boundingBox.x - margin) || this.currentBBox.y !== (boundingBox.y - margin)) {
+      this.currentBBox.w = boundingBox.width + margin * 2;
+      this.currentBBox.h = boundingBox.height + margin * 2;
+      this.currentBBox.x = boundingBox.x - margin;
+      this.currentBBox.y = boundingBox.y - margin;
+
+      this.svgElement.setAttribute('viewBox', this.currentBBox.x + ' ' + this.currentBBox.y + ' ' + this.currentBBox.w + ' ' + this.currentBBox.h);
+      svgStyle = this.svgElement.style;
+      var svgTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
+      svgStyle.transform = svgTransform;
+      svgStyle.webkitTransform = svgTransform;
+    }
+  }
+};
+
+export default HTextElement;