@lumen5/lottie-web 5.14.0

package/player/js/utils/shapes/RepeaterModifier.js

@@ -0,0 +1,232 @@
+import {
+  extendPrototype,
+} from '../functionExtensions';
+import PropertyFactory from '../PropertyFactory';
+import Matrix from '../../3rd_party/transformation-matrix';
+import TransformPropertyFactory from '../TransformProperty';
+import {
+  ShapeModifier,
+} from './ShapeModifiers';
+
+function RepeaterModifier() {}
+extendPrototype([ShapeModifier], RepeaterModifier);
+
+RepeaterModifier.prototype.initModifierProperties = function (elem, data) {
+  this.getValue = this.processKeys;
+  this.c = PropertyFactory.getProp(elem, data.c, 0, null, this);
+  this.o = PropertyFactory.getProp(elem, data.o, 0, null, this);
+  this.tr = TransformPropertyFactory.getTransformProperty(elem, data.tr, this);
+  this.so = PropertyFactory.getProp(elem, data.tr.so, 0, 0.01, this);
+  this.eo = PropertyFactory.getProp(elem, data.tr.eo, 0, 0.01, this);
+  this.data = data;
+  if (!this.dynamicProperties.length) {
+    this.getValue(true);
+  }
+  this._isAnimated = !!this.dynamicProperties.length;
+  this.pMatrix = new Matrix();
+  this.rMatrix = new Matrix();
+  this.sMatrix = new Matrix();
+  this.tMatrix = new Matrix();
+  this.matrix = new Matrix();
+};
+
+RepeaterModifier.prototype.applyTransforms = function (pMatrix, rMatrix, sMatrix, transform, perc, inv) {
+  var dir = inv ? -1 : 1;
+  var scaleX = transform.s.v[0] + (1 - transform.s.v[0]) * (1 - perc);
+  var scaleY = transform.s.v[1] + (1 - transform.s.v[1]) * (1 - perc);
+  pMatrix.translate(transform.p.v[0] * dir * perc, transform.p.v[1] * dir * perc, transform.p.v[2]);
+  rMatrix.translate(-transform.a.v[0], -transform.a.v[1], transform.a.v[2]);
+  rMatrix.rotate(-transform.r.v * dir * perc);
+  rMatrix.translate(transform.a.v[0], transform.a.v[1], transform.a.v[2]);
+  sMatrix.translate(-transform.a.v[0], -transform.a.v[1], transform.a.v[2]);
+  sMatrix.scale(inv ? 1 / scaleX : scaleX, inv ? 1 / scaleY : scaleY);
+  sMatrix.translate(transform.a.v[0], transform.a.v[1], transform.a.v[2]);
+};
+
+RepeaterModifier.prototype.init = function (elem, arr, pos, elemsData) {
+  this.elem = elem;
+  this.arr = arr;
+  this.pos = pos;
+  this.elemsData = elemsData;
+  this._currentCopies = 0;
+  this._elements = [];
+  this._groups = [];
+  this.frameId = -1;
+  this.initDynamicPropertyContainer(elem);
+  this.initModifierProperties(elem, arr[pos]);
+  while (pos > 0) {
+    pos -= 1;
+    // this._elements.unshift(arr.splice(pos,1)[0]);
+    this._elements.unshift(arr[pos]);
+  }
+  if (this.dynamicProperties.length) {
+    this.k = true;
+  } else {
+    this.getValue(true);
+  }
+};
+
+RepeaterModifier.prototype.resetElements = function (elements) {
+  var i;
+  var len = elements.length;
+  for (i = 0; i < len; i += 1) {
+    elements[i]._processed = false;
+    if (elements[i].ty === 'gr') {
+      this.resetElements(elements[i].it);
+    }
+  }
+};
+
+RepeaterModifier.prototype.cloneElements = function (elements) {
+  var newElements = JSON.parse(JSON.stringify(elements));
+  this.resetElements(newElements);
+  return newElements;
+};
+
+RepeaterModifier.prototype.changeGroupRender = function (elements, renderFlag) {
+  var i;
+  var len = elements.length;
+  for (i = 0; i < len; i += 1) {
+    elements[i]._render = renderFlag;
+    if (elements[i].ty === 'gr') {
+      this.changeGroupRender(elements[i].it, renderFlag);
+    }
+  }
+};
+
+RepeaterModifier.prototype.processShapes = function (_isFirstFrame) {
+  var items;
+  var itemsTransform;
+  var i;
+  var dir;
+  var cont;
+  var hasReloaded = false;
+  if (this._mdf || _isFirstFrame) {
+    var copies = Math.ceil(this.c.v);
+    if (this._groups.length < copies) {
+      while (this._groups.length < copies) {
+        var group = {
+          it: this.cloneElements(this._elements),
+          ty: 'gr',
+        };
+        group.it.push({
+          a: { a: 0, ix: 1, k: [0, 0] }, nm: 'Transform', o: { a: 0, ix: 7, k: 100 }, p: { a: 0, ix: 2, k: [0, 0] }, r: { a: 1, ix: 6, k: [{ s: 0, e: 0, t: 0 }, { s: 0, e: 0, t: 1 }] }, s: { a: 0, ix: 3, k: [100, 100] }, sa: { a: 0, ix: 5, k: 0 }, sk: { a: 0, ix: 4, k: 0 }, ty: 'tr',
+        });
+
+        this.arr.splice(0, 0, group);
+        this._groups.splice(0, 0, group);
+        this._currentCopies += 1;
+      }
+      this.elem.reloadShapes();
+      hasReloaded = true;
+    }
+    cont = 0;
+    var renderFlag;
+    for (i = 0; i <= this._groups.length - 1; i += 1) {
+      renderFlag = cont < copies;
+      this._groups[i]._render = renderFlag;
+      this.changeGroupRender(this._groups[i].it, renderFlag);
+      if (!renderFlag) {
+        var elems = this.elemsData[i].it;
+        var transformData = elems[elems.length - 1];
+        if (transformData.transform.op.v !== 0) {
+          transformData.transform.op._mdf = true;
+          transformData.transform.op.v = 0;
+        } else {
+          transformData.transform.op._mdf = false;
+        }
+      }
+      cont += 1;
+    }
+
+    this._currentCopies = copies;
+    /// /
+
+    var offset = this.o.v;
+    var offsetModulo = offset % 1;
+    var roundOffset = offset > 0 ? Math.floor(offset) : Math.ceil(offset);
+    var pProps = this.pMatrix.props;
+    var rProps = this.rMatrix.props;
+    var sProps = this.sMatrix.props;
+    this.pMatrix.reset();
+    this.rMatrix.reset();
+    this.sMatrix.reset();
+    this.tMatrix.reset();
+    this.matrix.reset();
+    var iteration = 0;
+
+    if (offset > 0) {
+      while (iteration < roundOffset) {
+        this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, false);
+        iteration += 1;
+      }
+      if (offsetModulo) {
+        this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, offsetModulo, false);
+        iteration += offsetModulo;
+      }
+    } else if (offset < 0) {
+      while (iteration > roundOffset) {
+        this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, true);
+        iteration -= 1;
+      }
+      if (offsetModulo) {
+        this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, -offsetModulo, true);
+        iteration -= offsetModulo;
+      }
+    }
+    i = this.data.m === 1 ? 0 : this._currentCopies - 1;
+    dir = this.data.m === 1 ? 1 : -1;
+    cont = this._currentCopies;
+    var j;
+    var jLen;
+    while (cont) {
+      items = this.elemsData[i].it;
+      itemsTransform = items[items.length - 1].transform.mProps.v.props;
+      jLen = itemsTransform.length;
+      items[items.length - 1].transform.mProps._mdf = true;
+      items[items.length - 1].transform.op._mdf = true;
+      items[items.length - 1].transform.op.v = this._currentCopies === 1
+        ? this.so.v
+        : this.so.v + (this.eo.v - this.so.v) * (i / (this._currentCopies - 1));
+
+      if (iteration !== 0) {
+        if ((i !== 0 && dir === 1) || (i !== this._currentCopies - 1 && dir === -1)) {
+          this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, false);
+        }
+        this.matrix.transform(rProps[0], rProps[1], rProps[2], rProps[3], rProps[4], rProps[5], rProps[6], rProps[7], rProps[8], rProps[9], rProps[10], rProps[11], rProps[12], rProps[13], rProps[14], rProps[15]);
+        this.matrix.transform(sProps[0], sProps[1], sProps[2], sProps[3], sProps[4], sProps[5], sProps[6], sProps[7], sProps[8], sProps[9], sProps[10], sProps[11], sProps[12], sProps[13], sProps[14], sProps[15]);
+        this.matrix.transform(pProps[0], pProps[1], pProps[2], pProps[3], pProps[4], pProps[5], pProps[6], pProps[7], pProps[8], pProps[9], pProps[10], pProps[11], pProps[12], pProps[13], pProps[14], pProps[15]);
+
+        for (j = 0; j < jLen; j += 1) {
+          itemsTransform[j] = this.matrix.props[j];
+        }
+        this.matrix.reset();
+      } else {
+        this.matrix.reset();
+        for (j = 0; j < jLen; j += 1) {
+          itemsTransform[j] = this.matrix.props[j];
+        }
+      }
+      iteration += 1;
+      cont -= 1;
+      i += dir;
+    }
+  } else {
+    cont = this._currentCopies;
+    i = 0;
+    dir = 1;
+    while (cont) {
+      items = this.elemsData[i].it;
+      itemsTransform = items[items.length - 1].transform.mProps.v.props;
+      items[items.length - 1].transform.mProps._mdf = false;
+      items[items.length - 1].transform.op._mdf = false;
+      cont -= 1;
+      i += dir;
+    }
+  }
+  return hasReloaded;
+};
+
+RepeaterModifier.prototype.addShape = function () {};
+
+export default RepeaterModifier;

