rough-notation - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

lib/model.d.ts

@@ -18,2 +18,3 @@ export declare const SVG_NS = "http://www.w3.org/2000/svg";
     padding?: number;
+    iterations?: number;
 }
@@ -20,0 +21,0 @@ export interface RoughAnnotation {

lib/render.js

@@ -34,7 +34,14 @@ import { SVG_NS, DEFAULT_ANIMATION_DURATION } from './model.js';
     const animate = (config.animate === undefined) ? true : (!!config.animate);
+    const iterations = config.iterations || 2;
     switch (config.type) {
         case 'underline': {
             const y = rect.y + rect.h + padding;
-            opList.push(line(rect.x, y, rect.x + rect.w, y, singleStrokeOptions));
-            opList.push(line(rect.x + rect.w, y, rect.x, y, singleStrokeOptions));
+            for (let i = 0; i < iterations; i++) {
+                if (i % 2) {
+                    opList.push(line(rect.x + rect.w, y, rect.x, y, singleStrokeOptions));
+                }
+                else {
+                    opList.push(line(rect.x, y, rect.x + rect.w, y, singleStrokeOptions));
+                }
+            }
             break;
@@ -44,4 +51,10 @@ }
             const y = rect.y + (rect.h / 2);
-            opList.push(line(rect.x, y, rect.x + rect.w, y, singleStrokeOptions));
-            opList.push(line(rect.x + rect.w, y, rect.x, y, singleStrokeOptions));
+            for (let i = 0; i < iterations; i++) {
+                if (i % 2) {
+                    opList.push(line(rect.x + rect.w, y, rect.x, y, singleStrokeOptions));
+                }
+                else {
+                    opList.push(line(rect.x, y, rect.x + rect.w, y, singleStrokeOptions));
+                }
+            }
             break;
@@ -54,4 +67,5 @@ }
             const height = rect.h + (2 * padding);
-            opList.push(rectangle(x, y, width, height, singleStrokeOptions));
-            opList.push(rectangle(x, y, width, height, singleStrokeOptions));
+            for (let i = 0; i < iterations; i++) {
+                opList.push(rectangle(x, y, width, height, singleStrokeOptions));
+            }
             break;
@@ -64,6 +78,18 @@ }
             const y2 = y + rect.h;
-            opList.push(line(x, y, x2, y2, singleStrokeOptions));
-            opList.push(line(x2, y2, x, y, singleStrokeOptions));
-            opList.push(line(x2, y, x, y2, singleStrokeOptions));
-            opList.push(line(x, y2, x2, y, singleStrokeOptions));
+            for (let i = 0; i < iterations; i++) {
+                if (i % 2) {
+                    opList.push(line(x2, y2, x, y, singleStrokeOptions));
+                }
+                else {
+                    opList.push(line(x, y, x2, y2, singleStrokeOptions));
+                }
+            }
+            for (let i = 0; i < iterations; i++) {
+                if (i % 2) {
+                    opList.push(line(x, y2, x2, y, singleStrokeOptions));
+                }
+                else {
+                    opList.push(line(x2, y, x, y2, singleStrokeOptions));
+                }
+            }
             break;
@@ -77,3 +103,10 @@ }
             const y = rect.y - p2 + (height / 2);
-            opList.push(ellipse(x, y, width, height, defaultOptions));
+            const fullItr = Math.floor(iterations / 2);
+            const singleItr = iterations - (fullItr * 2);
+            for (let i = 0; i < fullItr; i++) {
+                opList.push(ellipse(x, y, width, height, defaultOptions));
+            }
+            for (let i = 0; i < singleItr; i++) {
+                opList.push(ellipse(x, y, width, height, singleStrokeOptions));
+            }
             break;
@@ -84,4 +117,10 @@ }
             const y = rect.y + (rect.h / 2);
-            opList.push(line(rect.x, y, rect.x + rect.w, y, highlightOptions));
-            opList.push(line(rect.x + rect.w, y, rect.x, y, highlightOptions));
+            for (let i = 0; i < iterations; i++) {
+                if (i % 2) {
+                    opList.push(line(rect.x + rect.w, y, rect.x, y, highlightOptions));
+                }
+                else {
+                    opList.push(line(rect.x, y, rect.x + rect.w, y, highlightOptions));
+                }
+            }
             break;
@@ -88,0 +127,0 @@ }

