@eva/plugin-renderer-lottie 2.0.1-beta.5 → 2.0.1-beta.7

package/dist/plugin-renderer-lottie.cjs.js

@@ -279,7 +279,7 @@ if (typeof Uint8ClampedArray === 'function' && typeof Float32Array === 'function
  * @param {*} len a
  * @return {*}
  */
-function createSizedArray$1(len) {
+function createSizedArray$2(len) {
   return new Array(len);
 }
 
@@ -509,7 +509,7 @@ var BezierFactory = {
  * @return {*}
  */
 function _double(arr) {
-  return arr.concat(createSizedArray$1(arr.length));
+  return arr.concat(createSizedArray$2(arr.length));
 }
 var pooling = {
   double: _double,
@@ -518,7 +518,7 @@ var pooling = {
 var PoolFactory = function PoolFactory(initialLength, _create, _release) {
   var _length = 0;
   var _maxLength = initialLength;
-  var pool = createSizedArray$1(_maxLength);
+  var pool = createSizedArray$2(_maxLength);
   var ob = {
     newElement: newElement,
     release: release,
@@ -798,7 +798,7 @@ function buildBezierData(pt1, pt2, pt3, pt4) {
     var bezierData = new BezierData(curveSegments);
     var len = pt3.length;
     for (var k = 0; k < curveSegments; k += 1) {
-      point = createSizedArray$1(len);
+      point = createSizedArray$2(len);
       var perc = k / (curveSegments - 1);
       ptDistance = 0;
       for (var i = 0; i < len; i += 1) {
@@ -2186,9 +2186,9 @@ var ShapePath = /*#__PURE__*/ (function () {
     this.c = false;
     this._length = 0;
     this._maxLength = 8;
-    this.v = createSizedArray$1(this._maxLength);
-    this.o = createSizedArray$1(this._maxLength);
-    this.i = createSizedArray$1(this._maxLength);
+    this.v = createSizedArray$2(this._maxLength);
+    this.o = createSizedArray$2(this._maxLength);
+    this.i = createSizedArray$2(this._maxLength);
   }
 
   /**
@@ -2232,9 +2232,9 @@ var ShapePath = /*#__PURE__*/ (function () {
     {
       key: 'doubleArrayLength',
       value: function doubleArrayLength() {
-        this.v = this.v.concat(createSizedArray$1(this._maxLength));
-        this.i = this.i.concat(createSizedArray$1(this._maxLength));
-        this.o = this.o.concat(createSizedArray$1(this._maxLength));
+        this.v = this.v.concat(createSizedArray$2(this._maxLength));
+        this.i = this.i.concat(createSizedArray$2(this._maxLength));
+        this.o = this.o.concat(createSizedArray$2(this._maxLength));
         this._maxLength *= 2;
       },
 
@@ -2403,7 +2403,7 @@ var ShapeCollection = /*#__PURE__*/ (function () {
     _classCallCheck(this, ShapeCollection);
     this._length = 0;
     this._maxLength = 4;
-    this.shapes = createSizedArray$1(this._maxLength);
+    this.shapes = createSizedArray$2(this._maxLength);
   }
 
   /**
@@ -2415,7 +2415,7 @@ var ShapeCollection = /*#__PURE__*/ (function () {
       key: 'addShape',
       value: function addShape(shapeData) {
         if (this._length === this._maxLength) {
-          this.shapes = this.shapes.concat(createSizedArray$1(this._maxLength));
+          this.shapes = this.shapes.concat(createSizedArray$2(this._maxLength));
           this._maxLength *= 2;
         }
         this.shapes[this._length] = shapeData;
@@ -2440,7 +2440,7 @@ var ShapeCollection = /*#__PURE__*/ (function () {
 
 var _length = 0;
 var _maxLength = 4;
-var pool = createSizedArray$1(_maxLength);
+var pool = createSizedArray$2(_maxLength);
 
 /**
  * a
@@ -3265,7 +3265,7 @@ var MaskFrames = /*#__PURE__*/ (function (_DynamicPropertyConta) {
     _this.propType = 'mask';
     _this.masksProperties = masksProperties || [];
     _this.initDynamicPropertyContainer(elem);
-    _this.viewData = createSizedArray$1(_this.masksProperties.length);
+    _this.viewData = createSizedArray$2(_this.masksProperties.length);
     var len = _this.masksProperties.length;
     var hasMasks = false;
     for (var i = 0; i < len; i++) {
@@ -5696,7 +5696,7 @@ var DashProperty = /*#__PURE__*/ (function (_DynamicPropertyConta) {
     _this = _callSuper(this, DashProperty);
     _this.elem = elem;
     _this.frameId = -1;
-    _this.dataProps = createSizedArray$1(data.length);
+    _this.dataProps = createSizedArray$2(data.length);
     // this.renderer = renderer;
     _this.k = false;
     // this.dashStr = '';
@@ -7421,7 +7421,7 @@ var TextAnimatorProperty = /*#__PURE__*/ (function (_DynamicPropertyConta) {
     _this._textData = textData;
     _this._renderType = renderType;
     _this.elem = elem;
-    _this._animatorsData = createSizedArray$1(_this._textData.a.length);
+    _this._animatorsData = createSizedArray$2(_this._textData.a.length);
     _this._pathData = {};
     _this._moreOptions = {
       alignment: {},
@@ -10216,7 +10216,6 @@ const Tween = {
 };
 
 ({
-  UPDATE_PRIORITY: pixi_js.UPDATE_PRIORITY,
   animationTicker: pixi_js.Ticker.shared,
 });
 
@@ -10276,6 +10275,61 @@ class LottieGraphicsMask extends pixi_js.Graphics {
   }
 }
 
+const updateTransformByHierarchy = (container, transform, parent) => {
+  // const localMatrixA = new Matrix();
+
+  if (transform.p) {
+    container.x = transform.p.v[0];
+    container.y = transform.p.v[1];
+  } else {
+    container.x = transform.px.v;
+    container.y = transform.py.v;
+  }
+
+  container.pivot.x = transform.a.v[0];
+  container.pivot.y = transform.a.v[1];
+
+  container.scale.x = transform.s.v[0];
+  container.scale.y = transform.s.v[1];
+
+  if (transform.r) {
+    container.rotation = transform.r.v + transform.orientation;
+  } else if (transform.rz) {
+    container.rotation = transform.rz.v + transform.or.v[2];
+  }
+
+  // let x = transform.p ? transform.p.v[0] : transform.px.v;
+  // let y = transform.p ? transform.p.v[1] : transform.py.v;
+
+  // const rotation = transform.r
+  //   ? transform.r.v + transform.orientation
+  //   : transform.rz
+  //   ? transform.rz.v + transform.or.v[2]
+  //   : 0;
+
+  // localMatrixA.setTransform(
+  //   x,
+  //   y,
+  //   transform.a.v[0],
+  //   transform.a.v[1],
+  //   transform.s.v[0],
+  //   transform.s.v[1],
+  //   rotation,
+  //   0,
+  //   0
+  // );
+
+  // if (parent) {
+  //   const parentWorldTransform = parent.worldTransform.clone();
+  //   container.setFromMatrix(localMatrixA.append(parentWorldTransform));
+  // } else {
+  //   container.setFromMatrix(localMatrixA);
+  // }
+
+  const parentAlpha = parent ? parent.alpha : 1;
+  container.alpha = parentAlpha * transform.o.v;
+};
+
 /**
  * NullElement class
  * @class
@@ -10324,27 +10378,7 @@ class CompElement extends pixi_js.Container {
   }
 
   updateLottieTransform(transform) {
-    if (transform.p) {
-      this.x = transform.p.v[0];
-      this.y = transform.p.v[1];
-    } else {
-      this.x = transform.px.v;
-      this.y = transform.py.v;
-    }
-
-    this.pivot.x = transform.a.v[0];
-    this.pivot.y = transform.a.v[1];
-
-    this.scale.x = transform.s.v[0];
-    this.scale.y = transform.s.v[1];
-
-    if (transform.r) {
-      this.rotation = transform.r.v + transform.orientation;
-    } else if (transform.rz) {
-      this.rotation = transform.rz.v + transform.or.v[2];
-    }
-
-    this.alpha = transform.o.v;
+    updateTransformByHierarchy(this, transform, this.hierarchy);
   }
 
   /**
@@ -10519,27 +10553,7 @@ class ShapeElement extends pixi_js.Graphics {
    * @param {*} transform
    */
   updateLottieTransform(transform) {
-    if (transform.p) {
-      this.x = transform.p.v[0];
-      this.y = transform.p.v[1];
-    } else {
-      this.x = transform.px.v;
-      this.y = transform.py.v;
-    }
-
-    this.pivot.x = transform.a.v[0];
-    this.pivot.y = transform.a.v[1];
-
-    this.scale.x = transform.s.v[0];
-    this.scale.y = transform.s.v[1];
-
-    if (transform.r) {
-      this.rotation = transform.r.v + transform.orientation;
-    } else if (transform.rz) {
-      this.rotation = transform.rz.v + transform.or.v[2];
-    }
-
-    this.alpha = transform.o.v;
+    updateTransformByHierarchy(this, transform, this.hierarchy);
   }
 
   /**
@@ -10565,6 +10579,154 @@ function createSizedArray(len) {
   return Array.apply(null, { length: len });
 }
 
+/**
+ * NullElement class
+ * @class
+ * @private
+ */
+class TextElement extends pixi_js.Text {
+  /**
+   * ShapeElement constructor
+   */
+  constructor(lottieLayer) {
+    super();
+    this.label = lottieLayer.fullname;
+    this.lottieLayer = lottieLayer;
+    this.lottieLayer.lettersChangedFlag = true;
+    if (this.lottieLayer.masks) {
+      this.mask = new LottieGraphicsMask(this.lottieLayer.session.local, this.lottieLayer);
+      this.addChild(this.mask);
+    }
+
+    this.init();
+    this.buildNewText();
+    this.updateLottie = this.updateLottie.bind(this);
+    this.updateLottie(this.lottieLayer, true);
+    this.lottieLayer.on('updatelayer', this.updateLottie);
+    this.onRender = () => {
+      this.updateLottie(this.lottieLayer, true);
+    };
+  }
+
+  init() {
+    this._textSpans = [];
+    this._yOffset = 0;
+    this._fillColorAnim = false;
+    this._strokeColorAnim = false;
+    this._strokeWidthAnim = false;
+    this._stroke = false;
+    this._fill = false;
+    this._justifyOffset = 0;
+    this._currentRender = null;
+    this._renderType = 'canvas';
+    this._fillStyle = {};
+    this._values = {
+      fill: '#000000',
+      stroke: '#000000',
+      sWidth: 0,
+      fValue: '',
+    };
+  }
+
+  buildNewText() {
+    const documentData = this.lottieLayer.textProperty.currentData;
+    this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0);
+    let hasFill = false;
+    if (documentData.fc) {
+      hasFill = true;
+      this._values.fill = Tools.rgb2hex(
+        documentData.fc.map(item => {
+          return item > 1 ? item : item * 255;
+        }),
+        documentData.fc,
+      );
+    } else {
+      this._values.fill = '#000000';
+    }
+    this._fill = hasFill;
+    let hasStroke = false;
+    if (documentData.sc) {
+      hasStroke = true;
+      this._values.stroke = this.buildColor(documentData.sc);
+      this._values.sWidth = documentData.sw;
+    }
+    const fontManager = this.lottieLayer.global.fontManager;
+    this._stroke = hasStroke;
+    this._values.fontSize = documentData.finalSize;
+    this._values.fontFamily = fontManager.getFontByName(documentData.f).fFamily;
+    this._values.fontWeight = documentData.fWeight;
+    this._values.fontStyle = documentData.fStyle;
+    this._values.lineHeight = documentData.finalLineHeight;
+    this._text = documentData.t;
+
+    this.renderText();
+  }
+
+  async renderText() {
+    this.text = this._text;
+    if (this.style.fontFamily) {
+      await pixi_js.Assets.get(this.style.fontFamily);
+    }
+    this.style.fontFamily = this._values.fontFamily;
+    this.style.fontSize = this._values.fontSize;
+    this.style.fill = this._values.fill;
+    this.style.fontWeight = this._values.fontWeight;
+    this.style.fontStyle = this._values.fontStyle;
+    this.style.lineHeight = this._values.lineHeight;
+
+    this.anchor.x = 0.5;
+    this.anchor.y = 1;
+  }
+
+  /**
+   * update lottie information
+   * @param {*} lottieLayer lottie element object
+   * @param {boolean} forceUpdate forceUpdate
+   */
+  updateLottie(lottieLayer, _forceUpdate = false) {
+    let forceUpdate = true;
+    if (lottieLayer.transform && forceUpdate) {
+      this.updateLottieTransform(lottieLayer.transform);
+    }
+    if (lottieLayer.masks && forceUpdate) {
+      this.updateLottieMasks(lottieLayer.masks);
+    }
+    if (lottieLayer._mdf) {
+      this.renderText();
+    }
+    this.visible = lottieLayer.isInRange;
+    this._onUpdate();
+  }
+
+  /**
+   * a
+   * @param {*} parent a
+   */
+  setTransformHierarchy(parent) {
+    this.hierarchy = parent;
+  }
+
+  /**
+   * a
+   * @param {*} transform
+   */
+  updateLottieTransform(transform) {
+    updateTransformByHierarchy(this, transform, this.hierarchy);
+  }
+
+  /**
+   * a
+   * @param {*} masks a
+   */
+  updateLottieMasks(masks) {
+    this.mask.updateMasks(masks);
+  }
+}
+
+function createSizedArray$1(len) {
+  return Array.apply(null, { length: len });
+}
+
 class MatrixHelper extends pixi_js.Matrix {
   reset() {
     // 重置为单位矩阵
@@ -10638,7 +10800,7 @@ class MatrixHelper extends pixi_js.Matrix {
  * @class
  * @private
  */
-class TextElement extends pixi_js.Graphics {
+class TextGlyphsElement extends pixi_js.Graphics {
   /**
    * ShapeElement constructor
    */
@@ -10684,15 +10846,14 @@ class TextElement extends pixi_js.Graphics {
 
   buildNewText() {
     const documentData = this.lottieLayer.textProperty.currentData;
-    this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0);
+    this.renderedLetters = createSizedArray$1(documentData.l ? documentData.l.length : 0);
     let hasFill = false;
     if (documentData.fc) {
       hasFill = true;
       this._values.fill = Tools.rgb2hex(
-        // documentData.fc.map((item) => {
-        //   console.log(item)
-        //   return item > 1 ? item : item * 255
-        // }),
+        documentData.fc.map(item => {
+          return item > 1 ? item : item * 255;
+        }),
         documentData.fc,
       );
     } else {
@@ -10749,8 +10910,7 @@ class TextElement extends pixi_js.Graphics {
       shapes = shapeData.shapes ? shapeData.shapes[0].it : [];
       jLen = shapes.length;
       matrixHelper.scale(documentData.finalSize / 100, documentData.finalSize / 100);
-      commands = createSizedArray(jLen - 1);
-      window.$commands.push(commands);
+      commands = createSizedArray$1(jLen - 1);
       let commandsCounter = 0;
       for (j = 0; j < jLen; j += 1) {
         if (shapes[j].ty === 'sh') {
@@ -10965,27 +11125,7 @@ class TextElement extends pixi_js.Graphics {
    * @param {*} transform
    */
   updateLottieTransform(transform) {
-    if (transform.p) {
-      this.x = transform.p.v[0];
-      this.y = transform.p.v[1];
-    } else {
-      this.x = transform.px.v;
-      this.y = transform.py.v;
-    }
-
-    this.pivot.x = transform.a.v[0];
-    this.pivot.y = transform.a.v[1];
-
-    this.scale.x = transform.s.v[0];
-    this.scale.y = transform.s.v[1];
-
-    if (transform.r) {
-      this.rotation = transform.r.v + transform.orientation;
-    } else if (transform.rz) {
-      this.rotation = transform.rz.v + transform.or.v[2];
-    }
-
-    this.alpha = transform.o.v;
+    updateTransformByHierarchy(this, transform, this.hierarchy);
   }
 
   /**
@@ -11051,27 +11191,7 @@ class SolidElement extends pixi_js.Graphics {
    * @param {*} transform
    */
   updateLottieTransform(transform) {
-    if (transform.p) {
-      this.x = transform.p.v[0];
-      this.y = transform.p.v[1];
-    } else {
-      this.x = transform.px.v;
-      this.y = transform.py.v;
-    }
-
-    this.pivot.x = transform.a.v[0];
-    this.pivot.y = transform.a.v[1];
-
-    this.scale.x = transform.s.v[0];
-    this.scale.y = transform.s.v[1];
-
-    if (transform.r) {
-      this.rotation = transform.r.v + transform.orientation;
-    } else if (transform.rz) {
-      this.rotation = transform.rz.v + transform.or.v[2];
-    }
-
-    this.alpha = transform.o.v;
+    updateTransformByHierarchy(this, transform, this.hierarchy);
   }
 
   /**
@@ -11146,27 +11266,7 @@ class SpriteElement extends pixi_js.Sprite {
    * @param {*} transform
    */
   updateLottieTransform(transform) {
-    if (transform.p) {
-      this.x = transform.p.v[0];
-      this.y = transform.p.v[1];
-    } else {
-      this.x = transform.px.v;
-      this.y = transform.py.v;
-    }
-
-    this.pivot.x = transform.a.v[0];
-    this.pivot.y = transform.a.v[1];
-
-    this.scale.x = transform.s.v[0];
-    this.scale.y = transform.s.v[1];
-
-    if (transform.r) {
-      this.rotation = transform.r.v + transform.orientation;
-    } else if (transform.rz) {
-      this.rotation = transform.rz.v + transform.or.v[2];
-    }
-
-    this.alpha = transform.o.v;
+    updateTransformByHierarchy(this, transform, this.hierarchy);
   }
 
   /**
@@ -11385,6 +11485,29 @@ function loadJson(path) {
   return new LoadJson(path);
 }
 
+const getLayerBySubstituteId = (lottieFile, substituteId) => {
+  const { substituteIds } = lottieFile || {};
+  if (!substituteIds || Object.keys(substituteIds).length === 0) return null;
+  let layer;
+  // 在复合图层内部
+  if (substituteId && substituteId.indexOf('_') === -1) {
+    const outerIndex = Number(substituteId);
+    if (!Number.isNaN(outerIndex)) {
+      layer = lottieFile?.layers?.[outerIndex];
+    }
+  } else if (substituteId) {
+    // 在顶层图层
+    const substituteIdArr = substituteId.split('_');
+    const outerIndex = Number(substituteIdArr[0]);
+    const innerIndex = Number(substituteIdArr[1]);
+    if (!Number.isNaN(outerIndex) && !Number.isNaN(innerIndex)) {
+      const asset = lottieFile.assets[outerIndex];
+      layer = asset?.layers?.[innerIndex];
+    }
+  }
+  return layer;
+};
+
 /**
  * an animation group, store and compute frame information, one lottie animate one AnimationGroup
  * @class
@@ -11413,6 +11536,7 @@ class AnimationGroup extends Eventer {
    * @param {boolean} [options.depthTest=true] enable depth test for 3d layer
    * @param {boolean} [options.maskComp=false] add mask for each comp
    * @param {string} [options.prefix=''] assets url prefix, look like link path
+   * @param {boolean} [options.replaceData=''] assets url prefix, look like link path
    */
   constructor(options) {
     super();
@@ -11643,7 +11767,14 @@ class AnimationGroup extends Eventer {
 
     if (options.keyframes) {
       if (!this._prefix && options.keyframes.prefix) this._prefix = options.keyframes.prefix;
-      this._setupDate(options.keyframes);
+      if (!options.replaceData) {
+        this._setupDate(options.keyframes);
+      } else {
+        this._response = options.keyframes;
+        if (this._replaceData) {
+          this._setupReplaceData();
+        }
+      }
     } else if (options.path) {
       let prefix = '';
       if (options.path.lastIndexOf('\\') !== -1) {
@@ -11655,7 +11786,14 @@ class AnimationGroup extends Eventer {
 
       this.jsonLoader = loadJson(options.path);
       this.jsonLoader.once('success', response => {
-        this._setupDate(response);
+        if (!options.replaceData) {
+          this._setupDate(response);
+        } else {
+          this._response = response;
+          if (this._replaceData) {
+            this._setupReplaceData();
+          }
+        }
       });
       this.jsonLoader.once('error', error => {
         this.emit('error', error);
@@ -11663,6 +11801,43 @@ class AnimationGroup extends Eventer {
     }
   }
 
+  replaceData(data) {
+    this._replaceData = data;
+    this._setupReplaceData();
+  }
+
+  _setupReplaceData() {
+    if (this._response && this._replaceData) {
+      if (this._response.substituteIds) {
+        const revertSubstituteIds = {};
+        for (const key in this._response.substituteIds) {
+          const value = this._response.substituteIds[key];
+          revertSubstituteIds[value] = key;
+        }
+
+        for (const name in this._replaceData) {
+          const data = this._replaceData[name];
+
+          const layer = getLayerBySubstituteId(this._response, revertSubstituteIds[name]);
+          if (!layer) continue;
+          // 更新图片图层或文本图层的内容
+          const { ty } = layer;
+          if (ty === 2) {
+            const asset = lottieFile.assets.find(item => item.id === layer.refId);
+            if (asset) {
+              asset.p = data;
+            }
+          } else if (ty === 5) {
+            if (layer?.t?.d?.k?.[0]?.s?.t) {
+              layer.t.d.k[0].s.t = data;
+            }
+          }
+        }
+      }
+      this._setupDate(this._response);
+    }
+  }
+
   /**
    * 安装动画数据
    * @private
@@ -11793,9 +11968,20 @@ class AnimationGroup extends Eventer {
         st,
       },
     };
-    session.fontManager.addChars(data.chars);
-    // @TODO
-    // session.fontManager.addFonts(data.fonts, document.body);
+    session.fontManager.addChars(data.chars || []);
+    session.fontManager.addFonts(data.fonts, document.body);
+    if (data.fonts?.list?.length) {
+      const fonts = data.fonts.list
+        .map(item => ({
+          alias: item.fFamily,
+          src: item.fPath,
+          data: { family: item.fFamily },
+        }))
+        .filter(item => item.src);
+      pixi_js.Assets.load(fonts).catch(e => {
+        console.error(e);
+      });
+    }
 
     this._buildElements(session);
 
@@ -12031,7 +12217,10 @@ class AnimationGroup extends Eventer {
       //   texture,
       // });
     } else {
-      lottieLayer.display = new SpriteElement(lottieLayer, { asset, texture });
+      lottieLayer.display = new SpriteElement(lottieLayer, {
+        asset,
+        texture,
+      });
     }
     return lottieLayer;
   }
@@ -12074,7 +12263,13 @@ class AnimationGroup extends Eventer {
   _extraText(layer, session) {
     layer.global = session;
     const lottieLayer = new TextLottieLayer(layer, session);
-    lottieLayer.display = new TextElement(lottieLayer);
+    const usesGlyphs = !!session.fontManager.chars?.length;
+    if (usesGlyphs) {
+      lottieLayer.display = new TextGlyphsElement(lottieLayer);
+    } else {
+      lottieLayer.display = new TextElement(lottieLayer);
+    }
+
     return lottieLayer;
   }
 
@@ -13033,6 +13228,10 @@ class Lottie extends eva_js.Component {
         });
         this.anim.playSegment(this.playParamsHandle(params), expandOpts);
     }
+    replaceData(data) {
+        if (data)
+            this.anim.replaceData(data);
+    }
     playParamsHandle(params) {
         let p = [].concat(params);
         const { keyframes } = this.anim;