package/player/js/utils/shapes/RoundCornersModifier.js

@@ -0,0 +1,122 @@
+import {
+  roundCorner,
+} from '../common';
+import {
+  extendPrototype,
+} from '../functionExtensions';
+import PropertyFactory from '../PropertyFactory';
+import shapePool from '../pooling/shape_pool';
+import {
+  ShapeModifier,
+} from './ShapeModifiers';
+
+function RoundCornersModifier() {}
+extendPrototype([ShapeModifier], RoundCornersModifier);
+RoundCornersModifier.prototype.initModifierProperties = function (elem, data) {
+  this.getValue = this.processKeys;
+  this.rd = PropertyFactory.getProp(elem, data.r, 0, null, this);
+  this._isAnimated = !!this.rd.effectsSequence.length;
+};
+
+RoundCornersModifier.prototype.processPath = function (path, round) {
+  var clonedPath = shapePool.newElement();
+  clonedPath.c = path.c;
+  var i;
+  var len = path._length;
+  var currentV;
+  var currentI;
+  var currentO;
+  var closerV;
+  var distance;
+  var newPosPerc;
+  var index = 0;
+  var vX;
+  var vY;
+  var oX;
+  var oY;
+  var iX;
+  var iY;
+  for (i = 0; i < len; i += 1) {
+    currentV = path.v[i];
+    currentO = path.o[i];
+    currentI = path.i[i];
+    if (currentV[0] === currentO[0] && currentV[1] === currentO[1] && currentV[0] === currentI[0] && currentV[1] === currentI[1]) {
+      if ((i === 0 || i === len - 1) && !path.c) {
+        clonedPath.setTripleAt(currentV[0], currentV[1], currentO[0], currentO[1], currentI[0], currentI[1], index);
+        /* clonedPath.v[index] = currentV;
+                clonedPath.o[index] = currentO;
+                clonedPath.i[index] = currentI; */
+        index += 1;
+      } else {
+        if (i === 0) {
+          closerV = path.v[len - 1];
+        } else {
+          closerV = path.v[i - 1];
+        }
+        distance = Math.sqrt(Math.pow(currentV[0] - closerV[0], 2) + Math.pow(currentV[1] - closerV[1], 2));
+        newPosPerc = distance ? Math.min(distance / 2, round) / distance : 0;
+        iX = currentV[0] + (closerV[0] - currentV[0]) * newPosPerc;
+        vX = iX;
+        iY = currentV[1] - (currentV[1] - closerV[1]) * newPosPerc;
+        vY = iY;
+        oX = vX - (vX - currentV[0]) * roundCorner;
+        oY = vY - (vY - currentV[1]) * roundCorner;
+        clonedPath.setTripleAt(vX, vY, oX, oY, iX, iY, index);
+        index += 1;
+
+        if (i === len - 1) {
+          closerV = path.v[0];
+        } else {
+          closerV = path.v[i + 1];
+        }
+        distance = Math.sqrt(Math.pow(currentV[0] - closerV[0], 2) + Math.pow(currentV[1] - closerV[1], 2));
+        newPosPerc = distance ? Math.min(distance / 2, round) / distance : 0;
+        oX = currentV[0] + (closerV[0] - currentV[0]) * newPosPerc;
+        vX = oX;
+        oY = currentV[1] + (closerV[1] - currentV[1]) * newPosPerc;
+        vY = oY;
+        iX = vX - (vX - currentV[0]) * roundCorner;
+        iY = vY - (vY - currentV[1]) * roundCorner;
+        clonedPath.setTripleAt(vX, vY, oX, oY, iX, iY, index);
+        index += 1;
+      }
+    } else {
+      clonedPath.setTripleAt(path.v[i][0], path.v[i][1], path.o[i][0], path.o[i][1], path.i[i][0], path.i[i][1], index);
+      index += 1;
+    }
+  }
+  return clonedPath;
+};
+
+RoundCornersModifier.prototype.processShapes = function (_isFirstFrame) {
+  var shapePaths;
+  var i;
+  var len = this.shapes.length;
+  var j;
+  var jLen;
+  var rd = this.rd.v;
+
+  if (rd !== 0) {
+    var shapeData;
+    var localShapeCollection;
+    for (i = 0; i < len; i += 1) {
+      shapeData = this.shapes[i];
+      localShapeCollection = shapeData.localShapeCollection;
+      if (!(!shapeData.shape._mdf && !this._mdf && !_isFirstFrame)) {
+        localShapeCollection.releaseShapes();
+        shapeData.shape._mdf = true;
+        shapePaths = shapeData.shape.paths.shapes;
+        jLen = shapeData.shape.paths._length;
+        for (j = 0; j < jLen; j += 1) {
+          localShapeCollection.addShape(this.processPath(shapePaths[j], rd));
+        }
+      }
+      shapeData.shape.paths = shapeData.localShapeCollection;
+    }
+  }
+  if (!this.dynamicProperties.length) {
+    this._mdf = false;
+  }
+};
+
+export default RoundCornersModifier;

