@lumen5/lottie-web 5.14.0

package/player/js/utils/shapes/MouseModifier.js

@@ -0,0 +1,222 @@
+import {
+  extendPrototype,
+} from '../functionExtensions';
+import {
+  ShapeModifiers,
+  ShapeModifier,
+} from './ShapeModifiers';
+
+function MouseModifier() {}
+extendPrototype([ShapeModifier], MouseModifier);
+MouseModifier.prototype.processKeys = function (forceRender) {
+  if (this.elem.globalData.frameId === this.frameId && !forceRender) {
+    return;
+  }
+  this._mdf = true;
+};
+
+MouseModifier.prototype.addShapeToModifier = function () {
+  this.positions.push([]);
+};
+
+MouseModifier.prototype.processPath = function (path, mouseCoords, positions) {
+  var i;
+  var len = path.v.length;
+  var vValues = [];
+  var oValues = [];
+  var iValues = [];
+  var theta;
+  var x;
+  var y;
+  /// / OPTION A
+  for (i = 0; i < len; i += 1) {
+    if (!positions.v[i]) {
+      positions.v[i] = [path.v[i][0], path.v[i][1]];
+      positions.o[i] = [path.o[i][0], path.o[i][1]];
+      positions.i[i] = [path.i[i][0], path.i[i][1]];
+      positions.distV[i] = 0;
+      positions.distO[i] = 0;
+      positions.distI[i] = 0;
+    }
+    theta = Math.atan2(
+      path.v[i][1] - mouseCoords[1],
+      path.v[i][0] - mouseCoords[0]
+    );
+
+    x = mouseCoords[0] - positions.v[i][0];
+    y = mouseCoords[1] - positions.v[i][1];
+    var distance = Math.sqrt((x * x) + (y * y));
+    positions.distV[i] += (distance - positions.distV[i]) * this.data.dc;
+
+    positions.v[i][0] = (Math.cos(theta) * Math.max(0, this.data.maxDist - positions.distV[i])) / 2 + (path.v[i][0]);
+    positions.v[i][1] = (Math.sin(theta) * Math.max(0, this.data.maxDist - positions.distV[i])) / 2 + (path.v[i][1]);
+
+    theta = Math.atan2(
+      path.o[i][1] - mouseCoords[1],
+      path.o[i][0] - mouseCoords[0]
+    );
+
+    x = mouseCoords[0] - positions.o[i][0];
+    y = mouseCoords[1] - positions.o[i][1];
+    distance = Math.sqrt((x * x) + (y * y));
+    positions.distO[i] += (distance - positions.distO[i]) * this.data.dc;
+
+    positions.o[i][0] = (Math.cos(theta) * Math.max(0, this.data.maxDist - positions.distO[i])) / 2 + (path.o[i][0]);
+    positions.o[i][1] = (Math.sin(theta) * Math.max(0, this.data.maxDist - positions.distO[i])) / 2 + (path.o[i][1]);
+
+    theta = Math.atan2(
+      path.i[i][1] - mouseCoords[1],
+      path.i[i][0] - mouseCoords[0]
+    );
+
+    x = mouseCoords[0] - positions.i[i][0];
+    y = mouseCoords[1] - positions.i[i][1];
+    distance = Math.sqrt((x * x) + (y * y));
+    positions.distI[i] += (distance - positions.distI[i]) * this.data.dc;
+
+    positions.i[i][0] = (Math.cos(theta) * Math.max(0, this.data.maxDist - positions.distI[i])) / 2 + (path.i[i][0]);
+    positions.i[i][1] = (Math.sin(theta) * Math.max(0, this.data.maxDist - positions.distI[i])) / 2 + (path.i[i][1]);
+
+    /// //OPTION 1
+    vValues.push(positions.v[i]);
+    oValues.push(positions.o[i]);
+    iValues.push(positions.i[i]);
+
+    /// //OPTION 2
+    // vValues.push(positions.v[i]);
+    // iValues.push([path.i[i][0]+(positions.v[i][0]-path.v[i][0]),path.i[i][1]+(positions.v[i][1]-path.v[i][1])]);
+    // oValues.push([path.o[i][0]+(positions.v[i][0]-path.v[i][0]),path.o[i][1]+(positions.v[i][1]-path.v[i][1])]);
+
+    /// //OPTION 3
+    // vValues.push(positions.v[i]);
+    // iValues.push(path.i[i]);
+    // oValues.push(path.o[i]);
+
+    /// //OPTION 4
+    // vValues.push(path.v[i]);
+    // oValues.push(positions.o[i]);
+    // iValues.push(positions.i[i]);
+  }
+
+  /// / OPTION B
+  /* for(i=0;i<len;i+=1){
+        if(!positions.v[i]){
+            positions.v[i] = [path.v[i][0],path.v[i][1]];
+            positions.o[i] = [path.o[i][0],path.o[i][1]];
+            positions.i[i] = [path.i[i][0],path.i[i][1]];
+            positions.distV[i] = 0;
+
+        }
+        theta = Math.atan2(
+            positions.v[i][1] - mouseCoords[1],
+            positions.v[i][0] - mouseCoords[0]
+        );
+        x = mouseCoords[0] - positions.v[i][0];
+        y = mouseCoords[1] - positions.v[i][1];
+        var distance = this.data.ss * this.data.mx / Math.sqrt( (x * x) + (y * y) );
+
+        positions.v[i][0] += Math.cos(theta) * distance + (path.v[i][0] - positions.v[i][0]) * this.data.dc;
+        positions.v[i][1] += Math.sin(theta) * distance + (path.v[i][1] - positions.v[i][1]) * this.data.dc;
+
+        theta = Math.atan2(
+            positions.o[i][1] - mouseCoords[1],
+            positions.o[i][0] - mouseCoords[0]
+        );
+        x = mouseCoords[0] - positions.o[i][0];
+        y = mouseCoords[1] - positions.o[i][1];
+        var distance =  this.data.ss * this.data.mx / Math.sqrt( (x * x) + (y * y) );
+
+        positions.o[i][0] += Math.cos(theta) * distance + (path.o[i][0] - positions.o[i][0]) * this.data.dc;
+        positions.o[i][1] += Math.sin(theta) * distance + (path.o[i][1] - positions.o[i][1]) * this.data.dc;
+
+        theta = Math.atan2(
+            positions.i[i][1] - mouseCoords[1],
+            positions.i[i][0] - mouseCoords[0]
+        );
+        x = mouseCoords[0] - positions.i[i][0];
+        y = mouseCoords[1] - positions.i[i][1];
+        var distance =  this.data.ss * this.data.mx / Math.sqrt( (x * x) + (y * y) );
+
+        positions.i[i][0] += Math.cos(theta) * distance + (path.i[i][0] - positions.i[i][0]) * this.data.dc;
+        positions.i[i][1] += Math.sin(theta) * distance + (path.i[i][1] - positions.i[i][1]) * this.data.dc;
+
+        /////OPTION 1
+        //vValues.push(positions.v[i]);
+        // oValues.push(positions.o[i]);
+        // iValues.push(positions.i[i]);
+
+        /////OPTION 2
+        //vValues.push(positions.v[i]);
+        // iValues.push([path.i[i][0]+(positions.v[i][0]-path.v[i][0]),path.i[i][1]+(positions.v[i][1]-path.v[i][1])]);
+        // oValues.push([path.o[i][0]+(positions.v[i][0]-path.v[i][0]),path.o[i][1]+(positions.v[i][1]-path.v[i][1])]);
+
+        /////OPTION 3
+        //vValues.push(positions.v[i]);
+        //iValues.push(path.i[i]);
+        //oValues.push(path.o[i]);
+
+        /////OPTION 4
+        //vValues.push(path.v[i]);
+        // oValues.push(positions.o[i]);
+        // iValues.push(positions.i[i]);
+    } */
+
+  return {
+    v: vValues,
+    o: oValues,
+    i: iValues,
+    c: path.c,
+  };
+};
+
+MouseModifier.prototype.processShapes = function () {
+  var mouseX = this.elem.globalData.mouseX;
+  var mouseY = this.elem.globalData.mouseY;
+  var shapePaths;
+  var i;
+  var len = this.shapes.length;
+  var j;
+  var jLen;
+
+  if (mouseX) {
+    var localMouseCoords = this.elem.globalToLocal([mouseX, mouseY, 0]);
+
+    var shapeData;
+    var newPaths = [];
+    for (i = 0; i < len; i += 1) {
+      shapeData = this.shapes[i];
+      if (!shapeData.shape._mdf && !this._mdf) {
+        shapeData.shape.paths = shapeData.last;
+      } else {
+        shapeData.shape._mdf = true;
+        shapePaths = shapeData.shape.paths;
+        jLen = shapePaths.length;
+        for (j = 0; j < jLen; j += 1) {
+          if (!this.positions[i][j]) {
+            this.positions[i][j] = {
+              v: [],
+              o: [],
+              i: [],
+              distV: [],
+              distO: [],
+              distI: [],
+            };
+          }
+          newPaths.push(this.processPath(shapePaths[j], localMouseCoords, this.positions[i][j]));
+        }
+        shapeData.shape.paths = newPaths;
+        shapeData.last = newPaths;
+      }
+    }
+  }
+};
+
+MouseModifier.prototype.initModifierProperties = function (elem, data) {
+  this.getValue = this.processKeys;
+  this.data = data;
+  this.positions = [];
+};
+
+ShapeModifiers.registerModifier('ms', MouseModifier);
+
+export default MouseModifier;

