@theashraf/lottie-web 5.14.0-alpha.1

package/player/js/utils/expressions/TransformInterface.js

@@ -0,0 +1,126 @@
+import ExpressionPropertyInterface from './ExpressionValueFactory';
+
+const TransformExpressionInterface = (function () {
+  return function (transform) {
+    function _thisFunction(name) {
+      switch (name) {
+        case 'scale':
+        case 'Scale':
+        case 'ADBE Scale':
+        case 6:
+          return _thisFunction.scale;
+        case 'rotation':
+        case 'Rotation':
+        case 'ADBE Rotation':
+        case 'ADBE Rotate Z':
+        case 10:
+          return _thisFunction.rotation;
+        case 'ADBE Rotate X':
+          return _thisFunction.xRotation;
+        case 'ADBE Rotate Y':
+          return _thisFunction.yRotation;
+        case 'position':
+        case 'Position':
+        case 'ADBE Position':
+        case 2:
+          return _thisFunction.position;
+        case 'ADBE Position_0':
+          return _thisFunction.xPosition;
+        case 'ADBE Position_1':
+          return _thisFunction.yPosition;
+        case 'ADBE Position_2':
+          return _thisFunction.zPosition;
+        case 'anchorPoint':
+        case 'AnchorPoint':
+        case 'Anchor Point':
+        case 'ADBE AnchorPoint':
+        case 1:
+          return _thisFunction.anchorPoint;
+        case 'opacity':
+        case 'Opacity':
+        case 11:
+          return _thisFunction.opacity;
+        default:
+          return null;
+      }
+    }
+    Object.defineProperty(_thisFunction, 'rotation', {
+      get: ExpressionPropertyInterface(transform.r || transform.rz),
+    });
+
+    Object.defineProperty(_thisFunction, 'zRotation', {
+      get: ExpressionPropertyInterface(transform.rz || transform.r),
+    });
+
+    Object.defineProperty(_thisFunction, 'xRotation', {
+      get: ExpressionPropertyInterface(transform.rx),
+    });
+
+    Object.defineProperty(_thisFunction, 'yRotation', {
+      get: ExpressionPropertyInterface(transform.ry),
+    });
+    Object.defineProperty(_thisFunction, 'scale', {
+      get: ExpressionPropertyInterface(transform.s),
+    });
+    var _px;
+    var _py;
+    var _pz;
+    var _transformFactory;
+    if (transform.p) {
+      _transformFactory = ExpressionPropertyInterface(transform.p);
+    } else {
+      _px = ExpressionPropertyInterface(transform.px);
+      _py = ExpressionPropertyInterface(transform.py);
+      if (transform.pz) {
+        _pz = ExpressionPropertyInterface(transform.pz);
+      }
+    }
+    Object.defineProperty(_thisFunction, 'position', {
+      get: function () {
+        if (transform.p) {
+          return _transformFactory();
+        }
+        return [
+          _px(),
+          _py(),
+          _pz ? _pz() : 0];
+      },
+    });
+
+    Object.defineProperty(_thisFunction, 'xPosition', {
+      get: ExpressionPropertyInterface(transform.px),
+    });
+
+    Object.defineProperty(_thisFunction, 'yPosition', {
+      get: ExpressionPropertyInterface(transform.py),
+    });
+
+    Object.defineProperty(_thisFunction, 'zPosition', {
+      get: ExpressionPropertyInterface(transform.pz),
+    });
+
+    Object.defineProperty(_thisFunction, 'anchorPoint', {
+      get: ExpressionPropertyInterface(transform.a),
+    });
+
+    Object.defineProperty(_thisFunction, 'opacity', {
+      get: ExpressionPropertyInterface(transform.o),
+    });
+
+    Object.defineProperty(_thisFunction, 'skew', {
+      get: ExpressionPropertyInterface(transform.sk),
+    });
+
+    Object.defineProperty(_thisFunction, 'skewAxis', {
+      get: ExpressionPropertyInterface(transform.sa),
+    });
+
+    Object.defineProperty(_thisFunction, 'orientation', {
+      get: ExpressionPropertyInterface(transform.or),
+    });
+
+    return _thisFunction;
+  };
+}());
+
+export default TransformExpressionInterface;

