@lumen5/lottie-web 5.14.0

package/player/js/mask.js

@@ -0,0 +1,239 @@
+import { getLocationHref } from './main';
+import {
+  createElementID,
+} from './utils/common';
+import {
+  createSizedArray,
+} from './utils/helpers/arrays';
+import PropertyFactory from './utils/PropertyFactory';
+import ShapePropertyFactory from './utils/shapes/ShapeProperty';
+import createNS from './utils/helpers/svg_elements';
+
+function MaskElement(data, element, globalData) {
+  this.data = data;
+  this.element = element;
+  this.globalData = globalData;
+  this.storedData = [];
+  this.masksProperties = this.data.masksProperties || [];
+  this.maskElement = null;
+  var defs = this.globalData.defs;
+  var i;
+  var len = this.masksProperties ? this.masksProperties.length : 0;
+  this.viewData = createSizedArray(len);
+  this.solidPath = '';
+
+  var path;
+  var properties = this.masksProperties;
+  var count = 0;
+  var currentMasks = [];
+  var j;
+  var jLen;
+  var layerId = createElementID();
+  var rect;
+  var expansor;
+  var feMorph;
+  var x;
+  var maskType = 'clipPath';
+  var maskRef = 'clip-path';
+  for (i = 0; i < len; i += 1) {
+    if ((properties[i].mode !== 'a' && properties[i].mode !== 'n') || properties[i].inv || properties[i].o.k !== 100 || properties[i].o.x) {
+      maskType = 'mask';
+      maskRef = 'mask';
+    }
+
+    if ((properties[i].mode === 's' || properties[i].mode === 'i') && count === 0) {
+      rect = createNS('rect');
+      rect.setAttribute('fill', '#ffffff');
+      rect.setAttribute('width', this.element.comp.data.w || 0);
+      rect.setAttribute('height', this.element.comp.data.h || 0);
+      currentMasks.push(rect);
+    } else {
+      rect = null;
+    }
+
+    path = createNS('path');
+    if (properties[i].mode === 'n') {
+      // TODO move this to a factory or to a constructor
+      this.viewData[i] = {
+        op: PropertyFactory.getProp(this.element, properties[i].o, 0, 0.01, this.element),
+        prop: ShapePropertyFactory.getShapeProp(this.element, properties[i], 3),
+        elem: path,
+        lastPath: '',
+      };
+      defs.appendChild(path);
+    } else {
+      count += 1;
+
+      path.setAttribute('fill', properties[i].mode === 's' ? '#000000' : '#ffffff');
+      path.setAttribute('clip-rule', 'nonzero');
+      var filterID;
+
+      if (properties[i].x.k !== 0) {
+        maskType = 'mask';
+        maskRef = 'mask';
+        x = PropertyFactory.getProp(this.element, properties[i].x, 0, null, this.element);
+        filterID = createElementID();
+        expansor = createNS('filter');
+        expansor.setAttribute('id', filterID);
+        feMorph = createNS('feMorphology');
+        feMorph.setAttribute('operator', 'erode');
+        feMorph.setAttribute('in', 'SourceGraphic');
+        feMorph.setAttribute('radius', '0');
+        expansor.appendChild(feMorph);
+        defs.appendChild(expansor);
+        path.setAttribute('stroke', properties[i].mode === 's' ? '#000000' : '#ffffff');
+      } else {
+        feMorph = null;
+        x = null;
+      }
+
+      // TODO move this to a factory or to a constructor
+      this.storedData[i] = {
+        elem: path,
+        x: x,
+        expan: feMorph,
+        lastPath: '',
+        lastOperator: '',
+        filterId: filterID,
+        lastRadius: 0,
+      };
+      if (properties[i].mode === 'i') {
+        jLen = currentMasks.length;
+        var g = createNS('g');
+        for (j = 0; j < jLen; j += 1) {
+          g.appendChild(currentMasks[j]);
+        }
+        var mask = createNS('mask');
+        mask.setAttribute('mask-type', 'alpha');
+        mask.setAttribute('id', layerId + '_' + count);
+        mask.appendChild(path);
+        defs.appendChild(mask);
+        g.setAttribute('mask', 'url(' + getLocationHref() + '#' + layerId + '_' + count + ')');
+
+        currentMasks.length = 0;
+        currentMasks.push(g);
+      } else {
+        currentMasks.push(path);
+      }
+      if (properties[i].inv && !this.solidPath) {
+        this.solidPath = this.createLayerSolidPath();
+      }
+      // TODO move this to a factory or to a constructor
+      this.viewData[i] = {
+        elem: path,
+        lastPath: '',
+        op: PropertyFactory.getProp(this.element, properties[i].o, 0, 0.01, this.element),
+        prop: ShapePropertyFactory.getShapeProp(this.element, properties[i], 3),
+        invRect: rect,
+      };
+      if (!this.viewData[i].prop.k) {
+        this.drawPath(properties[i], this.viewData[i].prop.v, this.viewData[i]);
+      }
+    }
+  }
+
+  this.maskElement = createNS(maskType);
+
+  len = currentMasks.length;
+  for (i = 0; i < len; i += 1) {
+    this.maskElement.appendChild(currentMasks[i]);
+  }
+
+  if (count > 0) {
+    this.maskElement.setAttribute('id', layerId);
+    this.element.maskedElement.setAttribute(maskRef, 'url(' + getLocationHref() + '#' + layerId + ')');
+    defs.appendChild(this.maskElement);
+  }
+  if (this.viewData.length) {
+    this.element.addRenderableComponent(this);
+  }
+}
+
+MaskElement.prototype.getMaskProperty = function (pos) {
+  return this.viewData[pos].prop;
+};
+
+MaskElement.prototype.renderFrame = function (isFirstFrame) {
+  var finalMat = this.element.finalTransform.mat;
+  var i;
+  var len = this.masksProperties.length;
+  for (i = 0; i < len; i += 1) {
+    if (this.viewData[i].prop._mdf || isFirstFrame) {
+      this.drawPath(this.masksProperties[i], this.viewData[i].prop.v, this.viewData[i]);
+    }
+    if (this.viewData[i].op._mdf || isFirstFrame) {
+      this.viewData[i].elem.setAttribute('fill-opacity', this.viewData[i].op.v);
+    }
+    if (this.masksProperties[i].mode !== 'n') {
+      if (this.viewData[i].invRect && (this.element.finalTransform.mProp._mdf || isFirstFrame)) {
+        this.viewData[i].invRect.setAttribute('transform', finalMat.getInverseMatrix().to2dCSS());
+      }
+      if (this.storedData[i].x && (this.storedData[i].x._mdf || isFirstFrame)) {
+        var feMorph = this.storedData[i].expan;
+        if (this.storedData[i].x.v < 0) {
+          if (this.storedData[i].lastOperator !== 'erode') {
+            this.storedData[i].lastOperator = 'erode';
+            this.storedData[i].elem.setAttribute('filter', 'url(' + getLocationHref() + '#' + this.storedData[i].filterId + ')');
+          }
+          feMorph.setAttribute('radius', -this.storedData[i].x.v);
+        } else {
+          if (this.storedData[i].lastOperator !== 'dilate') {
+            this.storedData[i].lastOperator = 'dilate';
+            this.storedData[i].elem.setAttribute('filter', null);
+          }
+          this.storedData[i].elem.setAttribute('stroke-width', this.storedData[i].x.v * 2);
+        }
+      }
+    }
+  }
+};
+
+MaskElement.prototype.getMaskelement = function () {
+  return this.maskElement;
+};
+
+MaskElement.prototype.createLayerSolidPath = function () {
+  var path = 'M0,0 ';
+  path += ' h' + this.globalData.compSize.w;
+  path += ' v' + this.globalData.compSize.h;
+  path += ' h-' + this.globalData.compSize.w;
+  path += ' v-' + this.globalData.compSize.h + ' ';
+  return path;
+};
+
+MaskElement.prototype.drawPath = function (pathData, pathNodes, viewData) {
+  var pathString = ' M' + pathNodes.v[0][0] + ',' + pathNodes.v[0][1];
+  var i;
+  var len;
+  len = pathNodes._length;
+  for (i = 1; i < len; i += 1) {
+    // pathString += " C"+pathNodes.o[i-1][0]+','+pathNodes.o[i-1][1] + " "+pathNodes.i[i][0]+','+pathNodes.i[i][1] + " "+pathNodes.v[i][0]+','+pathNodes.v[i][1];
+    pathString += ' C' + pathNodes.o[i - 1][0] + ',' + pathNodes.o[i - 1][1] + ' ' + pathNodes.i[i][0] + ',' + pathNodes.i[i][1] + ' ' + pathNodes.v[i][0] + ',' + pathNodes.v[i][1];
+  }
+  // pathString += " C"+pathNodes.o[i-1][0]+','+pathNodes.o[i-1][1] + " "+pathNodes.i[0][0]+','+pathNodes.i[0][1] + " "+pathNodes.v[0][0]+','+pathNodes.v[0][1];
+  if (pathNodes.c && len > 1) {
+    pathString += ' C' + pathNodes.o[i - 1][0] + ',' + pathNodes.o[i - 1][1] + ' ' + pathNodes.i[0][0] + ',' + pathNodes.i[0][1] + ' ' + pathNodes.v[0][0] + ',' + pathNodes.v[0][1];
+  }
+  // pathNodes.__renderedString = pathString;
+
+  if (viewData.lastPath !== pathString) {
+    var pathShapeValue = '';
+    if (viewData.elem) {
+      if (pathNodes.c) {
+        pathShapeValue = pathData.inv ? this.solidPath + pathString : pathString;
+      }
+      viewData.elem.setAttribute('d', pathShapeValue);
+    }
+    viewData.lastPath = pathString;
+  }
+};
+
+MaskElement.prototype.destroy = function () {
+  this.element = null;
+  this.globalData = null;
+  this.maskElement = null;
+  this.data = null;
+  this.masksProperties = null;
+};
+
+export default MaskElement;

