@lumen5/lottie-web 5.14.0

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

package/player/js/elements/svgElements/SVGBaseElement.js

@@ -0,0 +1,181 @@
+import { getLocationHref } from '../../main';
+import {
+  createElementID,
+} from '../../utils/common';
+import createNS from '../../utils/helpers/svg_elements';
+import MaskElement from '../../mask';
+import filtersFactory from '../../utils/filters';
+import featureSupport from '../../utils/featureSupport';
+import SVGEffects from './SVGEffects';
+
+function SVGBaseElement() {
+}
+
+SVGBaseElement.prototype = {
+  initRendererElement: function () {
+    this.layerElement = createNS('g');
+  },
+  createContainerElements: function () {
+    this.matteElement = createNS('g');
+    this.transformedElement = this.layerElement;
+    this.maskedElement = this.layerElement;
+    this._sizeChanged = false;
+    var layerElementParent = null;
+    // If this layer acts as a mask for the following layer
+    if (this.data.td) {
+      this.matteMasks = {};
+      var gg = createNS('g');
+      gg.setAttribute('id', this.layerId);
+      gg.appendChild(this.layerElement);
+      layerElementParent = gg;
+      this.globalData.defs.appendChild(gg);
+    } else if (this.data.tt) {
+      this.matteElement.appendChild(this.layerElement);
+      layerElementParent = this.matteElement;
+      this.baseElement = this.matteElement;
+    } else {
+      this.baseElement = this.layerElement;
+    }
+    if (this.data.ln) {
+      this.layerElement.setAttribute('id', this.data.ln);
+    }
+    if (this.data.cl) {
+      this.layerElement.setAttribute('class', this.data.cl);
+    }
+    // Clipping compositions to hide content that exceeds boundaries. If collapsed transformations is on, component should not be clipped
+    if (this.data.ty === 0 && !this.data.hd) {
+      var cp = createNS('clipPath');
+      var pt = createNS('path');
+      pt.setAttribute('d', 'M0,0 L' + this.data.w + ',0 L' + this.data.w + ',' + this.data.h + ' L0,' + this.data.h + 'z');
+      var clipId = createElementID();
+      cp.setAttribute('id', clipId);
+      cp.appendChild(pt);
+      this.globalData.defs.appendChild(cp);
+
+      if (this.checkMasks()) {
+        var cpGroup = createNS('g');
+        cpGroup.setAttribute('clip-path', 'url(' + getLocationHref() + '#' + clipId + ')');
+        cpGroup.appendChild(this.layerElement);
+        this.transformedElement = cpGroup;
+        if (layerElementParent) {
+          layerElementParent.appendChild(this.transformedElement);
+        } else {
+          this.baseElement = this.transformedElement;
+        }
+      } else {
+        this.layerElement.setAttribute('clip-path', 'url(' + getLocationHref() + '#' + clipId + ')');
+      }
+    }
+    if (this.data.bm !== 0) {
+      this.setBlendMode();
+    }
+  },
+  renderElement: function () {
+    if (this.finalTransform._localMatMdf) {
+      this.transformedElement.setAttribute('transform', this.finalTransform.localMat.to2dCSS());
+    }
+    if (this.finalTransform._opMdf) {
+      this.transformedElement.setAttribute('opacity', this.finalTransform.localOpacity);
+    }
+  },
+  destroyBaseElement: function () {
+    this.layerElement = null;
+    this.matteElement = null;
+    this.maskManager.destroy();
+  },
+  getBaseElement: function () {
+    if (this.data.hd) {
+      return null;
+    }
+    return this.baseElement;
+  },
+  createRenderableComponents: function () {
+    this.maskManager = new MaskElement(this.data, this, this.globalData);
+    this.renderableEffectsManager = new SVGEffects(this);
+    this.searchEffectTransforms();
+  },
+  getMatte: function (matteType) {
+    // This should not be a common case. But for backward compatibility, we'll create the matte object.
+    // It solves animations that have two consecutive layers marked as matte masks.
+    // Which is an undefined behavior in AE.
+    if (!this.matteMasks) {
+      this.matteMasks = {};
+    }
+    if (!this.matteMasks[matteType]) {
+      var id = this.layerId + '_' + matteType;
+      var filId;
+      var fil;
+      var useElement;
+      var gg;
+      if (matteType === 1 || matteType === 3) {
+        var masker = createNS('mask');
+        masker.setAttribute('id', id);
+        masker.setAttribute('mask-type', matteType === 3 ? 'luminance' : 'alpha');
+        useElement = createNS('use');
+        useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#' + this.layerId);
+        masker.appendChild(useElement);
+        this.globalData.defs.appendChild(masker);
+        if (!featureSupport.maskType && matteType === 1) {
+          masker.setAttribute('mask-type', 'luminance');
+          filId = createElementID();
+          fil = filtersFactory.createFilter(filId);
+          this.globalData.defs.appendChild(fil);
+          fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
+          gg = createNS('g');
+          gg.appendChild(useElement);
+          masker.appendChild(gg);
+          gg.setAttribute('filter', 'url(' + getLocationHref() + '#' + filId + ')');
+        }
+      } else if (matteType === 2) {
+        var maskGroup = createNS('mask');
+        maskGroup.setAttribute('id', id);
+        maskGroup.setAttribute('mask-type', 'alpha');
+        var maskGrouper = createNS('g');
+        maskGroup.appendChild(maskGrouper);
+        filId = createElementID();
+        fil = filtersFactory.createFilter(filId);
+        /// /
+        var feCTr = createNS('feComponentTransfer');
+        feCTr.setAttribute('in', 'SourceGraphic');
+        fil.appendChild(feCTr);
+        var feFunc = createNS('feFuncA');
+        feFunc.setAttribute('type', 'table');
+        feFunc.setAttribute('tableValues', '1.0 0.0');
+        feCTr.appendChild(feFunc);
+        /// /
+        this.globalData.defs.appendChild(fil);
+        var alphaRect = createNS('rect');
+        alphaRect.setAttribute('width', this.comp.data.w);
+        alphaRect.setAttribute('height', this.comp.data.h);
+        alphaRect.setAttribute('x', '0');
+        alphaRect.setAttribute('y', '0');
+        alphaRect.setAttribute('fill', '#ffffff');
+        alphaRect.setAttribute('opacity', '0');
+        maskGrouper.setAttribute('filter', 'url(' + getLocationHref() + '#' + filId + ')');
+        maskGrouper.appendChild(alphaRect);
+        useElement = createNS('use');
+        useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#' + this.layerId);
+        maskGrouper.appendChild(useElement);
+        if (!featureSupport.maskType) {
+          maskGroup.setAttribute('mask-type', 'luminance');
+          fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
+          gg = createNS('g');
+          maskGrouper.appendChild(alphaRect);
+          gg.appendChild(this.layerElement);
+          maskGrouper.appendChild(gg);
+        }
+        this.globalData.defs.appendChild(maskGroup);
+      }
+      this.matteMasks[matteType] = id;
+    }
+    return this.matteMasks[matteType];
+  },
+  setMatte: function (id) {
+    if (!this.matteElement) {
+      return;
+    }
+    this.matteElement.setAttribute('mask', 'url(' + getLocationHref() + '#' + id + ')');
+  },
+};
+
+export default SVGBaseElement;

