@zsviczian/excalidraw 0.17.1-obsidian-11 → 0.17.1-obsidian-12

package/dist/excalidraw.development.js

@@ -37,7 +37,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"LaserPointer\": () => (/* binding */ $94cfa2cfccc8cc22$export$6531021b3bf36eae)\n/* harmony export */ });\nfunction $parcel$export(e, n, v, s) {\n  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});\n}\nvar $94cfa2cfccc8cc22$exports = {};\n\n$parcel$export($94cfa2cfccc8cc22$exports, \"LaserPointer\", () => $94cfa2cfccc8cc22$export$6531021b3bf36eae);\nfunction $8cd7efb5af385306$export$e16d8520af44a096([ax, ay, ar], [bx, by, br]) {\n    return [\n        ax + bx,\n        ay + by,\n        ar + br\n    ];\n}\nfunction $8cd7efb5af385306$export$f93b5905241a7cca([ax, ay, ar], [bx, by, br]) {\n    return [\n        ax - bx,\n        ay - by,\n        ar - br\n    ];\n}\nfunction $8cd7efb5af385306$export$1c8884ee32bdf443([x, y, r], s) {\n    return [\n        x * s,\n        y * s,\n        r * s\n    ];\n}\nfunction $8cd7efb5af385306$export$1991ecd29cc92c6b([x, y, r]) {\n    return [\n        x / Math.sqrt(x ** 2 + y ** 2),\n        y / Math.sqrt(x ** 2 + y ** 2),\n        r\n    ];\n}\nfunction $8cd7efb5af385306$export$855df823ceb9b81b([x, y, r], rad) {\n    return [\n        Math.cos(rad) * x - Math.sin(rad) * y,\n        Math.sin(rad) * x + Math.cos(rad) * y,\n        r\n    ];\n}\nfunction $8cd7efb5af385306$export$92d8e23769117a5e(a, b, t) {\n    return $8cd7efb5af385306$export$e16d8520af44a096(a, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$f93b5905241a7cca(b, a), t));\n}\nfunction $8cd7efb5af385306$export$3a89f8d6f6bf6c9f(a, b, t) {\n    return a + (b - a) * t;\n}\nfunction $8cd7efb5af385306$export$944b09d2ad10b378(p, p1, p2) {\n    return Math.atan2(p2[1] - p[1], p2[0] - p[0]) - Math.atan2(p1[1] - p[1], p1[0] - p[0]);\n}\nfunction $8cd7efb5af385306$export$3c05aaf71f141f73(a) {\n    return Math.atan2(Math.sin(a), Math.cos(a));\n}\nfunction $8cd7efb5af385306$export$1b9bab504faa9305([x, y]) {\n    return Math.sqrt(x ** 2 + y ** 2);\n}\nfunction $8cd7efb5af385306$export$6c4a311cc157c764([ax, ay], [bx, by]) {\n    return Math.sqrt((bx - ax) ** 2 + (by - ay) ** 2);\n}\nfunction $8cd7efb5af385306$export$46f6d3e1b4bd7c8b(point, direction, radius) {\n    return [\n        $8cd7efb5af385306$export$e16d8520af44a096(point, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$1991ecd29cc92c6b($8cd7efb5af385306$export$855df823ceb9b81b(direction, Math.PI / 2)), radius)),\n        $8cd7efb5af385306$export$e16d8520af44a096(point, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$1991ecd29cc92c6b($8cd7efb5af385306$export$855df823ceb9b81b(direction, -Math.PI / 2)), radius))\n    ];\n}\nfunction $8cd7efb5af385306$export$ccb1b4dfbd3f36a7(ps) {\n    if (ps.length < 2) return 0;\n    let len = 0;\n    for(let i = 1; i <= ps.length - 1; i++)len += $8cd7efb5af385306$export$6c4a311cc157c764(ps[i - 1], ps[i]);\n    len += $8cd7efb5af385306$export$6c4a311cc157c764(ps[ps.length - 2], ps[ps.length - 1]);\n    return len;\n}\nconst $8cd7efb5af385306$export$7d15b64cf5a3a4c4 = (v, min, max)=>Math.max(min, Math.min(max, v));\nfunction $8cd7efb5af385306$export$548cc43590159af6(p3, p1, p2) {\n    const sMag = $8cd7efb5af385306$export$6c4a311cc157c764(p1, p2);\n    if (sMag === 0) return $8cd7efb5af385306$export$6c4a311cc157c764(p3, p1);\n    const u = $8cd7efb5af385306$export$7d15b64cf5a3a4c4(((p3[0] - p1[0]) * (p2[0] - p1[0]) + (p3[1] - p1[1]) * (p2[1] - p1[1])) / sMag ** 2, 0, 1);\n    const pi = [\n        p1[0] + u * (p2[0] - p1[0]),\n        p1[1] + u * (p2[1] - p1[1]),\n        p3[2]\n    ];\n    return $8cd7efb5af385306$export$6c4a311cc157c764(pi, p3);\n}\n\n\n\nfunction $34bab0059f842ce6$export$ef693d1572e64fb8(points, epsilon) {\n    if (epsilon === 0) return points;\n    if (points.length <= 2) return points;\n    const first = points[0];\n    const last = points[points.length - 1];\n    const [maxDistance, maxIndex] = points.reduce(([maxDistance, maxIndex], point, index)=>{\n        const distance = (0, $8cd7efb5af385306$export$548cc43590159af6)(point, first, last);\n        return distance > maxDistance ? [\n            distance,\n            index\n        ] : [\n            maxDistance,\n            maxIndex\n        ];\n    }, [\n        0,\n        -1\n    ]);\n    if (maxDistance >= epsilon) {\n        const maxIndexPoint = points[maxIndex];\n        return [\n            ...$34bab0059f842ce6$export$ef693d1572e64fb8([\n                first,\n                ...points.slice(1, maxIndex),\n                maxIndexPoint\n            ], epsilon).slice(0, -1),\n            maxIndexPoint,\n            ...$34bab0059f842ce6$export$ef693d1572e64fb8([\n                maxIndexPoint,\n                ...points.slice(maxIndex, -1),\n                last\n            ], epsilon).slice(1)\n        ];\n    } else return [\n        first,\n        last\n    ];\n}\n\n\nclass $94cfa2cfccc8cc22$export$6531021b3bf36eae {\n    static #_ = (()=>{\n        this.defaults = {\n            size: 2,\n            streamline: 0.45,\n            simplify: 0.1,\n            simplifyPhase: \"output\",\n            sizeMapping: ()=>1\n        };\n    })();\n    static #_1 = (()=>{\n        this.constants = {\n            cornerDetectionMaxAngle: 120,\n            cornerDetectionVariance: (s)=>s > 35 ? 0.5 : 1,\n            maxTailLength: 50\n        };\n    })();\n    constructor(options){\n        this.originalPoints = [];\n        this.stablePoints = [];\n        this.tailPoints = [];\n        this.isFresh = true;\n        this.options = Object.assign({}, $94cfa2cfccc8cc22$export$6531021b3bf36eae.defaults, options);\n    }\n    get lastPoint() {\n        return this.tailPoints[this.tailPoints.length - 1] ?? this.stablePoints[this.stablePoints.length - 1];\n    }\n    addPoint(point) {\n        const lastPoint = this.originalPoints[this.originalPoints.length - 1];\n        if (lastPoint && lastPoint[0] === point[0] && lastPoint[1] === point[1]) return;\n        this.originalPoints.push(point);\n        if (this.isFresh) {\n            this.isFresh = false;\n            this.stablePoints.push(point);\n            return;\n        }\n        if (this.options.streamline > 0) point = $8cd7efb5af385306$export$92d8e23769117a5e(this.lastPoint, point, 1 - this.options.streamline);\n        this.tailPoints.push(point);\n        if ($8cd7efb5af385306$export$ccb1b4dfbd3f36a7(this.tailPoints) > $94cfa2cfccc8cc22$export$6531021b3bf36eae.constants.maxTailLength) this.stabilizeTail();\n    }\n    close() {\n        this.stabilizeTail();\n    }\n    stabilizeTail() {\n        if (this.options.simplify > 0 && this.options.simplifyPhase == \"tail\") throw new Error(\"Not implemented yet\");\n        else {\n            this.stablePoints.push(...this.tailPoints);\n            this.tailPoints = [];\n        }\n    }\n    getSize(sizeOverride, pressure, index, totalLength, runningLength) {\n        return (sizeOverride ?? this.options.size) * this.options.sizeMapping({\n            pressure: pressure,\n            runningLength: runningLength,\n            currentIndex: index,\n            totalLength: totalLength\n        });\n    }\n    getStrokeOutline(sizeOverride) {\n        if (this.isFresh) return [];\n        let points = [\n            ...this.stablePoints,\n            ...this.tailPoints\n        ];\n        if (this.options.simplify > 0 && this.options.simplifyPhase === \"input\") points = (0, $34bab0059f842ce6$export$ef693d1572e64fb8)(points, this.options.simplify);\n        const len = points.length;\n        if (len === 0) return [];\n        if (len === 1) {\n            const c = points[0];\n            const ps = [];\n            for(let theta = 0; theta <= Math.PI * 2; theta += Math.PI / 16)ps.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$855df823ceb9b81b([\n                1,\n                0,\n                0\n            ], theta), this.getSize(sizeOverride, c[2], 0, len, 0))));\n            ps.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443([\n                1,\n                0,\n                0\n            ], this.getSize(sizeOverride, c[2], 0, len, 0))));\n            return ps;\n        }\n        if (len === 2) {\n            const c = points[0];\n            const n = points[1];\n            const ps = [];\n            const pAngle = $8cd7efb5af385306$export$944b09d2ad10b378(c, [\n                c[0],\n                c[1] - 100,\n                c[2]\n            ], n);\n            for(let theta = pAngle; theta <= Math.PI + pAngle; theta += Math.PI / 16)ps.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$855df823ceb9b81b([\n                1,\n                0,\n                0\n            ], theta), this.getSize(sizeOverride, c[2], 0, len, 0))));\n            for(let theta = Math.PI + pAngle; theta <= Math.PI * 2 + pAngle; theta += Math.PI / 16)ps.push($8cd7efb5af385306$export$e16d8520af44a096(n, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$855df823ceb9b81b([\n                1,\n                0,\n                0\n            ], theta), this.getSize(sizeOverride, n[2], 0, len, 0))));\n            ps.push(ps[0]);\n            return ps;\n        }\n        const forwardPoints = [];\n        const backwardPoints = [];\n        let speed = 0;\n        let prevSpeed = 0;\n        let visibleStartIndex = 0;\n        let runningLength = 0;\n        for(let i = 1; i < len - 1; i++){\n            const p = points[i - 1], c = points[i], n = points[i + 1];\n            let pressure = c[2];\n            const d = $8cd7efb5af385306$export$6c4a311cc157c764(p, c);\n            runningLength += d;\n            speed = prevSpeed + (d - prevSpeed) * 0.2;\n            const cSize = this.getSize(sizeOverride, pressure, i, len, runningLength);\n            if (cSize === 0) {\n                visibleStartIndex = i + 1;\n                continue;\n            }\n            const dirPC = $8cd7efb5af385306$export$1991ecd29cc92c6b($8cd7efb5af385306$export$f93b5905241a7cca(p, c));\n            const dirNC = $8cd7efb5af385306$export$1991ecd29cc92c6b($8cd7efb5af385306$export$f93b5905241a7cca(n, c));\n            const p1dirPC = $8cd7efb5af385306$export$855df823ceb9b81b(dirPC, Math.PI / 2);\n            const p2dirPC = $8cd7efb5af385306$export$855df823ceb9b81b(dirPC, -Math.PI / 2);\n            const p1dirNC = $8cd7efb5af385306$export$855df823ceb9b81b(dirNC, Math.PI / 2);\n            const p2dirNC = $8cd7efb5af385306$export$855df823ceb9b81b(dirNC, -Math.PI / 2);\n            const p1PC = $8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443(p1dirPC, cSize));\n            const p2PC = $8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443(p2dirPC, cSize));\n            const p1NC = $8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443(p1dirNC, cSize));\n            const p2NC = $8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443(p2dirNC, cSize));\n            const ftdir = $8cd7efb5af385306$export$e16d8520af44a096(p1dirPC, p2dirNC);\n            const btdir = $8cd7efb5af385306$export$e16d8520af44a096(p2dirPC, p1dirNC);\n            const paPC = $8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$1b9bab504faa9305(ftdir) === 0 ? dirPC : $8cd7efb5af385306$export$1991ecd29cc92c6b(ftdir), cSize));\n            const paNC = $8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$1b9bab504faa9305(btdir) === 0 ? dirNC : $8cd7efb5af385306$export$1991ecd29cc92c6b(btdir), cSize));\n            const cAngle = $8cd7efb5af385306$export$3c05aaf71f141f73($8cd7efb5af385306$export$944b09d2ad10b378(c, p, n));\n            const D_ANGLE = $94cfa2cfccc8cc22$export$6531021b3bf36eae.constants.cornerDetectionMaxAngle / 180 * Math.PI * $94cfa2cfccc8cc22$export$6531021b3bf36eae.constants.cornerDetectionVariance(speed);\n            if (Math.abs(cAngle) < D_ANGLE) {\n                const tAngle = Math.abs($8cd7efb5af385306$export$3c05aaf71f141f73(Math.PI - cAngle)) // turn angle\n                ;\n                if (tAngle === 0) continue;\n                if (cAngle < 0) {\n                    backwardPoints.push(p2PC, paNC);\n                    for(let theta = 0; theta <= tAngle; theta += tAngle / 4)forwardPoints.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$855df823ceb9b81b($8cd7efb5af385306$export$1c8884ee32bdf443(p1dirPC, cSize), theta)));\n                    for(let theta = tAngle; theta >= 0; theta -= tAngle / 4)backwardPoints.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$855df823ceb9b81b($8cd7efb5af385306$export$1c8884ee32bdf443(p1dirPC, cSize), theta)));\n                    backwardPoints.push(paNC, p1NC);\n                } else {\n                    forwardPoints.push(p1PC, paPC);\n                    for(let theta = 0; theta <= tAngle; theta += tAngle / 4)backwardPoints.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$855df823ceb9b81b($8cd7efb5af385306$export$1c8884ee32bdf443(p1dirPC, -cSize), -theta)));\n                    for(let theta = tAngle; theta >= 0; theta -= tAngle / 4)forwardPoints.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$855df823ceb9b81b($8cd7efb5af385306$export$1c8884ee32bdf443(p1dirPC, -cSize), -theta)));\n                    forwardPoints.push(paPC, p2NC);\n                }\n            } else {\n                forwardPoints.push(paPC);\n                backwardPoints.push(paNC);\n            }\n            prevSpeed = speed;\n        }\n        const first = points[visibleStartIndex];\n        const second = points[visibleStartIndex + 1];\n        const penultimate = points[len - 2];\n        const ultimate = points[len - 1];\n        if (visibleStartIndex >= len - 2) return [];\n        const dirFS = $8cd7efb5af385306$export$1991ecd29cc92c6b($8cd7efb5af385306$export$f93b5905241a7cca(second, first));\n        const dirPU = $8cd7efb5af385306$export$1991ecd29cc92c6b($8cd7efb5af385306$export$f93b5905241a7cca(penultimate, ultimate));\n        const ppdirFS = $8cd7efb5af385306$export$855df823ceb9b81b(dirFS, -Math.PI / 2);\n        const ppdirPU = $8cd7efb5af385306$export$855df823ceb9b81b(dirPU, Math.PI / 2);\n        const startCapSize = this.getSize(sizeOverride, first[2], 0, len, 0);\n        const startCap = [];\n        const endCapSize = this.getSize(sizeOverride, penultimate[2], len - 2, len, runningLength);\n        const endCap = [];\n        for(let theta = 0; theta <= Math.PI; theta += Math.PI / 16)startCap.unshift($8cd7efb5af385306$export$e16d8520af44a096(first, $8cd7efb5af385306$export$855df823ceb9b81b($8cd7efb5af385306$export$1c8884ee32bdf443(ppdirFS, startCapSize), -theta)));\n        startCap.unshift($8cd7efb5af385306$export$e16d8520af44a096(first, $8cd7efb5af385306$export$1c8884ee32bdf443(ppdirFS, -startCapSize)));\n        for(let theta = 0; theta <= Math.PI; theta += Math.PI / 16)endCap.push($8cd7efb5af385306$export$e16d8520af44a096(ultimate, $8cd7efb5af385306$export$855df823ceb9b81b($8cd7efb5af385306$export$1c8884ee32bdf443(ppdirPU, -endCapSize), -theta)));\n        const strokeOutline = [\n            ...startCap,\n            ...forwardPoints,\n            ...endCap.reverse(),\n            ...backwardPoints.reverse()\n        ];\n        if (startCap.length > 0) strokeOutline.push(startCap[0]);\n        if (this.options.simplify > 0 && this.options.simplifyPhase === \"output\") return (0, $34bab0059f842ce6$export$ef693d1572e64fb8)(strokeOutline, this.options.simplify);\n        return strokeOutline;\n    }\n}\n\n\n\n\n\n//# sourceMappingURL=esm.js.map\n\n\n//# sourceURL=webpack://ExcalidrawLib/../../node_modules/@excalidraw/laser-pointer/dist/esm.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"LaserPointer\": () => (/* binding */ $94cfa2cfccc8cc22$export$6531021b3bf36eae)\n/* harmony export */ });\n\nfunction $parcel$export(e, n, v, s) {\n  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});\n}\nvar $94cfa2cfccc8cc22$exports = {};\n\n$parcel$export($94cfa2cfccc8cc22$exports, \"LaserPointer\", () => $94cfa2cfccc8cc22$export$6531021b3bf36eae);\nfunction $8cd7efb5af385306$export$e16d8520af44a096([ax, ay, ar], [bx, by, br]) {\n    return [\n        ax + bx,\n        ay + by,\n        ar + br\n    ];\n}\nfunction $8cd7efb5af385306$export$f93b5905241a7cca([ax, ay, ar], [bx, by, br]) {\n    return [\n        ax - bx,\n        ay - by,\n        ar - br\n    ];\n}\nfunction $8cd7efb5af385306$export$1c8884ee32bdf443([x, y, r], s) {\n    return [\n        x * s,\n        y * s,\n        r * s\n    ];\n}\nfunction $8cd7efb5af385306$export$1991ecd29cc92c6b([x, y, r]) {\n    return [\n        x / Math.sqrt(x ** 2 + y ** 2),\n        y / Math.sqrt(x ** 2 + y ** 2),\n        r\n    ];\n}\nfunction $8cd7efb5af385306$export$855df823ceb9b81b([x, y, r], rad) {\n    return [\n        Math.cos(rad) * x - Math.sin(rad) * y,\n        Math.sin(rad) * x + Math.cos(rad) * y,\n        r\n    ];\n}\nfunction $8cd7efb5af385306$export$92d8e23769117a5e(a, b, t) {\n    return $8cd7efb5af385306$export$e16d8520af44a096(a, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$f93b5905241a7cca(b, a), t));\n}\nfunction $8cd7efb5af385306$export$3a89f8d6f6bf6c9f(a, b, t) {\n    return a + (b - a) * t;\n}\nfunction $8cd7efb5af385306$export$944b09d2ad10b378(p, p1, p2) {\n    return Math.atan2(p2[1] - p[1], p2[0] - p[0]) - Math.atan2(p1[1] - p[1], p1[0] - p[0]);\n}\nfunction $8cd7efb5af385306$export$3c05aaf71f141f73(a) {\n    return Math.atan2(Math.sin(a), Math.cos(a));\n}\nfunction $8cd7efb5af385306$export$1b9bab504faa9305([x, y]) {\n    return Math.sqrt(x ** 2 + y ** 2);\n}\nfunction $8cd7efb5af385306$export$6c4a311cc157c764([ax, ay], [bx, by]) {\n    return Math.sqrt((bx - ax) ** 2 + (by - ay) ** 2);\n}\nfunction $8cd7efb5af385306$export$46f6d3e1b4bd7c8b(point, direction, radius) {\n    return [\n        $8cd7efb5af385306$export$e16d8520af44a096(point, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$1991ecd29cc92c6b($8cd7efb5af385306$export$855df823ceb9b81b(direction, Math.PI / 2)), radius)),\n        $8cd7efb5af385306$export$e16d8520af44a096(point, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$1991ecd29cc92c6b($8cd7efb5af385306$export$855df823ceb9b81b(direction, -Math.PI / 2)), radius))\n    ];\n}\nfunction $8cd7efb5af385306$export$ccb1b4dfbd3f36a7(ps) {\n    if (ps.length < 2) return 0;\n    let len = 0;\n    for(let i = 1; i <= ps.length - 1; i++)len += $8cd7efb5af385306$export$6c4a311cc157c764(ps[i - 1], ps[i]);\n    len += $8cd7efb5af385306$export$6c4a311cc157c764(ps[ps.length - 2], ps[ps.length - 1]);\n    return len;\n}\nconst $8cd7efb5af385306$export$7d15b64cf5a3a4c4 = (v, min, max)=>Math.max(min, Math.min(max, v));\nfunction $8cd7efb5af385306$export$548cc43590159af6(p3, p1, p2) {\n    const sMag = $8cd7efb5af385306$export$6c4a311cc157c764(p1, p2);\n    if (sMag === 0) return $8cd7efb5af385306$export$6c4a311cc157c764(p3, p1);\n    const u = $8cd7efb5af385306$export$7d15b64cf5a3a4c4(((p3[0] - p1[0]) * (p2[0] - p1[0]) + (p3[1] - p1[1]) * (p2[1] - p1[1])) / sMag ** 2, 0, 1);\n    const pi = [\n        p1[0] + u * (p2[0] - p1[0]),\n        p1[1] + u * (p2[1] - p1[1]),\n        p3[2]\n    ];\n    return $8cd7efb5af385306$export$6c4a311cc157c764(pi, p3);\n}\n\n\n\nfunction $34bab0059f842ce6$export$ef693d1572e64fb8(points, epsilon) {\n    if (epsilon === 0) return points;\n    if (points.length <= 2) return points;\n    const first = points[0];\n    const last = points[points.length - 1];\n    const [maxDistance, maxIndex] = points.reduce(([maxDistance, maxIndex], point, index)=>{\n        const distance = (0, $8cd7efb5af385306$export$548cc43590159af6)(point, first, last);\n        return distance > maxDistance ? [\n            distance,\n            index\n        ] : [\n            maxDistance,\n            maxIndex\n        ];\n    }, [\n        0,\n        -1\n    ]);\n    if (maxDistance >= epsilon) {\n        const maxIndexPoint = points[maxIndex];\n        return [\n            ...$34bab0059f842ce6$export$ef693d1572e64fb8([\n                first,\n                ...points.slice(1, maxIndex),\n                maxIndexPoint\n            ], epsilon).slice(0, -1),\n            maxIndexPoint,\n            ...$34bab0059f842ce6$export$ef693d1572e64fb8([\n                maxIndexPoint,\n                ...points.slice(maxIndex, -1),\n                last\n            ], epsilon).slice(1)\n        ];\n    } else return [\n        first,\n        last\n    ];\n}\n\n\nclass $94cfa2cfccc8cc22$export$6531021b3bf36eae {\n    static{\n        this.defaults = {\n            size: 2,\n            streamline: 0.45,\n            simplify: 0.1,\n            simplifyPhase: \"output\",\n            keepHead: false,\n            sizeMapping: ()=>1\n        };\n    }\n    static{\n        this.constants = {\n            cornerDetectionMaxAngle: 75,\n            cornerDetectionVariance: (s)=>s > 35 ? 0.5 : 1,\n            maxTailLength: 50\n        };\n    }\n    constructor(options){\n        this.originalPoints = [];\n        this.stablePoints = [];\n        this.tailPoints = [];\n        this.isFresh = true;\n        this.options = Object.assign({}, $94cfa2cfccc8cc22$export$6531021b3bf36eae.defaults, options);\n    }\n    get lastPoint() {\n        return this.tailPoints[this.tailPoints.length - 1] ?? this.stablePoints[this.stablePoints.length - 1];\n    }\n    addPoint(point) {\n        const lastPoint = this.originalPoints[this.originalPoints.length - 1];\n        if (lastPoint && lastPoint[0] === point[0] && lastPoint[1] === point[1]) return;\n        this.originalPoints.push(point);\n        if (this.isFresh) {\n            this.isFresh = false;\n            this.stablePoints.push(point);\n            return;\n        }\n        if (this.options.streamline > 0) point = $8cd7efb5af385306$export$92d8e23769117a5e(this.lastPoint, point, 1 - this.options.streamline);\n        this.tailPoints.push(point);\n        if ($8cd7efb5af385306$export$ccb1b4dfbd3f36a7(this.tailPoints) > $94cfa2cfccc8cc22$export$6531021b3bf36eae.constants.maxTailLength) this.stabilizeTail();\n    }\n    close() {\n        this.stabilizeTail();\n    }\n    stabilizeTail() {\n        if (this.options.simplify > 0 && this.options.simplifyPhase == \"tail\") throw new Error(\"Not implemented yet\");\n        else {\n            this.stablePoints.push(...this.tailPoints);\n            this.tailPoints = [];\n        }\n    }\n    getSize(sizeOverride, pressure, index, totalLength, runningLength) {\n        return (sizeOverride ?? this.options.size) * this.options.sizeMapping({\n            pressure: pressure,\n            runningLength: runningLength,\n            currentIndex: index,\n            totalLength: totalLength\n        });\n    }\n    getStrokeOutline(sizeOverride) {\n        if (this.isFresh) return [];\n        let points = [\n            ...this.stablePoints,\n            ...this.tailPoints\n        ];\n        if (this.options.simplify > 0 && this.options.simplifyPhase === \"input\") points = (0, $34bab0059f842ce6$export$ef693d1572e64fb8)(points, this.options.simplify);\n        const len = points.length;\n        if (len === 0) return [];\n        if (len === 1) {\n            const c = points[0];\n            const size = this.getSize(sizeOverride, c[2], 0, len, 0);\n            if (size < 0.5) return [];\n            const ps = [];\n            for(let theta = 0; theta <= Math.PI * 2; theta += Math.PI / 16)ps.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$855df823ceb9b81b([\n                1,\n                0,\n                0\n            ], theta), size)));\n            ps.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443([\n                1,\n                0,\n                0\n            ], this.getSize(sizeOverride, c[2], 0, len, 0))));\n            return ps;\n        }\n        if (len === 2) {\n            const c = points[0];\n            const n = points[1];\n            const cSize = this.getSize(sizeOverride, c[2], 0, len, 0);\n            const nSize = this.getSize(sizeOverride, n[2], 0, len, 0);\n            if (cSize < 0.5 || nSize < 0.5) return [];\n            const ps = [];\n            const pAngle = $8cd7efb5af385306$export$944b09d2ad10b378(c, [\n                c[0],\n                c[1] - 100,\n                c[2]\n            ], n);\n            for(let theta = pAngle; theta <= Math.PI + pAngle; theta += Math.PI / 16)ps.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$855df823ceb9b81b([\n                1,\n                0,\n                0\n            ], theta), cSize)));\n            for(let theta = Math.PI + pAngle; theta <= Math.PI * 2 + pAngle; theta += Math.PI / 16)ps.push($8cd7efb5af385306$export$e16d8520af44a096(n, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$855df823ceb9b81b([\n                1,\n                0,\n                0\n            ], theta), nSize)));\n            ps.push(ps[0]);\n            return ps;\n        }\n        const forwardPoints = [];\n        const backwardPoints = [];\n        let speed = 0;\n        let prevSpeed = 0;\n        let visibleStartIndex = 0;\n        let runningLength = 0;\n        for(let i = 1; i < len - 1; i++){\n            const p = points[i - 1], c = points[i], n = points[i + 1];\n            let pressure = c[2];\n            const d = $8cd7efb5af385306$export$6c4a311cc157c764(p, c);\n            runningLength += d;\n            speed = prevSpeed + (d - prevSpeed) * 0.2;\n            const cSize = this.getSize(sizeOverride, pressure, i, len, runningLength);\n            if (cSize === 0) {\n                visibleStartIndex = i + 1;\n                continue;\n            }\n            const dirPC = $8cd7efb5af385306$export$1991ecd29cc92c6b($8cd7efb5af385306$export$f93b5905241a7cca(p, c));\n            const dirNC = $8cd7efb5af385306$export$1991ecd29cc92c6b($8cd7efb5af385306$export$f93b5905241a7cca(n, c));\n            const p1dirPC = $8cd7efb5af385306$export$855df823ceb9b81b(dirPC, Math.PI / 2);\n            const p2dirPC = $8cd7efb5af385306$export$855df823ceb9b81b(dirPC, -Math.PI / 2);\n            const p1dirNC = $8cd7efb5af385306$export$855df823ceb9b81b(dirNC, Math.PI / 2);\n            const p2dirNC = $8cd7efb5af385306$export$855df823ceb9b81b(dirNC, -Math.PI / 2);\n            const p1PC = $8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443(p1dirPC, cSize));\n            const p2PC = $8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443(p2dirPC, cSize));\n            const p1NC = $8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443(p1dirNC, cSize));\n            const p2NC = $8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443(p2dirNC, cSize));\n            const ftdir = $8cd7efb5af385306$export$e16d8520af44a096(p1dirPC, p2dirNC);\n            const btdir = $8cd7efb5af385306$export$e16d8520af44a096(p2dirPC, p1dirNC);\n            const paPC = $8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$1b9bab504faa9305(ftdir) === 0 ? dirPC : $8cd7efb5af385306$export$1991ecd29cc92c6b(ftdir), cSize));\n            const paNC = $8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$1b9bab504faa9305(btdir) === 0 ? dirNC : $8cd7efb5af385306$export$1991ecd29cc92c6b(btdir), cSize));\n            const cAngle = $8cd7efb5af385306$export$3c05aaf71f141f73($8cd7efb5af385306$export$944b09d2ad10b378(c, p, n));\n            const D_ANGLE = $94cfa2cfccc8cc22$export$6531021b3bf36eae.constants.cornerDetectionMaxAngle / 180 * Math.PI * $94cfa2cfccc8cc22$export$6531021b3bf36eae.constants.cornerDetectionVariance(speed);\n            if (Math.abs(cAngle) < D_ANGLE) {\n                const tAngle = Math.abs($8cd7efb5af385306$export$3c05aaf71f141f73(Math.PI - cAngle)) // turn angle\n                ;\n                if (tAngle === 0) continue;\n                if (cAngle < 0) {\n                    backwardPoints.push(p2PC, paNC);\n                    for(let theta = 0; theta <= tAngle; theta += tAngle / 4)forwardPoints.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$855df823ceb9b81b($8cd7efb5af385306$export$1c8884ee32bdf443(p1dirPC, cSize), theta)));\n                    for(let theta = tAngle; theta >= 0; theta -= tAngle / 4)backwardPoints.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$855df823ceb9b81b($8cd7efb5af385306$export$1c8884ee32bdf443(p1dirPC, cSize), theta)));\n                    backwardPoints.push(paNC, p1NC);\n                } else {\n                    forwardPoints.push(p1PC, paPC);\n                    for(let theta = 0; theta <= tAngle; theta += tAngle / 4)backwardPoints.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$855df823ceb9b81b($8cd7efb5af385306$export$1c8884ee32bdf443(p1dirPC, -cSize), -theta)));\n                    for(let theta = tAngle; theta >= 0; theta -= tAngle / 4)forwardPoints.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$855df823ceb9b81b($8cd7efb5af385306$export$1c8884ee32bdf443(p1dirPC, -cSize), -theta)));\n                    forwardPoints.push(paPC, p2NC);\n                }\n            } else {\n                forwardPoints.push(paPC);\n                backwardPoints.push(paNC);\n            }\n            prevSpeed = speed;\n        }\n        if (visibleStartIndex >= len - 2) {\n            if (this.options.keepHead) {\n                const c = points[len - 1];\n                const ps = [];\n                for(let theta = 0; theta <= Math.PI * 2; theta += Math.PI / 16)ps.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443($8cd7efb5af385306$export$855df823ceb9b81b([\n                    1,\n                    0,\n                    0\n                ], theta), this.options.size)));\n                ps.push($8cd7efb5af385306$export$e16d8520af44a096(c, $8cd7efb5af385306$export$1c8884ee32bdf443([\n                    1,\n                    0,\n                    0\n                ], this.options.size)));\n                return ps;\n            } else return [];\n        }\n        const first = points[visibleStartIndex];\n        const second = points[visibleStartIndex + 1];\n        const penultimate = points[len - 2];\n        const ultimate = points[len - 1];\n        const dirFS = $8cd7efb5af385306$export$1991ecd29cc92c6b($8cd7efb5af385306$export$f93b5905241a7cca(second, first));\n        const dirPU = $8cd7efb5af385306$export$1991ecd29cc92c6b($8cd7efb5af385306$export$f93b5905241a7cca(penultimate, ultimate));\n        const ppdirFS = $8cd7efb5af385306$export$855df823ceb9b81b(dirFS, -Math.PI / 2);\n        const ppdirPU = $8cd7efb5af385306$export$855df823ceb9b81b(dirPU, Math.PI / 2);\n        const startCapSize = this.getSize(sizeOverride, first[2], 0, len, 0);\n        const startCap = [];\n        const endCapSize = this.options.keepHead ? this.options.size : this.getSize(sizeOverride, penultimate[2], len - 2, len, runningLength);\n        const endCap = [];\n        if (startCapSize > 1) {\n            for(let theta = 0; theta <= Math.PI; theta += Math.PI / 16)startCap.unshift($8cd7efb5af385306$export$e16d8520af44a096(first, $8cd7efb5af385306$export$855df823ceb9b81b($8cd7efb5af385306$export$1c8884ee32bdf443(ppdirFS, startCapSize), -theta)));\n            startCap.unshift($8cd7efb5af385306$export$e16d8520af44a096(first, $8cd7efb5af385306$export$1c8884ee32bdf443(ppdirFS, -startCapSize)));\n        } else startCap.push(first);\n        for(let theta = 0; theta <= Math.PI * 3; theta += Math.PI / 16)endCap.push($8cd7efb5af385306$export$e16d8520af44a096(ultimate, $8cd7efb5af385306$export$855df823ceb9b81b($8cd7efb5af385306$export$1c8884ee32bdf443(ppdirPU, -endCapSize), -theta)));\n        const strokeOutline = [\n            ...startCap,\n            ...forwardPoints,\n            ...endCap.reverse(),\n            ...backwardPoints.reverse()\n        ];\n        if (startCap.length > 0) strokeOutline.push(startCap[0]);\n        if (this.options.simplify > 0 && this.options.simplifyPhase === \"output\") return (0, $34bab0059f842ce6$export$ef693d1572e64fb8)(strokeOutline, this.options.simplify);\n        return strokeOutline;\n    }\n}\n\n\n\n\n\n//# sourceMappingURL=esm.js.map\n\n\n//# sourceURL=webpack://ExcalidrawLib/../../node_modules/@excalidraw/laser-pointer/dist/esm.js?");
 
 /***/ }),
 
@@ -728,7 +728,29 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"trackEvent\": () => (/* binding */ trackEvent)\n/* harmony export */ });\n// place here categories that you want to track. We want to track just a\n// small subset of categories at a given time.\nconst ALLOWED_CATEGORIES_TO_TRACK = [\"ai\"];\nconst trackEvent = (category, action, label, value) => {\n  try {\n    // prettier-ignore\n    if (typeof window === \"undefined\" || ({\"VITE_APP_BACKEND_V2_GET_URL\":\"https://json-dev.excalidraw.com/api/v2/\",\"VITE_APP_BACKEND_V2_POST_URL\":\"https://json-dev.excalidraw.com/api/v2/post/\",\"VITE_APP_LIBRARY_URL\":\"https://libraries.excalidraw.com\",\"VITE_APP_LIBRARY_BACKEND\":\"https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries\",\"VITE_APP_WS_SERVER_URL\":\"http://localhost:3002\",\"VITE_APP_PORTAL_URL\":\"\",\"VITE_APP_PLUS_LP\":\"https://plus.excalidraw.com\",\"VITE_APP_PLUS_APP\":\"https://app.excalidraw.com\",\"VITE_APP_AI_BACKEND\":\"http://localhost:3015\",\"VITE_APP_FIREBASE_CONFIG\":\"{\\\"apiKey\\\":\\\"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8\\\",\\\"authDomain\\\":\\\"excalidraw-oss-dev.firebaseapp.com\\\",\\\"projectId\\\":\\\"excalidraw-oss-dev\\\",\\\"storageBucket\\\":\\\"excalidraw-oss-dev.appspot.com\\\",\\\"messagingSenderId\\\":\\\"664559512677\\\",\\\"appId\\\":\\\"1:664559512677:web:a385181f2928d328a7aa8c\\\"}\",\"VITE_APP_DEV_ENABLE_SW\":\"\",\"VITE_APP_DEV_DISABLE_LIVE_RELOAD\":\"\",\"VITE_APP_DISABLE_TRACKING\":\"true\",\"FAST_REFRESH\":\"false\",\"VITE_APP_PORT\":\"3000\",\"VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX\":\"\",\"VITE_APP_COLLAPSE_OVERLAY\":\"true\",\"VITE_APP_ENABLE_ESLINT\":\"true\",\"VITE_PKG_NAME\":\"@zsviczian/excalidraw\",\"VITE_PKG_VERSION\":\"0.17.1-obsidian-10\",\"VITE_IS_EXCALIDRAW_NPM_PACKAGE\":true}).VITE_WORKER_ID // comment out to debug locally\n    || \"development\" === \"production\") {\n      return;\n    }\n\n    if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {\n      return;\n    }\n\n    if (true) {\n      console.info(\"trackEvent\", {\n        category,\n        action,\n        label,\n        value\n      });\n    }\n\n    if (window.sa_event) {\n      window.sa_event(action, {\n        category,\n        label,\n        value\n      });\n    }\n  } catch (error) {\n    console.error(\"error during analytics\", error);\n  }\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./analytics.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"trackEvent\": () => (/* binding */ trackEvent)\n/* harmony export */ });\n// place here categories that you want to track. We want to track just a\n// small subset of categories at a given time.\nconst ALLOWED_CATEGORIES_TO_TRACK = [\"ai\"];\nconst trackEvent = (category, action, label, value) => {\n  try {\n    // prettier-ignore\n    if (typeof window === \"undefined\" || ({\"VITE_APP_BACKEND_V2_GET_URL\":\"https://json-dev.excalidraw.com/api/v2/\",\"VITE_APP_BACKEND_V2_POST_URL\":\"https://json-dev.excalidraw.com/api/v2/post/\",\"VITE_APP_LIBRARY_URL\":\"https://libraries.excalidraw.com\",\"VITE_APP_LIBRARY_BACKEND\":\"https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries\",\"VITE_APP_WS_SERVER_URL\":\"http://localhost:3002\",\"VITE_APP_PORTAL_URL\":\"\",\"VITE_APP_PLUS_LP\":\"https://plus.excalidraw.com\",\"VITE_APP_PLUS_APP\":\"https://app.excalidraw.com\",\"VITE_APP_AI_BACKEND\":\"http://localhost:3015\",\"VITE_APP_FIREBASE_CONFIG\":\"{\\\"apiKey\\\":\\\"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8\\\",\\\"authDomain\\\":\\\"excalidraw-oss-dev.firebaseapp.com\\\",\\\"projectId\\\":\\\"excalidraw-oss-dev\\\",\\\"storageBucket\\\":\\\"excalidraw-oss-dev.appspot.com\\\",\\\"messagingSenderId\\\":\\\"664559512677\\\",\\\"appId\\\":\\\"1:664559512677:web:a385181f2928d328a7aa8c\\\"}\",\"VITE_APP_DEV_ENABLE_SW\":\"\",\"VITE_APP_DEV_DISABLE_LIVE_RELOAD\":\"\",\"VITE_APP_DISABLE_TRACKING\":\"true\",\"FAST_REFRESH\":\"false\",\"VITE_APP_PORT\":\"3000\",\"VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX\":\"\",\"VITE_APP_COLLAPSE_OVERLAY\":\"true\",\"VITE_APP_ENABLE_ESLINT\":\"true\",\"VITE_PKG_NAME\":\"@zsviczian/excalidraw\",\"VITE_PKG_VERSION\":\"0.17.1-obsidian-12\",\"VITE_IS_EXCALIDRAW_NPM_PACKAGE\":true}).VITE_WORKER_ID // comment out to debug locally\n    || \"development\" === \"production\") {\n      return;\n    }\n\n    if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {\n      return;\n    }\n\n    if (true) {\n      console.info(\"trackEvent\", {\n        category,\n        action,\n        label,\n        value\n      });\n    }\n\n    if (window.sa_event) {\n      window.sa_event(action, {\n        category,\n        label,\n        value\n      });\n    }\n  } catch (error) {\n    console.error(\"error during analytics\", error);\n  }\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./analytics.ts?");
+
+/***/ }),
+
+/***/ "./animated-trail.ts":
+/*!***************************!*\
+  !*** ./animated-trail.ts ***!
+  \***************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"AnimatedTrail\": () => (/* binding */ AnimatedTrail)\n/* harmony export */ });\n/* harmony import */ var _excalidraw_laser_pointer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @excalidraw/laser-pointer */ \"../../node_modules/@excalidraw/laser-pointer/dist/esm.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ \"./utils.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./constants */ \"./constants.ts\");\n\n\n\nclass AnimatedTrail {\n  constructor(animationFrameHandler, app, options) {\n    this.animationFrameHandler = animationFrameHandler;\n    this.app = app;\n    this.options = options;\n    this.pastTrails = [];\n    this.animationFrameHandler.register(this, this.onFrame.bind(this));\n    this.trailElement = document.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_2__.SVG_NS, \"path\");\n  }\n\n  get hasCurrentTrail() {\n    return !!this.currentTrail;\n  }\n\n  hasLastPoint(x, y) {\n    if (this.currentTrail) {\n      const len = this.currentTrail.originalPoints.length;\n      return this.currentTrail.originalPoints[len - 1][0] === x && this.currentTrail.originalPoints[len - 1][1] === y;\n    }\n\n    return false;\n  }\n\n  start(container) {\n    if (container) {\n      this.container = container;\n    }\n\n    if (this.trailElement.parentNode !== this.container && this.container) {\n      this.container.appendChild(this.trailElement);\n    }\n\n    this.animationFrameHandler.start(this);\n  }\n\n  stop() {\n    var _a;\n\n    this.animationFrameHandler.stop(this);\n\n    if (this.trailElement.parentNode === this.container) {\n      (_a = this.container) === null || _a === void 0 ? void 0 : _a.removeChild(this.trailElement);\n    }\n  }\n\n  startPath(x, y) {\n    //zsviczian (fix offset)\n    if (this.container) {\n      this.container.style.top = \"0px\";\n      this.container.style.left = \"0px\";\n      const {\n        x,\n        y\n      } = this.container.getBoundingClientRect();\n      this.container.style.top = `${-y}px`;\n      this.container.style.left = `${-x}px`;\n    }\n\n    this.currentTrail = new _excalidraw_laser_pointer__WEBPACK_IMPORTED_MODULE_0__.LaserPointer(this.options);\n    this.currentTrail.addPoint([x, y, performance.now()]);\n    this.update();\n  }\n\n  addPointToPath(x, y) {\n    if (this.currentTrail) {\n      this.currentTrail.addPoint([x, y, performance.now()]);\n      this.update();\n    }\n  }\n\n  endPath() {\n    if (this.currentTrail) {\n      this.currentTrail.close();\n      this.currentTrail.options.keepHead = false;\n      this.pastTrails.push(this.currentTrail);\n      this.currentTrail = undefined;\n      this.update();\n    }\n  }\n\n  update() {\n    this.start();\n  }\n\n  onFrame() {\n    var _a;\n\n    const paths = [];\n\n    for (const trail of this.pastTrails) {\n      paths.push(this.drawTrail(trail, this.app.state));\n    }\n\n    if (this.currentTrail) {\n      const currentPath = this.drawTrail(this.currentTrail, this.app.state);\n      paths.push(currentPath);\n    }\n\n    this.pastTrails = this.pastTrails.filter(trail => {\n      return trail.getStrokeOutline().length !== 0;\n    });\n\n    if (paths.length === 0) {\n      this.stop();\n    }\n\n    const svgPaths = paths.join(\" \").trim();\n    this.trailElement.setAttribute(\"d\", svgPaths);\n    this.trailElement.setAttribute(\"fill\", ((_a = this.options.fill) !== null && _a !== void 0 ? _a : () => \"black\")(this));\n  }\n\n  drawTrail(trail, state) {\n    const stroke = trail.getStrokeOutline(trail.options.size / state.zoom.value).map(([x, y]) => {\n      const result = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.sceneCoordsToViewportCoords)({\n        sceneX: x,\n        sceneY: y\n      }, state);\n      return [result.x, result.y];\n    });\n    return (0,_utils__WEBPACK_IMPORTED_MODULE_1__.getSvgPathFromStroke)(stroke, true);\n  }\n\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./animated-trail.ts?");
+
+/***/ }),
+
+/***/ "./animation-frame-handler.ts":
+/*!************************************!*\
+  !*** ./animation-frame-handler.ts ***!
+  \************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"AnimationFrameHandler\": () => (/* binding */ AnimationFrameHandler)\n/* harmony export */ });\nclass AnimationFrameHandler {\n  constructor() {\n    this.targets = new WeakMap();\n    this.rafIds = new WeakMap();\n  }\n\n  register(key, callback) {\n    this.targets.set(key, {\n      callback,\n      stopped: true\n    });\n  }\n\n  start(key) {\n    const target = this.targets.get(key);\n\n    if (!target) {\n      return;\n    }\n\n    if (this.rafIds.has(key)) {\n      return;\n    }\n\n    this.targets.set(key, Object.assign(Object.assign({}, target), {\n      stopped: false\n    }));\n    this.scheduleFrame(key);\n  }\n\n  stop(key) {\n    const target = this.targets.get(key);\n\n    if (target && !target.stopped) {\n      this.targets.set(key, Object.assign(Object.assign({}, target), {\n        stopped: true\n      }));\n    }\n\n    this.cancelFrame(key);\n  }\n\n  constructFrame(key) {\n    return timestamp => {\n      const target = this.targets.get(key);\n\n      if (!target) {\n        return;\n      }\n\n      const shouldAbort = this.onFrame(target, timestamp);\n\n      if (!target.stopped && !shouldAbort) {\n        this.scheduleFrame(key);\n      } else {\n        this.cancelFrame(key);\n      }\n    };\n  }\n\n  scheduleFrame(key) {\n    const rafId = requestAnimationFrame(this.constructFrame(key));\n    this.rafIds.set(key, rafId);\n  }\n\n  cancelFrame(key) {\n    if (this.rafIds.has(key)) {\n      const rafId = this.rafIds.get(key);\n      cancelAnimationFrame(rafId);\n    }\n\n    this.rafIds.delete(key);\n  }\n\n  onFrame(target, timestamp) {\n    const shouldAbort = target.callback(timestamp);\n    return shouldAbort !== null && shouldAbort !== void 0 ? shouldAbort : false;\n  }\n\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./animation-frame-handler.ts?");
 
 /***/ }),
 
@@ -816,7 +838,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ExcalidrawContainerContext\": () => (/* binding */ ExcalidrawContainerContext),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   \"hostPlugin\": () => (/* binding */ hostPlugin),\n/* harmony export */   \"showFourthFont\": () => (/* binding */ showFourthFont),\n/* harmony export */   \"useApp\": () => (/* binding */ useApp),\n/* harmony export */   \"useAppProps\": () => (/* binding */ useAppProps),\n/* harmony export */   \"useDevice\": () => (/* binding */ useDevice),\n/* harmony export */   \"useExcalidrawActionManager\": () => (/* binding */ useExcalidrawActionManager),\n/* harmony export */   \"useExcalidrawAppState\": () => (/* binding */ useExcalidrawAppState),\n/* harmony export */   \"useExcalidrawContainer\": () => (/* binding */ useExcalidrawContainer),\n/* harmony export */   \"useExcalidrawElements\": () => (/* binding */ useExcalidrawElements),\n/* harmony export */   \"useExcalidrawSetAppState\": () => (/* binding */ useExcalidrawSetAppState)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! roughjs/bin/rough */ \"../../node_modules/roughjs/bin/rough.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var nanoid__WEBPACK_IMPORTED_MODULE_81__ = __webpack_require__(/*! nanoid */ \"./node_modules/nanoid/index.browser.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../actions */ \"./actions/index.ts\");\n/* harmony import */ var _actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../actions/actionHistory */ \"./actions/actionHistory.tsx\");\n/* harmony import */ var _actions_manager__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../actions/manager */ \"./actions/manager.tsx\");\n/* harmony import */ var _actions_register__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../actions/register */ \"./actions/register.ts\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _clipboard__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../clipboard */ \"./clipboard.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _data__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../data */ \"./data/index.ts\");\n/* harmony import */ var _data_library__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../data/library */ \"./data/library.ts\");\n/* harmony import */ var _data_restore__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../data/restore */ \"./data/restore.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _element_newElement__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../element/newElement */ \"./element/newElement.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _gesture__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../gesture */ \"./gesture.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../groups */ \"./groups.ts\");\n/* harmony import */ var _history__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../history */ \"./history.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../element/sizeHelpers */ \"./element/sizeHelpers.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _scene_zoom__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ../scene/zoom */ \"./scene/zoom.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ../element/embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _ContextMenu__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ./ContextMenu */ \"./components/ContextMenu.tsx\");\n/* harmony import */ var _LayerUI__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ./LayerUI */ \"./components/LayerUI.tsx\");\n/* harmony import */ var _Toast__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./Toast */ \"./components/Toast.tsx\");\n/* harmony import */ var _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ../actions/actionToggleViewMode */ \"./actions/actionToggleViewMode.tsx\");\n/* harmony import */ var _data_blob__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ../data/blob */ \"./data/blob.ts\");\n/* harmony import */ var _element_image__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../element/image */ \"./element/image.ts\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! lodash.throttle */ \"../../node_modules/lodash.throttle/index.js\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_41___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_41__);\n/* harmony import */ var _data_filesystem__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ../data/filesystem */ \"./data/filesystem.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _element_collision__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../element/collision */ \"./element/collision.ts\");\n/* harmony import */ var _element_resizeElements__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../element/resizeElements */ \"./element/resizeElements.ts\");\n/* harmony import */ var _element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ../element/Hyperlink */ \"./element/Hyperlink.tsx\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ../data/url */ \"./data/url.ts\");\n/* harmony import */ var _element_transformHandles__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ../element/transformHandles */ \"./element/transformHandles.ts\");\n/* harmony import */ var _actions_actionElementLock__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! ../actions/actionElementLock */ \"./actions/actionElementLock.ts\");\n/* harmony import */ var _scene_Fonts__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! ../scene/Fonts */ \"./scene/Fonts.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _scene_selection__WEBPACK_IMPORTED_MODULE_52__ = __webpack_require__(/*! ../scene/selection */ \"./scene/selection.ts\");\n/* harmony import */ var _actions_actionClipboard__WEBPACK_IMPORTED_MODULE_53__ = __webpack_require__(/*! ../actions/actionClipboard */ \"./actions/actionClipboard.tsx\");\n/* harmony import */ var _actions_actionFrame__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ../actions/actionFrame */ \"./actions/actionFrame.ts\");\n/* harmony import */ var _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../actions/actionCanvas */ \"./actions/actionCanvas.tsx\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ../jotai */ \"./jotai.ts\");\n/* harmony import */ var _ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ./ActiveConfirmDialog */ \"./components/ActiveConfirmDialog.tsx\");\n/* harmony import */ var _errors__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ../errors */ \"./errors.ts\");\n/* harmony import */ var _snapping__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__(/*! ../snapping */ \"./snapping.ts\");\n/* harmony import */ var _actions_actionBoundText__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__(/*! ../actions/actionBoundText */ \"./actions/actionBoundText.tsx\");\n/* harmony import */ var _BraveMeasureTextError__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__(/*! ./BraveMeasureTextError */ \"./components/BraveMeasureTextError.tsx\");\n/* harmony import */ var _EyeDropper__WEBPACK_IMPORTED_MODULE_62__ = __webpack_require__(/*! ./EyeDropper */ \"./components/EyeDropper.tsx\");\n/* harmony import */ var _data_transform__WEBPACK_IMPORTED_MODULE_63__ = __webpack_require__(/*! ../data/transform */ \"./data/transform.ts\");\n/* harmony import */ var _Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_64__ = __webpack_require__(/*! ./Sidebar/Sidebar */ \"./components/Sidebar/Sidebar.tsx\");\n/* harmony import */ var _canvases__WEBPACK_IMPORTED_MODULE_65__ = __webpack_require__(/*! ./canvases */ \"./components/canvases/index.tsx\");\n/* harmony import */ var _scene_Renderer__WEBPACK_IMPORTED_MODULE_66__ = __webpack_require__(/*! ../scene/Renderer */ \"./scene/Renderer.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _LaserTool_LaserTool__WEBPACK_IMPORTED_MODULE_68__ = __webpack_require__(/*! ./LaserTool/LaserTool */ \"./components/LaserTool/LaserTool.tsx\");\n/* harmony import */ var _LaserTool_LaserPathManager__WEBPACK_IMPORTED_MODULE_69__ = __webpack_require__(/*! ./LaserTool/LaserPathManager */ \"./components/LaserTool/LaserPathManager.ts\");\n/* harmony import */ var _cursor__WEBPACK_IMPORTED_MODULE_70__ = __webpack_require__(/*! ../cursor */ \"./cursor.ts\");\n/* harmony import */ var _emitter__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ../emitter */ \"./emitter.ts\");\n/* harmony import */ var _element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ../element/ElementCanvasButtons */ \"./element/ElementCanvasButtons.tsx\");\n/* harmony import */ var _data_magic__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ../data/magic */ \"./data/magic.ts\");\n/* harmony import */ var _utils_export__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../../utils/export */ \"../utils/export.ts\");\n/* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../colors */ \"./colors.ts\");\n/* harmony import */ var _MagicButton__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ./MagicButton */ \"./components/MagicButton.tsx\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _data_EditorLocalStorage__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ../data/EditorLocalStorage */ \"./data/EditorLocalStorage.ts\");\n/* harmony import */ var _FollowMode_FollowMode__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ./FollowMode/FollowMode */ \"./components/FollowMode/FollowMode.tsx\");\n/* harmony import */ var _actions_actionProperties__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../actions/actionProperties */ \"./actions/actionProperties.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst AppContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(null);\nconst AppPropsContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(null);\nlet showFourthFont = false; //zsviczian\n\nconst deviceContextInitialValue = {\n  viewport: {\n    isMobile: false,\n    isLandscape: false\n  },\n  editor: {\n    isMobile: false,\n    canFitSidebar: false\n  },\n  isTouchScreen: false\n};\nconst DeviceContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(deviceContextInitialValue);\nDeviceContext.displayName = \"DeviceContext\";\nconst ExcalidrawContainerContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext({\n  container: null,\n  id: null\n});\nExcalidrawContainerContext.displayName = \"ExcalidrawContainerContext\";\nconst ExcalidrawElementsContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext([]);\nExcalidrawElementsContext.displayName = \"ExcalidrawElementsContext\";\nconst ExcalidrawAppStateContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(Object.assign(Object.assign({}, (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)()), {\n  width: 0,\n  height: 0,\n  offsetLeft: 0,\n  offsetTop: 0\n}));\nExcalidrawAppStateContext.displayName = \"ExcalidrawAppStateContext\";\nconst ExcalidrawSetAppStateContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(() => {\n  console.warn(\"Uninitialized ExcalidrawSetAppStateContext context!\");\n});\nExcalidrawSetAppStateContext.displayName = \"ExcalidrawSetAppStateContext\";\nconst ExcalidrawActionManagerContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(null);\nExcalidrawActionManagerContext.displayName = \"ExcalidrawActionManagerContext\";\nconst useApp = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(AppContext);\nconst useAppProps = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(AppPropsContext);\nconst useDevice = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(DeviceContext);\nconst useExcalidrawContainer = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawContainerContext);\nconst useExcalidrawElements = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawElementsContext);\nconst useExcalidrawAppState = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawAppStateContext);\nconst useExcalidrawSetAppState = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawSetAppStateContext);\nconst useExcalidrawActionManager = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawActionManagerContext);\nconst supportsResizeObserver = typeof window !== \"undefined\" && \"ResizeObserver\" in window;\nlet didTapTwice = false;\nlet tappedTwiceTimer = 0;\nlet isHoldingSpace = false;\nlet isPanning = false;\nlet isDraggingScrollBar = false;\nlet currentScrollBars = {\n  horizontal: null,\n  vertical: null\n};\nlet touchTimeout = 0;\nlet invalidateContextMenu = false;\nlet hostPlugin; //zsviczian\n\n/**\r\n * Map of youtube embed video states\r\n */\n\nconst YOUTUBE_VIDEO_STATES = new Map();\nlet IS_PLAIN_PASTE = false;\nlet IS_PLAIN_PASTE_TIMER = 0;\nlet PLAIN_PASTE_TOAST_SHOWN = false;\nlet lastPointerUp = null;\nconst gesture = {\n  pointers: new Map(),\n  lastCenter: null,\n  initialDistance: null,\n  initialScale: null\n};\n\nclass App extends (react__WEBPACK_IMPORTED_MODULE_1___default().Component) {\n  constructor(props) {\n    super(props);\n    this.interactiveCanvas = null;\n    this.unmounted = false;\n    this.device = deviceContextInitialValue;\n    this.excalidrawContainerRef = react__WEBPACK_IMPORTED_MODULE_1___default().createRef();\n    this.files = {};\n    this.imageCache = new Map();\n    this.iFrameRefs = new Map();\n    this.lastPointerDownEvent = null;\n    this.lastPointerUpEvent = null;\n    this.lastPointerMoveEvent = null;\n    this.lastViewportPosition = {\n      x: 0,\n      y: 0\n    };\n    this.allowMobileMode = true; //zsviczian\n\n    this.laserPathManager = new _LaserTool_LaserPathManager__WEBPACK_IMPORTED_MODULE_69__.LaserPathManager(this);\n    this.onChangeEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_71__.Emitter();\n    this.onPointerDownEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_71__.Emitter();\n    this.onPointerUpEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_71__.Emitter();\n    this.onUserFollowEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_71__.Emitter();\n    this.onScrollChangeEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_71__.Emitter();\n    this.missingPointerEventCleanupEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_71__.Emitter();\n    this.onRemoveEventListenersEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_71__.Emitter();\n\n    this.updateEmbeddables = () => {\n      const iframeLikes = new Set();\n      let updated = false;\n      this.scene.getNonDeletedElements().filter(element => {\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(element)) {\n          iframeLikes.add(element.id);\n\n          if (element.validated == null) {\n            updated = true;\n            const validated = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.embeddableURLValidator)(element.link, this.props.validateEmbeddable);\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n              validated\n            }, false);\n            _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element);\n          }\n        } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(element)) {\n          iframeLikes.add(element.id);\n        }\n\n        return false;\n      });\n\n      if (updated) {\n        this.scene.informMutation();\n      } // GC\n\n\n      this.iFrameRefs.forEach((ref, id) => {\n        if (!iframeLikes.has(id)) {\n          this.iFrameRefs.delete(id);\n        }\n      });\n    };\n\n    this.getFrameNameDOMId = frameElement => {\n      return `${this.id}-frame-name-${frameElement.id}`;\n    };\n\n    this.frameNameBoundsCache = {\n      get: frameElement => {\n        let bounds = this.frameNameBoundsCache._cache.get(frameElement.id);\n\n        if (!bounds || bounds.zoom !== this.state.zoom.value || bounds.versionNonce !== frameElement.versionNonce) {\n          const frameNameDiv = document.getElementById(this.getFrameNameDOMId(frameElement));\n\n          if (frameNameDiv) {\n            const box = frameNameDiv.getBoundingClientRect();\n            const boxSceneTopLeft = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n              clientX: box.x,\n              clientY: box.y\n            }, this.state);\n            const boxSceneBottomRight = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n              clientX: box.right,\n              clientY: box.bottom\n            }, this.state);\n            bounds = {\n              x: boxSceneTopLeft.x,\n              y: boxSceneTopLeft.y,\n              width: boxSceneBottomRight.x - boxSceneTopLeft.x,\n              height: boxSceneBottomRight.y - boxSceneTopLeft.y,\n              angle: 0,\n              zoom: this.state.zoom.value,\n              versionNonce: frameElement.versionNonce\n            };\n\n            this.frameNameBoundsCache._cache.set(frameElement.id, bounds);\n\n            return bounds;\n          }\n\n          return null;\n        }\n\n        return bounds;\n      },\n\n      /**\r\n       * @private\r\n       */\n      _cache: new Map()\n    };\n\n    this.renderFrameNames = () => {\n      if (!this.state.frameRendering.enabled || !this.state.frameRendering.name) {\n        return null;\n      }\n\n      const isDarkTheme = this.state.theme === \"dark\";\n      let frameIndex = 0;\n      let magicFrameIndex = 0;\n      return this.scene.getNonDeletedFramesLikes().map(f => {\n        var _a, _b;\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameElement)(f)) {\n          frameIndex++;\n        } else {\n          magicFrameIndex++;\n        }\n\n        if (!(0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementInViewport)(f, this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {\n          offsetLeft: this.state.offsetLeft,\n          offsetTop: this.state.offsetTop,\n          scrollX: this.state.scrollX,\n          scrollY: this.state.scrollY,\n          zoom: this.state.zoom\n        })) {\n          // if frame not visible, don't render its name\n          return null;\n        }\n\n        const {\n          x: x1,\n          y: y1\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.sceneCoordsToViewportCoords)({\n          sceneX: f.x,\n          sceneY: f.y\n        }, this.state);\n        const FRAME_NAME_EDIT_PADDING = 6;\n\n        const reset = () => {\n          var _a;\n\n          if (((_a = f.name) === null || _a === void 0 ? void 0 : _a.trim()) === \"\") {\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(f, {\n              name: null\n            });\n          }\n\n          this.setState({\n            editingFrame: null\n          });\n        };\n\n        let frameNameJSX;\n        const frameName = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameLikeTitle)(f, (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameElement)(f) ? frameIndex : magicFrameIndex);\n\n        if (f.id === this.state.editingFrame) {\n          const frameNameInEdit = frameName;\n          frameNameJSX = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", {\n            autoFocus: true,\n            value: frameNameInEdit,\n            onChange: e => {\n              (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(f, {\n                name: e.target.value\n              });\n            },\n            onBlur: () => reset(),\n            onKeyDown: event => {\n              // for some inexplicable reason, `onBlur` triggered on ESC\n              // does not reset `state.editingFrame` despite being called,\n              // and we need to reset it here as well\n              if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ESCAPE || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ENTER) {\n                reset();\n              }\n            },\n            style: {\n              background: this.state.viewBackgroundColor,\n              filter: isDarkTheme ? _constants__WEBPACK_IMPORTED_MODULE_12__.THEME_FILTER : \"none\",\n              zIndex: 2,\n              border: \"none\",\n              display: \"block\",\n              padding: `${FRAME_NAME_EDIT_PADDING}px`,\n              borderRadius: 4,\n              boxShadow: \"inset 0 0 0 2px var(--color-on-primary-container)\",\n              fontFamily: \"Assistant\",\n              fontSize: \"14px\",\n              transform: `translate(-${FRAME_NAME_EDIT_PADDING}px, ${FRAME_NAME_EDIT_PADDING}px)`,\n              color: \"var(--color-gray-80)\",\n              overflow: \"hidden\",\n              maxWidth: `${document.body.clientWidth - x1 - FRAME_NAME_EDIT_PADDING}px`\n            },\n            size: frameNameInEdit.length + 1 || 1,\n            dir: \"auto\",\n            autoComplete: \"off\",\n            autoCapitalize: \"off\",\n            autoCorrect: \"off\"\n          });\n        } else {\n          frameNameJSX = frameName;\n        }\n\n        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n          id: this.getFrameNameDOMId(f),\n          style: {\n            position: \"absolute\",\n            // Positioning from bottom so that we don't to either\n            // calculate text height or adjust using transform (which)\n            // messes up input position when editing the frame name.\n            // This makes the positioning deterministic and we can calculate\n            // the same position when rendering to canvas / svg.\n            bottom: `${this.state.height + _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameOffsetY - y1 + this.state.offsetTop}px`,\n            left: `${x1 - this.state.offsetLeft}px`,\n            zIndex: 2,\n            fontSize: _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameFontSize,\n            color: (_b = (_a = this.state.frameColor) === null || _a === void 0 ? void 0 : _a.nameColor) !== null && _b !== void 0 ? _b : isDarkTheme //zsviczian\n            ? _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameColorDarkTheme : _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameColorLightTheme,\n            lineHeight: _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameLineHeight,\n            width: \"max-content\",\n            maxWidth: `${f.width}px`,\n            overflow: f.id === this.state.editingFrame ? \"visible\" : \"hidden\",\n            whiteSpace: \"nowrap\",\n            textOverflow: \"ellipsis\",\n            cursor: _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE,\n            pointerEvents: this.state.viewModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled\n          },\n          onPointerDown: event => this.handleCanvasPointerDown(event),\n          onWheel: event => this.handleWheel(event),\n          onContextMenu: this.handleCanvasContextMenu,\n          onDoubleClick: () => {\n            this.setState({\n              editingFrame: f.id\n            });\n          }\n        }, {\n          children: frameNameJSX\n        }), f.id);\n      });\n    };\n\n    this.focusContainer = () => {\n      var _a;\n\n      (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n    };\n\n    this.getSceneElementsIncludingDeleted = () => {\n      return this.scene.getElementsIncludingDeleted();\n    };\n\n    this.getSceneElements = () => {\n      return this.scene.getNonDeletedElements();\n    };\n\n    this.onInsertElements = elements => {\n      this.addElementsFromPasteOrLibrary({\n        elements,\n        position: \"center\",\n        files: null\n      });\n    };\n\n    this.onExportImage = async (type, elements, opts) => {\n      (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"export\", type, \"ui\");\n      const fileHandle = await (0,_data__WEBPACK_IMPORTED_MODULE_13__.exportCanvas)(type, elements, this.state, this.files, {\n        exportBackground: this.state.exportBackground,\n        name: this.state.name,\n        viewBackgroundColor: this.state.viewBackgroundColor,\n        exportingFrame: opts.exportingFrame\n      }).catch(_utils__WEBPACK_IMPORTED_MODULE_33__.muteFSAbortError).catch(error => {\n        console.error(error);\n        this.setState({\n          errorMessage: error.message\n        });\n      });\n\n      if (this.state.exportEmbedScene && fileHandle && (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.isImageFileHandle)(fileHandle)) {\n        this.setState({\n          fileHandle\n        });\n      }\n    };\n\n    this.magicGenerations = new Map();\n\n    this.updateMagicGeneration = ({\n      frameElement,\n      data\n    }) => {\n      if (data.status === \"pending\") {\n        // We don't wanna persist pending state to storage. It should be in-app\n        // state only.\n        // Thus reset so that we prefer local cache (if there was some\n        // generationData set previously)\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(frameElement, {\n          customData: {\n            generationData: undefined\n          }\n        }, false);\n      } else {\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(frameElement, {\n          customData: {\n            generationData: data\n          }\n        }, false);\n      }\n\n      this.magicGenerations.set(frameElement.id, data);\n      this.onSceneUpdated();\n    };\n\n    this.OPENAI_KEY_IS_PERSISTED = _data_EditorLocalStorage__WEBPACK_IMPORTED_MODULE_78__.EditorLocalStorage.has(_constants__WEBPACK_IMPORTED_MODULE_12__.EDITOR_LS_KEYS.OAI_API_KEY) || false;\n\n    this.onOpenAIKeyChange = (openAIKey, shouldPersist) => {\n      this.OPENAI_KEY = openAIKey || null;\n\n      if (shouldPersist) {\n        const didPersist = _data_EditorLocalStorage__WEBPACK_IMPORTED_MODULE_78__.EditorLocalStorage.set(_constants__WEBPACK_IMPORTED_MODULE_12__.EDITOR_LS_KEYS.OAI_API_KEY, openAIKey);\n        this.OPENAI_KEY_IS_PERSISTED = didPersist;\n      } else {\n        this.OPENAI_KEY_IS_PERSISTED = false;\n      }\n    };\n\n    this.onMagicSettingsConfirm = (apiKey, shouldPersist, source) => {\n      this.OPENAI_KEY = apiKey || null;\n      this.onOpenAIKeyChange(this.OPENAI_KEY, shouldPersist);\n\n      if (source === \"settings\") {\n        return;\n      }\n\n      const selectedElements = this.scene.getSelectedElements({\n        selectedElementIds: this.state.selectedElementIds\n      });\n\n      if (apiKey) {\n        if (selectedElements.length) {\n          this.onMagicframeToolSelect();\n        } else {\n          this.setActiveTool({\n            type: \"magicframe\"\n          });\n        }\n      } else if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(selectedElements[0])) {\n        // even if user didn't end up setting api key, let's pick the tool\n        // so they can draw up a frame and move forward\n        this.setActiveTool({\n          type: \"magicframe\"\n        });\n      }\n    };\n\n    this.onMagicframeToolSelect = () => {\n      if (!this.OPENAI_KEY) {\n        this.setToast({\n          message: \"You must first configure your OpenAI API key in plugin settings\",\n          duration: 5000\n        });\n        return;\n      }\n\n      const selectedElements = this.scene.getSelectedElements({\n        selectedElementIds: this.state.selectedElementIds\n      });\n\n      if (selectedElements.length === 0) {\n        this.setActiveTool({\n          type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe\n        });\n        (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"tool-select (empty-selection)\", \"d2c\");\n      } else {\n        const selectedMagicFrame = selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(selectedElements[0]) && selectedElements[0]; // case: user selected elements containing frame-like(s) or are frame\n        // members, we don't want to wrap into another magicframe\n        // (unless the only selected element is a magic frame which we reuse)\n\n        if (!selectedMagicFrame && selectedElements.some(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(el) || el.frameId)) {\n          this.setActiveTool({\n            type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe\n          });\n          return;\n        }\n\n        (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"tool-select (existing selection)\", \"d2c\");\n        let frame;\n\n        if (selectedMagicFrame) {\n          // a single magicframe already selected -> use it\n          frame = selectedMagicFrame;\n        } else {\n          // selected elements aren't wrapped in magic frame yet -> wrap now\n          const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n          const padding = 50;\n          frame = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newMagicFrameElement)(Object.assign(Object.assign({}, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE), {\n            x: minX - padding,\n            y: minY - padding,\n            width: maxX - minX + padding * 2,\n            height: maxY - minY + padding * 2,\n            opacity: 100,\n            locked: false\n          }));\n          this.scene.addNewElement(frame);\n\n          for (const child of selectedElements) {\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(child, {\n              frameId: frame.id\n            });\n          }\n\n          this.setState({\n            selectedElementIds: {\n              [frame.id]: true\n            }\n          });\n        }\n\n        this.onMagicFrameGenerate(frame, \"upstream\");\n      }\n    };\n\n    this.openEyeDropper = ({\n      type\n    }) => {\n      _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.set(_EyeDropper__WEBPACK_IMPORTED_MODULE_62__.activeEyeDropperAtom, {\n        swapPreviewOnAlt: true,\n        colorPickerType: type === \"stroke\" ? \"elementStroke\" : \"elementBackground\",\n        onSelect: (color, event) => {\n          const shouldUpdateStrokeColor = type === \"background\" && event.altKey || type === \"stroke\" && !event.altKey;\n          const selectedElements = this.scene.getSelectedElements(this.state);\n\n          if (!selectedElements.length || this.state.activeTool.type !== \"selection\") {\n            if (shouldUpdateStrokeColor) {\n              this.syncActionResult({\n                appState: Object.assign(Object.assign({}, this.state), {\n                  currentItemStrokeColor: color\n                }),\n                commitToHistory: true\n              });\n            } else {\n              this.syncActionResult({\n                appState: Object.assign(Object.assign({}, this.state), {\n                  currentItemBackgroundColor: color\n                }),\n                commitToHistory: true\n              });\n            }\n          } else {\n            this.updateScene({\n              elements: this.scene.getElementsIncludingDeleted().map(el => {\n                if (this.state.selectedElementIds[el.id]) {\n                  return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(el, {\n                    [shouldUpdateStrokeColor ? \"strokeColor\" : \"backgroundColor\"]: color\n                  });\n                }\n\n                return el;\n              })\n            });\n          }\n        },\n        keepOpenOnAlt: false\n      });\n    };\n\n    this.syncActionResult = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(actionResult => {\n      var _a, _b, _c, _d, _e, _f, _g, _h, _j;\n\n      if (this.unmounted || actionResult === false) {\n        return;\n      }\n\n      let editingElement = null;\n\n      if (actionResult.elements) {\n        actionResult.elements.forEach(element => {\n          var _a;\n\n          if (((_a = this.state.editingElement) === null || _a === void 0 ? void 0 : _a.id) === element.id && this.state.editingElement !== element && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isNonDeletedElement)(element)) {\n            editingElement = element;\n          }\n        });\n        this.scene.replaceAllElements(actionResult.elements);\n\n        if (actionResult.commitToHistory) {\n          this.history.resumeRecording();\n        }\n      }\n\n      if (actionResult.files) {\n        this.files = actionResult.replaceFiles ? actionResult.files : Object.assign(Object.assign({}, this.files), actionResult.files);\n        this.addNewImagesToImageCache();\n      }\n\n      if (actionResult.appState || editingElement || this.state.contextMenu) {\n        if (actionResult.commitToHistory) {\n          this.history.resumeRecording();\n        }\n\n        let viewModeEnabled = ((_a = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _a === void 0 ? void 0 : _a.viewModeEnabled) || false;\n        let zenModeEnabled = ((_b = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _b === void 0 ? void 0 : _b.zenModeEnabled) || false;\n        let gridSize = ((_c = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _c === void 0 ? void 0 : _c.gridSize) || null;\n        const theme = ((_d = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _d === void 0 ? void 0 : _d.theme) || this.props.theme || _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.LIGHT;\n        let name = (_f = (_e = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : this.state.name;\n        const errorMessage = (_h = (_g = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _g === void 0 ? void 0 : _g.errorMessage) !== null && _h !== void 0 ? _h : this.state.errorMessage;\n\n        if (typeof this.props.viewModeEnabled !== \"undefined\") {\n          viewModeEnabled = this.props.viewModeEnabled;\n        }\n\n        if (typeof this.props.zenModeEnabled !== \"undefined\") {\n          zenModeEnabled = this.props.zenModeEnabled;\n        }\n\n        if (typeof this.props.gridModeEnabled !== \"undefined\") {\n          gridSize = this.props.gridModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.GRID_SIZE : null;\n        }\n\n        if (typeof this.props.name !== \"undefined\") {\n          name = this.props.name;\n        }\n\n        editingElement = editingElement || ((_j = actionResult.appState) === null || _j === void 0 ? void 0 : _j.editingElement) || null;\n\n        if (editingElement === null || editingElement === void 0 ? void 0 : editingElement.isDeleted) {\n          editingElement = null;\n        }\n\n        this.setState(state => {\n          // using Object.assign instead of spread to fool TS 4.2.2+ into\n          // regarding the resulting type as not containing undefined\n          // (which the following expression will never contain)\n          return Object.assign(actionResult.appState || {}, {\n            // NOTE this will prevent opening context menu using an action\n            // or programmatically from the host, so it will need to be\n            // rewritten later\n            contextMenu: null,\n            editingElement,\n            viewModeEnabled,\n            zenModeEnabled,\n            gridSize,\n            theme,\n            name,\n            errorMessage\n          });\n        }, () => {\n          if (actionResult.syncHistory) {\n            this.history.setCurrentState(this.state, this.scene.getElementsIncludingDeleted());\n          }\n        });\n      }\n    }); // Lifecycle\n\n    this.onBlur = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(() => {\n      isHoldingSpace = false;\n      this.setState({\n        isBindingEnabled: true\n      });\n    });\n\n    this.onUnload = () => {\n      this.onBlur();\n    };\n\n    this.disableEvent = event => {\n      event.preventDefault();\n    };\n\n    this.resetHistory = () => {\n      this.history.clear();\n    };\n    /**\r\n     * Resets scene & history.\r\n     * ! Do not use to clear scene user action !\r\n     */\n\n\n    this.resetScene = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(opts => {\n      this.scene.replaceAllElements([]);\n      this.setState(state => Object.assign(Object.assign({}, (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)()), {\n        isLoading: (opts === null || opts === void 0 ? void 0 : opts.resetLoadingState) ? false : state.isLoading,\n        theme: this.state.theme\n      }));\n      this.resetHistory();\n    });\n\n    this.initializeScene = async () => {\n      var _a;\n\n      if (\"launchQueue\" in window && \"LaunchParams\" in window) {\n        window.launchQueue.setConsumer(async launchParams => {\n          if (!launchParams.files.length) {\n            return;\n          }\n\n          const fileHandle = launchParams.files[0];\n          const blob = await fileHandle.getFile();\n          this.loadFileToCanvas(new File([blob], blob.name || \"\", {\n            type: blob.type\n          }), fileHandle);\n        });\n      }\n\n      if (this.props.theme) {\n        this.setState({\n          theme: this.props.theme\n        });\n      }\n\n      if (!this.state.isLoading) {\n        this.setState({\n          isLoading: true\n        });\n      }\n\n      let initialData = null;\n\n      try {\n        initialData = (await this.props.initialData) || null;\n\n        if (initialData === null || initialData === void 0 ? void 0 : initialData.libraryItems) {\n          this.library.updateLibrary({\n            libraryItems: initialData.libraryItems,\n            merge: true\n          }).catch(error => {\n            console.error(error);\n          });\n        }\n      } catch (error) {\n        console.error(error);\n        initialData = {\n          appState: {\n            errorMessage: error.message || \"Encountered an error during importing or restoring scene data\"\n          }\n        };\n      }\n\n      const scene = (0,_data_restore__WEBPACK_IMPORTED_MODULE_15__.restore)(initialData, null, null, {\n        repairBindings: true\n      });\n      scene.appState = Object.assign(Object.assign({}, scene.appState), {\n        theme: this.props.theme || scene.appState.theme,\n        // we're falling back to current (pre-init) state when deciding\n        // whether to open the library, to handle a case where we\n        // update the state outside of initialData (e.g. when loading the app\n        // with a library install link, which should auto-open the library)\n        openSidebar: ((_a = scene.appState) === null || _a === void 0 ? void 0 : _a.openSidebar) || this.state.openSidebar,\n        activeTool: scene.appState.activeTool.type === \"image\" ? Object.assign(Object.assign({}, scene.appState.activeTool), {\n          type: \"selection\"\n        }) : scene.appState.activeTool,\n        isLoading: false,\n        toast: this.state.toast\n      });\n\n      if (initialData === null || initialData === void 0 ? void 0 : initialData.scrollToContent) {\n        scene.appState = Object.assign(Object.assign({}, scene.appState), (0,_scene__WEBPACK_IMPORTED_MODULE_29__.calculateScrollCenter)(scene.elements, Object.assign(Object.assign({}, scene.appState), {\n          width: this.state.width,\n          height: this.state.height,\n          offsetTop: this.state.offsetTop,\n          offsetLeft: this.state.offsetLeft\n        })));\n      } // FontFaceSet loadingdone event we listen on may not always fire\n      // (looking at you Safari), so on init we manually load fonts for current\n      // text elements on canvas, and rerender them once done. This also\n      // seems faster even in browsers that do fire the loadingdone event.\n\n\n      this.fonts.loadFontsForElements(scene.elements);\n      this.resetHistory();\n      this.syncActionResult(Object.assign(Object.assign({}, scene), {\n        commitToHistory: true\n      }));\n    };\n\n    this.isMobileBreakpoint = (width, height) => {\n      return width !== 0 && //zsviczian changing tabs in Obsidian causes MobileMenu to be rendered\n      this.allowMobileMode && ( //zsviczian\n      width < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_PORTRAIT || height < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_HEIGHT_LANDSCAPE && width < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_LANDSCAPE);\n    };\n\n    this.refreshViewportBreakpoints = () => {\n      const container = this.excalidrawContainerRef.current;\n\n      if (!container) {\n        return;\n      }\n\n      const {\n        clientWidth: viewportWidth,\n        clientHeight: viewportHeight\n      } = document.body;\n      const prevViewportState = this.device.viewport;\n      const nextViewportState = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(prevViewportState, {\n        isLandscape: viewportWidth > viewportHeight,\n        isMobile: this.isMobileBreakpoint(viewportWidth, viewportHeight)\n      });\n\n      if (prevViewportState !== nextViewportState) {\n        this.device = Object.assign(Object.assign({}, this.device), {\n          viewport: nextViewportState\n        });\n        return true;\n      }\n\n      return false;\n    };\n\n    this.refreshEditorBreakpoints = () => {\n      const container = this.excalidrawContainerRef.current;\n\n      if (!container) {\n        return;\n      }\n\n      const {\n        width: editorWidth,\n        height: editorHeight\n      } = container.getBoundingClientRect();\n      const sidebarBreakpoint = this.props.UIOptions.dockedSidebarBreakpoint != null ? this.props.UIOptions.dockedSidebarBreakpoint : _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_RIGHT_SIDEBAR_MIN_WIDTH;\n      const prevEditorState = this.device.editor;\n      const nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(prevEditorState, {\n        isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),\n        canFitSidebar: editorWidth > sidebarBreakpoint\n      });\n\n      if (prevEditorState !== nextEditorState) {\n        this.device = Object.assign(Object.assign({}, this.device), {\n          editor: nextEditorState\n        });\n        return true;\n      }\n\n      return false;\n    };\n\n    this.onResize = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(() => {\n      this.scene.getElementsIncludingDeleted().forEach(element => _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element));\n      this.refreshViewportBreakpoints();\n      this.updateDOMRect();\n\n      if (!supportsResizeObserver) {\n        this.refreshEditorBreakpoints();\n      }\n\n      this.setState({});\n    });\n    /** generally invoked only if fullscreen was invoked programmatically */\n\n    this.onFullscreenChange = () => {\n      var _a;\n\n      if ( // points to the iframe element we fullscreened\n      !document.fullscreenElement && ((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.state) === \"active\") {\n        this.setState({\n          activeEmbeddable: null\n        });\n      }\n    };\n\n    this.renderInteractiveSceneCallback = ({\n      atLeastOneVisibleElement,\n      scrollBars,\n      elements\n    }) => {\n      if (!document.querySelector(\".excalidraw\")) {\n        return;\n      } //zsviczian - address issue when moving excalidraw to a new window/document\n\n\n      if (scrollBars) {\n        currentScrollBars = scrollBars;\n      }\n\n      const scrolledOutside = // hide when editing text\n      (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement) ? false : !atLeastOneVisibleElement && elements.length > 0;\n\n      if (this.state.scrolledOutside !== scrolledOutside) {\n        this.setState({\n          scrolledOutside\n        });\n      }\n\n      this.scheduleImageRefresh();\n    };\n\n    this.onScroll = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.debounce)(() => {\n      const {\n        offsetTop,\n        offsetLeft\n      } = this.getCanvasOffsets();\n      this.setState(state => {\n        if (state.offsetLeft === offsetLeft && state.offsetTop === offsetTop) {\n          return null;\n        }\n\n        return {\n          offsetTop,\n          offsetLeft\n        };\n      });\n    }, _constants__WEBPACK_IMPORTED_MODULE_12__.SCROLL_TIMEOUT); // Copy/paste\n\n    this.onCut = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      var _a;\n\n      const isExcalidrawActive = (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);\n\n      if (!isExcalidrawActive || (0,_utils__WEBPACK_IMPORTED_MODULE_33__.isWritableElement)(event.target)) {\n        return;\n      }\n\n      this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCut, \"keyboard\", event);\n      event.preventDefault();\n      event.stopPropagation();\n    });\n    this.onCopy = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      var _a;\n\n      const isExcalidrawActive = (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);\n\n      if (!isExcalidrawActive || (0,_utils__WEBPACK_IMPORTED_MODULE_33__.isWritableElement)(event.target)) {\n        return;\n      }\n\n      this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, \"keyboard\", event);\n      event.preventDefault();\n      event.stopPropagation();\n    });\n\n    this.onTouchStart = event => {\n      // fix for Apple Pencil Scribble (do not prevent for other devices)\n      if (_constants__WEBPACK_IMPORTED_MODULE_12__.isIOS) {\n        event.preventDefault();\n      }\n\n      if (!didTapTwice) {\n        didTapTwice = true;\n        clearTimeout(tappedTwiceTimer);\n        tappedTwiceTimer = window.setTimeout(App.resetTapTwice, _constants__WEBPACK_IMPORTED_MODULE_12__.TAP_TWICE_TIMEOUT);\n        return;\n      } // insert text only if we tapped twice with a single finger\n      // event.touches.length === 1 will also prevent inserting text when user's zooming\n\n\n      if (didTapTwice && event.touches.length === 1) {\n        const touch = event.touches[0]; // @ts-ignore\n\n        this.handleCanvasDoubleClick({\n          clientX: touch.clientX,\n          clientY: touch.clientY\n        });\n        didTapTwice = false;\n        clearTimeout(tappedTwiceTimer);\n      }\n\n      if (event.touches.length === 2) {\n        this.setState({\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n          activeEmbeddable: null\n        });\n      }\n    };\n\n    this.onTouchEnd = event => {\n      this.resetContextMenuTimer();\n\n      if (event.touches.length > 0) {\n        this.setState({\n          previousSelectedElementIds: {},\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(this.state.previousSelectedElementIds, this.state)\n        });\n      } else {\n        gesture.pointers.clear();\n      }\n    };\n\n    this.pasteFromClipboard = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(async event => {\n      var _a, _b, _c;\n\n      const isPlainPaste = !!IS_PLAIN_PASTE; // #686\n\n      const target = document.activeElement;\n      const isExcalidrawActive = (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);\n\n      if (event && !isExcalidrawActive) {\n        return;\n      }\n\n      const elementUnderCursor = document.elementFromPoint(this.lastViewportPosition.x, this.lastViewportPosition.y);\n\n      if (event && (!(elementUnderCursor instanceof HTMLCanvasElement) || (0,_utils__WEBPACK_IMPORTED_MODULE_33__.isWritableElement)(target))) {\n        return;\n      }\n\n      const {\n        x: sceneX,\n        y: sceneY\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n        clientX: this.lastViewportPosition.x,\n        clientY: this.lastViewportPosition.y\n      }, this.state); // must be called in the same frame (thus before any awaits) as the paste\n      // event else some browsers (FF...) will clear the clipboardData\n      // (something something security)\n\n      let file = (_b = event === null || event === void 0 ? void 0 : event.clipboardData) === null || _b === void 0 ? void 0 : _b.files[0];\n      const data = await (0,_clipboard__WEBPACK_IMPORTED_MODULE_11__.parseClipboard)(event, isPlainPaste);\n\n      if (!file && !isPlainPaste) {\n        if (data.mixedContent) {\n          return this.addElementsFromMixedContentPaste(data.mixedContent, {\n            isPlainPaste,\n            sceneX,\n            sceneY\n          });\n        } else if (data.text) {\n          const string = data.text.trim();\n\n          if (string.startsWith(\"<svg\") && string.endsWith(\"</svg>\")) {\n            // ignore SVG validation/normalization which will be done during image\n            // initialization\n            file = (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.SVGStringToFile)(string);\n          }\n        }\n      } // prefer spreadsheet data over image file (MS Office/Libre Office)\n\n\n      if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.isSupportedImageFile)(file) && !data.spreadsheet) {\n        if (!this.isToolSupported(\"image\")) {\n          this.setState({\n            errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n          });\n          return;\n        }\n\n        const imageElement = this.createImageElement({\n          sceneX,\n          sceneY\n        });\n        this.insertImageElement(imageElement, file);\n        this.initializeImageDimensions(imageElement);\n        this.setState({\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n            [imageElement.id]: true\n          }, this.state)\n        });\n        return;\n      }\n\n      if (this.props.onPaste) {\n        try {\n          if ((await this.props.onPaste(data, event)) === false) {\n            return;\n          }\n        } catch (error) {\n          console.error(error);\n        }\n      }\n\n      if (data.errorMessage) {\n        this.setState({\n          errorMessage: data.errorMessage\n        });\n      } else if (data.spreadsheet && !isPlainPaste) {\n        this.setState({\n          pasteDialog: {\n            data: data.spreadsheet,\n            shown: true\n          }\n        });\n      } else if (data.elements) {\n        const elements = data.programmaticAPI ? (0,_data_transform__WEBPACK_IMPORTED_MODULE_63__.convertToExcalidrawElements)(data.elements) : data.elements; // TODO remove formatting from elements if isPlainPaste\n\n        this.addElementsFromPasteOrLibrary({\n          elements,\n          files: data.files || null,\n          position: \"cursor\",\n          retainSeed: isPlainPaste\n        });\n      } else if (data.text) {\n        const maybeUrl = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.extractSrc)(data.text);\n\n        if (!isPlainPaste && (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.embeddableURLValidator)(maybeUrl, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(maybeUrl) || ((_c = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.getEmbedLink)(maybeUrl)) === null || _c === void 0 ? void 0 : _c.type) === \"video\")) {\n          const embeddable = this.insertEmbeddableElement({\n            sceneX,\n            sceneY,\n            link: (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.normalizeLink)(maybeUrl)\n          });\n\n          if (embeddable) {\n            this.setState({\n              selectedElementIds: {\n                [embeddable.id]: true\n              }\n            });\n          }\n\n          return;\n        }\n\n        this.addTextFromPaste(data.text, isPlainPaste);\n      }\n\n      this.setActiveTool({\n        type: \"selection\"\n      });\n      event === null || event === void 0 ? void 0 : event.preventDefault();\n    });\n\n    this.addElementsFromPasteOrLibrary = opts => {\n      const elements = (0,_data_restore__WEBPACK_IMPORTED_MODULE_15__.restoreElements)(opts.elements, null, undefined);\n      const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(elements);\n      const elementsCenterX = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.distance)(minX, maxX) / 2;\n      const elementsCenterY = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.distance)(minY, maxY) / 2;\n      const clientX = typeof opts.position === \"object\" ? opts.position.clientX : opts.position === \"cursor\" ? this.lastViewportPosition.x : this.state.width / 2 + this.state.offsetLeft;\n      const clientY = typeof opts.position === \"object\" ? opts.position.clientY : opts.position === \"cursor\" ? this.lastViewportPosition.y : this.state.height / 2 + this.state.offsetTop;\n      const {\n        x,\n        y\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n        clientX,\n        clientY\n      }, this.state);\n      const dx = x - elementsCenterX;\n      const dy = y - elementsCenterY;\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(dx, dy, this.state.gridSize);\n      const newElements = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.duplicateElements)(elements.map(element => {\n        return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(element, {\n          x: element.x + gridX - minX,\n          y: element.y + gridY - minY\n        });\n      }), {\n        randomizeSeed: !opts.retainSeed\n      });\n      const nextElements = [...this.scene.getElementsIncludingDeleted(), ...newElements];\n      this.scene.replaceAllElements(nextElements);\n      newElements.forEach(newElement => {\n        if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(newElement) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(newElement)) {\n          const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getContainerElement)(newElement);\n          (0,_element__WEBPACK_IMPORTED_MODULE_16__.redrawTextBoundingBox)(newElement, container);\n        }\n      });\n\n      if (opts.files) {\n        this.files = Object.assign(Object.assign({}, this.files), opts.files);\n      }\n\n      this.history.resumeRecording();\n      const nextElementsToSelect = (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.excludeElementsInFramesFromSelection)(newElements);\n      this.setState(Object.assign(Object.assign(Object.assign({}, this.state), {\n        // keep sidebar (presumably the library) open if it's docked and\n        // can fit.\n        //\n        // Note, we should close the sidebar only if we're dropping items\n        // from library, not when pasting from clipboard. Alas.\n        openSidebar: this.state.openSidebar && this.device.editor.canFitSidebar && _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.get(_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_64__.isSidebarDockedAtom) ? this.state.openSidebar : null\n      }), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n        editingGroupId: null,\n        selectedElementIds: nextElementsToSelect.reduce((acc, element) => {\n          if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(element)) {\n            acc[element.id] = true;\n          }\n\n          return acc;\n        }, {})\n      }, this.scene.getNonDeletedElements(), this.state, this)), () => {\n        if (opts.files) {\n          this.addNewImagesToImageCache();\n        }\n      });\n      this.setActiveTool({\n        type: \"selection\"\n      });\n\n      if (opts.fitToContent) {\n        this.scrollToContent(newElements, {\n          fitToContent: true\n        });\n      }\n    };\n\n    this.setAppState = (state, callback) => {\n      this.setState(state, callback);\n    };\n\n    this.removePointer = event => {\n      if (touchTimeout) {\n        this.resetContextMenuTimer();\n      }\n\n      gesture.pointers.delete(event.pointerId);\n    };\n\n    this.toggleLock = (source = \"ui\") => {\n      if (!this.state.activeTool.locked) {\n        (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"toolbar\", \"toggleLock\", `${source} (${this.device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n      }\n\n      this.setState(prevState => {\n        return {\n          activeTool: Object.assign(Object.assign(Object.assign({}, prevState.activeTool), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, prevState.activeTool.locked ? {\n            type: \"selection\"\n          } : prevState.activeTool)), {\n            locked: !prevState.activeTool.locked\n          })\n        };\n      });\n    };\n\n    this.updateFrameRendering = opts => {\n      this.setState(prevState => {\n        var _a, _b, _c, _d;\n\n        const next = typeof opts === \"function\" ? opts(prevState.frameRendering) : opts;\n        return {\n          frameRendering: {\n            enabled: (_a = next === null || next === void 0 ? void 0 : next.enabled) !== null && _a !== void 0 ? _a : prevState.frameRendering.enabled,\n            clip: (_b = next === null || next === void 0 ? void 0 : next.clip) !== null && _b !== void 0 ? _b : prevState.frameRendering.clip,\n            name: (_c = next === null || next === void 0 ? void 0 : next.name) !== null && _c !== void 0 ? _c : prevState.frameRendering.name,\n            outline: (_d = next === null || next === void 0 ? void 0 : next.outline) !== null && _d !== void 0 ? _d : prevState.frameRendering.outline\n          }\n        };\n      });\n    };\n\n    this.togglePenMode = force => {\n      this.setState(prevState => {\n        return {\n          penMode: force !== null && force !== void 0 ? force : !prevState.penMode,\n          penDetected: true\n        };\n      });\n    };\n\n    this.onHandToolToggle = () => {\n      this.actionManager.executeAction(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.actionToggleHandTool);\n    };\n    /**\r\n     * Zooms on canvas viewport center\r\n     */\n\n\n    this.zoomCanvas = (\n    /** decimal fraction between 0.1 (10% zoom) and 30 (3000% zoom) */\n    value) => {\n      this.setState(Object.assign({}, (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n        viewportX: this.state.width / 2 + this.state.offsetLeft,\n        viewportY: this.state.height / 2 + this.state.offsetTop,\n        nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(value)\n      }, this.state)));\n    };\n\n    this.cancelInProgressAnimation = null;\n\n    this.scrollToContent = (target = this.scene.getNonDeletedElements(), opts) => {\n      var _a, _b;\n\n      (_a = this.cancelInProgressAnimation) === null || _a === void 0 ? void 0 : _a.call(this); // convert provided target into ExcalidrawElement[] if necessary\n\n      const targetElements = Array.isArray(target) ? target : [target];\n      let zoom = this.state.zoom;\n      let scrollX = this.state.scrollX;\n      let scrollY = this.state.scrollY;\n\n      if ((opts === null || opts === void 0 ? void 0 : opts.fitToContent) || (opts === null || opts === void 0 ? void 0 : opts.fitToViewport)) {\n        const {\n          appState\n        } = (0,_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.zoomToFit)({\n          targetElements,\n          appState: this.state,\n          fitToViewport: !!(opts === null || opts === void 0 ? void 0 : opts.fitToViewport),\n          viewportZoomFactor: opts === null || opts === void 0 ? void 0 : opts.viewportZoomFactor\n        });\n        zoom = appState.zoom;\n        scrollX = appState.scrollX;\n        scrollY = appState.scrollY;\n      } else {\n        // compute only the viewport location, without any zoom adjustment\n        const scroll = (0,_scene__WEBPACK_IMPORTED_MODULE_29__.calculateScrollCenter)(targetElements, this.state);\n        scrollX = scroll.scrollX;\n        scrollY = scroll.scrollY;\n      } // when animating, we use RequestAnimationFrame to prevent the animation\n      // from slowing down other processes\n\n\n      if (opts === null || opts === void 0 ? void 0 : opts.animate) {\n        const origScrollX = this.state.scrollX;\n        const origScrollY = this.state.scrollY;\n        const origZoom = this.state.zoom.value;\n        const cancel = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.easeToValuesRAF)({\n          fromValues: {\n            scrollX: origScrollX,\n            scrollY: origScrollY,\n            zoom: origZoom\n          },\n          toValues: {\n            scrollX,\n            scrollY,\n            zoom: zoom.value\n          },\n          interpolateValue: (from, to, progress, key) => {\n            // for zoom, use different easing\n            if (key === \"zoom\") {\n              return from * Math.pow(to / from, (0,_utils__WEBPACK_IMPORTED_MODULE_33__.easeOut)(progress));\n            } // handle using default\n\n\n            return undefined;\n          },\n          onStep: ({\n            scrollX,\n            scrollY,\n            zoom\n          }) => {\n            this.setState({\n              scrollX,\n              scrollY,\n              zoom: {\n                value: zoom\n              }\n            });\n          },\n          onStart: () => {\n            this.setState({\n              shouldCacheIgnoreZoom: true\n            });\n          },\n          onEnd: () => {\n            this.setState({\n              shouldCacheIgnoreZoom: false\n            });\n          },\n          onCancel: () => {\n            this.setState({\n              shouldCacheIgnoreZoom: false\n            });\n          },\n          duration: (_b = opts === null || opts === void 0 ? void 0 : opts.duration) !== null && _b !== void 0 ? _b : 500\n        });\n\n        this.cancelInProgressAnimation = () => {\n          cancel();\n          this.cancelInProgressAnimation = null;\n        };\n      } else {\n        this.setState({\n          scrollX,\n          scrollY,\n          zoom\n        });\n      }\n    };\n\n    this.maybeUnfollowRemoteUser = () => {\n      if (this.state.userToFollow) {\n        this.setState({\n          userToFollow: null\n        });\n      }\n    };\n    /** use when changing scrollX/scrollY/zoom based on user interaction */\n\n\n    this.translateCanvas = state => {\n      var _a;\n\n      (_a = this.cancelInProgressAnimation) === null || _a === void 0 ? void 0 : _a.call(this);\n      this.maybeUnfollowRemoteUser();\n      this.setState(state);\n    }; //zsviczian\n\n\n    this.zoomToFit = (target = this.scene.getNonDeletedElements(), maxZoom = 1, //null will zoom to max based on viewport\n    margin = 0.03) => {\n      if (!target) {\n        target = this.scene.getNonDeletedElements();\n      }\n\n      if (target.length === 0) {\n        maxZoom = 1;\n      }\n\n      this.setState((0,_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.zoomToFitElements)(target, this.state, false, this, maxZoom, margin).appState);\n    }; //zsviczian\n\n\n    this.startLineEditor = (el, selectedPointsIndices = null) => {\n      if (!el || !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(el)) {\n        return;\n      }\n\n      const editingLinearElement = new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(el, this.scene);\n      this.setState({\n        selectedLinearElement: editingLinearElement,\n        editingLinearElement: Object.assign(Object.assign({}, editingLinearElement), {\n          selectedPointsIndices\n        })\n      });\n    }; //zsviczian\n\n\n    this.updateContainerSize = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(containers => {\n      containers.forEach(el => {\n        const [x, y] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.rotate)(el.x + el.width, el.y + el.height, el.x + el.width / 2, el.y + el.height / 2, el.angle);\n        (0,_element_resizeElements__WEBPACK_IMPORTED_MODULE_45__.resizeSingleElement)(new Map().set(el.id, el), false, el, \"se\", true, x, y);\n      });\n    });\n\n    this.setToast = toast => {\n      this.setState({\n        toast\n      });\n    };\n\n    this.restoreFileFromShare = async () => {\n      try {\n        const webShareTargetCache = await caches.open(\"web-share-target\");\n        const response = await webShareTargetCache.match(\"shared-file\");\n\n        if (response) {\n          const blob = await response.blob();\n          const file = new File([blob], blob.name || \"\", {\n            type: blob.type\n          });\n          this.loadFileToCanvas(file, null);\n          await webShareTargetCache.delete(\"shared-file\");\n          window.history.replaceState(null, _constants__WEBPACK_IMPORTED_MODULE_12__.APP_NAME, window.location.pathname);\n        }\n      } catch (error) {\n        this.setState({\n          errorMessage: error.message\n        });\n      }\n    };\n    /** adds supplied files to existing files in the appState */\n\n\n    this.addFiles = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(files => {\n      const filesMap = files.reduce((acc, fileData) => {\n        acc.set(fileData.id, fileData);\n        return acc;\n      }, new Map());\n      this.files = Object.assign(Object.assign({}, this.files), Object.fromEntries(filesMap));\n      this.scene.getNonDeletedElements().forEach(element => {\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(element) && filesMap.has(element.fileId)) {\n          this.imageCache.delete(element.fileId);\n          _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element);\n        }\n      });\n      this.scene.informMutation();\n      this.addNewImagesToImageCache();\n    }); //zsviczian https://github.com/zsviczian/excalibrain/issues/9\n\n    this.setMobileModeAllowed = allow => {\n      const {\n        width: editorWidth,\n        height: editorHeight\n      } = this.excalidrawContainerRef.current.getBoundingClientRect();\n      this.allowMobileMode = allow;\n      const prevEditorState = this.device.editor;\n      let nextEditorState;\n\n      if (allow) {\n        nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(prevEditorState, {\n          isMobile: this.isMobileBreakpoint(editorWidth, editorHeight)\n        });\n      } else {\n        nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(prevEditorState, {\n          isMobile: false //must test this\n\n        });\n      }\n\n      if (prevEditorState !== nextEditorState) {\n        this.device = Object.assign(Object.assign({}, this.device), {\n          editor: nextEditorState\n        });\n        this.forceUpdate();\n      }\n    }; //zsviczian\n\n\n    this.setLocalFont = showOnPanel => {\n      showFourthFont = showOnPanel;\n    };\n\n    this.selectElements = elements => {\n      this.updateScene({\n        appState: Object.assign(Object.assign({}, this.state), {\n          editingGroupId: null,\n          selectedElementIds: elements.reduce((map, element) => {\n            map[element.id] = true;\n            return map;\n          }, {})\n        }),\n        commitToHistory: true\n      });\n    };\n\n    this.bringToFront = elements => {\n      this.selectElements(elements);\n      this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionBringToFront.perform(this.scene.getNonDeletedElements(), this.state));\n    };\n\n    this.bringForward = elements => {\n      this.selectElements(elements);\n      this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionBringForward.perform(this.scene.getNonDeletedElements(), this.state));\n    };\n\n    this.sendToBack = elements => {\n      this.selectElements(elements);\n      this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionSendToBack.perform(this.scene.getNonDeletedElements(), this.state));\n    };\n\n    this.sendBackward = elements => {\n      this.selectElements(elements);\n      this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionSendBackward.perform(this.scene.getNonDeletedElements(), this.state));\n    };\n\n    this.updateScene = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(sceneData => {\n      if (sceneData.commitToHistory) {\n        this.history.resumeRecording();\n      }\n\n      (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n        if (sceneData.appState) {\n          this.setState(sceneData.appState);\n        }\n      });\n\n      if (sceneData.elements) {\n        this.scene.replaceAllElements(sceneData.elements);\n      }\n\n      if (sceneData.collaborators) {\n        this.setState({\n          collaborators: sceneData.collaborators\n        });\n      }\n    });\n\n    this.onSceneUpdated = () => {\n      this.setState({});\n    };\n    /**\r\n     * @returns whether the menu was toggled on or off\r\n     */\n\n\n    this.toggleSidebar = ({\n      name,\n      tab,\n      force\n    }) => {\n      var _a;\n\n      let nextName;\n\n      if (force === undefined) {\n        nextName = ((_a = this.state.openSidebar) === null || _a === void 0 ? void 0 : _a.name) === name ? null : name;\n      } else {\n        nextName = force ? name : null;\n      }\n\n      this.setState({\n        openSidebar: nextName ? {\n          name: nextName,\n          tab\n        } : null\n      });\n      return !!nextName;\n    };\n\n    this.updateCurrentCursorPosition = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      this.lastViewportPosition.x = event.clientX;\n      this.lastViewportPosition.y = event.clientY;\n    }); // Input handling\n\n    this.onKeyDown = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      if (this.state.activeTool.type === \"selection\" && this.state.resizingElement && (event.shiftKey || event.altKey)) {\n        event.stopPropagation(); //zsviczian shift fires repeatedly causing slowdown when resizing sticky notes\n\n        return;\n      } // normalize `event.key` when CapsLock is pressed #2372\n\n\n      if (\"Proxy\" in window && (!event.shiftKey && /^[A-Z]$/.test(event.key) || event.shiftKey && /^[a-z]$/.test(event.key))) {\n        event = new Proxy(event, {\n          get(ev, prop) {\n            const value = ev[prop];\n\n            if (typeof value === \"function\") {\n              // fix for Proxies hijacking `this`\n              return value.bind(ev);\n            }\n\n            return prop === \"key\" ? // CapsLock inverts capitalization based on ShiftKey, so invert\n            // it back\n            event.shiftKey ? ev.key.toUpperCase() : ev.key.toLowerCase() : value;\n          }\n\n        });\n      }\n\n      if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.V) {\n        IS_PLAIN_PASTE = event.shiftKey;\n        clearTimeout(IS_PLAIN_PASTE_TIMER); // reset (100ms to be safe that we it runs after the ensuing\n        // paste event). Though, technically unnecessary to reset since we\n        // (re)set the flag before each paste event.\n\n        IS_PLAIN_PASTE_TIMER = window.setTimeout(() => {\n          IS_PLAIN_PASTE = false;\n        }, 100);\n      } // prevent browser zoom in input fields\n\n\n      if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (0,_utils__WEBPACK_IMPORTED_MODULE_33__.isWritableElement)(event.target)) {\n        if (event.code === _keys__WEBPACK_IMPORTED_MODULE_26__.CODES.MINUS || event.code === _keys__WEBPACK_IMPORTED_MODULE_26__.CODES.EQUAL) {\n          event.preventDefault();\n          return;\n        }\n      } // bail if\n\n\n      if ( // inside an input\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.isWritableElement)(event.target) && // unless pressing escape (finalize action)\n      event.key !== _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ESCAPE || // or unless using arrows (to move between buttons)\n      (0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key) && (0,_utils__WEBPACK_IMPORTED_MODULE_33__.isInputLike)(event.target)) {\n        return;\n      }\n\n      if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.QUESTION_MARK) {\n        this.setState({\n          openDialog: {\n            name: \"help\"\n          }\n        });\n        return;\n      } else if (event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.E && event.shiftKey && event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n        event.preventDefault();\n        this.setState({\n          openDialog: {\n            name: \"imageExport\"\n          }\n        });\n        return;\n      }\n\n      if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_UP || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_DOWN) {\n        let offset = (event.shiftKey ? this.state.width : this.state.height) / this.state.zoom.value;\n\n        if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_DOWN) {\n          offset = -offset;\n        }\n\n        if (event.shiftKey) {\n          this.translateCanvas(state => ({\n            scrollX: state.scrollX + offset\n          }));\n        } else {\n          this.translateCanvas(state => ({\n            scrollY: state.scrollY + offset\n          }));\n        }\n      }\n\n      if (this.actionManager.handleKeyDown(event)) {\n        return;\n      }\n\n      if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.K && !event.altKey && !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n        if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isLaserPointerActive)(this.state)) {\n          this.setActiveTool({\n            type: \"selection\"\n          });\n        } else {\n          this.setActiveTool({\n            type: \"laser\"\n          });\n        }\n\n        return;\n      }\n\n      if (this.state.viewModeEnabled) {\n        //revert to hand in case a key is pressed (K is handled above)\n        if (event.key !== _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.K) {\n          this.setActiveTool({\n            type: \"selection\"\n          });\n        }\n\n        return;\n      }\n\n      if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && this.state.isBindingEnabled) {\n        this.setState({\n          isBindingEnabled: false\n        });\n      }\n\n      if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key)) {\n        const step = this.state.gridSize && (event.shiftKey ? _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_TRANSLATE_AMOUNT : this.state.gridSize) || (event.shiftKey ? _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_SHIFT_TRANSLATE_AMOUNT : _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_TRANSLATE_AMOUNT);\n        let offsetX = 0;\n        let offsetY = 0;\n\n        if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_LEFT) {\n          offsetX = -step;\n        } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_RIGHT) {\n          offsetX = step;\n        } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_UP) {\n          offsetY = -step;\n        } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_DOWN) {\n          offsetY = step;\n        }\n\n        const selectedElements = this.scene.getSelectedElements({\n          selectedElementIds: this.state.selectedElementIds,\n          includeBoundTextElement: true,\n          includeElementsInFrames: true\n        });\n        selectedElements.forEach(element => {\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n            x: element.x + offsetX,\n            y: element.y + offsetY\n          });\n          (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.updateBoundElements)(element, {\n            simultaneouslyUpdated: selectedElements\n          });\n        });\n        this.maybeSuggestBindingForAll(selectedElements);\n        event.preventDefault();\n      } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ENTER) {\n        const selectedElements = this.scene.getSelectedElements(this.state);\n\n        if (selectedElements.length === 1) {\n          const selectedElement = selectedElements[0];\n\n          if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n            if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElement)) {\n              if (!this.state.editingLinearElement || this.state.editingLinearElement.elementId !== selectedElements[0].id) {\n                this.history.resumeRecording();\n                this.setState({\n                  editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElement, this.scene)\n                });\n              }\n            }\n          } else if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElement) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.isValidTextContainer)(selectedElement)) {\n            let container;\n\n            if (!(0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElement)) {\n              container = selectedElement;\n            }\n\n            const midPoint = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getContainerCenter)(selectedElement, this.state);\n            const sceneX = midPoint.x;\n            const sceneY = midPoint.y;\n            this.startTextEditing({\n              sceneX,\n              sceneY,\n              container\n            });\n            event.preventDefault();\n            return;\n          } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(selectedElement)) {\n            this.setState({\n              editingFrame: selectedElement.id\n            });\n          }\n        }\n      } else if (!event.ctrlKey && !event.altKey && !event.metaKey && this.state.draggingElement === null) {\n        const shape = (0,_shapes__WEBPACK_IMPORTED_MODULE_32__.findShapeByKey)(event.key);\n\n        if (shape) {\n          if (this.state.activeTool.type !== shape) {\n            (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"toolbar\", shape, `keyboard (${this.device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n          }\n\n          this.setActiveTool({\n            type: shape\n          });\n          event.stopPropagation();\n        } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.Q) {\n          this.toggleLock(\"keyboard\");\n          event.stopPropagation();\n        }\n      }\n\n      if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.SPACE && gesture.pointers.size === 0) {\n        isHoldingSpace = true;\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n        event.preventDefault();\n      }\n\n      if ((event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.G || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.S) && !event.altKey && !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n        const selectedElements = this.scene.getSelectedElements(this.state);\n\n        if (this.state.activeTool.type === \"selection\" && !selectedElements.length) {\n          return;\n        }\n\n        if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.G && ((0,_scene__WEBPACK_IMPORTED_MODULE_29__.hasBackground)(this.state.activeTool.type) || selectedElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_29__.hasBackground)(element.type)))) {\n          this.setState({\n            openPopup: \"elementBackground\"\n          });\n          event.stopPropagation();\n        }\n\n        if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.S) {\n          this.setState({\n            openPopup: \"elementStroke\"\n          });\n          event.stopPropagation();\n        }\n      }\n\n      if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.BACKSPACE || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.DELETE)) {\n        _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.set(_ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_57__.activeConfirmDialogAtom, \"clearCanvas\");\n      } // eye dropper\n      // -----------------------------------------------------------------------\n\n\n      const lowerCased = event.key.toLocaleLowerCase();\n      const isPickingStroke = lowerCased === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.S && event.shiftKey;\n      const isPickingBackground = event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.I || lowerCased === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.G && event.shiftKey;\n\n      if (isPickingStroke || isPickingBackground) {\n        this.openEyeDropper({\n          type: isPickingStroke ? \"stroke\" : \"background\"\n        });\n      } // -----------------------------------------------------------------------\n\n    });\n    this.onWheel = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      // prevent browser pinch zoom on DOM elements\n      if (!(event.target instanceof HTMLCanvasElement) && event.ctrlKey) {\n        event.preventDefault();\n      }\n    });\n    this.onKeyUp = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.SPACE) {\n        if (this.state.viewModeEnabled) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n        } else if (this.state.activeTool.type === \"selection\") {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.resetCursor)(this.interactiveCanvas);\n        } else {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursorForShape)(this.interactiveCanvas, this.state);\n          this.setState({\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n            selectedGroupIds: {},\n            editingGroupId: null,\n            activeEmbeddable: null\n          });\n        }\n\n        isHoldingSpace = false;\n      }\n\n      if (!event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && !this.state.isBindingEnabled) {\n        this.setState({\n          isBindingEnabled: true\n        });\n      }\n\n      if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key)) {\n        const selectedElements = this.scene.getSelectedElements(this.state);\n        (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) ? (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindSelectedElements)(selectedElements) : (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.unbindLinearElements)(selectedElements);\n        this.setState({\n          suggestedBindings: []\n        });\n      }\n    }); // We purposely widen the `tool` type so this helper can be called with\n    // any tool without having to type check it\n\n    this.isToolSupported = tool => {\n      var _a;\n\n      return ((_a = this.props.UIOptions.tools) === null || _a === void 0 ? void 0 : _a[tool]) !== false;\n    };\n\n    this.setActiveTool = tool => {\n      var _a;\n\n      if (!this.isToolSupported(tool.type)) {\n        console.warn(`\"${tool.type}\" tool is disabled via \"UIOptions.canvasActions.tools.${tool.type}\"`);\n        return;\n      }\n\n      const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, tool);\n\n      if (nextActiveTool.type === \"hand\") {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n      } else if (!isHoldingSpace) {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursorForShape)(this.interactiveCanvas, this.state);\n      }\n\n      if ((0,_utils__WEBPACK_IMPORTED_MODULE_33__.isToolIcon)(document.activeElement)) {\n        this.focusContainer();\n      }\n\n      if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElementType)(nextActiveTool.type)) {\n        this.setState({\n          suggestedBindings: []\n        });\n      }\n\n      if (nextActiveTool.type === \"image\") {\n        this.onImageAction({\n          insertOnCanvasDirectly: (_a = tool.type === \"image\" && tool.insertOnCanvasDirectly) !== null && _a !== void 0 ? _a : false\n        });\n      }\n\n      this.setState(prevState => {\n        const commonResets = {\n          snapLines: prevState.snapLines.length ? [] : prevState.snapLines,\n          originSnapOffset: null,\n          activeEmbeddable: null\n        };\n\n        if (nextActiveTool.type !== \"selection\") {\n          return Object.assign(Object.assign(Object.assign({}, prevState), {\n            activeTool: nextActiveTool,\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextActiveTool.type === \"mermaid\" //zsviczian\n            ? this.state.selectedElementIds : {}, prevState),\n            selectedGroupIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, prevState),\n            editingGroupId: null,\n            multiElement: null\n          }), commonResets);\n        }\n\n        return Object.assign(Object.assign(Object.assign({}, prevState), {\n          activeTool: nextActiveTool\n        }), commonResets);\n      });\n    };\n\n    this.setOpenDialog = dialogType => {\n      this.setState({\n        openDialog: dialogType\n      });\n    };\n\n    this.setCursor = cursor => {\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, cursor);\n    };\n\n    this.resetCursor = () => {\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.resetCursor)(this.interactiveCanvas);\n    };\n    /**\r\n     * returns whether user is making a gesture with >= 2 fingers (points)\r\n     * on o touch screen (not on a trackpad). Currently only relates to Darwin\r\n     * (iOS/iPadOS,MacOS), but may work on other devices in the future if\r\n     * GestureEvent is standardized.\r\n     */\n\n\n    this.isTouchScreenMultiTouchGesture = () => {\n      // we don't want to deselect when using trackpad, and multi-point gestures\n      // only work on touch screens, so checking for >= pointers means we're on a\n      // touchscreen\n      return gesture.pointers.size >= 2;\n    }; // fires only on Safari\n\n\n    this.onGestureStart = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      event.preventDefault(); // we only want to deselect on touch screens because user may have selected\n      // elements by mistake while zooming\n\n      if (this.isTouchScreenMultiTouchGesture()) {\n        this.setState({\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n          activeEmbeddable: null\n        });\n      }\n\n      gesture.initialScale = this.state.zoom.value;\n    }); // fires only on Safari\n\n    this.onGestureChange = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      event.preventDefault(); // onGestureChange only has zoom factor but not the center.\n      // If we're on iPad or iPhone, then we recognize multi-touch and will\n      // zoom in at the right location in the touchmove handler\n      // (handleCanvasPointerMove).\n      //\n      // On Macbook trackpad, we don't have those events so will zoom in at the\n      // current location instead.\n      //\n      // As such, bail from this handler on touch devices.\n\n      if (this.isTouchScreenMultiTouchGesture()) {\n        return;\n      }\n\n      const initialScale = gesture.initialScale;\n\n      if (initialScale) {\n        this.setState(state => Object.assign({}, (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n          viewportX: this.lastViewportPosition.x,\n          viewportY: this.lastViewportPosition.y,\n          nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(initialScale * event.scale)\n        }, state)));\n      }\n    }); // fires only on Safari\n\n    this.onGestureEnd = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      event.preventDefault(); // reselect elements only on touch screens (see onGestureStart)\n\n      if (this.isTouchScreenMultiTouchGesture()) {\n        this.setState({\n          previousSelectedElementIds: {},\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(this.state.previousSelectedElementIds, this.state)\n        });\n      }\n\n      gesture.initialScale = null;\n    });\n\n    this.startTextEditing = ({\n      sceneX,\n      sceneY,\n      insertAtParentCenter = true,\n      container\n    }) => {\n      var _a, _b;\n\n      let shouldBindToContainer = false;\n      let parentCenterPosition = insertAtParentCenter && this.getTextWysiwygSnappedToCenterPosition(sceneX, sceneY, this.state, container);\n\n      if (container && parentCenterPosition) {\n        const boundTextElementToContainer = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getBoundTextElement)(container);\n\n        if (!boundTextElementToContainer) {\n          shouldBindToContainer = true;\n        }\n      }\n\n      let existingTextElement = null;\n      const selectedElements = this.scene.getSelectedElements(this.state);\n\n      if (selectedElements.length === 1) {\n        if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElements[0])) {\n          existingTextElement = selectedElements[0];\n        } else if (container) {\n          existingTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getBoundTextElement)(selectedElements[0]);\n        } else {\n          existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);\n        }\n      } else {\n        existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);\n      }\n\n      const fontFamily = (existingTextElement === null || existingTextElement === void 0 ? void 0 : existingTextElement.fontFamily) || this.state.currentItemFontFamily;\n      const lineHeight = (existingTextElement === null || existingTextElement === void 0 ? void 0 : existingTextElement.lineHeight) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getDefaultLineHeight)(fontFamily);\n      const fontSize = (0,_actions_actionProperties__WEBPACK_IMPORTED_MODULE_80__.getFontSize)(this.state.currentItemFontSize, this.state.zoom.value); //zsviczian\n\n      if (!existingTextElement && shouldBindToContainer && container && !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isArrowElement)(container)) {\n        const fontString = {\n          fontSize,\n          fontFamily\n        };\n        const minWidth = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getApproxMinLineWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_33__.getFontString)(fontString), lineHeight);\n        const minHeight = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getApproxMinLineHeight)(fontSize, lineHeight);\n        const newHeight = Math.max(container.height, minHeight);\n        const newWidth = Math.max(container.width, minWidth);\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(container, {\n          height: newHeight,\n          width: newWidth\n        });\n        sceneX = container.x + newWidth / 2;\n        sceneY = container.y + newHeight / 2;\n\n        if (parentCenterPosition) {\n          parentCenterPosition = this.getTextWysiwygSnappedToCenterPosition(sceneX, sceneY, this.state, container);\n        }\n      }\n\n      const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n        x: sceneX,\n        y: sceneY\n      });\n      const element = existingTextElement ? existingTextElement : (0,_element__WEBPACK_IMPORTED_MODULE_16__.newTextElement)({\n        x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX,\n        y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY,\n        strokeColor: this.state.currentItemStrokeColor,\n        backgroundColor: this.state.currentItemBackgroundColor,\n        fillStyle: this.state.currentItemFillStyle,\n        strokeWidth: this.state.currentItemStrokeWidth,\n        strokeStyle: this.state.currentItemStrokeStyle,\n        roughness: this.state.currentItemRoughness,\n        opacity: this.state.currentItemOpacity,\n        text: \"\",\n        rawText: \"\",\n        fontSize,\n        fontFamily,\n        textAlign: parentCenterPosition ? \"center\" : this.state.currentItemTextAlign,\n        verticalAlign: parentCenterPosition ? _constants__WEBPACK_IMPORTED_MODULE_12__.VERTICAL_ALIGN.MIDDLE : _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_VERTICAL_ALIGN,\n        containerId: shouldBindToContainer ? container === null || container === void 0 ? void 0 : container.id : undefined,\n        groupIds: (_a = container === null || container === void 0 ? void 0 : container.groupIds) !== null && _a !== void 0 ? _a : [],\n        lineHeight,\n        angle: (_b = container === null || container === void 0 ? void 0 : container.angle) !== null && _b !== void 0 ? _b : 0,\n        frameId: topLayerFrame ? topLayerFrame.id : null\n      });\n\n      if (!existingTextElement && shouldBindToContainer && container) {\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(container, {\n          boundElements: (container.boundElements || []).concat({\n            type: \"text\",\n            id: element.id\n          })\n        });\n      }\n\n      this.setState({\n        editingElement: element\n      });\n\n      if (!existingTextElement) {\n        if (container && shouldBindToContainer) {\n          const containerIndex = this.scene.getElementIndex(container.id);\n          this.scene.insertElementAtIndex(element, containerIndex + 1);\n        } else {\n          this.scene.addNewElement(element);\n        }\n      }\n\n      this.setState({\n        editingElement: element\n      });\n      this.handleTextWysiwyg(element, {\n        isExistingElement: !!existingTextElement\n      });\n    };\n\n    this.handleCanvasDoubleClick = event => {\n      // case: double-clicking with arrow/line tool selected would both create\n      // text and enter multiElement mode\n      if (this.state.multiElement) {\n        return;\n      }\n\n      if (this.state.viewModeEnabled) {\n        if (this.state.activeTool.type === \"laser\") {\n          this.setActiveTool({\n            type: \"selection\"\n          });\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n        } else {\n          this.setActiveTool({\n            type: \"laser\"\n          });\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.CROSSHAIR);\n        }\n\n        return;\n      } // we should only be able to double click when mode is selection\n\n\n      if (this.state.activeTool.type !== \"selection\") {\n        return;\n      }\n\n      const selectedElements = this.scene.getSelectedElements(this.state);\n\n      if (selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElements[0])) {\n        if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (!this.state.editingLinearElement || this.state.editingLinearElement.elementId !== selectedElements[0].id)) {\n          this.history.resumeRecording();\n          this.setState({\n            editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElements[0], this.scene)\n          });\n          return;\n        } else if (this.state.editingLinearElement && this.state.editingLinearElement.elementId === selectedElements[0].id) {\n          return;\n        }\n      }\n\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.resetCursor)(this.interactiveCanvas);\n      let {\n        x: sceneX,\n        y: sceneY\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n      const selectedGroupIds = (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getSelectedGroupIds)(this.state);\n\n      if (selectedGroupIds.length > 0) {\n        const hitElement = this.getElementAtPosition(sceneX, sceneY);\n        const selectedGroupId = hitElement && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getSelectedGroupIdForElement)(hitElement, this.state.selectedGroupIds);\n\n        if (selectedGroupId) {\n          this.setState(prevState => Object.assign(Object.assign({}, prevState), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n            editingGroupId: selectedGroupId,\n            selectedElementIds: {\n              [hitElement.id]: true\n            }\n          }, this.scene.getNonDeletedElements(), prevState, this)));\n          return;\n        }\n      }\n\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.resetCursor)(this.interactiveCanvas);\n\n      if (!event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && !this.state.viewModeEnabled) {\n        const hitElement = this.getElementAtPosition(sceneX, sceneY);\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement)) {\n          this.setState({\n            activeEmbeddable: {\n              element: hitElement,\n              state: \"active\"\n            }\n          });\n          return;\n        }\n\n        const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getTextBindableContainerAtPosition)(this.scene.getNonDeletedElements(), this.state, sceneX, sceneY);\n\n        if (container) {\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.hasBoundTextElement)(container) || !(0,_utils__WEBPACK_IMPORTED_MODULE_33__.isTransparent)(container.backgroundColor) || (0,_element_collision__WEBPACK_IMPORTED_MODULE_44__.isHittingElementNotConsideringBoundingBox)(container, this.state, this.frameNameBoundsCache, [sceneX, sceneY])) {\n            const midPoint = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getContainerCenter)(container, this.state);\n            sceneX = midPoint.x;\n            sceneY = midPoint.y;\n          }\n        }\n\n        this.startTextEditing({\n          sceneX,\n          sceneY,\n          insertAtParentCenter: !event.altKey,\n          container\n        });\n      }\n    };\n\n    this.getElementLinkAtPosition = (scenePointer, hitElement) => {\n      // Reversing so we traverse the elements in decreasing order\n      // of z-index\n      const elements = this.scene.getNonDeletedElements().slice().reverse();\n      let hitElementIndex = Infinity;\n      return elements.find((element, index) => {\n        if (hitElement && element.id === hitElement.id) {\n          hitElementIndex = index;\n        }\n\n        return element.link && index <= hitElementIndex && (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLink)(element, this.state, [scenePointer.x, scenePointer.y], this.device.editor.isMobile);\n      });\n    };\n\n    this.redirectToLink = (event, isTouchScreen) => {\n      const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(this.lastPointerDownEvent.clientX, this.lastPointerDownEvent.clientY, this.lastPointerUpEvent.clientX, this.lastPointerUpEvent.clientY);\n\n      if (!this.hitLinkElement || // For touch screen allow dragging threshold else strict check\n      isTouchScreen && draggedDistance > _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD || !isTouchScreen && draggedDistance !== 0) {\n        return;\n      }\n\n      const lastPointerDownCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(this.lastPointerDownEvent, this.state);\n      const lastPointerDownHittingLinkIcon = (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLink)(this.hitLinkElement, this.state, [lastPointerDownCoords.x, lastPointerDownCoords.y], this.device.editor.isMobile);\n      const lastPointerUpCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(this.lastPointerUpEvent, this.state);\n      const lastPointerUpHittingLinkIcon = (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLink)(this.hitLinkElement, this.state, [lastPointerUpCoords.x, lastPointerUpCoords.y], this.device.editor.isMobile);\n\n      if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {\n        let url = this.hitLinkElement.link;\n\n        if (url) {\n          url = (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.normalizeLink)(url);\n          let customEvent;\n\n          if (this.props.onLinkOpen) {\n            customEvent = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.wrapEvent)(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.EXCALIDRAW_LINK, event.nativeEvent);\n            this.props.onLinkOpen(Object.assign(Object.assign({}, this.hitLinkElement), {\n              link: url\n            }), customEvent);\n          }\n\n          if (!(customEvent === null || customEvent === void 0 ? void 0 : customEvent.defaultPrevented)) {\n            const target = (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.isLocalLink)(url) ? \"_self\" : \"_blank\";\n            const newWindow = window.open(undefined, target); // https://mathiasbynens.github.io/rel-noopener/\n\n            if (newWindow) {\n              newWindow.opener = null;\n              newWindow.location = url;\n            }\n          }\n        }\n      }\n    };\n\n    this.getTopLayerFrameAtSceneCoords = sceneCoords => {\n      const frames = this.scene.getNonDeletedFramesLikes().filter(frame => (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isCursorInFrame)(sceneCoords, frame));\n      return frames.length ? frames[frames.length - 1] : null;\n    };\n\n    this.handleCanvasPointerMove = event => {\n      var _a, _b;\n\n      this.savePointer(event.clientX, event.clientY, this.state.cursorButton);\n      this.lastPointerMoveEvent = event.nativeEvent;\n\n      if (gesture.pointers.has(event.pointerId)) {\n        gesture.pointers.set(event.pointerId, {\n          x: event.clientX,\n          y: event.clientY\n        });\n      }\n\n      const initialScale = gesture.initialScale;\n\n      if (gesture.pointers.size === 2 && gesture.lastCenter && initialScale && gesture.initialDistance) {\n        const center = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getCenter)(gesture.pointers);\n        const deltaX = center.x - gesture.lastCenter.x;\n        const deltaY = center.y - gesture.lastCenter.y;\n        gesture.lastCenter = center;\n        const distance = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getDistance)(Array.from(gesture.pointers.values()));\n        const scaleFactor = !this.state.allowPinchZoom && //zsviczian\n        this.state.activeTool.type === \"freedraw\" && this.state.penMode ? 1 : distance / gesture.initialDistance;\n        const nextZoom = scaleFactor ? (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(initialScale * scaleFactor) : this.state.zoom.value;\n        this.setState(state => {\n          const zoomState = (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n            viewportX: center.x,\n            viewportY: center.y,\n            nextZoom\n          }, state);\n          this.translateCanvas({\n            zoom: zoomState.zoom,\n            scrollX: zoomState.scrollX + deltaX / nextZoom,\n            scrollY: zoomState.scrollY + deltaY / nextZoom,\n            shouldCacheIgnoreZoom: true\n          });\n        });\n        this.resetShouldCacheIgnoreZoomDebounced();\n      } else {\n        gesture.lastCenter = gesture.initialDistance = gesture.initialScale = null;\n      }\n\n      if (isHoldingSpace || isPanning || isDraggingScrollBar || (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isHandToolActive)(this.state)) {\n        return;\n      }\n\n      const isPointerOverScrollBars = (0,_scene__WEBPACK_IMPORTED_MODULE_29__.isOverScrollBars)(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop);\n      const isOverScrollBar = isPointerOverScrollBars.isOverEither;\n\n      if (!this.state.draggingElement && !this.state.multiElement) {\n        if (isOverScrollBar) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.resetCursor)(this.interactiveCanvas);\n        } else {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursorForShape)(this.interactiveCanvas, this.state);\n        }\n      }\n\n      const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n      const {\n        x: scenePointerX,\n        y: scenePointerY\n      } = scenePointer;\n\n      if (!this.state.draggingElement && (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.isActiveToolNonLinearSnappable)(this.state.activeTool.type)) {\n        const {\n          originOffset,\n          snapLines\n        } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.getSnapLinesAtPointer)(this.scene.getNonDeletedElements(), this.state, {\n          x: scenePointerX,\n          y: scenePointerY\n        }, event);\n        this.setState(prevState => {\n          const nextSnapLines = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateStable)(prevState.snapLines, snapLines);\n          const nextOriginOffset = prevState.originSnapOffset ? (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateStable)(prevState.originSnapOffset, originOffset) : originOffset;\n\n          if (prevState.snapLines === nextSnapLines && prevState.originSnapOffset === nextOriginOffset) {\n            return null;\n          }\n\n          return {\n            snapLines: nextSnapLines,\n            originSnapOffset: nextOriginOffset\n          };\n        });\n      } else if (!this.state.draggingElement) {\n        this.setState(prevState => {\n          if (prevState.snapLines.length) {\n            return {\n              snapLines: []\n            };\n          }\n\n          return null;\n        });\n      }\n\n      if (this.state.editingLinearElement && !this.state.editingLinearElement.isDragging) {\n        const editingLinearElement = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerMove(event, scenePointerX, scenePointerY, this.state);\n\n        if (editingLinearElement && editingLinearElement !== this.state.editingLinearElement) {\n          // Since we are reading from previous state which is not possible with\n          // automatic batching in React 18 hence using flush sync to synchronously\n          // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.\n          (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n            this.setState({\n              editingLinearElement\n            });\n          });\n        }\n\n        if ((editingLinearElement === null || editingLinearElement === void 0 ? void 0 : editingLinearElement.lastUncommittedPoint) != null) {\n          this.maybeSuggestBindingAtCursor(scenePointer);\n        } else {\n          // causes stack overflow if not sync\n          (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n            this.setState({\n              suggestedBindings: []\n            });\n          });\n        }\n      }\n\n      if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElementType)(this.state.activeTool.type)) {\n        // Hovering with a selected tool or creating new linear element via click\n        // and point\n        const {\n          draggingElement\n        } = this.state;\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(draggingElement, false)) {\n          this.maybeSuggestBindingsForLinearElementAtCoords(draggingElement, [scenePointer], this.state.startBoundElement);\n        } else {\n          this.maybeSuggestBindingAtCursor(scenePointer);\n        }\n      }\n\n      if (this.state.multiElement) {\n        const {\n          multiElement\n        } = this.state;\n        const {\n          x: rx,\n          y: ry\n        } = multiElement;\n        const {\n          points,\n          lastCommittedPoint\n        } = multiElement;\n        const lastPoint = points[points.length - 1];\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursorForShape)(this.interactiveCanvas, this.state);\n\n        if (lastPoint === lastCommittedPoint) {\n          // if we haven't yet created a temp point and we're beyond commit-zone\n          // threshold, add a point\n          if ((0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(scenePointerX - rx, scenePointerY - ry, lastPoint[0], lastPoint[1]) >= _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n              points: [...points, [scenePointerX - rx, scenePointerY - ry]]\n            });\n          } else {\n            (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER); // in this branch, we're inside the commit zone, and no uncommitted\n            // point exists. Thus do nothing (don't add/remove points).\n          }\n        } else if (points.length > 2 && lastCommittedPoint && (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(scenePointerX - rx, scenePointerY - ry, lastCommittedPoint[0], lastCommittedPoint[1]) < _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n            points: points.slice(0, -1)\n          });\n        } else {\n          const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(scenePointerX, scenePointerY, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n          const [lastCommittedX, lastCommittedY] = (_a = multiElement === null || multiElement === void 0 ? void 0 : multiElement.lastCommittedPoint) !== null && _a !== void 0 ? _a : [0, 0];\n          let dxFromLastCommitted = gridX - rx - lastCommittedX;\n          let dyFromLastCommitted = gridY - ry - lastCommittedY;\n\n          if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event)) {\n            ({\n              width: dxFromLastCommitted,\n              height: dyFromLastCommitted\n            } = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getLockedLinearCursorAlignSize)( // actual coordinate of the last committed point\n            lastCommittedX + rx, lastCommittedY + ry, // cursor-grid coordinate\n            gridX, gridY));\n          }\n\n          if ((0,_math__WEBPACK_IMPORTED_MODULE_28__.isPathALoop)(points, this.state.zoom.value)) {\n            (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n          } // update last uncommitted point\n\n\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n            points: [...points.slice(0, -1), [lastCommittedX + dxFromLastCommitted, lastCommittedY + dyFromLastCommitted]]\n          });\n        }\n\n        return;\n      }\n\n      const hasDeselectedButton = Boolean(event.buttons);\n\n      if (hasDeselectedButton || this.state.activeTool.type !== \"selection\" && this.state.activeTool.type !== \"text\" && this.state.activeTool.type !== \"eraser\") {\n        return;\n      }\n\n      const elements = this.scene.getNonDeletedElements();\n      const selectedElements = this.scene.getSelectedElements(this.state);\n\n      if (selectedElements.length === 1 && !isOverScrollBar && !this.state.editingLinearElement) {\n        const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, scenePointerX, scenePointerY, this.state.zoom, event.pointerType);\n\n        if (elementWithTransformHandleType && elementWithTransformHandleType.transformHandleType) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCursorForResizingElement)(elementWithTransformHandleType));\n          return;\n        }\n      } else if (selectedElements.length > 1 && !isOverScrollBar) {\n        const transformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getTransformHandleTypeFromCoords)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements), scenePointerX, scenePointerY, this.state.zoom, event.pointerType);\n\n        if (transformHandleType) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCursorForResizingElement)({\n            transformHandleType\n          }));\n          return;\n        }\n      }\n\n      const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n      this.hitLinkElement = this.getElementLinkAtPosition(scenePointer, hitElement);\n\n      if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n        return;\n      }\n\n      if (this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id]) {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n        (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.showHyperlinkTooltip)(this.hitLinkElement, this.state);\n\n        if (this.props.onLinkHover) {\n          this.props.onLinkHover(this.hitLinkElement, event);\n        } //zsviczian\n\n      } else {\n        (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.hideHyperlinkToolip)();\n\n        if (hitElement && (hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement)) && this.state.selectedElementIds[hitElement.id] && !this.state.contextMenu && !this.state.showHyperlinkPopup) {\n          this.setState({\n            showHyperlinkPopup: \"info\"\n          });\n        } else if (this.state.activeTool.type === \"text\") {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(hitElement) ? _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.TEXT : _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.CROSSHAIR);\n        } else if (this.state.viewModeEnabled) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n        } else if (isOverScrollBar) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n        } else if (this.state.selectedLinearElement) {\n          this.handleHoverSelectedLinearElement(this.state.selectedLinearElement, scenePointerX, scenePointerY);\n        } else if ( // if using cmd/ctrl, we're not dragging\n        !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n          if ((hitElement || this.isHittingCommonBoundingBoxOfSelectedElements(scenePointer, selectedElements)) && !(hitElement === null || hitElement === void 0 ? void 0 : hitElement.locked)) {\n            if (hitElement && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, event, scenePointerX, scenePointerY)) {\n              (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n              this.setState({\n                activeEmbeddable: {\n                  element: hitElement,\n                  state: \"hover\"\n                }\n              });\n            } else {\n              (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n\n              if (((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"hover\") {\n                this.setState({\n                  activeEmbeddable: null\n                });\n              }\n            }\n          }\n        } else {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n        }\n      }\n    };\n\n    this.handleEraser = (event, pointerDownState, scenePointer) => {\n      const updateElementIds = elements => {\n        elements.forEach(element => {\n          if (element.locked) {\n            return;\n          }\n\n          idsToUpdate.push(element.id);\n\n          if (event.altKey) {\n            if (pointerDownState.elementIdsToErase[element.id] && pointerDownState.elementIdsToErase[element.id].erase) {\n              pointerDownState.elementIdsToErase[element.id].erase = false;\n            }\n          } else if (!pointerDownState.elementIdsToErase[element.id]) {\n            pointerDownState.elementIdsToErase[element.id] = {\n              erase: true,\n              opacity: element.opacity\n            };\n          }\n        });\n      };\n\n      const idsToUpdate = [];\n      const distance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y, scenePointer.x, scenePointer.y);\n      const threshold = 10 / this.state.zoom.value;\n      const point = Object.assign({}, pointerDownState.lastCoords);\n      let samplingInterval = 0;\n\n      while (samplingInterval <= distance) {\n        const hitElements = this.getElementsAtPosition(point.x, point.y);\n        updateElementIds(hitElements); // Exit since we reached current point\n\n        if (samplingInterval === distance) {\n          break;\n        } // Calculate next point in the line at a distance of sampling interval\n\n\n        samplingInterval = Math.min(samplingInterval + threshold, distance);\n        const distanceRatio = samplingInterval / distance;\n        const nextX = (1 - distanceRatio) * point.x + distanceRatio * scenePointer.x;\n        const nextY = (1 - distanceRatio) * point.y + distanceRatio * scenePointer.y;\n        point.x = nextX;\n        point.y = nextY;\n      }\n\n      const elements = this.scene.getElementsIncludingDeleted().map(ele => {\n        const id = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele) && idsToUpdate.includes(ele.containerId) ? ele.containerId : ele.id;\n\n        if (idsToUpdate.includes(id)) {\n          if (event.altKey) {\n            if (pointerDownState.elementIdsToErase[id] && pointerDownState.elementIdsToErase[id].erase === false) {\n              return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n                opacity: pointerDownState.elementIdsToErase[id].opacity\n              });\n            }\n          } else {\n            return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n              opacity: _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_READY_TO_ERASE_OPACITY\n            });\n          }\n        }\n\n        return ele;\n      });\n      this.scene.replaceAllElements(elements);\n      pointerDownState.lastCoords.x = scenePointer.x;\n      pointerDownState.lastCoords.y = scenePointer.y;\n    }; // set touch moving for mobile context menu\n\n\n    this.handleTouchMove = event => {\n      invalidateContextMenu = true;\n    };\n\n    this.handleCanvasPointerDown = event => {\n      var _a, _b;\n\n      this.focusContainer(); //zsviczian\n\n      this.maybeCleanupAfterMissingPointerUp(event.nativeEvent);\n      this.maybeUnfollowRemoteUser(); // since contextMenu options are potentially evaluated on each render,\n      // and an contextMenu action may depend on selection state, we must\n      // close the contextMenu before we update the selection on pointerDown\n      // (e.g. resetting selection)\n\n      if (this.state.contextMenu) {\n        this.setState({\n          contextMenu: null\n        });\n      }\n\n      if (this.state.snapLines) {\n        this.setAppState({\n          snapLines: []\n        });\n      }\n\n      this.updateGestureOnPointerDown(event); // if dragging element is freedraw and another pointerdown event occurs\n      // a second finger is on the screen\n      // discard the freedraw element if it is very short because it is likely\n      // just a spike, otherwise finalize the freedraw element when the second\n      // finger is lifted\n\n      if (event.pointerType === \"touch\" && this.state.draggingElement && this.state.draggingElement.type === \"freedraw\") {\n        const element = this.state.draggingElement;\n        this.updateScene(Object.assign(Object.assign({}, element.points.length < 10 ? {\n          elements: this.scene.getElementsIncludingDeleted().filter(el => el.id !== element.id)\n        } : {}), {\n          appState: {\n            draggingElement: null,\n            editingElement: null,\n            startBoundElement: null,\n            suggestedBindings: [],\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.keys(this.state.selectedElementIds).filter(key => key !== element.id).reduce((obj, key) => {\n              obj[key] = this.state.selectedElementIds[key];\n              return obj;\n            }, {}), this.state)\n          }\n        }));\n        return;\n      } // remove any active selection when we start to interact with canvas\n      // (mainly, we care about removing selection outside the component which\n      //  would prevent our copy handling otherwise)\n\n\n      const selection = document.getSelection();\n\n      if (selection === null || selection === void 0 ? void 0 : selection.anchorNode) {\n        selection.removeAllRanges();\n      }\n\n      this.maybeOpenContextMenuAfterPointerDownOnTouchDevices(event); //fires only once, if pen is detected, penMode is enabled\n      //the user can disable this by toggling the penMode button\n\n      if (!this.state.penDetected && event.pointerType === \"pen\") {\n        this.setState(prevState => {\n          return {\n            penMode: true,\n            penDetected: true\n          };\n        });\n      }\n\n      if (!this.device.isTouchScreen && [\"pen\", \"touch\"].includes(event.pointerType)) {\n        this.device = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(this.device, {\n          isTouchScreen: true\n        });\n      }\n\n      if (isPanning) {\n        return;\n      }\n\n      this.lastPointerDownEvent = event; // we must exit before we set `cursorButton` state and `savePointer`\n      // else it will send pointer state & laser pointer events in collab when\n      // panning\n\n      if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {\n        return;\n      }\n\n      this.setState({\n        lastPointerDownWith: event.pointerType,\n        cursorButton: \"down\"\n      });\n      this.savePointer(event.clientX, event.clientY, \"down\");\n\n      if (event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.ERASER && this.state.activeTool.type !== _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.eraser) {\n        this.setState({\n          activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, {\n            type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.eraser,\n            lastActiveToolBeforeEraser: this.state.activeTool\n          })\n        }, () => {\n          this.handleCanvasPointerDown(event);\n\n          const onPointerUp = () => {\n            unsubPointerUp();\n            unsubCleanup === null || unsubCleanup === void 0 ? void 0 : unsubCleanup();\n\n            if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n              this.setState({\n                activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, Object.assign(Object.assign({}, this.state.activeTool.lastActiveTool || {\n                  type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.selection\n                }), {\n                  lastActiveToolBeforeEraser: null\n                }))\n              });\n            }\n          };\n\n          const unsubPointerUp = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp, {\n            once: true\n          });\n          let unsubCleanup; // subscribe inside rAF lest it'd be triggered on the same pointerdown\n          // if we start erasing while coming from blurred document since\n          // we cleanup pointer events on focus\n\n          requestAnimationFrame(() => {\n            unsubCleanup = this.missingPointerEventCleanupEmitter.once(onPointerUp);\n          });\n        });\n        return;\n      } // only handle left mouse button or touch\n\n\n      if (event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.MAIN && event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.TOUCH && event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.ERASER) {\n        return;\n      } // don't select while panning\n\n\n      if (gesture.pointers.size > 1) {\n        return;\n      } // State for the duration of a pointer interaction, which starts with a\n      // pointerDown event, ends with a pointerUp event (or another pointerDown)\n\n\n      const pointerDownState = this.initialPointerDownState(event);\n      this.setState({\n        selectedElementsAreBeingDragged: false\n      });\n\n      if (this.handleDraggingScrollBar(event, pointerDownState)) {\n        return;\n      }\n\n      this.clearSelectionIfNotUsingSelection();\n      this.updateBindingEnabledOnPointerMove(event);\n\n      if (this.handleSelectionOnPointerDown(event, pointerDownState)) {\n        return;\n      }\n\n      const allowOnPointerDown = !this.state.penMode || event.pointerType !== \"touch\" || this.state.activeTool.type === \"selection\" || this.state.activeTool.type === \"text\" || this.state.activeTool.type === \"image\";\n\n      if (!allowOnPointerDown) {\n        return;\n      }\n\n      if (this.state.activeTool.type === \"text\") {\n        this.handleTextOnPointerDown(event, pointerDownState);\n        return;\n      } else if (this.state.activeTool.type === \"arrow\" || this.state.activeTool.type === \"line\") {\n        this.handleLinearElementOnPointerDown(event, this.state.activeTool.type, pointerDownState);\n      } else if (this.state.activeTool.type === \"image\") {\n        // reset image preview on pointerdown\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.CROSSHAIR); // retrieve the latest element as the state may be stale\n\n        const pendingImageElement = this.state.pendingImageElementId && this.scene.getElement(this.state.pendingImageElementId);\n\n        if (!pendingImageElement) {\n          return;\n        }\n\n        this.setState({\n          draggingElement: pendingImageElement,\n          editingElement: pendingImageElement,\n          pendingImageElementId: null,\n          multiElement: null\n        });\n        const {\n          x,\n          y\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n        const frame = this.getTopLayerFrameAtSceneCoords({\n          x,\n          y\n        });\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(pendingImageElement, {\n          x,\n          y,\n          frameId: frame ? frame.id : null\n        });\n      } else if (this.state.activeTool.type === \"freedraw\") {\n        this.handleFreeDrawElementOnPointerDown(event, this.state.activeTool.type, pointerDownState);\n      } else if (this.state.activeTool.type === \"custom\") {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursorForShape)(this.interactiveCanvas, this.state);\n      } else if (this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.frame || this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe) {\n        this.createFrameElementOnPointerDown(pointerDownState, this.state.activeTool.type);\n      } else if (this.state.activeTool.type === \"laser\") {\n        this.laserPathManager.startPath(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y);\n      } else if (this.state.activeTool.type !== \"eraser\" && this.state.activeTool.type !== \"hand\" && this.state.activeTool.type !== \"mermaid\") {\n        this.createGenericElementOnPointerDown(this.state.activeTool.type, pointerDownState);\n      }\n\n      (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onPointerDown) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.activeTool, pointerDownState);\n      this.onPointerDownEmitter.trigger(this.state.activeTool, pointerDownState, event);\n      const onPointerMove = this.onPointerMoveFromPointerDownHandler(pointerDownState);\n      const onPointerUp = this.onPointerUpFromPointerDownHandler(pointerDownState);\n      const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);\n      const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);\n      this.missingPointerEventCleanupEmitter.once(_event => onPointerUp(_event || event.nativeEvent));\n\n      if (!this.state.viewModeEnabled || this.state.activeTool.type === \"laser\") {\n        window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n        window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n        window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, onKeyDown);\n        window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, onKeyUp);\n        pointerDownState.eventListeners.onMove = onPointerMove;\n        pointerDownState.eventListeners.onUp = onPointerUp;\n        pointerDownState.eventListeners.onKeyUp = onKeyUp;\n        pointerDownState.eventListeners.onKeyDown = onKeyDown;\n      }\n    };\n\n    this.handleCanvasPointerUp = event => {\n      var _a, _b;\n\n      this.removePointer(event);\n      this.lastPointerUpEvent = event;\n      const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n        clientX: event.clientX,\n        clientY: event.clientY\n      }, this.state);\n      const clicklength = event.timeStamp - ((_b = (_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a.timeStamp) !== null && _b !== void 0 ? _b : 0);\n\n      if (this.device.editor.isMobile && clicklength < 300) {\n        const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, event, scenePointer.x, scenePointer.y)) {\n          this.handleEmbeddableCenterClick(hitElement);\n          return;\n        }\n      }\n\n      if (this.device.isTouchScreen) {\n        const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n        this.hitLinkElement = this.getElementLinkAtPosition(scenePointer, hitElement);\n      }\n\n      if (this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id]) {\n        if (clicklength < 300 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(this.hitLinkElement) && !(0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLinkIcon)(this.hitLinkElement, this.state, [scenePointer.x, scenePointer.y])) {\n          this.handleEmbeddableCenterClick(this.hitLinkElement);\n        } else {\n          this.redirectToLink(event, this.device.isTouchScreen);\n        }\n      } else if (this.state.viewModeEnabled) {\n        this.setState({\n          activeEmbeddable: null,\n          selectedElementIds: {}\n        });\n      }\n    };\n\n    this.maybeOpenContextMenuAfterPointerDownOnTouchDevices = event => {\n      // deal with opening context menu on touch devices\n      if (event.pointerType === \"touch\") {\n        invalidateContextMenu = false;\n\n        if (touchTimeout) {\n          // If there's already a touchTimeout, this means that there's another\n          // touch down and we are doing another touch, so we shouldn't open the\n          // context menu.\n          invalidateContextMenu = true;\n        } else {\n          // open the context menu with the first touch's clientX and clientY\n          // if the touch is not moving\n          touchTimeout = window.setTimeout(() => {\n            touchTimeout = 0;\n\n            if (!invalidateContextMenu) {\n              this.handleCanvasContextMenu(event);\n            }\n          }, _constants__WEBPACK_IMPORTED_MODULE_12__.TOUCH_CTX_MENU_TIMEOUT);\n        }\n      }\n    };\n\n    this.resetContextMenuTimer = () => {\n      clearTimeout(touchTimeout);\n      touchTimeout = 0;\n      invalidateContextMenu = false;\n    };\n    /**\r\n     * pointerup may not fire in certian cases (user tabs away...), so in order\r\n     * to properly cleanup pointerdown state, we need to fire any hanging\r\n     * pointerup handlers manually\r\n     */\n\n\n    this.maybeCleanupAfterMissingPointerUp = event => {\n      lastPointerUp === null || lastPointerUp === void 0 ? void 0 : lastPointerUp();\n      this.missingPointerEventCleanupEmitter.trigger(event).clear();\n    }; // Returns whether the event is a panning\n\n\n    this.handleCanvasPanUsingWheelOrSpaceDrag = event => {\n      if (!(gesture.pointers.size <= 1 && (event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.WHEEL || event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.MAIN && isHoldingSpace || (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isHandToolActive)(this.state) || this.state.viewModeEnabled && !(0,_appState__WEBPACK_IMPORTED_MODULE_10__.isLaserPointerActive)(this.state))) || (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement)) {\n        return false;\n      }\n\n      isPanning = true;\n      event.preventDefault();\n      let nextPastePrevented = false;\n      const isLinux = /Linux/.test(window.navigator.platform);\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRABBING);\n      let {\n        clientX: lastX,\n        clientY: lastY\n      } = event;\n      const onPointerMove = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdatesThrottled)(event => {\n        const deltaX = lastX - event.clientX;\n        const deltaY = lastY - event.clientY;\n        lastX = event.clientX;\n        lastY = event.clientY;\n        /*\r\n         * Prevent paste event if we move while middle clicking on Linux.\r\n         * See issue #1383.\r\n         */\n\n        if (isLinux && !nextPastePrevented && (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1)) {\n          nextPastePrevented = true;\n          /* Prevent the next paste event */\n\n          const preventNextPaste = event => {\n            document.body.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n            event.stopPropagation();\n          };\n          /*\r\n           * Reenable next paste in case of disabled middle click paste for\r\n           * any reason:\r\n           * - right click paste\r\n           * - empty clipboard\r\n           */\n\n\n          const enableNextPaste = () => {\n            setTimeout(() => {\n              document.body.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n              window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, enableNextPaste);\n            }, 100);\n          };\n\n          document.body.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n          window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, enableNextPaste);\n        }\n\n        this.translateCanvas({\n          scrollX: this.state.scrollX - deltaX / this.state.zoom.value,\n          scrollY: this.state.scrollY - deltaY / this.state.zoom.value\n        });\n      });\n      const teardown = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(lastPointerUp = () => {\n        lastPointerUp = null;\n        isPanning = false;\n\n        if (!isHoldingSpace) {\n          if (this.state.viewModeEnabled) {\n            (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n          } else {\n            (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursorForShape)(this.interactiveCanvas, this.state);\n          }\n        }\n\n        this.setState({\n          cursorButton: \"up\"\n        });\n        this.savePointer(event.clientX, event.clientY, \"up\");\n        window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n        window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, teardown);\n        window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, teardown);\n        onPointerMove.flush();\n      });\n      window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, teardown);\n      window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove, {\n        passive: true\n      });\n      window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, teardown);\n      return true;\n    };\n\n    this.clearSelectionIfNotUsingSelection = () => {\n      if (this.state.activeTool.type !== \"selection\") {\n        this.setState({\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n          selectedGroupIds: {},\n          editingGroupId: null,\n          activeEmbeddable: null\n        });\n      }\n    };\n    /**\r\n     * @returns whether the pointer event has been completely handled\r\n     */\n\n\n    this.handleSelectionOnPointerDown = (event, pointerDownState) => {\n      var _a;\n\n      if (this.state.activeTool.type === \"selection\") {\n        const elements = this.scene.getNonDeletedElements();\n        const selectedElements = this.scene.getSelectedElements(this.state);\n\n        if (selectedElements.length === 1 && !this.state.editingLinearElement) {\n          const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType);\n\n          if (elementWithTransformHandleType != null) {\n            this.setState({\n              resizingElement: elementWithTransformHandleType.element\n            });\n            pointerDownState.resize.handleType = elementWithTransformHandleType.transformHandleType;\n          }\n        } else if (selectedElements.length > 1) {\n          pointerDownState.resize.handleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getTransformHandleTypeFromCoords)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements), pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType);\n        }\n\n        if (pointerDownState.resize.handleType) {\n          pointerDownState.resize.isResizing = true;\n          pointerDownState.resize.offset = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.tupleToCoors)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getResizeOffsetXY)(pointerDownState.resize.handleType, selectedElements, pointerDownState.origin.x, pointerDownState.origin.y));\n\n          if (selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElements[0]) && selectedElements[0].points.length === 2) {\n            pointerDownState.resize.arrowDirection = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getResizeArrowDirection)(pointerDownState.resize.handleType, selectedElements[0]);\n          }\n        } else {\n          if (this.state.selectedLinearElement) {\n            const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;\n            const ret = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerDown(event, this.state, this.history, pointerDownState.origin, linearElementEditor);\n\n            if (ret.hitElement) {\n              pointerDownState.hit.element = ret.hitElement;\n            }\n\n            if (ret.linearElementEditor) {\n              this.setState({\n                selectedLinearElement: ret.linearElementEditor\n              });\n\n              if (this.state.editingLinearElement) {\n                this.setState({\n                  editingLinearElement: ret.linearElementEditor\n                });\n              }\n            }\n\n            if (ret.didAddPoint) {\n              return true;\n            }\n          } // hitElement may already be set above, so check first\n\n\n          pointerDownState.hit.element = (_a = pointerDownState.hit.element) !== null && _a !== void 0 ? _a : this.getElementAtPosition(pointerDownState.origin.x, pointerDownState.origin.y);\n\n          if (pointerDownState.hit.element) {\n            // Early return if pointer is hitting link icon\n            const hitLinkElement = this.getElementLinkAtPosition({\n              x: pointerDownState.origin.x,\n              y: pointerDownState.origin.y\n            }, pointerDownState.hit.element);\n\n            if (hitLinkElement) {\n              return false;\n            }\n          } // For overlapped elements one position may hit\n          // multiple elements\n\n\n          pointerDownState.hit.allHitElements = this.getElementsAtPosition(pointerDownState.origin.x, pointerDownState.origin.y);\n          const hitElement = pointerDownState.hit.element;\n          const someHitElementIsSelected = pointerDownState.hit.allHitElements.some(element => this.isASelectedElement(element));\n\n          if ((hitElement === null || !someHitElementIsSelected) && !event.shiftKey && !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) {\n            this.clearSelection(hitElement);\n          }\n\n          if (this.state.editingLinearElement) {\n            this.setState({\n              selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n                [this.state.editingLinearElement.elementId]: true\n              }, this.state)\n            }); // If we click on something\n          } else if (hitElement != null) {\n            // on CMD/CTRL, drill down to hit element regardless of groups etc.\n            if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n              if (!this.state.selectedElementIds[hitElement.id]) {\n                pointerDownState.hit.wasAddedToSelection = true;\n              }\n\n              this.setState(prevState => Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.editGroupForSelectedElement)(prevState, hitElement)), {\n                previousSelectedElementIds: this.state.selectedElementIds\n              })); // mark as not completely handled so as to allow dragging etc.\n\n              return false;\n            } // deselect if item is selected\n            // if shift is not clicked, this will always return true\n            // otherwise, it will trigger selection based on current\n            // state of the box\n\n\n            if (!this.state.selectedElementIds[hitElement.id]) {\n              // if we are currently editing a group, exiting editing mode and deselect the group.\n              if (this.state.editingGroupId && !(0,_groups__WEBPACK_IMPORTED_MODULE_23__.isElementInGroup)(hitElement, this.state.editingGroupId)) {\n                this.setState({\n                  selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n                  selectedGroupIds: {},\n                  editingGroupId: null,\n                  activeEmbeddable: null\n                });\n              } // Add hit element to selection. At this point if we're not holding\n              // SHIFT the previously selected element(s) were deselected above\n              // (make sure you use setState updater to use latest state)\n              // With shift-selection, we want to make sure that frames and their containing\n              // elements are not selected at the same time.\n\n\n              if (!someHitElementIsSelected && !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) {\n                this.setState(prevState => {\n                  const nextSelectedElementIds = Object.assign(Object.assign({}, prevState.selectedElementIds), {\n                    [hitElement.id]: true\n                  });\n                  const previouslySelectedElements = [];\n                  Object.keys(prevState.selectedElementIds).forEach(id => {\n                    const element = this.scene.getElement(id);\n                    element && previouslySelectedElements.push(element);\n                  }); // if hitElement is frame-like, deselect all of its elements\n                  // if they are selected\n\n                  if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(hitElement)) {\n                    (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameChildren)(previouslySelectedElements, hitElement.id).forEach(element => {\n                      delete nextSelectedElementIds[element.id];\n                    });\n                  } else if (hitElement.frameId) {\n                    // if hitElement is in a frame and its frame has been selected\n                    // disable selection for the given element\n                    if (nextSelectedElementIds[hitElement.frameId]) {\n                      delete nextSelectedElementIds[hitElement.id];\n                    }\n                  } else {\n                    // hitElement is neither a frame nor an element in a frame\n                    // but since hitElement could be in a group with some frames\n                    // this means selecting hitElement will have the frames selected as well\n                    // because we want to keep the invariant:\n                    // - frames and their elements are not selected at the same time\n                    // we deselect elements in those frames that were previously selected\n                    const groupIds = hitElement.groupIds;\n                    const framesInGroups = new Set(groupIds.flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element)).map(frame => frame.id));\n\n                    if (framesInGroups.size > 0) {\n                      previouslySelectedElements.forEach(element => {\n                        if (element.frameId && framesInGroups.has(element.frameId)) {\n                          // deselect element and groups containing the element\n                          delete nextSelectedElementIds[element.id];\n                          element.groupIds.flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).forEach(element => {\n                            delete nextSelectedElementIds[element.id];\n                          });\n                        }\n                      });\n                    }\n                  }\n\n                  return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n                    editingGroupId: prevState.editingGroupId,\n                    selectedElementIds: nextSelectedElementIds\n                  }, this.scene.getNonDeletedElements(), prevState, this)), {\n                    showHyperlinkPopup: hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) ? \"info\" : false\n                  });\n                });\n                pointerDownState.hit.wasAddedToSelection = true;\n              }\n            }\n          }\n\n          this.setState({\n            previousSelectedElementIds: this.state.selectedElementIds\n          });\n        }\n      }\n\n      return false;\n    };\n\n    this.handleTextOnPointerDown = (event, pointerDownState) => {\n      // if we're currently still editing text, clicking outside\n      // should only finalize it, not create another (irrespective\n      // of state.activeTool.locked)\n      if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement)) {\n        return;\n      }\n\n      let sceneX = pointerDownState.origin.x;\n      let sceneY = pointerDownState.origin.y;\n      const element = this.getElementAtPosition(sceneX, sceneY, {\n        includeBoundTextElement: true\n      }); // FIXME\n\n      let container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getTextBindableContainerAtPosition)(this.scene.getNonDeletedElements(), this.state, sceneX, sceneY);\n\n      if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.hasBoundTextElement)(element)) {\n        container = element;\n        sceneX = element.x + element.width / 2;\n        sceneY = element.y + element.height / 2;\n      }\n\n      this.startTextEditing({\n        sceneX,\n        sceneY,\n        insertAtParentCenter: !event.altKey,\n        container\n      });\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.resetCursor)(this.interactiveCanvas);\n\n      if (!this.state.activeTool.locked) {\n        this.setState({\n          activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, {\n            type: \"selection\"\n          })\n        });\n      }\n    };\n\n    this.handleFreeDrawElementOnPointerDown = (event, elementType, pointerDownState) => {\n      // Begin a mark capture. This does not have to update state yet.\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, null);\n      const strokeOptions = this.state.currentStrokeOptions; //zsviczian\n\n      const simulatePressure = (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? false : event.pressure === 0.5;\n      const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n        x: gridX,\n        y: gridY\n      });\n      const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newFreeDrawElement)(Object.assign(Object.assign({\n        type: elementType,\n        x: gridX,\n        y: gridY,\n        strokeColor: this.state.currentItemStrokeColor,\n        backgroundColor: this.state.currentItemBackgroundColor,\n        fillStyle: this.state.currentItemFillStyle,\n        strokeWidth: this.state.currentItemStrokeWidth,\n        strokeStyle: this.state.currentItemStrokeStyle,\n        roughness: this.state.currentItemRoughness,\n        opacity: this.state.currentItemOpacity,\n        roundness: null,\n        simulatePressure,\n        locked: false\n      }, strokeOptions //zsviczian\n      ? {\n        customData: {\n          strokeOptions\n        }\n      } : {}), {\n        frameId: topLayerFrame ? topLayerFrame.id : null\n      }));\n      this.setState(prevState => {\n        const nextSelectedElementIds = Object.assign({}, prevState.selectedElementIds);\n        delete nextSelectedElementIds[element.id];\n        return {\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedElementIds, prevState)\n        };\n      });\n      const pressures = element.simulatePressure ? element.pressures : [//zsviczian\n      ...element.pressures, (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? 1 : event.pressure];\n      (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n        points: [[0, 0]],\n        pressures\n      });\n      const boundElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerDownState.origin, this.scene);\n\n      if (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.highlighter) {\n        //zsviczian\n        this.scene.replaceAllElements([element, ...this.scene.getElementsIncludingDeleted()]);\n      } else {\n        this.scene.addNewElement(element);\n      }\n\n      this.setState({\n        draggingElement: element,\n        editingElement: element,\n        startBoundElement: boundElement,\n        suggestedBindings: []\n      });\n    };\n\n    this.insertIframeElement = ({\n      sceneX,\n      sceneY,\n      width,\n      height\n    }) => {\n      var _a;\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n      const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newIframeElement)({\n        type: \"iframe\",\n        x: gridX,\n        y: gridY,\n        strokeColor: \"transparent\",\n        backgroundColor: \"transparent\",\n        fillStyle: this.state.currentItemFillStyle,\n        strokeWidth: this.state.currentItemStrokeWidth,\n        strokeStyle: this.state.currentItemStrokeStyle,\n        roughness: this.state.currentItemRoughness,\n        roundness: this.getCurrentItemRoundness(\"iframe\"),\n        opacity: this.state.currentItemOpacity,\n        locked: false,\n        width,\n        height\n      });\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted(), element]);\n      return element;\n    }; //create rectangle element with youtube top left on nearest grid point width / hight 640/360\n\n\n    this.insertEmbeddableElement = ({\n      sceneX,\n      sceneY,\n      link\n    }) => {\n      var _a;\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n      const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.getEmbedLink)(link);\n\n      if (!embedLink) {\n        return;\n      }\n\n      if (embedLink.warning) {\n        this.setToast({\n          message: embedLink.warning,\n          closable: true\n        });\n      }\n\n      const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newEmbeddableElement)({\n        type: \"embeddable\",\n        x: gridX,\n        y: gridY,\n        strokeColor: \"transparent\",\n        backgroundColor: \"transparent\",\n        fillStyle: this.state.currentItemFillStyle,\n        strokeWidth: this.state.currentItemStrokeWidth,\n        strokeStyle: this.state.currentItemStrokeStyle,\n        roughness: this.state.currentItemRoughness,\n        roundness: this.getCurrentItemRoundness(\"embeddable\"),\n        opacity: this.state.currentItemOpacity,\n        locked: false,\n        width: embedLink.intrinsicSize.w,\n        height: embedLink.intrinsicSize.h,\n        link,\n        validated: null\n      });\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted(), element]);\n      return element;\n    };\n\n    this.createImageElement = ({\n      sceneX,\n      sceneY,\n      addToFrameUnderCursor = true\n    }) => {\n      var _a;\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n      const topLayerFrame = addToFrameUnderCursor ? this.getTopLayerFrameAtSceneCoords({\n        x: gridX,\n        y: gridY\n      }) : null;\n      const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newImageElement)({\n        type: \"image\",\n        x: gridX,\n        y: gridY,\n        strokeColor: this.state.currentItemStrokeColor,\n        backgroundColor: this.state.currentItemBackgroundColor,\n        fillStyle: this.state.currentItemFillStyle,\n        strokeWidth: this.state.currentItemStrokeWidth,\n        strokeStyle: this.state.currentItemStrokeStyle,\n        roughness: this.state.currentItemRoughness,\n        roundness: null,\n        opacity: this.state.currentItemOpacity,\n        locked: false,\n        frameId: topLayerFrame ? topLayerFrame.id : null\n      });\n      return element;\n    };\n\n    this.handleLinearElementOnPointerDown = (event, elementType, pointerDownState) => {\n      if (this.state.multiElement) {\n        const {\n          multiElement\n        } = this.state; // finalize if completing a loop\n\n        if (multiElement.type === \"line\" && (0,_math__WEBPACK_IMPORTED_MODULE_28__.isPathALoop)(multiElement.points, this.state.zoom.value)) {\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n            lastCommittedPoint: multiElement.points[multiElement.points.length - 1]\n          });\n          this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n          return;\n        }\n\n        const {\n          x: rx,\n          y: ry,\n          lastCommittedPoint\n        } = multiElement; // clicking inside commit zone → finalize arrow\n\n        if (multiElement.points.length > 1 && lastCommittedPoint && (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerDownState.origin.x - rx, pointerDownState.origin.y - ry, lastCommittedPoint[0], lastCommittedPoint[1]) < _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n          this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n          return;\n        }\n\n        this.setState(prevState => ({\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n            [multiElement.id]: true\n          }), prevState)\n        })); // clicking outside commit zone → update reference for last committed\n        // point\n\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n          lastCommittedPoint: multiElement.points[multiElement.points.length - 1]\n        });\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n      } else {\n        const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n        const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n          x: gridX,\n          y: gridY\n        });\n        /* If arrow is pre-arrowheads, it will have undefined for both start and end arrowheads.\r\n        If so, we want it to be null for start and \"arrow\" for end. If the linear item is not\r\n        an arrow, we want it to be null for both. Otherwise, we want it to use the\r\n        values from appState. */\n\n        const {\n          currentItemStartArrowhead,\n          currentItemEndArrowhead\n        } = this.state;\n        const [startArrowhead, endArrowhead] = elementType === \"arrow\" ? [currentItemStartArrowhead, currentItemEndArrowhead] : [null, null];\n        const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newLinearElement)({\n          type: elementType,\n          x: gridX,\n          y: gridY,\n          strokeColor: this.state.currentItemStrokeColor,\n          backgroundColor: this.state.currentItemBackgroundColor,\n          fillStyle: this.state.currentItemFillStyle,\n          strokeWidth: this.state.currentItemStrokeWidth,\n          strokeStyle: this.state.currentItemStrokeStyle,\n          roughness: this.state.currentItemRoughness,\n          opacity: this.state.currentItemOpacity,\n          roundness: this.state.currentItemRoundness === \"round\" ? {\n            type: _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.PROPORTIONAL_RADIUS\n          } : null,\n          startArrowhead,\n          endArrowhead,\n          locked: false,\n          frameId: topLayerFrame ? topLayerFrame.id : null\n        });\n        this.setState(prevState => {\n          const nextSelectedElementIds = Object.assign({}, prevState.selectedElementIds);\n          delete nextSelectedElementIds[element.id];\n          return {\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedElementIds, prevState)\n          };\n        });\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n          points: [...element.points, [0, 0]]\n        });\n        const boundElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerDownState.origin, this.scene);\n        this.scene.addNewElement(element);\n        this.setState({\n          draggingElement: element,\n          editingElement: element,\n          startBoundElement: boundElement,\n          suggestedBindings: []\n        });\n      }\n    };\n\n    this.createGenericElementOnPointerDown = (elementType, pointerDownState) => {\n      var _a;\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n      const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n        x: gridX,\n        y: gridY\n      });\n      const baseElementAttributes = {\n        x: gridX,\n        y: gridY,\n        strokeColor: this.state.currentItemStrokeColor,\n        backgroundColor: this.state.currentItemBackgroundColor,\n        fillStyle: this.state.currentItemFillStyle,\n        strokeWidth: this.state.currentItemStrokeWidth,\n        strokeStyle: this.state.currentItemStrokeStyle,\n        roughness: this.state.currentItemRoughness,\n        opacity: this.state.currentItemOpacity,\n        roundness: this.getCurrentItemRoundness(elementType),\n        locked: false,\n        frameId: topLayerFrame ? topLayerFrame.id : null\n      };\n      let element;\n\n      if (elementType === \"embeddable\") {\n        element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newEmbeddableElement)(Object.assign({\n          type: \"embeddable\",\n          validated: null\n        }, baseElementAttributes));\n      } else {\n        element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newElement)(Object.assign({\n          type: elementType\n        }, baseElementAttributes));\n      }\n\n      if (element.type === \"selection\") {\n        this.setState({\n          selectionElement: element,\n          draggingElement: element\n        });\n      } else {\n        this.scene.addNewElement(element);\n        this.setState({\n          multiElement: null,\n          draggingElement: element,\n          editingElement: element\n        });\n      }\n    };\n\n    this.createFrameElementOnPointerDown = (pointerDownState, type) => {\n      var _a;\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n      const constructorOpts = Object.assign(Object.assign({\n        x: gridX,\n        y: gridY,\n        opacity: this.state.currentItemOpacity,\n        locked: false\n      }, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE), this.state.frameColor ? {\n        //zsviczian\n        customData: {\n          frameColor: this.state.frameColor\n        }\n      } : {});\n      const frame = type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe ? (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newMagicFrameElement)(constructorOpts) : (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newFrameElement)(constructorOpts);\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted(), frame]);\n      this.setState({\n        multiElement: null,\n        draggingElement: frame,\n        editingElement: frame\n      });\n    };\n\n    this.restoreReadyToEraseElements = pointerDownState => {\n      const elements = this.scene.getElementsIncludingDeleted().map(ele => {\n        if (pointerDownState.elementIdsToErase[ele.id] && pointerDownState.elementIdsToErase[ele.id].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            opacity: pointerDownState.elementIdsToErase[ele.id].opacity\n          });\n        } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele) && pointerDownState.elementIdsToErase[ele.containerId] && pointerDownState.elementIdsToErase[ele.containerId].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            opacity: pointerDownState.elementIdsToErase[ele.containerId].opacity\n          });\n        } else if (ele.frameId && pointerDownState.elementIdsToErase[ele.frameId] && pointerDownState.elementIdsToErase[ele.frameId].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            opacity: pointerDownState.elementIdsToErase[ele.frameId].opacity\n          });\n        }\n\n        return ele;\n      });\n      this.scene.replaceAllElements(elements);\n    };\n\n    this.eraseElements = pointerDownState => {\n      const elements = this.scene.getElementsIncludingDeleted().map(ele => {\n        if (pointerDownState.elementIdsToErase[ele.id] && pointerDownState.elementIdsToErase[ele.id].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            isDeleted: true\n          });\n        } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele) && pointerDownState.elementIdsToErase[ele.containerId] && pointerDownState.elementIdsToErase[ele.containerId].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            isDeleted: true\n          });\n        } else if (ele.frameId && pointerDownState.elementIdsToErase[ele.frameId] && pointerDownState.elementIdsToErase[ele.frameId].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            isDeleted: true\n          });\n        }\n\n        return ele;\n      });\n      this.history.resumeRecording();\n      this.scene.replaceAllElements(elements);\n    };\n\n    this.initializeImage = async ({\n      imageFile,\n      imageElement: _imageElement,\n      showCursorImagePreview = false\n    }) => {\n      var _a, _b, _c, _d; // at this point this should be guaranteed image file, but we do this check\n      // to satisfy TS down the line\n\n\n      if (!(0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.isSupportedImageFile)(imageFile)) {\n        throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\"));\n      }\n\n      const mimeType = imageFile.type;\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, \"wait\");\n\n      if (mimeType === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg) {\n        try {\n          imageFile = (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.SVGStringToFile)(await (0,_element_image__WEBPACK_IMPORTED_MODULE_40__.normalizeSVG)(await imageFile.text()), imageFile.name);\n        } catch (error) {\n          console.warn(error);\n          throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.svgImageInsertError\"));\n        }\n      } // generate image id (by default the file digest) before any\n      // resizing/compression takes place to keep it more portable\n\n\n      const fileId = await (((_b = (_a = this.props).generateIdForFile) === null || _b === void 0 ? void 0 : _b.call(_a, imageFile)) || (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.generateIdFromFile)(imageFile));\n\n      if (!fileId) {\n        console.warn(\"Couldn't generate file id or the supplied `generateIdForFile` didn't resolve to one.\");\n        throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\"));\n      }\n\n      const existingFileData = this.files[fileId];\n\n      if (!(existingFileData === null || existingFileData === void 0 ? void 0 : existingFileData.dataURL)) {\n        try {\n          imageFile = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.resizeImageFile)(imageFile, {\n            maxWidthOrHeight: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT\n          });\n        } catch (error) {\n          console.error(\"Error trying to resizing image file on insertion\", error);\n        }\n\n        if (imageFile.size > _constants__WEBPACK_IMPORTED_MODULE_12__.MAX_ALLOWED_FILE_BYTES) {\n          throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.fileTooBig\", {\n            maxSize: `${Math.trunc(_constants__WEBPACK_IMPORTED_MODULE_12__.MAX_ALLOWED_FILE_BYTES / 1024 / 1024)}MB`\n          }));\n        }\n      }\n\n      if (showCursorImagePreview) {\n        const dataURL = (_c = this.files[fileId]) === null || _c === void 0 ? void 0 : _c.dataURL; // optimization so that we don't unnecessarily resize the original\n        // full-size file for cursor preview\n        // (it's much faster to convert the resized dataURL to File)\n\n        const resizedFile = dataURL && (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.dataURLToFile)(dataURL);\n        this.setImagePreviewCursor(resizedFile || imageFile);\n      }\n\n      const dataURL = ((_d = this.files[fileId]) === null || _d === void 0 ? void 0 : _d.dataURL) || (await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.getDataURL)(imageFile));\n      const imageElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(_imageElement, {\n        fileId\n      }, false);\n      return new Promise(async (resolve, reject) => {\n        var _a;\n\n        try {\n          this.files = Object.assign(Object.assign({}, this.files), {\n            [fileId]: {\n              mimeType,\n              id: fileId,\n              dataURL,\n              created: Date.now(),\n              lastRetrieved: Date.now()\n            }\n          });\n          const cachedImageData = this.imageCache.get(fileId);\n\n          if (!cachedImageData) {\n            this.addNewImagesToImageCache();\n            await this.updateImageCache([imageElement]);\n          }\n\n          if ((cachedImageData === null || cachedImageData === void 0 ? void 0 : cachedImageData.image) instanceof Promise) {\n            await cachedImageData.image;\n          }\n\n          if (this.state.pendingImageElementId !== imageElement.id && ((_a = this.state.draggingElement) === null || _a === void 0 ? void 0 : _a.id) !== imageElement.id) {\n            this.initializeImageDimensions(imageElement, true);\n          }\n\n          resolve(imageElement);\n        } catch (error) {\n          console.error(error);\n          reject(new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\")));\n        } finally {\n          if (!showCursorImagePreview) {\n            (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.resetCursor)(this.interactiveCanvas);\n          }\n        }\n      });\n    };\n    /**\r\n     * inserts image into elements array and rerenders\r\n     */\n\n\n    this.insertImageElement = async (imageElement, imageFile, showCursorImagePreview) => {\n      // we should be handling all cases upstream, but in case we forget to handle\n      // a future case, let's throw here\n      if (!this.isToolSupported(\"image\")) {\n        this.setState({\n          errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n        });\n        return;\n      }\n\n      this.scene.addNewElement(imageElement);\n\n      try {\n        return await this.initializeImage({\n          imageFile,\n          imageElement,\n          showCursorImagePreview\n        });\n      } catch (error) {\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(imageElement, {\n          isDeleted: true\n        });\n        this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n        this.setState({\n          errorMessage: error.message || (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\")\n        });\n        return null;\n      }\n    };\n\n    this.setImagePreviewCursor = async imageFile => {\n      // mustn't be larger than 128 px\n      // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property\n      const cursorImageSizePx = 96;\n      const imagePreview = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.resizeImageFile)(imageFile, {\n        maxWidthOrHeight: cursorImageSizePx\n      });\n      let previewDataURL = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.getDataURL)(imagePreview); // SVG cannot be resized via `resizeImageFile` so we resize by rendering to\n      // a small canvas\n\n      if (imageFile.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg) {\n        const img = await (0,_element_image__WEBPACK_IMPORTED_MODULE_40__.loadHTMLImageElement)(previewDataURL);\n        let height = Math.min(img.height, cursorImageSizePx);\n        let width = height * (img.width / img.height);\n\n        if (width > cursorImageSizePx) {\n          width = cursorImageSizePx;\n          height = width * (img.height / img.width);\n        }\n\n        const canvas = document.createElement(\"canvas\");\n        canvas.height = height;\n        canvas.width = width;\n        const context = canvas.getContext(\"2d\");\n        context.drawImage(img, 0, 0, width, height);\n        previewDataURL = canvas.toDataURL(_constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg);\n      }\n\n      if (this.state.pendingImageElementId) {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, `url(${previewDataURL}) 4 4, auto`);\n      }\n    };\n\n    this.onImageAction = async ({\n      insertOnCanvasDirectly\n    }) => {\n      try {\n        const clientX = this.state.width / 2 + this.state.offsetLeft;\n        const clientY = this.state.height / 2 + this.state.offsetTop;\n        const {\n          x,\n          y\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n          clientX,\n          clientY\n        }, this.state);\n        const imageFile = await (0,_data_filesystem__WEBPACK_IMPORTED_MODULE_42__.fileOpen)({\n          description: \"Image\",\n          extensions: Object.keys(_constants__WEBPACK_IMPORTED_MODULE_12__.IMAGE_MIME_TYPES)\n        });\n        const imageElement = this.createImageElement({\n          sceneX: x,\n          sceneY: y,\n          addToFrameUnderCursor: false\n        });\n\n        if (insertOnCanvasDirectly) {\n          this.insertImageElement(imageElement, imageFile);\n          this.initializeImageDimensions(imageElement);\n          this.setState({\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n              [imageElement.id]: true\n            }, this.state)\n          }, () => {\n            this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n          });\n        } else {\n          this.setState({\n            pendingImageElementId: imageElement.id\n          }, () => {\n            this.insertImageElement(imageElement, imageFile,\n            /* showCursorImagePreview */\n            true);\n          });\n        }\n      } catch (error) {\n        if (error.name !== \"AbortError\") {\n          console.error(error);\n        } else {\n          console.warn(error);\n        }\n\n        this.setState({\n          pendingImageElementId: null,\n          editingElement: null,\n          activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, {\n            type: \"selection\"\n          })\n        }, () => {\n          this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n        });\n      }\n    };\n\n    this.initializeImageDimensions = (imageElement, forceNaturalSize = false) => {\n      var _a;\n\n      const image = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(imageElement) && ((_a = this.imageCache.get(imageElement.fileId)) === null || _a === void 0 ? void 0 : _a.image);\n\n      if (!image || image instanceof Promise) {\n        if (imageElement.width < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value && imageElement.height < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value) {\n          const placeholderSize = 100 / this.state.zoom.value;\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(imageElement, {\n            x: imageElement.x - placeholderSize / 2,\n            y: imageElement.y - placeholderSize / 2,\n            width: placeholderSize,\n            height: placeholderSize\n          });\n        }\n\n        return;\n      }\n\n      if (forceNaturalSize || // if user-created bounding box is below threshold, assume the\n      // intention was to click instead of drag, and use the image's\n      // intrinsic size\n      imageElement.width < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value && imageElement.height < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value) {\n        const minHeight = Math.max(this.state.height - 120, 160); // max 65% of canvas height, clamped to <300px, vh - 120px>\n\n        const maxHeight = Math.min(minHeight, Math.floor(this.state.height * 0.5) / this.state.zoom.value);\n        const height = Math.min(image.naturalHeight, maxHeight);\n        const width = height * (image.naturalWidth / image.naturalHeight); // add current imageElement width/height to account for previous centering\n        // of the placeholder image\n\n        const x = imageElement.x + imageElement.width / 2 - width / 2;\n        const y = imageElement.y + imageElement.height / 2 - height / 2;\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(imageElement, {\n          x,\n          y,\n          width,\n          height\n        });\n      }\n    };\n    /** updates image cache, refreshing updated elements and/or setting status\r\n        to error for images that fail during <img> element creation */\n\n\n    this.updateImageCache = async (elements, files = this.files) => {\n      const {\n        updatedFiles,\n        erroredFiles\n      } = await (0,_element_image__WEBPACK_IMPORTED_MODULE_40__.updateImageCache)({\n        imageCache: this.imageCache,\n        fileIds: elements.map(element => element.fileId),\n        files\n      });\n\n      if (updatedFiles.size || erroredFiles.size) {\n        for (const element of elements) {\n          if (updatedFiles.has(element.fileId)) {\n            _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element);\n          }\n        }\n      }\n\n      if (erroredFiles.size) {\n        this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().map(element => {\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(element) && erroredFiles.has(element.fileId)) {\n            return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(element, {\n              status: \"error\"\n            });\n          }\n\n          return element;\n        }));\n      }\n\n      return {\n        updatedFiles,\n        erroredFiles\n      };\n    };\n    /** adds new images to imageCache and re-renders if needed */\n\n\n    this.addNewImagesToImageCache = async (imageElements = (0,_element_image__WEBPACK_IMPORTED_MODULE_40__.getInitializedImageElements)(this.scene.getNonDeletedElements()), files = this.files) => {\n      const uncachedImageElements = imageElements.filter(element => !element.isDeleted && !this.imageCache.has(element.fileId));\n\n      if (uncachedImageElements.length) {\n        const {\n          updatedFiles\n        } = await this.updateImageCache(uncachedImageElements, files);\n\n        if (updatedFiles.size) {\n          this.scene.informMutation();\n        }\n      }\n    };\n    /** generally you should use `addNewImagesToImageCache()` directly if you need\r\n     *  to render new images. This is just a failsafe  */\n\n\n    this.scheduleImageRefresh = lodash_throttle__WEBPACK_IMPORTED_MODULE_41___default()(() => {\n      this.addNewImagesToImageCache();\n    }, _constants__WEBPACK_IMPORTED_MODULE_12__.IMAGE_RENDER_TIMEOUT);\n\n    this.updateBindingEnabledOnPointerMove = event => {\n      const shouldEnableBinding = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.shouldEnableBindingForPointerEvent)(event);\n\n      if (this.state.isBindingEnabled !== shouldEnableBinding) {\n        this.setState({\n          isBindingEnabled: shouldEnableBinding\n        });\n      }\n    };\n\n    this.maybeSuggestBindingAtCursor = pointerCoords => {\n      const hoveredBindableElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerCoords, this.scene);\n      this.setState({\n        suggestedBindings: hoveredBindableElement != null ? [hoveredBindableElement] : []\n      });\n    };\n\n    this.maybeSuggestBindingsForLinearElementAtCoords = (linearElement,\n    /** scene coords */\n    pointerCoords, // During line creation the start binding hasn't been written yet\n    // into `linearElement`\n    oppositeBindingBoundElement) => {\n      if (!pointerCoords.length) {\n        return;\n      }\n\n      const suggestedBindings = pointerCoords.reduce((acc, coords) => {\n        const hoveredBindableElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(coords, this.scene);\n\n        if (hoveredBindableElement != null && !(0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isLinearElementSimpleAndAlreadyBound)(linearElement, oppositeBindingBoundElement === null || oppositeBindingBoundElement === void 0 ? void 0 : oppositeBindingBoundElement.id, hoveredBindableElement)) {\n          acc.push(hoveredBindableElement);\n        }\n\n        return acc;\n      }, []);\n      this.setState({\n        suggestedBindings\n      });\n    };\n\n    this.handleInteractiveCanvasRef = canvas => {\n      var _a, _b, _c; // canvas is null when unmounting\n\n\n      if (canvas !== null) {\n        this.interactiveCanvas = canvas; // -----------------------------------------------------------------------\n        // NOTE wheel, touchstart, touchend events must be registered outside\n        // of react because react binds them them passively (so we can't prevent\n        // default on them)\n\n        this.interactiveCanvas.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.handleWheel);\n        this.interactiveCanvas.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_START, this.onTouchStart);\n        this.interactiveCanvas.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_END, this.onTouchEnd); // -----------------------------------------------------------------------\n      } else {\n        (_a = this.interactiveCanvas) === null || _a === void 0 ? void 0 : _a.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.handleWheel);\n        (_b = this.interactiveCanvas) === null || _b === void 0 ? void 0 : _b.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_START, this.onTouchStart);\n        (_c = this.interactiveCanvas) === null || _c === void 0 ? void 0 : _c.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_END, this.onTouchEnd);\n      }\n    };\n\n    this.handleAppOnDrop = async event => {\n      var _a, _b, _c, _d;\n\n      if (this.props.onDrop) {\n        try {\n          if ((await this.props.onDrop(event)) === false) {\n            return;\n          }\n        } catch (e) {\n          console.error(e);\n        }\n      } // must be retrieved first, in the same frame\n\n\n      const {\n        file,\n        fileHandle\n      } = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.getFileFromEvent)(event);\n      const {\n        x: sceneX,\n        y: sceneY\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n\n      try {\n        // if image tool not supported, don't show an error here and let it fall\n        // through so we still support importing scene data from images. If no\n        // scene data encoded, we'll show an error then\n        if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.isSupportedImageFile)(file) && this.isToolSupported(\"image\")) {\n          // first attempt to decode scene from the image if it's embedded\n          // ---------------------------------------------------------------------\n          if ((file === null || file === void 0 ? void 0 : file.type) === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.png || (file === null || file === void 0 ? void 0 : file.type) === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg) {\n            try {\n              const scene = await (0,_data__WEBPACK_IMPORTED_MODULE_13__.loadFromBlob)(file, this.state, this.scene.getElementsIncludingDeleted(), fileHandle);\n              this.syncActionResult(Object.assign(Object.assign({}, scene), {\n                appState: Object.assign(Object.assign({}, scene.appState || this.state), {\n                  isLoading: false\n                }),\n                replaceFiles: true,\n                commitToHistory: true\n              }));\n              return;\n            } catch (error) {\n              if (error.name !== \"EncodingError\") {\n                throw error;\n              }\n            }\n          } // if no scene is embedded or we fail for whatever reason, fall back\n          // to importing as regular image\n          // ---------------------------------------------------------------------\n\n\n          const imageElement = this.createImageElement({\n            sceneX,\n            sceneY\n          });\n          this.insertImageElement(imageElement, file);\n          this.initializeImageDimensions(imageElement);\n          this.setState({\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n              [imageElement.id]: true\n            }, this.state)\n          });\n          return;\n        }\n      } catch (error) {\n        return this.setState({\n          isLoading: false,\n          errorMessage: error.message\n        });\n      }\n\n      const libraryJSON = event.dataTransfer.getData(_constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidrawlib);\n\n      if (libraryJSON && typeof libraryJSON === \"string\") {\n        try {\n          const libraryItems = (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.parseLibraryJSON)(libraryJSON);\n          this.addElementsFromPasteOrLibrary({\n            elements: (0,_data_library__WEBPACK_IMPORTED_MODULE_14__.distributeLibraryItemsOnSquareGrid)(libraryItems),\n            position: event,\n            files: null\n          });\n        } catch (error) {\n          this.setState({\n            errorMessage: error.message\n          });\n        }\n\n        return;\n      }\n\n      if (file) {\n        // Attempt to parse an excalidraw/excalidrawlib file\n        await this.loadFileToCanvas(file, fileHandle);\n      }\n\n      if ((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes(\"text/plain\")) {\n        const text = (_c = event.dataTransfer) === null || _c === void 0 ? void 0 : _c.getData(\"text\");\n\n        if (text && (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.embeddableURLValidator)(text, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(text) || ((_d = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.getEmbedLink)(text)) === null || _d === void 0 ? void 0 : _d.type) === \"video\")) {\n          const embeddable = this.insertEmbeddableElement({\n            sceneX,\n            sceneY,\n            link: (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.normalizeLink)(text)\n          });\n\n          if (embeddable) {\n            this.setState({\n              selectedElementIds: {\n                [embeddable.id]: true\n              }\n            });\n          }\n        }\n      }\n    };\n\n    this.loadFileToCanvas = async (file, fileHandle) => {\n      file = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.normalizeFile)(file);\n\n      try {\n        const ret = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.loadSceneOrLibraryFromBlob)(file, this.state, this.scene.getElementsIncludingDeleted(), fileHandle);\n\n        if (ret.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidraw) {\n          this.setState({\n            isLoading: true\n          });\n          this.syncActionResult(Object.assign(Object.assign({}, ret.data), {\n            appState: Object.assign(Object.assign({}, ret.data.appState || this.state), {\n              isLoading: false\n            }),\n            replaceFiles: true,\n            commitToHistory: true\n          }));\n        } else if (ret.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidrawlib) {\n          await this.library.updateLibrary({\n            libraryItems: file,\n            merge: true,\n            openLibraryMenu: true\n          }).catch(error => {\n            console.error(error);\n            this.setState({\n              errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.importLibraryError\")\n            });\n          });\n        }\n      } catch (error) {\n        if (error instanceof _errors__WEBPACK_IMPORTED_MODULE_58__.ImageSceneDataError && error.code === \"IMAGE_NOT_CONTAINS_SCENE_DATA\" && !this.isToolSupported(\"image\")) {\n          this.setState({\n            isLoading: false,\n            errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n          });\n          return;\n        }\n\n        this.setState({\n          isLoading: false,\n          errorMessage: error.message\n        });\n      }\n    };\n\n    this.handleCanvasContextMenu = event => {\n      event.preventDefault();\n\n      if ((\"pointerType\" in event.nativeEvent && event.nativeEvent.pointerType === \"touch\" || \"pointerType\" in event.nativeEvent && event.nativeEvent.pointerType === \"pen\" && // always allow if user uses a pen secondary button\n      event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.SECONDARY) && this.state.activeTool.type !== \"selection\") {\n        return;\n      }\n\n      const {\n        x,\n        y\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n      const element = this.getElementAtPosition(x, y, {\n        preferSelected: true,\n        includeLockedElements: true\n      });\n      const selectedElements = this.scene.getSelectedElements(this.state);\n      const isHittingCommonBoundBox = this.isHittingCommonBoundingBoxOfSelectedElements({\n        x,\n        y\n      }, selectedElements);\n      const type = element || isHittingCommonBoundBox ? \"element\" : \"canvas\";\n      const container = this.excalidrawContainerRef.current;\n      const {\n        top: offsetTop,\n        left: offsetLeft\n      } = container.getBoundingClientRect();\n      const left = event.clientX - offsetLeft;\n      const top = event.clientY - offsetTop;\n      (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"contextMenu\", \"openContextMenu\", type);\n      this.setState(Object.assign(Object.assign({}, element && !this.state.selectedElementIds[element.id] ? Object.assign(Object.assign(Object.assign({}, this.state), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n        editingGroupId: this.state.editingGroupId,\n        selectedElementIds: {\n          [element.id]: true\n        }\n      }, this.scene.getNonDeletedElements(), this.state, this)), {\n        selectedLinearElement: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(element) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(element, this.scene) : null\n      }) : this.state), {\n        showHyperlinkPopup: false\n      }), () => {\n        this.setState({\n          contextMenu: {\n            top,\n            left,\n            items: this.getContextMenuItems(type)\n          }\n        });\n      });\n    };\n\n    this.maybeDragNewGenericElement = (pointerDownState, event) => {\n      var _a, _b, _c, _d, _e;\n\n      const draggingElement = this.state.draggingElement;\n      const pointerCoords = pointerDownState.lastCoords;\n\n      if (!draggingElement) {\n        return;\n      }\n\n      if (draggingElement.type === \"selection\" && this.state.activeTool.type !== \"eraser\") {\n        (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragNewElement)(draggingElement, this.state.activeTool.type, pointerDownState.origin.x, pointerDownState.origin.y, pointerCoords.x, pointerCoords.y, (0,_utils__WEBPACK_IMPORTED_MODULE_33__.distance)(pointerDownState.origin.x, pointerCoords.x), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.distance)(pointerDownState.origin.y, pointerCoords.y), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event));\n      } else {\n        let [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n        const image = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(draggingElement) && ((_a = this.imageCache.get(draggingElement.fileId)) === null || _a === void 0 ? void 0 : _a.image);\n        const aspectRatio = image && !(image instanceof Promise) ? image.width / image.height : null;\n        this.maybeCacheReferenceSnapPoints(event, [draggingElement]);\n        const {\n          snapOffset,\n          snapLines\n        } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.snapNewElement)(draggingElement, this.state, event, {\n          x: pointerDownState.originInGrid.x + ((_c = (_b = this.state.originSnapOffset) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0),\n          y: pointerDownState.originInGrid.y + ((_e = (_d = this.state.originSnapOffset) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : 0)\n        }, {\n          x: gridX - pointerDownState.originInGrid.x,\n          y: gridY - pointerDownState.originInGrid.y\n        });\n        gridX += snapOffset.x;\n        gridY += snapOffset.y;\n        this.setState({\n          snapLines\n        });\n        (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragNewElement)(draggingElement, this.state.activeTool.type, pointerDownState.originInGrid.x, pointerDownState.originInGrid.y, gridX, gridY, (0,_utils__WEBPACK_IMPORTED_MODULE_33__.distance)(pointerDownState.originInGrid.x, gridX), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.distance)(pointerDownState.originInGrid.y, gridY), (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(draggingElement) ? !(0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event) : (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event), aspectRatio, this.state.originSnapOffset);\n        this.maybeSuggestBindingForAll([draggingElement]); // highlight elements that are to be added to frames on frames creation\n\n        if (this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.frame || this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe) {\n          this.setState({\n            elementsToHighlight: (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), draggingElement, this.state)\n          });\n        }\n      }\n    };\n\n    this.maybeHandleResize = (pointerDownState, event) => {\n      const selectedElements = this.scene.getSelectedElements(this.state);\n      const selectedFrames = selectedElements.filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element));\n      const transformHandleType = pointerDownState.resize.handleType;\n\n      if (selectedFrames.length > 0 && transformHandleType === \"rotation\") {\n        return false;\n      }\n\n      this.setState({\n        // TODO: rename this state field to \"isScaling\" to distinguish\n        // it from the generic \"isResizing\" which includes scaling and\n        // rotating\n        isResizing: transformHandleType && transformHandleType !== \"rotation\",\n        isRotating: transformHandleType === \"rotation\",\n        activeEmbeddable: null\n      });\n      const pointerCoords = pointerDownState.lastCoords;\n      let [resizeX, resizeY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x - pointerDownState.resize.offset.x, pointerCoords.y - pointerDownState.resize.offset.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n      const frameElementsOffsetsMap = new Map();\n      selectedFrames.forEach(frame => {\n        const elementsInFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameChildren)(this.scene.getNonDeletedElements(), frame.id);\n        elementsInFrame.forEach(element => {\n          frameElementsOffsetsMap.set(frame.id + element.id, {\n            x: element.x - frame.x,\n            y: element.y - frame.y\n          });\n        });\n      }); // check needed for avoiding flickering when a key gets pressed\n      // during dragging\n\n      if (!this.state.selectedElementsAreBeingDragged) {\n        const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n        const dragOffset = {\n          x: gridX - pointerDownState.originInGrid.x,\n          y: gridY - pointerDownState.originInGrid.y\n        };\n        const originalElements = [...pointerDownState.originalElements.values()];\n        this.maybeCacheReferenceSnapPoints(event, selectedElements);\n        const {\n          snapOffset,\n          snapLines\n        } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.snapResizingElements)(selectedElements, (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getSelectedElements)(originalElements, this.state), this.state, event, dragOffset, transformHandleType);\n        resizeX += snapOffset.x;\n        resizeY += snapOffset.y;\n        this.setState({\n          snapLines\n        });\n      }\n\n      if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.transformElements)(pointerDownState, transformHandleType, selectedElements, pointerDownState.resize.arrowDirection, (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event), selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(selectedElements[0]) ? !(0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event) : (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event), resizeX, resizeY, pointerDownState.resize.center.x, pointerDownState.resize.center.y, this.state)) {\n        this.maybeSuggestBindingForAll(selectedElements);\n        const elementsToHighlight = new Set();\n        selectedFrames.forEach(frame => {\n          (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), frame, this.state).forEach(element => elementsToHighlight.add(element));\n        });\n        this.setState({\n          elementsToHighlight: [...elementsToHighlight]\n        });\n        return true;\n      }\n\n      return false;\n    };\n\n    this.getContextMenuItems = type => {\n      const options = [];\n      options.push(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsPng, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsSvg); // canvas contextMenu\n      // -------------------------------------------------------------------------\n\n      if (type === \"canvas\") {\n        if (this.state.viewModeEnabled) {\n          return [...options, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleGridMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleZenMode, _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_38__.actionToggleViewMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleStats, _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.actionToggleLaserPointer];\n        }\n\n        return [_actions_actionClipboard__WEBPACK_IMPORTED_MODULE_53__.actionPaste, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsPng, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsSvg, _actions__WEBPACK_IMPORTED_MODULE_5__.copyText, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSelectAll, _actions_actionElementLock__WEBPACK_IMPORTED_MODULE_49__.actionUnlockAllElements, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleGridMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleObjectsSnapMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleZenMode, _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_38__.actionToggleViewMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleStats];\n      } // element contextMenu\n      // -------------------------------------------------------------------------\n\n\n      options.push(_actions__WEBPACK_IMPORTED_MODULE_5__.copyText);\n\n      if (this.state.viewModeEnabled) {\n        return [_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, ...options];\n      }\n\n      return [_actions__WEBPACK_IMPORTED_MODULE_5__.actionCut, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, _actions_actionClipboard__WEBPACK_IMPORTED_MODULE_53__.actionPaste, _actions_actionFrame__WEBPACK_IMPORTED_MODULE_54__.actionSelectAllElementsInFrame, _actions_actionFrame__WEBPACK_IMPORTED_MODULE_54__.actionRemoveAllElementsFromFrame, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, ...options, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyStyles, _actions__WEBPACK_IMPORTED_MODULE_5__.actionPasteStyles, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionGroup, _actions__WEBPACK_IMPORTED_MODULE_5__.actionUnbindText, _actions__WEBPACK_IMPORTED_MODULE_5__.actionBindText, _actions_actionBoundText__WEBPACK_IMPORTED_MODULE_60__.actionWrapTextInContainer, _actions__WEBPACK_IMPORTED_MODULE_5__.actionUngroup, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionAddToLibrary, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSendBackward, _actions__WEBPACK_IMPORTED_MODULE_5__.actionBringForward, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSendToBack, _actions__WEBPACK_IMPORTED_MODULE_5__.actionBringToFront, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipHorizontal, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipVertical, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleLinearEditor, _actions__WEBPACK_IMPORTED_MODULE_5__.actionLink, _actions__WEBPACK_IMPORTED_MODULE_5__.actionDuplicateSelection, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleElementLock, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionDeleteSelected];\n    };\n\n    this.handleWheel = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      event.preventDefault();\n\n      if (isPanning) {\n        return;\n      }\n\n      const {\n        deltaX,\n        deltaY\n      } = event; // note that event.ctrlKey is necessary to handle pinch zooming\n\n      if ( //zsviczian\n      (event.metaKey || event.ctrlKey) && !this.state.allowWheelZoom || !(event.metaKey || event.ctrlKey) && this.state.allowWheelZoom) {\n        const sign = Math.sign(deltaY);\n        const MAX_STEP = _constants__WEBPACK_IMPORTED_MODULE_12__.ZOOM_STEP * 100;\n        const absDelta = Math.abs(deltaY);\n        let delta = deltaY;\n\n        if (absDelta > MAX_STEP) {\n          delta = MAX_STEP * sign;\n        }\n\n        let newZoom = this.state.zoom.value - delta / 100; // increase zoom steps the more zoomed-in we are (applies to >100% only)\n\n        newZoom += Math.log10(Math.max(1, this.state.zoom.value)) * -sign * // reduced amplification for small deltas (small movements on a trackpad)\n        Math.min(1, absDelta / 20);\n        this.translateCanvas(state => Object.assign(Object.assign({}, (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n          viewportX: this.lastViewportPosition.x,\n          viewportY: this.lastViewportPosition.y,\n          nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(newZoom)\n        }, state)), {\n          shouldCacheIgnoreZoom: true\n        }));\n        this.resetShouldCacheIgnoreZoomDebounced();\n        return;\n      } // scroll horizontally when shift pressed\n\n\n      if (event.shiftKey) {\n        this.translateCanvas(({\n          zoom,\n          scrollX\n        }) => ({\n          // on Mac, shift+wheel tends to result in deltaX\n          scrollX: scrollX - (deltaY || deltaX) / zoom.value\n        }));\n        return;\n      }\n\n      this.translateCanvas(({\n        zoom,\n        scrollX,\n        scrollY\n      }) => ({\n        scrollX: scrollX - deltaX / zoom.value,\n        scrollY: scrollY - deltaY / zoom.value\n      }));\n    });\n\n    this.savePointer = (x, y, button) => {\n      var _a, _b;\n\n      if (!x || !y) {\n        return;\n      }\n\n      const {\n        x: sceneX,\n        y: sceneY\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n        clientX: x,\n        clientY: y\n      }, this.state);\n\n      if (isNaN(sceneX) || isNaN(sceneY)) {// sometimes the pointer goes off screen\n      }\n\n      const pointer = {\n        x: sceneX,\n        y: sceneY,\n        tool: this.state.activeTool.type === \"laser\" ? \"laser\" : \"pointer\"\n      };\n      (_b = (_a = this.props).onPointerUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, {\n        pointer,\n        button,\n        pointersMap: gesture.pointers\n      });\n    };\n\n    this.resetShouldCacheIgnoreZoomDebounced = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.debounce)(() => {\n      if (!this.unmounted) {\n        this.setState({\n          shouldCacheIgnoreZoom: false\n        });\n      }\n    }, 300);\n\n    this.updateDOMRect = cb => {\n      var _a;\n\n      if ((_a = this.excalidrawContainerRef) === null || _a === void 0 ? void 0 : _a.current) {\n        const excalidrawContainer = this.excalidrawContainerRef.current;\n        const {\n          width,\n          height,\n          left: offsetLeft,\n          top: offsetTop\n        } = excalidrawContainer.getBoundingClientRect();\n        const {\n          width: currentWidth,\n          height: currentHeight,\n          offsetTop: currentOffsetTop,\n          offsetLeft: currentOffsetLeft\n        } = this.state;\n\n        if (width === currentWidth && height === currentHeight && offsetLeft === currentOffsetLeft && offsetTop === currentOffsetTop) {\n          if (cb) {\n            cb();\n          }\n\n          return;\n        } //zsviczian\n\n\n        if (width === 0 || height === 0) {\n          if (cb) {\n            cb();\n          }\n\n          return;\n        }\n\n        this.setState({\n          width,\n          height,\n          offsetLeft,\n          offsetTop\n        }, () => {\n          cb && cb();\n        });\n      }\n    };\n\n    this.refresh = () => {\n      this.setState(Object.assign({}, this.getCanvasOffsets()));\n    };\n\n    const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)();\n    const {\n      excalidrawAPI,\n      viewModeEnabled = false,\n      zenModeEnabled = false,\n      gridModeEnabled = false,\n      objectsSnapModeEnabled = false,\n      theme = defaultAppState.theme,\n      name = defaultAppState.name,\n      initState,\n      //zsviczian\n      obsidianHostPlugin //zsviczian\n\n    } = props;\n    this.state = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultAppState), {\n      theme,\n      isLoading: true\n    }), this.getCanvasOffsets()), {\n      viewModeEnabled,\n      zenModeEnabled,\n      objectsSnapModeEnabled,\n      gridSize: gridModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.GRID_SIZE : null,\n      name,\n      width: window.innerWidth,\n      height: window.innerHeight\n    }), initState !== null && initState !== void 0 ? initState : {});\n    this.id = (0,nanoid__WEBPACK_IMPORTED_MODULE_81__.nanoid)();\n    hostPlugin = obsidianHostPlugin; //zsviczian\n\n    this.library = new _data_library__WEBPACK_IMPORTED_MODULE_14__[\"default\"](this);\n    this.actionManager = new _actions_manager__WEBPACK_IMPORTED_MODULE_7__.ActionManager(this.syncActionResult, () => this.state, () => this.scene.getElementsIncludingDeleted(), this);\n    this.scene = new _scene_Scene__WEBPACK_IMPORTED_MODULE_30__[\"default\"]();\n    this.canvas = document.createElement(\"canvas\");\n    this.rc = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_3__[\"default\"].canvas(this.canvas);\n    this.renderer = new _scene_Renderer__WEBPACK_IMPORTED_MODULE_66__.Renderer(this.scene);\n\n    if (excalidrawAPI) {\n      const api = {\n        updateScene: this.updateScene,\n        updateLibrary: this.library.updateLibrary,\n        addFiles: this.addFiles,\n        resetScene: this.resetScene,\n        getSceneElementsIncludingDeleted: this.getSceneElementsIncludingDeleted,\n        history: {\n          clear: this.resetHistory\n        },\n        scrollToContent: this.scrollToContent,\n        zoomToFit: this.zoomToFit,\n        startLineEditor: this.startLineEditor,\n        getSceneElements: this.getSceneElements,\n        getAppState: () => this.state,\n        getFiles: () => this.files,\n        registerAction: action => {\n          this.actionManager.registerAction(action);\n        },\n        refresh: this.refresh,\n        setToast: this.setToast,\n        updateContainerSize: this.updateContainerSize,\n        id: this.id,\n        setLocalFont: this.setLocalFont,\n        selectElements: this.selectElements,\n        sendBackward: this.sendBackward,\n        bringForward: this.bringForward,\n        sendToBack: this.sendToBack,\n        bringToFront: this.bringToFront,\n        setMobileModeAllowed: this.setMobileModeAllowed,\n        setActiveTool: this.setActiveTool,\n        setCursor: this.setCursor,\n        resetCursor: this.resetCursor,\n        updateFrameRendering: this.updateFrameRendering,\n        toggleSidebar: this.toggleSidebar,\n        getHTMLIFrameElement: id => this.getHTMLIFrameElement(id),\n        onChange: cb => this.onChangeEmitter.on(cb),\n        onPointerDown: cb => this.onPointerDownEmitter.on(cb),\n        onPointerUp: cb => this.onPointerUpEmitter.on(cb),\n        onScrollChange: cb => this.onScrollChangeEmitter.on(cb),\n        onUserFollow: cb => this.onUserFollowEmitter.on(cb)\n      };\n\n      if (typeof excalidrawAPI === \"function\") {\n        excalidrawAPI(api);\n      } else {\n        console.error(\"excalidrawAPI should be a function!\");\n      }\n    }\n\n    this.excalidrawContainerValue = {\n      container: this.excalidrawContainerRef.current,\n      id: this.id\n    };\n    this.fonts = new _scene_Fonts__WEBPACK_IMPORTED_MODULE_50__.Fonts({\n      scene: this.scene,\n      onSceneUpdated: this.onSceneUpdated\n    });\n    this.history = new _history__WEBPACK_IMPORTED_MODULE_24__[\"default\"]();\n    this.actionManager.registerAll(_actions_register__WEBPACK_IMPORTED_MODULE_8__.actions);\n    this.actionManager.registerAction((0,_actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__.createUndoAction)(this.history));\n    this.actionManager.registerAction((0,_actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__.createRedoAction)(this.history));\n  }\n\n  onWindowMessage(event) {\n    if (event.origin !== \"https://player.vimeo.com\" && event.origin !== \"https://www.youtube.com\") {\n      return;\n    }\n\n    let data = null;\n\n    try {\n      data = JSON.parse(event.data);\n    } catch (e) {}\n\n    if (!data) {\n      return;\n    }\n\n    switch (event.origin) {\n      case \"https://player.vimeo.com\":\n        //Allowing for multiple instances of Excalidraw running in the window\n        if (data.method === \"paused\") {\n          let source = null;\n          const iframes = document.body.querySelectorAll(\"iframe.excalidraw__embeddable\");\n\n          if (!iframes) {\n            break;\n          }\n\n          for (const iframe of iframes) {\n            if (iframe.contentWindow === event.source) {\n              source = iframe.contentWindow;\n            }\n          }\n\n          source === null || source === void 0 ? void 0 : source.postMessage(JSON.stringify({\n            method: data.value ? \"play\" : \"pause\",\n            value: true\n          }), \"*\");\n        }\n\n        break;\n\n      case \"https://www.youtube.com\":\n        if (data.event === \"infoDelivery\" && data.info && data.id && typeof data.info.playerState === \"number\") {\n          const id = data.id;\n          const playerState = data.info.playerState;\n\n          if (Object.values(_constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES).includes(playerState)) {\n            YOUTUBE_VIDEO_STATES.set(id, playerState);\n          }\n        }\n\n        break;\n    }\n  }\n\n  cacheEmbeddableRef(element, ref) {\n    if (ref) {\n      this.iFrameRefs.set(element.id, ref);\n    }\n  }\n\n  getHTMLIFrameElement(element) {\n    if (typeof element === \"string\") {\n      //zsviczian\n      return this.iFrameRefs.get(element);\n    }\n\n    return this.iFrameRefs.get(element.id);\n  }\n\n  handleEmbeddableCenterClick(element) {\n    var _a, _b, _c, _d;\n\n    if (((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) === element && ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"active\") {\n      return;\n    } // The delay serves two purposes\n    // 1. To prevent first click propagating to iframe on mobile,\n    //    else the click will immediately start and stop the video\n    // 2. If the user double clicks the frame center to activate it\n    //    without the delay youtube will immediately open the video\n    //    in fullscreen mode\n\n\n    setTimeout(() => {\n      this.setState({\n        activeEmbeddable: {\n          element,\n          state: \"active\"\n        },\n        selectedElementIds: {\n          [element.id]: true\n        },\n        draggingElement: null,\n        selectionElement: null\n      });\n    }, 100);\n\n    if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(element)) {\n      return;\n    }\n\n    const iframe = this.getHTMLIFrameElement(element);\n\n    if (!(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow)) {\n      return;\n    }\n\n    if (iframe.src.includes(\"youtube\")) {\n      const state = YOUTUBE_VIDEO_STATES.get(element.id);\n\n      if (!state) {\n        YOUTUBE_VIDEO_STATES.set(element.id, _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.UNSTARTED);\n        iframe.contentWindow.postMessage(JSON.stringify({\n          event: \"listening\",\n          id: element.id\n        }), \"*\");\n      }\n\n      switch (state) {\n        case _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.PLAYING:\n        case _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.BUFFERING:\n          (_c = iframe.contentWindow) === null || _c === void 0 ? void 0 : _c.postMessage(JSON.stringify({\n            event: \"command\",\n            func: \"pauseVideo\",\n            args: \"\"\n          }), \"*\");\n          break;\n\n        default:\n          (_d = iframe.contentWindow) === null || _d === void 0 ? void 0 : _d.postMessage(JSON.stringify({\n            event: \"command\",\n            func: \"playVideo\",\n            args: \"\"\n          }), \"*\");\n      }\n    }\n\n    if (iframe.src.includes(\"player.vimeo.com\")) {\n      iframe.contentWindow.postMessage(JSON.stringify({\n        method: \"paused\" //video play/pause in onWindowMessage handler\n\n      }), \"*\");\n    }\n  }\n\n  isIframeLikeElementCenter(el, event, sceneX, sceneY) {\n    var _a, _b;\n\n    return el && !event.altKey && !event.shiftKey && !event.metaKey && !event.ctrlKey && (((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) !== el || ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"hover\" || !this.state.activeEmbeddable) && sceneX >= el.x + el.width / 3 && sceneX <= el.x + 2 * el.width / 3 && sceneY >= el.y + el.height / 3 && sceneY <= el.y + 2 * el.height / 3;\n  }\n\n  renderEmbeddables() {\n    const scale = this.state.zoom.value;\n    const normalizedWidth = this.state.width;\n    const normalizedHeight = this.state.height;\n    const embeddableElements = this.scene.getNonDeletedElements().filter(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(el) && !!el.validated || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el));\n    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n      children: embeddableElements.map(el => {\n        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;\n\n        const {\n          x,\n          y\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.sceneCoordsToViewportCoords)({\n          sceneX: el.x,\n          sceneY: el.y\n        }, this.state);\n        let src;\n        const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.getEmbedLink)((0,_data_url__WEBPACK_IMPORTED_MODULE_47__.toValidURL)(el.link || \"\")); //zsviczian\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el)) {\n          src = null;\n          const data = ((_b = (_a = el.customData) === null || _a === void 0 ? void 0 : _a.generationData) !== null && _b !== void 0 ? _b : this.magicGenerations.get(el.id)) || {\n            status: \"error\",\n            message: \"No generation data\",\n            code: \"ERR_NO_GENERATION_DATA\"\n          };\n\n          if (data.status === \"done\") {\n            const html = data.html;\n            src = {\n              intrinsicSize: {\n                w: el.width,\n                h: el.height\n              },\n              type: \"document\",\n              srcdoc: () => {\n                return html;\n              }\n            };\n          } else if (data.status === \"pending\") {\n            src = {\n              intrinsicSize: {\n                w: el.width,\n                h: el.height\n              },\n              type: \"document\",\n              srcdoc: () => {\n                return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.createSrcDoc)(`\n                    <style>\n                      html, body {\n                        width: 100%;\n                        height: 100%;\n                        color: ${this.state.theme === \"dark\" ? \"white\" : \"black\"};\n                      }\n                      body {\n                        display: flex;\n                        align-items: center;\n                        justify-content: center;\n                        flex-direction: column;\n                        gap: 1rem;\n                      }\n\n                      .Spinner {\n                        display: flex;\n                        align-items: center;\n                        justify-content: center;\n                        margin-left: auto;\n                        margin-right: auto;\n                      }\n\n                      .Spinner svg {\n                        animation: rotate 1.6s linear infinite;\n                        transform-origin: center center;\n                        width: 40px;\n                        height: 40px;\n                      }\n\n                      .Spinner circle {\n                        stroke: currentColor;\n                        animation: dash 1.6s linear 0s infinite;\n                        stroke-linecap: round;\n                      }\n\n                      @keyframes rotate {\n                        100% {\n                          transform: rotate(360deg);\n                        }\n                      }\n\n                      @keyframes dash {\n                        0% {\n                          stroke-dasharray: 1, 300;\n                          stroke-dashoffset: 0;\n                        }\n                        50% {\n                          stroke-dasharray: 150, 300;\n                          stroke-dashoffset: -200;\n                        }\n                        100% {\n                          stroke-dasharray: 1, 300;\n                          stroke-dashoffset: -280;\n                        }\n                      }\n                    </style>\n                    <div class=\"Spinner\">\n                      <svg\n                        viewBox=\"0 0 100 100\"\n                      >\n                        <circle\n                          cx=\"50\"\n                          cy=\"50\"\n                          r=\"46\"\n                          stroke-width=\"8\"\n                          fill=\"none\"\n                          stroke-miter-limit=\"10\"\n                        />\n                      </svg>\n                    </div>\n                    <div>Generating...</div>\n                  `);\n              }\n            };\n          } else {\n            let message;\n\n            if (data.code === \"ERR_GENERATION_INTERRUPTED\") {\n              message = \"Generation was interrupted...\";\n            } else {\n              message = data.message || \"Generation failed\";\n            }\n\n            src = {\n              intrinsicSize: {\n                w: el.width,\n                h: el.height\n              },\n              type: \"document\",\n              srcdoc: () => {\n                return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.createSrcDoc)(`\n                    <style>\n                    html, body {\n                      height: 100%;\n                    }\n                      body {\n                        display: flex;\n                        flex-direction: column;\n                        align-items: center;\n                        justify-content: center;\n                        color: ${_colors__WEBPACK_IMPORTED_MODULE_75__.COLOR_PALETTE.red[3]};\n                      }\n                      h1, h3 {\n                        margin-top: 0;\n                        margin-bottom: 0.5rem;\n                      }\n                    </style>\n                    <h1>Error!</h1>\n                    <h3>${message}</h3>\n                  `);\n              }\n            };\n          }\n        } else {\n          src = embedLink; //zsviczian getEmbedLink(toValidURL(el.link || \"\"));\n        } // console.log({ src });\n\n\n        const isVisible = (0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementInViewport)(el, normalizedWidth, normalizedHeight, this.state);\n        const isActive = ((_c = this.state.activeEmbeddable) === null || _c === void 0 ? void 0 : _c.element) === el && ((_d = this.state.activeEmbeddable) === null || _d === void 0 ? void 0 : _d.state) === \"active\";\n        const isHovered = ((_e = this.state.activeEmbeddable) === null || _e === void 0 ? void 0 : _e.element) === el && ((_f = this.state.activeEmbeddable) === null || _f === void 0 ? void 0 : _f.state) === \"hover\";\n        const isWebview = //zsviczian\n        !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el) && this.props.renderWebview && (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) !== \"document\" && !((_h = (_g = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) === null || _g === void 0 ? void 0 : _g.startsWith) === null || _h === void 0 ? void 0 : _h.call(_g, \"https://player.vimeo.com\")); // Modify the scale based on el.scale property\n\n        const [xScale, yScale] = (_j = el.scale) !== null && _j !== void 0 ? _j : [1, 1]; //zsviczian\n\n        const scaledTransform = `scale(${scale * xScale}, ${scale * yScale})`;\n        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n          className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(\"excalidraw__embeddable-container\", {\n            \"is-hovered\": isHovered\n          }),\n          style: {\n            transform: isVisible ? `translate(${x - this.state.offsetLeft}px, ${y - this.state.offsetTop}px) ${scaledTransform}` : \"none\",\n            display: isVisible ? \"block\" : \"none\",\n            opacity: el.opacity / 100,\n            [\"--embeddable-radius\"]: `${(0,_math__WEBPACK_IMPORTED_MODULE_28__.getCornerRadius)(Math.min(el.width, el.height), el) / xScale //zsviczian\n            }px`\n          }\n        }, {\n          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n            //this is a hack that addresses isse with embedded excalidraw.com embeddable\n            //https://github.com/excalidraw/excalidraw/pull/6691#issuecomment-1607383938\n\n            /*ref={(ref) => {\r\n              if (!this.excalidrawContainerRef.current) {\r\n                return;\r\n              }\r\n              const container = this.excalidrawContainerRef.current;\r\n              const sh = container.scrollHeight;\r\n              const ch = container.clientHeight;\r\n              if (sh !== ch) {\r\n                container.style.height = `${sh}px`;\r\n                setTimeout(() => {\r\n                  container.style.height = `100%`;\r\n                });\r\n              }\r\n            }}*/\n            className: \"excalidraw__embeddable-container__inner\",\n            style: {\n              width: isVisible ? `${el.width / xScale}px` : 0,\n              height: isVisible ? `${el.height / yScale}px` : 0,\n              transform: isVisible ? `rotate(${el.angle}rad)` : \"none\",\n              pointerEvents: isActive ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled\n            }\n          }, {\n            children: [isHovered && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n              className: \"excalidraw__embeddable-hint\"\n            }, {\n              children: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"buttons.embeddableInteractionButton\")\n            })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n              className: \"excalidraw__embeddable__outer\",\n              style: {\n                padding: `${el.strokeWidth / (4 * el.scale[0])}px` //zsviczian MDEmbeddable round border cutoff issue\n\n              }\n            }, {\n              children: (_m = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(el) ? (_l = (_k = this.props).renderEmbeddable) === null || _l === void 0 ? void 0 : _l.call(_k, el, this.state) //zsviczian\n              : null) !== null && _m !== void 0 ? _m : isWebview ? //zsviczian\n              (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"webview\", {\n                ref: ref => this.cacheEmbeddableRef(el, ref),\n                className: \"excalidraw__embeddable\",\n                src: (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"generic\" || (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"video\" ? embedLink.link : \"\",\n                title: \"Excalidraw Embedded Content\",\n                allowFullScreen: true\n              }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"iframe\", {\n                ref: ref => this.cacheEmbeddableRef(el, ref),\n                className: \"excalidraw__embeddable\",\n                srcDoc: (src === null || src === void 0 ? void 0 : src.type) === \"document\" ? src.srcdoc(this.state.theme) : undefined,\n                src: (src === null || src === void 0 ? void 0 : src.type) !== \"document\" ? (_o = src === null || src === void 0 ? void 0 : src.link) !== null && _o !== void 0 ? _o : \"\" : undefined,\n                // https://stackoverflow.com/q/18470015\n                scrolling: \"no\",\n                referrerPolicy: \"no-referrer-when-downgrade\",\n                title: \"Excalidraw Embedded Content\",\n                allow: \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\",\n                allowFullScreen: true,\n                sandbox: \"allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads\"\n              })\n            }))]\n          }))\n        }), el.id);\n      })\n    });\n  }\n\n  render() {\n    var _a, _b, _c, _d, _e, _f, _g, _h;\n\n    const selectedElements = this.scene.getSelectedElements(this.state);\n    const {\n      renderTopRightUI,\n      renderCustomStats\n    } = this.props;\n    const versionNonce = this.scene.getVersionNonce();\n    const {\n      canvasElements,\n      visibleElements\n    } = this.renderer.getRenderableElements({\n      versionNonce,\n      zoom: this.state.zoom,\n      offsetLeft: this.state.offsetLeft,\n      offsetTop: this.state.offsetTop,\n      scrollX: this.state.scrollX,\n      scrollY: this.state.scrollY,\n      height: this.state.height,\n      width: this.state.width,\n      editingElement: this.state.editingElement,\n      pendingImageElementId: this.state.pendingImageElementId\n    });\n    const shouldBlockPointerEvents = !(this.state.editingElement && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(this.state.editingElement)) && (this.state.selectionElement || this.state.draggingElement || this.state.resizingElement || this.state.activeTool.type === \"laser\" && // technically we can just test on this once we make it more safe\n    this.state.cursorButton === \"down\" || this.state.editingElement && !(0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement));\n    const firstSelectedElement = selectedElements[0];\n    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n      className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(\"excalidraw excalidraw-container\", {\n        \"excalidraw--view-mode\": this.state.viewModeEnabled,\n        \"excalidraw--mobile\": this.device.editor.isMobile || !(this.state.viewModeEnabled || this.state.zenModeEnabled) && this.state.trayModeEnabled //zsviczian\n\n      }),\n      style: Object.assign({\n        //zsviczian\n        [\"--ui-pointerEvents\"]: shouldBlockPointerEvents ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled\n      }, this.state.dynamicStyle),\n      ref: this.excalidrawContainerRef,\n      onDrop: this.handleAppOnDrop,\n      tabIndex: 0,\n      onKeyDown: this.props.handleKeyboardGlobally ? undefined : this.onKeyDown\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(AppContext.Provider, Object.assign({\n        value: this\n      }, {\n        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(AppPropsContext.Provider, Object.assign({\n          value: this.props\n        }, {\n          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawContainerContext.Provider, Object.assign({\n            value: this.excalidrawContainerValue\n          }, {\n            children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DeviceContext.Provider, Object.assign({\n              value: this.device\n            }, {\n              children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawSetAppStateContext.Provider, Object.assign({\n                value: this.setAppState\n              }, {\n                children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawAppStateContext.Provider, Object.assign({\n                  value: this.state\n                }, {\n                  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ExcalidrawElementsContext.Provider, Object.assign({\n                    value: this.scene.getNonDeletedElements()\n                  }, {\n                    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ExcalidrawActionManagerContext.Provider, Object.assign({\n                      value: this.actionManager\n                    }, {\n                      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LayerUI__WEBPACK_IMPORTED_MODULE_36__[\"default\"], Object.assign({\n                        canvas: this.canvas,\n                        appState: this.state,\n                        files: this.files,\n                        setAppState: this.setAppState,\n                        actionManager: this.actionManager,\n                        elements: this.scene.getNonDeletedElements(),\n                        onLockToggle: this.toggleLock,\n                        onPenModeToggle: this.togglePenMode,\n                        onHandToolToggle: this.onHandToolToggle,\n                        langCode: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.getLanguage)().code,\n                        renderTopRightUI: renderTopRightUI,\n                        renderCustomStats: renderCustomStats,\n                        showExitZenModeBtn: typeof ((_a = this.props) === null || _a === void 0 ? void 0 : _a.zenModeEnabled) === \"undefined\" && this.state.zenModeEnabled,\n                        UIOptions: this.props.UIOptions,\n                        onExportImage: this.onExportImage,\n                        renderWelcomeScreen: !this.state.isLoading && this.state.showWelcomeScreen && this.state.activeTool.type === \"selection\" && !this.state.zenModeEnabled && !this.scene.getElementsIncludingDeleted().length,\n                        app: this,\n                        isCollaborating: this.props.isCollaborating,\n                        openAIKey: this.OPENAI_KEY,\n                        isOpenAIKeyPersisted: this.OPENAI_KEY_IS_PERSISTED,\n                        onOpenAIAPIKeyChange: this.onOpenAIKeyChange,\n                        onMagicSettingsConfirm: this.onMagicSettingsConfirm\n                      }, {\n                        children: this.props.children\n                      })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n                        className: \"excalidraw-textEditorContainer\"\n                      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n                        className: \"excalidraw-contextMenuContainer\"\n                      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n                        className: \"excalidraw-eye-dropper-container\"\n                      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LaserTool_LaserTool__WEBPACK_IMPORTED_MODULE_68__.LaserToolOverlay, {\n                        manager: this.laserPathManager\n                      }), selectedElements.length === 1 && this.state.showHyperlinkPopup && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.Hyperlink, {\n                        element: firstSelectedElement,\n                        setAppState: this.setAppState,\n                        onLinkOpen: this.props.onLinkOpen,\n                        setToast: this.setToast\n                      }, firstSelectedElement.id), this.props.aiEnabled !== false && selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(firstSelectedElement) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_72__.ElementCanvasButtons, Object.assign({\n                        element: firstSelectedElement\n                      }, {\n                        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_76__.ElementCanvasButton, {\n                          title: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.convertToCode\"),\n                          icon: _icons__WEBPACK_IMPORTED_MODULE_77__.MagicIcon,\n                          checked: false,\n                          onChange: () => this.onMagicFrameGenerate(firstSelectedElement, \"button\")\n                        })\n                      })), selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(firstSelectedElement) && ((_c = (_b = firstSelectedElement.customData) === null || _b === void 0 ? void 0 : _b.generationData) === null || _c === void 0 ? void 0 : _c.status) === \"done\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_72__.ElementCanvasButtons, Object.assign({\n                        element: firstSelectedElement\n                      }, {\n                        children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_76__.ElementCanvasButton, {\n                          title: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.copySource\"),\n                          icon: _icons__WEBPACK_IMPORTED_MODULE_77__.copyIcon,\n                          checked: false,\n                          onChange: () => this.onIframeSrcCopy(firstSelectedElement)\n                        }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_76__.ElementCanvasButton, {\n                          title: \"Enter fullscreen\",\n                          icon: _icons__WEBPACK_IMPORTED_MODULE_77__.fullscreenIcon,\n                          checked: false,\n                          onChange: () => {\n                            const iframe = this.getHTMLIFrameElement(firstSelectedElement);\n\n                            if (iframe) {\n                              try {\n                                iframe.requestFullscreen();\n                                this.setState({\n                                  activeEmbeddable: {\n                                    element: firstSelectedElement,\n                                    state: \"active\"\n                                  },\n                                  selectedElementIds: {\n                                    [firstSelectedElement.id]: true\n                                  },\n                                  draggingElement: null,\n                                  selectionElement: null\n                                });\n                              } catch (err) {\n                                console.warn(err);\n                                this.setState({\n                                  errorMessage: \"Couldn't enter fullscreen\"\n                                });\n                              }\n                            }\n                          }\n                        })]\n                      })), this.state.toast !== null && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Toast__WEBPACK_IMPORTED_MODULE_37__.Toast, {\n                        message: this.state.toast.message,\n                        onClose: () => this.setToast(null),\n                        duration: this.state.toast.duration,\n                        closable: this.state.toast.closable\n                      }), this.state.contextMenu && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ContextMenu__WEBPACK_IMPORTED_MODULE_35__.ContextMenu, {\n                        items: this.state.contextMenu.items,\n                        top: this.state.contextMenu.top,\n                        left: this.state.contextMenu.left,\n                        actionManager: this.actionManager,\n                        onClose: callback => {\n                          this.setState({\n                            contextMenu: null\n                          }, () => {\n                            this.focusContainer();\n                            callback === null || callback === void 0 ? void 0 : callback();\n                          });\n                        }\n                      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases__WEBPACK_IMPORTED_MODULE_65__.StaticCanvas, {\n                        canvas: this.canvas,\n                        rc: this.rc,\n                        elements: canvasElements,\n                        visibleElements: visibleElements,\n                        versionNonce: versionNonce,\n                        selectionNonce: (_d = this.state.selectionElement) === null || _d === void 0 ? void 0 : _d.versionNonce,\n                        scale: window.devicePixelRatio,\n                        appState: this.state,\n                        renderConfig: {\n                          imageCache: this.imageCache,\n                          isExporting: false,\n                          renderGrid: true,\n                          canvasBackgroundColor: this.state.viewBackgroundColor\n                        }\n                      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases__WEBPACK_IMPORTED_MODULE_65__.InteractiveCanvas, {\n                        containerRef: this.excalidrawContainerRef,\n                        canvas: this.interactiveCanvas,\n                        elements: canvasElements,\n                        visibleElements: visibleElements,\n                        selectedElements: selectedElements,\n                        versionNonce: versionNonce,\n                        selectionNonce: (_e = this.state.selectionElement) === null || _e === void 0 ? void 0 : _e.versionNonce,\n                        scale: window.devicePixelRatio,\n                        appState: this.state,\n                        renderInteractiveSceneCallback: this.renderInteractiveSceneCallback,\n                        handleCanvasRef: this.handleInteractiveCanvasRef,\n                        onContextMenu: this.handleCanvasContextMenu,\n                        onPointerMove: this.handleCanvasPointerMove,\n                        onPointerUp: this.handleCanvasPointerUp,\n                        onPointerCancel: this.removePointer,\n                        onTouchMove: this.handleTouchMove,\n                        onPointerDown: this.handleCanvasPointerDown,\n                        onDoubleClick: this.handleCanvasDoubleClick\n                      }), this.state.userToFollow && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FollowMode_FollowMode__WEBPACK_IMPORTED_MODULE_79__[\"default\"], {\n                        width: this.state.width,\n                        height: this.state.height,\n                        userToFollow: this.state.userToFollow,\n                        onDisconnect: this.maybeUnfollowRemoteUser\n                      }), this.renderFrameNames(), ((_f = this.state.activeEmbeddable) === null || _f === void 0 ? void 0 : _f.state) === \"active\" && ( //zsviczian\n                      (_h = (_g = this.props).renderEmbeddableMenu) === null || _h === void 0 ? void 0 : _h.call(_g, this.state))]\n                    })), this.renderEmbeddables()]\n                  }))\n                }))\n              }))\n            }))\n          }))\n        }))\n      }))\n    }));\n  }\n\n  getTextFromElements(elements) {\n    const text = elements.reduce((acc, element) => {\n      if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element)) {\n        acc.push(element.text);\n      }\n\n      return acc;\n    }, []).join(\"\\n\\n\");\n    return text;\n  }\n\n  async onMagicFrameGenerate(magicFrame, source) {\n    var _a;\n\n    if (!this.OPENAI_KEY) {\n      this.setToast({\n        message: \"You must first configure your OpenAI API key in plugin settings\",\n        duration: 5000\n      });\n      return;\n      this.setState({\n        openDialog: {\n          name: \"settings\",\n          tab: \"diagram-to-code\",\n          source: \"generation\"\n        }\n      });\n      (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (missing key)\", \"d2c\");\n      return;\n    }\n\n    const magicFrameChildren = (0,_utils_export__WEBPACK_IMPORTED_MODULE_74__.elementsOverlappingBBox)({\n      elements: this.scene.getNonDeletedElements(),\n      bounds: magicFrame,\n      type: \"overlap\"\n    }).filter(el => !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(el));\n\n    if (!magicFrameChildren.length) {\n      if (source === \"button\") {\n        this.setState({\n          errorMessage: \"Cannot generate from an empty frame\"\n        });\n        (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (no-children)\", \"d2c\");\n      } else {\n        this.setActiveTool({\n          type: \"magicframe\"\n        });\n      }\n\n      return;\n    }\n\n    const frameElement = this.insertIframeElement({\n      sceneX: magicFrame.x + magicFrame.width + 30,\n      sceneY: magicFrame.y,\n      width: magicFrame.width,\n      height: magicFrame.height\n    });\n\n    if (!frameElement) {\n      return;\n    }\n\n    this.updateMagicGeneration({\n      frameElement,\n      data: {\n        status: \"pending\"\n      }\n    });\n    this.setState({\n      selectedElementIds: {\n        [frameElement.id]: true\n      }\n    });\n    const blob = await (0,_utils_export__WEBPACK_IMPORTED_MODULE_74__.exportToBlob)({\n      elements: this.scene.getNonDeletedElements(),\n      appState: Object.assign(Object.assign({}, this.state), {\n        exportBackground: true,\n        viewBackgroundColor: this.state.viewBackgroundColor\n      }),\n      exportingFrame: magicFrame,\n      files: this.files\n    });\n    const dataURL = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.getDataURL)(blob);\n    const textFromFrameChildren = this.getTextFromElements(magicFrameChildren);\n    (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (start)\", \"d2c\");\n    const result = await (0,_data_magic__WEBPACK_IMPORTED_MODULE_73__.diagramToHTML)({\n      image: dataURL,\n      apiKey: this.OPENAI_KEY,\n      text: textFromFrameChildren,\n      theme: this.state.theme\n    });\n\n    if (!result.ok) {\n      (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (failed)\", \"d2c\");\n      console.error(result.error);\n      this.updateMagicGeneration({\n        frameElement,\n        data: {\n          status: \"error\",\n          code: \"ERR_OAI\",\n          message: ((_a = result.error) === null || _a === void 0 ? void 0 : _a.message) || \"Unknown error during generation\"\n        }\n      });\n      return;\n    }\n\n    (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (success)\", \"d2c\");\n\n    if (result.choices[0].message.content == null) {\n      this.updateMagicGeneration({\n        frameElement,\n        data: {\n          status: \"error\",\n          code: \"ERR_OAI\",\n          message: \"Nothing genereated :(\"\n        }\n      });\n      return;\n    }\n\n    const message = result.choices[0].message.content;\n    const html = message.slice(message.indexOf(\"<!DOCTYPE html>\"), message.indexOf(\"</html>\") + \"</html>\".length);\n    this.updateMagicGeneration({\n      frameElement,\n      data: {\n        status: \"done\",\n        html\n      }\n    });\n  }\n\n  onIframeSrcCopy(element) {\n    var _a, _b;\n\n    if (((_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.generationData) === null || _b === void 0 ? void 0 : _b.status) === \"done\") {\n      (0,_clipboard__WEBPACK_IMPORTED_MODULE_11__.copyTextToSystemClipboard)(element.customData.generationData.html);\n      this.setToast({\n        message: \"copied to clipboard\",\n        closable: false,\n        duration: 1500\n      });\n    }\n  } //zsviczian - ugly hack\n\n\n  get OPENAI_KEY() {\n    var _a;\n\n    return (_a = hostPlugin === null || hostPlugin === void 0 ? void 0 : hostPlugin.settings) === null || _a === void 0 ? void 0 : _a.openAIAPIToken;\n  }\n\n  set OPENAI_KEY(value) {\n    return;\n  }\n\n  async componentDidMount() {\n    var _a;\n\n    this.unmounted = false;\n    this.excalidrawContainerValue.container = this.excalidrawContainerRef.current;\n\n    if (\"development\" === _constants__WEBPACK_IMPORTED_MODULE_12__.ENV.TEST || \"development\" !== \"production\") {\n      const setState = this.setState.bind(this);\n      Object.defineProperties(window.h, {\n        state: {\n          configurable: true,\n          get: () => {\n            return this.state;\n          }\n        },\n        setState: {\n          configurable: true,\n          value: (...args) => {\n            return this.setState(...args);\n          }\n        },\n        app: {\n          configurable: true,\n          value: this\n        },\n        history: {\n          configurable: true,\n          value: this.history\n        }\n      });\n    }\n\n    this.scene.addCallback(this.onSceneUpdated);\n    this.addEventListeners();\n\n    if (this.props.autoFocus && this.excalidrawContainerRef.current) {\n      this.focusContainer();\n    }\n\n    if ( // bounding rects don't work in tests so updating\n    // the state on init would result in making the test enviro run\n    // in mobile breakpoint (0 width/height), making everything fail\n    !(0,_utils__WEBPACK_IMPORTED_MODULE_33__.isTestEnv)()) {\n      this.refreshViewportBreakpoints();\n      this.refreshEditorBreakpoints();\n    }\n\n    if (supportsResizeObserver && this.excalidrawContainerRef.current) {\n      this.resizeObserver = new ResizeObserver(() => {\n        this.refreshEditorBreakpoints();\n        this.updateDOMRect();\n      });\n      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.excalidrawContainerRef.current);\n    }\n\n    const searchParams = new URLSearchParams(window.location.search.slice(1));\n\n    if (searchParams.has(\"web-share-target\")) {\n      // Obtain a file that was shared via the Web Share Target API.\n      this.restoreFileFromShare();\n    } else {\n      this.updateDOMRect(this.initializeScene);\n    } // note that this check seems to always pass in localhost\n\n\n    if ((0,_constants__WEBPACK_IMPORTED_MODULE_12__.isBrave)() && !(0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.isMeasureTextSupported)()) {\n      this.setState({\n        errorMessage: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_BraveMeasureTextError__WEBPACK_IMPORTED_MODULE_61__[\"default\"], {})\n      });\n    }\n  }\n\n  componentWillUnmount() {\n    var _a;\n\n    this.renderer.destroy();\n    this.scene = new _scene_Scene__WEBPACK_IMPORTED_MODULE_30__[\"default\"]();\n    this.renderer = new _scene_Renderer__WEBPACK_IMPORTED_MODULE_66__.Renderer(this.scene);\n    this.files = {};\n    this.imageCache.clear();\n    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();\n    this.unmounted = true;\n    this.removeEventListeners();\n    this.scene.destroy();\n    this.library.destroy();\n    this.laserPathManager.destroy();\n    this.onChangeEmitter.clear();\n    _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache.destroy();\n    _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.destroy();\n    clearTimeout(touchTimeout);\n    _scene__WEBPACK_IMPORTED_MODULE_29__.isSomeElementSelected.clearCache();\n    _groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements.clearCache();\n    touchTimeout = 0;\n  }\n\n  removeEventListeners() {\n    this.onRemoveEventListenersEmitter.trigger();\n  }\n\n  addEventListeners() {\n    // remove first as we can add event listeners multiple times\n    this.removeEventListeners(); // -------------------------------------------------------------------------\n    //                        view+edit mode listeners\n    // -------------------------------------------------------------------------\n\n    if (this.props.handleKeyboardGlobally) {\n      this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, this.onKeyDown, false));\n    }\n\n    this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.onWheel, {\n      passive: false\n    }), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MESSAGE, this.onWindowMessage, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, this.removePointer), // #3553\n    (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.COPY, this.onCopy), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, this.onKeyUp, {\n      passive: true\n    }), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MOUSE_MOVE, this.updateCurrentCursorPosition), // rerender text elements on font load to fix #637 && #1553\n    (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document.fonts, \"loadingdone\", event => {\n      const loadedFontFaces = event.fontfaces;\n      this.fonts.onFontsLoaded(loadedFontFaces);\n    }), // Safari-only desktop pinch zoom\n    (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_START, this.onGestureStart, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_CHANGE, this.onGestureChange, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_END, this.onGestureEnd, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.FOCUS, () => {\n      this.maybeCleanupAfterMissingPointerUp(null);\n    }));\n\n    if (this.state.viewModeEnabled) {\n      return;\n    } // -------------------------------------------------------------------------\n    //                        edit-mode listeners only\n    // -------------------------------------------------------------------------\n\n\n    this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.FULLSCREENCHANGE, this.onFullscreenChange), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, this.pasteFromClipboard), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.CUT, this.onCut), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.RESIZE, this.onResize, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.UNLOAD, this.onUnload, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, this.onBlur, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DRAG_OVER, this.disableEvent, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DROP, this.disableEvent, false));\n\n    if (this.props.detectScroll) {\n      this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)((0,_utils__WEBPACK_IMPORTED_MODULE_33__.getNearestScrollableContainer)(this.excalidrawContainerRef.current), _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.SCROLL, this.onScroll));\n    }\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    var _a, _b, _c, _d, _e, _f;\n\n    this.updateEmbeddables();\n\n    if (!this.state.showWelcomeScreen && !this.scene.getElementsIncludingDeleted().length) {\n      this.setState({\n        showWelcomeScreen: true\n      });\n    }\n\n    if (prevProps.UIOptions.dockedSidebarBreakpoint !== this.props.UIOptions.dockedSidebarBreakpoint) {\n      this.refreshEditorBreakpoints();\n    }\n\n    const hasFollowedPersonLeft = prevState.userToFollow && !this.state.collaborators.has(prevState.userToFollow.socketId);\n\n    if (hasFollowedPersonLeft) {\n      this.maybeUnfollowRemoteUser();\n    }\n\n    if (prevState.zoom.value !== this.state.zoom.value || prevState.scrollX !== this.state.scrollX || prevState.scrollY !== this.state.scrollY) {\n      (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onScrollChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.scrollX, this.state.scrollY, this.state.zoom);\n      this.onScrollChangeEmitter.trigger(this.state.scrollX, this.state.scrollY, this.state.zoom);\n    }\n\n    if (prevState.userToFollow !== this.state.userToFollow) {\n      if (prevState.userToFollow) {\n        this.onUserFollowEmitter.trigger({\n          userToFollow: prevState.userToFollow,\n          action: \"UNFOLLOW\"\n        });\n      }\n\n      if (this.state.userToFollow) {\n        this.onUserFollowEmitter.trigger({\n          userToFollow: this.state.userToFollow,\n          action: \"FOLLOW\"\n        });\n      }\n    }\n\n    if (Object.keys(this.state.selectedElementIds).length && (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n      this.setState({\n        activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, {\n          type: \"selection\"\n        })\n      });\n    }\n\n    if (this.state.activeTool.type === \"eraser\" && prevState.theme !== this.state.theme) {\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setEraserCursor)(this.interactiveCanvas, this.state.theme);\n    } // Hide hyperlink popup if shown when element type is not selection\n\n\n    if (prevState.activeTool.type === \"selection\" && this.state.activeTool.type !== \"selection\" && this.state.showHyperlinkPopup) {\n      this.setState({\n        showHyperlinkPopup: false\n      });\n    }\n\n    if (prevProps.langCode !== this.props.langCode) {\n      this.updateLanguage();\n    }\n\n    if (prevProps.viewModeEnabled !== this.props.viewModeEnabled) {\n      this.setState({\n        viewModeEnabled: !!this.props.viewModeEnabled\n      });\n    }\n\n    if (prevState.viewModeEnabled !== this.state.viewModeEnabled) {\n      this.addEventListeners();\n      this.deselectElements();\n    }\n\n    if (prevProps.zenModeEnabled !== this.props.zenModeEnabled) {\n      this.setState({\n        zenModeEnabled: !!this.props.zenModeEnabled\n      });\n    }\n\n    if (prevProps.theme !== this.props.theme && this.props.theme) {\n      this.setState({\n        theme: this.props.theme\n      });\n    }\n\n    if (prevProps.gridModeEnabled !== this.props.gridModeEnabled) {\n      this.setState({\n        gridSize: this.props.gridModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.GRID_SIZE : null\n      });\n    }\n\n    if (this.props.name && prevProps.name !== this.props.name) {\n      this.setState({\n        name: this.props.name\n      });\n    }\n\n    (_c = this.excalidrawContainerRef.current) === null || _c === void 0 ? void 0 : _c.classList.toggle(\"theme--dark\", this.state.theme === \"dark\");\n\n    if (this.state.editingLinearElement && !this.state.selectedElementIds[this.state.editingLinearElement.elementId]) {\n      // defer so that the commitToHistory flag isn't reset via current update\n      setTimeout(() => {\n        // execute only if the condition still holds when the deferred callback\n        // executes (it can be scheduled multiple times depending on how\n        // many times the component renders)\n        this.state.editingLinearElement && this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n      });\n    } // failsafe in case the state is being updated in incorrect order resulting\n    // in the editingElement being now a deleted element\n\n\n    if ((_d = this.state.editingElement) === null || _d === void 0 ? void 0 : _d.isDeleted) {\n      this.setState({\n        editingElement: null\n      });\n    }\n\n    if (this.state.selectedLinearElement && !this.state.selectedElementIds[this.state.selectedLinearElement.elementId]) {\n      // To make sure `selectedLinearElement` is in sync with `selectedElementIds`, however this shouldn't be needed once\n      // we have a single API to update `selectedElementIds`\n      this.setState({\n        selectedLinearElement: null\n      });\n    }\n\n    const {\n      multiElement\n    } = prevState;\n\n    if (prevState.activeTool !== this.state.activeTool && multiElement != null && (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(multiElement, false)) {\n      (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.maybeBindLinearElement)(multiElement, this.state, this.scene, (0,_utils__WEBPACK_IMPORTED_MODULE_33__.tupleToCoors)(_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointAtIndexGlobalCoordinates(multiElement, -1)));\n    }\n\n    this.history.record(this.state, this.scene.getElementsIncludingDeleted()); // Do not notify consumers if we're still loading the scene. Among other\n    // potential issues, this fixes a case where the tab isn't focused during\n    // init, which would trigger onChange with empty elements, which would then\n    // override whatever is in localStorage currently.\n\n    if (!this.state.isLoading) {\n      (_f = (_e = this.props).onChange) === null || _f === void 0 ? void 0 : _f.call(_e, this.scene.getElementsIncludingDeleted(), this.state, this.files);\n      this.onChangeEmitter.trigger(this.scene.getElementsIncludingDeleted(), this.state, this.files);\n    }\n  }\n\n  static resetTapTwice() {\n    didTapTwice = false;\n  } // TODO rewrite this to paste both text & images at the same time if\n  // pasted data contains both\n\n\n  async addElementsFromMixedContentPaste(mixedContent, {\n    isPlainPaste,\n    sceneX,\n    sceneY\n  }) {\n    if (!isPlainPaste && mixedContent.some(node => node.type === \"imageUrl\") && this.isToolSupported(\"image\")) {\n      const imageURLs = mixedContent.filter(node => node.type === \"imageUrl\").map(node => node.value);\n      const responses = await Promise.all(imageURLs.map(async url => {\n        try {\n          return {\n            file: await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.ImageURLToFile)(url)\n          };\n        } catch (error) {\n          return {\n            errorMessage: error.message\n          };\n        }\n      }));\n      let y = sceneY;\n      let firstImageYOffsetDone = false;\n      const nextSelectedIds = {};\n\n      for (const response of responses) {\n        if (response.file) {\n          const imageElement = this.createImageElement({\n            sceneX,\n            sceneY: y\n          });\n          const initializedImageElement = await this.insertImageElement(imageElement, response.file);\n\n          if (initializedImageElement) {\n            // vertically center first image in the batch\n            if (!firstImageYOffsetDone) {\n              firstImageYOffsetDone = true;\n              y -= initializedImageElement.height / 2;\n            } // hack to reset the `y` coord because we vertically center during\n            // insertImageElement\n\n\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(initializedImageElement, {\n              y\n            }, false);\n            y = imageElement.y + imageElement.height + 25;\n            nextSelectedIds[imageElement.id] = true;\n          }\n        }\n      }\n\n      this.setState({\n        selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedIds, this.state)\n      });\n      const error = responses.find(response => !!response.errorMessage);\n\n      if (error && error.errorMessage) {\n        this.setState({\n          errorMessage: error.errorMessage\n        });\n      }\n    } else {\n      const textNodes = mixedContent.filter(node => node.type === \"text\");\n\n      if (textNodes.length) {\n        this.addTextFromPaste(textNodes.map(node => node.value).join(\"\\n\\n\"), isPlainPaste);\n      }\n    }\n  }\n\n  addTextFromPaste(text, isPlainPaste = false) {\n    const {\n      x,\n      y\n    } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n      clientX: this.lastViewportPosition.x,\n      clientY: this.lastViewportPosition.y\n    }, this.state);\n    const textElementProps = {\n      x,\n      y,\n      strokeColor: this.state.currentItemStrokeColor,\n      backgroundColor: this.state.currentItemBackgroundColor,\n      fillStyle: this.state.currentItemFillStyle,\n      strokeWidth: this.state.currentItemStrokeWidth,\n      strokeStyle: this.state.currentItemStrokeStyle,\n      roundness: null,\n      roughness: this.state.currentItemRoughness,\n      opacity: this.state.currentItemOpacity,\n      text,\n      rawText: text,\n      fontSize: (0,_actions_actionProperties__WEBPACK_IMPORTED_MODULE_80__.getFontSize)(this.state.currentItemFontSize, this.state.zoom.value),\n      fontFamily: this.state.currentItemFontFamily,\n      textAlign: this.state.currentItemTextAlign,\n      verticalAlign: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_VERTICAL_ALIGN,\n      locked: false\n    };\n    const LINE_GAP = 10;\n    let currentY = y;\n    const lines = isPlainPaste ? [text] : text.split(\"\\n\");\n    const textElements = lines.reduce((acc, line, idx) => {\n      var _a;\n\n      const text = line.trim();\n      const lineHeight = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getDefaultLineHeight)(textElementProps.fontFamily);\n\n      if (text.length) {\n        const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n          x,\n          y: currentY\n        });\n        const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newTextElement)(Object.assign(Object.assign({}, textElementProps), {\n          x,\n          y: currentY,\n          text,\n          rawText: text,\n          //zsviczian\n          lineHeight,\n          frameId: topLayerFrame ? topLayerFrame.id : null\n        }));\n        acc.push(element);\n        currentY += element.height + LINE_GAP;\n      } else {\n        const prevLine = (_a = lines[idx - 1]) === null || _a === void 0 ? void 0 : _a.trim(); // add paragraph only if previous line was not empty, IOW don't add\n        // more than one empty line\n\n        if (prevLine) {\n          currentY += (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getLineHeightInPx)(textElementProps.fontSize, lineHeight) + LINE_GAP;\n        }\n      }\n\n      return acc;\n    }, []);\n\n    if (textElements.length === 0) {\n      return;\n    }\n\n    const frameId = textElements[0].frameId;\n\n    if (frameId) {\n      this.scene.insertElementsAtIndex(textElements, this.scene.getElementIndex(frameId));\n    } else {\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted(), ...textElements]);\n    }\n\n    this.setState({\n      selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.fromEntries(textElements.map(el => [el.id, true])), this.state)\n    });\n\n    if (!isPlainPaste && textElements.length > 1 && PLAIN_PASTE_TOAST_SHOWN === false && !this.device.editor.isMobile) {\n      this.setToast({\n        message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"toast.pasteAsSingleElement\", {\n          shortcut: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.getShortcutKey)(\"CtrlOrCmd+Shift+V\")\n        }),\n        duration: 5000\n      });\n      PLAIN_PASTE_TOAST_SHOWN = true;\n    }\n\n    this.history.resumeRecording();\n  }\n\n  handleTextWysiwyg(element, {\n    isExistingElement = false\n  }) {\n    const updateElement = (text, originalText, isDeleted, rawText, link) => {\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted().map(_element => {\n        if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n          return (0,_element__WEBPACK_IMPORTED_MODULE_16__.updateTextElement)(_element, {\n            text,\n            isDeleted,\n            originalText,\n            rawText: rawText !== null && rawText !== void 0 ? rawText : originalText,\n            link\n          });\n        }\n\n        return _element;\n      })]);\n    };\n\n    if (isExistingElement && this.props.onBeforeTextEdit) {\n      const text = this.props.onBeforeTextEdit(element);\n\n      if (text) {\n        this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted().map(_element => {\n          if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n            element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.updateTextElement)(_element, {\n              text,\n              isDeleted: false,\n              originalText: text\n            });\n            return element;\n          }\n\n          return _element;\n        })]);\n      }\n    }\n\n    (0,_element__WEBPACK_IMPORTED_MODULE_16__.textWysiwyg)({\n      id: element.id,\n      canvas: this.canvas,\n      getViewportCoords: (x, y) => {\n        const {\n          x: viewportX,\n          y: viewportY\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.sceneCoordsToViewportCoords)({\n          sceneX: x,\n          sceneY: y\n        }, this.state);\n        return [viewportX - this.state.offsetLeft, viewportY - this.state.offsetTop];\n      },\n      onChange: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(text => {\n        updateElement(text, text, false);\n\n        if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isNonDeletedElement)(element)) {\n          (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.updateBoundElements)(element);\n        }\n      }),\n      onSubmit: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(({\n        text,\n        viaKeyboard,\n        originalText\n      }) => {\n        const isDeleted = !text.trim();\n        const rawText = originalText; //should this be originalText??\n\n        let link = undefined;\n\n        if (this.props.onBeforeTextSubmit) {\n          const [updatedText, updatedOriginalText, l] = this.props.onBeforeTextSubmit(element, text, originalText, isDeleted);\n          text = updatedText !== null && updatedText !== void 0 ? updatedText : text;\n          originalText = updatedOriginalText !== null && updatedOriginalText !== void 0 ? updatedOriginalText : originalText;\n          link = l;\n        }\n\n        updateElement(text, originalText, isDeleted, rawText, link); // select the created text element only if submitting via keyboard\n        // (when submitting via click it should act as signal to deselect)\n\n        if (!isDeleted && viaKeyboard) {\n          const elementIdToSelect = element.containerId ? element.containerId : element.id;\n          this.setState(prevState => ({\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n              [elementIdToSelect]: true\n            }), prevState)\n          }));\n        }\n\n        if (isDeleted) {\n          (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.fixBindingsAfterDeletion)(this.scene.getNonDeletedElements(), [element]);\n        }\n\n        if (!isDeleted || isExistingElement) {\n          this.history.resumeRecording();\n        }\n\n        this.setState({\n          draggingElement: null,\n          editingElement: null\n        });\n\n        if (this.state.activeTool.locked) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursorForShape)(this.interactiveCanvas, this.state);\n        }\n\n        this.focusContainer();\n      }),\n      element,\n      excalidrawContainer: this.excalidrawContainerRef.current,\n      app: this\n    }); // deselect all other elements when inserting text\n\n    this.deselectElements(); // do an initial update to re-initialize element position since we were\n    // modifying element's x/y for sake of editor (case: syncing to remote)\n\n    updateElement(element.text, element.originalText, false);\n  }\n\n  deselectElements() {\n    this.setState({\n      selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n      selectedGroupIds: {},\n      editingGroupId: null,\n      activeEmbeddable: null\n    });\n  }\n\n  getTextElementAtPosition(x, y) {\n    const element = this.getElementAtPosition(x, y, {\n      includeBoundTextElement: true\n    });\n\n    if (element && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element) && !element.isDeleted) {\n      return element;\n    }\n\n    return null;\n  }\n\n  getElementAtPosition(x, y, opts) {\n    const allHitElements = this.getElementsAtPosition(x, y, opts === null || opts === void 0 ? void 0 : opts.includeBoundTextElement, opts === null || opts === void 0 ? void 0 : opts.includeLockedElements);\n\n    if (allHitElements.length > 1) {\n      if (opts === null || opts === void 0 ? void 0 : opts.preferSelected) {\n        for (let index = allHitElements.length - 1; index > -1; index--) {\n          if (this.state.selectedElementIds[allHitElements[index].id]) {\n            return allHitElements[index];\n          }\n        }\n      }\n\n      const elementWithHighestZIndex = allHitElements[allHitElements.length - 1]; // If we're hitting element with highest z-index only on its bounding box\n      // while also hitting other element figure, the latter should be considered.\n\n      return (0,_element__WEBPACK_IMPORTED_MODULE_16__.isHittingElementBoundingBoxWithoutHittingElement)(elementWithHighestZIndex, this.state, this.frameNameBoundsCache, x, y) ? allHitElements[allHitElements.length - 2] : elementWithHighestZIndex;\n    }\n\n    if (allHitElements.length === 1) {\n      return allHitElements[0];\n    }\n\n    return null;\n  }\n\n  getElementsAtPosition(x, y, includeBoundTextElement = false, includeLockedElements = false) {\n    const elements = includeBoundTextElement && includeLockedElements ? this.scene.getNonDeletedElements() : this.scene.getNonDeletedElements().filter(element => (includeLockedElements || !element.locked) && (includeBoundTextElement || !((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element) && element.containerId)));\n    return (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getElementsAtPosition)(elements, element => (0,_element__WEBPACK_IMPORTED_MODULE_16__.hitTest)(element, this.state, this.frameNameBoundsCache, x, y)).filter(element => {\n      // hitting a frame's element from outside the frame is not considered a hit\n      const containingFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getContainingFrame)(element);\n      return containingFrame && this.state.frameRendering.enabled && this.state.frameRendering.clip ? (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isCursorInFrame)({\n        x,\n        y\n      }, containingFrame) : true;\n    });\n  }\n\n  handleHoverSelectedLinearElement(linearElementEditor, scenePointerX, scenePointerY) {\n    const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getElement(linearElementEditor.elementId);\n    const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getBoundTextElement)(element);\n\n    if (!element) {\n      return;\n    }\n\n    if (this.state.selectedLinearElement) {\n      let hoverPointIndex = -1;\n      let segmentMidPointHoveredCoords = null;\n\n      if ((0,_element_collision__WEBPACK_IMPORTED_MODULE_44__.isHittingElementNotConsideringBoundingBox)(element, this.state, this.frameNameBoundsCache, [scenePointerX, scenePointerY])) {\n        hoverPointIndex = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointIndexUnderCursor(element, this.state.zoom, scenePointerX, scenePointerY);\n        segmentMidPointHoveredCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getSegmentMidpointHitCoords(linearElementEditor, {\n          x: scenePointerX,\n          y: scenePointerY\n        }, this.state);\n\n        if (hoverPointIndex >= 0 || segmentMidPointHoveredCoords) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n        } else {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n        }\n      } else if ((0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_48__.shouldShowBoundingBox)([element], this.state) && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isHittingElementBoundingBoxWithoutHittingElement)(element, this.state, this.frameNameBoundsCache, scenePointerX, scenePointerY)) {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n      } else if (boundTextElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.hitTest)(boundTextElement, this.state, this.frameNameBoundsCache, scenePointerX, scenePointerY)) {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n      }\n\n      if (this.state.selectedLinearElement.hoverPointIndex !== hoverPointIndex) {\n        this.setState({\n          selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n            hoverPointIndex\n          })\n        });\n      }\n\n      if (!_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.arePointsEqual(this.state.selectedLinearElement.segmentMidPointHoveredCoords, segmentMidPointHoveredCoords)) {\n        this.setState({\n          selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n            segmentMidPointHoveredCoords\n          })\n        });\n      }\n    } else {\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n    }\n  }\n\n  updateGestureOnPointerDown(event) {\n    gesture.pointers.set(event.pointerId, {\n      x: event.clientX,\n      y: event.clientY\n    });\n\n    if (gesture.pointers.size === 2) {\n      gesture.lastCenter = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getCenter)(gesture.pointers);\n      gesture.initialScale = this.state.zoom.value;\n      gesture.initialDistance = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getDistance)(Array.from(gesture.pointers.values()));\n    }\n  }\n\n  initialPointerDownState(event) {\n    const origin = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n    const selectedElements = this.scene.getSelectedElements(this.state);\n    const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n    return {\n      origin,\n      withCmdOrCtrl: event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD],\n      originInGrid: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.tupleToCoors)((0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(origin.x, origin.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize)),\n      scrollbars: (0,_scene__WEBPACK_IMPORTED_MODULE_29__.isOverScrollBars)(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop),\n      // we need to duplicate because we'll be updating this state\n      lastCoords: Object.assign({}, origin),\n      originalElements: this.scene.getNonDeletedElements().reduce((acc, element) => {\n        acc.set(element.id, (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.deepCopyElement)(element));\n        return acc;\n      }, new Map()),\n      resize: {\n        handleType: false,\n        isResizing: false,\n        offset: {\n          x: 0,\n          y: 0\n        },\n        arrowDirection: \"origin\",\n        center: {\n          x: (maxX + minX) / 2,\n          y: (maxY + minY) / 2\n        }\n      },\n      hit: {\n        element: null,\n        allHitElements: [],\n        wasAddedToSelection: false,\n        hasBeenDuplicated: false,\n        hasHitCommonBoundingBoxOfSelectedElements: this.isHittingCommonBoundingBoxOfSelectedElements(origin, selectedElements)\n      },\n      drag: {\n        hasOccurred: false,\n        offset: null\n      },\n      eventListeners: {\n        onMove: null,\n        onUp: null,\n        onKeyUp: null,\n        onKeyDown: null\n      },\n      boxSelection: {\n        hasOccurred: false\n      },\n      elementIdsToErase: {}\n    };\n  } // Returns whether the event is a dragging a scrollbar\n\n\n  handleDraggingScrollBar(event, pointerDownState) {\n    if (!(pointerDownState.scrollbars.isOverEither && !this.state.multiElement)) {\n      return false;\n    }\n\n    isDraggingScrollBar = true;\n    pointerDownState.lastCoords.x = event.clientX;\n    pointerDownState.lastCoords.y = event.clientY;\n    const onPointerMove = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdatesThrottled)(event => {\n      const target = event.target;\n\n      if (!(target instanceof HTMLElement)) {\n        return;\n      }\n\n      this.handlePointerMoveOverScrollbars(event, pointerDownState);\n    });\n    const onPointerUp = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(() => {\n      lastPointerUp = null;\n      isDraggingScrollBar = false;\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.setCursorForShape)(this.interactiveCanvas, this.state);\n      this.setState({\n        cursorButton: \"up\"\n      });\n      this.savePointer(event.clientX, event.clientY, \"up\");\n      window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n      window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n      onPointerMove.flush();\n    });\n    lastPointerUp = onPointerUp;\n    window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n    window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n    return true;\n  }\n\n  isASelectedElement(hitElement) {\n    return hitElement != null && this.state.selectedElementIds[hitElement.id];\n  }\n\n  isHittingCommonBoundingBoxOfSelectedElements(point, selectedElements) {\n    if (selectedElements.length < 2) {\n      return false;\n    } // How many pixels off the shape boundary we still consider a hit\n\n\n    const threshold = 10 / this.state.zoom.value;\n    const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n    return point.x > x1 - threshold && point.x < x2 + threshold && point.y > y1 - threshold && point.y < y2 + threshold;\n  }\n\n  getCurrentItemRoundness(elementType) {\n    return this.state.currentItemRoundness === \"round\" ? {\n      type: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isUsingAdaptiveRadius)(elementType) ? _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.ADAPTIVE_RADIUS : _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.PROPORTIONAL_RADIUS\n    } : null;\n  }\n\n  maybeCacheReferenceSnapPoints(event, selectedElements, recomputeAnyways = false) {\n    if ((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.isSnappingEnabled)({\n      event,\n      appState: this.state,\n      selectedElements\n    }) && (recomputeAnyways || !_snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.getReferenceSnapPoints())) {\n      _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setReferenceSnapPoints((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.getReferenceSnapPoints)(this.scene.getNonDeletedElements(), selectedElements, this.state));\n    }\n  }\n\n  maybeCacheVisibleGaps(event, selectedElements, recomputeAnyways = false) {\n    if ((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.isSnappingEnabled)({\n      event,\n      appState: this.state,\n      selectedElements\n    }) && (recomputeAnyways || !_snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.getVisibleGaps())) {\n      _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setVisibleGaps((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.getVisibleGaps)(this.scene.getNonDeletedElements(), selectedElements, this.state));\n    }\n  }\n\n  onKeyDownFromPointerDownHandler(pointerDownState) {\n    return (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      if (this.maybeHandleResize(pointerDownState, event)) {\n        return;\n      }\n\n      this.maybeDragNewGenericElement(pointerDownState, event);\n    });\n  }\n\n  onKeyUpFromPointerDownHandler(pointerDownState) {\n    return (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      // Prevents focus from escaping excalidraw tab\n      event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ALT && event.preventDefault();\n\n      if (this.maybeHandleResize(pointerDownState, event)) {\n        return;\n      }\n\n      this.maybeDragNewGenericElement(pointerDownState, event);\n    });\n  }\n\n  onPointerMoveFromPointerDownHandler(pointerDownState) {\n    return (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdatesThrottled)(event => {\n      var _a, _b; //To avoid pointerMove canceling the selection of locked elements on mobile //zsviczian\n\n\n      if (Boolean(this.state.contextMenu)) {\n        return;\n      } // We need to initialize dragOffsetXY only after we've updated\n      // `state.selectedElementIds` on pointerDown. Doing it here in pointerMove\n      // event handler should hopefully ensure we're already working with\n      // the updated state.\n\n\n      if (pointerDownState.drag.offset === null) {\n        pointerDownState.drag.offset = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.tupleToCoors)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getDragOffsetXY)(this.scene.getSelectedElements(this.state), pointerDownState.origin.x, pointerDownState.origin.y));\n      }\n\n      const target = event.target;\n\n      if (!(target instanceof HTMLElement)) {\n        return;\n      }\n\n      if (this.handlePointerMoveOverScrollbars(event, pointerDownState)) {\n        return;\n      }\n\n      const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n\n      if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n        this.handleEraser(event, pointerDownState, pointerCoords);\n        return;\n      }\n\n      if (this.state.activeTool.type === \"laser\") {\n        this.laserPathManager.addPointToPath(pointerCoords.x, pointerCoords.y);\n      }\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize); // for arrows/lines, don't start dragging until a given threshold\n      // to ensure we don't create a 2-point arrow by mistake when\n      // user clicks mouse in a way that it moves a tiny bit (thus\n      // triggering pointermove)\n\n      if (!pointerDownState.drag.hasOccurred && (this.state.activeTool.type === \"arrow\" || this.state.activeTool.type === \"line\")) {\n        if ((0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerCoords.x, pointerCoords.y, pointerDownState.origin.x, pointerDownState.origin.y) < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD) {\n          return;\n        }\n      }\n\n      if (pointerDownState.resize.isResizing) {\n        pointerDownState.lastCoords.x = pointerCoords.x;\n        pointerDownState.lastCoords.y = pointerCoords.y;\n\n        if (this.maybeHandleResize(pointerDownState, event)) {\n          return true;\n        }\n      }\n\n      if (this.state.selectedLinearElement) {\n        const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;\n\n        if (_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.shouldAddMidpoint(this.state.selectedLinearElement, pointerCoords, this.state)) {\n          const ret = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.addMidpoint(this.state.selectedLinearElement, pointerCoords, this.state, !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]);\n\n          if (!ret) {\n            return;\n          } // Since we are reading from previous state which is not possible with\n          // automatic batching in React 18 hence using flush sync to synchronously\n          // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.\n\n\n          (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n            if (this.state.selectedLinearElement) {\n              this.setState({\n                selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n                  pointerDownState: ret.pointerDownState,\n                  selectedPointsIndices: ret.selectedPointsIndices\n                })\n              });\n            }\n\n            if (this.state.editingLinearElement) {\n              this.setState({\n                editingLinearElement: Object.assign(Object.assign({}, this.state.editingLinearElement), {\n                  pointerDownState: ret.pointerDownState,\n                  selectedPointsIndices: ret.selectedPointsIndices\n                })\n              });\n            }\n          });\n          return;\n        } else if (linearElementEditor.pointerDownState.segmentMidpoint.value !== null && !linearElementEditor.pointerDownState.segmentMidpoint.added) {\n          return;\n        }\n\n        const didDrag = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointDragging(event, this.state, pointerCoords.x, pointerCoords.y, (element, pointsSceneCoords) => {\n          this.maybeSuggestBindingsForLinearElementAtCoords(element, pointsSceneCoords);\n        }, linearElementEditor);\n\n        if (didDrag) {\n          pointerDownState.lastCoords.x = pointerCoords.x;\n          pointerDownState.lastCoords.y = pointerCoords.y;\n          pointerDownState.drag.hasOccurred = true;\n\n          if (this.state.editingLinearElement && !this.state.editingLinearElement.isDragging) {\n            this.setState({\n              editingLinearElement: Object.assign(Object.assign({}, this.state.editingLinearElement), {\n                isDragging: true\n              })\n            });\n          }\n\n          if (!this.state.selectedLinearElement.isDragging) {\n            this.setState({\n              selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n                isDragging: true\n              })\n            });\n          }\n\n          return;\n        }\n      }\n\n      const hasHitASelectedElement = pointerDownState.hit.allHitElements.some(element => this.isASelectedElement(element));\n      const isSelectingPointsInLineEditor = this.state.editingLinearElement && event.shiftKey && this.state.editingLinearElement.elementId === ((_a = pointerDownState.hit.element) === null || _a === void 0 ? void 0 : _a.id);\n\n      if ((hasHitASelectedElement || pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) && !isSelectingPointsInLineEditor) {\n        const selectedElements = this.scene.getSelectedElements(this.state);\n\n        if (selectedElements.every(element => element.locked)) {\n          return;\n        }\n\n        const selectedElementsHasAFrame = selectedElements.find(e => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(e));\n        const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords);\n        this.setState({\n          frameToHighlight: topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null\n        }); // Marking that click was used for dragging to check\n        // if elements should be deselected on pointerup\n\n        pointerDownState.drag.hasOccurred = true;\n        this.setState({\n          selectedElementsAreBeingDragged: true\n        }); // prevent dragging even if we're no longer holding cmd/ctrl otherwise\n        // it would have weird results (stuff jumping all over the screen)\n        // Checking for editingElement to avoid jump while editing on mobile #6503\n\n        if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl && !this.state.editingElement && ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) !== \"active\") {\n          const dragOffset = {\n            x: pointerCoords.x - pointerDownState.origin.x,\n            y: pointerCoords.y - pointerDownState.origin.y\n          };\n          const originalElements = [...pointerDownState.originalElements.values()]; // We only drag in one direction if shift is pressed\n\n          const lockDirection = event.shiftKey;\n\n          if (lockDirection) {\n            const distanceX = Math.abs(dragOffset.x);\n            const distanceY = Math.abs(dragOffset.y);\n            const lockX = lockDirection && distanceX < distanceY;\n            const lockY = lockDirection && distanceX > distanceY;\n\n            if (lockX) {\n              dragOffset.x = 0;\n            }\n\n            if (lockY) {\n              dragOffset.y = 0;\n            }\n          } // Snap cache *must* be synchronously popuplated before initial drag,\n          // otherwise the first drag even will not snap, causing a jump before\n          // it snaps to its position if previously snapped already.\n\n\n          this.maybeCacheVisibleGaps(event, selectedElements);\n          this.maybeCacheReferenceSnapPoints(event, selectedElements);\n          const {\n            snapOffset,\n            snapLines\n          } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.snapDraggedElements)((0,_scene__WEBPACK_IMPORTED_MODULE_29__.getSelectedElements)(originalElements, this.state), dragOffset, this.state, event);\n          this.setState({\n            snapLines\n          }); // when we're editing the name of a frame, we want the user to be\n          // able to select and interact with the text input\n\n          !this.state.editingFrame && (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragSelectedElements)(pointerDownState, selectedElements, dragOffset, this.state, this.scene, snapOffset, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n          this.maybeSuggestBindingForAll(selectedElements); // We duplicate the selected element if alt is pressed on pointer move\n\n          if (event.altKey && !pointerDownState.hit.hasBeenDuplicated) {\n            // Move the currently selected elements to the top of the z index stack, and\n            // put the duplicates where the selected elements used to be.\n            // (the origin point where the dragging started)\n            pointerDownState.hit.hasBeenDuplicated = true;\n            const nextElements = [];\n            const elementsToAppend = [];\n            const groupIdMap = new Map();\n            const oldIdToDuplicatedId = new Map();\n            const hitElement = pointerDownState.hit.element;\n            const selectedElementIds = new Set(this.scene.getSelectedElements({\n              selectedElementIds: this.state.selectedElementIds,\n              includeBoundTextElement: true,\n              includeElementsInFrames: true\n            }).map(element => element.id));\n            const elements = this.scene.getElementsIncludingDeleted();\n\n            for (const element of elements) {\n              if (selectedElementIds.has(element.id) || // case: the state.selectedElementIds might not have been\n              // updated yet by the time this mousemove event is fired\n              element.id === (hitElement === null || hitElement === void 0 ? void 0 : hitElement.id) && pointerDownState.hit.wasAddedToSelection) {\n                const duplicatedElement = (0,_element__WEBPACK_IMPORTED_MODULE_16__.duplicateElement)(this.state.editingGroupId, groupIdMap, element);\n                const origElement = pointerDownState.originalElements.get(element.id);\n                (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(duplicatedElement, {\n                  x: origElement.x,\n                  y: origElement.y\n                }); // put duplicated element to pointerDownState.originalElements\n                // so that we can snap to the duplicated element without releasing\n\n                pointerDownState.originalElements.set(duplicatedElement.id, duplicatedElement);\n                nextElements.push(duplicatedElement);\n                elementsToAppend.push(element);\n                oldIdToDuplicatedId.set(element.id, duplicatedElement.id);\n              } else {\n                nextElements.push(element);\n              }\n            }\n\n            const nextSceneElements = [...nextElements, ...elementsToAppend];\n            (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.bindTextToShapeAfterDuplication)(nextElements, elementsToAppend, oldIdToDuplicatedId);\n            (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.fixBindingsAfterDuplication)(nextSceneElements, elementsToAppend, oldIdToDuplicatedId, \"duplicatesServeAsOld\");\n            (0,_frame__WEBPACK_IMPORTED_MODULE_51__.bindElementsToFramesAfterDuplication)(nextSceneElements, elementsToAppend, oldIdToDuplicatedId);\n            this.scene.replaceAllElements(nextSceneElements);\n            this.maybeCacheVisibleGaps(event, selectedElements, true);\n            this.maybeCacheReferenceSnapPoints(event, selectedElements, true);\n          }\n\n          return;\n        }\n      } // It is very important to read this.state within each move event,\n      // otherwise we would read a stale one!\n\n\n      const draggingElement = this.state.draggingElement;\n\n      if (!draggingElement) {\n        return;\n      }\n\n      if (draggingElement.type === \"freedraw\") {\n        const points = draggingElement.points;\n        const dx = pointerCoords.x - draggingElement.x;\n        const dy = pointerCoords.y - draggingElement.y;\n        const lastPoint = points.length > 0 && points[points.length - 1];\n        const discardPoint = lastPoint && lastPoint[0] === dx && lastPoint[1] === dy;\n\n        if (!discardPoint) {\n          const strokeOptions = this.state.currentStrokeOptions; //zsviczian\n\n          const pressures = draggingElement.simulatePressure ? draggingElement.pressures : [//zsviczian\n          ...draggingElement.pressures, (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? 1 : event.pressure];\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n            points: [...points, [dx, dy]],\n            pressures\n          });\n        }\n      } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(draggingElement)) {\n        pointerDownState.drag.hasOccurred = true;\n        this.setState({\n          selectedElementsAreBeingDragged: true\n        });\n        const points = draggingElement.points;\n        let dx = gridX - draggingElement.x;\n        let dy = gridY - draggingElement.y;\n\n        if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event) && points.length === 2) {\n          ({\n            width: dx,\n            height: dy\n          } = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getLockedLinearCursorAlignSize)(draggingElement.x, draggingElement.y, pointerCoords.x, pointerCoords.y));\n        }\n\n        if (points.length === 1) {\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n            points: [...points, [dx, dy]]\n          });\n        } else if (points.length === 2) {\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n            points: [...points.slice(0, -1), [dx, dy]]\n          });\n        }\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(draggingElement, false)) {\n          // When creating a linear element by dragging\n          this.maybeSuggestBindingsForLinearElementAtCoords(draggingElement, [pointerCoords], this.state.startBoundElement);\n        }\n      } else {\n        pointerDownState.lastCoords.x = pointerCoords.x;\n        pointerDownState.lastCoords.y = pointerCoords.y;\n        this.maybeDragNewGenericElement(pointerDownState, event);\n      }\n\n      if (this.state.activeTool.type === \"selection\") {\n        pointerDownState.boxSelection.hasOccurred = true;\n        const elements = this.scene.getNonDeletedElements(); // box-select line editor points\n\n        if (this.state.editingLinearElement) {\n          _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handleBoxSelection(event, this.state, this.setState.bind(this)); // regular box-select\n        } else {\n          let shouldReuseSelection = true;\n\n          if (!event.shiftKey && (0,_scene__WEBPACK_IMPORTED_MODULE_29__.isSomeElementSelected)(elements, this.state)) {\n            if (pointerDownState.withCmdOrCtrl && pointerDownState.hit.element) {\n              this.setState(prevState => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)(Object.assign(Object.assign({}, prevState), {\n                selectedElementIds: {\n                  [pointerDownState.hit.element.id]: true\n                }\n              }), this.scene.getNonDeletedElements(), prevState, this));\n            } else {\n              shouldReuseSelection = false;\n            }\n          }\n\n          const elementsWithinSelection = (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getElementsWithinSelection)(elements, draggingElement);\n          this.setState(prevState => {\n            const nextSelectedElementIds = Object.assign(Object.assign({}, shouldReuseSelection && prevState.selectedElementIds), elementsWithinSelection.reduce((acc, element) => {\n              acc[element.id] = true;\n              return acc;\n            }, {}));\n\n            if (pointerDownState.hit.element) {\n              // if using ctrl/cmd, select the hitElement only if we\n              // haven't box-selected anything else\n              if (!elementsWithinSelection.length) {\n                nextSelectedElementIds[pointerDownState.hit.element.id] = true;\n              } else {\n                delete nextSelectedElementIds[pointerDownState.hit.element.id];\n              }\n            }\n\n            prevState = !shouldReuseSelection ? Object.assign(Object.assign({}, prevState), {\n              selectedGroupIds: {},\n              editingGroupId: null\n            }) : prevState;\n            return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n              editingGroupId: prevState.editingGroupId,\n              selectedElementIds: nextSelectedElementIds\n            }, this.scene.getNonDeletedElements(), prevState, this)), {\n              // select linear element only when we haven't box-selected anything else\n              selectedLinearElement: elementsWithinSelection.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(elementsWithinSelection[0]) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(elementsWithinSelection[0], this.scene) : null,\n              showHyperlinkPopup: elementsWithinSelection.length === 1 && (elementsWithinSelection[0].link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(elementsWithinSelection[0])) ? \"info\" : false\n            });\n          });\n        }\n      }\n    });\n  } // Returns whether the pointer move happened over either scrollbar\n\n\n  handlePointerMoveOverScrollbars(event, pointerDownState) {\n    if (pointerDownState.scrollbars.isOverHorizontal) {\n      const x = event.clientX;\n      const dx = x - pointerDownState.lastCoords.x;\n      this.translateCanvas({\n        scrollX: this.state.scrollX - dx / this.state.zoom.value\n      });\n      pointerDownState.lastCoords.x = x;\n      return true;\n    }\n\n    if (pointerDownState.scrollbars.isOverVertical) {\n      const y = event.clientY;\n      const dy = y - pointerDownState.lastCoords.y;\n      this.translateCanvas({\n        scrollY: this.state.scrollY - dy / this.state.zoom.value\n      });\n      pointerDownState.lastCoords.y = y;\n      return true;\n    }\n\n    return false;\n  }\n\n  onPointerUpFromPointerDownHandler(pointerDownState) {\n    return (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(childEvent => {\n      var _a, _b, _c, _d, _e, _f;\n\n      this.removePointer(childEvent);\n\n      if (pointerDownState.eventListeners.onMove) {\n        pointerDownState.eventListeners.onMove.flush();\n      }\n\n      const {\n        draggingElement,\n        resizingElement,\n        multiElement,\n        activeTool,\n        isResizing,\n        isRotating\n      } = this.state;\n      this.setState(prevState => ({\n        isResizing: false,\n        isRotating: false,\n        resizingElement: null,\n        selectionElement: null,\n        frameToHighlight: null,\n        elementsToHighlight: null,\n        cursorButton: \"up\",\n        // text elements are reset on finalize, and resetting on pointerup\n        // may cause issues with double taps\n        editingElement: multiElement || (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement) ? this.state.editingElement : null,\n        snapLines: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateStable)(prevState.snapLines, []),\n        originSnapOffset: null\n      }));\n      _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setReferenceSnapPoints(null);\n      _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setVisibleGaps(null);\n      this.savePointer(childEvent.clientX, childEvent.clientY, \"up\");\n      this.setState({\n        selectedElementsAreBeingDragged: false\n      }); // Handle end of dragging a point of a linear element, might close a loop\n      // and sets binding element\n\n      if (this.state.editingLinearElement) {\n        if (!pointerDownState.boxSelection.hasOccurred && ((_b = (_a = pointerDownState.hit) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.id) !== this.state.editingLinearElement.elementId) {\n          this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n        } else {\n          const editingLinearElement = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerUp(childEvent, this.state.editingLinearElement, this.state);\n\n          if (editingLinearElement !== this.state.editingLinearElement) {\n            this.setState({\n              editingLinearElement,\n              suggestedBindings: []\n            });\n          }\n        }\n      } else if (this.state.selectedLinearElement) {\n        if (((_d = (_c = pointerDownState.hit) === null || _c === void 0 ? void 0 : _c.element) === null || _d === void 0 ? void 0 : _d.id) !== this.state.selectedLinearElement.elementId) {\n          const selectedELements = this.scene.getSelectedElements(this.state); // set selectedLinearElement to null if there is more than one element selected since we don't want to show linear element handles\n\n          if (selectedELements.length > 1) {\n            this.setState({\n              selectedLinearElement: null\n            });\n          }\n        } else {\n          const linearElementEditor = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerUp(childEvent, this.state.selectedLinearElement, this.state);\n          const {\n            startBindingElement,\n            endBindingElement\n          } = linearElementEditor;\n          const element = this.scene.getElement(linearElementEditor.elementId);\n\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(element)) {\n            (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindLinearElement)(element, startBindingElement, endBindingElement);\n          }\n\n          if (linearElementEditor !== this.state.selectedLinearElement) {\n            this.setState({\n              selectedLinearElement: Object.assign(Object.assign({}, linearElementEditor), {\n                selectedPointsIndices: null\n              }),\n              suggestedBindings: []\n            });\n          }\n        }\n      }\n\n      this.missingPointerEventCleanupEmitter.clear();\n      window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, pointerDownState.eventListeners.onMove);\n      window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, pointerDownState.eventListeners.onUp);\n      window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, pointerDownState.eventListeners.onKeyDown);\n      window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, pointerDownState.eventListeners.onKeyUp);\n\n      if (this.state.pendingImageElementId) {\n        this.setState({\n          pendingImageElementId: null\n        });\n      }\n\n      this.onPointerUpEmitter.trigger(this.state.activeTool, pointerDownState, childEvent);\n\n      if ((draggingElement === null || draggingElement === void 0 ? void 0 : draggingElement.type) === \"freedraw\") {\n        const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(childEvent, this.state);\n        const points = draggingElement.points;\n        let dx = pointerCoords.x - draggingElement.x;\n        let dy = pointerCoords.y - draggingElement.y; // Allows dots to avoid being flagged as infinitely small\n\n        if (dx === points[0][0] && dy === points[0][1]) {\n          dy += 0.0001;\n          dx += 0.0001;\n        }\n\n        const pressures = draggingElement.simulatePressure ? [] : [...draggingElement.pressures, childEvent.pressure];\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n          points: [...points, [dx, dy]],\n          pressures,\n          lastCommittedPoint: [dx, dy]\n        });\n        this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n        return;\n      }\n\n      if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(draggingElement)) {\n        const imageElement = draggingElement;\n\n        try {\n          this.initializeImageDimensions(imageElement);\n          this.setState({\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n              [imageElement.id]: true\n            }, this.state)\n          }, () => {\n            this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n          });\n        } catch (error) {\n          console.error(error);\n          this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().filter(el => el.id !== imageElement.id));\n          this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n        }\n\n        return;\n      }\n\n      if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(draggingElement)) {\n        if (draggingElement.points.length > 1) {\n          this.history.resumeRecording();\n        }\n\n        const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(childEvent, this.state);\n\n        if (!pointerDownState.drag.hasOccurred && draggingElement && !multiElement) {\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n            points: [...draggingElement.points, [pointerCoords.x - draggingElement.x, pointerCoords.y - draggingElement.y]]\n          });\n          this.setState({\n            multiElement: draggingElement,\n            editingElement: this.state.draggingElement\n          });\n        } else if (pointerDownState.drag.hasOccurred && !multiElement) {\n          if ((0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(draggingElement, false)) {\n            (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.maybeBindLinearElement)(draggingElement, this.state, this.scene, pointerCoords);\n          }\n\n          this.setState({\n            suggestedBindings: [],\n            startBoundElement: null\n          });\n\n          if (!activeTool.locked) {\n            (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.resetCursor)(this.interactiveCanvas);\n            this.setState(prevState => ({\n              draggingElement: null,\n              activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, {\n                type: \"selection\"\n              }),\n              selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n                [draggingElement.id]: true\n              }), prevState),\n              selectedLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(draggingElement, this.scene)\n            }));\n          } else {\n            this.setState(prevState => ({\n              draggingElement: null\n            }));\n          }\n        }\n\n        return;\n      }\n\n      if (activeTool.type !== \"selection\" && draggingElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isInvisiblySmallElement)(draggingElement)) {\n        // remove invisible element which was added in onPointerDown\n        this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().filter(el => el.id !== draggingElement.id));\n        this.setState({\n          draggingElement: null\n        });\n        return;\n      }\n\n      if (draggingElement) {\n        if (pointerDownState.drag.hasOccurred) {\n          const sceneCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(childEvent, this.state); // when editing the points of a linear element, we check if the\n          // linear element still is in the frame afterwards\n          // if not, the linear element will be removed from its frame (if any)\n\n          if (this.state.selectedLinearElement && this.state.selectedLinearElement.isDragging) {\n            const linearElement = this.scene.getElement(this.state.selectedLinearElement.elementId);\n\n            if (linearElement === null || linearElement === void 0 ? void 0 : linearElement.frameId) {\n              const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getContainingFrame)(linearElement);\n\n              if (frame && linearElement) {\n                if (!(0,_frame__WEBPACK_IMPORTED_MODULE_51__.elementOverlapsWithFrame)(linearElement, frame)) {\n                  // remove the linear element from all groups\n                  // before removing it from the frame as well\n                  (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(linearElement, {\n                    groupIds: []\n                  });\n                  this.scene.replaceAllElements((0,_frame__WEBPACK_IMPORTED_MODULE_51__.removeElementsFromFrame)(this.scene.getElementsIncludingDeleted(), [linearElement], this.state));\n                }\n              }\n            }\n          } else {\n            // update the relationships between selected elements and frames\n            const topLayerFrame = this.getTopLayerFrameAtSceneCoords(sceneCoords);\n            const selectedElements = this.scene.getSelectedElements(this.state);\n            let nextElements = this.scene.getElementsIncludingDeleted();\n\n            const updateGroupIdsAfterEditingGroup = elements => {\n              if (elements.length > 0) {\n                for (const element of elements) {\n                  const index = element.groupIds.indexOf(this.state.editingGroupId);\n                  (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n                    groupIds: element.groupIds.slice(0, index)\n                  }, false);\n                }\n\n                nextElements.forEach(element => {\n                  if (element.groupIds.length && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(nextElements, element.groupIds[element.groupIds.length - 1]).length < 2) {\n                    (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n                      groupIds: []\n                    }, false);\n                  }\n                });\n                this.setState({\n                  editingGroupId: null\n                });\n              }\n            };\n\n            if (topLayerFrame && !this.state.selectedElementIds[topLayerFrame.id]) {\n              const elementsToAdd = selectedElements.filter(element => element.frameId !== topLayerFrame.id && (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isElementInFrame)(element, nextElements, this.state));\n\n              if (this.state.editingGroupId) {\n                updateGroupIdsAfterEditingGroup(elementsToAdd);\n              }\n\n              nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.addElementsToFrame)(nextElements, elementsToAdd, topLayerFrame);\n            } else if (!topLayerFrame) {\n              if (this.state.editingGroupId) {\n                const elementsToRemove = selectedElements.filter(element => element.frameId && !(0,_frame__WEBPACK_IMPORTED_MODULE_51__.isElementInFrame)(element, nextElements, this.state));\n                updateGroupIdsAfterEditingGroup(elementsToRemove);\n              }\n            }\n\n            nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.updateFrameMembershipOfSelectedElements)(nextElements, this.state, this);\n            this.scene.replaceAllElements(nextElements);\n          }\n        }\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(draggingElement)) {\n          const elementsInsideFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInNewFrame)(this.scene.getElementsIncludingDeleted(), draggingElement);\n          this.scene.replaceAllElements((0,_frame__WEBPACK_IMPORTED_MODULE_51__.addElementsToFrame)(this.scene.getElementsIncludingDeleted(), elementsInsideFrame, draggingElement));\n        }\n\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getNormalizedDimensions)(draggingElement));\n      }\n\n      if (resizingElement) {\n        this.history.resumeRecording();\n      }\n\n      if (resizingElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isInvisiblySmallElement)(resizingElement)) {\n        this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().filter(el => el.id !== resizingElement.id));\n      } // handle frame membership for resizing frames and/or selected elements\n\n\n      if (pointerDownState.resize.isResizing) {\n        let nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.updateFrameMembershipOfSelectedElements)(this.scene.getElementsIncludingDeleted(), this.state, this);\n        const selectedFrames = this.scene.getSelectedElements(this.state).filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element));\n\n        for (const frame of selectedFrames) {\n          nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.replaceAllElementsInFrame)(nextElements, (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getElementsIncludingDeleted(), frame, this.state), frame, this.state);\n        }\n\n        this.scene.replaceAllElements(nextElements);\n      } // Code below handles selection when element(s) weren't\n      // drag or added to selection on pointer down phase.\n\n\n      const hitElement = pointerDownState.hit.element;\n\n      if (((_e = this.state.selectedLinearElement) === null || _e === void 0 ? void 0 : _e.elementId) !== (hitElement === null || hitElement === void 0 ? void 0 : hitElement.id) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(hitElement)) {\n        const selectedELements = this.scene.getSelectedElements(this.state); // set selectedLinearElement when no other element selected except\n        // the one we've hit\n\n        if (selectedELements.length === 1) {\n          this.setState({\n            selectedLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(hitElement, this.scene)\n          });\n        }\n      }\n\n      const pointerStart = this.lastPointerDownEvent;\n      const pointerEnd = this.lastPointerUpEvent || this.lastPointerMoveEvent;\n\n      if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state) && pointerStart && pointerEnd) {\n        const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerStart.clientX, pointerStart.clientY, pointerEnd.clientX, pointerEnd.clientY);\n\n        if (draggedDistance === 0) {\n          const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n            clientX: pointerEnd.clientX,\n            clientY: pointerEnd.clientY\n          }, this.state);\n          const hitElements = this.getElementsAtPosition(scenePointer.x, scenePointer.y);\n          hitElements.forEach(hitElement => pointerDownState.elementIdsToErase[hitElement.id] = {\n            erase: true,\n            opacity: hitElement.opacity\n          });\n        }\n\n        this.eraseElements(pointerDownState);\n        return;\n      } else if (Object.keys(pointerDownState.elementIdsToErase).length) {\n        this.restoreReadyToEraseElements(pointerDownState);\n      }\n\n      if (hitElement && !pointerDownState.drag.hasOccurred && !pointerDownState.hit.wasAddedToSelection && ( // if we're editing a line, pointerup shouldn't switch selection if\n      // box selected\n      !this.state.editingLinearElement || !pointerDownState.boxSelection.hasOccurred)) {\n        // when inside line editor, shift selects points instead\n        if (childEvent.shiftKey && !this.state.editingLinearElement) {\n          if (this.state.selectedElementIds[hitElement.id]) {\n            if ((0,_groups__WEBPACK_IMPORTED_MODULE_23__.isSelectedViaGroup)(this.state, hitElement)) {\n              this.setState(_prevState => {\n                const nextSelectedElementIds = Object.assign({}, _prevState.selectedElementIds); // We want to unselect all groups hitElement is part of\n                // as well as all elements that are part of the groups\n                // hitElement is part of\n\n                for (const groupedElement of hitElement.groupIds.flatMap(groupId => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), groupId))) {\n                  delete nextSelectedElementIds[groupedElement.id];\n                }\n\n                return {\n                  selectedGroupIds: Object.assign(Object.assign({}, _prevState.selectedElementIds), hitElement.groupIds.map(gId => ({\n                    [gId]: false\n                  })).reduce((prev, acc) => Object.assign(Object.assign({}, prev), acc), {})),\n                  selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedElementIds, _prevState)\n                };\n              }); // if not dragging a linear element point (outside editor)\n            } else if (!((_f = this.state.selectedLinearElement) === null || _f === void 0 ? void 0 : _f.isDragging)) {\n              // remove element from selection while\n              // keeping prev elements selected\n              this.setState(prevState => {\n                const newSelectedElementIds = Object.assign({}, prevState.selectedElementIds);\n                delete newSelectedElementIds[hitElement.id];\n                const newSelectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getSelectedElements)(this.scene.getNonDeletedElements(), {\n                  selectedElementIds: newSelectedElementIds\n                });\n                return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n                  editingGroupId: prevState.editingGroupId,\n                  selectedElementIds: newSelectedElementIds\n                }, this.scene.getNonDeletedElements(), prevState, this)), {\n                  // set selectedLinearElement only if thats the only element selected\n                  selectedLinearElement: newSelectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(newSelectedElements[0]) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(newSelectedElements[0], this.scene) : prevState.selectedLinearElement\n                });\n              });\n            }\n          } else if (hitElement.frameId && this.state.selectedElementIds[hitElement.frameId]) {\n            // when hitElement is part of a selected frame, deselect the frame\n            // to avoid frame and containing elements selected simultaneously\n            this.setState(prevState => {\n              var _a, _b;\n\n              const nextSelectedElementIds = Object.assign(Object.assign({}, prevState.selectedElementIds), {\n                [hitElement.id]: true\n              }); // deselect the frame\n\n              delete nextSelectedElementIds[hitElement.frameId]; // deselect groups containing the frame\n\n              ((_b = (_a = this.scene.getElement(hitElement.frameId)) === null || _a === void 0 ? void 0 : _a.groupIds) !== null && _b !== void 0 ? _b : []).flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).forEach(element => {\n                delete nextSelectedElementIds[element.id];\n              });\n              return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n                editingGroupId: prevState.editingGroupId,\n                selectedElementIds: nextSelectedElementIds\n              }, this.scene.getNonDeletedElements(), prevState, this)), {\n                showHyperlinkPopup: hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) ? \"info\" : false\n              });\n            });\n          } else {\n            // add element to selection while keeping prev elements selected\n            this.setState(_prevState => ({\n              selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, _prevState.selectedElementIds), {\n                [hitElement.id]: true\n              }), _prevState)\n            }));\n          }\n        } else {\n          this.setState(prevState => {\n            var _a;\n\n            return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n              editingGroupId: prevState.editingGroupId,\n              selectedElementIds: {\n                [hitElement.id]: true\n              }\n            }, this.scene.getNonDeletedElements(), prevState, this)), {\n              selectedLinearElement: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(hitElement) && // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.\n              // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized\n              ((_a = prevState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) !== hitElement.id ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(hitElement, this.scene) : prevState.selectedLinearElement\n            });\n          });\n        }\n      }\n\n      if (!pointerDownState.drag.hasOccurred && !this.state.isResizing && (hitElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isHittingElementBoundingBoxWithoutHittingElement)(hitElement, this.state, this.frameNameBoundsCache, pointerDownState.origin.x, pointerDownState.origin.y) || !hitElement && pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements)) {\n        if (this.state.editingLinearElement) {\n          this.setState({\n            editingLinearElement: null\n          });\n        } else {\n          // Deselect selected elements\n          this.setState({\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n            selectedGroupIds: {},\n            editingGroupId: null,\n            activeEmbeddable: null\n          });\n        }\n\n        return;\n      }\n\n      if (!activeTool.locked && activeTool.type !== \"freedraw\" && draggingElement && draggingElement.type !== \"selection\") {\n        this.setState(prevState => ({\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n            [draggingElement.id]: true\n          }), prevState),\n          showHyperlinkPopup: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(draggingElement) && !draggingElement.link ? \"editor\" : prevState.showHyperlinkPopup\n        }));\n      }\n\n      if (activeTool.type !== \"selection\" || (0,_scene__WEBPACK_IMPORTED_MODULE_29__.isSomeElementSelected)(this.scene.getNonDeletedElements(), this.state)) {\n        this.history.resumeRecording();\n      }\n\n      if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {\n        ((0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) ? _element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindSelectedElements : _element_binding__WEBPACK_IMPORTED_MODULE_17__.unbindLinearElements)(this.scene.getSelectedElements(this.state));\n      }\n\n      if (activeTool.type === \"laser\") {\n        this.laserPathManager.endPath();\n        return;\n      }\n\n      if (!activeTool.locked && activeTool.type !== \"freedraw\") {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_70__.resetCursor)(this.interactiveCanvas);\n        this.setState({\n          draggingElement: null,\n          suggestedBindings: [],\n          activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, {\n            type: \"selection\"\n          })\n        });\n      } else {\n        this.setState({\n          draggingElement: null,\n          suggestedBindings: []\n        });\n      }\n\n      if (hitElement && this.lastPointerUpEvent && this.lastPointerDownEvent && this.lastPointerUpEvent.timeStamp - this.lastPointerDownEvent.timeStamp < 300 && gesture.pointers.size <= 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, this.lastPointerUpEvent, pointerDownState.origin.x, pointerDownState.origin.y)) {\n        this.handleEmbeddableCenterClick(hitElement);\n      }\n    });\n  }\n\n  maybeSuggestBindingForAll(selectedElements) {\n    if (selectedElements.length > 50) {\n      return;\n    }\n\n    const suggestedBindings = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getEligibleElementsForBinding)(selectedElements);\n    this.setState({\n      suggestedBindings\n    });\n  }\n\n  setSelection(elements) {\n    const selectedElementIds = {};\n    const selectedGroupIds = {};\n    elements.forEach(ele => {\n      if (ele.groupIds.length) {\n        selectedElementIds[ele.id] = true;\n        ele.groupIds.forEach(id => {\n          selectedGroupIds[id] = true;\n        });\n      } // exclude bound text elements as we don't mark them as selected when\n      // container is selected unless in group\n      else if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele)) {\n        selectedElementIds[ele.id] = true;\n      }\n    });\n    this.setState({\n      previousSelectedElementIds: this.state.selectedElementIds,\n      selectedElementIds,\n      selectedGroupIds\n    });\n  }\n\n  clearSelection(hitElement) {\n    this.setState(prevState => ({\n      selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, prevState),\n      activeEmbeddable: null,\n      selectedGroupIds: {},\n      // Continue editing the same group if the user selected a different\n      // element from it\n      editingGroupId: prevState.editingGroupId && hitElement != null && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.isElementInGroup)(hitElement, prevState.editingGroupId) ? prevState.editingGroupId : null\n    }));\n    this.setState({\n      selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n      activeEmbeddable: null,\n      previousSelectedElementIds: this.state.selectedElementIds\n    });\n  }\n\n  getTextWysiwygSnappedToCenterPosition(x, y, appState, container) {\n    if (container) {\n      let elementCenterX = container.x + container.width / 2;\n      let elementCenterY = container.y + container.height / 2;\n      const elementCenter = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getContainerCenter)(container, appState);\n\n      if (elementCenter) {\n        elementCenterX = elementCenter.x;\n        elementCenterY = elementCenter.y;\n      }\n\n      const distanceToCenter = Math.hypot(x - elementCenterX, y - elementCenterY);\n      const isSnappedToCenter = distanceToCenter < _constants__WEBPACK_IMPORTED_MODULE_12__.TEXT_TO_CENTER_SNAP_THRESHOLD;\n\n      if (isSnappedToCenter) {\n        const {\n          x: viewportX,\n          y: viewportY\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.sceneCoordsToViewportCoords)({\n          sceneX: elementCenterX,\n          sceneY: elementCenterY\n        }, appState);\n        return {\n          viewportX,\n          viewportY,\n          elementCenterX,\n          elementCenterY\n        };\n      }\n    }\n  }\n\n  getCanvasOffsets() {\n    var _a;\n\n    if ((_a = this.excalidrawContainerRef) === null || _a === void 0 ? void 0 : _a.current) {\n      const excalidrawContainer = this.excalidrawContainerRef.current;\n      const {\n        left,\n        top\n      } = excalidrawContainer.getBoundingClientRect();\n      return {\n        offsetLeft: left,\n        offsetTop: top\n      };\n    }\n\n    return {\n      offsetLeft: 0,\n      offsetTop: 0\n    };\n  }\n\n  async updateLanguage() {\n    const currentLang = _i18n__WEBPACK_IMPORTED_MODULE_25__.languages.find(lang => lang.code === this.props.langCode) || _i18n__WEBPACK_IMPORTED_MODULE_25__.defaultLang;\n    await (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.setLanguage)(currentLang);\n    this.setAppState({});\n  }\n\n}\n\nif (\"development\" === _constants__WEBPACK_IMPORTED_MODULE_12__.ENV.TEST || \"development\" !== \"production\") {\n  window.h = window.h || {};\n  Object.defineProperties(window.h, {\n    elements: {\n      configurable: true,\n\n      get() {\n        var _a;\n\n        return (_a = this.app) === null || _a === void 0 ? void 0 : _a.scene.getElementsIncludingDeleted();\n      },\n\n      set(elements) {\n        var _a;\n\n        return (_a = this.app) === null || _a === void 0 ? void 0 : _a.scene.replaceAllElements(elements);\n      }\n\n    }\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (App);\n\n//# sourceURL=webpack://ExcalidrawLib/./components/App.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ExcalidrawContainerContext\": () => (/* binding */ ExcalidrawContainerContext),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   \"hostPlugin\": () => (/* binding */ hostPlugin),\n/* harmony export */   \"showFourthFont\": () => (/* binding */ showFourthFont),\n/* harmony export */   \"useApp\": () => (/* binding */ useApp),\n/* harmony export */   \"useAppProps\": () => (/* binding */ useAppProps),\n/* harmony export */   \"useDevice\": () => (/* binding */ useDevice),\n/* harmony export */   \"useExcalidrawActionManager\": () => (/* binding */ useExcalidrawActionManager),\n/* harmony export */   \"useExcalidrawAppState\": () => (/* binding */ useExcalidrawAppState),\n/* harmony export */   \"useExcalidrawContainer\": () => (/* binding */ useExcalidrawContainer),\n/* harmony export */   \"useExcalidrawElements\": () => (/* binding */ useExcalidrawElements),\n/* harmony export */   \"useExcalidrawSetAppState\": () => (/* binding */ useExcalidrawSetAppState)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! roughjs/bin/rough */ \"../../node_modules/roughjs/bin/rough.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var nanoid__WEBPACK_IMPORTED_MODULE_86__ = __webpack_require__(/*! nanoid */ \"./node_modules/nanoid/index.browser.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../actions */ \"./actions/index.ts\");\n/* harmony import */ var _actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../actions/actionHistory */ \"./actions/actionHistory.tsx\");\n/* harmony import */ var _actions_manager__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../actions/manager */ \"./actions/manager.tsx\");\n/* harmony import */ var _actions_register__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../actions/register */ \"./actions/register.ts\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _clipboard__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../clipboard */ \"./clipboard.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _data__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../data */ \"./data/index.ts\");\n/* harmony import */ var _data_library__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../data/library */ \"./data/library.ts\");\n/* harmony import */ var _data_restore__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../data/restore */ \"./data/restore.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _element_newElement__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../element/newElement */ \"./element/newElement.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _gesture__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../gesture */ \"./gesture.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../groups */ \"./groups.ts\");\n/* harmony import */ var _history__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../history */ \"./history.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../element/sizeHelpers */ \"./element/sizeHelpers.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _scene_zoom__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ../scene/zoom */ \"./scene/zoom.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ../element/embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _ContextMenu__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ./ContextMenu */ \"./components/ContextMenu.tsx\");\n/* harmony import */ var _LayerUI__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ./LayerUI */ \"./components/LayerUI.tsx\");\n/* harmony import */ var _Toast__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./Toast */ \"./components/Toast.tsx\");\n/* harmony import */ var _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ../actions/actionToggleViewMode */ \"./actions/actionToggleViewMode.tsx\");\n/* harmony import */ var _data_blob__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ../data/blob */ \"./data/blob.ts\");\n/* harmony import */ var _element_image__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../element/image */ \"./element/image.ts\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! lodash.throttle */ \"../../node_modules/lodash.throttle/index.js\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_41___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_41__);\n/* harmony import */ var _data_filesystem__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ../data/filesystem */ \"./data/filesystem.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _element_collision__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../element/collision */ \"./element/collision.ts\");\n/* harmony import */ var _element_resizeElements__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../element/resizeElements */ \"./element/resizeElements.ts\");\n/* harmony import */ var _element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ../element/Hyperlink */ \"./element/Hyperlink.tsx\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ../data/url */ \"./data/url.ts\");\n/* harmony import */ var _element_transformHandles__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ../element/transformHandles */ \"./element/transformHandles.ts\");\n/* harmony import */ var _actions_actionElementLock__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! ../actions/actionElementLock */ \"./actions/actionElementLock.ts\");\n/* harmony import */ var _scene_Fonts__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! ../scene/Fonts */ \"./scene/Fonts.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _scene_selection__WEBPACK_IMPORTED_MODULE_52__ = __webpack_require__(/*! ../scene/selection */ \"./scene/selection.ts\");\n/* harmony import */ var _actions_actionClipboard__WEBPACK_IMPORTED_MODULE_53__ = __webpack_require__(/*! ../actions/actionClipboard */ \"./actions/actionClipboard.tsx\");\n/* harmony import */ var _actions_actionFrame__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ../actions/actionFrame */ \"./actions/actionFrame.ts\");\n/* harmony import */ var _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../actions/actionCanvas */ \"./actions/actionCanvas.tsx\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ../jotai */ \"./jotai.ts\");\n/* harmony import */ var _ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ./ActiveConfirmDialog */ \"./components/ActiveConfirmDialog.tsx\");\n/* harmony import */ var _errors__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ../errors */ \"./errors.ts\");\n/* harmony import */ var _snapping__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__(/*! ../snapping */ \"./snapping.ts\");\n/* harmony import */ var _actions_actionBoundText__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__(/*! ../actions/actionBoundText */ \"./actions/actionBoundText.tsx\");\n/* harmony import */ var _BraveMeasureTextError__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__(/*! ./BraveMeasureTextError */ \"./components/BraveMeasureTextError.tsx\");\n/* harmony import */ var _EyeDropper__WEBPACK_IMPORTED_MODULE_62__ = __webpack_require__(/*! ./EyeDropper */ \"./components/EyeDropper.tsx\");\n/* harmony import */ var _data_transform__WEBPACK_IMPORTED_MODULE_63__ = __webpack_require__(/*! ../data/transform */ \"./data/transform.ts\");\n/* harmony import */ var _Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_64__ = __webpack_require__(/*! ./Sidebar/Sidebar */ \"./components/Sidebar/Sidebar.tsx\");\n/* harmony import */ var _canvases__WEBPACK_IMPORTED_MODULE_65__ = __webpack_require__(/*! ./canvases */ \"./components/canvases/index.tsx\");\n/* harmony import */ var _scene_Renderer__WEBPACK_IMPORTED_MODULE_66__ = __webpack_require__(/*! ../scene/Renderer */ \"./scene/Renderer.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _SVGLayer__WEBPACK_IMPORTED_MODULE_68__ = __webpack_require__(/*! ./SVGLayer */ \"./components/SVGLayer.tsx\");\n/* harmony import */ var _cursor__WEBPACK_IMPORTED_MODULE_69__ = __webpack_require__(/*! ../cursor */ \"./cursor.ts\");\n/* harmony import */ var _emitter__WEBPACK_IMPORTED_MODULE_70__ = __webpack_require__(/*! ../emitter */ \"./emitter.ts\");\n/* harmony import */ var _element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ../element/ElementCanvasButtons */ \"./element/ElementCanvasButtons.tsx\");\n/* harmony import */ var _data_magic__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ../data/magic */ \"./data/magic.ts\");\n/* harmony import */ var _utils_export__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ../../utils/export */ \"../utils/export.ts\");\n/* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../colors */ \"./colors.ts\");\n/* harmony import */ var _MagicButton__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ./MagicButton */ \"./components/MagicButton.tsx\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _data_EditorLocalStorage__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../data/EditorLocalStorage */ \"./data/EditorLocalStorage.ts\");\n/* harmony import */ var _FollowMode_FollowMode__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ./FollowMode/FollowMode */ \"./components/FollowMode/FollowMode.tsx\");\n/* harmony import */ var _actions_actionProperties__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../actions/actionProperties */ \"./actions/actionProperties.tsx\");\n/* harmony import */ var _animation_frame_handler__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../animation-frame-handler */ \"./animation-frame-handler.ts\");\n/* harmony import */ var _animated_trail__WEBPACK_IMPORTED_MODULE_81__ = __webpack_require__(/*! ../animated-trail */ \"./animated-trail.ts\");\n/* harmony import */ var _laser_trails__WEBPACK_IMPORTED_MODULE_82__ = __webpack_require__(/*! ../laser-trails */ \"./laser-trails.ts\");\n/* harmony import */ var _reactUtils__WEBPACK_IMPORTED_MODULE_83__ = __webpack_require__(/*! ../reactUtils */ \"./reactUtils.ts\");\n/* harmony import */ var _renderer_renderElement__WEBPACK_IMPORTED_MODULE_84__ = __webpack_require__(/*! ../renderer/renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _obsidianUtils__WEBPACK_IMPORTED_MODULE_85__ = __webpack_require__(/*! ../obsidianUtils */ \"./obsidianUtils.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst AppContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(null);\nconst AppPropsContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(null);\nlet showFourthFont = false; //zsviczian\n\nconst deviceContextInitialValue = {\n  viewport: {\n    isMobile: false,\n    isLandscape: false\n  },\n  editor: {\n    isMobile: false,\n    canFitSidebar: false\n  },\n  isTouchScreen: false\n};\nconst DeviceContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(deviceContextInitialValue);\nDeviceContext.displayName = \"DeviceContext\";\nconst ExcalidrawContainerContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext({\n  container: null,\n  id: null\n});\nExcalidrawContainerContext.displayName = \"ExcalidrawContainerContext\";\nconst ExcalidrawElementsContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext([]);\nExcalidrawElementsContext.displayName = \"ExcalidrawElementsContext\";\nconst ExcalidrawAppStateContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(Object.assign(Object.assign({}, (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)()), {\n  width: 0,\n  height: 0,\n  offsetLeft: 0,\n  offsetTop: 0\n}));\nExcalidrawAppStateContext.displayName = \"ExcalidrawAppStateContext\";\nconst ExcalidrawSetAppStateContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(() => {\n  console.warn(\"Uninitialized ExcalidrawSetAppStateContext context!\");\n});\nExcalidrawSetAppStateContext.displayName = \"ExcalidrawSetAppStateContext\";\nconst ExcalidrawActionManagerContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(null);\nExcalidrawActionManagerContext.displayName = \"ExcalidrawActionManagerContext\";\nconst useApp = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(AppContext);\nconst useAppProps = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(AppPropsContext);\nconst useDevice = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(DeviceContext);\nconst useExcalidrawContainer = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawContainerContext);\nconst useExcalidrawElements = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawElementsContext);\nconst useExcalidrawAppState = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawAppStateContext);\nconst useExcalidrawSetAppState = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawSetAppStateContext);\nconst useExcalidrawActionManager = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawActionManagerContext);\nconst supportsResizeObserver = typeof window !== \"undefined\" && \"ResizeObserver\" in window;\nlet didTapTwice = false;\nlet tappedTwiceTimer = 0;\nlet isHoldingSpace = false;\nlet isPanning = false;\nlet isDraggingScrollBar = false;\nlet currentScrollBars = {\n  horizontal: null,\n  vertical: null\n};\nlet touchTimeout = 0;\nlet invalidateContextMenu = false;\nlet hostPlugin; //zsviczian\n\n/**\r\n * Map of youtube embed video states\r\n */\n\nconst YOUTUBE_VIDEO_STATES = new Map();\nlet IS_PLAIN_PASTE = false;\nlet IS_PLAIN_PASTE_TIMER = 0;\nlet PLAIN_PASTE_TOAST_SHOWN = false;\nlet lastPointerUp = null;\nconst gesture = {\n  pointers: new Map(),\n  lastCenter: null,\n  initialDistance: null,\n  initialScale: null\n};\n\nclass App extends (react__WEBPACK_IMPORTED_MODULE_1___default().Component) {\n  constructor(props) {\n    super(props);\n    this.interactiveCanvas = null;\n    this.unmounted = false;\n    this.device = deviceContextInitialValue;\n    this.excalidrawContainerRef = react__WEBPACK_IMPORTED_MODULE_1___default().createRef();\n    this.files = {};\n    this.imageCache = new Map();\n    this.iFrameRefs = new Map();\n    /**\r\n     * Indicates whether the embeddable's url has been validated for rendering.\r\n     * If value not set, indicates that the validation is pending.\r\n     * Initially or on url change the flag is not reset so that we can guarantee\r\n     * the validation came from a trusted source (the editor).\r\n     **/\n\n    this.embedsValidationStatus = new Map();\n    /** embeds that have been inserted to DOM (as a perf optim, we don't want to\r\n     * insert to DOM before user initially scrolls to them) */\n\n    this.initializedEmbeds = new Set();\n    this.elementsPendingErasure = new Set();\n    this.lastPointerDownEvent = null;\n    this.lastPointerUpEvent = null;\n    this.lastPointerMoveEvent = null;\n    this.lastViewportPosition = {\n      x: 0,\n      y: 0\n    };\n    this.allowMobileMode = true; //zsviczian\n\n    this.animationFrameHandler = new _animation_frame_handler__WEBPACK_IMPORTED_MODULE_80__.AnimationFrameHandler();\n    this.laserTrails = new _laser_trails__WEBPACK_IMPORTED_MODULE_82__.LaserTrails(this.animationFrameHandler, this);\n    this.eraserTrail = new _animated_trail__WEBPACK_IMPORTED_MODULE_81__.AnimatedTrail(this.animationFrameHandler, this, {\n      streamline: 0.2,\n      size: 5,\n      keepHead: true,\n      sizeMapping: c => {\n        const DECAY_TIME = 200;\n        const DECAY_LENGTH = 10;\n        const t = Math.max(0, 1 - (performance.now() - c.pressure) / DECAY_TIME);\n        const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;\n        return Math.min((0,_utils__WEBPACK_IMPORTED_MODULE_33__.easeOut)(l), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.easeOut)(t));\n      },\n      fill: () => this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.LIGHT ? \"rgba(0, 0, 0, 0.2)\" : \"rgba(255, 255, 255, 0.2)\"\n    });\n    this.onChangeEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n    this.onPointerDownEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n    this.onPointerUpEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n    this.onUserFollowEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n    this.onScrollChangeEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n    this.missingPointerEventCleanupEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n    this.onRemoveEventListenersEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n\n    this.updateEmbedValidationStatus = (element, status) => {\n      this.embedsValidationStatus.set(element.id, status);\n      _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element);\n    };\n\n    this.updateEmbeddables = () => {\n      const iframeLikes = new Set();\n      let updated = false;\n      this.scene.getNonDeletedElements().filter(element => {\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(element)) {\n          iframeLikes.add(element.id);\n\n          if (!this.embedsValidationStatus.has(element.id)) {\n            updated = true;\n            const validated = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.embeddableURLValidator)(element.link, this.props.validateEmbeddable);\n            this.updateEmbedValidationStatus(element, validated);\n          }\n        } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(element)) {\n          iframeLikes.add(element.id);\n        }\n\n        return false;\n      });\n\n      if (updated) {\n        this.scene.informMutation();\n      } // GC\n\n\n      this.iFrameRefs.forEach((ref, id) => {\n        if (!iframeLikes.has(id)) {\n          this.iFrameRefs.delete(id);\n        }\n      });\n    };\n\n    this.getFrameNameDOMId = frameElement => {\n      return `${this.id}-frame-name-${frameElement.id}`;\n    };\n\n    this.frameNameBoundsCache = {\n      get: frameElement => {\n        let bounds = this.frameNameBoundsCache._cache.get(frameElement.id);\n\n        if (!bounds || bounds.zoom !== this.state.zoom.value || bounds.versionNonce !== frameElement.versionNonce) {\n          const frameNameDiv = document.getElementById(this.getFrameNameDOMId(frameElement));\n\n          if (frameNameDiv) {\n            const box = frameNameDiv.getBoundingClientRect();\n            const boxSceneTopLeft = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n              clientX: box.x,\n              clientY: box.y\n            }, this.state);\n            const boxSceneBottomRight = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n              clientX: box.right,\n              clientY: box.bottom\n            }, this.state);\n            bounds = {\n              x: boxSceneTopLeft.x,\n              y: boxSceneTopLeft.y,\n              width: boxSceneBottomRight.x - boxSceneTopLeft.x,\n              height: boxSceneBottomRight.y - boxSceneTopLeft.y,\n              angle: 0,\n              zoom: this.state.zoom.value,\n              versionNonce: frameElement.versionNonce\n            };\n\n            this.frameNameBoundsCache._cache.set(frameElement.id, bounds);\n\n            return bounds;\n          }\n\n          return null;\n        }\n\n        return bounds;\n      },\n\n      /**\r\n       * @private\r\n       */\n      _cache: new Map()\n    };\n\n    this.renderFrameNames = () => {\n      if (!this.state.frameRendering.enabled || !this.state.frameRendering.name) {\n        return null;\n      }\n\n      const isDarkTheme = this.state.theme === \"dark\";\n      let frameIndex = 0;\n      let magicFrameIndex = 0;\n      return this.scene.getNonDeletedFramesLikes().map(f => {\n        var _a, _b;\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameElement)(f)) {\n          frameIndex++;\n        } else {\n          magicFrameIndex++;\n        }\n\n        if (!(0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementInViewport)(f, this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {\n          offsetLeft: this.state.offsetLeft,\n          offsetTop: this.state.offsetTop,\n          scrollX: this.state.scrollX,\n          scrollY: this.state.scrollY,\n          zoom: this.state.zoom\n        })) {\n          // if frame not visible, don't render its name\n          return null;\n        }\n\n        const {\n          x: x1,\n          y: y1\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.sceneCoordsToViewportCoords)({\n          sceneX: f.x,\n          sceneY: f.y\n        }, this.state);\n        const FRAME_NAME_EDIT_PADDING = 6;\n\n        const reset = () => {\n          var _a;\n\n          if (((_a = f.name) === null || _a === void 0 ? void 0 : _a.trim()) === \"\") {\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(f, {\n              name: null\n            });\n          }\n\n          this.setState({\n            editingFrame: null\n          });\n        };\n\n        let frameNameJSX;\n        const frameName = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameLikeTitle)(f, (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameElement)(f) ? frameIndex : magicFrameIndex);\n\n        if (f.id === this.state.editingFrame) {\n          const frameNameInEdit = frameName;\n          frameNameJSX = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", {\n            autoFocus: true,\n            value: frameNameInEdit,\n            onChange: e => {\n              (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(f, {\n                name: e.target.value\n              });\n            },\n            onBlur: () => reset(),\n            onKeyDown: event => {\n              // for some inexplicable reason, `onBlur` triggered on ESC\n              // does not reset `state.editingFrame` despite being called,\n              // and we need to reset it here as well\n              if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ESCAPE || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ENTER) {\n                reset();\n              }\n            },\n            style: {\n              background: this.state.viewBackgroundColor,\n              filter: isDarkTheme ? _constants__WEBPACK_IMPORTED_MODULE_12__.THEME_FILTER : \"none\",\n              zIndex: 2,\n              border: \"none\",\n              display: \"block\",\n              padding: `${FRAME_NAME_EDIT_PADDING}px`,\n              borderRadius: 4,\n              boxShadow: \"inset 0 0 0 2px var(--color-on-primary-container)\",\n              fontFamily: \"Assistant\",\n              fontSize: \"14px\",\n              transform: `translate(-${FRAME_NAME_EDIT_PADDING}px, ${FRAME_NAME_EDIT_PADDING}px)`,\n              color: \"var(--color-gray-80)\",\n              overflow: \"hidden\",\n              maxWidth: `${document.body.clientWidth - x1 - FRAME_NAME_EDIT_PADDING}px`\n            },\n            size: frameNameInEdit.length + 1 || 1,\n            dir: \"auto\",\n            autoComplete: \"off\",\n            autoCapitalize: \"off\",\n            autoCorrect: \"off\"\n          });\n        } else {\n          frameNameJSX = frameName;\n        }\n\n        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n          id: this.getFrameNameDOMId(f),\n          style: {\n            position: \"absolute\",\n            // Positioning from bottom so that we don't to either\n            // calculate text height or adjust using transform (which)\n            // messes up input position when editing the frame name.\n            // This makes the positioning deterministic and we can calculate\n            // the same position when rendering to canvas / svg.\n            bottom: `${this.state.height + _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameOffsetY - y1 + this.state.offsetTop}px`,\n            left: `${x1 - this.state.offsetLeft}px`,\n            zIndex: 2,\n            fontSize: _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameFontSize,\n            color: (_b = (_a = this.state.frameColor) === null || _a === void 0 ? void 0 : _a.nameColor) !== null && _b !== void 0 ? _b : isDarkTheme //zsviczian\n            ? _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameColorDarkTheme : _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameColorLightTheme,\n            lineHeight: _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameLineHeight,\n            width: \"max-content\",\n            maxWidth: `${f.width}px`,\n            overflow: f.id === this.state.editingFrame ? \"visible\" : \"hidden\",\n            whiteSpace: \"nowrap\",\n            textOverflow: \"ellipsis\",\n            cursor: _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE,\n            pointerEvents: this.state.viewModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled\n          },\n          onPointerDown: event => this.handleCanvasPointerDown(event),\n          onWheel: event => this.handleWheel(event),\n          onContextMenu: this.handleCanvasContextMenu,\n          onDoubleClick: () => {\n            this.setState({\n              editingFrame: f.id\n            });\n          }\n        }, {\n          children: frameNameJSX\n        }), f.id);\n      });\n    };\n\n    this.focusContainer = () => {\n      var _a;\n\n      (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n    };\n\n    this.getSceneElementsIncludingDeleted = () => {\n      return this.scene.getElementsIncludingDeleted();\n    };\n\n    this.getSceneElements = () => {\n      return this.scene.getNonDeletedElements();\n    };\n\n    this.onInsertElements = elements => {\n      this.addElementsFromPasteOrLibrary({\n        elements,\n        position: \"center\",\n        files: null\n      });\n    };\n\n    this.onExportImage = async (type, elements, opts) => {\n      (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"export\", type, \"ui\");\n      const fileHandle = await (0,_data__WEBPACK_IMPORTED_MODULE_13__.exportCanvas)(type, elements, this.state, this.files, {\n        exportBackground: this.state.exportBackground,\n        name: this.state.name,\n        viewBackgroundColor: this.state.viewBackgroundColor,\n        exportingFrame: opts.exportingFrame\n      }).catch(_utils__WEBPACK_IMPORTED_MODULE_33__.muteFSAbortError).catch(error => {\n        console.error(error);\n        this.setState({\n          errorMessage: error.message\n        });\n      });\n\n      if (this.state.exportEmbedScene && fileHandle && (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.isImageFileHandle)(fileHandle)) {\n        this.setState({\n          fileHandle\n        });\n      }\n    };\n\n    this.magicGenerations = new Map();\n\n    this.updateMagicGeneration = ({\n      frameElement,\n      data\n    }) => {\n      if (data.status === \"pending\") {\n        // We don't wanna persist pending state to storage. It should be in-app\n        // state only.\n        // Thus reset so that we prefer local cache (if there was some\n        // generationData set previously)\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(frameElement, {\n          customData: {\n            generationData: undefined\n          }\n        }, false);\n      } else {\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(frameElement, {\n          customData: {\n            generationData: data\n          }\n        }, false);\n      }\n\n      this.magicGenerations.set(frameElement.id, data);\n      this.onSceneUpdated();\n    };\n\n    this.OPENAI_KEY_IS_PERSISTED = _data_EditorLocalStorage__WEBPACK_IMPORTED_MODULE_77__.EditorLocalStorage.has(_constants__WEBPACK_IMPORTED_MODULE_12__.EDITOR_LS_KEYS.OAI_API_KEY) || false;\n\n    this.onOpenAIKeyChange = (openAIKey, shouldPersist) => {\n      this.OPENAI_KEY = openAIKey || null;\n\n      if (shouldPersist) {\n        const didPersist = _data_EditorLocalStorage__WEBPACK_IMPORTED_MODULE_77__.EditorLocalStorage.set(_constants__WEBPACK_IMPORTED_MODULE_12__.EDITOR_LS_KEYS.OAI_API_KEY, openAIKey);\n        this.OPENAI_KEY_IS_PERSISTED = didPersist;\n      } else {\n        this.OPENAI_KEY_IS_PERSISTED = false;\n      }\n    };\n\n    this.onMagicSettingsConfirm = (apiKey, shouldPersist, source) => {\n      this.OPENAI_KEY = apiKey || null;\n      this.onOpenAIKeyChange(this.OPENAI_KEY, shouldPersist);\n\n      if (source === \"settings\") {\n        return;\n      }\n\n      const selectedElements = this.scene.getSelectedElements({\n        selectedElementIds: this.state.selectedElementIds\n      });\n\n      if (apiKey) {\n        if (selectedElements.length) {\n          this.onMagicframeToolSelect();\n        } else {\n          this.setActiveTool({\n            type: \"magicframe\"\n          });\n        }\n      } else if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(selectedElements[0])) {\n        // even if user didn't end up setting api key, let's pick the tool\n        // so they can draw up a frame and move forward\n        this.setActiveTool({\n          type: \"magicframe\"\n        });\n      }\n    };\n\n    this.onMagicframeToolSelect = () => {\n      if (!this.OPENAI_KEY) {\n        this.setToast({\n          message: \"You must first configure your OpenAI API key in plugin settings\",\n          duration: 5000\n        });\n        return;\n      }\n\n      const selectedElements = this.scene.getSelectedElements({\n        selectedElementIds: this.state.selectedElementIds\n      });\n\n      if (selectedElements.length === 0) {\n        this.setActiveTool({\n          type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe\n        });\n        (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"tool-select (empty-selection)\", \"d2c\");\n      } else {\n        const selectedMagicFrame = selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(selectedElements[0]) && selectedElements[0]; // case: user selected elements containing frame-like(s) or are frame\n        // members, we don't want to wrap into another magicframe\n        // (unless the only selected element is a magic frame which we reuse)\n\n        if (!selectedMagicFrame && selectedElements.some(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(el) || el.frameId)) {\n          this.setActiveTool({\n            type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe\n          });\n          return;\n        }\n\n        (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"tool-select (existing selection)\", \"d2c\");\n        let frame;\n\n        if (selectedMagicFrame) {\n          // a single magicframe already selected -> use it\n          frame = selectedMagicFrame;\n        } else {\n          // selected elements aren't wrapped in magic frame yet -> wrap now\n          const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n          const padding = 50;\n          frame = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newMagicFrameElement)(Object.assign(Object.assign({}, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE), {\n            x: minX - padding,\n            y: minY - padding,\n            width: maxX - minX + padding * 2,\n            height: maxY - minY + padding * 2,\n            opacity: 100,\n            locked: false\n          }));\n          this.scene.addNewElement(frame);\n\n          for (const child of selectedElements) {\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(child, {\n              frameId: frame.id\n            });\n          }\n\n          this.setState({\n            selectedElementIds: {\n              [frame.id]: true\n            }\n          });\n        }\n\n        this.onMagicFrameGenerate(frame, \"upstream\");\n      }\n    };\n\n    this.openEyeDropper = ({\n      type\n    }) => {\n      _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.set(_EyeDropper__WEBPACK_IMPORTED_MODULE_62__.activeEyeDropperAtom, {\n        swapPreviewOnAlt: true,\n        colorPickerType: type === \"stroke\" ? \"elementStroke\" : \"elementBackground\",\n        onSelect: (color, event) => {\n          const shouldUpdateStrokeColor = type === \"background\" && event.altKey || type === \"stroke\" && !event.altKey;\n          const selectedElements = this.scene.getSelectedElements(this.state);\n\n          if (!selectedElements.length || this.state.activeTool.type !== \"selection\") {\n            if (shouldUpdateStrokeColor) {\n              this.syncActionResult({\n                appState: Object.assign(Object.assign({}, this.state), {\n                  currentItemStrokeColor: color\n                }),\n                commitToHistory: true\n              });\n            } else {\n              this.syncActionResult({\n                appState: Object.assign(Object.assign({}, this.state), {\n                  currentItemBackgroundColor: color\n                }),\n                commitToHistory: true\n              });\n            }\n          } else {\n            this.updateScene({\n              elements: this.scene.getElementsIncludingDeleted().map(el => {\n                if (this.state.selectedElementIds[el.id]) {\n                  return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(el, {\n                    [shouldUpdateStrokeColor ? \"strokeColor\" : \"backgroundColor\"]: color\n                  });\n                }\n\n                return el;\n              })\n            });\n          }\n        },\n        keepOpenOnAlt: false\n      });\n    };\n\n    this.syncActionResult = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(actionResult => {\n      var _a, _b, _c, _d, _e, _f, _g, _h, _j;\n\n      if (this.unmounted || actionResult === false) {\n        return;\n      }\n\n      let editingElement = null;\n\n      if (actionResult.elements) {\n        actionResult.elements.forEach(element => {\n          var _a;\n\n          if (((_a = this.state.editingElement) === null || _a === void 0 ? void 0 : _a.id) === element.id && this.state.editingElement !== element && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isNonDeletedElement)(element)) {\n            editingElement = element;\n          }\n        });\n        this.scene.replaceAllElements(actionResult.elements);\n\n        if (actionResult.commitToHistory) {\n          this.history.resumeRecording();\n        }\n      }\n\n      if (actionResult.files) {\n        this.files = actionResult.replaceFiles ? actionResult.files : Object.assign(Object.assign({}, this.files), actionResult.files);\n        this.addNewImagesToImageCache();\n      }\n\n      if (actionResult.appState || editingElement || this.state.contextMenu) {\n        if (actionResult.commitToHistory) {\n          this.history.resumeRecording();\n        }\n\n        let viewModeEnabled = ((_a = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _a === void 0 ? void 0 : _a.viewModeEnabled) || false;\n        let zenModeEnabled = ((_b = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _b === void 0 ? void 0 : _b.zenModeEnabled) || false;\n        let gridSize = ((_c = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _c === void 0 ? void 0 : _c.gridSize) || null;\n        const theme = ((_d = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _d === void 0 ? void 0 : _d.theme) || this.props.theme || _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.LIGHT;\n        let name = (_f = (_e = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : this.state.name;\n        const errorMessage = (_h = (_g = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _g === void 0 ? void 0 : _g.errorMessage) !== null && _h !== void 0 ? _h : this.state.errorMessage;\n\n        if (typeof this.props.viewModeEnabled !== \"undefined\") {\n          viewModeEnabled = this.props.viewModeEnabled;\n        }\n\n        if (typeof this.props.zenModeEnabled !== \"undefined\") {\n          zenModeEnabled = this.props.zenModeEnabled;\n        }\n\n        if (typeof this.props.gridModeEnabled !== \"undefined\") {\n          gridSize = this.props.gridModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.GRID_SIZE : null;\n        }\n\n        if (typeof this.props.name !== \"undefined\") {\n          name = this.props.name;\n        }\n\n        editingElement = editingElement || ((_j = actionResult.appState) === null || _j === void 0 ? void 0 : _j.editingElement) || null;\n\n        if (editingElement === null || editingElement === void 0 ? void 0 : editingElement.isDeleted) {\n          editingElement = null;\n        }\n\n        this.setState(state => {\n          // using Object.assign instead of spread to fool TS 4.2.2+ into\n          // regarding the resulting type as not containing undefined\n          // (which the following expression will never contain)\n          return Object.assign(actionResult.appState || {}, {\n            // NOTE this will prevent opening context menu using an action\n            // or programmatically from the host, so it will need to be\n            // rewritten later\n            contextMenu: null,\n            editingElement,\n            viewModeEnabled,\n            zenModeEnabled,\n            gridSize,\n            theme,\n            name,\n            errorMessage\n          });\n        }, () => {\n          if (actionResult.syncHistory) {\n            this.history.setCurrentState(this.state, this.scene.getElementsIncludingDeleted());\n          }\n        });\n      }\n    }); // Lifecycle\n\n    this.onBlur = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(() => {\n      isHoldingSpace = false;\n      this.setState({\n        isBindingEnabled: true\n      });\n    });\n\n    this.onUnload = () => {\n      this.onBlur();\n    };\n\n    this.disableEvent = event => {\n      event.preventDefault();\n    };\n\n    this.resetHistory = () => {\n      this.history.clear();\n    };\n    /**\r\n     * Resets scene & history.\r\n     * ! Do not use to clear scene user action !\r\n     */\n\n\n    this.resetScene = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(opts => {\n      this.scene.replaceAllElements([]);\n      this.setState(state => Object.assign(Object.assign({}, (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)()), {\n        isLoading: (opts === null || opts === void 0 ? void 0 : opts.resetLoadingState) ? false : state.isLoading,\n        theme: this.state.theme\n      }));\n      this.resetHistory();\n    });\n\n    this.initializeScene = async () => {\n      var _a;\n\n      if (\"launchQueue\" in window && \"LaunchParams\" in window) {\n        window.launchQueue.setConsumer(async launchParams => {\n          if (!launchParams.files.length) {\n            return;\n          }\n\n          const fileHandle = launchParams.files[0];\n          const blob = await fileHandle.getFile();\n          this.loadFileToCanvas(new File([blob], blob.name || \"\", {\n            type: blob.type\n          }), fileHandle);\n        });\n      }\n\n      if (this.props.theme) {\n        this.setState({\n          theme: this.props.theme\n        });\n      }\n\n      if (!this.state.isLoading) {\n        this.setState({\n          isLoading: true\n        });\n      }\n\n      let initialData = null;\n\n      try {\n        initialData = (await this.props.initialData) || null;\n\n        if (initialData === null || initialData === void 0 ? void 0 : initialData.libraryItems) {\n          this.library.updateLibrary({\n            libraryItems: initialData.libraryItems,\n            merge: true\n          }).catch(error => {\n            console.error(error);\n          });\n        }\n      } catch (error) {\n        console.error(error);\n        initialData = {\n          appState: {\n            errorMessage: error.message || \"Encountered an error during importing or restoring scene data\"\n          }\n        };\n      }\n\n      const scene = (0,_data_restore__WEBPACK_IMPORTED_MODULE_15__.restore)(initialData, null, null, {\n        repairBindings: true\n      });\n      scene.appState = Object.assign(Object.assign({}, scene.appState), {\n        theme: this.props.theme || scene.appState.theme,\n        // we're falling back to current (pre-init) state when deciding\n        // whether to open the library, to handle a case where we\n        // update the state outside of initialData (e.g. when loading the app\n        // with a library install link, which should auto-open the library)\n        openSidebar: ((_a = scene.appState) === null || _a === void 0 ? void 0 : _a.openSidebar) || this.state.openSidebar,\n        activeTool: scene.appState.activeTool.type === \"image\" ? Object.assign(Object.assign({}, scene.appState.activeTool), {\n          type: \"selection\"\n        }) : scene.appState.activeTool,\n        isLoading: false,\n        toast: this.state.toast\n      });\n\n      if (initialData === null || initialData === void 0 ? void 0 : initialData.scrollToContent) {\n        scene.appState = Object.assign(Object.assign({}, scene.appState), (0,_scene__WEBPACK_IMPORTED_MODULE_29__.calculateScrollCenter)(scene.elements, Object.assign(Object.assign({}, scene.appState), {\n          width: this.state.width,\n          height: this.state.height,\n          offsetTop: this.state.offsetTop,\n          offsetLeft: this.state.offsetLeft\n        })));\n      } // FontFaceSet loadingdone event we listen on may not always fire\n      // (looking at you Safari), so on init we manually load fonts for current\n      // text elements on canvas, and rerender them once done. This also\n      // seems faster even in browsers that do fire the loadingdone event.\n\n\n      this.fonts.loadFontsForElements(scene.elements);\n      this.resetHistory();\n      this.syncActionResult(Object.assign(Object.assign({}, scene), {\n        commitToHistory: true\n      }));\n    };\n\n    this.isMobileBreakpoint = (width, height) => {\n      return width !== 0 && //zsviczian changing tabs in Obsidian causes MobileMenu to be rendered\n      this.allowMobileMode && ( //zsviczian\n      width < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_PORTRAIT || height < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_HEIGHT_LANDSCAPE && width < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_LANDSCAPE);\n    };\n\n    this.refreshViewportBreakpoints = () => {\n      const container = this.excalidrawContainerRef.current;\n\n      if (!container) {\n        return;\n      }\n\n      const {\n        clientWidth: viewportWidth,\n        clientHeight: viewportHeight\n      } = document.body;\n      const prevViewportState = this.device.viewport;\n      const nextViewportState = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(prevViewportState, {\n        isLandscape: viewportWidth > viewportHeight,\n        isMobile: this.isMobileBreakpoint(viewportWidth, viewportHeight)\n      });\n\n      if (prevViewportState !== nextViewportState) {\n        this.device = Object.assign(Object.assign({}, this.device), {\n          viewport: nextViewportState\n        });\n        return true;\n      }\n\n      return false;\n    };\n\n    this.refreshEditorBreakpoints = () => {\n      const container = this.excalidrawContainerRef.current;\n\n      if (!container) {\n        return;\n      }\n\n      const {\n        width: editorWidth,\n        height: editorHeight\n      } = container.getBoundingClientRect();\n      const sidebarBreakpoint = this.props.UIOptions.dockedSidebarBreakpoint != null ? this.props.UIOptions.dockedSidebarBreakpoint : _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_RIGHT_SIDEBAR_MIN_WIDTH;\n      const prevEditorState = this.device.editor;\n      const nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(prevEditorState, {\n        isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),\n        canFitSidebar: editorWidth > sidebarBreakpoint\n      });\n\n      if (prevEditorState !== nextEditorState) {\n        this.device = Object.assign(Object.assign({}, this.device), {\n          editor: nextEditorState\n        });\n        return true;\n      }\n\n      return false;\n    };\n\n    this.onResize = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(() => {\n      this.scene.getElementsIncludingDeleted().forEach(element => _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element));\n      this.refreshViewportBreakpoints();\n      this.updateDOMRect();\n\n      if (!supportsResizeObserver) {\n        this.refreshEditorBreakpoints();\n      }\n\n      this.setState({});\n    });\n    /** generally invoked only if fullscreen was invoked programmatically */\n\n    this.onFullscreenChange = () => {\n      var _a;\n\n      if ( // points to the iframe element we fullscreened\n      !document.fullscreenElement && ((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.state) === \"active\") {\n        this.setState({\n          activeEmbeddable: null\n        });\n      }\n    };\n\n    this.renderInteractiveSceneCallback = ({\n      atLeastOneVisibleElement,\n      scrollBars,\n      elements\n    }) => {\n      if (!document.querySelector(\".excalidraw\")) {\n        return;\n      } //zsviczian - address issue when moving excalidraw to a new window/document\n\n\n      if (scrollBars) {\n        currentScrollBars = scrollBars;\n      }\n\n      const scrolledOutside = // hide when editing text\n      (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement) ? false : !atLeastOneVisibleElement && elements.length > 0;\n\n      if (this.state.scrolledOutside !== scrolledOutside) {\n        this.setState({\n          scrolledOutside\n        });\n      }\n\n      this.scheduleImageRefresh();\n    };\n\n    this.onScroll = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.debounce)(() => {\n      const {\n        offsetTop,\n        offsetLeft\n      } = this.getCanvasOffsets();\n      this.setState(state => {\n        if (state.offsetLeft === offsetLeft && state.offsetTop === offsetTop) {\n          return null;\n        }\n\n        return {\n          offsetTop,\n          offsetLeft\n        };\n      });\n    }, _constants__WEBPACK_IMPORTED_MODULE_12__.SCROLL_TIMEOUT); // Copy/paste\n\n    this.onCut = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(event => {\n      var _a;\n\n      const isExcalidrawActive = (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);\n\n      if (!isExcalidrawActive || (0,_utils__WEBPACK_IMPORTED_MODULE_33__.isWritableElement)(event.target)) {\n        return;\n      }\n\n      this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCut, \"keyboard\", event);\n      event.preventDefault();\n      event.stopPropagation();\n    });\n    this.onCopy = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(event => {\n      var _a;\n\n      const isExcalidrawActive = (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);\n\n      if (!isExcalidrawActive || (0,_utils__WEBPACK_IMPORTED_MODULE_33__.isWritableElement)(event.target)) {\n        return;\n      }\n\n      this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, \"keyboard\", event);\n      event.preventDefault();\n      event.stopPropagation();\n    });\n\n    this.onTouchStart = event => {\n      // fix for Apple Pencil Scribble (do not prevent for other devices)\n      if (_constants__WEBPACK_IMPORTED_MODULE_12__.isIOS) {\n        event.preventDefault();\n      }\n\n      if (!didTapTwice) {\n        didTapTwice = true;\n        clearTimeout(tappedTwiceTimer);\n        tappedTwiceTimer = window.setTimeout(App.resetTapTwice, _constants__WEBPACK_IMPORTED_MODULE_12__.TAP_TWICE_TIMEOUT);\n        return;\n      } // insert text only if we tapped twice with a single finger\n      // event.touches.length === 1 will also prevent inserting text when user's zooming\n\n\n      if (didTapTwice && event.touches.length === 1) {\n        const touch = event.touches[0]; // @ts-ignore\n\n        this.handleCanvasDoubleClick({\n          clientX: touch.clientX,\n          clientY: touch.clientY\n        });\n        didTapTwice = false;\n        clearTimeout(tappedTwiceTimer);\n      }\n\n      if (event.touches.length === 2) {\n        this.setState({\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n          activeEmbeddable: null\n        });\n      }\n    };\n\n    this.onTouchEnd = event => {\n      this.resetContextMenuTimer();\n\n      if (event.touches.length > 0) {\n        this.setState({\n          previousSelectedElementIds: {},\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(this.state.previousSelectedElementIds, this.state)\n        });\n      } else {\n        gesture.pointers.clear();\n      }\n    };\n\n    this.pasteFromClipboard = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(async event => {\n      var _a, _b;\n\n      const isPlainPaste = !!IS_PLAIN_PASTE; // #686\n\n      const target = document.activeElement;\n      const isExcalidrawActive = (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);\n\n      if (event && !isExcalidrawActive) {\n        return;\n      }\n\n      const elementUnderCursor = document.elementFromPoint(this.lastViewportPosition.x, this.lastViewportPosition.y);\n\n      if (event && (!(elementUnderCursor instanceof HTMLCanvasElement) || (0,_utils__WEBPACK_IMPORTED_MODULE_33__.isWritableElement)(target))) {\n        return;\n      }\n\n      const {\n        x: sceneX,\n        y: sceneY\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n        clientX: this.lastViewportPosition.x,\n        clientY: this.lastViewportPosition.y\n      }, this.state); // must be called in the same frame (thus before any awaits) as the paste\n      // event else some browsers (FF...) will clear the clipboardData\n      // (something something security)\n\n      let file = (_b = event === null || event === void 0 ? void 0 : event.clipboardData) === null || _b === void 0 ? void 0 : _b.files[0];\n      const data = await (0,_clipboard__WEBPACK_IMPORTED_MODULE_11__.parseClipboard)(event, isPlainPaste);\n\n      if (!file && !isPlainPaste) {\n        if (data.mixedContent) {\n          return this.addElementsFromMixedContentPaste(data.mixedContent, {\n            isPlainPaste,\n            sceneX,\n            sceneY\n          });\n        } else if (data.text) {\n          const string = data.text.trim();\n\n          if (string.startsWith(\"<svg\") && string.endsWith(\"</svg>\")) {\n            // ignore SVG validation/normalization which will be done during image\n            // initialization\n            file = (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.SVGStringToFile)(string);\n          }\n        }\n      } // prefer spreadsheet data over image file (MS Office/Libre Office)\n\n\n      if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.isSupportedImageFile)(file) && !data.spreadsheet) {\n        if (!this.isToolSupported(\"image\")) {\n          this.setState({\n            errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n          });\n          return;\n        }\n\n        const imageElement = this.createImageElement({\n          sceneX,\n          sceneY\n        });\n        this.insertImageElement(imageElement, file);\n        this.initializeImageDimensions(imageElement);\n        this.setState({\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n            [imageElement.id]: true\n          }, this.state)\n        });\n        return;\n      }\n\n      if (this.props.onPaste) {\n        try {\n          if ((await this.props.onPaste(data, event)) === false) {\n            return;\n          }\n        } catch (error) {\n          console.error(error);\n        }\n      }\n\n      if (data.errorMessage) {\n        this.setState({\n          errorMessage: data.errorMessage\n        });\n      } else if (data.spreadsheet && !isPlainPaste) {\n        this.setState({\n          pasteDialog: {\n            data: data.spreadsheet,\n            shown: true\n          }\n        });\n      } else if (data.elements) {\n        const elements = data.programmaticAPI ? (0,_data_transform__WEBPACK_IMPORTED_MODULE_63__.convertToExcalidrawElements)(data.elements) : data.elements; // TODO remove formatting from elements if isPlainPaste\n\n        this.addElementsFromPasteOrLibrary({\n          elements,\n          files: data.files || null,\n          position: \"cursor\",\n          retainSeed: isPlainPaste\n        });\n      } else if (data.text) {\n        const nonEmptyLines = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.normalizeEOL)(data.text).split(/\\n+/).map(s => s.trim()).filter(Boolean);\n        const embbeddableUrls = nonEmptyLines.map(str => (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.maybeParseEmbedSrc)(str)).filter(string => {\n          var _a;\n\n          return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.embeddableURLValidator)(string, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(string) || ((_a = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.getEmbedLink)(string)) === null || _a === void 0 ? void 0 : _a.type) === \"video\");\n        });\n\n        if (!IS_PLAIN_PASTE && embbeddableUrls.length > 0 && // if there were non-embeddable text (lines) mixed in with embeddable\n        // urls, ignore and paste as text\n        embbeddableUrls.length === nonEmptyLines.length) {\n          const embeddables = [];\n\n          for (const url of embbeddableUrls) {\n            const prevEmbeddable = embeddables[embeddables.length - 1];\n            const embeddable = this.insertEmbeddableElement({\n              sceneX: prevEmbeddable ? prevEmbeddable.x + prevEmbeddable.width + 20 : sceneX,\n              sceneY,\n              link: (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.normalizeLink)(url)\n            });\n\n            if (embeddable) {\n              embeddables.push(embeddable);\n            }\n          }\n\n          if (embeddables.length) {\n            this.setState({\n              selectedElementIds: Object.fromEntries(embeddables.map(embeddable => [embeddable.id, true]))\n            });\n          }\n\n          return;\n        }\n\n        this.addTextFromPaste(data.text, isPlainPaste);\n      }\n\n      this.setActiveTool({\n        type: \"selection\"\n      });\n      event === null || event === void 0 ? void 0 : event.preventDefault();\n    });\n\n    this.addElementsFromPasteOrLibrary = opts => {\n      const elements = (0,_data_restore__WEBPACK_IMPORTED_MODULE_15__.restoreElements)(opts.elements, null, undefined);\n      const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(elements);\n      const elementsCenterX = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.distance)(minX, maxX) / 2;\n      const elementsCenterY = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.distance)(minY, maxY) / 2;\n      const clientX = typeof opts.position === \"object\" ? opts.position.clientX : opts.position === \"cursor\" ? this.lastViewportPosition.x : this.state.width / 2 + this.state.offsetLeft;\n      const clientY = typeof opts.position === \"object\" ? opts.position.clientY : opts.position === \"cursor\" ? this.lastViewportPosition.y : this.state.height / 2 + this.state.offsetTop;\n      const {\n        x,\n        y\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n        clientX,\n        clientY\n      }, this.state);\n      const dx = x - elementsCenterX;\n      const dy = y - elementsCenterY;\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(dx, dy, this.state.gridSize);\n      const newElements = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.duplicateElements)(elements.map(element => {\n        return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(element, {\n          x: element.x + gridX - minX,\n          y: element.y + gridY - minY\n        });\n      }), {\n        randomizeSeed: !opts.retainSeed\n      });\n      const nextElements = [...this.scene.getElementsIncludingDeleted(), ...newElements];\n      this.scene.replaceAllElements(nextElements);\n      newElements.forEach(newElement => {\n        if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(newElement) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(newElement)) {\n          const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getContainerElement)(newElement);\n          (0,_element__WEBPACK_IMPORTED_MODULE_16__.redrawTextBoundingBox)(newElement, container);\n        }\n      });\n\n      if (opts.files) {\n        this.files = Object.assign(Object.assign({}, this.files), opts.files);\n      }\n\n      this.history.resumeRecording();\n      const nextElementsToSelect = (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.excludeElementsInFramesFromSelection)(newElements);\n      this.setState(Object.assign(Object.assign(Object.assign({}, this.state), {\n        // keep sidebar (presumably the library) open if it's docked and\n        // can fit.\n        //\n        // Note, we should close the sidebar only if we're dropping items\n        // from library, not when pasting from clipboard. Alas.\n        openSidebar: this.state.openSidebar && this.device.editor.canFitSidebar && _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.get(_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_64__.isSidebarDockedAtom) ? this.state.openSidebar : null\n      }), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n        editingGroupId: null,\n        selectedElementIds: nextElementsToSelect.reduce((acc, element) => {\n          if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(element)) {\n            acc[element.id] = true;\n          }\n\n          return acc;\n        }, {})\n      }, this.scene.getNonDeletedElements(), this.state, this)), () => {\n        if (opts.files) {\n          this.addNewImagesToImageCache();\n        }\n      });\n      this.setActiveTool({\n        type: \"selection\"\n      });\n\n      if (opts.fitToContent) {\n        this.scrollToContent(newElements, {\n          fitToContent: true\n        });\n      }\n    };\n\n    this.setAppState = (state, callback) => {\n      this.setState(state, callback);\n    };\n\n    this.removePointer = event => {\n      if (touchTimeout) {\n        this.resetContextMenuTimer();\n      }\n\n      gesture.pointers.delete(event.pointerId);\n    };\n\n    this.toggleLock = (source = \"ui\") => {\n      if (!this.state.activeTool.locked) {\n        (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"toolbar\", \"toggleLock\", `${source} (${this.device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n      }\n\n      this.setState(prevState => {\n        return {\n          activeTool: Object.assign(Object.assign(Object.assign({}, prevState.activeTool), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, prevState.activeTool.locked ? {\n            type: \"selection\"\n          } : prevState.activeTool)), {\n            locked: !prevState.activeTool.locked\n          })\n        };\n      });\n    };\n\n    this.updateFrameRendering = opts => {\n      this.setState(prevState => {\n        var _a, _b, _c, _d;\n\n        const next = typeof opts === \"function\" ? opts(prevState.frameRendering) : opts;\n        return {\n          frameRendering: {\n            enabled: (_a = next === null || next === void 0 ? void 0 : next.enabled) !== null && _a !== void 0 ? _a : prevState.frameRendering.enabled,\n            clip: (_b = next === null || next === void 0 ? void 0 : next.clip) !== null && _b !== void 0 ? _b : prevState.frameRendering.clip,\n            name: (_c = next === null || next === void 0 ? void 0 : next.name) !== null && _c !== void 0 ? _c : prevState.frameRendering.name,\n            outline: (_d = next === null || next === void 0 ? void 0 : next.outline) !== null && _d !== void 0 ? _d : prevState.frameRendering.outline\n          }\n        };\n      });\n    };\n\n    this.togglePenMode = force => {\n      this.setState(prevState => {\n        return {\n          penMode: force !== null && force !== void 0 ? force : !prevState.penMode,\n          penDetected: true\n        };\n      });\n    };\n\n    this.onHandToolToggle = () => {\n      this.actionManager.executeAction(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.actionToggleHandTool);\n    };\n    /**\r\n     * Zooms on canvas viewport center\r\n     */\n\n\n    this.zoomCanvas = (\n    /** decimal fraction between 0.1 (10% zoom) and 30 (3000% zoom) */\n    value) => {\n      this.setState(Object.assign({}, (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n        viewportX: this.state.width / 2 + this.state.offsetLeft,\n        viewportY: this.state.height / 2 + this.state.offsetTop,\n        nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(value)\n      }, this.state)));\n    };\n\n    this.cancelInProgressAnimation = null;\n\n    this.scrollToContent = (target = this.scene.getNonDeletedElements(), opts) => {\n      var _a, _b;\n\n      (_a = this.cancelInProgressAnimation) === null || _a === void 0 ? void 0 : _a.call(this); // convert provided target into ExcalidrawElement[] if necessary\n\n      const targetElements = Array.isArray(target) ? target : [target];\n      let zoom = this.state.zoom;\n      let scrollX = this.state.scrollX;\n      let scrollY = this.state.scrollY;\n\n      if ((opts === null || opts === void 0 ? void 0 : opts.fitToContent) || (opts === null || opts === void 0 ? void 0 : opts.fitToViewport)) {\n        const {\n          appState\n        } = (0,_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.zoomToFit)({\n          targetElements,\n          appState: this.state,\n          fitToViewport: !!(opts === null || opts === void 0 ? void 0 : opts.fitToViewport),\n          viewportZoomFactor: opts === null || opts === void 0 ? void 0 : opts.viewportZoomFactor\n        });\n        zoom = appState.zoom;\n        scrollX = appState.scrollX;\n        scrollY = appState.scrollY;\n      } else {\n        // compute only the viewport location, without any zoom adjustment\n        const scroll = (0,_scene__WEBPACK_IMPORTED_MODULE_29__.calculateScrollCenter)(targetElements, this.state);\n        scrollX = scroll.scrollX;\n        scrollY = scroll.scrollY;\n      } // when animating, we use RequestAnimationFrame to prevent the animation\n      // from slowing down other processes\n\n\n      if (opts === null || opts === void 0 ? void 0 : opts.animate) {\n        const origScrollX = this.state.scrollX;\n        const origScrollY = this.state.scrollY;\n        const origZoom = this.state.zoom.value;\n        const cancel = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.easeToValuesRAF)({\n          fromValues: {\n            scrollX: origScrollX,\n            scrollY: origScrollY,\n            zoom: origZoom\n          },\n          toValues: {\n            scrollX,\n            scrollY,\n            zoom: zoom.value\n          },\n          interpolateValue: (from, to, progress, key) => {\n            // for zoom, use different easing\n            if (key === \"zoom\") {\n              return from * Math.pow(to / from, (0,_utils__WEBPACK_IMPORTED_MODULE_33__.easeOut)(progress));\n            } // handle using default\n\n\n            return undefined;\n          },\n          onStep: ({\n            scrollX,\n            scrollY,\n            zoom\n          }) => {\n            this.setState({\n              scrollX,\n              scrollY,\n              zoom: {\n                value: zoom\n              }\n            });\n          },\n          onStart: () => {\n            this.setState({\n              shouldCacheIgnoreZoom: true\n            });\n          },\n          onEnd: () => {\n            this.setState({\n              shouldCacheIgnoreZoom: false\n            });\n          },\n          onCancel: () => {\n            this.setState({\n              shouldCacheIgnoreZoom: false\n            });\n          },\n          duration: (_b = opts === null || opts === void 0 ? void 0 : opts.duration) !== null && _b !== void 0 ? _b : 500\n        });\n\n        this.cancelInProgressAnimation = () => {\n          cancel();\n          this.cancelInProgressAnimation = null;\n        };\n      } else {\n        this.setState({\n          scrollX,\n          scrollY,\n          zoom\n        });\n      }\n    };\n\n    this.maybeUnfollowRemoteUser = () => {\n      if (this.state.userToFollow) {\n        this.setState({\n          userToFollow: null\n        });\n      }\n    };\n    /** use when changing scrollX/scrollY/zoom based on user interaction */\n\n\n    this.translateCanvas = state => {\n      var _a;\n\n      (_a = this.cancelInProgressAnimation) === null || _a === void 0 ? void 0 : _a.call(this);\n      this.maybeUnfollowRemoteUser();\n      this.setState(state);\n    }; //zsviczian\n\n\n    this.zoomToFit = (target = this.scene.getNonDeletedElements(), maxZoom = 1, //null will zoom to max based on viewport\n    margin = 0.03) => {\n      if (!target) {\n        target = this.scene.getNonDeletedElements();\n      }\n\n      if (target.length === 0) {\n        maxZoom = 1;\n      }\n\n      this.setState((0,_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.zoomToFitElements)(target, this.state, false, this, maxZoom, margin).appState);\n    }; //zsviczian\n\n\n    this.startLineEditor = (el, selectedPointsIndices = null) => {\n      if (!el || !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(el)) {\n        return;\n      }\n\n      const editingLinearElement = new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(el, this.scene);\n      this.setState({\n        selectedLinearElement: editingLinearElement,\n        editingLinearElement: Object.assign(Object.assign({}, editingLinearElement), {\n          selectedPointsIndices\n        })\n      });\n    }; //zsviczian\n\n\n    this.updateContainerSize = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(containers => {\n      containers.forEach(el => {\n        const [x, y] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.rotate)(el.x + el.width, el.y + el.height, el.x + el.width / 2, el.y + el.height / 2, el.angle);\n        (0,_element_resizeElements__WEBPACK_IMPORTED_MODULE_45__.resizeSingleElement)(new Map().set(el.id, el), false, el, \"se\", true, x, y);\n      });\n    });\n\n    this.setToast = toast => {\n      this.setState({\n        toast\n      });\n    };\n\n    this.restoreFileFromShare = async () => {\n      try {\n        const webShareTargetCache = await caches.open(\"web-share-target\");\n        const response = await webShareTargetCache.match(\"shared-file\");\n\n        if (response) {\n          const blob = await response.blob();\n          const file = new File([blob], blob.name || \"\", {\n            type: blob.type\n          });\n          this.loadFileToCanvas(file, null);\n          await webShareTargetCache.delete(\"shared-file\");\n          window.history.replaceState(null, _constants__WEBPACK_IMPORTED_MODULE_12__.APP_NAME, window.location.pathname);\n        }\n      } catch (error) {\n        this.setState({\n          errorMessage: error.message\n        });\n      }\n    };\n    /** adds supplied files to existing files in the appState */\n\n\n    this.addFiles = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(files => {\n      const filesMap = files.reduce((acc, fileData) => {\n        acc.set(fileData.id, fileData);\n        return acc;\n      }, new Map());\n      this.files = Object.assign(Object.assign({}, this.files), Object.fromEntries(filesMap));\n      this.scene.getNonDeletedElements().forEach(element => {\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(element) && filesMap.has(element.fileId)) {\n          this.imageCache.delete(element.fileId);\n          _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element);\n        }\n      });\n      this.scene.informMutation();\n      this.addNewImagesToImageCache();\n    }); //zsviczian https://github.com/zsviczian/excalibrain/issues/9\n\n    this.setMobileModeAllowed = allow => {\n      const {\n        width: editorWidth,\n        height: editorHeight\n      } = this.excalidrawContainerRef.current.getBoundingClientRect();\n      this.allowMobileMode = allow;\n      const prevEditorState = this.device.editor;\n      let nextEditorState;\n\n      if (allow) {\n        nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(prevEditorState, {\n          isMobile: this.isMobileBreakpoint(editorWidth, editorHeight)\n        });\n      } else {\n        nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(prevEditorState, {\n          isMobile: false //must test this\n\n        });\n      }\n\n      if (prevEditorState !== nextEditorState) {\n        this.device = Object.assign(Object.assign({}, this.device), {\n          editor: nextEditorState\n        });\n        this.forceUpdate();\n      }\n    }; //zsviczian\n\n\n    this.setLocalFont = showOnPanel => {\n      showFourthFont = showOnPanel;\n    };\n\n    this.selectElements = elements => {\n      this.updateScene({\n        appState: Object.assign(Object.assign({}, this.state), {\n          editingGroupId: null,\n          selectedElementIds: elements.reduce((map, element) => {\n            map[element.id] = true;\n            return map;\n          }, {})\n        }),\n        commitToHistory: true\n      });\n    };\n\n    this.bringToFront = elements => {\n      this.selectElements(elements);\n      this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionBringToFront.perform(this.scene.getNonDeletedElements(), this.state));\n    };\n\n    this.bringForward = elements => {\n      this.selectElements(elements);\n      this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionBringForward.perform(this.scene.getNonDeletedElements(), this.state));\n    };\n\n    this.sendToBack = elements => {\n      this.selectElements(elements);\n      this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionSendToBack.perform(this.scene.getNonDeletedElements(), this.state));\n    };\n\n    this.sendBackward = elements => {\n      this.selectElements(elements);\n      this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionSendBackward.perform(this.scene.getNonDeletedElements(), this.state));\n    };\n\n    this.updateScene = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(sceneData => {\n      if (sceneData.commitToHistory) {\n        this.history.resumeRecording();\n      }\n\n      (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n        if (sceneData.appState) {\n          this.setState(sceneData.appState);\n        }\n      });\n\n      if (sceneData.elements) {\n        this.scene.replaceAllElements(sceneData.elements);\n      }\n\n      if (sceneData.collaborators) {\n        this.setState({\n          collaborators: sceneData.collaborators\n        });\n      }\n    });\n\n    this.onSceneUpdated = () => {\n      this.setState({});\n    };\n    /**\r\n     * @returns whether the menu was toggled on or off\r\n     */\n\n\n    this.toggleSidebar = ({\n      name,\n      tab,\n      force\n    }) => {\n      var _a;\n\n      let nextName;\n\n      if (force === undefined) {\n        nextName = ((_a = this.state.openSidebar) === null || _a === void 0 ? void 0 : _a.name) === name ? null : name;\n      } else {\n        nextName = force ? name : null;\n      }\n\n      this.setState({\n        openSidebar: nextName ? {\n          name: nextName,\n          tab\n        } : null\n      });\n      return !!nextName;\n    };\n\n    this.updateCurrentCursorPosition = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(event => {\n      this.lastViewportPosition.x = event.clientX;\n      this.lastViewportPosition.y = event.clientY;\n    }); // Input handling\n\n    this.onKeyDown = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(event => {\n      if (this.state.activeTool.type === \"selection\" && this.state.resizingElement && (event.shiftKey || event.altKey)) {\n        event.stopPropagation(); //zsviczian shift fires repeatedly causing slowdown when resizing sticky notes\n\n        return;\n      } // normalize `event.key` when CapsLock is pressed #2372\n\n\n      if (\"Proxy\" in window && (!event.shiftKey && /^[A-Z]$/.test(event.key) || event.shiftKey && /^[a-z]$/.test(event.key))) {\n        event = new Proxy(event, {\n          get(ev, prop) {\n            const value = ev[prop];\n\n            if (typeof value === \"function\") {\n              // fix for Proxies hijacking `this`\n              return value.bind(ev);\n            }\n\n            return prop === \"key\" ? // CapsLock inverts capitalization based on ShiftKey, so invert\n            // it back\n            event.shiftKey ? ev.key.toUpperCase() : ev.key.toLowerCase() : value;\n          }\n\n        });\n      }\n\n      if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.V) {\n        IS_PLAIN_PASTE = event.shiftKey;\n        clearTimeout(IS_PLAIN_PASTE_TIMER); // reset (100ms to be safe that we it runs after the ensuing\n        // paste event). Though, technically unnecessary to reset since we\n        // (re)set the flag before each paste event.\n\n        IS_PLAIN_PASTE_TIMER = window.setTimeout(() => {\n          IS_PLAIN_PASTE = false;\n        }, 100);\n      } // prevent browser zoom in input fields\n\n\n      if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (0,_utils__WEBPACK_IMPORTED_MODULE_33__.isWritableElement)(event.target)) {\n        if (event.code === _keys__WEBPACK_IMPORTED_MODULE_26__.CODES.MINUS || event.code === _keys__WEBPACK_IMPORTED_MODULE_26__.CODES.EQUAL) {\n          event.preventDefault();\n          return;\n        }\n      } // bail if\n\n\n      if ( // inside an input\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.isWritableElement)(event.target) && // unless pressing escape (finalize action)\n      event.key !== _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ESCAPE || // or unless using arrows (to move between buttons)\n      (0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key) && (0,_utils__WEBPACK_IMPORTED_MODULE_33__.isInputLike)(event.target)) {\n        return;\n      }\n\n      if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.QUESTION_MARK) {\n        this.setState({\n          openDialog: {\n            name: \"help\"\n          }\n        });\n        return;\n      } else if (event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.E && event.shiftKey && event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n        event.preventDefault();\n        this.setState({\n          openDialog: {\n            name: \"imageExport\"\n          }\n        });\n        return;\n      }\n\n      if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_UP || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_DOWN) {\n        let offset = (event.shiftKey ? this.state.width : this.state.height) / this.state.zoom.value;\n\n        if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_DOWN) {\n          offset = -offset;\n        }\n\n        if (event.shiftKey) {\n          this.translateCanvas(state => ({\n            scrollX: state.scrollX + offset\n          }));\n        } else {\n          this.translateCanvas(state => ({\n            scrollY: state.scrollY + offset\n          }));\n        }\n      }\n\n      if (this.actionManager.handleKeyDown(event)) {\n        return;\n      }\n\n      if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.K && !event.altKey && !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n        if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isLaserPointerActive)(this.state)) {\n          this.setActiveTool({\n            type: \"selection\"\n          });\n        } else {\n          this.setActiveTool({\n            type: \"laser\"\n          });\n        }\n\n        return;\n      }\n\n      if (this.state.viewModeEnabled) {\n        //revert to hand in case a key is pressed (K is handled above)\n        if (event.key !== _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.K) {\n          this.setActiveTool({\n            type: \"selection\"\n          });\n        }\n\n        return;\n      }\n\n      if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && this.state.isBindingEnabled) {\n        this.setState({\n          isBindingEnabled: false\n        });\n      }\n\n      if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key)) {\n        const step = this.state.gridSize && (event.shiftKey ? _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_TRANSLATE_AMOUNT : this.state.gridSize) || (event.shiftKey ? _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_SHIFT_TRANSLATE_AMOUNT : _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_TRANSLATE_AMOUNT);\n        let offsetX = 0;\n        let offsetY = 0;\n\n        if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_LEFT) {\n          offsetX = -step;\n        } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_RIGHT) {\n          offsetX = step;\n        } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_UP) {\n          offsetY = -step;\n        } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_DOWN) {\n          offsetY = step;\n        }\n\n        const selectedElements = this.scene.getSelectedElements({\n          selectedElementIds: this.state.selectedElementIds,\n          includeBoundTextElement: true,\n          includeElementsInFrames: true\n        });\n        selectedElements.forEach(element => {\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n            x: element.x + offsetX,\n            y: element.y + offsetY\n          });\n          (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.updateBoundElements)(element, {\n            simultaneouslyUpdated: selectedElements\n          });\n        });\n        this.maybeSuggestBindingForAll(selectedElements);\n        event.preventDefault();\n      } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ENTER) {\n        const selectedElements = this.scene.getSelectedElements(this.state);\n\n        if (selectedElements.length === 1) {\n          const selectedElement = selectedElements[0];\n\n          if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n            if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElement)) {\n              if (!this.state.editingLinearElement || this.state.editingLinearElement.elementId !== selectedElements[0].id) {\n                this.history.resumeRecording();\n                this.setState({\n                  editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElement, this.scene)\n                });\n              }\n            }\n          } else if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElement) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.isValidTextContainer)(selectedElement)) {\n            let container;\n\n            if (!(0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElement)) {\n              container = selectedElement;\n            }\n\n            const midPoint = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getContainerCenter)(selectedElement, this.state);\n            const sceneX = midPoint.x;\n            const sceneY = midPoint.y;\n            this.startTextEditing({\n              sceneX,\n              sceneY,\n              container\n            });\n            event.preventDefault();\n            return;\n          } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(selectedElement)) {\n            this.setState({\n              editingFrame: selectedElement.id\n            });\n          }\n        }\n      } else if (!event.ctrlKey && !event.altKey && !event.metaKey && this.state.draggingElement === null) {\n        const shape = (0,_shapes__WEBPACK_IMPORTED_MODULE_32__.findShapeByKey)(event.key);\n\n        if (shape) {\n          if (this.state.activeTool.type !== shape) {\n            (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"toolbar\", shape, `keyboard (${this.device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n          }\n\n          this.setActiveTool({\n            type: shape\n          });\n          event.stopPropagation();\n        } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.Q) {\n          this.toggleLock(\"keyboard\");\n          event.stopPropagation();\n        }\n      }\n\n      if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.SPACE && gesture.pointers.size === 0) {\n        isHoldingSpace = true;\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n        event.preventDefault();\n      }\n\n      if ((event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.G || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.S) && !event.altKey && !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n        const selectedElements = this.scene.getSelectedElements(this.state);\n\n        if (this.state.activeTool.type === \"selection\" && !selectedElements.length) {\n          return;\n        }\n\n        if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.G && ((0,_scene__WEBPACK_IMPORTED_MODULE_29__.hasBackground)(this.state.activeTool.type) || selectedElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_29__.hasBackground)(element.type)))) {\n          this.setState({\n            openPopup: \"elementBackground\"\n          });\n          event.stopPropagation();\n        }\n\n        if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.S) {\n          this.setState({\n            openPopup: \"elementStroke\"\n          });\n          event.stopPropagation();\n        }\n      }\n\n      if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.BACKSPACE || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.DELETE)) {\n        _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.set(_ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_57__.activeConfirmDialogAtom, \"clearCanvas\");\n      } // eye dropper\n      // -----------------------------------------------------------------------\n\n\n      const lowerCased = event.key.toLocaleLowerCase();\n      const isPickingStroke = lowerCased === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.S && event.shiftKey;\n      const isPickingBackground = event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.I || lowerCased === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.G && event.shiftKey;\n\n      if (isPickingStroke || isPickingBackground) {\n        this.openEyeDropper({\n          type: isPickingStroke ? \"stroke\" : \"background\"\n        });\n      } // -----------------------------------------------------------------------\n\n    });\n    this.onWheel = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(event => {\n      // prevent browser pinch zoom on DOM elements\n      if (!(event.target instanceof HTMLCanvasElement) && event.ctrlKey) {\n        event.preventDefault();\n      }\n    });\n    this.onKeyUp = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(event => {\n      if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.SPACE) {\n        if (this.state.viewModeEnabled) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n        } else if (this.state.activeTool.type === \"selection\") {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n        } else {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n          this.setState({\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n            selectedGroupIds: {},\n            editingGroupId: null,\n            activeEmbeddable: null\n          });\n        }\n\n        isHoldingSpace = false;\n      }\n\n      if (!event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && !this.state.isBindingEnabled) {\n        this.setState({\n          isBindingEnabled: true\n        });\n      }\n\n      if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key)) {\n        const selectedElements = this.scene.getSelectedElements(this.state);\n        (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) ? (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindSelectedElements)(selectedElements) : (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.unbindLinearElements)(selectedElements);\n        this.setState({\n          suggestedBindings: []\n        });\n      }\n    }); // We purposely widen the `tool` type so this helper can be called with\n    // any tool without having to type check it\n\n    this.isToolSupported = tool => {\n      var _a;\n\n      return ((_a = this.props.UIOptions.tools) === null || _a === void 0 ? void 0 : _a[tool]) !== false;\n    };\n\n    this.setActiveTool = tool => {\n      var _a;\n\n      if (!this.isToolSupported(tool.type)) {\n        console.warn(`\"${tool.type}\" tool is disabled via \"UIOptions.canvasActions.tools.${tool.type}\"`);\n        return;\n      }\n\n      const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, tool);\n\n      if (nextActiveTool.type === \"hand\") {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n      } else if (!isHoldingSpace) {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n      }\n\n      if ((0,_utils__WEBPACK_IMPORTED_MODULE_33__.isToolIcon)(document.activeElement)) {\n        this.focusContainer();\n      }\n\n      if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElementType)(nextActiveTool.type)) {\n        this.setState({\n          suggestedBindings: []\n        });\n      }\n\n      if (nextActiveTool.type === \"image\") {\n        this.onImageAction({\n          insertOnCanvasDirectly: (_a = tool.type === \"image\" && tool.insertOnCanvasDirectly) !== null && _a !== void 0 ? _a : false\n        });\n      }\n\n      this.setState(prevState => {\n        const commonResets = {\n          snapLines: prevState.snapLines.length ? [] : prevState.snapLines,\n          originSnapOffset: null,\n          activeEmbeddable: null\n        };\n\n        if (nextActiveTool.type !== \"selection\") {\n          return Object.assign(Object.assign(Object.assign({}, prevState), {\n            activeTool: nextActiveTool,\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextActiveTool.type === \"mermaid\" //zsviczian\n            ? this.state.selectedElementIds : {}, prevState),\n            selectedGroupIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, prevState),\n            editingGroupId: null,\n            multiElement: null\n          }), commonResets);\n        }\n\n        return Object.assign(Object.assign(Object.assign({}, prevState), {\n          activeTool: nextActiveTool\n        }), commonResets);\n      });\n    };\n\n    this.setOpenDialog = dialogType => {\n      this.setState({\n        openDialog: dialogType\n      });\n    };\n\n    this.setCursor = cursor => {\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, cursor);\n    };\n\n    this.resetCursor = () => {\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n    };\n    /**\r\n     * returns whether user is making a gesture with >= 2 fingers (points)\r\n     * on o touch screen (not on a trackpad). Currently only relates to Darwin\r\n     * (iOS/iPadOS,MacOS), but may work on other devices in the future if\r\n     * GestureEvent is standardized.\r\n     */\n\n\n    this.isTouchScreenMultiTouchGesture = () => {\n      // we don't want to deselect when using trackpad, and multi-point gestures\n      // only work on touch screens, so checking for >= pointers means we're on a\n      // touchscreen\n      return gesture.pointers.size >= 2;\n    }; // fires only on Safari\n\n\n    this.onGestureStart = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(event => {\n      event.preventDefault(); // we only want to deselect on touch screens because user may have selected\n      // elements by mistake while zooming\n\n      if (this.isTouchScreenMultiTouchGesture()) {\n        this.setState({\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n          activeEmbeddable: null\n        });\n      }\n\n      gesture.initialScale = this.state.zoom.value;\n    }); // fires only on Safari\n\n    this.onGestureChange = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(event => {\n      event.preventDefault(); // onGestureChange only has zoom factor but not the center.\n      // If we're on iPad or iPhone, then we recognize multi-touch and will\n      // zoom in at the right location in the touchmove handler\n      // (handleCanvasPointerMove).\n      //\n      // On Macbook trackpad, we don't have those events so will zoom in at the\n      // current location instead.\n      //\n      // As such, bail from this handler on touch devices.\n\n      if (this.isTouchScreenMultiTouchGesture()) {\n        return;\n      }\n\n      const initialScale = gesture.initialScale;\n\n      if (initialScale) {\n        this.setState(state => Object.assign({}, (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n          viewportX: this.lastViewportPosition.x,\n          viewportY: this.lastViewportPosition.y,\n          nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(initialScale * event.scale)\n        }, state)));\n      }\n    }); // fires only on Safari\n\n    this.onGestureEnd = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(event => {\n      event.preventDefault(); // reselect elements only on touch screens (see onGestureStart)\n\n      if (this.isTouchScreenMultiTouchGesture()) {\n        this.setState({\n          previousSelectedElementIds: {},\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(this.state.previousSelectedElementIds, this.state)\n        });\n      }\n\n      gesture.initialScale = null;\n    });\n\n    this.startTextEditing = ({\n      sceneX,\n      sceneY,\n      insertAtParentCenter = true,\n      container\n    }) => {\n      var _a, _b;\n\n      let shouldBindToContainer = false;\n      let parentCenterPosition = insertAtParentCenter && this.getTextWysiwygSnappedToCenterPosition(sceneX, sceneY, this.state, container);\n\n      if (container && parentCenterPosition) {\n        const boundTextElementToContainer = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getBoundTextElement)(container);\n\n        if (!boundTextElementToContainer) {\n          shouldBindToContainer = true;\n        }\n      }\n\n      let existingTextElement = null;\n      const selectedElements = this.scene.getSelectedElements(this.state);\n\n      if (selectedElements.length === 1) {\n        if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElements[0])) {\n          existingTextElement = selectedElements[0];\n        } else if (container) {\n          existingTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getBoundTextElement)(selectedElements[0]);\n        } else {\n          existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);\n        }\n      } else {\n        existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);\n      }\n\n      const fontFamily = (existingTextElement === null || existingTextElement === void 0 ? void 0 : existingTextElement.fontFamily) || this.state.currentItemFontFamily;\n      const lineHeight = (existingTextElement === null || existingTextElement === void 0 ? void 0 : existingTextElement.lineHeight) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getDefaultLineHeight)(fontFamily);\n      const fontSize = (0,_actions_actionProperties__WEBPACK_IMPORTED_MODULE_79__.getFontSize)(this.state.currentItemFontSize, this.state.zoom.value); //zsviczian\n\n      if (!existingTextElement && shouldBindToContainer && container && !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isArrowElement)(container)) {\n        const fontString = {\n          fontSize,\n          fontFamily\n        };\n        const minWidth = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getApproxMinLineWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_33__.getFontString)(fontString), lineHeight);\n        const minHeight = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getApproxMinLineHeight)(fontSize, lineHeight);\n        const newHeight = Math.max(container.height, minHeight);\n        const newWidth = Math.max(container.width, minWidth);\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(container, {\n          height: newHeight,\n          width: newWidth\n        });\n        sceneX = container.x + newWidth / 2;\n        sceneY = container.y + newHeight / 2;\n\n        if (parentCenterPosition) {\n          parentCenterPosition = this.getTextWysiwygSnappedToCenterPosition(sceneX, sceneY, this.state, container);\n        }\n      }\n\n      const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n        x: sceneX,\n        y: sceneY\n      });\n      const element = existingTextElement ? existingTextElement : (0,_element__WEBPACK_IMPORTED_MODULE_16__.newTextElement)({\n        x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX,\n        y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY,\n        strokeColor: this.state.currentItemStrokeColor,\n        backgroundColor: this.state.currentItemBackgroundColor,\n        fillStyle: this.state.currentItemFillStyle,\n        strokeWidth: this.state.currentItemStrokeWidth,\n        strokeStyle: this.state.currentItemStrokeStyle,\n        roughness: this.state.currentItemRoughness,\n        opacity: this.state.currentItemOpacity,\n        text: \"\",\n        rawText: \"\",\n        fontSize,\n        fontFamily,\n        textAlign: parentCenterPosition ? \"center\" : this.state.currentItemTextAlign,\n        verticalAlign: parentCenterPosition ? _constants__WEBPACK_IMPORTED_MODULE_12__.VERTICAL_ALIGN.MIDDLE : _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_VERTICAL_ALIGN,\n        containerId: shouldBindToContainer ? container === null || container === void 0 ? void 0 : container.id : undefined,\n        groupIds: (_a = container === null || container === void 0 ? void 0 : container.groupIds) !== null && _a !== void 0 ? _a : [],\n        lineHeight,\n        angle: (_b = container === null || container === void 0 ? void 0 : container.angle) !== null && _b !== void 0 ? _b : 0,\n        frameId: topLayerFrame ? topLayerFrame.id : null\n      });\n\n      if (!existingTextElement && shouldBindToContainer && container) {\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(container, {\n          boundElements: (container.boundElements || []).concat({\n            type: \"text\",\n            id: element.id\n          })\n        });\n      }\n\n      this.setState({\n        editingElement: element\n      });\n\n      if (!existingTextElement) {\n        if (container && shouldBindToContainer) {\n          const containerIndex = this.scene.getElementIndex(container.id);\n          this.scene.insertElementAtIndex(element, containerIndex + 1);\n        } else {\n          this.scene.addNewElement(element);\n        }\n      }\n\n      this.setState({\n        editingElement: element\n      });\n      this.handleTextWysiwyg(element, {\n        isExistingElement: !!existingTextElement\n      });\n    };\n\n    this.handleCanvasDoubleClick = event => {\n      // case: double-clicking with arrow/line tool selected would both create\n      // text and enter multiElement mode\n      if (this.state.multiElement) {\n        return;\n      } //zsviczian\n\n\n      if (this.state.viewModeEnabled && !(0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_85__.isExcaliBrainView)()) {\n        if (this.state.activeTool.type === \"laser\") {\n          this.setActiveTool({\n            type: \"selection\"\n          });\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n        } else {\n          this.setActiveTool({\n            type: \"laser\"\n          });\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.CROSSHAIR);\n        }\n\n        return;\n      } // we should only be able to double click when mode is selection\n\n\n      if (this.state.activeTool.type !== \"selection\") {\n        return;\n      }\n\n      const selectedElements = this.scene.getSelectedElements(this.state);\n\n      if (selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElements[0])) {\n        if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (!this.state.editingLinearElement || this.state.editingLinearElement.elementId !== selectedElements[0].id)) {\n          this.history.resumeRecording();\n          this.setState({\n            editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElements[0], this.scene)\n          });\n          return;\n        } else if (this.state.editingLinearElement && this.state.editingLinearElement.elementId === selectedElements[0].id) {\n          return;\n        }\n      }\n\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n      let {\n        x: sceneX,\n        y: sceneY\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n      const selectedGroupIds = (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getSelectedGroupIds)(this.state);\n\n      if (selectedGroupIds.length > 0) {\n        const hitElement = this.getElementAtPosition(sceneX, sceneY);\n        const selectedGroupId = hitElement && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getSelectedGroupIdForElement)(hitElement, this.state.selectedGroupIds);\n\n        if (selectedGroupId) {\n          this.setState(prevState => Object.assign(Object.assign({}, prevState), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n            editingGroupId: selectedGroupId,\n            selectedElementIds: {\n              [hitElement.id]: true\n            }\n          }, this.scene.getNonDeletedElements(), prevState, this)));\n          return;\n        }\n      }\n\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n\n      if (!event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && !this.state.viewModeEnabled) {\n        const hitElement = this.getElementAtPosition(sceneX, sceneY);\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement)) {\n          this.setState({\n            activeEmbeddable: {\n              element: hitElement,\n              state: \"active\"\n            }\n          });\n          return;\n        }\n\n        const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getTextBindableContainerAtPosition)(this.scene.getNonDeletedElements(), this.state, sceneX, sceneY);\n\n        if (container) {\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.hasBoundTextElement)(container) || !(0,_utils__WEBPACK_IMPORTED_MODULE_33__.isTransparent)(container.backgroundColor) || (0,_element_collision__WEBPACK_IMPORTED_MODULE_44__.isHittingElementNotConsideringBoundingBox)(container, this.state, this.frameNameBoundsCache, [sceneX, sceneY])) {\n            const midPoint = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getContainerCenter)(container, this.state);\n            sceneX = midPoint.x;\n            sceneY = midPoint.y;\n          }\n        }\n\n        this.startTextEditing({\n          sceneX,\n          sceneY,\n          insertAtParentCenter: !event.altKey,\n          container\n        });\n      }\n    };\n\n    this.getElementLinkAtPosition = (scenePointer, hitElement) => {\n      // Reversing so we traverse the elements in decreasing order\n      // of z-index\n      const elements = this.scene.getNonDeletedElements().slice().reverse();\n      let hitElementIndex = Infinity;\n      return elements.find((element, index) => {\n        if (hitElement && element.id === hitElement.id) {\n          hitElementIndex = index;\n        }\n\n        return element.link && index <= hitElementIndex && (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLink)(element, this.state, [scenePointer.x, scenePointer.y], this.device.editor.isMobile);\n      });\n    };\n\n    this.redirectToLink = (event, isTouchScreen) => {\n      const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(this.lastPointerDownEvent.clientX, this.lastPointerDownEvent.clientY, this.lastPointerUpEvent.clientX, this.lastPointerUpEvent.clientY);\n\n      if (!this.hitLinkElement || // For touch screen allow dragging threshold else strict check\n      isTouchScreen && draggedDistance > _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD || !isTouchScreen && draggedDistance !== 0) {\n        return;\n      }\n\n      const lastPointerDownCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(this.lastPointerDownEvent, this.state);\n      const lastPointerDownHittingLinkIcon = (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLink)(this.hitLinkElement, this.state, [lastPointerDownCoords.x, lastPointerDownCoords.y], this.device.editor.isMobile);\n      const lastPointerUpCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(this.lastPointerUpEvent, this.state);\n      const lastPointerUpHittingLinkIcon = (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLink)(this.hitLinkElement, this.state, [lastPointerUpCoords.x, lastPointerUpCoords.y], this.device.editor.isMobile);\n\n      if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {\n        let url = this.hitLinkElement.link;\n\n        if (url) {\n          url = (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.normalizeLink)(url);\n          let customEvent;\n\n          if (this.props.onLinkOpen) {\n            customEvent = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.wrapEvent)(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.EXCALIDRAW_LINK, event.nativeEvent);\n            this.props.onLinkOpen(Object.assign(Object.assign({}, this.hitLinkElement), {\n              link: url\n            }), customEvent);\n          }\n\n          if (!(customEvent === null || customEvent === void 0 ? void 0 : customEvent.defaultPrevented)) {\n            const target = (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.isLocalLink)(url) ? \"_self\" : \"_blank\";\n            const newWindow = window.open(undefined, target); // https://mathiasbynens.github.io/rel-noopener/\n\n            if (newWindow) {\n              newWindow.opener = null;\n              newWindow.location = url;\n            }\n          }\n        }\n      }\n    };\n\n    this.getTopLayerFrameAtSceneCoords = sceneCoords => {\n      const frames = this.scene.getNonDeletedFramesLikes().filter(frame => (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isCursorInFrame)(sceneCoords, frame));\n      return frames.length ? frames[frames.length - 1] : null;\n    };\n\n    this.handleCanvasPointerMove = event => {\n      var _a, _b;\n\n      this.savePointer(event.clientX, event.clientY, this.state.cursorButton);\n      this.lastPointerMoveEvent = event.nativeEvent;\n\n      if (gesture.pointers.has(event.pointerId)) {\n        gesture.pointers.set(event.pointerId, {\n          x: event.clientX,\n          y: event.clientY\n        });\n      }\n\n      const initialScale = gesture.initialScale;\n\n      if (gesture.pointers.size === 2 && gesture.lastCenter && initialScale && gesture.initialDistance) {\n        const center = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getCenter)(gesture.pointers);\n        const deltaX = center.x - gesture.lastCenter.x;\n        const deltaY = center.y - gesture.lastCenter.y;\n        gesture.lastCenter = center;\n        const distance = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getDistance)(Array.from(gesture.pointers.values()));\n        const scaleFactor = !this.state.allowPinchZoom && //zsviczian\n        this.state.activeTool.type === \"freedraw\" && this.state.penMode ? 1 : distance / gesture.initialDistance;\n        const nextZoom = scaleFactor ? (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(initialScale * scaleFactor) : this.state.zoom.value;\n        this.setState(state => {\n          const zoomState = (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n            viewportX: center.x,\n            viewportY: center.y,\n            nextZoom\n          }, state);\n          this.translateCanvas({\n            zoom: zoomState.zoom,\n            scrollX: zoomState.scrollX + deltaX / nextZoom,\n            scrollY: zoomState.scrollY + deltaY / nextZoom,\n            shouldCacheIgnoreZoom: true\n          });\n        });\n        this.resetShouldCacheIgnoreZoomDebounced();\n      } else {\n        gesture.lastCenter = gesture.initialDistance = gesture.initialScale = null;\n      }\n\n      if (isHoldingSpace || isPanning || isDraggingScrollBar || (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isHandToolActive)(this.state)) {\n        return;\n      }\n\n      const isPointerOverScrollBars = (0,_scene__WEBPACK_IMPORTED_MODULE_29__.isOverScrollBars)(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop);\n      const isOverScrollBar = isPointerOverScrollBars.isOverEither;\n\n      if (!this.state.draggingElement && !this.state.multiElement) {\n        if (isOverScrollBar) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n        } else {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n        }\n      }\n\n      const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n      const {\n        x: scenePointerX,\n        y: scenePointerY\n      } = scenePointer;\n\n      if (!this.state.draggingElement && (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.isActiveToolNonLinearSnappable)(this.state.activeTool.type)) {\n        const {\n          originOffset,\n          snapLines\n        } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.getSnapLinesAtPointer)(this.scene.getNonDeletedElements(), this.state, {\n          x: scenePointerX,\n          y: scenePointerY\n        }, event);\n        this.setState(prevState => {\n          const nextSnapLines = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateStable)(prevState.snapLines, snapLines);\n          const nextOriginOffset = prevState.originSnapOffset ? (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateStable)(prevState.originSnapOffset, originOffset) : originOffset;\n\n          if (prevState.snapLines === nextSnapLines && prevState.originSnapOffset === nextOriginOffset) {\n            return null;\n          }\n\n          return {\n            snapLines: nextSnapLines,\n            originSnapOffset: nextOriginOffset\n          };\n        });\n      } else if (!this.state.draggingElement) {\n        this.setState(prevState => {\n          if (prevState.snapLines.length) {\n            return {\n              snapLines: []\n            };\n          }\n\n          return null;\n        });\n      }\n\n      if (this.state.editingLinearElement && !this.state.editingLinearElement.isDragging) {\n        const editingLinearElement = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerMove(event, scenePointerX, scenePointerY, this.state);\n\n        if (editingLinearElement && editingLinearElement !== this.state.editingLinearElement) {\n          // Since we are reading from previous state which is not possible with\n          // automatic batching in React 18 hence using flush sync to synchronously\n          // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.\n          (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n            this.setState({\n              editingLinearElement\n            });\n          });\n        }\n\n        if ((editingLinearElement === null || editingLinearElement === void 0 ? void 0 : editingLinearElement.lastUncommittedPoint) != null) {\n          this.maybeSuggestBindingAtCursor(scenePointer);\n        } else {\n          // causes stack overflow if not sync\n          (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n            this.setState({\n              suggestedBindings: []\n            });\n          });\n        }\n      }\n\n      if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElementType)(this.state.activeTool.type)) {\n        // Hovering with a selected tool or creating new linear element via click\n        // and point\n        const {\n          draggingElement\n        } = this.state;\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(draggingElement, false)) {\n          this.maybeSuggestBindingsForLinearElementAtCoords(draggingElement, [scenePointer], this.state.startBoundElement);\n        } else {\n          this.maybeSuggestBindingAtCursor(scenePointer);\n        }\n      }\n\n      if (this.state.multiElement) {\n        const {\n          multiElement\n        } = this.state;\n        const {\n          x: rx,\n          y: ry\n        } = multiElement;\n        const {\n          points,\n          lastCommittedPoint\n        } = multiElement;\n        const lastPoint = points[points.length - 1];\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n\n        if (lastPoint === lastCommittedPoint) {\n          // if we haven't yet created a temp point and we're beyond commit-zone\n          // threshold, add a point\n          if ((0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(scenePointerX - rx, scenePointerY - ry, lastPoint[0], lastPoint[1]) >= _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n              points: [...points, [scenePointerX - rx, scenePointerY - ry]]\n            });\n          } else {\n            (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER); // in this branch, we're inside the commit zone, and no uncommitted\n            // point exists. Thus do nothing (don't add/remove points).\n          }\n        } else if (points.length > 2 && lastCommittedPoint && (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(scenePointerX - rx, scenePointerY - ry, lastCommittedPoint[0], lastCommittedPoint[1]) < _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n            points: points.slice(0, -1)\n          });\n        } else {\n          const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(scenePointerX, scenePointerY, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n          const [lastCommittedX, lastCommittedY] = (_a = multiElement === null || multiElement === void 0 ? void 0 : multiElement.lastCommittedPoint) !== null && _a !== void 0 ? _a : [0, 0];\n          let dxFromLastCommitted = gridX - rx - lastCommittedX;\n          let dyFromLastCommitted = gridY - ry - lastCommittedY;\n\n          if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event)) {\n            ({\n              width: dxFromLastCommitted,\n              height: dyFromLastCommitted\n            } = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getLockedLinearCursorAlignSize)( // actual coordinate of the last committed point\n            lastCommittedX + rx, lastCommittedY + ry, // cursor-grid coordinate\n            gridX, gridY));\n          }\n\n          if ((0,_math__WEBPACK_IMPORTED_MODULE_28__.isPathALoop)(points, this.state.zoom.value)) {\n            (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n          } // update last uncommitted point\n\n\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n            points: [...points.slice(0, -1), [lastCommittedX + dxFromLastCommitted, lastCommittedY + dyFromLastCommitted]]\n          });\n        }\n\n        return;\n      }\n\n      const hasDeselectedButton = Boolean(event.buttons);\n\n      if (hasDeselectedButton || this.state.activeTool.type !== \"selection\" && this.state.activeTool.type !== \"text\" && this.state.activeTool.type !== \"eraser\") {\n        return;\n      }\n\n      const elements = this.scene.getNonDeletedElements();\n      const selectedElements = this.scene.getSelectedElements(this.state);\n\n      if (selectedElements.length === 1 && !isOverScrollBar && !this.state.editingLinearElement) {\n        const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, scenePointerX, scenePointerY, this.state.zoom, event.pointerType);\n\n        if (elementWithTransformHandleType && elementWithTransformHandleType.transformHandleType) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCursorForResizingElement)(elementWithTransformHandleType));\n          return;\n        }\n      } else if (selectedElements.length > 1 && !isOverScrollBar) {\n        const transformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getTransformHandleTypeFromCoords)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements), scenePointerX, scenePointerY, this.state.zoom, event.pointerType);\n\n        if (transformHandleType) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCursorForResizingElement)({\n            transformHandleType\n          }));\n          return;\n        }\n      }\n\n      const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n      this.hitLinkElement = this.getElementLinkAtPosition(scenePointer, hitElement);\n\n      if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n        return;\n      }\n\n      if (this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id]) {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n        (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.showHyperlinkTooltip)(this.hitLinkElement, this.state);\n\n        if (this.props.onLinkHover) {\n          this.props.onLinkHover(this.hitLinkElement, event);\n        } //zsviczian\n\n      } else {\n        (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.hideHyperlinkToolip)();\n\n        if (hitElement && (hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement)) && this.state.selectedElementIds[hitElement.id] && !this.state.contextMenu && !this.state.showHyperlinkPopup) {\n          this.setState({\n            showHyperlinkPopup: \"info\"\n          });\n        } else if (this.state.activeTool.type === \"text\") {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(hitElement) ? _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.TEXT : _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.CROSSHAIR);\n        } else if (this.state.viewModeEnabled) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n        } else if (isOverScrollBar) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n        } else if (this.state.selectedLinearElement) {\n          this.handleHoverSelectedLinearElement(this.state.selectedLinearElement, scenePointerX, scenePointerY);\n        } else if ( // if using cmd/ctrl, we're not dragging\n        !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n          if ((hitElement || this.isHittingCommonBoundingBoxOfSelectedElements(scenePointer, selectedElements)) && !(hitElement === null || hitElement === void 0 ? void 0 : hitElement.locked)) {\n            if (hitElement && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, event, scenePointerX, scenePointerY)) {\n              (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n              this.setState({\n                activeEmbeddable: {\n                  element: hitElement,\n                  state: \"hover\"\n                }\n              });\n            } else {\n              (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n\n              if (((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"hover\") {\n                this.setState({\n                  activeEmbeddable: null\n                });\n              }\n            }\n          }\n        } else {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n        }\n      }\n    };\n\n    this.handleEraser = (event, pointerDownState, scenePointer) => {\n      this.eraserTrail.addPointToPath(scenePointer.x, scenePointer.y);\n      let didChange = false;\n      const processedGroups = new Set();\n      const nonDeletedElements = this.scene.getNonDeletedElements();\n\n      const processElements = elements => {\n        var _a;\n\n        for (const element of elements) {\n          if (element.locked) {\n            return;\n          }\n\n          if (event.altKey) {\n            if (this.elementsPendingErasure.delete(element.id)) {\n              didChange = true;\n            }\n          } else if (!this.elementsPendingErasure.has(element.id)) {\n            didChange = true;\n            this.elementsPendingErasure.add(element.id);\n          } // (un)erase groups atomically\n\n\n          if (didChange && ((_a = element.groupIds) === null || _a === void 0 ? void 0 : _a.length)) {\n            const shallowestGroupId = element.groupIds.at(-1);\n\n            if (!processedGroups.has(shallowestGroupId)) {\n              processedGroups.add(shallowestGroupId);\n              const elems = (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(nonDeletedElements, shallowestGroupId);\n\n              for (const elem of elems) {\n                if (event.altKey) {\n                  this.elementsPendingErasure.delete(elem.id);\n                } else {\n                  this.elementsPendingErasure.add(elem.id);\n                }\n              }\n            }\n          }\n        }\n      };\n\n      const distance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y, scenePointer.x, scenePointer.y);\n      const threshold = 10 / this.state.zoom.value;\n      const point = Object.assign({}, pointerDownState.lastCoords);\n      let samplingInterval = 0;\n\n      while (samplingInterval <= distance) {\n        const hitElements = this.getElementsAtPosition(point.x, point.y);\n        processElements(hitElements); // Exit since we reached current point\n\n        if (samplingInterval === distance) {\n          break;\n        } // Calculate next point in the line at a distance of sampling interval\n\n\n        samplingInterval = Math.min(samplingInterval + threshold, distance);\n        const distanceRatio = samplingInterval / distance;\n        const nextX = (1 - distanceRatio) * point.x + distanceRatio * scenePointer.x;\n        const nextY = (1 - distanceRatio) * point.y + distanceRatio * scenePointer.y;\n        point.x = nextX;\n        point.y = nextY;\n      }\n\n      pointerDownState.lastCoords.x = scenePointer.x;\n      pointerDownState.lastCoords.y = scenePointer.y;\n\n      if (didChange) {\n        for (const element of this.scene.getNonDeletedElements()) {\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(element) && (this.elementsPendingErasure.has(element.id) || this.elementsPendingErasure.has(element.containerId))) {\n            if (event.altKey) {\n              this.elementsPendingErasure.delete(element.id);\n              this.elementsPendingErasure.delete(element.containerId);\n            } else {\n              this.elementsPendingErasure.add(element.id);\n              this.elementsPendingErasure.add(element.containerId);\n            }\n          }\n        }\n\n        this.elementsPendingErasure = new Set(this.elementsPendingErasure);\n        this.onSceneUpdated();\n      }\n    }; // set touch moving for mobile context menu\n\n\n    this.handleTouchMove = event => {\n      invalidateContextMenu = true;\n    };\n\n    this.handleCanvasPointerDown = event => {\n      var _a, _b;\n\n      this.focusContainer(); //zsviczian\n\n      this.maybeCleanupAfterMissingPointerUp(event.nativeEvent);\n      this.maybeUnfollowRemoteUser(); // since contextMenu options are potentially evaluated on each render,\n      // and an contextMenu action may depend on selection state, we must\n      // close the contextMenu before we update the selection on pointerDown\n      // (e.g. resetting selection)\n\n      if (this.state.contextMenu) {\n        this.setState({\n          contextMenu: null\n        });\n      }\n\n      if (this.state.snapLines) {\n        this.setAppState({\n          snapLines: []\n        });\n      }\n\n      this.updateGestureOnPointerDown(event); // if dragging element is freedraw and another pointerdown event occurs\n      // a second finger is on the screen\n      // discard the freedraw element if it is very short because it is likely\n      // just a spike, otherwise finalize the freedraw element when the second\n      // finger is lifted\n\n      if (event.pointerType === \"touch\" && this.state.draggingElement && this.state.draggingElement.type === \"freedraw\") {\n        const element = this.state.draggingElement;\n        this.updateScene(Object.assign(Object.assign({}, element.points.length < 10 ? {\n          elements: this.scene.getElementsIncludingDeleted().filter(el => el.id !== element.id)\n        } : {}), {\n          appState: {\n            draggingElement: null,\n            editingElement: null,\n            startBoundElement: null,\n            suggestedBindings: [],\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.keys(this.state.selectedElementIds).filter(key => key !== element.id).reduce((obj, key) => {\n              obj[key] = this.state.selectedElementIds[key];\n              return obj;\n            }, {}), this.state)\n          }\n        }));\n        return;\n      } // remove any active selection when we start to interact with canvas\n      // (mainly, we care about removing selection outside the component which\n      //  would prevent our copy handling otherwise)\n\n\n      const selection = document.getSelection();\n\n      if (selection === null || selection === void 0 ? void 0 : selection.anchorNode) {\n        selection.removeAllRanges();\n      }\n\n      this.maybeOpenContextMenuAfterPointerDownOnTouchDevices(event); //fires only once, if pen is detected, penMode is enabled\n      //the user can disable this by toggling the penMode button\n\n      if (!this.state.penDetected && event.pointerType === \"pen\") {\n        this.setState(prevState => {\n          return {\n            penMode: true,\n            penDetected: true\n          };\n        });\n      }\n\n      if (!this.device.isTouchScreen && [\"pen\", \"touch\"].includes(event.pointerType)) {\n        this.device = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(this.device, {\n          isTouchScreen: true\n        });\n      }\n\n      if (isPanning) {\n        return;\n      }\n\n      this.lastPointerDownEvent = event; // we must exit before we set `cursorButton` state and `savePointer`\n      // else it will send pointer state & laser pointer events in collab when\n      // panning\n\n      if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {\n        return;\n      }\n\n      this.setState({\n        lastPointerDownWith: event.pointerType,\n        cursorButton: \"down\"\n      });\n      this.savePointer(event.clientX, event.clientY, \"down\");\n\n      if (event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.ERASER && this.state.activeTool.type !== _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.eraser) {\n        this.setState({\n          activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, {\n            type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.eraser,\n            lastActiveToolBeforeEraser: this.state.activeTool\n          })\n        }, () => {\n          this.handleCanvasPointerDown(event);\n\n          const onPointerUp = () => {\n            unsubPointerUp();\n            unsubCleanup === null || unsubCleanup === void 0 ? void 0 : unsubCleanup();\n\n            if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n              this.setState({\n                activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, Object.assign(Object.assign({}, this.state.activeTool.lastActiveTool || {\n                  type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.selection\n                }), {\n                  lastActiveToolBeforeEraser: null\n                }))\n              });\n            }\n          };\n\n          const unsubPointerUp = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp, {\n            once: true\n          });\n          let unsubCleanup; // subscribe inside rAF lest it'd be triggered on the same pointerdown\n          // if we start erasing while coming from blurred document since\n          // we cleanup pointer events on focus\n\n          requestAnimationFrame(() => {\n            unsubCleanup = this.missingPointerEventCleanupEmitter.once(onPointerUp);\n          });\n        });\n        return;\n      } // only handle left mouse button or touch\n\n\n      if (event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.MAIN && event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.TOUCH && event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.ERASER) {\n        return;\n      } // don't select while panning\n\n\n      if (gesture.pointers.size > 1) {\n        return;\n      } // State for the duration of a pointer interaction, which starts with a\n      // pointerDown event, ends with a pointerUp event (or another pointerDown)\n\n\n      const pointerDownState = this.initialPointerDownState(event);\n      this.setState({\n        selectedElementsAreBeingDragged: false\n      });\n\n      if (this.handleDraggingScrollBar(event, pointerDownState)) {\n        return;\n      }\n\n      this.clearSelectionIfNotUsingSelection();\n      this.updateBindingEnabledOnPointerMove(event);\n\n      if (this.handleSelectionOnPointerDown(event, pointerDownState)) {\n        return;\n      }\n\n      const allowOnPointerDown = !this.state.penMode || event.pointerType !== \"touch\" || this.state.activeTool.type === \"selection\" || this.state.activeTool.type === \"text\" || this.state.activeTool.type === \"image\";\n\n      if (!allowOnPointerDown) {\n        return;\n      }\n\n      if (this.state.activeTool.type === \"text\") {\n        this.handleTextOnPointerDown(event, pointerDownState);\n        return;\n      } else if (this.state.activeTool.type === \"arrow\" || this.state.activeTool.type === \"line\") {\n        this.handleLinearElementOnPointerDown(event, this.state.activeTool.type, pointerDownState);\n      } else if (this.state.activeTool.type === \"image\") {\n        // reset image preview on pointerdown\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.CROSSHAIR); // retrieve the latest element as the state may be stale\n\n        const pendingImageElement = this.state.pendingImageElementId && this.scene.getElement(this.state.pendingImageElementId);\n\n        if (!pendingImageElement) {\n          return;\n        }\n\n        this.setState({\n          draggingElement: pendingImageElement,\n          editingElement: pendingImageElement,\n          pendingImageElementId: null,\n          multiElement: null\n        });\n        const {\n          x,\n          y\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n        const frame = this.getTopLayerFrameAtSceneCoords({\n          x,\n          y\n        });\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(pendingImageElement, {\n          x,\n          y,\n          frameId: frame ? frame.id : null\n        });\n      } else if (this.state.activeTool.type === \"freedraw\") {\n        this.handleFreeDrawElementOnPointerDown(event, this.state.activeTool.type, pointerDownState);\n      } else if (this.state.activeTool.type === \"custom\") {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n      } else if (this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.frame || this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe) {\n        this.createFrameElementOnPointerDown(pointerDownState, this.state.activeTool.type);\n      } else if (this.state.activeTool.type === \"laser\") {\n        this.laserTrails.startPath(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y);\n      } else if (this.state.activeTool.type !== \"eraser\" && this.state.activeTool.type !== \"hand\" && this.state.activeTool.type !== \"mermaid\") {\n        this.createGenericElementOnPointerDown(this.state.activeTool.type, pointerDownState);\n      }\n\n      (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onPointerDown) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.activeTool, pointerDownState);\n      this.onPointerDownEmitter.trigger(this.state.activeTool, pointerDownState, event);\n\n      if (this.state.activeTool.type === \"eraser\") {\n        this.eraserTrail.startPath(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y);\n      }\n\n      const onPointerMove = this.onPointerMoveFromPointerDownHandler(pointerDownState);\n      const onPointerUp = this.onPointerUpFromPointerDownHandler(pointerDownState);\n      const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);\n      const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);\n      this.missingPointerEventCleanupEmitter.once(_event => onPointerUp(_event || event.nativeEvent));\n\n      if (!this.state.viewModeEnabled || this.state.activeTool.type === \"laser\") {\n        window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n        window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n        window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, onKeyDown);\n        window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, onKeyUp);\n        pointerDownState.eventListeners.onMove = onPointerMove;\n        pointerDownState.eventListeners.onUp = onPointerUp;\n        pointerDownState.eventListeners.onKeyUp = onKeyUp;\n        pointerDownState.eventListeners.onKeyDown = onKeyDown;\n      }\n    };\n\n    this.handleCanvasPointerUp = event => {\n      var _a, _b;\n\n      this.removePointer(event);\n      this.lastPointerUpEvent = event;\n      const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n        clientX: event.clientX,\n        clientY: event.clientY\n      }, this.state);\n      const clicklength = event.timeStamp - ((_b = (_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a.timeStamp) !== null && _b !== void 0 ? _b : 0);\n\n      if (this.device.editor.isMobile && clicklength < 300) {\n        const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, event, scenePointer.x, scenePointer.y)) {\n          this.handleEmbeddableCenterClick(hitElement);\n          return;\n        }\n      }\n\n      if (this.device.isTouchScreen) {\n        const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n        this.hitLinkElement = this.getElementLinkAtPosition(scenePointer, hitElement);\n      }\n\n      if (this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id]) {\n        if (clicklength < 300 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(this.hitLinkElement) && !(0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLinkIcon)(this.hitLinkElement, this.state, [scenePointer.x, scenePointer.y])) {\n          this.handleEmbeddableCenterClick(this.hitLinkElement);\n        } else {\n          this.redirectToLink(event, this.device.isTouchScreen);\n        }\n      } else if (this.state.viewModeEnabled) {\n        this.setState({\n          activeEmbeddable: null,\n          selectedElementIds: {}\n        });\n      }\n    };\n\n    this.maybeOpenContextMenuAfterPointerDownOnTouchDevices = event => {\n      // deal with opening context menu on touch devices\n      if (event.pointerType === \"touch\") {\n        invalidateContextMenu = false;\n\n        if (touchTimeout) {\n          // If there's already a touchTimeout, this means that there's another\n          // touch down and we are doing another touch, so we shouldn't open the\n          // context menu.\n          invalidateContextMenu = true;\n        } else {\n          // open the context menu with the first touch's clientX and clientY\n          // if the touch is not moving\n          touchTimeout = window.setTimeout(() => {\n            touchTimeout = 0;\n\n            if (!invalidateContextMenu) {\n              this.handleCanvasContextMenu(event);\n            }\n          }, _constants__WEBPACK_IMPORTED_MODULE_12__.TOUCH_CTX_MENU_TIMEOUT);\n        }\n      }\n    };\n\n    this.resetContextMenuTimer = () => {\n      clearTimeout(touchTimeout);\n      touchTimeout = 0;\n      invalidateContextMenu = false;\n    };\n    /**\r\n     * pointerup may not fire in certian cases (user tabs away...), so in order\r\n     * to properly cleanup pointerdown state, we need to fire any hanging\r\n     * pointerup handlers manually\r\n     */\n\n\n    this.maybeCleanupAfterMissingPointerUp = event => {\n      lastPointerUp === null || lastPointerUp === void 0 ? void 0 : lastPointerUp();\n      this.missingPointerEventCleanupEmitter.trigger(event).clear();\n    }; // Returns whether the event is a panning\n\n\n    this.handleCanvasPanUsingWheelOrSpaceDrag = event => {\n      if (!(gesture.pointers.size <= 1 && (event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.WHEEL || event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.MAIN && isHoldingSpace || (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isHandToolActive)(this.state) || this.state.viewModeEnabled && !(0,_appState__WEBPACK_IMPORTED_MODULE_10__.isLaserPointerActive)(this.state))) || (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement)) {\n        return false;\n      }\n\n      isPanning = true;\n      event.preventDefault();\n      let nextPastePrevented = false;\n      const isLinux = /Linux/.test(window.navigator.platform);\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRABBING);\n      let {\n        clientX: lastX,\n        clientY: lastY\n      } = event;\n      const onPointerMove = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdatesThrottled)(event => {\n        const deltaX = lastX - event.clientX;\n        const deltaY = lastY - event.clientY;\n        lastX = event.clientX;\n        lastY = event.clientY;\n        /*\r\n         * Prevent paste event if we move while middle clicking on Linux.\r\n         * See issue #1383.\r\n         */\n\n        if (isLinux && !nextPastePrevented && (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1)) {\n          nextPastePrevented = true;\n          /* Prevent the next paste event */\n\n          const preventNextPaste = event => {\n            document.body.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n            event.stopPropagation();\n          };\n          /*\r\n           * Reenable next paste in case of disabled middle click paste for\r\n           * any reason:\r\n           * - right click paste\r\n           * - empty clipboard\r\n           */\n\n\n          const enableNextPaste = () => {\n            setTimeout(() => {\n              document.body.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n              window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, enableNextPaste);\n            }, 100);\n          };\n\n          document.body.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n          window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, enableNextPaste);\n        }\n\n        this.translateCanvas({\n          scrollX: this.state.scrollX - deltaX / this.state.zoom.value,\n          scrollY: this.state.scrollY - deltaY / this.state.zoom.value\n        });\n      });\n      const teardown = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(lastPointerUp = () => {\n        lastPointerUp = null;\n        isPanning = false;\n\n        if (!isHoldingSpace) {\n          if (this.state.viewModeEnabled) {\n            (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n          } else {\n            (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n          }\n        }\n\n        this.setState({\n          cursorButton: \"up\"\n        });\n        this.savePointer(event.clientX, event.clientY, \"up\");\n        window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n        window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, teardown);\n        window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, teardown);\n        onPointerMove.flush();\n      });\n      window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, teardown);\n      window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove, {\n        passive: true\n      });\n      window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, teardown);\n      return true;\n    };\n\n    this.clearSelectionIfNotUsingSelection = () => {\n      if (this.state.activeTool.type !== \"selection\") {\n        this.setState({\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n          selectedGroupIds: {},\n          editingGroupId: null,\n          activeEmbeddable: null\n        });\n      }\n    };\n    /**\r\n     * @returns whether the pointer event has been completely handled\r\n     */\n\n\n    this.handleSelectionOnPointerDown = (event, pointerDownState) => {\n      var _a;\n\n      if (this.state.activeTool.type === \"selection\") {\n        const elements = this.scene.getNonDeletedElements();\n        const selectedElements = this.scene.getSelectedElements(this.state);\n\n        if (selectedElements.length === 1 && !this.state.editingLinearElement) {\n          const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType);\n\n          if (elementWithTransformHandleType != null) {\n            this.setState({\n              resizingElement: elementWithTransformHandleType.element\n            });\n            pointerDownState.resize.handleType = elementWithTransformHandleType.transformHandleType;\n          }\n        } else if (selectedElements.length > 1) {\n          pointerDownState.resize.handleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getTransformHandleTypeFromCoords)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements), pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType);\n        }\n\n        if (pointerDownState.resize.handleType) {\n          pointerDownState.resize.isResizing = true;\n          pointerDownState.resize.offset = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.tupleToCoors)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getResizeOffsetXY)(pointerDownState.resize.handleType, selectedElements, pointerDownState.origin.x, pointerDownState.origin.y));\n\n          if (selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElements[0]) && selectedElements[0].points.length === 2) {\n            pointerDownState.resize.arrowDirection = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getResizeArrowDirection)(pointerDownState.resize.handleType, selectedElements[0]);\n          }\n        } else {\n          if (this.state.selectedLinearElement) {\n            const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;\n            const ret = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerDown(event, this.state, this.history, pointerDownState.origin, linearElementEditor);\n\n            if (ret.hitElement) {\n              pointerDownState.hit.element = ret.hitElement;\n            }\n\n            if (ret.linearElementEditor) {\n              this.setState({\n                selectedLinearElement: ret.linearElementEditor\n              });\n\n              if (this.state.editingLinearElement) {\n                this.setState({\n                  editingLinearElement: ret.linearElementEditor\n                });\n              }\n            }\n\n            if (ret.didAddPoint) {\n              return true;\n            }\n          } // hitElement may already be set above, so check first\n\n\n          pointerDownState.hit.element = (_a = pointerDownState.hit.element) !== null && _a !== void 0 ? _a : this.getElementAtPosition(pointerDownState.origin.x, pointerDownState.origin.y);\n\n          if (pointerDownState.hit.element) {\n            // Early return if pointer is hitting link icon\n            const hitLinkElement = this.getElementLinkAtPosition({\n              x: pointerDownState.origin.x,\n              y: pointerDownState.origin.y\n            }, pointerDownState.hit.element);\n\n            if (hitLinkElement) {\n              return false;\n            }\n          } // For overlapped elements one position may hit\n          // multiple elements\n\n\n          pointerDownState.hit.allHitElements = this.getElementsAtPosition(pointerDownState.origin.x, pointerDownState.origin.y);\n          const hitElement = pointerDownState.hit.element;\n          const someHitElementIsSelected = pointerDownState.hit.allHitElements.some(element => this.isASelectedElement(element));\n\n          if ((hitElement === null || !someHitElementIsSelected) && !event.shiftKey && !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) {\n            this.clearSelection(hitElement);\n          }\n\n          if (this.state.editingLinearElement) {\n            this.setState({\n              selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n                [this.state.editingLinearElement.elementId]: true\n              }, this.state)\n            }); // If we click on something\n          } else if (hitElement != null) {\n            // on CMD/CTRL, drill down to hit element regardless of groups etc.\n            if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n              if (!this.state.selectedElementIds[hitElement.id]) {\n                pointerDownState.hit.wasAddedToSelection = true;\n              }\n\n              this.setState(prevState => Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.editGroupForSelectedElement)(prevState, hitElement)), {\n                previousSelectedElementIds: this.state.selectedElementIds\n              })); // mark as not completely handled so as to allow dragging etc.\n\n              return false;\n            } // deselect if item is selected\n            // if shift is not clicked, this will always return true\n            // otherwise, it will trigger selection based on current\n            // state of the box\n\n\n            if (!this.state.selectedElementIds[hitElement.id]) {\n              // if we are currently editing a group, exiting editing mode and deselect the group.\n              if (this.state.editingGroupId && !(0,_groups__WEBPACK_IMPORTED_MODULE_23__.isElementInGroup)(hitElement, this.state.editingGroupId)) {\n                this.setState({\n                  selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n                  selectedGroupIds: {},\n                  editingGroupId: null,\n                  activeEmbeddable: null\n                });\n              } // Add hit element to selection. At this point if we're not holding\n              // SHIFT the previously selected element(s) were deselected above\n              // (make sure you use setState updater to use latest state)\n              // With shift-selection, we want to make sure that frames and their containing\n              // elements are not selected at the same time.\n\n\n              if (!someHitElementIsSelected && !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) {\n                this.setState(prevState => {\n                  const nextSelectedElementIds = Object.assign(Object.assign({}, prevState.selectedElementIds), {\n                    [hitElement.id]: true\n                  });\n                  const previouslySelectedElements = [];\n                  Object.keys(prevState.selectedElementIds).forEach(id => {\n                    const element = this.scene.getElement(id);\n                    element && previouslySelectedElements.push(element);\n                  }); // if hitElement is frame-like, deselect all of its elements\n                  // if they are selected\n\n                  if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(hitElement)) {\n                    (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameChildren)(previouslySelectedElements, hitElement.id).forEach(element => {\n                      delete nextSelectedElementIds[element.id];\n                    });\n                  } else if (hitElement.frameId) {\n                    // if hitElement is in a frame and its frame has been selected\n                    // disable selection for the given element\n                    if (nextSelectedElementIds[hitElement.frameId]) {\n                      delete nextSelectedElementIds[hitElement.id];\n                    }\n                  } else {\n                    // hitElement is neither a frame nor an element in a frame\n                    // but since hitElement could be in a group with some frames\n                    // this means selecting hitElement will have the frames selected as well\n                    // because we want to keep the invariant:\n                    // - frames and their elements are not selected at the same time\n                    // we deselect elements in those frames that were previously selected\n                    const groupIds = hitElement.groupIds;\n                    const framesInGroups = new Set(groupIds.flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element)).map(frame => frame.id));\n\n                    if (framesInGroups.size > 0) {\n                      previouslySelectedElements.forEach(element => {\n                        if (element.frameId && framesInGroups.has(element.frameId)) {\n                          // deselect element and groups containing the element\n                          delete nextSelectedElementIds[element.id];\n                          element.groupIds.flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).forEach(element => {\n                            delete nextSelectedElementIds[element.id];\n                          });\n                        }\n                      });\n                    }\n                  }\n\n                  return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n                    editingGroupId: prevState.editingGroupId,\n                    selectedElementIds: nextSelectedElementIds\n                  }, this.scene.getNonDeletedElements(), prevState, this)), {\n                    showHyperlinkPopup: hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) ? \"info\" : false\n                  });\n                });\n                pointerDownState.hit.wasAddedToSelection = true;\n              }\n            }\n          }\n\n          this.setState({\n            previousSelectedElementIds: this.state.selectedElementIds\n          });\n        }\n      }\n\n      return false;\n    };\n\n    this.handleTextOnPointerDown = (event, pointerDownState) => {\n      // if we're currently still editing text, clicking outside\n      // should only finalize it, not create another (irrespective\n      // of state.activeTool.locked)\n      if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement)) {\n        return;\n      }\n\n      let sceneX = pointerDownState.origin.x;\n      let sceneY = pointerDownState.origin.y;\n      const element = this.getElementAtPosition(sceneX, sceneY, {\n        includeBoundTextElement: true\n      }); // FIXME\n\n      let container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getTextBindableContainerAtPosition)(this.scene.getNonDeletedElements(), this.state, sceneX, sceneY);\n\n      if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.hasBoundTextElement)(element)) {\n        container = element;\n        sceneX = element.x + element.width / 2;\n        sceneY = element.y + element.height / 2;\n      }\n\n      this.startTextEditing({\n        sceneX,\n        sceneY,\n        insertAtParentCenter: !event.altKey,\n        container\n      });\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n\n      if (!this.state.activeTool.locked) {\n        this.setState({\n          activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, {\n            type: \"selection\"\n          })\n        });\n      }\n    };\n\n    this.handleFreeDrawElementOnPointerDown = (event, elementType, pointerDownState) => {\n      // Begin a mark capture. This does not have to update state yet.\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, null);\n      const strokeOptions = this.state.currentStrokeOptions; //zsviczian\n\n      const simulatePressure = (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? false : event.pressure === 0.5;\n      const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n        x: gridX,\n        y: gridY\n      });\n      const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newFreeDrawElement)(Object.assign(Object.assign({\n        type: elementType,\n        x: gridX,\n        y: gridY,\n        strokeColor: this.state.currentItemStrokeColor,\n        backgroundColor: this.state.currentItemBackgroundColor,\n        fillStyle: this.state.currentItemFillStyle,\n        strokeWidth: this.state.currentItemStrokeWidth,\n        strokeStyle: this.state.currentItemStrokeStyle,\n        roughness: this.state.currentItemRoughness,\n        opacity: this.state.currentItemOpacity,\n        roundness: null,\n        simulatePressure,\n        locked: false\n      }, strokeOptions //zsviczian\n      ? {\n        customData: {\n          strokeOptions\n        }\n      } : {}), {\n        frameId: topLayerFrame ? topLayerFrame.id : null\n      }));\n      this.setState(prevState => {\n        const nextSelectedElementIds = Object.assign({}, prevState.selectedElementIds);\n        delete nextSelectedElementIds[element.id];\n        return {\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedElementIds, prevState)\n        };\n      });\n      const pressures = element.simulatePressure ? element.pressures : [//zsviczian\n      ...element.pressures, (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? 1 : event.pressure];\n      (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n        points: [[0, 0]],\n        pressures\n      });\n      const boundElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerDownState.origin, this.scene);\n\n      if (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.highlighter) {\n        //zsviczian\n        this.scene.replaceAllElements([element, ...this.scene.getElementsIncludingDeleted()]);\n      } else {\n        this.scene.addNewElement(element);\n      }\n\n      this.setState({\n        draggingElement: element,\n        editingElement: element,\n        startBoundElement: boundElement,\n        suggestedBindings: []\n      });\n    };\n\n    this.insertIframeElement = ({\n      sceneX,\n      sceneY,\n      width,\n      height\n    }) => {\n      var _a;\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n      const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newIframeElement)({\n        type: \"iframe\",\n        x: gridX,\n        y: gridY,\n        strokeColor: \"transparent\",\n        backgroundColor: \"transparent\",\n        fillStyle: this.state.currentItemFillStyle,\n        strokeWidth: this.state.currentItemStrokeWidth,\n        strokeStyle: this.state.currentItemStrokeStyle,\n        roughness: this.state.currentItemRoughness,\n        roundness: this.getCurrentItemRoundness(\"iframe\"),\n        opacity: this.state.currentItemOpacity,\n        locked: false,\n        width,\n        height\n      });\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted(), element]);\n      return element;\n    }; //create rectangle element with youtube top left on nearest grid point width / hight 640/360\n\n\n    this.insertEmbeddableElement = ({\n      sceneX,\n      sceneY,\n      link\n    }) => {\n      var _a;\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n      const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.getEmbedLink)(link);\n\n      if (!embedLink) {\n        return;\n      }\n\n      if (embedLink.warning) {\n        this.setToast({\n          message: embedLink.warning,\n          closable: true\n        });\n      }\n\n      const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newEmbeddableElement)({\n        type: \"embeddable\",\n        x: gridX,\n        y: gridY,\n        strokeColor: \"transparent\",\n        backgroundColor: \"transparent\",\n        fillStyle: this.state.currentItemFillStyle,\n        strokeWidth: this.state.currentItemStrokeWidth,\n        strokeStyle: this.state.currentItemStrokeStyle,\n        roughness: this.state.currentItemRoughness,\n        roundness: this.getCurrentItemRoundness(\"embeddable\"),\n        opacity: this.state.currentItemOpacity,\n        locked: false,\n        width: embedLink.intrinsicSize.w,\n        height: embedLink.intrinsicSize.h,\n        link\n      });\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted(), element]);\n      return element;\n    };\n\n    this.createImageElement = ({\n      sceneX,\n      sceneY,\n      addToFrameUnderCursor = true\n    }) => {\n      var _a;\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n      const topLayerFrame = addToFrameUnderCursor ? this.getTopLayerFrameAtSceneCoords({\n        x: gridX,\n        y: gridY\n      }) : null;\n      const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newImageElement)({\n        type: \"image\",\n        x: gridX,\n        y: gridY,\n        strokeColor: this.state.currentItemStrokeColor,\n        backgroundColor: this.state.currentItemBackgroundColor,\n        fillStyle: this.state.currentItemFillStyle,\n        strokeWidth: this.state.currentItemStrokeWidth,\n        strokeStyle: this.state.currentItemStrokeStyle,\n        roughness: this.state.currentItemRoughness,\n        roundness: null,\n        opacity: this.state.currentItemOpacity,\n        locked: false,\n        frameId: topLayerFrame ? topLayerFrame.id : null\n      });\n      return element;\n    };\n\n    this.handleLinearElementOnPointerDown = (event, elementType, pointerDownState) => {\n      if (this.state.multiElement) {\n        const {\n          multiElement\n        } = this.state; // finalize if completing a loop\n\n        if (multiElement.type === \"line\" && (0,_math__WEBPACK_IMPORTED_MODULE_28__.isPathALoop)(multiElement.points, this.state.zoom.value)) {\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n            lastCommittedPoint: multiElement.points[multiElement.points.length - 1]\n          });\n          this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n          return;\n        }\n\n        const {\n          x: rx,\n          y: ry,\n          lastCommittedPoint\n        } = multiElement; // clicking inside commit zone → finalize arrow\n\n        if (multiElement.points.length > 1 && lastCommittedPoint && (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerDownState.origin.x - rx, pointerDownState.origin.y - ry, lastCommittedPoint[0], lastCommittedPoint[1]) < _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n          this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n          return;\n        }\n\n        this.setState(prevState => ({\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n            [multiElement.id]: true\n          }), prevState)\n        })); // clicking outside commit zone → update reference for last committed\n        // point\n\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n          lastCommittedPoint: multiElement.points[multiElement.points.length - 1]\n        });\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n      } else {\n        const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n        const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n          x: gridX,\n          y: gridY\n        });\n        /* If arrow is pre-arrowheads, it will have undefined for both start and end arrowheads.\r\n        If so, we want it to be null for start and \"arrow\" for end. If the linear item is not\r\n        an arrow, we want it to be null for both. Otherwise, we want it to use the\r\n        values from appState. */\n\n        const {\n          currentItemStartArrowhead,\n          currentItemEndArrowhead\n        } = this.state;\n        const [startArrowhead, endArrowhead] = elementType === \"arrow\" ? [currentItemStartArrowhead, currentItemEndArrowhead] : [null, null];\n        const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newLinearElement)({\n          type: elementType,\n          x: gridX,\n          y: gridY,\n          strokeColor: this.state.currentItemStrokeColor,\n          backgroundColor: this.state.currentItemBackgroundColor,\n          fillStyle: this.state.currentItemFillStyle,\n          strokeWidth: this.state.currentItemStrokeWidth,\n          strokeStyle: this.state.currentItemStrokeStyle,\n          roughness: this.state.currentItemRoughness,\n          opacity: this.state.currentItemOpacity,\n          roundness: this.state.currentItemRoundness === \"round\" ? {\n            type: _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.PROPORTIONAL_RADIUS\n          } : null,\n          startArrowhead,\n          endArrowhead,\n          locked: false,\n          frameId: topLayerFrame ? topLayerFrame.id : null\n        });\n        this.setState(prevState => {\n          const nextSelectedElementIds = Object.assign({}, prevState.selectedElementIds);\n          delete nextSelectedElementIds[element.id];\n          return {\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedElementIds, prevState)\n          };\n        });\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n          points: [...element.points, [0, 0]]\n        });\n        const boundElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerDownState.origin, this.scene);\n        this.scene.addNewElement(element);\n        this.setState({\n          draggingElement: element,\n          editingElement: element,\n          startBoundElement: boundElement,\n          suggestedBindings: []\n        });\n      }\n    };\n\n    this.createGenericElementOnPointerDown = (elementType, pointerDownState) => {\n      var _a;\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n      const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n        x: gridX,\n        y: gridY\n      });\n      const baseElementAttributes = {\n        x: gridX,\n        y: gridY,\n        strokeColor: this.state.currentItemStrokeColor,\n        backgroundColor: this.state.currentItemBackgroundColor,\n        fillStyle: this.state.currentItemFillStyle,\n        strokeWidth: this.state.currentItemStrokeWidth,\n        strokeStyle: this.state.currentItemStrokeStyle,\n        roughness: this.state.currentItemRoughness,\n        opacity: this.state.currentItemOpacity,\n        roundness: this.getCurrentItemRoundness(elementType),\n        locked: false,\n        frameId: topLayerFrame ? topLayerFrame.id : null\n      };\n      let element;\n\n      if (elementType === \"embeddable\") {\n        element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newEmbeddableElement)(Object.assign({\n          type: \"embeddable\"\n        }, baseElementAttributes));\n      } else {\n        element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newElement)(Object.assign({\n          type: elementType\n        }, baseElementAttributes));\n      }\n\n      if (element.type === \"selection\") {\n        this.setState({\n          selectionElement: element,\n          draggingElement: element\n        });\n      } else {\n        this.scene.addNewElement(element);\n        this.setState({\n          multiElement: null,\n          draggingElement: element,\n          editingElement: element\n        });\n      }\n    };\n\n    this.createFrameElementOnPointerDown = (pointerDownState, type) => {\n      var _a;\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n      const constructorOpts = Object.assign(Object.assign({\n        x: gridX,\n        y: gridY,\n        opacity: this.state.currentItemOpacity,\n        locked: false\n      }, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE), this.state.frameColor ? {\n        //zsviczian\n        customData: {\n          frameColor: this.state.frameColor\n        }\n      } : {});\n      const frame = type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe ? (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newMagicFrameElement)(constructorOpts) : (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newFrameElement)(constructorOpts);\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted(), frame]);\n      this.setState({\n        multiElement: null,\n        draggingElement: frame,\n        editingElement: frame\n      });\n    };\n\n    this.restoreReadyToEraseElements = () => {\n      this.elementsPendingErasure = new Set();\n      this.onSceneUpdated();\n    };\n\n    this.eraseElements = () => {\n      let didChange = false;\n      const elements = this.scene.getElementsIncludingDeleted().map(ele => {\n        if (this.elementsPendingErasure.has(ele.id) || ele.frameId && this.elementsPendingErasure.has(ele.frameId) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele) && this.elementsPendingErasure.has(ele.containerId)) {\n          didChange = true;\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            isDeleted: true\n          });\n        }\n\n        return ele;\n      });\n      this.elementsPendingErasure = new Set();\n\n      if (didChange) {\n        this.history.resumeRecording();\n        this.scene.replaceAllElements(elements);\n      }\n    };\n\n    this.initializeImage = async ({\n      imageFile,\n      imageElement: _imageElement,\n      showCursorImagePreview = false\n    }) => {\n      var _a, _b, _c, _d; // at this point this should be guaranteed image file, but we do this check\n      // to satisfy TS down the line\n\n\n      if (!(0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.isSupportedImageFile)(imageFile)) {\n        throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\"));\n      }\n\n      const mimeType = imageFile.type;\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, \"wait\");\n\n      if (mimeType === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg) {\n        try {\n          imageFile = (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.SVGStringToFile)(await (0,_element_image__WEBPACK_IMPORTED_MODULE_40__.normalizeSVG)(await imageFile.text()), imageFile.name);\n        } catch (error) {\n          console.warn(error);\n          throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.svgImageInsertError\"));\n        }\n      } // generate image id (by default the file digest) before any\n      // resizing/compression takes place to keep it more portable\n\n\n      const fileId = await (((_b = (_a = this.props).generateIdForFile) === null || _b === void 0 ? void 0 : _b.call(_a, imageFile)) || (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.generateIdFromFile)(imageFile));\n\n      if (!fileId) {\n        console.warn(\"Couldn't generate file id or the supplied `generateIdForFile` didn't resolve to one.\");\n        throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\"));\n      }\n\n      const existingFileData = this.files[fileId];\n\n      if (!(existingFileData === null || existingFileData === void 0 ? void 0 : existingFileData.dataURL)) {\n        try {\n          imageFile = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.resizeImageFile)(imageFile, {\n            maxWidthOrHeight: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT\n          });\n        } catch (error) {\n          console.error(\"Error trying to resizing image file on insertion\", error);\n        }\n\n        if (imageFile.size > _constants__WEBPACK_IMPORTED_MODULE_12__.MAX_ALLOWED_FILE_BYTES) {\n          throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.fileTooBig\", {\n            maxSize: `${Math.trunc(_constants__WEBPACK_IMPORTED_MODULE_12__.MAX_ALLOWED_FILE_BYTES / 1024 / 1024)}MB`\n          }));\n        }\n      }\n\n      if (showCursorImagePreview) {\n        const dataURL = (_c = this.files[fileId]) === null || _c === void 0 ? void 0 : _c.dataURL; // optimization so that we don't unnecessarily resize the original\n        // full-size file for cursor preview\n        // (it's much faster to convert the resized dataURL to File)\n\n        const resizedFile = dataURL && (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.dataURLToFile)(dataURL);\n        this.setImagePreviewCursor(resizedFile || imageFile);\n      }\n\n      const dataURL = ((_d = this.files[fileId]) === null || _d === void 0 ? void 0 : _d.dataURL) || (await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.getDataURL)(imageFile));\n      const imageElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(_imageElement, {\n        fileId\n      }, false);\n      return new Promise(async (resolve, reject) => {\n        var _a;\n\n        try {\n          this.files = Object.assign(Object.assign({}, this.files), {\n            [fileId]: {\n              mimeType,\n              id: fileId,\n              dataURL,\n              created: Date.now(),\n              lastRetrieved: Date.now()\n            }\n          });\n          const cachedImageData = this.imageCache.get(fileId);\n\n          if (!cachedImageData) {\n            this.addNewImagesToImageCache();\n            await this.updateImageCache([imageElement]);\n          }\n\n          if ((cachedImageData === null || cachedImageData === void 0 ? void 0 : cachedImageData.image) instanceof Promise) {\n            await cachedImageData.image;\n          }\n\n          if (this.state.pendingImageElementId !== imageElement.id && ((_a = this.state.draggingElement) === null || _a === void 0 ? void 0 : _a.id) !== imageElement.id) {\n            this.initializeImageDimensions(imageElement, true);\n          }\n\n          resolve(imageElement);\n        } catch (error) {\n          console.error(error);\n          reject(new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\")));\n        } finally {\n          if (!showCursorImagePreview) {\n            (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n          }\n        }\n      });\n    };\n    /**\r\n     * inserts image into elements array and rerenders\r\n     */\n\n\n    this.insertImageElement = async (imageElement, imageFile, showCursorImagePreview) => {\n      // we should be handling all cases upstream, but in case we forget to handle\n      // a future case, let's throw here\n      if (!this.isToolSupported(\"image\")) {\n        this.setState({\n          errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n        });\n        return;\n      }\n\n      this.scene.addNewElement(imageElement);\n\n      try {\n        return await this.initializeImage({\n          imageFile,\n          imageElement,\n          showCursorImagePreview\n        });\n      } catch (error) {\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(imageElement, {\n          isDeleted: true\n        });\n        this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n        this.setState({\n          errorMessage: error.message || (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\")\n        });\n        return null;\n      }\n    };\n\n    this.setImagePreviewCursor = async imageFile => {\n      // mustn't be larger than 128 px\n      // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property\n      const cursorImageSizePx = 96;\n      const imagePreview = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.resizeImageFile)(imageFile, {\n        maxWidthOrHeight: cursorImageSizePx\n      });\n      let previewDataURL = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.getDataURL)(imagePreview); // SVG cannot be resized via `resizeImageFile` so we resize by rendering to\n      // a small canvas\n\n      if (imageFile.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg) {\n        const img = await (0,_element_image__WEBPACK_IMPORTED_MODULE_40__.loadHTMLImageElement)(previewDataURL);\n        let height = Math.min(img.height, cursorImageSizePx);\n        let width = height * (img.width / img.height);\n\n        if (width > cursorImageSizePx) {\n          width = cursorImageSizePx;\n          height = width * (img.height / img.width);\n        }\n\n        const canvas = document.createElement(\"canvas\");\n        canvas.height = height;\n        canvas.width = width;\n        const context = canvas.getContext(\"2d\");\n        context.drawImage(img, 0, 0, width, height);\n        previewDataURL = canvas.toDataURL(_constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg);\n      }\n\n      if (this.state.pendingImageElementId) {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, `url(${previewDataURL}) 4 4, auto`);\n      }\n    };\n\n    this.onImageAction = async ({\n      insertOnCanvasDirectly\n    }) => {\n      try {\n        const clientX = this.state.width / 2 + this.state.offsetLeft;\n        const clientY = this.state.height / 2 + this.state.offsetTop;\n        const {\n          x,\n          y\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n          clientX,\n          clientY\n        }, this.state);\n        const imageFile = await (0,_data_filesystem__WEBPACK_IMPORTED_MODULE_42__.fileOpen)({\n          description: \"Image\",\n          extensions: Object.keys(_constants__WEBPACK_IMPORTED_MODULE_12__.IMAGE_MIME_TYPES)\n        });\n        const imageElement = this.createImageElement({\n          sceneX: x,\n          sceneY: y,\n          addToFrameUnderCursor: false\n        });\n\n        if (insertOnCanvasDirectly) {\n          this.insertImageElement(imageElement, imageFile);\n          this.initializeImageDimensions(imageElement);\n          this.setState({\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n              [imageElement.id]: true\n            }, this.state)\n          }, () => {\n            this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n          });\n        } else {\n          this.setState({\n            pendingImageElementId: imageElement.id\n          }, () => {\n            this.insertImageElement(imageElement, imageFile,\n            /* showCursorImagePreview */\n            true);\n          });\n        }\n      } catch (error) {\n        if (error.name !== \"AbortError\") {\n          console.error(error);\n        } else {\n          console.warn(error);\n        }\n\n        this.setState({\n          pendingImageElementId: null,\n          editingElement: null,\n          activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, {\n            type: \"selection\"\n          })\n        }, () => {\n          this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n        });\n      }\n    };\n\n    this.initializeImageDimensions = (imageElement, forceNaturalSize = false) => {\n      var _a;\n\n      const image = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(imageElement) && ((_a = this.imageCache.get(imageElement.fileId)) === null || _a === void 0 ? void 0 : _a.image);\n\n      if (!image || image instanceof Promise) {\n        if (imageElement.width < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value && imageElement.height < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value) {\n          const placeholderSize = 100 / this.state.zoom.value;\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(imageElement, {\n            x: imageElement.x - placeholderSize / 2,\n            y: imageElement.y - placeholderSize / 2,\n            width: placeholderSize,\n            height: placeholderSize\n          });\n        }\n\n        return;\n      }\n\n      if (forceNaturalSize || // if user-created bounding box is below threshold, assume the\n      // intention was to click instead of drag, and use the image's\n      // intrinsic size\n      imageElement.width < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value && imageElement.height < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value) {\n        const minHeight = Math.max(this.state.height - 120, 160); // max 65% of canvas height, clamped to <300px, vh - 120px>\n\n        const maxHeight = Math.min(minHeight, Math.floor(this.state.height * 0.5) / this.state.zoom.value);\n        const height = Math.min(image.naturalHeight, maxHeight);\n        const width = height * (image.naturalWidth / image.naturalHeight); // add current imageElement width/height to account for previous centering\n        // of the placeholder image\n\n        const x = imageElement.x + imageElement.width / 2 - width / 2;\n        const y = imageElement.y + imageElement.height / 2 - height / 2;\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(imageElement, {\n          x,\n          y,\n          width,\n          height\n        });\n      }\n    };\n    /** updates image cache, refreshing updated elements and/or setting status\r\n        to error for images that fail during <img> element creation */\n\n\n    this.updateImageCache = async (elements, files = this.files) => {\n      const {\n        updatedFiles,\n        erroredFiles\n      } = await (0,_element_image__WEBPACK_IMPORTED_MODULE_40__.updateImageCache)({\n        imageCache: this.imageCache,\n        fileIds: elements.map(element => element.fileId),\n        files\n      });\n\n      if (updatedFiles.size || erroredFiles.size) {\n        for (const element of elements) {\n          if (updatedFiles.has(element.fileId)) {\n            _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element);\n          }\n        }\n      }\n\n      if (erroredFiles.size) {\n        this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().map(element => {\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(element) && erroredFiles.has(element.fileId)) {\n            return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(element, {\n              status: \"error\"\n            });\n          }\n\n          return element;\n        }));\n      }\n\n      return {\n        updatedFiles,\n        erroredFiles\n      };\n    };\n    /** adds new images to imageCache and re-renders if needed */\n\n\n    this.addNewImagesToImageCache = async (imageElements = (0,_element_image__WEBPACK_IMPORTED_MODULE_40__.getInitializedImageElements)(this.scene.getNonDeletedElements()), files = this.files) => {\n      const uncachedImageElements = imageElements.filter(element => !element.isDeleted && !this.imageCache.has(element.fileId));\n\n      if (uncachedImageElements.length) {\n        const {\n          updatedFiles\n        } = await this.updateImageCache(uncachedImageElements, files);\n\n        if (updatedFiles.size) {\n          this.scene.informMutation();\n        }\n      }\n    };\n    /** generally you should use `addNewImagesToImageCache()` directly if you need\r\n     *  to render new images. This is just a failsafe  */\n\n\n    this.scheduleImageRefresh = lodash_throttle__WEBPACK_IMPORTED_MODULE_41___default()(() => {\n      this.addNewImagesToImageCache();\n    }, _constants__WEBPACK_IMPORTED_MODULE_12__.IMAGE_RENDER_TIMEOUT);\n\n    this.updateBindingEnabledOnPointerMove = event => {\n      const shouldEnableBinding = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.shouldEnableBindingForPointerEvent)(event);\n\n      if (this.state.isBindingEnabled !== shouldEnableBinding) {\n        this.setState({\n          isBindingEnabled: shouldEnableBinding\n        });\n      }\n    };\n\n    this.maybeSuggestBindingAtCursor = pointerCoords => {\n      const hoveredBindableElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerCoords, this.scene);\n      this.setState({\n        suggestedBindings: hoveredBindableElement != null ? [hoveredBindableElement] : []\n      });\n    };\n\n    this.maybeSuggestBindingsForLinearElementAtCoords = (linearElement,\n    /** scene coords */\n    pointerCoords, // During line creation the start binding hasn't been written yet\n    // into `linearElement`\n    oppositeBindingBoundElement) => {\n      if (!pointerCoords.length) {\n        return;\n      }\n\n      const suggestedBindings = pointerCoords.reduce((acc, coords) => {\n        const hoveredBindableElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(coords, this.scene);\n\n        if (hoveredBindableElement != null && !(0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isLinearElementSimpleAndAlreadyBound)(linearElement, oppositeBindingBoundElement === null || oppositeBindingBoundElement === void 0 ? void 0 : oppositeBindingBoundElement.id, hoveredBindableElement)) {\n          acc.push(hoveredBindableElement);\n        }\n\n        return acc;\n      }, []);\n      this.setState({\n        suggestedBindings\n      });\n    };\n\n    this.handleInteractiveCanvasRef = canvas => {\n      var _a, _b, _c; // canvas is null when unmounting\n\n\n      if (canvas !== null) {\n        this.interactiveCanvas = canvas; // -----------------------------------------------------------------------\n        // NOTE wheel, touchstart, touchend events must be registered outside\n        // of react because react binds them them passively (so we can't prevent\n        // default on them)\n\n        this.interactiveCanvas.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.handleWheel);\n        this.interactiveCanvas.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_START, this.onTouchStart);\n        this.interactiveCanvas.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_END, this.onTouchEnd); // -----------------------------------------------------------------------\n      } else {\n        (_a = this.interactiveCanvas) === null || _a === void 0 ? void 0 : _a.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.handleWheel);\n        (_b = this.interactiveCanvas) === null || _b === void 0 ? void 0 : _b.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_START, this.onTouchStart);\n        (_c = this.interactiveCanvas) === null || _c === void 0 ? void 0 : _c.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_END, this.onTouchEnd);\n      }\n    };\n\n    this.handleAppOnDrop = async event => {\n      var _a, _b, _c, _d;\n\n      if (this.props.onDrop) {\n        try {\n          if ((await this.props.onDrop(event)) === false) {\n            return;\n          }\n        } catch (e) {\n          console.error(e);\n        }\n      } // must be retrieved first, in the same frame\n\n\n      const {\n        file,\n        fileHandle\n      } = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.getFileFromEvent)(event);\n      const {\n        x: sceneX,\n        y: sceneY\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n\n      try {\n        // if image tool not supported, don't show an error here and let it fall\n        // through so we still support importing scene data from images. If no\n        // scene data encoded, we'll show an error then\n        if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.isSupportedImageFile)(file) && this.isToolSupported(\"image\")) {\n          // first attempt to decode scene from the image if it's embedded\n          // ---------------------------------------------------------------------\n          if ((file === null || file === void 0 ? void 0 : file.type) === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.png || (file === null || file === void 0 ? void 0 : file.type) === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg) {\n            try {\n              const scene = await (0,_data__WEBPACK_IMPORTED_MODULE_13__.loadFromBlob)(file, this.state, this.scene.getElementsIncludingDeleted(), fileHandle);\n              this.syncActionResult(Object.assign(Object.assign({}, scene), {\n                appState: Object.assign(Object.assign({}, scene.appState || this.state), {\n                  isLoading: false\n                }),\n                replaceFiles: true,\n                commitToHistory: true\n              }));\n              return;\n            } catch (error) {\n              if (error.name !== \"EncodingError\") {\n                throw error;\n              }\n            }\n          } // if no scene is embedded or we fail for whatever reason, fall back\n          // to importing as regular image\n          // ---------------------------------------------------------------------\n\n\n          const imageElement = this.createImageElement({\n            sceneX,\n            sceneY\n          });\n          this.insertImageElement(imageElement, file);\n          this.initializeImageDimensions(imageElement);\n          this.setState({\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n              [imageElement.id]: true\n            }, this.state)\n          });\n          return;\n        }\n      } catch (error) {\n        return this.setState({\n          isLoading: false,\n          errorMessage: error.message\n        });\n      }\n\n      const libraryJSON = event.dataTransfer.getData(_constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidrawlib);\n\n      if (libraryJSON && typeof libraryJSON === \"string\") {\n        try {\n          const libraryItems = (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.parseLibraryJSON)(libraryJSON);\n          this.addElementsFromPasteOrLibrary({\n            elements: (0,_data_library__WEBPACK_IMPORTED_MODULE_14__.distributeLibraryItemsOnSquareGrid)(libraryItems),\n            position: event,\n            files: null\n          });\n        } catch (error) {\n          this.setState({\n            errorMessage: error.message\n          });\n        }\n\n        return;\n      }\n\n      if (file) {\n        // Attempt to parse an excalidraw/excalidrawlib file\n        await this.loadFileToCanvas(file, fileHandle);\n      }\n\n      if ((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes(\"text/plain\")) {\n        const text = (_c = event.dataTransfer) === null || _c === void 0 ? void 0 : _c.getData(\"text\");\n\n        if (text && (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.embeddableURLValidator)(text, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(text) || ((_d = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.getEmbedLink)(text)) === null || _d === void 0 ? void 0 : _d.type) === \"video\")) {\n          const embeddable = this.insertEmbeddableElement({\n            sceneX,\n            sceneY,\n            link: (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.normalizeLink)(text)\n          });\n\n          if (embeddable) {\n            this.setState({\n              selectedElementIds: {\n                [embeddable.id]: true\n              }\n            });\n          }\n        }\n      }\n    };\n\n    this.loadFileToCanvas = async (file, fileHandle) => {\n      file = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.normalizeFile)(file);\n\n      try {\n        const ret = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.loadSceneOrLibraryFromBlob)(file, this.state, this.scene.getElementsIncludingDeleted(), fileHandle);\n\n        if (ret.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidraw) {\n          this.setState({\n            isLoading: true\n          });\n          this.syncActionResult(Object.assign(Object.assign({}, ret.data), {\n            appState: Object.assign(Object.assign({}, ret.data.appState || this.state), {\n              isLoading: false\n            }),\n            replaceFiles: true,\n            commitToHistory: true\n          }));\n        } else if (ret.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidrawlib) {\n          await this.library.updateLibrary({\n            libraryItems: file,\n            merge: true,\n            openLibraryMenu: true\n          }).catch(error => {\n            console.error(error);\n            this.setState({\n              errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.importLibraryError\")\n            });\n          });\n        }\n      } catch (error) {\n        if (error instanceof _errors__WEBPACK_IMPORTED_MODULE_58__.ImageSceneDataError && error.code === \"IMAGE_NOT_CONTAINS_SCENE_DATA\" && !this.isToolSupported(\"image\")) {\n          this.setState({\n            isLoading: false,\n            errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n          });\n          return;\n        }\n\n        this.setState({\n          isLoading: false,\n          errorMessage: error.message\n        });\n      }\n    };\n\n    this.handleCanvasContextMenu = event => {\n      event.preventDefault();\n\n      if ((\"pointerType\" in event.nativeEvent && event.nativeEvent.pointerType === \"touch\" || \"pointerType\" in event.nativeEvent && event.nativeEvent.pointerType === \"pen\" && // always allow if user uses a pen secondary button\n      event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.SECONDARY) && this.state.activeTool.type !== \"selection\") {\n        return;\n      }\n\n      const {\n        x,\n        y\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n      const element = this.getElementAtPosition(x, y, {\n        preferSelected: true,\n        includeLockedElements: true\n      });\n      const selectedElements = this.scene.getSelectedElements(this.state);\n      const isHittingCommonBoundBox = this.isHittingCommonBoundingBoxOfSelectedElements({\n        x,\n        y\n      }, selectedElements);\n      const type = element || isHittingCommonBoundBox ? \"element\" : \"canvas\";\n      const container = this.excalidrawContainerRef.current;\n      const {\n        top: offsetTop,\n        left: offsetLeft\n      } = container.getBoundingClientRect();\n      const left = event.clientX - offsetLeft;\n      const top = event.clientY - offsetTop;\n      (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"contextMenu\", \"openContextMenu\", type);\n      this.setState(Object.assign(Object.assign({}, element && !this.state.selectedElementIds[element.id] ? Object.assign(Object.assign(Object.assign({}, this.state), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n        editingGroupId: this.state.editingGroupId,\n        selectedElementIds: {\n          [element.id]: true\n        }\n      }, this.scene.getNonDeletedElements(), this.state, this)), {\n        selectedLinearElement: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(element) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(element, this.scene) : null\n      }) : this.state), {\n        showHyperlinkPopup: false\n      }), () => {\n        this.setState({\n          contextMenu: {\n            top,\n            left,\n            items: this.getContextMenuItems(type)\n          }\n        });\n      });\n    };\n\n    this.maybeDragNewGenericElement = (pointerDownState, event) => {\n      var _a, _b, _c, _d, _e;\n\n      const draggingElement = this.state.draggingElement;\n      const pointerCoords = pointerDownState.lastCoords;\n\n      if (!draggingElement) {\n        return;\n      }\n\n      if (draggingElement.type === \"selection\" && this.state.activeTool.type !== \"eraser\") {\n        (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragNewElement)(draggingElement, this.state.activeTool.type, pointerDownState.origin.x, pointerDownState.origin.y, pointerCoords.x, pointerCoords.y, (0,_utils__WEBPACK_IMPORTED_MODULE_33__.distance)(pointerDownState.origin.x, pointerCoords.x), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.distance)(pointerDownState.origin.y, pointerCoords.y), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event));\n      } else {\n        let [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n        const image = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(draggingElement) && ((_a = this.imageCache.get(draggingElement.fileId)) === null || _a === void 0 ? void 0 : _a.image);\n        const aspectRatio = image && !(image instanceof Promise) ? image.width / image.height : null;\n        this.maybeCacheReferenceSnapPoints(event, [draggingElement]);\n        const {\n          snapOffset,\n          snapLines\n        } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.snapNewElement)(draggingElement, this.state, event, {\n          x: pointerDownState.originInGrid.x + ((_c = (_b = this.state.originSnapOffset) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0),\n          y: pointerDownState.originInGrid.y + ((_e = (_d = this.state.originSnapOffset) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : 0)\n        }, {\n          x: gridX - pointerDownState.originInGrid.x,\n          y: gridY - pointerDownState.originInGrid.y\n        });\n        gridX += snapOffset.x;\n        gridY += snapOffset.y;\n        this.setState({\n          snapLines\n        });\n        (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragNewElement)(draggingElement, this.state.activeTool.type, pointerDownState.originInGrid.x, pointerDownState.originInGrid.y, gridX, gridY, (0,_utils__WEBPACK_IMPORTED_MODULE_33__.distance)(pointerDownState.originInGrid.x, gridX), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.distance)(pointerDownState.originInGrid.y, gridY), (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(draggingElement) ? !(0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event) : (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event), aspectRatio, this.state.originSnapOffset);\n        this.maybeSuggestBindingForAll([draggingElement]); // highlight elements that are to be added to frames on frames creation\n\n        if (this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.frame || this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe) {\n          this.setState({\n            elementsToHighlight: (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), draggingElement, this.state)\n          });\n        }\n      }\n    };\n\n    this.maybeHandleResize = (pointerDownState, event) => {\n      const selectedElements = this.scene.getSelectedElements(this.state);\n      const selectedFrames = selectedElements.filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element));\n      const transformHandleType = pointerDownState.resize.handleType;\n\n      if (selectedFrames.length > 0 && transformHandleType === \"rotation\") {\n        return false;\n      }\n\n      this.setState({\n        // TODO: rename this state field to \"isScaling\" to distinguish\n        // it from the generic \"isResizing\" which includes scaling and\n        // rotating\n        isResizing: transformHandleType && transformHandleType !== \"rotation\",\n        isRotating: transformHandleType === \"rotation\",\n        activeEmbeddable: null\n      });\n      const pointerCoords = pointerDownState.lastCoords;\n      let [resizeX, resizeY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x - pointerDownState.resize.offset.x, pointerCoords.y - pointerDownState.resize.offset.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n      const frameElementsOffsetsMap = new Map();\n      selectedFrames.forEach(frame => {\n        const elementsInFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameChildren)(this.scene.getNonDeletedElements(), frame.id);\n        elementsInFrame.forEach(element => {\n          frameElementsOffsetsMap.set(frame.id + element.id, {\n            x: element.x - frame.x,\n            y: element.y - frame.y\n          });\n        });\n      }); // check needed for avoiding flickering when a key gets pressed\n      // during dragging\n\n      if (!this.state.selectedElementsAreBeingDragged) {\n        const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n        const dragOffset = {\n          x: gridX - pointerDownState.originInGrid.x,\n          y: gridY - pointerDownState.originInGrid.y\n        };\n        const originalElements = [...pointerDownState.originalElements.values()];\n        this.maybeCacheReferenceSnapPoints(event, selectedElements);\n        const {\n          snapOffset,\n          snapLines\n        } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.snapResizingElements)(selectedElements, (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getSelectedElements)(originalElements, this.state), this.state, event, dragOffset, transformHandleType);\n        resizeX += snapOffset.x;\n        resizeY += snapOffset.y;\n        this.setState({\n          snapLines\n        });\n      }\n\n      if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.transformElements)(pointerDownState, transformHandleType, selectedElements, pointerDownState.resize.arrowDirection, (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event), selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(selectedElements[0]) ? !(0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event) : (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event), resizeX, resizeY, pointerDownState.resize.center.x, pointerDownState.resize.center.y, this.state)) {\n        this.maybeSuggestBindingForAll(selectedElements);\n        const elementsToHighlight = new Set();\n        selectedFrames.forEach(frame => {\n          (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), frame, this.state).forEach(element => elementsToHighlight.add(element));\n        });\n        this.setState({\n          elementsToHighlight: [...elementsToHighlight]\n        });\n        return true;\n      }\n\n      return false;\n    };\n\n    this.getContextMenuItems = type => {\n      const options = [];\n      options.push(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsPng, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsSvg); // canvas contextMenu\n      // -------------------------------------------------------------------------\n\n      if (type === \"canvas\") {\n        if (this.state.viewModeEnabled) {\n          return [...options, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleGridMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleZenMode, _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_38__.actionToggleViewMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleStats, _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.actionToggleLaserPointer];\n        }\n\n        return [_actions_actionClipboard__WEBPACK_IMPORTED_MODULE_53__.actionPaste, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsPng, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsSvg, _actions__WEBPACK_IMPORTED_MODULE_5__.copyText, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSelectAll, _actions_actionElementLock__WEBPACK_IMPORTED_MODULE_49__.actionUnlockAllElements, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleGridMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleObjectsSnapMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleZenMode, _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_38__.actionToggleViewMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleStats];\n      } // element contextMenu\n      // -------------------------------------------------------------------------\n\n\n      options.push(_actions__WEBPACK_IMPORTED_MODULE_5__.copyText);\n\n      if (this.state.viewModeEnabled) {\n        return [_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, ...options];\n      }\n\n      return [_actions__WEBPACK_IMPORTED_MODULE_5__.actionCut, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, _actions_actionClipboard__WEBPACK_IMPORTED_MODULE_53__.actionPaste, _actions_actionFrame__WEBPACK_IMPORTED_MODULE_54__.actionSelectAllElementsInFrame, _actions_actionFrame__WEBPACK_IMPORTED_MODULE_54__.actionRemoveAllElementsFromFrame, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, ...options, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyStyles, _actions__WEBPACK_IMPORTED_MODULE_5__.actionPasteStyles, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionGroup, _actions__WEBPACK_IMPORTED_MODULE_5__.actionUnbindText, _actions__WEBPACK_IMPORTED_MODULE_5__.actionBindText, _actions_actionBoundText__WEBPACK_IMPORTED_MODULE_60__.actionWrapTextInContainer, _actions__WEBPACK_IMPORTED_MODULE_5__.actionUngroup, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionAddToLibrary, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSendBackward, _actions__WEBPACK_IMPORTED_MODULE_5__.actionBringForward, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSendToBack, _actions__WEBPACK_IMPORTED_MODULE_5__.actionBringToFront, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipHorizontal, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipVertical, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleLinearEditor, _actions__WEBPACK_IMPORTED_MODULE_5__.actionLink, _actions__WEBPACK_IMPORTED_MODULE_5__.actionDuplicateSelection, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleElementLock, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionDeleteSelected];\n    };\n\n    this.handleWheel = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(event => {\n      event.preventDefault();\n\n      if (isPanning) {\n        return;\n      }\n\n      const {\n        deltaX,\n        deltaY\n      } = event; // note that event.ctrlKey is necessary to handle pinch zooming\n\n      if ( //zsviczian\n      (event.metaKey || event.ctrlKey) && !this.state.allowWheelZoom || !(event.metaKey || event.ctrlKey) && this.state.allowWheelZoom) {\n        const sign = Math.sign(deltaY);\n        const MAX_STEP = _constants__WEBPACK_IMPORTED_MODULE_12__.ZOOM_STEP * 100;\n        const absDelta = Math.abs(deltaY);\n        let delta = deltaY;\n\n        if (absDelta > MAX_STEP) {\n          delta = MAX_STEP * sign;\n        }\n\n        let newZoom = this.state.zoom.value - delta / 100; // increase zoom steps the more zoomed-in we are (applies to >100% only)\n\n        newZoom += Math.log10(Math.max(1, this.state.zoom.value)) * -sign * // reduced amplification for small deltas (small movements on a trackpad)\n        Math.min(1, absDelta / 20);\n        this.translateCanvas(state => Object.assign(Object.assign({}, (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n          viewportX: this.lastViewportPosition.x,\n          viewportY: this.lastViewportPosition.y,\n          nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(newZoom)\n        }, state)), {\n          shouldCacheIgnoreZoom: true\n        }));\n        this.resetShouldCacheIgnoreZoomDebounced();\n        return;\n      } // scroll horizontally when shift pressed\n\n\n      if (event.shiftKey) {\n        this.translateCanvas(({\n          zoom,\n          scrollX\n        }) => ({\n          // on Mac, shift+wheel tends to result in deltaX\n          scrollX: scrollX - (deltaY || deltaX) / zoom.value\n        }));\n        return;\n      }\n\n      this.translateCanvas(({\n        zoom,\n        scrollX,\n        scrollY\n      }) => ({\n        scrollX: scrollX - deltaX / zoom.value,\n        scrollY: scrollY - deltaY / zoom.value\n      }));\n    });\n\n    this.savePointer = (x, y, button) => {\n      var _a, _b;\n\n      if (!x || !y) {\n        return;\n      }\n\n      const {\n        x: sceneX,\n        y: sceneY\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n        clientX: x,\n        clientY: y\n      }, this.state);\n\n      if (isNaN(sceneX) || isNaN(sceneY)) {// sometimes the pointer goes off screen\n      }\n\n      const pointer = {\n        x: sceneX,\n        y: sceneY,\n        tool: this.state.activeTool.type === \"laser\" ? \"laser\" : \"pointer\"\n      };\n      (_b = (_a = this.props).onPointerUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, {\n        pointer,\n        button,\n        pointersMap: gesture.pointers\n      });\n    };\n\n    this.resetShouldCacheIgnoreZoomDebounced = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.debounce)(() => {\n      if (!this.unmounted) {\n        this.setState({\n          shouldCacheIgnoreZoom: false\n        });\n      }\n    }, 300);\n\n    this.updateDOMRect = cb => {\n      var _a;\n\n      if ((_a = this.excalidrawContainerRef) === null || _a === void 0 ? void 0 : _a.current) {\n        const excalidrawContainer = this.excalidrawContainerRef.current;\n        const {\n          width,\n          height,\n          left: offsetLeft,\n          top: offsetTop\n        } = excalidrawContainer.getBoundingClientRect();\n        const {\n          width: currentWidth,\n          height: currentHeight,\n          offsetTop: currentOffsetTop,\n          offsetLeft: currentOffsetLeft\n        } = this.state;\n\n        if (width === currentWidth && height === currentHeight && offsetLeft === currentOffsetLeft && offsetTop === currentOffsetTop) {\n          if (cb) {\n            cb();\n          }\n\n          return;\n        } //zsviczian\n\n\n        if (width === 0 || height === 0) {\n          if (cb) {\n            cb();\n          }\n\n          return;\n        }\n\n        this.setState({\n          width,\n          height,\n          offsetLeft,\n          offsetTop\n        }, () => {\n          cb && cb();\n        });\n      }\n    };\n\n    this.refresh = () => {\n      this.setState(Object.assign({}, this.getCanvasOffsets()));\n    };\n\n    const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)();\n    const {\n      excalidrawAPI,\n      viewModeEnabled = false,\n      zenModeEnabled = false,\n      gridModeEnabled = false,\n      objectsSnapModeEnabled = false,\n      theme = defaultAppState.theme,\n      name = defaultAppState.name,\n      initState,\n      //zsviczian\n      obsidianHostPlugin //zsviczian\n\n    } = props;\n    this.state = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultAppState), {\n      theme,\n      isLoading: true\n    }), this.getCanvasOffsets()), {\n      viewModeEnabled,\n      zenModeEnabled,\n      objectsSnapModeEnabled,\n      gridSize: gridModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.GRID_SIZE : null,\n      name,\n      width: window.innerWidth,\n      height: window.innerHeight\n    }), initState !== null && initState !== void 0 ? initState : {});\n    this.id = (0,nanoid__WEBPACK_IMPORTED_MODULE_86__.nanoid)();\n    hostPlugin = obsidianHostPlugin; //zsviczian\n\n    this.library = new _data_library__WEBPACK_IMPORTED_MODULE_14__[\"default\"](this);\n    this.actionManager = new _actions_manager__WEBPACK_IMPORTED_MODULE_7__.ActionManager(this.syncActionResult, () => this.state, () => this.scene.getElementsIncludingDeleted(), this);\n    this.scene = new _scene_Scene__WEBPACK_IMPORTED_MODULE_30__[\"default\"]();\n    this.canvas = document.createElement(\"canvas\");\n    this.rc = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_3__[\"default\"].canvas(this.canvas);\n    this.renderer = new _scene_Renderer__WEBPACK_IMPORTED_MODULE_66__.Renderer(this.scene);\n\n    if (excalidrawAPI) {\n      const api = {\n        updateScene: this.updateScene,\n        updateLibrary: this.library.updateLibrary,\n        addFiles: this.addFiles,\n        resetScene: this.resetScene,\n        getSceneElementsIncludingDeleted: this.getSceneElementsIncludingDeleted,\n        history: {\n          clear: this.resetHistory\n        },\n        scrollToContent: this.scrollToContent,\n        zoomToFit: this.zoomToFit,\n        startLineEditor: this.startLineEditor,\n        getSceneElements: this.getSceneElements,\n        getAppState: () => this.state,\n        getFiles: () => this.files,\n        registerAction: action => {\n          this.actionManager.registerAction(action);\n        },\n        refresh: this.refresh,\n        setToast: this.setToast,\n        updateContainerSize: this.updateContainerSize,\n        id: this.id,\n        setLocalFont: this.setLocalFont,\n        selectElements: this.selectElements,\n        sendBackward: this.sendBackward,\n        bringForward: this.bringForward,\n        sendToBack: this.sendToBack,\n        bringToFront: this.bringToFront,\n        setMobileModeAllowed: this.setMobileModeAllowed,\n        setActiveTool: this.setActiveTool,\n        setCursor: this.setCursor,\n        resetCursor: this.resetCursor,\n        updateFrameRendering: this.updateFrameRendering,\n        toggleSidebar: this.toggleSidebar,\n        getHTMLIFrameElement: id => this.getHTMLIFrameElement(id),\n        onChange: cb => this.onChangeEmitter.on(cb),\n        onPointerDown: cb => this.onPointerDownEmitter.on(cb),\n        onPointerUp: cb => this.onPointerUpEmitter.on(cb),\n        onScrollChange: cb => this.onScrollChangeEmitter.on(cb),\n        onUserFollow: cb => this.onUserFollowEmitter.on(cb)\n      };\n\n      if (typeof excalidrawAPI === \"function\") {\n        excalidrawAPI(api);\n      } else {\n        console.error(\"excalidrawAPI should be a function!\");\n      }\n    }\n\n    this.excalidrawContainerValue = {\n      container: this.excalidrawContainerRef.current,\n      id: this.id\n    };\n    this.fonts = new _scene_Fonts__WEBPACK_IMPORTED_MODULE_50__.Fonts({\n      scene: this.scene,\n      onSceneUpdated: this.onSceneUpdated\n    });\n    this.history = new _history__WEBPACK_IMPORTED_MODULE_24__[\"default\"]();\n    this.actionManager.registerAll(_actions_register__WEBPACK_IMPORTED_MODULE_8__.actions);\n    this.actionManager.registerAction((0,_actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__.createUndoAction)(this.history));\n    this.actionManager.registerAction((0,_actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__.createRedoAction)(this.history));\n  }\n\n  onWindowMessage(event) {\n    if (event.origin !== \"https://player.vimeo.com\" && event.origin !== \"https://www.youtube.com\") {\n      return;\n    }\n\n    let data = null;\n\n    try {\n      data = JSON.parse(event.data);\n    } catch (e) {}\n\n    if (!data) {\n      return;\n    }\n\n    switch (event.origin) {\n      case \"https://player.vimeo.com\":\n        //Allowing for multiple instances of Excalidraw running in the window\n        if (data.method === \"paused\") {\n          let source = null;\n          const iframes = document.body.querySelectorAll(\"iframe.excalidraw__embeddable\");\n\n          if (!iframes) {\n            break;\n          }\n\n          for (const iframe of iframes) {\n            if (iframe.contentWindow === event.source) {\n              source = iframe.contentWindow;\n            }\n          }\n\n          source === null || source === void 0 ? void 0 : source.postMessage(JSON.stringify({\n            method: data.value ? \"play\" : \"pause\",\n            value: true\n          }), \"*\");\n        }\n\n        break;\n\n      case \"https://www.youtube.com\":\n        if (data.event === \"infoDelivery\" && data.info && data.id && typeof data.info.playerState === \"number\") {\n          const id = data.id;\n          const playerState = data.info.playerState;\n\n          if (Object.values(_constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES).includes(playerState)) {\n            YOUTUBE_VIDEO_STATES.set(id, playerState);\n          }\n        }\n\n        break;\n    }\n  }\n\n  cacheEmbeddableRef(element, ref) {\n    if (ref) {\n      this.iFrameRefs.set(element.id, ref);\n    }\n  }\n\n  getHTMLIFrameElement(element) {\n    if (typeof element === \"string\") {\n      //zsviczian\n      return this.iFrameRefs.get(element);\n    }\n\n    return this.iFrameRefs.get(element.id);\n  }\n\n  handleEmbeddableCenterClick(element) {\n    var _a, _b, _c, _d;\n\n    if (((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) === element && ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"active\") {\n      return;\n    } // The delay serves two purposes\n    // 1. To prevent first click propagating to iframe on mobile,\n    //    else the click will immediately start and stop the video\n    // 2. If the user double clicks the frame center to activate it\n    //    without the delay youtube will immediately open the video\n    //    in fullscreen mode\n\n\n    setTimeout(() => {\n      this.setState({\n        activeEmbeddable: {\n          element,\n          state: \"active\"\n        },\n        selectedElementIds: {\n          [element.id]: true\n        },\n        draggingElement: null,\n        selectionElement: null\n      });\n    }, 100);\n\n    if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(element)) {\n      return;\n    }\n\n    const iframe = this.getHTMLIFrameElement(element);\n\n    if (!(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow)) {\n      return;\n    }\n\n    if (iframe.src.includes(\"youtube\")) {\n      const state = YOUTUBE_VIDEO_STATES.get(element.id);\n\n      if (!state) {\n        YOUTUBE_VIDEO_STATES.set(element.id, _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.UNSTARTED);\n        iframe.contentWindow.postMessage(JSON.stringify({\n          event: \"listening\",\n          id: element.id\n        }), \"*\");\n      }\n\n      switch (state) {\n        case _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.PLAYING:\n        case _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.BUFFERING:\n          (_c = iframe.contentWindow) === null || _c === void 0 ? void 0 : _c.postMessage(JSON.stringify({\n            event: \"command\",\n            func: \"pauseVideo\",\n            args: \"\"\n          }), \"*\");\n          break;\n\n        default:\n          (_d = iframe.contentWindow) === null || _d === void 0 ? void 0 : _d.postMessage(JSON.stringify({\n            event: \"command\",\n            func: \"playVideo\",\n            args: \"\"\n          }), \"*\");\n      }\n    }\n\n    if (iframe.src.includes(\"player.vimeo.com\")) {\n      iframe.contentWindow.postMessage(JSON.stringify({\n        method: \"paused\" //video play/pause in onWindowMessage handler\n\n      }), \"*\");\n    }\n  }\n\n  isIframeLikeElementCenter(el, event, sceneX, sceneY) {\n    var _a, _b;\n\n    return el && !event.altKey && !event.shiftKey && !event.metaKey && !event.ctrlKey && (((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) !== el || ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"hover\" || !this.state.activeEmbeddable) && sceneX >= el.x + el.width / 3 && sceneX <= el.x + 2 * el.width / 3 && sceneY >= el.y + el.height / 3 && sceneY <= el.y + 2 * el.height / 3;\n  }\n\n  renderEmbeddables() {\n    const scale = this.state.zoom.value;\n    const normalizedWidth = this.state.width;\n    const normalizedHeight = this.state.height;\n    const embeddableElements = this.scene.getNonDeletedElements().filter(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(el) && this.embedsValidationStatus.get(el.id) === true || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el));\n    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n      children: embeddableElements.map(el => {\n        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;\n\n        const {\n          x,\n          y\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.sceneCoordsToViewportCoords)({\n          sceneX: el.x,\n          sceneY: el.y\n        }, this.state);\n        const isVisible = (0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementInViewport)(el, normalizedWidth, normalizedHeight, this.state);\n        const hasBeenInitialized = this.initializedEmbeds.has(el.id);\n\n        if (isVisible && !hasBeenInitialized) {\n          this.initializedEmbeds.add(el.id);\n        }\n\n        const shouldRender = isVisible || hasBeenInitialized;\n\n        if (!shouldRender) {\n          return null;\n        }\n\n        let src;\n        const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.getEmbedLink)((0,_data_url__WEBPACK_IMPORTED_MODULE_47__.toValidURL)(el.link || \"\")); //zsviczian\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el)) {\n          src = null;\n          const data = ((_b = (_a = el.customData) === null || _a === void 0 ? void 0 : _a.generationData) !== null && _b !== void 0 ? _b : this.magicGenerations.get(el.id)) || {\n            status: \"error\",\n            message: \"No generation data\",\n            code: \"ERR_NO_GENERATION_DATA\"\n          };\n\n          if (data.status === \"done\") {\n            const html = data.html;\n            src = {\n              intrinsicSize: {\n                w: el.width,\n                h: el.height\n              },\n              type: \"document\",\n              srcdoc: () => {\n                return html;\n              }\n            };\n          } else if (data.status === \"pending\") {\n            src = {\n              intrinsicSize: {\n                w: el.width,\n                h: el.height\n              },\n              type: \"document\",\n              srcdoc: () => {\n                return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.createSrcDoc)(`\n                    <style>\n                      html, body {\n                        width: 100%;\n                        height: 100%;\n                        color: ${this.state.theme === \"dark\" ? \"white\" : \"black\"};\n                      }\n                      body {\n                        display: flex;\n                        align-items: center;\n                        justify-content: center;\n                        flex-direction: column;\n                        gap: 1rem;\n                      }\n\n                      .Spinner {\n                        display: flex;\n                        align-items: center;\n                        justify-content: center;\n                        margin-left: auto;\n                        margin-right: auto;\n                      }\n\n                      .Spinner svg {\n                        animation: rotate 1.6s linear infinite;\n                        transform-origin: center center;\n                        width: 40px;\n                        height: 40px;\n                      }\n\n                      .Spinner circle {\n                        stroke: currentColor;\n                        animation: dash 1.6s linear 0s infinite;\n                        stroke-linecap: round;\n                      }\n\n                      @keyframes rotate {\n                        100% {\n                          transform: rotate(360deg);\n                        }\n                      }\n\n                      @keyframes dash {\n                        0% {\n                          stroke-dasharray: 1, 300;\n                          stroke-dashoffset: 0;\n                        }\n                        50% {\n                          stroke-dasharray: 150, 300;\n                          stroke-dashoffset: -200;\n                        }\n                        100% {\n                          stroke-dasharray: 1, 300;\n                          stroke-dashoffset: -280;\n                        }\n                      }\n                    </style>\n                    <div class=\"Spinner\">\n                      <svg\n                        viewBox=\"0 0 100 100\"\n                      >\n                        <circle\n                          cx=\"50\"\n                          cy=\"50\"\n                          r=\"46\"\n                          stroke-width=\"8\"\n                          fill=\"none\"\n                          stroke-miter-limit=\"10\"\n                        />\n                      </svg>\n                    </div>\n                    <div>Generating...</div>\n                  `);\n              }\n            };\n          } else {\n            let message;\n\n            if (data.code === \"ERR_GENERATION_INTERRUPTED\") {\n              message = \"Generation was interrupted...\";\n            } else {\n              message = data.message || \"Generation failed\";\n            }\n\n            src = {\n              intrinsicSize: {\n                w: el.width,\n                h: el.height\n              },\n              type: \"document\",\n              srcdoc: () => {\n                return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.createSrcDoc)(`\n                    <style>\n                    html, body {\n                      height: 100%;\n                    }\n                      body {\n                        display: flex;\n                        flex-direction: column;\n                        align-items: center;\n                        justify-content: center;\n                        color: ${_colors__WEBPACK_IMPORTED_MODULE_74__.COLOR_PALETTE.red[3]};\n                      }\n                      h1, h3 {\n                        margin-top: 0;\n                        margin-bottom: 0.5rem;\n                      }\n                    </style>\n                    <h1>Error!</h1>\n                    <h3>${message}</h3>\n                  `);\n              }\n            };\n          }\n        } else {\n          src = embedLink; //zsviczian getEmbedLink(toValidURL(el.link || \"\"));\n        }\n\n        const isActive = ((_c = this.state.activeEmbeddable) === null || _c === void 0 ? void 0 : _c.element) === el && ((_d = this.state.activeEmbeddable) === null || _d === void 0 ? void 0 : _d.state) === \"active\";\n        const isHovered = ((_e = this.state.activeEmbeddable) === null || _e === void 0 ? void 0 : _e.element) === el && ((_f = this.state.activeEmbeddable) === null || _f === void 0 ? void 0 : _f.state) === \"hover\";\n        const isWebview = //zsviczian\n        !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el) && this.props.renderWebview && (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) !== \"document\" && !((_h = (_g = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) === null || _g === void 0 ? void 0 : _g.startsWith) === null || _h === void 0 ? void 0 : _h.call(_g, \"https://player.vimeo.com\")); // Modify the scale based on el.scale property\n\n        const [xScale, yScale] = (_j = el.scale) !== null && _j !== void 0 ? _j : [1, 1]; //zsviczian\n\n        const scaledTransform = `scale(${scale * xScale}, ${scale * yScale})`;\n        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n          className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(\"excalidraw__embeddable-container\", {\n            \"is-hovered\": isHovered\n          }),\n          style: {\n            transform: isVisible ? `translate(${x - this.state.offsetLeft}px, ${y - this.state.offsetTop}px) ${scaledTransform}` : \"none\",\n            display: isVisible ? \"block\" : \"none\",\n            opacity: (0,_renderer_renderElement__WEBPACK_IMPORTED_MODULE_84__.getRenderOpacity)(el, (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getContainingFrame)(el), this.elementsPendingErasure),\n            [\"--embeddable-radius\"]: `${(0,_math__WEBPACK_IMPORTED_MODULE_28__.getCornerRadius)(Math.min(el.width, el.height), el) / xScale //zsviczian\n            }px`\n          }\n        }, {\n          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n            //this is a hack that addresses isse with embedded excalidraw.com embeddable\n            //https://github.com/excalidraw/excalidraw/pull/6691#issuecomment-1607383938\n\n            /*ref={(ref) => {\r\n              if (!this.excalidrawContainerRef.current) {\r\n                return;\r\n              }\r\n              const container = this.excalidrawContainerRef.current;\r\n              const sh = container.scrollHeight;\r\n              const ch = container.clientHeight;\r\n              if (sh !== ch) {\r\n                container.style.height = `${sh}px`;\r\n                setTimeout(() => {\r\n                  container.style.height = `100%`;\r\n                });\r\n              }\r\n            }}*/\n            className: \"excalidraw__embeddable-container__inner\",\n            style: {\n              width: isVisible ? `${el.width / xScale}px` : 0,\n              height: isVisible ? `${el.height / yScale}px` : 0,\n              transform: isVisible ? `rotate(${el.angle}rad)` : \"none\",\n              pointerEvents: isActive ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled\n            }\n          }, {\n            children: [isHovered && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n              className: \"excalidraw__embeddable-hint\"\n            }, {\n              children: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"buttons.embeddableInteractionButton\")\n            })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n              className: \"excalidraw__embeddable__outer\",\n              style: {\n                padding: `${el.strokeWidth / (4 * el.scale[0])}px` //zsviczian MDEmbeddable round border cutoff issue\n\n              }\n            }, {\n              children: (_m = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(el) ? (_l = (_k = this.props).renderEmbeddable) === null || _l === void 0 ? void 0 : _l.call(_k, el, this.state) //zsviczian\n              : null) !== null && _m !== void 0 ? _m : isWebview ? //zsviczian\n              (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"webview\", {\n                ref: ref => this.cacheEmbeddableRef(el, ref),\n                className: \"excalidraw__embeddable\",\n                src: (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"generic\" || (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"video\" ? embedLink.link : \"\",\n                title: \"Excalidraw Embedded Content\",\n                allowFullScreen: true\n              }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"iframe\", {\n                ref: ref => this.cacheEmbeddableRef(el, ref),\n                className: \"excalidraw__embeddable\",\n                srcDoc: (src === null || src === void 0 ? void 0 : src.type) === \"document\" ? src.srcdoc(this.state.theme) : undefined,\n                src: (src === null || src === void 0 ? void 0 : src.type) !== \"document\" ? (_o = src === null || src === void 0 ? void 0 : src.link) !== null && _o !== void 0 ? _o : \"\" : undefined,\n                // https://stackoverflow.com/q/18470015\n                scrolling: \"no\",\n                referrerPolicy: \"no-referrer-when-downgrade\",\n                title: \"Excalidraw Embedded Content\",\n                allow: \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\",\n                allowFullScreen: true,\n                sandbox: \"allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads\"\n              })\n            }))]\n          }))\n        }), el.id);\n      })\n    });\n  }\n\n  render() {\n    var _a, _b, _c, _d, _e, _f, _g, _h;\n\n    const selectedElements = this.scene.getSelectedElements(this.state);\n    const {\n      renderTopRightUI,\n      renderCustomStats\n    } = this.props;\n    const versionNonce = this.scene.getVersionNonce();\n    const {\n      canvasElements,\n      visibleElements\n    } = this.renderer.getRenderableElements({\n      versionNonce,\n      zoom: this.state.zoom,\n      offsetLeft: this.state.offsetLeft,\n      offsetTop: this.state.offsetTop,\n      scrollX: this.state.scrollX,\n      scrollY: this.state.scrollY,\n      height: this.state.height,\n      width: this.state.width,\n      editingElement: this.state.editingElement,\n      pendingImageElementId: this.state.pendingImageElementId\n    });\n    const shouldBlockPointerEvents = !(this.state.editingElement && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(this.state.editingElement)) && (this.state.selectionElement || this.state.draggingElement || this.state.resizingElement || this.state.activeTool.type === \"laser\" && // technically we can just test on this once we make it more safe\n    this.state.cursorButton === \"down\" || this.state.editingElement && !(0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement));\n    const firstSelectedElement = selectedElements[0];\n    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n      className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(\"excalidraw excalidraw-container\", {\n        \"excalidraw--view-mode\": this.state.viewModeEnabled,\n        \"excalidraw--mobile\": this.device.editor.isMobile || !(this.state.viewModeEnabled || this.state.zenModeEnabled) && this.state.trayModeEnabled //zsviczian\n\n      }),\n      style: Object.assign({\n        //zsviczian\n        [\"--ui-pointerEvents\"]: shouldBlockPointerEvents ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled\n      }, this.state.dynamicStyle),\n      ref: this.excalidrawContainerRef,\n      onDrop: this.handleAppOnDrop,\n      tabIndex: 0,\n      onKeyDown: this.props.handleKeyboardGlobally ? undefined : this.onKeyDown\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(AppContext.Provider, Object.assign({\n        value: this\n      }, {\n        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(AppPropsContext.Provider, Object.assign({\n          value: this.props\n        }, {\n          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawContainerContext.Provider, Object.assign({\n            value: this.excalidrawContainerValue\n          }, {\n            children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DeviceContext.Provider, Object.assign({\n              value: this.device\n            }, {\n              children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawSetAppStateContext.Provider, Object.assign({\n                value: this.setAppState\n              }, {\n                children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawAppStateContext.Provider, Object.assign({\n                  value: this.state\n                }, {\n                  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ExcalidrawElementsContext.Provider, Object.assign({\n                    value: this.scene.getNonDeletedElements()\n                  }, {\n                    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ExcalidrawActionManagerContext.Provider, Object.assign({\n                      value: this.actionManager\n                    }, {\n                      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LayerUI__WEBPACK_IMPORTED_MODULE_36__[\"default\"], Object.assign({\n                        canvas: this.canvas,\n                        appState: this.state,\n                        files: this.files,\n                        setAppState: this.setAppState,\n                        actionManager: this.actionManager,\n                        elements: this.scene.getNonDeletedElements(),\n                        onLockToggle: this.toggleLock,\n                        onPenModeToggle: this.togglePenMode,\n                        onHandToolToggle: this.onHandToolToggle,\n                        langCode: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.getLanguage)().code,\n                        renderTopRightUI: renderTopRightUI,\n                        renderCustomStats: renderCustomStats,\n                        showExitZenModeBtn: typeof ((_a = this.props) === null || _a === void 0 ? void 0 : _a.zenModeEnabled) === \"undefined\" && this.state.zenModeEnabled,\n                        UIOptions: this.props.UIOptions,\n                        onExportImage: this.onExportImage,\n                        renderWelcomeScreen: !this.state.isLoading && this.state.showWelcomeScreen && this.state.activeTool.type === \"selection\" && !this.state.zenModeEnabled && !this.scene.getElementsIncludingDeleted().length,\n                        app: this,\n                        isCollaborating: this.props.isCollaborating,\n                        openAIKey: this.OPENAI_KEY,\n                        isOpenAIKeyPersisted: this.OPENAI_KEY_IS_PERSISTED,\n                        onOpenAIAPIKeyChange: this.onOpenAIKeyChange,\n                        onMagicSettingsConfirm: this.onMagicSettingsConfirm\n                      }, {\n                        children: this.props.children\n                      })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n                        className: \"excalidraw-textEditorContainer\"\n                      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n                        className: \"excalidraw-contextMenuContainer\"\n                      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n                        className: \"excalidraw-eye-dropper-container\"\n                      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_SVGLayer__WEBPACK_IMPORTED_MODULE_68__.SVGLayer, {\n                        trails: [this.laserTrails, this.eraserTrail]\n                      }), selectedElements.length === 1 && this.state.showHyperlinkPopup && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.Hyperlink, {\n                        element: firstSelectedElement,\n                        setAppState: this.setAppState,\n                        onLinkOpen: this.props.onLinkOpen,\n                        setToast: this.setToast,\n                        updateEmbedValidationStatus: this.updateEmbedValidationStatus\n                      }, firstSelectedElement.id), this.props.aiEnabled !== false && selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(firstSelectedElement) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_71__.ElementCanvasButtons, Object.assign({\n                        element: firstSelectedElement\n                      }, {\n                        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_75__.ElementCanvasButton, {\n                          title: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.convertToCode\"),\n                          icon: _icons__WEBPACK_IMPORTED_MODULE_76__.MagicIcon,\n                          checked: false,\n                          onChange: () => this.onMagicFrameGenerate(firstSelectedElement, \"button\")\n                        })\n                      })), selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(firstSelectedElement) && ((_c = (_b = firstSelectedElement.customData) === null || _b === void 0 ? void 0 : _b.generationData) === null || _c === void 0 ? void 0 : _c.status) === \"done\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_71__.ElementCanvasButtons, Object.assign({\n                        element: firstSelectedElement\n                      }, {\n                        children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_75__.ElementCanvasButton, {\n                          title: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.copySource\"),\n                          icon: _icons__WEBPACK_IMPORTED_MODULE_76__.copyIcon,\n                          checked: false,\n                          onChange: () => this.onIframeSrcCopy(firstSelectedElement)\n                        }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_75__.ElementCanvasButton, {\n                          title: \"Enter fullscreen\",\n                          icon: _icons__WEBPACK_IMPORTED_MODULE_76__.fullscreenIcon,\n                          checked: false,\n                          onChange: () => {\n                            const iframe = this.getHTMLIFrameElement(firstSelectedElement);\n\n                            if (iframe) {\n                              try {\n                                iframe.requestFullscreen();\n                                this.setState({\n                                  activeEmbeddable: {\n                                    element: firstSelectedElement,\n                                    state: \"active\"\n                                  },\n                                  selectedElementIds: {\n                                    [firstSelectedElement.id]: true\n                                  },\n                                  draggingElement: null,\n                                  selectionElement: null\n                                });\n                              } catch (err) {\n                                console.warn(err);\n                                this.setState({\n                                  errorMessage: \"Couldn't enter fullscreen\"\n                                });\n                              }\n                            }\n                          }\n                        })]\n                      })), this.state.toast !== null && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Toast__WEBPACK_IMPORTED_MODULE_37__.Toast, {\n                        message: this.state.toast.message,\n                        onClose: () => this.setToast(null),\n                        duration: this.state.toast.duration,\n                        closable: this.state.toast.closable\n                      }), this.state.contextMenu && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ContextMenu__WEBPACK_IMPORTED_MODULE_35__.ContextMenu, {\n                        items: this.state.contextMenu.items,\n                        top: this.state.contextMenu.top,\n                        left: this.state.contextMenu.left,\n                        actionManager: this.actionManager,\n                        onClose: callback => {\n                          this.setState({\n                            contextMenu: null\n                          }, () => {\n                            this.focusContainer();\n                            callback === null || callback === void 0 ? void 0 : callback();\n                          });\n                        }\n                      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases__WEBPACK_IMPORTED_MODULE_65__.StaticCanvas, {\n                        canvas: this.canvas,\n                        rc: this.rc,\n                        elements: canvasElements,\n                        visibleElements: visibleElements,\n                        versionNonce: versionNonce,\n                        selectionNonce: (_d = this.state.selectionElement) === null || _d === void 0 ? void 0 : _d.versionNonce,\n                        scale: window.devicePixelRatio,\n                        appState: this.state,\n                        renderConfig: {\n                          imageCache: this.imageCache,\n                          isExporting: false,\n                          renderGrid: true,\n                          canvasBackgroundColor: this.state.viewBackgroundColor,\n                          embedsValidationStatus: this.embedsValidationStatus,\n                          elementsPendingErasure: this.elementsPendingErasure\n                        }\n                      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases__WEBPACK_IMPORTED_MODULE_65__.InteractiveCanvas, {\n                        containerRef: this.excalidrawContainerRef,\n                        canvas: this.interactiveCanvas,\n                        elements: canvasElements,\n                        visibleElements: visibleElements,\n                        selectedElements: selectedElements,\n                        versionNonce: versionNonce,\n                        selectionNonce: (_e = this.state.selectionElement) === null || _e === void 0 ? void 0 : _e.versionNonce,\n                        scale: window.devicePixelRatio,\n                        appState: this.state,\n                        renderInteractiveSceneCallback: this.renderInteractiveSceneCallback,\n                        handleCanvasRef: this.handleInteractiveCanvasRef,\n                        onContextMenu: this.handleCanvasContextMenu,\n                        onPointerMove: this.handleCanvasPointerMove,\n                        onPointerUp: this.handleCanvasPointerUp,\n                        onPointerCancel: this.removePointer,\n                        onTouchMove: this.handleTouchMove,\n                        onPointerDown: this.handleCanvasPointerDown,\n                        onDoubleClick: this.handleCanvasDoubleClick\n                      }), this.state.userToFollow && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FollowMode_FollowMode__WEBPACK_IMPORTED_MODULE_78__[\"default\"], {\n                        width: this.state.width,\n                        height: this.state.height,\n                        userToFollow: this.state.userToFollow,\n                        onDisconnect: this.maybeUnfollowRemoteUser\n                      }), this.renderFrameNames(), ((_f = this.state.activeEmbeddable) === null || _f === void 0 ? void 0 : _f.state) === \"active\" && ( //zsviczian\n                      (_h = (_g = this.props).renderEmbeddableMenu) === null || _h === void 0 ? void 0 : _h.call(_g, this.state))]\n                    })), this.renderEmbeddables()]\n                  }))\n                }))\n              }))\n            }))\n          }))\n        }))\n      }))\n    }));\n  }\n\n  getTextFromElements(elements) {\n    const text = elements.reduce((acc, element) => {\n      if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element)) {\n        acc.push(element.text);\n      }\n\n      return acc;\n    }, []).join(\"\\n\\n\");\n    return text;\n  }\n\n  async onMagicFrameGenerate(magicFrame, source) {\n    var _a;\n\n    if (!this.OPENAI_KEY) {\n      this.setToast({\n        message: \"You must first configure your OpenAI API key in plugin settings\",\n        duration: 5000\n      });\n      return;\n      this.setState({\n        openDialog: {\n          name: \"settings\",\n          tab: \"diagram-to-code\",\n          source: \"generation\"\n        }\n      });\n      (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (missing key)\", \"d2c\");\n      return;\n    }\n\n    const magicFrameChildren = (0,_utils_export__WEBPACK_IMPORTED_MODULE_73__.elementsOverlappingBBox)({\n      elements: this.scene.getNonDeletedElements(),\n      bounds: magicFrame,\n      type: \"overlap\"\n    }).filter(el => !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(el));\n\n    if (!magicFrameChildren.length) {\n      if (source === \"button\") {\n        this.setState({\n          errorMessage: \"Cannot generate from an empty frame\"\n        });\n        (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (no-children)\", \"d2c\");\n      } else {\n        this.setActiveTool({\n          type: \"magicframe\"\n        });\n      }\n\n      return;\n    }\n\n    const frameElement = this.insertIframeElement({\n      sceneX: magicFrame.x + magicFrame.width + 30,\n      sceneY: magicFrame.y,\n      width: magicFrame.width,\n      height: magicFrame.height\n    });\n\n    if (!frameElement) {\n      return;\n    }\n\n    this.updateMagicGeneration({\n      frameElement,\n      data: {\n        status: \"pending\"\n      }\n    });\n    this.setState({\n      selectedElementIds: {\n        [frameElement.id]: true\n      }\n    });\n    const blob = await (0,_utils_export__WEBPACK_IMPORTED_MODULE_73__.exportToBlob)({\n      elements: this.scene.getNonDeletedElements(),\n      appState: Object.assign(Object.assign({}, this.state), {\n        exportBackground: true,\n        viewBackgroundColor: this.state.viewBackgroundColor\n      }),\n      exportingFrame: magicFrame,\n      files: this.files\n    });\n    const dataURL = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.getDataURL)(blob);\n    const textFromFrameChildren = this.getTextFromElements(magicFrameChildren);\n    (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (start)\", \"d2c\");\n    const result = await (0,_data_magic__WEBPACK_IMPORTED_MODULE_72__.diagramToHTML)({\n      image: dataURL,\n      apiKey: this.OPENAI_KEY,\n      text: textFromFrameChildren,\n      theme: this.state.theme\n    });\n\n    if (!result.ok) {\n      (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (failed)\", \"d2c\");\n      console.error(result.error);\n      this.updateMagicGeneration({\n        frameElement,\n        data: {\n          status: \"error\",\n          code: \"ERR_OAI\",\n          message: ((_a = result.error) === null || _a === void 0 ? void 0 : _a.message) || \"Unknown error during generation\"\n        }\n      });\n      return;\n    }\n\n    (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (success)\", \"d2c\");\n\n    if (result.choices[0].message.content == null) {\n      this.updateMagicGeneration({\n        frameElement,\n        data: {\n          status: \"error\",\n          code: \"ERR_OAI\",\n          message: \"Nothing genereated :(\"\n        }\n      });\n      return;\n    }\n\n    const message = result.choices[0].message.content;\n    const html = message.slice(message.indexOf(\"<!DOCTYPE html>\"), message.indexOf(\"</html>\") + \"</html>\".length);\n    this.updateMagicGeneration({\n      frameElement,\n      data: {\n        status: \"done\",\n        html\n      }\n    });\n  }\n\n  onIframeSrcCopy(element) {\n    var _a, _b;\n\n    if (((_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.generationData) === null || _b === void 0 ? void 0 : _b.status) === \"done\") {\n      (0,_clipboard__WEBPACK_IMPORTED_MODULE_11__.copyTextToSystemClipboard)(element.customData.generationData.html);\n      this.setToast({\n        message: \"copied to clipboard\",\n        closable: false,\n        duration: 1500\n      });\n    }\n  } //zsviczian - ugly hack\n\n\n  get OPENAI_KEY() {\n    var _a;\n\n    return (_a = hostPlugin === null || hostPlugin === void 0 ? void 0 : hostPlugin.settings) === null || _a === void 0 ? void 0 : _a.openAIAPIToken;\n  }\n\n  set OPENAI_KEY(value) {\n    return;\n  }\n\n  async componentDidMount() {\n    var _a;\n\n    this.unmounted = false;\n    this.excalidrawContainerValue.container = this.excalidrawContainerRef.current;\n\n    if (\"development\" === _constants__WEBPACK_IMPORTED_MODULE_12__.ENV.TEST || \"development\" !== \"production\") {\n      const setState = this.setState.bind(this);\n      Object.defineProperties(window.h, {\n        state: {\n          configurable: true,\n          get: () => {\n            return this.state;\n          }\n        },\n        setState: {\n          configurable: true,\n          value: (...args) => {\n            return this.setState(...args);\n          }\n        },\n        app: {\n          configurable: true,\n          value: this\n        },\n        history: {\n          configurable: true,\n          value: this.history\n        }\n      });\n    }\n\n    this.scene.addCallback(this.onSceneUpdated);\n    this.addEventListeners();\n\n    if (this.props.autoFocus && this.excalidrawContainerRef.current) {\n      this.focusContainer();\n    }\n\n    if ( // bounding rects don't work in tests so updating\n    // the state on init would result in making the test enviro run\n    // in mobile breakpoint (0 width/height), making everything fail\n    !(0,_utils__WEBPACK_IMPORTED_MODULE_33__.isTestEnv)()) {\n      this.refreshViewportBreakpoints();\n      this.refreshEditorBreakpoints();\n    }\n\n    if (supportsResizeObserver && this.excalidrawContainerRef.current) {\n      this.resizeObserver = new ResizeObserver(() => {\n        this.refreshEditorBreakpoints();\n        this.updateDOMRect();\n      });\n      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.excalidrawContainerRef.current);\n    }\n\n    const searchParams = new URLSearchParams(window.location.search.slice(1));\n\n    if (searchParams.has(\"web-share-target\")) {\n      // Obtain a file that was shared via the Web Share Target API.\n      this.restoreFileFromShare();\n    } else {\n      this.updateDOMRect(this.initializeScene);\n    } // note that this check seems to always pass in localhost\n\n\n    if ((0,_constants__WEBPACK_IMPORTED_MODULE_12__.isBrave)() && !(0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.isMeasureTextSupported)()) {\n      this.setState({\n        errorMessage: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_BraveMeasureTextError__WEBPACK_IMPORTED_MODULE_61__[\"default\"], {})\n      });\n    }\n  }\n\n  componentWillUnmount() {\n    var _a;\n\n    this.renderer.destroy();\n    this.scene = new _scene_Scene__WEBPACK_IMPORTED_MODULE_30__[\"default\"]();\n    this.renderer = new _scene_Renderer__WEBPACK_IMPORTED_MODULE_66__.Renderer(this.scene);\n    this.files = {};\n    this.imageCache.clear();\n    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();\n    this.unmounted = true;\n    this.removeEventListeners();\n    this.scene.destroy();\n    this.library.destroy();\n    this.laserTrails.stop();\n    this.eraserTrail.stop();\n    this.onChangeEmitter.clear();\n    _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache.destroy();\n    _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.destroy();\n    clearTimeout(touchTimeout);\n    _scene__WEBPACK_IMPORTED_MODULE_29__.isSomeElementSelected.clearCache();\n    _groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements.clearCache();\n    touchTimeout = 0;\n  }\n\n  removeEventListeners() {\n    this.onRemoveEventListenersEmitter.trigger();\n  }\n\n  addEventListeners() {\n    // remove first as we can add event listeners multiple times\n    this.removeEventListeners(); // -------------------------------------------------------------------------\n    //                        view+edit mode listeners\n    // -------------------------------------------------------------------------\n\n    if (this.props.handleKeyboardGlobally) {\n      this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, this.onKeyDown, false));\n    }\n\n    this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.onWheel, {\n      passive: false\n    }), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MESSAGE, this.onWindowMessage, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, this.removePointer), // #3553\n    (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.COPY, this.onCopy), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, this.onKeyUp, {\n      passive: true\n    }), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MOUSE_MOVE, this.updateCurrentCursorPosition), // rerender text elements on font load to fix #637 && #1553\n    (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document.fonts, \"loadingdone\", event => {\n      const loadedFontFaces = event.fontfaces;\n      this.fonts.onFontsLoaded(loadedFontFaces);\n    }), // Safari-only desktop pinch zoom\n    (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_START, this.onGestureStart, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_CHANGE, this.onGestureChange, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_END, this.onGestureEnd, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.FOCUS, () => {\n      this.maybeCleanupAfterMissingPointerUp(null);\n    }));\n\n    if (this.state.viewModeEnabled) {\n      return;\n    } // -------------------------------------------------------------------------\n    //                        edit-mode listeners only\n    // -------------------------------------------------------------------------\n\n\n    this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.FULLSCREENCHANGE, this.onFullscreenChange), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, this.pasteFromClipboard), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.CUT, this.onCut), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.RESIZE, this.onResize, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.UNLOAD, this.onUnload, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, this.onBlur, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DRAG_OVER, this.disableEvent, false), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DROP, this.disableEvent, false));\n\n    if (this.props.detectScroll) {\n      this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_33__.addEventListener)((0,_utils__WEBPACK_IMPORTED_MODULE_33__.getNearestScrollableContainer)(this.excalidrawContainerRef.current), _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.SCROLL, this.onScroll));\n    }\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    var _a, _b, _c, _d, _e, _f;\n\n    this.updateEmbeddables();\n\n    if (!this.state.showWelcomeScreen && !this.scene.getElementsIncludingDeleted().length) {\n      this.setState({\n        showWelcomeScreen: true\n      });\n    }\n\n    if (prevProps.UIOptions.dockedSidebarBreakpoint !== this.props.UIOptions.dockedSidebarBreakpoint) {\n      this.refreshEditorBreakpoints();\n    }\n\n    const hasFollowedPersonLeft = prevState.userToFollow && !this.state.collaborators.has(prevState.userToFollow.socketId);\n\n    if (hasFollowedPersonLeft) {\n      this.maybeUnfollowRemoteUser();\n    }\n\n    if (prevState.zoom.value !== this.state.zoom.value || prevState.scrollX !== this.state.scrollX || prevState.scrollY !== this.state.scrollY) {\n      (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onScrollChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.scrollX, this.state.scrollY, this.state.zoom);\n      this.onScrollChangeEmitter.trigger(this.state.scrollX, this.state.scrollY, this.state.zoom);\n    }\n\n    if (prevState.userToFollow !== this.state.userToFollow) {\n      if (prevState.userToFollow) {\n        this.onUserFollowEmitter.trigger({\n          userToFollow: prevState.userToFollow,\n          action: \"UNFOLLOW\"\n        });\n      }\n\n      if (this.state.userToFollow) {\n        this.onUserFollowEmitter.trigger({\n          userToFollow: this.state.userToFollow,\n          action: \"FOLLOW\"\n        });\n      }\n    }\n\n    if (Object.keys(this.state.selectedElementIds).length && (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n      this.setState({\n        activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, {\n          type: \"selection\"\n        })\n      });\n    }\n\n    if (this.state.activeTool.type === \"eraser\" && prevState.theme !== this.state.theme) {\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setEraserCursor)(this.interactiveCanvas, this.state.theme);\n    } // Hide hyperlink popup if shown when element type is not selection\n\n\n    if (prevState.activeTool.type === \"selection\" && this.state.activeTool.type !== \"selection\" && this.state.showHyperlinkPopup) {\n      this.setState({\n        showHyperlinkPopup: false\n      });\n    }\n\n    if (prevProps.langCode !== this.props.langCode) {\n      this.updateLanguage();\n    }\n\n    if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(prevState) && !(0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n      this.eraserTrail.endPath();\n    }\n\n    if (prevProps.viewModeEnabled !== this.props.viewModeEnabled) {\n      this.setState({\n        viewModeEnabled: !!this.props.viewModeEnabled\n      });\n    }\n\n    if (prevState.viewModeEnabled !== this.state.viewModeEnabled) {\n      this.addEventListeners();\n      this.deselectElements();\n    }\n\n    if (prevProps.zenModeEnabled !== this.props.zenModeEnabled) {\n      this.setState({\n        zenModeEnabled: !!this.props.zenModeEnabled\n      });\n    }\n\n    if (prevProps.theme !== this.props.theme && this.props.theme) {\n      this.setState({\n        theme: this.props.theme\n      });\n    }\n\n    if (prevProps.gridModeEnabled !== this.props.gridModeEnabled) {\n      this.setState({\n        gridSize: this.props.gridModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.GRID_SIZE : null\n      });\n    }\n\n    if (this.props.name && prevProps.name !== this.props.name) {\n      this.setState({\n        name: this.props.name\n      });\n    }\n\n    (_c = this.excalidrawContainerRef.current) === null || _c === void 0 ? void 0 : _c.classList.toggle(\"theme--dark\", this.state.theme === \"dark\");\n\n    if (this.state.editingLinearElement && !this.state.selectedElementIds[this.state.editingLinearElement.elementId]) {\n      // defer so that the commitToHistory flag isn't reset via current update\n      setTimeout(() => {\n        // execute only if the condition still holds when the deferred callback\n        // executes (it can be scheduled multiple times depending on how\n        // many times the component renders)\n        this.state.editingLinearElement && this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n      });\n    } // failsafe in case the state is being updated in incorrect order resulting\n    // in the editingElement being now a deleted element\n\n\n    if ((_d = this.state.editingElement) === null || _d === void 0 ? void 0 : _d.isDeleted) {\n      this.setState({\n        editingElement: null\n      });\n    }\n\n    if (this.state.selectedLinearElement && !this.state.selectedElementIds[this.state.selectedLinearElement.elementId]) {\n      // To make sure `selectedLinearElement` is in sync with `selectedElementIds`, however this shouldn't be needed once\n      // we have a single API to update `selectedElementIds`\n      this.setState({\n        selectedLinearElement: null\n      });\n    }\n\n    const {\n      multiElement\n    } = prevState;\n\n    if (prevState.activeTool !== this.state.activeTool && multiElement != null && (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(multiElement, false)) {\n      (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.maybeBindLinearElement)(multiElement, this.state, this.scene, (0,_utils__WEBPACK_IMPORTED_MODULE_33__.tupleToCoors)(_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointAtIndexGlobalCoordinates(multiElement, -1)));\n    }\n\n    this.history.record(this.state, this.scene.getElementsIncludingDeleted()); // Do not notify consumers if we're still loading the scene. Among other\n    // potential issues, this fixes a case where the tab isn't focused during\n    // init, which would trigger onChange with empty elements, which would then\n    // override whatever is in localStorage currently.\n\n    if (!this.state.isLoading) {\n      (_f = (_e = this.props).onChange) === null || _f === void 0 ? void 0 : _f.call(_e, this.scene.getElementsIncludingDeleted(), this.state, this.files);\n      this.onChangeEmitter.trigger(this.scene.getElementsIncludingDeleted(), this.state, this.files);\n    }\n  }\n\n  static resetTapTwice() {\n    didTapTwice = false;\n  } // TODO rewrite this to paste both text & images at the same time if\n  // pasted data contains both\n\n\n  async addElementsFromMixedContentPaste(mixedContent, {\n    isPlainPaste,\n    sceneX,\n    sceneY\n  }) {\n    if (!isPlainPaste && mixedContent.some(node => node.type === \"imageUrl\") && this.isToolSupported(\"image\")) {\n      const imageURLs = mixedContent.filter(node => node.type === \"imageUrl\").map(node => node.value);\n      const responses = await Promise.all(imageURLs.map(async url => {\n        try {\n          return {\n            file: await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.ImageURLToFile)(url)\n          };\n        } catch (error) {\n          return {\n            errorMessage: error.message\n          };\n        }\n      }));\n      let y = sceneY;\n      let firstImageYOffsetDone = false;\n      const nextSelectedIds = {};\n\n      for (const response of responses) {\n        if (response.file) {\n          const imageElement = this.createImageElement({\n            sceneX,\n            sceneY: y\n          });\n          const initializedImageElement = await this.insertImageElement(imageElement, response.file);\n\n          if (initializedImageElement) {\n            // vertically center first image in the batch\n            if (!firstImageYOffsetDone) {\n              firstImageYOffsetDone = true;\n              y -= initializedImageElement.height / 2;\n            } // hack to reset the `y` coord because we vertically center during\n            // insertImageElement\n\n\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(initializedImageElement, {\n              y\n            }, false);\n            y = imageElement.y + imageElement.height + 25;\n            nextSelectedIds[imageElement.id] = true;\n          }\n        }\n      }\n\n      this.setState({\n        selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedIds, this.state)\n      });\n      const error = responses.find(response => !!response.errorMessage);\n\n      if (error && error.errorMessage) {\n        this.setState({\n          errorMessage: error.errorMessage\n        });\n      }\n    } else {\n      const textNodes = mixedContent.filter(node => node.type === \"text\");\n\n      if (textNodes.length) {\n        this.addTextFromPaste(textNodes.map(node => node.value).join(\"\\n\\n\"), isPlainPaste);\n      }\n    }\n  }\n\n  addTextFromPaste(text, isPlainPaste = false) {\n    const {\n      x,\n      y\n    } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n      clientX: this.lastViewportPosition.x,\n      clientY: this.lastViewportPosition.y\n    }, this.state);\n    const textElementProps = {\n      x,\n      y,\n      strokeColor: this.state.currentItemStrokeColor,\n      backgroundColor: this.state.currentItemBackgroundColor,\n      fillStyle: this.state.currentItemFillStyle,\n      strokeWidth: this.state.currentItemStrokeWidth,\n      strokeStyle: this.state.currentItemStrokeStyle,\n      roundness: null,\n      roughness: this.state.currentItemRoughness,\n      opacity: this.state.currentItemOpacity,\n      text,\n      rawText: text,\n      fontSize: (0,_actions_actionProperties__WEBPACK_IMPORTED_MODULE_79__.getFontSize)(this.state.currentItemFontSize, this.state.zoom.value),\n      fontFamily: this.state.currentItemFontFamily,\n      textAlign: this.state.currentItemTextAlign,\n      verticalAlign: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_VERTICAL_ALIGN,\n      locked: false\n    };\n    const LINE_GAP = 10;\n    let currentY = y;\n    const lines = isPlainPaste ? [text] : text.split(\"\\n\");\n    const textElements = lines.reduce((acc, line, idx) => {\n      var _a;\n\n      const text = line.trim();\n      const lineHeight = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getDefaultLineHeight)(textElementProps.fontFamily);\n\n      if (text.length) {\n        const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n          x,\n          y: currentY\n        });\n        const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newTextElement)(Object.assign(Object.assign({}, textElementProps), {\n          x,\n          y: currentY,\n          text,\n          rawText: text,\n          //zsviczian\n          lineHeight,\n          frameId: topLayerFrame ? topLayerFrame.id : null\n        }));\n        acc.push(element);\n        currentY += element.height + LINE_GAP;\n      } else {\n        const prevLine = (_a = lines[idx - 1]) === null || _a === void 0 ? void 0 : _a.trim(); // add paragraph only if previous line was not empty, IOW don't add\n        // more than one empty line\n\n        if (prevLine) {\n          currentY += (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getLineHeightInPx)(textElementProps.fontSize, lineHeight) + LINE_GAP;\n        }\n      }\n\n      return acc;\n    }, []);\n\n    if (textElements.length === 0) {\n      return;\n    }\n\n    const frameId = textElements[0].frameId;\n\n    if (frameId) {\n      this.scene.insertElementsAtIndex(textElements, this.scene.getElementIndex(frameId));\n    } else {\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted(), ...textElements]);\n    }\n\n    this.setState({\n      selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.fromEntries(textElements.map(el => [el.id, true])), this.state)\n    });\n\n    if (!isPlainPaste && textElements.length > 1 && PLAIN_PASTE_TOAST_SHOWN === false && !this.device.editor.isMobile) {\n      this.setToast({\n        message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"toast.pasteAsSingleElement\", {\n          shortcut: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.getShortcutKey)(\"CtrlOrCmd+Shift+V\")\n        }),\n        duration: 5000\n      });\n      PLAIN_PASTE_TOAST_SHOWN = true;\n    }\n\n    this.history.resumeRecording();\n  }\n\n  handleTextWysiwyg(element, {\n    isExistingElement = false\n  }) {\n    const updateElement = (text, originalText, isDeleted, rawText, link) => {\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted().map(_element => {\n        if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n          return (0,_element__WEBPACK_IMPORTED_MODULE_16__.updateTextElement)(_element, {\n            text,\n            isDeleted,\n            originalText,\n            rawText: rawText !== null && rawText !== void 0 ? rawText : originalText,\n            link\n          });\n        }\n\n        return _element;\n      })]);\n    };\n\n    if (isExistingElement && this.props.onBeforeTextEdit) {\n      const text = this.props.onBeforeTextEdit(element);\n\n      if (text) {\n        this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted().map(_element => {\n          if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n            element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.updateTextElement)(_element, {\n              text,\n              isDeleted: false,\n              originalText: text\n            });\n            return element;\n          }\n\n          return _element;\n        })]);\n      }\n    }\n\n    (0,_element__WEBPACK_IMPORTED_MODULE_16__.textWysiwyg)({\n      id: element.id,\n      canvas: this.canvas,\n      getViewportCoords: (x, y) => {\n        const {\n          x: viewportX,\n          y: viewportY\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.sceneCoordsToViewportCoords)({\n          sceneX: x,\n          sceneY: y\n        }, this.state);\n        return [viewportX - this.state.offsetLeft, viewportY - this.state.offsetTop];\n      },\n      onChange: (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(text => {\n        updateElement(text, text, false);\n\n        if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isNonDeletedElement)(element)) {\n          (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.updateBoundElements)(element);\n        }\n      }),\n      onSubmit: (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(({\n        text,\n        viaKeyboard,\n        originalText\n      }) => {\n        const isDeleted = !text.trim();\n        const rawText = originalText; //should this be originalText??\n\n        let link = undefined;\n\n        if (this.props.onBeforeTextSubmit) {\n          const [updatedText, updatedOriginalText, l] = this.props.onBeforeTextSubmit(element, text, originalText, isDeleted);\n          text = updatedText !== null && updatedText !== void 0 ? updatedText : text;\n          originalText = updatedOriginalText !== null && updatedOriginalText !== void 0 ? updatedOriginalText : originalText;\n          link = l;\n        }\n\n        updateElement(text, originalText, isDeleted, rawText, link); // select the created text element only if submitting via keyboard\n        // (when submitting via click it should act as signal to deselect)\n\n        if (!isDeleted && viaKeyboard) {\n          const elementIdToSelect = element.containerId ? element.containerId : element.id;\n          this.setState(prevState => ({\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n              [elementIdToSelect]: true\n            }), prevState)\n          }));\n        }\n\n        if (isDeleted) {\n          (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.fixBindingsAfterDeletion)(this.scene.getNonDeletedElements(), [element]);\n        }\n\n        if (!isDeleted || isExistingElement) {\n          this.history.resumeRecording();\n        }\n\n        this.setState({\n          draggingElement: null,\n          editingElement: null\n        });\n\n        if (this.state.activeTool.locked) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n        }\n\n        this.focusContainer();\n      }),\n      element,\n      excalidrawContainer: this.excalidrawContainerRef.current,\n      app: this\n    }); // deselect all other elements when inserting text\n\n    this.deselectElements(); // do an initial update to re-initialize element position since we were\n    // modifying element's x/y for sake of editor (case: syncing to remote)\n\n    updateElement(element.text, element.originalText, false);\n  }\n\n  deselectElements() {\n    this.setState({\n      selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n      selectedGroupIds: {},\n      editingGroupId: null,\n      activeEmbeddable: null\n    });\n  }\n\n  getTextElementAtPosition(x, y) {\n    const element = this.getElementAtPosition(x, y, {\n      includeBoundTextElement: true\n    });\n\n    if (element && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element) && !element.isDeleted) {\n      return element;\n    }\n\n    return null;\n  }\n\n  getElementAtPosition(x, y, opts) {\n    const allHitElements = this.getElementsAtPosition(x, y, opts === null || opts === void 0 ? void 0 : opts.includeBoundTextElement, opts === null || opts === void 0 ? void 0 : opts.includeLockedElements);\n\n    if (allHitElements.length > 1) {\n      if (opts === null || opts === void 0 ? void 0 : opts.preferSelected) {\n        for (let index = allHitElements.length - 1; index > -1; index--) {\n          if (this.state.selectedElementIds[allHitElements[index].id]) {\n            return allHitElements[index];\n          }\n        }\n      }\n\n      const elementWithHighestZIndex = allHitElements[allHitElements.length - 1]; // If we're hitting element with highest z-index only on its bounding box\n      // while also hitting other element figure, the latter should be considered.\n\n      return (0,_element__WEBPACK_IMPORTED_MODULE_16__.isHittingElementBoundingBoxWithoutHittingElement)(elementWithHighestZIndex, this.state, this.frameNameBoundsCache, x, y) ? allHitElements[allHitElements.length - 2] : elementWithHighestZIndex;\n    }\n\n    if (allHitElements.length === 1) {\n      return allHitElements[0];\n    }\n\n    return null;\n  }\n\n  getElementsAtPosition(x, y, includeBoundTextElement = false, includeLockedElements = false) {\n    const elements = includeBoundTextElement && includeLockedElements ? this.scene.getNonDeletedElements() : this.scene.getNonDeletedElements().filter(element => (includeLockedElements || !element.locked) && (includeBoundTextElement || !((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element) && element.containerId)));\n    return (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getElementsAtPosition)(elements, element => (0,_element__WEBPACK_IMPORTED_MODULE_16__.hitTest)(element, this.state, this.frameNameBoundsCache, x, y)).filter(element => {\n      // hitting a frame's element from outside the frame is not considered a hit\n      const containingFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getContainingFrame)(element);\n      return containingFrame && this.state.frameRendering.enabled && this.state.frameRendering.clip ? (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isCursorInFrame)({\n        x,\n        y\n      }, containingFrame) : true;\n    });\n  }\n\n  handleHoverSelectedLinearElement(linearElementEditor, scenePointerX, scenePointerY) {\n    const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getElement(linearElementEditor.elementId);\n    const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getBoundTextElement)(element);\n\n    if (!element) {\n      return;\n    }\n\n    if (this.state.selectedLinearElement) {\n      let hoverPointIndex = -1;\n      let segmentMidPointHoveredCoords = null;\n\n      if ((0,_element_collision__WEBPACK_IMPORTED_MODULE_44__.isHittingElementNotConsideringBoundingBox)(element, this.state, this.frameNameBoundsCache, [scenePointerX, scenePointerY])) {\n        hoverPointIndex = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointIndexUnderCursor(element, this.state.zoom, scenePointerX, scenePointerY);\n        segmentMidPointHoveredCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getSegmentMidpointHitCoords(linearElementEditor, {\n          x: scenePointerX,\n          y: scenePointerY\n        }, this.state);\n\n        if (hoverPointIndex >= 0 || segmentMidPointHoveredCoords) {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n        } else {\n          (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n        }\n      } else if ((0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_48__.shouldShowBoundingBox)([element], this.state) && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isHittingElementBoundingBoxWithoutHittingElement)(element, this.state, this.frameNameBoundsCache, scenePointerX, scenePointerY)) {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n      } else if (boundTextElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.hitTest)(boundTextElement, this.state, this.frameNameBoundsCache, scenePointerX, scenePointerY)) {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n      }\n\n      if (this.state.selectedLinearElement.hoverPointIndex !== hoverPointIndex) {\n        this.setState({\n          selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n            hoverPointIndex\n          })\n        });\n      }\n\n      if (!_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.arePointsEqual(this.state.selectedLinearElement.segmentMidPointHoveredCoords, segmentMidPointHoveredCoords)) {\n        this.setState({\n          selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n            segmentMidPointHoveredCoords\n          })\n        });\n      }\n    } else {\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n    }\n  }\n\n  updateGestureOnPointerDown(event) {\n    gesture.pointers.set(event.pointerId, {\n      x: event.clientX,\n      y: event.clientY\n    });\n\n    if (gesture.pointers.size === 2) {\n      gesture.lastCenter = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getCenter)(gesture.pointers);\n      gesture.initialScale = this.state.zoom.value;\n      gesture.initialDistance = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getDistance)(Array.from(gesture.pointers.values()));\n    }\n  }\n\n  initialPointerDownState(event) {\n    const origin = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n    const selectedElements = this.scene.getSelectedElements(this.state);\n    const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n    return {\n      origin,\n      withCmdOrCtrl: event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD],\n      originInGrid: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.tupleToCoors)((0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(origin.x, origin.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize)),\n      scrollbars: (0,_scene__WEBPACK_IMPORTED_MODULE_29__.isOverScrollBars)(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop),\n      // we need to duplicate because we'll be updating this state\n      lastCoords: Object.assign({}, origin),\n      originalElements: this.scene.getNonDeletedElements().reduce((acc, element) => {\n        acc.set(element.id, (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.deepCopyElement)(element));\n        return acc;\n      }, new Map()),\n      resize: {\n        handleType: false,\n        isResizing: false,\n        offset: {\n          x: 0,\n          y: 0\n        },\n        arrowDirection: \"origin\",\n        center: {\n          x: (maxX + minX) / 2,\n          y: (maxY + minY) / 2\n        }\n      },\n      hit: {\n        element: null,\n        allHitElements: [],\n        wasAddedToSelection: false,\n        hasBeenDuplicated: false,\n        hasHitCommonBoundingBoxOfSelectedElements: this.isHittingCommonBoundingBoxOfSelectedElements(origin, selectedElements)\n      },\n      drag: {\n        hasOccurred: false,\n        offset: null\n      },\n      eventListeners: {\n        onMove: null,\n        onUp: null,\n        onKeyUp: null,\n        onKeyDown: null\n      },\n      boxSelection: {\n        hasOccurred: false\n      }\n    };\n  } // Returns whether the event is a dragging a scrollbar\n\n\n  handleDraggingScrollBar(event, pointerDownState) {\n    if (!(pointerDownState.scrollbars.isOverEither && !this.state.multiElement)) {\n      return false;\n    }\n\n    isDraggingScrollBar = true;\n    pointerDownState.lastCoords.x = event.clientX;\n    pointerDownState.lastCoords.y = event.clientY;\n    const onPointerMove = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdatesThrottled)(event => {\n      const target = event.target;\n\n      if (!(target instanceof HTMLElement)) {\n        return;\n      }\n\n      this.handlePointerMoveOverScrollbars(event, pointerDownState);\n    });\n    const onPointerUp = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(() => {\n      lastPointerUp = null;\n      isDraggingScrollBar = false;\n      (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n      this.setState({\n        cursorButton: \"up\"\n      });\n      this.savePointer(event.clientX, event.clientY, \"up\");\n      window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n      window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n      onPointerMove.flush();\n    });\n    lastPointerUp = onPointerUp;\n    window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n    window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n    return true;\n  }\n\n  isASelectedElement(hitElement) {\n    return hitElement != null && this.state.selectedElementIds[hitElement.id];\n  }\n\n  isHittingCommonBoundingBoxOfSelectedElements(point, selectedElements) {\n    if (selectedElements.length < 2) {\n      return false;\n    } // How many pixels off the shape boundary we still consider a hit\n\n\n    const threshold = 10 / this.state.zoom.value;\n    const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n    return point.x > x1 - threshold && point.x < x2 + threshold && point.y > y1 - threshold && point.y < y2 + threshold;\n  }\n\n  getCurrentItemRoundness(elementType) {\n    return this.state.currentItemRoundness === \"round\" ? {\n      type: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isUsingAdaptiveRadius)(elementType) ? _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.ADAPTIVE_RADIUS : _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.PROPORTIONAL_RADIUS\n    } : null;\n  }\n\n  maybeCacheReferenceSnapPoints(event, selectedElements, recomputeAnyways = false) {\n    if ((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.isSnappingEnabled)({\n      event,\n      appState: this.state,\n      selectedElements\n    }) && (recomputeAnyways || !_snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.getReferenceSnapPoints())) {\n      _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setReferenceSnapPoints((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.getReferenceSnapPoints)(this.scene.getNonDeletedElements(), selectedElements, this.state));\n    }\n  }\n\n  maybeCacheVisibleGaps(event, selectedElements, recomputeAnyways = false) {\n    if ((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.isSnappingEnabled)({\n      event,\n      appState: this.state,\n      selectedElements\n    }) && (recomputeAnyways || !_snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.getVisibleGaps())) {\n      _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setVisibleGaps((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.getVisibleGaps)(this.scene.getNonDeletedElements(), selectedElements, this.state));\n    }\n  }\n\n  onKeyDownFromPointerDownHandler(pointerDownState) {\n    return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(event => {\n      if (this.maybeHandleResize(pointerDownState, event)) {\n        return;\n      }\n\n      this.maybeDragNewGenericElement(pointerDownState, event);\n    });\n  }\n\n  onKeyUpFromPointerDownHandler(pointerDownState) {\n    return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(event => {\n      // Prevents focus from escaping excalidraw tab\n      event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ALT && event.preventDefault();\n\n      if (this.maybeHandleResize(pointerDownState, event)) {\n        return;\n      }\n\n      this.maybeDragNewGenericElement(pointerDownState, event);\n    });\n  }\n\n  onPointerMoveFromPointerDownHandler(pointerDownState) {\n    return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdatesThrottled)(event => {\n      var _a, _b; //To avoid pointerMove canceling the selection of locked elements on mobile //zsviczian\n\n\n      if (Boolean(this.state.contextMenu)) {\n        return;\n      } // We need to initialize dragOffsetXY only after we've updated\n      // `state.selectedElementIds` on pointerDown. Doing it here in pointerMove\n      // event handler should hopefully ensure we're already working with\n      // the updated state.\n\n\n      if (pointerDownState.drag.offset === null) {\n        pointerDownState.drag.offset = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.tupleToCoors)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getDragOffsetXY)(this.scene.getSelectedElements(this.state), pointerDownState.origin.x, pointerDownState.origin.y));\n      }\n\n      const target = event.target;\n\n      if (!(target instanceof HTMLElement)) {\n        return;\n      }\n\n      if (this.handlePointerMoveOverScrollbars(event, pointerDownState)) {\n        return;\n      }\n\n      const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n\n      if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n        this.handleEraser(event, pointerDownState, pointerCoords);\n        return;\n      }\n\n      if (this.state.activeTool.type === \"laser\") {\n        this.laserTrails.addPointToPath(pointerCoords.x, pointerCoords.y);\n      }\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize); // for arrows/lines, don't start dragging until a given threshold\n      // to ensure we don't create a 2-point arrow by mistake when\n      // user clicks mouse in a way that it moves a tiny bit (thus\n      // triggering pointermove)\n\n      if (!pointerDownState.drag.hasOccurred && (this.state.activeTool.type === \"arrow\" || this.state.activeTool.type === \"line\")) {\n        if ((0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerCoords.x, pointerCoords.y, pointerDownState.origin.x, pointerDownState.origin.y) < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD) {\n          return;\n        }\n      }\n\n      if (pointerDownState.resize.isResizing) {\n        pointerDownState.lastCoords.x = pointerCoords.x;\n        pointerDownState.lastCoords.y = pointerCoords.y;\n\n        if (this.maybeHandleResize(pointerDownState, event)) {\n          return true;\n        }\n      }\n\n      if (this.state.selectedLinearElement) {\n        const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;\n\n        if (_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.shouldAddMidpoint(this.state.selectedLinearElement, pointerCoords, this.state)) {\n          const ret = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.addMidpoint(this.state.selectedLinearElement, pointerCoords, this.state, !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]);\n\n          if (!ret) {\n            return;\n          } // Since we are reading from previous state which is not possible with\n          // automatic batching in React 18 hence using flush sync to synchronously\n          // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.\n\n\n          (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n            if (this.state.selectedLinearElement) {\n              this.setState({\n                selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n                  pointerDownState: ret.pointerDownState,\n                  selectedPointsIndices: ret.selectedPointsIndices\n                })\n              });\n            }\n\n            if (this.state.editingLinearElement) {\n              this.setState({\n                editingLinearElement: Object.assign(Object.assign({}, this.state.editingLinearElement), {\n                  pointerDownState: ret.pointerDownState,\n                  selectedPointsIndices: ret.selectedPointsIndices\n                })\n              });\n            }\n          });\n          return;\n        } else if (linearElementEditor.pointerDownState.segmentMidpoint.value !== null && !linearElementEditor.pointerDownState.segmentMidpoint.added) {\n          return;\n        }\n\n        const didDrag = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointDragging(event, this.state, pointerCoords.x, pointerCoords.y, (element, pointsSceneCoords) => {\n          this.maybeSuggestBindingsForLinearElementAtCoords(element, pointsSceneCoords);\n        }, linearElementEditor);\n\n        if (didDrag) {\n          pointerDownState.lastCoords.x = pointerCoords.x;\n          pointerDownState.lastCoords.y = pointerCoords.y;\n          pointerDownState.drag.hasOccurred = true;\n\n          if (this.state.editingLinearElement && !this.state.editingLinearElement.isDragging) {\n            this.setState({\n              editingLinearElement: Object.assign(Object.assign({}, this.state.editingLinearElement), {\n                isDragging: true\n              })\n            });\n          }\n\n          if (!this.state.selectedLinearElement.isDragging) {\n            this.setState({\n              selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n                isDragging: true\n              })\n            });\n          }\n\n          return;\n        }\n      }\n\n      const hasHitASelectedElement = pointerDownState.hit.allHitElements.some(element => this.isASelectedElement(element));\n      const isSelectingPointsInLineEditor = this.state.editingLinearElement && event.shiftKey && this.state.editingLinearElement.elementId === ((_a = pointerDownState.hit.element) === null || _a === void 0 ? void 0 : _a.id);\n\n      if ((hasHitASelectedElement || pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) && !isSelectingPointsInLineEditor) {\n        const selectedElements = this.scene.getSelectedElements(this.state);\n\n        if (selectedElements.every(element => element.locked)) {\n          return;\n        }\n\n        const selectedElementsHasAFrame = selectedElements.find(e => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(e));\n        const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords);\n        this.setState({\n          frameToHighlight: topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null\n        }); // Marking that click was used for dragging to check\n        // if elements should be deselected on pointerup\n\n        pointerDownState.drag.hasOccurred = true;\n        this.setState({\n          selectedElementsAreBeingDragged: true\n        }); // prevent dragging even if we're no longer holding cmd/ctrl otherwise\n        // it would have weird results (stuff jumping all over the screen)\n        // Checking for editingElement to avoid jump while editing on mobile #6503\n\n        if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl && !this.state.editingElement && ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) !== \"active\") {\n          const dragOffset = {\n            x: pointerCoords.x - pointerDownState.origin.x,\n            y: pointerCoords.y - pointerDownState.origin.y\n          };\n          const originalElements = [...pointerDownState.originalElements.values()]; // We only drag in one direction if shift is pressed\n\n          const lockDirection = event.shiftKey;\n\n          if (lockDirection) {\n            const distanceX = Math.abs(dragOffset.x);\n            const distanceY = Math.abs(dragOffset.y);\n            const lockX = lockDirection && distanceX < distanceY;\n            const lockY = lockDirection && distanceX > distanceY;\n\n            if (lockX) {\n              dragOffset.x = 0;\n            }\n\n            if (lockY) {\n              dragOffset.y = 0;\n            }\n          } // Snap cache *must* be synchronously popuplated before initial drag,\n          // otherwise the first drag even will not snap, causing a jump before\n          // it snaps to its position if previously snapped already.\n\n\n          this.maybeCacheVisibleGaps(event, selectedElements);\n          this.maybeCacheReferenceSnapPoints(event, selectedElements);\n          const {\n            snapOffset,\n            snapLines\n          } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.snapDraggedElements)((0,_scene__WEBPACK_IMPORTED_MODULE_29__.getSelectedElements)(originalElements, this.state), dragOffset, this.state, event);\n          this.setState({\n            snapLines\n          }); // when we're editing the name of a frame, we want the user to be\n          // able to select and interact with the text input\n\n          !this.state.editingFrame && (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragSelectedElements)(pointerDownState, selectedElements, dragOffset, this.state, this.scene, snapOffset, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n          this.maybeSuggestBindingForAll(selectedElements); // We duplicate the selected element if alt is pressed on pointer move\n\n          if (event.altKey && !pointerDownState.hit.hasBeenDuplicated) {\n            // Move the currently selected elements to the top of the z index stack, and\n            // put the duplicates where the selected elements used to be.\n            // (the origin point where the dragging started)\n            pointerDownState.hit.hasBeenDuplicated = true;\n            const nextElements = [];\n            const elementsToAppend = [];\n            const groupIdMap = new Map();\n            const oldIdToDuplicatedId = new Map();\n            const hitElement = pointerDownState.hit.element;\n            const selectedElementIds = new Set(this.scene.getSelectedElements({\n              selectedElementIds: this.state.selectedElementIds,\n              includeBoundTextElement: true,\n              includeElementsInFrames: true\n            }).map(element => element.id));\n            const elements = this.scene.getElementsIncludingDeleted();\n\n            for (const element of elements) {\n              if (selectedElementIds.has(element.id) || // case: the state.selectedElementIds might not have been\n              // updated yet by the time this mousemove event is fired\n              element.id === (hitElement === null || hitElement === void 0 ? void 0 : hitElement.id) && pointerDownState.hit.wasAddedToSelection) {\n                const duplicatedElement = (0,_element__WEBPACK_IMPORTED_MODULE_16__.duplicateElement)(this.state.editingGroupId, groupIdMap, element);\n                const origElement = pointerDownState.originalElements.get(element.id);\n                (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(duplicatedElement, {\n                  x: origElement.x,\n                  y: origElement.y\n                }); // put duplicated element to pointerDownState.originalElements\n                // so that we can snap to the duplicated element without releasing\n\n                pointerDownState.originalElements.set(duplicatedElement.id, duplicatedElement);\n                nextElements.push(duplicatedElement);\n                elementsToAppend.push(element);\n                oldIdToDuplicatedId.set(element.id, duplicatedElement.id);\n              } else {\n                nextElements.push(element);\n              }\n            }\n\n            const nextSceneElements = [...nextElements, ...elementsToAppend];\n            (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.bindTextToShapeAfterDuplication)(nextElements, elementsToAppend, oldIdToDuplicatedId);\n            (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.fixBindingsAfterDuplication)(nextSceneElements, elementsToAppend, oldIdToDuplicatedId, \"duplicatesServeAsOld\");\n            (0,_frame__WEBPACK_IMPORTED_MODULE_51__.bindElementsToFramesAfterDuplication)(nextSceneElements, elementsToAppend, oldIdToDuplicatedId);\n            this.scene.replaceAllElements(nextSceneElements);\n            this.maybeCacheVisibleGaps(event, selectedElements, true);\n            this.maybeCacheReferenceSnapPoints(event, selectedElements, true);\n          }\n\n          return;\n        }\n      } // It is very important to read this.state within each move event,\n      // otherwise we would read a stale one!\n\n\n      const draggingElement = this.state.draggingElement;\n\n      if (!draggingElement) {\n        return;\n      }\n\n      if (draggingElement.type === \"freedraw\") {\n        const points = draggingElement.points;\n        const dx = pointerCoords.x - draggingElement.x;\n        const dy = pointerCoords.y - draggingElement.y;\n        const lastPoint = points.length > 0 && points[points.length - 1];\n        const discardPoint = lastPoint && lastPoint[0] === dx && lastPoint[1] === dy;\n\n        if (!discardPoint) {\n          const strokeOptions = this.state.currentStrokeOptions; //zsviczian\n\n          const pressures = draggingElement.simulatePressure ? draggingElement.pressures : [//zsviczian\n          ...draggingElement.pressures, (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? 1 : event.pressure];\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n            points: [...points, [dx, dy]],\n            pressures\n          });\n        }\n      } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(draggingElement)) {\n        pointerDownState.drag.hasOccurred = true;\n        this.setState({\n          selectedElementsAreBeingDragged: true\n        });\n        const points = draggingElement.points;\n        let dx = gridX - draggingElement.x;\n        let dy = gridY - draggingElement.y;\n\n        if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event) && points.length === 2) {\n          ({\n            width: dx,\n            height: dy\n          } = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getLockedLinearCursorAlignSize)(draggingElement.x, draggingElement.y, pointerCoords.x, pointerCoords.y));\n        }\n\n        if (points.length === 1) {\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n            points: [...points, [dx, dy]]\n          });\n        } else if (points.length === 2) {\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n            points: [...points.slice(0, -1), [dx, dy]]\n          });\n        }\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(draggingElement, false)) {\n          // When creating a linear element by dragging\n          this.maybeSuggestBindingsForLinearElementAtCoords(draggingElement, [pointerCoords], this.state.startBoundElement);\n        }\n      } else {\n        pointerDownState.lastCoords.x = pointerCoords.x;\n        pointerDownState.lastCoords.y = pointerCoords.y;\n        this.maybeDragNewGenericElement(pointerDownState, event);\n      }\n\n      if (this.state.activeTool.type === \"selection\") {\n        pointerDownState.boxSelection.hasOccurred = true;\n        const elements = this.scene.getNonDeletedElements(); // box-select line editor points\n\n        if (this.state.editingLinearElement) {\n          _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handleBoxSelection(event, this.state, this.setState.bind(this)); // regular box-select\n        } else {\n          let shouldReuseSelection = true;\n\n          if (!event.shiftKey && (0,_scene__WEBPACK_IMPORTED_MODULE_29__.isSomeElementSelected)(elements, this.state)) {\n            if (pointerDownState.withCmdOrCtrl && pointerDownState.hit.element) {\n              this.setState(prevState => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)(Object.assign(Object.assign({}, prevState), {\n                selectedElementIds: {\n                  [pointerDownState.hit.element.id]: true\n                }\n              }), this.scene.getNonDeletedElements(), prevState, this));\n            } else {\n              shouldReuseSelection = false;\n            }\n          }\n\n          const elementsWithinSelection = (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getElementsWithinSelection)(elements, draggingElement);\n          this.setState(prevState => {\n            const nextSelectedElementIds = Object.assign(Object.assign({}, shouldReuseSelection && prevState.selectedElementIds), elementsWithinSelection.reduce((acc, element) => {\n              acc[element.id] = true;\n              return acc;\n            }, {}));\n\n            if (pointerDownState.hit.element) {\n              // if using ctrl/cmd, select the hitElement only if we\n              // haven't box-selected anything else\n              if (!elementsWithinSelection.length) {\n                nextSelectedElementIds[pointerDownState.hit.element.id] = true;\n              } else {\n                delete nextSelectedElementIds[pointerDownState.hit.element.id];\n              }\n            }\n\n            prevState = !shouldReuseSelection ? Object.assign(Object.assign({}, prevState), {\n              selectedGroupIds: {},\n              editingGroupId: null\n            }) : prevState;\n            return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n              editingGroupId: prevState.editingGroupId,\n              selectedElementIds: nextSelectedElementIds\n            }, this.scene.getNonDeletedElements(), prevState, this)), {\n              // select linear element only when we haven't box-selected anything else\n              selectedLinearElement: elementsWithinSelection.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(elementsWithinSelection[0]) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(elementsWithinSelection[0], this.scene) : null,\n              showHyperlinkPopup: elementsWithinSelection.length === 1 && (elementsWithinSelection[0].link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(elementsWithinSelection[0])) ? \"info\" : false\n            });\n          });\n        }\n      }\n    });\n  } // Returns whether the pointer move happened over either scrollbar\n\n\n  handlePointerMoveOverScrollbars(event, pointerDownState) {\n    if (pointerDownState.scrollbars.isOverHorizontal) {\n      const x = event.clientX;\n      const dx = x - pointerDownState.lastCoords.x;\n      this.translateCanvas({\n        scrollX: this.state.scrollX - dx / this.state.zoom.value\n      });\n      pointerDownState.lastCoords.x = x;\n      return true;\n    }\n\n    if (pointerDownState.scrollbars.isOverVertical) {\n      const y = event.clientY;\n      const dy = y - pointerDownState.lastCoords.y;\n      this.translateCanvas({\n        scrollY: this.state.scrollY - dy / this.state.zoom.value\n      });\n      pointerDownState.lastCoords.y = y;\n      return true;\n    }\n\n    return false;\n  }\n\n  onPointerUpFromPointerDownHandler(pointerDownState) {\n    return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_83__.withBatchedUpdates)(childEvent => {\n      var _a, _b, _c, _d, _e, _f;\n\n      this.removePointer(childEvent);\n\n      if (pointerDownState.eventListeners.onMove) {\n        pointerDownState.eventListeners.onMove.flush();\n      }\n\n      const {\n        draggingElement,\n        resizingElement,\n        multiElement,\n        activeTool,\n        isResizing,\n        isRotating\n      } = this.state;\n      this.setState(prevState => ({\n        isResizing: false,\n        isRotating: false,\n        resizingElement: null,\n        selectionElement: null,\n        frameToHighlight: null,\n        elementsToHighlight: null,\n        cursorButton: \"up\",\n        // text elements are reset on finalize, and resetting on pointerup\n        // may cause issues with double taps\n        editingElement: multiElement || (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement) ? this.state.editingElement : null,\n        snapLines: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateStable)(prevState.snapLines, []),\n        originSnapOffset: null\n      }));\n      _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setReferenceSnapPoints(null);\n      _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setVisibleGaps(null);\n      this.savePointer(childEvent.clientX, childEvent.clientY, \"up\");\n      this.setState({\n        selectedElementsAreBeingDragged: false\n      }); // Handle end of dragging a point of a linear element, might close a loop\n      // and sets binding element\n\n      if (this.state.editingLinearElement) {\n        if (!pointerDownState.boxSelection.hasOccurred && ((_b = (_a = pointerDownState.hit) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.id) !== this.state.editingLinearElement.elementId) {\n          this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n        } else {\n          const editingLinearElement = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerUp(childEvent, this.state.editingLinearElement, this.state);\n\n          if (editingLinearElement !== this.state.editingLinearElement) {\n            this.setState({\n              editingLinearElement,\n              suggestedBindings: []\n            });\n          }\n        }\n      } else if (this.state.selectedLinearElement) {\n        if (((_d = (_c = pointerDownState.hit) === null || _c === void 0 ? void 0 : _c.element) === null || _d === void 0 ? void 0 : _d.id) !== this.state.selectedLinearElement.elementId) {\n          const selectedELements = this.scene.getSelectedElements(this.state); // set selectedLinearElement to null if there is more than one element selected since we don't want to show linear element handles\n\n          if (selectedELements.length > 1) {\n            this.setState({\n              selectedLinearElement: null\n            });\n          }\n        } else {\n          const linearElementEditor = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerUp(childEvent, this.state.selectedLinearElement, this.state);\n          const {\n            startBindingElement,\n            endBindingElement\n          } = linearElementEditor;\n          const element = this.scene.getElement(linearElementEditor.elementId);\n\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(element)) {\n            (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindLinearElement)(element, startBindingElement, endBindingElement);\n          }\n\n          if (linearElementEditor !== this.state.selectedLinearElement) {\n            this.setState({\n              selectedLinearElement: Object.assign(Object.assign({}, linearElementEditor), {\n                selectedPointsIndices: null\n              }),\n              suggestedBindings: []\n            });\n          }\n        }\n      }\n\n      this.missingPointerEventCleanupEmitter.clear();\n      window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, pointerDownState.eventListeners.onMove);\n      window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, pointerDownState.eventListeners.onUp);\n      window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, pointerDownState.eventListeners.onKeyDown);\n      window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, pointerDownState.eventListeners.onKeyUp);\n\n      if (this.state.pendingImageElementId) {\n        this.setState({\n          pendingImageElementId: null\n        });\n      }\n\n      this.onPointerUpEmitter.trigger(this.state.activeTool, pointerDownState, childEvent);\n\n      if ((draggingElement === null || draggingElement === void 0 ? void 0 : draggingElement.type) === \"freedraw\") {\n        const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(childEvent, this.state);\n        const points = draggingElement.points;\n        let dx = pointerCoords.x - draggingElement.x;\n        let dy = pointerCoords.y - draggingElement.y; // Allows dots to avoid being flagged as infinitely small\n\n        if (dx === points[0][0] && dy === points[0][1]) {\n          dy += 0.0001;\n          dx += 0.0001;\n        }\n\n        const pressures = draggingElement.simulatePressure ? [] : [...draggingElement.pressures, childEvent.pressure];\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n          points: [...points, [dx, dy]],\n          pressures,\n          lastCommittedPoint: [dx, dy]\n        });\n        this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n        return;\n      }\n\n      if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(draggingElement)) {\n        const imageElement = draggingElement;\n\n        try {\n          this.initializeImageDimensions(imageElement);\n          this.setState({\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n              [imageElement.id]: true\n            }, this.state)\n          }, () => {\n            this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n          });\n        } catch (error) {\n          console.error(error);\n          this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().filter(el => el.id !== imageElement.id));\n          this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n        }\n\n        return;\n      }\n\n      if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(draggingElement)) {\n        if (draggingElement.points.length > 1) {\n          this.history.resumeRecording();\n        }\n\n        const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(childEvent, this.state);\n\n        if (!pointerDownState.drag.hasOccurred && draggingElement && !multiElement) {\n          (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n            points: [...draggingElement.points, [pointerCoords.x - draggingElement.x, pointerCoords.y - draggingElement.y]]\n          });\n          this.setState({\n            multiElement: draggingElement,\n            editingElement: this.state.draggingElement\n          });\n        } else if (pointerDownState.drag.hasOccurred && !multiElement) {\n          if ((0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(draggingElement, false)) {\n            (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.maybeBindLinearElement)(draggingElement, this.state, this.scene, pointerCoords);\n          }\n\n          this.setState({\n            suggestedBindings: [],\n            startBoundElement: null\n          });\n\n          if (!activeTool.locked) {\n            (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n            this.setState(prevState => ({\n              draggingElement: null,\n              activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, {\n                type: \"selection\"\n              }),\n              selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n                [draggingElement.id]: true\n              }), prevState),\n              selectedLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(draggingElement, this.scene)\n            }));\n          } else {\n            this.setState(prevState => ({\n              draggingElement: null\n            }));\n          }\n        }\n\n        return;\n      }\n\n      if (activeTool.type !== \"selection\" && draggingElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isInvisiblySmallElement)(draggingElement)) {\n        // remove invisible element which was added in onPointerDown\n        this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().filter(el => el.id !== draggingElement.id));\n        this.setState({\n          draggingElement: null\n        });\n        return;\n      }\n\n      if (draggingElement) {\n        if (pointerDownState.drag.hasOccurred) {\n          const sceneCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(childEvent, this.state); // when editing the points of a linear element, we check if the\n          // linear element still is in the frame afterwards\n          // if not, the linear element will be removed from its frame (if any)\n\n          if (this.state.selectedLinearElement && this.state.selectedLinearElement.isDragging) {\n            const linearElement = this.scene.getElement(this.state.selectedLinearElement.elementId);\n\n            if (linearElement === null || linearElement === void 0 ? void 0 : linearElement.frameId) {\n              const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getContainingFrame)(linearElement);\n\n              if (frame && linearElement) {\n                if (!(0,_frame__WEBPACK_IMPORTED_MODULE_51__.elementOverlapsWithFrame)(linearElement, frame)) {\n                  // remove the linear element from all groups\n                  // before removing it from the frame as well\n                  (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(linearElement, {\n                    groupIds: []\n                  });\n                  this.scene.replaceAllElements((0,_frame__WEBPACK_IMPORTED_MODULE_51__.removeElementsFromFrame)(this.scene.getElementsIncludingDeleted(), [linearElement], this.state));\n                }\n              }\n            }\n          } else {\n            // update the relationships between selected elements and frames\n            const topLayerFrame = this.getTopLayerFrameAtSceneCoords(sceneCoords);\n            const selectedElements = this.scene.getSelectedElements(this.state);\n            let nextElements = this.scene.getElementsIncludingDeleted();\n\n            const updateGroupIdsAfterEditingGroup = elements => {\n              if (elements.length > 0) {\n                for (const element of elements) {\n                  const index = element.groupIds.indexOf(this.state.editingGroupId);\n                  (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n                    groupIds: element.groupIds.slice(0, index)\n                  }, false);\n                }\n\n                nextElements.forEach(element => {\n                  if (element.groupIds.length && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(nextElements, element.groupIds[element.groupIds.length - 1]).length < 2) {\n                    (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n                      groupIds: []\n                    }, false);\n                  }\n                });\n                this.setState({\n                  editingGroupId: null\n                });\n              }\n            };\n\n            if (topLayerFrame && !this.state.selectedElementIds[topLayerFrame.id]) {\n              const elementsToAdd = selectedElements.filter(element => element.frameId !== topLayerFrame.id && (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isElementInFrame)(element, nextElements, this.state));\n\n              if (this.state.editingGroupId) {\n                updateGroupIdsAfterEditingGroup(elementsToAdd);\n              }\n\n              nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.addElementsToFrame)(nextElements, elementsToAdd, topLayerFrame);\n            } else if (!topLayerFrame) {\n              if (this.state.editingGroupId) {\n                const elementsToRemove = selectedElements.filter(element => element.frameId && !(0,_frame__WEBPACK_IMPORTED_MODULE_51__.isElementInFrame)(element, nextElements, this.state));\n                updateGroupIdsAfterEditingGroup(elementsToRemove);\n              }\n            }\n\n            nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.updateFrameMembershipOfSelectedElements)(nextElements, this.state, this);\n            this.scene.replaceAllElements(nextElements);\n          }\n        }\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(draggingElement)) {\n          const elementsInsideFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInNewFrame)(this.scene.getElementsIncludingDeleted(), draggingElement);\n          this.scene.replaceAllElements((0,_frame__WEBPACK_IMPORTED_MODULE_51__.addElementsToFrame)(this.scene.getElementsIncludingDeleted(), elementsInsideFrame, draggingElement));\n        }\n\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getNormalizedDimensions)(draggingElement));\n      }\n\n      if (resizingElement) {\n        this.history.resumeRecording();\n      }\n\n      if (resizingElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isInvisiblySmallElement)(resizingElement)) {\n        this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().filter(el => el.id !== resizingElement.id));\n      } // handle frame membership for resizing frames and/or selected elements\n\n\n      if (pointerDownState.resize.isResizing) {\n        let nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.updateFrameMembershipOfSelectedElements)(this.scene.getElementsIncludingDeleted(), this.state, this);\n        const selectedFrames = this.scene.getSelectedElements(this.state).filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element));\n\n        for (const frame of selectedFrames) {\n          nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.replaceAllElementsInFrame)(nextElements, (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getElementsIncludingDeleted(), frame, this.state), frame, this.state);\n        }\n\n        this.scene.replaceAllElements(nextElements);\n      } // Code below handles selection when element(s) weren't\n      // drag or added to selection on pointer down phase.\n\n\n      const hitElement = pointerDownState.hit.element;\n\n      if (((_e = this.state.selectedLinearElement) === null || _e === void 0 ? void 0 : _e.elementId) !== (hitElement === null || hitElement === void 0 ? void 0 : hitElement.id) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(hitElement)) {\n        const selectedELements = this.scene.getSelectedElements(this.state); // set selectedLinearElement when no other element selected except\n        // the one we've hit\n\n        if (selectedELements.length === 1) {\n          this.setState({\n            selectedLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(hitElement, this.scene)\n          });\n        }\n      }\n\n      const pointerStart = this.lastPointerDownEvent;\n      const pointerEnd = this.lastPointerUpEvent || this.lastPointerMoveEvent;\n\n      if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state) && pointerStart && pointerEnd) {\n        this.eraserTrail.endPath();\n        const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerStart.clientX, pointerStart.clientY, pointerEnd.clientX, pointerEnd.clientY);\n\n        if (draggedDistance === 0) {\n          const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n            clientX: pointerEnd.clientX,\n            clientY: pointerEnd.clientY\n          }, this.state);\n          const hitElements = this.getElementsAtPosition(scenePointer.x, scenePointer.y);\n          hitElements.forEach(hitElement => this.elementsPendingErasure.add(hitElement.id));\n        }\n\n        this.eraseElements();\n        return;\n      } else if (this.elementsPendingErasure.size) {\n        this.restoreReadyToEraseElements();\n      }\n\n      if (hitElement && !pointerDownState.drag.hasOccurred && !pointerDownState.hit.wasAddedToSelection && ( // if we're editing a line, pointerup shouldn't switch selection if\n      // box selected\n      !this.state.editingLinearElement || !pointerDownState.boxSelection.hasOccurred)) {\n        // when inside line editor, shift selects points instead\n        if (childEvent.shiftKey && !this.state.editingLinearElement) {\n          if (this.state.selectedElementIds[hitElement.id]) {\n            if ((0,_groups__WEBPACK_IMPORTED_MODULE_23__.isSelectedViaGroup)(this.state, hitElement)) {\n              this.setState(_prevState => {\n                const nextSelectedElementIds = Object.assign({}, _prevState.selectedElementIds); // We want to unselect all groups hitElement is part of\n                // as well as all elements that are part of the groups\n                // hitElement is part of\n\n                for (const groupedElement of hitElement.groupIds.flatMap(groupId => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), groupId))) {\n                  delete nextSelectedElementIds[groupedElement.id];\n                }\n\n                return {\n                  selectedGroupIds: Object.assign(Object.assign({}, _prevState.selectedElementIds), hitElement.groupIds.map(gId => ({\n                    [gId]: false\n                  })).reduce((prev, acc) => Object.assign(Object.assign({}, prev), acc), {})),\n                  selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedElementIds, _prevState)\n                };\n              }); // if not dragging a linear element point (outside editor)\n            } else if (!((_f = this.state.selectedLinearElement) === null || _f === void 0 ? void 0 : _f.isDragging)) {\n              // remove element from selection while\n              // keeping prev elements selected\n              this.setState(prevState => {\n                const newSelectedElementIds = Object.assign({}, prevState.selectedElementIds);\n                delete newSelectedElementIds[hitElement.id];\n                const newSelectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getSelectedElements)(this.scene.getNonDeletedElements(), {\n                  selectedElementIds: newSelectedElementIds\n                });\n                return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n                  editingGroupId: prevState.editingGroupId,\n                  selectedElementIds: newSelectedElementIds\n                }, this.scene.getNonDeletedElements(), prevState, this)), {\n                  // set selectedLinearElement only if thats the only element selected\n                  selectedLinearElement: newSelectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(newSelectedElements[0]) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(newSelectedElements[0], this.scene) : prevState.selectedLinearElement\n                });\n              });\n            }\n          } else if (hitElement.frameId && this.state.selectedElementIds[hitElement.frameId]) {\n            // when hitElement is part of a selected frame, deselect the frame\n            // to avoid frame and containing elements selected simultaneously\n            this.setState(prevState => {\n              var _a, _b;\n\n              const nextSelectedElementIds = Object.assign(Object.assign({}, prevState.selectedElementIds), {\n                [hitElement.id]: true\n              }); // deselect the frame\n\n              delete nextSelectedElementIds[hitElement.frameId]; // deselect groups containing the frame\n\n              ((_b = (_a = this.scene.getElement(hitElement.frameId)) === null || _a === void 0 ? void 0 : _a.groupIds) !== null && _b !== void 0 ? _b : []).flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).forEach(element => {\n                delete nextSelectedElementIds[element.id];\n              });\n              return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n                editingGroupId: prevState.editingGroupId,\n                selectedElementIds: nextSelectedElementIds\n              }, this.scene.getNonDeletedElements(), prevState, this)), {\n                showHyperlinkPopup: hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) ? \"info\" : false\n              });\n            });\n          } else {\n            // add element to selection while keeping prev elements selected\n            this.setState(_prevState => ({\n              selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, _prevState.selectedElementIds), {\n                [hitElement.id]: true\n              }), _prevState)\n            }));\n          }\n        } else {\n          this.setState(prevState => {\n            var _a;\n\n            return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n              editingGroupId: prevState.editingGroupId,\n              selectedElementIds: {\n                [hitElement.id]: true\n              }\n            }, this.scene.getNonDeletedElements(), prevState, this)), {\n              selectedLinearElement: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(hitElement) && // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.\n              // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized\n              ((_a = prevState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) !== hitElement.id ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(hitElement, this.scene) : prevState.selectedLinearElement\n            });\n          });\n        }\n      }\n\n      if (!pointerDownState.drag.hasOccurred && !this.state.isResizing && (hitElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isHittingElementBoundingBoxWithoutHittingElement)(hitElement, this.state, this.frameNameBoundsCache, pointerDownState.origin.x, pointerDownState.origin.y) || !hitElement && pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements)) {\n        if (this.state.editingLinearElement) {\n          this.setState({\n            editingLinearElement: null\n          });\n        } else {\n          // Deselect selected elements\n          this.setState({\n            selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n            selectedGroupIds: {},\n            editingGroupId: null,\n            activeEmbeddable: null\n          });\n        }\n\n        return;\n      }\n\n      if (!activeTool.locked && activeTool.type !== \"freedraw\" && draggingElement && draggingElement.type !== \"selection\") {\n        this.setState(prevState => ({\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n            [draggingElement.id]: true\n          }), prevState),\n          showHyperlinkPopup: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(draggingElement) && !draggingElement.link ? \"editor\" : prevState.showHyperlinkPopup\n        }));\n      }\n\n      if (activeTool.type !== \"selection\" || (0,_scene__WEBPACK_IMPORTED_MODULE_29__.isSomeElementSelected)(this.scene.getNonDeletedElements(), this.state)) {\n        this.history.resumeRecording();\n      }\n\n      if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {\n        ((0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) ? _element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindSelectedElements : _element_binding__WEBPACK_IMPORTED_MODULE_17__.unbindLinearElements)(this.scene.getSelectedElements(this.state));\n      }\n\n      if (activeTool.type === \"laser\") {\n        this.laserTrails.endPath();\n        return;\n      }\n\n      if (!activeTool.locked && activeTool.type !== \"freedraw\") {\n        (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n        this.setState({\n          draggingElement: null,\n          suggestedBindings: [],\n          activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, {\n            type: \"selection\"\n          })\n        });\n      } else {\n        this.setState({\n          draggingElement: null,\n          suggestedBindings: []\n        });\n      }\n\n      if (hitElement && this.lastPointerUpEvent && this.lastPointerDownEvent && this.lastPointerUpEvent.timeStamp - this.lastPointerDownEvent.timeStamp < 300 && gesture.pointers.size <= 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, this.lastPointerUpEvent, pointerDownState.origin.x, pointerDownState.origin.y)) {\n        this.handleEmbeddableCenterClick(hitElement);\n      }\n    });\n  }\n\n  maybeSuggestBindingForAll(selectedElements) {\n    if (selectedElements.length > 50) {\n      return;\n    }\n\n    const suggestedBindings = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getEligibleElementsForBinding)(selectedElements);\n    this.setState({\n      suggestedBindings\n    });\n  }\n\n  setSelection(elements) {\n    const selectedElementIds = {};\n    const selectedGroupIds = {};\n    elements.forEach(ele => {\n      if (ele.groupIds.length) {\n        selectedElementIds[ele.id] = true;\n        ele.groupIds.forEach(id => {\n          selectedGroupIds[id] = true;\n        });\n      } // exclude bound text elements as we don't mark them as selected when\n      // container is selected unless in group\n      else if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele)) {\n        selectedElementIds[ele.id] = true;\n      }\n    });\n    this.setState({\n      previousSelectedElementIds: this.state.selectedElementIds,\n      selectedElementIds,\n      selectedGroupIds\n    });\n  }\n\n  clearSelection(hitElement) {\n    this.setState(prevState => ({\n      selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, prevState),\n      activeEmbeddable: null,\n      selectedGroupIds: {},\n      // Continue editing the same group if the user selected a different\n      // element from it\n      editingGroupId: prevState.editingGroupId && hitElement != null && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.isElementInGroup)(hitElement, prevState.editingGroupId) ? prevState.editingGroupId : null\n    }));\n    this.setState({\n      selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n      activeEmbeddable: null,\n      previousSelectedElementIds: this.state.selectedElementIds\n    });\n  }\n\n  getTextWysiwygSnappedToCenterPosition(x, y, appState, container) {\n    if (container) {\n      let elementCenterX = container.x + container.width / 2;\n      let elementCenterY = container.y + container.height / 2;\n      const elementCenter = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getContainerCenter)(container, appState);\n\n      if (elementCenter) {\n        elementCenterX = elementCenter.x;\n        elementCenterY = elementCenter.y;\n      }\n\n      const distanceToCenter = Math.hypot(x - elementCenterX, y - elementCenterY);\n      const isSnappedToCenter = distanceToCenter < _constants__WEBPACK_IMPORTED_MODULE_12__.TEXT_TO_CENTER_SNAP_THRESHOLD;\n\n      if (isSnappedToCenter) {\n        const {\n          x: viewportX,\n          y: viewportY\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.sceneCoordsToViewportCoords)({\n          sceneX: elementCenterX,\n          sceneY: elementCenterY\n        }, appState);\n        return {\n          viewportX,\n          viewportY,\n          elementCenterX,\n          elementCenterY\n        };\n      }\n    }\n  }\n\n  getCanvasOffsets() {\n    var _a;\n\n    if ((_a = this.excalidrawContainerRef) === null || _a === void 0 ? void 0 : _a.current) {\n      const excalidrawContainer = this.excalidrawContainerRef.current;\n      const {\n        left,\n        top\n      } = excalidrawContainer.getBoundingClientRect();\n      return {\n        offsetLeft: left,\n        offsetTop: top\n      };\n    }\n\n    return {\n      offsetLeft: 0,\n      offsetTop: 0\n    };\n  }\n\n  async updateLanguage() {\n    const currentLang = _i18n__WEBPACK_IMPORTED_MODULE_25__.languages.find(lang => lang.code === this.props.langCode) || _i18n__WEBPACK_IMPORTED_MODULE_25__.defaultLang;\n    await (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.setLanguage)(currentLang);\n    this.setAppState({});\n  }\n\n}\n\nif (\"development\" === _constants__WEBPACK_IMPORTED_MODULE_12__.ENV.TEST || \"development\" !== \"production\") {\n  window.h = window.h || {};\n  Object.defineProperties(window.h, {\n    elements: {\n      configurable: true,\n\n      get() {\n        var _a;\n\n        return (_a = this.app) === null || _a === void 0 ? void 0 : _a.scene.getElementsIncludingDeleted();\n      },\n\n      set(elements) {\n        var _a;\n\n        return (_a = this.app) === null || _a === void 0 ? void 0 : _a.scene.replaceAllElements(elements);\n      }\n\n    }\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (App);\n\n//# sourceURL=webpack://ExcalidrawLib/./components/App.tsx?");
 
 /***/ }),
 
@@ -1249,36 +1271,14 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
-/***/ "./components/LaserTool/LaserPathManager.ts":
-/*!**************************************************!*\
-  !*** ./components/LaserTool/LaserPathManager.ts ***!
-  \**************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"LaserPathManager\": () => (/* binding */ LaserPathManager)\n/* harmony export */ });\n/* harmony import */ var _excalidraw_laser_pointer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @excalidraw/laser-pointer */ \"../../node_modules/@excalidraw/laser-pointer/dist/esm.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../utils */ \"./utils.ts\");\n/* harmony import */ var _clients__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../clients */ \"./clients.ts\");\n\n\n // decay time in milliseconds\n\nconst DECAY_TIME = 1000;\n\nconst getDecayTime = () => {\n  var _a, _b, _c;\n\n  return (_c = (_b = (_a = window.ExcalidrawAutomate) === null || _a === void 0 ? void 0 : _a.LASERPOINTER) === null || _b === void 0 ? void 0 : _b.DECAY_TIME) !== null && _c !== void 0 ? _c : DECAY_TIME;\n}; //zsviczian\n// length of line in points before it starts decaying\n\n\nconst DECAY_LENGTH = 50;\n\nconst getDecayLength = () => {\n  var _a, _b, _c;\n\n  return (_c = (_b = (_a = window.ExcalidrawAutomate) === null || _a === void 0 ? void 0 : _a.LASERPOINTER) === null || _b === void 0 ? void 0 : _b.DECAY_LENGTH) !== null && _c !== void 0 ? _c : DECAY_LENGTH;\n}; //zsviczian\n\n\nconst getColor = () => {\n  var _a, _b, _c;\n\n  return (_c = (_b = (_a = window.ExcalidrawAutomate) === null || _a === void 0 ? void 0 : _a.LASERPOINTER) === null || _b === void 0 ? void 0 : _b.COLOR) !== null && _c !== void 0 ? _c : \"red\";\n}; //zsviczian\n\n\nconst average = (a, b) => (a + b) / 2;\n\nfunction getSvgPathFromStroke(points, closed = true) {\n  const len = points.length;\n\n  if (len < 4) {\n    return ``;\n  }\n\n  let a = points[0];\n  let b = points[1];\n  const c = points[2];\n  let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(2)},${b[1].toFixed(2)} ${average(b[0], c[0]).toFixed(2)},${average(b[1], c[1]).toFixed(2)} T`;\n\n  for (let i = 2, max = len - 1; i < max; i++) {\n    a = points[i];\n    b = points[i + 1];\n    result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(2)} `;\n  }\n\n  if (closed) {\n    result += \"Z\";\n  }\n\n  return result;\n}\n\nfunction easeOutCubic(t) {\n  return 1 - Math.pow(1 - t, 3);\n}\n\nfunction instantiateCollabolatorState() {\n  return {\n    currentPath: undefined,\n    finishedPaths: [],\n    lastPoint: [-10000, -10000],\n    svg: document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\")\n  };\n}\n\nfunction instantiatePath() {\n  _excalidraw_laser_pointer__WEBPACK_IMPORTED_MODULE_0__.LaserPointer.constants.cornerDetectionMaxAngle = 70;\n  return new _excalidraw_laser_pointer__WEBPACK_IMPORTED_MODULE_0__.LaserPointer({\n    simplify: 0,\n    streamline: 0.4,\n    sizeMapping: c => {\n      const pt = getDecayTime(); //zsviczian\n\n      const pl = getDecayLength(); //zsviczian\n\n      const t = Math.max(0, 1 - (performance.now() - c.pressure) / pt);\n      const l = (pl - Math.min(pl, c.totalLength - c.currentIndex)) / pl;\n      return Math.min(easeOutCubic(l), easeOutCubic(t));\n    }\n  });\n}\n\nclass LaserPathManager {\n  constructor(app) {\n    this.app = app;\n    this.collaboratorsState = new Map();\n    this.isDrawing = false;\n    this.isRunning = false;\n    this.ownState = instantiateCollabolatorState();\n  }\n\n  destroy() {\n    this.stop();\n    this.isDrawing = false;\n    this.ownState = instantiateCollabolatorState();\n    this.collaboratorsState = new Map();\n  }\n\n  startPath(x, y) {\n    if (this.container) {\n      //zsviczian (fix offset)\n      this.container.style.top = \"0px\";\n      this.container.style.left = \"0px\";\n      const {\n        x,\n        y\n      } = this.container.getBoundingClientRect();\n      this.container.style.top = `${-y}px`;\n      this.container.style.left = `${-x}px`;\n    }\n\n    this.ownState.currentPath = instantiatePath();\n    this.ownState.currentPath.addPoint([x, y, performance.now()]);\n    this.updatePath(this.ownState);\n  }\n\n  addPointToPath(x, y) {\n    var _a;\n\n    if (this.ownState.currentPath) {\n      (_a = this.ownState.currentPath) === null || _a === void 0 ? void 0 : _a.addPoint([x, y, performance.now()]);\n      this.updatePath(this.ownState);\n    }\n  }\n\n  endPath() {\n    if (this.ownState.currentPath) {\n      this.ownState.currentPath.close();\n      this.ownState.finishedPaths.push(this.ownState.currentPath);\n      this.updatePath(this.ownState);\n    }\n  }\n\n  updatePath(state) {\n    this.isDrawing = true;\n\n    if (!this.isRunning) {\n      this.start();\n    }\n  }\n\n  start(svg) {\n    if (svg) {\n      this.container = svg;\n      this.container.appendChild(this.ownState.svg);\n    }\n\n    this.stop();\n    this.isRunning = true;\n    this.loop();\n  }\n\n  stop() {\n    this.isRunning = false;\n\n    if (this.rafId) {\n      cancelAnimationFrame(this.rafId);\n    }\n\n    this.rafId = undefined;\n  }\n\n  loop() {\n    this.rafId = requestAnimationFrame(this.loop.bind(this));\n    this.updateCollabolatorsState();\n\n    if (this.isDrawing) {\n      this.update();\n    } else {\n      this.isRunning = false;\n    }\n  }\n\n  draw(path) {\n    const stroke = path.getStrokeOutline(path.options.size / this.app.state.zoom.value).map(([x, y]) => {\n      const result = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.sceneCoordsToViewportCoords)({\n        sceneX: x,\n        sceneY: y\n      }, this.app.state);\n      return [result.x, result.y];\n    });\n    return getSvgPathFromStroke(stroke, true);\n  }\n\n  updateCollabolatorsState() {\n    if (!this.container || !this.app.state.collaborators.size) {\n      return;\n    }\n\n    for (const [key, collabolator] of this.app.state.collaborators.entries()) {\n      if (!this.collaboratorsState.has(key)) {\n        const state = instantiateCollabolatorState();\n        this.container.appendChild(state.svg);\n        this.collaboratorsState.set(key, state);\n        this.updatePath(state);\n      }\n\n      const state = this.collaboratorsState.get(key);\n\n      if (collabolator.pointer && collabolator.pointer.tool === \"laser\") {\n        if (collabolator.button === \"down\" && state.currentPath === undefined) {\n          state.lastPoint = [collabolator.pointer.x, collabolator.pointer.y];\n          state.currentPath = instantiatePath();\n          state.currentPath.addPoint([collabolator.pointer.x, collabolator.pointer.y, performance.now()]);\n          this.updatePath(state);\n        }\n\n        if (collabolator.button === \"down\" && state.currentPath !== undefined) {\n          if (collabolator.pointer.x !== state.lastPoint[0] || collabolator.pointer.y !== state.lastPoint[1]) {\n            state.lastPoint = [collabolator.pointer.x, collabolator.pointer.y];\n            state.currentPath.addPoint([collabolator.pointer.x, collabolator.pointer.y, performance.now()]);\n            this.updatePath(state);\n          }\n        }\n\n        if (collabolator.button === \"up\" && state.currentPath !== undefined) {\n          state.lastPoint = [collabolator.pointer.x, collabolator.pointer.y];\n          state.currentPath.addPoint([collabolator.pointer.x, collabolator.pointer.y, performance.now()]);\n          state.currentPath.close();\n          state.finishedPaths.push(state.currentPath);\n          state.currentPath = undefined;\n          this.updatePath(state);\n        }\n      }\n    }\n  }\n\n  update() {\n    if (!this.container) {\n      return;\n    }\n\n    let somePathsExist = false;\n\n    for (const [key, state] of this.collaboratorsState.entries()) {\n      if (!this.app.state.collaborators.has(key)) {\n        state.svg.remove();\n        this.collaboratorsState.delete(key);\n        continue;\n      }\n\n      state.finishedPaths = state.finishedPaths.filter(path => {\n        const lastPoint = path.originalPoints[path.originalPoints.length - 1];\n        return !(lastPoint && lastPoint[2] < performance.now() - getDecayTime()); //zsviczian\n      });\n      let paths = state.finishedPaths.map(path => this.draw(path)).join(\" \");\n\n      if (state.currentPath) {\n        paths += ` ${this.draw(state.currentPath)}`;\n      }\n\n      if (paths.trim()) {\n        somePathsExist = true;\n      }\n\n      state.svg.setAttribute(\"d\", paths);\n      state.svg.setAttribute(\"fill\", (0,_clients__WEBPACK_IMPORTED_MODULE_2__.getClientColor)(key));\n    }\n\n    this.ownState.finishedPaths = this.ownState.finishedPaths.filter(path => {\n      const lastPoint = path.originalPoints[path.originalPoints.length - 1];\n      return !(lastPoint && lastPoint[2] < performance.now() - getDecayTime()); //zsviczian\n    });\n    let paths = this.ownState.finishedPaths.map(path => this.draw(path)).join(\" \");\n\n    if (this.ownState.currentPath) {\n      paths += ` ${this.draw(this.ownState.currentPath)}`;\n    }\n\n    paths = paths.trim();\n\n    if (paths) {\n      somePathsExist = true;\n    }\n\n    this.ownState.svg.setAttribute(\"d\", paths);\n    this.ownState.svg.setAttribute(\"fill\", getColor()); //zsviczian\n\n    if (!somePathsExist) {\n      this.isDrawing = false;\n    }\n  }\n\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./components/LaserTool/LaserPathManager.ts?");
-
-/***/ }),
-
-/***/ "./components/LaserTool/LaserPointerButton.tsx":
-/*!*****************************************************!*\
-  !*** ./components/LaserTool/LaserPointerButton.tsx ***!
-  \*****************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"LaserPointerButton\": () => (/* binding */ LaserPointerButton)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var _ToolIcon_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../ToolIcon.scss */ \"./components/ToolIcon.scss\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../icons */ \"./components/icons.tsx\");\n\n\n\n\nconst DEFAULT_SIZE = \"small\";\nconst LaserPointerButton = props => {\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"label\", Object.assign({\n    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(\"ToolIcon ToolIcon__LaserPointer\", `ToolIcon_size_${DEFAULT_SIZE}`, {\n      \"is-mobile\": props.isMobile\n    }),\n    title: `${props.title}`\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", {\n      className: \"ToolIcon_type_checkbox\",\n      type: \"checkbox\",\n      name: props.name,\n      onChange: props.onChange,\n      checked: props.checked,\n      \"aria-label\": props.title,\n      \"data-testid\": \"toolbar-LaserPointer\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n      className: \"ToolIcon__icon\"\n    }, {\n      children: _icons__WEBPACK_IMPORTED_MODULE_3__.laserPointerToolIcon\n    }))]\n  }));\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/LaserTool/LaserPointerButton.tsx?");
-
-/***/ }),
-
-/***/ "./components/LaserTool/LaserTool.tsx":
-/*!********************************************!*\
-  !*** ./components/LaserTool/LaserTool.tsx ***!
-  \********************************************/
+/***/ "./components/LaserPointerButton.tsx":
+/*!*******************************************!*\
+  !*** ./components/LaserPointerButton.tsx ***!
+  \*******************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"LaserToolOverlay\": () => (/* binding */ LaserToolOverlay)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _LaserToolOverlay_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./LaserToolOverlay.scss */ \"./components/LaserTool/LaserToolOverlay.scss\");\n\n\n\nconst LaserToolOverlay = ({\n  manager\n}) => {\n  const svgRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    if (svgRef.current) {\n      manager.start(svgRef.current);\n    }\n\n    return () => {\n      manager.stop();\n    };\n  }, [manager]);\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n    className: \"LaserToolOverlay\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"svg\", {\n      ref: svgRef,\n      className: \"LaserToolOverlayCanvas\"\n    })\n  }));\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/LaserTool/LaserTool.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"LaserPointerButton\": () => (/* binding */ LaserPointerButton)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var _ToolIcon_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ToolIcon.scss */ \"./components/ToolIcon.scss\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n\n\n\n\nconst DEFAULT_SIZE = \"small\";\nconst LaserPointerButton = props => {\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"label\", Object.assign({\n    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(\"ToolIcon ToolIcon__LaserPointer\", `ToolIcon_size_${DEFAULT_SIZE}`, {\n      \"is-mobile\": props.isMobile\n    }),\n    title: `${props.title}`\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", {\n      className: \"ToolIcon_type_checkbox\",\n      type: \"checkbox\",\n      name: props.name,\n      onChange: props.onChange,\n      checked: props.checked,\n      \"aria-label\": props.title,\n      \"data-testid\": \"toolbar-LaserPointer\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n      className: \"ToolIcon__icon\"\n    }, {\n      children: _icons__WEBPACK_IMPORTED_MODULE_3__.laserPointerToolIcon\n    }))]\n  }));\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/LaserPointerButton.tsx?");
 
 /***/ }),
 
@@ -1289,7 +1289,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _Actions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Actions */ \"./components/Actions.tsx\");\n/* harmony import */ var _ErrorDialog__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./ErrorDialog */ \"./components/ErrorDialog.tsx\");\n/* harmony import */ var _ImageExportDialog__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./ImageExportDialog */ \"./components/ImageExportDialog.tsx\");\n/* harmony import */ var _FixedSideContainer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./FixedSideContainer */ \"./components/FixedSideContainer.tsx\");\n/* harmony import */ var _HintViewer__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./HintViewer */ \"./components/HintViewer.tsx\");\n/* harmony import */ var _Island__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Island */ \"./components/Island.tsx\");\n/* harmony import */ var _LoadingMessage__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./LoadingMessage */ \"./components/LoadingMessage.tsx\");\n/* harmony import */ var _LockButton__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./LockButton */ \"./components/LockButton.tsx\");\n/* harmony import */ var _MobileMenu__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./MobileMenu */ \"./components/MobileMenu.tsx\");\n/* harmony import */ var _PasteChartDialog__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./PasteChartDialog */ \"./components/PasteChartDialog.tsx\");\n/* harmony import */ var _Section__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Section */ \"./components/Section.tsx\");\n/* harmony import */ var _HelpDialog__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./HelpDialog */ \"./components/HelpDialog.tsx\");\n/* harmony import */ var _Stack__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Stack */ \"./components/Stack.tsx\");\n/* harmony import */ var _UserList__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./UserList */ \"./components/UserList.tsx\");\n/* harmony import */ var _JSONExportDialog__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./JSONExportDialog */ \"./components/JSONExportDialog.tsx\");\n/* harmony import */ var _PenModeButton__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./PenModeButton */ \"./components/PenModeButton.tsx\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var _Stats__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ./Stats */ \"./components/Stats.tsx\");\n/* harmony import */ var _actions_actionToggleStats__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../actions/actionToggleStats */ \"./actions/actionToggleStats.tsx\");\n/* harmony import */ var _footer_Footer__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ./footer/Footer */ \"./components/footer/Footer.tsx\");\n/* harmony import */ var _Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ./Sidebar/Sidebar */ \"./components/Sidebar/Sidebar.tsx\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../jotai */ \"./jotai.ts\");\n/* harmony import */ var jotai__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! jotai */ \"../../node_modules/jotai/esm/index.mjs\");\n/* harmony import */ var _main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./main-menu/MainMenu */ \"./components/main-menu/MainMenu.tsx\");\n/* harmony import */ var _ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./ActiveConfirmDialog */ \"./components/ActiveConfirmDialog.tsx\");\n/* harmony import */ var _OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ./OverwriteConfirm/OverwriteConfirm */ \"./components/OverwriteConfirm/OverwriteConfirm.tsx\");\n/* harmony import */ var _HandButton__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ./HandButton */ \"./components/HandButton.tsx\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _context_tunnels__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ../context/tunnels */ \"./context/tunnels.ts\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _context_ui_appState__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ../context/ui-appState */ \"./context/ui-appState.ts\");\n/* harmony import */ var _DefaultSidebar__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./DefaultSidebar */ \"./components/DefaultSidebar.tsx\");\n/* harmony import */ var _EyeDropper__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./EyeDropper */ \"./components/EyeDropper.tsx\");\n/* harmony import */ var _LayerUI_scss__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ./LayerUI.scss */ \"./components/LayerUI.scss\");\n/* harmony import */ var _Toolbar_scss__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ./Toolbar.scss */ \"./components/Toolbar.scss\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _LaserTool_LaserPointerButton__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ./LaserTool/LaserPointerButton */ \"./components/LaserTool/LaserPointerButton.tsx\");\n/* harmony import */ var _MagicSettings__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ./MagicSettings */ \"./components/MagicSettings.tsx\");\n/* harmony import */ var _TTDDialog_TTDDialog__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ./TTDDialog/TTDDialog */ \"./components/TTDDialog/TTDDialog.tsx\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n  var t = {};\n\n  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst DefaultMainMenu = ({\n  UIOptions\n}) => {\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"], Object.assign({\n    __fallback: true\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.LoadScene, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.SaveToActiveFile, {}), UIOptions.canvasActions.export && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.Export, {}), UIOptions.canvasActions.saveAsImage && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.SaveAsImage, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.Help, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.ClearCanvas, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].Separator, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].Group, Object.assign({\n      title: \"Excalidraw links\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.Socials, {})\n    })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].Separator, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.ToggleTheme, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.ChangeCanvasBackground, {})]\n  }));\n};\n\nconst DefaultOverwriteConfirmDialog = () => {\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__.OverwriteConfirmDialog, Object.assign({\n    __fallback: true\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__.OverwriteConfirmDialog.Actions.SaveToDisk, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__.OverwriteConfirmDialog.Actions.ExportToImage, {})]\n  }));\n};\n\nconst LayerUI = ({\n  actionManager,\n  appState,\n  files,\n  setAppState,\n  elements,\n  canvas,\n  onLockToggle,\n  onHandToolToggle,\n  onPenModeToggle,\n  showExitZenModeBtn,\n  renderTopRightUI,\n  renderCustomStats,\n  UIOptions,\n  onExportImage,\n  renderWelcomeScreen,\n  children,\n  app,\n  isCollaborating,\n  openAIKey,\n  isOpenAIKeyPersisted,\n  onOpenAIAPIKeyChange,\n  onMagicSettingsConfirm\n}) => {\n  var _a, _b, _c;\n\n  const device = (0,_App__WEBPACK_IMPORTED_MODULE_25__.useDevice)();\n  const tunnels = (0,_context_tunnels__WEBPACK_IMPORTED_MODULE_36__.useInitializeTunnels)();\n  const [eyeDropperState, setEyeDropperState] = (0,jotai__WEBPACK_IMPORTED_MODULE_49__.useAtom)(_EyeDropper__WEBPACK_IMPORTED_MODULE_40__.activeEyeDropperAtom, _jotai__WEBPACK_IMPORTED_MODULE_30__.jotaiScope);\n\n  const renderJSONExportDialog = () => {\n    if (!UIOptions.canvasActions.export) {\n      return null;\n    }\n\n    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_JSONExportDialog__WEBPACK_IMPORTED_MODULE_22__.JSONExportDialog, {\n      elements: elements,\n      appState: appState,\n      files: files,\n      actionManager: actionManager,\n      exportOpts: UIOptions.canvasActions.export,\n      canvas: canvas,\n      setAppState: setAppState\n    });\n  };\n\n  const renderImageExportDialog = () => {\n    var _a;\n\n    if (!UIOptions.canvasActions.saveAsImage || ((_a = appState.openDialog) === null || _a === void 0 ? void 0 : _a.name) !== \"imageExport\") {\n      return null;\n    }\n\n    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ImageExportDialog__WEBPACK_IMPORTED_MODULE_10__.ImageExportDialog, {\n      elements: elements,\n      appState: appState,\n      files: files,\n      actionManager: actionManager,\n      onExportImage: onExportImage,\n      onCloseRequest: () => setAppState({\n        openDialog: null\n      })\n    });\n  };\n\n  const renderCanvasActions = () => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n    style: {\n      position: \"relative\"\n    }\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.MainMenuTunnel.Out, {}), renderWelcomeScreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.WelcomeScreenMenuHintTunnel.Out, {})]\n  }));\n\n  const renderSelectedShapeActions = () => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_18__.Section, Object.assign({\n    heading: \"selectedShapeActions\",\n    className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"selected-shape-actions zen-mode-transition\", {\n      \"transition-left\": appState.zenModeEnabled\n    })\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Island__WEBPACK_IMPORTED_MODULE_13__.Island, Object.assign({\n      className: _constants__WEBPACK_IMPORTED_MODULE_3__.CLASSES.SHAPE_ACTIONS_MENU,\n      padding: 2,\n      style: {\n        // we want to make sure this doesn't overflow so subtracting the\n        // approximate height of hamburgerMenu + footer\n        maxHeight: `${appState.height - 166}px`\n      }\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Actions__WEBPACK_IMPORTED_MODULE_8__.SelectedShapeActions, {\n        appState: appState,\n        elements: elements,\n        renderAction: actionManager.renderAction\n      })\n    }))\n  }));\n\n  const renderFixedSideContainer = () => {\n    var _a, _b;\n\n    const shouldRenderSelectedShapeActions = (0,_element__WEBPACK_IMPORTED_MODULE_4__.showSelectedShapeActions)(appState, elements);\n\n    if (appState.viewModeEnabled) {\n      return null;\n    } //zsviczian\n\n\n    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FixedSideContainer__WEBPACK_IMPORTED_MODULE_11__.FixedSideContainer, Object.assign({\n      side: \"top\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n        className: \"App-menu App-menu_top\"\n      }, {\n        children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Col, Object.assign({\n          gap: 6,\n          className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"App-menu_top__left\")\n        }, {\n          children: [renderCanvasActions(), shouldRenderSelectedShapeActions && renderSelectedShapeActions()]\n        })), !appState.viewModeEnabled && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_18__.Section, Object.assign({\n          heading: \"shapes\",\n          className: \"shapes-section\"\n        }, {\n          children: heading => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n            style: {\n              position: \"relative\"\n            }\n          }, {\n            children: [renderWelcomeScreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.WelcomeScreenToolbarHintTunnel.Out, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Col, Object.assign({\n              gap: 4,\n              align: \"start\"\n            }, {\n              children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Row, Object.assign({\n                gap: 1,\n                className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"App-toolbar-container\", {\n                  \"zen-mode\": appState.zenModeEnabled\n                })\n              }, {\n                children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Island__WEBPACK_IMPORTED_MODULE_13__.Island, Object.assign({\n                  padding: 1,\n                  className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"App-toolbar\", {\n                    \"zen-mode\": appState.zenModeEnabled\n                  })\n                }, {\n                  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HintViewer__WEBPACK_IMPORTED_MODULE_12__.HintViewer, {\n                    appState: appState,\n                    isMobile: device.editor.isMobile || !(appState.viewModeEnabled || appState.zenModeEnabled) && appState.trayModeEnabled,\n                    device: device,\n                    app: app\n                  }), heading, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Row, Object.assign({\n                    gap: 1\n                  }, {\n                    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_PenModeButton__WEBPACK_IMPORTED_MODULE_23__.PenModeButton, {\n                      zenModeEnabled: appState.zenModeEnabled,\n                      checked: appState.penMode,\n                      onChange: () => onPenModeToggle(null),\n                      title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.penMode\"),\n                      penDetected: appState.penDetected\n                    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LockButton__WEBPACK_IMPORTED_MODULE_15__.LockButton, {\n                      checked: appState.activeTool.locked,\n                      onChange: onLockToggle,\n                      title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.lock\")\n                    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n                      className: \"App-toolbar__divider\"\n                    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HandButton__WEBPACK_IMPORTED_MODULE_34__.HandButton, {\n                      checked: (0,_appState__WEBPACK_IMPORTED_MODULE_35__.isHandToolActive)(appState),\n                      onChange: () => onHandToolToggle(),\n                      title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.hand\"),\n                      isMobile: true\n                    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Actions__WEBPACK_IMPORTED_MODULE_8__.ShapesSwitcher, {\n                      appState: appState,\n                      activeTool: appState.activeTool,\n                      UIOptions: UIOptions,\n                      app: app\n                    })]\n                  }))]\n                })), isCollaborating && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Island__WEBPACK_IMPORTED_MODULE_13__.Island, Object.assign({\n                  style: {\n                    marginLeft: 8,\n                    alignSelf: \"center\",\n                    height: \"fit-content\"\n                  }\n                }, {\n                  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LaserTool_LaserPointerButton__WEBPACK_IMPORTED_MODULE_46__.LaserPointerButton, {\n                    title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.laser\"),\n                    checked: appState.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_3__.TOOL_TYPE.laser,\n                    onChange: () => app.setActiveTool({\n                      type: _constants__WEBPACK_IMPORTED_MODULE_3__.TOOL_TYPE.laser\n                    }),\n                    isMobile: true\n                  })\n                }))]\n              }))\n            }))]\n          }))\n        })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n          className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"layer-ui__wrapper__top-right zen-mode-transition\", {\n            \"transition-right\": appState.zenModeEnabled\n          })\n        }, {\n          children: [appState.collaborators.size > 0 && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_UserList__WEBPACK_IMPORTED_MODULE_21__.UserList, {\n            collaborators: appState.collaborators,\n            userToFollow: ((_a = appState.userToFollow) === null || _a === void 0 ? void 0 : _a.socketId) || null\n          }), !appState.viewModeEnabled && ( //zsviczian\n          renderTopRightUI === null || renderTopRightUI === void 0 ? void 0 : renderTopRightUI(device.editor.isMobile, appState)), !appState.viewModeEnabled && ( // hide button when sidebar docked\n          !isSidebarDocked || ((_b = appState.openSidebar) === null || _b === void 0 ? void 0 : _b.name) !== _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.name) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.DefaultSidebarTriggerTunnel.Out, {})]\n        }))]\n      }))\n    }));\n  };\n\n  const isTrayModeOrMobile = device.editor.isMobile || !(appState.viewModeEnabled || appState.zenModeEnabled) && appState.trayModeEnabled; //zsviczian\n\n  const renderSidebars = () => {\n    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DefaultSidebar__WEBPACK_IMPORTED_MODULE_39__.DefaultSidebar, {\n      __fallback: true,\n      onDock: docked => {\n        (0,_analytics__WEBPACK_IMPORTED_MODULE_24__.trackEvent)(\"sidebar\", `toggleDock (${docked ? \"dock\" : \"undock\"})`, `(${device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n      }\n    });\n  };\n\n  const isSidebarDocked = (0,jotai__WEBPACK_IMPORTED_MODULE_49__.useAtomValue)(_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_29__.isSidebarDockedAtom, _jotai__WEBPACK_IMPORTED_MODULE_30__.jotaiScope);\n\n  const layerUIJSX = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n    children: [children, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DefaultMainMenu, {\n      UIOptions: UIOptions\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DefaultSidebar__WEBPACK_IMPORTED_MODULE_39__.DefaultSidebar.Trigger, {\n      __fallback: true,\n      icon: _icons__WEBPACK_IMPORTED_MODULE_37__.LibraryIcon,\n      title: (0,_utils__WEBPACK_IMPORTED_MODULE_7__.capitalizeString)((0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.library\")),\n      onToggle: open => {\n        if (open) {\n          (0,_analytics__WEBPACK_IMPORTED_MODULE_24__.trackEvent)(\"sidebar\", `${_constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.name} (open)`, `button (${device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n        }\n      },\n      tab: _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.defaultTab\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DefaultOverwriteConfirmDialog, {}), ((_a = appState.openDialog) === null || _a === void 0 ? void 0 : _a.name) === \"ttd\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TTDDialog_TTDDialog__WEBPACK_IMPORTED_MODULE_48__.TTDDialog, {\n      __fallback: true\n    }), appState.isLoading && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LoadingMessage__WEBPACK_IMPORTED_MODULE_14__.LoadingMessage, {\n      delay: 250\n    }), appState.errorMessage && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ErrorDialog__WEBPACK_IMPORTED_MODULE_9__.ErrorDialog, Object.assign({\n      onClose: () => setAppState({\n        errorMessage: null\n      })\n    }, {\n      children: appState.errorMessage\n    })), eyeDropperState && //!device.editor.isMobile && //zsviczian\n    (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_EyeDropper__WEBPACK_IMPORTED_MODULE_40__.EyeDropper, {\n      colorPickerType: eyeDropperState.colorPickerType,\n      onCancel: () => {\n        setEyeDropperState(null);\n      },\n      onChange: (colorPickerType, color, selectedElements, {\n        altKey\n      }) => {\n        var _a;\n\n        if (colorPickerType !== \"elementBackground\" && colorPickerType !== \"elementStroke\") {\n          return;\n        }\n\n        if (selectedElements.length) {\n          for (const element of selectedElements) {\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_43__.mutateElement)(element, {\n              [altKey && eyeDropperState.swapPreviewOnAlt ? colorPickerType === \"elementBackground\" ? \"strokeColor\" : \"backgroundColor\" : colorPickerType === \"elementBackground\" ? \"backgroundColor\" : \"strokeColor\"]: color\n            }, false);\n            _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_44__.ShapeCache[\"delete\"](element);\n          }\n\n          (_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_45__[\"default\"].getScene(selectedElements[0])) === null || _a === void 0 ? void 0 : _a.informMutation();\n        } else if (colorPickerType === \"elementBackground\") {\n          setAppState({\n            currentItemBackgroundColor: color\n          });\n        } else {\n          setAppState({\n            currentItemStrokeColor: color\n          });\n        }\n      },\n      onSelect: (color, event) => {\n        var _a;\n\n        setEyeDropperState(state => {\n          return (state === null || state === void 0 ? void 0 : state.keepOpenOnAlt) && event.altKey ? state : null;\n        });\n        (_a = eyeDropperState === null || eyeDropperState === void 0 ? void 0 : eyeDropperState.onSelect) === null || _a === void 0 ? void 0 : _a.call(eyeDropperState, color, event);\n      }\n    }), ((_b = appState.openDialog) === null || _b === void 0 ? void 0 : _b.name) === \"help\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HelpDialog__WEBPACK_IMPORTED_MODULE_19__.HelpDialog, {\n      onClose: () => {\n        setAppState({\n          openDialog: null\n        });\n      }\n    }), ((_c = appState.openDialog) === null || _c === void 0 ? void 0 : _c.name) === \"settings\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicSettings__WEBPACK_IMPORTED_MODULE_47__.MagicSettings, {\n      openAIKey: openAIKey,\n      isPersisted: isOpenAIKeyPersisted,\n      onChange: onOpenAIAPIKeyChange,\n      onConfirm: (apiKey, shouldPersist) => {\n        var _a, _b;\n\n        const source = ((_a = appState.openDialog) === null || _a === void 0 ? void 0 : _a.name) === \"settings\" ? (_b = appState.openDialog) === null || _b === void 0 ? void 0 : _b.source : \"settings\";\n        setAppState({\n          openDialog: null\n        }, () => {\n          onMagicSettingsConfirm(apiKey, shouldPersist, source);\n        });\n      },\n      onClose: () => {\n        setAppState({\n          openDialog: null\n        });\n      }\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_32__.ActiveConfirmDialog, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.OverwriteConfirmDialogTunnel.Out, {}), renderImageExportDialog(), renderJSONExportDialog(), appState.pasteDialog.shown && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_PasteChartDialog__WEBPACK_IMPORTED_MODULE_17__.PasteChartDialog, {\n      setAppState: setAppState,\n      appState: appState,\n      onClose: () => setAppState({\n        pasteDialog: {\n          shown: false,\n          data: null\n        }\n      })\n    }), isTrayModeOrMobile && //zsviczian Added isTrayMode condition\n    (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MobileMenu__WEBPACK_IMPORTED_MODULE_16__.MobileMenu, {\n      app: app,\n      appState: appState,\n      elements: elements,\n      actionManager: actionManager,\n      renderJSONExportDialog: renderJSONExportDialog,\n      renderImageExportDialog: renderImageExportDialog,\n      setAppState: setAppState,\n      onLockToggle: onLockToggle,\n      onHandToolToggle: onHandToolToggle,\n      onPenModeToggle: onPenModeToggle,\n      renderTopRightUI: renderTopRightUI,\n      renderCustomStats: renderCustomStats,\n      renderSidebars: renderSidebars,\n      device: device,\n      renderWelcomeScreen: renderWelcomeScreen,\n      UIOptions: UIOptions\n    }), !isTrayModeOrMobile && //zsviczian changed from !device.editor.isMobile\n    (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n        className: \"layer-ui__wrapper\",\n        style: appState.openSidebar && isSidebarDocked && device.editor.canFitSidebar ? {\n          width: `calc(100% - ${_constants__WEBPACK_IMPORTED_MODULE_3__.LIBRARY_SIDEBAR_WIDTH}px)`\n        } : {}\n      }, {\n        children: [renderWelcomeScreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.WelcomeScreenCenterTunnel.Out, {}), renderFixedSideContainer(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_footer_Footer__WEBPACK_IMPORTED_MODULE_28__[\"default\"], {\n          appState: appState,\n          actionManager: actionManager,\n          showExitZenModeBtn: showExitZenModeBtn,\n          renderWelcomeScreen: renderWelcomeScreen\n        }), appState.showStats && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stats__WEBPACK_IMPORTED_MODULE_26__.Stats, {\n          appState: appState,\n          setAppState: setAppState,\n          elements: elements,\n          onClose: () => {\n            actionManager.executeAction(_actions_actionToggleStats__WEBPACK_IMPORTED_MODULE_27__.actionToggleStats);\n          },\n          renderCustomStats: renderCustomStats\n        }), appState.scrolledOutside && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n          className: \"scroll-back-to-content\",\n          onClick: () => {\n            setAppState(appState => Object.assign({}, (0,_scene__WEBPACK_IMPORTED_MODULE_6__.calculateScrollCenter)(elements, appState)));\n          }\n        }, {\n          children: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"buttons.scrollBackToContent\")\n        }))]\n      })), renderSidebars()]\n    })]\n  });\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_context_ui_appState__WEBPACK_IMPORTED_MODULE_38__.UIAppStateContext.Provider, Object.assign({\n    value: appState\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(jotai__WEBPACK_IMPORTED_MODULE_49__.Provider, Object.assign({\n      scope: tunnels.jotaiScope\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_context_tunnels__WEBPACK_IMPORTED_MODULE_36__.TunnelsContext.Provider, Object.assign({\n        value: tunnels\n      }, {\n        children: layerUIJSX\n      }))\n    }))\n  }));\n};\n\nconst stripIrrelevantAppStateProps = appState => {\n  const {\n    suggestedBindings,\n    startBoundElement,\n    cursorButton,\n    scrollX,\n    scrollY\n  } = appState,\n        ret = __rest(appState, [\"suggestedBindings\", \"startBoundElement\", \"cursorButton\", \"scrollX\", \"scrollY\"]);\n\n  return ret;\n};\n\nconst areEqual = (prevProps, nextProps) => {\n  // short-circuit early\n  if (prevProps.children !== nextProps.children) {\n    return false;\n  }\n\n  const {\n    canvas: _pC,\n    appState: prevAppState\n  } = prevProps,\n        prev = __rest(prevProps, [\"canvas\", \"appState\"]);\n\n  const {\n    canvas: _nC,\n    appState: nextAppState\n  } = nextProps,\n        next = __rest(nextProps, [\"canvas\", \"appState\"]);\n\n  return (0,_utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual)( // asserting AppState because we're being passed the whole AppState\n  // but resolve to only the UI-relevant props\n  stripIrrelevantAppStateProps(prevAppState), stripIrrelevantAppStateProps(nextAppState), {\n    selectedElementIds: _utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual,\n    selectedGroupIds: _utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual\n  }) && (0,_utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual)(prev, next);\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (react__WEBPACK_IMPORTED_MODULE_2___default().memo(LayerUI, areEqual));\n\n//# sourceURL=webpack://ExcalidrawLib/./components/LayerUI.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _Actions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Actions */ \"./components/Actions.tsx\");\n/* harmony import */ var _ErrorDialog__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./ErrorDialog */ \"./components/ErrorDialog.tsx\");\n/* harmony import */ var _ImageExportDialog__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./ImageExportDialog */ \"./components/ImageExportDialog.tsx\");\n/* harmony import */ var _FixedSideContainer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./FixedSideContainer */ \"./components/FixedSideContainer.tsx\");\n/* harmony import */ var _HintViewer__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./HintViewer */ \"./components/HintViewer.tsx\");\n/* harmony import */ var _Island__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Island */ \"./components/Island.tsx\");\n/* harmony import */ var _LoadingMessage__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./LoadingMessage */ \"./components/LoadingMessage.tsx\");\n/* harmony import */ var _LockButton__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./LockButton */ \"./components/LockButton.tsx\");\n/* harmony import */ var _MobileMenu__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./MobileMenu */ \"./components/MobileMenu.tsx\");\n/* harmony import */ var _PasteChartDialog__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./PasteChartDialog */ \"./components/PasteChartDialog.tsx\");\n/* harmony import */ var _Section__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Section */ \"./components/Section.tsx\");\n/* harmony import */ var _HelpDialog__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./HelpDialog */ \"./components/HelpDialog.tsx\");\n/* harmony import */ var _Stack__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Stack */ \"./components/Stack.tsx\");\n/* harmony import */ var _UserList__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./UserList */ \"./components/UserList.tsx\");\n/* harmony import */ var _JSONExportDialog__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./JSONExportDialog */ \"./components/JSONExportDialog.tsx\");\n/* harmony import */ var _PenModeButton__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./PenModeButton */ \"./components/PenModeButton.tsx\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var _Stats__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ./Stats */ \"./components/Stats.tsx\");\n/* harmony import */ var _actions_actionToggleStats__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../actions/actionToggleStats */ \"./actions/actionToggleStats.tsx\");\n/* harmony import */ var _footer_Footer__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ./footer/Footer */ \"./components/footer/Footer.tsx\");\n/* harmony import */ var _Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ./Sidebar/Sidebar */ \"./components/Sidebar/Sidebar.tsx\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../jotai */ \"./jotai.ts\");\n/* harmony import */ var jotai__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! jotai */ \"../../node_modules/jotai/esm/index.mjs\");\n/* harmony import */ var _main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./main-menu/MainMenu */ \"./components/main-menu/MainMenu.tsx\");\n/* harmony import */ var _ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./ActiveConfirmDialog */ \"./components/ActiveConfirmDialog.tsx\");\n/* harmony import */ var _OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ./OverwriteConfirm/OverwriteConfirm */ \"./components/OverwriteConfirm/OverwriteConfirm.tsx\");\n/* harmony import */ var _HandButton__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ./HandButton */ \"./components/HandButton.tsx\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _context_tunnels__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ../context/tunnels */ \"./context/tunnels.ts\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _context_ui_appState__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ../context/ui-appState */ \"./context/ui-appState.ts\");\n/* harmony import */ var _DefaultSidebar__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./DefaultSidebar */ \"./components/DefaultSidebar.tsx\");\n/* harmony import */ var _EyeDropper__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./EyeDropper */ \"./components/EyeDropper.tsx\");\n/* harmony import */ var _LayerUI_scss__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ./LayerUI.scss */ \"./components/LayerUI.scss\");\n/* harmony import */ var _Toolbar_scss__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ./Toolbar.scss */ \"./components/Toolbar.scss\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _LaserPointerButton__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ./LaserPointerButton */ \"./components/LaserPointerButton.tsx\");\n/* harmony import */ var _MagicSettings__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ./MagicSettings */ \"./components/MagicSettings.tsx\");\n/* harmony import */ var _TTDDialog_TTDDialog__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ./TTDDialog/TTDDialog */ \"./components/TTDDialog/TTDDialog.tsx\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n  var t = {};\n\n  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst DefaultMainMenu = ({\n  UIOptions\n}) => {\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"], Object.assign({\n    __fallback: true\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.LoadScene, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.SaveToActiveFile, {}), UIOptions.canvasActions.export && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.Export, {}), UIOptions.canvasActions.saveAsImage && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.SaveAsImage, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.Help, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.ClearCanvas, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].Separator, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].Group, Object.assign({\n      title: \"Excalidraw links\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.Socials, {})\n    })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].Separator, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.ToggleTheme, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.ChangeCanvasBackground, {})]\n  }));\n};\n\nconst DefaultOverwriteConfirmDialog = () => {\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__.OverwriteConfirmDialog, Object.assign({\n    __fallback: true\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__.OverwriteConfirmDialog.Actions.SaveToDisk, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__.OverwriteConfirmDialog.Actions.ExportToImage, {})]\n  }));\n};\n\nconst LayerUI = ({\n  actionManager,\n  appState,\n  files,\n  setAppState,\n  elements,\n  canvas,\n  onLockToggle,\n  onHandToolToggle,\n  onPenModeToggle,\n  showExitZenModeBtn,\n  renderTopRightUI,\n  renderCustomStats,\n  UIOptions,\n  onExportImage,\n  renderWelcomeScreen,\n  children,\n  app,\n  isCollaborating,\n  openAIKey,\n  isOpenAIKeyPersisted,\n  onOpenAIAPIKeyChange,\n  onMagicSettingsConfirm\n}) => {\n  var _a, _b, _c;\n\n  const device = (0,_App__WEBPACK_IMPORTED_MODULE_25__.useDevice)();\n  const tunnels = (0,_context_tunnels__WEBPACK_IMPORTED_MODULE_36__.useInitializeTunnels)();\n  const [eyeDropperState, setEyeDropperState] = (0,jotai__WEBPACK_IMPORTED_MODULE_49__.useAtom)(_EyeDropper__WEBPACK_IMPORTED_MODULE_40__.activeEyeDropperAtom, _jotai__WEBPACK_IMPORTED_MODULE_30__.jotaiScope);\n\n  const renderJSONExportDialog = () => {\n    if (!UIOptions.canvasActions.export) {\n      return null;\n    }\n\n    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_JSONExportDialog__WEBPACK_IMPORTED_MODULE_22__.JSONExportDialog, {\n      elements: elements,\n      appState: appState,\n      files: files,\n      actionManager: actionManager,\n      exportOpts: UIOptions.canvasActions.export,\n      canvas: canvas,\n      setAppState: setAppState\n    });\n  };\n\n  const renderImageExportDialog = () => {\n    var _a;\n\n    if (!UIOptions.canvasActions.saveAsImage || ((_a = appState.openDialog) === null || _a === void 0 ? void 0 : _a.name) !== \"imageExport\") {\n      return null;\n    }\n\n    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ImageExportDialog__WEBPACK_IMPORTED_MODULE_10__.ImageExportDialog, {\n      elements: elements,\n      appState: appState,\n      files: files,\n      actionManager: actionManager,\n      onExportImage: onExportImage,\n      onCloseRequest: () => setAppState({\n        openDialog: null\n      })\n    });\n  };\n\n  const renderCanvasActions = () => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n    style: {\n      position: \"relative\"\n    }\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.MainMenuTunnel.Out, {}), renderWelcomeScreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.WelcomeScreenMenuHintTunnel.Out, {})]\n  }));\n\n  const renderSelectedShapeActions = () => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_18__.Section, Object.assign({\n    heading: \"selectedShapeActions\",\n    className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"selected-shape-actions zen-mode-transition\", {\n      \"transition-left\": appState.zenModeEnabled\n    })\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Island__WEBPACK_IMPORTED_MODULE_13__.Island, Object.assign({\n      className: _constants__WEBPACK_IMPORTED_MODULE_3__.CLASSES.SHAPE_ACTIONS_MENU,\n      padding: 2,\n      style: {\n        // we want to make sure this doesn't overflow so subtracting the\n        // approximate height of hamburgerMenu + footer\n        maxHeight: `${appState.height - 166}px`\n      }\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Actions__WEBPACK_IMPORTED_MODULE_8__.SelectedShapeActions, {\n        appState: appState,\n        elements: elements,\n        renderAction: actionManager.renderAction\n      })\n    }))\n  }));\n\n  const renderFixedSideContainer = () => {\n    var _a, _b;\n\n    const shouldRenderSelectedShapeActions = (0,_element__WEBPACK_IMPORTED_MODULE_4__.showSelectedShapeActions)(appState, elements);\n\n    if (appState.viewModeEnabled) {\n      return null;\n    } //zsviczian\n\n\n    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FixedSideContainer__WEBPACK_IMPORTED_MODULE_11__.FixedSideContainer, Object.assign({\n      side: \"top\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n        className: \"App-menu App-menu_top\"\n      }, {\n        children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Col, Object.assign({\n          gap: 6,\n          className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"App-menu_top__left\")\n        }, {\n          children: [renderCanvasActions(), shouldRenderSelectedShapeActions && renderSelectedShapeActions()]\n        })), !appState.viewModeEnabled && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_18__.Section, Object.assign({\n          heading: \"shapes\",\n          className: \"shapes-section\"\n        }, {\n          children: heading => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n            style: {\n              position: \"relative\"\n            }\n          }, {\n            children: [renderWelcomeScreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.WelcomeScreenToolbarHintTunnel.Out, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Col, Object.assign({\n              gap: 4,\n              align: \"start\"\n            }, {\n              children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Row, Object.assign({\n                gap: 1,\n                className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"App-toolbar-container\", {\n                  \"zen-mode\": appState.zenModeEnabled\n                })\n              }, {\n                children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Island__WEBPACK_IMPORTED_MODULE_13__.Island, Object.assign({\n                  padding: 1,\n                  className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"App-toolbar\", {\n                    \"zen-mode\": appState.zenModeEnabled\n                  })\n                }, {\n                  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HintViewer__WEBPACK_IMPORTED_MODULE_12__.HintViewer, {\n                    appState: appState,\n                    isMobile: device.editor.isMobile || !(appState.viewModeEnabled || appState.zenModeEnabled) && appState.trayModeEnabled,\n                    device: device,\n                    app: app\n                  }), heading, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Row, Object.assign({\n                    gap: 1\n                  }, {\n                    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_PenModeButton__WEBPACK_IMPORTED_MODULE_23__.PenModeButton, {\n                      zenModeEnabled: appState.zenModeEnabled,\n                      checked: appState.penMode,\n                      onChange: () => onPenModeToggle(null),\n                      title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.penMode\"),\n                      penDetected: appState.penDetected\n                    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LockButton__WEBPACK_IMPORTED_MODULE_15__.LockButton, {\n                      checked: appState.activeTool.locked,\n                      onChange: onLockToggle,\n                      title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.lock\")\n                    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n                      className: \"App-toolbar__divider\"\n                    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HandButton__WEBPACK_IMPORTED_MODULE_34__.HandButton, {\n                      checked: (0,_appState__WEBPACK_IMPORTED_MODULE_35__.isHandToolActive)(appState),\n                      onChange: () => onHandToolToggle(),\n                      title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.hand\"),\n                      isMobile: true\n                    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Actions__WEBPACK_IMPORTED_MODULE_8__.ShapesSwitcher, {\n                      appState: appState,\n                      activeTool: appState.activeTool,\n                      UIOptions: UIOptions,\n                      app: app\n                    })]\n                  }))]\n                })), isCollaborating && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Island__WEBPACK_IMPORTED_MODULE_13__.Island, Object.assign({\n                  style: {\n                    marginLeft: 8,\n                    alignSelf: \"center\",\n                    height: \"fit-content\"\n                  }\n                }, {\n                  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LaserPointerButton__WEBPACK_IMPORTED_MODULE_46__.LaserPointerButton, {\n                    title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.laser\"),\n                    checked: appState.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_3__.TOOL_TYPE.laser,\n                    onChange: () => app.setActiveTool({\n                      type: _constants__WEBPACK_IMPORTED_MODULE_3__.TOOL_TYPE.laser\n                    }),\n                    isMobile: true\n                  })\n                }))]\n              }))\n            }))]\n          }))\n        })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n          className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"layer-ui__wrapper__top-right zen-mode-transition\", {\n            \"transition-right\": appState.zenModeEnabled\n          })\n        }, {\n          children: [appState.collaborators.size > 0 && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_UserList__WEBPACK_IMPORTED_MODULE_21__.UserList, {\n            collaborators: appState.collaborators,\n            userToFollow: ((_a = appState.userToFollow) === null || _a === void 0 ? void 0 : _a.socketId) || null\n          }), !appState.viewModeEnabled && ( //zsviczian\n          renderTopRightUI === null || renderTopRightUI === void 0 ? void 0 : renderTopRightUI(device.editor.isMobile, appState)), !appState.viewModeEnabled && ( // hide button when sidebar docked\n          !isSidebarDocked || ((_b = appState.openSidebar) === null || _b === void 0 ? void 0 : _b.name) !== _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.name) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.DefaultSidebarTriggerTunnel.Out, {})]\n        }))]\n      }))\n    }));\n  };\n\n  const isTrayModeOrMobile = device.editor.isMobile || !(appState.viewModeEnabled || appState.zenModeEnabled) && appState.trayModeEnabled; //zsviczian\n\n  const renderSidebars = () => {\n    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DefaultSidebar__WEBPACK_IMPORTED_MODULE_39__.DefaultSidebar, {\n      __fallback: true,\n      onDock: docked => {\n        (0,_analytics__WEBPACK_IMPORTED_MODULE_24__.trackEvent)(\"sidebar\", `toggleDock (${docked ? \"dock\" : \"undock\"})`, `(${device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n      }\n    });\n  };\n\n  const isSidebarDocked = (0,jotai__WEBPACK_IMPORTED_MODULE_49__.useAtomValue)(_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_29__.isSidebarDockedAtom, _jotai__WEBPACK_IMPORTED_MODULE_30__.jotaiScope);\n\n  const layerUIJSX = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n    children: [children, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DefaultMainMenu, {\n      UIOptions: UIOptions\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DefaultSidebar__WEBPACK_IMPORTED_MODULE_39__.DefaultSidebar.Trigger, {\n      __fallback: true,\n      icon: _icons__WEBPACK_IMPORTED_MODULE_37__.LibraryIcon,\n      title: (0,_utils__WEBPACK_IMPORTED_MODULE_7__.capitalizeString)((0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.library\")),\n      onToggle: open => {\n        if (open) {\n          (0,_analytics__WEBPACK_IMPORTED_MODULE_24__.trackEvent)(\"sidebar\", `${_constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.name} (open)`, `button (${device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n        }\n      },\n      tab: _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.defaultTab\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DefaultOverwriteConfirmDialog, {}), ((_a = appState.openDialog) === null || _a === void 0 ? void 0 : _a.name) === \"ttd\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TTDDialog_TTDDialog__WEBPACK_IMPORTED_MODULE_48__.TTDDialog, {\n      __fallback: true\n    }), appState.isLoading && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LoadingMessage__WEBPACK_IMPORTED_MODULE_14__.LoadingMessage, {\n      delay: 250\n    }), appState.errorMessage && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ErrorDialog__WEBPACK_IMPORTED_MODULE_9__.ErrorDialog, Object.assign({\n      onClose: () => setAppState({\n        errorMessage: null\n      })\n    }, {\n      children: appState.errorMessage\n    })), eyeDropperState && //!device.editor.isMobile && //zsviczian\n    (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_EyeDropper__WEBPACK_IMPORTED_MODULE_40__.EyeDropper, {\n      colorPickerType: eyeDropperState.colorPickerType,\n      onCancel: () => {\n        setEyeDropperState(null);\n      },\n      onChange: (colorPickerType, color, selectedElements, {\n        altKey\n      }) => {\n        var _a;\n\n        if (colorPickerType !== \"elementBackground\" && colorPickerType !== \"elementStroke\") {\n          return;\n        }\n\n        if (selectedElements.length) {\n          for (const element of selectedElements) {\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_43__.mutateElement)(element, {\n              [altKey && eyeDropperState.swapPreviewOnAlt ? colorPickerType === \"elementBackground\" ? \"strokeColor\" : \"backgroundColor\" : colorPickerType === \"elementBackground\" ? \"backgroundColor\" : \"strokeColor\"]: color\n            }, false);\n            _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_44__.ShapeCache[\"delete\"](element);\n          }\n\n          (_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_45__[\"default\"].getScene(selectedElements[0])) === null || _a === void 0 ? void 0 : _a.informMutation();\n        } else if (colorPickerType === \"elementBackground\") {\n          setAppState({\n            currentItemBackgroundColor: color\n          });\n        } else {\n          setAppState({\n            currentItemStrokeColor: color\n          });\n        }\n      },\n      onSelect: (color, event) => {\n        var _a;\n\n        setEyeDropperState(state => {\n          return (state === null || state === void 0 ? void 0 : state.keepOpenOnAlt) && event.altKey ? state : null;\n        });\n        (_a = eyeDropperState === null || eyeDropperState === void 0 ? void 0 : eyeDropperState.onSelect) === null || _a === void 0 ? void 0 : _a.call(eyeDropperState, color, event);\n      }\n    }), ((_b = appState.openDialog) === null || _b === void 0 ? void 0 : _b.name) === \"help\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HelpDialog__WEBPACK_IMPORTED_MODULE_19__.HelpDialog, {\n      onClose: () => {\n        setAppState({\n          openDialog: null\n        });\n      }\n    }), ((_c = appState.openDialog) === null || _c === void 0 ? void 0 : _c.name) === \"settings\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicSettings__WEBPACK_IMPORTED_MODULE_47__.MagicSettings, {\n      openAIKey: openAIKey,\n      isPersisted: isOpenAIKeyPersisted,\n      onChange: onOpenAIAPIKeyChange,\n      onConfirm: (apiKey, shouldPersist) => {\n        var _a, _b;\n\n        const source = ((_a = appState.openDialog) === null || _a === void 0 ? void 0 : _a.name) === \"settings\" ? (_b = appState.openDialog) === null || _b === void 0 ? void 0 : _b.source : \"settings\";\n        setAppState({\n          openDialog: null\n        }, () => {\n          onMagicSettingsConfirm(apiKey, shouldPersist, source);\n        });\n      },\n      onClose: () => {\n        setAppState({\n          openDialog: null\n        });\n      }\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_32__.ActiveConfirmDialog, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.OverwriteConfirmDialogTunnel.Out, {}), renderImageExportDialog(), renderJSONExportDialog(), appState.pasteDialog.shown && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_PasteChartDialog__WEBPACK_IMPORTED_MODULE_17__.PasteChartDialog, {\n      setAppState: setAppState,\n      appState: appState,\n      onClose: () => setAppState({\n        pasteDialog: {\n          shown: false,\n          data: null\n        }\n      })\n    }), isTrayModeOrMobile && //zsviczian Added isTrayMode condition\n    (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MobileMenu__WEBPACK_IMPORTED_MODULE_16__.MobileMenu, {\n      app: app,\n      appState: appState,\n      elements: elements,\n      actionManager: actionManager,\n      renderJSONExportDialog: renderJSONExportDialog,\n      renderImageExportDialog: renderImageExportDialog,\n      setAppState: setAppState,\n      onLockToggle: onLockToggle,\n      onHandToolToggle: onHandToolToggle,\n      onPenModeToggle: onPenModeToggle,\n      renderTopRightUI: renderTopRightUI,\n      renderCustomStats: renderCustomStats,\n      renderSidebars: renderSidebars,\n      device: device,\n      renderWelcomeScreen: renderWelcomeScreen,\n      UIOptions: UIOptions\n    }), !isTrayModeOrMobile && //zsviczian changed from !device.editor.isMobile\n    (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n        className: \"layer-ui__wrapper\",\n        style: appState.openSidebar && isSidebarDocked && device.editor.canFitSidebar ? {\n          width: `calc(100% - ${_constants__WEBPACK_IMPORTED_MODULE_3__.LIBRARY_SIDEBAR_WIDTH}px)`\n        } : {}\n      }, {\n        children: [renderWelcomeScreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.WelcomeScreenCenterTunnel.Out, {}), renderFixedSideContainer(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_footer_Footer__WEBPACK_IMPORTED_MODULE_28__[\"default\"], {\n          appState: appState,\n          actionManager: actionManager,\n          showExitZenModeBtn: showExitZenModeBtn,\n          renderWelcomeScreen: renderWelcomeScreen\n        }), appState.showStats && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stats__WEBPACK_IMPORTED_MODULE_26__.Stats, {\n          appState: appState,\n          setAppState: setAppState,\n          elements: elements,\n          onClose: () => {\n            actionManager.executeAction(_actions_actionToggleStats__WEBPACK_IMPORTED_MODULE_27__.actionToggleStats);\n          },\n          renderCustomStats: renderCustomStats\n        }), appState.scrolledOutside && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n          className: \"scroll-back-to-content\",\n          onClick: () => {\n            setAppState(appState => Object.assign({}, (0,_scene__WEBPACK_IMPORTED_MODULE_6__.calculateScrollCenter)(elements, appState)));\n          }\n        }, {\n          children: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"buttons.scrollBackToContent\")\n        }))]\n      })), renderSidebars()]\n    })]\n  });\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_context_ui_appState__WEBPACK_IMPORTED_MODULE_38__.UIAppStateContext.Provider, Object.assign({\n    value: appState\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(jotai__WEBPACK_IMPORTED_MODULE_49__.Provider, Object.assign({\n      scope: tunnels.jotaiScope\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_context_tunnels__WEBPACK_IMPORTED_MODULE_36__.TunnelsContext.Provider, Object.assign({\n        value: tunnels\n      }, {\n        children: layerUIJSX\n      }))\n    }))\n  }));\n};\n\nconst stripIrrelevantAppStateProps = appState => {\n  const {\n    suggestedBindings,\n    startBoundElement,\n    cursorButton,\n    scrollX,\n    scrollY\n  } = appState,\n        ret = __rest(appState, [\"suggestedBindings\", \"startBoundElement\", \"cursorButton\", \"scrollX\", \"scrollY\"]);\n\n  return ret;\n};\n\nconst areEqual = (prevProps, nextProps) => {\n  // short-circuit early\n  if (prevProps.children !== nextProps.children) {\n    return false;\n  }\n\n  const {\n    canvas: _pC,\n    appState: prevAppState\n  } = prevProps,\n        prev = __rest(prevProps, [\"canvas\", \"appState\"]);\n\n  const {\n    canvas: _nC,\n    appState: nextAppState\n  } = nextProps,\n        next = __rest(nextProps, [\"canvas\", \"appState\"]);\n\n  return (0,_utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual)( // asserting AppState because we're being passed the whole AppState\n  // but resolve to only the UI-relevant props\n  stripIrrelevantAppStateProps(prevAppState), stripIrrelevantAppStateProps(nextAppState), {\n    selectedElementIds: _utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual,\n    selectedGroupIds: _utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual\n  }) && (0,_utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual)(prev, next);\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (react__WEBPACK_IMPORTED_MODULE_2___default().memo(LayerUI, areEqual));\n\n//# sourceURL=webpack://ExcalidrawLib/./components/LayerUI.tsx?");
 
 /***/ }),
 
@@ -1546,6 +1546,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./components/SVGLayer.tsx":
+/*!*********************************!*\
+  !*** ./components/SVGLayer.tsx ***!
+  \*********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"SVGLayer\": () => (/* binding */ SVGLayer)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _SVGLayer_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./SVGLayer.scss */ \"./components/SVGLayer.scss\");\n\n\n\nconst SVGLayer = ({\n  trails\n}) => {\n  const svgRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    if (svgRef.current) {\n      for (const trail of trails) {\n        trail.start(svgRef.current);\n      }\n    }\n\n    return () => {\n      for (const trail of trails) {\n        trail.stop();\n      }\n    }; // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, trails);\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n    className: \"SVGLayer\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"svg\", {\n      ref: svgRef\n    })\n  }));\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/SVGLayer.tsx?");
+
+/***/ }),
+
 /***/ "./components/Section.tsx":
 /*!********************************!*\
   !*** ./components/Section.tsx ***!
@@ -1905,7 +1916,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _renderer_renderScene__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../renderer/renderScene */ \"./renderer/renderScene.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils */ \"./utils.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../constants */ \"./constants.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../i18n */ \"./i18n.ts\");\n\n\n\n\n\n\n\nconst InteractiveCanvas = props => {\n  const isComponentMounted = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    var _a;\n\n    if (!isComponentMounted.current) {\n      isComponentMounted.current = true;\n      return;\n    }\n\n    const cursorButton = {};\n    const pointerViewportCoords = {};\n    const remoteSelectedElementIds = {};\n    const pointerUsernames = {};\n    const pointerUserStates = {};\n    props.appState.collaborators.forEach((user, socketId) => {\n      if (user.selectedElementIds) {\n        for (const id of Object.keys(user.selectedElementIds)) {\n          if (!(id in remoteSelectedElementIds)) {\n            remoteSelectedElementIds[id] = [];\n          }\n\n          remoteSelectedElementIds[id].push(socketId);\n        }\n      }\n\n      if (!user.pointer) {\n        return;\n      }\n\n      if (user.username) {\n        pointerUsernames[socketId] = user.username;\n      }\n\n      if (user.userState) {\n        pointerUserStates[socketId] = user.userState;\n      }\n\n      pointerViewportCoords[socketId] = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.sceneCoordsToViewportCoords)({\n        sceneX: user.pointer.x,\n        sceneY: user.pointer.y\n      }, props.appState);\n      cursorButton[socketId] = user.button;\n    });\n    const selectionColor = ((_a = props.containerRef) === null || _a === void 0 ? void 0 : _a.current) && getComputedStyle(props.containerRef.current).getPropertyValue(\"--color-selection\") || \"#6965db\";\n    (0,_renderer_renderScene__WEBPACK_IMPORTED_MODULE_2__.renderInteractiveScene)({\n      canvas: props.canvas,\n      elements: props.elements,\n      visibleElements: props.visibleElements,\n      selectedElements: props.selectedElements,\n      scale: window.devicePixelRatio,\n      appState: props.appState,\n      renderConfig: {\n        remotePointerViewportCoords: pointerViewportCoords,\n        remotePointerButton: cursorButton,\n        remoteSelectedElementIds,\n        remotePointerUsernames: pointerUsernames,\n        remotePointerUserStates: pointerUserStates,\n        selectionColor,\n        renderScrollbars: false\n      },\n      callback: props.renderInteractiveSceneCallback\n    }, (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isRenderThrottlingEnabled)());\n  });\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"canvas\", Object.assign({\n    className: \"excalidraw__canvas interactive\",\n    style: {\n      width: props.appState.width,\n      height: props.appState.height,\n      cursor: props.appState.viewModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_4__.CURSOR_TYPE.GRAB : _constants__WEBPACK_IMPORTED_MODULE_4__.CURSOR_TYPE.AUTO\n    },\n    width: props.appState.width * props.scale,\n    height: props.appState.height * props.scale,\n    ref: props.handleCanvasRef,\n    onContextMenu: props.onContextMenu,\n    onPointerMove: props.onPointerMove,\n    onPointerUp: props.onPointerUp,\n    onPointerCancel: props.onPointerCancel,\n    onTouchMove: props.onTouchMove,\n    onPointerDown: props.onPointerDown,\n    onDoubleClick: props.onDoubleClick\n  }, {\n    children: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"labels.drawingCanvas\")\n  }));\n};\n\nconst getRelevantAppStateProps = appState => ({\n  zoom: appState.zoom,\n  scrollX: appState.scrollX,\n  scrollY: appState.scrollY,\n  width: appState.width,\n  height: appState.height,\n  viewModeEnabled: appState.viewModeEnabled,\n  editingGroupId: appState.editingGroupId,\n  editingLinearElement: appState.editingLinearElement,\n  selectedElementIds: appState.selectedElementIds,\n  frameToHighlight: appState.frameToHighlight,\n  offsetLeft: appState.offsetLeft,\n  offsetTop: appState.offsetTop,\n  theme: appState.theme,\n  pendingImageElementId: appState.pendingImageElementId,\n  selectionElement: appState.selectionElement,\n  selectedGroupIds: appState.selectedGroupIds,\n  selectedLinearElement: appState.selectedLinearElement,\n  multiElement: appState.multiElement,\n  isBindingEnabled: appState.isBindingEnabled,\n  suggestedBindings: appState.suggestedBindings,\n  isRotating: appState.isRotating,\n  elementsToHighlight: appState.elementsToHighlight,\n  collaborators: appState.collaborators,\n  activeEmbeddable: appState.activeEmbeddable,\n  snapLines: appState.snapLines,\n  zenModeEnabled: appState.zenModeEnabled\n});\n\nconst areEqual = (prevProps, nextProps) => {\n  // This could be further optimised if needed, as we don't have to render interactive canvas on each scene mutation\n  if (prevProps.selectionNonce !== nextProps.selectionNonce || prevProps.versionNonce !== nextProps.versionNonce || prevProps.scale !== nextProps.scale || // we need to memoize on element arrays because they may have renewed\n  // even if versionNonce didn't change (e.g. we filter elements out based\n  // on appState)\n  prevProps.elements !== nextProps.elements || prevProps.visibleElements !== nextProps.visibleElements || prevProps.selectedElements !== nextProps.selectedElements) {\n    return false;\n  } // Comparing the interactive appState for changes in case of some edge cases\n\n\n  return (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isShallowEqual)( // asserting AppState because we're being passed the whole AppState\n  // but resolve to only the InteractiveCanvas-relevant props\n  getRelevantAppStateProps(prevProps.appState), getRelevantAppStateProps(nextProps.appState));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (react__WEBPACK_IMPORTED_MODULE_1___default().memo(InteractiveCanvas, areEqual));\n\n//# sourceURL=webpack://ExcalidrawLib/./components/canvases/InteractiveCanvas.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _renderer_renderScene__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../renderer/renderScene */ \"./renderer/renderScene.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils */ \"./utils.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../constants */ \"./constants.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../i18n */ \"./i18n.ts\");\n/* harmony import */ var _reactUtils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../reactUtils */ \"./reactUtils.ts\");\n\n\n\n\n\n\n\n\nconst InteractiveCanvas = props => {\n  const isComponentMounted = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    var _a;\n\n    if (!isComponentMounted.current) {\n      isComponentMounted.current = true;\n      return;\n    }\n\n    const cursorButton = {};\n    const pointerViewportCoords = {};\n    const remoteSelectedElementIds = {};\n    const pointerUsernames = {};\n    const pointerUserStates = {};\n    props.appState.collaborators.forEach((user, socketId) => {\n      if (user.selectedElementIds) {\n        for (const id of Object.keys(user.selectedElementIds)) {\n          if (!(id in remoteSelectedElementIds)) {\n            remoteSelectedElementIds[id] = [];\n          }\n\n          remoteSelectedElementIds[id].push(socketId);\n        }\n      }\n\n      if (!user.pointer) {\n        return;\n      }\n\n      if (user.username) {\n        pointerUsernames[socketId] = user.username;\n      }\n\n      if (user.userState) {\n        pointerUserStates[socketId] = user.userState;\n      }\n\n      pointerViewportCoords[socketId] = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.sceneCoordsToViewportCoords)({\n        sceneX: user.pointer.x,\n        sceneY: user.pointer.y\n      }, props.appState);\n      cursorButton[socketId] = user.button;\n    });\n    const selectionColor = ((_a = props.containerRef) === null || _a === void 0 ? void 0 : _a.current) && getComputedStyle(props.containerRef.current).getPropertyValue(\"--color-selection\") || \"#6965db\";\n    (0,_renderer_renderScene__WEBPACK_IMPORTED_MODULE_2__.renderInteractiveScene)({\n      canvas: props.canvas,\n      elements: props.elements,\n      visibleElements: props.visibleElements,\n      selectedElements: props.selectedElements,\n      scale: window.devicePixelRatio,\n      appState: props.appState,\n      renderConfig: {\n        remotePointerViewportCoords: pointerViewportCoords,\n        remotePointerButton: cursorButton,\n        remoteSelectedElementIds,\n        remotePointerUsernames: pointerUsernames,\n        remotePointerUserStates: pointerUserStates,\n        selectionColor,\n        renderScrollbars: false\n      },\n      callback: props.renderInteractiveSceneCallback\n    }, (0,_reactUtils__WEBPACK_IMPORTED_MODULE_6__.isRenderThrottlingEnabled)());\n  });\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"canvas\", Object.assign({\n    className: \"excalidraw__canvas interactive\",\n    style: {\n      width: props.appState.width,\n      height: props.appState.height,\n      cursor: props.appState.viewModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_4__.CURSOR_TYPE.GRAB : _constants__WEBPACK_IMPORTED_MODULE_4__.CURSOR_TYPE.AUTO\n    },\n    width: props.appState.width * props.scale,\n    height: props.appState.height * props.scale,\n    ref: props.handleCanvasRef,\n    onContextMenu: props.onContextMenu,\n    onPointerMove: props.onPointerMove,\n    onPointerUp: props.onPointerUp,\n    onPointerCancel: props.onPointerCancel,\n    onTouchMove: props.onTouchMove,\n    onPointerDown: props.onPointerDown,\n    onDoubleClick: props.onDoubleClick\n  }, {\n    children: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"labels.drawingCanvas\")\n  }));\n};\n\nconst getRelevantAppStateProps = appState => ({\n  zoom: appState.zoom,\n  scrollX: appState.scrollX,\n  scrollY: appState.scrollY,\n  width: appState.width,\n  height: appState.height,\n  viewModeEnabled: appState.viewModeEnabled,\n  editingGroupId: appState.editingGroupId,\n  editingLinearElement: appState.editingLinearElement,\n  selectedElementIds: appState.selectedElementIds,\n  frameToHighlight: appState.frameToHighlight,\n  offsetLeft: appState.offsetLeft,\n  offsetTop: appState.offsetTop,\n  theme: appState.theme,\n  pendingImageElementId: appState.pendingImageElementId,\n  selectionElement: appState.selectionElement,\n  selectedGroupIds: appState.selectedGroupIds,\n  selectedLinearElement: appState.selectedLinearElement,\n  multiElement: appState.multiElement,\n  isBindingEnabled: appState.isBindingEnabled,\n  suggestedBindings: appState.suggestedBindings,\n  isRotating: appState.isRotating,\n  elementsToHighlight: appState.elementsToHighlight,\n  collaborators: appState.collaborators,\n  activeEmbeddable: appState.activeEmbeddable,\n  snapLines: appState.snapLines,\n  zenModeEnabled: appState.zenModeEnabled\n});\n\nconst areEqual = (prevProps, nextProps) => {\n  // This could be further optimised if needed, as we don't have to render interactive canvas on each scene mutation\n  if (prevProps.selectionNonce !== nextProps.selectionNonce || prevProps.versionNonce !== nextProps.versionNonce || prevProps.scale !== nextProps.scale || // we need to memoize on element arrays because they may have renewed\n  // even if versionNonce didn't change (e.g. we filter elements out based\n  // on appState)\n  prevProps.elements !== nextProps.elements || prevProps.visibleElements !== nextProps.visibleElements || prevProps.selectedElements !== nextProps.selectedElements) {\n    return false;\n  } // Comparing the interactive appState for changes in case of some edge cases\n\n\n  return (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isShallowEqual)( // asserting AppState because we're being passed the whole AppState\n  // but resolve to only the InteractiveCanvas-relevant props\n  getRelevantAppStateProps(prevProps.appState), getRelevantAppStateProps(nextProps.appState));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (react__WEBPACK_IMPORTED_MODULE_1___default().memo(InteractiveCanvas, areEqual));\n\n//# sourceURL=webpack://ExcalidrawLib/./components/canvases/InteractiveCanvas.tsx?");
 
 /***/ }),
 
@@ -1916,7 +1927,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _renderer_renderScene__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../renderer/renderScene */ \"./renderer/renderScene.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils */ \"./utils.ts\");\n\n\n\n\n\nconst StaticCanvas = props => {\n  const wrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  const isComponentMounted = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    const wrapper = wrapperRef.current;\n\n    if (!wrapper) {\n      return;\n    }\n\n    const canvas = props.canvas;\n\n    if (!isComponentMounted.current) {\n      isComponentMounted.current = true;\n      wrapper.replaceChildren(canvas);\n      canvas.classList.add(\"excalidraw__canvas\", \"static\");\n    }\n\n    const widthString = `${props.appState.width}px`;\n    const heightString = `${props.appState.height}px`;\n\n    if (canvas.style.width !== widthString) {\n      canvas.style.width = widthString;\n    }\n\n    if (canvas.style.height !== heightString) {\n      canvas.style.height = heightString;\n    }\n\n    const scaledWidth = props.appState.width * props.scale;\n    const scaledHeight = props.appState.height * props.scale; // setting width/height resets the canvas even if dimensions not changed,\n    // which would cause flicker when we skip frame (due to throttling)\n\n    if (canvas.width !== scaledWidth) {\n      canvas.width = scaledWidth;\n    }\n\n    if (canvas.height !== scaledHeight) {\n      canvas.height = scaledHeight;\n    }\n\n    (0,_renderer_renderScene__WEBPACK_IMPORTED_MODULE_2__.renderStaticScene)({\n      canvas,\n      rc: props.rc,\n      scale: props.scale,\n      elements: props.elements,\n      visibleElements: props.visibleElements,\n      appState: props.appState,\n      renderConfig: props.renderConfig\n    }, (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isRenderThrottlingEnabled)());\n  });\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n    className: \"excalidraw__canvas-wrapper\",\n    ref: wrapperRef\n  });\n};\n\nconst getRelevantAppStateProps = appState => ({\n  zoom: appState.zoom,\n  scrollX: appState.scrollX,\n  scrollY: appState.scrollY,\n  width: appState.width,\n  height: appState.height,\n  viewModeEnabled: appState.viewModeEnabled,\n  offsetLeft: appState.offsetLeft,\n  offsetTop: appState.offsetTop,\n  theme: appState.theme,\n  pendingImageElementId: appState.pendingImageElementId,\n  shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,\n  viewBackgroundColor: appState.viewBackgroundColor,\n  exportScale: appState.exportScale,\n  selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,\n  gridSize: appState.gridSize,\n  frameRendering: appState.frameRendering,\n  linkOpacity: appState.linkOpacity,\n  gridColor: appState.gridColor,\n  frameColor: appState.frameColor,\n  selectedElementIds: appState.selectedElementIds,\n  frameToHighlight: appState.frameToHighlight,\n  editingGroupId: appState.editingGroupId\n});\n\nconst areEqual = (prevProps, nextProps) => {\n  if (prevProps.versionNonce !== nextProps.versionNonce || prevProps.scale !== nextProps.scale || // we need to memoize on element arrays because they may have renewed\n  // even if versionNonce didn't change (e.g. we filter elements out based\n  // on appState)\n  prevProps.elements !== nextProps.elements || prevProps.visibleElements !== nextProps.visibleElements) {\n    return false;\n  }\n\n  return (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isShallowEqual)( // asserting AppState because we're being passed the whole AppState\n  // but resolve to only the StaticCanvas-relevant props\n  getRelevantAppStateProps(prevProps.appState), getRelevantAppStateProps(nextProps.appState)) && (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isShallowEqual)(prevProps.renderConfig, nextProps.renderConfig);\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (react__WEBPACK_IMPORTED_MODULE_1___default().memo(StaticCanvas, areEqual));\n\n//# sourceURL=webpack://ExcalidrawLib/./components/canvases/StaticCanvas.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _renderer_renderScene__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../renderer/renderScene */ \"./renderer/renderScene.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils */ \"./utils.ts\");\n/* harmony import */ var _reactUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../reactUtils */ \"./reactUtils.ts\");\n\n\n\n\n\n\nconst StaticCanvas = props => {\n  const wrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  const isComponentMounted = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    const wrapper = wrapperRef.current;\n\n    if (!wrapper) {\n      return;\n    }\n\n    const canvas = props.canvas;\n\n    if (!isComponentMounted.current) {\n      isComponentMounted.current = true;\n      wrapper.replaceChildren(canvas);\n      canvas.classList.add(\"excalidraw__canvas\", \"static\");\n    }\n\n    const widthString = `${props.appState.width}px`;\n    const heightString = `${props.appState.height}px`;\n\n    if (canvas.style.width !== widthString) {\n      canvas.style.width = widthString;\n    }\n\n    if (canvas.style.height !== heightString) {\n      canvas.style.height = heightString;\n    }\n\n    const scaledWidth = props.appState.width * props.scale;\n    const scaledHeight = props.appState.height * props.scale; // setting width/height resets the canvas even if dimensions not changed,\n    // which would cause flicker when we skip frame (due to throttling)\n\n    if (canvas.width !== scaledWidth) {\n      canvas.width = scaledWidth;\n    }\n\n    if (canvas.height !== scaledHeight) {\n      canvas.height = scaledHeight;\n    }\n\n    (0,_renderer_renderScene__WEBPACK_IMPORTED_MODULE_2__.renderStaticScene)({\n      canvas,\n      rc: props.rc,\n      scale: props.scale,\n      elements: props.elements,\n      visibleElements: props.visibleElements,\n      appState: props.appState,\n      renderConfig: props.renderConfig\n    }, (0,_reactUtils__WEBPACK_IMPORTED_MODULE_4__.isRenderThrottlingEnabled)());\n  });\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n    className: \"excalidraw__canvas-wrapper\",\n    ref: wrapperRef\n  });\n};\n\nconst getRelevantAppStateProps = appState => ({\n  zoom: appState.zoom,\n  scrollX: appState.scrollX,\n  scrollY: appState.scrollY,\n  width: appState.width,\n  height: appState.height,\n  viewModeEnabled: appState.viewModeEnabled,\n  offsetLeft: appState.offsetLeft,\n  offsetTop: appState.offsetTop,\n  theme: appState.theme,\n  pendingImageElementId: appState.pendingImageElementId,\n  shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,\n  viewBackgroundColor: appState.viewBackgroundColor,\n  exportScale: appState.exportScale,\n  selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,\n  gridSize: appState.gridSize,\n  frameRendering: appState.frameRendering,\n  linkOpacity: appState.linkOpacity,\n  gridColor: appState.gridColor,\n  frameColor: appState.frameColor,\n  selectedElementIds: appState.selectedElementIds,\n  frameToHighlight: appState.frameToHighlight,\n  editingGroupId: appState.editingGroupId\n});\n\nconst areEqual = (prevProps, nextProps) => {\n  if (prevProps.versionNonce !== nextProps.versionNonce || prevProps.scale !== nextProps.scale || // we need to memoize on element arrays because they may have renewed\n  // even if versionNonce didn't change (e.g. we filter elements out based\n  // on appState)\n  prevProps.elements !== nextProps.elements || prevProps.visibleElements !== nextProps.visibleElements) {\n    return false;\n  }\n\n  return (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isShallowEqual)( // asserting AppState because we're being passed the whole AppState\n  // but resolve to only the StaticCanvas-relevant props\n  getRelevantAppStateProps(prevProps.appState), getRelevantAppStateProps(nextProps.appState)) && (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isShallowEqual)(prevProps.renderConfig, nextProps.renderConfig);\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (react__WEBPACK_IMPORTED_MODULE_1___default().memo(StaticCanvas, areEqual));\n\n//# sourceURL=webpack://ExcalidrawLib/./components/canvases/StaticCanvas.tsx?");
 
 /***/ }),
 
@@ -2092,7 +2103,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"AlignBottomIcon\": () => (/* binding */ AlignBottomIcon),\n/* harmony export */   \"AlignLeftIcon\": () => (/* binding */ AlignLeftIcon),\n/* harmony export */   \"AlignRightIcon\": () => (/* binding */ AlignRightIcon),\n/* harmony export */   \"AlignTopIcon\": () => (/* binding */ AlignTopIcon),\n/* harmony export */   \"ArrowIcon\": () => (/* binding */ ArrowIcon),\n/* harmony export */   \"ArrowRightIcon\": () => (/* binding */ ArrowRightIcon),\n/* harmony export */   \"ArrowheadArrowIcon\": () => (/* binding */ ArrowheadArrowIcon),\n/* harmony export */   \"ArrowheadBarIcon\": () => (/* binding */ ArrowheadBarIcon),\n/* harmony export */   \"ArrowheadCircleIcon\": () => (/* binding */ ArrowheadCircleIcon),\n/* harmony export */   \"ArrowheadCircleOutlineIcon\": () => (/* binding */ ArrowheadCircleOutlineIcon),\n/* harmony export */   \"ArrowheadDiamondIcon\": () => (/* binding */ ArrowheadDiamondIcon),\n/* harmony export */   \"ArrowheadDiamondOutlineIcon\": () => (/* binding */ ArrowheadDiamondOutlineIcon),\n/* harmony export */   \"ArrowheadNoneIcon\": () => (/* binding */ ArrowheadNoneIcon),\n/* harmony export */   \"ArrowheadTriangleIcon\": () => (/* binding */ ArrowheadTriangleIcon),\n/* harmony export */   \"ArrowheadTriangleOutlineIcon\": () => (/* binding */ ArrowheadTriangleOutlineIcon),\n/* harmony export */   \"BringForwardIcon\": () => (/* binding */ BringForwardIcon),\n/* harmony export */   \"BringToFrontIcon\": () => (/* binding */ BringToFrontIcon),\n/* harmony export */   \"CenterHorizontallyIcon\": () => (/* binding */ CenterHorizontallyIcon),\n/* harmony export */   \"CenterVerticallyIcon\": () => (/* binding */ CenterVerticallyIcon),\n/* harmony export */   \"CloseIcon\": () => (/* binding */ CloseIcon),\n/* harmony export */   \"DiamondIcon\": () => (/* binding */ DiamondIcon),\n/* harmony export */   \"DiscordIcon\": () => (/* binding */ DiscordIcon),\n/* harmony export */   \"DistributeHorizontallyIcon\": () => (/* binding */ DistributeHorizontallyIcon),\n/* harmony export */   \"DistributeVerticallyIcon\": () => (/* binding */ DistributeVerticallyIcon),\n/* harmony export */   \"DotsIcon\": () => (/* binding */ DotsIcon),\n/* harmony export */   \"DuplicateIcon\": () => (/* binding */ DuplicateIcon),\n/* harmony export */   \"EdgeRoundIcon\": () => (/* binding */ EdgeRoundIcon),\n/* harmony export */   \"EdgeSharpIcon\": () => (/* binding */ EdgeSharpIcon),\n/* harmony export */   \"EllipseIcon\": () => (/* binding */ EllipseIcon),\n/* harmony export */   \"EmbedIcon\": () => (/* binding */ EmbedIcon),\n/* harmony export */   \"EraserIcon\": () => (/* binding */ EraserIcon),\n/* harmony export */   \"ExcalLogo\": () => (/* binding */ ExcalLogo),\n/* harmony export */   \"ExportIcon\": () => (/* binding */ ExportIcon),\n/* harmony export */   \"ExportImageIcon\": () => (/* binding */ ExportImageIcon),\n/* harmony export */   \"ExternalLinkIcon\": () => (/* binding */ ExternalLinkIcon),\n/* harmony export */   \"FillCrossHatchIcon\": () => (/* binding */ FillCrossHatchIcon),\n/* harmony export */   \"FillHachureIcon\": () => (/* binding */ FillHachureIcon),\n/* harmony export */   \"FillSolidIcon\": () => (/* binding */ FillSolidIcon),\n/* harmony export */   \"FillZigZagIcon\": () => (/* binding */ FillZigZagIcon),\n/* harmony export */   \"FontFamilyCodeIcon\": () => (/* binding */ FontFamilyCodeIcon),\n/* harmony export */   \"FontFamilyLocalFontIcon\": () => (/* binding */ FontFamilyLocalFontIcon),\n/* harmony export */   \"FontFamilyNormalIcon\": () => (/* binding */ FontFamilyNormalIcon),\n/* harmony export */   \"FontSizeExtraLargeIcon\": () => (/* binding */ FontSizeExtraLargeIcon),\n/* harmony export */   \"FontSizeLargeIcon\": () => (/* binding */ FontSizeLargeIcon),\n/* harmony export */   \"FontSizeMediumIcon\": () => (/* binding */ FontSizeMediumIcon),\n/* harmony export */   \"FontSizeSmallIcon\": () => (/* binding */ FontSizeSmallIcon),\n/* harmony export */   \"FreedrawIcon\": () => (/* binding */ FreedrawIcon),\n/* harmony export */   \"GithubIcon\": () => (/* binding */ GithubIcon),\n/* harmony export */   \"GroupIcon\": () => (/* binding */ GroupIcon),\n/* harmony export */   \"HamburgerMenuIcon\": () => (/* binding */ HamburgerMenuIcon),\n/* harmony export */   \"HelpIcon\": () => (/* binding */ HelpIcon),\n/* harmony export */   \"ImageIcon\": () => (/* binding */ ImageIcon),\n/* harmony export */   \"LibraryIcon\": () => (/* binding */ LibraryIcon),\n/* harmony export */   \"LineIcon\": () => (/* binding */ LineIcon),\n/* harmony export */   \"LinkIcon\": () => (/* binding */ LinkIcon),\n/* harmony export */   \"LoadIcon\": () => (/* binding */ LoadIcon),\n/* harmony export */   \"LockedIcon\": () => (/* binding */ LockedIcon),\n/* harmony export */   \"MagicIcon\": () => (/* binding */ MagicIcon),\n/* harmony export */   \"MoonIcon\": () => (/* binding */ MoonIcon),\n/* harmony export */   \"OpenAIIcon\": () => (/* binding */ OpenAIIcon),\n/* harmony export */   \"PenModeIcon\": () => (/* binding */ PenModeIcon),\n/* harmony export */   \"PinIcon\": () => (/* binding */ PinIcon),\n/* harmony export */   \"PlusIcon\": () => (/* binding */ PlusIcon),\n/* harmony export */   \"PlusPromoIcon\": () => (/* binding */ PlusPromoIcon),\n/* harmony export */   \"RectangleIcon\": () => (/* binding */ RectangleIcon),\n/* harmony export */   \"RedoIcon\": () => (/* binding */ RedoIcon),\n/* harmony export */   \"SelectionIcon\": () => (/* binding */ SelectionIcon),\n/* harmony export */   \"SendBackwardIcon\": () => (/* binding */ SendBackwardIcon),\n/* harmony export */   \"SendToBackIcon\": () => (/* binding */ SendToBackIcon),\n/* harmony export */   \"SloppinessArchitectIcon\": () => (/* binding */ SloppinessArchitectIcon),\n/* harmony export */   \"SloppinessArtistIcon\": () => (/* binding */ SloppinessArtistIcon),\n/* harmony export */   \"SloppinessCartoonistIcon\": () => (/* binding */ SloppinessCartoonistIcon),\n/* harmony export */   \"StrokeStyleDashedIcon\": () => (/* binding */ StrokeStyleDashedIcon),\n/* harmony export */   \"StrokeStyleDottedIcon\": () => (/* binding */ StrokeStyleDottedIcon),\n/* harmony export */   \"StrokeStyleSolidIcon\": () => (/* binding */ StrokeStyleSolidIcon),\n/* harmony export */   \"StrokeWidthBaseIcon\": () => (/* binding */ StrokeWidthBaseIcon),\n/* harmony export */   \"StrokeWidthBoldIcon\": () => (/* binding */ StrokeWidthBoldIcon),\n/* harmony export */   \"StrokeWidthExtraBoldIcon\": () => (/* binding */ StrokeWidthExtraBoldIcon),\n/* harmony export */   \"StrokeWidthThinIcon\": () => (/* binding */ StrokeWidthThinIcon),\n/* harmony export */   \"SunIcon\": () => (/* binding */ SunIcon),\n/* harmony export */   \"TextAlignBottomIcon\": () => (/* binding */ TextAlignBottomIcon),\n/* harmony export */   \"TextAlignCenterIcon\": () => (/* binding */ TextAlignCenterIcon),\n/* harmony export */   \"TextAlignLeftIcon\": () => (/* binding */ TextAlignLeftIcon),\n/* harmony export */   \"TextAlignMiddleIcon\": () => (/* binding */ TextAlignMiddleIcon),\n/* harmony export */   \"TextAlignRightIcon\": () => (/* binding */ TextAlignRightIcon),\n/* harmony export */   \"TextAlignTopIcon\": () => (/* binding */ TextAlignTopIcon),\n/* harmony export */   \"TextIcon\": () => (/* binding */ TextIcon),\n/* harmony export */   \"TrashIcon\": () => (/* binding */ TrashIcon),\n/* harmony export */   \"TwitterIcon\": () => (/* binding */ TwitterIcon),\n/* harmony export */   \"UndoIcon\": () => (/* binding */ UndoIcon),\n/* harmony export */   \"UngroupIcon\": () => (/* binding */ UngroupIcon),\n/* harmony export */   \"UnlockedIcon\": () => (/* binding */ UnlockedIcon),\n/* harmony export */   \"WelcomeScreenHelpArrow\": () => (/* binding */ WelcomeScreenHelpArrow),\n/* harmony export */   \"WelcomeScreenMenuArrow\": () => (/* binding */ WelcomeScreenMenuArrow),\n/* harmony export */   \"WelcomeScreenTopToolbarArrow\": () => (/* binding */ WelcomeScreenTopToolbarArrow),\n/* harmony export */   \"ZoomInIcon\": () => (/* binding */ ZoomInIcon),\n/* harmony export */   \"ZoomOutIcon\": () => (/* binding */ ZoomOutIcon),\n/* harmony export */   \"alertTriangleIcon\": () => (/* binding */ alertTriangleIcon),\n/* harmony export */   \"back\": () => (/* binding */ back),\n/* harmony export */   \"brainIcon\": () => (/* binding */ brainIcon),\n/* harmony export */   \"checkIcon\": () => (/* binding */ checkIcon),\n/* harmony export */   \"clipboard\": () => (/* binding */ clipboard),\n/* harmony export */   \"clone\": () => (/* binding */ clone),\n/* harmony export */   \"copyIcon\": () => (/* binding */ copyIcon),\n/* harmony export */   \"createIcon\": () => (/* binding */ createIcon),\n/* harmony export */   \"done\": () => (/* binding */ done),\n/* harmony export */   \"downloadIcon\": () => (/* binding */ downloadIcon),\n/* harmony export */   \"eraser\": () => (/* binding */ eraser),\n/* harmony export */   \"exportToFileIcon\": () => (/* binding */ exportToFileIcon),\n/* harmony export */   \"extraToolsIcon\": () => (/* binding */ extraToolsIcon),\n/* harmony export */   \"eyeClosedIcon\": () => (/* binding */ eyeClosedIcon),\n/* harmony export */   \"eyeDropperIcon\": () => (/* binding */ eyeDropperIcon),\n/* harmony export */   \"eyeIcon\": () => (/* binding */ eyeIcon),\n/* harmony export */   \"file\": () => (/* binding */ file),\n/* harmony export */   \"frameToolIcon\": () => (/* binding */ frameToolIcon),\n/* harmony export */   \"fullscreenIcon\": () => (/* binding */ fullscreenIcon),\n/* harmony export */   \"handIcon\": () => (/* binding */ handIcon),\n/* harmony export */   \"helpIcon\": () => (/* binding */ helpIcon),\n/* harmony export */   \"iconFillColor\": () => (/* binding */ iconFillColor),\n/* harmony export */   \"laserPointerToolIcon\": () => (/* binding */ laserPointerToolIcon),\n/* harmony export */   \"menu\": () => (/* binding */ menu),\n/* harmony export */   \"mermaidLogoIcon\": () => (/* binding */ mermaidLogoIcon),\n/* harmony export */   \"palette\": () => (/* binding */ palette),\n/* harmony export */   \"playerPlayIcon\": () => (/* binding */ playerPlayIcon),\n/* harmony export */   \"playerStopFilledIcon\": () => (/* binding */ playerStopFilledIcon),\n/* harmony export */   \"publishIcon\": () => (/* binding */ publishIcon),\n/* harmony export */   \"questionCircle\": () => (/* binding */ questionCircle),\n/* harmony export */   \"resetZoom\": () => (/* binding */ resetZoom),\n/* harmony export */   \"save\": () => (/* binding */ save),\n/* harmony export */   \"saveAs\": () => (/* binding */ saveAs),\n/* harmony export */   \"searchIcon\": () => (/* binding */ searchIcon),\n/* harmony export */   \"share\": () => (/* binding */ share),\n/* harmony export */   \"shareIOS\": () => (/* binding */ shareIOS),\n/* harmony export */   \"shareWindows\": () => (/* binding */ shareWindows),\n/* harmony export */   \"shield\": () => (/* binding */ shield),\n/* harmony export */   \"start\": () => (/* binding */ start),\n/* harmony export */   \"stop\": () => (/* binding */ stop),\n/* harmony export */   \"tablerCheckIcon\": () => (/* binding */ tablerCheckIcon),\n/* harmony export */   \"usersIcon\": () => (/* binding */ usersIcon),\n/* harmony export */   \"zoomIn\": () => (/* binding */ zoomIn),\n/* harmony export */   \"zoomOut\": () => (/* binding */ zoomOut)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var open_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! open-color */ \"../../node_modules/open-color/open-color.json\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n  var t = {};\n\n  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\n\n //\n// All icons are imported from https://fontawesome.com/icons?d=gallery\n// Icons are under the license https://fontawesome.com/license\n//\n// Note: when adding new icons, review https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/RTL_Guidelines\n// to determine whether or not the icons should be mirrored in right-to-left languages.\n\n\n\n\n\nconst iconFillColor = theme => \"var(--icon-fill-color)\";\n\nconst handlerColor = theme => theme === _constants__WEBPACK_IMPORTED_MODULE_4__.THEME.LIGHT ? open_color__WEBPACK_IMPORTED_MODULE_2__.white : \"#1e1e1e\";\n\nconst createIcon = (d, opts = 512) => {\n  const _a = typeof opts === \"number\" ? {\n    width: opts\n  } : opts,\n        {\n    width = 512,\n    height = width,\n    mirror,\n    style\n  } = _a,\n        rest = __rest(_a, [\"width\", \"height\", \"mirror\", \"style\"]);\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"svg\", Object.assign({\n    \"aria-hidden\": \"true\",\n    focusable: \"false\",\n    role: \"img\",\n    viewBox: `0 0 ${width} ${height}`,\n    className: (0,clsx__WEBPACK_IMPORTED_MODULE_3__[\"default\"])({\n      \"rtl-mirror\": mirror\n    }),\n    style: style\n  }, rest, {\n    children: typeof d === \"string\" ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      fill: \"var(--icon-fill-color)\",\n      d: d\n    }) : d\n  }));\n};\nconst tablerIconProps = {\n  width: 24,\n  height: 24,\n  fill: \"none\",\n  strokeWidth: 2,\n  stroke: \"var(--icon-fill-color)\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n};\nconst modifiedTablerIconProps = {\n  width: 20,\n  height: 20,\n  fill: \"none\",\n  stroke: \"var(--icon-fill-color)\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}; // -----------------------------------------------------------------------------\n// tabler-icons: present\n\nconst PlusPromoIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n    x: 3,\n    y: 8,\n    width: 18,\n    height: 4,\n    rx: 1\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: 12,\n    y1: 8,\n    x2: 12,\n    y2: 21\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5\"\n  })]\n})), tablerIconProps); // tabler-icons: book\n\nconst LibraryIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"3\",\n    y1: \"6\",\n    x2: \"3\",\n    y2: \"19\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"12\",\n    y1: \"6\",\n    x2: \"12\",\n    y2: \"19\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"21\",\n    y1: \"6\",\n    x2: \"21\",\n    y2: \"19\"\n  })]\n})), tablerIconProps); // tabler-icons: plus\n\nconst PlusIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"svg\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"12\",\n    y1: \"5\",\n    x2: \"12\",\n    y2: \"19\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"5\",\n    y1: \"12\",\n    x2: \"19\",\n    y2: \"12\"\n  })]\n})), tablerIconProps); // tabler-icons: dots-vertical\n\nconst DotsIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    cx: \"12\",\n    cy: \"12\",\n    r: \"1\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    cx: \"12\",\n    cy: \"19\",\n    r: \"1\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    cx: \"12\",\n    cy: \"5\",\n    r: \"1\"\n  })]\n})), tablerIconProps); // tabler-icons: pinned\n\nconst PinIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"svg\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M9 4v6l-2 4v2h10v-2l-2 -4v-6\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"12\",\n    y1: \"16\",\n    x2: \"12\",\n    y2: \"21\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"8\",\n    y1: \"4\",\n    x2: \"16\",\n    y2: \"4\"\n  })]\n})), tablerIconProps); // tabler-icons: lock-open (via Figma)\n\nconst UnlockedIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M13.542 8.542H6.458a2.5 2.5 0 0 0-2.5 2.5v3.75a2.5 2.5 0 0 0 2.5 2.5h7.084a2.5 2.5 0 0 0 2.5-2.5v-3.75a2.5 2.5 0 0 0-2.5-2.5Z\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: \"1.25\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 13.958a1.042 1.042 0 1 0 0-2.083 1.042 1.042 0 0 0 0 2.083Z\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: \"1.25\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"mask\", Object.assign({\n    id: \"UnlockedIcon\",\n    style: {\n      maskType: \"alpha\"\n    },\n    maskUnits: \"userSpaceOnUse\",\n    x: 6,\n    y: 1,\n    width: 9,\n    height: 9\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      stroke: \"none\",\n      d: \"M6.399 9.561V5.175c0-.93.401-1.823 1.116-2.48a3.981 3.981 0 0 1 2.693-1.028c1.01 0 1.98.37 2.694 1.027.715.658 1.116 1.55 1.116 2.481\",\n      fill: \"#fff\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    mask: \"url(#UnlockedIcon)\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      stroke: \"none\",\n      d: \"M5.149 9.561v1.25h2.5v-1.25h-2.5Zm5.06-7.894V.417v1.25Zm2.559 3.508v1.25h2.5v-1.25h-2.5ZM7.648 8.51V5.175h-2.5V8.51h2.5Zm0-3.334c0-.564.243-1.128.713-1.561L6.668 1.775c-.959.883-1.52 2.104-1.52 3.4h2.5Zm.713-1.561a2.732 2.732 0 0 1 1.847-.697v-2.5c-1.31 0-2.585.478-3.54 1.358L8.36 3.614Zm1.847-.697c.71 0 1.374.26 1.847.697l1.694-1.839a5.231 5.231 0 0 0-3.54-1.358v2.5Zm1.847.697c.47.433.713.997.713 1.561h2.5c0-1.296-.56-2.517-1.52-3.4l-1.693 1.839Z\",\n      fill: \"var(--icon-fill-color)\" //zsviczian\n\n    })\n  }))]\n}), modifiedTablerIconProps); // tabler-icons: lock (via Figma)\n\nconst LockedIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M13.542 8.542H6.458a2.5 2.5 0 0 0-2.5 2.5v3.75a2.5 2.5 0 0 0 2.5 2.5h7.084a2.5 2.5 0 0 0 2.5-2.5v-3.75a2.5 2.5 0 0 0-2.5-2.5Z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 13.958a1.042 1.042 0 1 0 0-2.083 1.042 1.042 0 0 0 0 2.083Z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6.667 8.333V5.417C6.667 3.806 8.159 2.5 10 2.5c1.841 0 3.333 1.306 3.333 2.917v2.916\"\n  })]\n})), modifiedTablerIconProps); // custom\n\nconst WelcomeScreenMenuArrow = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M38.5 83.5c-14-2-17.833-10.473-21-22.5C14.333 48.984 12 22 12 12.5\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"m12.005 10.478 7.905 14.423L6 25.75l6.005-15.273Z\",\n    fill: \"var(--icon-fill-color)\" //zsviczian\n\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12.005 10.478c1.92 3.495 3.838 7 7.905 14.423m-7.905-14.423c3.11 5.683 6.23 11.368 7.905 14.423m0 0c-3.68.226-7.35.455-13.91.85m13.91-.85c-5.279.33-10.566.647-13.91.85m0 0c1.936-4.931 3.882-9.86 6.005-15.273M6 25.75c2.069-5.257 4.135-10.505 6.005-15.272\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  })]\n}), {\n  width: 41,\n  height: 94,\n  fill: \"none\"\n}); // custom\n\nconst WelcomeScreenHelpArrow = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M18.026 1.232c-5.268 13.125-5.548 33.555 3.285 42.311 8.823 8.75 33.31 12.304 42.422 13.523\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"m72.181 59.247-13.058-10-2.948 13.62 16.006-3.62Z\",\n    fill: \"var(--icon-fill-color)\" //zsviczian\n\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M72.181 59.247c-3.163-2.429-6.337-4.856-13.058-10m13.058 10c-5.145-3.936-10.292-7.882-13.058-10m0 0c-.78 3.603-1.563 7.196-2.948 13.62m2.948-13.62c-1.126 5.168-2.24 10.346-2.948 13.62m0 0c5.168-1.166 10.334-2.343 16.006-3.62m-16.006 3.62c5.51-1.248 11.01-2.495 16.006-3.62\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  })]\n}), {\n  width: 85,\n  height: 71,\n  fill: \"none\"\n}); // custom\n\nconst WelcomeScreenTopToolbarArrow = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M1 77c14-2 31.833-11.973 35-24 3.167-12.016-6-35-9.5-43.5\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"m24.165 1.093-2.132 16.309 13.27-4.258-11.138-12.05Z\",\n    fill: \"var(--icon-fill-color)\" //zsviczian\n\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M24.165 1.093c-.522 3.953-1.037 7.916-2.132 16.309m2.131-16.309c-.835 6.424-1.68 12.854-2.13 16.308m0 0c3.51-1.125 7.013-2.243 13.27-4.257m-13.27 4.257c5.038-1.608 10.08-3.232 13.27-4.257m0 0c-3.595-3.892-7.197-7.777-11.14-12.05m11.14 12.05c-3.837-4.148-7.667-8.287-11.14-12.05\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  })]\n}), {\n  width: 38,\n  height: 78,\n  fill: \"none\"\n}); // custom\n\nconst ExcalLogo = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n  fill: \"--icon-fill-color\"\n}, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M39.9 32.889a.326.326 0 0 0-.279-.056c-2.094-3.083-4.774-6-7.343-8.833l-.419-.472a.212.212 0 0 0-.056-.139.586.586 0 0 0-.167-.111l-.084-.083-.056-.056c-.084-.167-.28-.278-.475-.167-.782.39-1.507.973-2.206 1.528-.92.722-1.842 1.445-2.708 2.25a8.405 8.405 0 0 0-.977 1.028c-.14.194-.028.361.14.444-.615.611-1.23 1.223-1.843 1.861a.315.315 0 0 0-.084.223c0 .083.056.166.111.194l1.09.833v.028c1.535 1.528 4.244 3.611 7.12 5.861.418.334.865.667 1.284 1 .195.223.39.473.558.695.084.11.28.139.391.055.056.056.14.111.196.167a.398.398 0 0 0 .167.056.255.255 0 0 0 .224-.111.394.394 0 0 0 .055-.167c.029 0 .028.028.056.028a.318.318 0 0 0 .224-.084l5.082-5.528a.309.309 0 0 0 0-.444Zm-14.63-1.917a.485.485 0 0 0 .111.14c.586.5 1.2 1 1.843 1.555l-2.569-1.945-.251-.166c-.056-.028-.112-.084-.168-.111l-.195-.167.056-.056.055-.055.112-.111c.866-.861 2.346-2.306 3.1-3.028-.81.805-2.43 3.167-2.095 3.944Zm8.767 6.89-2.122-1.612a44.713 44.713 0 0 0-2.625-2.5c1.145.861 2.122 1.611 2.262 1.75 1.117.972 1.06.806 1.815 1.445l.921.666a1.06 1.06 0 0 1-.251.25Zm.558.416-.056-.028c.084-.055.168-.111.252-.194l-.196.222ZM1.089 5.75c.055.361.14.722.195 1.056.335 1.833.67 3.5 1.284 4.75l.252.944c.084.361.223.806.363.917 1.424 1.25 3.602 3.11 5.947 4.889a.295.295 0 0 0 .363 0s0 .027.028.027a.254.254 0 0 0 .196.084.318.318 0 0 0 .223-.084c2.988-3.305 5.221-6.027 6.813-8.305.112-.111.14-.278.14-.417.111-.111.195-.25.307-.333.111-.111.111-.306 0-.39l-.028-.027c0-.055-.028-.139-.084-.167-.698-.666-1.2-1.138-1.731-1.638-.922-.862-1.871-1.75-3.881-3.75l-.028-.028c-.028-.028-.056-.056-.112-.056-.558-.194-1.703-.389-3.127-.639C6.087 2.223 3.21 1.723.614.944c0 0-.168 0-.196.028l-.083.084c-.028.027-.056.055-.224.11h.056-.056c.028.167.028.278.084.473 0 .055.112.5.112.555l.782 3.556Zm15.496 3.278-.335-.334c.084.112.196.195.335.334Zm-3.546 4.666-.056.056c0-.028.028-.056.056-.056Zm-2.038-10c.168.167.866.834 1.033.973-.726-.334-2.54-1.167-3.379-1.445.838.167 1.983.334 2.346.472ZM1.424 2.306c.419.722.754 3.222 1.089 5.666-.196-.778-.335-1.555-.503-2.278-.251-1.277-.503-2.416-.838-3.416.056 0 .14 0 .252.028Zm-.168-.584c-.112 0-.223-.028-.307-.028 0-.027 0-.055-.028-.055.14 0 .223.028.335.083Zm-1.089.222c0-.027 0-.027 0 0ZM39.453 1.333c.028-.11-.558-.61-.363-.639.42-.027.42-.666 0-.666-.558.028-1.144.166-1.675.25-.977.194-1.982.389-2.96.61-2.205.473-4.383.973-6.561 1.557-.67.194-1.424.333-2.066.666-.224.111-.196.333-.084.472-.056.028-.084.028-.14.056-.195.028-.363.056-.558.083-.168.028-.252.167-.224.334 0 .027.028.083.028.11-1.173 1.556-2.485 3.195-3.909 4.945-1.396 1.611-2.876 3.306-4.356 5.056-4.719 5.5-10.052 11.75-15.943 17.25a.268.268 0 0 0 0 .389c.028.027.056.055.084.055-.084.084-.168.14-.252.222-.056.056-.084.111-.084.167a.605.605 0 0 0-.111.139c-.112.111-.112.305.028.389.111.11.307.11.39-.028.029-.028.029-.056.056-.056a.44.44 0 0 1 .615 0c.335.362.67.723.977 1.028l-.698-.583c-.112-.111-.307-.083-.39.028-.113.11-.085.305.027.389l7.427 6.194c.056.056.112.056.196.056s.14-.028.195-.084l.168-.166c.028.027.083.027.111.027.084 0 .14-.027.196-.083 10.052-10.055 18.15-17.639 27.42-24.417.083-.055.111-.166.111-.25.112 0 .196-.083.251-.194 1.704-5.194 2.039-9.806 2.15-12.083v-.028c0-.028.028-.056.028-.083.028-.056.028-.084.028-.084a1.626 1.626 0 0 0-.111-1.028ZM21.472 9.5c.446-.5.893-1.028 1.34-1.5-2.876 3.778-7.65 9.583-14.408 16.5 4.607-5.083 9.242-10.333 13.068-15ZM5.193 35.778h.084-.084Zm3.462 3.194c-.027-.028-.027-.028 0-.028v.028Zm4.16-3.583c.224-.25.448-.472.699-.722 0 0 0 .027.028.027-.252.223-.475.445-.726.695Zm1.146-1.111c.14-.14.279-.334.446-.5l.028-.028c1.648-1.694 3.351-3.389 5.082-5.111l.028-.028c.419-.333.921-.694 1.368-1.028a379.003 379.003 0 0 0-6.952 6.695ZM24.794 6.472c-.921 1.195-1.954 2.778-2.82 4.028-2.736 3.944-11.532 13.583-11.727 13.75a1976.983 1976.983 0 0 1-8.042 7.639l-.167.167c-.14-.167-.14-.417.028-.556C14.49 19.861 22.03 10.167 25.074 5.917c-.084.194-.14.36-.28.555Zm4.83 5.695c-1.116-.64-1.646-1.64-1.34-2.611l.084-.334c.028-.083.084-.194.14-.277.307-.5.754-.917 1.257-1.167.027 0 .055 0 .083-.028-.028-.056-.028-.139-.028-.222.028-.167.14-.278.335-.278.335 0 1.369.306 1.76.639.111.083.223.194.335.305.14.167.363.445.474.667.056.028.112.306.196.445.056.222.111.472.084.694-.028.028 0 .194-.028.194a2.668 2.668 0 0 1-.363 1.028c-.028.028-.028.056-.056.084l-.028.027c-.14.223-.335.417-.53.556-.643.444-1.369.583-2.095.389 0 0-.195-.084-.28-.111Zm8.154-.834a39.098 39.098 0 0 1-.893 3.167c0 .028-.028.083 0 .111-.056 0-.084.028-.14.056-2.206 1.61-4.356 3.305-6.506 5.028 1.843-1.64 3.686-3.306 5.613-4.945.558-.5.949-1.139 1.06-1.861l.28-1.667v-.055c.14-.334.67-.195.586.166Z\",\n    fill: \"--icon-fill-color\"\n  })\n})), {\n  width: 40,\n  height: 40,\n  fill: \"none\"\n}); // custom\n\nconst SelectionIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6 6l4.153 11.793a0.365 .365 0 0 0 .331 .207a0.366 .366 0 0 0 .332 -.207l2.184 -4.793l4.787 -1.994a0.355 .355 0 0 0 .213 -.323a0.355 .355 0 0 0 -.213 -.323l-11.787 -4.36z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M13.5 13.5l4.5 4.5\"\n  })]\n})), {\n  fill: \"none\",\n  width: 22,\n  height: 22,\n  strokeWidth: 1.25\n}); // tabler-icons: square\n\nconst RectangleIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n    x: \"4\",\n    y: \"4\",\n    width: \"16\",\n    height: \"16\",\n    rx: \"2\"\n  })]\n})), tablerIconProps); // tabler-icons: square-rotated\n\nconst DiamondIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10.5 20.4l-6.9 -6.9c-.781 -.781 -.781 -2.219 0 -3l6.9 -6.9c.781 -.781 2.219 -.781 3 0l6.9 6.9c.781 .781 .781 2.219 0 3l-6.9 6.9c-.781 .781 -2.219 .781 -3 0z\"\n  })]\n})), tablerIconProps); // tabler-icons: circle\n\nconst EllipseIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    cx: \"12\",\n    cy: \"12\",\n    r: \"9\"\n  })]\n})), tablerIconProps); // tabler-icons: arrow-narrow-right\n\nconst ArrowIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"5\",\n    y1: \"12\",\n    x2: \"19\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"15\",\n    y1: \"16\",\n    x2: \"19\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"15\",\n    y1: \"8\",\n    x2: \"19\",\n    y2: \"12\"\n  })]\n})), tablerIconProps); // custom?\n\nconst LineIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M4.167 10h11.666\",\n  strokeWidth: \"1.5\"\n}), modifiedTablerIconProps);\nconst PenModeIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M20 17v-12c0 -1.121 -.879 -2 -2 -2s-2 .879 -2 2v12l2 2l2 -2z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16 7h4\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M18 19h-13a2 2 0 1 1 0 -4h4a2 2 0 1 0 0 -4h-3\"\n  })]\n})), tablerIconProps); // modified tabler-icons: pencil\n\nconst FreedrawIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    clipRule: \"evenodd\",\n    d: \"m7.643 15.69 7.774-7.773a2.357 2.357 0 1 0-3.334-3.334L4.31 12.357a3.333 3.333 0 0 0-.977 2.357v1.953h1.953c.884 0 1.732-.352 2.357-.977Z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"m11.25 5.417 3.333 3.333\"\n  })]\n})), modifiedTablerIconProps); // tabler-icons: typography\n\nconst TextIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"20\",\n    x2: \"7\",\n    y2: \"20\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"14\",\n    y1: \"20\",\n    x2: \"21\",\n    y2: \"20\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"6.9\",\n    y1: \"15\",\n    x2: \"13.8\",\n    y2: \"15\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"10.2\",\n    y1: \"6.3\",\n    x2: \"16\",\n    y2: \"20\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"polyline\", {\n    points: \"5 20 11 4 13 4 20 20\"\n  })]\n})), tablerIconProps); // modified tabler-icons: photo\n\nconst ImageIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12.5 6.667h.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4.91 2.625h10.18a2.284 2.284 0 0 1 2.285 2.284v10.182a2.284 2.284 0 0 1-2.284 2.284H4.909a2.284 2.284 0 0 1-2.284-2.284V4.909a2.284 2.284 0 0 1 2.284-2.284Z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"m3.333 12.5 3.334-3.333c.773-.745 1.726-.745 2.5 0l4.166 4.166\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"m11.667 11.667.833-.834c.774-.744 1.726-.744 2.5 0l1.667 1.667\"\n  })]\n})), modifiedTablerIconProps); // tabler-icons: eraser\n\nconst EraserIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M19 20h-10.5l-4.21 -4.3a1 1 0 0 1 0 -1.41l10 -10a1 1 0 0 1 1.41 0l5 5a1 1 0 0 1 0 1.41l-9.2 9.3\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M18 13.3l-6.3 -6.3\"\n  })]\n})), tablerIconProps);\nconst ZoomInIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  strokeWidth: \"1.25\",\n  d: \"M10 4.167v11.666M4.167 10h11.666\"\n}), modifiedTablerIconProps);\nconst ZoomOutIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M5 10h10\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst TrashIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  strokeWidth: \"1.25\",\n  d: \"M3.333 5.833h13.334M8.333 9.167v5M11.667 9.167v5M4.167 5.833l.833 10c0 .92.746 1.667 1.667 1.667h6.666c.92 0 1.667-.746 1.667-1.667l.833-10M7.5 5.833v-2.5c0-.46.373-.833.833-.833h3.334c.46 0 .833.373.833.833v2.5\"\n}), modifiedTablerIconProps);\nconst EmbedIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"polyline\", {\n    points: \"12 16 18 10 12 4\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"polyline\", {\n    points: \"8 4 2 10 8 16\"\n  })]\n})), modifiedTablerIconProps);\nconst DuplicateIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M14.375 6.458H8.958a2.5 2.5 0 0 0-2.5 2.5v5.417a2.5 2.5 0 0 0 2.5 2.5h5.417a2.5 2.5 0 0 0 2.5-2.5V8.958a2.5 2.5 0 0 0-2.5-2.5Z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    clipRule: \"evenodd\",\n    d: \"M11.667 3.125c.517 0 .986.21 1.325.55.34.338.55.807.55 1.325v1.458H8.333c-.485 0-.927.185-1.26.487-.343.312-.57.75-.609 1.24l-.005 5.357H5a1.87 1.87 0 0 1-1.326-.55 1.87 1.87 0 0 1-.549-1.325V5c0-.518.21-.987.55-1.326.338-.34.807-.549 1.325-.549h6.667Z\"\n  })]\n})), modifiedTablerIconProps);\nconst MoonIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  clipRule: \"evenodd\",\n  d: \"M10 2.5h.328a6.25 6.25 0 0 0 6.6 10.372A7.5 7.5 0 1 1 10 2.493V2.5Z\",\n  stroke: \"var(--icon-fill-color)\" //zsviczian\n\n}), modifiedTablerIconProps);\nconst SunIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\" //zsviczian\n  ,\n  strokeWidth: \"1.25\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM10 4.167V2.5M14.167 5.833l1.166-1.166M15.833 10H17.5M14.167 14.167l1.166 1.166M10 15.833V17.5M5.833 14.167l-1.166 1.166M5 10H3.333M5.833 5.833 4.667 4.667\"\n  })\n})), modifiedTablerIconProps);\nconst HamburgerMenuIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"6\",\n    x2: \"20\",\n    y2: \"6\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"12\",\n    x2: \"20\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"18\",\n    x2: \"20\",\n    y2: \"18\"\n  })]\n})), tablerIconProps);\nconst ExportIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  strokeWidth: \"1.25\",\n  d: \"M3.333 14.167v1.666c0 .92.747 1.667 1.667 1.667h10c.92 0 1.667-.746 1.667-1.667v-1.666M5.833 9.167 10 13.333l4.167-4.166M10 3.333v10\"\n}), modifiedTablerIconProps);\nconst HelpIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    cx: \"12\",\n    cy: \"12\",\n    r: \"9\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"12\",\n    y1: \"17\",\n    x2: \"12\",\n    y2: \"17.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4\"\n  })]\n})), tablerIconProps);\nconst ExternalLinkIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  strokeWidth: \"1.25\",\n  d: \"M9.167 5.833H5.833c-1.254 0-2.5 1.282-2.5 2.5v5.834c0 1.283 1.252 2.5 2.5 2.5h5.834c1.251 0 2.5-1.25 2.5-2.5v-3.334M8.333 11.667l8.334-8.334M12.5 3.333h4.167V7.5\"\n}), modifiedTablerIconProps);\nconst GithubIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M7.5 15.833c-3.583 1.167-3.583-2.083-5-2.5m10 4.167v-2.917c0-.833.083-1.166-.417-1.666 2.334-.25 4.584-1.167 4.584-5a3.833 3.833 0 0 0-1.084-2.667 3.5 3.5 0 0 0-.083-2.667s-.917-.25-2.917 1.084a10.25 10.25 0 0 0-5.166 0C5.417 2.333 4.5 2.583 4.5 2.583a3.5 3.5 0 0 0-.083 2.667 3.833 3.833 0 0 0-1.084 2.667c0 3.833 2.25 4.75 4.584 5-.5.5-.5 1-.417 1.666V17.5\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst DiscordIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M7.5 10.833a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666ZM12.5 10.833a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666ZM6.25 6.25c2.917-.833 4.583-.833 7.5 0M5.833 13.75c2.917.833 5.417.833 8.334 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12.917 14.167c0 .833 1.25 2.5 1.666 2.5 1.25 0 2.361-1.39 2.917-2.5.556-1.39.417-4.861-1.25-9.584-1.214-.846-2.5-1.116-3.75-1.25l-.833 2.084M7.083 14.167c0 .833-1.13 2.5-1.526 2.5-1.191 0-2.249-1.39-2.778-2.5-.529-1.39-.397-4.861 1.19-9.584 1.157-.846 2.318-1.116 3.531-1.25l.833 2.084\"\n  })]\n})), modifiedTablerIconProps);\nconst TwitterIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z\"\n  })]\n})), tablerIconProps);\nconst checkIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"polyline\", {\n  fill: \"none\",\n  stroke: \"var(--icon-fill-color)\",\n  points: \"20 6 9 17 4 12\"\n}), {\n  width: 24,\n  height: 24\n});\nconst LinkIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M8.333 11.667a2.917 2.917 0 0 0 4.167 0l3.333-3.334a2.946 2.946 0 1 0-4.166-4.166l-.417.416\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M11.667 8.333a2.917 2.917 0 0 0-4.167 0l-3.333 3.334a2.946 2.946 0 0 0 4.166 4.166l.417-.416\"\n  })]\n})), modifiedTablerIconProps);\nconst save = createIcon(\"M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z\", {\n  width: 448,\n  height: 512\n});\nconst saveAs = createIcon(\"M252 54L203 8a28 27 0 00-20-8H28C12 0 0 12 0 27v195c0 15 12 26 28 26h204c15 0 28-11 28-26V73a28 27 0 00-8-19zM130 213c-21 0-37-16-37-36 0-19 16-35 37-35 20 0 37 16 37 35 0 20-17 36-37 36zm56-169v56c0 4-4 6-7 6H44c-4 0-7-2-7-6V42c0-4 3-7 7-7h133l4 2 3 2a7 7 0 012 5z M296 201l87 95-188 205-78 9c-10 1-19-8-18-20l9-84zm141-14l-41-44a31 31 0 00-46 0l-38 41 87 95 38-42c13-14 13-36 0-50z\", {\n  width: 448,\n  height: 512\n}); // tabler-icon: folder\n\nconst LoadIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"m9.257 6.351.183.183H15.819c.34 0 .727.182 1.051.506.323.323.505.708.505 1.05v5.819c0 .316-.183.7-.52 1.035-.337.338-.723.522-1.037.522H4.182c-.352 0-.74-.181-1.058-.5-.318-.318-.499-.705-.499-1.057V5.182c0-.351.181-.736.5-1.054.32-.321.71-.503 1.057-.503H6.53l2.726 2.726Z\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst clipboard = createIcon(\"M384 112v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h80c0-35.29 28.71-64 64-64s64 28.71 64 64h80c26.51 0 48 21.49 48 48zM192 40c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24m96 114v-20a6 6 0 0 0-6-6H102a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h180a6 6 0 0 0 6-6z\", {\n  width: 384,\n  height: 512\n});\nconst palette = createIcon(\"M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z\");\nconst ExportImageIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M15 8h.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 20h-5a3 3 0 0 1 -3 -3v-10a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v5\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 15l4 -4c.928 -.893 2.072 -.893 3 0l4 4\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M14 14l1 -1c.617 -.593 1.328 -.793 2.009 -.598\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M19 16v6\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M22 19l-3 3l-3 -3\"\n  })]\n})), tablerIconProps);\nconst exportToFileIcon = createIcon(\"M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z\", {\n  width: 512,\n  height: 512\n});\nconst zoomIn = createIcon(\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\", {\n  width: 448,\n  height: 512\n});\nconst zoomOut = createIcon(\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\", {\n  width: 448,\n  height: 512\n});\nconst done = createIcon(\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\");\nconst menu = createIcon(\"M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z\");\nconst UndoIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M7.5 10.833 4.167 7.5 7.5 4.167M4.167 7.5h9.166a3.333 3.333 0 0 1 0 6.667H12.5\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst RedoIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M12.5 10.833 15.833 7.5 12.5 4.167M15.833 7.5H6.667a3.333 3.333 0 1 0 0 6.667H7.5\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst questionCircle = createIcon(\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z\", {\n  mirror: true\n});\nconst share = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M5 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM15 7.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM15 17.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM7.25 8.917l5.5-2.834M7.25 11.083l5.5 2.834\",\n  strokeWidth: \"1.5\"\n}), modifiedTablerIconProps);\nconst shareIOS = createIcon(\"M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z\", {\n  width: 24,\n  height: 24\n});\nconst shareWindows = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    fill: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    d: \"M40 5.6v6.1l-4.1.7c-8.9 1.4-16.5 6.9-20.6 15C13 32 10.9 43 12.4 43c.4 0 2.4-1.3 4.4-3 5-3.9 12.1-7 18.2-7.7l5-.6v12.8l11.2-11.3L62.5 22 51.2 10.8 40-.5v6.1zm10.2 22.6L44 34.5v-6.8l-6.9.6c-3.9.3-9.8 1.7-13.2 3.1-3.5 1.4-6.5 2.4-6.7 2.2-.9-1 3-7.5 6.4-10.8C28 18.6 34.4 16 40.1 16c3.7 0 3.9-.1 3.9-3.2V9.5l6.2 6.3 6.3 6.2-6.3 6.2z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    fill: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    d: \"M0 36v20h48v-6.2c0-6 0-6.1-2-4.3-1.1 1-2 2.9-2 4.2V52H4V34c0-17.3-.1-18-2-18s-2 .7-2 20z\"\n  })]\n}), {\n  width: 64,\n  height: 64\n}); // Icon imported form Storybook\n// Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE\n\nconst resetZoom = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  stroke: \"var(--icon-fill-color)\" //zsviczian\n  ,\n  strokeWidth: \"40\",\n  fill: \"var(--icon-fill-color)\" //zsviczian\n  ,\n  d: \"M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z\"\n}), {\n  width: 1024\n});\nconst BringForwardIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: \"1.25\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M13.889 4.167H8.333c-.767 0-1.389.622-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.767-.622-1.39-1.39-1.39Z\",\n      fill: \"var(--icon-fill-color)\" //zsviczian\n\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M12.5 12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst SendBackwardIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: \"1.25\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      fillRule: \"evenodd\",\n      clipRule: \"evenodd\",\n      d: \"M6.944 12.5H12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388\",\n      fill: \"var(--icon-fill-color)\" //zsviczian\n\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M13.889 4.167H8.333c-.767 0-1.389.621-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.768-.622-1.39-1.39-1.39Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst BringToFrontIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M8.775 6.458h2.45a2.316 2.316 0 0 1 2.317 2.316v2.452a2.316 2.316 0 0 1-2.316 2.316H8.774a2.316 2.316 0 0 1-2.317-2.316V8.774a2.316 2.316 0 0 1 2.317-2.316Z\",\n      fill: \"var(--icon-fill-color)\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316ZM12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst SendToBackIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"mask\", Object.assign({\n      id: \"SendToBackIcon\",\n      fill: \"#fff\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fillRule: \"evenodd\",\n        clipRule: \"evenodd\",\n        d: \"M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z\"\n      })\n    })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      fillRule: \"evenodd\",\n      clipRule: \"evenodd\",\n      d: \"M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z\",\n      fill: \"var(--icon-fill-color)\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M9.167 5.833h1.25v-1.25h-1.25v1.25Zm5 5h1.25v-1.25h-1.25v1.25Zm-3.334 3.334h-1.25v1.25h1.25v-1.25Zm-5-5h-1.25v1.25h1.25v-1.25Zm2.084-3.334v2.06h2.5v-2.06h-2.5Zm0 2.06a4.191 4.191 0 0 0 4.19 4.19v-2.5a1.691 1.691 0 0 1-1.69-1.69h-2.5Zm4.19 4.19h2.06v-2.5h-2.06v2.5Zm.81-1.25v.393h2.5v-.393h-2.5Zm0 .393c0 .933-.758 1.69-1.691 1.69v2.5a4.191 4.191 0 0 0 4.19-4.19h-2.5Zm-1.691 1.69h-.393v2.5h.393v-2.5Zm.857 1.25v-2.058h-2.5v2.059h2.5Zm0-2.058a4.191 4.191 0 0 0-4.19-4.191v2.5c.933 0 1.69.757 1.69 1.69h2.5Zm-4.19-4.191h-2.06v2.5h2.06v-2.5Zm-.81 1.25v-.393h-2.5v.393h2.5Zm0-.393c0-.934.758-1.69 1.692-1.69v-2.5a4.191 4.191 0 0 0-4.192 4.19h2.5Zm1.692-1.69h.392v-2.5h-.392v2.5Z\",\n      fill: \"var(--icon-fill-color)\",\n      mask: \"url(#SendToBackIcon)\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps); //\n// Align action icons created from scratch to match those of z-index actions\n// Note: vertical align icons are flipped so the larger item is always the\n// first one the user sees. Horizontal align icons should not be flipped since\n// that would make them lie about their function.\n//\n\nconst AlignTopIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M3.333 3.333h13.334\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M13.542 6.458h-.417c-.92 0-1.667.747-1.667 1.667v7.083c0 .92.746 1.667 1.667 1.667h.417c.92 0 1.666-.746 1.666-1.667V8.125c0-.92-.746-1.667-1.666-1.667ZM6.875 6.458h-.417c-.92 0-1.666.747-1.666 1.667v3.75c0 .92.746 1.667 1.666 1.667h.417c.92 0 1.667-.746 1.667-1.667v-3.75c0-.92-.747-1.667-1.667-1.667Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst AlignBottomIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M3.333 16.667h13.334\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M6.875 3.125h-.417c-.92 0-1.666.746-1.666 1.667v7.083c0 .92.746 1.667 1.666 1.667h.417c.92 0 1.667-.746 1.667-1.667V4.792c0-.92-.747-1.667-1.667-1.667ZM13.542 5.817h-.417c-.92 0-1.667.747-1.667 1.667v4.391c0 .92.746 1.667 1.667 1.667h.417c.92 0 1.666-.746 1.666-1.667V7.484c0-.92-.746-1.667-1.666-1.667Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst AlignLeftIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M3.333 3.333v13.334\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M15.208 4.792H8.125c-.92 0-1.667.746-1.667 1.666v.417c0 .92.747 1.667 1.667 1.667h7.083c.92 0 1.667-.747 1.667-1.667v-.417c0-.92-.746-1.666-1.667-1.666ZM12.516 11.458H8.125c-.92 0-1.667.746-1.667 1.667v.417c0 .92.747 1.666 1.667 1.666h4.391c.92 0 1.667-.746 1.667-1.666v-.417c0-.92-.746-1.667-1.667-1.667Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst AlignRightIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M16.667 3.333v13.334\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M11.875 4.792H4.792c-.92 0-1.667.746-1.667 1.666v.417c0 .92.746 1.667 1.667 1.667h7.083c.92 0 1.667-.747 1.667-1.667v-.417c0-.92-.746-1.666-1.667-1.666ZM11.683 11.458H7.292c-.92 0-1.667.746-1.667 1.667v.417c0 .92.746 1.666 1.667 1.666h4.39c.921 0 1.667-.746 1.667-1.666v-.417c0-.92-.746-1.667-1.666-1.667Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst DistributeHorizontallyIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M16.667 3.333v13.334M3.333 3.333v13.334\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M14.375 10.208v-.416c0-.92-.746-1.667-1.667-1.667H7.292c-.92 0-1.667.746-1.667 1.667v.416c0 .92.746 1.667 1.667 1.667h5.416c.92 0 1.667-.746 1.667-1.667Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst DistributeVerticallyIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M3.333 3.333h13.334M3.333 16.667h13.334\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M10.208 5.625h-.416c-.92 0-1.667.746-1.667 1.667v5.416c0 .92.746 1.667 1.667 1.667h.416c.92 0 1.667-.746 1.667-1.667V7.292c0-.92-.746-1.667-1.667-1.667Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst CenterVerticallyIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M1.667 10h2.916\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M8.333 10h3.334\",\n    strokeLinejoin: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M15.417 10h2.916\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6.875 4.792h-.417c-.92 0-1.666.746-1.666 1.666v7.084c0 .92.746 1.666 1.666 1.666h.417c.92 0 1.667-.746 1.667-1.666V6.458c0-.92-.747-1.666-1.667-1.666ZM13.542 6.458h-.417c-.92 0-1.667.747-1.667 1.667v3.75c0 .92.746 1.667 1.667 1.667h.417c.92 0 1.666-.746 1.666-1.667v-3.75c0-.92-.746-1.667-1.666-1.667Z\"\n  })]\n})), modifiedTablerIconProps);\nconst CenterHorizontallyIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 18.333v-2.916\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 11.667V8.333\",\n    strokeLinejoin: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 4.583V1.667\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4.792 13.125v.417c0 .92.746 1.666 1.666 1.666h7.084c.92 0 1.666-.746 1.666-1.666v-.417c0-.92-.746-1.667-1.666-1.667H6.458c-.92 0-1.666.746-1.666 1.667ZM6.458 6.458v.417c0 .92.747 1.667 1.667 1.667h3.75c.92 0 1.667-.747 1.667-1.667v-.417c0-.92-.746-1.666-1.667-1.666h-3.75c-.92 0-1.667.746-1.667 1.666Z\"\n  })]\n})), modifiedTablerIconProps);\nconst usersIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    cx: \"9\",\n    cy: \"7\",\n    r: \"4\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16 3.13a4 4 0 0 1 0 7.75\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M21 21v-2a4 4 0 0 0 -3 -3.85\"\n  })]\n})), tablerIconProps); // not mirrored because it's inspired by a playback control, which is always RTL\n\nconst start = createIcon(\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z\");\nconst stop = createIcon(\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm96 328c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v160z\");\nconst CloseIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M15 5 5 15M5 5l10 10\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst back = createIcon(\"M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z\", {\n  width: 320,\n  height: 512,\n  style: {\n    marginLeft: \"-0.2rem\"\n  },\n  mirror: true\n});\nconst clone = createIcon(\"M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z\", {\n  mirror: true\n}); // modified https://feathericons.com/?query=shield\n\nconst shield = createIcon(\"M11.553 22.894a.998.998 0 00.894 0s3.037-1.516 5.465-4.097C19.616 16.987 21 14.663 21 12V5a1 1 0 00-.649-.936l-8-3a.998.998 0 00-.702 0l-8 3A1 1 0 003 5v7c0 2.663 1.384 4.987 3.088 6.797 2.428 2.581 5.465 4.097 5.465 4.097zm-1.303-8.481l6.644-6.644a.856.856 0 111.212 1.212l-7.25 7.25a.856.856 0 01-1.212 0l-3.75-3.75a.856.856 0 111.212-1.212l3.144 3.144z\", {\n  width: 24\n});\nconst file = createIcon(\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm32-48h224V288l-23.5-23.5c-4.7-4.7-12.3-4.7-17 0L176 352l-39.5-39.5c-4.7-4.7-12.3-4.7-17 0L80 352v64zm48-240c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z\", {\n  width: 384,\n  height: 512\n}); // TODO barnabasmolnar/editor-redesign\n// couldn't find a new icon for this\n\nconst GroupIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  theme\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M25 26H111V111H25\",\n    fill: iconFillColor(theme)\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M25 111C25 80.2068 25 49.4135 25 26M25 26C48.6174 26 72.2348 26 111 26H25ZM25 26C53.3671 26 81.7343 26 111 26H25ZM111 26C111 52.303 111 78.606 111 111V26ZM111 26C111 51.2947 111 76.5893 111 111V26ZM111 111C87.0792 111 63.1585 111 25 111H111ZM111 111C87.4646 111 63.9293 111 25 111H111ZM25 111C25 81.1514 25 51.3028 25 26V111Z\",\n    stroke: iconFillColor(theme),\n    strokeWidth: \"2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M100 100H160V160H100\",\n    fill: iconFillColor(theme)\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M100 160C100 144.106 100 128.211 100 100M100 100C117.706 100 135.412 100 160 100H100ZM100 100C114.214 100 128.428 100 160 100H100ZM160 100C160 120.184 160 140.369 160 160V100ZM160 100C160 113.219 160 126.437 160 160V100ZM160 160C145.534 160 131.068 160 100 160H160ZM160 160C143.467 160 126.934 160 100 160H160ZM100 160C100 143.661 100 127.321 100 100V160Z\",\n    stroke: iconFillColor(theme),\n    strokeWidth: \"2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    fill: handlerColor(theme),\n    stroke: iconFillColor(theme),\n    strokeWidth: \"6\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"2.5\",\n      y: \"2.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"2.5\",\n      y: \"149.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"147.5\",\n      y: \"149.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"147.5\",\n      y: \"2.5\",\n      width: \"30\",\n      height: \"30\"\n    })]\n  }))]\n}), {\n  width: 182,\n  height: 182,\n  mirror: true\n}));\nconst UngroupIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  theme\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M25 26H111V111H25\",\n    fill: iconFillColor(theme)\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M25 111C25 80.2068 25 49.4135 25 26M25 26C48.6174 26 72.2348 26 111 26H25ZM25 26C53.3671 26 81.7343 26 111 26H25ZM111 26C111 52.303 111 78.606 111 111V26ZM111 26C111 51.2947 111 76.5893 111 111V26ZM111 111C87.0792 111 63.1585 111 25 111H111ZM111 111C87.4646 111 63.9293 111 25 111H111ZM25 111C25 81.1514 25 51.3028 25 26V111Z\",\n    stroke: iconFillColor(theme),\n    strokeWidth: \"2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M100 100H160V160H100\",\n    fill: iconFillColor(theme)\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M100 160C100 144.106 100 128.211 100 100M100 100C117.706 100 135.412 100 160 100H100ZM100 100C114.214 100 128.428 100 160 100H100ZM160 100C160 120.184 160 140.369 160 160V100ZM160 100C160 113.219 160 126.437 160 160V100ZM160 160C145.534 160 131.068 160 100 160H160ZM160 160C143.467 160 126.934 160 100 160H160ZM100 160C100 143.661 100 127.321 100 100V160Z\",\n    stroke: iconFillColor(theme),\n    strokeWidth: \"2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    fill: handlerColor(theme),\n    stroke: iconFillColor(theme),\n    strokeWidth: \"6\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"2.5\",\n      y: \"2.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"78.5\",\n      y: \"149.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"147.5\",\n      y: \"149.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"147.5\",\n      y: \"78.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"105.5\",\n      y: \"2.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"2.5\",\n      y: \"102.5\",\n      width: \"30\",\n      height: \"30\"\n    })]\n  }))]\n}), {\n  width: 182,\n  height: 182,\n  mirror: true\n}));\nconst FillZigZagIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n  strokeWidth: 1.25\n}, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M5.879 2.625h8.242a3.27 3.27 0 0 1 3.254 3.254v8.242a3.27 3.27 0 0 1-3.254 3.254H5.88a3.27 3.27 0 0 1-3.254-3.254V5.88A3.27 3.27 0 0 1 5.88 2.626l-.001-.001ZM4.518 16.118l7.608-12.83m.198 13.934 5.051-9.897M2.778 9.675l9.348-6.387m-7.608 12.83 12.857-8.793\"\n  })\n})), modifiedTablerIconProps);\nconst FillHachureIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"mask\", Object.assign({\n    id: \"FillHachureIcon\",\n    style: {\n      maskType: \"alpha\"\n    },\n    maskUnits: \"userSpaceOnUse\",\n    x: 2,\n    y: 2,\n    width: 16,\n    height: 16\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z\",\n      fill: \"var(--icon-fill-color)\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    mask: \"url(#FillHachureIcon)\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M2.258 15.156 15.156 2.258M7.324 20.222 20.222 7.325m-20.444 5.35L12.675-.222m-8.157 18.34L17.416 5.22\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    })\n  }))]\n}), modifiedTablerIconProps);\nconst FillCrossHatchIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"mask\", Object.assign({\n      id: \"FillCrossHatchIcon\",\n      style: {\n        maskType: \"alpha\"\n      },\n      maskUnits: \"userSpaceOnUse\",\n      x: -1,\n      y: -1,\n      width: 22,\n      height: 22\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        d: \"M2.426 15.044 15.044 2.426M7.383 20 20 7.383M0 12.617 12.617 0m-7.98 17.941L17.256 5.324m-2.211 12.25L2.426 4.956M20 12.617 7.383 0m5.234 20L0 7.383m17.941 7.98L5.324 2.745\",\n        stroke: \"var(--icon-fill-color)\",\n        strokeWidth: \"1.25\",\n        strokeLinecap: \"round\",\n        strokeLinejoin: \"round\"\n      })\n    })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n      mask: \"url(#FillCrossHatchIcon)\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        d: \"M14.121 2H5.88A3.879 3.879 0 0 0 2 5.879v8.242A3.879 3.879 0 0 0 5.879 18h8.242A3.879 3.879 0 0 0 18 14.121V5.88A3.879 3.879 0 0 0 14.121 2Z\",\n        fill: \"var(--icon-fill-color)\"\n      })\n    }))]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst FillSolidIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    clipPath: \"url(#a)\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M4.91 2.625h10.18a2.284 2.284 0 0 1 2.285 2.284v10.182a2.284 2.284 0 0 1-2.284 2.284H4.909a2.284 2.284 0 0 1-2.284-2.284V4.909a2.284 2.284 0 0 1 2.284-2.284Z\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), Object.assign(Object.assign({}, modifiedTablerIconProps), {\n  fill: \"var(--icon-fill-color)\"\n}));\nconst StrokeWidthThinIcon = createIcon( //zsviczian\n(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4.167 10h11.666\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"0.75\" //zsviczian\n    ,\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  })\n}), modifiedTablerIconProps);\nconst StrokeWidthBaseIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4.167 10h11.666\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"2.25\" //zsviczian\n    ,\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  })\n}), modifiedTablerIconProps);\nconst StrokeWidthBoldIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M5 10h10\",\n  stroke: \"var(--icon-fill-color)\",\n  strokeWidth: \"3.5\" //zsviczian\n  ,\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}), modifiedTablerIconProps);\nconst StrokeWidthExtraBoldIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M5 10h10\",\n  stroke: \"var(--icon-fill-color)\",\n  strokeWidth: \"5.75\" //zsviczian\n  ,\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}), modifiedTablerIconProps);\nconst StrokeStyleSolidIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  theme\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M6 10H34\",\n  stroke: iconFillColor(theme),\n  strokeWidth: 2,\n  fill: \"none\",\n  strokeLinecap: \"round\"\n}), {\n  width: 40,\n  height: 20\n}));\nconst StrokeStyleDashedIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"2\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M5 12h2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M17 12h2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M11 12h2\"\n  })]\n})), tablerIconProps); // tabler-icons: line-dotted\n\nconst StrokeStyleDottedIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"2\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 12v.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M8 12v.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 12v.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16 12v.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M20 12v.01\"\n  })]\n})), tablerIconProps);\nconst SloppinessArchitectIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M2.5 12.038c1.655-.885 5.9-3.292 8.568-4.354 2.668-1.063.101 2.821 1.32 3.104 1.218.283 5.112-1.814 5.112-1.814\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst SloppinessArtistIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M2.5 12.563c1.655-.886 5.9-3.293 8.568-4.355 2.668-1.062.101 2.822 1.32 3.105 1.218.283 5.112-1.814 5.112-1.814m-13.469 2.23c2.963-1.586 6.13-5.62 7.468-4.998 1.338.623-1.153 4.11-.132 5.595 1.02 1.487 6.133-1.43 6.133-1.43\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst SloppinessCartoonistIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M2.5 11.936c1.737-.879 8.627-5.346 10.42-5.268 1.795.078-.418 5.138.345 5.736.763.598 3.53-1.789 4.235-2.147M2.929 9.788c1.164-.519 5.47-3.28 6.987-3.114 1.519.165 1 3.827 2.121 4.109 1.122.281 3.839-2.016 4.606-2.42\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst EdgeSharpIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"svg\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M3.33334 9.99998V6.66665C3.33334 6.04326 3.33403 4.9332 3.33539 3.33646C4.95233 3.33436 6.06276 3.33331 6.66668 3.33331H10\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M13.3333 3.33331V3.34331\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16.6667 3.33331V3.34331\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16.6667 6.66669V6.67669\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16.6667 10V10.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M3.33334 13.3333V13.3433\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16.6667 13.3333V13.3433\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M3.33334 16.6667V16.6767\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6.66666 16.6667V16.6767\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 16.6667V16.6767\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M13.3333 16.6667V16.6767\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16.6667 16.6667V16.6767\"\n  })]\n})), modifiedTablerIconProps); // tabler-icons: border-radius\n\nconst EdgeRoundIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\",\n  stroke: \"var(--icon-fill-color)\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 12v-4a4 4 0 0 1 4 -4h4\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"16\",\n    y1: \"4\",\n    x2: \"16\",\n    y2: \"4.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"20\",\n    y1: \"4\",\n    x2: \"20\",\n    y2: \"4.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"20\",\n    y1: \"8\",\n    x2: \"20\",\n    y2: \"8.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"20\",\n    y1: \"12\",\n    x2: \"20\",\n    y2: \"12.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"16\",\n    x2: \"4\",\n    y2: \"16.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"20\",\n    y1: \"16\",\n    x2: \"20\",\n    y2: \"16.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"20\",\n    x2: \"4\",\n    y2: \"20.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"8\",\n    y1: \"20\",\n    x2: \"8\",\n    y2: \"20.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"12\",\n    y1: \"20\",\n    x2: \"12\",\n    y2: \"20.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"16\",\n    y1: \"20\",\n    x2: \"16\",\n    y2: \"20.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"20\",\n    y1: \"20\",\n    x2: \"20\",\n    y2: \"20.01\"\n  })]\n})), tablerIconProps);\nconst ArrowheadNoneIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M6 10H34\",\n  stroke: \"var(--icon-fill-color)\",\n  strokeWidth: 2,\n  fill: \"none\"\n}), {\n  width: 40,\n  height: 20\n});\nconst ArrowheadArrowIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\",\n  stroke: \"var(--icon-fill-color)\",\n  strokeWidth: 2,\n  fill: \"none\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M34 10H6M34 10L27 5M34 10L27 15\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M27.5 5L34.5 10L27.5 15\"\n  })]\n})), {\n  width: 40,\n  height: 20\n}));\nconst ArrowheadCircleIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"var(--icon-fill-color)\",\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M32 10L6 10\",\n    strokeWidth: 2\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    r: \"4\",\n    transform: \"matrix(-1 0 0 1 30 10)\"\n  })]\n})), {\n  width: 40,\n  height: 20\n}));\nconst ArrowheadCircleOutlineIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\",\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\",\n  strokeWidth: 2\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M26 10L6 10\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    r: \"4\",\n    transform: \"matrix(-1 0 0 1 30 10)\"\n  })]\n})), {\n  width: 40,\n  height: 20\n}));\nconst ArrowheadBarIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\"\n}, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M34 10H5.99996M34 10L34 5M34 10L34 15\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: 2,\n    fill: \"none\"\n  })\n})), {\n  width: 40,\n  height: 20\n}));\nconst ArrowheadTriangleIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"var(--icon-fill-color)\",\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M32 10L6 10\",\n    strokeWidth: 2\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M27.5 5.5L34.5 10L27.5 14.5L27.5 5.5\"\n  })]\n})), {\n  width: 40,\n  height: 20\n}));\nconst ArrowheadTriangleOutlineIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\",\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\",\n  strokeWidth: 2,\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6,9.5H27\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M27,5L34,10L27,14Z\",\n    fill: \"none\"\n  })]\n})), {\n  width: 40,\n  height: 20\n}));\nconst ArrowheadDiamondIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"currentColor\",\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\",\n  strokeLinejoin: \"round\",\n  strokeWidth: 2\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6,9.5H20\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M27,5L34,10L27,14L20,9.5Z\"\n  })]\n})), {\n  width: 40,\n  height: 20\n}));\nconst ArrowheadDiamondOutlineIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\",\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\",\n  strokeLinejoin: \"round\",\n  strokeWidth: 2\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6,9.5H20\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M27,5L34,10L27,14L20,9.5Z\"\n  })]\n})), {\n  width: 40,\n  height: 20\n}));\nconst FontSizeSmallIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    clipPath: \"url(#a)\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M14.167 6.667a3.333 3.333 0 0 0-3.334-3.334H9.167a3.333 3.333 0 0 0 0 6.667h1.666a3.333 3.333 0 0 1 0 6.667H9.167a3.333 3.333 0 0 1-3.334-3.334\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst FontSizeMediumIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    clipPath: \"url(#a)\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5 16.667V3.333L10 15l5-11.667v13.334\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst FontSizeLargeIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    clipPath: \"url(#a)\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.833 3.333v13.334h8.334\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst FontSizeExtraLargeIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"m1.667 3.333 6.666 13.334M8.333 3.333 1.667 16.667M11.667 3.333v13.334h6.666\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  })\n}), modifiedTablerIconProps);\nconst FontFamilyNormalIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.833 16.667v-10a3.333 3.333 0 0 1 3.334-3.334h1.666a3.333 3.333 0 0 1 3.334 3.334v10M5.833 10.833h8.334\"\n    })\n  }))\n}), modifiedTablerIconProps);\nconst FontFamilyCodeIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.833 6.667 2.5 10l3.333 3.333M14.167 6.667 17.5 10l-3.333 3.333M11.667 3.333 8.333 16.667\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst FontFamilyLocalFontIcon = createIcon( //zsviczian\n(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    stroke: \"var(--icon-fill-color)\",\n    fill: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"m 151.43258,8.7863685 q -7.87381,6.7489805 -14.62279,12.3731315 0,11.248301 0,23.621433 8.99864,35.994564 13.49796,76.488447 -4.49932,7.87381 -11.2483,13.49796 -16.87245,1.12483 -29.24559,-3.37449 -6.74898,-4.49932 -10.123467,-11.2483 -7.87381,-2.24966 -15.747621,0 -6.748981,1.12483 -11.248302,5.62415 l -16.872451,16.87245 q -11.248302,2.24966 -19.122113,8.99864 -6.74898,6.74899 -6.74898,17.99729 2.24966,3.37449 4.49932,7.87381 2.24966,4.49932 2.24966,12.37313 -16.872452,31.49524 -30.3704131,65.24015 -2.2496602,23.62143 0,47.24286 6.7489811,10.12347 15.7476221,20.24694 10.123471,4.49932 20.246942,13.49797 25.871093,4.49932 53.991846,8.99864 23.621437,-5.62415 50.617357,-5.62415 3.37449,2.24966 6.74898,5.62415 0,25.87109 0,55.11667 1.12483,19.12211 5.62415,38.24423 v 61.86565 q 2.24966,5.62415 8.99864,8.99864 10.12347,0 19.12211,-3.37449 3.37449,2.24966 10.12347,2.24966 7.87382,-13.49796 17.99729,-24.74626 5.62415,-34.86973 7.87381,-70.8643 -5.62415,-40.49388 -5.62415,-82.1126 l 7.87381,-7.87381 h 16.87245 q 21.37177,-8.99864 44.9932,-13.49796 14.6228,-7.87381 30.37042,-15.74762 3.37449,-1.12483 8.99864,-1.12483 11.2483,-10.12347 23.62143,-22.4966 2.24966,-6.74898 6.74898,-12.37313 V 230.3779 q 4.49932,-14.62279 6.74898,-30.37041 4.49932,-11.2483 10.12347,-20.24694 2.24966,-17.99728 2.24966,-37.1194 -5.62415,-7.87381 -7.87381,-15.74762 -6.74898,-6.74898 -13.49796,-13.49796 -11.2483,-6.74898 -20.24694,-10.12347 -46.11804,-4.499321 -92.23607,0 -10.12347,4.49932 -22.4966,4.49932 -6.74898,-2.24966 -10.12347,-7.873811 2.24966,-23.621433 2.24966,-46.118035 -5.62415,-8.998641 -4.49932,-19.122113 Q 203.17477,22.28433 195.30095,13.285689 187.42714,3.1622179 178.4285,2.0373877 164.93054,5.4118781 151.43258,8.7863685 Z M 136.80979,175.26123 q 7.87381,2.24966 11.2483,12.37313 -1.12483,39.36905 1.12483,80.98777 4.49932,6.74898 3.37449,15.74762 -5.62415,6.74898 -12.37313,11.2483 -17.99728,1.12483 -33.74491,5.62415 -19.122108,0 -37.11939,-1.12483 -6.748981,-4.49932 -11.248301,-7.87381 -1.12483,-14.62279 1.12483,-29.24558 16.872452,-30.37042 28.120753,-62.99049 4.499321,-7.87381 11.248301,-13.49796 14.622787,-3.37449 29.245587,-5.62415 4.49932,-3.37449 8.99864,-5.62415 z M 283.0377,146.01564 q 8.99865,-1.12483 17.99729,2.24966 4.49932,2.24966 8.99864,7.87382 2.24966,8.99864 1.12483,20.24694 -6.74898,11.2483 -10.12347,22.4966 -4.49932,25.87109 -10.12348,52.86702 -24.74626,11.2483 -47.24286,24.74626 -10.12347,2.24966 -19.12211,4.49932 l -10.12347,-10.12347 q 0,-44.99321 3.37449,-84.36226 -3.37449,-13.49796 -6.74898,-23.62143 4.49932,-6.74898 12.37313,-11.24831 29.24558,-3.37449 59.61599,-5.62415 z M 638.74,93.24 766.76,221.26 488.77,499.25 374.63,511.85 c -15.28,1.69 -28.19,-11.23 -26.49,-26.51 l 12.7,-114.22 z M 845.94,74.18 785.83,14.07 c -18.75,-18.75 -49.16,-18.75 -67.91,0 l -56.55,56.55 128.02,128.02 56.55,-56.55 c 18.75,-18.76 18.75,-49.16 0,-67.91 z\"\n    })\n  }))\n}));\nconst TextAlignLeftIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"none\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\",\n  strokeWidth: 2\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"8\",\n    x2: \"20\",\n    y2: \"8\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"12\",\n    x2: \"12\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"16\",\n    x2: \"16\",\n    y2: \"16\"\n  })]\n})), tablerIconProps);\nconst TextAlignCenterIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"none\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"8\",\n    x2: \"20\",\n    y2: \"8\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"8\",\n    y1: \"12\",\n    x2: \"16\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"6\",\n    y1: \"16\",\n    x2: \"18\",\n    y2: \"16\"\n  })]\n})), tablerIconProps);\nconst TextAlignRightIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"none\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"8\",\n    x2: \"20\",\n    y2: \"8\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"10\",\n    y1: \"12\",\n    x2: \"20\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"8\",\n    y1: \"16\",\n    x2: \"20\",\n    y2: \"16\"\n  })]\n})), tablerIconProps); // tabler-icons: layout-align-top\n\nconst TextAlignTopIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  theme\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\",\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"none\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"4\",\n    x2: \"20\",\n    y2: \"4\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n    x: \"9\",\n    y: \"8\",\n    width: \"6\",\n    height: \"12\",\n    rx: \"2\"\n  })]\n})), tablerIconProps)); // tabler-icons: layout-align-bottom\n\nconst TextAlignBottomIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  theme\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"2\",\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"none\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"20\",\n    x2: \"20\",\n    y2: \"20\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n    x: \"9\",\n    y: \"4\",\n    width: \"6\",\n    height: \"12\",\n    rx: \"2\"\n  })]\n})), tablerIconProps)); // tabler-icons: layout-align-middle\n\nconst TextAlignMiddleIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  theme\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\",\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"none\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"12\",\n    x2: \"9\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"15\",\n    y1: \"12\",\n    x2: \"20\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n    x: \"9\",\n    y: \"6\",\n    width: \"6\",\n    height: \"12\",\n    rx: \"2\"\n  })]\n})), tablerIconProps));\nconst publishIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z\",\n  fill: \"var(--icon-fill-color)\"\n}), {\n  width: 640,\n  height: 512\n});\nconst eraser = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z\"\n}));\nconst handIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: 1.25\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M14 5.5a1.5 1.5 0 0 1 3 0v6.5\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47\"\n  })]\n})), tablerIconProps);\nconst downloadIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M7 11l5 5l5 -5\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 4l0 12\"\n  })]\n}), tablerIconProps);\nconst copyIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2\"\n  })]\n}), tablerIconProps);\nconst helpIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 17l0 .01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4\"\n  })]\n}), tablerIconProps);\nconst playerPlayIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M7 4v16l13 -8z\"\n  })]\n}), tablerIconProps);\nconst playerStopFilledIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M17 4h-10a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3z\",\n    strokeWidth: \"0\",\n    fill: \"--icon-fill-color\"\n  })]\n}), tablerIconProps);\nconst tablerCheckIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M5 12l5 5l10 -10\"\n  })]\n}), tablerIconProps);\nconst alertTriangleIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 9v4\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 17h.01\"\n  })]\n}), tablerIconProps);\nconst eyeDropperIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: 1.25\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M11 7l6 6\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 16l11.7 -11.7a1 1 0 0 1 1.4 0l2.6 2.6a1 1 0 0 1 0 1.4l-11.7 11.7h-4v-4z\"\n  })]\n})), tablerIconProps);\nconst extraToolsIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: 1.5\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 3l-4 7h8z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z\"\n  })]\n})), tablerIconProps);\nconst frameToolIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: 1.5\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 7l16 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 17l16 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M7 4l0 16\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M17 4l0 16\"\n  })]\n})), tablerIconProps);\nconst mermaidLogoIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  fill: \"currentColor\",\n  d: \"M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z\"\n}));\nconst ArrowRightIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4.16602 10H15.8327\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12.5 13.3333L15.8333 10\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12.5 6.66666L15.8333 9.99999\"\n  })]\n})), modifiedTablerIconProps);\nconst laserPointerToolIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  fill: \"none\",\n  stroke: \"currentColor\",\n  strokeWidth: \"1.25\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\",\n  transform: \"rotate(90 10 10)\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    clipRule: \"evenodd\",\n    d: \"m9.644 13.69 7.774-7.773a2.357 2.357 0 0 0-3.334-3.334l-7.773 7.774L8 12l1.643 1.69Z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"m13.25 3.417 3.333 3.333M10 10l2-2M5 15l3-3M2.156 17.894l1-1M5.453 19.029l-.144-1.407M2.377 11.887l.866 1.118M8.354 17.273l-1.194-.758M.953 14.652l1.408.13\"\n  })]\n})), 20);\nconst MagicIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6 21l15 -15l-3 -3l-15 15l3 3\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M15 6l3 3\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M9 3a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M19 13a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2\"\n  })]\n})), tablerIconProps);\nconst OpenAIIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M11.217 19.384a3.501 3.501 0 0 0 6.783 -1.217v-5.167l-6 -3.35\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M5.214 15.014a3.501 3.501 0 0 0 4.446 5.266l4.34 -2.534v-6.946\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6 7.63c-1.391 -.236 -2.787 .395 -3.534 1.689a3.474 3.474 0 0 0 1.271 4.745l4.263 2.514l6 -3.348\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12.783 4.616a3.501 3.501 0 0 0 -6.783 1.217v5.067l6 3.45\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M18.786 8.986a3.501 3.501 0 0 0 -4.446 -5.266l-4.34 2.534v6.946\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M18 16.302c1.391 .236 2.787 -.395 3.534 -1.689a3.474 3.474 0 0 0 -1.271 -4.745l-4.308 -2.514l-5.955 3.42\"\n  })]\n})), tablerIconProps);\nconst fullscreenIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 8v-2a2 2 0 0 1 2 -2h2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 16v2a2 2 0 0 0 2 2h2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16 4h2a2 2 0 0 1 2 2v2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16 20h2a2 2 0 0 0 2 -2v-2\"\n  })]\n})), tablerIconProps);\nconst eyeIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"\n  })]\n})), tablerIconProps);\nconst eyeClosedIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10.585 10.587a2 2 0 0 0 2.829 2.828\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M3 3l18 18\"\n  })]\n})), tablerIconProps);\nconst brainIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M17.5 16a3.5 3.5 0 0 0 0 -7h-.5\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6.5 16a3.5 3.5 0 0 1 0 -7h.5\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10\"\n  })]\n})), tablerIconProps);\nconst searchIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: 1.5\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M21 21l-6 -6\"\n  })]\n})), tablerIconProps);\n\n//# sourceURL=webpack://ExcalidrawLib/./components/icons.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"AlignBottomIcon\": () => (/* binding */ AlignBottomIcon),\n/* harmony export */   \"AlignLeftIcon\": () => (/* binding */ AlignLeftIcon),\n/* harmony export */   \"AlignRightIcon\": () => (/* binding */ AlignRightIcon),\n/* harmony export */   \"AlignTopIcon\": () => (/* binding */ AlignTopIcon),\n/* harmony export */   \"ArrowIcon\": () => (/* binding */ ArrowIcon),\n/* harmony export */   \"ArrowRightIcon\": () => (/* binding */ ArrowRightIcon),\n/* harmony export */   \"ArrowheadArrowIcon\": () => (/* binding */ ArrowheadArrowIcon),\n/* harmony export */   \"ArrowheadBarIcon\": () => (/* binding */ ArrowheadBarIcon),\n/* harmony export */   \"ArrowheadCircleIcon\": () => (/* binding */ ArrowheadCircleIcon),\n/* harmony export */   \"ArrowheadCircleOutlineIcon\": () => (/* binding */ ArrowheadCircleOutlineIcon),\n/* harmony export */   \"ArrowheadDiamondIcon\": () => (/* binding */ ArrowheadDiamondIcon),\n/* harmony export */   \"ArrowheadDiamondOutlineIcon\": () => (/* binding */ ArrowheadDiamondOutlineIcon),\n/* harmony export */   \"ArrowheadNoneIcon\": () => (/* binding */ ArrowheadNoneIcon),\n/* harmony export */   \"ArrowheadTriangleIcon\": () => (/* binding */ ArrowheadTriangleIcon),\n/* harmony export */   \"ArrowheadTriangleOutlineIcon\": () => (/* binding */ ArrowheadTriangleOutlineIcon),\n/* harmony export */   \"BringForwardIcon\": () => (/* binding */ BringForwardIcon),\n/* harmony export */   \"BringToFrontIcon\": () => (/* binding */ BringToFrontIcon),\n/* harmony export */   \"CenterHorizontallyIcon\": () => (/* binding */ CenterHorizontallyIcon),\n/* harmony export */   \"CenterVerticallyIcon\": () => (/* binding */ CenterVerticallyIcon),\n/* harmony export */   \"CloseIcon\": () => (/* binding */ CloseIcon),\n/* harmony export */   \"DiamondIcon\": () => (/* binding */ DiamondIcon),\n/* harmony export */   \"DiscordIcon\": () => (/* binding */ DiscordIcon),\n/* harmony export */   \"DistributeHorizontallyIcon\": () => (/* binding */ DistributeHorizontallyIcon),\n/* harmony export */   \"DistributeVerticallyIcon\": () => (/* binding */ DistributeVerticallyIcon),\n/* harmony export */   \"DotsIcon\": () => (/* binding */ DotsIcon),\n/* harmony export */   \"DuplicateIcon\": () => (/* binding */ DuplicateIcon),\n/* harmony export */   \"EdgeRoundIcon\": () => (/* binding */ EdgeRoundIcon),\n/* harmony export */   \"EdgeSharpIcon\": () => (/* binding */ EdgeSharpIcon),\n/* harmony export */   \"EllipseIcon\": () => (/* binding */ EllipseIcon),\n/* harmony export */   \"EmbedIcon\": () => (/* binding */ EmbedIcon),\n/* harmony export */   \"EraserIcon\": () => (/* binding */ EraserIcon),\n/* harmony export */   \"ExcalLogo\": () => (/* binding */ ExcalLogo),\n/* harmony export */   \"ExportIcon\": () => (/* binding */ ExportIcon),\n/* harmony export */   \"ExportImageIcon\": () => (/* binding */ ExportImageIcon),\n/* harmony export */   \"ExternalLinkIcon\": () => (/* binding */ ExternalLinkIcon),\n/* harmony export */   \"FillCrossHatchIcon\": () => (/* binding */ FillCrossHatchIcon),\n/* harmony export */   \"FillHachureIcon\": () => (/* binding */ FillHachureIcon),\n/* harmony export */   \"FillSolidIcon\": () => (/* binding */ FillSolidIcon),\n/* harmony export */   \"FillZigZagIcon\": () => (/* binding */ FillZigZagIcon),\n/* harmony export */   \"FontFamilyCodeIcon\": () => (/* binding */ FontFamilyCodeIcon),\n/* harmony export */   \"FontFamilyLocalFontIcon\": () => (/* binding */ FontFamilyLocalFontIcon),\n/* harmony export */   \"FontFamilyNormalIcon\": () => (/* binding */ FontFamilyNormalIcon),\n/* harmony export */   \"FontSizeExtraLargeIcon\": () => (/* binding */ FontSizeExtraLargeIcon),\n/* harmony export */   \"FontSizeLargeIcon\": () => (/* binding */ FontSizeLargeIcon),\n/* harmony export */   \"FontSizeMediumIcon\": () => (/* binding */ FontSizeMediumIcon),\n/* harmony export */   \"FontSizeSmallIcon\": () => (/* binding */ FontSizeSmallIcon),\n/* harmony export */   \"FreedrawIcon\": () => (/* binding */ FreedrawIcon),\n/* harmony export */   \"GithubIcon\": () => (/* binding */ GithubIcon),\n/* harmony export */   \"GroupIcon\": () => (/* binding */ GroupIcon),\n/* harmony export */   \"HamburgerMenuIcon\": () => (/* binding */ HamburgerMenuIcon),\n/* harmony export */   \"HelpIcon\": () => (/* binding */ HelpIcon),\n/* harmony export */   \"ImageIcon\": () => (/* binding */ ImageIcon),\n/* harmony export */   \"LibraryIcon\": () => (/* binding */ LibraryIcon),\n/* harmony export */   \"LineIcon\": () => (/* binding */ LineIcon),\n/* harmony export */   \"LinkIcon\": () => (/* binding */ LinkIcon),\n/* harmony export */   \"LoadIcon\": () => (/* binding */ LoadIcon),\n/* harmony export */   \"LockedIcon\": () => (/* binding */ LockedIcon),\n/* harmony export */   \"MagicIcon\": () => (/* binding */ MagicIcon),\n/* harmony export */   \"MoonIcon\": () => (/* binding */ MoonIcon),\n/* harmony export */   \"OpenAIIcon\": () => (/* binding */ OpenAIIcon),\n/* harmony export */   \"PenModeIcon\": () => (/* binding */ PenModeIcon),\n/* harmony export */   \"PinIcon\": () => (/* binding */ PinIcon),\n/* harmony export */   \"PlusIcon\": () => (/* binding */ PlusIcon),\n/* harmony export */   \"PlusPromoIcon\": () => (/* binding */ PlusPromoIcon),\n/* harmony export */   \"RectangleIcon\": () => (/* binding */ RectangleIcon),\n/* harmony export */   \"RedoIcon\": () => (/* binding */ RedoIcon),\n/* harmony export */   \"SelectionIcon\": () => (/* binding */ SelectionIcon),\n/* harmony export */   \"SendBackwardIcon\": () => (/* binding */ SendBackwardIcon),\n/* harmony export */   \"SendToBackIcon\": () => (/* binding */ SendToBackIcon),\n/* harmony export */   \"SloppinessArchitectIcon\": () => (/* binding */ SloppinessArchitectIcon),\n/* harmony export */   \"SloppinessArtistIcon\": () => (/* binding */ SloppinessArtistIcon),\n/* harmony export */   \"SloppinessCartoonistIcon\": () => (/* binding */ SloppinessCartoonistIcon),\n/* harmony export */   \"StrokeStyleDashedIcon\": () => (/* binding */ StrokeStyleDashedIcon),\n/* harmony export */   \"StrokeStyleDottedIcon\": () => (/* binding */ StrokeStyleDottedIcon),\n/* harmony export */   \"StrokeStyleSolidIcon\": () => (/* binding */ StrokeStyleSolidIcon),\n/* harmony export */   \"StrokeWidthBaseIcon\": () => (/* binding */ StrokeWidthBaseIcon),\n/* harmony export */   \"StrokeWidthBoldIcon\": () => (/* binding */ StrokeWidthBoldIcon),\n/* harmony export */   \"StrokeWidthExtraBoldIcon\": () => (/* binding */ StrokeWidthExtraBoldIcon),\n/* harmony export */   \"StrokeWidthThinIcon\": () => (/* binding */ StrokeWidthThinIcon),\n/* harmony export */   \"SunIcon\": () => (/* binding */ SunIcon),\n/* harmony export */   \"TextAlignBottomIcon\": () => (/* binding */ TextAlignBottomIcon),\n/* harmony export */   \"TextAlignCenterIcon\": () => (/* binding */ TextAlignCenterIcon),\n/* harmony export */   \"TextAlignLeftIcon\": () => (/* binding */ TextAlignLeftIcon),\n/* harmony export */   \"TextAlignMiddleIcon\": () => (/* binding */ TextAlignMiddleIcon),\n/* harmony export */   \"TextAlignRightIcon\": () => (/* binding */ TextAlignRightIcon),\n/* harmony export */   \"TextAlignTopIcon\": () => (/* binding */ TextAlignTopIcon),\n/* harmony export */   \"TextIcon\": () => (/* binding */ TextIcon),\n/* harmony export */   \"TrashIcon\": () => (/* binding */ TrashIcon),\n/* harmony export */   \"UndoIcon\": () => (/* binding */ UndoIcon),\n/* harmony export */   \"UngroupIcon\": () => (/* binding */ UngroupIcon),\n/* harmony export */   \"UnlockedIcon\": () => (/* binding */ UnlockedIcon),\n/* harmony export */   \"WelcomeScreenHelpArrow\": () => (/* binding */ WelcomeScreenHelpArrow),\n/* harmony export */   \"WelcomeScreenMenuArrow\": () => (/* binding */ WelcomeScreenMenuArrow),\n/* harmony export */   \"WelcomeScreenTopToolbarArrow\": () => (/* binding */ WelcomeScreenTopToolbarArrow),\n/* harmony export */   \"XBrandIcon\": () => (/* binding */ XBrandIcon),\n/* harmony export */   \"ZoomInIcon\": () => (/* binding */ ZoomInIcon),\n/* harmony export */   \"ZoomOutIcon\": () => (/* binding */ ZoomOutIcon),\n/* harmony export */   \"alertTriangleIcon\": () => (/* binding */ alertTriangleIcon),\n/* harmony export */   \"back\": () => (/* binding */ back),\n/* harmony export */   \"brainIcon\": () => (/* binding */ brainIcon),\n/* harmony export */   \"checkIcon\": () => (/* binding */ checkIcon),\n/* harmony export */   \"clipboard\": () => (/* binding */ clipboard),\n/* harmony export */   \"clone\": () => (/* binding */ clone),\n/* harmony export */   \"copyIcon\": () => (/* binding */ copyIcon),\n/* harmony export */   \"createIcon\": () => (/* binding */ createIcon),\n/* harmony export */   \"done\": () => (/* binding */ done),\n/* harmony export */   \"downloadIcon\": () => (/* binding */ downloadIcon),\n/* harmony export */   \"eraser\": () => (/* binding */ eraser),\n/* harmony export */   \"exportToFileIcon\": () => (/* binding */ exportToFileIcon),\n/* harmony export */   \"extraToolsIcon\": () => (/* binding */ extraToolsIcon),\n/* harmony export */   \"eyeClosedIcon\": () => (/* binding */ eyeClosedIcon),\n/* harmony export */   \"eyeDropperIcon\": () => (/* binding */ eyeDropperIcon),\n/* harmony export */   \"eyeIcon\": () => (/* binding */ eyeIcon),\n/* harmony export */   \"file\": () => (/* binding */ file),\n/* harmony export */   \"frameToolIcon\": () => (/* binding */ frameToolIcon),\n/* harmony export */   \"fullscreenIcon\": () => (/* binding */ fullscreenIcon),\n/* harmony export */   \"handIcon\": () => (/* binding */ handIcon),\n/* harmony export */   \"helpIcon\": () => (/* binding */ helpIcon),\n/* harmony export */   \"iconFillColor\": () => (/* binding */ iconFillColor),\n/* harmony export */   \"laserPointerToolIcon\": () => (/* binding */ laserPointerToolIcon),\n/* harmony export */   \"menu\": () => (/* binding */ menu),\n/* harmony export */   \"mermaidLogoIcon\": () => (/* binding */ mermaidLogoIcon),\n/* harmony export */   \"palette\": () => (/* binding */ palette),\n/* harmony export */   \"playerPlayIcon\": () => (/* binding */ playerPlayIcon),\n/* harmony export */   \"playerStopFilledIcon\": () => (/* binding */ playerStopFilledIcon),\n/* harmony export */   \"publishIcon\": () => (/* binding */ publishIcon),\n/* harmony export */   \"questionCircle\": () => (/* binding */ questionCircle),\n/* harmony export */   \"resetZoom\": () => (/* binding */ resetZoom),\n/* harmony export */   \"save\": () => (/* binding */ save),\n/* harmony export */   \"saveAs\": () => (/* binding */ saveAs),\n/* harmony export */   \"searchIcon\": () => (/* binding */ searchIcon),\n/* harmony export */   \"share\": () => (/* binding */ share),\n/* harmony export */   \"shareIOS\": () => (/* binding */ shareIOS),\n/* harmony export */   \"shareWindows\": () => (/* binding */ shareWindows),\n/* harmony export */   \"shield\": () => (/* binding */ shield),\n/* harmony export */   \"start\": () => (/* binding */ start),\n/* harmony export */   \"stop\": () => (/* binding */ stop),\n/* harmony export */   \"tablerCheckIcon\": () => (/* binding */ tablerCheckIcon),\n/* harmony export */   \"usersIcon\": () => (/* binding */ usersIcon),\n/* harmony export */   \"zoomIn\": () => (/* binding */ zoomIn),\n/* harmony export */   \"zoomOut\": () => (/* binding */ zoomOut)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var open_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! open-color */ \"../../node_modules/open-color/open-color.json\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n  var t = {};\n\n  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\n\n //\n// All icons are imported from https://fontawesome.com/icons?d=gallery\n// Icons are under the license https://fontawesome.com/license\n//\n// Note: when adding new icons, review https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/RTL_Guidelines\n// to determine whether or not the icons should be mirrored in right-to-left languages.\n\n\n\n\n\nconst iconFillColor = theme => \"var(--icon-fill-color)\";\n\nconst handlerColor = theme => theme === _constants__WEBPACK_IMPORTED_MODULE_4__.THEME.LIGHT ? open_color__WEBPACK_IMPORTED_MODULE_2__.white : \"#1e1e1e\";\n\nconst createIcon = (d, opts = 512) => {\n  const _a = typeof opts === \"number\" ? {\n    width: opts\n  } : opts,\n        {\n    width = 512,\n    height = width,\n    mirror,\n    style\n  } = _a,\n        rest = __rest(_a, [\"width\", \"height\", \"mirror\", \"style\"]);\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"svg\", Object.assign({\n    \"aria-hidden\": \"true\",\n    focusable: \"false\",\n    role: \"img\",\n    viewBox: `0 0 ${width} ${height}`,\n    className: (0,clsx__WEBPACK_IMPORTED_MODULE_3__[\"default\"])({\n      \"rtl-mirror\": mirror\n    }),\n    style: style\n  }, rest, {\n    children: typeof d === \"string\" ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      fill: \"var(--icon-fill-color)\",\n      d: d\n    }) : d\n  }));\n};\nconst tablerIconProps = {\n  width: 24,\n  height: 24,\n  fill: \"none\",\n  strokeWidth: 2,\n  stroke: \"var(--icon-fill-color)\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n};\nconst modifiedTablerIconProps = {\n  width: 20,\n  height: 20,\n  fill: \"none\",\n  stroke: \"var(--icon-fill-color)\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}; // -----------------------------------------------------------------------------\n// tabler-icons: present\n\nconst PlusPromoIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n    x: 3,\n    y: 8,\n    width: 18,\n    height: 4,\n    rx: 1\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: 12,\n    y1: 8,\n    x2: 12,\n    y2: 21\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5\"\n  })]\n})), tablerIconProps); // tabler-icons: book\n\nconst LibraryIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"3\",\n    y1: \"6\",\n    x2: \"3\",\n    y2: \"19\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"12\",\n    y1: \"6\",\n    x2: \"12\",\n    y2: \"19\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"21\",\n    y1: \"6\",\n    x2: \"21\",\n    y2: \"19\"\n  })]\n})), tablerIconProps); // tabler-icons: plus\n\nconst PlusIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"svg\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"12\",\n    y1: \"5\",\n    x2: \"12\",\n    y2: \"19\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"5\",\n    y1: \"12\",\n    x2: \"19\",\n    y2: \"12\"\n  })]\n})), tablerIconProps); // tabler-icons: dots-vertical\n\nconst DotsIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    cx: \"12\",\n    cy: \"12\",\n    r: \"1\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    cx: \"12\",\n    cy: \"19\",\n    r: \"1\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    cx: \"12\",\n    cy: \"5\",\n    r: \"1\"\n  })]\n})), tablerIconProps); // tabler-icons: pinned\n\nconst PinIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"svg\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M9 4v6l-2 4v2h10v-2l-2 -4v-6\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"12\",\n    y1: \"16\",\n    x2: \"12\",\n    y2: \"21\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"8\",\n    y1: \"4\",\n    x2: \"16\",\n    y2: \"4\"\n  })]\n})), tablerIconProps); // tabler-icons: lock-open (via Figma)\n\nconst UnlockedIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M13.542 8.542H6.458a2.5 2.5 0 0 0-2.5 2.5v3.75a2.5 2.5 0 0 0 2.5 2.5h7.084a2.5 2.5 0 0 0 2.5-2.5v-3.75a2.5 2.5 0 0 0-2.5-2.5Z\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: \"1.25\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 13.958a1.042 1.042 0 1 0 0-2.083 1.042 1.042 0 0 0 0 2.083Z\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: \"1.25\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"mask\", Object.assign({\n    id: \"UnlockedIcon\",\n    style: {\n      maskType: \"alpha\"\n    },\n    maskUnits: \"userSpaceOnUse\",\n    x: 6,\n    y: 1,\n    width: 9,\n    height: 9\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      stroke: \"none\",\n      d: \"M6.399 9.561V5.175c0-.93.401-1.823 1.116-2.48a3.981 3.981 0 0 1 2.693-1.028c1.01 0 1.98.37 2.694 1.027.715.658 1.116 1.55 1.116 2.481\",\n      fill: \"#fff\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    mask: \"url(#UnlockedIcon)\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      stroke: \"none\",\n      d: \"M5.149 9.561v1.25h2.5v-1.25h-2.5Zm5.06-7.894V.417v1.25Zm2.559 3.508v1.25h2.5v-1.25h-2.5ZM7.648 8.51V5.175h-2.5V8.51h2.5Zm0-3.334c0-.564.243-1.128.713-1.561L6.668 1.775c-.959.883-1.52 2.104-1.52 3.4h2.5Zm.713-1.561a2.732 2.732 0 0 1 1.847-.697v-2.5c-1.31 0-2.585.478-3.54 1.358L8.36 3.614Zm1.847-.697c.71 0 1.374.26 1.847.697l1.694-1.839a5.231 5.231 0 0 0-3.54-1.358v2.5Zm1.847.697c.47.433.713.997.713 1.561h2.5c0-1.296-.56-2.517-1.52-3.4l-1.693 1.839Z\",\n      fill: \"var(--icon-fill-color)\" //zsviczian\n\n    })\n  }))]\n}), modifiedTablerIconProps); // tabler-icons: lock (via Figma)\n\nconst LockedIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M13.542 8.542H6.458a2.5 2.5 0 0 0-2.5 2.5v3.75a2.5 2.5 0 0 0 2.5 2.5h7.084a2.5 2.5 0 0 0 2.5-2.5v-3.75a2.5 2.5 0 0 0-2.5-2.5Z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 13.958a1.042 1.042 0 1 0 0-2.083 1.042 1.042 0 0 0 0 2.083Z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6.667 8.333V5.417C6.667 3.806 8.159 2.5 10 2.5c1.841 0 3.333 1.306 3.333 2.917v2.916\"\n  })]\n})), modifiedTablerIconProps); // custom\n\nconst WelcomeScreenMenuArrow = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M38.5 83.5c-14-2-17.833-10.473-21-22.5C14.333 48.984 12 22 12 12.5\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"m12.005 10.478 7.905 14.423L6 25.75l6.005-15.273Z\",\n    fill: \"var(--icon-fill-color)\" //zsviczian\n\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12.005 10.478c1.92 3.495 3.838 7 7.905 14.423m-7.905-14.423c3.11 5.683 6.23 11.368 7.905 14.423m0 0c-3.68.226-7.35.455-13.91.85m13.91-.85c-5.279.33-10.566.647-13.91.85m0 0c1.936-4.931 3.882-9.86 6.005-15.273M6 25.75c2.069-5.257 4.135-10.505 6.005-15.272\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  })]\n}), {\n  width: 41,\n  height: 94,\n  fill: \"none\"\n}); // custom\n\nconst WelcomeScreenHelpArrow = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M18.026 1.232c-5.268 13.125-5.548 33.555 3.285 42.311 8.823 8.75 33.31 12.304 42.422 13.523\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"m72.181 59.247-13.058-10-2.948 13.62 16.006-3.62Z\",\n    fill: \"var(--icon-fill-color)\" //zsviczian\n\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M72.181 59.247c-3.163-2.429-6.337-4.856-13.058-10m13.058 10c-5.145-3.936-10.292-7.882-13.058-10m0 0c-.78 3.603-1.563 7.196-2.948 13.62m2.948-13.62c-1.126 5.168-2.24 10.346-2.948 13.62m0 0c5.168-1.166 10.334-2.343 16.006-3.62m-16.006 3.62c5.51-1.248 11.01-2.495 16.006-3.62\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  })]\n}), {\n  width: 85,\n  height: 71,\n  fill: \"none\"\n}); // custom\n\nconst WelcomeScreenTopToolbarArrow = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M1 77c14-2 31.833-11.973 35-24 3.167-12.016-6-35-9.5-43.5\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"m24.165 1.093-2.132 16.309 13.27-4.258-11.138-12.05Z\",\n    fill: \"var(--icon-fill-color)\" //zsviczian\n\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M24.165 1.093c-.522 3.953-1.037 7.916-2.132 16.309m2.131-16.309c-.835 6.424-1.68 12.854-2.13 16.308m0 0c3.51-1.125 7.013-2.243 13.27-4.257m-13.27 4.257c5.038-1.608 10.08-3.232 13.27-4.257m0 0c-3.595-3.892-7.197-7.777-11.14-12.05m11.14 12.05c-3.837-4.148-7.667-8.287-11.14-12.05\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  })]\n}), {\n  width: 38,\n  height: 78,\n  fill: \"none\"\n}); // custom\n\nconst ExcalLogo = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n  fill: \"--icon-fill-color\"\n}, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M39.9 32.889a.326.326 0 0 0-.279-.056c-2.094-3.083-4.774-6-7.343-8.833l-.419-.472a.212.212 0 0 0-.056-.139.586.586 0 0 0-.167-.111l-.084-.083-.056-.056c-.084-.167-.28-.278-.475-.167-.782.39-1.507.973-2.206 1.528-.92.722-1.842 1.445-2.708 2.25a8.405 8.405 0 0 0-.977 1.028c-.14.194-.028.361.14.444-.615.611-1.23 1.223-1.843 1.861a.315.315 0 0 0-.084.223c0 .083.056.166.111.194l1.09.833v.028c1.535 1.528 4.244 3.611 7.12 5.861.418.334.865.667 1.284 1 .195.223.39.473.558.695.084.11.28.139.391.055.056.056.14.111.196.167a.398.398 0 0 0 .167.056.255.255 0 0 0 .224-.111.394.394 0 0 0 .055-.167c.029 0 .028.028.056.028a.318.318 0 0 0 .224-.084l5.082-5.528a.309.309 0 0 0 0-.444Zm-14.63-1.917a.485.485 0 0 0 .111.14c.586.5 1.2 1 1.843 1.555l-2.569-1.945-.251-.166c-.056-.028-.112-.084-.168-.111l-.195-.167.056-.056.055-.055.112-.111c.866-.861 2.346-2.306 3.1-3.028-.81.805-2.43 3.167-2.095 3.944Zm8.767 6.89-2.122-1.612a44.713 44.713 0 0 0-2.625-2.5c1.145.861 2.122 1.611 2.262 1.75 1.117.972 1.06.806 1.815 1.445l.921.666a1.06 1.06 0 0 1-.251.25Zm.558.416-.056-.028c.084-.055.168-.111.252-.194l-.196.222ZM1.089 5.75c.055.361.14.722.195 1.056.335 1.833.67 3.5 1.284 4.75l.252.944c.084.361.223.806.363.917 1.424 1.25 3.602 3.11 5.947 4.889a.295.295 0 0 0 .363 0s0 .027.028.027a.254.254 0 0 0 .196.084.318.318 0 0 0 .223-.084c2.988-3.305 5.221-6.027 6.813-8.305.112-.111.14-.278.14-.417.111-.111.195-.25.307-.333.111-.111.111-.306 0-.39l-.028-.027c0-.055-.028-.139-.084-.167-.698-.666-1.2-1.138-1.731-1.638-.922-.862-1.871-1.75-3.881-3.75l-.028-.028c-.028-.028-.056-.056-.112-.056-.558-.194-1.703-.389-3.127-.639C6.087 2.223 3.21 1.723.614.944c0 0-.168 0-.196.028l-.083.084c-.028.027-.056.055-.224.11h.056-.056c.028.167.028.278.084.473 0 .055.112.5.112.555l.782 3.556Zm15.496 3.278-.335-.334c.084.112.196.195.335.334Zm-3.546 4.666-.056.056c0-.028.028-.056.056-.056Zm-2.038-10c.168.167.866.834 1.033.973-.726-.334-2.54-1.167-3.379-1.445.838.167 1.983.334 2.346.472ZM1.424 2.306c.419.722.754 3.222 1.089 5.666-.196-.778-.335-1.555-.503-2.278-.251-1.277-.503-2.416-.838-3.416.056 0 .14 0 .252.028Zm-.168-.584c-.112 0-.223-.028-.307-.028 0-.027 0-.055-.028-.055.14 0 .223.028.335.083Zm-1.089.222c0-.027 0-.027 0 0ZM39.453 1.333c.028-.11-.558-.61-.363-.639.42-.027.42-.666 0-.666-.558.028-1.144.166-1.675.25-.977.194-1.982.389-2.96.61-2.205.473-4.383.973-6.561 1.557-.67.194-1.424.333-2.066.666-.224.111-.196.333-.084.472-.056.028-.084.028-.14.056-.195.028-.363.056-.558.083-.168.028-.252.167-.224.334 0 .027.028.083.028.11-1.173 1.556-2.485 3.195-3.909 4.945-1.396 1.611-2.876 3.306-4.356 5.056-4.719 5.5-10.052 11.75-15.943 17.25a.268.268 0 0 0 0 .389c.028.027.056.055.084.055-.084.084-.168.14-.252.222-.056.056-.084.111-.084.167a.605.605 0 0 0-.111.139c-.112.111-.112.305.028.389.111.11.307.11.39-.028.029-.028.029-.056.056-.056a.44.44 0 0 1 .615 0c.335.362.67.723.977 1.028l-.698-.583c-.112-.111-.307-.083-.39.028-.113.11-.085.305.027.389l7.427 6.194c.056.056.112.056.196.056s.14-.028.195-.084l.168-.166c.028.027.083.027.111.027.084 0 .14-.027.196-.083 10.052-10.055 18.15-17.639 27.42-24.417.083-.055.111-.166.111-.25.112 0 .196-.083.251-.194 1.704-5.194 2.039-9.806 2.15-12.083v-.028c0-.028.028-.056.028-.083.028-.056.028-.084.028-.084a1.626 1.626 0 0 0-.111-1.028ZM21.472 9.5c.446-.5.893-1.028 1.34-1.5-2.876 3.778-7.65 9.583-14.408 16.5 4.607-5.083 9.242-10.333 13.068-15ZM5.193 35.778h.084-.084Zm3.462 3.194c-.027-.028-.027-.028 0-.028v.028Zm4.16-3.583c.224-.25.448-.472.699-.722 0 0 0 .027.028.027-.252.223-.475.445-.726.695Zm1.146-1.111c.14-.14.279-.334.446-.5l.028-.028c1.648-1.694 3.351-3.389 5.082-5.111l.028-.028c.419-.333.921-.694 1.368-1.028a379.003 379.003 0 0 0-6.952 6.695ZM24.794 6.472c-.921 1.195-1.954 2.778-2.82 4.028-2.736 3.944-11.532 13.583-11.727 13.75a1976.983 1976.983 0 0 1-8.042 7.639l-.167.167c-.14-.167-.14-.417.028-.556C14.49 19.861 22.03 10.167 25.074 5.917c-.084.194-.14.36-.28.555Zm4.83 5.695c-1.116-.64-1.646-1.64-1.34-2.611l.084-.334c.028-.083.084-.194.14-.277.307-.5.754-.917 1.257-1.167.027 0 .055 0 .083-.028-.028-.056-.028-.139-.028-.222.028-.167.14-.278.335-.278.335 0 1.369.306 1.76.639.111.083.223.194.335.305.14.167.363.445.474.667.056.028.112.306.196.445.056.222.111.472.084.694-.028.028 0 .194-.028.194a2.668 2.668 0 0 1-.363 1.028c-.028.028-.028.056-.056.084l-.028.027c-.14.223-.335.417-.53.556-.643.444-1.369.583-2.095.389 0 0-.195-.084-.28-.111Zm8.154-.834a39.098 39.098 0 0 1-.893 3.167c0 .028-.028.083 0 .111-.056 0-.084.028-.14.056-2.206 1.61-4.356 3.305-6.506 5.028 1.843-1.64 3.686-3.306 5.613-4.945.558-.5.949-1.139 1.06-1.861l.28-1.667v-.055c.14-.334.67-.195.586.166Z\",\n    fill: \"--icon-fill-color\"\n  })\n})), {\n  width: 40,\n  height: 40,\n  fill: \"none\"\n}); // custom\n\nconst SelectionIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6 6l4.153 11.793a0.365 .365 0 0 0 .331 .207a0.366 .366 0 0 0 .332 -.207l2.184 -4.793l4.787 -1.994a0.355 .355 0 0 0 .213 -.323a0.355 .355 0 0 0 -.213 -.323l-11.787 -4.36z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M13.5 13.5l4.5 4.5\"\n  })]\n})), {\n  fill: \"none\",\n  width: 22,\n  height: 22,\n  strokeWidth: 1.25\n}); // tabler-icons: square\n\nconst RectangleIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n    x: \"4\",\n    y: \"4\",\n    width: \"16\",\n    height: \"16\",\n    rx: \"2\"\n  })]\n})), tablerIconProps); // tabler-icons: square-rotated\n\nconst DiamondIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10.5 20.4l-6.9 -6.9c-.781 -.781 -.781 -2.219 0 -3l6.9 -6.9c.781 -.781 2.219 -.781 3 0l6.9 6.9c.781 .781 .781 2.219 0 3l-6.9 6.9c-.781 .781 -2.219 .781 -3 0z\"\n  })]\n})), tablerIconProps); // tabler-icons: circle\n\nconst EllipseIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    cx: \"12\",\n    cy: \"12\",\n    r: \"9\"\n  })]\n})), tablerIconProps); // tabler-icons: arrow-narrow-right\n\nconst ArrowIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"5\",\n    y1: \"12\",\n    x2: \"19\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"15\",\n    y1: \"16\",\n    x2: \"19\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"15\",\n    y1: \"8\",\n    x2: \"19\",\n    y2: \"12\"\n  })]\n})), tablerIconProps); // custom?\n\nconst LineIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M4.167 10h11.666\",\n  strokeWidth: \"1.5\"\n}), modifiedTablerIconProps);\nconst PenModeIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M20 17v-12c0 -1.121 -.879 -2 -2 -2s-2 .879 -2 2v12l2 2l2 -2z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16 7h4\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M18 19h-13a2 2 0 1 1 0 -4h4a2 2 0 1 0 0 -4h-3\"\n  })]\n})), tablerIconProps); // modified tabler-icons: pencil\n\nconst FreedrawIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    clipRule: \"evenodd\",\n    d: \"m7.643 15.69 7.774-7.773a2.357 2.357 0 1 0-3.334-3.334L4.31 12.357a3.333 3.333 0 0 0-.977 2.357v1.953h1.953c.884 0 1.732-.352 2.357-.977Z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"m11.25 5.417 3.333 3.333\"\n  })]\n})), modifiedTablerIconProps); // tabler-icons: typography\n\nconst TextIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"20\",\n    x2: \"7\",\n    y2: \"20\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"14\",\n    y1: \"20\",\n    x2: \"21\",\n    y2: \"20\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"6.9\",\n    y1: \"15\",\n    x2: \"13.8\",\n    y2: \"15\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"10.2\",\n    y1: \"6.3\",\n    x2: \"16\",\n    y2: \"20\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"polyline\", {\n    points: \"5 20 11 4 13 4 20 20\"\n  })]\n})), tablerIconProps); // modified tabler-icons: photo\n\nconst ImageIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12.5 6.667h.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4.91 2.625h10.18a2.284 2.284 0 0 1 2.285 2.284v10.182a2.284 2.284 0 0 1-2.284 2.284H4.909a2.284 2.284 0 0 1-2.284-2.284V4.909a2.284 2.284 0 0 1 2.284-2.284Z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"m3.333 12.5 3.334-3.333c.773-.745 1.726-.745 2.5 0l4.166 4.166\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"m11.667 11.667.833-.834c.774-.744 1.726-.744 2.5 0l1.667 1.667\"\n  })]\n})), modifiedTablerIconProps); // tabler-icons: eraser\n\nconst EraserIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M19 20h-10.5l-4.21 -4.3a1 1 0 0 1 0 -1.41l10 -10a1 1 0 0 1 1.41 0l5 5a1 1 0 0 1 0 1.41l-9.2 9.3\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M18 13.3l-6.3 -6.3\"\n  })]\n})), tablerIconProps);\nconst ZoomInIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  strokeWidth: \"1.25\",\n  d: \"M10 4.167v11.666M4.167 10h11.666\"\n}), modifiedTablerIconProps);\nconst ZoomOutIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M5 10h10\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst TrashIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  strokeWidth: \"1.25\",\n  d: \"M3.333 5.833h13.334M8.333 9.167v5M11.667 9.167v5M4.167 5.833l.833 10c0 .92.746 1.667 1.667 1.667h6.666c.92 0 1.667-.746 1.667-1.667l.833-10M7.5 5.833v-2.5c0-.46.373-.833.833-.833h3.334c.46 0 .833.373.833.833v2.5\"\n}), modifiedTablerIconProps);\nconst EmbedIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"polyline\", {\n    points: \"12 16 18 10 12 4\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"polyline\", {\n    points: \"8 4 2 10 8 16\"\n  })]\n})), modifiedTablerIconProps);\nconst DuplicateIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M14.375 6.458H8.958a2.5 2.5 0 0 0-2.5 2.5v5.417a2.5 2.5 0 0 0 2.5 2.5h5.417a2.5 2.5 0 0 0 2.5-2.5V8.958a2.5 2.5 0 0 0-2.5-2.5Z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    clipRule: \"evenodd\",\n    d: \"M11.667 3.125c.517 0 .986.21 1.325.55.34.338.55.807.55 1.325v1.458H8.333c-.485 0-.927.185-1.26.487-.343.312-.57.75-.609 1.24l-.005 5.357H5a1.87 1.87 0 0 1-1.326-.55 1.87 1.87 0 0 1-.549-1.325V5c0-.518.21-.987.55-1.326.338-.34.807-.549 1.325-.549h6.667Z\"\n  })]\n})), modifiedTablerIconProps);\nconst MoonIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  clipRule: \"evenodd\",\n  d: \"M10 2.5h.328a6.25 6.25 0 0 0 6.6 10.372A7.5 7.5 0 1 1 10 2.493V2.5Z\",\n  stroke: \"var(--icon-fill-color)\" //zsviczian\n\n}), modifiedTablerIconProps);\nconst SunIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\" //zsviczian\n  ,\n  strokeWidth: \"1.25\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM10 4.167V2.5M14.167 5.833l1.166-1.166M15.833 10H17.5M14.167 14.167l1.166 1.166M10 15.833V17.5M5.833 14.167l-1.166 1.166M5 10H3.333M5.833 5.833 4.667 4.667\"\n  })\n})), modifiedTablerIconProps);\nconst HamburgerMenuIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"6\",\n    x2: \"20\",\n    y2: \"6\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"12\",\n    x2: \"20\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"18\",\n    x2: \"20\",\n    y2: \"18\"\n  })]\n})), tablerIconProps);\nconst ExportIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  strokeWidth: \"1.25\",\n  d: \"M3.333 14.167v1.666c0 .92.747 1.667 1.667 1.667h10c.92 0 1.667-.746 1.667-1.667v-1.666M5.833 9.167 10 13.333l4.167-4.166M10 3.333v10\"\n}), modifiedTablerIconProps);\nconst HelpIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    cx: \"12\",\n    cy: \"12\",\n    r: \"9\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"12\",\n    y1: \"17\",\n    x2: \"12\",\n    y2: \"17.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4\"\n  })]\n})), tablerIconProps);\nconst ExternalLinkIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  strokeWidth: \"1.25\",\n  d: \"M9.167 5.833H5.833c-1.254 0-2.5 1.282-2.5 2.5v5.834c0 1.283 1.252 2.5 2.5 2.5h5.834c1.251 0 2.5-1.25 2.5-2.5v-3.334M8.333 11.667l8.334-8.334M12.5 3.333h4.167V7.5\"\n}), modifiedTablerIconProps);\nconst GithubIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M7.5 15.833c-3.583 1.167-3.583-2.083-5-2.5m10 4.167v-2.917c0-.833.083-1.166-.417-1.666 2.334-.25 4.584-1.167 4.584-5a3.833 3.833 0 0 0-1.084-2.667 3.5 3.5 0 0 0-.083-2.667s-.917-.25-2.917 1.084a10.25 10.25 0 0 0-5.166 0C5.417 2.333 4.5 2.583 4.5 2.583a3.5 3.5 0 0 0-.083 2.667 3.833 3.833 0 0 0-1.084 2.667c0 3.833 2.25 4.75 4.584 5-.5.5-.5 1-.417 1.666V17.5\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst DiscordIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M7.5 10.833a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666ZM12.5 10.833a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666ZM6.25 6.25c2.917-.833 4.583-.833 7.5 0M5.833 13.75c2.917.833 5.417.833 8.334 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12.917 14.167c0 .833 1.25 2.5 1.666 2.5 1.25 0 2.361-1.39 2.917-2.5.556-1.39.417-4.861-1.25-9.584-1.214-.846-2.5-1.116-3.75-1.25l-.833 2.084M7.083 14.167c0 .833-1.13 2.5-1.526 2.5-1.191 0-2.249-1.39-2.778-2.5-.529-1.39-.397-4.861 1.19-9.584 1.157-.846 2.318-1.116 3.531-1.25l.833 2.084\"\n  })]\n})), modifiedTablerIconProps);\nconst XBrandIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 4l11.733 16h4.267l-11.733 -16z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772\"\n  })]\n})), tablerIconProps);\nconst checkIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"polyline\", {\n  fill: \"none\",\n  stroke: \"var(--icon-fill-color)\",\n  points: \"20 6 9 17 4 12\"\n}), {\n  width: 24,\n  height: 24\n});\nconst LinkIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M8.333 11.667a2.917 2.917 0 0 0 4.167 0l3.333-3.334a2.946 2.946 0 1 0-4.166-4.166l-.417.416\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M11.667 8.333a2.917 2.917 0 0 0-4.167 0l-3.333 3.334a2.946 2.946 0 0 0 4.166 4.166l.417-.416\"\n  })]\n})), modifiedTablerIconProps);\nconst save = createIcon(\"M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z\", {\n  width: 448,\n  height: 512\n});\nconst saveAs = createIcon(\"M252 54L203 8a28 27 0 00-20-8H28C12 0 0 12 0 27v195c0 15 12 26 28 26h204c15 0 28-11 28-26V73a28 27 0 00-8-19zM130 213c-21 0-37-16-37-36 0-19 16-35 37-35 20 0 37 16 37 35 0 20-17 36-37 36zm56-169v56c0 4-4 6-7 6H44c-4 0-7-2-7-6V42c0-4 3-7 7-7h133l4 2 3 2a7 7 0 012 5z M296 201l87 95-188 205-78 9c-10 1-19-8-18-20l9-84zm141-14l-41-44a31 31 0 00-46 0l-38 41 87 95 38-42c13-14 13-36 0-50z\", {\n  width: 448,\n  height: 512\n}); // tabler-icon: folder\n\nconst LoadIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"m9.257 6.351.183.183H15.819c.34 0 .727.182 1.051.506.323.323.505.708.505 1.05v5.819c0 .316-.183.7-.52 1.035-.337.338-.723.522-1.037.522H4.182c-.352 0-.74-.181-1.058-.5-.318-.318-.499-.705-.499-1.057V5.182c0-.351.181-.736.5-1.054.32-.321.71-.503 1.057-.503H6.53l2.726 2.726Z\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst clipboard = createIcon(\"M384 112v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h80c0-35.29 28.71-64 64-64s64 28.71 64 64h80c26.51 0 48 21.49 48 48zM192 40c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24m96 114v-20a6 6 0 0 0-6-6H102a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h180a6 6 0 0 0 6-6z\", {\n  width: 384,\n  height: 512\n});\nconst palette = createIcon(\"M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z\");\nconst ExportImageIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M15 8h.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 20h-5a3 3 0 0 1 -3 -3v-10a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v5\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 15l4 -4c.928 -.893 2.072 -.893 3 0l4 4\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M14 14l1 -1c.617 -.593 1.328 -.793 2.009 -.598\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M19 16v6\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M22 19l-3 3l-3 -3\"\n  })]\n})), tablerIconProps);\nconst exportToFileIcon = createIcon(\"M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z\", {\n  width: 512,\n  height: 512\n});\nconst zoomIn = createIcon(\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\", {\n  width: 448,\n  height: 512\n});\nconst zoomOut = createIcon(\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\", {\n  width: 448,\n  height: 512\n});\nconst done = createIcon(\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\");\nconst menu = createIcon(\"M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z\");\nconst UndoIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M7.5 10.833 4.167 7.5 7.5 4.167M4.167 7.5h9.166a3.333 3.333 0 0 1 0 6.667H12.5\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst RedoIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M12.5 10.833 15.833 7.5 12.5 4.167M15.833 7.5H6.667a3.333 3.333 0 1 0 0 6.667H7.5\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst questionCircle = createIcon(\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z\", {\n  mirror: true\n});\nconst share = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M5 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM15 7.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM15 17.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM7.25 8.917l5.5-2.834M7.25 11.083l5.5 2.834\",\n  strokeWidth: \"1.5\"\n}), modifiedTablerIconProps);\nconst shareIOS = createIcon(\"M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z\", {\n  width: 24,\n  height: 24\n});\nconst shareWindows = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    fill: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    d: \"M40 5.6v6.1l-4.1.7c-8.9 1.4-16.5 6.9-20.6 15C13 32 10.9 43 12.4 43c.4 0 2.4-1.3 4.4-3 5-3.9 12.1-7 18.2-7.7l5-.6v12.8l11.2-11.3L62.5 22 51.2 10.8 40-.5v6.1zm10.2 22.6L44 34.5v-6.8l-6.9.6c-3.9.3-9.8 1.7-13.2 3.1-3.5 1.4-6.5 2.4-6.7 2.2-.9-1 3-7.5 6.4-10.8C28 18.6 34.4 16 40.1 16c3.7 0 3.9-.1 3.9-3.2V9.5l6.2 6.3 6.3 6.2-6.3 6.2z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    fill: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    d: \"M0 36v20h48v-6.2c0-6 0-6.1-2-4.3-1.1 1-2 2.9-2 4.2V52H4V34c0-17.3-.1-18-2-18s-2 .7-2 20z\"\n  })]\n}), {\n  width: 64,\n  height: 64\n}); // Icon imported form Storybook\n// Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE\n\nconst resetZoom = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  stroke: \"var(--icon-fill-color)\" //zsviczian\n  ,\n  strokeWidth: \"40\",\n  fill: \"var(--icon-fill-color)\" //zsviczian\n  ,\n  d: \"M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z\"\n}), {\n  width: 1024\n});\nconst BringForwardIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: \"1.25\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M13.889 4.167H8.333c-.767 0-1.389.622-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.767-.622-1.39-1.39-1.39Z\",\n      fill: \"var(--icon-fill-color)\" //zsviczian\n\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M12.5 12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst SendBackwardIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\" //zsviczian\n    ,\n    strokeWidth: \"1.25\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      fillRule: \"evenodd\",\n      clipRule: \"evenodd\",\n      d: \"M6.944 12.5H12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388\",\n      fill: \"var(--icon-fill-color)\" //zsviczian\n\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M13.889 4.167H8.333c-.767 0-1.389.621-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.768-.622-1.39-1.39-1.39Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst BringToFrontIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M8.775 6.458h2.45a2.316 2.316 0 0 1 2.317 2.316v2.452a2.316 2.316 0 0 1-2.316 2.316H8.774a2.316 2.316 0 0 1-2.317-2.316V8.774a2.316 2.316 0 0 1 2.317-2.316Z\",\n      fill: \"var(--icon-fill-color)\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316ZM12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst SendToBackIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"mask\", Object.assign({\n      id: \"SendToBackIcon\",\n      fill: \"#fff\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fillRule: \"evenodd\",\n        clipRule: \"evenodd\",\n        d: \"M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z\"\n      })\n    })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      fillRule: \"evenodd\",\n      clipRule: \"evenodd\",\n      d: \"M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z\",\n      fill: \"var(--icon-fill-color)\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M9.167 5.833h1.25v-1.25h-1.25v1.25Zm5 5h1.25v-1.25h-1.25v1.25Zm-3.334 3.334h-1.25v1.25h1.25v-1.25Zm-5-5h-1.25v1.25h1.25v-1.25Zm2.084-3.334v2.06h2.5v-2.06h-2.5Zm0 2.06a4.191 4.191 0 0 0 4.19 4.19v-2.5a1.691 1.691 0 0 1-1.69-1.69h-2.5Zm4.19 4.19h2.06v-2.5h-2.06v2.5Zm.81-1.25v.393h2.5v-.393h-2.5Zm0 .393c0 .933-.758 1.69-1.691 1.69v2.5a4.191 4.191 0 0 0 4.19-4.19h-2.5Zm-1.691 1.69h-.393v2.5h.393v-2.5Zm.857 1.25v-2.058h-2.5v2.059h2.5Zm0-2.058a4.191 4.191 0 0 0-4.19-4.191v2.5c.933 0 1.69.757 1.69 1.69h2.5Zm-4.19-4.191h-2.06v2.5h2.06v-2.5Zm-.81 1.25v-.393h-2.5v.393h2.5Zm0-.393c0-.934.758-1.69 1.692-1.69v-2.5a4.191 4.191 0 0 0-4.192 4.19h2.5Zm1.692-1.69h.392v-2.5h-.392v2.5Z\",\n      fill: \"var(--icon-fill-color)\",\n      mask: \"url(#SendToBackIcon)\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps); //\n// Align action icons created from scratch to match those of z-index actions\n// Note: vertical align icons are flipped so the larger item is always the\n// first one the user sees. Horizontal align icons should not be flipped since\n// that would make them lie about their function.\n//\n\nconst AlignTopIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M3.333 3.333h13.334\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M13.542 6.458h-.417c-.92 0-1.667.747-1.667 1.667v7.083c0 .92.746 1.667 1.667 1.667h.417c.92 0 1.666-.746 1.666-1.667V8.125c0-.92-.746-1.667-1.666-1.667ZM6.875 6.458h-.417c-.92 0-1.666.747-1.666 1.667v3.75c0 .92.746 1.667 1.666 1.667h.417c.92 0 1.667-.746 1.667-1.667v-3.75c0-.92-.747-1.667-1.667-1.667Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst AlignBottomIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M3.333 16.667h13.334\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M6.875 3.125h-.417c-.92 0-1.666.746-1.666 1.667v7.083c0 .92.746 1.667 1.666 1.667h.417c.92 0 1.667-.746 1.667-1.667V4.792c0-.92-.747-1.667-1.667-1.667ZM13.542 5.817h-.417c-.92 0-1.667.747-1.667 1.667v4.391c0 .92.746 1.667 1.667 1.667h.417c.92 0 1.666-.746 1.666-1.667V7.484c0-.92-.746-1.667-1.666-1.667Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst AlignLeftIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M3.333 3.333v13.334\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M15.208 4.792H8.125c-.92 0-1.667.746-1.667 1.666v.417c0 .92.747 1.667 1.667 1.667h7.083c.92 0 1.667-.747 1.667-1.667v-.417c0-.92-.746-1.666-1.667-1.666ZM12.516 11.458H8.125c-.92 0-1.667.746-1.667 1.667v.417c0 .92.747 1.666 1.667 1.666h4.391c.92 0 1.667-.746 1.667-1.666v-.417c0-.92-.746-1.667-1.667-1.667Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst AlignRightIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M16.667 3.333v13.334\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M11.875 4.792H4.792c-.92 0-1.667.746-1.667 1.666v.417c0 .92.746 1.667 1.667 1.667h7.083c.92 0 1.667-.747 1.667-1.667v-.417c0-.92-.746-1.666-1.667-1.666ZM11.683 11.458H7.292c-.92 0-1.667.746-1.667 1.667v.417c0 .92.746 1.666 1.667 1.666h4.39c.921 0 1.667-.746 1.667-1.666v-.417c0-.92-.746-1.667-1.666-1.667Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst DistributeHorizontallyIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M16.667 3.333v13.334M3.333 3.333v13.334\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M14.375 10.208v-.416c0-.92-.746-1.667-1.667-1.667H7.292c-.92 0-1.667.746-1.667 1.667v.416c0 .92.746 1.667 1.667 1.667h5.416c.92 0 1.667-.746 1.667-1.667Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst DistributeVerticallyIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M3.333 3.333h13.334M3.333 16.667h13.334\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M10.208 5.625h-.416c-.92 0-1.667.746-1.667 1.667v5.416c0 .92.746 1.667 1.667 1.667h.416c.92 0 1.667-.746 1.667-1.667V7.292c0-.92-.746-1.667-1.667-1.667Z\"\n    })]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst CenterVerticallyIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M1.667 10h2.916\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M8.333 10h3.334\",\n    strokeLinejoin: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M15.417 10h2.916\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6.875 4.792h-.417c-.92 0-1.666.746-1.666 1.666v7.084c0 .92.746 1.666 1.666 1.666h.417c.92 0 1.667-.746 1.667-1.666V6.458c0-.92-.747-1.666-1.667-1.666ZM13.542 6.458h-.417c-.92 0-1.667.747-1.667 1.667v3.75c0 .92.746 1.667 1.667 1.667h.417c.92 0 1.666-.746 1.666-1.667v-3.75c0-.92-.746-1.667-1.666-1.667Z\"\n  })]\n})), modifiedTablerIconProps);\nconst CenterHorizontallyIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 18.333v-2.916\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 11.667V8.333\",\n    strokeLinejoin: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 4.583V1.667\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4.792 13.125v.417c0 .92.746 1.666 1.666 1.666h7.084c.92 0 1.666-.746 1.666-1.666v-.417c0-.92-.746-1.667-1.666-1.667H6.458c-.92 0-1.666.746-1.666 1.667ZM6.458 6.458v.417c0 .92.747 1.667 1.667 1.667h3.75c.92 0 1.667-.747 1.667-1.667v-.417c0-.92-.746-1.666-1.667-1.666h-3.75c-.92 0-1.667.746-1.667 1.666Z\"\n  })]\n})), modifiedTablerIconProps);\nconst usersIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    cx: \"9\",\n    cy: \"7\",\n    r: \"4\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16 3.13a4 4 0 0 1 0 7.75\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M21 21v-2a4 4 0 0 0 -3 -3.85\"\n  })]\n})), tablerIconProps); // not mirrored because it's inspired by a playback control, which is always RTL\n\nconst start = createIcon(\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z\");\nconst stop = createIcon(\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm96 328c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v160z\");\nconst CloseIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M15 5 5 15M5 5l10 10\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst back = createIcon(\"M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z\", {\n  width: 320,\n  height: 512,\n  style: {\n    marginLeft: \"-0.2rem\"\n  },\n  mirror: true\n});\nconst clone = createIcon(\"M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z\", {\n  mirror: true\n}); // modified https://feathericons.com/?query=shield\n\nconst shield = createIcon(\"M11.553 22.894a.998.998 0 00.894 0s3.037-1.516 5.465-4.097C19.616 16.987 21 14.663 21 12V5a1 1 0 00-.649-.936l-8-3a.998.998 0 00-.702 0l-8 3A1 1 0 003 5v7c0 2.663 1.384 4.987 3.088 6.797 2.428 2.581 5.465 4.097 5.465 4.097zm-1.303-8.481l6.644-6.644a.856.856 0 111.212 1.212l-7.25 7.25a.856.856 0 01-1.212 0l-3.75-3.75a.856.856 0 111.212-1.212l3.144 3.144z\", {\n  width: 24\n});\nconst file = createIcon(\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm32-48h224V288l-23.5-23.5c-4.7-4.7-12.3-4.7-17 0L176 352l-39.5-39.5c-4.7-4.7-12.3-4.7-17 0L80 352v64zm48-240c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z\", {\n  width: 384,\n  height: 512\n}); // TODO barnabasmolnar/editor-redesign\n// couldn't find a new icon for this\n\nconst GroupIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  theme\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M25 26H111V111H25\",\n    fill: iconFillColor(theme)\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M25 111C25 80.2068 25 49.4135 25 26M25 26C48.6174 26 72.2348 26 111 26H25ZM25 26C53.3671 26 81.7343 26 111 26H25ZM111 26C111 52.303 111 78.606 111 111V26ZM111 26C111 51.2947 111 76.5893 111 111V26ZM111 111C87.0792 111 63.1585 111 25 111H111ZM111 111C87.4646 111 63.9293 111 25 111H111ZM25 111C25 81.1514 25 51.3028 25 26V111Z\",\n    stroke: iconFillColor(theme),\n    strokeWidth: \"2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M100 100H160V160H100\",\n    fill: iconFillColor(theme)\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M100 160C100 144.106 100 128.211 100 100M100 100C117.706 100 135.412 100 160 100H100ZM100 100C114.214 100 128.428 100 160 100H100ZM160 100C160 120.184 160 140.369 160 160V100ZM160 100C160 113.219 160 126.437 160 160V100ZM160 160C145.534 160 131.068 160 100 160H160ZM160 160C143.467 160 126.934 160 100 160H160ZM100 160C100 143.661 100 127.321 100 100V160Z\",\n    stroke: iconFillColor(theme),\n    strokeWidth: \"2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    fill: handlerColor(theme),\n    stroke: iconFillColor(theme),\n    strokeWidth: \"6\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"2.5\",\n      y: \"2.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"2.5\",\n      y: \"149.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"147.5\",\n      y: \"149.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"147.5\",\n      y: \"2.5\",\n      width: \"30\",\n      height: \"30\"\n    })]\n  }))]\n}), {\n  width: 182,\n  height: 182,\n  mirror: true\n}));\nconst UngroupIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  theme\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M25 26H111V111H25\",\n    fill: iconFillColor(theme)\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M25 111C25 80.2068 25 49.4135 25 26M25 26C48.6174 26 72.2348 26 111 26H25ZM25 26C53.3671 26 81.7343 26 111 26H25ZM111 26C111 52.303 111 78.606 111 111V26ZM111 26C111 51.2947 111 76.5893 111 111V26ZM111 111C87.0792 111 63.1585 111 25 111H111ZM111 111C87.4646 111 63.9293 111 25 111H111ZM25 111C25 81.1514 25 51.3028 25 26V111Z\",\n    stroke: iconFillColor(theme),\n    strokeWidth: \"2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M100 100H160V160H100\",\n    fill: iconFillColor(theme)\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M100 160C100 144.106 100 128.211 100 100M100 100C117.706 100 135.412 100 160 100H100ZM100 100C114.214 100 128.428 100 160 100H100ZM160 100C160 120.184 160 140.369 160 160V100ZM160 100C160 113.219 160 126.437 160 160V100ZM160 160C145.534 160 131.068 160 100 160H160ZM160 160C143.467 160 126.934 160 100 160H160ZM100 160C100 143.661 100 127.321 100 100V160Z\",\n    stroke: iconFillColor(theme),\n    strokeWidth: \"2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    fill: handlerColor(theme),\n    stroke: iconFillColor(theme),\n    strokeWidth: \"6\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"2.5\",\n      y: \"2.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"78.5\",\n      y: \"149.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"147.5\",\n      y: \"149.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"147.5\",\n      y: \"78.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"105.5\",\n      y: \"2.5\",\n      width: \"30\",\n      height: \"30\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n      x: \"2.5\",\n      y: \"102.5\",\n      width: \"30\",\n      height: \"30\"\n    })]\n  }))]\n}), {\n  width: 182,\n  height: 182,\n  mirror: true\n}));\nconst FillZigZagIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n  strokeWidth: 1.25\n}, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M5.879 2.625h8.242a3.27 3.27 0 0 1 3.254 3.254v8.242a3.27 3.27 0 0 1-3.254 3.254H5.88a3.27 3.27 0 0 1-3.254-3.254V5.88A3.27 3.27 0 0 1 5.88 2.626l-.001-.001ZM4.518 16.118l7.608-12.83m.198 13.934 5.051-9.897M2.778 9.675l9.348-6.387m-7.608 12.83 12.857-8.793\"\n  })\n})), modifiedTablerIconProps);\nconst FillHachureIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"mask\", Object.assign({\n    id: \"FillHachureIcon\",\n    style: {\n      maskType: \"alpha\"\n    },\n    maskUnits: \"userSpaceOnUse\",\n    x: 2,\n    y: 2,\n    width: 16,\n    height: 16\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z\",\n      fill: \"var(--icon-fill-color)\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    mask: \"url(#FillHachureIcon)\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M2.258 15.156 15.156 2.258M7.324 20.222 20.222 7.325m-20.444 5.35L12.675-.222m-8.157 18.34L17.416 5.22\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    })\n  }))]\n}), modifiedTablerIconProps);\nconst FillCrossHatchIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n    clipPath: \"url(#a)\"\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\"\n    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"mask\", Object.assign({\n      id: \"FillCrossHatchIcon\",\n      style: {\n        maskType: \"alpha\"\n      },\n      maskUnits: \"userSpaceOnUse\",\n      x: -1,\n      y: -1,\n      width: 22,\n      height: 22\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        d: \"M2.426 15.044 15.044 2.426M7.383 20 20 7.383M0 12.617 12.617 0m-7.98 17.941L17.256 5.324m-2.211 12.25L2.426 4.956M20 12.617 7.383 0m5.234 20L0 7.383m17.941 7.98L5.324 2.745\",\n        stroke: \"var(--icon-fill-color)\",\n        strokeWidth: \"1.25\",\n        strokeLinecap: \"round\",\n        strokeLinejoin: \"round\"\n      })\n    })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n      mask: \"url(#FillCrossHatchIcon)\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        d: \"M14.121 2H5.88A3.879 3.879 0 0 0 2 5.879v8.242A3.879 3.879 0 0 0 5.879 18h8.242A3.879 3.879 0 0 0 18 14.121V5.88A3.879 3.879 0 0 0 14.121 2Z\",\n        fill: \"var(--icon-fill-color)\"\n      })\n    }))]\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst FillSolidIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    clipPath: \"url(#a)\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M4.91 2.625h10.18a2.284 2.284 0 0 1 2.285 2.284v10.182a2.284 2.284 0 0 1-2.284 2.284H4.909a2.284 2.284 0 0 1-2.284-2.284V4.909a2.284 2.284 0 0 1 2.284-2.284Z\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), Object.assign(Object.assign({}, modifiedTablerIconProps), {\n  fill: \"var(--icon-fill-color)\"\n}));\nconst StrokeWidthThinIcon = createIcon( //zsviczian\n(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4.167 10h11.666\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"0.75\" //zsviczian\n    ,\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  })\n}), modifiedTablerIconProps);\nconst StrokeWidthBaseIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4.167 10h11.666\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"2.25\" //zsviczian\n    ,\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  })\n}), modifiedTablerIconProps);\nconst StrokeWidthBoldIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M5 10h10\",\n  stroke: \"var(--icon-fill-color)\",\n  strokeWidth: \"3.5\" //zsviczian\n  ,\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}), modifiedTablerIconProps);\nconst StrokeWidthExtraBoldIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M5 10h10\",\n  stroke: \"var(--icon-fill-color)\",\n  strokeWidth: \"5.75\" //zsviczian\n  ,\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}), modifiedTablerIconProps);\nconst StrokeStyleSolidIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  theme\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M6 10H34\",\n  stroke: iconFillColor(theme),\n  strokeWidth: 2,\n  fill: \"none\",\n  strokeLinecap: \"round\"\n}), {\n  width: 40,\n  height: 20\n}));\nconst StrokeStyleDashedIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"2\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M5 12h2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M17 12h2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M11 12h2\"\n  })]\n})), tablerIconProps); // tabler-icons: line-dotted\n\nconst StrokeStyleDottedIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"2\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 12v.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M8 12v.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 12v.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16 12v.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M20 12v.01\"\n  })]\n})), tablerIconProps);\nconst SloppinessArchitectIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M2.5 12.038c1.655-.885 5.9-3.292 8.568-4.354 2.668-1.063.101 2.821 1.32 3.104 1.218.283 5.112-1.814 5.112-1.814\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst SloppinessArtistIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M2.5 12.563c1.655-.886 5.9-3.293 8.568-4.355 2.668-1.062.101 2.822 1.32 3.105 1.218.283 5.112-1.814 5.112-1.814m-13.469 2.23c2.963-1.586 6.13-5.62 7.468-4.998 1.338.623-1.153 4.11-.132 5.595 1.02 1.487 6.133-1.43 6.133-1.43\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst SloppinessCartoonistIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M2.5 11.936c1.737-.879 8.627-5.346 10.42-5.268 1.795.078-.418 5.138.345 5.736.763.598 3.53-1.789 4.235-2.147M2.929 9.788c1.164-.519 5.47-3.28 6.987-3.114 1.519.165 1 3.827 2.121 4.109 1.122.281 3.839-2.016 4.606-2.42\",\n  strokeWidth: \"1.25\"\n}), modifiedTablerIconProps);\nconst EdgeSharpIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"svg\", Object.assign({\n  strokeWidth: \"1.5\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M3.33334 9.99998V6.66665C3.33334 6.04326 3.33403 4.9332 3.33539 3.33646C4.95233 3.33436 6.06276 3.33331 6.66668 3.33331H10\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M13.3333 3.33331V3.34331\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16.6667 3.33331V3.34331\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16.6667 6.66669V6.67669\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16.6667 10V10.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M3.33334 13.3333V13.3433\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16.6667 13.3333V13.3433\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M3.33334 16.6667V16.6767\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6.66666 16.6667V16.6767\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 16.6667V16.6767\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M13.3333 16.6667V16.6767\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16.6667 16.6667V16.6767\"\n  })]\n})), modifiedTablerIconProps); // tabler-icons: border-radius\n\nconst EdgeRoundIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\",\n  stroke: \"var(--icon-fill-color)\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 12v-4a4 4 0 0 1 4 -4h4\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"16\",\n    y1: \"4\",\n    x2: \"16\",\n    y2: \"4.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"20\",\n    y1: \"4\",\n    x2: \"20\",\n    y2: \"4.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"20\",\n    y1: \"8\",\n    x2: \"20\",\n    y2: \"8.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"20\",\n    y1: \"12\",\n    x2: \"20\",\n    y2: \"12.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"16\",\n    x2: \"4\",\n    y2: \"16.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"20\",\n    y1: \"16\",\n    x2: \"20\",\n    y2: \"16.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"20\",\n    x2: \"4\",\n    y2: \"20.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"8\",\n    y1: \"20\",\n    x2: \"8\",\n    y2: \"20.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"12\",\n    y1: \"20\",\n    x2: \"12\",\n    y2: \"20.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"16\",\n    y1: \"20\",\n    x2: \"16\",\n    y2: \"20.01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"20\",\n    y1: \"20\",\n    x2: \"20\",\n    y2: \"20.01\"\n  })]\n})), tablerIconProps);\nconst ArrowheadNoneIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M6 10H34\",\n  stroke: \"var(--icon-fill-color)\",\n  strokeWidth: 2,\n  fill: \"none\"\n}), {\n  width: 40,\n  height: 20\n});\nconst ArrowheadArrowIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\",\n  stroke: \"var(--icon-fill-color)\",\n  strokeWidth: 2,\n  fill: \"none\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M34 10H6M34 10L27 5M34 10L27 15\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M27.5 5L34.5 10L27.5 15\"\n  })]\n})), {\n  width: 40,\n  height: 20\n}));\nconst ArrowheadCircleIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"var(--icon-fill-color)\",\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M32 10L6 10\",\n    strokeWidth: 2\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    r: \"4\",\n    transform: \"matrix(-1 0 0 1 30 10)\"\n  })]\n})), {\n  width: 40,\n  height: 20\n}));\nconst ArrowheadCircleOutlineIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\",\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\",\n  strokeWidth: 2\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M26 10L6 10\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"circle\", {\n    r: \"4\",\n    transform: \"matrix(-1 0 0 1 30 10)\"\n  })]\n})), {\n  width: 40,\n  height: 20\n}));\nconst ArrowheadBarIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\"\n}, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M34 10H5.99996M34 10L34 5M34 10L34 15\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: 2,\n    fill: \"none\"\n  })\n})), {\n  width: 40,\n  height: 20\n}));\nconst ArrowheadTriangleIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"var(--icon-fill-color)\",\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M32 10L6 10\",\n    strokeWidth: 2\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M27.5 5.5L34.5 10L27.5 14.5L27.5 5.5\"\n  })]\n})), {\n  width: 40,\n  height: 20\n}));\nconst ArrowheadTriangleOutlineIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\",\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\",\n  strokeWidth: 2,\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6,9.5H27\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M27,5L34,10L27,14Z\",\n    fill: \"none\"\n  })]\n})), {\n  width: 40,\n  height: 20\n}));\nconst ArrowheadDiamondIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"currentColor\",\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\",\n  strokeLinejoin: \"round\",\n  strokeWidth: 2\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6,9.5H20\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M27,5L34,10L27,14L20,9.5Z\"\n  })]\n})), {\n  width: 40,\n  height: 20\n}));\nconst ArrowheadDiamondOutlineIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  flip = false\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\",\n  transform: flip ? \"translate(40, 0) scale(-1, 1)\" : \"\",\n  strokeLinejoin: \"round\",\n  strokeWidth: 2\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6,9.5H20\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M27,5L34,10L27,14L20,9.5Z\"\n  })]\n})), {\n  width: 40,\n  height: 20\n}));\nconst FontSizeSmallIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    clipPath: \"url(#a)\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M14.167 6.667a3.333 3.333 0 0 0-3.334-3.334H9.167a3.333 3.333 0 0 0 0 6.667h1.666a3.333 3.333 0 0 1 0 6.667H9.167a3.333 3.333 0 0 1-3.334-3.334\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst FontSizeMediumIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    clipPath: \"url(#a)\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5 16.667V3.333L10 15l5-11.667v13.334\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst FontSizeLargeIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    clipPath: \"url(#a)\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.833 3.333v13.334h8.334\",\n      stroke: \"var(--icon-fill-color)\",\n      strokeWidth: \"1.25\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst FontSizeExtraLargeIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"m1.667 3.333 6.666 13.334M8.333 3.333 1.667 16.667M11.667 3.333v13.334h6.666\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  })\n}), modifiedTablerIconProps);\nconst FontFamilyNormalIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.833 16.667v-10a3.333 3.333 0 0 1 3.334-3.334h1.666a3.333 3.333 0 0 1 3.334 3.334v10M5.833 10.833h8.334\"\n    })\n  }))\n}), modifiedTablerIconProps);\nconst FontFamilyCodeIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    clipPath: \"url(#a)\",\n    stroke: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"M5.833 6.667 2.5 10l3.333 3.333M14.167 6.667 17.5 10l-3.333 3.333M11.667 3.333 8.333 16.667\"\n    })\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"defs\", {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"clipPath\", Object.assign({\n      id: \"a\"\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n        fill: \"#fff\",\n        d: \"M0 0h20v20H0z\"\n      })\n    }))\n  })]\n}), modifiedTablerIconProps);\nconst FontFamilyLocalFontIcon = createIcon( //zsviczian\n(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"g\", Object.assign({\n    stroke: \"var(--icon-fill-color)\",\n    fill: \"var(--icon-fill-color)\",\n    strokeWidth: \"1.25\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n      d: \"m 151.43258,8.7863685 q -7.87381,6.7489805 -14.62279,12.3731315 0,11.248301 0,23.621433 8.99864,35.994564 13.49796,76.488447 -4.49932,7.87381 -11.2483,13.49796 -16.87245,1.12483 -29.24559,-3.37449 -6.74898,-4.49932 -10.123467,-11.2483 -7.87381,-2.24966 -15.747621,0 -6.748981,1.12483 -11.248302,5.62415 l -16.872451,16.87245 q -11.248302,2.24966 -19.122113,8.99864 -6.74898,6.74899 -6.74898,17.99729 2.24966,3.37449 4.49932,7.87381 2.24966,4.49932 2.24966,12.37313 -16.872452,31.49524 -30.3704131,65.24015 -2.2496602,23.62143 0,47.24286 6.7489811,10.12347 15.7476221,20.24694 10.123471,4.49932 20.246942,13.49797 25.871093,4.49932 53.991846,8.99864 23.621437,-5.62415 50.617357,-5.62415 3.37449,2.24966 6.74898,5.62415 0,25.87109 0,55.11667 1.12483,19.12211 5.62415,38.24423 v 61.86565 q 2.24966,5.62415 8.99864,8.99864 10.12347,0 19.12211,-3.37449 3.37449,2.24966 10.12347,2.24966 7.87382,-13.49796 17.99729,-24.74626 5.62415,-34.86973 7.87381,-70.8643 -5.62415,-40.49388 -5.62415,-82.1126 l 7.87381,-7.87381 h 16.87245 q 21.37177,-8.99864 44.9932,-13.49796 14.6228,-7.87381 30.37042,-15.74762 3.37449,-1.12483 8.99864,-1.12483 11.2483,-10.12347 23.62143,-22.4966 2.24966,-6.74898 6.74898,-12.37313 V 230.3779 q 4.49932,-14.62279 6.74898,-30.37041 4.49932,-11.2483 10.12347,-20.24694 2.24966,-17.99728 2.24966,-37.1194 -5.62415,-7.87381 -7.87381,-15.74762 -6.74898,-6.74898 -13.49796,-13.49796 -11.2483,-6.74898 -20.24694,-10.12347 -46.11804,-4.499321 -92.23607,0 -10.12347,4.49932 -22.4966,4.49932 -6.74898,-2.24966 -10.12347,-7.873811 2.24966,-23.621433 2.24966,-46.118035 -5.62415,-8.998641 -4.49932,-19.122113 Q 203.17477,22.28433 195.30095,13.285689 187.42714,3.1622179 178.4285,2.0373877 164.93054,5.4118781 151.43258,8.7863685 Z M 136.80979,175.26123 q 7.87381,2.24966 11.2483,12.37313 -1.12483,39.36905 1.12483,80.98777 4.49932,6.74898 3.37449,15.74762 -5.62415,6.74898 -12.37313,11.2483 -17.99728,1.12483 -33.74491,5.62415 -19.122108,0 -37.11939,-1.12483 -6.748981,-4.49932 -11.248301,-7.87381 -1.12483,-14.62279 1.12483,-29.24558 16.872452,-30.37042 28.120753,-62.99049 4.499321,-7.87381 11.248301,-13.49796 14.622787,-3.37449 29.245587,-5.62415 4.49932,-3.37449 8.99864,-5.62415 z M 283.0377,146.01564 q 8.99865,-1.12483 17.99729,2.24966 4.49932,2.24966 8.99864,7.87382 2.24966,8.99864 1.12483,20.24694 -6.74898,11.2483 -10.12347,22.4966 -4.49932,25.87109 -10.12348,52.86702 -24.74626,11.2483 -47.24286,24.74626 -10.12347,2.24966 -19.12211,4.49932 l -10.12347,-10.12347 q 0,-44.99321 3.37449,-84.36226 -3.37449,-13.49796 -6.74898,-23.62143 4.49932,-6.74898 12.37313,-11.24831 29.24558,-3.37449 59.61599,-5.62415 z M 638.74,93.24 766.76,221.26 488.77,499.25 374.63,511.85 c -15.28,1.69 -28.19,-11.23 -26.49,-26.51 l 12.7,-114.22 z M 845.94,74.18 785.83,14.07 c -18.75,-18.75 -49.16,-18.75 -67.91,0 l -56.55,56.55 128.02,128.02 56.55,-56.55 c 18.75,-18.76 18.75,-49.16 0,-67.91 z\"\n    })\n  }))\n}));\nconst TextAlignLeftIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"none\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\",\n  strokeWidth: 2\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"8\",\n    x2: \"20\",\n    y2: \"8\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"12\",\n    x2: \"12\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"16\",\n    x2: \"16\",\n    y2: \"16\"\n  })]\n})), tablerIconProps);\nconst TextAlignCenterIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"none\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"8\",\n    x2: \"20\",\n    y2: \"8\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"8\",\n    y1: \"12\",\n    x2: \"16\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"6\",\n    y1: \"16\",\n    x2: \"18\",\n    y2: \"16\"\n  })]\n})), tablerIconProps);\nconst TextAlignRightIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"none\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"8\",\n    x2: \"20\",\n    y2: \"8\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"10\",\n    y1: \"12\",\n    x2: \"20\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"8\",\n    y1: \"16\",\n    x2: \"20\",\n    y2: \"16\"\n  })]\n})), tablerIconProps); // tabler-icons: layout-align-top\n\nconst TextAlignTopIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  theme\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\",\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"none\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"4\",\n    x2: \"20\",\n    y2: \"4\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n    x: \"9\",\n    y: \"8\",\n    width: \"6\",\n    height: \"12\",\n    rx: \"2\"\n  })]\n})), tablerIconProps)); // tabler-icons: layout-align-bottom\n\nconst TextAlignBottomIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  theme\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"2\",\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"none\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"20\",\n    x2: \"20\",\n    y2: \"20\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n    x: \"9\",\n    y: \"4\",\n    width: \"6\",\n    height: \"12\",\n    rx: \"2\"\n  })]\n})), tablerIconProps)); // tabler-icons: layout-align-middle\n\nconst TextAlignMiddleIcon = react__WEBPACK_IMPORTED_MODULE_1___default().memo(({\n  theme\n}) => createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.5\",\n  stroke: \"var(--icon-fill-color)\",\n  fill: \"none\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"4\",\n    y1: \"12\",\n    x2: \"9\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"line\", {\n    x1: \"15\",\n    y1: \"12\",\n    x2: \"20\",\n    y2: \"12\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"rect\", {\n    x: \"9\",\n    y: \"6\",\n    width: \"6\",\n    height: \"12\",\n    rx: \"2\"\n  })]\n})), tablerIconProps));\nconst publishIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z\",\n  fill: \"var(--icon-fill-color)\"\n}), {\n  width: 640,\n  height: 512\n});\nconst eraser = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  d: \"M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z\"\n}));\nconst handIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: 1.25\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M14 5.5a1.5 1.5 0 0 1 3 0v6.5\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47\"\n  })]\n})), tablerIconProps);\nconst downloadIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M7 11l5 5l5 -5\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 4l0 12\"\n  })]\n}), tablerIconProps);\nconst copyIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2\"\n  })]\n}), tablerIconProps);\nconst helpIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 17l0 .01\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4\"\n  })]\n}), tablerIconProps);\nconst playerPlayIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M7 4v16l13 -8z\"\n  })]\n}), tablerIconProps);\nconst playerStopFilledIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M17 4h-10a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3z\",\n    strokeWidth: \"0\",\n    fill: \"--icon-fill-color\"\n  })]\n}), tablerIconProps);\nconst tablerCheckIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M5 12l5 5l10 -10\"\n  })]\n}), tablerIconProps);\nconst alertTriangleIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 9v4\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 17h.01\"\n  })]\n}), tablerIconProps);\nconst eyeDropperIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: 1.25\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M11 7l6 6\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 16l11.7 -11.7a1 1 0 0 1 1.4 0l2.6 2.6a1 1 0 0 1 0 1.4l-11.7 11.7h-4v-4z\"\n  })]\n})), tablerIconProps);\nconst extraToolsIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: 1.5\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12 3l-4 7h8z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z\"\n  })]\n})), tablerIconProps);\nconst frameToolIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: 1.5\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 7l16 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 17l16 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M7 4l0 16\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M17 4l0 16\"\n  })]\n})), tablerIconProps);\nconst mermaidLogoIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n  fill: \"currentColor\",\n  d: \"M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z\"\n}));\nconst ArrowRightIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: \"1.25\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4.16602 10H15.8327\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12.5 13.3333L15.8333 10\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12.5 6.66666L15.8333 9.99999\"\n  })]\n})), modifiedTablerIconProps);\nconst laserPointerToolIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  fill: \"none\",\n  stroke: \"currentColor\",\n  strokeWidth: \"1.25\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\",\n  transform: \"rotate(90 10 10)\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    clipRule: \"evenodd\",\n    d: \"m9.644 13.69 7.774-7.773a2.357 2.357 0 0 0-3.334-3.334l-7.773 7.774L8 12l1.643 1.69Z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"m13.25 3.417 3.333 3.333M10 10l2-2M5 15l3-3M2.156 17.894l1-1M5.453 19.029l-.144-1.407M2.377 11.887l.866 1.118M8.354 17.273l-1.194-.758M.953 14.652l1.408.13\"\n  })]\n})), 20);\nconst MagicIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6 21l15 -15l-3 -3l-15 15l3 3\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M15 6l3 3\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M9 3a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M19 13a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2\"\n  })]\n})), tablerIconProps);\nconst OpenAIIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M11.217 19.384a3.501 3.501 0 0 0 6.783 -1.217v-5.167l-6 -3.35\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M5.214 15.014a3.501 3.501 0 0 0 4.446 5.266l4.34 -2.534v-6.946\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6 7.63c-1.391 -.236 -2.787 .395 -3.534 1.689a3.474 3.474 0 0 0 1.271 4.745l4.263 2.514l6 -3.348\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M12.783 4.616a3.501 3.501 0 0 0 -6.783 1.217v5.067l6 3.45\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M18.786 8.986a3.501 3.501 0 0 0 -4.446 -5.266l-4.34 2.534v6.946\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M18 16.302c1.391 .236 2.787 -.395 3.534 -1.689a3.474 3.474 0 0 0 -1.271 -4.745l-4.308 -2.514l-5.955 3.42\"\n  })]\n})), tablerIconProps);\nconst fullscreenIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 8v-2a2 2 0 0 1 2 -2h2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M4 16v2a2 2 0 0 0 2 2h2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16 4h2a2 2 0 0 1 2 2v2\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16 20h2a2 2 0 0 0 2 -2v-2\"\n  })]\n})), tablerIconProps);\nconst eyeIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"\n  })]\n})), tablerIconProps);\nconst eyeClosedIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10.585 10.587a2 2 0 0 0 2.829 2.828\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M3 3l18 18\"\n  })]\n})), tablerIconProps);\nconst brainIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  stroke: \"currentColor\",\n  fill: \"none\"\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M17.5 16a3.5 3.5 0 0 0 0 -7h-.5\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M6.5 16a3.5 3.5 0 0 1 0 -7h.5\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10\"\n  })]\n})), tablerIconProps);\nconst searchIcon = createIcon((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"g\", Object.assign({\n  strokeWidth: 1.5\n}, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    stroke: \"none\",\n    d: \"M0 0h24v24H0z\",\n    fill: \"none\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\"\n  }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"path\", {\n    d: \"M21 21l-6 -6\"\n  })]\n})), tablerIconProps);\n\n//# sourceURL=webpack://ExcalidrawLib/./components/icons.tsx?");
 
 /***/ }),
 
@@ -2114,7 +2125,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ChangeCanvasBackground\": () => (/* binding */ ChangeCanvasBackground),\n/* harmony export */   \"ClearCanvas\": () => (/* binding */ ClearCanvas),\n/* harmony export */   \"Export\": () => (/* binding */ Export),\n/* harmony export */   \"Help\": () => (/* binding */ Help),\n/* harmony export */   \"LiveCollaborationTrigger\": () => (/* binding */ LiveCollaborationTrigger),\n/* harmony export */   \"LoadScene\": () => (/* binding */ LoadScene),\n/* harmony export */   \"SaveAsImage\": () => (/* binding */ SaveAsImage),\n/* harmony export */   \"SaveToActiveFile\": () => (/* binding */ SaveToActiveFile),\n/* harmony export */   \"Socials\": () => (/* binding */ Socials),\n/* harmony export */   \"ToggleTheme\": () => (/* binding */ ToggleTheme)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var _actions_shortcuts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../actions/shortcuts */ \"./actions/shortcuts.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../i18n */ \"./i18n.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../App */ \"./components/App.tsx\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../icons */ \"./components/icons.tsx\");\n/* harmony import */ var _dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../dropdownMenu/DropdownMenuItem */ \"./components/dropdownMenu/DropdownMenuItem.tsx\");\n/* harmony import */ var _dropdownMenu_DropdownMenuItemLink__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../dropdownMenu/DropdownMenuItemLink */ \"./components/dropdownMenu/DropdownMenuItemLink.tsx\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../actions */ \"./actions/index.ts\");\n/* harmony import */ var _DefaultItems_scss__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./DefaultItems.scss */ \"./components/main-menu/DefaultItems.scss\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var jotai__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! jotai */ \"../../node_modules/jotai/esm/index.mjs\");\n/* harmony import */ var _ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../ActiveConfirmDialog */ \"./components/ActiveConfirmDialog.tsx\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../jotai */ \"./jotai.ts\");\n/* harmony import */ var _context_ui_appState__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../context/ui-appState */ \"./context/ui-appState.ts\");\n/* harmony import */ var _OverwriteConfirm_OverwriteConfirmState__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../OverwriteConfirm/OverwriteConfirmState */ \"./components/OverwriteConfirm/OverwriteConfirmState.ts\");\n/* harmony import */ var _Trans__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../Trans */ \"./components/Trans.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst LoadScene = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const actionManager = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawActionManager)();\n  const elements = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawElements)();\n\n  if (!actionManager.isActionEnabled(_actions__WEBPACK_IMPORTED_MODULE_7__.actionLoadScene)) {\n    return null;\n  }\n\n  const handleSelect = async () => {\n    if (!elements.length || (await (0,_OverwriteConfirm_OverwriteConfirmState__WEBPACK_IMPORTED_MODULE_13__.openConfirmModal)({\n      title: t(\"overwriteConfirm.modal.loadFromFile.title\"),\n      actionLabel: t(\"overwriteConfirm.modal.loadFromFile.button\"),\n      color: \"warning\",\n      description: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Trans__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n        i18nKey: \"overwriteConfirm.modal.loadFromFile.description\",\n        bold: text => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"strong\", {\n          children: text\n        }),\n        br: () => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"br\", {})\n      })\n    }))) {\n      actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_7__.actionLoadScene);\n    }\n  };\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.LoadIcon,\n    onSelect: handleSelect,\n    \"data-testid\": \"load-button\",\n    shortcut: (0,_actions_shortcuts__WEBPACK_IMPORTED_MODULE_1__.getShortcutFromShortcutName)(\"loadScene\"),\n    \"aria-label\": t(\"buttons.load\")\n  }, {\n    children: t(\"buttons.load\")\n  }));\n};\nLoadScene.displayName = \"LoadScene\";\nconst SaveToActiveFile = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const actionManager = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawActionManager)();\n\n  if (!actionManager.isActionEnabled(_actions__WEBPACK_IMPORTED_MODULE_7__.actionSaveToActiveFile)) {\n    return null;\n  }\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    shortcut: (0,_actions_shortcuts__WEBPACK_IMPORTED_MODULE_1__.getShortcutFromShortcutName)(\"saveScene\"),\n    \"data-testid\": \"save-button\",\n    onSelect: () => actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_7__.actionSaveToActiveFile),\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.save,\n    \"aria-label\": `${t(\"buttons.save\")}`\n  }, {\n    children: `${t(\"buttons.save\")}`\n  }));\n};\nSaveToActiveFile.displayName = \"SaveToActiveFile\";\nconst SaveAsImage = () => {\n  const setAppState = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawSetAppState)();\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.ExportImageIcon,\n    \"data-testid\": \"image-export-button\",\n    onSelect: () => setAppState({\n      openDialog: {\n        name: \"imageExport\"\n      }\n    }),\n    shortcut: (0,_actions_shortcuts__WEBPACK_IMPORTED_MODULE_1__.getShortcutFromShortcutName)(\"imageExport\"),\n    \"aria-label\": t(\"buttons.exportImage\")\n  }, {\n    children: t(\"buttons.exportImage\")\n  }));\n};\nSaveAsImage.displayName = \"SaveAsImage\";\nconst Help = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const actionManager = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawActionManager)();\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    \"data-testid\": \"help-menu-item\",\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.HelpIcon,\n    onSelect: () => actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_7__.actionShortcuts),\n    shortcut: \"?\",\n    \"aria-label\": t(\"helpDialog.title\")\n  }, {\n    children: \"Help & Issues\"\n  }));\n};\nHelp.displayName = \"Help\";\nconst ClearCanvas = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const setActiveConfirmDialog = (0,jotai__WEBPACK_IMPORTED_MODULE_15__.useSetAtom)(_ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_10__.activeConfirmDialogAtom, _jotai__WEBPACK_IMPORTED_MODULE_11__.jotaiScope);\n  const actionManager = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawActionManager)();\n\n  if (!actionManager.isActionEnabled(_actions__WEBPACK_IMPORTED_MODULE_7__.actionClearCanvas)) {\n    return null;\n  }\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.TrashIcon,\n    onSelect: () => setActiveConfirmDialog(\"clearCanvas\"),\n    \"data-testid\": \"clear-canvas-button\",\n    \"aria-label\": t(\"buttons.clearReset\")\n  }, {\n    children: t(\"buttons.clearReset\")\n  }));\n};\nClearCanvas.displayName = \"ClearCanvas\";\nconst ToggleTheme = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const appState = (0,_context_ui_appState__WEBPACK_IMPORTED_MODULE_12__.useUIAppState)();\n  const actionManager = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawActionManager)();\n\n  if (!actionManager.isActionEnabled(_actions__WEBPACK_IMPORTED_MODULE_7__.actionToggleTheme)) {\n    return null;\n  }\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    onSelect: event => {\n      // do not close the menu when changing theme\n      event.preventDefault();\n      return actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_7__.actionToggleTheme);\n    },\n    icon: appState.theme === \"dark\" ? _icons__WEBPACK_IMPORTED_MODULE_4__.SunIcon : _icons__WEBPACK_IMPORTED_MODULE_4__.MoonIcon,\n    \"data-testid\": \"toggle-dark-mode\",\n    shortcut: (0,_actions_shortcuts__WEBPACK_IMPORTED_MODULE_1__.getShortcutFromShortcutName)(\"toggleTheme\"),\n    \"aria-label\": appState.theme === \"dark\" ? t(\"buttons.lightMode\") : t(\"buttons.darkMode\")\n  }, {\n    children: appState.theme === \"dark\" ? t(\"buttons.lightMode\") : t(\"buttons.darkMode\")\n  }));\n};\nToggleTheme.displayName = \"ToggleTheme\";\nconst ChangeCanvasBackground = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const appState = (0,_context_ui_appState__WEBPACK_IMPORTED_MODULE_12__.useUIAppState)();\n  const actionManager = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawActionManager)();\n  const appProps = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useAppProps)();\n\n  if (appState.viewModeEnabled || !appProps.UIOptions.canvasActions.changeViewBackgroundColor) {\n    return null;\n  }\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n    style: {\n      marginTop: \"0.5rem\"\n    }\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n      \"data-testid\": \"canvas-background-label\",\n      style: {\n        fontSize: \".75rem\",\n        marginBottom: \".5rem\"\n      }\n    }, {\n      children: t(\"labels.canvasBackground\")\n    })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n      style: {\n        padding: \"0 0.625rem\"\n      }\n    }, {\n      children: actionManager.renderAction(\"changeViewBackgroundColor\")\n    }))]\n  }));\n};\nChangeCanvasBackground.displayName = \"ChangeCanvasBackground\";\nconst Export = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const setAppState = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawSetAppState)();\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.ExportIcon,\n    onSelect: () => {\n      setAppState({\n        openDialog: {\n          name: \"jsonExport\"\n        }\n      });\n    },\n    \"data-testid\": \"json-export-button\",\n    \"aria-label\": t(\"buttons.export\")\n  }, {\n    children: t(\"buttons.export\")\n  }));\n};\nExport.displayName = \"Export\";\nconst Socials = () => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n  children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItemLink__WEBPACK_IMPORTED_MODULE_6__[\"default\"], Object.assign({\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.GithubIcon,\n    href: \"https://github.com/excalidraw/excalidraw\",\n    \"aria-label\": \"GitHub\"\n  }, {\n    children: \"GitHub\"\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItemLink__WEBPACK_IMPORTED_MODULE_6__[\"default\"], Object.assign({\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.DiscordIcon,\n    href: \"https://discord.gg/UexuTaE\",\n    \"aria-label\": \"Discord\"\n  }, {\n    children: \"Discord\"\n  })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItemLink__WEBPACK_IMPORTED_MODULE_6__[\"default\"], Object.assign({\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.TwitterIcon,\n    href: \"https://twitter.com/excalidraw\",\n    \"aria-label\": \"Twitter\"\n  }, {\n    children: \"Twitter\"\n  }))]\n});\nSocials.displayName = \"Socials\";\nconst LiveCollaborationTrigger = ({\n  onSelect,\n  isCollaborating\n}) => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    \"data-testid\": \"collab-button\",\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.usersIcon,\n    className: (0,clsx__WEBPACK_IMPORTED_MODULE_9__[\"default\"])({\n      \"active-collab\": isCollaborating\n    }),\n    onSelect: onSelect\n  }, {\n    children: t(\"labels.liveCollaboration\")\n  }));\n};\nLiveCollaborationTrigger.displayName = \"LiveCollaborationTrigger\";\n\n//# sourceURL=webpack://ExcalidrawLib/./components/main-menu/DefaultItems.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ChangeCanvasBackground\": () => (/* binding */ ChangeCanvasBackground),\n/* harmony export */   \"ClearCanvas\": () => (/* binding */ ClearCanvas),\n/* harmony export */   \"Export\": () => (/* binding */ Export),\n/* harmony export */   \"Help\": () => (/* binding */ Help),\n/* harmony export */   \"LiveCollaborationTrigger\": () => (/* binding */ LiveCollaborationTrigger),\n/* harmony export */   \"LoadScene\": () => (/* binding */ LoadScene),\n/* harmony export */   \"SaveAsImage\": () => (/* binding */ SaveAsImage),\n/* harmony export */   \"SaveToActiveFile\": () => (/* binding */ SaveToActiveFile),\n/* harmony export */   \"Socials\": () => (/* binding */ Socials),\n/* harmony export */   \"ToggleTheme\": () => (/* binding */ ToggleTheme)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var _actions_shortcuts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../actions/shortcuts */ \"./actions/shortcuts.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../i18n */ \"./i18n.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../App */ \"./components/App.tsx\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../icons */ \"./components/icons.tsx\");\n/* harmony import */ var _dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../dropdownMenu/DropdownMenuItem */ \"./components/dropdownMenu/DropdownMenuItem.tsx\");\n/* harmony import */ var _dropdownMenu_DropdownMenuItemLink__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../dropdownMenu/DropdownMenuItemLink */ \"./components/dropdownMenu/DropdownMenuItemLink.tsx\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../actions */ \"./actions/index.ts\");\n/* harmony import */ var _DefaultItems_scss__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./DefaultItems.scss */ \"./components/main-menu/DefaultItems.scss\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var jotai__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! jotai */ \"../../node_modules/jotai/esm/index.mjs\");\n/* harmony import */ var _ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../ActiveConfirmDialog */ \"./components/ActiveConfirmDialog.tsx\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../jotai */ \"./jotai.ts\");\n/* harmony import */ var _context_ui_appState__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../context/ui-appState */ \"./context/ui-appState.ts\");\n/* harmony import */ var _OverwriteConfirm_OverwriteConfirmState__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../OverwriteConfirm/OverwriteConfirmState */ \"./components/OverwriteConfirm/OverwriteConfirmState.ts\");\n/* harmony import */ var _Trans__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../Trans */ \"./components/Trans.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst LoadScene = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const actionManager = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawActionManager)();\n  const elements = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawElements)();\n\n  if (!actionManager.isActionEnabled(_actions__WEBPACK_IMPORTED_MODULE_7__.actionLoadScene)) {\n    return null;\n  }\n\n  const handleSelect = async () => {\n    if (!elements.length || (await (0,_OverwriteConfirm_OverwriteConfirmState__WEBPACK_IMPORTED_MODULE_13__.openConfirmModal)({\n      title: t(\"overwriteConfirm.modal.loadFromFile.title\"),\n      actionLabel: t(\"overwriteConfirm.modal.loadFromFile.button\"),\n      color: \"warning\",\n      description: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Trans__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n        i18nKey: \"overwriteConfirm.modal.loadFromFile.description\",\n        bold: text => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"strong\", {\n          children: text\n        }),\n        br: () => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"br\", {})\n      })\n    }))) {\n      actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_7__.actionLoadScene);\n    }\n  };\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.LoadIcon,\n    onSelect: handleSelect,\n    \"data-testid\": \"load-button\",\n    shortcut: (0,_actions_shortcuts__WEBPACK_IMPORTED_MODULE_1__.getShortcutFromShortcutName)(\"loadScene\"),\n    \"aria-label\": t(\"buttons.load\")\n  }, {\n    children: t(\"buttons.load\")\n  }));\n};\nLoadScene.displayName = \"LoadScene\";\nconst SaveToActiveFile = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const actionManager = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawActionManager)();\n\n  if (!actionManager.isActionEnabled(_actions__WEBPACK_IMPORTED_MODULE_7__.actionSaveToActiveFile)) {\n    return null;\n  }\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    shortcut: (0,_actions_shortcuts__WEBPACK_IMPORTED_MODULE_1__.getShortcutFromShortcutName)(\"saveScene\"),\n    \"data-testid\": \"save-button\",\n    onSelect: () => actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_7__.actionSaveToActiveFile),\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.save,\n    \"aria-label\": `${t(\"buttons.save\")}`\n  }, {\n    children: `${t(\"buttons.save\")}`\n  }));\n};\nSaveToActiveFile.displayName = \"SaveToActiveFile\";\nconst SaveAsImage = () => {\n  const setAppState = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawSetAppState)();\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.ExportImageIcon,\n    \"data-testid\": \"image-export-button\",\n    onSelect: () => setAppState({\n      openDialog: {\n        name: \"imageExport\"\n      }\n    }),\n    shortcut: (0,_actions_shortcuts__WEBPACK_IMPORTED_MODULE_1__.getShortcutFromShortcutName)(\"imageExport\"),\n    \"aria-label\": t(\"buttons.exportImage\")\n  }, {\n    children: t(\"buttons.exportImage\")\n  }));\n};\nSaveAsImage.displayName = \"SaveAsImage\";\nconst Help = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const actionManager = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawActionManager)();\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    \"data-testid\": \"help-menu-item\",\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.HelpIcon,\n    onSelect: () => actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_7__.actionShortcuts),\n    shortcut: \"?\",\n    \"aria-label\": t(\"helpDialog.title\")\n  }, {\n    children: \"Help & Issues\"\n  }));\n};\nHelp.displayName = \"Help\";\nconst ClearCanvas = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const setActiveConfirmDialog = (0,jotai__WEBPACK_IMPORTED_MODULE_15__.useSetAtom)(_ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_10__.activeConfirmDialogAtom, _jotai__WEBPACK_IMPORTED_MODULE_11__.jotaiScope);\n  const actionManager = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawActionManager)();\n\n  if (!actionManager.isActionEnabled(_actions__WEBPACK_IMPORTED_MODULE_7__.actionClearCanvas)) {\n    return null;\n  }\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.TrashIcon,\n    onSelect: () => setActiveConfirmDialog(\"clearCanvas\"),\n    \"data-testid\": \"clear-canvas-button\",\n    \"aria-label\": t(\"buttons.clearReset\")\n  }, {\n    children: t(\"buttons.clearReset\")\n  }));\n};\nClearCanvas.displayName = \"ClearCanvas\";\nconst ToggleTheme = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const appState = (0,_context_ui_appState__WEBPACK_IMPORTED_MODULE_12__.useUIAppState)();\n  const actionManager = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawActionManager)();\n\n  if (!actionManager.isActionEnabled(_actions__WEBPACK_IMPORTED_MODULE_7__.actionToggleTheme)) {\n    return null;\n  }\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    onSelect: event => {\n      // do not close the menu when changing theme\n      event.preventDefault();\n      return actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_7__.actionToggleTheme);\n    },\n    icon: appState.theme === \"dark\" ? _icons__WEBPACK_IMPORTED_MODULE_4__.SunIcon : _icons__WEBPACK_IMPORTED_MODULE_4__.MoonIcon,\n    \"data-testid\": \"toggle-dark-mode\",\n    shortcut: (0,_actions_shortcuts__WEBPACK_IMPORTED_MODULE_1__.getShortcutFromShortcutName)(\"toggleTheme\"),\n    \"aria-label\": appState.theme === \"dark\" ? t(\"buttons.lightMode\") : t(\"buttons.darkMode\")\n  }, {\n    children: appState.theme === \"dark\" ? t(\"buttons.lightMode\") : t(\"buttons.darkMode\")\n  }));\n};\nToggleTheme.displayName = \"ToggleTheme\";\nconst ChangeCanvasBackground = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const appState = (0,_context_ui_appState__WEBPACK_IMPORTED_MODULE_12__.useUIAppState)();\n  const actionManager = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawActionManager)();\n  const appProps = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useAppProps)();\n\n  if (appState.viewModeEnabled || !appProps.UIOptions.canvasActions.changeViewBackgroundColor) {\n    return null;\n  }\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n    style: {\n      marginTop: \"0.5rem\"\n    }\n  }, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n      \"data-testid\": \"canvas-background-label\",\n      style: {\n        fontSize: \".75rem\",\n        marginBottom: \".5rem\"\n      }\n    }, {\n      children: t(\"labels.canvasBackground\")\n    })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n      style: {\n        padding: \"0 0.625rem\"\n      }\n    }, {\n      children: actionManager.renderAction(\"changeViewBackgroundColor\")\n    }))]\n  }));\n};\nChangeCanvasBackground.displayName = \"ChangeCanvasBackground\";\nconst Export = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const setAppState = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useExcalidrawSetAppState)();\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.ExportIcon,\n    onSelect: () => {\n      setAppState({\n        openDialog: {\n          name: \"jsonExport\"\n        }\n      });\n    },\n    \"data-testid\": \"json-export-button\",\n    \"aria-label\": t(\"buttons.export\")\n  }, {\n    children: t(\"buttons.export\")\n  }));\n};\nExport.displayName = \"Export\";\nconst Socials = () => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItemLink__WEBPACK_IMPORTED_MODULE_6__[\"default\"], Object.assign({\n      icon: _icons__WEBPACK_IMPORTED_MODULE_4__.GithubIcon,\n      href: \"https://github.com/excalidraw/excalidraw\",\n      \"aria-label\": \"GitHub\"\n    }, {\n      children: \"GitHub\"\n    })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItemLink__WEBPACK_IMPORTED_MODULE_6__[\"default\"], Object.assign({\n      icon: _icons__WEBPACK_IMPORTED_MODULE_4__.XBrandIcon,\n      href: \"https://x.com/excalidraw\",\n      \"aria-label\": \"X\"\n    }, {\n      children: t(\"labels.followUs\")\n    })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItemLink__WEBPACK_IMPORTED_MODULE_6__[\"default\"], Object.assign({\n      icon: _icons__WEBPACK_IMPORTED_MODULE_4__.DiscordIcon,\n      href: \"https://discord.gg/UexuTaE\",\n      \"aria-label\": \"Discord\"\n    }, {\n      children: t(\"labels.discordChat\")\n    }))]\n  });\n};\nSocials.displayName = \"Socials\";\nconst LiveCollaborationTrigger = ({\n  onSelect,\n  isCollaborating\n}) => {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenuItem__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({\n    \"data-testid\": \"collab-button\",\n    icon: _icons__WEBPACK_IMPORTED_MODULE_4__.usersIcon,\n    className: (0,clsx__WEBPACK_IMPORTED_MODULE_9__[\"default\"])({\n      \"active-collab\": isCollaborating\n    }),\n    onSelect: onSelect\n  }, {\n    children: t(\"labels.liveCollaboration\")\n  }));\n};\nLiveCollaborationTrigger.displayName = \"LiveCollaborationTrigger\";\n\n//# sourceURL=webpack://ExcalidrawLib/./components/main-menu/DefaultItems.tsx?");
 
 /***/ }),
 
@@ -2334,7 +2345,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"AllowedExcalidrawActiveTools\": () => (/* binding */ AllowedExcalidrawActiveTools),\n/* harmony export */   \"restore\": () => (/* binding */ restore),\n/* harmony export */   \"restoreAppState\": () => (/* binding */ restoreAppState),\n/* harmony export */   \"restoreElements\": () => (/* binding */ restoreElements),\n/* harmony export */   \"restoreLibraryItems\": () => (/* binding */ restoreLibraryItems)\n/* harmony export */ });\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _random__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../random */ \"./random.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _url__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./url */ \"./data/url.ts\");\n\n\n\n\n\n\n\n\n\n\n\nconst AllowedExcalidrawActiveTools = {\n  selection: true,\n  text: true,\n  rectangle: true,\n  diamond: true,\n  ellipse: true,\n  line: true,\n  image: true,\n  arrow: true,\n  freedraw: true,\n  eraser: false,\n  custom: true,\n  frame: true,\n  embeddable: true,\n  hand: true,\n  mermaid: true,\n  laser: false,\n  magicframe: false\n};\n\nconst getFontFamilyByName = fontFamilyName => {\n  if (Object.keys(_constants__WEBPACK_IMPORTED_MODULE_3__.FONT_FAMILY).includes(fontFamilyName)) {\n    return _constants__WEBPACK_IMPORTED_MODULE_3__.FONT_FAMILY[fontFamilyName];\n  }\n\n  return _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_FONT_FAMILY;\n};\n\nconst repairBinding = binding => {\n  if (!binding) {\n    return null;\n  }\n\n  return Object.assign(Object.assign({}, binding), {\n    focus: binding.focus || 0\n  });\n};\n\nconst restoreElementWithProperties = (element, extra) => {\n  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;\n\n  const base = {\n    type: extra.type || element.type,\n    // all elements must have version > 0 so getSceneVersion() will pick up\n    // newly added elements\n    version: element.version || 1,\n    versionNonce: (_a = element.versionNonce) !== null && _a !== void 0 ? _a : 0,\n    isDeleted: (_b = element.isDeleted) !== null && _b !== void 0 ? _b : false,\n    id: element.id || (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n    fillStyle: element.fillStyle || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.fillStyle,\n    strokeWidth: element.strokeWidth || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeWidth,\n    strokeStyle: (_c = element.strokeStyle) !== null && _c !== void 0 ? _c : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeStyle,\n    roughness: (_d = element.roughness) !== null && _d !== void 0 ? _d : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.roughness,\n    opacity: element.opacity == null ? _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.opacity : element.opacity,\n    angle: element.angle || 0,\n    x: (_f = (_e = extra.x) !== null && _e !== void 0 ? _e : element.x) !== null && _f !== void 0 ? _f : 0,\n    y: (_h = (_g = extra.y) !== null && _g !== void 0 ? _g : element.y) !== null && _h !== void 0 ? _h : 0,\n    strokeColor: element.strokeColor || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeColor,\n    backgroundColor: element.backgroundColor || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.backgroundColor,\n    width: element.width || 0,\n    height: element.height || 0,\n    seed: (_j = element.seed) !== null && _j !== void 0 ? _j : 1,\n    groupIds: (_k = element.groupIds) !== null && _k !== void 0 ? _k : [],\n    frameId: (_l = element.frameId) !== null && _l !== void 0 ? _l : null,\n    roundness: element.roundness ? element.roundness : element.strokeSharpness === \"round\" ? {\n      // for old elements that would now use adaptive radius algo,\n      // use legacy algo instead\n      type: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isUsingAdaptiveRadius)(element.type) ? _constants__WEBPACK_IMPORTED_MODULE_3__.ROUNDNESS.LEGACY : _constants__WEBPACK_IMPORTED_MODULE_3__.ROUNDNESS.PROPORTIONAL_RADIUS\n    } : null,\n    boundElements: element.boundElementIds ? element.boundElementIds.map(id => ({\n      type: \"arrow\",\n      id\n    })) : (_m = element.boundElements) !== null && _m !== void 0 ? _m : [],\n    updated: (_o = element.updated) !== null && _o !== void 0 ? _o : (0,_utils__WEBPACK_IMPORTED_MODULE_7__.getUpdatedTimestamp)(),\n    link: element.link ? (0,_url__WEBPACK_IMPORTED_MODULE_9__.normalizeLink)(element.link) : null,\n    locked: (_p = element.locked) !== null && _p !== void 0 ? _p : false\n  };\n\n  if (\"customData\" in element || \"customData\" in extra) {\n    base.customData = \"customData\" in extra ? extra.customData : element.customData;\n  }\n\n  if (_constants__WEBPACK_IMPORTED_MODULE_3__.PRECEDING_ELEMENT_KEY in element) {\n    base[_constants__WEBPACK_IMPORTED_MODULE_3__.PRECEDING_ELEMENT_KEY] = element[_constants__WEBPACK_IMPORTED_MODULE_3__.PRECEDING_ELEMENT_KEY];\n  }\n\n  return Object.assign(Object.assign(Object.assign({}, base), (0,_element__WEBPACK_IMPORTED_MODULE_0__.getNormalizedDimensions)(base)), extra);\n};\n\nconst restoreElement = (element, refreshDimensions = false) => {\n  var _a, _b, _c, _d, _e;\n\n  switch (element.type) {\n    case \"text\":\n      let fontSize = element.fontSize;\n      let fontFamily = element.fontFamily;\n\n      if (\"font\" in element) {\n        const [fontPx, _fontFamily] = element.font.split(\" \");\n        fontSize = parseFloat(fontPx);\n        fontFamily = getFontFamilyByName(_fontFamily);\n      }\n\n      const text = typeof element.text === \"string\" && element.text || \"\"; // line-height might not be specified either when creating elements\n      // programmatically, or when importing old diagrams.\n      // For the latter we want to detect the original line height which\n      // will likely differ from our per-font fixed line height we now use,\n      // to maintain backward compatibility.\n\n      const lineHeight = element.lineHeight || (element.height ? // detect line-height from current element height and font-size\n      (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.detectLineHeight)(element) : // no element height likely means programmatic use, so default\n      // to a fixed line height\n      (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getDefaultLineHeight)(element.fontFamily));\n      const baseline = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.measureBaseline)(element.text, (0,_utils__WEBPACK_IMPORTED_MODULE_7__.getFontString)(element), lineHeight);\n      element = restoreElementWithProperties(element, {\n        fontSize,\n        fontFamily,\n        text,\n        rawText: (_a = element.rawText) !== null && _a !== void 0 ? _a : \"\",\n        textAlign: element.textAlign || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_TEXT_ALIGN,\n        verticalAlign: element.verticalAlign || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_VERTICAL_ALIGN,\n        containerId: (_b = element.containerId) !== null && _b !== void 0 ? _b : null,\n        originalText: element.originalText || text,\n        lineHeight,\n        baseline\n      }); // if empty text, mark as deleted. We keep in array\n      // for data integrity purposes (collab etc.)\n\n      if (!text && !element.isDeleted) {\n        element = Object.assign(Object.assign({}, element), {\n          originalText: text,\n          isDeleted: true\n        });\n        element = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_6__.bumpVersion)(element);\n      }\n\n      if (refreshDimensions) {\n        element = Object.assign(Object.assign({}, element), (0,_element__WEBPACK_IMPORTED_MODULE_0__.refreshTextDimensions)(element));\n      }\n\n      return element;\n\n    case \"freedraw\":\n      {\n        return restoreElementWithProperties(element, {\n          points: element.points,\n          lastCommittedPoint: null,\n          simulatePressure: element.simulatePressure,\n          pressures: element.pressures\n        });\n      }\n\n    case \"image\":\n      return restoreElementWithProperties(element, {\n        status: element.status || \"pending\",\n        fileId: element.fileId,\n        scale: element.scale || [1, 1]\n      });\n\n    case \"line\": // @ts-ignore LEGACY type\n    // eslint-disable-next-line no-fallthrough\n\n    case \"draw\":\n    case \"arrow\":\n      {\n        const {\n          startArrowhead = null,\n          endArrowhead = element.type === \"arrow\" ? \"arrow\" : null\n        } = element;\n        let x = element.x;\n        let y = element.y;\n        let points = // migrate old arrow model to new one\n        !Array.isArray(element.points) || element.points.length < 2 ? [[0, 0], [element.width, element.height]] : element.points;\n\n        if (points[0][0] !== 0 || points[0][1] !== 0) {\n          ({\n            points,\n            x,\n            y\n          } = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_5__.LinearElementEditor.getNormalizedPoints(element));\n        }\n\n        return restoreElementWithProperties(element, {\n          type: element.type === \"draw\" ? \"line\" : element.type,\n          startBinding: repairBinding(element.startBinding),\n          endBinding: repairBinding(element.endBinding),\n          lastCommittedPoint: null,\n          startArrowhead,\n          endArrowhead,\n          points,\n          x,\n          y\n        });\n      }\n    // generic elements\n\n    case \"ellipse\":\n    case \"rectangle\":\n    case \"diamond\":\n      return restoreElementWithProperties(element, {});\n\n    case \"iframe\":\n      //zsviczian\n      return restoreElementWithProperties(element, {\n        scale: (_c = element.scale) !== null && _c !== void 0 ? _c : [1, 1]\n      });\n\n    case \"embeddable\":\n      return restoreElementWithProperties(element, {\n        validated: null,\n        scale: (_d = element.scale) !== null && _d !== void 0 ? _d : [1, 1]\n      });\n\n    case \"magicframe\":\n    case \"frame\":\n      return restoreElementWithProperties(element, {\n        name: (_e = element.name) !== null && _e !== void 0 ? _e : null\n      });\n    // Don't use default case so as to catch a missing an element type case.\n    // We also don't want to throw, but instead return void so we filter\n    // out these unsupported elements from the restored array.\n  }\n\n  return null;\n};\n/**\r\n * Repairs contaienr element's boundElements array by removing duplicates and\r\n * fixing containerId of bound elements if not present. Also removes any\r\n * bound elements that do not exist in the elements array.\r\n *\r\n * NOTE mutates elements.\r\n */\n\n\nconst repairContainerElement = (container, elementsMap) => {\n  if (container.boundElements) {\n    // copy because we're not cloning on restore, and we don't want to mutate upstream\n    const boundElements = container.boundElements.slice(); // dedupe bindings & fix boundElement.containerId if not set already\n\n    const boundIds = new Set();\n    container.boundElements = boundElements.reduce((acc, binding) => {\n      const boundElement = elementsMap.get(binding.id);\n\n      if (boundElement && !boundIds.has(binding.id)) {\n        boundIds.add(binding.id);\n\n        if (boundElement.isDeleted) {\n          return acc;\n        }\n\n        acc.push(binding);\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(boundElement) && // being slightly conservative here, preserving existing containerId\n        // if defined, lest boundElements is stale\n        !boundElement.containerId) {\n          boundElement.containerId = container.id;\n        }\n      }\n\n      return acc;\n    }, []);\n  }\n};\n/**\r\n * Repairs target bound element's container's boundElements array,\r\n * or removes contaienrId if container does not exist.\r\n *\r\n * NOTE mutates elements.\r\n */\n\n\nconst repairBoundElement = (boundElement, elementsMap) => {\n  const container = boundElement.containerId ? elementsMap.get(boundElement.containerId) : null;\n\n  if (!container) {\n    boundElement.containerId = null;\n    return;\n  }\n\n  if (boundElement.isDeleted) {\n    return;\n  }\n\n  if (container.boundElements && !container.boundElements.find(binding => binding.id === boundElement.id)) {\n    // copy because we're not cloning on restore, and we don't want to mutate upstream\n    const boundElements = (container.boundElements || (container.boundElements = [])).slice();\n    boundElements.push({\n      type: \"text\",\n      id: boundElement.id\n    });\n    container.boundElements = boundElements;\n  }\n};\n/**\r\n * Remove an element's frameId if its containing frame is non-existent\r\n *\r\n * NOTE mutates elements.\r\n */\n\n\nconst repairFrameMembership = (element, elementsMap) => {\n  if (element.frameId) {\n    const containingFrame = elementsMap.get(element.frameId);\n\n    if (!containingFrame) {\n      element.frameId = null;\n    }\n  }\n};\n\nconst restoreElements = (elements,\n/** NOTE doesn't serve for reconciliation */\nlocalElements, opts) => {\n  // used to detect duplicate top-level element ids\n  const existingIds = new Set();\n  const localElementsMap = localElements ? (0,_utils__WEBPACK_IMPORTED_MODULE_7__.arrayToMap)(localElements) : null;\n  const restoredElements = (elements || []).reduce((elements, element) => {\n    // filtering out selection, which is legacy, no longer kept in elements,\n    // and causing issues if retained\n    if (element.type !== \"selection\" && !(0,_element__WEBPACK_IMPORTED_MODULE_0__.isInvisiblySmallElement)(element)) {\n      let migratedElement = restoreElement(element, opts === null || opts === void 0 ? void 0 : opts.refreshDimensions);\n\n      if (migratedElement) {\n        const localElement = localElementsMap === null || localElementsMap === void 0 ? void 0 : localElementsMap.get(element.id);\n\n        if (localElement && localElement.version > migratedElement.version) {\n          migratedElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_6__.bumpVersion)(migratedElement, localElement.version);\n        }\n\n        if (existingIds.has(migratedElement.id)) {\n          migratedElement = Object.assign(Object.assign({}, migratedElement), {\n            id: (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)()\n          });\n        }\n\n        existingIds.add(migratedElement.id);\n        elements.push(migratedElement);\n      }\n    }\n\n    return elements;\n  }, []);\n\n  if (!(opts === null || opts === void 0 ? void 0 : opts.repairBindings)) {\n    return restoredElements;\n  } // repair binding. Mutates elements.\n\n\n  const restoredElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.arrayToMap)(restoredElements);\n\n  for (const element of restoredElements) {\n    if (element.frameId) {\n      repairFrameMembership(element, restoredElementsMap);\n    }\n\n    if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(element) && element.containerId) {\n      repairBoundElement(element, restoredElementsMap);\n    } else if (element.boundElements) {\n      repairContainerElement(element, restoredElementsMap);\n    }\n  }\n\n  return restoredElements;\n};\n\nconst coalesceAppStateValue = (key, appState, defaultAppState) => {\n  const value = appState[key]; // NOTE the value! assertion is needed in TS 4.5.5 (fixed in newer versions)\n\n  return value !== undefined ? value : defaultAppState[key];\n};\n\nconst LegacyAppStateMigrations = {\n  isSidebarDocked: (appState, defaultAppState) => {\n    var _a;\n\n    return [\"defaultSidebarDockedPreference\", (_a = appState.isSidebarDocked) !== null && _a !== void 0 ? _a : coalesceAppStateValue(\"defaultSidebarDockedPreference\", appState, defaultAppState)];\n  }\n};\nconst restoreAppState = (appState, localAppState) => {\n  var _a, _b, _c, _d;\n\n  appState = appState || {};\n  const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_4__.getDefaultAppState)();\n  const nextAppState = {}; // first, migrate all legacy AppState properties to new ones. We do it\n  // in one go before migrate the rest of the properties in case the new ones\n  // depend on checking any other key (i.e. they are coupled)\n\n  for (const legacyKey of Object.keys(LegacyAppStateMigrations)) {\n    if (legacyKey in appState) {\n      const [nextKey, nextValue] = LegacyAppStateMigrations[legacyKey](appState, defaultAppState);\n      nextAppState[nextKey] = nextValue;\n    }\n  }\n\n  for (const [key, defaultValue] of Object.entries(defaultAppState)) {\n    // if AppState contains a legacy key, prefer that one and migrate its\n    // value to the new one\n    const suppliedValue = appState[key];\n    const localValue = localAppState ? localAppState[key] : undefined;\n    nextAppState[key] = suppliedValue !== undefined ? suppliedValue : localValue !== undefined ? localValue : defaultValue;\n  }\n\n  return Object.assign(Object.assign({}, nextAppState), {\n    cursorButton: (localAppState === null || localAppState === void 0 ? void 0 : localAppState.cursorButton) || \"up\",\n    // reset on fresh restore so as to hide the UI button if penMode not active\n    penDetected: (_a = localAppState === null || localAppState === void 0 ? void 0 : localAppState.penDetected) !== null && _a !== void 0 ? _a : appState.penMode ? (_b = appState.penDetected) !== null && _b !== void 0 ? _b : false : false,\n    activeTool: Object.assign(Object.assign({}, (0,_utils__WEBPACK_IMPORTED_MODULE_7__.updateActiveTool)(defaultAppState, nextAppState.activeTool.type && AllowedExcalidrawActiveTools[nextAppState.activeTool.type] ? nextAppState.activeTool : {\n      type: \"selection\"\n    })), {\n      lastActiveTool: null,\n      locked: (_c = nextAppState.activeTool.locked) !== null && _c !== void 0 ? _c : false\n    }),\n    // Migrates from previous version where appState.zoom was a number\n    zoom: typeof appState.zoom === \"number\" ? {\n      value: appState.zoom\n    } : ((_d = appState.zoom) === null || _d === void 0 ? void 0 : _d.value) ? appState.zoom : defaultAppState.zoom,\n    openSidebar: // string (legacy)\n    typeof appState.openSidebar === \"string\" ? {\n      name: _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.name\n    } : nextAppState.openSidebar\n  });\n};\nconst restore = (data,\n/**\r\n * Local AppState (`this.state` or initial state from localStorage) so that we\r\n * don't overwrite local state with default values (when values not\r\n * explicitly specified).\r\n * Supply `null` if you can't get access to it.\r\n */\nlocalAppState, localElements, elementsConfig) => {\n  return {\n    elements: restoreElements(data === null || data === void 0 ? void 0 : data.elements, localElements, elementsConfig),\n    appState: restoreAppState(data === null || data === void 0 ? void 0 : data.appState, localAppState || null),\n    files: (data === null || data === void 0 ? void 0 : data.files) || {}\n  };\n};\n\nconst restoreLibraryItem = libraryItem => {\n  const elements = restoreElements((0,_element__WEBPACK_IMPORTED_MODULE_0__.getNonDeletedElements)(libraryItem.elements), null);\n  return elements.length ? Object.assign(Object.assign({}, libraryItem), {\n    elements\n  }) : null;\n};\n\nconst restoreLibraryItems = (libraryItems = [], defaultStatus) => {\n  const restoredItems = [];\n\n  for (const item of libraryItems) {\n    // migrate older libraries\n    if (Array.isArray(item)) {\n      const restoredItem = restoreLibraryItem({\n        status: defaultStatus,\n        elements: item,\n        id: (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n        created: Date.now()\n      });\n\n      if (restoredItem) {\n        restoredItems.push(restoredItem);\n      }\n    } else {\n      const _item = item;\n      const restoredItem = restoreLibraryItem(Object.assign(Object.assign({}, _item), {\n        id: _item.id || (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n        status: _item.status || defaultStatus,\n        created: _item.created || Date.now()\n      }));\n\n      if (restoredItem) {\n        restoredItems.push(restoredItem);\n      }\n    }\n  }\n\n  return restoredItems;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./data/restore.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"AllowedExcalidrawActiveTools\": () => (/* binding */ AllowedExcalidrawActiveTools),\n/* harmony export */   \"restore\": () => (/* binding */ restore),\n/* harmony export */   \"restoreAppState\": () => (/* binding */ restoreAppState),\n/* harmony export */   \"restoreElements\": () => (/* binding */ restoreElements),\n/* harmony export */   \"restoreLibraryItems\": () => (/* binding */ restoreLibraryItems)\n/* harmony export */ });\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _random__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../random */ \"./random.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _url__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./url */ \"./data/url.ts\");\n\n\n\n\n\n\n\n\n\n\n\nconst AllowedExcalidrawActiveTools = {\n  selection: true,\n  text: true,\n  rectangle: true,\n  diamond: true,\n  ellipse: true,\n  line: true,\n  image: true,\n  arrow: true,\n  freedraw: true,\n  eraser: false,\n  custom: true,\n  frame: true,\n  embeddable: true,\n  hand: true,\n  mermaid: true,\n  laser: false,\n  magicframe: false\n};\n\nconst getFontFamilyByName = fontFamilyName => {\n  if (Object.keys(_constants__WEBPACK_IMPORTED_MODULE_3__.FONT_FAMILY).includes(fontFamilyName)) {\n    return _constants__WEBPACK_IMPORTED_MODULE_3__.FONT_FAMILY[fontFamilyName];\n  }\n\n  return _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_FONT_FAMILY;\n};\n\nconst repairBinding = binding => {\n  if (!binding) {\n    return null;\n  }\n\n  return Object.assign(Object.assign({}, binding), {\n    focus: binding.focus || 0\n  });\n};\n\nconst restoreElementWithProperties = (element, extra) => {\n  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;\n\n  const base = {\n    type: extra.type || element.type,\n    // all elements must have version > 0 so getSceneVersion() will pick up\n    // newly added elements\n    version: element.version || 1,\n    versionNonce: (_a = element.versionNonce) !== null && _a !== void 0 ? _a : 0,\n    isDeleted: (_b = element.isDeleted) !== null && _b !== void 0 ? _b : false,\n    id: element.id || (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n    fillStyle: element.fillStyle || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.fillStyle,\n    strokeWidth: element.strokeWidth || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeWidth,\n    strokeStyle: (_c = element.strokeStyle) !== null && _c !== void 0 ? _c : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeStyle,\n    roughness: (_d = element.roughness) !== null && _d !== void 0 ? _d : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.roughness,\n    opacity: element.opacity == null ? _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.opacity : element.opacity,\n    angle: element.angle || 0,\n    x: (_f = (_e = extra.x) !== null && _e !== void 0 ? _e : element.x) !== null && _f !== void 0 ? _f : 0,\n    y: (_h = (_g = extra.y) !== null && _g !== void 0 ? _g : element.y) !== null && _h !== void 0 ? _h : 0,\n    strokeColor: element.strokeColor || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeColor,\n    backgroundColor: element.backgroundColor || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.backgroundColor,\n    width: element.width || 0,\n    height: element.height || 0,\n    seed: (_j = element.seed) !== null && _j !== void 0 ? _j : 1,\n    groupIds: (_k = element.groupIds) !== null && _k !== void 0 ? _k : [],\n    frameId: (_l = element.frameId) !== null && _l !== void 0 ? _l : null,\n    roundness: element.roundness ? element.roundness : element.strokeSharpness === \"round\" ? {\n      // for old elements that would now use adaptive radius algo,\n      // use legacy algo instead\n      type: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isUsingAdaptiveRadius)(element.type) ? _constants__WEBPACK_IMPORTED_MODULE_3__.ROUNDNESS.LEGACY : _constants__WEBPACK_IMPORTED_MODULE_3__.ROUNDNESS.PROPORTIONAL_RADIUS\n    } : null,\n    boundElements: element.boundElementIds ? element.boundElementIds.map(id => ({\n      type: \"arrow\",\n      id\n    })) : (_m = element.boundElements) !== null && _m !== void 0 ? _m : [],\n    updated: (_o = element.updated) !== null && _o !== void 0 ? _o : (0,_utils__WEBPACK_IMPORTED_MODULE_7__.getUpdatedTimestamp)(),\n    link: element.link ? (0,_url__WEBPACK_IMPORTED_MODULE_9__.normalizeLink)(element.link) : null,\n    locked: (_p = element.locked) !== null && _p !== void 0 ? _p : false\n  };\n\n  if (\"customData\" in element || \"customData\" in extra) {\n    base.customData = \"customData\" in extra ? extra.customData : element.customData;\n  }\n\n  if (_constants__WEBPACK_IMPORTED_MODULE_3__.PRECEDING_ELEMENT_KEY in element) {\n    base[_constants__WEBPACK_IMPORTED_MODULE_3__.PRECEDING_ELEMENT_KEY] = element[_constants__WEBPACK_IMPORTED_MODULE_3__.PRECEDING_ELEMENT_KEY];\n  }\n\n  return Object.assign(Object.assign(Object.assign({}, base), (0,_element__WEBPACK_IMPORTED_MODULE_0__.getNormalizedDimensions)(base)), extra);\n};\n\nconst restoreElement = (element, refreshDimensions = false) => {\n  var _a, _b, _c, _d;\n\n  switch (element.type) {\n    case \"text\":\n      let fontSize = element.fontSize;\n      let fontFamily = element.fontFamily;\n\n      if (\"font\" in element) {\n        const [fontPx, _fontFamily] = element.font.split(\" \");\n        fontSize = parseFloat(fontPx);\n        fontFamily = getFontFamilyByName(_fontFamily);\n      }\n\n      const text = typeof element.text === \"string\" && element.text || \"\"; // line-height might not be specified either when creating elements\n      // programmatically, or when importing old diagrams.\n      // For the latter we want to detect the original line height which\n      // will likely differ from our per-font fixed line height we now use,\n      // to maintain backward compatibility.\n\n      const lineHeight = element.lineHeight || (element.height ? // detect line-height from current element height and font-size\n      (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.detectLineHeight)(element) : // no element height likely means programmatic use, so default\n      // to a fixed line height\n      (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getDefaultLineHeight)(element.fontFamily));\n      const baseline = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.measureBaseline)(element.text, (0,_utils__WEBPACK_IMPORTED_MODULE_7__.getFontString)(element), lineHeight);\n      element = restoreElementWithProperties(element, {\n        fontSize,\n        fontFamily,\n        text,\n        rawText: (_a = element.rawText) !== null && _a !== void 0 ? _a : \"\",\n        textAlign: element.textAlign || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_TEXT_ALIGN,\n        verticalAlign: element.verticalAlign || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_VERTICAL_ALIGN,\n        containerId: (_b = element.containerId) !== null && _b !== void 0 ? _b : null,\n        originalText: element.originalText || text,\n        lineHeight,\n        baseline\n      }); // if empty text, mark as deleted. We keep in array\n      // for data integrity purposes (collab etc.)\n\n      if (!text && !element.isDeleted) {\n        element = Object.assign(Object.assign({}, element), {\n          originalText: text,\n          isDeleted: true\n        });\n        element = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_6__.bumpVersion)(element);\n      }\n\n      if (refreshDimensions) {\n        element = Object.assign(Object.assign({}, element), (0,_element__WEBPACK_IMPORTED_MODULE_0__.refreshTextDimensions)(element));\n      }\n\n      return element;\n\n    case \"freedraw\":\n      {\n        return restoreElementWithProperties(element, {\n          points: element.points,\n          lastCommittedPoint: null,\n          simulatePressure: element.simulatePressure,\n          pressures: element.pressures\n        });\n      }\n\n    case \"image\":\n      return restoreElementWithProperties(element, {\n        status: element.status || \"pending\",\n        fileId: element.fileId,\n        scale: element.scale || [1, 1]\n      });\n\n    case \"line\": // @ts-ignore LEGACY type\n    // eslint-disable-next-line no-fallthrough\n\n    case \"draw\":\n    case \"arrow\":\n      {\n        const {\n          startArrowhead = null,\n          endArrowhead = element.type === \"arrow\" ? \"arrow\" : null\n        } = element;\n        let x = element.x;\n        let y = element.y;\n        let points = // migrate old arrow model to new one\n        !Array.isArray(element.points) || element.points.length < 2 ? [[0, 0], [element.width, element.height]] : element.points;\n\n        if (points[0][0] !== 0 || points[0][1] !== 0) {\n          ({\n            points,\n            x,\n            y\n          } = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_5__.LinearElementEditor.getNormalizedPoints(element));\n        }\n\n        return restoreElementWithProperties(element, {\n          type: element.type === \"draw\" ? \"line\" : element.type,\n          startBinding: repairBinding(element.startBinding),\n          endBinding: repairBinding(element.endBinding),\n          lastCommittedPoint: null,\n          startArrowhead,\n          endArrowhead,\n          points,\n          x,\n          y\n        });\n      }\n    // generic elements\n\n    case \"ellipse\":\n    case \"rectangle\":\n    case \"diamond\":\n      return restoreElementWithProperties(element, {});\n\n    case \"iframe\": //zsviczian\n\n    case \"embeddable\":\n      return restoreElementWithProperties(element, {\n        scale: (_c = element.scale) !== null && _c !== void 0 ? _c : [1, 1] //zsviczian\n\n      });\n\n    case \"magicframe\":\n    case \"frame\":\n      return restoreElementWithProperties(element, {\n        name: (_d = element.name) !== null && _d !== void 0 ? _d : null\n      });\n    // Don't use default case so as to catch a missing an element type case.\n    // We also don't want to throw, but instead return void so we filter\n    // out these unsupported elements from the restored array.\n  }\n\n  return null;\n};\n/**\r\n * Repairs contaienr element's boundElements array by removing duplicates and\r\n * fixing containerId of bound elements if not present. Also removes any\r\n * bound elements that do not exist in the elements array.\r\n *\r\n * NOTE mutates elements.\r\n */\n\n\nconst repairContainerElement = (container, elementsMap) => {\n  if (container.boundElements) {\n    // copy because we're not cloning on restore, and we don't want to mutate upstream\n    const boundElements = container.boundElements.slice(); // dedupe bindings & fix boundElement.containerId if not set already\n\n    const boundIds = new Set();\n    container.boundElements = boundElements.reduce((acc, binding) => {\n      const boundElement = elementsMap.get(binding.id);\n\n      if (boundElement && !boundIds.has(binding.id)) {\n        boundIds.add(binding.id);\n\n        if (boundElement.isDeleted) {\n          return acc;\n        }\n\n        acc.push(binding);\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(boundElement) && // being slightly conservative here, preserving existing containerId\n        // if defined, lest boundElements is stale\n        !boundElement.containerId) {\n          boundElement.containerId = container.id;\n        }\n      }\n\n      return acc;\n    }, []);\n  }\n};\n/**\r\n * Repairs target bound element's container's boundElements array,\r\n * or removes contaienrId if container does not exist.\r\n *\r\n * NOTE mutates elements.\r\n */\n\n\nconst repairBoundElement = (boundElement, elementsMap) => {\n  const container = boundElement.containerId ? elementsMap.get(boundElement.containerId) : null;\n\n  if (!container) {\n    boundElement.containerId = null;\n    return;\n  }\n\n  if (boundElement.isDeleted) {\n    return;\n  }\n\n  if (container.boundElements && !container.boundElements.find(binding => binding.id === boundElement.id)) {\n    // copy because we're not cloning on restore, and we don't want to mutate upstream\n    const boundElements = (container.boundElements || (container.boundElements = [])).slice();\n    boundElements.push({\n      type: \"text\",\n      id: boundElement.id\n    });\n    container.boundElements = boundElements;\n  }\n};\n/**\r\n * Remove an element's frameId if its containing frame is non-existent\r\n *\r\n * NOTE mutates elements.\r\n */\n\n\nconst repairFrameMembership = (element, elementsMap) => {\n  if (element.frameId) {\n    const containingFrame = elementsMap.get(element.frameId);\n\n    if (!containingFrame) {\n      element.frameId = null;\n    }\n  }\n};\n\nconst restoreElements = (elements,\n/** NOTE doesn't serve for reconciliation */\nlocalElements, opts) => {\n  // used to detect duplicate top-level element ids\n  const existingIds = new Set();\n  const localElementsMap = localElements ? (0,_utils__WEBPACK_IMPORTED_MODULE_7__.arrayToMap)(localElements) : null;\n  const restoredElements = (elements || []).reduce((elements, element) => {\n    // filtering out selection, which is legacy, no longer kept in elements,\n    // and causing issues if retained\n    if (element.type !== \"selection\" && !(0,_element__WEBPACK_IMPORTED_MODULE_0__.isInvisiblySmallElement)(element)) {\n      let migratedElement = restoreElement(element, opts === null || opts === void 0 ? void 0 : opts.refreshDimensions);\n\n      if (migratedElement) {\n        const localElement = localElementsMap === null || localElementsMap === void 0 ? void 0 : localElementsMap.get(element.id);\n\n        if (localElement && localElement.version > migratedElement.version) {\n          migratedElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_6__.bumpVersion)(migratedElement, localElement.version);\n        }\n\n        if (existingIds.has(migratedElement.id)) {\n          migratedElement = Object.assign(Object.assign({}, migratedElement), {\n            id: (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)()\n          });\n        }\n\n        existingIds.add(migratedElement.id);\n        elements.push(migratedElement);\n      }\n    }\n\n    return elements;\n  }, []);\n\n  if (!(opts === null || opts === void 0 ? void 0 : opts.repairBindings)) {\n    return restoredElements;\n  } // repair binding. Mutates elements.\n\n\n  const restoredElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.arrayToMap)(restoredElements);\n\n  for (const element of restoredElements) {\n    if (element.frameId) {\n      repairFrameMembership(element, restoredElementsMap);\n    }\n\n    if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(element) && element.containerId) {\n      repairBoundElement(element, restoredElementsMap);\n    } else if (element.boundElements) {\n      repairContainerElement(element, restoredElementsMap);\n    }\n  }\n\n  return restoredElements;\n};\n\nconst coalesceAppStateValue = (key, appState, defaultAppState) => {\n  const value = appState[key]; // NOTE the value! assertion is needed in TS 4.5.5 (fixed in newer versions)\n\n  return value !== undefined ? value : defaultAppState[key];\n};\n\nconst LegacyAppStateMigrations = {\n  isSidebarDocked: (appState, defaultAppState) => {\n    var _a;\n\n    return [\"defaultSidebarDockedPreference\", (_a = appState.isSidebarDocked) !== null && _a !== void 0 ? _a : coalesceAppStateValue(\"defaultSidebarDockedPreference\", appState, defaultAppState)];\n  }\n};\nconst restoreAppState = (appState, localAppState) => {\n  var _a, _b, _c, _d;\n\n  appState = appState || {};\n  const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_4__.getDefaultAppState)();\n  const nextAppState = {}; // first, migrate all legacy AppState properties to new ones. We do it\n  // in one go before migrate the rest of the properties in case the new ones\n  // depend on checking any other key (i.e. they are coupled)\n\n  for (const legacyKey of Object.keys(LegacyAppStateMigrations)) {\n    if (legacyKey in appState) {\n      const [nextKey, nextValue] = LegacyAppStateMigrations[legacyKey](appState, defaultAppState);\n      nextAppState[nextKey] = nextValue;\n    }\n  }\n\n  for (const [key, defaultValue] of Object.entries(defaultAppState)) {\n    // if AppState contains a legacy key, prefer that one and migrate its\n    // value to the new one\n    const suppliedValue = appState[key];\n    const localValue = localAppState ? localAppState[key] : undefined;\n    nextAppState[key] = suppliedValue !== undefined ? suppliedValue : localValue !== undefined ? localValue : defaultValue;\n  }\n\n  return Object.assign(Object.assign({}, nextAppState), {\n    cursorButton: (localAppState === null || localAppState === void 0 ? void 0 : localAppState.cursorButton) || \"up\",\n    // reset on fresh restore so as to hide the UI button if penMode not active\n    penDetected: (_a = localAppState === null || localAppState === void 0 ? void 0 : localAppState.penDetected) !== null && _a !== void 0 ? _a : appState.penMode ? (_b = appState.penDetected) !== null && _b !== void 0 ? _b : false : false,\n    activeTool: Object.assign(Object.assign({}, (0,_utils__WEBPACK_IMPORTED_MODULE_7__.updateActiveTool)(defaultAppState, nextAppState.activeTool.type && AllowedExcalidrawActiveTools[nextAppState.activeTool.type] ? nextAppState.activeTool : {\n      type: \"selection\"\n    })), {\n      lastActiveTool: null,\n      locked: (_c = nextAppState.activeTool.locked) !== null && _c !== void 0 ? _c : false\n    }),\n    // Migrates from previous version where appState.zoom was a number\n    zoom: typeof appState.zoom === \"number\" ? {\n      value: appState.zoom\n    } : ((_d = appState.zoom) === null || _d === void 0 ? void 0 : _d.value) ? appState.zoom : defaultAppState.zoom,\n    openSidebar: // string (legacy)\n    typeof appState.openSidebar === \"string\" ? {\n      name: _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.name\n    } : nextAppState.openSidebar\n  });\n};\nconst restore = (data,\n/**\r\n * Local AppState (`this.state` or initial state from localStorage) so that we\r\n * don't overwrite local state with default values (when values not\r\n * explicitly specified).\r\n * Supply `null` if you can't get access to it.\r\n */\nlocalAppState, localElements, elementsConfig) => {\n  return {\n    elements: restoreElements(data === null || data === void 0 ? void 0 : data.elements, localElements, elementsConfig),\n    appState: restoreAppState(data === null || data === void 0 ? void 0 : data.appState, localAppState || null),\n    files: (data === null || data === void 0 ? void 0 : data.files) || {}\n  };\n};\n\nconst restoreLibraryItem = libraryItem => {\n  const elements = restoreElements((0,_element__WEBPACK_IMPORTED_MODULE_0__.getNonDeletedElements)(libraryItem.elements), null);\n  return elements.length ? Object.assign(Object.assign({}, libraryItem), {\n    elements\n  }) : null;\n};\n\nconst restoreLibraryItems = (libraryItems = [], defaultStatus) => {\n  const restoredItems = [];\n\n  for (const item of libraryItems) {\n    // migrate older libraries\n    if (Array.isArray(item)) {\n      const restoredItem = restoreLibraryItem({\n        status: defaultStatus,\n        elements: item,\n        id: (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n        created: Date.now()\n      });\n\n      if (restoredItem) {\n        restoredItems.push(restoredItem);\n      }\n    } else {\n      const _item = item;\n      const restoredItem = restoreLibraryItem(Object.assign(Object.assign({}, _item), {\n        id: _item.id || (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n        status: _item.status || defaultStatus,\n        created: _item.created || Date.now()\n      }));\n\n      if (restoredItem) {\n        restoredItems.push(restoredItem);\n      }\n    }\n  }\n\n  return restoredItems;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./data/restore.ts?");
 
 /***/ }),
 
@@ -2389,7 +2400,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"EXTERNAL_LINK_IMG\": () => (/* binding */ EXTERNAL_LINK_IMG),\n/* harmony export */   \"Hyperlink\": () => (/* binding */ Hyperlink),\n/* harmony export */   \"actionLink\": () => (/* binding */ actionLink),\n/* harmony export */   \"getContextMenuLabel\": () => (/* binding */ getContextMenuLabel),\n/* harmony export */   \"getLinkHandleFromCoords\": () => (/* binding */ getLinkHandleFromCoords),\n/* harmony export */   \"hideHyperlinkToolip\": () => (/* binding */ hideHyperlinkToolip),\n/* harmony export */   \"isPointHittingLink\": () => (/* binding */ isPointHittingLink),\n/* harmony export */   \"isPointHittingLinkIcon\": () => (/* binding */ isPointHittingLinkIcon),\n/* harmony export */   \"shouldHideLinkPopup\": () => (/* binding */ shouldHideLinkPopup),\n/* harmony export */   \"showHyperlinkTooltip\": () => (/* binding */ showHyperlinkTooltip)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _embeddable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _actions_register__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../actions/register */ \"./actions/register.ts\");\n/* harmony import */ var _components_ToolButton__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/ToolButton */ \"./components/ToolButton.tsx\");\n/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../components/icons */ \"./components/icons.tsx\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_8__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _renderer_renderElement__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../renderer/renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _components_Tooltip__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../components/Tooltip */ \"./components/Tooltip.tsx\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _collision__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./collision */ \"./element/collision.ts\");\n/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! . */ \"./element/index.ts\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../data/url */ \"./data/url.ts\");\n/* harmony import */ var _Hyperlink_scss__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Hyperlink.scss */ \"./element/Hyperlink.scss\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _components_App__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../components/App */ \"./components/App.tsx\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst CONTAINER_WIDTH = 320;\nconst SPACE_BOTTOM = 85;\nconst CONTAINER_PADDING = 5;\nconst CONTAINER_HEIGHT = 42;\nconst AUTO_HIDE_TIMEOUT = 500;\nconst EXTERNAL_LINK_IMG = document.createElement(\"img\");\nEXTERNAL_LINK_IMG.src = `data:${_constants__WEBPACK_IMPORTED_MODULE_13__.MIME_TYPES.svg}, ${encodeURIComponent(`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#1971c2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-external-link\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>`)}`;\nlet IS_HYPERLINK_TOOLTIP_VISIBLE = false;\nconst embeddableLinkCache = new Map();\nconst Hyperlink = ({\n  element,\n  setAppState,\n  onLinkOpen,\n  setToast\n}) => {\n  const appState = (0,_components_App__WEBPACK_IMPORTED_MODULE_21__.useExcalidrawAppState)();\n  const appProps = (0,_components_App__WEBPACK_IMPORTED_MODULE_21__.useAppProps)();\n  const linkVal = element.link || \"\";\n  const [inputVal, setInputVal] = (0,react__WEBPACK_IMPORTED_MODULE_8__.useState)(linkVal);\n  const inputRef = (0,react__WEBPACK_IMPORTED_MODULE_8__.useRef)(null);\n  const isEditing = appState.showHyperlinkPopup === \"editor\";\n  const handleSubmit = (0,react__WEBPACK_IMPORTED_MODULE_8__.useCallback)(() => {\n    var _a;\n\n    if (!inputRef.current) {\n      return;\n    }\n\n    const link = (0,_data_url__WEBPACK_IMPORTED_MODULE_18__.normalizeLink)(inputRef.current.value) || null;\n\n    if (!element.link && link) {\n      (0,_analytics__WEBPACK_IMPORTED_MODULE_20__.trackEvent)(\"hyperlink\", \"create\");\n    }\n\n    if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_22__.isEmbeddableElement)(element)) {\n      if (((_a = appState.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) === element) {\n        setAppState({\n          activeEmbeddable: null\n        });\n      }\n\n      if (!link) {\n        (0,_mutateElement__WEBPACK_IMPORTED_MODULE_3__.mutateElement)(element, {\n          validated: false,\n          link: null\n        });\n        return;\n      }\n\n      if (!(0,_embeddable__WEBPACK_IMPORTED_MODULE_2__.embeddableURLValidator)(link, appProps.validateEmbeddable)) {\n        if (link) {\n          setToast({\n            message: (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"toast.unableToEmbed\"),\n            closable: true\n          });\n        }\n\n        element.link && embeddableLinkCache.set(element.id, element.link);\n        (0,_mutateElement__WEBPACK_IMPORTED_MODULE_3__.mutateElement)(element, {\n          validated: false,\n          link\n        });\n        _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_23__.ShapeCache[\"delete\"](element);\n      } else {\n        const {\n          width,\n          height\n        } = element;\n        const embedLink = (0,_embeddable__WEBPACK_IMPORTED_MODULE_2__.getEmbedLink)(link);\n\n        if (embedLink === null || embedLink === void 0 ? void 0 : embedLink.warning) {\n          setToast({\n            message: embedLink.warning,\n            closable: true\n          });\n        }\n\n        const ar = embedLink ? embedLink.intrinsicSize.w / embedLink.intrinsicSize.h : 1;\n        const hasLinkChanged = embeddableLinkCache.get(element.id) !== element.link;\n        (0,_mutateElement__WEBPACK_IMPORTED_MODULE_3__.mutateElement)(element, Object.assign(Object.assign({}, hasLinkChanged ? {\n          width: (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"video\" ? width > height ? width : height * ar : width,\n          height: (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"video\" ? width > height ? width / ar : height : height\n        } : {}), {\n          validated: true,\n          link\n        }));\n        _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_23__.ShapeCache[\"delete\"](element);\n\n        if (embeddableLinkCache.has(element.id)) {\n          embeddableLinkCache.delete(element.id);\n        }\n      }\n    } else {\n      (0,_mutateElement__WEBPACK_IMPORTED_MODULE_3__.mutateElement)(element, {\n        link\n      });\n    }\n  }, [element, setToast, appProps.validateEmbeddable, appState.activeEmbeddable, setAppState]);\n  (0,react__WEBPACK_IMPORTED_MODULE_8__.useLayoutEffect)(() => {\n    return () => {\n      handleSubmit();\n    };\n  }, [handleSubmit]);\n  (0,react__WEBPACK_IMPORTED_MODULE_8__.useEffect)(() => {\n    let timeoutId = null;\n\n    const handlePointerMove = event => {\n      if (isEditing) {\n        return;\n      }\n\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n\n      const shouldHide = shouldHideLinkPopup(element, appState, [event.clientX, event.clientY]);\n\n      if (shouldHide) {\n        timeoutId = window.setTimeout(() => {\n          setAppState({\n            showHyperlinkPopup: false\n          });\n        }, AUTO_HIDE_TIMEOUT);\n      }\n    };\n\n    window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_13__.EVENT.POINTER_MOVE, handlePointerMove, false);\n    return () => {\n      window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_13__.EVENT.POINTER_MOVE, handlePointerMove, false);\n\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [appState, element, isEditing, setAppState]);\n  const handleRemove = (0,react__WEBPACK_IMPORTED_MODULE_8__.useCallback)(() => {\n    (0,_analytics__WEBPACK_IMPORTED_MODULE_20__.trackEvent)(\"hyperlink\", \"delete\");\n    (0,_mutateElement__WEBPACK_IMPORTED_MODULE_3__.mutateElement)(element, {\n      link: null\n    });\n\n    if (isEditing) {\n      inputRef.current.value = \"\";\n    }\n\n    setAppState({\n      showHyperlinkPopup: false\n    });\n  }, [setAppState, element, isEditing]);\n\n  const onEdit = () => {\n    (0,_analytics__WEBPACK_IMPORTED_MODULE_20__.trackEvent)(\"hyperlink\", \"edit\", \"popup-ui\");\n    setAppState({\n      showHyperlinkPopup: \"editor\"\n    });\n  };\n\n  const {\n    x,\n    y\n  } = getCoordsForPopover(element, appState);\n\n  if (appState.contextMenu || appState.draggingElement || appState.resizingElement || appState.isRotating || appState.openMenu || appState.viewModeEnabled) {\n    return null;\n  }\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n    className: \"excalidraw-hyperlinkContainer\",\n    style: {\n      top: `${y}px`,\n      left: `${x}px`,\n      width: CONTAINER_WIDTH,\n      padding: CONTAINER_PADDING\n    },\n    onClick: () => {\n      if (!element.link && !isEditing) {\n        setAppState({\n          showHyperlinkPopup: \"editor\"\n        });\n      }\n    }\n  }, {\n    children: [isEditing ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", {\n      className: (0,clsx__WEBPACK_IMPORTED_MODULE_9__[\"default\"])(\"excalidraw-hyperlinkContainer-input\"),\n      placeholder: \"Type or paste your link here\",\n      ref: inputRef,\n      value: inputVal,\n      onChange: event => setInputVal(event.target.value),\n      autoFocus: true,\n      onKeyDown: event => {\n        event.stopPropagation(); // prevent cmd/ctrl+k shortcut when editing link\n\n        if (event[_keys__WEBPACK_IMPORTED_MODULE_10__.KEYS.CTRL_OR_CMD] && event.key === _keys__WEBPACK_IMPORTED_MODULE_10__.KEYS.K) {\n          event.preventDefault();\n        }\n\n        if (event.key === _keys__WEBPACK_IMPORTED_MODULE_10__.KEYS.ENTER || event.key === _keys__WEBPACK_IMPORTED_MODULE_10__.KEYS.ESCAPE) {\n          handleSubmit();\n          setAppState({\n            showHyperlinkPopup: \"info\"\n          });\n        }\n      }\n    }) : element.link ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"a\", Object.assign({\n      href: (0,_data_url__WEBPACK_IMPORTED_MODULE_18__.normalizeLink)(element.link || \"\"),\n      className: \"excalidraw-hyperlinkContainer-link\",\n      target: (0,_data_url__WEBPACK_IMPORTED_MODULE_18__.isLocalLink)(element.link) ? \"_self\" : \"_blank\",\n      onClick: event => {\n        if (element.link && onLinkOpen) {\n          const customEvent = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.wrapEvent)(_constants__WEBPACK_IMPORTED_MODULE_13__.EVENT.EXCALIDRAW_LINK, event.nativeEvent);\n          onLinkOpen(Object.assign(Object.assign({}, element), {\n            link: (0,_data_url__WEBPACK_IMPORTED_MODULE_18__.normalizeLink)(element.link)\n          }), customEvent);\n\n          if (customEvent.defaultPrevented) {\n            event.preventDefault();\n          }\n        }\n      },\n      rel: \"noopener noreferrer\"\n    }, {\n      children: element.link\n    })) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n      className: \"excalidraw-hyperlinkContainer-link\"\n    }, {\n      children: (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"labels.link.empty\")\n    })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n      className: \"excalidraw-hyperlinkContainer__buttons\"\n    }, {\n      children: [!isEditing && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ToolButton__WEBPACK_IMPORTED_MODULE_5__.ToolButton, {\n        type: \"button\",\n        title: (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"buttons.edit\"),\n        \"aria-label\": (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"buttons.edit\"),\n        label: (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"buttons.edit\"),\n        onClick: onEdit,\n        className: \"excalidraw-hyperlinkContainer--edit\",\n        icon: _components_icons__WEBPACK_IMPORTED_MODULE_6__.FreedrawIcon\n      }), linkVal && !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_22__.isEmbeddableElement)(element) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ToolButton__WEBPACK_IMPORTED_MODULE_5__.ToolButton, {\n        type: \"button\",\n        title: (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"buttons.remove\"),\n        \"aria-label\": (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"buttons.remove\"),\n        label: (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"buttons.remove\"),\n        onClick: handleRemove,\n        className: \"excalidraw-hyperlinkContainer--remove\",\n        icon: _components_icons__WEBPACK_IMPORTED_MODULE_6__.TrashIcon\n      })]\n    }))]\n  }));\n};\n\nconst getCoordsForPopover = (element, appState) => {\n  const [x1, y1] = (0,___WEBPACK_IMPORTED_MODULE_17__.getElementAbsoluteCoords)(element);\n  const {\n    x: viewportX,\n    y: viewportY\n  } = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.sceneCoordsToViewportCoords)({\n    sceneX: x1 + element.width / 2,\n    sceneY: y1\n  }, appState);\n  const x = viewportX - appState.offsetLeft - CONTAINER_WIDTH / 2;\n  const y = viewportY - appState.offsetTop - SPACE_BOTTOM;\n  return {\n    x,\n    y\n  };\n};\n\nconst actionLink = (0,_actions_register__WEBPACK_IMPORTED_MODULE_4__.register)({\n  name: \"hyperlink\",\n  perform: (elements, appState) => {\n    if (appState.showHyperlinkPopup === \"editor\") {\n      return false;\n    }\n\n    return {\n      elements,\n      appState: Object.assign(Object.assign({}, appState), {\n        showHyperlinkPopup: \"editor\",\n        openMenu: null\n      }),\n      commitToHistory: true\n    };\n  },\n  trackEvent: {\n    category: \"hyperlink\",\n    action: \"click\"\n  },\n  keyTest: event => event[_keys__WEBPACK_IMPORTED_MODULE_10__.KEYS.CTRL_OR_CMD] && event.key === _keys__WEBPACK_IMPORTED_MODULE_10__.KEYS.K,\n  contextItemLabel: (elements, appState) => getContextMenuLabel(elements, appState),\n  predicate: (elements, appState) => {\n    const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_15__.getSelectedElements)(elements, appState);\n    return selectedElements.length === 1;\n  },\n  PanelComponent: ({\n    elements,\n    appState,\n    updateData\n  }) => {\n    const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_15__.getSelectedElements)(elements, appState);\n    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ToolButton__WEBPACK_IMPORTED_MODULE_5__.ToolButton, {\n      type: \"button\",\n      icon: _components_icons__WEBPACK_IMPORTED_MODULE_6__.LinkIcon,\n      \"aria-label\": (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(getContextMenuLabel(elements, appState)),\n      title: `${(0,_typeChecks__WEBPACK_IMPORTED_MODULE_22__.isEmbeddableElement)(elements[0]) ? (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"labels.link.labelEmbed\") : (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"labels.link.label\")} - ${(0,_utils__WEBPACK_IMPORTED_MODULE_1__.getShortcutKey)(\"CtrlOrCmd+K\")}`,\n      onClick: () => updateData(null),\n      selected: selectedElements.length === 1 && !!selectedElements[0].link\n    });\n  }\n});\nconst getContextMenuLabel = (elements, appState) => {\n  const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_15__.getSelectedElements)(elements, appState);\n  const label = selectedElements[0].link ? (0,_typeChecks__WEBPACK_IMPORTED_MODULE_22__.isEmbeddableElement)(selectedElements[0]) ? \"labels.link.editEmbed\" : \"labels.link.edit\" : (0,_typeChecks__WEBPACK_IMPORTED_MODULE_22__.isEmbeddableElement)(selectedElements[0]) ? \"labels.link.createEmbed\" : \"labels.link.create\";\n  return label;\n};\nconst getLinkHandleFromCoords = ([x1, y1, x2, y2], angle, appState) => {\n  const size = _renderer_renderElement__WEBPACK_IMPORTED_MODULE_11__.DEFAULT_LINK_SIZE;\n  const zoom = appState.zoom.value > 1 ? appState.zoom.value : 1; //zsviczian\n\n  const linkWidth = size / zoom; //zsviczian\n\n  const linkHeight = size / zoom; //zsviczian\n\n  const linkMarginY = size / zoom; //zsviczian\n\n  const centerX = (x1 + x2) / 2;\n  const centerY = (y1 + y2) / 2;\n  const centeringOffset = (size - 8) / (2 * zoom); //zsviczian\n\n  const dashedLineMargin = 4 / zoom; //zsviczian\n  // Same as `ne` resize handle\n\n  const x = x2 + dashedLineMargin - centeringOffset;\n  const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;\n  const [rotatedX, rotatedY] = (0,_math__WEBPACK_IMPORTED_MODULE_12__.rotate)(x + linkWidth / 2, y + linkHeight / 2, centerX, centerY, angle);\n  return [rotatedX - linkWidth / 2, rotatedY - linkHeight / 2, linkWidth, linkHeight];\n};\nconst isPointHittingLinkIcon = (element, appState, [x, y]) => {\n  const threshold = 4 / appState.zoom.value;\n  const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_17__.getElementAbsoluteCoords)(element);\n  const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords([x1, y1, x2, y2], element.angle, appState);\n  const hitLink = x > linkX - threshold && x < linkX + threshold + linkWidth && y > linkY - threshold && y < linkY + linkHeight + threshold;\n  return hitLink;\n};\nconst isPointHittingLink = (element, appState, [x, y], isMobile) => {\n  if (!element.link || appState.selectedElementIds[element.id]) {\n    return false;\n  }\n\n  const threshold = 4 / appState.zoom.value;\n\n  if (!isMobile && appState.viewModeEnabled && (0,_collision__WEBPACK_IMPORTED_MODULE_16__.isPointHittingElementBoundingBox)(element, [x, y], threshold, null)) {\n    return true;\n  }\n\n  return isPointHittingLinkIcon(element, appState, [x, y]);\n};\nlet HYPERLINK_TOOLTIP_TIMEOUT_ID = null;\nconst showHyperlinkTooltip = (element, appState) => {\n  if (HYPERLINK_TOOLTIP_TIMEOUT_ID) {\n    clearTimeout(HYPERLINK_TOOLTIP_TIMEOUT_ID);\n  }\n\n  HYPERLINK_TOOLTIP_TIMEOUT_ID = window.setTimeout(() => renderTooltip(element, appState), _constants__WEBPACK_IMPORTED_MODULE_13__.HYPERLINK_TOOLTIP_DELAY);\n};\n\nconst renderTooltip = (element, appState) => {\n  if (!element.link) {\n    return;\n  }\n\n  const tooltipDiv = (0,_components_Tooltip__WEBPACK_IMPORTED_MODULE_14__.getTooltipDiv)();\n  tooltipDiv.classList.add(\"excalidraw-tooltip--visible\");\n  tooltipDiv.style.maxWidth = \"20rem\";\n  tooltipDiv.textContent = element.link;\n  const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_17__.getElementAbsoluteCoords)(element);\n  const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords([x1, y1, x2, y2], element.angle, appState);\n  const linkViewportCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.sceneCoordsToViewportCoords)({\n    sceneX: linkX,\n    sceneY: linkY\n  }, appState);\n  (0,_components_Tooltip__WEBPACK_IMPORTED_MODULE_14__.updateTooltipPosition)(tooltipDiv, {\n    left: linkViewportCoords.x,\n    top: linkViewportCoords.y,\n    width: linkWidth,\n    height: linkHeight\n  }, \"top\");\n  (0,_analytics__WEBPACK_IMPORTED_MODULE_20__.trackEvent)(\"hyperlink\", \"tooltip\", \"link-icon\");\n  IS_HYPERLINK_TOOLTIP_VISIBLE = true;\n};\n\nconst hideHyperlinkToolip = () => {\n  if (HYPERLINK_TOOLTIP_TIMEOUT_ID) {\n    clearTimeout(HYPERLINK_TOOLTIP_TIMEOUT_ID);\n  }\n\n  if (IS_HYPERLINK_TOOLTIP_VISIBLE) {\n    IS_HYPERLINK_TOOLTIP_VISIBLE = false;\n    (0,_components_Tooltip__WEBPACK_IMPORTED_MODULE_14__.getTooltipDiv)().classList.remove(\"excalidraw-tooltip--visible\");\n  }\n};\nconst shouldHideLinkPopup = (element, appState, [clientX, clientY]) => {\n  const {\n    x: sceneX,\n    y: sceneY\n  } = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.viewportCoordsToSceneCoords)({\n    clientX,\n    clientY\n  }, appState);\n  const threshold = 15 / appState.zoom.value; // hitbox to prevent hiding when hovered in element bounding box\n\n  if ((0,_collision__WEBPACK_IMPORTED_MODULE_16__.isPointHittingElementBoundingBox)(element, [sceneX, sceneY], threshold, null)) {\n    return false;\n  }\n\n  const [x1, y1, x2] = (0,___WEBPACK_IMPORTED_MODULE_17__.getElementAbsoluteCoords)(element); // hit box to prevent hiding when hovered in the vertical area between element and popover\n\n  if (sceneX >= x1 && sceneX <= x2 && sceneY >= y1 - SPACE_BOTTOM && sceneY <= y1) {\n    return false;\n  } // hit box to prevent hiding when hovered around popover within threshold\n\n\n  const {\n    x: popoverX,\n    y: popoverY\n  } = getCoordsForPopover(element, appState);\n\n  if (clientX >= popoverX - threshold && clientX <= popoverX + CONTAINER_WIDTH + CONTAINER_PADDING * 2 + threshold && clientY >= popoverY - threshold && clientY <= popoverY + threshold + CONTAINER_PADDING * 2 + CONTAINER_HEIGHT) {\n    return false;\n  }\n\n  return true;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/Hyperlink.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"EXTERNAL_LINK_IMG\": () => (/* binding */ EXTERNAL_LINK_IMG),\n/* harmony export */   \"Hyperlink\": () => (/* binding */ Hyperlink),\n/* harmony export */   \"actionLink\": () => (/* binding */ actionLink),\n/* harmony export */   \"getContextMenuLabel\": () => (/* binding */ getContextMenuLabel),\n/* harmony export */   \"getLinkHandleFromCoords\": () => (/* binding */ getLinkHandleFromCoords),\n/* harmony export */   \"hideHyperlinkToolip\": () => (/* binding */ hideHyperlinkToolip),\n/* harmony export */   \"isPointHittingLink\": () => (/* binding */ isPointHittingLink),\n/* harmony export */   \"isPointHittingLinkIcon\": () => (/* binding */ isPointHittingLinkIcon),\n/* harmony export */   \"shouldHideLinkPopup\": () => (/* binding */ shouldHideLinkPopup),\n/* harmony export */   \"showHyperlinkTooltip\": () => (/* binding */ showHyperlinkTooltip)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _embeddable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _actions_register__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../actions/register */ \"./actions/register.ts\");\n/* harmony import */ var _components_ToolButton__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/ToolButton */ \"./components/ToolButton.tsx\");\n/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../components/icons */ \"./components/icons.tsx\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_8__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _renderer_renderElement__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../renderer/renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _components_Tooltip__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../components/Tooltip */ \"./components/Tooltip.tsx\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _collision__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./collision */ \"./element/collision.ts\");\n/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! . */ \"./element/index.ts\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../data/url */ \"./data/url.ts\");\n/* harmony import */ var _Hyperlink_scss__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Hyperlink.scss */ \"./element/Hyperlink.scss\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _components_App__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../components/App */ \"./components/App.tsx\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst CONTAINER_WIDTH = 320;\nconst SPACE_BOTTOM = 85;\nconst CONTAINER_PADDING = 5;\nconst CONTAINER_HEIGHT = 42;\nconst AUTO_HIDE_TIMEOUT = 500;\nconst EXTERNAL_LINK_IMG = document.createElement(\"img\");\nEXTERNAL_LINK_IMG.src = `data:${_constants__WEBPACK_IMPORTED_MODULE_13__.MIME_TYPES.svg}, ${encodeURIComponent(`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#1971c2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-external-link\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>`)}`;\nlet IS_HYPERLINK_TOOLTIP_VISIBLE = false;\nconst embeddableLinkCache = new Map();\nconst Hyperlink = ({\n  element,\n  setAppState,\n  onLinkOpen,\n  setToast,\n  updateEmbedValidationStatus\n}) => {\n  const appState = (0,_components_App__WEBPACK_IMPORTED_MODULE_21__.useExcalidrawAppState)();\n  const appProps = (0,_components_App__WEBPACK_IMPORTED_MODULE_21__.useAppProps)();\n  const linkVal = element.link || \"\";\n  const [inputVal, setInputVal] = (0,react__WEBPACK_IMPORTED_MODULE_8__.useState)(linkVal);\n  const inputRef = (0,react__WEBPACK_IMPORTED_MODULE_8__.useRef)(null);\n  const isEditing = appState.showHyperlinkPopup === \"editor\";\n  const handleSubmit = (0,react__WEBPACK_IMPORTED_MODULE_8__.useCallback)(() => {\n    var _a;\n\n    if (!inputRef.current) {\n      return;\n    }\n\n    const link = (0,_data_url__WEBPACK_IMPORTED_MODULE_18__.normalizeLink)(inputRef.current.value) || null;\n\n    if (!element.link && link) {\n      (0,_analytics__WEBPACK_IMPORTED_MODULE_20__.trackEvent)(\"hyperlink\", \"create\");\n    }\n\n    if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_22__.isEmbeddableElement)(element)) {\n      if (((_a = appState.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) === element) {\n        setAppState({\n          activeEmbeddable: null\n        });\n      }\n\n      if (!link) {\n        (0,_mutateElement__WEBPACK_IMPORTED_MODULE_3__.mutateElement)(element, {\n          link: null\n        });\n        updateEmbedValidationStatus(element, false);\n        return;\n      }\n\n      if (!(0,_embeddable__WEBPACK_IMPORTED_MODULE_2__.embeddableURLValidator)(link, appProps.validateEmbeddable)) {\n        if (link) {\n          setToast({\n            message: (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"toast.unableToEmbed\"),\n            closable: true\n          });\n        }\n\n        element.link && embeddableLinkCache.set(element.id, element.link);\n        (0,_mutateElement__WEBPACK_IMPORTED_MODULE_3__.mutateElement)(element, {\n          link\n        });\n        updateEmbedValidationStatus(element, false);\n      } else {\n        const {\n          width,\n          height\n        } = element;\n        const embedLink = (0,_embeddable__WEBPACK_IMPORTED_MODULE_2__.getEmbedLink)(link);\n\n        if (embedLink === null || embedLink === void 0 ? void 0 : embedLink.warning) {\n          setToast({\n            message: embedLink.warning,\n            closable: true\n          });\n        }\n\n        const ar = embedLink ? embedLink.intrinsicSize.w / embedLink.intrinsicSize.h : 1;\n        const hasLinkChanged = embeddableLinkCache.get(element.id) !== element.link;\n        (0,_mutateElement__WEBPACK_IMPORTED_MODULE_3__.mutateElement)(element, Object.assign(Object.assign({}, hasLinkChanged ? {\n          width: (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"video\" ? width > height ? width : height * ar : width,\n          height: (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"video\" ? width > height ? width / ar : height : height\n        } : {}), {\n          link\n        }));\n        updateEmbedValidationStatus(element, true);\n\n        if (embeddableLinkCache.has(element.id)) {\n          embeddableLinkCache.delete(element.id);\n        }\n      }\n    } else {\n      (0,_mutateElement__WEBPACK_IMPORTED_MODULE_3__.mutateElement)(element, {\n        link\n      });\n    }\n  }, [element, setToast, appProps.validateEmbeddable, appState.activeEmbeddable, setAppState, updateEmbedValidationStatus]);\n  (0,react__WEBPACK_IMPORTED_MODULE_8__.useLayoutEffect)(() => {\n    return () => {\n      handleSubmit();\n    };\n  }, [handleSubmit]);\n  (0,react__WEBPACK_IMPORTED_MODULE_8__.useEffect)(() => {\n    let timeoutId = null;\n\n    const handlePointerMove = event => {\n      if (isEditing) {\n        return;\n      }\n\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n\n      const shouldHide = shouldHideLinkPopup(element, appState, [event.clientX, event.clientY]);\n\n      if (shouldHide) {\n        timeoutId = window.setTimeout(() => {\n          setAppState({\n            showHyperlinkPopup: false\n          });\n        }, AUTO_HIDE_TIMEOUT);\n      }\n    };\n\n    window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_13__.EVENT.POINTER_MOVE, handlePointerMove, false);\n    return () => {\n      window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_13__.EVENT.POINTER_MOVE, handlePointerMove, false);\n\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [appState, element, isEditing, setAppState]);\n  const handleRemove = (0,react__WEBPACK_IMPORTED_MODULE_8__.useCallback)(() => {\n    (0,_analytics__WEBPACK_IMPORTED_MODULE_20__.trackEvent)(\"hyperlink\", \"delete\");\n    (0,_mutateElement__WEBPACK_IMPORTED_MODULE_3__.mutateElement)(element, {\n      link: null\n    });\n\n    if (isEditing) {\n      inputRef.current.value = \"\";\n    }\n\n    setAppState({\n      showHyperlinkPopup: false\n    });\n  }, [setAppState, element, isEditing]);\n\n  const onEdit = () => {\n    (0,_analytics__WEBPACK_IMPORTED_MODULE_20__.trackEvent)(\"hyperlink\", \"edit\", \"popup-ui\");\n    setAppState({\n      showHyperlinkPopup: \"editor\"\n    });\n  };\n\n  const {\n    x,\n    y\n  } = getCoordsForPopover(element, appState);\n\n  if (appState.contextMenu || appState.draggingElement || appState.resizingElement || appState.isRotating || appState.openMenu || appState.viewModeEnabled) {\n    return null;\n  }\n\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n    className: \"excalidraw-hyperlinkContainer\",\n    style: {\n      top: `${y}px`,\n      left: `${x}px`,\n      width: CONTAINER_WIDTH,\n      padding: CONTAINER_PADDING\n    },\n    onClick: () => {\n      if (!element.link && !isEditing) {\n        setAppState({\n          showHyperlinkPopup: \"editor\"\n        });\n      }\n    }\n  }, {\n    children: [isEditing ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", {\n      className: (0,clsx__WEBPACK_IMPORTED_MODULE_9__[\"default\"])(\"excalidraw-hyperlinkContainer-input\"),\n      placeholder: \"Type or paste your link here\",\n      ref: inputRef,\n      value: inputVal,\n      onChange: event => setInputVal(event.target.value),\n      autoFocus: true,\n      onKeyDown: event => {\n        event.stopPropagation(); // prevent cmd/ctrl+k shortcut when editing link\n\n        if (event[_keys__WEBPACK_IMPORTED_MODULE_10__.KEYS.CTRL_OR_CMD] && event.key === _keys__WEBPACK_IMPORTED_MODULE_10__.KEYS.K) {\n          event.preventDefault();\n        }\n\n        if (event.key === _keys__WEBPACK_IMPORTED_MODULE_10__.KEYS.ENTER || event.key === _keys__WEBPACK_IMPORTED_MODULE_10__.KEYS.ESCAPE) {\n          handleSubmit();\n          setAppState({\n            showHyperlinkPopup: \"info\"\n          });\n        }\n      }\n    }) : element.link ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"a\", Object.assign({\n      href: (0,_data_url__WEBPACK_IMPORTED_MODULE_18__.normalizeLink)(element.link || \"\"),\n      className: \"excalidraw-hyperlinkContainer-link\",\n      target: (0,_data_url__WEBPACK_IMPORTED_MODULE_18__.isLocalLink)(element.link) ? \"_self\" : \"_blank\",\n      onClick: event => {\n        if (element.link && onLinkOpen) {\n          const customEvent = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.wrapEvent)(_constants__WEBPACK_IMPORTED_MODULE_13__.EVENT.EXCALIDRAW_LINK, event.nativeEvent);\n          onLinkOpen(Object.assign(Object.assign({}, element), {\n            link: (0,_data_url__WEBPACK_IMPORTED_MODULE_18__.normalizeLink)(element.link)\n          }), customEvent);\n\n          if (customEvent.defaultPrevented) {\n            event.preventDefault();\n          }\n        }\n      },\n      rel: \"noopener noreferrer\"\n    }, {\n      children: element.link\n    })) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n      className: \"excalidraw-hyperlinkContainer-link\"\n    }, {\n      children: (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"labels.link.empty\")\n    })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n      className: \"excalidraw-hyperlinkContainer__buttons\"\n    }, {\n      children: [!isEditing && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ToolButton__WEBPACK_IMPORTED_MODULE_5__.ToolButton, {\n        type: \"button\",\n        title: (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"buttons.edit\"),\n        \"aria-label\": (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"buttons.edit\"),\n        label: (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"buttons.edit\"),\n        onClick: onEdit,\n        className: \"excalidraw-hyperlinkContainer--edit\",\n        icon: _components_icons__WEBPACK_IMPORTED_MODULE_6__.FreedrawIcon\n      }), linkVal && !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_22__.isEmbeddableElement)(element) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ToolButton__WEBPACK_IMPORTED_MODULE_5__.ToolButton, {\n        type: \"button\",\n        title: (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"buttons.remove\"),\n        \"aria-label\": (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"buttons.remove\"),\n        label: (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"buttons.remove\"),\n        onClick: handleRemove,\n        className: \"excalidraw-hyperlinkContainer--remove\",\n        icon: _components_icons__WEBPACK_IMPORTED_MODULE_6__.TrashIcon\n      })]\n    }))]\n  }));\n};\n\nconst getCoordsForPopover = (element, appState) => {\n  const [x1, y1] = (0,___WEBPACK_IMPORTED_MODULE_17__.getElementAbsoluteCoords)(element);\n  const {\n    x: viewportX,\n    y: viewportY\n  } = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.sceneCoordsToViewportCoords)({\n    sceneX: x1 + element.width / 2,\n    sceneY: y1\n  }, appState);\n  const x = viewportX - appState.offsetLeft - CONTAINER_WIDTH / 2;\n  const y = viewportY - appState.offsetTop - SPACE_BOTTOM;\n  return {\n    x,\n    y\n  };\n};\n\nconst actionLink = (0,_actions_register__WEBPACK_IMPORTED_MODULE_4__.register)({\n  name: \"hyperlink\",\n  perform: (elements, appState) => {\n    if (appState.showHyperlinkPopup === \"editor\") {\n      return false;\n    }\n\n    return {\n      elements,\n      appState: Object.assign(Object.assign({}, appState), {\n        showHyperlinkPopup: \"editor\",\n        openMenu: null\n      }),\n      commitToHistory: true\n    };\n  },\n  trackEvent: {\n    category: \"hyperlink\",\n    action: \"click\"\n  },\n  keyTest: event => event[_keys__WEBPACK_IMPORTED_MODULE_10__.KEYS.CTRL_OR_CMD] && event.key === _keys__WEBPACK_IMPORTED_MODULE_10__.KEYS.K,\n  contextItemLabel: (elements, appState) => getContextMenuLabel(elements, appState),\n  predicate: (elements, appState) => {\n    const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_15__.getSelectedElements)(elements, appState);\n    return selectedElements.length === 1;\n  },\n  PanelComponent: ({\n    elements,\n    appState,\n    updateData\n  }) => {\n    const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_15__.getSelectedElements)(elements, appState);\n    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ToolButton__WEBPACK_IMPORTED_MODULE_5__.ToolButton, {\n      type: \"button\",\n      icon: _components_icons__WEBPACK_IMPORTED_MODULE_6__.LinkIcon,\n      \"aria-label\": (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(getContextMenuLabel(elements, appState)),\n      title: `${(0,_typeChecks__WEBPACK_IMPORTED_MODULE_22__.isEmbeddableElement)(elements[0]) ? (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"labels.link.labelEmbed\") : (0,_i18n__WEBPACK_IMPORTED_MODULE_7__.t)(\"labels.link.label\")} - ${(0,_utils__WEBPACK_IMPORTED_MODULE_1__.getShortcutKey)(\"CtrlOrCmd+K\")}`,\n      onClick: () => updateData(null),\n      selected: selectedElements.length === 1 && !!selectedElements[0].link\n    });\n  }\n});\nconst getContextMenuLabel = (elements, appState) => {\n  const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_15__.getSelectedElements)(elements, appState);\n  const label = selectedElements[0].link ? (0,_typeChecks__WEBPACK_IMPORTED_MODULE_22__.isEmbeddableElement)(selectedElements[0]) ? \"labels.link.editEmbed\" : \"labels.link.edit\" : (0,_typeChecks__WEBPACK_IMPORTED_MODULE_22__.isEmbeddableElement)(selectedElements[0]) ? \"labels.link.createEmbed\" : \"labels.link.create\";\n  return label;\n};\nconst getLinkHandleFromCoords = ([x1, y1, x2, y2], angle, appState) => {\n  const size = _renderer_renderElement__WEBPACK_IMPORTED_MODULE_11__.DEFAULT_LINK_SIZE;\n  const zoom = appState.zoom.value > 1 ? appState.zoom.value : 1; //zsviczian\n\n  const linkWidth = size / zoom; //zsviczian\n\n  const linkHeight = size / zoom; //zsviczian\n\n  const linkMarginY = size / zoom; //zsviczian\n\n  const centerX = (x1 + x2) / 2;\n  const centerY = (y1 + y2) / 2;\n  const centeringOffset = (size - 8) / (2 * zoom); //zsviczian\n\n  const dashedLineMargin = 4 / zoom; //zsviczian\n  // Same as `ne` resize handle\n\n  const x = x2 + dashedLineMargin - centeringOffset;\n  const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;\n  const [rotatedX, rotatedY] = (0,_math__WEBPACK_IMPORTED_MODULE_12__.rotate)(x + linkWidth / 2, y + linkHeight / 2, centerX, centerY, angle);\n  return [rotatedX - linkWidth / 2, rotatedY - linkHeight / 2, linkWidth, linkHeight];\n};\nconst isPointHittingLinkIcon = (element, appState, [x, y]) => {\n  const threshold = 4 / appState.zoom.value;\n  const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_17__.getElementAbsoluteCoords)(element);\n  const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords([x1, y1, x2, y2], element.angle, appState);\n  const hitLink = x > linkX - threshold && x < linkX + threshold + linkWidth && y > linkY - threshold && y < linkY + linkHeight + threshold;\n  return hitLink;\n};\nconst isPointHittingLink = (element, appState, [x, y], isMobile) => {\n  if (!element.link || appState.selectedElementIds[element.id]) {\n    return false;\n  }\n\n  const threshold = 4 / appState.zoom.value;\n\n  if (!isMobile && appState.viewModeEnabled && (0,_collision__WEBPACK_IMPORTED_MODULE_16__.isPointHittingElementBoundingBox)(element, [x, y], threshold, null)) {\n    return true;\n  }\n\n  return isPointHittingLinkIcon(element, appState, [x, y]);\n};\nlet HYPERLINK_TOOLTIP_TIMEOUT_ID = null;\nconst showHyperlinkTooltip = (element, appState) => {\n  if (HYPERLINK_TOOLTIP_TIMEOUT_ID) {\n    clearTimeout(HYPERLINK_TOOLTIP_TIMEOUT_ID);\n  }\n\n  HYPERLINK_TOOLTIP_TIMEOUT_ID = window.setTimeout(() => renderTooltip(element, appState), _constants__WEBPACK_IMPORTED_MODULE_13__.HYPERLINK_TOOLTIP_DELAY);\n};\n\nconst renderTooltip = (element, appState) => {\n  if (!element.link) {\n    return;\n  }\n\n  const tooltipDiv = (0,_components_Tooltip__WEBPACK_IMPORTED_MODULE_14__.getTooltipDiv)();\n  tooltipDiv.classList.add(\"excalidraw-tooltip--visible\");\n  tooltipDiv.style.maxWidth = \"20rem\";\n  tooltipDiv.textContent = element.link;\n  const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_17__.getElementAbsoluteCoords)(element);\n  const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords([x1, y1, x2, y2], element.angle, appState);\n  const linkViewportCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.sceneCoordsToViewportCoords)({\n    sceneX: linkX,\n    sceneY: linkY\n  }, appState);\n  (0,_components_Tooltip__WEBPACK_IMPORTED_MODULE_14__.updateTooltipPosition)(tooltipDiv, {\n    left: linkViewportCoords.x,\n    top: linkViewportCoords.y,\n    width: linkWidth,\n    height: linkHeight\n  }, \"top\");\n  (0,_analytics__WEBPACK_IMPORTED_MODULE_20__.trackEvent)(\"hyperlink\", \"tooltip\", \"link-icon\");\n  IS_HYPERLINK_TOOLTIP_VISIBLE = true;\n};\n\nconst hideHyperlinkToolip = () => {\n  if (HYPERLINK_TOOLTIP_TIMEOUT_ID) {\n    clearTimeout(HYPERLINK_TOOLTIP_TIMEOUT_ID);\n  }\n\n  if (IS_HYPERLINK_TOOLTIP_VISIBLE) {\n    IS_HYPERLINK_TOOLTIP_VISIBLE = false;\n    (0,_components_Tooltip__WEBPACK_IMPORTED_MODULE_14__.getTooltipDiv)().classList.remove(\"excalidraw-tooltip--visible\");\n  }\n};\nconst shouldHideLinkPopup = (element, appState, [clientX, clientY]) => {\n  const {\n    x: sceneX,\n    y: sceneY\n  } = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.viewportCoordsToSceneCoords)({\n    clientX,\n    clientY\n  }, appState);\n  const threshold = 15 / appState.zoom.value; // hitbox to prevent hiding when hovered in element bounding box\n\n  if ((0,_collision__WEBPACK_IMPORTED_MODULE_16__.isPointHittingElementBoundingBox)(element, [sceneX, sceneY], threshold, null)) {\n    return false;\n  }\n\n  const [x1, y1, x2] = (0,___WEBPACK_IMPORTED_MODULE_17__.getElementAbsoluteCoords)(element); // hit box to prevent hiding when hovered in the vertical area between element and popover\n\n  if (sceneX >= x1 && sceneX <= x2 && sceneY >= y1 - SPACE_BOTTOM && sceneY <= y1) {\n    return false;\n  } // hit box to prevent hiding when hovered around popover within threshold\n\n\n  const {\n    x: popoverX,\n    y: popoverY\n  } = getCoordsForPopover(element, appState);\n\n  if (clientX >= popoverX - threshold && clientX <= popoverX + CONTAINER_WIDTH + CONTAINER_PADDING * 2 + threshold && clientY >= popoverY - threshold && clientY <= popoverY + threshold + CONTAINER_PADDING * 2 + CONTAINER_HEIGHT) {\n    return false;\n  }\n\n  return true;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/Hyperlink.tsx?");
 
 /***/ }),
 
@@ -2444,7 +2455,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"actionSetEmbeddableAsActiveTool\": () => (/* binding */ actionSetEmbeddableAsActiveTool),\n/* harmony export */   \"createPlaceholderEmbeddableLabel\": () => (/* binding */ createPlaceholderEmbeddableLabel),\n/* harmony export */   \"createSrcDoc\": () => (/* binding */ createSrcDoc),\n/* harmony export */   \"embeddableURLValidator\": () => (/* binding */ embeddableURLValidator),\n/* harmony export */   \"extractSrc\": () => (/* binding */ extractSrc),\n/* harmony export */   \"getEmbedLink\": () => (/* binding */ getEmbedLink),\n/* harmony export */   \"isIframeLikeOrItsLabel\": () => (/* binding */ isIframeLikeOrItsLabel)\n/* harmony export */ });\n/* harmony import */ var _actions_register__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../actions/register */ \"./actions/register.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _cursor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../cursor */ \"./cursor.ts\");\n/* harmony import */ var _newElement__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./newElement */ \"./element/newElement.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n\n\n\n\n\n\n\n\nconst embeddedLinkCache = new Map();\nconst RE_YOUTUBE = /^(?:http(?:s)?:\\/\\/)?(?:www\\.)?youtu(?:be\\.com|\\.be)\\/(embed\\/|watch\\?v=|shorts\\/|playlist\\?list=|embed\\/videoseries\\?list=)?([a-zA-Z0-9_-]+)(?:\\?t=|.*&t=|\\?start=|.*&start=)?([a-zA-Z0-9_-]+)?[^\\s]*$/;\nconst RE_VIMEO = /^(?:http(?:s)?:\\/\\/)?(?:(?:w){3}.)?(?:player\\.)?vimeo\\.com\\/(?:video\\/)?([^?\\s]+)(?:\\?.*)?$/;\nconst RE_FIGMA = /^https:\\/\\/(?:www\\.)?figma\\.com/;\nconst RE_GH_GIST = /^https:\\/\\/gist\\.github\\.com/;\nconst RE_GH_GIST_EMBED = /^<script[\\s\\S]*?\\ssrc=[\"'](https:\\/\\/gist.github.com\\/.*?)\\.js[\"']/i; // not anchored to start to allow <blockquote> twitter embeds\n\nconst RE_TWITTER = /(?:http(?:s)?:\\/\\/)?(?:(?:w){3}.)?twitter.com/;\nconst RE_TWITTER_EMBED = /^<blockquote[\\s\\S]*?\\shref=[\"'](https:\\/\\/twitter.com\\/[^\"']*)/i;\nconst RE_VALTOWN = /^https:\\/\\/(?:www\\.)?val.town\\/(v|embed)\\/[a-zA-Z_$][0-9a-zA-Z_$]+\\.[a-zA-Z_$][0-9a-zA-Z_$]+/;\nconst RE_GENERIC_EMBED = /^<(?:iframe|blockquote)[\\s\\S]*?\\s(?:src|href)=[\"']([^\"']*)[\"'][\\s\\S]*?>$/i;\nconst RE_GIPHY = /giphy.com\\/(?:clips|embed|gifs)\\/[a-zA-Z0-9]*?-?([a-zA-Z0-9]+)(?:[^a-zA-Z0-9]|$)/;\nconst ALLOWED_DOMAINS = new Set([\"youtube.com\", \"youtu.be\", \"vimeo.com\", \"player.vimeo.com\", \"figma.com\", \"link.excalidraw.com\", \"gist.github.com\", \"twitter.com\", \"*.simplepdf.eu\", \"stackblitz.com\", \"val.town\", \"giphy.com\", \"dddice.com\"]);\nconst createSrcDoc = body => {\n  return `<html><body>${body}</body></html>`;\n};\nconst getEmbedLink = link => {\n  if (!link) {\n    return null;\n  }\n\n  if (link.startsWith(\"data:text/html\")) {\n    //zsviczian\n    return {\n      link,\n      intrinsicSize: {\n        w: 550,\n        h: 720\n      },\n      type: \"generic\"\n    };\n  }\n\n  if (embeddedLinkCache.has(link)) {\n    return embeddedLinkCache.get(link);\n  }\n\n  const originalLink = link;\n  let type = \"generic\";\n  let aspectRatio = {\n    w: 560,\n    h: 840\n  };\n  const ytLink = link.match(RE_YOUTUBE);\n\n  if (ytLink === null || ytLink === void 0 ? void 0 : ytLink[2]) {\n    const time = ytLink[3] ? `&start=${ytLink[3]}` : ``;\n    const isPortrait = link.includes(\"shorts\");\n    type = \"video\";\n\n    switch (ytLink[1]) {\n      case \"embed/\":\n      case \"watch?v=\":\n      case \"shorts/\":\n        link = `https://www.youtube.com/embed/${ytLink[2]}?enablejsapi=1${time}`;\n        break;\n\n      case \"playlist?list=\":\n      case \"embed/videoseries?list=\":\n        link = `https://www.youtube.com/embed/videoseries?list=${ytLink[2]}&enablejsapi=1${time}`;\n        break;\n\n      default:\n        link = `https://www.youtube.com/embed/${ytLink[2]}?enablejsapi=1${time}`;\n        break;\n    }\n\n    aspectRatio = isPortrait ? {\n      w: 315,\n      h: 560\n    } : {\n      w: 560,\n      h: 315\n    };\n    embeddedLinkCache.set(originalLink, {\n      link,\n      intrinsicSize: aspectRatio,\n      type\n    });\n    return {\n      link,\n      intrinsicSize: aspectRatio,\n      type\n    };\n  }\n\n  const vimeoLink = link.match(RE_VIMEO);\n\n  if (vimeoLink === null || vimeoLink === void 0 ? void 0 : vimeoLink[1]) {\n    const target = vimeoLink === null || vimeoLink === void 0 ? void 0 : vimeoLink[1];\n    const warning = !/^\\d+$/.test(target) ? (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toast.unrecognizedLinkFormat\") : undefined;\n    type = \"video\";\n    link = `https://player.vimeo.com/video/${target}?api=1`;\n    aspectRatio = {\n      w: 560,\n      h: 315\n    }; //warning deliberately ommited so it is displayed only once per link\n    //same link next time will be served from cache\n\n    embeddedLinkCache.set(originalLink, {\n      link,\n      intrinsicSize: aspectRatio,\n      type\n    });\n    return {\n      link,\n      intrinsicSize: aspectRatio,\n      type,\n      warning\n    };\n  }\n\n  const figmaLink = link.match(RE_FIGMA);\n\n  if (figmaLink) {\n    type = \"generic\";\n    link = `https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(link)}`;\n    aspectRatio = {\n      w: 550,\n      h: 550\n    };\n    embeddedLinkCache.set(originalLink, {\n      link,\n      intrinsicSize: aspectRatio,\n      type\n    });\n    return {\n      link,\n      intrinsicSize: aspectRatio,\n      type\n    };\n  }\n\n  const valLink = link.match(RE_VALTOWN);\n\n  if (valLink) {\n    link = valLink[1] === \"embed\" ? valLink[0] : valLink[0].replace(\"/v\", \"/embed\");\n    embeddedLinkCache.set(originalLink, {\n      link,\n      intrinsicSize: aspectRatio,\n      type\n    });\n    return {\n      link,\n      intrinsicSize: aspectRatio,\n      type\n    };\n  }\n\n  if (RE_TWITTER.test(link)) {\n    let ret; // assume embed code\n\n    if (/<blockquote/.test(link)) {\n      const srcDoc = createSrcDoc(link);\n      ret = {\n        type: \"document\",\n        srcdoc: () => srcDoc,\n        intrinsicSize: {\n          w: 480,\n          h: 480\n        }\n      }; // assume regular tweet url\n    } else {\n      ret = {\n        type: \"document\",\n        srcdoc: theme => createSrcDoc(`<blockquote class=\"twitter-tweet\" data-dnt=\"true\" data-theme=\"${theme}\"><a href=\"${link}\"></a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>`),\n        intrinsicSize: {\n          w: 480,\n          h: 480\n        }\n      };\n    }\n\n    embeddedLinkCache.set(originalLink, ret);\n    return ret;\n  }\n\n  if (RE_GH_GIST.test(link)) {\n    let ret; // assume embed code\n\n    if (/<script>/.test(link)) {\n      const srcDoc = createSrcDoc(link);\n      ret = {\n        type: \"document\",\n        srcdoc: () => srcDoc,\n        intrinsicSize: {\n          w: 550,\n          h: 720\n        }\n      }; // assume regular url\n    } else {\n      ret = {\n        type: \"document\",\n        srcdoc: () => createSrcDoc(`\n          <script src=\"${link}.js\"></script>\n          <style type=\"text/css\">\n            * { margin: 0px; }\n            table, .gist { height: 100%; }\n            .gist .gist-file { height: calc(100vh - 2px); padding: 0px; display: grid; grid-template-rows: 1fr auto; }\n          </style>\n        `),\n        intrinsicSize: {\n          w: 550,\n          h: 720\n        }\n      };\n    }\n\n    embeddedLinkCache.set(link, ret);\n    return ret;\n  }\n\n  embeddedLinkCache.set(link, {\n    link,\n    intrinsicSize: aspectRatio,\n    type\n  });\n  return {\n    link,\n    intrinsicSize: aspectRatio,\n    type\n  };\n};\nconst isIframeLikeOrItsLabel = element => {\n  if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_7__.isIframeLikeElement)(element)) {\n    return true;\n  }\n\n  if (element.type === \"text\") {\n    const container = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getContainerElement)(element);\n\n    if (container && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_7__.isFrameLikeElement)(container)) {\n      return true;\n    }\n  }\n\n  return false;\n};\nconst createPlaceholderEmbeddableLabel = element => {\n  var _a;\n\n  let text;\n\n  if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_7__.isIframeElement)(element)) {\n    text = \"IFrame element\";\n  } else {\n    text = !element.link || (element === null || element === void 0 ? void 0 : element.link) === \"\" ? \"Empty Web-Embed\" : element.link;\n  }\n\n  const fontSize = Math.max(Math.min(element.width / 2, element.width / text.length), element.width / 30);\n  const fontFamily = _constants__WEBPACK_IMPORTED_MODULE_1__.FONT_FAMILY.Helvetica;\n  const fontString = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.getFontString)({\n    fontSize,\n    fontFamily\n  });\n  return (0,_newElement__WEBPACK_IMPORTED_MODULE_5__.newTextElement)({\n    x: element.x + element.width / 2,\n    y: element.y + element.height / 2,\n    strokeColor: element.strokeColor !== \"transparent\" ? element.strokeColor : \"black\",\n    backgroundColor: \"transparent\",\n    fontFamily,\n    fontSize,\n    text: (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.wrapText)(text, fontString, element.width - 20),\n    rawText: text,\n    textAlign: \"center\",\n    verticalAlign: _constants__WEBPACK_IMPORTED_MODULE_1__.VERTICAL_ALIGN.MIDDLE,\n    angle: (_a = element.angle) !== null && _a !== void 0 ? _a : 0\n  });\n};\nconst actionSetEmbeddableAsActiveTool = (0,_actions_register__WEBPACK_IMPORTED_MODULE_0__.register)({\n  name: \"setEmbeddableAsActiveTool\",\n  trackEvent: {\n    category: \"toolbar\"\n  },\n  perform: (elements, appState, _, app) => {\n    const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.updateActiveTool)(appState, {\n      type: \"embeddable\"\n    });\n    (0,_cursor__WEBPACK_IMPORTED_MODULE_4__.setCursorForShape)(app.canvas, Object.assign(Object.assign({}, appState), {\n      activeTool: nextActiveTool\n    }));\n    return {\n      elements,\n      appState: Object.assign(Object.assign({}, appState), {\n        activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_3__.updateActiveTool)(appState, {\n          type: \"embeddable\"\n        })\n      }),\n      commitToHistory: false\n    };\n  }\n});\n\nconst validateHostname = (url,\n/** using a Set assumes it already contains normalized bare domains */\nallowedHostnames) => {\n  try {\n    const {\n      hostname\n    } = new URL(url);\n    const bareDomain = hostname.replace(/^www\\./, \"\");\n    const bareDomainWithFirstSubdomainWildcarded = bareDomain.replace(/^([^.]+)/, \"*\");\n\n    if (allowedHostnames instanceof Set) {\n      return ALLOWED_DOMAINS.has(bareDomain) || ALLOWED_DOMAINS.has(bareDomainWithFirstSubdomainWildcarded);\n    }\n\n    if (bareDomain === allowedHostnames.replace(/^www\\./, \"\")) {\n      return true;\n    }\n  } catch (error) {// ignore\n  }\n\n  return false;\n};\n\nconst extractSrc = htmlString => {\n  const twitterMatch = htmlString.match(RE_TWITTER_EMBED);\n\n  if (twitterMatch && twitterMatch.length === 2) {\n    return twitterMatch[1];\n  }\n\n  const gistMatch = htmlString.match(RE_GH_GIST_EMBED);\n\n  if (gistMatch && gistMatch.length === 2) {\n    return gistMatch[1];\n  }\n\n  if (RE_GIPHY.test(htmlString)) {\n    return `https://giphy.com/embed/${RE_GIPHY.exec(htmlString)[1]}`;\n  }\n\n  const match = htmlString.match(RE_GENERIC_EMBED);\n\n  if (match && match.length === 2) {\n    return match[1];\n  }\n\n  return htmlString;\n};\nconst embeddableURLValidator = (url, validateEmbeddable) => {\n  if (!url) {\n    return false;\n  }\n\n  if (validateEmbeddable != null) {\n    if (typeof validateEmbeddable === \"function\") {\n      const ret = validateEmbeddable(url); // if return value is undefined, leave validation to default\n\n      if (typeof ret === \"boolean\") {\n        return ret;\n      }\n    } else if (typeof validateEmbeddable === \"boolean\") {\n      return validateEmbeddable;\n    } else if (validateEmbeddable instanceof RegExp) {\n      return validateEmbeddable.test(url);\n    } else if (Array.isArray(validateEmbeddable)) {\n      for (const domain of validateEmbeddable) {\n        if (domain instanceof RegExp) {\n          if (url.match(domain)) {\n            return true;\n          }\n        } else if (validateHostname(url, domain)) {\n          return true;\n        }\n      }\n\n      return false;\n    }\n  }\n\n  return validateHostname(url, ALLOWED_DOMAINS);\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/embeddable.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"actionSetEmbeddableAsActiveTool\": () => (/* binding */ actionSetEmbeddableAsActiveTool),\n/* harmony export */   \"createPlaceholderEmbeddableLabel\": () => (/* binding */ createPlaceholderEmbeddableLabel),\n/* harmony export */   \"createSrcDoc\": () => (/* binding */ createSrcDoc),\n/* harmony export */   \"embeddableURLValidator\": () => (/* binding */ embeddableURLValidator),\n/* harmony export */   \"getEmbedLink\": () => (/* binding */ getEmbedLink),\n/* harmony export */   \"isIframeLikeOrItsLabel\": () => (/* binding */ isIframeLikeOrItsLabel),\n/* harmony export */   \"maybeParseEmbedSrc\": () => (/* binding */ maybeParseEmbedSrc)\n/* harmony export */ });\n/* harmony import */ var _actions_register__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../actions/register */ \"./actions/register.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _cursor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../cursor */ \"./cursor.ts\");\n/* harmony import */ var _newElement__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./newElement */ \"./element/newElement.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n\n\n\n\n\n\n\n\nconst embeddedLinkCache = new Map();\nconst RE_YOUTUBE = /^(?:http(?:s)?:\\/\\/)?(?:www\\.)?youtu(?:be\\.com|\\.be)\\/(embed\\/|watch\\?v=|shorts\\/|playlist\\?list=|embed\\/videoseries\\?list=)?([a-zA-Z0-9_-]+)(?:\\?t=|.*&t=|\\?start=|.*&start=)?([a-zA-Z0-9_-]+)?[^\\s]*$/;\nconst RE_VIMEO = /^(?:http(?:s)?:\\/\\/)?(?:(?:w){3}.)?(?:player\\.)?vimeo\\.com\\/(?:video\\/)?([^?\\s]+)(?:\\?.*)?$/;\nconst RE_FIGMA = /^https:\\/\\/(?:www\\.)?figma\\.com/;\nconst RE_GH_GIST = /^https:\\/\\/gist\\.github\\.com/;\nconst RE_GH_GIST_EMBED = /^<script[\\s\\S]*?\\ssrc=[\"'](https:\\/\\/gist.github.com\\/.*?)\\.js[\"']/i; // not anchored to start to allow <blockquote> twitter embeds\n\nconst RE_TWITTER = /(?:http(?:s)?:\\/\\/)?(?:(?:w){3}.)?(?:twitter|x).com/;\nconst RE_TWITTER_EMBED = /^<blockquote[\\s\\S]*?\\shref=[\"'](https:\\/\\/(?:twitter|x).com\\/[^\"']*)/i;\nconst RE_VALTOWN = /^https:\\/\\/(?:www\\.)?val.town\\/(v|embed)\\/[a-zA-Z_$][0-9a-zA-Z_$]+\\.[a-zA-Z_$][0-9a-zA-Z_$]+/;\nconst RE_GENERIC_EMBED = /^<(?:iframe|blockquote)[\\s\\S]*?\\s(?:src|href)=[\"']([^\"']*)[\"'][\\s\\S]*?>$/i;\nconst RE_GIPHY = /giphy.com\\/(?:clips|embed|gifs)\\/[a-zA-Z0-9]*?-?([a-zA-Z0-9]+)(?:[^a-zA-Z0-9]|$)/;\nconst ALLOWED_DOMAINS = new Set([\"youtube.com\", \"youtu.be\", \"vimeo.com\", \"player.vimeo.com\", \"figma.com\", \"link.excalidraw.com\", \"gist.github.com\", \"twitter.com\", \"x.com\", \"*.simplepdf.eu\", \"stackblitz.com\", \"val.town\", \"giphy.com\", \"dddice.com\"]);\nconst createSrcDoc = body => {\n  return `<html><body>${body}</body></html>`;\n};\nconst getEmbedLink = link => {\n  if (!link) {\n    return null;\n  }\n\n  if (link.startsWith(\"data:text/html\")) {\n    //zsviczian\n    return {\n      link,\n      intrinsicSize: {\n        w: 550,\n        h: 720\n      },\n      type: \"generic\"\n    };\n  }\n\n  if (embeddedLinkCache.has(link)) {\n    return embeddedLinkCache.get(link);\n  }\n\n  const originalLink = link;\n  let type = \"generic\";\n  let aspectRatio = {\n    w: 560,\n    h: 840\n  };\n  const ytLink = link.match(RE_YOUTUBE);\n\n  if (ytLink === null || ytLink === void 0 ? void 0 : ytLink[2]) {\n    const time = ytLink[3] ? `&start=${ytLink[3]}` : ``;\n    const isPortrait = link.includes(\"shorts\");\n    type = \"video\";\n\n    switch (ytLink[1]) {\n      case \"embed/\":\n      case \"watch?v=\":\n      case \"shorts/\":\n        link = `https://www.youtube.com/embed/${ytLink[2]}?enablejsapi=1${time}`;\n        break;\n\n      case \"playlist?list=\":\n      case \"embed/videoseries?list=\":\n        link = `https://www.youtube.com/embed/videoseries?list=${ytLink[2]}&enablejsapi=1${time}`;\n        break;\n\n      default:\n        link = `https://www.youtube.com/embed/${ytLink[2]}?enablejsapi=1${time}`;\n        break;\n    }\n\n    aspectRatio = isPortrait ? {\n      w: 315,\n      h: 560\n    } : {\n      w: 560,\n      h: 315\n    };\n    embeddedLinkCache.set(originalLink, {\n      link,\n      intrinsicSize: aspectRatio,\n      type\n    });\n    return {\n      link,\n      intrinsicSize: aspectRatio,\n      type\n    };\n  }\n\n  const vimeoLink = link.match(RE_VIMEO);\n\n  if (vimeoLink === null || vimeoLink === void 0 ? void 0 : vimeoLink[1]) {\n    const target = vimeoLink === null || vimeoLink === void 0 ? void 0 : vimeoLink[1];\n    const warning = !/^\\d+$/.test(target) ? (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toast.unrecognizedLinkFormat\") : undefined;\n    type = \"video\";\n    link = `https://player.vimeo.com/video/${target}?api=1`;\n    aspectRatio = {\n      w: 560,\n      h: 315\n    }; //warning deliberately ommited so it is displayed only once per link\n    //same link next time will be served from cache\n\n    embeddedLinkCache.set(originalLink, {\n      link,\n      intrinsicSize: aspectRatio,\n      type\n    });\n    return {\n      link,\n      intrinsicSize: aspectRatio,\n      type,\n      warning\n    };\n  }\n\n  const figmaLink = link.match(RE_FIGMA);\n\n  if (figmaLink) {\n    type = \"generic\";\n    link = `https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(link)}`;\n    aspectRatio = {\n      w: 550,\n      h: 550\n    };\n    embeddedLinkCache.set(originalLink, {\n      link,\n      intrinsicSize: aspectRatio,\n      type\n    });\n    return {\n      link,\n      intrinsicSize: aspectRatio,\n      type\n    };\n  }\n\n  const valLink = link.match(RE_VALTOWN);\n\n  if (valLink) {\n    link = valLink[1] === \"embed\" ? valLink[0] : valLink[0].replace(\"/v\", \"/embed\");\n    embeddedLinkCache.set(originalLink, {\n      link,\n      intrinsicSize: aspectRatio,\n      type\n    });\n    return {\n      link,\n      intrinsicSize: aspectRatio,\n      type\n    };\n  }\n\n  if (RE_TWITTER.test(link)) {\n    // the embed srcdoc still supports twitter.com domain only\n    link = link.replace(/\\bx.com\\b/, \"twitter.com\");\n    let ret; // assume embed code\n\n    if (/<blockquote/.test(link)) {\n      const srcDoc = createSrcDoc(link);\n      ret = {\n        type: \"document\",\n        srcdoc: () => srcDoc,\n        intrinsicSize: {\n          w: 480,\n          h: 480\n        }\n      }; // assume regular tweet url\n    } else {\n      ret = {\n        type: \"document\",\n        srcdoc: theme => createSrcDoc(`<blockquote class=\"twitter-tweet\" data-dnt=\"true\" data-theme=\"${theme}\"><a href=\"${link}\"></a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>`),\n        intrinsicSize: {\n          w: 480,\n          h: 480\n        }\n      };\n    }\n\n    embeddedLinkCache.set(originalLink, ret);\n    return ret;\n  }\n\n  if (RE_GH_GIST.test(link)) {\n    let ret; // assume embed code\n\n    if (/<script>/.test(link)) {\n      const srcDoc = createSrcDoc(link);\n      ret = {\n        type: \"document\",\n        srcdoc: () => srcDoc,\n        intrinsicSize: {\n          w: 550,\n          h: 720\n        }\n      }; // assume regular url\n    } else {\n      ret = {\n        type: \"document\",\n        srcdoc: () => createSrcDoc(`\n          <script src=\"${link}.js\"></script>\n          <style type=\"text/css\">\n            * { margin: 0px; }\n            table, .gist { height: 100%; }\n            .gist .gist-file { height: calc(100vh - 2px); padding: 0px; display: grid; grid-template-rows: 1fr auto; }\n          </style>\n        `),\n        intrinsicSize: {\n          w: 550,\n          h: 720\n        }\n      };\n    }\n\n    embeddedLinkCache.set(link, ret);\n    return ret;\n  }\n\n  embeddedLinkCache.set(link, {\n    link,\n    intrinsicSize: aspectRatio,\n    type\n  });\n  return {\n    link,\n    intrinsicSize: aspectRatio,\n    type\n  };\n};\nconst isIframeLikeOrItsLabel = element => {\n  if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_7__.isIframeLikeElement)(element)) {\n    return true;\n  }\n\n  if (element.type === \"text\") {\n    const container = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getContainerElement)(element);\n\n    if (container && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_7__.isFrameLikeElement)(container)) {\n      return true;\n    }\n  }\n\n  return false;\n};\nconst createPlaceholderEmbeddableLabel = element => {\n  var _a;\n\n  let text;\n\n  if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_7__.isIframeElement)(element)) {\n    text = \"IFrame element\";\n  } else {\n    text = !element.link || (element === null || element === void 0 ? void 0 : element.link) === \"\" ? \"Empty Web-Embed\" : element.link;\n  }\n\n  const fontSize = Math.max(Math.min(element.width / 2, element.width / text.length), element.width / 30);\n  const fontFamily = _constants__WEBPACK_IMPORTED_MODULE_1__.FONT_FAMILY.Helvetica;\n  const fontString = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.getFontString)({\n    fontSize,\n    fontFamily\n  });\n  return (0,_newElement__WEBPACK_IMPORTED_MODULE_5__.newTextElement)({\n    x: element.x + element.width / 2,\n    y: element.y + element.height / 2,\n    strokeColor: element.strokeColor !== \"transparent\" ? element.strokeColor : \"black\",\n    backgroundColor: \"transparent\",\n    fontFamily,\n    fontSize,\n    text: (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.wrapText)(text, fontString, element.width - 20),\n    rawText: text,\n    textAlign: \"center\",\n    verticalAlign: _constants__WEBPACK_IMPORTED_MODULE_1__.VERTICAL_ALIGN.MIDDLE,\n    angle: (_a = element.angle) !== null && _a !== void 0 ? _a : 0\n  });\n};\nconst actionSetEmbeddableAsActiveTool = (0,_actions_register__WEBPACK_IMPORTED_MODULE_0__.register)({\n  name: \"setEmbeddableAsActiveTool\",\n  trackEvent: {\n    category: \"toolbar\"\n  },\n  perform: (elements, appState, _, app) => {\n    const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.updateActiveTool)(appState, {\n      type: \"embeddable\"\n    });\n    (0,_cursor__WEBPACK_IMPORTED_MODULE_4__.setCursorForShape)(app.canvas, Object.assign(Object.assign({}, appState), {\n      activeTool: nextActiveTool\n    }));\n    return {\n      elements,\n      appState: Object.assign(Object.assign({}, appState), {\n        activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_3__.updateActiveTool)(appState, {\n          type: \"embeddable\"\n        })\n      }),\n      commitToHistory: false\n    };\n  }\n});\n\nconst validateHostname = (url,\n/** using a Set assumes it already contains normalized bare domains */\nallowedHostnames) => {\n  try {\n    const {\n      hostname\n    } = new URL(url);\n    const bareDomain = hostname.replace(/^www\\./, \"\");\n    const bareDomainWithFirstSubdomainWildcarded = bareDomain.replace(/^([^.]+)/, \"*\");\n\n    if (allowedHostnames instanceof Set) {\n      return ALLOWED_DOMAINS.has(bareDomain) || ALLOWED_DOMAINS.has(bareDomainWithFirstSubdomainWildcarded);\n    }\n\n    if (bareDomain === allowedHostnames.replace(/^www\\./, \"\")) {\n      return true;\n    }\n  } catch (error) {// ignore\n  }\n\n  return false;\n};\n\nconst maybeParseEmbedSrc = str => {\n  const twitterMatch = str.match(RE_TWITTER_EMBED);\n\n  if (twitterMatch && twitterMatch.length === 2) {\n    return twitterMatch[1];\n  }\n\n  const gistMatch = str.match(RE_GH_GIST_EMBED);\n\n  if (gistMatch && gistMatch.length === 2) {\n    return gistMatch[1];\n  }\n\n  if (RE_GIPHY.test(str)) {\n    return `https://giphy.com/embed/${RE_GIPHY.exec(str)[1]}`;\n  }\n\n  const match = str.match(RE_GENERIC_EMBED);\n\n  if (match && match.length === 2) {\n    return match[1];\n  }\n\n  return str;\n};\nconst embeddableURLValidator = (url, validateEmbeddable) => {\n  if (!url) {\n    return false;\n  }\n\n  if (validateEmbeddable != null) {\n    if (typeof validateEmbeddable === \"function\") {\n      const ret = validateEmbeddable(url); // if return value is undefined, leave validation to default\n\n      if (typeof ret === \"boolean\") {\n        return ret;\n      }\n    } else if (typeof validateEmbeddable === \"boolean\") {\n      return validateEmbeddable;\n    } else if (validateEmbeddable instanceof RegExp) {\n      return validateEmbeddable.test(url);\n    } else if (Array.isArray(validateEmbeddable)) {\n      for (const domain of validateEmbeddable) {\n        if (domain instanceof RegExp) {\n          if (url.match(domain)) {\n            return true;\n          }\n        } else if (validateHostname(url, domain)) {\n          return true;\n        }\n      }\n\n      return false;\n    }\n  }\n\n  return validateHostname(url, ALLOWED_DOMAINS);\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/embeddable.ts?");
 
 /***/ }),
 
@@ -2499,7 +2510,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"deepCopyElement\": () => (/* binding */ deepCopyElement),\n/* harmony export */   \"duplicateElement\": () => (/* binding */ duplicateElement),\n/* harmony export */   \"duplicateElements\": () => (/* binding */ duplicateElements),\n/* harmony export */   \"newElement\": () => (/* binding */ newElement),\n/* harmony export */   \"newEmbeddableElement\": () => (/* binding */ newEmbeddableElement),\n/* harmony export */   \"newFrameElement\": () => (/* binding */ newFrameElement),\n/* harmony export */   \"newFreeDrawElement\": () => (/* binding */ newFreeDrawElement),\n/* harmony export */   \"newIframeElement\": () => (/* binding */ newIframeElement),\n/* harmony export */   \"newImageElement\": () => (/* binding */ newImageElement),\n/* harmony export */   \"newLinearElement\": () => (/* binding */ newLinearElement),\n/* harmony export */   \"newMagicFrameElement\": () => (/* binding */ newMagicFrameElement),\n/* harmony export */   \"newTextElement\": () => (/* binding */ newTextElement),\n/* harmony export */   \"refreshTextDimensions\": () => (/* binding */ refreshTextDimensions),\n/* harmony export */   \"regenerateId\": () => (/* binding */ regenerateId),\n/* harmony export */   \"updateTextElement\": () => (/* binding */ updateTextElement)\n/* harmony export */ });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _random__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../random */ \"./random.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../groups */ \"./groups.ts\");\n/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! . */ \"./element/index.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var _bounds__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n  var t = {};\n\n  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\n\n\n\n\n\n\n\n\n\n\n\nconst _newElementBase = (type, _a) => {\n  var _b, _c;\n\n  var {\n    x,\n    y,\n    strokeColor = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.strokeColor,\n    backgroundColor = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.backgroundColor,\n    fillStyle = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.fillStyle,\n    strokeWidth = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.strokeWidth,\n    strokeStyle = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.strokeStyle,\n    roughness = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.roughness,\n    opacity = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.opacity,\n    width = 0,\n    height = 0,\n    angle = 0,\n    groupIds = [],\n    frameId = null,\n    roundness = null,\n    boundElements = null,\n    link = null,\n    locked = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.locked,\n    customData\n  } = _a,\n      //zsviczian\n  rest = __rest(_a, [\"x\", \"y\", \"strokeColor\", \"backgroundColor\", \"fillStyle\", \"strokeWidth\", \"strokeStyle\", \"roughness\", \"opacity\", \"width\", \"height\", \"angle\", \"groupIds\", \"frameId\", \"roundness\", \"boundElements\", \"link\", \"locked\", \"customData\"]); // assign type to guard against excess properties\n\n\n  const element = Object.assign({\n    id: rest.id || (type === \"text\" ? (0,_random__WEBPACK_IMPORTED_MODULE_1__.obsidianId)() : (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomId)()),\n    //zsviczian\n    type,\n    x,\n    y,\n    width,\n    height,\n    angle,\n    strokeColor,\n    backgroundColor,\n    fillStyle,\n    strokeWidth,\n    strokeStyle,\n    roughness,\n    opacity,\n    groupIds,\n    frameId,\n    roundness,\n    seed: (_b = rest.seed) !== null && _b !== void 0 ? _b : (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomInteger)(),\n    version: rest.version || 1,\n    versionNonce: (_c = rest.versionNonce) !== null && _c !== void 0 ? _c : 0,\n    isDeleted: false,\n    boundElements,\n    updated: (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getUpdatedTimestamp)(),\n    link,\n    locked\n  }, customData ? {\n    customData\n  } : {});\n  return element;\n};\n\nconst newElement = opts => _newElementBase(opts.type, opts);\nconst newEmbeddableElement = opts => {\n  return Object.assign(Object.assign({}, _newElementBase(\"embeddable\", opts)), {\n    validated: opts.validated,\n    scale: [1, 1]\n  });\n};\nconst newIframeElement = opts => {\n  return Object.assign(Object.assign({}, _newElementBase(\"iframe\", opts)), {\n    scale: [1, 1]\n  });\n};\nconst newFrameElement = opts => {\n  const frameElement = (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.newElementWith)(Object.assign(Object.assign({}, _newElementBase(\"frame\", opts)), {\n    type: \"frame\",\n    name: (opts === null || opts === void 0 ? void 0 : opts.name) || null\n  }), {});\n  return frameElement;\n};\nconst newMagicFrameElement = opts => {\n  const frameElement = (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.newElementWith)(Object.assign(Object.assign({}, _newElementBase(\"magicframe\", opts)), {\n    type: \"magicframe\",\n    name: (opts === null || opts === void 0 ? void 0 : opts.name) || null\n  }), {});\n  return frameElement;\n};\n/** computes element x/y offset based on textAlign/verticalAlign */\n\nconst getTextElementPositionOffsets = (opts, metrics) => {\n  return {\n    x: opts.textAlign === \"center\" ? metrics.width / 2 : opts.textAlign === \"right\" ? metrics.width : 0,\n    y: opts.verticalAlign === \"middle\" ? metrics.height / 2 : 0\n  };\n};\n\nconst newTextElement = opts => {\n  const fontFamily = opts.fontFamily || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_FONT_FAMILY;\n  const fontSize = opts.fontSize || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_FONT_SIZE;\n  const lineHeight = opts.lineHeight || (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getDefaultLineHeight)(fontFamily);\n  const text = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.normalizeText)(opts.text);\n  const rawText = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.normalizeText)(opts.rawText); //zsviczian\n\n  const metrics = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.measureText)(text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)({\n    fontFamily,\n    fontSize\n  }), lineHeight);\n  const textAlign = opts.textAlign || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_TEXT_ALIGN;\n  const verticalAlign = opts.verticalAlign || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_VERTICAL_ALIGN;\n  const offsets = getTextElementPositionOffsets({\n    textAlign,\n    verticalAlign\n  }, metrics);\n  const textElement = (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.newElementWith)(Object.assign(Object.assign({}, _newElementBase(\"text\", opts)), {\n    text,\n    rawText,\n    fontSize,\n    fontFamily,\n    textAlign,\n    verticalAlign,\n    x: opts.x - offsets.x,\n    y: opts.y - offsets.y,\n    width: metrics.width,\n    height: metrics.height,\n    baseline: metrics.baseline,\n    containerId: opts.containerId || null,\n    originalText: text,\n    lineHeight\n  }), {});\n  return textElement;\n};\n\nconst getAdjustedDimensions = (element, nextText) => {\n  const {\n    width: nextWidth,\n    height: nextHeight,\n    baseline: nextBaseline\n  } = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.measureText)(nextText, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(element), element.lineHeight);\n  const {\n    textAlign,\n    verticalAlign\n  } = element;\n  let x;\n  let y;\n\n  if (textAlign === \"center\" && verticalAlign === _constants__WEBPACK_IMPORTED_MODULE_8__.VERTICAL_ALIGN.MIDDLE && !element.containerId) {\n    const prevMetrics = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.measureText)(element.text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(element), element.lineHeight);\n    const offsets = getTextElementPositionOffsets(element, {\n      width: nextWidth - prevMetrics.width,\n      height: nextHeight - prevMetrics.height\n    });\n    x = element.x - offsets.x;\n    y = element.y - offsets.y;\n  } else {\n    const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_4__.getElementAbsoluteCoords)(element);\n    const [nextX1, nextY1, nextX2, nextY2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_6__.getResizedElementAbsoluteCoords)(element, nextWidth, nextHeight, false);\n    const deltaX1 = (x1 - nextX1) / 2;\n    const deltaY1 = (y1 - nextY1) / 2;\n    const deltaX2 = (x2 - nextX2) / 2;\n    const deltaY2 = (y2 - nextY2) / 2;\n    [x, y] = (0,_math__WEBPACK_IMPORTED_MODULE_5__.adjustXYWithRotation)({\n      s: true,\n      e: textAlign === \"center\" || textAlign === \"left\",\n      w: textAlign === \"center\" || textAlign === \"right\"\n    }, element.x, element.y, element.angle, deltaX1, deltaY1, deltaX2, deltaY2);\n  }\n\n  return {\n    width: nextWidth,\n    height: nextHeight,\n    baseline: nextBaseline,\n    x: Number.isFinite(x) ? x : element.x,\n    y: Number.isFinite(y) ? y : element.y\n  };\n};\n\nconst refreshTextDimensions = (textElement, text = textElement.text) => {\n  if (textElement.isDeleted) {\n    return;\n  }\n\n  const container = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getContainerElement)(textElement);\n\n  if (container) {\n    text = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.wrapText)(text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(textElement), (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getBoundTextMaxWidth)(container));\n  }\n\n  const dimensions = getAdjustedDimensions(textElement, text);\n  return Object.assign({\n    text\n  }, dimensions);\n};\nconst updateTextElement = (textElement, {\n  text,\n  isDeleted,\n  originalText,\n  rawText,\n  link\n}) => {\n  return (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.newElementWith)(textElement, Object.assign(Object.assign({\n    rawText: rawText !== null && rawText !== void 0 ? rawText : originalText,\n    //zsviczian should this be rather originalText??\n    originalText,\n    isDeleted: isDeleted !== null && isDeleted !== void 0 ? isDeleted : textElement.isDeleted\n  }, link ? {\n    link\n  } : {}), refreshTextDimensions(textElement, originalText)));\n};\nconst newFreeDrawElement = opts => {\n  return Object.assign(Object.assign({}, _newElementBase(opts.type, opts)), {\n    points: opts.points || [],\n    pressures: [],\n    simulatePressure: opts.simulatePressure,\n    lastCommittedPoint: null\n  });\n};\nconst newLinearElement = opts => {\n  return Object.assign(Object.assign({}, _newElementBase(opts.type, opts)), {\n    points: opts.points || [],\n    lastCommittedPoint: null,\n    startBinding: null,\n    endBinding: null,\n    startArrowhead: opts.startArrowhead || null,\n    endArrowhead: opts.endArrowhead || null\n  });\n};\nconst newImageElement = opts => {\n  var _a, _b, _c;\n\n  return Object.assign(Object.assign({}, _newElementBase(\"image\", opts)), {\n    // in the future we'll support changing stroke color for some SVG elements,\n    // and `transparent` will likely mean \"use original colors of the image\"\n    strokeColor: \"transparent\",\n    status: (_a = opts.status) !== null && _a !== void 0 ? _a : \"pending\",\n    fileId: (_b = opts.fileId) !== null && _b !== void 0 ? _b : null,\n    scale: (_c = opts.scale) !== null && _c !== void 0 ? _c : [1, 1]\n  });\n}; // Simplified deep clone for the purpose of cloning ExcalidrawElement.\n//\n// Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,\n// Typed arrays and other non-null objects.\n//\n// Adapted from https://github.com/lukeed/klona\n//\n// The reason for `deepCopyElement()` wrapper is type safety (only allow\n// passing ExcalidrawElement as the top-level argument).\n\nconst _deepCopyElement = (val, depth = 0) => {\n  // only clone non-primitives\n  if (val == null || typeof val !== \"object\") {\n    return val;\n  }\n\n  const objectType = Object.prototype.toString.call(val);\n\n  if (objectType === \"[object Object]\") {\n    const tmp = typeof val.constructor === \"function\" ? Object.create(Object.getPrototypeOf(val)) : {};\n\n    for (const key in val) {\n      if (val.hasOwnProperty(key)) {\n        // don't copy non-serializable objects like these caches. They'll be\n        // populated when the element is rendered.\n        if (depth === 0 && (key === \"shape\" || key === \"canvas\")) {\n          continue;\n        }\n\n        tmp[key] = _deepCopyElement(val[key], depth + 1);\n      }\n    }\n\n    return tmp;\n  }\n\n  if (Array.isArray(val)) {\n    let k = val.length;\n    const arr = new Array(k);\n\n    while (k--) {\n      arr[k] = _deepCopyElement(val[k], depth + 1);\n    }\n\n    return arr;\n  } // we're not cloning non-array & non-plain-object objects because we\n  // don't support them on excalidraw elements yet. If we do, we need to make\n  // sure we start cloning them, so let's warn about it.\n\n\n  if (true) {\n    if (objectType !== \"[object Object]\" && objectType !== \"[object Array]\" && objectType.startsWith(\"[object \")) {\n      console.warn(`_deepCloneElement: unexpected object type ${objectType}. This value will not be cloned!`);\n    }\n  }\n\n  return val;\n};\n/**\r\n * Clones ExcalidrawElement data structure. Does not regenerate id, nonce, or\r\n * any value. The purpose is to to break object references for immutability\r\n * reasons, whenever we want to keep the original element, but ensure it's not\r\n * mutated.\r\n *\r\n * Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,\r\n * Typed arrays and other non-null objects.\r\n */\n\n\nconst deepCopyElement = val => {\n  return _deepCopyElement(val);\n};\n/**\r\n * utility wrapper to generate new id. In test env it reuses the old + postfix\r\n * for test assertions.\r\n */\n\nconst regenerateId = (\n/** supply null if no previous id exists */\npreviousId) => {\n  var _a, _b;\n\n  if ((0,_utils__WEBPACK_IMPORTED_MODULE_0__.isTestEnv)() && previousId) {\n    let nextId = `${previousId}_copy`; // `window.h` may not be defined in some unit tests\n\n    if ((_b = (_a = window.h) === null || _a === void 0 ? void 0 : _a.app) === null || _b === void 0 ? void 0 : _b.getSceneElementsIncludingDeleted().find(el => el.id === nextId)) {\n      nextId += \"_copy\";\n    }\n\n    return nextId;\n  }\n\n  return (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomId)();\n};\n/**\r\n * Duplicate an element, often used in the alt-drag operation.\r\n * Note that this method has gotten a bit complicated since the\r\n * introduction of gruoping/ungrouping elements.\r\n * @param editingGroupId The current group being edited. The new\r\n *                       element will inherit this group and its\r\n *                       parents.\r\n * @param groupIdMapForOperation A Map that maps old group IDs to\r\n *                               duplicated ones. If you are duplicating\r\n *                               multiple elements at once, share this map\r\n *                               amongst all of them\r\n * @param element Element to duplicate\r\n * @param overrides Any element properties to override\r\n */\n\nconst duplicateElement = (editingGroupId, groupIdMapForOperation, element, overrides) => {\n  let copy = deepCopyElement(element);\n  copy.id = copy.type === \"text\" ? (0,_random__WEBPACK_IMPORTED_MODULE_1__.obsidianId)() : regenerateId(copy.id); //zsviczian\n\n  copy.boundElements = null;\n  copy.updated = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getUpdatedTimestamp)();\n  copy.seed = (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomInteger)();\n  copy.groupIds = (0,_groups__WEBPACK_IMPORTED_MODULE_3__.getNewGroupIdsForDuplication)(copy.groupIds, editingGroupId, groupId => {\n    if (!groupIdMapForOperation.has(groupId)) {\n      groupIdMapForOperation.set(groupId, regenerateId(groupId));\n    }\n\n    return groupIdMapForOperation.get(groupId);\n  });\n\n  if (overrides) {\n    copy = Object.assign(copy, overrides);\n  }\n\n  return copy;\n};\n/**\r\n * Clones elements, regenerating their ids (including bindings) and group ids.\r\n *\r\n * If bindings don't exist in the elements array, they are removed. Therefore,\r\n * it's advised to supply the whole elements array, or sets of elements that\r\n * are encapsulated (such as library items), if the purpose is to retain\r\n * bindings to the cloned elements intact.\r\n *\r\n * NOTE by default does not randomize or regenerate anything except the id.\r\n */\n\nconst duplicateElements = (elements, opts) => {\n  const clonedElements = [];\n  const origElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.arrayToMap)(elements); // used for for migrating old ids to new ids\n\n  const elementNewIdsMap = new Map();\n\n  const maybeGetNewId = id => {\n    // if we've already migrated the element id, return the new one directly\n    if (elementNewIdsMap.has(id)) {\n      return elementNewIdsMap.get(id);\n    } // if we haven't migrated the element id, but an old element with the same\n    // id exists, generate a new id for it and return it\n\n\n    if (origElementsMap.has(id)) {\n      const newId = regenerateId(id);\n      elementNewIdsMap.set(id, newId);\n      return newId;\n    } // if old element doesn't exist, return null to mark it for removal\n\n\n    return null;\n  };\n\n  const groupNewIdsMap = new Map();\n\n  for (const element of elements) {\n    const clonedElement = _deepCopyElement(element);\n\n    clonedElement.id = maybeGetNewId(element.id);\n\n    if (opts === null || opts === void 0 ? void 0 : opts.randomizeSeed) {\n      clonedElement.seed = (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomInteger)();\n      (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.bumpVersion)(clonedElement);\n    }\n\n    if (clonedElement.groupIds) {\n      clonedElement.groupIds = clonedElement.groupIds.map(groupId => {\n        if (!groupNewIdsMap.has(groupId)) {\n          groupNewIdsMap.set(groupId, regenerateId(groupId));\n        }\n\n        return groupNewIdsMap.get(groupId);\n      });\n    }\n\n    if (\"containerId\" in clonedElement && clonedElement.containerId) {\n      const newContainerId = maybeGetNewId(clonedElement.containerId);\n      clonedElement.containerId = newContainerId;\n    }\n\n    if (\"boundElements\" in clonedElement && clonedElement.boundElements) {\n      clonedElement.boundElements = clonedElement.boundElements.reduce((acc, binding) => {\n        const newBindingId = maybeGetNewId(binding.id);\n\n        if (newBindingId) {\n          acc.push(Object.assign(Object.assign({}, binding), {\n            id: newBindingId\n          }));\n        }\n\n        return acc;\n      }, []);\n    }\n\n    if (\"endBinding\" in clonedElement && clonedElement.endBinding) {\n      const newEndBindingId = maybeGetNewId(clonedElement.endBinding.elementId);\n      clonedElement.endBinding = newEndBindingId ? Object.assign(Object.assign({}, clonedElement.endBinding), {\n        elementId: newEndBindingId\n      }) : null;\n    }\n\n    if (\"startBinding\" in clonedElement && clonedElement.startBinding) {\n      const newEndBindingId = maybeGetNewId(clonedElement.startBinding.elementId);\n      clonedElement.startBinding = newEndBindingId ? Object.assign(Object.assign({}, clonedElement.startBinding), {\n        elementId: newEndBindingId\n      }) : null;\n    }\n\n    if (clonedElement.frameId) {\n      clonedElement.frameId = maybeGetNewId(clonedElement.frameId);\n    }\n\n    clonedElements.push(clonedElement);\n  }\n\n  return clonedElements;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/newElement.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"deepCopyElement\": () => (/* binding */ deepCopyElement),\n/* harmony export */   \"duplicateElement\": () => (/* binding */ duplicateElement),\n/* harmony export */   \"duplicateElements\": () => (/* binding */ duplicateElements),\n/* harmony export */   \"newElement\": () => (/* binding */ newElement),\n/* harmony export */   \"newEmbeddableElement\": () => (/* binding */ newEmbeddableElement),\n/* harmony export */   \"newFrameElement\": () => (/* binding */ newFrameElement),\n/* harmony export */   \"newFreeDrawElement\": () => (/* binding */ newFreeDrawElement),\n/* harmony export */   \"newIframeElement\": () => (/* binding */ newIframeElement),\n/* harmony export */   \"newImageElement\": () => (/* binding */ newImageElement),\n/* harmony export */   \"newLinearElement\": () => (/* binding */ newLinearElement),\n/* harmony export */   \"newMagicFrameElement\": () => (/* binding */ newMagicFrameElement),\n/* harmony export */   \"newTextElement\": () => (/* binding */ newTextElement),\n/* harmony export */   \"refreshTextDimensions\": () => (/* binding */ refreshTextDimensions),\n/* harmony export */   \"regenerateId\": () => (/* binding */ regenerateId),\n/* harmony export */   \"updateTextElement\": () => (/* binding */ updateTextElement)\n/* harmony export */ });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _random__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../random */ \"./random.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../groups */ \"./groups.ts\");\n/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! . */ \"./element/index.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var _bounds__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n  var t = {};\n\n  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\n\n\n\n\n\n\n\n\n\n\n\nconst _newElementBase = (type, _a) => {\n  var _b, _c;\n\n  var {\n    x,\n    y,\n    strokeColor = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.strokeColor,\n    backgroundColor = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.backgroundColor,\n    fillStyle = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.fillStyle,\n    strokeWidth = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.strokeWidth,\n    strokeStyle = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.strokeStyle,\n    roughness = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.roughness,\n    opacity = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.opacity,\n    width = 0,\n    height = 0,\n    angle = 0,\n    groupIds = [],\n    frameId = null,\n    roundness = null,\n    boundElements = null,\n    link = null,\n    locked = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.locked,\n    customData\n  } = _a,\n      //zsviczian\n  rest = __rest(_a, [\"x\", \"y\", \"strokeColor\", \"backgroundColor\", \"fillStyle\", \"strokeWidth\", \"strokeStyle\", \"roughness\", \"opacity\", \"width\", \"height\", \"angle\", \"groupIds\", \"frameId\", \"roundness\", \"boundElements\", \"link\", \"locked\", \"customData\"]); // assign type to guard against excess properties\n\n\n  const element = Object.assign({\n    id: rest.id || (type === \"text\" ? (0,_random__WEBPACK_IMPORTED_MODULE_1__.obsidianId)() : (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomId)()),\n    //zsviczian\n    type,\n    x,\n    y,\n    width,\n    height,\n    angle,\n    strokeColor,\n    backgroundColor,\n    fillStyle,\n    strokeWidth,\n    strokeStyle,\n    roughness,\n    opacity,\n    groupIds,\n    frameId,\n    roundness,\n    seed: (_b = rest.seed) !== null && _b !== void 0 ? _b : (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomInteger)(),\n    version: rest.version || 1,\n    versionNonce: (_c = rest.versionNonce) !== null && _c !== void 0 ? _c : 0,\n    isDeleted: false,\n    boundElements,\n    updated: (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getUpdatedTimestamp)(),\n    link,\n    locked\n  }, customData ? {\n    customData\n  } : {});\n  return element;\n};\n\nconst newElement = opts => _newElementBase(opts.type, opts);\nconst newEmbeddableElement = opts => {\n  return Object.assign(Object.assign({}, _newElementBase(\"embeddable\", opts)), {\n    scale: [1, 1]\n  });\n};\nconst newIframeElement = opts => {\n  return Object.assign(Object.assign({}, _newElementBase(\"iframe\", opts)), {\n    scale: [1, 1]\n  });\n};\nconst newFrameElement = opts => {\n  const frameElement = (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.newElementWith)(Object.assign(Object.assign({}, _newElementBase(\"frame\", opts)), {\n    type: \"frame\",\n    name: (opts === null || opts === void 0 ? void 0 : opts.name) || null\n  }), {});\n  return frameElement;\n};\nconst newMagicFrameElement = opts => {\n  const frameElement = (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.newElementWith)(Object.assign(Object.assign({}, _newElementBase(\"magicframe\", opts)), {\n    type: \"magicframe\",\n    name: (opts === null || opts === void 0 ? void 0 : opts.name) || null\n  }), {});\n  return frameElement;\n};\n/** computes element x/y offset based on textAlign/verticalAlign */\n\nconst getTextElementPositionOffsets = (opts, metrics) => {\n  return {\n    x: opts.textAlign === \"center\" ? metrics.width / 2 : opts.textAlign === \"right\" ? metrics.width : 0,\n    y: opts.verticalAlign === \"middle\" ? metrics.height / 2 : 0\n  };\n};\n\nconst newTextElement = opts => {\n  const fontFamily = opts.fontFamily || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_FONT_FAMILY;\n  const fontSize = opts.fontSize || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_FONT_SIZE;\n  const lineHeight = opts.lineHeight || (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getDefaultLineHeight)(fontFamily);\n  const text = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.normalizeText)(opts.text);\n  const rawText = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.normalizeText)(opts.rawText); //zsviczian\n\n  const metrics = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.measureText)(text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)({\n    fontFamily,\n    fontSize\n  }), lineHeight);\n  const textAlign = opts.textAlign || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_TEXT_ALIGN;\n  const verticalAlign = opts.verticalAlign || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_VERTICAL_ALIGN;\n  const offsets = getTextElementPositionOffsets({\n    textAlign,\n    verticalAlign\n  }, metrics);\n  const textElement = (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.newElementWith)(Object.assign(Object.assign({}, _newElementBase(\"text\", opts)), {\n    text,\n    rawText,\n    fontSize,\n    fontFamily,\n    textAlign,\n    verticalAlign,\n    x: opts.x - offsets.x,\n    y: opts.y - offsets.y,\n    width: metrics.width,\n    height: metrics.height,\n    baseline: metrics.baseline,\n    containerId: opts.containerId || null,\n    originalText: text,\n    lineHeight\n  }), {});\n  return textElement;\n};\n\nconst getAdjustedDimensions = (element, nextText) => {\n  const {\n    width: nextWidth,\n    height: nextHeight,\n    baseline: nextBaseline\n  } = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.measureText)(nextText, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(element), element.lineHeight);\n  const {\n    textAlign,\n    verticalAlign\n  } = element;\n  let x;\n  let y;\n\n  if (textAlign === \"center\" && verticalAlign === _constants__WEBPACK_IMPORTED_MODULE_8__.VERTICAL_ALIGN.MIDDLE && !element.containerId) {\n    const prevMetrics = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.measureText)(element.text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(element), element.lineHeight);\n    const offsets = getTextElementPositionOffsets(element, {\n      width: nextWidth - prevMetrics.width,\n      height: nextHeight - prevMetrics.height\n    });\n    x = element.x - offsets.x;\n    y = element.y - offsets.y;\n  } else {\n    const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_4__.getElementAbsoluteCoords)(element);\n    const [nextX1, nextY1, nextX2, nextY2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_6__.getResizedElementAbsoluteCoords)(element, nextWidth, nextHeight, false);\n    const deltaX1 = (x1 - nextX1) / 2;\n    const deltaY1 = (y1 - nextY1) / 2;\n    const deltaX2 = (x2 - nextX2) / 2;\n    const deltaY2 = (y2 - nextY2) / 2;\n    [x, y] = (0,_math__WEBPACK_IMPORTED_MODULE_5__.adjustXYWithRotation)({\n      s: true,\n      e: textAlign === \"center\" || textAlign === \"left\",\n      w: textAlign === \"center\" || textAlign === \"right\"\n    }, element.x, element.y, element.angle, deltaX1, deltaY1, deltaX2, deltaY2);\n  }\n\n  return {\n    width: nextWidth,\n    height: nextHeight,\n    baseline: nextBaseline,\n    x: Number.isFinite(x) ? x : element.x,\n    y: Number.isFinite(y) ? y : element.y\n  };\n};\n\nconst refreshTextDimensions = (textElement, text = textElement.text) => {\n  if (textElement.isDeleted) {\n    return;\n  }\n\n  const container = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getContainerElement)(textElement);\n\n  if (container) {\n    text = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.wrapText)(text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(textElement), (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getBoundTextMaxWidth)(container));\n  }\n\n  const dimensions = getAdjustedDimensions(textElement, text);\n  return Object.assign({\n    text\n  }, dimensions);\n};\nconst updateTextElement = (textElement, {\n  text,\n  isDeleted,\n  originalText,\n  rawText,\n  link\n}) => {\n  return (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.newElementWith)(textElement, Object.assign(Object.assign({\n    rawText: rawText !== null && rawText !== void 0 ? rawText : originalText,\n    //zsviczian should this be rather originalText??\n    originalText,\n    isDeleted: isDeleted !== null && isDeleted !== void 0 ? isDeleted : textElement.isDeleted\n  }, link ? {\n    link\n  } : {}), refreshTextDimensions(textElement, originalText)));\n};\nconst newFreeDrawElement = opts => {\n  return Object.assign(Object.assign({}, _newElementBase(opts.type, opts)), {\n    points: opts.points || [],\n    pressures: [],\n    simulatePressure: opts.simulatePressure,\n    lastCommittedPoint: null\n  });\n};\nconst newLinearElement = opts => {\n  return Object.assign(Object.assign({}, _newElementBase(opts.type, opts)), {\n    points: opts.points || [],\n    lastCommittedPoint: null,\n    startBinding: null,\n    endBinding: null,\n    startArrowhead: opts.startArrowhead || null,\n    endArrowhead: opts.endArrowhead || null\n  });\n};\nconst newImageElement = opts => {\n  var _a, _b, _c;\n\n  return Object.assign(Object.assign({}, _newElementBase(\"image\", opts)), {\n    // in the future we'll support changing stroke color for some SVG elements,\n    // and `transparent` will likely mean \"use original colors of the image\"\n    strokeColor: \"transparent\",\n    status: (_a = opts.status) !== null && _a !== void 0 ? _a : \"pending\",\n    fileId: (_b = opts.fileId) !== null && _b !== void 0 ? _b : null,\n    scale: (_c = opts.scale) !== null && _c !== void 0 ? _c : [1, 1]\n  });\n}; // Simplified deep clone for the purpose of cloning ExcalidrawElement.\n//\n// Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,\n// Typed arrays and other non-null objects.\n//\n// Adapted from https://github.com/lukeed/klona\n//\n// The reason for `deepCopyElement()` wrapper is type safety (only allow\n// passing ExcalidrawElement as the top-level argument).\n\nconst _deepCopyElement = (val, depth = 0) => {\n  // only clone non-primitives\n  if (val == null || typeof val !== \"object\") {\n    return val;\n  }\n\n  const objectType = Object.prototype.toString.call(val);\n\n  if (objectType === \"[object Object]\") {\n    const tmp = typeof val.constructor === \"function\" ? Object.create(Object.getPrototypeOf(val)) : {};\n\n    for (const key in val) {\n      if (val.hasOwnProperty(key)) {\n        // don't copy non-serializable objects like these caches. They'll be\n        // populated when the element is rendered.\n        if (depth === 0 && (key === \"shape\" || key === \"canvas\")) {\n          continue;\n        }\n\n        tmp[key] = _deepCopyElement(val[key], depth + 1);\n      }\n    }\n\n    return tmp;\n  }\n\n  if (Array.isArray(val)) {\n    let k = val.length;\n    const arr = new Array(k);\n\n    while (k--) {\n      arr[k] = _deepCopyElement(val[k], depth + 1);\n    }\n\n    return arr;\n  } // we're not cloning non-array & non-plain-object objects because we\n  // don't support them on excalidraw elements yet. If we do, we need to make\n  // sure we start cloning them, so let's warn about it.\n\n\n  if (true) {\n    if (objectType !== \"[object Object]\" && objectType !== \"[object Array]\" && objectType.startsWith(\"[object \")) {\n      console.warn(`_deepCloneElement: unexpected object type ${objectType}. This value will not be cloned!`);\n    }\n  }\n\n  return val;\n};\n/**\r\n * Clones ExcalidrawElement data structure. Does not regenerate id, nonce, or\r\n * any value. The purpose is to to break object references for immutability\r\n * reasons, whenever we want to keep the original element, but ensure it's not\r\n * mutated.\r\n *\r\n * Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,\r\n * Typed arrays and other non-null objects.\r\n */\n\n\nconst deepCopyElement = val => {\n  return _deepCopyElement(val);\n};\n/**\r\n * utility wrapper to generate new id. In test env it reuses the old + postfix\r\n * for test assertions.\r\n */\n\nconst regenerateId = (\n/** supply null if no previous id exists */\npreviousId) => {\n  var _a, _b;\n\n  if ((0,_utils__WEBPACK_IMPORTED_MODULE_0__.isTestEnv)() && previousId) {\n    let nextId = `${previousId}_copy`; // `window.h` may not be defined in some unit tests\n\n    if ((_b = (_a = window.h) === null || _a === void 0 ? void 0 : _a.app) === null || _b === void 0 ? void 0 : _b.getSceneElementsIncludingDeleted().find(el => el.id === nextId)) {\n      nextId += \"_copy\";\n    }\n\n    return nextId;\n  }\n\n  return (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomId)();\n};\n/**\r\n * Duplicate an element, often used in the alt-drag operation.\r\n * Note that this method has gotten a bit complicated since the\r\n * introduction of gruoping/ungrouping elements.\r\n * @param editingGroupId The current group being edited. The new\r\n *                       element will inherit this group and its\r\n *                       parents.\r\n * @param groupIdMapForOperation A Map that maps old group IDs to\r\n *                               duplicated ones. If you are duplicating\r\n *                               multiple elements at once, share this map\r\n *                               amongst all of them\r\n * @param element Element to duplicate\r\n * @param overrides Any element properties to override\r\n */\n\nconst duplicateElement = (editingGroupId, groupIdMapForOperation, element, overrides) => {\n  let copy = deepCopyElement(element);\n  copy.id = copy.type === \"text\" ? (0,_random__WEBPACK_IMPORTED_MODULE_1__.obsidianId)() : regenerateId(copy.id); //zsviczian\n\n  copy.boundElements = null;\n  copy.updated = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getUpdatedTimestamp)();\n  copy.seed = (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomInteger)();\n  copy.groupIds = (0,_groups__WEBPACK_IMPORTED_MODULE_3__.getNewGroupIdsForDuplication)(copy.groupIds, editingGroupId, groupId => {\n    if (!groupIdMapForOperation.has(groupId)) {\n      groupIdMapForOperation.set(groupId, regenerateId(groupId));\n    }\n\n    return groupIdMapForOperation.get(groupId);\n  });\n\n  if (overrides) {\n    copy = Object.assign(copy, overrides);\n  }\n\n  return copy;\n};\n/**\r\n * Clones elements, regenerating their ids (including bindings) and group ids.\r\n *\r\n * If bindings don't exist in the elements array, they are removed. Therefore,\r\n * it's advised to supply the whole elements array, or sets of elements that\r\n * are encapsulated (such as library items), if the purpose is to retain\r\n * bindings to the cloned elements intact.\r\n *\r\n * NOTE by default does not randomize or regenerate anything except the id.\r\n */\n\nconst duplicateElements = (elements, opts) => {\n  const clonedElements = [];\n  const origElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.arrayToMap)(elements); // used for for migrating old ids to new ids\n\n  const elementNewIdsMap = new Map();\n\n  const maybeGetNewId = id => {\n    // if we've already migrated the element id, return the new one directly\n    if (elementNewIdsMap.has(id)) {\n      return elementNewIdsMap.get(id);\n    } // if we haven't migrated the element id, but an old element with the same\n    // id exists, generate a new id for it and return it\n\n\n    if (origElementsMap.has(id)) {\n      const newId = regenerateId(id);\n      elementNewIdsMap.set(id, newId);\n      return newId;\n    } // if old element doesn't exist, return null to mark it for removal\n\n\n    return null;\n  };\n\n  const groupNewIdsMap = new Map();\n\n  for (const element of elements) {\n    const clonedElement = _deepCopyElement(element);\n\n    clonedElement.id = maybeGetNewId(element.id);\n\n    if (opts === null || opts === void 0 ? void 0 : opts.randomizeSeed) {\n      clonedElement.seed = (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomInteger)();\n      (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.bumpVersion)(clonedElement);\n    }\n\n    if (clonedElement.groupIds) {\n      clonedElement.groupIds = clonedElement.groupIds.map(groupId => {\n        if (!groupNewIdsMap.has(groupId)) {\n          groupNewIdsMap.set(groupId, regenerateId(groupId));\n        }\n\n        return groupNewIdsMap.get(groupId);\n      });\n    }\n\n    if (\"containerId\" in clonedElement && clonedElement.containerId) {\n      const newContainerId = maybeGetNewId(clonedElement.containerId);\n      clonedElement.containerId = newContainerId;\n    }\n\n    if (\"boundElements\" in clonedElement && clonedElement.boundElements) {\n      clonedElement.boundElements = clonedElement.boundElements.reduce((acc, binding) => {\n        const newBindingId = maybeGetNewId(binding.id);\n\n        if (newBindingId) {\n          acc.push(Object.assign(Object.assign({}, binding), {\n            id: newBindingId\n          }));\n        }\n\n        return acc;\n      }, []);\n    }\n\n    if (\"endBinding\" in clonedElement && clonedElement.endBinding) {\n      const newEndBindingId = maybeGetNewId(clonedElement.endBinding.elementId);\n      clonedElement.endBinding = newEndBindingId ? Object.assign(Object.assign({}, clonedElement.endBinding), {\n        elementId: newEndBindingId\n      }) : null;\n    }\n\n    if (\"startBinding\" in clonedElement && clonedElement.startBinding) {\n      const newEndBindingId = maybeGetNewId(clonedElement.startBinding.elementId);\n      clonedElement.startBinding = newEndBindingId ? Object.assign(Object.assign({}, clonedElement.startBinding), {\n        elementId: newEndBindingId\n      }) : null;\n    }\n\n    if (clonedElement.frameId) {\n      clonedElement.frameId = maybeGetNewId(clonedElement.frameId);\n    }\n\n    clonedElements.push(clonedElement);\n  }\n\n  return clonedElements;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/newElement.ts?");
 
 /***/ }),
 
@@ -2565,7 +2576,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"bindTextToShapeAfterDuplication\": () => (/* binding */ bindTextToShapeAfterDuplication),\n/* harmony export */   \"charWidth\": () => (/* binding */ charWidth),\n/* harmony export */   \"computeBoundTextPosition\": () => (/* binding */ computeBoundTextPosition),\n/* harmony export */   \"computeContainerDimensionForBoundText\": () => (/* binding */ computeContainerDimensionForBoundText),\n/* harmony export */   \"detectLineHeight\": () => (/* binding */ detectLineHeight),\n/* harmony export */   \"getApproxCharsToFitInWidth\": () => (/* binding */ getApproxCharsToFitInWidth),\n/* harmony export */   \"getApproxMinLineHeight\": () => (/* binding */ getApproxMinLineHeight),\n/* harmony export */   \"getApproxMinLineWidth\": () => (/* binding */ getApproxMinLineWidth),\n/* harmony export */   \"getBoundTextElement\": () => (/* binding */ getBoundTextElement),\n/* harmony export */   \"getBoundTextElementId\": () => (/* binding */ getBoundTextElementId),\n/* harmony export */   \"getBoundTextElementOffset\": () => (/* binding */ getBoundTextElementOffset),\n/* harmony export */   \"getBoundTextElementPosition\": () => (/* binding */ getBoundTextElementPosition),\n/* harmony export */   \"getBoundTextMaxHeight\": () => (/* binding */ getBoundTextMaxHeight),\n/* harmony export */   \"getBoundTextMaxWidth\": () => (/* binding */ getBoundTextMaxWidth),\n/* harmony export */   \"getContainerCenter\": () => (/* binding */ getContainerCenter),\n/* harmony export */   \"getContainerCoords\": () => (/* binding */ getContainerCoords),\n/* harmony export */   \"getContainerElement\": () => (/* binding */ getContainerElement),\n/* harmony export */   \"getDefaultLineHeight\": () => (/* binding */ getDefaultLineHeight),\n/* harmony export */   \"getLineHeightInPx\": () => (/* binding */ getLineHeightInPx),\n/* harmony export */   \"getMaxCharWidth\": () => (/* binding */ getMaxCharWidth),\n/* harmony export */   \"getMinCharWidth\": () => (/* binding */ getMinCharWidth),\n/* harmony export */   \"getTextBindableContainerAtPosition\": () => (/* binding */ getTextBindableContainerAtPosition),\n/* harmony export */   \"getTextElementAngle\": () => (/* binding */ getTextElementAngle),\n/* harmony export */   \"getTextHeight\": () => (/* binding */ getTextHeight),\n/* harmony export */   \"getTextWidth\": () => (/* binding */ getTextWidth),\n/* harmony export */   \"handleBindTextResize\": () => (/* binding */ handleBindTextResize),\n/* harmony export */   \"isMeasureTextSupported\": () => (/* binding */ isMeasureTextSupported),\n/* harmony export */   \"isValidTextContainer\": () => (/* binding */ isValidTextContainer),\n/* harmony export */   \"measureBaseline\": () => (/* binding */ measureBaseline),\n/* harmony export */   \"measureText\": () => (/* binding */ measureText),\n/* harmony export */   \"normalizeText\": () => (/* binding */ normalizeText),\n/* harmony export */   \"parseTokens\": () => (/* binding */ parseTokens),\n/* harmony export */   \"redrawTextBoundingBox\": () => (/* binding */ redrawTextBoundingBox),\n/* harmony export */   \"shouldAllowVerticalAlign\": () => (/* binding */ shouldAllowVerticalAlign),\n/* harmony export */   \"splitIntoLines\": () => (/* binding */ splitIntoLines),\n/* harmony export */   \"suppportsHorizontalAlign\": () => (/* binding */ suppportsHorizontalAlign),\n/* harmony export */   \"wrapText\": () => (/* binding */ wrapText)\n/* harmony export */ });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! . */ \"./element/index.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _linearElementEditor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _collision__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./collision */ \"./element/collision.ts\");\n/* harmony import */ var _textWysiwyg__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./textWysiwyg */ \"./element/textWysiwyg.tsx\");\n/* harmony import */ var _components_App__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../components/App */ \"./components/App.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst normalizeText = text => {\n  return text // replace tabs with spaces so they render and measure correctly\n  .replace(/\\t/g, \"        \") // normalize newlines\n  .replace(/\\r?\\n|\\r/g, \"\\n\");\n};\nconst splitIntoLines = text => {\n  return normalizeText(text).split(\"\\n\");\n};\nconst redrawTextBoundingBox = (textElement, container) => {\n  var _a;\n\n  let maxWidth = undefined;\n  const boundTextUpdates = {\n    x: textElement.x,\n    y: textElement.y,\n    text: textElement.text,\n    width: textElement.width,\n    height: textElement.height,\n    baseline: textElement.baseline\n  };\n  boundTextUpdates.text = textElement.text;\n\n  if (container) {\n    maxWidth = getBoundTextMaxWidth(container, textElement);\n    boundTextUpdates.text = wrapText(textElement.originalText, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(textElement), maxWidth);\n  }\n\n  const metrics = measureText(boundTextUpdates.text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(textElement), textElement.lineHeight);\n  boundTextUpdates.width = metrics.width;\n  boundTextUpdates.height = metrics.height;\n  boundTextUpdates.baseline = metrics.baseline;\n\n  if (container) {\n    const maxContainerHeight = getBoundTextMaxHeight(container, textElement);\n    const maxContainerWidth = getBoundTextMaxWidth(container);\n\n    if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container) && metrics.height > maxContainerHeight) {\n      const nextHeight = computeContainerDimensionForBoundText(metrics.height, container.type, (_a = container.customData) === null || _a === void 0 ? void 0 : _a.legacyTextWrap);\n      (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(container, {\n        height: nextHeight\n      });\n      (0,_textWysiwyg__WEBPACK_IMPORTED_MODULE_9__.updateOriginalContainerCache)(container.id, nextHeight);\n    }\n\n    if (metrics.width > maxContainerWidth) {\n      const nextWidth = computeContainerDimensionForBoundText(metrics.width, container.type);\n      (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(container, {\n        width: nextWidth\n      });\n    }\n\n    const updatedTextElement = Object.assign(Object.assign({}, textElement), boundTextUpdates);\n    const {\n      x,\n      y\n    } = computeBoundTextPosition(container, updatedTextElement);\n    boundTextUpdates.x = x;\n    boundTextUpdates.y = y;\n  }\n\n  (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(textElement, boundTextUpdates);\n};\nconst bindTextToShapeAfterDuplication = (sceneElements, oldElements, oldIdToDuplicatedId) => {\n  const sceneElementMap = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.arrayToMap)(sceneElements);\n  oldElements.forEach(element => {\n    const newElementId = oldIdToDuplicatedId.get(element.id);\n    const boundTextElementId = getBoundTextElementId(element);\n\n    if (boundTextElementId) {\n      const newTextElementId = oldIdToDuplicatedId.get(boundTextElementId);\n\n      if (newTextElementId) {\n        const newContainer = sceneElementMap.get(newElementId);\n\n        if (newContainer) {\n          (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(newContainer, {\n            boundElements: (element.boundElements || []).filter(boundElement => boundElement.id !== newTextElementId && boundElement.id !== boundTextElementId).concat({\n              type: \"text\",\n              id: newTextElementId\n            })\n          });\n        }\n\n        const newTextElement = sceneElementMap.get(newTextElementId);\n\n        if (newTextElement && (0,___WEBPACK_IMPORTED_MODULE_4__.isTextElement)(newTextElement)) {\n          (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(newTextElement, {\n            containerId: newContainer ? newElementId : null\n          });\n        }\n      }\n    }\n  });\n};\nconst handleBindTextResize = (container, transformHandleType, shouldMaintainAspectRatio = false) => {\n  var _a;\n\n  const boundTextElementId = getBoundTextElementId(container);\n\n  if (!boundTextElementId) {\n    return;\n  }\n\n  (0,_textWysiwyg__WEBPACK_IMPORTED_MODULE_9__.resetOriginalContainerCache)(container.id);\n  let textElement = _scene_Scene__WEBPACK_IMPORTED_MODULE_3__[\"default\"].getScene(container).getElement(boundTextElementId);\n\n  if (textElement && textElement.text) {\n    if (!container) {\n      return;\n    }\n\n    textElement = _scene_Scene__WEBPACK_IMPORTED_MODULE_3__[\"default\"].getScene(container).getElement(boundTextElementId);\n    let text = textElement.text;\n    let nextHeight = textElement.height;\n    let nextWidth = textElement.width;\n    const maxWidth = getBoundTextMaxWidth(container);\n    const maxHeight = getBoundTextMaxHeight(container, textElement);\n    let containerHeight = container.height;\n    let nextBaseLine = textElement.baseline;\n\n    if (shouldMaintainAspectRatio || transformHandleType !== \"n\" && transformHandleType !== \"s\") {\n      if (text) {\n        text = wrapText(textElement.originalText, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(textElement), maxWidth);\n      }\n\n      const metrics = measureText(text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(textElement), textElement.lineHeight);\n      nextHeight = metrics.height;\n      nextWidth = metrics.width;\n      nextBaseLine = metrics.baseline;\n    } // increase height in case text element height exceeds\n\n\n    if (nextHeight > maxHeight) {\n      containerHeight = computeContainerDimensionForBoundText(nextHeight, container.type, (_a = container.customData) === null || _a === void 0 ? void 0 : _a.legacyTextWrap);\n      const diff = containerHeight - container.height; // fix the y coord when resizing from ne/nw/n\n\n      const updatedY = !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container) && (transformHandleType === \"ne\" || transformHandleType === \"nw\" || transformHandleType === \"n\") ? container.y - diff : container.y;\n      (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(container, {\n        height: containerHeight,\n        y: updatedY\n      });\n    }\n\n    (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(textElement, {\n      text,\n      width: nextWidth,\n      height: nextHeight,\n      baseline: nextBaseLine\n    });\n\n    if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n      (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(textElement, computeBoundTextPosition(container, textElement));\n    }\n  }\n};\nconst computeBoundTextPosition = (container, boundTextElement) => {\n  if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n    return _linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getBoundTextElementPosition(container, boundTextElement);\n  }\n\n  const containerCoords = getContainerCoords(container);\n  const maxContainerHeight = getBoundTextMaxHeight(container, boundTextElement);\n  const maxContainerWidth = getBoundTextMaxWidth(container);\n  let x;\n  let y;\n\n  if (boundTextElement.verticalAlign === _constants__WEBPACK_IMPORTED_MODULE_2__.VERTICAL_ALIGN.TOP) {\n    y = containerCoords.y;\n  } else if (boundTextElement.verticalAlign === _constants__WEBPACK_IMPORTED_MODULE_2__.VERTICAL_ALIGN.BOTTOM) {\n    y = containerCoords.y + (maxContainerHeight - boundTextElement.height);\n  } else {\n    y = containerCoords.y + (maxContainerHeight / 2 - boundTextElement.height / 2);\n  }\n\n  if (boundTextElement.textAlign === _constants__WEBPACK_IMPORTED_MODULE_2__.TEXT_ALIGN.LEFT) {\n    x = containerCoords.x;\n  } else if (boundTextElement.textAlign === _constants__WEBPACK_IMPORTED_MODULE_2__.TEXT_ALIGN.RIGHT) {\n    x = containerCoords.x + (maxContainerWidth - boundTextElement.width);\n  } else {\n    x = containerCoords.x + (maxContainerWidth / 2 - boundTextElement.width / 2);\n  }\n\n  return {\n    x,\n    y\n  };\n}; //zsviczian\n\nconst createMeasureKey = (text, fontFamily) => fontFamily + text; //zsviczian\n\n\nconst measures = new Map();\nlet measureTextCacheTimeout;\n\nconst clearMeasureTextCache = () => {\n  measures.clear();\n  measureTextCacheTimeout = null;\n}; // https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js\n\n\nconst measureText = (text, font, lineHeight) => {\n  var _a;\n\n  if (measureTextCacheTimeout) {\n    clearTimeout(measureTextCacheTimeout);\n    measureTextCacheTimeout = null;\n  }\n\n  measureTextCacheTimeout = setTimeout(clearMeasureTextCache, 300); //zsviczian\n\n  const fontFamily = (_a = font.split(\"px \")) === null || _a === void 0 ? void 0 : _a[2]; //zsviczian\n\n  const key = createMeasureKey(text, fontFamily); //zsviczian\n\n  if (measures.has(key)) {\n    //zsviczian\n    const newFontSize = parseFloat(font); //zsviczian\n\n    const {\n      fontSize,\n      baseline,\n      height,\n      width\n    } = measures.get(key); //zsviczian\n\n    const ratio = newFontSize / fontSize; //zsviczian\n\n    return {\n      baseline: Math.round(baseline * ratio),\n      height: height * ratio,\n      width: width * ratio\n    }; //zsviczian\n  } //zsviczian\n\n\n  text = text.split(\"\\n\") // replace empty lines with single space because leading/trailing empty\n  // lines would be stripped from computation\n  .map(x => x || \" \").join(\"\\n\");\n  const fontSize = parseFloat(font);\n  const height = getTextHeight(text, fontSize, lineHeight);\n  const width = getTextWidth(text, font);\n  const baseline = measureBaseline(text, font, lineHeight);\n  measures.set(key, {\n    fontSize,\n    baseline,\n    height,\n    width\n  }); //zsviczian\n\n  return {\n    width,\n    height,\n    baseline\n  };\n};\nconst measureBaseline = (text, font, lineHeight, wrapInContainer) => {\n  var _a; //zsviczian - avoiding frequent dom event at the top level of the document\n  //addressess slow performance when scaling sticky notes in Obsidian popout windows\n\n\n  const textMeasureDiv = (_a = _components_App__WEBPACK_IMPORTED_MODULE_10__.hostPlugin === null || _components_App__WEBPACK_IMPORTED_MODULE_10__.hostPlugin === void 0 ? void 0 : _components_App__WEBPACK_IMPORTED_MODULE_10__.hostPlugin.textMeasureDiv) !== null && _a !== void 0 ? _a : document.body; //zsviczian\n\n  const container = document.createElement(\"div\");\n  container.style.position = \"absolute\";\n  container.style.whiteSpace = \"pre\";\n  container.style.font = font;\n  container.style.minHeight = \"1em\";\n\n  if (wrapInContainer) {\n    container.style.overflow = \"hidden\";\n    container.style.wordBreak = \"break-word\";\n    container.style.whiteSpace = \"pre-wrap\";\n  }\n\n  container.style.lineHeight = String(lineHeight);\n  container.innerText = text; // Baseline is important for positioning text on canvas\n\n  textMeasureDiv.appendChild(container); //zsviczian\n\n  const span = document.createElement(\"span\");\n  span.style.display = \"inline-block\";\n  span.style.overflow = \"hidden\";\n  span.style.width = \"1px\";\n  span.style.height = \"1px\";\n  container.appendChild(span);\n  let baseline = span.offsetTop + span.offsetHeight;\n  const height = container.offsetHeight;\n\n  if (_constants__WEBPACK_IMPORTED_MODULE_2__.isSafari) {\n    const canvasHeight = getTextHeight(text, parseFloat(font), lineHeight);\n    const fontSize = parseFloat(font); // In Safari the font size gets rounded off when rendering hence calculating the safari height and shifting the baseline if it differs\n    // from the actual canvas height\n\n    const domHeight = getTextHeight(text, Math.round(fontSize), lineHeight);\n\n    if (canvasHeight > height) {\n      baseline += canvasHeight - domHeight;\n    }\n\n    if (height > canvasHeight) {\n      baseline -= domHeight - canvasHeight;\n    }\n  }\n\n  textMeasureDiv.removeChild(container); //zsviczian\n\n  return baseline;\n};\n/**\r\n * To get unitless line-height (if unknown) we can calculate it by dividing\r\n * height-per-line by fontSize.\r\n */\n\nconst detectLineHeight = textElement => {\n  const lineCount = splitIntoLines(textElement.text).length;\n  return textElement.height / lineCount / textElement.fontSize;\n};\n/**\r\n * We calculate the line height from the font size and the unitless line height,\r\n * aligning with the W3C spec.\r\n */\n\nconst getLineHeightInPx = (fontSize, lineHeight) => {\n  return fontSize * lineHeight;\n}; // FIXME rename to getApproxMinContainerHeight\n\nconst getApproxMinLineHeight = (fontSize, lineHeight) => {\n  return getLineHeightInPx(fontSize, lineHeight) + _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n};\nlet canvas;\n\nconst getLineWidth = (text, font) => {\n  if (!canvas) {\n    canvas = document.createElement(\"canvas\");\n  }\n\n  const canvas2dContext = canvas.getContext(\"2d\");\n  canvas2dContext.font = font;\n  const width = canvas2dContext.measureText(text).width; // since in test env the canvas measureText algo\n  // doesn't measure text and instead just returns number of\n  // characters hence we assume that each letteris 10px\n\n  if ((0,_utils__WEBPACK_IMPORTED_MODULE_0__.isTestEnv)()) {\n    return width * 10;\n  }\n\n  return width;\n};\n\nconst getTextWidth = (text, font) => {\n  const lines = splitIntoLines(text);\n  let width = 0;\n  lines.forEach(line => {\n    width = Math.max(width, getLineWidth(line, font));\n  });\n  return width;\n};\nconst getTextHeight = (text, fontSize, lineHeight) => {\n  const lineCount = splitIntoLines(text).length;\n  return getLineHeightInPx(fontSize, lineHeight) * lineCount;\n};\nconst parseTokens = text => {\n  // Splitting words containing \"-\" as those are treated as separate words\n  // by css wrapping algorithm eg non-profit => non-, profit\n  const words = text.split(\"-\");\n\n  if (words.length > 1) {\n    // non-proft org => ['non-', 'profit org']\n    words.forEach((word, index) => {\n      if (index !== words.length - 1) {\n        words[index] = word += \"-\";\n      }\n    });\n  } // Joining the words with space and splitting them again with space to get the\n  // final list of tokens\n  // ['non-', 'profit org'] =>,'non- proft org' => ['non-','profit','org']\n\n\n  return words.join(\" \").split(\" \");\n};\nconst wrapText = (text, font, maxWidth) => {\n  // if maxWidth is not finite or NaN which can happen in case of bugs in\n  // computation, we need to make sure we don't continue as we'll end up\n  // in an infinite loop\n  if (!Number.isFinite(maxWidth) || maxWidth < 0) {\n    return text;\n  }\n\n  const lines = [];\n  const originalLines = text.split(\"\\n\");\n  const spaceWidth = getLineWidth(\" \", font);\n  let currentLine = \"\";\n  let currentLineWidthTillNow = 0;\n\n  const push = str => {\n    if (str.trim()) {\n      lines.push(str.trim());\n    }\n  };\n\n  const resetParams = () => {\n    currentLine = \"\";\n    currentLineWidthTillNow = 0;\n  };\n\n  originalLines.forEach(originalLine => {\n    const currentLineWidth = getTextWidth(originalLine, font); // Push the line if its <= maxWidth\n\n    if (currentLineWidth <= maxWidth) {\n      lines.push(originalLine);\n      return; // continue\n    }\n\n    const words = parseTokens(originalLine);\n    resetParams();\n    let index = 0;\n\n    while (index < words.length) {\n      const currentWordWidth = getLineWidth(words[index], font); // This will only happen when single word takes entire width\n\n      if (currentWordWidth === maxWidth) {\n        push(words[index]);\n        index++;\n      } // Start breaking longer words exceeding max width\n      else if (currentWordWidth > maxWidth) {\n        // push current line since the current word exceeds the max width\n        // so will be appended in next line\n        push(currentLine);\n        resetParams();\n\n        while (words[index].length > 0) {\n          const currentChar = String.fromCodePoint(words[index].codePointAt(0));\n          const width = charWidth.calculate(currentChar, font);\n          currentLineWidthTillNow += width;\n          words[index] = words[index].slice(currentChar.length);\n\n          if (currentLineWidthTillNow >= maxWidth) {\n            push(currentLine);\n            currentLine = currentChar;\n            currentLineWidthTillNow = width;\n          } else {\n            currentLine += currentChar;\n          }\n        } // push current line if appending space exceeds max width\n\n\n        if (currentLineWidthTillNow + spaceWidth >= maxWidth) {\n          push(currentLine);\n          resetParams(); // space needs to be appended before next word\n          // as currentLine contains chars which couldn't be appended\n          // to previous line unless the line ends with hyphen to sync\n          // with css word-wrap\n        } else if (!currentLine.endsWith(\"-\")) {\n          currentLine += \" \";\n          currentLineWidthTillNow += spaceWidth;\n        }\n\n        index++;\n      } else {\n        // Start appending words in a line till max width reached\n        while (currentLineWidthTillNow < maxWidth && index < words.length) {\n          const word = words[index];\n          currentLineWidthTillNow = getLineWidth(currentLine + word, font);\n\n          if (currentLineWidthTillNow > maxWidth) {\n            push(currentLine);\n            resetParams();\n            break;\n          }\n\n          index++; // if word ends with \"-\" then we don't need to add space\n          // to sync with css word-wrap\n\n          const shouldAppendSpace = !word.endsWith(\"-\");\n          currentLine += word;\n\n          if (shouldAppendSpace) {\n            currentLine += \" \";\n          } // Push the word if appending space exceeds max width\n\n\n          if (currentLineWidthTillNow + spaceWidth >= maxWidth) {\n            if (shouldAppendSpace) {\n              lines.push(currentLine.slice(0, -1));\n            } else {\n              lines.push(currentLine);\n            }\n\n            resetParams();\n            break;\n          }\n        }\n      }\n    }\n\n    if (currentLine.slice(-1) === \" \") {\n      // only remove last trailing space which we have added when joining words\n      currentLine = currentLine.slice(0, -1);\n      push(currentLine);\n    }\n  });\n  return lines.join(\"\\n\");\n};\nconst charWidth = (() => {\n  const cachedCharWidth = {};\n\n  const calculate = (char, font) => {\n    const ascii = char.charCodeAt(0);\n\n    if (!cachedCharWidth[font]) {\n      cachedCharWidth[font] = [];\n    }\n\n    if (!cachedCharWidth[font][ascii]) {\n      const width = getLineWidth(char, font);\n      cachedCharWidth[font][ascii] = width;\n    }\n\n    return cachedCharWidth[font][ascii];\n  };\n\n  const getCache = font => {\n    return cachedCharWidth[font];\n  };\n\n  return {\n    calculate,\n    getCache\n  };\n})();\nconst DUMMY_TEXT = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\".toLocaleUpperCase(); // FIXME rename to getApproxMinContainerWidth\n\nconst getApproxMinLineWidth = (font, lineHeight) => {\n  const maxCharWidth = getMaxCharWidth(font);\n\n  if (maxCharWidth === 0) {\n    return measureText(DUMMY_TEXT.split(\"\").join(\"\\n\"), font, lineHeight).width + _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n  }\n\n  return maxCharWidth + _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n};\nconst getMinCharWidth = font => {\n  const cache = charWidth.getCache(font);\n\n  if (!cache) {\n    return 0;\n  }\n\n  const cacheWithOutEmpty = cache.filter(val => val !== undefined);\n  return Math.min(...cacheWithOutEmpty);\n};\nconst getMaxCharWidth = font => {\n  const cache = charWidth.getCache(font);\n\n  if (!cache) {\n    return 0;\n  }\n\n  const cacheWithOutEmpty = cache.filter(val => val !== undefined);\n  return Math.max(...cacheWithOutEmpty);\n};\nconst getApproxCharsToFitInWidth = (font, width) => {\n  // Generally lower case is used so converting to lower case\n  const dummyText = DUMMY_TEXT.toLocaleLowerCase();\n  const batchLength = 6;\n  let index = 0;\n  let widthTillNow = 0;\n  let str = \"\";\n\n  while (widthTillNow <= width) {\n    const batch = dummyText.substr(index, index + batchLength);\n    str += batch;\n    widthTillNow += getLineWidth(str, font);\n\n    if (index === dummyText.length - 1) {\n      index = 0;\n    }\n\n    index = index + batchLength;\n  }\n\n  while (widthTillNow > width) {\n    str = str.substr(0, str.length - 1);\n    widthTillNow = getLineWidth(str, font);\n  }\n\n  return str.length;\n};\nconst getBoundTextElementId = container => {\n  var _a, _b, _c;\n\n  return ((_a = container === null || container === void 0 ? void 0 : container.boundElements) === null || _a === void 0 ? void 0 : _a.length) ? ((_c = (_b = container === null || container === void 0 ? void 0 : container.boundElements) === null || _b === void 0 ? void 0 : _b.filter(ele => ele.type === \"text\")[0]) === null || _c === void 0 ? void 0 : _c.id) || null : null;\n};\nconst getBoundTextElement = element => {\n  var _a;\n\n  if (!element) {\n    return null;\n  }\n\n  const boundTextElementId = getBoundTextElementId(element);\n\n  if (boundTextElementId) {\n    return ((_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_3__[\"default\"].getScene(element)) === null || _a === void 0 ? void 0 : _a.getElement(boundTextElementId)) || null;\n  }\n\n  return null;\n};\nconst getContainerElement = element => {\n  var _a;\n\n  if (!element) {\n    return null;\n  }\n\n  if (element.containerId) {\n    return ((_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_3__[\"default\"].getScene(element)) === null || _a === void 0 ? void 0 : _a.getElement(element.containerId)) || null;\n  }\n\n  return null;\n};\nconst getContainerCenter = (container, appState) => {\n  if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n    return {\n      x: container.x + container.width / 2,\n      y: container.y + container.height / 2\n    };\n  }\n\n  const points = _linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointsGlobalCoordinates(container);\n\n  if (points.length % 2 === 1) {\n    const index = Math.floor(container.points.length / 2);\n    const midPoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointGlobalCoordinates(container, container.points[index]);\n    return {\n      x: midPoint[0],\n      y: midPoint[1]\n    };\n  }\n\n  const index = container.points.length / 2 - 1;\n  let midSegmentMidpoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getEditorMidPoints(container, appState)[index];\n\n  if (!midSegmentMidpoint) {\n    midSegmentMidpoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getSegmentMidPoint(container, points[index], points[index + 1], index + 1);\n  }\n\n  return {\n    x: midSegmentMidpoint[0],\n    y: midSegmentMidpoint[1]\n  };\n};\nconst getContainerCoords = container => {\n  var _a;\n\n  let offsetX = _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING;\n  let offsetY = _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING;\n  const legacy = (_a = container.customData) === null || _a === void 0 ? void 0 : _a.legacyTextWrap; //zsviczian\n\n  if (container.type === \"ellipse\" && !legacy) {\n    // The derivation of coordinates is explained in https://github.com/excalidraw/excalidraw/pull/6172\n    offsetX += container.width / 2 * (1 - Math.sqrt(2) / 2);\n    offsetY += container.height / 2 * (1 - Math.sqrt(2) / 2);\n  } // The derivation of coordinates is explained in https://github.com/excalidraw/excalidraw/pull/6265\n\n\n  if (container.type === \"diamond\" && !legacy) {\n    offsetX += container.width / 4;\n    offsetY += container.height / 4;\n  }\n\n  return {\n    x: container.x + offsetX,\n    y: container.y + offsetY\n  };\n};\nconst getTextElementAngle = textElement => {\n  const container = getContainerElement(textElement);\n\n  if (!container || (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n    return textElement.angle;\n  }\n\n  return container.angle;\n};\nconst getBoundTextElementOffset = boundTextElement => {\n  const container = getContainerElement(boundTextElement);\n\n  if (!container || !boundTextElement) {\n    return 0;\n  }\n\n  if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n    return _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 8;\n  }\n\n  return _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING;\n};\nconst getBoundTextElementPosition = (container, boundTextElement) => {\n  if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n    return _linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getBoundTextElementPosition(container, boundTextElement);\n  }\n};\nconst shouldAllowVerticalAlign = selectedElements => {\n  return selectedElements.some(element => {\n    const hasBoundContainer = (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isBoundToContainer)(element);\n\n    if (hasBoundContainer) {\n      const container = getContainerElement(element);\n\n      if ((0,___WEBPACK_IMPORTED_MODULE_4__.isTextElement)(element) && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n        return false;\n      }\n\n      return true;\n    }\n\n    return false;\n  });\n};\nconst suppportsHorizontalAlign = selectedElements => {\n  return selectedElements.some(element => {\n    const hasBoundContainer = (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isBoundToContainer)(element);\n\n    if (hasBoundContainer) {\n      const container = getContainerElement(element);\n\n      if ((0,___WEBPACK_IMPORTED_MODULE_4__.isTextElement)(element) && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n        return false;\n      }\n\n      return true;\n    }\n\n    return (0,___WEBPACK_IMPORTED_MODULE_4__.isTextElement)(element);\n  });\n};\nconst getTextBindableContainerAtPosition = (elements, appState, x, y) => {\n  const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_7__.getSelectedElements)(elements, appState);\n\n  if (selectedElements.length === 1) {\n    return (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isTextBindableContainer)(selectedElements[0], false) ? selectedElements[0] : null;\n  }\n\n  let hitElement = null; // We need to to hit testing from front (end of the array) to back (beginning of the array)\n\n  for (let index = elements.length - 1; index >= 0; --index) {\n    if (elements[index].isDeleted) {\n      continue;\n    }\n\n    const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_4__.getElementAbsoluteCoords)(elements[index]);\n\n    if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(elements[index]) && (0,_collision__WEBPACK_IMPORTED_MODULE_8__.isHittingElementNotConsideringBoundingBox)(elements[index], appState, null, [x, y])) {\n      hitElement = elements[index];\n      break;\n    } else if (x1 < x && x < x2 && y1 < y && y < y2) {\n      hitElement = elements[index];\n      break;\n    }\n  }\n\n  return (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isTextBindableContainer)(hitElement, false) ? hitElement : null;\n};\nconst VALID_CONTAINER_TYPES = new Set([\"rectangle\", \"ellipse\", \"diamond\", \"arrow\"]);\nconst isValidTextContainer = element => VALID_CONTAINER_TYPES.has(element.type);\nconst computeContainerDimensionForBoundText = (dimension, containerType, legacy = false) => {\n  dimension = Math.ceil(dimension);\n  const padding = _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n\n  if (containerType === \"ellipse\" && !legacy) {\n    //zsviczian\n    return Math.round((dimension + padding) / Math.sqrt(2) * 2);\n  }\n\n  if (containerType === \"arrow\") {\n    return dimension + padding * 8;\n  }\n\n  if (containerType === \"diamond\" && !legacy) {\n    //zsviczian\n    return 2 * (dimension + padding);\n  }\n\n  return dimension + padding;\n};\nconst getBoundTextMaxWidth = (container, boundTextElement = getBoundTextElement(container)) => {\n  var _a, _b;\n\n  const {\n    width\n  } = container;\n\n  if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n    const minWidth = ((_a = boundTextElement === null || boundTextElement === void 0 ? void 0 : boundTextElement.fontSize) !== null && _a !== void 0 ? _a : _constants__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_FONT_SIZE) * _constants__WEBPACK_IMPORTED_MODULE_2__.ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO;\n    return Math.max(_constants__WEBPACK_IMPORTED_MODULE_2__.ARROW_LABEL_WIDTH_FRACTION * width, minWidth);\n  }\n\n  const legacy = (_b = container.customData) === null || _b === void 0 ? void 0 : _b.legacyTextWrap; //zsviczian\n\n  if (container.type === \"ellipse\" && !legacy) {\n    // The width of the largest rectangle inscribed inside an ellipse is\n    // Math.round((ellipse.width / 2) * Math.sqrt(2)) which is derived from\n    // equation of an ellipse -https://github.com/excalidraw/excalidraw/pull/6172\n    return Math.round(width / 2 * Math.sqrt(2)) - _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n  }\n\n  if (container.type === \"diamond\" && !legacy) {\n    // The width of the largest rectangle inscribed inside a rhombus is\n    // Math.round(width / 2) - https://github.com/excalidraw/excalidraw/pull/6265\n    return Math.round(width / 2) - _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n  }\n\n  return width - _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n};\nconst getBoundTextMaxHeight = (container, boundTextElement) => {\n  var _a;\n\n  const {\n    height\n  } = container;\n\n  if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n    const containerHeight = height - _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 8 * 2;\n\n    if (containerHeight <= 0) {\n      return boundTextElement.height;\n    }\n\n    return height;\n  }\n\n  const legacy = (_a = container.customData) === null || _a === void 0 ? void 0 : _a.legacyTextWrap; //zsviczian\n\n  if (container.type === \"ellipse\" && !legacy) {\n    // The height of the largest rectangle inscribed inside an ellipse is\n    // Math.round((ellipse.height / 2) * Math.sqrt(2)) which is derived from\n    // equation of an ellipse - https://github.com/excalidraw/excalidraw/pull/6172\n    return Math.round(height / 2 * Math.sqrt(2)) - _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n  }\n\n  if (container.type === \"diamond\" && !legacy) {\n    // The height of the largest rectangle inscribed inside a rhombus is\n    // Math.round(height / 2) - https://github.com/excalidraw/excalidraw/pull/6265\n    return Math.round(height / 2) - _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n  }\n\n  return height - _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n};\nconst isMeasureTextSupported = () => {\n  const width = getTextWidth(DUMMY_TEXT, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)({\n    fontSize: _constants__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_FONT_SIZE,\n    fontFamily: _constants__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_FONT_FAMILY\n  }));\n  return width > 0;\n};\n/**\r\n * Unitless line height\r\n *\r\n * In previous versions we used `normal` line height, which browsers interpret\r\n * differently, and based on font-family and font-size.\r\n *\r\n * To make line heights consistent across browsers we hardcode the values for\r\n * each of our fonts based on most common average line-heights.\r\n * See https://github.com/excalidraw/excalidraw/pull/6360#issuecomment-1477635971\r\n * where the values come from.\r\n */\n\nconst DEFAULT_LINE_HEIGHT = {\n  // ~1.25 is the average for Virgil in WebKit and Blink.\n  // Gecko (FF) uses ~1.28.\n  [_constants__WEBPACK_IMPORTED_MODULE_2__.FONT_FAMILY.Virgil]: 1.25,\n  // ~1.15 is the average for Virgil in WebKit and Blink.\n  // Gecko if all over the place.\n  [_constants__WEBPACK_IMPORTED_MODULE_2__.FONT_FAMILY.Helvetica]: 1.15,\n  // ~1.2 is the average for Virgil in WebKit and Blink, and kinda Gecko too\n  [_constants__WEBPACK_IMPORTED_MODULE_2__.FONT_FAMILY.Cascadia]: 1.2,\n  //zsviczian Average of the 3 fonts\n  // ~1.2 is the average for Virgil in WebKit and Blink, and kinda Gecko too\n  [_constants__WEBPACK_IMPORTED_MODULE_2__.FONT_FAMILY.Assistant]: 1.2,\n  [_constants__WEBPACK_IMPORTED_MODULE_2__.FONT_FAMILY.LocalFont]: 1.2 //zsviczian\n\n};\nconst getDefaultLineHeight = fontFamily => {\n  if (fontFamily in DEFAULT_LINE_HEIGHT) {\n    return DEFAULT_LINE_HEIGHT[fontFamily];\n  }\n\n  return DEFAULT_LINE_HEIGHT[_constants__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_FONT_FAMILY];\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/textElement.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"bindTextToShapeAfterDuplication\": () => (/* binding */ bindTextToShapeAfterDuplication),\n/* harmony export */   \"charWidth\": () => (/* binding */ charWidth),\n/* harmony export */   \"computeBoundTextPosition\": () => (/* binding */ computeBoundTextPosition),\n/* harmony export */   \"computeContainerDimensionForBoundText\": () => (/* binding */ computeContainerDimensionForBoundText),\n/* harmony export */   \"detectLineHeight\": () => (/* binding */ detectLineHeight),\n/* harmony export */   \"getApproxCharsToFitInWidth\": () => (/* binding */ getApproxCharsToFitInWidth),\n/* harmony export */   \"getApproxMinLineHeight\": () => (/* binding */ getApproxMinLineHeight),\n/* harmony export */   \"getApproxMinLineWidth\": () => (/* binding */ getApproxMinLineWidth),\n/* harmony export */   \"getBoundTextElement\": () => (/* binding */ getBoundTextElement),\n/* harmony export */   \"getBoundTextElementId\": () => (/* binding */ getBoundTextElementId),\n/* harmony export */   \"getBoundTextElementOffset\": () => (/* binding */ getBoundTextElementOffset),\n/* harmony export */   \"getBoundTextElementPosition\": () => (/* binding */ getBoundTextElementPosition),\n/* harmony export */   \"getBoundTextMaxHeight\": () => (/* binding */ getBoundTextMaxHeight),\n/* harmony export */   \"getBoundTextMaxWidth\": () => (/* binding */ getBoundTextMaxWidth),\n/* harmony export */   \"getContainerCenter\": () => (/* binding */ getContainerCenter),\n/* harmony export */   \"getContainerCoords\": () => (/* binding */ getContainerCoords),\n/* harmony export */   \"getContainerElement\": () => (/* binding */ getContainerElement),\n/* harmony export */   \"getDefaultLineHeight\": () => (/* binding */ getDefaultLineHeight),\n/* harmony export */   \"getLineHeightInPx\": () => (/* binding */ getLineHeightInPx),\n/* harmony export */   \"getMaxCharWidth\": () => (/* binding */ getMaxCharWidth),\n/* harmony export */   \"getMinCharWidth\": () => (/* binding */ getMinCharWidth),\n/* harmony export */   \"getTextBindableContainerAtPosition\": () => (/* binding */ getTextBindableContainerAtPosition),\n/* harmony export */   \"getTextElementAngle\": () => (/* binding */ getTextElementAngle),\n/* harmony export */   \"getTextHeight\": () => (/* binding */ getTextHeight),\n/* harmony export */   \"getTextWidth\": () => (/* binding */ getTextWidth),\n/* harmony export */   \"handleBindTextResize\": () => (/* binding */ handleBindTextResize),\n/* harmony export */   \"isMeasureTextSupported\": () => (/* binding */ isMeasureTextSupported),\n/* harmony export */   \"isValidTextContainer\": () => (/* binding */ isValidTextContainer),\n/* harmony export */   \"measureBaseline\": () => (/* binding */ measureBaseline),\n/* harmony export */   \"measureText\": () => (/* binding */ measureText),\n/* harmony export */   \"normalizeText\": () => (/* binding */ normalizeText),\n/* harmony export */   \"parseTokens\": () => (/* binding */ parseTokens),\n/* harmony export */   \"redrawTextBoundingBox\": () => (/* binding */ redrawTextBoundingBox),\n/* harmony export */   \"shouldAllowVerticalAlign\": () => (/* binding */ shouldAllowVerticalAlign),\n/* harmony export */   \"suppportsHorizontalAlign\": () => (/* binding */ suppportsHorizontalAlign),\n/* harmony export */   \"wrapText\": () => (/* binding */ wrapText)\n/* harmony export */ });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! . */ \"./element/index.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _linearElementEditor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _collision__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./collision */ \"./element/collision.ts\");\n/* harmony import */ var _textWysiwyg__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./textWysiwyg */ \"./element/textWysiwyg.tsx\");\n/* harmony import */ var _components_App__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../components/App */ \"./components/App.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst normalizeText = text => {\n  return (0,_utils__WEBPACK_IMPORTED_MODULE_0__.normalizeEOL)(text) // replace tabs with spaces so they render and measure correctly\n  .replace(/\\t/g, \"        \");\n};\n\nconst splitIntoLines = text => {\n  return normalizeText(text).split(\"\\n\");\n};\n\nconst redrawTextBoundingBox = (textElement, container) => {\n  var _a;\n\n  let maxWidth = undefined;\n  const boundTextUpdates = {\n    x: textElement.x,\n    y: textElement.y,\n    text: textElement.text,\n    width: textElement.width,\n    height: textElement.height,\n    baseline: textElement.baseline\n  };\n  boundTextUpdates.text = textElement.text;\n\n  if (container) {\n    maxWidth = getBoundTextMaxWidth(container, textElement);\n    boundTextUpdates.text = wrapText(textElement.originalText, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(textElement), maxWidth);\n  }\n\n  const metrics = measureText(boundTextUpdates.text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(textElement), textElement.lineHeight);\n  boundTextUpdates.width = metrics.width;\n  boundTextUpdates.height = metrics.height;\n  boundTextUpdates.baseline = metrics.baseline;\n\n  if (container) {\n    const maxContainerHeight = getBoundTextMaxHeight(container, textElement);\n    const maxContainerWidth = getBoundTextMaxWidth(container);\n\n    if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container) && metrics.height > maxContainerHeight) {\n      const nextHeight = computeContainerDimensionForBoundText(metrics.height, container.type, (_a = container.customData) === null || _a === void 0 ? void 0 : _a.legacyTextWrap);\n      (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(container, {\n        height: nextHeight\n      });\n      (0,_textWysiwyg__WEBPACK_IMPORTED_MODULE_9__.updateOriginalContainerCache)(container.id, nextHeight);\n    }\n\n    if (metrics.width > maxContainerWidth) {\n      const nextWidth = computeContainerDimensionForBoundText(metrics.width, container.type);\n      (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(container, {\n        width: nextWidth\n      });\n    }\n\n    const updatedTextElement = Object.assign(Object.assign({}, textElement), boundTextUpdates);\n    const {\n      x,\n      y\n    } = computeBoundTextPosition(container, updatedTextElement);\n    boundTextUpdates.x = x;\n    boundTextUpdates.y = y;\n  }\n\n  (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(textElement, boundTextUpdates);\n};\nconst bindTextToShapeAfterDuplication = (sceneElements, oldElements, oldIdToDuplicatedId) => {\n  const sceneElementMap = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.arrayToMap)(sceneElements);\n  oldElements.forEach(element => {\n    const newElementId = oldIdToDuplicatedId.get(element.id);\n    const boundTextElementId = getBoundTextElementId(element);\n\n    if (boundTextElementId) {\n      const newTextElementId = oldIdToDuplicatedId.get(boundTextElementId);\n\n      if (newTextElementId) {\n        const newContainer = sceneElementMap.get(newElementId);\n\n        if (newContainer) {\n          (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(newContainer, {\n            boundElements: (element.boundElements || []).filter(boundElement => boundElement.id !== newTextElementId && boundElement.id !== boundTextElementId).concat({\n              type: \"text\",\n              id: newTextElementId\n            })\n          });\n        }\n\n        const newTextElement = sceneElementMap.get(newTextElementId);\n\n        if (newTextElement && (0,___WEBPACK_IMPORTED_MODULE_4__.isTextElement)(newTextElement)) {\n          (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(newTextElement, {\n            containerId: newContainer ? newElementId : null\n          });\n        }\n      }\n    }\n  });\n};\nconst handleBindTextResize = (container, transformHandleType, shouldMaintainAspectRatio = false) => {\n  var _a;\n\n  const boundTextElementId = getBoundTextElementId(container);\n\n  if (!boundTextElementId) {\n    return;\n  }\n\n  (0,_textWysiwyg__WEBPACK_IMPORTED_MODULE_9__.resetOriginalContainerCache)(container.id);\n  let textElement = _scene_Scene__WEBPACK_IMPORTED_MODULE_3__[\"default\"].getScene(container).getElement(boundTextElementId);\n\n  if (textElement && textElement.text) {\n    if (!container) {\n      return;\n    }\n\n    textElement = _scene_Scene__WEBPACK_IMPORTED_MODULE_3__[\"default\"].getScene(container).getElement(boundTextElementId);\n    let text = textElement.text;\n    let nextHeight = textElement.height;\n    let nextWidth = textElement.width;\n    const maxWidth = getBoundTextMaxWidth(container);\n    const maxHeight = getBoundTextMaxHeight(container, textElement);\n    let containerHeight = container.height;\n    let nextBaseLine = textElement.baseline;\n\n    if (shouldMaintainAspectRatio || transformHandleType !== \"n\" && transformHandleType !== \"s\") {\n      if (text) {\n        text = wrapText(textElement.originalText, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(textElement), maxWidth);\n      }\n\n      const metrics = measureText(text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(textElement), textElement.lineHeight);\n      nextHeight = metrics.height;\n      nextWidth = metrics.width;\n      nextBaseLine = metrics.baseline;\n    } // increase height in case text element height exceeds\n\n\n    if (nextHeight > maxHeight) {\n      containerHeight = computeContainerDimensionForBoundText(nextHeight, container.type, (_a = container.customData) === null || _a === void 0 ? void 0 : _a.legacyTextWrap);\n      const diff = containerHeight - container.height; // fix the y coord when resizing from ne/nw/n\n\n      const updatedY = !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container) && (transformHandleType === \"ne\" || transformHandleType === \"nw\" || transformHandleType === \"n\") ? container.y - diff : container.y;\n      (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(container, {\n        height: containerHeight,\n        y: updatedY\n      });\n    }\n\n    (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(textElement, {\n      text,\n      width: nextWidth,\n      height: nextHeight,\n      baseline: nextBaseLine\n    });\n\n    if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n      (0,_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(textElement, computeBoundTextPosition(container, textElement));\n    }\n  }\n};\nconst computeBoundTextPosition = (container, boundTextElement) => {\n  if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n    return _linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getBoundTextElementPosition(container, boundTextElement);\n  }\n\n  const containerCoords = getContainerCoords(container);\n  const maxContainerHeight = getBoundTextMaxHeight(container, boundTextElement);\n  const maxContainerWidth = getBoundTextMaxWidth(container);\n  let x;\n  let y;\n\n  if (boundTextElement.verticalAlign === _constants__WEBPACK_IMPORTED_MODULE_2__.VERTICAL_ALIGN.TOP) {\n    y = containerCoords.y;\n  } else if (boundTextElement.verticalAlign === _constants__WEBPACK_IMPORTED_MODULE_2__.VERTICAL_ALIGN.BOTTOM) {\n    y = containerCoords.y + (maxContainerHeight - boundTextElement.height);\n  } else {\n    y = containerCoords.y + (maxContainerHeight / 2 - boundTextElement.height / 2);\n  }\n\n  if (boundTextElement.textAlign === _constants__WEBPACK_IMPORTED_MODULE_2__.TEXT_ALIGN.LEFT) {\n    x = containerCoords.x;\n  } else if (boundTextElement.textAlign === _constants__WEBPACK_IMPORTED_MODULE_2__.TEXT_ALIGN.RIGHT) {\n    x = containerCoords.x + (maxContainerWidth - boundTextElement.width);\n  } else {\n    x = containerCoords.x + (maxContainerWidth / 2 - boundTextElement.width / 2);\n  }\n\n  return {\n    x,\n    y\n  };\n}; //zsviczian\n\nconst createMeasureKey = (text, fontFamily) => fontFamily + text; //zsviczian\n\n\nconst measures = new Map();\nlet measureTextCacheTimeout;\n\nconst clearMeasureTextCache = () => {\n  measures.clear();\n  measureTextCacheTimeout = null;\n}; // https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js\n\n\nconst measureText = (text, font, lineHeight) => {\n  var _a;\n\n  if (measureTextCacheTimeout) {\n    clearTimeout(measureTextCacheTimeout);\n    measureTextCacheTimeout = null;\n  }\n\n  measureTextCacheTimeout = setTimeout(clearMeasureTextCache, 300); //zsviczian\n\n  const fontFamily = (_a = font.split(\"px \")) === null || _a === void 0 ? void 0 : _a[2]; //zsviczian\n\n  const key = createMeasureKey(text, fontFamily); //zsviczian\n\n  if (measures.has(key)) {\n    //zsviczian\n    const newFontSize = parseFloat(font); //zsviczian\n\n    const {\n      fontSize,\n      baseline,\n      height,\n      width\n    } = measures.get(key); //zsviczian\n\n    const ratio = newFontSize / fontSize; //zsviczian\n\n    return {\n      baseline: Math.round(baseline * ratio),\n      height: height * ratio,\n      width: width * ratio\n    }; //zsviczian\n  } //zsviczian\n\n\n  text = text.split(\"\\n\") // replace empty lines with single space because leading/trailing empty\n  // lines would be stripped from computation\n  .map(x => x || \" \").join(\"\\n\");\n  const fontSize = parseFloat(font);\n  const height = getTextHeight(text, fontSize, lineHeight);\n  const width = getTextWidth(text, font);\n  const baseline = measureBaseline(text, font, lineHeight);\n  measures.set(key, {\n    fontSize,\n    baseline,\n    height,\n    width\n  }); //zsviczian\n\n  return {\n    width,\n    height,\n    baseline\n  };\n};\nconst measureBaseline = (text, font, lineHeight, wrapInContainer) => {\n  var _a; //zsviczian - avoiding frequent dom event at the top level of the document\n  //addressess slow performance when scaling sticky notes in Obsidian popout windows\n\n\n  const textMeasureDiv = (_a = _components_App__WEBPACK_IMPORTED_MODULE_10__.hostPlugin === null || _components_App__WEBPACK_IMPORTED_MODULE_10__.hostPlugin === void 0 ? void 0 : _components_App__WEBPACK_IMPORTED_MODULE_10__.hostPlugin.textMeasureDiv) !== null && _a !== void 0 ? _a : document.body; //zsviczian\n\n  const container = document.createElement(\"div\");\n  container.style.position = \"absolute\";\n  container.style.whiteSpace = \"pre\";\n  container.style.font = font;\n  container.style.minHeight = \"1em\";\n\n  if (wrapInContainer) {\n    container.style.overflow = \"hidden\";\n    container.style.wordBreak = \"break-word\";\n    container.style.whiteSpace = \"pre-wrap\";\n  }\n\n  container.style.lineHeight = String(lineHeight);\n  container.innerText = text; // Baseline is important for positioning text on canvas\n\n  textMeasureDiv.appendChild(container); //zsviczian\n\n  const span = document.createElement(\"span\");\n  span.style.display = \"inline-block\";\n  span.style.overflow = \"hidden\";\n  span.style.width = \"1px\";\n  span.style.height = \"1px\";\n  container.appendChild(span);\n  let baseline = span.offsetTop + span.offsetHeight;\n  const height = container.offsetHeight;\n\n  if (_constants__WEBPACK_IMPORTED_MODULE_2__.isSafari) {\n    const canvasHeight = getTextHeight(text, parseFloat(font), lineHeight);\n    const fontSize = parseFloat(font); // In Safari the font size gets rounded off when rendering hence calculating the safari height and shifting the baseline if it differs\n    // from the actual canvas height\n\n    const domHeight = getTextHeight(text, Math.round(fontSize), lineHeight);\n\n    if (canvasHeight > height) {\n      baseline += canvasHeight - domHeight;\n    }\n\n    if (height > canvasHeight) {\n      baseline -= domHeight - canvasHeight;\n    }\n  }\n\n  textMeasureDiv.removeChild(container); //zsviczian\n\n  return baseline;\n};\n/**\r\n * To get unitless line-height (if unknown) we can calculate it by dividing\r\n * height-per-line by fontSize.\r\n */\n\nconst detectLineHeight = textElement => {\n  const lineCount = splitIntoLines(textElement.text).length;\n  return textElement.height / lineCount / textElement.fontSize;\n};\n/**\r\n * We calculate the line height from the font size and the unitless line height,\r\n * aligning with the W3C spec.\r\n */\n\nconst getLineHeightInPx = (fontSize, lineHeight) => {\n  return fontSize * lineHeight;\n}; // FIXME rename to getApproxMinContainerHeight\n\nconst getApproxMinLineHeight = (fontSize, lineHeight) => {\n  return getLineHeightInPx(fontSize, lineHeight) + _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n};\nlet canvas;\n\nconst getLineWidth = (text, font) => {\n  if (!canvas) {\n    canvas = document.createElement(\"canvas\");\n  }\n\n  const canvas2dContext = canvas.getContext(\"2d\");\n  canvas2dContext.font = font;\n  const width = canvas2dContext.measureText(text).width; // since in test env the canvas measureText algo\n  // doesn't measure text and instead just returns number of\n  // characters hence we assume that each letteris 10px\n\n  if ((0,_utils__WEBPACK_IMPORTED_MODULE_0__.isTestEnv)()) {\n    return width * 10;\n  }\n\n  return width;\n};\n\nconst getTextWidth = (text, font) => {\n  const lines = splitIntoLines(text);\n  let width = 0;\n  lines.forEach(line => {\n    width = Math.max(width, getLineWidth(line, font));\n  });\n  return width;\n};\nconst getTextHeight = (text, fontSize, lineHeight) => {\n  const lineCount = splitIntoLines(text).length;\n  return getLineHeightInPx(fontSize, lineHeight) * lineCount;\n};\nconst parseTokens = text => {\n  // Splitting words containing \"-\" as those are treated as separate words\n  // by css wrapping algorithm eg non-profit => non-, profit\n  const words = text.split(\"-\");\n\n  if (words.length > 1) {\n    // non-proft org => ['non-', 'profit org']\n    words.forEach((word, index) => {\n      if (index !== words.length - 1) {\n        words[index] = word += \"-\";\n      }\n    });\n  } // Joining the words with space and splitting them again with space to get the\n  // final list of tokens\n  // ['non-', 'profit org'] =>,'non- proft org' => ['non-','profit','org']\n\n\n  return words.join(\" \").split(\" \");\n};\nconst wrapText = (text, font, maxWidth) => {\n  // if maxWidth is not finite or NaN which can happen in case of bugs in\n  // computation, we need to make sure we don't continue as we'll end up\n  // in an infinite loop\n  if (!Number.isFinite(maxWidth) || maxWidth < 0) {\n    return text;\n  }\n\n  const lines = [];\n  const originalLines = text.split(\"\\n\");\n  const spaceWidth = getLineWidth(\" \", font);\n  let currentLine = \"\";\n  let currentLineWidthTillNow = 0;\n\n  const push = str => {\n    if (str.trim()) {\n      lines.push(str.trim());\n    }\n  };\n\n  const resetParams = () => {\n    currentLine = \"\";\n    currentLineWidthTillNow = 0;\n  };\n\n  originalLines.forEach(originalLine => {\n    const currentLineWidth = getTextWidth(originalLine, font); // Push the line if its <= maxWidth\n\n    if (currentLineWidth <= maxWidth) {\n      lines.push(originalLine);\n      return; // continue\n    }\n\n    const words = parseTokens(originalLine);\n    resetParams();\n    let index = 0;\n\n    while (index < words.length) {\n      const currentWordWidth = getLineWidth(words[index], font); // This will only happen when single word takes entire width\n\n      if (currentWordWidth === maxWidth) {\n        push(words[index]);\n        index++;\n      } // Start breaking longer words exceeding max width\n      else if (currentWordWidth > maxWidth) {\n        // push current line since the current word exceeds the max width\n        // so will be appended in next line\n        push(currentLine);\n        resetParams();\n\n        while (words[index].length > 0) {\n          const currentChar = String.fromCodePoint(words[index].codePointAt(0));\n          const width = charWidth.calculate(currentChar, font);\n          currentLineWidthTillNow += width;\n          words[index] = words[index].slice(currentChar.length);\n\n          if (currentLineWidthTillNow >= maxWidth) {\n            push(currentLine);\n            currentLine = currentChar;\n            currentLineWidthTillNow = width;\n          } else {\n            currentLine += currentChar;\n          }\n        } // push current line if appending space exceeds max width\n\n\n        if (currentLineWidthTillNow + spaceWidth >= maxWidth) {\n          push(currentLine);\n          resetParams(); // space needs to be appended before next word\n          // as currentLine contains chars which couldn't be appended\n          // to previous line unless the line ends with hyphen to sync\n          // with css word-wrap\n        } else if (!currentLine.endsWith(\"-\")) {\n          currentLine += \" \";\n          currentLineWidthTillNow += spaceWidth;\n        }\n\n        index++;\n      } else {\n        // Start appending words in a line till max width reached\n        while (currentLineWidthTillNow < maxWidth && index < words.length) {\n          const word = words[index];\n          currentLineWidthTillNow = getLineWidth(currentLine + word, font);\n\n          if (currentLineWidthTillNow > maxWidth) {\n            push(currentLine);\n            resetParams();\n            break;\n          }\n\n          index++; // if word ends with \"-\" then we don't need to add space\n          // to sync with css word-wrap\n\n          const shouldAppendSpace = !word.endsWith(\"-\");\n          currentLine += word;\n\n          if (shouldAppendSpace) {\n            currentLine += \" \";\n          } // Push the word if appending space exceeds max width\n\n\n          if (currentLineWidthTillNow + spaceWidth >= maxWidth) {\n            if (shouldAppendSpace) {\n              lines.push(currentLine.slice(0, -1));\n            } else {\n              lines.push(currentLine);\n            }\n\n            resetParams();\n            break;\n          }\n        }\n      }\n    }\n\n    if (currentLine.slice(-1) === \" \") {\n      // only remove last trailing space which we have added when joining words\n      currentLine = currentLine.slice(0, -1);\n      push(currentLine);\n    }\n  });\n  return lines.join(\"\\n\");\n};\nconst charWidth = (() => {\n  const cachedCharWidth = {};\n\n  const calculate = (char, font) => {\n    const ascii = char.charCodeAt(0);\n\n    if (!cachedCharWidth[font]) {\n      cachedCharWidth[font] = [];\n    }\n\n    if (!cachedCharWidth[font][ascii]) {\n      const width = getLineWidth(char, font);\n      cachedCharWidth[font][ascii] = width;\n    }\n\n    return cachedCharWidth[font][ascii];\n  };\n\n  const getCache = font => {\n    return cachedCharWidth[font];\n  };\n\n  return {\n    calculate,\n    getCache\n  };\n})();\nconst DUMMY_TEXT = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\".toLocaleUpperCase(); // FIXME rename to getApproxMinContainerWidth\n\nconst getApproxMinLineWidth = (font, lineHeight) => {\n  const maxCharWidth = getMaxCharWidth(font);\n\n  if (maxCharWidth === 0) {\n    return measureText(DUMMY_TEXT.split(\"\").join(\"\\n\"), font, lineHeight).width + _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n  }\n\n  return maxCharWidth + _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n};\nconst getMinCharWidth = font => {\n  const cache = charWidth.getCache(font);\n\n  if (!cache) {\n    return 0;\n  }\n\n  const cacheWithOutEmpty = cache.filter(val => val !== undefined);\n  return Math.min(...cacheWithOutEmpty);\n};\nconst getMaxCharWidth = font => {\n  const cache = charWidth.getCache(font);\n\n  if (!cache) {\n    return 0;\n  }\n\n  const cacheWithOutEmpty = cache.filter(val => val !== undefined);\n  return Math.max(...cacheWithOutEmpty);\n};\nconst getApproxCharsToFitInWidth = (font, width) => {\n  // Generally lower case is used so converting to lower case\n  const dummyText = DUMMY_TEXT.toLocaleLowerCase();\n  const batchLength = 6;\n  let index = 0;\n  let widthTillNow = 0;\n  let str = \"\";\n\n  while (widthTillNow <= width) {\n    const batch = dummyText.substr(index, index + batchLength);\n    str += batch;\n    widthTillNow += getLineWidth(str, font);\n\n    if (index === dummyText.length - 1) {\n      index = 0;\n    }\n\n    index = index + batchLength;\n  }\n\n  while (widthTillNow > width) {\n    str = str.substr(0, str.length - 1);\n    widthTillNow = getLineWidth(str, font);\n  }\n\n  return str.length;\n};\nconst getBoundTextElementId = container => {\n  var _a, _b, _c;\n\n  return ((_a = container === null || container === void 0 ? void 0 : container.boundElements) === null || _a === void 0 ? void 0 : _a.length) ? ((_c = (_b = container === null || container === void 0 ? void 0 : container.boundElements) === null || _b === void 0 ? void 0 : _b.filter(ele => ele.type === \"text\")[0]) === null || _c === void 0 ? void 0 : _c.id) || null : null;\n};\nconst getBoundTextElement = element => {\n  var _a;\n\n  if (!element) {\n    return null;\n  }\n\n  const boundTextElementId = getBoundTextElementId(element);\n\n  if (boundTextElementId) {\n    return ((_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_3__[\"default\"].getScene(element)) === null || _a === void 0 ? void 0 : _a.getElement(boundTextElementId)) || null;\n  }\n\n  return null;\n};\nconst getContainerElement = element => {\n  var _a;\n\n  if (!element) {\n    return null;\n  }\n\n  if (element.containerId) {\n    return ((_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_3__[\"default\"].getScene(element)) === null || _a === void 0 ? void 0 : _a.getElement(element.containerId)) || null;\n  }\n\n  return null;\n};\nconst getContainerCenter = (container, appState) => {\n  if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n    return {\n      x: container.x + container.width / 2,\n      y: container.y + container.height / 2\n    };\n  }\n\n  const points = _linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointsGlobalCoordinates(container);\n\n  if (points.length % 2 === 1) {\n    const index = Math.floor(container.points.length / 2);\n    const midPoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointGlobalCoordinates(container, container.points[index]);\n    return {\n      x: midPoint[0],\n      y: midPoint[1]\n    };\n  }\n\n  const index = container.points.length / 2 - 1;\n  let midSegmentMidpoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getEditorMidPoints(container, appState)[index];\n\n  if (!midSegmentMidpoint) {\n    midSegmentMidpoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getSegmentMidPoint(container, points[index], points[index + 1], index + 1);\n  }\n\n  return {\n    x: midSegmentMidpoint[0],\n    y: midSegmentMidpoint[1]\n  };\n};\nconst getContainerCoords = container => {\n  var _a;\n\n  let offsetX = _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING;\n  let offsetY = _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING;\n  const legacy = (_a = container.customData) === null || _a === void 0 ? void 0 : _a.legacyTextWrap; //zsviczian\n\n  if (container.type === \"ellipse\" && !legacy) {\n    // The derivation of coordinates is explained in https://github.com/excalidraw/excalidraw/pull/6172\n    offsetX += container.width / 2 * (1 - Math.sqrt(2) / 2);\n    offsetY += container.height / 2 * (1 - Math.sqrt(2) / 2);\n  } // The derivation of coordinates is explained in https://github.com/excalidraw/excalidraw/pull/6265\n\n\n  if (container.type === \"diamond\" && !legacy) {\n    offsetX += container.width / 4;\n    offsetY += container.height / 4;\n  }\n\n  return {\n    x: container.x + offsetX,\n    y: container.y + offsetY\n  };\n};\nconst getTextElementAngle = textElement => {\n  const container = getContainerElement(textElement);\n\n  if (!container || (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n    return textElement.angle;\n  }\n\n  return container.angle;\n};\nconst getBoundTextElementOffset = boundTextElement => {\n  const container = getContainerElement(boundTextElement);\n\n  if (!container || !boundTextElement) {\n    return 0;\n  }\n\n  if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n    return _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 8;\n  }\n\n  return _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING;\n};\nconst getBoundTextElementPosition = (container, boundTextElement) => {\n  if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n    return _linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getBoundTextElementPosition(container, boundTextElement);\n  }\n};\nconst shouldAllowVerticalAlign = selectedElements => {\n  return selectedElements.some(element => {\n    const hasBoundContainer = (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isBoundToContainer)(element);\n\n    if (hasBoundContainer) {\n      const container = getContainerElement(element);\n\n      if ((0,___WEBPACK_IMPORTED_MODULE_4__.isTextElement)(element) && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n        return false;\n      }\n\n      return true;\n    }\n\n    return false;\n  });\n};\nconst suppportsHorizontalAlign = selectedElements => {\n  return selectedElements.some(element => {\n    const hasBoundContainer = (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isBoundToContainer)(element);\n\n    if (hasBoundContainer) {\n      const container = getContainerElement(element);\n\n      if ((0,___WEBPACK_IMPORTED_MODULE_4__.isTextElement)(element) && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n        return false;\n      }\n\n      return true;\n    }\n\n    return (0,___WEBPACK_IMPORTED_MODULE_4__.isTextElement)(element);\n  });\n};\nconst getTextBindableContainerAtPosition = (elements, appState, x, y) => {\n  const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_7__.getSelectedElements)(elements, appState);\n\n  if (selectedElements.length === 1) {\n    return (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isTextBindableContainer)(selectedElements[0], false) ? selectedElements[0] : null;\n  }\n\n  let hitElement = null; // We need to to hit testing from front (end of the array) to back (beginning of the array)\n\n  for (let index = elements.length - 1; index >= 0; --index) {\n    if (elements[index].isDeleted) {\n      continue;\n    }\n\n    const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_4__.getElementAbsoluteCoords)(elements[index]);\n\n    if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(elements[index]) && (0,_collision__WEBPACK_IMPORTED_MODULE_8__.isHittingElementNotConsideringBoundingBox)(elements[index], appState, null, [x, y])) {\n      hitElement = elements[index];\n      break;\n    } else if (x1 < x && x < x2 && y1 < y && y < y2) {\n      hitElement = elements[index];\n      break;\n    }\n  }\n\n  return (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isTextBindableContainer)(hitElement, false) ? hitElement : null;\n};\nconst VALID_CONTAINER_TYPES = new Set([\"rectangle\", \"ellipse\", \"diamond\", \"arrow\"]);\nconst isValidTextContainer = element => VALID_CONTAINER_TYPES.has(element.type);\nconst computeContainerDimensionForBoundText = (dimension, containerType, legacy = false) => {\n  dimension = Math.ceil(dimension);\n  const padding = _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n\n  if (containerType === \"ellipse\" && !legacy) {\n    //zsviczian\n    return Math.round((dimension + padding) / Math.sqrt(2) * 2);\n  }\n\n  if (containerType === \"arrow\") {\n    return dimension + padding * 8;\n  }\n\n  if (containerType === \"diamond\" && !legacy) {\n    //zsviczian\n    return 2 * (dimension + padding);\n  }\n\n  return dimension + padding;\n};\nconst getBoundTextMaxWidth = (container, boundTextElement = getBoundTextElement(container)) => {\n  var _a, _b;\n\n  const {\n    width\n  } = container;\n\n  if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n    const minWidth = ((_a = boundTextElement === null || boundTextElement === void 0 ? void 0 : boundTextElement.fontSize) !== null && _a !== void 0 ? _a : _constants__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_FONT_SIZE) * _constants__WEBPACK_IMPORTED_MODULE_2__.ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO;\n    return Math.max(_constants__WEBPACK_IMPORTED_MODULE_2__.ARROW_LABEL_WIDTH_FRACTION * width, minWidth);\n  }\n\n  const legacy = (_b = container.customData) === null || _b === void 0 ? void 0 : _b.legacyTextWrap; //zsviczian\n\n  if (container.type === \"ellipse\" && !legacy) {\n    // The width of the largest rectangle inscribed inside an ellipse is\n    // Math.round((ellipse.width / 2) * Math.sqrt(2)) which is derived from\n    // equation of an ellipse -https://github.com/excalidraw/excalidraw/pull/6172\n    return Math.round(width / 2 * Math.sqrt(2)) - _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n  }\n\n  if (container.type === \"diamond\" && !legacy) {\n    // The width of the largest rectangle inscribed inside a rhombus is\n    // Math.round(width / 2) - https://github.com/excalidraw/excalidraw/pull/6265\n    return Math.round(width / 2) - _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n  }\n\n  return width - _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n};\nconst getBoundTextMaxHeight = (container, boundTextElement) => {\n  var _a;\n\n  const {\n    height\n  } = container;\n\n  if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(container)) {\n    const containerHeight = height - _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 8 * 2;\n\n    if (containerHeight <= 0) {\n      return boundTextElement.height;\n    }\n\n    return height;\n  }\n\n  const legacy = (_a = container.customData) === null || _a === void 0 ? void 0 : _a.legacyTextWrap; //zsviczian\n\n  if (container.type === \"ellipse\" && !legacy) {\n    // The height of the largest rectangle inscribed inside an ellipse is\n    // Math.round((ellipse.height / 2) * Math.sqrt(2)) which is derived from\n    // equation of an ellipse - https://github.com/excalidraw/excalidraw/pull/6172\n    return Math.round(height / 2 * Math.sqrt(2)) - _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n  }\n\n  if (container.type === \"diamond\" && !legacy) {\n    // The height of the largest rectangle inscribed inside a rhombus is\n    // Math.round(height / 2) - https://github.com/excalidraw/excalidraw/pull/6265\n    return Math.round(height / 2) - _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n  }\n\n  return height - _constants__WEBPACK_IMPORTED_MODULE_2__.BOUND_TEXT_PADDING * 2;\n};\nconst isMeasureTextSupported = () => {\n  const width = getTextWidth(DUMMY_TEXT, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)({\n    fontSize: _constants__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_FONT_SIZE,\n    fontFamily: _constants__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_FONT_FAMILY\n  }));\n  return width > 0;\n};\n/**\r\n * Unitless line height\r\n *\r\n * In previous versions we used `normal` line height, which browsers interpret\r\n * differently, and based on font-family and font-size.\r\n *\r\n * To make line heights consistent across browsers we hardcode the values for\r\n * each of our fonts based on most common average line-heights.\r\n * See https://github.com/excalidraw/excalidraw/pull/6360#issuecomment-1477635971\r\n * where the values come from.\r\n */\n\nconst DEFAULT_LINE_HEIGHT = {\n  // ~1.25 is the average for Virgil in WebKit and Blink.\n  // Gecko (FF) uses ~1.28.\n  [_constants__WEBPACK_IMPORTED_MODULE_2__.FONT_FAMILY.Virgil]: 1.25,\n  // ~1.15 is the average for Virgil in WebKit and Blink.\n  // Gecko if all over the place.\n  [_constants__WEBPACK_IMPORTED_MODULE_2__.FONT_FAMILY.Helvetica]: 1.15,\n  // ~1.2 is the average for Virgil in WebKit and Blink, and kinda Gecko too\n  [_constants__WEBPACK_IMPORTED_MODULE_2__.FONT_FAMILY.Cascadia]: 1.2,\n  //zsviczian Average of the 3 fonts\n  // ~1.2 is the average for Virgil in WebKit and Blink, and kinda Gecko too\n  [_constants__WEBPACK_IMPORTED_MODULE_2__.FONT_FAMILY.Assistant]: 1.2,\n  [_constants__WEBPACK_IMPORTED_MODULE_2__.FONT_FAMILY.LocalFont]: 1.2 //zsviczian\n\n};\nconst getDefaultLineHeight = fontFamily => {\n  if (fontFamily in DEFAULT_LINE_HEIGHT) {\n    return DEFAULT_LINE_HEIGHT[fontFamily];\n  }\n\n  return DEFAULT_LINE_HEIGHT[_constants__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_FONT_FAMILY];\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/textElement.ts?");
 
 /***/ }),
 
@@ -2855,6 +2866,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./laser-trails.ts":
+/*!*************************!*\
+  !*** ./laser-trails.ts ***!
+  \*************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"LaserTrails\": () => (/* binding */ LaserTrails)\n/* harmony export */ });\n/* harmony import */ var _animated_trail__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./animated-trail */ \"./animated-trail.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ \"./utils.ts\");\n/* harmony import */ var _clients__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./clients */ \"./clients.ts\");\n\n\n //zsviczian\n// decay time in milliseconds\n\nconst DECAY_TIME = 1000;\n\nconst getDecayTime = () => {\n  var _a, _b, _c;\n\n  return (_c = (_b = (_a = window.ExcalidrawAutomate) === null || _a === void 0 ? void 0 : _a.LASERPOINTER) === null || _b === void 0 ? void 0 : _b.DECAY_TIME) !== null && _c !== void 0 ? _c : DECAY_TIME;\n}; //zsviczian\n// length of line in points before it starts decaying\n\n\nconst DECAY_LENGTH = 50;\n\nconst getDecayLength = () => {\n  var _a, _b, _c;\n\n  return (_c = (_b = (_a = window.ExcalidrawAutomate) === null || _a === void 0 ? void 0 : _a.LASERPOINTER) === null || _b === void 0 ? void 0 : _b.DECAY_LENGTH) !== null && _c !== void 0 ? _c : DECAY_LENGTH;\n}; //zsviczian\n\n\nconst getColor = () => {\n  var _a, _b, _c;\n\n  return (_c = (_b = (_a = window.ExcalidrawAutomate) === null || _a === void 0 ? void 0 : _a.LASERPOINTER) === null || _b === void 0 ? void 0 : _b.COLOR) !== null && _c !== void 0 ? _c : \"red\";\n}; //zsviczian\n\n\nclass LaserTrails {\n  constructor(animationFrameHandler, app) {\n    this.animationFrameHandler = animationFrameHandler;\n    this.app = app;\n    this.collabTrails = new Map();\n    this.animationFrameHandler.register(this, this.onFrame.bind(this));\n    this.localTrail = new _animated_trail__WEBPACK_IMPORTED_MODULE_0__.AnimatedTrail(animationFrameHandler, app, Object.assign(Object.assign({}, this.getTrailOptions()), {\n      fill: () => getColor()\n    }));\n  }\n\n  getTrailOptions() {\n    return {\n      simplify: 0,\n      streamline: 0.4,\n      sizeMapping: c => {\n        const DECAY_TIME = getDecayTime(); //zsviczian\n\n        const DECAY_LENGTH = getDecayLength(); //zsviczian \n\n        const t = Math.max(0, 1 - (performance.now() - c.pressure) / DECAY_TIME);\n        const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;\n        return Math.min((0,_utils__WEBPACK_IMPORTED_MODULE_1__.easeOut)(l), (0,_utils__WEBPACK_IMPORTED_MODULE_1__.easeOut)(t));\n      }\n    };\n  }\n\n  startPath(x, y) {\n    this.localTrail.startPath(x, y);\n  }\n\n  addPointToPath(x, y) {\n    this.localTrail.addPointToPath(x, y);\n  }\n\n  endPath() {\n    this.localTrail.endPath();\n  }\n\n  start(container) {\n    this.container = container;\n    this.animationFrameHandler.start(this);\n    this.localTrail.start(container);\n  }\n\n  stop() {\n    this.animationFrameHandler.stop(this);\n    this.localTrail.stop();\n  }\n\n  onFrame() {\n    this.updateCollabTrails();\n  }\n\n  updateCollabTrails() {\n    if (!this.container || this.app.state.collaborators.size === 0) {\n      return;\n    }\n\n    for (const [key, collabolator] of this.app.state.collaborators.entries()) {\n      let trail;\n\n      if (!this.collabTrails.has(key)) {\n        trail = new _animated_trail__WEBPACK_IMPORTED_MODULE_0__.AnimatedTrail(this.animationFrameHandler, this.app, Object.assign(Object.assign({}, this.getTrailOptions()), {\n          fill: () => (0,_clients__WEBPACK_IMPORTED_MODULE_2__.getClientColor)(key)\n        }));\n        trail.start(this.container);\n        this.collabTrails.set(key, trail);\n      } else {\n        trail = this.collabTrails.get(key);\n      }\n\n      if (collabolator.pointer && collabolator.pointer.tool === \"laser\") {\n        if (collabolator.button === \"down\" && !trail.hasCurrentTrail) {\n          trail.startPath(collabolator.pointer.x, collabolator.pointer.y);\n        }\n\n        if (collabolator.button === \"down\" && trail.hasCurrentTrail && !trail.hasLastPoint(collabolator.pointer.x, collabolator.pointer.y)) {\n          trail.addPointToPath(collabolator.pointer.x, collabolator.pointer.y);\n        }\n\n        if (collabolator.button === \"up\" && trail.hasCurrentTrail) {\n          trail.addPointToPath(collabolator.pointer.x, collabolator.pointer.y);\n          trail.endPath();\n        }\n      }\n    }\n\n    for (const key of this.collabTrails.keys()) {\n      if (!this.app.state.collaborators.has(key)) {\n        const trail = this.collabTrails.get(key);\n        trail.stop();\n        this.collabTrails.delete(key);\n      }\n    }\n  }\n\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./laser-trails.ts?");
+
+/***/ }),
+
 /***/ "./math.ts":
 /*!*****************!*\
   !*** ./math.ts ***!
@@ -2866,6 +2888,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./obsidianUtils.ts":
+/*!**************************!*\
+  !*** ./obsidianUtils.ts ***!
+  \**************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"getAreaLimit\": () => (/* binding */ getAreaLimit),\n/* harmony export */   \"getWidthHeightLimit\": () => (/* binding */ getWidthHeightLimit),\n/* harmony export */   \"isExcaliBrainView\": () => (/* binding */ isExcaliBrainView)\n/* harmony export */ });\n//zsviczian, my dirty little secrets. These are hacks I am not proud of...\nlet OBSIDIAN_PLUGIN;\nlet EXCALIDRAW_CONFIG;\n\nconst setObsidianPlugin = () => {\n  var _a, _b; //@ts-ignore\n\n\n  OBSIDIAN_PLUGIN = (_b = (_a = app === null || app === void 0 ? void 0 : app.plugins) === null || _a === void 0 ? void 0 : _a.plugins) === null || _b === void 0 ? void 0 : _b[\"obsidian-excalidraw-plugin\"];\n  EXCALIDRAW_CONFIG = OBSIDIAN_PLUGIN === null || OBSIDIAN_PLUGIN === void 0 ? void 0 : OBSIDIAN_PLUGIN.excalidrawConfig;\n};\n\nconst getAreaLimit = () => {\n  var _a;\n\n  if (!OBSIDIAN_PLUGIN) {\n    setObsidianPlugin();\n  }\n\n  return (_a = EXCALIDRAW_CONFIG === null || EXCALIDRAW_CONFIG === void 0 ? void 0 : EXCALIDRAW_CONFIG.areaLimit) !== null && _a !== void 0 ? _a : 16777216;\n};\nconst getWidthHeightLimit = () => {\n  var _a;\n\n  if (!OBSIDIAN_PLUGIN) {\n    setObsidianPlugin();\n  }\n\n  return (_a = EXCALIDRAW_CONFIG === null || EXCALIDRAW_CONFIG === void 0 ? void 0 : EXCALIDRAW_CONFIG.widthHeightLimit) !== null && _a !== void 0 ? _a : 32767;\n};\nconst isExcaliBrainView = () => {\n  if (!OBSIDIAN_PLUGIN) {\n    setObsidianPlugin();\n  }\n\n  const excalidrawView = OBSIDIAN_PLUGIN.activeExcalidrawView;\n  if (!excalidrawView) return false;\n  return excalidrawView.linksAlwaysOpenInANewPane && excalidrawView.allowFrameButtonsInViewMode;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./obsidianUtils.ts?");
+
+/***/ }),
+
 /***/ "./points.ts":
 /*!*******************!*\
   !*** ./points.ts ***!
@@ -2895,7 +2928,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ \"./constants.ts\");\n\n\nif (\"development\" !== _constants__WEBPACK_IMPORTED_MODULE_0__.ENV.TEST) {\n  /* eslint-disable */\n\n  /* global __webpack_public_path__:writable */\n  __webpack_require__.p = window.EXCALIDRAW_ASSET_PATH || `https://unpkg.com/${\"@zsviczian/excalidraw\"}@${\"0.17.1-obsidian-10\"}/dist/`;\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./publicPath.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ \"./constants.ts\");\n\n\nif (\"development\" !== _constants__WEBPACK_IMPORTED_MODULE_0__.ENV.TEST) {\n  /* eslint-disable */\n\n  /* global __webpack_public_path__:writable */\n  __webpack_require__.p = window.EXCALIDRAW_ASSET_PATH || `https://unpkg.com/${\"@zsviczian/excalidraw\"}@${\"0.17.1-obsidian-12\"}/dist/`;\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./publicPath.js?");
 
 /***/ }),
 
@@ -2910,6 +2943,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./reactUtils.ts":
+/*!***********************!*\
+  !*** ./reactUtils.ts ***!
+  \***********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"isRenderThrottlingEnabled\": () => (/* binding */ isRenderThrottlingEnabled),\n/* harmony export */   \"withBatchedUpdates\": () => (/* binding */ withBatchedUpdates),\n/* harmony export */   \"withBatchedUpdatesThrottled\": () => (/* binding */ withBatchedUpdatesThrottled)\n/* harmony export */ });\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./utils.ts\");\n/**\r\n * @param func handler taking at most single parameter (event).\r\n */\n\n\n\nconst withBatchedUpdates = func => event => {\n  (0,react_dom__WEBPACK_IMPORTED_MODULE_0__.unstable_batchedUpdates)(func, event);\n};\n/**\r\n * barches React state updates and throttles the calls to a single call per\r\n * animation frame\r\n */\n\nconst withBatchedUpdatesThrottled = func => {\n  // @ts-ignore\n  return (0,_utils__WEBPACK_IMPORTED_MODULE_2__.throttleRAF)(event => {\n    (0,react_dom__WEBPACK_IMPORTED_MODULE_0__.unstable_batchedUpdates)(func, event);\n  });\n};\nconst isRenderThrottlingEnabled = (() => {\n  // we don't want to throttle in react < 18 because of #5439 and it was\n  // getting more complex to maintain the fix\n  let IS_REACT_18_AND_UP;\n\n  try {\n    const version = react__WEBPACK_IMPORTED_MODULE_1__.version.split(\".\");\n    IS_REACT_18_AND_UP = Number(version[0]) > 17;\n  } catch (_a) {\n    IS_REACT_18_AND_UP = false;\n  }\n\n  let hasWarned = false;\n  return () => {\n    if (window.EXCALIDRAW_THROTTLE_RENDER === true) {\n      if (!IS_REACT_18_AND_UP) {\n        if (!hasWarned) {\n          hasWarned = true;\n          console.warn(\"Excalidraw: render throttling is disabled on React versions < 18.\");\n        }\n\n        return false;\n      }\n\n      return true;\n    }\n\n    return false;\n  };\n})();\n\n//# sourceURL=webpack://ExcalidrawLib/./reactUtils.ts?");
+
+/***/ }),
+
 /***/ "./renderer/easingFunctions.ts":
 /*!*************************************!*\
   !*** ./renderer/easingFunctions.ts ***!
@@ -2928,7 +2972,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"DEFAULT_LINK_SIZE\": () => (/* binding */ DEFAULT_LINK_SIZE),\n/* harmony export */   \"elementWithCanvasCache\": () => (/* binding */ elementWithCanvasCache),\n/* harmony export */   \"generateFreeDrawShape\": () => (/* binding */ generateFreeDrawShape),\n/* harmony export */   \"getFreeDrawPath2D\": () => (/* binding */ getFreeDrawPath2D),\n/* harmony export */   \"getFreeDrawSvgPath\": () => (/* binding */ getFreeDrawSvgPath),\n/* harmony export */   \"pathsCache\": () => (/* binding */ pathsCache),\n/* harmony export */   \"renderElement\": () => (/* binding */ renderElement),\n/* harmony export */   \"renderElementToSvg\": () => (/* binding */ renderElementToSvg),\n/* harmony export */   \"renderSelectionElement\": () => (/* binding */ renderSelectionElement)\n/* harmony export */ });\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _element_bounds__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element/bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! roughjs/bin/rough */ \"../../node_modules/roughjs/bin/rough.js\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var perfect_freehand__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! perfect-freehand */ \"../../node_modules/perfect-freehand/dist/esm/index.js\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../element/embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _easingFunctions__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./easingFunctions */ \"./renderer/easingFunctions.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../data/url */ \"./data/url.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n // using a stronger invert (100% vs our regular 93%) and saturate\n// as a temp hack to make images in dark theme look closer to original\n// color scheme (it's still not quite there and the colors look slightly\n// desatured, alas...)\n\nconst IMAGE_INVERT_FILTER = \"invert(100%) hue-rotate(180deg) saturate(1.25)\";\nconst defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_5__.getDefaultAppState)();\n\nconst isPendingImageElement = (element, renderConfig) => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isInitializedImageElement)(element) && !renderConfig.imageCache.has(element.fileId);\n\nconst shouldResetImageFilter = (element, renderConfig, appState) => {\n  var _a;\n\n  return appState.theme === \"dark\" && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isInitializedImageElement)(element) && !isPendingImageElement(element, renderConfig) && ((_a = renderConfig.imageCache.get(element.fileId)) === null || _a === void 0 ? void 0 : _a.mimeType) !== _constants__WEBPACK_IMPORTED_MODULE_6__.MIME_TYPES.svg;\n};\n\nconst getCanvasPadding = element => element.type === \"freedraw\" ? element.strokeWidth * 12 : 20;\n\nconst cappedElementCanvasSize = (element, zoom) => {\n  // these limits are ballpark, they depend on specific browsers and device.\n  // We've chosen lower limits to be safe. We might want to change these limits\n  // based on browser/device type, if we get reports of low quality rendering\n  // on zoom.\n  //\n  // ~ safari mobile canvas area limit\n  const AREA_LIMIT = 16777216; // ~ safari width/height limit based on developer.mozilla.org.\n\n  const WIDTH_HEIGHT_LIMIT = 32767;\n  const padding = getCanvasPadding(element);\n  const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n  const elementWidth = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isLinearElement)(element) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isFreeDrawElement)(element) ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(x1, x2) : element.width;\n  const elementHeight = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isLinearElement)(element) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isFreeDrawElement)(element) ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(y1, y2) : element.height;\n  let width = elementWidth * window.devicePixelRatio + padding * 2;\n  let height = elementHeight * window.devicePixelRatio + padding * 2;\n  let scale = zoom.value; // rescale to ensure width and height is within limits\n\n  if (width * scale > WIDTH_HEIGHT_LIMIT || height * scale > WIDTH_HEIGHT_LIMIT) {\n    scale = Math.min(WIDTH_HEIGHT_LIMIT / width, WIDTH_HEIGHT_LIMIT / height);\n  } // rescale to ensure canvas area is within limits\n\n\n  if (width * height * scale * scale > AREA_LIMIT) {\n    scale = Math.sqrt(AREA_LIMIT / (width * height));\n  }\n\n  width = Math.floor(width * scale);\n  height = Math.floor(height * scale);\n  return {\n    width,\n    height,\n    scale\n  };\n};\n\nconst generateElementCanvas = (element, zoom, renderConfig, appState) => {\n  var _a, _b;\n\n  const canvas = document.createElement(\"canvas\");\n  const context = canvas.getContext(\"2d\");\n  const padding = getCanvasPadding(element);\n  const {\n    width,\n    height,\n    scale\n  } = cappedElementCanvasSize(element, zoom);\n  canvas.width = width;\n  canvas.height = height;\n  let canvasOffsetX = 0;\n  let canvasOffsetY = 0;\n\n  if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isLinearElement)(element) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isFreeDrawElement)(element)) {\n    const [x1, y1] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n    canvasOffsetX = element.x > x1 ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(element.x, x1) * window.devicePixelRatio * scale : 0;\n    canvasOffsetY = element.y > y1 ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(element.y, y1) * window.devicePixelRatio * scale : 0;\n    context.translate(canvasOffsetX, canvasOffsetY);\n  }\n\n  context.save();\n  context.translate(padding * scale, padding * scale);\n  context.scale(window.devicePixelRatio * scale, window.devicePixelRatio * scale);\n  const rc = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_4__[\"default\"].canvas(canvas); // in dark theme, revert the image color filter\n\n  if (shouldResetImageFilter(element, renderConfig, appState)) {\n    context.filter = IMAGE_INVERT_FILTER;\n  }\n\n  drawElementOnCanvas(element, rc, context, renderConfig, appState);\n  context.restore();\n  return {\n    element,\n    canvas,\n    theme: appState.theme,\n    scale,\n    zoomValue: zoom.value,\n    canvasOffsetX,\n    canvasOffsetY,\n    boundTextElementVersion: ((_a = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element)) === null || _a === void 0 ? void 0 : _a.version) || null,\n    containingFrameOpacity: ((_b = (0,_frame__WEBPACK_IMPORTED_MODULE_12__.getContainingFrame)(element)) === null || _b === void 0 ? void 0 : _b.opacity) || 100\n  };\n};\n\nconst DEFAULT_LINK_SIZE = 14;\nconst IMAGE_PLACEHOLDER_IMG = document.createElement(\"img\");\nIMAGE_PLACEHOLDER_IMG.src = `data:${_constants__WEBPACK_IMPORTED_MODULE_6__.MIME_TYPES.svg},${encodeURIComponent(`<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"image\" class=\"svg-inline--fa fa-image fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"#888\" d=\"M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z\"></path></svg>`)}`;\nconst IMAGE_ERROR_PLACEHOLDER_IMG = document.createElement(\"img\");\nIMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${_constants__WEBPACK_IMPORTED_MODULE_6__.MIME_TYPES.svg},${encodeURIComponent(`<svg viewBox=\"0 0 668 668\" xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2\"><path d=\"M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48ZM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56ZM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48Z\" style=\"fill:#888;fill-rule:nonzero\" transform=\"matrix(.81709 0 0 .81709 124.825 145.825)\"/><path d=\"M256 8C119.034 8 8 119.033 8 256c0 136.967 111.034 248 248 248s248-111.034 248-248S392.967 8 256 8Zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676ZM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676Z\" style=\"fill:#888;fill-rule:nonzero\" transform=\"matrix(.30366 0 0 .30366 506.822 60.065)\"/></svg>`)}`;\n\nconst drawImagePlaceholder = (element, context, zoomValue) => {\n  context.fillStyle = \"#E7E7E7\";\n  context.fillRect(0, 0, element.width, element.height);\n  const imageMinWidthOrHeight = Math.min(element.width, element.height);\n  const size = Math.min(imageMinWidthOrHeight, Math.min(imageMinWidthOrHeight * 0.4, 100));\n  context.drawImage(element.status === \"error\" ? IMAGE_ERROR_PLACEHOLDER_IMG : IMAGE_PLACEHOLDER_IMG, element.width / 2 - size / 2, element.height / 2 - size / 2, size, size);\n};\n\nconst drawElementOnCanvas = (element, rc, context, renderConfig, appState) => {\n  var _a, _b, _c, _d, _e, _f;\n\n  context.globalAlpha = ((_b = (_a = (0,_frame__WEBPACK_IMPORTED_MODULE_12__.getContainingFrame)(element)) === null || _a === void 0 ? void 0 : _a.opacity) !== null && _b !== void 0 ? _b : 100) * element.opacity / 10000;\n\n  switch (element.type) {\n    case \"rectangle\":\n    case \"iframe\":\n    case \"embeddable\":\n    case \"diamond\":\n    case \"ellipse\":\n      {\n        context.lineJoin = \"round\";\n        context.lineCap = \"round\";\n        rc.draw(_scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.get(element));\n        break;\n      }\n\n    case \"arrow\":\n    case \"line\":\n      {\n        context.lineJoin = \"round\";\n        context.lineCap = \"round\";\n        _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.get(element).forEach(shape => {\n          rc.draw(shape);\n        });\n        break;\n      }\n\n    case \"freedraw\":\n      {\n        // Draw directly to canvas\n        context.save();\n        context.fillStyle = element.strokeColor;\n        const path = getFreeDrawPath2D(element);\n        const fillShape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.get(element);\n\n        if (fillShape) {\n          rc.draw(fillShape);\n        } //zsviczian\n\n\n        if ((_d = (_c = element.customData) === null || _c === void 0 ? void 0 : _c.strokeOptions) === null || _d === void 0 ? void 0 : _d.hasOutline) {\n          context.lineWidth = element.strokeWidth * ((_e = element.customData.strokeOptions.outlineWidth) !== null && _e !== void 0 ? _e : 1);\n          context.strokeStyle = element.strokeColor;\n          context.stroke(path);\n          context.fillStyle = element.backgroundColor;\n        } else {\n          context.fillStyle = element.strokeColor;\n        }\n\n        context.fill(path);\n        context.restore();\n        break;\n      }\n\n    case \"image\":\n      {\n        const img = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isInitializedImageElement)(element) ? (_f = renderConfig.imageCache.get(element.fileId)) === null || _f === void 0 ? void 0 : _f.image : undefined;\n\n        if (img != null && !(img instanceof Promise)) {\n          context.drawImage(img, 0\n          /* hardcoded for the selection box*/\n          , 0, element.width, element.height);\n        } else {\n          drawImagePlaceholder(element, context, appState.zoom.value);\n        }\n\n        break;\n      }\n\n    default:\n      {\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isTextElement)(element)) {\n          const rtl = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isRTL)(element.text);\n          const shouldTemporarilyAttach = rtl && !context.canvas.isConnected;\n\n          if (shouldTemporarilyAttach) {\n            // to correctly render RTL text mixed with LTR, we have to append it\n            // to the DOM\n            document.body.appendChild(context.canvas);\n          }\n\n          context.canvas.setAttribute(\"dir\", rtl ? \"rtl\" : \"ltr\");\n          context.save();\n          context.font = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getFontString)(element);\n          context.fillStyle = element.strokeColor;\n          context.textAlign = element.textAlign; // Canvas does not support multiline text by default\n\n          const lines = element.text.replace(/\\r\\n?/g, \"\\n\").split(\"\\n\");\n          const horizontalOffset = element.textAlign === \"center\" ? element.width / 2 : element.textAlign === \"right\" ? element.width : 0;\n          const lineHeightPx = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getLineHeightInPx)(element.fontSize, element.lineHeight);\n          const verticalOffset = element.height - element.baseline;\n\n          for (let index = 0; index < lines.length; index++) {\n            context.fillText(lines[index], horizontalOffset, (index + 1) * lineHeightPx - verticalOffset);\n          }\n\n          context.restore();\n\n          if (shouldTemporarilyAttach) {\n            context.canvas.remove();\n          }\n        } else {\n          throw new Error(`Unimplemented type ${element.type}`);\n        }\n      }\n  }\n\n  context.globalAlpha = 1;\n};\n\nconst elementWithCanvasCache = new WeakMap();\n\nconst generateElementWithCanvas = (element, renderConfig, appState) => {\n  var _a, _b;\n\n  const zoom = renderConfig ? appState.zoom : defaultAppState.zoom;\n  const prevElementWithCanvas = elementWithCanvasCache.get(element);\n  const shouldRegenerateBecauseZoom = prevElementWithCanvas && prevElementWithCanvas.zoomValue !== zoom.value && !(appState === null || appState === void 0 ? void 0 : appState.shouldCacheIgnoreZoom);\n  const boundTextElementVersion = ((_a = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element)) === null || _a === void 0 ? void 0 : _a.version) || null;\n  const containingFrameOpacity = ((_b = (0,_frame__WEBPACK_IMPORTED_MODULE_12__.getContainingFrame)(element)) === null || _b === void 0 ? void 0 : _b.opacity) || 100;\n\n  if (!prevElementWithCanvas || shouldRegenerateBecauseZoom || prevElementWithCanvas.theme !== appState.theme || prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion || prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity) {\n    const elementWithCanvas = generateElementCanvas(element, zoom, renderConfig, appState);\n    elementWithCanvasCache.set(element, elementWithCanvas);\n    return elementWithCanvas;\n  }\n\n  return prevElementWithCanvas;\n};\n\nconst drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appState) => {\n  const element = elementWithCanvas.element;\n  const padding = getCanvasPadding(element);\n  const zoom = elementWithCanvas.scale;\n  let [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element); // Free draw elements will otherwise \"shuffle\" as the min x and y change\n\n  if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isFreeDrawElement)(element)) {\n    x1 = Math.floor(x1);\n    x2 = Math.ceil(x2);\n    y1 = Math.floor(y1);\n    y2 = Math.ceil(y2);\n  }\n\n  const cx = ((x1 + x2) / 2 + appState.scrollX) * window.devicePixelRatio;\n  const cy = ((y1 + y2) / 2 + appState.scrollY) * window.devicePixelRatio;\n  context.save();\n  context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);\n  const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element);\n\n  if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(element) && boundTextElement) {\n    const tempCanvas = document.createElement(\"canvas\");\n    const tempCanvasContext = tempCanvas.getContext(\"2d\"); // Take max dimensions of arrow canvas so that when canvas is rotated\n    // the arrow doesn't get clipped\n\n    const maxDim = Math.max((0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(x1, x2), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(y1, y2));\n    tempCanvas.width = maxDim * window.devicePixelRatio * zoom + padding * elementWithCanvas.scale * 10;\n    tempCanvas.height = maxDim * window.devicePixelRatio * zoom + padding * elementWithCanvas.scale * 10;\n    const offsetX = (tempCanvas.width - elementWithCanvas.canvas.width) / 2;\n    const offsetY = (tempCanvas.height - elementWithCanvas.canvas.height) / 2;\n    tempCanvasContext.translate(tempCanvas.width / 2, tempCanvas.height / 2);\n    tempCanvasContext.rotate(element.angle);\n    tempCanvasContext.drawImage(elementWithCanvas.canvas, -elementWithCanvas.canvas.width / 2, -elementWithCanvas.canvas.height / 2, elementWithCanvas.canvas.width, elementWithCanvas.canvas.height);\n    const [,,,, boundTextCx, boundTextCy] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(boundTextElement);\n    tempCanvasContext.rotate(-element.angle); // Shift the canvas to the center of the bound text element\n\n    const shiftX = tempCanvas.width / 2 - (boundTextCx - x1) * window.devicePixelRatio * zoom - offsetX - padding * zoom;\n    const shiftY = tempCanvas.height / 2 - (boundTextCy - y1) * window.devicePixelRatio * zoom - offsetY - padding * zoom;\n    tempCanvasContext.translate(-shiftX, -shiftY); // Clear the bound text area\n\n    tempCanvasContext.clearRect(-(boundTextElement.width / 2 + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING) * window.devicePixelRatio * zoom, -(boundTextElement.height / 2 + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING) * window.devicePixelRatio * zoom, (boundTextElement.width + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING * 2) * window.devicePixelRatio * zoom, (boundTextElement.height + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING * 2) * window.devicePixelRatio * zoom);\n    context.translate(cx, cy);\n    context.drawImage(tempCanvas, -(x2 - x1) / 2 * window.devicePixelRatio - offsetX / zoom - padding, -(y2 - y1) / 2 * window.devicePixelRatio - offsetY / zoom - padding, tempCanvas.width / zoom, tempCanvas.height / zoom);\n  } else {\n    // we translate context to element center so that rotation and scale\n    // originates from the element center\n    context.translate(cx, cy);\n    context.rotate(element.angle);\n\n    if (\"scale\" in elementWithCanvas.element && !isPendingImageElement(element, renderConfig) && !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isIframeLikeElement)(element) //zsviczian\n    ) {\n      context.scale(elementWithCanvas.element.scale[0], elementWithCanvas.element.scale[1]);\n    } // revert afterwards we don't have account for it during drawing\n\n\n    context.translate(-cx, -cy);\n    context.drawImage(elementWithCanvas.canvas, (x1 + appState.scrollX) * window.devicePixelRatio - padding * elementWithCanvas.scale / elementWithCanvas.scale, (y1 + appState.scrollY) * window.devicePixelRatio - padding * elementWithCanvas.scale / elementWithCanvas.scale, elementWithCanvas.canvas.width / elementWithCanvas.scale, elementWithCanvas.canvas.height / elementWithCanvas.scale);\n\n    if (false) {}\n  }\n\n  context.restore(); // Clear the nested element we appended to the DOM\n};\n\nconst renderSelectionElement = (element, context, appState) => {\n  context.save();\n  context.translate(element.x + appState.scrollX, element.y + appState.scrollY);\n  context.fillStyle = \"rgba(0, 0, 200, 0.04)\"; // render from 0.5px offset  to get 1px wide line\n  // https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540\n  // TODO can be be improved by offseting to the negative when user selects\n  // from right to left\n\n  const offset = 0.5 / appState.zoom.value;\n  context.fillRect(offset, offset, element.width, element.height);\n  context.lineWidth = 1 / appState.zoom.value;\n  context.strokeStyle = \" rgb(105, 101, 219)\";\n  context.strokeRect(offset, offset, element.width, element.height);\n  context.restore();\n};\nconst renderElement = (element, rc, context, renderConfig, appState) => {\n  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n\n  switch (element.type) {\n    case \"magicframe\":\n    case \"frame\":\n      {\n        if (appState.frameRendering.enabled && appState.frameRendering.outline) {\n          context.save();\n          context.translate(element.x + appState.scrollX, element.y + appState.scrollY);\n          context.fillStyle = (_e = (_c = (_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.frameColor) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = appState === null || appState === void 0 ? void 0 : appState.frameColor) === null || _d === void 0 ? void 0 : _d.fill) !== null && _e !== void 0 ? _e : \"rgba(0, 0, 200, 0.04)\"; //zsviczian\n\n          context.lineWidth = _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.strokeWidth / appState.zoom.value;\n          context.strokeStyle = (_k = (_h = (_g = (_f = element.customData) === null || _f === void 0 ? void 0 : _f.frameColor) === null || _g === void 0 ? void 0 : _g.stroke) !== null && _h !== void 0 ? _h : (_j = appState === null || appState === void 0 ? void 0 : appState.frameColor) === null || _j === void 0 ? void 0 : _j.stroke) !== null && _k !== void 0 ? _k : _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.strokeColor; //zsviczian\n          // TODO change later to only affect AI frames\n\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isMagicFrameElement)(element)) {\n            context.strokeStyle = appState.theme === \"light\" ? \"#7affd7\" : \"#1d8264\";\n          }\n\n          if (_constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.radius && context.roundRect) {\n            context.beginPath();\n            context.roundRect(0, 0, element.width, element.height, _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.radius / appState.zoom.value);\n            context.stroke();\n            context.closePath();\n          } else {\n            context.strokeRect(0, 0, element.width, element.height);\n          }\n\n          context.restore();\n        }\n\n        break;\n      }\n\n    case \"freedraw\":\n      {\n        // TODO investigate if we can do this in situ. Right now we need to call\n        // beforehand because math helpers (such as getElementAbsoluteCoords)\n        // rely on existing shapes\n        _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.generateElementShape(element, null);\n\n        if (renderConfig.isExporting) {\n          const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n          const cx = (x1 + x2) / 2 + appState.scrollX;\n          const cy = (y1 + y2) / 2 + appState.scrollY;\n          const shiftX = (x2 - x1) / 2 - (element.x - x1);\n          const shiftY = (y2 - y1) / 2 - (element.y - y1);\n          context.save();\n          context.translate(cx, cy);\n          context.rotate(element.angle);\n          context.translate(-shiftX, -shiftY);\n          drawElementOnCanvas(element, rc, context, renderConfig, appState);\n          context.restore();\n        } else {\n          const elementWithCanvas = generateElementWithCanvas(element, renderConfig, appState);\n          drawElementFromCanvas(elementWithCanvas, context, renderConfig, appState);\n        }\n\n        break;\n      }\n\n    case \"rectangle\":\n    case \"diamond\":\n    case \"ellipse\":\n    case \"line\":\n    case \"arrow\":\n    case \"image\":\n    case \"text\":\n    case \"iframe\":\n    case \"embeddable\":\n      {\n        // TODO investigate if we can do this in situ. Right now we need to call\n        // beforehand because math helpers (such as getElementAbsoluteCoords)\n        // rely on existing shapes\n        _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.generateElementShape(element, renderConfig);\n\n        if (renderConfig.isExporting) {\n          const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n          const cx = (x1 + x2) / 2 + appState.scrollX;\n          const cy = (y1 + y2) / 2 + appState.scrollY;\n          let shiftX = (x2 - x1) / 2 - (element.x - x1);\n          let shiftY = (y2 - y1) / 2 - (element.y - y1);\n\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isTextElement)(element)) {\n            const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getContainerElement)(element);\n\n            if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(container)) {\n              const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getBoundTextElementPosition(container, element);\n              shiftX = (x2 - x1) / 2 - (boundTextCoords.x - x1);\n              shiftY = (y2 - y1) / 2 - (boundTextCoords.y - y1);\n            }\n          }\n\n          context.save();\n          context.translate(cx, cy);\n\n          if (shouldResetImageFilter(element, renderConfig, appState)) {\n            context.filter = \"none\";\n          }\n\n          const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element);\n\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(element) && boundTextElement) {\n            const tempCanvas = document.createElement(\"canvas\");\n            const tempCanvasContext = tempCanvas.getContext(\"2d\"); // Take max dimensions of arrow canvas so that when canvas is rotated\n            // the arrow doesn't get clipped\n\n            const maxDim = Math.max((0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(x1, x2), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(y1, y2));\n            const padding = getCanvasPadding(element);\n            tempCanvas.width = maxDim * appState.exportScale + padding * 10 * appState.exportScale;\n            tempCanvas.height = maxDim * appState.exportScale + padding * 10 * appState.exportScale;\n            tempCanvasContext.translate(tempCanvas.width / 2, tempCanvas.height / 2);\n            tempCanvasContext.scale(appState.exportScale, appState.exportScale); // Shift the canvas to left most point of the arrow\n\n            shiftX = element.width / 2 - (element.x - x1);\n            shiftY = element.height / 2 - (element.y - y1);\n            tempCanvasContext.rotate(element.angle);\n            const tempRc = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_4__[\"default\"].canvas(tempCanvas);\n            tempCanvasContext.translate(-shiftX, -shiftY);\n            drawElementOnCanvas(element, tempRc, tempCanvasContext, renderConfig, appState);\n            tempCanvasContext.translate(shiftX, shiftY);\n            tempCanvasContext.rotate(-element.angle); // Shift the canvas to center of bound text\n\n            const [,,,, boundTextCx, boundTextCy] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(boundTextElement);\n            const boundTextShiftX = (x1 + x2) / 2 - boundTextCx;\n            const boundTextShiftY = (y1 + y2) / 2 - boundTextCy;\n            tempCanvasContext.translate(-boundTextShiftX, -boundTextShiftY); // Clear the bound text area\n\n            tempCanvasContext.clearRect(-boundTextElement.width / 2, -boundTextElement.height / 2, boundTextElement.width, boundTextElement.height);\n            context.scale(1 / appState.exportScale, 1 / appState.exportScale);\n            context.drawImage(tempCanvas, -tempCanvas.width / 2, -tempCanvas.height / 2, tempCanvas.width, tempCanvas.height);\n          } else {\n            context.rotate(element.angle);\n\n            if (element.type === \"image\") {\n              // note: scale must be applied *after* rotating\n              context.scale(element.scale[0], element.scale[1]);\n            }\n\n            context.translate(-shiftX, -shiftY);\n            drawElementOnCanvas(element, rc, context, renderConfig, appState);\n          }\n\n          context.restore(); // not exporting → optimized rendering (cache & render from element\n          // canvases)\n        } else {\n          const elementWithCanvas = generateElementWithCanvas(element, renderConfig, appState);\n          const currentImageSmoothingStatus = context.imageSmoothingEnabled;\n\n          if ( // do not disable smoothing during zoom as blurry shapes look better\n          // on low resolution (while still zooming in) than sharp ones\n          !(appState === null || appState === void 0 ? void 0 : appState.shouldCacheIgnoreZoom) && ( // angle is 0 -> always disable smoothing\n          !element.angle || // or check if angle is a right angle in which case we can still\n          // disable smoothing without adversely affecting the result\n          (0,_math__WEBPACK_IMPORTED_MODULE_3__.isRightAngle)(element.angle))) {\n            // Disabling smoothing makes output much sharper, especially for\n            // text. Unless for non-right angles, where the aliasing is really\n            // terrible on Chromium.\n            //\n            // Note that `context.imageSmoothingQuality=\"high\"` has almost\n            // zero effect.\n            //\n            context.imageSmoothingEnabled = false;\n          }\n\n          drawElementFromCanvas(elementWithCanvas, context, renderConfig, appState); // reset\n\n          context.imageSmoothingEnabled = currentImageSmoothingStatus;\n        }\n\n        break;\n      }\n\n    default:\n      {\n        // @ts-ignore\n        throw new Error(`Unimplemented type ${element.type}`);\n      }\n  }\n};\n\nconst roughSVGDrawWithPrecision = (rsvg, drawable, precision) => {\n  if (typeof precision === \"undefined\") {\n    return rsvg.draw(drawable);\n  }\n\n  const pshape = {\n    sets: drawable.sets,\n    shape: drawable.shape,\n    options: Object.assign(Object.assign({}, drawable.options), {\n      fixedDecimalPlaceDigits: precision\n    })\n  };\n  return rsvg.draw(pshape);\n};\n\nconst maybeWrapNodesInFrameClipPath = (element, root, nodes, frameRendering) => {\n  if (!frameRendering.enabled || !frameRendering.clip) {\n    return null;\n  }\n\n  const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_12__.getContainingFrame)(element);\n\n  if (frame) {\n    const g = root.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"g\");\n    g.setAttributeNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"clip-path\", `url(#${frame.id})`);\n    nodes.forEach(node => g.appendChild(node));\n    return g;\n  }\n\n  return null;\n};\n\nconst renderElementToSvg = (element, rsvg, svgRoot, files, offsetX, offsetY, renderConfig) => {\n  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n\n  const offset = {\n    x: offsetX,\n    y: offsetY\n  };\n  const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n  let cx = (x2 - x1) / 2 - (element.x - x1);\n  let cy = (y2 - y1) / 2 - (element.y - y1);\n\n  if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isTextElement)(element)) {\n    const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getContainerElement)(element);\n\n    if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(container)) {\n      const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(container);\n      const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getBoundTextElementPosition(container, element);\n      cx = (x2 - x1) / 2 - (boundTextCoords.x - x1);\n      cy = (y2 - y1) / 2 - (boundTextCoords.y - y1);\n      offsetX = offsetX + boundTextCoords.x - element.x;\n      offsetY = offsetY + boundTextCoords.y - element.y;\n    }\n  }\n\n  const degree = 180 * element.angle / Math.PI; // element to append node to, most of the time svgRoot\n\n  let root = svgRoot; // if the element has a link, create an anchor tag and make that the new root\n\n  if (element.link) {\n    const anchorTag = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"a\");\n    anchorTag.setAttribute(\"href\", (0,_data_url__WEBPACK_IMPORTED_MODULE_13__.normalizeLink)(element.link));\n    root.appendChild(anchorTag);\n    root = anchorTag;\n  }\n\n  const addToRoot = (node, element) => {\n    if ((0,_utils__WEBPACK_IMPORTED_MODULE_2__.isTestEnv)()) {\n      node.setAttribute(\"data-id\", element.id);\n    }\n\n    root.appendChild(node);\n  };\n\n  const opacity = ((_b = (_a = (0,_frame__WEBPACK_IMPORTED_MODULE_12__.getContainingFrame)(element)) === null || _a === void 0 ? void 0 : _a.opacity) !== null && _b !== void 0 ? _b : 100) * element.opacity / 10000;\n\n  switch (element.type) {\n    case \"selection\":\n      {\n        // Since this is used only during editing experience, which is canvas based,\n        // this should not happen\n        throw new Error(\"Selection rendering is not supported for SVG\");\n      }\n\n    case \"rectangle\":\n    case \"diamond\":\n    case \"ellipse\":\n      {\n        const shape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.generateElementShape(element, null);\n        const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_6__.MAX_DECIMALS_FOR_SVG_EXPORT);\n\n        if (opacity !== 1) {\n          node.setAttribute(\"stroke-opacity\", `${opacity}`);\n          node.setAttribute(\"fill-opacity\", `${opacity}`);\n        }\n\n        node.setAttribute(\"stroke-linecap\", \"round\");\n        node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n        const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering);\n        addToRoot(g || node, element);\n        break;\n      }\n\n    case \"iframe\":\n    case \"embeddable\":\n      {\n        // render placeholder rectangle\n        const shape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.generateElementShape(element, renderConfig);\n        const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_6__.MAX_DECIMALS_FOR_SVG_EXPORT);\n        const opacity = element.opacity / 100;\n\n        if (opacity !== 1) {\n          node.setAttribute(\"stroke-opacity\", `${opacity}`);\n          node.setAttribute(\"fill-opacity\", `${opacity}`);\n        }\n\n        node.setAttribute(\"stroke-linecap\", \"round\");\n        node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n        addToRoot(node, element);\n        const label = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_10__.createPlaceholderEmbeddableLabel)(element);\n        renderElementToSvg(label, rsvg, root, files, label.x + offset.x - element.x, label.y + offset.y - element.y, renderConfig);\n        const scaleX = ((_c = element.scale) === null || _c === void 0 ? void 0 : _c[0]) || 1;\n        const scaleY = ((_d = element.scale) === null || _d === void 0 ? void 0 : _d[1]) || 1; // render embeddable element + iframe\n\n        const embeddableNode = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_6__.MAX_DECIMALS_FOR_SVG_EXPORT);\n        embeddableNode.setAttribute(\"stroke-linecap\", \"round\");\n        embeddableNode.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy}) scale(${scaleX}, ${scaleY})`);\n\n        while (embeddableNode.firstChild) {\n          embeddableNode.removeChild(embeddableNode.firstChild);\n        }\n\n        const radius = (0,_math__WEBPACK_IMPORTED_MODULE_3__.getCornerRadius)(Math.min(element.width, element.height), element);\n        const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_10__.getEmbedLink)((0,_data_url__WEBPACK_IMPORTED_MODULE_13__.toValidURL)(element.link || \"\")); // if rendering embeddables explicitly disabled or\n        // embedding documents via srcdoc (which doesn't seem to work for SVGs)\n        // replace with a link instead\n\n        if (renderConfig.renderEmbeddables === false || (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"document\") {\n          const anchorTag = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"a\");\n          anchorTag.setAttribute(\"href\", (0,_data_url__WEBPACK_IMPORTED_MODULE_13__.normalizeLink)(element.link || \"\"));\n          anchorTag.setAttribute(\"target\", \"_blank\");\n          anchorTag.setAttribute(\"rel\", \"noopener noreferrer\");\n          anchorTag.style.borderRadius = `${radius}px`;\n          embeddableNode.appendChild(anchorTag);\n        } else {\n          const foreignObject = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"foreignObject\");\n          foreignObject.style.width = `${element.width / scaleX}px`;\n          foreignObject.style.height = `${element.height / scaleY}px`;\n          foreignObject.style.border = \"none\";\n          const div = foreignObject.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"div\");\n          div.setAttribute(\"xmlns\", \"http://www.w3.org/1999/xhtml\");\n          div.style.width = \"100%\";\n          div.style.height = \"100%\";\n          const iframe = div.ownerDocument.createElement(\"iframe\");\n          iframe.src = (_e = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) !== null && _e !== void 0 ? _e : \"\";\n          iframe.style.width = \"100%\";\n          iframe.style.height = \"100%\";\n          iframe.style.border = \"none\";\n          iframe.style.borderRadius = `${radius}px`;\n          iframe.style.top = \"0\";\n          iframe.style.left = \"0\";\n          iframe.allowFullscreen = true;\n          div.appendChild(iframe);\n          foreignObject.appendChild(div);\n          embeddableNode.appendChild(foreignObject);\n        }\n\n        addToRoot(embeddableNode, element);\n        break;\n      }\n\n    case \"line\":\n    case \"arrow\":\n      {\n        const boundText = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element);\n        const maskPath = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"mask\");\n\n        if (boundText) {\n          maskPath.setAttribute(\"id\", `mask-${element.id}`);\n          const maskRectVisible = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"rect\");\n          offsetX = offsetX || 0;\n          offsetY = offsetY || 0;\n          maskRectVisible.setAttribute(\"x\", \"0\");\n          maskRectVisible.setAttribute(\"y\", \"0\");\n          maskRectVisible.setAttribute(\"fill\", \"#fff\");\n          maskRectVisible.setAttribute(\"width\", `${element.width + 100 + offsetX}`);\n          maskRectVisible.setAttribute(\"height\", `${element.height + 100 + offsetY}`);\n          maskPath.appendChild(maskRectVisible);\n          const maskRectInvisible = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"rect\");\n          const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getBoundTextElementPosition(element, boundText);\n          const maskX = offsetX + boundTextCoords.x - element.x;\n          const maskY = offsetY + boundTextCoords.y - element.y;\n          maskRectInvisible.setAttribute(\"x\", maskX.toString());\n          maskRectInvisible.setAttribute(\"y\", maskY.toString());\n          maskRectInvisible.setAttribute(\"fill\", \"#000\");\n          maskRectInvisible.setAttribute(\"width\", `${boundText.width}`);\n          maskRectInvisible.setAttribute(\"height\", `${boundText.height}`);\n          maskRectInvisible.setAttribute(\"opacity\", \"1\");\n          maskPath.appendChild(maskRectInvisible);\n        }\n\n        const group = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"g\");\n\n        if (boundText) {\n          group.setAttribute(\"mask\", `url(#mask-${element.id})`);\n        }\n\n        group.setAttribute(\"stroke-linecap\", \"round\");\n        const shapes = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.generateElementShape(element, renderConfig);\n        shapes.forEach(shape => {\n          const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_6__.MAX_DECIMALS_FOR_SVG_EXPORT);\n\n          if (opacity !== 1) {\n            node.setAttribute(\"stroke-opacity\", `${opacity}`);\n            node.setAttribute(\"fill-opacity\", `${opacity}`);\n          }\n\n          node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n\n          if (element.type === \"line\" && (0,_math__WEBPACK_IMPORTED_MODULE_3__.isPathALoop)(element.points) && element.backgroundColor !== \"transparent\") {\n            node.setAttribute(\"fill-rule\", \"evenodd\");\n          }\n\n          group.appendChild(node);\n        });\n        const g = maybeWrapNodesInFrameClipPath(element, root, [group, maskPath], renderConfig.frameRendering);\n\n        if (g) {\n          addToRoot(g, element);\n          root.appendChild(g);\n        } else {\n          addToRoot(group, element);\n          root.append(maskPath);\n        }\n\n        break;\n      }\n\n    case \"freedraw\":\n      {\n        const backgroundFillShape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.generateElementShape(element, renderConfig);\n        const node = backgroundFillShape ? roughSVGDrawWithPrecision(rsvg, backgroundFillShape, _constants__WEBPACK_IMPORTED_MODULE_6__.MAX_DECIMALS_FOR_SVG_EXPORT) : svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"g\");\n\n        if (opacity !== 1) {\n          node.setAttribute(\"stroke-opacity\", `${opacity}`);\n          node.setAttribute(\"fill-opacity\", `${opacity}`);\n        }\n\n        node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n        node.setAttribute(\"stroke\", \"none\");\n        const path = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"path\"); //zsviczian\n\n        if ((_g = (_f = element.customData) === null || _f === void 0 ? void 0 : _f.strokeOptions) === null || _g === void 0 ? void 0 : _g.hasOutline) {\n          node.setAttribute(\"stroke-width\", `${element.strokeWidth * ((_h = element.customData.strokeOptions.outlineWidth) !== null && _h !== void 0 ? _h : 1)}`);\n          const outline = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"path\");\n          outline.setAttribute(\"fill\", \"none\");\n          outline.setAttribute(\"stroke\", element.strokeColor);\n          outline.setAttribute(\"d\", getFreeDrawSvgPath(element));\n          node.appendChild(outline);\n          path.setAttribute(\"fill\", element.backgroundColor);\n        } else {\n          path.setAttribute(\"fill\", element.strokeColor);\n        }\n\n        path.setAttribute(\"d\", getFreeDrawSvgPath(element));\n        node.appendChild(path);\n        const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering);\n        addToRoot(g || node, element);\n        break;\n      }\n\n    case \"image\":\n      {\n        const width = Math.round(element.width);\n        const height = Math.round(element.height);\n        const fileData = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isInitializedImageElement)(element) && files[element.fileId];\n\n        if (fileData) {\n          const symbolId = `image-${fileData.id}`;\n          let symbol = svgRoot.querySelector(`#${symbolId}`);\n\n          if (!symbol) {\n            symbol = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"symbol\");\n            symbol.id = symbolId;\n            const image = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"image\");\n            image.setAttribute(\"width\", \"100%\");\n            image.setAttribute(\"height\", \"100%\");\n            image.setAttribute(\"href\", fileData.dataURL);\n            symbol.appendChild(image);\n            root.prepend(symbol);\n          }\n\n          const use = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"use\");\n          use.setAttribute(\"href\", `#${symbolId}`); // in dark theme, revert the image color filter\n\n          if (renderConfig.exportWithDarkMode && fileData.mimeType !== _constants__WEBPACK_IMPORTED_MODULE_6__.MIME_TYPES.svg) {\n            use.setAttribute(\"filter\", IMAGE_INVERT_FILTER);\n          }\n\n          use.setAttribute(\"width\", `${width}`);\n          use.setAttribute(\"height\", `${height}`);\n          use.setAttribute(\"opacity\", `${opacity}`); // We first apply `scale` transforms (horizontal/vertical mirroring)\n          // on the <use> element, then apply translation and rotation\n          // on the <g> element which wraps the <use>.\n          // Doing this separately is a quick hack to to work around compositing\n          // the transformations correctly (the transform-origin was not being\n          // applied correctly).\n\n          if (element.scale[0] !== 1 || element.scale[1] !== 1) {\n            const translateX = element.scale[0] !== 1 ? -width : 0;\n            const translateY = element.scale[1] !== 1 ? -height : 0;\n            use.setAttribute(\"transform\", `scale(${element.scale[0]}, ${element.scale[1]}) translate(${translateX} ${translateY})`);\n          }\n\n          const g = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"g\");\n          g.appendChild(use);\n          g.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n          const clipG = maybeWrapNodesInFrameClipPath(element, root, [g], renderConfig.frameRendering);\n          addToRoot(clipG || g, element);\n        }\n\n        break;\n      }\n    // frames are not rendered and only acts as a container\n\n    case \"frame\":\n    case \"magicframe\":\n      {\n        if (renderConfig.frameRendering.enabled && renderConfig.frameRendering.outline) {\n          const rect = document.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"rect\");\n          rect.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n          rect.setAttribute(\"width\", `${element.width}px`);\n          rect.setAttribute(\"height\", `${element.height}px`); // Rounded corners\n\n          rect.setAttribute(\"rx\", _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.radius.toString());\n          rect.setAttribute(\"ry\", _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.radius.toString());\n          rect.setAttribute(\"fill\", \"none\");\n          rect.setAttribute(\"stroke\", (_o = (_l = (_k = (_j = element.customData) === null || _j === void 0 ? void 0 : _j.frameColor) === null || _k === void 0 ? void 0 : _k.stroke) !== null && _l !== void 0 ? _l : (_m = renderConfig.frameColor) === null || _m === void 0 ? void 0 : _m.stroke) !== null && _o !== void 0 ? _o : _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.strokeColor); //zsviczian\n\n          rect.setAttribute(\"stroke-width\", (_t = (_r = (_q = (_p = element.customData) === null || _p === void 0 ? void 0 : _p.frameColor) === null || _q === void 0 ? void 0 : _q.fill) !== null && _r !== void 0 ? _r : (_s = renderConfig.frameColor) === null || _s === void 0 ? void 0 : _s.fill) !== null && _t !== void 0 ? _t : _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.strokeWidth.toString()); //zsviczian\n\n          addToRoot(rect, element);\n        }\n\n        break;\n      }\n\n    default:\n      {\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isTextElement)(element)) {\n          const node = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"g\");\n\n          if (opacity !== 1) {\n            node.setAttribute(\"stroke-opacity\", `${opacity}`);\n            node.setAttribute(\"fill-opacity\", `${opacity}`);\n          }\n\n          node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n          const lines = element.text.replace(/\\r\\n?/g, \"\\n\").split(\"\\n\");\n          const lineHeightPx = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getLineHeightInPx)(element.fontSize, element.lineHeight);\n          const horizontalOffset = element.textAlign === \"center\" ? element.width / 2 : element.textAlign === \"right\" ? element.width : 0;\n          const direction = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isRTL)(element.text) ? \"rtl\" : \"ltr\";\n          const textAnchor = element.textAlign === \"center\" ? \"middle\" : element.textAlign === \"right\" || direction === \"rtl\" ? \"end\" : \"start\";\n\n          for (let i = 0; i < lines.length; i++) {\n            const text = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"text\");\n            text.textContent = lines[i];\n            text.setAttribute(\"x\", `${horizontalOffset}`);\n            text.setAttribute(\"y\", `${i * lineHeightPx}`);\n            text.setAttribute(\"font-family\", (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getFontFamilyString)(element));\n            text.setAttribute(\"font-size\", `${element.fontSize}px`);\n            text.setAttribute(\"fill\", element.strokeColor);\n            text.setAttribute(\"text-anchor\", textAnchor);\n            text.setAttribute(\"style\", \"white-space: pre;\");\n            text.setAttribute(\"direction\", direction);\n            text.setAttribute(\"dominant-baseline\", \"text-before-edge\");\n            node.appendChild(text);\n          }\n\n          const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering);\n          addToRoot(g || node, element);\n        } else {\n          // @ts-ignore\n          throw new Error(`Unimplemented type ${element.type}`);\n        }\n      }\n  }\n};\nconst pathsCache = new WeakMap([]);\nfunction generateFreeDrawShape(element) {\n  const svgPathData = getFreeDrawSvgPath(element);\n  const path = new Path2D(svgPathData);\n  pathsCache.set(element, path);\n  return path;\n}\nfunction getFreeDrawPath2D(element) {\n  return pathsCache.get(element);\n}\nfunction getFreeDrawSvgPath(element) {\n  var _a, _b, _c, _d, _e, _f, _g, _h; // If input points are empty (should they ever be?) return a dot\n\n\n  const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(([x, y], i) => [x, y, element.pressures[i]]) : [[0, 0, 0.5]]; // Consider changing the options for simulated pressure vs real pressure\n\n  const customOptions = (_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.strokeOptions) === null || _b === void 0 ? void 0 : _b.options; //zsviczian\n\n  const options = customOptions //zsviczian\n  ? Object.assign(Object.assign(Object.assign(Object.assign({}, customOptions), {\n    simulatePressure: (_c = customOptions.simulatePressure) !== null && _c !== void 0 ? _c : element.simulatePressure,\n    size: element.strokeWidth * 4.25,\n    last: !!element.lastCommittedPoint,\n    easing: (_d = _easingFunctions__WEBPACK_IMPORTED_MODULE_11__[\"default\"][customOptions.easing]) !== null && _d !== void 0 ? _d : t => t\n  }), ((_e = customOptions.start) === null || _e === void 0 ? void 0 : _e.easing) ? {\n    start: Object.assign(Object.assign({}, customOptions.start), {\n      easing: (_f = _easingFunctions__WEBPACK_IMPORTED_MODULE_11__[\"default\"][customOptions.start.easing]) !== null && _f !== void 0 ? _f : t => t\n    })\n  } : {\n    start: customOptions.start\n  }), ((_g = customOptions.end) === null || _g === void 0 ? void 0 : _g.easing) ? {\n    end: Object.assign(Object.assign({}, customOptions.end), {\n      easing: (_h = _easingFunctions__WEBPACK_IMPORTED_MODULE_11__[\"default\"][customOptions.end.easing]) !== null && _h !== void 0 ? _h : t => t\n    })\n  } : {\n    end: customOptions.end\n  }) : {\n    simulatePressure: element.simulatePressure,\n    size: element.strokeWidth * 4.25,\n    thinning: 0.6,\n    smoothing: 0.5,\n    streamline: 0.5,\n    easing: _easingFunctions__WEBPACK_IMPORTED_MODULE_11__[\"default\"].easeOutSine,\n    last: !!element.lastCommittedPoint // LastCommittedPoint is added on pointerup\n\n  };\n  return getSvgPathFromStroke((0,perfect_freehand__WEBPACK_IMPORTED_MODULE_7__.getStroke)(inputPoints, options));\n}\n\nfunction med(A, B) {\n  return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 2];\n} // Trim SVG path data so number are each two decimal points. This\n// improves SVG exports, and prevents rendering errors on points\n// with long decimals.\n\n\nconst TO_FIXED_PRECISION = /(\\s?[A-Z]?,?-?[0-9]*\\.[0-9]{0,2})(([0-9]|e|-)*)/g;\n\nfunction getSvgPathFromStroke(points) {\n  if (!points.length) {\n    return \"\";\n  }\n\n  const max = points.length - 1;\n  return points.reduce((acc, point, i, arr) => {\n    if (i === max) {\n      acc.push(point, med(point, arr[0]), \"L\", arr[0], \"Z\");\n    } else {\n      acc.push(point, med(point, arr[i + 1]));\n    }\n\n    return acc;\n  }, [\"M\", points[0], \"Q\"]).join(\" \").replace(TO_FIXED_PRECISION, \"$1\");\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./renderer/renderElement.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"DEFAULT_LINK_SIZE\": () => (/* binding */ DEFAULT_LINK_SIZE),\n/* harmony export */   \"elementWithCanvasCache\": () => (/* binding */ elementWithCanvasCache),\n/* harmony export */   \"generateFreeDrawShape\": () => (/* binding */ generateFreeDrawShape),\n/* harmony export */   \"getFreeDrawPath2D\": () => (/* binding */ getFreeDrawPath2D),\n/* harmony export */   \"getFreeDrawSvgPath\": () => (/* binding */ getFreeDrawSvgPath),\n/* harmony export */   \"getRenderOpacity\": () => (/* binding */ getRenderOpacity),\n/* harmony export */   \"pathsCache\": () => (/* binding */ pathsCache),\n/* harmony export */   \"renderElement\": () => (/* binding */ renderElement),\n/* harmony export */   \"renderElementToSvg\": () => (/* binding */ renderElementToSvg),\n/* harmony export */   \"renderSelectionElement\": () => (/* binding */ renderSelectionElement)\n/* harmony export */ });\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _element_bounds__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element/bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! roughjs/bin/rough */ \"../../node_modules/roughjs/bin/rough.js\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var perfect_freehand__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! perfect-freehand */ \"../../node_modules/perfect-freehand/dist/esm/index.js\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../element/embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _easingFunctions__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./easingFunctions */ \"./renderer/easingFunctions.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../data/url */ \"./data/url.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _obsidianUtils__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../obsidianUtils */ \"./obsidianUtils.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n // using a stronger invert (100% vs our regular 93%) and saturate\n// as a temp hack to make images in dark theme look closer to original\n// color scheme (it's still not quite there and the colors look slightly\n// desatured, alas...)\n\nconst IMAGE_INVERT_FILTER = \"invert(100%) hue-rotate(180deg) saturate(1.25)\";\nconst defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_5__.getDefaultAppState)();\n\nconst isPendingImageElement = (element, renderConfig) => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isInitializedImageElement)(element) && !renderConfig.imageCache.has(element.fileId);\n\nconst shouldResetImageFilter = (element, renderConfig, appState) => {\n  var _a;\n\n  return appState.theme === \"dark\" && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isInitializedImageElement)(element) && !isPendingImageElement(element, renderConfig) && ((_a = renderConfig.imageCache.get(element.fileId)) === null || _a === void 0 ? void 0 : _a.mimeType) !== _constants__WEBPACK_IMPORTED_MODULE_6__.MIME_TYPES.svg;\n};\n\nconst getCanvasPadding = element => element.type === \"freedraw\" ? element.strokeWidth * 12 : 20;\n\nconst getRenderOpacity = (element, containingFrame, elementsPendingErasure) => {\n  var _a; // multiplying frame opacity with element opacity to combine them\n  // (e.g. frame 50% and element 50% opacity should result in 25% opacity)\n\n\n  let opacity = ((_a = containingFrame === null || containingFrame === void 0 ? void 0 : containingFrame.opacity) !== null && _a !== void 0 ? _a : 100) * element.opacity / 10000; // if pending erasure, multiply again to combine further\n  // (so that erasing always results in lower opacity than original)\n\n  if (elementsPendingErasure.has(element.id) || containingFrame && elementsPendingErasure.has(containingFrame.id)) {\n    opacity *= _constants__WEBPACK_IMPORTED_MODULE_6__.ELEMENT_READY_TO_ERASE_OPACITY / 100;\n  }\n\n  return opacity;\n};\n\nconst cappedElementCanvasSize = (element, zoom) => {\n  // these limits are ballpark, they depend on specific browsers and device.\n  // We've chosen lower limits to be safe. We might want to change these limits\n  // based on browser/device type, if we get reports of low quality rendering\n  // on zoom.\n  //\n  // ~ safari mobile canvas area limit\n  const AREA_LIMIT = (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_15__.getAreaLimit)(); //zsviczian\n  // ~ safari width/height limit based on developer.mozilla.org.\n\n  const WIDTH_HEIGHT_LIMIT = (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_15__.getWidthHeightLimit)(); //zsviczian\n\n  const padding = getCanvasPadding(element);\n  const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n  const elementWidth = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isLinearElement)(element) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isFreeDrawElement)(element) ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(x1, x2) : element.width;\n  const elementHeight = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isLinearElement)(element) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isFreeDrawElement)(element) ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(y1, y2) : element.height;\n  let width = elementWidth * window.devicePixelRatio + padding * 2;\n  let height = elementHeight * window.devicePixelRatio + padding * 2;\n  let scale = zoom.value; // rescale to ensure width and height is within limits\n\n  if (width * scale > WIDTH_HEIGHT_LIMIT || height * scale > WIDTH_HEIGHT_LIMIT) {\n    scale = Math.min(WIDTH_HEIGHT_LIMIT / width, WIDTH_HEIGHT_LIMIT / height);\n  } // rescale to ensure canvas area is within limits\n\n\n  if (width * height * scale * scale > AREA_LIMIT) {\n    scale = Math.sqrt(AREA_LIMIT / (width * height));\n  }\n\n  width = Math.floor(width * scale);\n  height = Math.floor(height * scale);\n  return {\n    width,\n    height,\n    scale\n  };\n};\n\nconst generateElementCanvas = (element, zoom, renderConfig, appState) => {\n  var _a, _b;\n\n  const canvas = document.createElement(\"canvas\");\n  const context = canvas.getContext(\"2d\");\n  const padding = getCanvasPadding(element);\n  const {\n    width,\n    height,\n    scale\n  } = cappedElementCanvasSize(element, zoom);\n  canvas.width = width;\n  canvas.height = height;\n  let canvasOffsetX = 0;\n  let canvasOffsetY = 0;\n\n  if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isLinearElement)(element) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isFreeDrawElement)(element)) {\n    const [x1, y1] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n    canvasOffsetX = element.x > x1 ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(element.x, x1) * window.devicePixelRatio * scale : 0;\n    canvasOffsetY = element.y > y1 ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(element.y, y1) * window.devicePixelRatio * scale : 0;\n    context.translate(canvasOffsetX, canvasOffsetY);\n  }\n\n  context.save();\n  context.translate(padding * scale, padding * scale);\n  context.scale(window.devicePixelRatio * scale, window.devicePixelRatio * scale);\n  const rc = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_4__[\"default\"].canvas(canvas); // in dark theme, revert the image color filter\n\n  if (shouldResetImageFilter(element, renderConfig, appState)) {\n    context.filter = IMAGE_INVERT_FILTER;\n  }\n\n  drawElementOnCanvas(element, rc, context, renderConfig, appState);\n  context.restore();\n  return {\n    element,\n    canvas,\n    theme: appState.theme,\n    scale,\n    zoomValue: zoom.value,\n    canvasOffsetX,\n    canvasOffsetY,\n    boundTextElementVersion: ((_a = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element)) === null || _a === void 0 ? void 0 : _a.version) || null,\n    containingFrameOpacity: ((_b = (0,_frame__WEBPACK_IMPORTED_MODULE_12__.getContainingFrame)(element)) === null || _b === void 0 ? void 0 : _b.opacity) || 100\n  };\n};\n\nconst DEFAULT_LINK_SIZE = 14;\nconst IMAGE_PLACEHOLDER_IMG = document.createElement(\"img\");\nIMAGE_PLACEHOLDER_IMG.src = `data:${_constants__WEBPACK_IMPORTED_MODULE_6__.MIME_TYPES.svg},${encodeURIComponent(`<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"image\" class=\"svg-inline--fa fa-image fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"#888\" d=\"M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z\"></path></svg>`)}`;\nconst IMAGE_ERROR_PLACEHOLDER_IMG = document.createElement(\"img\");\nIMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${_constants__WEBPACK_IMPORTED_MODULE_6__.MIME_TYPES.svg},${encodeURIComponent(`<svg viewBox=\"0 0 668 668\" xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2\"><path d=\"M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48ZM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56ZM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48Z\" style=\"fill:#888;fill-rule:nonzero\" transform=\"matrix(.81709 0 0 .81709 124.825 145.825)\"/><path d=\"M256 8C119.034 8 8 119.033 8 256c0 136.967 111.034 248 248 248s248-111.034 248-248S392.967 8 256 8Zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676ZM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676Z\" style=\"fill:#888;fill-rule:nonzero\" transform=\"matrix(.30366 0 0 .30366 506.822 60.065)\"/></svg>`)}`;\n\nconst drawImagePlaceholder = (element, context, zoomValue) => {\n  context.fillStyle = \"#E7E7E7\";\n  context.fillRect(0, 0, element.width, element.height);\n  const imageMinWidthOrHeight = Math.min(element.width, element.height);\n  const size = Math.min(imageMinWidthOrHeight, Math.min(imageMinWidthOrHeight * 0.4, 100));\n  context.drawImage(element.status === \"error\" ? IMAGE_ERROR_PLACEHOLDER_IMG : IMAGE_PLACEHOLDER_IMG, element.width / 2 - size / 2, element.height / 2 - size / 2, size, size);\n};\n\nconst drawElementOnCanvas = (element, rc, context, renderConfig, appState) => {\n  var _a, _b, _c, _d;\n\n  switch (element.type) {\n    case \"rectangle\":\n    case \"iframe\":\n    case \"embeddable\":\n    case \"diamond\":\n    case \"ellipse\":\n      {\n        context.lineJoin = \"round\";\n        context.lineCap = \"round\";\n        rc.draw(_scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.get(element));\n        break;\n      }\n\n    case \"arrow\":\n    case \"line\":\n      {\n        context.lineJoin = \"round\";\n        context.lineCap = \"round\";\n        _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.get(element).forEach(shape => {\n          rc.draw(shape);\n        });\n        break;\n      }\n\n    case \"freedraw\":\n      {\n        // Draw directly to canvas\n        context.save();\n        context.fillStyle = element.strokeColor;\n        const path = getFreeDrawPath2D(element);\n        const fillShape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.get(element);\n\n        if (fillShape) {\n          rc.draw(fillShape);\n        } //zsviczian\n\n\n        if ((_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.strokeOptions) === null || _b === void 0 ? void 0 : _b.hasOutline) {\n          context.lineWidth = element.strokeWidth * ((_c = element.customData.strokeOptions.outlineWidth) !== null && _c !== void 0 ? _c : 1);\n          context.strokeStyle = element.strokeColor;\n          context.stroke(path);\n          context.fillStyle = element.backgroundColor;\n        } else {\n          context.fillStyle = element.strokeColor;\n        }\n\n        context.fill(path);\n        context.restore();\n        break;\n      }\n\n    case \"image\":\n      {\n        const img = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isInitializedImageElement)(element) ? (_d = renderConfig.imageCache.get(element.fileId)) === null || _d === void 0 ? void 0 : _d.image : undefined;\n\n        if (img != null && !(img instanceof Promise)) {\n          context.drawImage(img, 0\n          /* hardcoded for the selection box*/\n          , 0, element.width, element.height);\n        } else {\n          drawImagePlaceholder(element, context, appState.zoom.value);\n        }\n\n        break;\n      }\n\n    default:\n      {\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isTextElement)(element)) {\n          const rtl = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isRTL)(element.text);\n          const shouldTemporarilyAttach = rtl && !context.canvas.isConnected;\n\n          if (shouldTemporarilyAttach) {\n            // to correctly render RTL text mixed with LTR, we have to append it\n            // to the DOM\n            document.body.appendChild(context.canvas);\n          }\n\n          context.canvas.setAttribute(\"dir\", rtl ? \"rtl\" : \"ltr\");\n          context.save();\n          context.font = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getFontString)(element);\n          context.fillStyle = element.strokeColor;\n          context.textAlign = element.textAlign; // Canvas does not support multiline text by default\n\n          const lines = element.text.replace(/\\r\\n?/g, \"\\n\").split(\"\\n\");\n          const horizontalOffset = element.textAlign === \"center\" ? element.width / 2 : element.textAlign === \"right\" ? element.width : 0;\n          const lineHeightPx = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getLineHeightInPx)(element.fontSize, element.lineHeight);\n          const verticalOffset = element.height - element.baseline;\n\n          for (let index = 0; index < lines.length; index++) {\n            context.fillText(lines[index], horizontalOffset, (index + 1) * lineHeightPx - verticalOffset);\n          }\n\n          context.restore();\n\n          if (shouldTemporarilyAttach) {\n            context.canvas.remove();\n          }\n        } else {\n          throw new Error(`Unimplemented type ${element.type}`);\n        }\n      }\n  }\n};\n\nconst elementWithCanvasCache = new WeakMap();\n\nconst generateElementWithCanvas = (element, renderConfig, appState) => {\n  var _a, _b;\n\n  const zoom = renderConfig ? appState.zoom : defaultAppState.zoom;\n  const prevElementWithCanvas = elementWithCanvasCache.get(element);\n  const shouldRegenerateBecauseZoom = prevElementWithCanvas && prevElementWithCanvas.zoomValue !== zoom.value && !(appState === null || appState === void 0 ? void 0 : appState.shouldCacheIgnoreZoom);\n  const boundTextElementVersion = ((_a = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element)) === null || _a === void 0 ? void 0 : _a.version) || null;\n  const containingFrameOpacity = ((_b = (0,_frame__WEBPACK_IMPORTED_MODULE_12__.getContainingFrame)(element)) === null || _b === void 0 ? void 0 : _b.opacity) || 100;\n\n  if (!prevElementWithCanvas || shouldRegenerateBecauseZoom || prevElementWithCanvas.theme !== appState.theme || prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion || prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity) {\n    const elementWithCanvas = generateElementCanvas(element, zoom, renderConfig, appState);\n    elementWithCanvasCache.set(element, elementWithCanvas);\n    return elementWithCanvas;\n  }\n\n  return prevElementWithCanvas;\n};\n\nconst drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appState) => {\n  const element = elementWithCanvas.element;\n  const padding = getCanvasPadding(element);\n  const zoom = elementWithCanvas.scale;\n  let [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element); // Free draw elements will otherwise \"shuffle\" as the min x and y change\n\n  if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isFreeDrawElement)(element)) {\n    x1 = Math.floor(x1);\n    x2 = Math.ceil(x2);\n    y1 = Math.floor(y1);\n    y2 = Math.ceil(y2);\n  }\n\n  const cx = ((x1 + x2) / 2 + appState.scrollX) * window.devicePixelRatio;\n  const cy = ((y1 + y2) / 2 + appState.scrollY) * window.devicePixelRatio;\n  context.save();\n  context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);\n  const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element);\n\n  if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(element) && boundTextElement) {\n    const tempCanvas = document.createElement(\"canvas\");\n    const tempCanvasContext = tempCanvas.getContext(\"2d\"); // Take max dimensions of arrow canvas so that when canvas is rotated\n    // the arrow doesn't get clipped\n\n    const maxDim = Math.max((0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(x1, x2), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(y1, y2));\n    tempCanvas.width = maxDim * window.devicePixelRatio * zoom + padding * elementWithCanvas.scale * 10;\n    tempCanvas.height = maxDim * window.devicePixelRatio * zoom + padding * elementWithCanvas.scale * 10;\n    const offsetX = (tempCanvas.width - elementWithCanvas.canvas.width) / 2;\n    const offsetY = (tempCanvas.height - elementWithCanvas.canvas.height) / 2;\n    tempCanvasContext.translate(tempCanvas.width / 2, tempCanvas.height / 2);\n    tempCanvasContext.rotate(element.angle);\n    tempCanvasContext.drawImage(elementWithCanvas.canvas, -elementWithCanvas.canvas.width / 2, -elementWithCanvas.canvas.height / 2, elementWithCanvas.canvas.width, elementWithCanvas.canvas.height);\n    const [,,,, boundTextCx, boundTextCy] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(boundTextElement);\n    tempCanvasContext.rotate(-element.angle); // Shift the canvas to the center of the bound text element\n\n    const shiftX = tempCanvas.width / 2 - (boundTextCx - x1) * window.devicePixelRatio * zoom - offsetX - padding * zoom;\n    const shiftY = tempCanvas.height / 2 - (boundTextCy - y1) * window.devicePixelRatio * zoom - offsetY - padding * zoom;\n    tempCanvasContext.translate(-shiftX, -shiftY); // Clear the bound text area\n\n    tempCanvasContext.clearRect(-(boundTextElement.width / 2 + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING) * window.devicePixelRatio * zoom, -(boundTextElement.height / 2 + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING) * window.devicePixelRatio * zoom, (boundTextElement.width + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING * 2) * window.devicePixelRatio * zoom, (boundTextElement.height + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING * 2) * window.devicePixelRatio * zoom);\n    context.translate(cx, cy);\n    context.drawImage(tempCanvas, -(x2 - x1) / 2 * window.devicePixelRatio - offsetX / zoom - padding, -(y2 - y1) / 2 * window.devicePixelRatio - offsetY / zoom - padding, tempCanvas.width / zoom, tempCanvas.height / zoom);\n  } else {\n    // we translate context to element center so that rotation and scale\n    // originates from the element center\n    context.translate(cx, cy);\n    context.rotate(element.angle);\n\n    if (\"scale\" in elementWithCanvas.element && !isPendingImageElement(element, renderConfig) && !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isIframeLikeElement)(element) //zsviczian\n    ) {\n      context.scale(elementWithCanvas.element.scale[0], elementWithCanvas.element.scale[1]);\n    } // revert afterwards we don't have account for it during drawing\n\n\n    context.translate(-cx, -cy);\n    context.drawImage(elementWithCanvas.canvas, (x1 + appState.scrollX) * window.devicePixelRatio - padding * elementWithCanvas.scale / elementWithCanvas.scale, (y1 + appState.scrollY) * window.devicePixelRatio - padding * elementWithCanvas.scale / elementWithCanvas.scale, elementWithCanvas.canvas.width / elementWithCanvas.scale, elementWithCanvas.canvas.height / elementWithCanvas.scale);\n\n    if (false) {}\n  }\n\n  context.restore(); // Clear the nested element we appended to the DOM\n};\n\nconst renderSelectionElement = (element, context, appState) => {\n  context.save();\n  context.translate(element.x + appState.scrollX, element.y + appState.scrollY);\n  context.fillStyle = \"rgba(0, 0, 200, 0.04)\"; // render from 0.5px offset  to get 1px wide line\n  // https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540\n  // TODO can be be improved by offseting to the negative when user selects\n  // from right to left\n\n  const offset = 0.5 / appState.zoom.value;\n  context.fillRect(offset, offset, element.width, element.height);\n  context.lineWidth = 1 / appState.zoom.value;\n  context.strokeStyle = \" rgb(105, 101, 219)\";\n  context.strokeRect(offset, offset, element.width, element.height);\n  context.restore();\n};\nconst renderElement = (element, rc, context, renderConfig, appState) => {\n  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n\n  context.globalAlpha = getRenderOpacity(element, (0,_frame__WEBPACK_IMPORTED_MODULE_12__.getContainingFrame)(element), renderConfig.elementsPendingErasure);\n\n  switch (element.type) {\n    case \"magicframe\":\n    case \"frame\":\n      {\n        if (appState.frameRendering.enabled && appState.frameRendering.outline) {\n          context.save();\n          context.translate(element.x + appState.scrollX, element.y + appState.scrollY);\n          context.fillStyle = (_e = (_c = (_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.frameColor) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = appState === null || appState === void 0 ? void 0 : appState.frameColor) === null || _d === void 0 ? void 0 : _d.fill) !== null && _e !== void 0 ? _e : \"rgba(0, 0, 200, 0.04)\"; //zsviczian\n\n          context.lineWidth = _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.strokeWidth / appState.zoom.value;\n          context.strokeStyle = (_k = (_h = (_g = (_f = element.customData) === null || _f === void 0 ? void 0 : _f.frameColor) === null || _g === void 0 ? void 0 : _g.stroke) !== null && _h !== void 0 ? _h : (_j = appState === null || appState === void 0 ? void 0 : appState.frameColor) === null || _j === void 0 ? void 0 : _j.stroke) !== null && _k !== void 0 ? _k : _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.strokeColor; //zsviczian\n          // TODO change later to only affect AI frames\n\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isMagicFrameElement)(element)) {\n            context.strokeStyle = appState.theme === \"light\" ? \"#7affd7\" : \"#1d8264\";\n          }\n\n          if (_constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.radius && context.roundRect) {\n            context.beginPath();\n            context.roundRect(0, 0, element.width, element.height, _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.radius / appState.zoom.value);\n            context.stroke();\n            context.closePath();\n          } else {\n            context.strokeRect(0, 0, element.width, element.height);\n          }\n\n          context.restore();\n        }\n\n        break;\n      }\n\n    case \"freedraw\":\n      {\n        // TODO investigate if we can do this in situ. Right now we need to call\n        // beforehand because math helpers (such as getElementAbsoluteCoords)\n        // rely on existing shapes\n        _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.generateElementShape(element, null);\n\n        if (renderConfig.isExporting) {\n          const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n          const cx = (x1 + x2) / 2 + appState.scrollX;\n          const cy = (y1 + y2) / 2 + appState.scrollY;\n          const shiftX = (x2 - x1) / 2 - (element.x - x1);\n          const shiftY = (y2 - y1) / 2 - (element.y - y1);\n          context.save();\n          context.translate(cx, cy);\n          context.rotate(element.angle);\n          context.translate(-shiftX, -shiftY);\n          drawElementOnCanvas(element, rc, context, renderConfig, appState);\n          context.restore();\n        } else {\n          const elementWithCanvas = generateElementWithCanvas(element, renderConfig, appState);\n          drawElementFromCanvas(elementWithCanvas, context, renderConfig, appState);\n        }\n\n        break;\n      }\n\n    case \"rectangle\":\n    case \"diamond\":\n    case \"ellipse\":\n    case \"line\":\n    case \"arrow\":\n    case \"image\":\n    case \"text\":\n    case \"iframe\":\n    case \"embeddable\":\n      {\n        // TODO investigate if we can do this in situ. Right now we need to call\n        // beforehand because math helpers (such as getElementAbsoluteCoords)\n        // rely on existing shapes\n        _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.generateElementShape(element, renderConfig);\n\n        if (renderConfig.isExporting) {\n          const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n          const cx = (x1 + x2) / 2 + appState.scrollX;\n          const cy = (y1 + y2) / 2 + appState.scrollY;\n          let shiftX = (x2 - x1) / 2 - (element.x - x1);\n          let shiftY = (y2 - y1) / 2 - (element.y - y1);\n\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isTextElement)(element)) {\n            const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getContainerElement)(element);\n\n            if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(container)) {\n              const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getBoundTextElementPosition(container, element);\n              shiftX = (x2 - x1) / 2 - (boundTextCoords.x - x1);\n              shiftY = (y2 - y1) / 2 - (boundTextCoords.y - y1);\n            }\n          }\n\n          context.save();\n          context.translate(cx, cy);\n\n          if (shouldResetImageFilter(element, renderConfig, appState)) {\n            context.filter = \"none\";\n          }\n\n          const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element);\n\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(element) && boundTextElement) {\n            const tempCanvas = document.createElement(\"canvas\");\n            const tempCanvasContext = tempCanvas.getContext(\"2d\"); // Take max dimensions of arrow canvas so that when canvas is rotated\n            // the arrow doesn't get clipped\n\n            const maxDim = Math.max((0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(x1, x2), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(y1, y2));\n            const padding = getCanvasPadding(element);\n            tempCanvas.width = maxDim * appState.exportScale + padding * 10 * appState.exportScale;\n            tempCanvas.height = maxDim * appState.exportScale + padding * 10 * appState.exportScale;\n            tempCanvasContext.translate(tempCanvas.width / 2, tempCanvas.height / 2);\n            tempCanvasContext.scale(appState.exportScale, appState.exportScale); // Shift the canvas to left most point of the arrow\n\n            shiftX = element.width / 2 - (element.x - x1);\n            shiftY = element.height / 2 - (element.y - y1);\n            tempCanvasContext.rotate(element.angle);\n            const tempRc = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_4__[\"default\"].canvas(tempCanvas);\n            tempCanvasContext.translate(-shiftX, -shiftY);\n            drawElementOnCanvas(element, tempRc, tempCanvasContext, renderConfig, appState);\n            tempCanvasContext.translate(shiftX, shiftY);\n            tempCanvasContext.rotate(-element.angle); // Shift the canvas to center of bound text\n\n            const [,,,, boundTextCx, boundTextCy] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(boundTextElement);\n            const boundTextShiftX = (x1 + x2) / 2 - boundTextCx;\n            const boundTextShiftY = (y1 + y2) / 2 - boundTextCy;\n            tempCanvasContext.translate(-boundTextShiftX, -boundTextShiftY); // Clear the bound text area\n\n            tempCanvasContext.clearRect(-boundTextElement.width / 2, -boundTextElement.height / 2, boundTextElement.width, boundTextElement.height);\n            context.scale(1 / appState.exportScale, 1 / appState.exportScale);\n            context.drawImage(tempCanvas, -tempCanvas.width / 2, -tempCanvas.height / 2, tempCanvas.width, tempCanvas.height);\n          } else {\n            context.rotate(element.angle);\n\n            if (element.type === \"image\") {\n              // note: scale must be applied *after* rotating\n              context.scale(element.scale[0], element.scale[1]);\n            }\n\n            context.translate(-shiftX, -shiftY);\n            drawElementOnCanvas(element, rc, context, renderConfig, appState);\n          }\n\n          context.restore(); // not exporting → optimized rendering (cache & render from element\n          // canvases)\n        } else {\n          const elementWithCanvas = generateElementWithCanvas(element, renderConfig, appState);\n          const currentImageSmoothingStatus = context.imageSmoothingEnabled;\n\n          if ( // do not disable smoothing during zoom as blurry shapes look better\n          // on low resolution (while still zooming in) than sharp ones\n          !(appState === null || appState === void 0 ? void 0 : appState.shouldCacheIgnoreZoom) && ( // angle is 0 -> always disable smoothing\n          !element.angle || // or check if angle is a right angle in which case we can still\n          // disable smoothing without adversely affecting the result\n          (0,_math__WEBPACK_IMPORTED_MODULE_3__.isRightAngle)(element.angle))) {\n            // Disabling smoothing makes output much sharper, especially for\n            // text. Unless for non-right angles, where the aliasing is really\n            // terrible on Chromium.\n            //\n            // Note that `context.imageSmoothingQuality=\"high\"` has almost\n            // zero effect.\n            //\n            context.imageSmoothingEnabled = false;\n          }\n\n          drawElementFromCanvas(elementWithCanvas, context, renderConfig, appState); // reset\n\n          context.imageSmoothingEnabled = currentImageSmoothingStatus;\n        }\n\n        break;\n      }\n\n    default:\n      {\n        // @ts-ignore\n        throw new Error(`Unimplemented type ${element.type}`);\n      }\n  }\n\n  context.globalAlpha = 1;\n};\n\nconst roughSVGDrawWithPrecision = (rsvg, drawable, precision) => {\n  if (typeof precision === \"undefined\") {\n    return rsvg.draw(drawable);\n  }\n\n  const pshape = {\n    sets: drawable.sets,\n    shape: drawable.shape,\n    options: Object.assign(Object.assign({}, drawable.options), {\n      fixedDecimalPlaceDigits: precision\n    })\n  };\n  return rsvg.draw(pshape);\n};\n\nconst maybeWrapNodesInFrameClipPath = (element, root, nodes, frameRendering) => {\n  if (!frameRendering.enabled || !frameRendering.clip) {\n    return null;\n  }\n\n  const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_12__.getContainingFrame)(element);\n\n  if (frame) {\n    const g = root.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"g\");\n    g.setAttributeNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"clip-path\", `url(#${frame.id})`);\n    nodes.forEach(node => g.appendChild(node));\n    return g;\n  }\n\n  return null;\n};\n\nconst renderElementToSvg = (element, rsvg, svgRoot, files, offsetX, offsetY, renderConfig) => {\n  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n\n  const offset = {\n    x: offsetX,\n    y: offsetY\n  };\n  const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n  let cx = (x2 - x1) / 2 - (element.x - x1);\n  let cy = (y2 - y1) / 2 - (element.y - y1);\n\n  if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isTextElement)(element)) {\n    const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getContainerElement)(element);\n\n    if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(container)) {\n      const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(container);\n      const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getBoundTextElementPosition(container, element);\n      cx = (x2 - x1) / 2 - (boundTextCoords.x - x1);\n      cy = (y2 - y1) / 2 - (boundTextCoords.y - y1);\n      offsetX = offsetX + boundTextCoords.x - element.x;\n      offsetY = offsetY + boundTextCoords.y - element.y;\n    }\n  }\n\n  const degree = 180 * element.angle / Math.PI; // element to append node to, most of the time svgRoot\n\n  let root = svgRoot; // if the element has a link, create an anchor tag and make that the new root\n\n  if (element.link) {\n    const anchorTag = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"a\");\n    anchorTag.setAttribute(\"href\", (0,_data_url__WEBPACK_IMPORTED_MODULE_13__.normalizeLink)(element.link));\n    root.appendChild(anchorTag);\n    root = anchorTag;\n  }\n\n  const addToRoot = (node, element) => {\n    if ((0,_utils__WEBPACK_IMPORTED_MODULE_2__.isTestEnv)()) {\n      node.setAttribute(\"data-id\", element.id);\n    }\n\n    root.appendChild(node);\n  };\n\n  const opacity = ((_b = (_a = (0,_frame__WEBPACK_IMPORTED_MODULE_12__.getContainingFrame)(element)) === null || _a === void 0 ? void 0 : _a.opacity) !== null && _b !== void 0 ? _b : 100) * element.opacity / 10000;\n\n  switch (element.type) {\n    case \"selection\":\n      {\n        // Since this is used only during editing experience, which is canvas based,\n        // this should not happen\n        throw new Error(\"Selection rendering is not supported for SVG\");\n      }\n\n    case \"rectangle\":\n    case \"diamond\":\n    case \"ellipse\":\n      {\n        const shape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.generateElementShape(element, null);\n        const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_6__.MAX_DECIMALS_FOR_SVG_EXPORT);\n\n        if (opacity !== 1) {\n          node.setAttribute(\"stroke-opacity\", `${opacity}`);\n          node.setAttribute(\"fill-opacity\", `${opacity}`);\n        }\n\n        node.setAttribute(\"stroke-linecap\", \"round\");\n        node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n        const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering);\n        addToRoot(g || node, element);\n        break;\n      }\n\n    case \"iframe\":\n    case \"embeddable\":\n      {\n        // render placeholder rectangle\n        const shape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.generateElementShape(element, renderConfig);\n        const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_6__.MAX_DECIMALS_FOR_SVG_EXPORT);\n        const opacity = element.opacity / 100;\n\n        if (opacity !== 1) {\n          node.setAttribute(\"stroke-opacity\", `${opacity}`);\n          node.setAttribute(\"fill-opacity\", `${opacity}`);\n        }\n\n        node.setAttribute(\"stroke-linecap\", \"round\");\n        node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n        addToRoot(node, element);\n        const label = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_10__.createPlaceholderEmbeddableLabel)(element);\n        renderElementToSvg(label, rsvg, root, files, label.x + offset.x - element.x, label.y + offset.y - element.y, renderConfig);\n        const scaleX = ((_c = element.scale) === null || _c === void 0 ? void 0 : _c[0]) || 1;\n        const scaleY = ((_d = element.scale) === null || _d === void 0 ? void 0 : _d[1]) || 1; // render embeddable element + iframe\n\n        const embeddableNode = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_6__.MAX_DECIMALS_FOR_SVG_EXPORT);\n        embeddableNode.setAttribute(\"stroke-linecap\", \"round\");\n        embeddableNode.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy}) scale(${scaleX}, ${scaleY})`);\n\n        while (embeddableNode.firstChild) {\n          embeddableNode.removeChild(embeddableNode.firstChild);\n        }\n\n        const radius = (0,_math__WEBPACK_IMPORTED_MODULE_3__.getCornerRadius)(Math.min(element.width, element.height), element);\n        const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_10__.getEmbedLink)((0,_data_url__WEBPACK_IMPORTED_MODULE_13__.toValidURL)(element.link || \"\")); // if rendering embeddables explicitly disabled or\n        // embedding documents via srcdoc (which doesn't seem to work for SVGs)\n        // replace with a link instead\n\n        if (renderConfig.renderEmbeddables === false || (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"document\") {\n          const anchorTag = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"a\");\n          anchorTag.setAttribute(\"href\", (0,_data_url__WEBPACK_IMPORTED_MODULE_13__.normalizeLink)(element.link || \"\"));\n          anchorTag.setAttribute(\"target\", \"_blank\");\n          anchorTag.setAttribute(\"rel\", \"noopener noreferrer\");\n          anchorTag.style.borderRadius = `${radius}px`;\n          embeddableNode.appendChild(anchorTag);\n        } else {\n          const foreignObject = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"foreignObject\");\n          foreignObject.style.width = `${element.width / scaleX}px`;\n          foreignObject.style.height = `${element.height / scaleY}px`;\n          foreignObject.style.border = \"none\";\n          const div = foreignObject.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"div\");\n          div.setAttribute(\"xmlns\", \"http://www.w3.org/1999/xhtml\");\n          div.style.width = \"100%\";\n          div.style.height = \"100%\";\n          const iframe = div.ownerDocument.createElement(\"iframe\");\n          iframe.src = (_e = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) !== null && _e !== void 0 ? _e : \"\";\n          iframe.style.width = \"100%\";\n          iframe.style.height = \"100%\";\n          iframe.style.border = \"none\";\n          iframe.style.borderRadius = `${radius}px`;\n          iframe.style.top = \"0\";\n          iframe.style.left = \"0\";\n          iframe.allowFullscreen = true;\n          div.appendChild(iframe);\n          foreignObject.appendChild(div);\n          embeddableNode.appendChild(foreignObject);\n        }\n\n        addToRoot(embeddableNode, element);\n        break;\n      }\n\n    case \"line\":\n    case \"arrow\":\n      {\n        const boundText = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element);\n        const maskPath = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"mask\");\n\n        if (boundText) {\n          maskPath.setAttribute(\"id\", `mask-${element.id}`);\n          const maskRectVisible = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"rect\");\n          offsetX = offsetX || 0;\n          offsetY = offsetY || 0;\n          maskRectVisible.setAttribute(\"x\", \"0\");\n          maskRectVisible.setAttribute(\"y\", \"0\");\n          maskRectVisible.setAttribute(\"fill\", \"#fff\");\n          maskRectVisible.setAttribute(\"width\", `${element.width + 100 + offsetX}`);\n          maskRectVisible.setAttribute(\"height\", `${element.height + 100 + offsetY}`);\n          maskPath.appendChild(maskRectVisible);\n          const maskRectInvisible = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"rect\");\n          const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getBoundTextElementPosition(element, boundText);\n          const maskX = offsetX + boundTextCoords.x - element.x;\n          const maskY = offsetY + boundTextCoords.y - element.y;\n          maskRectInvisible.setAttribute(\"x\", maskX.toString());\n          maskRectInvisible.setAttribute(\"y\", maskY.toString());\n          maskRectInvisible.setAttribute(\"fill\", \"#000\");\n          maskRectInvisible.setAttribute(\"width\", `${boundText.width}`);\n          maskRectInvisible.setAttribute(\"height\", `${boundText.height}`);\n          maskRectInvisible.setAttribute(\"opacity\", \"1\");\n          maskPath.appendChild(maskRectInvisible);\n        }\n\n        const group = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"g\");\n\n        if (boundText) {\n          group.setAttribute(\"mask\", `url(#mask-${element.id})`);\n        }\n\n        group.setAttribute(\"stroke-linecap\", \"round\");\n        const shapes = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.generateElementShape(element, renderConfig);\n        shapes.forEach(shape => {\n          const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_6__.MAX_DECIMALS_FOR_SVG_EXPORT);\n\n          if (opacity !== 1) {\n            node.setAttribute(\"stroke-opacity\", `${opacity}`);\n            node.setAttribute(\"fill-opacity\", `${opacity}`);\n          }\n\n          node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n\n          if (element.type === \"line\" && (0,_math__WEBPACK_IMPORTED_MODULE_3__.isPathALoop)(element.points) && element.backgroundColor !== \"transparent\") {\n            node.setAttribute(\"fill-rule\", \"evenodd\");\n          }\n\n          group.appendChild(node);\n        });\n        const g = maybeWrapNodesInFrameClipPath(element, root, [group, maskPath], renderConfig.frameRendering);\n\n        if (g) {\n          addToRoot(g, element);\n          root.appendChild(g);\n        } else {\n          addToRoot(group, element);\n          root.append(maskPath);\n        }\n\n        break;\n      }\n\n    case \"freedraw\":\n      {\n        const backgroundFillShape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_14__.ShapeCache.generateElementShape(element, renderConfig);\n        const node = backgroundFillShape ? roughSVGDrawWithPrecision(rsvg, backgroundFillShape, _constants__WEBPACK_IMPORTED_MODULE_6__.MAX_DECIMALS_FOR_SVG_EXPORT) : svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"g\");\n\n        if (opacity !== 1) {\n          node.setAttribute(\"stroke-opacity\", `${opacity}`);\n          node.setAttribute(\"fill-opacity\", `${opacity}`);\n        }\n\n        node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n        node.setAttribute(\"stroke\", \"none\");\n        const path = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"path\"); //zsviczian\n\n        if ((_g = (_f = element.customData) === null || _f === void 0 ? void 0 : _f.strokeOptions) === null || _g === void 0 ? void 0 : _g.hasOutline) {\n          node.setAttribute(\"stroke-width\", `${element.strokeWidth * ((_h = element.customData.strokeOptions.outlineWidth) !== null && _h !== void 0 ? _h : 1)}`);\n          const outline = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"path\");\n          outline.setAttribute(\"fill\", \"none\");\n          outline.setAttribute(\"stroke\", element.strokeColor);\n          outline.setAttribute(\"d\", getFreeDrawSvgPath(element));\n          node.appendChild(outline);\n          path.setAttribute(\"fill\", element.backgroundColor);\n        } else {\n          path.setAttribute(\"fill\", element.strokeColor);\n        }\n\n        path.setAttribute(\"d\", getFreeDrawSvgPath(element));\n        node.appendChild(path);\n        const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering);\n        addToRoot(g || node, element);\n        break;\n      }\n\n    case \"image\":\n      {\n        const width = Math.round(element.width);\n        const height = Math.round(element.height);\n        const fileData = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isInitializedImageElement)(element) && files[element.fileId];\n\n        if (fileData) {\n          const symbolId = `image-${fileData.id}`;\n          let symbol = svgRoot.querySelector(`#${symbolId}`);\n\n          if (!symbol) {\n            symbol = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"symbol\");\n            symbol.id = symbolId;\n            const image = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"image\");\n            image.setAttribute(\"width\", \"100%\");\n            image.setAttribute(\"height\", \"100%\");\n            image.setAttribute(\"href\", fileData.dataURL);\n            symbol.appendChild(image);\n            root.prepend(symbol);\n          }\n\n          const use = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"use\");\n          use.setAttribute(\"href\", `#${symbolId}`); // in dark theme, revert the image color filter\n\n          if (renderConfig.exportWithDarkMode && fileData.mimeType !== _constants__WEBPACK_IMPORTED_MODULE_6__.MIME_TYPES.svg) {\n            use.setAttribute(\"filter\", IMAGE_INVERT_FILTER);\n          }\n\n          use.setAttribute(\"width\", `${width}`);\n          use.setAttribute(\"height\", `${height}`);\n          use.setAttribute(\"opacity\", `${opacity}`); // We first apply `scale` transforms (horizontal/vertical mirroring)\n          // on the <use> element, then apply translation and rotation\n          // on the <g> element which wraps the <use>.\n          // Doing this separately is a quick hack to to work around compositing\n          // the transformations correctly (the transform-origin was not being\n          // applied correctly).\n\n          if (element.scale[0] !== 1 || element.scale[1] !== 1) {\n            const translateX = element.scale[0] !== 1 ? -width : 0;\n            const translateY = element.scale[1] !== 1 ? -height : 0;\n            use.setAttribute(\"transform\", `scale(${element.scale[0]}, ${element.scale[1]}) translate(${translateX} ${translateY})`);\n          }\n\n          const g = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"g\");\n          g.appendChild(use);\n          g.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n          const clipG = maybeWrapNodesInFrameClipPath(element, root, [g], renderConfig.frameRendering);\n          addToRoot(clipG || g, element);\n        }\n\n        break;\n      }\n    // frames are not rendered and only acts as a container\n\n    case \"frame\":\n    case \"magicframe\":\n      {\n        if (renderConfig.frameRendering.enabled && renderConfig.frameRendering.outline) {\n          const rect = document.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"rect\");\n          rect.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n          rect.setAttribute(\"width\", `${element.width}px`);\n          rect.setAttribute(\"height\", `${element.height}px`); // Rounded corners\n\n          rect.setAttribute(\"rx\", _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.radius.toString());\n          rect.setAttribute(\"ry\", _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.radius.toString());\n          rect.setAttribute(\"fill\", \"none\");\n          rect.setAttribute(\"stroke\", (_o = (_l = (_k = (_j = element.customData) === null || _j === void 0 ? void 0 : _j.frameColor) === null || _k === void 0 ? void 0 : _k.stroke) !== null && _l !== void 0 ? _l : (_m = renderConfig.frameColor) === null || _m === void 0 ? void 0 : _m.stroke) !== null && _o !== void 0 ? _o : _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.strokeColor); //zsviczian\n\n          rect.setAttribute(\"stroke-width\", (_t = (_r = (_q = (_p = element.customData) === null || _p === void 0 ? void 0 : _p.frameColor) === null || _q === void 0 ? void 0 : _q.fill) !== null && _r !== void 0 ? _r : (_s = renderConfig.frameColor) === null || _s === void 0 ? void 0 : _s.fill) !== null && _t !== void 0 ? _t : _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.strokeWidth.toString()); //zsviczian\n\n          addToRoot(rect, element);\n        }\n\n        break;\n      }\n\n    default:\n      {\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isTextElement)(element)) {\n          const node = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"g\");\n\n          if (opacity !== 1) {\n            node.setAttribute(\"stroke-opacity\", `${opacity}`);\n            node.setAttribute(\"fill-opacity\", `${opacity}`);\n          }\n\n          node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n          const lines = element.text.replace(/\\r\\n?/g, \"\\n\").split(\"\\n\");\n          const lineHeightPx = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getLineHeightInPx)(element.fontSize, element.lineHeight);\n          const horizontalOffset = element.textAlign === \"center\" ? element.width / 2 : element.textAlign === \"right\" ? element.width : 0;\n          const direction = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isRTL)(element.text) ? \"rtl\" : \"ltr\";\n          const textAnchor = element.textAlign === \"center\" ? \"middle\" : element.textAlign === \"right\" || direction === \"rtl\" ? \"end\" : \"start\";\n\n          for (let i = 0; i < lines.length; i++) {\n            const text = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_6__.SVG_NS, \"text\");\n            text.textContent = lines[i];\n            text.setAttribute(\"x\", `${horizontalOffset}`);\n            text.setAttribute(\"y\", `${i * lineHeightPx}`);\n            text.setAttribute(\"font-family\", (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getFontFamilyString)(element));\n            text.setAttribute(\"font-size\", `${element.fontSize}px`);\n            text.setAttribute(\"fill\", element.strokeColor);\n            text.setAttribute(\"text-anchor\", textAnchor);\n            text.setAttribute(\"style\", \"white-space: pre;\");\n            text.setAttribute(\"direction\", direction);\n            text.setAttribute(\"dominant-baseline\", \"text-before-edge\");\n            node.appendChild(text);\n          }\n\n          const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering);\n          addToRoot(g || node, element);\n        } else {\n          // @ts-ignore\n          throw new Error(`Unimplemented type ${element.type}`);\n        }\n      }\n  }\n};\nconst pathsCache = new WeakMap([]);\nfunction generateFreeDrawShape(element) {\n  const svgPathData = getFreeDrawSvgPath(element);\n  const path = new Path2D(svgPathData);\n  pathsCache.set(element, path);\n  return path;\n}\nfunction getFreeDrawPath2D(element) {\n  return pathsCache.get(element);\n}\nfunction getFreeDrawSvgPath(element) {\n  var _a, _b, _c, _d, _e, _f, _g, _h; // If input points are empty (should they ever be?) return a dot\n\n\n  const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(([x, y], i) => [x, y, element.pressures[i]]) : [[0, 0, 0.5]]; // Consider changing the options for simulated pressure vs real pressure\n\n  const customOptions = (_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.strokeOptions) === null || _b === void 0 ? void 0 : _b.options; //zsviczian\n\n  const options = customOptions //zsviczian\n  ? Object.assign(Object.assign(Object.assign(Object.assign({}, customOptions), {\n    simulatePressure: (_c = customOptions.simulatePressure) !== null && _c !== void 0 ? _c : element.simulatePressure,\n    size: element.strokeWidth * 4.25,\n    last: !!element.lastCommittedPoint,\n    easing: (_d = _easingFunctions__WEBPACK_IMPORTED_MODULE_11__[\"default\"][customOptions.easing]) !== null && _d !== void 0 ? _d : t => t\n  }), ((_e = customOptions.start) === null || _e === void 0 ? void 0 : _e.easing) ? {\n    start: Object.assign(Object.assign({}, customOptions.start), {\n      easing: (_f = _easingFunctions__WEBPACK_IMPORTED_MODULE_11__[\"default\"][customOptions.start.easing]) !== null && _f !== void 0 ? _f : t => t\n    })\n  } : {\n    start: customOptions.start\n  }), ((_g = customOptions.end) === null || _g === void 0 ? void 0 : _g.easing) ? {\n    end: Object.assign(Object.assign({}, customOptions.end), {\n      easing: (_h = _easingFunctions__WEBPACK_IMPORTED_MODULE_11__[\"default\"][customOptions.end.easing]) !== null && _h !== void 0 ? _h : t => t\n    })\n  } : {\n    end: customOptions.end\n  }) : {\n    simulatePressure: element.simulatePressure,\n    size: element.strokeWidth * 4.25,\n    thinning: 0.6,\n    smoothing: 0.5,\n    streamline: 0.5,\n    easing: _easingFunctions__WEBPACK_IMPORTED_MODULE_11__[\"default\"].easeOutSine,\n    last: !!element.lastCommittedPoint // LastCommittedPoint is added on pointerup\n\n  };\n  return getSvgPathFromStroke((0,perfect_freehand__WEBPACK_IMPORTED_MODULE_7__.getStroke)(inputPoints, options));\n}\n\nfunction med(A, B) {\n  return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 2];\n} // Trim SVG path data so number are each two decimal points. This\n// improves SVG exports, and prevents rendering errors on points\n// with long decimals.\n\n\nconst TO_FIXED_PRECISION = /(\\s?[A-Z]?,?-?[0-9]*\\.[0-9]{0,2})(([0-9]|e|-)*)/g;\n\nfunction getSvgPathFromStroke(points) {\n  if (!points.length) {\n    return \"\";\n  }\n\n  const max = points.length - 1;\n  return points.reduce((acc, point, i, arr) => {\n    if (i === max) {\n      acc.push(point, med(point, arr[0]), \"L\", arr[0], \"Z\");\n    } else {\n      acc.push(point, med(point, arr[i + 1]));\n    }\n\n    return acc;\n  }, [\"M\", points[0], \"Q\"]).join(\" \").replace(TO_FIXED_PRECISION, \"$1\");\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./renderer/renderElement.ts?");
 
 /***/ }),
 
@@ -2939,7 +2983,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"DEFAULT_SPACING\": () => (/* binding */ DEFAULT_SPACING),\n/* harmony export */   \"cancelRender\": () => (/* binding */ cancelRender),\n/* harmony export */   \"renderInteractiveScene\": () => (/* binding */ renderInteractiveScene),\n/* harmony export */   \"renderSceneToSvg\": () => (/* binding */ renderSceneToSvg),\n/* harmony export */   \"renderStaticScene\": () => (/* binding */ renderStaticScene)\n/* harmony export */ });\n/* harmony import */ var open_color__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! open-color */ \"../../node_modules/open-color/open-color.json\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _roundRect__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./roundRect */ \"./renderer/roundRect.ts\");\n/* harmony import */ var _scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../scene/scrollbars */ \"./scene/scrollbars.ts\");\n/* harmony import */ var _renderElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _clients__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../clients */ \"./clients.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../groups */ \"./groups.ts\");\n/* harmony import */ var _element_collision__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/collision */ \"./element/collision.ts\");\n/* harmony import */ var _element_transformHandles__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../element/transformHandles */ \"./element/transformHandles.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../types */ \"./types.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _element_Hyperlink__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../element/Hyperlink */ \"./element/Hyperlink.tsx\");\n/* harmony import */ var _renderSnaps__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./renderSnaps */ \"./renderer/renderSnaps.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../element/embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var canvas_roundrect_polyfill__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! canvas-roundrect-polyfill */ \"../../node_modules/canvas-roundrect-polyfill/roundRect.js\");\n/* harmony import */ var canvas_roundrect_polyfill__WEBPACK_IMPORTED_MODULE_18___default = /*#__PURE__*/__webpack_require__.n(canvas_roundrect_polyfill__WEBPACK_IMPORTED_MODULE_18__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst DEFAULT_SPACING = 2;\n\nconst strokeRectWithRotation = (context, x, y, width, height, cx, cy, angle, fill = false,\n/** should account for zoom */\nradius = 0) => {\n  context.save();\n  context.translate(cx, cy);\n  context.rotate(angle);\n\n  if (fill) {\n    context.fillRect(x - cx, y - cy, width, height);\n  }\n\n  if (radius && context.roundRect) {\n    context.beginPath();\n    context.roundRect(x - cx, y - cy, width, height, radius);\n    context.stroke();\n    context.closePath();\n  } else {\n    context.strokeRect(x - cx, y - cy, width, height);\n  }\n\n  context.restore();\n};\n\nconst strokeDiamondWithRotation = (context, width, height, cx, cy, angle) => {\n  context.save();\n  context.translate(cx, cy);\n  context.rotate(angle);\n  context.beginPath();\n  context.moveTo(0, height / 2);\n  context.lineTo(width / 2, 0);\n  context.lineTo(0, -height / 2);\n  context.lineTo(-width / 2, 0);\n  context.closePath();\n  context.stroke();\n  context.restore();\n};\n\nconst strokeEllipseWithRotation = (context, width, height, cx, cy, angle) => {\n  context.beginPath();\n  context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);\n  context.stroke();\n};\n\nconst fillCircle = (context, cx, cy, radius, stroke = true) => {\n  context.beginPath();\n  context.arc(cx, cy, radius, 0, Math.PI * 2);\n  context.fill();\n\n  if (stroke) {\n    context.stroke();\n  }\n};\n\nconst strokeGrid = (context, gridSize, scrollX, scrollY, zoom, width, height, GridLineColor) => {\n  var _a;\n\n  const BOLD_LINE_FREQUENCY = (_a = GridLineColor === null || GridLineColor === void 0 ? void 0 : GridLineColor.MajorGridFrequency) !== null && _a !== void 0 ? _a : 5; //zsviczian\n\n  /*enum GridLineColor {\r\n    Bold = \"#cccccc\",\r\n    Regular = \"#e5e5e5\",\r\n  }*/\n\n  const offsetX = -Math.round(zoom.value / gridSize) * gridSize + scrollX % gridSize;\n  const offsetY = -Math.round(zoom.value / gridSize) * gridSize + scrollY % gridSize;\n  const lineWidth = Math.min(1 / zoom.value, 1);\n  const spaceWidth = 1 / zoom.value;\n  const lineDash = [lineWidth * 3, spaceWidth + (lineWidth + spaceWidth)];\n  context.save();\n  context.lineWidth = lineWidth;\n\n  for (let x = offsetX; x < offsetX + width + gridSize * 2; x += gridSize) {\n    const isBold = Math.round(x - scrollX) % (BOLD_LINE_FREQUENCY * gridSize) === 0;\n    context.beginPath();\n    context.setLineDash(isBold ? [] : lineDash);\n    context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;\n    context.moveTo(x, offsetY - gridSize);\n    context.lineTo(x, offsetY + height + gridSize * 2);\n    context.stroke();\n  }\n\n  for (let y = offsetY; y < offsetY + height + gridSize * 2; y += gridSize) {\n    const isBold = Math.round(y - scrollY) % (BOLD_LINE_FREQUENCY * gridSize) === 0;\n    context.beginPath();\n    context.setLineDash(isBold ? [] : lineDash);\n    context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;\n    context.moveTo(offsetX - gridSize, y);\n    context.lineTo(offsetX + width + gridSize * 2, y);\n    context.stroke();\n  }\n\n  context.restore();\n};\n\nconst renderSingleLinearPoint = (context, appState, point, radius, isSelected, isPhantomPoint = false) => {\n  context.strokeStyle = \"#5e5ad8\";\n  context.setLineDash([]);\n  context.fillStyle = \"rgba(255, 255, 255, 0.9)\";\n\n  if (isSelected) {\n    context.fillStyle = \"rgba(134, 131, 226, 0.9)\";\n  } else if (isPhantomPoint) {\n    context.fillStyle = \"rgba(177, 151, 252, 0.7)\";\n  }\n\n  fillCircle(context, point[0], point[1], radius / appState.zoom.value, !isPhantomPoint);\n};\n\nconst renderLinearPointHandles = (context, appState, element) => {\n  if (!appState.selectedLinearElement) {\n    return;\n  }\n\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  context.lineWidth = 1 / appState.zoom.value;\n  const points = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointsGlobalCoordinates(element);\n  const {\n    POINT_HANDLE_SIZE\n  } = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor;\n  const radius = appState.editingLinearElement ? POINT_HANDLE_SIZE : POINT_HANDLE_SIZE / 2;\n  points.forEach((point, idx) => {\n    var _a, _b;\n\n    const isSelected = !!((_b = (_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) === null || _b === void 0 ? void 0 : _b.includes(idx));\n    renderSingleLinearPoint(context, appState, point, radius, isSelected);\n  }); //Rendering segment mid points\n\n  const midPoints = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getEditorMidPoints(element, appState).filter(midPoint => midPoint !== null);\n  midPoints.forEach(segmentMidPoint => {\n    var _a;\n\n    if (((_a = appState === null || appState === void 0 ? void 0 : appState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.segmentMidPointHoveredCoords) && _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.arePointsEqual(segmentMidPoint, appState.selectedLinearElement.segmentMidPointHoveredCoords)) {\n      // The order of renderingSingleLinearPoint and highLight points is different\n      // inside vs outside editor as hover states are different,\n      // in editor when hovered the original point is not visible as hover state fully covers it whereas outside the\n      // editor original point is visible and hover state is just an outer circle.\n      if (appState.editingLinearElement) {\n        renderSingleLinearPoint(context, appState, segmentMidPoint, radius, false);\n        highlightPoint(segmentMidPoint, context, appState);\n      } else {\n        highlightPoint(segmentMidPoint, context, appState);\n        renderSingleLinearPoint(context, appState, segmentMidPoint, radius, false);\n      }\n    } else if (appState.editingLinearElement || points.length === 2) {\n      renderSingleLinearPoint(context, appState, segmentMidPoint, POINT_HANDLE_SIZE / 2, false, true);\n    }\n  });\n  context.restore();\n};\n\nconst highlightPoint = (point, context, appState) => {\n  context.fillStyle = \"rgba(105, 101, 219, 0.4)\";\n  fillCircle(context, point[0], point[1], _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value, false);\n};\n\nconst renderLinearElementPointHighlight = (context, appState) => {\n  var _a, _b;\n\n  const {\n    elementId,\n    hoverPointIndex\n  } = appState.selectedLinearElement;\n\n  if ((_b = (_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) === null || _b === void 0 ? void 0 : _b.includes(hoverPointIndex)) {\n    return;\n  }\n\n  const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getElement(elementId);\n\n  if (!element) {\n    return;\n  }\n\n  const point = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointAtIndexGlobalCoordinates(element, hoverPointIndex);\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  highlightPoint(point, context, appState);\n  context.restore();\n};\n\nconst frameClip = (frame, context, renderConfig, appState) => {\n  context.translate(frame.x + appState.scrollX, frame.y + appState.scrollY);\n  context.beginPath();\n\n  if (context.roundRect) {\n    context.roundRect(0, 0, frame.width, frame.height, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.radius / appState.zoom.value);\n  } else {\n    context.rect(0, 0, frame.width, frame.height);\n  }\n\n  context.clip();\n  context.translate(-(frame.x + appState.scrollX), -(frame.y + appState.scrollY));\n};\n\nconst getNormalizedCanvasDimensions = (canvas, scale) => {\n  // When doing calculations based on canvas width we should used normalized one\n  return [canvas.width / scale, canvas.height / scale];\n};\n\nconst bootstrapCanvas = ({\n  canvas,\n  scale,\n  normalizedWidth,\n  normalizedHeight,\n  theme,\n  isExporting,\n  viewBackgroundColor\n}) => {\n  const context = canvas.getContext(\"2d\");\n  context.setTransform(1, 0, 0, 1, 0, 0);\n  context.scale(scale, scale);\n\n  if (isExporting && theme === \"dark\") {\n    context.filter = _constants__WEBPACK_IMPORTED_MODULE_12__.THEME_FILTER;\n  } // Paint background\n\n\n  if (typeof viewBackgroundColor === \"string\") {\n    const hasTransparence = viewBackgroundColor === \"transparent\" || viewBackgroundColor.length === 5 || // #RGBA\n    viewBackgroundColor.length === 9 || // #RRGGBBA\n    /(hsla|rgba)\\(/.test(viewBackgroundColor);\n\n    if (hasTransparence) {\n      context.clearRect(0, 0, normalizedWidth, normalizedHeight);\n    }\n\n    context.save();\n    context.fillStyle = viewBackgroundColor;\n    context.fillRect(0, 0, normalizedWidth, normalizedHeight);\n    context.restore();\n  } else {\n    context.clearRect(0, 0, normalizedWidth, normalizedHeight);\n  }\n\n  return context;\n};\n\nconst _renderInteractiveScene = ({\n  canvas,\n  elements,\n  visibleElements,\n  selectedElements,\n  scale,\n  appState,\n  renderConfig\n}) => {\n  var _a, _b;\n\n  if (canvas === null) {\n    return {\n      atLeastOneVisibleElement: false,\n      elements\n    };\n  }\n\n  const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(canvas, scale);\n  const context = bootstrapCanvas({\n    canvas,\n    scale,\n    normalizedWidth,\n    normalizedHeight\n  }); // Apply zoom\n\n  context.save();\n  context.scale(appState.zoom.value, appState.zoom.value);\n  let editingLinearElement = undefined;\n  visibleElements.forEach(element => {\n    var _a; // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to\n    // ShapeCache returns empty hence making sure that we get the\n    // correct element from visible elements\n\n\n    if (((_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) === element.id) {\n      if (element) {\n        editingLinearElement = element;\n      }\n    }\n  });\n\n  if (editingLinearElement) {\n    renderLinearPointHandles(context, appState, editingLinearElement);\n  } // Paint selection element\n\n\n  if (appState.selectionElement) {\n    try {\n      (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderSelectionElement)(appState.selectionElement, context, appState);\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  if (appState.isBindingEnabled) {\n    appState.suggestedBindings.filter(binding => binding != null).forEach(suggestedBinding => {\n      renderBindingHighlight(context, appState, suggestedBinding);\n    });\n  }\n\n  if (appState.frameToHighlight) {\n    renderFrameHighlight(context, appState, appState.frameToHighlight);\n  }\n\n  if (appState.elementsToHighlight) {\n    renderElementsBoxHighlight(context, appState, appState.elementsToHighlight);\n  }\n\n  const isFrameSelected = selectedElements.some(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_15__.isFrameLikeElement)(element)); // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to\n  // ShapeCache returns empty hence making sure that we get the\n  // correct element from visible elements\n\n  if (selectedElements.length === 1 && ((_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) === selectedElements[0].id) {\n    renderLinearPointHandles(context, appState, selectedElements[0]);\n  }\n\n  if (appState.selectedLinearElement && appState.selectedLinearElement.hoverPointIndex >= 0) {\n    renderLinearElementPointHighlight(context, appState);\n  } // Paint selected elements\n\n\n  if (!appState.multiElement && !appState.editingLinearElement) {\n    const showBoundingBox = (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_9__.shouldShowBoundingBox)(selectedElements, appState);\n    const isSingleLinearElementSelected = selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_15__.isLinearElement)(selectedElements[0]); // render selected linear element points\n\n    if (isSingleLinearElementSelected && ((_b = appState.selectedLinearElement) === null || _b === void 0 ? void 0 : _b.elementId) === selectedElements[0].id && !selectedElements[0].locked) {\n      renderLinearPointHandles(context, appState, selectedElements[0]);\n    }\n\n    const selectionColor = renderConfig.selectionColor || open_color__WEBPACK_IMPORTED_MODULE_0__.black;\n\n    if (showBoundingBox) {\n      // Optimisation for finding quickly relevant element ids\n      const locallySelectedIds = selectedElements.reduce((acc, element) => {\n        acc[element.id] = true;\n        return acc;\n      }, {});\n      const selections = elements.reduce((acc, element) => {\n        var _a;\n\n        const selectionColors = []; // local user\n\n        if (locallySelectedIds[element.id] && !(0,_groups__WEBPACK_IMPORTED_MODULE_7__.isSelectedViaGroup)(appState, element)) {\n          selectionColors.push(selectionColor);\n        } // remote users\n\n\n        if (renderConfig.remoteSelectedElementIds[element.id]) {\n          selectionColors.push(...renderConfig.remoteSelectedElementIds[element.id].map(socketId => {\n            const background = (0,_clients__WEBPACK_IMPORTED_MODULE_5__.getClientColor)(socketId);\n            return background;\n          }));\n        }\n\n        if (selectionColors.length) {\n          const [elementX1, elementY1, elementX2, elementY2, cx, cy] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, true);\n          acc.push({\n            angle: element.angle,\n            elementX1,\n            elementY1,\n            elementX2,\n            elementY2,\n            selectionColors,\n            dashed: !!renderConfig.remoteSelectedElementIds[element.id],\n            cx,\n            cy,\n            activeEmbeddable: ((_a = appState.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) === element && appState.activeEmbeddable.state === \"active\"\n          });\n        }\n\n        return acc;\n      }, []);\n\n      const addSelectionForGroupId = groupId => {\n        const groupElements = (0,_groups__WEBPACK_IMPORTED_MODULE_7__.getElementsInGroup)(elements, groupId);\n        const [elementX1, elementY1, elementX2, elementY2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(groupElements);\n        selections.push({\n          angle: 0,\n          elementX1,\n          elementX2,\n          elementY1,\n          elementY2,\n          selectionColors: [open_color__WEBPACK_IMPORTED_MODULE_0__.black],\n          dashed: true,\n          cx: elementX1 + (elementX2 - elementX1) / 2,\n          cy: elementY1 + (elementY2 - elementY1) / 2,\n          activeEmbeddable: false\n        });\n      };\n\n      for (const groupId of (0,_groups__WEBPACK_IMPORTED_MODULE_7__.getSelectedGroupIds)(appState)) {\n        // TODO: support multiplayer selected group IDs\n        addSelectionForGroupId(groupId);\n      }\n\n      if (appState.editingGroupId) {\n        addSelectionForGroupId(appState.editingGroupId);\n      }\n\n      selections.forEach(selection => renderSelectionBorder(context, appState, selection));\n    } // Paint resize transformHandles\n\n\n    context.save();\n    context.translate(appState.scrollX, appState.scrollY);\n\n    if (selectedElements.length === 1) {\n      context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n      const transformHandles = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getTransformHandles)(selectedElements[0], appState.zoom, \"mouse\");\n\n      if (!appState.viewModeEnabled && showBoundingBox) {\n        renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);\n      }\n    } else if (selectedElements.length > 1 && !appState.isRotating) {\n      const dashedLinePadding = DEFAULT_SPACING * 2 / appState.zoom.value;\n      context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n      const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(selectedElements);\n      const initialLineDash = context.getLineDash();\n      context.setLineDash([2 / appState.zoom.value]);\n      const lineWidth = context.lineWidth;\n      context.lineWidth = 1 / appState.zoom.value;\n      context.strokeStyle = selectionColor;\n      strokeRectWithRotation(context, x1 - dashedLinePadding, y1 - dashedLinePadding, x2 - x1 + dashedLinePadding * 2, y2 - y1 + dashedLinePadding * 2, (x1 + x2) / 2, (y1 + y2) / 2, 0);\n      context.lineWidth = lineWidth;\n      context.setLineDash(initialLineDash);\n      const transformHandles = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getTransformHandlesFromCoords)([x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2], 0, appState.zoom, \"mouse\", isFrameSelected ? _element_transformHandles__WEBPACK_IMPORTED_MODULE_9__.OMIT_SIDES_FOR_FRAME : _element__WEBPACK_IMPORTED_MODULE_1__.OMIT_SIDES_FOR_MULTIPLE_ELEMENTS);\n\n      if (selectedElements.some(element => !element.locked)) {\n        renderTransformHandles(context, renderConfig, appState, transformHandles, 0);\n      }\n    }\n\n    context.restore();\n  }\n\n  (0,_renderSnaps__WEBPACK_IMPORTED_MODULE_14__.renderSnaps)(context, appState); // Reset zoom\n\n  context.restore(); // Paint remote pointers\n\n  for (const clientId in renderConfig.remotePointerViewportCoords) {\n    let {\n      x,\n      y\n    } = renderConfig.remotePointerViewportCoords[clientId];\n    x -= appState.offsetLeft;\n    y -= appState.offsetTop;\n    const width = 11;\n    const height = 14;\n    const isOutOfBounds = x < 0 || x > normalizedWidth - width || y < 0 || y > normalizedHeight - height;\n    x = Math.max(x, 0);\n    x = Math.min(x, normalizedWidth - width);\n    y = Math.max(y, 0);\n    y = Math.min(y, normalizedHeight - height);\n    const background = (0,_clients__WEBPACK_IMPORTED_MODULE_5__.getClientColor)(clientId);\n    context.save();\n    context.strokeStyle = background;\n    context.fillStyle = background;\n    const userState = renderConfig.remotePointerUserStates[clientId];\n    const isInactive = isOutOfBounds || userState === _types__WEBPACK_IMPORTED_MODULE_11__.UserIdleState.IDLE || userState === _types__WEBPACK_IMPORTED_MODULE_11__.UserIdleState.AWAY;\n\n    if (isInactive) {\n      context.globalAlpha = 0.3;\n    }\n\n    if (renderConfig.remotePointerButton && renderConfig.remotePointerButton[clientId] === \"down\") {\n      context.beginPath();\n      context.arc(x, y, 15, 0, 2 * Math.PI, false);\n      context.lineWidth = 3;\n      context.strokeStyle = \"#ffffff88\";\n      context.stroke();\n      context.closePath();\n      context.beginPath();\n      context.arc(x, y, 15, 0, 2 * Math.PI, false);\n      context.lineWidth = 1;\n      context.strokeStyle = background;\n      context.stroke();\n      context.closePath();\n    } // Background (white outline) for arrow\n\n\n    context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n    context.strokeStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n    context.lineWidth = 6;\n    context.lineJoin = \"round\";\n    context.beginPath();\n    context.moveTo(x, y);\n    context.lineTo(x + 0, y + 14);\n    context.lineTo(x + 4, y + 9);\n    context.lineTo(x + 11, y + 8);\n    context.closePath();\n    context.stroke();\n    context.fill(); // Arrow\n\n    context.fillStyle = background;\n    context.strokeStyle = background;\n    context.lineWidth = 2;\n    context.lineJoin = \"round\";\n    context.beginPath();\n\n    if (isInactive) {\n      context.moveTo(x - 1, y - 1);\n      context.lineTo(x - 1, y + 15);\n      context.lineTo(x + 5, y + 10);\n      context.lineTo(x + 12, y + 9);\n      context.closePath();\n      context.fill();\n    } else {\n      context.moveTo(x, y);\n      context.lineTo(x + 0, y + 14);\n      context.lineTo(x + 4, y + 9);\n      context.lineTo(x + 11, y + 8);\n      context.closePath();\n      context.fill();\n      context.stroke();\n    }\n\n    const username = renderConfig.remotePointerUsernames[clientId] || \"\";\n\n    if (!isOutOfBounds && username) {\n      context.font = \"600 12px sans-serif\"; // font has to be set before context.measureText()\n\n      const offsetX = x + width / 2;\n      const offsetY = y + height + 2;\n      const paddingHorizontal = 5;\n      const paddingVertical = 3;\n      const measure = context.measureText(username);\n      const measureHeight = measure.actualBoundingBoxDescent + measure.actualBoundingBoxAscent;\n      const finalHeight = Math.max(measureHeight, 12);\n      const boxX = offsetX - 1;\n      const boxY = offsetY - 1;\n      const boxWidth = measure.width + 2 + paddingHorizontal * 2 + 2;\n      const boxHeight = finalHeight + 2 + paddingVertical * 2 + 2;\n\n      if (context.roundRect) {\n        context.beginPath();\n        context.roundRect(boxX, boxY, boxWidth, boxHeight, 8);\n        context.fillStyle = background;\n        context.fill();\n        context.strokeStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n        context.stroke();\n      } else {\n        (0,_roundRect__WEBPACK_IMPORTED_MODULE_2__.roundRect)(context, boxX, boxY, boxWidth, boxHeight, 8, open_color__WEBPACK_IMPORTED_MODULE_0__.white);\n      }\n\n      context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.black;\n      context.fillText(username, offsetX + paddingHorizontal + 1, offsetY + paddingVertical + measure.actualBoundingBoxAscent + Math.floor((finalHeight - measureHeight) / 2) + 2);\n    }\n\n    context.restore();\n    context.closePath();\n  } // Paint scrollbars\n\n\n  let scrollBars;\n\n  if (renderConfig.renderScrollbars) {\n    scrollBars = (0,_scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__.getScrollBars)(elements, normalizedWidth, normalizedHeight, appState);\n    context.save();\n    context.fillStyle = _scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__.SCROLLBAR_COLOR;\n    context.strokeStyle = \"rgba(255,255,255,0.8)\";\n    [scrollBars.horizontal, scrollBars.vertical].forEach(scrollBar => {\n      if (scrollBar) {\n        (0,_roundRect__WEBPACK_IMPORTED_MODULE_2__.roundRect)(context, scrollBar.x, scrollBar.y, scrollBar.width, scrollBar.height, _scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__.SCROLLBAR_WIDTH / 2);\n      }\n    });\n    context.restore();\n  }\n\n  return {\n    scrollBars,\n    atLeastOneVisibleElement: visibleElements.length > 0,\n    elements\n  };\n};\n\nconst _renderStaticScene = ({\n  canvas,\n  rc,\n  elements,\n  visibleElements,\n  scale,\n  appState,\n  renderConfig\n}) => {\n  if (canvas === null) {\n    return;\n  }\n\n  const {\n    renderGrid = true,\n    isExporting\n  } = renderConfig;\n  const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(canvas, scale);\n  const context = bootstrapCanvas({\n    canvas,\n    scale,\n    normalizedWidth,\n    normalizedHeight,\n    theme: appState.theme,\n    isExporting,\n    viewBackgroundColor: appState.viewBackgroundColor\n  }); // Apply zoom\n\n  context.scale(appState.zoom.value, appState.zoom.value); // Grid\n\n  if (renderGrid && appState.gridSize) {\n    strokeGrid(context, appState.gridSize, appState.scrollX, appState.scrollY, appState.zoom, normalizedWidth / appState.zoom.value, normalizedHeight / appState.zoom.value, appState.gridColor);\n  }\n\n  const groupsToBeAddedToFrame = new Set();\n  visibleElements.forEach(element => {\n    if (element.groupIds.length > 0 && appState.frameToHighlight && appState.selectedElementIds[element.id] && ((0,_frame__WEBPACK_IMPORTED_MODULE_17__.elementOverlapsWithFrame)(element, appState.frameToHighlight) || element.groupIds.find(groupId => groupsToBeAddedToFrame.has(groupId)))) {\n      element.groupIds.forEach(groupId => groupsToBeAddedToFrame.add(groupId));\n    }\n  }); // Paint visible elements\n\n  visibleElements.filter(el => !(0,_element_embeddable__WEBPACK_IMPORTED_MODULE_16__.isIframeLikeOrItsLabel)(el)).forEach(element => {\n    var _a;\n\n    try {\n      const frameId = element.frameId || ((_a = appState.frameToHighlight) === null || _a === void 0 ? void 0 : _a.id);\n\n      if (frameId && appState.frameRendering.enabled && appState.frameRendering.clip) {\n        context.save();\n        const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_17__.getTargetFrame)(element, appState); // TODO do we need to check isElementInFrame here?\n\n        if (frame && (0,_frame__WEBPACK_IMPORTED_MODULE_17__.isElementInFrame)(element, elements, appState)) {\n          frameClip(frame, context, renderConfig, appState);\n        }\n\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(element, rc, context, renderConfig, appState);\n        context.restore();\n      } else {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(element, rc, context, renderConfig, appState);\n      }\n\n      if (!isExporting) {\n        renderLinkIcon(element, context, appState);\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  }); // render embeddables on top\n\n  visibleElements.filter(el => (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_16__.isIframeLikeOrItsLabel)(el)).forEach(element => {\n    var _a;\n\n    try {\n      const render = () => {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(element, rc, context, renderConfig, appState);\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_15__.isIframeLikeElement)(element) && (isExporting || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_15__.isEmbeddableElement)(element) && !element.validated) && element.width && element.height) {\n          const label = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_16__.createPlaceholderEmbeddableLabel)(element);\n          (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(label, rc, context, renderConfig, appState);\n        }\n\n        if (!isExporting) {\n          renderLinkIcon(element, context, appState);\n        }\n      }; // - when exporting the whole canvas, we DO NOT apply clipping\n      // - when we are exporting a particular frame, apply clipping\n      //   if the containing frame is not selected, apply clipping\n\n\n      const frameId = element.frameId || ((_a = appState.frameToHighlight) === null || _a === void 0 ? void 0 : _a.id);\n\n      if (frameId && appState.frameRendering.enabled && appState.frameRendering.clip) {\n        context.save();\n        const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_17__.getTargetFrame)(element, appState);\n\n        if (frame && (0,_frame__WEBPACK_IMPORTED_MODULE_17__.isElementInFrame)(element, elements, appState)) {\n          frameClip(frame, context, renderConfig, appState);\n        }\n\n        render();\n        context.restore();\n      } else {\n        render();\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  });\n};\n/** throttled to animation framerate */\n\n\nconst renderInteractiveSceneThrottled = (0,_utils__WEBPACK_IMPORTED_MODULE_10__.throttleRAF)(config => {\n  var _a;\n\n  const ret = _renderInteractiveScene(config);\n\n  (_a = config.callback) === null || _a === void 0 ? void 0 : _a.call(config, ret);\n}, {\n  trailing: true\n});\n/**\r\n * Interactive scene is the ui-canvas where we render boundinb boxes, selections\r\n * and other ui stuff.\r\n */\n\nconst renderInteractiveScene = (renderConfig, throttle) => {\n  if (throttle) {\n    renderInteractiveSceneThrottled(renderConfig);\n    return undefined;\n  }\n\n  const ret = _renderInteractiveScene(renderConfig);\n\n  renderConfig.callback(ret);\n  return ret;\n};\n/** throttled to animation framerate */\n\nconst renderStaticSceneThrottled = (0,_utils__WEBPACK_IMPORTED_MODULE_10__.throttleRAF)(config => {\n  _renderStaticScene(config);\n}, {\n  trailing: true\n});\n/**\r\n * Static scene is the non-ui canvas where we render elements.\r\n */\n\nconst renderStaticScene = (renderConfig, throttle) => {\n  if (throttle) {\n    renderStaticSceneThrottled(renderConfig);\n    return;\n  }\n\n  _renderStaticScene(renderConfig);\n};\nconst cancelRender = () => {\n  renderInteractiveSceneThrottled.cancel();\n  renderStaticSceneThrottled.cancel();\n};\n\nconst renderTransformHandles = (context, renderConfig, appState, transformHandles, angle) => {\n  Object.keys(transformHandles).forEach(key => {\n    const transformHandle = transformHandles[key];\n\n    if (transformHandle !== undefined) {\n      const [x, y, width, height] = transformHandle;\n      context.save();\n      context.lineWidth = 1 / appState.zoom.value;\n\n      if (renderConfig.selectionColor) {\n        context.strokeStyle = renderConfig.selectionColor;\n      }\n\n      if (key === \"rotation\") {\n        fillCircle(context, x + width / 2, y + height / 2, width / 2); // prefer round corners if roundRect API is available\n      } else if (context.roundRect) {\n        context.beginPath();\n        context.roundRect(x, y, width, height, 2 / appState.zoom.value);\n        context.fill();\n        context.stroke();\n      } else {\n        strokeRectWithRotation(context, x, y, width, height, x + width / 2, y + height / 2, angle, true);\n      }\n\n      context.restore();\n    }\n  });\n};\n\nconst renderSelectionBorder = (context, appState, elementProperties, padding = DEFAULT_SPACING * 2) => {\n  const {\n    angle,\n    elementX1,\n    elementY1,\n    elementX2,\n    elementY2,\n    selectionColors,\n    cx,\n    cy,\n    dashed,\n    activeEmbeddable\n  } = elementProperties;\n  const elementWidth = elementX2 - elementX1;\n  const elementHeight = elementY2 - elementY1;\n  const linePadding = padding / appState.zoom.value;\n  const lineWidth = 8 / appState.zoom.value;\n  const spaceWidth = 4 / appState.zoom.value;\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  context.lineWidth = (activeEmbeddable ? 4 : 1) / appState.zoom.value;\n  const count = selectionColors.length;\n\n  for (let index = 0; index < count; ++index) {\n    context.strokeStyle = selectionColors[index];\n\n    if (dashed) {\n      context.setLineDash([lineWidth, spaceWidth + (lineWidth + spaceWidth) * (count - 1)]);\n    }\n\n    context.lineDashOffset = (lineWidth + spaceWidth) * index;\n    strokeRectWithRotation(context, elementX1 - linePadding, elementY1 - linePadding, elementWidth + linePadding * 2, elementHeight + linePadding * 2, cx, cy, angle);\n  }\n\n  context.restore();\n};\n\nconst renderBindingHighlight = (context, appState, suggestedBinding) => {\n  const renderHighlight = Array.isArray(suggestedBinding) ? renderBindingHighlightForSuggestedPointBinding : renderBindingHighlightForBindableElement;\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  renderHighlight(context, suggestedBinding);\n  context.restore();\n};\n\nconst renderBindingHighlightForBindableElement = (context, element) => {\n  const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n  const width = x2 - x1;\n  const height = y2 - y1;\n  const threshold = (0,_element_collision__WEBPACK_IMPORTED_MODULE_8__.maxBindingGap)(element, width, height); // So that we don't overlap the element itself\n\n  const strokeOffset = 4;\n  context.strokeStyle = \"rgba(128,128,128,.1)\"; //zsviczian\n\n  context.lineWidth = threshold - strokeOffset;\n  const padding = strokeOffset / 2 + threshold / 2;\n\n  switch (element.type) {\n    case \"rectangle\":\n    case \"text\":\n    case \"image\":\n    case \"iframe\":\n    case \"embeddable\":\n    case \"frame\":\n    case \"magicframe\":\n      strokeRectWithRotation(context, x1 - padding, y1 - padding, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n      break;\n\n    case \"diamond\":\n      const side = Math.hypot(width, height);\n      const wPadding = padding * side / height;\n      const hPadding = padding * side / width;\n      strokeDiamondWithRotation(context, width + wPadding * 2, height + hPadding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n      break;\n\n    case \"ellipse\":\n      strokeEllipseWithRotation(context, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n      break;\n  }\n};\n\nconst renderFrameHighlight = (context, appState, frame) => {\n  const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(frame);\n  const width = x2 - x1;\n  const height = y2 - y1;\n  context.strokeStyle = \"rgb(0,118,255)\";\n  context.lineWidth = _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.strokeWidth / appState.zoom.value;\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  strokeRectWithRotation(context, x1, y1, width, height, x1 + width / 2, y1 + height / 2, frame.angle, false, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.radius / appState.zoom.value);\n  context.restore();\n};\n\nconst renderElementsBoxHighlight = (context, appState, elements) => {\n  const individualElements = elements.filter(element => element.groupIds.length === 0);\n  const elementsInGroups = elements.filter(element => element.groupIds.length > 0);\n\n  const getSelectionFromElements = elements => {\n    const [elementX1, elementY1, elementX2, elementY2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(elements);\n    return {\n      angle: 0,\n      elementX1,\n      elementX2,\n      elementY1,\n      elementY2,\n      selectionColors: [\"rgb(0,118,255)\"],\n      dashed: false,\n      cx: elementX1 + (elementX2 - elementX1) / 2,\n      cy: elementY1 + (elementY2 - elementY1) / 2,\n      activeEmbeddable: false\n    };\n  };\n\n  const getSelectionForGroupId = groupId => {\n    const groupElements = (0,_groups__WEBPACK_IMPORTED_MODULE_7__.getElementsInGroup)(elements, groupId);\n    return getSelectionFromElements(groupElements);\n  };\n\n  Object.entries((0,_groups__WEBPACK_IMPORTED_MODULE_7__.selectGroupsFromGivenElements)(elementsInGroups, appState)).filter(([id, isSelected]) => isSelected).map(([id, isSelected]) => id).map(groupId => getSelectionForGroupId(groupId)).concat(individualElements.map(element => getSelectionFromElements([element]))).forEach(selection => renderSelectionBorder(context, appState, selection));\n};\n\nconst renderBindingHighlightForSuggestedPointBinding = (context, suggestedBinding) => {\n  const [element, startOrEnd, bindableElement] = suggestedBinding;\n  const threshold = (0,_element_collision__WEBPACK_IMPORTED_MODULE_8__.maxBindingGap)(bindableElement, bindableElement.width, bindableElement.height);\n  context.strokeStyle = \"rgba(0,0,0,0)\";\n  context.fillStyle = \"rgba(128,128,128,.1)\"; //zsviczian \"rgba(0,0,0,.05)\";\n\n  const pointIndices = startOrEnd === \"both\" ? [0, -1] : startOrEnd === \"start\" ? [0] : [-1];\n  pointIndices.forEach(index => {\n    const [x, y] = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointAtIndexGlobalCoordinates(element, index);\n    fillCircle(context, x, y, threshold);\n  });\n};\n\nlet linkCanvasCache;\n\nconst renderLinkIcon = (element, context, appState) => {\n  if (element.link && !appState.selectedElementIds[element.id]) {\n    const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n    const [x, y, width, height] = (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_13__.getLinkHandleFromCoords)([x1, y1, x2, y2], element.angle, appState);\n    const centerX = x + width / 2;\n    const centerY = y + height / 2;\n    context.save();\n    context.translate(appState.scrollX + centerX, appState.scrollY + centerY);\n    context.rotate(element.angle);\n\n    if (!linkCanvasCache || linkCanvasCache.zoom !== appState.zoom.value) {\n      linkCanvasCache = document.createElement(\"canvas\");\n      linkCanvasCache.zoom = appState.zoom.value;\n      linkCanvasCache.width = width * window.devicePixelRatio * appState.zoom.value;\n      linkCanvasCache.height = height * window.devicePixelRatio * appState.zoom.value;\n      const linkCanvasCacheContext = linkCanvasCache.getContext(\"2d\");\n      linkCanvasCacheContext.scale(window.devicePixelRatio * appState.zoom.value, window.devicePixelRatio * appState.zoom.value);\n      /*linkCanvasCacheContext.fillStyle = \"#fff\"; //zsviczian\r\n      linkCanvasCacheContext.fillRect(0, 0, width, height);*/\n      //zsviczian\n      //linkCanvasCacheContext.globalAlpha = appState.linkOpacity; //zsviczian\n\n      linkCanvasCacheContext.drawImage(_element_Hyperlink__WEBPACK_IMPORTED_MODULE_13__.EXTERNAL_LINK_IMG, 0, 0, width, height);\n      linkCanvasCacheContext.restore();\n      context.globalAlpha = appState.linkOpacity; //zsviczian\n\n      context.drawImage(linkCanvasCache, x - centerX, y - centerY, width, height);\n    } else {\n      context.globalAlpha = appState.linkOpacity; //zsviczian\n\n      context.drawImage(linkCanvasCache, x - centerX, y - centerY, width, height);\n    }\n\n    context.restore();\n  }\n}; // This should be only called for exporting purposes\n\n\nconst renderSceneToSvg = (elements, rsvg, svgRoot, files, renderConfig) => {\n  if (!svgRoot) {\n    return;\n  } // render elements\n\n\n  elements.filter(el => !(0,_element_embeddable__WEBPACK_IMPORTED_MODULE_16__.isIframeLikeOrItsLabel)(el)).forEach(element => {\n    if (!element.isDeleted) {\n      try {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElementToSvg)(element, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);\n      } catch (error) {\n        console.error(error);\n      }\n    }\n  }); // render embeddables on top\n\n  elements.filter(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_15__.isIframeLikeElement)(el)).forEach(element => {\n    if (!element.isDeleted) {\n      try {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElementToSvg)(element, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);\n      } catch (error) {\n        console.error(error);\n      }\n    }\n  });\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./renderer/renderScene.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"DEFAULT_SPACING\": () => (/* binding */ DEFAULT_SPACING),\n/* harmony export */   \"cancelRender\": () => (/* binding */ cancelRender),\n/* harmony export */   \"renderInteractiveScene\": () => (/* binding */ renderInteractiveScene),\n/* harmony export */   \"renderSceneToSvg\": () => (/* binding */ renderSceneToSvg),\n/* harmony export */   \"renderStaticScene\": () => (/* binding */ renderStaticScene)\n/* harmony export */ });\n/* harmony import */ var open_color__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! open-color */ \"../../node_modules/open-color/open-color.json\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _roundRect__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./roundRect */ \"./renderer/roundRect.ts\");\n/* harmony import */ var _scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../scene/scrollbars */ \"./scene/scrollbars.ts\");\n/* harmony import */ var _renderElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _clients__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../clients */ \"./clients.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../groups */ \"./groups.ts\");\n/* harmony import */ var _element_collision__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/collision */ \"./element/collision.ts\");\n/* harmony import */ var _element_transformHandles__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../element/transformHandles */ \"./element/transformHandles.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../types */ \"./types.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _element_Hyperlink__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../element/Hyperlink */ \"./element/Hyperlink.tsx\");\n/* harmony import */ var _renderSnaps__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./renderSnaps */ \"./renderer/renderSnaps.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../element/embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var canvas_roundrect_polyfill__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! canvas-roundrect-polyfill */ \"../../node_modules/canvas-roundrect-polyfill/roundRect.js\");\n/* harmony import */ var canvas_roundrect_polyfill__WEBPACK_IMPORTED_MODULE_18___default = /*#__PURE__*/__webpack_require__.n(canvas_roundrect_polyfill__WEBPACK_IMPORTED_MODULE_18__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst DEFAULT_SPACING = 2;\n\nconst strokeRectWithRotation = (context, x, y, width, height, cx, cy, angle, fill = false,\n/** should account for zoom */\nradius = 0) => {\n  context.save();\n  context.translate(cx, cy);\n  context.rotate(angle);\n\n  if (fill) {\n    context.fillRect(x - cx, y - cy, width, height);\n  }\n\n  if (radius && context.roundRect) {\n    context.beginPath();\n    context.roundRect(x - cx, y - cy, width, height, radius);\n    context.stroke();\n    context.closePath();\n  } else {\n    context.strokeRect(x - cx, y - cy, width, height);\n  }\n\n  context.restore();\n};\n\nconst strokeDiamondWithRotation = (context, width, height, cx, cy, angle) => {\n  context.save();\n  context.translate(cx, cy);\n  context.rotate(angle);\n  context.beginPath();\n  context.moveTo(0, height / 2);\n  context.lineTo(width / 2, 0);\n  context.lineTo(0, -height / 2);\n  context.lineTo(-width / 2, 0);\n  context.closePath();\n  context.stroke();\n  context.restore();\n};\n\nconst strokeEllipseWithRotation = (context, width, height, cx, cy, angle) => {\n  context.beginPath();\n  context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);\n  context.stroke();\n};\n\nconst fillCircle = (context, cx, cy, radius, stroke = true) => {\n  context.beginPath();\n  context.arc(cx, cy, radius, 0, Math.PI * 2);\n  context.fill();\n\n  if (stroke) {\n    context.stroke();\n  }\n};\n\nconst strokeGrid = (context, gridSize, scrollX, scrollY, zoom, width, height, GridLineColor) => {\n  var _a;\n\n  const BOLD_LINE_FREQUENCY = (_a = GridLineColor === null || GridLineColor === void 0 ? void 0 : GridLineColor.MajorGridFrequency) !== null && _a !== void 0 ? _a : 5; //zsviczian\n\n  /*enum GridLineColor {\r\n    Bold = \"#cccccc\",\r\n    Regular = \"#e5e5e5\",\r\n  }*/\n\n  const offsetX = -Math.round(zoom.value / gridSize) * gridSize + scrollX % gridSize;\n  const offsetY = -Math.round(zoom.value / gridSize) * gridSize + scrollY % gridSize;\n  const lineWidth = Math.min(1 / zoom.value, 1);\n  const spaceWidth = 1 / zoom.value;\n  const lineDash = [lineWidth * 3, spaceWidth + (lineWidth + spaceWidth)];\n  context.save();\n  context.lineWidth = lineWidth;\n\n  for (let x = offsetX; x < offsetX + width + gridSize * 2; x += gridSize) {\n    const isBold = Math.round(x - scrollX) % (BOLD_LINE_FREQUENCY * gridSize) === 0;\n    context.beginPath();\n    context.setLineDash(isBold ? [] : lineDash);\n    context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;\n    context.moveTo(x, offsetY - gridSize);\n    context.lineTo(x, offsetY + height + gridSize * 2);\n    context.stroke();\n  }\n\n  for (let y = offsetY; y < offsetY + height + gridSize * 2; y += gridSize) {\n    const isBold = Math.round(y - scrollY) % (BOLD_LINE_FREQUENCY * gridSize) === 0;\n    context.beginPath();\n    context.setLineDash(isBold ? [] : lineDash);\n    context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;\n    context.moveTo(offsetX - gridSize, y);\n    context.lineTo(offsetX + width + gridSize * 2, y);\n    context.stroke();\n  }\n\n  context.restore();\n};\n\nconst renderSingleLinearPoint = (context, appState, point, radius, isSelected, isPhantomPoint = false) => {\n  context.strokeStyle = \"#5e5ad8\";\n  context.setLineDash([]);\n  context.fillStyle = \"rgba(255, 255, 255, 0.9)\";\n\n  if (isSelected) {\n    context.fillStyle = \"rgba(134, 131, 226, 0.9)\";\n  } else if (isPhantomPoint) {\n    context.fillStyle = \"rgba(177, 151, 252, 0.7)\";\n  }\n\n  fillCircle(context, point[0], point[1], radius / appState.zoom.value, !isPhantomPoint);\n};\n\nconst renderLinearPointHandles = (context, appState, element) => {\n  if (!appState.selectedLinearElement) {\n    return;\n  }\n\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  context.lineWidth = 1 / appState.zoom.value;\n  const points = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointsGlobalCoordinates(element);\n  const {\n    POINT_HANDLE_SIZE\n  } = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor;\n  const radius = appState.editingLinearElement ? POINT_HANDLE_SIZE : POINT_HANDLE_SIZE / 2;\n  points.forEach((point, idx) => {\n    var _a, _b;\n\n    const isSelected = !!((_b = (_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) === null || _b === void 0 ? void 0 : _b.includes(idx));\n    renderSingleLinearPoint(context, appState, point, radius, isSelected);\n  }); //Rendering segment mid points\n\n  const midPoints = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getEditorMidPoints(element, appState).filter(midPoint => midPoint !== null);\n  midPoints.forEach(segmentMidPoint => {\n    var _a;\n\n    if (((_a = appState === null || appState === void 0 ? void 0 : appState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.segmentMidPointHoveredCoords) && _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.arePointsEqual(segmentMidPoint, appState.selectedLinearElement.segmentMidPointHoveredCoords)) {\n      // The order of renderingSingleLinearPoint and highLight points is different\n      // inside vs outside editor as hover states are different,\n      // in editor when hovered the original point is not visible as hover state fully covers it whereas outside the\n      // editor original point is visible and hover state is just an outer circle.\n      if (appState.editingLinearElement) {\n        renderSingleLinearPoint(context, appState, segmentMidPoint, radius, false);\n        highlightPoint(segmentMidPoint, context, appState);\n      } else {\n        highlightPoint(segmentMidPoint, context, appState);\n        renderSingleLinearPoint(context, appState, segmentMidPoint, radius, false);\n      }\n    } else if (appState.editingLinearElement || points.length === 2) {\n      renderSingleLinearPoint(context, appState, segmentMidPoint, POINT_HANDLE_SIZE / 2, false, true);\n    }\n  });\n  context.restore();\n};\n\nconst highlightPoint = (point, context, appState) => {\n  context.fillStyle = \"rgba(105, 101, 219, 0.4)\";\n  fillCircle(context, point[0], point[1], _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value, false);\n};\n\nconst renderLinearElementPointHighlight = (context, appState) => {\n  var _a, _b;\n\n  const {\n    elementId,\n    hoverPointIndex\n  } = appState.selectedLinearElement;\n\n  if ((_b = (_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) === null || _b === void 0 ? void 0 : _b.includes(hoverPointIndex)) {\n    return;\n  }\n\n  const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getElement(elementId);\n\n  if (!element) {\n    return;\n  }\n\n  const point = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointAtIndexGlobalCoordinates(element, hoverPointIndex);\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  highlightPoint(point, context, appState);\n  context.restore();\n};\n\nconst frameClip = (frame, context, renderConfig, appState) => {\n  context.translate(frame.x + appState.scrollX, frame.y + appState.scrollY);\n  context.beginPath();\n\n  if (context.roundRect) {\n    context.roundRect(0, 0, frame.width, frame.height, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.radius / appState.zoom.value);\n  } else {\n    context.rect(0, 0, frame.width, frame.height);\n  }\n\n  context.clip();\n  context.translate(-(frame.x + appState.scrollX), -(frame.y + appState.scrollY));\n};\n\nconst getNormalizedCanvasDimensions = (canvas, scale) => {\n  // When doing calculations based on canvas width we should used normalized one\n  return [canvas.width / scale, canvas.height / scale];\n};\n\nconst bootstrapCanvas = ({\n  canvas,\n  scale,\n  normalizedWidth,\n  normalizedHeight,\n  theme,\n  isExporting,\n  viewBackgroundColor\n}) => {\n  const context = canvas.getContext(\"2d\");\n  context.setTransform(1, 0, 0, 1, 0, 0);\n  context.scale(scale, scale);\n\n  if (isExporting && theme === \"dark\") {\n    context.filter = _constants__WEBPACK_IMPORTED_MODULE_12__.THEME_FILTER;\n  } // Paint background\n\n\n  if (typeof viewBackgroundColor === \"string\") {\n    const hasTransparence = viewBackgroundColor === \"transparent\" || viewBackgroundColor.length === 5 || // #RGBA\n    viewBackgroundColor.length === 9 || // #RRGGBBA\n    /(hsla|rgba)\\(/.test(viewBackgroundColor);\n\n    if (hasTransparence) {\n      context.clearRect(0, 0, normalizedWidth, normalizedHeight);\n    }\n\n    context.save();\n    context.fillStyle = viewBackgroundColor;\n    context.fillRect(0, 0, normalizedWidth, normalizedHeight);\n    context.restore();\n  } else {\n    context.clearRect(0, 0, normalizedWidth, normalizedHeight);\n  }\n\n  return context;\n};\n\nconst _renderInteractiveScene = ({\n  canvas,\n  elements,\n  visibleElements,\n  selectedElements,\n  scale,\n  appState,\n  renderConfig\n}) => {\n  var _a, _b;\n\n  if (canvas === null) {\n    return {\n      atLeastOneVisibleElement: false,\n      elements\n    };\n  }\n\n  const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(canvas, scale);\n  const context = bootstrapCanvas({\n    canvas,\n    scale,\n    normalizedWidth,\n    normalizedHeight\n  }); // Apply zoom\n\n  context.save();\n  context.scale(appState.zoom.value, appState.zoom.value);\n  let editingLinearElement = undefined;\n  visibleElements.forEach(element => {\n    var _a; // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to\n    // ShapeCache returns empty hence making sure that we get the\n    // correct element from visible elements\n\n\n    if (((_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) === element.id) {\n      if (element) {\n        editingLinearElement = element;\n      }\n    }\n  });\n\n  if (editingLinearElement) {\n    renderLinearPointHandles(context, appState, editingLinearElement);\n  } // Paint selection element\n\n\n  if (appState.selectionElement) {\n    try {\n      (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderSelectionElement)(appState.selectionElement, context, appState);\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  if (appState.isBindingEnabled) {\n    appState.suggestedBindings.filter(binding => binding != null).forEach(suggestedBinding => {\n      renderBindingHighlight(context, appState, suggestedBinding);\n    });\n  }\n\n  if (appState.frameToHighlight) {\n    renderFrameHighlight(context, appState, appState.frameToHighlight);\n  }\n\n  if (appState.elementsToHighlight) {\n    renderElementsBoxHighlight(context, appState, appState.elementsToHighlight);\n  }\n\n  const isFrameSelected = selectedElements.some(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_15__.isFrameLikeElement)(element)); // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to\n  // ShapeCache returns empty hence making sure that we get the\n  // correct element from visible elements\n\n  if (selectedElements.length === 1 && ((_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) === selectedElements[0].id) {\n    renderLinearPointHandles(context, appState, selectedElements[0]);\n  }\n\n  if (appState.selectedLinearElement && appState.selectedLinearElement.hoverPointIndex >= 0) {\n    renderLinearElementPointHighlight(context, appState);\n  } // Paint selected elements\n\n\n  if (!appState.multiElement && !appState.editingLinearElement) {\n    const showBoundingBox = (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_9__.shouldShowBoundingBox)(selectedElements, appState);\n    const isSingleLinearElementSelected = selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_15__.isLinearElement)(selectedElements[0]); // render selected linear element points\n\n    if (isSingleLinearElementSelected && ((_b = appState.selectedLinearElement) === null || _b === void 0 ? void 0 : _b.elementId) === selectedElements[0].id && !selectedElements[0].locked) {\n      renderLinearPointHandles(context, appState, selectedElements[0]);\n    }\n\n    const selectionColor = renderConfig.selectionColor || open_color__WEBPACK_IMPORTED_MODULE_0__.black;\n\n    if (showBoundingBox) {\n      // Optimisation for finding quickly relevant element ids\n      const locallySelectedIds = selectedElements.reduce((acc, element) => {\n        acc[element.id] = true;\n        return acc;\n      }, {});\n      const selections = elements.reduce((acc, element) => {\n        var _a;\n\n        const selectionColors = []; // local user\n\n        if (locallySelectedIds[element.id] && !(0,_groups__WEBPACK_IMPORTED_MODULE_7__.isSelectedViaGroup)(appState, element)) {\n          selectionColors.push(selectionColor);\n        } // remote users\n\n\n        if (renderConfig.remoteSelectedElementIds[element.id]) {\n          selectionColors.push(...renderConfig.remoteSelectedElementIds[element.id].map(socketId => {\n            const background = (0,_clients__WEBPACK_IMPORTED_MODULE_5__.getClientColor)(socketId);\n            return background;\n          }));\n        }\n\n        if (selectionColors.length) {\n          const [elementX1, elementY1, elementX2, elementY2, cx, cy] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, true);\n          acc.push({\n            angle: element.angle,\n            elementX1,\n            elementY1,\n            elementX2,\n            elementY2,\n            selectionColors,\n            dashed: !!renderConfig.remoteSelectedElementIds[element.id],\n            cx,\n            cy,\n            activeEmbeddable: ((_a = appState.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) === element && appState.activeEmbeddable.state === \"active\"\n          });\n        }\n\n        return acc;\n      }, []);\n\n      const addSelectionForGroupId = groupId => {\n        const groupElements = (0,_groups__WEBPACK_IMPORTED_MODULE_7__.getElementsInGroup)(elements, groupId);\n        const [elementX1, elementY1, elementX2, elementY2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(groupElements);\n        selections.push({\n          angle: 0,\n          elementX1,\n          elementX2,\n          elementY1,\n          elementY2,\n          selectionColors: [open_color__WEBPACK_IMPORTED_MODULE_0__.black],\n          dashed: true,\n          cx: elementX1 + (elementX2 - elementX1) / 2,\n          cy: elementY1 + (elementY2 - elementY1) / 2,\n          activeEmbeddable: false\n        });\n      };\n\n      for (const groupId of (0,_groups__WEBPACK_IMPORTED_MODULE_7__.getSelectedGroupIds)(appState)) {\n        // TODO: support multiplayer selected group IDs\n        addSelectionForGroupId(groupId);\n      }\n\n      if (appState.editingGroupId) {\n        addSelectionForGroupId(appState.editingGroupId);\n      }\n\n      selections.forEach(selection => renderSelectionBorder(context, appState, selection));\n    } // Paint resize transformHandles\n\n\n    context.save();\n    context.translate(appState.scrollX, appState.scrollY);\n\n    if (selectedElements.length === 1) {\n      context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n      const transformHandles = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getTransformHandles)(selectedElements[0], appState.zoom, \"mouse\");\n\n      if (!appState.viewModeEnabled && showBoundingBox) {\n        renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);\n      }\n    } else if (selectedElements.length > 1 && !appState.isRotating) {\n      const dashedLinePadding = DEFAULT_SPACING * 2 / appState.zoom.value;\n      context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n      const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(selectedElements);\n      const initialLineDash = context.getLineDash();\n      context.setLineDash([2 / appState.zoom.value]);\n      const lineWidth = context.lineWidth;\n      context.lineWidth = 1 / appState.zoom.value;\n      context.strokeStyle = selectionColor;\n      strokeRectWithRotation(context, x1 - dashedLinePadding, y1 - dashedLinePadding, x2 - x1 + dashedLinePadding * 2, y2 - y1 + dashedLinePadding * 2, (x1 + x2) / 2, (y1 + y2) / 2, 0);\n      context.lineWidth = lineWidth;\n      context.setLineDash(initialLineDash);\n      const transformHandles = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getTransformHandlesFromCoords)([x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2], 0, appState.zoom, \"mouse\", isFrameSelected ? _element_transformHandles__WEBPACK_IMPORTED_MODULE_9__.OMIT_SIDES_FOR_FRAME : _element__WEBPACK_IMPORTED_MODULE_1__.OMIT_SIDES_FOR_MULTIPLE_ELEMENTS);\n\n      if (selectedElements.some(element => !element.locked)) {\n        renderTransformHandles(context, renderConfig, appState, transformHandles, 0);\n      }\n    }\n\n    context.restore();\n  }\n\n  (0,_renderSnaps__WEBPACK_IMPORTED_MODULE_14__.renderSnaps)(context, appState); // Reset zoom\n\n  context.restore(); // Paint remote pointers\n\n  for (const clientId in renderConfig.remotePointerViewportCoords) {\n    let {\n      x,\n      y\n    } = renderConfig.remotePointerViewportCoords[clientId];\n    x -= appState.offsetLeft;\n    y -= appState.offsetTop;\n    const width = 11;\n    const height = 14;\n    const isOutOfBounds = x < 0 || x > normalizedWidth - width || y < 0 || y > normalizedHeight - height;\n    x = Math.max(x, 0);\n    x = Math.min(x, normalizedWidth - width);\n    y = Math.max(y, 0);\n    y = Math.min(y, normalizedHeight - height);\n    const background = (0,_clients__WEBPACK_IMPORTED_MODULE_5__.getClientColor)(clientId);\n    context.save();\n    context.strokeStyle = background;\n    context.fillStyle = background;\n    const userState = renderConfig.remotePointerUserStates[clientId];\n    const isInactive = isOutOfBounds || userState === _types__WEBPACK_IMPORTED_MODULE_11__.UserIdleState.IDLE || userState === _types__WEBPACK_IMPORTED_MODULE_11__.UserIdleState.AWAY;\n\n    if (isInactive) {\n      context.globalAlpha = 0.3;\n    }\n\n    if (renderConfig.remotePointerButton && renderConfig.remotePointerButton[clientId] === \"down\") {\n      context.beginPath();\n      context.arc(x, y, 15, 0, 2 * Math.PI, false);\n      context.lineWidth = 3;\n      context.strokeStyle = \"#ffffff88\";\n      context.stroke();\n      context.closePath();\n      context.beginPath();\n      context.arc(x, y, 15, 0, 2 * Math.PI, false);\n      context.lineWidth = 1;\n      context.strokeStyle = background;\n      context.stroke();\n      context.closePath();\n    } // Background (white outline) for arrow\n\n\n    context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n    context.strokeStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n    context.lineWidth = 6;\n    context.lineJoin = \"round\";\n    context.beginPath();\n    context.moveTo(x, y);\n    context.lineTo(x + 0, y + 14);\n    context.lineTo(x + 4, y + 9);\n    context.lineTo(x + 11, y + 8);\n    context.closePath();\n    context.stroke();\n    context.fill(); // Arrow\n\n    context.fillStyle = background;\n    context.strokeStyle = background;\n    context.lineWidth = 2;\n    context.lineJoin = \"round\";\n    context.beginPath();\n\n    if (isInactive) {\n      context.moveTo(x - 1, y - 1);\n      context.lineTo(x - 1, y + 15);\n      context.lineTo(x + 5, y + 10);\n      context.lineTo(x + 12, y + 9);\n      context.closePath();\n      context.fill();\n    } else {\n      context.moveTo(x, y);\n      context.lineTo(x + 0, y + 14);\n      context.lineTo(x + 4, y + 9);\n      context.lineTo(x + 11, y + 8);\n      context.closePath();\n      context.fill();\n      context.stroke();\n    }\n\n    const username = renderConfig.remotePointerUsernames[clientId] || \"\";\n\n    if (!isOutOfBounds && username) {\n      context.font = \"600 12px sans-serif\"; // font has to be set before context.measureText()\n\n      const offsetX = x + width / 2;\n      const offsetY = y + height + 2;\n      const paddingHorizontal = 5;\n      const paddingVertical = 3;\n      const measure = context.measureText(username);\n      const measureHeight = measure.actualBoundingBoxDescent + measure.actualBoundingBoxAscent;\n      const finalHeight = Math.max(measureHeight, 12);\n      const boxX = offsetX - 1;\n      const boxY = offsetY - 1;\n      const boxWidth = measure.width + 2 + paddingHorizontal * 2 + 2;\n      const boxHeight = finalHeight + 2 + paddingVertical * 2 + 2;\n\n      if (context.roundRect) {\n        context.beginPath();\n        context.roundRect(boxX, boxY, boxWidth, boxHeight, 8);\n        context.fillStyle = background;\n        context.fill();\n        context.strokeStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n        context.stroke();\n      } else {\n        (0,_roundRect__WEBPACK_IMPORTED_MODULE_2__.roundRect)(context, boxX, boxY, boxWidth, boxHeight, 8, open_color__WEBPACK_IMPORTED_MODULE_0__.white);\n      }\n\n      context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.black;\n      context.fillText(username, offsetX + paddingHorizontal + 1, offsetY + paddingVertical + measure.actualBoundingBoxAscent + Math.floor((finalHeight - measureHeight) / 2) + 2);\n    }\n\n    context.restore();\n    context.closePath();\n  } // Paint scrollbars\n\n\n  let scrollBars;\n\n  if (renderConfig.renderScrollbars) {\n    scrollBars = (0,_scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__.getScrollBars)(elements, normalizedWidth, normalizedHeight, appState);\n    context.save();\n    context.fillStyle = _scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__.SCROLLBAR_COLOR;\n    context.strokeStyle = \"rgba(255,255,255,0.8)\";\n    [scrollBars.horizontal, scrollBars.vertical].forEach(scrollBar => {\n      if (scrollBar) {\n        (0,_roundRect__WEBPACK_IMPORTED_MODULE_2__.roundRect)(context, scrollBar.x, scrollBar.y, scrollBar.width, scrollBar.height, _scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__.SCROLLBAR_WIDTH / 2);\n      }\n    });\n    context.restore();\n  }\n\n  return {\n    scrollBars,\n    atLeastOneVisibleElement: visibleElements.length > 0,\n    elements\n  };\n};\n\nconst _renderStaticScene = ({\n  canvas,\n  rc,\n  elements,\n  visibleElements,\n  scale,\n  appState,\n  renderConfig\n}) => {\n  if (canvas === null) {\n    return;\n  }\n\n  const {\n    renderGrid = true,\n    isExporting\n  } = renderConfig;\n  const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(canvas, scale);\n  const context = bootstrapCanvas({\n    canvas,\n    scale,\n    normalizedWidth,\n    normalizedHeight,\n    theme: appState.theme,\n    isExporting,\n    viewBackgroundColor: appState.viewBackgroundColor\n  }); // Apply zoom\n\n  context.scale(appState.zoom.value, appState.zoom.value); // Grid\n\n  if (renderGrid && appState.gridSize) {\n    strokeGrid(context, appState.gridSize, appState.scrollX, appState.scrollY, appState.zoom, normalizedWidth / appState.zoom.value, normalizedHeight / appState.zoom.value, appState.gridColor);\n  }\n\n  const groupsToBeAddedToFrame = new Set();\n  visibleElements.forEach(element => {\n    if (element.groupIds.length > 0 && appState.frameToHighlight && appState.selectedElementIds[element.id] && ((0,_frame__WEBPACK_IMPORTED_MODULE_17__.elementOverlapsWithFrame)(element, appState.frameToHighlight) || element.groupIds.find(groupId => groupsToBeAddedToFrame.has(groupId)))) {\n      element.groupIds.forEach(groupId => groupsToBeAddedToFrame.add(groupId));\n    }\n  }); // Paint visible elements\n\n  visibleElements.filter(el => !(0,_element_embeddable__WEBPACK_IMPORTED_MODULE_16__.isIframeLikeOrItsLabel)(el)).forEach(element => {\n    var _a;\n\n    try {\n      const frameId = element.frameId || ((_a = appState.frameToHighlight) === null || _a === void 0 ? void 0 : _a.id);\n\n      if (frameId && appState.frameRendering.enabled && appState.frameRendering.clip) {\n        context.save();\n        const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_17__.getTargetFrame)(element, appState); // TODO do we need to check isElementInFrame here?\n\n        if (frame && (0,_frame__WEBPACK_IMPORTED_MODULE_17__.isElementInFrame)(element, elements, appState)) {\n          frameClip(frame, context, renderConfig, appState);\n        }\n\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(element, rc, context, renderConfig, appState);\n        context.restore();\n      } else {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(element, rc, context, renderConfig, appState);\n      }\n\n      if (!isExporting) {\n        renderLinkIcon(element, context, appState);\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  }); // render embeddables on top\n\n  visibleElements.filter(el => (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_16__.isIframeLikeOrItsLabel)(el)).forEach(element => {\n    var _a;\n\n    try {\n      const render = () => {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(element, rc, context, renderConfig, appState);\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_15__.isIframeLikeElement)(element) && (isExporting || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_15__.isEmbeddableElement)(element) && renderConfig.embedsValidationStatus.get(element.id) !== true) && element.width && element.height) {\n          const label = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_16__.createPlaceholderEmbeddableLabel)(element);\n          (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(label, rc, context, renderConfig, appState);\n        }\n\n        if (!isExporting) {\n          renderLinkIcon(element, context, appState);\n        }\n      }; // - when exporting the whole canvas, we DO NOT apply clipping\n      // - when we are exporting a particular frame, apply clipping\n      //   if the containing frame is not selected, apply clipping\n\n\n      const frameId = element.frameId || ((_a = appState.frameToHighlight) === null || _a === void 0 ? void 0 : _a.id);\n\n      if (frameId && appState.frameRendering.enabled && appState.frameRendering.clip) {\n        context.save();\n        const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_17__.getTargetFrame)(element, appState);\n\n        if (frame && (0,_frame__WEBPACK_IMPORTED_MODULE_17__.isElementInFrame)(element, elements, appState)) {\n          frameClip(frame, context, renderConfig, appState);\n        }\n\n        render();\n        context.restore();\n      } else {\n        render();\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  });\n};\n/** throttled to animation framerate */\n\n\nconst renderInteractiveSceneThrottled = (0,_utils__WEBPACK_IMPORTED_MODULE_10__.throttleRAF)(config => {\n  var _a;\n\n  const ret = _renderInteractiveScene(config);\n\n  (_a = config.callback) === null || _a === void 0 ? void 0 : _a.call(config, ret);\n}, {\n  trailing: true\n});\n/**\r\n * Interactive scene is the ui-canvas where we render boundinb boxes, selections\r\n * and other ui stuff.\r\n */\n\nconst renderInteractiveScene = (renderConfig, throttle) => {\n  if (throttle) {\n    renderInteractiveSceneThrottled(renderConfig);\n    return undefined;\n  }\n\n  const ret = _renderInteractiveScene(renderConfig);\n\n  renderConfig.callback(ret);\n  return ret;\n};\n/** throttled to animation framerate */\n\nconst renderStaticSceneThrottled = (0,_utils__WEBPACK_IMPORTED_MODULE_10__.throttleRAF)(config => {\n  _renderStaticScene(config);\n}, {\n  trailing: true\n});\n/**\r\n * Static scene is the non-ui canvas where we render elements.\r\n */\n\nconst renderStaticScene = (renderConfig, throttle) => {\n  if (throttle) {\n    renderStaticSceneThrottled(renderConfig);\n    return;\n  }\n\n  _renderStaticScene(renderConfig);\n};\nconst cancelRender = () => {\n  renderInteractiveSceneThrottled.cancel();\n  renderStaticSceneThrottled.cancel();\n};\n\nconst renderTransformHandles = (context, renderConfig, appState, transformHandles, angle) => {\n  Object.keys(transformHandles).forEach(key => {\n    const transformHandle = transformHandles[key];\n\n    if (transformHandle !== undefined) {\n      const [x, y, width, height] = transformHandle;\n      context.save();\n      context.lineWidth = 1 / appState.zoom.value;\n\n      if (renderConfig.selectionColor) {\n        context.strokeStyle = renderConfig.selectionColor;\n      }\n\n      if (key === \"rotation\") {\n        fillCircle(context, x + width / 2, y + height / 2, width / 2); // prefer round corners if roundRect API is available\n      } else if (context.roundRect) {\n        context.beginPath();\n        context.roundRect(x, y, width, height, 2 / appState.zoom.value);\n        context.fill();\n        context.stroke();\n      } else {\n        strokeRectWithRotation(context, x, y, width, height, x + width / 2, y + height / 2, angle, true);\n      }\n\n      context.restore();\n    }\n  });\n};\n\nconst renderSelectionBorder = (context, appState, elementProperties, padding = DEFAULT_SPACING * 2) => {\n  const {\n    angle,\n    elementX1,\n    elementY1,\n    elementX2,\n    elementY2,\n    selectionColors,\n    cx,\n    cy,\n    dashed,\n    activeEmbeddable\n  } = elementProperties;\n  const elementWidth = elementX2 - elementX1;\n  const elementHeight = elementY2 - elementY1;\n  const linePadding = padding / appState.zoom.value;\n  const lineWidth = 8 / appState.zoom.value;\n  const spaceWidth = 4 / appState.zoom.value;\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  context.lineWidth = (activeEmbeddable ? 4 : 1) / appState.zoom.value;\n  const count = selectionColors.length;\n\n  for (let index = 0; index < count; ++index) {\n    context.strokeStyle = selectionColors[index];\n\n    if (dashed) {\n      context.setLineDash([lineWidth, spaceWidth + (lineWidth + spaceWidth) * (count - 1)]);\n    }\n\n    context.lineDashOffset = (lineWidth + spaceWidth) * index;\n    strokeRectWithRotation(context, elementX1 - linePadding, elementY1 - linePadding, elementWidth + linePadding * 2, elementHeight + linePadding * 2, cx, cy, angle);\n  }\n\n  context.restore();\n};\n\nconst renderBindingHighlight = (context, appState, suggestedBinding) => {\n  const renderHighlight = Array.isArray(suggestedBinding) ? renderBindingHighlightForSuggestedPointBinding : renderBindingHighlightForBindableElement;\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  renderHighlight(context, suggestedBinding);\n  context.restore();\n};\n\nconst renderBindingHighlightForBindableElement = (context, element) => {\n  const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n  const width = x2 - x1;\n  const height = y2 - y1;\n  const threshold = (0,_element_collision__WEBPACK_IMPORTED_MODULE_8__.maxBindingGap)(element, width, height); // So that we don't overlap the element itself\n\n  const strokeOffset = 4;\n  context.strokeStyle = \"rgba(128,128,128,.1)\"; //zsviczian\n\n  context.lineWidth = threshold - strokeOffset;\n  const padding = strokeOffset / 2 + threshold / 2;\n\n  switch (element.type) {\n    case \"rectangle\":\n    case \"text\":\n    case \"image\":\n    case \"iframe\":\n    case \"embeddable\":\n    case \"frame\":\n    case \"magicframe\":\n      strokeRectWithRotation(context, x1 - padding, y1 - padding, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n      break;\n\n    case \"diamond\":\n      const side = Math.hypot(width, height);\n      const wPadding = padding * side / height;\n      const hPadding = padding * side / width;\n      strokeDiamondWithRotation(context, width + wPadding * 2, height + hPadding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n      break;\n\n    case \"ellipse\":\n      strokeEllipseWithRotation(context, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n      break;\n  }\n};\n\nconst renderFrameHighlight = (context, appState, frame) => {\n  const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(frame);\n  const width = x2 - x1;\n  const height = y2 - y1;\n  context.strokeStyle = \"rgb(0,118,255)\";\n  context.lineWidth = _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.strokeWidth / appState.zoom.value;\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  strokeRectWithRotation(context, x1, y1, width, height, x1 + width / 2, y1 + height / 2, frame.angle, false, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.radius / appState.zoom.value);\n  context.restore();\n};\n\nconst renderElementsBoxHighlight = (context, appState, elements) => {\n  const individualElements = elements.filter(element => element.groupIds.length === 0);\n  const elementsInGroups = elements.filter(element => element.groupIds.length > 0);\n\n  const getSelectionFromElements = elements => {\n    const [elementX1, elementY1, elementX2, elementY2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(elements);\n    return {\n      angle: 0,\n      elementX1,\n      elementX2,\n      elementY1,\n      elementY2,\n      selectionColors: [\"rgb(0,118,255)\"],\n      dashed: false,\n      cx: elementX1 + (elementX2 - elementX1) / 2,\n      cy: elementY1 + (elementY2 - elementY1) / 2,\n      activeEmbeddable: false\n    };\n  };\n\n  const getSelectionForGroupId = groupId => {\n    const groupElements = (0,_groups__WEBPACK_IMPORTED_MODULE_7__.getElementsInGroup)(elements, groupId);\n    return getSelectionFromElements(groupElements);\n  };\n\n  Object.entries((0,_groups__WEBPACK_IMPORTED_MODULE_7__.selectGroupsFromGivenElements)(elementsInGroups, appState)).filter(([id, isSelected]) => isSelected).map(([id, isSelected]) => id).map(groupId => getSelectionForGroupId(groupId)).concat(individualElements.map(element => getSelectionFromElements([element]))).forEach(selection => renderSelectionBorder(context, appState, selection));\n};\n\nconst renderBindingHighlightForSuggestedPointBinding = (context, suggestedBinding) => {\n  const [element, startOrEnd, bindableElement] = suggestedBinding;\n  const threshold = (0,_element_collision__WEBPACK_IMPORTED_MODULE_8__.maxBindingGap)(bindableElement, bindableElement.width, bindableElement.height);\n  context.strokeStyle = \"rgba(0,0,0,0)\";\n  context.fillStyle = \"rgba(128,128,128,.1)\"; //zsviczian \"rgba(0,0,0,.05)\";\n\n  const pointIndices = startOrEnd === \"both\" ? [0, -1] : startOrEnd === \"start\" ? [0] : [-1];\n  pointIndices.forEach(index => {\n    const [x, y] = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointAtIndexGlobalCoordinates(element, index);\n    fillCircle(context, x, y, threshold);\n  });\n};\n\nlet linkCanvasCache;\n\nconst renderLinkIcon = (element, context, appState) => {\n  if (element.link && !appState.selectedElementIds[element.id]) {\n    const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n    const [x, y, width, height] = (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_13__.getLinkHandleFromCoords)([x1, y1, x2, y2], element.angle, appState);\n    const centerX = x + width / 2;\n    const centerY = y + height / 2;\n    context.save();\n    context.translate(appState.scrollX + centerX, appState.scrollY + centerY);\n    context.rotate(element.angle);\n\n    if (!linkCanvasCache || linkCanvasCache.zoom !== appState.zoom.value) {\n      linkCanvasCache = document.createElement(\"canvas\");\n      linkCanvasCache.zoom = appState.zoom.value;\n      linkCanvasCache.width = width * window.devicePixelRatio * appState.zoom.value;\n      linkCanvasCache.height = height * window.devicePixelRatio * appState.zoom.value;\n      const linkCanvasCacheContext = linkCanvasCache.getContext(\"2d\");\n      linkCanvasCacheContext.scale(window.devicePixelRatio * appState.zoom.value, window.devicePixelRatio * appState.zoom.value);\n      /*linkCanvasCacheContext.fillStyle = \"#fff\"; //zsviczian\r\n      linkCanvasCacheContext.fillRect(0, 0, width, height);*/\n      //zsviczian\n      //linkCanvasCacheContext.globalAlpha = appState.linkOpacity; //zsviczian\n\n      linkCanvasCacheContext.drawImage(_element_Hyperlink__WEBPACK_IMPORTED_MODULE_13__.EXTERNAL_LINK_IMG, 0, 0, width, height);\n      linkCanvasCacheContext.restore();\n      context.globalAlpha = appState.linkOpacity; //zsviczian\n\n      context.drawImage(linkCanvasCache, x - centerX, y - centerY, width, height);\n    } else {\n      context.globalAlpha = appState.linkOpacity; //zsviczian\n\n      context.drawImage(linkCanvasCache, x - centerX, y - centerY, width, height);\n    }\n\n    context.restore();\n  }\n}; // This should be only called for exporting purposes\n\n\nconst renderSceneToSvg = (elements, rsvg, svgRoot, files, renderConfig) => {\n  if (!svgRoot) {\n    return;\n  } // render elements\n\n\n  elements.filter(el => !(0,_element_embeddable__WEBPACK_IMPORTED_MODULE_16__.isIframeLikeOrItsLabel)(el)).forEach(element => {\n    if (!element.isDeleted) {\n      try {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElementToSvg)(element, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);\n      } catch (error) {\n        console.error(error);\n      }\n    }\n  }); // render embeddables on top\n\n  elements.filter(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_15__.isIframeLikeElement)(el)).forEach(element => {\n    if (!element.isDeleted) {\n      try {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElementToSvg)(element, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);\n      } catch (error) {\n        console.error(error);\n      }\n    }\n  });\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./renderer/renderScene.ts?");
 
 /***/ }),
 
@@ -3005,7 +3049,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"_generateElementShape\": () => (/* binding */ _generateElementShape),\n/* harmony export */   \"generateRoughOptions\": () => (/* binding */ generateRoughOptions)\n/* harmony export */ });\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var _renderer_renderElement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../renderer/renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var points_on_curve__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! points-on-curve */ \"./node_modules/points-on-curve/lib/index.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _comparisons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./comparisons */ \"./scene/comparisons.ts\");\n\n\n\n\n\n\n\n\n\nconst getDashArrayDashed = strokeWidth => [8, 8 + strokeWidth];\n\nconst getDashArrayDotted = strokeWidth => [1.5, 6 + strokeWidth];\n\nfunction adjustRoughness(element) {\n  const roughness = element.roughness;\n  const maxSize = Math.max(element.width, element.height);\n  const minSize = Math.min(element.width, element.height); // don't reduce roughness if\n\n  if ( // both sides relatively big\n  minSize >= 20 && maxSize >= 50 || // is round & both sides above 15px\n  minSize >= 15 && !!element.roundness && (0,_comparisons__WEBPACK_IMPORTED_MODULE_7__.canChangeRoundness)(element.type) || // relatively long linear element\n  (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isLinearElement)(element) && maxSize >= 50) {\n    return roughness;\n  }\n\n  return Math.min(roughness / (maxSize < 10 ? 3 : 2), 2.5);\n}\n\nconst generateRoughOptions = (element, continuousPath = false) => {\n  const options = {\n    seed: element.seed,\n    strokeLineDash: element.strokeStyle === \"dashed\" ? getDashArrayDashed(element.strokeWidth) : element.strokeStyle === \"dotted\" ? getDashArrayDotted(element.strokeWidth) : undefined,\n    // for non-solid strokes, disable multiStroke because it tends to make\n    // dashes/dots overlay each other\n    disableMultiStroke: element.strokeStyle !== \"solid\",\n    // for non-solid strokes, increase the width a bit to make it visually\n    // similar to solid strokes, because we're also disabling multiStroke\n    strokeWidth: element.strokeStyle !== \"solid\" ? element.strokeWidth + 0.5 : element.strokeWidth,\n    // when increasing strokeWidth, we must explicitly set fillWeight and\n    // hachureGap because if not specified, roughjs uses strokeWidth to\n    // calculate them (and we don't want the fills to be modified)\n    fillWeight: element.strokeWidth / 2,\n    hachureGap: element.strokeWidth * 4,\n    roughness: adjustRoughness(element),\n    stroke: element.strokeColor,\n    preserveVertices: continuousPath || element.roughness < _constants__WEBPACK_IMPORTED_MODULE_5__.ROUGHNESS.cartoonist\n  };\n\n  switch (element.type) {\n    case \"rectangle\":\n    case \"iframe\":\n    case \"embeddable\":\n    case \"diamond\":\n    case \"ellipse\":\n      {\n        options.fillStyle = element.fillStyle;\n        options.fill = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isTransparent)(element.backgroundColor) ? undefined : element.backgroundColor;\n\n        if (element.type === \"ellipse\") {\n          options.curveFitting = 1;\n        }\n\n        return options;\n      }\n\n    case \"line\":\n    case \"freedraw\":\n      {\n        if ((0,_math__WEBPACK_IMPORTED_MODULE_1__.isPathALoop)(element.points)) {\n          options.fillStyle = element.fillStyle;\n          options.fill = element.backgroundColor === \"transparent\" ? undefined : element.backgroundColor;\n        }\n\n        return options;\n      }\n\n    case \"arrow\":\n      return options;\n\n    default:\n      {\n        throw new Error(`Unimplemented type ${element.type}`);\n      }\n  }\n};\n\nconst modifyIframeLikeForRoughOptions = (element, isExporting) => {\n  if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isIframeLikeElement)(element) && (isExporting || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isEmbeddableElement)(element) && !element.validated) && (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isTransparent)(element.backgroundColor) && (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isTransparent)(element.strokeColor)) {\n    return Object.assign(Object.assign({}, element), {\n      roughness: 0,\n      backgroundColor: \"#d3d3d3\",\n      fillStyle: \"solid\"\n    });\n  } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isIframeElement)(element)) {\n    return Object.assign(Object.assign({}, element), {\n      strokeColor: (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isTransparent)(element.strokeColor) ? \"#000000\" : element.strokeColor,\n      backgroundColor: (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isTransparent)(element.backgroundColor) ? \"#f4f4f6\" : element.backgroundColor\n    });\n  }\n\n  return element;\n};\n\nconst getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor) => {\n  const arrowheadPoints = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getArrowheadPoints)(element, shape, position, arrowhead);\n\n  if (arrowheadPoints === null) {\n    return [];\n  }\n\n  switch (arrowhead) {\n    case \"dot\":\n    case \"circle\":\n    case \"circle_outline\":\n      {\n        const [x, y, diameter] = arrowheadPoints; // always use solid stroke for arrowhead\n\n        delete options.strokeLineDash;\n        return [generator.circle(x, y, diameter, Object.assign(Object.assign({}, options), {\n          fill: arrowhead === \"circle_outline\" ? canvasBackgroundColor : element.strokeColor,\n          fillStyle: \"solid\",\n          stroke: element.strokeColor,\n          roughness: Math.min(0.5, options.roughness || 0)\n        }))];\n      }\n\n    case \"triangle\":\n    case \"triangle_outline\":\n      {\n        const [x, y, x2, y2, x3, y3] = arrowheadPoints; // always use solid stroke for arrowhead\n\n        delete options.strokeLineDash;\n        return [generator.polygon([[x, y], [x2, y2], [x3, y3], [x, y]], Object.assign(Object.assign({}, options), {\n          fill: arrowhead === \"triangle_outline\" ? canvasBackgroundColor : element.strokeColor,\n          fillStyle: \"solid\",\n          roughness: Math.min(1, options.roughness || 0)\n        }))];\n      }\n\n    case \"diamond\":\n    case \"diamond_outline\":\n      {\n        const [x, y, x2, y2, x3, y3, x4, y4] = arrowheadPoints; // always use solid stroke for arrowhead\n\n        delete options.strokeLineDash;\n        return [generator.polygon([[x, y], [x2, y2], [x3, y3], [x4, y4], [x, y]], Object.assign(Object.assign({}, options), {\n          fill: arrowhead === \"diamond_outline\" ? canvasBackgroundColor : element.strokeColor,\n          fillStyle: \"solid\",\n          roughness: Math.min(1, options.roughness || 0)\n        }))];\n      }\n\n    case \"bar\":\n    case \"arrow\":\n    default:\n      {\n        const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;\n\n        if (element.strokeStyle === \"dotted\") {\n          // for dotted arrows caps, reduce gap to make it more legible\n          const dash = getDashArrayDotted(element.strokeWidth - 1);\n          options.strokeLineDash = [dash[0], dash[1] - 1];\n        } else {\n          // for solid/dashed, keep solid arrow cap\n          delete options.strokeLineDash;\n        }\n\n        options.roughness = Math.min(1, options.roughness || 0);\n        return [generator.line(x3, y3, x2, y2, options), generator.line(x4, y4, x2, y2, options)];\n      }\n  }\n};\n/**\r\n * Generates the roughjs shape for given element.\r\n *\r\n * Low-level. Use `ShapeCache.generateElementShape` instead.\r\n *\r\n * @private\r\n */\n\n\nconst _generateElementShape = (element, generator, {\n  isExporting,\n  canvasBackgroundColor\n}) => {\n  switch (element.type) {\n    case \"rectangle\":\n    case \"iframe\":\n    case \"embeddable\":\n      {\n        let shape; // this is for rendering the stroke/bg of the embeddable, especially\n        // when the src url is not set\n\n        if (element.roundness) {\n          const w = element.width;\n          const h = element.height;\n          const r = (0,_math__WEBPACK_IMPORTED_MODULE_1__.getCornerRadius)(Math.min(w, h), element);\n          shape = generator.path(`M ${r} 0 L ${w - r} 0 Q ${w} 0, ${w} ${r} L ${w} ${h - r} Q ${w} ${h}, ${w - r} ${h} L ${r} ${h} Q 0 ${h}, 0 ${h - r} L 0 ${r} Q 0 0, ${r} 0`, generateRoughOptions(modifyIframeLikeForRoughOptions(element, isExporting), true));\n        } else {\n          shape = generator.rectangle(0, 0, element.width, element.height, generateRoughOptions(modifyIframeLikeForRoughOptions(element, isExporting), false));\n        }\n\n        return shape;\n      }\n\n    case \"diamond\":\n      {\n        let shape;\n        const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getDiamondPoints)(element);\n\n        if (element.roundness) {\n          const verticalRadius = (0,_math__WEBPACK_IMPORTED_MODULE_1__.getCornerRadius)(Math.abs(topX - leftX), element);\n          const horizontalRadius = (0,_math__WEBPACK_IMPORTED_MODULE_1__.getCornerRadius)(Math.abs(rightY - topY), element);\n          shape = generator.path(`M ${topX + verticalRadius} ${topY + horizontalRadius} L ${rightX - verticalRadius} ${rightY - horizontalRadius}\n            C ${rightX} ${rightY}, ${rightX} ${rightY}, ${rightX - verticalRadius} ${rightY + horizontalRadius}\n            L ${bottomX + verticalRadius} ${bottomY - horizontalRadius}\n            C ${bottomX} ${bottomY}, ${bottomX} ${bottomY}, ${bottomX - verticalRadius} ${bottomY - horizontalRadius}\n            L ${leftX + verticalRadius} ${leftY + horizontalRadius}\n            C ${leftX} ${leftY}, ${leftX} ${leftY}, ${leftX + verticalRadius} ${leftY - horizontalRadius}\n            L ${topX - verticalRadius} ${topY + horizontalRadius}\n            C ${topX} ${topY}, ${topX} ${topY}, ${topX + verticalRadius} ${topY + horizontalRadius}`, generateRoughOptions(element, true));\n        } else {\n          shape = generator.polygon([[topX, topY], [rightX, rightY], [bottomX, bottomY], [leftX, leftY]], generateRoughOptions(element));\n        }\n\n        return shape;\n      }\n\n    case \"ellipse\":\n      {\n        const shape = generator.ellipse(element.width / 2, element.height / 2, element.width, element.height, generateRoughOptions(element));\n        return shape;\n      }\n\n    case \"line\":\n    case \"arrow\":\n      {\n        let shape;\n        const options = generateRoughOptions(element); // points array can be empty in the beginning, so it is important to add\n        // initial position to it\n\n        const points = element.points.length ? element.points : [[0, 0]]; // curve is always the first element\n        // this simplifies finding the curve for an element\n\n        if (!element.roundness) {\n          if (options.fill) {\n            shape = [generator.polygon(points, options)];\n          } else {\n            shape = [generator.linearPath(points, options)];\n          }\n        } else {\n          shape = [generator.curve(points, options)];\n        } // add lines only in arrow\n\n\n        if (element.type === \"arrow\") {\n          const {\n            startArrowhead = null,\n            endArrowhead = \"arrow\"\n          } = element;\n\n          if (startArrowhead !== null) {\n            const shapes = getArrowheadShapes(element, shape, \"start\", startArrowhead, generator, options, canvasBackgroundColor);\n            shape.push(...shapes);\n          }\n\n          if (endArrowhead !== null) {\n            if (endArrowhead === undefined) {// Hey, we have an old arrow here!\n            }\n\n            const shapes = getArrowheadShapes(element, shape, \"end\", endArrowhead, generator, options, canvasBackgroundColor);\n            shape.push(...shapes);\n          }\n        }\n\n        return shape;\n      }\n\n    case \"freedraw\":\n      {\n        let shape;\n        (0,_renderer_renderElement__WEBPACK_IMPORTED_MODULE_2__.generateFreeDrawShape)(element);\n\n        if ((0,_math__WEBPACK_IMPORTED_MODULE_1__.isPathALoop)(element.points)) {\n          // generate rough polygon to fill freedraw shape\n          const simplifiedPoints = (0,points_on_curve__WEBPACK_IMPORTED_MODULE_4__.simplify)(element.points, 0.75);\n          shape = generator.curve(simplifiedPoints, Object.assign(Object.assign({}, generateRoughOptions(element)), {\n            stroke: \"none\"\n          }));\n        } else {\n          shape = null;\n        }\n\n        return shape;\n      }\n\n    case \"frame\":\n    case \"magicframe\":\n    case \"text\":\n    case \"image\":\n      {\n        const shape = null; // we return (and cache) `null` to make sure we don't regenerate\n        // `element.canvas` on rerenders\n\n        return shape;\n      }\n\n    default:\n      {\n        (0,_utils__WEBPACK_IMPORTED_MODULE_3__.assertNever)(element, `generateElementShape(): Unimplemented type ${element === null || element === void 0 ? void 0 : element.type}`);\n        return null;\n      }\n  }\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./scene/Shape.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"_generateElementShape\": () => (/* binding */ _generateElementShape),\n/* harmony export */   \"generateRoughOptions\": () => (/* binding */ generateRoughOptions)\n/* harmony export */ });\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var _renderer_renderElement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../renderer/renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var points_on_curve__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! points-on-curve */ \"./node_modules/points-on-curve/lib/index.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _comparisons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./comparisons */ \"./scene/comparisons.ts\");\n\n\n\n\n\n\n\n\n\nconst getDashArrayDashed = strokeWidth => [8, 8 + strokeWidth];\n\nconst getDashArrayDotted = strokeWidth => [1.5, 6 + strokeWidth];\n\nfunction adjustRoughness(element) {\n  const roughness = element.roughness;\n  const maxSize = Math.max(element.width, element.height);\n  const minSize = Math.min(element.width, element.height); // don't reduce roughness if\n\n  if ( // both sides relatively big\n  minSize >= 20 && maxSize >= 50 || // is round & both sides above 15px\n  minSize >= 15 && !!element.roundness && (0,_comparisons__WEBPACK_IMPORTED_MODULE_7__.canChangeRoundness)(element.type) || // relatively long linear element\n  (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isLinearElement)(element) && maxSize >= 50) {\n    return roughness;\n  }\n\n  return Math.min(roughness / (maxSize < 10 ? 3 : 2), 2.5);\n}\n\nconst generateRoughOptions = (element, continuousPath = false) => {\n  const options = {\n    seed: element.seed,\n    strokeLineDash: element.strokeStyle === \"dashed\" ? getDashArrayDashed(element.strokeWidth) : element.strokeStyle === \"dotted\" ? getDashArrayDotted(element.strokeWidth) : undefined,\n    // for non-solid strokes, disable multiStroke because it tends to make\n    // dashes/dots overlay each other\n    disableMultiStroke: element.strokeStyle !== \"solid\",\n    // for non-solid strokes, increase the width a bit to make it visually\n    // similar to solid strokes, because we're also disabling multiStroke\n    strokeWidth: element.strokeStyle !== \"solid\" ? element.strokeWidth + 0.5 : element.strokeWidth,\n    // when increasing strokeWidth, we must explicitly set fillWeight and\n    // hachureGap because if not specified, roughjs uses strokeWidth to\n    // calculate them (and we don't want the fills to be modified)\n    fillWeight: element.strokeWidth / 2,\n    hachureGap: element.strokeWidth * 4,\n    roughness: adjustRoughness(element),\n    stroke: element.strokeColor,\n    preserveVertices: continuousPath || element.roughness < _constants__WEBPACK_IMPORTED_MODULE_5__.ROUGHNESS.cartoonist\n  };\n\n  switch (element.type) {\n    case \"rectangle\":\n    case \"iframe\":\n    case \"embeddable\":\n    case \"diamond\":\n    case \"ellipse\":\n      {\n        options.fillStyle = element.fillStyle;\n        options.fill = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isTransparent)(element.backgroundColor) ? undefined : element.backgroundColor;\n\n        if (element.type === \"ellipse\") {\n          options.curveFitting = 1;\n        }\n\n        return options;\n      }\n\n    case \"line\":\n    case \"freedraw\":\n      {\n        if ((0,_math__WEBPACK_IMPORTED_MODULE_1__.isPathALoop)(element.points)) {\n          options.fillStyle = element.fillStyle;\n          options.fill = element.backgroundColor === \"transparent\" ? undefined : element.backgroundColor;\n        }\n\n        return options;\n      }\n\n    case \"arrow\":\n      return options;\n\n    default:\n      {\n        throw new Error(`Unimplemented type ${element.type}`);\n      }\n  }\n};\n\nconst modifyIframeLikeForRoughOptions = (element, isExporting, embedsValidationStatus) => {\n  if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isIframeLikeElement)(element) && (isExporting || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isEmbeddableElement)(element) && (embedsValidationStatus === null || embedsValidationStatus === void 0 ? void 0 : embedsValidationStatus.get(element.id)) !== true) && (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isTransparent)(element.backgroundColor) && (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isTransparent)(element.strokeColor)) {\n    return Object.assign(Object.assign({}, element), {\n      roughness: 0,\n      backgroundColor: \"#d3d3d3\",\n      fillStyle: \"solid\"\n    });\n  } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isIframeElement)(element)) {\n    return Object.assign(Object.assign({}, element), {\n      strokeColor: (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isTransparent)(element.strokeColor) ? \"#000000\" : element.strokeColor,\n      backgroundColor: (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isTransparent)(element.backgroundColor) ? \"#f4f4f6\" : element.backgroundColor\n    });\n  }\n\n  return element;\n};\n\nconst getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor) => {\n  const arrowheadPoints = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getArrowheadPoints)(element, shape, position, arrowhead);\n\n  if (arrowheadPoints === null) {\n    return [];\n  }\n\n  switch (arrowhead) {\n    case \"dot\":\n    case \"circle\":\n    case \"circle_outline\":\n      {\n        const [x, y, diameter] = arrowheadPoints; // always use solid stroke for arrowhead\n\n        delete options.strokeLineDash;\n        return [generator.circle(x, y, diameter, Object.assign(Object.assign({}, options), {\n          fill: arrowhead === \"circle_outline\" ? canvasBackgroundColor : element.strokeColor,\n          fillStyle: \"solid\",\n          stroke: element.strokeColor,\n          roughness: Math.min(0.5, options.roughness || 0)\n        }))];\n      }\n\n    case \"triangle\":\n    case \"triangle_outline\":\n      {\n        const [x, y, x2, y2, x3, y3] = arrowheadPoints; // always use solid stroke for arrowhead\n\n        delete options.strokeLineDash;\n        return [generator.polygon([[x, y], [x2, y2], [x3, y3], [x, y]], Object.assign(Object.assign({}, options), {\n          fill: arrowhead === \"triangle_outline\" ? canvasBackgroundColor : element.strokeColor,\n          fillStyle: \"solid\",\n          roughness: Math.min(1, options.roughness || 0)\n        }))];\n      }\n\n    case \"diamond\":\n    case \"diamond_outline\":\n      {\n        const [x, y, x2, y2, x3, y3, x4, y4] = arrowheadPoints; // always use solid stroke for arrowhead\n\n        delete options.strokeLineDash;\n        return [generator.polygon([[x, y], [x2, y2], [x3, y3], [x4, y4], [x, y]], Object.assign(Object.assign({}, options), {\n          fill: arrowhead === \"diamond_outline\" ? canvasBackgroundColor : element.strokeColor,\n          fillStyle: \"solid\",\n          roughness: Math.min(1, options.roughness || 0)\n        }))];\n      }\n\n    case \"bar\":\n    case \"arrow\":\n    default:\n      {\n        const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;\n\n        if (element.strokeStyle === \"dotted\") {\n          // for dotted arrows caps, reduce gap to make it more legible\n          const dash = getDashArrayDotted(element.strokeWidth - 1);\n          options.strokeLineDash = [dash[0], dash[1] - 1];\n        } else {\n          // for solid/dashed, keep solid arrow cap\n          delete options.strokeLineDash;\n        }\n\n        options.roughness = Math.min(1, options.roughness || 0);\n        return [generator.line(x3, y3, x2, y2, options), generator.line(x4, y4, x2, y2, options)];\n      }\n  }\n};\n/**\r\n * Generates the roughjs shape for given element.\r\n *\r\n * Low-level. Use `ShapeCache.generateElementShape` instead.\r\n *\r\n * @private\r\n */\n\n\nconst _generateElementShape = (element, generator, {\n  isExporting,\n  canvasBackgroundColor,\n  embedsValidationStatus\n}) => {\n  switch (element.type) {\n    case \"rectangle\":\n    case \"iframe\":\n    case \"embeddable\":\n      {\n        let shape; // this is for rendering the stroke/bg of the embeddable, especially\n        // when the src url is not set\n\n        if (element.roundness) {\n          const w = element.width;\n          const h = element.height;\n          const r = (0,_math__WEBPACK_IMPORTED_MODULE_1__.getCornerRadius)(Math.min(w, h), element);\n          shape = generator.path(`M ${r} 0 L ${w - r} 0 Q ${w} 0, ${w} ${r} L ${w} ${h - r} Q ${w} ${h}, ${w - r} ${h} L ${r} ${h} Q 0 ${h}, 0 ${h - r} L 0 ${r} Q 0 0, ${r} 0`, generateRoughOptions(modifyIframeLikeForRoughOptions(element, isExporting, embedsValidationStatus), true));\n        } else {\n          shape = generator.rectangle(0, 0, element.width, element.height, generateRoughOptions(modifyIframeLikeForRoughOptions(element, isExporting, embedsValidationStatus), false));\n        }\n\n        return shape;\n      }\n\n    case \"diamond\":\n      {\n        let shape;\n        const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getDiamondPoints)(element);\n\n        if (element.roundness) {\n          const verticalRadius = (0,_math__WEBPACK_IMPORTED_MODULE_1__.getCornerRadius)(Math.abs(topX - leftX), element);\n          const horizontalRadius = (0,_math__WEBPACK_IMPORTED_MODULE_1__.getCornerRadius)(Math.abs(rightY - topY), element);\n          shape = generator.path(`M ${topX + verticalRadius} ${topY + horizontalRadius} L ${rightX - verticalRadius} ${rightY - horizontalRadius}\n            C ${rightX} ${rightY}, ${rightX} ${rightY}, ${rightX - verticalRadius} ${rightY + horizontalRadius}\n            L ${bottomX + verticalRadius} ${bottomY - horizontalRadius}\n            C ${bottomX} ${bottomY}, ${bottomX} ${bottomY}, ${bottomX - verticalRadius} ${bottomY - horizontalRadius}\n            L ${leftX + verticalRadius} ${leftY + horizontalRadius}\n            C ${leftX} ${leftY}, ${leftX} ${leftY}, ${leftX + verticalRadius} ${leftY - horizontalRadius}\n            L ${topX - verticalRadius} ${topY + horizontalRadius}\n            C ${topX} ${topY}, ${topX} ${topY}, ${topX + verticalRadius} ${topY + horizontalRadius}`, generateRoughOptions(element, true));\n        } else {\n          shape = generator.polygon([[topX, topY], [rightX, rightY], [bottomX, bottomY], [leftX, leftY]], generateRoughOptions(element));\n        }\n\n        return shape;\n      }\n\n    case \"ellipse\":\n      {\n        const shape = generator.ellipse(element.width / 2, element.height / 2, element.width, element.height, generateRoughOptions(element));\n        return shape;\n      }\n\n    case \"line\":\n    case \"arrow\":\n      {\n        let shape;\n        const options = generateRoughOptions(element); // points array can be empty in the beginning, so it is important to add\n        // initial position to it\n\n        const points = element.points.length ? element.points : [[0, 0]]; // curve is always the first element\n        // this simplifies finding the curve for an element\n\n        if (!element.roundness) {\n          if (options.fill) {\n            shape = [generator.polygon(points, options)];\n          } else {\n            shape = [generator.linearPath(points, options)];\n          }\n        } else {\n          shape = [generator.curve(points, options)];\n        } // add lines only in arrow\n\n\n        if (element.type === \"arrow\") {\n          const {\n            startArrowhead = null,\n            endArrowhead = \"arrow\"\n          } = element;\n\n          if (startArrowhead !== null) {\n            const shapes = getArrowheadShapes(element, shape, \"start\", startArrowhead, generator, options, canvasBackgroundColor);\n            shape.push(...shapes);\n          }\n\n          if (endArrowhead !== null) {\n            if (endArrowhead === undefined) {// Hey, we have an old arrow here!\n            }\n\n            const shapes = getArrowheadShapes(element, shape, \"end\", endArrowhead, generator, options, canvasBackgroundColor);\n            shape.push(...shapes);\n          }\n        }\n\n        return shape;\n      }\n\n    case \"freedraw\":\n      {\n        let shape;\n        (0,_renderer_renderElement__WEBPACK_IMPORTED_MODULE_2__.generateFreeDrawShape)(element);\n\n        if ((0,_math__WEBPACK_IMPORTED_MODULE_1__.isPathALoop)(element.points)) {\n          // generate rough polygon to fill freedraw shape\n          const simplifiedPoints = (0,points_on_curve__WEBPACK_IMPORTED_MODULE_4__.simplify)(element.points, 0.75);\n          shape = generator.curve(simplifiedPoints, Object.assign(Object.assign({}, generateRoughOptions(element)), {\n            stroke: \"none\"\n          }));\n        } else {\n          shape = null;\n        }\n\n        return shape;\n      }\n\n    case \"frame\":\n    case \"magicframe\":\n    case \"text\":\n    case \"image\":\n      {\n        const shape = null; // we return (and cache) `null` to make sure we don't regenerate\n        // `element.canvas` on rerenders\n\n        return shape;\n      }\n\n    default:\n      {\n        (0,_utils__WEBPACK_IMPORTED_MODULE_3__.assertNever)(element, `generateElementShape(): Unimplemented type ${element === null || element === void 0 ? void 0 : element.type}`);\n        return null;\n      }\n  }\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./scene/Shape.ts?");
 
 /***/ }),
 
@@ -3016,7 +3060,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ShapeCache\": () => (/* binding */ ShapeCache)\n/* harmony export */ });\n/* harmony import */ var roughjs_bin_generator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! roughjs/bin/generator */ \"../../node_modules/roughjs/bin/generator.js\");\n/* harmony import */ var _renderer_renderElement__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../renderer/renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _Shape__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Shape */ \"./scene/Shape.ts\");\n/* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../colors */ \"./colors.ts\");\n\n\n\n\nclass ShapeCache {}\nShapeCache.rg = new roughjs_bin_generator__WEBPACK_IMPORTED_MODULE_0__.RoughGenerator();\nShapeCache.cache = new WeakMap();\n/**\r\n * Retrieves shape from cache if available. Use this only if shape\r\n * is optional and you have a fallback in case it's not cached.\r\n */\n\nShapeCache.get = element => {\n  return ShapeCache.cache.get(element);\n};\n\nShapeCache.set = (element, shape) => ShapeCache.cache.set(element, shape);\n\nShapeCache.delete = element => ShapeCache.cache.delete(element);\n\nShapeCache.destroy = () => {\n  ShapeCache.cache = new WeakMap();\n};\n/**\r\n * Generates & caches shape for element if not already cached, otherwise\r\n * returns cached shape.\r\n */\n\n\nShapeCache.generateElementShape = (element, renderConfig) => {\n  // when exporting, always regenerated to guarantee the latest shape\n  const cachedShape = (renderConfig === null || renderConfig === void 0 ? void 0 : renderConfig.isExporting) ? undefined : ShapeCache.get(element); // `null` indicates no rc shape applicable for this element type,\n  // but it's considered a valid cache value (= do not regenerate)\n\n  if (cachedShape !== undefined) {\n    return cachedShape;\n  }\n\n  _renderer_renderElement__WEBPACK_IMPORTED_MODULE_1__.elementWithCanvasCache[\"delete\"](element);\n\n  const shape = (0,_Shape__WEBPACK_IMPORTED_MODULE_2__._generateElementShape)(element, ShapeCache.rg, renderConfig || {\n    isExporting: false,\n    canvasBackgroundColor: _colors__WEBPACK_IMPORTED_MODULE_3__.COLOR_PALETTE.white\n  });\n\n  ShapeCache.cache.set(element, shape);\n  return shape;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./scene/ShapeCache.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ShapeCache\": () => (/* binding */ ShapeCache)\n/* harmony export */ });\n/* harmony import */ var roughjs_bin_generator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! roughjs/bin/generator */ \"../../node_modules/roughjs/bin/generator.js\");\n/* harmony import */ var _renderer_renderElement__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../renderer/renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _Shape__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Shape */ \"./scene/Shape.ts\");\n/* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../colors */ \"./colors.ts\");\n\n\n\n\nclass ShapeCache {}\nShapeCache.rg = new roughjs_bin_generator__WEBPACK_IMPORTED_MODULE_0__.RoughGenerator();\nShapeCache.cache = new WeakMap();\n/**\r\n * Retrieves shape from cache if available. Use this only if shape\r\n * is optional and you have a fallback in case it's not cached.\r\n */\n\nShapeCache.get = element => {\n  return ShapeCache.cache.get(element);\n};\n\nShapeCache.set = (element, shape) => ShapeCache.cache.set(element, shape);\n\nShapeCache.delete = element => ShapeCache.cache.delete(element);\n\nShapeCache.destroy = () => {\n  ShapeCache.cache = new WeakMap();\n};\n/**\r\n * Generates & caches shape for element if not already cached, otherwise\r\n * returns cached shape.\r\n */\n\n\nShapeCache.generateElementShape = (element, renderConfig) => {\n  // when exporting, always regenerated to guarantee the latest shape\n  const cachedShape = (renderConfig === null || renderConfig === void 0 ? void 0 : renderConfig.isExporting) ? undefined : ShapeCache.get(element); // `null` indicates no rc shape applicable for this element type,\n  // but it's considered a valid cache value (= do not regenerate)\n\n  if (cachedShape !== undefined) {\n    return cachedShape;\n  }\n\n  _renderer_renderElement__WEBPACK_IMPORTED_MODULE_1__.elementWithCanvasCache[\"delete\"](element);\n\n  const shape = (0,_Shape__WEBPACK_IMPORTED_MODULE_2__._generateElementShape)(element, ShapeCache.rg, renderConfig || {\n    isExporting: false,\n    canvasBackgroundColor: _colors__WEBPACK_IMPORTED_MODULE_3__.COLOR_PALETTE.white,\n    embedsValidationStatus: null\n  });\n\n  ShapeCache.cache.set(element, shape);\n  return shape;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./scene/ShapeCache.ts?");
 
 /***/ }),
 
@@ -3038,7 +3082,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"exportToCanvas\": () => (/* binding */ exportToCanvas),\n/* harmony export */   \"exportToSvg\": () => (/* binding */ exportToSvg),\n/* harmony export */   \"getExportSize\": () => (/* binding */ getExportSize)\n/* harmony export */ });\n/* harmony import */ var roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! roughjs/bin/rough */ \"../../node_modules/roughjs/bin/rough.js\");\n/* harmony import */ var _element_bounds__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element/bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _renderer_renderScene__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../renderer/renderScene */ \"./renderer/renderScene.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _data_json__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../data/json */ \"./data/json.ts\");\n/* harmony import */ var _element_image__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../element/image */ \"./element/image.ts\");\n/* harmony import */ var _utils_export__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/export */ \"../utils/export.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _Scene__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;\n/*const createScene = (\r\n  //zsviczian\r\n  elements: readonly NonDeletedExcalidrawElement[],\r\n): Scene | null => {\r\n  if (!elements || Scene.getScene(elements[0])) {\r\n    return null;\r\n  }\r\n  const scene = new Scene();\r\n  scene.replaceAllElements(elements);\r\n  elements?.forEach((el) => Scene.mapElementToScene(el, scene));\r\n  return scene;\r\n};*/\n// getContainerElement and getBoundTextElement and potentially other helpers\n// depend on `Scene` which will not be available when these pure utils are\n// called outside initialized Excalidraw editor instance or even if called\n// from inside Excalidraw if the elements were never cached by Scene (e.g.\n// for library elements).\n//\n// As such, before passing the elements down, we need to initialize a custom\n// Scene instance and assign them to it.\n//\n// FIXME This is a super hacky workaround and we'll need to rewrite this soon.\n\nconst __createSceneForElementsHack__ = elements => {\n  const scene = new _Scene__WEBPACK_IMPORTED_MODULE_12__[\"default\"](); // we can't duplicate elements to regenerate ids because we need the\n  // orig ids when embedding. So we do another hack of not mapping element\n  // ids to Scene instances so that we don't override the editor elements\n  // mapping.\n  // We still need to clone the objects themselves to regen references.\n\n  scene.replaceAllElements((0,_utils__WEBPACK_IMPORTED_MODULE_3__.cloneJSON)(elements), false);\n  return scene;\n};\n\nconst truncateText = (element, maxWidth) => {\n  if (element.width <= maxWidth) {\n    return element;\n  }\n\n  const canvas = document.createElement(\"canvas\");\n  const ctx = canvas.getContext(\"2d\");\n  ctx.font = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.getFontString)({\n    fontFamily: element.fontFamily,\n    fontSize: element.fontSize\n  });\n  let text = element.text;\n  const metrics = ctx.measureText(text);\n\n  if (metrics.width > maxWidth) {\n    // we iterate from the right, removing characters one by one instead\n    // of bulding the string up. This assumes that it's more likely\n    // your frame names will overflow by not that many characters\n    // (if ever), so it sohuld be faster this way.\n    for (let i = text.length; i > 0; i--) {\n      const newText = `${text.slice(0, i)}...`;\n\n      if (ctx.measureText(newText).width <= maxWidth) {\n        text = newText;\n        break;\n      }\n    }\n  }\n\n  return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(element, {\n    text,\n    width: maxWidth\n  });\n};\n/**\r\n * When exporting frames, we need to render frame labels which are currently\r\n * being rendered in DOM when editing. Adding the labels as regular text\r\n * elements seems like a simple hack. In the future we'll want to move to\r\n * proper canvas rendering, even within editor (instead of DOM).\r\n */\n\n\nconst addFrameLabelsAsTextElements = (elements, opts) => {\n  var _a, _b, _c;\n\n  const nextElements = [];\n  let frameIndex = 0;\n  let magicFrameIndex = 0;\n\n  for (const element of elements) {\n    if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isFrameLikeElement)(element)) {\n      if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isFrameElement)(element)) {\n        frameIndex++;\n      } else {\n        magicFrameIndex++;\n      }\n\n      let textElement = (0,_element__WEBPACK_IMPORTED_MODULE_10__.newTextElement)({\n        x: element.x,\n        y: element.y - _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameOffsetY,\n        fontFamily: _constants__WEBPACK_IMPORTED_MODULE_4__.FONT_FAMILY.Assistant,\n        fontSize: _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameFontSize,\n        lineHeight: _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameLineHeight,\n        strokeColor: (_c = (_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.frameColor) === null || _b === void 0 ? void 0 : _b.nameColor) !== null && _c !== void 0 ? _c : opts.exportWithDarkMode ? _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameColorDarkTheme : _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameColorLightTheme,\n        text: (0,_frame__WEBPACK_IMPORTED_MODULE_9__.getFrameLikeTitle)(element, (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isFrameElement)(element) ? frameIndex : magicFrameIndex),\n        rawText: (0,_frame__WEBPACK_IMPORTED_MODULE_9__.getFrameLikeTitle)( //zsviczian\n        element, (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isFrameElement)(element) ? frameIndex : magicFrameIndex)\n      });\n      textElement.y -= textElement.height;\n      textElement = truncateText(textElement, element.width);\n      nextElements.push(textElement);\n    }\n\n    nextElements.push(element);\n  }\n\n  return nextElements;\n};\n\nconst getFrameRenderingConfig = (exportingFrame, frameRendering) => {\n  frameRendering = frameRendering || (0,_appState__WEBPACK_IMPORTED_MODULE_5__.getDefaultAppState)().frameRendering;\n  return {\n    enabled: exportingFrame ? true : frameRendering.enabled,\n    outline: exportingFrame ? false : frameRendering.outline,\n    name: exportingFrame ? false : frameRendering.name,\n    clip: exportingFrame ? true : frameRendering.clip\n  };\n};\n\nconst prepareElementsForRender = ({\n  elements,\n  exportingFrame,\n  frameRendering,\n  exportWithDarkMode\n}) => {\n  let nextElements;\n\n  if (exportingFrame) {\n    nextElements = (0,_utils_export__WEBPACK_IMPORTED_MODULE_8__.elementsOverlappingBBox)({\n      elements,\n      bounds: exportingFrame,\n      type: \"overlap\"\n    });\n  } else if (frameRendering.enabled && frameRendering.name) {\n    nextElements = addFrameLabelsAsTextElements(elements, {\n      exportWithDarkMode\n    });\n  } else {\n    nextElements = elements;\n  }\n\n  return nextElements;\n};\n\nconst exportToCanvas = async (elements, appState, files, {\n  exportBackground,\n  exportPadding = _constants__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_EXPORT_PADDING,\n  viewBackgroundColor,\n  exportingFrame\n}, createCanvas = (width, height) => {\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = width * appState.exportScale;\n  canvas.height = height * appState.exportScale;\n  return {\n    canvas,\n    scale: appState.exportScale\n  };\n}) => {\n  var _a;\n\n  const tempScene = __createSceneForElementsHack__(elements);\n\n  elements = tempScene.getNonDeletedElements();\n  const frameRendering = getFrameRenderingConfig(exportingFrame !== null && exportingFrame !== void 0 ? exportingFrame : null, (_a = appState.frameRendering) !== null && _a !== void 0 ? _a : null);\n  const elementsForRender = prepareElementsForRender({\n    elements,\n    exportingFrame,\n    exportWithDarkMode: appState.exportWithDarkMode,\n    frameRendering\n  });\n\n  if (exportingFrame) {\n    exportPadding = 0;\n  }\n\n  const [minX, minY, width, height] = getCanvasSize(exportingFrame ? [exportingFrame] : (0,_frame__WEBPACK_IMPORTED_MODULE_9__.getRootElements)(elementsForRender), exportPadding);\n  const {\n    canvas,\n    scale = 1\n  } = createCanvas(width, height);\n  const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_5__.getDefaultAppState)();\n  const {\n    imageCache\n  } = await (0,_element_image__WEBPACK_IMPORTED_MODULE_7__.updateImageCache)({\n    imageCache: new Map(),\n    fileIds: (0,_element_image__WEBPACK_IMPORTED_MODULE_7__.getInitializedImageElements)(elementsForRender).map(element => element.fileId),\n    files\n  });\n  (0,_renderer_renderScene__WEBPACK_IMPORTED_MODULE_2__.renderStaticScene)({\n    canvas,\n    rc: roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_0__[\"default\"].canvas(canvas),\n    elements: elementsForRender,\n    visibleElements: elementsForRender,\n    scale,\n    appState: Object.assign(Object.assign({}, appState), {\n      frameRendering,\n      viewBackgroundColor: exportBackground ? viewBackgroundColor : null,\n      scrollX: -minX + exportPadding,\n      scrollY: -minY + exportPadding,\n      zoom: defaultAppState.zoom,\n      shouldCacheIgnoreZoom: false,\n      theme: appState.exportWithDarkMode ? \"dark\" : \"light\"\n    }),\n    renderConfig: {\n      canvasBackgroundColor: viewBackgroundColor,\n      imageCache,\n      renderGrid: false,\n      isExporting: true\n    }\n  });\n  tempScene.destroy();\n  return canvas;\n};\nconst exportToSvg = async (elements, appState, files, opts) => {\n  var _a, _b, _c;\n\n  const tempScene = __createSceneForElementsHack__(elements);\n\n  elements = tempScene.getNonDeletedElements();\n  const frameRendering = getFrameRenderingConfig((_a = opts === null || opts === void 0 ? void 0 : opts.exportingFrame) !== null && _a !== void 0 ? _a : null, (_b = appState.frameRendering) !== null && _b !== void 0 ? _b : null);\n  let {\n    exportPadding = _constants__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_EXPORT_PADDING,\n    exportWithDarkMode = false,\n    viewBackgroundColor,\n    exportScale = 1,\n    exportEmbedScene\n  } = appState;\n  const {\n    exportingFrame = null\n  } = opts || {};\n  const elementsForRender = prepareElementsForRender({\n    elements,\n    exportingFrame,\n    exportWithDarkMode,\n    frameRendering\n  });\n\n  if (exportingFrame) {\n    exportPadding = 0;\n  }\n\n  let metadata = \"\"; // we need to serialize the \"original\" elements before we put them through\n  // the tempScene hack which duplicates and regenerates ids\n\n  if (exportEmbedScene) {\n    try {\n      metadata = await (await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ../data/image */ \"./data/image.ts\"))).encodeSvgMetadata({\n        // when embedding scene, we want to embed the origionally supplied\n        // elements which don't contain the temp frame labels.\n        // But it also requires that the exportToSvg is being supplied with\n        // only the elements that we're exporting, and no extra.\n        text: (0,_data_json__WEBPACK_IMPORTED_MODULE_6__.serializeAsJSON)(elements, appState, files || {}, \"local\")\n      });\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  const [minX, minY, width, height] = getCanvasSize(exportingFrame ? [exportingFrame] : (0,_frame__WEBPACK_IMPORTED_MODULE_9__.getRootElements)(elementsForRender), exportPadding); // initialize SVG root\n\n  const svgRoot = document.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_4__.SVG_NS, \"svg\");\n  svgRoot.setAttribute(\"version\", \"1.1\");\n  svgRoot.setAttribute(\"xmlns\", _constants__WEBPACK_IMPORTED_MODULE_4__.SVG_NS);\n  svgRoot.setAttribute(\"viewBox\", `0 0 ${width} ${height}`);\n  svgRoot.setAttribute(\"width\", `${width * exportScale}`);\n  svgRoot.setAttribute(\"height\", `${height * exportScale}`);\n\n  if (exportWithDarkMode) {\n    svgRoot.setAttribute(\"filter\", _constants__WEBPACK_IMPORTED_MODULE_4__.THEME_FILTER);\n  }\n\n  const assetPath = \"https://excalidraw.com/\"; // Asset path needs to be determined only when using package\n\n  /*if (process.env.IS_EXCALIDRAW_NPM_PACKAGE) { //zsviczian\r\n    assetPath =\r\n      window.EXCALIDRAW_ASSET_PATH ||\r\n      `https://unpkg.com/${import.meta.env.VITE_PKG_NAME}@${\r\n        import.meta.env.PKG_VERSION\r\n      }`;\r\n        if (assetPath?.startsWith(\"/\")) {\r\n      assetPath = assetPath.replace(\"/\", `${window.location.origin}/`);\r\n    }\r\n    assetPath = `${assetPath}/dist/excalidraw-assets/`;\r\n  }*/\n  //zsviczian\n\n  const offsetX = -minX + exportPadding;\n  const offsetY = -minY + exportPadding;\n  const frameElements = (0,_frame__WEBPACK_IMPORTED_MODULE_9__.getFrameLikeElements)(elements);\n  let exportingFrameClipPath = \"\";\n\n  for (const frame of frameElements) {\n    const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(frame);\n    const cx = (x2 - x1) / 2 - (frame.x - x1);\n    const cy = (y2 - y1) / 2 - (frame.y - y1);\n    exportingFrameClipPath += `<clipPath id=${frame.id}>\n            <rect transform=\"translate(${frame.x + offsetX} ${frame.y + offsetY}) rotate(${frame.angle} ${cx} ${cy})\"\n          width=\"${frame.width}\"\n          height=\"${frame.height}\"\n          >\n          </rect>\n        </clipPath>`;\n  }\n\n  svgRoot.innerHTML = `\n  ${SVG_EXPORT_TAG}\n  ${metadata}\n  <defs>\n    <style class=\"style-fonts\">\n      @font-face {\n        font-family: \"Virgil\";\n        src: url(\"${assetPath}Virgil.woff2\");\n      }\n      @font-face {\n        font-family: \"Cascadia\";\n        src: url(\"${assetPath}Cascadia.woff2\");\n      }\n      @font-face {\n        font-family: \"Assistant\";\n        src: url(\"${assetPath}Assistant-Regular.woff2\");\n      }\n    </style>\n    ${exportingFrameClipPath}\n  </defs>\n  `; // render background rect\n\n  if (appState.exportBackground && viewBackgroundColor) {\n    const rect = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_4__.SVG_NS, \"rect\");\n    rect.setAttribute(\"x\", \"0\");\n    rect.setAttribute(\"y\", \"0\");\n    rect.setAttribute(\"width\", `${width}`);\n    rect.setAttribute(\"height\", `${height}`);\n    rect.setAttribute(\"fill\", viewBackgroundColor);\n    svgRoot.appendChild(rect);\n  }\n\n  const rsvg = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_0__[\"default\"].svg(svgRoot);\n  (0,_renderer_renderScene__WEBPACK_IMPORTED_MODULE_2__.renderSceneToSvg)(elementsForRender, rsvg, svgRoot, files || {}, {\n    offsetX,\n    offsetY,\n    isExporting: true,\n    exportWithDarkMode,\n    renderEmbeddables: (_c = opts === null || opts === void 0 ? void 0 : opts.renderEmbeddables) !== null && _c !== void 0 ? _c : false,\n    frameRendering,\n    frameColor: appState.frameColor,\n    canvasBackgroundColor: viewBackgroundColor\n  });\n  tempScene.destroy();\n  return svgRoot;\n}; // calculate smallest area to fit the contents in\n\nconst getCanvasSize = (elements, exportPadding) => {\n  const [minX, minY, maxX, maxY] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(elements);\n  const width = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.distance)(minX, maxX) + exportPadding * 2;\n  const height = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.distance)(minY, maxY) + exportPadding * 2;\n  return [minX, minY, width, height];\n};\n\nconst getExportSize = (elements, exportPadding, scale) => {\n  const [,, width, height] = getCanvasSize(elements, exportPadding).map(dimension => Math.trunc(dimension * scale));\n  return [width, height];\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./scene/export.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"exportToCanvas\": () => (/* binding */ exportToCanvas),\n/* harmony export */   \"exportToSvg\": () => (/* binding */ exportToSvg),\n/* harmony export */   \"getExportSize\": () => (/* binding */ getExportSize)\n/* harmony export */ });\n/* harmony import */ var roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! roughjs/bin/rough */ \"../../node_modules/roughjs/bin/rough.js\");\n/* harmony import */ var _element_bounds__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element/bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _renderer_renderScene__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../renderer/renderScene */ \"./renderer/renderScene.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _data_json__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../data/json */ \"./data/json.ts\");\n/* harmony import */ var _element_image__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../element/image */ \"./element/image.ts\");\n/* harmony import */ var _utils_export__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/export */ \"../utils/export.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _Scene__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;\n/*const createScene = (\r\n  //zsviczian\r\n  elements: readonly NonDeletedExcalidrawElement[],\r\n): Scene | null => {\r\n  if (!elements || Scene.getScene(elements[0])) {\r\n    return null;\r\n  }\r\n  const scene = new Scene();\r\n  scene.replaceAllElements(elements);\r\n  elements?.forEach((el) => Scene.mapElementToScene(el, scene));\r\n  return scene;\r\n};*/\n// getContainerElement and getBoundTextElement and potentially other helpers\n// depend on `Scene` which will not be available when these pure utils are\n// called outside initialized Excalidraw editor instance or even if called\n// from inside Excalidraw if the elements were never cached by Scene (e.g.\n// for library elements).\n//\n// As such, before passing the elements down, we need to initialize a custom\n// Scene instance and assign them to it.\n//\n// FIXME This is a super hacky workaround and we'll need to rewrite this soon.\n\nconst __createSceneForElementsHack__ = elements => {\n  const scene = new _Scene__WEBPACK_IMPORTED_MODULE_12__[\"default\"](); // we can't duplicate elements to regenerate ids because we need the\n  // orig ids when embedding. So we do another hack of not mapping element\n  // ids to Scene instances so that we don't override the editor elements\n  // mapping.\n  // We still need to clone the objects themselves to regen references.\n\n  scene.replaceAllElements((0,_utils__WEBPACK_IMPORTED_MODULE_3__.cloneJSON)(elements), false);\n  return scene;\n};\n\nconst truncateText = (element, maxWidth) => {\n  if (element.width <= maxWidth) {\n    return element;\n  }\n\n  const canvas = document.createElement(\"canvas\");\n  const ctx = canvas.getContext(\"2d\");\n  ctx.font = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.getFontString)({\n    fontFamily: element.fontFamily,\n    fontSize: element.fontSize\n  });\n  let text = element.text;\n  const metrics = ctx.measureText(text);\n\n  if (metrics.width > maxWidth) {\n    // we iterate from the right, removing characters one by one instead\n    // of bulding the string up. This assumes that it's more likely\n    // your frame names will overflow by not that many characters\n    // (if ever), so it sohuld be faster this way.\n    for (let i = text.length; i > 0; i--) {\n      const newText = `${text.slice(0, i)}...`;\n\n      if (ctx.measureText(newText).width <= maxWidth) {\n        text = newText;\n        break;\n      }\n    }\n  }\n\n  return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(element, {\n    text,\n    width: maxWidth\n  });\n};\n/**\r\n * When exporting frames, we need to render frame labels which are currently\r\n * being rendered in DOM when editing. Adding the labels as regular text\r\n * elements seems like a simple hack. In the future we'll want to move to\r\n * proper canvas rendering, even within editor (instead of DOM).\r\n */\n\n\nconst addFrameLabelsAsTextElements = (elements, opts) => {\n  var _a, _b, _c;\n\n  const nextElements = [];\n  let frameIndex = 0;\n  let magicFrameIndex = 0;\n\n  for (const element of elements) {\n    if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isFrameLikeElement)(element)) {\n      if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isFrameElement)(element)) {\n        frameIndex++;\n      } else {\n        magicFrameIndex++;\n      }\n\n      let textElement = (0,_element__WEBPACK_IMPORTED_MODULE_10__.newTextElement)({\n        x: element.x,\n        y: element.y - _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameOffsetY,\n        fontFamily: _constants__WEBPACK_IMPORTED_MODULE_4__.FONT_FAMILY.Assistant,\n        fontSize: _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameFontSize,\n        lineHeight: _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameLineHeight,\n        strokeColor: (_c = (_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.frameColor) === null || _b === void 0 ? void 0 : _b.nameColor) !== null && _c !== void 0 ? _c : opts.exportWithDarkMode ? _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameColorDarkTheme : _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameColorLightTheme,\n        text: (0,_frame__WEBPACK_IMPORTED_MODULE_9__.getFrameLikeTitle)(element, (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isFrameElement)(element) ? frameIndex : magicFrameIndex),\n        rawText: (0,_frame__WEBPACK_IMPORTED_MODULE_9__.getFrameLikeTitle)( //zsviczian\n        element, (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isFrameElement)(element) ? frameIndex : magicFrameIndex)\n      });\n      textElement.y -= textElement.height;\n      textElement = truncateText(textElement, element.width);\n      nextElements.push(textElement);\n    }\n\n    nextElements.push(element);\n  }\n\n  return nextElements;\n};\n\nconst getFrameRenderingConfig = (exportingFrame, frameRendering) => {\n  frameRendering = frameRendering || (0,_appState__WEBPACK_IMPORTED_MODULE_5__.getDefaultAppState)().frameRendering;\n  return {\n    enabled: exportingFrame ? true : frameRendering.enabled,\n    outline: exportingFrame ? false : frameRendering.outline,\n    name: exportingFrame ? false : frameRendering.name,\n    clip: exportingFrame ? true : frameRendering.clip\n  };\n};\n\nconst prepareElementsForRender = ({\n  elements,\n  exportingFrame,\n  frameRendering,\n  exportWithDarkMode\n}) => {\n  let nextElements;\n\n  if (exportingFrame) {\n    nextElements = (0,_utils_export__WEBPACK_IMPORTED_MODULE_8__.elementsOverlappingBBox)({\n      elements,\n      bounds: exportingFrame,\n      type: \"overlap\"\n    });\n  } else if (frameRendering.enabled && frameRendering.name) {\n    nextElements = addFrameLabelsAsTextElements(elements, {\n      exportWithDarkMode\n    });\n  } else {\n    nextElements = elements;\n  }\n\n  return nextElements;\n};\n\nconst exportToCanvas = async (elements, appState, files, {\n  exportBackground,\n  exportPadding = _constants__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_EXPORT_PADDING,\n  viewBackgroundColor,\n  exportingFrame\n}, createCanvas = (width, height) => {\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = width * appState.exportScale;\n  canvas.height = height * appState.exportScale;\n  return {\n    canvas,\n    scale: appState.exportScale\n  };\n}) => {\n  var _a;\n\n  const tempScene = __createSceneForElementsHack__(elements);\n\n  elements = tempScene.getNonDeletedElements();\n  const frameRendering = getFrameRenderingConfig(exportingFrame !== null && exportingFrame !== void 0 ? exportingFrame : null, (_a = appState.frameRendering) !== null && _a !== void 0 ? _a : null);\n  const elementsForRender = prepareElementsForRender({\n    elements,\n    exportingFrame,\n    exportWithDarkMode: appState.exportWithDarkMode,\n    frameRendering\n  });\n\n  if (exportingFrame) {\n    exportPadding = 0;\n  }\n\n  const [minX, minY, width, height] = getCanvasSize(exportingFrame ? [exportingFrame] : (0,_frame__WEBPACK_IMPORTED_MODULE_9__.getRootElements)(elementsForRender), exportPadding);\n  const {\n    canvas,\n    scale = 1\n  } = createCanvas(width, height);\n  const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_5__.getDefaultAppState)();\n  const {\n    imageCache\n  } = await (0,_element_image__WEBPACK_IMPORTED_MODULE_7__.updateImageCache)({\n    imageCache: new Map(),\n    fileIds: (0,_element_image__WEBPACK_IMPORTED_MODULE_7__.getInitializedImageElements)(elementsForRender).map(element => element.fileId),\n    files\n  });\n  (0,_renderer_renderScene__WEBPACK_IMPORTED_MODULE_2__.renderStaticScene)({\n    canvas,\n    rc: roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_0__[\"default\"].canvas(canvas),\n    elements: elementsForRender,\n    visibleElements: elementsForRender,\n    scale,\n    appState: Object.assign(Object.assign({}, appState), {\n      frameRendering,\n      viewBackgroundColor: exportBackground ? viewBackgroundColor : null,\n      scrollX: -minX + exportPadding,\n      scrollY: -minY + exportPadding,\n      zoom: defaultAppState.zoom,\n      shouldCacheIgnoreZoom: false,\n      theme: appState.exportWithDarkMode ? \"dark\" : \"light\"\n    }),\n    renderConfig: {\n      canvasBackgroundColor: viewBackgroundColor,\n      imageCache,\n      renderGrid: false,\n      isExporting: true,\n      // empty disables embeddable rendering\n      embedsValidationStatus: new Map(),\n      elementsPendingErasure: new Set()\n    }\n  });\n  tempScene.destroy();\n  return canvas;\n};\nconst exportToSvg = async (elements, appState, files, opts) => {\n  var _a, _b, _c;\n\n  const tempScene = __createSceneForElementsHack__(elements);\n\n  elements = tempScene.getNonDeletedElements();\n  const frameRendering = getFrameRenderingConfig((_a = opts === null || opts === void 0 ? void 0 : opts.exportingFrame) !== null && _a !== void 0 ? _a : null, (_b = appState.frameRendering) !== null && _b !== void 0 ? _b : null);\n  let {\n    exportPadding = _constants__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_EXPORT_PADDING,\n    exportWithDarkMode = false,\n    viewBackgroundColor,\n    exportScale = 1,\n    exportEmbedScene\n  } = appState;\n  const {\n    exportingFrame = null\n  } = opts || {};\n  const elementsForRender = prepareElementsForRender({\n    elements,\n    exportingFrame,\n    exportWithDarkMode,\n    frameRendering\n  });\n\n  if (exportingFrame) {\n    exportPadding = 0;\n  }\n\n  let metadata = \"\"; // we need to serialize the \"original\" elements before we put them through\n  // the tempScene hack which duplicates and regenerates ids\n\n  if (exportEmbedScene) {\n    try {\n      metadata = await (await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ../data/image */ \"./data/image.ts\"))).encodeSvgMetadata({\n        // when embedding scene, we want to embed the origionally supplied\n        // elements which don't contain the temp frame labels.\n        // But it also requires that the exportToSvg is being supplied with\n        // only the elements that we're exporting, and no extra.\n        text: (0,_data_json__WEBPACK_IMPORTED_MODULE_6__.serializeAsJSON)(elements, appState, files || {}, \"local\")\n      });\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  const [minX, minY, width, height] = getCanvasSize(exportingFrame ? [exportingFrame] : (0,_frame__WEBPACK_IMPORTED_MODULE_9__.getRootElements)(elementsForRender), exportPadding); // initialize SVG root\n\n  const svgRoot = document.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_4__.SVG_NS, \"svg\");\n  svgRoot.setAttribute(\"version\", \"1.1\");\n  svgRoot.setAttribute(\"xmlns\", _constants__WEBPACK_IMPORTED_MODULE_4__.SVG_NS);\n  svgRoot.setAttribute(\"viewBox\", `0 0 ${width} ${height}`);\n  svgRoot.setAttribute(\"width\", `${width * exportScale}`);\n  svgRoot.setAttribute(\"height\", `${height * exportScale}`);\n\n  if (exportWithDarkMode) {\n    svgRoot.setAttribute(\"filter\", _constants__WEBPACK_IMPORTED_MODULE_4__.THEME_FILTER);\n  }\n\n  const assetPath = \"https://excalidraw.com/\"; // Asset path needs to be determined only when using package\n\n  /*if (process.env.IS_EXCALIDRAW_NPM_PACKAGE) { //zsviczian\r\n    assetPath =\r\n      window.EXCALIDRAW_ASSET_PATH ||\r\n      `https://unpkg.com/${import.meta.env.VITE_PKG_NAME}@${\r\n        import.meta.env.PKG_VERSION\r\n      }`;\r\n        if (assetPath?.startsWith(\"/\")) {\r\n      assetPath = assetPath.replace(\"/\", `${window.location.origin}/`);\r\n    }\r\n    assetPath = `${assetPath}/dist/excalidraw-assets/`;\r\n  }*/\n  //zsviczian\n\n  const offsetX = -minX + exportPadding;\n  const offsetY = -minY + exportPadding;\n  const frameElements = (0,_frame__WEBPACK_IMPORTED_MODULE_9__.getFrameLikeElements)(elements);\n  let exportingFrameClipPath = \"\";\n\n  for (const frame of frameElements) {\n    const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(frame);\n    const cx = (x2 - x1) / 2 - (frame.x - x1);\n    const cy = (y2 - y1) / 2 - (frame.y - y1);\n    exportingFrameClipPath += `<clipPath id=${frame.id}>\n            <rect transform=\"translate(${frame.x + offsetX} ${frame.y + offsetY}) rotate(${frame.angle} ${cx} ${cy})\"\n          width=\"${frame.width}\"\n          height=\"${frame.height}\"\n          >\n          </rect>\n        </clipPath>`;\n  }\n\n  svgRoot.innerHTML = `\n  ${SVG_EXPORT_TAG}\n  ${metadata}\n  <defs>\n    <style class=\"style-fonts\">\n      @font-face {\n        font-family: \"Virgil\";\n        src: url(\"${assetPath}Virgil.woff2\");\n      }\n      @font-face {\n        font-family: \"Cascadia\";\n        src: url(\"${assetPath}Cascadia.woff2\");\n      }\n      @font-face {\n        font-family: \"Assistant\";\n        src: url(\"${assetPath}Assistant-Regular.woff2\");\n      }\n    </style>\n    ${exportingFrameClipPath}\n  </defs>\n  `; // render background rect\n\n  if (appState.exportBackground && viewBackgroundColor) {\n    const rect = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_4__.SVG_NS, \"rect\");\n    rect.setAttribute(\"x\", \"0\");\n    rect.setAttribute(\"y\", \"0\");\n    rect.setAttribute(\"width\", `${width}`);\n    rect.setAttribute(\"height\", `${height}`);\n    rect.setAttribute(\"fill\", viewBackgroundColor);\n    svgRoot.appendChild(rect);\n  }\n\n  const rsvg = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_0__[\"default\"].svg(svgRoot);\n  const renderEmbeddables = (_c = opts === null || opts === void 0 ? void 0 : opts.renderEmbeddables) !== null && _c !== void 0 ? _c : false;\n  (0,_renderer_renderScene__WEBPACK_IMPORTED_MODULE_2__.renderSceneToSvg)(elementsForRender, rsvg, svgRoot, files || {}, {\n    offsetX,\n    offsetY,\n    isExporting: true,\n    exportWithDarkMode,\n    renderEmbeddables,\n    frameRendering,\n    frameColor: appState.frameColor,\n    canvasBackgroundColor: viewBackgroundColor,\n    embedsValidationStatus: renderEmbeddables ? new Map(elementsForRender.filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isFrameLikeElement)(element)).map(element => [element.id, true])) : new Map()\n  });\n  tempScene.destroy();\n  return svgRoot;\n}; // calculate smallest area to fit the contents in\n\nconst getCanvasSize = (elements, exportPadding) => {\n  const [minX, minY, maxX, maxY] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(elements);\n  const width = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.distance)(minX, maxX) + exportPadding * 2;\n  const height = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.distance)(minY, maxY) + exportPadding * 2;\n  return [minX, minY, width, height];\n};\n\nconst getExportSize = (elements, exportPadding, scale) => {\n  const [,, width, height] = getCanvasSize(elements, exportPadding).map(dimension => Math.trunc(dimension * scale));\n  return [width, height];\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./scene/export.ts?");
 
 /***/ }),
 
@@ -3137,7 +3181,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"addEventListener\": () => (/* binding */ addEventListener),\n/* harmony export */   \"allowFullScreen\": () => (/* binding */ allowFullScreen),\n/* harmony export */   \"arrayToMap\": () => (/* binding */ arrayToMap),\n/* harmony export */   \"arrayToMapWithIndex\": () => (/* binding */ arrayToMapWithIndex),\n/* harmony export */   \"assertNever\": () => (/* binding */ assertNever),\n/* harmony export */   \"bytesToHexString\": () => (/* binding */ bytesToHexString),\n/* harmony export */   \"capitalizeString\": () => (/* binding */ capitalizeString),\n/* harmony export */   \"chunk\": () => (/* binding */ chunk),\n/* harmony export */   \"cloneJSON\": () => (/* binding */ cloneJSON),\n/* harmony export */   \"composeEventHandlers\": () => (/* binding */ composeEventHandlers),\n/* harmony export */   \"debounce\": () => (/* binding */ debounce),\n/* harmony export */   \"distance\": () => (/* binding */ distance),\n/* harmony export */   \"easeOut\": () => (/* binding */ easeOut),\n/* harmony export */   \"easeToValuesRAF\": () => (/* binding */ easeToValuesRAF),\n/* harmony export */   \"exitFullScreen\": () => (/* binding */ exitFullScreen),\n/* harmony export */   \"findIndex\": () => (/* binding */ findIndex),\n/* harmony export */   \"findLastIndex\": () => (/* binding */ findLastIndex),\n/* harmony export */   \"focusNearestParent\": () => (/* binding */ focusNearestParent),\n/* harmony export */   \"getDateTime\": () => (/* binding */ getDateTime),\n/* harmony export */   \"getFontFamilyString\": () => (/* binding */ getFontFamilyString),\n/* harmony export */   \"getFontString\": () => (/* binding */ getFontString),\n/* harmony export */   \"getFrame\": () => (/* binding */ getFrame),\n/* harmony export */   \"getGlobalCSSVariable\": () => (/* binding */ getGlobalCSSVariable),\n/* harmony export */   \"getNearestScrollableContainer\": () => (/* binding */ getNearestScrollableContainer),\n/* harmony export */   \"getShortcutKey\": () => (/* binding */ getShortcutKey),\n/* harmony export */   \"getUpdatedTimestamp\": () => (/* binding */ getUpdatedTimestamp),\n/* harmony export */   \"getVersion\": () => (/* binding */ getVersion),\n/* harmony export */   \"isFiniteNumber\": () => (/* binding */ isFiniteNumber),\n/* harmony export */   \"isFullScreen\": () => (/* binding */ isFullScreen),\n/* harmony export */   \"isInputLike\": () => (/* binding */ isInputLike),\n/* harmony export */   \"isInteractive\": () => (/* binding */ isInteractive),\n/* harmony export */   \"isMemberOf\": () => (/* binding */ isMemberOf),\n/* harmony export */   \"isPrimitive\": () => (/* binding */ isPrimitive),\n/* harmony export */   \"isPromiseLike\": () => (/* binding */ isPromiseLike),\n/* harmony export */   \"isRTL\": () => (/* binding */ isRTL),\n/* harmony export */   \"isRenderThrottlingEnabled\": () => (/* binding */ isRenderThrottlingEnabled),\n/* harmony export */   \"isRunningInIframe\": () => (/* binding */ isRunningInIframe),\n/* harmony export */   \"isShallowEqual\": () => (/* binding */ isShallowEqual),\n/* harmony export */   \"isTestEnv\": () => (/* binding */ isTestEnv),\n/* harmony export */   \"isToolIcon\": () => (/* binding */ isToolIcon),\n/* harmony export */   \"isTransparent\": () => (/* binding */ isTransparent),\n/* harmony export */   \"isWritableElement\": () => (/* binding */ isWritableElement),\n/* harmony export */   \"memoize\": () => (/* binding */ memoize),\n/* harmony export */   \"muteFSAbortError\": () => (/* binding */ muteFSAbortError),\n/* harmony export */   \"nFormatter\": () => (/* binding */ nFormatter),\n/* harmony export */   \"preventUnload\": () => (/* binding */ preventUnload),\n/* harmony export */   \"queryFocusableElements\": () => (/* binding */ queryFocusableElements),\n/* harmony export */   \"removeSelection\": () => (/* binding */ removeSelection),\n/* harmony export */   \"resolvablePromise\": () => (/* binding */ resolvablePromise),\n/* harmony export */   \"sceneCoordsToViewportCoords\": () => (/* binding */ sceneCoordsToViewportCoords),\n/* harmony export */   \"selectNode\": () => (/* binding */ selectNode),\n/* harmony export */   \"setDateTimeForTests\": () => (/* binding */ setDateTimeForTests),\n/* harmony export */   \"supportsEmoji\": () => (/* binding */ supportsEmoji),\n/* harmony export */   \"throttleRAF\": () => (/* binding */ throttleRAF),\n/* harmony export */   \"tupleToCoors\": () => (/* binding */ tupleToCoors),\n/* harmony export */   \"updateActiveTool\": () => (/* binding */ updateActiveTool),\n/* harmony export */   \"updateObject\": () => (/* binding */ updateObject),\n/* harmony export */   \"updateStable\": () => (/* binding */ updateStable),\n/* harmony export */   \"viewportCoordsToSceneCoords\": () => (/* binding */ viewportCoordsToSceneCoords),\n/* harmony export */   \"withBatchedUpdates\": () => (/* binding */ withBatchedUpdates),\n/* harmony export */   \"withBatchedUpdatesThrottled\": () => (/* binding */ withBatchedUpdatesThrottled),\n/* harmony export */   \"wrapEvent\": () => (/* binding */ wrapEvent)\n/* harmony export */ });\n/* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./colors */ \"./colors.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants */ \"./constants.ts\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);\n\n\n\n\nlet mockDateTime = null;\nconst setDateTimeForTests = dateTime => {\n  mockDateTime = dateTime;\n};\nconst getDateTime = () => {\n  if (mockDateTime) {\n    return mockDateTime;\n  }\n\n  const date = new Date();\n  const year = date.getFullYear();\n  const month = `${date.getMonth() + 1}`.padStart(2, \"0\");\n  const day = `${date.getDate()}`.padStart(2, \"0\");\n  const hr = `${date.getHours()}`.padStart(2, \"0\");\n  const min = `${date.getMinutes()}`.padStart(2, \"0\");\n  return `${year}-${month}-${day}-${hr}${min}`;\n};\nconst capitalizeString = str => str.charAt(0).toUpperCase() + str.slice(1);\nconst isToolIcon = target => target instanceof HTMLElement && target.className.includes(\"ToolIcon\");\nconst isInputLike = target => target instanceof HTMLElement && target.dataset.type === \"wysiwyg\" || target instanceof HTMLBRElement || // newline in wysiwyg\ntarget instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement;\nconst isInteractive = target => {\n  return isInputLike(target) || target instanceof Element && !!target.closest(\"label, button\");\n};\nconst isWritableElement = target => target instanceof HTMLElement && target.dataset.type === \"wysiwyg\" || target instanceof HTMLBRElement || // newline in wysiwyg\ntarget instanceof HTMLTextAreaElement || target instanceof HTMLInputElement && (target.type === \"text\" || target.type === \"number\" || target.type === \"password\");\nconst getFontFamilyString = ({\n  fontFamily\n}) => {\n  for (const [fontFamilyString, id] of Object.entries(_constants__WEBPACK_IMPORTED_MODULE_1__.FONT_FAMILY)) {\n    if (id === fontFamily) {\n      return `${fontFamilyString}, ${_constants__WEBPACK_IMPORTED_MODULE_1__.WINDOWS_EMOJI_FALLBACK_FONT}`;\n    }\n  }\n\n  return _constants__WEBPACK_IMPORTED_MODULE_1__.WINDOWS_EMOJI_FALLBACK_FONT;\n};\n/** returns fontSize+fontFamily string for assignment to DOM elements */\n\nconst getFontString = ({\n  fontSize,\n  fontFamily\n}) => {\n  return `${fontSize}px ${getFontFamilyString({\n    fontFamily\n  })}`;\n};\nconst debounce = (fn, timeout) => {\n  let handle = 0;\n  let lastArgs = null;\n\n  const ret = (...args) => {\n    lastArgs = args;\n    clearTimeout(handle);\n    handle = window.setTimeout(() => {\n      lastArgs = null;\n      fn(...args);\n    }, timeout);\n  };\n\n  ret.flush = () => {\n    clearTimeout(handle);\n\n    if (lastArgs) {\n      const _lastArgs = lastArgs;\n      lastArgs = null;\n      fn(..._lastArgs);\n    }\n  };\n\n  ret.cancel = () => {\n    lastArgs = null;\n    clearTimeout(handle);\n  };\n\n  return ret;\n}; // throttle callback to execute once per animation frame\n\nconst throttleRAF = (fn, opts) => {\n  let timerId = null;\n  let lastArgs = null;\n  let lastArgsTrailing = null;\n\n  const scheduleFunc = args => {\n    timerId = window.requestAnimationFrame(() => {\n      timerId = null;\n      fn(...args);\n      lastArgs = null;\n\n      if (lastArgsTrailing) {\n        lastArgs = lastArgsTrailing;\n        lastArgsTrailing = null;\n        scheduleFunc(lastArgs);\n      }\n    });\n  };\n\n  const ret = (...args) => {\n    if (false) {}\n\n    lastArgs = args;\n\n    if (timerId === null) {\n      scheduleFunc(lastArgs);\n    } else if (opts === null || opts === void 0 ? void 0 : opts.trailing) {\n      lastArgsTrailing = args;\n    }\n  };\n\n  ret.flush = () => {\n    if (timerId !== null) {\n      cancelAnimationFrame(timerId);\n      timerId = null;\n    }\n\n    if (lastArgs) {\n      fn(...(lastArgsTrailing || lastArgs));\n      lastArgs = lastArgsTrailing = null;\n    }\n  };\n\n  ret.cancel = () => {\n    lastArgs = lastArgsTrailing = null;\n\n    if (timerId !== null) {\n      cancelAnimationFrame(timerId);\n      timerId = null;\n    }\n  };\n\n  return ret;\n};\n/**\r\n * Exponential ease-out method\r\n *\r\n * @param {number} k - The value to be tweened.\r\n * @returns {number} The tweened value.\r\n */\n\nconst easeOut = k => {\n  return 1 - Math.pow(1 - k, 4);\n};\n\nconst easeOutInterpolate = (from, to, progress) => {\n  return (to - from) * easeOut(progress) + from;\n};\n/**\r\n * Animates values from `fromValues` to `toValues` using the requestAnimationFrame API.\r\n * Executes the `onStep` callback on each step with the interpolated values.\r\n * Returns a function that can be called to cancel the animation.\r\n *\r\n * @example\r\n * // Example usage:\r\n * const fromValues = { x: 0, y: 0 };\r\n * const toValues = { x: 100, y: 200 };\r\n * const onStep = ({x, y}) => {\r\n *   setState(x, y)\r\n * };\r\n * const onCancel = () => {\r\n *   console.log(\"Animation canceled\");\r\n * };\r\n *\r\n * const cancelAnimation = easeToValuesRAF({\r\n *   fromValues,\r\n *   toValues,\r\n *   onStep,\r\n *   onCancel,\r\n * });\r\n *\r\n * // To cancel the animation:\r\n * cancelAnimation();\r\n */\n\n\nconst easeToValuesRAF = ({\n  fromValues,\n  toValues,\n  onStep,\n  duration = 250,\n  interpolateValue,\n  onStart,\n  onEnd,\n  onCancel\n}) => {\n  let canceled = false;\n  let frameId = 0;\n  let startTime;\n\n  function step(timestamp) {\n    if (canceled) {\n      return;\n    }\n\n    if (startTime === undefined) {\n      startTime = timestamp;\n      onStart === null || onStart === void 0 ? void 0 : onStart();\n    }\n\n    const elapsed = Math.min(timestamp - startTime, duration);\n    const factor = easeOut(elapsed / duration);\n    const newValues = {};\n    Object.keys(fromValues).forEach(key => {\n      const _key = key;\n      const result = (toValues[_key] - fromValues[_key]) * factor + fromValues[_key];\n      newValues[_key] = result;\n    });\n    onStep(newValues);\n\n    if (elapsed < duration) {\n      const progress = elapsed / duration;\n      const newValues = {};\n      Object.keys(fromValues).forEach(key => {\n        const _key = key;\n        const startValue = fromValues[_key];\n        const endValue = toValues[_key];\n        let result;\n        result = interpolateValue ? interpolateValue(startValue, endValue, progress, _key) : easeOutInterpolate(startValue, endValue, progress);\n\n        if (result == null) {\n          result = easeOutInterpolate(startValue, endValue, progress);\n        }\n\n        newValues[_key] = result;\n      });\n      onStep(newValues);\n      frameId = window.requestAnimationFrame(step);\n    } else {\n      onStep(toValues);\n      onEnd === null || onEnd === void 0 ? void 0 : onEnd();\n    }\n  }\n\n  frameId = window.requestAnimationFrame(step);\n  return () => {\n    onCancel === null || onCancel === void 0 ? void 0 : onCancel();\n    canceled = true;\n    window.cancelAnimationFrame(frameId);\n  };\n}; // https://github.com/lodash/lodash/blob/es/chunk.js\n\nconst chunk = (array, size) => {\n  if (!array.length || size < 1) {\n    return [];\n  }\n\n  let index = 0;\n  let resIndex = 0;\n  const result = Array(Math.ceil(array.length / size));\n\n  while (index < array.length) {\n    result[resIndex++] = array.slice(index, index += size);\n  }\n\n  return result;\n};\nconst selectNode = node => {\n  const selection = window.getSelection();\n\n  if (selection) {\n    const range = document.createRange();\n    range.selectNodeContents(node);\n    selection.removeAllRanges();\n    selection.addRange(range);\n  }\n};\nconst removeSelection = () => {\n  const selection = window.getSelection();\n\n  if (selection) {\n    selection.removeAllRanges();\n  }\n};\nconst distance = (x, y) => Math.abs(x - y);\nconst updateActiveTool = (appState, data) => {\n  var _a, _b;\n\n  if (data.type === \"custom\") {\n    return Object.assign(Object.assign({}, appState.activeTool), {\n      type: \"custom\",\n      customType: data.customType,\n      locked: (_a = data.locked) !== null && _a !== void 0 ? _a : appState.activeTool.locked\n    });\n  }\n\n  return Object.assign(Object.assign({}, appState.activeTool), {\n    lastActiveTool: data.lastActiveToolBeforeEraser === undefined ? appState.activeTool.lastActiveTool : data.lastActiveToolBeforeEraser,\n    type: data.type,\n    customType: null,\n    locked: (_b = data.locked) !== null && _b !== void 0 ? _b : appState.activeTool.locked\n  });\n};\nconst isFullScreen = () => {\n  var _a;\n\n  return ((_a = document.fullscreenElement) === null || _a === void 0 ? void 0 : _a.nodeName) === \"HTML\";\n};\nconst allowFullScreen = () => document.documentElement.requestFullscreen();\nconst exitFullScreen = () => document.exitFullscreen();\nconst getShortcutKey = shortcut => {\n  shortcut = shortcut.replace(/\\bAlt\\b/i, \"Alt\").replace(/\\bShift\\b/i, \"Shift\").replace(/\\b(Enter|Return)\\b/i, \"Enter\");\n\n  if (_constants__WEBPACK_IMPORTED_MODULE_1__.isDarwin) {\n    return shortcut.replace(/\\bCtrlOrCmd\\b/gi, \"Cmd\").replace(/\\bAlt\\b/i, \"Option\");\n  }\n\n  return shortcut.replace(/\\bCtrlOrCmd\\b/gi, \"Ctrl\");\n};\nconst viewportCoordsToSceneCoords = ({\n  clientX,\n  clientY\n}, {\n  zoom,\n  offsetLeft,\n  offsetTop,\n  scrollX,\n  scrollY\n}) => {\n  const x = (clientX - offsetLeft) / zoom.value - scrollX;\n  const y = (clientY - offsetTop) / zoom.value - scrollY;\n  return {\n    x,\n    y\n  };\n};\nconst sceneCoordsToViewportCoords = ({\n  sceneX,\n  sceneY\n}, {\n  zoom,\n  offsetLeft,\n  offsetTop,\n  scrollX,\n  scrollY\n}) => {\n  const x = (sceneX + scrollX) * zoom.value + offsetLeft;\n  const y = (sceneY + scrollY) * zoom.value + offsetTop;\n  return {\n    x,\n    y\n  };\n};\nconst getGlobalCSSVariable = name => getComputedStyle(document.documentElement).getPropertyValue(`--${name}`);\nconst RS_LTR_CHARS = \"A-Za-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02B8\\u0300-\\u0590\\u0800-\\u1FFF\" + \"\\u2C00-\\uFB1C\\uFDFE-\\uFE6F\\uFEFD-\\uFFFF\";\nconst RS_RTL_CHARS = \"\\u0591-\\u07FF\\uFB1D-\\uFDFD\\uFE70-\\uFEFC\";\nconst RE_RTL_CHECK = new RegExp(`^[^${RS_LTR_CHARS}]*[${RS_RTL_CHARS}]`);\n/**\r\n * Checks whether first directional character is RTL. Meaning whether it starts\r\n *  with RTL characters, or indeterminate (numbers etc.) characters followed by\r\n *  RTL.\r\n * See https://github.com/excalidraw/excalidraw/pull/1722#discussion_r436340171\r\n */\n\nconst isRTL = text => RE_RTL_CHECK.test(text);\nconst tupleToCoors = xyTuple => {\n  const [x, y] = xyTuple;\n  return {\n    x,\n    y\n  };\n};\n/** use as a rejectionHandler to mute filesystem Abort errors */\n\nconst muteFSAbortError = error => {\n  if ((error === null || error === void 0 ? void 0 : error.name) === \"AbortError\") {\n    console.warn(error);\n    return;\n  }\n\n  throw error;\n};\nconst findIndex = (array, cb, fromIndex = 0) => {\n  if (fromIndex < 0) {\n    fromIndex = array.length + fromIndex;\n  }\n\n  fromIndex = Math.min(array.length, Math.max(fromIndex, 0));\n  let index = fromIndex - 1;\n\n  while (++index < array.length) {\n    if (cb(array[index], index, array)) {\n      return index;\n    }\n  }\n\n  return -1;\n};\nconst findLastIndex = (array, cb, fromIndex = array.length - 1) => {\n  if (fromIndex < 0) {\n    fromIndex = array.length + fromIndex;\n  }\n\n  fromIndex = Math.min(array.length - 1, Math.max(fromIndex, 0));\n  let index = fromIndex + 1;\n\n  while (--index > -1) {\n    if (cb(array[index], index, array)) {\n      return index;\n    }\n  }\n\n  return -1;\n};\nconst isTransparent = color => {\n  const isRGBTransparent = color.length === 5 && color.substr(4, 1) === \"0\";\n  const isRRGGBBTransparent = color.length === 9 && color.substr(7, 2) === \"00\";\n  return isRGBTransparent || isRRGGBBTransparent || color === _colors__WEBPACK_IMPORTED_MODULE_0__.COLOR_PALETTE.transparent;\n};\nconst resolvablePromise = () => {\n  let resolve;\n  let reject;\n  const promise = new Promise((_resolve, _reject) => {\n    resolve = _resolve;\n    reject = _reject;\n  });\n  promise.resolve = resolve;\n  promise.reject = reject;\n  return promise;\n};\n/**\r\n * @param func handler taking at most single parameter (event).\r\n */\n\nconst withBatchedUpdates = func => event => {\n  (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.unstable_batchedUpdates)(func, event);\n};\n/**\r\n * barches React state updates and throttles the calls to a single call per\r\n * animation frame\r\n */\n\nconst withBatchedUpdatesThrottled = func => {\n  // @ts-ignore\n  return throttleRAF(event => {\n    (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.unstable_batchedUpdates)(func, event);\n  });\n}; //https://stackoverflow.com/a/9462382/8418\n\nconst nFormatter = (num, digits) => {\n  const si = [{\n    value: 1,\n    symbol: \"b\"\n  }, {\n    value: 1e3,\n    symbol: \"k\"\n  }, {\n    value: 1e6,\n    symbol: \"M\"\n  }, {\n    value: 1e9,\n    symbol: \"G\"\n  }];\n  const rx = /\\.0+$|(\\.[0-9]*[1-9])0+$/;\n  let index;\n\n  for (index = si.length - 1; index > 0; index--) {\n    if (num >= si[index].value) {\n      break;\n    }\n  }\n\n  return (num / si[index].value).toFixed(digits).replace(rx, \"$1\") + si[index].symbol;\n};\nconst getVersion = () => {\n  var _a;\n\n  return ((_a = document.querySelector('meta[name=\"version\"]')) === null || _a === void 0 ? void 0 : _a.content) || _constants__WEBPACK_IMPORTED_MODULE_1__.DEFAULT_VERSION;\n}; // Adapted from https://github.com/Modernizr/Modernizr/blob/master/feature-detects/emoji.js\n\nconst supportsEmoji = () => {\n  const canvas = document.createElement(\"canvas\");\n  const ctx = canvas.getContext(\"2d\");\n\n  if (!ctx) {\n    return false;\n  }\n\n  const offset = 12;\n  ctx.fillStyle = \"#f00\";\n  ctx.textBaseline = \"top\";\n  ctx.font = \"32px Arial\"; // Modernizr used 🐨, but it is sort of supported on Windows 7.\n  // Luckily 😀 isn't supported.\n\n  ctx.fillText(\"😀\", 0, 0);\n  return ctx.getImageData(offset, offset, 1, 1).data[0] !== 0;\n};\nconst getNearestScrollableContainer = element => {\n  let parent = element.parentElement;\n\n  while (parent) {\n    if (parent === document.body) {\n      return document;\n    }\n\n    const {\n      overflowY\n    } = window.getComputedStyle(parent);\n    const hasScrollableContent = parent.scrollHeight > parent.clientHeight;\n\n    if (hasScrollableContent && (overflowY === \"auto\" || overflowY === \"scroll\" || overflowY === \"overlay\")) {\n      return parent;\n    }\n\n    parent = parent.parentElement;\n  }\n\n  return document;\n};\nconst focusNearestParent = element => {\n  let parent = element.parentElement;\n\n  while (parent) {\n    if (parent.tabIndex > -1) {\n      parent.focus();\n      return;\n    }\n\n    parent = parent.parentElement;\n  }\n};\nconst preventUnload = event => {\n  event.preventDefault(); // NOTE: modern browsers no longer allow showing a custom message here\n\n  event.returnValue = \"\";\n};\nconst bytesToHexString = bytes => {\n  return Array.from(bytes).map(byte => `0${byte.toString(16)}`.slice(-2)).join(\"\");\n};\nconst getUpdatedTimestamp = () => isTestEnv() ? 1 : Date.now();\n/**\r\n * Transforms array of objects containing `id` attribute,\r\n * or array of ids (strings), into a Map, keyd by `id`.\r\n */\n\nconst arrayToMap = items => {\n  return items.reduce((acc, element) => {\n    acc.set(typeof element === \"string\" ? element : element.id, element);\n    return acc;\n  }, new Map());\n};\nconst arrayToMapWithIndex = elements => elements.reduce((acc, element, idx) => {\n  acc.set(element.id, [element, idx]);\n  return acc;\n}, new Map());\nconst isTestEnv = () => \"development\" === \"test\";\nconst wrapEvent = (name, nativeEvent) => {\n  return new CustomEvent(name, {\n    detail: {\n      nativeEvent\n    },\n    cancelable: true\n  });\n};\nconst updateObject = (obj, updates) => {\n  let didChange = false;\n\n  for (const key in updates) {\n    const value = updates[key];\n\n    if (typeof value !== \"undefined\") {\n      if (obj[key] === value && ( // if object, always update because its attrs could have changed\n      typeof value !== \"object\" || value === null)) {\n        continue;\n      }\n\n      didChange = true;\n    }\n  }\n\n  if (!didChange) {\n    return obj;\n  }\n\n  return Object.assign(Object.assign({}, obj), updates);\n};\nconst isPrimitive = val => {\n  const type = typeof val;\n  return val == null || type !== \"object\" && type !== \"function\";\n};\nconst getFrame = () => {\n  try {\n    return window.self === window.top ? \"top\" : \"iframe\";\n  } catch (error) {\n    return \"iframe\";\n  }\n};\nconst isRunningInIframe = () => getFrame() === \"iframe\";\nconst isPromiseLike = value => {\n  return !!value && typeof value === \"object\" && \"then\" in value && \"catch\" in value && \"finally\" in value;\n};\nconst queryFocusableElements = container => {\n  const focusableElements = container === null || container === void 0 ? void 0 : container.querySelectorAll(\"button, a, input, select, textarea, div[tabindex], label[tabindex]\");\n  return focusableElements ? Array.from(focusableElements).filter(element => element.tabIndex > -1 && !element.disabled) : [];\n};\n/** use as a fallback after identity check (for perf reasons) */\n\nconst _defaultIsShallowComparatorFallback = (a, b) => {\n  // consider two empty arrays equal\n  if (Array.isArray(a) && Array.isArray(b) && a.length === 0 && b.length === 0) {\n    return true;\n  }\n\n  return a === b;\n};\n/**\r\n * Returns whether object/array is shallow equal.\r\n * Considers empty object/arrays as equal (whether top-level or second-level).\r\n */\n\n\nconst isShallowEqual = (objA, objB, comparators, debug = false) => {\n  const aKeys = Object.keys(objA);\n  const bKeys = Object.keys(objB);\n\n  if (aKeys.length !== bKeys.length) {\n    return false;\n  }\n\n  if (comparators && Array.isArray(comparators)) {\n    for (const key of comparators) {\n      const ret = objA[key] === objB[key] || _defaultIsShallowComparatorFallback(objA[key], objB[key]);\n\n      if (!ret) {\n        if (debug) {\n          console.warn(`%cisShallowEqual: ${key} not equal ->`, \"color: #8B4000\", objA[key], objB[key]);\n        }\n\n        return false;\n      }\n    }\n\n    return true;\n  }\n\n  return aKeys.every(key => {\n    const comparator = comparators === null || comparators === void 0 ? void 0 : comparators[key];\n    const ret = comparator ? comparator(objA[key], objB[key]) : objA[key] === objB[key] || _defaultIsShallowComparatorFallback(objA[key], objB[key]);\n\n    if (!ret && debug) {\n      console.warn(`%cisShallowEqual: ${key} not equal ->`, \"color: #8B4000\", objA[key], objB[key]);\n    }\n\n    return ret;\n  });\n}; // taken from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx\n\nconst composeEventHandlers = (originalEventHandler, ourEventHandler, {\n  checkForDefaultPrevented = true\n} = {}) => {\n  return function handleEvent(event) {\n    originalEventHandler === null || originalEventHandler === void 0 ? void 0 : originalEventHandler(event);\n\n    if (!checkForDefaultPrevented || !event.defaultPrevented) {\n      return ourEventHandler === null || ourEventHandler === void 0 ? void 0 : ourEventHandler(event);\n    }\n  };\n};\n/**\r\n * supply `null` as message if non-never value is valid, you just need to\r\n * typecheck against it\r\n */\n\nconst assertNever = (value, message, softAssert) => {\n  if (!message) {\n    return value;\n  }\n\n  if (softAssert) {\n    console.error(message);\n    return value;\n  }\n\n  throw new Error(message);\n};\n/**\r\n * Memoizes on values of `opts` object (strict equality).\r\n */\n\nconst memoize = func => {\n  let lastArgs;\n  let lastResult;\n\n  const ret = function (opts) {\n    const currentArgs = Object.entries(opts);\n\n    if (lastArgs) {\n      let argsAreEqual = true;\n\n      for (const [key, value] of currentArgs) {\n        if (lastArgs.get(key) !== value) {\n          argsAreEqual = false;\n          break;\n        }\n      }\n\n      if (argsAreEqual) {\n        return lastResult;\n      }\n    }\n\n    const result = func(opts);\n    lastArgs = new Map(currentArgs);\n    lastResult = result;\n    return result;\n  };\n\n  ret.clear = () => {\n    lastArgs = undefined;\n    lastResult = undefined;\n  };\n\n  return ret;\n};\nconst isRenderThrottlingEnabled = (() => {\n  // we don't want to throttle in react < 18 because of #5439 and it was\n  // getting more complex to maintain the fix\n  let IS_REACT_18_AND_UP;\n\n  try {\n    const version = react__WEBPACK_IMPORTED_MODULE_3___default().version.split(\".\");\n    IS_REACT_18_AND_UP = Number(version[0]) > 17;\n  } catch (_a) {\n    IS_REACT_18_AND_UP = false;\n  }\n\n  let hasWarned = false;\n  return () => {\n    if (window.EXCALIDRAW_THROTTLE_RENDER === true) {\n      if (!IS_REACT_18_AND_UP) {\n        if (!hasWarned) {\n          hasWarned = true;\n          console.warn(\"Excalidraw: render throttling is disabled on React versions < 18.\");\n        }\n\n        return false;\n      }\n\n      return true;\n    }\n\n    return false;\n  };\n})();\n/** Checks if value is inside given collection. Useful for type-safety. */\n\nconst isMemberOf = (\n/** Set/Map/Array/Object */\ncollection,\n/** value to look for */\nvalue) => {\n  return collection instanceof Set || collection instanceof Map ? collection.has(value) : \"includes\" in collection ? collection.includes(value) : collection.hasOwnProperty(value);\n};\nconst cloneJSON = obj => JSON.parse(JSON.stringify(obj));\nconst isFiniteNumber = value => {\n  return typeof value === \"number\" && Number.isFinite(value);\n};\nconst updateStable = (prevValue, nextValue) => {\n  if (isShallowEqual(prevValue, nextValue)) {\n    return prevValue;\n  }\n\n  return nextValue;\n}; // implem\n\nfunction addEventListener(\n/**\r\n * allows for falsy values so you don't have to type check when adding\r\n * event listeners to optional elements\r\n */\ntarget, type, listener, options) {\n  var _a;\n\n  if (!target) {\n    return () => {};\n  }\n\n  (_a = target === null || target === void 0 ? void 0 : target.addEventListener) === null || _a === void 0 ? void 0 : _a.call(target, type, listener, options);\n  return () => {\n    var _a;\n\n    (_a = target === null || target === void 0 ? void 0 : target.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(target, type, listener, options);\n  };\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./utils.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"addEventListener\": () => (/* binding */ addEventListener),\n/* harmony export */   \"allowFullScreen\": () => (/* binding */ allowFullScreen),\n/* harmony export */   \"arrayToMap\": () => (/* binding */ arrayToMap),\n/* harmony export */   \"arrayToMapWithIndex\": () => (/* binding */ arrayToMapWithIndex),\n/* harmony export */   \"assertNever\": () => (/* binding */ assertNever),\n/* harmony export */   \"bytesToHexString\": () => (/* binding */ bytesToHexString),\n/* harmony export */   \"capitalizeString\": () => (/* binding */ capitalizeString),\n/* harmony export */   \"chunk\": () => (/* binding */ chunk),\n/* harmony export */   \"cloneJSON\": () => (/* binding */ cloneJSON),\n/* harmony export */   \"composeEventHandlers\": () => (/* binding */ composeEventHandlers),\n/* harmony export */   \"debounce\": () => (/* binding */ debounce),\n/* harmony export */   \"distance\": () => (/* binding */ distance),\n/* harmony export */   \"easeOut\": () => (/* binding */ easeOut),\n/* harmony export */   \"easeToValuesRAF\": () => (/* binding */ easeToValuesRAF),\n/* harmony export */   \"exitFullScreen\": () => (/* binding */ exitFullScreen),\n/* harmony export */   \"findIndex\": () => (/* binding */ findIndex),\n/* harmony export */   \"findLastIndex\": () => (/* binding */ findLastIndex),\n/* harmony export */   \"focusNearestParent\": () => (/* binding */ focusNearestParent),\n/* harmony export */   \"getDateTime\": () => (/* binding */ getDateTime),\n/* harmony export */   \"getFontFamilyString\": () => (/* binding */ getFontFamilyString),\n/* harmony export */   \"getFontString\": () => (/* binding */ getFontString),\n/* harmony export */   \"getFrame\": () => (/* binding */ getFrame),\n/* harmony export */   \"getGlobalCSSVariable\": () => (/* binding */ getGlobalCSSVariable),\n/* harmony export */   \"getNearestScrollableContainer\": () => (/* binding */ getNearestScrollableContainer),\n/* harmony export */   \"getShortcutKey\": () => (/* binding */ getShortcutKey),\n/* harmony export */   \"getSvgPathFromStroke\": () => (/* binding */ getSvgPathFromStroke),\n/* harmony export */   \"getUpdatedTimestamp\": () => (/* binding */ getUpdatedTimestamp),\n/* harmony export */   \"getVersion\": () => (/* binding */ getVersion),\n/* harmony export */   \"isFiniteNumber\": () => (/* binding */ isFiniteNumber),\n/* harmony export */   \"isFullScreen\": () => (/* binding */ isFullScreen),\n/* harmony export */   \"isInputLike\": () => (/* binding */ isInputLike),\n/* harmony export */   \"isInteractive\": () => (/* binding */ isInteractive),\n/* harmony export */   \"isMemberOf\": () => (/* binding */ isMemberOf),\n/* harmony export */   \"isPrimitive\": () => (/* binding */ isPrimitive),\n/* harmony export */   \"isPromiseLike\": () => (/* binding */ isPromiseLike),\n/* harmony export */   \"isRTL\": () => (/* binding */ isRTL),\n/* harmony export */   \"isRunningInIframe\": () => (/* binding */ isRunningInIframe),\n/* harmony export */   \"isShallowEqual\": () => (/* binding */ isShallowEqual),\n/* harmony export */   \"isTestEnv\": () => (/* binding */ isTestEnv),\n/* harmony export */   \"isToolIcon\": () => (/* binding */ isToolIcon),\n/* harmony export */   \"isTransparent\": () => (/* binding */ isTransparent),\n/* harmony export */   \"isWritableElement\": () => (/* binding */ isWritableElement),\n/* harmony export */   \"memoize\": () => (/* binding */ memoize),\n/* harmony export */   \"muteFSAbortError\": () => (/* binding */ muteFSAbortError),\n/* harmony export */   \"nFormatter\": () => (/* binding */ nFormatter),\n/* harmony export */   \"normalizeEOL\": () => (/* binding */ normalizeEOL),\n/* harmony export */   \"preventUnload\": () => (/* binding */ preventUnload),\n/* harmony export */   \"queryFocusableElements\": () => (/* binding */ queryFocusableElements),\n/* harmony export */   \"removeSelection\": () => (/* binding */ removeSelection),\n/* harmony export */   \"resolvablePromise\": () => (/* binding */ resolvablePromise),\n/* harmony export */   \"sceneCoordsToViewportCoords\": () => (/* binding */ sceneCoordsToViewportCoords),\n/* harmony export */   \"selectNode\": () => (/* binding */ selectNode),\n/* harmony export */   \"setDateTimeForTests\": () => (/* binding */ setDateTimeForTests),\n/* harmony export */   \"supportsEmoji\": () => (/* binding */ supportsEmoji),\n/* harmony export */   \"throttleRAF\": () => (/* binding */ throttleRAF),\n/* harmony export */   \"tupleToCoors\": () => (/* binding */ tupleToCoors),\n/* harmony export */   \"updateActiveTool\": () => (/* binding */ updateActiveTool),\n/* harmony export */   \"updateObject\": () => (/* binding */ updateObject),\n/* harmony export */   \"updateStable\": () => (/* binding */ updateStable),\n/* harmony export */   \"viewportCoordsToSceneCoords\": () => (/* binding */ viewportCoordsToSceneCoords),\n/* harmony export */   \"wrapEvent\": () => (/* binding */ wrapEvent)\n/* harmony export */ });\n/* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./colors */ \"./colors.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants */ \"./constants.ts\");\n\n\nlet mockDateTime = null;\nconst setDateTimeForTests = dateTime => {\n  mockDateTime = dateTime;\n};\nconst getDateTime = () => {\n  if (mockDateTime) {\n    return mockDateTime;\n  }\n\n  const date = new Date();\n  const year = date.getFullYear();\n  const month = `${date.getMonth() + 1}`.padStart(2, \"0\");\n  const day = `${date.getDate()}`.padStart(2, \"0\");\n  const hr = `${date.getHours()}`.padStart(2, \"0\");\n  const min = `${date.getMinutes()}`.padStart(2, \"0\");\n  return `${year}-${month}-${day}-${hr}${min}`;\n};\nconst capitalizeString = str => str.charAt(0).toUpperCase() + str.slice(1);\nconst isToolIcon = target => target instanceof HTMLElement && target.className.includes(\"ToolIcon\");\nconst isInputLike = target => target instanceof HTMLElement && target.dataset.type === \"wysiwyg\" || target instanceof HTMLBRElement || // newline in wysiwyg\ntarget instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement;\nconst isInteractive = target => {\n  return isInputLike(target) || target instanceof Element && !!target.closest(\"label, button\");\n};\nconst isWritableElement = target => target instanceof HTMLElement && target.dataset.type === \"wysiwyg\" || target instanceof HTMLBRElement || // newline in wysiwyg\ntarget instanceof HTMLTextAreaElement || target instanceof HTMLInputElement && (target.type === \"text\" || target.type === \"number\" || target.type === \"password\");\nconst getFontFamilyString = ({\n  fontFamily\n}) => {\n  for (const [fontFamilyString, id] of Object.entries(_constants__WEBPACK_IMPORTED_MODULE_1__.FONT_FAMILY)) {\n    if (id === fontFamily) {\n      return `${fontFamilyString}, ${_constants__WEBPACK_IMPORTED_MODULE_1__.WINDOWS_EMOJI_FALLBACK_FONT}`;\n    }\n  }\n\n  return _constants__WEBPACK_IMPORTED_MODULE_1__.WINDOWS_EMOJI_FALLBACK_FONT;\n};\n/** returns fontSize+fontFamily string for assignment to DOM elements */\n\nconst getFontString = ({\n  fontSize,\n  fontFamily\n}) => {\n  return `${fontSize}px ${getFontFamilyString({\n    fontFamily\n  })}`;\n};\nconst debounce = (fn, timeout) => {\n  let handle = 0;\n  let lastArgs = null;\n\n  const ret = (...args) => {\n    lastArgs = args;\n    clearTimeout(handle);\n    handle = window.setTimeout(() => {\n      lastArgs = null;\n      fn(...args);\n    }, timeout);\n  };\n\n  ret.flush = () => {\n    clearTimeout(handle);\n\n    if (lastArgs) {\n      const _lastArgs = lastArgs;\n      lastArgs = null;\n      fn(..._lastArgs);\n    }\n  };\n\n  ret.cancel = () => {\n    lastArgs = null;\n    clearTimeout(handle);\n  };\n\n  return ret;\n}; // throttle callback to execute once per animation frame\n\nconst throttleRAF = (fn, opts) => {\n  let timerId = null;\n  let lastArgs = null;\n  let lastArgsTrailing = null;\n\n  const scheduleFunc = args => {\n    timerId = window.requestAnimationFrame(() => {\n      timerId = null;\n      fn(...args);\n      lastArgs = null;\n\n      if (lastArgsTrailing) {\n        lastArgs = lastArgsTrailing;\n        lastArgsTrailing = null;\n        scheduleFunc(lastArgs);\n      }\n    });\n  };\n\n  const ret = (...args) => {\n    if (false) {}\n\n    lastArgs = args;\n\n    if (timerId === null) {\n      scheduleFunc(lastArgs);\n    } else if (opts === null || opts === void 0 ? void 0 : opts.trailing) {\n      lastArgsTrailing = args;\n    }\n  };\n\n  ret.flush = () => {\n    if (timerId !== null) {\n      cancelAnimationFrame(timerId);\n      timerId = null;\n    }\n\n    if (lastArgs) {\n      fn(...(lastArgsTrailing || lastArgs));\n      lastArgs = lastArgsTrailing = null;\n    }\n  };\n\n  ret.cancel = () => {\n    lastArgs = lastArgsTrailing = null;\n\n    if (timerId !== null) {\n      cancelAnimationFrame(timerId);\n      timerId = null;\n    }\n  };\n\n  return ret;\n};\n/**\r\n * Exponential ease-out method\r\n *\r\n * @param {number} k - The value to be tweened.\r\n * @returns {number} The tweened value.\r\n */\n\nconst easeOut = k => {\n  return 1 - Math.pow(1 - k, 4);\n};\n\nconst easeOutInterpolate = (from, to, progress) => {\n  return (to - from) * easeOut(progress) + from;\n};\n/**\r\n * Animates values from `fromValues` to `toValues` using the requestAnimationFrame API.\r\n * Executes the `onStep` callback on each step with the interpolated values.\r\n * Returns a function that can be called to cancel the animation.\r\n *\r\n * @example\r\n * // Example usage:\r\n * const fromValues = { x: 0, y: 0 };\r\n * const toValues = { x: 100, y: 200 };\r\n * const onStep = ({x, y}) => {\r\n *   setState(x, y)\r\n * };\r\n * const onCancel = () => {\r\n *   console.log(\"Animation canceled\");\r\n * };\r\n *\r\n * const cancelAnimation = easeToValuesRAF({\r\n *   fromValues,\r\n *   toValues,\r\n *   onStep,\r\n *   onCancel,\r\n * });\r\n *\r\n * // To cancel the animation:\r\n * cancelAnimation();\r\n */\n\n\nconst easeToValuesRAF = ({\n  fromValues,\n  toValues,\n  onStep,\n  duration = 250,\n  interpolateValue,\n  onStart,\n  onEnd,\n  onCancel\n}) => {\n  let canceled = false;\n  let frameId = 0;\n  let startTime;\n\n  function step(timestamp) {\n    if (canceled) {\n      return;\n    }\n\n    if (startTime === undefined) {\n      startTime = timestamp;\n      onStart === null || onStart === void 0 ? void 0 : onStart();\n    }\n\n    const elapsed = Math.min(timestamp - startTime, duration);\n    const factor = easeOut(elapsed / duration);\n    const newValues = {};\n    Object.keys(fromValues).forEach(key => {\n      const _key = key;\n      const result = (toValues[_key] - fromValues[_key]) * factor + fromValues[_key];\n      newValues[_key] = result;\n    });\n    onStep(newValues);\n\n    if (elapsed < duration) {\n      const progress = elapsed / duration;\n      const newValues = {};\n      Object.keys(fromValues).forEach(key => {\n        const _key = key;\n        const startValue = fromValues[_key];\n        const endValue = toValues[_key];\n        let result;\n        result = interpolateValue ? interpolateValue(startValue, endValue, progress, _key) : easeOutInterpolate(startValue, endValue, progress);\n\n        if (result == null) {\n          result = easeOutInterpolate(startValue, endValue, progress);\n        }\n\n        newValues[_key] = result;\n      });\n      onStep(newValues);\n      frameId = window.requestAnimationFrame(step);\n    } else {\n      onStep(toValues);\n      onEnd === null || onEnd === void 0 ? void 0 : onEnd();\n    }\n  }\n\n  frameId = window.requestAnimationFrame(step);\n  return () => {\n    onCancel === null || onCancel === void 0 ? void 0 : onCancel();\n    canceled = true;\n    window.cancelAnimationFrame(frameId);\n  };\n}; // https://github.com/lodash/lodash/blob/es/chunk.js\n\nconst chunk = (array, size) => {\n  if (!array.length || size < 1) {\n    return [];\n  }\n\n  let index = 0;\n  let resIndex = 0;\n  const result = Array(Math.ceil(array.length / size));\n\n  while (index < array.length) {\n    result[resIndex++] = array.slice(index, index += size);\n  }\n\n  return result;\n};\nconst selectNode = node => {\n  const selection = window.getSelection();\n\n  if (selection) {\n    const range = document.createRange();\n    range.selectNodeContents(node);\n    selection.removeAllRanges();\n    selection.addRange(range);\n  }\n};\nconst removeSelection = () => {\n  const selection = window.getSelection();\n\n  if (selection) {\n    selection.removeAllRanges();\n  }\n};\nconst distance = (x, y) => Math.abs(x - y);\nconst updateActiveTool = (appState, data) => {\n  var _a, _b;\n\n  if (data.type === \"custom\") {\n    return Object.assign(Object.assign({}, appState.activeTool), {\n      type: \"custom\",\n      customType: data.customType,\n      locked: (_a = data.locked) !== null && _a !== void 0 ? _a : appState.activeTool.locked\n    });\n  }\n\n  return Object.assign(Object.assign({}, appState.activeTool), {\n    lastActiveTool: data.lastActiveToolBeforeEraser === undefined ? appState.activeTool.lastActiveTool : data.lastActiveToolBeforeEraser,\n    type: data.type,\n    customType: null,\n    locked: (_b = data.locked) !== null && _b !== void 0 ? _b : appState.activeTool.locked\n  });\n};\nconst isFullScreen = () => {\n  var _a;\n\n  return ((_a = document.fullscreenElement) === null || _a === void 0 ? void 0 : _a.nodeName) === \"HTML\";\n};\nconst allowFullScreen = () => document.documentElement.requestFullscreen();\nconst exitFullScreen = () => document.exitFullscreen();\nconst getShortcutKey = shortcut => {\n  shortcut = shortcut.replace(/\\bAlt\\b/i, \"Alt\").replace(/\\bShift\\b/i, \"Shift\").replace(/\\b(Enter|Return)\\b/i, \"Enter\");\n\n  if (_constants__WEBPACK_IMPORTED_MODULE_1__.isDarwin) {\n    return shortcut.replace(/\\bCtrlOrCmd\\b/gi, \"Cmd\").replace(/\\bAlt\\b/i, \"Option\");\n  }\n\n  return shortcut.replace(/\\bCtrlOrCmd\\b/gi, \"Ctrl\");\n};\nconst viewportCoordsToSceneCoords = ({\n  clientX,\n  clientY\n}, {\n  zoom,\n  offsetLeft,\n  offsetTop,\n  scrollX,\n  scrollY\n}) => {\n  const x = (clientX - offsetLeft) / zoom.value - scrollX;\n  const y = (clientY - offsetTop) / zoom.value - scrollY;\n  return {\n    x,\n    y\n  };\n};\nconst sceneCoordsToViewportCoords = ({\n  sceneX,\n  sceneY\n}, {\n  zoom,\n  offsetLeft,\n  offsetTop,\n  scrollX,\n  scrollY\n}) => {\n  const x = (sceneX + scrollX) * zoom.value + offsetLeft;\n  const y = (sceneY + scrollY) * zoom.value + offsetTop;\n  return {\n    x,\n    y\n  };\n};\nconst getGlobalCSSVariable = name => getComputedStyle(document.documentElement).getPropertyValue(`--${name}`);\nconst RS_LTR_CHARS = \"A-Za-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02B8\\u0300-\\u0590\\u0800-\\u1FFF\" + \"\\u2C00-\\uFB1C\\uFDFE-\\uFE6F\\uFEFD-\\uFFFF\";\nconst RS_RTL_CHARS = \"\\u0591-\\u07FF\\uFB1D-\\uFDFD\\uFE70-\\uFEFC\";\nconst RE_RTL_CHECK = new RegExp(`^[^${RS_LTR_CHARS}]*[${RS_RTL_CHARS}]`);\n/**\r\n * Checks whether first directional character is RTL. Meaning whether it starts\r\n *  with RTL characters, or indeterminate (numbers etc.) characters followed by\r\n *  RTL.\r\n * See https://github.com/excalidraw/excalidraw/pull/1722#discussion_r436340171\r\n */\n\nconst isRTL = text => RE_RTL_CHECK.test(text);\nconst tupleToCoors = xyTuple => {\n  const [x, y] = xyTuple;\n  return {\n    x,\n    y\n  };\n};\n/** use as a rejectionHandler to mute filesystem Abort errors */\n\nconst muteFSAbortError = error => {\n  if ((error === null || error === void 0 ? void 0 : error.name) === \"AbortError\") {\n    console.warn(error);\n    return;\n  }\n\n  throw error;\n};\nconst findIndex = (array, cb, fromIndex = 0) => {\n  if (fromIndex < 0) {\n    fromIndex = array.length + fromIndex;\n  }\n\n  fromIndex = Math.min(array.length, Math.max(fromIndex, 0));\n  let index = fromIndex - 1;\n\n  while (++index < array.length) {\n    if (cb(array[index], index, array)) {\n      return index;\n    }\n  }\n\n  return -1;\n};\nconst findLastIndex = (array, cb, fromIndex = array.length - 1) => {\n  if (fromIndex < 0) {\n    fromIndex = array.length + fromIndex;\n  }\n\n  fromIndex = Math.min(array.length - 1, Math.max(fromIndex, 0));\n  let index = fromIndex + 1;\n\n  while (--index > -1) {\n    if (cb(array[index], index, array)) {\n      return index;\n    }\n  }\n\n  return -1;\n};\nconst isTransparent = color => {\n  const isRGBTransparent = color.length === 5 && color.substr(4, 1) === \"0\";\n  const isRRGGBBTransparent = color.length === 9 && color.substr(7, 2) === \"00\";\n  return isRGBTransparent || isRRGGBBTransparent || color === _colors__WEBPACK_IMPORTED_MODULE_0__.COLOR_PALETTE.transparent;\n};\nconst resolvablePromise = () => {\n  let resolve;\n  let reject;\n  const promise = new Promise((_resolve, _reject) => {\n    resolve = _resolve;\n    reject = _reject;\n  });\n  promise.resolve = resolve;\n  promise.reject = reject;\n  return promise;\n}; //https://stackoverflow.com/a/9462382/8418\n\nconst nFormatter = (num, digits) => {\n  const si = [{\n    value: 1,\n    symbol: \"b\"\n  }, {\n    value: 1e3,\n    symbol: \"k\"\n  }, {\n    value: 1e6,\n    symbol: \"M\"\n  }, {\n    value: 1e9,\n    symbol: \"G\"\n  }];\n  const rx = /\\.0+$|(\\.[0-9]*[1-9])0+$/;\n  let index;\n\n  for (index = si.length - 1; index > 0; index--) {\n    if (num >= si[index].value) {\n      break;\n    }\n  }\n\n  return (num / si[index].value).toFixed(digits).replace(rx, \"$1\") + si[index].symbol;\n};\nconst getVersion = () => {\n  var _a;\n\n  return ((_a = document.querySelector('meta[name=\"version\"]')) === null || _a === void 0 ? void 0 : _a.content) || _constants__WEBPACK_IMPORTED_MODULE_1__.DEFAULT_VERSION;\n}; // Adapted from https://github.com/Modernizr/Modernizr/blob/master/feature-detects/emoji.js\n\nconst supportsEmoji = () => {\n  const canvas = document.createElement(\"canvas\");\n  const ctx = canvas.getContext(\"2d\");\n\n  if (!ctx) {\n    return false;\n  }\n\n  const offset = 12;\n  ctx.fillStyle = \"#f00\";\n  ctx.textBaseline = \"top\";\n  ctx.font = \"32px Arial\"; // Modernizr used 🐨, but it is sort of supported on Windows 7.\n  // Luckily 😀 isn't supported.\n\n  ctx.fillText(\"😀\", 0, 0);\n  return ctx.getImageData(offset, offset, 1, 1).data[0] !== 0;\n};\nconst getNearestScrollableContainer = element => {\n  let parent = element.parentElement;\n\n  while (parent) {\n    if (parent === document.body) {\n      return document;\n    }\n\n    const {\n      overflowY\n    } = window.getComputedStyle(parent);\n    const hasScrollableContent = parent.scrollHeight > parent.clientHeight;\n\n    if (hasScrollableContent && (overflowY === \"auto\" || overflowY === \"scroll\" || overflowY === \"overlay\")) {\n      return parent;\n    }\n\n    parent = parent.parentElement;\n  }\n\n  return document;\n};\nconst focusNearestParent = element => {\n  let parent = element.parentElement;\n\n  while (parent) {\n    if (parent.tabIndex > -1) {\n      parent.focus();\n      return;\n    }\n\n    parent = parent.parentElement;\n  }\n};\nconst preventUnload = event => {\n  event.preventDefault(); // NOTE: modern browsers no longer allow showing a custom message here\n\n  event.returnValue = \"\";\n};\nconst bytesToHexString = bytes => {\n  return Array.from(bytes).map(byte => `0${byte.toString(16)}`.slice(-2)).join(\"\");\n};\nconst getUpdatedTimestamp = () => isTestEnv() ? 1 : Date.now();\n/**\r\n * Transforms array of objects containing `id` attribute,\r\n * or array of ids (strings), into a Map, keyd by `id`.\r\n */\n\nconst arrayToMap = items => {\n  return items.reduce((acc, element) => {\n    acc.set(typeof element === \"string\" ? element : element.id, element);\n    return acc;\n  }, new Map());\n};\nconst arrayToMapWithIndex = elements => elements.reduce((acc, element, idx) => {\n  acc.set(element.id, [element, idx]);\n  return acc;\n}, new Map());\nconst isTestEnv = () => \"development\" === \"test\";\nconst wrapEvent = (name, nativeEvent) => {\n  return new CustomEvent(name, {\n    detail: {\n      nativeEvent\n    },\n    cancelable: true\n  });\n};\nconst updateObject = (obj, updates) => {\n  let didChange = false;\n\n  for (const key in updates) {\n    const value = updates[key];\n\n    if (typeof value !== \"undefined\") {\n      if (obj[key] === value && ( // if object, always update because its attrs could have changed\n      typeof value !== \"object\" || value === null)) {\n        continue;\n      }\n\n      didChange = true;\n    }\n  }\n\n  if (!didChange) {\n    return obj;\n  }\n\n  return Object.assign(Object.assign({}, obj), updates);\n};\nconst isPrimitive = val => {\n  const type = typeof val;\n  return val == null || type !== \"object\" && type !== \"function\";\n};\nconst getFrame = () => {\n  try {\n    return window.self === window.top ? \"top\" : \"iframe\";\n  } catch (error) {\n    return \"iframe\";\n  }\n};\nconst isRunningInIframe = () => getFrame() === \"iframe\";\nconst isPromiseLike = value => {\n  return !!value && typeof value === \"object\" && \"then\" in value && \"catch\" in value && \"finally\" in value;\n};\nconst queryFocusableElements = container => {\n  const focusableElements = container === null || container === void 0 ? void 0 : container.querySelectorAll(\"button, a, input, select, textarea, div[tabindex], label[tabindex]\");\n  return focusableElements ? Array.from(focusableElements).filter(element => element.tabIndex > -1 && !element.disabled) : [];\n};\n/** use as a fallback after identity check (for perf reasons) */\n\nconst _defaultIsShallowComparatorFallback = (a, b) => {\n  // consider two empty arrays equal\n  if (Array.isArray(a) && Array.isArray(b) && a.length === 0 && b.length === 0) {\n    return true;\n  }\n\n  return a === b;\n};\n/**\r\n * Returns whether object/array is shallow equal.\r\n * Considers empty object/arrays as equal (whether top-level or second-level).\r\n */\n\n\nconst isShallowEqual = (objA, objB, comparators, debug = false) => {\n  const aKeys = Object.keys(objA);\n  const bKeys = Object.keys(objB);\n\n  if (aKeys.length !== bKeys.length) {\n    return false;\n  }\n\n  if (comparators && Array.isArray(comparators)) {\n    for (const key of comparators) {\n      const ret = objA[key] === objB[key] || _defaultIsShallowComparatorFallback(objA[key], objB[key]);\n\n      if (!ret) {\n        if (debug) {\n          console.warn(`%cisShallowEqual: ${key} not equal ->`, \"color: #8B4000\", objA[key], objB[key]);\n        }\n\n        return false;\n      }\n    }\n\n    return true;\n  }\n\n  return aKeys.every(key => {\n    const comparator = comparators === null || comparators === void 0 ? void 0 : comparators[key];\n    const ret = comparator ? comparator(objA[key], objB[key]) : objA[key] === objB[key] || _defaultIsShallowComparatorFallback(objA[key], objB[key]);\n\n    if (!ret && debug) {\n      console.warn(`%cisShallowEqual: ${key} not equal ->`, \"color: #8B4000\", objA[key], objB[key]);\n    }\n\n    return ret;\n  });\n}; // taken from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx\n\nconst composeEventHandlers = (originalEventHandler, ourEventHandler, {\n  checkForDefaultPrevented = true\n} = {}) => {\n  return function handleEvent(event) {\n    originalEventHandler === null || originalEventHandler === void 0 ? void 0 : originalEventHandler(event);\n\n    if (!checkForDefaultPrevented || !event.defaultPrevented) {\n      return ourEventHandler === null || ourEventHandler === void 0 ? void 0 : ourEventHandler(event);\n    }\n  };\n};\n/**\r\n * supply `null` as message if non-never value is valid, you just need to\r\n * typecheck against it\r\n */\n\nconst assertNever = (value, message, softAssert) => {\n  if (!message) {\n    return value;\n  }\n\n  if (softAssert) {\n    console.error(message);\n    return value;\n  }\n\n  throw new Error(message);\n};\n/**\r\n * Memoizes on values of `opts` object (strict equality).\r\n */\n\nconst memoize = func => {\n  let lastArgs;\n  let lastResult;\n\n  const ret = function (opts) {\n    const currentArgs = Object.entries(opts);\n\n    if (lastArgs) {\n      let argsAreEqual = true;\n\n      for (const [key, value] of currentArgs) {\n        if (lastArgs.get(key) !== value) {\n          argsAreEqual = false;\n          break;\n        }\n      }\n\n      if (argsAreEqual) {\n        return lastResult;\n      }\n    }\n\n    const result = func(opts);\n    lastArgs = new Map(currentArgs);\n    lastResult = result;\n    return result;\n  };\n\n  ret.clear = () => {\n    lastArgs = undefined;\n    lastResult = undefined;\n  };\n\n  return ret;\n};\n/** Checks if value is inside given collection. Useful for type-safety. */\n\nconst isMemberOf = (\n/** Set/Map/Array/Object */\ncollection,\n/** value to look for */\nvalue) => {\n  return collection instanceof Set || collection instanceof Map ? collection.has(value) : \"includes\" in collection ? collection.includes(value) : collection.hasOwnProperty(value);\n};\nconst cloneJSON = obj => JSON.parse(JSON.stringify(obj));\nconst isFiniteNumber = value => {\n  return typeof value === \"number\" && Number.isFinite(value);\n};\nconst updateStable = (prevValue, nextValue) => {\n  if (isShallowEqual(prevValue, nextValue)) {\n    return prevValue;\n  }\n\n  return nextValue;\n}; // implem\n\nfunction addEventListener(\n/**\r\n * allows for falsy values so you don't have to type check when adding\r\n * event listeners to optional elements\r\n */\ntarget, type, listener, options) {\n  var _a;\n\n  if (!target) {\n    return () => {};\n  }\n\n  (_a = target === null || target === void 0 ? void 0 : target.addEventListener) === null || _a === void 0 ? void 0 : _a.call(target, type, listener, options);\n  return () => {\n    var _a;\n\n    (_a = target === null || target === void 0 ? void 0 : target.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(target, type, listener, options);\n  };\n}\n\nconst average = (a, b) => (a + b) / 2;\n\nfunction getSvgPathFromStroke(points, closed = true) {\n  const len = points.length;\n\n  if (len < 4) {\n    return ``;\n  }\n\n  let a = points[0];\n  let b = points[1];\n  const c = points[2];\n  let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(2)},${b[1].toFixed(2)} ${average(b[0], c[0]).toFixed(2)},${average(b[1], c[1]).toFixed(2)} T`;\n\n  for (let i = 2, max = len - 1; i < max; i++) {\n    a = points[i];\n    b = points[i + 1];\n    result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(2)} `;\n  }\n\n  if (closed) {\n    result += \"Z\";\n  }\n\n  return result;\n}\nconst normalizeEOL = str => {\n  return str.replace(/\\r?\\n|\\r/g, \"\\n\");\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./utils.ts?");
 
 /***/ }),
 
@@ -3426,17 +3470,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
 
 /***/ }),
 
-/***/ "./components/LaserTool/LaserToolOverlay.scss":
-/*!****************************************************!*\
-  !*** ./components/LaserTool/LaserToolOverlay.scss ***!
-  \****************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://ExcalidrawLib/./components/LaserTool/LaserToolOverlay.scss?");
-
-/***/ }),
-
 /***/ "./components/LayerUI.scss":
 /*!*********************************!*\
   !*** ./components/LayerUI.scss ***!
@@ -3569,6 +3602,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
 
 /***/ }),
 
+/***/ "./components/SVGLayer.scss":
+/*!**********************************!*\
+  !*** ./components/SVGLayer.scss ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://ExcalidrawLib/./components/SVGLayer.scss?");
+
+/***/ }),
+
 /***/ "./components/Sidebar/Sidebar.scss":
 /*!*****************************************!*\
   !*** ./components/Sidebar/Sidebar.scss ***!
@@ -5251,7 +5295,7 @@ eval("module.exports = JSON.parse('{\"labels\":{\"paste\":\"Επικόλληση
 /***/ ((module) => {
 
 "use strict";
-eval("module.exports = JSON.parse('{\"labels\":{\"laser\":\"Toggle laser pointer\",\"paste\":\"Paste\",\"pasteAsPlaintext\":\"Paste as plaintext\",\"pasteCharts\":\"Paste charts\",\"selectAll\":\"Select all\",\"multiSelect\":\"Add element to selection\",\"moveCanvas\":\"Move canvas\",\"cut\":\"Cut\",\"copy\":\"Copy\",\"copyAsPng\":\"Copy to clipboard as PNG\",\"copyAsSvg\":\"Copy to clipboard as SVG\",\"copyText\":\"Copy to clipboard as text\",\"copySource\":\"Copy source to clipboard\",\"convertToCode\":\"Convert to code\",\"bringForward\":\"Bring forward\",\"sendToBack\":\"Send to back\",\"bringToFront\":\"Bring to front\",\"sendBackward\":\"Send backward\",\"delete\":\"Delete\",\"copyStyles\":\"Copy styles\",\"pasteStyles\":\"Paste styles\",\"stroke\":\"Stroke\",\"background\":\"Background\",\"fill\":\"Fill\",\"strokeWidth\":\"Stroke width\",\"strokeStyle\":\"Stroke style\",\"strokeStyle_solid\":\"Solid\",\"strokeStyle_dashed\":\"Dashed\",\"strokeStyle_dotted\":\"Dotted\",\"sloppiness\":\"Sloppiness\",\"opacity\":\"Opacity\",\"textAlign\":\"Text align\",\"edges\":\"Edges\",\"sharp\":\"Sharp\",\"round\":\"Round\",\"arrowheads\":\"Arrowheads\",\"arrowhead_none\":\"None\",\"arrowhead_arrow\":\"Arrow\",\"arrowhead_bar\":\"Bar\",\"arrowhead_circle\":\"Circle\",\"arrowhead_circle_outline\":\"Circle (outline)\",\"arrowhead_triangle\":\"Triangle\",\"arrowhead_triangle_outline\":\"Triangle (outline)\",\"arrowhead_diamond\":\"Diamond\",\"arrowhead_diamond_outline\":\"Diamond (outline)\",\"fontSize\":\"Font size\",\"fontFamily\":\"Font family\",\"addWatermark\":\"Add \\\\\"Made with Excalidraw\\\\\"\",\"handDrawn\":\"Hand-drawn\",\"normal\":\"Normal\",\"code\":\"Code\",\"localFont\":\"Local Font\",\"small\":\"Small\",\"medium\":\"Medium\",\"large\":\"Large\",\"veryLarge\":\"Very large\",\"solid\":\"Solid\",\"hachure\":\"Hachure\",\"zigzag\":\"Zigzag\",\"crossHatch\":\"Cross-hatch\",\"extraThin\":\"Extra thin\",\"thin\":\"Thin\",\"bold\":\"Bold\",\"left\":\"Left\",\"center\":\"Center\",\"right\":\"Right\",\"extraBold\":\"Extra bold\",\"architect\":\"Architect\",\"artist\":\"Artist\",\"cartoonist\":\"Cartoonist\",\"fileTitle\":\"File name\",\"colorPicker\":\"Color picker\",\"canvasColors\":\"Used on canvas\",\"canvasBackground\":\"Canvas background\",\"drawingCanvas\":\"Drawing canvas\",\"layers\":\"Layers\",\"actions\":\"Actions\",\"language\":\"Language\",\"liveCollaboration\":\"Live collaboration...\",\"duplicateSelection\":\"Duplicate\",\"untitled\":\"Untitled\",\"name\":\"Name\",\"yourName\":\"Your name\",\"madeWithExcalidraw\":\"Made with Excalidraw\",\"group\":\"Group selection\",\"ungroup\":\"Ungroup selection\",\"collaborators\":\"Collaborators\",\"showGrid\":\"Show grid\",\"addToLibrary\":\"Add to library\",\"removeFromLibrary\":\"Remove from library\",\"libraryLoadingMessage\":\"Loading library…\",\"libraries\":\"Browse libraries\",\"loadingScene\":\"Loading scene…\",\"align\":\"Align\",\"alignTop\":\"Align top\",\"alignBottom\":\"Align bottom\",\"alignLeft\":\"Align left\",\"alignRight\":\"Align right\",\"centerVertically\":\"Center vertically\",\"centerHorizontally\":\"Center horizontally\",\"distributeHorizontally\":\"Distribute horizontally\",\"distributeVertically\":\"Distribute vertically\",\"flipHorizontal\":\"Flip horizontal\",\"flipVertical\":\"Flip vertical\",\"viewMode\":\"View mode\",\"share\":\"Share\",\"showStroke\":\"Show stroke color picker\",\"showBackground\":\"Show background color picker\",\"toggleTheme\":\"Toggle theme\",\"personalLib\":\"Personal Library\",\"excalidrawLib\":\"Excalidraw Library\",\"decreaseFontSize\":\"Decrease font size\",\"increaseFontSize\":\"Increase font size\",\"unbindText\":\"Unbind text\",\"bindText\":\"Bind text to the container\",\"createContainerFromText\":\"Wrap text in a container\",\"link\":{\"edit\":\"Edit link\",\"editEmbed\":\"Edit link & embed\",\"create\":\"Create link\",\"createEmbed\":\"Create link & embed\",\"label\":\"Link\",\"labelEmbed\":\"Link & embed\",\"empty\":\"No link is set\"},\"lineEditor\":{\"edit\":\"Edit line\",\"exit\":\"Exit line editor\"},\"elementLock\":{\"lock\":\"Lock\",\"unlock\":\"Unlock\",\"lockAll\":\"Lock all\",\"unlockAll\":\"Unlock all\"},\"statusPublished\":\"Published\",\"sidebarLock\":\"Keep sidebar open\",\"selectAllElementsInFrame\":\"Select all elements in frame\",\"removeAllElementsFromFrame\":\"Remove all elements from frame\",\"eyeDropper\":\"Pick color from canvas\",\"textToDiagram\":\"Text to diagram\",\"prompt\":\"Prompt\"},\"library\":{\"noItems\":\"No items added yet...\",\"hint_emptyLibrary\":\"Select an item on canvas to add it here, or install a library from the public repository, below.\",\"hint_emptyPrivateLibrary\":\"Select an item on canvas to add it here.\"},\"buttons\":{\"clearReset\":\"Reset the canvas\",\"exportJSON\":\"Export to file\",\"exportImage\":\"Export image...\",\"export\":\"Save to...\",\"copyToClipboard\":\"Copy to clipboard\",\"save\":\"Save to current file\",\"saveAs\":\"Save as\",\"load\":\"Open\",\"getShareableLink\":\"Get shareable link\",\"close\":\"Close\",\"selectLanguage\":\"Select language\",\"scrollBackToContent\":\"Scroll back to content\",\"zoomIn\":\"Zoom in\",\"zoomOut\":\"Zoom out\",\"resetZoom\":\"Reset zoom\",\"menu\":\"Menu\",\"done\":\"Done\",\"edit\":\"Edit\",\"undo\":\"Undo\",\"redo\":\"Redo\",\"resetLibrary\":\"Reset library\",\"createNewRoom\":\"Create new room\",\"fullScreen\":\"Full screen\",\"darkMode\":\"Dark mode\",\"lightMode\":\"Light mode\",\"zenMode\":\"Zen mode\",\"objectsSnapMode\":\"Snap to objects\",\"exitZenMode\":\"Exit zen mode\",\"cancel\":\"Cancel\",\"clear\":\"Clear\",\"remove\":\"Remove\",\"embed\":\"Toggle embedding\",\"publishLibrary\":\"Publish\",\"submit\":\"Submit\",\"confirm\":\"Confirm\",\"embeddableInteractionButton\":\"Click to interact\"},\"alerts\":{\"clearReset\":\"This will clear the whole canvas. Are you sure?\",\"couldNotCreateShareableLink\":\"Couldn\\'t create shareable link.\",\"couldNotCreateShareableLinkTooBig\":\"Couldn\\'t create shareable link: the scene is too big\",\"couldNotLoadInvalidFile\":\"Couldn\\'t load invalid file\",\"importBackendFailed\":\"Importing from backend failed.\",\"cannotExportEmptyCanvas\":\"Cannot export empty canvas.\",\"couldNotCopyToClipboard\":\"Couldn\\'t copy to clipboard.\",\"decryptFailed\":\"Couldn\\'t decrypt data.\",\"uploadedSecurly\":\"The upload has been secured with end-to-end encryption, which means that Excalidraw server and third parties can\\'t read the content.\",\"loadSceneOverridePrompt\":\"Loading external drawing will replace your existing content. Do you wish to continue?\",\"collabStopOverridePrompt\":\"Stopping the session will overwrite your previous, locally stored drawing. Are you sure?\\\\n\\\\n(If you want to keep your local drawing, simply close the browser tab instead.)\",\"errorAddingToLibrary\":\"Couldn\\'t add item to the library\",\"errorRemovingFromLibrary\":\"Couldn\\'t remove item from the library\",\"confirmAddLibrary\":\"This will add {{numShapes}} shape(s) to your library. Are you sure?\",\"imageDoesNotContainScene\":\"This image does not seem to contain any scene data. Have you enabled scene embedding during export?\",\"cannotRestoreFromImage\":\"Scene couldn\\'t be restored from this image file\",\"invalidSceneUrl\":\"Couldn\\'t import scene from the supplied URL. It\\'s either malformed, or doesn\\'t contain valid Excalidraw JSON data.\",\"resetLibrary\":\"This will clear your library. Are you sure?\",\"removeItemsFromsLibrary\":\"Delete {{count}} item(s) from library?\",\"invalidEncryptionKey\":\"Encryption key must be of 22 characters. Live collaboration is disabled.\",\"collabOfflineWarning\":\"No internet connection available.\\\\nYour changes will not be saved!\"},\"errors\":{\"unsupportedFileType\":\"Unsupported file type.\",\"imageInsertError\":\"Couldn\\'t insert image. Try again later...\",\"fileTooBig\":\"File is too big. Maximum allowed size is {{maxSize}}.\",\"svgImageInsertError\":\"Couldn\\'t insert SVG image. The SVG markup looks invalid.\",\"failedToFetchImage\":\"Failed to fetch image.\",\"invalidSVGString\":\"Invalid SVG.\",\"cannotResolveCollabServer\":\"Couldn\\'t connect to the collab server. Please reload the page and try again.\",\"importLibraryError\":\"Couldn\\'t load library\",\"collabSaveFailed\":\"Couldn\\'t save to the backend database. If problems persist, you should save your file locally to ensure you don\\'t lose your work.\",\"collabSaveFailed_sizeExceeded\":\"Couldn\\'t save to the backend database, the canvas seems to be too big. You should save the file locally to ensure you don\\'t lose your work.\",\"imageToolNotSupported\":\"Images are disabled.\",\"brave_measure_text_error\":{\"line1\":\"Looks like you are using Brave browser with the <bold>Aggressively Block Fingerprinting</bold> setting enabled.\",\"line2\":\"This could result in breaking the <bold>Text Elements</bold> in your drawings.\",\"line3\":\"We strongly recommend disabling this setting. You can follow <link>these steps</link> on how to do so.\",\"line4\":\"If disabling this setting doesn\\'t fix the display of text elements, please open an <issueLink>issue</issueLink> on our GitHub, or write us on <discordLink>Discord</discordLink>\"},\"libraryElementTypeError\":{\"embeddable\":\"Embeddable elements cannot be added to the library.\",\"iframe\":\"IFrame elements cannot be added to the library.\",\"image\":\"Support for adding images to the library coming soon!\"},\"asyncPasteFailedOnRead\":\"Couldn\\'t paste (couldn\\'t read from system clipboard).\",\"asyncPasteFailedOnParse\":\"Couldn\\'t paste.\",\"copyToSystemClipboardFailed\":\"Couldn\\'t copy to clipboard.\"},\"toolBar\":{\"selection\":\"Selection\",\"image\":\"Insert image\",\"rectangle\":\"Rectangle\",\"diamond\":\"Diamond\",\"ellipse\":\"Ellipse\",\"arrow\":\"Arrow\",\"line\":\"Line\",\"freedraw\":\"Draw\",\"text\":\"Text\",\"library\":\"Library\",\"lock\":\"Keep selected tool active after drawing\",\"penMode\":\"Pen mode - prevent touch\",\"link\":\"Add/ Update link for a selected shape\",\"eraser\":\"Eraser\",\"frame\":\"Frame tool\",\"magicframe\":\"Wireframe to code\",\"embeddable\":\"Web Embed\",\"laser\":\"Laser pointer\",\"hand\":\"Hand (panning tool)\",\"extraTools\":\"More tools\",\"mermaidToExcalidraw\":\"Mermaid to Excalidraw\",\"magicSettings\":\"AI settings\"},\"headings\":{\"canvasActions\":\"Canvas actions\",\"selectedShapeActions\":\"Selected shape actions\",\"shapes\":\"Shapes\"},\"hints\":{\"canvasPanning\":\"To move canvas, hold mouse wheel or spacebar while dragging, or use the hand tool\",\"linearElement\":\"Click to start multiple points, drag for single line\",\"freeDraw\":\"Click and drag, release when you\\'re finished\",\"text\":\"Tip: you can also add text by double-clicking anywhere with the selection tool\",\"embeddable\":\"Click-drag to create a website embed\",\"text_selected\":\"Double-click or press ENTER to edit text\",\"text_editing\":\"Press Escape or CtrlOrCmd+ENTER to finish editing\",\"linearElementMulti\":\"Click on last point or press Escape or Enter to finish\",\"lockAngle\":\"You can constrain angle by holding SHIFT\",\"resize\":\"You can constrain proportions by holding SHIFT while resizing,\\\\nhold ALT to resize from the center\",\"resizeImage\":\"You can resize freely by holding SHIFT,\\\\nhold ALT to resize from the center\",\"rotate\":\"You can constrain angles by holding SHIFT while rotating\",\"lineEditor_info\":\"Hold CtrlOrCmd and Double-click or press CtrlOrCmd + Enter to edit points\",\"lineEditor_pointSelected\":\"Press Delete to remove point(s),\\\\nCtrlOrCmd+D to duplicate, or drag to move\",\"lineEditor_nothingSelected\":\"Select a point to edit (hold SHIFT to select multiple),\\\\nor hold Alt and click to add new points\",\"placeImage\":\"Click to place the image, or click and drag to set its size manually\",\"publishLibrary\":\"Publish your own library\",\"bindTextToElement\":\"Press enter to add text\",\"deepBoxSelect\":\"Hold CtrlOrCmd to deep select, and to prevent dragging\",\"eraserRevert\":\"Hold Alt to revert the elements marked for deletion\",\"firefox_clipboard_write\":\"This feature can likely be enabled by setting the \\\\\"dom.events.asyncClipboard.clipboardItem\\\\\" flag to \\\\\"true\\\\\". To change the browser flags in Firefox, visit the \\\\\"about:config\\\\\" page.\",\"disableSnapping\":\"Hold CtrlOrCmd to disable snapping\"},\"canvasError\":{\"cannotShowPreview\":\"Cannot show preview\",\"canvasTooBig\":\"The canvas may be too big.\",\"canvasTooBigTip\":\"Tip: try moving the farthest elements a bit closer together.\"},\"errorSplash\":{\"headingMain\":\"Encountered an error. Try <button>reloading the page</button>.\",\"clearCanvasMessage\":\"If reloading doesn\\'t work, try <button>clearing the canvas</button>.\",\"clearCanvasCaveat\":\" This will result in loss of work \",\"trackedToSentry\":\"The error with identifier {{eventId}} was tracked on our system.\",\"openIssueMessage\":\"We were very cautious not to include your scene information on the error. If your scene is not private, please consider following up on our <button>bug tracker</button>. Please include information below by copying and pasting into the GitHub issue.\",\"sceneContent\":\"Scene content:\"},\"roomDialog\":{\"desc_intro\":\"You can invite people to your current scene to collaborate with you.\",\"desc_privacy\":\"Don\\'t worry, the session uses end-to-end encryption, so whatever you draw will stay private. Not even our server will be able to see what you come up with.\",\"button_startSession\":\"Start session\",\"button_stopSession\":\"Stop session\",\"desc_inProgressIntro\":\"Live-collaboration session is now in progress.\",\"desc_shareLink\":\"Share this link with anyone you want to collaborate with:\",\"desc_exitSession\":\"Stopping the session will disconnect you from the room, but you\\'ll be able to continue working with the scene, locally. Note that this won\\'t affect other people, and they\\'ll still be able to collaborate on their version.\",\"shareTitle\":\"Join a live collaboration session on Excalidraw\"},\"errorDialog\":{\"title\":\"Error\"},\"exportDialog\":{\"disk_title\":\"Save to disk\",\"disk_details\":\"Export the scene data to a file from which you can import later.\",\"disk_button\":\"Save to file\",\"link_title\":\"Shareable link\",\"link_details\":\"Export as a read-only link.\",\"link_button\":\"Export to Link\",\"excalidrawplus_description\":\"Save the scene to your Excalidraw+ workspace.\",\"excalidrawplus_button\":\"Export\",\"excalidrawplus_exportError\":\"Couldn\\'t export to Excalidraw+ at this moment...\"},\"helpDialog\":{\"blog\":\"Read our blog\",\"click\":\"click\",\"deepSelect\":\"Deep select\",\"deepBoxSelect\":\"Deep select within box, and prevent dragging\",\"curvedArrow\":\"Curved arrow\",\"curvedLine\":\"Curved line\",\"documentation\":\"Documentation\",\"doubleClick\":\"double-click\",\"drag\":\"drag\",\"editor\":\"Editor\",\"editLineArrowPoints\":\"Edit line/arrow points\",\"editText\":\"Edit text / add label\",\"github\":\"Found an issue? Submit\",\"howto\":\"Follow our guides\",\"or\":\"or\",\"preventBinding\":\"Prevent arrow binding\",\"tools\":\"Tools\",\"shortcuts\":\"Keyboard shortcuts\",\"textFinish\":\"Finish editing (text editor)\",\"textNewLine\":\"Add new line (text editor)\",\"title\":\"Help\",\"view\":\"View\",\"zoomToFit\":\"Zoom to fit all elements\",\"zoomToSelection\":\"Zoom to selection\",\"toggleElementLock\":\"Lock/unlock selection\",\"movePageUpDown\":\"Move page up/down\",\"movePageLeftRight\":\"Move page left/right\"},\"clearCanvasDialog\":{\"title\":\"Clear canvas\"},\"publishDialog\":{\"title\":\"Publish library\",\"itemName\":\"Item name\",\"authorName\":\"Author name\",\"githubUsername\":\"GitHub username\",\"twitterUsername\":\"Twitter username\",\"libraryName\":\"Library name\",\"libraryDesc\":\"Library description\",\"website\":\"Website\",\"placeholder\":{\"authorName\":\"Your name or username\",\"libraryName\":\"Name of your library\",\"libraryDesc\":\"Description of your library to help people understand its usage\",\"githubHandle\":\"GitHub handle (optional), so you can edit the library once submitted for review\",\"twitterHandle\":\"Twitter username (optional), so we know who to credit when promoting over Twitter\",\"website\":\"Link to your personal website or elsewhere (optional)\"},\"errors\":{\"required\":\"Required\",\"website\":\"Enter a valid URL\"},\"noteDescription\":\"Submit your library to be included in the <link>public library repository</link> for other people to use in their drawings.\",\"noteGuidelines\":\"The library needs to be manually approved first. Please read the <link>guidelines</link> before submitting. You will need a GitHub account to communicate and make changes if requested, but it is not strictly required.\",\"noteLicense\":\"By submitting, you agree the library will be published under the <link>MIT License</link>, which in short means anyone can use them without restrictions.\",\"noteItems\":\"Each library item must have its own name so it\\'s filterable. The following library items will be included:\",\"atleastOneLibItem\":\"Please select at least one library item to get started\",\"republishWarning\":\"Note: some of the selected items are marked as already published/submitted. You should only resubmit items when updating an existing library or submission.\"},\"publishSuccessDialog\":{\"title\":\"Library submitted\",\"content\":\"Thank you {{authorName}}. Your library has been submitted for review. You can track the status <link>here</link>\"},\"confirmDialog\":{\"resetLibrary\":\"Reset library\",\"removeItemsFromLib\":\"Remove selected items from library\"},\"imageExportDialog\":{\"header\":\"Export image\",\"label\":{\"withBackground\":\"Background\",\"onlySelected\":\"Only selected\",\"darkMode\":\"Dark mode\",\"embedScene\":\"Embed scene\",\"scale\":\"Scale\",\"padding\":\"Padding\"},\"tooltip\":{\"embedScene\":\"Scene data will be saved into the exported PNG/SVG file so that the scene can be restored from it.\\\\nWill increase exported file size.\"},\"title\":{\"exportToPng\":\"Export to PNG\",\"exportToSvg\":\"Export to SVG\",\"copyPngToClipboard\":\"Copy PNG to clipboard\"},\"button\":{\"exportToPng\":\"PNG\",\"exportToSvg\":\"SVG\",\"copyPngToClipboard\":\"Copy to clipboard\"}},\"encrypted\":{\"tooltip\":\"Your drawings are end-to-end encrypted so Excalidraw\\'s servers will never see them.\",\"link\":\"Blog post on end-to-end encryption in Excalidraw\"},\"stats\":{\"angle\":\"Angle\",\"element\":\"Element\",\"elements\":\"Elements\",\"height\":\"Height\",\"scene\":\"Scene\",\"selected\":\"Selected\",\"storage\":\"Storage\",\"title\":\"Stats for nerds\",\"total\":\"Total\",\"version\":\"Version\",\"versionCopy\":\"Click to copy\",\"versionNotAvailable\":\"Version not available\",\"width\":\"Width\"},\"toast\":{\"addedToLibrary\":\"Added to library\",\"copyStyles\":\"Copied styles.\",\"copyToClipboard\":\"Copied to clipboard.\",\"copyToClipboardAsPng\":\"Copied {{exportSelection}} to clipboard as PNG\\\\n({{exportColorScheme}})\",\"fileSaved\":\"File saved.\",\"fileSavedToFilename\":\"Saved to {filename}\",\"canvas\":\"canvas\",\"selection\":\"selection\",\"pasteAsSingleElement\":\"Use {{shortcut}} to paste as a single element,\\\\nor paste into an existing text editor\",\"unableToEmbed\":\"Embedding this url is currently not allowed. Raise an issue on GitHub to request the url whitelisted\",\"unrecognizedLinkFormat\":\"The link you embedded does not match the expected format. Please try to paste the \\'embed\\' string provided by the source site\"},\"colors\":{\"transparent\":\"Transparent\",\"black\":\"Black\",\"white\":\"White\",\"red\":\"Red\",\"pink\":\"Pink\",\"grape\":\"Grape\",\"violet\":\"Violet\",\"gray\":\"Gray\",\"blue\":\"Blue\",\"cyan\":\"Cyan\",\"teal\":\"Teal\",\"green\":\"Green\",\"yellow\":\"Yellow\",\"orange\":\"Orange\",\"bronze\":\"Bronze\"},\"welcomeScreen\":{\"app\":{\"center_heading\":\"All your data is saved locally in your browser.\",\"center_heading_plus\":\"Did you want to go to the Excalidraw+ instead?\",\"menuHint\":\"Export, preferences, languages, ...\"},\"defaults\":{\"menuHint\":\"Export, preferences, and more...\",\"center_heading\":\"Diagrams. Made. Simple.\",\"toolbarHint\":\"Pick a tool & Start drawing!\",\"helpHint\":\"Shortcuts & help\"}},\"colorPicker\":{\"mostUsedCustomColors\":\"Most used custom colors\",\"colors\":\"Colors\",\"shades\":\"Shades\",\"hexCode\":\"Hex code\",\"noShades\":\"No shades available for this color\"},\"overwriteConfirm\":{\"action\":{\"exportToImage\":{\"title\":\"Export as image\",\"button\":\"Export as image\",\"description\":\"Export the scene data as an image from which you can import later.\"},\"saveToDisk\":{\"title\":\"Save to disk\",\"button\":\"Save to disk\",\"description\":\"Export the scene data to a file from which you can import later.\"},\"excalidrawPlus\":{\"title\":\"Excalidraw+\",\"button\":\"Export to Excalidraw+\",\"description\":\"Save the scene to your Excalidraw+ workspace.\"}},\"modal\":{\"loadFromFile\":{\"title\":\"Load from file\",\"button\":\"Load from file\",\"description\":\"Loading from a file will <bold>replace your existing content</bold>.<br></br>You can back up your drawing first using one of the options below.\"},\"shareableLink\":{\"title\":\"Load from link\",\"button\":\"Replace my content\",\"description\":\"Loading external drawing will <bold>replace your existing content</bold>.<br></br>You can back up your drawing first by using one of the options below.\"}}},\"mermaid\":{\"title\":\"Mermaid to Excalidraw\",\"button\":\"Insert\",\"description\":\"Currently only <flowchartLink>Flowchart</flowchartLink>,<sequenceLink> Sequence, </sequenceLink> and <classLink>Class </classLink>Diagrams are supported. The other types will be rendered as image in Excalidraw.\",\"syntax\":\"Mermaid Syntax\",\"preview\":\"Preview\"},\"userList\":{\"search\":{\"placeholder\":\"Quick search\",\"empty\":\"No users found\"},\"hint\":{\"text\":\"Click on user to follow\",\"followStatus\":\"You\\'re currently following this user\"}}}');\n\n//# sourceURL=webpack://ExcalidrawLib/./locales/en.json?");
+eval("module.exports = JSON.parse('{\"labels\":{\"laser\":\"Toggle laser pointer\",\"paste\":\"Paste\",\"pasteAsPlaintext\":\"Paste as plaintext\",\"pasteCharts\":\"Paste charts\",\"selectAll\":\"Select all\",\"multiSelect\":\"Add element to selection\",\"moveCanvas\":\"Move canvas\",\"cut\":\"Cut\",\"copy\":\"Copy\",\"copyAsPng\":\"Copy to clipboard as PNG\",\"copyAsSvg\":\"Copy to clipboard as SVG\",\"copyText\":\"Copy to clipboard as text\",\"copySource\":\"Copy source to clipboard\",\"convertToCode\":\"Convert to code\",\"bringForward\":\"Bring forward\",\"sendToBack\":\"Send to back\",\"bringToFront\":\"Bring to front\",\"sendBackward\":\"Send backward\",\"delete\":\"Delete\",\"copyStyles\":\"Copy styles\",\"pasteStyles\":\"Paste styles\",\"stroke\":\"Stroke\",\"background\":\"Background\",\"fill\":\"Fill\",\"strokeWidth\":\"Stroke width\",\"strokeStyle\":\"Stroke style\",\"strokeStyle_solid\":\"Solid\",\"strokeStyle_dashed\":\"Dashed\",\"strokeStyle_dotted\":\"Dotted\",\"sloppiness\":\"Sloppiness\",\"opacity\":\"Opacity\",\"textAlign\":\"Text align\",\"edges\":\"Edges\",\"sharp\":\"Sharp\",\"round\":\"Round\",\"arrowheads\":\"Arrowheads\",\"arrowhead_none\":\"None\",\"arrowhead_arrow\":\"Arrow\",\"arrowhead_bar\":\"Bar\",\"arrowhead_circle\":\"Circle\",\"arrowhead_circle_outline\":\"Circle (outline)\",\"arrowhead_triangle\":\"Triangle\",\"arrowhead_triangle_outline\":\"Triangle (outline)\",\"arrowhead_diamond\":\"Diamond\",\"arrowhead_diamond_outline\":\"Diamond (outline)\",\"fontSize\":\"Font size\",\"fontFamily\":\"Font family\",\"addWatermark\":\"Add \\\\\"Made with Excalidraw\\\\\"\",\"handDrawn\":\"Hand-drawn\",\"normal\":\"Normal\",\"code\":\"Code\",\"localFont\":\"Local Font\",\"small\":\"Small\",\"medium\":\"Medium\",\"large\":\"Large\",\"veryLarge\":\"Very large\",\"solid\":\"Solid\",\"hachure\":\"Hachure\",\"zigzag\":\"Zigzag\",\"crossHatch\":\"Cross-hatch\",\"extraThin\":\"Extra thin\",\"thin\":\"Thin\",\"bold\":\"Bold\",\"left\":\"Left\",\"center\":\"Center\",\"right\":\"Right\",\"extraBold\":\"Extra bold\",\"architect\":\"Architect\",\"artist\":\"Artist\",\"cartoonist\":\"Cartoonist\",\"fileTitle\":\"File name\",\"colorPicker\":\"Color picker\",\"canvasColors\":\"Used on canvas\",\"canvasBackground\":\"Canvas background\",\"drawingCanvas\":\"Drawing canvas\",\"layers\":\"Layers\",\"actions\":\"Actions\",\"language\":\"Language\",\"liveCollaboration\":\"Live collaboration...\",\"duplicateSelection\":\"Duplicate\",\"untitled\":\"Untitled\",\"name\":\"Name\",\"yourName\":\"Your name\",\"madeWithExcalidraw\":\"Made with Excalidraw\",\"group\":\"Group selection\",\"ungroup\":\"Ungroup selection\",\"collaborators\":\"Collaborators\",\"showGrid\":\"Show grid\",\"addToLibrary\":\"Add to library\",\"removeFromLibrary\":\"Remove from library\",\"libraryLoadingMessage\":\"Loading library…\",\"libraries\":\"Browse libraries\",\"loadingScene\":\"Loading scene…\",\"align\":\"Align\",\"alignTop\":\"Align top\",\"alignBottom\":\"Align bottom\",\"alignLeft\":\"Align left\",\"alignRight\":\"Align right\",\"centerVertically\":\"Center vertically\",\"centerHorizontally\":\"Center horizontally\",\"distributeHorizontally\":\"Distribute horizontally\",\"distributeVertically\":\"Distribute vertically\",\"flipHorizontal\":\"Flip horizontal\",\"flipVertical\":\"Flip vertical\",\"viewMode\":\"View mode\",\"share\":\"Share\",\"showStroke\":\"Show stroke color picker\",\"showBackground\":\"Show background color picker\",\"toggleTheme\":\"Toggle theme\",\"personalLib\":\"Personal Library\",\"excalidrawLib\":\"Excalidraw Library\",\"decreaseFontSize\":\"Decrease font size\",\"increaseFontSize\":\"Increase font size\",\"unbindText\":\"Unbind text\",\"bindText\":\"Bind text to the container\",\"createContainerFromText\":\"Wrap text in a container\",\"link\":{\"edit\":\"Edit link\",\"editEmbed\":\"Edit link & embed\",\"create\":\"Create link\",\"createEmbed\":\"Create link & embed\",\"label\":\"Link\",\"labelEmbed\":\"Link & embed\",\"empty\":\"No link is set\"},\"lineEditor\":{\"edit\":\"Edit line\",\"exit\":\"Exit line editor\"},\"elementLock\":{\"lock\":\"Lock\",\"unlock\":\"Unlock\",\"lockAll\":\"Lock all\",\"unlockAll\":\"Unlock all\"},\"statusPublished\":\"Published\",\"sidebarLock\":\"Keep sidebar open\",\"selectAllElementsInFrame\":\"Select all elements in frame\",\"removeAllElementsFromFrame\":\"Remove all elements from frame\",\"eyeDropper\":\"Pick color from canvas\",\"textToDiagram\":\"Text to diagram\",\"prompt\":\"Prompt\",\"followUs\":\"Follow us\",\"discordChat\":\"Discord chat\"},\"library\":{\"noItems\":\"No items added yet...\",\"hint_emptyLibrary\":\"Select an item on canvas to add it here, or install a library from the public repository, below.\",\"hint_emptyPrivateLibrary\":\"Select an item on canvas to add it here.\"},\"buttons\":{\"clearReset\":\"Reset the canvas\",\"exportJSON\":\"Export to file\",\"exportImage\":\"Export image...\",\"export\":\"Save to...\",\"copyToClipboard\":\"Copy to clipboard\",\"save\":\"Save to current file\",\"saveAs\":\"Save as\",\"load\":\"Open\",\"getShareableLink\":\"Get shareable link\",\"close\":\"Close\",\"selectLanguage\":\"Select language\",\"scrollBackToContent\":\"Scroll back to content\",\"zoomIn\":\"Zoom in\",\"zoomOut\":\"Zoom out\",\"resetZoom\":\"Reset zoom\",\"menu\":\"Menu\",\"done\":\"Done\",\"edit\":\"Edit\",\"undo\":\"Undo\",\"redo\":\"Redo\",\"resetLibrary\":\"Reset library\",\"createNewRoom\":\"Create new room\",\"fullScreen\":\"Full screen\",\"darkMode\":\"Dark mode\",\"lightMode\":\"Light mode\",\"zenMode\":\"Zen mode\",\"objectsSnapMode\":\"Snap to objects\",\"exitZenMode\":\"Exit zen mode\",\"cancel\":\"Cancel\",\"clear\":\"Clear\",\"remove\":\"Remove\",\"embed\":\"Toggle embedding\",\"publishLibrary\":\"Publish\",\"submit\":\"Submit\",\"confirm\":\"Confirm\",\"embeddableInteractionButton\":\"Click to interact\"},\"alerts\":{\"clearReset\":\"This will clear the whole canvas. Are you sure?\",\"couldNotCreateShareableLink\":\"Couldn\\'t create shareable link.\",\"couldNotCreateShareableLinkTooBig\":\"Couldn\\'t create shareable link: the scene is too big\",\"couldNotLoadInvalidFile\":\"Couldn\\'t load invalid file\",\"importBackendFailed\":\"Importing from backend failed.\",\"cannotExportEmptyCanvas\":\"Cannot export empty canvas.\",\"couldNotCopyToClipboard\":\"Couldn\\'t copy to clipboard.\",\"decryptFailed\":\"Couldn\\'t decrypt data.\",\"uploadedSecurly\":\"The upload has been secured with end-to-end encryption, which means that Excalidraw server and third parties can\\'t read the content.\",\"loadSceneOverridePrompt\":\"Loading external drawing will replace your existing content. Do you wish to continue?\",\"collabStopOverridePrompt\":\"Stopping the session will overwrite your previous, locally stored drawing. Are you sure?\\\\n\\\\n(If you want to keep your local drawing, simply close the browser tab instead.)\",\"errorAddingToLibrary\":\"Couldn\\'t add item to the library\",\"errorRemovingFromLibrary\":\"Couldn\\'t remove item from the library\",\"confirmAddLibrary\":\"This will add {{numShapes}} shape(s) to your library. Are you sure?\",\"imageDoesNotContainScene\":\"This image does not seem to contain any scene data. Have you enabled scene embedding during export?\",\"cannotRestoreFromImage\":\"Scene couldn\\'t be restored from this image file\",\"invalidSceneUrl\":\"Couldn\\'t import scene from the supplied URL. It\\'s either malformed, or doesn\\'t contain valid Excalidraw JSON data.\",\"resetLibrary\":\"This will clear your library. Are you sure?\",\"removeItemsFromsLibrary\":\"Delete {{count}} item(s) from library?\",\"invalidEncryptionKey\":\"Encryption key must be of 22 characters. Live collaboration is disabled.\",\"collabOfflineWarning\":\"No internet connection available.\\\\nYour changes will not be saved!\"},\"errors\":{\"unsupportedFileType\":\"Unsupported file type.\",\"imageInsertError\":\"Couldn\\'t insert image. Try again later...\",\"fileTooBig\":\"File is too big. Maximum allowed size is {{maxSize}}.\",\"svgImageInsertError\":\"Couldn\\'t insert SVG image. The SVG markup looks invalid.\",\"failedToFetchImage\":\"Failed to fetch image.\",\"invalidSVGString\":\"Invalid SVG.\",\"cannotResolveCollabServer\":\"Couldn\\'t connect to the collab server. Please reload the page and try again.\",\"importLibraryError\":\"Couldn\\'t load library\",\"collabSaveFailed\":\"Couldn\\'t save to the backend database. If problems persist, you should save your file locally to ensure you don\\'t lose your work.\",\"collabSaveFailed_sizeExceeded\":\"Couldn\\'t save to the backend database, the canvas seems to be too big. You should save the file locally to ensure you don\\'t lose your work.\",\"imageToolNotSupported\":\"Images are disabled.\",\"brave_measure_text_error\":{\"line1\":\"Looks like you are using Brave browser with the <bold>Aggressively Block Fingerprinting</bold> setting enabled.\",\"line2\":\"This could result in breaking the <bold>Text Elements</bold> in your drawings.\",\"line3\":\"We strongly recommend disabling this setting. You can follow <link>these steps</link> on how to do so.\",\"line4\":\"If disabling this setting doesn\\'t fix the display of text elements, please open an <issueLink>issue</issueLink> on our GitHub, or write us on <discordLink>Discord</discordLink>\"},\"libraryElementTypeError\":{\"embeddable\":\"Embeddable elements cannot be added to the library.\",\"iframe\":\"IFrame elements cannot be added to the library.\",\"image\":\"Support for adding images to the library coming soon!\"},\"asyncPasteFailedOnRead\":\"Couldn\\'t paste (couldn\\'t read from system clipboard).\",\"asyncPasteFailedOnParse\":\"Couldn\\'t paste.\",\"copyToSystemClipboardFailed\":\"Couldn\\'t copy to clipboard.\"},\"toolBar\":{\"selection\":\"Selection\",\"image\":\"Insert image\",\"rectangle\":\"Rectangle\",\"diamond\":\"Diamond\",\"ellipse\":\"Ellipse\",\"arrow\":\"Arrow\",\"line\":\"Line\",\"freedraw\":\"Draw\",\"text\":\"Text\",\"library\":\"Library\",\"lock\":\"Keep selected tool active after drawing\",\"penMode\":\"Pen mode - prevent touch\",\"link\":\"Add/ Update link for a selected shape\",\"eraser\":\"Eraser\",\"frame\":\"Frame tool\",\"magicframe\":\"Wireframe to code\",\"embeddable\":\"Web Embed\",\"laser\":\"Laser pointer\",\"hand\":\"Hand (panning tool)\",\"extraTools\":\"More tools\",\"mermaidToExcalidraw\":\"Mermaid to Excalidraw\",\"magicSettings\":\"AI settings\"},\"headings\":{\"canvasActions\":\"Canvas actions\",\"selectedShapeActions\":\"Selected shape actions\",\"shapes\":\"Shapes\"},\"hints\":{\"canvasPanning\":\"To move canvas, hold mouse wheel or spacebar while dragging, or use the hand tool\",\"linearElement\":\"Click to start multiple points, drag for single line\",\"freeDraw\":\"Click and drag, release when you\\'re finished\",\"text\":\"Tip: you can also add text by double-clicking anywhere with the selection tool\",\"embeddable\":\"Click-drag to create a website embed\",\"text_selected\":\"Double-click or press ENTER to edit text\",\"text_editing\":\"Press Escape or CtrlOrCmd+ENTER to finish editing\",\"linearElementMulti\":\"Click on last point or press Escape or Enter to finish\",\"lockAngle\":\"You can constrain angle by holding SHIFT\",\"resize\":\"You can constrain proportions by holding SHIFT while resizing,\\\\nhold ALT to resize from the center\",\"resizeImage\":\"You can resize freely by holding SHIFT,\\\\nhold ALT to resize from the center\",\"rotate\":\"You can constrain angles by holding SHIFT while rotating\",\"lineEditor_info\":\"Hold CtrlOrCmd and Double-click or press CtrlOrCmd + Enter to edit points\",\"lineEditor_pointSelected\":\"Press Delete to remove point(s),\\\\nCtrlOrCmd+D to duplicate, or drag to move\",\"lineEditor_nothingSelected\":\"Select a point to edit (hold SHIFT to select multiple),\\\\nor hold Alt and click to add new points\",\"placeImage\":\"Click to place the image, or click and drag to set its size manually\",\"publishLibrary\":\"Publish your own library\",\"bindTextToElement\":\"Press enter to add text\",\"deepBoxSelect\":\"Hold CtrlOrCmd to deep select, and to prevent dragging\",\"eraserRevert\":\"Hold Alt to revert the elements marked for deletion\",\"firefox_clipboard_write\":\"This feature can likely be enabled by setting the \\\\\"dom.events.asyncClipboard.clipboardItem\\\\\" flag to \\\\\"true\\\\\". To change the browser flags in Firefox, visit the \\\\\"about:config\\\\\" page.\",\"disableSnapping\":\"Hold CtrlOrCmd to disable snapping\"},\"canvasError\":{\"cannotShowPreview\":\"Cannot show preview\",\"canvasTooBig\":\"The canvas may be too big.\",\"canvasTooBigTip\":\"Tip: try moving the farthest elements a bit closer together.\"},\"errorSplash\":{\"headingMain\":\"Encountered an error. Try <button>reloading the page</button>.\",\"clearCanvasMessage\":\"If reloading doesn\\'t work, try <button>clearing the canvas</button>.\",\"clearCanvasCaveat\":\" This will result in loss of work \",\"trackedToSentry\":\"The error with identifier {{eventId}} was tracked on our system.\",\"openIssueMessage\":\"We were very cautious not to include your scene information on the error. If your scene is not private, please consider following up on our <button>bug tracker</button>. Please include information below by copying and pasting into the GitHub issue.\",\"sceneContent\":\"Scene content:\"},\"roomDialog\":{\"desc_intro\":\"You can invite people to your current scene to collaborate with you.\",\"desc_privacy\":\"Don\\'t worry, the session uses end-to-end encryption, so whatever you draw will stay private. Not even our server will be able to see what you come up with.\",\"button_startSession\":\"Start session\",\"button_stopSession\":\"Stop session\",\"desc_inProgressIntro\":\"Live-collaboration session is now in progress.\",\"desc_shareLink\":\"Share this link with anyone you want to collaborate with:\",\"desc_exitSession\":\"Stopping the session will disconnect you from the room, but you\\'ll be able to continue working with the scene, locally. Note that this won\\'t affect other people, and they\\'ll still be able to collaborate on their version.\",\"shareTitle\":\"Join a live collaboration session on Excalidraw\"},\"errorDialog\":{\"title\":\"Error\"},\"exportDialog\":{\"disk_title\":\"Save to disk\",\"disk_details\":\"Export the scene data to a file from which you can import later.\",\"disk_button\":\"Save to file\",\"link_title\":\"Shareable link\",\"link_details\":\"Export as a read-only link.\",\"link_button\":\"Export to Link\",\"excalidrawplus_description\":\"Save the scene to your Excalidraw+ workspace.\",\"excalidrawplus_button\":\"Export\",\"excalidrawplus_exportError\":\"Couldn\\'t export to Excalidraw+ at this moment...\"},\"helpDialog\":{\"blog\":\"Read our blog\",\"click\":\"click\",\"deepSelect\":\"Deep select\",\"deepBoxSelect\":\"Deep select within box, and prevent dragging\",\"curvedArrow\":\"Curved arrow\",\"curvedLine\":\"Curved line\",\"documentation\":\"Documentation\",\"doubleClick\":\"double-click\",\"drag\":\"drag\",\"editor\":\"Editor\",\"editLineArrowPoints\":\"Edit line/arrow points\",\"editText\":\"Edit text / add label\",\"github\":\"Found an issue? Submit\",\"howto\":\"Follow our guides\",\"or\":\"or\",\"preventBinding\":\"Prevent arrow binding\",\"tools\":\"Tools\",\"shortcuts\":\"Keyboard shortcuts\",\"textFinish\":\"Finish editing (text editor)\",\"textNewLine\":\"Add new line (text editor)\",\"title\":\"Help\",\"view\":\"View\",\"zoomToFit\":\"Zoom to fit all elements\",\"zoomToSelection\":\"Zoom to selection\",\"toggleElementLock\":\"Lock/unlock selection\",\"movePageUpDown\":\"Move page up/down\",\"movePageLeftRight\":\"Move page left/right\"},\"clearCanvasDialog\":{\"title\":\"Clear canvas\"},\"publishDialog\":{\"title\":\"Publish library\",\"itemName\":\"Item name\",\"authorName\":\"Author name\",\"githubUsername\":\"GitHub username\",\"twitterUsername\":\"Twitter username\",\"libraryName\":\"Library name\",\"libraryDesc\":\"Library description\",\"website\":\"Website\",\"placeholder\":{\"authorName\":\"Your name or username\",\"libraryName\":\"Name of your library\",\"libraryDesc\":\"Description of your library to help people understand its usage\",\"githubHandle\":\"GitHub handle (optional), so you can edit the library once submitted for review\",\"twitterHandle\":\"Twitter username (optional), so we know who to credit when promoting over Twitter\",\"website\":\"Link to your personal website or elsewhere (optional)\"},\"errors\":{\"required\":\"Required\",\"website\":\"Enter a valid URL\"},\"noteDescription\":\"Submit your library to be included in the <link>public library repository</link> for other people to use in their drawings.\",\"noteGuidelines\":\"The library needs to be manually approved first. Please read the <link>guidelines</link> before submitting. You will need a GitHub account to communicate and make changes if requested, but it is not strictly required.\",\"noteLicense\":\"By submitting, you agree the library will be published under the <link>MIT License</link>, which in short means anyone can use them without restrictions.\",\"noteItems\":\"Each library item must have its own name so it\\'s filterable. The following library items will be included:\",\"atleastOneLibItem\":\"Please select at least one library item to get started\",\"republishWarning\":\"Note: some of the selected items are marked as already published/submitted. You should only resubmit items when updating an existing library or submission.\"},\"publishSuccessDialog\":{\"title\":\"Library submitted\",\"content\":\"Thank you {{authorName}}. Your library has been submitted for review. You can track the status <link>here</link>\"},\"confirmDialog\":{\"resetLibrary\":\"Reset library\",\"removeItemsFromLib\":\"Remove selected items from library\"},\"imageExportDialog\":{\"header\":\"Export image\",\"label\":{\"withBackground\":\"Background\",\"onlySelected\":\"Only selected\",\"darkMode\":\"Dark mode\",\"embedScene\":\"Embed scene\",\"scale\":\"Scale\",\"padding\":\"Padding\"},\"tooltip\":{\"embedScene\":\"Scene data will be saved into the exported PNG/SVG file so that the scene can be restored from it.\\\\nWill increase exported file size.\"},\"title\":{\"exportToPng\":\"Export to PNG\",\"exportToSvg\":\"Export to SVG\",\"copyPngToClipboard\":\"Copy PNG to clipboard\"},\"button\":{\"exportToPng\":\"PNG\",\"exportToSvg\":\"SVG\",\"copyPngToClipboard\":\"Copy to clipboard\"}},\"encrypted\":{\"tooltip\":\"Your drawings are end-to-end encrypted so Excalidraw\\'s servers will never see them.\",\"link\":\"Blog post on end-to-end encryption in Excalidraw\"},\"stats\":{\"angle\":\"Angle\",\"element\":\"Element\",\"elements\":\"Elements\",\"height\":\"Height\",\"scene\":\"Scene\",\"selected\":\"Selected\",\"storage\":\"Storage\",\"title\":\"Stats for nerds\",\"total\":\"Total\",\"version\":\"Version\",\"versionCopy\":\"Click to copy\",\"versionNotAvailable\":\"Version not available\",\"width\":\"Width\"},\"toast\":{\"addedToLibrary\":\"Added to library\",\"copyStyles\":\"Copied styles.\",\"copyToClipboard\":\"Copied to clipboard.\",\"copyToClipboardAsPng\":\"Copied {{exportSelection}} to clipboard as PNG\\\\n({{exportColorScheme}})\",\"fileSaved\":\"File saved.\",\"fileSavedToFilename\":\"Saved to {filename}\",\"canvas\":\"canvas\",\"selection\":\"selection\",\"pasteAsSingleElement\":\"Use {{shortcut}} to paste as a single element,\\\\nor paste into an existing text editor\",\"unableToEmbed\":\"Embedding this url is currently not allowed. Raise an issue on GitHub to request the url whitelisted\",\"unrecognizedLinkFormat\":\"The link you embedded does not match the expected format. Please try to paste the \\'embed\\' string provided by the source site\"},\"colors\":{\"transparent\":\"Transparent\",\"black\":\"Black\",\"white\":\"White\",\"red\":\"Red\",\"pink\":\"Pink\",\"grape\":\"Grape\",\"violet\":\"Violet\",\"gray\":\"Gray\",\"blue\":\"Blue\",\"cyan\":\"Cyan\",\"teal\":\"Teal\",\"green\":\"Green\",\"yellow\":\"Yellow\",\"orange\":\"Orange\",\"bronze\":\"Bronze\"},\"welcomeScreen\":{\"app\":{\"center_heading\":\"All your data is saved locally in your browser.\",\"center_heading_plus\":\"Did you want to go to the Excalidraw+ instead?\",\"menuHint\":\"Export, preferences, languages, ...\"},\"defaults\":{\"menuHint\":\"Export, preferences, and more...\",\"center_heading\":\"Diagrams. Made. Simple.\",\"toolbarHint\":\"Pick a tool & Start drawing!\",\"helpHint\":\"Shortcuts & help\"}},\"colorPicker\":{\"mostUsedCustomColors\":\"Most used custom colors\",\"colors\":\"Colors\",\"shades\":\"Shades\",\"hexCode\":\"Hex code\",\"noShades\":\"No shades available for this color\"},\"overwriteConfirm\":{\"action\":{\"exportToImage\":{\"title\":\"Export as image\",\"button\":\"Export as image\",\"description\":\"Export the scene data as an image from which you can import later.\"},\"saveToDisk\":{\"title\":\"Save to disk\",\"button\":\"Save to disk\",\"description\":\"Export the scene data to a file from which you can import later.\"},\"excalidrawPlus\":{\"title\":\"Excalidraw+\",\"button\":\"Export to Excalidraw+\",\"description\":\"Save the scene to your Excalidraw+ workspace.\"}},\"modal\":{\"loadFromFile\":{\"title\":\"Load from file\",\"button\":\"Load from file\",\"description\":\"Loading from a file will <bold>replace your existing content</bold>.<br></br>You can back up your drawing first using one of the options below.\"},\"shareableLink\":{\"title\":\"Load from link\",\"button\":\"Replace my content\",\"description\":\"Loading external drawing will <bold>replace your existing content</bold>.<br></br>You can back up your drawing first by using one of the options below.\"}}},\"mermaid\":{\"title\":\"Mermaid to Excalidraw\",\"button\":\"Insert\",\"description\":\"Currently only <flowchartLink>Flowchart</flowchartLink>,<sequenceLink> Sequence, </sequenceLink> and <classLink>Class </classLink>Diagrams are supported. The other types will be rendered as image in Excalidraw.\",\"syntax\":\"Mermaid Syntax\",\"preview\":\"Preview\"},\"userList\":{\"search\":{\"placeholder\":\"Quick search\",\"empty\":\"No users found\"},\"hint\":{\"text\":\"Click on user to follow\",\"followStatus\":\"You\\'re currently following this user\"}}}');\n\n//# sourceURL=webpack://ExcalidrawLib/./locales/en.json?");
 
 /***/ }),