@lumen5/lottie-web 5.14.0

package/player/js/utils/text/TextProperty.js

@@ -0,0 +1,461 @@
+import {
+  initialDefaultFrame,
+} from '../../main';
+import getFontProperties from '../getFontProperties';
+import FontManager from '../FontManager';
+
+function TextProperty(elem, data) {
+  this._frameId = initialDefaultFrame;
+  this.pv = '';
+  this.v = '';
+  this.kf = false;
+  this._isFirstFrame = true;
+  this._mdf = false;
+  if (data.d && data.d.sid) {
+    data.d = elem.globalData.slotManager.getProp(data.d);
+  }
+  this.data = data;
+  this.elem = elem;
+  this.comp = this.elem.comp;
+  this.keysIndex = 0;
+  this.canResize = false;
+  this.minimumFontSize = 1;
+  this.effectsSequence = [];
+  this.currentData = {
+    ascent: 0,
+    boxWidth: this.defaultBoxWidth,
+    f: '',
+    fStyle: '',
+    fWeight: '',
+    fc: '',
+    j: '',
+    justifyOffset: '',
+    l: [],
+    lh: 0,
+    lineWidths: [],
+    ls: '',
+    of: '',
+    s: '',
+    sc: '',
+    sw: 0,
+    t: 0,
+    tr: 0,
+    sz: 0,
+    ps: null,
+    fillColorAnim: false,
+    strokeColorAnim: false,
+    strokeWidthAnim: false,
+    yOffset: 0,
+    finalSize: 0,
+    finalText: [],
+    finalLineHeight: 0,
+    __complete: false,
+
+  };
+  this.copyData(this.currentData, this.data.d.k[0].s);
+
+  if (!this.searchProperty()) {
+    this.completeTextData(this.currentData);
+  }
+}
+
+TextProperty.prototype.defaultBoxWidth = [0, 0];
+
+TextProperty.prototype.copyData = function (obj, data) {
+  for (var s in data) {
+    if (Object.prototype.hasOwnProperty.call(data, s)) {
+      obj[s] = data[s];
+    }
+  }
+  return obj;
+};
+
+TextProperty.prototype.setCurrentData = function (data) {
+  if (!data.__complete) {
+    this.completeTextData(data);
+  }
+  this.currentData = data;
+  this.currentData.boxWidth = this.currentData.boxWidth || this.defaultBoxWidth;
+  this._mdf = true;
+};
+
+TextProperty.prototype.searchProperty = function () {
+  return this.searchKeyframes();
+};
+
+TextProperty.prototype.searchKeyframes = function () {
+  this.kf = this.data.d.k.length > 1;
+  if (this.kf) {
+    this.addEffect(this.getKeyframeValue.bind(this));
+  }
+  return this.kf;
+};
+
+TextProperty.prototype.addEffect = function (effectFunction) {
+  this.effectsSequence.push(effectFunction);
+  this.elem.addDynamicProperty(this);
+};
+
+TextProperty.prototype.getValue = function (_finalValue) {
+  if ((this.elem.globalData.frameId === this.frameId || !this.effectsSequence.length) && !_finalValue) {
+    return;
+  }
+  this.currentData.t = this.data.d.k[this.keysIndex].s.t;
+  var currentValue = this.currentData;
+  var currentIndex = this.keysIndex;
+  if (this.lock) {
+    this.setCurrentData(this.currentData);
+    return;
+  }
+  this.lock = true;
+  this._mdf = false;
+  var i; var
+    len = this.effectsSequence.length;
+  var finalValue = _finalValue || this.data.d.k[this.keysIndex].s;
+  for (i = 0; i < len; i += 1) {
+    // Checking if index changed to prevent creating a new object every time the expression updates.
+    if (currentIndex !== this.keysIndex) {
+      finalValue = this.effectsSequence[i](finalValue, finalValue.t);
+    } else {
+      finalValue = this.effectsSequence[i](this.currentData, finalValue.t);
+    }
+  }
+  if (currentValue !== finalValue) {
+    this.setCurrentData(finalValue);
+  }
+  this.v = this.currentData;
+  this.pv = this.v;
+  this.lock = false;
+  this.frameId = this.elem.globalData.frameId;
+};
+
+TextProperty.prototype.getKeyframeValue = function () {
+  var textKeys = this.data.d.k;
+  var frameNum = this.elem.comp.renderedFrame;
+  var i = 0; var
+    len = textKeys.length;
+  while (i <= len - 1) {
+    if (i === len - 1 || textKeys[i + 1].t > frameNum) {
+      break;
+    }
+    i += 1;
+  }
+  if (this.keysIndex !== i) {
+    this.keysIndex = i;
+  }
+  return this.data.d.k[this.keysIndex].s;
+};
+
+TextProperty.prototype.buildFinalText = function (text) {
+  var charactersArray = [];
+  var i = 0;
+  var len = text.length;
+  var charCode;
+  var secondCharCode;
+  var shouldCombine = false;
+  var shouldCombineNext = false;
+  var currentChars = '';
+  while (i < len) {
+    shouldCombine = shouldCombineNext;
+    shouldCombineNext = false;
+    charCode = text.charCodeAt(i);
+    currentChars = text.charAt(i);
+    if (FontManager.isCombinedCharacter(charCode)) {
+      shouldCombine = true;
+      // It's a potential surrogate pair (this is the High surrogate)
+    } else if (charCode >= 0xD800 && charCode <= 0xDBFF) {
+      if (FontManager.isRegionalFlag(text, i)) {
+        currentChars = text.substr(i, 14);
+      } else {
+        secondCharCode = text.charCodeAt(i + 1);
+        // It's a surrogate pair (this is the Low surrogate)
+        if (secondCharCode >= 0xDC00 && secondCharCode <= 0xDFFF) {
+          if (FontManager.isModifier(charCode, secondCharCode)) {
+            currentChars = text.substr(i, 2);
+            shouldCombine = true;
+          } else if (FontManager.isFlagEmoji(text.substr(i, 4))) {
+            currentChars = text.substr(i, 4);
+          } else {
+            currentChars = text.substr(i, 2);
+          }
+        }
+      }
+    } else if (charCode > 0xDBFF) {
+      secondCharCode = text.charCodeAt(i + 1);
+      if (FontManager.isVariationSelector(charCode)) {
+        shouldCombine = true;
+      }
+    } else if (FontManager.isZeroWidthJoiner(charCode)) {
+      shouldCombine = true;
+      shouldCombineNext = true;
+    }
+    if (shouldCombine) {
+      charactersArray[charactersArray.length - 1] += currentChars;
+      shouldCombine = false;
+    } else {
+      charactersArray.push(currentChars);
+    }
+    i += currentChars.length;
+  }
+  return charactersArray;
+};
+
+TextProperty.prototype.completeTextData = function (documentData) {
+  documentData.__complete = true;
+  var fontManager = this.elem.globalData.fontManager;
+  var data = this.data;
+  var letters = [];
+  var i; var
+    len;
+  var newLineFlag; var index = 0; var
+    val;
+  var anchorGrouping = data.m.g;
+  var currentSize = 0; var currentPos = 0; var currentLine = 0; var
+    lineWidths = [];
+  var lineWidth = 0;
+  var maxLineWidth = 0;
+  var j; var
+    jLen;
+  var fontData = fontManager.getFontByName(documentData.f);
+  var charData; var
+    cLength = 0;
+
+  var fontProps = getFontProperties(fontData);
+  documentData.fWeight = fontProps.weight;
+  documentData.fStyle = fontProps.style;
+  documentData.finalSize = documentData.s;
+  documentData.finalText = this.buildFinalText(documentData.t);
+  len = documentData.finalText.length;
+  documentData.finalLineHeight = documentData.lh;
+  var trackingOffset = (documentData.tr / 1000) * documentData.finalSize;
+  var charCode;
+  if (documentData.sz) {
+    var flag = true;
+    var boxWidth = documentData.sz[0];
+    var boxHeight = documentData.sz[1];
+    var currentHeight; var
+      finalText;
+    while (flag) {
+      finalText = this.buildFinalText(documentData.t);
+      currentHeight = 0;
+      lineWidth = 0;
+      len = finalText.length;
+      trackingOffset = (documentData.tr / 1000) * documentData.finalSize;
+      var lastSpaceIndex = -1;
+      for (i = 0; i < len; i += 1) {
+        charCode = finalText[i].charCodeAt(0);
+        newLineFlag = false;
+        if (finalText[i] === ' ') {
+          lastSpaceIndex = i;
+        } else if (charCode === 13 || charCode === 3) {
+          lineWidth = 0;
+          newLineFlag = true;
+          currentHeight += documentData.finalLineHeight || documentData.finalSize * 1.2;
+        }
+        if (fontManager.chars) {
+          charData = fontManager.getCharData(finalText[i], fontData.fStyle, fontData.fFamily);
+          cLength = newLineFlag ? 0 : (charData.w * documentData.finalSize) / 100;
+        } else {
+          // tCanvasHelper.font = documentData.s + 'px '+ fontData.fFamily;
+          cLength = fontManager.measureText(finalText[i], documentData.f, documentData.finalSize);
+        }
+        if (lineWidth + cLength > boxWidth && finalText[i] !== ' ') {
+          if (lastSpaceIndex === -1) {
+            len += 1;
+          } else {
+            i = lastSpaceIndex;
+          }
+          currentHeight += documentData.finalLineHeight || documentData.finalSize * 1.2;
+          finalText.splice(i, lastSpaceIndex === i ? 1 : 0, '\r');
+          // finalText = finalText.substr(0,i) + "\r" + finalText.substr(i === lastSpaceIndex ? i + 1 : i);
+          lastSpaceIndex = -1;
+          lineWidth = 0;
+        } else {
+          lineWidth += cLength;
+          lineWidth += trackingOffset;
+        }
+      }
+      currentHeight += (fontData.ascent * documentData.finalSize) / 100;
+      if (this.canResize && documentData.finalSize > this.minimumFontSize && boxHeight < currentHeight) {
+        documentData.finalSize -= 1;
+        documentData.finalLineHeight = (documentData.finalSize * documentData.lh) / documentData.s;
+      } else {
+        documentData.finalText = finalText;
+        len = documentData.finalText.length;
+        flag = false;
+      }
+    }
+  }
+  lineWidth = -trackingOffset;
+  cLength = 0;
+  var uncollapsedSpaces = 0;
+  var currentChar;
+  for (i = 0; i < len; i += 1) {
+    newLineFlag = false;
+    currentChar = documentData.finalText[i];
+    charCode = currentChar.charCodeAt(0);
+    if (charCode === 13 || charCode === 3) {
+      uncollapsedSpaces = 0;
+      lineWidths.push(lineWidth);
+      maxLineWidth = lineWidth > maxLineWidth ? lineWidth : maxLineWidth;
+      lineWidth = -2 * trackingOffset;
+      val = '';
+      newLineFlag = true;
+      currentLine += 1;
+    } else {
+      val = currentChar;
+    }
+    if (fontManager.chars) {
+      charData = fontManager.getCharData(currentChar, fontData.fStyle, fontManager.getFontByName(documentData.f).fFamily);
+      cLength = newLineFlag ? 0 : (charData.w * documentData.finalSize) / 100;
+    } else {
+      // var charWidth = fontManager.measureText(val, documentData.f, documentData.finalSize);
+      // tCanvasHelper.font = documentData.finalSize + 'px '+ fontManager.getFontByName(documentData.f).fFamily;
+      cLength = fontManager.measureText(val, documentData.f, documentData.finalSize);
+    }
+
+    //
+    if (currentChar === ' ') {
+      uncollapsedSpaces += cLength + trackingOffset;
+    } else {
+      lineWidth += cLength + trackingOffset + uncollapsedSpaces;
+      uncollapsedSpaces = 0;
+    }
+    letters.push({
+      l: cLength, an: cLength, add: currentSize, n: newLineFlag, anIndexes: [], val: val, line: currentLine, animatorJustifyOffset: 0,
+    });
+    if (anchorGrouping == 2) { // eslint-disable-line eqeqeq
+      currentSize += cLength;
+      if (val === '' || val === ' ' || i === len - 1) {
+        if (val === '' || val === ' ') {
+          currentSize -= cLength;
+        }
+        while (currentPos <= i) {
+          letters[currentPos].an = currentSize;
+          letters[currentPos].ind = index;
+          letters[currentPos].extra = cLength;
+          currentPos += 1;
+        }
+        index += 1;
+        currentSize = 0;
+      }
+    } else if (anchorGrouping == 3) { // eslint-disable-line eqeqeq
+      currentSize += cLength;
+      if (val === '' || i === len - 1) {
+        if (val === '') {
+          currentSize -= cLength;
+        }
+        while (currentPos <= i) {
+          letters[currentPos].an = currentSize;
+          letters[currentPos].ind = index;
+          letters[currentPos].extra = cLength;
+          currentPos += 1;
+        }
+        currentSize = 0;
+        index += 1;
+      }
+    } else {
+      letters[index].ind = index;
+      letters[index].extra = 0;
+      index += 1;
+    }
+  }
+  documentData.l = letters;
+  maxLineWidth = lineWidth > maxLineWidth ? lineWidth : maxLineWidth;
+  lineWidths.push(lineWidth);
+  if (documentData.sz) {
+    documentData.boxWidth = documentData.sz[0];
+    documentData.justifyOffset = 0;
+  } else {
+    documentData.boxWidth = maxLineWidth;
+    switch (documentData.j) {
+      case 1:
+        documentData.justifyOffset = -documentData.boxWidth;
+        break;
+      case 2:
+        documentData.justifyOffset = -documentData.boxWidth / 2;
+        break;
+      default:
+        documentData.justifyOffset = 0;
+    }
+  }
+  documentData.lineWidths = lineWidths;
+
+  var animators = data.a; var animatorData; var
+    letterData;
+  jLen = animators.length;
+  var based; var ind; var
+    indexes = [];
+  for (j = 0; j < jLen; j += 1) {
+    animatorData = animators[j];
+    if (animatorData.a.sc) {
+      documentData.strokeColorAnim = true;
+    }
+    if (animatorData.a.sw) {
+      documentData.strokeWidthAnim = true;
+    }
+    if (animatorData.a.fc || animatorData.a.fh || animatorData.a.fs || animatorData.a.fb) {
+      documentData.fillColorAnim = true;
+    }
+    ind = 0;
+    based = animatorData.s.b;
+    for (i = 0; i < len; i += 1) {
+      letterData = letters[i];
+      letterData.anIndexes[j] = ind;
+      if ((based == 1 && letterData.val !== '') || (based == 2 && letterData.val !== '' && letterData.val !== ' ') || (based == 3 && (letterData.n || letterData.val == ' ' || i == len - 1)) || (based == 4 && (letterData.n || i == len - 1))) { // eslint-disable-line eqeqeq
+        if (animatorData.s.rn === 1) {
+          indexes.push(ind);
+        }
+        ind += 1;
+      }
+    }
+    data.a[j].s.totalChars = ind;
+    var currentInd = -1; var
+      newInd;
+    if (animatorData.s.rn === 1) {
+      for (i = 0; i < len; i += 1) {
+        letterData = letters[i];
+        if (currentInd != letterData.anIndexes[j]) { // eslint-disable-line eqeqeq
+          currentInd = letterData.anIndexes[j];
+          newInd = indexes.splice(Math.floor(Math.random() * indexes.length), 1)[0];
+        }
+        letterData.anIndexes[j] = newInd;
+      }
+    }
+  }
+  documentData.yOffset = documentData.finalLineHeight || documentData.finalSize * 1.2;
+  documentData.ls = documentData.ls || 0;
+  documentData.ascent = (fontData.ascent * documentData.finalSize) / 100;
+};
+
+TextProperty.prototype.updateDocumentData = function (newData, index) {
+  index = index === undefined ? this.keysIndex : index;
+  var dData = this.copyData({}, this.data.d.k[index].s);
+  dData = this.copyData(dData, newData);
+  this.data.d.k[index].s = dData;
+  this.recalculate(index);
+  this.setCurrentData(dData);
+  this.elem.addDynamicProperty(this);
+};
+
+TextProperty.prototype.recalculate = function (index) {
+  var dData = this.data.d.k[index].s;
+  dData.__complete = false;
+  this.keysIndex = 0;
+  this._isFirstFrame = true;
+  this.getValue(dData);
+};
+
+TextProperty.prototype.canResizeFont = function (_canResize) {
+  this.canResize = _canResize;
+  this.recalculate(this.keysIndex);
+  this.elem.addDynamicProperty(this);
+};
+
+TextProperty.prototype.setMinimumFontSize = function (_fontValue) {
+  this.minimumFontSize = Math.floor(_fontValue) || 1;
+  this.recalculate(this.keysIndex);
+  this.elem.addDynamicProperty(this);
+};
+
+export default TextProperty;