package/player/js/utils/shapes/ShapeCollection.js

@@ -0,0 +1,29 @@
+import {
+  createSizedArray,
+} from '../helpers/arrays';
+import shapePool from '../pooling/shape_pool';
+
+function ShapeCollection() {
+  this._length = 0;
+  this._maxLength = 4;
+  this.shapes = createSizedArray(this._maxLength);
+}
+
+ShapeCollection.prototype.addShape = function (shapeData) {
+  if (this._length === this._maxLength) {
+    this.shapes = this.shapes.concat(createSizedArray(this._maxLength));
+    this._maxLength *= 2;
+  }
+  this.shapes[this._length] = shapeData;
+  this._length += 1;
+};
+
+ShapeCollection.prototype.releaseShapes = function () {
+  var i;
+  for (i = 0; i < this._length; i += 1) {
+    shapePool.release(this.shapes[i]);
+  }
+  this._length = 0;
+};
+
+export default ShapeCollection;

package/player/js/utils/shapes/ShapeModifiers.js

@@ -0,0 +1,71 @@
+import {
+  extendPrototype,
+} from '../functionExtensions';
+import DynamicPropertyContainer from '../helpers/dynamicProperties';
+import {
+  initialDefaultFrame,
+} from '../../main';
+import shapeCollectionPool from '../pooling/shapeCollection_pool';
+
+const ShapeModifiers = (function () {
+  var ob = {};
+  var modifiers = {};
+  ob.registerModifier = registerModifier;
+  ob.getModifier = getModifier;
+
+  function registerModifier(nm, factory) {
+    if (!modifiers[nm]) {
+      modifiers[nm] = factory;
+    }
+  }
+
+  function getModifier(nm, elem, data) {
+    return new modifiers[nm](elem, data);
+  }
+
+  return ob;
+}());
+
+function ShapeModifier() {}
+ShapeModifier.prototype.initModifierProperties = function () {};
+ShapeModifier.prototype.addShapeToModifier = function () {};
+ShapeModifier.prototype.addShape = function (data) {
+  if (!this.closed) {
+    // Adding shape to dynamic properties. It covers the case where a shape has no effects applied, to reset it's _mdf state on every tick.
+    data.sh.container.addDynamicProperty(data.sh);
+    var shapeData = { shape: data.sh, data: data, localShapeCollection: shapeCollectionPool.newShapeCollection() };
+    this.shapes.push(shapeData);
+    this.addShapeToModifier(shapeData);
+    if (this._isAnimated) {
+      data.setAsAnimated();
+    }
+  }
+};
+ShapeModifier.prototype.init = function (elem, data) {
+  this.shapes = [];
+  this.elem = elem;
+  this.initDynamicPropertyContainer(elem);
+  this.initModifierProperties(elem, data);
+  this.frameId = initialDefaultFrame;
+  this.closed = false;
+  this.k = false;
+  if (this.dynamicProperties.length) {
+    this.k = true;
+  } else {
+    this.getValue(true);
+  }
+};
+ShapeModifier.prototype.processKeys = function () {
+  if (this.elem.globalData.frameId === this.frameId) {
+    return;
+  }
+  this.frameId = this.elem.globalData.frameId;
+  this.iterateDynamicProperties();
+};
+
+extendPrototype([DynamicPropertyContainer], ShapeModifier);
+
+export {
+  ShapeModifiers,
+  ShapeModifier,
+};

