rough-notation - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

lib/keyframes.js

 export function ensureKeyframes() {
-    if (!window.__rough_notation_keyframe_styles) {
-        const style = window.__rough_notation_keyframe_styles = document.createElement('style');
-        style.textContent = `
-    @keyframes rough-notation-dash {
-      to {
-        stroke-dashoffset: 0;
-      }
-    }
-    `;
+    if (!window.__rno_kf_s) {
+        const style = window.__rno_kf_s = document.createElement('style');
+        style.textContent = `@keyframes rough-notation-dash { to { stroke-dashoffset: 0; } }`;
         document.head.appendChild(style);
     }
 }

lib/model.d.ts

@@ -10,4 +10,8 @@ export declare const SVG_NS = "http://www.w3.org/2000/svg";
 export declare type RoughAnnotationType = 'underline' | 'box' | 'circle' | 'highlight' | 'strike-through' | 'crossed-off';
-export interface RoughAnnotationConfig {
+export declare type FullPadding = [number, number, number, number];
+export declare type RoughPadding = number | [number, number] | FullPadding;
+export interface RoughAnnotationConfig extends RoughAnnotationConfigBase {
     type: RoughAnnotationType;
+}
+export interface RoughAnnotationConfigBase {
     animate?: boolean;
@@ -18,6 +22,6 @@ animationDuration?: number;
     strokeWidth?: number;
-    padding?: number;
+    padding?: RoughPadding;
     iterations?: number;
 }
-export interface RoughAnnotation {
+export interface RoughAnnotation extends RoughAnnotationConfigBase {
     isShowing(): boolean;
@@ -24,0 +28,0 @@ show(): void;

lib/render.d.ts

 import { Rect, RoughAnnotationConfig } from './model.js';
-export declare function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAnnotationConfig, animationGroupDelay: number): void;
+export declare function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAnnotationConfig, animationGroupDelay: number, seed: number): void;

lib/render.js

@@ -24,11 +24,46 @@ import { SVG_NS, DEFAULT_ANIMATION_DURATION } from './model.js';
 };
-const singleStrokeOptions = JSON.parse(JSON.stringify(defaultOptions));
-singleStrokeOptions.disableMultiStroke = true;
-const highlightOptions = JSON.parse(JSON.stringify(defaultOptions));
-highlightOptions.roughness = 3;
-highlightOptions.disableMultiStroke = true;
-export function renderAnnotation(svg, rect, config, animationGroupDelay) {
+function getOptions(type, seed) {
+    const o = JSON.parse(JSON.stringify(defaultOptions));
+    switch (type) {
+        case 'highlight':
+            o.roughness = 3;
+            o.disableMultiStroke = true;
+            break;
+        case 'single':
+            o.disableMultiStroke = true;
+            break;
+    }
+    o.seed = seed;
+    return o;
+}
+function parsePadding(config) {
+    const p = config.padding;
+    if (p || (p === 0)) {
+        if (typeof p === 'number') {
+            return [p, p, p, p];
+        }
+        else if (Array.isArray(p)) {
+            const pa = p;
+            if (pa.length) {
+                switch (pa.length) {
+                    case 4:
+                        return [...pa];
+                    case 1:
+                        return [pa[0], pa[0], pa[0], pa[0]];
+                    case 2:
+                        return [...pa, ...pa];
+                    case 3:
+                        return [...pa, pa[1]];
+                    default:
+                        return [pa[0], pa[1], pa[2], pa[3]];
+                }
+            }
+        }
+    }
+    return [5, 5, 5, 5];
+}
+export function renderAnnotation(svg, rect, config, animationGroupDelay, seed) {
     const opList = [];
     let strokeWidth = config.strokeWidth || 2;
-    const padding = (config.padding === 0) ? 0 : (config.padding || 5);
+    const padding = parsePadding(config);
     const animate = (config.animate === undefined) ? true : (!!config.animate);
@@ -38,9 +73,10 @@ const iterations = config.iterations || 2;
         case 'underline': {
-            const y = rect.y + rect.h + padding;
+            const o = getOptions('single', seed);
+            const y = rect.y + rect.h + padding[2];
             for (let i = 0; i < iterations; i++) {
                 if (i % 2) {
-                    opList.push(line(rect.x + rect.w, y, rect.x, y, singleStrokeOptions));
+                    opList.push(line(rect.x + rect.w, y, rect.x, y, o));
                 }
                 else {
-                    opList.push(line(rect.x, y, rect.x + rect.w, y, singleStrokeOptions));
+                    opList.push(line(rect.x, y, rect.x + rect.w, y, o));
                 }
@@ -51,9 +87,10 @@ }
         case 'strike-through': {
+            const o = getOptions('single', seed);
             const y = rect.y + (rect.h / 2);
             for (let i = 0; i < iterations; i++) {
                 if (i % 2) {
-                    opList.push(line(rect.x + rect.w, y, rect.x, y, singleStrokeOptions));
+                    opList.push(line(rect.x + rect.w, y, rect.x, y, o));
                 }
                 else {
-                    opList.push(line(rect.x, y, rect.x + rect.w, y, singleStrokeOptions));
+                    opList.push(line(rect.x, y, rect.x + rect.w, y, o));
                 }
@@ -64,8 +101,9 @@ }
         case 'box': {
-            const x = rect.x - padding;
-            const y = rect.y - padding;
-            const width = rect.w + (2 * padding);
-            const height = rect.h + (2 * padding);
+            const o = getOptions('single', seed);
+            const x = rect.x - padding[3];
+            const y = rect.y - padding[0];
+            const width = rect.w + (padding[1] + padding[3]);
+            const height = rect.h + (padding[0] + padding[2]);
             for (let i = 0; i < iterations; i++) {
-                opList.push(rectangle(x, y, width, height, singleStrokeOptions));
+                opList.push(rectangle(x, y, width, height, o));
             }
@@ -75,2 +113,3 @@ break;
         case 'crossed-off': {
+            const o = getOptions('single', seed);
             const x = rect.x;
@@ -82,6 +121,6 @@ const y = rect.y;
                 if (i % 2) {
-                    opList.push(line(x2, y2, x, y, singleStrokeOptions));
+                    opList.push(line(x2, y2, x, y, o));
                 }
                 else {
-                    opList.push(line(x, y, x2, y2, singleStrokeOptions));
+                    opList.push(line(x, y, x2, y2, o));
                 }
@@ -91,6 +130,6 @@ }
                 if (i % 2) {
-                    opList.push(line(x, y2, x2, y, singleStrokeOptions));
+                    opList.push(line(x, y2, x2, y, o));
                 }
                 else {
-                    opList.push(line(x2, y, x, y2, singleStrokeOptions));
+                    opList.push(line(x2, y, x, y2, o));
                 }
@@ -101,14 +140,15 @@ }
         case 'circle': {
-            const p2 = padding * 2;
-            const width = rect.w + (2 * p2);
-            const height = rect.h + (2 * p2);
-            const x = rect.x - p2 + (width / 2);
-            const y = rect.y - p2 + (height / 2);
+            const singleO = getOptions('single', seed);
+            const doubleO = getOptions('double', seed);
+            const width = rect.w + (padding[1] + padding[3]);
+            const height = rect.h + (padding[0] + padding[2]);
+            const x = rect.x - padding[3] + (width / 2);
+            const y = rect.y - padding[0] + (height / 2);
             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));
+                opList.push(ellipse(x, y, width, height, doubleO));
             }
             for (let i = 0; i < singleItr; i++) {
-                opList.push(ellipse(x, y, width, height, singleStrokeOptions));
+                opList.push(ellipse(x, y, width, height, singleO));
             }
@@ -118,2 +158,3 @@ break;
         case 'highlight': {
+            const o = getOptions('highlight', seed);
             strokeWidth = rect.h * 0.95;
@@ -123,6 +164,6 @@ const y = rect.y + (rect.h / 2);
                 if (i % 2) {
-                    opList.push(line(rect.x + rect.w, y, rect.x, y, highlightOptions));
+                    opList.push(line(rect.x + rect.w, y, rect.x, y, o));
                 }
                 else {
-                    opList.push(line(rect.x, y, rect.x + rect.w, y, highlightOptions));
+                    opList.push(line(rect.x, y, rect.x + rect.w, y, o));
                 }
@@ -129,0 +170,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*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()}}};
+"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,i,n){return{type:"path",ops:c(t,e,s,i,n)}}function i(t,e){return function(t,e,i){const n=(t||[]).length;if(n>2){const s=[];for(let e=0;e<n-1;e++)s.push(...c(t[e][0],t[e][1],t[e+1][0],t[e+1][1],i));return e&&s.push(...c(t[n-1][0],t[n-1][1],t[0][0],t[0][1],i)),{type:"path",ops:s}}return 2===n?s(t[0][0],t[0][1],t[1][0],t[1][1],i):{type:"path",ops:[]}}(t,!0,e)}function n(t,e,s,n,o){return i([[t,e],[t+s,e],[t+s,e+n],[t,e+n]],o)}function o(t,e,s,i,n){return function(t,e,s,i){const[n,o]=f(i.increment,t,e,i.rx,i.ry,1,i.increment*h(.1,h(.4,1,s),s),s);let r=l(n,null,s);if(!s.disableMultiStroke){const[n]=f(i.increment,t,e,i.rx,i.ry,1.5,0,s),o=l(n,null,s);r=r.concat(o)}return{estimatedPoints:o,opset:{type:"path",ops:r}}}(t,e,n,function(t,e,s){const i=Math.sqrt(2*Math.PI*Math.sqrt((Math.pow(t/2,2)+Math.pow(e/2,2))/2)),n=Math.max(s.curveStepCount,s.curveStepCount/Math.sqrt(200)*i),o=2*Math.PI/n;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,i,n)).opset}function r(t){return t.randomizer||(t.randomizer=new e(t.seed||0)),t.randomizer.next()}function h(t,e,s,i=1){return s.roughness*i*(r(s)*(e-t)+t)}function a(t,e,s=1){return h(-t,t,e,s)}function c(t,e,s,i,n,o=!1){const r=o?n.disableMultiStrokeFill:n.disableMultiStroke,h=u(t,e,s,i,n,!0,!1);if(r)return h;const a=u(t,e,s,i,n,!0,!0);return h.concat(a)}function u(t,e,s,i,n,o,h){const c=Math.pow(t-s,2)+Math.pow(e-i,2),u=Math.sqrt(c);let l=1;l=u<200?1:u>500?.4:-.0016668*u+1.233334;let f=n.maxRandomnessOffset||0;f*f*100>c&&(f=u/10);const g=f/2,d=.2+.2*r(n);let p=n.bowing*n.maxRandomnessOffset*(i-e)/200,_=n.bowing*n.maxRandomnessOffset*(t-s)/200;p=a(p,n,l),_=a(_,n,l);const m=[],w=()=>a(g,n,l),v=()=>a(f,n,l);return o&&(h?m.push({op:"move",data:[t+w(),e+w()]}):m.push({op:"move",data:[t+a(f,n,l),e+a(f,n,l)]})),h?m.push({op:"bcurveTo",data:[p+t+(s-t)*d+w(),_+e+(i-e)*d+w(),p+t+2*(s-t)*d+w(),_+e+2*(i-e)*d+w(),s+w(),i+w()]}):m.push({op:"bcurveTo",data:[p+t+(s-t)*d+v(),_+e+(i-e)*d+v(),p+t+2*(s-t)*d+v(),_+e+2*(i-e)*d+v(),s+v(),i+v()]}),m}function l(t,e,s){const i=t.length,n=[];if(i>3){const o=[],r=1-s.curveTightness;n.push({op:"move",data:[t[1][0],t[1][1]]});for(let e=1;e+2<i;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]],n.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;n.push({op:"lineTo",data:[e[0]+a(t,s),e[1]+a(t,s)]})}}else 3===i?(n.push({op:"move",data:[t[1][0],t[1][1]]}),n.push({op:"bcurveTo",data:[t[1][0],t[1][1],t[2][0],t[2][1],t[2][0],t[2][1]]})):2===i&&n.push(...c(t[0][0],t[0][1],t[1][0],t[1][1],s));return n}function f(t,e,s,i,n,o,r,h){const c=[],u=[],l=a(.5,h)-Math.PI/2;u.push([a(o,h)+e+.9*i*Math.cos(l-t),a(o,h)+s+.9*n*Math.sin(l-t)]);for(let r=l;r<2*Math.PI+l-.01;r+=t){const t=[a(o,h)+e+i*Math.cos(r),a(o,h)+s+n*Math.sin(r)];c.push(t),u.push(t)}return u.push([a(o,h)+e+i*Math.cos(l+2*Math.PI+.5*r),a(o,h)+s+n*Math.sin(l+2*Math.PI+.5*r)]),u.push([a(o,h)+e+.98*i*Math.cos(l+r),a(o,h)+s+.98*n*Math.sin(l+r)]),u.push([a(o,h)+e+.9*i*Math.cos(l+.5*r),a(o,h)+s+.9*n*Math.sin(l+.5*r)]),[u,c]}const g={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};function d(t,e){const s=JSON.parse(JSON.stringify(g));switch(t){case"highlight":s.roughness=3,s.disableMultiStroke=!0;break;case"single":s.disableMultiStroke=!0}return s.seed=e,s}function p(e,i,r,h,a){const c=[];let u=r.strokeWidth||2;const l=function(t){const e=t.padding;if(e||0===e){if("number"==typeof e)return[e,e,e,e];if(Array.isArray(e)){const t=e;if(t.length)switch(t.length){case 4:return[...t];case 1:return[t[0],t[0],t[0],t[0]];case 2:return[...t,...t];case 3:return[...t,t[1]];default:return[t[0],t[1],t[2],t[3]]}}}return[5,5,5,5]}(r),f=void 0===r.animate||!!r.animate,g=r.iterations||2;switch(r.type){case"underline":{const t=d("single",a),e=i.y+i.h+l[2];for(let n=0;n<g;n++)n%2?c.push(s(i.x+i.w,e,i.x,e,t)):c.push(s(i.x,e,i.x+i.w,e,t));break}case"strike-through":{const t=d("single",a),e=i.y+i.h/2;for(let n=0;n<g;n++)n%2?c.push(s(i.x+i.w,e,i.x,e,t)):c.push(s(i.x,e,i.x+i.w,e,t));break}case"box":{const t=d("single",a),e=i.x-l[3],s=i.y-l[0],o=i.w+(l[1]+l[3]),r=i.h+(l[0]+l[2]);for(let i=0;i<g;i++)c.push(n(e,s,o,r,t));break}case"crossed-off":{const t=d("single",a),e=i.x,n=i.y,o=e+i.w,r=n+i.h;for(let i=0;i<g;i++)i%2?c.push(s(o,r,e,n,t)):c.push(s(e,n,o,r,t));for(let i=0;i<g;i++)i%2?c.push(s(e,r,o,n,t)):c.push(s(o,n,e,r,t));break}case"circle":{const t=d("single",a),e=d("double",a),s=i.w+(l[1]+l[3]),n=i.h+(l[0]+l[2]),r=i.x-l[3]+s/2,h=i.y-l[0]+n/2,u=Math.floor(g/2),f=g-2*u;for(let t=0;t<u;t++)c.push(o(r,h,s,n,e));for(let e=0;e<f;e++)c.push(o(r,h,s,n,t));break}case"highlight":{const t=d("highlight",a);u=.95*i.h;const e=i.y+i.h/2;for(let n=0;n<g;n++)n%2?c.push(s(i.x+i.w,e,i.x,e,t)):c.push(s(i.x,e,i.x+i.w,e,t));break}}if(c.length){const s=function(t){const e=[];for(const s of t){let t="";for(const i of s.ops){const s=i.data;switch(i.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}(c),i=[],n=[];let o=0;const a=0===r.animationDuration?0:r.animationDuration||800,l=(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",""+u),f){const t=s.getTotalLength();i.push(t),o+=t}e.appendChild(s),n.push(s)}if(f){let t=0;for(let e=0;e<n.length;e++){const s=n[e],r=i[e],h=o?a*(r/o):0,c=l+t,u=s.style;u.strokeDashoffset=""+r,u.strokeDasharray=""+r,u.animation=`rough-notation-dash ${h}ms ease-out ${c}ms forwards`,t+=h}}}}class _{constructor(t,e){this._state="unattached",this._resizing=!1,this._seed=Math.floor(Math.random()*2**31),this._animationGroupDelay=0,this._resizeListener=()=>{this._resizing||(this._resizing=!0,setTimeout(()=>{if(this._resizing=!1,"showing"===this._state){const t=this.size();t&&this.hasRectChanged(t)&&this.show()}},400))},this._e=t,this._config=e,this.attach()}get animate(){return this._config.animate}set animate(t){this._config.animate=t}get animationDuration(){return this._config.animationDuration}set animationDuration(t){this._config.animationDuration=t}get animationDelay(){return this._config.animationDelay}set animationDelay(t){this._config.animationDelay=t}get iterations(){return this._config.iterations}set iterations(t){this._config.iterations=t}get color(){return this._config.color}set color(t){this._config.color!==t&&(this._config.color=t,this.refresh())}get strokeWidth(){return this._config.strokeWidth}set strokeWidth(t){this._config.strokeWidth!==t&&(this._config.strokeWidth=t,this.refresh())}get padding(){return this._config.padding}set padding(t){this._config.padding!==t&&(this._config.padding=t,this.refresh())}attach(){if("unattached"===this._state&&this._e.parentElement){!function(){if(!window.__rno_kf_s){const t=window.__rno_kf_s=document.createElement("style");t.textContent="@keyframes rough-notation-dash { to { stroke-dashoffset: 0; } }",document.head.appendChild(t)}}();const e=this._svg=document.createElementNS(t,"svg");e.setAttribute("class","rough-annotation");const 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 i="highlight"===this._config.type;if(this._e.insertAdjacentElement(i?"beforebegin":"afterend",e),this._state="not-showing",i){const t=window.getComputedStyle(this._e).position;(!t||"static"===t)&&(this._e.style.position="relative")}this.attachListeners()}}detachListeners(){window.removeEventListener("resize",this._resizeListener),this._ro&&this._ro.unobserve(this._e)}attachListeners(){this.detachListeners(),window.addEventListener("resize",this._resizeListener,{passive:!0}),!this._ro&&"ResizeObserver"in window&&(this._ro=new window.ResizeObserver(t=>{for(const e of t){let t=!0;if(e.contentRect){const s=this.sizeFor(e.contentRect);s&&!this.hasRectChanged(s)&&(t=!1)}t&&this._resizeListener()}})),this._ro&&this._ro.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}refresh(){this.isShowing()&&!this.pendingRefresh&&(this.pendingRefresh=Promise.resolve().then(()=>{this.isShowing()&&this.show(),delete this.pendingRefresh}))}show(){switch(this._state){case"unattached":break;case"showing":this.hide(),this._svg&&this.render(this._svg,!0);break;case"not-showing":this.attach(),this._svg&&this.render(this._svg,!1)}}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,e){const s=this.size();if(s){let i=this._config;e&&(i=JSON.parse(JSON.stringify(this._config)),i.animate=!1),p(t,s,i,this._animationGroupDelay,this._seed),this._lastSize=s,this._state="showing"}}size(){return this.sizeFor(this._e.getBoundingClientRect())}sizeFor(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 _(t,e)},exports.annotationGroup=function(t){let e=0;for(const s of t){const t=s;t._animationGroupDelay=e;e+=0===t.animationDuration?0:t.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 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};
+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,i,n){return{type:"path",ops:c(t,e,s,i,n)}}function i(t,e){return function(t,e,i){const n=(t||[]).length;if(n>2){const s=[];for(let e=0;e<n-1;e++)s.push(...c(t[e][0],t[e][1],t[e+1][0],t[e+1][1],i));return e&&s.push(...c(t[n-1][0],t[n-1][1],t[0][0],t[0][1],i)),{type:"path",ops:s}}return 2===n?s(t[0][0],t[0][1],t[1][0],t[1][1],i):{type:"path",ops:[]}}(t,!0,e)}function n(t,e,s,n,o){return i([[t,e],[t+s,e],[t+s,e+n],[t,e+n]],o)}function o(t,e,s,i,n){return function(t,e,s,i){const[n,o]=f(i.increment,t,e,i.rx,i.ry,1,i.increment*h(.1,h(.4,1,s),s),s);let r=l(n,null,s);if(!s.disableMultiStroke){const[n]=f(i.increment,t,e,i.rx,i.ry,1.5,0,s),o=l(n,null,s);r=r.concat(o)}return{estimatedPoints:o,opset:{type:"path",ops:r}}}(t,e,n,function(t,e,s){const i=Math.sqrt(2*Math.PI*Math.sqrt((Math.pow(t/2,2)+Math.pow(e/2,2))/2)),n=Math.max(s.curveStepCount,s.curveStepCount/Math.sqrt(200)*i),o=2*Math.PI/n;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,i,n)).opset}function r(t){return t.randomizer||(t.randomizer=new e(t.seed||0)),t.randomizer.next()}function h(t,e,s,i=1){return s.roughness*i*(r(s)*(e-t)+t)}function a(t,e,s=1){return h(-t,t,e,s)}function c(t,e,s,i,n,o=!1){const r=o?n.disableMultiStrokeFill:n.disableMultiStroke,h=u(t,e,s,i,n,!0,!1);if(r)return h;const a=u(t,e,s,i,n,!0,!0);return h.concat(a)}function u(t,e,s,i,n,o,h){const c=Math.pow(t-s,2)+Math.pow(e-i,2),u=Math.sqrt(c);let l=1;l=u<200?1:u>500?.4:-.0016668*u+1.233334;let f=n.maxRandomnessOffset||0;f*f*100>c&&(f=u/10);const g=f/2,d=.2+.2*r(n);let p=n.bowing*n.maxRandomnessOffset*(i-e)/200,_=n.bowing*n.maxRandomnessOffset*(t-s)/200;p=a(p,n,l),_=a(_,n,l);const m=[],w=()=>a(g,n,l),v=()=>a(f,n,l);return o&&(h?m.push({op:"move",data:[t+w(),e+w()]}):m.push({op:"move",data:[t+a(f,n,l),e+a(f,n,l)]})),h?m.push({op:"bcurveTo",data:[p+t+(s-t)*d+w(),_+e+(i-e)*d+w(),p+t+2*(s-t)*d+w(),_+e+2*(i-e)*d+w(),s+w(),i+w()]}):m.push({op:"bcurveTo",data:[p+t+(s-t)*d+v(),_+e+(i-e)*d+v(),p+t+2*(s-t)*d+v(),_+e+2*(i-e)*d+v(),s+v(),i+v()]}),m}function l(t,e,s){const i=t.length,n=[];if(i>3){const o=[],r=1-s.curveTightness;n.push({op:"move",data:[t[1][0],t[1][1]]});for(let e=1;e+2<i;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]],n.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;n.push({op:"lineTo",data:[e[0]+a(t,s),e[1]+a(t,s)]})}}else 3===i?(n.push({op:"move",data:[t[1][0],t[1][1]]}),n.push({op:"bcurveTo",data:[t[1][0],t[1][1],t[2][0],t[2][1],t[2][0],t[2][1]]})):2===i&&n.push(...c(t[0][0],t[0][1],t[1][0],t[1][1],s));return n}function f(t,e,s,i,n,o,r,h){const c=[],u=[],l=a(.5,h)-Math.PI/2;u.push([a(o,h)+e+.9*i*Math.cos(l-t),a(o,h)+s+.9*n*Math.sin(l-t)]);for(let r=l;r<2*Math.PI+l-.01;r+=t){const t=[a(o,h)+e+i*Math.cos(r),a(o,h)+s+n*Math.sin(r)];c.push(t),u.push(t)}return u.push([a(o,h)+e+i*Math.cos(l+2*Math.PI+.5*r),a(o,h)+s+n*Math.sin(l+2*Math.PI+.5*r)]),u.push([a(o,h)+e+.98*i*Math.cos(l+r),a(o,h)+s+.98*n*Math.sin(l+r)]),u.push([a(o,h)+e+.9*i*Math.cos(l+.5*r),a(o,h)+s+.9*n*Math.sin(l+.5*r)]),[u,c]}const g={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};function d(t,e){const s=JSON.parse(JSON.stringify(g));switch(t){case"highlight":s.roughness=3,s.disableMultiStroke=!0;break;case"single":s.disableMultiStroke=!0}return s.seed=e,s}function p(e,i,r,h,a){const c=[];let u=r.strokeWidth||2;const l=function(t){const e=t.padding;if(e||0===e){if("number"==typeof e)return[e,e,e,e];if(Array.isArray(e)){const t=e;if(t.length)switch(t.length){case 4:return[...t];case 1:return[t[0],t[0],t[0],t[0]];case 2:return[...t,...t];case 3:return[...t,t[1]];default:return[t[0],t[1],t[2],t[3]]}}}return[5,5,5,5]}(r),f=void 0===r.animate||!!r.animate,g=r.iterations||2;switch(r.type){case"underline":{const t=d("single",a),e=i.y+i.h+l[2];for(let n=0;n<g;n++)n%2?c.push(s(i.x+i.w,e,i.x,e,t)):c.push(s(i.x,e,i.x+i.w,e,t));break}case"strike-through":{const t=d("single",a),e=i.y+i.h/2;for(let n=0;n<g;n++)n%2?c.push(s(i.x+i.w,e,i.x,e,t)):c.push(s(i.x,e,i.x+i.w,e,t));break}case"box":{const t=d("single",a),e=i.x-l[3],s=i.y-l[0],o=i.w+(l[1]+l[3]),r=i.h+(l[0]+l[2]);for(let i=0;i<g;i++)c.push(n(e,s,o,r,t));break}case"crossed-off":{const t=d("single",a),e=i.x,n=i.y,o=e+i.w,r=n+i.h;for(let i=0;i<g;i++)i%2?c.push(s(o,r,e,n,t)):c.push(s(e,n,o,r,t));for(let i=0;i<g;i++)i%2?c.push(s(e,r,o,n,t)):c.push(s(o,n,e,r,t));break}case"circle":{const t=d("single",a),e=d("double",a),s=i.w+(l[1]+l[3]),n=i.h+(l[0]+l[2]),r=i.x-l[3]+s/2,h=i.y-l[0]+n/2,u=Math.floor(g/2),f=g-2*u;for(let t=0;t<u;t++)c.push(o(r,h,s,n,e));for(let e=0;e<f;e++)c.push(o(r,h,s,n,t));break}case"highlight":{const t=d("highlight",a);u=.95*i.h;const e=i.y+i.h/2;for(let n=0;n<g;n++)n%2?c.push(s(i.x+i.w,e,i.x,e,t)):c.push(s(i.x,e,i.x+i.w,e,t));break}}if(c.length){const s=function(t){const e=[];for(const s of t){let t="";for(const i of s.ops){const s=i.data;switch(i.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}(c),i=[],n=[];let o=0;const a=0===r.animationDuration?0:r.animationDuration||800,l=(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",""+u),f){const t=s.getTotalLength();i.push(t),o+=t}e.appendChild(s),n.push(s)}if(f){let t=0;for(let e=0;e<n.length;e++){const s=n[e],r=i[e],h=o?a*(r/o):0,c=l+t,u=s.style;u.strokeDashoffset=""+r,u.strokeDasharray=""+r,u.animation=`rough-notation-dash ${h}ms ease-out ${c}ms forwards`,t+=h}}}}class _{constructor(t,e){this._state="unattached",this._resizing=!1,this._seed=Math.floor(Math.random()*2**31),this._animationGroupDelay=0,this._resizeListener=()=>{this._resizing||(this._resizing=!0,setTimeout(()=>{if(this._resizing=!1,"showing"===this._state){const t=this.size();t&&this.hasRectChanged(t)&&this.show()}},400))},this._e=t,this._config=e,this.attach()}get animate(){return this._config.animate}set animate(t){this._config.animate=t}get animationDuration(){return this._config.animationDuration}set animationDuration(t){this._config.animationDuration=t}get animationDelay(){return this._config.animationDelay}set animationDelay(t){this._config.animationDelay=t}get iterations(){return this._config.iterations}set iterations(t){this._config.iterations=t}get color(){return this._config.color}set color(t){this._config.color!==t&&(this._config.color=t,this.refresh())}get strokeWidth(){return this._config.strokeWidth}set strokeWidth(t){this._config.strokeWidth!==t&&(this._config.strokeWidth=t,this.refresh())}get padding(){return this._config.padding}set padding(t){this._config.padding!==t&&(this._config.padding=t,this.refresh())}attach(){if("unattached"===this._state&&this._e.parentElement){!function(){if(!window.__rno_kf_s){const t=window.__rno_kf_s=document.createElement("style");t.textContent="@keyframes rough-notation-dash { to { stroke-dashoffset: 0; } }",document.head.appendChild(t)}}();const e=this._svg=document.createElementNS(t,"svg");e.setAttribute("class","rough-annotation");const 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 i="highlight"===this._config.type;if(this._e.insertAdjacentElement(i?"beforebegin":"afterend",e),this._state="not-showing",i){const t=window.getComputedStyle(this._e).position;(!t||"static"===t)&&(this._e.style.position="relative")}this.attachListeners()}}detachListeners(){window.removeEventListener("resize",this._resizeListener),this._ro&&this._ro.unobserve(this._e)}attachListeners(){this.detachListeners(),window.addEventListener("resize",this._resizeListener,{passive:!0}),!this._ro&&"ResizeObserver"in window&&(this._ro=new window.ResizeObserver(t=>{for(const e of t){let t=!0;if(e.contentRect){const s=this.sizeFor(e.contentRect);s&&!this.hasRectChanged(s)&&(t=!1)}t&&this._resizeListener()}})),this._ro&&this._ro.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}refresh(){this.isShowing()&&!this.pendingRefresh&&(this.pendingRefresh=Promise.resolve().then(()=>{this.isShowing()&&this.show(),delete this.pendingRefresh}))}show(){switch(this._state){case"unattached":break;case"showing":this.hide(),this._svg&&this.render(this._svg,!0);break;case"not-showing":this.attach(),this._svg&&this.render(this._svg,!1)}}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,e){const s=this.size();if(s){let i=this._config;e&&(i=JSON.parse(JSON.stringify(this._config)),i.animate=!1),p(t,s,i,this._animationGroupDelay,this._seed),this._lastSize=s,this._state="showing"}}size(){return this.sizeFor(this._e.getBoundingClientRect())}sizeFor(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 m(t,e){return new _(t,e)}function w(t){let e=0;for(const s of t){const t=s;t._animationGroupDelay=e;e+=0===t.animationDuration?0:t.animationDuration||800}const s=[...t];return{show(){for(const t of s)t.show()},hide(){for(const t of s)t.hide()}}}export{m 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 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}({});
+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 i(t,e,s,i,n){return{type:"path",ops:u(t,e,s,i,n)}}function n(t,e){return function(t,e,s){const n=(t||[]).length;if(n>2){const i=[];for(let e=0;e<n-1;e++)i.push(...u(t[e][0],t[e][1],t[e+1][0],t[e+1][1],s));return e&&i.push(...u(t[n-1][0],t[n-1][1],t[0][0],t[0][1],s)),{type:"path",ops:i}}return 2===n?i(t[0][0],t[0][1],t[1][0],t[1][1],s):{type:"path",ops:[]}}(t,!0,e)}function o(t,e,s,i,o){return n([[t,e],[t+s,e],[t+s,e+i],[t,e+i]],o)}function r(t,e,s,i,n){return function(t,e,s,i){const[n,o]=g(i.increment,t,e,i.rx,i.ry,1,i.increment*a(.1,a(.4,1,s),s),s);let r=f(n,null,s);if(!s.disableMultiStroke){const[n]=g(i.increment,t,e,i.rx,i.ry,1.5,0,s),o=f(n,null,s);r=r.concat(o)}return{estimatedPoints:o,opset:{type:"path",ops:r}}}(t,e,n,function(t,e,s){const i=Math.sqrt(2*Math.PI*Math.sqrt((Math.pow(t/2,2)+Math.pow(e/2,2))/2)),n=Math.max(s.curveStepCount,s.curveStepCount/Math.sqrt(200)*i),o=2*Math.PI/n;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,i,n)).opset}function h(t){return t.randomizer||(t.randomizer=new s(t.seed||0)),t.randomizer.next()}function a(t,e,s,i=1){return s.roughness*i*(h(s)*(e-t)+t)}function c(t,e,s=1){return a(-t,t,e,s)}function u(t,e,s,i,n,o=!1){const r=o?n.disableMultiStrokeFill:n.disableMultiStroke,h=l(t,e,s,i,n,!0,!1);if(r)return h;const a=l(t,e,s,i,n,!0,!0);return h.concat(a)}function l(t,e,s,i,n,o,r){const a=Math.pow(t-s,2)+Math.pow(e-i,2),u=Math.sqrt(a);let l=1;l=u<200?1:u>500?.4:-.0016668*u+1.233334;let f=n.maxRandomnessOffset||0;f*f*100>a&&(f=u/10);const g=f/2,d=.2+.2*h(n);let p=n.bowing*n.maxRandomnessOffset*(i-e)/200,_=n.bowing*n.maxRandomnessOffset*(t-s)/200;p=c(p,n,l),_=c(_,n,l);const m=[],w=()=>c(g,n,l),v=()=>c(f,n,l);return o&&(r?m.push({op:"move",data:[t+w(),e+w()]}):m.push({op:"move",data:[t+c(f,n,l),e+c(f,n,l)]})),r?m.push({op:"bcurveTo",data:[p+t+(s-t)*d+w(),_+e+(i-e)*d+w(),p+t+2*(s-t)*d+w(),_+e+2*(i-e)*d+w(),s+w(),i+w()]}):m.push({op:"bcurveTo",data:[p+t+(s-t)*d+v(),_+e+(i-e)*d+v(),p+t+2*(s-t)*d+v(),_+e+2*(i-e)*d+v(),s+v(),i+v()]}),m}function f(t,e,s){const i=t.length,n=[];if(i>3){const o=[],r=1-s.curveTightness;n.push({op:"move",data:[t[1][0],t[1][1]]});for(let e=1;e+2<i;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]],n.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;n.push({op:"lineTo",data:[e[0]+c(t,s),e[1]+c(t,s)]})}}else 3===i?(n.push({op:"move",data:[t[1][0],t[1][1]]}),n.push({op:"bcurveTo",data:[t[1][0],t[1][1],t[2][0],t[2][1],t[2][0],t[2][1]]})):2===i&&n.push(...u(t[0][0],t[0][1],t[1][0],t[1][1],s));return n}function g(t,e,s,i,n,o,r,h){const a=[],u=[],l=c(.5,h)-Math.PI/2;u.push([c(o,h)+e+.9*i*Math.cos(l-t),c(o,h)+s+.9*n*Math.sin(l-t)]);for(let r=l;r<2*Math.PI+l-.01;r+=t){const t=[c(o,h)+e+i*Math.cos(r),c(o,h)+s+n*Math.sin(r)];a.push(t),u.push(t)}return u.push([c(o,h)+e+i*Math.cos(l+2*Math.PI+.5*r),c(o,h)+s+n*Math.sin(l+2*Math.PI+.5*r)]),u.push([c(o,h)+e+.98*i*Math.cos(l+r),c(o,h)+s+.98*n*Math.sin(l+r)]),u.push([c(o,h)+e+.9*i*Math.cos(l+.5*r),c(o,h)+s+.9*n*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};function p(t,e){const s=JSON.parse(JSON.stringify(d));switch(t){case"highlight":s.roughness=3,s.disableMultiStroke=!0;break;case"single":s.disableMultiStroke=!0}return s.seed=e,s}function _(t,s,n,h,a){const c=[];let u=n.strokeWidth||2;const l=function(t){const e=t.padding;if(e||0===e){if("number"==typeof e)return[e,e,e,e];if(Array.isArray(e)){const t=e;if(t.length)switch(t.length){case 4:return[...t];case 1:return[t[0],t[0],t[0],t[0]];case 2:return[...t,...t];case 3:return[...t,t[1]];default:return[t[0],t[1],t[2],t[3]]}}}return[5,5,5,5]}(n),f=void 0===n.animate||!!n.animate,g=n.iterations||2;switch(n.type){case"underline":{const t=p("single",a),e=s.y+s.h+l[2];for(let n=0;n<g;n++)n%2?c.push(i(s.x+s.w,e,s.x,e,t)):c.push(i(s.x,e,s.x+s.w,e,t));break}case"strike-through":{const t=p("single",a),e=s.y+s.h/2;for(let n=0;n<g;n++)n%2?c.push(i(s.x+s.w,e,s.x,e,t)):c.push(i(s.x,e,s.x+s.w,e,t));break}case"box":{const t=p("single",a),e=s.x-l[3],i=s.y-l[0],n=s.w+(l[1]+l[3]),r=s.h+(l[0]+l[2]);for(let s=0;s<g;s++)c.push(o(e,i,n,r,t));break}case"crossed-off":{const t=p("single",a),e=s.x,n=s.y,o=e+s.w,r=n+s.h;for(let s=0;s<g;s++)s%2?c.push(i(o,r,e,n,t)):c.push(i(e,n,o,r,t));for(let s=0;s<g;s++)s%2?c.push(i(e,r,o,n,t)):c.push(i(o,n,e,r,t));break}case"circle":{const t=p("single",a),e=p("double",a),i=s.w+(l[1]+l[3]),n=s.h+(l[0]+l[2]),o=s.x-l[3]+i/2,h=s.y-l[0]+n/2,u=Math.floor(g/2),f=g-2*u;for(let t=0;t<u;t++)c.push(r(o,h,i,n,e));for(let e=0;e<f;e++)c.push(r(o,h,i,n,t));break}case"highlight":{const t=p("highlight",a);u=.95*s.h;const e=s.y+s.h/2;for(let n=0;n<g;n++)n%2?c.push(i(s.x+s.w,e,s.x,e,t)):c.push(i(s.x,e,s.x+s.w,e,t));break}}if(c.length){const s=function(t){const e=[];for(const s of t){let t="";for(const i of s.ops){const s=i.data;switch(i.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}(c),i=[],o=[];let r=0;const a=0===n.animationDuration?0:n.animationDuration||800,l=(0===n.animationDelay?0:n.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",n.color||"currentColor"),s.setAttribute("stroke-width",""+u),f){const t=s.getTotalLength();i.push(t),r+=t}t.appendChild(s),o.push(s)}if(f){let t=0;for(let e=0;e<o.length;e++){const s=o[e],n=i[e],h=r?a*(n/r):0,c=l+t,u=s.style;u.strokeDashoffset=""+n,u.strokeDasharray=""+n,u.animation=`rough-notation-dash ${h}ms ease-out ${c}ms forwards`,t+=h}}}}class m{constructor(t,e){this._state="unattached",this._resizing=!1,this._seed=Math.floor(Math.random()*2**31),this._animationGroupDelay=0,this._resizeListener=()=>{this._resizing||(this._resizing=!0,setTimeout(()=>{if(this._resizing=!1,"showing"===this._state){const t=this.size();t&&this.hasRectChanged(t)&&this.show()}},400))},this._e=t,this._config=e,this.attach()}get animate(){return this._config.animate}set animate(t){this._config.animate=t}get animationDuration(){return this._config.animationDuration}set animationDuration(t){this._config.animationDuration=t}get animationDelay(){return this._config.animationDelay}set animationDelay(t){this._config.animationDelay=t}get iterations(){return this._config.iterations}set iterations(t){this._config.iterations=t}get color(){return this._config.color}set color(t){this._config.color!==t&&(this._config.color=t,this.refresh())}get strokeWidth(){return this._config.strokeWidth}set strokeWidth(t){this._config.strokeWidth!==t&&(this._config.strokeWidth=t,this.refresh())}get padding(){return this._config.padding}set padding(t){this._config.padding!==t&&(this._config.padding=t,this.refresh())}attach(){if("unattached"===this._state&&this._e.parentElement){!function(){if(!window.__rno_kf_s){const t=window.__rno_kf_s=document.createElement("style");t.textContent="@keyframes rough-notation-dash { to { stroke-dashoffset: 0; } }",document.head.appendChild(t)}}();const t=this._svg=document.createElementNS(e,"svg");t.setAttribute("class","rough-annotation");const 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 i="highlight"===this._config.type;if(this._e.insertAdjacentElement(i?"beforebegin":"afterend",t),this._state="not-showing",i){const t=window.getComputedStyle(this._e).position;(!t||"static"===t)&&(this._e.style.position="relative")}this.attachListeners()}}detachListeners(){window.removeEventListener("resize",this._resizeListener),this._ro&&this._ro.unobserve(this._e)}attachListeners(){this.detachListeners(),window.addEventListener("resize",this._resizeListener,{passive:!0}),!this._ro&&"ResizeObserver"in window&&(this._ro=new window.ResizeObserver(t=>{for(const e of t){let t=!0;if(e.contentRect){const s=this.sizeFor(e.contentRect);s&&!this.hasRectChanged(s)&&(t=!1)}t&&this._resizeListener()}})),this._ro&&this._ro.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}refresh(){this.isShowing()&&!this.pendingRefresh&&(this.pendingRefresh=Promise.resolve().then(()=>{this.isShowing()&&this.show(),delete this.pendingRefresh}))}show(){switch(this._state){case"unattached":break;case"showing":this.hide(),this._svg&&this.render(this._svg,!0);break;case"not-showing":this.attach(),this._svg&&this.render(this._svg,!1)}}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,e){const s=this.size();if(s){let i=this._config;e&&(i=JSON.parse(JSON.stringify(this._config)),i.animate=!1),_(t,s,i,this._animationGroupDelay,this._seed),this._lastSize=s,this._state="showing"}}size(){return this.sizeFor(this._e.getBoundingClientRect())}sizeFor(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 m(t,e)},t.annotationGroup=function(t){let e=0;for(const s of t){const t=s;t._animationGroupDelay=e;e+=0===t.animationDuration?0:t.animationDuration||800}const s=[...t];return{show(){for(const t of s)t.show()},hide(){for(const t of s)t.hide()}}},t}({});

lib/rough-notation.js

 import { SVG_NS, DEFAULT_ANIMATION_DURATION } from './model.js';
 import { renderAnnotation } from './render.js';
 import { ensureKeyframes } from './keyframes.js';
+import { randomSeed } from 'roughjs/bin/math';
 class RoughAnnotationImpl {
@@ -8,2 +9,3 @@ constructor(e, config) {
         this._resizing = false;
+        this._seed = randomSeed();
         this._animationGroupDelay = 0;
@@ -16,3 +18,3 @@ this._resizeListener = () => {
                     if (this._state === 'showing') {
-                        const newSize = this.computeSize();
+                        const newSize = this.size();
                         if (newSize && this.hasRectChanged(newSize)) {
@@ -29,5 +31,31 @@ this.show();
     }
-    get config() {
-        return this._config;
+    get animate() { return this._config.animate; }
+    set animate(value) { this._config.animate = value; }
+    get animationDuration() { return this._config.animationDuration; }
+    set animationDuration(value) { this._config.animationDuration = value; }
+    get animationDelay() { return this._config.animationDelay; }
+    set animationDelay(value) { this._config.animationDelay = value; }
+    get iterations() { return this._config.iterations; }
+    set iterations(value) { this._config.iterations = value; }
+    get color() { return this._config.color; }
+    set color(value) {
+        if (this._config.color !== value) {
+            this._config.color = value;
+            this.refresh();
+        }
     }
+    get strokeWidth() { return this._config.strokeWidth; }
+    set strokeWidth(value) {
+        if (this._config.strokeWidth !== value) {
+            this._config.strokeWidth = value;
+            this.refresh();
+        }
+    }
+    get padding() { return this._config.padding; }
+    set padding(value) {
+        if (this._config.padding !== value) {
+            this._config.padding = value;
+            this.refresh();
+        }
+    }
     attach() {
@@ -37,2 +65,3 @@ if (this._state === 'unattached' && this._e.parentElement) {
             const svg = this._svg = document.createElementNS(SVG_NS, 'svg');
+            svg.setAttribute('class', 'rough-annotation');
             const style = svg.style;
@@ -62,4 +91,4 @@ style.position = 'absolute';
         window.removeEventListener('resize', this._resizeListener);
-        if (this._resizeObserver) {
-            this._resizeObserver.unobserve(this._e);
+        if (this._ro) {
+            this._ro.unobserve(this._e);
         }
@@ -70,8 +99,8 @@ }
         window.addEventListener('resize', this._resizeListener, { passive: true });
-        if ((!this._resizeObserver) && ('ResizeObserver' in window)) {
-            this._resizeObserver = new window.ResizeObserver((entries) => {
+        if ((!this._ro) && ('ResizeObserver' in window)) {
+            this._ro = new window.ResizeObserver((entries) => {
                 for (const entry of entries) {
                     let trigger = true;
                     if (entry.contentRect) {
-                        const newRect = this.computeSizeWithBounds(entry.contentRect);
+                        const newRect = this.sizeFor(entry.contentRect);
                         if (newRect && (!this.hasRectChanged(newRect))) {
@@ -87,4 +116,4 @@ trigger = false;
         }
-        if (this._resizeObserver) {
-            this._resizeObserver.observe(this._e);
+        if (this._ro) {
+            this._ro.observe(this._e);
         }
@@ -107,2 +136,12 @@ }
     }
+    refresh() {
+        if (this.isShowing() && (!this.pendingRefresh)) {
+            this.pendingRefresh = Promise.resolve().then(() => {
+                if (this.isShowing()) {
+                    this.show();
+                }
+                delete this.pendingRefresh;
+            });
+        }
+    }
     show() {
@@ -114,3 +153,5 @@ switch (this._state) {
                 this.hide();
-                this.show();
+                if (this._svg) {
+                    this.render(this._svg, true);
+                }
                 break;
@@ -120,3 +161,3 @@ case 'not-showing':
                 if (this._svg) {
-                    this.render(this._svg);
+                    this.render(this._svg, false);
                 }
@@ -142,6 +183,11 @@ break;
     }
-    render(svg) {
-        const rect = this.computeSize();
+    render(svg, ensureNoAnimation) {
+        const rect = this.size();
         if (rect) {
-            renderAnnotation(svg, rect, this._config, this._animationGroupDelay);
+            let config = this._config;
+            if (ensureNoAnimation) {
+                config = JSON.parse(JSON.stringify(this._config));
+                config.animate = false;
+            }
+            renderAnnotation(svg, rect, config, this._animationGroupDelay, this._seed);
             this._lastSize = rect;
@@ -151,6 +197,6 @@ this._state = 'showing';
     }
-    computeSize() {
-        return this.computeSizeWithBounds(this._e.getBoundingClientRect());
+    size() {
+        return this.sizeFor(this._e.getBoundingClientRect());
     }
-    computeSizeWithBounds(bounds) {
+    sizeFor(bounds) {
         if (this._svg) {
@@ -176,3 +222,3 @@ const rect1 = this._svg.getBoundingClientRect();
         ai._animationGroupDelay = delay;
-        const duration = ai.config.animationDuration === 0 ? 0 : (ai.config.animationDuration || DEFAULT_ANIMATION_DURATION);
+        const duration = ai.animationDuration === 0 ? 0 : (ai.animationDuration || DEFAULT_ANIMATION_DURATION);
         delay += duration;
@@ -179,0 +225,0 @@ }

package.json

 {
   "name": "rough-notation",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Create and animate hand-drawn annotations on a web page",
@@ -36,2 +36,2 @@ "main": "lib/rough-notation.cjs.js",
   }
-}
+}

README.md

@@ -9,3 +9,3 @@ ![Rough Notation logo](https://roughnotation.com/images/social.png)
 
-Rough Notation is about 3.2kb in size when gzipped.
+Rough Notation is 3.63kb in size when gzipped.
 
@@ -37,3 +37,3 @@ [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
 Create an `annotation` object by passing the element to annotate, and a config to describe the annotation style. 
-Once you have the annotation object, you can call `show()` or `hide()` on it to show the annotation
+Once you have the annotation object, you can call `show()` on it to show the annotation
 
@@ -48,2 +48,4 @@ ```javascript
 
+*Note: This will add an SVG element as a sibling to the element, which may be troublesome in certain situations like in a `<table>`. You may want to create an inner `<span>` or `<div>` for the content to annotate.*
+
 ## Annotation Group
@@ -81,3 +83,2 @@
 
-
 #### animationDuration
@@ -97,6 +98,9 @@ Duration of the animation in milliseconds. Default is `800ms`.
 
-
 #### padding
 Padding between the element and roughly where the annotation is drawn. Default value is `5` (in pixels).
+If you wish to specify different `top`, `left`, `right`, `bottom` paddings, you can set the value to an array akin to CSS style padidng `[top, right, bottom, left]` or just `[top & bottom, left & right]`.
 
+#### iterations
+By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations. 
+
 ## Annotation Object
@@ -110,4 +114,6 @@
 #### show()
-Draws the annotation. If the annotation is set to animate (default), it will animate the drawing. If called again, it will re-draw the animation. 
+Draws the annotation. If the annotation is set to animate (default), it will animate the drawing. If called again, it will re-render the annotation, updating any size or location changes. 
 
+*Note: to reanimate the annotation, call `hide()` and then `show()` again.
+
 #### hide()
@@ -119,2 +125,14 @@ Hides the annotation if showing. This is not animated.
 
+#### Updating styles
+All the properties in the configuration are also exposed in this object. e.g. if you'd like to change the color, you can do that after the annotation has been drawn.
+
+```javascript
+const e = document.querySelector('#myElement');
+const annotation = annotate(e, { type: 'underline', color: 'red' });
+annotation.show();
+annotation.color = 'green';
+```
+
+*Note: the type of the annotation cannot be changed. Create a new annotation for that.*
+
 ## Annotation Group Object
@@ -125,3 +143,3 @@
 #### 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.
+Draws all the annotations in order. If the annotation is set to animate (default), it will animate the drawing. 
 
@@ -128,0 +146,0 @@ #### hide()

No alert changes

Improved metrics

Total package byte prevSize

57435

increased by16.6%

Lines of code

652

increased by18.55%

Number of lines in readme file

149

increased by13.74%

No dependency changes