first commit

This commit is contained in:
becarta
2025-05-16 00:17:42 +02:00
parent ea5c866137
commit bacf566ec9
6020 changed files with 1715262 additions and 0 deletions

115
node_modules/lottie-web/player/index.html generated vendored Normal file
View File

@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<style>
body, html{
background-color:#ccc;
margin: 0px;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
#pusher{
background-color:#ccc;
width:100%;
height:0%;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
/*display:none;*/
}
#lottie{
background-color:#ccc;
width:100%;
height:100%;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
/*display:none;*/
}
</style>
<!-- build:js lottie.js -->
<!-- end Expressions -->
<!-- endbuild -->
<!-- <script src="js/module.js" type="module"></script> -->
<!-- <script src="lottie.js"></script> -->
<!-- <script src="bodymovin_light.js"></script> -->
</head>
<body>
<div id="pusher"></div>
<div id="lottie"></div>
<script>
var anim;
import('./js/modules/full.js').then(({default: lottie }) => {
var elem = document.getElementById('lottie');
var animData = {
container: elem,
renderer: 'svg',
loop: 3,
autoplay: true,
rendererSettings: {
progressiveLoad:false,
preserveAspectRatio: 'xMidYMid meet',
imagePreserveAspectRatio: 'xMidYMid meet',
title: 'TEST TITLE',
description: 'TEST DESCRIPTION',
filterSize: {
width: '500%',
height: '500%',
x: '-200%',
y: '-200%',
}
},
path: 'exports/render/data.json',
audioFactory: createAudio,
};
// lottie.setQuality('low');
// anim.setSpeed(0.5)
// lottie.useWebWorker(true);
window.lottie = lottie;
setTimeout(() => {
anim = lottie.loadAnimation(animData);
anim.setSubframe(false);
anim.onError = function(errorType, nativeError, errorProps) {
console.log(errorType)
}
anim.addEventListener('error', function(error) {
console.log(error)
})
anim.addEventListener('error', function(error) {
console.log(error)
})
anim.addEventListener('DOMLoaded', function() {
// setTimeout(()=>{
// console.log('UPDATEING TEXT');
// anim.updateDocumentData(['a_text','adwqd'], {t: 'eeee'});
// }, 100)
})
}, 1)
});
// setTimeout(()=>anim.destroy(), 1000);
function createAudio(assetPath) {
return new Howl({
src: [assetPath]
})
}
</script>
</body>
</html>

58
node_modules/lottie-web/player/index2.html generated vendored Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
background-color: #ff0000;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 50px auto 50px;
}
.header {
grid-column: 1;
grid-row: 1;
background-color: #00ff00;
}
.main {
grid-column: 1;
grid-row: 2;
background-color: #0000ff;
min-height: 0;
min-width: 0;
}
.main-content {
width: 100%;
height: 800px;
padding: 20px;
background-color: #000000;
}
.footer {
grid-column: 1;
grid-row: 3;
background-color: #ffff00;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="main">
<div class="main-content">
</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,158 @@
/* eslint-disable */
const BezierFactory = (function () {
/**
* BezierEasing - use bezier curve for transition easing function
* by Gaëtan Renaudeau 2014 - 2015 MIT License
*
* Credits: is based on Firefox's nsSMILKeySpline.cpp
* Usage:
* var spline = BezierEasing([ 0.25, 0.1, 0.25, 1.0 ])
* spline.get(x) => returns the easing value | x must be in [0, 1] range
*
*/
var ob = {};
ob.getBezierEasing = getBezierEasing;
var beziers = {};
function getBezierEasing(a, b, c, d, nm) {
var str = nm || ('bez_' + a + '_' + b + '_' + c + '_' + d).replace(/\./g, 'p');
if (beziers[str]) {
return beziers[str];
}
var bezEasing = new BezierEasing([a, b, c, d]);
beziers[str] = bezEasing;
return bezEasing;
}
// These values are established by empiricism with tests (tradeoff: performance VS precision)
var NEWTON_ITERATIONS = 4;
var NEWTON_MIN_SLOPE = 0.001;
var SUBDIVISION_PRECISION = 0.0000001;
var SUBDIVISION_MAX_ITERATIONS = 10;
var kSplineTableSize = 11;
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
var float32ArraySupported = typeof Float32Array === 'function';
function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
function C(aA1) { return 3.0 * aA1; }
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
function calcBezier(aT, aA1, aA2) {
return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
}
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
function getSlope(aT, aA1, aA2) {
return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
}
function binarySubdivide(aX, aA, aB, mX1, mX2) {
var currentX,
currentT,
i = 0;
do {
currentT = aA + (aB - aA) / 2.0;
currentX = calcBezier(currentT, mX1, mX2) - aX;
if (currentX > 0.0) {
aB = currentT;
} else {
aA = currentT;
}
} while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
return currentT;
}
function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
var currentSlope = getSlope(aGuessT, mX1, mX2);
if (currentSlope === 0.0) return aGuessT;
var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
aGuessT -= currentX / currentSlope;
}
return aGuessT;
}
/**
* points is an array of [ mX1, mY1, mX2, mY2 ]
*/
function BezierEasing(points) {
this._p = points;
this._mSampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
this._precomputed = false;
this.get = this.get.bind(this);
}
BezierEasing.prototype = {
get: function (x) {
var mX1 = this._p[0],
mY1 = this._p[1],
mX2 = this._p[2],
mY2 = this._p[3];
if (!this._precomputed) this._precompute();
if (mX1 === mY1 && mX2 === mY2) return x; // linear
// Because JavaScript number are imprecise, we should guarantee the extremes are right.
if (x === 0) return 0;
if (x === 1) return 1;
return calcBezier(this._getTForX(x), mY1, mY2);
},
// Private part
_precompute: function () {
var mX1 = this._p[0],
mY1 = this._p[1],
mX2 = this._p[2],
mY2 = this._p[3];
this._precomputed = true;
if (mX1 !== mY1 || mX2 !== mY2) { this._calcSampleValues(); }
},
_calcSampleValues: function () {
var mX1 = this._p[0],
mX2 = this._p[2];
for (var i = 0; i < kSplineTableSize; ++i) {
this._mSampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
}
},
/**
* getTForX chose the fastest heuristic to determine the percentage value precisely from a given X projection.
*/
_getTForX: function (aX) {
var mX1 = this._p[0],
mX2 = this._p[2],
mSampleValues = this._mSampleValues;
var intervalStart = 0.0;
var currentSample = 1;
var lastSample = kSplineTableSize - 1;
for (; currentSample !== lastSample && mSampleValues[currentSample] <= aX; ++currentSample) {
intervalStart += kSampleStepSize;
}
--currentSample;
// Interpolate to provide an initial guess for t
var dist = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample + 1] - mSampleValues[currentSample]);
var guessForT = intervalStart + dist * kSampleStepSize;
var initialSlope = getSlope(guessForT, mX1, mX2);
if (initialSlope >= NEWTON_MIN_SLOPE) {
return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
} if (initialSlope === 0.0) {
return guessForT;
}
return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
},
};
return ob;
}());
export default BezierFactory;

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,237 @@
/* eslint-disable */
/*
Copyright 2014 David Bau.
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
function seedRandom(pool, math) {
//
// The following constants are related to IEEE 754 limits.
//
var global = this,
width = 256, // each RC4 output is 0 <= x < 256
chunks = 6, // at least six RC4 outputs for each double
digits = 52, // there are 52 significant digits in a double
rngname = 'random', // rngname: name for Math.random and Math.seedrandom
startdenom = math.pow(width, chunks),
significance = math.pow(2, digits),
overflow = significance * 2,
mask = width - 1,
nodecrypto; // node.js crypto module, initialized at the bottom.
//
// seedrandom()
// This is the seedrandom function described above.
//
function seedrandom(seed, options, callback) {
var key = [];
options = (options === true) ? { entropy: true } : (options || {});
// Flatten the seed string or build one from local entropy if needed.
var shortseed = mixkey(flatten(
options.entropy ? [seed, tostring(pool)] :
(seed === null) ? autoseed() : seed, 3), key);
// Use the seed to initialize an ARC4 generator.
var arc4 = new ARC4(key);
// This function returns a random double in [0, 1) that contains
// randomness in every bit of the mantissa of the IEEE 754 value.
var prng = function() {
var n = arc4.g(chunks), // Start with a numerator n < 2 ^ 48
d = startdenom, // and denominator d = 2 ^ 48.
x = 0; // and no 'extra last byte'.
while (n < significance) { // Fill up all significant digits by
n = (n + x) * width; // shifting numerator and
d *= width; // denominator and generating a
x = arc4.g(1); // new least-significant-byte.
}
while (n >= overflow) { // To avoid rounding up, before adding
n /= 2; // last byte, shift everything
d /= 2; // right using integer math until
x >>>= 1; // we have exactly the desired bits.
}
return (n + x) / d; // Form the number within [0, 1).
};
prng.int32 = function() { return arc4.g(4) | 0; };
prng.quick = function() { return arc4.g(4) / 0x100000000; };
prng.double = prng;
// Mix the randomness into accumulated entropy.
mixkey(tostring(arc4.S), pool);
// Calling convention: what to return as a function of prng, seed, is_math.
return (options.pass || callback ||
function(prng, seed, is_math_call, state) {
if (state) {
// Load the arc4 state from the given state if it has an S array.
if (state.S) { copy(state, arc4); }
// Only provide the .state method if requested via options.state.
prng.state = function() { return copy(arc4, {}); };
}
// If called as a method of Math (Math.seedrandom()), mutate
// Math.random because that is how seedrandom.js has worked since v1.0.
if (is_math_call) { math[rngname] = prng; return seed; }
// Otherwise, it is a newer calling convention, so return the
// prng directly.
else return prng;
})(
prng,
shortseed,
'global' in options ? options.global : (this == math),
options.state);
}
math['seed' + rngname] = seedrandom;
//
// ARC4
//
// An ARC4 implementation. The constructor takes a key in the form of
// an array of at most (width) integers that should be 0 <= x < (width).
//
// The g(count) method returns a pseudorandom integer that concatenates
// the next (count) outputs from ARC4. Its return value is a number x
// that is in the range 0 <= x < (width ^ count).
//
function ARC4(key) {
var t, keylen = key.length,
me = this, i = 0, j = me.i = me.j = 0, s = me.S = [];
// The empty key [] is treated as [0].
if (!keylen) { key = [keylen++]; }
// Set up S using the standard key scheduling algorithm.
while (i < width) {
s[i] = i++;
}
for (i = 0; i < width; i++) {
s[i] = s[j = mask & (j + key[i % keylen] + (t = s[i]))];
s[j] = t;
}
// The "g" method returns the next (count) outputs as one number.
me.g = function(count) {
// Using instance members instead of closure state nearly doubles speed.
var t, r = 0,
i = me.i, j = me.j, s = me.S;
while (count--) {
t = s[i = mask & (i + 1)];
r = r * width + s[mask & ((s[i] = s[j = mask & (j + t)]) + (s[j] = t))];
}
me.i = i; me.j = j;
return r;
// For robust unpredictability, the function call below automatically
// discards an initial batch of values. This is called RC4-drop[256].
// See http://google.com/search?q=rsa+fluhrer+response&btnI
};
}
//
// copy()
// Copies internal state of ARC4 to or from a plain object.
//
function copy(f, t) {
t.i = f.i;
t.j = f.j;
t.S = f.S.slice();
return t;
}
//
// flatten()
// Converts an object tree to nested arrays of strings.
//
function flatten(obj, depth) {
var result = [], typ = (typeof obj), prop;
if (depth && typ == 'object') {
for (prop in obj) {
try { result.push(flatten(obj[prop], depth - 1)); } catch (e) {}
}
}
return (result.length ? result : typ == 'string' ? obj : obj + '\0');
}
//
// mixkey()
// Mixes a string seed into a key that is an array of integers, and
// returns a shortened string seed that is equivalent to the result key.
//
function mixkey(seed, key) {
var stringseed = seed + '', smear, j = 0;
while (j < stringseed.length) {
key[mask & j] =
mask & ((smear ^= key[mask & j] * 19) + stringseed.charCodeAt(j++));
}
return tostring(key);
}
//
// autoseed()
// Returns an object for autoseeding, using window.crypto and Node crypto
// module if available.
//
function autoseed() {
try {
if (nodecrypto) { return tostring(nodecrypto.randomBytes(width)); }
var out = new Uint8Array(width);
(global.crypto || global.msCrypto).getRandomValues(out);
return tostring(out);
} catch (e) {
var browser = global.navigator,
plugins = browser && browser.plugins;
return [+new Date(), global, plugins, global.screen, tostring(pool)];
}
}
//
// tostring()
// Converts an array of charcodes to a string
//
function tostring(a) {
return String.fromCharCode.apply(0, a);
}
//
// When seedrandom.js is loaded, we immediately mix a few bits
// from the built-in RNG into the entropy pool. Because we do
// not want to interfere with deterministic PRNG state later,
// seedrandom will not call math.random on its own again after
// initialization.
//
mixkey(math.random(), pool);
//
// Nodejs and AMD support: export the implementation as a module using
// either convention.
//
// End anonymous scope, and pass initial values.
};
function initialize(BMMath) {
seedRandom([], BMMath);
}
export default initialize;

View File

@@ -0,0 +1,449 @@
import {
createTypedArray,
} from '../utils/helpers/arrays';
/*!
Transformation Matrix v2.0
(c) Epistemex 2014-2015
www.epistemex.com
By Ken Fyrstenberg
Contributions by leeoniya.
License: MIT, header required.
*/
/**
* 2D transformation matrix object initialized with identity matrix.
*
* The matrix can synchronize a canvas context by supplying the context
* as an argument, or later apply current absolute transform to an
* existing context.
*
* All values are handled as floating point values.
*
* @param {CanvasRenderingContext2D} [context] - Optional context to sync with Matrix
* @prop {number} a - scale x
* @prop {number} b - shear y
* @prop {number} c - shear x
* @prop {number} d - scale y
* @prop {number} e - translate x
* @prop {number} f - translate y
* @prop {CanvasRenderingContext2D|null} [context=null] - set or get current canvas context
* @constructor
*/
const Matrix = (function () {
var _cos = Math.cos;
var _sin = Math.sin;
var _tan = Math.tan;
var _rnd = Math.round;
function reset() {
this.props[0] = 1;
this.props[1] = 0;
this.props[2] = 0;
this.props[3] = 0;
this.props[4] = 0;
this.props[5] = 1;
this.props[6] = 0;
this.props[7] = 0;
this.props[8] = 0;
this.props[9] = 0;
this.props[10] = 1;
this.props[11] = 0;
this.props[12] = 0;
this.props[13] = 0;
this.props[14] = 0;
this.props[15] = 1;
return this;
}
function rotate(angle) {
if (angle === 0) {
return this;
}
var mCos = _cos(angle);
var mSin = _sin(angle);
return this._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
function rotateX(angle) {
if (angle === 0) {
return this;
}
var mCos = _cos(angle);
var mSin = _sin(angle);
return this._t(1, 0, 0, 0, 0, mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1);
}
function rotateY(angle) {
if (angle === 0) {
return this;
}
var mCos = _cos(angle);
var mSin = _sin(angle);
return this._t(mCos, 0, mSin, 0, 0, 1, 0, 0, -mSin, 0, mCos, 0, 0, 0, 0, 1);
}
function rotateZ(angle) {
if (angle === 0) {
return this;
}
var mCos = _cos(angle);
var mSin = _sin(angle);
return this._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
function shear(sx, sy) {
return this._t(1, sy, sx, 1, 0, 0);
}
function skew(ax, ay) {
return this.shear(_tan(ax), _tan(ay));
}
function skewFromAxis(ax, angle) {
var mCos = _cos(angle);
var mSin = _sin(angle);
return this._t(mCos, mSin, 0, 0, -mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
._t(1, 0, 0, 0, _tan(ax), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// return this._t(mCos, mSin, -mSin, mCos, 0, 0)._t(1, 0, _tan(ax), 1, 0, 0)._t(mCos, -mSin, mSin, mCos, 0, 0);
}
function scale(sx, sy, sz) {
if (!sz && sz !== 0) {
sz = 1;
}
if (sx === 1 && sy === 1 && sz === 1) {
return this;
}
return this._t(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1);
}
function setTransform(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) {
this.props[0] = a;
this.props[1] = b;
this.props[2] = c;
this.props[3] = d;
this.props[4] = e;
this.props[5] = f;
this.props[6] = g;
this.props[7] = h;
this.props[8] = i;
this.props[9] = j;
this.props[10] = k;
this.props[11] = l;
this.props[12] = m;
this.props[13] = n;
this.props[14] = o;
this.props[15] = p;
return this;
}
function translate(tx, ty, tz) {
tz = tz || 0;
if (tx !== 0 || ty !== 0 || tz !== 0) {
return this._t(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, ty, tz, 1);
}
return this;
}
function transform(a2, b2, c2, d2, e2, f2, g2, h2, i2, j2, k2, l2, m2, n2, o2, p2) {
var _p = this.props;
if (a2 === 1 && b2 === 0 && c2 === 0 && d2 === 0 && e2 === 0 && f2 === 1 && g2 === 0 && h2 === 0 && i2 === 0 && j2 === 0 && k2 === 1 && l2 === 0) {
// NOTE: commenting this condition because TurboFan deoptimizes code when present
// if(m2 !== 0 || n2 !== 0 || o2 !== 0){
_p[12] = _p[12] * a2 + _p[15] * m2;
_p[13] = _p[13] * f2 + _p[15] * n2;
_p[14] = _p[14] * k2 + _p[15] * o2;
_p[15] *= p2;
// }
this._identityCalculated = false;
return this;
}
var a1 = _p[0];
var b1 = _p[1];
var c1 = _p[2];
var d1 = _p[3];
var e1 = _p[4];
var f1 = _p[5];
var g1 = _p[6];
var h1 = _p[7];
var i1 = _p[8];
var j1 = _p[9];
var k1 = _p[10];
var l1 = _p[11];
var m1 = _p[12];
var n1 = _p[13];
var o1 = _p[14];
var p1 = _p[15];
/* matrix order (canvas compatible):
* ace
* bdf
* 001
*/
_p[0] = a1 * a2 + b1 * e2 + c1 * i2 + d1 * m2;
_p[1] = a1 * b2 + b1 * f2 + c1 * j2 + d1 * n2;
_p[2] = a1 * c2 + b1 * g2 + c1 * k2 + d1 * o2;
_p[3] = a1 * d2 + b1 * h2 + c1 * l2 + d1 * p2;
_p[4] = e1 * a2 + f1 * e2 + g1 * i2 + h1 * m2;
_p[5] = e1 * b2 + f1 * f2 + g1 * j2 + h1 * n2;
_p[6] = e1 * c2 + f1 * g2 + g1 * k2 + h1 * o2;
_p[7] = e1 * d2 + f1 * h2 + g1 * l2 + h1 * p2;
_p[8] = i1 * a2 + j1 * e2 + k1 * i2 + l1 * m2;
_p[9] = i1 * b2 + j1 * f2 + k1 * j2 + l1 * n2;
_p[10] = i1 * c2 + j1 * g2 + k1 * k2 + l1 * o2;
_p[11] = i1 * d2 + j1 * h2 + k1 * l2 + l1 * p2;
_p[12] = m1 * a2 + n1 * e2 + o1 * i2 + p1 * m2;
_p[13] = m1 * b2 + n1 * f2 + o1 * j2 + p1 * n2;
_p[14] = m1 * c2 + n1 * g2 + o1 * k2 + p1 * o2;
_p[15] = m1 * d2 + n1 * h2 + o1 * l2 + p1 * p2;
this._identityCalculated = false;
return this;
}
function multiply(matrix) {
var matrixProps = matrix.props;
return this.transform(
matrixProps[0],
matrixProps[1],
matrixProps[2],
matrixProps[3],
matrixProps[4],
matrixProps[5],
matrixProps[6],
matrixProps[7],
matrixProps[8],
matrixProps[9],
matrixProps[10],
matrixProps[11],
matrixProps[12],
matrixProps[13],
matrixProps[14],
matrixProps[15]
);
}
function isIdentity() {
if (!this._identityCalculated) {
this._identity = !(this.props[0] !== 1 || this.props[1] !== 0 || this.props[2] !== 0 || this.props[3] !== 0 || this.props[4] !== 0 || this.props[5] !== 1 || this.props[6] !== 0 || this.props[7] !== 0 || this.props[8] !== 0 || this.props[9] !== 0 || this.props[10] !== 1 || this.props[11] !== 0 || this.props[12] !== 0 || this.props[13] !== 0 || this.props[14] !== 0 || this.props[15] !== 1);
this._identityCalculated = true;
}
return this._identity;
}
function equals(matr) {
var i = 0;
while (i < 16) {
if (matr.props[i] !== this.props[i]) {
return false;
}
i += 1;
}
return true;
}
function clone(matr) {
var i;
for (i = 0; i < 16; i += 1) {
matr.props[i] = this.props[i];
}
return matr;
}
function cloneFromProps(props) {
var i;
for (i = 0; i < 16; i += 1) {
this.props[i] = props[i];
}
}
function applyToPoint(x, y, z) {
return {
x: x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],
y: x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],
z: x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14],
};
/* return {
x: x * me.a + y * me.c + me.e,
y: x * me.b + y * me.d + me.f
}; */
}
function applyToX(x, y, z) {
return x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12];
}
function applyToY(x, y, z) {
return x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13];
}
function applyToZ(x, y, z) {
return x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14];
}
function getInverseMatrix() {
var determinant = this.props[0] * this.props[5] - this.props[1] * this.props[4];
var a = this.props[5] / determinant;
var b = -this.props[1] / determinant;
var c = -this.props[4] / determinant;
var d = this.props[0] / determinant;
var e = (this.props[4] * this.props[13] - this.props[5] * this.props[12]) / determinant;
var f = -(this.props[0] * this.props[13] - this.props[1] * this.props[12]) / determinant;
var inverseMatrix = new Matrix();
inverseMatrix.props[0] = a;
inverseMatrix.props[1] = b;
inverseMatrix.props[4] = c;
inverseMatrix.props[5] = d;
inverseMatrix.props[12] = e;
inverseMatrix.props[13] = f;
return inverseMatrix;
}
function inversePoint(pt) {
var inverseMatrix = this.getInverseMatrix();
return inverseMatrix.applyToPointArray(pt[0], pt[1], pt[2] || 0);
}
function inversePoints(pts) {
var i;
var len = pts.length;
var retPts = [];
for (i = 0; i < len; i += 1) {
retPts[i] = inversePoint(pts[i]);
}
return retPts;
}
function applyToTriplePoints(pt1, pt2, pt3) {
var arr = createTypedArray('float32', 6);
if (this.isIdentity()) {
arr[0] = pt1[0];
arr[1] = pt1[1];
arr[2] = pt2[0];
arr[3] = pt2[1];
arr[4] = pt3[0];
arr[5] = pt3[1];
} else {
var p0 = this.props[0];
var p1 = this.props[1];
var p4 = this.props[4];
var p5 = this.props[5];
var p12 = this.props[12];
var p13 = this.props[13];
arr[0] = pt1[0] * p0 + pt1[1] * p4 + p12;
arr[1] = pt1[0] * p1 + pt1[1] * p5 + p13;
arr[2] = pt2[0] * p0 + pt2[1] * p4 + p12;
arr[3] = pt2[0] * p1 + pt2[1] * p5 + p13;
arr[4] = pt3[0] * p0 + pt3[1] * p4 + p12;
arr[5] = pt3[0] * p1 + pt3[1] * p5 + p13;
}
return arr;
}
function applyToPointArray(x, y, z) {
var arr;
if (this.isIdentity()) {
arr = [x, y, z];
} else {
arr = [
x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],
x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],
x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14],
];
}
return arr;
}
function applyToPointStringified(x, y) {
if (this.isIdentity()) {
return x + ',' + y;
}
var _p = this.props;
return Math.round((x * _p[0] + y * _p[4] + _p[12]) * 100) / 100 + ',' + Math.round((x * _p[1] + y * _p[5] + _p[13]) * 100) / 100;
}
function toCSS() {
// Doesn't make much sense to add this optimization. If it is an identity matrix, it's very likely this will get called only once since it won't be keyframed.
/* if(this.isIdentity()) {
return '';
} */
var i = 0;
var props = this.props;
var cssValue = 'matrix3d(';
var v = 10000;
while (i < 16) {
cssValue += _rnd(props[i] * v) / v;
cssValue += i === 15 ? ')' : ',';
i += 1;
}
return cssValue;
}
function roundMatrixProperty(val) {
var v = 10000;
if ((val < 0.000001 && val > 0) || (val > -0.000001 && val < 0)) {
return _rnd(val * v) / v;
}
return val;
}
function to2dCSS() {
// Doesn't make much sense to add this optimization. If it is an identity matrix, it's very likely this will get called only once since it won't be keyframed.
/* if(this.isIdentity()) {
return '';
} */
var props = this.props;
var _a = roundMatrixProperty(props[0]);
var _b = roundMatrixProperty(props[1]);
var _c = roundMatrixProperty(props[4]);
var _d = roundMatrixProperty(props[5]);
var _e = roundMatrixProperty(props[12]);
var _f = roundMatrixProperty(props[13]);
return 'matrix(' + _a + ',' + _b + ',' + _c + ',' + _d + ',' + _e + ',' + _f + ')';
}
return function () {
this.reset = reset;
this.rotate = rotate;
this.rotateX = rotateX;
this.rotateY = rotateY;
this.rotateZ = rotateZ;
this.skew = skew;
this.skewFromAxis = skewFromAxis;
this.shear = shear;
this.scale = scale;
this.setTransform = setTransform;
this.translate = translate;
this.transform = transform;
this.multiply = multiply;
this.applyToPoint = applyToPoint;
this.applyToX = applyToX;
this.applyToY = applyToY;
this.applyToZ = applyToZ;
this.applyToPointArray = applyToPointArray;
this.applyToTriplePoints = applyToTriplePoints;
this.applyToPointStringified = applyToPointStringified;
this.toCSS = toCSS;
this.to2dCSS = to2dCSS;
this.clone = clone;
this.cloneFromProps = cloneFromProps;
this.equals = equals;
this.inversePoints = inversePoints;
this.inversePoint = inversePoint;
this.getInverseMatrix = getInverseMatrix;
this._t = this.transform;
this.isIdentity = isIdentity;
this._identity = true;
this._identityCalculated = false;
this.props = createTypedArray('float32', 16);
this.reset();
};
}());
export default Matrix;

83
node_modules/lottie-web/player/js/EffectsManager.js generated vendored Normal file
View File

@@ -0,0 +1,83 @@
import {
extendPrototype,
} from './utils/functionExtensions';
import {
SliderEffect,
AngleEffect,
ColorEffect,
PointEffect,
LayerIndexEffect,
MaskIndexEffect,
CheckboxEffect,
NoValueEffect,
} from './effects/SliderEffect';
import DynamicPropertyContainer from './utils/helpers/dynamicProperties';
function EffectsManager(data, element) {
var effects = data.ef || [];
this.effectElements = [];
var i;
var len = effects.length;
var effectItem;
for (i = 0; i < len; i += 1) {
effectItem = new GroupEffect(effects[i], element);
this.effectElements.push(effectItem);
}
}
function GroupEffect(data, element) {
this.init(data, element);
}
extendPrototype([DynamicPropertyContainer], GroupEffect);
GroupEffect.prototype.getValue = GroupEffect.prototype.iterateDynamicProperties;
GroupEffect.prototype.init = function (data, element) {
this.data = data;
this.effectElements = [];
this.initDynamicPropertyContainer(element);
var i;
var len = this.data.ef.length;
var eff;
var effects = this.data.ef;
for (i = 0; i < len; i += 1) {
eff = null;
switch (effects[i].ty) {
case 0:
eff = new SliderEffect(effects[i], element, this);
break;
case 1:
eff = new AngleEffect(effects[i], element, this);
break;
case 2:
eff = new ColorEffect(effects[i], element, this);
break;
case 3:
eff = new PointEffect(effects[i], element, this);
break;
case 4:
case 7:
eff = new CheckboxEffect(effects[i], element, this);
break;
case 10:
eff = new LayerIndexEffect(effects[i], element, this);
break;
case 11:
eff = new MaskIndexEffect(effects[i], element, this);
break;
case 5:
eff = new EffectsManager(effects[i], element, this);
break;
// case 6:
default:
eff = new NoValueEffect(effects[i], element, this);
break;
}
if (eff) {
this.effectElements.push(eff);
}
}
};
export default EffectsManager;

View File

@@ -0,0 +1,809 @@
import {
extendPrototype,
} from '../utils/functionExtensions';
import audioControllerFactory from '../utils/audio/AudioController';
import {
getSubframeEnabled,
BMEnterFrameEvent,
BMCompleteEvent,
BMCompleteLoopEvent,
BMSegmentStartEvent,
BMDestroyEvent,
BMRenderFrameErrorEvent,
BMConfigErrorEvent,
createElementID,
getExpressionsPlugin,
} from '../utils/common';
import ImagePreloader from '../utils/imagePreloader';
import BaseEvent from '../utils/BaseEvent';
import dataManager from '../utils/DataManager';
import markerParser from '../utils/markers/markerParser';
import ProjectInterface from '../utils/expressions/ProjectInterface';
import { getRenderer, getRegisteredRenderer } from '../renderers/renderersManager';
const AnimationItem = function () {
this._cbs = [];
this.name = '';
this.path = '';
this.isLoaded = false;
this.currentFrame = 0;
this.currentRawFrame = 0;
this.firstFrame = 0;
this.totalFrames = 0;
this.frameRate = 0;
this.frameMult = 0;
this.playSpeed = 1;
this.playDirection = 1;
this.playCount = 0;
this.animationData = {};
this.assets = [];
this.isPaused = true;
this.autoplay = false;
this.loop = true;
this.renderer = null;
this.animationID = createElementID();
this.assetsPath = '';
this.timeCompleted = 0;
this.segmentPos = 0;
this.isSubframeEnabled = getSubframeEnabled();
this.segments = [];
this._idle = true;
this._completedLoop = false;
this.projectInterface = ProjectInterface();
this.imagePreloader = new ImagePreloader();
this.audioController = audioControllerFactory();
this.markers = [];
this.configAnimation = this.configAnimation.bind(this);
this.onSetupError = this.onSetupError.bind(this);
this.onSegmentComplete = this.onSegmentComplete.bind(this);
this.drawnFrameEvent = new BMEnterFrameEvent('drawnFrame', 0, 0, 0);
this.expressionsPlugin = getExpressionsPlugin();
};
extendPrototype([BaseEvent], AnimationItem);
AnimationItem.prototype.setParams = function (params) {
if (params.wrapper || params.container) {
this.wrapper = params.wrapper || params.container;
}
var animType = 'svg';
if (params.animType) {
animType = params.animType;
} else if (params.renderer) {
animType = params.renderer;
}
const RendererClass = getRenderer(animType);
this.renderer = new RendererClass(this, params.rendererSettings);
this.imagePreloader.setCacheType(animType, this.renderer.globalData.defs);
this.renderer.setProjectInterface(this.projectInterface);
this.animType = animType;
if (params.loop === ''
|| params.loop === null
|| params.loop === undefined
|| params.loop === true) {
this.loop = true;
} else if (params.loop === false) {
this.loop = false;
} else {
this.loop = parseInt(params.loop, 10);
}
this.autoplay = 'autoplay' in params ? params.autoplay : true;
this.name = params.name ? params.name : '';
this.autoloadSegments = Object.prototype.hasOwnProperty.call(params, 'autoloadSegments') ? params.autoloadSegments : true;
this.assetsPath = params.assetsPath;
this.initialSegment = params.initialSegment;
if (params.audioFactory) {
this.audioController.setAudioFactory(params.audioFactory);
}
if (params.animationData) {
this.setupAnimation(params.animationData);
} else if (params.path) {
if (params.path.lastIndexOf('\\') !== -1) {
this.path = params.path.substr(0, params.path.lastIndexOf('\\') + 1);
} else {
this.path = params.path.substr(0, params.path.lastIndexOf('/') + 1);
}
this.fileName = params.path.substr(params.path.lastIndexOf('/') + 1);
this.fileName = this.fileName.substr(0, this.fileName.lastIndexOf('.json'));
dataManager.loadAnimation(
params.path,
this.configAnimation,
this.onSetupError
);
}
};
AnimationItem.prototype.onSetupError = function () {
this.trigger('data_failed');
};
AnimationItem.prototype.setupAnimation = function (data) {
dataManager.completeAnimation(
data,
this.configAnimation
);
};
AnimationItem.prototype.setData = function (wrapper, animationData) {
if (animationData) {
if (typeof animationData !== 'object') {
animationData = JSON.parse(animationData);
}
}
var params = {
wrapper: wrapper,
animationData: animationData,
};
var wrapperAttributes = wrapper.attributes;
params.path = wrapperAttributes.getNamedItem('data-animation-path') // eslint-disable-line no-nested-ternary
? wrapperAttributes.getNamedItem('data-animation-path').value
: wrapperAttributes.getNamedItem('data-bm-path') // eslint-disable-line no-nested-ternary
? wrapperAttributes.getNamedItem('data-bm-path').value
: wrapperAttributes.getNamedItem('bm-path')
? wrapperAttributes.getNamedItem('bm-path').value
: '';
params.animType = wrapperAttributes.getNamedItem('data-anim-type') // eslint-disable-line no-nested-ternary
? wrapperAttributes.getNamedItem('data-anim-type').value
: wrapperAttributes.getNamedItem('data-bm-type') // eslint-disable-line no-nested-ternary
? wrapperAttributes.getNamedItem('data-bm-type').value
: wrapperAttributes.getNamedItem('bm-type') // eslint-disable-line no-nested-ternary
? wrapperAttributes.getNamedItem('bm-type').value
: wrapperAttributes.getNamedItem('data-bm-renderer') // eslint-disable-line no-nested-ternary
? wrapperAttributes.getNamedItem('data-bm-renderer').value
: wrapperAttributes.getNamedItem('bm-renderer')
? wrapperAttributes.getNamedItem('bm-renderer').value
: getRegisteredRenderer() || 'canvas';
var loop = wrapperAttributes.getNamedItem('data-anim-loop') // eslint-disable-line no-nested-ternary
? wrapperAttributes.getNamedItem('data-anim-loop').value
: wrapperAttributes.getNamedItem('data-bm-loop') // eslint-disable-line no-nested-ternary
? wrapperAttributes.getNamedItem('data-bm-loop').value
: wrapperAttributes.getNamedItem('bm-loop')
? wrapperAttributes.getNamedItem('bm-loop').value
: '';
if (loop === 'false') {
params.loop = false;
} else if (loop === 'true') {
params.loop = true;
} else if (loop !== '') {
params.loop = parseInt(loop, 10);
}
var autoplay = wrapperAttributes.getNamedItem('data-anim-autoplay') // eslint-disable-line no-nested-ternary
? wrapperAttributes.getNamedItem('data-anim-autoplay').value
: wrapperAttributes.getNamedItem('data-bm-autoplay') // eslint-disable-line no-nested-ternary
? wrapperAttributes.getNamedItem('data-bm-autoplay').value
: wrapperAttributes.getNamedItem('bm-autoplay')
? wrapperAttributes.getNamedItem('bm-autoplay').value
: true;
params.autoplay = autoplay !== 'false';
params.name = wrapperAttributes.getNamedItem('data-name') // eslint-disable-line no-nested-ternary
? wrapperAttributes.getNamedItem('data-name').value
: wrapperAttributes.getNamedItem('data-bm-name') // eslint-disable-line no-nested-ternary
? wrapperAttributes.getNamedItem('data-bm-name').value
: wrapperAttributes.getNamedItem('bm-name')
? wrapperAttributes.getNamedItem('bm-name').value
: '';
var prerender = wrapperAttributes.getNamedItem('data-anim-prerender') // eslint-disable-line no-nested-ternary
? wrapperAttributes.getNamedItem('data-anim-prerender').value
: wrapperAttributes.getNamedItem('data-bm-prerender') // eslint-disable-line no-nested-ternary
? wrapperAttributes.getNamedItem('data-bm-prerender').value
: wrapperAttributes.getNamedItem('bm-prerender')
? wrapperAttributes.getNamedItem('bm-prerender').value
: '';
if (prerender === 'false') {
params.prerender = false;
}
if (!params.path) {
this.trigger('destroy');
} else {
this.setParams(params);
}
};
AnimationItem.prototype.includeLayers = function (data) {
if (data.op > this.animationData.op) {
this.animationData.op = data.op;
this.totalFrames = Math.floor(data.op - this.animationData.ip);
}
var layers = this.animationData.layers;
var i;
var len = layers.length;
var newLayers = data.layers;
var j;
var jLen = newLayers.length;
for (j = 0; j < jLen; j += 1) {
i = 0;
while (i < len) {
if (layers[i].id === newLayers[j].id) {
layers[i] = newLayers[j];
break;
}
i += 1;
}
}
if (data.chars || data.fonts) {
this.renderer.globalData.fontManager.addChars(data.chars);
this.renderer.globalData.fontManager.addFonts(data.fonts, this.renderer.globalData.defs);
}
if (data.assets) {
len = data.assets.length;
for (i = 0; i < len; i += 1) {
this.animationData.assets.push(data.assets[i]);
}
}
this.animationData.__complete = false;
dataManager.completeAnimation(
this.animationData,
this.onSegmentComplete
);
};
AnimationItem.prototype.onSegmentComplete = function (data) {
this.animationData = data;
var expressionsPlugin = getExpressionsPlugin();
if (expressionsPlugin) {
expressionsPlugin.initExpressions(this);
}
this.loadNextSegment();
};
AnimationItem.prototype.loadNextSegment = function () {
var segments = this.animationData.segments;
if (!segments || segments.length === 0 || !this.autoloadSegments) {
this.trigger('data_ready');
this.timeCompleted = this.totalFrames;
return;
}
var segment = segments.shift();
this.timeCompleted = segment.time * this.frameRate;
var segmentPath = this.path + this.fileName + '_' + this.segmentPos + '.json';
this.segmentPos += 1;
dataManager.loadData(segmentPath, this.includeLayers.bind(this), function () {
this.trigger('data_failed');
}.bind(this));
};
AnimationItem.prototype.loadSegments = function () {
var segments = this.animationData.segments;
if (!segments) {
this.timeCompleted = this.totalFrames;
}
this.loadNextSegment();
};
AnimationItem.prototype.imagesLoaded = function () {
this.trigger('loaded_images');
this.checkLoaded();
};
AnimationItem.prototype.preloadImages = function () {
this.imagePreloader.setAssetsPath(this.assetsPath);
this.imagePreloader.setPath(this.path);
this.imagePreloader.loadAssets(this.animationData.assets, this.imagesLoaded.bind(this));
};
AnimationItem.prototype.configAnimation = function (animData) {
if (!this.renderer) {
return;
}
try {
this.animationData = animData;
if (this.initialSegment) {
this.totalFrames = Math.floor(this.initialSegment[1] - this.initialSegment[0]);
this.firstFrame = Math.round(this.initialSegment[0]);
} else {
this.totalFrames = Math.floor(this.animationData.op - this.animationData.ip);
this.firstFrame = Math.round(this.animationData.ip);
}
this.renderer.configAnimation(animData);
if (!animData.assets) {
animData.assets = [];
}
this.assets = this.animationData.assets;
this.frameRate = this.animationData.fr;
this.frameMult = this.animationData.fr / 1000;
this.renderer.searchExtraCompositions(animData.assets);
this.markers = markerParser(animData.markers || []);
this.trigger('config_ready');
this.preloadImages();
this.loadSegments();
this.updaFrameModifier();
this.waitForFontsLoaded();
if (this.isPaused) {
this.audioController.pause();
}
} catch (error) {
this.triggerConfigError(error);
}
};
AnimationItem.prototype.waitForFontsLoaded = function () {
if (!this.renderer) {
return;
}
if (this.renderer.globalData.fontManager.isLoaded) {
this.checkLoaded();
} else {
setTimeout(this.waitForFontsLoaded.bind(this), 20);
}
};
AnimationItem.prototype.checkLoaded = function () {
if (!this.isLoaded
&& this.renderer.globalData.fontManager.isLoaded
&& (this.imagePreloader.loadedImages() || this.renderer.rendererType !== 'canvas')
&& (this.imagePreloader.loadedFootages())
) {
this.isLoaded = true;
var expressionsPlugin = getExpressionsPlugin();
if (expressionsPlugin) {
expressionsPlugin.initExpressions(this);
}
this.renderer.initItems();
setTimeout(function () {
this.trigger('DOMLoaded');
}.bind(this), 0);
this.gotoFrame();
if (this.autoplay) {
this.play();
}
}
};
AnimationItem.prototype.resize = function (width, height) {
// Adding this validation for backwards compatibility in case an event object was being passed down
var _width = typeof width === 'number' ? width : undefined;
var _height = typeof height === 'number' ? height : undefined;
this.renderer.updateContainerSize(_width, _height);
};
AnimationItem.prototype.setSubframe = function (flag) {
this.isSubframeEnabled = !!flag;
};
AnimationItem.prototype.gotoFrame = function () {
this.currentFrame = this.isSubframeEnabled ? this.currentRawFrame : ~~this.currentRawFrame; // eslint-disable-line no-bitwise
if (this.timeCompleted !== this.totalFrames && this.currentFrame > this.timeCompleted) {
this.currentFrame = this.timeCompleted;
}
this.trigger('enterFrame');
this.renderFrame();
this.trigger('drawnFrame');
};
AnimationItem.prototype.renderFrame = function () {
if (this.isLoaded === false || !this.renderer) {
return;
}
try {
if (this.expressionsPlugin) {
this.expressionsPlugin.resetFrame();
}
this.renderer.renderFrame(this.currentFrame + this.firstFrame);
} catch (error) {
this.triggerRenderFrameError(error);
}
};
AnimationItem.prototype.play = function (name) {
if (name && this.name !== name) {
return;
}
if (this.isPaused === true) {
this.isPaused = false;
this.trigger('_play');
this.audioController.resume();
if (this._idle) {
this._idle = false;
this.trigger('_active');
}
}
};
AnimationItem.prototype.pause = function (name) {
if (name && this.name !== name) {
return;
}
if (this.isPaused === false) {
this.isPaused = true;
this.trigger('_pause');
this._idle = true;
this.trigger('_idle');
this.audioController.pause();
}
};
AnimationItem.prototype.togglePause = function (name) {
if (name && this.name !== name) {
return;
}
if (this.isPaused === true) {
this.play();
} else {
this.pause();
}
};
AnimationItem.prototype.stop = function (name) {
if (name && this.name !== name) {
return;
}
this.pause();
this.playCount = 0;
this._completedLoop = false;
this.setCurrentRawFrameValue(0);
};
AnimationItem.prototype.getMarkerData = function (markerName) {
var marker;
for (var i = 0; i < this.markers.length; i += 1) {
marker = this.markers[i];
if (marker.payload && marker.payload.name === markerName) {
return marker;
}
}
return null;
};
AnimationItem.prototype.goToAndStop = function (value, isFrame, name) {
if (name && this.name !== name) {
return;
}
var numValue = Number(value);
if (isNaN(numValue)) {
var marker = this.getMarkerData(value);
if (marker) {
this.goToAndStop(marker.time, true);
}
} else if (isFrame) {
this.setCurrentRawFrameValue(value);
} else {
this.setCurrentRawFrameValue(value * this.frameModifier);
}
this.pause();
};
AnimationItem.prototype.goToAndPlay = function (value, isFrame, name) {
if (name && this.name !== name) {
return;
}
var numValue = Number(value);
if (isNaN(numValue)) {
var marker = this.getMarkerData(value);
if (marker) {
if (!marker.duration) {
this.goToAndStop(marker.time, true);
} else {
this.playSegments([marker.time, marker.time + marker.duration], true);
}
}
} else {
this.goToAndStop(numValue, isFrame, name);
}
this.play();
};
AnimationItem.prototype.advanceTime = function (value) {
if (this.isPaused === true || this.isLoaded === false) {
return;
}
var nextValue = this.currentRawFrame + value * this.frameModifier;
var _isComplete = false;
// Checking if nextValue > totalFrames - 1 for addressing non looping and looping animations.
// If animation won't loop, it should stop at totalFrames - 1. If it will loop it should complete the last frame and then loop.
if (nextValue >= this.totalFrames - 1 && this.frameModifier > 0) {
if (!this.loop || this.playCount === this.loop) {
if (!this.checkSegments(nextValue > this.totalFrames ? nextValue % this.totalFrames : 0)) {
_isComplete = true;
nextValue = this.totalFrames - 1;
}
} else if (nextValue >= this.totalFrames) {
this.playCount += 1;
if (!this.checkSegments(nextValue % this.totalFrames)) {
this.setCurrentRawFrameValue(nextValue % this.totalFrames);
this._completedLoop = true;
this.trigger('loopComplete');
}
} else {
this.setCurrentRawFrameValue(nextValue);
}
} else if (nextValue < 0) {
if (!this.checkSegments(nextValue % this.totalFrames)) {
if (this.loop && !(this.playCount-- <= 0 && this.loop !== true)) { // eslint-disable-line no-plusplus
this.setCurrentRawFrameValue(this.totalFrames + (nextValue % this.totalFrames));
if (!this._completedLoop) {
this._completedLoop = true;
} else {
this.trigger('loopComplete');
}
} else {
_isComplete = true;
nextValue = 0;
}
}
} else {
this.setCurrentRawFrameValue(nextValue);
}
if (_isComplete) {
this.setCurrentRawFrameValue(nextValue);
this.pause();
this.trigger('complete');
}
};
AnimationItem.prototype.adjustSegment = function (arr, offset) {
this.playCount = 0;
if (arr[1] < arr[0]) {
if (this.frameModifier > 0) {
if (this.playSpeed < 0) {
this.setSpeed(-this.playSpeed);
} else {
this.setDirection(-1);
}
}
this.totalFrames = arr[0] - arr[1];
this.timeCompleted = this.totalFrames;
this.firstFrame = arr[1];
this.setCurrentRawFrameValue(this.totalFrames - 0.001 - offset);
} else if (arr[1] > arr[0]) {
if (this.frameModifier < 0) {
if (this.playSpeed < 0) {
this.setSpeed(-this.playSpeed);
} else {
this.setDirection(1);
}
}
this.totalFrames = arr[1] - arr[0];
this.timeCompleted = this.totalFrames;
this.firstFrame = arr[0];
this.setCurrentRawFrameValue(0.001 + offset);
}
this.trigger('segmentStart');
};
AnimationItem.prototype.setSegment = function (init, end) {
var pendingFrame = -1;
if (this.isPaused) {
if (this.currentRawFrame + this.firstFrame < init) {
pendingFrame = init;
} else if (this.currentRawFrame + this.firstFrame > end) {
pendingFrame = end - init;
}
}
this.firstFrame = init;
this.totalFrames = end - init;
this.timeCompleted = this.totalFrames;
if (pendingFrame !== -1) {
this.goToAndStop(pendingFrame, true);
}
};
AnimationItem.prototype.playSegments = function (arr, forceFlag) {
if (forceFlag) {
this.segments.length = 0;
}
if (typeof arr[0] === 'object') {
var i;
var len = arr.length;
for (i = 0; i < len; i += 1) {
this.segments.push(arr[i]);
}
} else {
this.segments.push(arr);
}
if (this.segments.length && forceFlag) {
this.adjustSegment(this.segments.shift(), 0);
}
if (this.isPaused) {
this.play();
}
};
AnimationItem.prototype.resetSegments = function (forceFlag) {
this.segments.length = 0;
this.segments.push([this.animationData.ip, this.animationData.op]);
if (forceFlag) {
this.checkSegments(0);
}
};
AnimationItem.prototype.checkSegments = function (offset) {
if (this.segments.length) {
this.adjustSegment(this.segments.shift(), offset);
return true;
}
return false;
};
AnimationItem.prototype.destroy = function (name) {
if ((name && this.name !== name) || !this.renderer) {
return;
}
this.renderer.destroy();
this.imagePreloader.destroy();
this.trigger('destroy');
this._cbs = null;
this.onEnterFrame = null;
this.onLoopComplete = null;
this.onComplete = null;
this.onSegmentStart = null;
this.onDestroy = null;
this.renderer = null;
this.expressionsPlugin = null;
this.imagePreloader = null;
this.projectInterface = null;
};
AnimationItem.prototype.setCurrentRawFrameValue = function (value) {
this.currentRawFrame = value;
this.gotoFrame();
};
AnimationItem.prototype.setSpeed = function (val) {
this.playSpeed = val;
this.updaFrameModifier();
};
AnimationItem.prototype.setDirection = function (val) {
this.playDirection = val < 0 ? -1 : 1;
this.updaFrameModifier();
};
AnimationItem.prototype.setLoop = function (isLooping) {
this.loop = isLooping;
};
AnimationItem.prototype.setVolume = function (val, name) {
if (name && this.name !== name) {
return;
}
this.audioController.setVolume(val);
};
AnimationItem.prototype.getVolume = function () {
return this.audioController.getVolume();
};
AnimationItem.prototype.mute = function (name) {
if (name && this.name !== name) {
return;
}
this.audioController.mute();
};
AnimationItem.prototype.unmute = function (name) {
if (name && this.name !== name) {
return;
}
this.audioController.unmute();
};
AnimationItem.prototype.updaFrameModifier = function () {
this.frameModifier = this.frameMult * this.playSpeed * this.playDirection;
this.audioController.setRate(this.playSpeed * this.playDirection);
};
AnimationItem.prototype.getPath = function () {
return this.path;
};
AnimationItem.prototype.getAssetsPath = function (assetData) {
var path = '';
if (assetData.e) {
path = assetData.p;
} else if (this.assetsPath) {
var imagePath = assetData.p;
if (imagePath.indexOf('images/') !== -1) {
imagePath = imagePath.split('/')[1];
}
path = this.assetsPath + imagePath;
} else {
path = this.path;
path += assetData.u ? assetData.u : '';
path += assetData.p;
}
return path;
};
AnimationItem.prototype.getAssetData = function (id) {
var i = 0;
var len = this.assets.length;
while (i < len) {
if (id === this.assets[i].id) {
return this.assets[i];
}
i += 1;
}
return null;
};
AnimationItem.prototype.hide = function () {
this.renderer.hide();
};
AnimationItem.prototype.show = function () {
this.renderer.show();
};
AnimationItem.prototype.getDuration = function (isFrame) {
return isFrame ? this.totalFrames : this.totalFrames / this.frameRate;
};
AnimationItem.prototype.updateDocumentData = function (path, documentData, index) {
try {
var element = this.renderer.getElementByPath(path);
element.updateDocumentData(documentData, index);
} catch (error) {
// TODO: decide how to handle catch case
}
};
AnimationItem.prototype.trigger = function (name) {
if (this._cbs && this._cbs[name]) {
switch (name) {
case 'enterFrame':
this.triggerEvent(name, new BMEnterFrameEvent(name, this.currentFrame, this.totalFrames, this.frameModifier));
break;
case 'drawnFrame':
this.drawnFrameEvent.currentTime = this.currentFrame;
this.drawnFrameEvent.totalTime = this.totalFrames;
this.drawnFrameEvent.direction = this.frameModifier;
this.triggerEvent(name, this.drawnFrameEvent);
break;
case 'loopComplete':
this.triggerEvent(name, new BMCompleteLoopEvent(name, this.loop, this.playCount, this.frameMult));
break;
case 'complete':
this.triggerEvent(name, new BMCompleteEvent(name, this.frameMult));
break;
case 'segmentStart':
this.triggerEvent(name, new BMSegmentStartEvent(name, this.firstFrame, this.totalFrames));
break;
case 'destroy':
this.triggerEvent(name, new BMDestroyEvent(name, this));
break;
default:
this.triggerEvent(name);
}
}
if (name === 'enterFrame' && this.onEnterFrame) {
this.onEnterFrame.call(this, new BMEnterFrameEvent(name, this.currentFrame, this.totalFrames, this.frameMult));
}
if (name === 'loopComplete' && this.onLoopComplete) {
this.onLoopComplete.call(this, new BMCompleteLoopEvent(name, this.loop, this.playCount, this.frameMult));
}
if (name === 'complete' && this.onComplete) {
this.onComplete.call(this, new BMCompleteEvent(name, this.frameMult));
}
if (name === 'segmentStart' && this.onSegmentStart) {
this.onSegmentStart.call(this, new BMSegmentStartEvent(name, this.firstFrame, this.totalFrames));
}
if (name === 'destroy' && this.onDestroy) {
this.onDestroy.call(this, new BMDestroyEvent(name, this));
}
};
AnimationItem.prototype.triggerRenderFrameError = function (nativeError) {
var error = new BMRenderFrameErrorEvent(nativeError, this.currentFrame);
this.triggerEvent('error', error);
if (this.onError) {
this.onError.call(this, error);
}
};
AnimationItem.prototype.triggerConfigError = function (nativeError) {
var error = new BMConfigErrorEvent(nativeError, this.currentFrame);
this.triggerEvent('error', error);
if (this.onError) {
this.onError.call(this, error);
}
};
export default AnimationItem;

View File

@@ -0,0 +1,157 @@
import AnimationItem from './AnimationItem';
import CanvasRenderer from '../renderers/CanvasRenderer';
import dataManager from '../utils/DataManager';
import {
getExpressionsPlugin,
} from '../utils/common';
AnimationItem.prototype.setParams = function (params) {
if (params.context) {
this.context = params.context;
}
var animType = 'svg';
if (params.animType) {
animType = params.animType;
} else if (params.renderer) {
animType = params.renderer;
}
switch (animType) {
case 'canvas':
this.renderer = new CanvasRenderer(this, params.rendererSettings);
break;
default:
throw new Error('Only canvas renderer is supported when using worker.');
}
this.renderer.setProjectInterface(this.projectInterface);
this.animType = animType;
if (params.loop === ''
|| params.loop === null
|| params.loop === undefined
|| params.loop === true) {
this.loop = true;
} else if (params.loop === false) {
this.loop = false;
} else {
this.loop = parseInt(params.loop, 10);
}
this.autoplay = 'autoplay' in params ? params.autoplay : true;
this.name = params.name ? params.name : '';
this.autoloadSegments = Object.prototype.hasOwnProperty.call(params, 'autoloadSegments') ? params.autoloadSegments : true;
this.assetsPath = null;
if (params.animationData) {
dataManager.completeAnimation(
params.animationData,
this.configAnimation
);
} else if (params.path) {
throw new Error('Canvas worker renderer cannot load animation from url');
}
};
AnimationItem.prototype.setData = function () {
throw new Error('Cannot set data on wrapper for canvas worker renderer');
};
AnimationItem.prototype.includeLayers = function (data) {
if (data.op > this.animationData.op) {
this.animationData.op = data.op;
this.totalFrames = Math.floor(data.op - this.animationData.ip);
}
var layers = this.animationData.layers;
var i;
var len = layers.length;
var newLayers = data.layers;
var j;
var jLen = newLayers.length;
for (j = 0; j < jLen; j += 1) {
i = 0;
while (i < len) {
if (layers[i].id === newLayers[j].id) {
layers[i] = newLayers[j];
break;
}
i += 1;
}
}
this.animationData.__complete = false;
dataManager.completeAnimation(this.animationData);
this.renderer.includeLayers(data.layers);
var expressionsPlugin = getExpressionsPlugin();
if (expressionsPlugin) {
expressionsPlugin.initExpressions(this);
}
this.loadNextSegment();
};
AnimationItem.prototype.loadNextSegment = function () {
var segments = this.animationData.segments;
if (!segments || segments.length === 0 || !this.autoloadSegments) {
this.timeCompleted = this.totalFrames;
return;
}
throw new Error('Cannot load multiple segments in worker.');
};
AnimationItem.prototype.loadSegments = function () {
var segments = this.animationData.segments;
if (!segments) {
this.timeCompleted = this.totalFrames;
}
this.loadNextSegment();
};
AnimationItem.prototype.imagesLoaded = null;
AnimationItem.prototype.preloadImages = null;
AnimationItem.prototype.configAnimation = function (animData) {
if (!this.renderer) {
return;
}
this.animationData = animData;
this.totalFrames = Math.floor(this.animationData.op - this.animationData.ip);
this.renderer.configAnimation(animData);
if (!animData.assets) {
animData.assets = [];
}
this.renderer.searchExtraCompositions(animData.assets);
this.assets = this.animationData.assets;
this.frameRate = this.animationData.fr;
this.firstFrame = Math.round(this.animationData.ip);
this.frameMult = this.animationData.fr / 1000;
this.loadSegments();
this.updaFrameModifier();
this.checkLoaded();
};
AnimationItem.prototype.waitForFontsLoaded = null;
AnimationItem.prototype.checkLoaded = function () {
if (!this.isLoaded) {
this.isLoaded = true;
var expressionsPlugin = getExpressionsPlugin();
if (expressionsPlugin) {
expressionsPlugin.initExpressions(this);
}
this.renderer.initItems();
this.gotoFrame();
}
};
AnimationItem.prototype.destroy = function (name) {
if ((name && this.name !== name) || !this.renderer) {
return;
}
this.renderer.destroy();
this._cbs = null;
this.onEnterFrame = null;
this.onLoopComplete = null;
this.onComplete = null;
this.onSegmentStart = null;
this.onDestroy = null;
this.renderer = null;
};
AnimationItem.prototype.getPath = null;

View File

@@ -0,0 +1,248 @@
import createTag from '../utils/helpers/html_elements';
import AnimationItem from './AnimationItem';
const animationManager = (function () {
var moduleOb = {};
var registeredAnimations = [];
var initTime = 0;
var len = 0;
var playingAnimationsNum = 0;
var _stopped = true;
var _isFrozen = false;
function removeElement(ev) {
var i = 0;
var animItem = ev.target;
while (i < len) {
if (registeredAnimations[i].animation === animItem) {
registeredAnimations.splice(i, 1);
i -= 1;
len -= 1;
if (!animItem.isPaused) {
subtractPlayingCount();
}
}
i += 1;
}
}
function registerAnimation(element, animationData) {
if (!element) {
return null;
}
var i = 0;
while (i < len) {
if (registeredAnimations[i].elem === element && registeredAnimations[i].elem !== null) {
return registeredAnimations[i].animation;
}
i += 1;
}
var animItem = new AnimationItem();
setupAnimation(animItem, element);
animItem.setData(element, animationData);
return animItem;
}
function getRegisteredAnimations() {
var i;
var lenAnims = registeredAnimations.length;
var animations = [];
for (i = 0; i < lenAnims; i += 1) {
animations.push(registeredAnimations[i].animation);
}
return animations;
}
function addPlayingCount() {
playingAnimationsNum += 1;
activate();
}
function subtractPlayingCount() {
playingAnimationsNum -= 1;
}
function setupAnimation(animItem, element) {
animItem.addEventListener('destroy', removeElement);
animItem.addEventListener('_active', addPlayingCount);
animItem.addEventListener('_idle', subtractPlayingCount);
registeredAnimations.push({ elem: element, animation: animItem });
len += 1;
}
function loadAnimation(params) {
var animItem = new AnimationItem();
setupAnimation(animItem, null);
animItem.setParams(params);
return animItem;
}
function setSpeed(val, animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.setSpeed(val, animation);
}
}
function setDirection(val, animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.setDirection(val, animation);
}
}
function play(animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.play(animation);
}
}
function resume(nowTime) {
var elapsedTime = nowTime - initTime;
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.advanceTime(elapsedTime);
}
initTime = nowTime;
if (playingAnimationsNum && !_isFrozen) {
window.requestAnimationFrame(resume);
} else {
_stopped = true;
}
}
function first(nowTime) {
initTime = nowTime;
window.requestAnimationFrame(resume);
}
function pause(animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.pause(animation);
}
}
function goToAndStop(value, isFrame, animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.goToAndStop(value, isFrame, animation);
}
}
function stop(animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.stop(animation);
}
}
function togglePause(animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.togglePause(animation);
}
}
function destroy(animation) {
var i;
for (i = (len - 1); i >= 0; i -= 1) {
registeredAnimations[i].animation.destroy(animation);
}
}
function searchAnimations(animationData, standalone, renderer) {
var animElements = [].concat([].slice.call(document.getElementsByClassName('lottie')),
[].slice.call(document.getElementsByClassName('bodymovin')));
var i;
var lenAnims = animElements.length;
for (i = 0; i < lenAnims; i += 1) {
if (renderer) {
animElements[i].setAttribute('data-bm-type', renderer);
}
registerAnimation(animElements[i], animationData);
}
if (standalone && lenAnims === 0) {
if (!renderer) {
renderer = 'svg';
}
var body = document.getElementsByTagName('body')[0];
body.innerText = '';
var div = createTag('div');
div.style.width = '100%';
div.style.height = '100%';
div.setAttribute('data-bm-type', renderer);
body.appendChild(div);
registerAnimation(div, animationData);
}
}
function resize() {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.resize();
}
}
function activate() {
if (!_isFrozen && playingAnimationsNum) {
if (_stopped) {
window.requestAnimationFrame(first);
_stopped = false;
}
}
}
function freeze() {
_isFrozen = true;
}
function unfreeze() {
_isFrozen = false;
activate();
}
function setVolume(val, animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.setVolume(val, animation);
}
}
function mute(animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.mute(animation);
}
}
function unmute(animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.unmute(animation);
}
}
moduleOb.registerAnimation = registerAnimation;
moduleOb.loadAnimation = loadAnimation;
moduleOb.setSpeed = setSpeed;
moduleOb.setDirection = setDirection;
moduleOb.play = play;
moduleOb.pause = pause;
moduleOb.stop = stop;
moduleOb.togglePause = togglePause;
moduleOb.searchAnimations = searchAnimations;
moduleOb.resize = resize;
// moduleOb.start = start;
moduleOb.goToAndStop = goToAndStop;
moduleOb.destroy = destroy;
moduleOb.freeze = freeze;
moduleOb.unfreeze = unfreeze;
moduleOb.setVolume = setVolume;
moduleOb.mute = mute;
moduleOb.unmute = unmute;
moduleOb.getRegisteredAnimations = getRegisteredAnimations;
return moduleOb;
}());
export default animationManager;

View File

@@ -0,0 +1,201 @@
import AnimationItem from './AnimationItem';
const animationManager = (function () {
var moduleOb = {};
var registeredAnimations = [];
var initTime = 0;
var len = 0;
var playingAnimationsNum = 0;
var _stopped = true;
var _isFrozen = false;
function removeElement(ev) {
var i = 0;
var animItem = ev.target;
while (i < len) {
if (registeredAnimations[i].animation === animItem) {
registeredAnimations.splice(i, 1);
i -= 1;
len -= 1;
if (!animItem.isPaused) {
subtractPlayingCount();
}
}
i += 1;
}
}
function registerAnimation(element, animationData) {
if (!element) {
return null;
}
var i = 0;
while (i < len) {
if (registeredAnimations[i].elem === element && registeredAnimations[i].elem !== null) {
return registeredAnimations[i].animation;
}
i += 1;
}
var animItem = new AnimationItem();
setupAnimation(animItem, element);
animItem.setData(element, animationData);
return animItem;
}
function getRegisteredAnimations() {
var i;
var lenAnims = registeredAnimations.length;
var animations = [];
for (i = 0; i < lenAnims; i += 1) {
animations.push(registeredAnimations[i].animation);
}
return animations;
}
function addPlayingCount() {
playingAnimationsNum += 1;
activate();
}
function subtractPlayingCount() {
playingAnimationsNum -= 1;
}
function setupAnimation(animItem, element) {
animItem.addEventListener('destroy', removeElement);
animItem.addEventListener('_active', addPlayingCount);
animItem.addEventListener('_idle', subtractPlayingCount);
registeredAnimations.push({ elem: element, animation: animItem });
len += 1;
}
function loadAnimation(params) {
var animItem = new AnimationItem();
setupAnimation(animItem, null);
animItem.setParams(params);
return animItem;
}
function setSpeed(val, animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.setSpeed(val, animation);
}
}
function setDirection(val, animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.setDirection(val, animation);
}
}
function play(animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.play(animation);
}
}
function resume(nowTime) {
var elapsedTime = nowTime - initTime;
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.advanceTime(elapsedTime);
}
initTime = nowTime;
if (playingAnimationsNum && !_isFrozen) {
requestAnimationFrame(resume);
} else {
_stopped = true;
}
}
function first(nowTime) {
initTime = nowTime;
requestAnimationFrame(resume);
}
function pause(animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.pause(animation);
}
}
function goToAndStop(value, isFrame, animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.goToAndStop(value, isFrame, animation);
}
}
function stop(animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.stop(animation);
}
}
function togglePause(animation) {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.togglePause(animation);
}
}
function destroy(animation) {
var i;
for (i = (len - 1); i >= 0; i -= 1) {
registeredAnimations[i].animation.destroy(animation);
}
}
function searchAnimations() {
throw new Error('Cannot access DOM from worker thread');
}
function resize() {
var i;
for (i = 0; i < len; i += 1) {
registeredAnimations[i].animation.resize();
}
}
function activate() {
if (!_isFrozen && playingAnimationsNum) {
if (_stopped) {
requestAnimationFrame(first);
_stopped = false;
}
}
}
function freeze() {
_isFrozen = true;
}
function unfreeze() {
_isFrozen = false;
activate();
}
moduleOb.registerAnimation = registerAnimation;
moduleOb.loadAnimation = loadAnimation;
moduleOb.setSpeed = setSpeed;
moduleOb.setDirection = setDirection;
moduleOb.play = play;
moduleOb.pause = pause;
moduleOb.stop = stop;
moduleOb.togglePause = togglePause;
moduleOb.searchAnimations = searchAnimations;
moduleOb.resize = resize;
// moduleOb.start = start;
moduleOb.goToAndStop = goToAndStop;
moduleOb.destroy = destroy;
moduleOb.freeze = freeze;
moduleOb.unfreeze = unfreeze;
moduleOb.getRegisteredAnimations = getRegisteredAnimations;
return moduleOb;
}());
export default animationManager;

View File

@@ -0,0 +1,5 @@
function EffectsManager() {
this.effectElements = [];
}
export default EffectsManager;

View File

@@ -0,0 +1,37 @@
import PropertyFactory from '../utils/PropertyFactory';
function SliderEffect(data, elem, container) {
this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
}
function AngleEffect(data, elem, container) {
this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
}
function ColorEffect(data, elem, container) {
this.p = PropertyFactory.getProp(elem, data.v, 1, 0, container);
}
function PointEffect(data, elem, container) {
this.p = PropertyFactory.getProp(elem, data.v, 1, 0, container);
}
function LayerIndexEffect(data, elem, container) {
this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
}
function MaskIndexEffect(data, elem, container) {
this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
}
function CheckboxEffect(data, elem, container) {
this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
}
function NoValueEffect() {
this.p = {};
}
export {
SliderEffect,
AngleEffect,
ColorEffect,
PointEffect,
LayerIndexEffect,
MaskIndexEffect,
CheckboxEffect,
NoValueEffect,
};

View File

@@ -0,0 +1,44 @@
import effectTypes from '../utils/helpers/effectTypes';
import Matrix from '../3rd_party/transformation-matrix';
import { degToRads } from '../utils/common';
function TransformEffect() {
}
TransformEffect.prototype.init = function (effectsManager) {
this.effectsManager = effectsManager;
this.type = effectTypes.TRANSFORM_EFFECT;
this.matrix = new Matrix();
this.opacity = -1;
this._mdf = false;
this._opMdf = false;
};
TransformEffect.prototype.renderFrame = function (forceFrame) {
this._opMdf = false;
this._mdf = false;
if (forceFrame || this.effectsManager._mdf) {
var effectElements = this.effectsManager.effectElements;
var anchor = effectElements[0].p.v;
var position = effectElements[1].p.v;
var isUniformScale = effectElements[2].p.v === 1;
var scaleHeight = effectElements[3].p.v;
var scaleWidth = isUniformScale ? scaleHeight : effectElements[4].p.v;
var skew = effectElements[5].p.v;
var skewAxis = effectElements[6].p.v;
var rotation = effectElements[7].p.v;
this.matrix.reset();
this.matrix.translate(-anchor[0], -anchor[1], anchor[2]);
this.matrix.scale(scaleWidth * 0.01, scaleHeight * 0.01, 1);
this.matrix.rotate(-rotation * degToRads);
this.matrix.skewFromAxis(-skew * degToRads, (skewAxis + 90) * degToRads);
this.matrix.translate(position[0], position[1], 0);
this._mdf = true;
if (this.opacity !== effectElements[8].p.v) {
this.opacity = effectElements[8].p.v;
this._opMdf = true;
}
}
};
export default TransformEffect;

View File

@@ -0,0 +1,102 @@
import {
extendPrototype,
} from '../utils/functionExtensions';
import PropertyFactory from '../utils/PropertyFactory';
import RenderableElement from './helpers/RenderableElement';
import BaseElement from './BaseElement';
import FrameElement from './helpers/FrameElement';
function AudioElement(data, globalData, comp) {
this.initFrame();
this.initRenderable();
this.assetData = globalData.getAssetData(data.refId);
this.initBaseData(data, globalData, comp);
this._isPlaying = false;
this._canPlay = false;
var assetPath = this.globalData.getAssetsPath(this.assetData);
this.audio = this.globalData.audioController.createAudio(assetPath);
this._currentTime = 0;
this.globalData.audioController.addAudio(this);
this._volumeMultiplier = 1;
this._volume = 1;
this._previousVolume = null;
this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : { _placeholder: true };
this.lv = PropertyFactory.getProp(this, data.au && data.au.lv ? data.au.lv : { k: [100] }, 1, 0.01, this);
}
AudioElement.prototype.prepareFrame = function (num) {
this.prepareRenderableFrame(num, true);
this.prepareProperties(num, true);
if (!this.tm._placeholder) {
var timeRemapped = this.tm.v;
this._currentTime = timeRemapped;
} else {
this._currentTime = num / this.data.sr;
}
this._volume = this.lv.v[0];
var totalVolume = this._volume * this._volumeMultiplier;
if (this._previousVolume !== totalVolume) {
this._previousVolume = totalVolume;
this.audio.volume(totalVolume);
}
};
extendPrototype([RenderableElement, BaseElement, FrameElement], AudioElement);
AudioElement.prototype.renderFrame = function () {
if (this.isInRange && this._canPlay) {
if (!this._isPlaying) {
this.audio.play();
this.audio.seek(this._currentTime / this.globalData.frameRate);
this._isPlaying = true;
} else if (!this.audio.playing()
|| Math.abs(this._currentTime / this.globalData.frameRate - this.audio.seek()) > 0.1
) {
this.audio.seek(this._currentTime / this.globalData.frameRate);
}
}
};
AudioElement.prototype.show = function () {
// this.audio.play()
};
AudioElement.prototype.hide = function () {
this.audio.pause();
this._isPlaying = false;
};
AudioElement.prototype.pause = function () {
this.audio.pause();
this._isPlaying = false;
this._canPlay = false;
};
AudioElement.prototype.resume = function () {
this._canPlay = true;
};
AudioElement.prototype.setRate = function (rateValue) {
this.audio.rate(rateValue);
};
AudioElement.prototype.volume = function (volumeValue) {
this._volumeMultiplier = volumeValue;
this._previousVolume = volumeValue * this._volume;
this.audio.volume(this._previousVolume);
};
AudioElement.prototype.getBaseElement = function () {
return null;
};
AudioElement.prototype.destroy = function () {
};
AudioElement.prototype.sourceRectAtTime = function () {
};
AudioElement.prototype.initExpressions = function () {
};
export default AudioElement;

View File

@@ -0,0 +1,78 @@
import {
createElementID,
getExpressionInterfaces,
} from '../utils/common';
import getBlendMode from '../utils/helpers/blendModes';
import EffectsManager from '../EffectsManager';
function BaseElement() {
}
BaseElement.prototype = {
checkMasks: function () {
if (!this.data.hasMask) {
return false;
}
var i = 0;
var len = this.data.masksProperties.length;
while (i < len) {
if ((this.data.masksProperties[i].mode !== 'n' && this.data.masksProperties[i].cl !== false)) {
return true;
}
i += 1;
}
return false;
},
initExpressions: function () {
const expressionsInterfaces = getExpressionInterfaces();
if (!expressionsInterfaces) {
return;
}
const LayerExpressionInterface = expressionsInterfaces('layer');
const EffectsExpressionInterface = expressionsInterfaces('effects');
const ShapeExpressionInterface = expressionsInterfaces('shape');
const TextExpressionInterface = expressionsInterfaces('text');
const CompExpressionInterface = expressionsInterfaces('comp');
this.layerInterface = LayerExpressionInterface(this);
if (this.data.hasMask && this.maskManager) {
this.layerInterface.registerMaskInterface(this.maskManager);
}
var effectsInterface = EffectsExpressionInterface.createEffectsInterface(this, this.layerInterface);
this.layerInterface.registerEffectsInterface(effectsInterface);
if (this.data.ty === 0 || this.data.xt) {
this.compInterface = CompExpressionInterface(this);
} else if (this.data.ty === 4) {
this.layerInterface.shapeInterface = ShapeExpressionInterface(this.shapesData, this.itemsData, this.layerInterface);
this.layerInterface.content = this.layerInterface.shapeInterface;
} else if (this.data.ty === 5) {
this.layerInterface.textInterface = TextExpressionInterface(this);
this.layerInterface.text = this.layerInterface.textInterface;
}
},
setBlendMode: function () {
var blendModeValue = getBlendMode(this.data.bm);
var elem = this.baseElement || this.layerElement;
elem.style['mix-blend-mode'] = blendModeValue;
},
initBaseData: function (data, globalData, comp) {
this.globalData = globalData;
this.comp = comp;
this.data = data;
this.layerId = createElementID();
// Stretch factor for old animations missing this property.
if (!this.data.sr) {
this.data.sr = 1;
}
// effects manager
this.effectsManager = new EffectsManager(this.data, this, this.dynamicProperties);
},
getType: function () {
return this.type;
},
sourceRectAtTime: function () {},
};
export default BaseElement;

View File

@@ -0,0 +1,4 @@
const BaseTextElement = function () {
};
export default BaseTextElement;

View File

@@ -0,0 +1,107 @@
import {
extendPrototype,
} from '../utils/functionExtensions';
import BaseElement from './BaseElement';
import TransformElement from './helpers/TransformElement';
import HierarchyElement from './helpers/HierarchyElement';
import FrameElement from './helpers/FrameElement';
import RenderableDOMElement from './helpers/RenderableDOMElement';
function ICompElement() {}
extendPrototype([BaseElement, TransformElement, HierarchyElement, FrameElement, RenderableDOMElement], ICompElement);
ICompElement.prototype.initElement = function (data, globalData, comp) {
this.initFrame();
this.initBaseData(data, globalData, comp);
this.initTransform(data, globalData, comp);
this.initRenderable();
this.initHierarchy();
this.initRendererElement();
this.createContainerElements();
this.createRenderableComponents();
if (this.data.xt || !globalData.progressiveLoad) {
this.buildAllItems();
}
this.hide();
};
/* ICompElement.prototype.hide = function(){
if(!this.hidden){
this.hideElement();
var i,len = this.elements.length;
for( i = 0; i < len; i+=1 ){
if(this.elements[i]){
this.elements[i].hide();
}
}
}
}; */
ICompElement.prototype.prepareFrame = function (num) {
this._mdf = false;
this.prepareRenderableFrame(num);
this.prepareProperties(num, this.isInRange);
if (!this.isInRange && !this.data.xt) {
return;
}
if (!this.tm._placeholder) {
var timeRemapped = this.tm.v;
if (timeRemapped === this.data.op) {
timeRemapped = this.data.op - 1;
}
this.renderedFrame = timeRemapped;
} else {
this.renderedFrame = num / this.data.sr;
}
var i;
var len = this.elements.length;
if (!this.completeLayers) {
this.checkLayers(this.renderedFrame);
}
// This iteration needs to be backwards because of how expressions connect between each other
for (i = len - 1; i >= 0; i -= 1) {
if (this.completeLayers || this.elements[i]) {
this.elements[i].prepareFrame(this.renderedFrame - this.layers[i].st);
if (this.elements[i]._mdf) {
this._mdf = true;
}
}
}
};
ICompElement.prototype.renderInnerContent = function () {
var i;
var len = this.layers.length;
for (i = 0; i < len; i += 1) {
if (this.completeLayers || this.elements[i]) {
this.elements[i].renderFrame();
}
}
};
ICompElement.prototype.setElements = function (elems) {
this.elements = elems;
};
ICompElement.prototype.getElements = function () {
return this.elements;
};
ICompElement.prototype.destroyElements = function () {
var i;
var len = this.layers.length;
for (i = 0; i < len; i += 1) {
if (this.elements[i]) {
this.elements[i].destroy();
}
}
};
ICompElement.prototype.destroy = function () {
this.destroyElements();
this.destroyBaseElement();
};
export default ICompElement;

View File

@@ -0,0 +1,47 @@
import {
extendPrototype,
} from '../utils/functionExtensions';
import {
getExpressionInterfaces,
} from '../utils/common';
import RenderableElement from './helpers/RenderableElement';
import BaseElement from './BaseElement';
import FrameElement from './helpers/FrameElement';
function FootageElement(data, globalData, comp) {
this.initFrame();
this.initRenderable();
this.assetData = globalData.getAssetData(data.refId);
this.footageData = globalData.imageLoader.getAsset(this.assetData);
this.initBaseData(data, globalData, comp);
}
FootageElement.prototype.prepareFrame = function () {
};
extendPrototype([RenderableElement, BaseElement, FrameElement], FootageElement);
FootageElement.prototype.getBaseElement = function () {
return null;
};
FootageElement.prototype.renderFrame = function () {
};
FootageElement.prototype.destroy = function () {
};
FootageElement.prototype.initExpressions = function () {
const expressionsInterfaces = getExpressionInterfaces();
if (!expressionsInterfaces) {
return;
}
const FootageInterface = expressionsInterfaces('footage');
this.layerInterface = FootageInterface(this);
};
FootageElement.prototype.getFootageData = function () {
return this.footageData;
};
export default FootageElement;

View File

@@ -0,0 +1,42 @@
import {
extendPrototype,
} from '../utils/functionExtensions';
import createNS from '../utils/helpers/svg_elements';
import BaseElement from './BaseElement';
import TransformElement from './helpers/TransformElement';
import SVGBaseElement from './svgElements/SVGBaseElement';
import HierarchyElement from './helpers/HierarchyElement';
import FrameElement from './helpers/FrameElement';
import RenderableDOMElement from './helpers/RenderableDOMElement';
function IImageElement(data, globalData, comp) {
this.assetData = globalData.getAssetData(data.refId);
if (this.assetData && this.assetData.sid) {
this.assetData = globalData.slotManager.getProp(this.assetData);
}
this.initElement(data, globalData, comp);
this.sourceRect = {
top: 0, left: 0, width: this.assetData.w, height: this.assetData.h,
};
}
extendPrototype([BaseElement, TransformElement, SVGBaseElement, HierarchyElement, FrameElement, RenderableDOMElement], IImageElement);
IImageElement.prototype.createContent = function () {
var assetPath = this.globalData.getAssetsPath(this.assetData);
this.innerElem = createNS('image');
this.innerElem.setAttribute('width', this.assetData.w + 'px');
this.innerElem.setAttribute('height', this.assetData.h + 'px');
this.innerElem.setAttribute('preserveAspectRatio', this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio);
this.innerElem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', assetPath);
this.layerElement.appendChild(this.innerElem);
};
IImageElement.prototype.sourceRectAtTime = function () {
return this.sourceRect;
};
export default IImageElement;

View File

@@ -0,0 +1,39 @@
import {
extendPrototype,
} from '../utils/functionExtensions';
import BaseElement from './BaseElement';
import TransformElement from './helpers/TransformElement';
import HierarchyElement from './helpers/HierarchyElement';
import FrameElement from './helpers/FrameElement';
function NullElement(data, globalData, comp) {
this.initFrame();
this.initBaseData(data, globalData, comp);
this.initFrame();
this.initTransform(data, globalData, comp);
this.initHierarchy();
}
NullElement.prototype.prepareFrame = function (num) {
this.prepareProperties(num, true);
};
NullElement.prototype.renderFrame = function () {
};
NullElement.prototype.getBaseElement = function () {
return null;
};
NullElement.prototype.destroy = function () {
};
NullElement.prototype.sourceRectAtTime = function () {
};
NullElement.prototype.hide = function () {
};
extendPrototype([BaseElement, TransformElement, HierarchyElement, FrameElement], NullElement);
export default NullElement;

View File

@@ -0,0 +1,76 @@
import ProcessedElement from './helpers/shapes/ProcessedElement';
function IShapeElement() {
}
IShapeElement.prototype = {
addShapeToModifiers: function (data) {
var i;
var len = this.shapeModifiers.length;
for (i = 0; i < len; i += 1) {
this.shapeModifiers[i].addShape(data);
}
},
isShapeInAnimatedModifiers: function (data) {
var i = 0;
var len = this.shapeModifiers.length;
while (i < len) {
if (this.shapeModifiers[i].isAnimatedWithShape(data)) {
return true;
}
}
return false;
},
renderModifiers: function () {
if (!this.shapeModifiers.length) {
return;
}
var i;
var len = this.shapes.length;
for (i = 0; i < len; i += 1) {
this.shapes[i].sh.reset();
}
len = this.shapeModifiers.length;
var shouldBreakProcess;
for (i = len - 1; i >= 0; i -= 1) {
shouldBreakProcess = this.shapeModifiers[i].processShapes(this._isFirstFrame);
// workaround to fix cases where a repeater resets the shape so the following processes get called twice
// TODO: find a better solution for this
if (shouldBreakProcess) {
break;
}
}
},
searchProcessedElement: function (elem) {
var elements = this.processedElements;
var i = 0;
var len = elements.length;
while (i < len) {
if (elements[i].elem === elem) {
return elements[i].pos;
}
i += 1;
}
return 0;
},
addProcessedElement: function (elem, pos) {
var elements = this.processedElements;
var i = elements.length;
while (i) {
i -= 1;
if (elements[i].elem === elem) {
elements[i].pos = pos;
return;
}
}
elements.push(new ProcessedElement(elem, pos));
},
prepareFrame: function (num) {
this.prepareRenderableFrame(num);
this.prepareProperties(num, this.isInRange);
},
};
export default IShapeElement;

View File

@@ -0,0 +1,23 @@
import {
extendPrototype,
} from '../utils/functionExtensions';
import createNS from '../utils/helpers/svg_elements';
import IImageElement from './ImageElement';
function ISolidElement(data, globalData, comp) {
this.initElement(data, globalData, comp);
}
extendPrototype([IImageElement], ISolidElement);
ISolidElement.prototype.createContent = function () {
var rect = createNS('rect');
/// /rect.style.width = this.data.sw;
/// /rect.style.height = this.data.sh;
/// /rect.style.fill = this.data.sc;
rect.setAttribute('width', this.data.sw);
rect.setAttribute('height', this.data.sh);
rect.setAttribute('fill', this.data.sc);
this.layerElement.appendChild(rect);
};
export default ISolidElement;

View File

@@ -0,0 +1,94 @@
import LetterProps from '../utils/text/LetterProps';
import TextProperty from '../utils/text/TextProperty';
import TextAnimatorProperty from '../utils/text/TextAnimatorProperty';
import buildShapeString from '../utils/shapes/shapePathBuilder';
function ITextElement() {
}
ITextElement.prototype.initElement = function (data, globalData, comp) {
this.lettersChangedFlag = true;
this.initFrame();
this.initBaseData(data, globalData, comp);
this.textProperty = new TextProperty(this, data.t, this.dynamicProperties);
this.textAnimator = new TextAnimatorProperty(data.t, this.renderType, this);
this.initTransform(data, globalData, comp);
this.initHierarchy();
this.initRenderable();
this.initRendererElement();
this.createContainerElements();
this.createRenderableComponents();
this.createContent();
this.hide();
this.textAnimator.searchProperties(this.dynamicProperties);
};
ITextElement.prototype.prepareFrame = function (num) {
this._mdf = false;
this.prepareRenderableFrame(num);
this.prepareProperties(num, this.isInRange);
};
ITextElement.prototype.createPathShape = function (matrixHelper, shapes) {
var j;
var jLen = shapes.length;
var pathNodes;
var shapeStr = '';
for (j = 0; j < jLen; j += 1) {
if (shapes[j].ty === 'sh') {
pathNodes = shapes[j].ks.k;
shapeStr += buildShapeString(pathNodes, pathNodes.i.length, true, matrixHelper);
}
}
return shapeStr;
};
ITextElement.prototype.updateDocumentData = function (newData, index) {
this.textProperty.updateDocumentData(newData, index);
};
ITextElement.prototype.canResizeFont = function (_canResize) {
this.textProperty.canResizeFont(_canResize);
};
ITextElement.prototype.setMinimumFontSize = function (_fontSize) {
this.textProperty.setMinimumFontSize(_fontSize);
};
ITextElement.prototype.applyTextPropertiesToMatrix = function (documentData, matrixHelper, lineNumber, xPos, yPos) {
if (documentData.ps) {
matrixHelper.translate(documentData.ps[0], documentData.ps[1] + documentData.ascent, 0);
}
matrixHelper.translate(0, -documentData.ls, 0);
switch (documentData.j) {
case 1:
matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[lineNumber]), 0, 0);
break;
case 2:
matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[lineNumber]) / 2, 0, 0);
break;
default:
break;
}
matrixHelper.translate(xPos, yPos, 0);
};
ITextElement.prototype.buildColor = function (colorData) {
return 'rgb(' + Math.round(colorData[0] * 255) + ',' + Math.round(colorData[1] * 255) + ',' + Math.round(colorData[2] * 255) + ')';
};
ITextElement.prototype.emptyProp = new LetterProps();
ITextElement.prototype.destroy = function () {
};
ITextElement.prototype.validateText = function () {
if (this.textProperty._mdf || this.textProperty._isFirstFrame) {
this.buildNewText();
this.textProperty._isFirstFrame = false;
this.textProperty._mdf = false;
}
};
export default ITextElement;

View File

@@ -0,0 +1,170 @@
import assetManager from '../../utils/helpers/assetManager';
import getBlendMode from '../../utils/helpers/blendModes';
import Matrix from '../../3rd_party/transformation-matrix';
import CVEffects from './CVEffects';
import CVMaskElement from './CVMaskElement';
import effectTypes from '../../utils/helpers/effectTypes';
function CVBaseElement() {
}
var operationsMap = {
1: 'source-in',
2: 'source-out',
3: 'source-in',
4: 'source-out',
};
CVBaseElement.prototype = {
createElements: function () {},
initRendererElement: function () {},
createContainerElements: function () {
// If the layer is masked we will use two buffers to store each different states of the drawing
// This solution is not ideal for several reason. But unfortunately, because of the recursive
// nature of the render tree, it's the only simple way to make sure one inner mask doesn't override an outer mask.
// TODO: try to reduce the size of these buffers to the size of the composition contaning the layer
// It might be challenging because the layer most likely is transformed in some way
if (this.data.tt >= 1) {
this.buffers = [];
var canvasContext = this.globalData.canvasContext;
var bufferCanvas = assetManager.createCanvas(canvasContext.canvas.width, canvasContext.canvas.height);
this.buffers.push(bufferCanvas);
var bufferCanvas2 = assetManager.createCanvas(canvasContext.canvas.width, canvasContext.canvas.height);
this.buffers.push(bufferCanvas2);
if (this.data.tt >= 3 && !document._isProxy) {
assetManager.loadLumaCanvas();
}
}
this.canvasContext = this.globalData.canvasContext;
this.transformCanvas = this.globalData.transformCanvas;
this.renderableEffectsManager = new CVEffects(this);
this.searchEffectTransforms();
},
createContent: function () {},
setBlendMode: function () {
var globalData = this.globalData;
if (globalData.blendMode !== this.data.bm) {
globalData.blendMode = this.data.bm;
var blendModeValue = getBlendMode(this.data.bm);
globalData.canvasContext.globalCompositeOperation = blendModeValue;
}
},
createRenderableComponents: function () {
this.maskManager = new CVMaskElement(this.data, this);
this.transformEffects = this.renderableEffectsManager.getEffects(effectTypes.TRANSFORM_EFFECT);
},
hideElement: function () {
if (!this.hidden && (!this.isInRange || this.isTransparent)) {
this.hidden = true;
}
},
showElement: function () {
if (this.isInRange && !this.isTransparent) {
this.hidden = false;
this._isFirstFrame = true;
this.maskManager._isFirstFrame = true;
}
},
clearCanvas: function (canvasContext) {
canvasContext.clearRect(
this.transformCanvas.tx,
this.transformCanvas.ty,
this.transformCanvas.w * this.transformCanvas.sx,
this.transformCanvas.h * this.transformCanvas.sy
);
},
prepareLayer: function () {
if (this.data.tt >= 1) {
var buffer = this.buffers[0];
var bufferCtx = buffer.getContext('2d');
this.clearCanvas(bufferCtx);
// on the first buffer we store the current state of the global drawing
bufferCtx.drawImage(this.canvasContext.canvas, 0, 0);
// The next four lines are to clear the canvas
// TODO: Check if there is a way to clear the canvas without resetting the transform
this.currentTransform = this.canvasContext.getTransform();
this.canvasContext.setTransform(1, 0, 0, 1, 0, 0);
this.clearCanvas(this.canvasContext);
this.canvasContext.setTransform(this.currentTransform);
}
},
exitLayer: function () {
if (this.data.tt >= 1) {
var buffer = this.buffers[1];
// On the second buffer we store the current state of the global drawing
// that only contains the content of this layer
// (if it is a composition, it also includes the nested layers)
var bufferCtx = buffer.getContext('2d');
this.clearCanvas(bufferCtx);
bufferCtx.drawImage(this.canvasContext.canvas, 0, 0);
// We clear the canvas again
this.canvasContext.setTransform(1, 0, 0, 1, 0, 0);
this.clearCanvas(this.canvasContext);
this.canvasContext.setTransform(this.currentTransform);
// We draw the mask
const mask = this.comp.getElementById('tp' in this.data ? this.data.tp : this.data.ind - 1);
mask.renderFrame(true);
// We draw the second buffer (that contains the content of this layer)
this.canvasContext.setTransform(1, 0, 0, 1, 0, 0);
// If the mask is a Luma matte, we need to do two extra painting operations
// the _isProxy check is to avoid drawing a fake canvas in workers that will throw an error
if (this.data.tt >= 3 && !document._isProxy) {
// We copy the painted mask to a buffer that has a color matrix filter applied to it
// that applies the rgb values to the alpha channel
var lumaBuffer = assetManager.getLumaCanvas(this.canvasContext.canvas);
var lumaBufferCtx = lumaBuffer.getContext('2d');
lumaBufferCtx.drawImage(this.canvasContext.canvas, 0, 0);
this.clearCanvas(this.canvasContext);
// we repaint the context with the mask applied to it
this.canvasContext.drawImage(lumaBuffer, 0, 0);
}
this.canvasContext.globalCompositeOperation = operationsMap[this.data.tt];
this.canvasContext.drawImage(buffer, 0, 0);
// We finally draw the first buffer (that contains the content of the global drawing)
// We use destination-over to draw the global drawing below the current layer
this.canvasContext.globalCompositeOperation = 'destination-over';
this.canvasContext.drawImage(this.buffers[0], 0, 0);
this.canvasContext.setTransform(this.currentTransform);
// We reset the globalCompositeOperation to source-over, the standard type of operation
this.canvasContext.globalCompositeOperation = 'source-over';
}
},
renderFrame: function (forceRender) {
if (this.hidden || this.data.hd) {
return;
}
if (this.data.td === 1 && !forceRender) {
return;
}
this.renderTransform();
this.renderRenderable();
this.renderLocalTransform();
this.setBlendMode();
var forceRealStack = this.data.ty === 0;
this.prepareLayer();
this.globalData.renderer.save(forceRealStack);
this.globalData.renderer.ctxTransform(this.finalTransform.localMat.props);
this.globalData.renderer.ctxOpacity(this.finalTransform.localOpacity);
this.renderInnerContent();
this.globalData.renderer.restore(forceRealStack);
this.exitLayer();
if (this.maskManager.hasMasks) {
this.globalData.renderer.restore(true);
}
if (this._isFirstFrame) {
this._isFirstFrame = false;
}
},
destroy: function () {
this.canvasContext = null;
this.data = null;
this.globalData = null;
this.maskManager.destroy();
},
mHelper: new Matrix(),
};
CVBaseElement.prototype.hide = CVBaseElement.prototype.hideElement;
CVBaseElement.prototype.show = CVBaseElement.prototype.showElement;
export default CVBaseElement;

View File

@@ -0,0 +1,11 @@
import BaseRenderer from '../../renderers/BaseRenderer';
import {
extendPrototype,
} from '../../utils/functionExtensions';
function CVCompBaseElement() {
}
extendPrototype([BaseRenderer], CVCompBaseElement);
export default CVCompBaseElement;

View File

@@ -0,0 +1,57 @@
import {
extendPrototype,
} from '../../utils/functionExtensions';
import {
createSizedArray,
} from '../../utils/helpers/arrays';
import PropertyFactory from '../../utils/PropertyFactory';
import CanvasRendererBase from '../../renderers/CanvasRendererBase';
import CVBaseElement from './CVBaseElement';
import ICompElement from '../CompElement';
function CVCompElement(data, globalData, comp) {
this.completeLayers = false;
this.layers = data.layers;
this.pendingElements = [];
this.elements = createSizedArray(this.layers.length);
this.initElement(data, globalData, comp);
this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : { _placeholder: true };
}
extendPrototype([CanvasRendererBase, ICompElement, CVBaseElement], CVCompElement);
CVCompElement.prototype.renderInnerContent = function () {
var ctx = this.canvasContext;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(this.data.w, 0);
ctx.lineTo(this.data.w, this.data.h);
ctx.lineTo(0, this.data.h);
ctx.lineTo(0, 0);
ctx.clip();
var i;
var len = this.layers.length;
for (i = len - 1; i >= 0; i -= 1) {
if (this.completeLayers || this.elements[i]) {
this.elements[i].renderFrame();
}
}
};
CVCompElement.prototype.destroy = function () {
var i;
var len = this.layers.length;
for (i = len - 1; i >= 0; i -= 1) {
if (this.elements[i]) {
this.elements[i].destroy();
}
}
this.layers = null;
this.elements = null;
};
CVCompElement.prototype.createComp = function (data) {
return new CVCompElement(data, this.globalData, this);
};
export default CVCompElement;

View File

@@ -0,0 +1,239 @@
import {
createTypedArray,
} from '../../utils/helpers/arrays';
import Matrix from '../../3rd_party/transformation-matrix';
function CanvasContext() {
this.opacity = -1;
this.transform = createTypedArray('float32', 16);
this.fillStyle = '';
this.strokeStyle = '';
this.lineWidth = '';
this.lineCap = '';
this.lineJoin = '';
this.miterLimit = '';
this.id = Math.random();
}
function CVContextData() {
this.stack = [];
this.cArrPos = 0;
this.cTr = new Matrix();
var i;
var len = 15;
for (i = 0; i < len; i += 1) {
var canvasContext = new CanvasContext();
this.stack[i] = canvasContext;
}
this._length = len;
this.nativeContext = null;
this.transformMat = new Matrix();
this.currentOpacity = 1;
//
this.currentFillStyle = '';
this.appliedFillStyle = '';
//
this.currentStrokeStyle = '';
this.appliedStrokeStyle = '';
//
this.currentLineWidth = '';
this.appliedLineWidth = '';
//
this.currentLineCap = '';
this.appliedLineCap = '';
//
this.currentLineJoin = '';
this.appliedLineJoin = '';
//
this.appliedMiterLimit = '';
this.currentMiterLimit = '';
}
CVContextData.prototype.duplicate = function () {
var newLength = this._length * 2;
var i = 0;
for (i = this._length; i < newLength; i += 1) {
this.stack[i] = new CanvasContext();
}
this._length = newLength;
};
CVContextData.prototype.reset = function () {
this.cArrPos = 0;
this.cTr.reset();
this.stack[this.cArrPos].opacity = 1;
};
CVContextData.prototype.restore = function (forceRestore) {
this.cArrPos -= 1;
var currentContext = this.stack[this.cArrPos];
var transform = currentContext.transform;
var i;
var arr = this.cTr.props;
for (i = 0; i < 16; i += 1) {
arr[i] = transform[i];
}
if (forceRestore) {
this.nativeContext.restore();
var prevStack = this.stack[this.cArrPos + 1];
this.appliedFillStyle = prevStack.fillStyle;
this.appliedStrokeStyle = prevStack.strokeStyle;
this.appliedLineWidth = prevStack.lineWidth;
this.appliedLineCap = prevStack.lineCap;
this.appliedLineJoin = prevStack.lineJoin;
this.appliedMiterLimit = prevStack.miterLimit;
}
this.nativeContext.setTransform(transform[0], transform[1], transform[4], transform[5], transform[12], transform[13]);
if (forceRestore || (currentContext.opacity !== -1 && this.currentOpacity !== currentContext.opacity)) {
this.nativeContext.globalAlpha = currentContext.opacity;
this.currentOpacity = currentContext.opacity;
}
this.currentFillStyle = currentContext.fillStyle;
this.currentStrokeStyle = currentContext.strokeStyle;
this.currentLineWidth = currentContext.lineWidth;
this.currentLineCap = currentContext.lineCap;
this.currentLineJoin = currentContext.lineJoin;
this.currentMiterLimit = currentContext.miterLimit;
};
CVContextData.prototype.save = function (saveOnNativeFlag) {
if (saveOnNativeFlag) {
this.nativeContext.save();
}
var props = this.cTr.props;
if (this._length <= this.cArrPos) {
this.duplicate();
}
var currentStack = this.stack[this.cArrPos];
var i;
for (i = 0; i < 16; i += 1) {
currentStack.transform[i] = props[i];
}
this.cArrPos += 1;
var newStack = this.stack[this.cArrPos];
newStack.opacity = currentStack.opacity;
newStack.fillStyle = currentStack.fillStyle;
newStack.strokeStyle = currentStack.strokeStyle;
newStack.lineWidth = currentStack.lineWidth;
newStack.lineCap = currentStack.lineCap;
newStack.lineJoin = currentStack.lineJoin;
newStack.miterLimit = currentStack.miterLimit;
};
CVContextData.prototype.setOpacity = function (value) {
this.stack[this.cArrPos].opacity = value;
};
CVContextData.prototype.setContext = function (value) {
this.nativeContext = value;
};
CVContextData.prototype.fillStyle = function (value) {
if (this.stack[this.cArrPos].fillStyle !== value) {
this.currentFillStyle = value;
this.stack[this.cArrPos].fillStyle = value;
}
};
CVContextData.prototype.strokeStyle = function (value) {
if (this.stack[this.cArrPos].strokeStyle !== value) {
this.currentStrokeStyle = value;
this.stack[this.cArrPos].strokeStyle = value;
}
};
CVContextData.prototype.lineWidth = function (value) {
if (this.stack[this.cArrPos].lineWidth !== value) {
this.currentLineWidth = value;
this.stack[this.cArrPos].lineWidth = value;
}
};
CVContextData.prototype.lineCap = function (value) {
if (this.stack[this.cArrPos].lineCap !== value) {
this.currentLineCap = value;
this.stack[this.cArrPos].lineCap = value;
}
};
CVContextData.prototype.lineJoin = function (value) {
if (this.stack[this.cArrPos].lineJoin !== value) {
this.currentLineJoin = value;
this.stack[this.cArrPos].lineJoin = value;
}
};
CVContextData.prototype.miterLimit = function (value) {
if (this.stack[this.cArrPos].miterLimit !== value) {
this.currentMiterLimit = value;
this.stack[this.cArrPos].miterLimit = value;
}
};
CVContextData.prototype.transform = function (props) {
this.transformMat.cloneFromProps(props);
// Taking the last transform value from the stored stack of transforms
var currentTransform = this.cTr;
// Applying the last transform value after the new transform to respect the order of transformations
this.transformMat.multiply(currentTransform);
// Storing the new transformed value in the stored transform
currentTransform.cloneFromProps(this.transformMat.props);
var trProps = currentTransform.props;
// Applying the new transform to the canvas
this.nativeContext.setTransform(trProps[0], trProps[1], trProps[4], trProps[5], trProps[12], trProps[13]);
};
CVContextData.prototype.opacity = function (op) {
var currentOpacity = this.stack[this.cArrPos].opacity;
currentOpacity *= op < 0 ? 0 : op;
if (this.stack[this.cArrPos].opacity !== currentOpacity) {
if (this.currentOpacity !== op) {
this.nativeContext.globalAlpha = op;
this.currentOpacity = op;
}
this.stack[this.cArrPos].opacity = currentOpacity;
}
};
CVContextData.prototype.fill = function (rule) {
if (this.appliedFillStyle !== this.currentFillStyle) {
this.appliedFillStyle = this.currentFillStyle;
this.nativeContext.fillStyle = this.appliedFillStyle;
}
this.nativeContext.fill(rule);
};
CVContextData.prototype.fillRect = function (x, y, w, h) {
if (this.appliedFillStyle !== this.currentFillStyle) {
this.appliedFillStyle = this.currentFillStyle;
this.nativeContext.fillStyle = this.appliedFillStyle;
}
this.nativeContext.fillRect(x, y, w, h);
};
CVContextData.prototype.stroke = function () {
if (this.appliedStrokeStyle !== this.currentStrokeStyle) {
this.appliedStrokeStyle = this.currentStrokeStyle;
this.nativeContext.strokeStyle = this.appliedStrokeStyle;
}
if (this.appliedLineWidth !== this.currentLineWidth) {
this.appliedLineWidth = this.currentLineWidth;
this.nativeContext.lineWidth = this.appliedLineWidth;
}
if (this.appliedLineCap !== this.currentLineCap) {
this.appliedLineCap = this.currentLineCap;
this.nativeContext.lineCap = this.appliedLineCap;
}
if (this.appliedLineJoin !== this.currentLineJoin) {
this.appliedLineJoin = this.currentLineJoin;
this.nativeContext.lineJoin = this.appliedLineJoin;
}
if (this.appliedMiterLimit !== this.currentMiterLimit) {
this.appliedMiterLimit = this.currentMiterLimit;
this.nativeContext.miterLimit = this.appliedMiterLimit;
}
this.nativeContext.stroke();
};
export default CVContextData;

View File

@@ -0,0 +1,50 @@
var registeredEffects = {};
function CVEffects(elem) {
var i;
var len = elem.data.ef ? elem.data.ef.length : 0;
this.filters = [];
var filterManager;
for (i = 0; i < len; i += 1) {
filterManager = null;
var type = elem.data.ef[i].ty;
if (registeredEffects[type]) {
var Effect = registeredEffects[type].effect;
filterManager = new Effect(elem.effectsManager.effectElements[i], elem);
}
if (filterManager) {
this.filters.push(filterManager);
}
}
if (this.filters.length) {
elem.addRenderableComponent(this);
}
}
CVEffects.prototype.renderFrame = function (_isFirstFrame) {
var i;
var len = this.filters.length;
for (i = 0; i < len; i += 1) {
this.filters[i].renderFrame(_isFirstFrame);
}
};
CVEffects.prototype.getEffects = function (type) {
var i;
var len = this.filters.length;
var effects = [];
for (i = 0; i < len; i += 1) {
if (this.filters[i].type === type) {
effects.push(this.filters[i]);
}
}
return effects;
};
export function registerEffect(id, effect) {
registeredEffects[id] = {
effect,
};
}
export default CVEffects;

View File

@@ -0,0 +1,58 @@
import {
extendPrototype,
} from '../../utils/functionExtensions';
import createTag from '../../utils/helpers/html_elements';
import RenderableElement from '../helpers/RenderableElement';
import BaseElement from '../BaseElement';
import TransformElement from '../helpers/TransformElement';
import HierarchyElement from '../helpers/HierarchyElement';
import FrameElement from '../helpers/FrameElement';
import CVBaseElement from './CVBaseElement';
import IImageElement from '../ImageElement';
import SVGShapeElement from '../svgElements/SVGShapeElement';
function CVImageElement(data, globalData, comp) {
this.assetData = globalData.getAssetData(data.refId);
this.img = globalData.imageLoader.getAsset(this.assetData);
this.initElement(data, globalData, comp);
}
extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVImageElement);
CVImageElement.prototype.initElement = SVGShapeElement.prototype.initElement;
CVImageElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame;
CVImageElement.prototype.createContent = function () {
if (this.img.width && (this.assetData.w !== this.img.width || this.assetData.h !== this.img.height)) {
var canvas = createTag('canvas');
canvas.width = this.assetData.w;
canvas.height = this.assetData.h;
var ctx = canvas.getContext('2d');
var imgW = this.img.width;
var imgH = this.img.height;
var imgRel = imgW / imgH;
var canvasRel = this.assetData.w / this.assetData.h;
var widthCrop;
var heightCrop;
var par = this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio;
if ((imgRel > canvasRel && par === 'xMidYMid slice') || (imgRel < canvasRel && par !== 'xMidYMid slice')) {
heightCrop = imgH;
widthCrop = heightCrop * canvasRel;
} else {
widthCrop = imgW;
heightCrop = widthCrop / canvasRel;
}
ctx.drawImage(this.img, (imgW - widthCrop) / 2, (imgH - heightCrop) / 2, widthCrop, heightCrop, 0, 0, this.assetData.w, this.assetData.h);
this.img = canvas;
}
};
CVImageElement.prototype.renderInnerContent = function () {
this.canvasContext.drawImage(this.img, 0, 0);
};
CVImageElement.prototype.destroy = function () {
this.img = null;
};
export default CVImageElement;

View File

@@ -0,0 +1,72 @@
import {
createSizedArray,
} from '../../utils/helpers/arrays';
import ShapePropertyFactory from '../../utils/shapes/ShapeProperty';
import MaskElement from '../../mask';
function CVMaskElement(data, element) {
this.data = data;
this.element = element;
this.masksProperties = this.data.masksProperties || [];
this.viewData = createSizedArray(this.masksProperties.length);
var i;
var len = this.masksProperties.length;
var hasMasks = false;
for (i = 0; i < len; i += 1) {
if (this.masksProperties[i].mode !== 'n') {
hasMasks = true;
}
this.viewData[i] = ShapePropertyFactory.getShapeProp(this.element, this.masksProperties[i], 3);
}
this.hasMasks = hasMasks;
if (hasMasks) {
this.element.addRenderableComponent(this);
}
}
CVMaskElement.prototype.renderFrame = function () {
if (!this.hasMasks) {
return;
}
var transform = this.element.finalTransform.mat;
var ctx = this.element.canvasContext;
var i;
var len = this.masksProperties.length;
var pt;
var pts;
var data;
ctx.beginPath();
for (i = 0; i < len; i += 1) {
if (this.masksProperties[i].mode !== 'n') {
if (this.masksProperties[i].inv) {
ctx.moveTo(0, 0);
ctx.lineTo(this.element.globalData.compSize.w, 0);
ctx.lineTo(this.element.globalData.compSize.w, this.element.globalData.compSize.h);
ctx.lineTo(0, this.element.globalData.compSize.h);
ctx.lineTo(0, 0);
}
data = this.viewData[i].v;
pt = transform.applyToPointArray(data.v[0][0], data.v[0][1], 0);
ctx.moveTo(pt[0], pt[1]);
var j;
var jLen = data._length;
for (j = 1; j < jLen; j += 1) {
pts = transform.applyToTriplePoints(data.o[j - 1], data.i[j], data.v[j]);
ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]);
}
pts = transform.applyToTriplePoints(data.o[j - 1], data.i[0], data.v[0]);
ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]);
}
}
this.element.globalData.renderer.save(true);
ctx.clip();
};
CVMaskElement.prototype.getMaskProperty = MaskElement.prototype.getMaskProperty;
CVMaskElement.prototype.destroy = function () {
this.element = null;
};
export default CVMaskElement;

View File

@@ -0,0 +1,521 @@
import {
degToRads,
bmFloor,
} from '../../utils/common';
import {
extendPrototype,
} from '../../utils/functionExtensions';
import PropertyFactory from '../../utils/PropertyFactory';
import RenderableElement from '../helpers/RenderableElement';
import BaseElement from '../BaseElement';
import TransformElement from '../helpers/TransformElement';
import HierarchyElement from '../helpers/HierarchyElement';
import FrameElement from '../helpers/FrameElement';
import RenderableDOMElement from '../helpers/RenderableDOMElement';
import ShapeTransformManager from '../helpers/shapes/ShapeTransformManager';
import CVBaseElement from './CVBaseElement';
import IShapeElement from '../ShapeElement';
import GradientProperty from '../../utils/shapes/GradientProperty';
import DashProperty from '../../utils/shapes/DashProperty';
import TransformPropertyFactory from '../../utils/TransformProperty';
import CVShapeData from '../helpers/shapes/CVShapeData';
import { ShapeModifiers } from '../../utils/shapes/ShapeModifiers';
import {
lineCapEnum,
lineJoinEnum,
} from '../../utils/helpers/shapeEnums';
function CVShapeElement(data, globalData, comp) {
this.shapes = [];
this.shapesData = data.shapes;
this.stylesList = [];
this.itemsData = [];
this.prevViewData = [];
this.shapeModifiers = [];
this.processedElements = [];
this.transformsManager = new ShapeTransformManager();
this.initElement(data, globalData, comp);
}
extendPrototype([BaseElement, TransformElement, CVBaseElement, IShapeElement, HierarchyElement, FrameElement, RenderableElement], CVShapeElement);
CVShapeElement.prototype.initElement = RenderableDOMElement.prototype.initElement;
CVShapeElement.prototype.transformHelper = { opacity: 1, _opMdf: false };
CVShapeElement.prototype.dashResetter = [];
CVShapeElement.prototype.createContent = function () {
this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, true, []);
};
CVShapeElement.prototype.createStyleElement = function (data, transforms) {
var styleElem = {
data: data,
type: data.ty,
preTransforms: this.transformsManager.addTransformSequence(transforms),
transforms: [],
elements: [],
closed: data.hd === true,
};
var elementData = {};
if (data.ty === 'fl' || data.ty === 'st') {
elementData.c = PropertyFactory.getProp(this, data.c, 1, 255, this);
if (!elementData.c.k) {
styleElem.co = 'rgb(' + bmFloor(elementData.c.v[0]) + ',' + bmFloor(elementData.c.v[1]) + ',' + bmFloor(elementData.c.v[2]) + ')';
}
} else if (data.ty === 'gf' || data.ty === 'gs') {
elementData.s = PropertyFactory.getProp(this, data.s, 1, null, this);
elementData.e = PropertyFactory.getProp(this, data.e, 1, null, this);
elementData.h = PropertyFactory.getProp(this, data.h || { k: 0 }, 0, 0.01, this);
elementData.a = PropertyFactory.getProp(this, data.a || { k: 0 }, 0, degToRads, this);
elementData.g = new GradientProperty(this, data.g, this);
}
elementData.o = PropertyFactory.getProp(this, data.o, 0, 0.01, this);
if (data.ty === 'st' || data.ty === 'gs') {
styleElem.lc = lineCapEnum[data.lc || 2];
styleElem.lj = lineJoinEnum[data.lj || 2];
if (data.lj == 1) { // eslint-disable-line eqeqeq
styleElem.ml = data.ml;
}
elementData.w = PropertyFactory.getProp(this, data.w, 0, null, this);
if (!elementData.w.k) {
styleElem.wi = elementData.w.v;
}
if (data.d) {
var d = new DashProperty(this, data.d, 'canvas', this);
elementData.d = d;
if (!elementData.d.k) {
styleElem.da = elementData.d.dashArray;
styleElem.do = elementData.d.dashoffset[0];
}
}
} else {
styleElem.r = data.r === 2 ? 'evenodd' : 'nonzero';
}
this.stylesList.push(styleElem);
elementData.style = styleElem;
return elementData;
};
CVShapeElement.prototype.createGroupElement = function () {
var elementData = {
it: [],
prevViewData: [],
};
return elementData;
};
CVShapeElement.prototype.createTransformElement = function (data) {
var elementData = {
transform: {
opacity: 1,
_opMdf: false,
key: this.transformsManager.getNewKey(),
op: PropertyFactory.getProp(this, data.o, 0, 0.01, this),
mProps: TransformPropertyFactory.getTransformProperty(this, data, this),
},
};
return elementData;
};
CVShapeElement.prototype.createShapeElement = function (data) {
var elementData = new CVShapeData(this, data, this.stylesList, this.transformsManager);
this.shapes.push(elementData);
this.addShapeToModifiers(elementData);
return elementData;
};
CVShapeElement.prototype.reloadShapes = function () {
this._isFirstFrame = true;
var i;
var len = this.itemsData.length;
for (i = 0; i < len; i += 1) {
this.prevViewData[i] = this.itemsData[i];
}
this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, true, []);
len = this.dynamicProperties.length;
for (i = 0; i < len; i += 1) {
this.dynamicProperties[i].getValue();
}
this.renderModifiers();
this.transformsManager.processSequences(this._isFirstFrame);
};
CVShapeElement.prototype.addTransformToStyleList = function (transform) {
var i;
var len = this.stylesList.length;
for (i = 0; i < len; i += 1) {
if (!this.stylesList[i].closed) {
this.stylesList[i].transforms.push(transform);
}
}
};
CVShapeElement.prototype.removeTransformFromStyleList = function () {
var i;
var len = this.stylesList.length;
for (i = 0; i < len; i += 1) {
if (!this.stylesList[i].closed) {
this.stylesList[i].transforms.pop();
}
}
};
CVShapeElement.prototype.closeStyles = function (styles) {
var i;
var len = styles.length;
for (i = 0; i < len; i += 1) {
styles[i].closed = true;
}
};
CVShapeElement.prototype.searchShapes = function (arr, itemsData, prevViewData, shouldRender, transforms) {
var i;
var len = arr.length - 1;
var j;
var jLen;
var ownStyles = [];
var ownModifiers = [];
var processedPos;
var modifier;
var currentTransform;
var ownTransforms = [].concat(transforms);
for (i = len; i >= 0; i -= 1) {
processedPos = this.searchProcessedElement(arr[i]);
if (!processedPos) {
arr[i]._shouldRender = shouldRender;
} else {
itemsData[i] = prevViewData[processedPos - 1];
}
if (arr[i].ty === 'fl' || arr[i].ty === 'st' || arr[i].ty === 'gf' || arr[i].ty === 'gs') {
if (!processedPos) {
itemsData[i] = this.createStyleElement(arr[i], ownTransforms);
} else {
itemsData[i].style.closed = false;
}
ownStyles.push(itemsData[i].style);
} else if (arr[i].ty === 'gr') {
if (!processedPos) {
itemsData[i] = this.createGroupElement(arr[i]);
} else {
jLen = itemsData[i].it.length;
for (j = 0; j < jLen; j += 1) {
itemsData[i].prevViewData[j] = itemsData[i].it[j];
}
}
this.searchShapes(arr[i].it, itemsData[i].it, itemsData[i].prevViewData, shouldRender, ownTransforms);
} else if (arr[i].ty === 'tr') {
if (!processedPos) {
currentTransform = this.createTransformElement(arr[i]);
itemsData[i] = currentTransform;
}
ownTransforms.push(itemsData[i]);
this.addTransformToStyleList(itemsData[i]);
} else if (arr[i].ty === 'sh' || arr[i].ty === 'rc' || arr[i].ty === 'el' || arr[i].ty === 'sr') {
if (!processedPos) {
itemsData[i] = this.createShapeElement(arr[i]);
}
} else if (arr[i].ty === 'tm' || arr[i].ty === 'rd' || arr[i].ty === 'pb' || arr[i].ty === 'zz' || arr[i].ty === 'op') {
if (!processedPos) {
modifier = ShapeModifiers.getModifier(arr[i].ty);
modifier.init(this, arr[i]);
itemsData[i] = modifier;
this.shapeModifiers.push(modifier);
} else {
modifier = itemsData[i];
modifier.closed = false;
}
ownModifiers.push(modifier);
} else if (arr[i].ty === 'rp') {
if (!processedPos) {
modifier = ShapeModifiers.getModifier(arr[i].ty);
itemsData[i] = modifier;
modifier.init(this, arr, i, itemsData);
this.shapeModifiers.push(modifier);
shouldRender = false;
} else {
modifier = itemsData[i];
modifier.closed = true;
}
ownModifiers.push(modifier);
}
this.addProcessedElement(arr[i], i + 1);
}
this.removeTransformFromStyleList();
this.closeStyles(ownStyles);
len = ownModifiers.length;
for (i = 0; i < len; i += 1) {
ownModifiers[i].closed = true;
}
};
CVShapeElement.prototype.renderInnerContent = function () {
this.transformHelper.opacity = 1;
this.transformHelper._opMdf = false;
this.renderModifiers();
this.transformsManager.processSequences(this._isFirstFrame);
this.renderShape(this.transformHelper, this.shapesData, this.itemsData, true);
};
CVShapeElement.prototype.renderShapeTransform = function (parentTransform, groupTransform) {
if (parentTransform._opMdf || groupTransform.op._mdf || this._isFirstFrame) {
groupTransform.opacity = parentTransform.opacity;
groupTransform.opacity *= groupTransform.op.v;
groupTransform._opMdf = true;
}
};
CVShapeElement.prototype.drawLayer = function () {
var i;
var len = this.stylesList.length;
var j;
var jLen;
var k;
var kLen;
var elems;
var nodes;
var renderer = this.globalData.renderer;
var ctx = this.globalData.canvasContext;
var type;
var currentStyle;
for (i = 0; i < len; i += 1) {
currentStyle = this.stylesList[i];
type = currentStyle.type;
// Skipping style when
// Stroke width equals 0
// style should not be rendered (extra unused repeaters)
// current opacity equals 0
// global opacity equals 0
if (!(((type === 'st' || type === 'gs') && currentStyle.wi === 0) || !currentStyle.data._shouldRender || currentStyle.coOp === 0 || this.globalData.currentGlobalAlpha === 0)) {
renderer.save();
elems = currentStyle.elements;
if (type === 'st' || type === 'gs') {
renderer.ctxStrokeStyle(type === 'st' ? currentStyle.co : currentStyle.grd);
// ctx.strokeStyle = type === 'st' ? currentStyle.co : currentStyle.grd;
renderer.ctxLineWidth(currentStyle.wi);
// ctx.lineWidth = currentStyle.wi;
renderer.ctxLineCap(currentStyle.lc);
// ctx.lineCap = currentStyle.lc;
renderer.ctxLineJoin(currentStyle.lj);
// ctx.lineJoin = currentStyle.lj;
renderer.ctxMiterLimit(currentStyle.ml || 0);
// ctx.miterLimit = currentStyle.ml || 0;
} else {
renderer.ctxFillStyle(type === 'fl' ? currentStyle.co : currentStyle.grd);
// ctx.fillStyle = type === 'fl' ? currentStyle.co : currentStyle.grd;
}
renderer.ctxOpacity(currentStyle.coOp);
if (type !== 'st' && type !== 'gs') {
ctx.beginPath();
}
renderer.ctxTransform(currentStyle.preTransforms.finalTransform.props);
jLen = elems.length;
for (j = 0; j < jLen; j += 1) {
if (type === 'st' || type === 'gs') {
ctx.beginPath();
if (currentStyle.da) {
ctx.setLineDash(currentStyle.da);
ctx.lineDashOffset = currentStyle.do;
}
}
nodes = elems[j].trNodes;
kLen = nodes.length;
for (k = 0; k < kLen; k += 1) {
if (nodes[k].t === 'm') {
ctx.moveTo(nodes[k].p[0], nodes[k].p[1]);
} else if (nodes[k].t === 'c') {
ctx.bezierCurveTo(nodes[k].pts[0], nodes[k].pts[1], nodes[k].pts[2], nodes[k].pts[3], nodes[k].pts[4], nodes[k].pts[5]);
} else {
ctx.closePath();
}
}
if (type === 'st' || type === 'gs') {
// ctx.stroke();
renderer.ctxStroke();
if (currentStyle.da) {
ctx.setLineDash(this.dashResetter);
}
}
}
if (type !== 'st' && type !== 'gs') {
// ctx.fill(currentStyle.r);
this.globalData.renderer.ctxFill(currentStyle.r);
}
renderer.restore();
}
}
};
CVShapeElement.prototype.renderShape = function (parentTransform, items, data, isMain) {
var i;
var len = items.length - 1;
var groupTransform;
groupTransform = parentTransform;
for (i = len; i >= 0; i -= 1) {
if (items[i].ty === 'tr') {
groupTransform = data[i].transform;
this.renderShapeTransform(parentTransform, groupTransform);
} else if (items[i].ty === 'sh' || items[i].ty === 'el' || items[i].ty === 'rc' || items[i].ty === 'sr') {
this.renderPath(items[i], data[i]);
} else if (items[i].ty === 'fl') {
this.renderFill(items[i], data[i], groupTransform);
} else if (items[i].ty === 'st') {
this.renderStroke(items[i], data[i], groupTransform);
} else if (items[i].ty === 'gf' || items[i].ty === 'gs') {
this.renderGradientFill(items[i], data[i], groupTransform);
} else if (items[i].ty === 'gr') {
this.renderShape(groupTransform, items[i].it, data[i].it);
} else if (items[i].ty === 'tm') {
//
}
}
if (isMain) {
this.drawLayer();
}
};
CVShapeElement.prototype.renderStyledShape = function (styledShape, shape) {
if (this._isFirstFrame || shape._mdf || styledShape.transforms._mdf) {
var shapeNodes = styledShape.trNodes;
var paths = shape.paths;
var i;
var len;
var j;
var jLen = paths._length;
shapeNodes.length = 0;
var groupTransformMat = styledShape.transforms.finalTransform;
for (j = 0; j < jLen; j += 1) {
var pathNodes = paths.shapes[j];
if (pathNodes && pathNodes.v) {
len = pathNodes._length;
for (i = 1; i < len; i += 1) {
if (i === 1) {
shapeNodes.push({
t: 'm',
p: groupTransformMat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0),
});
}
shapeNodes.push({
t: 'c',
pts: groupTransformMat.applyToTriplePoints(pathNodes.o[i - 1], pathNodes.i[i], pathNodes.v[i]),
});
}
if (len === 1) {
shapeNodes.push({
t: 'm',
p: groupTransformMat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0),
});
}
if (pathNodes.c && len) {
shapeNodes.push({
t: 'c',
pts: groupTransformMat.applyToTriplePoints(pathNodes.o[i - 1], pathNodes.i[0], pathNodes.v[0]),
});
shapeNodes.push({
t: 'z',
});
}
}
}
styledShape.trNodes = shapeNodes;
}
};
CVShapeElement.prototype.renderPath = function (pathData, itemData) {
if (pathData.hd !== true && pathData._shouldRender) {
var i;
var len = itemData.styledShapes.length;
for (i = 0; i < len; i += 1) {
this.renderStyledShape(itemData.styledShapes[i], itemData.sh);
}
}
};
CVShapeElement.prototype.renderFill = function (styleData, itemData, groupTransform) {
var styleElem = itemData.style;
if (itemData.c._mdf || this._isFirstFrame) {
styleElem.co = 'rgb('
+ bmFloor(itemData.c.v[0]) + ','
+ bmFloor(itemData.c.v[1]) + ','
+ bmFloor(itemData.c.v[2]) + ')';
}
if (itemData.o._mdf || groupTransform._opMdf || this._isFirstFrame) {
styleElem.coOp = itemData.o.v * groupTransform.opacity;
}
};
CVShapeElement.prototype.renderGradientFill = function (styleData, itemData, groupTransform) {
var styleElem = itemData.style;
var grd;
if (!styleElem.grd || itemData.g._mdf || itemData.s._mdf || itemData.e._mdf || (styleData.t !== 1 && (itemData.h._mdf || itemData.a._mdf))) {
var ctx = this.globalData.canvasContext;
var pt1 = itemData.s.v;
var pt2 = itemData.e.v;
if (styleData.t === 1) {
grd = ctx.createLinearGradient(pt1[0], pt1[1], pt2[0], pt2[1]);
} else {
var rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
var ang = Math.atan2(pt2[1] - pt1[1], pt2[0] - pt1[0]);
var percent = itemData.h.v;
if (percent >= 1) {
percent = 0.99;
} else if (percent <= -1) {
percent = -0.99;
}
var dist = rad * percent;
var x = Math.cos(ang + itemData.a.v) * dist + pt1[0];
var y = Math.sin(ang + itemData.a.v) * dist + pt1[1];
grd = ctx.createRadialGradient(x, y, 0, pt1[0], pt1[1], rad);
}
var i;
var len = styleData.g.p;
var cValues = itemData.g.c;
var opacity = 1;
for (i = 0; i < len; i += 1) {
if (itemData.g._hasOpacity && itemData.g._collapsable) {
opacity = itemData.g.o[i * 2 + 1];
}
grd.addColorStop(cValues[i * 4] / 100, 'rgba(' + cValues[i * 4 + 1] + ',' + cValues[i * 4 + 2] + ',' + cValues[i * 4 + 3] + ',' + opacity + ')');
}
styleElem.grd = grd;
}
styleElem.coOp = itemData.o.v * groupTransform.opacity;
};
CVShapeElement.prototype.renderStroke = function (styleData, itemData, groupTransform) {
var styleElem = itemData.style;
var d = itemData.d;
if (d && (d._mdf || this._isFirstFrame)) {
styleElem.da = d.dashArray;
styleElem.do = d.dashoffset[0];
}
if (itemData.c._mdf || this._isFirstFrame) {
styleElem.co = 'rgb(' + bmFloor(itemData.c.v[0]) + ',' + bmFloor(itemData.c.v[1]) + ',' + bmFloor(itemData.c.v[2]) + ')';
}
if (itemData.o._mdf || groupTransform._opMdf || this._isFirstFrame) {
styleElem.coOp = itemData.o.v * groupTransform.opacity;
}
if (itemData.w._mdf || this._isFirstFrame) {
styleElem.wi = itemData.w.v;
}
};
CVShapeElement.prototype.destroy = function () {
this.shapesData = null;
this.globalData = null;
this.canvasContext = null;
this.stylesList.length = 0;
this.itemsData.length = 0;
};
export default CVShapeElement;

View File

@@ -0,0 +1,30 @@
import {
extendPrototype,
} from '../../utils/functionExtensions';
import RenderableElement from '../helpers/RenderableElement';
import BaseElement from '../BaseElement';
import TransformElement from '../helpers/TransformElement';
import HierarchyElement from '../helpers/HierarchyElement';
import FrameElement from '../helpers/FrameElement';
import CVBaseElement from './CVBaseElement';
import IImageElement from '../ImageElement';
import SVGShapeElement from '../svgElements/SVGShapeElement';
function CVSolidElement(data, globalData, comp) {
this.initElement(data, globalData, comp);
}
extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVSolidElement);
CVSolidElement.prototype.initElement = SVGShapeElement.prototype.initElement;
CVSolidElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame;
CVSolidElement.prototype.renderInnerContent = function () {
// var ctx = this.canvasContext;
this.globalData.renderer.ctxFillStyle(this.data.sc);
// ctx.fillStyle = this.data.sc;
this.globalData.renderer.ctxFillRect(0, 0, this.data.sw, this.data.sh);
// ctx.fillRect(0, 0, this.data.sw, this.data.sh);
//
};
export default CVSolidElement;

View File

@@ -0,0 +1,244 @@
import {
extendPrototype,
} from '../../utils/functionExtensions';
import {
createSizedArray,
} from '../../utils/helpers/arrays';
import createTag from '../../utils/helpers/html_elements';
import RenderableElement from '../helpers/RenderableElement';
import BaseElement from '../BaseElement';
import TransformElement from '../helpers/TransformElement';
import HierarchyElement from '../helpers/HierarchyElement';
import FrameElement from '../helpers/FrameElement';
import ITextElement from '../TextElement';
import CVBaseElement from './CVBaseElement';
function CVTextElement(data, globalData, comp) {
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.values = {
fill: 'rgba(0,0,0,0)',
stroke: 'rgba(0,0,0,0)',
sWidth: 0,
fValue: '',
};
this.initElement(data, globalData, comp);
}
extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement, ITextElement], CVTextElement);
CVTextElement.prototype.tHelper = createTag('canvas').getContext('2d');
CVTextElement.prototype.buildNewText = function () {
var documentData = this.textProperty.currentData;
this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0);
var hasFill = false;
if (documentData.fc) {
hasFill = true;
this.values.fill = this.buildColor(documentData.fc);
} else {
this.values.fill = 'rgba(0,0,0,0)';
}
this.fill = hasFill;
var hasStroke = false;
if (documentData.sc) {
hasStroke = true;
this.values.stroke = this.buildColor(documentData.sc);
this.values.sWidth = documentData.sw;
}
var fontData = this.globalData.fontManager.getFontByName(documentData.f);
var i;
var len;
var letters = documentData.l;
var matrixHelper = this.mHelper;
this.stroke = hasStroke;
this.values.fValue = documentData.finalSize + 'px ' + this.globalData.fontManager.getFontByName(documentData.f).fFamily;
len = documentData.finalText.length;
// this.tHelper.font = this.values.fValue;
var charData;
var shapeData;
var k;
var kLen;
var shapes;
var j;
var jLen;
var pathNodes;
var commands;
var pathArr;
var singleShape = this.data.singleShape;
var trackingOffset = documentData.tr * 0.001 * documentData.finalSize;
var xPos = 0;
var yPos = 0;
var firstLine = true;
var cnt = 0;
for (i = 0; i < len; i += 1) {
charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
shapeData = (charData && charData.data) || {};
matrixHelper.reset();
if (singleShape && letters[i].n) {
xPos = -trackingOffset;
yPos += documentData.yOffset;
yPos += firstLine ? 1 : 0;
firstLine = false;
}
shapes = shapeData.shapes ? shapeData.shapes[0].it : [];
jLen = shapes.length;
matrixHelper.scale(documentData.finalSize / 100, documentData.finalSize / 100);
if (singleShape) {
this.applyTextPropertiesToMatrix(documentData, matrixHelper, letters[i].line, xPos, yPos);
}
commands = createSizedArray(jLen - 1);
var commandsCounter = 0;
for (j = 0; j < jLen; j += 1) {
if (shapes[j].ty === 'sh') {
kLen = shapes[j].ks.k.i.length;
pathNodes = shapes[j].ks.k;
pathArr = [];
for (k = 1; k < kLen; k += 1) {
if (k === 1) {
pathArr.push(matrixHelper.applyToX(pathNodes.v[0][0], pathNodes.v[0][1], 0), matrixHelper.applyToY(pathNodes.v[0][0], pathNodes.v[0][1], 0));
}
pathArr.push(matrixHelper.applyToX(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToY(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToX(pathNodes.i[k][0], pathNodes.i[k][1], 0), matrixHelper.applyToY(pathNodes.i[k][0], pathNodes.i[k][1], 0), matrixHelper.applyToX(pathNodes.v[k][0], pathNodes.v[k][1], 0), matrixHelper.applyToY(pathNodes.v[k][0], pathNodes.v[k][1], 0));
}
pathArr.push(matrixHelper.applyToX(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToY(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToX(pathNodes.i[0][0], pathNodes.i[0][1], 0), matrixHelper.applyToY(pathNodes.i[0][0], pathNodes.i[0][1], 0), matrixHelper.applyToX(pathNodes.v[0][0], pathNodes.v[0][1], 0), matrixHelper.applyToY(pathNodes.v[0][0], pathNodes.v[0][1], 0));
commands[commandsCounter] = pathArr;
commandsCounter += 1;
}
}
if (singleShape) {
xPos += letters[i].l;
xPos += trackingOffset;
}
if (this.textSpans[cnt]) {
this.textSpans[cnt].elem = commands;
} else {
this.textSpans[cnt] = { elem: commands };
}
cnt += 1;
}
};
CVTextElement.prototype.renderInnerContent = function () {
this.validateText();
var ctx = this.canvasContext;
ctx.font = this.values.fValue;
this.globalData.renderer.ctxLineCap('butt');
// ctx.lineCap = 'butt';
this.globalData.renderer.ctxLineJoin('miter');
// ctx.lineJoin = 'miter';
this.globalData.renderer.ctxMiterLimit(4);
// ctx.miterLimit = 4;
if (!this.data.singleShape) {
this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
}
var i;
var len;
var j;
var jLen;
var k;
var kLen;
var renderedLetters = this.textAnimator.renderedLetters;
var letters = this.textProperty.currentData.l;
len = letters.length;
var renderedLetter;
var lastFill = null;
var lastStroke = null;
var lastStrokeW = null;
var commands;
var pathArr;
var renderer = this.globalData.renderer;
for (i = 0; i < len; i += 1) {
if (!letters[i].n) {
renderedLetter = renderedLetters[i];
if (renderedLetter) {
renderer.save();
renderer.ctxTransform(renderedLetter.p);
renderer.ctxOpacity(renderedLetter.o);
}
if (this.fill) {
if (renderedLetter && renderedLetter.fc) {
if (lastFill !== renderedLetter.fc) {
renderer.ctxFillStyle(renderedLetter.fc);
lastFill = renderedLetter.fc;
// ctx.fillStyle = renderedLetter.fc;
}
} else if (lastFill !== this.values.fill) {
lastFill = this.values.fill;
renderer.ctxFillStyle(this.values.fill);
// ctx.fillStyle = this.values.fill;
}
commands = this.textSpans[i].elem;
jLen = commands.length;
this.globalData.canvasContext.beginPath();
for (j = 0; j < jLen; j += 1) {
pathArr = commands[j];
kLen = pathArr.length;
this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
for (k = 2; k < kLen; k += 6) {
this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
}
}
this.globalData.canvasContext.closePath();
renderer.ctxFill();
// this.globalData.canvasContext.fill();
/// ctx.fillText(this.textSpans[i].val,0,0);
}
if (this.stroke) {
if (renderedLetter && renderedLetter.sw) {
if (lastStrokeW !== renderedLetter.sw) {
lastStrokeW = renderedLetter.sw;
renderer.ctxLineWidth(renderedLetter.sw);
// ctx.lineWidth = renderedLetter.sw;
}
} else if (lastStrokeW !== this.values.sWidth) {
lastStrokeW = this.values.sWidth;
renderer.ctxLineWidth(this.values.sWidth);
// ctx.lineWidth = this.values.sWidth;
}
if (renderedLetter && renderedLetter.sc) {
if (lastStroke !== renderedLetter.sc) {
lastStroke = renderedLetter.sc;
renderer.ctxStrokeStyle(renderedLetter.sc);
// ctx.strokeStyle = renderedLetter.sc;
}
} else if (lastStroke !== this.values.stroke) {
lastStroke = this.values.stroke;
renderer.ctxStrokeStyle(this.values.stroke);
// ctx.strokeStyle = this.values.stroke;
}
commands = this.textSpans[i].elem;
jLen = commands.length;
this.globalData.canvasContext.beginPath();
for (j = 0; j < jLen; j += 1) {
pathArr = commands[j];
kLen = pathArr.length;
this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
for (k = 2; k < kLen; k += 6) {
this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
}
}
this.globalData.canvasContext.closePath();
renderer.ctxStroke();
// this.globalData.canvasContext.stroke();
/// ctx.strokeText(letters[i].val,0,0);
}
if (renderedLetter) {
this.globalData.renderer.restore();
}
}
}
};
export default CVTextElement;

View File

@@ -0,0 +1,9 @@
import TransformEffect from '../../../effects/TransformEffect';
import { extendPrototype } from '../../../utils/functionExtensions';
function CVTransformEffect(effectsManager) {
this.init(effectsManager);
}
extendPrototype([TransformEffect], CVTransformEffect);
export default CVTransformEffect;

View File

@@ -0,0 +1,54 @@
/**
* @file
* Handles element's layer frame update.
* Checks layer in point and out point
*
*/
function FrameElement() {}
FrameElement.prototype = {
/**
* @function
* Initializes frame related properties.
*
*/
initFrame: function () {
// set to true when inpoint is rendered
this._isFirstFrame = false;
// list of animated properties
this.dynamicProperties = [];
// If layer has been modified in current tick this will be true
this._mdf = false;
},
/**
* @function
* Calculates all dynamic values
*
* @param {number} num
* current frame number in Layer's time
* @param {boolean} isVisible
* if layers is currently in range
*
*/
prepareProperties: function (num, isVisible) {
var i;
var len = this.dynamicProperties.length;
for (i = 0; i < len; i += 1) {
if (isVisible || (this._isParent && this.dynamicProperties[i].propType === 'transform')) {
this.dynamicProperties[i].getValue();
if (this.dynamicProperties[i]._mdf) {
this.globalData._mdf = true;
this._mdf = true;
}
}
}
},
addDynamicProperty: function (prop) {
if (this.dynamicProperties.indexOf(prop) === -1) {
this.dynamicProperties.push(prop);
}
},
};
export default FrameElement;

View File

@@ -0,0 +1,52 @@
/**
* @file
* Handles AE's layer parenting property.
*
*/
function HierarchyElement() {}
HierarchyElement.prototype = {
/**
* @function
* Initializes hierarchy properties
*
*/
initHierarchy: function () {
// element's parent list
this.hierarchy = [];
// if element is parent of another layer _isParent will be true
this._isParent = false;
this.checkParenting();
},
/**
* @function
* Sets layer's hierarchy.
* @param {array} hierarch
* layer's parent list
*
*/
setHierarchy: function (hierarchy) {
this.hierarchy = hierarchy;
},
/**
* @function
* Sets layer as parent.
*
*/
setAsParent: function () {
this._isParent = true;
},
/**
* @function
* Searches layer's parenting chain
*
*/
checkParenting: function () {
if (this.data.parent !== undefined) {
this.comp.buildElementParenting(this, this.data.parent, []);
}
},
};
export default HierarchyElement;

View File

@@ -0,0 +1,72 @@
import {
extendPrototype,
createProxyFunction,
} from '../../utils/functionExtensions';
import RenderableElement from './RenderableElement';
function RenderableDOMElement() {}
(function () {
var _prototype = {
initElement: function (data, globalData, comp) {
this.initFrame();
this.initBaseData(data, globalData, comp);
this.initTransform(data, globalData, comp);
this.initHierarchy();
this.initRenderable();
this.initRendererElement();
this.createContainerElements();
this.createRenderableComponents();
this.createContent();
this.hide();
},
hide: function () {
// console.log('HIDE', this);
if (!this.hidden && (!this.isInRange || this.isTransparent)) {
var elem = this.baseElement || this.layerElement;
elem.style.display = 'none';
this.hidden = true;
}
},
show: function () {
// console.log('SHOW', this);
if (this.isInRange && !this.isTransparent) {
if (!this.data.hd) {
var elem = this.baseElement || this.layerElement;
elem.style.display = 'block';
}
this.hidden = false;
this._isFirstFrame = true;
}
},
renderFrame: function () {
// If it is exported as hidden (data.hd === true) no need to render
// If it is not visible no need to render
if (this.data.hd || this.hidden) {
return;
}
this.renderTransform();
this.renderRenderable();
this.renderLocalTransform();
this.renderElement();
this.renderInnerContent();
if (this._isFirstFrame) {
this._isFirstFrame = false;
}
},
renderInnerContent: function () {},
prepareFrame: function (num) {
this._mdf = false;
this.prepareRenderableFrame(num);
this.prepareProperties(num, this.isInRange);
this.checkTransparency();
},
destroy: function () {
this.innerElem = null;
this.destroyBaseElement();
},
};
extendPrototype([RenderableElement, createProxyFunction(_prototype)], RenderableDOMElement);
}());
export default RenderableDOMElement;

View File

@@ -0,0 +1,87 @@
function RenderableElement() {
}
RenderableElement.prototype = {
initRenderable: function () {
// layer's visibility related to inpoint and outpoint. Rename isVisible to isInRange
this.isInRange = false;
// layer's display state
this.hidden = false;
// If layer's transparency equals 0, it can be hidden
this.isTransparent = false;
// list of animated components
this.renderableComponents = [];
},
addRenderableComponent: function (component) {
if (this.renderableComponents.indexOf(component) === -1) {
this.renderableComponents.push(component);
}
},
removeRenderableComponent: function (component) {
if (this.renderableComponents.indexOf(component) !== -1) {
this.renderableComponents.splice(this.renderableComponents.indexOf(component), 1);
}
},
prepareRenderableFrame: function (num) {
this.checkLayerLimits(num);
},
checkTransparency: function () {
if (this.finalTransform.mProp.o.v <= 0) {
if (!this.isTransparent && this.globalData.renderConfig.hideOnTransparent) {
this.isTransparent = true;
this.hide();
}
} else if (this.isTransparent) {
this.isTransparent = false;
this.show();
}
},
/**
* @function
* Initializes frame related properties.
*
* @param {number} num
* current frame number in Layer's time
*
*/
checkLayerLimits: function (num) {
if (this.data.ip - this.data.st <= num && this.data.op - this.data.st > num) {
if (this.isInRange !== true) {
this.globalData._mdf = true;
this._mdf = true;
this.isInRange = true;
this.show();
}
} else if (this.isInRange !== false) {
this.globalData._mdf = true;
this.isInRange = false;
this.hide();
}
},
renderRenderable: function () {
var i;
var len = this.renderableComponents.length;
for (i = 0; i < len; i += 1) {
this.renderableComponents[i].renderFrame(this._isFirstFrame);
}
/* this.maskManager.renderFrame(this.finalTransform.mat);
this.renderableEffectsManager.renderFrame(this._isFirstFrame); */
},
sourceRectAtTime: function () {
return {
top: 0,
left: 0,
width: 100,
height: 100,
};
},
getLayerSize: function () {
if (this.data.ty === 5) {
return { w: this.data.textData.width, h: this.data.textData.height };
}
return { w: this.data.width, h: this.data.height };
},
};
export default RenderableElement;

View File

@@ -0,0 +1,140 @@
import Matrix from '../../3rd_party/transformation-matrix';
import TransformPropertyFactory from '../../utils/TransformProperty';
import effectTypes from '../../utils/helpers/effectTypes';
function TransformElement() {}
TransformElement.prototype = {
initTransform: function () {
var mat = new Matrix();
this.finalTransform = {
mProp: this.data.ks ? TransformPropertyFactory.getTransformProperty(this, this.data.ks, this) : { o: 0 },
_matMdf: false,
_localMatMdf: false,
_opMdf: false,
mat: mat,
localMat: mat,
localOpacity: 1,
};
if (this.data.ao) {
this.finalTransform.mProp.autoOriented = true;
}
// TODO: check TYPE 11: Guided elements
if (this.data.ty !== 11) {
// this.createElements();
}
},
renderTransform: function () {
this.finalTransform._opMdf = this.finalTransform.mProp.o._mdf || this._isFirstFrame;
this.finalTransform._matMdf = this.finalTransform.mProp._mdf || this._isFirstFrame;
if (this.hierarchy) {
var mat;
var finalMat = this.finalTransform.mat;
var i = 0;
var len = this.hierarchy.length;
// Checking if any of the transformation matrices in the hierarchy chain has changed.
if (!this.finalTransform._matMdf) {
while (i < len) {
if (this.hierarchy[i].finalTransform.mProp._mdf) {
this.finalTransform._matMdf = true;
break;
}
i += 1;
}
}
if (this.finalTransform._matMdf) {
mat = this.finalTransform.mProp.v.props;
finalMat.cloneFromProps(mat);
for (i = 0; i < len; i += 1) {
finalMat.multiply(this.hierarchy[i].finalTransform.mProp.v);
}
}
}
if (this.finalTransform._matMdf) {
this.finalTransform._localMatMdf = this.finalTransform._matMdf;
}
if (this.finalTransform._opMdf) {
this.finalTransform.localOpacity = this.finalTransform.mProp.o.v;
}
},
renderLocalTransform: function () {
if (this.localTransforms) {
var i = 0;
var len = this.localTransforms.length;
this.finalTransform._localMatMdf = this.finalTransform._matMdf;
if (!this.finalTransform._localMatMdf || !this.finalTransform._opMdf) {
while (i < len) {
if (this.localTransforms[i]._mdf) {
this.finalTransform._localMatMdf = true;
}
if (this.localTransforms[i]._opMdf && !this.finalTransform._opMdf) {
this.finalTransform.localOpacity = this.finalTransform.mProp.o.v;
this.finalTransform._opMdf = true;
}
i += 1;
}
}
if (this.finalTransform._localMatMdf) {
var localMat = this.finalTransform.localMat;
this.localTransforms[0].matrix.clone(localMat);
for (i = 1; i < len; i += 1) {
var lmat = this.localTransforms[i].matrix;
localMat.multiply(lmat);
}
localMat.multiply(this.finalTransform.mat);
}
if (this.finalTransform._opMdf) {
var localOp = this.finalTransform.localOpacity;
for (i = 0; i < len; i += 1) {
localOp *= this.localTransforms[i].opacity * 0.01;
}
this.finalTransform.localOpacity = localOp;
}
}
},
searchEffectTransforms: function () {
if (this.renderableEffectsManager) {
var transformEffects = this.renderableEffectsManager.getEffects(effectTypes.TRANSFORM_EFFECT);
if (transformEffects.length) {
this.localTransforms = [];
this.finalTransform.localMat = new Matrix();
var i = 0;
var len = transformEffects.length;
for (i = 0; i < len; i += 1) {
this.localTransforms.push(transformEffects[i]);
}
}
}
},
globalToLocal: function (pt) {
var transforms = [];
transforms.push(this.finalTransform);
var flag = true;
var comp = this.comp;
while (flag) {
if (comp.finalTransform) {
if (comp.data.hasMask) {
transforms.splice(0, 0, comp.finalTransform);
}
comp = comp.comp;
} else {
flag = false;
}
}
var i;
var len = transforms.length;
var ptNew;
for (i = 0; i < len; i += 1) {
ptNew = transforms[i].mat.applyToPointArray(0, 0, 0);
// ptNew = transforms[i].mat.applyToPointArray(pt[0],pt[1],pt[2]);
pt = [pt[0] - ptNew[0], pt[1] - ptNew[1], 0];
}
return pt;
},
mHelper: new Matrix(),
};
export default TransformElement;

View File

@@ -0,0 +1,33 @@
import ShapePropertyFactory from '../../../utils/shapes/ShapeProperty';
import SVGShapeData from './SVGShapeData';
function CVShapeData(element, data, styles, transformsManager) {
this.styledShapes = [];
this.tr = [0, 0, 0, 0, 0, 0];
var ty = 4;
if (data.ty === 'rc') {
ty = 5;
} else if (data.ty === 'el') {
ty = 6;
} else if (data.ty === 'sr') {
ty = 7;
}
this.sh = ShapePropertyFactory.getShapeProp(element, data, ty, element);
var i;
var len = styles.length;
var styledShape;
for (i = 0; i < len; i += 1) {
if (!styles[i].closed) {
styledShape = {
transforms: transformsManager.addTransformSequence(styles[i].transforms),
trNodes: [],
};
this.styledShapes.push(styledShape);
styles[i].elements.push(styledShape);
}
}
}
CVShapeData.prototype.setAsAnimated = SVGShapeData.prototype.setAsAnimated;
export default CVShapeData;

View File

@@ -0,0 +1,6 @@
function ProcessedElement(element, position) {
this.elem = element;
this.pos = position;
}
export default ProcessedElement;

View File

@@ -0,0 +1,239 @@
import Matrix from '../../../3rd_party/transformation-matrix';
import buildShapeString from '../../../utils/shapes/shapePathBuilder';
import { bmFloor } from '../../../utils/common';
const SVGElementsRenderer = (function () {
var _identityMatrix = new Matrix();
var _matrixHelper = new Matrix();
var ob = {
createRenderFunction: createRenderFunction,
};
function createRenderFunction(data) {
switch (data.ty) {
case 'fl':
return renderFill;
case 'gf':
return renderGradient;
case 'gs':
return renderGradientStroke;
case 'st':
return renderStroke;
case 'sh':
case 'el':
case 'rc':
case 'sr':
return renderPath;
case 'tr':
return renderContentTransform;
case 'no':
return renderNoop;
default:
return null;
}
}
function renderContentTransform(styleData, itemData, isFirstFrame) {
if (isFirstFrame || itemData.transform.op._mdf) {
itemData.transform.container.setAttribute('opacity', itemData.transform.op.v);
}
if (isFirstFrame || itemData.transform.mProps._mdf) {
itemData.transform.container.setAttribute('transform', itemData.transform.mProps.v.to2dCSS());
}
}
function renderNoop() {
}
function renderPath(styleData, itemData, isFirstFrame) {
var j;
var jLen;
var pathStringTransformed;
var redraw;
var pathNodes;
var l;
var lLen = itemData.styles.length;
var lvl = itemData.lvl;
var paths;
var mat;
var iterations;
var k;
for (l = 0; l < lLen; l += 1) {
redraw = itemData.sh._mdf || isFirstFrame;
if (itemData.styles[l].lvl < lvl) {
mat = _matrixHelper.reset();
iterations = lvl - itemData.styles[l].lvl;
k = itemData.transformers.length - 1;
while (!redraw && iterations > 0) {
redraw = itemData.transformers[k].mProps._mdf || redraw;
iterations -= 1;
k -= 1;
}
if (redraw) {
iterations = lvl - itemData.styles[l].lvl;
k = itemData.transformers.length - 1;
while (iterations > 0) {
mat.multiply(itemData.transformers[k].mProps.v);
iterations -= 1;
k -= 1;
}
}
} else {
mat = _identityMatrix;
}
paths = itemData.sh.paths;
jLen = paths._length;
if (redraw) {
pathStringTransformed = '';
for (j = 0; j < jLen; j += 1) {
pathNodes = paths.shapes[j];
if (pathNodes && pathNodes._length) {
pathStringTransformed += buildShapeString(pathNodes, pathNodes._length, pathNodes.c, mat);
}
}
itemData.caches[l] = pathStringTransformed;
} else {
pathStringTransformed = itemData.caches[l];
}
itemData.styles[l].d += styleData.hd === true ? '' : pathStringTransformed;
itemData.styles[l]._mdf = redraw || itemData.styles[l]._mdf;
}
}
function renderFill(styleData, itemData, isFirstFrame) {
var styleElem = itemData.style;
if (itemData.c._mdf || isFirstFrame) {
styleElem.pElem.setAttribute('fill', 'rgb(' + bmFloor(itemData.c.v[0]) + ',' + bmFloor(itemData.c.v[1]) + ',' + bmFloor(itemData.c.v[2]) + ')');
}
if (itemData.o._mdf || isFirstFrame) {
styleElem.pElem.setAttribute('fill-opacity', itemData.o.v);
}
}
function renderGradientStroke(styleData, itemData, isFirstFrame) {
renderGradient(styleData, itemData, isFirstFrame);
renderStroke(styleData, itemData, isFirstFrame);
}
function renderGradient(styleData, itemData, isFirstFrame) {
var gfill = itemData.gf;
var hasOpacity = itemData.g._hasOpacity;
var pt1 = itemData.s.v;
var pt2 = itemData.e.v;
if (itemData.o._mdf || isFirstFrame) {
var attr = styleData.ty === 'gf' ? 'fill-opacity' : 'stroke-opacity';
itemData.style.pElem.setAttribute(attr, itemData.o.v);
}
if (itemData.s._mdf || isFirstFrame) {
var attr1 = styleData.t === 1 ? 'x1' : 'cx';
var attr2 = attr1 === 'x1' ? 'y1' : 'cy';
gfill.setAttribute(attr1, pt1[0]);
gfill.setAttribute(attr2, pt1[1]);
if (hasOpacity && !itemData.g._collapsable) {
itemData.of.setAttribute(attr1, pt1[0]);
itemData.of.setAttribute(attr2, pt1[1]);
}
}
var stops;
var i;
var len;
var stop;
if (itemData.g._cmdf || isFirstFrame) {
stops = itemData.cst;
var cValues = itemData.g.c;
len = stops.length;
for (i = 0; i < len; i += 1) {
stop = stops[i];
stop.setAttribute('offset', cValues[i * 4] + '%');
stop.setAttribute('stop-color', 'rgb(' + cValues[i * 4 + 1] + ',' + cValues[i * 4 + 2] + ',' + cValues[i * 4 + 3] + ')');
}
}
if (hasOpacity && (itemData.g._omdf || isFirstFrame)) {
var oValues = itemData.g.o;
if (itemData.g._collapsable) {
stops = itemData.cst;
} else {
stops = itemData.ost;
}
len = stops.length;
for (i = 0; i < len; i += 1) {
stop = stops[i];
if (!itemData.g._collapsable) {
stop.setAttribute('offset', oValues[i * 2] + '%');
}
stop.setAttribute('stop-opacity', oValues[i * 2 + 1]);
}
}
if (styleData.t === 1) {
if (itemData.e._mdf || isFirstFrame) {
gfill.setAttribute('x2', pt2[0]);
gfill.setAttribute('y2', pt2[1]);
if (hasOpacity && !itemData.g._collapsable) {
itemData.of.setAttribute('x2', pt2[0]);
itemData.of.setAttribute('y2', pt2[1]);
}
}
} else {
var rad;
if (itemData.s._mdf || itemData.e._mdf || isFirstFrame) {
rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
gfill.setAttribute('r', rad);
if (hasOpacity && !itemData.g._collapsable) {
itemData.of.setAttribute('r', rad);
}
}
if (itemData.e._mdf || itemData.h._mdf || itemData.a._mdf || isFirstFrame) {
if (!rad) {
rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
}
var ang = Math.atan2(pt2[1] - pt1[1], pt2[0] - pt1[0]);
var percent = itemData.h.v;
if (percent >= 1) {
percent = 0.99;
} else if (percent <= -1) {
percent = -0.99;
}
var dist = rad * percent;
var x = Math.cos(ang + itemData.a.v) * dist + pt1[0];
var y = Math.sin(ang + itemData.a.v) * dist + pt1[1];
gfill.setAttribute('fx', x);
gfill.setAttribute('fy', y);
if (hasOpacity && !itemData.g._collapsable) {
itemData.of.setAttribute('fx', x);
itemData.of.setAttribute('fy', y);
}
}
// gfill.setAttribute('fy','200');
}
}
function renderStroke(styleData, itemData, isFirstFrame) {
var styleElem = itemData.style;
var d = itemData.d;
if (d && (d._mdf || isFirstFrame) && d.dashStr) {
styleElem.pElem.setAttribute('stroke-dasharray', d.dashStr);
styleElem.pElem.setAttribute('stroke-dashoffset', d.dashoffset[0]);
}
if (itemData.c && (itemData.c._mdf || isFirstFrame)) {
styleElem.pElem.setAttribute('stroke', 'rgb(' + bmFloor(itemData.c.v[0]) + ',' + bmFloor(itemData.c.v[1]) + ',' + bmFloor(itemData.c.v[2]) + ')');
}
if (itemData.o._mdf || isFirstFrame) {
styleElem.pElem.setAttribute('stroke-opacity', itemData.o.v);
}
if (itemData.w._mdf || isFirstFrame) {
styleElem.pElem.setAttribute('stroke-width', itemData.w.v);
if (styleElem.msElem) {
styleElem.msElem.setAttribute('stroke-width', itemData.w.v);
}
}
}
return ob;
}());
export default SVGElementsRenderer;

View File

@@ -0,0 +1,18 @@
import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
import {
extendPrototype,
} from '../../../utils/functionExtensions';
import PropertyFactory from '../../../utils/PropertyFactory';
function SVGFillStyleData(elem, data, styleOb) {
this.initDynamicPropertyContainer(elem);
this.getValue = this.iterateDynamicProperties;
this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);
this.c = PropertyFactory.getProp(elem, data.c, 1, 255, this);
this.style = styleOb;
}
extendPrototype([DynamicPropertyContainer], SVGFillStyleData);
export default SVGFillStyleData;

View File

@@ -0,0 +1,100 @@
import {
degToRads,
createElementID,
} from '../../../utils/common';
import { getLocationHref } from '../../../main';
import {
extendPrototype,
} from '../../../utils/functionExtensions';
import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
import PropertyFactory from '../../../utils/PropertyFactory';
import createNS from '../../../utils/helpers/svg_elements';
import GradientProperty from '../../../utils/shapes/GradientProperty';
import {
lineCapEnum,
lineJoinEnum,
} from '../../../utils/helpers/shapeEnums';
function SVGGradientFillStyleData(elem, data, styleOb) {
this.initDynamicPropertyContainer(elem);
this.getValue = this.iterateDynamicProperties;
this.initGradientData(elem, data, styleOb);
}
SVGGradientFillStyleData.prototype.initGradientData = function (elem, data, styleOb) {
this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);
this.s = PropertyFactory.getProp(elem, data.s, 1, null, this);
this.e = PropertyFactory.getProp(elem, data.e, 1, null, this);
this.h = PropertyFactory.getProp(elem, data.h || { k: 0 }, 0, 0.01, this);
this.a = PropertyFactory.getProp(elem, data.a || { k: 0 }, 0, degToRads, this);
this.g = new GradientProperty(elem, data.g, this);
this.style = styleOb;
this.stops = [];
this.setGradientData(styleOb.pElem, data);
this.setGradientOpacity(data, styleOb);
this._isAnimated = !!this._isAnimated;
};
SVGGradientFillStyleData.prototype.setGradientData = function (pathElement, data) {
var gradientId = createElementID();
var gfill = createNS(data.t === 1 ? 'linearGradient' : 'radialGradient');
gfill.setAttribute('id', gradientId);
gfill.setAttribute('spreadMethod', 'pad');
gfill.setAttribute('gradientUnits', 'userSpaceOnUse');
var stops = [];
var stop;
var j;
var jLen;
jLen = data.g.p * 4;
for (j = 0; j < jLen; j += 4) {
stop = createNS('stop');
gfill.appendChild(stop);
stops.push(stop);
}
pathElement.setAttribute(data.ty === 'gf' ? 'fill' : 'stroke', 'url(' + getLocationHref() + '#' + gradientId + ')');
this.gf = gfill;
this.cst = stops;
};
SVGGradientFillStyleData.prototype.setGradientOpacity = function (data, styleOb) {
if (this.g._hasOpacity && !this.g._collapsable) {
var stop;
var j;
var jLen;
var mask = createNS('mask');
var maskElement = createNS('path');
mask.appendChild(maskElement);
var opacityId = createElementID();
var maskId = createElementID();
mask.setAttribute('id', maskId);
var opFill = createNS(data.t === 1 ? 'linearGradient' : 'radialGradient');
opFill.setAttribute('id', opacityId);
opFill.setAttribute('spreadMethod', 'pad');
opFill.setAttribute('gradientUnits', 'userSpaceOnUse');
jLen = data.g.k.k[0].s ? data.g.k.k[0].s.length : data.g.k.k.length;
var stops = this.stops;
for (j = data.g.p * 4; j < jLen; j += 2) {
stop = createNS('stop');
stop.setAttribute('stop-color', 'rgb(255,255,255)');
opFill.appendChild(stop);
stops.push(stop);
}
maskElement.setAttribute(data.ty === 'gf' ? 'fill' : 'stroke', 'url(' + getLocationHref() + '#' + opacityId + ')');
if (data.ty === 'gs') {
maskElement.setAttribute('stroke-linecap', lineCapEnum[data.lc || 2]);
maskElement.setAttribute('stroke-linejoin', lineJoinEnum[data.lj || 2]);
if (data.lj === 1) {
maskElement.setAttribute('stroke-miterlimit', data.ml);
}
}
this.of = opFill;
this.ms = mask;
this.ost = stops;
this.maskId = maskId;
styleOb.msElem = maskElement;
}
};
extendPrototype([DynamicPropertyContainer], SVGGradientFillStyleData);
export default SVGGradientFillStyleData;

View File

@@ -0,0 +1,20 @@
import {
extendPrototype,
} from '../../../utils/functionExtensions';
import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
import PropertyFactory from '../../../utils/PropertyFactory';
import DashProperty from '../../../utils/shapes/DashProperty';
import SVGGradientFillStyleData from './SVGGradientFillStyleData';
function SVGGradientStrokeStyleData(elem, data, styleOb) {
this.initDynamicPropertyContainer(elem);
this.getValue = this.iterateDynamicProperties;
this.w = PropertyFactory.getProp(elem, data.w, 0, null, this);
this.d = new DashProperty(elem, data.d || {}, 'svg', this);
this.initGradientData(elem, data, styleOb);
this._isAnimated = !!this._isAnimated;
}
extendPrototype([SVGGradientFillStyleData, DynamicPropertyContainer], SVGGradientStrokeStyleData);
export default SVGGradientStrokeStyleData;

View File

@@ -0,0 +1,15 @@
import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
import {
extendPrototype,
} from '../../../utils/functionExtensions';
function SVGNoStyleData(elem, data, styleOb) {
this.initDynamicPropertyContainer(elem);
this.getValue = this.iterateDynamicProperties;
this.style = styleOb;
}
extendPrototype([DynamicPropertyContainer], SVGNoStyleData);
export default SVGNoStyleData;

View File

@@ -0,0 +1,28 @@
function SVGShapeData(transformers, level, shape) {
this.caches = [];
this.styles = [];
this.transformers = transformers;
this.lStr = '';
this.sh = shape;
this.lvl = level;
// TODO find if there are some cases where _isAnimated can be false.
// For now, since shapes add up with other shapes. They have to be calculated every time.
// One way of finding out is checking if all styles associated to this shape depend only of this shape
this._isAnimated = !!shape.k;
// TODO: commenting this for now since all shapes are animated
var i = 0;
var len = transformers.length;
while (i < len) {
if (transformers[i].mProps.dynamicProperties.length) {
this._isAnimated = true;
break;
}
i += 1;
}
}
SVGShapeData.prototype.setAsAnimated = function () {
this._isAnimated = true;
};
export default SVGShapeData;

View File

@@ -0,0 +1,21 @@
import {
extendPrototype,
} from '../../../utils/functionExtensions';
import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
import PropertyFactory from '../../../utils/PropertyFactory';
import DashProperty from '../../../utils/shapes/DashProperty';
function SVGStrokeStyleData(elem, data, styleOb) {
this.initDynamicPropertyContainer(elem);
this.getValue = this.iterateDynamicProperties;
this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);
this.w = PropertyFactory.getProp(elem, data.w, 0, null, this);
this.d = new DashProperty(elem, data.d || {}, 'svg', this);
this.c = PropertyFactory.getProp(elem, data.c, 1, 255, this);
this.style = styleOb;
this._isAnimated = !!this._isAnimated;
}
extendPrototype([DynamicPropertyContainer], SVGStrokeStyleData);
export default SVGStrokeStyleData;

View File

@@ -0,0 +1,19 @@
import createNS from '../../../utils/helpers/svg_elements';
function SVGStyleData(data, level) {
this.data = data;
this.type = data.ty;
this.d = '';
this.lvl = level;
this._mdf = false;
this.closed = data.hd === true;
this.pElem = createNS('path');
this.msElem = null;
}
SVGStyleData.prototype.reset = function () {
this.d = '';
this._mdf = false;
};
export default SVGStyleData;

View File

@@ -0,0 +1,11 @@
function SVGTransformData(mProps, op, container) {
this.transform = {
mProps: mProps,
op: op,
container: container,
};
this.elements = [];
this._isAnimated = this.transform.mProps.dynamicProperties.length || this.transform.op.effectsSequence.length;
}
export default SVGTransformData;

View File

@@ -0,0 +1,5 @@
function ShapeElementData() {
}
export default ShapeElementData;

View File

@@ -0,0 +1,9 @@
import createNS from '../../../utils/helpers/svg_elements';
function ShapeGroupData() {
this.it = [];
this.prevViewData = [];
this.gr = createNS('g');
}
export default ShapeGroupData;

View File

@@ -0,0 +1,61 @@
import Matrix from '../../../3rd_party/transformation-matrix';
function ShapeTransformManager() {
this.sequences = {};
this.sequenceList = [];
this.transform_key_count = 0;
}
ShapeTransformManager.prototype = {
addTransformSequence: function (transforms) {
var i;
var len = transforms.length;
var key = '_';
for (i = 0; i < len; i += 1) {
key += transforms[i].transform.key + '_';
}
var sequence = this.sequences[key];
if (!sequence) {
sequence = {
transforms: [].concat(transforms),
finalTransform: new Matrix(),
_mdf: false,
};
this.sequences[key] = sequence;
this.sequenceList.push(sequence);
}
return sequence;
},
processSequence: function (sequence, isFirstFrame) {
var i = 0;
var len = sequence.transforms.length;
var _mdf = isFirstFrame;
while (i < len && !isFirstFrame) {
if (sequence.transforms[i].transform.mProps._mdf) {
_mdf = true;
break;
}
i += 1;
}
if (_mdf) {
sequence.finalTransform.reset();
for (i = len - 1; i >= 0; i -= 1) {
sequence.finalTransform.multiply(sequence.transforms[i].transform.mProps.v);
}
}
sequence._mdf = _mdf;
},
processSequences: function (isFirstFrame) {
var i;
var len = this.sequenceList.length;
for (i = 0; i < len; i += 1) {
this.processSequence(this.sequenceList[i], isFirstFrame);
}
},
getNewKey: function () {
this.transform_key_count += 1;
return '_' + this.transform_key_count;
},
};
export default ShapeTransformManager;

View File

@@ -0,0 +1,88 @@
import {
styleDiv,
} from '../../utils/common';
import createNS from '../../utils/helpers/svg_elements';
import createTag from '../../utils/helpers/html_elements';
import BaseRenderer from '../../renderers/BaseRenderer';
import SVGBaseElement from '../svgElements/SVGBaseElement';
import CVEffects from '../canvasElements/CVEffects';
import MaskElement from '../../mask';
function HBaseElement() {}
HBaseElement.prototype = {
checkBlendMode: function () {},
initRendererElement: function () {
this.baseElement = createTag(this.data.tg || 'div');
if (this.data.hasMask) {
this.svgElement = createNS('svg');
this.layerElement = createNS('g');
this.maskedElement = this.layerElement;
this.svgElement.appendChild(this.layerElement);
this.baseElement.appendChild(this.svgElement);
} else {
this.layerElement = this.baseElement;
}
styleDiv(this.baseElement);
},
createContainerElements: function () {
this.renderableEffectsManager = new CVEffects(this);
this.transformedElement = this.baseElement;
this.maskedElement = this.layerElement;
if (this.data.ln) {
this.layerElement.setAttribute('id', this.data.ln);
}
if (this.data.cl) {
this.layerElement.setAttribute('class', this.data.cl);
}
if (this.data.bm !== 0) {
this.setBlendMode();
}
},
renderElement: function () {
var transformedElementStyle = this.transformedElement ? this.transformedElement.style : {};
if (this.finalTransform._matMdf) {
var matrixValue = this.finalTransform.mat.toCSS();
transformedElementStyle.transform = matrixValue;
transformedElementStyle.webkitTransform = matrixValue;
}
if (this.finalTransform._opMdf) {
transformedElementStyle.opacity = this.finalTransform.mProp.o.v;
}
},
renderFrame: function () {
// If it is exported as hidden (data.hd === true) no need to render
// If it is not visible no need to render
if (this.data.hd || this.hidden) {
return;
}
this.renderTransform();
this.renderRenderable();
this.renderElement();
this.renderInnerContent();
if (this._isFirstFrame) {
this._isFirstFrame = false;
}
},
destroy: function () {
this.layerElement = null;
this.transformedElement = null;
if (this.matteElement) {
this.matteElement = null;
}
if (this.maskManager) {
this.maskManager.destroy();
this.maskManager = null;
}
},
createRenderableComponents: function () {
this.maskManager = new MaskElement(this.data, this, this.globalData);
},
addEffects: function () {
},
setMatte: function () {},
};
HBaseElement.prototype.getBaseElement = SVGBaseElement.prototype.getBaseElement;
HBaseElement.prototype.destroyBaseElement = HBaseElement.prototype.destroy;
HBaseElement.prototype.buildElementParenting = BaseRenderer.prototype.buildElementParenting;
export default HBaseElement;

View File

@@ -0,0 +1,170 @@
import {
degToRads,
} from '../../utils/common';
import {
extendPrototype,
} from '../../utils/functionExtensions';
import PropertyFactory from '../../utils/PropertyFactory';
import BaseElement from '../BaseElement';
import HierarchyElement from '../helpers/HierarchyElement';
import FrameElement from '../helpers/FrameElement';
import Matrix from '../../3rd_party/transformation-matrix';
function HCameraElement(data, globalData, comp) {
this.initFrame();
this.initBaseData(data, globalData, comp);
this.initHierarchy();
var getProp = PropertyFactory.getProp;
this.pe = getProp(this, data.pe, 0, 0, this);
if (data.ks.p.s) {
this.px = getProp(this, data.ks.p.x, 1, 0, this);
this.py = getProp(this, data.ks.p.y, 1, 0, this);
this.pz = getProp(this, data.ks.p.z, 1, 0, this);
} else {
this.p = getProp(this, data.ks.p, 1, 0, this);
}
if (data.ks.a) {
this.a = getProp(this, data.ks.a, 1, 0, this);
}
if (data.ks.or.k.length && data.ks.or.k[0].to) {
var i;
var len = data.ks.or.k.length;
for (i = 0; i < len; i += 1) {
data.ks.or.k[i].to = null;
data.ks.or.k[i].ti = null;
}
}
this.or = getProp(this, data.ks.or, 1, degToRads, this);
this.or.sh = true;
this.rx = getProp(this, data.ks.rx, 0, degToRads, this);
this.ry = getProp(this, data.ks.ry, 0, degToRads, this);
this.rz = getProp(this, data.ks.rz, 0, degToRads, this);
this.mat = new Matrix();
this._prevMat = new Matrix();
this._isFirstFrame = true;
// TODO: find a better way to make the HCamera element to be compatible with the LayerInterface and TransformInterface.
this.finalTransform = {
mProp: this,
};
}
extendPrototype([BaseElement, FrameElement, HierarchyElement], HCameraElement);
HCameraElement.prototype.setup = function () {
var i;
var len = this.comp.threeDElements.length;
var comp;
var perspectiveStyle;
var containerStyle;
for (i = 0; i < len; i += 1) {
// [perspectiveElem,container]
comp = this.comp.threeDElements[i];
if (comp.type === '3d') {
perspectiveStyle = comp.perspectiveElem.style;
containerStyle = comp.container.style;
var perspective = this.pe.v + 'px';
var origin = '0px 0px 0px';
var matrix = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
perspectiveStyle.perspective = perspective;
perspectiveStyle.webkitPerspective = perspective;
containerStyle.transformOrigin = origin;
containerStyle.mozTransformOrigin = origin;
containerStyle.webkitTransformOrigin = origin;
perspectiveStyle.transform = matrix;
perspectiveStyle.webkitTransform = matrix;
}
}
};
HCameraElement.prototype.createElements = function () {
};
HCameraElement.prototype.hide = function () {
};
HCameraElement.prototype.renderFrame = function () {
var _mdf = this._isFirstFrame;
var i;
var len;
if (this.hierarchy) {
len = this.hierarchy.length;
for (i = 0; i < len; i += 1) {
_mdf = this.hierarchy[i].finalTransform.mProp._mdf || _mdf;
}
}
if (_mdf || this.pe._mdf || (this.p && this.p._mdf) || (this.px && (this.px._mdf || this.py._mdf || this.pz._mdf)) || this.rx._mdf || this.ry._mdf || this.rz._mdf || this.or._mdf || (this.a && this.a._mdf)) {
this.mat.reset();
if (this.hierarchy) {
len = this.hierarchy.length - 1;
for (i = len; i >= 0; i -= 1) {
var mTransf = this.hierarchy[i].finalTransform.mProp;
this.mat.translate(-mTransf.p.v[0], -mTransf.p.v[1], mTransf.p.v[2]);
this.mat.rotateX(-mTransf.or.v[0]).rotateY(-mTransf.or.v[1]).rotateZ(mTransf.or.v[2]);
this.mat.rotateX(-mTransf.rx.v).rotateY(-mTransf.ry.v).rotateZ(mTransf.rz.v);
this.mat.scale(1 / mTransf.s.v[0], 1 / mTransf.s.v[1], 1 / mTransf.s.v[2]);
this.mat.translate(mTransf.a.v[0], mTransf.a.v[1], mTransf.a.v[2]);
}
}
if (this.p) {
this.mat.translate(-this.p.v[0], -this.p.v[1], this.p.v[2]);
} else {
this.mat.translate(-this.px.v, -this.py.v, this.pz.v);
}
if (this.a) {
var diffVector;
if (this.p) {
diffVector = [this.p.v[0] - this.a.v[0], this.p.v[1] - this.a.v[1], this.p.v[2] - this.a.v[2]];
} else {
diffVector = [this.px.v - this.a.v[0], this.py.v - this.a.v[1], this.pz.v - this.a.v[2]];
}
var mag = Math.sqrt(Math.pow(diffVector[0], 2) + Math.pow(diffVector[1], 2) + Math.pow(diffVector[2], 2));
// var lookDir = getNormalizedPoint(getDiffVector(this.a.v,this.p.v));
var lookDir = [diffVector[0] / mag, diffVector[1] / mag, diffVector[2] / mag];
var lookLengthOnXZ = Math.sqrt(lookDir[2] * lookDir[2] + lookDir[0] * lookDir[0]);
var mRotationX = (Math.atan2(lookDir[1], lookLengthOnXZ));
var mRotationY = (Math.atan2(lookDir[0], -lookDir[2]));
this.mat.rotateY(mRotationY).rotateX(-mRotationX);
}
this.mat.rotateX(-this.rx.v).rotateY(-this.ry.v).rotateZ(this.rz.v);
this.mat.rotateX(-this.or.v[0]).rotateY(-this.or.v[1]).rotateZ(this.or.v[2]);
this.mat.translate(this.globalData.compSize.w / 2, this.globalData.compSize.h / 2, 0);
this.mat.translate(0, 0, this.pe.v);
var hasMatrixChanged = !this._prevMat.equals(this.mat);
if ((hasMatrixChanged || this.pe._mdf) && this.comp.threeDElements) {
len = this.comp.threeDElements.length;
var comp;
var perspectiveStyle;
var containerStyle;
for (i = 0; i < len; i += 1) {
comp = this.comp.threeDElements[i];
if (comp.type === '3d') {
if (hasMatrixChanged) {
var matValue = this.mat.toCSS();
containerStyle = comp.container.style;
containerStyle.transform = matValue;
containerStyle.webkitTransform = matValue;
}
if (this.pe._mdf) {
perspectiveStyle = comp.perspectiveElem.style;
perspectiveStyle.perspective = this.pe.v + 'px';
perspectiveStyle.webkitPerspective = this.pe.v + 'px';
}
}
}
this.mat.clone(this._prevMat);
}
}
this._isFirstFrame = false;
};
HCameraElement.prototype.prepareFrame = function (num) {
this.prepareProperties(num, true);
};
HCameraElement.prototype.destroy = function () {
};
HCameraElement.prototype.getBaseElement = function () { return null; };
export default HCameraElement;

View File

@@ -0,0 +1,61 @@
import {
extendPrototype,
} from '../../utils/functionExtensions';
import {
createSizedArray,
} from '../../utils/helpers/arrays';
import PropertyFactory from '../../utils/PropertyFactory';
import HybridRendererBase from '../../renderers/HybridRendererBase';
import HBaseElement from './HBaseElement';
import ICompElement from '../CompElement';
import SVGCompElement from '../svgElements/SVGCompElement';
function HCompElement(data, globalData, comp) {
this.layers = data.layers;
this.supports3d = !data.hasMask;
this.completeLayers = false;
this.pendingElements = [];
this.elements = this.layers ? createSizedArray(this.layers.length) : [];
this.initElement(data, globalData, comp);
this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : { _placeholder: true };
}
extendPrototype([HybridRendererBase, ICompElement, HBaseElement], HCompElement);
HCompElement.prototype._createBaseContainerElements = HCompElement.prototype.createContainerElements;
HCompElement.prototype.createContainerElements = function () {
this._createBaseContainerElements();
// divElement.style.clip = 'rect(0px, '+this.data.w+'px, '+this.data.h+'px, 0px)';
if (this.data.hasMask) {
this.svgElement.setAttribute('width', this.data.w);
this.svgElement.setAttribute('height', this.data.h);
this.transformedElement = this.baseElement;
} else {
this.transformedElement = this.layerElement;
}
};
HCompElement.prototype.addTo3dContainer = function (elem, pos) {
var j = 0;
var nextElement;
while (j < pos) {
if (this.elements[j] && this.elements[j].getBaseElement) {
nextElement = this.elements[j].getBaseElement();
}
j += 1;
}
if (nextElement) {
this.layerElement.insertBefore(elem, nextElement);
} else {
this.layerElement.appendChild(elem);
}
};
HCompElement.prototype.createComp = function (data) {
if (!this.supports3d) {
return new SVGCompElement(data, this.globalData, this);
}
return new HCompElement(data, this.globalData, this);
};
export default HCompElement;

View File

@@ -0,0 +1,3 @@
function HEffects() {
}
HEffects.prototype.renderFrame = function () {};

View File

@@ -0,0 +1,42 @@
import {
extendPrototype,
} from '../../utils/functionExtensions';
import createNS from '../../utils/helpers/svg_elements';
import RenderableElement from '../helpers/RenderableElement';
import BaseElement from '../BaseElement';
import TransformElement from '../helpers/TransformElement';
import HierarchyElement from '../helpers/HierarchyElement';
import FrameElement from '../helpers/FrameElement';
import HBaseElement from './HBaseElement';
import HSolidElement from './HSolidElement';
function HImageElement(data, globalData, comp) {
this.assetData = globalData.getAssetData(data.refId);
this.initElement(data, globalData, comp);
}
extendPrototype([BaseElement, TransformElement, HBaseElement, HSolidElement, HierarchyElement, FrameElement, RenderableElement], HImageElement);
HImageElement.prototype.createContent = function () {
var assetPath = this.globalData.getAssetsPath(this.assetData);
var img = new Image();
if (this.data.hasMask) {
this.imageElem = createNS('image');
this.imageElem.setAttribute('width', this.assetData.w + 'px');
this.imageElem.setAttribute('height', this.assetData.h + 'px');
this.imageElem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', assetPath);
this.layerElement.appendChild(this.imageElem);
this.baseElement.setAttribute('width', this.assetData.w);
this.baseElement.setAttribute('height', this.assetData.h);
} else {
this.layerElement.appendChild(img);
}
img.crossOrigin = 'anonymous';
img.src = assetPath;
if (this.data.ln) {
this.baseElement.setAttribute('id', this.data.ln);
}
};
export default HImageElement;

View File

@@ -0,0 +1,261 @@
import {
bmPow,
bmMax,
bmMin,
bmSqrt,
} from '../../utils/common';
import {
extendPrototype,
} from '../../utils/functionExtensions';
import createNS from '../../utils/helpers/svg_elements';
import RenderableElement from '../helpers/RenderableElement';
import BaseElement from '../BaseElement';
import TransformElement from '../helpers/TransformElement';
import HierarchyElement from '../helpers/HierarchyElement';
import FrameElement from '../helpers/FrameElement';
import HBaseElement from './HBaseElement';
import HSolidElement from './HSolidElement';
import SVGShapeElement from '../svgElements/SVGShapeElement';
function HShapeElement(data, globalData, comp) {
// List of drawable elements
this.shapes = [];
// Full shape data
this.shapesData = data.shapes;
// List of styles that will be applied to shapes
this.stylesList = [];
// List of modifiers that will be applied to shapes
this.shapeModifiers = [];
// List of items in shape tree
this.itemsData = [];
// List of items in previous shape tree
this.processedElements = [];
// List of animated components
this.animatedContents = [];
this.shapesContainer = createNS('g');
this.initElement(data, globalData, comp);
// Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
// List of elements that have been created
this.prevViewData = [];
this.currentBBox = {
x: 999999,
y: -999999,
h: 0,
w: 0,
};
}
extendPrototype([BaseElement, TransformElement, HSolidElement, SVGShapeElement, HBaseElement, HierarchyElement, FrameElement, RenderableElement], HShapeElement);
HShapeElement.prototype._renderShapeFrame = HShapeElement.prototype.renderInnerContent;
HShapeElement.prototype.createContent = function () {
var cont;
this.baseElement.style.fontSize = 0;
if (this.data.hasMask) {
this.layerElement.appendChild(this.shapesContainer);
cont = this.svgElement;
} else {
cont = createNS('svg');
var size = this.comp.data ? this.comp.data : this.globalData.compSize;
cont.setAttribute('width', size.w);
cont.setAttribute('height', size.h);
cont.appendChild(this.shapesContainer);
this.layerElement.appendChild(cont);
}
this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.shapesContainer, 0, [], true);
this.filterUniqueShapes();
this.shapeCont = cont;
};
HShapeElement.prototype.getTransformedPoint = function (transformers, point) {
var i;
var len = transformers.length;
for (i = 0; i < len; i += 1) {
point = transformers[i].mProps.v.applyToPointArray(point[0], point[1], 0);
}
return point;
};
HShapeElement.prototype.calculateShapeBoundingBox = function (item, boundingBox) {
var shape = item.sh.v;
var transformers = item.transformers;
var i;
var len = shape._length;
var vPoint;
var oPoint;
var nextIPoint;
var nextVPoint;
if (len <= 1) {
return;
}
for (i = 0; i < len - 1; i += 1) {
vPoint = this.getTransformedPoint(transformers, shape.v[i]);
oPoint = this.getTransformedPoint(transformers, shape.o[i]);
nextIPoint = this.getTransformedPoint(transformers, shape.i[i + 1]);
nextVPoint = this.getTransformedPoint(transformers, shape.v[i + 1]);
this.checkBounds(vPoint, oPoint, nextIPoint, nextVPoint, boundingBox);
}
if (shape.c) {
vPoint = this.getTransformedPoint(transformers, shape.v[i]);
oPoint = this.getTransformedPoint(transformers, shape.o[i]);
nextIPoint = this.getTransformedPoint(transformers, shape.i[0]);
nextVPoint = this.getTransformedPoint(transformers, shape.v[0]);
this.checkBounds(vPoint, oPoint, nextIPoint, nextVPoint, boundingBox);
}
};
HShapeElement.prototype.checkBounds = function (vPoint, oPoint, nextIPoint, nextVPoint, boundingBox) {
this.getBoundsOfCurve(vPoint, oPoint, nextIPoint, nextVPoint);
var bounds = this.shapeBoundingBox;
boundingBox.x = bmMin(bounds.left, boundingBox.x);
boundingBox.xMax = bmMax(bounds.right, boundingBox.xMax);
boundingBox.y = bmMin(bounds.top, boundingBox.y);
boundingBox.yMax = bmMax(bounds.bottom, boundingBox.yMax);
};
HShapeElement.prototype.shapeBoundingBox = {
left: 0,
right: 0,
top: 0,
bottom: 0,
};
HShapeElement.prototype.tempBoundingBox = {
x: 0,
xMax: 0,
y: 0,
yMax: 0,
width: 0,
height: 0,
};
HShapeElement.prototype.getBoundsOfCurve = function (p0, p1, p2, p3) {
var bounds = [[p0[0], p3[0]], [p0[1], p3[1]]];
for (var a, b, c, t, b2ac, t1, t2, i = 0; i < 2; ++i) { // eslint-disable-line no-plusplus
b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
c = 3 * p1[i] - 3 * p0[i];
b |= 0; // eslint-disable-line no-bitwise
a |= 0; // eslint-disable-line no-bitwise
c |= 0; // eslint-disable-line no-bitwise
if (a === 0 && b === 0) {
//
} else if (a === 0) {
t = -c / b;
if (t > 0 && t < 1) {
bounds[i].push(this.calculateF(t, p0, p1, p2, p3, i));
}
} else {
b2ac = b * b - 4 * c * a;
if (b2ac >= 0) {
t1 = (-b + bmSqrt(b2ac)) / (2 * a);
if (t1 > 0 && t1 < 1) bounds[i].push(this.calculateF(t1, p0, p1, p2, p3, i));
t2 = (-b - bmSqrt(b2ac)) / (2 * a);
if (t2 > 0 && t2 < 1) bounds[i].push(this.calculateF(t2, p0, p1, p2, p3, i));
}
}
}
this.shapeBoundingBox.left = bmMin.apply(null, bounds[0]);
this.shapeBoundingBox.top = bmMin.apply(null, bounds[1]);
this.shapeBoundingBox.right = bmMax.apply(null, bounds[0]);
this.shapeBoundingBox.bottom = bmMax.apply(null, bounds[1]);
};
HShapeElement.prototype.calculateF = function (t, p0, p1, p2, p3, i) {
return bmPow(1 - t, 3) * p0[i]
+ 3 * bmPow(1 - t, 2) * t * p1[i]
+ 3 * (1 - t) * bmPow(t, 2) * p2[i]
+ bmPow(t, 3) * p3[i];
};
HShapeElement.prototype.calculateBoundingBox = function (itemsData, boundingBox) {
var i;
var len = itemsData.length;
for (i = 0; i < len; i += 1) {
if (itemsData[i] && itemsData[i].sh) {
this.calculateShapeBoundingBox(itemsData[i], boundingBox);
} else if (itemsData[i] && itemsData[i].it) {
this.calculateBoundingBox(itemsData[i].it, boundingBox);
} else if (itemsData[i] && itemsData[i].style && itemsData[i].w) {
this.expandStrokeBoundingBox(itemsData[i].w, boundingBox);
}
}
};
HShapeElement.prototype.expandStrokeBoundingBox = function (widthProperty, boundingBox) {
var width = 0;
if (widthProperty.keyframes) {
for (var i = 0; i < widthProperty.keyframes.length; i += 1) {
var kfw = widthProperty.keyframes[i].s;
if (kfw > width) {
width = kfw;
}
}
width *= widthProperty.mult;
} else {
width = widthProperty.v * widthProperty.mult;
}
boundingBox.x -= width;
boundingBox.xMax += width;
boundingBox.y -= width;
boundingBox.yMax += width;
};
HShapeElement.prototype.currentBoxContains = function (box) {
return this.currentBBox.x <= box.x
&& this.currentBBox.y <= box.y
&& this.currentBBox.width + this.currentBBox.x >= box.x + box.width
&& this.currentBBox.height + this.currentBBox.y >= box.y + box.height;
};
HShapeElement.prototype.renderInnerContent = function () {
this._renderShapeFrame();
if (!this.hidden && (this._isFirstFrame || this._mdf)) {
var tempBoundingBox = this.tempBoundingBox;
var max = 999999;
tempBoundingBox.x = max;
tempBoundingBox.xMax = -max;
tempBoundingBox.y = max;
tempBoundingBox.yMax = -max;
this.calculateBoundingBox(this.itemsData, tempBoundingBox);
tempBoundingBox.width = tempBoundingBox.xMax < tempBoundingBox.x ? 0 : tempBoundingBox.xMax - tempBoundingBox.x;
tempBoundingBox.height = tempBoundingBox.yMax < tempBoundingBox.y ? 0 : tempBoundingBox.yMax - tempBoundingBox.y;
// var tempBoundingBox = this.shapeCont.getBBox();
if (this.currentBoxContains(tempBoundingBox)) {
return;
}
var changed = false;
if (this.currentBBox.w !== tempBoundingBox.width) {
this.currentBBox.w = tempBoundingBox.width;
this.shapeCont.setAttribute('width', tempBoundingBox.width);
changed = true;
}
if (this.currentBBox.h !== tempBoundingBox.height) {
this.currentBBox.h = tempBoundingBox.height;
this.shapeCont.setAttribute('height', tempBoundingBox.height);
changed = true;
}
if (changed || this.currentBBox.x !== tempBoundingBox.x || this.currentBBox.y !== tempBoundingBox.y) {
this.currentBBox.w = tempBoundingBox.width;
this.currentBBox.h = tempBoundingBox.height;
this.currentBBox.x = tempBoundingBox.x;
this.currentBBox.y = tempBoundingBox.y;
this.shapeCont.setAttribute('viewBox', this.currentBBox.x + ' ' + this.currentBBox.y + ' ' + this.currentBBox.w + ' ' + this.currentBBox.h);
var shapeStyle = this.shapeCont.style;
var shapeTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
shapeStyle.transform = shapeTransform;
shapeStyle.webkitTransform = shapeTransform;
}
}
};
export default HShapeElement;

View File

@@ -0,0 +1,36 @@
import {
extendPrototype,
} from '../../utils/functionExtensions';
import createNS from '../../utils/helpers/svg_elements';
import createTag from '../../utils/helpers/html_elements';
import BaseElement from '../BaseElement';
import TransformElement from '../helpers/TransformElement';
import HierarchyElement from '../helpers/HierarchyElement';
import FrameElement from '../helpers/FrameElement';
import RenderableDOMElement from '../helpers/RenderableDOMElement';
import HBaseElement from './HBaseElement';
function HSolidElement(data, globalData, comp) {
this.initElement(data, globalData, comp);
}
extendPrototype([BaseElement, TransformElement, HBaseElement, HierarchyElement, FrameElement, RenderableDOMElement], HSolidElement);
HSolidElement.prototype.createContent = function () {
var rect;
if (this.data.hasMask) {
rect = createNS('rect');
rect.setAttribute('width', this.data.sw);
rect.setAttribute('height', this.data.sh);
rect.setAttribute('fill', this.data.sc);
this.svgElement.setAttribute('width', this.data.sw);
this.svgElement.setAttribute('height', this.data.sh);
} else {
rect = createTag('div');
rect.style.width = this.data.sw + 'px';
rect.style.height = this.data.sh + 'px';
rect.style.backgroundColor = this.data.sc;
}
this.layerElement.appendChild(rect);
};
export default HSolidElement;

View File

@@ -0,0 +1,290 @@
import {
extendPrototype,
} from '../../utils/functionExtensions';
import {
createSizedArray,
} from '../../utils/helpers/arrays';
import createNS from '../../utils/helpers/svg_elements';
import createTag from '../../utils/helpers/html_elements';
import BaseElement from '../BaseElement';
import TransformElement from '../helpers/TransformElement';
import HierarchyElement from '../helpers/HierarchyElement';
import FrameElement from '../helpers/FrameElement';
import RenderableDOMElement from '../helpers/RenderableDOMElement';
import ITextElement from '../TextElement';
import HBaseElement from './HBaseElement';
import {
lineCapEnum,
lineJoinEnum,
} from '../../utils/helpers/shapeEnums';
import {
styleDiv,
} from '../../utils/common';
function HTextElement(data, globalData, comp) {
this.textSpans = [];
this.textPaths = [];
this.currentBBox = {
x: 999999,
y: -999999,
h: 0,
w: 0,
};
this.renderType = 'svg';
this.isMasked = false;
this.initElement(data, globalData, comp);
}
extendPrototype([BaseElement, TransformElement, HBaseElement, HierarchyElement, FrameElement, RenderableDOMElement, ITextElement], HTextElement);
HTextElement.prototype.createContent = function () {
this.isMasked = this.checkMasks();
if (this.isMasked) {
this.renderType = 'svg';
this.compW = this.comp.data.w;
this.compH = this.comp.data.h;
this.svgElement.setAttribute('width', this.compW);
this.svgElement.setAttribute('height', this.compH);
var g = createNS('g');
this.maskedElement.appendChild(g);
this.innerElem = g;
} else {
this.renderType = 'html';
this.innerElem = this.layerElement;
}
this.checkParenting();
};
HTextElement.prototype.buildNewText = function () {
var documentData = this.textProperty.currentData;
this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0);
var innerElemStyle = this.innerElem.style;
var textColor = documentData.fc ? this.buildColor(documentData.fc) : 'rgba(0,0,0,0)';
innerElemStyle.fill = textColor;
innerElemStyle.color = textColor;
if (documentData.sc) {
innerElemStyle.stroke = this.buildColor(documentData.sc);
innerElemStyle.strokeWidth = documentData.sw + 'px';
}
var fontData = this.globalData.fontManager.getFontByName(documentData.f);
if (!this.globalData.fontManager.chars) {
innerElemStyle.fontSize = documentData.finalSize + 'px';
innerElemStyle.lineHeight = documentData.finalSize + 'px';
if (fontData.fClass) {
this.innerElem.className = fontData.fClass;
} else {
innerElemStyle.fontFamily = fontData.fFamily;
var fWeight = documentData.fWeight;
var fStyle = documentData.fStyle;
innerElemStyle.fontStyle = fStyle;
innerElemStyle.fontWeight = fWeight;
}
}
var i;
var len;
var letters = documentData.l;
len = letters.length;
var tSpan;
var tParent;
var tCont;
var matrixHelper = this.mHelper;
var shapes;
var shapeStr = '';
var cnt = 0;
for (i = 0; i < len; i += 1) {
if (this.globalData.fontManager.chars) {
if (!this.textPaths[cnt]) {
tSpan = createNS('path');
tSpan.setAttribute('stroke-linecap', lineCapEnum[1]);
tSpan.setAttribute('stroke-linejoin', lineJoinEnum[2]);
tSpan.setAttribute('stroke-miterlimit', '4');
} else {
tSpan = this.textPaths[cnt];
}
if (!this.isMasked) {
if (this.textSpans[cnt]) {
tParent = this.textSpans[cnt];
tCont = tParent.children[0];
} else {
tParent = createTag('div');
tParent.style.lineHeight = 0;
tCont = createNS('svg');
tCont.appendChild(tSpan);
styleDiv(tParent);
}
}
} else if (!this.isMasked) {
if (this.textSpans[cnt]) {
tParent = this.textSpans[cnt];
tSpan = this.textPaths[cnt];
} else {
tParent = createTag('span');
styleDiv(tParent);
tSpan = createTag('span');
styleDiv(tSpan);
tParent.appendChild(tSpan);
}
} else {
tSpan = this.textPaths[cnt] ? this.textPaths[cnt] : createNS('text');
}
// tSpan.setAttribute('visibility', 'hidden');
if (this.globalData.fontManager.chars) {
var charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
var shapeData;
if (charData) {
shapeData = charData.data;
} else {
shapeData = null;
}
matrixHelper.reset();
if (shapeData && shapeData.shapes && shapeData.shapes.length) {
shapes = shapeData.shapes[0].it;
matrixHelper.scale(documentData.finalSize / 100, documentData.finalSize / 100);
shapeStr = this.createPathShape(matrixHelper, shapes);
tSpan.setAttribute('d', shapeStr);
}
if (!this.isMasked) {
this.innerElem.appendChild(tParent);
if (shapeData && shapeData.shapes) {
// document.body.appendChild is needed to get exact measure of shape
document.body.appendChild(tCont);
var boundingBox = tCont.getBBox();
tCont.setAttribute('width', boundingBox.width + 2);
tCont.setAttribute('height', boundingBox.height + 2);
tCont.setAttribute('viewBox', (boundingBox.x - 1) + ' ' + (boundingBox.y - 1) + ' ' + (boundingBox.width + 2) + ' ' + (boundingBox.height + 2));
var tContStyle = tCont.style;
var tContTranslation = 'translate(' + (boundingBox.x - 1) + 'px,' + (boundingBox.y - 1) + 'px)';
tContStyle.transform = tContTranslation;
tContStyle.webkitTransform = tContTranslation;
letters[i].yOffset = boundingBox.y - 1;
} else {
tCont.setAttribute('width', 1);
tCont.setAttribute('height', 1);
}
tParent.appendChild(tCont);
} else {
this.innerElem.appendChild(tSpan);
}
} else {
tSpan.textContent = letters[i].val;
tSpan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
if (!this.isMasked) {
this.innerElem.appendChild(tParent);
//
var tStyle = tSpan.style;
var tSpanTranslation = 'translate3d(0,' + -documentData.finalSize / 1.2 + 'px,0)';
tStyle.transform = tSpanTranslation;
tStyle.webkitTransform = tSpanTranslation;
} else {
this.innerElem.appendChild(tSpan);
}
}
//
if (!this.isMasked) {
this.textSpans[cnt] = tParent;
} else {
this.textSpans[cnt] = tSpan;
}
this.textSpans[cnt].style.display = 'block';
this.textPaths[cnt] = tSpan;
cnt += 1;
}
while (cnt < this.textSpans.length) {
this.textSpans[cnt].style.display = 'none';
cnt += 1;
}
};
HTextElement.prototype.renderInnerContent = function () {
this.validateText();
var svgStyle;
if (this.data.singleShape) {
if (!this._isFirstFrame && !this.lettersChangedFlag) {
return;
} if (this.isMasked && this.finalTransform._matMdf) {
// Todo Benchmark if using this is better than getBBox
this.svgElement.setAttribute('viewBox', -this.finalTransform.mProp.p.v[0] + ' ' + -this.finalTransform.mProp.p.v[1] + ' ' + this.compW + ' ' + this.compH);
svgStyle = this.svgElement.style;
var translation = 'translate(' + -this.finalTransform.mProp.p.v[0] + 'px,' + -this.finalTransform.mProp.p.v[1] + 'px)';
svgStyle.transform = translation;
svgStyle.webkitTransform = translation;
}
}
this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
if (!this.lettersChangedFlag && !this.textAnimator.lettersChangedFlag) {
return;
}
var i;
var len;
var count = 0;
var renderedLetters = this.textAnimator.renderedLetters;
var letters = this.textProperty.currentData.l;
len = letters.length;
var renderedLetter;
var textSpan;
var textPath;
for (i = 0; i < len; i += 1) {
if (letters[i].n) {
count += 1;
} else {
textSpan = this.textSpans[i];
textPath = this.textPaths[i];
renderedLetter = renderedLetters[count];
count += 1;
if (renderedLetter._mdf.m) {
if (!this.isMasked) {
textSpan.style.webkitTransform = renderedLetter.m;
textSpan.style.transform = renderedLetter.m;
} else {
textSpan.setAttribute('transform', renderedLetter.m);
}
}
/// /textSpan.setAttribute('opacity',renderedLetter.o);
textSpan.style.opacity = renderedLetter.o;
if (renderedLetter.sw && renderedLetter._mdf.sw) {
textPath.setAttribute('stroke-width', renderedLetter.sw);
}
if (renderedLetter.sc && renderedLetter._mdf.sc) {
textPath.setAttribute('stroke', renderedLetter.sc);
}
if (renderedLetter.fc && renderedLetter._mdf.fc) {
textPath.setAttribute('fill', renderedLetter.fc);
textPath.style.color = renderedLetter.fc;
}
}
}
if (this.innerElem.getBBox && !this.hidden && (this._isFirstFrame || this._mdf)) {
var boundingBox = this.innerElem.getBBox();
if (this.currentBBox.w !== boundingBox.width) {
this.currentBBox.w = boundingBox.width;
this.svgElement.setAttribute('width', boundingBox.width);
}
if (this.currentBBox.h !== boundingBox.height) {
this.currentBBox.h = boundingBox.height;
this.svgElement.setAttribute('height', boundingBox.height);
}
var margin = 1;
if (this.currentBBox.w !== (boundingBox.width + margin * 2) || this.currentBBox.h !== (boundingBox.height + margin * 2) || this.currentBBox.x !== (boundingBox.x - margin) || this.currentBBox.y !== (boundingBox.y - margin)) {
this.currentBBox.w = boundingBox.width + margin * 2;
this.currentBBox.h = boundingBox.height + margin * 2;
this.currentBBox.x = boundingBox.x - margin;
this.currentBBox.y = boundingBox.y - margin;
this.svgElement.setAttribute('viewBox', this.currentBBox.x + ' ' + this.currentBBox.y + ' ' + this.currentBBox.w + ' ' + this.currentBBox.h);
svgStyle = this.svgElement.style;
var svgTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
svgStyle.transform = svgTransform;
svgStyle.webkitTransform = svgTransform;
}
}
};
export default HTextElement;

View File

@@ -0,0 +1,181 @@
import { getLocationHref } from '../../main';
import {
createElementID,
} from '../../utils/common';
import createNS from '../../utils/helpers/svg_elements';
import MaskElement from '../../mask';
import filtersFactory from '../../utils/filters';
import featureSupport from '../../utils/featureSupport';
import SVGEffects from './SVGEffects';
function SVGBaseElement() {
}
SVGBaseElement.prototype = {
initRendererElement: function () {
this.layerElement = createNS('g');
},
createContainerElements: function () {
this.matteElement = createNS('g');
this.transformedElement = this.layerElement;
this.maskedElement = this.layerElement;
this._sizeChanged = false;
var layerElementParent = null;
// If this layer acts as a mask for the following layer
if (this.data.td) {
this.matteMasks = {};
var gg = createNS('g');
gg.setAttribute('id', this.layerId);
gg.appendChild(this.layerElement);
layerElementParent = gg;
this.globalData.defs.appendChild(gg);
} else if (this.data.tt) {
this.matteElement.appendChild(this.layerElement);
layerElementParent = this.matteElement;
this.baseElement = this.matteElement;
} else {
this.baseElement = this.layerElement;
}
if (this.data.ln) {
this.layerElement.setAttribute('id', this.data.ln);
}
if (this.data.cl) {
this.layerElement.setAttribute('class', this.data.cl);
}
// Clipping compositions to hide content that exceeds boundaries. If collapsed transformations is on, component should not be clipped
if (this.data.ty === 0 && !this.data.hd) {
var cp = createNS('clipPath');
var pt = createNS('path');
pt.setAttribute('d', 'M0,0 L' + this.data.w + ',0 L' + this.data.w + ',' + this.data.h + ' L0,' + this.data.h + 'z');
var clipId = createElementID();
cp.setAttribute('id', clipId);
cp.appendChild(pt);
this.globalData.defs.appendChild(cp);
if (this.checkMasks()) {
var cpGroup = createNS('g');
cpGroup.setAttribute('clip-path', 'url(' + getLocationHref() + '#' + clipId + ')');
cpGroup.appendChild(this.layerElement);
this.transformedElement = cpGroup;
if (layerElementParent) {
layerElementParent.appendChild(this.transformedElement);
} else {
this.baseElement = this.transformedElement;
}
} else {
this.layerElement.setAttribute('clip-path', 'url(' + getLocationHref() + '#' + clipId + ')');
}
}
if (this.data.bm !== 0) {
this.setBlendMode();
}
},
renderElement: function () {
if (this.finalTransform._localMatMdf) {
this.transformedElement.setAttribute('transform', this.finalTransform.localMat.to2dCSS());
}
if (this.finalTransform._opMdf) {
this.transformedElement.setAttribute('opacity', this.finalTransform.localOpacity);
}
},
destroyBaseElement: function () {
this.layerElement = null;
this.matteElement = null;
this.maskManager.destroy();
},
getBaseElement: function () {
if (this.data.hd) {
return null;
}
return this.baseElement;
},
createRenderableComponents: function () {
this.maskManager = new MaskElement(this.data, this, this.globalData);
this.renderableEffectsManager = new SVGEffects(this);
this.searchEffectTransforms();
},
getMatte: function (matteType) {
// This should not be a common case. But for backward compatibility, we'll create the matte object.
// It solves animations that have two consecutive layers marked as matte masks.
// Which is an undefined behavior in AE.
if (!this.matteMasks) {
this.matteMasks = {};
}
if (!this.matteMasks[matteType]) {
var id = this.layerId + '_' + matteType;
var filId;
var fil;
var useElement;
var gg;
if (matteType === 1 || matteType === 3) {
var masker = createNS('mask');
masker.setAttribute('id', id);
masker.setAttribute('mask-type', matteType === 3 ? 'luminance' : 'alpha');
useElement = createNS('use');
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#' + this.layerId);
masker.appendChild(useElement);
this.globalData.defs.appendChild(masker);
if (!featureSupport.maskType && matteType === 1) {
masker.setAttribute('mask-type', 'luminance');
filId = createElementID();
fil = filtersFactory.createFilter(filId);
this.globalData.defs.appendChild(fil);
fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
gg = createNS('g');
gg.appendChild(useElement);
masker.appendChild(gg);
gg.setAttribute('filter', 'url(' + getLocationHref() + '#' + filId + ')');
}
} else if (matteType === 2) {
var maskGroup = createNS('mask');
maskGroup.setAttribute('id', id);
maskGroup.setAttribute('mask-type', 'alpha');
var maskGrouper = createNS('g');
maskGroup.appendChild(maskGrouper);
filId = createElementID();
fil = filtersFactory.createFilter(filId);
/// /
var feCTr = createNS('feComponentTransfer');
feCTr.setAttribute('in', 'SourceGraphic');
fil.appendChild(feCTr);
var feFunc = createNS('feFuncA');
feFunc.setAttribute('type', 'table');
feFunc.setAttribute('tableValues', '1.0 0.0');
feCTr.appendChild(feFunc);
/// /
this.globalData.defs.appendChild(fil);
var alphaRect = createNS('rect');
alphaRect.setAttribute('width', this.comp.data.w);
alphaRect.setAttribute('height', this.comp.data.h);
alphaRect.setAttribute('x', '0');
alphaRect.setAttribute('y', '0');
alphaRect.setAttribute('fill', '#ffffff');
alphaRect.setAttribute('opacity', '0');
maskGrouper.setAttribute('filter', 'url(' + getLocationHref() + '#' + filId + ')');
maskGrouper.appendChild(alphaRect);
useElement = createNS('use');
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#' + this.layerId);
maskGrouper.appendChild(useElement);
if (!featureSupport.maskType) {
maskGroup.setAttribute('mask-type', 'luminance');
fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
gg = createNS('g');
maskGrouper.appendChild(alphaRect);
gg.appendChild(this.layerElement);
maskGrouper.appendChild(gg);
}
this.globalData.defs.appendChild(maskGroup);
}
this.matteMasks[matteType] = id;
}
return this.matteMasks[matteType];
},
setMatte: function (id) {
if (!this.matteElement) {
return;
}
this.matteElement.setAttribute('mask', 'url(' + getLocationHref() + '#' + id + ')');
},
};
export default SVGBaseElement;

View File

@@ -0,0 +1,28 @@
import {
extendPrototype,
} from '../../utils/functionExtensions';
import {
createSizedArray,
} from '../../utils/helpers/arrays';
import PropertyFactory from '../../utils/PropertyFactory';
import SVGRendererBase from '../../renderers/SVGRendererBase'; // eslint-disable-line
import SVGBaseElement from './SVGBaseElement';
import ICompElement from '../CompElement';
function SVGCompElement(data, globalData, comp) {
this.layers = data.layers;
this.supports3d = true;
this.completeLayers = false;
this.pendingElements = [];
this.elements = this.layers ? createSizedArray(this.layers.length) : [];
this.initElement(data, globalData, comp);
this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : { _placeholder: true };
}
extendPrototype([SVGRendererBase, ICompElement, SVGBaseElement], SVGCompElement);
SVGCompElement.prototype.createComp = function (data) {
return new SVGCompElement(data, this.globalData, this);
};
export default SVGCompElement;

View File

@@ -0,0 +1,70 @@
import { getLocationHref } from '../../main';
import {
createElementID,
} from '../../utils/common';
import filtersFactory from '../../utils/filters';
var registeredEffects = {};
var idPrefix = 'filter_result_';
function SVGEffects(elem) {
var i;
var source = 'SourceGraphic';
var len = elem.data.ef ? elem.data.ef.length : 0;
var filId = createElementID();
var fil = filtersFactory.createFilter(filId, true);
var count = 0;
this.filters = [];
var filterManager;
for (i = 0; i < len; i += 1) {
filterManager = null;
var type = elem.data.ef[i].ty;
if (registeredEffects[type]) {
var Effect = registeredEffects[type].effect;
filterManager = new Effect(fil, elem.effectsManager.effectElements[i], elem, idPrefix + count, source);
source = idPrefix + count;
if (registeredEffects[type].countsAsEffect) {
count += 1;
}
}
if (filterManager) {
this.filters.push(filterManager);
}
}
if (count) {
elem.globalData.defs.appendChild(fil);
elem.layerElement.setAttribute('filter', 'url(' + getLocationHref() + '#' + filId + ')');
}
if (this.filters.length) {
elem.addRenderableComponent(this);
}
}
SVGEffects.prototype.renderFrame = function (_isFirstFrame) {
var i;
var len = this.filters.length;
for (i = 0; i < len; i += 1) {
this.filters[i].renderFrame(_isFirstFrame);
}
};
SVGEffects.prototype.getEffects = function (type) {
var i;
var len = this.filters.length;
var effects = [];
for (i = 0; i < len; i += 1) {
if (this.filters[i].type === type) {
effects.push(this.filters[i]);
}
}
return effects;
};
export function registerEffect(id, effect, countsAsEffect) {
registeredEffects[id] = {
effect,
countsAsEffect,
};
}
export default SVGEffects;

View File

@@ -0,0 +1,3 @@
function SVGEffects() {}
export default SVGEffects;

View File

@@ -0,0 +1,366 @@
import {
extendPrototype,
} from '../../utils/functionExtensions';
import { getLocationHref } from '../../main';
import ShapePropertyFactory from '../../utils/shapes/ShapeProperty';
import BaseElement from '../BaseElement';
import TransformElement from '../helpers/TransformElement';
import SVGBaseElement from './SVGBaseElement';
import HierarchyElement from '../helpers/HierarchyElement';
import FrameElement from '../helpers/FrameElement';
import RenderableDOMElement from '../helpers/RenderableDOMElement';
import getBlendMode from '../../utils/helpers/blendModes';
import Matrix from '../../3rd_party/transformation-matrix';
import IShapeElement from '../ShapeElement';
import TransformPropertyFactory from '../../utils/TransformProperty';
import { ShapeModifiers } from '../../utils/shapes/ShapeModifiers';
import {
lineCapEnum,
lineJoinEnum,
} from '../../utils/helpers/shapeEnums';
import SVGShapeData from '../helpers/shapes/SVGShapeData';
import SVGStyleData from '../helpers/shapes/SVGStyleData';
import SVGStrokeStyleData from '../helpers/shapes/SVGStrokeStyleData';
import SVGFillStyleData from '../helpers/shapes/SVGFillStyleData';
import SVGNoStyleData from '../helpers/shapes/SVGNoStyleData';
import SVGGradientFillStyleData from '../helpers/shapes/SVGGradientFillStyleData';
import SVGGradientStrokeStyleData from '../helpers/shapes/SVGGradientStrokeStyleData';
import ShapeGroupData from '../helpers/shapes/ShapeGroupData';
import SVGTransformData from '../helpers/shapes/SVGTransformData';
import SVGElementsRenderer from '../helpers/shapes/SVGElementsRenderer';
function SVGShapeElement(data, globalData, comp) {
// List of drawable elements
this.shapes = [];
// Full shape data
this.shapesData = data.shapes;
// List of styles that will be applied to shapes
this.stylesList = [];
// List of modifiers that will be applied to shapes
this.shapeModifiers = [];
// List of items in shape tree
this.itemsData = [];
// List of items in previous shape tree
this.processedElements = [];
// List of animated components
this.animatedContents = [];
this.initElement(data, globalData, comp);
// Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
// List of elements that have been created
this.prevViewData = [];
// Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
}
extendPrototype([BaseElement, TransformElement, SVGBaseElement, IShapeElement, HierarchyElement, FrameElement, RenderableDOMElement], SVGShapeElement);
SVGShapeElement.prototype.initSecondaryElement = function () {
};
SVGShapeElement.prototype.identityMatrix = new Matrix();
SVGShapeElement.prototype.buildExpressionInterface = function () {};
SVGShapeElement.prototype.createContent = function () {
this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.layerElement, 0, [], true);
this.filterUniqueShapes();
};
/*
This method searches for multiple shapes that affect a single element and one of them is animated
*/
SVGShapeElement.prototype.filterUniqueShapes = function () {
var i;
var len = this.shapes.length;
var shape;
var j;
var jLen = this.stylesList.length;
var style;
var tempShapes = [];
var areAnimated = false;
for (j = 0; j < jLen; j += 1) {
style = this.stylesList[j];
areAnimated = false;
tempShapes.length = 0;
for (i = 0; i < len; i += 1) {
shape = this.shapes[i];
if (shape.styles.indexOf(style) !== -1) {
tempShapes.push(shape);
areAnimated = shape._isAnimated || areAnimated;
}
}
if (tempShapes.length > 1 && areAnimated) {
this.setShapesAsAnimated(tempShapes);
}
}
};
SVGShapeElement.prototype.setShapesAsAnimated = function (shapes) {
var i;
var len = shapes.length;
for (i = 0; i < len; i += 1) {
shapes[i].setAsAnimated();
}
};
SVGShapeElement.prototype.createStyleElement = function (data, level) {
// TODO: prevent drawing of hidden styles
var elementData;
var styleOb = new SVGStyleData(data, level);
var pathElement = styleOb.pElem;
if (data.ty === 'st') {
elementData = new SVGStrokeStyleData(this, data, styleOb);
} else if (data.ty === 'fl') {
elementData = new SVGFillStyleData(this, data, styleOb);
} else if (data.ty === 'gf' || data.ty === 'gs') {
var GradientConstructor = data.ty === 'gf' ? SVGGradientFillStyleData : SVGGradientStrokeStyleData;
elementData = new GradientConstructor(this, data, styleOb);
this.globalData.defs.appendChild(elementData.gf);
if (elementData.maskId) {
this.globalData.defs.appendChild(elementData.ms);
this.globalData.defs.appendChild(elementData.of);
pathElement.setAttribute('mask', 'url(' + getLocationHref() + '#' + elementData.maskId + ')');
}
} else if (data.ty === 'no') {
elementData = new SVGNoStyleData(this, data, styleOb);
}
if (data.ty === 'st' || data.ty === 'gs') {
pathElement.setAttribute('stroke-linecap', lineCapEnum[data.lc || 2]);
pathElement.setAttribute('stroke-linejoin', lineJoinEnum[data.lj || 2]);
pathElement.setAttribute('fill-opacity', '0');
if (data.lj === 1) {
pathElement.setAttribute('stroke-miterlimit', data.ml);
}
}
if (data.r === 2) {
pathElement.setAttribute('fill-rule', 'evenodd');
}
if (data.ln) {
pathElement.setAttribute('id', data.ln);
}
if (data.cl) {
pathElement.setAttribute('class', data.cl);
}
if (data.bm) {
pathElement.style['mix-blend-mode'] = getBlendMode(data.bm);
}
this.stylesList.push(styleOb);
this.addToAnimatedContents(data, elementData);
return elementData;
};
SVGShapeElement.prototype.createGroupElement = function (data) {
var elementData = new ShapeGroupData();
if (data.ln) {
elementData.gr.setAttribute('id', data.ln);
}
if (data.cl) {
elementData.gr.setAttribute('class', data.cl);
}
if (data.bm) {
elementData.gr.style['mix-blend-mode'] = getBlendMode(data.bm);
}
return elementData;
};
SVGShapeElement.prototype.createTransformElement = function (data, container) {
var transformProperty = TransformPropertyFactory.getTransformProperty(this, data, this);
var elementData = new SVGTransformData(transformProperty, transformProperty.o, container);
this.addToAnimatedContents(data, elementData);
return elementData;
};
SVGShapeElement.prototype.createShapeElement = function (data, ownTransformers, level) {
var ty = 4;
if (data.ty === 'rc') {
ty = 5;
} else if (data.ty === 'el') {
ty = 6;
} else if (data.ty === 'sr') {
ty = 7;
}
var shapeProperty = ShapePropertyFactory.getShapeProp(this, data, ty, this);
var elementData = new SVGShapeData(ownTransformers, level, shapeProperty);
this.shapes.push(elementData);
this.addShapeToModifiers(elementData);
this.addToAnimatedContents(data, elementData);
return elementData;
};
SVGShapeElement.prototype.addToAnimatedContents = function (data, element) {
var i = 0;
var len = this.animatedContents.length;
while (i < len) {
if (this.animatedContents[i].element === element) {
return;
}
i += 1;
}
this.animatedContents.push({
fn: SVGElementsRenderer.createRenderFunction(data),
element: element,
data: data,
});
};
SVGShapeElement.prototype.setElementStyles = function (elementData) {
var arr = elementData.styles;
var j;
var jLen = this.stylesList.length;
for (j = 0; j < jLen; j += 1) {
if (!this.stylesList[j].closed) {
arr.push(this.stylesList[j]);
}
}
};
SVGShapeElement.prototype.reloadShapes = function () {
this._isFirstFrame = true;
var i;
var len = this.itemsData.length;
for (i = 0; i < len; i += 1) {
this.prevViewData[i] = this.itemsData[i];
}
this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.layerElement, 0, [], true);
this.filterUniqueShapes();
len = this.dynamicProperties.length;
for (i = 0; i < len; i += 1) {
this.dynamicProperties[i].getValue();
}
this.renderModifiers();
};
SVGShapeElement.prototype.searchShapes = function (arr, itemsData, prevViewData, container, level, transformers, render) {
var ownTransformers = [].concat(transformers);
var i;
var len = arr.length - 1;
var j;
var jLen;
var ownStyles = [];
var ownModifiers = [];
var currentTransform;
var modifier;
var processedPos;
for (i = len; i >= 0; i -= 1) {
processedPos = this.searchProcessedElement(arr[i]);
if (!processedPos) {
arr[i]._render = render;
} else {
itemsData[i] = prevViewData[processedPos - 1];
}
if (arr[i].ty === 'fl' || arr[i].ty === 'st' || arr[i].ty === 'gf' || arr[i].ty === 'gs' || arr[i].ty === 'no') {
if (!processedPos) {
itemsData[i] = this.createStyleElement(arr[i], level);
} else {
itemsData[i].style.closed = false;
}
if (arr[i]._render) {
if (itemsData[i].style.pElem.parentNode !== container) {
container.appendChild(itemsData[i].style.pElem);
}
}
ownStyles.push(itemsData[i].style);
} else if (arr[i].ty === 'gr') {
if (!processedPos) {
itemsData[i] = this.createGroupElement(arr[i]);
} else {
jLen = itemsData[i].it.length;
for (j = 0; j < jLen; j += 1) {
itemsData[i].prevViewData[j] = itemsData[i].it[j];
}
}
this.searchShapes(arr[i].it, itemsData[i].it, itemsData[i].prevViewData, itemsData[i].gr, level + 1, ownTransformers, render);
if (arr[i]._render) {
if (itemsData[i].gr.parentNode !== container) {
container.appendChild(itemsData[i].gr);
}
}
} else if (arr[i].ty === 'tr') {
if (!processedPos) {
itemsData[i] = this.createTransformElement(arr[i], container);
}
currentTransform = itemsData[i].transform;
ownTransformers.push(currentTransform);
} else if (arr[i].ty === 'sh' || arr[i].ty === 'rc' || arr[i].ty === 'el' || arr[i].ty === 'sr') {
if (!processedPos) {
itemsData[i] = this.createShapeElement(arr[i], ownTransformers, level);
}
this.setElementStyles(itemsData[i]);
} else if (arr[i].ty === 'tm' || arr[i].ty === 'rd' || arr[i].ty === 'ms' || arr[i].ty === 'pb' || arr[i].ty === 'zz' || arr[i].ty === 'op') {
if (!processedPos) {
modifier = ShapeModifiers.getModifier(arr[i].ty);
modifier.init(this, arr[i]);
itemsData[i] = modifier;
this.shapeModifiers.push(modifier);
} else {
modifier = itemsData[i];
modifier.closed = false;
}
ownModifiers.push(modifier);
} else if (arr[i].ty === 'rp') {
if (!processedPos) {
modifier = ShapeModifiers.getModifier(arr[i].ty);
itemsData[i] = modifier;
modifier.init(this, arr, i, itemsData);
this.shapeModifiers.push(modifier);
render = false;
} else {
modifier = itemsData[i];
modifier.closed = true;
}
ownModifiers.push(modifier);
}
this.addProcessedElement(arr[i], i + 1);
}
len = ownStyles.length;
for (i = 0; i < len; i += 1) {
ownStyles[i].closed = true;
}
len = ownModifiers.length;
for (i = 0; i < len; i += 1) {
ownModifiers[i].closed = true;
}
};
SVGShapeElement.prototype.renderInnerContent = function () {
this.renderModifiers();
var i;
var len = this.stylesList.length;
for (i = 0; i < len; i += 1) {
this.stylesList[i].reset();
}
this.renderShape();
for (i = 0; i < len; i += 1) {
if (this.stylesList[i]._mdf || this._isFirstFrame) {
if (this.stylesList[i].msElem) {
this.stylesList[i].msElem.setAttribute('d', this.stylesList[i].d);
// Adding M0 0 fixes same mask bug on all browsers
this.stylesList[i].d = 'M0 0' + this.stylesList[i].d;
}
this.stylesList[i].pElem.setAttribute('d', this.stylesList[i].d || 'M0 0');
}
}
};
SVGShapeElement.prototype.renderShape = function () {
var i;
var len = this.animatedContents.length;
var animatedContent;
for (i = 0; i < len; i += 1) {
animatedContent = this.animatedContents[i];
if ((this._isFirstFrame || animatedContent.element._isAnimated) && animatedContent.data !== true) {
animatedContent.fn(animatedContent.data, animatedContent.element, this._isFirstFrame);
}
}
};
SVGShapeElement.prototype.destroy = function () {
this.destroyBaseElement();
this.shapesData = null;
this.itemsData = null;
};
export default SVGShapeElement;

View File

@@ -0,0 +1,322 @@
import {
extendPrototype,
} from '../../utils/functionExtensions';
import {
createSizedArray,
} from '../../utils/helpers/arrays';
import createNS from '../../utils/helpers/svg_elements';
import BaseElement from '../BaseElement';
import TransformElement from '../helpers/TransformElement';
import SVGBaseElement from './SVGBaseElement';
import HierarchyElement from '../helpers/HierarchyElement';
import FrameElement from '../helpers/FrameElement';
import RenderableDOMElement from '../helpers/RenderableDOMElement';
import ITextElement from '../TextElement';
import SVGCompElement from './SVGCompElement'; // eslint-disable-line
import SVGShapeElement from './SVGShapeElement';
var emptyShapeData = {
shapes: [],
};
function SVGTextLottieElement(data, globalData, comp) {
this.textSpans = [];
this.renderType = 'svg';
this.initElement(data, globalData, comp);
}
extendPrototype([BaseElement, TransformElement, SVGBaseElement, HierarchyElement, FrameElement, RenderableDOMElement, ITextElement], SVGTextLottieElement);
SVGTextLottieElement.prototype.createContent = function () {
if (this.data.singleShape && !this.globalData.fontManager.chars) {
this.textContainer = createNS('text');
}
};
SVGTextLottieElement.prototype.buildTextContents = function (textArray) {
var i = 0;
var len = textArray.length;
var textContents = [];
var currentTextContent = '';
while (i < len) {
if (textArray[i] === String.fromCharCode(13) || textArray[i] === String.fromCharCode(3)) {
textContents.push(currentTextContent);
currentTextContent = '';
} else {
currentTextContent += textArray[i];
}
i += 1;
}
textContents.push(currentTextContent);
return textContents;
};
SVGTextLottieElement.prototype.buildShapeData = function (data, scale) {
// data should probably be cloned to apply scale separately to each instance of a text on different layers
// but since text internal content gets only rendered once and then it's never rerendered,
// it's probably safe not to clone data and reuse always the same instance even if the object is mutated.
// Avoiding cloning is preferred since cloning each character shape data is expensive
if (data.shapes && data.shapes.length) {
var shape = data.shapes[0];
if (shape.it) {
var shapeItem = shape.it[shape.it.length - 1];
if (shapeItem.s) {
shapeItem.s.k[0] = scale;
shapeItem.s.k[1] = scale;
}
}
}
return data;
};
SVGTextLottieElement.prototype.buildNewText = function () {
this.addDynamicProperty(this);
var i;
var len;
var documentData = this.textProperty.currentData;
this.renderedLetters = createSizedArray(documentData ? documentData.l.length : 0);
if (documentData.fc) {
this.layerElement.setAttribute('fill', this.buildColor(documentData.fc));
} else {
this.layerElement.setAttribute('fill', 'rgba(0,0,0,0)');
}
if (documentData.sc) {
this.layerElement.setAttribute('stroke', this.buildColor(documentData.sc));
this.layerElement.setAttribute('stroke-width', documentData.sw);
}
this.layerElement.setAttribute('font-size', documentData.finalSize);
var fontData = this.globalData.fontManager.getFontByName(documentData.f);
if (fontData.fClass) {
this.layerElement.setAttribute('class', fontData.fClass);
} else {
this.layerElement.setAttribute('font-family', fontData.fFamily);
var fWeight = documentData.fWeight;
var fStyle = documentData.fStyle;
this.layerElement.setAttribute('font-style', fStyle);
this.layerElement.setAttribute('font-weight', fWeight);
}
this.layerElement.setAttribute('aria-label', documentData.t);
var letters = documentData.l || [];
var usesGlyphs = !!this.globalData.fontManager.chars;
len = letters.length;
var tSpan;
var matrixHelper = this.mHelper;
var shapeStr = '';
var singleShape = this.data.singleShape;
var xPos = 0;
var yPos = 0;
var firstLine = true;
var trackingOffset = documentData.tr * 0.001 * documentData.finalSize;
if (singleShape && !usesGlyphs && !documentData.sz) {
var tElement = this.textContainer;
var justify = 'start';
switch (documentData.j) {
case 1:
justify = 'end';
break;
case 2:
justify = 'middle';
break;
default:
justify = 'start';
break;
}
tElement.setAttribute('text-anchor', justify);
tElement.setAttribute('letter-spacing', trackingOffset);
var textContent = this.buildTextContents(documentData.finalText);
len = textContent.length;
yPos = documentData.ps ? documentData.ps[1] + documentData.ascent : 0;
for (i = 0; i < len; i += 1) {
tSpan = this.textSpans[i].span || createNS('tspan');
tSpan.textContent = textContent[i];
tSpan.setAttribute('x', 0);
tSpan.setAttribute('y', yPos);
tSpan.style.display = 'inherit';
tElement.appendChild(tSpan);
if (!this.textSpans[i]) {
this.textSpans[i] = {
span: null,
glyph: null,
};
}
this.textSpans[i].span = tSpan;
yPos += documentData.finalLineHeight;
}
this.layerElement.appendChild(tElement);
} else {
var cachedSpansLength = this.textSpans.length;
var charData;
for (i = 0; i < len; i += 1) {
if (!this.textSpans[i]) {
this.textSpans[i] = {
span: null,
childSpan: null,
glyph: null,
};
}
if (!usesGlyphs || !singleShape || i === 0) {
tSpan = cachedSpansLength > i ? this.textSpans[i].span : createNS(usesGlyphs ? 'g' : 'text');
if (cachedSpansLength <= i) {
tSpan.setAttribute('stroke-linecap', 'butt');
tSpan.setAttribute('stroke-linejoin', 'round');
tSpan.setAttribute('stroke-miterlimit', '4');
this.textSpans[i].span = tSpan;
if (usesGlyphs) {
var childSpan = createNS('g');
tSpan.appendChild(childSpan);
this.textSpans[i].childSpan = childSpan;
}
this.textSpans[i].span = tSpan;
this.layerElement.appendChild(tSpan);
}
tSpan.style.display = 'inherit';
}
matrixHelper.reset();
if (singleShape) {
if (letters[i].n) {
xPos = -trackingOffset;
yPos += documentData.yOffset;
yPos += firstLine ? 1 : 0;
firstLine = false;
}
this.applyTextPropertiesToMatrix(documentData, matrixHelper, letters[i].line, xPos, yPos);
xPos += letters[i].l || 0;
// xPos += letters[i].val === ' ' ? 0 : trackingOffset;
xPos += trackingOffset;
}
if (usesGlyphs) {
charData = this.globalData.fontManager.getCharData(
documentData.finalText[i],
fontData.fStyle,
this.globalData.fontManager.getFontByName(documentData.f).fFamily
);
var glyphElement;
// t === 1 means the character has been replaced with an animated shaped
if (charData.t === 1) {
glyphElement = new SVGCompElement(charData.data, this.globalData, this);
} else {
var data = emptyShapeData;
if (charData.data && charData.data.shapes) {
data = this.buildShapeData(charData.data, documentData.finalSize);
}
glyphElement = new SVGShapeElement(data, this.globalData, this);
}
if (this.textSpans[i].glyph) {
var glyph = this.textSpans[i].glyph;
this.textSpans[i].childSpan.removeChild(glyph.layerElement);
glyph.destroy();
}
this.textSpans[i].glyph = glyphElement;
glyphElement._debug = true;
glyphElement.prepareFrame(0);
glyphElement.renderFrame();
this.textSpans[i].childSpan.appendChild(glyphElement.layerElement);
// when using animated shapes, the layer will be scaled instead of replacing the internal scale
// this might have issues with strokes and might need a different solution
if (charData.t === 1) {
this.textSpans[i].childSpan.setAttribute('transform', 'scale(' + documentData.finalSize / 100 + ',' + documentData.finalSize / 100 + ')');
}
} else {
if (singleShape) {
tSpan.setAttribute('transform', 'translate(' + matrixHelper.props[12] + ',' + matrixHelper.props[13] + ')');
}
tSpan.textContent = letters[i].val;
tSpan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
}
//
}
if (singleShape && tSpan) {
tSpan.setAttribute('d', shapeStr);
}
}
while (i < this.textSpans.length) {
this.textSpans[i].span.style.display = 'none';
i += 1;
}
this._sizeChanged = true;
};
SVGTextLottieElement.prototype.sourceRectAtTime = function () {
this.prepareFrame(this.comp.renderedFrame - this.data.st);
this.renderInnerContent();
if (this._sizeChanged) {
this._sizeChanged = false;
var textBox = this.layerElement.getBBox();
this.bbox = {
top: textBox.y,
left: textBox.x,
width: textBox.width,
height: textBox.height,
};
}
return this.bbox;
};
SVGTextLottieElement.prototype.getValue = function () {
var i;
var len = this.textSpans.length;
var glyphElement;
this.renderedFrame = this.comp.renderedFrame;
for (i = 0; i < len; i += 1) {
glyphElement = this.textSpans[i].glyph;
if (glyphElement) {
glyphElement.prepareFrame(this.comp.renderedFrame - this.data.st);
if (glyphElement._mdf) {
this._mdf = true;
}
}
}
};
SVGTextLottieElement.prototype.renderInnerContent = function () {
this.validateText();
if (!this.data.singleShape || this._mdf) {
this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
if (this.lettersChangedFlag || this.textAnimator.lettersChangedFlag) {
this._sizeChanged = true;
var i;
var len;
var renderedLetters = this.textAnimator.renderedLetters;
var letters = this.textProperty.currentData.l;
len = letters.length;
var renderedLetter;
var textSpan;
var glyphElement;
for (i = 0; i < len; i += 1) {
if (!letters[i].n) {
renderedLetter = renderedLetters[i];
textSpan = this.textSpans[i].span;
glyphElement = this.textSpans[i].glyph;
if (glyphElement) {
glyphElement.renderFrame();
}
if (renderedLetter._mdf.m) {
textSpan.setAttribute('transform', renderedLetter.m);
}
if (renderedLetter._mdf.o) {
textSpan.setAttribute('opacity', renderedLetter.o);
}
if (renderedLetter._mdf.sw) {
textSpan.setAttribute('stroke-width', renderedLetter.sw);
}
if (renderedLetter._mdf.sc) {
textSpan.setAttribute('stroke', renderedLetter.sc);
}
if (renderedLetter._mdf.fc) {
textSpan.setAttribute('fill', renderedLetter.fc);
}
}
}
}
}
};
export default SVGTextLottieElement;

View File

@@ -0,0 +1,22 @@
import createNS from '../../../utils/helpers/svg_elements';
function SVGComposableEffect() {
}
SVGComposableEffect.prototype = {
createMergeNode: (resultId, ins) => {
var feMerge = createNS('feMerge');
feMerge.setAttribute('result', resultId);
var feMergeNode;
var i;
for (i = 0; i < ins.length; i += 1) {
feMergeNode = createNS('feMergeNode');
feMergeNode.setAttribute('in', ins[i]);
feMerge.appendChild(feMergeNode);
feMerge.appendChild(feMergeNode);
}
return feMerge;
},
};
export default SVGComposableEffect;

View File

@@ -0,0 +1,83 @@
import {
degToRads,
rgbToHex,
} from '../../../utils/common';
import createNS from '../../../utils/helpers/svg_elements';
import SVGComposableEffect from './SVGComposableEffect';
import {
extendPrototype,
} from '../../../utils/functionExtensions';
function SVGDropShadowEffect(filter, filterManager, elem, id, source) {
var globalFilterSize = filterManager.container.globalData.renderConfig.filterSize;
var filterSize = filterManager.data.fs || globalFilterSize;
filter.setAttribute('x', filterSize.x || globalFilterSize.x);
filter.setAttribute('y', filterSize.y || globalFilterSize.y);
filter.setAttribute('width', filterSize.width || globalFilterSize.width);
filter.setAttribute('height', filterSize.height || globalFilterSize.height);
this.filterManager = filterManager;
var feGaussianBlur = createNS('feGaussianBlur');
feGaussianBlur.setAttribute('in', 'SourceAlpha');
feGaussianBlur.setAttribute('result', id + '_drop_shadow_1');
feGaussianBlur.setAttribute('stdDeviation', '0');
this.feGaussianBlur = feGaussianBlur;
filter.appendChild(feGaussianBlur);
var feOffset = createNS('feOffset');
feOffset.setAttribute('dx', '25');
feOffset.setAttribute('dy', '0');
feOffset.setAttribute('in', id + '_drop_shadow_1');
feOffset.setAttribute('result', id + '_drop_shadow_2');
this.feOffset = feOffset;
filter.appendChild(feOffset);
var feFlood = createNS('feFlood');
feFlood.setAttribute('flood-color', '#00ff00');
feFlood.setAttribute('flood-opacity', '1');
feFlood.setAttribute('result', id + '_drop_shadow_3');
this.feFlood = feFlood;
filter.appendChild(feFlood);
var feComposite = createNS('feComposite');
feComposite.setAttribute('in', id + '_drop_shadow_3');
feComposite.setAttribute('in2', id + '_drop_shadow_2');
feComposite.setAttribute('operator', 'in');
feComposite.setAttribute('result', id + '_drop_shadow_4');
filter.appendChild(feComposite);
var feMerge = this.createMergeNode(
id,
[
id + '_drop_shadow_4',
source,
]
);
filter.appendChild(feMerge);
//
}
extendPrototype([SVGComposableEffect], SVGDropShadowEffect);
SVGDropShadowEffect.prototype.renderFrame = function (forceRender) {
if (forceRender || this.filterManager._mdf) {
if (forceRender || this.filterManager.effectElements[4].p._mdf) {
this.feGaussianBlur.setAttribute('stdDeviation', this.filterManager.effectElements[4].p.v / 4);
}
if (forceRender || this.filterManager.effectElements[0].p._mdf) {
var col = this.filterManager.effectElements[0].p.v;
this.feFlood.setAttribute('flood-color', rgbToHex(Math.round(col[0] * 255), Math.round(col[1] * 255), Math.round(col[2] * 255)));
}
if (forceRender || this.filterManager.effectElements[1].p._mdf) {
this.feFlood.setAttribute('flood-opacity', this.filterManager.effectElements[1].p.v / 255);
}
if (forceRender || this.filterManager.effectElements[2].p._mdf || this.filterManager.effectElements[3].p._mdf) {
var distance = this.filterManager.effectElements[3].p.v;
var angle = (this.filterManager.effectElements[2].p.v - 90) * degToRads;
var x = distance * Math.cos(angle);
var y = distance * Math.sin(angle);
this.feOffset.setAttribute('dx', x);
this.feOffset.setAttribute('dy', y);
}
}
};
export default SVGDropShadowEffect;

View File

@@ -0,0 +1,22 @@
import createNS from '../../../utils/helpers/svg_elements';
function SVGFillFilter(filter, filterManager, elem, id) {
this.filterManager = filterManager;
var feColorMatrix = createNS('feColorMatrix');
feColorMatrix.setAttribute('type', 'matrix');
feColorMatrix.setAttribute('color-interpolation-filters', 'sRGB');
feColorMatrix.setAttribute('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0');
feColorMatrix.setAttribute('result', id);
filter.appendChild(feColorMatrix);
this.matrixFilter = feColorMatrix;
}
SVGFillFilter.prototype.renderFrame = function (forceRender) {
if (forceRender || this.filterManager._mdf) {
var color = this.filterManager.effectElements[2].p.v;
var opacity = this.filterManager.effectElements[6].p.v;
this.matrixFilter.setAttribute('values', '0 0 0 0 ' + color[0] + ' 0 0 0 0 ' + color[1] + ' 0 0 0 0 ' + color[2] + ' 0 0 0 ' + opacity + ' 0');
}
};
export default SVGFillFilter;

View File

@@ -0,0 +1,44 @@
import createNS from '../../../utils/helpers/svg_elements';
function SVGGaussianBlurEffect(filter, filterManager, elem, id) {
// Outset the filter region by 100% on all sides to accommodate blur expansion.
filter.setAttribute('x', '-100%');
filter.setAttribute('y', '-100%');
filter.setAttribute('width', '300%');
filter.setAttribute('height', '300%');
this.filterManager = filterManager;
var feGaussianBlur = createNS('feGaussianBlur');
feGaussianBlur.setAttribute('result', id);
filter.appendChild(feGaussianBlur);
this.feGaussianBlur = feGaussianBlur;
}
SVGGaussianBlurEffect.prototype.renderFrame = function (forceRender) {
if (forceRender || this.filterManager._mdf) {
// Empirical value, matching AE's blur appearance.
var kBlurrinessToSigma = 0.3;
var sigma = this.filterManager.effectElements[0].p.v * kBlurrinessToSigma;
// Dimensions mapping:
//
// 1 -> horizontal & vertical
// 2 -> horizontal only
// 3 -> vertical only
//
var dimensions = this.filterManager.effectElements[1].p.v;
var sigmaX = (dimensions == 3) ? 0 : sigma; // eslint-disable-line eqeqeq
var sigmaY = (dimensions == 2) ? 0 : sigma; // eslint-disable-line eqeqeq
this.feGaussianBlur.setAttribute('stdDeviation', sigmaX + ' ' + sigmaY);
// Repeat edges mapping:
//
// 0 -> off -> duplicate
// 1 -> on -> wrap
var edgeMode = (this.filterManager.effectElements[2].p.v == 1) ? 'wrap' : 'duplicate'; // eslint-disable-line eqeqeq
this.feGaussianBlur.setAttribute('edgeMode', edgeMode);
}
};
export default SVGGaussianBlurEffect;

View File

@@ -0,0 +1,101 @@
import {
createElementID,
} from '../../../utils/common';
import createNS from '../../../utils/helpers/svg_elements';
var _svgMatteSymbols = [];
function SVGMatte3Effect(filterElem, filterManager, elem) {
this.initialized = false;
this.filterManager = filterManager;
this.filterElem = filterElem;
this.elem = elem;
elem.matteElement = createNS('g');
elem.matteElement.appendChild(elem.layerElement);
elem.matteElement.appendChild(elem.transformedElement);
elem.baseElement = elem.matteElement;
}
SVGMatte3Effect.prototype.findSymbol = function (mask) {
var i = 0;
var len = _svgMatteSymbols.length;
while (i < len) {
if (_svgMatteSymbols[i] === mask) {
return _svgMatteSymbols[i];
}
i += 1;
}
return null;
};
SVGMatte3Effect.prototype.replaceInParent = function (mask, symbolId) {
var parentNode = mask.layerElement.parentNode;
if (!parentNode) {
return;
}
var children = parentNode.children;
var i = 0;
var len = children.length;
while (i < len) {
if (children[i] === mask.layerElement) {
break;
}
i += 1;
}
var nextChild;
if (i <= len - 2) {
nextChild = children[i + 1];
}
var useElem = createNS('use');
useElem.setAttribute('href', '#' + symbolId);
if (nextChild) {
parentNode.insertBefore(useElem, nextChild);
} else {
parentNode.appendChild(useElem);
}
};
SVGMatte3Effect.prototype.setElementAsMask = function (elem, mask) {
if (!this.findSymbol(mask)) {
var symbolId = createElementID();
var masker = createNS('mask');
masker.setAttribute('id', mask.layerId);
masker.setAttribute('mask-type', 'alpha');
_svgMatteSymbols.push(mask);
var defs = elem.globalData.defs;
defs.appendChild(masker);
var symbol = createNS('symbol');
symbol.setAttribute('id', symbolId);
this.replaceInParent(mask, symbolId);
symbol.appendChild(mask.layerElement);
defs.appendChild(symbol);
var useElem = createNS('use');
useElem.setAttribute('href', '#' + symbolId);
masker.appendChild(useElem);
mask.data.hd = false;
mask.show();
}
elem.setMatte(mask.layerId);
};
SVGMatte3Effect.prototype.initialize = function () {
var ind = this.filterManager.effectElements[0].p.v;
var elements = this.elem.comp.elements;
var i = 0;
var len = elements.length;
while (i < len) {
if (elements[i] && elements[i].data.ind === ind) {
this.setElementAsMask(this.elem, elements[i]);
}
i += 1;
}
this.initialized = true;
};
SVGMatte3Effect.prototype.renderFrame = function () {
if (!this.initialized) {
this.initialize();
}
};
export default SVGMatte3Effect;

View File

@@ -0,0 +1,108 @@
import createNS from '../../../utils/helpers/svg_elements';
function SVGProLevelsFilter(filter, filterManager, elem, id) {
this.filterManager = filterManager;
var effectElements = this.filterManager.effectElements;
var feComponentTransfer = createNS('feComponentTransfer');
// Red
if (effectElements[10].p.k || effectElements[10].p.v !== 0 || effectElements[11].p.k || effectElements[11].p.v !== 1 || effectElements[12].p.k || effectElements[12].p.v !== 1 || effectElements[13].p.k || effectElements[13].p.v !== 0 || effectElements[14].p.k || effectElements[14].p.v !== 1) {
this.feFuncR = this.createFeFunc('feFuncR', feComponentTransfer);
}
// Green
if (effectElements[17].p.k || effectElements[17].p.v !== 0 || effectElements[18].p.k || effectElements[18].p.v !== 1 || effectElements[19].p.k || effectElements[19].p.v !== 1 || effectElements[20].p.k || effectElements[20].p.v !== 0 || effectElements[21].p.k || effectElements[21].p.v !== 1) {
this.feFuncG = this.createFeFunc('feFuncG', feComponentTransfer);
}
// Blue
if (effectElements[24].p.k || effectElements[24].p.v !== 0 || effectElements[25].p.k || effectElements[25].p.v !== 1 || effectElements[26].p.k || effectElements[26].p.v !== 1 || effectElements[27].p.k || effectElements[27].p.v !== 0 || effectElements[28].p.k || effectElements[28].p.v !== 1) {
this.feFuncB = this.createFeFunc('feFuncB', feComponentTransfer);
}
// Alpha
if (effectElements[31].p.k || effectElements[31].p.v !== 0 || effectElements[32].p.k || effectElements[32].p.v !== 1 || effectElements[33].p.k || effectElements[33].p.v !== 1 || effectElements[34].p.k || effectElements[34].p.v !== 0 || effectElements[35].p.k || effectElements[35].p.v !== 1) {
this.feFuncA = this.createFeFunc('feFuncA', feComponentTransfer);
}
// RGB
if (this.feFuncR || this.feFuncG || this.feFuncB || this.feFuncA) {
feComponentTransfer.setAttribute('color-interpolation-filters', 'sRGB');
filter.appendChild(feComponentTransfer);
}
if (effectElements[3].p.k || effectElements[3].p.v !== 0 || effectElements[4].p.k || effectElements[4].p.v !== 1 || effectElements[5].p.k || effectElements[5].p.v !== 1 || effectElements[6].p.k || effectElements[6].p.v !== 0 || effectElements[7].p.k || effectElements[7].p.v !== 1) {
feComponentTransfer = createNS('feComponentTransfer');
feComponentTransfer.setAttribute('color-interpolation-filters', 'sRGB');
feComponentTransfer.setAttribute('result', id);
filter.appendChild(feComponentTransfer);
this.feFuncRComposed = this.createFeFunc('feFuncR', feComponentTransfer);
this.feFuncGComposed = this.createFeFunc('feFuncG', feComponentTransfer);
this.feFuncBComposed = this.createFeFunc('feFuncB', feComponentTransfer);
}
}
SVGProLevelsFilter.prototype.createFeFunc = function (type, feComponentTransfer) {
var feFunc = createNS(type);
feFunc.setAttribute('type', 'table');
feComponentTransfer.appendChild(feFunc);
return feFunc;
};
SVGProLevelsFilter.prototype.getTableValue = function (inputBlack, inputWhite, gamma, outputBlack, outputWhite) {
var cnt = 0;
var segments = 256;
var perc;
var min = Math.min(inputBlack, inputWhite);
var max = Math.max(inputBlack, inputWhite);
var table = Array.call(null, { length: segments });
var colorValue;
var pos = 0;
var outputDelta = outputWhite - outputBlack;
var inputDelta = inputWhite - inputBlack;
while (cnt <= 256) {
perc = cnt / 256;
if (perc <= min) {
colorValue = inputDelta < 0 ? outputWhite : outputBlack;
} else if (perc >= max) {
colorValue = inputDelta < 0 ? outputBlack : outputWhite;
} else {
colorValue = (outputBlack + outputDelta * Math.pow((perc - inputBlack) / inputDelta, 1 / gamma));
}
table[pos] = colorValue;
pos += 1;
cnt += 256 / (segments - 1);
}
return table.join(' ');
};
SVGProLevelsFilter.prototype.renderFrame = function (forceRender) {
if (forceRender || this.filterManager._mdf) {
var val;
var effectElements = this.filterManager.effectElements;
if (this.feFuncRComposed && (forceRender || effectElements[3].p._mdf || effectElements[4].p._mdf || effectElements[5].p._mdf || effectElements[6].p._mdf || effectElements[7].p._mdf)) {
val = this.getTableValue(effectElements[3].p.v, effectElements[4].p.v, effectElements[5].p.v, effectElements[6].p.v, effectElements[7].p.v);
this.feFuncRComposed.setAttribute('tableValues', val);
this.feFuncGComposed.setAttribute('tableValues', val);
this.feFuncBComposed.setAttribute('tableValues', val);
}
if (this.feFuncR && (forceRender || effectElements[10].p._mdf || effectElements[11].p._mdf || effectElements[12].p._mdf || effectElements[13].p._mdf || effectElements[14].p._mdf)) {
val = this.getTableValue(effectElements[10].p.v, effectElements[11].p.v, effectElements[12].p.v, effectElements[13].p.v, effectElements[14].p.v);
this.feFuncR.setAttribute('tableValues', val);
}
if (this.feFuncG && (forceRender || effectElements[17].p._mdf || effectElements[18].p._mdf || effectElements[19].p._mdf || effectElements[20].p._mdf || effectElements[21].p._mdf)) {
val = this.getTableValue(effectElements[17].p.v, effectElements[18].p.v, effectElements[19].p.v, effectElements[20].p.v, effectElements[21].p.v);
this.feFuncG.setAttribute('tableValues', val);
}
if (this.feFuncB && (forceRender || effectElements[24].p._mdf || effectElements[25].p._mdf || effectElements[26].p._mdf || effectElements[27].p._mdf || effectElements[28].p._mdf)) {
val = this.getTableValue(effectElements[24].p.v, effectElements[25].p.v, effectElements[26].p.v, effectElements[27].p.v, effectElements[28].p.v);
this.feFuncB.setAttribute('tableValues', val);
}
if (this.feFuncA && (forceRender || effectElements[31].p._mdf || effectElements[32].p._mdf || effectElements[33].p._mdf || effectElements[34].p._mdf || effectElements[35].p._mdf)) {
val = this.getTableValue(effectElements[31].p.v, effectElements[32].p.v, effectElements[33].p.v, effectElements[34].p.v, effectElements[35].p.v);
this.feFuncA.setAttribute('tableValues', val);
}
}
};
export default SVGProLevelsFilter;

View File

@@ -0,0 +1,119 @@
import { getLocationHref } from '../../../main';
import {
createElementID,
bmFloor,
} from '../../../utils/common';
import createNS from '../../../utils/helpers/svg_elements';
function SVGStrokeEffect(fil, filterManager, elem) {
this.initialized = false;
this.filterManager = filterManager;
this.elem = elem;
this.paths = [];
}
SVGStrokeEffect.prototype.initialize = function () {
var elemChildren = this.elem.layerElement.children || this.elem.layerElement.childNodes;
var path;
var groupPath;
var i;
var len;
if (this.filterManager.effectElements[1].p.v === 1) {
len = this.elem.maskManager.masksProperties.length;
i = 0;
} else {
i = this.filterManager.effectElements[0].p.v - 1;
len = i + 1;
}
groupPath = createNS('g');
groupPath.setAttribute('fill', 'none');
groupPath.setAttribute('stroke-linecap', 'round');
groupPath.setAttribute('stroke-dashoffset', 1);
for (i; i < len; i += 1) {
path = createNS('path');
groupPath.appendChild(path);
this.paths.push({ p: path, m: i });
}
if (this.filterManager.effectElements[10].p.v === 3) {
var mask = createNS('mask');
var id = createElementID();
mask.setAttribute('id', id);
mask.setAttribute('mask-type', 'alpha');
mask.appendChild(groupPath);
this.elem.globalData.defs.appendChild(mask);
var g = createNS('g');
g.setAttribute('mask', 'url(' + getLocationHref() + '#' + id + ')');
while (elemChildren[0]) {
g.appendChild(elemChildren[0]);
}
this.elem.layerElement.appendChild(g);
this.masker = mask;
groupPath.setAttribute('stroke', '#fff');
} else if (this.filterManager.effectElements[10].p.v === 1 || this.filterManager.effectElements[10].p.v === 2) {
if (this.filterManager.effectElements[10].p.v === 2) {
elemChildren = this.elem.layerElement.children || this.elem.layerElement.childNodes;
while (elemChildren.length) {
this.elem.layerElement.removeChild(elemChildren[0]);
}
}
this.elem.layerElement.appendChild(groupPath);
this.elem.layerElement.removeAttribute('mask');
groupPath.setAttribute('stroke', '#fff');
}
this.initialized = true;
this.pathMasker = groupPath;
};
SVGStrokeEffect.prototype.renderFrame = function (forceRender) {
if (!this.initialized) {
this.initialize();
}
var i;
var len = this.paths.length;
var mask;
var path;
for (i = 0; i < len; i += 1) {
if (this.paths[i].m !== -1) {
mask = this.elem.maskManager.viewData[this.paths[i].m];
path = this.paths[i].p;
if (forceRender || this.filterManager._mdf || mask.prop._mdf) {
path.setAttribute('d', mask.lastPath);
}
if (forceRender || this.filterManager.effectElements[9].p._mdf || this.filterManager.effectElements[4].p._mdf || this.filterManager.effectElements[7].p._mdf || this.filterManager.effectElements[8].p._mdf || mask.prop._mdf) {
var dasharrayValue;
if (this.filterManager.effectElements[7].p.v !== 0 || this.filterManager.effectElements[8].p.v !== 100) {
var s = Math.min(this.filterManager.effectElements[7].p.v, this.filterManager.effectElements[8].p.v) * 0.01;
var e = Math.max(this.filterManager.effectElements[7].p.v, this.filterManager.effectElements[8].p.v) * 0.01;
var l = path.getTotalLength();
dasharrayValue = '0 0 0 ' + l * s + ' ';
var lineLength = l * (e - s);
var segment = 1 + this.filterManager.effectElements[4].p.v * 2 * this.filterManager.effectElements[9].p.v * 0.01;
var units = Math.floor(lineLength / segment);
var j;
for (j = 0; j < units; j += 1) {
dasharrayValue += '1 ' + this.filterManager.effectElements[4].p.v * 2 * this.filterManager.effectElements[9].p.v * 0.01 + ' ';
}
dasharrayValue += '0 ' + l * 10 + ' 0 0';
} else {
dasharrayValue = '1 ' + this.filterManager.effectElements[4].p.v * 2 * this.filterManager.effectElements[9].p.v * 0.01;
}
path.setAttribute('stroke-dasharray', dasharrayValue);
}
}
}
if (forceRender || this.filterManager.effectElements[4].p._mdf) {
this.pathMasker.setAttribute('stroke-width', this.filterManager.effectElements[4].p.v * 2);
}
if (forceRender || this.filterManager.effectElements[6].p._mdf) {
this.pathMasker.setAttribute('opacity', this.filterManager.effectElements[6].p.v);
}
if (this.filterManager.effectElements[10].p.v === 1 || this.filterManager.effectElements[10].p.v === 2) {
if (forceRender || this.filterManager.effectElements[3].p._mdf) {
var color = this.filterManager.effectElements[3].p.v;
this.pathMasker.setAttribute('stroke', 'rgb(' + bmFloor(color[0] * 255) + ',' + bmFloor(color[1] * 255) + ',' + bmFloor(color[2] * 255) + ')');
}
}
};
export default SVGStrokeEffect;

View File

@@ -0,0 +1,47 @@
import createNS from '../../../utils/helpers/svg_elements';
import SVGComposableEffect from './SVGComposableEffect';
import {
extendPrototype,
} from '../../../utils/functionExtensions';
var linearFilterValue = '0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0';
function SVGTintFilter(filter, filterManager, elem, id, source) {
this.filterManager = filterManager;
var feColorMatrix = createNS('feColorMatrix');
feColorMatrix.setAttribute('type', 'matrix');
feColorMatrix.setAttribute('color-interpolation-filters', 'linearRGB');
feColorMatrix.setAttribute('values', linearFilterValue + ' 1 0');
this.linearFilter = feColorMatrix;
feColorMatrix.setAttribute('result', id + '_tint_1');
filter.appendChild(feColorMatrix);
feColorMatrix = createNS('feColorMatrix');
feColorMatrix.setAttribute('type', 'matrix');
feColorMatrix.setAttribute('color-interpolation-filters', 'sRGB');
feColorMatrix.setAttribute('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0');
feColorMatrix.setAttribute('result', id + '_tint_2');
filter.appendChild(feColorMatrix);
this.matrixFilter = feColorMatrix;
var feMerge = this.createMergeNode(
id,
[
source,
id + '_tint_1',
id + '_tint_2',
]
);
filter.appendChild(feMerge);
}
extendPrototype([SVGComposableEffect], SVGTintFilter);
SVGTintFilter.prototype.renderFrame = function (forceRender) {
if (forceRender || this.filterManager._mdf) {
var colorBlack = this.filterManager.effectElements[0].p.v;
var colorWhite = this.filterManager.effectElements[1].p.v;
var opacity = this.filterManager.effectElements[2].p.v / 100;
this.linearFilter.setAttribute('values', linearFilterValue + ' ' + opacity + ' 0');
this.matrixFilter.setAttribute('values', (colorWhite[0] - colorBlack[0]) + ' 0 0 0 ' + colorBlack[0] + ' ' + (colorWhite[1] - colorBlack[1]) + ' 0 0 0 ' + colorBlack[1] + ' ' + (colorWhite[2] - colorBlack[2]) + ' 0 0 0 ' + colorBlack[2] + ' 0 0 0 1 0');
}
};
export default SVGTintFilter;

View File

@@ -0,0 +1,10 @@
import TransformEffect from '../../../effects/TransformEffect';
import { extendPrototype } from '../../../utils/functionExtensions';
function SVGTransformEffect(_, filterManager) {
this.init(filterManager);
}
extendPrototype([TransformEffect], SVGTransformEffect);
export default SVGTransformEffect;

View File

@@ -0,0 +1,43 @@
import createNS from '../../../utils/helpers/svg_elements';
function SVGTritoneFilter(filter, filterManager, elem, id) {
this.filterManager = filterManager;
var feColorMatrix = createNS('feColorMatrix');
feColorMatrix.setAttribute('type', 'matrix');
feColorMatrix.setAttribute('color-interpolation-filters', 'linearRGB');
feColorMatrix.setAttribute('values', '0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0');
filter.appendChild(feColorMatrix);
var feComponentTransfer = createNS('feComponentTransfer');
feComponentTransfer.setAttribute('color-interpolation-filters', 'sRGB');
feComponentTransfer.setAttribute('result', id);
this.matrixFilter = feComponentTransfer;
var feFuncR = createNS('feFuncR');
feFuncR.setAttribute('type', 'table');
feComponentTransfer.appendChild(feFuncR);
this.feFuncR = feFuncR;
var feFuncG = createNS('feFuncG');
feFuncG.setAttribute('type', 'table');
feComponentTransfer.appendChild(feFuncG);
this.feFuncG = feFuncG;
var feFuncB = createNS('feFuncB');
feFuncB.setAttribute('type', 'table');
feComponentTransfer.appendChild(feFuncB);
this.feFuncB = feFuncB;
filter.appendChild(feComponentTransfer);
}
SVGTritoneFilter.prototype.renderFrame = function (forceRender) {
if (forceRender || this.filterManager._mdf) {
var color1 = this.filterManager.effectElements[0].p.v;
var color2 = this.filterManager.effectElements[1].p.v;
var color3 = this.filterManager.effectElements[2].p.v;
var tableR = color3[0] + ' ' + color2[0] + ' ' + color1[0];
var tableG = color3[1] + ' ' + color2[1] + ' ' + color1[1];
var tableB = color3[2] + ' ' + color2[2] + ' ' + color1[2];
this.feFuncR.setAttribute('tableValues', tableR);
this.feFuncG.setAttribute('tableValues', tableG);
this.feFuncB.setAttribute('tableValues', tableB);
}
};
export default SVGTritoneFilter;

21
node_modules/lottie-web/player/js/main.js generated vendored Normal file
View File

@@ -0,0 +1,21 @@
const svgNS = 'http://www.w3.org/2000/svg';
let locationHref = '';
let _useWebWorker = false;
const initialDefaultFrame = -999999;
const setWebWorker = (flag) => { _useWebWorker = !!flag; };
const getWebWorker = () => _useWebWorker;
const setLocationHref = (value) => { locationHref = value; };
const getLocationHref = () => locationHref;
export {
svgNS,
initialDefaultFrame,
setWebWorker,
getWebWorker,
setLocationHref,
getLocationHref,
};

239
node_modules/lottie-web/player/js/mask.js generated vendored Normal file
View File

@@ -0,0 +1,239 @@
import { getLocationHref } from './main';
import {
createElementID,
} from './utils/common';
import {
createSizedArray,
} from './utils/helpers/arrays';
import PropertyFactory from './utils/PropertyFactory';
import ShapePropertyFactory from './utils/shapes/ShapeProperty';
import createNS from './utils/helpers/svg_elements';
function MaskElement(data, element, globalData) {
this.data = data;
this.element = element;
this.globalData = globalData;
this.storedData = [];
this.masksProperties = this.data.masksProperties || [];
this.maskElement = null;
var defs = this.globalData.defs;
var i;
var len = this.masksProperties ? this.masksProperties.length : 0;
this.viewData = createSizedArray(len);
this.solidPath = '';
var path;
var properties = this.masksProperties;
var count = 0;
var currentMasks = [];
var j;
var jLen;
var layerId = createElementID();
var rect;
var expansor;
var feMorph;
var x;
var maskType = 'clipPath';
var maskRef = 'clip-path';
for (i = 0; i < len; i += 1) {
if ((properties[i].mode !== 'a' && properties[i].mode !== 'n') || properties[i].inv || properties[i].o.k !== 100 || properties[i].o.x) {
maskType = 'mask';
maskRef = 'mask';
}
if ((properties[i].mode === 's' || properties[i].mode === 'i') && count === 0) {
rect = createNS('rect');
rect.setAttribute('fill', '#ffffff');
rect.setAttribute('width', this.element.comp.data.w || 0);
rect.setAttribute('height', this.element.comp.data.h || 0);
currentMasks.push(rect);
} else {
rect = null;
}
path = createNS('path');
if (properties[i].mode === 'n') {
// TODO move this to a factory or to a constructor
this.viewData[i] = {
op: PropertyFactory.getProp(this.element, properties[i].o, 0, 0.01, this.element),
prop: ShapePropertyFactory.getShapeProp(this.element, properties[i], 3),
elem: path,
lastPath: '',
};
defs.appendChild(path);
} else {
count += 1;
path.setAttribute('fill', properties[i].mode === 's' ? '#000000' : '#ffffff');
path.setAttribute('clip-rule', 'nonzero');
var filterID;
if (properties[i].x.k !== 0) {
maskType = 'mask';
maskRef = 'mask';
x = PropertyFactory.getProp(this.element, properties[i].x, 0, null, this.element);
filterID = createElementID();
expansor = createNS('filter');
expansor.setAttribute('id', filterID);
feMorph = createNS('feMorphology');
feMorph.setAttribute('operator', 'erode');
feMorph.setAttribute('in', 'SourceGraphic');
feMorph.setAttribute('radius', '0');
expansor.appendChild(feMorph);
defs.appendChild(expansor);
path.setAttribute('stroke', properties[i].mode === 's' ? '#000000' : '#ffffff');
} else {
feMorph = null;
x = null;
}
// TODO move this to a factory or to a constructor
this.storedData[i] = {
elem: path,
x: x,
expan: feMorph,
lastPath: '',
lastOperator: '',
filterId: filterID,
lastRadius: 0,
};
if (properties[i].mode === 'i') {
jLen = currentMasks.length;
var g = createNS('g');
for (j = 0; j < jLen; j += 1) {
g.appendChild(currentMasks[j]);
}
var mask = createNS('mask');
mask.setAttribute('mask-type', 'alpha');
mask.setAttribute('id', layerId + '_' + count);
mask.appendChild(path);
defs.appendChild(mask);
g.setAttribute('mask', 'url(' + getLocationHref() + '#' + layerId + '_' + count + ')');
currentMasks.length = 0;
currentMasks.push(g);
} else {
currentMasks.push(path);
}
if (properties[i].inv && !this.solidPath) {
this.solidPath = this.createLayerSolidPath();
}
// TODO move this to a factory or to a constructor
this.viewData[i] = {
elem: path,
lastPath: '',
op: PropertyFactory.getProp(this.element, properties[i].o, 0, 0.01, this.element),
prop: ShapePropertyFactory.getShapeProp(this.element, properties[i], 3),
invRect: rect,
};
if (!this.viewData[i].prop.k) {
this.drawPath(properties[i], this.viewData[i].prop.v, this.viewData[i]);
}
}
}
this.maskElement = createNS(maskType);
len = currentMasks.length;
for (i = 0; i < len; i += 1) {
this.maskElement.appendChild(currentMasks[i]);
}
if (count > 0) {
this.maskElement.setAttribute('id', layerId);
this.element.maskedElement.setAttribute(maskRef, 'url(' + getLocationHref() + '#' + layerId + ')');
defs.appendChild(this.maskElement);
}
if (this.viewData.length) {
this.element.addRenderableComponent(this);
}
}
MaskElement.prototype.getMaskProperty = function (pos) {
return this.viewData[pos].prop;
};
MaskElement.prototype.renderFrame = function (isFirstFrame) {
var finalMat = this.element.finalTransform.mat;
var i;
var len = this.masksProperties.length;
for (i = 0; i < len; i += 1) {
if (this.viewData[i].prop._mdf || isFirstFrame) {
this.drawPath(this.masksProperties[i], this.viewData[i].prop.v, this.viewData[i]);
}
if (this.viewData[i].op._mdf || isFirstFrame) {
this.viewData[i].elem.setAttribute('fill-opacity', this.viewData[i].op.v);
}
if (this.masksProperties[i].mode !== 'n') {
if (this.viewData[i].invRect && (this.element.finalTransform.mProp._mdf || isFirstFrame)) {
this.viewData[i].invRect.setAttribute('transform', finalMat.getInverseMatrix().to2dCSS());
}
if (this.storedData[i].x && (this.storedData[i].x._mdf || isFirstFrame)) {
var feMorph = this.storedData[i].expan;
if (this.storedData[i].x.v < 0) {
if (this.storedData[i].lastOperator !== 'erode') {
this.storedData[i].lastOperator = 'erode';
this.storedData[i].elem.setAttribute('filter', 'url(' + getLocationHref() + '#' + this.storedData[i].filterId + ')');
}
feMorph.setAttribute('radius', -this.storedData[i].x.v);
} else {
if (this.storedData[i].lastOperator !== 'dilate') {
this.storedData[i].lastOperator = 'dilate';
this.storedData[i].elem.setAttribute('filter', null);
}
this.storedData[i].elem.setAttribute('stroke-width', this.storedData[i].x.v * 2);
}
}
}
}
};
MaskElement.prototype.getMaskelement = function () {
return this.maskElement;
};
MaskElement.prototype.createLayerSolidPath = function () {
var path = 'M0,0 ';
path += ' h' + this.globalData.compSize.w;
path += ' v' + this.globalData.compSize.h;
path += ' h-' + this.globalData.compSize.w;
path += ' v-' + this.globalData.compSize.h + ' ';
return path;
};
MaskElement.prototype.drawPath = function (pathData, pathNodes, viewData) {
var pathString = ' M' + pathNodes.v[0][0] + ',' + pathNodes.v[0][1];
var i;
var len;
len = pathNodes._length;
for (i = 1; i < len; i += 1) {
// pathString += " C"+pathNodes.o[i-1][0]+','+pathNodes.o[i-1][1] + " "+pathNodes.i[i][0]+','+pathNodes.i[i][1] + " "+pathNodes.v[i][0]+','+pathNodes.v[i][1];
pathString += ' C' + pathNodes.o[i - 1][0] + ',' + pathNodes.o[i - 1][1] + ' ' + pathNodes.i[i][0] + ',' + pathNodes.i[i][1] + ' ' + pathNodes.v[i][0] + ',' + pathNodes.v[i][1];
}
// pathString += " C"+pathNodes.o[i-1][0]+','+pathNodes.o[i-1][1] + " "+pathNodes.i[0][0]+','+pathNodes.i[0][1] + " "+pathNodes.v[0][0]+','+pathNodes.v[0][1];
if (pathNodes.c && len > 1) {
pathString += ' C' + pathNodes.o[i - 1][0] + ',' + pathNodes.o[i - 1][1] + ' ' + pathNodes.i[0][0] + ',' + pathNodes.i[0][1] + ' ' + pathNodes.v[0][0] + ',' + pathNodes.v[0][1];
}
// pathNodes.__renderedString = pathString;
if (viewData.lastPath !== pathString) {
var pathShapeValue = '';
if (viewData.elem) {
if (pathNodes.c) {
pathShapeValue = pathData.inv ? this.solidPath + pathString : pathString;
}
viewData.elem.setAttribute('d', pathShapeValue);
}
viewData.lastPath = pathString;
}
};
MaskElement.prototype.destroy = function () {
this.element = null;
this.globalData = null;
this.maskElement = null;
this.data = null;
this.masksProperties = null;
};
export default MaskElement;

153
node_modules/lottie-web/player/js/module.js generated vendored Normal file
View File

@@ -0,0 +1,153 @@
/* <%= contents %> */
import { setLocationHref, setWebWorker } from './main';
import animationManager from './animation/AnimationManager';
import {
setDefaultCurveSegments,
getDefaultCurveSegments,
roundValues,
setIdPrefix,
setSubframeEnabled,
setExpressionsPlugin,
} from './utils/common';
import PropertyFactory from './utils/PropertyFactory';
import ShapePropertyFactory from './utils/shapes/ShapeProperty';
import Matrix from './3rd_party/transformation-matrix';
const lottie = {};
function setLocation(href) {
setLocationHref(href);
}
function searchAnimations() {
if (standalone === true) {
animationManager.searchAnimations(animationData, standalone, renderer);
} else {
animationManager.searchAnimations();
}
}
function setSubframeRendering(flag) {
setSubframeEnabled(flag);
}
function setPrefix(prefix) {
setIdPrefix(prefix);
}
function loadAnimation(params) {
if (standalone === true) {
params.animationData = JSON.parse(animationData);
}
return animationManager.loadAnimation(params);
}
function setQuality(value) {
if (typeof value === 'string') {
switch (value) {
case 'high':
setDefaultCurveSegments(200);
break;
default:
case 'medium':
setDefaultCurveSegments(50);
break;
case 'low':
setDefaultCurveSegments(10);
break;
}
} else if (!isNaN(value) && value > 1) {
setDefaultCurveSegments(value);
}
if (getDefaultCurveSegments() >= 50) {
roundValues(false);
} else {
roundValues(true);
}
}
function inBrowser() {
return typeof navigator !== 'undefined';
}
function installPlugin(type, plugin) {
if (type === 'expressions') {
setExpressionsPlugin(plugin);
}
}
function getFactory(name) {
switch (name) {
case 'propertyFactory':
return PropertyFactory;
case 'shapePropertyFactory':
return ShapePropertyFactory;
case 'matrix':
return Matrix;
default:
return null;
}
}
lottie.play = animationManager.play;
lottie.pause = animationManager.pause;
lottie.setLocationHref = setLocation;
lottie.togglePause = animationManager.togglePause;
lottie.setSpeed = animationManager.setSpeed;
lottie.setDirection = animationManager.setDirection;
lottie.stop = animationManager.stop;
lottie.searchAnimations = searchAnimations;
lottie.registerAnimation = animationManager.registerAnimation;
lottie.loadAnimation = loadAnimation;
lottie.setSubframeRendering = setSubframeRendering;
lottie.resize = animationManager.resize;
// lottie.start = start;
lottie.goToAndStop = animationManager.goToAndStop;
lottie.destroy = animationManager.destroy;
lottie.setQuality = setQuality;
lottie.inBrowser = inBrowser;
lottie.installPlugin = installPlugin;
lottie.freeze = animationManager.freeze;
lottie.unfreeze = animationManager.unfreeze;
lottie.setVolume = animationManager.setVolume;
lottie.mute = animationManager.mute;
lottie.unmute = animationManager.unmute;
lottie.getRegisteredAnimations = animationManager.getRegisteredAnimations;
lottie.useWebWorker = setWebWorker;
lottie.setIDPrefix = setPrefix;
lottie.__getFactory = getFactory;
lottie.version = '[[BM_VERSION]]';
function checkReady() {
if (document.readyState === 'complete') {
clearInterval(readyStateCheckInterval);
searchAnimations();
}
}
function getQueryVariable(variable) {
var vars = queryString.split('&');
for (var i = 0; i < vars.length; i += 1) {
var pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) == variable) { // eslint-disable-line eqeqeq
return decodeURIComponent(pair[1]);
}
}
return null;
}
var standalone = '__[STANDALONE]__';
var animationData = '__[ANIMATIONDATA]__';
var renderer = '';
var queryString;
if (standalone) {
var scripts = document.getElementsByTagName('script');
var index = scripts.length - 1;
var myScript = scripts[index] || {
src: '',
};
queryString = myScript.src ? myScript.src.replace(/^[^\?]+\??/, '') : ''; // eslint-disable-line no-useless-escape
renderer = getQueryVariable('renderer');
}
var readyStateCheckInterval = setInterval(checkReady, 100);
export default lottie;

20
node_modules/lottie-web/player/js/modules/canvas.js generated vendored Normal file
View File

@@ -0,0 +1,20 @@
import lottie from './canvas_light';
import {
setExpressionsPlugin,
setExpressionInterfaces,
} from '../utils/common';
import Expressions from '../utils/expressions/Expressions';
import interfacesProvider from '../utils/expressions/InterfacesProvider';
import expressionPropertyDecorator from '../utils/expressions/ExpressionPropertyDecorator';
import expressionTextPropertyDecorator from '../utils/expressions/ExpressionTextPropertyDecorator';
import CVTransformEffect from '../elements/canvasElements/effects/CVTransformEffect';
import { registerEffect } from '../elements/canvasElements/CVEffects';
// Registering expression plugin
setExpressionsPlugin(Expressions);
setExpressionInterfaces(interfacesProvider);
expressionPropertyDecorator();
expressionTextPropertyDecorator();
registerEffect(35, CVTransformEffect);
export default lottie;

View File

@@ -0,0 +1,25 @@
import lottie from './main';
import { ShapeModifiers } from '../utils/shapes/ShapeModifiers';
import TrimModifier from '../utils/shapes/TrimModifier';
import PuckerAndBloatModifier from '../utils/shapes/PuckerAndBloatModifier';
import RepeaterModifier from '../utils/shapes/RepeaterModifier';
import RoundCornersModifier from '../utils/shapes/RoundCornersModifier';
import ZigZagModifier from '../utils/shapes/ZigZagModifier';
import OffsetPathModifier from '../utils/shapes/OffsetPathModifier';
import CanvasRenderer from '../renderers/CanvasRenderer';
import {
registerRenderer,
} from '../renderers/renderersManager';
// Registering renderers
registerRenderer('canvas', CanvasRenderer);
// Registering shape modifiers
ShapeModifiers.registerModifier('tm', TrimModifier);
ShapeModifiers.registerModifier('pb', PuckerAndBloatModifier);
ShapeModifiers.registerModifier('rp', RepeaterModifier);
ShapeModifiers.registerModifier('rd', RoundCornersModifier);
ShapeModifiers.registerModifier('zz', ZigZagModifier);
ShapeModifiers.registerModifier('op', OffsetPathModifier);
export default lottie;

68
node_modules/lottie-web/player/js/modules/full.js generated vendored Normal file
View File

@@ -0,0 +1,68 @@
import lottie from './main';
import {
setExpressionsPlugin,
setExpressionInterfaces,
} from '../utils/common';
import { ShapeModifiers } from '../utils/shapes/ShapeModifiers';
import TrimModifier from '../utils/shapes/TrimModifier';
import PuckerAndBloatModifier from '../utils/shapes/PuckerAndBloatModifier';
import RepeaterModifier from '../utils/shapes/RepeaterModifier';
import RoundCornersModifier from '../utils/shapes/RoundCornersModifier';
import ZigZagModifier from '../utils/shapes/ZigZagModifier';
import OffsetPathModifier from '../utils/shapes/OffsetPathModifier';
import CanvasRenderer from '../renderers/CanvasRenderer';
import HybridRenderer from '../renderers/HybridRenderer';
import SVGRenderer from '../renderers/SVGRenderer';
import {
registerRenderer,
} from '../renderers/renderersManager';
import Expressions from '../utils/expressions/Expressions';
import interfacesProvider from '../utils/expressions/InterfacesProvider';
import expressionPropertyDecorator from '../utils/expressions/ExpressionPropertyDecorator';
import expressionTextPropertyDecorator from '../utils/expressions/ExpressionTextPropertyDecorator';
// SVG effects
import { registerEffect } from '../elements/svgElements/SVGEffects';
import SVGTintFilter from '../elements/svgElements/effects/SVGTintEffect';
import SVGFillFilter from '../elements/svgElements/effects/SVGFillFilter';
import SVGStrokeEffect from '../elements/svgElements/effects/SVGStrokeEffect';
import SVGTritoneFilter from '../elements/svgElements/effects/SVGTritoneFilter';
import SVGProLevelsFilter from '../elements/svgElements/effects/SVGProLevelsFilter';
import SVGDropShadowEffect from '../elements/svgElements/effects/SVGDropShadowEffect';
import SVGMatte3Effect from '../elements/svgElements/effects/SVGMatte3Effect';
import SVGGaussianBlurEffect from '../elements/svgElements/effects/SVGGaussianBlurEffect';
import SVGTransformEffect from '../elements/svgElements/effects/SVGTransformEffect';
import CVTransformEffect from '../elements/canvasElements/effects/CVTransformEffect';
import { registerEffect as canvasRegisterEffect } from '../elements/canvasElements/CVEffects';
// Registering renderers
registerRenderer('canvas', CanvasRenderer);
registerRenderer('html', HybridRenderer);
registerRenderer('svg', SVGRenderer);
// Registering shape modifiers
ShapeModifiers.registerModifier('tm', TrimModifier);
ShapeModifiers.registerModifier('pb', PuckerAndBloatModifier);
ShapeModifiers.registerModifier('rp', RepeaterModifier);
ShapeModifiers.registerModifier('rd', RoundCornersModifier);
ShapeModifiers.registerModifier('zz', ZigZagModifier);
ShapeModifiers.registerModifier('op', OffsetPathModifier);
// Registering expression plugin
setExpressionsPlugin(Expressions);
setExpressionInterfaces(interfacesProvider);
expressionPropertyDecorator();
expressionTextPropertyDecorator();
// Registering svg effects
registerEffect(20, SVGTintFilter, true);
registerEffect(21, SVGFillFilter, true);
registerEffect(22, SVGStrokeEffect, false);
registerEffect(23, SVGTritoneFilter, true);
registerEffect(24, SVGProLevelsFilter, true);
registerEffect(25, SVGDropShadowEffect, true);
registerEffect(28, SVGMatte3Effect, false);
registerEffect(29, SVGGaussianBlurEffect, true);
registerEffect(35, SVGTransformEffect, false);
canvasRegisterEffect(35, CVTransformEffect);
export default lottie;

View File

37
node_modules/lottie-web/player/js/modules/html.js generated vendored Normal file
View File

@@ -0,0 +1,37 @@
import lottie from './html_light';
import {
setExpressionsPlugin,
setExpressionInterfaces,
} from '../utils/common';
import Expressions from '../utils/expressions/Expressions';
import interfacesProvider from '../utils/expressions/InterfacesProvider';
import expressionPropertyDecorator from '../utils/expressions/ExpressionPropertyDecorator';
import expressionTextPropertyDecorator from '../utils/expressions/ExpressionTextPropertyDecorator';
// SVG effects
import { registerEffect } from '../elements/svgElements/SVGEffects';
import SVGTintFilter from '../elements/svgElements/effects/SVGTintEffect';
import SVGFillFilter from '../elements/svgElements/effects/SVGFillFilter';
import SVGStrokeEffect from '../elements/svgElements/effects/SVGStrokeEffect';
import SVGTritoneFilter from '../elements/svgElements/effects/SVGTritoneFilter';
import SVGProLevelsFilter from '../elements/svgElements/effects/SVGProLevelsFilter';
import SVGDropShadowEffect from '../elements/svgElements/effects/SVGDropShadowEffect';
import SVGMatte3Effect from '../elements/svgElements/effects/SVGMatte3Effect';
import SVGGaussianBlurEffect from '../elements/svgElements/effects/SVGGaussianBlurEffect';
import SVGTransformEffect from '../elements/svgElements/effects/SVGTransformEffect';
// Registering expression plugin
setExpressionsPlugin(Expressions);
setExpressionInterfaces(interfacesProvider);
expressionPropertyDecorator();
expressionTextPropertyDecorator();
registerEffect(20, SVGTintFilter, true);
registerEffect(21, SVGFillFilter, true);
registerEffect(22, SVGStrokeEffect, false);
registerEffect(23, SVGTritoneFilter, true);
registerEffect(24, SVGProLevelsFilter, true);
registerEffect(25, SVGDropShadowEffect, true);
registerEffect(28, SVGMatte3Effect, false);
registerEffect(29, SVGGaussianBlurEffect, true);
registerEffect(35, SVGTransformEffect, false);
export default lottie;

View File

@@ -0,0 +1,25 @@
import lottie from './main';
import { ShapeModifiers } from '../utils/shapes/ShapeModifiers';
import TrimModifier from '../utils/shapes/TrimModifier';
import PuckerAndBloatModifier from '../utils/shapes/PuckerAndBloatModifier';
import RepeaterModifier from '../utils/shapes/RepeaterModifier';
import RoundCornersModifier from '../utils/shapes/RoundCornersModifier';
import ZigZagModifier from '../utils/shapes/ZigZagModifier';
import OffsetPathModifier from '../utils/shapes/OffsetPathModifier';
import HybridRenderer from '../renderers/HybridRenderer';
import {
registerRenderer,
} from '../renderers/renderersManager';
// Registering renderers
registerRenderer('html', HybridRenderer);
// Registering shape modifiers
ShapeModifiers.registerModifier('tm', TrimModifier);
ShapeModifiers.registerModifier('pb', PuckerAndBloatModifier);
ShapeModifiers.registerModifier('rp', RepeaterModifier);
ShapeModifiers.registerModifier('rd', RoundCornersModifier);
ShapeModifiers.registerModifier('zz', ZigZagModifier);
ShapeModifiers.registerModifier('op', OffsetPathModifier);
export default lottie;

162
node_modules/lottie-web/player/js/modules/main.js generated vendored Normal file
View File

@@ -0,0 +1,162 @@
import { setLocationHref, setWebWorker } from '../main';
import animationManager from '../animation/AnimationManager';
import {
setDefaultCurveSegments,
getDefaultCurveSegments,
roundValues,
setIdPrefix,
setSubframeEnabled,
setExpressionsPlugin,
} from '../utils/common';
import PropertyFactory from '../utils/PropertyFactory';
import ShapePropertyFactory from '../utils/shapes/ShapeProperty';
import Matrix from '../3rd_party/transformation-matrix';
const lottie = {};
var standalone = '__[STANDALONE]__';
var animationData = '__[ANIMATIONDATA]__';
var renderer = '';
function setLocation(href) {
setLocationHref(href);
}
function searchAnimations() {
if (standalone === true) {
animationManager.searchAnimations(animationData, standalone, renderer);
} else {
animationManager.searchAnimations();
}
}
function setSubframeRendering(flag) {
setSubframeEnabled(flag);
}
function setPrefix(prefix) {
setIdPrefix(prefix);
}
function loadAnimation(params) {
if (standalone === true) {
params.animationData = JSON.parse(animationData);
}
return animationManager.loadAnimation(params);
}
function setQuality(value) {
if (typeof value === 'string') {
switch (value) {
case 'high':
setDefaultCurveSegments(200);
break;
default:
case 'medium':
setDefaultCurveSegments(50);
break;
case 'low':
setDefaultCurveSegments(10);
break;
}
} else if (!isNaN(value) && value > 1) {
setDefaultCurveSegments(value);
}
if (getDefaultCurveSegments() >= 50) {
roundValues(false);
} else {
roundValues(true);
}
}
function inBrowser() {
return typeof navigator !== 'undefined';
}
function installPlugin(type, plugin) {
if (type === 'expressions') {
setExpressionsPlugin(plugin);
}
}
function getFactory(name) {
switch (name) {
case 'propertyFactory':
return PropertyFactory;
case 'shapePropertyFactory':
return ShapePropertyFactory;
case 'matrix':
return Matrix;
default:
return null;
}
}
lottie.play = animationManager.play;
lottie.pause = animationManager.pause;
lottie.setLocationHref = setLocation;
lottie.togglePause = animationManager.togglePause;
lottie.setSpeed = animationManager.setSpeed;
lottie.setDirection = animationManager.setDirection;
lottie.stop = animationManager.stop;
lottie.searchAnimations = searchAnimations;
lottie.registerAnimation = animationManager.registerAnimation;
lottie.loadAnimation = loadAnimation;
lottie.setSubframeRendering = setSubframeRendering;
lottie.resize = animationManager.resize;
// lottie.start = start;
lottie.goToAndStop = animationManager.goToAndStop;
lottie.destroy = animationManager.destroy;
lottie.setQuality = setQuality;
lottie.inBrowser = inBrowser;
lottie.installPlugin = installPlugin;
lottie.freeze = animationManager.freeze;
lottie.unfreeze = animationManager.unfreeze;
lottie.setVolume = animationManager.setVolume;
lottie.mute = animationManager.mute;
lottie.unmute = animationManager.unmute;
lottie.getRegisteredAnimations = animationManager.getRegisteredAnimations;
lottie.useWebWorker = setWebWorker;
lottie.setIDPrefix = setPrefix;
lottie.__getFactory = getFactory;
lottie.version = '[[BM_VERSION]]';
function checkReady() {
if (document.readyState === 'complete') {
clearInterval(readyStateCheckInterval);
searchAnimations();
}
}
function getQueryVariable(variable) {
var vars = queryString.split('&');
for (var i = 0; i < vars.length; i += 1) {
var pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) == variable) { // eslint-disable-line eqeqeq
return decodeURIComponent(pair[1]);
}
}
return null;
}
var queryString = '';
if (standalone) {
var scripts = document.getElementsByTagName('script');
var index = scripts.length - 1;
var myScript = scripts[index] || {
src: '',
};
queryString = myScript.src ? myScript.src.replace(/^[^\?]+\??/, '') : ''; // eslint-disable-line no-useless-escape
renderer = getQueryVariable('renderer');
}
var readyStateCheckInterval = setInterval(checkReady, 100);
// this adds bodymovin to the window object for backwards compatibility
try {
if (!(typeof exports === 'object' && typeof module !== 'undefined')
&& !(typeof define === 'function' && define.amd) // eslint-disable-line no-undef
) {
window.bodymovin = lottie;
}
} catch (err) {
//
}
export default lottie;

37
node_modules/lottie-web/player/js/modules/svg.js generated vendored Normal file
View File

@@ -0,0 +1,37 @@
import lottie from './svg_light';
import {
setExpressionsPlugin,
setExpressionInterfaces,
} from '../utils/common';
import Expressions from '../utils/expressions/Expressions';
import interfacesProvider from '../utils/expressions/InterfacesProvider';
import expressionPropertyDecorator from '../utils/expressions/ExpressionPropertyDecorator';
import expressionTextPropertyDecorator from '../utils/expressions/ExpressionTextPropertyDecorator';
// SVG effects
import { registerEffect } from '../elements/svgElements/SVGEffects';
import SVGTintFilter from '../elements/svgElements/effects/SVGTintEffect';
import SVGFillFilter from '../elements/svgElements/effects/SVGFillFilter';
import SVGStrokeEffect from '../elements/svgElements/effects/SVGStrokeEffect';
import SVGTritoneFilter from '../elements/svgElements/effects/SVGTritoneFilter';
import SVGProLevelsFilter from '../elements/svgElements/effects/SVGProLevelsFilter';
import SVGDropShadowEffect from '../elements/svgElements/effects/SVGDropShadowEffect';
import SVGMatte3Effect from '../elements/svgElements/effects/SVGMatte3Effect';
import SVGGaussianBlurEffect from '../elements/svgElements/effects/SVGGaussianBlurEffect';
import SVGTransformEffect from '../elements/svgElements/effects/SVGTransformEffect';
// Registering expression plugin
setExpressionsPlugin(Expressions);
setExpressionInterfaces(interfacesProvider);
expressionPropertyDecorator();
expressionTextPropertyDecorator();
registerEffect(20, SVGTintFilter, true);
registerEffect(21, SVGFillFilter, true);
registerEffect(22, SVGStrokeEffect, false);
registerEffect(23, SVGTritoneFilter, true);
registerEffect(24, SVGProLevelsFilter, true);
registerEffect(25, SVGDropShadowEffect, true);
registerEffect(28, SVGMatte3Effect, false);
registerEffect(29, SVGGaussianBlurEffect, true);
registerEffect(35, SVGTransformEffect, false);
export default lottie;

25
node_modules/lottie-web/player/js/modules/svg_light.js generated vendored Normal file
View File

@@ -0,0 +1,25 @@
import lottie from './main';
import { ShapeModifiers } from '../utils/shapes/ShapeModifiers';
import TrimModifier from '../utils/shapes/TrimModifier';
import PuckerAndBloatModifier from '../utils/shapes/PuckerAndBloatModifier';
import RepeaterModifier from '../utils/shapes/RepeaterModifier';
import RoundCornersModifier from '../utils/shapes/RoundCornersModifier';
import ZigZagModifier from '../utils/shapes/ZigZagModifier';
import OffsetPathModifier from '../utils/shapes/OffsetPathModifier';
import SVGRenderer from '../renderers/SVGRenderer';
import {
registerRenderer,
} from '../renderers/renderersManager';
// Registering renderers
registerRenderer('svg', SVGRenderer);
// Registering shape modifiers
ShapeModifiers.registerModifier('tm', TrimModifier);
ShapeModifiers.registerModifier('pb', PuckerAndBloatModifier);
ShapeModifiers.registerModifier('rp', RepeaterModifier);
ShapeModifiers.registerModifier('rd', RoundCornersModifier);
ShapeModifiers.registerModifier('zz', ZigZagModifier);
ShapeModifiers.registerModifier('op', OffsetPathModifier);
export default lottie;

View File

@@ -0,0 +1,187 @@
import FontManager from '../utils/FontManager';
import slotFactory from '../utils/SlotManager';
import FootageElement from '../elements/FootageElement';
import AudioElement from '../elements/AudioElement';
function BaseRenderer() {}
BaseRenderer.prototype.checkLayers = function (num) {
var i;
var len = this.layers.length;
var data;
this.completeLayers = true;
for (i = len - 1; i >= 0; i -= 1) {
if (!this.elements[i]) {
data = this.layers[i];
if (data.ip - data.st <= (num - this.layers[i].st) && data.op - data.st > (num - this.layers[i].st)) {
this.buildItem(i);
}
}
this.completeLayers = this.elements[i] ? this.completeLayers : false;
}
this.checkPendingElements();
};
BaseRenderer.prototype.createItem = function (layer) {
switch (layer.ty) {
case 2:
return this.createImage(layer);
case 0:
return this.createComp(layer);
case 1:
return this.createSolid(layer);
case 3:
return this.createNull(layer);
case 4:
return this.createShape(layer);
case 5:
return this.createText(layer);
case 6:
return this.createAudio(layer);
case 13:
return this.createCamera(layer);
case 15:
return this.createFootage(layer);
default:
return this.createNull(layer);
}
};
BaseRenderer.prototype.createCamera = function () {
throw new Error('You\'re using a 3d camera. Try the html renderer.');
};
BaseRenderer.prototype.createAudio = function (data) {
return new AudioElement(data, this.globalData, this);
};
BaseRenderer.prototype.createFootage = function (data) {
return new FootageElement(data, this.globalData, this);
};
BaseRenderer.prototype.buildAllItems = function () {
var i;
var len = this.layers.length;
for (i = 0; i < len; i += 1) {
this.buildItem(i);
}
this.checkPendingElements();
};
BaseRenderer.prototype.includeLayers = function (newLayers) {
this.completeLayers = false;
var i;
var len = newLayers.length;
var j;
var jLen = this.layers.length;
for (i = 0; i < len; i += 1) {
j = 0;
while (j < jLen) {
if (this.layers[j].id === newLayers[i].id) {
this.layers[j] = newLayers[i];
break;
}
j += 1;
}
}
};
BaseRenderer.prototype.setProjectInterface = function (pInterface) {
this.globalData.projectInterface = pInterface;
};
BaseRenderer.prototype.initItems = function () {
if (!this.globalData.progressiveLoad) {
this.buildAllItems();
}
};
BaseRenderer.prototype.buildElementParenting = function (element, parentName, hierarchy) {
var elements = this.elements;
var layers = this.layers;
var i = 0;
var len = layers.length;
while (i < len) {
if (layers[i].ind == parentName) { // eslint-disable-line eqeqeq
if (!elements[i] || elements[i] === true) {
this.buildItem(i);
this.addPendingElement(element);
} else {
hierarchy.push(elements[i]);
elements[i].setAsParent();
if (layers[i].parent !== undefined) {
this.buildElementParenting(element, layers[i].parent, hierarchy);
} else {
element.setHierarchy(hierarchy);
}
}
}
i += 1;
}
};
BaseRenderer.prototype.addPendingElement = function (element) {
this.pendingElements.push(element);
};
BaseRenderer.prototype.searchExtraCompositions = function (assets) {
var i;
var len = assets.length;
for (i = 0; i < len; i += 1) {
if (assets[i].xt) {
var comp = this.createComp(assets[i]);
comp.initExpressions();
this.globalData.projectInterface.registerComposition(comp);
}
}
};
BaseRenderer.prototype.getElementById = function (ind) {
var i;
var len = this.elements.length;
for (i = 0; i < len; i += 1) {
if (this.elements[i].data.ind === ind) {
return this.elements[i];
}
}
return null;
};
BaseRenderer.prototype.getElementByPath = function (path) {
var pathValue = path.shift();
var element;
if (typeof pathValue === 'number') {
element = this.elements[pathValue];
} else {
var i;
var len = this.elements.length;
for (i = 0; i < len; i += 1) {
if (this.elements[i].data.nm === pathValue) {
element = this.elements[i];
break;
}
}
}
if (path.length === 0) {
return element;
}
return element.getElementByPath(path);
};
BaseRenderer.prototype.setupGlobalData = function (animData, fontsContainer) {
this.globalData.fontManager = new FontManager();
this.globalData.slotManager = slotFactory(animData);
this.globalData.fontManager.addChars(animData.chars);
this.globalData.fontManager.addFonts(animData.fonts, fontsContainer);
this.globalData.getAssetData = this.animationItem.getAssetData.bind(this.animationItem);
this.globalData.getAssetsPath = this.animationItem.getAssetsPath.bind(this.animationItem);
this.globalData.imageLoader = this.animationItem.imagePreloader;
this.globalData.audioController = this.animationItem.audioController;
this.globalData.frameId = 0;
this.globalData.frameRate = animData.fr;
this.globalData.nm = animData.nm;
this.globalData.compSize = {
w: animData.w,
h: animData.h,
};
};
export default BaseRenderer;

View File

@@ -0,0 +1,60 @@
import {
extendPrototype,
} from '../utils/functionExtensions';
import Matrix from '../3rd_party/transformation-matrix';
import CanvasRendererBase from './CanvasRendererBase';
import CVContextData from '../elements/canvasElements/CVContextData';
import CVCompElement from '../elements/canvasElements/CVCompElement';
function CanvasRenderer(animationItem, config) {
this.animationItem = animationItem;
this.renderConfig = {
clearCanvas: (config && config.clearCanvas !== undefined) ? config.clearCanvas : true,
context: (config && config.context) || null,
progressiveLoad: (config && config.progressiveLoad) || false,
preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
contentVisibility: (config && config.contentVisibility) || 'visible',
className: (config && config.className) || '',
id: (config && config.id) || '',
runExpressions: !config || config.runExpressions === undefined || config.runExpressions,
};
this.renderConfig.dpr = (config && config.dpr) || 1;
if (this.animationItem.wrapper) {
this.renderConfig.dpr = (config && config.dpr) || window.devicePixelRatio || 1;
}
this.renderedFrame = -1;
this.globalData = {
frameNum: -1,
_mdf: false,
renderConfig: this.renderConfig,
currentGlobalAlpha: -1,
};
this.contextData = new CVContextData();
this.elements = [];
this.pendingElements = [];
this.transformMat = new Matrix();
this.completeLayers = false;
this.rendererType = 'canvas';
if (this.renderConfig.clearCanvas) {
this.ctxTransform = this.contextData.transform.bind(this.contextData);
this.ctxOpacity = this.contextData.opacity.bind(this.contextData);
this.ctxFillStyle = this.contextData.fillStyle.bind(this.contextData);
this.ctxStrokeStyle = this.contextData.strokeStyle.bind(this.contextData);
this.ctxLineWidth = this.contextData.lineWidth.bind(this.contextData);
this.ctxLineCap = this.contextData.lineCap.bind(this.contextData);
this.ctxLineJoin = this.contextData.lineJoin.bind(this.contextData);
this.ctxMiterLimit = this.contextData.miterLimit.bind(this.contextData);
this.ctxFill = this.contextData.fill.bind(this.contextData);
this.ctxFillRect = this.contextData.fillRect.bind(this.contextData);
this.ctxStroke = this.contextData.stroke.bind(this.contextData);
this.save = this.contextData.save.bind(this.contextData);
}
}
extendPrototype([CanvasRendererBase], CanvasRenderer);
CanvasRenderer.prototype.createComp = function (data) {
return new CVCompElement(data, this.globalData, this);
};
export default CanvasRenderer;

View File

@@ -0,0 +1,317 @@
import {
extendPrototype,
} from '../utils/functionExtensions';
import {
createSizedArray,
} from '../utils/helpers/arrays';
import createTag from '../utils/helpers/html_elements';
import SVGRenderer from './SVGRenderer';
import BaseRenderer from './BaseRenderer';
import CVShapeElement from '../elements/canvasElements/CVShapeElement';
import CVTextElement from '../elements/canvasElements/CVTextElement';
import CVImageElement from '../elements/canvasElements/CVImageElement';
import CVSolidElement from '../elements/canvasElements/CVSolidElement';
function CanvasRendererBase() {
}
extendPrototype([BaseRenderer], CanvasRendererBase);
CanvasRendererBase.prototype.createShape = function (data) {
return new CVShapeElement(data, this.globalData, this);
};
CanvasRendererBase.prototype.createText = function (data) {
return new CVTextElement(data, this.globalData, this);
};
CanvasRendererBase.prototype.createImage = function (data) {
return new CVImageElement(data, this.globalData, this);
};
CanvasRendererBase.prototype.createSolid = function (data) {
return new CVSolidElement(data, this.globalData, this);
};
CanvasRendererBase.prototype.createNull = SVGRenderer.prototype.createNull;
CanvasRendererBase.prototype.ctxTransform = function (props) {
if (props[0] === 1 && props[1] === 0 && props[4] === 0 && props[5] === 1 && props[12] === 0 && props[13] === 0) {
return;
}
this.canvasContext.transform(props[0], props[1], props[4], props[5], props[12], props[13]);
};
CanvasRendererBase.prototype.ctxOpacity = function (op) {
this.canvasContext.globalAlpha *= op < 0 ? 0 : op;
};
CanvasRendererBase.prototype.ctxFillStyle = function (value) {
this.canvasContext.fillStyle = value;
};
CanvasRendererBase.prototype.ctxStrokeStyle = function (value) {
this.canvasContext.strokeStyle = value;
};
CanvasRendererBase.prototype.ctxLineWidth = function (value) {
this.canvasContext.lineWidth = value;
};
CanvasRendererBase.prototype.ctxLineCap = function (value) {
this.canvasContext.lineCap = value;
};
CanvasRendererBase.prototype.ctxLineJoin = function (value) {
this.canvasContext.lineJoin = value;
};
CanvasRendererBase.prototype.ctxMiterLimit = function (value) {
this.canvasContext.miterLimit = value;
};
CanvasRendererBase.prototype.ctxFill = function (rule) {
this.canvasContext.fill(rule);
};
CanvasRendererBase.prototype.ctxFillRect = function (x, y, w, h) {
this.canvasContext.fillRect(x, y, w, h);
};
CanvasRendererBase.prototype.ctxStroke = function () {
this.canvasContext.stroke();
};
CanvasRendererBase.prototype.reset = function () {
if (!this.renderConfig.clearCanvas) {
this.canvasContext.restore();
return;
}
this.contextData.reset();
};
CanvasRendererBase.prototype.save = function () {
this.canvasContext.save();
};
CanvasRendererBase.prototype.restore = function (actionFlag) {
if (!this.renderConfig.clearCanvas) {
this.canvasContext.restore();
return;
}
if (actionFlag) {
this.globalData.blendMode = 'source-over';
}
this.contextData.restore(actionFlag);
};
CanvasRendererBase.prototype.configAnimation = function (animData) {
if (this.animationItem.wrapper) {
this.animationItem.container = createTag('canvas');
var containerStyle = this.animationItem.container.style;
containerStyle.width = '100%';
containerStyle.height = '100%';
var origin = '0px 0px 0px';
containerStyle.transformOrigin = origin;
containerStyle.mozTransformOrigin = origin;
containerStyle.webkitTransformOrigin = origin;
containerStyle['-webkit-transform'] = origin;
containerStyle.contentVisibility = this.renderConfig.contentVisibility;
this.animationItem.wrapper.appendChild(this.animationItem.container);
this.canvasContext = this.animationItem.container.getContext('2d');
if (this.renderConfig.className) {
this.animationItem.container.setAttribute('class', this.renderConfig.className);
}
if (this.renderConfig.id) {
this.animationItem.container.setAttribute('id', this.renderConfig.id);
}
} else {
this.canvasContext = this.renderConfig.context;
}
this.contextData.setContext(this.canvasContext);
this.data = animData;
this.layers = animData.layers;
this.transformCanvas = {
w: animData.w,
h: animData.h,
sx: 0,
sy: 0,
tx: 0,
ty: 0,
};
this.setupGlobalData(animData, document.body);
this.globalData.canvasContext = this.canvasContext;
this.globalData.renderer = this;
this.globalData.isDashed = false;
this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
this.globalData.transformCanvas = this.transformCanvas;
this.elements = createSizedArray(animData.layers.length);
this.updateContainerSize();
};
CanvasRendererBase.prototype.updateContainerSize = function (width, height) {
this.reset();
var elementWidth;
var elementHeight;
if (width) {
elementWidth = width;
elementHeight = height;
this.canvasContext.canvas.width = elementWidth;
this.canvasContext.canvas.height = elementHeight;
} else {
if (this.animationItem.wrapper && this.animationItem.container) {
elementWidth = this.animationItem.wrapper.offsetWidth;
elementHeight = this.animationItem.wrapper.offsetHeight;
} else {
elementWidth = this.canvasContext.canvas.width;
elementHeight = this.canvasContext.canvas.height;
}
this.canvasContext.canvas.width = elementWidth * this.renderConfig.dpr;
this.canvasContext.canvas.height = elementHeight * this.renderConfig.dpr;
}
var elementRel;
var animationRel;
if (this.renderConfig.preserveAspectRatio.indexOf('meet') !== -1 || this.renderConfig.preserveAspectRatio.indexOf('slice') !== -1) {
var par = this.renderConfig.preserveAspectRatio.split(' ');
var fillType = par[1] || 'meet';
var pos = par[0] || 'xMidYMid';
var xPos = pos.substr(0, 4);
var yPos = pos.substr(4);
elementRel = elementWidth / elementHeight;
animationRel = this.transformCanvas.w / this.transformCanvas.h;
if ((animationRel > elementRel && fillType === 'meet') || (animationRel < elementRel && fillType === 'slice')) {
this.transformCanvas.sx = elementWidth / (this.transformCanvas.w / this.renderConfig.dpr);
this.transformCanvas.sy = elementWidth / (this.transformCanvas.w / this.renderConfig.dpr);
} else {
this.transformCanvas.sx = elementHeight / (this.transformCanvas.h / this.renderConfig.dpr);
this.transformCanvas.sy = elementHeight / (this.transformCanvas.h / this.renderConfig.dpr);
}
if (xPos === 'xMid' && ((animationRel < elementRel && fillType === 'meet') || (animationRel > elementRel && fillType === 'slice'))) {
this.transformCanvas.tx = ((elementWidth - this.transformCanvas.w * (elementHeight / this.transformCanvas.h)) / 2) * this.renderConfig.dpr;
} else if (xPos === 'xMax' && ((animationRel < elementRel && fillType === 'meet') || (animationRel > elementRel && fillType === 'slice'))) {
this.transformCanvas.tx = (elementWidth - this.transformCanvas.w * (elementHeight / this.transformCanvas.h)) * this.renderConfig.dpr;
} else {
this.transformCanvas.tx = 0;
}
if (yPos === 'YMid' && ((animationRel > elementRel && fillType === 'meet') || (animationRel < elementRel && fillType === 'slice'))) {
this.transformCanvas.ty = ((elementHeight - this.transformCanvas.h * (elementWidth / this.transformCanvas.w)) / 2) * this.renderConfig.dpr;
} else if (yPos === 'YMax' && ((animationRel > elementRel && fillType === 'meet') || (animationRel < elementRel && fillType === 'slice'))) {
this.transformCanvas.ty = ((elementHeight - this.transformCanvas.h * (elementWidth / this.transformCanvas.w))) * this.renderConfig.dpr;
} else {
this.transformCanvas.ty = 0;
}
} else if (this.renderConfig.preserveAspectRatio === 'none') {
this.transformCanvas.sx = elementWidth / (this.transformCanvas.w / this.renderConfig.dpr);
this.transformCanvas.sy = elementHeight / (this.transformCanvas.h / this.renderConfig.dpr);
this.transformCanvas.tx = 0;
this.transformCanvas.ty = 0;
} else {
this.transformCanvas.sx = this.renderConfig.dpr;
this.transformCanvas.sy = this.renderConfig.dpr;
this.transformCanvas.tx = 0;
this.transformCanvas.ty = 0;
}
this.transformCanvas.props = [this.transformCanvas.sx, 0, 0, 0, 0, this.transformCanvas.sy, 0, 0, 0, 0, 1, 0, this.transformCanvas.tx, this.transformCanvas.ty, 0, 1];
/* var i, len = this.elements.length;
for(i=0;i<len;i+=1){
if(this.elements[i] && this.elements[i].data.ty === 0){
this.elements[i].resize(this.globalData.transformCanvas);
}
} */
this.ctxTransform(this.transformCanvas.props);
this.canvasContext.beginPath();
this.canvasContext.rect(0, 0, this.transformCanvas.w, this.transformCanvas.h);
this.canvasContext.closePath();
this.canvasContext.clip();
this.renderFrame(this.renderedFrame, true);
};
CanvasRendererBase.prototype.destroy = function () {
if (this.renderConfig.clearCanvas && this.animationItem.wrapper) {
this.animationItem.wrapper.innerText = '';
}
var i;
var len = this.layers ? this.layers.length : 0;
for (i = len - 1; i >= 0; i -= 1) {
if (this.elements[i] && this.elements[i].destroy) {
this.elements[i].destroy();
}
}
this.elements.length = 0;
this.globalData.canvasContext = null;
this.animationItem.container = null;
this.destroyed = true;
};
CanvasRendererBase.prototype.renderFrame = function (num, forceRender) {
if ((this.renderedFrame === num && this.renderConfig.clearCanvas === true && !forceRender) || this.destroyed || num === -1) {
return;
}
this.renderedFrame = num;
this.globalData.frameNum = num - this.animationItem._isFirstFrame;
this.globalData.frameId += 1;
this.globalData._mdf = !this.renderConfig.clearCanvas || forceRender;
this.globalData.projectInterface.currentFrame = num;
// console.log('--------');
// console.log('NEW: ',num);
var i;
var len = this.layers.length;
if (!this.completeLayers) {
this.checkLayers(num);
}
for (i = len - 1; i >= 0; i -= 1) {
if (this.completeLayers || this.elements[i]) {
this.elements[i].prepareFrame(num - this.layers[i].st);
}
}
if (this.globalData._mdf) {
if (this.renderConfig.clearCanvas === true) {
this.canvasContext.clearRect(0, 0, this.transformCanvas.w, this.transformCanvas.h);
} else {
this.save();
}
for (i = len - 1; i >= 0; i -= 1) {
if (this.completeLayers || this.elements[i]) {
this.elements[i].renderFrame();
}
}
if (this.renderConfig.clearCanvas !== true) {
this.restore();
}
}
};
CanvasRendererBase.prototype.buildItem = function (pos) {
var elements = this.elements;
if (elements[pos] || this.layers[pos].ty === 99) {
return;
}
var element = this.createItem(this.layers[pos], this, this.globalData);
elements[pos] = element;
element.initExpressions();
/* if(this.layers[pos].ty === 0){
element.resize(this.globalData.transformCanvas);
} */
};
CanvasRendererBase.prototype.checkPendingElements = function () {
while (this.pendingElements.length) {
var element = this.pendingElements.pop();
element.checkParenting();
}
};
CanvasRendererBase.prototype.hide = function () {
this.animationItem.container.style.display = 'none';
};
CanvasRendererBase.prototype.show = function () {
this.animationItem.container.style.display = 'block';
};
export default CanvasRendererBase;

View File

@@ -0,0 +1,54 @@
import {
createSizedArray,
} from '../utils/helpers/arrays';
import CanvasRenderer from './CanvasRenderer';
import createTag from '../utils/helpers/html_elements';
CanvasRenderer.prototype.configAnimation = function (animData) {
if (this.animationItem.wrapper) {
this.animationItem.container = createTag('canvas');
var containerStyle = this.animationItem.container.style;
containerStyle.width = '100%';
containerStyle.height = '100%';
var origin = '0px 0px 0px';
containerStyle.transformOrigin = origin;
containerStyle.mozTransformOrigin = origin;
containerStyle.webkitTransformOrigin = origin;
containerStyle['-webkit-transform'] = origin;
this.animationItem.wrapper.appendChild(this.animationItem.container);
this.canvasContext = this.animationItem.container.getContext('2d');
if (this.renderConfig.className) {
this.animationItem.container.setAttribute('class', this.renderConfig.className);
}
} else {
this.canvasContext = this.renderConfig.context;
}
this.data = animData;
this.layers = animData.layers;
this.transformCanvas = {
w: animData.w,
h: animData.h,
sx: 0,
sy: 0,
tx: 0,
ty: 0,
};
this.globalData.frameId = 0;
this.globalData.frameRate = animData.fr;
this.globalData.nm = animData.nm;
this.globalData.compSize = {
w: animData.w,
h: animData.h,
};
this.globalData.canvasContext = this.canvasContext;
this.globalData.renderer = this;
this.globalData.isDashed = false;
this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
this.globalData.transformCanvas = this.transformCanvas;
this.elements = createSizedArray(animData.layers.length);
this.updateContainerSize();
};
// TODO: review export
export default CanvasRenderer;

View File

@@ -0,0 +1,47 @@
import {
extendPrototype,
} from '../utils/functionExtensions';
import HybridRendererBase from './HybridRendererBase';
import HCompElement from '../elements/htmlElements/HCompElement';
import SVGCompElement from '../elements/svgElements/SVGCompElement';
function HybridRenderer(animationItem, config) {
this.animationItem = animationItem;
this.layers = null;
this.renderedFrame = -1;
this.renderConfig = {
className: (config && config.className) || '',
imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
hideOnTransparent: !(config && config.hideOnTransparent === false),
filterSize: {
width: (config && config.filterSize && config.filterSize.width) || '400%',
height: (config && config.filterSize && config.filterSize.height) || '400%',
x: (config && config.filterSize && config.filterSize.x) || '-100%',
y: (config && config.filterSize && config.filterSize.y) || '-100%',
},
runExpressions: !config || config.runExpressions === undefined || config.runExpressions,
};
this.globalData = {
_mdf: false,
frameNum: -1,
renderConfig: this.renderConfig,
};
this.pendingElements = [];
this.elements = [];
this.threeDElements = [];
this.destroyed = false;
this.camera = null;
this.supports3d = true;
this.rendererType = 'html';
}
extendPrototype([HybridRendererBase], HybridRenderer);
HybridRenderer.prototype.createComp = function (data) {
if (!this.supports3d) {
return new SVGCompElement(data, this.globalData, this);
}
return new HCompElement(data, this.globalData, this);
};
export default HybridRenderer;

View File

@@ -0,0 +1,344 @@
import {
extendPrototype,
} from '../utils/functionExtensions';
import createNS from '../utils/helpers/svg_elements';
import createTag from '../utils/helpers/html_elements';
import SVGRenderer from './SVGRenderer';
import HSolidElement from '../elements/htmlElements/HSolidElement';
import {
styleDiv,
} from '../utils/common';
import BaseRenderer from './BaseRenderer';
import IImageElement from '../elements/ImageElement';
import SVGShapeElement from '../elements/svgElements/SVGShapeElement';
import HShapeElement from '../elements/htmlElements/HShapeElement';
import HTextElement from '../elements/htmlElements/HTextElement';
import HCameraElement from '../elements/htmlElements/HCameraElement';
import HImageElement from '../elements/htmlElements/HImageElement';
import ISolidElement from '../elements/SolidElement';
import SVGTextLottieElement from '../elements/svgElements/SVGTextElement';
function HybridRendererBase(animationItem, config) {
this.animationItem = animationItem;
this.layers = null;
this.renderedFrame = -1;
this.renderConfig = {
className: (config && config.className) || '',
imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
hideOnTransparent: !(config && config.hideOnTransparent === false),
filterSize: {
width: (config && config.filterSize && config.filterSize.width) || '400%',
height: (config && config.filterSize && config.filterSize.height) || '400%',
x: (config && config.filterSize && config.filterSize.x) || '-100%',
y: (config && config.filterSize && config.filterSize.y) || '-100%',
},
};
this.globalData = {
_mdf: false,
frameNum: -1,
renderConfig: this.renderConfig,
};
this.pendingElements = [];
this.elements = [];
this.threeDElements = [];
this.destroyed = false;
this.camera = null;
this.supports3d = true;
this.rendererType = 'html';
}
extendPrototype([BaseRenderer], HybridRendererBase);
HybridRendererBase.prototype.buildItem = SVGRenderer.prototype.buildItem;
HybridRendererBase.prototype.checkPendingElements = function () {
while (this.pendingElements.length) {
var element = this.pendingElements.pop();
element.checkParenting();
}
};
HybridRendererBase.prototype.appendElementInPos = function (element, pos) {
var newDOMElement = element.getBaseElement();
if (!newDOMElement) {
return;
}
var layer = this.layers[pos];
if (!layer.ddd || !this.supports3d) {
if (this.threeDElements) {
this.addTo3dContainer(newDOMElement, pos);
} else {
var i = 0;
var nextDOMElement;
var nextLayer;
var tmpDOMElement;
while (i < pos) {
if (this.elements[i] && this.elements[i] !== true && this.elements[i].getBaseElement) {
nextLayer = this.elements[i];
tmpDOMElement = this.layers[i].ddd ? this.getThreeDContainerByPos(i) : nextLayer.getBaseElement();
nextDOMElement = tmpDOMElement || nextDOMElement;
}
i += 1;
}
if (nextDOMElement) {
if (!layer.ddd || !this.supports3d) {
this.layerElement.insertBefore(newDOMElement, nextDOMElement);
}
} else if (!layer.ddd || !this.supports3d) {
this.layerElement.appendChild(newDOMElement);
}
}
} else {
this.addTo3dContainer(newDOMElement, pos);
}
};
HybridRendererBase.prototype.createShape = function (data) {
if (!this.supports3d) {
return new SVGShapeElement(data, this.globalData, this);
}
return new HShapeElement(data, this.globalData, this);
};
HybridRendererBase.prototype.createText = function (data) {
if (!this.supports3d) {
return new SVGTextLottieElement(data, this.globalData, this);
}
return new HTextElement(data, this.globalData, this);
};
HybridRendererBase.prototype.createCamera = function (data) {
this.camera = new HCameraElement(data, this.globalData, this);
return this.camera;
};
HybridRendererBase.prototype.createImage = function (data) {
if (!this.supports3d) {
return new IImageElement(data, this.globalData, this);
}
return new HImageElement(data, this.globalData, this);
};
HybridRendererBase.prototype.createSolid = function (data) {
if (!this.supports3d) {
return new ISolidElement(data, this.globalData, this);
}
return new HSolidElement(data, this.globalData, this);
};
HybridRendererBase.prototype.createNull = SVGRenderer.prototype.createNull;
HybridRendererBase.prototype.getThreeDContainerByPos = function (pos) {
var i = 0;
var len = this.threeDElements.length;
while (i < len) {
if (this.threeDElements[i].startPos <= pos && this.threeDElements[i].endPos >= pos) {
return this.threeDElements[i].perspectiveElem;
}
i += 1;
}
return null;
};
HybridRendererBase.prototype.createThreeDContainer = function (pos, type) {
var perspectiveElem = createTag('div');
var style;
var containerStyle;
styleDiv(perspectiveElem);
var container = createTag('div');
styleDiv(container);
if (type === '3d') {
style = perspectiveElem.style;
style.width = this.globalData.compSize.w + 'px';
style.height = this.globalData.compSize.h + 'px';
var center = '50% 50%';
style.webkitTransformOrigin = center;
style.mozTransformOrigin = center;
style.transformOrigin = center;
containerStyle = container.style;
var matrix = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
containerStyle.transform = matrix;
containerStyle.webkitTransform = matrix;
}
perspectiveElem.appendChild(container);
// this.resizerElem.appendChild(perspectiveElem);
var threeDContainerData = {
container: container,
perspectiveElem: perspectiveElem,
startPos: pos,
endPos: pos,
type: type,
};
this.threeDElements.push(threeDContainerData);
return threeDContainerData;
};
HybridRendererBase.prototype.build3dContainers = function () {
var i;
var len = this.layers.length;
var lastThreeDContainerData;
var currentContainer = '';
for (i = 0; i < len; i += 1) {
if (this.layers[i].ddd && this.layers[i].ty !== 3) {
if (currentContainer !== '3d') {
currentContainer = '3d';
lastThreeDContainerData = this.createThreeDContainer(i, '3d');
}
lastThreeDContainerData.endPos = Math.max(lastThreeDContainerData.endPos, i);
} else {
if (currentContainer !== '2d') {
currentContainer = '2d';
lastThreeDContainerData = this.createThreeDContainer(i, '2d');
}
lastThreeDContainerData.endPos = Math.max(lastThreeDContainerData.endPos, i);
}
}
len = this.threeDElements.length;
for (i = len - 1; i >= 0; i -= 1) {
this.resizerElem.appendChild(this.threeDElements[i].perspectiveElem);
}
};
HybridRendererBase.prototype.addTo3dContainer = function (elem, pos) {
var i = 0;
var len = this.threeDElements.length;
while (i < len) {
if (pos <= this.threeDElements[i].endPos) {
var j = this.threeDElements[i].startPos;
var nextElement;
while (j < pos) {
if (this.elements[j] && this.elements[j].getBaseElement) {
nextElement = this.elements[j].getBaseElement();
}
j += 1;
}
if (nextElement) {
this.threeDElements[i].container.insertBefore(elem, nextElement);
} else {
this.threeDElements[i].container.appendChild(elem);
}
break;
}
i += 1;
}
};
HybridRendererBase.prototype.configAnimation = function (animData) {
var resizerElem = createTag('div');
var wrapper = this.animationItem.wrapper;
var style = resizerElem.style;
style.width = animData.w + 'px';
style.height = animData.h + 'px';
this.resizerElem = resizerElem;
styleDiv(resizerElem);
style.transformStyle = 'flat';
style.mozTransformStyle = 'flat';
style.webkitTransformStyle = 'flat';
if (this.renderConfig.className) {
resizerElem.setAttribute('class', this.renderConfig.className);
}
wrapper.appendChild(resizerElem);
style.overflow = 'hidden';
var svg = createNS('svg');
svg.setAttribute('width', '1');
svg.setAttribute('height', '1');
styleDiv(svg);
this.resizerElem.appendChild(svg);
var defs = createNS('defs');
svg.appendChild(defs);
this.data = animData;
// Mask animation
this.setupGlobalData(animData, svg);
this.globalData.defs = defs;
this.layers = animData.layers;
this.layerElement = this.resizerElem;
this.build3dContainers();
this.updateContainerSize();
};
HybridRendererBase.prototype.destroy = function () {
if (this.animationItem.wrapper) {
this.animationItem.wrapper.innerText = '';
}
this.animationItem.container = null;
this.globalData.defs = null;
var i;
var len = this.layers ? this.layers.length : 0;
for (i = 0; i < len; i += 1) {
if (this.elements[i] && this.elements[i].destroy) {
this.elements[i].destroy();
}
}
this.elements.length = 0;
this.destroyed = true;
this.animationItem = null;
};
HybridRendererBase.prototype.updateContainerSize = function () {
var elementWidth = this.animationItem.wrapper.offsetWidth;
var elementHeight = this.animationItem.wrapper.offsetHeight;
var elementRel = elementWidth / elementHeight;
var animationRel = this.globalData.compSize.w / this.globalData.compSize.h;
var sx;
var sy;
var tx;
var ty;
if (animationRel > elementRel) {
sx = elementWidth / (this.globalData.compSize.w);
sy = elementWidth / (this.globalData.compSize.w);
tx = 0;
ty = ((elementHeight - this.globalData.compSize.h * (elementWidth / this.globalData.compSize.w)) / 2);
} else {
sx = elementHeight / (this.globalData.compSize.h);
sy = elementHeight / (this.globalData.compSize.h);
tx = (elementWidth - this.globalData.compSize.w * (elementHeight / this.globalData.compSize.h)) / 2;
ty = 0;
}
var style = this.resizerElem.style;
style.webkitTransform = 'matrix3d(' + sx + ',0,0,0,0,' + sy + ',0,0,0,0,1,0,' + tx + ',' + ty + ',0,1)';
style.transform = style.webkitTransform;
};
HybridRendererBase.prototype.renderFrame = SVGRenderer.prototype.renderFrame;
HybridRendererBase.prototype.hide = function () {
this.resizerElem.style.display = 'none';
};
HybridRendererBase.prototype.show = function () {
this.resizerElem.style.display = 'block';
};
HybridRendererBase.prototype.initItems = function () {
this.buildAllItems();
if (this.camera) {
this.camera.setup();
} else {
var cWidth = this.globalData.compSize.w;
var cHeight = this.globalData.compSize.h;
var i;
var len = this.threeDElements.length;
for (i = 0; i < len; i += 1) {
var style = this.threeDElements[i].perspectiveElem.style;
style.webkitPerspective = Math.sqrt(Math.pow(cWidth, 2) + Math.pow(cHeight, 2)) + 'px';
style.perspective = style.webkitPerspective;
}
}
};
HybridRendererBase.prototype.searchExtraCompositions = function (assets) {
var i;
var len = assets.length;
var floatingContainer = createTag('div');
for (i = 0; i < len; i += 1) {
if (assets[i].xt) {
var comp = this.createComp(assets[i], floatingContainer, this.globalData.comp, null);
comp.initExpressions();
this.globalData.projectInterface.registerComposition(comp);
}
}
};
export default HybridRendererBase;

View File

@@ -0,0 +1,82 @@
import {
createElementID,
} from '../utils/common';
import {
extendPrototype,
} from '../utils/functionExtensions';
import createNS from '../utils/helpers/svg_elements';
import SVGCompElement from '../elements/svgElements/SVGCompElement';
import SVGRendererBase from './SVGRendererBase';
function SVGRenderer(animationItem, config) {
this.animationItem = animationItem;
this.layers = null;
this.renderedFrame = -1;
this.svgElement = createNS('svg');
var ariaLabel = '';
if (config && config.title) {
var titleElement = createNS('title');
var titleId = createElementID();
titleElement.setAttribute('id', titleId);
titleElement.textContent = config.title;
this.svgElement.appendChild(titleElement);
ariaLabel += titleId;
}
if (config && config.description) {
var descElement = createNS('desc');
var descId = createElementID();
descElement.setAttribute('id', descId);
descElement.textContent = config.description;
this.svgElement.appendChild(descElement);
ariaLabel += ' ' + descId;
}
if (ariaLabel) {
this.svgElement.setAttribute('aria-labelledby', ariaLabel);
}
var defs = createNS('defs');
this.svgElement.appendChild(defs);
var maskElement = createNS('g');
this.svgElement.appendChild(maskElement);
this.layerElement = maskElement;
this.renderConfig = {
preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
contentVisibility: (config && config.contentVisibility) || 'visible',
progressiveLoad: (config && config.progressiveLoad) || false,
hideOnTransparent: !((config && config.hideOnTransparent === false)),
viewBoxOnly: (config && config.viewBoxOnly) || false,
viewBoxSize: (config && config.viewBoxSize) || false,
className: (config && config.className) || '',
id: (config && config.id) || '',
focusable: config && config.focusable,
filterSize: {
width: (config && config.filterSize && config.filterSize.width) || '100%',
height: (config && config.filterSize && config.filterSize.height) || '100%',
x: (config && config.filterSize && config.filterSize.x) || '0%',
y: (config && config.filterSize && config.filterSize.y) || '0%',
},
width: (config && config.width),
height: (config && config.height),
runExpressions: !config || config.runExpressions === undefined || config.runExpressions,
};
this.globalData = {
_mdf: false,
frameNum: -1,
defs: defs,
renderConfig: this.renderConfig,
};
this.elements = [];
this.pendingElements = [];
this.destroyed = false;
this.rendererType = 'svg';
}
extendPrototype([SVGRendererBase], SVGRenderer);
SVGRenderer.prototype.createComp = function (data) {
return new SVGCompElement(data, this.globalData, this);
};
export default SVGRenderer;

View File

@@ -0,0 +1,255 @@
import { getLocationHref } from '../main';
import {
createElementID,
getExpressionsPlugin,
} from '../utils/common';
import {
extendPrototype,
} from '../utils/functionExtensions';
import {
createSizedArray,
} from '../utils/helpers/arrays';
import createNS from '../utils/helpers/svg_elements';
import BaseRenderer from './BaseRenderer';
import IImageElement from '../elements/ImageElement';
import SVGShapeElement from '../elements/svgElements/SVGShapeElement';
import SVGTextLottieElement from '../elements/svgElements/SVGTextElement'; // eslint-disable-line import/no-cycle
import ISolidElement from '../elements/SolidElement';
import NullElement from '../elements/NullElement';
function SVGRendererBase() {
}
extendPrototype([BaseRenderer], SVGRendererBase);
SVGRendererBase.prototype.createNull = function (data) {
return new NullElement(data, this.globalData, this);
};
SVGRendererBase.prototype.createShape = function (data) {
return new SVGShapeElement(data, this.globalData, this);
};
SVGRendererBase.prototype.createText = function (data) {
return new SVGTextLottieElement(data, this.globalData, this);
};
SVGRendererBase.prototype.createImage = function (data) {
return new IImageElement(data, this.globalData, this);
};
SVGRendererBase.prototype.createSolid = function (data) {
return new ISolidElement(data, this.globalData, this);
};
SVGRendererBase.prototype.configAnimation = function (animData) {
this.svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
this.svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
if (this.renderConfig.viewBoxSize) {
this.svgElement.setAttribute('viewBox', this.renderConfig.viewBoxSize);
} else {
this.svgElement.setAttribute('viewBox', '0 0 ' + animData.w + ' ' + animData.h);
}
if (!this.renderConfig.viewBoxOnly) {
this.svgElement.setAttribute('width', animData.w);
this.svgElement.setAttribute('height', animData.h);
this.svgElement.style.width = '100%';
this.svgElement.style.height = '100%';
this.svgElement.style.transform = 'translate3d(0,0,0)';
this.svgElement.style.contentVisibility = this.renderConfig.contentVisibility;
}
if (this.renderConfig.width) {
this.svgElement.setAttribute('width', this.renderConfig.width);
}
if (this.renderConfig.height) {
this.svgElement.setAttribute('height', this.renderConfig.height);
}
if (this.renderConfig.className) {
this.svgElement.setAttribute('class', this.renderConfig.className);
}
if (this.renderConfig.id) {
this.svgElement.setAttribute('id', this.renderConfig.id);
}
if (this.renderConfig.focusable !== undefined) {
this.svgElement.setAttribute('focusable', this.renderConfig.focusable);
}
this.svgElement.setAttribute('preserveAspectRatio', this.renderConfig.preserveAspectRatio);
// this.layerElement.style.transform = 'translate3d(0,0,0)';
// this.layerElement.style.transformOrigin = this.layerElement.style.mozTransformOrigin = this.layerElement.style.webkitTransformOrigin = this.layerElement.style['-webkit-transform'] = "0px 0px 0px";
this.animationItem.wrapper.appendChild(this.svgElement);
// Mask animation
var defs = this.globalData.defs;
this.setupGlobalData(animData, defs);
this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
this.data = animData;
var maskElement = createNS('clipPath');
var rect = createNS('rect');
rect.setAttribute('width', animData.w);
rect.setAttribute('height', animData.h);
rect.setAttribute('x', 0);
rect.setAttribute('y', 0);
var maskId = createElementID();
maskElement.setAttribute('id', maskId);
maskElement.appendChild(rect);
this.layerElement.setAttribute('clip-path', 'url(' + getLocationHref() + '#' + maskId + ')');
defs.appendChild(maskElement);
this.layers = animData.layers;
this.elements = createSizedArray(animData.layers.length);
};
SVGRendererBase.prototype.destroy = function () {
if (this.animationItem.wrapper) {
this.animationItem.wrapper.innerText = '';
}
this.layerElement = null;
this.globalData.defs = null;
var i;
var len = this.layers ? this.layers.length : 0;
for (i = 0; i < len; i += 1) {
if (this.elements[i] && this.elements[i].destroy) {
this.elements[i].destroy();
}
}
this.elements.length = 0;
this.destroyed = true;
this.animationItem = null;
};
SVGRendererBase.prototype.updateContainerSize = function () {
};
SVGRendererBase.prototype.findIndexByInd = function (ind) {
var i = 0;
var len = this.layers.length;
for (i = 0; i < len; i += 1) {
if (this.layers[i].ind === ind) {
return i;
}
}
return -1;
};
SVGRendererBase.prototype.buildItem = function (pos) {
var elements = this.elements;
if (elements[pos] || this.layers[pos].ty === 99) {
return;
}
elements[pos] = true;
var element = this.createItem(this.layers[pos]);
elements[pos] = element;
if (getExpressionsPlugin()) {
if (this.layers[pos].ty === 0) {
this.globalData.projectInterface.registerComposition(element);
}
element.initExpressions();
}
this.appendElementInPos(element, pos);
if (this.layers[pos].tt) {
var elementIndex = ('tp' in this.layers[pos])
? this.findIndexByInd(this.layers[pos].tp)
: pos - 1;
if (elementIndex === -1) {
return;
}
if (!this.elements[elementIndex] || this.elements[elementIndex] === true) {
this.buildItem(elementIndex);
this.addPendingElement(element);
} else {
var matteElement = elements[elementIndex];
var matteMask = matteElement.getMatte(this.layers[pos].tt);
element.setMatte(matteMask);
}
}
};
SVGRendererBase.prototype.checkPendingElements = function () {
while (this.pendingElements.length) {
var element = this.pendingElements.pop();
element.checkParenting();
if (element.data.tt) {
var i = 0;
var len = this.elements.length;
while (i < len) {
if (this.elements[i] === element) {
var elementIndex = 'tp' in element.data
? this.findIndexByInd(element.data.tp)
: i - 1;
var matteElement = this.elements[elementIndex];
var matteMask = matteElement.getMatte(this.layers[i].tt);
element.setMatte(matteMask);
break;
}
i += 1;
}
}
}
};
SVGRendererBase.prototype.renderFrame = function (num) {
if (this.renderedFrame === num || this.destroyed) {
return;
}
if (num === null) {
num = this.renderedFrame;
} else {
this.renderedFrame = num;
}
// console.log('-------');
// console.log('FRAME ',num);
this.globalData.frameNum = num;
this.globalData.frameId += 1;
this.globalData.projectInterface.currentFrame = num;
this.globalData._mdf = false;
var i;
var len = this.layers.length;
if (!this.completeLayers) {
this.checkLayers(num);
}
for (i = len - 1; i >= 0; i -= 1) {
if (this.completeLayers || this.elements[i]) {
this.elements[i].prepareFrame(num - this.layers[i].st);
}
}
if (this.globalData._mdf) {
for (i = 0; i < len; i += 1) {
if (this.completeLayers || this.elements[i]) {
this.elements[i].renderFrame();
}
}
}
};
SVGRendererBase.prototype.appendElementInPos = function (element, pos) {
var newElement = element.getBaseElement();
if (!newElement) {
return;
}
var i = 0;
var nextElement;
while (i < pos) {
if (this.elements[i] && this.elements[i] !== true && this.elements[i].getBaseElement()) {
nextElement = this.elements[i].getBaseElement();
}
i += 1;
}
if (nextElement) {
this.layerElement.insertBefore(newElement, nextElement);
} else {
this.layerElement.appendChild(newElement);
}
};
SVGRendererBase.prototype.hide = function () {
this.layerElement.style.display = 'none';
};
SVGRendererBase.prototype.show = function () {
this.layerElement.style.display = 'block';
};
export default SVGRendererBase;

View File

@@ -0,0 +1,29 @@
const renderers = {};
const registerRenderer = (key, value) => {
renderers[key] = value;
};
function getRenderer(key) {
return renderers[key];
}
function getRegisteredRenderer() {
// Returns canvas by default for compatibility
if (renderers.canvas) {
return 'canvas';
}
// Returns any renderer that is registered
for (const key in renderers) {
if (renderers[key]) {
return key;
}
}
return '';
}
export {
registerRenderer,
getRenderer,
getRegisteredRenderer,
};

42
node_modules/lottie-web/player/js/utils/BaseEvent.js generated vendored Normal file
View File

@@ -0,0 +1,42 @@
function BaseEvent() {}
BaseEvent.prototype = {
triggerEvent: function (eventName, args) {
if (this._cbs[eventName]) {
var callbacks = this._cbs[eventName];
for (var i = 0; i < callbacks.length; i += 1) {
callbacks[i](args);
}
}
},
addEventListener: function (eventName, callback) {
if (!this._cbs[eventName]) {
this._cbs[eventName] = [];
}
this._cbs[eventName].push(callback);
return function () {
this.removeEventListener(eventName, callback);
}.bind(this);
},
removeEventListener: function (eventName, callback) {
if (!callback) {
this._cbs[eventName] = null;
} else if (this._cbs[eventName]) {
var i = 0;
var len = this._cbs[eventName].length;
while (i < len) {
if (this._cbs[eventName][i] === callback) {
this._cbs[eventName].splice(i, 1);
i -= 1;
len -= 1;
}
i += 1;
}
if (!this._cbs[eventName].length) {
this._cbs[eventName] = null;
}
}
},
};
export default BaseEvent;

Some files were not shown because too many files have changed in this diff Show More