a30eab2ff9
Improved overall performance https://github.com/thednp/kute.js/issues/34 Fixed some issues with SVG Plugin https://github.com/thednp/kute.js/issues/33 Documentation updates
2 lines
10 KiB
JavaScript
2 lines
10 KiB
JavaScript
// SVG Plugin for KUTE.js | dnp_theme | MIT License
|
|
(function(r){if("function"===typeof define&&define.amd)define(["./kute.js"],function(d){r(d);return d});else if("object"==typeof module&&"function"==typeof require){var l=require("./kute.js");module.exports=r(l)}else if("undefined"!==typeof window.KUTE)window.KUTE.svg=window.KUTE.svg||r(l);else throw Error("SVG Plugin require KUTE.js.");})(function(r){var l=window.KUTE,d=d||{},m,p=l.dom,t=l.pp,v=(m=document.querySelector("path")||document.querySelector("svg"))&&m.ownerSVGElement&&m.ownerSVGElement.namespaceURI||"http://www.w3.org/2000/svg";r=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"];var w=["fill","stroke","stopColor"],x=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi,q=l.Interpolate.number,y=l.Interpolate.color,z=function(a,b,c,f){var e=[],h;for(h=0;h<c;h++)e.push(a[h]===b[h]?b[h]:q(a[h],b[h],f));return e},A=function(a,b,c,f,e,h){var g=[],d;for(d=0;d<c;d++)g.push(z(a[d],b[d],f,h));return g.join(e)};if(!m||m.ownerSVGElement){d.gPt=function(a){var b={},c="object"===typeof a?a:/^\.|^\#/.test(a)?document.querySelector(a):null;c&&/path|glyph/.test(c.tagName)?(b.e=d.fPt(c),b.o=c.getAttribute("d")):!c&&/[a-z][^a-z]*/ig.test(a)&&(b.e=d.cP(a.trim()),b.o=a);return b};d.pCr=function(a){this._mpr=a._ops.morphPrecision||25;this._midx=a._ops.morphIndex;this._smi=a._ops.showMorphInfo;this._rv1=a._ops.reverseFirstPath;this._rv2=a._ops.reverseSecondPath;var b=d.gOp(a._vS.path.o),c=d.gOp(a._vE.path.o);this._isp=!/[CSQTA]/i.test(b)&&!/[CSQTA]/i.test(c);b=d._pCr(b,c,a._el.parentNode);a._vS.path.d=b[0];a._vE.path.d=b[1]};d._pCr=function(a,b,c){var f,e,h,g,k=[],l,n;this._sp=!1;if(this._isp)if(a=d.pTA(a),b=d.pTA(b),a.length!==b.length){e=Math.max(a.length,b.length);e===b.length?(f=a,a=b):f=b;g=d.cP("M"+f.join("L")+"z");l=g.getTotalLength()/e;for(var m=0;m<e;m++)n=g.getPointAtLength(l*m),n=d.gCP(l,n,f),k.push([n[0],n[1]]);e===b.length?(b=a,f=k):(f=a,b=k)}else f=a;else a=d.cP(a),b=d.cP(b),e=d.gSegs(a,b,this._mpr),f=e[0],b=e[1],e=b.length;this._rv1&&f.reverse();this._rv2&&b.reverse();this._smi&&(h=d.gBi(f,b));this._midx&&(b=b.splice(this._midx,e-this._midx).concat(b));this._smi&&(d.shP(f,b,c),console.log("KUTE.js Path Morph Log\nThe morph used "+e+" points to draw both paths based on "+(this._isp?"the polygon with the most points.\n":(25===this._mpr?"the default":"your")+" morphPrecision value of "+this._mpr+".\n")+(this._midx?"You've configured the morphIndex to "+this._midx+" while the recommended is "+h+".\n":"You may also consider a morphIndex for the second path. Currently the best index seems to be "+h+".\n")+(this._rv1||this._rv2?"You've chosen that the first path to have "+(this._rv1?"REVERSED draw direction, ":"UNCHANGED draw direction, ")+"while second path is to be "+(this._rv2?"REVERSED.\n":"UNCHANGED.\n"):"If the current animation is not satisfactory, consider reversing one of the paths. Maybe the paths do not intersect or they really have different draw directions.")));return[f,b]};d.gSegs=function(a,b,c){for(var f=[],e=[],h=a.getTotalLength(),g=b.getTotalLength(),d=0,h=Math.max(h,g)/c*c;(d+=c)<h;)f.push([a.getPointAtLength(d).x,a.getPointAtLength(d).y]),e.push([b.getPointAtLength(d).x,b.getPointAtLength(d).y]);return[f,e]};d.gCP=function(a,b,c){var f,e,h=[],g=c.length;for(k=0;k<g;k++)f=Math.abs(c[k][0]-b.x),e=Math.abs(c[k][1]-b.y),h.push(Math.sqrt(f*f+e*e));f=h.indexOf(Math.min.apply(null,h));e=c[f-1]?f-1:g-1;g=c[f+1]?f+1:0;return Math.abs(c[e][0]-b.x)<a&&Math.abs(c[e][1]-b.y)<a?c[e]:Math.abs(c[g][0]-b.x)<a&&Math.abs(c[g][1]-b.y)<a?c[g]:Math.abs(c[f][0]-b.x)<a&&Math.abs(c[f][1]-b.y)<a?c[f]:[b.x,b.y]};d.shP=function(a,b,c){if(!this._sp){for(var f,e=arguments,h,g,d,k=0;2>k;k++){g=e[k];d=g.length;h=0===k?{f:"DeepPink",o:"HotPink"}:{f:"Lime",o:"LimeGreen"};for(var n=0;n<d;n++)f=document.createElementNS(v,"circle"),f.setAttribute("cx",g[n][0]),f.setAttribute("cy",g[n][1]),f.setAttribute("r",0===n?20:10),f.setAttribute("fill",0===n?h.f:h.o),this._isp?c.appendChild(f):this._isp||0!==n||c.appendChild(f)}this._sp=!0}};d.gBi=function(a,b){var c=d.clone(a),f=d.clone(b),e=[],h,g=b.length,k;for(h=0;h<g;h++)k=f.splice(h,g-h),f=k.concat(f),k=Math.abs(c[h][0]-f[h][0]),f=Math.abs(c[h][1]-f[h][1]),e.push(Math.sqrt(k*k+f*f)),f=d.clone(b);return e.indexOf(Math.min.apply(null,e))};d.gOp=function(a){return a.split(/z/i).shift()+"z"};d.cP=function(a){var b=document.createElementNS(v,"path");a="object"===typeof a?a.getAttribute("d"):a;b.setAttribute("d",a);return b};d.fPt=function(a){if("glyph"===a.tagName){var b=d.cP(a);a.parentNode.appendChild(b);return b}return a};d.clone=function(a){var b;if(a instanceof Array){b=[];for(var c=0,f=a.length;c<f;c++)b[c]=d.clone(a[c]);return b}return a};d.pTA=function(a){a=a.match(x);for(var b=a.length,c,f,e=0,h=0,g=0;g<b;g++)a[g]=a[g],c=a[g][0],f=new RegExp(c+"[^\\d|\\-]*","i"),a[g]=a[g].replace(/(^|[^,])\s*-/g,"$1,-").replace(/(\s+\,|\s|\,)/g,",").replace(f,"").split(","),a[g][0]=parseFloat(a[g][0]),a[g][1]=parseFloat(a[g][1]),0===g?(e+=a[g][0],h+=a[g][1]):(e=a[g-1][0],h=a[g-1][1],/l/i.test(c)?(a[g][0]="l"===c?a[g][0]+e:a[g][0],a[g][1]="l"===c?a[g][1]+h:a[g][1]):/h/i.test(c)?(a[g][0]="h"===c?a[g][0]+e:a[g][0],a[g][1]=h):/v/i.test(c)&&(a[g][0]=e,a[g][1]="v"===c?a[g][0]+h:a[g][0]));return a};l.svq=function(a){a._vE.path&&d.pCr(a);a._vE.svgTransform&&d.sT(a)};l.pp.path=function(a,b,c){"path"in p||(p.path=function(a,b,c,g,d){a.setAttribute("d",1===d?g.o:"M"+A(c.d,g.d,g.d.length,2,"L",d)+"Z")});return d.gPt(b)};l.prS.path=function(a,b,c){return a.getAttribute("d")};d.gDr=function(a,b){var c=/path|glyph/.test(a.tagName)?a.getTotalLength():d.gL(a),f,e;if(b instanceof Object)return b;"string"===typeof b?(b=b.split(/\,|\s/),f=/%/.test(b[0])?d.pc(b[0].trim(),c):parseFloat(b[0]),e=/%/.test(b[1])?d.pc(b[1].trim(),c):parseFloat(b[1])):"undefined"===typeof b&&(f=parseFloat(l.gCS(a,"stroke-dashoffset")),e=l.gCS(a,"stroke-dasharray").split(/\,/),f=0-f,e=parseFloat(e[0])+f||c);return{s:f,e:e,l:c}};d.pc=function(a,b){return parseFloat(a)/100*b};t.draw=function(a,b,c){"draw"in p||(p.draw=function(a,b,c,d,k){b=c.l;var l=q(c.s,d.s,k);c=q(c.e,d.e,k);d=0-l;a.style.strokeDashoffset=d+"px";a.style.strokeDasharray=1>c+d?"0px, "+b+"px":c+d+"px, "+b+"px"});return d.gDr(c,b)};l.prS.draw=function(a,b,c){return d.gDr(a)};d.gL=function(a){if(/rect/.test(a.tagName))return d.gRL(a);if(/circle/.test(a.tagName))return d.gCL(a);if(/ellipse/.test(a.tagName))return d.gEL(a);if(/polygon|polyline/.test(a.tagName))return d.gPL(a);if(/line/.test(a.tagName))return d.gLL(a)};d.gRL=function(a){var b=a.getAttribute("width");a=a.getAttribute("height");return 2*b+2*a};d.gPL=function(a){a=a.getAttribute("points").split(" ");var b=0;if(1<a.length){var c=function(a){a=a.split(",");if(2==a.length&&!isNaN(a[0])&&!isNaN(a[1]))return[parseFloat(a[0]),parseFloat(a[1])]},f=function(a,b){return void 0!=a&&void 0!=b?Math.sqrt(Math.pow(b[0]-a[0],2)+Math.pow(b[1]-a[1],2)):0};if(2<a.length)for(var e=0;e<a.length-1;e++)b+=f(c(a[e]),c(a[e+1]));b+=f(c(a[0]),c(a[a.length-1]))}return b};d.gLL=function(a){var b=a.getAttribute("x1"),c=a.getAttribute("x2"),f=a.getAttribute("y1");a=a.getAttribute("y2");return Math.sqrt(Math.pow(c-b,2)+Math.pow(a-f,2))};d.gCL=function(a){a=a.getAttribute("r");return 2*Math.PI*a};d.gEL=function(a){var b=a.getAttribute("rx");a=a.getAttribute("ry");b*=2;a*=2;return 2*Math.sqrt(.5*(b*b+a*a))*Math.PI/2};for(var k=0,u=w.length;k<u;k++)m=w[k],t[m]=function(a,b){a in p||(p[a]=function(a,b,e,d,g,k){a.style[b]=y(e,d,g,k.keepHex)});return l.truC(b)},l.prS[m]=function(a,b,c){return l.gCS(a,b)||"rgba(0,0,0,0)"};k=0;for(u=r.length;k<u;k++)m=r[k],t[m]="strokeWidth"===m?function(a,b){a in p||(p[a]=function(a,b,d,h,g){a.style[b]="number"!==typeof h?unit(d.value,h.value,h.unit,g):q(d,h,g)});return/px|%|em|vh|vw/.test(b)?t.box(a,b):parseFloat(b)}:function(a,b){a in p||(p[a]=function(a,b,d,h,g){a.style[b]=q(d,h,g)});return parseFloat(b)},l.prS[m]=function(a,b,c){return l.gCS(a,b)||0};t.svgTransform=function(a,b,c){"svgTransform"in p||(p.svgTransform=function(a,b,c,d,f){b="";for(var e in d)b+=e+"(","translate"===e?b+=c[e][1]===d[e][1]&&0===d[e][1]?q(c[e][0],d[e][0],f):q(c[e][0],d[e][0],f)+" "+q(c[e][1],d[e][1],f):"rotate"===e?(b+=q(c[e][0],d[e][0],f)+" ",b+=d[e][1]+","+d[e][2]):b+=q(c[e],d[e],f),b+=") ";a.setAttribute("transform",b.trim())});a={};c=c.getBBox();var d=c.x+c.width/2,e=c.y+c.height/2,h;for(k in b)"rotate"===k?(h=b[k]instanceof Array?b[k]:/\s/.test(b[k])?[1*b[k].split(" ")[0],1*b[k].split(" ")[1].split(",")[0],1*b[k].split(" ")[1].split(",")[1]]:[1*b[k],d,e],a[k]=h):"translate"===k?(h=b[k]instanceof Array?b[k]:/\,|\s/.test(b[k])?b[k].split(/\,|\s/):[1*b[k],0],a[k]=[1*h[0]||0,1*h[1]||0]):"scale"===k?a[k]=1*b[k]||1:/skew/.test(k)&&(a[k]=1*b[k]||0);"scale"in a&&("translate"in a||(a.translate=[0,0]),a.translate[0]+=(1-a.scale)*c.width/2,a.translate[1]+=(1-a.scale)*c.height/2,"rotate"in a&&(a.rotate[1]-="skewX"in a?Math.tan(a.skewX)*c.height:0,a.rotate[2]-="skewY"in a?Math.tan(a.skewY)*c.width:0),a.translate[0]+="skewX"in a?Math.tan(a.skewX)*c.height*2:0,a.translate[1]+="skewY"in a?Math.tan(a.skewY)*c.width*2:0);return a};l.prS.svgTransform=function(a,b,c){b={};var f;a=d.pT(a.getAttribute("transform"));for(f in c)b[f]=f in a?a[f]:"scale"===f?1:0;return b};d.sT=function(a){var b=a._el.getBBox(),c=d.pT(a._el.getAttribute("transform")),f,e,h=b.x+b.width/2,b=b.y+b.height/2;for(e in c)"translate"===e?(f=c[e]instanceof Array?c[e]:/\,|\s/.test(c[e])?c[e].split(/\,|\s/):[1*c[e],0],a._vS.svgTransform[e]=[1*f[0]||0,1*f[1]||0]):"scale"===e?a._vS.svgTransform[e]=1*c[e]||1:"rotate"===e?(f=c[e]instanceof Array?c[e]:/\s/.test(c[e])?[1*c[e].split(" ")[0],1*c[e].split(" ")[1].split(",")[0],1*c[e].split(" ")[1].split(",")[1]]:[1*c[e],h,b],a._vS.svgTransform[e]=f):/skew/.test(e)&&(a._vS.svgTransform[e]=1*c[e]||0);for(e in a._vS.svgTransform)e in a._vE.svgTransform||(a._vE.svgTransform[e]=a._vS.svgTransform[e]),e==="rotate"in a._vS.svgTransform&&"rotate"in a._vE.svgTransform&&(a._vE.svgTransform.rotate[1]=a._vS.svgTransform.rotate[1]=h,a._vE.svgTransform.rotate[2]=a._vS.svgTransform.rotate[2]=b)};d.pT=function(a){a=a&&/\)/.test(a)?a.split(")"):"none";var b,c={},d;if(a instanceof Array)for(b=0;b<a.length;b++)d=a[b].split("("),""!==d[0]&&(c[d[0].replace(/\s/,"")]=d[1]);return c};return d}}); |