@lumen5/lottie-web 5.14.0

package/player/js/utils/expressions/ShapeInterface.js

@@ -0,0 +1,543 @@
+import ExpressionPropertyInterface from './ExpressionValueFactory';
+import propertyGroupFactory from './PropertyGroupFactory';
+import PropertyInterface from './PropertyInterface';
+import ShapePathInterface from './shapes/ShapePathInterface';
+
+const ShapeExpressionInterface = (function () {
+  function iterateElements(shapes, view, propertyGroup) {
+    var arr = [];
+    var i;
+    var len = shapes ? shapes.length : 0;
+    for (i = 0; i < len; i += 1) {
+      if (shapes[i].ty === 'gr') {
+        arr.push(groupInterfaceFactory(shapes[i], view[i], propertyGroup));
+      } else if (shapes[i].ty === 'fl') {
+        arr.push(fillInterfaceFactory(shapes[i], view[i], propertyGroup));
+      } else if (shapes[i].ty === 'st') {
+        arr.push(strokeInterfaceFactory(shapes[i], view[i], propertyGroup));
+      } else if (shapes[i].ty === 'tm') {
+        arr.push(trimInterfaceFactory(shapes[i], view[i], propertyGroup));
+      } else if (shapes[i].ty === 'tr') {
+        // arr.push(transformInterfaceFactory(shapes[i],view[i],propertyGroup));
+      } else if (shapes[i].ty === 'el') {
+        arr.push(ellipseInterfaceFactory(shapes[i], view[i], propertyGroup));
+      } else if (shapes[i].ty === 'sr') {
+        arr.push(starInterfaceFactory(shapes[i], view[i], propertyGroup));
+      } else if (shapes[i].ty === 'sh') {
+        arr.push(ShapePathInterface(shapes[i], view[i], propertyGroup));
+      } else if (shapes[i].ty === 'rc') {
+        arr.push(rectInterfaceFactory(shapes[i], view[i], propertyGroup));
+      } else if (shapes[i].ty === 'rd') {
+        arr.push(roundedInterfaceFactory(shapes[i], view[i], propertyGroup));
+      } else if (shapes[i].ty === 'rp') {
+        arr.push(repeaterInterfaceFactory(shapes[i], view[i], propertyGroup));
+      } else if (shapes[i].ty === 'gf') {
+        arr.push(gradientFillInterfaceFactory(shapes[i], view[i], propertyGroup));
+      } else {
+        arr.push(defaultInterfaceFactory(shapes[i], view[i], propertyGroup));
+      }
+    }
+    return arr;
+  }
+
+  function contentsInterfaceFactory(shape, view, propertyGroup) {
+    var interfaces;
+    var interfaceFunction = function _interfaceFunction(value) {
+      var i = 0;
+      var len = interfaces.length;
+      while (i < len) {
+        if (interfaces[i]._name === value || interfaces[i].mn === value || interfaces[i].propertyIndex === value || interfaces[i].ix === value || interfaces[i].ind === value) {
+          return interfaces[i];
+        }
+        i += 1;
+      }
+      if (typeof value === 'number') {
+        return interfaces[value - 1];
+      }
+      return null;
+    };
+
+    interfaceFunction.propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+    interfaces = iterateElements(shape.it, view.it, interfaceFunction.propertyGroup);
+    interfaceFunction.numProperties = interfaces.length;
+    var transformInterface = transformInterfaceFactory(shape.it[shape.it.length - 1], view.it[view.it.length - 1], interfaceFunction.propertyGroup);
+    interfaceFunction.transform = transformInterface;
+    interfaceFunction.propertyIndex = shape.cix;
+    interfaceFunction._name = shape.nm;
+
+    return interfaceFunction;
+  }
+
+  function groupInterfaceFactory(shape, view, propertyGroup) {
+    var interfaceFunction = function _interfaceFunction(value) {
+      switch (value) {
+        case 'ADBE Vectors Group':
+        case 'Contents':
+        case 2:
+          return interfaceFunction.content;
+          // Not necessary for now. Keeping them here in case a new case appears
+          // case 'ADBE Vector Transform Group':
+          // case 3:
+        default:
+          return interfaceFunction.transform;
+      }
+    };
+    interfaceFunction.propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+    var content = contentsInterfaceFactory(shape, view, interfaceFunction.propertyGroup);
+    var transformInterface = transformInterfaceFactory(shape.it[shape.it.length - 1], view.it[view.it.length - 1], interfaceFunction.propertyGroup);
+    interfaceFunction.content = content;
+    interfaceFunction.transform = transformInterface;
+    Object.defineProperty(interfaceFunction, '_name', {
+      get: function () {
+        return shape.nm;
+      },
+    });
+    // interfaceFunction.content = interfaceFunction;
+    interfaceFunction.numProperties = shape.np;
+    interfaceFunction.propertyIndex = shape.ix;
+    interfaceFunction.nm = shape.nm;
+    interfaceFunction.mn = shape.mn;
+    return interfaceFunction;
+  }
+
+  function fillInterfaceFactory(shape, view, propertyGroup) {
+    function interfaceFunction(val) {
+      if (val === 'Color' || val === 'color') {
+        return interfaceFunction.color;
+      } if (val === 'Opacity' || val === 'opacity') {
+        return interfaceFunction.opacity;
+      }
+      return null;
+    }
+    Object.defineProperties(interfaceFunction, {
+      color: {
+        get: ExpressionPropertyInterface(view.c),
+      },
+      opacity: {
+        get: ExpressionPropertyInterface(view.o),
+      },
+      _name: { value: shape.nm },
+      mn: { value: shape.mn },
+    });
+
+    view.c.setGroupProperty(PropertyInterface('Color', propertyGroup));
+    view.o.setGroupProperty(PropertyInterface('Opacity', propertyGroup));
+    return interfaceFunction;
+  }
+
+  function gradientFillInterfaceFactory(shape, view, propertyGroup) {
+    function interfaceFunction(val) {
+      if (val === 'Start Point' || val === 'start point') {
+        return interfaceFunction.startPoint;
+      }
+      if (val === 'End Point' || val === 'end point') {
+        return interfaceFunction.endPoint;
+      }
+      if (val === 'Opacity' || val === 'opacity') {
+        return interfaceFunction.opacity;
+      }
+      return null;
+    }
+    Object.defineProperties(interfaceFunction, {
+      startPoint: {
+        get: ExpressionPropertyInterface(view.s),
+      },
+      endPoint: {
+        get: ExpressionPropertyInterface(view.e),
+      },
+      opacity: {
+        get: ExpressionPropertyInterface(view.o),
+      },
+      type: {
+        get: function () {
+          return 'a';
+        },
+      },
+      _name: { value: shape.nm },
+      mn: { value: shape.mn },
+    });
+
+    view.s.setGroupProperty(PropertyInterface('Start Point', propertyGroup));
+    view.e.setGroupProperty(PropertyInterface('End Point', propertyGroup));
+    view.o.setGroupProperty(PropertyInterface('Opacity', propertyGroup));
+    return interfaceFunction;
+  }
+  function defaultInterfaceFactory() {
+    function interfaceFunction() {
+      return null;
+    }
+    return interfaceFunction;
+  }
+
+  function strokeInterfaceFactory(shape, view, propertyGroup) {
+    var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+    var _dashPropertyGroup = propertyGroupFactory(dashOb, _propertyGroup);
+    function addPropertyToDashOb(i) {
+      Object.defineProperty(dashOb, shape.d[i].nm, {
+        get: ExpressionPropertyInterface(view.d.dataProps[i].p),
+      });
+    }
+    var i;
+    var len = shape.d ? shape.d.length : 0;
+    var dashOb = {};
+    for (i = 0; i < len; i += 1) {
+      addPropertyToDashOb(i);
+      view.d.dataProps[i].p.setGroupProperty(_dashPropertyGroup);
+    }
+
+    function interfaceFunction(val) {
+      if (val === 'Color' || val === 'color') {
+        return interfaceFunction.color;
+      } if (val === 'Opacity' || val === 'opacity') {
+        return interfaceFunction.opacity;
+      } if (val === 'Stroke Width' || val === 'stroke width') {
+        return interfaceFunction.strokeWidth;
+      }
+      return null;
+    }
+    Object.defineProperties(interfaceFunction, {
+      color: {
+        get: ExpressionPropertyInterface(view.c),
+      },
+      opacity: {
+        get: ExpressionPropertyInterface(view.o),
+      },
+      strokeWidth: {
+        get: ExpressionPropertyInterface(view.w),
+      },
+      dash: {
+        get: function () {
+          return dashOb;
+        },
+      },
+      _name: { value: shape.nm },
+      mn: { value: shape.mn },
+    });
+
+    view.c.setGroupProperty(PropertyInterface('Color', _propertyGroup));
+    view.o.setGroupProperty(PropertyInterface('Opacity', _propertyGroup));
+    view.w.setGroupProperty(PropertyInterface('Stroke Width', _propertyGroup));
+    return interfaceFunction;
+  }
+
+  function trimInterfaceFactory(shape, view, propertyGroup) {
+    function interfaceFunction(val) {
+      if (val === shape.e.ix || val === 'End' || val === 'end') {
+        return interfaceFunction.end;
+      }
+      if (val === shape.s.ix) {
+        return interfaceFunction.start;
+      }
+      if (val === shape.o.ix) {
+        return interfaceFunction.offset;
+      }
+      return null;
+    }
+
+    var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+    interfaceFunction.propertyIndex = shape.ix;
+
+    view.s.setGroupProperty(PropertyInterface('Start', _propertyGroup));
+    view.e.setGroupProperty(PropertyInterface('End', _propertyGroup));
+    view.o.setGroupProperty(PropertyInterface('Offset', _propertyGroup));
+    interfaceFunction.propertyIndex = shape.ix;
+    interfaceFunction.propertyGroup = propertyGroup;
+
+    Object.defineProperties(interfaceFunction, {
+      start: {
+        get: ExpressionPropertyInterface(view.s),
+      },
+      end: {
+        get: ExpressionPropertyInterface(view.e),
+      },
+      offset: {
+        get: ExpressionPropertyInterface(view.o),
+      },
+      _name: { value: shape.nm },
+    });
+    interfaceFunction.mn = shape.mn;
+    return interfaceFunction;
+  }
+
+  function transformInterfaceFactory(shape, view, propertyGroup) {
+    function interfaceFunction(value) {
+      if (shape.a.ix === value || value === 'Anchor Point') {
+        return interfaceFunction.anchorPoint;
+      }
+      if (shape.o.ix === value || value === 'Opacity') {
+        return interfaceFunction.opacity;
+      }
+      if (shape.p.ix === value || value === 'Position') {
+        return interfaceFunction.position;
+      }
+      if (shape.r.ix === value || value === 'Rotation' || value === 'ADBE Vector Rotation') {
+        return interfaceFunction.rotation;
+      }
+      if (shape.s.ix === value || value === 'Scale') {
+        return interfaceFunction.scale;
+      }
+      if ((shape.sk && shape.sk.ix === value) || value === 'Skew') {
+        return interfaceFunction.skew;
+      }
+      if ((shape.sa && shape.sa.ix === value) || value === 'Skew Axis') {
+        return interfaceFunction.skewAxis;
+      }
+      return null;
+    }
+    var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+    view.transform.mProps.o.setGroupProperty(PropertyInterface('Opacity', _propertyGroup));
+    view.transform.mProps.p.setGroupProperty(PropertyInterface('Position', _propertyGroup));
+    view.transform.mProps.a.setGroupProperty(PropertyInterface('Anchor Point', _propertyGroup));
+    view.transform.mProps.s.setGroupProperty(PropertyInterface('Scale', _propertyGroup));
+    view.transform.mProps.r.setGroupProperty(PropertyInterface('Rotation', _propertyGroup));
+    if (view.transform.mProps.sk) {
+      view.transform.mProps.sk.setGroupProperty(PropertyInterface('Skew', _propertyGroup));
+      view.transform.mProps.sa.setGroupProperty(PropertyInterface('Skew Angle', _propertyGroup));
+    }
+    view.transform.op.setGroupProperty(PropertyInterface('Opacity', _propertyGroup));
+    Object.defineProperties(interfaceFunction, {
+      opacity: {
+        get: ExpressionPropertyInterface(view.transform.mProps.o),
+      },
+      position: {
+        get: ExpressionPropertyInterface(view.transform.mProps.p),
+      },
+      anchorPoint: {
+        get: ExpressionPropertyInterface(view.transform.mProps.a),
+      },
+      scale: {
+        get: ExpressionPropertyInterface(view.transform.mProps.s),
+      },
+      rotation: {
+        get: ExpressionPropertyInterface(view.transform.mProps.r),
+      },
+      skew: {
+        get: ExpressionPropertyInterface(view.transform.mProps.sk),
+      },
+      skewAxis: {
+        get: ExpressionPropertyInterface(view.transform.mProps.sa),
+      },
+      _name: { value: shape.nm },
+    });
+    interfaceFunction.ty = 'tr';
+    interfaceFunction.mn = shape.mn;
+    interfaceFunction.propertyGroup = propertyGroup;
+    return interfaceFunction;
+  }
+
+  function ellipseInterfaceFactory(shape, view, propertyGroup) {
+    function interfaceFunction(value) {
+      if (shape.p.ix === value) {
+        return interfaceFunction.position;
+      }
+      if (shape.s.ix === value) {
+        return interfaceFunction.size;
+      }
+      return null;
+    }
+    var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+    interfaceFunction.propertyIndex = shape.ix;
+    var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
+    prop.s.setGroupProperty(PropertyInterface('Size', _propertyGroup));
+    prop.p.setGroupProperty(PropertyInterface('Position', _propertyGroup));
+
+    Object.defineProperties(interfaceFunction, {
+      size: {
+        get: ExpressionPropertyInterface(prop.s),
+      },
+      position: {
+        get: ExpressionPropertyInterface(prop.p),
+      },
+      _name: { value: shape.nm },
+    });
+    interfaceFunction.mn = shape.mn;
+    return interfaceFunction;
+  }
+
+  function starInterfaceFactory(shape, view, propertyGroup) {
+    function interfaceFunction(value) {
+      if (shape.p.ix === value) {
+        return interfaceFunction.position;
+      }
+      if (shape.r.ix === value) {
+        return interfaceFunction.rotation;
+      }
+      if (shape.pt.ix === value) {
+        return interfaceFunction.points;
+      }
+      if (shape.or.ix === value || value === 'ADBE Vector Star Outer Radius') {
+        return interfaceFunction.outerRadius;
+      }
+      if (shape.os.ix === value) {
+        return interfaceFunction.outerRoundness;
+      }
+      if (shape.ir && (shape.ir.ix === value || value === 'ADBE Vector Star Inner Radius')) {
+        return interfaceFunction.innerRadius;
+      }
+      if (shape.is && shape.is.ix === value) {
+        return interfaceFunction.innerRoundness;
+      }
+      return null;
+    }
+
+    var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+    var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
+    interfaceFunction.propertyIndex = shape.ix;
+    prop.or.setGroupProperty(PropertyInterface('Outer Radius', _propertyGroup));
+    prop.os.setGroupProperty(PropertyInterface('Outer Roundness', _propertyGroup));
+    prop.pt.setGroupProperty(PropertyInterface('Points', _propertyGroup));
+    prop.p.setGroupProperty(PropertyInterface('Position', _propertyGroup));
+    prop.r.setGroupProperty(PropertyInterface('Rotation', _propertyGroup));
+    if (shape.ir) {
+      prop.ir.setGroupProperty(PropertyInterface('Inner Radius', _propertyGroup));
+      prop.is.setGroupProperty(PropertyInterface('Inner Roundness', _propertyGroup));
+    }
+
+    Object.defineProperties(interfaceFunction, {
+      position: {
+        get: ExpressionPropertyInterface(prop.p),
+      },
+      rotation: {
+        get: ExpressionPropertyInterface(prop.r),
+      },
+      points: {
+        get: ExpressionPropertyInterface(prop.pt),
+      },
+      outerRadius: {
+        get: ExpressionPropertyInterface(prop.or),
+      },
+      outerRoundness: {
+        get: ExpressionPropertyInterface(prop.os),
+      },
+      innerRadius: {
+        get: ExpressionPropertyInterface(prop.ir),
+      },
+      innerRoundness: {
+        get: ExpressionPropertyInterface(prop.is),
+      },
+      _name: { value: shape.nm },
+    });
+    interfaceFunction.mn = shape.mn;
+    return interfaceFunction;
+  }
+
+  function rectInterfaceFactory(shape, view, propertyGroup) {
+    function interfaceFunction(value) {
+      if (shape.p.ix === value) {
+        return interfaceFunction.position;
+      }
+      if (shape.r.ix === value) {
+        return interfaceFunction.roundness;
+      }
+      if (shape.s.ix === value || value === 'Size' || value === 'ADBE Vector Rect Size') {
+        return interfaceFunction.size;
+      }
+      return null;
+    }
+    var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+
+    var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
+    interfaceFunction.propertyIndex = shape.ix;
+    prop.p.setGroupProperty(PropertyInterface('Position', _propertyGroup));
+    prop.s.setGroupProperty(PropertyInterface('Size', _propertyGroup));
+    prop.r.setGroupProperty(PropertyInterface('Rotation', _propertyGroup));
+
+    Object.defineProperties(interfaceFunction, {
+      position: {
+        get: ExpressionPropertyInterface(prop.p),
+      },
+      roundness: {
+        get: ExpressionPropertyInterface(prop.r),
+      },
+      size: {
+        get: ExpressionPropertyInterface(prop.s),
+      },
+      _name: { value: shape.nm },
+    });
+    interfaceFunction.mn = shape.mn;
+    return interfaceFunction;
+  }
+
+  function roundedInterfaceFactory(shape, view, propertyGroup) {
+    function interfaceFunction(value) {
+      if (shape.r.ix === value || value === 'Round Corners 1') {
+        return interfaceFunction.radius;
+      }
+      return null;
+    }
+
+    var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+    var prop = view;
+    interfaceFunction.propertyIndex = shape.ix;
+    prop.rd.setGroupProperty(PropertyInterface('Radius', _propertyGroup));
+
+    Object.defineProperties(interfaceFunction, {
+      radius: {
+        get: ExpressionPropertyInterface(prop.rd),
+      },
+      _name: { value: shape.nm },
+    });
+    interfaceFunction.mn = shape.mn;
+    return interfaceFunction;
+  }
+
+  function repeaterInterfaceFactory(shape, view, propertyGroup) {
+    function interfaceFunction(value) {
+      if (shape.c.ix === value || value === 'Copies') {
+        return interfaceFunction.copies;
+      } if (shape.o.ix === value || value === 'Offset') {
+        return interfaceFunction.offset;
+      }
+      return null;
+    }
+
+    var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+    var prop = view;
+    interfaceFunction.propertyIndex = shape.ix;
+    prop.c.setGroupProperty(PropertyInterface('Copies', _propertyGroup));
+    prop.o.setGroupProperty(PropertyInterface('Offset', _propertyGroup));
+    Object.defineProperties(interfaceFunction, {
+      copies: {
+        get: ExpressionPropertyInterface(prop.c),
+      },
+      offset: {
+        get: ExpressionPropertyInterface(prop.o),
+      },
+      _name: { value: shape.nm },
+    });
+    interfaceFunction.mn = shape.mn;
+    return interfaceFunction;
+  }
+
+  return function (shapes, view, propertyGroup) {
+    var interfaces;
+    function _interfaceFunction(value) {
+      if (typeof value === 'number') {
+        value = value === undefined ? 1 : value;
+        if (value === 0) {
+          return propertyGroup;
+        }
+        return interfaces[value - 1];
+      }
+      var i = 0;
+      var len = interfaces.length;
+      while (i < len) {
+        if (interfaces[i]._name === value) {
+          return interfaces[i];
+        }
+        i += 1;
+      }
+      return null;
+    }
+    function parentGroupWrapper() {
+      return propertyGroup;
+    }
+    _interfaceFunction.propertyGroup = propertyGroupFactory(_interfaceFunction, parentGroupWrapper);
+    interfaces = iterateElements(shapes, view, _interfaceFunction.propertyGroup);
+    _interfaceFunction.numProperties = interfaces.length;
+    _interfaceFunction._name = 'Contents';
+    return _interfaceFunction;
+  };
+}());
+
+export default ShapeExpressionInterface;