package/player/js/module.js

@@ -0,0 +1,153 @@
+/* <%= contents %> */
+import { setLocationHref, setWebWorker } from './main';
+import animationManager from './animation/AnimationManager';
+import {
+  setDefaultCurveSegments,
+  getDefaultCurveSegments,
+  roundValues,
+  setIdPrefix,
+  setSubframeEnabled,
+  setExpressionsPlugin,
+} from './utils/common';
+import PropertyFactory from './utils/PropertyFactory';
+import ShapePropertyFactory from './utils/shapes/ShapeProperty';
+import Matrix from './3rd_party/transformation-matrix';
+
+const lottie = {};
+
+function setLocation(href) {
+  setLocationHref(href);
+}
+
+function searchAnimations() {
+  if (standalone === true) {
+    animationManager.searchAnimations(animationData, standalone, renderer);
+  } else {
+    animationManager.searchAnimations();
+  }
+}
+
+function setSubframeRendering(flag) {
+  setSubframeEnabled(flag);
+}
+
+function setPrefix(prefix) {
+  setIdPrefix(prefix);
+}
+
+function loadAnimation(params) {
+  if (standalone === true) {
+    params.animationData = JSON.parse(animationData);
+  }
+  return animationManager.loadAnimation(params);
+}
+
+function setQuality(value) {
+  if (typeof value === 'string') {
+    switch (value) {
+      case 'high':
+        setDefaultCurveSegments(200);
+        break;
+      default:
+      case 'medium':
+        setDefaultCurveSegments(50);
+        break;
+      case 'low':
+        setDefaultCurveSegments(10);
+        break;
+    }
+  } else if (!isNaN(value) && value > 1) {
+    setDefaultCurveSegments(value);
+  }
+  if (getDefaultCurveSegments() >= 50) {
+    roundValues(false);
+  } else {
+    roundValues(true);
+  }
+}
+
+function inBrowser() {
+  return typeof navigator !== 'undefined';
+}
+
+function installPlugin(type, plugin) {
+  if (type === 'expressions') {
+    setExpressionsPlugin(plugin);
+  }
+}
+
+function getFactory(name) {
+  switch (name) {
+    case 'propertyFactory':
+      return PropertyFactory;
+    case 'shapePropertyFactory':
+      return ShapePropertyFactory;
+    case 'matrix':
+      return Matrix;
+    default:
+      return null;
+  }
+}
+
+lottie.play = animationManager.play;
+lottie.pause = animationManager.pause;
+lottie.setLocationHref = setLocation;
+lottie.togglePause = animationManager.togglePause;
+lottie.setSpeed = animationManager.setSpeed;
+lottie.setDirection = animationManager.setDirection;
+lottie.stop = animationManager.stop;
+lottie.searchAnimations = searchAnimations;
+lottie.registerAnimation = animationManager.registerAnimation;
+lottie.loadAnimation = loadAnimation;
+lottie.setSubframeRendering = setSubframeRendering;
+lottie.resize = animationManager.resize;
+// lottie.start = start;
+lottie.goToAndStop = animationManager.goToAndStop;
+lottie.destroy = animationManager.destroy;
+lottie.setQuality = setQuality;
+lottie.inBrowser = inBrowser;
+lottie.installPlugin = installPlugin;
+lottie.freeze = animationManager.freeze;
+lottie.unfreeze = animationManager.unfreeze;
+lottie.setVolume = animationManager.setVolume;
+lottie.mute = animationManager.mute;
+lottie.unmute = animationManager.unmute;
+lottie.getRegisteredAnimations = animationManager.getRegisteredAnimations;
+lottie.useWebWorker = setWebWorker;
+lottie.setIDPrefix = setPrefix;
+lottie.__getFactory = getFactory;
+lottie.version = '[[BM_VERSION]]';
+
+function checkReady() {
+  if (document.readyState === 'complete') {
+    clearInterval(readyStateCheckInterval);
+    searchAnimations();
+  }
+}
+
+function getQueryVariable(variable) {
+  var vars = queryString.split('&');
+  for (var i = 0; i < vars.length; i += 1) {
+    var pair = vars[i].split('=');
+    if (decodeURIComponent(pair[0]) == variable) { // eslint-disable-line eqeqeq
+      return decodeURIComponent(pair[1]);
+    }
+  }
+  return null;
+}
+var standalone = '__[STANDALONE]__';
+var animationData = '__[ANIMATIONDATA]__';
+var renderer = '';
+var queryString;
+if (standalone) {
+  var scripts = document.getElementsByTagName('script');
+  var index = scripts.length - 1;
+  var myScript = scripts[index] || {
+    src: '',
+  };
+  queryString = myScript.src ? myScript.src.replace(/^[^\?]+\??/, '') : ''; // eslint-disable-line no-useless-escape
+  renderer = getQueryVariable('renderer');
+}
+var readyStateCheckInterval = setInterval(checkReady, 100);
+
+export default lottie;