package/player/js/utils/expressions/expressionHelpers.js

@@ -0,0 +1,86 @@
+import {
+  createTypedArray,
+} from '../helpers/arrays';
+import ExpressionManager from './ExpressionManager';
+
+const expressionHelpers = (function () {
+  function searchExpressions(elem, data, prop) {
+    if (data.x) {
+      prop.k = true;
+      prop.x = true;
+      prop.initiateExpression = ExpressionManager.initiateExpression;
+      prop.effectsSequence.push(prop.initiateExpression(elem, data, prop).bind(prop));
+    }
+  }
+
+  function getValueAtTime(frameNum) {
+    frameNum *= this.elem.globalData.frameRate;
+    frameNum -= this.offsetTime;
+    if (frameNum !== this._cachingAtTime.lastFrame) {
+      this._cachingAtTime.lastIndex = this._cachingAtTime.lastFrame < frameNum ? this._cachingAtTime.lastIndex : 0;
+      this._cachingAtTime.value = this.interpolateValue(frameNum, this._cachingAtTime);
+      this._cachingAtTime.lastFrame = frameNum;
+    }
+    return this._cachingAtTime.value;
+  }
+
+  function getSpeedAtTime(frameNum) {
+    var delta = -0.01;
+    var v1 = this.getValueAtTime(frameNum);
+    var v2 = this.getValueAtTime(frameNum + delta);
+    var speed = 0;
+    if (v1.length) {
+      var i;
+      for (i = 0; i < v1.length; i += 1) {
+        speed += Math.pow(v2[i] - v1[i], 2);
+      }
+      speed = Math.sqrt(speed) * 100;
+    } else {
+      speed = 0;
+    }
+    return speed;
+  }
+
+  function getVelocityAtTime(frameNum) {
+    if (this.vel !== undefined) {
+      return this.vel;
+    }
+    var delta = -0.001;
+    // frameNum += this.elem.data.st;
+    var v1 = this.getValueAtTime(frameNum);
+    var v2 = this.getValueAtTime(frameNum + delta);
+    var velocity;
+    if (v1.length) {
+      velocity = createTypedArray('float32', v1.length);
+      var i;
+      for (i = 0; i < v1.length; i += 1) {
+        // removing frameRate
+        // if needed, don't add it here
+        // velocity[i] = this.elem.globalData.frameRate*((v2[i] - v1[i])/delta);
+        velocity[i] = (v2[i] - v1[i]) / delta;
+      }
+    } else {
+      velocity = (v2 - v1) / delta;
+    }
+    return velocity;
+  }
+
+  function getStaticValueAtTime() {
+    return this.pv;
+  }
+
+  function setGroupProperty(propertyGroup) {
+    this.propertyGroup = propertyGroup;
+  }
+
+  return {
+    searchExpressions: searchExpressions,
+    getSpeedAtTime: getSpeedAtTime,
+    getVelocityAtTime: getVelocityAtTime,
+    getValueAtTime: getValueAtTime,
+    getStaticValueAtTime: getStaticValueAtTime,
+    setGroupProperty: setGroupProperty,
+  };
+}());
+
+export default expressionHelpers;

package/player/js/utils/expressions/shapes/ShapePathInterface.js

@@ -0,0 +1,47 @@
+import propertyGroupFactory from '../PropertyGroupFactory';
+import PropertyInterface from '../PropertyInterface';
+
+const ShapePathInterface = (
+
+  function () {
+    return function pathInterfaceFactory(shape, view, propertyGroup) {
+      var prop = view.sh;
+
+      function interfaceFunction(val) {
+        if (val === 'Shape' || val === 'shape' || val === 'Path' || val === 'path' || val === 'ADBE Vector Shape' || val === 2) {
+          return interfaceFunction.path;
+        }
+        return null;
+      }
+
+      var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+      prop.setGroupProperty(PropertyInterface('Path', _propertyGroup));
+      Object.defineProperties(interfaceFunction, {
+        path: {
+          get: function () {
+            if (prop.k) {
+              prop.getValue();
+            }
+            return prop;
+          },
+        },
+        shape: {
+          get: function () {
+            if (prop.k) {
+              prop.getValue();
+            }
+            return prop;
+          },
+        },
+        _name: { value: shape.nm },
+        ix: { value: shape.ix },
+        propertyIndex: { value: shape.ix },
+        mn: { value: shape.mn },
+        propertyGroup: { value: propertyGroup },
+      });
+      return interfaceFunction;
+    };
+  }()
+);
+
+export default ShapePathInterface;

