From b0a64957483638338082336372e3e5f5fa7c4f64 Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 16 Aug 2020 20:20:36 +0000 Subject: [PATCH] Changes: * replaced some path processing with SVGPathCommander * minor improvements --- demo/src/kute-base.js | 24 +- demo/src/kute-base.min.js | 2 +- demo/src/kute-extra.js | 681 ++++++++++++++++++---------- demo/src/kute-extra.min.js | 2 +- demo/src/kute.min.js | 2 +- dist/kute.esm.js | 533 +++++++++++++--------- dist/kute.esm.min.js | 2 +- dist/kute.js | 533 +++++++++++++--------- dist/kute.min.js | 2 +- package.json | 1 + src/components/svgCubicMorph.js | 598 ++---------------------- src/components/svgCubicMorphBase.js | 22 +- src/components/svgMorph.js | 494 +------------------- src/core/queueStart.js | 17 + src/tween/tween.js | 19 +- src/tween/tweenBase.js | 15 +- 16 files changed, 1177 insertions(+), 1770 deletions(-) create mode 100644 src/core/queueStart.js diff --git a/demo/src/kute-base.js b/demo/src/kute-base.js index 8c2f9ae..ae66149 100644 --- a/demo/src/kute-base.js +++ b/demo/src/kute-base.js @@ -240,6 +240,19 @@ return {name:ComponentName} }; + function queueStart(){ + for (var obj in onStart) { + if (typeof (onStart[obj]) === 'function') { + onStart[obj].call(this,obj); + } else { + for (var prop in onStart[obj]) { + onStart[obj][prop].call(this,prop); + } + } + } + linkInterpolation.call(this); + } + var TweenBase = function TweenBase(targetElement, startObject, endObject, options){ this.element = targetElement; this.playing = false; @@ -273,16 +286,7 @@ if (this._onStart) { this._onStart.call(this); } - for (var obj in onStart) { - if (typeof (onStart[obj]) === 'function') { - onStart[obj].call(this,obj); - } else { - for (var prop in onStart[obj]) { - onStart[obj][prop].call(this,prop); - } - } - } - linkInterpolation.call(this); + queueStart.call(this); this._startFired = true; } !Tick && Ticker(); diff --git a/demo/src/kute-base.min.js b/demo/src/kute-base.min.js index 432cf8a..a173e1c 100644 --- a/demo/src/kute-base.min.js +++ b/demo/src/kute-base.min.js @@ -1,2 +1,2 @@ // KUTE.js Base v2.0.13 | thednp © 2020 | MIT-License -!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).KUTE=n()}(this,(function(){"use strict";var t={},n=[],e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},i={},r={},o={};o.now=self.performance.now.bind(self.performance);var a=0,s=function(t){for(var e=0;e>0)/1e3;return i}E.prototype.start=function(n){if(g(this),this.playing=!0,this._startTime=void 0!==n?n:t.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),r)if("function"==typeof r[e])r[e].call(this,e);else for(var i in r[e])r[e][i].call(this,i);w.call(this),this._startFired=!0}return!a&&s(),this},E.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},E.prototype.close=function(){for(var t in h)for(var n in h[t])h[t][n].call(this,n);this._startFired=!1,u.call(this)},E.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},E.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},E.prototype.update=function(n){var e,i;if((n=void 0!==n?n:t.Time())1?1:e,i=this._easing(e),this.valuesEnd)t[r](this.element,this.valuesStart[r],this.valuesEnd[r],i);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},y.tween=E;var I="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null,k={component:"transformMatrixBase",property:"transform",functions:{onStart:{transform:function(n){this.valuesEnd[n]&&!t[n]&&(t[n]=function(t,e,i,r){var o=new I,a={};for(var s in i)a[s]="perspective"===s?O(e[s],i[s],r):b(e[s],i[s],r);a.perspective&&(o.m34=-1/a.perspective),o=a.translate3d?o.translate(a.translate3d[0],a.translate3d[1],a.translate3d[2]):o,o=a.rotate3d?o.rotate(a.rotate3d[0],a.rotate3d[1],a.rotate3d[2]):o,a.skew&&(o=a.skew[0]?o.skewX(a.skew[0]):o,o=a.skew[1]?o.skewY(a.skew[1]):o),o=a.scale3d?o.scale(a.scale3d[0],a.scale3d[1],a.scale3d[2]):o,t.style[n]=o.toString()})},CSS3Matrix:function(n){this.valuesEnd.transform&&!t[n]&&(t[n]=I)}}},Interpolate:{perspective:O,translate3d:b,rotate3d:b,skew:b,scale3d:b}};function x(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(r>.99||r<.01?(10*O(e,i,r)>>0)/10:O(e,i,r)>>0)+"px"})}var U=["top","left","width","height"],q={};U.map((function(t){return q[t]=x}));var A={component:"baseBoxModel",category:"boxModel",properties:U,Interpolate:{numbers:O},functions:{onStart:q}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:O},functions:{onStart:function(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(1e3*O(e,i,r)>>0)/1e3})}}},F=new T(k),j=new T(A),K=new T(B);return{Animation:T,Components:{Transform:F,BoxModel:j,Opacity:K},TweenBase:E,fromTo:function(t,n,e,i){return i=i||{},new y.tween(M(t),n,e,i)},Objects:d,Easing:m,Util:v,Render:f,Interpolate:i,Internals:C,Selector:M,Version:"2.0.13"}})); +!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).KUTE=n()}(this,(function(){"use strict";var t={},n=[],e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},i={},r={},o={};o.now=self.performance.now.bind(self.performance);var a=0,s=function(t){for(var e=0;e>0)/1e3;return i}O.prototype.start=function(n){return g(this),this.playing=!0,this._startTime=void 0!==n?n:t.Time(),this._startTime+=this._delay,this._startFired||(this._onStart&&this._onStart.call(this),E.call(this),this._startFired=!0),!a&&s(),this},O.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},O.prototype.close=function(){for(var t in h)for(var n in h[t])h[t][n].call(this,n);this._startFired=!1,u.call(this)},O.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},O.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},O.prototype.update=function(n){var e,i;if((n=void 0!==n?n:t.Time())1?1:e,i=this._easing(e),this.valuesEnd)t[r](this.element,this.valuesStart[r],this.valuesEnd[r],i);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},y.tween=O;var k="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null,x={component:"transformMatrixBase",property:"transform",functions:{onStart:{transform:function(n){this.valuesEnd[n]&&!t[n]&&(t[n]=function(t,e,i,r){var o=new k,a={};for(var s in i)a[s]="perspective"===s?b(e[s],i[s],r):I(e[s],i[s],r);a.perspective&&(o.m34=-1/a.perspective),o=a.translate3d?o.translate(a.translate3d[0],a.translate3d[1],a.translate3d[2]):o,o=a.rotate3d?o.rotate(a.rotate3d[0],a.rotate3d[1],a.rotate3d[2]):o,a.skew&&(o=a.skew[0]?o.skewX(a.skew[0]):o,o=a.skew[1]?o.skewY(a.skew[1]):o),o=a.scale3d?o.scale(a.scale3d[0],a.scale3d[1],a.scale3d[2]):o,t.style[n]=o.toString()})},CSS3Matrix:function(n){this.valuesEnd.transform&&!t[n]&&(t[n]=k)}}},Interpolate:{perspective:b,translate3d:I,rotate3d:I,skew:I,scale3d:I}};function U(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(r>.99||r<.01?(10*b(e,i,r)>>0)/10:b(e,i,r)>>0)+"px"})}var q=["top","left","width","height"],A={};q.map((function(t){return A[t]=U}));var B={component:"baseBoxModel",category:"boxModel",properties:q,Interpolate:{numbers:b},functions:{onStart:A}};var F={component:"baseOpacity",property:"opacity",Interpolate:{numbers:b},functions:{onStart:function(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(1e3*b(e,i,r)>>0)/1e3})}}},j=new T(x),K=new T(B),Q=new T(F);return{Animation:T,Components:{Transform:j,BoxModel:K,Opacity:Q},TweenBase:O,fromTo:function(t,n,e,i){return i=i||{},new y.tween(M(t),n,e,i)},Objects:d,Easing:m,Util:v,Render:f,Interpolate:i,Internals:C,Selector:M,Version:"2.0.13"}})); diff --git a/demo/src/kute-extra.js b/demo/src/kute-extra.js index 1f05d35..661a924 100644 --- a/demo/src/kute-extra.js +++ b/demo/src/kute-extra.js @@ -21,7 +21,7 @@ var Interpolate = {}; - var onStart$1 = {}; + var onStart = {}; var Time = {}; Time.now = self.performance.now.bind(self.performance); @@ -42,11 +42,11 @@ if (!Tweens.length && Tick) { cancelAnimationFrame(Tick); Tick = null; - for (var obj in onStart$1) { - if (typeof (onStart$1[obj]) === 'function') { + for (var obj in onStart) { + if (typeof (onStart[obj]) === 'function') { KUTE[obj] && (delete KUTE[obj]); } else { - for (var prop in onStart$1[obj]) { + for (var prop in onStart[obj]) { KUTE[prop] && (delete KUTE[prop]); } } @@ -92,7 +92,7 @@ prepareProperty: prepareProperty, prepareStart: prepareStart, crossCheck: crossCheck, - onStart: onStart$1, + onStart: onStart, onComplete: onComplete, linkProperty: linkProperty }; @@ -112,7 +112,7 @@ function removeAll () { Tweens.length = 0; } - function linkInterpolation$1() { + function linkInterpolation() { var this$1 = this; var loop = function ( component ) { var componentLink = linkProperty[component]; @@ -149,7 +149,7 @@ getAll: getAll, removeAll: removeAll, stop: stop, - linkInterpolation: linkInterpolation$1 + linkInterpolation: linkInterpolation }; function getInlineStyle(el) { @@ -352,6 +352,19 @@ } } + function queueStart(){ + for (var obj in onStart) { + if (typeof (onStart[obj]) === 'function') { + onStart[obj].call(this,obj); + } else { + for (var prop in onStart[obj]) { + onStart[obj][prop].call(this,prop); + } + } + } + linkInterpolation.call(this); + } + var TweenBase = function TweenBase(targetElement, startObject, endObject, options){ this.element = targetElement; this.playing = false; @@ -369,8 +382,8 @@ if( !(internalOption in this ) ) { this[internalOption] = options[op]; } } var easingFnName = this._easing.name; - if (!onStart$1[easingFnName]) { - onStart$1[easingFnName] = function(prop){ + if (!onStart[easingFnName]) { + onStart[easingFnName] = function(prop){ !KUTE[prop] && prop === this._easing.name && (KUTE[prop] = this._easing); }; } @@ -385,16 +398,7 @@ if (this._onStart) { this._onStart.call(this); } - for (var obj in onStart$1) { - if (typeof (onStart$1[obj]) === 'function') { - onStart$1[obj].call(this,obj); - } else { - for (var prop in onStart$1[obj]) { - onStart$1[obj][prop].call(this,prop); - } - } - } - linkInterpolation$1.call(this); + queueStart.call(this); this._startFired = true; } !Tick && Ticker(); @@ -540,16 +544,7 @@ if (this._onResume !== undefined) { this._onResume.call(this); } - for (var obj in onStart) { - if (typeof (onStart[obj]) === 'function') { - onStart[obj].call(this,obj); - } else { - for (var prop in onStart[obj]) { - onStart[obj][prop].call(this,prop); - } - } - } - linkInterpolation.call(this); + queueStart.call(this); this._startTime += KUTE.Time() - this._pauseTime; add(this); !Tick && Ticker(); @@ -799,7 +794,7 @@ Animation.prototype.setComponent = function setComponent (Component){ var propertyInfo = this; var ComponentName = Component.component; - var Functions = { prepareProperty: prepareProperty, prepareStart: prepareStart, onStart: onStart$1, onComplete: onComplete, crossCheck: crossCheck }; + var Functions = { prepareProperty: prepareProperty, prepareStart: prepareStart, onStart: onStart, onComplete: onComplete, crossCheck: crossCheck }; var Category = Component.category; var Property = Component.property; var Length = Component.properties && Component.properties.length || Component.subProperties && Component.subProperties.length; @@ -868,7 +863,7 @@ AnimationDevelopment.prototype.setComponent = function setComponent (Component){ Animation.prototype.setComponent.call(this, Component); var propertyInfo = this; - var Functions = { prepareProperty: prepareProperty,prepareStart: prepareStart,onStart: onStart$1,onComplete: onComplete,crossCheck: crossCheck }; + var Functions = { prepareProperty: prepareProperty,prepareStart: prepareStart,onStart: onStart,onComplete: onComplete,crossCheck: crossCheck }; var Category = Component.category; var Property = Component.property; var Length = Component.properties && Component.properties.length || Component.subProperties && Component.subProperties.length; @@ -1232,7 +1227,7 @@ if ( currentValue !== null && regex.test(currentValue) ) { var unit = trueDimension(currentValue).u || trueDimension(attrObj[p]).u; var suffix = /%/.test(unit) ? '_percent' : ("_" + unit); - onStart$1[ComponentName][prop+suffix] = function(tp) { + onStart[ComponentName][prop+suffix] = function(tp) { if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) { attributes[tp] = function (elem, p, a, b, v) { var _p = p.replace(suffix,''); @@ -1242,7 +1237,7 @@ }; attributesObject[prop+suffix] = trueDimension(attrObj[p]); } else if ( !regex.test(attrObj[p]) || currentValue === null || currentValue !== null && !regex.test(currentValue) ) { - onStart$1[ComponentName][prop] = function(tp) { + onStart[ComponentName][prop] = function(tp) { if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) { attributes[tp] = function (elem, oneAttr, a, b, v) { elem.setAttribute(oneAttr, (numbers(a,b,v) * 1000 >> 0) / 1000 ); @@ -1252,7 +1247,7 @@ attributesObject[prop] = parseFloat(attrObj[p]); } } else { - onStart$1[ComponentName][prop] = function(tp) { + onStart[ComponentName][prop] = function(tp) { if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) { attributes[tp] = function (elem, oneAttr, a, b, v) { elem.setAttribute(oneAttr, colors(a,b,v)); @@ -1560,17 +1555,16 @@ }; Components.SVGDraw = svgDraw; - function toPathString(pathArray) { - var newPath = pathArray.map( function (c) { - if (typeof(c) === 'string') { + function pathToString(pathArray) { + return pathArray.map( function (c) { + if (typeof c === 'string') { return c } else { - var c0 = c.shift(); - return c0 + c.join(',') + return c.shift() + c.join(',') } - }); - return newPath.join(''); + }).join(' ') } + function onStartCubicMorph(tweenProp){ if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { KUTE[tweenProp] = function(elem,a,b,v){ @@ -1581,12 +1575,256 @@ curve[i].push( (numbers(path1[i][j], path2[i][j], v) * 1000 >>0)/1000 ); } } - elem.setAttribute("d", v === 1 ? b.original : toPathString(curve) ); + elem.setAttribute("d", v === 1 ? b.original : pathToString(curve) ); }; } } - var INVALID_INPUT = 'Invalid path value'; + function clonePath(pathArray){ + return pathArray.map(function (x) { return Array.isArray(x) ? clonePath(x) : !isNaN(+x) ? +x : x; } ) + } + + var SVGPCOps = { + decimals:3, + round:1 + }; + + function roundPath(pathArray) { + return pathArray.map( function (seg) { return seg.map(function (c,i) { + var nr = +c, dc = Math.pow(10,SVGPCOps.decimals); + return i ? (nr % 1 === 0 ? nr : (nr*dc>>0)/dc) : c + } + ); }) + } + + function SVGPathArray(pathString){ + this.segments = []; + this.isClosed = 0; + this.isAbsolute = 0; + this.pathValue = pathString; + this.max = pathString.length; + this.index = 0; + this.param = 0.0; + this.segmentStart = 0; + this.data = []; + this.err = ''; + return this + } + + var paramCounts = { a: 7, c: 6, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, z: 0 }; + function isSpace(ch) { + var specialSpaces = [ + 0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, + 0x2007, 0x2008, 0x2009, 0x200A, 0x202F, 0x205F, 0x3000, 0xFEFF ]; + return (ch === 0x0A) || (ch === 0x0D) || (ch === 0x2028) || (ch === 0x2029) || + (ch === 0x20) || (ch === 0x09) || (ch === 0x0B) || (ch === 0x0C) || (ch === 0xA0) || + (ch >= 0x1680 && specialSpaces.indexOf(ch) >= 0); + } + function isCommand(code) { + switch (code | 0x20) { + case 0x6D: + case 0x7A: + case 0x6C: + case 0x68: + case 0x76: + case 0x63: + case 0x73: + case 0x71: + case 0x74: + case 0x61: + case 0x72: + return true; + } + return false; + } + function isArc(code) { + return (code | 0x20) === 0x61; + } + function isDigit(code) { + return (code >= 48 && code <= 57); + } + function isDigitStart(code) { + return (code >= 48 && code <= 57) || + code === 0x2B || + code === 0x2D || + code === 0x2E; + } + function skipSpaces(state) { + while (state.index < state.max && isSpace(state.pathValue.charCodeAt(state.index))) { + state.index++; + } + } + function scanFlag(state) { + var ch = state.pathValue.charCodeAt(state.index); + if (ch === 0x30) { + state.param = 0; + state.index++; + return; + } + if (ch === 0x31) { + state.param = 1; + state.index++; + return; + } + state.err = 'SvgPath: arc flag can be 0 or 1 only (at pos ' + state.index + ')'; + } + function scanParam(state) { + var start = state.index, + index = start, + max = state.max, + zeroFirst = false, + hasCeiling = false, + hasDecimal = false, + hasDot = false, + ch; + if (index >= max) { + state.err = 'SvgPath: missed param (at pos ' + index + ')'; + return; + } + ch = state.pathValue.charCodeAt(index); + if (ch === 0x2B || ch === 0x2D) { + index++; + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + } + if (!isDigit(ch) && ch !== 0x2E) { + state.err = 'SvgPath: param should start with 0..9 or `.` (at pos ' + index + ')'; + return; + } + if (ch !== 0x2E) { + zeroFirst = (ch === 0x30); + index++; + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + if (zeroFirst && index < max) { + if (ch && isDigit(ch)) { + state.err = 'SvgPath: numbers started with `0` such as `09` are illegal (at pos ' + start + ')'; + return; + } + } + while (index < max && isDigit(state.pathValue.charCodeAt(index))) { + index++; + hasCeiling = true; + } + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + } + if (ch === 0x2E) { + hasDot = true; + index++; + while (isDigit(state.pathValue.charCodeAt(index))) { + index++; + hasDecimal = true; + } + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + } + if (ch === 0x65 || ch === 0x45) { + if (hasDot && !hasCeiling && !hasDecimal) { + state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; + return; + } + index++; + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + if (ch === 0x2B || ch === 0x2D) { + index++; + } + if (index < max && isDigit(state.pathValue.charCodeAt(index))) { + while (index < max && isDigit(state.pathValue.charCodeAt(index))) { + index++; + } + } else { + state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; + return; + } + } + state.index = index; + state.param = parseFloat(state.pathValue.slice(start, index)) + 0.0; + } + function finalizeSegment(state) { + var cmd = state.pathValue[state.segmentStart], cmdLC = cmd.toLowerCase(), params = state.data; + if (cmdLC === 'm' && params.length > 2) { + state.segments.push([ cmd, params[0], params[1] ]); + params = params.slice(2); + cmdLC = 'l'; + cmd = (cmd === 'm') ? 'l' : 'L'; + } + if (cmdLC === 'r') { + state.segments.push([ cmd ].concat(params)); + } else { + while (params.length >= paramCounts[cmdLC]) { + state.segments.push([ cmd ].concat(params.splice(0, paramCounts[cmdLC]))); + if (!paramCounts[cmdLC]) { + break; + } + } + } + } + function scanSegment(state) { + var max = state.max, cmdCode, is_arc, comma_found, need_params, i; + state.segmentStart = state.index; + cmdCode = state.pathValue.charCodeAt(state.index); + is_arc = isArc(cmdCode); + if (!isCommand(cmdCode)) { + state.err = 'SvgPath: bad command ' + state.pathValue[state.index] + ' (at pos ' + state.index + ')'; + return; + } + need_params = paramCounts[state.pathValue[state.index].toLowerCase()]; + state.index++; + skipSpaces(state); + state.data = []; + if (!need_params) { + state.isClosed = 1; + finalizeSegment(state); + return; + } + comma_found = false; + for (;;) { + for (i = need_params; i > 0; i--) { + if (is_arc && (i === 3 || i === 4)) { scanFlag(state); } + else { scanParam(state); } + if (state.err.length) { + return; + } + state.data.push(state.param); + skipSpaces(state); + comma_found = false; + if (state.index < max && state.pathValue.charCodeAt(state.index) === 0x2C) { + state.index++; + skipSpaces(state); + comma_found = true; + } + } + if (comma_found) { + continue; + } + if (state.index >= state.max) { + break; + } + if (!isDigitStart(state.pathValue.charCodeAt(state.index))) { + break; + } + } + finalizeSegment(state); + } + function parsePathString(pathString) { + if ( Array.isArray(pathString) ) { + return clonePath(pathString) + } + var state = new SVGPathArray(pathString), max = state.max; + skipSpaces(state); + while (state.index < max && !state.err.length) { + scanSegment(state); + } + if (state.err.length) { + state.segments = []; + } else if (state.segments.length) { + if ('mM'.indexOf(state.segments[0][0]) < 0) { + state.err = 'SvgPath: string should start with `M` or `m`'; + state.segments = []; + } else { + state.segments[0][0] = 'M'; + } + } + return roundPath(state.segments) + } + function catmullRom2bezier(crp, z) { var d = []; for (var i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) { @@ -1612,17 +1850,19 @@ p[0] = {x: +crp[i], y: +crp[i + 1]}; } } - d.push(["C", - (-p[0].x + 6 * p[1].x + p[2].x) / 6, - (-p[0].y + 6 * p[1].y + p[2].y) / 6, - (p[1].x + 6 * p[2].x - p[3].x) / 6, - (p[1].y + 6*p[2].y - p[3].y) / 6, - p[2].x, - p[2].y + d.push([ + "C", + (-p[0].x + 6 * p[1].x + p[2].x) / 6, + (-p[0].y + 6 * p[1].y + p[2].y) / 6, + (p[1].x + 6 * p[2].x - p[3].x) / 6, + (p[1].y + 6*p[2].y - p[3].y) / 6, + p[2].x, + p[2].y ]); } return d } + function ellipsePath(x, y, rx, ry, a) { if (a == null && ry == null) { ry = rx; @@ -1634,10 +1874,10 @@ var res; if (a != null) { var rad = Math.PI / 180, - x1 = x + rx * Math.cos(-ry * rad), - x2 = x + rx * Math.cos(-a * rad), - y1 = y + rx * Math.sin(-ry * rad), - y2 = y + rx * Math.sin(-a * rad); + x1 = x + rx * Math.cos(-ry * rad), + x2 = x + rx * Math.cos(-a * rad), + y1 = y + rx * Math.sin(-ry * rad), + y2 = y + rx * Math.sin(-a * rad); res = [["M", x1, y1], ["A", rx, rx, 0, +(a - ry > 180), 0, x2, y2]]; } else { res = [ @@ -1650,49 +1890,18 @@ } return res; } - function parsePathString(pathString) { - if (!pathString) { - return null; - } - if( pathString instanceof Array ) { - return pathString; - } else { - var spaces = "\\" + (("x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029").split('|').join('\\')), - pathCommand = new RegExp(("([a-z])[" + spaces + ",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?[" + spaces + "]*,?[" + spaces + "]*)+)"), "ig"), - pathValues = new RegExp(("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)[" + spaces + "]*,?[" + spaces + "]*"), "ig"), - paramCounts = {a: 7, c: 6, o: 2, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, u: 3, z: 0}, - data = []; - pathString.replace(pathCommand, function (a, b, c) { - var params = [], name = b.toLowerCase(); - c.replace(pathValues, function (a, b) { - b && params.push(+b); - }); - if (name == "m" && params.length > 2) { - data.push([b].concat(params.splice(0, 2))); - name = "l"; - b = b == "m" ? "l" : "L"; - } - if (name == "o" && params.length == 1) { - data.push([b, params[0]]); - } - if (name == "r") { - data.push([b].concat(params)); - } else { while (params.length >= paramCounts[name]) { - data.push([b].concat(params.splice(0, paramCounts[name]))); - if (!paramCounts[name]) { - break; - } - } } - }); - return data; - } - } + function pathToAbsolute(pathArray) { pathArray = parsePathString(pathArray); if (!pathArray || !pathArray.length) { return [["M", 0, 0]]; } - var res = [], x = 0, y = 0, mx = 0, my = 0, start = 0, pa0; + var res = [], x = 0, y = 0, mx = 0, my = 0, start = 0, + ii = pathArray.length, + crz = pathArray.length === 3 && + pathArray[0][0] === "M" && + pathArray[1][0].toUpperCase() === "R" && + pathArray[2][0].toUpperCase() === "Z"; if (pathArray[0][0] === "M") { x = +pathArray[0][1]; y = +pathArray[0][2]; @@ -1701,14 +1910,9 @@ start++; res[0] = ["M", x, y]; } - var crz = pathArray.length === 3 && - pathArray[0][0] === "M" && - pathArray[1][0].toUpperCase() === "R" && - pathArray[2][0].toUpperCase() === "Z"; - for (var r = (void 0), pa = (void 0), i = start, ii = pathArray.length; i < ii; i++) { + var loop = function ( i ) { + var r = (void 0), pa = pathArray[i], pa0 = pa[0]; res.push(r = []); - pa = pathArray[i]; - pa0 = pa[0]; if (pa0 !== pa0.toUpperCase()) { r[0] = pa0.toUpperCase(); switch (r[0]) { @@ -1728,19 +1932,19 @@ r[1] = +pa[1] + x; break; case "R": - var dots = [x, y].concat(pa.slice(1)); - for (var j = 2, jj = dots.length; j < jj; j++) { - dots[j] = +dots[j] + x; - dots[++j] = +dots[j] + y; + var dots$1 = [x, y].concat(pa.slice(1)); + for (var j = 2, jj = dots$1.length; j < jj; j++) { + dots$1[j] = +dots$1[j] + x; + dots$1[++j] = +dots$1[j] + y; } res.pop(); - res = res.concat(catmullRom2bezier(dots, crz)); + res = res.concat(catmullRom2bezier(dots$1, crz)); break; case "O": res.pop(); - dots = ellipsePath(x, y, pa[1], pa[2]); - dots.push(dots[0]); - res = res.concat(dots); + dots$1 = ellipsePath(x, y, +pa[1], +pa[2]); + dots$1.push(dots$1[0]); + res = res.concat(dots$1); break; case "U": res.pop(); @@ -1751,84 +1955,71 @@ mx = +pa[1] + x; my = +pa[2] + y; default: - for (j = 1, jj = pa.length; j < jj; j++) { - r[j] = +pa[j] + ((j % 2) ? x : y); + for (var j$1 = 1, jj$1 = pa.length; j$1 < jj$1; j$1++) { + r[j$1] = +pa[j$1] + ((j$1 % 2) ? x : y); } } - } else if (pa0 == "R") { + } else if (pa0 === "R") { dots = [x, y].concat(pa.slice(1)); res.pop(); res = res.concat(catmullRom2bezier(dots, crz)); r = ["R"].concat(pa.slice(-2)); - } else if (pa0 == "O") { + } else if (pa0 === "O") { res.pop(); - dots = ellipsePath(x, y, pa[1], pa[2]); + dots = ellipsePath(x, y, +pa[1], +pa[2]); dots.push(dots[0]); res = res.concat(dots); - } else if (pa0 == "U") { + } else if (pa0 === "U") { res.pop(); - res = res.concat(ellipsePath(x, y, pa[1], pa[2], pa[3])); + res = res.concat(ellipsePath(x, y, +pa[1], +pa[2], +pa[3])); r = ["U"].concat(res[res.length - 1].slice(-2)); } else { - for (var k = 0, kk = pa.length; k < kk; k++) { - r[k] = pa[k]; - } + pa.map(function (k){ return r.push(k); }); } pa0 = pa0.toUpperCase(); - if (pa0 != "O") { + if (pa0 !== "O") { switch (r[0]) { case "Z": - x = +mx; - y = +my; + x = mx; + y = my; break; case "H": - x = r[1]; + x = +r[1]; break; case "V": - y = r[1]; + y = +r[1]; break; case "M": - mx = r[r.length - 2]; - my = r[r.length - 1]; + mx = +r[r.length - 2]; + my = +r[r.length - 1]; default: - x = r[r.length - 2]; - y = r[r.length - 1]; + x = +r[r.length - 2]; + y = +r[r.length - 1]; } } - } - return res + }; + for (var i = start; i < ii; i++) loop( i ); + return roundPath(res) } - function l2c(x1, y1, x2, y2) { - return [x1, y1, x2, y2, x2, y2]; - } - function q2c(x1, y1, ax, ay, x2, y2) { - var _13 = 1 / 3; - var _23 = 2 / 3; - return [ - _13 * x1 + _23 * ax, - _13 * y1 + _23 * ay, - _13 * x2 + _23 * ax, - _13 * y2 + _23 * ay, - x2, - y2 - ] + + function rotateVector(x, y, rad) { + var X = x * Math.cos(rad) - y * Math.sin(rad), + Y = x * Math.sin(rad) + y * Math.cos(rad); + return {x: X, y: Y} } + function a2c(x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) { - var _120 = Math.PI * 120 / 180, rad = Math.PI / 180 * (+angle || 0); - var res = [], xy, f1, f2, cx, cy; - function rotateVector(x, y, rad) { - var X = x * Math.cos(rad) - y * Math.sin(rad), - Y = x * Math.sin(rad) + y * Math.cos(rad); - return {x: X, y: Y}; - } + var _120 = Math.PI * 120 / 180, + rad = Math.PI / 180 * (angle || 0), + res = [], xy, f1, f2, cx, cy; if (!recursive) { xy = rotateVector(x1, y1, -rad); - x1 = xy.x; - y1 = xy.y; + x1 = xy.x; y1 = xy.y; xy = rotateVector(x2, y2, -rad); - x2 = xy.x; - y2 = xy.y; - var x = (x1 - x2) / 2, y = (y1 - y2) / 2, h = (x * x) / (rx * rx) + (y * y) / (ry * ry); + x2 = xy.x; y2 = xy.y; + var x = (x1 - x2) / 2, + y = (y1 - y2) / 2, + h = (x * x) / (rx * rx) + (y * y) / (ry * ry); if (h > 1) { h = Math.sqrt(h); rx = h * rx; @@ -1841,8 +2032,8 @@ / (rx2 * y * y + ry2 * x * x))); cx = k * rx * y / ry + (x1 + x2) / 2, cy = k * -ry * x / rx + (y1 + y2) / 2; - f1 = Math.asin(((y1 - cy) / ry).toFixed(9)), - f2 = Math.asin(((y2 - cy) / ry).toFixed(9)); + f1 = Math.asin(((y1 - cy) / ry)), + f2 = Math.asin(((y2 - cy) / ry)); f1 = x1 < cx ? Math.PI - f1 : f1; f2 = x2 < cx ? Math.PI - f2 : f2; f1 < 0 && (f1 = Math.PI * 2 + f1); @@ -1869,30 +2060,43 @@ } df = f2 - f1; var c1 = Math.cos(f1), - s1 = Math.sin(f1), - c2 = Math.cos(f2), - s2 = Math.sin(f2), - t = Math.tan(df / 4), - hx = 4 / 3 * rx * t, - hy = 4 / 3 * ry * t, - m1 = [x1, y1], - m2 = [x1 + hx * s1, y1 - hy * c1], - m3 = [x2 + hx * s2, y2 - hy * c2], - m4 = [x2, y2]; + s1 = Math.sin(f1), + c2 = Math.cos(f2), + s2 = Math.sin(f2), + t = Math.tan(df / 4), + hx = 4 / 3 * rx * t, + hy = 4 / 3 * ry * t, + m1 = [x1, y1], + m2 = [x1 + hx * s1, y1 - hy * c1], + m3 = [x2 + hx * s2, y2 - hy * c2], + m4 = [x2, y2]; m2[0] = 2 * m1[0] - m2[0]; m2[1] = 2 * m1[1] - m2[1]; if (recursive) { return [m2, m3, m4].concat(res); } else { res = [m2, m3, m4].concat(res).join().split(","); - var newres = []; - for (var i = 0, ii = res.length; i < ii; i++) { - newres[i] = i % 2 ? rotateVector(res[i - 1], res[i], rad).y : rotateVector(res[i], res[i + 1], rad).x; - } - return newres; + return res.map(function (rz,i){ return i % 2 ? rotateVector(res[i - 1], rz, rad).y : rotateVector(rz, res[i + 1], rad).x; }); } } - function processPath (path, d, pcom) { + + function q2c (x1, y1, ax, ay, x2, y2) { + var _13 = 1 / 3, _23 = 2 / 3; + return [ + _13 * x1 + _23 * ax, + _13 * y1 + _23 * ay, + _13 * x2 + _23 * ax, + _13 * y2 + _23 * ay, + x2, + y2 + ] + } + + function l2c(x1, y1, x2, y2) { + return [x1, y1, x2, y2, x2, y2]; + } + + function processPath(path, d, pcom) { var nx, ny; if (!path) { return ["C", d.x, d.y, d.x, d.y, d.x, d.y]; @@ -1946,10 +2150,10 @@ path = ["C"].concat(l2c(d.x, d.y, d.X, d.Y)); break; } - path.map(function (x,i){ return i?x.toFixed(3):x; }); return path; } - function fixM (path1, path2, a1, a2, i) { + + function fixM(path1, path2, a1, a2, i) { if (path1 && path2 && path1[i][0] === "M" && path2[i][0] !== "M") { path2.splice(i, 0, ["M", a2.x, a2.y]); a1.bx = 0; @@ -1958,25 +2162,29 @@ a1.y = path1[i][2]; } } - function fixArc (p, p2, pcoms1, pcoms2, i) { + + function fixArc(p, p2, pc1, pc2, i) { if (p[i].length > 7) { p[i].shift(); var pi = p[i]; while (pi.length) { - pcoms1[i] = "A"; - p2 && (pcoms2[i] = "A"); + pc1[i] = "A"; + p2 && (pc2[i] = "A"); p.splice(i++, 0, ["C"].concat(pi.splice(0, 6))); } p.splice(i, 1); } } - function path2curve(path, path2) { + + function pathToCurve(path, path2) { var p = pathToAbsolute(path), p2 = path2 && pathToAbsolute(path2), attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null}, attrs2 = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null}; - var pcoms1 = [], pcoms2 = [], pfirst = "", pcom = ""; - for (var i = 0, ii = Math.max(p.length, p2 && p2.length || 0); i < ii; i++) { + var pcoms1 = [], pcoms2 = [], + pfirst = "", pcom = "", + ii = Math.max(p.length, p2 && p2.length || 0); + for (var i = 0; i < ii; i++) { p[i] && (pfirst = p[i][0]); if (pfirst !== "C") { pcoms1[i] = pfirst; @@ -2015,73 +2223,68 @@ attrs2.x = p2 && seg2[seg2len - 2]; attrs2.y = p2 && seg2[seg2len - 1]; } - return p2 ? [p, p2] : p; + return p2 ? [roundPath(p), roundPath(p2)] : roundPath(p); } + + function reverseCurve(pathCurveArray){ + var curveSegments = clonePath(pathCurveArray), + curveCount = curveSegments.length - 2, + ci = 0, ni = 0, + currentSeg = [], + nextSeg = [], + x1, y1, x2, y2, x, y, + curveOnly = curveSegments.slice(1), + rotatedCurve = curveOnly.map(function (p,i){ + ci = curveCount - i; + ni = ci - 1 < 0 ? curveCount : ci - 1; + currentSeg = curveOnly[ci]; + nextSeg = curveOnly[ni]; + x = nextSeg[nextSeg.length - 2]; + y = nextSeg[nextSeg.length - 1]; + x1 = currentSeg[3]; y1 = currentSeg[4]; + x2 = currentSeg[1]; y2 = currentSeg[2]; + return [p[0],x1,y1,x2,y2,x,y] + }); + return [['M',rotatedCurve[curveCount][5],rotatedCurve[curveCount][6]]].concat(rotatedCurve) + } + function createPath (path) { var np = document.createElementNS('http://www.w3.org/2000/svg','path'), d = path instanceof SVGElement ? path.getAttribute('d') : path; np.setAttribute('d',d); return np } - function getSegments(curveArray) { - return curveArray.map(function (seg) { - return { - x: seg[seg[0] === 'M' ? 1 : 5], - y: seg[seg[0] === 'M' ? 2 : 6], - seg: seg + function getRotationSegments(s,idx) { + var segsCount = s.length, pointCount = segsCount - 1; + return s.map(function (p,i){ + var oldSegIdx = idx + i, seg; + if (i===0 || s[oldSegIdx] && s[oldSegIdx][0] === 'M') { + seg = s[oldSegIdx]; + return ['M',seg[seg.length-2],seg[seg.length-1]] + } else { + if (oldSegIdx >= segsCount) { oldSegIdx -= pointCount; } + return s[oldSegIdx] } }) } - function reverseCurve(path){ - var newSegments = [], - oldSegments = getSegments(path), - segsCount = oldSegments.length, - pointCount = segsCount - 1, - oldSegIdx = pointCount, - oldSegs = []; - oldSegments.map(function (p,i){ - if (i === 0||oldSegments[oldSegIdx].seg[0] === 'M') { - newSegments[i] = ['M',oldSegments[oldSegIdx].x,oldSegments[oldSegIdx].y]; - } else { - oldSegIdx = pointCount - i > 0 ? pointCount - i : pointCount; - oldSegs = oldSegments[oldSegIdx].seg; - newSegments[i] = [oldSegs[0], oldSegs[5],oldSegs[6],oldSegs[3],oldSegs[4], oldSegs[1], oldSegs[2]]; - } - }); - return newSegments - } - function getRotationSegments(s,idx) { - var newSegments = [], segsCount = s.length, pointCount = segsCount - 1; - s.map(function (p,i){ - var oldSegIdx = idx + i; - if (i===0 || s[oldSegIdx] && s[oldSegIdx].seg[0] === 'M') { - newSegments[i] = ['M',s[oldSegIdx].x,s[oldSegIdx].y]; - } else { - if (oldSegIdx >= segsCount) { oldSegIdx -= pointCount; } - newSegments[i] = s[oldSegIdx].seg; - } - }); - return newSegments - } function getRotations(a) { - var startSegments = getSegments(a), rotations = []; - startSegments.map(function (s,i){rotations[i] = getRotationSegments(startSegments,i);}); - return rotations + return a.map(function (s,i) { return getRotationSegments(a,i); }) } function getRotatedCurve(a,b) { - var startSegments = getSegments(a), - endSegments = getSegments(b), - segsCount = startSegments.length, - pointCount = segsCount - 1, + var segCount = a.length - 1, linePaths = [], lineLengths = [], rotations = getRotations(a); rotations.map(function (r,i){ - var sumLensSqrd = 0, linePath = createPath('M0,0L0,0'); - for (var j = 0; j < pointCount; j++) { - var linePt1 = startSegments[(i + j) % pointCount]; - var linePt2 = endSegments[ j % pointCount]; - var linePathStr = "M" + (linePt1.x) + "," + (linePt1.y) + "L" + (linePt2.x) + "," + (linePt2.y); + var sumLensSqrd = 0, + linePath = createPath('M0,0L0,0'), + linePt1, ll1, + linePt2, ll2, + linePathStr; + for (var j = 0; j < segCount; j++) { + linePt1 = a[(i + j) % segCount]; ll1 = linePt1.length; + linePt2 = b[ j % segCount]; ll2 = linePt2.length; + linePathStr = "M" + (linePt1[ll1-2]) + "," + (linePt1[ll1-1]) + "L" + (linePt2[ll2-2]) + "," + (linePt2[ll2-1]); linePath.setAttribute('d',linePathStr); sumLensSqrd += Math.pow(linePath.getTotalLength(),2); linePaths[j] = linePath; @@ -2089,9 +2292,8 @@ lineLengths[i] = sumLensSqrd; sumLensSqrd = 0; }); - var computedIndex = lineLengths.indexOf(Math.min.apply(null,lineLengths)), - newPath = rotations[computedIndex]; - return newPath + var computedIndex = lineLengths.indexOf(Math.min.apply(null,lineLengths)); + return rotations[computedIndex] } function getCubicMorph(tweenProp){ return this.element.getAttribute('d'); @@ -2121,9 +2323,9 @@ if ( !pathCurve1 || !pathCurve2 || ( pathCurve1 && pathCurve2 && pathCurve1[0][0] === 'M' && pathCurve1.length !== pathCurve2.length) ) { var path1 = this.valuesStart[tweenProp].original, path2 = this.valuesEnd[tweenProp].original, - curves = path2curve(path1,path2); - var curve0 = this._reverseFirstPath ? reverseCurve.call(this,curves[0]) : curves[0], - curve1 = this._reverseSecondPath ? reverseCurve.call(this,curves[1]) : curves[1]; + curves = pathToCurve(path1,path2); + var curve0 = this._reverseFirstPath ? reverseCurve(curves[0]) : curves[0], + curve1 = this._reverseSecondPath ? reverseCurve(curves[1]) : curves[1]; curve0 = getRotatedCurve.call(this,curve0,curve1); this.valuesStart[tweenProp].curve = curve0; this.valuesEnd[tweenProp].curve = curve1; @@ -2140,13 +2342,12 @@ component: 'svgCubicMorph', property: 'path', defaultValue: [], - Interpolate: {numbers: numbers,toPathString: toPathString}, + Interpolate: {numbers: numbers,pathToString: pathToString}, functions: svgCubicMorphFunctions, Util: { - l2c: l2c, q2c: q2c, a2c: a2c, catmullRom2bezier: catmullRom2bezier, ellipsePath: ellipsePath, - path2curve: path2curve, pathToAbsolute: pathToAbsolute, toPathString: toPathString, parsePathString: parsePathString, + pathToCurve: pathToCurve, pathToAbsolute: pathToAbsolute, pathToString: pathToString, parsePathString: parsePathString, getRotatedCurve: getRotatedCurve, getRotations: getRotations, - getRotationSegments: getRotationSegments, reverseCurve: reverseCurve, getSegments: getSegments, createPath: createPath + getRotationSegments: getRotationSegments, reverseCurve: reverseCurve, createPath: createPath } }; Components.SVGCubicMorph = svgCubicMorph; diff --git a/demo/src/kute-extra.min.js b/demo/src/kute-extra.min.js index a973d32..e509781 100644 --- a/demo/src/kute-extra.min.js +++ b/demo/src/kute-extra.min.js @@ -1,2 +1,2 @@ // KUTE.js Extra v2.0.13 | thednp © 2020 | MIT-License -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var A={},L={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function U(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}A.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var F=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:A.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var l=this._easing.name;return i[l]||(i[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){if(S(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},F.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},F.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},A.tween=F,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var j=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(k.call(this,i,"end"),this._resetStart?this.valuesStart=r:k.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,I.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){if(this.paused&&this.playing){for(var e in this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),onStart)if("function"==typeof onStart[e])onStart[e].call(this,e);else for(var n in onStart[e])onStart[e][n].call(this,n);linkInterpolation.call(this),this._startTime+=t.Time()-this._pauseTime,S(this),!s&&o()}return this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);A.tween=j;var V=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.on=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(j);A.tween=V;var R=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new A.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};R.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},R.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},R.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},R.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},R.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof R)e.chain(t.tweens);else{if(!(t instanceof A.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},R.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},R.prototype.removeTweens=function(){this.tweens=[]},R.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t,e){if(this.element=U(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof A.tween))throw TypeError("tween parameter is not ["+A.tween+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};H.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},H.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},H.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},H.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},H.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},H.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var N=function(t){try{t.component in c?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};N.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(c[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var l in t.defaultValues)h[l]=t.defaultValues[l];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)f[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][a||s]&&(n[p][e][a||s]=t.functions[p]);else for(var b in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][b]&&(n[p][e][b]=t.functions[p][b]);if(t.Interpolate){for(var x in t.Interpolate){var S=t.Interpolate[x];if("function"!=typeof S||r[x])for(var M in S)"function"!=typeof S[M]||r[x]||(r[x]=S[M]);else r[x]=S}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!w[T]&&(w[T]=t.Util[T]);return this};var D=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=e.category,s=e.property,o=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=s+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(o||s)+" "+(s||a)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===o?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(a||s)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(a||s)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)r[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||r[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(s||a)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(N);function q(t,e,n){return(t=+t)+(e-=t)*n}function B(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"% "+(100*q(n[1],r[1],i)>>0)/100+"%"})}},z={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:q},functions:X,Util:{trueDimension:B}};function Y(t,e,n,r){return(t=+t)+(e-=t)*r+n}function Q(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.BackgroundPosition=z;var W=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],K={};W.map((function(t){return K[t]=0}));var G={};W.forEach((function(t){G[t]=Q}));var $={component:"borderRadiusProperties",category:"borderRadius",properties:W,defaultValues:K,Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:G},Util:{trueDimension:B}};function Z(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(i>.99||i<.01?(10*q(n,r,i)>>0)/10:q(n,r,i)>>0)+"px"})}x.BorderRadiusProperties=$;var J=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],tt={};J.map((function(t){return tt[t]=0}));var et={};J.map((function(t){return et[t]=Z}));var nt={component:"boxModelProperties",category:"boxModel",properties:J,defaultValues:tt,Interpolate:{numbers:q},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){var n=B(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:et}};x.BoxModelProperties=nt;var rt={prepareStart:function(t,e){var n=C(this.element,t),r=C(this.element,"width"),i=C(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[B(e[0]),B(e[1]),B(e[2]),B(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[B((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),B(n[1]),B(n[2]),B(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*q(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},it={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:q},functions:rt,Util:{trueDimension:B}};function at(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function st(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?q(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*q(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function ot(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=st(n,r,i)})}x.ClipProperty=it;var lt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ut={};lt.map((function(t){ut[t]="#000"}));var pt={};lt.map((function(t){return pt[t]=ot}));var ct={component:"colorProperties",category:"colors",properties:lt,defaultValues:ut,Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return at(e)},onStart:pt},Util:{trueColor:at}};x.ColorProperties=ct;var ht={},ft=["fill","stroke","stop-color"];function dt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var vt={prepareStart:function(t,e){var n={};for(var r in e){var i=dt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=ft.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=dt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(ft.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,st(n,r,i))})},n[a]=at(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var l=B(o).u||B(e[r]).u,u=/%/.test(l)?"_percent":"_"+l;i.htmlAttributes[a+u]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){var a=e.replace(u,"");t.setAttribute(a,(1e3*q(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+u]=B(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*q(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=ht)}}},gt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:q,colors:st},functions:vt,Util:{replaceUppercase:dt,trueColor:at,trueDimension:B}};function mt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*q(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(st(t[3],e[3],n)).join(" ")+")"}function yt(t){return t.replace("-r","R").replace("-s","S")}function bt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=at(e[3]),e}function wt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*q(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*q(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*q(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*q(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*q(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*q(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*q(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*q(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?mt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},St={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:q,blur:q,saturate:q,grayscale:q,brightness:q,contrast:q,sepia:q,invert:q,hueRotate:q,dropShadow:{numbers:q,colors:st,dropShadow:mt}},functions:xt,Util:{parseDropShadow:bt,parseFilterString:wt,replaceDashNamespace:yt,trueColor:at}};x.FilterEffects=St;var Mt={prepareStart:function(t){return C(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*q(n,r,i)>>0)/1e3})}},Tt={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:q},functions:Mt};function Et(t,e){return parseFloat(t)/100*e}function _t(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ct(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*q(e.s,n.s,r)>>0)/100,s=(100*q(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:q},functions:Lt,Util:{getRectLength:_t,getPolyLength:Ct,getLineLength:kt,getCircleLength:It,getEllipseLength:Pt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:At,percent:Et}};function Ft(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join("")}x.SVGDraw=Ut;function jt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Vt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Rt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Ht(t){if(!(t=Rt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=qt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],D=0,q=(m=[V,R,H].concat(m).join().split(",")).length;D7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Yt(t,e){for(var n=Ht(t),r=e&&Ht(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Gt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function $t(t){var e=Wt(t),n=[];return e.map((function(t,r){n[r]=Gt(e,r)})),n}function Zt(t,e){var n=Wt(t),r=Wt(e),i=n.length-1,a=[],s=[],o=$t(t);return o.map((function(t,e){for(var o=0,l=Qt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:Ft(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Yt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Kt.call(this,r[0]):r[0],a=this._reverseSecondPath?Kt.call(this,r[1]):r[1];i=Zt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},te={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:q,toPathString:Ft},functions:Jt,Util:{l2c:Nt,q2c:Dt,a2c:qt,catmullRom2bezier:jt,ellipsePath:Vt,path2curve:Yt,pathToAbsolute:Ht,toPathString:Ft,parsePathString:Rt,getRotatedCurve:Zt,getRotations:$t,getRotationSegments:Gt,reverseCurve:Kt,getSegments:Wt,createPath:Qt}};function ee(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ne(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=re.call(this,t,ne(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ae={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:q},functions:ie,Util:{parseStringOrigin:ee,parseTransformString:ne,parseTransformSVG:re}};x.SVGTransformProperty=ae;var se=function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});document.addEventListener("DOMContentLoaded",(function t(){document.removeEventListener("DOMContentLoaded",t,e)}),e)}catch(t){}return t}(),oe="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],le="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ue=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,pe=!!se&&{passive:!1};function ce(t){this.scrolling&&t.preventDefault()}function he(){var t=this.element;return t===ue?{el:document,st:document.body}:{el:t,st:t}}function fe(t,e){e[t](oe[0],ce,pe),e[t](le,ce,pe)}function de(){var t=he.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,fe("addEventListener",t.el),t.st.style.pointerEvents="none")}function ve(){var t=he.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,fe("removeEventListener",t.el),t.st.style.pointerEvents="")}var ge={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,this.element===ue?window.pageYOffset||ue.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,de.call(this),t[e]=function(t,e,n,r){t.scrollTop=q(e,n,r)>>0})},onComplete:function(t){ve.call(this)}},me={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:q},functions:ge,Util:{preventScroll:ce,scrollIn:de,scrollOut:ve,getScrollTargets:he,toggleScrollEvents:fe,supportPassive:se}};function ye(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){for(var a=[],s="textShadow"===e?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");t.style[e]=u?st(o,l,i)+a.join(" ")+u:st(o,l,i)+a.join(" ")})}x.ScrollProperty=me;var be=["boxShadow","textShadow"];function we(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=at(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}var xe={};be.map((function(t){return xe[t]=ye}));var Se={component:"shadowProperties",properties:be,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){var n=C(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?h[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=we(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=we(e,t));return e},onStart:xe},Util:{processShadowArray:we,trueColor:at}};function Me(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.ShadowProperties=Se;var Te=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ee={};Te.forEach((function(t){Ee[t]=Me}));var _e={component:"textProperties",category:"textProperties",properties:Te,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:Ee},Util:{trueDimension:B}};x.TextProperties=_e;var Ce=String("abcdefghijklmnopqrstuvwxyz").split(""),ke=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),Ie=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Pe=String("0123456789").split(""),Oe=Ce.concat(ke,Pe),Ae=Oe.concat(Ie),Le={alpha:Ce,upper:ke,symbols:Ie,numeric:Pe,alphanumeric:Oe,all:Ae},Ue={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Le?Le[n]:n&&n.length?n:Le[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=q(e,n,r)>>0})}};function Fe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function je(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s>0)/1e3;return r}x.TextWriteProperties=Ve;var He="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Ne={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={};if(this.element.transformMatrix){var r=this.element.transformMatrix;for(var i in r)n[i]=r[i]}else for(var a in e)n[a]="perspective"===a?e[a]:h.transform[a];return n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){var a=new He,s={};for(var o in r)s[o]="perspective"===o?q(n[o],r[o],i):Re(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,t.style[e]=a.toString()})},CSS3Matrix:function(e){this.valuesEnd.transform&&!t[e]&&(t[e]=He)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:q,translate3d:Re,rotate3d:Re,skew:Re,scale3d:Re}};for(var De in x.TransformMatrix=Ne,x){var qe=x[De];x[De]=new D(qe)}return{Animation:D,Components:x,TweenExtra:V,fromTo:function(t,e,n,r){return r=r||{},new A.tween(U(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new A.tween(U(t),e,e,n)},TweenCollection:R,ProgressBar:H,allFromTo:function(t,e,n,r){return r=r||{},new R(U(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new R(U(t,!0),e,e,n)},Objects:b,Util:w,Easing:L,CubicBezier:O,Render:u,Interpolate:r,Process:P,Internals:E,Selector:U,Version:"2.0.13"}})); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},a={},i={};i.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ea?e=r:n=r,r=.5*(n-e)+e}return r};var O={},L={linear:new P(0,0,1,1,"linear"),easingSinusoidalIn:new P(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new P(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new P(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new P(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new P(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new P(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new P(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new P(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new P(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new P(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new P(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new P(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new P(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new P(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new P(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new P(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new P(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new P(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new P(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new P(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new P(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new P(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new P(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new P(.68,-.55,.265,1.55,"easingBackInOut")};function V(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}function U(){for(var t in a)if("function"==typeof a[t])a[t].call(this,t);else for(var e in a[t])a[t][e].call(this,e);T.call(this)}O.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new P(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var F=function(e,n,r,i){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:O.processEasing(i.easing),this._duration=i.duration||f.duration,this._delay=i.delay||f.delay,i){var o="_"+s;o in this||(this[o]=i[s])}var l=this._easing.name;return a[l]||(a[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){return S(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,this._startFired||(this._onStart&&this._onStart.call(this),U.call(this),this._startFired=!0),!s&&o(),this},F.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},F.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[a](this.element,this.valuesStart[a],this.valuesEnd[a],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},O.tween=F,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var j=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],a=t[2];if(k.call(this,a,"end"),this._resetStart?this.valuesStart=r:k.call(this,r,"start"),!this._resetStart)for(var i in g)for(var s in g[i])g[i][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,I.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var a in this.valuesEnd)this.valuesRepeat[a]=this.valuesStart[a];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),U.call(this),this._startTime+=t.Time()-this._pauseTime,S(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[a](this.element,this.valuesStart[a],this.valuesEnd[a],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);O.tween=j;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.on=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(j);O.tween=N;var R=function(t,e,n,r){var a=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var i=[];return Array.from(t).map((function(t,s){i[s]=r||{},i[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?a.tweens.push(new O.tween(t,e,n,i[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};R.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},R.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},R.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},R.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},R.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof R)e.chain(t.tweens);else{if(!(t instanceof O.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},R.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},R.prototype.removeTweens=function(){this.tweens=[]},R.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t,e){if(this.element=V(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof O.tween))throw TypeError("tween parameter is not ["+O.tween+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};H.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},H.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},H.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},H.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},H.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},H.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var D=function(t){try{t.component in c?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};D.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:a,onComplete:m,crossCheck:g},i=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(c[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var l in t.defaultValues)h[l]=t.defaultValues[l];this.supports=(o||s)+" "+(s||i)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)f[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][i||s]&&(n[p][e][i||s]=t.functions[p]);else for(var b in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][b]&&(n[p][e][b]=t.functions[p][b]);if(t.Interpolate){for(var x in t.Interpolate){var S=t.Interpolate[x];if("function"!=typeof S||r[x])for(var M in S)"function"!=typeof S[M]||r[x]||(r[x]=S[M]);else r[x]=S}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!w[T]&&(w[T]=t.Util[T]);return this};var q=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:d,prepareStart:v,onStart:a,onComplete:m,crossCheck:g},i=e.category,s=e.property,o=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=s+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(o||s)+" "+(s||i)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===o?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(i||s)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(i||s)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)r[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||r[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(s||i)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(D);function B(t,e,n){return(t=+t)+(e-=t)*n}function X(t,e){for(var n,r=parseInt(t)||0,a=["px","%","deg","rad","em","rem","vh","vw"],i=0;i>0)/100+"% "+(100*B(n[1],r[1],a)>>0)/100+"%"})}},Q={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:B},functions:Y,Util:{trueDimension:X}};function z(t,e,n,r){return(t=+t)+(e-=t)*r+n}function W(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=z(n.v,r.v,r.u,a)})}x.BackgroundPosition=Q;var K=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],G={};K.map((function(t){return G[t]=0}));var $={};K.forEach((function(t){$[t]=W}));var Z={component:"borderRadiusProperties",category:"borderRadius",properties:K,defaultValues:G,Interpolate:{units:z},functions:{prepareStart:function(t){return _(this.element,t)||h[t]},prepareProperty:function(t,e){return X(e)},onStart:$},Util:{trueDimension:X}};function J(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=(a>.99||a<.01?(10*B(n,r,a)>>0)/10:B(n,r,a)>>0)+"px"})}x.BorderRadiusProperties=Z;var tt=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],et={};tt.map((function(t){return et[t]=0}));var nt={};tt.map((function(t){return nt[t]=J}));var rt={component:"boxModelProperties",category:"boxModel",properties:tt,defaultValues:et,Interpolate:{numbers:B},functions:{prepareStart:function(t){return _(this.element,t)||h[t]},prepareProperty:function(t,e){var n=X(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:nt}};x.BoxModelProperties=rt;var at={prepareStart:function(t,e){var n=_(this.element,t),r=_(this.element,"width"),a=_(this.element,"height");return/rect/.test(n)?n:[0,r,a,0]},prepareProperty:function(t,e){if(e instanceof Array)return[X(e[0]),X(e[1]),X(e[2]),X(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[X((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),X(n[1]),X(n[2]),X(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,r){for(var a=0,i=[];a<4;a++){var s=e[a].v,o=n[a].v,l=n[a].u||"px";i[a]=(100*B(s,o,r)>>0)/100+l}t.style.clip="rect("+i+")"})}},it={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:B},functions:at,Util:{trueDimension:X}};function st(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var a=document.getElementsByTagName("head")[0];a.style.color=t;var i=getComputedStyle(a,null).color;return i=/rgb/.test(i)?i.replace(/[^\d,]/g,"").split(","):[0,0,0],a.style.color="",{r:parseInt(i[0]),g:parseInt(i[1]),b:parseInt(i[2])}}}function ot(t,e,n){var r,a={};for(r in e)a[r]="a"!==r?B(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*B(t[r],e[r],n)>>0)/100:null;return a.a?"rgba("+a.r+","+a.g+","+a.b+","+a.a+")":"rgb("+a.r+","+a.g+","+a.b+")"}function lt(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=ot(n,r,a)})}x.ClipProperty=it;var ut=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],pt={};ut.map((function(t){pt[t]="#000"}));var ct={};ut.map((function(t){return ct[t]=lt}));var ht={component:"colorProperties",category:"colors",properties:ut,defaultValues:pt,Interpolate:{numbers:B,colors:ot},functions:{prepareStart:function(t,e){return _(this.element,t)||h[t]},prepareProperty:function(t,e){return st(e)},onStart:ct},Util:{trueColor:st}};x.ColorProperties=ht;var ft={},dt=["fill","stroke","stop-color"];function vt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var gt={prepareStart:function(t,e){var n={};for(var r in e){var a=vt(r).replace(/_+[a-z]+/,""),i=this.element.getAttribute(a);n[a]=dt.includes(a)?i||"rgba(0,0,0,0)":i||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var i=vt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(i.replace(/_+[a-z]+/,""));if(dt.includes(i))a.htmlAttributes[i]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ft)&&(ft[e]=function(t,e,n,r,a){t.setAttribute(e,ot(n,r,a))})},n[i]=st(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var l=X(o).u||X(e[r]).u,u=/%/.test(l)?"_percent":"_"+l;a.htmlAttributes[i+u]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ft)&&(ft[e]=function(t,e,n,r,a){var i=e.replace(u,"");t.setAttribute(i,(1e3*B(n.v,r.v,a)>>0)/1e3+r.u)})},n[i+u]=X(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(a.htmlAttributes[i]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ft)&&(ft[e]=function(t,e,n,r,a){t.setAttribute(e,(1e3*B(n,r,a)>>0)/1e3)})},n[i]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,a){for(var i in r)t.attributes[i](e,i,n[i],r[i],a)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=ft)}}},mt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:B,colors:ot},functions:gt,Util:{replaceUppercase:vt,trueColor:st,trueDimension:X}};function yt(t,e,n){for(var r=[],a=0;a<3;a++)r[a]=(100*B(t[a],e[a],n)>>0)/100+"px";return"drop-shadow("+r.concat(ot(t[3],e[3],n)).join(" ")+")"}function bt(t){return t.replace("-r","R").replace("-s","S")}function wt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=st(e[3]),e}function xt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var a=0,i=r.length;a>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*B(n.blur,r.blur,a)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*B(n.saturate,r.saturate,a)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*B(n.invert,r.invert,a)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*B(n.grayscale,r.grayscale,a)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*B(n.hueRotate,r.hueRotate,a)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*B(n.sepia,r.sepia,a)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*B(n.brightness,r.brightness,a)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*B(n.contrast,r.contrast,a)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?yt(n.dropShadow,r.dropShadow,a):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Mt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:B,blur:B,saturate:B,grayscale:B,brightness:B,contrast:B,sepia:B,invert:B,hueRotate:B,dropShadow:{numbers:B,colors:ot,dropShadow:yt}},functions:St,Util:{parseDropShadow:wt,parseFilterString:xt,replaceDashNamespace:bt,trueColor:st}};x.FilterEffects=Mt;var Tt={prepareStart:function(t){return _(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=(1e3*B(n,r,a)>>0)/1e3})}},Ct={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:B},functions:Tt};function Et(t,e){return parseFloat(t)/100*e}function _t(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function kt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,i=0-(100*B(e.s,n.s,r)>>0)/100,s=(100*B(e.e,n.e,r)>>0)/100+i;t.style.strokeDashoffset=i+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+a+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:B},functions:Vt,Util:{getRectLength:_t,getPolyLength:kt,getLineLength:It,getCircleLength:At,getEllipseLength:Pt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Lt,percent:Et}};function Ft(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join(" ")}function jt(t){return t.map((function(t){return Array.isArray(t)?jt(t):isNaN(+t)?t:+t}))}x.SVGDraw=Ut;var Nt=3;function Rt(t){return t.map((function(t){return t.map((function(t,e){var n=+t,r=Math.pow(10,Nt);return e?n%1==0?n:(n*r>>0)/r:t}))}))}function Ht(t){return this.segments=[],this.isClosed=0,this.isAbsolute=0,this.pathValue=t,this.max=t.length,this.index=0,this.param=0,this.segmentStart=0,this.data=[],this.err="",this}var Dt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0};function qt(t){return t>=48&&t<=57}function Bt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Xt(t){for(;t.index=5760&&[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279].indexOf(e)>=0);)t.index++;var e}function Yt(t){var e=t.pathValue.charCodeAt(t.index);return 48===e?(t.param=0,void t.index++):49===e?(t.param=1,void t.index++):void(t.err="SvgPath: arc flag can be 0 or 1 only (at pos "+t.index+")")}function Qt(t){var e,n=t.index,r=n,a=t.max,i=!1,s=!1,o=!1,l=!1;if(r>=a)t.err="SvgPath: missed param (at pos "+r+")";else if(43!==(e=t.pathValue.charCodeAt(r))&&45!==e||(e=++r2&&(t.segments.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.segments.push([e].concat(r));else for(;r.length>=Dt[n]&&(t.segments.push([e].concat(r.splice(0,Dt[n]))),Dt[n]););}function Wt(t){var e,n,r,a,i,s=t.max;if(t.segmentStart=t.index,e=t.pathValue.charCodeAt(t.index),n=97==(32|e),function(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}(e)){if(a=Dt[t.pathValue[t.index].toLowerCase()],t.index++,Xt(t),t.data=[],!a)return t.isClosed=1,void zt(t);for(r=!1;;){for(i=a;i>0;i--){if(!n||3!==i&&4!==i?Qt(t):Yt(t),t.err.length)return;t.data.push(t.param),Xt(t),r=!1,t.index=t.max)break;if(!Bt(t.pathValue.charCodeAt(t.index)))break}}zt(t)}else t.err="SvgPath: bad command "+t.pathValue[t.index]+" (at pos "+t.index+")"}function Kt(t){if(Array.isArray(t))return jt(t);var e=new Ht(t),n=e.max;for(Xt(e);e.indexr;r+=2){var i=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?a-4==r?i[3]={x:+t[0],y:+t[1]}:a-2==r&&(i[2]={x:+t[0],y:+t[1]},i[3]={x:+t[2],y:+t[3]}):i[0]={x:+t[a-2],y:+t[a-1]}:a-4==r?i[3]=i[2]:r||(i[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-i[0].x+6*i[1].x+i[2].x)/6,(-i[0].y+6*i[1].y+i[2].y)/6,(i[1].x+6*i[2].x-i[3].x)/6,(i[1].y+6*i[2].y-i[3].y)/6,i[2].x,i[2].y])}return n}function $t(t,e,n,r,a){var i;if(null==a&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=a){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-a*s);i=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(a-r>180),0,l,e+n*Math.sin(-a*s)]]}else i=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return i}function Zt(t){if(!(t=Kt(t))||!t.length)return[["M",0,0]];var e=[],n=0,r=0,a=0,i=0,s=0,o=t.length,l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase();"M"===t[0][0]&&(n=+t[0][1],r=+t[0][2],a=n,i=r,s++,e[0]=["M",n,r]);for(var u=function(s){var o=void 0,u=t[s],p=u[0];if(e.push(o=[]),p!==p.toUpperCase())switch(o[0]=p.toUpperCase(),o[0]){case"A":o[1]=u[1],o[2]=u[2],o[3]=u[3],o[4]=u[4],o[5]=u[5],o[6]=+u[6]+n,o[7]=+u[7]+r;break;case"V":o[1]=+u[1]+r;break;case"H":o[1]=+u[1]+n;break;case"R":for(var c=[n,r].concat(u.slice(1)),h=2,f=c.length;h1&&(n*=w=Math.sqrt(w),r*=w);var x=n*n,S=r*r,M=(i==s?-1:1)*Math.sqrt(Math.abs((x*S-x*b*b-S*y*y)/(x*b*b+S*y*y)));f=M*n*b/r+(t+o)/2,d=M*-r*y/n+(e+l)/2,c=Math.asin((e-d)/r),h=Math.asin((l-d)/r),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var T=h-c;if(Math.abs(T)>v){var C=h,E=o,_=l;h=c+v*(s&&h>c?1:-1),o=f+n*Math.cos(h),l=d+r*Math.sin(h),m=te(o,l,n,r,a,0,s,E,_,[h,C,f,d])}T=h-c;var k=Math.cos(c),I=Math.sin(c),A=Math.cos(h),P=Math.sin(h),O=Math.tan(T/4),L=4/3*n*O,V=4/3*r*O,U=[t,e],F=[t+L*I,e-V*k],j=[o+L*P,l-V*A],N=[o,l];return F[0]=2*U[0]-F[0],F[1]=2*U[1]-F[1],u?[F,j,N].concat(m):(m=[F,j,N].concat(m).join().split(",")).map((function(t,e){return e%2?Jt(m[e-1],t,g).y:Jt(t,m[e+1],g).x}))}function ee(t,e,n,r,a,i){return[1/3*t+2/3*n,1/3*e+2/3*r,1/3*a+2/3*n,1/3*i+2/3*r,a,i]}function ne(t,e,n,r){return[t,e,n,r,n,r]}function re(t,e,n){var r,a;if(!t)return["C",e.x,e.y,e.x,e.y,e.x,e.y];switch(!(t[0]in{T:1,Q:1})&&(e.qx=e.qy=null),t[0]){case"M":e.X=t[1],e.Y=t[2];break;case"A":t=["C"].concat(te.apply(0,[e.x,e.y].concat(t.slice(1))));break;case"S":"C"==n||"S"==n?(r=2*e.x-e.bx,a=2*e.y-e.by):(r=e.x,a=e.y),t=["C",r,a].concat(t.slice(1));break;case"T":"Q"==n||"T"==n?(e.qx=2*e.x-e.qx,e.qy=2*e.y-e.qy):(e.qx=e.x,e.qy=e.y),t=["C"].concat(ee(e.x,e.y,e.qx,e.qy,t[1],t[2]));break;case"Q":e.qx=t[1],e.qy=t[2],t=["C"].concat(ee(e.x,e.y,t[1],t[2],t[3],t[4]));break;case"L":t=["C"].concat(ne(e.x,e.y,t[1],t[2]));break;case"H":t=["C"].concat(ne(e.x,e.y,t[1],e.y));break;case"V":t=["C"].concat(ne(e.x,e.y,e.x,t[1]));break;case"Z":t=["C"].concat(ne(e.x,e.y,e.X,e.Y))}return t}function ae(t,e,n,r,a){t&&e&&"M"===t[a][0]&&"M"!==e[a][0]&&(e.splice(a,0,["M",r.x,r.y]),n.bx=0,n.by=0,n.x=t[a][1],n.y=t[a][2])}function ie(t,e,n,r,a){if(t[a].length>7){t[a].shift();for(var i=t[a];i.length;)n[a]="A",e&&(r[a]="A"),t.splice(a++,0,["C"].concat(i.splice(0,6)));t.splice(a,1)}}function se(t,e){for(var n=Zt(t),r=e&&Zt(e),a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=Math.max(n.length,r&&r.length||0),c=0;c=n&&(o-=r),t[o])}))}function pe(t){return t.map((function(e,n){return ue(t,n)}))}function ce(t,e){var n=t.length-1,r=[],a=[],i=pe(t);return i.map((function(i,s){for(var o,l,u,p,c,h=0,f=le("M0,0L0,0"),d=0;d>0)/1e3)}t.setAttribute("d",1===r?n.original:Ft(a))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=se(this.valuesStart[t].original,this.valuesEnd[t].original),a=this._reverseFirstPath?oe(r[0]):r[0],i=this._reverseSecondPath?oe(r[1]):r[1];a=ce.call(this,a,i),this.valuesStart[t].curve=a,this.valuesEnd[t].curve=i}}}},fe={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:B,pathToString:Ft},functions:he,Util:{pathToCurve:se,pathToAbsolute:Zt,pathToString:Ft,parsePathString:Kt,getRotatedCurve:ce,getRotations:pe,getRotationSegments:ue,reverseCurve:oe,createPath:le}};function de(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ve(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,a=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=ge.call(this,t,ve(this.element.getAttribute("transform")));for(var a in r)e[a]=r[a];var i=this.element.ownerSVGElement,s=i.createSVGTransformFromMatrix(i.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ye={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:B},functions:me,Util:{parseStringOrigin:de,parseTransformString:ve,parseTransformSVG:ge}};x.SVGTransformProperty=ye;var be=function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});document.addEventListener("DOMContentLoaded",(function t(){document.removeEventListener("DOMContentLoaded",t,e)}),e)}catch(t){}return t}(),we="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],xe="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",Se=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,Me=!!be&&{passive:!1};function Te(t){this.scrolling&&t.preventDefault()}function Ce(){var t=this.element;return t===Se?{el:document,st:document.body}:{el:t,st:t}}function Ee(t,e){e[t](we[0],Te,Me),e[t](xe,Te,Me)}function _e(){var t=Ce.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,Ee("addEventListener",t.el),t.st.style.pointerEvents="none")}function ke(){var t=Ce.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,Ee("removeEventListener",t.el),t.st.style.pointerEvents="")}var Ie={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Se,this.element===Se?window.pageYOffset||Se.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Se,_e.call(this),t[e]=function(t,e,n,r){t.scrollTop=B(e,n,r)>>0})},onComplete:function(t){ke.call(this)}},Ae={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:B},functions:Ie,Util:{preventScroll:Te,scrollIn:_e,scrollOut:ke,getScrollTargets:Ce,toggleScrollEvents:Ee,supportPassive:be}};function Pe(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,a){for(var i=[],s="textShadow"===e?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");t.style[e]=u?ot(o,l,a)+i.join(" ")+u:ot(o,l,a)+i.join(" ")})}x.ScrollProperty=Ae;var Oe=["boxShadow","textShadow"];function Le(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=st(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}var Ve={};Oe.map((function(t){return Ve[t]=Pe}));var Ue={component:"shadowProperties",properties:Oe,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:B,colors:ot},functions:{prepareStart:function(t,e){var n=_(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?h[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Le(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Le(e,t));return e},onStart:Ve},Util:{processShadowArray:Le,trueColor:st}};function Fe(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=z(n.v,r.v,r.u,a)})}x.ShadowProperties=Ue;var je=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ne={};je.forEach((function(t){Ne[t]=Fe}));var Re={component:"textProperties",category:"textProperties",properties:je,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:z},functions:{prepareStart:function(t){return _(this.element,t)||h[t]},prepareProperty:function(t,e){return X(e)},onStart:Ne},Util:{trueDimension:X}};x.TextProperties=Re;var He=String("abcdefghijklmnopqrstuvwxyz").split(""),De=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),qe=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Be=String("0123456789").split(""),Xe=He.concat(De,Be),Ye=Xe.concat(qe),Qe={alpha:He,upper:De,symbols:qe,numeric:Be,alphanumeric:Xe,all:Ye},ze={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Qe?Qe[n]:n&&n.length?n:Qe[f.textChars];t[e]=function(t,e,n,a){var i="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(a*l.length,l.length)>>0,0),t.innerHTML=a<1?s+u:""===n?" ":n):" "===n?(i=o.substring(0,Math.min((1-a)*o.length,o.length)>>0),t.innerHTML=a<1?i+u:""===n?" ":n):(i=o.substring(o.length,Math.min(a*o.length,o.length)>>0),s=l.substring(0,Math.min(a*l.length,l.length)>>0),t.innerHTML=a<1?s+u+i:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=B(e,n,r)>>0})}};function We(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var a=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=a,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Ke(t,e){var n=[];if(t.children.length){for(var r,a=[],i=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s>0)/1e3;return r}x.TextWriteProperties=Ge;var Ze="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Je={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={};if(this.element.transformMatrix){var r=this.element.transformMatrix;for(var a in r)n[a]=r[a]}else for(var i in e)n[i]="perspective"===i?e[i]:h.transform[i];return n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},a={},i={},s={},o=[{translate3d:r},{rotate3d:a},{skew:s},{scale3d:i}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?a:/scale/.test(t)?i:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,a){var i=new Ze,s={};for(var o in r)s[o]="perspective"===o?B(n[o],r[o],a):$e(n[o],r[o],a);s.perspective&&(i.m34=-1/s.perspective),i=s.translate3d?i.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):i,i=s.rotate3d?i.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):i,s.skew&&(i=s.skew[0]?i.skewX(s.skew[0]):i,i=s.skew[1]?i.skewY(s.skew[1]):i),i=s.scale3d?i.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):i,t.style[e]=i.toString()})},CSS3Matrix:function(e){this.valuesEnd.transform&&!t[e]&&(t[e]=Ze)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:B,translate3d:$e,rotate3d:$e,skew:$e,scale3d:$e}};for(var tn in x.TransformMatrix=Je,x){var en=x[tn];x[tn]=new q(en)}return{Animation:q,Components:x,TweenExtra:N,fromTo:function(t,e,n,r){return r=r||{},new O.tween(V(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new O.tween(V(t),e,e,n)},TweenCollection:R,ProgressBar:H,allFromTo:function(t,e,n,r){return r=r||{},new R(V(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new R(V(t,!0),e,e,n)},Objects:b,Util:w,Easing:L,CubicBezier:P,Render:u,Interpolate:r,Process:A,Internals:C,Selector:V,Version:"2.0.13"}})); diff --git a/demo/src/kute.min.js b/demo/src/kute.min.js index ddfb0b1..437a1a4 100644 --- a/demo/src/kute.min.js +++ b/demo/src/kute.min.js @@ -1,2 +1,2 @@ // KUTE.js Standard v2.0.13 | thednp © 2020 | MIT-License -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var L={},P={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}L.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:L.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return i[u]||(i[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};U.prototype.start=function(e){if(S(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},U.prototype.stop=function(){return this.playing&&(x(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},U.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},U.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},U.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},U.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},L.tween=U,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var F=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(A.call(this,i,"end"),this._resetStart?this.valuesStart=r:A.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,M.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){if(this.paused&&this.playing){for(var e in this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),onStart)if("function"==typeof onStart[e])onStart[e].call(this,e);else for(var n in onStart[e])onStart[e][n].call(this,n);linkInterpolation.call(this),this._startTime+=t.Time()-this._pauseTime,S(this),!s&&o()}return this},n.prototype.pause=function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(U);L.tween=F;var N=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new L.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};N.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},N.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},N.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},N.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},N.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof N)e.chain(t.tweens);else{if(!(t instanceof L.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},N.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},N.prototype.removeTweens=function(){this.tweens=[]},N.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t){try{t.component in p?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*V(n,r,i)>>0)/10:V(n,r,i)>>0)+"px"})}H.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(p[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var c in n)if(c in t.functions)if("function"==typeof t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][a||s]&&(n[c][e][a||s]=t.functions[c]);else for(var w in t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][w]&&(n[c][e][w]=t.functions[c][w]);if(t.Interpolate){for(var _ in t.Interpolate){var S=t.Interpolate[_];if("function"!=typeof S||r[_])for(var x in S)"function"!=typeof S[x]||r[_]||(r[_]=S[x]);else r[_]=S}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!b[T]&&(b[T]=t.Util[T]);return this};var Q=["top","left","width","height"],R={};Q.map((function(t){return R[t]=z}));var X={component:"essentialBoxModel",category:"boxModel",properties:Q,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:V},functions:{prepareStart:function(t){return I(this.element,t)||h[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:D}};function B(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function K(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?V(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*V(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}_.BoxModelEssential=X;var Y=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Z={};Y.map((function(t){Z[t]="#000"}));var $={};Y.map((function(t){return $[t]=q}));var W={component:"colorProperties",category:"colors",properties:Y,defaultValues:Z,Interpolate:{numbers:V,colors:K},functions:{prepareStart:function(t,e){return I(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};_.ColorProperties=W;var G={},J=["fill","stroke","stop-color"];function tt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var et={prepareStart:function(t,e){var n={};for(var r in e){var i=tt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=J.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=tt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(J.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,K(n,r,i))})},n[a]=B(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;i.htmlAttributes[a+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){var a=e.replace(l,"");t.setAttribute(a,(1e3*V(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+l]=D(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*V(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=G)}}},nt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:V,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:D}};_.HTMLAttributes=nt;var rt={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*V(n,r,i)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:V},functions:rt};_.OpacityProperty=it;var at=String("abcdefghijklmnopqrstuvwxyz").split(""),st=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ot=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ut=String("0123456789").split(""),lt=at.concat(st,ut),ct=lt.concat(ot),pt={alpha:at,upper:st,symbols:ot,numeric:ut,alphanumeric:lt,all:ct},ht={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in pt?pt[n]:n&&n.length?n:pt[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=V(e,n,r)>>0})}};function ft(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function dt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,c=void 0;s>0)/1e3+n+")"}function mt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function yt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function bt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}_.TextWriteProperties=vt;var _t={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=C(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},i=[],a=[],s=[],o=["translate3d","translate","rotate3d","skew"];for(var u in e){var l="object"==typeof e[u]&&e[u].length?e[u].map((function(t){return parseInt(t)})):parseInt(e[u]);if(o.includes(u))r["translate"===u||"rotate"===u?u+"3d":u]="skew"===u?l.length?[l[0]||0,l[1]||0]:[l||0,0]:"translate"===u?l.length?[l[0]||0,l[1]||0,l[2]||0]:[l||0,0,0]:[l[0]||0,l[1]||0,l[2]||0];else if(/[XYZ]/.test(u)){for(var c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="skew"===c?2:3,f="translate"===c?i:"rotate"===c?a:"skew"===c?s:{},d=0;d>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:wt,skew:bt}};function St(t,e){return parseFloat(t)/100*e}function xt(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Tt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*V(e.s,n.s,r)>>0)/100,s=(100*V(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ot={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:V},functions:kt,Util:{getRectLength:xt,getPolyLength:Tt,getLineLength:Et,getCircleLength:Ct,getEllipseLength:It,getTotalLength:At,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Mt,percent:St}};function Lt(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}_.SVGDraw=Ot;var Pt="Invalid path value";function jt(t){return"number"==typeof t&&isFinite(t)}function Ut(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Ft(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Nt(t,e){return Ut(t,e)<1e-9}var Ht={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Dt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Vt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Dt.indexOf(t)>=0}function zt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Qt(t){return 97==(32|t)}function Rt(t){return t>=48&&t<=57}function Xt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Bt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function Kt(t){for(;t.index=i)t.err="KUTE.js - "+Pt;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=Ht[n]&&(t.result.push([e].concat(r.splice(0,Ht[n]))),Ht[n]););}function $t(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Qt(e=t.path.charCodeAt(t.index)),zt(e))if(i=Ht[t.path[t.index].toLowerCase()],t.index++,Kt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Yt(t):qt(t),t.err.length)return;t.data.push(t.param),Kt(t),r=!1,t.index=t.max)break;if(!Xt(t.path.charCodeAt(t.index)))break}}Zt(t)}else Zt(t);else t.err="KUTE.js - "+Pt}function Wt(t){var e=new Bt(t),n=e.max;for(Kt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Ft(r,i,.5),t.splice(n+1,0,i)}function le(t,e){var n,r;if("string"==typeof t){var i=te(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Pt);if(!ce(n=t.slice(0)))throw new TypeError(Pt);return n.length>1&&Nt(n[0],n[n.length-1])&&n.pop(),se(n)>0&&n.reverse(),!r&&e&&jt(e)&&e>0&&ue(n,e),n}function ce(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&jt(t[0])&&jt(t[1])}))}function pe(t,e,n){var r=le(t,n=n||f.morphPrecision),i=le(e,n),a=r.length-i.length;return oe(r,a<0?-1*a:0),oe(i,a>0?a:0),ie(r,i),[r,i]}Gt.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},Gt.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var he={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i=e.pathArray,a=n.pathArray,s=a.length;t.setAttribute("d",1===r?n.original:"M"+Lt(i,a,s,r).join("L")+"Z")})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=pe(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},fe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Lt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:he,Util:{INVALID_INPUT:Pt,isFiniteNumber:jt,distance:Ut,pointAlong:Ft,samePoint:Nt,paramCounts:Ht,SPECIAL_SPACES:Dt,isSpace:Vt,isCommand:zt,isArc:Qt,isDigit:Rt,isDigitStart:Xt,State:Bt,skipSpaces:Kt,scanFlag:qt,scanParam:Yt,finalizeSegment:Zt,scanSegment:$t,pathParse:Wt,SvgPath:Gt,split:Jt,pathStringToRing:te,exactRing:ee,approximateRing:ne,measure:re,rotateRing:ie,polygonLength:ae,polygonArea:se,addPoints:oe,bisect:ue,normalizeRing:le,validRing:ce,getInterpolationPoints:pe}};for(var de in _.SVGMorph=fe,_){var ve=_[de];_[de]=new H(ve)}return{Animation:H,Components:_,Tween:F,fromTo:function(t,e,n,r){return r=r||{},new L.tween(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new L.tween(j(t),e,e,n)},TweenCollection:N,allFromTo:function(t,e,n,r){return r=r||{},new N(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new N(j(t,!0),e,e,n)},Objects:w,Util:b,Easing:P,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:E,Selector:j,Version:"2.0.13"}})); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var P={},L={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function V(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}function U(){for(var t in i)if("function"==typeof i[t])i[t].call(this,t);else for(var e in i[t])i[t][e].call(this,e);C.call(this)}P.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var N=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:P.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return i[u]||(i[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};N.prototype.start=function(e){return _(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,this._startFired||(this._onStart&&this._onStart.call(this),U.call(this),this._startFired=!0),!s&&o(),this},N.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},N.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},N.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},N.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},N.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},P.tween=N,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var H=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(M.call(this,i,"end"),this._resetStart?this.valuesStart=r:M.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,A.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),U.call(this),this._startTime+=t.Time()-this._pauseTime,_(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(N);P.tween=H;var j=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new P.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};j.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},j.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},j.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},j.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},j.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof j)e.chain(t.tweens);else{if(!(t instanceof P.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},j.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},j.prototype.removeTweens=function(){this.tweens=[]},j.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var F=function(t){try{t.component in c?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function R(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*D(n,r,i)>>0)/10:D(n,r,i)>>0)+"px"})}F.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(c[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][a||s]&&(n[p][e][a||s]=t.functions[p]);else for(var b in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][b]&&(n[p][e][b]=t.functions[p][b]);if(t.Interpolate){for(var x in t.Interpolate){var _=t.Interpolate[x];if("function"!=typeof _||r[x])for(var S in _)"function"!=typeof _[S]||r[x]||(r[x]=_[S]);else r[x]=_}y[e]=t.Interpolate}if(t.Util)for(var C in t.Util)!w[C]&&(w[C]=t.Util[C]);return this};var X=["top","left","width","height"],B={};X.map((function(t){return B[t]=Q}));var z={component:"essentialBoxModel",category:"boxModel",properties:X,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:D},functions:{prepareStart:function(t){return I(this.element,t)||h[t]},prepareProperty:function(t,e){var n=R(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:B},Util:{trueDimension:R}};function Z(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function Y(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?D(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*D(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n,r,i)})}x.BoxModelEssential=z;var K=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],$={};K.map((function(t){$[t]="#000"}));var W={};K.map((function(t){return W[t]=q}));var G={component:"colorProperties",category:"colors",properties:K,defaultValues:$,Interpolate:{numbers:D,colors:Y},functions:{prepareStart:function(t,e){return I(this.element,t)||h[t]},prepareProperty:function(t,e){return Z(e)},onStart:W},Util:{trueColor:Z}};x.ColorProperties=G;var J={},tt=["fill","stroke","stop-color"];function et(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var n={};for(var r in e){var i=et(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=tt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=et(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(tt.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,r,i){t.setAttribute(e,Y(n,r,i))})},n[a]=Z(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=R(o).u||R(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;i.htmlAttributes[a+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,r,i){var a=e.replace(l,"");t.setAttribute(a,(1e3*D(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+l]=R(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*D(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=J)}}},rt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:D,colors:Y},functions:nt,Util:{replaceUppercase:et,trueColor:Z,trueDimension:R}};x.HTMLAttributes=rt;var it={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*D(n,r,i)>>0)/1e3})}},at={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:D},functions:it};x.OpacityProperty=at;var st=String("abcdefghijklmnopqrstuvwxyz").split(""),ot=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ut=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),lt=String("0123456789").split(""),pt=st.concat(ot,lt),ct=pt.concat(ut),ht={alpha:st,upper:ot,symbols:ut,numeric:lt,alphanumeric:pt,all:ct},ft={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in ht?ht[n]:n&&n.length?n:ht[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=D(e,n,r)>>0})}};function dt(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function vt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,p=void 0;s>0)/1e3+n+")"}function yt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function bt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function xt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}x.TextWriteProperties=gt;var _t={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=E(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},i=[],a=[],s=[],o=["translate3d","translate","rotate3d","skew"];for(var u in e){var l="object"==typeof e[u]&&e[u].length?e[u].map((function(t){return parseInt(t)})):parseInt(e[u]);if(o.includes(u))r["translate"===u||"rotate"===u?u+"3d":u]="skew"===u?l.length?[l[0]||0,l[1]||0]:[l||0,0]:"translate"===u?l.length?[l[0]||0,l[1]||0,l[2]||0]:[l||0,0,0]:[l[0]||0,l[1]||0,l[2]||0];else if(/[XYZ]/.test(u)){for(var p=u.replace(/[XYZ]/,""),c="skew"===p?p:p+"3d",h="skew"===p?2:3,f="translate"===p?i:"rotate"===p?a:"skew"===p?s:{},d=0;d>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:wt,skew:xt}};function St(t,e){return parseFloat(t)/100*e}function Ct(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Tt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*D(e.s,n.s,r)>>0)/100,s=(100*D(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Pt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:D},functions:Ot,Util:{getRectLength:Ct,getPolyLength:Tt,getLineLength:Et,getCircleLength:It,getEllipseLength:Mt,getTotalLength:At,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:kt,percent:St}};function Lt(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=Pt;var Vt=3;function Ut(t){return t.map((function(t){return t.map((function(t,e){var n=+t,r=Math.pow(10,Vt);return e?n%1==0?n:(n*r>>0)/r:t}))}))}function Nt(t){return this.segments=[],this.isClosed=0,this.isAbsolute=0,this.pathValue=t,this.max=t.length,this.index=0,this.param=0,this.segmentStart=0,this.data=[],this.err="",this}var Ht={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0};function jt(t){return t>=48&&t<=57}function Ft(t){return t>=48&&t<=57||43===t||45===t||46===t}function Rt(t){for(;t.index=5760&&[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279].indexOf(e)>=0);)t.index++;var e}function Dt(t){var e=t.pathValue.charCodeAt(t.index);return 48===e?(t.param=0,void t.index++):49===e?(t.param=1,void t.index++):void(t.err="SvgPath: arc flag can be 0 or 1 only (at pos "+t.index+")")}function Qt(t){var e,n=t.index,r=n,i=t.max,a=!1,s=!1,o=!1,u=!1;if(r>=i)t.err="SvgPath: missed param (at pos "+r+")";else if(43!==(e=t.pathValue.charCodeAt(r))&&45!==e||(e=++r2&&(t.segments.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.segments.push([e].concat(r));else for(;r.length>=Ht[n]&&(t.segments.push([e].concat(r.splice(0,Ht[n]))),Ht[n]););}function Bt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,e=t.pathValue.charCodeAt(t.index),n=97==(32|e),function(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}(e)){if(i=Ht[t.pathValue[t.index].toLowerCase()],t.index++,Rt(t),t.data=[],!i)return t.isClosed=1,void Xt(t);for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Qt(t):Dt(t),t.err.length)return;t.data.push(t.param),Rt(t),r=!1,t.index=t.max)break;if(!Ft(t.pathValue.charCodeAt(t.index)))break}}Xt(t)}else t.err="SvgPath: bad command "+t.pathValue[t.index]+" (at pos "+t.index+")"}function zt(t){if(Array.isArray(t))return function t(e){return e.map((function(e){return Array.isArray(e)?t(e):isNaN(+e)?e:+e}))}(t);var e=new Nt(t),n=e.max;for(Rt(e);e.indexr;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Yt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),u=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,u,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function qt(t){if(!(t=zt(t))||!t.length)return[["M",0,0]];var e=[],n=0,r=0,i=0,a=0,s=0,o=t.length,u=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase();"M"===t[0][0]&&(n=+t[0][1],r=+t[0][2],i=n,a=r,s++,e[0]=["M",n,r]);for(var l=function(s){var o=void 0,l=t[s],p=l[0];if(e.push(o=[]),p!==p.toUpperCase())switch(o[0]=p.toUpperCase(),o[0]){case"A":o[1]=l[1],o[2]=l[2],o[3]=l[3],o[4]=l[4],o[5]=l[5],o[6]=+l[6]+n,o[7]=+l[7]+r;break;case"V":o[1]=+l[1]+r;break;case"H":o[1]=+l[1]+n;break;case"R":for(var c=[n,r].concat(l.slice(1)),h=2,f=c.length;h0&&(o=Math.max(o,Math.ceil(n/e)));for(var u=0;ue;)i=Gt(r,i,.5),t.splice(n+1,0,i)}function le(t,e){var n,r;if("string"==typeof t){var i=te(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError("Invalid path value");if(!pe(n=t.slice(0)))throw new TypeError("Invalid path value");return n.length>1&&Jt(n[0],n[n.length-1])&&n.pop(),se(n)>0&&n.reverse(),!r&&e&&$t(e)&&e>0&&ue(n,e),n}function pe(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&$t(t[0])&&$t(t[1])}))}function ce(t,e,n){var r=le(t,n=n||f.morphPrecision),i=le(e,n),a=r.length-i.length;return oe(r,a<0?-1*a:0),oe(i,a>0?a:0),ie(r,i),[r,i]}var he={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?V(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i=e.pathArray,a=n.pathArray,s=a.length;t.setAttribute("d",1===r?n.original:"M"+Lt(i,a,s,r).join("L")+"Z")})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=ce(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},fe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Lt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:he,Util:{INVALID_INPUT:"Invalid path value",isFiniteNumber:$t,distance:Wt,pointAlong:Gt,samePoint:Jt,pathToAbsolute:qt,pathToString:Kt,pathStringToRing:te,exactRing:ee,approximateRing:ne,measure:re,rotateRing:ie,polygonLength:ae,polygonArea:se,addPoints:oe,bisect:ue,normalizeRing:le,validRing:pe,getInterpolationPoints:ce}};for(var de in x.SVGMorph=fe,x){var ve=x[de];x[de]=new F(ve)}return{Animation:F,Components:x,Tween:H,fromTo:function(t,e,n,r){return r=r||{},new P.tween(V(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new P.tween(V(t),e,e,n)},TweenCollection:j,allFromTo:function(t,e,n,r){return r=r||{},new j(V(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new j(V(t,!0),e,e,n)},Objects:b,Util:w,Easing:L,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:T,Selector:V,Version:"2.0.13"}})); diff --git a/dist/kute.esm.js b/dist/kute.esm.js index 8ff5ed7..0d2bcdd 100644 --- a/dist/kute.esm.js +++ b/dist/kute.esm.js @@ -15,7 +15,7 @@ var globalObject = typeof (global) !== 'undefined' ? global var Interpolate = {}; -var onStart$1 = {}; +var onStart = {}; var Time = {}; Time.now = self.performance.now.bind(self.performance); @@ -36,11 +36,11 @@ function stop() { if (!Tweens.length && Tick) { cancelAnimationFrame(Tick); Tick = null; - for (var obj in onStart$1) { - if (typeof (onStart$1[obj]) === 'function') { + for (var obj in onStart) { + if (typeof (onStart[obj]) === 'function') { KUTE[obj] && (delete KUTE[obj]); } else { - for (var prop in onStart$1[obj]) { + for (var prop in onStart[obj]) { KUTE[prop] && (delete KUTE[prop]); } } @@ -86,7 +86,7 @@ var Objects = { prepareProperty: prepareProperty, prepareStart: prepareStart, crossCheck: crossCheck, - onStart: onStart$1, + onStart: onStart, onComplete: onComplete, linkProperty: linkProperty }; @@ -106,7 +106,7 @@ function getAll () { return Tweens; } function removeAll () { Tweens.length = 0; } -function linkInterpolation$1() { +function linkInterpolation() { var this$1 = this; var loop = function ( component ) { var componentLink = linkProperty[component]; @@ -143,7 +143,7 @@ var Internals = { getAll: getAll, removeAll: removeAll, stop: stop, - linkInterpolation: linkInterpolation$1 + linkInterpolation: linkInterpolation }; function getInlineStyle(el) { @@ -346,6 +346,19 @@ function selector(el, multi) { } } +function queueStart(){ + for (var obj in onStart) { + if (typeof (onStart[obj]) === 'function') { + onStart[obj].call(this,obj); + } else { + for (var prop in onStart[obj]) { + onStart[obj][prop].call(this,prop); + } + } + } + linkInterpolation.call(this); +} + var TweenBase = function TweenBase(targetElement, startObject, endObject, options){ this.element = targetElement; this.playing = false; @@ -363,8 +376,8 @@ var TweenBase = function TweenBase(targetElement, startObject, endObject, option if( !(internalOption in this ) ) { this[internalOption] = options[op]; } } var easingFnName = this._easing.name; - if (!onStart$1[easingFnName]) { - onStart$1[easingFnName] = function(prop){ + if (!onStart[easingFnName]) { + onStart[easingFnName] = function(prop){ !KUTE[prop] && prop === this._easing.name && (KUTE[prop] = this._easing); }; } @@ -379,16 +392,7 @@ TweenBase.prototype.start = function start (time) { if (this._onStart) { this._onStart.call(this); } - for (var obj in onStart$1) { - if (typeof (onStart$1[obj]) === 'function') { - onStart$1[obj].call(this,obj); - } else { - for (var prop in onStart$1[obj]) { - onStart$1[obj][prop].call(this,prop); - } - } - } - linkInterpolation$1.call(this); + queueStart.call(this); this._startFired = true; } !Tick && Ticker(); @@ -534,16 +538,7 @@ var Tween = (function (TweenBase) { if (this._onResume !== undefined) { this._onResume.call(this); } - for (var obj in onStart) { - if (typeof (onStart[obj]) === 'function') { - onStart[obj].call(this,obj); - } else { - for (var prop in onStart[obj]) { - onStart[obj][prop].call(this,prop); - } - } - } - linkInterpolation.call(this); + queueStart.call(this); this._startTime += KUTE.Time() - this._pauseTime; add(this); !Tick && Ticker(); @@ -708,7 +703,7 @@ var Animation = function Animation(Component){ Animation.prototype.setComponent = function setComponent (Component){ var propertyInfo = this; var ComponentName = Component.component; - var Functions = { prepareProperty: prepareProperty, prepareStart: prepareStart, onStart: onStart$1, onComplete: onComplete, crossCheck: crossCheck }; + var Functions = { prepareProperty: prepareProperty, prepareStart: prepareStart, onStart: onStart, onComplete: onComplete, crossCheck: crossCheck }; var Category = Component.category; var Property = Component.property; var Length = Component.properties && Component.properties.length || Component.subProperties && Component.subProperties.length; @@ -936,7 +931,7 @@ function prepareAttr(tweenProp,attrObj){ if ( currentValue !== null && regex.test(currentValue) ) { var unit = trueDimension(currentValue).u || trueDimension(attrObj[p]).u; var suffix = /%/.test(unit) ? '_percent' : ("_" + unit); - onStart$1[ComponentName][prop+suffix] = function(tp) { + onStart[ComponentName][prop+suffix] = function(tp) { if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) { attributes[tp] = function (elem, p, a, b, v) { var _p = p.replace(suffix,''); @@ -946,7 +941,7 @@ function prepareAttr(tweenProp,attrObj){ }; attributesObject[prop+suffix] = trueDimension(attrObj[p]); } else if ( !regex.test(attrObj[p]) || currentValue === null || currentValue !== null && !regex.test(currentValue) ) { - onStart$1[ComponentName][prop] = function(tp) { + onStart[ComponentName][prop] = function(tp) { if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) { attributes[tp] = function (elem, oneAttr, a, b, v) { elem.setAttribute(oneAttr, (numbers(a,b,v) * 1000 >> 0) / 1000 ); @@ -956,7 +951,7 @@ function prepareAttr(tweenProp,attrObj){ attributesObject[prop] = parseFloat(attrObj[p]); } } else { - onStart$1[ComponentName][prop] = function(tp) { + onStart[ComponentName][prop] = function(tp) { if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) { attributes[tp] = function (elem, oneAttr, a, b, v) { elem.setAttribute(oneAttr, colors(a,b,v)); @@ -1462,30 +1457,45 @@ function onStartSVGMorph(tweenProp){ } } -var INVALID_INPUT = 'Invalid path value'; -function isFiniteNumber(number) { - return typeof number === "number" && isFinite(number); +function clonePath(pathArray){ + return pathArray.map(function (x) { return Array.isArray(x) ? clonePath(x) : !isNaN(+x) ? +x : x; } ) } -function distance(a, b) { - return Math.sqrt( - (a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1]) - ); + +var SVGPCOps = { + decimals:3, + round:1 +}; + +function roundPath(pathArray) { + return pathArray.map( function (seg) { return seg.map(function (c,i) { + var nr = +c, dc = Math.pow(10,SVGPCOps.decimals); + return i ? (nr % 1 === 0 ? nr : (nr*dc>>0)/dc) : c + } + ); }) } -function pointAlong(a, b, pct) { - return [a[0] + (b[0] - a[0]) * pct, a[1] + (b[1] - a[1]) * pct]; -} -function samePoint(a, b) { - return distance(a, b) < 1e-9; + +function SVGPathArray(pathString){ + this.segments = []; + this.isClosed = 0; + this.isAbsolute = 0; + this.pathValue = pathString; + this.max = pathString.length; + this.index = 0; + this.param = 0.0; + this.segmentStart = 0; + this.data = []; + this.err = ''; + return this } + var paramCounts = { a: 7, c: 6, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, z: 0 }; -var SPECIAL_SPACES = [ - 0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, - 0x2007, 0x2008, 0x2009, 0x200A, 0x202F, 0x205F, 0x3000, 0xFEFF -]; function isSpace(ch) { + var specialSpaces = [ + 0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, + 0x2007, 0x2008, 0x2009, 0x200A, 0x202F, 0x205F, 0x3000, 0xFEFF ]; return (ch === 0x0A) || (ch === 0x0D) || (ch === 0x2028) || (ch === 0x2029) || (ch === 0x20) || (ch === 0x09) || (ch === 0x0B) || (ch === 0x0C) || (ch === 0xA0) || - (ch >= 0x1680 && SPECIAL_SPACES.indexOf(ch) >= 0); + (ch >= 0x1680 && specialSpaces.indexOf(ch) >= 0); } function isCommand(code) { switch (code | 0x20) { @@ -1516,23 +1526,13 @@ function isDigitStart(code) { code === 0x2D || code === 0x2E; } -function State(path) { - this.index = 0; - this.path = path; - this.max = path.length; - this.result = []; - this.param = 0.0; - this.err = ''; - this.segmentStart = 0; - this.data = []; -} function skipSpaces(state) { - while (state.index < state.max && isSpace(state.path.charCodeAt(state.index))) { + while (state.index < state.max && isSpace(state.pathValue.charCodeAt(state.index))) { state.index++; } } function scanFlag(state) { - var ch = state.path.charCodeAt(state.index); + var ch = state.pathValue.charCodeAt(state.index); if (ch === 0x30) { state.param = 0; state.index++; @@ -1543,7 +1543,7 @@ function scanFlag(state) { state.index++; return; } - state.err = "KUTE.js - " + INVALID_INPUT; + state.err = 'SvgPath: arc flag can be 0 or 1 only (at pos ' + state.index + ')'; } function scanParam(state) { var start = state.index, @@ -1555,81 +1555,78 @@ function scanParam(state) { hasDot = false, ch; if (index >= max) { - state.err = "KUTE.js - " + INVALID_INPUT; + state.err = 'SvgPath: missed param (at pos ' + index + ')'; return; } - ch = state.path.charCodeAt(index); + ch = state.pathValue.charCodeAt(index); if (ch === 0x2B || ch === 0x2D) { index++; - ch = (index < max) ? state.path.charCodeAt(index) : 0; + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; } if (!isDigit(ch) && ch !== 0x2E) { - state.err = "KUTE.js - " + INVALID_INPUT; + state.err = 'SvgPath: param should start with 0..9 or `.` (at pos ' + index + ')'; return; } if (ch !== 0x2E) { zeroFirst = (ch === 0x30); index++; - ch = (index < max) ? state.path.charCodeAt(index) : 0; + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; if (zeroFirst && index < max) { if (ch && isDigit(ch)) { - state.err = "KUTE.js - " + INVALID_INPUT; + state.err = 'SvgPath: numbers started with `0` such as `09` are illegal (at pos ' + start + ')'; return; } } - while (index < max && isDigit(state.path.charCodeAt(index))) { + while (index < max && isDigit(state.pathValue.charCodeAt(index))) { index++; hasCeiling = true; } - ch = (index < max) ? state.path.charCodeAt(index) : 0; + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; } if (ch === 0x2E) { hasDot = true; index++; - while (isDigit(state.path.charCodeAt(index))) { + while (isDigit(state.pathValue.charCodeAt(index))) { index++; hasDecimal = true; } - ch = (index < max) ? state.path.charCodeAt(index) : 0; + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; } if (ch === 0x65 || ch === 0x45) { if (hasDot && !hasCeiling && !hasDecimal) { - state.err = "KUTE.js - " + INVALID_INPUT; + state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; return; } index++; - ch = (index < max) ? state.path.charCodeAt(index) : 0; + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; if (ch === 0x2B || ch === 0x2D) { index++; } - if (index < max && isDigit(state.path.charCodeAt(index))) { - while (index < max && isDigit(state.path.charCodeAt(index))) { + if (index < max && isDigit(state.pathValue.charCodeAt(index))) { + while (index < max && isDigit(state.pathValue.charCodeAt(index))) { index++; } } else { - state.err = "KUTE.js - " + INVALID_INPUT; + state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; return; } } state.index = index; - state.param = parseFloat(state.path.slice(start, index)) + 0.0; + state.param = parseFloat(state.pathValue.slice(start, index)) + 0.0; } function finalizeSegment(state) { - var cmd, cmdLC; - cmd = state.path[state.segmentStart]; - cmdLC = cmd.toLowerCase(); - var params = state.data; + var cmd = state.pathValue[state.segmentStart], cmdLC = cmd.toLowerCase(), params = state.data; if (cmdLC === 'm' && params.length > 2) { - state.result.push([ cmd, params[0], params[1] ]); + state.segments.push([ cmd, params[0], params[1] ]); params = params.slice(2); cmdLC = 'l'; cmd = (cmd === 'm') ? 'l' : 'L'; } if (cmdLC === 'r') { - state.result.push([ cmd ].concat(params)); + state.segments.push([ cmd ].concat(params)); } else { while (params.length >= paramCounts[cmdLC]) { - state.result.push([ cmd ].concat(params.splice(0, paramCounts[cmdLC]))); + state.segments.push([ cmd ].concat(params.splice(0, paramCounts[cmdLC]))); if (!paramCounts[cmdLC]) { break; } @@ -1639,17 +1636,18 @@ function finalizeSegment(state) { function scanSegment(state) { var max = state.max, cmdCode, is_arc, comma_found, need_params, i; state.segmentStart = state.index; - cmdCode = state.path.charCodeAt(state.index); + cmdCode = state.pathValue.charCodeAt(state.index); is_arc = isArc(cmdCode); if (!isCommand(cmdCode)) { - state.err = "KUTE.js - " + INVALID_INPUT; + state.err = 'SvgPath: bad command ' + state.pathValue[state.index] + ' (at pos ' + state.index + ')'; return; } - need_params = paramCounts[state.path[state.index].toLowerCase()]; + need_params = paramCounts[state.pathValue[state.index].toLowerCase()]; state.index++; skipSpaces(state); state.data = []; if (!need_params) { + state.isClosed = 1; finalizeSegment(state); return; } @@ -1664,7 +1662,7 @@ function scanSegment(state) { state.data.push(state.param); skipSpaces(state); comma_found = false; - if (state.index < max && state.path.charCodeAt(state.index) === 0x2C) { + if (state.index < max && state.pathValue.charCodeAt(state.index) === 0x2C) { state.index++; skipSpaces(state); comma_found = true; @@ -1676,148 +1674,250 @@ function scanSegment(state) { if (state.index >= state.max) { break; } - if (!isDigitStart(state.path.charCodeAt(state.index))) { + if (!isDigitStart(state.pathValue.charCodeAt(state.index))) { break; } } finalizeSegment(state); } -function pathParse(svgPath) { - var state = new State(svgPath), max = state.max; +function parsePathString(pathString) { + if ( Array.isArray(pathString) ) { + return clonePath(pathString) + } + var state = new SVGPathArray(pathString), max = state.max; skipSpaces(state); while (state.index < max && !state.err.length) { scanSegment(state); } if (state.err.length) { - state.result = []; - } else if (state.result.length) { - if ('mM'.indexOf(state.result[0][0]) < 0) { - state.err = "KUTE.js - " + INVALID_INPUT; - state.result = []; + state.segments = []; + } else if (state.segments.length) { + if ('mM'.indexOf(state.segments[0][0]) < 0) { + state.err = 'SvgPath: string should start with `M` or `m`'; + state.segments = []; } else { - state.result[0][0] = 'M'; + state.segments[0][0] = 'M'; } } - return { - err: state.err, - segments: state.result - }; + return roundPath(state.segments) } -var SvgPath = function SvgPath(path){ - if (!(this instanceof SvgPath)) { return new SvgPath(path); } - var pstate = pathParse(path); - this.segments = pstate.segments; - this.err = pstate.err; -}; -SvgPath.prototype.iterate = function iterate (iterator) { - var segments = this.segments, - replacements = {}, - needReplace = false, - lastX = 0, - lastY = 0, - countourStartX = 0, - countourStartY = 0, - newSegments; - segments.map( function (s,index) { - var res = iterator(s, index, lastX, lastY); - if (Array.isArray(res)) { - replacements[index] = res; - needReplace = true; - } - var isRelative = (s[0] === s[0].toLowerCase()); - switch (s[0]) { - case 'm': - case 'M': - lastX = s[1] + (isRelative ? lastX : 0); - lastY = s[2] + (isRelative ? lastY : 0); - countourStartX = lastX; - countourStartY = lastY; - return; - case 'h': - case 'H': - lastX = s[1] + (isRelative ? lastX : 0); - return; - case 'v': - case 'V': - lastY = s[1] + (isRelative ? lastY : 0); - return; - case 'z': - case 'Z': - lastX = countourStartX; - lastY = countourStartY; - return; - default: - lastX = s[s.length - 2] + (isRelative ? lastX : 0); - lastY = s[s.length - 1] + (isRelative ? lastY : 0); - } - }); - if (!needReplace) { return this; } - newSegments = []; - segments.map(function (s,i){ - if (typeof replacements[i] !== 'undefined') { - replacements[i].map(function (r){ - newSegments.push(r); - }); + +function catmullRom2bezier(crp, z) { + var d = []; + for (var i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) { + var p = [ + {x: +crp[i - 2], y: +crp[i - 1]}, + {x: +crp[i], y: +crp[i + 1]}, + {x: +crp[i + 2], y: +crp[i + 3]}, + {x: +crp[i + 4], y: +crp[i + 5]} + ]; + if (z) { + if (!i) { + p[0] = {x: +crp[iLen - 2], y: +crp[iLen - 1]}; + } else if (iLen - 4 == i) { + p[3] = {x: +crp[0], y: +crp[1]}; + } else if (iLen - 2 == i) { + p[2] = {x: +crp[0], y: +crp[1]}; + p[3] = {x: +crp[2], y: +crp[3]}; + } } else { - newSegments.push(s); + if (iLen - 4 == i) { + p[3] = p[2]; + } else if (!i) { + p[0] = {x: +crp[i], y: +crp[i + 1]}; + } } - }); - this.segments = newSegments; - return this; -}; -SvgPath.prototype.abs = function abs () { - this.iterate(function (s, index, x, y) { - var name = s[0], - nameUC = name.toUpperCase(), - i; - if (name === nameUC) { return; } - s[0] = nameUC; - switch (name) { - case 'v': - s[1] += y; - return; - case 'a': - s[6] += x; - s[7] += y; - return; - default: - for (i = 1; i < s.length; i++) { - s[i] += i % 2 ? x : y; - } + d.push([ + "C", + (-p[0].x + 6 * p[1].x + p[2].x) / 6, + (-p[0].y + 6 * p[1].y + p[2].y) / 6, + (p[1].x + 6 * p[2].x - p[3].x) / 6, + (p[1].y + 6*p[2].y - p[3].y) / 6, + p[2].x, + p[2].y + ]); + } + return d +} + +function ellipsePath(x, y, rx, ry, a) { + if (a == null && ry == null) { + ry = rx; + } + x = +x; + y = +y; + rx = +rx; + ry = +ry; + var res; + if (a != null) { + var rad = Math.PI / 180, + x1 = x + rx * Math.cos(-ry * rad), + x2 = x + rx * Math.cos(-a * rad), + y1 = y + rx * Math.sin(-ry * rad), + y2 = y + rx * Math.sin(-a * rad); + res = [["M", x1, y1], ["A", rx, rx, 0, +(a - ry > 180), 0, x2, y2]]; + } else { + res = [ + ["M", x, y], + ["m", 0, -ry], + ["a", rx, ry, 0, 1, 1, 0, 2 * ry], + ["a", rx, ry, 0, 1, 1, 0, -2 * ry], + ["z"] + ]; + } + return res; +} + +function pathToAbsolute(pathArray) { + pathArray = parsePathString(pathArray); + if (!pathArray || !pathArray.length) { + return [["M", 0, 0]]; + } + var res = [], x = 0, y = 0, mx = 0, my = 0, start = 0, + ii = pathArray.length, + crz = pathArray.length === 3 && + pathArray[0][0] === "M" && + pathArray[1][0].toUpperCase() === "R" && + pathArray[2][0].toUpperCase() === "Z"; + if (pathArray[0][0] === "M") { + x = +pathArray[0][1]; + y = +pathArray[0][2]; + mx = x; + my = y; + start++; + res[0] = ["M", x, y]; + } + var loop = function ( i ) { + var r = (void 0), pa = pathArray[i], pa0 = pa[0]; + res.push(r = []); + if (pa0 !== pa0.toUpperCase()) { + r[0] = pa0.toUpperCase(); + switch (r[0]) { + case "A": + r[1] = pa[1]; + r[2] = pa[2]; + r[3] = pa[3]; + r[4] = pa[4]; + r[5] = pa[5]; + r[6] = +pa[6] + x; + r[7] = +pa[7] + y; + break; + case "V": + r[1] = +pa[1] + y; + break; + case "H": + r[1] = +pa[1] + x; + break; + case "R": + var dots$1 = [x, y].concat(pa.slice(1)); + for (var j = 2, jj = dots$1.length; j < jj; j++) { + dots$1[j] = +dots$1[j] + x; + dots$1[++j] = +dots$1[j] + y; + } + res.pop(); + res = res.concat(catmullRom2bezier(dots$1, crz)); + break; + case "O": + res.pop(); + dots$1 = ellipsePath(x, y, +pa[1], +pa[2]); + dots$1.push(dots$1[0]); + res = res.concat(dots$1); + break; + case "U": + res.pop(); + res = res.concat(ellipsePath(x, y, pa[1], pa[2], pa[3])); + r = ["U"].concat(res[res.length - 1].slice(-2)); + break; + case "M": + mx = +pa[1] + x; + my = +pa[2] + y; + default: + for (var j$1 = 1, jj$1 = pa.length; j$1 < jj$1; j$1++) { + r[j$1] = +pa[j$1] + ((j$1 % 2) ? x : y); + } + } + } else if (pa0 === "R") { + dots = [x, y].concat(pa.slice(1)); + res.pop(); + res = res.concat(catmullRom2bezier(dots, crz)); + r = ["R"].concat(pa.slice(-2)); + } else if (pa0 === "O") { + res.pop(); + dots = ellipsePath(x, y, +pa[1], +pa[2]); + dots.push(dots[0]); + res = res.concat(dots); + } else if (pa0 === "U") { + res.pop(); + res = res.concat(ellipsePath(x, y, +pa[1], +pa[2], +pa[3])); + r = ["U"].concat(res[res.length - 1].slice(-2)); + } else { + pa.map(function (k){ return r.push(k); }); } - }, true); - return this; -}; -SvgPath.prototype.toString = function toString () { - var this$1 = this; - var elements = [], skipCmd, cmd; - this.segments.map( function (s,i) { - cmd = s[0]; - skipCmd = i > 0 && cmd !== 'm' && cmd !== 'M' && cmd === this$1.segments[i - 1][0]; - elements = elements.concat(skipCmd ? s.slice(1) : s); - }); - return elements.join(' ') - .replace(/ ?([achlmqrstvz]) ?/gi, '$1') - .replace(/ \-/g, '-') - .replace(/zm/g, 'z m'); -}; -function split(parsed) { - return parsed - .toString() - .split("M") - .map(function (d, i) { - d = d.trim(); - return i && d ? "M" + d : d; - }) - .filter(function (d) { return d; }); + pa0 = pa0.toUpperCase(); + if (pa0 !== "O") { + switch (r[0]) { + case "Z": + x = mx; + y = my; + break; + case "H": + x = +r[1]; + break; + case "V": + y = +r[1]; + break; + case "M": + mx = +r[r.length - 2]; + my = +r[r.length - 1]; + default: + x = +r[r.length - 2]; + y = +r[r.length - 1]; + } + } + }; + for (var i = start; i < ii; i++) loop( i ); + return roundPath(res) +} + +function pathToString(pathArray) { + return pathArray.map( function (c) { + if (typeof c === 'string') { + return c + } else { + return c.shift() + c.join(',') + } + }).join(' ') +} + +function splitPath(pathString) { + return pathString + .replace( /(m|M)/g, "|$1") + .split('|') + .map(function (s){ return s.trim(); }) + .filter(function (s){ return s; }) +} + +var INVALID_INPUT = 'Invalid path value'; +function isFiniteNumber(number) { + return typeof number === "number" && isFinite(number); +} +function distance(a, b) { + return Math.sqrt( + (a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1]) + ); +} +function pointAlong(a, b, pct) { + return [a[0] + (b[0] - a[0]) * pct, a[1] + (b[1] - a[1]) * pct]; +} +function samePoint(a, b) { + return distance(a, b) < 1e-9; } function pathStringToRing(str, maxSegmentLength) { - var parsed = new SvgPath(str).abs(); + var parsed = pathToAbsolute(str); return exactRing(parsed) || approximateRing(parsed, maxSegmentLength); } -function exactRing(parsed) { - var segments = parsed.segments || [], - ring = []; +function exactRing(segments) { + var ring = []; if (!segments.length || segments[0][0] !== "M") { return false; } @@ -1841,7 +1941,8 @@ function exactRing(parsed) { return ring.length ? { ring: ring } : false; } function approximateRing(parsed, maxSegmentLength) { - var ringPath = split(parsed)[0], ring = [], len, testPath, numPoints = 3; + var ringPath = splitPath(pathToString(parsed))[0], + ring = [], len, testPath, numPoints = 3; if (!ringPath) { throw new TypeError(INVALID_INPUT); } @@ -2032,9 +2133,11 @@ var svgMorph = { defaultOptions: {morphPrecision : 10, morphIndex:0}, functions: svgMorphFunctions, Util: { - INVALID_INPUT: INVALID_INPUT,isFiniteNumber: isFiniteNumber,distance: distance,pointAlong: pointAlong,samePoint: samePoint,paramCounts: paramCounts,SPECIAL_SPACES: SPECIAL_SPACES,isSpace: isSpace,isCommand: isCommand,isArc: isArc,isDigit: isDigit, - isDigitStart: isDigitStart,State: State,skipSpaces: skipSpaces,scanFlag: scanFlag,scanParam: scanParam,finalizeSegment: finalizeSegment,scanSegment: scanSegment,pathParse: pathParse,SvgPath: SvgPath,split: split,pathStringToRing: pathStringToRing, - exactRing: exactRing,approximateRing: approximateRing,measure: measure,rotateRing: rotateRing,polygonLength: polygonLength,polygonArea: polygonArea,addPoints: addPoints,bisect: bisect,normalizeRing: normalizeRing,validRing: validRing,getInterpolationPoints: getInterpolationPoints} + INVALID_INPUT: INVALID_INPUT,isFiniteNumber: isFiniteNumber,distance: distance,pointAlong: pointAlong,samePoint: samePoint, + pathToAbsolute: pathToAbsolute,pathToString: pathToString,pathStringToRing: pathStringToRing, + exactRing: exactRing,approximateRing: approximateRing,measure: measure,rotateRing: rotateRing,polygonLength: polygonLength,polygonArea: polygonArea, + addPoints: addPoints,bisect: bisect,normalizeRing: normalizeRing,validRing: validRing,getInterpolationPoints: getInterpolationPoints + } }; Components.SVGMorph = svgMorph; diff --git a/dist/kute.esm.min.js b/dist/kute.esm.min.js index 904b67c..e95fe20 100644 --- a/dist/kute.esm.min.js +++ b/dist/kute.esm.min.js @@ -1,2 +1,2 @@ // KUTE.js Standard v2.0.13 | thednp © 2020 | MIT-License -var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var L={},P={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}L.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:L.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return i[u]||(i[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};U.prototype.start=function(e){if(S(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},U.prototype.stop=function(){return this.playing&&(x(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},U.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},U.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},U.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},U.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},L.tween=U,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var F=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(A.call(this,i,"end"),this._resetStart?this.valuesStart=r:A.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,M.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){if(this.paused&&this.playing){for(var e in this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),onStart)if("function"==typeof onStart[e])onStart[e].call(this,e);else for(var n in onStart[e])onStart[e][n].call(this,n);linkInterpolation.call(this),this._startTime+=t.Time()-this._pauseTime,S(this),!s&&o()}return this},n.prototype.pause=function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(U);L.tween=F;var N=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new L.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};N.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},N.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},N.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},N.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},N.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof N)e.chain(t.tweens);else{if(!(t instanceof L.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},N.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},N.prototype.removeTweens=function(){this.tweens=[]},N.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t){try{t.component in p?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*V(n,r,i)>>0)/10:V(n,r,i)>>0)+"px"})}H.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:v,prepareStart:d,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(p[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var c in n)if(c in t.functions)if("function"==typeof t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][a||s]&&(n[c][e][a||s]=t.functions[c]);else for(var w in t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][w]&&(n[c][e][w]=t.functions[c][w]);if(t.Interpolate){for(var _ in t.Interpolate){var S=t.Interpolate[_];if("function"!=typeof S||r[_])for(var x in S)"function"!=typeof S[x]||r[_]||(r[_]=S[x]);else r[_]=S}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!b[T]&&(b[T]=t.Util[T]);return this};var Q=["top","left","width","height"],R={};Q.map((function(t){return R[t]=z}));var X={component:"essentialBoxModel",category:"boxModel",properties:Q,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:V},functions:{prepareStart:function(t){return I(this.element,t)||h[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:D}};function B(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function K(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?V(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*V(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}_.BoxModelEssential=X;var Y=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Z={};Y.map((function(t){Z[t]="#000"}));var $={};Y.map((function(t){return $[t]=q}));var W={component:"colorProperties",category:"colors",properties:Y,defaultValues:Z,Interpolate:{numbers:V,colors:K},functions:{prepareStart:function(t,e){return I(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};_.ColorProperties=W;var G={},J=["fill","stroke","stop-color"];function tt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var et={prepareStart:function(t,e){var n={};for(var r in e){var i=tt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=J.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=tt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(J.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,K(n,r,i))})},n[a]=B(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;i.htmlAttributes[a+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){var a=e.replace(l,"");t.setAttribute(a,(1e3*V(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+l]=D(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*V(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=G)}}},nt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:V,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:D}};_.HTMLAttributes=nt;var rt={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*V(n,r,i)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:V},functions:rt};_.OpacityProperty=it;var at=String("abcdefghijklmnopqrstuvwxyz").split(""),st=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ot=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ut=String("0123456789").split(""),lt=at.concat(st,ut),ct=lt.concat(ot),pt={alpha:at,upper:st,symbols:ot,numeric:ut,alphanumeric:lt,all:ct},ht={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in pt?pt[n]:n&&n.length?n:pt[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=V(e,n,r)>>0})}};function ft(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function vt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,c=void 0;s>0)/1e3+n+")"}function mt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function yt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function bt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}_.TextWriteProperties=dt;var _t={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=E(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},i=[],a=[],s=[],o=["translate3d","translate","rotate3d","skew"];for(var u in e){var l="object"==typeof e[u]&&e[u].length?e[u].map((function(t){return parseInt(t)})):parseInt(e[u]);if(o.includes(u))r["translate"===u||"rotate"===u?u+"3d":u]="skew"===u?l.length?[l[0]||0,l[1]||0]:[l||0,0]:"translate"===u?l.length?[l[0]||0,l[1]||0,l[2]||0]:[l||0,0,0]:[l[0]||0,l[1]||0,l[2]||0];else if(/[XYZ]/.test(u)){for(var c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="skew"===c?2:3,f="translate"===c?i:"rotate"===c?a:"skew"===c?s:{},v=0;v>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:wt,skew:bt}};function St(t,e){return parseFloat(t)/100*e}function xt(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Tt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*V(e.s,n.s,r)>>0)/100,s=(100*V(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ot={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:V},functions:kt,Util:{getRectLength:xt,getPolyLength:Tt,getLineLength:Ct,getCircleLength:Et,getEllipseLength:It,getTotalLength:At,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Mt,percent:St}};function Lt(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}_.SVGDraw=Ot;var Pt="Invalid path value";function jt(t){return"number"==typeof t&&isFinite(t)}function Ut(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Ft(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Nt(t,e){return Ut(t,e)<1e-9}var Ht={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Dt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Vt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Dt.indexOf(t)>=0}function zt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Qt(t){return 97==(32|t)}function Rt(t){return t>=48&&t<=57}function Xt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Bt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function Kt(t){for(;t.index=i)t.err="KUTE.js - "+Pt;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=Ht[n]&&(t.result.push([e].concat(r.splice(0,Ht[n]))),Ht[n]););}function $t(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Qt(e=t.path.charCodeAt(t.index)),zt(e))if(i=Ht[t.path[t.index].toLowerCase()],t.index++,Kt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Yt(t):qt(t),t.err.length)return;t.data.push(t.param),Kt(t),r=!1,t.index=t.max)break;if(!Xt(t.path.charCodeAt(t.index)))break}}Zt(t)}else Zt(t);else t.err="KUTE.js - "+Pt}function Wt(t){var e=new Bt(t),n=e.max;for(Kt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Ft(r,i,.5),t.splice(n+1,0,i)}function le(t,e){var n,r;if("string"==typeof t){var i=te(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Pt);if(!ce(n=t.slice(0)))throw new TypeError(Pt);return n.length>1&&Nt(n[0],n[n.length-1])&&n.pop(),se(n)>0&&n.reverse(),!r&&e&&jt(e)&&e>0&&ue(n,e),n}function ce(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&jt(t[0])&&jt(t[1])}))}function pe(t,e,n){var r=le(t,n=n||f.morphPrecision),i=le(e,n),a=r.length-i.length;return oe(r,a<0?-1*a:0),oe(i,a>0?a:0),ie(r,i),[r,i]}Gt.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},Gt.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var he={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i=e.pathArray,a=n.pathArray,s=a.length;t.setAttribute("d",1===r?n.original:"M"+Lt(i,a,s,r).join("L")+"Z")})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=pe(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},fe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Lt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:he,Util:{INVALID_INPUT:Pt,isFiniteNumber:jt,distance:Ut,pointAlong:Ft,samePoint:Nt,paramCounts:Ht,SPECIAL_SPACES:Dt,isSpace:Vt,isCommand:zt,isArc:Qt,isDigit:Rt,isDigitStart:Xt,State:Bt,skipSpaces:Kt,scanFlag:qt,scanParam:Yt,finalizeSegment:Zt,scanSegment:$t,pathParse:Wt,SvgPath:Gt,split:Jt,pathStringToRing:te,exactRing:ee,approximateRing:ne,measure:re,rotateRing:ie,polygonLength:ae,polygonArea:se,addPoints:oe,bisect:ue,normalizeRing:le,validRing:ce,getInterpolationPoints:pe}};for(var ve in _.SVGMorph=fe,_){var de=_[ve];_[ve]=new H(de)}var ge={Animation:H,Components:_,Tween:F,fromTo:function(t,e,n,r){return r=r||{},new L.tween(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new L.tween(j(t),e,e,n)},TweenCollection:N,allFromTo:function(t,e,n,r){return r=r||{},new N(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new N(j(t,!0),e,e,n)},Objects:w,Util:b,Easing:P,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:C,Selector:j,Version:"2.0.13"};export default ge; +var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},a={},i={};i.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ea?e=r:n=r,r=.5*(n-e)+e}return r};var P={},L={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function V(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}function U(){for(var t in a)if("function"==typeof a[t])a[t].call(this,t);else for(var e in a[t])a[t][e].call(this,e);C.call(this)}P.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var N=function(e,n,r,i){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:P.processEasing(i.easing),this._duration=i.duration||f.duration,this._delay=i.delay||f.delay,i){var o="_"+s;o in this||(this[o]=i[s])}var u=this._easing.name;return a[u]||(a[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};N.prototype.start=function(e){return _(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,this._startFired||(this._onStart&&this._onStart.call(this),U.call(this),this._startFired=!0),!s&&o(),this},N.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},N.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},N.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},N.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},N.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[a](this.element,this.valuesStart[a],this.valuesEnd[a],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},P.tween=N,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var H=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],a=t[2];if(M.call(this,a,"end"),this._resetStart?this.valuesStart=r:M.call(this,r,"start"),!this._resetStart)for(var i in g)for(var s in g[i])g[i][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,A.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var a in this.valuesEnd)this.valuesRepeat[a]=this.valuesStart[a];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),U.call(this),this._startTime+=t.Time()-this._pauseTime,_(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[a](this.element,this.valuesStart[a],this.valuesEnd[a],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(N);P.tween=H;var F=function(t,e,n,r){var a=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var i=[];return Array.from(t).map((function(t,s){i[s]=r||{},i[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?a.tweens.push(new P.tween(t,e,n,i[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};F.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},F.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},F.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},F.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},F.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof F)e.chain(t.tweens);else{if(!(t instanceof P.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},F.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},F.prototype.removeTweens=function(){this.tweens=[]},F.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var j=function(t){try{t.component in c?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function R(t,e){for(var n,r=parseInt(t)||0,a=["px","%","deg","rad","em","rem","vh","vw"],i=0;i.99||a<.01?(10*D(n,r,a)>>0)/10:D(n,r,a)>>0)+"px"})}j.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:a,onComplete:m,crossCheck:g},i=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(c[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||i)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][i||s]&&(n[p][e][i||s]=t.functions[p]);else for(var b in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][b]&&(n[p][e][b]=t.functions[p][b]);if(t.Interpolate){for(var x in t.Interpolate){var _=t.Interpolate[x];if("function"!=typeof _||r[x])for(var S in _)"function"!=typeof _[S]||r[x]||(r[x]=_[S]);else r[x]=_}y[e]=t.Interpolate}if(t.Util)for(var C in t.Util)!w[C]&&(w[C]=t.Util[C]);return this};var X=["top","left","width","height"],B={};X.map((function(t){return B[t]=Q}));var z={component:"essentialBoxModel",category:"boxModel",properties:X,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:D},functions:{prepareStart:function(t){return E(this.element,t)||h[t]},prepareProperty:function(t,e){var n=R(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:B},Util:{trueDimension:R}};function Z(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var a=document.getElementsByTagName("head")[0];a.style.color=t;var i=getComputedStyle(a,null).color;return i=/rgb/.test(i)?i.replace(/[^\d,]/g,"").split(","):[0,0,0],a.style.color="",{r:parseInt(i[0]),g:parseInt(i[1]),b:parseInt(i[2])}}}function Y(t,e,n){var r,a={};for(r in e)a[r]="a"!==r?D(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*D(t[r],e[r],n)>>0)/100:null;return a.a?"rgba("+a.r+","+a.g+","+a.b+","+a.a+")":"rgb("+a.r+","+a.g+","+a.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=Y(n,r,a)})}x.BoxModelEssential=z;var K=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],$={};K.map((function(t){$[t]="#000"}));var W={};K.map((function(t){return W[t]=q}));var G={component:"colorProperties",category:"colors",properties:K,defaultValues:$,Interpolate:{numbers:D,colors:Y},functions:{prepareStart:function(t,e){return E(this.element,t)||h[t]},prepareProperty:function(t,e){return Z(e)},onStart:W},Util:{trueColor:Z}};x.ColorProperties=G;var J={},tt=["fill","stroke","stop-color"];function et(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var n={};for(var r in e){var a=et(r).replace(/_+[a-z]+/,""),i=this.element.getAttribute(a);n[a]=tt.includes(a)?i||"rgba(0,0,0,0)":i||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var i=et(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(i.replace(/_+[a-z]+/,""));if(tt.includes(i))a.htmlAttributes[i]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,r,a){t.setAttribute(e,Y(n,r,a))})},n[i]=Z(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=R(o).u||R(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;a.htmlAttributes[i+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,r,a){var i=e.replace(l,"");t.setAttribute(i,(1e3*D(n.v,r.v,a)>>0)/1e3+r.u)})},n[i+l]=R(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(a.htmlAttributes[i]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,r,a){t.setAttribute(e,(1e3*D(n,r,a)>>0)/1e3)})},n[i]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,a){for(var i in r)t.attributes[i](e,i,n[i],r[i],a)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=J)}}},rt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:D,colors:Y},functions:nt,Util:{replaceUppercase:et,trueColor:Z,trueDimension:R}};x.HTMLAttributes=rt;var at={prepareStart:function(t){return E(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=(1e3*D(n,r,a)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:D},functions:at};x.OpacityProperty=it;var st=String("abcdefghijklmnopqrstuvwxyz").split(""),ot=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ut=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),lt=String("0123456789").split(""),pt=st.concat(ot,lt),ct=pt.concat(ut),ht={alpha:st,upper:ot,symbols:ut,numeric:lt,alphanumeric:pt,all:ct},ft={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in ht?ht[n]:n&&n.length?n:ht[f.textChars];t[e]=function(t,e,n,a){var i="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(a*u.length,u.length)>>0,0),t.innerHTML=a<1?s+l:""===n?" ":n):" "===n?(i=o.substring(0,Math.min((1-a)*o.length,o.length)>>0),t.innerHTML=a<1?i+l:""===n?" ":n):(i=o.substring(o.length,Math.min(a*o.length,o.length)>>0),s=u.substring(0,Math.min(a*u.length,u.length)>>0),t.innerHTML=a<1?s+l+i:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=D(e,n,r)>>0})}};function dt(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var a=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=a,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function vt(t,e){var n=[];if(t.children.length){for(var r,a=[],i=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,p=void 0;s>0)/1e3+n+")"}function yt(t,e,n,r){for(var a=[],i=0;i<3;i++)a[i]=(t[i]||e[i]?(1e3*(t[i]+(e[i]-t[i])*r)>>0)/1e3:0)+n;return"translate3d("+a.join(",")+")"}function bt(t,e,n,r){var a="";return a+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",a+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",a+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function xt(t,e,n,r){var a=[];return a[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,a[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+a.join(",")+")"}x.TextWriteProperties=gt;var _t={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=I(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},a=[],i=[],s=[],o=["translate3d","translate","rotate3d","skew"];for(var u in e){var l="object"==typeof e[u]&&e[u].length?e[u].map((function(t){return parseInt(t)})):parseInt(e[u]);if(o.includes(u))r["translate"===u||"rotate"===u?u+"3d":u]="skew"===u?l.length?[l[0]||0,l[1]||0]:[l||0,0]:"translate"===u?l.length?[l[0]||0,l[1]||0,l[2]||0]:[l||0,0,0]:[l[0]||0,l[1]||0,l[2]||0];else if(/[XYZ]/.test(u)){for(var p=u.replace(/[XYZ]/,""),c="skew"===p?p:p+"3d",h="skew"===p?2:3,f="translate"===p?a:"rotate"===p?i:"skew"===p?s:{},d=0;d>0)/1e3)+n,a[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+a.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:wt,skew:xt}};function St(t,e){return parseFloat(t)/100*e}function Ct(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Tt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,i=0-(100*D(e.s,n.s,r)>>0)/100,s=(100*D(e.e,n.e,r)>>0)/100+i;t.style.strokeDashoffset=i+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+a+"px"})}},Pt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:D},functions:Ot,Util:{getRectLength:Ct,getPolyLength:Tt,getLineLength:It,getCircleLength:Et,getEllipseLength:Mt,getTotalLength:At,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:kt,percent:St}};function Lt(t,e,n,r){for(var a=[],i=0;i>0)/1e3)}return a}x.SVGDraw=Pt;var Vt=3;function Ut(t){return t.map((function(t){return t.map((function(t,e){var n=+t,r=Math.pow(10,Vt);return e?n%1==0?n:(n*r>>0)/r:t}))}))}function Nt(t){return this.segments=[],this.isClosed=0,this.isAbsolute=0,this.pathValue=t,this.max=t.length,this.index=0,this.param=0,this.segmentStart=0,this.data=[],this.err="",this}var Ht={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0};function Ft(t){return t>=48&&t<=57}function jt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Rt(t){for(;t.index=5760&&[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279].indexOf(e)>=0);)t.index++;var e}function Dt(t){var e=t.pathValue.charCodeAt(t.index);return 48===e?(t.param=0,void t.index++):49===e?(t.param=1,void t.index++):void(t.err="SvgPath: arc flag can be 0 or 1 only (at pos "+t.index+")")}function Qt(t){var e,n=t.index,r=n,a=t.max,i=!1,s=!1,o=!1,u=!1;if(r>=a)t.err="SvgPath: missed param (at pos "+r+")";else if(43!==(e=t.pathValue.charCodeAt(r))&&45!==e||(e=++r2&&(t.segments.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.segments.push([e].concat(r));else for(;r.length>=Ht[n]&&(t.segments.push([e].concat(r.splice(0,Ht[n]))),Ht[n]););}function Bt(t){var e,n,r,a,i,s=t.max;if(t.segmentStart=t.index,e=t.pathValue.charCodeAt(t.index),n=97==(32|e),function(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}(e)){if(a=Ht[t.pathValue[t.index].toLowerCase()],t.index++,Rt(t),t.data=[],!a)return t.isClosed=1,void Xt(t);for(r=!1;;){for(i=a;i>0;i--){if(!n||3!==i&&4!==i?Qt(t):Dt(t),t.err.length)return;t.data.push(t.param),Rt(t),r=!1,t.index=t.max)break;if(!jt(t.pathValue.charCodeAt(t.index)))break}}Xt(t)}else t.err="SvgPath: bad command "+t.pathValue[t.index]+" (at pos "+t.index+")"}function zt(t){if(Array.isArray(t))return function t(e){return e.map((function(e){return Array.isArray(e)?t(e):isNaN(+e)?e:+e}))}(t);var e=new Nt(t),n=e.max;for(Rt(e);e.indexr;r+=2){var i=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?a-4==r?i[3]={x:+t[0],y:+t[1]}:a-2==r&&(i[2]={x:+t[0],y:+t[1]},i[3]={x:+t[2],y:+t[3]}):i[0]={x:+t[a-2],y:+t[a-1]}:a-4==r?i[3]=i[2]:r||(i[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-i[0].x+6*i[1].x+i[2].x)/6,(-i[0].y+6*i[1].y+i[2].y)/6,(i[1].x+6*i[2].x-i[3].x)/6,(i[1].y+6*i[2].y-i[3].y)/6,i[2].x,i[2].y])}return n}function Yt(t,e,n,r,a){var i;if(null==a&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=a){var s=Math.PI/180,o=t+n*Math.cos(-r*s),u=t+n*Math.cos(-a*s);i=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(a-r>180),0,u,e+n*Math.sin(-a*s)]]}else i=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return i}function qt(t){if(!(t=zt(t))||!t.length)return[["M",0,0]];var e=[],n=0,r=0,a=0,i=0,s=0,o=t.length,u=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase();"M"===t[0][0]&&(n=+t[0][1],r=+t[0][2],a=n,i=r,s++,e[0]=["M",n,r]);for(var l=function(s){var o=void 0,l=t[s],p=l[0];if(e.push(o=[]),p!==p.toUpperCase())switch(o[0]=p.toUpperCase(),o[0]){case"A":o[1]=l[1],o[2]=l[2],o[3]=l[3],o[4]=l[4],o[5]=l[5],o[6]=+l[6]+n,o[7]=+l[7]+r;break;case"V":o[1]=+l[1]+r;break;case"H":o[1]=+l[1]+n;break;case"R":for(var c=[n,r].concat(l.slice(1)),h=2,f=c.length;h0&&(o=Math.max(o,Math.ceil(n/e)));for(var u=0;ue;)a=Gt(r,a,.5),t.splice(n+1,0,a)}function le(t,e){var n,r;if("string"==typeof t){var a=te(t,e);t=a.ring,r=a.skipBisect}else if(!Array.isArray(t))throw new TypeError("Invalid path value");if(!pe(n=t.slice(0)))throw new TypeError("Invalid path value");return n.length>1&&Jt(n[0],n[n.length-1])&&n.pop(),se(n)>0&&n.reverse(),!r&&e&&$t(e)&&e>0&&ue(n,e),n}function pe(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&$t(t[0])&&$t(t[1])}))}function ce(t,e,n){var r=le(t,n=n||f.morphPrecision),a=le(e,n),i=r.length-a.length;return oe(r,i<0?-1*i:0),oe(a,i>0?i:0),ae(r,a),[r,a]}var he={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?V(e):null,a=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(a,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(a,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var a=e.pathArray,i=n.pathArray,s=i.length;t.setAttribute("d",1===r?n.original:"M"+Lt(a,i,s,r).join("L")+"Z")})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=ce(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},fe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Lt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:he,Util:{INVALID_INPUT:"Invalid path value",isFiniteNumber:$t,distance:Wt,pointAlong:Gt,samePoint:Jt,pathToAbsolute:qt,pathToString:Kt,pathStringToRing:te,exactRing:ee,approximateRing:ne,measure:re,rotateRing:ae,polygonLength:ie,polygonArea:se,addPoints:oe,bisect:ue,normalizeRing:le,validRing:pe,getInterpolationPoints:ce}};for(var de in x.SVGMorph=fe,x){var ve=x[de];x[de]=new j(ve)}var ge={Animation:j,Components:x,Tween:H,fromTo:function(t,e,n,r){return r=r||{},new P.tween(V(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new P.tween(V(t),e,e,n)},TweenCollection:F,allFromTo:function(t,e,n,r){return r=r||{},new F(V(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new F(V(t,!0),e,e,n)},Objects:b,Util:w,Easing:L,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:T,Selector:V,Version:"2.0.13"};export default ge; diff --git a/dist/kute.js b/dist/kute.js index 6b176d5..95da196 100644 --- a/dist/kute.js +++ b/dist/kute.js @@ -21,7 +21,7 @@ var Interpolate = {}; - var onStart$1 = {}; + var onStart = {}; var Time = {}; Time.now = self.performance.now.bind(self.performance); @@ -42,11 +42,11 @@ if (!Tweens.length && Tick) { cancelAnimationFrame(Tick); Tick = null; - for (var obj in onStart$1) { - if (typeof (onStart$1[obj]) === 'function') { + for (var obj in onStart) { + if (typeof (onStart[obj]) === 'function') { KUTE[obj] && (delete KUTE[obj]); } else { - for (var prop in onStart$1[obj]) { + for (var prop in onStart[obj]) { KUTE[prop] && (delete KUTE[prop]); } } @@ -92,7 +92,7 @@ prepareProperty: prepareProperty, prepareStart: prepareStart, crossCheck: crossCheck, - onStart: onStart$1, + onStart: onStart, onComplete: onComplete, linkProperty: linkProperty }; @@ -112,7 +112,7 @@ function removeAll () { Tweens.length = 0; } - function linkInterpolation$1() { + function linkInterpolation() { var this$1 = this; var loop = function ( component ) { var componentLink = linkProperty[component]; @@ -149,7 +149,7 @@ getAll: getAll, removeAll: removeAll, stop: stop, - linkInterpolation: linkInterpolation$1 + linkInterpolation: linkInterpolation }; function getInlineStyle(el) { @@ -352,6 +352,19 @@ } } + function queueStart(){ + for (var obj in onStart) { + if (typeof (onStart[obj]) === 'function') { + onStart[obj].call(this,obj); + } else { + for (var prop in onStart[obj]) { + onStart[obj][prop].call(this,prop); + } + } + } + linkInterpolation.call(this); + } + var TweenBase = function TweenBase(targetElement, startObject, endObject, options){ this.element = targetElement; this.playing = false; @@ -369,8 +382,8 @@ if( !(internalOption in this ) ) { this[internalOption] = options[op]; } } var easingFnName = this._easing.name; - if (!onStart$1[easingFnName]) { - onStart$1[easingFnName] = function(prop){ + if (!onStart[easingFnName]) { + onStart[easingFnName] = function(prop){ !KUTE[prop] && prop === this._easing.name && (KUTE[prop] = this._easing); }; } @@ -385,16 +398,7 @@ if (this._onStart) { this._onStart.call(this); } - for (var obj in onStart$1) { - if (typeof (onStart$1[obj]) === 'function') { - onStart$1[obj].call(this,obj); - } else { - for (var prop in onStart$1[obj]) { - onStart$1[obj][prop].call(this,prop); - } - } - } - linkInterpolation$1.call(this); + queueStart.call(this); this._startFired = true; } !Tick && Ticker(); @@ -540,16 +544,7 @@ if (this._onResume !== undefined) { this._onResume.call(this); } - for (var obj in onStart) { - if (typeof (onStart[obj]) === 'function') { - onStart[obj].call(this,obj); - } else { - for (var prop in onStart[obj]) { - onStart[obj][prop].call(this,prop); - } - } - } - linkInterpolation.call(this); + queueStart.call(this); this._startTime += KUTE.Time() - this._pauseTime; add(this); !Tick && Ticker(); @@ -714,7 +709,7 @@ Animation.prototype.setComponent = function setComponent (Component){ var propertyInfo = this; var ComponentName = Component.component; - var Functions = { prepareProperty: prepareProperty, prepareStart: prepareStart, onStart: onStart$1, onComplete: onComplete, crossCheck: crossCheck }; + var Functions = { prepareProperty: prepareProperty, prepareStart: prepareStart, onStart: onStart, onComplete: onComplete, crossCheck: crossCheck }; var Category = Component.category; var Property = Component.property; var Length = Component.properties && Component.properties.length || Component.subProperties && Component.subProperties.length; @@ -942,7 +937,7 @@ if ( currentValue !== null && regex.test(currentValue) ) { var unit = trueDimension(currentValue).u || trueDimension(attrObj[p]).u; var suffix = /%/.test(unit) ? '_percent' : ("_" + unit); - onStart$1[ComponentName][prop+suffix] = function(tp) { + onStart[ComponentName][prop+suffix] = function(tp) { if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) { attributes[tp] = function (elem, p, a, b, v) { var _p = p.replace(suffix,''); @@ -952,7 +947,7 @@ }; attributesObject[prop+suffix] = trueDimension(attrObj[p]); } else if ( !regex.test(attrObj[p]) || currentValue === null || currentValue !== null && !regex.test(currentValue) ) { - onStart$1[ComponentName][prop] = function(tp) { + onStart[ComponentName][prop] = function(tp) { if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) { attributes[tp] = function (elem, oneAttr, a, b, v) { elem.setAttribute(oneAttr, (numbers(a,b,v) * 1000 >> 0) / 1000 ); @@ -962,7 +957,7 @@ attributesObject[prop] = parseFloat(attrObj[p]); } } else { - onStart$1[ComponentName][prop] = function(tp) { + onStart[ComponentName][prop] = function(tp) { if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) { attributes[tp] = function (elem, oneAttr, a, b, v) { elem.setAttribute(oneAttr, colors(a,b,v)); @@ -1468,30 +1463,45 @@ } } - var INVALID_INPUT = 'Invalid path value'; - function isFiniteNumber(number) { - return typeof number === "number" && isFinite(number); + function clonePath(pathArray){ + return pathArray.map(function (x) { return Array.isArray(x) ? clonePath(x) : !isNaN(+x) ? +x : x; } ) } - function distance(a, b) { - return Math.sqrt( - (a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1]) - ); + + var SVGPCOps = { + decimals:3, + round:1 + }; + + function roundPath(pathArray) { + return pathArray.map( function (seg) { return seg.map(function (c,i) { + var nr = +c, dc = Math.pow(10,SVGPCOps.decimals); + return i ? (nr % 1 === 0 ? nr : (nr*dc>>0)/dc) : c + } + ); }) } - function pointAlong(a, b, pct) { - return [a[0] + (b[0] - a[0]) * pct, a[1] + (b[1] - a[1]) * pct]; - } - function samePoint(a, b) { - return distance(a, b) < 1e-9; + + function SVGPathArray(pathString){ + this.segments = []; + this.isClosed = 0; + this.isAbsolute = 0; + this.pathValue = pathString; + this.max = pathString.length; + this.index = 0; + this.param = 0.0; + this.segmentStart = 0; + this.data = []; + this.err = ''; + return this } + var paramCounts = { a: 7, c: 6, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, z: 0 }; - var SPECIAL_SPACES = [ - 0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, - 0x2007, 0x2008, 0x2009, 0x200A, 0x202F, 0x205F, 0x3000, 0xFEFF - ]; function isSpace(ch) { + var specialSpaces = [ + 0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, + 0x2007, 0x2008, 0x2009, 0x200A, 0x202F, 0x205F, 0x3000, 0xFEFF ]; return (ch === 0x0A) || (ch === 0x0D) || (ch === 0x2028) || (ch === 0x2029) || (ch === 0x20) || (ch === 0x09) || (ch === 0x0B) || (ch === 0x0C) || (ch === 0xA0) || - (ch >= 0x1680 && SPECIAL_SPACES.indexOf(ch) >= 0); + (ch >= 0x1680 && specialSpaces.indexOf(ch) >= 0); } function isCommand(code) { switch (code | 0x20) { @@ -1522,23 +1532,13 @@ code === 0x2D || code === 0x2E; } - function State(path) { - this.index = 0; - this.path = path; - this.max = path.length; - this.result = []; - this.param = 0.0; - this.err = ''; - this.segmentStart = 0; - this.data = []; - } function skipSpaces(state) { - while (state.index < state.max && isSpace(state.path.charCodeAt(state.index))) { + while (state.index < state.max && isSpace(state.pathValue.charCodeAt(state.index))) { state.index++; } } function scanFlag(state) { - var ch = state.path.charCodeAt(state.index); + var ch = state.pathValue.charCodeAt(state.index); if (ch === 0x30) { state.param = 0; state.index++; @@ -1549,7 +1549,7 @@ state.index++; return; } - state.err = "KUTE.js - " + INVALID_INPUT; + state.err = 'SvgPath: arc flag can be 0 or 1 only (at pos ' + state.index + ')'; } function scanParam(state) { var start = state.index, @@ -1561,81 +1561,78 @@ hasDot = false, ch; if (index >= max) { - state.err = "KUTE.js - " + INVALID_INPUT; + state.err = 'SvgPath: missed param (at pos ' + index + ')'; return; } - ch = state.path.charCodeAt(index); + ch = state.pathValue.charCodeAt(index); if (ch === 0x2B || ch === 0x2D) { index++; - ch = (index < max) ? state.path.charCodeAt(index) : 0; + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; } if (!isDigit(ch) && ch !== 0x2E) { - state.err = "KUTE.js - " + INVALID_INPUT; + state.err = 'SvgPath: param should start with 0..9 or `.` (at pos ' + index + ')'; return; } if (ch !== 0x2E) { zeroFirst = (ch === 0x30); index++; - ch = (index < max) ? state.path.charCodeAt(index) : 0; + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; if (zeroFirst && index < max) { if (ch && isDigit(ch)) { - state.err = "KUTE.js - " + INVALID_INPUT; + state.err = 'SvgPath: numbers started with `0` such as `09` are illegal (at pos ' + start + ')'; return; } } - while (index < max && isDigit(state.path.charCodeAt(index))) { + while (index < max && isDigit(state.pathValue.charCodeAt(index))) { index++; hasCeiling = true; } - ch = (index < max) ? state.path.charCodeAt(index) : 0; + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; } if (ch === 0x2E) { hasDot = true; index++; - while (isDigit(state.path.charCodeAt(index))) { + while (isDigit(state.pathValue.charCodeAt(index))) { index++; hasDecimal = true; } - ch = (index < max) ? state.path.charCodeAt(index) : 0; + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; } if (ch === 0x65 || ch === 0x45) { if (hasDot && !hasCeiling && !hasDecimal) { - state.err = "KUTE.js - " + INVALID_INPUT; + state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; return; } index++; - ch = (index < max) ? state.path.charCodeAt(index) : 0; + ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; if (ch === 0x2B || ch === 0x2D) { index++; } - if (index < max && isDigit(state.path.charCodeAt(index))) { - while (index < max && isDigit(state.path.charCodeAt(index))) { + if (index < max && isDigit(state.pathValue.charCodeAt(index))) { + while (index < max && isDigit(state.pathValue.charCodeAt(index))) { index++; } } else { - state.err = "KUTE.js - " + INVALID_INPUT; + state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; return; } } state.index = index; - state.param = parseFloat(state.path.slice(start, index)) + 0.0; + state.param = parseFloat(state.pathValue.slice(start, index)) + 0.0; } function finalizeSegment(state) { - var cmd, cmdLC; - cmd = state.path[state.segmentStart]; - cmdLC = cmd.toLowerCase(); - var params = state.data; + var cmd = state.pathValue[state.segmentStart], cmdLC = cmd.toLowerCase(), params = state.data; if (cmdLC === 'm' && params.length > 2) { - state.result.push([ cmd, params[0], params[1] ]); + state.segments.push([ cmd, params[0], params[1] ]); params = params.slice(2); cmdLC = 'l'; cmd = (cmd === 'm') ? 'l' : 'L'; } if (cmdLC === 'r') { - state.result.push([ cmd ].concat(params)); + state.segments.push([ cmd ].concat(params)); } else { while (params.length >= paramCounts[cmdLC]) { - state.result.push([ cmd ].concat(params.splice(0, paramCounts[cmdLC]))); + state.segments.push([ cmd ].concat(params.splice(0, paramCounts[cmdLC]))); if (!paramCounts[cmdLC]) { break; } @@ -1645,17 +1642,18 @@ function scanSegment(state) { var max = state.max, cmdCode, is_arc, comma_found, need_params, i; state.segmentStart = state.index; - cmdCode = state.path.charCodeAt(state.index); + cmdCode = state.pathValue.charCodeAt(state.index); is_arc = isArc(cmdCode); if (!isCommand(cmdCode)) { - state.err = "KUTE.js - " + INVALID_INPUT; + state.err = 'SvgPath: bad command ' + state.pathValue[state.index] + ' (at pos ' + state.index + ')'; return; } - need_params = paramCounts[state.path[state.index].toLowerCase()]; + need_params = paramCounts[state.pathValue[state.index].toLowerCase()]; state.index++; skipSpaces(state); state.data = []; if (!need_params) { + state.isClosed = 1; finalizeSegment(state); return; } @@ -1670,7 +1668,7 @@ state.data.push(state.param); skipSpaces(state); comma_found = false; - if (state.index < max && state.path.charCodeAt(state.index) === 0x2C) { + if (state.index < max && state.pathValue.charCodeAt(state.index) === 0x2C) { state.index++; skipSpaces(state); comma_found = true; @@ -1682,148 +1680,250 @@ if (state.index >= state.max) { break; } - if (!isDigitStart(state.path.charCodeAt(state.index))) { + if (!isDigitStart(state.pathValue.charCodeAt(state.index))) { break; } } finalizeSegment(state); } - function pathParse(svgPath) { - var state = new State(svgPath), max = state.max; + function parsePathString(pathString) { + if ( Array.isArray(pathString) ) { + return clonePath(pathString) + } + var state = new SVGPathArray(pathString), max = state.max; skipSpaces(state); while (state.index < max && !state.err.length) { scanSegment(state); } if (state.err.length) { - state.result = []; - } else if (state.result.length) { - if ('mM'.indexOf(state.result[0][0]) < 0) { - state.err = "KUTE.js - " + INVALID_INPUT; - state.result = []; + state.segments = []; + } else if (state.segments.length) { + if ('mM'.indexOf(state.segments[0][0]) < 0) { + state.err = 'SvgPath: string should start with `M` or `m`'; + state.segments = []; } else { - state.result[0][0] = 'M'; + state.segments[0][0] = 'M'; } } - return { - err: state.err, - segments: state.result - }; + return roundPath(state.segments) } - var SvgPath = function SvgPath(path){ - if (!(this instanceof SvgPath)) { return new SvgPath(path); } - var pstate = pathParse(path); - this.segments = pstate.segments; - this.err = pstate.err; - }; - SvgPath.prototype.iterate = function iterate (iterator) { - var segments = this.segments, - replacements = {}, - needReplace = false, - lastX = 0, - lastY = 0, - countourStartX = 0, - countourStartY = 0, - newSegments; - segments.map( function (s,index) { - var res = iterator(s, index, lastX, lastY); - if (Array.isArray(res)) { - replacements[index] = res; - needReplace = true; - } - var isRelative = (s[0] === s[0].toLowerCase()); - switch (s[0]) { - case 'm': - case 'M': - lastX = s[1] + (isRelative ? lastX : 0); - lastY = s[2] + (isRelative ? lastY : 0); - countourStartX = lastX; - countourStartY = lastY; - return; - case 'h': - case 'H': - lastX = s[1] + (isRelative ? lastX : 0); - return; - case 'v': - case 'V': - lastY = s[1] + (isRelative ? lastY : 0); - return; - case 'z': - case 'Z': - lastX = countourStartX; - lastY = countourStartY; - return; - default: - lastX = s[s.length - 2] + (isRelative ? lastX : 0); - lastY = s[s.length - 1] + (isRelative ? lastY : 0); - } - }); - if (!needReplace) { return this; } - newSegments = []; - segments.map(function (s,i){ - if (typeof replacements[i] !== 'undefined') { - replacements[i].map(function (r){ - newSegments.push(r); - }); + + function catmullRom2bezier(crp, z) { + var d = []; + for (var i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) { + var p = [ + {x: +crp[i - 2], y: +crp[i - 1]}, + {x: +crp[i], y: +crp[i + 1]}, + {x: +crp[i + 2], y: +crp[i + 3]}, + {x: +crp[i + 4], y: +crp[i + 5]} + ]; + if (z) { + if (!i) { + p[0] = {x: +crp[iLen - 2], y: +crp[iLen - 1]}; + } else if (iLen - 4 == i) { + p[3] = {x: +crp[0], y: +crp[1]}; + } else if (iLen - 2 == i) { + p[2] = {x: +crp[0], y: +crp[1]}; + p[3] = {x: +crp[2], y: +crp[3]}; + } } else { - newSegments.push(s); + if (iLen - 4 == i) { + p[3] = p[2]; + } else if (!i) { + p[0] = {x: +crp[i], y: +crp[i + 1]}; + } } - }); - this.segments = newSegments; - return this; - }; - SvgPath.prototype.abs = function abs () { - this.iterate(function (s, index, x, y) { - var name = s[0], - nameUC = name.toUpperCase(), - i; - if (name === nameUC) { return; } - s[0] = nameUC; - switch (name) { - case 'v': - s[1] += y; - return; - case 'a': - s[6] += x; - s[7] += y; - return; - default: - for (i = 1; i < s.length; i++) { - s[i] += i % 2 ? x : y; - } + d.push([ + "C", + (-p[0].x + 6 * p[1].x + p[2].x) / 6, + (-p[0].y + 6 * p[1].y + p[2].y) / 6, + (p[1].x + 6 * p[2].x - p[3].x) / 6, + (p[1].y + 6*p[2].y - p[3].y) / 6, + p[2].x, + p[2].y + ]); + } + return d + } + + function ellipsePath(x, y, rx, ry, a) { + if (a == null && ry == null) { + ry = rx; + } + x = +x; + y = +y; + rx = +rx; + ry = +ry; + var res; + if (a != null) { + var rad = Math.PI / 180, + x1 = x + rx * Math.cos(-ry * rad), + x2 = x + rx * Math.cos(-a * rad), + y1 = y + rx * Math.sin(-ry * rad), + y2 = y + rx * Math.sin(-a * rad); + res = [["M", x1, y1], ["A", rx, rx, 0, +(a - ry > 180), 0, x2, y2]]; + } else { + res = [ + ["M", x, y], + ["m", 0, -ry], + ["a", rx, ry, 0, 1, 1, 0, 2 * ry], + ["a", rx, ry, 0, 1, 1, 0, -2 * ry], + ["z"] + ]; + } + return res; + } + + function pathToAbsolute(pathArray) { + pathArray = parsePathString(pathArray); + if (!pathArray || !pathArray.length) { + return [["M", 0, 0]]; + } + var res = [], x = 0, y = 0, mx = 0, my = 0, start = 0, + ii = pathArray.length, + crz = pathArray.length === 3 && + pathArray[0][0] === "M" && + pathArray[1][0].toUpperCase() === "R" && + pathArray[2][0].toUpperCase() === "Z"; + if (pathArray[0][0] === "M") { + x = +pathArray[0][1]; + y = +pathArray[0][2]; + mx = x; + my = y; + start++; + res[0] = ["M", x, y]; + } + var loop = function ( i ) { + var r = (void 0), pa = pathArray[i], pa0 = pa[0]; + res.push(r = []); + if (pa0 !== pa0.toUpperCase()) { + r[0] = pa0.toUpperCase(); + switch (r[0]) { + case "A": + r[1] = pa[1]; + r[2] = pa[2]; + r[3] = pa[3]; + r[4] = pa[4]; + r[5] = pa[5]; + r[6] = +pa[6] + x; + r[7] = +pa[7] + y; + break; + case "V": + r[1] = +pa[1] + y; + break; + case "H": + r[1] = +pa[1] + x; + break; + case "R": + var dots$1 = [x, y].concat(pa.slice(1)); + for (var j = 2, jj = dots$1.length; j < jj; j++) { + dots$1[j] = +dots$1[j] + x; + dots$1[++j] = +dots$1[j] + y; + } + res.pop(); + res = res.concat(catmullRom2bezier(dots$1, crz)); + break; + case "O": + res.pop(); + dots$1 = ellipsePath(x, y, +pa[1], +pa[2]); + dots$1.push(dots$1[0]); + res = res.concat(dots$1); + break; + case "U": + res.pop(); + res = res.concat(ellipsePath(x, y, pa[1], pa[2], pa[3])); + r = ["U"].concat(res[res.length - 1].slice(-2)); + break; + case "M": + mx = +pa[1] + x; + my = +pa[2] + y; + default: + for (var j$1 = 1, jj$1 = pa.length; j$1 < jj$1; j$1++) { + r[j$1] = +pa[j$1] + ((j$1 % 2) ? x : y); + } + } + } else if (pa0 === "R") { + dots = [x, y].concat(pa.slice(1)); + res.pop(); + res = res.concat(catmullRom2bezier(dots, crz)); + r = ["R"].concat(pa.slice(-2)); + } else if (pa0 === "O") { + res.pop(); + dots = ellipsePath(x, y, +pa[1], +pa[2]); + dots.push(dots[0]); + res = res.concat(dots); + } else if (pa0 === "U") { + res.pop(); + res = res.concat(ellipsePath(x, y, +pa[1], +pa[2], +pa[3])); + r = ["U"].concat(res[res.length - 1].slice(-2)); + } else { + pa.map(function (k){ return r.push(k); }); } - }, true); - return this; - }; - SvgPath.prototype.toString = function toString () { - var this$1 = this; - var elements = [], skipCmd, cmd; - this.segments.map( function (s,i) { - cmd = s[0]; - skipCmd = i > 0 && cmd !== 'm' && cmd !== 'M' && cmd === this$1.segments[i - 1][0]; - elements = elements.concat(skipCmd ? s.slice(1) : s); - }); - return elements.join(' ') - .replace(/ ?([achlmqrstvz]) ?/gi, '$1') - .replace(/ \-/g, '-') - .replace(/zm/g, 'z m'); - }; - function split(parsed) { - return parsed - .toString() - .split("M") - .map(function (d, i) { - d = d.trim(); - return i && d ? "M" + d : d; - }) - .filter(function (d) { return d; }); + pa0 = pa0.toUpperCase(); + if (pa0 !== "O") { + switch (r[0]) { + case "Z": + x = mx; + y = my; + break; + case "H": + x = +r[1]; + break; + case "V": + y = +r[1]; + break; + case "M": + mx = +r[r.length - 2]; + my = +r[r.length - 1]; + default: + x = +r[r.length - 2]; + y = +r[r.length - 1]; + } + } + }; + for (var i = start; i < ii; i++) loop( i ); + return roundPath(res) + } + + function pathToString(pathArray) { + return pathArray.map( function (c) { + if (typeof c === 'string') { + return c + } else { + return c.shift() + c.join(',') + } + }).join(' ') + } + + function splitPath(pathString) { + return pathString + .replace( /(m|M)/g, "|$1") + .split('|') + .map(function (s){ return s.trim(); }) + .filter(function (s){ return s; }) + } + + var INVALID_INPUT = 'Invalid path value'; + function isFiniteNumber(number) { + return typeof number === "number" && isFinite(number); + } + function distance(a, b) { + return Math.sqrt( + (a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1]) + ); + } + function pointAlong(a, b, pct) { + return [a[0] + (b[0] - a[0]) * pct, a[1] + (b[1] - a[1]) * pct]; + } + function samePoint(a, b) { + return distance(a, b) < 1e-9; } function pathStringToRing(str, maxSegmentLength) { - var parsed = new SvgPath(str).abs(); + var parsed = pathToAbsolute(str); return exactRing(parsed) || approximateRing(parsed, maxSegmentLength); } - function exactRing(parsed) { - var segments = parsed.segments || [], - ring = []; + function exactRing(segments) { + var ring = []; if (!segments.length || segments[0][0] !== "M") { return false; } @@ -1847,7 +1947,8 @@ return ring.length ? { ring: ring } : false; } function approximateRing(parsed, maxSegmentLength) { - var ringPath = split(parsed)[0], ring = [], len, testPath, numPoints = 3; + var ringPath = splitPath(pathToString(parsed))[0], + ring = [], len, testPath, numPoints = 3; if (!ringPath) { throw new TypeError(INVALID_INPUT); } @@ -2038,9 +2139,11 @@ defaultOptions: {morphPrecision : 10, morphIndex:0}, functions: svgMorphFunctions, Util: { - INVALID_INPUT: INVALID_INPUT,isFiniteNumber: isFiniteNumber,distance: distance,pointAlong: pointAlong,samePoint: samePoint,paramCounts: paramCounts,SPECIAL_SPACES: SPECIAL_SPACES,isSpace: isSpace,isCommand: isCommand,isArc: isArc,isDigit: isDigit, - isDigitStart: isDigitStart,State: State,skipSpaces: skipSpaces,scanFlag: scanFlag,scanParam: scanParam,finalizeSegment: finalizeSegment,scanSegment: scanSegment,pathParse: pathParse,SvgPath: SvgPath,split: split,pathStringToRing: pathStringToRing, - exactRing: exactRing,approximateRing: approximateRing,measure: measure,rotateRing: rotateRing,polygonLength: polygonLength,polygonArea: polygonArea,addPoints: addPoints,bisect: bisect,normalizeRing: normalizeRing,validRing: validRing,getInterpolationPoints: getInterpolationPoints} + INVALID_INPUT: INVALID_INPUT,isFiniteNumber: isFiniteNumber,distance: distance,pointAlong: pointAlong,samePoint: samePoint, + pathToAbsolute: pathToAbsolute,pathToString: pathToString,pathStringToRing: pathStringToRing, + exactRing: exactRing,approximateRing: approximateRing,measure: measure,rotateRing: rotateRing,polygonLength: polygonLength,polygonArea: polygonArea, + addPoints: addPoints,bisect: bisect,normalizeRing: normalizeRing,validRing: validRing,getInterpolationPoints: getInterpolationPoints + } }; Components.SVGMorph = svgMorph; diff --git a/dist/kute.min.js b/dist/kute.min.js index ddfb0b1..437a1a4 100644 --- a/dist/kute.min.js +++ b/dist/kute.min.js @@ -1,2 +1,2 @@ // KUTE.js Standard v2.0.13 | thednp © 2020 | MIT-License -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var L={},P={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}L.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:L.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return i[u]||(i[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};U.prototype.start=function(e){if(S(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},U.prototype.stop=function(){return this.playing&&(x(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},U.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},U.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},U.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},U.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},L.tween=U,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var F=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(A.call(this,i,"end"),this._resetStart?this.valuesStart=r:A.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,M.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){if(this.paused&&this.playing){for(var e in this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),onStart)if("function"==typeof onStart[e])onStart[e].call(this,e);else for(var n in onStart[e])onStart[e][n].call(this,n);linkInterpolation.call(this),this._startTime+=t.Time()-this._pauseTime,S(this),!s&&o()}return this},n.prototype.pause=function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(U);L.tween=F;var N=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new L.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};N.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},N.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},N.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},N.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},N.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof N)e.chain(t.tweens);else{if(!(t instanceof L.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},N.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},N.prototype.removeTweens=function(){this.tweens=[]},N.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t){try{t.component in p?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*V(n,r,i)>>0)/10:V(n,r,i)>>0)+"px"})}H.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(p[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var c in n)if(c in t.functions)if("function"==typeof t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][a||s]&&(n[c][e][a||s]=t.functions[c]);else for(var w in t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][w]&&(n[c][e][w]=t.functions[c][w]);if(t.Interpolate){for(var _ in t.Interpolate){var S=t.Interpolate[_];if("function"!=typeof S||r[_])for(var x in S)"function"!=typeof S[x]||r[_]||(r[_]=S[x]);else r[_]=S}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!b[T]&&(b[T]=t.Util[T]);return this};var Q=["top","left","width","height"],R={};Q.map((function(t){return R[t]=z}));var X={component:"essentialBoxModel",category:"boxModel",properties:Q,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:V},functions:{prepareStart:function(t){return I(this.element,t)||h[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:D}};function B(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function K(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?V(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*V(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}_.BoxModelEssential=X;var Y=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Z={};Y.map((function(t){Z[t]="#000"}));var $={};Y.map((function(t){return $[t]=q}));var W={component:"colorProperties",category:"colors",properties:Y,defaultValues:Z,Interpolate:{numbers:V,colors:K},functions:{prepareStart:function(t,e){return I(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};_.ColorProperties=W;var G={},J=["fill","stroke","stop-color"];function tt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var et={prepareStart:function(t,e){var n={};for(var r in e){var i=tt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=J.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=tt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(J.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,K(n,r,i))})},n[a]=B(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;i.htmlAttributes[a+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){var a=e.replace(l,"");t.setAttribute(a,(1e3*V(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+l]=D(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*V(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=G)}}},nt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:V,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:D}};_.HTMLAttributes=nt;var rt={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*V(n,r,i)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:V},functions:rt};_.OpacityProperty=it;var at=String("abcdefghijklmnopqrstuvwxyz").split(""),st=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ot=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ut=String("0123456789").split(""),lt=at.concat(st,ut),ct=lt.concat(ot),pt={alpha:at,upper:st,symbols:ot,numeric:ut,alphanumeric:lt,all:ct},ht={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in pt?pt[n]:n&&n.length?n:pt[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=V(e,n,r)>>0})}};function ft(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function dt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,c=void 0;s>0)/1e3+n+")"}function mt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function yt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function bt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}_.TextWriteProperties=vt;var _t={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=C(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},i=[],a=[],s=[],o=["translate3d","translate","rotate3d","skew"];for(var u in e){var l="object"==typeof e[u]&&e[u].length?e[u].map((function(t){return parseInt(t)})):parseInt(e[u]);if(o.includes(u))r["translate"===u||"rotate"===u?u+"3d":u]="skew"===u?l.length?[l[0]||0,l[1]||0]:[l||0,0]:"translate"===u?l.length?[l[0]||0,l[1]||0,l[2]||0]:[l||0,0,0]:[l[0]||0,l[1]||0,l[2]||0];else if(/[XYZ]/.test(u)){for(var c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="skew"===c?2:3,f="translate"===c?i:"rotate"===c?a:"skew"===c?s:{},d=0;d>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:wt,skew:bt}};function St(t,e){return parseFloat(t)/100*e}function xt(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Tt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*V(e.s,n.s,r)>>0)/100,s=(100*V(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ot={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:V},functions:kt,Util:{getRectLength:xt,getPolyLength:Tt,getLineLength:Et,getCircleLength:Ct,getEllipseLength:It,getTotalLength:At,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Mt,percent:St}};function Lt(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}_.SVGDraw=Ot;var Pt="Invalid path value";function jt(t){return"number"==typeof t&&isFinite(t)}function Ut(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Ft(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Nt(t,e){return Ut(t,e)<1e-9}var Ht={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Dt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Vt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Dt.indexOf(t)>=0}function zt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Qt(t){return 97==(32|t)}function Rt(t){return t>=48&&t<=57}function Xt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Bt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function Kt(t){for(;t.index=i)t.err="KUTE.js - "+Pt;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=Ht[n]&&(t.result.push([e].concat(r.splice(0,Ht[n]))),Ht[n]););}function $t(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Qt(e=t.path.charCodeAt(t.index)),zt(e))if(i=Ht[t.path[t.index].toLowerCase()],t.index++,Kt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Yt(t):qt(t),t.err.length)return;t.data.push(t.param),Kt(t),r=!1,t.index=t.max)break;if(!Xt(t.path.charCodeAt(t.index)))break}}Zt(t)}else Zt(t);else t.err="KUTE.js - "+Pt}function Wt(t){var e=new Bt(t),n=e.max;for(Kt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Ft(r,i,.5),t.splice(n+1,0,i)}function le(t,e){var n,r;if("string"==typeof t){var i=te(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Pt);if(!ce(n=t.slice(0)))throw new TypeError(Pt);return n.length>1&&Nt(n[0],n[n.length-1])&&n.pop(),se(n)>0&&n.reverse(),!r&&e&&jt(e)&&e>0&&ue(n,e),n}function ce(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&jt(t[0])&&jt(t[1])}))}function pe(t,e,n){var r=le(t,n=n||f.morphPrecision),i=le(e,n),a=r.length-i.length;return oe(r,a<0?-1*a:0),oe(i,a>0?a:0),ie(r,i),[r,i]}Gt.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},Gt.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var he={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i=e.pathArray,a=n.pathArray,s=a.length;t.setAttribute("d",1===r?n.original:"M"+Lt(i,a,s,r).join("L")+"Z")})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=pe(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},fe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Lt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:he,Util:{INVALID_INPUT:Pt,isFiniteNumber:jt,distance:Ut,pointAlong:Ft,samePoint:Nt,paramCounts:Ht,SPECIAL_SPACES:Dt,isSpace:Vt,isCommand:zt,isArc:Qt,isDigit:Rt,isDigitStart:Xt,State:Bt,skipSpaces:Kt,scanFlag:qt,scanParam:Yt,finalizeSegment:Zt,scanSegment:$t,pathParse:Wt,SvgPath:Gt,split:Jt,pathStringToRing:te,exactRing:ee,approximateRing:ne,measure:re,rotateRing:ie,polygonLength:ae,polygonArea:se,addPoints:oe,bisect:ue,normalizeRing:le,validRing:ce,getInterpolationPoints:pe}};for(var de in _.SVGMorph=fe,_){var ve=_[de];_[de]=new H(ve)}return{Animation:H,Components:_,Tween:F,fromTo:function(t,e,n,r){return r=r||{},new L.tween(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new L.tween(j(t),e,e,n)},TweenCollection:N,allFromTo:function(t,e,n,r){return r=r||{},new N(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new N(j(t,!0),e,e,n)},Objects:w,Util:b,Easing:P,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:E,Selector:j,Version:"2.0.13"}})); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var P={},L={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function V(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}function U(){for(var t in i)if("function"==typeof i[t])i[t].call(this,t);else for(var e in i[t])i[t][e].call(this,e);C.call(this)}P.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var N=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:P.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return i[u]||(i[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};N.prototype.start=function(e){return _(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,this._startFired||(this._onStart&&this._onStart.call(this),U.call(this),this._startFired=!0),!s&&o(),this},N.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},N.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},N.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},N.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},N.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},P.tween=N,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var H=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(M.call(this,i,"end"),this._resetStart?this.valuesStart=r:M.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,A.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),U.call(this),this._startTime+=t.Time()-this._pauseTime,_(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(N);P.tween=H;var j=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new P.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};j.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},j.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},j.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},j.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},j.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof j)e.chain(t.tweens);else{if(!(t instanceof P.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},j.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},j.prototype.removeTweens=function(){this.tweens=[]},j.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var F=function(t){try{t.component in c?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function R(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*D(n,r,i)>>0)/10:D(n,r,i)>>0)+"px"})}F.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(c[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][a||s]&&(n[p][e][a||s]=t.functions[p]);else for(var b in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][b]&&(n[p][e][b]=t.functions[p][b]);if(t.Interpolate){for(var x in t.Interpolate){var _=t.Interpolate[x];if("function"!=typeof _||r[x])for(var S in _)"function"!=typeof _[S]||r[x]||(r[x]=_[S]);else r[x]=_}y[e]=t.Interpolate}if(t.Util)for(var C in t.Util)!w[C]&&(w[C]=t.Util[C]);return this};var X=["top","left","width","height"],B={};X.map((function(t){return B[t]=Q}));var z={component:"essentialBoxModel",category:"boxModel",properties:X,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:D},functions:{prepareStart:function(t){return I(this.element,t)||h[t]},prepareProperty:function(t,e){var n=R(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:B},Util:{trueDimension:R}};function Z(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function Y(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?D(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*D(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n,r,i)})}x.BoxModelEssential=z;var K=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],$={};K.map((function(t){$[t]="#000"}));var W={};K.map((function(t){return W[t]=q}));var G={component:"colorProperties",category:"colors",properties:K,defaultValues:$,Interpolate:{numbers:D,colors:Y},functions:{prepareStart:function(t,e){return I(this.element,t)||h[t]},prepareProperty:function(t,e){return Z(e)},onStart:W},Util:{trueColor:Z}};x.ColorProperties=G;var J={},tt=["fill","stroke","stop-color"];function et(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var n={};for(var r in e){var i=et(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=tt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=et(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(tt.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,r,i){t.setAttribute(e,Y(n,r,i))})},n[a]=Z(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=R(o).u||R(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;i.htmlAttributes[a+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,r,i){var a=e.replace(l,"");t.setAttribute(a,(1e3*D(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+l]=R(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*D(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=J)}}},rt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:D,colors:Y},functions:nt,Util:{replaceUppercase:et,trueColor:Z,trueDimension:R}};x.HTMLAttributes=rt;var it={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*D(n,r,i)>>0)/1e3})}},at={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:D},functions:it};x.OpacityProperty=at;var st=String("abcdefghijklmnopqrstuvwxyz").split(""),ot=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ut=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),lt=String("0123456789").split(""),pt=st.concat(ot,lt),ct=pt.concat(ut),ht={alpha:st,upper:ot,symbols:ut,numeric:lt,alphanumeric:pt,all:ct},ft={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in ht?ht[n]:n&&n.length?n:ht[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=D(e,n,r)>>0})}};function dt(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function vt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,p=void 0;s>0)/1e3+n+")"}function yt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function bt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function xt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}x.TextWriteProperties=gt;var _t={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=E(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},i=[],a=[],s=[],o=["translate3d","translate","rotate3d","skew"];for(var u in e){var l="object"==typeof e[u]&&e[u].length?e[u].map((function(t){return parseInt(t)})):parseInt(e[u]);if(o.includes(u))r["translate"===u||"rotate"===u?u+"3d":u]="skew"===u?l.length?[l[0]||0,l[1]||0]:[l||0,0]:"translate"===u?l.length?[l[0]||0,l[1]||0,l[2]||0]:[l||0,0,0]:[l[0]||0,l[1]||0,l[2]||0];else if(/[XYZ]/.test(u)){for(var p=u.replace(/[XYZ]/,""),c="skew"===p?p:p+"3d",h="skew"===p?2:3,f="translate"===p?i:"rotate"===p?a:"skew"===p?s:{},d=0;d>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:wt,skew:xt}};function St(t,e){return parseFloat(t)/100*e}function Ct(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Tt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*D(e.s,n.s,r)>>0)/100,s=(100*D(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Pt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:D},functions:Ot,Util:{getRectLength:Ct,getPolyLength:Tt,getLineLength:Et,getCircleLength:It,getEllipseLength:Mt,getTotalLength:At,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:kt,percent:St}};function Lt(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=Pt;var Vt=3;function Ut(t){return t.map((function(t){return t.map((function(t,e){var n=+t,r=Math.pow(10,Vt);return e?n%1==0?n:(n*r>>0)/r:t}))}))}function Nt(t){return this.segments=[],this.isClosed=0,this.isAbsolute=0,this.pathValue=t,this.max=t.length,this.index=0,this.param=0,this.segmentStart=0,this.data=[],this.err="",this}var Ht={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0};function jt(t){return t>=48&&t<=57}function Ft(t){return t>=48&&t<=57||43===t||45===t||46===t}function Rt(t){for(;t.index=5760&&[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279].indexOf(e)>=0);)t.index++;var e}function Dt(t){var e=t.pathValue.charCodeAt(t.index);return 48===e?(t.param=0,void t.index++):49===e?(t.param=1,void t.index++):void(t.err="SvgPath: arc flag can be 0 or 1 only (at pos "+t.index+")")}function Qt(t){var e,n=t.index,r=n,i=t.max,a=!1,s=!1,o=!1,u=!1;if(r>=i)t.err="SvgPath: missed param (at pos "+r+")";else if(43!==(e=t.pathValue.charCodeAt(r))&&45!==e||(e=++r2&&(t.segments.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.segments.push([e].concat(r));else for(;r.length>=Ht[n]&&(t.segments.push([e].concat(r.splice(0,Ht[n]))),Ht[n]););}function Bt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,e=t.pathValue.charCodeAt(t.index),n=97==(32|e),function(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}(e)){if(i=Ht[t.pathValue[t.index].toLowerCase()],t.index++,Rt(t),t.data=[],!i)return t.isClosed=1,void Xt(t);for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Qt(t):Dt(t),t.err.length)return;t.data.push(t.param),Rt(t),r=!1,t.index=t.max)break;if(!Ft(t.pathValue.charCodeAt(t.index)))break}}Xt(t)}else t.err="SvgPath: bad command "+t.pathValue[t.index]+" (at pos "+t.index+")"}function zt(t){if(Array.isArray(t))return function t(e){return e.map((function(e){return Array.isArray(e)?t(e):isNaN(+e)?e:+e}))}(t);var e=new Nt(t),n=e.max;for(Rt(e);e.indexr;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Yt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),u=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,u,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function qt(t){if(!(t=zt(t))||!t.length)return[["M",0,0]];var e=[],n=0,r=0,i=0,a=0,s=0,o=t.length,u=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase();"M"===t[0][0]&&(n=+t[0][1],r=+t[0][2],i=n,a=r,s++,e[0]=["M",n,r]);for(var l=function(s){var o=void 0,l=t[s],p=l[0];if(e.push(o=[]),p!==p.toUpperCase())switch(o[0]=p.toUpperCase(),o[0]){case"A":o[1]=l[1],o[2]=l[2],o[3]=l[3],o[4]=l[4],o[5]=l[5],o[6]=+l[6]+n,o[7]=+l[7]+r;break;case"V":o[1]=+l[1]+r;break;case"H":o[1]=+l[1]+n;break;case"R":for(var c=[n,r].concat(l.slice(1)),h=2,f=c.length;h0&&(o=Math.max(o,Math.ceil(n/e)));for(var u=0;ue;)i=Gt(r,i,.5),t.splice(n+1,0,i)}function le(t,e){var n,r;if("string"==typeof t){var i=te(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError("Invalid path value");if(!pe(n=t.slice(0)))throw new TypeError("Invalid path value");return n.length>1&&Jt(n[0],n[n.length-1])&&n.pop(),se(n)>0&&n.reverse(),!r&&e&&$t(e)&&e>0&&ue(n,e),n}function pe(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&$t(t[0])&&$t(t[1])}))}function ce(t,e,n){var r=le(t,n=n||f.morphPrecision),i=le(e,n),a=r.length-i.length;return oe(r,a<0?-1*a:0),oe(i,a>0?a:0),ie(r,i),[r,i]}var he={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?V(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i=e.pathArray,a=n.pathArray,s=a.length;t.setAttribute("d",1===r?n.original:"M"+Lt(i,a,s,r).join("L")+"Z")})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=ce(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},fe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Lt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:he,Util:{INVALID_INPUT:"Invalid path value",isFiniteNumber:$t,distance:Wt,pointAlong:Gt,samePoint:Jt,pathToAbsolute:qt,pathToString:Kt,pathStringToRing:te,exactRing:ee,approximateRing:ne,measure:re,rotateRing:ie,polygonLength:ae,polygonArea:se,addPoints:oe,bisect:ue,normalizeRing:le,validRing:pe,getInterpolationPoints:ce}};for(var de in x.SVGMorph=fe,x){var ve=x[de];x[de]=new F(ve)}return{Animation:F,Components:x,Tween:H,fromTo:function(t,e,n,r){return r=r||{},new P.tween(V(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new P.tween(V(t),e,e,n)},TweenCollection:j,allFromTo:function(t,e,n,r){return r=r||{},new j(V(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new j(V(t,!0),e,e,n)},Objects:b,Util:w,Easing:L,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:T,Selector:V,Version:"2.0.13"}})); diff --git a/package.json b/package.json index 7a0ab5d..dbf8740 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ }, "homepage": "http://thednp.github.io/kute.js", "dependencies": { + "svg-path-commander": "^0.0.1-c", "cubic-bezier-easing": "^1.0.2", "minifill": "^0.0.13", "shorter-js": "^0.1.4" diff --git a/src/components/svgCubicMorph.js b/src/components/svgCubicMorph.js index 8508fe6..b394618 100644 --- a/src/components/svgCubicMorph.js +++ b/src/components/svgCubicMorph.js @@ -2,504 +2,17 @@ import Components from '../objects/components.js' import selector from '../util/selector.js' import numbers from '../interpolation/numbers.js' -import {toPathString,onStartCubicMorph} from './svgCubicMorphBase.js' +import {onStartCubicMorph} from './svgCubicMorphBase.js' + +import parsePathString from 'svg-path-commander/src/process/parsePathString.js' +import pathToAbsolute from 'svg-path-commander/src/convert/pathToAbsolute.js' +import pathToCurve from 'svg-path-commander/src/convert/pathToCurve.js' +import pathToString from 'svg-path-commander/src/convert/pathToString.js' +import reverseCurve from 'svg-path-commander/src/process/reverseCurve.js' // const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } // Component Util -const INVALID_INPUT = 'Invalid path value' - -/* Raphael.js - path (https://github.com/DmitryBaranovskiy/raphael) - * Copyright © 2008-2013 Dmitry Baranovskiy (http://dmitrybaranovskiy.github.io/raphael/) - * Copyright © 2008-2013 Sencha Labs (http://sencha.com) - * Licensed under the MIT (http://dmitrybaranovskiy.github.io/raphael/license.html) license. - * KUTE.js modifications - * - parsePathString is now moved outside of main functions - * - processPath moved outside pathToAbsolute function body - * - fixArc moved outside path2curve function body - * - fixM moved outside path2curve function body - * - minor fixes like "a != b" => "a !== b", various undefined/unused variables -*/ - -// http://schepers.cc/getting-to-the-point -function catmullRom2bezier(crp, z) { - const d = []; - for (let i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) { - const p = [ - {x: +crp[i - 2], y: +crp[i - 1]}, - {x: +crp[i], y: +crp[i + 1]}, - {x: +crp[i + 2], y: +crp[i + 3]}, - {x: +crp[i + 4], y: +crp[i + 5]} - ]; - if (z) { - if (!i) { - p[0] = {x: +crp[iLen - 2], y: +crp[iLen - 1]}; - } else if (iLen - 4 == i) { - p[3] = {x: +crp[0], y: +crp[1]}; - } else if (iLen - 2 == i) { - p[2] = {x: +crp[0], y: +crp[1]}; - p[3] = {x: +crp[2], y: +crp[3]}; - } - } else { - if (iLen - 4 == i) { - p[3] = p[2]; - } else if (!i) { - p[0] = {x: +crp[i], y: +crp[i + 1]}; - } - } - d.push(["C", - (-p[0].x + 6 * p[1].x + p[2].x) / 6, - (-p[0].y + 6 * p[1].y + p[2].y) / 6, - (p[1].x + 6 * p[2].x - p[3].x) / 6, - (p[1].y + 6*p[2].y - p[3].y) / 6, - p[2].x, - p[2].y - ]) - } - return d -} - -function ellipsePath(x, y, rx, ry, a) { - if (a == null && ry == null) { - ry = rx; - } - x = +x; - y = +y; - rx = +rx; - ry = +ry; - let res; - if (a != null) { - const rad = Math.PI / 180, - x1 = x + rx * Math.cos(-ry * rad), - x2 = x + rx * Math.cos(-a * rad), - y1 = y + rx * Math.sin(-ry * rad), - y2 = y + rx * Math.sin(-a * rad); - res = [["M", x1, y1], ["A", rx, rx, 0, +(a - ry > 180), 0, x2, y2]]; - } else { - res = [ - ["M", x, y], - ["m", 0, -ry], - ["a", rx, ry, 0, 1, 1, 0, 2 * ry], - ["a", rx, ry, 0, 1, 1, 0, -2 * ry], - ["z"] - ]; - } - return res; -} - - -// Parses given path string into an array of arrays of path segments -function parsePathString(pathString) { - if (!pathString) { - return null; - } - if( pathString instanceof Array ) { - return pathString; - } else { - // tracer minifier cannot compute this string for some reason - // let spaces = "\x09\x0a\x0b\x0c\x0d\x20\xa0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029"; - let spaces = `\\${("x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029").split('|').join('\\')}`, - pathCommand = new RegExp(`([a-z])[${spaces},]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?[${spaces}]*,?[${spaces}]*)+)`, `ig`), - pathValues = new RegExp(`(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)[${spaces}]*,?[${spaces}]*`, `ig`), - paramCounts = {a: 7, c: 6, o: 2, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, u: 3, z: 0}, - data = []; - - pathString.replace(pathCommand, (a, b, c) => { - let params = [], name = b.toLowerCase(); - - c.replace(pathValues, (a, b) => { - b && params.push(+b); - }); - if (name == "m" && params.length > 2) { - data.push([b].concat(params.splice(0, 2))); - name = "l"; - b = b == "m" ? "l" : "L"; - } - if (name == "o" && params.length == 1) { - data.push([b, params[0]]); - } - if (name == "r") { - data.push([b].concat(params)); - } else while (params.length >= paramCounts[name]) { - data.push([b].concat(params.splice(0, paramCounts[name]))); - if (!paramCounts[name]) { - break; - } - } - }); - - return data; - } -} - -function pathToAbsolute(pathArray) { - pathArray = parsePathString(pathArray); - - if (!pathArray || !pathArray.length) { - return [["M", 0, 0]]; - } - let res = [], x = 0, y = 0, mx = 0, my = 0, start = 0, pa0; - if (pathArray[0][0] === "M") { - x = +pathArray[0][1]; - y = +pathArray[0][2]; - mx = x; - my = y; - start++; - res[0] = ["M", x, y]; - } - const crz = pathArray.length === 3 && - pathArray[0][0] === "M" && - pathArray[1][0].toUpperCase() === "R" && - pathArray[2][0].toUpperCase() === "Z"; - for (let r, pa, i = start, ii = pathArray.length; i < ii; i++) { - res.push(r = []); - pa = pathArray[i]; - pa0 = pa[0]; - if (pa0 !== pa0.toUpperCase()) { - r[0] = pa0.toUpperCase(); - switch (r[0]) { - case "A": - r[1] = pa[1]; - r[2] = pa[2]; - r[3] = pa[3]; - r[4] = pa[4]; - r[5] = pa[5]; - r[6] = +pa[6] + x; - r[7] = +pa[7] + y; - break; - case "V": - r[1] = +pa[1] + y; - break; - case "H": - r[1] = +pa[1] + x; - break; - case "R": - var dots = [x, y].concat(pa.slice(1)); - for (var j = 2, jj = dots.length; j < jj; j++) { - dots[j] = +dots[j] + x; - dots[++j] = +dots[j] + y; - } - res.pop(); - res = res.concat(catmullRom2bezier(dots, crz)); - break; - case "O": - res.pop(); - dots = ellipsePath(x, y, pa[1], pa[2]); - dots.push(dots[0]); - res = res.concat(dots); - break; - case "U": - res.pop(); - res = res.concat(ellipsePath(x, y, pa[1], pa[2], pa[3])); - r = ["U"].concat(res[res.length - 1].slice(-2)); - break; - case "M": - mx = +pa[1] + x; - my = +pa[2] + y; - default: - for (j = 1, jj = pa.length; j < jj; j++) { - r[j] = +pa[j] + ((j % 2) ? x : y); - } - } - } else if (pa0 == "R") { - dots = [x, y].concat(pa.slice(1)); - res.pop(); - res = res.concat(catmullRom2bezier(dots, crz)); - r = ["R"].concat(pa.slice(-2)); - } else if (pa0 == "O") { - res.pop(); - dots = ellipsePath(x, y, pa[1], pa[2]); - dots.push(dots[0]); - res = res.concat(dots); - } else if (pa0 == "U") { - res.pop(); - res = res.concat(ellipsePath(x, y, pa[1], pa[2], pa[3])); - r = ["U"].concat(res[res.length - 1].slice(-2)); - } else { - for (let k = 0, kk = pa.length; k < kk; k++) { - r[k] = pa[k]; - } - } - pa0 = pa0.toUpperCase(); - if (pa0 != "O") { - switch (r[0]) { - case "Z": - x = +mx; - y = +my; - break; - case "H": - x = r[1]; - break; - case "V": - y = r[1]; - break; - case "M": - mx = r[r.length - 2]; - my = r[r.length - 1]; - default: - x = r[r.length - 2]; - y = r[r.length - 1]; - } - } - } - return res -} - -function l2c(x1, y1, x2, y2) { - return [x1, y1, x2, y2, x2, y2]; -} -function q2c(x1, y1, ax, ay, x2, y2) { - const _13 = 1 / 3; - const _23 = 2 / 3; - return [ - _13 * x1 + _23 * ax, - _13 * y1 + _23 * ay, - _13 * x2 + _23 * ax, - _13 * y2 + _23 * ay, - x2, - y2 - ] -} - -// for more information of where this math came from visit: -// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes -function a2c(x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) { - const _120 = Math.PI * 120 / 180, rad = Math.PI / 180 * (+angle || 0); - let res = [], xy, f1, f2, cx, cy; - - function rotateVector(x, y, rad) { - const X = x * Math.cos(rad) - y * Math.sin(rad), - Y = x * Math.sin(rad) + y * Math.cos(rad); - return {x: X, y: Y}; - } - - if (!recursive) { - xy = rotateVector(x1, y1, -rad); - x1 = xy.x; - y1 = xy.y; - xy = rotateVector(x2, y2, -rad); - x2 = xy.x; - y2 = xy.y; - // const cos = Math.cos(Math.PI / 180 * angle); - // const sin = Math.sin(Math.PI / 180 * angle); - let x = (x1 - x2) / 2, y = (y1 - y2) / 2, h = (x * x) / (rx * rx) + (y * y) / (ry * ry); - if (h > 1) { - h = Math.sqrt(h); - rx = h * rx; - ry = h * ry; - } - let rx2 = rx * rx, - ry2 = ry * ry, - k = (large_arc_flag == sweep_flag ? -1 : 1) - * Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) - / (rx2 * y * y + ry2 * x * x))); - - cx = k * rx * y / ry + (x1 + x2) / 2, - cy = k * -ry * x / rx + (y1 + y2) / 2; - - f1 = Math.asin(((y1 - cy) / ry).toFixed(9)), - f2 = Math.asin(((y2 - cy) / ry).toFixed(9)); - - f1 = x1 < cx ? Math.PI - f1 : f1; - f2 = x2 < cx ? Math.PI - f2 : f2; - f1 < 0 && (f1 = Math.PI * 2 + f1); - f2 < 0 && (f2 = Math.PI * 2 + f2); - if (sweep_flag && f1 > f2) { - f1 = f1 - Math.PI * 2; - } - if (!sweep_flag && f2 > f1) { - f2 = f2 - Math.PI * 2; - } - } else { - f1 = recursive[0]; - f2 = recursive[1]; - cx = recursive[2]; - cy = recursive[3]; - } - let df = f2 - f1; - if (Math.abs(df) > _120) { - const f2old = f2, x2old = x2, y2old = y2; - - f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1); - x2 = cx + rx * Math.cos(f2); - y2 = cy + ry * Math.sin(f2); - res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]); - } - df = f2 - f1; - const c1 = Math.cos(f1), - s1 = Math.sin(f1), - c2 = Math.cos(f2), - s2 = Math.sin(f2), - t = Math.tan(df / 4), - hx = 4 / 3 * rx * t, - hy = 4 / 3 * ry * t, - m1 = [x1, y1], - m2 = [x1 + hx * s1, y1 - hy * c1], - m3 = [x2 + hx * s2, y2 - hy * c2], - m4 = [x2, y2]; - m2[0] = 2 * m1[0] - m2[0]; - m2[1] = 2 * m1[1] - m2[1]; - if (recursive) { - return [m2, m3, m4].concat(res); - } else { - res = [m2, m3, m4].concat(res).join().split(","); - const newres = []; - for (let i = 0, ii = res.length; i < ii; i++) { - newres[i] = i % 2 ? rotateVector(res[i - 1], res[i], rad).y : rotateVector(res[i], res[i + 1], rad).x; - } - return newres; - } -} - -function processPath (path, d, pcom) { - let nx, ny; - if (!path) { - return ["C", d.x, d.y, d.x, d.y, d.x, d.y]; - } - !(path[0] in {T: 1, Q: 1}) && (d.qx = d.qy = null); - switch (path[0]) { - case "M": - d.X = path[1]; - d.Y = path[2]; - break; - case "A": - path = ["C"].concat(a2c.apply(0, [d.x, d.y].concat(path.slice(1)))); - break; - case "S": - if (pcom == "C" || pcom == "S") { // In "S" case we have to take into account, if the previous command is C/S. - nx = d.x * 2 - d.bx; // And reflect the previous - ny = d.y * 2 - d.by; // command's control point relative to the current point. - } - else { // or some else or nothing - nx = d.x; - ny = d.y; - } - path = ["C", nx, ny].concat(path.slice(1)); - break; - case "T": - if (pcom == "Q" || pcom == "T") { // In "T" case we have to take into account, if the previous command is Q/T. - d.qx = d.x * 2 - d.qx; // And make a reflection similar - d.qy = d.y * 2 - d.qy; // to case "S". - } - else { // or something else or nothing - d.qx = d.x; - d.qy = d.y; - } - path = ["C"].concat(q2c(d.x, d.y, d.qx, d.qy, path[1], path[2])); - break; - case "Q": - d.qx = path[1]; - d.qy = path[2]; - path = ["C"].concat(q2c(d.x, d.y, path[1], path[2], path[3], path[4])); - break; - case "L": - path = ["C"].concat(l2c(d.x, d.y, path[1], path[2])); - break; - case "H": - path = ["C"].concat(l2c(d.x, d.y, path[1], d.y)); - break; - case "V": - path = ["C"].concat(l2c(d.x, d.y, d.x, path[1])); - break; - case "Z": - path = ["C"].concat(l2c(d.x, d.y, d.X, d.Y)); - break; - } - path.map((x,i)=>i?x.toFixed(3):x) - return path; -} - -function fixM (path1, path2, a1, a2, i) { - if (path1 && path2 && path1[i][0] === "M" && path2[i][0] !== "M") { - path2.splice(i, 0, ["M", a2.x, a2.y]); - a1.bx = 0; - a1.by = 0; - a1.x = path1[i][1]; - a1.y = path1[i][2]; - // ii = Math.max(p.length, p2 && p2.length || 0); - } -} - -function fixArc (p, p2, pcoms1, pcoms2, i) { - if (p[i].length > 7) { - p[i].shift(); - const pi = p[i]; - while (pi.length) { - pcoms1[i] = "A"; // if created multiple C:s, their original seg is saved - p2 && (pcoms2[i] = "A"); // the same as above - p.splice(i++, 0, ["C"].concat(pi.splice(0, 6))); - } - p.splice(i, 1); - } -} - -function path2curve(path, path2) { - let p = pathToAbsolute(path), // holder for previous path command of original path - p2 = path2 && pathToAbsolute(path2), - // p2 = path2 ? pathToAbsolute(path2) : pathToAbsolute('M0,0L0,0'), - attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null}, - attrs2 = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null}; - - // path commands of original path p - // path commands of original path p2 - // temporary holder for original path command - let pcoms1 = [], pcoms2 = [], pfirst = "", pcom = ""; - - for (let i = 0, ii = Math.max(p.length, p2 && p2.length || 0); i < ii; i++) { - p[i] && (pfirst = p[i][0]); // save current path command - - if (pfirst !== "C") { // C is not saved yet, because it may be result of conversion - pcoms1[i] = pfirst; // Save current path command - i && ( pcom = pcoms1[i - 1]); // Get previous path command pcom - } - p[i] = processPath(p[i], attrs, pcom); // Previous path command is inputted to processPath - - // A is the only command - // which may produce multiple C:s - // so we have to make sure that C is also C in original path - if (pcoms1[i] !== "A" && pfirst === "C") pcoms1[i] = "C"; - - // fixArc(p, i); // fixArc adds also the right amount of A:s to pcoms1 - fixArc(p, p2, pcoms1, pcoms2, i); // fixArc adds also the right amount of A:s to pcoms1 fixArc (p, p2, pcoms1, pcoms2, i) { - ii = Math.max(p.length, p2 && p2.length || 0); - - if (p2) { // the same procedures is done to p2 - p2[i] && (pfirst = p2[i][0]); - if (pfirst !== "C") { - pcoms2[i] = pfirst; - i && (pcom = pcoms2[i - 1]); - } - p2[i] = processPath(p2[i], attrs2, pcom); - - if (pcoms2[i] !== "A" && pfirst === "C") { - pcoms2[i] = "C"; - } - - // fixArc(p2, i); - fixArc(p2, p, pcoms2, pcoms1, i); // fixArc (p, p2, pcoms1, pcoms2, i) { - ii = Math.max(p.length, p2 && p2.length || 0); - } - fixM(p, p2, attrs, attrs2, i); - p2 && fixM(p2, p, attrs2, attrs, i); - ii = Math.max(p.length, p2 && p2.length || 0); - - let seg = p[i], - seg2 = p2 && p2[i], - seglen = seg.length, - seg2len = p2 && seg2.length; - attrs.x = seg[seglen - 2]; - attrs.y = seg[seglen - 1]; - attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x; - attrs.by = parseFloat(seg[seglen - 3]) || attrs.y; - attrs2.bx = p2 && (parseFloat(seg2[seg2len - 4]) || attrs2.x); - attrs2.by = p2 && (parseFloat(seg2[seg2len - 3]) || attrs2.y); - attrs2.x = p2 && seg2[seg2len - 2]; - attrs2.y = p2 && seg2[seg2len - 1]; - } - - return p2 ? [p, p2] : p; -} - function createPath (path) { // create a when glyph const np = document.createElementNS('http://www.w3.org/2000/svg','path'), d = path instanceof SVGElement ? path.getAttribute('d') : path @@ -507,82 +20,42 @@ function createPath (path) { // create a when glyph return np } -function getSegments(curveArray) { - // let result = [] - // curveArray.map((seg, i) => { - // result[i] = { - // x: seg[seg[0] === 'M' ? 1 : 5], - // y: seg[seg[0] === 'M' ? 2 : 6], - // seg: seg - // } - // }) - // return result - - return curveArray.map(seg => { - return { - x: seg[seg[0] === 'M' ? 1 : 5], - y: seg[seg[0] === 'M' ? 2 : 6], - seg: seg - } - }) -} -function reverseCurve(path){ - let newSegments = [], - oldSegments = getSegments(path), - segsCount = oldSegments.length, - pointCount = segsCount - 1, - oldSegIdx = pointCount, - oldSegs = [] - - oldSegments.map((p,i)=>{ - if (i === 0||oldSegments[oldSegIdx].seg[0] === 'M') { - newSegments[i] = ['M',oldSegments[oldSegIdx].x,oldSegments[oldSegIdx].y] - } else { - oldSegIdx = pointCount - i > 0 ? pointCount - i : pointCount; - oldSegs = oldSegments[oldSegIdx].seg - newSegments[i] = [oldSegs[0], oldSegs[5],oldSegs[6],oldSegs[3],oldSegs[4], oldSegs[1], oldSegs[2]] - } - }) - - return newSegments -} - function getRotationSegments(s,idx) { - let newSegments = [], segsCount = s.length, pointCount = segsCount - 1 + let segsCount = s.length, pointCount = segsCount - 1 - s.map((p,i)=>{ - let oldSegIdx = idx + i; - if (i===0 || s[oldSegIdx] && s[oldSegIdx].seg[0] === 'M') { - newSegments[i] = ['M',s[oldSegIdx].x,s[oldSegIdx].y] + return s.map((p,i)=>{ + let oldSegIdx = idx + i, seg; + if (i===0 || s[oldSegIdx] && s[oldSegIdx][0] === 'M') { + seg = s[oldSegIdx] + return ['M',seg[seg.length-2],seg[seg.length-1]] } else { if (oldSegIdx >= segsCount) oldSegIdx -= pointCount; - newSegments[i] = s[oldSegIdx].seg + return s[oldSegIdx] } }) - return newSegments } function getRotations(a) { - let startSegments = getSegments(a), rotations = []; - startSegments.map((s,i)=>{rotations[i] = getRotationSegments(startSegments,i)}) - return rotations + return a.map((s,i) => getRotationSegments(a,i)) } function getRotatedCurve(a,b) { - let startSegments = getSegments(a), - endSegments = getSegments(b), - segsCount = startSegments.length, - pointCount = segsCount - 1, + let segCount = a.length - 1, linePaths = [], lineLengths = [], rotations = getRotations(a); rotations.map((r,i)=>{ - let sumLensSqrd = 0, linePath = createPath('M0,0L0,0'); - for (let j = 0; j < pointCount; j++) { - let linePt1 = startSegments[(i + j) % pointCount]; - let linePt2 = endSegments[ j % pointCount]; - let linePathStr = `M${linePt1.x},${linePt1.y}L${linePt2.x},${linePt2.y}`; + let sumLensSqrd = 0, + linePath = createPath('M0,0L0,0'), + linePt1, ll1, + linePt2, ll2, + linePathStr + + for (let j = 0; j < segCount; j++) { + linePt1 = a[(i + j) % segCount]; ll1 = linePt1.length + linePt2 = b[ j % segCount]; ll2 = linePt2.length + linePathStr = `M${linePt1[ll1-2]},${linePt1[ll1-1]}L${linePt2[ll2-2]},${linePt2[ll2-1]}` linePath.setAttribute('d',linePathStr); sumLensSqrd += Math.pow(linePath.getTotalLength(),2); linePaths[j] = linePath; @@ -591,9 +64,9 @@ function getRotatedCurve(a,b) { sumLensSqrd = 0 }) - let computedIndex = lineLengths.indexOf(Math.min.apply(null,lineLengths)), - newPath = rotations[computedIndex]; - return newPath + let computedIndex = lineLengths.indexOf(Math.min.apply(null,lineLengths)) + + return rotations[computedIndex] } // Component Functions @@ -630,10 +103,10 @@ function crossCheckCubicMorph(tweenProp){ if ( !pathCurve1 || !pathCurve2 || ( pathCurve1 && pathCurve2 && pathCurve1[0][0] === 'M' && pathCurve1.length !== pathCurve2.length) ) { let path1 = this.valuesStart[tweenProp].original, path2 = this.valuesEnd[tweenProp].original, - curves = path2curve(path1,path2) + curves = pathToCurve(path1,path2) - let curve0 = this._reverseFirstPath ? reverseCurve.call(this,curves[0]) : curves[0], - curve1 = this._reverseSecondPath ? reverseCurve.call(this,curves[1]) : curves[1] + let curve0 = this._reverseFirstPath ? reverseCurve(curves[0]) : curves[0], + curve1 = this._reverseSecondPath ? reverseCurve(curves[1]) : curves[1] curve0 = getRotatedCurve.call(this,curve0,curve1) this.valuesStart[tweenProp].curve = curve0; @@ -655,14 +128,13 @@ const svgCubicMorph = { component: 'svgCubicMorph', property: 'path', defaultValue: [], - Interpolate: {numbers,toPathString}, + Interpolate: {numbers,pathToString}, functions: svgCubicMorphFunctions, // export utils to global for faster execution Util: { - l2c, q2c, a2c, catmullRom2bezier, ellipsePath, - path2curve, pathToAbsolute, toPathString, parsePathString, + pathToCurve, pathToAbsolute, pathToString, parsePathString, getRotatedCurve, getRotations, - getRotationSegments, reverseCurve, getSegments, createPath + getRotationSegments, reverseCurve, createPath } } diff --git a/src/components/svgCubicMorphBase.js b/src/components/svgCubicMorphBase.js index b4258c2..3da255c 100644 --- a/src/components/svgCubicMorphBase.js +++ b/src/components/svgCubicMorphBase.js @@ -1,25 +1,17 @@ import KUTE from '../objects/kute.js' -import numbers from '../interpolation/numbers.js' +import numbers from '../interpolation/numbers.js' + +import pathToString from 'svg-path-commander/src/convert/pathToString.js' // const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } -// Component Interpolation -export function toPathString(pathArray) { - let newPath = pathArray.map( (c) => { - if (typeof(c) === 'string') { - return c - } else { - let c0 = c.shift(); - return c0 + c.join(',') - } - }) - return newPath.join(''); -} // Component Functions export function onStartCubicMorph(tweenProp){ if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { KUTE[tweenProp] = function(elem,a,b,v){ + // v === 1 && console.log(a.curve,b.curve) + let curve = [], path1 = a.curve, path2 = b.curve; for(let i=0, l=path2.length; i>0)/1000 ); } } - elem.setAttribute("d", v === 1 ? b.original : toPathString(curve) ); + elem.setAttribute("d", v === 1 ? b.original : pathToString(curve) ) } } } @@ -37,7 +29,7 @@ const baseSvgCubicMorph = { component: 'baseSVGCubicMorph', property: 'path', // defaultValue: [], - Interpolate: {numbers,toPathString}, + Interpolate: {numbers,pathToString}, functions: {onStart:onStartCubicMorph} } diff --git a/src/components/svgMorph.js b/src/components/svgMorph.js index ea4c0cf..5f3ba51 100644 --- a/src/components/svgMorph.js +++ b/src/components/svgMorph.js @@ -3,13 +3,16 @@ import defaultOptions from '../objects/defaultOptions.js' import Components from '../objects/components.js' import coords from '../interpolation/coords.js' import {onStartSVGMorph} from './svgMorphBase.js' + +import pathToAbsolute from 'svg-path-commander/src/convert/pathToAbsolute.js' +import pathToString from 'svg-path-commander/src/convert/pathToString.js' +import splitPath from 'svg-path-commander/src/util/splitPath.js' // const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } // Component Interpolation // function function(array1, array2, length, progress) - // Component Util const INVALID_INPUT = 'Invalid path value' @@ -30,487 +33,15 @@ function samePoint(a, b) { return distance(a, b) < 1e-9; } -// SVGPATH -// https://github.com/fontello/svgpath/ -const paramCounts = { a: 7, c: 6, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, z: 0 }; - -const SPECIAL_SPACES = [ - 0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, - 0x2007, 0x2008, 0x2009, 0x200A, 0x202F, 0x205F, 0x3000, 0xFEFF -]; - -function isSpace(ch) { - return (ch === 0x0A) || (ch === 0x0D) || (ch === 0x2028) || (ch === 0x2029) || // Line terminators - // White spaces - (ch === 0x20) || (ch === 0x09) || (ch === 0x0B) || (ch === 0x0C) || (ch === 0xA0) || - (ch >= 0x1680 && SPECIAL_SPACES.indexOf(ch) >= 0); -} - -function isCommand(code) { - /*eslint-disable no-bitwise*/ - switch (code | 0x20) { - case 0x6D/* m */: - case 0x7A/* z */: - case 0x6C/* l */: - case 0x68/* h */: - case 0x76/* v */: - case 0x63/* c */: - case 0x73/* s */: - case 0x71/* q */: - case 0x74/* t */: - case 0x61/* a */: - case 0x72/* r */: - return true; - } - return false; -} - - -function isArc(code) { - return (code | 0x20) === 0x61; -} - -function isDigit(code) { - return (code >= 48 && code <= 57); // 0..9 -} - -function isDigitStart(code) { - return (code >= 48 && code <= 57) || /* 0..9 */ - code === 0x2B || /* + */ - code === 0x2D || /* - */ - code === 0x2E; /* . */ -} - -function State(path) { - this.index = 0; - this.path = path; - this.max = path.length; - this.result = []; - this.param = 0.0; - this.err = ''; - this.segmentStart = 0; - this.data = []; -} - -function skipSpaces(state) { - while (state.index < state.max && isSpace(state.path.charCodeAt(state.index))) { - state.index++; - } -} -function scanFlag(state) { - let ch = state.path.charCodeAt(state.index); - - if (ch === 0x30/* 0 */) { - state.param = 0; - state.index++; - return; - } - - if (ch === 0x31/* 1 */) { - state.param = 1; - state.index++; - return; - } - - // state.err = 'SvgPath: arc flag can be 0 or 1 only (at pos ' + state.index + ')'; - state.err = `KUTE.js - ${INVALID_INPUT}`; -} -function scanParam(state) { - let start = state.index, - index = start, - max = state.max, - zeroFirst = false, - hasCeiling = false, - hasDecimal = false, - hasDot = false, - ch; - - if (index >= max) { - // state.err = 'SvgPath: missed param (at pos ' + index + ')';. - state.err = `KUTE.js - ${INVALID_INPUT}`; - - return; - } - ch = state.path.charCodeAt(index); - - if (ch === 0x2B/* + */ || ch === 0x2D/* - */) { - index++; - ch = (index < max) ? state.path.charCodeAt(index) : 0; - } - - // This logic is shamelessly borrowed from Esprima - // https://github.com/ariya/esprimas - // - if (!isDigit(ch) && ch !== 0x2E/* . */) { - // state.err = 'SvgPath: param should start with 0..9 or `.` (at pos ' + index + ')'; - state.err = `KUTE.js - ${INVALID_INPUT}`; - - return; - } - - if (ch !== 0x2E/* . */) { - zeroFirst = (ch === 0x30/* 0 */); - index++; - - ch = (index < max) ? state.path.charCodeAt(index) : 0; - - if (zeroFirst && index < max) { - // decimal number starts with '0' such as '09' is illegal. - if (ch && isDigit(ch)) { - // state.err = 'SvgPath: numbers started with `0` such as `09` are illegal (at pos ' + start + ')'; - state.err = `KUTE.js - ${INVALID_INPUT}`; - - return; - } - } - - while (index < max && isDigit(state.path.charCodeAt(index))) { - index++; - hasCeiling = true; - } - ch = (index < max) ? state.path.charCodeAt(index) : 0; - } - - if (ch === 0x2E/* . */) { - hasDot = true; - index++; - while (isDigit(state.path.charCodeAt(index))) { - index++; - hasDecimal = true; - } - ch = (index < max) ? state.path.charCodeAt(index) : 0; - } - - if (ch === 0x65/* e */ || ch === 0x45/* E */) { - if (hasDot && !hasCeiling && !hasDecimal) { - // state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; - state.err = `KUTE.js - ${INVALID_INPUT}`; - - return; - } - - index++; - - ch = (index < max) ? state.path.charCodeAt(index) : 0; - if (ch === 0x2B/* + */ || ch === 0x2D/* - */) { - index++; - } - if (index < max && isDigit(state.path.charCodeAt(index))) { - while (index < max && isDigit(state.path.charCodeAt(index))) { - index++; - } - } else { - // state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; - state.err = `KUTE.js - ${INVALID_INPUT}`; - - return; - } - } - - state.index = index; - state.param = parseFloat(state.path.slice(start, index)) + 0.0; -} -function finalizeSegment(state) { - let cmd, cmdLC; - - // Process duplicated commands (without comand name) - - // This logic is shamelessly borrowed from Raphael - // https://github.com/DmitryBaranovskiy/raphael/ - // - cmd = state.path[state.segmentStart]; - cmdLC = cmd.toLowerCase(); - - let params = state.data; - - if (cmdLC === 'm' && params.length > 2) { - state.result.push([ cmd, params[0], params[1] ]); - params = params.slice(2); - cmdLC = 'l'; - cmd = (cmd === 'm') ? 'l' : 'L'; - } - - if (cmdLC === 'r') { - state.result.push([ cmd ].concat(params)); - } else { - - while (params.length >= paramCounts[cmdLC]) { - state.result.push([ cmd ].concat(params.splice(0, paramCounts[cmdLC]))); - if (!paramCounts[cmdLC]) { - break; - } - } - } -} - -function scanSegment(state) { - let max = state.max, cmdCode, is_arc, comma_found, need_params, i; - - state.segmentStart = state.index; - cmdCode = state.path.charCodeAt(state.index); - is_arc = isArc(cmdCode); - - if (!isCommand(cmdCode)) { - // state.err = 'SvgPath: bad command ' + state.path[state.index] + ' (at pos ' + state.index + ')'; - state.err = `KUTE.js - ${INVALID_INPUT}`; - - return; - } - - need_params = paramCounts[state.path[state.index].toLowerCase()]; - - state.index++; - skipSpaces(state); - - state.data = []; - - if (!need_params) { - // Z - finalizeSegment(state); - return; - } - - comma_found = false; - - for (;;) { - for (i = need_params; i > 0; i--) { - if (is_arc && (i === 3 || i === 4)) scanFlag(state); - else scanParam(state); - - if (state.err.length) { - return; - } - state.data.push(state.param); - - skipSpaces(state); - comma_found = false; - - if (state.index < max && state.path.charCodeAt(state.index) === 0x2C/* , */) { - state.index++; - skipSpaces(state); - comma_found = true; - } - } - - // after ',' param is mandatory - if (comma_found) { - continue; - } - - if (state.index >= state.max) { - break; - } - - // Stop on next segment - if (!isDigitStart(state.path.charCodeAt(state.index))) { - break; - } - } - - finalizeSegment(state); -} - -// Returns array of segments -function pathParse(svgPath) { - let state = new State(svgPath), max = state.max; - - skipSpaces(state); - - while (state.index < max && !state.err.length) { - scanSegment(state); - } - - if (state.err.length) { - state.result = []; - - } else if (state.result.length) { - - if ('mM'.indexOf(state.result[0][0]) < 0) { - // state.err = 'SvgPath: string should start with `M` or `m`'; - state.err = `KUTE.js - ${INVALID_INPUT}`; - - state.result = []; - } else { - state.result[0][0] = 'M'; - } - } - - return { - err: state.err, - segments: state.result - }; -} - -class SvgPath { - constructor(path){ - if (!(this instanceof SvgPath)) { return new SvgPath(path); } - - let pstate = pathParse(path); - - // Array of path segments. - // Each segment is array [command, param1, param2, ...] - this.segments = pstate.segments; - - // Error message on parse error. - this.err = pstate.err; - } - // Apply iterator function to all segments. If function returns result, - // current segment will be replaced to array of returned segments. - // If empty array is returned, current regment will be deleted. - // - iterate(iterator) { - let segments = this.segments, - replacements = {}, - needReplace = false, - lastX = 0, - lastY = 0, - countourStartX = 0, - countourStartY = 0, - newSegments; - - segments.map( (s,index) => { - - let res = iterator(s, index, lastX, lastY); - - if (Array.isArray(res)) { - replacements[index] = res; - needReplace = true; - } - - let isRelative = (s[0] === s[0].toLowerCase()); - - // calculate absolute X and Y - switch (s[0]) { - case 'm': - case 'M': - lastX = s[1] + (isRelative ? lastX : 0); - lastY = s[2] + (isRelative ? lastY : 0); - countourStartX = lastX; - countourStartY = lastY; - return; - - case 'h': - case 'H': - lastX = s[1] + (isRelative ? lastX : 0); - return; - - case 'v': - case 'V': - lastY = s[1] + (isRelative ? lastY : 0); - return; - - case 'z': - case 'Z': - // That make sence for multiple contours - lastX = countourStartX; - lastY = countourStartY; - return; - - default: - lastX = s[s.length - 2] + (isRelative ? lastX : 0); - lastY = s[s.length - 1] + (isRelative ? lastY : 0); - } - }); - - // Replace segments if iterator return results - - if (!needReplace) { return this; } - - newSegments = []; - - segments.map((s,i)=>{ - if (typeof replacements[i] !== 'undefined') { - replacements[i].map((r)=>{ - newSegments.push(r); - }) - } else { - newSegments.push(s); - } - }) - - this.segments = newSegments; - return this; - } - - // Converts segments from relative to absolute - abs() { - this.iterate(function (s, index, x, y) { - let name = s[0], - nameUC = name.toUpperCase(), - i; - - // Skip absolute commands - if (name === nameUC) { return; } - - s[0] = nameUC; - - switch (name) { - case 'v': - // v has shifted coords parity - s[1] += y; - return; - - case 'a': - // ARC is: ['A', rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y] - // touch x, y only - s[6] += x; - s[7] += y; - return; - - default: - for (i = 1; i < s.length; i++) { - s[i] += i % 2 ? x : y; // odd values are X, even - Y - } - } - }, true); - - return this; - } - // Convert processed SVG Path back to string - // - toString () { - let elements = [], skipCmd, cmd; - - this.segments.map( (s,i) => { - // remove repeating commands names - cmd = s[0]; - skipCmd = i > 0 && cmd !== 'm' && cmd !== 'M' && cmd === this.segments[i - 1][0]; - elements = elements.concat(skipCmd ? s.slice(1) : s); - }) - - return elements.join(' ') - // Optimizations: remove spaces around commands & before `-` - // - // We could also remove leading zeros for `0.5`-like values, - // but their count is too small to spend time for. - .replace(/ ?([achlmqrstvz]) ?/gi, '$1') - .replace(/ \-/g, '-') - // workaround for FontForge SVG importing bug - .replace(/zm/g, 'z m'); - } -} // flubber // https://github.com/veltman/flubber -function split(parsed) { - return parsed - .toString() - .split("M") - .map((d, i) => { - d = d.trim(); - return i && d ? "M" + d : d; - }) - .filter(d => d); -} - function pathStringToRing(str, maxSegmentLength) { - let parsed = new SvgPath(str).abs(); - + let parsed = pathToAbsolute(str); return exactRing(parsed) || approximateRing(parsed, maxSegmentLength); } -function exactRing(parsed) { - let segments = parsed.segments || [], - ring = []; +function exactRing(segments) { + let ring = []; if (!segments.length || segments[0][0] !== "M") { return false; @@ -535,7 +66,8 @@ function exactRing(parsed) { } function approximateRing(parsed, maxSegmentLength) { - let ringPath = split(parsed)[0], ring = [], len, testPath, numPoints = 3; + let ringPath = splitPath(pathToString(parsed))[0], + ring = [], len, testPath, numPoints = 3; if (!ringPath) { throw new TypeError(INVALID_INPUT); @@ -774,9 +306,11 @@ const svgMorph = { functions: svgMorphFunctions, // Export utils to global for faster execution Util: { - INVALID_INPUT,isFiniteNumber,distance,pointAlong,samePoint,paramCounts,SPECIAL_SPACES,isSpace,isCommand,isArc,isDigit, - isDigitStart,State,skipSpaces,scanFlag,scanParam,finalizeSegment,scanSegment,pathParse,SvgPath,split,pathStringToRing, - exactRing,approximateRing,measure,rotateRing,polygonLength,polygonArea,addPoints,bisect,normalizeRing,validRing,getInterpolationPoints} + INVALID_INPUT,isFiniteNumber,distance,pointAlong,samePoint, + pathToAbsolute,pathToString,pathStringToRing, + exactRing,approximateRing,measure,rotateRing,polygonLength,polygonArea, + addPoints,bisect,normalizeRing,validRing,getInterpolationPoints + } } export default svgMorph diff --git a/src/core/queueStart.js b/src/core/queueStart.js new file mode 100644 index 0000000..dc16f81 --- /dev/null +++ b/src/core/queueStart.js @@ -0,0 +1,17 @@ +import onStart from '../objects/onStart.js' +import linkInterpolation from './linkInterpolation.js' + +export default function(){ + // fire onStart actions + for (let obj in onStart) { + if (typeof (onStart[obj]) === 'function') { + onStart[obj].call(this,obj) // easing functions + } else { + for (let prop in onStart[obj]) { + onStart[obj][prop].call(this,prop); + } + } + } + // add interpolations + linkInterpolation.call(this) +} \ No newline at end of file diff --git a/src/tween/tween.js b/src/tween/tween.js index 0796896..b63b8c0 100644 --- a/src/tween/tween.js +++ b/src/tween/tween.js @@ -9,6 +9,7 @@ import crossCheck from '../objects/crossCheck.js' import prepareObject from '../process/prepareObject.js' import getStartValues from '../process/getStartValues.js' import {Tick,Ticker} from '../core/render.js' +import queueStart from '../core/queueStart.js' defaultOptions.repeat = 0 defaultOptions.repeatDelay = 0 @@ -83,8 +84,8 @@ export default class Tween extends TweenBase { getStartValues.call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method - for ( const component in crossCheck ) { - for ( const prop in crossCheck[component] ) { + for ( let component in crossCheck ) { + for ( let prop in crossCheck[component] ) { crossCheck[component][prop].call(this,prop); } } @@ -94,14 +95,13 @@ export default class Tween extends TweenBase { // set yoyo values if (this._yoyo) { - for ( const endProp in this.valuesEnd ) { + for ( let endProp in this.valuesEnd ) { this.valuesRepeat[endProp] = this.valuesStart[endProp] } } super.start(time); - return this } // updates to super methods @@ -135,16 +135,7 @@ export default class Tween extends TweenBase { this._onResume.call(this); } // re-queue execution context - for (let obj in onStart) { - if (typeof (onStart[obj]) === 'function') { - onStart[obj].call(this,obj); - } else { - for (let prop in onStart[obj]) { - onStart[obj][prop].call(this,prop); - } - } - } - linkInterpolation.call(this); + queueStart.call(this) // update time and let it roll this._startTime += KUTE.Time() - this._pauseTime; add(this); diff --git a/src/tween/tweenBase.js b/src/tween/tweenBase.js index 7eef304..919ecf9 100644 --- a/src/tween/tweenBase.js +++ b/src/tween/tweenBase.js @@ -8,7 +8,7 @@ import {Tick,Ticker,stop} from '../core/render.js' import add from '../core/add.js' import remove from '../core/remove.js' -import linkInterpolation from '../core/linkInterpolation.js' +import queueStart from '../core/queueStart.js' // single Tween object construct // TweenBase is meant to be use for pre-processed values @@ -74,18 +74,7 @@ export default class TweenBase { this._onStart.call(this); } - // fire onStart actions - for (let obj in onStart) { - if (typeof (onStart[obj]) === 'function') { - onStart[obj].call(this,obj) // easing functions - } else { - for (let prop in onStart[obj]) { - onStart[obj][prop].call(this,prop); - } - } - } - // add interpolations - linkInterpolation.call(this) + queueStart.call(this) this._startFired = true; }