package/player/js/modules/canvas.js

@@ -0,0 +1,22 @@
+import lottie from './canvas_light';
+import {
+  setExpressionsPlugin,
+  setExpressionInterfaces,
+} from '../utils/common';
+import Expressions from '../utils/expressions/Expressions';
+import interfacesProvider from '../utils/expressions/InterfacesProvider';
+import expressionPropertyDecorator from '../utils/expressions/ExpressionPropertyDecorator';
+import expressionTextPropertyDecorator from '../utils/expressions/ExpressionTextPropertyDecorator';
+import CVTransformEffect from '../elements/canvasElements/effects/CVTransformEffect';
+import CVGaussianBlurEffect from '../elements/canvasElements/effects/CVGaussianBlurEffect';
+import { registerEffect } from '../elements/canvasElements/CVEffects';
+
+// Registering expression plugin
+setExpressionsPlugin(Expressions);
+setExpressionInterfaces(interfacesProvider);
+expressionPropertyDecorator();
+expressionTextPropertyDecorator();
+registerEffect(29, CVGaussianBlurEffect);
+registerEffect(35, CVTransformEffect);
+
+export default lottie;

package/player/js/modules/canvas_light.js

@@ -0,0 +1,25 @@
+import lottie from './main';
+import { ShapeModifiers } from '../utils/shapes/ShapeModifiers';
+import TrimModifier from '../utils/shapes/TrimModifier';
+import PuckerAndBloatModifier from '../utils/shapes/PuckerAndBloatModifier';
+import RepeaterModifier from '../utils/shapes/RepeaterModifier';
+import RoundCornersModifier from '../utils/shapes/RoundCornersModifier';
+import ZigZagModifier from '../utils/shapes/ZigZagModifier';
+import OffsetPathModifier from '../utils/shapes/OffsetPathModifier';
+import CanvasRenderer from '../renderers/CanvasRenderer';
+import {
+  registerRenderer,
+} from '../renderers/renderersManager';
+
+// Registering renderers
+registerRenderer('canvas', CanvasRenderer);
+
+// Registering shape modifiers
+ShapeModifiers.registerModifier('tm', TrimModifier);
+ShapeModifiers.registerModifier('pb', PuckerAndBloatModifier);
+ShapeModifiers.registerModifier('rp', RepeaterModifier);
+ShapeModifiers.registerModifier('rd', RoundCornersModifier);
+ShapeModifiers.registerModifier('zz', ZigZagModifier);
+ShapeModifiers.registerModifier('op', OffsetPathModifier);
+
+export default lottie;