package/player/js/elements/svgElements/SVGCompElement.js

@@ -0,0 +1,28 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+import PropertyFactory from '../../utils/PropertyFactory';
+import SVGRendererBase from '../../renderers/SVGRendererBase'; // eslint-disable-line
+import SVGBaseElement from './SVGBaseElement';
+import ICompElement from '../CompElement';
+
+function SVGCompElement(data, globalData, comp) {
+  this.layers = data.layers;
+  this.supports3d = true;
+  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([SVGRendererBase, ICompElement, SVGBaseElement], SVGCompElement);
+
+SVGCompElement.prototype.createComp = function (data) {
+  return new SVGCompElement(data, this.globalData, this);
+};
+
+export default SVGCompElement;

package/player/js/elements/svgElements/SVGEffects.js

@@ -0,0 +1,70 @@
+import { getLocationHref } from '../../main';
+import {
+  createElementID,
+} from '../../utils/common';
+import filtersFactory from '../../utils/filters';
+
+var registeredEffects = {};
+var idPrefix = 'filter_result_';
+
+function SVGEffects(elem) {
+  var i;
+  var source = 'SourceGraphic';
+  var len = elem.data.ef ? elem.data.ef.length : 0;
+  var filId = createElementID();
+  var fil = filtersFactory.createFilter(filId, true);
+  var count = 0;
+  this.filters = [];
+  var filterManager;
+  for (i = 0; i < len; i += 1) {
+    filterManager = null;
+    var type = elem.data.ef[i].ty;
+    if (registeredEffects[type]) {
+      var Effect = registeredEffects[type].effect;
+      filterManager = new Effect(fil, elem.effectsManager.effectElements[i], elem, idPrefix + count, source);
+      source = idPrefix + count;
+      if (registeredEffects[type].countsAsEffect) {
+        count += 1;
+      }
+    }
+    if (filterManager) {
+      this.filters.push(filterManager);
+    }
+  }
+  if (count) {
+    elem.globalData.defs.appendChild(fil);
+    elem.layerElement.setAttribute('filter', 'url(' + getLocationHref() + '#' + filId + ')');
+  }
+  if (this.filters.length) {
+    elem.addRenderableComponent(this);
+  }
+}
+
+SVGEffects.prototype.renderFrame = function (_isFirstFrame) {
+  var i;
+  var len = this.filters.length;
+  for (i = 0; i < len; i += 1) {
+    this.filters[i].renderFrame(_isFirstFrame);
+  }
+};
+
+SVGEffects.prototype.getEffects = function (type) {
+  var i;
+  var len = this.filters.length;
+  var effects = [];
+  for (i = 0; i < len; i += 1) {
+    if (this.filters[i].type === type) {
+      effects.push(this.filters[i]);
+    }
+  }
+  return effects;
+};
+
+export function registerEffect(id, effect, countsAsEffect) {
+  registeredEffects[id] = {
+    effect,
+    countsAsEffect,
+  };
+}
+
+export default SVGEffects;

package/player/js/elements/svgElements/SVGEffectsPlaceholder.js

@@ -0,0 +1,3 @@
+function SVGEffects() {}
+
+export default SVGEffects;