package/player/js/utils/featureSupport.js

@@ -0,0 +1,16 @@
+const featureSupport = (function () {
+  var ob = {
+    maskType: true,
+    svgLumaHidden: true,
+    offscreenCanvas: typeof OffscreenCanvas !== 'undefined',
+  };
+  if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent) || /Edge\/\d./i.test(navigator.userAgent)) {
+    ob.maskType = false;
+  }
+  if (/firefox/i.test(navigator.userAgent)) {
+    ob.svgLumaHidden = false;
+  }
+  return ob;
+}());
+
+export default featureSupport;

package/player/js/utils/filters.js

@@ -0,0 +1,32 @@
+import createNS from './helpers/svg_elements';
+
+const filtersFactory = (function () {
+  var ob = {};
+  ob.createFilter = createFilter;
+  ob.createAlphaToLuminanceFilter = createAlphaToLuminanceFilter;
+
+  function createFilter(filId, skipCoordinates) {
+    var fil = createNS('filter');
+    fil.setAttribute('id', filId);
+    if (skipCoordinates !== true) {
+      fil.setAttribute('filterUnits', 'objectBoundingBox');
+      fil.setAttribute('x', '0%');
+      fil.setAttribute('y', '0%');
+      fil.setAttribute('width', '100%');
+      fil.setAttribute('height', '100%');
+    }
+    return fil;
+  }
+
+  function createAlphaToLuminanceFilter() {
+    var feColorMatrix = createNS('feColorMatrix');
+    feColorMatrix.setAttribute('type', 'matrix');
+    feColorMatrix.setAttribute('color-interpolation-filters', 'sRGB');
+    feColorMatrix.setAttribute('values', '0 0 0 1 0  0 0 0 1 0  0 0 0 1 0  0 0 0 1 1');
+    return feColorMatrix;
+  }
+
+  return ob;
+}());
+
+export default filtersFactory;

package/player/js/utils/functionExtensions.js

@@ -0,0 +1,27 @@
+function extendPrototype(sources, destination) {
+  var i;
+  var len = sources.length;
+  var sourcePrototype;
+  for (i = 0; i < len; i += 1) {
+    sourcePrototype = sources[i].prototype;
+    for (var attr in sourcePrototype) {
+      if (Object.prototype.hasOwnProperty.call(sourcePrototype, attr)) destination.prototype[attr] = sourcePrototype[attr];
+    }
+  }
+}
+
+function getDescriptor(object, prop) {
+  return Object.getOwnPropertyDescriptor(object, prop);
+}
+
+function createProxyFunction(prototype) {
+  function ProxyFunction() {}
+  ProxyFunction.prototype = prototype;
+  return ProxyFunction;
+}
+
+export {
+  extendPrototype,
+  getDescriptor,
+  createProxyFunction,
+};

package/player/js/utils/getFontProperties.js

@@ -0,0 +1,42 @@
+function getFontProperties(fontData) {
+  var styles = fontData.fStyle ? fontData.fStyle.split(' ') : [];
+
+  var fWeight = 'normal'; var
+    fStyle = 'normal';
+  var len = styles.length;
+  var styleName;
+  for (var i = 0; i < len; i += 1) {
+    styleName = styles[i].toLowerCase();
+    switch (styleName) {
+      case 'italic':
+        fStyle = 'italic';
+        break;
+      case 'bold':
+        fWeight = '700';
+        break;
+      case 'black':
+        fWeight = '900';
+        break;
+      case 'medium':
+        fWeight = '500';
+        break;
+      case 'regular':
+      case 'normal':
+        fWeight = '400';
+        break;
+      case 'light':
+      case 'thin':
+        fWeight = '200';
+        break;
+      default:
+        break;
+    }
+  }
+
+  return {
+    style: fStyle,
+    weight: fontData.fWeight || fWeight,
+  };
+}
+
+export default getFontProperties;