package/player/js/utils/expressions/TextInterface.js

@@ -0,0 +1,35 @@
+const TextExpressionInterface = (function () {
+  return function (elem) {
+    var _sourceText;
+    function _thisLayerFunction(name) {
+      switch (name) {
+        case 'ADBE Text Document':
+          return _thisLayerFunction.sourceText;
+        default:
+          return null;
+      }
+    }
+    Object.defineProperty(_thisLayerFunction, 'sourceText', {
+      get: function () {
+        elem.textProperty.getValue();
+        var stringValue = elem.textProperty.currentData.t;
+        if (!_sourceText || stringValue !== _sourceText.value) {
+          _sourceText = new String(stringValue); // eslint-disable-line no-new-wrappers
+          // If stringValue is an empty string, eval returns undefined, so it has to be returned as a String primitive
+          _sourceText.value = stringValue || new String(stringValue); // eslint-disable-line no-new-wrappers
+          Object.defineProperty(_sourceText, 'style', {
+            get: function () {
+              return {
+                fillColor: elem.textProperty.currentData.fc,
+              };
+            },
+          });
+        }
+        return _sourceText;
+      },
+    });
+    return _thisLayerFunction;
+  };
+}());
+
+export default TextExpressionInterface;

package/player/js/utils/expressions/TextSelectorPropertyDecorator.js