package/player/js/modules/full.js

@@ -0,0 +1,70 @@
+import lottie from './main';
+import {
+  setExpressionsPlugin,
+  setExpressionInterfaces,
+} from '../utils/common';
+import { ShapeModifiers } from '../utils/shapes/ShapeModifiers';
+import TrimModifier from '../utils/shapes/TrimModifier';
+import PuckerAndBloatModifier from '../utils/shapes/PuckerAndBloatModifier';
+import RepeaterModifier from '../utils/shapes/RepeaterModifier';
+import RoundCornersModifier from '../utils/shapes/RoundCornersModifier';
+import ZigZagModifier from '../utils/shapes/ZigZagModifier';
+import OffsetPathModifier from '../utils/shapes/OffsetPathModifier';
+import CanvasRenderer from '../renderers/CanvasRenderer';
+import HybridRenderer from '../renderers/HybridRenderer';
+import SVGRenderer from '../renderers/SVGRenderer';
+import {
+  registerRenderer,
+} from '../renderers/renderersManager';
+import Expressions from '../utils/expressions/Expressions';
+import interfacesProvider from '../utils/expressions/InterfacesProvider';
+import expressionPropertyDecorator from '../utils/expressions/ExpressionPropertyDecorator';
+import expressionTextPropertyDecorator from '../utils/expressions/ExpressionTextPropertyDecorator';
+// SVG effects
+import { registerEffect } from '../elements/svgElements/SVGEffects';
+import SVGTintFilter from '../elements/svgElements/effects/SVGTintEffect';
+import SVGFillFilter from '../elements/svgElements/effects/SVGFillFilter';
+import SVGStrokeEffect from '../elements/svgElements/effects/SVGStrokeEffect';
+import SVGTritoneFilter from '../elements/svgElements/effects/SVGTritoneFilter';
+import SVGProLevelsFilter from '../elements/svgElements/effects/SVGProLevelsFilter';
+import SVGDropShadowEffect from '../elements/svgElements/effects/SVGDropShadowEffect';
+import SVGMatte3Effect from '../elements/svgElements/effects/SVGMatte3Effect';
+import SVGGaussianBlurEffect from '../elements/svgElements/effects/SVGGaussianBlurEffect';
+import SVGTransformEffect from '../elements/svgElements/effects/SVGTransformEffect';
+import CVTransformEffect from '../elements/canvasElements/effects/CVTransformEffect';
+import CVGaussianBlurEffect from '../elements/canvasElements/effects/CVGaussianBlurEffect';
+import { registerEffect as canvasRegisterEffect } from '../elements/canvasElements/CVEffects';
+
+// Registering renderers
+registerRenderer('canvas', CanvasRenderer);
+registerRenderer('html', HybridRenderer);
+registerRenderer('svg', SVGRenderer);
+
+// Registering shape modifiers
+ShapeModifiers.registerModifier('tm', TrimModifier);
+ShapeModifiers.registerModifier('pb', PuckerAndBloatModifier);
+ShapeModifiers.registerModifier('rp', RepeaterModifier);
+ShapeModifiers.registerModifier('rd', RoundCornersModifier);
+ShapeModifiers.registerModifier('zz', ZigZagModifier);
+ShapeModifiers.registerModifier('op', OffsetPathModifier);
+
+// Registering expression plugin
+setExpressionsPlugin(Expressions);
+setExpressionInterfaces(interfacesProvider);
+expressionPropertyDecorator();
+expressionTextPropertyDecorator();
+
+// Registering svg effects
+registerEffect(20, SVGTintFilter, true);
+registerEffect(21, SVGFillFilter, true);
+registerEffect(22, SVGStrokeEffect, false);
+registerEffect(23, SVGTritoneFilter, true);
+registerEffect(24, SVGProLevelsFilter, true);
+registerEffect(25, SVGDropShadowEffect, true);
+registerEffect(28, SVGMatte3Effect, false);
+registerEffect(29, SVGGaussianBlurEffect, true);
+registerEffect(35, SVGTransformEffect, false);
+canvasRegisterEffect(29, CVGaussianBlurEffect);
+canvasRegisterEffect(35, CVTransformEffect);
+
+export default lottie;