package/player/js/utils/helpers/arrays.js

@@ -0,0 +1,43 @@
+const createTypedArray = (function () {
+  function createRegularArray(type, len) {
+    var i = 0;
+    var arr = [];
+    var value;
+    switch (type) {
+      case 'int16':
+      case 'uint8c':
+        value = 1;
+        break;
+      default:
+        value = 1.1;
+        break;
+    }
+    for (i = 0; i < len; i += 1) {
+      arr.push(value);
+    }
+    return arr;
+  }
+  function createTypedArrayFactory(type, len) {
+    if (type === 'float32') {
+      return new Float32Array(len);
+    } if (type === 'int16') {
+      return new Int16Array(len);
+    } if (type === 'uint8c') {
+      return new Uint8ClampedArray(len);
+    }
+    return createRegularArray(type, len);
+  }
+  if (typeof Uint8ClampedArray === 'function' && typeof Float32Array === 'function') {
+    return createTypedArrayFactory;
+  }
+  return createRegularArray;
+}());
+
+function createSizedArray(len) {
+  return Array.apply(null, { length: len });
+}
+
+export {
+  createTypedArray,
+  createSizedArray,
+};

package/player/js/utils/helpers/assetManager.js

@@ -0,0 +1,96 @@
+import createTag from './html_elements';
+import createNS from './svg_elements';
+import featureSupport from '../featureSupport';
+
+var lumaLoader = (function () {
+  var id = '__lottie_element_luma_buffer';
+  var lumaBuffer = null;
+  var lumaBufferCtx = null;
+  var svg = null;
+
+  // This alternate solution has a slight delay before the filter is applied, resulting in a flicker on the first frame.
+  // Keeping this here for reference, and in the future, if offscreen canvas supports url filters, this can be used.
+  // For now, neither of them work for offscreen canvas, so canvas workers can't support the luma track matte mask.
+  // Naming it solution 2 to mark the extra comment lines.
+  /*
+  var svgString = [
+    '<svg xmlns="http://www.w3.org/2000/svg">',
+    '<filter id="' + id + '">',
+    '<feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="',
+    '0.3, 0.3, 0.3, 0, 0, ',
+    '0.3, 0.3, 0.3, 0, 0, ',
+    '0.3, 0.3, 0.3, 0, 0, ',
+    '0.3, 0.3, 0.3, 0, 0',
+    '"/>',
+    '</filter>',
+    '</svg>',
+  ].join('');
+  var blob = new Blob([svgString], { type: 'image/svg+xml' });
+  var url = URL.createObjectURL(blob);
+  */
+
+  function createLumaSvgFilter() {
+    var _svg = createNS('svg');
+    var fil = createNS('filter');
+    var matrix = createNS('feColorMatrix');
+    fil.setAttribute('id', id);
+    matrix.setAttribute('type', 'matrix');
+    matrix.setAttribute('color-interpolation-filters', 'sRGB');
+    matrix.setAttribute('values', '0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0');
+    fil.appendChild(matrix);
+    _svg.appendChild(fil);
+    _svg.setAttribute('id', id + '_svg');
+    if (featureSupport.svgLumaHidden) {
+      _svg.style.display = 'none';
+    }
+    return _svg;
+  }
+
+  function loadLuma() {
+    if (!lumaBuffer) {
+      svg = createLumaSvgFilter();
+      document.body.appendChild(svg);
+      lumaBuffer = createTag('canvas');
+      lumaBufferCtx = lumaBuffer.getContext('2d');
+      // lumaBufferCtx.filter = `url('${url}#__lottie_element_luma_buffer')`; // part of solution 2
+      lumaBufferCtx.filter = 'url(#' + id + ')';
+      lumaBufferCtx.fillStyle = 'rgba(0,0,0,0)';
+      lumaBufferCtx.fillRect(0, 0, 1, 1);
+    }
+  }
+
+  function getLuma(canvas) {
+    if (!lumaBuffer) {
+      loadLuma();
+    }
+    lumaBuffer.width = canvas.width;
+    lumaBuffer.height = canvas.height;
+    // lumaBufferCtx.filter = `url('${url}#__lottie_element_luma_buffer')`; // part of solution 2
+    lumaBufferCtx.filter = 'url(#' + id + ')';
+    return lumaBuffer;
+  }
+  return {
+    load: loadLuma,
+    get: getLuma,
+  };
+});
+
+function createCanvas(width, height) {
+  if (featureSupport.offscreenCanvas) {
+    return new OffscreenCanvas(width, height);
+  }
+  var canvas = createTag('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+}
+
+const assetLoader = (function () {
+  return {
+    loadLumaCanvas: lumaLoader.load,
+    getLumaCanvas: lumaLoader.get,
+    createCanvas: createCanvas,
+  };
+}());
+
+export default assetLoader;

package/player/js/utils/helpers/blendModes.js

@@ -0,0 +1,26 @@
+const getBlendMode = (function () {
+  var blendModeEnums = {
+    0: 'source-over',
+    1: 'multiply',
+    2: 'screen',
+    3: 'overlay',
+    4: 'darken',
+    5: 'lighten',
+    6: 'color-dodge',
+    7: 'color-burn',
+    8: 'hard-light',
+    9: 'soft-light',
+    10: 'difference',
+    11: 'exclusion',
+    12: 'hue',
+    13: 'saturation',
+    14: 'color',
+    15: 'luminosity',
+  };
+
+  return function (mode) {
+    return blendModeEnums[mode] || '';
+  };
+}());
+
+export default getBlendMode;

package/player/js/utils/helpers/dynamicProperties.js

@@ -0,0 +1,29 @@
+function DynamicPropertyContainer() {}
+DynamicPropertyContainer.prototype = {
+  addDynamicProperty: function (prop) {
+    if (this.dynamicProperties.indexOf(prop) === -1) {
+      this.dynamicProperties.push(prop);
+      this.container.addDynamicProperty(this);
+      this._isAnimated = true;
+    }
+  },
+  iterateDynamicProperties: function () {
+    this._mdf = false;
+    var i;
+    var len = this.dynamicProperties.length;
+    for (i = 0; i < len; i += 1) {
+      this.dynamicProperties[i].getValue();
+      if (this.dynamicProperties[i]._mdf) {
+        this._mdf = true;
+      }
+    }
+  },
+  initDynamicPropertyContainer: function (container) {
+    this.container = container;
+    this.dynamicProperties = [];
+    this._mdf = false;
+    this._isAnimated = false;
+  },
+};
+
+export default DynamicPropertyContainer;

package/player/js/utils/helpers/effectTypes.js

@@ -0,0 +1,3 @@
+export default {
+  TRANSFORM_EFFECT: 'transformEFfect',
+};

package/player/js/utils/helpers/html_elements.js

@@ -0,0 +1,6 @@
+function createTag(type) {
+  // return {appendChild:function(){},setAttribute:function(){},style:{}}
+  return document.createElement(type);
+}
+
+export default createTag;

package/player/js/utils/helpers/propTypes.js

@@ -0,0 +1,3 @@
+export default {
+  SHAPE: 'shape',
+};

package/player/js/utils/helpers/shapeEnums.js

@@ -0,0 +1,16 @@
+const lineCapEnum = {
+  1: 'butt',
+  2: 'round',
+  3: 'square',
+};
+
+const lineJoinEnum = {
+  1: 'miter',
+  2: 'round',
+  3: 'bevel',
+};
+
+export {
+  lineCapEnum,
+  lineJoinEnum,
+};

package/player/js/utils/helpers/svg_elements.js

@@ -0,0 +1,8 @@
+import { svgNS } from '../../main';
+
+function createNS(type) {
+  // return {appendChild:function(){},setAttribute:function(){},style:{}}
+  return document.createElementNS(svgNS, type);
+}
+
+export default createNS;