package/player/js/utils/shapes/ShapePath.js

@@ -0,0 +1,100 @@
+import {
+  createSizedArray,
+} from '../helpers/arrays';
+import pointPool from '../pooling/point_pool';
+
+function ShapePath() {
+  this.c = false;
+  this._length = 0;
+  this._maxLength = 8;
+  this.v = createSizedArray(this._maxLength);
+  this.o = createSizedArray(this._maxLength);
+  this.i = createSizedArray(this._maxLength);
+}
+
+ShapePath.prototype.setPathData = function (closed, len) {
+  this.c = closed;
+  this.setLength(len);
+  var i = 0;
+  while (i < len) {
+    this.v[i] = pointPool.newElement();
+    this.o[i] = pointPool.newElement();
+    this.i[i] = pointPool.newElement();
+    i += 1;
+  }
+};
+
+ShapePath.prototype.setLength = function (len) {
+  while (this._maxLength < len) {
+    this.doubleArrayLength();
+  }
+  this._length = len;
+};
+
+ShapePath.prototype.doubleArrayLength = function () {
+  this.v = this.v.concat(createSizedArray(this._maxLength));
+  this.i = this.i.concat(createSizedArray(this._maxLength));
+  this.o = this.o.concat(createSizedArray(this._maxLength));
+  this._maxLength *= 2;
+};
+
+ShapePath.prototype.setXYAt = function (x, y, type, pos, replace) {
+  var arr;
+  this._length = Math.max(this._length, pos + 1);
+  if (this._length >= this._maxLength) {
+    this.doubleArrayLength();
+  }
+  switch (type) {
+    case 'v':
+      arr = this.v;
+      break;
+    case 'i':
+      arr = this.i;
+      break;
+    case 'o':
+      arr = this.o;
+      break;
+    default:
+      arr = [];
+      break;
+  }
+  if (!arr[pos] || (arr[pos] && !replace)) {
+    arr[pos] = pointPool.newElement();
+  }
+  arr[pos][0] = x;
+  arr[pos][1] = y;
+};
+
+ShapePath.prototype.setTripleAt = function (vX, vY, oX, oY, iX, iY, pos, replace) {
+  this.setXYAt(vX, vY, 'v', pos, replace);
+  this.setXYAt(oX, oY, 'o', pos, replace);
+  this.setXYAt(iX, iY, 'i', pos, replace);
+};
+
+ShapePath.prototype.reverse = function () {
+  var newPath = new ShapePath();
+  newPath.setPathData(this.c, this._length);
+  var vertices = this.v;
+  var outPoints = this.o;
+  var inPoints = this.i;
+  var init = 0;
+  if (this.c) {
+    newPath.setTripleAt(vertices[0][0], vertices[0][1], inPoints[0][0], inPoints[0][1], outPoints[0][0], outPoints[0][1], 0, false);
+    init = 1;
+  }
+  var cnt = this._length - 1;
+  var len = this._length;
+
+  var i;
+  for (i = init; i < len; i += 1) {
+    newPath.setTripleAt(vertices[cnt][0], vertices[cnt][1], inPoints[cnt][0], inPoints[cnt][1], outPoints[cnt][0], outPoints[cnt][1], i, false);
+    cnt -= 1;
+  }
+  return newPath;
+};
+
+ShapePath.prototype.length = function () {
+  return this._length;
+};
+
+export default ShapePath;