package/player/js/utils/shapes/OffsetPathModifier.js

@@ -0,0 +1,306 @@
+import {
+  roundCorner,
+} from '../common';
+import {
+  extendPrototype,
+} from '../functionExtensions';
+import PropertyFactory from '../PropertyFactory';
+import shapePool from '../pooling/shape_pool';
+import {
+  ShapeModifier,
+} from './ShapeModifiers';
+import {
+  PolynomialBezier,
+  polarOffset,
+  lineIntersection,
+  pointDistance,
+  pointEqual,
+  floatEqual,
+} from '../PolynomialBezier';
+
+function linearOffset(p1, p2, amount) {
+  var angle = Math.atan2(p2[0] - p1[0], p2[1] - p1[1]);
+  return [
+    polarOffset(p1, angle, amount),
+    polarOffset(p2, angle, amount),
+  ];
+}
+
+function offsetSegment(segment, amount) {
+  var p0; var p1a; var p1b; var p2b; var p2a; var
+    p3;
+  var e;
+  e = linearOffset(segment.points[0], segment.points[1], amount);
+  p0 = e[0];
+  p1a = e[1];
+  e = linearOffset(segment.points[1], segment.points[2], amount);
+  p1b = e[0];
+  p2b = e[1];
+  e = linearOffset(segment.points[2], segment.points[3], amount);
+  p2a = e[0];
+  p3 = e[1];
+  var p1 = lineIntersection(p0, p1a, p1b, p2b);
+  if (p1 === null) p1 = p1a;
+  var p2 = lineIntersection(p2a, p3, p1b, p2b);
+  if (p2 === null) p2 = p2a;
+
+  return new PolynomialBezier(p0, p1, p2, p3);
+}
+
+function joinLines(outputBezier, seg1, seg2, lineJoin, miterLimit) {
+  var p0 = seg1.points[3];
+  var p1 = seg2.points[0];
+
+  // Bevel
+  if (lineJoin === 3) return p0;
+
+  // Connected, they don't need a joint
+  if (pointEqual(p0, p1)) return p0;
+
+  // Round
+  if (lineJoin === 2) {
+    var angleOut = -seg1.tangentAngle(1);
+    var angleIn = -seg2.tangentAngle(0) + Math.PI;
+    var center = lineIntersection(
+      p0,
+      polarOffset(p0, angleOut + Math.PI / 2, 100),
+      p1,
+      polarOffset(p1, angleOut + Math.PI / 2, 100)
+    );
+    var radius = center ? pointDistance(center, p0) : pointDistance(p0, p1) / 2;
+
+    var tan = polarOffset(p0, angleOut, 2 * radius * roundCorner);
+    outputBezier.setXYAt(tan[0], tan[1], 'o', outputBezier.length() - 1);
+
+    tan = polarOffset(p1, angleIn, 2 * radius * roundCorner);
+    outputBezier.setTripleAt(p1[0], p1[1], p1[0], p1[1], tan[0], tan[1], outputBezier.length());
+
+    return p1;
+  }
+
+  // Miter
+  var t0 = pointEqual(p0, seg1.points[2]) ? seg1.points[0] : seg1.points[2];
+  var t1 = pointEqual(p1, seg2.points[1]) ? seg2.points[3] : seg2.points[1];
+  var intersection = lineIntersection(t0, p0, p1, t1);
+  if (intersection && pointDistance(intersection, p0) < miterLimit) {
+    outputBezier.setTripleAt(
+      intersection[0],
+      intersection[1],
+      intersection[0],
+      intersection[1],
+      intersection[0],
+      intersection[1],
+      outputBezier.length()
+    );
+    return intersection;
+  }
+
+  return p0;
+}
+
+function getIntersection(a, b) {
+  const intersect = a.intersections(b);
+
+  if (intersect.length && floatEqual(intersect[0][0], 1)) intersect.shift();
+
+  if (intersect.length) return intersect[0];
+
+  return null;
+}
+
+function pruneSegmentIntersection(a, b) {
+  var outa = a.slice();
+  var outb = b.slice();
+  var intersect = getIntersection(a[a.length - 1], b[0]);
+  if (intersect) {
+    outa[a.length - 1] = a[a.length - 1].split(intersect[0])[0];
+    outb[0] = b[0].split(intersect[1])[1];
+  }
+  if (a.length > 1 && b.length > 1) {
+    intersect = getIntersection(a[0], b[b.length - 1]);
+    if (intersect) {
+      return [
+        [a[0].split(intersect[0])[0]],
+        [b[b.length - 1].split(intersect[1])[1]],
+      ];
+    }
+  }
+  return [outa, outb];
+}
+
+function pruneIntersections(segments) {
+  var e;
+  for (var i = 1; i < segments.length; i += 1) {
+    e = pruneSegmentIntersection(segments[i - 1], segments[i]);
+    segments[i - 1] = e[0];
+    segments[i] = e[1];
+  }
+
+  if (segments.length > 1) {
+    e = pruneSegmentIntersection(segments[segments.length - 1], segments[0]);
+    segments[segments.length - 1] = e[0];
+    segments[0] = e[1];
+  }
+
+  return segments;
+}
+
+function offsetSegmentSplit(segment, amount) {
+  /*
+    We split each bezier segment into smaller pieces based
+    on inflection points, this ensures the control point
+    polygon is convex.
+
+    (A cubic bezier can have none, one, or two inflection points)
+  */
+  var flex = segment.inflectionPoints();
+  var left;
+  var right;
+  var split;
+  var mid;
+
+  if (flex.length === 0) {
+    return [offsetSegment(segment, amount)];
+  }
+
+  if (flex.length === 1 || floatEqual(flex[1], 1)) {
+    split = segment.split(flex[0]);
+    left = split[0];
+    right = split[1];
+
+    return [
+      offsetSegment(left, amount),
+      offsetSegment(right, amount),
+    ];
+  }
+
+  split = segment.split(flex[0]);
+  left = split[0];
+  var t = (flex[1] - flex[0]) / (1 - flex[0]);
+  split = split[1].split(t);
+  mid = split[0];
+  right = split[1];
+
+  return [
+    offsetSegment(left, amount),
+    offsetSegment(mid, amount),
+    offsetSegment(right, amount),
+  ];
+}
+
+function OffsetPathModifier() {}
+
+extendPrototype([ShapeModifier], OffsetPathModifier);
+OffsetPathModifier.prototype.initModifierProperties = function (elem, data) {
+  this.getValue = this.processKeys;
+  this.amount = PropertyFactory.getProp(elem, data.a, 0, null, this);
+  this.miterLimit = PropertyFactory.getProp(elem, data.ml, 0, null, this);
+  this.lineJoin = data.lj;
+  this._isAnimated = this.amount.effectsSequence.length !== 0;
+};
+
+OffsetPathModifier.prototype.processPath = function (inputBezier, amount, lineJoin, miterLimit) {
+  var outputBezier = shapePool.newElement();
+  outputBezier.c = inputBezier.c;
+  var count = inputBezier.length();
+  if (!inputBezier.c) {
+    count -= 1;
+  }
+  var i; var j; var segment;
+  var multiSegments = [];
+
+  for (i = 0; i < count; i += 1) {
+    segment = PolynomialBezier.shapeSegment(inputBezier, i);
+    multiSegments.push(offsetSegmentSplit(segment, amount));
+  }
+
+  if (!inputBezier.c) {
+    for (i = count - 1; i >= 0; i -= 1) {
+      segment = PolynomialBezier.shapeSegmentInverted(inputBezier, i);
+      multiSegments.push(offsetSegmentSplit(segment, amount));
+    }
+  }
+
+  multiSegments = pruneIntersections(multiSegments);
+
+  // Add bezier segments to the output and apply line joints
+  var lastPoint = null;
+  var lastSeg = null;
+
+  for (i = 0; i < multiSegments.length; i += 1) {
+    var multiSegment = multiSegments[i];
+
+    if (lastSeg) lastPoint = joinLines(outputBezier, lastSeg, multiSegment[0], lineJoin, miterLimit);
+
+    lastSeg = multiSegment[multiSegment.length - 1];
+
+    for (j = 0; j < multiSegment.length; j += 1) {
+      segment = multiSegment[j];
+
+      if (lastPoint && pointEqual(segment.points[0], lastPoint)) {
+        outputBezier.setXYAt(segment.points[1][0], segment.points[1][1], 'o', outputBezier.length() - 1);
+      } else {
+        outputBezier.setTripleAt(
+          segment.points[0][0],
+          segment.points[0][1],
+          segment.points[1][0],
+          segment.points[1][1],
+          segment.points[0][0],
+          segment.points[0][1],
+          outputBezier.length()
+        );
+      }
+
+      outputBezier.setTripleAt(
+        segment.points[3][0],
+        segment.points[3][1],
+        segment.points[3][0],
+        segment.points[3][1],
+        segment.points[2][0],
+        segment.points[2][1],
+        outputBezier.length()
+      );
+
+      lastPoint = segment.points[3];
+    }
+  }
+
+  if (multiSegments.length) joinLines(outputBezier, lastSeg, multiSegments[0][0], lineJoin, miterLimit);
+
+  return outputBezier;
+};
+
+OffsetPathModifier.prototype.processShapes = function (_isFirstFrame) {
+  var shapePaths;
+  var i;
+  var len = this.shapes.length;
+  var j;
+  var jLen;
+  var amount = this.amount.v;
+  var miterLimit = this.miterLimit.v;
+  var lineJoin = this.lineJoin;
+
+  if (amount !== 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], amount, lineJoin, miterLimit));
+        }
+      }
+      shapeData.shape.paths = shapeData.localShapeCollection;
+    }
+  }
+  if (!this.dynamicProperties.length) {
+    this._mdf = false;
+  }
+};
+
+export default OffsetPathModifier;