package/player/js/utils/text/TextSelectorProperty.js

@@ -0,0 +1,179 @@
+import {
+  extendPrototype,
+} from '../functionExtensions';
+import DynamicPropertyContainer from '../helpers/dynamicProperties';
+import PropertyFactory from '../PropertyFactory';
+import BezierFactory from '../../3rd_party/BezierEaser';
+
+const TextSelectorProp = (function () {
+  var max = Math.max;
+  var min = Math.min;
+  var floor = Math.floor;
+
+  function TextSelectorPropFactory(elem, data) {
+    this._currentTextLength = -1;
+    this.k = false;
+    this.data = data;
+    this.elem = elem;
+    this.comp = elem.comp;
+    this.finalS = 0;
+    this.finalE = 0;
+    this.initDynamicPropertyContainer(elem);
+    this.s = PropertyFactory.getProp(elem, data.s || { k: 0 }, 0, 0, this);
+    if ('e' in data) {
+      this.e = PropertyFactory.getProp(elem, data.e, 0, 0, this);
+    } else {
+      this.e = { v: 100 };
+    }
+    this.o = PropertyFactory.getProp(elem, data.o || { k: 0 }, 0, 0, this);
+    this.xe = PropertyFactory.getProp(elem, data.xe || { k: 0 }, 0, 0, this);
+    this.ne = PropertyFactory.getProp(elem, data.ne || { k: 0 }, 0, 0, this);
+    this.sm = PropertyFactory.getProp(elem, data.sm || { k: 100 }, 0, 0, this);
+    this.a = PropertyFactory.getProp(elem, data.a, 0, 0.01, this);
+    if (!this.dynamicProperties.length) {
+      this.getValue();
+    }
+  }
+
+  TextSelectorPropFactory.prototype = {
+    getMult: function (ind) {
+      if (this._currentTextLength !== this.elem.textProperty.currentData.l.length) {
+        this.getValue();
+      }
+      var x1 = 0;
+      var y1 = 0;
+      var x2 = 1;
+      var y2 = 1;
+      if (this.ne.v > 0) {
+        x1 = this.ne.v / 100.0;
+      } else {
+        y1 = -this.ne.v / 100.0;
+      }
+      if (this.xe.v > 0) {
+        x2 = 1.0 - this.xe.v / 100.0;
+      } else {
+        y2 = 1.0 + this.xe.v / 100.0;
+      }
+      var easer = BezierFactory.getBezierEasing(x1, y1, x2, y2).get;
+
+      var mult = 0;
+      var s = this.finalS;
+      var e = this.finalE;
+      var type = this.data.sh;
+      if (type === 2) {
+        if (e === s) {
+          mult = ind >= e ? 1 : 0;
+        } else {
+          mult = max(0, min(0.5 / (e - s) + (ind - s) / (e - s), 1));
+        }
+        mult = easer(mult);
+      } else if (type === 3) {
+        if (e === s) {
+          mult = ind >= e ? 0 : 1;
+        } else {
+          mult = 1 - max(0, min(0.5 / (e - s) + (ind - s) / (e - s), 1));
+        }
+
+        mult = easer(mult);
+      } else if (type === 4) {
+        if (e === s) {
+          mult = 0;
+        } else {
+          mult = max(0, min(0.5 / (e - s) + (ind - s) / (e - s), 1));
+          if (mult < 0.5) {
+            mult *= 2;
+          } else {
+            mult = 1 - 2 * (mult - 0.5);
+          }
+        }
+        mult = easer(mult);
+      } else if (type === 5) {
+        if (e === s) {
+          mult = 0;
+        } else {
+          var tot = e - s;
+          /* ind += 0.5;
+                    mult = -4/(tot*tot)*(ind*ind)+(4/tot)*ind; */
+          ind = min(max(0, ind + 0.5 - s), e - s);
+          var x = -tot / 2 + ind;
+          var a = tot / 2;
+          mult = Math.sqrt(1 - (x * x) / (a * a));
+        }
+        mult = easer(mult);
+      } else if (type === 6) {
+        if (e === s) {
+          mult = 0;
+        } else {
+          ind = min(max(0, ind + 0.5 - s), e - s);
+          mult = (1 + (Math.cos((Math.PI + Math.PI * 2 * (ind) / (e - s))))) / 2; // eslint-disable-line
+        }
+        mult = easer(mult);
+      } else {
+        if (ind >= floor(s)) {
+          if (ind - s < 0) {
+            mult = max(0, min(min(e, 1) - (s - ind), 1));
+          } else {
+            mult = max(0, min(e - ind, 1));
+          }
+        }
+        mult = easer(mult);
+      }
+      // Smoothness implementation.
+      // The smoothness represents a reduced range of the original [0; 1] range.
+      // if smoothness is 25%, the new range will be [0.375; 0.625]
+      // Steps are:
+      // - find the lower value of the new range (threshold)
+      // - if multiplier is smaller than that value, floor it to 0
+      // - if it is larger,
+      //     - subtract the threshold
+      //     - divide it by the smoothness (this will return the range to [0; 1])
+      // Note: If it doesn't work on some scenarios, consider applying it before the easer.
+      if (this.sm.v !== 100) {
+        var smoothness = this.sm.v * 0.01;
+        if (smoothness === 0) {
+          smoothness = 0.00000001;
+        }
+        var threshold = 0.5 - smoothness * 0.5;
+        if (mult < threshold) {
+          mult = 0;
+        } else {
+          mult = (mult - threshold) / smoothness;
+          if (mult > 1) {
+            mult = 1;
+          }
+        }
+      }
+      return mult * this.a.v;
+    },
+    getValue: function (newCharsFlag) {
+      this.iterateDynamicProperties();
+      this._mdf = newCharsFlag || this._mdf;
+      this._currentTextLength = this.elem.textProperty.currentData.l.length || 0;
+      if (newCharsFlag && this.data.r === 2) {
+        this.e.v = this._currentTextLength;
+      }
+      var divisor = this.data.r === 2 ? 1 : 100 / this.data.totalChars;
+      var o = this.o.v / divisor;
+      var s = this.s.v / divisor + o;
+      var e = (this.e.v / divisor) + o;
+      if (s > e) {
+        var _s = s;
+        s = e;
+        e = _s;
+      }
+      this.finalS = s;
+      this.finalE = e;
+    },
+  };
+  extendPrototype([DynamicPropertyContainer], TextSelectorPropFactory);
+
+  function getTextSelectorProp(elem, data, arr) {
+    return new TextSelectorPropFactory(elem, data, arr);
+  }
+
+  return {
+    getTextSelectorProp: getTextSelectorProp,
+  };
+}());
+
+export default TextSelectorProp;