UNPKG

@amnstak/react-image-annotate

Version:

[![npm version](https://img.shields.io/npm/v/@asi/react-image-annotate.svg)](https://www.npmjs.com/package/@amnstak/react-image-annotate)

1,453 lines 414 kB
import { jsx as S, jsxs as de, Fragment as Di } from "react/jsx-runtime"; import * as C from "react"; import Hi, { useRef as pe, useMemo as Ae, createContext as Pn, useContext as Nn, forwardRef as Wn, createElement as Zi, useState as Ee, useCallback as ce, useEffect as Ne, useLayoutEffect as zi, Component as ji, Fragment as Sn, memo as _e } from "react"; import { Z as Oe, p as W, m as fe, j as ve, i as Ie, u as ye, s as j, n as be, P as i, a9 as Yi, aa as Ji, ab as Ui, ac as $i, y as $t, c as Xn, x as Nt, T as kn, v as ao, ad as so, t as xe, a0 as dr, d as Qt, l as Ye, a3 as Rn, k as Wt, ae as Qi, G as we, af as pr, H as Je, X as fr, ag as Ln, q as De, K as _t, ah as Dn, a5 as Hn, a8 as Zn, ai as _i, U as qi, W as lo, aj as Ki, w as Ce, ak as ea, _ as ta, a1 as Xt, a6 as na, a2 as oa, $ as ra, F as uo, J as br, al as ia, am as aa, an as sa, ao as la, ap as X, aq as D, ar as gr, as as ua, f as co, h as ca, I as da, L as pa, e as fa } from "./Portal-IhUi94Sd.js"; import { createPortal as ba } from "react-dom"; function po(...e) { return e.reduce((t, n) => n == null ? t : function(...o) { t.apply(this, o), n.apply(this, o); }, () => { }); } function mr(e, t = 166) { let n; function r(...o) { const a = () => { e.apply(this, o); }; clearTimeout(n), n = setTimeout(a, t); } return r.clear = () => { clearTimeout(n); }, r; } function pn(e, t) { var n, r, o; return /* @__PURE__ */ C.isValidElement(e) && t.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45 // eslint-disable-next-line no-underscore-dangle e.type.muiName ?? ((o = (r = (n = e.type) == null ? void 0 : n._payload) == null ? void 0 : r.value) == null ? void 0 : o.muiName) ) !== -1; } function ke(e) { return Oe(e).defaultView || window; } function hr(e = window) { const t = e.document.documentElement.clientWidth; return e.innerWidth - t; } function ga(e) { const t = typeof e; switch (t) { case "number": return Number.isNaN(e) ? "NaN" : Number.isFinite(e) ? e !== Math.floor(e) ? "float" : "number" : "Infinity"; case "object": return e === null ? "null" : e.constructor.name; default: return t; } } function vr(e, t, n, r) { const o = e[t]; if (o == null || !Number.isInteger(o)) { const a = ga(o); return new RangeError(`Invalid ${r} \`${t}\` of type \`${a}\` supplied to \`${n}\`, expected \`integer\`.`); } return null; } function Ir(e, t, ...n) { return e[t] === void 0 ? null : vr(e, t, ...n); } function Tn() { return null; } Ir.isRequired = vr; Tn.isRequired = Tn; const yr = W.env.NODE_ENV === "production" ? Tn : Ir; function ma(e, t) { if (!e) return t; if (typeof e == "function" || typeof t == "function") return (o) => { const a = typeof t == "function" ? t(o) : t, s = typeof e == "function" ? e({ ...o, ...a }) : e, u = fe(o == null ? void 0 : o.className, a == null ? void 0 : a.className, s == null ? void 0 : s.className); return { ...a, ...s, ...!!u && { className: u }, ...(a == null ? void 0 : a.style) && (s == null ? void 0 : s.style) && { style: { ...a.style, ...s.style } }, ...(a == null ? void 0 : a.sx) && (s == null ? void 0 : s.sx) && { sx: [...Array.isArray(a.sx) ? a.sx : [a.sx], ...Array.isArray(s.sx) ? s.sx : [s.sx]] } }; }; const n = t, r = fe(n == null ? void 0 : n.className, e == null ? void 0 : e.className); return { ...t, ...e, ...!!r && { className: r }, ...(n == null ? void 0 : n.style) && (e == null ? void 0 : e.style) && { style: { ...n.style, ...e.style } }, ...(n == null ? void 0 : n.sx) && (e == null ? void 0 : e.sx) && { sx: [...Array.isArray(n.sx) ? n.sx : [n.sx], ...Array.isArray(e.sx) ? e.sx : [e.sx]] } }; } const Cr = /* @__PURE__ */ C.createContext({}); W.env.NODE_ENV !== "production" && (Cr.displayName = "ListContext"); function ha(e) { return ve("MuiList", e); } Ie("MuiList", ["root", "padding", "dense", "subheader"]); const va = (e) => { const { classes: t, disablePadding: n, dense: r, subheader: o } = e; return be({ root: ["root", !n && "padding", r && "dense", o && "subheader"] }, ha, t); }, Ia = j("ul", { name: "MuiList", slot: "Root", overridesResolver: (e, t) => { const { ownerState: n } = e; return [t.root, !n.disablePadding && t.padding, n.dense && t.dense, n.subheader && t.subheader]; } })({ listStyle: "none", margin: 0, padding: 0, position: "relative", variants: [{ props: ({ ownerState: e }) => !e.disablePadding, style: { paddingTop: 8, paddingBottom: 8 } }, { props: ({ ownerState: e }) => e.subheader, style: { paddingTop: 0 } }] }), xr = /* @__PURE__ */ C.forwardRef(function(t, n) { const r = ye({ props: t, name: "MuiList" }), { children: o, className: a, component: s = "ul", dense: u = !1, disablePadding: l = !1, subheader: c, ...d } = r, p = C.useMemo(() => ({ dense: u }), [u]), f = { ...r, component: s, dense: u, disablePadding: l }, b = va(f); return /* @__PURE__ */ S(Cr.Provider, { value: p, children: /* @__PURE__ */ de(Ia, { as: s, className: fe(b.root, a), ref: n, ownerState: f, ...d, children: [c, o] }) }); }); W.env.NODE_ENV !== "production" && (xr.propTypes = { // ┌────────────────────────────── Warning ──────────────────────────────┐ // │ These PropTypes are generated from the TypeScript type definitions. │ // │ To update them, edit the d.ts file and run `pnpm proptypes`. │ // └─────────────────────────────────────────────────────────────────────┘ /** * The content of the component. */ children: i.node, /** * Override or extend the styles applied to the component. */ classes: i.object, /** * @ignore */ className: i.string, /** * The component used for the root node. * Either a string to use a HTML element or a component. */ component: i.elementType, /** * If `true`, compact vertical padding designed for keyboard and mouse input is used for * the list and list items. * The prop is available to descendant components as the `dense` context. * @default false */ dense: i.bool, /** * If `true`, vertical padding is removed from the list. * @default false */ disablePadding: i.bool, /** * The content of the subheader, normally `ListSubheader`. */ subheader: i.node, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx: i.oneOfType([i.arrayOf(i.oneOfType([i.func, i.object, i.bool])), i.func, i.object]) }); const Ar = Object.fromEntries ? Object.fromEntries : (e) => { if (!e || !e[Symbol.iterator]) throw new Error("Object.fromEntries() requires a single iterable argument"); const t = {}; return Object.keys(e).forEach((n) => { const [r, o] = e[n]; t[r] = o; }), t; }; function ze(e) { return Object.keys(e); } function qe(e, t) { if (!e) throw new Error(t); } function zn(e, t) { return t; } const jn = (e) => { const t = e.length; let n = 0, r = ""; for (; n < t; n++) { const o = e[n]; if (o == null) continue; let a; switch (typeof o) { case "boolean": break; case "object": { if (Array.isArray(o)) a = jn(o); else { qe(!zn(o, !1)), W.env.NODE_ENV !== "production" && o.styles !== void 0 && o.name !== void 0 && console.error("You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component."), a = ""; for (const s in o) o[s] && s && (a && (a += " "), a += s); } break; } default: a = o; } a && (r && (r += " "), r += a); } return r; }; function ya(e, t) { var n; const r = pe(); return (!r.current || t.length !== ((n = r.current.prevDeps) === null || n === void 0 ? void 0 : n.length) || r.current.prevDeps.map((o, a) => o === t[a]).indexOf(!1) >= 0) && (r.current = { v: e(), prevDeps: [...t] }), r.current.v; } function Ca(e) { return e instanceof Object && !("styles" in e) && !("length" in e) && !("__emotion_styles" in e); } const { createCssAndCx: xa } = /* @__PURE__ */ (() => { function e(n, r, o) { const a = [], s = Ui(n, a, o); return a.length < 2 ? o : s + r(a); } function t(n) { const { cache: r } = n, o = (...s) => { const u = Yi(s, r.registered); Ji(r, u, !1); const l = `${r.key}-${u.name}`; e: { const c = s[0]; if (!Ca(c)) break e; fo.saveClassNameCSSObjectMapping(r, l, c); } return l; }; return { css: o, cx: (...s) => { const u = jn(s), l = fo.fixClassName(r, u, o); return e(r.registered, o, l); } }; } return { createCssAndCx: t }; })(); function Er(e) { const { useCache: t } = e; function n() { const r = t(), { css: o, cx: a } = ya(() => xa({ cache: r }), [r]); return { css: o, cx: a }; } return { useCssAndCx: n }; } const fo = /* @__PURE__ */ (() => { const e = /* @__PURE__ */ new WeakMap(); return { saveClassNameCSSObjectMapping: (t, n, r) => { let o = e.get(t); o === void 0 && (o = /* @__PURE__ */ new Map(), e.set(t, o)), o.set(n, r); }, fixClassName: /* @__PURE__ */ (() => { function t(n) { let r = !1; return n.map(([o, a]) => { if (a === void 0) return o; let s; if (r) s = { "&&": a }; else { s = o; for (const u in a) if (u.startsWith("@media")) { r = !0; break; } } return s; }); } return (n, r, o) => { const a = e.get(n); return jn(t(r.split(" ").map((s) => [ s, a == null ? void 0 : a.get(s) ])).map((s) => typeof s == "string" ? s : o(s))); }; })() }; })(); function je(e) { if (!(e instanceof Object) || typeof e == "function") return e; const t = []; for (const n in e) { const r = e[n], o = typeof r; if (!(o === "string" || o === "number" && !isNaN(r) || o === "boolean" || r === void 0 || r === null)) return e; t.push(`${n}:${o}_${r}`); } return "xSqLiJdLMd9s" + t.join("|"); } function Yn(e, t, n) { if (!(t instanceof Object)) return e; const r = {}; return ze(e).forEach((o) => r[o] = n(e[o], t[o])), ze(t).forEach((o) => { if (o in e) return; const a = t[o]; typeof a == "string" && (r[o] = a); }), r; } const wr = ({ classes: e, theme: t, muiStyleOverridesParams: n, css: r, cx: o, name: a }) => { var s, u; e: { if (a === "makeStyle no name") { a = void 0; break e; } if (n !== void 0 && a === void 0) throw new Error("To use muiStyleOverridesParams, you must specify a name using .withName('MyComponent')"); } let l; try { l = a === void 0 ? void 0 : ((u = (s = t.components) === null || s === void 0 ? void 0 : s[ a /*example*/ ]) === null || u === void 0 ? void 0 : u.styleOverrides) || void 0; } catch { } const c = Ae(() => { if (l === void 0) return; const d = {}; for (const p in l) { const f = l[p]; f instanceof Object && (d[p] = r(typeof f == "function" ? f({ theme: t, ownerState: n == null ? void 0 : n.ownerState, ...n == null ? void 0 : n.props }) : f)); } return d; }, [ l, je(n == null ? void 0 : n.props), je(n == null ? void 0 : n.ownerState), r ]); return e = Ae(() => Yn(e, c, o), [e, c, o]), { classes: e }; }; let Aa = 0; function Sr(e) { const { useTheme: t, cache: n } = e, { useCache: r } = Rr({ cacheProvidedAtInception: n }), { useCssAndCx: o } = Er({ useCache: r }); function a(u) { const { name: l, uniqId: c = `${Aa++}` } = u ?? {}, d = typeof l != "object" ? l : Object.keys(l)[0]; return function(p) { const f = typeof p == "function" ? p : () => p; return function(g, h) { const m = t(); let { css: v, cx: y } = o(); const I = r(); let x = Ae(() => { const A = {}, w = typeof Proxy < "u" && new Proxy({}, { get: (T, B) => (typeof B == "symbol" && qe(!1), A[B] = `${I.key}-${c}${d !== void 0 ? `-${d}` : ""}-${B}-ref`) }), R = f(m, g, w || {}), E = Ar(ze(R).map((T) => { const B = R[T]; return B.label || (B.label = `${d !== void 0 ? `${d}-` : ""}${T}`), [ T, `${v(B)}${zn(T, T in A) ? ` ${A[T]}` : ""}` ]; })); return ze(A).forEach((T) => { T in E || (E[T] = A[T]); }), E; }, [I, v, y, m, je(g)]); { const A = h == null ? void 0 : h.props.classes; x = Ae(() => Yn(x, A, y), [x, je(A), y]); } { const A = wr({ classes: x, css: v, cx: y, name: d ?? "makeStyle no name", muiStyleOverridesParams: h, // NOTE: If it's not a Mui Theme the plugin is resilient, it will not crash theme: m }); A.classes !== void 0 && (x = A.classes), A.css !== void 0 && (v = A.css), A.cx !== void 0 && (y = A.cx); } return { classes: x, theme: m, css: v, cx: y }; }; }; } function s() { const u = t(), { css: l, cx: c } = o(); return { theme: u, css: l, cx: c }; } return { makeStyles: a, useStyles: s }; } const Ea = Pn(void 0), { createUseCache: Rr } = /* @__PURE__ */ (() => { function e() { return Nn(Ea); } function t(n) { const { cacheProvidedAtInception: r } = n; function o() { var a; const s = $i(), u = e(), l = (a = r ?? u) !== null && a !== void 0 ? a : s; if (l === null) throw new Error([ "In order to get SSR working with tss-react you need to explicitly provide an Emotion cache.", "MUI users be aware: This is not an error strictly related to tss-react, with or without tss-react,", "MUI needs an Emotion cache to be provided for SSR to work.", "Here is the MUI documentation related to SSR setup: https://mui.com/material-ui/guides/server-rendering/", "TSS provides helper that makes the process of setting up SSR easier: https://docs.tss-react.dev/ssr" ].join(` `)); return l; } return { useCache: o }; } return { createUseCache: t }; })(); function bo(e) { return e.charAt(0).toUpperCase() + e.slice(1); } function wa(e) { const { useTheme: t, cache: n } = e, { makeStyles: r } = Sr({ useTheme: t, cache: n }); function o(a, s, u) { const l = typeof a == "string" ? (() => { const b = a, g = function({ children: h, ...m }) { return Zi(b, m, h); }; return Object.defineProperty(g, "name", { value: bo(b) }), g; })() : a, c = (() => { { const { name: g } = u ?? {}; if (g !== void 0) return typeof g != "object" ? g : Object.keys(g)[0]; } let b; e: { const g = l.displayName; if (typeof g != "string" || g === "") break e; b = g; } e: { if (b !== void 0) break e; const g = l.name; if (typeof g != "string" || g === "") break e; b = g; } if (b !== void 0) return b = b.replace(/\$/g, "usd"), b = b.replace(/\(/g, "_").replace(/\)/g, "_"), b = b.replace(/[^a-zA-Z0-9-_]/g, "_"), b; })(), d = r({ ...u, name: c })(typeof s == "function" ? (b, g, h) => mo(s(b, g, h)) : mo(s)); function p(b) { for (const g in b) if (g !== "root") return !0; return !1; } const f = Wn(function(b, g) { const { className: h, classes: m, ...v } = b, { classes: y, cx: I } = d(b, { props: b }), x = I(y.root, h); return Tr.set(y, { ...y, root: x }), Hi.createElement(l, { ref: g, className: p(y) ? h : x, ...typeof a == "string" ? {} : { classes: y }, ...v }); }); return c !== void 0 && (f.displayName = `${bo(c)}WithStyles`, Object.defineProperty(f, "name", { value: f.displayName })), f; } return o.getClasses = Sa, { withStyles: o }; } const Tr = /* @__PURE__ */ new WeakMap(), go = "getClasses should only be used in conjunction with withStyles"; function Sa(e) { const t = e.classes; if (t === void 0) throw new Error(go); const n = Tr.get(t); if (n === void 0) throw new Error(go); return n; } function mo(e) { const t = {}, n = {}; return Object.keys(e).forEach((r) => (r.startsWith("@media") ? n : t)[r] = e[r]), Object.keys(n).forEach((r) => { const o = n[r]; Object.keys(o).forEach((a) => { var s; return t[a] = { ...(s = t[a]) !== null && s !== void 0 ? s : {}, [r]: o[a] }; }); }), t; } const Ra = !(typeof document == "object" && typeof (document == null ? void 0 : document.getElementById) == "function") && !(typeof jest < "u") && !(typeof mocha < "u") && !(typeof __vitest_worker__ < "u"); function Gr(e) { Fr = 0, Ze.splice(0, Ze.length); const { useContext: t, usePlugin: n, cache: r } = e, { useCache: o } = Rr({ cacheProvidedAtInception: r }), { useCssAndCx: a } = Er({ useCache: o }); return { tss: Bt({ useContext: t, useCache: o, useCssAndCx: a, usePlugin: n ?? (({ classes: l, cx: c, css: d }) => ({ classes: l, cx: c, css: d })), name: void 0, doesUseNestedSelectors: !1 }) }; } let Fr = 0; const Ze = []; function Bt(e) { const { useContext: t, useCache: n, useCssAndCx: r, usePlugin: o, name: a, doesUseNestedSelectors: s } = e; return { withParams: () => Bt({ ...e }), withName: (u) => Bt({ ...e, name: typeof u != "object" ? u : Object.keys(u)[0] }), withNestedSelectors: () => Bt({ ...e, doesUseNestedSelectors: !0 }), create: (u) => { const l = `x${Fr++}`; if (a !== void 0) for (; ; ) { const d = Ze.find((p) => p.name === a); if (d === void 0) break; Ze.splice(Ze.indexOf(d), 1); } const c = typeof u == "function" ? u : () => u; return function(p) { var f, b, g; const { classesOverrides: h, ...m } = p ?? {}, v = t(), { css: y, cx: I } = r(), x = n(), A = () => { const E = {}, T = c({ ...p, ...v, ...s ? { classes: typeof Proxy > "u" ? {} : new Proxy({}, { get: (V, F) => { if (typeof F == "symbol" && qe(!1), Ra && a === void 0) throw new Error([ "tss-react: In SSR setups, in order to use nested selectors, you must also give a unique name to the useStyle function.", 'Solution: Use tss.withName("ComponentName").withNestedSelectors<...>()... to set a name.' ].join(` `)); e: { if (a === void 0) break e; let k = Ze.find((P) => P.name === a && P.idOfUseStyles === l); k === void 0 && (k = { name: a, idOfUseStyles: l, nestedSelectorRuleNames: /* @__PURE__ */ new Set() }, Ze.push(k)), k.nestedSelectorRuleNames.add(F); } e: { if (a === void 0 || !(Ze.find((P) => P.name === a && P.idOfUseStyles !== l && P.nestedSelectorRuleNames.has(F)) !== void 0)) break e; throw new Error([ `tss-react: There are in your codebase two different useStyles named "${a}" that`, `both use use the nested selector ${F}. `, `This may lead to CSS class name collisions, causing nested selectors to target elements outside of the intended scope. `, `Solution: Ensure each useStyles using nested selectors has a unique name. `, 'Use: tss.withName("UniqueName").withNestedSelectors<...>()...' ].join(" ")); } return E[F] = `${x.key}-${a !== void 0 ? a : l}-${F}-ref`; } }) } : {} }); let B = Ar(ze(T).map((V) => { const F = T[V]; return F.label || (F.label = `${a !== void 0 ? `${a}-` : ""}${V}`), [ V, `${y(F)}${zn(V, V in E) ? ` ${E[V]}` : ""}` ]; })); return ze(E).forEach((V) => { V in B || (B[V] = E[V]); }), B = Yn(B, h, I), B; }, w = Ta({ cache: x, cssObjectByRuleNameOrGetCssObjectByRuleName: u, classesOverridesRef: je(h), paramsAndPluginParamsRef: je(m), idOfUseStyles: l, context: v, getClasses: A }), R = o({ classes: w, css: y, cx: I, idOfUseStyles: l, name: a, ...v, ...m }); return { classes: (f = R.classes) !== null && f !== void 0 ? f : w, css: (b = R.css) !== null && b !== void 0 ? b : y, cx: (g = R.cx) !== null && g !== void 0 ? g : I, ...v }; }; } }; } const Et = /* @__PURE__ */ new WeakMap(); function Ta(e) { const { cache: t, cssObjectByRuleNameOrGetCssObjectByRuleName: n, classesOverridesRef: r, paramsAndPluginParamsRef: o, idOfUseStyles: a, context: s, getClasses: u } = e; e: { const c = Et.get(t); if (c === void 0) break e; const d = c.get(n); if (d === void 0) break e; const p = d.get(r); if (p === void 0) break e; const f = p.get(o); if (f === void 0) break e; const b = f.find(({ context: g }) => { if (g === s) return !0; if (ze(g).length !== ze(s).length) return !1; for (const h in g) if (je(g[h]) !== je(s[h])) return !1; return !0; }); if (b === void 0) break e; if ((b == null ? void 0 : b.idOfUseStyles) !== a) { f.splice(f.indexOf(b), 1); break e; } return b.result; } const l = u(); { Et.has(t) || Et.set(t, /* @__PURE__ */ new WeakMap()); const c = Et.get(t); qe(c !== void 0), c.has(n) || c.set(n, /* @__PURE__ */ new Map()); const d = c.get(n); qe(d !== void 0), d.has(r) || (d.size > 200 && d.clear(), d.set(r, /* @__PURE__ */ new Map())); const p = d.get(r); if (qe(p !== void 0), !p.has(o)) { e: { const b = typeof o == "string" ? 257 : 5; if (p.size < b) break e; p.clear(); } p.set(o, []); } let f = p.get(o); qe(f !== void 0), f.length > 5 && (f = []), f.push({ idOfUseStyles: a, context: s, result: l }); } return l; } function Ga(e) { return { ...Sr(e), ...wa(e) }; } const { tss: Fa } = Gr({ useContext: () => ({}) }); Fa.create({}); Ga({ useTheme: $t }); const { tss: Or } = Gr({ useContext: function() { return { theme: $t() }; }, usePlugin: wr }); Or.create({}); var Oa = {}; /*! 2D Transformation Matrix v2.7.5 (c) Epistemex.com 2014-2018 License: MIT */ (function(e) { /** * 2D transformation matrix object initialized with identity matrix. * * The matrix can synchronize a canvas 2D context by supplying the context * as an argument, or later apply current absolute transform to an * existing context. * * To synchronize a DOM element you can use [`toCSS()`]{@link Matrix#toCSS} or [`toCSS3D()`]{@link Matrix#toCSS3D}. * together with for example the `style.transform` property. * * @param {CanvasRenderingContext2D} [context] - Optional context to sync with Matrix * @param {HTMLElement} [element=null] - DOM Element to synchronize * @prop {number} a - scale x * @prop {number} b - shear y * @prop {number} c - shear x * @prop {number} d - scale y * @prop {number} e - translate x * @prop {number} f - translate y * @prop {CanvasRenderingContext2D} [context] - set or get current synchronized 2D context * @prop {HTMLElement} [element] - get current synchronized DOM element * @prop {boolean} [useCSS3D=false] - is a DOM element is defined for sync., choose whether to use 2D (false) or 3D (true) matrix to sync it. * @constructor * @license MIT license * @copyright Epistemex.com 2014-2018 */ function t(n, r) { var o = this, a; o._t = o.transform, o.a = o.d = 1, o.b = o.c = o.e = o.f = 0, n && (o.context = n).setTransform(1, 0, 0, 1, 0, 0), Object.defineProperty(o, "element", { get: function() { return a; }, set: function(s) { a || (o._px = o._getPX(), o.useCSS3D = !1), a = s, (o._st = a.style)[o._px] = o.toCSS(); } }), r && (o.element = r); } t.fromTriangles = function(n, r, o) { var a = new t(), s = new t(o), u, l, c, d, p, f; return Array.isArray(n) ? typeof n[0] == "number" ? (c = n[4], d = n[5], p = r[4], f = r[5], u = [n[0] - c, n[1] - d, n[2] - c, n[3] - d, c, d], l = [r[0] - p, r[1] - f, r[2] - p, r[3] - f, p, f]) : (c = n[2].x, d = n[2].y, p = r[2].x, f = r[2].y, u = [n[0].x - c, n[0].y - d, n[1].x - c, n[1].y - d, c, d], l = [r[0].x - p, r[0].y - f, r[1].x - p, r[1].y - f, p, f]) : (u = [n.px - n.rx, n.py - n.ry, n.qx - n.rx, n.qy - n.ry, n.rx, n.ry], l = [r.px - r.rx, r.py - r.ry, r.qx - r.rx, r.qy - r.ry, r.rx, r.ry]), a.setTransform.apply(a, u), s.setTransform.apply(s, l), s.multiply(a.inverse()); }, t.fromSVGTransformList = function(n, r, o) { for (var a = new t(r, o), s = 0; s < n.length; ) a.multiply(n[s++].matrix); return a; }, t.from = function(n, r, o, a, s, u, l, c) { var d = new t(l, c), p, f, b; if (typeof n == "number") d.setTransform(n, r, o, a, s, u); else if (typeof n.x == "number") b = Math.sqrt(n.x * n.x + n.y * n.y), p = f = 1, a ? p = b : f = b, d.translate(r || 0, o || 0).rotateFromVector(n).scaleU(p).translate(f, 0); else { if (typeof n.is2D == "boolean" && !n.is2D) throw "Cannot use 3D DOMMatrix."; r && (d.context = r), o && (d.element = o), d.multiply(n); } return d; }, t.prototype = { _getPX: function() { for (var n = ["t", "oT", "msT", "mozT", "webkitT", "khtmlT"], r = 0, o, a = document.createElement("div").style; o = n[r++]; ) if (typeof a[o + "ransform"] < "u") return o + "ransform"; }, /** * Concatenates transforms of this matrix onto the given child matrix and * returns a new matrix. This instance is used on left side. * * @param {Matrix|SVGMatrix} cm - child matrix to apply concatenation to * @returns {Matrix} - new Matrix instance */ concat: function(n) { return this.clone().multiply(n); }, /** * Flips the horizontal values. * @returns {Matrix} */ flipX: function() { return this._t(-1, 0, 0, 1, 0, 0); }, /** * Flips the vertical values. * @returns {Matrix} */ flipY: function() { return this._t(1, 0, 0, -1, 0, 0); }, /** * Reflects incoming (velocity) vector on the normal which will be the * current transformed x axis. Call when a trigger condition is met. * * @param {number} x - vector end point for x (start = 0) * @param {number} y - vector end point for y (start = 0) * @returns {{x: number, y: number}} */ reflectVector: function(n, r) { var o = this.applyToPoint(0, 1), a = (o.x * n + o.y * r) * 2; return n -= a * o.x, r -= a * o.y, { x: n, y: r }; }, /** * Short-hand to reset current matrix to an identity matrix. * @returns {Matrix} */ reset: function() { return this.setTransform(1, 0, 0, 1, 0, 0); }, /** * Rotates current matrix by angle (accumulative). * @param {number} angle - angle in radians * @returns {Matrix} */ rotate: function(n) { var r = Math.cos(n), o = Math.sin(n); return this._t(r, o, -o, r, 0, 0); }, /** * Converts a vector given as `x` and `y` to angle, and * rotates (accumulative). x can instead contain an object with * properties x and y and if so, y parameter will be ignored. * @param {number|*} x * @param {number} [y] * @returns {Matrix} */ rotateFromVector: function(n, r) { return this.rotate(typeof n == "number" ? Math.atan2(r, n) : Math.atan2(n.y, n.x)); }, /** * Helper method to make a rotation based on an angle in degrees. * @param {number} angle - angle in degrees * @returns {Matrix} */ rotateDeg: function(n) { return this.rotate(n * Math.PI / 180); }, /** * Scales current matrix uniformly and accumulative. * @param {number} f - scale factor for both x and y (1 does nothing) * @returns {Matrix} */ scaleU: function(n) { return this._t(n, 0, 0, n, 0, 0); }, /** * Scales current matrix accumulative. * @param {number} sx - scale factor x (1 does nothing) * @param {number} sy - scale factor y (1 does nothing) * @returns {Matrix} */ scale: function(n, r) { return this._t(n, 0, 0, r, 0, 0); }, /** * Scales current matrix on x axis accumulative. * @param {number} sx - scale factor x (1 does nothing) * @returns {Matrix} */ scaleX: function(n) { return this._t(n, 0, 0, 1, 0, 0); }, /** * Scales current matrix on y axis accumulative. * @param {number} sy - scale factor y (1 does nothing) * @returns {Matrix} */ scaleY: function(n) { return this._t(1, 0, 0, n, 0, 0); }, /** * Converts a vector given as `x` and `y` to normalized scale. * @param x * @param y * @returns {Matrix} */ scaleFromVector: function(n, r) { return this.scaleU(Math.sqrt(n * n + r * r)); }, /** * Apply shear to the current matrix accumulative. * @param {number} sx - amount of shear for x * @param {number} sy - amount of shear for y * @returns {Matrix} */ shear: function(n, r) { return this._t(1, r, n, 1, 0, 0); }, /** * Apply shear for x to the current matrix accumulative. * @param {number} sx - amount of shear for x * @returns {Matrix} */ shearX: function(n) { return this._t(1, 0, n, 1, 0, 0); }, /** * Apply shear for y to the current matrix accumulative. * @param {number} sy - amount of shear for y * @returns {Matrix} */ shearY: function(n) { return this._t(1, n, 0, 1, 0, 0); }, /** * Apply skew to the current matrix accumulative. Angles in radians. * Also see [`skewDeg()`]{@link Matrix#skewDeg}. * @param {number} ax - angle of skew for x * @param {number} ay - angle of skew for y * @returns {Matrix} */ skew: function(n, r) { return this.shear(Math.tan(n), Math.tan(r)); }, /** * Apply skew to the current matrix accumulative. Angles in degrees. * Also see [`skew()`]{@link Matrix#skew}. * @param {number} ax - angle of skew for x * @param {number} ay - angle of skew for y * @returns {Matrix} */ skewDeg: function(n, r) { return this.shear(Math.tan(n / 180 * Math.PI), Math.tan(r / 180 * Math.PI)); }, /** * Apply skew for x to the current matrix accumulative. Angles in radians. * Also see [`skewDeg()`]{@link Matrix#skewDeg}. * @param {number} ax - angle of skew for x * @returns {Matrix} */ skewX: function(n) { return this.shearX(Math.tan(n)); }, /** * Apply skew for y to the current matrix accumulative. Angles in radians. * Also see [`skewDeg()`]{@link Matrix#skewDeg}. * @param {number} ay - angle of skew for y * @returns {Matrix} */ skewY: function(n) { return this.shearY(Math.tan(n)); }, /** * Set current matrix to new absolute matrix. * @param {number} a - scale x * @param {number} b - shear y * @param {number} c - shear x * @param {number} d - scale y * @param {number} e - translate x * @param {number} f - translate y * @returns {Matrix} */ setTransform: function(n, r, o, a, s, u) { var l = this; return l.a = n, l.b = r, l.c = o, l.d = a, l.e = s, l.f = u, l._x(); }, /** * Translate current matrix accumulative. * @param {number} tx - translation for x * @param {number} ty - translation for y * @returns {Matrix} */ translate: function(n, r) { return this._t(1, 0, 0, 1, n, r); }, /** * Translate current matrix on x axis accumulative. * @param {number} tx - translation for x * @returns {Matrix} */ translateX: function(n) { return this._t(1, 0, 0, 1, n, 0); }, /** * Translate current matrix on y axis accumulative. * @param {number} ty - translation for y * @returns {Matrix} */ translateY: function(n) { return this._t(1, 0, 0, 1, 0, n); }, /** * Multiplies current matrix with new matrix values. Also see [`multiply()`]{@link Matrix#multiply}. * * @param {number} a2 - scale x * @param {number} b2 - skew y * @param {number} c2 - skew x * @param {number} d2 - scale y * @param {number} e2 - translate x * @param {number} f2 - translate y * @returns {Matrix} */ transform: function(n, r, o, a, s, u) { var l = this, c = l.a, d = l.b, p = l.c, f = l.d, b = l.e, g = l.f; return l.a = c * n + p * r, l.b = d * n + f * r, l.c = c * o + p * a, l.d = d * o + f * a, l.e = c * s + p * u + b, l.f = d * s + f * u + g, l._x(); }, /** * Multiplies current matrix with source matrix. * @param {Matrix|DOMMatrix|SVGMatrix} m - source matrix to multiply with. * @returns {Matrix} */ multiply: function(n) { return this._t(n.a, n.b, n.c, n.d, n.e, n.f); }, /** * Divide this matrix on input matrix which must be invertible. * @param {Matrix} m - matrix to divide on (divisor) * @throws Exception if input matrix is not invertible * @returns {Matrix} */ divide: function(n) { return this.multiply(n.inverse()); }, /** * Divide current matrix on scalar value != 0. * @param {number} d - divisor * @throws Exception if divisor is zero * @returns {Matrix} */ divideScalar: function(n) { var r = this; if (!n) throw "Division on zero"; return r.a /= n, r.b /= n, r.c /= n, r.d /= n, r.e /= n, r.f /= n, r._x(); }, /** * Get an inverse matrix of current matrix. The method returns a new * matrix with values you need to use to get to an identity matrix. * Context from parent matrix is not applied to the returned matrix. * * @param {boolean} [cloneContext=false] - clone current context to resulting matrix * @param {boolean} [cloneDOM=false] - clone current DOM element to resulting matrix * @throws Exception is input matrix is not invertible * @returns {Matrix} - new Matrix instance */ inverse: function(n, r) { var o = this, a = new t(n ? o.context : null, r ? o.element : null), s = o.determinant(); if (!s) throw "Matrix not invertible."; return a.a = o.d / s, a.b = -o.b / s, a.c = -o.c / s, a.d = o.a / s, a.e = (o.c * o.f - o.d * o.e) / s, a.f = -(o.a * o.f - o.b * o.e) / s, a; }, /** * Interpolate this matrix with another and produce a new matrix. * `t` is a value in the range [0.0, 1.0] where 0 is this instance and * 1 is equal to the second matrix. The `t` value is not clamped. * * Context from parent matrix is not applied to the returned matrix. * * Note: this interpolation is naive. For animation containing rotation, * shear or skew use the [`interpolateAnim()`]{@link Matrix#interpolateAnim} method instead * to avoid unintended flipping. * * @param {Matrix|SVGMatrix} m2 - the matrix to interpolate with. * @param {number} t - interpolation [0.0, 1.0] * @param {CanvasRenderingContext2D} [context] - optional context to affect * @param {HTMLElement} [dom] - optional DOM element to use for the matrix * @returns {Matrix} - new Matrix instance with the interpolated result */ interpolate: function(n, r, o, a) { var s = this, u = new t(o, a); return u.a = s.a + (n.a - s.a) * r, u.b = s.b + (n.b - s.b) * r, u.c = s.c + (n.c - s.c) * r, u.d = s.d + (n.d - s.d) * r, u.e = s.e + (n.e - s.e) * r, u.f = s.f + (n.f - s.f) * r, u._x(); }, /** * Interpolate this matrix with another and produce a new matrix. * `t` is a value in the range [0.0, 1.0] where 0 is this instance and * 1 is equal to the second matrix. The `t` value is not constrained. * * Context from parent matrix is not applied to the returned matrix. * * To obtain easing `t` can be preprocessed using easing-functions * before being passed to this method. * * Note: this interpolation method uses decomposition which makes * it suitable for animations (in particular where rotation takes * places). * * @param {Matrix} m2 - the matrix to interpolate with. * @param {number} t - interpolation [0.0, 1.0] * @param {CanvasRenderingContext2D} [context] - optional context to affect * @param {HTMLElement} [dom] - optional DOM element to use for the matrix * @returns {Matrix} - new Matrix instance with the interpolated result */ interpolateAnim: function(n, r, o, a) { var s = new t(o, a), u = this.decompose(), l = n.decompose(), c = u.translate, d = l.translate, p = u.scale; return s.translate(c.x + (d.x - c.x) * r, c.y + (d.y - c.y) * r), s.rotate(u.rotation + (l.rotation - u.rotation) * r), s.scale(p.x + (l.scale.x - p.x) * r, p.y + (l.scale.y - p.y) * r), s._x(); }, /** * Decompose the current matrix into simple transforms using either * QR (default) or LU decomposition. * * @param {boolean} [useLU=false] - set to true to use LU rather than QR decomposition * @returns {*} - an object containing current decomposed values (translate, rotation, scale, skew) * @see {@link https://en.wikipedia.org/wiki/QR_decomposition|More on QR decomposition} * @see {@link https://en.wikipedia.org/wiki/LU_decomposition|More on LU decomposition} */ decompose: function(n) { var r = this, o = r.a, a = r.b, s = r.c, u = r.d, l = Math.acos, c = Math.atan, d = Math.sqrt, p = Math.PI, f = { x: r.e, y: r.f }, b = 0, g = { x: 1, y: 1 }, h = { x: 0, y: 0 }, m = o * u - a * s, v, y; return n ? o ? (h = { x: c(s / o), y: c(a / o) }, g = { x: o, y: m / o }) : a ? (b = p * 0.5, g = { x: a, y: m / a }, h.x = c(u / a)) : (g = { x: s, y: u }, h.x = p * 0.25) : o || a ? (v = d(o * o + a * a), b = a > 0 ? l(o / v) : -l(o / v), g = { x: v, y: m / v }, h.x = c((o * s + a * u) / (v * v))) : s || u ? (y = d(s * s + u * u), b = p * 0.5 - (u > 0 ? l(-s / y) : -l(s / y)), g = { x: m / y, y }, h.y = c((o * s + a * u) / (y * y))) : g = { x: 0, y: 0 }, { translate: f, rotation: b, scale: g, skew: h }; }, /** * Returns the determinant of the current matrix. * @returns {number} */ determinant: function() { return this.a * this.d - this.b * this.c; }, /** * Apply current matrix to `x` and `y` of a point. * Returns a point object. * * @param {number} x - value for x * @param {number} y - value for y * @returns {{x: number, y: number}} A new transformed point object */ applyToPoint: function(n, r) { var o = this; return { x: n * o.a + r * o.c + o.e, y: n * o.b + r * o.d + o.f }; }, /** * Apply current matrix to array with point objects or point pairs. * Returns a new array with points in the same format as the input array. * * A point object is an object literal: * * {x: x, y: y} * * so an array would contain either: * * [{x: x1, y: y1}, {x: x2, y: y2}, ... {x: xn, y: yn}] * * or * * [x1, y1, x2, y2, ... xn, yn] * * @param {Array} points - array with point objects or pairs * @returns {Array} A new array with transformed points */ applyToArray: function(n) { var r = 0, o, a, s = []; if (typeof n[0] == "number") for (a = n.length; r < a; ) o = this.applyToPoint(n[r++], n[r++]), s.push(o.x, o.y); else for (; o = n[r++]; ) s.push(this.applyToPoint(o.x, o.y)); return s; }, /** * Apply current matrix to a typed array with point pairs. Although * the input array may be an ordinary array, this method is intended * for more performant use where typed arrays are used. The returned * array is regardless always returned as a `Float32Array`. * * @param {*} points - (typed) array with point pairs [x1, y1, ..., xn, yn] * @param {boolean} [use64=false] - use Float64Array instead of Float32Array * @returns {*} A new typed array with transformed points */ applyToTypedArray: function(n, r) { for (var o = 0, a, s = n.length, u = r ? new Float64Array(s) : new Float32Array(s); o < s; ) a = this.applyToPoint(n[o], n[o + 1]), u[o++] = a.x, u[o++] = a.y; return u; }, /** * Apply to any canvas 2D context object. This does not affect the * context that optionally was referenced in constructor unless it is * the same context. * * @param {CanvasRenderingContext2D} context - target context * @returns {Matrix} */ applyToContext: function(n) { var r = this; return n.setTransform(r.a, r.b, r.c, r.d, r.e, r.f), r; }, /** * Apply to any DOM element. This does not affect the DOM element * that optionally was referenced in constructor unless it is * the same element. * * The method will auto-detect the correct browser prefix if any. * * @param {HTMLElement} element - target DOM element * @param {boolean} [use3D=false] - use 3D transformation matrix instead of 2D * @returns {Matrix} */ applyToElement: function(n, r) { var o = this; return o._px || (o._px = o._getPX()), n.style[o._px] = r ? o.toCSS3D() : o.toCSS(), o; }, /** * Instead of creating a new instance of a Matrix, DOMMatrix or SVGMatrix * the current settings of this instance can be applied to an external * object of a different (or same) type. You can also pass in an * empty literal object. * * Note that the properties a-f will be set regardless of if they * already exist or not. * * @param {*} obj - target object. * @returns {Matrix} */ applyToObject: function(n) { var r = this; return n.a = r.a, n.b = r.b, n.c = r.c, n.d = r.d, n.e = r.e, n.f = r.f, r; }, /** * Returns true if matrix is an identity matrix (no transforms applied). * @returns {boolean} */ isIdentity: function() { var n = this; return n.a === 1 && !n.b && !n.c && n.d === 1 && !n.e && !n.f; }, /** * Returns true if matrix is invertible * @returns {boolean} */ isInvertible: function() { return !this._q(this.determinant(), 0); }, /** * The method is intended for situations where scale is accumulated * via multiplications, to detect situations where scale becomes * "trapped" with a value of zero. And in which case scale must be * set explicitly to a non-zero value. * * @returns {boolean} */ isValid: function() { return !(this.a * this.d); }, /** * Compares current matrix with another matrix. Returns true if equal * (within epsilon tolerance). * @param {Matrix|SVGMatrix} m - matrix to compare this matrix with * @returns {boolean} */ isEqual: function(n) { var r = this, o = r._q; return o(r.a, n.a) && o(r.b, n.b) && o(r.c, n.c) && o(r.d, n.d) && o(r.e, n.e) && o(r.f, n.f); }, /** * Clones current instance and returning a new matrix. * @param {boolean} [noContext=false] don't clone context reference if true * @returns {Matrix} - a new Matrix instance with identical transformations as this instance */ clone: function(n) { return new t(n ? null : this.context).multiply(this); }, /** * Returns an array with current matrix values. * @returns {Array} */ toArray: function() { var n = this; return [n.a, n.b, n.c, n.d, n.e, n.f]; }, /** * Returns a binary 32-bit floating point typed array. * @returns {*} */ toTypedArray: function() { var n = this; return new Float32Array([n.a, n.b, n.c, n.d, n.e, n.f]); }, /** * Generates a string that can be used with CSS `transform`. * @example * element.style.transform = m.toCSS(); * @returns {string} */ toCSS: function() { return "matrix(" + this.toArray() + ")"; }, /** * Generates a `matrix3d()` string that can be used with CSS `transform`. * Although the matrix is for 2D use you may see performance benefits * on some devices using a 3D CSS transform instead of a 2D. * @example * element.style.transform = m.toCSS3D(); * @returns {string} */ toCSS3D: function() { var n = this, r = ",0,0,"; return "matrix3d(" + n.a + "," + n.b + r + n.c + "," + n.d + r + r + ",1,0," + n.e + "," + n.f + ",0,1)"; }, /** * Returns a JSON compatible string of current matrix. * @returns {string} */ toJSON: function() { var n = this; return '{"a":' + n.a + ',"b":' + n.b + ',"c":' + n.c + ',"d":' + n.d + ',"e":' + n.e + ',"f":' + n.f + "}"; }, /** * Returns a string with current matrix as comma-separated list. * @param {number} [fixLen=4] - truncate decimal values to number of digits * @returns {string} */ toString: function(n) { var r = this; return n = n || 4, "a=" + r.a.toFixed(n) + " b=" + r.b.toFixed(n) + " c=" + r.c.toFixed(n) + " d=" + r.d.toFixed(n) + " e=" + r.e.toFixed(n) + " f=" + r.f.toFixed(n); }, /** * Returns a string with current matrix as comma-separated values * string with line-end (CR+LF). * @returns {string} */ toCSV: function() { return this.toArray().join() + `\r `; }, /** * Convert current matrix into a `DOMMatrix`. If `DOMMatrix` is not * supported, a `null` is returned. * * @returns {DOMMatrix} * @see {@link https://drafts.fxtf.org/geometry/#dommatrix|MDN / SVGMatrix} */ toDOMMatrix: function() { var n = null; return "DOMMatrix" in window && (n = new DOMMatrix(), n.a = this.a, n.b = this.b, n.c = this.c, n.d = this.d, n.e = this.e, n.f = this.f), n; }, /** * Convert current matrix into a `SVGMatrix`. If `SVGMatrix` is not * supported, a `null` is returned. * * @returns {SVGMatrix} * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/SVGMatrix|MDN / SVGMatrix} */ toSVGMatrix: function() { var n = this, r = document.createElementNS("http://www.w3.org/2000/svg", "svg"), o = null; return r && (o = r.createSVGMatrix(), o.a = n.a, o.b = n.b, o.c = n.c, o.d = n.d, o.e = n.e, o.f = n.f), o; }, /** * Compares floating point values with some tolerance (epsilon) * @param {number} f1 - float 1 * @param {number} f2 - float 2 * @returns {boolean} * @private */ _q: function(n, r) { return Math.abs(n - r) < 1e-14; }, /** * Apply current absolute matrix to context if defined, to sync it. * Apply current absolute matrix to element if defined, to sync it. * @returns {Matrix} * @private */ _x: function() { var n = this; return n.context && n.context.setTransform(n.a, n.b, n.c, n.d, n.e, n.f), n._st && (n._st[n._px] = n.useCSS3D ? n.toCSS3D() : n.toCSS()), n; } }, e.Matrix = t; })(Oa); var Pe = function() { return Pe = Object.assign || function(t) { for (var n, r = 1, o = arguments.length; r < o; r++) { n = arguments[r]; for (var a in n) Object.prototype.hasOwnProperty.call(n, a) && (t[a] = n[a]); } return t; }, Pe.apply(this, arguments); }; function Br(e, t) { var n = {}; for (var r in e) Object.prototype.hasOwnProperty.call(e, r) && t.indexOf(r) < 0 && (n[r] = e[r]); if (e != null && typeof Object.getOwnPropertySymbols == "function") for (var o = 0, r = Object.getOwnPropertySymbols(e); o < r.length; o++) t.indexOf(r[o]) < 0 && Object.prototype.propertyIsEnumerable.call(e, r[o]) && (n[r[o]] = e[r[o]]); return n; } function Ba(e, t, n) { if (n || arguments.length === 2) for (var r = 0, o = t.length, a; r < o; r++) (a || !(