path2d-polyfill/dist/path2d-polyfill.min.js

Polyfills Path2D api for canvas rendering

(function(){"use strict";const z={a:7,c:6,h:1,l:2,m:2,q:4,s:4,t:2,v:1,z:0},j=/([astvzqmhlc])([^astvzqmhlc]*)/gi,B=/-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi;function H(s){const t=s.match(B);return t?t.map(Number):[]}function O(s){const t=[],n=String(s).trim();return n[0]!=="M"&&n[0]!=="m"||n.replace(j,(o,a,i)=>{const l=H(i);let h=a.toLowerCase(),u=a;if(h==="m"&&l.length>2&&(t.push([u,...l.splice(0,2)]),h="l",u=u==="m"?"l":"L"),l.length<z[h])return"";for(t.push([u,...l.splice(0,z[h])]);l.length>=z[h]&&l.length&&z[h];)t.push([u,...l.splice(0,z[h])]);return""}),t}function $(s,t){const n=s.x*Math.cos(t)-s.y*Math.sin(t),o=s.y*Math.cos(t)+s.x*Math.sin(t);s.x=n,s.y=o}function V(s,t,n){s.x+=t,s.y+=n}function F(s,t){s.x*=t,s.y*=t}class I{#e;constructor(t){this.#e=[],t&&t instanceof I?this.#e.push(...t.#e):t&&(this.#e=O(t))}addCustomCommand(t){this.#e.push(t)}addPath(t){t&&t instanceof I&&this.#e.push(...t.#e)}moveTo(t,n){this.#e.push(["M",t,n])}lineTo(t,n){this.#e.push(["L",t,n])}arc(t,n,o,a,i,l){this.#e.push(["AC",t,n,o,a,i,!!l])}arcTo(t,n,o,a,i){this.#e.push(["AT",t,n,o,a,i])}ellipse(t,n,o,a,i,l,h,u){this.#e.push(["E",t,n,o,a,i,l,h,!!u])}closePath(){this.#e.push(["Z"])}bezierCurveTo(t,n,o,a,i,l){this.#e.push(["C",t,n,o,a,i,l])}quadraticCurveTo(t,n,o,a){this.#e.push(["Q",t,n,o,a])}rect(t,n,o,a){this.#e.push(["R",t,n,o,a])}roundRect(t,n,o,a,i){typeof i>"u"?this.#e.push(["RR",t,n,o,a,0]):this.#e.push(["RR",t,n,o,a,i])}buildPathInCanvas(t){let n=0,o=0,a,i,l,h,u,r,f,y,x,P,S,G,q,p,m,A,C,d,v,E,Q,R=null,M=null,b=null,T=null,w=null,k=null;t.beginPath();for(let c=0;c<this.#e.length;++c){d=this.#e[c][0],d!=="S"&&d!=="s"&&d!=="C"&&d!=="c"&&(R=null,M=null),d!=="T"&&d!=="t"&&d!=="Q"&&d!=="q"&&(b=null,T=null);let e;switch(d){case"m":case"M":e=this.#e[c],d==="m"?(n+=e[1],o+=e[2]):(n=e[1],o=e[2]),(d==="M"||!w)&&(w={x:n,y:o}),t.moveTo(n,o);break;case"l":e=this.#e[c],n+=e[1],o+=e[2],t.lineTo(n,o);break;case"L":e=this.#e[c],n=e[1],o=e[2],t.lineTo(n,o);break;case"H":e=this.#e[c],n=e[1],t.lineTo(n,o);break;case"h":e=this.#e[c],n+=e[1],t.lineTo(n,o);break;case"V":e=this.#e[c],o=e[1],t.lineTo(n,o);break;case"v":e=this.#e[c],o+=e[1],t.lineTo(n,o);break;case"a":case"A":if(e=this.#e[c],k===null)throw new Error("This should never happen");d==="a"?(n+=e[6],o+=e[7]):(n=e[6],o=e[7]),p=e[1],m=e[2],f=e[3]*Math.PI/180,l=!!e[4],h=!!e[5],u={x:n,y:o},r={x:(k.x-u.x)/2,y:(k.y-u.y)/2},$(r,-f),y=r.x*r.x/(p*p)+r.y*r.y/(m*m),y>1&&(y=Math.sqrt(y),p*=y,m*=y),v={x:p*r.y/m,y:-(m*r.x)/p},x=p*p*m*m,P=p*p*r.y*r.y+m*m*r.x*r.x,h!==l?F(v,Math.sqrt((x-P)/P)||0):F(v,-Math.sqrt((x-P)/P)||0),i=Math.atan2((r.y-v.y)/m,(r.x-v.x)/p),a=Math.atan2(-(r.y+v.y)/m,-(r.x+v.x)/p),$(v,f),V(v,(u.x+k.x)/2,(u.y+k.y)/2),t.save(),t.translate(v.x,v.y),t.rotate(f),t.scale(p,m),t.arc(0,0,1,i,a,!h),t.restore();break;case"C":e=this.#e[c],R=e[3],M=e[4],n=e[5],o=e[6],t.bezierCurveTo(e[1],e[2],R,M,n,o);break;case"c":e=this.#e[c],t.bezierCurveTo(e[1]+n,e[2]+o,e[3]+n,e[4]+o,e[5]+n,e[6]+o),R=e[3]+n,M=e[4]+o,n+=e[5],o+=e[6];break;case"S":e=this.#e[c],(R===null||M===null)&&(R=n,M=o),t.bezierCurveTo(2*n-R,2*o-M,e[1],e[2],e[3],e[4]),R=e[1],M=e[2],n=e[3],o=e[4];break;case"s":e=this.#e[c],(R===null||M===null)&&(R=n,M=o),t.bezierCurveTo(2*n-R,2*o-M,e[1]+n,e[2]+o,e[3]+n,e[4]+o),R=e[1]+n,M=e[2]+o,n+=e[3],o+=e[4];break;case"Q":e=this.#e[c],b=e[1],T=e[2],n=e[3],o=e[4],t.quadraticCurveTo(b,T,n,o);break;case"q":e=this.#e[c],b=e[1]+n,T=e[2]+o,n+=e[3],o+=e[4],t.quadraticCurveTo(b,T,n,o);break;case"T":e=this.#e[c],(b===null||T===null)&&(b=n,T=o),b=2*n-b,T=2*o-T,n=e[1],o=e[2],t.quadraticCurveTo(b,T,n,o);break;case"t":e=this.#e[c],(b===null||T===null)&&(b=n,T=o),b=2*n-b,T=2*o-T,n+=e[1],o+=e[2],t.quadraticCurveTo(b,T,n,o);break;case"z":case"Z":w&&(n=w.x,o=w.y),w=null,t.closePath();break;case"AC":e=this.#e[c],n=e[1],o=e[2],q=e[3],i=e[4],a=e[5],E=e[6],t.arc(n,o,q,i,a,E);break;case"AT":e=this.#e[c],S=e[1],G=e[2],n=e[3],o=e[4],q=e[5],t.arcTo(S,G,n,o,q);break;case"E":e=this.#e[c],n=e[1],o=e[2],p=e[3],m=e[4],f=e[5],i=e[6],a=e[7],E=e[8],t.save(),t.translate(n,o),t.rotate(f),t.scale(p,m),t.arc(0,0,1,i,a,E),t.restore();break;case"R":e=this.#e[c],n=e[1],o=e[2],A=e[3],C=e[4],w={x:n,y:o},t.rect(n,o,A,C);break;case"RR":e=this.#e[c],n=e[1],o=e[2],A=e[3],C=e[4],Q=e[5],w={x:n,y:o},t.roundRect(n,o,A,C,Q);break;default:throw new Error(`Invalid path command: ${d}`)}k?(k.x=n,k.y=o):k={x:n,y:o}}}}function L(s){return s!==null&&typeof s=="object"&&("x"in s||"y"in s)&&(typeof s.x=="number"||typeof s.y=="number"||typeof s.x>"u"||typeof s.y>"u")}function Z(s){return typeof s=="number"?{x:s,y:s}:{x:typeof s.x=="number"?s.x:0,y:typeof s.y=="number"?s.y:0}}function N(s,t,n,o,a=0){if(typeof a=="number")a=[a];else if(L(a))a=[a];else if(!Array.isArray(a))return;if(Array.isArray(a)){if(a.length===0||a.length>4)throw new RangeError(`Failed to execute 'roundRect' on '${this.constructor.name}': ${a.length} radii provided. Between one and four radii are necessary.`);a.forEach(x=>{if(L(x)){const P=x;if(typeof P.x=="number"&&P.x<0)throw new RangeError(`Failed to execute 'roundRect' on '${this.constructor.name}': Radius value ${P.x} is negative.`);if(typeof P.y=="number"&&P.y<0)throw new RangeError(`Failed to execute 'roundRect' on '${this.constructor.name}': Radius value ${P.y} is negative.`)}else{if(typeof x!="number")throw new TypeError(`Failed to execute 'roundRect' on '${this.constructor.name}': Radius value ${x} is not a number or DOMPointInit.`);if(typeof x=="number"&&x<0)throw new RangeError(`Failed to execute 'roundRect' on '${this.constructor.name}': Radius value ${x} is negative.`)}})}const i=a.map(Z);if(a.length===1&&i[0].x===0&&i[0].y===0){this.rect(s,t,n,o);return}const l=n/2,h=o/2,u={x:Math.min(l,i[0].x),y:Math.min(h,i[0].y)};let r=u,f=u,y=u;i.length===2&&(r={x:Math.min(l,i[1].x),y:Math.min(h,i[1].y)},y=r),i.length===3&&(r={x:Math.min(l,i[1].x),y:Math.min(h,i[1].y)},y=r,f={x:Math.min(l,i[2].x),y:Math.min(h,i[2].y)}),i.length===4&&(r={x:Math.min(l,i[1].x),y:Math.min(h,i[1].y)},f={x:Math.min(l,i[2].x),y:Math.min(h,i[2].y)},y={x:Math.min(l,i[3].x),y:Math.min(h,i[3].y)}),this.moveTo(s,t+o-y.y),u.x===u.y&&u.x>0?this.arcTo(s,t,s+u.x,t,u.x):u.x>0||u.y>0?this.ellipse(s+u.x,t+u.y,u.x,u.y,0,Math.PI,Math.PI*1.5,!1):this.lineTo(s,t),this.lineTo(s+n-r.x,t),r.x===r.y&&r.x>0?this.arcTo(s+n,t,s+n,t+r.y,r.x):r.x>0||r.y>0?this.ellipse(s+n-r.x,t+r.y,r.x,r.y,0,Math.PI*1.5,0,!1):this.lineTo(s+n,t),this.lineTo(s+n,t+o-f.y),f.x===f.y&&f.x>0?this.arcTo(s+n,t+o,s+n-f.x,t+o,f.x):f.x>0||f.y>0?this.ellipse(s+n-f.x,t+o-f.y,f.x,f.y,0,0,Math.PI*.5,!1):this.lineTo(s+n,t+o),this.lineTo(s+y.x,t+o),y.x===y.y&&y.x>0?this.arcTo(s,t+o,s,t+o-y.y,y.x):y.x>0||y.y>0?this.ellipse(s+y.x,t+o-y.y,y.x,y.y,0,Math.PI*.5,Math.PI,!1):this.lineTo(s,t+o),this.closePath(),this.moveTo(s,t)}function U(s){if(!s)return;const t=s.prototype.clip,n=s.prototype.fill,o=s.prototype.stroke,a=s.prototype.isPointInPath;s.prototype.clip=function(...l){if(l[0]instanceof I){const u=l[0],r=l[1]!==void 0?l[1]:"nonzero";u.buildPathInCanvas(this),t.apply(this,[r]);return}const h=l[0]!==void 0?l[0]:"nonzero";t.apply(this,[h])},s.prototype.fill=function(...l){if(l[0]instanceof I){const u=l[0],r=l[1]!==void 0?l[1]:"nonzero";u.buildPathInCanvas(this),n.apply(this,[r]);return}const h=l[0]!==void 0?l[0]:"nonzero";n.apply(this,[h])},s.prototype.stroke=function(l){l&&l.buildPathInCanvas(this),o.apply(this)},s.prototype.isPointInPath=function(...l){if(l[0]instanceof I){const h=l[0],u=l[1],r=l[2],f=l[3]!==void 0?l[3]:"nonzero";return h.buildPathInCanvas(this),a.apply(this,[u,r,f])}return a.apply(this,l)}}function X(s){s&&!s.prototype.roundRect&&(s.prototype.roundRect=N)}function Y(s){s&&!s.prototype.roundRect&&(s.prototype.roundRect=N)}function _(){window&&(window.CanvasRenderingContext2D&&!window.Path2D&&(window.Path2D=I,U(window.CanvasRenderingContext2D)),Y(window.Path2D),X(window.CanvasRenderingContext2D))}_()})();