package/player/js/modules/html.js

@@ -0,0 +1,37 @@
+import lottie from './html_light';
+import {
+  setExpressionsPlugin,
+  setExpressionInterfaces,
+} from '../utils/common';
+import Expressions from '../utils/expressions/Expressions';
+import interfacesProvider from '../utils/expressions/InterfacesProvider';
+import expressionPropertyDecorator from '../utils/expressions/ExpressionPropertyDecorator';
+import expressionTextPropertyDecorator from '../utils/expressions/ExpressionTextPropertyDecorator';
+// SVG effects
+import { registerEffect } from '../elements/svgElements/SVGEffects';
+import SVGTintFilter from '../elements/svgElements/effects/SVGTintEffect';
+import SVGFillFilter from '../elements/svgElements/effects/SVGFillFilter';
+import SVGStrokeEffect from '../elements/svgElements/effects/SVGStrokeEffect';
+import SVGTritoneFilter from '../elements/svgElements/effects/SVGTritoneFilter';
+import SVGProLevelsFilter from '../elements/svgElements/effects/SVGProLevelsFilter';
+import SVGDropShadowEffect from '../elements/svgElements/effects/SVGDropShadowEffect';
+import SVGMatte3Effect from '../elements/svgElements/effects/SVGMatte3Effect';
+import SVGGaussianBlurEffect from '../elements/svgElements/effects/SVGGaussianBlurEffect';
+import SVGTransformEffect from '../elements/svgElements/effects/SVGTransformEffect';
+
+// Registering expression plugin
+setExpressionsPlugin(Expressions);
+setExpressionInterfaces(interfacesProvider);
+expressionPropertyDecorator();
+expressionTextPropertyDecorator();
+registerEffect(20, SVGTintFilter, true);
+registerEffect(21, SVGFillFilter, true);
+registerEffect(22, SVGStrokeEffect, false);
+registerEffect(23, SVGTritoneFilter, true);
+registerEffect(24, SVGProLevelsFilter, true);
+registerEffect(25, SVGDropShadowEffect, true);
+registerEffect(28, SVGMatte3Effect, false);
+registerEffect(29, SVGGaussianBlurEffect, true);
+registerEffect(35, SVGTransformEffect, false);
+
+export default lottie;