@@ -0,0 +1,44 @@
+import ExpressionManager from './ExpressionManager';
+import expressionHelpers from './expressionHelpers';
+import TextSelectorProp from '../text/TextSelectorProperty';
+
+const TextExpressionSelectorPropFactory = (function () { // eslint-disable-line no-unused-vars
+  function getValueProxy(index, total) {
+    this.textIndex = index + 1;
+    this.textTotal = total;
+    this.v = this.getValue() * this.mult;
+    return this.v;
+  }
+
+  return function (elem, data) {
+    this.pv = 1;
+    this.comp = elem.comp;
+    this.elem = elem;
+    this.mult = 0.01;
+    this.propType = 'textSelector';
+    this.textTotal = data.totalChars;
+    this.selectorValue = 100;
+    this.lastValue = [1, 1, 1];
+    this.k = true;
+    this.x = true;
+    this.getValue = ExpressionManager.initiateExpression.bind(this)(elem, data, this);
+    this.getMult = getValueProxy;
+    this.getVelocityAtTime = expressionHelpers.getVelocityAtTime;
+    if (this.kf) {
+      this.getValueAtTime = expressionHelpers.getValueAtTime.bind(this);
+    } else {
+      this.getValueAtTime = expressionHelpers.getStaticValueAtTime.bind(this);
+    }
+    this.setGroupProperty = expressionHelpers.setGroupProperty;
+  };
+}());
+
+var propertyGetTextProp = TextSelectorProp.getTextSelectorProp;
+TextSelectorProp.getTextSelectorProp = function (elem, data, arr) {
+  if (data.t === 1) {
+    return new TextExpressionSelectorPropFactory(elem, data, arr); // eslint-disable-line no-undef
+  }
+  return propertyGetTextProp(elem, data, arr);
+};
+
+export default TextExpressionSelectorPropFactory;