// From Preet Shihn https://github.com/rough-stuff/rough-notation 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, 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: [] }; } function o(t, e, s, i, o) { return (function (t, e) { return n(t, !0, e); })( [ [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(0.1, a(0.4, 1, s), s), s ); let r = l(n, null, s); if (!s.disableMultiStroke) { const [n] = g(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 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 = f(t, e, s, i, n, !0, !1); if (r) return h; const a = f(t, e, s, i, n, !0, !0); return h.concat(a); } function f(t, e, s, i, n, o, r) { const a = Math.pow(t - s, 2) + Math.pow(e - i, 2), u = Math.sqrt(a); let f = 1; f = u < 200 ? 1 : u > 500 ? 0.4 : -0.0016668 * u + 1.233334; let l = n.maxRandomnessOffset || 0; l * l * 100 > a && (l = u / 10); const g = l / 2, d = 0.2 + 0.2 * h(n); let p = (n.bowing * n.maxRandomnessOffset * (i - e)) / 200, _ = (n.bowing * n.maxRandomnessOffset * (t - s)) / 200; (p = c(p, n, f)), (_ = c(_, n, f)); const m = [], w = () => c(g, n, f), v = () => c(l, n, f); return ( o && (r ? m.push({ op: "move", data: [t + w(), e + w()] }) : m.push({ op: "move", data: [t + c(l, n, f), e + c(l, n, f)] })), 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 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] + 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 = [], f = c(0.5, h) - Math.PI / 2; u.push([ c(o, h) + e + 0.9 * i * Math.cos(f - t), c(o, h) + s + 0.9 * n * Math.sin(f - t), ]); for (let r = f; r < 2 * Math.PI + f - 0.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(f + 2 * Math.PI + 0.5 * r), c(o, h) + s + n * Math.sin(f + 2 * Math.PI + 0.5 * r), ]), u.push([ c(o, h) + e + 0.98 * i * Math.cos(f + r), c(o, h) + s + 0.98 * n * Math.sin(f + r), ]), u.push([ c(o, h) + e + 0.9 * i * Math.cos(f + 0.5 * r), c(o, h) + s + 0.9 * n * Math.sin(f + 0.5 * r), ]), [u, a] ); } function d(t, e) { return { maxRandomnessOffset: 2, roughness: "highlight" === t ? 3 : 1.5, bowing: 1, stroke: "#000", strokeWidth: 1.5, curveTightness: 0, curveFitting: 0.95, curveStepCount: 9, fillStyle: "hachure", fillWeight: -1, hachureAngle: -41, hachureGap: -1, dashOffset: -1, dashGap: -1, zigzagOffset: -1, combineNestedSvgPaths: !1, disableMultiStroke: "double" !== t, disableMultiStrokeFill: !1, seed: e, }; } function p(t, s, h, a, c, u) { const f = []; let l = h.strokeWidth || 2; const g = (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]; })(h), p = void 0 === h.animate || !!h.animate, _ = h.iterations || 2, m = h.rtl ? 1 : 0, w = d("single", u); switch (h.type) { case "underline": { const t = s.y + s.h + g[2]; for (let e = m; e < _ + m; e++) e % 2 ? f.push(i(s.x + s.w, t, s.x, t, w)) : f.push(i(s.x, t, s.x + s.w, t, w)); break; } case "strike-through": { const t = s.y + s.h / 2; for (let e = m; e < _ + m; e++) e % 2 ? f.push(i(s.x + s.w, t, s.x, t, w)) : f.push(i(s.x, t, s.x + s.w, t, w)); break; } case "box": { const t = s.x - g[3], e = s.y - g[0], i = s.w + (g[1] + g[3]), n = s.h + (g[0] + g[2]); for (let s = 0; s < _; s++) f.push(o(t, e, i, n, w)); break; } case "bracket": { const t = Array.isArray(h.brackets) ? h.brackets : h.brackets ? [h.brackets] : ["right"], e = s.x - 2 * g[3], i = s.x + s.w + 2 * g[1], o = s.y - 2 * g[0], r = s.y + s.h + 2 * g[2]; for (const h of t) { let t; switch (h) { case "bottom": t = [ [e, s.y + s.h], [e, r], [i, r], [i, s.y + s.h], ]; break; case "top": t = [ [e, s.y], [e, o], [i, o], [i, s.y], ]; break; case "left": t = [ [s.x, o], [e, o], [e, r], [s.x, r], ]; break; case "right": t = [ [s.x + s.w, o], [i, o], [i, r], [s.x + s.w, r], ]; } t && f.push(n(t, !1, w)); } break; } case "crossed-off": { const t = s.x, e = s.y, n = t + s.w, o = e + s.h; for (let s = m; s < _ + m; s++) s % 2 ? f.push(i(n, o, t, e, w)) : f.push(i(t, e, n, o, w)); for (let s = m; s < _ + m; s++) s % 2 ? f.push(i(t, o, n, e, w)) : f.push(i(n, e, t, o, w)); break; } case "circle": { const t = d("double", u), e = s.w + (g[1] + g[3]), i = s.h + (g[0] + g[2]), n = s.x - g[3] + e / 2, o = s.y - g[0] + i / 2, h = Math.floor(_ / 2), a = _ - 2 * h; for (let s = 0; s < h; s++) f.push(r(n, o, e, i, t)); for (let t = 0; t < a; t++) f.push(r(n, o, e, i, w)); break; } case "highlight": { const t = d("highlight", u); l = 0.95 * s.h; const e = s.y + s.h / 2; for (let n = m; n < _ + m; n++) n % 2 ? f.push(i(s.x + s.w, e, s.x, e, t)) : f.push(i(s.x, e, s.x + s.w, e, t)); break; } } if (f.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; })(f), i = [], n = []; let o = 0; const r = (t, e, s) => t.setAttribute(e, s); for (const a of s) { const s = document.createElementNS(e, "path"); if ( (r(s, "d", a), r(s, "fill", "none"), r(s, "stroke", h.color || "currentColor"), r(s, "stroke-width", "" + l), p) ) { const t = s.getTotalLength(); i.push(t), (o += t); } t.appendChild(s), n.push(s); } if (p) { let t = 0; for (let e = 0; e < n.length; e++) { const s = n[e], r = i[e], h = o ? c * (r / o) : 0, u = a + t, f = s.style; (f.strokeDashoffset = "" + r), (f.strokeDasharray = "" + r), (f.animation = `rough-notation-dash ${h}ms ease-out ${u}ms forwards`), (t += h); } } } } class _ { constructor(t, e) { (this._state = "unattached"), (this._resizing = !1), (this._seed = Math.floor(Math.random() * 2 ** 31)), (this._lastSizes = []), (this._animationDelay = 0), (this._resizeListener = () => { this._resizing || ((this._resizing = !0), setTimeout(() => { (this._resizing = !1), "showing" === this._state && this.haveRectsChanged() && this.show(); }, 400)); }), (this._e = t), (this._config = JSON.parse(JSON.stringify(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 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) e.contentRect && this._resizeListener(); })), this._ro && this._ro.observe(this._e); } haveRectsChanged() { if (this._lastSizes.length) { const t = this.rects(); if (t.length !== this._lastSizes.length) return !0; for (let e = 0; e < t.length; e++) if (!this.isSameRect(t[e], this._lastSizes[e])) return !0; } return !1; } isSameRect(t, e) { const s = (t, e) => Math.round(t) === Math.round(e); return s(t.x, e.x) && s(t.y, e.y) && s(t.w, e.w) && s(t.h, e.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) { let s = this._config; e && ((s = JSON.parse(JSON.stringify(this._config))), (s.animate = !1)); const i = this.rects(); let n = 0; i.forEach((t) => (n += t.w)); const o = s.animationDuration || 800; let r = 0; for (let e = 0; e < i.length; e++) { const h = o * (i[e].w / n); p(t, i[e], s, r + this._animationDelay, h, this._seed), (r += h); } (this._lastSizes = i), (this._state = "showing"); } rects() { const t = []; if (this._svg) if (this._config.multiline) { const e = this._e.getClientRects(); for (let s = 0; s < e.length; s++) t.push(this.svgRect(this._svg, e[s])); } else t.push(this.svgRect(this._svg, this._e.getBoundingClientRect())); return t; } svgRect(t, e) { const s = t.getBoundingClientRect(), i = e; return { x: (i.x || i.left) - (s.x || s.left), y: (i.y || i.top) - (s.y || s.top), w: i.width, h: i.height, }; } } 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._animationDelay = 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(); }, }; }), Object.defineProperty(t, "__esModule", { value: !0 }), t ); })({});