@lumen5/lottie-web 5.14.0

package/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;

package/player/js/elements/helpers/shapes/ProcessedElement.js

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

package/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.s._mdf || 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;

package/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;

package/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;

package/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;

package/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;

package/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;

package/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;

package/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;

package/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;

package/player/js/elements/helpers/shapes/ShapeElement.js

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

package/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;

package/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;

package/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;