lib/rough-notation.cjs.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const t="http://www.w3.org/2000/svg";class e{constructor(t){this.seed=t}next(){return this.seed?(2**31-1&(this.seed=Math.imul(48271,this.seed)))/2**31:Math.random()}}function s(t,e,s,n,i){return{type:"path",ops:c(t,e,s,n,i)}}function n(t,e){return function(t,e,n){const i=(t||[]).length;if(i>2){const s=[];for(let e=0;e<i-1;e++)s.push(...c(t[e][0],t[e][1],t[e+1][0],t[e+1][1],n));return e&&s.push(...c(t[i-1][0],t[i-1][1],t[0][0],t[0][1],n)),{type:"path",ops:s}}return 2===i?s(t[0][0],t[0][1],t[1][0],t[1][1],n):{type:"path",ops:[]}}(t,!0,e)}function i(t,e,s,i,o){return n([[t,e],[t+s,e],[t+s,e+i],[t,e+i]],o)}function o(t,e,s,n,i){return function(t,e,s,n){const[i,o]=p(n.increment,t,e,n.rx,n.ry,1,n.increment*r(.1,r(.4,1,s),s),s);let h=l(i,null,s);if(!s.disableMultiStroke){const[i]=p(n.increment,t,e,n.rx,n.ry,1.5,0,s),o=l(i,null,s);h=h.concat(o)}return{estimatedPoints:o,opset:{type:"path",ops:h}}}(t,e,i,function(t,e,s){const n=Math.sqrt(2*Math.PI*Math.sqrt((Math.pow(t/2,2)+Math.pow(e/2,2))/2)),i=Math.max(s.curveStepCount,s.curveStepCount/Math.sqrt(200)*n),o=2*Math.PI/i;let h=Math.abs(t/2),r=Math.abs(e/2);const c=1-s.curveFitting;return h+=a(h*c,s),r+=a(r*c,s),{increment:o,rx:h,ry:r}}(s,n,i)).opset}function h(t){return t.randomizer||(t.randomizer=new e(t.seed||0)),t.randomizer.next()}function r(t,e,s,n=1){return s.roughness*n*(h(s)*(e-t)+t)}function a(t,e,s=1){return r(-t,t,e,s)}function c(t,e,s,n,i,o=!1){const h=o?i.disableMultiStrokeFill:i.disableMultiStroke,r=u(t,e,s,n,i,!0,!1);if(h)return r;const a=u(t,e,s,n,i,!0,!0);return r.concat(a)}function u(t,e,s,n,i,o,r){const c=Math.pow(t-s,2)+Math.pow(e-n,2),u=Math.sqrt(c);let l=1;l=u<200?1:u>500?.4:-.0016668*u+1.233334;let p=i.maxRandomnessOffset||0;p*p*100>c&&(p=u/10);const d=p/2,f=.2+.2*h(i);let g=i.bowing*i.maxRandomnessOffset*(n-e)/200,m=i.bowing*i.maxRandomnessOffset*(t-s)/200;g=a(g,i,l),m=a(m,i,l);const _=[],w=()=>a(d,i,l),v=()=>a(p,i,l);return o&&(r?_.push({op:"move",data:[t+w(),e+w()]}):_.push({op:"move",data:[t+a(p,i,l),e+a(p,i,l)]})),r?_.push({op:"bcurveTo",data:[g+t+(s-t)*f+w(),m+e+(n-e)*f+w(),g+t+2*(s-t)*f+w(),m+e+2*(n-e)*f+w(),s+w(),n+w()]}):_.push({op:"bcurveTo",data:[g+t+(s-t)*f+v(),m+e+(n-e)*f+v(),g+t+2*(s-t)*f+v(),m+e+2*(n-e)*f+v(),s+v(),n+v()]}),_}function l(t,e,s){const n=t.length,i=[];if(n>3){const o=[],h=1-s.curveTightness;i.push({op:"move",data:[t[1][0],t[1][1]]});for(let e=1;e+2<n;e++){const s=t[e];o[0]=[s[0],s[1]],o[1]=[s[0]+(h*t[e+1][0]-h*t[e-1][0])/6,s[1]+(h*t[e+1][1]-h*t[e-1][1])/6],o[2]=[t[e+1][0]+(h*t[e][0]-h*t[e+2][0])/6,t[e+1][1]+(h*t[e][1]-h*t[e+2][1])/6],o[3]=[t[e+1][0],t[e+1][1]],i.push({op:"bcurveTo",data:[o[1][0],o[1][1],o[2][0],o[2][1],o[3][0],o[3][1]]})}if(e&&2===e.length){const t=s.maxRandomnessOffset;i.push({op:"lineTo",data:[e[0]+a(t,s),e[1]+a(t,s)]})}}else 3===n?(i.push({op:"move",data:[t[1][0],t[1][1]]}),i.push({op:"bcurveTo",data:[t[1][0],t[1][1],t[2][0],t[2][1],t[2][0],t[2][1]]})):2===n&&i.push(...c(t[0][0],t[0][1],t[1][0],t[1][1],s));return i}function p(t,e,s,n,i,o,h,r){const c=[],u=[],l=a(.5,r)-Math.PI/2;u.push([a(o,r)+e+.9*n*Math.cos(l-t),a(o,r)+s+.9*i*Math.sin(l-t)]);for(let h=l;h<2*Math.PI+l-.01;h+=t){const t=[a(o,r)+e+n*Math.cos(h),a(o,r)+s+i*Math.sin(h)];c.push(t),u.push(t)}return u.push([a(o,r)+e+n*Math.cos(l+2*Math.PI+.5*h),a(o,r)+s+i*Math.sin(l+2*Math.PI+.5*h)]),u.push([a(o,r)+e+.98*n*Math.cos(l+h),a(o,r)+s+.98*i*Math.sin(l+h)]),u.push([a(o,r)+e+.9*n*Math.cos(l+.5*h),a(o,r)+s+.9*i*Math.sin(l+.5*h)]),[u,c]}const d={maxRandomnessOffset:2,roughness:1.5,bowing:1,stroke:"#000",strokeWidth:1.5,curveTightness:0,curveFitting:.95,curveStepCount:9,fillStyle:"hachure",fillWeight:-1,hachureAngle:-41,hachureGap:-1,dashOffset:-1,dashGap:-1,zigzagOffset:-1,seed:0,combineNestedSvgPaths:!1,disableMultiStroke:!1,disableMultiStrokeFill:!1},f=JSON.parse(JSON.stringify(d));f.disableMultiStroke=!0;const g=JSON.parse(JSON.stringify(d));g.roughness=3,g.disableMultiStroke=!0;class m{constructor(t,e){this._state="unattached",this._resizing=!1,this._animationGroupDelay=0,this._resizeListener=()=>{this._resizing||(this._resizing=!0,setTimeout(()=>{if(this._resizing=!1,"showing"===this._state){const t=this.computeSize();t&&this.hasRectChanged(t)&&this.show()}},400))},this._e=t,this._config=e,this.attach()}get config(){return this._config}attach(){if("unattached"===this._state&&this._e.parentElement){!function(){if(!window.__rough_notation_keyframe_styles){const t=window.__rough_notation_keyframe_styles=document.createElement("style");t.textContent="\n    @keyframes rough-notation-dash {\n      to {\n        stroke-dashoffset: 0;\n      }\n    }\n    ",document.head.appendChild(t)}}();const e=this._svg=document.createElementNS(t,"svg"),s=e.style;s.position="absolute",s.top="0",s.left="0",s.overflow="visible",s.pointerEvents="none",s.width="100px",s.height="100px";const n="highlight"===this._config.type;if(this._e.insertAdjacentElement(n?"beforebegin":"afterend",e),this._state="not-showing",n){const t=window.getComputedStyle(this._e).position;(!t||"static"===t)&&(this._e.style.position="relative")}this.attachListeners()}}detachListeners(){window.removeEventListener("resize",this._resizeListener),this._resizeObserver&&this._resizeObserver.unobserve(this._e)}attachListeners(){this.detachListeners(),window.addEventListener("resize",this._resizeListener,{passive:!0}),!this._resizeObserver&&"ResizeObserver"in window&&(this._resizeObserver=new window.ResizeObserver(t=>{for(const e of t){let t=!0;if(e.contentRect){const s=this.computeSizeWithBounds(e.contentRect);s&&!this.hasRectChanged(s)&&(t=!1)}t&&this._resizeListener()}})),this._resizeObserver&&this._resizeObserver.observe(this._e)}sameInteger(t,e){return Math.round(t)===Math.round(e)}hasRectChanged(t){return!this._lastSize||!t||!(this.sameInteger(t.x,this._lastSize.x)&&this.sameInteger(t.y,this._lastSize.y)&&this.sameInteger(t.w,this._lastSize.w)&&this.sameInteger(t.h,this._lastSize.h))}isShowing(){return"not-showing"!==this._state}show(){switch(this._state){case"unattached":break;case"showing":this.hide(),this.show();break;case"not-showing":this.attach(),this._svg&&this.render(this._svg)}}hide(){if(this._svg)for(;this._svg.lastChild;)this._svg.removeChild(this._svg.lastChild);this._state="not-showing"}remove(){this._svg&&this._svg.parentElement&&this._svg.parentElement.removeChild(this._svg),this._svg=void 0,this._state="unattached",this.detachListeners()}render(e){const n=this.computeSize();n&&(!function(e,n,h,r){const a=[];let c=h.strokeWidth||2;const u=0===h.padding?0:h.padding||5,l=void 0===h.animate||!!h.animate;switch(h.type){case"underline":{const t=n.y+n.h+u;a.push(s(n.x,t,n.x+n.w,t,f)),a.push(s(n.x+n.w,t,n.x,t,f));break}case"strike-through":{const t=n.y+n.h/2;a.push(s(n.x,t,n.x+n.w,t,f)),a.push(s(n.x+n.w,t,n.x,t,f));break}case"box":{const t=n.x-u,e=n.y-u,s=n.w+2*u,o=n.h+2*u;a.push(i(t,e,s,o,f)),a.push(i(t,e,s,o,f));break}case"crossed-off":{const t=n.x,e=n.y,i=t+n.w,o=e+n.h;a.push(s(t,e,i,o,f)),a.push(s(i,o,t,e,f)),a.push(s(i,e,t,o,f)),a.push(s(t,o,i,e,f));break}case"circle":{const t=2*u,e=n.w+2*t,s=n.h+2*t,i=n.x-t+e/2,h=n.y-t+s/2;a.push(o(i,h,e,s,d));break}case"highlight":{c=.95*n.h;const t=n.y+n.h/2;a.push(s(n.x,t,n.x+n.w,t,g)),a.push(s(n.x+n.w,t,n.x,t,g));break}}if(a.length){const s=function(t){const e=[];for(const s of t){let t="";for(const n of s.ops){const s=n.data;switch(n.op){case"move":t.trim()&&e.push(t.trim()),t=`M${s[0]} ${s[1]} `;break;case"bcurveTo":t+=`C${s[0]} ${s[1]}, ${s[2]} ${s[3]}, ${s[4]} ${s[5]} `;break;case"lineTo":t+=`L${s[0]} ${s[1]} `}}t.trim()&&e.push(t.trim())}return e}(a),n=[],i=[];let o=0;const u=0===h.animationDuration?0:h.animationDuration||800,p=(0===h.animationDelay?0:h.animationDelay||0)+(r||0);for(const r of s){const s=document.createElementNS(t,"path");if(s.setAttribute("d",r),s.setAttribute("fill","none"),s.setAttribute("stroke",h.color||"currentColor"),s.setAttribute("stroke-width",""+c),l){const t=s.getTotalLength();n.push(t),o+=t}e.appendChild(s),i.push(s)}if(l){let t=0;for(let e=0;e<i.length;e++){const s=i[e],h=n[e],r=o?u*(h/o):0,a=p+t,c=s.style;c.strokeDashoffset=""+h,c.strokeDasharray=""+h,c.animation=`rough-notation-dash ${r}ms ease-out ${a}ms forwards`,t+=r}}}}(e,n,this._config,this._animationGroupDelay),this._lastSize=n,this._state="showing")}computeSize(){return this.computeSizeWithBounds(this._e.getBoundingClientRect())}computeSizeWithBounds(t){if(this._svg){const e=this._svg.getBoundingClientRect(),s=t;return{x:(s.x||s.left)-(e.x||e.left),y:(s.y||s.top)-(e.y||e.top),w:s.width,h:s.height}}return null}}exports.annotate=function(t,e){return new m(t,e)},exports.annotationGroup=function(t){let e=0;for(const s of t){const t=s;t._animationGroupDelay=e;e+=0===t.config.animationDuration?0:t.config.animationDuration||800}const s=[...t];return{show(){for(const t of s)t.show()},hide(){for(const t of s)t.hide()}}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const t="http://www.w3.org/2000/svg";class e{constructor(t){this.seed=t}next(){return this.seed?(2**31-1&(this.seed=Math.imul(48271,this.seed)))/2**31:Math.random()}}function s(t,e,s,n,i){return{type:"path",ops:c(t,e,s,n,i)}}function n(t,e){return function(t,e,n){const i=(t||[]).length;if(i>2){const s=[];for(let e=0;e<i-1;e++)s.push(...c(t[e][0],t[e][1],t[e+1][0],t[e+1][1],n));return e&&s.push(...c(t[i-1][0],t[i-1][1],t[0][0],t[0][1],n)),{type:"path",ops:s}}return 2===i?s(t[0][0],t[0][1],t[1][0],t[1][1],n):{type:"path",ops:[]}}(t,!0,e)}function i(t,e,s,i,o){return n([[t,e],[t+s,e],[t+s,e+i],[t,e+i]],o)}function o(t,e,s,n,i){return function(t,e,s,n){const[i,o]=p(n.increment,t,e,n.rx,n.ry,1,n.increment*h(.1,h(.4,1,s),s),s);let r=l(i,null,s);if(!s.disableMultiStroke){const[i]=p(n.increment,t,e,n.rx,n.ry,1.5,0,s),o=l(i,null,s);r=r.concat(o)}return{estimatedPoints:o,opset:{type:"path",ops:r}}}(t,e,i,function(t,e,s){const n=Math.sqrt(2*Math.PI*Math.sqrt((Math.pow(t/2,2)+Math.pow(e/2,2))/2)),i=Math.max(s.curveStepCount,s.curveStepCount/Math.sqrt(200)*n),o=2*Math.PI/i;let r=Math.abs(t/2),h=Math.abs(e/2);const c=1-s.curveFitting;return r+=a(r*c,s),h+=a(h*c,s),{increment:o,rx:r,ry:h}}(s,n,i)).opset}function r(t){return t.randomizer||(t.randomizer=new e(t.seed||0)),t.randomizer.next()}function h(t,e,s,n=1){return s.roughness*n*(r(s)*(e-t)+t)}function a(t,e,s=1){return h(-t,t,e,s)}function c(t,e,s,n,i,o=!1){const r=o?i.disableMultiStrokeFill:i.disableMultiStroke,h=u(t,e,s,n,i,!0,!1);if(r)return h;const a=u(t,e,s,n,i,!0,!0);return h.concat(a)}function u(t,e,s,n,i,o,h){const c=Math.pow(t-s,2)+Math.pow(e-n,2),u=Math.sqrt(c);let l=1;l=u<200?1:u>500?.4:-.0016668*u+1.233334;let p=i.maxRandomnessOffset||0;p*p*100>c&&(p=u/10);const f=p/2,d=.2+.2*r(i);let g=i.bowing*i.maxRandomnessOffset*(n-e)/200,m=i.bowing*i.maxRandomnessOffset*(t-s)/200;g=a(g,i,l),m=a(m,i,l);const _=[],w=()=>a(f,i,l),v=()=>a(p,i,l);return o&&(h?_.push({op:"move",data:[t+w(),e+w()]}):_.push({op:"move",data:[t+a(p,i,l),e+a(p,i,l)]})),h?_.push({op:"bcurveTo",data:[g+t+(s-t)*d+w(),m+e+(n-e)*d+w(),g+t+2*(s-t)*d+w(),m+e+2*(n-e)*d+w(),s+w(),n+w()]}):_.push({op:"bcurveTo",data:[g+t+(s-t)*d+v(),m+e+(n-e)*d+v(),g+t+2*(s-t)*d+v(),m+e+2*(n-e)*d+v(),s+v(),n+v()]}),_}function l(t,e,s){const n=t.length,i=[];if(n>3){const o=[],r=1-s.curveTightness;i.push({op:"move",data:[t[1][0],t[1][1]]});for(let e=1;e+2<n;e++){const s=t[e];o[0]=[s[0],s[1]],o[1]=[s[0]+(r*t[e+1][0]-r*t[e-1][0])/6,s[1]+(r*t[e+1][1]-r*t[e-1][1])/6],o[2]=[t[e+1][0]+(r*t[e][0]-r*t[e+2][0])/6,t[e+1][1]+(r*t[e][1]-r*t[e+2][1])/6],o[3]=[t[e+1][0],t[e+1][1]],i.push({op:"bcurveTo",data:[o[1][0],o[1][1],o[2][0],o[2][1],o[3][0],o[3][1]]})}if(e&&2===e.length){const t=s.maxRandomnessOffset;i.push({op:"lineTo",data:[e[0]+a(t,s),e[1]+a(t,s)]})}}else 3===n?(i.push({op:"move",data:[t[1][0],t[1][1]]}),i.push({op:"bcurveTo",data:[t[1][0],t[1][1],t[2][0],t[2][1],t[2][0],t[2][1]]})):2===n&&i.push(...c(t[0][0],t[0][1],t[1][0],t[1][1],s));return i}function p(t,e,s,n,i,o,r,h){const c=[],u=[],l=a(.5,h)-Math.PI/2;u.push([a(o,h)+e+.9*n*Math.cos(l-t),a(o,h)+s+.9*i*Math.sin(l-t)]);for(let r=l;r<2*Math.PI+l-.01;r+=t){const t=[a(o,h)+e+n*Math.cos(r),a(o,h)+s+i*Math.sin(r)];c.push(t),u.push(t)}return u.push([a(o,h)+e+n*Math.cos(l+2*Math.PI+.5*r),a(o,h)+s+i*Math.sin(l+2*Math.PI+.5*r)]),u.push([a(o,h)+e+.98*n*Math.cos(l+r),a(o,h)+s+.98*i*Math.sin(l+r)]),u.push([a(o,h)+e+.9*n*Math.cos(l+.5*r),a(o,h)+s+.9*i*Math.sin(l+.5*r)]),[u,c]}const f={maxRandomnessOffset:2,roughness:1.5,bowing:1,stroke:"#000",strokeWidth:1.5,curveTightness:0,curveFitting:.95,curveStepCount:9,fillStyle:"hachure",fillWeight:-1,hachureAngle:-41,hachureGap:-1,dashOffset:-1,dashGap:-1,zigzagOffset:-1,seed:0,combineNestedSvgPaths:!1,disableMultiStroke:!1,disableMultiStrokeFill:!1},d=JSON.parse(JSON.stringify(f));d.disableMultiStroke=!0;const g=JSON.parse(JSON.stringify(f));g.roughness=3,g.disableMultiStroke=!0;class m{constructor(t,e){this._state="unattached",this._resizing=!1,this._animationGroupDelay=0,this._resizeListener=()=>{this._resizing||(this._resizing=!0,setTimeout(()=>{if(this._resizing=!1,"showing"===this._state){const t=this.computeSize();t&&this.hasRectChanged(t)&&this.show()}},400))},this._e=t,this._config=e,this.attach()}get config(){return this._config}attach(){if("unattached"===this._state&&this._e.parentElement){!function(){if(!window.__rough_notation_keyframe_styles){const t=window.__rough_notation_keyframe_styles=document.createElement("style");t.textContent="\n    @keyframes rough-notation-dash {\n      to {\n        stroke-dashoffset: 0;\n      }\n    }\n    ",document.head.appendChild(t)}}();const e=this._svg=document.createElementNS(t,"svg"),s=e.style;s.position="absolute",s.top="0",s.left="0",s.overflow="visible",s.pointerEvents="none",s.width="100px",s.height="100px";const n="highlight"===this._config.type;if(this._e.insertAdjacentElement(n?"beforebegin":"afterend",e),this._state="not-showing",n){const t=window.getComputedStyle(this._e).position;(!t||"static"===t)&&(this._e.style.position="relative")}this.attachListeners()}}detachListeners(){window.removeEventListener("resize",this._resizeListener),this._resizeObserver&&this._resizeObserver.unobserve(this._e)}attachListeners(){this.detachListeners(),window.addEventListener("resize",this._resizeListener,{passive:!0}),!this._resizeObserver&&"ResizeObserver"in window&&(this._resizeObserver=new window.ResizeObserver(t=>{for(const e of t){let t=!0;if(e.contentRect){const s=this.computeSizeWithBounds(e.contentRect);s&&!this.hasRectChanged(s)&&(t=!1)}t&&this._resizeListener()}})),this._resizeObserver&&this._resizeObserver.observe(this._e)}sameInteger(t,e){return Math.round(t)===Math.round(e)}hasRectChanged(t){return!this._lastSize||!t||!(this.sameInteger(t.x,this._lastSize.x)&&this.sameInteger(t.y,this._lastSize.y)&&this.sameInteger(t.w,this._lastSize.w)&&this.sameInteger(t.h,this._lastSize.h))}isShowing(){return"not-showing"!==this._state}show(){switch(this._state){case"unattached":break;case"showing":this.hide(),this.show();break;case"not-showing":this.attach(),this._svg&&this.render(this._svg)}}hide(){if(this._svg)for(;this._svg.lastChild;)this._svg.removeChild(this._svg.lastChild);this._state="not-showing"}remove(){this._svg&&this._svg.parentElement&&this._svg.parentElement.removeChild(this._svg),this._svg=void 0,this._state="unattached",this.detachListeners()}render(e){const n=this.computeSize();n&&(!function(e,n,r,h){const a=[];let c=r.strokeWidth||2;const u=0===r.padding?0:r.padding||5,l=void 0===r.animate||!!r.animate,p=r.iterations||2;switch(r.type){case"underline":{const t=n.y+n.h+u;for(let e=0;e<p;e++)e%2?a.push(s(n.x+n.w,t,n.x,t,d)):a.push(s(n.x,t,n.x+n.w,t,d));break}case"strike-through":{const t=n.y+n.h/2;for(let e=0;e<p;e++)e%2?a.push(s(n.x+n.w,t,n.x,t,d)):a.push(s(n.x,t,n.x+n.w,t,d));break}case"box":{const t=n.x-u,e=n.y-u,s=n.w+2*u,o=n.h+2*u;for(let n=0;n<p;n++)a.push(i(t,e,s,o,d));break}case"crossed-off":{const t=n.x,e=n.y,i=t+n.w,o=e+n.h;for(let n=0;n<p;n++)n%2?a.push(s(i,o,t,e,d)):a.push(s(t,e,i,o,d));for(let n=0;n<p;n++)n%2?a.push(s(t,o,i,e,d)):a.push(s(i,e,t,o,d));break}case"circle":{const t=2*u,e=n.w+2*t,s=n.h+2*t,i=n.x-t+e/2,r=n.y-t+s/2,h=Math.floor(p/2),c=p-2*h;for(let t=0;t<h;t++)a.push(o(i,r,e,s,f));for(let t=0;t<c;t++)a.push(o(i,r,e,s,d));break}case"highlight":{c=.95*n.h;const t=n.y+n.h/2;for(let e=0;e<p;e++)e%2?a.push(s(n.x+n.w,t,n.x,t,g)):a.push(s(n.x,t,n.x+n.w,t,g));break}}if(a.length){const s=function(t){const e=[];for(const s of t){let t="";for(const n of s.ops){const s=n.data;switch(n.op){case"move":t.trim()&&e.push(t.trim()),t=`M${s[0]} ${s[1]} `;break;case"bcurveTo":t+=`C${s[0]} ${s[1]}, ${s[2]} ${s[3]}, ${s[4]} ${s[5]} `;break;case"lineTo":t+=`L${s[0]} ${s[1]} `}}t.trim()&&e.push(t.trim())}return e}(a),n=[],i=[];let o=0;const u=0===r.animationDuration?0:r.animationDuration||800,p=(0===r.animationDelay?0:r.animationDelay||0)+(h||0);for(const h of s){const s=document.createElementNS(t,"path");if(s.setAttribute("d",h),s.setAttribute("fill","none"),s.setAttribute("stroke",r.color||"currentColor"),s.setAttribute("stroke-width",""+c),l){const t=s.getTotalLength();n.push(t),o+=t}e.appendChild(s),i.push(s)}if(l){let t=0;for(let e=0;e<i.length;e++){const s=i[e],r=n[e],h=o?u*(r/o):0,a=p+t,c=s.style;c.strokeDashoffset=""+r,c.strokeDasharray=""+r,c.animation=`rough-notation-dash ${h}ms ease-out ${a}ms forwards`,t+=h}}}}(e,n,this._config,this._animationGroupDelay),this._lastSize=n,this._state="showing")}computeSize(){return this.computeSizeWithBounds(this._e.getBoundingClientRect())}computeSizeWithBounds(t){if(this._svg){const e=this._svg.getBoundingClientRect(),s=t;return{x:(s.x||s.left)-(e.x||e.left),y:(s.y||s.top)-(e.y||e.top),w:s.width,h:s.height}}return null}}exports.annotate=function(t,e){return new m(t,e)},exports.annotationGroup=function(t){let e=0;for(const s of t){const t=s;t._animationGroupDelay=e;e+=0===t.config.animationDuration?0:t.config.animationDuration||800}const s=[...t];return{show(){for(const t of s)t.show()},hide(){for(const t of s)t.hide()}}};

lib/rough-notation.esm.js

@@ -1,1 +0,1 @@
-const t="http://www.w3.org/2000/svg";class e{constructor(t){this.seed=t}next(){return this.seed?(2**31-1&(this.seed=Math.imul(48271,this.seed)))/2**31:Math.random()}}function s(t,e,s,n,i){return{type:"path",ops:c(t,e,s,n,i)}}function n(t,e){return function(t,e,n){const i=(t||[]).length;if(i>2){const s=[];for(let e=0;e<i-1;e++)s.push(...c(t[e][0],t[e][1],t[e+1][0],t[e+1][1],n));return e&&s.push(...c(t[i-1][0],t[i-1][1],t[0][0],t[0][1],n)),{type:"path",ops:s}}return 2===i?s(t[0][0],t[0][1],t[1][0],t[1][1],n):{type:"path",ops:[]}}(t,!0,e)}function i(t,e,s,i,o){return n([[t,e],[t+s,e],[t+s,e+i],[t,e+i]],o)}function o(t,e,s,n,i){return function(t,e,s,n){const[i,o]=p(n.increment,t,e,n.rx,n.ry,1,n.increment*r(.1,r(.4,1,s),s),s);let h=l(i,null,s);if(!s.disableMultiStroke){const[i]=p(n.increment,t,e,n.rx,n.ry,1.5,0,s),o=l(i,null,s);h=h.concat(o)}return{estimatedPoints:o,opset:{type:"path",ops:h}}}(t,e,i,function(t,e,s){const n=Math.sqrt(2*Math.PI*Math.sqrt((Math.pow(t/2,2)+Math.pow(e/2,2))/2)),i=Math.max(s.curveStepCount,s.curveStepCount/Math.sqrt(200)*n),o=2*Math.PI/i;let h=Math.abs(t/2),r=Math.abs(e/2);const c=1-s.curveFitting;return h+=a(h*c,s),r+=a(r*c,s),{increment:o,rx:h,ry:r}}(s,n,i)).opset}function h(t){return t.randomizer||(t.randomizer=new e(t.seed||0)),t.randomizer.next()}function r(t,e,s,n=1){return s.roughness*n*(h(s)*(e-t)+t)}function a(t,e,s=1){return r(-t,t,e,s)}function c(t,e,s,n,i,o=!1){const h=o?i.disableMultiStrokeFill:i.disableMultiStroke,r=u(t,e,s,n,i,!0,!1);if(h)return r;const a=u(t,e,s,n,i,!0,!0);return r.concat(a)}function u(t,e,s,n,i,o,r){const c=Math.pow(t-s,2)+Math.pow(e-n,2),u=Math.sqrt(c);let l=1;l=u<200?1:u>500?.4:-.0016668*u+1.233334;let p=i.maxRandomnessOffset||0;p*p*100>c&&(p=u/10);const d=p/2,f=.2+.2*h(i);let g=i.bowing*i.maxRandomnessOffset*(n-e)/200,m=i.bowing*i.maxRandomnessOffset*(t-s)/200;g=a(g,i,l),m=a(m,i,l);const _=[],w=()=>a(d,i,l),v=()=>a(p,i,l);return o&&(r?_.push({op:"move",data:[t+w(),e+w()]}):_.push({op:"move",data:[t+a(p,i,l),e+a(p,i,l)]})),r?_.push({op:"bcurveTo",data:[g+t+(s-t)*f+w(),m+e+(n-e)*f+w(),g+t+2*(s-t)*f+w(),m+e+2*(n-e)*f+w(),s+w(),n+w()]}):_.push({op:"bcurveTo",data:[g+t+(s-t)*f+v(),m+e+(n-e)*f+v(),g+t+2*(s-t)*f+v(),m+e+2*(n-e)*f+v(),s+v(),n+v()]}),_}function l(t,e,s){const n=t.length,i=[];if(n>3){const o=[],h=1-s.curveTightness;i.push({op:"move",data:[t[1][0],t[1][1]]});for(let e=1;e+2<n;e++){const s=t[e];o[0]=[s[0],s[1]],o[1]=[s[0]+(h*t[e+1][0]-h*t[e-1][0])/6,s[1]+(h*t[e+1][1]-h*t[e-1][1])/6],o[2]=[t[e+1][0]+(h*t[e][0]-h*t[e+2][0])/6,t[e+1][1]+(h*t[e][1]-h*t[e+2][1])/6],o[3]=[t[e+1][0],t[e+1][1]],i.push({op:"bcurveTo",data:[o[1][0],o[1][1],o[2][0],o[2][1],o[3][0],o[3][1]]})}if(e&&2===e.length){const t=s.maxRandomnessOffset;i.push({op:"lineTo",data:[e[0]+a(t,s),e[1]+a(t,s)]})}}else 3===n?(i.push({op:"move",data:[t[1][0],t[1][1]]}),i.push({op:"bcurveTo",data:[t[1][0],t[1][1],t[2][0],t[2][1],t[2][0],t[2][1]]})):2===n&&i.push(...c(t[0][0],t[0][1],t[1][0],t[1][1],s));return i}function p(t,e,s,n,i,o,h,r){const c=[],u=[],l=a(.5,r)-Math.PI/2;u.push([a(o,r)+e+.9*n*Math.cos(l-t),a(o,r)+s+.9*i*Math.sin(l-t)]);for(let h=l;h<2*Math.PI+l-.01;h+=t){const t=[a(o,r)+e+n*Math.cos(h),a(o,r)+s+i*Math.sin(h)];c.push(t),u.push(t)}return u.push([a(o,r)+e+n*Math.cos(l+2*Math.PI+.5*h),a(o,r)+s+i*Math.sin(l+2*Math.PI+.5*h)]),u.push([a(o,r)+e+.98*n*Math.cos(l+h),a(o,r)+s+.98*i*Math.sin(l+h)]),u.push([a(o,r)+e+.9*n*Math.cos(l+.5*h),a(o,r)+s+.9*i*Math.sin(l+.5*h)]),[u,c]}const d={maxRandomnessOffset:2,roughness:1.5,bowing:1,stroke:"#000",strokeWidth:1.5,curveTightness:0,curveFitting:.95,curveStepCount:9,fillStyle:"hachure",fillWeight:-1,hachureAngle:-41,hachureGap:-1,dashOffset:-1,dashGap:-1,zigzagOffset:-1,seed:0,combineNestedSvgPaths:!1,disableMultiStroke:!1,disableMultiStrokeFill:!1},f=JSON.parse(JSON.stringify(d));f.disableMultiStroke=!0;const g=JSON.parse(JSON.stringify(d));g.roughness=3,g.disableMultiStroke=!0;class m{constructor(t,e){this._state="unattached",this._resizing=!1,this._animationGroupDelay=0,this._resizeListener=()=>{this._resizing||(this._resizing=!0,setTimeout(()=>{if(this._resizing=!1,"showing"===this._state){const t=this.computeSize();t&&this.hasRectChanged(t)&&this.show()}},400))},this._e=t,this._config=e,this.attach()}get config(){return this._config}attach(){if("unattached"===this._state&&this._e.parentElement){!function(){if(!window.__rough_notation_keyframe_styles){const t=window.__rough_notation_keyframe_styles=document.createElement("style");t.textContent="\n    @keyframes rough-notation-dash {\n      to {\n        stroke-dashoffset: 0;\n      }\n    }\n    ",document.head.appendChild(t)}}();const e=this._svg=document.createElementNS(t,"svg"),s=e.style;s.position="absolute",s.top="0",s.left="0",s.overflow="visible",s.pointerEvents="none",s.width="100px",s.height="100px";const n="highlight"===this._config.type;if(this._e.insertAdjacentElement(n?"beforebegin":"afterend",e),this._state="not-showing",n){const t=window.getComputedStyle(this._e).position;(!t||"static"===t)&&(this._e.style.position="relative")}this.attachListeners()}}detachListeners(){window.removeEventListener("resize",this._resizeListener),this._resizeObserver&&this._resizeObserver.unobserve(this._e)}attachListeners(){this.detachListeners(),window.addEventListener("resize",this._resizeListener,{passive:!0}),!this._resizeObserver&&"ResizeObserver"in window&&(this._resizeObserver=new window.ResizeObserver(t=>{for(const e of t){let t=!0;if(e.contentRect){const s=this.computeSizeWithBounds(e.contentRect);s&&!this.hasRectChanged(s)&&(t=!1)}t&&this._resizeListener()}})),this._resizeObserver&&this._resizeObserver.observe(this._e)}sameInteger(t,e){return Math.round(t)===Math.round(e)}hasRectChanged(t){return!this._lastSize||!t||!(this.sameInteger(t.x,this._lastSize.x)&&this.sameInteger(t.y,this._lastSize.y)&&this.sameInteger(t.w,this._lastSize.w)&&this.sameInteger(t.h,this._lastSize.h))}isShowing(){return"not-showing"!==this._state}show(){switch(this._state){case"unattached":break;case"showing":this.hide(),this.show();break;case"not-showing":this.attach(),this._svg&&this.render(this._svg)}}hide(){if(this._svg)for(;this._svg.lastChild;)this._svg.removeChild(this._svg.lastChild);this._state="not-showing"}remove(){this._svg&&this._svg.parentElement&&this._svg.parentElement.removeChild(this._svg),this._svg=void 0,this._state="unattached",this.detachListeners()}render(e){const n=this.computeSize();n&&(!function(e,n,h,r){const a=[];let c=h.strokeWidth||2;const u=0===h.padding?0:h.padding||5,l=void 0===h.animate||!!h.animate;switch(h.type){case"underline":{const t=n.y+n.h+u;a.push(s(n.x,t,n.x+n.w,t,f)),a.push(s(n.x+n.w,t,n.x,t,f));break}case"strike-through":{const t=n.y+n.h/2;a.push(s(n.x,t,n.x+n.w,t,f)),a.push(s(n.x+n.w,t,n.x,t,f));break}case"box":{const t=n.x-u,e=n.y-u,s=n.w+2*u,o=n.h+2*u;a.push(i(t,e,s,o,f)),a.push(i(t,e,s,o,f));break}case"crossed-off":{const t=n.x,e=n.y,i=t+n.w,o=e+n.h;a.push(s(t,e,i,o,f)),a.push(s(i,o,t,e,f)),a.push(s(i,e,t,o,f)),a.push(s(t,o,i,e,f));break}case"circle":{const t=2*u,e=n.w+2*t,s=n.h+2*t,i=n.x-t+e/2,h=n.y-t+s/2;a.push(o(i,h,e,s,d));break}case"highlight":{c=.95*n.h;const t=n.y+n.h/2;a.push(s(n.x,t,n.x+n.w,t,g)),a.push(s(n.x+n.w,t,n.x,t,g));break}}if(a.length){const s=function(t){const e=[];for(const s of t){let t="";for(const n of s.ops){const s=n.data;switch(n.op){case"move":t.trim()&&e.push(t.trim()),t=`M${s[0]} ${s[1]} `;break;case"bcurveTo":t+=`C${s[0]} ${s[1]}, ${s[2]} ${s[3]}, ${s[4]} ${s[5]} `;break;case"lineTo":t+=`L${s[0]} ${s[1]} `}}t.trim()&&e.push(t.trim())}return e}(a),n=[],i=[];let o=0;const u=0===h.animationDuration?0:h.animationDuration||800,p=(0===h.animationDelay?0:h.animationDelay||0)+(r||0);for(const r of s){const s=document.createElementNS(t,"path");if(s.setAttribute("d",r),s.setAttribute("fill","none"),s.setAttribute("stroke",h.color||"currentColor"),s.setAttribute("stroke-width",""+c),l){const t=s.getTotalLength();n.push(t),o+=t}e.appendChild(s),i.push(s)}if(l){let t=0;for(let e=0;e<i.length;e++){const s=i[e],h=n[e],r=o?u*(h/o):0,a=p+t,c=s.style;c.strokeDashoffset=""+h,c.strokeDasharray=""+h,c.animation=`rough-notation-dash ${r}ms ease-out ${a}ms forwards`,t+=r}}}}(e,n,this._config,this._animationGroupDelay),this._lastSize=n,this._state="showing")}computeSize(){return this.computeSizeWithBounds(this._e.getBoundingClientRect())}computeSizeWithBounds(t){if(this._svg){const e=this._svg.getBoundingClientRect(),s=t;return{x:(s.x||s.left)-(e.x||e.left),y:(s.y||s.top)-(e.y||e.top),w:s.width,h:s.height}}return null}}function _(t,e){return new m(t,e)}function w(t){let e=0;for(const s of t){const t=s;t._animationGroupDelay=e;e+=0===t.config.animationDuration?0:t.config.animationDuration||800}const s=[...t];return{show(){for(const t of s)t.show()},hide(){for(const t of s)t.hide()}}}export{_ as annotate,w as annotationGroup};
+const t="http://www.w3.org/2000/svg";class e{constructor(t){this.seed=t}next(){return this.seed?(2**31-1&(this.seed=Math.imul(48271,this.seed)))/2**31:Math.random()}}function s(t,e,s,n,i){return{type:"path",ops:c(t,e,s,n,i)}}function n(t,e){return function(t,e,n){const i=(t||[]).length;if(i>2){const s=[];for(let e=0;e<i-1;e++)s.push(...c(t[e][0],t[e][1],t[e+1][0],t[e+1][1],n));return e&&s.push(...c(t[i-1][0],t[i-1][1],t[0][0],t[0][1],n)),{type:"path",ops:s}}return 2===i?s(t[0][0],t[0][1],t[1][0],t[1][1],n):{type:"path",ops:[]}}(t,!0,e)}function i(t,e,s,i,o){return n([[t,e],[t+s,e],[t+s,e+i],[t,e+i]],o)}function o(t,e,s,n,i){return function(t,e,s,n){const[i,o]=p(n.increment,t,e,n.rx,n.ry,1,n.increment*r(.1,r(.4,1,s),s),s);let h=l(i,null,s);if(!s.disableMultiStroke){const[i]=p(n.increment,t,e,n.rx,n.ry,1.5,0,s),o=l(i,null,s);h=h.concat(o)}return{estimatedPoints:o,opset:{type:"path",ops:h}}}(t,e,i,function(t,e,s){const n=Math.sqrt(2*Math.PI*Math.sqrt((Math.pow(t/2,2)+Math.pow(e/2,2))/2)),i=Math.max(s.curveStepCount,s.curveStepCount/Math.sqrt(200)*n),o=2*Math.PI/i;let h=Math.abs(t/2),r=Math.abs(e/2);const c=1-s.curveFitting;return h+=a(h*c,s),r+=a(r*c,s),{increment:o,rx:h,ry:r}}(s,n,i)).opset}function h(t){return t.randomizer||(t.randomizer=new e(t.seed||0)),t.randomizer.next()}function r(t,e,s,n=1){return s.roughness*n*(h(s)*(e-t)+t)}function a(t,e,s=1){return r(-t,t,e,s)}function c(t,e,s,n,i,o=!1){const h=o?i.disableMultiStrokeFill:i.disableMultiStroke,r=u(t,e,s,n,i,!0,!1);if(h)return r;const a=u(t,e,s,n,i,!0,!0);return r.concat(a)}function u(t,e,s,n,i,o,r){const c=Math.pow(t-s,2)+Math.pow(e-n,2),u=Math.sqrt(c);let l=1;l=u<200?1:u>500?.4:-.0016668*u+1.233334;let p=i.maxRandomnessOffset||0;p*p*100>c&&(p=u/10);const f=p/2,d=.2+.2*h(i);let g=i.bowing*i.maxRandomnessOffset*(n-e)/200,m=i.bowing*i.maxRandomnessOffset*(t-s)/200;g=a(g,i,l),m=a(m,i,l);const _=[],w=()=>a(f,i,l),v=()=>a(p,i,l);return o&&(r?_.push({op:"move",data:[t+w(),e+w()]}):_.push({op:"move",data:[t+a(p,i,l),e+a(p,i,l)]})),r?_.push({op:"bcurveTo",data:[g+t+(s-t)*d+w(),m+e+(n-e)*d+w(),g+t+2*(s-t)*d+w(),m+e+2*(n-e)*d+w(),s+w(),n+w()]}):_.push({op:"bcurveTo",data:[g+t+(s-t)*d+v(),m+e+(n-e)*d+v(),g+t+2*(s-t)*d+v(),m+e+2*(n-e)*d+v(),s+v(),n+v()]}),_}function l(t,e,s){const n=t.length,i=[];if(n>3){const o=[],h=1-s.curveTightness;i.push({op:"move",data:[t[1][0],t[1][1]]});for(let e=1;e+2<n;e++){const s=t[e];o[0]=[s[0],s[1]],o[1]=[s[0]+(h*t[e+1][0]-h*t[e-1][0])/6,s[1]+(h*t[e+1][1]-h*t[e-1][1])/6],o[2]=[t[e+1][0]+(h*t[e][0]-h*t[e+2][0])/6,t[e+1][1]+(h*t[e][1]-h*t[e+2][1])/6],o[3]=[t[e+1][0],t[e+1][1]],i.push({op:"bcurveTo",data:[o[1][0],o[1][1],o[2][0],o[2][1],o[3][0],o[3][1]]})}if(e&&2===e.length){const t=s.maxRandomnessOffset;i.push({op:"lineTo",data:[e[0]+a(t,s),e[1]+a(t,s)]})}}else 3===n?(i.push({op:"move",data:[t[1][0],t[1][1]]}),i.push({op:"bcurveTo",data:[t[1][0],t[1][1],t[2][0],t[2][1],t[2][0],t[2][1]]})):2===n&&i.push(...c(t[0][0],t[0][1],t[1][0],t[1][1],s));return i}function p(t,e,s,n,i,o,h,r){const c=[],u=[],l=a(.5,r)-Math.PI/2;u.push([a(o,r)+e+.9*n*Math.cos(l-t),a(o,r)+s+.9*i*Math.sin(l-t)]);for(let h=l;h<2*Math.PI+l-.01;h+=t){const t=[a(o,r)+e+n*Math.cos(h),a(o,r)+s+i*Math.sin(h)];c.push(t),u.push(t)}return u.push([a(o,r)+e+n*Math.cos(l+2*Math.PI+.5*h),a(o,r)+s+i*Math.sin(l+2*Math.PI+.5*h)]),u.push([a(o,r)+e+.98*n*Math.cos(l+h),a(o,r)+s+.98*i*Math.sin(l+h)]),u.push([a(o,r)+e+.9*n*Math.cos(l+.5*h),a(o,r)+s+.9*i*Math.sin(l+.5*h)]),[u,c]}const f={maxRandomnessOffset:2,roughness:1.5,bowing:1,stroke:"#000",strokeWidth:1.5,curveTightness:0,curveFitting:.95,curveStepCount:9,fillStyle:"hachure",fillWeight:-1,hachureAngle:-41,hachureGap:-1,dashOffset:-1,dashGap:-1,zigzagOffset:-1,seed:0,combineNestedSvgPaths:!1,disableMultiStroke:!1,disableMultiStrokeFill:!1},d=JSON.parse(JSON.stringify(f));d.disableMultiStroke=!0;const g=JSON.parse(JSON.stringify(f));g.roughness=3,g.disableMultiStroke=!0;class m{constructor(t,e){this._state="unattached",this._resizing=!1,this._animationGroupDelay=0,this._resizeListener=()=>{this._resizing||(this._resizing=!0,setTimeout(()=>{if(this._resizing=!1,"showing"===this._state){const t=this.computeSize();t&&this.hasRectChanged(t)&&this.show()}},400))},this._e=t,this._config=e,this.attach()}get config(){return this._config}attach(){if("unattached"===this._state&&this._e.parentElement){!function(){if(!window.__rough_notation_keyframe_styles){const t=window.__rough_notation_keyframe_styles=document.createElement("style");t.textContent="\n    @keyframes rough-notation-dash {\n      to {\n        stroke-dashoffset: 0;\n      }\n    }\n    ",document.head.appendChild(t)}}();const e=this._svg=document.createElementNS(t,"svg"),s=e.style;s.position="absolute",s.top="0",s.left="0",s.overflow="visible",s.pointerEvents="none",s.width="100px",s.height="100px";const n="highlight"===this._config.type;if(this._e.insertAdjacentElement(n?"beforebegin":"afterend",e),this._state="not-showing",n){const t=window.getComputedStyle(this._e).position;(!t||"static"===t)&&(this._e.style.position="relative")}this.attachListeners()}}detachListeners(){window.removeEventListener("resize",this._resizeListener),this._resizeObserver&&this._resizeObserver.unobserve(this._e)}attachListeners(){this.detachListeners(),window.addEventListener("resize",this._resizeListener,{passive:!0}),!this._resizeObserver&&"ResizeObserver"in window&&(this._resizeObserver=new window.ResizeObserver(t=>{for(const e of t){let t=!0;if(e.contentRect){const s=this.computeSizeWithBounds(e.contentRect);s&&!this.hasRectChanged(s)&&(t=!1)}t&&this._resizeListener()}})),this._resizeObserver&&this._resizeObserver.observe(this._e)}sameInteger(t,e){return Math.round(t)===Math.round(e)}hasRectChanged(t){return!this._lastSize||!t||!(this.sameInteger(t.x,this._lastSize.x)&&this.sameInteger(t.y,this._lastSize.y)&&this.sameInteger(t.w,this._lastSize.w)&&this.sameInteger(t.h,this._lastSize.h))}isShowing(){return"not-showing"!==this._state}show(){switch(this._state){case"unattached":break;case"showing":this.hide(),this.show();break;case"not-showing":this.attach(),this._svg&&this.render(this._svg)}}hide(){if(this._svg)for(;this._svg.lastChild;)this._svg.removeChild(this._svg.lastChild);this._state="not-showing"}remove(){this._svg&&this._svg.parentElement&&this._svg.parentElement.removeChild(this._svg),this._svg=void 0,this._state="unattached",this.detachListeners()}render(e){const n=this.computeSize();n&&(!function(e,n,h,r){const a=[];let c=h.strokeWidth||2;const u=0===h.padding?0:h.padding||5,l=void 0===h.animate||!!h.animate,p=h.iterations||2;switch(h.type){case"underline":{const t=n.y+n.h+u;for(let e=0;e<p;e++)e%2?a.push(s(n.x+n.w,t,n.x,t,d)):a.push(s(n.x,t,n.x+n.w,t,d));break}case"strike-through":{const t=n.y+n.h/2;for(let e=0;e<p;e++)e%2?a.push(s(n.x+n.w,t,n.x,t,d)):a.push(s(n.x,t,n.x+n.w,t,d));break}case"box":{const t=n.x-u,e=n.y-u,s=n.w+2*u,o=n.h+2*u;for(let n=0;n<p;n++)a.push(i(t,e,s,o,d));break}case"crossed-off":{const t=n.x,e=n.y,i=t+n.w,o=e+n.h;for(let n=0;n<p;n++)n%2?a.push(s(i,o,t,e,d)):a.push(s(t,e,i,o,d));for(let n=0;n<p;n++)n%2?a.push(s(t,o,i,e,d)):a.push(s(i,e,t,o,d));break}case"circle":{const t=2*u,e=n.w+2*t,s=n.h+2*t,i=n.x-t+e/2,h=n.y-t+s/2,r=Math.floor(p/2),c=p-2*r;for(let t=0;t<r;t++)a.push(o(i,h,e,s,f));for(let t=0;t<c;t++)a.push(o(i,h,e,s,d));break}case"highlight":{c=.95*n.h;const t=n.y+n.h/2;for(let e=0;e<p;e++)e%2?a.push(s(n.x+n.w,t,n.x,t,g)):a.push(s(n.x,t,n.x+n.w,t,g));break}}if(a.length){const s=function(t){const e=[];for(const s of t){let t="";for(const n of s.ops){const s=n.data;switch(n.op){case"move":t.trim()&&e.push(t.trim()),t=`M${s[0]} ${s[1]} `;break;case"bcurveTo":t+=`C${s[0]} ${s[1]}, ${s[2]} ${s[3]}, ${s[4]} ${s[5]} `;break;case"lineTo":t+=`L${s[0]} ${s[1]} `}}t.trim()&&e.push(t.trim())}return e}(a),n=[],i=[];let o=0;const u=0===h.animationDuration?0:h.animationDuration||800,p=(0===h.animationDelay?0:h.animationDelay||0)+(r||0);for(const r of s){const s=document.createElementNS(t,"path");if(s.setAttribute("d",r),s.setAttribute("fill","none"),s.setAttribute("stroke",h.color||"currentColor"),s.setAttribute("stroke-width",""+c),l){const t=s.getTotalLength();n.push(t),o+=t}e.appendChild(s),i.push(s)}if(l){let t=0;for(let e=0;e<i.length;e++){const s=i[e],h=n[e],r=o?u*(h/o):0,a=p+t,c=s.style;c.strokeDashoffset=""+h,c.strokeDasharray=""+h,c.animation=`rough-notation-dash ${r}ms ease-out ${a}ms forwards`,t+=r}}}}(e,n,this._config,this._animationGroupDelay),this._lastSize=n,this._state="showing")}computeSize(){return this.computeSizeWithBounds(this._e.getBoundingClientRect())}computeSizeWithBounds(t){if(this._svg){const e=this._svg.getBoundingClientRect(),s=t;return{x:(s.x||s.left)-(e.x||e.left),y:(s.y||s.top)-(e.y||e.top),w:s.width,h:s.height}}return null}}function _(t,e){return new m(t,e)}function w(t){let e=0;for(const s of t){const t=s;t._animationGroupDelay=e;e+=0===t.config.animationDuration?0:t.config.animationDuration||800}const s=[...t];return{show(){for(const t of s)t.show()},hide(){for(const t of s)t.hide()}}}export{_ as annotate,w as annotationGroup};

lib/rough-notation.iife.js

@@ -1,1 +0,1 @@
-var RoughNotation=function(t){"use strict";const e="http://www.w3.org/2000/svg";class s{constructor(t){this.seed=t}next(){return this.seed?(2**31-1&(this.seed=Math.imul(48271,this.seed)))/2**31:Math.random()}}function n(t,e,s,n,i){return{type:"path",ops:u(t,e,s,n,i)}}function i(t,e){return function(t,e,s){const i=(t||[]).length;if(i>2){const n=[];for(let e=0;e<i-1;e++)n.push(...u(t[e][0],t[e][1],t[e+1][0],t[e+1][1],s));return e&&n.push(...u(t[i-1][0],t[i-1][1],t[0][0],t[0][1],s)),{type:"path",ops:n}}return 2===i?n(t[0][0],t[0][1],t[1][0],t[1][1],s):{type:"path",ops:[]}}(t,!0,e)}function o(t,e,s,n,o){return i([[t,e],[t+s,e],[t+s,e+n],[t,e+n]],o)}function h(t,e,s,n,i){return function(t,e,s,n){const[i,o]=d(n.increment,t,e,n.rx,n.ry,1,n.increment*a(.1,a(.4,1,s),s),s);let h=p(i,null,s);if(!s.disableMultiStroke){const[i]=d(n.increment,t,e,n.rx,n.ry,1.5,0,s),o=p(i,null,s);h=h.concat(o)}return{estimatedPoints:o,opset:{type:"path",ops:h}}}(t,e,i,function(t,e,s){const n=Math.sqrt(2*Math.PI*Math.sqrt((Math.pow(t/2,2)+Math.pow(e/2,2))/2)),i=Math.max(s.curveStepCount,s.curveStepCount/Math.sqrt(200)*n),o=2*Math.PI/i;let h=Math.abs(t/2),r=Math.abs(e/2);const a=1-s.curveFitting;return h+=c(h*a,s),r+=c(r*a,s),{increment:o,rx:h,ry:r}}(s,n,i)).opset}function r(t){return t.randomizer||(t.randomizer=new s(t.seed||0)),t.randomizer.next()}function a(t,e,s,n=1){return s.roughness*n*(r(s)*(e-t)+t)}function c(t,e,s=1){return a(-t,t,e,s)}function u(t,e,s,n,i,o=!1){const h=o?i.disableMultiStrokeFill:i.disableMultiStroke,r=l(t,e,s,n,i,!0,!1);if(h)return r;const a=l(t,e,s,n,i,!0,!0);return r.concat(a)}function l(t,e,s,n,i,o,h){const a=Math.pow(t-s,2)+Math.pow(e-n,2),u=Math.sqrt(a);let l=1;l=u<200?1:u>500?.4:-.0016668*u+1.233334;let p=i.maxRandomnessOffset||0;p*p*100>a&&(p=u/10);const d=p/2,f=.2+.2*r(i);let g=i.bowing*i.maxRandomnessOffset*(n-e)/200,m=i.bowing*i.maxRandomnessOffset*(t-s)/200;g=c(g,i,l),m=c(m,i,l);const _=[],w=()=>c(d,i,l),v=()=>c(p,i,l);return o&&(h?_.push({op:"move",data:[t+w(),e+w()]}):_.push({op:"move",data:[t+c(p,i,l),e+c(p,i,l)]})),h?_.push({op:"bcurveTo",data:[g+t+(s-t)*f+w(),m+e+(n-e)*f+w(),g+t+2*(s-t)*f+w(),m+e+2*(n-e)*f+w(),s+w(),n+w()]}):_.push({op:"bcurveTo",data:[g+t+(s-t)*f+v(),m+e+(n-e)*f+v(),g+t+2*(s-t)*f+v(),m+e+2*(n-e)*f+v(),s+v(),n+v()]}),_}function p(t,e,s){const n=t.length,i=[];if(n>3){const o=[],h=1-s.curveTightness;i.push({op:"move",data:[t[1][0],t[1][1]]});for(let e=1;e+2<n;e++){const s=t[e];o[0]=[s[0],s[1]],o[1]=[s[0]+(h*t[e+1][0]-h*t[e-1][0])/6,s[1]+(h*t[e+1][1]-h*t[e-1][1])/6],o[2]=[t[e+1][0]+(h*t[e][0]-h*t[e+2][0])/6,t[e+1][1]+(h*t[e][1]-h*t[e+2][1])/6],o[3]=[t[e+1][0],t[e+1][1]],i.push({op:"bcurveTo",data:[o[1][0],o[1][1],o[2][0],o[2][1],o[3][0],o[3][1]]})}if(e&&2===e.length){const t=s.maxRandomnessOffset;i.push({op:"lineTo",data:[e[0]+c(t,s),e[1]+c(t,s)]})}}else 3===n?(i.push({op:"move",data:[t[1][0],t[1][1]]}),i.push({op:"bcurveTo",data:[t[1][0],t[1][1],t[2][0],t[2][1],t[2][0],t[2][1]]})):2===n&&i.push(...u(t[0][0],t[0][1],t[1][0],t[1][1],s));return i}function d(t,e,s,n,i,o,h,r){const a=[],u=[],l=c(.5,r)-Math.PI/2;u.push([c(o,r)+e+.9*n*Math.cos(l-t),c(o,r)+s+.9*i*Math.sin(l-t)]);for(let h=l;h<2*Math.PI+l-.01;h+=t){const t=[c(o,r)+e+n*Math.cos(h),c(o,r)+s+i*Math.sin(h)];a.push(t),u.push(t)}return u.push([c(o,r)+e+n*Math.cos(l+2*Math.PI+.5*h),c(o,r)+s+i*Math.sin(l+2*Math.PI+.5*h)]),u.push([c(o,r)+e+.98*n*Math.cos(l+h),c(o,r)+s+.98*i*Math.sin(l+h)]),u.push([c(o,r)+e+.9*n*Math.cos(l+.5*h),c(o,r)+s+.9*i*Math.sin(l+.5*h)]),[u,a]}const f={maxRandomnessOffset:2,roughness:1.5,bowing:1,stroke:"#000",strokeWidth:1.5,curveTightness:0,curveFitting:.95,curveStepCount:9,fillStyle:"hachure",fillWeight:-1,hachureAngle:-41,hachureGap:-1,dashOffset:-1,dashGap:-1,zigzagOffset:-1,seed:0,combineNestedSvgPaths:!1,disableMultiStroke:!1,disableMultiStrokeFill:!1},g=JSON.parse(JSON.stringify(f));g.disableMultiStroke=!0;const m=JSON.parse(JSON.stringify(f));m.roughness=3,m.disableMultiStroke=!0;class _{constructor(t,e){this._state="unattached",this._resizing=!1,this._animationGroupDelay=0,this._resizeListener=()=>{this._resizing||(this._resizing=!0,setTimeout(()=>{if(this._resizing=!1,"showing"===this._state){const t=this.computeSize();t&&this.hasRectChanged(t)&&this.show()}},400))},this._e=t,this._config=e,this.attach()}get config(){return this._config}attach(){if("unattached"===this._state&&this._e.parentElement){!function(){if(!window.__rough_notation_keyframe_styles){const t=window.__rough_notation_keyframe_styles=document.createElement("style");t.textContent="\n    @keyframes rough-notation-dash {\n      to {\n        stroke-dashoffset: 0;\n      }\n    }\n    ",document.head.appendChild(t)}}();const t=this._svg=document.createElementNS(e,"svg"),s=t.style;s.position="absolute",s.top="0",s.left="0",s.overflow="visible",s.pointerEvents="none",s.width="100px",s.height="100px";const n="highlight"===this._config.type;if(this._e.insertAdjacentElement(n?"beforebegin":"afterend",t),this._state="not-showing",n){const t=window.getComputedStyle(this._e).position;(!t||"static"===t)&&(this._e.style.position="relative")}this.attachListeners()}}detachListeners(){window.removeEventListener("resize",this._resizeListener),this._resizeObserver&&this._resizeObserver.unobserve(this._e)}attachListeners(){this.detachListeners(),window.addEventListener("resize",this._resizeListener,{passive:!0}),!this._resizeObserver&&"ResizeObserver"in window&&(this._resizeObserver=new window.ResizeObserver(t=>{for(const e of t){let t=!0;if(e.contentRect){const s=this.computeSizeWithBounds(e.contentRect);s&&!this.hasRectChanged(s)&&(t=!1)}t&&this._resizeListener()}})),this._resizeObserver&&this._resizeObserver.observe(this._e)}sameInteger(t,e){return Math.round(t)===Math.round(e)}hasRectChanged(t){return!this._lastSize||!t||!(this.sameInteger(t.x,this._lastSize.x)&&this.sameInteger(t.y,this._lastSize.y)&&this.sameInteger(t.w,this._lastSize.w)&&this.sameInteger(t.h,this._lastSize.h))}isShowing(){return"not-showing"!==this._state}show(){switch(this._state){case"unattached":break;case"showing":this.hide(),this.show();break;case"not-showing":this.attach(),this._svg&&this.render(this._svg)}}hide(){if(this._svg)for(;this._svg.lastChild;)this._svg.removeChild(this._svg.lastChild);this._state="not-showing"}remove(){this._svg&&this._svg.parentElement&&this._svg.parentElement.removeChild(this._svg),this._svg=void 0,this._state="unattached",this.detachListeners()}render(t){const s=this.computeSize();s&&(!function(t,s,i,r){const a=[];let c=i.strokeWidth||2;const u=0===i.padding?0:i.padding||5,l=void 0===i.animate||!!i.animate;switch(i.type){case"underline":{const t=s.y+s.h+u;a.push(n(s.x,t,s.x+s.w,t,g)),a.push(n(s.x+s.w,t,s.x,t,g));break}case"strike-through":{const t=s.y+s.h/2;a.push(n(s.x,t,s.x+s.w,t,g)),a.push(n(s.x+s.w,t,s.x,t,g));break}case"box":{const t=s.x-u,e=s.y-u,n=s.w+2*u,i=s.h+2*u;a.push(o(t,e,n,i,g)),a.push(o(t,e,n,i,g));break}case"crossed-off":{const t=s.x,e=s.y,i=t+s.w,o=e+s.h;a.push(n(t,e,i,o,g)),a.push(n(i,o,t,e,g)),a.push(n(i,e,t,o,g)),a.push(n(t,o,i,e,g));break}case"circle":{const t=2*u,e=s.w+2*t,n=s.h+2*t,i=s.x-t+e/2,o=s.y-t+n/2;a.push(h(i,o,e,n,f));break}case"highlight":{c=.95*s.h;const t=s.y+s.h/2;a.push(n(s.x,t,s.x+s.w,t,m)),a.push(n(s.x+s.w,t,s.x,t,m));break}}if(a.length){const s=function(t){const e=[];for(const s of t){let t="";for(const n of s.ops){const s=n.data;switch(n.op){case"move":t.trim()&&e.push(t.trim()),t=`M${s[0]} ${s[1]} `;break;case"bcurveTo":t+=`C${s[0]} ${s[1]}, ${s[2]} ${s[3]}, ${s[4]} ${s[5]} `;break;case"lineTo":t+=`L${s[0]} ${s[1]} `}}t.trim()&&e.push(t.trim())}return e}(a),n=[],o=[];let h=0;const u=0===i.animationDuration?0:i.animationDuration||800,p=(0===i.animationDelay?0:i.animationDelay||0)+(r||0);for(const r of s){const s=document.createElementNS(e,"path");if(s.setAttribute("d",r),s.setAttribute("fill","none"),s.setAttribute("stroke",i.color||"currentColor"),s.setAttribute("stroke-width",""+c),l){const t=s.getTotalLength();n.push(t),h+=t}t.appendChild(s),o.push(s)}if(l){let t=0;for(let e=0;e<o.length;e++){const s=o[e],i=n[e],r=h?u*(i/h):0,a=p+t,c=s.style;c.strokeDashoffset=""+i,c.strokeDasharray=""+i,c.animation=`rough-notation-dash ${r}ms ease-out ${a}ms forwards`,t+=r}}}}(t,s,this._config,this._animationGroupDelay),this._lastSize=s,this._state="showing")}computeSize(){return this.computeSizeWithBounds(this._e.getBoundingClientRect())}computeSizeWithBounds(t){if(this._svg){const e=this._svg.getBoundingClientRect(),s=t;return{x:(s.x||s.left)-(e.x||e.left),y:(s.y||s.top)-(e.y||e.top),w:s.width,h:s.height}}return null}}return t.annotate=function(t,e){return new _(t,e)},t.annotationGroup=function(t){let e=0;for(const s of t){const t=s;t._animationGroupDelay=e;e+=0===t.config.animationDuration?0:t.config.animationDuration||800}const s=[...t];return{show(){for(const t of s)t.show()},hide(){for(const t of s)t.hide()}}},t}({});
+var RoughNotation=function(t){"use strict";const e="http://www.w3.org/2000/svg";class s{constructor(t){this.seed=t}next(){return this.seed?(2**31-1&(this.seed=Math.imul(48271,this.seed)))/2**31:Math.random()}}function n(t,e,s,n,i){return{type:"path",ops:u(t,e,s,n,i)}}function i(t,e){return function(t,e,s){const i=(t||[]).length;if(i>2){const n=[];for(let e=0;e<i-1;e++)n.push(...u(t[e][0],t[e][1],t[e+1][0],t[e+1][1],s));return e&&n.push(...u(t[i-1][0],t[i-1][1],t[0][0],t[0][1],s)),{type:"path",ops:n}}return 2===i?n(t[0][0],t[0][1],t[1][0],t[1][1],s):{type:"path",ops:[]}}(t,!0,e)}function o(t,e,s,n,o){return i([[t,e],[t+s,e],[t+s,e+n],[t,e+n]],o)}function r(t,e,s,n,i){return function(t,e,s,n){const[i,o]=p(n.increment,t,e,n.rx,n.ry,1,n.increment*a(.1,a(.4,1,s),s),s);let r=f(i,null,s);if(!s.disableMultiStroke){const[i]=p(n.increment,t,e,n.rx,n.ry,1.5,0,s),o=f(i,null,s);r=r.concat(o)}return{estimatedPoints:o,opset:{type:"path",ops:r}}}(t,e,i,function(t,e,s){const n=Math.sqrt(2*Math.PI*Math.sqrt((Math.pow(t/2,2)+Math.pow(e/2,2))/2)),i=Math.max(s.curveStepCount,s.curveStepCount/Math.sqrt(200)*n),o=2*Math.PI/i;let r=Math.abs(t/2),h=Math.abs(e/2);const a=1-s.curveFitting;return r+=c(r*a,s),h+=c(h*a,s),{increment:o,rx:r,ry:h}}(s,n,i)).opset}function h(t){return t.randomizer||(t.randomizer=new s(t.seed||0)),t.randomizer.next()}function a(t,e,s,n=1){return s.roughness*n*(h(s)*(e-t)+t)}function c(t,e,s=1){return a(-t,t,e,s)}function u(t,e,s,n,i,o=!1){const r=o?i.disableMultiStrokeFill:i.disableMultiStroke,h=l(t,e,s,n,i,!0,!1);if(r)return h;const a=l(t,e,s,n,i,!0,!0);return h.concat(a)}function l(t,e,s,n,i,o,r){const a=Math.pow(t-s,2)+Math.pow(e-n,2),u=Math.sqrt(a);let l=1;l=u<200?1:u>500?.4:-.0016668*u+1.233334;let f=i.maxRandomnessOffset||0;f*f*100>a&&(f=u/10);const p=f/2,d=.2+.2*h(i);let g=i.bowing*i.maxRandomnessOffset*(n-e)/200,m=i.bowing*i.maxRandomnessOffset*(t-s)/200;g=c(g,i,l),m=c(m,i,l);const _=[],w=()=>c(p,i,l),v=()=>c(f,i,l);return o&&(r?_.push({op:"move",data:[t+w(),e+w()]}):_.push({op:"move",data:[t+c(f,i,l),e+c(f,i,l)]})),r?_.push({op:"bcurveTo",data:[g+t+(s-t)*d+w(),m+e+(n-e)*d+w(),g+t+2*(s-t)*d+w(),m+e+2*(n-e)*d+w(),s+w(),n+w()]}):_.push({op:"bcurveTo",data:[g+t+(s-t)*d+v(),m+e+(n-e)*d+v(),g+t+2*(s-t)*d+v(),m+e+2*(n-e)*d+v(),s+v(),n+v()]}),_}function f(t,e,s){const n=t.length,i=[];if(n>3){const o=[],r=1-s.curveTightness;i.push({op:"move",data:[t[1][0],t[1][1]]});for(let e=1;e+2<n;e++){const s=t[e];o[0]=[s[0],s[1]],o[1]=[s[0]+(r*t[e+1][0]-r*t[e-1][0])/6,s[1]+(r*t[e+1][1]-r*t[e-1][1])/6],o[2]=[t[e+1][0]+(r*t[e][0]-r*t[e+2][0])/6,t[e+1][1]+(r*t[e][1]-r*t[e+2][1])/6],o[3]=[t[e+1][0],t[e+1][1]],i.push({op:"bcurveTo",data:[o[1][0],o[1][1],o[2][0],o[2][1],o[3][0],o[3][1]]})}if(e&&2===e.length){const t=s.maxRandomnessOffset;i.push({op:"lineTo",data:[e[0]+c(t,s),e[1]+c(t,s)]})}}else 3===n?(i.push({op:"move",data:[t[1][0],t[1][1]]}),i.push({op:"bcurveTo",data:[t[1][0],t[1][1],t[2][0],t[2][1],t[2][0],t[2][1]]})):2===n&&i.push(...u(t[0][0],t[0][1],t[1][0],t[1][1],s));return i}function p(t,e,s,n,i,o,r,h){const a=[],u=[],l=c(.5,h)-Math.PI/2;u.push([c(o,h)+e+.9*n*Math.cos(l-t),c(o,h)+s+.9*i*Math.sin(l-t)]);for(let r=l;r<2*Math.PI+l-.01;r+=t){const t=[c(o,h)+e+n*Math.cos(r),c(o,h)+s+i*Math.sin(r)];a.push(t),u.push(t)}return u.push([c(o,h)+e+n*Math.cos(l+2*Math.PI+.5*r),c(o,h)+s+i*Math.sin(l+2*Math.PI+.5*r)]),u.push([c(o,h)+e+.98*n*Math.cos(l+r),c(o,h)+s+.98*i*Math.sin(l+r)]),u.push([c(o,h)+e+.9*n*Math.cos(l+.5*r),c(o,h)+s+.9*i*Math.sin(l+.5*r)]),[u,a]}const d={maxRandomnessOffset:2,roughness:1.5,bowing:1,stroke:"#000",strokeWidth:1.5,curveTightness:0,curveFitting:.95,curveStepCount:9,fillStyle:"hachure",fillWeight:-1,hachureAngle:-41,hachureGap:-1,dashOffset:-1,dashGap:-1,zigzagOffset:-1,seed:0,combineNestedSvgPaths:!1,disableMultiStroke:!1,disableMultiStrokeFill:!1},g=JSON.parse(JSON.stringify(d));g.disableMultiStroke=!0;const m=JSON.parse(JSON.stringify(d));m.roughness=3,m.disableMultiStroke=!0;class _{constructor(t,e){this._state="unattached",this._resizing=!1,this._animationGroupDelay=0,this._resizeListener=()=>{this._resizing||(this._resizing=!0,setTimeout(()=>{if(this._resizing=!1,"showing"===this._state){const t=this.computeSize();t&&this.hasRectChanged(t)&&this.show()}},400))},this._e=t,this._config=e,this.attach()}get config(){return this._config}attach(){if("unattached"===this._state&&this._e.parentElement){!function(){if(!window.__rough_notation_keyframe_styles){const t=window.__rough_notation_keyframe_styles=document.createElement("style");t.textContent="\n    @keyframes rough-notation-dash {\n      to {\n        stroke-dashoffset: 0;\n      }\n    }\n    ",document.head.appendChild(t)}}();const t=this._svg=document.createElementNS(e,"svg"),s=t.style;s.position="absolute",s.top="0",s.left="0",s.overflow="visible",s.pointerEvents="none",s.width="100px",s.height="100px";const n="highlight"===this._config.type;if(this._e.insertAdjacentElement(n?"beforebegin":"afterend",t),this._state="not-showing",n){const t=window.getComputedStyle(this._e).position;(!t||"static"===t)&&(this._e.style.position="relative")}this.attachListeners()}}detachListeners(){window.removeEventListener("resize",this._resizeListener),this._resizeObserver&&this._resizeObserver.unobserve(this._e)}attachListeners(){this.detachListeners(),window.addEventListener("resize",this._resizeListener,{passive:!0}),!this._resizeObserver&&"ResizeObserver"in window&&(this._resizeObserver=new window.ResizeObserver(t=>{for(const e of t){let t=!0;if(e.contentRect){const s=this.computeSizeWithBounds(e.contentRect);s&&!this.hasRectChanged(s)&&(t=!1)}t&&this._resizeListener()}})),this._resizeObserver&&this._resizeObserver.observe(this._e)}sameInteger(t,e){return Math.round(t)===Math.round(e)}hasRectChanged(t){return!this._lastSize||!t||!(this.sameInteger(t.x,this._lastSize.x)&&this.sameInteger(t.y,this._lastSize.y)&&this.sameInteger(t.w,this._lastSize.w)&&this.sameInteger(t.h,this._lastSize.h))}isShowing(){return"not-showing"!==this._state}show(){switch(this._state){case"unattached":break;case"showing":this.hide(),this.show();break;case"not-showing":this.attach(),this._svg&&this.render(this._svg)}}hide(){if(this._svg)for(;this._svg.lastChild;)this._svg.removeChild(this._svg.lastChild);this._state="not-showing"}remove(){this._svg&&this._svg.parentElement&&this._svg.parentElement.removeChild(this._svg),this._svg=void 0,this._state="unattached",this.detachListeners()}render(t){const s=this.computeSize();s&&(!function(t,s,i,h){const a=[];let c=i.strokeWidth||2;const u=0===i.padding?0:i.padding||5,l=void 0===i.animate||!!i.animate,f=i.iterations||2;switch(i.type){case"underline":{const t=s.y+s.h+u;for(let e=0;e<f;e++)e%2?a.push(n(s.x+s.w,t,s.x,t,g)):a.push(n(s.x,t,s.x+s.w,t,g));break}case"strike-through":{const t=s.y+s.h/2;for(let e=0;e<f;e++)e%2?a.push(n(s.x+s.w,t,s.x,t,g)):a.push(n(s.x,t,s.x+s.w,t,g));break}case"box":{const t=s.x-u,e=s.y-u,n=s.w+2*u,i=s.h+2*u;for(let s=0;s<f;s++)a.push(o(t,e,n,i,g));break}case"crossed-off":{const t=s.x,e=s.y,i=t+s.w,o=e+s.h;for(let s=0;s<f;s++)s%2?a.push(n(i,o,t,e,g)):a.push(n(t,e,i,o,g));for(let s=0;s<f;s++)s%2?a.push(n(t,o,i,e,g)):a.push(n(i,e,t,o,g));break}case"circle":{const t=2*u,e=s.w+2*t,n=s.h+2*t,i=s.x-t+e/2,o=s.y-t+n/2,h=Math.floor(f/2),c=f-2*h;for(let t=0;t<h;t++)a.push(r(i,o,e,n,d));for(let t=0;t<c;t++)a.push(r(i,o,e,n,g));break}case"highlight":{c=.95*s.h;const t=s.y+s.h/2;for(let e=0;e<f;e++)e%2?a.push(n(s.x+s.w,t,s.x,t,m)):a.push(n(s.x,t,s.x+s.w,t,m));break}}if(a.length){const s=function(t){const e=[];for(const s of t){let t="";for(const n of s.ops){const s=n.data;switch(n.op){case"move":t.trim()&&e.push(t.trim()),t=`M${s[0]} ${s[1]} `;break;case"bcurveTo":t+=`C${s[0]} ${s[1]}, ${s[2]} ${s[3]}, ${s[4]} ${s[5]} `;break;case"lineTo":t+=`L${s[0]} ${s[1]} `}}t.trim()&&e.push(t.trim())}return e}(a),n=[],o=[];let r=0;const u=0===i.animationDuration?0:i.animationDuration||800,f=(0===i.animationDelay?0:i.animationDelay||0)+(h||0);for(const h of s){const s=document.createElementNS(e,"path");if(s.setAttribute("d",h),s.setAttribute("fill","none"),s.setAttribute("stroke",i.color||"currentColor"),s.setAttribute("stroke-width",""+c),l){const t=s.getTotalLength();n.push(t),r+=t}t.appendChild(s),o.push(s)}if(l){let t=0;for(let e=0;e<o.length;e++){const s=o[e],i=n[e],h=r?u*(i/r):0,a=f+t,c=s.style;c.strokeDashoffset=""+i,c.strokeDasharray=""+i,c.animation=`rough-notation-dash ${h}ms ease-out ${a}ms forwards`,t+=h}}}}(t,s,this._config,this._animationGroupDelay),this._lastSize=s,this._state="showing")}computeSize(){return this.computeSizeWithBounds(this._e.getBoundingClientRect())}computeSizeWithBounds(t){if(this._svg){const e=this._svg.getBoundingClientRect(),s=t;return{x:(s.x||s.left)-(e.x||e.left),y:(s.y||s.top)-(e.y||e.top),w:s.width,h:s.height}}return null}}return t.annotate=function(t,e){return new _(t,e)},t.annotationGroup=function(t){let e=0;for(const s of t){const t=s;t._animationGroupDelay=e;e+=0===t.config.animationDuration?0:t.config.animationDuration||800}const s=[...t];return{show(){for(const t of s)t.show()},hide(){for(const t of s)t.hide()}}},t}({});

package.json

 {
   "name": "rough-notation",
-  "version": "0.2.0",
-  "description": "Annotate html",
+  "version": "0.2.1",
+  "description": "Create and animate hand-drawn annotations on a web page",
   "main": "lib/rough-notation.cjs.js",
@@ -29,11 +29,9 @@ "module": "lib/rough-notation.esm.js",
   "devDependencies": {
-    "rollup": "^2.11.2",
+    "rollup": "^2.12.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^6.1.0",
+    "roughjs": "^4.3.1",
     "tslint": "^6.1.2",
     "typescript": "^3.9.3"
-  },
-  "dependencies": {
-    "roughjs": "^4.3.1"
   }
 }

README.md

@@ -11,3 +11,3 @@ ![Rough Notation logo](https://roughnotation.com/images/social.png)
 
-[Visit website to see it in action](https://roughnotation.com/)
+[Visit website to see it in action](https://roughnotation.com/) and check out the [source code](https://github.com/pshihn/rough-notation-web) for the website
 
@@ -31,3 +31,3 @@ ## Installation
 ```html
-<script type="module" src="https://unpkg.com/rough-notation"></script>
+<script type="module" src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"></script>
 ```
@@ -114,1 +114,20 @@
 Unlinks the annotation from the element. 
+
+## Annotation Group Object
+
+When you call the `annotationGroup` function, you get back an annotation group object, which has the following methods:
+
+#### show()
+Draws all the annotations in order. If the annotation is set to animate (default), it will animate the drawing. If called again, it will re-draw the animation.
+
+#### hide()
+Hides all the annotations if showing. This is not animated.
+
+## Wrappers
+
+Rough Notation has wrappers for multiple libraries and frameworks:
+
+-   [React Rough Notation](https://github.com/linkstrifer/react-rough-notation)
+-   [Svelte Rough Notation](https://github.com/dimfeld/svelte-rough-notation)
+-   [Vue Rough Notation](https://github.com/Leecason/vue-rough-notation)
+-   [Web Component Rough Notation](https://github.com/Matsuuu/vanilla-rough-notation)

No alert changes

Improved metrics

Total package byte prevSize

49261

increased by6.11%

Dependency count

0

decreased by-100%

Lines of code

550

increased by8.06%

Number of lines in readme file

131

increased by16.96%

Worsened metrics

Dev dependency count

6

increased by20%

Dependency changes

• - Removedroughjs@^4.3.1

• - Removedhachure-fill@0.5.2(transitive)

• - Removedpath-data-parser@0.1.0(transitive)

• - Removedpoints-on-curve@0.2.0(transitive)

• - Removedpoints-on-path@0.2.1(transitive)

• - Removedroughjs@4.6.6(transitive)