/* Version: 5.6.8 License: MIT */ (typeof navigator !== "undefined") && (function(root, factory) { if (typeof define === "function" && define.amd) { define(function() { return factory(root); }); } else if (typeof module === "object" && module.exports) { module.exports = factory(root); } else { root.lottie = factory(root); root.bodymovin = root.lottie; } }((window || {}), function(window) { "use strict"; var svgNS = "http://www.w3.org/2000/svg"; var locationHref = ''; var initialDefaultFrame = -999999; var subframeEnabled = true; var expressionsPlugin; var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); var cachedColors = {}; var bm_rounder = Math.round; var bm_rnd; var bm_pow = Math.pow; var bm_sqrt = Math.sqrt; var bm_abs = Math.abs; var bm_floor = Math.floor; var bm_max = Math.max; var bm_min = Math.min; var blitter = 10; var BMMath = {}; (function(){ var propertyNames = ["abs", "acos", "acosh", "asin", "asinh", "atan", "atanh", "atan2", "ceil", "cbrt", "expm1", "clz32", "cos", "cosh", "exp", "floor", "fround", "hypot", "imul", "log", "log1p", "log2", "log10", "max", "min", "pow", "random", "round", "sign", "sin", "sinh", "sqrt", "tan", "tanh", "trunc", "E", "LN10", "LN2", "LOG10E", "LOG2E", "PI", "SQRT1_2", "SQRT2"]; var i, len = propertyNames.length; for(i=0;i 1) { hsv[1] = 1; } else if (hsv[1] <= 0) { hsv[1] = 0; } return HSVtoRGB(hsv[0],hsv[1],hsv[2]); } function addBrightnessToRGB(color,offset){ var hsv = RGBtoHSV(color[0]*255,color[1]*255,color[2]*255); hsv[2] += offset; if (hsv[2] > 1) { hsv[2] = 1; } else if (hsv[2] < 0) { hsv[2] = 0; } return HSVtoRGB(hsv[0],hsv[1],hsv[2]); } function addHueToRGB(color,offset) { var hsv = RGBtoHSV(color[0]*255,color[1]*255,color[2]*255); hsv[0] += offset/360; if (hsv[0] > 1) { hsv[0] -= 1; } else if (hsv[0] < 0) { hsv[0] += 1; } return HSVtoRGB(hsv[0],hsv[1],hsv[2]); } var rgbToHex = (function(){ var colorMap = []; var i; var hex; for(i=0;i<256;i+=1){ hex = i.toString(16); colorMap[i] = hex.length == 1 ? '0' + hex : hex; } return function(r, g, b) { if(r<0){ r = 0; } if(g<0){ g = 0; } if(b<0){ b = 0; } return '#' + colorMap[r] + colorMap[g] + colorMap[b]; }; }()); function BaseEvent(){} BaseEvent.prototype = { triggerEvent: function (eventName, args) { if (this._cbs[eventName]) { var len = this._cbs[eventName].length; for (var i = 0; i < len; i++){ this._cbs[eventName][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, len = this._cbs[eventName].length; while(i 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.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(); }; }()); /* 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 (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. })( [], // pool: entropy pool starts empty BMMath // math: package containing random, pow, and seedrandom ); var 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); } else if (initialSlope === 0.0) { return guessForT; } else { return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); } } }; return ob; }()); (function () { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']; } if(!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = setTimeout(function () { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if(!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) { clearTimeout(id); }; }()); function extendPrototype(sources,destination){ var i, len = sources.length, sourcePrototype; for (i = 0;i < len;i += 1) { sourcePrototype = sources[i].prototype; for (var attr in sourcePrototype) { if (sourcePrototype.hasOwnProperty(attr)) destination.prototype[attr] = sourcePrototype[attr]; } } } function getDescriptor(object, prop) { return Object.getOwnPropertyDescriptor(object, prop); } function createProxyFunction(prototype) { function ProxyFunction(){} ProxyFunction.prototype = prototype; return ProxyFunction; } function bezFunction(){ var easingFunctions = []; var math = Math; function pointOnLine2D(x1,y1, x2,y2, x3,y3){ var det1 = (x1*y2) + (y1*x3) + (x2*y3) - (x3*y2) - (y3*x1) - (x2*y1); return det1 > -0.001 && det1 < 0.001; } function pointOnLine3D(x1,y1,z1, x2,y2,z2, x3,y3,z3){ if(z1 === 0 && z2 === 0 && z3 === 0) { return pointOnLine2D(x1,y1, x2,y2, x3,y3); } var dist1 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) + Math.pow(z2 - z1, 2)); var dist2 = Math.sqrt(Math.pow(x3 - x1, 2) + Math.pow(y3 - y1, 2) + Math.pow(z3 - z1, 2)); var dist3 = Math.sqrt(Math.pow(x3 - x2, 2) + Math.pow(y3 - y2, 2) + Math.pow(z3 - z2, 2)); var diffDist; if(dist1 > dist2){ if(dist1 > dist3){ diffDist = dist1 - dist2 - dist3; } else { diffDist = dist3 - dist2 - dist1; } } else if(dist3 > dist2){ diffDist = dist3 - dist2 - dist1; } else { diffDist = dist2 - dist1 - dist3; } return diffDist > -0.0001 && diffDist < 0.0001; } var getBezierLength = (function(){ return function(pt1,pt2,pt3,pt4){ var curveSegments = defaultCurveSegments; var k; var i, len; var ptCoord,perc,addedLength = 0; var ptDistance; var point = [],lastPoint = []; var lengthData = bezier_length_pool.newElement(); len = pt3.length; for(k=0;k lengthPos ? -1 : 1; var flag = true; while(flag){ if(lengths[initPos] <= lengthPos && lengths[initPos+1] > lengthPos){ lPerc = (lengthPos - lengths[initPos]) / (lengths[initPos+1] - lengths[initPos]); flag = false; }else{ initPos += dir; } if(initPos < 0 || initPos >= len - 1){ //FIX for TypedArrays that don't store floating point values with enough accuracy if(initPos === len - 1) { return percents[initPos]; } flag = false; } } return percents[initPos] + (percents[initPos+1] - percents[initPos])*lPerc; } } function getPointInSegment(pt1, pt2, pt3, pt4, percent, bezierData) { var t1 = getDistancePerc(percent,bezierData); var u0 = 1; var u1 = 1 - t1; var ptX = Math.round((u1*u1*u1* pt1[0] + (t1*u1*u1 + u1*t1*u1 + u1*u1*t1)* pt3[0] + (t1*t1*u1 + u1*t1*t1 + t1*u1*t1)*pt4[0] + t1*t1*t1* pt2[0])* 1000) / 1000; var ptY = Math.round((u1*u1*u1* pt1[1] + (t1*u1*u1 + u1*t1*u1 + u1*u1*t1)* pt3[1] + (t1*t1*u1 + u1*t1*t1 + t1*u1*t1)*pt4[1] + t1*t1*t1* pt2[1])* 1000) / 1000; return [ptX, ptY]; } function getSegmentArray() { } var bezier_segment_points = createTypedArray('float32', 8); function getNewSegment(pt1,pt2,pt3,pt4,startPerc,endPerc, bezierData){ startPerc = startPerc < 0 ? 0 : startPerc > 1 ? 1 : startPerc; var t0 = getDistancePerc(startPerc,bezierData); endPerc = endPerc > 1 ? 1 : endPerc; var t1 = getDistancePerc(endPerc,bezierData); var i, len = pt1.length; var u0 = 1 - t0; var u1 = 1 - t1; var u0u0u0 = u0*u0*u0; var t0u0u0_3 = t0*u0*u0*3; var t0t0u0_3 = t0*t0*u0*3; var t0t0t0 = t0*t0*t0; // var u0u0u1 = u0*u0*u1; var t0u0u1_3 = t0*u0*u1 + u0*t0*u1 + u0*u0*t1; var t0t0u1_3 = t0*t0*u1 + u0*t0*t1 + t0*u0*t1; var t0t0t1 = t0*t0*t1; // var u0u1u1 = u0*u1*u1; var t0u1u1_3 = t0*u1*u1 + u0*t1*u1 + u0*u1*t1; var t0t1u1_3 = t0*t1*u1 + u0*t1*t1 + t0*u1*t1; var t0t1t1 = t0*t1*t1; // var u1u1u1 = u1*u1*u1; var t1u1u1_3 = t1*u1*u1 + u1*t1*u1 + u1*u1*t1; var t1t1u1_3 = t1*t1*u1 + u1*t1*t1 + t1*u1*t1; var t1t1t1 = t1*t1*t1; for(i=0;i=0;i-=1){ if(arr[i].ty == 'sh'){ if(arr[i].ks.k.i){ convertPathsToAbsoluteValues(arr[i].ks.k); }else{ jLen = arr[i].ks.k.length; for(j=0;janimVersion[0]){ return true; } else if(animVersion[0] > minimum[0]){ return false; } if(minimum[1]>animVersion[1]){ return true; } else if(animVersion[1] > minimum[1]){ return false; } if(minimum[2]>animVersion[2]){ return true; } else if(animVersion[2] > minimum[2]){ return false; } } var checkText = (function(){ var minimumVersion = [4,4,14]; function updateTextLayer(textLayer){ var documentData = textLayer.t.d; textLayer.t.d = { k: [ { s:documentData, t:0 } ] }; } function iterateLayers(layers){ var i, len = layers.length; for(i=0;i=0;i-=1){ if(arr[i].ty == 'sh'){ if(arr[i].ks.k.i){ arr[i].ks.k.c = arr[i].closed; }else{ jLen = arr[i].ks.k.length; for(j=0;j 0) { shouldLoadFont = false; } if (shouldLoadFont) { var s = createTag('style'); s.setAttribute('f-forigin', fontArr[i].fOrigin); s.setAttribute('f-origin', fontArr[i].origin); s.setAttribute('f-family', fontArr[i].fFamily); s.type = "text/css"; s.innerHTML = "@font-face {" + "font-family: "+fontArr[i].fFamily+"; font-style: normal; src: url('"+fontArr[i].fPath+"');}"; defs.appendChild(s); } } else if(fontArr[i].fOrigin === 'g' || fontArr[i].origin === 1){ loadedSelector = document.querySelectorAll('link[f-forigin="g"], link[f-origin="1"]'); for (j = 0; j < loadedSelector.length; j++) { if (loadedSelector[j].href.indexOf(fontArr[i].fPath) !== -1) { // Font is already loaded shouldLoadFont = false; } } if (shouldLoadFont) { var l = createTag('link'); l.setAttribute('f-forigin', fontArr[i].fOrigin); l.setAttribute('f-origin', fontArr[i].origin); l.type = "text/css"; l.rel = "stylesheet"; l.href = fontArr[i].fPath; document.body.appendChild(l); } } else if(fontArr[i].fOrigin === 't' || fontArr[i].origin === 2){ loadedSelector = document.querySelectorAll('script[f-forigin="t"], script[f-origin="2"]'); for (j = 0; j < loadedSelector.length; j++) { if (fontArr[i].fPath === loadedSelector[j].src) { // Font is already loaded shouldLoadFont = false; } } if (shouldLoadFont) { var sc = createTag('link'); sc.setAttribute('f-forigin', fontArr[i].fOrigin); sc.setAttribute('f-origin', fontArr[i].origin); sc.setAttribute('rel','stylesheet'); sc.setAttribute('href',fontArr[i].fPath); defs.appendChild(sc); } } fontArr[i].helper = createHelper(defs,fontArr[i]); fontArr[i].cache = {}; this.fonts.push(fontArr[i]); } if (_pendingFonts === 0) { this.isLoaded = true; } else { //On some cases even if the font is loaded, it won't load correctly when measuring text on canvas. //Adding this timeout seems to fix it setTimeout(this.checkLoadedFonts.bind(this), 100); } } function addChars(chars){ if(!chars){ return; } if(!this.chars){ this.chars = []; } var i, len = chars.length; var j, jLen = this.chars.length, found; for(i=0;i= nextKeyData.t - offsetTime){ if(keyData.h){ keyData = nextKeyData; } iterationIndex = 0; break; } if ((nextKeyData.t - offsetTime) > frameNum){ iterationIndex = i; break; } if (i < len - 1){ i += 1; } else { iterationIndex = 0; flag = false; } } var k, kLen, perc, jLen, j, fnc; var nextKeyTime = nextKeyData.t - offsetTime; var keyTime = keyData.t - offsetTime; var endValue; if (keyData.to) { if (!keyData.bezierData) { keyData.bezierData = bez.buildBezierData(keyData.s, nextKeyData.s || keyData.e, keyData.to, keyData.ti); } var bezierData = keyData.bezierData; if (frameNum >= nextKeyTime || frameNum < keyTime) { var ind = frameNum >= nextKeyTime ? bezierData.points.length - 1 : 0; kLen = bezierData.points[ind].point.length; for (k = 0; k < kLen; k += 1) { newValue[k] = bezierData.points[ind].point[k]; } // caching._lastKeyframeIndex = -1; } else { if (keyData.__fnct) { fnc = keyData.__fnct; } else { fnc = BezierFactory.getBezierEasing(keyData.o.x, keyData.o.y, keyData.i.x, keyData.i.y, keyData.n).get; keyData.__fnct = fnc; } perc = fnc((frameNum - keyTime) / (nextKeyTime - keyTime)); var distanceInLine = bezierData.segmentLength*perc; var segmentPerc; var addedLength = (caching.lastFrame < frameNum && caching._lastKeyframeIndex === i) ? caching._lastAddedLength : 0; j = (caching.lastFrame < frameNum && caching._lastKeyframeIndex === i) ? caching._lastPoint : 0; flag = true; jLen = bezierData.points.length; while (flag) { addedLength += bezierData.points[j].partialLength; if (distanceInLine === 0 || perc === 0 || j === bezierData.points.length - 1) { kLen = bezierData.points[j].point.length; for (k = 0; k < kLen; k += 1) { newValue[k] = bezierData.points[j].point[k]; } break; } else if (distanceInLine >= addedLength && distanceInLine < addedLength + bezierData.points[j + 1].partialLength) { segmentPerc = (distanceInLine - addedLength) / bezierData.points[j + 1].partialLength; kLen = bezierData.points[j].point.length; for (k = 0; k < kLen; k += 1) { newValue[k] = bezierData.points[j].point[k] + (bezierData.points[j + 1].point[k] - bezierData.points[j].point[k]) * segmentPerc; } break; } if (j < jLen - 1){ j += 1; } else { flag = false; } } caching._lastPoint = j; caching._lastAddedLength = addedLength - bezierData.points[j].partialLength; caching._lastKeyframeIndex = i; } } else { var outX, outY, inX, inY, keyValue; len = keyData.s.length; endValue = nextKeyData.s || keyData.e; if (this.sh && keyData.h !== 1) { if (frameNum >= nextKeyTime) { newValue[0] = endValue[0]; newValue[1] = endValue[1]; newValue[2] = endValue[2]; } else if (frameNum <= keyTime) { newValue[0] = keyData.s[0]; newValue[1] = keyData.s[1]; newValue[2] = keyData.s[2]; } else { var quatStart = createQuaternion(keyData.s); var quatEnd = createQuaternion(endValue); var time = (frameNum - keyTime) / (nextKeyTime - keyTime); quaternionToEuler(newValue, slerp(quatStart, quatEnd, time)); } } else { for(i = 0; i < len; i += 1) { if (keyData.h !== 1) { if (frameNum >= nextKeyTime) { perc = 1; } else if(frameNum < keyTime) { perc = 0; } else { if(keyData.o.x.constructor === Array) { if (!keyData.__fnct) { keyData.__fnct = []; } if (!keyData.__fnct[i]) { outX = (typeof keyData.o.x[i] === 'undefined') ? keyData.o.x[0] : keyData.o.x[i]; outY = (typeof keyData.o.y[i] === 'undefined') ? keyData.o.y[0] : keyData.o.y[i]; inX = (typeof keyData.i.x[i] === 'undefined') ? keyData.i.x[0] : keyData.i.x[i]; inY = (typeof keyData.i.y[i] === 'undefined') ? keyData.i.y[0] : keyData.i.y[i]; fnc = BezierFactory.getBezierEasing(outX, outY, inX, inY).get; keyData.__fnct[i] = fnc; } else { fnc = keyData.__fnct[i]; } } else { if (!keyData.__fnct) { outX = keyData.o.x; outY = keyData.o.y; inX = keyData.i.x; inY = keyData.i.y; fnc = BezierFactory.getBezierEasing(outX, outY, inX, inY).get; keyData.__fnct = fnc; } else { fnc = keyData.__fnct; } } perc = fnc((frameNum - keyTime) / (nextKeyTime - keyTime )); } } endValue = nextKeyData.s || keyData.e; keyValue = keyData.h === 1 ? keyData.s[i] : keyData.s[i] + (endValue[i] - keyData.s[i]) * perc; if (this.propType === 'multidimensional') { newValue[i] = keyValue; } else { newValue = keyValue; } } } } caching.lastIndex = iterationIndex; return newValue; } //based on @Toji's https://github.com/toji/gl-matrix/ function slerp(a, b, t) { var out = []; var ax = a[0], ay = a[1], az = a[2], aw = a[3], bx = b[0], by = b[1], bz = b[2], bw = b[3] var omega, cosom, sinom, scale0, scale1; cosom = ax * bx + ay * by + az * bz + aw * bw; if (cosom < 0.0) { cosom = -cosom; bx = -bx; by = -by; bz = -bz; bw = -bw; } if ((1.0 - cosom) > 0.000001) { omega = Math.acos(cosom); sinom = Math.sin(omega); scale0 = Math.sin((1.0 - t) * omega) / sinom; scale1 = Math.sin(t * omega) / sinom; } else { scale0 = 1.0 - t; scale1 = t; } out[0] = scale0 * ax + scale1 * bx; out[1] = scale0 * ay + scale1 * by; out[2] = scale0 * az + scale1 * bz; out[3] = scale0 * aw + scale1 * bw; return out; } function quaternionToEuler(out, quat) { var qx = quat[0]; var qy = quat[1]; var qz = quat[2]; var qw = quat[3]; var heading = Math.atan2(2*qy*qw-2*qx*qz , 1 - 2*qy*qy - 2*qz*qz) var attitude = Math.asin(2*qx*qy + 2*qz*qw) var bank = Math.atan2(2*qx*qw-2*qy*qz , 1 - 2*qx*qx - 2*qz*qz); out[0] = heading/degToRads; out[1] = attitude/degToRads; out[2] = bank/degToRads; } function createQuaternion(values) { var heading = values[0] * degToRads; var attitude = values[1] * degToRads; var bank = values[2] * degToRads; var c1 = Math.cos(heading / 2); var c2 = Math.cos(attitude / 2); var c3 = Math.cos(bank / 2); var s1 = Math.sin(heading / 2); var s2 = Math.sin(attitude / 2); var s3 = Math.sin(bank / 2); var w = c1 * c2 * c3 - s1 * s2 * s3; var x = s1 * s2 * c3 + c1 * c2 * s3; var y = s1 * c2 * c3 + c1 * s2 * s3; var z = c1 * s2 * c3 - s1 * c2 * s3; return [x,y,z,w]; } function getValueAtCurrentTime(){ var frameNum = this.comp.renderedFrame - this.offsetTime; var initTime = this.keyframes[0].t - this.offsetTime; var endTime = this.keyframes[this.keyframes.length- 1].t-this.offsetTime; if(!(frameNum === this._caching.lastFrame || (this._caching.lastFrame !== initFrame && ((this._caching.lastFrame >= endTime && frameNum >= endTime) || (this._caching.lastFrame < initTime && frameNum < initTime))))){ if(this._caching.lastFrame >= frameNum) { this._caching._lastKeyframeIndex = -1; this._caching.lastIndex = 0; } var renderResult = this.interpolateValue(frameNum, this._caching); this.pv = renderResult; } this._caching.lastFrame = frameNum; return this.pv; } function setVValue(val) { var multipliedValue; if(this.propType === 'unidimensional') { multipliedValue = val * this.mult; if(math_abs(this.v - multipliedValue) > 0.00001) { this.v = multipliedValue; this._mdf = true; } } else { var i = 0, len = this.v.length; while (i < len) { multipliedValue = val[i] * this.mult; if (math_abs(this.v[i] - multipliedValue) > 0.00001) { this.v[i] = multipliedValue; this._mdf = true; } i += 1; } } } function processEffectsSequence() { if (this.elem.globalData.frameId === this.frameId || !this.effectsSequence.length) { return; } if(this.lock) { this.setVValue(this.pv); return; } this.lock = true; this._mdf = this._isFirstFrame; var multipliedValue; var i, len = this.effectsSequence.length; var finalValue = this.kf ? this.pv : this.data.k; for(i = 0; i < len; i += 1) { finalValue = this.effectsSequence[i](finalValue); } this.setVValue(finalValue); this._isFirstFrame = false; this.lock = false; this.frameId = this.elem.globalData.frameId; } function addEffect(effectFunction) { this.effectsSequence.push(effectFunction); this.container.addDynamicProperty(this); } function ValueProperty(elem, data, mult, container){ this.propType = 'unidimensional'; this.mult = mult || 1; this.data = data; this.v = mult ? data.k * mult : data.k; this.pv = data.k; this._mdf = false; this.elem = elem; this.container = container; this.comp = elem.comp; this.k = false; this.kf = false; this.vel = 0; this.effectsSequence = []; this._isFirstFrame = true; this.getValue = processEffectsSequence; this.setVValue = setVValue; this.addEffect = addEffect; } function MultiDimensionalProperty(elem, data, mult, container) { this.propType = 'multidimensional'; this.mult = mult || 1; this.data = data; this._mdf = false; this.elem = elem; this.container = container; this.comp = elem.comp; this.k = false; this.kf = false; this.frameId = -1; var i, len = data.k.length; this.v = createTypedArray('float32', len); this.pv = createTypedArray('float32', len); var arr = createTypedArray('float32', len); this.vel = createTypedArray('float32', len); for (i = 0; i < len; i += 1) { this.v[i] = data.k[i] * this.mult; this.pv[i] = data.k[i]; } this._isFirstFrame = true; this.effectsSequence = []; this.getValue = processEffectsSequence; this.setVValue = setVValue; this.addEffect = addEffect; } function KeyframedValueProperty(elem, data, mult, container) { this.propType = 'unidimensional'; this.keyframes = data.k; this.offsetTime = elem.data.st; this.frameId = -1; this._caching = {lastFrame: initFrame, lastIndex: 0, value: 0, _lastKeyframeIndex: -1}; this.k = true; this.kf = true; this.data = data; this.mult = mult || 1; this.elem = elem; this.container = container; this.comp = elem.comp; this.v = initFrame; this.pv = initFrame; this._isFirstFrame = true; this.getValue = processEffectsSequence; this.setVValue = setVValue; this.interpolateValue = interpolateValue; this.effectsSequence = [getValueAtCurrentTime.bind(this)]; this.addEffect = addEffect; } function KeyframedMultidimensionalProperty(elem, data, mult, container){ this.propType = 'multidimensional'; var i, len = data.k.length; var s, e,to,ti; for (i = 0; i < len - 1; i += 1) { if (data.k[i].to && data.k[i].s && data.k[i + 1] && data.k[i + 1].s) { s = data.k[i].s; e = data.k[i + 1].s; to = data.k[i].to; ti = data.k[i].ti; if((s.length === 2 && !(s[0] === e[0] && s[1] === e[1]) && bez.pointOnLine2D(s[0],s[1],e[0],e[1],s[0] + to[0],s[1] + to[1]) && bez.pointOnLine2D(s[0],s[1],e[0],e[1],e[0] + ti[0],e[1] + ti[1])) || (s.length === 3 && !(s[0] === e[0] && s[1] === e[1] && s[2] === e[2]) && bez.pointOnLine3D(s[0],s[1],s[2],e[0],e[1],e[2],s[0] + to[0],s[1] + to[1],s[2] + to[2]) && bez.pointOnLine3D(s[0],s[1],s[2],e[0],e[1],e[2],e[0] + ti[0],e[1] + ti[1],e[2] + ti[2]))){ data.k[i].to = null; data.k[i].ti = null; } if(s[0] === e[0] && s[1] === e[1] && to[0] === 0 && to[1] === 0 && ti[0] === 0 && ti[1] === 0) { if(s.length === 2 || (s[2] === e[2] && to[2] === 0 && ti[2] === 0)) { data.k[i].to = null; data.k[i].ti = null; } } } } this.effectsSequence = [getValueAtCurrentTime.bind(this)]; this.keyframes = data.k; this.offsetTime = elem.data.st; this.k = true; this.kf = true; this._isFirstFrame = true; this.mult = mult || 1; this.elem = elem; this.container = container; this.comp = elem.comp; this.getValue = processEffectsSequence; this.setVValue = setVValue; this.interpolateValue = interpolateValue; this.frameId = -1; var arrLen = data.k[0].s.length; this.v = createTypedArray('float32', arrLen); this.pv = createTypedArray('float32', arrLen); for (i = 0; i < arrLen; i += 1) { this.v[i] = initFrame; this.pv[i] = initFrame; } this._caching={lastFrame:initFrame,lastIndex:0,value:createTypedArray('float32', arrLen)}; this.addEffect = addEffect; } function getProp(elem,data,type, mult, container) { var p; if(!data.k.length){ p = new ValueProperty(elem,data, mult, container); }else if(typeof(data.k[0]) === 'number'){ p = new MultiDimensionalProperty(elem,data, mult, container); }else{ switch(type){ case 0: p = new KeyframedValueProperty(elem,data,mult, container); break; case 1: p = new KeyframedMultidimensionalProperty(elem,data,mult, container); break; } } if(p.effectsSequence.length){ container.addDynamicProperty(p); } return p; } var ob = { getProp: getProp }; return ob; }()); var TransformPropertyFactory = (function() { var defaultVector = [0,0] function applyToMatrix(mat) { var _mdf = this._mdf; this.iterateDynamicProperties(); this._mdf = this._mdf || _mdf; if (this.a) { mat.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]); } if (this.s) { mat.scale(this.s.v[0], this.s.v[1], this.s.v[2]); } if (this.sk) { mat.skewFromAxis(-this.sk.v, this.sa.v); } if (this.r) { mat.rotate(-this.r.v); } else { mat.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]); } if (this.data.p.s) { if (this.data.p.z) { mat.translate(this.px.v, this.py.v, -this.pz.v); } else { mat.translate(this.px.v, this.py.v, 0); } } else { mat.translate(this.p.v[0], this.p.v[1], -this.p.v[2]); } } function processKeys(forceRender){ if (this.elem.globalData.frameId === this.frameId) { return; } if(this._isDirty) { this.precalculateMatrix(); this._isDirty = false; } this.iterateDynamicProperties(); if (this._mdf || forceRender) { this.v.cloneFromProps(this.pre.props); if (this.appliedTransformations < 1) { this.v.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]); } if(this.appliedTransformations < 2) { this.v.scale(this.s.v[0], this.s.v[1], this.s.v[2]); } if (this.sk && this.appliedTransformations < 3) { this.v.skewFromAxis(-this.sk.v, this.sa.v); } if (this.r && this.appliedTransformations < 4) { this.v.rotate(-this.r.v); } else if (!this.r && this.appliedTransformations < 4){ this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]); } if (this.autoOriented) { var v1,v2, frameRate = this.elem.globalData.frameRate; if(this.p && this.p.keyframes && this.p.getValueAtTime) { if (this.p._caching.lastFrame+this.p.offsetTime <= this.p.keyframes[0].t) { v1 = this.p.getValueAtTime((this.p.keyframes[0].t + 0.01) / frameRate,0); v2 = this.p.getValueAtTime(this.p.keyframes[0].t / frameRate, 0); } else if(this.p._caching.lastFrame+this.p.offsetTime >= this.p.keyframes[this.p.keyframes.length - 1].t) { v1 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t / frameRate), 0); v2 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t - 0.05) / frameRate, 0); } else { v1 = this.p.pv; v2 = this.p.getValueAtTime((this.p._caching.lastFrame+this.p.offsetTime - 0.01) / frameRate, this.p.offsetTime); } } else if(this.px && this.px.keyframes && this.py.keyframes && this.px.getValueAtTime && this.py.getValueAtTime) { v1 = []; v2 = []; var px = this.px, py = this.py, frameRate; if (px._caching.lastFrame+px.offsetTime <= px.keyframes[0].t) { v1[0] = px.getValueAtTime((px.keyframes[0].t + 0.01) / frameRate,0); v1[1] = py.getValueAtTime((py.keyframes[0].t + 0.01) / frameRate,0); v2[0] = px.getValueAtTime((px.keyframes[0].t) / frameRate,0); v2[1] = py.getValueAtTime((py.keyframes[0].t) / frameRate,0); } else if(px._caching.lastFrame+px.offsetTime >= px.keyframes[px.keyframes.length - 1].t) { v1[0] = px.getValueAtTime((px.keyframes[px.keyframes.length - 1].t / frameRate),0); v1[1] = py.getValueAtTime((py.keyframes[py.keyframes.length - 1].t / frameRate),0); v2[0] = px.getValueAtTime((px.keyframes[px.keyframes.length - 1].t - 0.01) / frameRate,0); v2[1] = py.getValueAtTime((py.keyframes[py.keyframes.length - 1].t - 0.01) / frameRate,0); } else { v1 = [px.pv, py.pv]; v2[0] = px.getValueAtTime((px._caching.lastFrame+px.offsetTime - 0.01) / frameRate,px.offsetTime); v2[1] = py.getValueAtTime((py._caching.lastFrame+py.offsetTime - 0.01) / frameRate,py.offsetTime); } } else { v1 = v2 = defaultVector } this.v.rotate(-Math.atan2(v1[1] - v2[1], v1[0] - v2[0])); } if(this.data.p && this.data.p.s){ if(this.data.p.z) { this.v.translate(this.px.v, this.py.v, -this.pz.v); } else { this.v.translate(this.px.v, this.py.v, 0); } }else{ this.v.translate(this.p.v[0],this.p.v[1],-this.p.v[2]); } } this.frameId = this.elem.globalData.frameId; } function precalculateMatrix() { if(!this.a.k) { this.pre.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]); this.appliedTransformations = 1; } else { return; } if(!this.s.effectsSequence.length) { this.pre.scale(this.s.v[0], this.s.v[1], this.s.v[2]); this.appliedTransformations = 2; } else { return; } if(this.sk) { if(!this.sk.effectsSequence.length && !this.sa.effectsSequence.length) { this.pre.skewFromAxis(-this.sk.v, this.sa.v); this.appliedTransformations = 3; } else { return; } } if (this.r) { if(!this.r.effectsSequence.length) { this.pre.rotate(-this.r.v); this.appliedTransformations = 4; } else { return; } } else if(!this.rz.effectsSequence.length && !this.ry.effectsSequence.length && !this.rx.effectsSequence.length && !this.or.effectsSequence.length) { this.pre.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]); this.appliedTransformations = 4; } } function autoOrient(){ // //var prevP = this.getValueAtTime(); } function addDynamicProperty(prop) { this._addDynamicProperty(prop); this.elem.addDynamicProperty(prop); this._isDirty = true; } function TransformProperty(elem,data,container){ this.elem = elem; this.frameId = -1; this.propType = 'transform'; this.data = data; this.v = new Matrix(); //Precalculated matrix with non animated properties this.pre = new Matrix(); this.appliedTransformations = 0; this.initDynamicPropertyContainer(container || elem); if(data.p && data.p.s){ this.px = PropertyFactory.getProp(elem,data.p.x,0,0,this); this.py = PropertyFactory.getProp(elem,data.p.y,0,0,this); if(data.p.z){ this.pz = PropertyFactory.getProp(elem,data.p.z,0,0,this); } }else{ this.p = PropertyFactory.getProp(elem,data.p || {k:[0,0,0]},1,0,this); } if(data.rx) { this.rx = PropertyFactory.getProp(elem, data.rx, 0, degToRads, this); this.ry = PropertyFactory.getProp(elem, data.ry, 0, degToRads, this); this.rz = PropertyFactory.getProp(elem, data.rz, 0, degToRads, this); if(data.or.k[0].ti) { var i, len = data.or.k.length; for(i=0;i= this._maxLength) { this.doubleArrayLength(); } switch(type){ case 'v': arr = this.v; break; case 'i': arr = this.i; break; case 'o': arr = this.o; break; } if(!arr[pos] || (arr[pos] && !replace)){ arr[pos] = point_pool.newElement(); } arr[pos][0] = x; arr[pos][1] = y; }; ShapePath.prototype.setTripleAt = function(vX,vY,oX,oY,iX,iY,pos, replace) { this.setXYAt(vX,vY,'v',pos, replace); this.setXYAt(oX,oY,'o',pos, replace); this.setXYAt(iX,iY,'i',pos, replace); }; ShapePath.prototype.reverse = function() { var newPath = new ShapePath(); newPath.setPathData(this.c, this._length); var vertices = this.v, outPoints = this.o, inPoints = this.i; var init = 0; if (this.c) { newPath.setTripleAt(vertices[0][0], vertices[0][1], inPoints[0][0], inPoints[0][1], outPoints[0][0], outPoints[0][1], 0, false); init = 1; } var cnt = this._length - 1; var len = this._length; var i; for (i = init; i < len; i += 1) { newPath.setTripleAt(vertices[cnt][0], vertices[cnt][1], inPoints[cnt][0], inPoints[cnt][1], outPoints[cnt][0], outPoints[cnt][1], i, false); cnt -= 1; } return newPath; }; var ShapePropertyFactory = (function(){ var initFrame = -999999; function interpolateShape(frameNum, previousValue, caching) { var iterationIndex = caching.lastIndex; var keyPropS,keyPropE,isHold, j, k, jLen, kLen, perc, vertexValue; var kf = this.keyframes; if(frameNum < kf[0].t-this.offsetTime){ keyPropS = kf[0].s[0]; isHold = true; iterationIndex = 0; }else if(frameNum >= kf[kf.length - 1].t-this.offsetTime){ keyPropS = kf[kf.length - 1].s ? kf[kf.length - 1].s[0] : kf[kf.length - 2].e[0]; /*if(kf[kf.length - 1].s){ keyPropS = kf[kf.length - 1].s[0]; }else{ keyPropS = kf[kf.length - 2].e[0]; }*/ isHold = true; }else{ var i = iterationIndex; var len = kf.length- 1,flag = true,keyData,nextKeyData; while(flag){ keyData = kf[i]; nextKeyData = kf[i+1]; if((nextKeyData.t - this.offsetTime) > frameNum){ break; } if(i < len - 1){ i += 1; }else{ flag = false; } } isHold = keyData.h === 1; iterationIndex = i; if(!isHold){ if(frameNum >= nextKeyData.t-this.offsetTime){ perc = 1; }else if(frameNum < keyData.t-this.offsetTime){ perc = 0; }else{ var fnc; if(keyData.__fnct){ fnc = keyData.__fnct; }else{ fnc = BezierFactory.getBezierEasing(keyData.o.x,keyData.o.y,keyData.i.x,keyData.i.y).get; keyData.__fnct = fnc; } perc = fnc((frameNum-(keyData.t-this.offsetTime))/((nextKeyData.t-this.offsetTime)-(keyData.t-this.offsetTime))); } keyPropE = nextKeyData.s ? nextKeyData.s[0] : keyData.e[0]; } keyPropS = keyData.s[0]; } jLen = previousValue._length; kLen = keyPropS.i[0].length; caching.lastIndex = iterationIndex; for(j=0;j endTime && frameNum > endTime)))){ //// this._caching.lastIndex = lastFrame < frameNum ? this._caching.lastIndex : 0; this.interpolateShape(frameNum, this.pv, this._caching); //// } this._caching.lastFrame = frameNum; return this.pv; } function resetShape(){ this.paths = this.localShapeCollection; } function shapesEqual(shape1, shape2) { if(shape1._length !== shape2._length || shape1.c !== shape2.c){ return false; } var i, len = shape1._length; for(i = 0; i < len; i += 1) { if(shape1.v[i][0] !== shape2.v[i][0] || shape1.v[i][1] !== shape2.v[i][1] || shape1.o[i][0] !== shape2.o[i][0] || shape1.o[i][1] !== shape2.o[i][1] || shape1.i[i][0] !== shape2.i[i][0] || shape1.i[i][1] !== shape2.i[i][1]) { return false; } } return true; } function setVValue(newPath) { if(!shapesEqual(this.v, newPath)) { this.v = shape_pool.clone(newPath); this.localShapeCollection.releaseShapes(); this.localShapeCollection.addShape(this.v); this._mdf = true; this.paths = this.localShapeCollection; } } function processEffectsSequence() { if (this.elem.globalData.frameId === this.frameId) { return; } else if (!this.effectsSequence.length) { this._mdf = false; return; } if (this.lock) { this.setVValue(this.pv); return; } this.lock = true; this._mdf = false; var finalValue = this.kf ? this.pv : this.data.ks ? this.data.ks.k : this.data.pt.k; var i, len = this.effectsSequence.length; for(i = 0; i < len; i += 1) { finalValue = this.effectsSequence[i](finalValue); } this.setVValue(finalValue); this.lock = false; this.frameId = this.elem.globalData.frameId; }; function ShapeProperty(elem, data, type){ this.propType = 'shape'; this.comp = elem.comp; this.container = elem; this.elem = elem; this.data = data; this.k = false; this.kf = false; this._mdf = false; var pathData = type === 3 ? data.pt.k : data.ks.k; this.v = shape_pool.clone(pathData); this.pv = shape_pool.clone(this.v); this.localShapeCollection = shapeCollection_pool.newShapeCollection(); this.paths = this.localShapeCollection; this.paths.addShape(this.v); this.reset = resetShape; this.effectsSequence = []; } function addEffect(effectFunction) { this.effectsSequence.push(effectFunction); this.container.addDynamicProperty(this); } ShapeProperty.prototype.interpolateShape = interpolateShape; ShapeProperty.prototype.getValue = processEffectsSequence; ShapeProperty.prototype.setVValue = setVValue; ShapeProperty.prototype.addEffect = addEffect; function KeyframedShapeProperty(elem,data,type){ this.propType = 'shape'; this.comp = elem.comp; this.elem = elem; this.container = elem; this.offsetTime = elem.data.st; this.keyframes = type === 3 ? data.pt.k : data.ks.k; this.k = true; this.kf = true; var i, len = this.keyframes[0].s[0].i.length; var jLen = this.keyframes[0].s[0].i[0].length; this.v = shape_pool.newElement(); this.v.setPathData(this.keyframes[0].s[0].c, len); this.pv = shape_pool.clone(this.v); this.localShapeCollection = shapeCollection_pool.newShapeCollection(); this.paths = this.localShapeCollection; this.paths.addShape(this.v); this.lastFrame = initFrame; this.reset = resetShape; this._caching = {lastFrame: initFrame, lastIndex: 0}; this.effectsSequence = [interpolateShapeCurrentTime.bind(this)]; } KeyframedShapeProperty.prototype.getValue = processEffectsSequence; KeyframedShapeProperty.prototype.interpolateShape = interpolateShape; KeyframedShapeProperty.prototype.setVValue = setVValue; KeyframedShapeProperty.prototype.addEffect = addEffect; var EllShapeProperty = (function(){ var cPoint = roundCorner; function EllShapeProperty(elem,data) { /*this.v = { v: createSizedArray(4), i: createSizedArray(4), o: createSizedArray(4), c: true };*/ this.v = shape_pool.newElement(); this.v.setPathData(true, 4); this.localShapeCollection = shapeCollection_pool.newShapeCollection(); this.paths = this.localShapeCollection; this.localShapeCollection.addShape(this.v); this.d = data.d; this.elem = elem; this.comp = elem.comp; this.frameId = -1; this.initDynamicPropertyContainer(elem); this.p = PropertyFactory.getProp(elem,data.p,1,0,this); this.s = PropertyFactory.getProp(elem,data.s,1,0,this); if(this.dynamicProperties.length){ this.k = true; }else{ this.k = false; this.convertEllToPath(); } }; EllShapeProperty.prototype = { reset: resetShape, getValue: function (){ if(this.elem.globalData.frameId === this.frameId){ return; } this.frameId = this.elem.globalData.frameId; this.iterateDynamicProperties(); if(this._mdf){ this.convertEllToPath(); } }, convertEllToPath: function() { var p0 = this.p.v[0], p1 = this.p.v[1], s0 = this.s.v[0]/2, s1 = this.s.v[1]/2; var _cw = this.d !== 3; var _v = this.v; _v.v[0][0] = p0; _v.v[0][1] = p1 - s1; _v.v[1][0] = _cw ? p0 + s0 : p0 - s0; _v.v[1][1] = p1; _v.v[2][0] = p0; _v.v[2][1] = p1 + s1; _v.v[3][0] = _cw ? p0 - s0 : p0 + s0; _v.v[3][1] = p1; _v.i[0][0] = _cw ? p0 - s0 * cPoint : p0 + s0 * cPoint; _v.i[0][1] = p1 - s1; _v.i[1][0] = _cw ? p0 + s0 : p0 - s0; _v.i[1][1] = p1 - s1 * cPoint; _v.i[2][0] = _cw ? p0 + s0 * cPoint : p0 - s0 * cPoint; _v.i[2][1] = p1 + s1; _v.i[3][0] = _cw ? p0 - s0 : p0 + s0; _v.i[3][1] = p1 + s1 * cPoint; _v.o[0][0] = _cw ? p0 + s0 * cPoint : p0 - s0 * cPoint; _v.o[0][1] = p1 - s1; _v.o[1][0] = _cw ? p0 + s0 : p0 - s0; _v.o[1][1] = p1 + s1 * cPoint; _v.o[2][0] = _cw ? p0 - s0 * cPoint : p0 + s0 * cPoint; _v.o[2][1] = p1 + s1; _v.o[3][0] = _cw ? p0 - s0 : p0 + s0; _v.o[3][1] = p1 - s1 * cPoint; } } extendPrototype([DynamicPropertyContainer], EllShapeProperty); return EllShapeProperty; }()); var StarShapeProperty = (function() { function StarShapeProperty(elem,data) { this.v = shape_pool.newElement(); this.v.setPathData(true, 0); this.elem = elem; this.comp = elem.comp; this.data = data; this.frameId = -1; this.d = data.d; this.initDynamicPropertyContainer(elem); if(data.sy === 1){ this.ir = PropertyFactory.getProp(elem,data.ir,0,0,this); this.is = PropertyFactory.getProp(elem,data.is,0,0.01,this); this.convertToPath = this.convertStarToPath; } else { this.convertToPath = this.convertPolygonToPath; } this.pt = PropertyFactory.getProp(elem,data.pt,0,0,this); this.p = PropertyFactory.getProp(elem,data.p,1,0,this); this.r = PropertyFactory.getProp(elem,data.r,0,degToRads,this); this.or = PropertyFactory.getProp(elem,data.or,0,0,this); this.os = PropertyFactory.getProp(elem,data.os,0,0.01,this); this.localShapeCollection = shapeCollection_pool.newShapeCollection(); this.localShapeCollection.addShape(this.v); this.paths = this.localShapeCollection; if(this.dynamicProperties.length){ this.k = true; }else{ this.k = false; this.convertToPath(); } }; StarShapeProperty.prototype = { reset: resetShape, getValue: function() { if(this.elem.globalData.frameId === this.frameId){ return; } this.frameId = this.elem.globalData.frameId; this.iterateDynamicProperties(); if(this._mdf){ this.convertToPath(); } }, convertStarToPath: function() { var numPts = Math.floor(this.pt.v)*2; var angle = Math.PI*2/numPts; /*this.v.v.length = numPts; this.v.i.length = numPts; this.v.o.length = numPts;*/ var longFlag = true; var longRad = this.or.v; var shortRad = this.ir.v; var longRound = this.os.v; var shortRound = this.is.v; var longPerimSegment = 2*Math.PI*longRad/(numPts*2); var shortPerimSegment = 2*Math.PI*shortRad/(numPts*2); var i, rad,roundness,perimSegment, currentAng = -Math.PI/ 2; currentAng += this.r.v; var dir = this.data.d === 3 ? -1 : 1; this.v._length = 0; for(i=0;i= 1) { segments.push({ s: s - 1, e: e - 1 }); } else { segments.push({ s: s, e: 1 }); segments.push({ s: 0, e: e - 1 }); } var shapeSegments = []; var i, len = segments.length, segmentOb; for (i = 0; i < len; i += 1) { segmentOb = segments[i]; if (segmentOb.e * totalModifierLength < addedLength || segmentOb.s * totalModifierLength > addedLength + shapeLength) { } else { var shapeS, shapeE; if (segmentOb.s * totalModifierLength <= addedLength) { shapeS = 0; } else { shapeS = (segmentOb.s * totalModifierLength - addedLength) / shapeLength; } if(segmentOb.e * totalModifierLength >= addedLength + shapeLength) { shapeE = 1; } else { shapeE = ((segmentOb.e * totalModifierLength - addedLength) / shapeLength); } shapeSegments.push([shapeS, shapeE]); } } if (!shapeSegments.length) { shapeSegments.push([0, 0]); } return shapeSegments; }; TrimModifier.prototype.releasePathsData = function(pathsData) { var i, len = pathsData.length; for (i = 0; i < len; i += 1) { segments_length_pool.release(pathsData[i]); } pathsData.length = 0; return pathsData; }; TrimModifier.prototype.processShapes = function(_isFirstFrame) { var s, e; if (this._mdf || _isFirstFrame) { var o = (this.o.v % 360) / 360; if (o < 0) { o += 1; } s = (this.s.v > 1 ? 1 : this.s.v < 0 ? 0 : this.s.v) + o; e = (this.e.v > 1 ? 1 : this.e.v < 0 ? 0 : this.e.v) + o; if (s === e) { } if (s > e) { var _s = s; s = e; e = _s; } s = Math.round(s * 10000) * 0.0001; e = Math.round(e * 10000) * 0.0001; this.sValue = s; this.eValue = e; } else { s = this.sValue; e = this.eValue; } var shapePaths; var i, len = this.shapes.length, j, jLen; var pathsData, pathData, totalShapeLength, totalModifierLength = 0; if (e === s) { for (i = 0; i < len; i += 1) { this.shapes[i].localShapeCollection.releaseShapes(); this.shapes[i].shape._mdf = true; this.shapes[i].shape.paths = this.shapes[i].localShapeCollection; } } else if (!((e === 1 && s === 0) || (e===0 && s === 1))){ var segments = [], shapeData, localShapeCollection; for (i = 0; i < len; i += 1) { shapeData = this.shapes[i]; // if shape hasn't changed and trim properties haven't changed, cached previous path can be used if (!shapeData.shape._mdf && !this._mdf && !_isFirstFrame && this.m !== 2) { shapeData.shape.paths = shapeData.localShapeCollection; } else { shapePaths = shapeData.shape.paths; jLen = shapePaths._length; totalShapeLength = 0; if (!shapeData.shape._mdf && shapeData.pathsData.length) { totalShapeLength = shapeData.totalShapeLength; } else { pathsData = this.releasePathsData(shapeData.pathsData); for (j = 0; j < jLen; j += 1) { pathData = bez.getSegmentsLength(shapePaths.shapes[j]); pathsData.push(pathData); totalShapeLength += pathData.totalLength; } shapeData.totalShapeLength = totalShapeLength; shapeData.pathsData = pathsData; } totalModifierLength += totalShapeLength; shapeData.shape._mdf = true; } } var shapeS = s, shapeE = e, addedLength = 0, edges; for (i = len - 1; i >= 0; i -= 1) { shapeData = this.shapes[i]; if (shapeData.shape._mdf) { localShapeCollection = shapeData.localShapeCollection; localShapeCollection.releaseShapes(); //if m === 2 means paths are trimmed individually so edges need to be found for this specific shape relative to whoel group if (this.m === 2 && len > 1) { edges = this.calculateShapeEdges(s, e, shapeData.totalShapeLength, addedLength, totalModifierLength); addedLength += shapeData.totalShapeLength; } else { edges = [[shapeS, shapeE]]; } jLen = edges.length; for (j = 0; j < jLen; j += 1) { shapeS = edges[j][0]; shapeE = edges[j][1]; segments.length = 0; if (shapeE <= 1) { segments.push({ s:shapeData.totalShapeLength * shapeS, e:shapeData.totalShapeLength * shapeE }); } else if (shapeS >= 1) { segments.push({ s:shapeData.totalShapeLength * (shapeS - 1), e:shapeData.totalShapeLength * (shapeE - 1) }); } else { segments.push({ s:shapeData.totalShapeLength * shapeS, e:shapeData.totalShapeLength }); segments.push({ s:0, e:shapeData.totalShapeLength * (shapeE - 1) }); } var newShapesData = this.addShapes(shapeData,segments[0]); if (segments[0].s !== segments[0].e) { if (segments.length > 1) { var lastShapeInCollection = shapeData.shape.paths.shapes[shapeData.shape.paths._length - 1]; if (lastShapeInCollection.c) { var lastShape = newShapesData.pop(); this.addPaths(newShapesData, localShapeCollection); newShapesData = this.addShapes(shapeData, segments[1], lastShape); } else { this.addPaths(newShapesData, localShapeCollection); newShapesData = this.addShapes(shapeData, segments[1]); } } this.addPaths(newShapesData, localShapeCollection); } } shapeData.shape.paths = localShapeCollection; } } } else if (this._mdf) { for (i = 0; i < len; i += 1) { //Releasign Trim Cached paths data when no trim applied in case shapes are modified inbetween. //Don't remove this even if it's losing cached info. this.shapes[i].pathsData.length = 0; this.shapes[i].shape._mdf = true; } } }; TrimModifier.prototype.addPaths = function(newPaths, localShapeCollection) { var i, len = newPaths.length; for (i = 0; i < len; i += 1) { localShapeCollection.addShape(newPaths[i]); } }; TrimModifier.prototype.addSegment = function(pt1, pt2, pt3, pt4, shapePath, pos, newShape) { shapePath.setXYAt(pt2[0], pt2[1], 'o', pos); shapePath.setXYAt(pt3[0], pt3[1], 'i', pos + 1); if(newShape){ shapePath.setXYAt(pt1[0], pt1[1], 'v', pos); } shapePath.setXYAt(pt4[0], pt4[1], 'v', pos + 1); }; TrimModifier.prototype.addSegmentFromArray = function(points, shapePath, pos, newShape) { shapePath.setXYAt(points[1], points[5], 'o', pos); shapePath.setXYAt(points[2], points[6], 'i', pos + 1); if(newShape){ shapePath.setXYAt(points[0], points[4], 'v', pos); } shapePath.setXYAt(points[3], points[7], 'v', pos + 1); }; TrimModifier.prototype.addShapes = function(shapeData, shapeSegment, shapePath) { var pathsData = shapeData.pathsData; var shapePaths = shapeData.shape.paths.shapes; var i, len = shapeData.shape.paths._length, j, jLen; var addedLength = 0; var currentLengthData,segmentCount; var lengths; var segment; var shapes = []; var initPos; var newShape = true; if (!shapePath) { shapePath = shape_pool.newElement(); segmentCount = 0; initPos = 0; } else { segmentCount = shapePath._length; initPos = shapePath._length; } shapes.push(shapePath); for (i = 0; i < len; i += 1) { lengths = pathsData[i].lengths; shapePath.c = shapePaths[i].c; jLen = shapePaths[i].c ? lengths.length : lengths.length + 1; for (j = 1; j < jLen; j +=1) { currentLengthData = lengths[j-1]; if (addedLength + currentLengthData.addedLength < shapeSegment.s) { addedLength += currentLengthData.addedLength; shapePath.c = false; } else if(addedLength > shapeSegment.e) { shapePath.c = false; break; } else { if (shapeSegment.s <= addedLength && shapeSegment.e >= addedLength + currentLengthData.addedLength) { this.addSegment(shapePaths[i].v[j - 1], shapePaths[i].o[j - 1], shapePaths[i].i[j], shapePaths[i].v[j], shapePath, segmentCount, newShape); newShape = false; } else { segment = bez.getNewSegment(shapePaths[i].v[j - 1], shapePaths[i].v[j], shapePaths[i].o[j - 1], shapePaths[i].i[j], (shapeSegment.s - addedLength)/currentLengthData.addedLength,(shapeSegment.e - addedLength)/currentLengthData.addedLength, lengths[j-1]); this.addSegmentFromArray(segment, shapePath, segmentCount, newShape); // this.addSegment(segment.pt1, segment.pt3, segment.pt4, segment.pt2, shapePath, segmentCount, newShape); newShape = false; shapePath.c = false; } addedLength += currentLengthData.addedLength; segmentCount += 1; } } if (shapePaths[i].c && lengths.length) { currentLengthData = lengths[j - 1]; if (addedLength <= shapeSegment.e) { var segmentLength = lengths[j - 1].addedLength; if (shapeSegment.s <= addedLength && shapeSegment.e >= addedLength + segmentLength) { this.addSegment(shapePaths[i].v[j - 1], shapePaths[i].o[j - 1], shapePaths[i].i[0], shapePaths[i].v[0], shapePath, segmentCount, newShape); newShape = false; } else { segment = bez.getNewSegment(shapePaths[i].v[j - 1], shapePaths[i].v[0], shapePaths[i].o[j - 1], shapePaths[i].i[0], (shapeSegment.s - addedLength) / segmentLength, (shapeSegment.e - addedLength) / segmentLength, lengths[j - 1]); this.addSegmentFromArray(segment, shapePath, segmentCount, newShape); // this.addSegment(segment.pt1, segment.pt3, segment.pt4, segment.pt2, shapePath, segmentCount, newShape); newShape = false; shapePath.c = false; } } else { shapePath.c = false; } addedLength += currentLengthData.addedLength; segmentCount += 1; } if (shapePath._length) { shapePath.setXYAt(shapePath.v[initPos][0], shapePath.v[initPos][1], 'i', initPos); shapePath.setXYAt(shapePath.v[shapePath._length - 1][0], shapePath.v[shapePath._length - 1][1],'o', shapePath._length - 1); } if (addedLength > shapeSegment.e) { break; } if (i < len - 1) { shapePath = shape_pool.newElement(); newShape = true; shapes.push(shapePath); segmentCount = 0; } } return shapes; }; ShapeModifiers.registerModifier('tm', TrimModifier); function RoundCornersModifier(){} extendPrototype([ShapeModifier],RoundCornersModifier); RoundCornersModifier.prototype.initModifierProperties = function(elem,data){ this.getValue = this.processKeys; this.rd = PropertyFactory.getProp(elem,data.r,0,null,this); this._isAnimated = !!this.rd.effectsSequence.length; }; RoundCornersModifier.prototype.processPath = function(path, round){ var cloned_path = shape_pool.newElement(); cloned_path.c = path.c; var i, len = path._length; var currentV,currentI,currentO,closerV, newV,newO,newI,distance,newPosPerc,index = 0; var vX,vY,oX,oY,iX,iY; for(i=0;i0){ pos -= 1; //this._elements.unshift(arr.splice(pos,1)[0]); this._elements.unshift(arr[pos]); cont += 1; } if(this.dynamicProperties.length){ this.k = true; }else{ this.getValue(true); } }; RepeaterModifier.prototype.resetElements = function(elements){ var i, len = elements.length; for(i = 0; i < len; i += 1) { elements[i]._processed = false; if(elements[i].ty === 'gr'){ this.resetElements(elements[i].it); } } }; RepeaterModifier.prototype.cloneElements = function(elements){ var i, len = elements.length; var newElements = JSON.parse(JSON.stringify(elements)); this.resetElements(newElements); return newElements; }; RepeaterModifier.prototype.changeGroupRender = function(elements, renderFlag) { var i, len = elements.length; for(i = 0; i < len; i += 1) { elements[i]._render = renderFlag; if(elements[i].ty === 'gr') { this.changeGroupRender(elements[i].it, renderFlag); } } }; RepeaterModifier.prototype.processShapes = function(_isFirstFrame) { var items, itemsTransform, i, dir, cont; if(this._mdf || _isFirstFrame){ var copies = Math.ceil(this.c.v); if(this._groups.length < copies){ while(this._groups.length < copies){ var group = { it:this.cloneElements(this._elements), ty:'gr' }; group.it.push({"a":{"a":0,"ix":1,"k":[0,0]},"nm":"Transform","o":{"a":0,"ix":7,"k":100},"p":{"a":0,"ix":2,"k":[0,0]},"r":{"a":1,"ix":6,"k":[{s:0,e:0,t:0},{s:0,e:0,t:1}]},"s":{"a":0,"ix":3,"k":[100,100]},"sa":{"a":0,"ix":5,"k":0},"sk":{"a":0,"ix":4,"k":0},"ty":"tr"}); this.arr.splice(0,0,group); this._groups.splice(0,0,group); this._currentCopies += 1; } this.elem.reloadShapes(); } cont = 0; var renderFlag; for(i = 0; i <= this._groups.length - 1; i += 1){ renderFlag = cont < copies; this._groups[i]._render = renderFlag; this.changeGroupRender(this._groups[i].it, renderFlag); cont += 1; } this._currentCopies = copies; //// var offset = this.o.v; var offsetModulo = offset%1; var roundOffset = offset > 0 ? Math.floor(offset) : Math.ceil(offset); var k; var tMat = this.tr.v.props; var pProps = this.pMatrix.props; var rProps = this.rMatrix.props; var sProps = this.sMatrix.props; this.pMatrix.reset(); this.rMatrix.reset(); this.sMatrix.reset(); this.tMatrix.reset(); this.matrix.reset(); var iteration = 0; if(offset > 0) { while(iterationroundOffset){ this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, true); iteration -= 1; } if(offsetModulo){ this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, - offsetModulo, true); iteration -= offsetModulo; } } i = this.data.m === 1 ? 0 : this._currentCopies - 1; dir = this.data.m === 1 ? 1 : -1; cont = this._currentCopies; var j, jLen; while(cont){ items = this.elemsData[i].it; itemsTransform = items[items.length - 1].transform.mProps.v.props; jLen = itemsTransform.length; items[items.length - 1].transform.mProps._mdf = true; items[items.length - 1].transform.op._mdf = true; items[items.length - 1].transform.op.v = this.so.v + (this.eo.v - this.so.v) * (i / (this._currentCopies - 1)); if(iteration !== 0){ if((i !== 0 && dir === 1) || (i !== this._currentCopies - 1 && dir === -1)){ this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, false); } this.matrix.transform(rProps[0],rProps[1],rProps[2],rProps[3],rProps[4],rProps[5],rProps[6],rProps[7],rProps[8],rProps[9],rProps[10],rProps[11],rProps[12],rProps[13],rProps[14],rProps[15]); this.matrix.transform(sProps[0],sProps[1],sProps[2],sProps[3],sProps[4],sProps[5],sProps[6],sProps[7],sProps[8],sProps[9],sProps[10],sProps[11],sProps[12],sProps[13],sProps[14],sProps[15]); this.matrix.transform(pProps[0],pProps[1],pProps[2],pProps[3],pProps[4],pProps[5],pProps[6],pProps[7],pProps[8],pProps[9],pProps[10],pProps[11],pProps[12],pProps[13],pProps[14],pProps[15]); for(j=0;j 0.01){ return false; } i += 1; } return true; }; GradientProperty.prototype.checkCollapsable = function() { if (this.o.length/2 !== this.c.length/4) { return false; } if (this.data.k.k[0].s) { var i = 0, len = this.data.k.k.length; while (i < len) { if (!this.comparePoints(this.data.k.k[i].s, this.data.p)) { return false; } i += 1; } } else if(!this.comparePoints(this.data.k.k, this.data.p)) { return false; } return true; }; GradientProperty.prototype.getValue = function(forceRender){ this.prop.getValue(); this._mdf = false; this._cmdf = false; this._omdf = false; if(this.prop._mdf || forceRender){ var i, len = this.data.p*4; var mult, val; for(i=0;i= currentLength + animatorOffset || !points) { perc = (currentLength + animatorOffset - segmentLength) / currentPoint.partialLength; xPathPos = prevPoint.point[0] + (currentPoint.point[0] - prevPoint.point[0]) * perc; yPathPos = prevPoint.point[1] + (currentPoint.point[1] - prevPoint.point[1]) * perc; matrixHelper.translate(-alignment[0]*letters[i].an/200, -(alignment[1] * yOff / 100)); flag = false; } else if (points) { segmentLength += currentPoint.partialLength; pointInd += 1; if (pointInd >= points.length) { pointInd = 0; segmentInd += 1; if (!segments[segmentInd]) { if (mask.v.c) { pointInd = 0; segmentInd = 0; points = segments[segmentInd].points; } else { segmentLength -= currentPoint.partialLength; points = null; } } else { points = segments[segmentInd].points; } } if (points) { prevPoint = currentPoint; currentPoint = points[pointInd]; partialLength = currentPoint.partialLength; } } } offf = letters[i].an / 2 - letters[i].add; matrixHelper.translate(-offf, 0, 0); } else { offf = letters[i].an/2 - letters[i].add; matrixHelper.translate(-offf,0,0); // Grouping alignment matrixHelper.translate(-alignment[0]*letters[i].an/200, -alignment[1]*yOff/100, 0); } lineLength += letters[i].l/2; for(j=0;j 1; if(this.kf) { this.addEffect(this.getKeyframeValue.bind(this)); } return this.kf; } TextProperty.prototype.addEffect = function(effectFunction) { this.effectsSequence.push(effectFunction); this.elem.addDynamicProperty(this); }; TextProperty.prototype.getValue = function(_finalValue) { if((this.elem.globalData.frameId === this.frameId || !this.effectsSequence.length) && !_finalValue) { return; } this.currentData.t = this.data.d.k[this.keysIndex].s.t; var currentValue = this.currentData; var currentIndex = this.keysIndex; if(this.lock) { this.setCurrentData(this.currentData); return; } this.lock = true; this._mdf = false; var multipliedValue; var i, len = this.effectsSequence.length; var finalValue = _finalValue || this.data.d.k[this.keysIndex].s; for(i = 0; i < len; i += 1) { //Checking if index changed to prevent creating a new object every time the expression updates. if(currentIndex !== this.keysIndex) { finalValue = this.effectsSequence[i](finalValue, finalValue.t); } else { finalValue = this.effectsSequence[i](this.currentData, finalValue.t); } } if(currentValue !== finalValue) { this.setCurrentData(finalValue); } this.pv = this.v = this.currentData; this.lock = false; this.frameId = this.elem.globalData.frameId; } TextProperty.prototype.getKeyframeValue = function() { var textKeys = this.data.d.k, textDocumentData; var frameNum = this.elem.comp.renderedFrame; var i = 0, len = textKeys.length; while(i <= len - 1) { textDocumentData = textKeys[i].s; if(i === len - 1 || textKeys[i+1].t > frameNum){ break; } i += 1; } if(this.keysIndex !== i) { this.keysIndex = i; } return this.data.d.k[this.keysIndex].s; }; TextProperty.prototype.buildFinalText = function(text) { var combinedCharacters = FontManager.getCombinedCharacterCodes(); var charactersArray = []; var i = 0, len = text.length; var charCode; while (i < len) { charCode = text.charCodeAt(i); if (combinedCharacters.indexOf(charCode) !== -1) { charactersArray[charactersArray.length - 1] += text.charAt(i); } else { if (charCode >= 0xD800 && charCode <= 0xDBFF) { charCode = text.charCodeAt(i + 1); if (charCode >= 0xDC00 && charCode <= 0xDFFF) { charactersArray.push(text.substr(i, 2)); ++i; } else { charactersArray.push(text.charAt(i)); } } else { charactersArray.push(text.charAt(i)); } } i += 1; } return charactersArray; } TextProperty.prototype.completeTextData = function(documentData) { documentData.__complete = true; var fontManager = this.elem.globalData.fontManager; var data = this.data; var letters = []; var i, len; var newLineFlag, index = 0, val; var anchorGrouping = data.m.g; var currentSize = 0, currentPos = 0, currentLine = 0, lineWidths = []; var lineWidth = 0; var maxLineWidth = 0; var j, jLen; var fontData = fontManager.getFontByName(documentData.f); var charData, cLength = 0; var styles = fontData.fStyle ? fontData.fStyle.split(' ') : []; var fWeight = 'normal', fStyle = 'normal'; len = styles.length; var styleName; for(i=0;i boxWidth && finalText[i] !== ' '){ if(lastSpaceIndex === -1){ len += 1; } else { i = lastSpaceIndex; } currentHeight += documentData.finalLineHeight || documentData.finalSize*1.2; finalText.splice(i, lastSpaceIndex === i ? 1 : 0,"\r"); //finalText = finalText.substr(0,i) + "\r" + finalText.substr(i === lastSpaceIndex ? i + 1 : i); lastSpaceIndex = -1; lineWidth = 0; }else { lineWidth += cLength; lineWidth += trackingOffset; } } currentHeight += fontData.ascent*documentData.finalSize/100; if(this.canResize && documentData.finalSize > this.minimumFontSize && boxHeight < currentHeight) { documentData.finalSize -= 1; documentData.finalLineHeight = documentData.finalSize * documentData.lh / documentData.s; } else { documentData.finalText = finalText; len = documentData.finalText.length; flag = false; } } } lineWidth = - trackingOffset; cLength = 0; var uncollapsedSpaces = 0; var currentChar; for (i = 0;i < len ;i += 1) { newLineFlag = false; currentChar = documentData.finalText[i]; charCode = currentChar.charCodeAt(0); if (charCode === 13 || charCode === 3) { uncollapsedSpaces = 0; lineWidths.push(lineWidth); maxLineWidth = lineWidth > maxLineWidth ? lineWidth : maxLineWidth; lineWidth = - 2 * trackingOffset; val = ''; newLineFlag = true; currentLine += 1; }else{ val = currentChar; } if(fontManager.chars){ charData = fontManager.getCharData(currentChar, fontData.fStyle, fontManager.getFontByName(documentData.f).fFamily); cLength = newLineFlag ? 0 : charData.w*documentData.finalSize/100; }else{ //var charWidth = fontManager.measureText(val, documentData.f, documentData.finalSize); //tCanvasHelper.font = documentData.finalSize + 'px '+ fontManager.getFontByName(documentData.f).fFamily; cLength = fontManager.measureText(val, documentData.f, documentData.finalSize); } // if(currentChar === ' '){ uncollapsedSpaces += cLength + trackingOffset; } else { lineWidth += cLength + trackingOffset + uncollapsedSpaces; uncollapsedSpaces = 0; } letters.push({l:cLength,an:cLength,add:currentSize,n:newLineFlag, anIndexes:[], val: val, line: currentLine, animatorJustifyOffset: 0}); if(anchorGrouping == 2){ currentSize += cLength; if(val === '' || val === ' ' || i === len - 1){ if(val === '' || val === ' '){ currentSize -= cLength; } while(currentPos<=i){ letters[currentPos].an = currentSize; letters[currentPos].ind = index; letters[currentPos].extra = cLength; currentPos += 1; } index += 1; currentSize = 0; } }else if(anchorGrouping == 3){ currentSize += cLength; if(val === '' || i === len - 1){ if(val === ''){ currentSize -= cLength; } while(currentPos<=i){ letters[currentPos].an = currentSize; letters[currentPos].ind = index; letters[currentPos].extra = cLength; currentPos += 1; } currentSize = 0; index += 1; } }else{ letters[index].ind = index; letters[index].extra = 0; index += 1; } } documentData.l = letters; maxLineWidth = lineWidth > maxLineWidth ? lineWidth : maxLineWidth; lineWidths.push(lineWidth); if(documentData.sz){ documentData.boxWidth = documentData.sz[0]; documentData.justifyOffset = 0; }else{ documentData.boxWidth = maxLineWidth; switch(documentData.j){ case 1: documentData.justifyOffset = - documentData.boxWidth; break; case 2: documentData.justifyOffset = - documentData.boxWidth/2; break; default: documentData.justifyOffset = 0; } } documentData.lineWidths = lineWidths; var animators = data.a, animatorData, letterData; jLen = animators.length; var based, ind, indexes = []; for(j=0;j 0) { x1 = this.ne.v / 100.0; } else { y1 = -this.ne.v / 100.0; } if(this.xe.v > 0) { x2 = 1.0 - this.xe.v / 100.0; } else { y2 = 1.0 + this.xe.v / 100.0; } var easer = BezierFactory.getBezierEasing(x1, y1, x2, y2).get; var mult = 0; var s = this.finalS; var e = this.finalE; var type = this.data.sh; if (type === 2){ if (e === s) { mult = ind >= e ? 1 : 0; } else { mult = max(0, min(0.5 / (e - s) + (ind - s) / (e - s), 1)); } mult = easer(mult); } else if(type === 3) { if (e === s) { mult = ind >= e ? 0 : 1; }else{ mult = 1 - max(0, min(0.5 / (e - s) + (ind - s) / (e - s),1)); } mult = easer(mult); } else if (type === 4) { if (e === s) { mult = 0; } else { mult = max(0, min(0.5 / (e - s) + (ind - s) / (e - s), 1)); if (mult < 0.5) { mult *= 2; } else { mult = 1 - 2 * (mult - 0.5); } } mult = easer(mult); } else if (type === 5) { if (e === s){ mult = 0; } else { var tot = e - s; /*ind += 0.5; mult = -4/(tot*tot)*(ind*ind)+(4/tot)*ind;*/ ind = min(max(0, ind + 0.5 - s), e - s); var x = -tot/2+ind; var a = tot/2; mult = Math.sqrt(1 - (x * x) / (a * a)); } mult = easer(mult); } else if (type === 6) { if (e === s){ mult = 0; } else { ind = min(max(0, ind + 0.5 - s), e - s); mult = (1 + (Math.cos((Math.PI + Math.PI * 2 * (ind) / (e - s))))) / 2; } mult = easer(mult); } else { if (ind >= floor(s)) { if (ind - s < 0) { mult = max(0, min(min(e, 1) - (s - ind), 1)); } else { mult = max(0, min(e - ind, 1)); } } mult = easer(mult); } return mult*this.a.v; }, getValue: function(newCharsFlag) { this.iterateDynamicProperties(); this._mdf = newCharsFlag || this._mdf; this._currentTextLength = this.elem.textProperty.currentData.l.length || 0; if(newCharsFlag && this.data.r === 2) { this.e.v = this._currentTextLength; } var divisor = this.data.r === 2 ? 1 : 100 / this.data.totalChars; var o = this.o.v/divisor; var s = this.s.v/divisor + o; var e = (this.e.v/divisor) + o; if(s>e){ var _s = s; s = e; e = _s; } this.finalS = s; this.finalE = e; } } extendPrototype([DynamicPropertyContainer], TextSelectorProp); function getTextSelectorProp(elem, data,arr) { return new TextSelectorProp(elem, data, arr); } return { getTextSelectorProp: getTextSelectorProp }; }()); var pool_factory = (function() { return function(initialLength, _create, _release, _clone) { var _length = 0; var _maxLength = initialLength; var pool = createSizedArray(_maxLength); var ob = { newElement: newElement, release: release }; function newElement(){ var element; if(_length){ _length -= 1; element = pool[_length]; } else { element = _create(); } return element; } function release(element) { if(_length === _maxLength) { pool = pooling.double(pool); _maxLength = _maxLength*2; } if (_release) { _release(element); } pool[_length] = element; _length += 1; } function clone() { var clonedElement = newElement(); return _clone(clonedElement); } return ob; }; }()); var pooling = (function(){ function double(arr){ return arr.concat(createSizedArray(arr.length)); } return { double: double }; }()); var point_pool = (function(){ function create() { return createTypedArray('float32', 2); } return pool_factory(8, create); }()); var shape_pool = (function(){ function create() { return new ShapePath(); } function release(shapePath) { var len = shapePath._length, i; for(i = 0; i < len; i += 1) { point_pool.release(shapePath.v[i]); point_pool.release(shapePath.i[i]); point_pool.release(shapePath.o[i]); shapePath.v[i] = null; shapePath.i[i] = null; shapePath.o[i] = null; } shapePath._length = 0; shapePath.c = false; } function clone(shape) { var cloned = factory.newElement(); var i, len = shape._length === undefined ? shape.v.length : shape._length; cloned.setLength(len); cloned.c = shape.c; var pt; for(i = 0; i < len; i += 1) { cloned.setTripleAt(shape.v[i][0],shape.v[i][1],shape.o[i][0],shape.o[i][1],shape.i[i][0],shape.i[i][1], i); } return cloned; } var factory = pool_factory(4, create, release); factory.clone = clone; return factory; }()); var shapeCollection_pool = (function(){ var ob = { newShapeCollection: newShapeCollection, release: release }; var _length = 0; var _maxLength = 4; var pool = createSizedArray(_maxLength); function newShapeCollection(){ var shapeCollection; if(_length){ _length -= 1; shapeCollection = pool[_length]; } else { shapeCollection = new ShapeCollection(); } return shapeCollection; } function release(shapeCollection) { var i, len = shapeCollection._length; for(i = 0; i < len; i += 1) { shape_pool.release(shapeCollection.shapes[i]); } shapeCollection._length = 0; if(_length === _maxLength) { pool = pooling.double(pool); _maxLength = _maxLength*2; } pool[_length] = shapeCollection; _length += 1; } return ob; }()); var segments_length_pool = (function(){ function create() { return { lengths: [], totalLength: 0 }; } function release(element) { var i, len = element.lengths.length; for(i=0;i= 0; i--) { 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 13: return this.createCamera(layer); } return this.createNull(layer); }; BaseRenderer.prototype.createCamera = function(){ throw new Error('You\'re using a 3d camera. Try the html renderer.'); }; BaseRenderer.prototype.buildAllItems = function(){ var i, len = this.layers.length; for(i=0;i= 0; i--) { 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(); } } } }; SVGRenderer.prototype.appendElementInPos = function(element, pos){ var newElement = element.getBaseElement(); if(!newElement){ return; } var i = 0; var nextElement; while(ielementRel && fillType === 'meet' || animationRelelementRel && fillType === 'slice'))){ this.transformCanvas.tx = (elementWidth-this.transformCanvas.w*(elementHeight/this.transformCanvas.h))/2*this.renderConfig.dpr; } else if(xPos === 'xMax' && ((animationRelelementRel && 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') || (animationRelelementRel && fillType==='meet') || (animationRel= 0; i-=1) { if(this.elements[i]) { this.elements[i].destroy(); } } this.elements.length = 0; this.globalData.canvasContext = null; this.animationItem.container = null; this.destroyed = true; }; CanvasRenderer.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, len = this.layers.length; if(!this.completeLayers){ this.checkLayers(num); } for (i = 0; i < len; i++) { 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(); } } }; CanvasRenderer.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); }*/ }; CanvasRenderer.prototype.checkPendingElements = function(){ while(this.pendingElements.length){ var element = this.pendingElements.pop(); element.checkParenting(); } }; CanvasRenderer.prototype.hide = function(){ this.animationItem.container.style.display = 'none'; }; CanvasRenderer.prototype.show = function(){ this.animationItem.container.style.display = 'block'; }; 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) ? false : true, 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],HybridRenderer); HybridRenderer.prototype.buildItem = SVGRenderer.prototype.buildItem; HybridRenderer.prototype.checkPendingElements = function(){ while(this.pendingElements.length){ var element = this.pendingElements.pop(); element.checkParenting(); } }; HybridRenderer.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, nextLayer, tmpDOMElement; while(i= pos) { return this.threeDElements[i].perspectiveElem; } i += 1; } }; HybridRenderer.prototype.createThreeDContainer = function(pos, type){ var perspectiveElem = createTag('div'); styleDiv(perspectiveElem); var container = createTag('div'); styleDiv(container); if(type === '3d') { perspectiveElem.style.width = this.globalData.compSize.w+'px'; perspectiveElem.style.height = this.globalData.compSize.h+'px'; perspectiveElem.style.transformOrigin = perspectiveElem.style.mozTransformOrigin = perspectiveElem.style.webkitTransformOrigin = "50% 50%"; container.style.transform = container.style.webkitTransform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)'; } 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; }; HybridRenderer.prototype.build3dContainers = function(){ var i, len = this.layers.length; var lastThreeDContainerData; var currentContainer = ''; for(i=0;i= 0; i --) { this.resizerElem.appendChild(this.threeDElements[i].perspectiveElem); } }; HybridRenderer.prototype.addTo3dContainer = function(elem,pos){ var i = 0, len = this.threeDElements.length; while(ielementRel){ 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; } this.resizerElem.style.transform = this.resizerElem.style.webkitTransform = 'matrix3d(' + sx + ',0,0,0,0,'+sy+',0,0,0,0,1,0,'+tx+','+ty+',0,1)'; }; HybridRenderer.prototype.renderFrame = SVGRenderer.prototype.renderFrame; HybridRenderer.prototype.hide = function(){ this.resizerElem.style.display = 'none'; }; HybridRenderer.prototype.show = function(){ this.resizerElem.style.display = 'block'; }; HybridRenderer.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, len = this.threeDElements.length; for(i=0;i 0){ this.maskElement.setAttribute('id', layerId); this.element.maskedElement.setAttribute(maskRef, "url(" + locationHref + "#" + 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, len = this.masksProperties.length; for (i = 0; i < len; i++) { 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(' + locationHref + '#'+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, len; len = pathNodes._length; for(i=1;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]; } //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; }; /** * @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, []); } } }; /** * @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, 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); } } }; function TransformElement(){} TransformElement.prototype = { initTransform: function() { this.finalTransform = { mProp: this.data.ks ? TransformPropertyFactory.getTransformProperty(this, this.data.ks, this) : {o:0}, _matMdf: false, _opMdf: false, mat: new Matrix() }; 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, 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) { mat = this.hierarchy[i].finalTransform.mProp.v.props; finalMat.transform(mat[0], mat[1], mat[2], mat[3], mat[4], mat[5], mat[6], mat[7], mat[8], mat[9], mat[10], mat[11], mat[12], mat[13], mat[14], mat[15]); } } } }, 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, len = transforms.length,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() }; 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, 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}; }else{ return {w:this.data.width,h:this.data.height}; } } }; 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(){ if (!this.hidden && (!this.isInRange || this.isTransparent)) { var elem = this.baseElement || this.layerElement; elem.style.display = 'none'; this.hidden = true; } }, show: function(){ 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.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); }()); function ProcessedElement(element, position) { this.elem = element; this.pos = position; } 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; }; 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, 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; } 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; } 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); 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); 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, j, jLen; jLen = data.g.p*4; for(j=0;j 0) { redraw = itemData.transformers[k].mProps._mdf || redraw; iterations --; k --; } if(redraw) { iterations = lvl - itemData.styles[l].lvl; k = itemData.transformers.length-1; while(iterations > 0) { props = itemData.transformers[k].mProps.v.props; mat.transform(props[0],props[1],props[2],props[3],props[4],props[5],props[6],props[7],props[8],props[9],props[10],props[11],props[12],props[13],props[14],props[15]); iterations --; k --; } } } else { mat = _identityMatrix; } paths = itemData.sh.paths; jLen = paths._length; if(redraw){ pathStringTransformed = ''; for(j=0;j= 1 ? 0.99 : itemData.h.v <= -1 ? -0.99: itemData.h.v; 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(' + bm_floor(itemData.c.v[0]) + ',' + bm_floor(itemData.c.v[1]) + ',' + bm_floor(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; }()) function ShapeTransformManager() { this.sequences = {}; this.sequenceList = []; this.transform_key_count = 0; } ShapeTransformManager.prototype = { addTransformSequence: function(transforms) { var i, 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, len = sequence.transforms.length, _mdf = isFirstFrame; while (i < len && !isFirstFrame) { if (sequence.transforms[i].transform.mProps._mdf) { _mdf = true; break; } i += 1 } if (_mdf) { var props; sequence.finalTransform.reset(); for (i = len - 1; i >= 0; i -= 1) { props = sequence.transforms[i].transform.mProps.v.props; sequence.finalTransform.transform(props[0],props[1],props[2],props[3],props[4],props[5],props[6],props[7],props[8],props[9],props[10],props[11],props[12],props[13],props[14],props[15]); } } sequence._mdf = _mdf; }, processSequences: function(isFirstFrame) { var i, len = this.sequenceList.length; for (i = 0; i < len; i += 1) { this.processSequence(this.sequenceList[i], isFirstFrame); } }, getNewKey: function() { return '_' + this.transform_key_count++; } } 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 , len = styles.length,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; function BaseElement(){ } BaseElement.prototype = { checkMasks: function(){ if(!this.data.hasMask){ return false; } var i = 0, len = this.data.masksProperties.length; while(i=0;i-=1){ this.shapeModifiers[i].processShapes(this._isFirstFrame); } }, lcEnum: { '1': 'butt', '2': 'round', '3': 'square' }, ljEnum: { '1': 'miter', '2': 'round', '3': 'bevel' }, searchProcessedElement: function(elem){ var elements = this.processedElements; var i = 0, 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); } }; 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); if(this.textProperty._mdf || this.textProperty._isFirstFrame) { this.buildNewText(); this.textProperty._isFirstFrame = false; this.textProperty._mdf = false; } }; ITextElement.prototype.createPathShape = function(matrixHelper, shapes) { var j,jLen = shapes.length; var k, kLen, pathNodes; var shapeStr = ''; for(j=0;j= 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,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,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(); }; function IImageElement(data,globalData,comp){ this.assetData = globalData.getAssetData(data.refId); 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; } 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); }; 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.layerElement = createNS('g'); this.initElement(data,globalData,comp); this.tm = data.tm ? PropertyFactory.getProp(this,data.tm,0,globalData.frameRate,this) : {_placeholder:true}; } extendPrototype([SVGRenderer, ICompElement, SVGBaseElement], SVGCompElement); function SVGTextElement(data,globalData,comp){ this.textSpans = []; this.renderType = 'svg'; this.initElement(data,globalData,comp); } extendPrototype([BaseElement,TransformElement,SVGBaseElement,HierarchyElement,FrameElement,RenderableDOMElement,ITextElement], SVGTextElement); SVGTextElement.prototype.createContent = function(){ if (this.data.singleShape && !this.globalData.fontManager.chars) { this.textContainer = createNS('text'); } }; SVGTextElement.prototype.buildTextContents = function(textArray) { var i = 0, len = textArray.length; var textContents = [], 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; } SVGTextElement.prototype.buildNewText = function(){ var i, 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, 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 shapes, shapeStr = '', singleShape = this.data.singleShape; var xPos = 0, yPos = 0, firstLine = true; var trackingOffset = documentData.tr/1000*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; } 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] || createNS('tspan'); tSpan.textContent = textContent[i]; tSpan.setAttribute('x', 0); tSpan.setAttribute('y', yPos); tSpan.style.display = 'inherit'; tElement.appendChild(tSpan); this.textSpans[i] = tSpan; yPos += documentData.finalLineHeight; } this.layerElement.appendChild(tElement); } else { var cachedSpansLength = this.textSpans.length; var shapeData, charData; for (i = 0; i < len; i += 1) { if(!usesGlyphs || !singleShape || i === 0){ tSpan = cachedSpansLength > i ? this.textSpans[i] : createNS(usesGlyphs?'path':'text'); if (cachedSpansLength <= i) { tSpan.setAttribute('stroke-linecap', 'butt'); tSpan.setAttribute('stroke-linejoin','round'); tSpan.setAttribute('stroke-miterlimit','4'); this.textSpans[i] = tSpan; this.layerElement.appendChild(tSpan); } tSpan.style.display = 'inherit'; } matrixHelper.reset(); matrixHelper.scale(documentData.finalSize / 100, documentData.finalSize / 100); 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); shapeData = charData && charData.data || {}; shapes = shapeData.shapes ? shapeData.shapes[0].it : []; if(!singleShape){ tSpan.setAttribute('d',this.createPathShape(matrixHelper,shapes)); } else { shapeStr += this.createPathShape(matrixHelper,shapes); } } 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].style.display = 'none'; i += 1; } this._sizeChanged = true; }; SVGTextElement.prototype.sourceRectAtTime = function(time){ 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; }; SVGTextElement.prototype.renderInnerContent = function(){ if(!this.data.singleShape){ this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag); if(this.lettersChangedFlag || this.textAnimator.lettersChangedFlag){ this._sizeChanged = true; var i,len; var renderedLetters = this.textAnimator.renderedLetters; var letters = this.textProperty.currentData.l; len = letters.length; var renderedLetter, textSpan; for(i=0;i 1 && areAnimated) { this.setShapesAsAnimated(tempShapes); } } } SVGShapeElement.prototype.setShapesAsAnimated = function(shapes){ var i, 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(' + locationHref + '#' + elementData.maskId + ')'); } } if(data.ty === 'st' || data.ty === 'gs') { pathElement.setAttribute('stroke-linecap', this.lcEnum[data.lc] || 'round'); pathElement.setAttribute('stroke-linejoin',this.ljEnum[data.lj] || 'round'); 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, 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, 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, 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, len = arr.length - 1; var j, jLen; var ownStyles = [], ownModifiers = [], styleOb, currentTransform, modifier, 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'){ if(!processedPos){ itemsData[i] = this.createStyleElement(arr[i], level); } else { itemsData[i].style.closed = false; } if(arr[i]._render){ 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 horizontal & vertical // 2 -> horizontal only // 3 -> vertical only // var dimensions = this.filterManager.effectElements[1].p.v; var sigmaX = (dimensions == 3) ? 0 : sigma; var sigmaY = (dimensions == 2) ? 0 : sigma; 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'; this.feGaussianBlur.setAttribute('edgeMode', edgeMode); } } function SVGStrokeEffect(elem, filterManager){ 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,groupPath, i, 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= max){ colorValue = inputDelta < 0 ? outputBlack : outputWhite; } else { colorValue = (outputBlack + outputDelta * Math.pow((perc - inputBlack) / inputDelta, 1 / gamma)); } table[pos++] = colorValue; cnt += 256/(segments-1); } return table.join(' '); }; SVGProLevelsFilter.prototype.renderFrame = function(forceRender){ if(forceRender || this.filterManager._mdf){ var val, cnt, perc, bezier; 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); } } }; function SVGDropShadowEffect(filter, filterManager) { var filterSize = filterManager.container.globalData.renderConfig.filterSize filter.setAttribute('x', filterSize.x); filter.setAttribute('y', filterSize.y); filter.setAttribute('width', filterSize.width); filter.setAttribute('height', filterSize.height); this.filterManager = filterManager; var feGaussianBlur = createNS('feGaussianBlur'); feGaussianBlur.setAttribute('in','SourceAlpha'); feGaussianBlur.setAttribute('result','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','drop_shadow_1'); feOffset.setAttribute('result','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','drop_shadow_3'); this.feFlood = feFlood; filter.appendChild(feFlood); var feComposite = createNS('feComposite'); feComposite.setAttribute('in','drop_shadow_3'); feComposite.setAttribute('in2','drop_shadow_2'); feComposite.setAttribute('operator','in'); feComposite.setAttribute('result','drop_shadow_4'); filter.appendChild(feComposite); var feMerge = createNS('feMerge'); filter.appendChild(feMerge); var feMergeNode; feMergeNode = createNS('feMergeNode'); feMerge.appendChild(feMergeNode); feMergeNode = createNS('feMergeNode'); feMergeNode.setAttribute('in','SourceGraphic'); this.feMergeNode = feMergeNode; this.feMerge = feMerge; this.originalNodeAdded = false; feMerge.appendChild(feMergeNode); } 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); } /*if(forceRender || this.filterManager.effectElements[5].p._mdf){ if(this.filterManager.effectElements[5].p.v === 1 && this.originalNodeAdded) { this.feMerge.removeChild(this.feMergeNode); this.originalNodeAdded = false; } else if(this.filterManager.effectElements[5].p.v === 0 && !this.originalNodeAdded) { this.feMerge.appendChild(this.feMergeNode); this.originalNodeAdded = true; } }*/ } }; 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, 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, 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, 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(); } }; function SVGEffects(elem){ var i, len = elem.data.ef ? elem.data.ef.length : 0; var filId = createElementID(); var fil = filtersFactory.createFilter(filId); var count = 0; this.filters = []; var filterManager; for(i=0;i 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(parentMatrix){ this.canvasContext.drawImage(this.img, 0, 0); }; CVImageElement.prototype.destroy = function(){ this.img = null; }; 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([CanvasRenderer, 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,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,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; }; function CVMaskElement(data,element){ this.data = data; this.element = element; this.masksProperties = this.data.masksProperties || []; this.viewData = createSizedArray(this.masksProperties.length); var i, len = this.masksProperties.length, hasMasks = false; for (i = 0; i < len; i++) { 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, len = this.masksProperties.length; var pt,pts,data; ctx.beginPath(); for (i = 0; i < len; i++) { 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, jLen = data._length; for (j = 1; j < jLen; j++) { 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; }; 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('+bm_floor(elementData.c.v[0])+','+bm_floor(elementData.c.v[1])+','+bm_floor(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 = this.lcEnum[data.lc] || 'round'; styleElem.lj = this.ljEnum[data.lj] || 'round'; if(data.lj == 1) { 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(data) { 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, 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, 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, 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, len = styles.length, j, jLen; for (i = 0; i < len; i += 1) { styles[i].closed = true; } } CVShapeElement.prototype.searchShapes = function(arr,itemsData, prevViewData, shouldRender, transforms){ var i, len = arr.length - 1; var j, jLen; var ownStyles = [], ownModifiers = [], processedPos, modifier, 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=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, len, j, 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, 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(' + bm_floor(itemData.c.v[0]) + ',' + bm_floor(itemData.c.v[1]) + ',' + bm_floor(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; 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 grd; var pt1 = itemData.s.v, 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 >= 1 ? 0.99 : itemData.h.v <= -1 ? -0.99: itemData.h.v; 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]; var grd = ctx.createRadialGradient(x, y, 0, pt1[0], pt1[1], rad); } var i, 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('+bm_floor(itemData.c.v[0])+','+bm_floor(itemData.c.v[1])+','+bm_floor(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; }; 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; ctx.fillStyle = this.data.sc; ctx.fillRect(0, 0, this.data.sw, this.data.sh); // }; 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, 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, shapeData, k, kLen, shapes, j, jLen, pathNodes, commands, pathArr, singleShape = this.data.singleShape; var trackingOffset = documentData.tr/1000*documentData.finalSize; var xPos = 0, yPos = 0, 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); for(j=0;j