package/player/js/modules/html_light.js

@@ -0,0 +1,25 @@
+import lottie from './main';
+import { ShapeModifiers } from '../utils/shapes/ShapeModifiers';
+import TrimModifier from '../utils/shapes/TrimModifier';
+import PuckerAndBloatModifier from '../utils/shapes/PuckerAndBloatModifier';
+import RepeaterModifier from '../utils/shapes/RepeaterModifier';
+import RoundCornersModifier from '../utils/shapes/RoundCornersModifier';
+import ZigZagModifier from '../utils/shapes/ZigZagModifier';
+import OffsetPathModifier from '../utils/shapes/OffsetPathModifier';
+import HybridRenderer from '../renderers/HybridRenderer';
+import {
+  registerRenderer,
+} from '../renderers/renderersManager';
+
+// Registering renderers
+registerRenderer('html', HybridRenderer);
+
+// Registering shape modifiers
+ShapeModifiers.registerModifier('tm', TrimModifier);
+ShapeModifiers.registerModifier('pb', PuckerAndBloatModifier);
+ShapeModifiers.registerModifier('rp', RepeaterModifier);
+ShapeModifiers.registerModifier('rd', RoundCornersModifier);
+ShapeModifiers.registerModifier('zz', ZigZagModifier);
+ShapeModifiers.registerModifier('op', OffsetPathModifier);
+
+export default lottie;