UNPKG

@blade47/editorjs-drawing-tool

Version:

Drawing Tool for Editor.js

1,453 lines (1,452 loc) 320 kB
var pn = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}; function Zn(l) { return l && l.__esModule && Object.prototype.hasOwnProperty.call(l, "default") ? l.default : l; } var Qi = { exports: {} }, Ue = {}, tr = {}, H = {}; (function(l) { Object.defineProperty(l, "__esModule", { value: !0 }), l._registerNode = l.Konva = l.glob = void 0; const t = Math.PI / 180; function e() { return typeof window < "u" && ({}.toString.call(window) === "[object Window]" || {}.toString.call(window) === "[object global]"); } l.glob = typeof pn < "u" ? pn : typeof window < "u" ? window : typeof WorkerGlobalScope < "u" ? self : {}, l.Konva = { _global: l.glob, version: "9.3.18", isBrowser: e(), isUnminified: /param/.test((function(n) { }).toString()), dblClickWindow: 400, getAngle(n) { return l.Konva.angleDeg ? n * t : n; }, enableTrace: !1, pointerEventsEnabled: !0, autoDrawEnabled: !0, hitOnDragEnabled: !1, capturePointerEventsEnabled: !1, _mouseListenClick: !1, _touchListenClick: !1, _pointerListenClick: !1, _mouseInDblClickWindow: !1, _touchInDblClickWindow: !1, _pointerInDblClickWindow: !1, _mouseDblClickPointerId: null, _touchDblClickPointerId: null, _pointerDblClickPointerId: null, _fixTextRendering: !1, pixelRatio: typeof window < "u" && window.devicePixelRatio || 1, dragDistance: 3, angleDeg: !0, showWarnings: !0, dragButtons: [0, 1], isDragging() { return l.Konva.DD.isDragging; }, isTransforming() { var n; return (n = l.Konva.Transformer) === null || n === void 0 ? void 0 : n.isTransforming(); }, isDragReady() { return !!l.Konva.DD.node; }, releaseCanvasOnDestroy: !0, document: l.glob.document, _injectGlobal(n) { l.glob.Konva = n; } }; const i = (n) => { l.Konva[n.prototype.getClassName()] = n; }; l._registerNode = i, l.Konva._injectGlobal(l.Konva); })(H); var nt = {}; (function(l) { Object.defineProperty(l, "__esModule", { value: !0 }), l.Util = l.Transform = void 0; const t = H; class e { constructor(p = [1, 0, 0, 1, 0, 0]) { this.dirty = !1, this.m = p && p.slice() || [1, 0, 0, 1, 0, 0]; } reset() { this.m[0] = 1, this.m[1] = 0, this.m[2] = 0, this.m[3] = 1, this.m[4] = 0, this.m[5] = 0; } copy() { return new e(this.m); } copyInto(p) { p.m[0] = this.m[0], p.m[1] = this.m[1], p.m[2] = this.m[2], p.m[3] = this.m[3], p.m[4] = this.m[4], p.m[5] = this.m[5]; } point(p) { const b = this.m; return { x: b[0] * p.x + b[2] * p.y + b[4], y: b[1] * p.x + b[3] * p.y + b[5] }; } translate(p, b) { return this.m[4] += this.m[0] * p + this.m[2] * b, this.m[5] += this.m[1] * p + this.m[3] * b, this; } scale(p, b) { return this.m[0] *= p, this.m[1] *= p, this.m[2] *= b, this.m[3] *= b, this; } rotate(p) { const b = Math.cos(p), w = Math.sin(p), P = this.m[0] * b + this.m[2] * w, S = this.m[1] * b + this.m[3] * w, E = this.m[0] * -w + this.m[2] * b, m = this.m[1] * -w + this.m[3] * b; return this.m[0] = P, this.m[1] = S, this.m[2] = E, this.m[3] = m, this; } getTranslation() { return { x: this.m[4], y: this.m[5] }; } skew(p, b) { const w = this.m[0] + this.m[2] * b, P = this.m[1] + this.m[3] * b, S = this.m[2] + this.m[0] * p, E = this.m[3] + this.m[1] * p; return this.m[0] = w, this.m[1] = P, this.m[2] = S, this.m[3] = E, this; } multiply(p) { const b = this.m[0] * p.m[0] + this.m[2] * p.m[1], w = this.m[1] * p.m[0] + this.m[3] * p.m[1], P = this.m[0] * p.m[2] + this.m[2] * p.m[3], S = this.m[1] * p.m[2] + this.m[3] * p.m[3], E = this.m[0] * p.m[4] + this.m[2] * p.m[5] + this.m[4], m = this.m[1] * p.m[4] + this.m[3] * p.m[5] + this.m[5]; return this.m[0] = b, this.m[1] = w, this.m[2] = P, this.m[3] = S, this.m[4] = E, this.m[5] = m, this; } invert() { const p = 1 / (this.m[0] * this.m[3] - this.m[1] * this.m[2]), b = this.m[3] * p, w = -this.m[1] * p, P = -this.m[2] * p, S = this.m[0] * p, E = p * (this.m[2] * this.m[5] - this.m[3] * this.m[4]), m = p * (this.m[1] * this.m[4] - this.m[0] * this.m[5]); return this.m[0] = b, this.m[1] = w, this.m[2] = P, this.m[3] = S, this.m[4] = E, this.m[5] = m, this; } getMatrix() { return this.m; } decompose() { const p = this.m[0], b = this.m[1], w = this.m[2], P = this.m[3], S = this.m[4], E = this.m[5], m = p * P - b * w, T = { x: S, y: E, rotation: 0, scaleX: 0, scaleY: 0, skewX: 0, skewY: 0 }; if (p != 0 || b != 0) { const A = Math.sqrt(p * p + b * b); T.rotation = b > 0 ? Math.acos(p / A) : -Math.acos(p / A), T.scaleX = A, T.scaleY = m / A, T.skewX = (p * w + b * P) / m, T.skewY = 0; } else if (w != 0 || P != 0) { const A = Math.sqrt(w * w + P * P); T.rotation = Math.PI / 2 - (P > 0 ? Math.acos(-w / A) : -Math.acos(w / A)), T.scaleX = m / A, T.scaleY = A, T.skewX = 0, T.skewY = (p * w + b * P) / m; } return T.rotation = l.Util._getRotation(T.rotation), T; } } l.Transform = e; const i = "[object Array]", n = "[object Number]", r = "[object String]", s = "[object Boolean]", a = Math.PI / 180, o = 180 / Math.PI, h = "#", c = "", y = "0", g = "Konva warning: ", u = "Konva error: ", f = "rgb(", _ = { aliceblue: [240, 248, 255], antiquewhite: [250, 235, 215], aqua: [0, 255, 255], aquamarine: [127, 255, 212], azure: [240, 255, 255], beige: [245, 245, 220], bisque: [255, 228, 196], black: [0, 0, 0], blanchedalmond: [255, 235, 205], blue: [0, 0, 255], blueviolet: [138, 43, 226], brown: [165, 42, 42], burlywood: [222, 184, 135], cadetblue: [95, 158, 160], chartreuse: [127, 255, 0], chocolate: [210, 105, 30], coral: [255, 127, 80], cornflowerblue: [100, 149, 237], cornsilk: [255, 248, 220], crimson: [220, 20, 60], cyan: [0, 255, 255], darkblue: [0, 0, 139], darkcyan: [0, 139, 139], darkgoldenrod: [184, 132, 11], darkgray: [169, 169, 169], darkgreen: [0, 100, 0], darkgrey: [169, 169, 169], darkkhaki: [189, 183, 107], darkmagenta: [139, 0, 139], darkolivegreen: [85, 107, 47], darkorange: [255, 140, 0], darkorchid: [153, 50, 204], darkred: [139, 0, 0], darksalmon: [233, 150, 122], darkseagreen: [143, 188, 143], darkslateblue: [72, 61, 139], darkslategray: [47, 79, 79], darkslategrey: [47, 79, 79], darkturquoise: [0, 206, 209], darkviolet: [148, 0, 211], deeppink: [255, 20, 147], deepskyblue: [0, 191, 255], dimgray: [105, 105, 105], dimgrey: [105, 105, 105], dodgerblue: [30, 144, 255], firebrick: [178, 34, 34], floralwhite: [255, 255, 240], forestgreen: [34, 139, 34], fuchsia: [255, 0, 255], gainsboro: [220, 220, 220], ghostwhite: [248, 248, 255], gold: [255, 215, 0], goldenrod: [218, 165, 32], gray: [128, 128, 128], green: [0, 128, 0], greenyellow: [173, 255, 47], grey: [128, 128, 128], honeydew: [240, 255, 240], hotpink: [255, 105, 180], indianred: [205, 92, 92], indigo: [75, 0, 130], ivory: [255, 255, 240], khaki: [240, 230, 140], lavender: [230, 230, 250], lavenderblush: [255, 240, 245], lawngreen: [124, 252, 0], lemonchiffon: [255, 250, 205], lightblue: [173, 216, 230], lightcoral: [240, 128, 128], lightcyan: [224, 255, 255], lightgoldenrodyellow: [250, 250, 210], lightgray: [211, 211, 211], lightgreen: [144, 238, 144], lightgrey: [211, 211, 211], lightpink: [255, 182, 193], lightsalmon: [255, 160, 122], lightseagreen: [32, 178, 170], lightskyblue: [135, 206, 250], lightslategray: [119, 136, 153], lightslategrey: [119, 136, 153], lightsteelblue: [176, 196, 222], lightyellow: [255, 255, 224], lime: [0, 255, 0], limegreen: [50, 205, 50], linen: [250, 240, 230], magenta: [255, 0, 255], maroon: [128, 0, 0], mediumaquamarine: [102, 205, 170], mediumblue: [0, 0, 205], mediumorchid: [186, 85, 211], mediumpurple: [147, 112, 219], mediumseagreen: [60, 179, 113], mediumslateblue: [123, 104, 238], mediumspringgreen: [0, 250, 154], mediumturquoise: [72, 209, 204], mediumvioletred: [199, 21, 133], midnightblue: [25, 25, 112], mintcream: [245, 255, 250], mistyrose: [255, 228, 225], moccasin: [255, 228, 181], navajowhite: [255, 222, 173], navy: [0, 0, 128], oldlace: [253, 245, 230], olive: [128, 128, 0], olivedrab: [107, 142, 35], orange: [255, 165, 0], orangered: [255, 69, 0], orchid: [218, 112, 214], palegoldenrod: [238, 232, 170], palegreen: [152, 251, 152], paleturquoise: [175, 238, 238], palevioletred: [219, 112, 147], papayawhip: [255, 239, 213], peachpuff: [255, 218, 185], peru: [205, 133, 63], pink: [255, 192, 203], plum: [221, 160, 203], powderblue: [176, 224, 230], purple: [128, 0, 128], rebeccapurple: [102, 51, 153], red: [255, 0, 0], rosybrown: [188, 143, 143], royalblue: [65, 105, 225], saddlebrown: [139, 69, 19], salmon: [250, 128, 114], sandybrown: [244, 164, 96], seagreen: [46, 139, 87], seashell: [255, 245, 238], sienna: [160, 82, 45], silver: [192, 192, 192], skyblue: [135, 206, 235], slateblue: [106, 90, 205], slategray: [119, 128, 144], slategrey: [119, 128, 144], snow: [255, 255, 250], springgreen: [0, 255, 127], steelblue: [70, 130, 180], tan: [210, 180, 140], teal: [0, 128, 128], thistle: [216, 191, 216], transparent: [255, 255, 255, 0], tomato: [255, 99, 71], turquoise: [64, 224, 208], violet: [238, 130, 238], wheat: [245, 222, 179], white: [255, 255, 255], whitesmoke: [245, 245, 245], yellow: [255, 255, 0], yellowgreen: [154, 205, 5] }, v = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/; let C = []; const k = typeof requestAnimationFrame < "u" && requestAnimationFrame || function(d) { setTimeout(d, 60); }; l.Util = { _isElement(d) { return !!(d && d.nodeType == 1); }, _isFunction(d) { return !!(d && d.constructor && d.call && d.apply); }, _isPlainObject(d) { return !!d && d.constructor === Object; }, _isArray(d) { return Object.prototype.toString.call(d) === i; }, _isNumber(d) { return Object.prototype.toString.call(d) === n && !isNaN(d) && isFinite(d); }, _isString(d) { return Object.prototype.toString.call(d) === r; }, _isBoolean(d) { return Object.prototype.toString.call(d) === s; }, isObject(d) { return d instanceof Object; }, isValidSelector(d) { if (typeof d != "string") return !1; const p = d[0]; return p === "#" || p === "." || p === p.toUpperCase(); }, _sign(d) { return d === 0 || d > 0 ? 1 : -1; }, requestAnimFrame(d) { C.push(d), C.length === 1 && k(function() { const p = C; C = [], p.forEach(function(b) { b(); }); }); }, createCanvasElement() { const d = document.createElement("canvas"); try { d.style = d.style || {}; } catch { } return d; }, createImageElement() { return document.createElement("img"); }, _isInDocument(d) { for (; d = d.parentNode; ) if (d == document) return !0; return !1; }, _urlToImage(d, p) { const b = l.Util.createImageElement(); b.onload = function() { p(b); }, b.src = d; }, _rgbToHex(d, p, b) { return ((1 << 24) + (d << 16) + (p << 8) + b).toString(16).slice(1); }, _hexToRgb(d) { d = d.replace(h, c); const p = parseInt(d, 16); return { r: p >> 16 & 255, g: p >> 8 & 255, b: p & 255 }; }, getRandomColor() { let d = (Math.random() * 16777215 << 0).toString(16); for (; d.length < 6; ) d = y + d; return h + d; }, getRGB(d) { let p; return d in _ ? (p = _[d], { r: p[0], g: p[1], b: p[2] }) : d[0] === h ? this._hexToRgb(d.substring(1)) : d.substr(0, 4) === f ? (p = v.exec(d.replace(/ /g, "")), { r: parseInt(p[1], 10), g: parseInt(p[2], 10), b: parseInt(p[3], 10) }) : { r: 0, g: 0, b: 0 }; }, colorToRGBA(d) { return d = d || "black", l.Util._namedColorToRBA(d) || l.Util._hex3ColorToRGBA(d) || l.Util._hex4ColorToRGBA(d) || l.Util._hex6ColorToRGBA(d) || l.Util._hex8ColorToRGBA(d) || l.Util._rgbColorToRGBA(d) || l.Util._rgbaColorToRGBA(d) || l.Util._hslColorToRGBA(d); }, _namedColorToRBA(d) { const p = _[d.toLowerCase()]; return p ? { r: p[0], g: p[1], b: p[2], a: 1 } : null; }, _rgbColorToRGBA(d) { if (d.indexOf("rgb(") === 0) { d = d.match(/rgb\(([^)]+)\)/)[1]; const p = d.split(/ *, */).map(Number); return { r: p[0], g: p[1], b: p[2], a: 1 }; } }, _rgbaColorToRGBA(d) { if (d.indexOf("rgba(") === 0) { d = d.match(/rgba\(([^)]+)\)/)[1]; const p = d.split(/ *, */).map((b, w) => b.slice(-1) === "%" ? w === 3 ? parseInt(b) / 100 : parseInt(b) / 100 * 255 : Number(b)); return { r: p[0], g: p[1], b: p[2], a: p[3] }; } }, _hex8ColorToRGBA(d) { if (d[0] === "#" && d.length === 9) return { r: parseInt(d.slice(1, 3), 16), g: parseInt(d.slice(3, 5), 16), b: parseInt(d.slice(5, 7), 16), a: parseInt(d.slice(7, 9), 16) / 255 }; }, _hex6ColorToRGBA(d) { if (d[0] === "#" && d.length === 7) return { r: parseInt(d.slice(1, 3), 16), g: parseInt(d.slice(3, 5), 16), b: parseInt(d.slice(5, 7), 16), a: 1 }; }, _hex4ColorToRGBA(d) { if (d[0] === "#" && d.length === 5) return { r: parseInt(d[1] + d[1], 16), g: parseInt(d[2] + d[2], 16), b: parseInt(d[3] + d[3], 16), a: parseInt(d[4] + d[4], 16) / 255 }; }, _hex3ColorToRGBA(d) { if (d[0] === "#" && d.length === 4) return { r: parseInt(d[1] + d[1], 16), g: parseInt(d[2] + d[2], 16), b: parseInt(d[3] + d[3], 16), a: 1 }; }, _hslColorToRGBA(d) { if (/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.test(d)) { const [p, ...b] = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(d), w = Number(b[0]) / 360, P = Number(b[1]) / 100, S = Number(b[2]) / 100; let E, m, T; if (P === 0) return T = S * 255, { r: Math.round(T), g: Math.round(T), b: Math.round(T), a: 1 }; S < 0.5 ? E = S * (1 + P) : E = S + P - S * P; const A = 2 * S - E, F = [0, 0, 0]; for (let O = 0; O < 3; O++) m = w + 1 / 3 * -(O - 1), m < 0 && m++, m > 1 && m--, 6 * m < 1 ? T = A + (E - A) * 6 * m : 2 * m < 1 ? T = E : 3 * m < 2 ? T = A + (E - A) * (2 / 3 - m) * 6 : T = A, F[O] = T * 255; return { r: Math.round(F[0]), g: Math.round(F[1]), b: Math.round(F[2]), a: 1 }; } }, haveIntersection(d, p) { return !(p.x > d.x + d.width || p.x + p.width < d.x || p.y > d.y + d.height || p.y + p.height < d.y); }, cloneObject(d) { const p = {}; for (const b in d) this._isPlainObject(d[b]) ? p[b] = this.cloneObject(d[b]) : this._isArray(d[b]) ? p[b] = this.cloneArray(d[b]) : p[b] = d[b]; return p; }, cloneArray(d) { return d.slice(0); }, degToRad(d) { return d * a; }, radToDeg(d) { return d * o; }, _degToRad(d) { return l.Util.warn("Util._degToRad is removed. Please use public Util.degToRad instead."), l.Util.degToRad(d); }, _radToDeg(d) { return l.Util.warn("Util._radToDeg is removed. Please use public Util.radToDeg instead."), l.Util.radToDeg(d); }, _getRotation(d) { return t.Konva.angleDeg ? l.Util.radToDeg(d) : d; }, _capitalize(d) { return d.charAt(0).toUpperCase() + d.slice(1); }, throw(d) { throw new Error(u + d); }, error(d) { console.error(u + d); }, warn(d) { t.Konva.showWarnings && console.warn(g + d); }, each(d, p) { for (const b in d) p(b, d[b]); }, _inRange(d, p, b) { return p <= d && d < b; }, _getProjectionToSegment(d, p, b, w, P, S) { let E, m, T; const A = (d - b) * (d - b) + (p - w) * (p - w); if (A == 0) E = d, m = p, T = (P - b) * (P - b) + (S - w) * (S - w); else { const F = ((P - d) * (b - d) + (S - p) * (w - p)) / A; F < 0 ? (E = d, m = p, T = (d - P) * (d - P) + (p - S) * (p - S)) : F > 1 ? (E = b, m = w, T = (b - P) * (b - P) + (w - S) * (w - S)) : (E = d + F * (b - d), m = p + F * (w - p), T = (E - P) * (E - P) + (m - S) * (m - S)); } return [E, m, T]; }, _getProjectionToLine(d, p, b) { const w = l.Util.cloneObject(d); let P = Number.MAX_VALUE; return p.forEach(function(S, E) { if (!b && E === p.length - 1) return; const m = p[(E + 1) % p.length], T = l.Util._getProjectionToSegment(S.x, S.y, m.x, m.y, d.x, d.y), A = T[0], F = T[1], O = T[2]; O < P && (w.x = A, w.y = F, P = O); }), w; }, _prepareArrayForTween(d, p, b) { const w = [], P = []; if (d.length > p.length) { const E = p; p = d, d = E; } for (let E = 0; E < d.length; E += 2) w.push({ x: d[E], y: d[E + 1] }); for (let E = 0; E < p.length; E += 2) P.push({ x: p[E], y: p[E + 1] }); const S = []; return P.forEach(function(E) { const m = l.Util._getProjectionToLine(E, w, b); S.push(m.x), S.push(m.y); }), S; }, _prepareToStringify(d) { let p; d.visitedByCircularReferenceRemoval = !0; for (const b in d) if (d.hasOwnProperty(b) && d[b] && typeof d[b] == "object") { if (p = Object.getOwnPropertyDescriptor(d, b), d[b].visitedByCircularReferenceRemoval || l.Util._isElement(d[b])) if (p.configurable) delete d[b]; else return null; else if (l.Util._prepareToStringify(d[b]) === null) if (p.configurable) delete d[b]; else return null; } return delete d.visitedByCircularReferenceRemoval, d; }, _assign(d, p) { for (const b in p) d[b] = p[b]; return d; }, _getFirstPointerId(d) { return d.touches ? d.changedTouches[0].identifier : d.pointerId || 999; }, releaseCanvas(...d) { t.Konva.releaseCanvasOnDestroy && d.forEach((p) => { p.width = 0, p.height = 0; }); }, drawRoundedRectPath(d, p, b, w) { let P = 0, S = 0, E = 0, m = 0; typeof w == "number" ? P = S = E = m = Math.min(w, p / 2, b / 2) : (P = Math.min(w[0] || 0, p / 2, b / 2), S = Math.min(w[1] || 0, p / 2, b / 2), m = Math.min(w[2] || 0, p / 2, b / 2), E = Math.min(w[3] || 0, p / 2, b / 2)), d.moveTo(P, 0), d.lineTo(p - S, 0), d.arc(p - S, S, S, Math.PI * 3 / 2, 0, !1), d.lineTo(p, b - m), d.arc(p - m, b - m, m, 0, Math.PI / 2, !1), d.lineTo(E, b), d.arc(E, b - E, E, Math.PI / 2, Math.PI, !1), d.lineTo(0, P), d.arc(P, P, P, Math.PI, Math.PI * 3 / 2, !1); } }; })(nt); var et = {}, V = {}, L = {}; Object.defineProperty(L, "__esModule", { value: !0 }); L.RGBComponent = Ir; L.alphaComponent = Nr; L.getNumberValidator = Ur; L.getNumberOrArrayOfNumbersValidator = Br; L.getNumberOrAutoValidator = Hr; L.getStringValidator = Vr; L.getStringOrGradientValidator = $r; L.getFunctionValidator = zr; L.getNumberArrayValidator = Wr; L.getBooleanValidator = Xr; L.getComponentValidator = Kr; const Pt = H, st = nt; function Mt(l) { return st.Util._isString(l) ? '"' + l + '"' : Object.prototype.toString.call(l) === "[object Number]" || st.Util._isBoolean(l) ? l : Object.prototype.toString.call(l); } function Ir(l) { return l > 255 ? 255 : l < 0 ? 0 : Math.round(l); } function Nr(l) { return l > 1 ? 1 : l < 1e-4 ? 1e-4 : l; } function Ur() { if (Pt.Konva.isUnminified) return function(l, t) { return st.Util._isNumber(l) || st.Util.warn(Mt(l) + ' is a not valid value for "' + t + '" attribute. The value should be a number.'), l; }; } function Br(l) { if (Pt.Konva.isUnminified) return function(t, e) { let i = st.Util._isNumber(t), n = st.Util._isArray(t) && t.length == l; return !i && !n && st.Util.warn(Mt(t) + ' is a not valid value for "' + e + '" attribute. The value should be a number or Array<number>(' + l + ")"), t; }; } function Hr() { if (Pt.Konva.isUnminified) return function(l, t) { var e = st.Util._isNumber(l), i = l === "auto"; return e || i || st.Util.warn(Mt(l) + ' is a not valid value for "' + t + '" attribute. The value should be a number or "auto".'), l; }; } function Vr() { if (Pt.Konva.isUnminified) return function(l, t) { return st.Util._isString(l) || st.Util.warn(Mt(l) + ' is a not valid value for "' + t + '" attribute. The value should be a string.'), l; }; } function $r() { if (Pt.Konva.isUnminified) return function(l, t) { const e = st.Util._isString(l), i = Object.prototype.toString.call(l) === "[object CanvasGradient]" || l && l.addColorStop; return e || i || st.Util.warn(Mt(l) + ' is a not valid value for "' + t + '" attribute. The value should be a string or a native gradient.'), l; }; } function zr() { if (Pt.Konva.isUnminified) return function(l, t) { return st.Util._isFunction(l) || st.Util.warn(Mt(l) + ' is a not valid value for "' + t + '" attribute. The value should be a function.'), l; }; } function Wr() { if (Pt.Konva.isUnminified) return function(l, t) { const e = Int8Array ? Object.getPrototypeOf(Int8Array) : null; return e && l instanceof e || (st.Util._isArray(l) ? l.forEach(function(i) { st.Util._isNumber(i) || st.Util.warn('"' + t + '" attribute has non numeric element ' + i + ". Make sure that all elements are numbers."); }) : st.Util.warn(Mt(l) + ' is a not valid value for "' + t + '" attribute. The value should be a array of numbers.')), l; }; } function Xr() { if (Pt.Konva.isUnminified) return function(l, t) { var e = l === !0 || l === !1; return e || st.Util.warn(Mt(l) + ' is a not valid value for "' + t + '" attribute. The value should be a boolean.'), l; }; } function Kr(l) { if (Pt.Konva.isUnminified) return function(t, e) { return t == null || st.Util.isObject(t) || st.Util.warn(Mt(t) + ' is a not valid value for "' + e + '" attribute. The value should be an object with properties ' + l), t; }; } (function(l) { Object.defineProperty(l, "__esModule", { value: !0 }), l.Factory = void 0; const t = nt, e = L, i = "get", n = "set"; l.Factory = { addGetterSetter(r, s, a, o, h) { l.Factory.addGetter(r, s, a), l.Factory.addSetter(r, s, o, h), l.Factory.addOverloadedGetterSetter(r, s); }, addGetter(r, s, a) { var o = i + t.Util._capitalize(s); r.prototype[o] = r.prototype[o] || function() { const h = this.attrs[s]; return h === void 0 ? a : h; }; }, addSetter(r, s, a, o) { var h = n + t.Util._capitalize(s); r.prototype[h] || l.Factory.overWriteSetter(r, s, a, o); }, overWriteSetter(r, s, a, o) { var h = n + t.Util._capitalize(s); r.prototype[h] = function(c) { return a && c !== void 0 && c !== null && (c = a.call(this, c, s)), this._setAttr(s, c), o && o.call(this), this; }; }, addComponentsGetterSetter(r, s, a, o, h) { const c = a.length, y = t.Util._capitalize, g = i + y(s), u = n + y(s); r.prototype[g] = function() { const _ = {}; for (let v = 0; v < c; v++) { const C = a[v]; _[C] = this.getAttr(s + y(C)); } return _; }; const f = (0, e.getComponentValidator)(a); r.prototype[u] = function(_) { const v = this.attrs[s]; o && (_ = o.call(this, _, s)), f && f.call(this, _, s); for (const C in _) _.hasOwnProperty(C) && this._setAttr(s + y(C), _[C]); return _ || a.forEach((C) => { this._setAttr(s + y(C), void 0); }), this._fireChangeEvent(s, v, _), h && h.call(this), this; }, l.Factory.addOverloadedGetterSetter(r, s); }, addOverloadedGetterSetter(r, s) { var a = t.Util._capitalize(s), o = n + a, h = i + a; r.prototype[s] = function() { return arguments.length ? (this[o](arguments[0]), this) : this[h](); }; }, addDeprecatedGetterSetter(r, s, a, o) { t.Util.error("Adding deprecated " + s); const h = i + t.Util._capitalize(s), c = s + " property is deprecated and will be removed soon. Look at Konva change log for more information."; r.prototype[h] = function() { t.Util.error(c); const y = this.attrs[s]; return y === void 0 ? a : y; }, l.Factory.addSetter(r, s, o, function() { t.Util.error(c); }), l.Factory.addOverloadedGetterSetter(r, s); }, backCompat(r, s) { t.Util.each(s, function(a, o) { const h = r.prototype[o], c = i + t.Util._capitalize(a), y = n + t.Util._capitalize(a); function g() { h.apply(this, arguments), t.Util.error('"' + a + '" method is deprecated and will be removed soon. Use ""' + o + '" instead.'); } r.prototype[a] = g, r.prototype[c] = g, r.prototype[y] = g; }); }, afterSetFilter() { this._filterUpToDate = !1; } }; })(V); var bt = {}, At = {}; Object.defineProperty(At, "__esModule", { value: !0 }); At.HitContext = At.SceneContext = At.Context = void 0; const er = nt, Yr = H; function jr(l) { const t = [], e = l.length, i = er.Util; for (let n = 0; n < e; n++) { let r = l[n]; i._isNumber(r) ? r = Math.round(r * 1e3) / 1e3 : i._isString(r) || (r = r + ""), t.push(r); } return t; } const mn = ",", qr = "(", Jr = ")", Qr = "([", Zr = "])", ts = ";", es = "()", is = "=", yn = [ "arc", "arcTo", "beginPath", "bezierCurveTo", "clearRect", "clip", "closePath", "createLinearGradient", "createPattern", "createRadialGradient", "drawImage", "ellipse", "fill", "fillText", "getImageData", "createImageData", "lineTo", "moveTo", "putImageData", "quadraticCurveTo", "rect", "roundRect", "restore", "rotate", "save", "scale", "setLineDash", "setTransform", "stroke", "strokeText", "transform", "translate" ], ns = [ "fillStyle", "strokeStyle", "shadowColor", "shadowBlur", "shadowOffsetX", "shadowOffsetY", "letterSpacing", "lineCap", "lineDashOffset", "lineJoin", "lineWidth", "miterLimit", "direction", "font", "textAlign", "textBaseline", "globalAlpha", "globalCompositeOperation", "imageSmoothingEnabled" ], rs = 100; class Be { constructor(t) { this.canvas = t, Yr.Konva.enableTrace && (this.traceArr = [], this._enableTrace()); } fillShape(t) { t.fillEnabled() && this._fill(t); } _fill(t) { } strokeShape(t) { t.hasStroke() && this._stroke(t); } _stroke(t) { } fillStrokeShape(t) { t.attrs.fillAfterStrokeEnabled ? (this.strokeShape(t), this.fillShape(t)) : (this.fillShape(t), this.strokeShape(t)); } getTrace(t, e) { let i = this.traceArr, n = i.length, r = "", s, a, o, h; for (s = 0; s < n; s++) a = i[s], o = a.method, o ? (h = a.args, r += o, t ? r += es : er.Util._isArray(h[0]) ? r += Qr + h.join(mn) + Zr : (e && (h = h.map((c) => typeof c == "number" ? Math.floor(c) : c)), r += qr + h.join(mn) + Jr)) : (r += a.property, t || (r += is + a.val)), r += ts; return r; } clearTrace() { this.traceArr = []; } _trace(t) { let e = this.traceArr, i; e.push(t), i = e.length, i >= rs && e.shift(); } reset() { const t = this.getCanvas().getPixelRatio(); this.setTransform(1 * t, 0, 0, 1 * t, 0, 0); } getCanvas() { return this.canvas; } clear(t) { const e = this.getCanvas(); t ? this.clearRect(t.x || 0, t.y || 0, t.width || 0, t.height || 0) : this.clearRect(0, 0, e.getWidth() / e.pixelRatio, e.getHeight() / e.pixelRatio); } _applyLineCap(t) { const e = t.attrs.lineCap; e && this.setAttr("lineCap", e); } _applyOpacity(t) { const e = t.getAbsoluteOpacity(); e !== 1 && this.setAttr("globalAlpha", e); } _applyLineJoin(t) { const e = t.attrs.lineJoin; e && this.setAttr("lineJoin", e); } setAttr(t, e) { this._context[t] = e; } arc(t, e, i, n, r, s) { this._context.arc(t, e, i, n, r, s); } arcTo(t, e, i, n, r) { this._context.arcTo(t, e, i, n, r); } beginPath() { this._context.beginPath(); } bezierCurveTo(t, e, i, n, r, s) { this._context.bezierCurveTo(t, e, i, n, r, s); } clearRect(t, e, i, n) { this._context.clearRect(t, e, i, n); } clip(...t) { this._context.clip.apply(this._context, t); } closePath() { this._context.closePath(); } createImageData(t, e) { const i = arguments; if (i.length === 2) return this._context.createImageData(t, e); if (i.length === 1) return this._context.createImageData(t); } createLinearGradient(t, e, i, n) { return this._context.createLinearGradient(t, e, i, n); } createPattern(t, e) { return this._context.createPattern(t, e); } createRadialGradient(t, e, i, n, r, s) { return this._context.createRadialGradient(t, e, i, n, r, s); } drawImage(t, e, i, n, r, s, a, o, h) { const c = arguments, y = this._context; c.length === 3 ? y.drawImage(t, e, i) : c.length === 5 ? y.drawImage(t, e, i, n, r) : c.length === 9 && y.drawImage(t, e, i, n, r, s, a, o, h); } ellipse(t, e, i, n, r, s, a, o) { this._context.ellipse(t, e, i, n, r, s, a, o); } isPointInPath(t, e, i, n) { return i ? this._context.isPointInPath(i, t, e, n) : this._context.isPointInPath(t, e, n); } fill(...t) { this._context.fill.apply(this._context, t); } fillRect(t, e, i, n) { this._context.fillRect(t, e, i, n); } strokeRect(t, e, i, n) { this._context.strokeRect(t, e, i, n); } fillText(t, e, i, n) { n ? this._context.fillText(t, e, i, n) : this._context.fillText(t, e, i); } measureText(t) { return this._context.measureText(t); } getImageData(t, e, i, n) { return this._context.getImageData(t, e, i, n); } lineTo(t, e) { this._context.lineTo(t, e); } moveTo(t, e) { this._context.moveTo(t, e); } rect(t, e, i, n) { this._context.rect(t, e, i, n); } roundRect(t, e, i, n, r) { this._context.roundRect(t, e, i, n, r); } putImageData(t, e, i) { this._context.putImageData(t, e, i); } quadraticCurveTo(t, e, i, n) { this._context.quadraticCurveTo(t, e, i, n); } restore() { this._context.restore(); } rotate(t) { this._context.rotate(t); } save() { this._context.save(); } scale(t, e) { this._context.scale(t, e); } setLineDash(t) { this._context.setLineDash ? this._context.setLineDash(t) : "mozDash" in this._context ? this._context.mozDash = t : "webkitLineDash" in this._context && (this._context.webkitLineDash = t); } getLineDash() { return this._context.getLineDash(); } setTransform(t, e, i, n, r, s) { this._context.setTransform(t, e, i, n, r, s); } stroke(t) { t ? this._context.stroke(t) : this._context.stroke(); } strokeText(t, e, i, n) { this._context.strokeText(t, e, i, n); } transform(t, e, i, n, r, s) { this._context.transform(t, e, i, n, r, s); } translate(t, e) { this._context.translate(t, e); } _enableTrace() { let t = this, e = yn.length, i = this.setAttr, n, r; const s = function(a) { let o = t[a], h; t[a] = function() { return r = jr(Array.prototype.slice.call(arguments, 0)), h = o.apply(t, arguments), t._trace({ method: a, args: r }), h; }; }; for (n = 0; n < e; n++) s(yn[n]); t.setAttr = function() { i.apply(t, arguments); const a = arguments[0]; let o = arguments[1]; (a === "shadowOffsetX" || a === "shadowOffsetY" || a === "shadowBlur") && (o = o / this.canvas.getPixelRatio()), t._trace({ property: a, val: o }); }; } _applyGlobalCompositeOperation(t) { const e = t.attrs.globalCompositeOperation; !e || e === "source-over" || this.setAttr("globalCompositeOperation", e); } } At.Context = Be; ns.forEach(function(l) { Object.defineProperty(Be.prototype, l, { get() { return this._context[l]; }, set(t) { this._context[l] = t; } }); }); class ss extends Be { constructor(t, { willReadFrequently: e = !1 } = {}) { super(t), this._context = t._canvas.getContext("2d", { willReadFrequently: e }); } _fillColor(t) { const e = t.fill(); this.setAttr("fillStyle", e), t._fillFunc(this); } _fillPattern(t) { this.setAttr("fillStyle", t._getFillPattern()), t._fillFunc(this); } _fillLinearGradient(t) { const e = t._getLinearGradient(); e && (this.setAttr("fillStyle", e), t._fillFunc(this)); } _fillRadialGradient(t) { const e = t._getRadialGradient(); e && (this.setAttr("fillStyle", e), t._fillFunc(this)); } _fill(t) { const e = t.fill(), i = t.getFillPriority(); if (e && i === "color") { this._fillColor(t); return; } const n = t.getFillPatternImage(); if (n && i === "pattern") { this._fillPattern(t); return; } const r = t.getFillLinearGradientColorStops(); if (r && i === "linear-gradient") { this._fillLinearGradient(t); return; } const s = t.getFillRadialGradientColorStops(); if (s && i === "radial-gradient") { this._fillRadialGradient(t); return; } e ? this._fillColor(t) : n ? this._fillPattern(t) : r ? this._fillLinearGradient(t) : s && this._fillRadialGradient(t); } _strokeLinearGradient(t) { const e = t.getStrokeLinearGradientStartPoint(), i = t.getStrokeLinearGradientEndPoint(), n = t.getStrokeLinearGradientColorStops(), r = this.createLinearGradient(e.x, e.y, i.x, i.y); if (n) { for (let s = 0; s < n.length; s += 2) r.addColorStop(n[s], n[s + 1]); this.setAttr("strokeStyle", r); } } _stroke(t) { const e = t.dash(), i = t.getStrokeScaleEnabled(); if (t.hasStroke()) { if (!i) { this.save(); const r = this.getCanvas().getPixelRatio(); this.setTransform(r, 0, 0, r, 0, 0); } this._applyLineCap(t), e && t.dashEnabled() && (this.setLineDash(e), this.setAttr("lineDashOffset", t.dashOffset())), this.setAttr("lineWidth", t.strokeWidth()), t.getShadowForStrokeEnabled() || this.setAttr("shadowColor", "rgba(0,0,0,0)"), t.getStrokeLinearGradientColorStops() ? this._strokeLinearGradient(t) : this.setAttr("strokeStyle", t.stroke()), t._strokeFunc(this), i || this.restore(); } } _applyShadow(t) { var e, i, n; const r = (e = t.getShadowRGBA()) !== null && e !== void 0 ? e : "black", s = (i = t.getShadowBlur()) !== null && i !== void 0 ? i : 5, a = (n = t.getShadowOffset()) !== null && n !== void 0 ? n : { x: 0, y: 0 }, o = t.getAbsoluteScale(), h = this.canvas.getPixelRatio(), c = o.x * h, y = o.y * h; this.setAttr("shadowColor", r), this.setAttr("shadowBlur", s * Math.min(Math.abs(c), Math.abs(y))), this.setAttr("shadowOffsetX", a.x * c), this.setAttr("shadowOffsetY", a.y * y); } } At.SceneContext = ss; class as extends Be { constructor(t) { super(t), this._context = t._canvas.getContext("2d", { willReadFrequently: !0 }); } _fill(t) { this.save(), this.setAttr("fillStyle", t.colorKey), t._fillFuncHit(this), this.restore(); } strokeShape(t) { t.hasHitStroke() && this._stroke(t); } _stroke(t) { if (t.hasHitStroke()) { const e = t.getStrokeScaleEnabled(); if (!e) { this.save(); const r = this.getCanvas().getPixelRatio(); this.setTransform(r, 0, 0, r, 0, 0); } this._applyLineCap(t); const i = t.hitStrokeWidth(), n = i === "auto" ? t.strokeWidth() : i; this.setAttr("lineWidth", n), this.setAttr("strokeStyle", t.colorKey), t._strokeFuncHit(this), e || this.restore(); } } } At.HitContext = as; Object.defineProperty(bt, "__esModule", { value: !0 }); bt.HitCanvas = bt.SceneCanvas = bt.Canvas = void 0; const Le = nt, ir = At, nr = H, os = V, ls = L; let Ae; function hs() { if (Ae) return Ae; const l = Le.Util.createCanvasElement(), t = l.getContext("2d"); return Ae = function() { const e = nr.Konva._global.devicePixelRatio || 1, i = t.webkitBackingStorePixelRatio || t.mozBackingStorePixelRatio || t.msBackingStorePixelRatio || t.oBackingStorePixelRatio || t.backingStorePixelRatio || 1; return e / i; }(), Le.Util.releaseCanvas(l), Ae; } class He { constructor(t) { this.pixelRatio = 1, this.width = 0, this.height = 0, this.isCache = !1; const i = (t || {}).pixelRatio || nr.Konva.pixelRatio || hs(); this.pixelRatio = i, this._canvas = Le.Util.createCanvasElement(), this._canvas.style.padding = "0", this._canvas.style.margin = "0", this._canvas.style.border = "0", this._canvas.style.background = "transparent", this._canvas.style.position = "absolute", this._canvas.style.top = "0", this._canvas.style.left = "0"; } getContext() { return this.context; } getPixelRatio() { return this.pixelRatio; } setPixelRatio(t) { const e = this.pixelRatio; this.pixelRatio = t, this.setSize(this.getWidth() / e, this.getHeight() / e); } setWidth(t) { this.width = this._canvas.width = t * this.pixelRatio, this._canvas.style.width = t + "px"; const e = this.pixelRatio; this.getContext()._context.scale(e, e); } setHeight(t) { this.height = this._canvas.height = t * this.pixelRatio, this._canvas.style.height = t + "px"; const e = this.pixelRatio; this.getContext()._context.scale(e, e); } getWidth() { return this.width; } getHeight() { return this.height; } setSize(t, e) { this.setWidth(t || 0), this.setHeight(e || 0); } toDataURL(t, e) { try { return this._canvas.toDataURL(t, e); } catch { try { return this._canvas.toDataURL(); } catch (n) { return Le.Util.error("Unable to get data URL. " + n.message + " For more info read https://konvajs.org/docs/posts/Tainted_Canvas.html."), ""; } } } } bt.Canvas = He; os.Factory.addGetterSetter(He, "pixelRatio", void 0, (0, ls.getNumberValidator)()); class cs extends He { constructor(t = { width: 0, height: 0, willReadFrequently: !1 }) { super(t), this.context = new ir.SceneContext(this, { willReadFrequently: t.willReadFrequently }), this.setSize(t.width, t.height); } } bt.SceneCanvas = cs; class ds extends He { constructor(t = { width: 0, height: 0 }) { super(t), this.hitCanvas = !0, this.context = new ir.HitContext(this), this.setSize(t.width, t.height); } } bt.HitCanvas = ds; var Ve = {}; (function(l) { Object.defineProperty(l, "__esModule", { value: !0 }), l.DD = void 0; const t = H, e = nt; l.DD = { get isDragging() { let i = !1; return l.DD._dragElements.forEach((n) => { n.dragStatus === "dragging" && (i = !0); }), i; }, justDragged: !1, get node() { let i; return l.DD._dragElements.forEach((n) => { i = n.node; }), i; }, _dragElements: /* @__PURE__ */ new Map(), _drag(i) { const n = []; l.DD._dragElements.forEach((r, s) => { const { node: a } = r, o = a.getStage(); o.setPointersPositions(i), r.pointerId === void 0 && (r.pointerId = e.Util._getFirstPointerId(i)); const h = o._changedPointerPositions.find((c) => c.id === r.pointerId); if (h) { if (r.dragStatus !== "dragging") { const c = a.dragDistance(); if (Math.max(Math.abs(h.x - r.startPointerPos.x), Math.abs(h.y - r.startPointerPos.y)) < c || (a.startDrag({ evt: i }), !a.isDragging())) return; } a._setDragPosition(i, r), n.push(a); } }), n.forEach((r) => { r.fire("dragmove", { type: "dragmove", target: r, evt: i }, !0); }); }, _endDragBefore(i) { const n = []; l.DD._dragElements.forEach((r) => { const { node: s } = r, a = s.getStage(); if (i && a.setPointersPositions(i), !a._changedPointerPositions.find((c) => c.id === r.pointerId)) return; (r.dragStatus === "dragging" || r.dragStatus === "stopped") && (l.DD.justDragged = !0, t.Konva._mouseListenClick = !1, t.Konva._touchListenClick = !1, t.Konva._pointerListenClick = !1, r.dragStatus = "stopped"); const h = r.node.getLayer() || r.node instanceof t.Konva.Stage && r.node; h && n.indexOf(h) === -1 && n.push(h); }), n.forEach((r) => { r.draw(); }); }, _endDragAfter(i) { l.DD._dragElements.forEach((n, r) => { n.dragStatus === "stopped" && n.node.fire("dragend", { type: "dragend", target: n.node, evt: i }, !0), n.dragStatus !== "dragging" && l.DD._dragElements.delete(r); }); } }, t.Konva.isBrowser && (window.addEventListener("mouseup", l.DD._endDragBefore, !0), window.addEventListener("touchend", l.DD._endDragBefore, !0), window.addEventListener("touchcancel", l.DD._endDragBefore, !0), window.addEventListener("mousemove", l.DD._drag), window.addEventListener("touchmove", l.DD._drag), window.addEventListener("mouseup", l.DD._endDragAfter, !1), window.addEventListener("touchend", l.DD._endDragAfter, !1), window.addEventListener("touchcancel", l.DD._endDragAfter, !1)); })(Ve); Object.defineProperty(et, "__esModule", { value: !0 }); et.Node = void 0; const $ = nt, we = V, me = bt, Dt = H, _t = Ve, lt = L, Oe = "absoluteOpacity", Pe = "allEventListeners", Et = "absoluteTransform", _n = "absoluteScale", $t = "canvas", us = "Change", gs = "children", fs = "konva", $i = "listening", vn = "mouseenter", bn = "mouseleave", Sn = "set", Cn = "Shape", De = " ", wn = "stage", Lt = "transform", ps = "Stage", zi = "visible", ms = [ "xChange.konva", "yChange.konva", "scaleXChange.konva", "scaleYChange.konva", "skewXChange.konva", "skewYChange.konva", "rotationChange.konva", "offsetXChange.konva", "offsetYChange.konva", "transformsEnabledChange.konva" ].join(De); let ys = 1; class G { constructor(t) { this._id = ys++, this.eventListeners = {}, this.attrs = {}, this.index = 0, this._allEventListeners = null, this.parent = null, this._cache = /* @__PURE__ */ new Map(), this._attachedDepsListeners = /* @__PURE__ */ new Map(), this._lastPos = null, this._batchingTransformChange = !1, this._needClearTransformCache = !1, this._filterUpToDate = !1, this._isUnderCache = !1, this._dragEventId = null, this._shouldFireChangeEvents = !1, this.setAttrs(t), this._shouldFireChangeEvents = !0; } hasChildren() { return !1; } _clearCache(t) { (t === Lt || t === Et) && this._cache.get(t) ? this._cache.get(t).dirty = !0 : t ? this._cache.delete(t) : this._cache.clear(); } _getCache(t, e) { let i = this._cache.get(t); return (i === void 0 || (t === Lt || t === Et) && i.dirty === !0) && (i = e.call(this), this._cache.set(t, i)), i; } _calculate(t, e, i) { if (!this._attachedDepsListeners.get(t)) { const n = e.map((r) => r + "Change.konva").join(De); this.on(n, () => { this._clearCache(t); }), this._attachedDepsListeners.set(t, !0); } return this._getCache(t, i); } _getCanvasCache() { return this._cache.get($t); } _clearSelfAndDescendantCache(t) { this._clearCache(t), t === Et && this.fire("absoluteTransformChange"); } clearCache() { if (this._cache.has($t)) { const { scene: t, filter: e, hit: i } = this._cache.get($t); $.Util.releaseCanvas(t, e, i), this._cache.delete($t); } return this._clearSelfAndDescendantCache(), this._requestDraw(), this; } cache(t) { const e = t || {}; let i = {}; (e.x === void 0 || e.y === void 0 || e.width === void 0 || e.height === void 0) && (i = this.getClientRect({ skipTransform: !0, relativeTo: this.getParent() || void 0 })); let n = Math.ceil(e.width || i.width), r = Math.ceil(e.height || i.height), s = e.pixelRatio, a = e.x === void 0 ? Math.floor(i.x) : e.x, o = e.y === void 0 ? Math.floor(i.y) : e.y, h = e.offset || 0, c = e.drawBorder || !1, y = e.hitCanvasPixelRatio || 1; if (!n || !r) { $.Util.error("Can not cache the node. Width or height of the node equals 0. Caching is skipped."); return; } const g = Math.abs(Math.round(i.x) - a) > 0.5 ? 1 : 0, u = Math.abs(Math.round(i.y) - o) > 0.5 ? 1 : 0; n += h * 2 + g, r += h * 2 + u, a -= h, o -= h; const f = new me.SceneCanvas({ pixelRatio: s, width: n, height: r }), _ = new me.SceneCanvas({ pixelRatio: s, width: 0, height: 0, willReadFrequently: !0 }), v = new me.HitCanvas({ pixelRatio: y, width: n, height: r }), C = f.getContext(), k = v.getContext(); return v.isCache = !0, f.isCache = !0, this._cache.delete($t), this._filterUpToDate = !1, e.imageSmoothingEnabled === !1 && (f.getContext()._context.imageSmoothingEnabled = !1, _.getContext()._context.imageSmoothingEnabled = !1), C.save(), k.save(), C.translate(-a, -o), k.translate(-a, -o), this._isUnderCache = !0, this._clearSelfAndDescendantCache(Oe), this._clearSelfAndDescendantCache(_n), this.drawScene(f, this), this.drawHit(v, this), this._isUnderCache = !1, C.restore(), k.restore(), c && (C.save(), C.beginPath(), C.rect(0, 0, n, r), C.closePath(), C.setAttr("strokeStyle", "red"), C.setAttr("lineWidth", 5), C.stroke(), C.restore()), this._cache.set($t, { scene: f, filter: _, hit: v, x: a, y: o }), this._requestDraw(), this; } isCached() { return this._cache.has($t); } getClientRect(t) { throw new Error('abstract "getClientRect" method call'); } _transformedRect(t, e) { const i = [ { x: t.x, y: t.y }, { x: t.x + t.width, y: t.y }, { x: t.x + t.width, y: t.y + t.height }, { x: t.x, y: t.y + t.height } ]; let n = 1 / 0, r = 1 / 0, s = -1 / 0, a = -1 / 0; const o = this.getAbsoluteTransform(e); return i.forEach(function(h) { const c = o.point(h); n === void 0 && (n = s = c.x, r = a = c.y), n = Math.min(n, c.x), r = Math.min(r, c.y), s = Math.max(s, c.x), a = Math.max(a, c.y); }), { x: n, y: r, width: s - n, height: a - r }; } _drawCachedSceneCanvas(t) { t.save(), t._applyOpacity(this), t._applyGlobalCompositeOperation(this); const e = this._getCanvasCache(); t.translate(e.x, e.y); const i = this._getCachedSceneCanvas(), n = i.pixelRatio; t.drawImage(i._canvas, 0, 0, i.width / n, i.height / n), t.restore(); } _drawCachedHitCanvas(t) { const e = this._getCanvasCache(), i = e.hit; t.save(), t.translate(e.x, e.y), t.drawImage(i._canvas, 0, 0, i.width / i.pixelRatio, i.height / i.pixelRatio), t.restore(); } _getCachedSceneCanvas() { let t = this.filters(), e = this._getCanvasCache(), i = e.scene, n = e.filter, r = n.getContext(), s, a, o, h; if (t) { if (!this._filterUpToDate) { const c = i.pixelRatio; n.setSize(i.width / i.pixelRatio, i.height / i.pixelRatio); try { for (s = t.length, r.clear(), r.drawImage(i._canvas, 0, 0, i.getWidth() / c, i.getHeight() / c), a = r.getImageData(0, 0, n.getWidth(), n.getHeight()), o = 0; o < s; o++) { if (h = t[o], typeof h != "function") { $.Util.error("Filter should be type of function, but got " + typeof h + " instead. Please check correct filters"); continue; } h.call(this, a), r.putImageData(a, 0, 0); } } catch (y) { $.Util.error("Unable to apply filter. " + y.message + " This post my help you https://konvajs.org/docs/posts/Tainted_Canvas.html."); } this._filterUpToDate = !0; } return n; } return i; } on(t, e) { if (this._cache && this._cache.delete(Pe), arguments.length === 3) return this._delegate.apply(this, arguments); let i = t.split(De), n = i.length, r, s, a, o, h; for (r = 0; r < n; r++) s = i[r], a = s.split("."), o = a[0], h = a[1] || "", this.eventListeners[o] || (this.eventListeners[o] = []), this.eventListeners[o].push({ name: h, handler: e }); return this; } off(t, e) { let i = (t || "").split(De), n = i.length, r, s, a, o, h, c; if (this._cache && this._cache.delete(Pe), !t) for (s in this.eventListeners)