diff --git a/bin/core.d.ts b/bin/core.d.ts index d978eda..4a09b67 100644 --- a/bin/core.d.ts +++ b/bin/core.d.ts @@ -10,6 +10,21 @@ export interface DrawingSurface { height: number | SVGAnimatedLength; } export interface Options { + maxRandomnessOffset?: number; + roughness?: number; + bowing?: number; + stroke?: string; + strokeWidth?: number; + curveTightness?: number; + curveStepCount?: number; + fill?: string; + fillStyle?: string; + fillWeight?: number; + hachureAngle?: number; + hachureGap?: number; + simplification?: number; +} +export interface ResolvedOptions extends Options { maxRandomnessOffset: number; roughness: number; bowing: number; @@ -17,12 +32,10 @@ export interface Options { strokeWidth: number; curveTightness: number; curveStepCount: number; - fill: string | null; fillStyle: string; fillWeight: number; hachureAngle: number; hachureGap: number; - simplification?: number; } export declare type OpType = 'move' | 'bcurveTo' | 'lineTo' | 'qcurveTo'; export declare type OpSetType = 'path' | 'fillPath' | 'fillSketch' | 'path2Dfill' | 'path2Dpattern'; @@ -38,7 +51,7 @@ export interface OpSet { } export interface Drawable { shape: string; - options: Options; + options: ResolvedOptions; sets: OpSet[]; } export interface PathInfo { diff --git a/bin/fillers/dot-filler.d.ts b/bin/fillers/dot-filler.d.ts index 98ae518..ab02cfe 100644 --- a/bin/fillers/dot-filler.d.ts +++ b/bin/fillers/dot-filler.d.ts @@ -1,10 +1,10 @@ import { PatternFiller, RenderHelper } from './filler-interface'; -import { Options, OpSet } from '../core'; +import { ResolvedOptions, OpSet } from '../core'; import { Point } from '../geometry'; export declare class DotFiller implements PatternFiller { renderer: RenderHelper; constructor(renderer: RenderHelper); - fillPolygon(points: Point[], o: Options): OpSet; - fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet; + fillPolygon(points: Point[], o: ResolvedOptions): OpSet; + fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet; private dotsOnLines; } diff --git a/bin/fillers/filler-interface.d.ts b/bin/fillers/filler-interface.d.ts index a064ffd..bd2be7d 100644 --- a/bin/fillers/filler-interface.d.ts +++ b/bin/fillers/filler-interface.d.ts @@ -1,11 +1,11 @@ -import { Options, OpSet, Op } from '../core'; +import { ResolvedOptions, OpSet, Op } from '../core'; import { Point } from '../geometry'; export interface PatternFiller { - fillPolygon(points: Point[], o: Options): OpSet; - fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet; + fillPolygon(points: Point[], o: ResolvedOptions): OpSet; + fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet; } export interface RenderHelper { - doubleLine(x1: number, y1: number, x2: number, y2: number, o: Options): Op[]; - getOffset(min: number, max: number, ops: Options): number; - ellipse(x: number, y: number, width: number, height: number, o: Options): OpSet; + doubleLine(x1: number, y1: number, x2: number, y2: number, o: ResolvedOptions): Op[]; + getOffset(min: number, max: number, ops: ResolvedOptions): number; + ellipse(x: number, y: number, width: number, height: number, o: ResolvedOptions): OpSet; } diff --git a/bin/fillers/filler-utils.d.ts b/bin/fillers/filler-utils.d.ts index 553d06e..7386f43 100644 --- a/bin/fillers/filler-utils.d.ts +++ b/bin/fillers/filler-utils.d.ts @@ -1,8 +1,8 @@ import { Point, Line } from '../geometry'; -import { Options } from '../core'; +import { ResolvedOptions } from '../core'; import { RenderHelper } from './filler-interface'; export declare function lineLength(line: Line): number; export declare function getIntersectingLines(line: number[], points: Point[]): Point[]; export declare function affine(x: number, y: number, cx: number, cy: number, sinAnglePrime: number, cosAnglePrime: number, R: number): Point; -export declare function hachureLinesForPolygon(points: Point[], o: Options): Line[]; -export declare function hachureLinesForEllipse(cx: number, cy: number, width: number, height: number, o: Options, renderer: RenderHelper): Line[]; +export declare function hachureLinesForPolygon(points: Point[], o: ResolvedOptions): Line[]; +export declare function hachureLinesForEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions, renderer: RenderHelper): Line[]; diff --git a/bin/fillers/filler.d.ts b/bin/fillers/filler.d.ts index 9421eaa..26d1d4d 100644 --- a/bin/fillers/filler.d.ts +++ b/bin/fillers/filler.d.ts @@ -1,3 +1,3 @@ -import { Options } from '../core'; +import { ResolvedOptions } from '../core'; import { PatternFiller, RenderHelper } from './filler-interface'; -export declare function getFiller(renderer: RenderHelper, o: Options): PatternFiller; +export declare function getFiller(renderer: RenderHelper, o: ResolvedOptions): PatternFiller; diff --git a/bin/fillers/hachure-filler.d.ts b/bin/fillers/hachure-filler.d.ts index ea990ef..387d7bc 100644 --- a/bin/fillers/hachure-filler.d.ts +++ b/bin/fillers/hachure-filler.d.ts @@ -1,12 +1,12 @@ import { PatternFiller, RenderHelper } from './filler-interface'; -import { Options, OpSet } from '../core'; +import { ResolvedOptions, OpSet } from '../core'; import { Point } from '../geometry'; export declare class HachureFiller implements PatternFiller { renderer: RenderHelper; constructor(renderer: RenderHelper); - fillPolygon(points: Point[], o: Options): OpSet; - fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet; - protected _fillPolygon(points: Point[], o: Options, connectEnds?: boolean): OpSet; - protected _fillEllipse(cx: number, cy: number, width: number, height: number, o: Options, connectEnds?: boolean): OpSet; + fillPolygon(points: Point[], o: ResolvedOptions): OpSet; + fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet; + protected _fillPolygon(points: Point[], o: ResolvedOptions, connectEnds?: boolean): OpSet; + protected _fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions, connectEnds?: boolean): OpSet; private renderLines; } diff --git a/bin/fillers/hatch-filler.d.ts b/bin/fillers/hatch-filler.d.ts index 089743b..405bb3e 100644 --- a/bin/fillers/hatch-filler.d.ts +++ b/bin/fillers/hatch-filler.d.ts @@ -1,7 +1,7 @@ import { HachureFiller } from './hachure-filler'; -import { Options, OpSet } from '../core'; +import { ResolvedOptions, OpSet } from '../core'; import { Point } from '../geometry'; export declare class HatchFiller extends HachureFiller { - fillPolygon(points: Point[], o: Options): OpSet; - fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet; + fillPolygon(points: Point[], o: ResolvedOptions): OpSet; + fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet; } diff --git a/bin/fillers/zigzag-filler.d.ts b/bin/fillers/zigzag-filler.d.ts index cd6ba95..1c0d26c 100644 --- a/bin/fillers/zigzag-filler.d.ts +++ b/bin/fillers/zigzag-filler.d.ts @@ -1,7 +1,7 @@ import { HachureFiller } from './hachure-filler'; -import { Options, OpSet } from '../core'; +import { ResolvedOptions, OpSet } from '../core'; import { Point } from '../geometry'; export declare class ZigZagFiller extends HachureFiller { - fillPolygon(points: Point[], o: Options): OpSet; - fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet; + fillPolygon(points: Point[], o: ResolvedOptions): OpSet; + fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet; } diff --git a/bin/generator.d.ts b/bin/generator.d.ts index 30bc840..0914346 100644 --- a/bin/generator.d.ts +++ b/bin/generator.d.ts @@ -1,14 +1,14 @@ import { RoughRenderer } from './renderer.js'; -import { Config, DrawingSurface, Options, Drawable, OpSet, PathInfo } from './core'; +import { Config, DrawingSurface, Options, ResolvedOptions, Drawable, OpSet, PathInfo } from './core'; import { Point } from './geometry.js'; export declare class RoughGenerator { private config; private surface; private renderer; - defaultOptions: Options; + defaultOptions: ResolvedOptions; constructor(config: Config | null, surface: DrawingSurface); - protected _options(options?: Options): Options; - protected _drawable(shape: string, sets: OpSet[], options: Options): Drawable; + protected _options(options?: Options): ResolvedOptions; + protected _drawable(shape: string, sets: OpSet[], options: ResolvedOptions): Drawable; protected readonly lib: RoughRenderer; private getCanvasSize; protected computePolygonSize(points: Point[]): Point; diff --git a/bin/generator.js b/bin/generator.js index a68d840..e9540dc 100644 --- a/bin/generator.js +++ b/bin/generator.js @@ -10,7 +10,6 @@ export class RoughGenerator { strokeWidth: 1, curveTightness: 0, curveStepCount: 9, - fill: null, fillStyle: 'hachure', fillWeight: -1, hachureAngle: -41, diff --git a/bin/renderer.d.ts b/bin/renderer.d.ts index 1667763..a866dc8 100644 --- a/bin/renderer.d.ts +++ b/bin/renderer.d.ts @@ -1,20 +1,20 @@ -import { Options, OpSet, Op } from './core'; +import { ResolvedOptions, OpSet, Op } from './core'; import { Point } from './geometry'; export declare class RoughRenderer { - line(x1: number, y1: number, x2: number, y2: number, o: Options): OpSet; - linearPath(points: Point[], close: boolean, o: Options): OpSet; - polygon(points: Point[], o: Options): OpSet; - rectangle(x: number, y: number, width: number, height: number, o: Options): OpSet; - curve(points: Point[], o: Options): OpSet; - ellipse(x: number, y: number, width: number, height: number, o: Options): OpSet; - arc(x: number, y: number, width: number, height: number, start: number, stop: number, closed: boolean, roughClosure: boolean, o: Options): OpSet; - svgPath(path: string, o: Options): OpSet; - solidFillPolygon(points: Point[], o: Options): OpSet; - patternFillPolygon(points: Point[], o: Options): OpSet; - patternFillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet; - patternFillArc(x: number, y: number, width: number, height: number, start: number, stop: number, o: Options): OpSet; - getOffset(min: number, max: number, ops: Options): number; - doubleLine(x1: number, y1: number, x2: number, y2: number, o: Options): Op[]; + line(x1: number, y1: number, x2: number, y2: number, o: ResolvedOptions): OpSet; + linearPath(points: Point[], close: boolean, o: ResolvedOptions): OpSet; + polygon(points: Point[], o: ResolvedOptions): OpSet; + rectangle(x: number, y: number, width: number, height: number, o: ResolvedOptions): OpSet; + curve(points: Point[], o: ResolvedOptions): OpSet; + ellipse(x: number, y: number, width: number, height: number, o: ResolvedOptions): OpSet; + arc(x: number, y: number, width: number, height: number, start: number, stop: number, closed: boolean, roughClosure: boolean, o: ResolvedOptions): OpSet; + svgPath(path: string, o: ResolvedOptions): OpSet; + solidFillPolygon(points: Point[], o: ResolvedOptions): OpSet; + patternFillPolygon(points: Point[], o: ResolvedOptions): OpSet; + patternFillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet; + patternFillArc(x: number, y: number, width: number, height: number, start: number, stop: number, o: ResolvedOptions): OpSet; + getOffset(min: number, max: number, ops: ResolvedOptions): number; + doubleLine(x1: number, y1: number, x2: number, y2: number, o: ResolvedOptions): Op[]; private _line; private _curve; private _ellipse; diff --git a/bin/svg.js b/bin/svg.js index 7d13446..b5a3f70 100644 --- a/bin/svg.js +++ b/bin/svg.js @@ -85,7 +85,7 @@ export class RoughSVG { path.setAttribute('d', this.opsToPath(drawing)); path.style.stroke = 'none'; path.style.strokeWidth = '0'; - path.style.fill = o.fill; + path.style.fill = o.fill || null; break; } case 'fillSketch': { @@ -97,7 +97,7 @@ export class RoughSVG { path.setAttribute('d', drawing.path || ''); path.style.stroke = 'none'; path.style.strokeWidth = '0'; - path.style.fill = o.fill; + path.style.fill = o.fill || null; break; } case 'path2Dpattern': { @@ -144,7 +144,7 @@ export class RoughSVG { } const path = doc.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttribute('d', this.opsToPath(drawing)); - path.style.stroke = o.fill; + path.style.stroke = o.fill || null; path.style.strokeWidth = fweight + ''; path.style.fill = 'none'; return path; diff --git a/dist/rough.es5.js b/dist/rough.es5.js index 33b80bb..b0deb63 100644 --- a/dist/rough.es5.js +++ b/dist/rough.es5.js @@ -1717,7 +1717,6 @@ var rough = (function () { strokeWidth: 1, curveTightness: 0, curveStepCount: 9, - fill: null, fillStyle: 'hachure', fillWeight: -1, hachureAngle: -41, @@ -2704,7 +2703,7 @@ var rough = (function () { path.setAttribute('d', this.opsToPath(drawing)); path.style.stroke = 'none'; path.style.strokeWidth = '0'; - path.style.fill = o.fill; + path.style.fill = o.fill || null; break; } case 'fillSketch': @@ -2718,7 +2717,7 @@ var rough = (function () { path.setAttribute('d', drawing.path || ''); path.style.stroke = 'none'; path.style.strokeWidth = '0'; - path.style.fill = o.fill; + path.style.fill = o.fill || null; break; } case 'path2Dpattern': @@ -2784,7 +2783,7 @@ var rough = (function () { } var path = doc.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttribute('d', this.opsToPath(drawing)); - path.style.stroke = o.fill; + path.style.stroke = o.fill || null; path.style.strokeWidth = fweight + ''; path.style.fill = 'none'; return path; diff --git a/dist/rough.es5.min.js b/dist/rough.es5.min.js index 0e99999..c74dd5d 100644 --- a/dist/rough.es5.min.js +++ b/dist/rough.es5.min.js @@ -1 +1 @@ -var rough=function(){"use strict";function e(e,t){return e.type===t}function t(e){var t=e[0],l=e[1];return y(f(t[0]-l[0],2)+f(t[1]-l[1],2))}function l(e,t){for(var l,a=[],n=new z([e[0],e[1]],[e[2],e[3]]),s=0;sg&&(g=4*t.strokeWidth),g=d(g,.1);for(var y=h%180*(c/180),k=v(y),x=_(y),b=p(y),m=new E(o-1,r+1,n-1,s+1,g,x,k,b),w=void 0;null!=(w=m.nextLine());)for(var P=l(w,e),O=0;O=f&&(f=4*i.strokeWidth);var h=i.fillWeight;0>h&&(h=i.strokeWidth/2);for(var g=p(u%180*(c/180)),v=d/r,_=y(v*g*v*g+1),x=v*g/_,b=1/_,m=f/(r*d/y(d*b*(d*b)+r*x*(r*x))/r),w=y(r*r-(e-r+m)*(e-r+m)),P=e-r+m;Pf){var h=y(1-f/(this._rx*this._rx*this._ry*this._ry));this._rx*=h,this._ry*=h,u=0}else u=(i===o?-1:1)*y(f/(this._rx*this._rx*d*d+this._ry*this._ry*p*p));var s=u*this._rx*d/this._ry,x=-u*this._ry*p/this._rx;this._C=[0,0],this._C[0]=this._cosPhi*s-this._sinPhi*x+(t[0]+l[0])/2,this._C[1]=this._sinPhi*s+this._cosPhi*x+(t[1]+l[1])/2,this._theta=this.calculateVectorAngle(1,0,(p-s)/this._rx,(d-x)/this._ry);var m=this.calculateVectorAngle((p-s)/this._rx,(d-x)/this._ry,(-p-s)/this._rx,(-d-x)/this._ry);!o&&0m&&(m+=2*c),this._numSegs=g(k(m/(c/2))),this._delta=m/this._numSegs,this._T=8/3*_(this._delta/4)*_(this._delta/4)/_(this._delta/2)}}return m(e,[{key:"getNextSegment",value:function(){if(this._segIndex===this._numSegs)return null;var e=v(this._theta),t=_(this._theta),l=this._theta+this._delta,a=v(l),n=_(l),i=[this._cosPhi*this._rx*a-this._sinPhi*this._ry*n+this._C[0],this._sinPhi*this._rx*a+this._cosPhi*this._ry*n+this._C[1]],s=[this._from[0]+this._T*(-this._cosPhi*this._rx*t-this._sinPhi*this._ry*e),this._from[1]+this._T*(-this._sinPhi*this._rx*t+this._cosPhi*this._ry*e)],o=[i[0]+this._T*(this._cosPhi*this._rx*n+this._sinPhi*this._ry*a),i[1]+this._T*(this._sinPhi*this._rx*n-this._cosPhi*this._ry*a)];return this._theta=l,this._from=[i[0],i[1]],this._segIndex++,{cp1:s,cp2:o,to:i}}},{key:"calculateVectorAngle",value:function(e,t,l,a){var n=Math.atan2,i=n(t,e),s=n(a,l);return s>=i?s-i:2*c-(i-s)}}]),e}(),C=function(){function e(t,l){b(this,e),this.sets=t,this.closed=l}return m(e,[{key:"fit",value:function(e){var t=[],l=!0,a=!1,n=void 0;try{for(var s,o=this.sets[Symbol.iterator]();!(l=(s=o.next()).done);l=!0){var r=s.value,p=r.length,u=h(e*p);if(5>u){if(5>=p)continue;u=5}t.push(this.reduce(r,u))}}catch(e){a=!0,n=e}finally{try{!l&&o.return&&o.return()}finally{if(a)throw n}}var f="",g=!0,y=!1,c=void 0;try{for(var v,_,k=t[Symbol.iterator]();!(g=(v=k.next()).done);g=!0){_=v.value;for(var x,b=0;b<_.length;b++)x=_[b],f+=0===b?"M"+x[0]+","+x[1]:"L"+x[0]+","+x[1];this.closed&&(f+="z ")}}catch(e){y=!0,c=e}finally{try{!g&&k.return&&k.return()}finally{if(y)throw c}}return f}},{key:"distance",value:function(e,t){return y(f(e[0]-t[0],2)+f(e[1]-t[1],2))}},{key:"reduce",value:function(e,t){if(e.length<=t)return e;for(var l=e.slice(0);l.length>t;){for(var n=-1,o=-1,r=1;rn||s=u(e.py1,e.py2)&&this.py1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.py2>=u(e.py1,e.py2)&&this.py2<=d(e.py1,e.py2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=this.px1,this.yi=n*this.xi+s,!(-1e-5>(this.py1-this.yi)*(this.yi-this.py2)||-1e-5>(e.py1-this.yi)*(this.yi-e.py2))&&(!(1e-5>k(e.a))||!(-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))):n===t?(this.xi=e.px1,this.yi=l*this.xi+i,!(-1e-5>(e.py1-this.yi)*(this.yi-e.py2)||-1e-5>(this.py1-this.yi)*(this.yi-this.py2))&&(!(1e-5>k(o))||!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)))):l===n?i==s&&(this.px1>=u(e.px1,e.px2)&&this.px1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.px2>=u(e.px1,e.px2)&&this.px2<=d(e.px1,e.px2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=(s-i)/(l-n),this.yi=l*this.xi+i,!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)||-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))}}]),e}(),E=function(){function e(t,l,a,n,i,s,o,r){b(this,e),this.deltaX=0,this.hGap=0,this.top=t,this.bottom=l,this.left=a,this.right=n,this.gap=i,this.sinAngle=s,this.tanAngle=r,1e-4>k(s)?this.pos=a+i:.9999k(this.sinAngle)){if(this.posthis.right&&l>this.right;)if(this.pos+=this.hGap,t=this.pos-this.deltaX/2,l=this.pos+this.deltaX/2,this.pos>this.right+this.deltaX)return null;var i=new z([t,a],[l,n]);this.sLeft&&i.intersects(this.sLeft)&&(t=i.xi,a=i.yi),this.sRight&&i.intersects(this.sRight)&&(l=i.xi,n=i.yi),0s&&(s=4*a.strokeWidth),s=d(s,.1);var o=a.fillWeight;0>o&&(o=a.strokeWidth/2);var r=!0,p=!1,u=void 0;try{for(var f,h=e[Symbol.iterator]();!(r=(f=h.next()).done);r=!0)for(var y=f.value,k=t(y),x=k/s,b=g(x)-1,m=Math.atan((y[1][1]-y[0][1])/(y[1][0]-y[0][0])),w=0;wg;)g+=2*c,y+=2*c;y-g>2*c&&(g=0,y=2*c);var x=2*c/p.curveStepCount,b=u(x/2,(y-g)/2),m=this._arc(b,o,d,f,h,g,y,1,p),w=this._arc(b,o,d,f,h,g,y,1.5,p),P=m.concat(w);return s&&(r?(P=P.concat(this.doubleLine(o,d,o+f*v(g),d+h*_(g),p)),P=P.concat(this.doubleLine(o,d,o+f*v(y),d+h*_(y),p))):(P.push({op:"lineTo",data:[o,d]}),P.push({op:"lineTo",data:[o+f*v(g),d+h*_(g)]}))),{type:"path",ops:P}}},{key:"svgPath",value:function(e,t){e=(e||"").replace(/\n/g," ").replace(/(-\s)/g,"-").replace("/(ss)/g"," ");var l=new A(e);if(t.simplification){var a=new C(l.linearPoints,l.closed),n=a.fit(t.simplification);l=new A(n)}for(var o=[],r=l.segments||[],d=0;du;)u+=2*c,f+=2*c;f-u>2*c&&(u=0,f=2*c);for(var h=(f-u)/s.curveStepCount,g=[],y=u;y<=f;y+=h)g.push([o+p*v(y),r+d*_(y)]);return g.push([o+p*v(f),r+d*_(f)]),g.push([o,r]),this.patternFillPolygon(g,s)}},{key:"getOffset",value:function(e,t,l){return l.roughness*(Math.random()*(t-e)+e)}},{key:"doubleLine",value:function(e,t,l,a,n){var i=this._line(e,t,l,a,n,!0,!1),s=this._line(e,t,l,a,n,!0,!0);return i.concat(s)}},{key:"_line",value:function(e,t,l,a,n,i,s){var o=f(e-l,2)+f(t-a,2),r=n.maxRandomnessOffset||0;100*(r*r)>o&&(r=y(o)/10);var p=r/2,d=.2+.2*Math.random(),u=n.bowing*n.maxRandomnessOffset*(a-t)/200,h=n.bowing*n.maxRandomnessOffset*(e-l)/200;u=this.getOffset(-u,u,n),h=this.getOffset(-h,h,n);var g=[];return i&&(s?g.push({op:"move",data:[e+this.getOffset(-p,p,n),t+this.getOffset(-p,p,n)]}):g.push({op:"move",data:[e+this.getOffset(-r,r,n),t+this.getOffset(-r,r,n)]})),s?g.push({op:"bcurveTo",data:[u+e+(l-e)*d+this.getOffset(-p,p,n),h+t+(a-t)*d+this.getOffset(-p,p,n),u+e+2*(l-e)*d+this.getOffset(-p,p,n),h+t+2*(a-t)*d+this.getOffset(-p,p,n),l+this.getOffset(-p,p,n),a+this.getOffset(-p,p,n)]}):g.push({op:"bcurveTo",data:[u+e+(l-e)*d+this.getOffset(-r,r,n),h+t+(a-t)*d+this.getOffset(-r,r,n),u+e+2*(l-e)*d+this.getOffset(-r,r,n),h+t+2*(a-t)*d+this.getOffset(-r,r,n),l+this.getOffset(-r,r,n),a+this.getOffset(-r,r,n)]}),g}},{key:"_curve",value:function(e,t,l){var a=e.length,n=[];if(3h;h++)0===h?o.push({op:"move",data:[r.x,r.y]}):o.push({op:"move",data:[r.x+this.getOffset(-d[0],d[0],p),r.y+this.getOffset(-d[0],d[0],p)]}),u=[n+this.getOffset(-d[h],d[h],p),s+this.getOffset(-d[h],d[h],p)],o.push({op:"bcurveTo",data:[e+this.getOffset(-d[h],d[h],p),t+this.getOffset(-d[h],d[h],p),l+this.getOffset(-d[h],d[h],p),a+this.getOffset(-d[h],d[h],p),u[0],u[1]]});return r.setPosition(u[0],u[1]),o}},{key:"_processSegment",value:function(e,t,l,a){var n=[];switch(t.key){case"M":case"m":{var s="m"===t.key;if(2<=t.data.length){var o=+t.data[0],r=+t.data[1];s&&(o+=e.x,r+=e.y);var p=1*(a.maxRandomnessOffset||0);o+=this.getOffset(-p,p,a),r+=this.getOffset(-p,p,a),e.setPosition(o,r),n.push({op:"move",data:[o,r]})}break}case"L":case"l":{var d="l"===t.key;if(2<=t.data.length){var u=+t.data[0],h=+t.data[1];d&&(u+=e.x,h+=e.y),n=n.concat(this.doubleLine(e.x,e.y,u,h,a)),e.setPosition(u,h)}break}case"H":case"h":{var g="h"===t.key;if(t.data.length){var c=+t.data[0];g&&(c+=e.x),n=n.concat(this.doubleLine(e.x,e.y,c,e.y,a)),e.setPosition(c,e.y)}break}case"V":case"v":{var v="v"===t.key;if(t.data.length){var _=+t.data[0];v&&(_+=e.y),n=n.concat(this.doubleLine(e.x,e.y,e.x,_,a)),e.setPosition(e.x,_)}break}case"Z":case"z":{e.first&&(n=n.concat(this.doubleLine(e.x,e.y,e.first[0],e.first[1],a)),e.setPosition(e.first[0],e.first[1]),e.first=null);break}case"C":case"c":{var k="c"===t.key;if(6<=t.data.length){var b=+t.data[0],m=+t.data[1],w=+t.data[2],P=+t.data[3],O=+t.data[4],S=+t.data[5];k&&(b+=e.x,w+=e.x,O+=e.x,m+=e.y,P+=e.y,S+=e.y);var A=this._bezierTo(b,m,w,P,O,S,e,a);n=n.concat(A),e.bezierReflectionPoint=[O+(O-w),S+(S-P)]}break}case"S":case"s":{var C="s"===t.key;if(4<=t.data.length){var z=+t.data[0],E=+t.data[1],L=+t.data[2],W=+t.data[3];C&&(z+=e.x,L+=e.x,E+=e.y,W+=e.y);var N=z,R=E,D=l?l.key:"",B=null;("c"===D||"C"===D||"s"===D||"S"===D)&&(B=e.bezierReflectionPoint),B&&(N=B[0],R=B[1]);var F=this._bezierTo(N,R,z,E,L,W,e,a);n=n.concat(F),e.bezierReflectionPoint=[L+(L-z),W+(W-E)]}break}case"Q":case"q":{var M="q"===t.key;if(4<=t.data.length){var q=+t.data[0],U=+t.data[1],X=+t.data[2],V=+t.data[3];M&&(q+=e.x,X+=e.x,U+=e.y,V+=e.y);var G=1*(1+.2*a.roughness),j=1.5*(1+.22*a.roughness);n.push({op:"move",data:[e.x+this.getOffset(-G,G,a),e.y+this.getOffset(-G,G,a)]});var I=[X+this.getOffset(-G,G,a),V+this.getOffset(-G,G,a)];n.push({op:"qcurveTo",data:[q+this.getOffset(-G,G,a),U+this.getOffset(-G,G,a),I[0],I[1]]}),n.push({op:"move",data:[e.x+this.getOffset(-j,j,a),e.y+this.getOffset(-j,j,a)]}),I=[X+this.getOffset(-j,j,a),V+this.getOffset(-j,j,a)],n.push({op:"qcurveTo",data:[q+this.getOffset(-j,j,a),U+this.getOffset(-j,j,a),I[0],I[1]]}),e.setPosition(I[0],I[1]),e.quadReflectionPoint=[X+(X-q),V+(V-U)]}break}case"T":case"t":{var Q="t"===t.key;if(2<=t.data.length){var $=+t.data[0],Z=+t.data[1];Q&&($+=e.x,Z+=e.y);var H=$,J=Z,Y=l?l.key:"",K=null;("q"===Y||"Q"===Y||"t"===Y||"T"===Y)&&(K=e.quadReflectionPoint),K&&(H=K[0],J=K[1]);var ee=1*(1+.2*a.roughness),te=1.5*(1+.22*a.roughness);n.push({op:"move",data:[e.x+this.getOffset(-ee,ee,a),e.y+this.getOffset(-ee,ee,a)]});var le=[$+this.getOffset(-ee,ee,a),Z+this.getOffset(-ee,ee,a)];n.push({op:"qcurveTo",data:[H+this.getOffset(-ee,ee,a),J+this.getOffset(-ee,ee,a),le[0],le[1]]}),n.push({op:"move",data:[e.x+this.getOffset(-te,te,a),e.y+this.getOffset(-te,te,a)]}),le=[$+this.getOffset(-te,te,a),Z+this.getOffset(-te,te,a)],n.push({op:"qcurveTo",data:[H+this.getOffset(-te,te,a),J+this.getOffset(-te,te,a),le[0],le[1]]}),e.setPosition(le[0],le[1]),e.quadReflectionPoint=[$+($-H),Z+(Z-J)]}break}case"A":case"a":{var ae="a"===t.key;if(7<=t.data.length){var ne=+t.data[0],ie=+t.data[1],se=+t.data[2],oe=+t.data[3],re=+t.data[4],pe=+t.data[5],de=+t.data[6];if(ae&&(pe+=e.x,de+=e.y),pe===e.x&&de===e.y)break;if(0==ne||0==ie)n=n.concat(this.doubleLine(e.x,e.y,pe,de,a)),e.setPosition(pe,de);else for(var ue=0;1>ue;ue++)for(var fe,he=new T([e.x,e.y],[pe,de],[ne,ie],se,!!oe,!!re),ge=he.getNextSegment();ge;)fe=this._bezierTo(ge.cp1[0],ge.cp1[1],ge.cp2[0],ge.cp2[1],ge.to[0],ge.to[1],e,a),n=n.concat(fe),ge=he.getNextSegment()}break}default:}return n}}]),e}(),F="undefined"!=typeof self,M=F&&self&&self.document&&self.document.currentScript&&self.document.currentScript.src,q="undefined"!=typeof self,U=function(){function e(t,l){b(this,e),this.defaultOptions={maxRandomnessOffset:2,roughness:1,bowing:1,stroke:"#000",strokeWidth:1,curveTightness:0,curveStepCount:9,fill:null,fillStyle:"hachure",fillWeight:-1,hachureAngle:-41,hachureGap:-1},this.config=t||{},this.surface=l,this.renderer=o(this.config),this.config.options&&(this.defaultOptions=this._options(this.config.options))}return m(e,[{key:"_options",value:function(e){return e?Object.assign({},this.defaultOptions,e):this.defaultOptions}},{key:"_drawable",value:function(e,t,l){return{shape:e,sets:t||[],options:l||this.defaultOptions}}},{key:"getCanvasSize",value:function(){var e=function(e){return e&&"object"===("undefined"==typeof e?"undefined":x(e))&&e.baseVal&&e.baseVal.value?e.baseVal.value:e||100};return this.surface?[e(this.surface.width),e(this.surface.height)]:[100,100]}},{key:"computePolygonSize",value:function(e){if(e.length){for(var t=e[0][0],l=e[0][0],a=e[0][1],n=e[0][1],s=1;sl&&(l=t.strokeWidth/2),{d:this.opsToPath(e),stroke:t.fill||"none",strokeWidth:l,fill:"none"}}},{key:"opsToPath",value:function(e){var t="",l=!0,a=!1,n=void 0;try{for(var i,s=e.ops[Symbol.iterator]();!(l=(i=s.next()).done);l=!0){var o=i.value,r=o.data;switch(o.op){case"move":t+="M"+r[0]+" "+r[1]+" ";break;case"bcurveTo":t+="C"+r[0]+" "+r[1]+", "+r[2]+" "+r[3]+", "+r[4]+" "+r[5]+" ";break;case"qcurveTo":t+="Q"+r[0]+" "+r[1]+", "+r[2]+" "+r[3]+" ";break;case"lineTo":t+="L"+r[0]+" "+r[1]+" ";}}}catch(e){a=!0,n=e}finally{try{!l&&s.return&&s.return()}finally{if(a)throw n}}return t.trim()}},{key:"lib",get:function(){return this.renderer}}]),e}(),X="undefined"!=typeof document,V=function(){function e(t,l){b(this,e),this.canvas=t,this.ctx=this.canvas.getContext("2d"),this.gen=new U(l||null,this.canvas)}return m(e,[{key:"line",value:function(e,t,l,a,n){var i=this.gen.line(e,t,l,a,n);return this.draw(i),i}},{key:"rectangle",value:function(e,t,l,a,n){var i=this.gen.rectangle(e,t,l,a,n);return this.draw(i),i}},{key:"ellipse",value:function(e,t,l,a,n){var i=this.gen.ellipse(e,t,l,a,n);return this.draw(i),i}},{key:"circle",value:function(e,t,l,a){var n=this.gen.circle(e,t,l,a);return this.draw(n),n}},{key:"linearPath",value:function(e,t){var l=this.gen.linearPath(e,t);return this.draw(l),l}},{key:"polygon",value:function(e,t){var l=this.gen.polygon(e,t);return this.draw(l),l}},{key:"arc",value:function(e,t,l,a,n,i){var s=!!(6a&&(a=l.strokeWidth/2),e.save(),e.strokeStyle=l.fill||"",e.lineWidth=a,this._drawToContext(e,t),e.restore()}},{key:"_drawToContext",value:function(e,t){e.beginPath();var l=!0,a=!1,n=void 0;try{for(var i,s=t.ops[Symbol.iterator]();!(l=(i=s.next()).done);l=!0){var o=i.value,r=o.data;switch(o.op){case"move":e.moveTo(r[0],r[1]);break;case"bcurveTo":e.bezierCurveTo(r[0],r[1],r[2],r[3],r[4],r[5]);break;case"qcurveTo":e.quadraticCurveTo(r[0],r[1],r[2],r[3]);break;case"lineTo":e.lineTo(r[0],r[1]);}}}catch(e){a=!0,n=e}finally{try{!l&&s.return&&s.return()}finally{if(a)throw n}}"fillPath"===t.type?e.fill():e.stroke()}},{key:"generator",get:function(){return this.gen}}],[{key:"createRenderer",value:function(){return new B}}]),e}(),G=function(e){function t(){return b(this,t),P(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return w(t,e),m(t,[{key:"line",value:async function(e,t,l,a,n){var i=this._options(n);return this._drawable("line",[await this.lib.line(e,t,l,a,i)],i)}},{key:"rectangle",value:async function(e,t,l,a,n){var i=this._options(n),s=[];if(i.fill){var o=[[e,t],[e+l,t],[e+l,t+a],[e,t+a]];"solid"===i.fillStyle?s.push((await this.lib.solidFillPolygon(o,i))):s.push((await this.lib.patternFillPolygon(o,i)))}return s.push((await this.lib.rectangle(e,t,l,a,i))),this._drawable("rectangle",s,i)}},{key:"ellipse",value:async function(e,t,l,a,n){var i=this._options(n),s=[];if(i.fill)if("solid"===i.fillStyle){var o=await this.lib.ellipse(e,t,l,a,i);o.type="fillPath",s.push(o)}else s.push((await this.lib.patternFillEllipse(e,t,l,a,i)));return s.push((await this.lib.ellipse(e,t,l,a,i))),this._drawable("ellipse",s,i)}},{key:"circle",value:async function(e,t,l,a){var n=await this.ellipse(e,t,l,l,a);return n.shape="circle",n}},{key:"linearPath",value:async function(e,t){var l=this._options(t);return this._drawable("linearPath",[await this.lib.linearPath(e,!1,l)],l)}},{key:"arc",value:async function(e,t,l,a,n,i){var s=!!(6a&&(a=l.strokeWidth/2);var n=e.createElementNS("http://www.w3.org/2000/svg","path");return n.setAttribute("d",this.opsToPath(t)),n.style.stroke=l.fill,n.style.strokeWidth=a+"",n.style.fill="none",n}},{key:"generator",get:function(){return this.gen}},{key:"defs",get:function(){var e=this.svg.ownerDocument||I&&document;if(e&&!this._defs){var t=e.createElementNS("http://www.w3.org/2000/svg","defs");this.svg.firstChild?this.svg.insertBefore(t,this.svg.firstChild):this.svg.appendChild(t),this._defs=t}return this._defs||null}}],[{key:"createRenderer",value:function(){return new B}}]),e}(),$=function(e){function t(e,l){b(this,t);var a=P(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,l));return a.genAsync=new G(l||null,a.svg),a}return w(t,e),m(t,[{key:"line",value:async function(e,t,l,a,n){var i=await this.genAsync.line(e,t,l,a,n);return this.draw(i)}},{key:"rectangle",value:async function(e,t,l,a,n){var i=await this.genAsync.rectangle(e,t,l,a,n);return this.draw(i)}},{key:"ellipse",value:async function(e,t,l,a,n){var i=await this.genAsync.ellipse(e,t,l,a,n);return this.draw(i)}},{key:"circle",value:async function(e,t,l,a){var n=await this.genAsync.circle(e,t,l,a);return this.draw(n)}},{key:"linearPath",value:async function(e,t){var l=await this.genAsync.linearPath(e,t);return this.draw(l)}},{key:"polygon",value:async function(e,t){var l=await this.genAsync.polygon(e,t);return this.draw(l)}},{key:"arc",value:async function(e,t,l,a,n,i){var s=!!(6g&&(g=4*t.strokeWidth),g=d(g,.1);for(var y=h%180*(c/180),k=v(y),x=_(y),b=p(y),m=new E(o-1,r+1,n-1,s+1,g,x,k,b),w=void 0;null!=(w=m.nextLine());)for(var P=l(w,e),O=0;O=f&&(f=4*i.strokeWidth);var h=i.fillWeight;0>h&&(h=i.strokeWidth/2);for(var g=p(u%180*(c/180)),v=d/r,_=y(v*g*v*g+1),x=v*g/_,b=1/_,m=f/(r*d/y(d*b*(d*b)+r*x*(r*x))/r),w=y(r*r-(e-r+m)*(e-r+m)),P=e-r+m;Pf){var h=y(1-f/(this._rx*this._rx*this._ry*this._ry));this._rx*=h,this._ry*=h,u=0}else u=(i===o?-1:1)*y(f/(this._rx*this._rx*d*d+this._ry*this._ry*p*p));var s=u*this._rx*d/this._ry,x=-u*this._ry*p/this._rx;this._C=[0,0],this._C[0]=this._cosPhi*s-this._sinPhi*x+(t[0]+l[0])/2,this._C[1]=this._sinPhi*s+this._cosPhi*x+(t[1]+l[1])/2,this._theta=this.calculateVectorAngle(1,0,(p-s)/this._rx,(d-x)/this._ry);var m=this.calculateVectorAngle((p-s)/this._rx,(d-x)/this._ry,(-p-s)/this._rx,(-d-x)/this._ry);!o&&0m&&(m+=2*c),this._numSegs=g(k(m/(c/2))),this._delta=m/this._numSegs,this._T=8/3*_(this._delta/4)*_(this._delta/4)/_(this._delta/2)}}return m(e,[{key:"getNextSegment",value:function(){if(this._segIndex===this._numSegs)return null;var e=v(this._theta),t=_(this._theta),l=this._theta+this._delta,a=v(l),n=_(l),i=[this._cosPhi*this._rx*a-this._sinPhi*this._ry*n+this._C[0],this._sinPhi*this._rx*a+this._cosPhi*this._ry*n+this._C[1]],s=[this._from[0]+this._T*(-this._cosPhi*this._rx*t-this._sinPhi*this._ry*e),this._from[1]+this._T*(-this._sinPhi*this._rx*t+this._cosPhi*this._ry*e)],o=[i[0]+this._T*(this._cosPhi*this._rx*n+this._sinPhi*this._ry*a),i[1]+this._T*(this._sinPhi*this._rx*n-this._cosPhi*this._ry*a)];return this._theta=l,this._from=[i[0],i[1]],this._segIndex++,{cp1:s,cp2:o,to:i}}},{key:"calculateVectorAngle",value:function(e,t,l,a){var n=Math.atan2,i=n(t,e),s=n(a,l);return s>=i?s-i:2*c-(i-s)}}]),e}(),C=function(){function e(t,l){b(this,e),this.sets=t,this.closed=l}return m(e,[{key:"fit",value:function(e){var t=[],l=!0,a=!1,n=void 0;try{for(var s,o=this.sets[Symbol.iterator]();!(l=(s=o.next()).done);l=!0){var r=s.value,p=r.length,u=h(e*p);if(5>u){if(5>=p)continue;u=5}t.push(this.reduce(r,u))}}catch(e){a=!0,n=e}finally{try{!l&&o.return&&o.return()}finally{if(a)throw n}}var f="",g=!0,y=!1,c=void 0;try{for(var v,_,k=t[Symbol.iterator]();!(g=(v=k.next()).done);g=!0){_=v.value;for(var x,b=0;b<_.length;b++)x=_[b],f+=0===b?"M"+x[0]+","+x[1]:"L"+x[0]+","+x[1];this.closed&&(f+="z ")}}catch(e){y=!0,c=e}finally{try{!g&&k.return&&k.return()}finally{if(y)throw c}}return f}},{key:"distance",value:function(e,t){return y(f(e[0]-t[0],2)+f(e[1]-t[1],2))}},{key:"reduce",value:function(e,t){if(e.length<=t)return e;for(var l=e.slice(0);l.length>t;){for(var n=-1,o=-1,r=1;rn||s=u(e.py1,e.py2)&&this.py1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.py2>=u(e.py1,e.py2)&&this.py2<=d(e.py1,e.py2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=this.px1,this.yi=n*this.xi+s,!(-1e-5>(this.py1-this.yi)*(this.yi-this.py2)||-1e-5>(e.py1-this.yi)*(this.yi-e.py2))&&(!(1e-5>k(e.a))||!(-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))):n===t?(this.xi=e.px1,this.yi=l*this.xi+i,!(-1e-5>(e.py1-this.yi)*(this.yi-e.py2)||-1e-5>(this.py1-this.yi)*(this.yi-this.py2))&&(!(1e-5>k(o))||!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)))):l===n?i==s&&(this.px1>=u(e.px1,e.px2)&&this.px1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.px2>=u(e.px1,e.px2)&&this.px2<=d(e.px1,e.px2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=(s-i)/(l-n),this.yi=l*this.xi+i,!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)||-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))}}]),e}(),E=function(){function e(t,l,a,n,i,s,o,r){b(this,e),this.deltaX=0,this.hGap=0,this.top=t,this.bottom=l,this.left=a,this.right=n,this.gap=i,this.sinAngle=s,this.tanAngle=r,1e-4>k(s)?this.pos=a+i:.9999k(this.sinAngle)){if(this.posthis.right&&l>this.right;)if(this.pos+=this.hGap,t=this.pos-this.deltaX/2,l=this.pos+this.deltaX/2,this.pos>this.right+this.deltaX)return null;var i=new z([t,a],[l,n]);this.sLeft&&i.intersects(this.sLeft)&&(t=i.xi,a=i.yi),this.sRight&&i.intersects(this.sRight)&&(l=i.xi,n=i.yi),0s&&(s=4*a.strokeWidth),s=d(s,.1);var o=a.fillWeight;0>o&&(o=a.strokeWidth/2);var r=!0,p=!1,u=void 0;try{for(var f,h=e[Symbol.iterator]();!(r=(f=h.next()).done);r=!0)for(var y=f.value,k=t(y),x=k/s,b=g(x)-1,m=Math.atan((y[1][1]-y[0][1])/(y[1][0]-y[0][0])),w=0;wg;)g+=2*c,y+=2*c;y-g>2*c&&(g=0,y=2*c);var x=2*c/p.curveStepCount,b=u(x/2,(y-g)/2),m=this._arc(b,o,d,f,h,g,y,1,p),w=this._arc(b,o,d,f,h,g,y,1.5,p),P=m.concat(w);return s&&(r?(P=P.concat(this.doubleLine(o,d,o+f*v(g),d+h*_(g),p)),P=P.concat(this.doubleLine(o,d,o+f*v(y),d+h*_(y),p))):(P.push({op:"lineTo",data:[o,d]}),P.push({op:"lineTo",data:[o+f*v(g),d+h*_(g)]}))),{type:"path",ops:P}}},{key:"svgPath",value:function(e,t){e=(e||"").replace(/\n/g," ").replace(/(-\s)/g,"-").replace("/(ss)/g"," ");var l=new A(e);if(t.simplification){var a=new C(l.linearPoints,l.closed),n=a.fit(t.simplification);l=new A(n)}for(var o=[],r=l.segments||[],d=0;du;)u+=2*c,f+=2*c;f-u>2*c&&(u=0,f=2*c);for(var h=(f-u)/s.curveStepCount,g=[],y=u;y<=f;y+=h)g.push([o+p*v(y),r+d*_(y)]);return g.push([o+p*v(f),r+d*_(f)]),g.push([o,r]),this.patternFillPolygon(g,s)}},{key:"getOffset",value:function(e,t,l){return l.roughness*(Math.random()*(t-e)+e)}},{key:"doubleLine",value:function(e,t,l,a,n){var i=this._line(e,t,l,a,n,!0,!1),s=this._line(e,t,l,a,n,!0,!0);return i.concat(s)}},{key:"_line",value:function(e,t,l,a,n,i,s){var o=f(e-l,2)+f(t-a,2),r=n.maxRandomnessOffset||0;100*(r*r)>o&&(r=y(o)/10);var p=r/2,d=.2+.2*Math.random(),u=n.bowing*n.maxRandomnessOffset*(a-t)/200,h=n.bowing*n.maxRandomnessOffset*(e-l)/200;u=this.getOffset(-u,u,n),h=this.getOffset(-h,h,n);var g=[];return i&&(s?g.push({op:"move",data:[e+this.getOffset(-p,p,n),t+this.getOffset(-p,p,n)]}):g.push({op:"move",data:[e+this.getOffset(-r,r,n),t+this.getOffset(-r,r,n)]})),s?g.push({op:"bcurveTo",data:[u+e+(l-e)*d+this.getOffset(-p,p,n),h+t+(a-t)*d+this.getOffset(-p,p,n),u+e+2*(l-e)*d+this.getOffset(-p,p,n),h+t+2*(a-t)*d+this.getOffset(-p,p,n),l+this.getOffset(-p,p,n),a+this.getOffset(-p,p,n)]}):g.push({op:"bcurveTo",data:[u+e+(l-e)*d+this.getOffset(-r,r,n),h+t+(a-t)*d+this.getOffset(-r,r,n),u+e+2*(l-e)*d+this.getOffset(-r,r,n),h+t+2*(a-t)*d+this.getOffset(-r,r,n),l+this.getOffset(-r,r,n),a+this.getOffset(-r,r,n)]}),g}},{key:"_curve",value:function(e,t,l){var a=e.length,n=[];if(3h;h++)0===h?o.push({op:"move",data:[r.x,r.y]}):o.push({op:"move",data:[r.x+this.getOffset(-d[0],d[0],p),r.y+this.getOffset(-d[0],d[0],p)]}),u=[n+this.getOffset(-d[h],d[h],p),s+this.getOffset(-d[h],d[h],p)],o.push({op:"bcurveTo",data:[e+this.getOffset(-d[h],d[h],p),t+this.getOffset(-d[h],d[h],p),l+this.getOffset(-d[h],d[h],p),a+this.getOffset(-d[h],d[h],p),u[0],u[1]]});return r.setPosition(u[0],u[1]),o}},{key:"_processSegment",value:function(e,t,l,a){var n=[];switch(t.key){case"M":case"m":{var s="m"===t.key;if(2<=t.data.length){var o=+t.data[0],r=+t.data[1];s&&(o+=e.x,r+=e.y);var p=1*(a.maxRandomnessOffset||0);o+=this.getOffset(-p,p,a),r+=this.getOffset(-p,p,a),e.setPosition(o,r),n.push({op:"move",data:[o,r]})}break}case"L":case"l":{var d="l"===t.key;if(2<=t.data.length){var u=+t.data[0],h=+t.data[1];d&&(u+=e.x,h+=e.y),n=n.concat(this.doubleLine(e.x,e.y,u,h,a)),e.setPosition(u,h)}break}case"H":case"h":{var g="h"===t.key;if(t.data.length){var c=+t.data[0];g&&(c+=e.x),n=n.concat(this.doubleLine(e.x,e.y,c,e.y,a)),e.setPosition(c,e.y)}break}case"V":case"v":{var v="v"===t.key;if(t.data.length){var _=+t.data[0];v&&(_+=e.y),n=n.concat(this.doubleLine(e.x,e.y,e.x,_,a)),e.setPosition(e.x,_)}break}case"Z":case"z":{e.first&&(n=n.concat(this.doubleLine(e.x,e.y,e.first[0],e.first[1],a)),e.setPosition(e.first[0],e.first[1]),e.first=null);break}case"C":case"c":{var k="c"===t.key;if(6<=t.data.length){var b=+t.data[0],m=+t.data[1],w=+t.data[2],P=+t.data[3],O=+t.data[4],S=+t.data[5];k&&(b+=e.x,w+=e.x,O+=e.x,m+=e.y,P+=e.y,S+=e.y);var A=this._bezierTo(b,m,w,P,O,S,e,a);n=n.concat(A),e.bezierReflectionPoint=[O+(O-w),S+(S-P)]}break}case"S":case"s":{var C="s"===t.key;if(4<=t.data.length){var z=+t.data[0],E=+t.data[1],L=+t.data[2],W=+t.data[3];C&&(z+=e.x,L+=e.x,E+=e.y,W+=e.y);var N=z,R=E,D=l?l.key:"",B=null;("c"===D||"C"===D||"s"===D||"S"===D)&&(B=e.bezierReflectionPoint),B&&(N=B[0],R=B[1]);var F=this._bezierTo(N,R,z,E,L,W,e,a);n=n.concat(F),e.bezierReflectionPoint=[L+(L-z),W+(W-E)]}break}case"Q":case"q":{var M="q"===t.key;if(4<=t.data.length){var q=+t.data[0],U=+t.data[1],X=+t.data[2],V=+t.data[3];M&&(q+=e.x,X+=e.x,U+=e.y,V+=e.y);var G=1*(1+.2*a.roughness),j=1.5*(1+.22*a.roughness);n.push({op:"move",data:[e.x+this.getOffset(-G,G,a),e.y+this.getOffset(-G,G,a)]});var I=[X+this.getOffset(-G,G,a),V+this.getOffset(-G,G,a)];n.push({op:"qcurveTo",data:[q+this.getOffset(-G,G,a),U+this.getOffset(-G,G,a),I[0],I[1]]}),n.push({op:"move",data:[e.x+this.getOffset(-j,j,a),e.y+this.getOffset(-j,j,a)]}),I=[X+this.getOffset(-j,j,a),V+this.getOffset(-j,j,a)],n.push({op:"qcurveTo",data:[q+this.getOffset(-j,j,a),U+this.getOffset(-j,j,a),I[0],I[1]]}),e.setPosition(I[0],I[1]),e.quadReflectionPoint=[X+(X-q),V+(V-U)]}break}case"T":case"t":{var Q="t"===t.key;if(2<=t.data.length){var $=+t.data[0],Z=+t.data[1];Q&&($+=e.x,Z+=e.y);var H=$,J=Z,Y=l?l.key:"",K=null;("q"===Y||"Q"===Y||"t"===Y||"T"===Y)&&(K=e.quadReflectionPoint),K&&(H=K[0],J=K[1]);var ee=1*(1+.2*a.roughness),te=1.5*(1+.22*a.roughness);n.push({op:"move",data:[e.x+this.getOffset(-ee,ee,a),e.y+this.getOffset(-ee,ee,a)]});var le=[$+this.getOffset(-ee,ee,a),Z+this.getOffset(-ee,ee,a)];n.push({op:"qcurveTo",data:[H+this.getOffset(-ee,ee,a),J+this.getOffset(-ee,ee,a),le[0],le[1]]}),n.push({op:"move",data:[e.x+this.getOffset(-te,te,a),e.y+this.getOffset(-te,te,a)]}),le=[$+this.getOffset(-te,te,a),Z+this.getOffset(-te,te,a)],n.push({op:"qcurveTo",data:[H+this.getOffset(-te,te,a),J+this.getOffset(-te,te,a),le[0],le[1]]}),e.setPosition(le[0],le[1]),e.quadReflectionPoint=[$+($-H),Z+(Z-J)]}break}case"A":case"a":{var ae="a"===t.key;if(7<=t.data.length){var ne=+t.data[0],ie=+t.data[1],se=+t.data[2],oe=+t.data[3],re=+t.data[4],pe=+t.data[5],de=+t.data[6];if(ae&&(pe+=e.x,de+=e.y),pe===e.x&&de===e.y)break;if(0==ne||0==ie)n=n.concat(this.doubleLine(e.x,e.y,pe,de,a)),e.setPosition(pe,de);else for(var ue=0;1>ue;ue++)for(var fe,he=new T([e.x,e.y],[pe,de],[ne,ie],se,!!oe,!!re),ge=he.getNextSegment();ge;)fe=this._bezierTo(ge.cp1[0],ge.cp1[1],ge.cp2[0],ge.cp2[1],ge.to[0],ge.to[1],e,a),n=n.concat(fe),ge=he.getNextSegment()}break}default:}return n}}]),e}(),F="undefined"!=typeof self,M=F&&self&&self.document&&self.document.currentScript&&self.document.currentScript.src,q="undefined"!=typeof self,U=function(){function e(t,l){b(this,e),this.defaultOptions={maxRandomnessOffset:2,roughness:1,bowing:1,stroke:"#000",strokeWidth:1,curveTightness:0,curveStepCount:9,fillStyle:"hachure",fillWeight:-1,hachureAngle:-41,hachureGap:-1},this.config=t||{},this.surface=l,this.renderer=o(this.config),this.config.options&&(this.defaultOptions=this._options(this.config.options))}return m(e,[{key:"_options",value:function(e){return e?Object.assign({},this.defaultOptions,e):this.defaultOptions}},{key:"_drawable",value:function(e,t,l){return{shape:e,sets:t||[],options:l||this.defaultOptions}}},{key:"getCanvasSize",value:function(){var e=function(e){return e&&"object"===("undefined"==typeof e?"undefined":x(e))&&e.baseVal&&e.baseVal.value?e.baseVal.value:e||100};return this.surface?[e(this.surface.width),e(this.surface.height)]:[100,100]}},{key:"computePolygonSize",value:function(e){if(e.length){for(var t=e[0][0],l=e[0][0],a=e[0][1],n=e[0][1],s=1;sl&&(l=t.strokeWidth/2),{d:this.opsToPath(e),stroke:t.fill||"none",strokeWidth:l,fill:"none"}}},{key:"opsToPath",value:function(e){var t="",l=!0,a=!1,n=void 0;try{for(var i,s=e.ops[Symbol.iterator]();!(l=(i=s.next()).done);l=!0){var o=i.value,r=o.data;switch(o.op){case"move":t+="M"+r[0]+" "+r[1]+" ";break;case"bcurveTo":t+="C"+r[0]+" "+r[1]+", "+r[2]+" "+r[3]+", "+r[4]+" "+r[5]+" ";break;case"qcurveTo":t+="Q"+r[0]+" "+r[1]+", "+r[2]+" "+r[3]+" ";break;case"lineTo":t+="L"+r[0]+" "+r[1]+" ";}}}catch(e){a=!0,n=e}finally{try{!l&&s.return&&s.return()}finally{if(a)throw n}}return t.trim()}},{key:"lib",get:function(){return this.renderer}}]),e}(),X="undefined"!=typeof document,V=function(){function e(t,l){b(this,e),this.canvas=t,this.ctx=this.canvas.getContext("2d"),this.gen=new U(l||null,this.canvas)}return m(e,[{key:"line",value:function(e,t,l,a,n){var i=this.gen.line(e,t,l,a,n);return this.draw(i),i}},{key:"rectangle",value:function(e,t,l,a,n){var i=this.gen.rectangle(e,t,l,a,n);return this.draw(i),i}},{key:"ellipse",value:function(e,t,l,a,n){var i=this.gen.ellipse(e,t,l,a,n);return this.draw(i),i}},{key:"circle",value:function(e,t,l,a){var n=this.gen.circle(e,t,l,a);return this.draw(n),n}},{key:"linearPath",value:function(e,t){var l=this.gen.linearPath(e,t);return this.draw(l),l}},{key:"polygon",value:function(e,t){var l=this.gen.polygon(e,t);return this.draw(l),l}},{key:"arc",value:function(e,t,l,a,n,i){var s=!!(6a&&(a=l.strokeWidth/2),e.save(),e.strokeStyle=l.fill||"",e.lineWidth=a,this._drawToContext(e,t),e.restore()}},{key:"_drawToContext",value:function(e,t){e.beginPath();var l=!0,a=!1,n=void 0;try{for(var i,s=t.ops[Symbol.iterator]();!(l=(i=s.next()).done);l=!0){var o=i.value,r=o.data;switch(o.op){case"move":e.moveTo(r[0],r[1]);break;case"bcurveTo":e.bezierCurveTo(r[0],r[1],r[2],r[3],r[4],r[5]);break;case"qcurveTo":e.quadraticCurveTo(r[0],r[1],r[2],r[3]);break;case"lineTo":e.lineTo(r[0],r[1]);}}}catch(e){a=!0,n=e}finally{try{!l&&s.return&&s.return()}finally{if(a)throw n}}"fillPath"===t.type?e.fill():e.stroke()}},{key:"generator",get:function(){return this.gen}}],[{key:"createRenderer",value:function(){return new B}}]),e}(),G=function(e){function t(){return b(this,t),P(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return w(t,e),m(t,[{key:"line",value:async function(e,t,l,a,n){var i=this._options(n);return this._drawable("line",[await this.lib.line(e,t,l,a,i)],i)}},{key:"rectangle",value:async function(e,t,l,a,n){var i=this._options(n),s=[];if(i.fill){var o=[[e,t],[e+l,t],[e+l,t+a],[e,t+a]];"solid"===i.fillStyle?s.push((await this.lib.solidFillPolygon(o,i))):s.push((await this.lib.patternFillPolygon(o,i)))}return s.push((await this.lib.rectangle(e,t,l,a,i))),this._drawable("rectangle",s,i)}},{key:"ellipse",value:async function(e,t,l,a,n){var i=this._options(n),s=[];if(i.fill)if("solid"===i.fillStyle){var o=await this.lib.ellipse(e,t,l,a,i);o.type="fillPath",s.push(o)}else s.push((await this.lib.patternFillEllipse(e,t,l,a,i)));return s.push((await this.lib.ellipse(e,t,l,a,i))),this._drawable("ellipse",s,i)}},{key:"circle",value:async function(e,t,l,a){var n=await this.ellipse(e,t,l,l,a);return n.shape="circle",n}},{key:"linearPath",value:async function(e,t){var l=this._options(t);return this._drawable("linearPath",[await this.lib.linearPath(e,!1,l)],l)}},{key:"arc",value:async function(e,t,l,a,n,i){var s=!!(6a&&(a=l.strokeWidth/2);var n=e.createElementNS("http://www.w3.org/2000/svg","path");return n.setAttribute("d",this.opsToPath(t)),n.style.stroke=l.fill||null,n.style.strokeWidth=a+"",n.style.fill="none",n}},{key:"generator",get:function(){return this.gen}},{key:"defs",get:function(){var e=this.svg.ownerDocument||I&&document;if(e&&!this._defs){var t=e.createElementNS("http://www.w3.org/2000/svg","defs");this.svg.firstChild?this.svg.insertBefore(t,this.svg.firstChild):this.svg.appendChild(t),this._defs=t}return this._defs||null}}],[{key:"createRenderer",value:function(){return new B}}]),e}(),$=function(e){function t(e,l){b(this,t);var a=P(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,l));return a.genAsync=new G(l||null,a.svg),a}return w(t,e),m(t,[{key:"line",value:async function(e,t,l,a,n){var i=await this.genAsync.line(e,t,l,a,n);return this.draw(i)}},{key:"rectangle",value:async function(e,t,l,a,n){var i=await this.genAsync.rectangle(e,t,l,a,n);return this.draw(i)}},{key:"ellipse",value:async function(e,t,l,a,n){var i=await this.genAsync.ellipse(e,t,l,a,n);return this.draw(i)}},{key:"circle",value:async function(e,t,l,a){var n=await this.genAsync.circle(e,t,l,a);return this.draw(n)}},{key:"linearPath",value:async function(e,t){var l=await this.genAsync.linearPath(e,t);return this.draw(l)}},{key:"polygon",value:async function(e,t){var l=await this.genAsync.polygon(e,t);return this.draw(l)}},{key:"arc",value:async function(e,t,l,a,n,i){var s=!!(6h&&(h=4*t.strokeWidth),h=d(h,.1);const g=r%180*(b/180),c=_(g),u=w(g),y=p(g),x=new S(l-1,o+1,n-1,a+1,h,u,c,y);for(let t;null!=(t=x.nextLine());){const n=i(t,e);for(let e=0;e=h&&(h=4*a.strokeWidth);let g=a.fillWeight;0>g&&(g=a.strokeWidth/2);const c=p(f%180*(b/180)),u=d/r,_=y(u*c*u*c+1),x=u*c/_,w=1/_,O=h/(r*d/y(d*w*(d*w)+r*x*(r*x))/r);let P=y(r*r-(e-r+O)*(e-r+O));for(let p=e-r+O;pd){const e=y(1-d/(this._rx*this._rx*this._ry*this._ry));this._rx*=e,this._ry*=e,p=0}else p=(n===a?-1:1)*y(d/(this._rx*this._rx*r*r+this._ry*this._ry*o*o));const f=p*this._rx*r/this._ry,h=-p*this._ry*o/this._rx;this._C=[0,0],this._C[0]=this._cosPhi*f-this._sinPhi*h+(e[0]+t[0])/2,this._C[1]=this._sinPhi*f+this._cosPhi*h+(e[1]+t[1])/2,this._theta=this.calculateVectorAngle(1,0,(o-f)/this._rx,(r-h)/this._ry);let g=this.calculateVectorAngle((o-f)/this._rx,(r-h)/this._ry,(-o-f)/this._rx,(-r-h)/this._ry);!a&&0g&&(g+=2*b),this._numSegs=u(m(g/(b/2))),this._delta=g/this._numSegs,this._T=8/3*w(this._delta/4)*w(this._delta/4)/w(this._delta/2)}getNextSegment(){if(this._segIndex===this._numSegs)return null;const e=_(this._theta),t=w(this._theta),i=this._theta+this._delta,s=_(i),n=w(i),a=[this._cosPhi*this._rx*s-this._sinPhi*this._ry*n+this._C[0],this._sinPhi*this._rx*s+this._cosPhi*this._ry*n+this._C[1]],l=[this._from[0]+this._T*(-this._cosPhi*this._rx*t-this._sinPhi*this._ry*e),this._from[1]+this._T*(-this._sinPhi*this._rx*t+this._cosPhi*this._ry*e)],o=[a[0]+this._T*(this._cosPhi*this._rx*n+this._sinPhi*this._ry*s),a[1]+this._T*(this._sinPhi*this._rx*n-this._cosPhi*this._ry*s)];return this._theta=i,this._from=[a[0],a[1]],this._segIndex++,{cp1:l,cp2:o,to:a}}calculateVectorAngle(e,t,i,s){var n=Math.atan2;const a=n(t,e),l=n(s,i);return l>=a?l-a:2*b-(a-l)}}class k{constructor(e,t){this.sets=e,this.closed=t}fit(e){const t=[];for(const i of this.sets){const s=i.length;let n=c(e*s);if(5>n){if(5>=s)continue;n=5}t.push(this.reduce(i,n))}let s='';for(const n of t){for(let e=0;et;){let e=-1,t=-1;for(let l=1;le||s=f(e.py1,e.py2)&&this.py1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.py2>=f(e.py1,e.py2)&&this.py2<=d(e.py1,e.py2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=this.px1,this.yi=i*this.xi+n,!(-1e-5>(this.py1-this.yi)*(this.yi-this.py2)||-1e-5>(e.py1-this.yi)*(this.yi-e.py2))&&(!(1e-5>m(e.a))||!(-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))):i===h?(this.xi=e.px1,this.yi=t*this.xi+s,!(-1e-5>(e.py1-this.yi)*(this.yi-e.py2)||-1e-5>(this.py1-this.yi)*(this.yi-this.py2))&&(!(1e-5>m(l))||!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)))):t===i?s==n&&(this.px1>=f(e.px1,e.px2)&&this.px1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.px2>=f(e.px1,e.px2)&&this.px2<=d(e.px1,e.px2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=(n-s)/(t-i),this.yi=t*this.xi+s,!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)||-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))}}class S{constructor(e,t,i,s,n,a,l,o){this.deltaX=0,this.hGap=0,this.top=e,this.bottom=t,this.left=i,this.right=s,this.gap=n,this.sinAngle=a,this.tanAngle=o,1e-4>m(a)?this.pos=i+n:.9999m(this.sinAngle)){if(this.posthis.right&&t>this.right;)if(this.pos+=this.hGap,e=this.pos-this.deltaX/2,t=this.pos+this.deltaX/2,this.pos>this.right+this.deltaX)return null;const a=new A([e,i],[t,n]);this.sLeft&&a.intersects(this.sLeft)&&(e=a.xi,i=a.yi),this.sRight&&a.intersects(this.sRight)&&(t=a.xi,n=a.yi),0a&&(a=4*s.strokeWidth),a=d(a,.1);let o=s.fillWeight;0>o&&(o=s.strokeWidth/2);for(const r of e){const e=t(r),i=e/a,l=u(i)-1,p=Math.atan((r[1][1]-r[0][1])/(r[1][0]-r[0][0]));for(let e=0;ec;)c+=2*b,u+=2*b;u-c>2*b&&(c=0,u=2*b);const y=2*b/p.curveStepCount,x=f(y/2,(u-c)/2),O=this._arc(x,o,d,h,g,c,u,1,p),P=this._arc(x,o,d,h,g,c,u,1.5,p);let v=O.concat(P);return l&&(r?(v=v.concat(this.doubleLine(o,d,o+h*_(c),d+g*w(c),p)),v=v.concat(this.doubleLine(o,d,o+h*_(u),d+g*w(u),p))):(v.push({op:'lineTo',data:[o,d]}),v.push({op:'lineTo',data:[o+h*_(c),d+g*w(c)]}))),{type:'path',ops:v}}svgPath(e,t){e=(e||'').replace(/\n/g,' ').replace(/(-\s)/g,'-').replace('/(ss)/g',' ');let n=new P(e);if(t.simplification){const e=new k(n.linearPoints,n.closed),i=e.fit(t.simplification);n=new P(i)}let a=[];const l=n.segments||[];for(let o=0;of;)f+=2*b,h+=2*b;h-f>2*b&&(f=0,h=2*b);const g=(h-f)/l.curveStepCount,c=[];for(let u=f;u<=h;u+=g)c.push([o+p*_(u),r+d*w(u)]);return c.push([o+p*_(h),r+d*w(h)]),c.push([o,r]),this.patternFillPolygon(c,l)}getOffset(e,t,i){return i.roughness*(Math.random()*(t-e)+e)}doubleLine(e,t,i,s,n){const a=this._line(e,t,i,s,n,!0,!1),l=this._line(e,t,i,s,n,!0,!0);return a.concat(l)}_line(e,t,i,s,n,a,l){const o=g(e-i,2)+g(t-s,2);let r=n.maxRandomnessOffset||0;100*(r*r)>o&&(r=y(o)/10);const p=r/2,d=.2+.2*Math.random();let f=n.bowing*n.maxRandomnessOffset*(s-t)/200,h=n.bowing*n.maxRandomnessOffset*(e-i)/200;f=this.getOffset(-f,f,n),h=this.getOffset(-h,h,n);const c=[];return a&&(l?c.push({op:'move',data:[e+this.getOffset(-p,p,n),t+this.getOffset(-p,p,n)]}):c.push({op:'move',data:[e+this.getOffset(-r,r,n),t+this.getOffset(-r,r,n)]})),l?c.push({op:'bcurveTo',data:[f+e+(i-e)*d+this.getOffset(-p,p,n),h+t+(s-t)*d+this.getOffset(-p,p,n),f+e+2*(i-e)*d+this.getOffset(-p,p,n),h+t+2*(s-t)*d+this.getOffset(-p,p,n),i+this.getOffset(-p,p,n),s+this.getOffset(-p,p,n)]}):c.push({op:'bcurveTo',data:[f+e+(i-e)*d+this.getOffset(-r,r,n),h+t+(s-t)*d+this.getOffset(-r,r,n),f+e+2*(i-e)*d+this.getOffset(-r,r,n),h+t+2*(s-t)*d+this.getOffset(-r,r,n),i+this.getOffset(-r,r,n),s+this.getOffset(-r,r,n)]}),c}_curve(e,t,i){const n=e.length;let a=[];if(3f;f++)0===f?o.push({op:'move',data:[r.x,r.y]}):o.push({op:'move',data:[r.x+this.getOffset(-d[0],d[0],p),r.y+this.getOffset(-d[0],d[0],p)]}),h=[a+this.getOffset(-d[f],d[f],p),l+this.getOffset(-d[f],d[f],p)],o.push({op:'bcurveTo',data:[e+this.getOffset(-d[f],d[f],p),t+this.getOffset(-d[f],d[f],p),s+this.getOffset(-d[f],d[f],p),n+this.getOffset(-d[f],d[f],p),h[0],h[1]]});return r.setPosition(h[0],h[1]),o}_processSegment(e,t,i,s){let n=[];switch(t.key){case'M':case'm':{const i='m'===t.key;if(2<=t.data.length){let a=+t.data[0],l=+t.data[1];i&&(a+=e.x,l+=e.y);const o=1*(s.maxRandomnessOffset||0);a+=this.getOffset(-o,o,s),l+=this.getOffset(-o,o,s),e.setPosition(a,l),n.push({op:'move',data:[a,l]})}break}case'L':case'l':{const i='l'===t.key;if(2<=t.data.length){let a=+t.data[0],l=+t.data[1];i&&(a+=e.x,l+=e.y),n=n.concat(this.doubleLine(e.x,e.y,a,l,s)),e.setPosition(a,l)}break}case'H':case'h':{const i='h'===t.key;if(t.data.length){let a=+t.data[0];i&&(a+=e.x),n=n.concat(this.doubleLine(e.x,e.y,a,e.y,s)),e.setPosition(a,e.y)}break}case'V':case'v':{const i='v'===t.key;if(t.data.length){let a=+t.data[0];i&&(a+=e.y),n=n.concat(this.doubleLine(e.x,e.y,e.x,a,s)),e.setPosition(e.x,a)}break}case'Z':case'z':{e.first&&(n=n.concat(this.doubleLine(e.x,e.y,e.first[0],e.first[1],s)),e.setPosition(e.first[0],e.first[1]),e.first=null);break}case'C':case'c':{const i='c'===t.key;if(6<=t.data.length){let a=+t.data[0],l=+t.data[1],o=+t.data[2],r=+t.data[3],p=+t.data[4],d=+t.data[5];i&&(a+=e.x,o+=e.x,p+=e.x,l+=e.y,r+=e.y,d+=e.y);const f=this._bezierTo(a,l,o,r,p,d,e,s);n=n.concat(f),e.bezierReflectionPoint=[p+(p-o),d+(d-r)]}break}case'S':case's':{const a='s'===t.key;if(4<=t.data.length){let l=+t.data[0],o=+t.data[1],r=+t.data[2],p=+t.data[3];a&&(l+=e.x,r+=e.x,o+=e.y,p+=e.y);let d=l,f=o;const h=i?i.key:'';let g=null;('c'===h||'C'===h||'s'===h||'S'===h)&&(g=e.bezierReflectionPoint),g&&(d=g[0],f=g[1]);const c=this._bezierTo(d,f,l,o,r,p,e,s);n=n.concat(c),e.bezierReflectionPoint=[r+(r-l),p+(p-o)]}break}case'Q':case'q':{const i='q'===t.key;if(4<=t.data.length){let a=+t.data[0],l=+t.data[1],o=+t.data[2],r=+t.data[3];i&&(a+=e.x,o+=e.x,l+=e.y,r+=e.y);const p=1*(1+.2*s.roughness),d=1.5*(1+.22*s.roughness);n.push({op:'move',data:[e.x+this.getOffset(-p,p,s),e.y+this.getOffset(-p,p,s)]});let h=[o+this.getOffset(-p,p,s),r+this.getOffset(-p,p,s)];n.push({op:'qcurveTo',data:[a+this.getOffset(-p,p,s),l+this.getOffset(-p,p,s),h[0],h[1]]}),n.push({op:'move',data:[e.x+this.getOffset(-d,d,s),e.y+this.getOffset(-d,d,s)]}),h=[o+this.getOffset(-d,d,s),r+this.getOffset(-d,d,s)],n.push({op:'qcurveTo',data:[a+this.getOffset(-d,d,s),l+this.getOffset(-d,d,s),h[0],h[1]]}),e.setPosition(h[0],h[1]),e.quadReflectionPoint=[o+(o-a),r+(r-l)]}break}case'T':case't':{const a='t'===t.key;if(2<=t.data.length){let l=+t.data[0],o=+t.data[1];a&&(l+=e.x,o+=e.y);let r=l,p=o;const d=i?i.key:'';let h=null;('q'===d||'Q'===d||'t'===d||'T'===d)&&(h=e.quadReflectionPoint),h&&(r=h[0],p=h[1]);const g=1*(1+.2*s.roughness),c=1.5*(1+.22*s.roughness);n.push({op:'move',data:[e.x+this.getOffset(-g,g,s),e.y+this.getOffset(-g,g,s)]});let u=[l+this.getOffset(-g,g,s),o+this.getOffset(-g,g,s)];n.push({op:'qcurveTo',data:[r+this.getOffset(-g,g,s),p+this.getOffset(-g,g,s),u[0],u[1]]}),n.push({op:'move',data:[e.x+this.getOffset(-c,c,s),e.y+this.getOffset(-c,c,s)]}),u=[l+this.getOffset(-c,c,s),o+this.getOffset(-c,c,s)],n.push({op:'qcurveTo',data:[r+this.getOffset(-c,c,s),p+this.getOffset(-c,c,s),u[0],u[1]]}),e.setPosition(u[0],u[1]),e.quadReflectionPoint=[l+(l-r),o+(o-p)]}break}case'A':case'a':{const i='a'===t.key;if(7<=t.data.length){const a=+t.data[0],l=+t.data[1],o=+t.data[2],r=+t.data[3],p=+t.data[4];let d=+t.data[5],f=+t.data[6];if(i&&(d+=e.x,f+=e.y),d===e.x&&f===e.y)break;if(0==a||0==l)n=n.concat(this.doubleLine(e.x,e.y,d,f,s)),e.setPosition(d,f);else for(let t=0;1>t;t++){const t=new v([e.x,e.y],[d,f],[a,l],o,!!r,!!p);for(let i=t.getNextSegment();i;){const a=this._bezierTo(i.cp1[0],i.cp1[1],i.cp2[0],i.cp2[1],i.to[0],i.to[1],e,s);n=n.concat(a),i=t.getNextSegment()}}}break}default:}return n}}const L='undefined'!=typeof self,R=L&&self&&self.document&&self.document.currentScript&&self.document.currentScript.src,D='undefined'!=typeof self;class B{constructor(e,t){this.defaultOptions={maxRandomnessOffset:2,roughness:1,bowing:1,stroke:'#000',strokeWidth:1,curveTightness:0,curveStepCount:9,fill:null,fillStyle:'hachure',fillWeight:-1,hachureAngle:-41,hachureGap:-1},this.config=e||{},this.surface=t,this.renderer=o(this.config),this.config.options&&(this.defaultOptions=this._options(this.config.options))}_options(e){return e?Object.assign({},this.defaultOptions,e):this.defaultOptions}_drawable(e,t,i){return{shape:e,sets:t||[],options:i||this.defaultOptions}}get lib(){return this.renderer}getCanvasSize(){const e=e=>e&&'object'==typeof e&&e.baseVal&&e.baseVal.value?e.baseVal.value:e||100;return this.surface?[e(this.surface.width),e(this.surface.height)]:[100,100]}computePolygonSize(e){if(e.length){let t=e[0][0],s=e[0][0],n=e[0][1],a=e[0][1];for(let l=1;li&&(i=t.strokeWidth/2),{d:this.opsToPath(e),stroke:t.fill||'none',strokeWidth:i,fill:'none'}}opsToPath(e){let t='';for(const i of e.ops){const e=i.data;switch(i.op){case'move':t+=`M${e[0]} ${e[1]} `;break;case'bcurveTo':t+=`C${e[0]} ${e[1]}, ${e[2]} ${e[3]}, ${e[4]} ${e[5]} `;break;case'qcurveTo':t+=`Q${e[0]} ${e[1]}, ${e[2]} ${e[3]} `;break;case'lineTo':t+=`L${e[0]} ${e[1]} `;}}return t.trim()}}const M='undefined'!=typeof document;class q{constructor(e,t){this.canvas=e,this.ctx=this.canvas.getContext('2d'),this.gen=new B(t||null,this.canvas)}get generator(){return this.gen}static createRenderer(){return new E}line(e,t,i,s,n){const a=this.gen.line(e,t,i,s,n);return this.draw(a),a}rectangle(e,t,i,s,n){const a=this.gen.rectangle(e,t,i,s,n);return this.draw(a),a}ellipse(e,t,i,s,n){const a=this.gen.ellipse(e,t,i,s,n);return this.draw(a),a}circle(e,t,i,s){const n=this.gen.circle(e,t,i,s);return this.draw(n),n}linearPath(e,t){const i=this.gen.linearPath(e,t);return this.draw(i),i}polygon(e,t){const i=this.gen.polygon(e,t);return this.draw(i),i}arc(e,t,i,s,n,a,l=!1,o){const r=this.gen.arc(e,t,i,s,n,a,l,o);return this.draw(r),r}curve(e,t){const i=this.gen.curve(e,t);return this.draw(i),i}path(e,t){const i=this.gen.path(e,t);return this.draw(i),i}draw(e){const t=e.sets||[],i=e.options||this.gen.defaultOptions,s=this.ctx;for(const n of t)switch(n.type){case'path':s.save(),s.strokeStyle=i.stroke,s.lineWidth=i.strokeWidth,this._drawToContext(s,n),s.restore();break;case'fillPath':s.save(),s.fillStyle=i.fill||'',this._drawToContext(s,n),s.restore();break;case'fillSketch':this.fillSketch(s,n,i);break;case'path2Dfill':{this.ctx.save(),this.ctx.fillStyle=i.fill||'';const e=new Path2D(n.path);this.ctx.fill(e),this.ctx.restore();break}case'path2Dpattern':{const e=this.canvas.ownerDocument||M&&document;if(e){const t=n.size,s=e.createElement('canvas'),a=s.getContext('2d'),l=this.computeBBox(n.path);l&&(l.width||l.height)?(s.width=this.canvas.width,s.height=this.canvas.height,a.translate(l.x||0,l.y||0)):(s.width=t[0],s.height=t[1]),this.fillSketch(a,n,i),this.ctx.save(),this.ctx.fillStyle=this.ctx.createPattern(s,'repeat');const o=new Path2D(n.path);this.ctx.fill(o),this.ctx.restore()}else console.error('Cannot render path2Dpattern. No defs/document defined.');break}}}computeBBox(e){if(M)try{const t=document.createElementNS('http://www.w3.org/2000/svg','svg');t.setAttribute('width','0'),t.setAttribute('height','0');const i=self.document.createElementNS('http://www.w3.org/2000/svg','path');i.setAttribute('d',e),t.appendChild(i),document.body.appendChild(t);const s=i.getBBox();return document.body.removeChild(t),s}catch(e){}return null}fillSketch(e,t,i){let s=i.fillWeight;0>s&&(s=i.strokeWidth/2),e.save(),e.strokeStyle=i.fill||'',e.lineWidth=s,this._drawToContext(e,t),e.restore()}_drawToContext(e,t){e.beginPath();for(const i of t.ops){const t=i.data;switch(i.op){case'move':e.moveTo(t[0],t[1]);break;case'bcurveTo':e.bezierCurveTo(t[0],t[1],t[2],t[3],t[4],t[5]);break;case'qcurveTo':e.quadraticCurveTo(t[0],t[1],t[2],t[3]);break;case'lineTo':e.lineTo(t[0],t[1]);}}'fillPath'===t.type?e.fill():e.stroke()}}class F extends B{async line(e,t,i,s,n){const a=this._options(n);return this._drawable('line',[await this.lib.line(e,t,i,s,a)],a)}async rectangle(e,t,i,s,n){const a=this._options(n),l=[];if(a.fill){const n=[[e,t],[e+i,t],[e+i,t+s],[e,t+s]];'solid'===a.fillStyle?l.push((await this.lib.solidFillPolygon(n,a))):l.push((await this.lib.patternFillPolygon(n,a)))}return l.push((await this.lib.rectangle(e,t,i,s,a))),this._drawable('rectangle',l,a)}async ellipse(e,t,i,s,n){const a=this._options(n),l=[];if(a.fill)if('solid'===a.fillStyle){const n=await this.lib.ellipse(e,t,i,s,a);n.type='fillPath',l.push(n)}else l.push((await this.lib.patternFillEllipse(e,t,i,s,a)));return l.push((await this.lib.ellipse(e,t,i,s,a))),this._drawable('ellipse',l,a)}async circle(e,t,i,s){const n=await this.ellipse(e,t,i,i,s);return n.shape='circle',n}async linearPath(e,t){const i=this._options(t);return this._drawable('linearPath',[await this.lib.linearPath(e,!1,i)],i)}async arc(e,t,i,s,n,a,l=!1,r){const p=this._options(r),o=[];if(l&&p.fill)if('solid'===p.fillStyle){const l=await this.lib.arc(e,t,i,s,n,a,!0,!1,p);l.type='fillPath',o.push(l)}else o.push((await this.lib.patternFillArc(e,t,i,s,n,a,p)));return o.push((await this.lib.arc(e,t,i,s,n,a,l,!0,p))),this._drawable('arc',o,p)}async curve(e,t){const i=this._options(t);return this._drawable('curve',[await this.lib.curve(e,i)],i)}async polygon(e,t){const i=this._options(t),s=[];if(i.fill)if('solid'===i.fillStyle)s.push((await this.lib.solidFillPolygon(e,i)));else{const t=this.computePolygonSize(e),n=[[0,0],[t[0],0],[t[0],t[1]],[0,t[1]]],a=await this.lib.patternFillPolygon(n,i);a.type='path2Dpattern',a.size=t,a.path=this.polygonPath(e),s.push(a)}return s.push((await this.lib.linearPath(e,!0,i))),this._drawable('polygon',s,i)}async path(e,t){const i=this._options(t),s=[];if(!e)return this._drawable('path',s,i);if(i.fill)if('solid'===i.fillStyle){s.push({type:'path2Dfill',path:e,ops:[]})}else{const t=this.computePathSize(e),n=[[0,0],[t[0],0],[t[0],t[1]],[0,t[1]]],a=await this.lib.patternFillPolygon(n,i);a.type='path2Dpattern',a.size=t,a.path=e,s.push(a)}return s.push((await this.lib.svgPath(e,i))),this._drawable('path',s,i)}}class U extends q{constructor(e,t){super(e,t),this.genAsync=new F(t||null,this.canvas)}get generator(){return this.genAsync}async line(e,t,i,s,n){const a=await this.genAsync.line(e,t,i,s,n);return this.draw(a),a}async rectangle(e,t,i,s,n){const a=await this.genAsync.rectangle(e,t,i,s,n);return this.draw(a),a}async ellipse(e,t,i,s,n){const a=await this.genAsync.ellipse(e,t,i,s,n);return this.draw(a),a}async circle(e,t,i,s){const n=await this.genAsync.circle(e,t,i,s);return this.draw(n),n}async linearPath(e,t){const i=await this.genAsync.linearPath(e,t);return this.draw(i),i}async polygon(e,t){const i=await this.genAsync.polygon(e,t);return this.draw(i),i}async arc(e,t,i,s,n,a,l=!1,o){const r=await this.genAsync.arc(e,t,i,s,n,a,l,o);return this.draw(r),r}async curve(e,t){const i=await this.genAsync.curve(e,t);return this.draw(i),i}async path(e,t){const i=await this.genAsync.path(e,t);return this.draw(i),i}}const X='undefined'!=typeof document;class G{constructor(e,t){this.svg=e,this.gen=new B(t||null,this.svg)}get generator(){return this.gen}static createRenderer(){return new E}get defs(){const e=this.svg.ownerDocument||X&&document;if(e&&!this._defs){const t=e.createElementNS('http://www.w3.org/2000/svg','defs');this.svg.firstChild?this.svg.insertBefore(t,this.svg.firstChild):this.svg.appendChild(t),this._defs=t}return this._defs||null}line(e,t,i,s,n){const a=this.gen.line(e,t,i,s,n);return this.draw(a)}rectangle(e,t,i,s,n){const a=this.gen.rectangle(e,t,i,s,n);return this.draw(a)}ellipse(e,t,i,s,n){const a=this.gen.ellipse(e,t,i,s,n);return this.draw(a)}circle(e,t,i,s){const n=this.gen.circle(e,t,i,s);return this.draw(n)}linearPath(e,t){const i=this.gen.linearPath(e,t);return this.draw(i)}polygon(e,t){const i=this.gen.polygon(e,t);return this.draw(i)}arc(e,t,i,s,n,a,l=!1,o){const r=this.gen.arc(e,t,i,s,n,a,l,o);return this.draw(r)}curve(e,t){const i=this.gen.curve(e,t);return this.draw(i)}path(e,t){const i=this.gen.path(e,t);return this.draw(i)}draw(e){const t=e.sets||[],i=e.options||this.gen.defaultOptions,s=this.svg.ownerDocument||X&&document,n=s.createElementNS('http://www.w3.org/2000/svg','g');for(const a of t){let e=null;switch(a.type){case'path':{e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',this.opsToPath(a)),e.style.stroke=i.stroke,e.style.strokeWidth=i.strokeWidth+'',e.style.fill='none';break}case'fillPath':{e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',this.opsToPath(a)),e.style.stroke='none',e.style.strokeWidth='0',e.style.fill=i.fill;break}case'fillSketch':{e=this.fillSketch(s,a,i);break}case'path2Dfill':{e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',a.path||''),e.style.stroke='none',e.style.strokeWidth='0',e.style.fill=i.fill;break}case'path2Dpattern':{if(!this.defs)console.error('Cannot render path2Dpattern. No defs/document defined.');else{const t=a.size,n=s.createElementNS('http://www.w3.org/2000/svg','pattern'),l=`rough-${c(Math.random()*(Number.MAX_SAFE_INTEGER||999999))}`;n.setAttribute('id',l),n.setAttribute('x','0'),n.setAttribute('y','0'),n.setAttribute('width','1'),n.setAttribute('height','1'),n.setAttribute('height','1'),n.setAttribute('viewBox',`0 0 ${r(t[0])} ${r(t[1])}`),n.setAttribute('patternUnits','objectBoundingBox');const o=this.fillSketch(s,a,i);n.appendChild(o),this.defs.appendChild(n),e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',a.path||''),e.style.stroke='none',e.style.strokeWidth='0',e.style.fill=`url(#${l})`}break}}e&&n.appendChild(e)}return n}opsToPath(e){return this.gen.opsToPath(e)}fillSketch(e,t,i){let s=i.fillWeight;0>s&&(s=i.strokeWidth/2);const n=e.createElementNS('http://www.w3.org/2000/svg','path');return n.setAttribute('d',this.opsToPath(t)),n.style.stroke=i.fill,n.style.strokeWidth=s+'',n.style.fill='none',n}}class V extends G{constructor(e,t){super(e,t),this.genAsync=new F(t||null,this.svg)}get generator(){return this.genAsync}async line(e,t,i,s,n){const a=await this.genAsync.line(e,t,i,s,n);return this.draw(a)}async rectangle(e,t,i,s,n){const a=await this.genAsync.rectangle(e,t,i,s,n);return this.draw(a)}async ellipse(e,t,i,s,n){const a=await this.genAsync.ellipse(e,t,i,s,n);return this.draw(a)}async circle(e,t,i,s){const n=await this.genAsync.circle(e,t,i,s);return this.draw(n)}async linearPath(e,t){const i=await this.genAsync.linearPath(e,t);return this.draw(i)}async polygon(e,t){const i=await this.genAsync.polygon(e,t);return this.draw(i)}async arc(e,t,i,s,n,a,l=!1,o){const r=await this.genAsync.arc(e,t,i,s,n,a,l,o);return this.draw(r)}async curve(e,t){const i=await this.genAsync.curve(e,t);return this.draw(i)}async path(e,t){const i=await this.genAsync.path(e,t);return this.draw(i)}}var j={canvas(e,t){return t&&t.async?new U(e,t):new q(e,t)},svg(e,t){return t&&t.async?new V(e,t):new G(e,t)},createRenderer(){return q.createRenderer()},generator(e,t){return e&&e.async?new F(e,t):new B(e,t)}};return j}(); +var rough=function(){'use strict';function e(e,t){return e.type===t}function t(e){const t=e[0],i=e[1];return y(g(t[0]-i[0],2)+g(t[1]-i[1],2))}function i(e,t){const s=[],n=new A([e[0],e[1]],[e[2],e[3]]);for(let a=0;ah&&(h=4*t.strokeWidth),h=d(h,.1);const g=r%180*(b/180),c=_(g),u=w(g),y=p(g),x=new S(l-1,o+1,n-1,a+1,h,u,c,y);for(let t;null!=(t=x.nextLine());){const n=i(t,e);for(let e=0;e=h&&(h=4*a.strokeWidth);let g=a.fillWeight;0>g&&(g=a.strokeWidth/2);const c=p(f%180*(b/180)),u=d/r,_=y(u*c*u*c+1),x=u*c/_,w=1/_,O=h/(r*d/y(d*w*(d*w)+r*x*(r*x))/r);let P=y(r*r-(e-r+O)*(e-r+O));for(let p=e-r+O;pd){const e=y(1-d/(this._rx*this._rx*this._ry*this._ry));this._rx*=e,this._ry*=e,p=0}else p=(n===a?-1:1)*y(d/(this._rx*this._rx*r*r+this._ry*this._ry*o*o));const f=p*this._rx*r/this._ry,h=-p*this._ry*o/this._rx;this._C=[0,0],this._C[0]=this._cosPhi*f-this._sinPhi*h+(e[0]+t[0])/2,this._C[1]=this._sinPhi*f+this._cosPhi*h+(e[1]+t[1])/2,this._theta=this.calculateVectorAngle(1,0,(o-f)/this._rx,(r-h)/this._ry);let g=this.calculateVectorAngle((o-f)/this._rx,(r-h)/this._ry,(-o-f)/this._rx,(-r-h)/this._ry);!a&&0g&&(g+=2*b),this._numSegs=u(m(g/(b/2))),this._delta=g/this._numSegs,this._T=8/3*w(this._delta/4)*w(this._delta/4)/w(this._delta/2)}getNextSegment(){if(this._segIndex===this._numSegs)return null;const e=_(this._theta),t=w(this._theta),i=this._theta+this._delta,s=_(i),n=w(i),a=[this._cosPhi*this._rx*s-this._sinPhi*this._ry*n+this._C[0],this._sinPhi*this._rx*s+this._cosPhi*this._ry*n+this._C[1]],l=[this._from[0]+this._T*(-this._cosPhi*this._rx*t-this._sinPhi*this._ry*e),this._from[1]+this._T*(-this._sinPhi*this._rx*t+this._cosPhi*this._ry*e)],o=[a[0]+this._T*(this._cosPhi*this._rx*n+this._sinPhi*this._ry*s),a[1]+this._T*(this._sinPhi*this._rx*n-this._cosPhi*this._ry*s)];return this._theta=i,this._from=[a[0],a[1]],this._segIndex++,{cp1:l,cp2:o,to:a}}calculateVectorAngle(e,t,i,s){var n=Math.atan2;const a=n(t,e),l=n(s,i);return l>=a?l-a:2*b-(a-l)}}class k{constructor(e,t){this.sets=e,this.closed=t}fit(e){const t=[];for(const i of this.sets){const s=i.length;let n=c(e*s);if(5>n){if(5>=s)continue;n=5}t.push(this.reduce(i,n))}let s='';for(const n of t){for(let e=0;et;){let e=-1,t=-1;for(let l=1;le||s=f(e.py1,e.py2)&&this.py1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.py2>=f(e.py1,e.py2)&&this.py2<=d(e.py1,e.py2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=this.px1,this.yi=i*this.xi+n,!(-1e-5>(this.py1-this.yi)*(this.yi-this.py2)||-1e-5>(e.py1-this.yi)*(this.yi-e.py2))&&(!(1e-5>m(e.a))||!(-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))):i===h?(this.xi=e.px1,this.yi=t*this.xi+s,!(-1e-5>(e.py1-this.yi)*(this.yi-e.py2)||-1e-5>(this.py1-this.yi)*(this.yi-this.py2))&&(!(1e-5>m(l))||!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)))):t===i?s==n&&(this.px1>=f(e.px1,e.px2)&&this.px1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.px2>=f(e.px1,e.px2)&&this.px2<=d(e.px1,e.px2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=(n-s)/(t-i),this.yi=t*this.xi+s,!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)||-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))}}class S{constructor(e,t,i,s,n,a,l,o){this.deltaX=0,this.hGap=0,this.top=e,this.bottom=t,this.left=i,this.right=s,this.gap=n,this.sinAngle=a,this.tanAngle=o,1e-4>m(a)?this.pos=i+n:.9999m(this.sinAngle)){if(this.posthis.right&&t>this.right;)if(this.pos+=this.hGap,e=this.pos-this.deltaX/2,t=this.pos+this.deltaX/2,this.pos>this.right+this.deltaX)return null;const a=new A([e,i],[t,n]);this.sLeft&&a.intersects(this.sLeft)&&(e=a.xi,i=a.yi),this.sRight&&a.intersects(this.sRight)&&(t=a.xi,n=a.yi),0a&&(a=4*s.strokeWidth),a=d(a,.1);let o=s.fillWeight;0>o&&(o=s.strokeWidth/2);for(const r of e){const e=t(r),i=e/a,l=u(i)-1,p=Math.atan((r[1][1]-r[0][1])/(r[1][0]-r[0][0]));for(let e=0;ec;)c+=2*b,u+=2*b;u-c>2*b&&(c=0,u=2*b);const y=2*b/p.curveStepCount,x=f(y/2,(u-c)/2),O=this._arc(x,o,d,h,g,c,u,1,p),P=this._arc(x,o,d,h,g,c,u,1.5,p);let v=O.concat(P);return l&&(r?(v=v.concat(this.doubleLine(o,d,o+h*_(c),d+g*w(c),p)),v=v.concat(this.doubleLine(o,d,o+h*_(u),d+g*w(u),p))):(v.push({op:'lineTo',data:[o,d]}),v.push({op:'lineTo',data:[o+h*_(c),d+g*w(c)]}))),{type:'path',ops:v}}svgPath(e,t){e=(e||'').replace(/\n/g,' ').replace(/(-\s)/g,'-').replace('/(ss)/g',' ');let n=new P(e);if(t.simplification){const e=new k(n.linearPoints,n.closed),i=e.fit(t.simplification);n=new P(i)}let a=[];const l=n.segments||[];for(let o=0;of;)f+=2*b,h+=2*b;h-f>2*b&&(f=0,h=2*b);const g=(h-f)/l.curveStepCount,c=[];for(let u=f;u<=h;u+=g)c.push([o+p*_(u),r+d*w(u)]);return c.push([o+p*_(h),r+d*w(h)]),c.push([o,r]),this.patternFillPolygon(c,l)}getOffset(e,t,i){return i.roughness*(Math.random()*(t-e)+e)}doubleLine(e,t,i,s,n){const a=this._line(e,t,i,s,n,!0,!1),l=this._line(e,t,i,s,n,!0,!0);return a.concat(l)}_line(e,t,i,s,n,a,l){const o=g(e-i,2)+g(t-s,2);let r=n.maxRandomnessOffset||0;100*(r*r)>o&&(r=y(o)/10);const p=r/2,d=.2+.2*Math.random();let f=n.bowing*n.maxRandomnessOffset*(s-t)/200,h=n.bowing*n.maxRandomnessOffset*(e-i)/200;f=this.getOffset(-f,f,n),h=this.getOffset(-h,h,n);const c=[];return a&&(l?c.push({op:'move',data:[e+this.getOffset(-p,p,n),t+this.getOffset(-p,p,n)]}):c.push({op:'move',data:[e+this.getOffset(-r,r,n),t+this.getOffset(-r,r,n)]})),l?c.push({op:'bcurveTo',data:[f+e+(i-e)*d+this.getOffset(-p,p,n),h+t+(s-t)*d+this.getOffset(-p,p,n),f+e+2*(i-e)*d+this.getOffset(-p,p,n),h+t+2*(s-t)*d+this.getOffset(-p,p,n),i+this.getOffset(-p,p,n),s+this.getOffset(-p,p,n)]}):c.push({op:'bcurveTo',data:[f+e+(i-e)*d+this.getOffset(-r,r,n),h+t+(s-t)*d+this.getOffset(-r,r,n),f+e+2*(i-e)*d+this.getOffset(-r,r,n),h+t+2*(s-t)*d+this.getOffset(-r,r,n),i+this.getOffset(-r,r,n),s+this.getOffset(-r,r,n)]}),c}_curve(e,t,i){const n=e.length;let a=[];if(3f;f++)0===f?o.push({op:'move',data:[r.x,r.y]}):o.push({op:'move',data:[r.x+this.getOffset(-d[0],d[0],p),r.y+this.getOffset(-d[0],d[0],p)]}),h=[a+this.getOffset(-d[f],d[f],p),l+this.getOffset(-d[f],d[f],p)],o.push({op:'bcurveTo',data:[e+this.getOffset(-d[f],d[f],p),t+this.getOffset(-d[f],d[f],p),s+this.getOffset(-d[f],d[f],p),n+this.getOffset(-d[f],d[f],p),h[0],h[1]]});return r.setPosition(h[0],h[1]),o}_processSegment(e,t,i,s){let n=[];switch(t.key){case'M':case'm':{const i='m'===t.key;if(2<=t.data.length){let a=+t.data[0],l=+t.data[1];i&&(a+=e.x,l+=e.y);const o=1*(s.maxRandomnessOffset||0);a+=this.getOffset(-o,o,s),l+=this.getOffset(-o,o,s),e.setPosition(a,l),n.push({op:'move',data:[a,l]})}break}case'L':case'l':{const i='l'===t.key;if(2<=t.data.length){let a=+t.data[0],l=+t.data[1];i&&(a+=e.x,l+=e.y),n=n.concat(this.doubleLine(e.x,e.y,a,l,s)),e.setPosition(a,l)}break}case'H':case'h':{const i='h'===t.key;if(t.data.length){let a=+t.data[0];i&&(a+=e.x),n=n.concat(this.doubleLine(e.x,e.y,a,e.y,s)),e.setPosition(a,e.y)}break}case'V':case'v':{const i='v'===t.key;if(t.data.length){let a=+t.data[0];i&&(a+=e.y),n=n.concat(this.doubleLine(e.x,e.y,e.x,a,s)),e.setPosition(e.x,a)}break}case'Z':case'z':{e.first&&(n=n.concat(this.doubleLine(e.x,e.y,e.first[0],e.first[1],s)),e.setPosition(e.first[0],e.first[1]),e.first=null);break}case'C':case'c':{const i='c'===t.key;if(6<=t.data.length){let a=+t.data[0],l=+t.data[1],o=+t.data[2],r=+t.data[3],p=+t.data[4],d=+t.data[5];i&&(a+=e.x,o+=e.x,p+=e.x,l+=e.y,r+=e.y,d+=e.y);const f=this._bezierTo(a,l,o,r,p,d,e,s);n=n.concat(f),e.bezierReflectionPoint=[p+(p-o),d+(d-r)]}break}case'S':case's':{const a='s'===t.key;if(4<=t.data.length){let l=+t.data[0],o=+t.data[1],r=+t.data[2],p=+t.data[3];a&&(l+=e.x,r+=e.x,o+=e.y,p+=e.y);let d=l,f=o;const h=i?i.key:'';let g=null;('c'===h||'C'===h||'s'===h||'S'===h)&&(g=e.bezierReflectionPoint),g&&(d=g[0],f=g[1]);const c=this._bezierTo(d,f,l,o,r,p,e,s);n=n.concat(c),e.bezierReflectionPoint=[r+(r-l),p+(p-o)]}break}case'Q':case'q':{const i='q'===t.key;if(4<=t.data.length){let a=+t.data[0],l=+t.data[1],o=+t.data[2],r=+t.data[3];i&&(a+=e.x,o+=e.x,l+=e.y,r+=e.y);const p=1*(1+.2*s.roughness),d=1.5*(1+.22*s.roughness);n.push({op:'move',data:[e.x+this.getOffset(-p,p,s),e.y+this.getOffset(-p,p,s)]});let h=[o+this.getOffset(-p,p,s),r+this.getOffset(-p,p,s)];n.push({op:'qcurveTo',data:[a+this.getOffset(-p,p,s),l+this.getOffset(-p,p,s),h[0],h[1]]}),n.push({op:'move',data:[e.x+this.getOffset(-d,d,s),e.y+this.getOffset(-d,d,s)]}),h=[o+this.getOffset(-d,d,s),r+this.getOffset(-d,d,s)],n.push({op:'qcurveTo',data:[a+this.getOffset(-d,d,s),l+this.getOffset(-d,d,s),h[0],h[1]]}),e.setPosition(h[0],h[1]),e.quadReflectionPoint=[o+(o-a),r+(r-l)]}break}case'T':case't':{const a='t'===t.key;if(2<=t.data.length){let l=+t.data[0],o=+t.data[1];a&&(l+=e.x,o+=e.y);let r=l,p=o;const d=i?i.key:'';let h=null;('q'===d||'Q'===d||'t'===d||'T'===d)&&(h=e.quadReflectionPoint),h&&(r=h[0],p=h[1]);const g=1*(1+.2*s.roughness),c=1.5*(1+.22*s.roughness);n.push({op:'move',data:[e.x+this.getOffset(-g,g,s),e.y+this.getOffset(-g,g,s)]});let u=[l+this.getOffset(-g,g,s),o+this.getOffset(-g,g,s)];n.push({op:'qcurveTo',data:[r+this.getOffset(-g,g,s),p+this.getOffset(-g,g,s),u[0],u[1]]}),n.push({op:'move',data:[e.x+this.getOffset(-c,c,s),e.y+this.getOffset(-c,c,s)]}),u=[l+this.getOffset(-c,c,s),o+this.getOffset(-c,c,s)],n.push({op:'qcurveTo',data:[r+this.getOffset(-c,c,s),p+this.getOffset(-c,c,s),u[0],u[1]]}),e.setPosition(u[0],u[1]),e.quadReflectionPoint=[l+(l-r),o+(o-p)]}break}case'A':case'a':{const i='a'===t.key;if(7<=t.data.length){const a=+t.data[0],l=+t.data[1],o=+t.data[2],r=+t.data[3],p=+t.data[4];let d=+t.data[5],f=+t.data[6];if(i&&(d+=e.x,f+=e.y),d===e.x&&f===e.y)break;if(0==a||0==l)n=n.concat(this.doubleLine(e.x,e.y,d,f,s)),e.setPosition(d,f);else for(let t=0;1>t;t++){const t=new v([e.x,e.y],[d,f],[a,l],o,!!r,!!p);for(let i=t.getNextSegment();i;){const a=this._bezierTo(i.cp1[0],i.cp1[1],i.cp2[0],i.cp2[1],i.to[0],i.to[1],e,s);n=n.concat(a),i=t.getNextSegment()}}}break}default:}return n}}const L='undefined'!=typeof self,R=L&&self&&self.document&&self.document.currentScript&&self.document.currentScript.src,D='undefined'!=typeof self;class B{constructor(e,t){this.defaultOptions={maxRandomnessOffset:2,roughness:1,bowing:1,stroke:'#000',strokeWidth:1,curveTightness:0,curveStepCount:9,fillStyle:'hachure',fillWeight:-1,hachureAngle:-41,hachureGap:-1},this.config=e||{},this.surface=t,this.renderer=o(this.config),this.config.options&&(this.defaultOptions=this._options(this.config.options))}_options(e){return e?Object.assign({},this.defaultOptions,e):this.defaultOptions}_drawable(e,t,i){return{shape:e,sets:t||[],options:i||this.defaultOptions}}get lib(){return this.renderer}getCanvasSize(){const e=e=>e&&'object'==typeof e&&e.baseVal&&e.baseVal.value?e.baseVal.value:e||100;return this.surface?[e(this.surface.width),e(this.surface.height)]:[100,100]}computePolygonSize(e){if(e.length){let t=e[0][0],s=e[0][0],n=e[0][1],a=e[0][1];for(let l=1;li&&(i=t.strokeWidth/2),{d:this.opsToPath(e),stroke:t.fill||'none',strokeWidth:i,fill:'none'}}opsToPath(e){let t='';for(const i of e.ops){const e=i.data;switch(i.op){case'move':t+=`M${e[0]} ${e[1]} `;break;case'bcurveTo':t+=`C${e[0]} ${e[1]}, ${e[2]} ${e[3]}, ${e[4]} ${e[5]} `;break;case'qcurveTo':t+=`Q${e[0]} ${e[1]}, ${e[2]} ${e[3]} `;break;case'lineTo':t+=`L${e[0]} ${e[1]} `;}}return t.trim()}}const M='undefined'!=typeof document;class q{constructor(e,t){this.canvas=e,this.ctx=this.canvas.getContext('2d'),this.gen=new B(t||null,this.canvas)}get generator(){return this.gen}static createRenderer(){return new E}line(e,t,i,s,n){const a=this.gen.line(e,t,i,s,n);return this.draw(a),a}rectangle(e,t,i,s,n){const a=this.gen.rectangle(e,t,i,s,n);return this.draw(a),a}ellipse(e,t,i,s,n){const a=this.gen.ellipse(e,t,i,s,n);return this.draw(a),a}circle(e,t,i,s){const n=this.gen.circle(e,t,i,s);return this.draw(n),n}linearPath(e,t){const i=this.gen.linearPath(e,t);return this.draw(i),i}polygon(e,t){const i=this.gen.polygon(e,t);return this.draw(i),i}arc(e,t,i,s,n,a,l=!1,o){const r=this.gen.arc(e,t,i,s,n,a,l,o);return this.draw(r),r}curve(e,t){const i=this.gen.curve(e,t);return this.draw(i),i}path(e,t){const i=this.gen.path(e,t);return this.draw(i),i}draw(e){const t=e.sets||[],i=e.options||this.gen.defaultOptions,s=this.ctx;for(const n of t)switch(n.type){case'path':s.save(),s.strokeStyle=i.stroke,s.lineWidth=i.strokeWidth,this._drawToContext(s,n),s.restore();break;case'fillPath':s.save(),s.fillStyle=i.fill||'',this._drawToContext(s,n),s.restore();break;case'fillSketch':this.fillSketch(s,n,i);break;case'path2Dfill':{this.ctx.save(),this.ctx.fillStyle=i.fill||'';const e=new Path2D(n.path);this.ctx.fill(e),this.ctx.restore();break}case'path2Dpattern':{const e=this.canvas.ownerDocument||M&&document;if(e){const t=n.size,s=e.createElement('canvas'),a=s.getContext('2d'),l=this.computeBBox(n.path);l&&(l.width||l.height)?(s.width=this.canvas.width,s.height=this.canvas.height,a.translate(l.x||0,l.y||0)):(s.width=t[0],s.height=t[1]),this.fillSketch(a,n,i),this.ctx.save(),this.ctx.fillStyle=this.ctx.createPattern(s,'repeat');const o=new Path2D(n.path);this.ctx.fill(o),this.ctx.restore()}else console.error('Cannot render path2Dpattern. No defs/document defined.');break}}}computeBBox(e){if(M)try{const t=document.createElementNS('http://www.w3.org/2000/svg','svg');t.setAttribute('width','0'),t.setAttribute('height','0');const i=self.document.createElementNS('http://www.w3.org/2000/svg','path');i.setAttribute('d',e),t.appendChild(i),document.body.appendChild(t);const s=i.getBBox();return document.body.removeChild(t),s}catch(e){}return null}fillSketch(e,t,i){let s=i.fillWeight;0>s&&(s=i.strokeWidth/2),e.save(),e.strokeStyle=i.fill||'',e.lineWidth=s,this._drawToContext(e,t),e.restore()}_drawToContext(e,t){e.beginPath();for(const i of t.ops){const t=i.data;switch(i.op){case'move':e.moveTo(t[0],t[1]);break;case'bcurveTo':e.bezierCurveTo(t[0],t[1],t[2],t[3],t[4],t[5]);break;case'qcurveTo':e.quadraticCurveTo(t[0],t[1],t[2],t[3]);break;case'lineTo':e.lineTo(t[0],t[1]);}}'fillPath'===t.type?e.fill():e.stroke()}}class F extends B{async line(e,t,i,s,n){const a=this._options(n);return this._drawable('line',[await this.lib.line(e,t,i,s,a)],a)}async rectangle(e,t,i,s,n){const a=this._options(n),l=[];if(a.fill){const n=[[e,t],[e+i,t],[e+i,t+s],[e,t+s]];'solid'===a.fillStyle?l.push((await this.lib.solidFillPolygon(n,a))):l.push((await this.lib.patternFillPolygon(n,a)))}return l.push((await this.lib.rectangle(e,t,i,s,a))),this._drawable('rectangle',l,a)}async ellipse(e,t,i,s,n){const a=this._options(n),l=[];if(a.fill)if('solid'===a.fillStyle){const n=await this.lib.ellipse(e,t,i,s,a);n.type='fillPath',l.push(n)}else l.push((await this.lib.patternFillEllipse(e,t,i,s,a)));return l.push((await this.lib.ellipse(e,t,i,s,a))),this._drawable('ellipse',l,a)}async circle(e,t,i,s){const n=await this.ellipse(e,t,i,i,s);return n.shape='circle',n}async linearPath(e,t){const i=this._options(t);return this._drawable('linearPath',[await this.lib.linearPath(e,!1,i)],i)}async arc(e,t,i,s,n,a,l=!1,r){const p=this._options(r),o=[];if(l&&p.fill)if('solid'===p.fillStyle){const l=await this.lib.arc(e,t,i,s,n,a,!0,!1,p);l.type='fillPath',o.push(l)}else o.push((await this.lib.patternFillArc(e,t,i,s,n,a,p)));return o.push((await this.lib.arc(e,t,i,s,n,a,l,!0,p))),this._drawable('arc',o,p)}async curve(e,t){const i=this._options(t);return this._drawable('curve',[await this.lib.curve(e,i)],i)}async polygon(e,t){const i=this._options(t),s=[];if(i.fill)if('solid'===i.fillStyle)s.push((await this.lib.solidFillPolygon(e,i)));else{const t=this.computePolygonSize(e),n=[[0,0],[t[0],0],[t[0],t[1]],[0,t[1]]],a=await this.lib.patternFillPolygon(n,i);a.type='path2Dpattern',a.size=t,a.path=this.polygonPath(e),s.push(a)}return s.push((await this.lib.linearPath(e,!0,i))),this._drawable('polygon',s,i)}async path(e,t){const i=this._options(t),s=[];if(!e)return this._drawable('path',s,i);if(i.fill)if('solid'===i.fillStyle){s.push({type:'path2Dfill',path:e,ops:[]})}else{const t=this.computePathSize(e),n=[[0,0],[t[0],0],[t[0],t[1]],[0,t[1]]],a=await this.lib.patternFillPolygon(n,i);a.type='path2Dpattern',a.size=t,a.path=e,s.push(a)}return s.push((await this.lib.svgPath(e,i))),this._drawable('path',s,i)}}class U extends q{constructor(e,t){super(e,t),this.genAsync=new F(t||null,this.canvas)}get generator(){return this.genAsync}async line(e,t,i,s,n){const a=await this.genAsync.line(e,t,i,s,n);return this.draw(a),a}async rectangle(e,t,i,s,n){const a=await this.genAsync.rectangle(e,t,i,s,n);return this.draw(a),a}async ellipse(e,t,i,s,n){const a=await this.genAsync.ellipse(e,t,i,s,n);return this.draw(a),a}async circle(e,t,i,s){const n=await this.genAsync.circle(e,t,i,s);return this.draw(n),n}async linearPath(e,t){const i=await this.genAsync.linearPath(e,t);return this.draw(i),i}async polygon(e,t){const i=await this.genAsync.polygon(e,t);return this.draw(i),i}async arc(e,t,i,s,n,a,l=!1,o){const r=await this.genAsync.arc(e,t,i,s,n,a,l,o);return this.draw(r),r}async curve(e,t){const i=await this.genAsync.curve(e,t);return this.draw(i),i}async path(e,t){const i=await this.genAsync.path(e,t);return this.draw(i),i}}const X='undefined'!=typeof document;class G{constructor(e,t){this.svg=e,this.gen=new B(t||null,this.svg)}get generator(){return this.gen}static createRenderer(){return new E}get defs(){const e=this.svg.ownerDocument||X&&document;if(e&&!this._defs){const t=e.createElementNS('http://www.w3.org/2000/svg','defs');this.svg.firstChild?this.svg.insertBefore(t,this.svg.firstChild):this.svg.appendChild(t),this._defs=t}return this._defs||null}line(e,t,i,s,n){const a=this.gen.line(e,t,i,s,n);return this.draw(a)}rectangle(e,t,i,s,n){const a=this.gen.rectangle(e,t,i,s,n);return this.draw(a)}ellipse(e,t,i,s,n){const a=this.gen.ellipse(e,t,i,s,n);return this.draw(a)}circle(e,t,i,s){const n=this.gen.circle(e,t,i,s);return this.draw(n)}linearPath(e,t){const i=this.gen.linearPath(e,t);return this.draw(i)}polygon(e,t){const i=this.gen.polygon(e,t);return this.draw(i)}arc(e,t,i,s,n,a,l=!1,o){const r=this.gen.arc(e,t,i,s,n,a,l,o);return this.draw(r)}curve(e,t){const i=this.gen.curve(e,t);return this.draw(i)}path(e,t){const i=this.gen.path(e,t);return this.draw(i)}draw(e){const t=e.sets||[],i=e.options||this.gen.defaultOptions,s=this.svg.ownerDocument||X&&document,n=s.createElementNS('http://www.w3.org/2000/svg','g');for(const a of t){let e=null;switch(a.type){case'path':{e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',this.opsToPath(a)),e.style.stroke=i.stroke,e.style.strokeWidth=i.strokeWidth+'',e.style.fill='none';break}case'fillPath':{e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',this.opsToPath(a)),e.style.stroke='none',e.style.strokeWidth='0',e.style.fill=i.fill||null;break}case'fillSketch':{e=this.fillSketch(s,a,i);break}case'path2Dfill':{e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',a.path||''),e.style.stroke='none',e.style.strokeWidth='0',e.style.fill=i.fill||null;break}case'path2Dpattern':{if(!this.defs)console.error('Cannot render path2Dpattern. No defs/document defined.');else{const t=a.size,n=s.createElementNS('http://www.w3.org/2000/svg','pattern'),l=`rough-${c(Math.random()*(Number.MAX_SAFE_INTEGER||999999))}`;n.setAttribute('id',l),n.setAttribute('x','0'),n.setAttribute('y','0'),n.setAttribute('width','1'),n.setAttribute('height','1'),n.setAttribute('height','1'),n.setAttribute('viewBox',`0 0 ${r(t[0])} ${r(t[1])}`),n.setAttribute('patternUnits','objectBoundingBox');const o=this.fillSketch(s,a,i);n.appendChild(o),this.defs.appendChild(n),e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',a.path||''),e.style.stroke='none',e.style.strokeWidth='0',e.style.fill=`url(#${l})`}break}}e&&n.appendChild(e)}return n}opsToPath(e){return this.gen.opsToPath(e)}fillSketch(e,t,i){let s=i.fillWeight;0>s&&(s=i.strokeWidth/2);const n=e.createElementNS('http://www.w3.org/2000/svg','path');return n.setAttribute('d',this.opsToPath(t)),n.style.stroke=i.fill||null,n.style.strokeWidth=s+'',n.style.fill='none',n}}class V extends G{constructor(e,t){super(e,t),this.genAsync=new F(t||null,this.svg)}get generator(){return this.genAsync}async line(e,t,i,s,n){const a=await this.genAsync.line(e,t,i,s,n);return this.draw(a)}async rectangle(e,t,i,s,n){const a=await this.genAsync.rectangle(e,t,i,s,n);return this.draw(a)}async ellipse(e,t,i,s,n){const a=await this.genAsync.ellipse(e,t,i,s,n);return this.draw(a)}async circle(e,t,i,s){const n=await this.genAsync.circle(e,t,i,s);return this.draw(n)}async linearPath(e,t){const i=await this.genAsync.linearPath(e,t);return this.draw(i)}async polygon(e,t){const i=await this.genAsync.polygon(e,t);return this.draw(i)}async arc(e,t,i,s,n,a,l=!1,o){const r=await this.genAsync.arc(e,t,i,s,n,a,l,o);return this.draw(r)}async curve(e,t){const i=await this.genAsync.curve(e,t);return this.draw(i)}async path(e,t){const i=await this.genAsync.path(e,t);return this.draw(i)}}var j={canvas(e,t){return t&&t.async?new U(e,t):new q(e,t)},svg(e,t){return t&&t.async?new V(e,t):new G(e,t)},createRenderer(){return q.createRenderer()},generator(e,t){return e&&e.async?new F(e,t):new B(e,t)}};return j}(); diff --git a/dist/rough.umd.es5.js b/dist/rough.umd.es5.js index 5bc9c2c..bde0832 100644 --- a/dist/rough.umd.es5.js +++ b/dist/rough.umd.es5.js @@ -1720,7 +1720,6 @@ strokeWidth: 1, curveTightness: 0, curveStepCount: 9, - fill: null, fillStyle: 'hachure', fillWeight: -1, hachureAngle: -41, @@ -2707,7 +2706,7 @@ path.setAttribute('d', this.opsToPath(drawing)); path.style.stroke = 'none'; path.style.strokeWidth = '0'; - path.style.fill = o.fill; + path.style.fill = o.fill || null; break; } case 'fillSketch': @@ -2721,7 +2720,7 @@ path.setAttribute('d', drawing.path || ''); path.style.stroke = 'none'; path.style.strokeWidth = '0'; - path.style.fill = o.fill; + path.style.fill = o.fill || null; break; } case 'path2Dpattern': @@ -2787,7 +2786,7 @@ } var path = doc.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttribute('d', this.opsToPath(drawing)); - path.style.stroke = o.fill; + path.style.stroke = o.fill || null; path.style.strokeWidth = fweight + ''; path.style.fill = 'none'; return path; diff --git a/dist/rough.umd.es5.min.js b/dist/rough.umd.es5.min.js index 6334dbf..efe5ebf 100644 --- a/dist/rough.umd.es5.min.js +++ b/dist/rough.umd.es5.min.js @@ -1 +1 @@ -(function(e,t){'object'==typeof exports&&'undefined'!=typeof module?module.exports=t():'function'==typeof define&&define.amd?define(t):e.rough=t()})(this,function(){'use strict';function e(e,t){return e.type===t}function t(e){var t=e[0],l=e[1];return y(f(t[0]-l[0],2)+f(t[1]-l[1],2))}function l(e,t){for(var l,a=[],n=new z([e[0],e[1]],[e[2],e[3]]),s=0;sg&&(g=4*t.strokeWidth),g=d(g,.1);for(var y=h%180*(c/180),k=v(y),x=_(y),b=p(y),m=new E(o-1,r+1,n-1,s+1,g,x,k,b),w=void 0;null!=(w=m.nextLine());)for(var P=l(w,e),O=0;O=f&&(f=4*i.strokeWidth);var h=i.fillWeight;0>h&&(h=i.strokeWidth/2);for(var g=p(u%180*(c/180)),v=d/r,_=y(v*g*v*g+1),x=v*g/_,b=1/_,m=f/(r*d/y(d*b*(d*b)+r*x*(r*x))/r),w=y(r*r-(e-r+m)*(e-r+m)),P=e-r+m;Pf){var h=y(1-f/(this._rx*this._rx*this._ry*this._ry));this._rx*=h,this._ry*=h,u=0}else u=(i===o?-1:1)*y(f/(this._rx*this._rx*d*d+this._ry*this._ry*p*p));var s=u*this._rx*d/this._ry,x=-u*this._ry*p/this._rx;this._C=[0,0],this._C[0]=this._cosPhi*s-this._sinPhi*x+(t[0]+l[0])/2,this._C[1]=this._sinPhi*s+this._cosPhi*x+(t[1]+l[1])/2,this._theta=this.calculateVectorAngle(1,0,(p-s)/this._rx,(d-x)/this._ry);var m=this.calculateVectorAngle((p-s)/this._rx,(d-x)/this._ry,(-p-s)/this._rx,(-d-x)/this._ry);!o&&0m&&(m+=2*c),this._numSegs=g(k(m/(c/2))),this._delta=m/this._numSegs,this._T=8/3*_(this._delta/4)*_(this._delta/4)/_(this._delta/2)}}return m(e,[{key:'getNextSegment',value:function(){if(this._segIndex===this._numSegs)return null;var e=v(this._theta),t=_(this._theta),l=this._theta+this._delta,a=v(l),n=_(l),i=[this._cosPhi*this._rx*a-this._sinPhi*this._ry*n+this._C[0],this._sinPhi*this._rx*a+this._cosPhi*this._ry*n+this._C[1]],s=[this._from[0]+this._T*(-this._cosPhi*this._rx*t-this._sinPhi*this._ry*e),this._from[1]+this._T*(-this._sinPhi*this._rx*t+this._cosPhi*this._ry*e)],o=[i[0]+this._T*(this._cosPhi*this._rx*n+this._sinPhi*this._ry*a),i[1]+this._T*(this._sinPhi*this._rx*n-this._cosPhi*this._ry*a)];return this._theta=l,this._from=[i[0],i[1]],this._segIndex++,{cp1:s,cp2:o,to:i}}},{key:'calculateVectorAngle',value:function(e,t,l,a){var n=Math.atan2,i=n(t,e),s=n(a,l);return s>=i?s-i:2*c-(i-s)}}]),e}(),C=function(){function e(t,l){b(this,e),this.sets=t,this.closed=l}return m(e,[{key:'fit',value:function(e){var t=[],l=!0,a=!1,n=void 0;try{for(var s,o=this.sets[Symbol.iterator]();!(l=(s=o.next()).done);l=!0){var r=s.value,p=r.length,u=h(e*p);if(5>u){if(5>=p)continue;u=5}t.push(this.reduce(r,u))}}catch(e){a=!0,n=e}finally{try{!l&&o.return&&o.return()}finally{if(a)throw n}}var f='',g=!0,y=!1,c=void 0;try{for(var v,_,k=t[Symbol.iterator]();!(g=(v=k.next()).done);g=!0){_=v.value;for(var x,b=0;b<_.length;b++)x=_[b],f+=0===b?'M'+x[0]+','+x[1]:'L'+x[0]+','+x[1];this.closed&&(f+='z ')}}catch(e){y=!0,c=e}finally{try{!g&&k.return&&k.return()}finally{if(y)throw c}}return f}},{key:'distance',value:function(e,t){return y(f(e[0]-t[0],2)+f(e[1]-t[1],2))}},{key:'reduce',value:function(e,t){if(e.length<=t)return e;for(var l=e.slice(0);l.length>t;){for(var n=-1,o=-1,r=1;rn||s=u(e.py1,e.py2)&&this.py1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.py2>=u(e.py1,e.py2)&&this.py2<=d(e.py1,e.py2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=this.px1,this.yi=n*this.xi+s,!(-1e-5>(this.py1-this.yi)*(this.yi-this.py2)||-1e-5>(e.py1-this.yi)*(this.yi-e.py2))&&(!(1e-5>k(e.a))||!(-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))):n===t?(this.xi=e.px1,this.yi=l*this.xi+i,!(-1e-5>(e.py1-this.yi)*(this.yi-e.py2)||-1e-5>(this.py1-this.yi)*(this.yi-this.py2))&&(!(1e-5>k(o))||!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)))):l===n?i==s&&(this.px1>=u(e.px1,e.px2)&&this.px1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.px2>=u(e.px1,e.px2)&&this.px2<=d(e.px1,e.px2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=(s-i)/(l-n),this.yi=l*this.xi+i,!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)||-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))}}]),e}(),E=function(){function e(t,l,a,n,i,s,o,r){b(this,e),this.deltaX=0,this.hGap=0,this.top=t,this.bottom=l,this.left=a,this.right=n,this.gap=i,this.sinAngle=s,this.tanAngle=r,1e-4>k(s)?this.pos=a+i:.9999k(this.sinAngle)){if(this.posthis.right&&l>this.right;)if(this.pos+=this.hGap,t=this.pos-this.deltaX/2,l=this.pos+this.deltaX/2,this.pos>this.right+this.deltaX)return null;var i=new z([t,a],[l,n]);this.sLeft&&i.intersects(this.sLeft)&&(t=i.xi,a=i.yi),this.sRight&&i.intersects(this.sRight)&&(l=i.xi,n=i.yi),0s&&(s=4*a.strokeWidth),s=d(s,.1);var o=a.fillWeight;0>o&&(o=a.strokeWidth/2);var r=!0,p=!1,u=void 0;try{for(var f,h=e[Symbol.iterator]();!(r=(f=h.next()).done);r=!0)for(var y=f.value,k=t(y),x=k/s,b=g(x)-1,m=Math.atan((y[1][1]-y[0][1])/(y[1][0]-y[0][0])),w=0;wg;)g+=2*c,y+=2*c;y-g>2*c&&(g=0,y=2*c);var x=2*c/p.curveStepCount,b=u(x/2,(y-g)/2),m=this._arc(b,o,d,f,h,g,y,1,p),w=this._arc(b,o,d,f,h,g,y,1.5,p),P=m.concat(w);return s&&(r?(P=P.concat(this.doubleLine(o,d,o+f*v(g),d+h*_(g),p)),P=P.concat(this.doubleLine(o,d,o+f*v(y),d+h*_(y),p))):(P.push({op:'lineTo',data:[o,d]}),P.push({op:'lineTo',data:[o+f*v(g),d+h*_(g)]}))),{type:'path',ops:P}}},{key:'svgPath',value:function(e,t){e=(e||'').replace(/\n/g,' ').replace(/(-\s)/g,'-').replace('/(ss)/g',' ');var l=new A(e);if(t.simplification){var a=new C(l.linearPoints,l.closed),n=a.fit(t.simplification);l=new A(n)}for(var o=[],r=l.segments||[],d=0;du;)u+=2*c,f+=2*c;f-u>2*c&&(u=0,f=2*c);for(var h=(f-u)/s.curveStepCount,g=[],y=u;y<=f;y+=h)g.push([o+p*v(y),r+d*_(y)]);return g.push([o+p*v(f),r+d*_(f)]),g.push([o,r]),this.patternFillPolygon(g,s)}},{key:'getOffset',value:function(e,t,l){return l.roughness*(Math.random()*(t-e)+e)}},{key:'doubleLine',value:function(e,t,l,a,n){var i=this._line(e,t,l,a,n,!0,!1),s=this._line(e,t,l,a,n,!0,!0);return i.concat(s)}},{key:'_line',value:function(e,t,l,a,n,i,s){var o=f(e-l,2)+f(t-a,2),r=n.maxRandomnessOffset||0;100*(r*r)>o&&(r=y(o)/10);var p=r/2,d=.2+.2*Math.random(),u=n.bowing*n.maxRandomnessOffset*(a-t)/200,h=n.bowing*n.maxRandomnessOffset*(e-l)/200;u=this.getOffset(-u,u,n),h=this.getOffset(-h,h,n);var g=[];return i&&(s?g.push({op:'move',data:[e+this.getOffset(-p,p,n),t+this.getOffset(-p,p,n)]}):g.push({op:'move',data:[e+this.getOffset(-r,r,n),t+this.getOffset(-r,r,n)]})),s?g.push({op:'bcurveTo',data:[u+e+(l-e)*d+this.getOffset(-p,p,n),h+t+(a-t)*d+this.getOffset(-p,p,n),u+e+2*(l-e)*d+this.getOffset(-p,p,n),h+t+2*(a-t)*d+this.getOffset(-p,p,n),l+this.getOffset(-p,p,n),a+this.getOffset(-p,p,n)]}):g.push({op:'bcurveTo',data:[u+e+(l-e)*d+this.getOffset(-r,r,n),h+t+(a-t)*d+this.getOffset(-r,r,n),u+e+2*(l-e)*d+this.getOffset(-r,r,n),h+t+2*(a-t)*d+this.getOffset(-r,r,n),l+this.getOffset(-r,r,n),a+this.getOffset(-r,r,n)]}),g}},{key:'_curve',value:function(e,t,l){var a=e.length,n=[];if(3h;h++)0===h?o.push({op:'move',data:[r.x,r.y]}):o.push({op:'move',data:[r.x+this.getOffset(-d[0],d[0],p),r.y+this.getOffset(-d[0],d[0],p)]}),u=[n+this.getOffset(-d[h],d[h],p),s+this.getOffset(-d[h],d[h],p)],o.push({op:'bcurveTo',data:[e+this.getOffset(-d[h],d[h],p),t+this.getOffset(-d[h],d[h],p),l+this.getOffset(-d[h],d[h],p),a+this.getOffset(-d[h],d[h],p),u[0],u[1]]});return r.setPosition(u[0],u[1]),o}},{key:'_processSegment',value:function(e,t,l,a){var n=[];switch(t.key){case'M':case'm':{var s='m'===t.key;if(2<=t.data.length){var o=+t.data[0],r=+t.data[1];s&&(o+=e.x,r+=e.y);var p=1*(a.maxRandomnessOffset||0);o+=this.getOffset(-p,p,a),r+=this.getOffset(-p,p,a),e.setPosition(o,r),n.push({op:'move',data:[o,r]})}break}case'L':case'l':{var d='l'===t.key;if(2<=t.data.length){var u=+t.data[0],h=+t.data[1];d&&(u+=e.x,h+=e.y),n=n.concat(this.doubleLine(e.x,e.y,u,h,a)),e.setPosition(u,h)}break}case'H':case'h':{var g='h'===t.key;if(t.data.length){var c=+t.data[0];g&&(c+=e.x),n=n.concat(this.doubleLine(e.x,e.y,c,e.y,a)),e.setPosition(c,e.y)}break}case'V':case'v':{var v='v'===t.key;if(t.data.length){var _=+t.data[0];v&&(_+=e.y),n=n.concat(this.doubleLine(e.x,e.y,e.x,_,a)),e.setPosition(e.x,_)}break}case'Z':case'z':{e.first&&(n=n.concat(this.doubleLine(e.x,e.y,e.first[0],e.first[1],a)),e.setPosition(e.first[0],e.first[1]),e.first=null);break}case'C':case'c':{var k='c'===t.key;if(6<=t.data.length){var b=+t.data[0],m=+t.data[1],w=+t.data[2],P=+t.data[3],O=+t.data[4],S=+t.data[5];k&&(b+=e.x,w+=e.x,O+=e.x,m+=e.y,P+=e.y,S+=e.y);var A=this._bezierTo(b,m,w,P,O,S,e,a);n=n.concat(A),e.bezierReflectionPoint=[O+(O-w),S+(S-P)]}break}case'S':case's':{var C='s'===t.key;if(4<=t.data.length){var z=+t.data[0],E=+t.data[1],L=+t.data[2],W=+t.data[3];C&&(z+=e.x,L+=e.x,E+=e.y,W+=e.y);var N=z,R=E,D=l?l.key:'',B=null;('c'===D||'C'===D||'s'===D||'S'===D)&&(B=e.bezierReflectionPoint),B&&(N=B[0],R=B[1]);var F=this._bezierTo(N,R,z,E,L,W,e,a);n=n.concat(F),e.bezierReflectionPoint=[L+(L-z),W+(W-E)]}break}case'Q':case'q':{var M='q'===t.key;if(4<=t.data.length){var q=+t.data[0],U=+t.data[1],X=+t.data[2],V=+t.data[3];M&&(q+=e.x,X+=e.x,U+=e.y,V+=e.y);var G=1*(1+.2*a.roughness),j=1.5*(1+.22*a.roughness);n.push({op:'move',data:[e.x+this.getOffset(-G,G,a),e.y+this.getOffset(-G,G,a)]});var I=[X+this.getOffset(-G,G,a),V+this.getOffset(-G,G,a)];n.push({op:'qcurveTo',data:[q+this.getOffset(-G,G,a),U+this.getOffset(-G,G,a),I[0],I[1]]}),n.push({op:'move',data:[e.x+this.getOffset(-j,j,a),e.y+this.getOffset(-j,j,a)]}),I=[X+this.getOffset(-j,j,a),V+this.getOffset(-j,j,a)],n.push({op:'qcurveTo',data:[q+this.getOffset(-j,j,a),U+this.getOffset(-j,j,a),I[0],I[1]]}),e.setPosition(I[0],I[1]),e.quadReflectionPoint=[X+(X-q),V+(V-U)]}break}case'T':case't':{var Q='t'===t.key;if(2<=t.data.length){var $=+t.data[0],Z=+t.data[1];Q&&($+=e.x,Z+=e.y);var H=$,J=Z,Y=l?l.key:'',K=null;('q'===Y||'Q'===Y||'t'===Y||'T'===Y)&&(K=e.quadReflectionPoint),K&&(H=K[0],J=K[1]);var ee=1*(1+.2*a.roughness),te=1.5*(1+.22*a.roughness);n.push({op:'move',data:[e.x+this.getOffset(-ee,ee,a),e.y+this.getOffset(-ee,ee,a)]});var le=[$+this.getOffset(-ee,ee,a),Z+this.getOffset(-ee,ee,a)];n.push({op:'qcurveTo',data:[H+this.getOffset(-ee,ee,a),J+this.getOffset(-ee,ee,a),le[0],le[1]]}),n.push({op:'move',data:[e.x+this.getOffset(-te,te,a),e.y+this.getOffset(-te,te,a)]}),le=[$+this.getOffset(-te,te,a),Z+this.getOffset(-te,te,a)],n.push({op:'qcurveTo',data:[H+this.getOffset(-te,te,a),J+this.getOffset(-te,te,a),le[0],le[1]]}),e.setPosition(le[0],le[1]),e.quadReflectionPoint=[$+($-H),Z+(Z-J)]}break}case'A':case'a':{var ae='a'===t.key;if(7<=t.data.length){var ne=+t.data[0],ie=+t.data[1],se=+t.data[2],oe=+t.data[3],re=+t.data[4],pe=+t.data[5],de=+t.data[6];if(ae&&(pe+=e.x,de+=e.y),pe===e.x&&de===e.y)break;if(0==ne||0==ie)n=n.concat(this.doubleLine(e.x,e.y,pe,de,a)),e.setPosition(pe,de);else for(var ue=0;1>ue;ue++)for(var fe,he=new T([e.x,e.y],[pe,de],[ne,ie],se,!!oe,!!re),ge=he.getNextSegment();ge;)fe=this._bezierTo(ge.cp1[0],ge.cp1[1],ge.cp2[0],ge.cp2[1],ge.to[0],ge.to[1],e,a),n=n.concat(fe),ge=he.getNextSegment()}break}default:}return n}}]),e}(),F='undefined'!=typeof self,M=F&&self&&self.document&&self.document.currentScript&&self.document.currentScript.src,q='undefined'!=typeof self,U=function(){function e(t,l){b(this,e),this.defaultOptions={maxRandomnessOffset:2,roughness:1,bowing:1,stroke:'#000',strokeWidth:1,curveTightness:0,curveStepCount:9,fill:null,fillStyle:'hachure',fillWeight:-1,hachureAngle:-41,hachureGap:-1},this.config=t||{},this.surface=l,this.renderer=o(this.config),this.config.options&&(this.defaultOptions=this._options(this.config.options))}return m(e,[{key:'_options',value:function(e){return e?Object.assign({},this.defaultOptions,e):this.defaultOptions}},{key:'_drawable',value:function(e,t,l){return{shape:e,sets:t||[],options:l||this.defaultOptions}}},{key:'getCanvasSize',value:function(){var e=function(e){return e&&'object'===('undefined'==typeof e?'undefined':x(e))&&e.baseVal&&e.baseVal.value?e.baseVal.value:e||100};return this.surface?[e(this.surface.width),e(this.surface.height)]:[100,100]}},{key:'computePolygonSize',value:function(e){if(e.length){for(var t=e[0][0],l=e[0][0],a=e[0][1],n=e[0][1],s=1;sl&&(l=t.strokeWidth/2),{d:this.opsToPath(e),stroke:t.fill||'none',strokeWidth:l,fill:'none'}}},{key:'opsToPath',value:function(e){var t='',l=!0,a=!1,n=void 0;try{for(var i,s=e.ops[Symbol.iterator]();!(l=(i=s.next()).done);l=!0){var o=i.value,r=o.data;switch(o.op){case'move':t+='M'+r[0]+' '+r[1]+' ';break;case'bcurveTo':t+='C'+r[0]+' '+r[1]+', '+r[2]+' '+r[3]+', '+r[4]+' '+r[5]+' ';break;case'qcurveTo':t+='Q'+r[0]+' '+r[1]+', '+r[2]+' '+r[3]+' ';break;case'lineTo':t+='L'+r[0]+' '+r[1]+' ';}}}catch(e){a=!0,n=e}finally{try{!l&&s.return&&s.return()}finally{if(a)throw n}}return t.trim()}},{key:'lib',get:function(){return this.renderer}}]),e}(),X='undefined'!=typeof document,V=function(){function e(t,l){b(this,e),this.canvas=t,this.ctx=this.canvas.getContext('2d'),this.gen=new U(l||null,this.canvas)}return m(e,[{key:'line',value:function(e,t,l,a,n){var i=this.gen.line(e,t,l,a,n);return this.draw(i),i}},{key:'rectangle',value:function(e,t,l,a,n){var i=this.gen.rectangle(e,t,l,a,n);return this.draw(i),i}},{key:'ellipse',value:function(e,t,l,a,n){var i=this.gen.ellipse(e,t,l,a,n);return this.draw(i),i}},{key:'circle',value:function(e,t,l,a){var n=this.gen.circle(e,t,l,a);return this.draw(n),n}},{key:'linearPath',value:function(e,t){var l=this.gen.linearPath(e,t);return this.draw(l),l}},{key:'polygon',value:function(e,t){var l=this.gen.polygon(e,t);return this.draw(l),l}},{key:'arc',value:function(e,t,l,a,n,i){var s=!!(6a&&(a=l.strokeWidth/2),e.save(),e.strokeStyle=l.fill||'',e.lineWidth=a,this._drawToContext(e,t),e.restore()}},{key:'_drawToContext',value:function(e,t){e.beginPath();var l=!0,a=!1,n=void 0;try{for(var i,s=t.ops[Symbol.iterator]();!(l=(i=s.next()).done);l=!0){var o=i.value,r=o.data;switch(o.op){case'move':e.moveTo(r[0],r[1]);break;case'bcurveTo':e.bezierCurveTo(r[0],r[1],r[2],r[3],r[4],r[5]);break;case'qcurveTo':e.quadraticCurveTo(r[0],r[1],r[2],r[3]);break;case'lineTo':e.lineTo(r[0],r[1]);}}}catch(e){a=!0,n=e}finally{try{!l&&s.return&&s.return()}finally{if(a)throw n}}'fillPath'===t.type?e.fill():e.stroke()}},{key:'generator',get:function(){return this.gen}}],[{key:'createRenderer',value:function(){return new B}}]),e}(),G=function(e){function t(){return b(this,t),P(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return w(t,e),m(t,[{key:'line',value:async function(e,t,l,a,n){var i=this._options(n);return this._drawable('line',[await this.lib.line(e,t,l,a,i)],i)}},{key:'rectangle',value:async function(e,t,l,a,n){var i=this._options(n),s=[];if(i.fill){var o=[[e,t],[e+l,t],[e+l,t+a],[e,t+a]];'solid'===i.fillStyle?s.push((await this.lib.solidFillPolygon(o,i))):s.push((await this.lib.patternFillPolygon(o,i)))}return s.push((await this.lib.rectangle(e,t,l,a,i))),this._drawable('rectangle',s,i)}},{key:'ellipse',value:async function(e,t,l,a,n){var i=this._options(n),s=[];if(i.fill)if('solid'===i.fillStyle){var o=await this.lib.ellipse(e,t,l,a,i);o.type='fillPath',s.push(o)}else s.push((await this.lib.patternFillEllipse(e,t,l,a,i)));return s.push((await this.lib.ellipse(e,t,l,a,i))),this._drawable('ellipse',s,i)}},{key:'circle',value:async function(e,t,l,a){var n=await this.ellipse(e,t,l,l,a);return n.shape='circle',n}},{key:'linearPath',value:async function(e,t){var l=this._options(t);return this._drawable('linearPath',[await this.lib.linearPath(e,!1,l)],l)}},{key:'arc',value:async function(e,t,l,a,n,i){var s=!!(6a&&(a=l.strokeWidth/2);var n=e.createElementNS('http://www.w3.org/2000/svg','path');return n.setAttribute('d',this.opsToPath(t)),n.style.stroke=l.fill,n.style.strokeWidth=a+'',n.style.fill='none',n}},{key:'generator',get:function(){return this.gen}},{key:'defs',get:function(){var e=this.svg.ownerDocument||I&&document;if(e&&!this._defs){var t=e.createElementNS('http://www.w3.org/2000/svg','defs');this.svg.firstChild?this.svg.insertBefore(t,this.svg.firstChild):this.svg.appendChild(t),this._defs=t}return this._defs||null}}],[{key:'createRenderer',value:function(){return new B}}]),e}(),$=function(e){function t(e,l){b(this,t);var a=P(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,l));return a.genAsync=new G(l||null,a.svg),a}return w(t,e),m(t,[{key:'line',value:async function(e,t,l,a,n){var i=await this.genAsync.line(e,t,l,a,n);return this.draw(i)}},{key:'rectangle',value:async function(e,t,l,a,n){var i=await this.genAsync.rectangle(e,t,l,a,n);return this.draw(i)}},{key:'ellipse',value:async function(e,t,l,a,n){var i=await this.genAsync.ellipse(e,t,l,a,n);return this.draw(i)}},{key:'circle',value:async function(e,t,l,a){var n=await this.genAsync.circle(e,t,l,a);return this.draw(n)}},{key:'linearPath',value:async function(e,t){var l=await this.genAsync.linearPath(e,t);return this.draw(l)}},{key:'polygon',value:async function(e,t){var l=await this.genAsync.polygon(e,t);return this.draw(l)}},{key:'arc',value:async function(e,t,l,a,n,i){var s=!!(6g&&(g=4*t.strokeWidth),g=d(g,.1);for(var y=h%180*(c/180),k=v(y),x=_(y),b=p(y),m=new E(o-1,r+1,n-1,s+1,g,x,k,b),w=void 0;null!=(w=m.nextLine());)for(var P=l(w,e),O=0;O=f&&(f=4*i.strokeWidth);var h=i.fillWeight;0>h&&(h=i.strokeWidth/2);for(var g=p(u%180*(c/180)),v=d/r,_=y(v*g*v*g+1),x=v*g/_,b=1/_,m=f/(r*d/y(d*b*(d*b)+r*x*(r*x))/r),w=y(r*r-(e-r+m)*(e-r+m)),P=e-r+m;Pf){var h=y(1-f/(this._rx*this._rx*this._ry*this._ry));this._rx*=h,this._ry*=h,u=0}else u=(i===o?-1:1)*y(f/(this._rx*this._rx*d*d+this._ry*this._ry*p*p));var s=u*this._rx*d/this._ry,x=-u*this._ry*p/this._rx;this._C=[0,0],this._C[0]=this._cosPhi*s-this._sinPhi*x+(t[0]+l[0])/2,this._C[1]=this._sinPhi*s+this._cosPhi*x+(t[1]+l[1])/2,this._theta=this.calculateVectorAngle(1,0,(p-s)/this._rx,(d-x)/this._ry);var m=this.calculateVectorAngle((p-s)/this._rx,(d-x)/this._ry,(-p-s)/this._rx,(-d-x)/this._ry);!o&&0m&&(m+=2*c),this._numSegs=g(k(m/(c/2))),this._delta=m/this._numSegs,this._T=8/3*_(this._delta/4)*_(this._delta/4)/_(this._delta/2)}}return m(e,[{key:'getNextSegment',value:function(){if(this._segIndex===this._numSegs)return null;var e=v(this._theta),t=_(this._theta),l=this._theta+this._delta,a=v(l),n=_(l),i=[this._cosPhi*this._rx*a-this._sinPhi*this._ry*n+this._C[0],this._sinPhi*this._rx*a+this._cosPhi*this._ry*n+this._C[1]],s=[this._from[0]+this._T*(-this._cosPhi*this._rx*t-this._sinPhi*this._ry*e),this._from[1]+this._T*(-this._sinPhi*this._rx*t+this._cosPhi*this._ry*e)],o=[i[0]+this._T*(this._cosPhi*this._rx*n+this._sinPhi*this._ry*a),i[1]+this._T*(this._sinPhi*this._rx*n-this._cosPhi*this._ry*a)];return this._theta=l,this._from=[i[0],i[1]],this._segIndex++,{cp1:s,cp2:o,to:i}}},{key:'calculateVectorAngle',value:function(e,t,l,a){var n=Math.atan2,i=n(t,e),s=n(a,l);return s>=i?s-i:2*c-(i-s)}}]),e}(),C=function(){function e(t,l){b(this,e),this.sets=t,this.closed=l}return m(e,[{key:'fit',value:function(e){var t=[],l=!0,a=!1,n=void 0;try{for(var s,o=this.sets[Symbol.iterator]();!(l=(s=o.next()).done);l=!0){var r=s.value,p=r.length,u=h(e*p);if(5>u){if(5>=p)continue;u=5}t.push(this.reduce(r,u))}}catch(e){a=!0,n=e}finally{try{!l&&o.return&&o.return()}finally{if(a)throw n}}var f='',g=!0,y=!1,c=void 0;try{for(var v,_,k=t[Symbol.iterator]();!(g=(v=k.next()).done);g=!0){_=v.value;for(var x,b=0;b<_.length;b++)x=_[b],f+=0===b?'M'+x[0]+','+x[1]:'L'+x[0]+','+x[1];this.closed&&(f+='z ')}}catch(e){y=!0,c=e}finally{try{!g&&k.return&&k.return()}finally{if(y)throw c}}return f}},{key:'distance',value:function(e,t){return y(f(e[0]-t[0],2)+f(e[1]-t[1],2))}},{key:'reduce',value:function(e,t){if(e.length<=t)return e;for(var l=e.slice(0);l.length>t;){for(var n=-1,o=-1,r=1;rn||s=u(e.py1,e.py2)&&this.py1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.py2>=u(e.py1,e.py2)&&this.py2<=d(e.py1,e.py2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=this.px1,this.yi=n*this.xi+s,!(-1e-5>(this.py1-this.yi)*(this.yi-this.py2)||-1e-5>(e.py1-this.yi)*(this.yi-e.py2))&&(!(1e-5>k(e.a))||!(-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))):n===t?(this.xi=e.px1,this.yi=l*this.xi+i,!(-1e-5>(e.py1-this.yi)*(this.yi-e.py2)||-1e-5>(this.py1-this.yi)*(this.yi-this.py2))&&(!(1e-5>k(o))||!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)))):l===n?i==s&&(this.px1>=u(e.px1,e.px2)&&this.px1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.px2>=u(e.px1,e.px2)&&this.px2<=d(e.px1,e.px2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=(s-i)/(l-n),this.yi=l*this.xi+i,!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)||-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))}}]),e}(),E=function(){function e(t,l,a,n,i,s,o,r){b(this,e),this.deltaX=0,this.hGap=0,this.top=t,this.bottom=l,this.left=a,this.right=n,this.gap=i,this.sinAngle=s,this.tanAngle=r,1e-4>k(s)?this.pos=a+i:.9999k(this.sinAngle)){if(this.posthis.right&&l>this.right;)if(this.pos+=this.hGap,t=this.pos-this.deltaX/2,l=this.pos+this.deltaX/2,this.pos>this.right+this.deltaX)return null;var i=new z([t,a],[l,n]);this.sLeft&&i.intersects(this.sLeft)&&(t=i.xi,a=i.yi),this.sRight&&i.intersects(this.sRight)&&(l=i.xi,n=i.yi),0s&&(s=4*a.strokeWidth),s=d(s,.1);var o=a.fillWeight;0>o&&(o=a.strokeWidth/2);var r=!0,p=!1,u=void 0;try{for(var f,h=e[Symbol.iterator]();!(r=(f=h.next()).done);r=!0)for(var y=f.value,k=t(y),x=k/s,b=g(x)-1,m=Math.atan((y[1][1]-y[0][1])/(y[1][0]-y[0][0])),w=0;wg;)g+=2*c,y+=2*c;y-g>2*c&&(g=0,y=2*c);var x=2*c/p.curveStepCount,b=u(x/2,(y-g)/2),m=this._arc(b,o,d,f,h,g,y,1,p),w=this._arc(b,o,d,f,h,g,y,1.5,p),P=m.concat(w);return s&&(r?(P=P.concat(this.doubleLine(o,d,o+f*v(g),d+h*_(g),p)),P=P.concat(this.doubleLine(o,d,o+f*v(y),d+h*_(y),p))):(P.push({op:'lineTo',data:[o,d]}),P.push({op:'lineTo',data:[o+f*v(g),d+h*_(g)]}))),{type:'path',ops:P}}},{key:'svgPath',value:function(e,t){e=(e||'').replace(/\n/g,' ').replace(/(-\s)/g,'-').replace('/(ss)/g',' ');var l=new A(e);if(t.simplification){var a=new C(l.linearPoints,l.closed),n=a.fit(t.simplification);l=new A(n)}for(var o=[],r=l.segments||[],d=0;du;)u+=2*c,f+=2*c;f-u>2*c&&(u=0,f=2*c);for(var h=(f-u)/s.curveStepCount,g=[],y=u;y<=f;y+=h)g.push([o+p*v(y),r+d*_(y)]);return g.push([o+p*v(f),r+d*_(f)]),g.push([o,r]),this.patternFillPolygon(g,s)}},{key:'getOffset',value:function(e,t,l){return l.roughness*(Math.random()*(t-e)+e)}},{key:'doubleLine',value:function(e,t,l,a,n){var i=this._line(e,t,l,a,n,!0,!1),s=this._line(e,t,l,a,n,!0,!0);return i.concat(s)}},{key:'_line',value:function(e,t,l,a,n,i,s){var o=f(e-l,2)+f(t-a,2),r=n.maxRandomnessOffset||0;100*(r*r)>o&&(r=y(o)/10);var p=r/2,d=.2+.2*Math.random(),u=n.bowing*n.maxRandomnessOffset*(a-t)/200,h=n.bowing*n.maxRandomnessOffset*(e-l)/200;u=this.getOffset(-u,u,n),h=this.getOffset(-h,h,n);var g=[];return i&&(s?g.push({op:'move',data:[e+this.getOffset(-p,p,n),t+this.getOffset(-p,p,n)]}):g.push({op:'move',data:[e+this.getOffset(-r,r,n),t+this.getOffset(-r,r,n)]})),s?g.push({op:'bcurveTo',data:[u+e+(l-e)*d+this.getOffset(-p,p,n),h+t+(a-t)*d+this.getOffset(-p,p,n),u+e+2*(l-e)*d+this.getOffset(-p,p,n),h+t+2*(a-t)*d+this.getOffset(-p,p,n),l+this.getOffset(-p,p,n),a+this.getOffset(-p,p,n)]}):g.push({op:'bcurveTo',data:[u+e+(l-e)*d+this.getOffset(-r,r,n),h+t+(a-t)*d+this.getOffset(-r,r,n),u+e+2*(l-e)*d+this.getOffset(-r,r,n),h+t+2*(a-t)*d+this.getOffset(-r,r,n),l+this.getOffset(-r,r,n),a+this.getOffset(-r,r,n)]}),g}},{key:'_curve',value:function(e,t,l){var a=e.length,n=[];if(3h;h++)0===h?o.push({op:'move',data:[r.x,r.y]}):o.push({op:'move',data:[r.x+this.getOffset(-d[0],d[0],p),r.y+this.getOffset(-d[0],d[0],p)]}),u=[n+this.getOffset(-d[h],d[h],p),s+this.getOffset(-d[h],d[h],p)],o.push({op:'bcurveTo',data:[e+this.getOffset(-d[h],d[h],p),t+this.getOffset(-d[h],d[h],p),l+this.getOffset(-d[h],d[h],p),a+this.getOffset(-d[h],d[h],p),u[0],u[1]]});return r.setPosition(u[0],u[1]),o}},{key:'_processSegment',value:function(e,t,l,a){var n=[];switch(t.key){case'M':case'm':{var s='m'===t.key;if(2<=t.data.length){var o=+t.data[0],r=+t.data[1];s&&(o+=e.x,r+=e.y);var p=1*(a.maxRandomnessOffset||0);o+=this.getOffset(-p,p,a),r+=this.getOffset(-p,p,a),e.setPosition(o,r),n.push({op:'move',data:[o,r]})}break}case'L':case'l':{var d='l'===t.key;if(2<=t.data.length){var u=+t.data[0],h=+t.data[1];d&&(u+=e.x,h+=e.y),n=n.concat(this.doubleLine(e.x,e.y,u,h,a)),e.setPosition(u,h)}break}case'H':case'h':{var g='h'===t.key;if(t.data.length){var c=+t.data[0];g&&(c+=e.x),n=n.concat(this.doubleLine(e.x,e.y,c,e.y,a)),e.setPosition(c,e.y)}break}case'V':case'v':{var v='v'===t.key;if(t.data.length){var _=+t.data[0];v&&(_+=e.y),n=n.concat(this.doubleLine(e.x,e.y,e.x,_,a)),e.setPosition(e.x,_)}break}case'Z':case'z':{e.first&&(n=n.concat(this.doubleLine(e.x,e.y,e.first[0],e.first[1],a)),e.setPosition(e.first[0],e.first[1]),e.first=null);break}case'C':case'c':{var k='c'===t.key;if(6<=t.data.length){var b=+t.data[0],m=+t.data[1],w=+t.data[2],P=+t.data[3],O=+t.data[4],S=+t.data[5];k&&(b+=e.x,w+=e.x,O+=e.x,m+=e.y,P+=e.y,S+=e.y);var A=this._bezierTo(b,m,w,P,O,S,e,a);n=n.concat(A),e.bezierReflectionPoint=[O+(O-w),S+(S-P)]}break}case'S':case's':{var C='s'===t.key;if(4<=t.data.length){var z=+t.data[0],E=+t.data[1],L=+t.data[2],W=+t.data[3];C&&(z+=e.x,L+=e.x,E+=e.y,W+=e.y);var N=z,R=E,D=l?l.key:'',B=null;('c'===D||'C'===D||'s'===D||'S'===D)&&(B=e.bezierReflectionPoint),B&&(N=B[0],R=B[1]);var F=this._bezierTo(N,R,z,E,L,W,e,a);n=n.concat(F),e.bezierReflectionPoint=[L+(L-z),W+(W-E)]}break}case'Q':case'q':{var M='q'===t.key;if(4<=t.data.length){var q=+t.data[0],U=+t.data[1],X=+t.data[2],V=+t.data[3];M&&(q+=e.x,X+=e.x,U+=e.y,V+=e.y);var G=1*(1+.2*a.roughness),j=1.5*(1+.22*a.roughness);n.push({op:'move',data:[e.x+this.getOffset(-G,G,a),e.y+this.getOffset(-G,G,a)]});var I=[X+this.getOffset(-G,G,a),V+this.getOffset(-G,G,a)];n.push({op:'qcurveTo',data:[q+this.getOffset(-G,G,a),U+this.getOffset(-G,G,a),I[0],I[1]]}),n.push({op:'move',data:[e.x+this.getOffset(-j,j,a),e.y+this.getOffset(-j,j,a)]}),I=[X+this.getOffset(-j,j,a),V+this.getOffset(-j,j,a)],n.push({op:'qcurveTo',data:[q+this.getOffset(-j,j,a),U+this.getOffset(-j,j,a),I[0],I[1]]}),e.setPosition(I[0],I[1]),e.quadReflectionPoint=[X+(X-q),V+(V-U)]}break}case'T':case't':{var Q='t'===t.key;if(2<=t.data.length){var $=+t.data[0],Z=+t.data[1];Q&&($+=e.x,Z+=e.y);var H=$,J=Z,Y=l?l.key:'',K=null;('q'===Y||'Q'===Y||'t'===Y||'T'===Y)&&(K=e.quadReflectionPoint),K&&(H=K[0],J=K[1]);var ee=1*(1+.2*a.roughness),te=1.5*(1+.22*a.roughness);n.push({op:'move',data:[e.x+this.getOffset(-ee,ee,a),e.y+this.getOffset(-ee,ee,a)]});var le=[$+this.getOffset(-ee,ee,a),Z+this.getOffset(-ee,ee,a)];n.push({op:'qcurveTo',data:[H+this.getOffset(-ee,ee,a),J+this.getOffset(-ee,ee,a),le[0],le[1]]}),n.push({op:'move',data:[e.x+this.getOffset(-te,te,a),e.y+this.getOffset(-te,te,a)]}),le=[$+this.getOffset(-te,te,a),Z+this.getOffset(-te,te,a)],n.push({op:'qcurveTo',data:[H+this.getOffset(-te,te,a),J+this.getOffset(-te,te,a),le[0],le[1]]}),e.setPosition(le[0],le[1]),e.quadReflectionPoint=[$+($-H),Z+(Z-J)]}break}case'A':case'a':{var ae='a'===t.key;if(7<=t.data.length){var ne=+t.data[0],ie=+t.data[1],se=+t.data[2],oe=+t.data[3],re=+t.data[4],pe=+t.data[5],de=+t.data[6];if(ae&&(pe+=e.x,de+=e.y),pe===e.x&&de===e.y)break;if(0==ne||0==ie)n=n.concat(this.doubleLine(e.x,e.y,pe,de,a)),e.setPosition(pe,de);else for(var ue=0;1>ue;ue++)for(var fe,he=new T([e.x,e.y],[pe,de],[ne,ie],se,!!oe,!!re),ge=he.getNextSegment();ge;)fe=this._bezierTo(ge.cp1[0],ge.cp1[1],ge.cp2[0],ge.cp2[1],ge.to[0],ge.to[1],e,a),n=n.concat(fe),ge=he.getNextSegment()}break}default:}return n}}]),e}(),F='undefined'!=typeof self,M=F&&self&&self.document&&self.document.currentScript&&self.document.currentScript.src,q='undefined'!=typeof self,U=function(){function e(t,l){b(this,e),this.defaultOptions={maxRandomnessOffset:2,roughness:1,bowing:1,stroke:'#000',strokeWidth:1,curveTightness:0,curveStepCount:9,fillStyle:'hachure',fillWeight:-1,hachureAngle:-41,hachureGap:-1},this.config=t||{},this.surface=l,this.renderer=o(this.config),this.config.options&&(this.defaultOptions=this._options(this.config.options))}return m(e,[{key:'_options',value:function(e){return e?Object.assign({},this.defaultOptions,e):this.defaultOptions}},{key:'_drawable',value:function(e,t,l){return{shape:e,sets:t||[],options:l||this.defaultOptions}}},{key:'getCanvasSize',value:function(){var e=function(e){return e&&'object'===('undefined'==typeof e?'undefined':x(e))&&e.baseVal&&e.baseVal.value?e.baseVal.value:e||100};return this.surface?[e(this.surface.width),e(this.surface.height)]:[100,100]}},{key:'computePolygonSize',value:function(e){if(e.length){for(var t=e[0][0],l=e[0][0],a=e[0][1],n=e[0][1],s=1;sl&&(l=t.strokeWidth/2),{d:this.opsToPath(e),stroke:t.fill||'none',strokeWidth:l,fill:'none'}}},{key:'opsToPath',value:function(e){var t='',l=!0,a=!1,n=void 0;try{for(var i,s=e.ops[Symbol.iterator]();!(l=(i=s.next()).done);l=!0){var o=i.value,r=o.data;switch(o.op){case'move':t+='M'+r[0]+' '+r[1]+' ';break;case'bcurveTo':t+='C'+r[0]+' '+r[1]+', '+r[2]+' '+r[3]+', '+r[4]+' '+r[5]+' ';break;case'qcurveTo':t+='Q'+r[0]+' '+r[1]+', '+r[2]+' '+r[3]+' ';break;case'lineTo':t+='L'+r[0]+' '+r[1]+' ';}}}catch(e){a=!0,n=e}finally{try{!l&&s.return&&s.return()}finally{if(a)throw n}}return t.trim()}},{key:'lib',get:function(){return this.renderer}}]),e}(),X='undefined'!=typeof document,V=function(){function e(t,l){b(this,e),this.canvas=t,this.ctx=this.canvas.getContext('2d'),this.gen=new U(l||null,this.canvas)}return m(e,[{key:'line',value:function(e,t,l,a,n){var i=this.gen.line(e,t,l,a,n);return this.draw(i),i}},{key:'rectangle',value:function(e,t,l,a,n){var i=this.gen.rectangle(e,t,l,a,n);return this.draw(i),i}},{key:'ellipse',value:function(e,t,l,a,n){var i=this.gen.ellipse(e,t,l,a,n);return this.draw(i),i}},{key:'circle',value:function(e,t,l,a){var n=this.gen.circle(e,t,l,a);return this.draw(n),n}},{key:'linearPath',value:function(e,t){var l=this.gen.linearPath(e,t);return this.draw(l),l}},{key:'polygon',value:function(e,t){var l=this.gen.polygon(e,t);return this.draw(l),l}},{key:'arc',value:function(e,t,l,a,n,i){var s=!!(6a&&(a=l.strokeWidth/2),e.save(),e.strokeStyle=l.fill||'',e.lineWidth=a,this._drawToContext(e,t),e.restore()}},{key:'_drawToContext',value:function(e,t){e.beginPath();var l=!0,a=!1,n=void 0;try{for(var i,s=t.ops[Symbol.iterator]();!(l=(i=s.next()).done);l=!0){var o=i.value,r=o.data;switch(o.op){case'move':e.moveTo(r[0],r[1]);break;case'bcurveTo':e.bezierCurveTo(r[0],r[1],r[2],r[3],r[4],r[5]);break;case'qcurveTo':e.quadraticCurveTo(r[0],r[1],r[2],r[3]);break;case'lineTo':e.lineTo(r[0],r[1]);}}}catch(e){a=!0,n=e}finally{try{!l&&s.return&&s.return()}finally{if(a)throw n}}'fillPath'===t.type?e.fill():e.stroke()}},{key:'generator',get:function(){return this.gen}}],[{key:'createRenderer',value:function(){return new B}}]),e}(),G=function(e){function t(){return b(this,t),P(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return w(t,e),m(t,[{key:'line',value:async function(e,t,l,a,n){var i=this._options(n);return this._drawable('line',[await this.lib.line(e,t,l,a,i)],i)}},{key:'rectangle',value:async function(e,t,l,a,n){var i=this._options(n),s=[];if(i.fill){var o=[[e,t],[e+l,t],[e+l,t+a],[e,t+a]];'solid'===i.fillStyle?s.push((await this.lib.solidFillPolygon(o,i))):s.push((await this.lib.patternFillPolygon(o,i)))}return s.push((await this.lib.rectangle(e,t,l,a,i))),this._drawable('rectangle',s,i)}},{key:'ellipse',value:async function(e,t,l,a,n){var i=this._options(n),s=[];if(i.fill)if('solid'===i.fillStyle){var o=await this.lib.ellipse(e,t,l,a,i);o.type='fillPath',s.push(o)}else s.push((await this.lib.patternFillEllipse(e,t,l,a,i)));return s.push((await this.lib.ellipse(e,t,l,a,i))),this._drawable('ellipse',s,i)}},{key:'circle',value:async function(e,t,l,a){var n=await this.ellipse(e,t,l,l,a);return n.shape='circle',n}},{key:'linearPath',value:async function(e,t){var l=this._options(t);return this._drawable('linearPath',[await this.lib.linearPath(e,!1,l)],l)}},{key:'arc',value:async function(e,t,l,a,n,i){var s=!!(6a&&(a=l.strokeWidth/2);var n=e.createElementNS('http://www.w3.org/2000/svg','path');return n.setAttribute('d',this.opsToPath(t)),n.style.stroke=l.fill||null,n.style.strokeWidth=a+'',n.style.fill='none',n}},{key:'generator',get:function(){return this.gen}},{key:'defs',get:function(){var e=this.svg.ownerDocument||I&&document;if(e&&!this._defs){var t=e.createElementNS('http://www.w3.org/2000/svg','defs');this.svg.firstChild?this.svg.insertBefore(t,this.svg.firstChild):this.svg.appendChild(t),this._defs=t}return this._defs||null}}],[{key:'createRenderer',value:function(){return new B}}]),e}(),$=function(e){function t(e,l){b(this,t);var a=P(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,l));return a.genAsync=new G(l||null,a.svg),a}return w(t,e),m(t,[{key:'line',value:async function(e,t,l,a,n){var i=await this.genAsync.line(e,t,l,a,n);return this.draw(i)}},{key:'rectangle',value:async function(e,t,l,a,n){var i=await this.genAsync.rectangle(e,t,l,a,n);return this.draw(i)}},{key:'ellipse',value:async function(e,t,l,a,n){var i=await this.genAsync.ellipse(e,t,l,a,n);return this.draw(i)}},{key:'circle',value:async function(e,t,l,a){var n=await this.genAsync.circle(e,t,l,a);return this.draw(n)}},{key:'linearPath',value:async function(e,t){var l=await this.genAsync.linearPath(e,t);return this.draw(l)}},{key:'polygon',value:async function(e,t){var l=await this.genAsync.polygon(e,t);return this.draw(l)}},{key:'arc',value:async function(e,t,l,a,n,i){var s=!!(6h&&(h=4*t.strokeWidth),h=d(h,.1);const g=r%180*(b/180),c=_(g),u=m(g),y=p(g),x=new S(l-1,o+1,n-1,a+1,h,u,c,y);for(let t;null!=(t=x.nextLine());){const n=i(t,e);for(let e=0;e=h&&(h=4*a.strokeWidth);let g=a.fillWeight;0>g&&(g=a.strokeWidth/2);const c=p(f%180*(b/180)),u=d/r,_=y(u*c*u*c+1),x=u*c/_,m=1/_,O=h/(r*d/y(d*m*(d*m)+r*x*(r*x))/r);let P=y(r*r-(e-r+O)*(e-r+O));for(let p=e-r+O;pd){const e=y(1-d/(this._rx*this._rx*this._ry*this._ry));this._rx*=e,this._ry*=e,p=0}else p=(n===a?-1:1)*y(d/(this._rx*this._rx*r*r+this._ry*this._ry*o*o));const f=p*this._rx*r/this._ry,h=-p*this._ry*o/this._rx;this._C=[0,0],this._C[0]=this._cosPhi*f-this._sinPhi*h+(e[0]+t[0])/2,this._C[1]=this._sinPhi*f+this._cosPhi*h+(e[1]+t[1])/2,this._theta=this.calculateVectorAngle(1,0,(o-f)/this._rx,(r-h)/this._ry);let g=this.calculateVectorAngle((o-f)/this._rx,(r-h)/this._ry,(-o-f)/this._rx,(-r-h)/this._ry);!a&&0g&&(g+=2*b),this._numSegs=u(w(g/(b/2))),this._delta=g/this._numSegs,this._T=8/3*m(this._delta/4)*m(this._delta/4)/m(this._delta/2)}getNextSegment(){if(this._segIndex===this._numSegs)return null;const e=_(this._theta),t=m(this._theta),i=this._theta+this._delta,s=_(i),n=m(i),a=[this._cosPhi*this._rx*s-this._sinPhi*this._ry*n+this._C[0],this._sinPhi*this._rx*s+this._cosPhi*this._ry*n+this._C[1]],l=[this._from[0]+this._T*(-this._cosPhi*this._rx*t-this._sinPhi*this._ry*e),this._from[1]+this._T*(-this._sinPhi*this._rx*t+this._cosPhi*this._ry*e)],o=[a[0]+this._T*(this._cosPhi*this._rx*n+this._sinPhi*this._ry*s),a[1]+this._T*(this._sinPhi*this._rx*n-this._cosPhi*this._ry*s)];return this._theta=i,this._from=[a[0],a[1]],this._segIndex++,{cp1:l,cp2:o,to:a}}calculateVectorAngle(e,t,i,s){var n=Math.atan2;const a=n(t,e),l=n(s,i);return l>=a?l-a:2*b-(a-l)}}class k{constructor(e,t){this.sets=e,this.closed=t}fit(e){const t=[];for(const i of this.sets){const s=i.length;let n=c(e*s);if(5>n){if(5>=s)continue;n=5}t.push(this.reduce(i,n))}let s='';for(const n of t){for(let e=0;et;){let e=-1,t=-1;for(let l=1;le||s=f(e.py1,e.py2)&&this.py1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.py2>=f(e.py1,e.py2)&&this.py2<=d(e.py1,e.py2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=this.px1,this.yi=i*this.xi+n,!(-1e-5>(this.py1-this.yi)*(this.yi-this.py2)||-1e-5>(e.py1-this.yi)*(this.yi-e.py2))&&(!(1e-5>w(e.a))||!(-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))):i===h?(this.xi=e.px1,this.yi=t*this.xi+s,!(-1e-5>(e.py1-this.yi)*(this.yi-e.py2)||-1e-5>(this.py1-this.yi)*(this.yi-this.py2))&&(!(1e-5>w(l))||!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)))):t===i?s==n&&(this.px1>=f(e.px1,e.px2)&&this.px1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.px2>=f(e.px1,e.px2)&&this.px2<=d(e.px1,e.px2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=(n-s)/(t-i),this.yi=t*this.xi+s,!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)||-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))}}class S{constructor(e,t,i,s,n,a,l,o){this.deltaX=0,this.hGap=0,this.top=e,this.bottom=t,this.left=i,this.right=s,this.gap=n,this.sinAngle=a,this.tanAngle=o,1e-4>w(a)?this.pos=i+n:.9999w(this.sinAngle)){if(this.posthis.right&&t>this.right;)if(this.pos+=this.hGap,e=this.pos-this.deltaX/2,t=this.pos+this.deltaX/2,this.pos>this.right+this.deltaX)return null;const a=new A([e,i],[t,n]);this.sLeft&&a.intersects(this.sLeft)&&(e=a.xi,i=a.yi),this.sRight&&a.intersects(this.sRight)&&(t=a.xi,n=a.yi),0a&&(a=4*s.strokeWidth),a=d(a,.1);let o=s.fillWeight;0>o&&(o=s.strokeWidth/2);for(const r of e){const e=t(r),i=e/a,l=u(i)-1,p=Math.atan((r[1][1]-r[0][1])/(r[1][0]-r[0][0]));for(let e=0;ec;)c+=2*b,u+=2*b;u-c>2*b&&(c=0,u=2*b);const y=2*b/p.curveStepCount,x=f(y/2,(u-c)/2),O=this._arc(x,o,d,h,g,c,u,1,p),P=this._arc(x,o,d,h,g,c,u,1.5,p);let v=O.concat(P);return l&&(r?(v=v.concat(this.doubleLine(o,d,o+h*_(c),d+g*m(c),p)),v=v.concat(this.doubleLine(o,d,o+h*_(u),d+g*m(u),p))):(v.push({op:'lineTo',data:[o,d]}),v.push({op:'lineTo',data:[o+h*_(c),d+g*m(c)]}))),{type:'path',ops:v}}svgPath(e,t){e=(e||'').replace(/\n/g,' ').replace(/(-\s)/g,'-').replace('/(ss)/g',' ');let n=new P(e);if(t.simplification){const e=new k(n.linearPoints,n.closed),i=e.fit(t.simplification);n=new P(i)}let a=[];const l=n.segments||[];for(let o=0;of;)f+=2*b,h+=2*b;h-f>2*b&&(f=0,h=2*b);const g=(h-f)/l.curveStepCount,c=[];for(let u=f;u<=h;u+=g)c.push([o+p*_(u),r+d*m(u)]);return c.push([o+p*_(h),r+d*m(h)]),c.push([o,r]),this.patternFillPolygon(c,l)}getOffset(e,t,i){return i.roughness*(Math.random()*(t-e)+e)}doubleLine(e,t,i,s,n){const a=this._line(e,t,i,s,n,!0,!1),l=this._line(e,t,i,s,n,!0,!0);return a.concat(l)}_line(e,t,i,s,n,a,l){const o=g(e-i,2)+g(t-s,2);let r=n.maxRandomnessOffset||0;100*(r*r)>o&&(r=y(o)/10);const p=r/2,d=.2+.2*Math.random();let f=n.bowing*n.maxRandomnessOffset*(s-t)/200,h=n.bowing*n.maxRandomnessOffset*(e-i)/200;f=this.getOffset(-f,f,n),h=this.getOffset(-h,h,n);const c=[];return a&&(l?c.push({op:'move',data:[e+this.getOffset(-p,p,n),t+this.getOffset(-p,p,n)]}):c.push({op:'move',data:[e+this.getOffset(-r,r,n),t+this.getOffset(-r,r,n)]})),l?c.push({op:'bcurveTo',data:[f+e+(i-e)*d+this.getOffset(-p,p,n),h+t+(s-t)*d+this.getOffset(-p,p,n),f+e+2*(i-e)*d+this.getOffset(-p,p,n),h+t+2*(s-t)*d+this.getOffset(-p,p,n),i+this.getOffset(-p,p,n),s+this.getOffset(-p,p,n)]}):c.push({op:'bcurveTo',data:[f+e+(i-e)*d+this.getOffset(-r,r,n),h+t+(s-t)*d+this.getOffset(-r,r,n),f+e+2*(i-e)*d+this.getOffset(-r,r,n),h+t+2*(s-t)*d+this.getOffset(-r,r,n),i+this.getOffset(-r,r,n),s+this.getOffset(-r,r,n)]}),c}_curve(e,t,i){const n=e.length;let a=[];if(3f;f++)0===f?o.push({op:'move',data:[r.x,r.y]}):o.push({op:'move',data:[r.x+this.getOffset(-d[0],d[0],p),r.y+this.getOffset(-d[0],d[0],p)]}),h=[a+this.getOffset(-d[f],d[f],p),l+this.getOffset(-d[f],d[f],p)],o.push({op:'bcurveTo',data:[e+this.getOffset(-d[f],d[f],p),t+this.getOffset(-d[f],d[f],p),s+this.getOffset(-d[f],d[f],p),n+this.getOffset(-d[f],d[f],p),h[0],h[1]]});return r.setPosition(h[0],h[1]),o}_processSegment(e,t,i,s){let n=[];switch(t.key){case'M':case'm':{const i='m'===t.key;if(2<=t.data.length){let a=+t.data[0],l=+t.data[1];i&&(a+=e.x,l+=e.y);const o=1*(s.maxRandomnessOffset||0);a+=this.getOffset(-o,o,s),l+=this.getOffset(-o,o,s),e.setPosition(a,l),n.push({op:'move',data:[a,l]})}break}case'L':case'l':{const i='l'===t.key;if(2<=t.data.length){let a=+t.data[0],l=+t.data[1];i&&(a+=e.x,l+=e.y),n=n.concat(this.doubleLine(e.x,e.y,a,l,s)),e.setPosition(a,l)}break}case'H':case'h':{const i='h'===t.key;if(t.data.length){let a=+t.data[0];i&&(a+=e.x),n=n.concat(this.doubleLine(e.x,e.y,a,e.y,s)),e.setPosition(a,e.y)}break}case'V':case'v':{const i='v'===t.key;if(t.data.length){let a=+t.data[0];i&&(a+=e.y),n=n.concat(this.doubleLine(e.x,e.y,e.x,a,s)),e.setPosition(e.x,a)}break}case'Z':case'z':{e.first&&(n=n.concat(this.doubleLine(e.x,e.y,e.first[0],e.first[1],s)),e.setPosition(e.first[0],e.first[1]),e.first=null);break}case'C':case'c':{const i='c'===t.key;if(6<=t.data.length){let a=+t.data[0],l=+t.data[1],o=+t.data[2],r=+t.data[3],p=+t.data[4],d=+t.data[5];i&&(a+=e.x,o+=e.x,p+=e.x,l+=e.y,r+=e.y,d+=e.y);const f=this._bezierTo(a,l,o,r,p,d,e,s);n=n.concat(f),e.bezierReflectionPoint=[p+(p-o),d+(d-r)]}break}case'S':case's':{const a='s'===t.key;if(4<=t.data.length){let l=+t.data[0],o=+t.data[1],r=+t.data[2],p=+t.data[3];a&&(l+=e.x,r+=e.x,o+=e.y,p+=e.y);let d=l,f=o;const h=i?i.key:'';let g=null;('c'===h||'C'===h||'s'===h||'S'===h)&&(g=e.bezierReflectionPoint),g&&(d=g[0],f=g[1]);const c=this._bezierTo(d,f,l,o,r,p,e,s);n=n.concat(c),e.bezierReflectionPoint=[r+(r-l),p+(p-o)]}break}case'Q':case'q':{const i='q'===t.key;if(4<=t.data.length){let a=+t.data[0],l=+t.data[1],o=+t.data[2],r=+t.data[3];i&&(a+=e.x,o+=e.x,l+=e.y,r+=e.y);const p=1*(1+.2*s.roughness),d=1.5*(1+.22*s.roughness);n.push({op:'move',data:[e.x+this.getOffset(-p,p,s),e.y+this.getOffset(-p,p,s)]});let h=[o+this.getOffset(-p,p,s),r+this.getOffset(-p,p,s)];n.push({op:'qcurveTo',data:[a+this.getOffset(-p,p,s),l+this.getOffset(-p,p,s),h[0],h[1]]}),n.push({op:'move',data:[e.x+this.getOffset(-d,d,s),e.y+this.getOffset(-d,d,s)]}),h=[o+this.getOffset(-d,d,s),r+this.getOffset(-d,d,s)],n.push({op:'qcurveTo',data:[a+this.getOffset(-d,d,s),l+this.getOffset(-d,d,s),h[0],h[1]]}),e.setPosition(h[0],h[1]),e.quadReflectionPoint=[o+(o-a),r+(r-l)]}break}case'T':case't':{const a='t'===t.key;if(2<=t.data.length){let l=+t.data[0],o=+t.data[1];a&&(l+=e.x,o+=e.y);let r=l,p=o;const d=i?i.key:'';let h=null;('q'===d||'Q'===d||'t'===d||'T'===d)&&(h=e.quadReflectionPoint),h&&(r=h[0],p=h[1]);const g=1*(1+.2*s.roughness),c=1.5*(1+.22*s.roughness);n.push({op:'move',data:[e.x+this.getOffset(-g,g,s),e.y+this.getOffset(-g,g,s)]});let u=[l+this.getOffset(-g,g,s),o+this.getOffset(-g,g,s)];n.push({op:'qcurveTo',data:[r+this.getOffset(-g,g,s),p+this.getOffset(-g,g,s),u[0],u[1]]}),n.push({op:'move',data:[e.x+this.getOffset(-c,c,s),e.y+this.getOffset(-c,c,s)]}),u=[l+this.getOffset(-c,c,s),o+this.getOffset(-c,c,s)],n.push({op:'qcurveTo',data:[r+this.getOffset(-c,c,s),p+this.getOffset(-c,c,s),u[0],u[1]]}),e.setPosition(u[0],u[1]),e.quadReflectionPoint=[l+(l-r),o+(o-p)]}break}case'A':case'a':{const i='a'===t.key;if(7<=t.data.length){const a=+t.data[0],l=+t.data[1],o=+t.data[2],r=+t.data[3],p=+t.data[4];let d=+t.data[5],f=+t.data[6];if(i&&(d+=e.x,f+=e.y),d===e.x&&f===e.y)break;if(0==a||0==l)n=n.concat(this.doubleLine(e.x,e.y,d,f,s)),e.setPosition(d,f);else for(let t=0;1>t;t++){const t=new v([e.x,e.y],[d,f],[a,l],o,!!r,!!p);for(let i=t.getNextSegment();i;){const a=this._bezierTo(i.cp1[0],i.cp1[1],i.cp2[0],i.cp2[1],i.to[0],i.to[1],e,s);n=n.concat(a),i=t.getNextSegment()}}}break}default:}return n}}const L='undefined'!=typeof self,R=L&&self&&self.document&&self.document.currentScript&&self.document.currentScript.src,D='undefined'!=typeof self;class B{constructor(e,t){this.defaultOptions={maxRandomnessOffset:2,roughness:1,bowing:1,stroke:'#000',strokeWidth:1,curveTightness:0,curveStepCount:9,fill:null,fillStyle:'hachure',fillWeight:-1,hachureAngle:-41,hachureGap:-1},this.config=e||{},this.surface=t,this.renderer=o(this.config),this.config.options&&(this.defaultOptions=this._options(this.config.options))}_options(e){return e?Object.assign({},this.defaultOptions,e):this.defaultOptions}_drawable(e,t,i){return{shape:e,sets:t||[],options:i||this.defaultOptions}}get lib(){return this.renderer}getCanvasSize(){const e=e=>e&&'object'==typeof e&&e.baseVal&&e.baseVal.value?e.baseVal.value:e||100;return this.surface?[e(this.surface.width),e(this.surface.height)]:[100,100]}computePolygonSize(e){if(e.length){let t=e[0][0],s=e[0][0],n=e[0][1],a=e[0][1];for(let l=1;li&&(i=t.strokeWidth/2),{d:this.opsToPath(e),stroke:t.fill||'none',strokeWidth:i,fill:'none'}}opsToPath(e){let t='';for(const i of e.ops){const e=i.data;switch(i.op){case'move':t+=`M${e[0]} ${e[1]} `;break;case'bcurveTo':t+=`C${e[0]} ${e[1]}, ${e[2]} ${e[3]}, ${e[4]} ${e[5]} `;break;case'qcurveTo':t+=`Q${e[0]} ${e[1]}, ${e[2]} ${e[3]} `;break;case'lineTo':t+=`L${e[0]} ${e[1]} `;}}return t.trim()}}const M='undefined'!=typeof document;class q{constructor(e,t){this.canvas=e,this.ctx=this.canvas.getContext('2d'),this.gen=new B(t||null,this.canvas)}get generator(){return this.gen}static createRenderer(){return new E}line(e,t,i,s,n){const a=this.gen.line(e,t,i,s,n);return this.draw(a),a}rectangle(e,t,i,s,n){const a=this.gen.rectangle(e,t,i,s,n);return this.draw(a),a}ellipse(e,t,i,s,n){const a=this.gen.ellipse(e,t,i,s,n);return this.draw(a),a}circle(e,t,i,s){const n=this.gen.circle(e,t,i,s);return this.draw(n),n}linearPath(e,t){const i=this.gen.linearPath(e,t);return this.draw(i),i}polygon(e,t){const i=this.gen.polygon(e,t);return this.draw(i),i}arc(e,t,i,s,n,a,l=!1,o){const r=this.gen.arc(e,t,i,s,n,a,l,o);return this.draw(r),r}curve(e,t){const i=this.gen.curve(e,t);return this.draw(i),i}path(e,t){const i=this.gen.path(e,t);return this.draw(i),i}draw(e){const t=e.sets||[],i=e.options||this.gen.defaultOptions,s=this.ctx;for(const n of t)switch(n.type){case'path':s.save(),s.strokeStyle=i.stroke,s.lineWidth=i.strokeWidth,this._drawToContext(s,n),s.restore();break;case'fillPath':s.save(),s.fillStyle=i.fill||'',this._drawToContext(s,n),s.restore();break;case'fillSketch':this.fillSketch(s,n,i);break;case'path2Dfill':{this.ctx.save(),this.ctx.fillStyle=i.fill||'';const e=new Path2D(n.path);this.ctx.fill(e),this.ctx.restore();break}case'path2Dpattern':{const e=this.canvas.ownerDocument||M&&document;if(e){const t=n.size,s=e.createElement('canvas'),a=s.getContext('2d'),l=this.computeBBox(n.path);l&&(l.width||l.height)?(s.width=this.canvas.width,s.height=this.canvas.height,a.translate(l.x||0,l.y||0)):(s.width=t[0],s.height=t[1]),this.fillSketch(a,n,i),this.ctx.save(),this.ctx.fillStyle=this.ctx.createPattern(s,'repeat');const o=new Path2D(n.path);this.ctx.fill(o),this.ctx.restore()}else console.error('Cannot render path2Dpattern. No defs/document defined.');break}}}computeBBox(e){if(M)try{const t=document.createElementNS('http://www.w3.org/2000/svg','svg');t.setAttribute('width','0'),t.setAttribute('height','0');const i=self.document.createElementNS('http://www.w3.org/2000/svg','path');i.setAttribute('d',e),t.appendChild(i),document.body.appendChild(t);const s=i.getBBox();return document.body.removeChild(t),s}catch(e){}return null}fillSketch(e,t,i){let s=i.fillWeight;0>s&&(s=i.strokeWidth/2),e.save(),e.strokeStyle=i.fill||'',e.lineWidth=s,this._drawToContext(e,t),e.restore()}_drawToContext(e,t){e.beginPath();for(const i of t.ops){const t=i.data;switch(i.op){case'move':e.moveTo(t[0],t[1]);break;case'bcurveTo':e.bezierCurveTo(t[0],t[1],t[2],t[3],t[4],t[5]);break;case'qcurveTo':e.quadraticCurveTo(t[0],t[1],t[2],t[3]);break;case'lineTo':e.lineTo(t[0],t[1]);}}'fillPath'===t.type?e.fill():e.stroke()}}class F extends B{async line(e,t,i,s,n){const a=this._options(n);return this._drawable('line',[await this.lib.line(e,t,i,s,a)],a)}async rectangle(e,t,i,s,n){const a=this._options(n),l=[];if(a.fill){const n=[[e,t],[e+i,t],[e+i,t+s],[e,t+s]];'solid'===a.fillStyle?l.push((await this.lib.solidFillPolygon(n,a))):l.push((await this.lib.patternFillPolygon(n,a)))}return l.push((await this.lib.rectangle(e,t,i,s,a))),this._drawable('rectangle',l,a)}async ellipse(e,t,i,s,n){const a=this._options(n),l=[];if(a.fill)if('solid'===a.fillStyle){const n=await this.lib.ellipse(e,t,i,s,a);n.type='fillPath',l.push(n)}else l.push((await this.lib.patternFillEllipse(e,t,i,s,a)));return l.push((await this.lib.ellipse(e,t,i,s,a))),this._drawable('ellipse',l,a)}async circle(e,t,i,s){const n=await this.ellipse(e,t,i,i,s);return n.shape='circle',n}async linearPath(e,t){const i=this._options(t);return this._drawable('linearPath',[await this.lib.linearPath(e,!1,i)],i)}async arc(e,t,i,s,n,a,l=!1,r){const p=this._options(r),o=[];if(l&&p.fill)if('solid'===p.fillStyle){const l=await this.lib.arc(e,t,i,s,n,a,!0,!1,p);l.type='fillPath',o.push(l)}else o.push((await this.lib.patternFillArc(e,t,i,s,n,a,p)));return o.push((await this.lib.arc(e,t,i,s,n,a,l,!0,p))),this._drawable('arc',o,p)}async curve(e,t){const i=this._options(t);return this._drawable('curve',[await this.lib.curve(e,i)],i)}async polygon(e,t){const i=this._options(t),s=[];if(i.fill)if('solid'===i.fillStyle)s.push((await this.lib.solidFillPolygon(e,i)));else{const t=this.computePolygonSize(e),n=[[0,0],[t[0],0],[t[0],t[1]],[0,t[1]]],a=await this.lib.patternFillPolygon(n,i);a.type='path2Dpattern',a.size=t,a.path=this.polygonPath(e),s.push(a)}return s.push((await this.lib.linearPath(e,!0,i))),this._drawable('polygon',s,i)}async path(e,t){const i=this._options(t),s=[];if(!e)return this._drawable('path',s,i);if(i.fill)if('solid'===i.fillStyle){s.push({type:'path2Dfill',path:e,ops:[]})}else{const t=this.computePathSize(e),n=[[0,0],[t[0],0],[t[0],t[1]],[0,t[1]]],a=await this.lib.patternFillPolygon(n,i);a.type='path2Dpattern',a.size=t,a.path=e,s.push(a)}return s.push((await this.lib.svgPath(e,i))),this._drawable('path',s,i)}}class U extends q{constructor(e,t){super(e,t),this.genAsync=new F(t||null,this.canvas)}get generator(){return this.genAsync}async line(e,t,i,s,n){const a=await this.genAsync.line(e,t,i,s,n);return this.draw(a),a}async rectangle(e,t,i,s,n){const a=await this.genAsync.rectangle(e,t,i,s,n);return this.draw(a),a}async ellipse(e,t,i,s,n){const a=await this.genAsync.ellipse(e,t,i,s,n);return this.draw(a),a}async circle(e,t,i,s){const n=await this.genAsync.circle(e,t,i,s);return this.draw(n),n}async linearPath(e,t){const i=await this.genAsync.linearPath(e,t);return this.draw(i),i}async polygon(e,t){const i=await this.genAsync.polygon(e,t);return this.draw(i),i}async arc(e,t,i,s,n,a,l=!1,o){const r=await this.genAsync.arc(e,t,i,s,n,a,l,o);return this.draw(r),r}async curve(e,t){const i=await this.genAsync.curve(e,t);return this.draw(i),i}async path(e,t){const i=await this.genAsync.path(e,t);return this.draw(i),i}}const X='undefined'!=typeof document;class G{constructor(e,t){this.svg=e,this.gen=new B(t||null,this.svg)}get generator(){return this.gen}static createRenderer(){return new E}get defs(){const e=this.svg.ownerDocument||X&&document;if(e&&!this._defs){const t=e.createElementNS('http://www.w3.org/2000/svg','defs');this.svg.firstChild?this.svg.insertBefore(t,this.svg.firstChild):this.svg.appendChild(t),this._defs=t}return this._defs||null}line(e,t,i,s,n){const a=this.gen.line(e,t,i,s,n);return this.draw(a)}rectangle(e,t,i,s,n){const a=this.gen.rectangle(e,t,i,s,n);return this.draw(a)}ellipse(e,t,i,s,n){const a=this.gen.ellipse(e,t,i,s,n);return this.draw(a)}circle(e,t,i,s){const n=this.gen.circle(e,t,i,s);return this.draw(n)}linearPath(e,t){const i=this.gen.linearPath(e,t);return this.draw(i)}polygon(e,t){const i=this.gen.polygon(e,t);return this.draw(i)}arc(e,t,i,s,n,a,l=!1,o){const r=this.gen.arc(e,t,i,s,n,a,l,o);return this.draw(r)}curve(e,t){const i=this.gen.curve(e,t);return this.draw(i)}path(e,t){const i=this.gen.path(e,t);return this.draw(i)}draw(e){const t=e.sets||[],i=e.options||this.gen.defaultOptions,s=this.svg.ownerDocument||X&&document,n=s.createElementNS('http://www.w3.org/2000/svg','g');for(const a of t){let e=null;switch(a.type){case'path':{e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',this.opsToPath(a)),e.style.stroke=i.stroke,e.style.strokeWidth=i.strokeWidth+'',e.style.fill='none';break}case'fillPath':{e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',this.opsToPath(a)),e.style.stroke='none',e.style.strokeWidth='0',e.style.fill=i.fill;break}case'fillSketch':{e=this.fillSketch(s,a,i);break}case'path2Dfill':{e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',a.path||''),e.style.stroke='none',e.style.strokeWidth='0',e.style.fill=i.fill;break}case'path2Dpattern':{if(!this.defs)console.error('Cannot render path2Dpattern. No defs/document defined.');else{const t=a.size,n=s.createElementNS('http://www.w3.org/2000/svg','pattern'),l=`rough-${c(Math.random()*(Number.MAX_SAFE_INTEGER||999999))}`;n.setAttribute('id',l),n.setAttribute('x','0'),n.setAttribute('y','0'),n.setAttribute('width','1'),n.setAttribute('height','1'),n.setAttribute('height','1'),n.setAttribute('viewBox',`0 0 ${r(t[0])} ${r(t[1])}`),n.setAttribute('patternUnits','objectBoundingBox');const o=this.fillSketch(s,a,i);n.appendChild(o),this.defs.appendChild(n),e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',a.path||''),e.style.stroke='none',e.style.strokeWidth='0',e.style.fill=`url(#${l})`}break}}e&&n.appendChild(e)}return n}opsToPath(e){return this.gen.opsToPath(e)}fillSketch(e,t,i){let s=i.fillWeight;0>s&&(s=i.strokeWidth/2);const n=e.createElementNS('http://www.w3.org/2000/svg','path');return n.setAttribute('d',this.opsToPath(t)),n.style.stroke=i.fill,n.style.strokeWidth=s+'',n.style.fill='none',n}}class V extends G{constructor(e,t){super(e,t),this.genAsync=new F(t||null,this.svg)}get generator(){return this.genAsync}async line(e,t,i,s,n){const a=await this.genAsync.line(e,t,i,s,n);return this.draw(a)}async rectangle(e,t,i,s,n){const a=await this.genAsync.rectangle(e,t,i,s,n);return this.draw(a)}async ellipse(e,t,i,s,n){const a=await this.genAsync.ellipse(e,t,i,s,n);return this.draw(a)}async circle(e,t,i,s){const n=await this.genAsync.circle(e,t,i,s);return this.draw(n)}async linearPath(e,t){const i=await this.genAsync.linearPath(e,t);return this.draw(i)}async polygon(e,t){const i=await this.genAsync.polygon(e,t);return this.draw(i)}async arc(e,t,i,s,n,a,l=!1,o){const r=await this.genAsync.arc(e,t,i,s,n,a,l,o);return this.draw(r)}async curve(e,t){const i=await this.genAsync.curve(e,t);return this.draw(i)}async path(e,t){const i=await this.genAsync.path(e,t);return this.draw(i)}}var j={canvas(e,t){return t&&t.async?new U(e,t):new q(e,t)},svg(e,t){return t&&t.async?new V(e,t):new G(e,t)},createRenderer(){return q.createRenderer()},generator(e,t){return e&&e.async?new F(e,t):new B(e,t)}};return j}); +(function(e,t){'object'==typeof exports&&'undefined'!=typeof module?module.exports=t():'function'==typeof define&&define.amd?define(t):e.rough=t()})(this,function(){'use strict';function e(e,t){return e.type===t}function t(e){const t=e[0],i=e[1];return y(g(t[0]-i[0],2)+g(t[1]-i[1],2))}function i(e,t){const s=[],n=new A([e[0],e[1]],[e[2],e[3]]);for(let a=0;ah&&(h=4*t.strokeWidth),h=d(h,.1);const g=r%180*(b/180),c=_(g),u=m(g),y=p(g),x=new S(l-1,o+1,n-1,a+1,h,u,c,y);for(let t;null!=(t=x.nextLine());){const n=i(t,e);for(let e=0;e=h&&(h=4*a.strokeWidth);let g=a.fillWeight;0>g&&(g=a.strokeWidth/2);const c=p(f%180*(b/180)),u=d/r,_=y(u*c*u*c+1),x=u*c/_,m=1/_,O=h/(r*d/y(d*m*(d*m)+r*x*(r*x))/r);let P=y(r*r-(e-r+O)*(e-r+O));for(let p=e-r+O;pd){const e=y(1-d/(this._rx*this._rx*this._ry*this._ry));this._rx*=e,this._ry*=e,p=0}else p=(n===a?-1:1)*y(d/(this._rx*this._rx*r*r+this._ry*this._ry*o*o));const f=p*this._rx*r/this._ry,h=-p*this._ry*o/this._rx;this._C=[0,0],this._C[0]=this._cosPhi*f-this._sinPhi*h+(e[0]+t[0])/2,this._C[1]=this._sinPhi*f+this._cosPhi*h+(e[1]+t[1])/2,this._theta=this.calculateVectorAngle(1,0,(o-f)/this._rx,(r-h)/this._ry);let g=this.calculateVectorAngle((o-f)/this._rx,(r-h)/this._ry,(-o-f)/this._rx,(-r-h)/this._ry);!a&&0g&&(g+=2*b),this._numSegs=u(w(g/(b/2))),this._delta=g/this._numSegs,this._T=8/3*m(this._delta/4)*m(this._delta/4)/m(this._delta/2)}getNextSegment(){if(this._segIndex===this._numSegs)return null;const e=_(this._theta),t=m(this._theta),i=this._theta+this._delta,s=_(i),n=m(i),a=[this._cosPhi*this._rx*s-this._sinPhi*this._ry*n+this._C[0],this._sinPhi*this._rx*s+this._cosPhi*this._ry*n+this._C[1]],l=[this._from[0]+this._T*(-this._cosPhi*this._rx*t-this._sinPhi*this._ry*e),this._from[1]+this._T*(-this._sinPhi*this._rx*t+this._cosPhi*this._ry*e)],o=[a[0]+this._T*(this._cosPhi*this._rx*n+this._sinPhi*this._ry*s),a[1]+this._T*(this._sinPhi*this._rx*n-this._cosPhi*this._ry*s)];return this._theta=i,this._from=[a[0],a[1]],this._segIndex++,{cp1:l,cp2:o,to:a}}calculateVectorAngle(e,t,i,s){var n=Math.atan2;const a=n(t,e),l=n(s,i);return l>=a?l-a:2*b-(a-l)}}class k{constructor(e,t){this.sets=e,this.closed=t}fit(e){const t=[];for(const i of this.sets){const s=i.length;let n=c(e*s);if(5>n){if(5>=s)continue;n=5}t.push(this.reduce(i,n))}let s='';for(const n of t){for(let e=0;et;){let e=-1,t=-1;for(let l=1;le||s=f(e.py1,e.py2)&&this.py1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.py2>=f(e.py1,e.py2)&&this.py2<=d(e.py1,e.py2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=this.px1,this.yi=i*this.xi+n,!(-1e-5>(this.py1-this.yi)*(this.yi-this.py2)||-1e-5>(e.py1-this.yi)*(this.yi-e.py2))&&(!(1e-5>w(e.a))||!(-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))):i===h?(this.xi=e.px1,this.yi=t*this.xi+s,!(-1e-5>(e.py1-this.yi)*(this.yi-e.py2)||-1e-5>(this.py1-this.yi)*(this.yi-this.py2))&&(!(1e-5>w(l))||!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)))):t===i?s==n&&(this.px1>=f(e.px1,e.px2)&&this.px1<=d(e.py1,e.py2)?(this.xi=this.px1,this.yi=this.py1,!0):!!(this.px2>=f(e.px1,e.px2)&&this.px2<=d(e.px1,e.px2))&&(this.xi=this.px2,this.yi=this.py2,!0)):(this.xi=(n-s)/(t-i),this.yi=t*this.xi+s,!(-1e-5>(this.px1-this.xi)*(this.xi-this.px2)||-1e-5>(e.px1-this.xi)*(this.xi-e.px2)))}}class S{constructor(e,t,i,s,n,a,l,o){this.deltaX=0,this.hGap=0,this.top=e,this.bottom=t,this.left=i,this.right=s,this.gap=n,this.sinAngle=a,this.tanAngle=o,1e-4>w(a)?this.pos=i+n:.9999w(this.sinAngle)){if(this.posthis.right&&t>this.right;)if(this.pos+=this.hGap,e=this.pos-this.deltaX/2,t=this.pos+this.deltaX/2,this.pos>this.right+this.deltaX)return null;const a=new A([e,i],[t,n]);this.sLeft&&a.intersects(this.sLeft)&&(e=a.xi,i=a.yi),this.sRight&&a.intersects(this.sRight)&&(t=a.xi,n=a.yi),0a&&(a=4*s.strokeWidth),a=d(a,.1);let o=s.fillWeight;0>o&&(o=s.strokeWidth/2);for(const r of e){const e=t(r),i=e/a,l=u(i)-1,p=Math.atan((r[1][1]-r[0][1])/(r[1][0]-r[0][0]));for(let e=0;ec;)c+=2*b,u+=2*b;u-c>2*b&&(c=0,u=2*b);const y=2*b/p.curveStepCount,x=f(y/2,(u-c)/2),O=this._arc(x,o,d,h,g,c,u,1,p),P=this._arc(x,o,d,h,g,c,u,1.5,p);let v=O.concat(P);return l&&(r?(v=v.concat(this.doubleLine(o,d,o+h*_(c),d+g*m(c),p)),v=v.concat(this.doubleLine(o,d,o+h*_(u),d+g*m(u),p))):(v.push({op:'lineTo',data:[o,d]}),v.push({op:'lineTo',data:[o+h*_(c),d+g*m(c)]}))),{type:'path',ops:v}}svgPath(e,t){e=(e||'').replace(/\n/g,' ').replace(/(-\s)/g,'-').replace('/(ss)/g',' ');let n=new P(e);if(t.simplification){const e=new k(n.linearPoints,n.closed),i=e.fit(t.simplification);n=new P(i)}let a=[];const l=n.segments||[];for(let o=0;of;)f+=2*b,h+=2*b;h-f>2*b&&(f=0,h=2*b);const g=(h-f)/l.curveStepCount,c=[];for(let u=f;u<=h;u+=g)c.push([o+p*_(u),r+d*m(u)]);return c.push([o+p*_(h),r+d*m(h)]),c.push([o,r]),this.patternFillPolygon(c,l)}getOffset(e,t,i){return i.roughness*(Math.random()*(t-e)+e)}doubleLine(e,t,i,s,n){const a=this._line(e,t,i,s,n,!0,!1),l=this._line(e,t,i,s,n,!0,!0);return a.concat(l)}_line(e,t,i,s,n,a,l){const o=g(e-i,2)+g(t-s,2);let r=n.maxRandomnessOffset||0;100*(r*r)>o&&(r=y(o)/10);const p=r/2,d=.2+.2*Math.random();let f=n.bowing*n.maxRandomnessOffset*(s-t)/200,h=n.bowing*n.maxRandomnessOffset*(e-i)/200;f=this.getOffset(-f,f,n),h=this.getOffset(-h,h,n);const c=[];return a&&(l?c.push({op:'move',data:[e+this.getOffset(-p,p,n),t+this.getOffset(-p,p,n)]}):c.push({op:'move',data:[e+this.getOffset(-r,r,n),t+this.getOffset(-r,r,n)]})),l?c.push({op:'bcurveTo',data:[f+e+(i-e)*d+this.getOffset(-p,p,n),h+t+(s-t)*d+this.getOffset(-p,p,n),f+e+2*(i-e)*d+this.getOffset(-p,p,n),h+t+2*(s-t)*d+this.getOffset(-p,p,n),i+this.getOffset(-p,p,n),s+this.getOffset(-p,p,n)]}):c.push({op:'bcurveTo',data:[f+e+(i-e)*d+this.getOffset(-r,r,n),h+t+(s-t)*d+this.getOffset(-r,r,n),f+e+2*(i-e)*d+this.getOffset(-r,r,n),h+t+2*(s-t)*d+this.getOffset(-r,r,n),i+this.getOffset(-r,r,n),s+this.getOffset(-r,r,n)]}),c}_curve(e,t,i){const n=e.length;let a=[];if(3f;f++)0===f?o.push({op:'move',data:[r.x,r.y]}):o.push({op:'move',data:[r.x+this.getOffset(-d[0],d[0],p),r.y+this.getOffset(-d[0],d[0],p)]}),h=[a+this.getOffset(-d[f],d[f],p),l+this.getOffset(-d[f],d[f],p)],o.push({op:'bcurveTo',data:[e+this.getOffset(-d[f],d[f],p),t+this.getOffset(-d[f],d[f],p),s+this.getOffset(-d[f],d[f],p),n+this.getOffset(-d[f],d[f],p),h[0],h[1]]});return r.setPosition(h[0],h[1]),o}_processSegment(e,t,i,s){let n=[];switch(t.key){case'M':case'm':{const i='m'===t.key;if(2<=t.data.length){let a=+t.data[0],l=+t.data[1];i&&(a+=e.x,l+=e.y);const o=1*(s.maxRandomnessOffset||0);a+=this.getOffset(-o,o,s),l+=this.getOffset(-o,o,s),e.setPosition(a,l),n.push({op:'move',data:[a,l]})}break}case'L':case'l':{const i='l'===t.key;if(2<=t.data.length){let a=+t.data[0],l=+t.data[1];i&&(a+=e.x,l+=e.y),n=n.concat(this.doubleLine(e.x,e.y,a,l,s)),e.setPosition(a,l)}break}case'H':case'h':{const i='h'===t.key;if(t.data.length){let a=+t.data[0];i&&(a+=e.x),n=n.concat(this.doubleLine(e.x,e.y,a,e.y,s)),e.setPosition(a,e.y)}break}case'V':case'v':{const i='v'===t.key;if(t.data.length){let a=+t.data[0];i&&(a+=e.y),n=n.concat(this.doubleLine(e.x,e.y,e.x,a,s)),e.setPosition(e.x,a)}break}case'Z':case'z':{e.first&&(n=n.concat(this.doubleLine(e.x,e.y,e.first[0],e.first[1],s)),e.setPosition(e.first[0],e.first[1]),e.first=null);break}case'C':case'c':{const i='c'===t.key;if(6<=t.data.length){let a=+t.data[0],l=+t.data[1],o=+t.data[2],r=+t.data[3],p=+t.data[4],d=+t.data[5];i&&(a+=e.x,o+=e.x,p+=e.x,l+=e.y,r+=e.y,d+=e.y);const f=this._bezierTo(a,l,o,r,p,d,e,s);n=n.concat(f),e.bezierReflectionPoint=[p+(p-o),d+(d-r)]}break}case'S':case's':{const a='s'===t.key;if(4<=t.data.length){let l=+t.data[0],o=+t.data[1],r=+t.data[2],p=+t.data[3];a&&(l+=e.x,r+=e.x,o+=e.y,p+=e.y);let d=l,f=o;const h=i?i.key:'';let g=null;('c'===h||'C'===h||'s'===h||'S'===h)&&(g=e.bezierReflectionPoint),g&&(d=g[0],f=g[1]);const c=this._bezierTo(d,f,l,o,r,p,e,s);n=n.concat(c),e.bezierReflectionPoint=[r+(r-l),p+(p-o)]}break}case'Q':case'q':{const i='q'===t.key;if(4<=t.data.length){let a=+t.data[0],l=+t.data[1],o=+t.data[2],r=+t.data[3];i&&(a+=e.x,o+=e.x,l+=e.y,r+=e.y);const p=1*(1+.2*s.roughness),d=1.5*(1+.22*s.roughness);n.push({op:'move',data:[e.x+this.getOffset(-p,p,s),e.y+this.getOffset(-p,p,s)]});let h=[o+this.getOffset(-p,p,s),r+this.getOffset(-p,p,s)];n.push({op:'qcurveTo',data:[a+this.getOffset(-p,p,s),l+this.getOffset(-p,p,s),h[0],h[1]]}),n.push({op:'move',data:[e.x+this.getOffset(-d,d,s),e.y+this.getOffset(-d,d,s)]}),h=[o+this.getOffset(-d,d,s),r+this.getOffset(-d,d,s)],n.push({op:'qcurveTo',data:[a+this.getOffset(-d,d,s),l+this.getOffset(-d,d,s),h[0],h[1]]}),e.setPosition(h[0],h[1]),e.quadReflectionPoint=[o+(o-a),r+(r-l)]}break}case'T':case't':{const a='t'===t.key;if(2<=t.data.length){let l=+t.data[0],o=+t.data[1];a&&(l+=e.x,o+=e.y);let r=l,p=o;const d=i?i.key:'';let h=null;('q'===d||'Q'===d||'t'===d||'T'===d)&&(h=e.quadReflectionPoint),h&&(r=h[0],p=h[1]);const g=1*(1+.2*s.roughness),c=1.5*(1+.22*s.roughness);n.push({op:'move',data:[e.x+this.getOffset(-g,g,s),e.y+this.getOffset(-g,g,s)]});let u=[l+this.getOffset(-g,g,s),o+this.getOffset(-g,g,s)];n.push({op:'qcurveTo',data:[r+this.getOffset(-g,g,s),p+this.getOffset(-g,g,s),u[0],u[1]]}),n.push({op:'move',data:[e.x+this.getOffset(-c,c,s),e.y+this.getOffset(-c,c,s)]}),u=[l+this.getOffset(-c,c,s),o+this.getOffset(-c,c,s)],n.push({op:'qcurveTo',data:[r+this.getOffset(-c,c,s),p+this.getOffset(-c,c,s),u[0],u[1]]}),e.setPosition(u[0],u[1]),e.quadReflectionPoint=[l+(l-r),o+(o-p)]}break}case'A':case'a':{const i='a'===t.key;if(7<=t.data.length){const a=+t.data[0],l=+t.data[1],o=+t.data[2],r=+t.data[3],p=+t.data[4];let d=+t.data[5],f=+t.data[6];if(i&&(d+=e.x,f+=e.y),d===e.x&&f===e.y)break;if(0==a||0==l)n=n.concat(this.doubleLine(e.x,e.y,d,f,s)),e.setPosition(d,f);else for(let t=0;1>t;t++){const t=new v([e.x,e.y],[d,f],[a,l],o,!!r,!!p);for(let i=t.getNextSegment();i;){const a=this._bezierTo(i.cp1[0],i.cp1[1],i.cp2[0],i.cp2[1],i.to[0],i.to[1],e,s);n=n.concat(a),i=t.getNextSegment()}}}break}default:}return n}}const L='undefined'!=typeof self,R=L&&self&&self.document&&self.document.currentScript&&self.document.currentScript.src,D='undefined'!=typeof self;class B{constructor(e,t){this.defaultOptions={maxRandomnessOffset:2,roughness:1,bowing:1,stroke:'#000',strokeWidth:1,curveTightness:0,curveStepCount:9,fillStyle:'hachure',fillWeight:-1,hachureAngle:-41,hachureGap:-1},this.config=e||{},this.surface=t,this.renderer=o(this.config),this.config.options&&(this.defaultOptions=this._options(this.config.options))}_options(e){return e?Object.assign({},this.defaultOptions,e):this.defaultOptions}_drawable(e,t,i){return{shape:e,sets:t||[],options:i||this.defaultOptions}}get lib(){return this.renderer}getCanvasSize(){const e=e=>e&&'object'==typeof e&&e.baseVal&&e.baseVal.value?e.baseVal.value:e||100;return this.surface?[e(this.surface.width),e(this.surface.height)]:[100,100]}computePolygonSize(e){if(e.length){let t=e[0][0],s=e[0][0],n=e[0][1],a=e[0][1];for(let l=1;li&&(i=t.strokeWidth/2),{d:this.opsToPath(e),stroke:t.fill||'none',strokeWidth:i,fill:'none'}}opsToPath(e){let t='';for(const i of e.ops){const e=i.data;switch(i.op){case'move':t+=`M${e[0]} ${e[1]} `;break;case'bcurveTo':t+=`C${e[0]} ${e[1]}, ${e[2]} ${e[3]}, ${e[4]} ${e[5]} `;break;case'qcurveTo':t+=`Q${e[0]} ${e[1]}, ${e[2]} ${e[3]} `;break;case'lineTo':t+=`L${e[0]} ${e[1]} `;}}return t.trim()}}const M='undefined'!=typeof document;class q{constructor(e,t){this.canvas=e,this.ctx=this.canvas.getContext('2d'),this.gen=new B(t||null,this.canvas)}get generator(){return this.gen}static createRenderer(){return new E}line(e,t,i,s,n){const a=this.gen.line(e,t,i,s,n);return this.draw(a),a}rectangle(e,t,i,s,n){const a=this.gen.rectangle(e,t,i,s,n);return this.draw(a),a}ellipse(e,t,i,s,n){const a=this.gen.ellipse(e,t,i,s,n);return this.draw(a),a}circle(e,t,i,s){const n=this.gen.circle(e,t,i,s);return this.draw(n),n}linearPath(e,t){const i=this.gen.linearPath(e,t);return this.draw(i),i}polygon(e,t){const i=this.gen.polygon(e,t);return this.draw(i),i}arc(e,t,i,s,n,a,l=!1,o){const r=this.gen.arc(e,t,i,s,n,a,l,o);return this.draw(r),r}curve(e,t){const i=this.gen.curve(e,t);return this.draw(i),i}path(e,t){const i=this.gen.path(e,t);return this.draw(i),i}draw(e){const t=e.sets||[],i=e.options||this.gen.defaultOptions,s=this.ctx;for(const n of t)switch(n.type){case'path':s.save(),s.strokeStyle=i.stroke,s.lineWidth=i.strokeWidth,this._drawToContext(s,n),s.restore();break;case'fillPath':s.save(),s.fillStyle=i.fill||'',this._drawToContext(s,n),s.restore();break;case'fillSketch':this.fillSketch(s,n,i);break;case'path2Dfill':{this.ctx.save(),this.ctx.fillStyle=i.fill||'';const e=new Path2D(n.path);this.ctx.fill(e),this.ctx.restore();break}case'path2Dpattern':{const e=this.canvas.ownerDocument||M&&document;if(e){const t=n.size,s=e.createElement('canvas'),a=s.getContext('2d'),l=this.computeBBox(n.path);l&&(l.width||l.height)?(s.width=this.canvas.width,s.height=this.canvas.height,a.translate(l.x||0,l.y||0)):(s.width=t[0],s.height=t[1]),this.fillSketch(a,n,i),this.ctx.save(),this.ctx.fillStyle=this.ctx.createPattern(s,'repeat');const o=new Path2D(n.path);this.ctx.fill(o),this.ctx.restore()}else console.error('Cannot render path2Dpattern. No defs/document defined.');break}}}computeBBox(e){if(M)try{const t=document.createElementNS('http://www.w3.org/2000/svg','svg');t.setAttribute('width','0'),t.setAttribute('height','0');const i=self.document.createElementNS('http://www.w3.org/2000/svg','path');i.setAttribute('d',e),t.appendChild(i),document.body.appendChild(t);const s=i.getBBox();return document.body.removeChild(t),s}catch(e){}return null}fillSketch(e,t,i){let s=i.fillWeight;0>s&&(s=i.strokeWidth/2),e.save(),e.strokeStyle=i.fill||'',e.lineWidth=s,this._drawToContext(e,t),e.restore()}_drawToContext(e,t){e.beginPath();for(const i of t.ops){const t=i.data;switch(i.op){case'move':e.moveTo(t[0],t[1]);break;case'bcurveTo':e.bezierCurveTo(t[0],t[1],t[2],t[3],t[4],t[5]);break;case'qcurveTo':e.quadraticCurveTo(t[0],t[1],t[2],t[3]);break;case'lineTo':e.lineTo(t[0],t[1]);}}'fillPath'===t.type?e.fill():e.stroke()}}class F extends B{async line(e,t,i,s,n){const a=this._options(n);return this._drawable('line',[await this.lib.line(e,t,i,s,a)],a)}async rectangle(e,t,i,s,n){const a=this._options(n),l=[];if(a.fill){const n=[[e,t],[e+i,t],[e+i,t+s],[e,t+s]];'solid'===a.fillStyle?l.push((await this.lib.solidFillPolygon(n,a))):l.push((await this.lib.patternFillPolygon(n,a)))}return l.push((await this.lib.rectangle(e,t,i,s,a))),this._drawable('rectangle',l,a)}async ellipse(e,t,i,s,n){const a=this._options(n),l=[];if(a.fill)if('solid'===a.fillStyle){const n=await this.lib.ellipse(e,t,i,s,a);n.type='fillPath',l.push(n)}else l.push((await this.lib.patternFillEllipse(e,t,i,s,a)));return l.push((await this.lib.ellipse(e,t,i,s,a))),this._drawable('ellipse',l,a)}async circle(e,t,i,s){const n=await this.ellipse(e,t,i,i,s);return n.shape='circle',n}async linearPath(e,t){const i=this._options(t);return this._drawable('linearPath',[await this.lib.linearPath(e,!1,i)],i)}async arc(e,t,i,s,n,a,l=!1,r){const p=this._options(r),o=[];if(l&&p.fill)if('solid'===p.fillStyle){const l=await this.lib.arc(e,t,i,s,n,a,!0,!1,p);l.type='fillPath',o.push(l)}else o.push((await this.lib.patternFillArc(e,t,i,s,n,a,p)));return o.push((await this.lib.arc(e,t,i,s,n,a,l,!0,p))),this._drawable('arc',o,p)}async curve(e,t){const i=this._options(t);return this._drawable('curve',[await this.lib.curve(e,i)],i)}async polygon(e,t){const i=this._options(t),s=[];if(i.fill)if('solid'===i.fillStyle)s.push((await this.lib.solidFillPolygon(e,i)));else{const t=this.computePolygonSize(e),n=[[0,0],[t[0],0],[t[0],t[1]],[0,t[1]]],a=await this.lib.patternFillPolygon(n,i);a.type='path2Dpattern',a.size=t,a.path=this.polygonPath(e),s.push(a)}return s.push((await this.lib.linearPath(e,!0,i))),this._drawable('polygon',s,i)}async path(e,t){const i=this._options(t),s=[];if(!e)return this._drawable('path',s,i);if(i.fill)if('solid'===i.fillStyle){s.push({type:'path2Dfill',path:e,ops:[]})}else{const t=this.computePathSize(e),n=[[0,0],[t[0],0],[t[0],t[1]],[0,t[1]]],a=await this.lib.patternFillPolygon(n,i);a.type='path2Dpattern',a.size=t,a.path=e,s.push(a)}return s.push((await this.lib.svgPath(e,i))),this._drawable('path',s,i)}}class U extends q{constructor(e,t){super(e,t),this.genAsync=new F(t||null,this.canvas)}get generator(){return this.genAsync}async line(e,t,i,s,n){const a=await this.genAsync.line(e,t,i,s,n);return this.draw(a),a}async rectangle(e,t,i,s,n){const a=await this.genAsync.rectangle(e,t,i,s,n);return this.draw(a),a}async ellipse(e,t,i,s,n){const a=await this.genAsync.ellipse(e,t,i,s,n);return this.draw(a),a}async circle(e,t,i,s){const n=await this.genAsync.circle(e,t,i,s);return this.draw(n),n}async linearPath(e,t){const i=await this.genAsync.linearPath(e,t);return this.draw(i),i}async polygon(e,t){const i=await this.genAsync.polygon(e,t);return this.draw(i),i}async arc(e,t,i,s,n,a,l=!1,o){const r=await this.genAsync.arc(e,t,i,s,n,a,l,o);return this.draw(r),r}async curve(e,t){const i=await this.genAsync.curve(e,t);return this.draw(i),i}async path(e,t){const i=await this.genAsync.path(e,t);return this.draw(i),i}}const X='undefined'!=typeof document;class G{constructor(e,t){this.svg=e,this.gen=new B(t||null,this.svg)}get generator(){return this.gen}static createRenderer(){return new E}get defs(){const e=this.svg.ownerDocument||X&&document;if(e&&!this._defs){const t=e.createElementNS('http://www.w3.org/2000/svg','defs');this.svg.firstChild?this.svg.insertBefore(t,this.svg.firstChild):this.svg.appendChild(t),this._defs=t}return this._defs||null}line(e,t,i,s,n){const a=this.gen.line(e,t,i,s,n);return this.draw(a)}rectangle(e,t,i,s,n){const a=this.gen.rectangle(e,t,i,s,n);return this.draw(a)}ellipse(e,t,i,s,n){const a=this.gen.ellipse(e,t,i,s,n);return this.draw(a)}circle(e,t,i,s){const n=this.gen.circle(e,t,i,s);return this.draw(n)}linearPath(e,t){const i=this.gen.linearPath(e,t);return this.draw(i)}polygon(e,t){const i=this.gen.polygon(e,t);return this.draw(i)}arc(e,t,i,s,n,a,l=!1,o){const r=this.gen.arc(e,t,i,s,n,a,l,o);return this.draw(r)}curve(e,t){const i=this.gen.curve(e,t);return this.draw(i)}path(e,t){const i=this.gen.path(e,t);return this.draw(i)}draw(e){const t=e.sets||[],i=e.options||this.gen.defaultOptions,s=this.svg.ownerDocument||X&&document,n=s.createElementNS('http://www.w3.org/2000/svg','g');for(const a of t){let e=null;switch(a.type){case'path':{e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',this.opsToPath(a)),e.style.stroke=i.stroke,e.style.strokeWidth=i.strokeWidth+'',e.style.fill='none';break}case'fillPath':{e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',this.opsToPath(a)),e.style.stroke='none',e.style.strokeWidth='0',e.style.fill=i.fill||null;break}case'fillSketch':{e=this.fillSketch(s,a,i);break}case'path2Dfill':{e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',a.path||''),e.style.stroke='none',e.style.strokeWidth='0',e.style.fill=i.fill||null;break}case'path2Dpattern':{if(!this.defs)console.error('Cannot render path2Dpattern. No defs/document defined.');else{const t=a.size,n=s.createElementNS('http://www.w3.org/2000/svg','pattern'),l=`rough-${c(Math.random()*(Number.MAX_SAFE_INTEGER||999999))}`;n.setAttribute('id',l),n.setAttribute('x','0'),n.setAttribute('y','0'),n.setAttribute('width','1'),n.setAttribute('height','1'),n.setAttribute('height','1'),n.setAttribute('viewBox',`0 0 ${r(t[0])} ${r(t[1])}`),n.setAttribute('patternUnits','objectBoundingBox');const o=this.fillSketch(s,a,i);n.appendChild(o),this.defs.appendChild(n),e=s.createElementNS('http://www.w3.org/2000/svg','path'),e.setAttribute('d',a.path||''),e.style.stroke='none',e.style.strokeWidth='0',e.style.fill=`url(#${l})`}break}}e&&n.appendChild(e)}return n}opsToPath(e){return this.gen.opsToPath(e)}fillSketch(e,t,i){let s=i.fillWeight;0>s&&(s=i.strokeWidth/2);const n=e.createElementNS('http://www.w3.org/2000/svg','path');return n.setAttribute('d',this.opsToPath(t)),n.style.stroke=i.fill||null,n.style.strokeWidth=s+'',n.style.fill='none',n}}class V extends G{constructor(e,t){super(e,t),this.genAsync=new F(t||null,this.svg)}get generator(){return this.genAsync}async line(e,t,i,s,n){const a=await this.genAsync.line(e,t,i,s,n);return this.draw(a)}async rectangle(e,t,i,s,n){const a=await this.genAsync.rectangle(e,t,i,s,n);return this.draw(a)}async ellipse(e,t,i,s,n){const a=await this.genAsync.ellipse(e,t,i,s,n);return this.draw(a)}async circle(e,t,i,s){const n=await this.genAsync.circle(e,t,i,s);return this.draw(n)}async linearPath(e,t){const i=await this.genAsync.linearPath(e,t);return this.draw(i)}async polygon(e,t){const i=await this.genAsync.polygon(e,t);return this.draw(i)}async arc(e,t,i,s,n,a,l=!1,o){const r=await this.genAsync.arc(e,t,i,s,n,a,l,o);return this.draw(r)}async curve(e,t){const i=await this.genAsync.curve(e,t);return this.draw(i)}async path(e,t){const i=await this.genAsync.path(e,t);return this.draw(i)}}var j={canvas(e,t){return t&&t.async?new U(e,t):new q(e,t)},svg(e,t){return t&&t.async?new V(e,t):new G(e,t)},createRenderer(){return q.createRenderer()},generator(e,t){return e&&e.async?new F(e,t):new B(e,t)}};return j}); diff --git a/package.json b/package.json index de79c44..2f84854 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "roughjs", - "version": "2.2.3", + "version": "2.2.4", "description": "Create graphics using HTML Canvas or SVG with a hand-drawn, sketchy, appearance.", "main": "dist/rough.umd.js", "module": "bin/rough.js", diff --git a/src/canvas.ts b/src/canvas.ts index 87b64b6..83d9b1a 100644 --- a/src/canvas.ts +++ b/src/canvas.ts @@ -1,4 +1,4 @@ -import { Config, Options, Drawable, OpSet } from './core'; +import { Config, Options, ResolvedOptions, Drawable, OpSet } from './core'; import { RoughGenerator } from './generator'; import { RoughRenderer } from './renderer'; import { Point } from './geometry'; @@ -157,7 +157,7 @@ export class RoughCanvas { return null; } - private fillSketch(ctx: CanvasRenderingContext2D, drawing: OpSet, o: Options) { + private fillSketch(ctx: CanvasRenderingContext2D, drawing: OpSet, o: ResolvedOptions) { let fweight = o.fillWeight; if (fweight < 0) { fweight = o.strokeWidth / 2; diff --git a/src/core.ts b/src/core.ts index e58dbbe..2bbcd7d 100644 --- a/src/core.ts +++ b/src/core.ts @@ -13,6 +13,22 @@ export interface DrawingSurface { } export interface Options { + maxRandomnessOffset?: number; + roughness?: number; + bowing?: number; + stroke?: string; + strokeWidth?: number; + curveTightness?: number; + curveStepCount?: number; + fill?: string; + fillStyle?: string; + fillWeight?: number; + hachureAngle?: number; + hachureGap?: number; + simplification?: number; +} + +export interface ResolvedOptions extends Options { maxRandomnessOffset: number; roughness: number; bowing: number; @@ -20,12 +36,10 @@ export interface Options { strokeWidth: number; curveTightness: number; curveStepCount: number; - fill: string | null; fillStyle: string; fillWeight: number; hachureAngle: number; hachureGap: number; - simplification?: number; } export declare type OpType = 'move' | 'bcurveTo' | 'lineTo' | 'qcurveTo'; @@ -45,7 +59,7 @@ export interface OpSet { export interface Drawable { shape: string; - options: Options; + options: ResolvedOptions; sets: OpSet[]; } diff --git a/src/fillers/dot-filler.ts b/src/fillers/dot-filler.ts index 70285ca..86f3f9b 100644 --- a/src/fillers/dot-filler.ts +++ b/src/fillers/dot-filler.ts @@ -1,5 +1,5 @@ import { PatternFiller, RenderHelper } from './filler-interface'; -import { Options, OpSet, Op } from '../core'; +import { ResolvedOptions, OpSet, Op } from '../core'; import { Point, Line } from '../geometry'; import { hachureLinesForPolygon, hachureLinesForEllipse, lineLength } from './filler-utils'; @@ -10,19 +10,19 @@ export class DotFiller implements PatternFiller { this.renderer = renderer; } - fillPolygon(points: Point[], o: Options): OpSet { + fillPolygon(points: Point[], o: ResolvedOptions): OpSet { o = Object.assign({}, o, { curveStepCount: 4, hachureAngle: 0 }); const lines = hachureLinesForPolygon(points, o); return this.dotsOnLines(lines, o); } - fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet { + fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet { o = Object.assign({}, o, { curveStepCount: 4, hachureAngle: 0 }); const lines = hachureLinesForEllipse(cx, cy, width, height, o, this.renderer); return this.dotsOnLines(lines, o); } - private dotsOnLines(lines: Line[], o: Options): OpSet { + private dotsOnLines(lines: Line[], o: ResolvedOptions): OpSet { let ops: Op[] = []; let gap = o.hachureGap; if (gap < 0) { diff --git a/src/fillers/filler-interface.ts b/src/fillers/filler-interface.ts index f14b298..403c7a7 100644 --- a/src/fillers/filler-interface.ts +++ b/src/fillers/filler-interface.ts @@ -1,13 +1,13 @@ -import { Options, OpSet, Op } from '../core'; +import { ResolvedOptions, OpSet, Op } from '../core'; import { Point } from '../geometry'; export interface PatternFiller { - fillPolygon(points: Point[], o: Options): OpSet; - fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet; + fillPolygon(points: Point[], o: ResolvedOptions): OpSet; + fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet; } export interface RenderHelper { - doubleLine(x1: number, y1: number, x2: number, y2: number, o: Options): Op[]; - getOffset(min: number, max: number, ops: Options): number; - ellipse(x: number, y: number, width: number, height: number, o: Options): OpSet; + doubleLine(x1: number, y1: number, x2: number, y2: number, o: ResolvedOptions): Op[]; + getOffset(min: number, max: number, ops: ResolvedOptions): number; + ellipse(x: number, y: number, width: number, height: number, o: ResolvedOptions): OpSet; } \ No newline at end of file diff --git a/src/fillers/filler-utils.ts b/src/fillers/filler-utils.ts index 183d0cb..a90f785 100644 --- a/src/fillers/filler-utils.ts +++ b/src/fillers/filler-utils.ts @@ -1,5 +1,5 @@ import { Point, Segment, Line } from '../geometry'; -import { Options } from '../core'; +import { ResolvedOptions } from '../core'; import { HachureIterator } from '../utils/hachure'; import { RenderHelper } from './filler-interface'; @@ -34,7 +34,7 @@ export function affine(x: number, y: number, cx: number, cy: number, sinAnglePri ]; } -export function hachureLinesForPolygon(points: Point[], o: Options): Line[] { +export function hachureLinesForPolygon(points: Point[], o: ResolvedOptions): Line[] { const ret: Line[] = []; if (points && points.length) { let left = points[0][0]; @@ -74,7 +74,7 @@ export function hachureLinesForPolygon(points: Point[], o: Options): Line[] { return ret; } -export function hachureLinesForEllipse(cx: number, cy: number, width: number, height: number, o: Options, renderer: RenderHelper): Line[] { +export function hachureLinesForEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions, renderer: RenderHelper): Line[] { const ret: Line[] = []; let rx = Math.abs(width / 2); let ry = Math.abs(height / 2); diff --git a/src/fillers/filler.ts b/src/fillers/filler.ts index 459491d..dc825b5 100644 --- a/src/fillers/filler.ts +++ b/src/fillers/filler.ts @@ -1,4 +1,4 @@ -import { Options } from '../core'; +import { ResolvedOptions } from '../core'; import { PatternFiller, RenderHelper } from './filler-interface'; import { HachureFiller } from './hachure-filler'; import { ZigZagFiller } from './zigzag-filler'; @@ -7,7 +7,7 @@ import { DotFiller } from './dot-filler'; const fillers: { [name: string]: PatternFiller } = {}; -export function getFiller(renderer: RenderHelper, o: Options): PatternFiller { +export function getFiller(renderer: RenderHelper, o: ResolvedOptions): PatternFiller { let fillerName = o.fillStyle || 'hachure'; if (!fillers[fillerName]) { switch (fillerName) { diff --git a/src/fillers/hachure-filler.ts b/src/fillers/hachure-filler.ts index 9b3d5e4..3e642ef 100644 --- a/src/fillers/hachure-filler.ts +++ b/src/fillers/hachure-filler.ts @@ -1,5 +1,5 @@ import { PatternFiller, RenderHelper } from './filler-interface'; -import { Options, OpSet, Op } from '../core'; +import { ResolvedOptions, OpSet, Op } from '../core'; import { Point, Line } from '../geometry'; import { hachureLinesForPolygon, hachureLinesForEllipse } from './filler-utils'; @@ -10,27 +10,27 @@ export class HachureFiller implements PatternFiller { this.renderer = renderer; } - fillPolygon(points: Point[], o: Options): OpSet { + fillPolygon(points: Point[], o: ResolvedOptions): OpSet { return this._fillPolygon(points, o); } - fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet { + fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet { return this._fillEllipse(cx, cy, width, height, o); } - protected _fillPolygon(points: Point[], o: Options, connectEnds: boolean = false): OpSet { + protected _fillPolygon(points: Point[], o: ResolvedOptions, connectEnds: boolean = false): OpSet { const lines = hachureLinesForPolygon(points, o); const ops = this.renderLines(lines, o, connectEnds); return { type: 'fillSketch', ops }; } - protected _fillEllipse(cx: number, cy: number, width: number, height: number, o: Options, connectEnds: boolean = false): OpSet { + protected _fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions, connectEnds: boolean = false): OpSet { const lines = hachureLinesForEllipse(cx, cy, width, height, o, this.renderer); const ops = this.renderLines(lines, o, connectEnds); return { type: 'fillSketch', ops }; } - private renderLines(lines: Line[], o: Options, connectEnds: boolean): Op[] { + private renderLines(lines: Line[], o: ResolvedOptions, connectEnds: boolean): Op[] { let ops: Op[] = []; let prevPoint: Point | null = null; for (const line of lines) { diff --git a/src/fillers/hatch-filler.ts b/src/fillers/hatch-filler.ts index 012707e..865fa22 100644 --- a/src/fillers/hatch-filler.ts +++ b/src/fillers/hatch-filler.ts @@ -1,9 +1,9 @@ import { HachureFiller } from './hachure-filler'; -import { Options, OpSet } from '../core'; +import { ResolvedOptions, OpSet } from '../core'; import { Point } from '../geometry'; export class HatchFiller extends HachureFiller { - fillPolygon(points: Point[], o: Options): OpSet { + fillPolygon(points: Point[], o: ResolvedOptions): OpSet { const set = this._fillPolygon(points, o); const o2 = Object.assign({}, o, { hachureAngle: o.hachureAngle + 90 }); const set2 = this._fillPolygon(points, o2); @@ -11,7 +11,7 @@ export class HatchFiller extends HachureFiller { return set; } - fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet { + fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet { const set = this._fillEllipse(cx, cy, width, height, o); const o2 = Object.assign({}, o, { hachureAngle: o.hachureAngle + 90 }); const set2 = this._fillEllipse(cx, cy, width, height, o2); diff --git a/src/fillers/zigzag-filler.ts b/src/fillers/zigzag-filler.ts index c8f1a05..b5e7e6d 100644 --- a/src/fillers/zigzag-filler.ts +++ b/src/fillers/zigzag-filler.ts @@ -1,13 +1,13 @@ import { HachureFiller } from './hachure-filler'; -import { Options, OpSet } from '../core'; +import { ResolvedOptions, OpSet } from '../core'; import { Point } from '../geometry'; export class ZigZagFiller extends HachureFiller { - fillPolygon(points: Point[], o: Options): OpSet { + fillPolygon(points: Point[], o: ResolvedOptions): OpSet { return this._fillPolygon(points, o, true); } - fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet { + fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet { return this._fillEllipse(cx, cy, width, height, o, true); } } \ No newline at end of file diff --git a/src/generator.ts b/src/generator.ts index be28d47..440fad0 100644 --- a/src/generator.ts +++ b/src/generator.ts @@ -1,5 +1,5 @@ import { RoughRenderer } from './renderer.js'; -import { Config, DrawingSurface, Options, Drawable, OpSet, PathInfo, PatternInfo } from './core'; +import { Config, DrawingSurface, Options, ResolvedOptions, Drawable, OpSet, PathInfo, PatternInfo } from './core'; import { Point } from './geometry.js'; import { createRenderer } from './renderer-factory.js'; @@ -9,7 +9,7 @@ export class RoughGenerator { private config: Config; private surface: DrawingSurface; private renderer: RoughRenderer; - defaultOptions: Options = { + defaultOptions: ResolvedOptions = { maxRandomnessOffset: 2, roughness: 1, bowing: 1, @@ -17,7 +17,6 @@ export class RoughGenerator { strokeWidth: 1, curveTightness: 0, curveStepCount: 9, - fill: null, fillStyle: 'hachure', fillWeight: -1, hachureAngle: -41, @@ -33,11 +32,11 @@ export class RoughGenerator { } } - protected _options(options?: Options): Options { + protected _options(options?: Options): ResolvedOptions { return options ? Object.assign({}, this.defaultOptions, options) : this.defaultOptions; } - protected _drawable(shape: string, sets: OpSet[], options: Options): Drawable { + protected _drawable(shape: string, sets: OpSet[], options: ResolvedOptions): Drawable { return { shape, sets: sets || [], options: options || this.defaultOptions }; } @@ -295,7 +294,7 @@ export class RoughGenerator { return paths; } - private fillSketch(drawing: OpSet, o: Options): PathInfo { + private fillSketch(drawing: OpSet, o: ResolvedOptions): PathInfo { let fweight = o.fillWeight; if (fweight < 0) { fweight = o.strokeWidth / 2; diff --git a/src/renderer.ts b/src/renderer.ts index 77cb677..f0af9dd 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -1,15 +1,15 @@ -import { Options, OpSet, Op } from './core'; +import { ResolvedOptions, OpSet, Op } from './core'; import { RoughPath, RoughArcConverter, PathFitter, Segment } from './path.js'; import { Point } from './geometry'; import { getFiller } from './fillers/filler'; export class RoughRenderer { - line(x1: number, y1: number, x2: number, y2: number, o: Options): OpSet { + line(x1: number, y1: number, x2: number, y2: number, o: ResolvedOptions): OpSet { const ops = this.doubleLine(x1, y1, x2, y2, o); return { type: 'path', ops }; } - linearPath(points: Point[], close: boolean, o: Options): OpSet { + linearPath(points: Point[], close: boolean, o: ResolvedOptions): OpSet { const len = (points || []).length; if (len > 2) { let ops: Op[] = []; @@ -26,24 +26,24 @@ export class RoughRenderer { return { type: 'path', ops: [] }; } - polygon(points: Point[], o: Options): OpSet { + polygon(points: Point[], o: ResolvedOptions): OpSet { return this.linearPath(points, true, o); } - rectangle(x: number, y: number, width: number, height: number, o: Options): OpSet { + rectangle(x: number, y: number, width: number, height: number, o: ResolvedOptions): OpSet { const points: Point[] = [ [x, y], [x + width, y], [x + width, y + height], [x, y + height] ]; return this.polygon(points, o); } - curve(points: Point[], o: Options): OpSet { + curve(points: Point[], o: ResolvedOptions): OpSet { const o1 = this._curveWithOffset(points, 1 * (1 + o.roughness * 0.2), o); const o2 = this._curveWithOffset(points, 1.5 * (1 + o.roughness * 0.22), o); return { type: 'path', ops: o1.concat(o2) }; } - ellipse(x: number, y: number, width: number, height: number, o: Options): OpSet { + ellipse(x: number, y: number, width: number, height: number, o: ResolvedOptions): OpSet { const increment = (Math.PI * 2) / o.curveStepCount; let rx = Math.abs(width / 2); let ry = Math.abs(height / 2); @@ -54,7 +54,7 @@ export class RoughRenderer { return { type: 'path', ops: o1.concat(o2) }; } - arc(x: number, y: number, width: number, height: number, start: number, stop: number, closed: boolean, roughClosure: boolean, o: Options): OpSet { + arc(x: number, y: number, width: number, height: number, start: number, stop: number, closed: boolean, roughClosure: boolean, o: ResolvedOptions): OpSet { const cx = x; const cy = y; let rx = Math.abs(width / 2); @@ -88,7 +88,7 @@ export class RoughRenderer { return { type: 'path', ops }; } - svgPath(path: string, o: Options): OpSet { + svgPath(path: string, o: ResolvedOptions): OpSet { path = (path || '').replace(/\n/g, ' ').replace(/(-\s)/g, '-').replace('/(\s\s)/g', ' '); let p = new RoughPath(path); if (o.simplification) { @@ -109,7 +109,7 @@ export class RoughRenderer { return { type: 'path', ops }; } - solidFillPolygon(points: Point[], o: Options): OpSet { + solidFillPolygon(points: Point[], o: ResolvedOptions): OpSet { const ops: Op[] = []; if (points.length) { const offset = o.maxRandomnessOffset || 0; @@ -124,17 +124,17 @@ export class RoughRenderer { return { type: 'fillPath', ops }; } - patternFillPolygon(points: Point[], o: Options): OpSet { + patternFillPolygon(points: Point[], o: ResolvedOptions): OpSet { const filler = getFiller(this, o); return filler.fillPolygon(points, o); } - patternFillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet { + patternFillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet { const filler = getFiller(this, o); return filler.fillEllipse(cx, cy, width, height, o); } - patternFillArc(x: number, y: number, width: number, height: number, start: number, stop: number, o: Options): OpSet { + patternFillArc(x: number, y: number, width: number, height: number, start: number, stop: number, o: ResolvedOptions): OpSet { const cx = x; const cy = y; let rx = Math.abs(width / 2); @@ -163,17 +163,17 @@ export class RoughRenderer { /// - getOffset(min: number, max: number, ops: Options): number { + getOffset(min: number, max: number, ops: ResolvedOptions): number { return ops.roughness * ((Math.random() * (max - min)) + min); } - doubleLine(x1: number, y1: number, x2: number, y2: number, o: Options): Op[] { + doubleLine(x1: number, y1: number, x2: number, y2: number, o: ResolvedOptions): Op[] { const o1 = this._line(x1, y1, x2, y2, o, true, false); const o2 = this._line(x1, y1, x2, y2, o, true, true); return o1.concat(o2); } - private _line(x1: number, y1: number, x2: number, y2: number, o: Options, move: boolean, overlay: boolean): Op[] { + private _line(x1: number, y1: number, x2: number, y2: number, o: ResolvedOptions, move: boolean, overlay: boolean): Op[] { const lengthSq = Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2); let offset = o.maxRandomnessOffset || 0; if ((offset * offset * 100) > lengthSq) { @@ -229,7 +229,7 @@ export class RoughRenderer { return ops; } - private _curve(points: Point[], closePoint: Point | null, o: Options): Op[] { + private _curve(points: Point[], closePoint: Point | null, o: ResolvedOptions): Op[] { const len = points.length; let ops: Op[] = []; if (len > 3) { @@ -262,7 +262,7 @@ export class RoughRenderer { return ops; } - private _ellipse(increment: number, cx: number, cy: number, rx: number, ry: number, offset: number, overlap: number, o: Options): Op[] { + private _ellipse(increment: number, cx: number, cy: number, rx: number, ry: number, offset: number, overlap: number, o: ResolvedOptions): Op[] { const radOffset = this.getOffset(-0.5, 0.5, o) - (Math.PI / 2); const points: Point[] = []; points.push([ @@ -290,7 +290,7 @@ export class RoughRenderer { return this._curve(points, null, o); } - private _curveWithOffset(points: Point[], offset: number, o: Options): Op[] { + private _curveWithOffset(points: Point[], offset: number, o: ResolvedOptions): Op[] { const ps: Point[] = []; ps.push([ points[0][0] + this.getOffset(-offset, offset, o), @@ -315,7 +315,7 @@ export class RoughRenderer { return this._curve(ps, null, o); } - private _arc(increment: number, cx: number, cy: number, rx: number, ry: number, strt: number, stp: number, offset: number, o: Options) { + private _arc(increment: number, cx: number, cy: number, rx: number, ry: number, strt: number, stp: number, offset: number, o: ResolvedOptions) { const radOffset = strt + this.getOffset(-0.1, 0.1, o); const points: Point[] = []; points.push([ @@ -339,7 +339,7 @@ export class RoughRenderer { return this._curve(points, null, o); } - private _bezierTo(x1: number, y1: number, x2: number, y2: number, x: number, y: number, path: RoughPath, o: Options): Op[] { + private _bezierTo(x1: number, y1: number, x2: number, y2: number, x: number, y: number, path: RoughPath, o: ResolvedOptions): Op[] { const ops: Op[] = []; const ros = [o.maxRandomnessOffset || 1, (o.maxRandomnessOffset || 1) + 0.5]; let f: Point = [0, 0]; @@ -362,7 +362,7 @@ export class RoughRenderer { return ops; } - private _processSegment(path: RoughPath, seg: Segment, prevSeg: Segment | null, o: Options): Op[] { + private _processSegment(path: RoughPath, seg: Segment, prevSeg: Segment | null, o: ResolvedOptions): Op[] { let ops: Op[] = []; switch (seg.key) { case 'M': diff --git a/src/svg.ts b/src/svg.ts index 94fd638..800e456 100644 --- a/src/svg.ts +++ b/src/svg.ts @@ -1,4 +1,4 @@ -import { Config, Options, Drawable, OpSet } from './core'; +import { Config, Options, Drawable, OpSet, ResolvedOptions } from './core'; import { RoughGenerator } from './generator'; import { RoughRenderer } from './renderer'; import { Point } from './geometry'; @@ -105,7 +105,7 @@ export class RoughSVG { path.setAttribute('d', this.opsToPath(drawing)); path.style.stroke = 'none'; path.style.strokeWidth = '0'; - path.style.fill = o.fill; + path.style.fill = o.fill || null; break; } case 'fillSketch': { @@ -117,7 +117,7 @@ export class RoughSVG { path.setAttribute('d', drawing.path || ''); path.style.stroke = 'none'; path.style.strokeWidth = '0'; - path.style.fill = o.fill; + path.style.fill = o.fill || null; break; } case 'path2Dpattern': { @@ -159,14 +159,14 @@ export class RoughSVG { return this.gen.opsToPath(drawing); } - private fillSketch(doc: Document, drawing: OpSet, o: Options): SVGPathElement { + private fillSketch(doc: Document, drawing: OpSet, o: ResolvedOptions): SVGPathElement { let fweight = o.fillWeight; if (fweight < 0) { fweight = o.strokeWidth / 2; } const path = doc.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttribute('d', this.opsToPath(drawing)); - path.style.stroke = o.fill; + path.style.stroke = o.fill || null; path.style.strokeWidth = fweight + ''; path.style.fill = 'none'; return path;