package/player/js/utils/shapes/PuckerAndBloatModifier.js

@@ -0,0 +1,80 @@
+import {
+  extendPrototype,
+} from '../functionExtensions';
+import PropertyFactory from '../PropertyFactory';
+import shapePool from '../pooling/shape_pool';
+import {
+  ShapeModifier,
+} from './ShapeModifiers';
+
+function PuckerAndBloatModifier() {}
+extendPrototype([ShapeModifier], PuckerAndBloatModifier);
+PuckerAndBloatModifier.prototype.initModifierProperties = function (elem, data) {
+  this.getValue = this.processKeys;
+  this.amount = PropertyFactory.getProp(elem, data.a, 0, null, this);
+  this._isAnimated = !!this.amount.effectsSequence.length;
+};
+
+PuckerAndBloatModifier.prototype.processPath = function (path, amount) {
+  var percent = amount / 100;
+  var centerPoint = [0, 0];
+  var pathLength = path._length;
+  var i = 0;
+  for (i = 0; i < pathLength; i += 1) {
+    centerPoint[0] += path.v[i][0];
+    centerPoint[1] += path.v[i][1];
+  }
+  centerPoint[0] /= pathLength;
+  centerPoint[1] /= pathLength;
+  var clonedPath = shapePool.newElement();
+  clonedPath.c = path.c;
+  var vX;
+  var vY;
+  var oX;
+  var oY;
+  var iX;
+  var iY;
+  for (i = 0; i < pathLength; i += 1) {
+    vX = path.v[i][0] + (centerPoint[0] - path.v[i][0]) * percent;
+    vY = path.v[i][1] + (centerPoint[1] - path.v[i][1]) * percent;
+    oX = path.o[i][0] + (centerPoint[0] - path.o[i][0]) * -percent;
+    oY = path.o[i][1] + (centerPoint[1] - path.o[i][1]) * -percent;
+    iX = path.i[i][0] + (centerPoint[0] - path.i[i][0]) * -percent;
+    iY = path.i[i][1] + (centerPoint[1] - path.i[i][1]) * -percent;
+    clonedPath.setTripleAt(vX, vY, oX, oY, iX, iY, i);
+  }
+  return clonedPath;
+};
+
+PuckerAndBloatModifier.prototype.processShapes = function (_isFirstFrame) {
+  var shapePaths;
+  var i;
+  var len = this.shapes.length;
+  var j;
+  var jLen;
+  var amount = this.amount.v;
+
+  if (amount !== 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], amount));
+        }
+      }
+      shapeData.shape.paths = shapeData.localShapeCollection;
+    }
+  }
+  if (!this.dynamicProperties.length) {
+    this._mdf = false;
+  }
+};
+
+export default PuckerAndBloatModifier;