vue-cropperjs2 0.0.1 → 0.0.2

package/dist/index.d.ts

@@ -1,20 +1,16 @@
 import { App } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
-import { CropperCanvas as CropperCanvas_2 } from 'cropperjs';
 import { DefineComponent } from 'vue';
 import { PublicProps } from 'vue';
 
-declare const __VLS_component: DefineComponent<CropperCanvasProps, {
-$setAction: ((action: string) => CropperCanvas_2) | undefined;
-$toCanvas: ((options?: {
-width?: number;
-height?: number;
-beforeDraw?: (context: CanvasRenderingContext2D, canvas: HTMLCanvasElement) => void;
-}) => Promise<HTMLCanvasElement>) | undefined;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CropperCanvasProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: DefineComponent<CropperCanvasProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CropperCanvasProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_2: DefineComponent<SelectionProperty, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SelectionProperty> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component_2: DefineComponent<SelectionProperty, {
+selection: any;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SelectionProperty> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+sel: unknown;
+}, any>;
 
 declare type __VLS_Props = {
     resize?: "both" | "horizontal" | "vertical" | "none";
@@ -26,9 +22,7 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;
     };
-    refs: {
-        canvasRef: unknown;
-    };
+    refs: {};
     rootEl: any;
 };
 
@@ -37,7 +31,9 @@ declare function __VLS_template_2(): {
     slots: {
         default?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        sel: unknown;
+    };
     rootEl: any;
 };
 
@@ -72,9 +68,6 @@ export declare const CropperCanvas: __VLS_WithTemplateSlots<typeof __VLS_compone
 
 declare type CropperCanvasProps = {
     background?: boolean;
-    disabled?: boolean;
-    scaleStep?: number;
-    themeColor?: string;
 };
 
 export declare const CropperCrosshair: DefineComponent<CropperCrosshairProperty, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CropperCrosshairProperty> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;

package/dist/index.js

@@ -1,9 +1,9 @@
-import { defineComponent as D, useTemplateRef as ie, h as _, openBlock as W, createBlock as X, resolveDynamicComponent as H, unref as Y, withCtx as Ft, renderSlot as qt } from "vue";
-const at = typeof window < "u" && typeof window.document < "u", R = at ? window : {}, bt = at ? "ontouchstart" in R.document.documentElement : !1, Ct = at ? "PointerEvent" in R : !1, B = "cropper", J = `${B}-canvas`, ne = `${B}-crosshair`, ae = `${B}-grid`, oe = `${B}-handle`, ot = `${B}-image`, z = `${B}-selection`, re = `${B}-shade`, he = `${B}-viewer`, st = "select", Vt = "move", Z = "scale", mt = "rotate", it = "transform", P = "none", yt = "n-resize", Et = "e-resize", wt = "s-resize", St = "w-resize", G = "ne-resize", F = "nw-resize", q = "se-resize", V = "sw-resize", ce = "action", le = bt ? "touchend touchcancel" : "mouseup", de = bt ? "touchmove" : "mousemove", ue = bt ? "touchstart" : "mousedown", At = Ct ? "pointerdown" : ue, Tt = Ct ? "pointermove" : de, kt = Ct ? "pointerup pointercancel" : le, xt = "error", Ot = "keydown", j = "load", Nt = "wheel", K = "action", L = "actionend", fe = "actionmove", U = "actionstart", M = "change", pt = "transform";
+import { defineComponent as _, h as D, openBlock as W, createBlock as X, resolveDynamicComponent as H, unref as Y, withCtx as Ft, renderSlot as qt, useTemplateRef as ie } from "vue";
+const at = typeof window < "u" && typeof window.document < "u", I = at ? window : {}, bt = at ? "ontouchstart" in I.document.documentElement : !1, Ct = at ? "PointerEvent" in I : !1, B = "cropper", J = `${B}-canvas`, ne = `${B}-crosshair`, ae = `${B}-grid`, oe = `${B}-handle`, ot = `${B}-image`, z = `${B}-selection`, re = `${B}-shade`, he = `${B}-viewer`, st = "select", Vt = "move", Z = "scale", mt = "rotate", it = "transform", P = "none", yt = "n-resize", Et = "e-resize", wt = "s-resize", St = "w-resize", G = "ne-resize", F = "nw-resize", q = "se-resize", V = "sw-resize", ce = "action", le = bt ? "touchend touchcancel" : "mouseup", de = bt ? "touchmove" : "mousemove", ue = bt ? "touchstart" : "mousedown", At = Ct ? "pointerdown" : ue, Tt = Ct ? "pointermove" : de, kt = Ct ? "pointerup pointercancel" : le, xt = "error", Ot = "keydown", j = "load", Nt = "wheel", K = "action", L = "actionend", fe = "actionmove", U = "actionstart", M = "change", pt = "transform";
 function $e(o) {
   return typeof o == "string";
 }
-const Jt = Number.isNaN || R.isNaN;
+const Jt = Number.isNaN || I.isNaN;
 function f(o) {
   return typeof o == "number" && !Jt(o);
 }
@@ -34,11 +34,11 @@ function te(o) {
   return typeof o == "object" && o !== null && o.nodeType === 1;
 }
 const pe = /([a-z\d])([A-Z])/g;
-function Rt(o) {
+function It(o) {
   return String(o).replace(pe, "$1-$2").toLowerCase();
 }
 const be = /-[A-z\d]/g;
-function It(o) {
+function Rt(o) {
   return o.replace(be, (t) => t.slice(1).toUpperCase());
 }
 const ee = /\s\s*/;
@@ -70,8 +70,8 @@ function ye(o, t) {
 function Mt(o) {
   const { documentElement: t } = o.ownerDocument, e = o.getBoundingClientRect();
   return {
-    left: e.left + (R.pageXOffset - t.clientLeft),
-    top: e.top + (R.pageYOffset - t.clientTop)
+    left: e.left + (I.pageXOffset - t.clientLeft),
+    top: e.top + (I.pageYOffset - t.clientTop)
   };
 }
 const Ee = /deg|g?rad|turn$/i;
@@ -90,15 +90,15 @@ function gt(o) {
   }
   return t;
 }
-const Dt = "contain", we = "cover";
-function et(o, t = Dt) {
+const _t = "contain", we = "cover";
+function et(o, t = _t) {
   const { aspectRatio: e } = o;
   let { width: s, height: i } = o;
-  const n = T(s), r = T(i);
-  if (n && r) {
+  const n = T(s), h = T(i);
+  if (n && h) {
     const a = i * e;
-    t === Dt && a > s || t === we && a < s ? i = s / e : s = i * e;
-  } else n ? i = s / e : r && (s = i * e);
+    t === _t && a > s || t === we && a < s ? i = s / e : s = i * e;
+  } else n ? i = s / e : h && (s = i * e);
   return {
     width: s,
     height: i
@@ -107,25 +107,25 @@ function et(o, t = Dt) {
 function se(o, ...t) {
   if (t.length === 0)
     return o;
-  const [e, s, i, n, r, a] = o, [l, c, h, u, $, g] = t[0];
+  const [e, s, i, n, h, a] = o, [l, c, r, u, $, g] = t[0];
   return o = [
     e * l + i * c,
     s * l + n * c,
-    e * h + i * u,
-    s * h + n * u,
-    e * $ + i * g + r,
+    e * r + i * u,
+    s * r + n * u,
+    e * $ + i * g + h,
     s * $ + n * g + a
   ], se(o, ...t.slice(1));
 }
 var Se = ":host([hidden]){display:none!important}";
-const Ae = /left|top|width|height/i, _t = "open", Q = /* @__PURE__ */ new WeakMap(), tt = /* @__PURE__ */ new WeakMap(), Wt = /* @__PURE__ */ new Map(), Xt = R.document && Array.isArray(R.document.adoptedStyleSheets) && "replaceSync" in R.CSSStyleSheet.prototype;
-class I extends HTMLElement {
+const Ae = /left|top|width|height/i, Dt = "open", Q = /* @__PURE__ */ new WeakMap(), tt = /* @__PURE__ */ new WeakMap(), Wt = /* @__PURE__ */ new Map(), Xt = I.document && Array.isArray(I.document.adoptedStyleSheets) && "replaceSync" in I.CSSStyleSheet.prototype;
+class R extends HTMLElement {
   get $sharedStyle() {
     return `${this.themeColor ? `:host{--theme-color: ${this.themeColor};}` : ""}${Se}`;
   }
   constructor() {
     var t, e;
-    super(), this.shadowRootMode = _t, this.slottable = !0;
+    super(), this.shadowRootMode = Dt, this.slottable = !0;
     const s = (e = (t = Object.getPrototypeOf(this)) === null || t === void 0 ? void 0 : t.constructor) === null || e === void 0 ? void 0 : e.$name;
     s && Wt.set(s, this.tagName.toLowerCase());
   }
@@ -140,17 +140,17 @@ class I extends HTMLElement {
   attributeChangedCallback(t, e, s) {
     if (Object.is(s, e))
       return;
-    const i = It(t), n = this[i];
-    let r = s;
+    const i = Rt(t), n = this[i];
+    let h = s;
     switch (typeof n) {
       case "boolean":
-        r = s !== null && s !== "false";
+        h = s !== null && s !== "false";
         break;
       case "number":
-        r = Number(s);
+        h = Number(s);
         break;
     }
-    switch (this[i] = r, t) {
+    switch (this[i] = h, t) {
       case "theme-color": {
         const a = tt.get(this), l = this.$sharedStyle;
         a && l && (Xt ? a.replaceSync(l) : a.textContent = l);
@@ -161,7 +161,7 @@ class I extends HTMLElement {
   // Convert property to attribute
   $propertyChangedCallback(t, e, s) {
     if (!Object.is(s, e))
-      switch (t = Rt(t), typeof s) {
+      switch (t = It(t), typeof s) {
         case "boolean":
           s === !0 ? this.hasAttribute(t) || this.setAttribute(t, "") : this.removeAttribute(t);
           break;
@@ -176,7 +176,7 @@ class I extends HTMLElement {
   }
   connectedCallback() {
     Object.getPrototypeOf(this).constructor.observedAttributes.forEach((e) => {
-      const s = It(e);
+      const s = Rt(e);
       let i = this[s];
       ge(i) || this.$propertyChangedCallback(s, void 0, i), Object.defineProperty(this, s, {
         enumerable: !0,
@@ -185,13 +185,13 @@ class I extends HTMLElement {
           return i;
         },
         set(n) {
-          const r = i;
-          i = n, this.$propertyChangedCallback(s, r, n);
+          const h = i;
+          i = n, this.$propertyChangedCallback(s, h, n);
         }
       });
     });
     const t = this.attachShadow({
-      mode: this.shadowRootMode || _t
+      mode: this.shadowRootMode || Dt
     });
     if (this.shadowRoot || Q.set(this, t), tt.set(this, this.$addStyles(this.$sharedStyle)), this.$style && this.$addStyles(this.$style), this.$template) {
       const e = document.createElement("template");
@@ -258,12 +258,12 @@ class I extends HTMLElement {
    * @param {object} [options] The element definition options.
    */
   static $define(t, e) {
-    Qt(t) && (e = t, t = ""), t || (t = this.$name || this.name), t = Rt(t), at && R.customElements && !R.customElements.get(t) && customElements.define(t, this, e);
+    Qt(t) && (e = t, t = ""), t || (t = this.$name || this.name), t = It(t), at && I.customElements && !I.customElements.get(t) && customElements.define(t, this, e);
   }
 }
-I.$version = "2.0.0-rc.2";
+R.$version = "2.0.0-rc.2";
 var Te = ':host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([background]){background-color:#fff;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-image:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%);background-position:0 0,.5rem .5rem;background-size:1rem 1rem}:host([disabled]){pointer-events:none}:host([disabled]):after{bottom:0;content:"";cursor:not-allowed;display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}';
-class rt extends I {
+class rt extends R {
   constructor() {
     super(...arguments), this.$onPointerDown = null, this.$onPointerMove = null, this.$onPointerUp = null, this.$onWheel = null, this.$wheeling = !1, this.$pointers = /* @__PURE__ */ new Map(), this.$style = Te, this.$action = P, this.background = !1, this.disabled = !1, this.scaleStep = 0.1, this.themeColor = "#39f";
   }
@@ -306,7 +306,7 @@ class rt extends I {
     (f(e) && e !== 1 || f(s) && s !== 0 || t.ctrlKey))
       return;
     const { $pointers: n } = this;
-    let r = "";
+    let h = "";
     if (t.changedTouches)
       Array.from(t.changedTouches).forEach(({ identifier: a, pageX: l, pageY: c }) => {
         n.set(a, {
@@ -325,10 +325,10 @@ class rt extends I {
         endY: c
       });
     }
-    n.size > 1 ? r = it : te(t.target) && (r = t.target.action || t.target.getAttribute(ce) || ""), this.$emit(U, {
-      action: r,
+    n.size > 1 ? h = it : te(t.target) && (h = t.target.action || t.target.getAttribute(ce) || ""), this.$emit(U, {
+      action: h,
       relatedEvent: t
-    }) !== !1 && (t.preventDefault(), this.$action = r, this.style.willChange = "transform");
+    }) !== !1 && (t.preventDefault(), this.$action = h, this.style.willChange = "transform");
   }
   $handlePointerMove(t) {
     const { $action: e, $pointers: s } = this;
@@ -338,17 +338,17 @@ class rt extends I {
     }) === !1)
       return;
     if (t.preventDefault(), t.changedTouches)
-      Array.from(t.changedTouches).forEach(({ identifier: n, pageX: r, pageY: a }) => {
+      Array.from(t.changedTouches).forEach(({ identifier: n, pageX: h, pageY: a }) => {
         const l = s.get(n);
         l && Object.assign(l, {
-          endX: r,
+          endX: h,
           endY: a
         });
       });
     else {
-      const { pointerId: n = 0, pageX: r, pageY: a } = t, l = s.get(n);
+      const { pointerId: n = 0, pageX: h, pageY: a } = t, l = s.get(n);
       l && Object.assign(l, {
-        endX: r,
+        endX: h,
         endY: a
       });
     }
@@ -358,22 +358,22 @@ class rt extends I {
     };
     if (e === it) {
       const n = new Map(s);
-      let r = 0, a = 0, l = 0, c = 0, h = t.pageX, u = t.pageY;
+      let h = 0, a = 0, l = 0, c = 0, r = t.pageX, u = t.pageY;
       s.forEach((d, S) => {
         n.delete(S), n.forEach((E) => {
           let m = E.startX - d.startX, C = E.startY - d.startY, p = E.endX - d.endX, b = E.endY - d.endY, w = 0, A = 0, k = 0, x = 0;
           if (m === 0 ? C < 0 ? k = Math.PI * 2 : C > 0 && (k = Math.PI) : m > 0 ? k = Math.PI / 2 + Math.atan(C / m) : m < 0 && (k = Math.PI * 1.5 + Math.atan(C / m)), p === 0 ? b < 0 ? x = Math.PI * 2 : b > 0 && (x = Math.PI) : p > 0 ? x = Math.PI / 2 + Math.atan(b / p) : p < 0 && (x = Math.PI * 1.5 + Math.atan(b / p)), x > 0 || k > 0) {
             const O = x - k, N = Math.abs(O);
-            N > r && (r = N, l = O, h = (d.startX + E.startX) / 2, u = (d.startY + E.startY) / 2);
+            N > h && (h = N, l = O, r = (d.startX + E.startX) / 2, u = (d.startY + E.startY) / 2);
           }
           if (m = Math.abs(m), C = Math.abs(C), p = Math.abs(p), b = Math.abs(b), m > 0 && C > 0 ? w = Math.sqrt(m * m + C * C) : m > 0 ? w = m : C > 0 && (w = C), p > 0 && b > 0 ? A = Math.sqrt(p * p + b * b) : p > 0 ? A = p : b > 0 && (A = b), w > 0 && A > 0) {
             const O = (A - w) / w, N = Math.abs(O);
-            N > a && (a = N, c = O, h = (d.startX + E.startX) / 2, u = (d.startY + E.startY) / 2);
+            N > a && (a = N, c = O, r = (d.startX + E.startX) / 2, u = (d.startY + E.startY) / 2);
           }
         });
       });
-      const $ = r > 0, g = a > 0;
-      $ && g ? (i.rotate = l, i.scale = c, i.centerX = h, i.centerY = u) : $ ? (i.action = mt, i.rotate = l, i.centerX = h, i.centerY = u) : g ? (i.action = Z, i.scale = c, i.centerX = h, i.centerY = u) : i.action = P;
+      const $ = h > 0, g = a > 0;
+      $ && g ? (i.rotate = l, i.scale = c, i.centerX = r, i.centerY = u) : $ ? (i.action = mt, i.rotate = l, i.centerX = r, i.centerY = u) : g ? (i.action = Z, i.scale = c, i.centerX = r, i.centerY = u) : i.action = P;
     } else {
       const [n] = Array.from(s.values());
       Object.assign(i, n);
@@ -439,25 +439,25 @@ class rt extends I {
         return;
       }
       const i = document.createElement("canvas");
-      let n = this.offsetWidth, r = this.offsetHeight, a = 1;
-      nt(t) && (T(t.width) || T(t.height)) && ({ width: n, height: r } = et({
-        aspectRatio: n / r,
+      let n = this.offsetWidth, h = this.offsetHeight, a = 1;
+      nt(t) && (T(t.width) || T(t.height)) && ({ width: n, height: h } = et({
+        aspectRatio: n / h,
         width: t.width,
         height: t.height
-      }), a = n / this.offsetWidth), i.width = n, i.height = r;
+      }), a = n / this.offsetWidth), i.width = n, i.height = h;
       const l = this.querySelector(this.$getTagNameOf(ot));
       if (!l) {
         e(i);
         return;
       }
       l.$ready().then((c) => {
-        const h = i.getContext("2d");
-        if (h) {
+        const r = i.getContext("2d");
+        if (r) {
           const [u, $, g, d, S, E] = l.$getTransform();
           let m = S, C = E, p = c.naturalWidth, b = c.naturalHeight;
           a !== 1 && (m *= a, C *= a, p *= a, b *= a);
           const w = p / 2, A = b / 2;
-          h.fillStyle = "transparent", h.fillRect(0, 0, n, r), nt(t) && vt(t.beforeDraw) && t.beforeDraw.call(this, h, i), h.save(), h.translate(w, A), h.transform(u, $, g, d, m, C), h.translate(-w, -A), h.drawImage(c, 0, 0, p, b), h.restore();
+          r.fillStyle = "transparent", r.fillRect(0, 0, n, h), nt(t) && vt(t.beforeDraw) && t.beforeDraw.call(this, r, i), r.save(), r.translate(w, A), r.transform(u, $, g, d, m, C), r.translate(-w, -A), r.drawImage(c, 0, 0, p, b), r.restore();
         }
         e(i);
       }).catch(s);
@@ -478,7 +478,7 @@ const Ht = /* @__PURE__ */ new WeakMap(), Yt = [
   "src",
   "srcset"
 ];
-class ht extends I {
+class ht extends R {
   constructor() {
     super(...arguments), this.$matrix = [1, 0, 0, 1, 0, 0], this.$onLoad = null, this.$onCanvasAction = null, this.$onCanvasActionEnd = null, this.$onCanvasActionStart = null, this.$actionStartTarget = null, this.$style = ke, this.$image = new Image(), this.initialCenterSize = "contain", this.rotatable = !1, this.scalable = !1, this.skewable = !1, this.slottable = !1, this.translatable = !1;
   }
@@ -545,23 +545,23 @@ class ht extends I {
       switch (n === it && (!this.rotatable || !this.scalable) && (this.rotatable ? n = mt : this.scalable ? n = Z : n = P), n) {
         case Vt:
           if (this.translatable) {
-            let r = null;
-            i && (r = i.target.closest(this.$getTagNameOf(z))), r || (r = e.querySelector(this.$getTagNameOf(z))), r && r.multiple && !r.active && (r = e.querySelector(`${this.$getTagNameOf(z)}[active]`)), (!r || r.hidden || !r.movable || r.dynamic || !(this.$actionStartTarget && r.contains(this.$actionStartTarget))) && this.$move(s.endX - s.startX, s.endY - s.startY);
+            let h = null;
+            i && (h = i.target.closest(this.$getTagNameOf(z))), h || (h = e.querySelector(this.$getTagNameOf(z))), h && h.multiple && !h.active && (h = e.querySelector(`${this.$getTagNameOf(z)}[active]`)), (!h || h.hidden || !h.movable || h.dynamic || !(this.$actionStartTarget && h.contains(this.$actionStartTarget))) && this.$move(s.endX - s.startX, s.endY - s.startY);
           }
           break;
         case mt:
           if (this.rotatable)
             if (i) {
-              const { x: r, y: a } = this.getBoundingClientRect();
-              this.$rotate(s.rotate, i.clientX - r, i.clientY - a);
+              const { x: h, y: a } = this.getBoundingClientRect();
+              this.$rotate(s.rotate, i.clientX - h, i.clientY - a);
             } else
               this.$rotate(s.rotate);
           break;
         case Z:
           if (this.scalable)
             if (i) {
-              const r = i.target.closest(this.$getTagNameOf(z));
-              if (!r || !r.zoomable || r.zoomable && r.dynamic) {
+              const h = i.target.closest(this.$getTagNameOf(z));
+              if (!h || !h.zoomable || h.zoomable && h.dynamic) {
                 const { x: a, y: l } = this.getBoundingClientRect();
                 this.$zoom(s.scale, i.clientX - a, i.clientY - l);
               }
@@ -570,10 +570,10 @@ class ht extends I {
           break;
         case it:
           if (this.rotatable && this.scalable) {
-            const { rotate: r } = s;
+            const { rotate: h } = s;
             let { scale: a } = s;
             a < 0 ? a = 1 / (1 - a) : a += 1;
-            const l = Math.cos(r), c = Math.sin(r), [h, u, $, g] = [
+            const l = Math.cos(h), c = Math.sin(h), [r, u, $, g] = [
               l * a,
               c * a,
               -c * a,
@@ -581,9 +581,9 @@ class ht extends I {
             ];
             if (i) {
               const d = this.getBoundingClientRect(), S = i.clientX - d.x, E = i.clientY - d.y, [m, C, p, b] = this.$matrix, w = d.width / 2, A = d.height / 2, k = S - w, x = E - A, O = (k * b - p * x) / (m * b - p * C), N = (x * m - C * k) / (m * b - p * C);
-              this.$transform(h, u, $, g, O * (1 - h) + N * $, N * (1 - g) + O * u);
+              this.$transform(r, u, $, g, O * (1 - r) + N * $, N * (1 - g) + O * u);
             } else
-              this.$transform(h, u, $, g, 0, 0);
+              this.$transform(r, u, $, g, 0, 0);
           }
           break;
       }
@@ -596,14 +596,14 @@ class ht extends I {
    */
   $ready(t) {
     const { $image: e } = this, s = new Promise((i, n) => {
-      const r = new Error("Failed to load the image source");
+      const h = new Error("Failed to load the image source");
       if (e.complete)
-        e.naturalWidth > 0 && e.naturalHeight > 0 ? i(e) : n(r);
+        e.naturalWidth > 0 && e.naturalHeight > 0 ? i(e) : n(h);
       else {
         const a = () => {
           v(e, xt, l), i(e);
         }, l = () => {
-          v(e, j, a), n(r);
+          v(e, j, a), n(h);
         };
         Pt(e, j, a), Pt(e, xt, l);
       }
@@ -619,8 +619,8 @@ class ht extends I {
     const { parentElement: e } = this;
     if (!e)
       return this;
-    const s = e.getBoundingClientRect(), i = s.width, n = s.height, { x: r, y: a, width: l, height: c } = this.getBoundingClientRect(), h = r + l / 2, u = a + c / 2, $ = s.x + i / 2, g = s.y + n / 2;
-    if (this.$move($ - h, g - u), t && (l !== i || c !== n)) {
+    const s = e.getBoundingClientRect(), i = s.width, n = s.height, { x: h, y: a, width: l, height: c } = this.getBoundingClientRect(), r = h + l / 2, u = a + c / 2, $ = s.x + i / 2, g = s.y + n / 2;
+    if (this.$move($ - r, g - u), t && (l !== i || c !== n)) {
       const d = i / l, S = n / c;
       switch (t) {
         case "cover":
@@ -641,7 +641,7 @@ class ht extends I {
    */
   $move(t, e = t) {
     if (this.translatable && f(t) && f(e)) {
-      const [s, i, n, r] = this.$matrix, a = (t * r - n * e) / (s * r - n * i), l = (e * s - i * t) / (s * r - n * i);
+      const [s, i, n, h] = this.$matrix, a = (t * h - n * e) / (s * h - n * i), l = (e * s - i * t) / (s * h - n * i);
       this.$translate(a, l);
     }
     return this;
@@ -654,8 +654,8 @@ class ht extends I {
    */
   $moveTo(t, e = t) {
     if (this.translatable && f(t) && f(e)) {
-      const [s, i, n, r] = this.$matrix, a = (t * r - n * e) / (s * r - n * i), l = (e * s - i * t) / (s * r - n * i);
-      this.$setTransform(s, i, n, r, a, l);
+      const [s, i, n, h] = this.$matrix, a = (t * h - n * e) / (s * h - n * i), l = (e * s - i * t) / (s * h - n * i);
+      this.$setTransform(s, i, n, h, a, l);
     }
     return this;
   }
@@ -670,12 +670,12 @@ class ht extends I {
    */
   $rotate(t, e, s) {
     if (this.rotatable) {
-      const i = gt(t), n = Math.cos(i), r = Math.sin(i), [a, l, c, h] = [n, r, -r, n];
+      const i = gt(t), n = Math.cos(i), h = Math.sin(i), [a, l, c, r] = [n, h, -h, n];
       if (f(e) && f(s)) {
         const [u, $, g, d] = this.$matrix, { width: S, height: E } = this.getBoundingClientRect(), m = S / 2, C = E / 2, p = e - m, b = s - C, w = (p * d - g * b) / (u * d - g * $), A = (b * u - $ * p) / (u * d - g * $);
-        this.$transform(a, l, c, h, w * (1 - a) - A * c, A * (1 - h) - w * l);
+        this.$transform(a, l, c, r, w * (1 - a) - A * c, A * (1 - r) - w * l);
       } else
-        this.$transform(a, l, c, h, 0, 0);
+        this.$transform(a, l, c, r, 0, 0);
     }
     return this;
   }
@@ -690,7 +690,7 @@ class ht extends I {
     if (!this.scalable || t === 0)
       return this;
     if (t < 0 ? t = 1 / (1 - t) : t += 1, f(e) && f(s)) {
-      const [i, n, r, a] = this.$matrix, { width: l, height: c } = this.getBoundingClientRect(), h = l / 2, u = c / 2, $ = e - h, g = s - u, d = ($ * a - r * g) / (i * a - r * n), S = (g * i - n * $) / (i * a - r * n);
+      const [i, n, h, a] = this.$matrix, { width: l, height: c } = this.getBoundingClientRect(), r = l / 2, u = c / 2, $ = e - r, g = s - u, d = ($ * a - h * g) / (i * a - h * n), S = (g * i - n * $) / (i * a - h * n);
       this.$transform(t, 0, 0, t, d * (1 - t), S * (1 - t));
     } else
       this.$scale(t);
@@ -745,8 +745,8 @@ class ht extends I {
    * @param {number} f The translating distance in the vertical direction.
    * @returns {CropperImage} Returns `this` for chaining.
    */
-  $transform(t, e, s, i, n, r) {
-    return f(t) && f(e) && f(s) && f(i) && f(n) && f(r) ? this.$setTransform(se(this.$matrix, [t, e, s, i, n, r])) : this;
+  $transform(t, e, s, i, n, h) {
+    return f(t) && f(e) && f(s) && f(i) && f(n) && f(h) ? this.$setTransform(se(this.$matrix, [t, e, s, i, n, h])) : this;
   }
   /**
    * Resets (overrides) the current transform to the specific identity matrix.
@@ -759,9 +759,9 @@ class ht extends I {
    * @param {number} f The translating distance in the vertical direction.
    * @returns {CropperImage} Returns `this` for chaining.
    */
-  $setTransform(t, e, s, i, n, r) {
-    if ((this.rotatable || this.scalable || this.skewable || this.translatable) && (Array.isArray(t) && ([t, e, s, i, n, r] = t), f(t) && f(e) && f(s) && f(i) && f(n) && f(r))) {
-      const a = [...this.$matrix], l = [t, e, s, i, n, r];
+  $setTransform(t, e, s, i, n, h) {
+    if ((this.rotatable || this.scalable || this.skewable || this.translatable) && (Array.isArray(t) && ([t, e, s, i, n, h] = t), f(t) && f(e) && f(s) && f(i) && f(n) && f(h))) {
+      const a = [...this.$matrix], l = [t, e, s, i, n, h];
       if (this.$emit(pt, {
         matrix: l,
         oldMatrix: a
@@ -792,7 +792,7 @@ ht.$name = ot;
 ht.$version = "2.0.0-rc.2";
 var xe = ":host{display:block;height:0;left:0;outline:var(--theme-color) solid 1px;position:relative;top:0;width:0}:host([transparent]){outline-color:transparent}";
 const Bt = /* @__PURE__ */ new WeakMap();
-class ct extends I {
+class ct extends R {
   constructor() {
     super(...arguments), this.$onCanvasChange = null, this.$onCanvasActionEnd = null, this.$onCanvasActionStart = null, this.$style = xe, this.x = 0, this.y = 0, this.width = 0, this.height = 0, this.slottable = !1, this.themeColor = "rgba(0, 0, 0, 0.65)";
   }
@@ -821,8 +821,8 @@ class ct extends I {
       }, this.$onCanvasActionEnd = (s) => {
         e.hidden && s.detail.action === st && (this.hidden = !0);
       }, this.$onCanvasChange = (s) => {
-        const { x: i, y: n, width: r, height: a } = s.detail;
-        this.$change(i, n, r, a), (e.hidden || i === 0 && n === 0 && r === 0 && a === 0) && (this.hidden = !0);
+        const { x: i, y: n, width: h, height: a } = s.detail;
+        this.$change(i, n, h, a), (e.hidden || i === 0 && n === 0 && h === 0 && a === 0) && (this.hidden = !0);
       }, y(t, U, this.$onCanvasActionStart), y(t, L, this.$onCanvasActionEnd), y(t, M, this.$onCanvasChange));
     }
     this.$render();
@@ -858,14 +858,14 @@ class ct extends I {
       transform: `translate(${this.x}px, ${this.y}px)`,
       width: this.width,
       height: this.height,
-      outlineWidth: R.innerWidth
+      outlineWidth: I.innerWidth
     });
   }
 }
 ct.$name = re;
 ct.$version = "2.0.0-rc.2";
 var Oe = ':host{background-color:var(--theme-color);display:block}:host([action=move]),:host([action=select]){height:100%;left:0;position:absolute;top:0;width:100%}:host([action=move]){cursor:move}:host([action=select]){cursor:crosshair}:host([action$=-resize]){background-color:transparent;height:15px;position:absolute;width:15px}:host([action$=-resize]):after{background-color:var(--theme-color);content:"";display:block;height:5px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px}:host([action=n-resize]),:host([action=s-resize]){cursor:ns-resize;left:50%;transform:translateX(-50%);width:100%}:host([action=n-resize]){top:-8px}:host([action=s-resize]){bottom:-8px}:host([action=e-resize]),:host([action=w-resize]){cursor:ew-resize;height:100%;top:50%;transform:translateY(-50%)}:host([action=e-resize]){right:-8px}:host([action=w-resize]){left:-8px}:host([action=ne-resize]){cursor:nesw-resize;right:-8px;top:-8px}:host([action=nw-resize]){cursor:nwse-resize;left:-8px;top:-8px}:host([action=se-resize]){bottom:-8px;cursor:nwse-resize;right:-8px}:host([action=se-resize]):after{height:15px;width:15px}@media (pointer:coarse){:host([action=se-resize]):after{height:10px;width:10px}}@media (pointer:fine){:host([action=se-resize]):after{height:5px;width:5px}}:host([action=sw-resize]){bottom:-8px;cursor:nesw-resize;left:-8px}:host([plain]){background-color:transparent}';
-class lt extends I {
+class lt extends R {
   constructor() {
     super(...arguments), this.$onCanvasCropEnd = null, this.$onCanvasCropStart = null, this.$style = Oe, this.action = P, this.plain = !1, this.slottable = !1, this.themeColor = "rgba(51, 153, 255, 0.5)";
   }
@@ -880,7 +880,7 @@ lt.$name = oe;
 lt.$version = "2.0.0-rc.2";
 var Ne = ':host{display:block;left:0;position:relative;right:0}:host([outlined]){outline:1px solid var(--theme-color)}:host([multiple]){outline:1px dashed hsla(0,0%,100%,.5)}:host([multiple]):after{bottom:0;content:"";cursor:pointer;display:block;left:0;position:absolute;right:0;top:0}:host([multiple][active]){outline-color:var(--theme-color);z-index:1}:host([multiple])>*{visibility:hidden}:host([multiple][active])>*{visibility:visible}:host([multiple][active]):after{display:none}';
 const Lt = /* @__PURE__ */ new WeakMap();
-class dt extends I {
+class dt extends R {
   constructor() {
     super(...arguments), this.$onCanvasAction = null, this.$onCanvasActionStart = null, this.$onCanvasActionEnd = null, this.$onDocumentKeyDown = null, this.$action = "", this.$actionStartTarget = null, this.$changing = !1, this.$style = Ne, this.$initialSelection = {
       x: 0,
@@ -991,8 +991,8 @@ class dt extends I {
     const { initialCoverage: s, parentElement: i } = this;
     if (T(s) && i) {
       const n = this.aspectRatio || this.initialAspectRatio;
-      let r = (e ? 0 : this.width) || i.offsetWidth * s, a = (e ? 0 : this.height) || i.offsetHeight * s;
-      T(n) && ({ width: r, height: a } = et({ aspectRatio: n, width: r, height: a })), this.$change(this.x, this.y, r, a), t && this.$center(), this.$initialSelection = {
+      let h = (e ? 0 : this.width) || i.offsetWidth * s, a = (e ? 0 : this.height) || i.offsetHeight * s;
+      T(n) && ({ width: h, height: a } = et({ aspectRatio: n, width: h, height: a })), this.$change(this.x, this.y, h, a), t && this.$center(), this.$initialSelection = {
         x: this.x,
         y: this.y,
         width: this.width,
@@ -1039,17 +1039,17 @@ class dt extends I {
     let { action: n } = s;
     if (!n && this.multiple && (n = this.$action || (i == null ? void 0 : i.target.action), this.$action = n), !n || this.hidden && n !== st || this.multiple && !this.active && n !== Z)
       return;
-    const r = s.endX - s.startX, a = s.endY - s.startY, { width: l, height: c } = this;
-    let { aspectRatio: h } = this;
-    switch (!T(h) && i.shiftKey && (h = T(l) && T(c) ? l / c : 1), n) {
+    const h = s.endX - s.startX, a = s.endY - s.startY, { width: l, height: c } = this;
+    let { aspectRatio: r } = this;
+    switch (!T(r) && i.shiftKey && (r = T(l) && T(c) ? l / c : 1), n) {
       case st:
-        if (r !== 0 && a !== 0) {
+        if (h !== 0 && a !== 0) {
           const { $canvas: u } = this, $ = Mt(e);
-          (this.multiple && !this.hidden ? this.$createSelection() : this).$change(s.startX - $.left, s.startY - $.top, Math.abs(r), Math.abs(a), h), r < 0 ? a < 0 ? n = F : a > 0 && (n = V) : r > 0 && (a < 0 ? n = G : a > 0 && (n = q)), u && (u.$action = n);
+          (this.multiple && !this.hidden ? this.$createSelection() : this).$change(s.startX - $.left, s.startY - $.top, Math.abs(h), Math.abs(a), r), h < 0 ? a < 0 ? n = F : a > 0 && (n = V) : h > 0 && (a < 0 ? n = G : a > 0 && (n = q)), u && (u.$action = n);
         }
         break;
       case Vt:
-        this.movable && (this.dynamic || this.$actionStartTarget && this.contains(this.$actionStartTarget)) && this.$move(r, a);
+        this.movable && (this.dynamic || this.$actionStartTarget && this.contains(this.$actionStartTarget)) && this.$move(h, a);
         break;
       case Z:
         if (i && this.zoomable && (this.dynamic || this.contains(i.target))) {
@@ -1058,7 +1058,7 @@ class dt extends I {
         }
         break;
       default:
-        this.$resize(n, r, a, h);
+        this.$resize(n, h, a, r);
     }
   }
   $handleActionEnd() {
@@ -1140,35 +1140,35 @@ class dt extends I {
   $resize(t, e = 0, s = 0, i = this.aspectRatio) {
     if (!this.resizable)
       return this;
-    const n = T(i), { $canvas: r } = this;
-    let { x: a, y: l, width: c, height: h } = this;
+    const n = T(i), { $canvas: h } = this;
+    let { x: a, y: l, width: c, height: r } = this;
     switch (t) {
       case yt:
-        l += s, h -= s, h < 0 && (t = wt, h = -h, l -= h), n && (e = s * i, a += e / 2, c -= e, c < 0 && (c = -c, a -= c));
+        l += s, r -= s, r < 0 && (t = wt, r = -r, l -= r), n && (e = s * i, a += e / 2, c -= e, c < 0 && (c = -c, a -= c));
         break;
       case Et:
-        c += e, c < 0 && (t = St, c = -c, a -= c), n && (s = e / i, l -= s / 2, h += s, h < 0 && (h = -h, l -= h));
+        c += e, c < 0 && (t = St, c = -c, a -= c), n && (s = e / i, l -= s / 2, r += s, r < 0 && (r = -r, l -= r));
         break;
       case wt:
-        h += s, h < 0 && (t = yt, h = -h, l -= h), n && (e = s * i, a -= e / 2, c += e, c < 0 && (c = -c, a -= c));
+        r += s, r < 0 && (t = yt, r = -r, l -= r), n && (e = s * i, a -= e / 2, c += e, c < 0 && (c = -c, a -= c));
         break;
       case St:
-        a += e, c -= e, c < 0 && (t = Et, c = -c, a -= c), n && (s = e / i, l += s / 2, h -= s, h < 0 && (h = -h, l -= h));
+        a += e, c -= e, c < 0 && (t = Et, c = -c, a -= c), n && (s = e / i, l += s / 2, r -= s, r < 0 && (r = -r, l -= r));
         break;
       case G:
-        n && (s = -e / i), l += s, h -= s, c += e, c < 0 && h < 0 ? (t = V, c = -c, h = -h, a -= c, l -= h) : c < 0 ? (t = F, c = -c, a -= c) : h < 0 && (t = q, h = -h, l -= h);
+        n && (s = -e / i), l += s, r -= s, c += e, c < 0 && r < 0 ? (t = V, c = -c, r = -r, a -= c, l -= r) : c < 0 ? (t = F, c = -c, a -= c) : r < 0 && (t = q, r = -r, l -= r);
         break;
       case F:
-        n && (s = e / i), a += e, l += s, c -= e, h -= s, c < 0 && h < 0 ? (t = q, c = -c, h = -h, a -= c, l -= h) : c < 0 ? (t = G, c = -c, a -= c) : h < 0 && (t = V, h = -h, l -= h);
+        n && (s = e / i), a += e, l += s, c -= e, r -= s, c < 0 && r < 0 ? (t = q, c = -c, r = -r, a -= c, l -= r) : c < 0 ? (t = G, c = -c, a -= c) : r < 0 && (t = V, r = -r, l -= r);
         break;
       case q:
-        n && (s = e / i), c += e, h += s, c < 0 && h < 0 ? (t = F, c = -c, h = -h, a -= c, l -= h) : c < 0 ? (t = V, c = -c, a -= c) : h < 0 && (t = G, h = -h, l -= h);
+        n && (s = e / i), c += e, r += s, c < 0 && r < 0 ? (t = F, c = -c, r = -r, a -= c, l -= r) : c < 0 ? (t = V, c = -c, a -= c) : r < 0 && (t = G, r = -r, l -= r);
         break;
       case V:
-        n && (s = -e / i), a += e, c -= e, h += s, c < 0 && h < 0 ? (t = G, c = -c, h = -h, a -= c, l -= h) : c < 0 ? (t = q, c = -c, a -= c) : h < 0 && (t = F, h = -h, l -= h);
+        n && (s = -e / i), a += e, c -= e, r += s, c < 0 && r < 0 ? (t = G, c = -c, r = -r, a -= c, l -= r) : c < 0 ? (t = q, c = -c, a -= c) : r < 0 && (t = F, r = -r, l -= r);
         break;
     }
-    return r && r.$setAction(t), this.$change(a, l, c, h);
+    return h && h.$setAction(t), this.$change(a, l, c, r);
   }
   /**
    * Zooms the selection.
@@ -1181,9 +1181,9 @@ class dt extends I {
     if (!this.zoomable || t === 0)
       return this;
     t < 0 ? t = 1 / (1 - t) : t += 1;
-    const { width: i, height: n } = this, r = i * t, a = n * t;
+    const { width: i, height: n } = this, h = i * t, a = n * t;
     let l = this.x, c = this.y;
-    return f(e) && f(s) ? (l -= (r - i) * ((e - this.x) / i), c -= (a - n) * ((s - this.y) / n)) : (l -= (r - i) / 2, c -= (a - n) / 2), this.$change(l, c, r, a);
+    return f(e) && f(s) ? (l -= (h - i) * ((e - this.x) / i), c -= (a - n) * ((s - this.y) / n)) : (l -= (h - i) / 2, c -= (a - n) / 2), this.$change(l, c, h, a);
   }
   /**
    * Changes the position and/or size of the selection.
@@ -1195,8 +1195,8 @@ class dt extends I {
    * @param {number} [_force] Force change.
    * @returns {CropperSelection} Returns `this` for chaining.
    */
-  $change(t, e, s = this.width, i = this.height, n = this.aspectRatio, r = !1) {
-    return this.$changing || !f(t) || !f(e) || !f(s) || !f(i) || s < 0 || i < 0 ? this : (T(n) && ({ width: s, height: i } = et({ aspectRatio: n, width: s, height: i }, "cover")), this.precise || (t = Math.round(t), e = Math.round(e), s = Math.round(s), i = Math.round(i)), t === this.x && e === this.y && s === this.width && i === this.height && Object.is(n, this.aspectRatio) && !r ? this : (this.hidden && (this.hidden = !1), this.$emit(M, {
+  $change(t, e, s = this.width, i = this.height, n = this.aspectRatio, h = !1) {
+    return this.$changing || !f(t) || !f(e) || !f(s) || !f(i) || s < 0 || i < 0 ? this : (T(n) && ({ width: s, height: i } = et({ aspectRatio: n, width: s, height: i }, "cover")), this.precise || (t = Math.round(t), e = Math.round(e), s = Math.round(s), i = Math.round(i)), t === this.x && e === this.y && s === this.width && i === this.height && Object.is(n, this.aspectRatio) && !h ? this : (this.hidden && (this.hidden = !1), this.$emit(M, {
       x: t,
       y: e,
       width: s,
@@ -1244,12 +1244,12 @@ class dt extends I {
         return;
       }
       const i = document.createElement("canvas");
-      let { width: n, height: r } = this, a = 1;
-      if (nt(t) && (T(t.width) || T(t.height)) && ({ width: n, height: r } = et({
-        aspectRatio: n / r,
+      let { width: n, height: h } = this, a = 1;
+      if (nt(t) && (T(t.width) || T(t.height)) && ({ width: n, height: h } = et({
+        aspectRatio: n / h,
         width: t.width,
         height: t.height
-      }), a = n / this.width), i.width = n, i.height = r, !this.$canvas) {
+      }), a = n / this.width), i.width = n, i.height = h, !this.$canvas) {
         e(i);
         return;
       }
@@ -1259,13 +1259,13 @@ class dt extends I {
         return;
       }
       l.$ready().then((c) => {
-        const h = i.getContext("2d");
-        if (h) {
+        const r = i.getContext("2d");
+        if (r) {
           const [u, $, g, d, S, E] = l.$getTransform(), m = -this.x, C = -this.y, p = (m * d - g * C) / (u * d - g * $), b = (C * u - $ * m) / (u * d - g * $);
           let w = u * p + g * b + S, A = $ * p + d * b + E, k = c.naturalWidth, x = c.naturalHeight;
           a !== 1 && (w *= a, A *= a, k *= a, x *= a);
           const O = k / 2, N = x / 2;
-          h.fillStyle = "transparent", h.fillRect(0, 0, n, r), nt(t) && vt(t.beforeDraw) && t.beforeDraw.call(this, h, i), h.save(), h.translate(O, N), h.transform(u, $, g, d, w, A), h.translate(-O, -N), h.drawImage(c, 0, 0, k, x), h.restore();
+          r.fillStyle = "transparent", r.fillRect(0, 0, n, h), nt(t) && vt(t.beforeDraw) && t.beforeDraw.call(this, r, i), r.save(), r.translate(O, N), r.transform(u, $, g, d, w, A), r.translate(-O, -N), r.drawImage(c, 0, 0, k, x), r.restore();
         }
         e(i);
       }).catch(s);
@@ -1274,10 +1274,10 @@ class dt extends I {
 }
 dt.$name = z;
 dt.$version = "2.0.0-rc.2";
-var Re = ":host{display:flex;flex-direction:column;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([bordered]){border:1px dashed var(--theme-color)}:host([covered]){bottom:0;left:0;position:absolute;right:0;top:0}:host>span{display:flex;flex:1}:host>span+span{border-top:1px dashed var(--theme-color)}:host>span>span{flex:1}:host>span>span+span{border-left:1px dashed var(--theme-color)}";
-class ut extends I {
+var Ie = ":host{display:flex;flex-direction:column;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([bordered]){border:1px dashed var(--theme-color)}:host([covered]){bottom:0;left:0;position:absolute;right:0;top:0}:host>span{display:flex;flex:1}:host>span+span{border-top:1px dashed var(--theme-color)}:host>span>span{flex:1}:host>span>span+span{border-left:1px dashed var(--theme-color)}";
+class ut extends R {
   constructor() {
-    super(...arguments), this.$style = Re, this.bordered = !1, this.columns = 3, this.covered = !1, this.rows = 3, this.slottable = !1, this.themeColor = "rgba(238, 238, 238, 0.5)";
+    super(...arguments), this.$style = Ie, this.bordered = !1, this.columns = 3, this.covered = !1, this.rows = 3, this.slottable = !1, this.themeColor = "rgba(238, 238, 238, 0.5)";
   }
   static get observedAttributes() {
     return super.observedAttributes.concat([
@@ -1301,8 +1301,8 @@ class ut extends I {
       const i = document.createElement("span");
       i.setAttribute("role", "row");
       for (let n = 0; n < this.columns; n += 1) {
-        const r = document.createElement("span");
-        r.setAttribute("role", "gridcell"), i.appendChild(r);
+        const h = document.createElement("span");
+        h.setAttribute("role", "gridcell"), i.appendChild(h);
       }
       e.appendChild(i);
     }
@@ -1311,10 +1311,10 @@ class ut extends I {
 }
 ut.$name = ae;
 ut.$version = "2.0.0-rc.2";
-var Ie = ':host{display:inline-block;height:1em;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em}:host:after,:host:before{background-color:var(--theme-color);content:"";display:block;position:absolute}:host:before{height:1px;left:0;top:50%;transform:translateY(-50%);width:100%}:host:after{height:100%;left:50%;top:0;transform:translateX(-50%);width:1px}:host([centered]){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}';
-class ft extends I {
+var Re = ':host{display:inline-block;height:1em;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em}:host:after,:host:before{background-color:var(--theme-color);content:"";display:block;position:absolute}:host:before{height:1px;left:0;top:50%;transform:translateY(-50%);width:100%}:host:after{height:100%;left:50%;top:0;transform:translateX(-50%);width:1px}:host([centered]){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}';
+class ft extends R {
   constructor() {
-    super(...arguments), this.$style = Ie, this.centered = !1, this.slottable = !1, this.themeColor = "rgba(238, 238, 238, 0.5)";
+    super(...arguments), this.$style = Re, this.centered = !1, this.slottable = !1, this.themeColor = "rgba(238, 238, 238, 0.5)";
   }
   static get observedAttributes() {
     return super.observedAttributes.concat([
@@ -1325,8 +1325,8 @@ class ft extends I {
 ft.$name = ne;
 ft.$version = "2.0.0-rc.2";
 var Pe = ":host{display:block;height:100%;overflow:hidden;position:relative;width:100%}";
-const Ut = /* @__PURE__ */ new WeakMap(), jt = /* @__PURE__ */ new WeakMap(), Zt = /* @__PURE__ */ new WeakMap(), Kt = /* @__PURE__ */ new WeakMap(), ze = "both", Me = "horizontal", Gt = "vertical", De = "none";
-class $t extends I {
+const Ut = /* @__PURE__ */ new WeakMap(), jt = /* @__PURE__ */ new WeakMap(), Zt = /* @__PURE__ */ new WeakMap(), Kt = /* @__PURE__ */ new WeakMap(), ze = "both", Me = "horizontal", Gt = "vertical", _e = "none";
+class $t extends R {
   constructor() {
     super(...arguments), this.$onSelectionChange = null, this.$onSourceImageLoad = null, this.$onSourceImageTransform = null, this.$scale = 1, this.$style = Pe, this.resize = Gt, this.selection = "", this.slottable = !1;
   }
@@ -1400,8 +1400,8 @@ class $t extends I {
       width: s.offsetWidth,
       height: s.offsetHeight
     });
-    const { x: n, y: r, width: a, height: l } = t, c = {}, { clientWidth: h, clientHeight: u } = this;
-    let $ = h, g = u, d = NaN;
+    const { x: n, y: h, width: a, height: l } = t, c = {}, { clientWidth: r, clientHeight: u } = this;
+    let $ = r, g = u, d = NaN;
     switch (this.resize) {
       case ze:
         d = 1, $ = a, g = l, c.width = a, c.height = l;
@@ -1410,24 +1410,24 @@ class $t extends I {
         d = l > 0 ? u / l : 0, $ = a * d, c.width = $;
         break;
       case Gt:
-        d = a > 0 ? h / a : 0, g = l * d, c.height = g;
+        d = a > 0 ? r / a : 0, g = l * d, c.height = g;
         break;
-      case De:
+      case _e:
       default:
-        h > 0 ? d = a > 0 ? h / a : 0 : u > 0 && (d = l > 0 ? u / l : 0);
+        r > 0 ? d = a > 0 ? r / a : 0 : u > 0 && (d = l > 0 ? u / l : 0);
     }
-    this.$scale = d, this.$setStyles(c), this.$sourceImage && this.$transformImageByOffset(e ?? this.$sourceImage.$getTransform(), -n, -r);
+    this.$scale = d, this.$setStyles(c), this.$sourceImage && this.$transformImageByOffset(e ?? this.$sourceImage.$getTransform(), -n, -h);
   }
   $transformImageByOffset(t, e, s) {
-    const { $image: i, $scale: n, $sourceImage: r } = this;
-    if (r && i && n >= 0) {
-      const [a, l, c, h, u, $] = t, g = (e * h - c * s) / (a * h - c * l), d = (s * a - l * e) / (a * h - c * l), S = a * g + c * d + u, E = l * g + h * d + $;
+    const { $image: i, $scale: n, $sourceImage: h } = this;
+    if (h && i && n >= 0) {
+      const [a, l, c, r, u, $] = t, g = (e * r - c * s) / (a * r - c * l), d = (s * a - l * e) / (a * r - c * l), S = a * g + c * d + u, E = l * g + r * d + $;
       i.$ready((m) => {
         this.$setStyles.call(i, {
           width: m.naturalWidth * n,
           height: m.naturalHeight * n
         });
-      }), i.$setTransform(a, l, c, h, S * n, E * n);
+      }), i.$setTransform(a, l, c, r, S * n, E * n);
     }
   }
 }
@@ -1442,39 +1442,28 @@ ht.$define();
 dt.$define();
 ct.$define();
 $t.$define();
-const _e = /* @__PURE__ */ D({
+const De = /* @__PURE__ */ _({
   __name: "CropperCanvas",
   props: {
-    background: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    scaleStep: { default: 0.1 },
-    themeColor: { default: "#39f" }
+    background: { type: Boolean, default: !1 }
   },
-  setup(o, { expose: t }) {
-    var r, a;
-    const e = ie("canvasRef");
+  setup(o) {
     rt.$define();
-    const s = _("cropper-canvas", {
+    const t = D("cropper-canvas", {
       background: o.background,
-      disabled: o.disabled,
-      scaleStep: o.scaleStep,
-      themeColor: o.themeColor,
+      // disabled,
+      // scaleStep,
+      // themeColor,
       style: "height: 500px"
-    }), i = (r = e.value) == null ? void 0 : r.$setAction, n = (a = e.value) == null ? void 0 : a.$toCanvas;
-    return t({
-      $setAction: i,
-      $toCanvas: n
-    }), (l, c) => (W(), X(H(Y(s)), {
-      ref_key: "canvasRef",
-      ref: e
-    }, {
+    });
+    return (e, s) => (W(), X(H(Y(t)), null, {
       default: Ft(() => [
-        qt(l.$slots, "default")
+        qt(e.$slots, "default")
       ]),
       _: 3
-    }, 512));
+    }));
   }
-}), We = /* @__PURE__ */ D({
+}), We = /* @__PURE__ */ _({
   __name: "CropperImage",
   props: {
     src: {},
@@ -1488,7 +1477,7 @@ const _e = /* @__PURE__ */ D({
   },
   setup(o) {
     ht.$define();
-    const t = _("cropper-image", {
+    const t = D("cropper-image", {
       src: o.src,
       alt: o.alt,
       initialCenterSize: o.initialCenterSize,
@@ -1500,7 +1489,7 @@ const _e = /* @__PURE__ */ D({
     });
     return (e, s) => (W(), X(H(Y(t))));
   }
-}), Xe = /* @__PURE__ */ D({
+}), Xe = /* @__PURE__ */ _({
   __name: "CropperShade",
   props: {
     x: { default: 0 },
@@ -1513,7 +1502,7 @@ const _e = /* @__PURE__ */ D({
   },
   setup(o) {
     ct.$define();
-    const t = _("cropper-shade", {
+    const t = D("cropper-shade", {
       x: o.x,
       y: o.y,
       width: o.width,
@@ -1524,7 +1513,7 @@ const _e = /* @__PURE__ */ D({
     });
     return (e, s) => (W(), X(H(Y(t))));
   }
-}), He = /* @__PURE__ */ D({
+}), He = /* @__PURE__ */ _({
   __name: "CropperHandle",
   props: {
     action: { default: "none" },
@@ -1534,10 +1523,10 @@ const _e = /* @__PURE__ */ D({
   },
   setup(o) {
     lt.$define();
-    const t = _("cropper-handle", { action: o.action, plain: o.plain, slottable: o.slottable, themeColor: o.themeColor });
+    const t = D("cropper-handle", { action: o.action, plain: o.plain, slottable: o.slottable, themeColor: o.themeColor });
     return (e, s) => (W(), X(H(Y(t))));
   }
-}), Ye = /* @__PURE__ */ D({
+}), Ye = /* @__PURE__ */ _({
   __name: "CropperSelection",
   props: {
     x: { default: 0 },
@@ -1556,9 +1545,9 @@ const _e = /* @__PURE__ */ D({
     outlined: { type: Boolean, default: !1 },
     precise: { type: Boolean, default: !1 }
   },
-  setup(o) {
+  setup(o, { expose: t }) {
     dt.$define();
-    const t = _("cropper-selection", {
+    const e = D("cropper-selection", {
       x: o.x,
       y: o.y,
       width: o.width,
@@ -1575,25 +1564,25 @@ const _e = /* @__PURE__ */ D({
       outlined: o.outlined,
       precise: o.precise
       //
-    });
-    return (e, s) => (W(), X(H(Y(t)), null, {
+    }), s = ie("sel");
+    return t({ selection: s }), (i, n) => (W(), X(H(Y(e)), { ref: "sel" }, {
       default: Ft(() => [
-        qt(e.$slots, "default")
+        qt(i.$slots, "default")
       ]),
       _: 3
-    }));
+    }, 512));
   }
-}), Be = /* @__PURE__ */ D({
+}), Be = /* @__PURE__ */ _({
   __name: "CropperCrosshair",
   props: {
     centered: { type: Boolean, default: !1 }
   },
   setup(o) {
     ft.$define();
-    const t = _("cropper-crosshair", { centered: o.centered });
+    const t = D("cropper-crosshair", { centered: o.centered });
     return (e, s) => (W(), X(H(Y(t))));
   }
-}), Le = /* @__PURE__ */ D({
+}), Le = /* @__PURE__ */ _({
   __name: "CropperGrid",
   props: {
     role: { default: "grid" },
@@ -1601,10 +1590,10 @@ const _e = /* @__PURE__ */ D({
   },
   setup(o) {
     ut.$define();
-    const t = _("cropper-grid", { role: o.role, covered: o.covered });
+    const t = D("cropper-grid", { role: o.role, covered: o.covered });
     return (e, s) => (W(), X(H(Y(t))));
   }
-}), Ue = /* @__PURE__ */ D({
+}), Ue = /* @__PURE__ */ _({
   __name: "CropperViewer",
   props: {
     resize: { default: "vertical" },
@@ -1612,16 +1601,16 @@ const _e = /* @__PURE__ */ D({
   },
   setup(o) {
     $t.$define();
-    const t = _("cropper-viewer", { resize: o.resize, selection: o.selection });
+    const t = D("cropper-viewer", { resize: o.resize, selection: o.selection });
     return (e, s) => (W(), X(H(Y(t))));
   }
 }), Ze = {
   install: (o) => {
-    o.component("CropperCanvas", _e), o.component("CropperImage", We), o.component("CropperShade", Xe), o.component("CropperHandle", He), o.component("CropperSelection", Ye), o.component("CropperCrosshair", Be), o.component("CropperGrid", Le), o.component("CropperViewer", Ue);
+    o.component("CropperCanvas", De), o.component("CropperImage", We), o.component("CropperShade", Xe), o.component("CropperHandle", He), o.component("CropperSelection", Ye), o.component("CropperCrosshair", Be), o.component("CropperGrid", Le), o.component("CropperViewer", Ue);
   }
 };
 export {
-  _e as CropperCanvas,
+  De as CropperCanvas,
   Be as CropperCrosshair,
   Le as CropperGrid,
   He as CropperHandle,

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(T,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],d):(T=typeof globalThis<"u"?globalThis:T||self,d(T["vue-cropperjs2"]={},T.Vue))})(this,function(T,d){"use strict";const F=typeof window<"u"&&typeof window.document<"u",R=F?window:{},dt=F?"ontouchstart"in R.document.documentElement:!1,ft=F?"PointerEvent"in R:!1,z="cropper",j=`${z}-canvas`,ae=`${z}-crosshair`,oe=`${z}-grid`,re=`${z}-handle`,q=`${z}-image`,D=`${z}-selection`,ce=`${z}-shade`,he=`${z}-viewer`,V="select",gt="move",H="scale",ut="rotate",J="transform",_="none",bt="n-resize",Ct="e-resize",vt="s-resize",yt="w-resize",U="ne-resize",Z="nw-resize",K="se-resize",G="sw-resize",le="action",de=dt?"touchend touchcancel":"mouseup",fe=dt?"touchmove":"mousemove",Et=ft?"pointerdown":dt?"touchstart":"mousedown",wt=ft?"pointermove":fe,St=ft?"pointerup pointercancel":de,At="error",kt="keydown",Y="load",Tt="wheel",L="action",W="actionend",ue="actionmove",X="actionstart",B="change",$t="transform";function $e(o){return typeof o=="string"}const xt=Number.isNaN||R.isNaN;function $(o){return typeof o=="number"&&!xt(o)}function x(o){return $(o)&&o>0&&o<1/0}function me(o){return typeof o>"u"}function Ot(o){return typeof o=="object"&&o!==null}const{hasOwnProperty:pe}=Object.prototype;function Q(o){if(!Ot(o))return!1;try{const{constructor:t}=o,{prototype:e}=t;return t&&e&&pe.call(e,"isPrototypeOf")}catch{return!1}}function mt(o){return typeof o=="function"}function Nt(o){return typeof o=="object"&&o!==null&&o.nodeType===1}const ge=/([a-z\d])([A-Z])/g;function Rt(o){return String(o).replace(ge,"$1-$2").toLowerCase()}const be=/-[A-z\d]/g;function It(o){return o.replace(be,t=>t.slice(1).toUpperCase())}const Pt=/\s\s*/;function y(o,t,e,i){t.trim().split(Pt).forEach(s=>{o.removeEventListener(s,e,i)})}function E(o,t,e,i){t.trim().split(Pt).forEach(s=>{o.addEventListener(s,e,i)})}function Mt(o,t,e,i){E(o,t,e,Object.assign(Object.assign({},i),{once:!0}))}const Ce={bubbles:!0,cancelable:!0,composed:!0};function ve(o,t,e,i){return o.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign(Object.assign({},Ce),{detail:e}),i)))}const zt=Promise.resolve();function ye(o,t){return t?zt.then(o?t.bind(o):t):zt}function Dt(o){const{documentElement:t}=o.ownerDocument,e=o.getBoundingClientRect();return{left:e.left+(R.pageXOffset-t.clientLeft),top:e.top+(R.pageYOffset-t.clientTop)}}const Ee=/deg|g?rad|turn$/i;function pt(o){const t=parseFloat(o)||0;if(t!==0){const[e="rad"]=String(o).match(Ee)||[];switch(e.toLowerCase()){case"deg":return t/360*(Math.PI*2);case"grad":return t/400*(Math.PI*2);case"turn":return t*(Math.PI*2)}}return t}const _t="contain",we="cover";function tt(o,t=_t){const{aspectRatio:e}=o;let{width:i,height:s}=o;const n=x(i),r=x(s);if(n&&r){const a=s*e;t===_t&&a>i||t===we&&a<i?s=i/e:i=s*e}else n?s=i/e:r&&(i=s*e);return{width:i,height:s}}function Bt(o,...t){if(t.length===0)return o;const[e,i,s,n,r,a]=o,[l,h,c,u,m,p]=t[0];return o=[e*l+s*h,i*l+n*h,e*c+s*u,i*c+n*u,e*m+s*p+r,i*m+n*p+a],Bt(o,...t.slice(1))}var Se=":host([hidden]){display:none!important}";const Ae=/left|top|width|height/i,Wt="open",et=new WeakMap,it=new WeakMap,Xt=new Map,Ht=R.document&&Array.isArray(R.document.adoptedStyleSheets)&&"replaceSync"in R.CSSStyleSheet.prototype;class M extends HTMLElement{get $sharedStyle(){return`${this.themeColor?`:host{--theme-color: ${this.themeColor};}`:""}${Se}`}constructor(){var t,e;super(),this.shadowRootMode=Wt,this.slottable=!0;const i=(e=(t=Object.getPrototypeOf(this))===null||t===void 0?void 0:t.constructor)===null||e===void 0?void 0:e.$name;i&&Xt.set(i,this.tagName.toLowerCase())}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(t,e,i){if(Object.is(i,e))return;const s=It(t),n=this[s];let r=i;switch(typeof n){case"boolean":r=i!==null&&i!=="false";break;case"number":r=Number(i);break}switch(this[s]=r,t){case"theme-color":{const a=it.get(this),l=this.$sharedStyle;a&&l&&(Ht?a.replaceSync(l):a.textContent=l);break}}}$propertyChangedCallback(t,e,i){if(!Object.is(i,e))switch(t=Rt(t),typeof i){case"boolean":i===!0?this.hasAttribute(t)||this.setAttribute(t,""):this.removeAttribute(t);break;case"number":xt(i)?i="":i=String(i);default:i?this.getAttribute(t)!==i&&this.setAttribute(t,i):this.removeAttribute(t)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach(e=>{const i=It(e);let s=this[i];me(s)||this.$propertyChangedCallback(i,void 0,s),Object.defineProperty(this,i,{enumerable:!0,configurable:!0,get(){return s},set(n){const r=s;s=n,this.$propertyChangedCallback(i,r,n)}})});const t=this.attachShadow({mode:this.shadowRootMode||Wt});if(this.shadowRoot||et.set(this,t),it.set(this,this.$addStyles(this.$sharedStyle)),this.$style&&this.$addStyles(this.$style),this.$template){const e=document.createElement("template");e.innerHTML=this.$template,t.appendChild(e.content)}if(this.slottable){const e=document.createElement("slot");t.appendChild(e)}}disconnectedCallback(){it.has(this)&&it.delete(this),et.has(this)&&et.delete(this)}$getTagNameOf(t){var e;return(e=Xt.get(t))!==null&&e!==void 0?e:t}$setStyles(t){return Object.keys(t).forEach(e=>{let i=t[e];$(i)&&(i!==0&&Ae.test(e)?i=`${i}px`:i=String(i)),this.style[e]=i}),this}$getShadowRoot(){return this.shadowRoot||et.get(this)}$addStyles(t){let e;const i=this.$getShadowRoot();return Ht?(e=new CSSStyleSheet,e.replaceSync(t),i.adoptedStyleSheets=i.adoptedStyleSheets.concat(e)):(e=document.createElement("style"),e.textContent=t,i.appendChild(e)),e}$emit(t,e,i){return ve(this,t,e,i)}$nextTick(t){return ye(this,t)}static $define(t,e){Ot(t)&&(e=t,t=""),t||(t=this.$name||this.name),t=Rt(t),F&&R.customElements&&!R.customElements.get(t)&&customElements.define(t,this,e)}}M.$version="2.0.0-rc.2";var ke=':host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([background]){background-color:#fff;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-image:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%);background-position:0 0,.5rem .5rem;background-size:1rem 1rem}:host([disabled]){pointer-events:none}:host([disabled]):after{bottom:0;content:"";cursor:not-allowed;display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}';class st extends M{constructor(){super(...arguments),this.$onPointerDown=null,this.$onPointerMove=null,this.$onPointerUp=null,this.$onWheel=null,this.$wheeling=!1,this.$pointers=new Map,this.$style=ke,this.$action=_,this.background=!1,this.disabled=!1,this.scaleStep=.1,this.themeColor="#39f"}static get observedAttributes(){return super.observedAttributes.concat(["background","disabled","scale-step"])}connectedCallback(){super.connectedCallback(),this.disabled||this.$bind()}disconnectedCallback(){this.disabled||this.$unbind(),super.disconnectedCallback()}$propertyChangedCallback(t,e,i){if(!Object.is(i,e))switch(super.$propertyChangedCallback(t,e,i),t){case"disabled":i?this.$unbind():this.$bind();break}}$bind(){this.$onPointerDown||(this.$onPointerDown=this.$handlePointerDown.bind(this),E(this,Et,this.$onPointerDown)),this.$onPointerMove||(this.$onPointerMove=this.$handlePointerMove.bind(this),E(this.ownerDocument,wt,this.$onPointerMove)),this.$onPointerUp||(this.$onPointerUp=this.$handlePointerUp.bind(this),E(this.ownerDocument,St,this.$onPointerUp)),this.$onWheel||(this.$onWheel=this.$handleWheel.bind(this),E(this,Tt,this.$onWheel,{passive:!1,capture:!0}))}$unbind(){this.$onPointerDown&&(y(this,Et,this.$onPointerDown),this.$onPointerDown=null),this.$onPointerMove&&(y(this.ownerDocument,wt,this.$onPointerMove),this.$onPointerMove=null),this.$onPointerUp&&(y(this.ownerDocument,St,this.$onPointerUp),this.$onPointerUp=null),this.$onWheel&&(y(this,Tt,this.$onWheel,{capture:!0}),this.$onWheel=null)}$handlePointerDown(t){const{buttons:e,button:i,type:s}=t;if(this.disabled||(s==="pointerdown"&&t.pointerType==="mouse"||s==="mousedown")&&($(e)&&e!==1||$(i)&&i!==0||t.ctrlKey))return;const{$pointers:n}=this;let r="";if(t.changedTouches)Array.from(t.changedTouches).forEach(({identifier:a,pageX:l,pageY:h})=>{n.set(a,{startX:l,startY:h,endX:l,endY:h})});else{const{pointerId:a=0,pageX:l,pageY:h}=t;n.set(a,{startX:l,startY:h,endX:l,endY:h})}n.size>1?r=J:Nt(t.target)&&(r=t.target.action||t.target.getAttribute(le)||""),this.$emit(X,{action:r,relatedEvent:t})!==!1&&(t.preventDefault(),this.$action=r,this.style.willChange="transform")}$handlePointerMove(t){const{$action:e,$pointers:i}=this;if(this.disabled||e===_||i.size===0||this.$emit(ue,{action:e,relatedEvent:t})===!1)return;if(t.preventDefault(),t.changedTouches)Array.from(t.changedTouches).forEach(({identifier:n,pageX:r,pageY:a})=>{const l=i.get(n);l&&Object.assign(l,{endX:r,endY:a})});else{const{pointerId:n=0,pageX:r,pageY:a}=t,l=i.get(n);l&&Object.assign(l,{endX:r,endY:a})}const s={action:e,relatedEvent:t};if(e===J){const n=new Map(i);let r=0,a=0,l=0,h=0,c=t.pageX,u=t.pageY;i.forEach((f,A)=>{n.delete(A),n.forEach(w=>{let g=w.startX-f.startX,v=w.startY-f.startY,b=w.endX-f.endX,C=w.endY-f.endY,S=0,k=0,O=0,N=0;if(g===0?v<0?O=Math.PI*2:v>0&&(O=Math.PI):g>0?O=Math.PI/2+Math.atan(v/g):g<0&&(O=Math.PI*1.5+Math.atan(v/g)),b===0?C<0?N=Math.PI*2:C>0&&(N=Math.PI):b>0?N=Math.PI/2+Math.atan(C/b):b<0&&(N=Math.PI*1.5+Math.atan(C/b)),N>0||O>0){const I=N-O,P=Math.abs(I);P>r&&(r=P,l=I,c=(f.startX+w.startX)/2,u=(f.startY+w.startY)/2)}if(g=Math.abs(g),v=Math.abs(v),b=Math.abs(b),C=Math.abs(C),g>0&&v>0?S=Math.sqrt(g*g+v*v):g>0?S=g:v>0&&(S=v),b>0&&C>0?k=Math.sqrt(b*b+C*C):b>0?k=b:C>0&&(k=C),S>0&&k>0){const I=(k-S)/S,P=Math.abs(I);P>a&&(a=P,h=I,c=(f.startX+w.startX)/2,u=(f.startY+w.startY)/2)}})});const m=r>0,p=a>0;m&&p?(s.rotate=l,s.scale=h,s.centerX=c,s.centerY=u):m?(s.action=ut,s.rotate=l,s.centerX=c,s.centerY=u):p?(s.action=H,s.scale=h,s.centerX=c,s.centerY=u):s.action=_}else{const[n]=Array.from(i.values());Object.assign(s,n)}i.forEach(n=>{n.startX=n.endX,n.startY=n.endY}),s.action!==_&&this.$emit(L,s,{cancelable:!1})}$handlePointerUp(t){const{$action:e,$pointers:i}=this;if(!(this.disabled||e===_)&&this.$emit(W,{action:e,relatedEvent:t})!==!1){if(t.preventDefault(),t.changedTouches)Array.from(t.changedTouches).forEach(({identifier:s})=>{i.delete(s)});else{const{pointerId:s=0}=t;i.delete(s)}i.size===0&&(this.style.willChange="",this.$action=_)}}$handleWheel(t){if(this.disabled||(t.preventDefault(),this.$wheeling))return;this.$wheeling=!0,setTimeout(()=>{this.$wheeling=!1},50);const i=(t.deltaY>0?-1:1)*this.scaleStep;this.$emit(L,{action:H,scale:i,relatedEvent:t},{cancelable:!1})}$setAction(t){return $e(t)&&(this.$action=t),this}$toCanvas(t){return new Promise((e,i)=>{if(!this.isConnected){i(new Error("The current element is not connected to the DOM."));return}const s=document.createElement("canvas");let n=this.offsetWidth,r=this.offsetHeight,a=1;Q(t)&&(x(t.width)||x(t.height))&&({width:n,height:r}=tt({aspectRatio:n/r,width:t.width,height:t.height}),a=n/this.offsetWidth),s.width=n,s.height=r;const l=this.querySelector(this.$getTagNameOf(q));if(!l){e(s);return}l.$ready().then(h=>{const c=s.getContext("2d");if(c){const[u,m,p,f,A,w]=l.$getTransform();let g=A,v=w,b=h.naturalWidth,C=h.naturalHeight;a!==1&&(g*=a,v*=a,b*=a,C*=a);const S=b/2,k=C/2;c.fillStyle="transparent",c.fillRect(0,0,n,r),Q(t)&&mt(t.beforeDraw)&&t.beforeDraw.call(this,c,s),c.save(),c.translate(S,k),c.transform(u,m,p,f,g,v),c.translate(-S,-k),c.drawImage(h,0,0,b,C),c.restore()}e(s)}).catch(i)})}}st.$name=j,st.$version="2.0.0-rc.2";var Te=":host{display:inline-block}img{display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}";const Yt=new WeakMap,Lt=["alt","crossorigin","decoding","importance","loading","referrerpolicy","sizes","src","srcset"];class nt extends M{constructor(){super(...arguments),this.$matrix=[1,0,0,1,0,0],this.$onLoad=null,this.$onCanvasAction=null,this.$onCanvasActionEnd=null,this.$onCanvasActionStart=null,this.$actionStartTarget=null,this.$style=Te,this.$image=new Image,this.initialCenterSize="contain",this.rotatable=!1,this.scalable=!1,this.skewable=!1,this.slottable=!1,this.translatable=!1}set $canvas(t){Yt.set(this,t)}get $canvas(){return Yt.get(this)}static get observedAttributes(){return super.observedAttributes.concat(Lt,["initial-center-size","rotatable","scalable","skewable","translatable"])}attributeChangedCallback(t,e,i){Object.is(i,e)||(super.attributeChangedCallback(t,e,i),Lt.includes(t)&&this.$image.setAttribute(t,i))}$propertyChangedCallback(t,e,i){if(!Object.is(i,e))switch(super.$propertyChangedCallback(t,e,i),t){case"initialCenterSize":this.$nextTick(()=>{this.$center(i)});break}}connectedCallback(){super.connectedCallback();const{$image:t}=this,e=this.closest(this.$getTagNameOf(j));e&&(this.$canvas=e,this.$setStyles({display:"block",position:"absolute"}),this.$onCanvasActionStart=i=>{var s,n;this.$actionStartTarget=(n=(s=i.detail)===null||s===void 0?void 0:s.relatedEvent)===null||n===void 0?void 0:n.target},this.$onCanvasActionEnd=()=>{this.$actionStartTarget=null},this.$onCanvasAction=this.$handleAction.bind(this),E(e,X,this.$onCanvasActionStart),E(e,W,this.$onCanvasActionEnd),E(e,L,this.$onCanvasAction)),this.$onLoad=this.$handleLoad.bind(this),E(t,Y,this.$onLoad),this.$getShadowRoot().appendChild(t)}disconnectedCallback(){const{$image:t,$canvas:e}=this;e&&(this.$onCanvasActionStart&&(y(e,X,this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(y(e,W,this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onCanvasAction&&(y(e,L,this.$onCanvasAction),this.$onCanvasAction=null)),t&&this.$onLoad&&(y(t,Y,this.$onLoad),this.$onLoad=null),this.$getShadowRoot().removeChild(t),super.disconnectedCallback()}$handleLoad(){const{$image:t}=this;this.$setStyles({width:t.naturalWidth,height:t.naturalHeight}),this.$canvas&&this.$center(this.initialCenterSize)}$handleAction(t){if(this.hidden||!(this.rotatable||this.scalable||this.translatable))return;const{$canvas:e}=this,{detail:i}=t;if(i){const{relatedEvent:s}=i;let{action:n}=i;switch(n===J&&(!this.rotatable||!this.scalable)&&(this.rotatable?n=ut:this.scalable?n=H:n=_),n){case gt:if(this.translatable){let r=null;s&&(r=s.target.closest(this.$getTagNameOf(D))),r||(r=e.querySelector(this.$getTagNameOf(D))),r&&r.multiple&&!r.active&&(r=e.querySelector(`${this.$getTagNameOf(D)}[active]`)),(!r||r.hidden||!r.movable||r.dynamic||!(this.$actionStartTarget&&r.contains(this.$actionStartTarget)))&&this.$move(i.endX-i.startX,i.endY-i.startY)}break;case ut:if(this.rotatable)if(s){const{x:r,y:a}=this.getBoundingClientRect();this.$rotate(i.rotate,s.clientX-r,s.clientY-a)}else this.$rotate(i.rotate);break;case H:if(this.scalable)if(s){const r=s.target.closest(this.$getTagNameOf(D));if(!r||!r.zoomable||r.zoomable&&r.dynamic){const{x:a,y:l}=this.getBoundingClientRect();this.$zoom(i.scale,s.clientX-a,s.clientY-l)}}else this.$zoom(i.scale);break;case J:if(this.rotatable&&this.scalable){const{rotate:r}=i;let{scale:a}=i;a<0?a=1/(1-a):a+=1;const l=Math.cos(r),h=Math.sin(r),[c,u,m,p]=[l*a,h*a,-h*a,l*a];if(s){const f=this.getBoundingClientRect(),A=s.clientX-f.x,w=s.clientY-f.y,[g,v,b,C]=this.$matrix,S=f.width/2,k=f.height/2,O=A-S,N=w-k,I=(O*C-b*N)/(g*C-b*v),P=(N*g-v*O)/(g*C-b*v);this.$transform(c,u,m,p,I*(1-c)+P*m,P*(1-p)+I*u)}else this.$transform(c,u,m,p,0,0)}break}}}$ready(t){const{$image:e}=this,i=new Promise((s,n)=>{const r=new Error("Failed to load the image source");if(e.complete)e.naturalWidth>0&&e.naturalHeight>0?s(e):n(r);else{const a=()=>{y(e,At,l),s(e)},l=()=>{y(e,Y,a),n(r)};Mt(e,Y,a),Mt(e,At,l)}});return mt(t)&&i.then(s=>(t(s),s)),i}$center(t){const{parentElement:e}=this;if(!e)return this;const i=e.getBoundingClientRect(),s=i.width,n=i.height,{x:r,y:a,width:l,height:h}=this.getBoundingClientRect(),c=r+l/2,u=a+h/2,m=i.x+s/2,p=i.y+n/2;if(this.$move(m-c,p-u),t&&(l!==s||h!==n)){const f=s/l,A=n/h;switch(t){case"cover":this.$scale(Math.max(f,A));break;case"contain":this.$scale(Math.min(f,A));break}}return this}$move(t,e=t){if(this.translatable&&$(t)&&$(e)){const[i,s,n,r]=this.$matrix,a=(t*r-n*e)/(i*r-n*s),l=(e*i-s*t)/(i*r-n*s);this.$translate(a,l)}return this}$moveTo(t,e=t){if(this.translatable&&$(t)&&$(e)){const[i,s,n,r]=this.$matrix,a=(t*r-n*e)/(i*r-n*s),l=(e*i-s*t)/(i*r-n*s);this.$setTransform(i,s,n,r,a,l)}return this}$rotate(t,e,i){if(this.rotatable){const s=pt(t),n=Math.cos(s),r=Math.sin(s),[a,l,h,c]=[n,r,-r,n];if($(e)&&$(i)){const[u,m,p,f]=this.$matrix,{width:A,height:w}=this.getBoundingClientRect(),g=A/2,v=w/2,b=e-g,C=i-v,S=(b*f-p*C)/(u*f-p*m),k=(C*u-m*b)/(u*f-p*m);this.$transform(a,l,h,c,S*(1-a)-k*h,k*(1-c)-S*l)}else this.$transform(a,l,h,c,0,0)}return this}$zoom(t,e,i){if(!this.scalable||t===0)return this;if(t<0?t=1/(1-t):t+=1,$(e)&&$(i)){const[s,n,r,a]=this.$matrix,{width:l,height:h}=this.getBoundingClientRect(),c=l/2,u=h/2,m=e-c,p=i-u,f=(m*a-r*p)/(s*a-r*n),A=(p*s-n*m)/(s*a-r*n);this.$transform(t,0,0,t,f*(1-t),A*(1-t))}else this.$scale(t);return this}$scale(t,e=t){return this.scalable&&this.$transform(t,0,0,e,0,0),this}$skew(t,e=0){if(this.skewable){const i=pt(t),s=pt(e);this.$transform(1,Math.tan(s),Math.tan(i),1,0,0)}return this}$translate(t,e=t){return this.translatable&&$(t)&&$(e)&&this.$transform(1,0,0,1,t,e),this}$transform(t,e,i,s,n,r){return $(t)&&$(e)&&$(i)&&$(s)&&$(n)&&$(r)?this.$setTransform(Bt(this.$matrix,[t,e,i,s,n,r])):this}$setTransform(t,e,i,s,n,r){if((this.rotatable||this.scalable||this.skewable||this.translatable)&&(Array.isArray(t)&&([t,e,i,s,n,r]=t),$(t)&&$(e)&&$(i)&&$(s)&&$(n)&&$(r))){const a=[...this.$matrix],l=[t,e,i,s,n,r];if(this.$emit($t,{matrix:l,oldMatrix:a})===!1)return this;this.$matrix=l,this.style.transform=`matrix(${l.join(", ")})`}return this}$getTransform(){return this.$matrix.slice()}$resetTransform(){return this.$setTransform([1,0,0,1,0,0])}}nt.$name=q,nt.$version="2.0.0-rc.2";var xe=":host{display:block;height:0;left:0;outline:var(--theme-color) solid 1px;position:relative;top:0;width:0}:host([transparent]){outline-color:transparent}";const jt=new WeakMap;class at extends M{constructor(){super(...arguments),this.$onCanvasChange=null,this.$onCanvasActionEnd=null,this.$onCanvasActionStart=null,this.$style=xe,this.x=0,this.y=0,this.width=0,this.height=0,this.slottable=!1,this.themeColor="rgba(0, 0, 0, 0.65)"}set $canvas(t){jt.set(this,t)}get $canvas(){return jt.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["height","width","x","y"])}connectedCallback(){super.connectedCallback();const t=this.closest(this.$getTagNameOf(j));if(t){this.$canvas=t,this.style.position="absolute";const e=t.querySelector(this.$getTagNameOf(D));e&&(this.$onCanvasActionStart=i=>{e.hidden&&i.detail.action===V&&(this.hidden=!1)},this.$onCanvasActionEnd=i=>{e.hidden&&i.detail.action===V&&(this.hidden=!0)},this.$onCanvasChange=i=>{const{x:s,y:n,width:r,height:a}=i.detail;this.$change(s,n,r,a),(e.hidden||s===0&&n===0&&r===0&&a===0)&&(this.hidden=!0)},E(t,X,this.$onCanvasActionStart),E(t,W,this.$onCanvasActionEnd),E(t,B,this.$onCanvasChange))}this.$render()}disconnectedCallback(){const{$canvas:t}=this;t&&(this.$onCanvasActionStart&&(y(t,X,this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(y(t,W,this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onCanvasChange&&(y(t,B,this.$onCanvasChange),this.$onCanvasChange=null)),super.disconnectedCallback()}$change(t,e,i=this.width,s=this.height){return!$(t)||!$(e)||!$(i)||!$(s)||t===this.x&&e===this.y&&i===this.width&&s===this.height?this:(this.hidden&&(this.hidden=!1),this.x=t,this.y=e,this.width=i,this.height=s,this.$render())}$reset(){return this.$change(0,0,0,0)}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height,outlineWidth:R.innerWidth})}}at.$name=ce,at.$version="2.0.0-rc.2";var Oe=':host{background-color:var(--theme-color);display:block}:host([action=move]),:host([action=select]){height:100%;left:0;position:absolute;top:0;width:100%}:host([action=move]){cursor:move}:host([action=select]){cursor:crosshair}:host([action$=-resize]){background-color:transparent;height:15px;position:absolute;width:15px}:host([action$=-resize]):after{background-color:var(--theme-color);content:"";display:block;height:5px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px}:host([action=n-resize]),:host([action=s-resize]){cursor:ns-resize;left:50%;transform:translateX(-50%);width:100%}:host([action=n-resize]){top:-8px}:host([action=s-resize]){bottom:-8px}:host([action=e-resize]),:host([action=w-resize]){cursor:ew-resize;height:100%;top:50%;transform:translateY(-50%)}:host([action=e-resize]){right:-8px}:host([action=w-resize]){left:-8px}:host([action=ne-resize]){cursor:nesw-resize;right:-8px;top:-8px}:host([action=nw-resize]){cursor:nwse-resize;left:-8px;top:-8px}:host([action=se-resize]){bottom:-8px;cursor:nwse-resize;right:-8px}:host([action=se-resize]):after{height:15px;width:15px}@media (pointer:coarse){:host([action=se-resize]):after{height:10px;width:10px}}@media (pointer:fine){:host([action=se-resize]):after{height:5px;width:5px}}:host([action=sw-resize]){bottom:-8px;cursor:nesw-resize;left:-8px}:host([plain]){background-color:transparent}';class ot extends M{constructor(){super(...arguments),this.$onCanvasCropEnd=null,this.$onCanvasCropStart=null,this.$style=Oe,this.action=_,this.plain=!1,this.slottable=!1,this.themeColor="rgba(51, 153, 255, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["action","plain"])}}ot.$name=re,ot.$version="2.0.0-rc.2";var Ne=':host{display:block;left:0;position:relative;right:0}:host([outlined]){outline:1px solid var(--theme-color)}:host([multiple]){outline:1px dashed hsla(0,0%,100%,.5)}:host([multiple]):after{bottom:0;content:"";cursor:pointer;display:block;left:0;position:absolute;right:0;top:0}:host([multiple][active]){outline-color:var(--theme-color);z-index:1}:host([multiple])>*{visibility:hidden}:host([multiple][active])>*{visibility:visible}:host([multiple][active]):after{display:none}';const Ut=new WeakMap;class rt extends M{constructor(){super(...arguments),this.$onCanvasAction=null,this.$onCanvasActionStart=null,this.$onCanvasActionEnd=null,this.$onDocumentKeyDown=null,this.$action="",this.$actionStartTarget=null,this.$changing=!1,this.$style=Ne,this.$initialSelection={x:0,y:0,width:0,height:0},this.x=0,this.y=0,this.width=0,this.height=0,this.aspectRatio=NaN,this.initialAspectRatio=NaN,this.initialCoverage=NaN,this.active=!1,this.linked=!1,this.dynamic=!1,this.movable=!1,this.resizable=!1,this.zoomable=!1,this.multiple=!1,this.keyboard=!1,this.outlined=!1,this.precise=!1}set $canvas(t){Ut.set(this,t)}get $canvas(){return Ut.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["active","aspect-ratio","dynamic","height","initial-aspect-ratio","initial-coverage","keyboard","linked","movable","multiple","outlined","precise","resizable","width","x","y","zoomable"])}$propertyChangedCallback(t,e,i){if(!Object.is(i,e))switch(super.$propertyChangedCallback(t,e,i),t){case"x":case"y":case"width":case"height":this.$changing||this.$nextTick(()=>{this.$change(this.x,this.y,this.width,this.height,this.aspectRatio,!0)});break;case"aspectRatio":case"initialAspectRatio":this.$nextTick(()=>{this.$initSelection()});break;case"initialCoverage":this.$nextTick(()=>{x(i)&&i<=1&&this.$initSelection(!0,!0)});break;case"keyboard":this.$nextTick(()=>{this.$canvas&&(i?this.$onDocumentKeyDown||(this.$onDocumentKeyDown=this.$handleKeyDown.bind(this),E(this.ownerDocument,kt,this.$onDocumentKeyDown)):this.$onDocumentKeyDown&&(y(this.ownerDocument,kt,this.$onDocumentKeyDown),this.$onDocumentKeyDown=null))});break;case"multiple":this.$nextTick(()=>{if(this.$canvas){const s=this.$getSelections();i?(s.forEach(n=>{n.active=!1}),this.active=!0,this.$emit(B,{x:this.x,y:this.y,width:this.width,height:this.height})):(this.active=!1,s.slice(1).forEach(n=>{this.$removeSelection(n)}))}});break;case"precise":this.$nextTick(()=>{this.$change(this.x,this.y)});break;case"linked":i&&(this.dynamic=!0);break}}connectedCallback(){super.connectedCallback();const t=this.closest(this.$getTagNameOf(j));t?(this.$canvas=t,this.$setStyles({position:"absolute",transform:`translate(${this.x}px, ${this.y}px)`}),this.hidden||this.$render(),this.$initSelection(!0),this.$onCanvasActionStart=this.$handleActionStart.bind(this),this.$onCanvasActionEnd=this.$handleActionEnd.bind(this),this.$onCanvasAction=this.$handleAction.bind(this),E(t,X,this.$onCanvasActionStart),E(t,W,this.$onCanvasActionEnd),E(t,L,this.$onCanvasAction)):this.$render()}disconnectedCallback(){const{$canvas:t}=this;t&&(this.$onCanvasActionStart&&(y(t,X,this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(y(t,W,this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onCanvasAction&&(y(t,L,this.$onCanvasAction),this.$onCanvasAction=null)),super.disconnectedCallback()}$getSelections(){let t=[];return this.parentElement&&(t=Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf(D)))),t}$initSelection(t=!1,e=!1){const{initialCoverage:i,parentElement:s}=this;if(x(i)&&s){const n=this.aspectRatio||this.initialAspectRatio;let r=(e?0:this.width)||s.offsetWidth*i,a=(e?0:this.height)||s.offsetHeight*i;x(n)&&({width:r,height:a}=tt({aspectRatio:n,width:r,height:a})),this.$change(this.x,this.y,r,a),t&&this.$center(),this.$initialSelection={x:this.x,y:this.y,width:this.width,height:this.height}}}$createSelection(){const t=this.cloneNode(!0);return this.hasAttribute("id")&&t.removeAttribute("id"),t.initialCoverage=NaN,this.active=!1,this.parentElement&&this.parentElement.insertBefore(t,this.nextSibling),t}$removeSelection(t=this){if(this.parentElement){const e=this.$getSelections();if(e.length>1){const i=e.indexOf(t),s=e[i+1]||e[i-1];s&&(t.active=!1,this.parentElement.removeChild(t),s.active=!0,s.$emit(B,{x:s.x,y:s.y,width:s.width,height:s.height}))}else this.$clear()}}$handleActionStart(t){var e,i;const s=(i=(e=t.detail)===null||e===void 0?void 0:e.relatedEvent)===null||i===void 0?void 0:i.target;this.$action="",this.$actionStartTarget=s,!this.hidden&&this.multiple&&!this.active&&s===this&&this.parentElement&&(this.$getSelections().forEach(n=>{n.active=!1}),this.active=!0,this.$emit(B,{x:this.x,y:this.y,width:this.width,height:this.height}))}$handleAction(t){const{currentTarget:e,detail:i}=t;if(!e||!i)return;const{relatedEvent:s}=i;let{action:n}=i;if(!n&&this.multiple&&(n=this.$action||(s==null?void 0:s.target.action),this.$action=n),!n||this.hidden&&n!==V||this.multiple&&!this.active&&n!==H)return;const r=i.endX-i.startX,a=i.endY-i.startY,{width:l,height:h}=this;let{aspectRatio:c}=this;switch(!x(c)&&s.shiftKey&&(c=x(l)&&x(h)?l/h:1),n){case V:if(r!==0&&a!==0){const{$canvas:u}=this,m=Dt(e);(this.multiple&&!this.hidden?this.$createSelection():this).$change(i.startX-m.left,i.startY-m.top,Math.abs(r),Math.abs(a),c),r<0?a<0?n=Z:a>0&&(n=G):r>0&&(a<0?n=U:a>0&&(n=K)),u&&(u.$action=n)}break;case gt:this.movable&&(this.dynamic||this.$actionStartTarget&&this.contains(this.$actionStartTarget))&&this.$move(r,a);break;case H:if(s&&this.zoomable&&(this.dynamic||this.contains(s.target))){const u=Dt(e);this.$zoom(i.scale,s.pageX-u.left,s.pageY-u.top)}break;default:this.$resize(n,r,a,c)}}$handleActionEnd(){this.$action="",this.$actionStartTarget=null}$handleKeyDown(t){if(this.hidden||!this.keyboard||this.multiple&&!this.active||t.defaultPrevented)return;const{activeElement:e}=document;if(!(e&&(["INPUT","TEXTAREA"].includes(e.tagName)||["true","plaintext-only"].includes(e.contentEditable))))switch(t.key){case"Backspace":t.metaKey&&(t.preventDefault(),this.$removeSelection());break;case"Delete":t.preventDefault(),this.$removeSelection();break;case"ArrowLeft":t.preventDefault(),this.$move(-1,0);break;case"ArrowRight":t.preventDefault(),this.$move(1,0);break;case"ArrowUp":t.preventDefault(),this.$move(0,-1);break;case"ArrowDown":t.preventDefault(),this.$move(0,1);break;case"+":t.preventDefault(),this.$zoom(.1);break;case"-":t.preventDefault(),this.$zoom(-.1);break}}$center(){const{parentElement:t}=this;if(!t)return this;const e=(t.offsetWidth-this.width)/2,i=(t.offsetHeight-this.height)/2;return this.$change(e,i)}$move(t,e=t){return this.$moveTo(this.x+t,this.y+e)}$moveTo(t,e=t){return this.movable?this.$change(t,e):this}$resize(t,e=0,i=0,s=this.aspectRatio){if(!this.resizable)return this;const n=x(s),{$canvas:r}=this;let{x:a,y:l,width:h,height:c}=this;switch(t){case bt:l+=i,c-=i,c<0&&(t=vt,c=-c,l-=c),n&&(e=i*s,a+=e/2,h-=e,h<0&&(h=-h,a-=h));break;case Ct:h+=e,h<0&&(t=yt,h=-h,a-=h),n&&(i=e/s,l-=i/2,c+=i,c<0&&(c=-c,l-=c));break;case vt:c+=i,c<0&&(t=bt,c=-c,l-=c),n&&(e=i*s,a-=e/2,h+=e,h<0&&(h=-h,a-=h));break;case yt:a+=e,h-=e,h<0&&(t=Ct,h=-h,a-=h),n&&(i=e/s,l+=i/2,c-=i,c<0&&(c=-c,l-=c));break;case U:n&&(i=-e/s),l+=i,c-=i,h+=e,h<0&&c<0?(t=G,h=-h,c=-c,a-=h,l-=c):h<0?(t=Z,h=-h,a-=h):c<0&&(t=K,c=-c,l-=c);break;case Z:n&&(i=e/s),a+=e,l+=i,h-=e,c-=i,h<0&&c<0?(t=K,h=-h,c=-c,a-=h,l-=c):h<0?(t=U,h=-h,a-=h):c<0&&(t=G,c=-c,l-=c);break;case K:n&&(i=e/s),h+=e,c+=i,h<0&&c<0?(t=Z,h=-h,c=-c,a-=h,l-=c):h<0?(t=G,h=-h,a-=h):c<0&&(t=U,c=-c,l-=c);break;case G:n&&(i=-e/s),a+=e,h-=e,c+=i,h<0&&c<0?(t=U,h=-h,c=-c,a-=h,l-=c):h<0?(t=K,h=-h,a-=h):c<0&&(t=Z,c=-c,l-=c);break}return r&&r.$setAction(t),this.$change(a,l,h,c)}$zoom(t,e,i){if(!this.zoomable||t===0)return this;t<0?t=1/(1-t):t+=1;const{width:s,height:n}=this,r=s*t,a=n*t;let l=this.x,h=this.y;return $(e)&&$(i)?(l-=(r-s)*((e-this.x)/s),h-=(a-n)*((i-this.y)/n)):(l-=(r-s)/2,h-=(a-n)/2),this.$change(l,h,r,a)}$change(t,e,i=this.width,s=this.height,n=this.aspectRatio,r=!1){return this.$changing||!$(t)||!$(e)||!$(i)||!$(s)||i<0||s<0?this:(x(n)&&({width:i,height:s}=tt({aspectRatio:n,width:i,height:s},"cover")),this.precise||(t=Math.round(t),e=Math.round(e),i=Math.round(i),s=Math.round(s)),t===this.x&&e===this.y&&i===this.width&&s===this.height&&Object.is(n,this.aspectRatio)&&!r?this:(this.hidden&&(this.hidden=!1),this.$emit(B,{x:t,y:e,width:i,height:s})===!1?this:(this.$changing=!0,this.x=t,this.y=e,this.width=i,this.height=s,this.$changing=!1,this.$render())))}$reset(){const{x:t,y:e,width:i,height:s}=this.$initialSelection;return this.$change(t,e,i,s)}$clear(){return this.$change(0,0,0,0,NaN,!0),this.hidden=!0,this}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height})}$toCanvas(t){return new Promise((e,i)=>{if(!this.isConnected){i(new Error("The current element is not connected to the DOM."));return}const s=document.createElement("canvas");let{width:n,height:r}=this,a=1;if(Q(t)&&(x(t.width)||x(t.height))&&({width:n,height:r}=tt({aspectRatio:n/r,width:t.width,height:t.height}),a=n/this.width),s.width=n,s.height=r,!this.$canvas){e(s);return}const l=this.$canvas.querySelector(this.$getTagNameOf(q));if(!l){e(s);return}l.$ready().then(h=>{const c=s.getContext("2d");if(c){const[u,m,p,f,A,w]=l.$getTransform(),g=-this.x,v=-this.y,b=(g*f-p*v)/(u*f-p*m),C=(v*u-m*g)/(u*f-p*m);let S=u*b+p*C+A,k=m*b+f*C+w,O=h.naturalWidth,N=h.naturalHeight;a!==1&&(S*=a,k*=a,O*=a,N*=a);const I=O/2,P=N/2;c.fillStyle="transparent",c.fillRect(0,0,n,r),Q(t)&&mt(t.beforeDraw)&&t.beforeDraw.call(this,c,s),c.save(),c.translate(I,P),c.transform(u,m,p,f,S,k),c.translate(-I,-P),c.drawImage(h,0,0,O,N),c.restore()}e(s)}).catch(i)})}}rt.$name=D,rt.$version="2.0.0-rc.2";var Re=":host{display:flex;flex-direction:column;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([bordered]){border:1px dashed var(--theme-color)}:host([covered]){bottom:0;left:0;position:absolute;right:0;top:0}:host>span{display:flex;flex:1}:host>span+span{border-top:1px dashed var(--theme-color)}:host>span>span{flex:1}:host>span>span+span{border-left:1px dashed var(--theme-color)}";class ct extends M{constructor(){super(...arguments),this.$style=Re,this.bordered=!1,this.columns=3,this.covered=!1,this.rows=3,this.slottable=!1,this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["bordered","columns","covered","rows"])}$propertyChangedCallback(t,e,i){Object.is(i,e)||(super.$propertyChangedCallback(t,e,i),(t==="rows"||t==="columns")&&this.$nextTick(()=>{this.$render()}))}connectedCallback(){super.connectedCallback(),this.$render()}$render(){const t=this.$getShadowRoot(),e=document.createDocumentFragment();for(let i=0;i<this.rows;i+=1){const s=document.createElement("span");s.setAttribute("role","row");for(let n=0;n<this.columns;n+=1){const r=document.createElement("span");r.setAttribute("role","gridcell"),s.appendChild(r)}e.appendChild(s)}t&&(t.innerHTML="",t.appendChild(e))}}ct.$name=oe,ct.$version="2.0.0-rc.2";var Ie=':host{display:inline-block;height:1em;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em}:host:after,:host:before{background-color:var(--theme-color);content:"";display:block;position:absolute}:host:before{height:1px;left:0;top:50%;transform:translateY(-50%);width:100%}:host:after{height:100%;left:50%;top:0;transform:translateX(-50%);width:1px}:host([centered]){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}';class ht extends M{constructor(){super(...arguments),this.$style=Ie,this.centered=!1,this.slottable=!1,this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["centered"])}}ht.$name=ae,ht.$version="2.0.0-rc.2";var Pe=":host{display:block;height:100%;overflow:hidden;position:relative;width:100%}";const Zt=new WeakMap,Kt=new WeakMap,Gt=new WeakMap,Ft=new WeakMap,Me="both",ze="horizontal",qt="vertical",De="none";class lt extends M{constructor(){super(...arguments),this.$onSelectionChange=null,this.$onSourceImageLoad=null,this.$onSourceImageTransform=null,this.$scale=1,this.$style=Pe,this.resize=qt,this.selection="",this.slottable=!1}set $image(t){Kt.set(this,t)}get $image(){return Kt.get(this)}set $sourceImage(t){Ft.set(this,t)}get $sourceImage(){return Ft.get(this)}set $canvas(t){Zt.set(this,t)}get $canvas(){return Zt.get(this)}set $selection(t){Gt.set(this,t)}get $selection(){return Gt.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["resize","selection"])}connectedCallback(){super.connectedCallback();let t=null;if(this.selection?t=this.ownerDocument.querySelector(this.selection):t=this.closest(this.$getTagNameOf(D)),Nt(t)){this.$selection=t,this.$onSelectionChange=this.$handleSelectionChange.bind(this),E(t,B,this.$onSelectionChange);const e=t.closest(this.$getTagNameOf(j));if(e){this.$canvas=e;const i=e.querySelector(this.$getTagNameOf(q));i&&(this.$sourceImage=i,this.$image=i.cloneNode(!0),this.$getShadowRoot().appendChild(this.$image),this.$onSourceImageLoad=this.$handleSourceImageLoad.bind(this),this.$onSourceImageTransform=this.$handleSourceImageTransform.bind(this),E(i.$image,Y,this.$onSourceImageLoad),E(i,$t,this.$onSourceImageTransform))}this.$render()}}disconnectedCallback(){const{$selection:t,$sourceImage:e}=this;t&&this.$onSelectionChange&&(y(t,B,this.$onSelectionChange),this.$onSelectionChange=null),e&&this.$onSourceImageLoad&&(y(e.$image,Y,this.$onSourceImageLoad),this.$onSourceImageLoad=null),e&&this.$onSourceImageTransform&&(y(e,$t,this.$onSourceImageTransform),this.$onSourceImageTransform=null),super.disconnectedCallback()}$handleSelectionChange(t){this.$render(t.detail)}$handleSourceImageLoad(){const{$image:t,$sourceImage:e}=this,i=t.getAttribute("src"),s=e.getAttribute("src");s&&s!==i&&(t.setAttribute("src",s),t.$ready(()=>{setTimeout(()=>{this.$render()},50)}))}$handleSourceImageTransform(t){this.$render(void 0,t.detail.matrix)}$render(t,e){const{$canvas:i,$selection:s}=this;!t&&!s.hidden&&(t=s),(!t||t.x===0&&t.y===0&&t.width===0&&t.height===0)&&(t={x:0,y:0,width:i.offsetWidth,height:i.offsetHeight});const{x:n,y:r,width:a,height:l}=t,h={},{clientWidth:c,clientHeight:u}=this;let m=c,p=u,f=NaN;switch(this.resize){case Me:f=1,m=a,p=l,h.width=a,h.height=l;break;case ze:f=l>0?u/l:0,m=a*f,h.width=m;break;case qt:f=a>0?c/a:0,p=l*f,h.height=p;break;case De:default:c>0?f=a>0?c/a:0:u>0&&(f=l>0?u/l:0)}this.$scale=f,this.$setStyles(h),this.$sourceImage&&this.$transformImageByOffset(e??this.$sourceImage.$getTransform(),-n,-r)}$transformImageByOffset(t,e,i){const{$image:s,$scale:n,$sourceImage:r}=this;if(r&&s&&n>=0){const[a,l,h,c,u,m]=t,p=(e*c-h*i)/(a*c-h*l),f=(i*a-l*e)/(a*c-h*l),A=a*p+h*f+u,w=l*p+c*f+m;s.$ready(g=>{this.$setStyles.call(s,{width:g.naturalWidth*n,height:g.naturalHeight*n})}),s.$setTransform(a,l,h,c,A*n,w*n)}}}lt.$name=he,lt.$version="2.0.0-rc.2";/*! Cropper.js v2.0.0-rc.2 | (c) 2015-present Chen Fengyuan | MIT */st.$define(),ht.$define(),ct.$define(),ot.$define(),nt.$define(),rt.$define(),at.$define(),lt.$define();const Vt=d.defineComponent({__name:"CropperCanvas",props:{background:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},scaleStep:{default:.1},themeColor:{default:"#39f"}},setup(o,{expose:t}){var r,a;const e=d.useTemplateRef("canvasRef");st.$define();const i=d.h("cropper-canvas",{background:o.background,disabled:o.disabled,scaleStep:o.scaleStep,themeColor:o.themeColor,style:"height: 500px"}),s=(r=e.value)==null?void 0:r.$setAction,n=(a=e.value)==null?void 0:a.$toCanvas;return t({$setAction:s,$toCanvas:n}),(l,h)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(i)),{ref_key:"canvasRef",ref:e},{default:d.withCtx(()=>[d.renderSlot(l.$slots,"default")]),_:3},512))}}),Jt=d.defineComponent({__name:"CropperImage",props:{src:{},alt:{},initialCenterSize:{default:"contain"},rotatable:{type:Boolean,default:!1},scalable:{type:Boolean,default:!1},skewable:{type:Boolean,default:!1},slottable:{type:Boolean,default:!1},translatable:{type:Boolean,default:!1}},setup(o){nt.$define();const t=d.h("cropper-image",{src:o.src,alt:o.alt,initialCenterSize:o.initialCenterSize,rotatable:o.rotatable,scalable:o.scalable,skewable:o.skewable,slottable:o.slottable,translatable:o.translatable});return(e,i)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(t))))}}),Qt=d.defineComponent({__name:"CropperShade",props:{x:{default:0},y:{default:0},width:{default:0},height:{default:0},slottable:{type:Boolean,default:!1},themeColor:{default:"rgba(0, 0, 0, 0.65)"},hidden:{type:Boolean,default:!1}},setup(o){at.$define();const t=d.h("cropper-shade",{x:o.x,y:o.y,width:o.width,height:o.height,slottable:o.slottable,themeColor:o.themeColor,hidden:o.hidden});return(e,i)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(t))))}}),te=d.defineComponent({__name:"CropperHandle",props:{action:{default:"none"},plain:{type:Boolean,default:!1},slottable:{type:Boolean,default:!1},themeColor:{default:"rgba(51, 153, 255, 0.5)"}},setup(o){ot.$define();const t=d.h("cropper-handle",{action:o.action,plain:o.plain,slottable:o.slottable,themeColor:o.themeColor});return(e,i)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(t))))}}),ee=d.defineComponent({__name:"CropperSelection",props:{x:{default:0},y:{default:0},width:{default:0},height:{default:0},aspectRatio:{},initialAspectRatio:{},initialCoverage:{},dynamic:{type:Boolean,default:!1},movable:{type:Boolean,default:!1},resizable:{type:Boolean,default:!1},zoomable:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},keyboard:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},precise:{type:Boolean,default:!1}},setup(o){rt.$define();const t=d.h("cropper-selection",{x:o.x,y:o.y,width:o.width,height:o.height,aspectRatio:o.aspectRatio,initialAspectRatio:o.initialAspectRatio,initialCoverage:o.initialCoverage,dynamic:o.dynamic,movable:o.movable,resizable:o.resizable,zoomable:o.zoomable,multiple:o.multiple,keyboard:o.keyboard,outlined:o.outlined,precise:o.precise});return(e,i)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(t)),null,{default:d.withCtx(()=>[d.renderSlot(e.$slots,"default")]),_:3}))}}),ie=d.defineComponent({__name:"CropperCrosshair",props:{centered:{type:Boolean,default:!1}},setup(o){ht.$define();const t=d.h("cropper-crosshair",{centered:o.centered});return(e,i)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(t))))}}),se=d.defineComponent({__name:"CropperGrid",props:{role:{default:"grid"},covered:{type:Boolean,default:!1}},setup(o){ct.$define();const t=d.h("cropper-grid",{role:o.role,covered:o.covered});return(e,i)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(t))))}}),ne=d.defineComponent({__name:"CropperViewer",props:{resize:{default:"vertical"},selection:{default:""}},setup(o){lt.$define();const t=d.h("cropper-viewer",{resize:o.resize,selection:o.selection});return(e,i)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(t))))}}),_e={install:o=>{o.component("CropperCanvas",Vt),o.component("CropperImage",Jt),o.component("CropperShade",Qt),o.component("CropperHandle",te),o.component("CropperSelection",ee),o.component("CropperCrosshair",ie),o.component("CropperGrid",se),o.component("CropperViewer",ne)}};T.CropperCanvas=Vt,T.CropperCrosshair=ie,T.CropperGrid=se,T.CropperHandle=te,T.CropperImage=Jt,T.CropperSelection=ee,T.CropperShade=Qt,T.CropperViewer=ne,T.default=_e,Object.defineProperties(T,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(k,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],d):(k=typeof globalThis<"u"?globalThis:k||self,d(k["vue-cropperjs2"]={},k.Vue))})(this,function(k,d){"use strict";const F=typeof window<"u"&&typeof window.document<"u",R=F?window:{},dt=F?"ontouchstart"in R.document.documentElement:!1,ft=F?"PointerEvent"in R:!1,z="cropper",j=`${z}-canvas`,ae=`${z}-crosshair`,oe=`${z}-grid`,re=`${z}-handle`,q=`${z}-image`,_=`${z}-selection`,he=`${z}-shade`,ce=`${z}-viewer`,V="select",gt="move",H="scale",ut="rotate",J="transform",D="none",bt="n-resize",Ct="e-resize",vt="s-resize",yt="w-resize",U="ne-resize",Z="nw-resize",K="se-resize",G="sw-resize",le="action",de=dt?"touchend touchcancel":"mouseup",fe=dt?"touchmove":"mousemove",Et=ft?"pointerdown":dt?"touchstart":"mousedown",wt=ft?"pointermove":fe,St=ft?"pointerup pointercancel":de,At="error",Tt="keydown",Y="load",kt="wheel",L="action",W="actionend",ue="actionmove",X="actionstart",B="change",$t="transform";function $e(o){return typeof o=="string"}const xt=Number.isNaN||R.isNaN;function $(o){return typeof o=="number"&&!xt(o)}function x(o){return $(o)&&o>0&&o<1/0}function me(o){return typeof o>"u"}function Ot(o){return typeof o=="object"&&o!==null}const{hasOwnProperty:pe}=Object.prototype;function Q(o){if(!Ot(o))return!1;try{const{constructor:t}=o,{prototype:e}=t;return t&&e&&pe.call(e,"isPrototypeOf")}catch{return!1}}function mt(o){return typeof o=="function"}function Nt(o){return typeof o=="object"&&o!==null&&o.nodeType===1}const ge=/([a-z\d])([A-Z])/g;function Rt(o){return String(o).replace(ge,"$1-$2").toLowerCase()}const be=/-[A-z\d]/g;function It(o){return o.replace(be,t=>t.slice(1).toUpperCase())}const Pt=/\s\s*/;function y(o,t,e,i){t.trim().split(Pt).forEach(s=>{o.removeEventListener(s,e,i)})}function E(o,t,e,i){t.trim().split(Pt).forEach(s=>{o.addEventListener(s,e,i)})}function Mt(o,t,e,i){E(o,t,e,Object.assign(Object.assign({},i),{once:!0}))}const Ce={bubbles:!0,cancelable:!0,composed:!0};function ve(o,t,e,i){return o.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign(Object.assign({},Ce),{detail:e}),i)))}const zt=Promise.resolve();function ye(o,t){return t?zt.then(o?t.bind(o):t):zt}function _t(o){const{documentElement:t}=o.ownerDocument,e=o.getBoundingClientRect();return{left:e.left+(R.pageXOffset-t.clientLeft),top:e.top+(R.pageYOffset-t.clientTop)}}const Ee=/deg|g?rad|turn$/i;function pt(o){const t=parseFloat(o)||0;if(t!==0){const[e="rad"]=String(o).match(Ee)||[];switch(e.toLowerCase()){case"deg":return t/360*(Math.PI*2);case"grad":return t/400*(Math.PI*2);case"turn":return t*(Math.PI*2)}}return t}const Dt="contain",we="cover";function tt(o,t=Dt){const{aspectRatio:e}=o;let{width:i,height:s}=o;const n=x(i),h=x(s);if(n&&h){const a=s*e;t===Dt&&a>i||t===we&&a<i?s=i/e:i=s*e}else n?s=i/e:h&&(i=s*e);return{width:i,height:s}}function Bt(o,...t){if(t.length===0)return o;const[e,i,s,n,h,a]=o,[l,c,r,u,m,p]=t[0];return o=[e*l+s*c,i*l+n*c,e*r+s*u,i*r+n*u,e*m+s*p+h,i*m+n*p+a],Bt(o,...t.slice(1))}var Se=":host([hidden]){display:none!important}";const Ae=/left|top|width|height/i,Wt="open",et=new WeakMap,it=new WeakMap,Xt=new Map,Ht=R.document&&Array.isArray(R.document.adoptedStyleSheets)&&"replaceSync"in R.CSSStyleSheet.prototype;class M extends HTMLElement{get $sharedStyle(){return`${this.themeColor?`:host{--theme-color: ${this.themeColor};}`:""}${Se}`}constructor(){var t,e;super(),this.shadowRootMode=Wt,this.slottable=!0;const i=(e=(t=Object.getPrototypeOf(this))===null||t===void 0?void 0:t.constructor)===null||e===void 0?void 0:e.$name;i&&Xt.set(i,this.tagName.toLowerCase())}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(t,e,i){if(Object.is(i,e))return;const s=It(t),n=this[s];let h=i;switch(typeof n){case"boolean":h=i!==null&&i!=="false";break;case"number":h=Number(i);break}switch(this[s]=h,t){case"theme-color":{const a=it.get(this),l=this.$sharedStyle;a&&l&&(Ht?a.replaceSync(l):a.textContent=l);break}}}$propertyChangedCallback(t,e,i){if(!Object.is(i,e))switch(t=Rt(t),typeof i){case"boolean":i===!0?this.hasAttribute(t)||this.setAttribute(t,""):this.removeAttribute(t);break;case"number":xt(i)?i="":i=String(i);default:i?this.getAttribute(t)!==i&&this.setAttribute(t,i):this.removeAttribute(t)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach(e=>{const i=It(e);let s=this[i];me(s)||this.$propertyChangedCallback(i,void 0,s),Object.defineProperty(this,i,{enumerable:!0,configurable:!0,get(){return s},set(n){const h=s;s=n,this.$propertyChangedCallback(i,h,n)}})});const t=this.attachShadow({mode:this.shadowRootMode||Wt});if(this.shadowRoot||et.set(this,t),it.set(this,this.$addStyles(this.$sharedStyle)),this.$style&&this.$addStyles(this.$style),this.$template){const e=document.createElement("template");e.innerHTML=this.$template,t.appendChild(e.content)}if(this.slottable){const e=document.createElement("slot");t.appendChild(e)}}disconnectedCallback(){it.has(this)&&it.delete(this),et.has(this)&&et.delete(this)}$getTagNameOf(t){var e;return(e=Xt.get(t))!==null&&e!==void 0?e:t}$setStyles(t){return Object.keys(t).forEach(e=>{let i=t[e];$(i)&&(i!==0&&Ae.test(e)?i=`${i}px`:i=String(i)),this.style[e]=i}),this}$getShadowRoot(){return this.shadowRoot||et.get(this)}$addStyles(t){let e;const i=this.$getShadowRoot();return Ht?(e=new CSSStyleSheet,e.replaceSync(t),i.adoptedStyleSheets=i.adoptedStyleSheets.concat(e)):(e=document.createElement("style"),e.textContent=t,i.appendChild(e)),e}$emit(t,e,i){return ve(this,t,e,i)}$nextTick(t){return ye(this,t)}static $define(t,e){Ot(t)&&(e=t,t=""),t||(t=this.$name||this.name),t=Rt(t),F&&R.customElements&&!R.customElements.get(t)&&customElements.define(t,this,e)}}M.$version="2.0.0-rc.2";var Te=':host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([background]){background-color:#fff;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-image:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%);background-position:0 0,.5rem .5rem;background-size:1rem 1rem}:host([disabled]){pointer-events:none}:host([disabled]):after{bottom:0;content:"";cursor:not-allowed;display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}';class st extends M{constructor(){super(...arguments),this.$onPointerDown=null,this.$onPointerMove=null,this.$onPointerUp=null,this.$onWheel=null,this.$wheeling=!1,this.$pointers=new Map,this.$style=Te,this.$action=D,this.background=!1,this.disabled=!1,this.scaleStep=.1,this.themeColor="#39f"}static get observedAttributes(){return super.observedAttributes.concat(["background","disabled","scale-step"])}connectedCallback(){super.connectedCallback(),this.disabled||this.$bind()}disconnectedCallback(){this.disabled||this.$unbind(),super.disconnectedCallback()}$propertyChangedCallback(t,e,i){if(!Object.is(i,e))switch(super.$propertyChangedCallback(t,e,i),t){case"disabled":i?this.$unbind():this.$bind();break}}$bind(){this.$onPointerDown||(this.$onPointerDown=this.$handlePointerDown.bind(this),E(this,Et,this.$onPointerDown)),this.$onPointerMove||(this.$onPointerMove=this.$handlePointerMove.bind(this),E(this.ownerDocument,wt,this.$onPointerMove)),this.$onPointerUp||(this.$onPointerUp=this.$handlePointerUp.bind(this),E(this.ownerDocument,St,this.$onPointerUp)),this.$onWheel||(this.$onWheel=this.$handleWheel.bind(this),E(this,kt,this.$onWheel,{passive:!1,capture:!0}))}$unbind(){this.$onPointerDown&&(y(this,Et,this.$onPointerDown),this.$onPointerDown=null),this.$onPointerMove&&(y(this.ownerDocument,wt,this.$onPointerMove),this.$onPointerMove=null),this.$onPointerUp&&(y(this.ownerDocument,St,this.$onPointerUp),this.$onPointerUp=null),this.$onWheel&&(y(this,kt,this.$onWheel,{capture:!0}),this.$onWheel=null)}$handlePointerDown(t){const{buttons:e,button:i,type:s}=t;if(this.disabled||(s==="pointerdown"&&t.pointerType==="mouse"||s==="mousedown")&&($(e)&&e!==1||$(i)&&i!==0||t.ctrlKey))return;const{$pointers:n}=this;let h="";if(t.changedTouches)Array.from(t.changedTouches).forEach(({identifier:a,pageX:l,pageY:c})=>{n.set(a,{startX:l,startY:c,endX:l,endY:c})});else{const{pointerId:a=0,pageX:l,pageY:c}=t;n.set(a,{startX:l,startY:c,endX:l,endY:c})}n.size>1?h=J:Nt(t.target)&&(h=t.target.action||t.target.getAttribute(le)||""),this.$emit(X,{action:h,relatedEvent:t})!==!1&&(t.preventDefault(),this.$action=h,this.style.willChange="transform")}$handlePointerMove(t){const{$action:e,$pointers:i}=this;if(this.disabled||e===D||i.size===0||this.$emit(ue,{action:e,relatedEvent:t})===!1)return;if(t.preventDefault(),t.changedTouches)Array.from(t.changedTouches).forEach(({identifier:n,pageX:h,pageY:a})=>{const l=i.get(n);l&&Object.assign(l,{endX:h,endY:a})});else{const{pointerId:n=0,pageX:h,pageY:a}=t,l=i.get(n);l&&Object.assign(l,{endX:h,endY:a})}const s={action:e,relatedEvent:t};if(e===J){const n=new Map(i);let h=0,a=0,l=0,c=0,r=t.pageX,u=t.pageY;i.forEach((f,A)=>{n.delete(A),n.forEach(w=>{let g=w.startX-f.startX,v=w.startY-f.startY,b=w.endX-f.endX,C=w.endY-f.endY,S=0,T=0,O=0,N=0;if(g===0?v<0?O=Math.PI*2:v>0&&(O=Math.PI):g>0?O=Math.PI/2+Math.atan(v/g):g<0&&(O=Math.PI*1.5+Math.atan(v/g)),b===0?C<0?N=Math.PI*2:C>0&&(N=Math.PI):b>0?N=Math.PI/2+Math.atan(C/b):b<0&&(N=Math.PI*1.5+Math.atan(C/b)),N>0||O>0){const I=N-O,P=Math.abs(I);P>h&&(h=P,l=I,r=(f.startX+w.startX)/2,u=(f.startY+w.startY)/2)}if(g=Math.abs(g),v=Math.abs(v),b=Math.abs(b),C=Math.abs(C),g>0&&v>0?S=Math.sqrt(g*g+v*v):g>0?S=g:v>0&&(S=v),b>0&&C>0?T=Math.sqrt(b*b+C*C):b>0?T=b:C>0&&(T=C),S>0&&T>0){const I=(T-S)/S,P=Math.abs(I);P>a&&(a=P,c=I,r=(f.startX+w.startX)/2,u=(f.startY+w.startY)/2)}})});const m=h>0,p=a>0;m&&p?(s.rotate=l,s.scale=c,s.centerX=r,s.centerY=u):m?(s.action=ut,s.rotate=l,s.centerX=r,s.centerY=u):p?(s.action=H,s.scale=c,s.centerX=r,s.centerY=u):s.action=D}else{const[n]=Array.from(i.values());Object.assign(s,n)}i.forEach(n=>{n.startX=n.endX,n.startY=n.endY}),s.action!==D&&this.$emit(L,s,{cancelable:!1})}$handlePointerUp(t){const{$action:e,$pointers:i}=this;if(!(this.disabled||e===D)&&this.$emit(W,{action:e,relatedEvent:t})!==!1){if(t.preventDefault(),t.changedTouches)Array.from(t.changedTouches).forEach(({identifier:s})=>{i.delete(s)});else{const{pointerId:s=0}=t;i.delete(s)}i.size===0&&(this.style.willChange="",this.$action=D)}}$handleWheel(t){if(this.disabled||(t.preventDefault(),this.$wheeling))return;this.$wheeling=!0,setTimeout(()=>{this.$wheeling=!1},50);const i=(t.deltaY>0?-1:1)*this.scaleStep;this.$emit(L,{action:H,scale:i,relatedEvent:t},{cancelable:!1})}$setAction(t){return $e(t)&&(this.$action=t),this}$toCanvas(t){return new Promise((e,i)=>{if(!this.isConnected){i(new Error("The current element is not connected to the DOM."));return}const s=document.createElement("canvas");let n=this.offsetWidth,h=this.offsetHeight,a=1;Q(t)&&(x(t.width)||x(t.height))&&({width:n,height:h}=tt({aspectRatio:n/h,width:t.width,height:t.height}),a=n/this.offsetWidth),s.width=n,s.height=h;const l=this.querySelector(this.$getTagNameOf(q));if(!l){e(s);return}l.$ready().then(c=>{const r=s.getContext("2d");if(r){const[u,m,p,f,A,w]=l.$getTransform();let g=A,v=w,b=c.naturalWidth,C=c.naturalHeight;a!==1&&(g*=a,v*=a,b*=a,C*=a);const S=b/2,T=C/2;r.fillStyle="transparent",r.fillRect(0,0,n,h),Q(t)&&mt(t.beforeDraw)&&t.beforeDraw.call(this,r,s),r.save(),r.translate(S,T),r.transform(u,m,p,f,g,v),r.translate(-S,-T),r.drawImage(c,0,0,b,C),r.restore()}e(s)}).catch(i)})}}st.$name=j,st.$version="2.0.0-rc.2";var ke=":host{display:inline-block}img{display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}";const Yt=new WeakMap,Lt=["alt","crossorigin","decoding","importance","loading","referrerpolicy","sizes","src","srcset"];class nt extends M{constructor(){super(...arguments),this.$matrix=[1,0,0,1,0,0],this.$onLoad=null,this.$onCanvasAction=null,this.$onCanvasActionEnd=null,this.$onCanvasActionStart=null,this.$actionStartTarget=null,this.$style=ke,this.$image=new Image,this.initialCenterSize="contain",this.rotatable=!1,this.scalable=!1,this.skewable=!1,this.slottable=!1,this.translatable=!1}set $canvas(t){Yt.set(this,t)}get $canvas(){return Yt.get(this)}static get observedAttributes(){return super.observedAttributes.concat(Lt,["initial-center-size","rotatable","scalable","skewable","translatable"])}attributeChangedCallback(t,e,i){Object.is(i,e)||(super.attributeChangedCallback(t,e,i),Lt.includes(t)&&this.$image.setAttribute(t,i))}$propertyChangedCallback(t,e,i){if(!Object.is(i,e))switch(super.$propertyChangedCallback(t,e,i),t){case"initialCenterSize":this.$nextTick(()=>{this.$center(i)});break}}connectedCallback(){super.connectedCallback();const{$image:t}=this,e=this.closest(this.$getTagNameOf(j));e&&(this.$canvas=e,this.$setStyles({display:"block",position:"absolute"}),this.$onCanvasActionStart=i=>{var s,n;this.$actionStartTarget=(n=(s=i.detail)===null||s===void 0?void 0:s.relatedEvent)===null||n===void 0?void 0:n.target},this.$onCanvasActionEnd=()=>{this.$actionStartTarget=null},this.$onCanvasAction=this.$handleAction.bind(this),E(e,X,this.$onCanvasActionStart),E(e,W,this.$onCanvasActionEnd),E(e,L,this.$onCanvasAction)),this.$onLoad=this.$handleLoad.bind(this),E(t,Y,this.$onLoad),this.$getShadowRoot().appendChild(t)}disconnectedCallback(){const{$image:t,$canvas:e}=this;e&&(this.$onCanvasActionStart&&(y(e,X,this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(y(e,W,this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onCanvasAction&&(y(e,L,this.$onCanvasAction),this.$onCanvasAction=null)),t&&this.$onLoad&&(y(t,Y,this.$onLoad),this.$onLoad=null),this.$getShadowRoot().removeChild(t),super.disconnectedCallback()}$handleLoad(){const{$image:t}=this;this.$setStyles({width:t.naturalWidth,height:t.naturalHeight}),this.$canvas&&this.$center(this.initialCenterSize)}$handleAction(t){if(this.hidden||!(this.rotatable||this.scalable||this.translatable))return;const{$canvas:e}=this,{detail:i}=t;if(i){const{relatedEvent:s}=i;let{action:n}=i;switch(n===J&&(!this.rotatable||!this.scalable)&&(this.rotatable?n=ut:this.scalable?n=H:n=D),n){case gt:if(this.translatable){let h=null;s&&(h=s.target.closest(this.$getTagNameOf(_))),h||(h=e.querySelector(this.$getTagNameOf(_))),h&&h.multiple&&!h.active&&(h=e.querySelector(`${this.$getTagNameOf(_)}[active]`)),(!h||h.hidden||!h.movable||h.dynamic||!(this.$actionStartTarget&&h.contains(this.$actionStartTarget)))&&this.$move(i.endX-i.startX,i.endY-i.startY)}break;case ut:if(this.rotatable)if(s){const{x:h,y:a}=this.getBoundingClientRect();this.$rotate(i.rotate,s.clientX-h,s.clientY-a)}else this.$rotate(i.rotate);break;case H:if(this.scalable)if(s){const h=s.target.closest(this.$getTagNameOf(_));if(!h||!h.zoomable||h.zoomable&&h.dynamic){const{x:a,y:l}=this.getBoundingClientRect();this.$zoom(i.scale,s.clientX-a,s.clientY-l)}}else this.$zoom(i.scale);break;case J:if(this.rotatable&&this.scalable){const{rotate:h}=i;let{scale:a}=i;a<0?a=1/(1-a):a+=1;const l=Math.cos(h),c=Math.sin(h),[r,u,m,p]=[l*a,c*a,-c*a,l*a];if(s){const f=this.getBoundingClientRect(),A=s.clientX-f.x,w=s.clientY-f.y,[g,v,b,C]=this.$matrix,S=f.width/2,T=f.height/2,O=A-S,N=w-T,I=(O*C-b*N)/(g*C-b*v),P=(N*g-v*O)/(g*C-b*v);this.$transform(r,u,m,p,I*(1-r)+P*m,P*(1-p)+I*u)}else this.$transform(r,u,m,p,0,0)}break}}}$ready(t){const{$image:e}=this,i=new Promise((s,n)=>{const h=new Error("Failed to load the image source");if(e.complete)e.naturalWidth>0&&e.naturalHeight>0?s(e):n(h);else{const a=()=>{y(e,At,l),s(e)},l=()=>{y(e,Y,a),n(h)};Mt(e,Y,a),Mt(e,At,l)}});return mt(t)&&i.then(s=>(t(s),s)),i}$center(t){const{parentElement:e}=this;if(!e)return this;const i=e.getBoundingClientRect(),s=i.width,n=i.height,{x:h,y:a,width:l,height:c}=this.getBoundingClientRect(),r=h+l/2,u=a+c/2,m=i.x+s/2,p=i.y+n/2;if(this.$move(m-r,p-u),t&&(l!==s||c!==n)){const f=s/l,A=n/c;switch(t){case"cover":this.$scale(Math.max(f,A));break;case"contain":this.$scale(Math.min(f,A));break}}return this}$move(t,e=t){if(this.translatable&&$(t)&&$(e)){const[i,s,n,h]=this.$matrix,a=(t*h-n*e)/(i*h-n*s),l=(e*i-s*t)/(i*h-n*s);this.$translate(a,l)}return this}$moveTo(t,e=t){if(this.translatable&&$(t)&&$(e)){const[i,s,n,h]=this.$matrix,a=(t*h-n*e)/(i*h-n*s),l=(e*i-s*t)/(i*h-n*s);this.$setTransform(i,s,n,h,a,l)}return this}$rotate(t,e,i){if(this.rotatable){const s=pt(t),n=Math.cos(s),h=Math.sin(s),[a,l,c,r]=[n,h,-h,n];if($(e)&&$(i)){const[u,m,p,f]=this.$matrix,{width:A,height:w}=this.getBoundingClientRect(),g=A/2,v=w/2,b=e-g,C=i-v,S=(b*f-p*C)/(u*f-p*m),T=(C*u-m*b)/(u*f-p*m);this.$transform(a,l,c,r,S*(1-a)-T*c,T*(1-r)-S*l)}else this.$transform(a,l,c,r,0,0)}return this}$zoom(t,e,i){if(!this.scalable||t===0)return this;if(t<0?t=1/(1-t):t+=1,$(e)&&$(i)){const[s,n,h,a]=this.$matrix,{width:l,height:c}=this.getBoundingClientRect(),r=l/2,u=c/2,m=e-r,p=i-u,f=(m*a-h*p)/(s*a-h*n),A=(p*s-n*m)/(s*a-h*n);this.$transform(t,0,0,t,f*(1-t),A*(1-t))}else this.$scale(t);return this}$scale(t,e=t){return this.scalable&&this.$transform(t,0,0,e,0,0),this}$skew(t,e=0){if(this.skewable){const i=pt(t),s=pt(e);this.$transform(1,Math.tan(s),Math.tan(i),1,0,0)}return this}$translate(t,e=t){return this.translatable&&$(t)&&$(e)&&this.$transform(1,0,0,1,t,e),this}$transform(t,e,i,s,n,h){return $(t)&&$(e)&&$(i)&&$(s)&&$(n)&&$(h)?this.$setTransform(Bt(this.$matrix,[t,e,i,s,n,h])):this}$setTransform(t,e,i,s,n,h){if((this.rotatable||this.scalable||this.skewable||this.translatable)&&(Array.isArray(t)&&([t,e,i,s,n,h]=t),$(t)&&$(e)&&$(i)&&$(s)&&$(n)&&$(h))){const a=[...this.$matrix],l=[t,e,i,s,n,h];if(this.$emit($t,{matrix:l,oldMatrix:a})===!1)return this;this.$matrix=l,this.style.transform=`matrix(${l.join(", ")})`}return this}$getTransform(){return this.$matrix.slice()}$resetTransform(){return this.$setTransform([1,0,0,1,0,0])}}nt.$name=q,nt.$version="2.0.0-rc.2";var xe=":host{display:block;height:0;left:0;outline:var(--theme-color) solid 1px;position:relative;top:0;width:0}:host([transparent]){outline-color:transparent}";const jt=new WeakMap;class at extends M{constructor(){super(...arguments),this.$onCanvasChange=null,this.$onCanvasActionEnd=null,this.$onCanvasActionStart=null,this.$style=xe,this.x=0,this.y=0,this.width=0,this.height=0,this.slottable=!1,this.themeColor="rgba(0, 0, 0, 0.65)"}set $canvas(t){jt.set(this,t)}get $canvas(){return jt.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["height","width","x","y"])}connectedCallback(){super.connectedCallback();const t=this.closest(this.$getTagNameOf(j));if(t){this.$canvas=t,this.style.position="absolute";const e=t.querySelector(this.$getTagNameOf(_));e&&(this.$onCanvasActionStart=i=>{e.hidden&&i.detail.action===V&&(this.hidden=!1)},this.$onCanvasActionEnd=i=>{e.hidden&&i.detail.action===V&&(this.hidden=!0)},this.$onCanvasChange=i=>{const{x:s,y:n,width:h,height:a}=i.detail;this.$change(s,n,h,a),(e.hidden||s===0&&n===0&&h===0&&a===0)&&(this.hidden=!0)},E(t,X,this.$onCanvasActionStart),E(t,W,this.$onCanvasActionEnd),E(t,B,this.$onCanvasChange))}this.$render()}disconnectedCallback(){const{$canvas:t}=this;t&&(this.$onCanvasActionStart&&(y(t,X,this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(y(t,W,this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onCanvasChange&&(y(t,B,this.$onCanvasChange),this.$onCanvasChange=null)),super.disconnectedCallback()}$change(t,e,i=this.width,s=this.height){return!$(t)||!$(e)||!$(i)||!$(s)||t===this.x&&e===this.y&&i===this.width&&s===this.height?this:(this.hidden&&(this.hidden=!1),this.x=t,this.y=e,this.width=i,this.height=s,this.$render())}$reset(){return this.$change(0,0,0,0)}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height,outlineWidth:R.innerWidth})}}at.$name=he,at.$version="2.0.0-rc.2";var Oe=':host{background-color:var(--theme-color);display:block}:host([action=move]),:host([action=select]){height:100%;left:0;position:absolute;top:0;width:100%}:host([action=move]){cursor:move}:host([action=select]){cursor:crosshair}:host([action$=-resize]){background-color:transparent;height:15px;position:absolute;width:15px}:host([action$=-resize]):after{background-color:var(--theme-color);content:"";display:block;height:5px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px}:host([action=n-resize]),:host([action=s-resize]){cursor:ns-resize;left:50%;transform:translateX(-50%);width:100%}:host([action=n-resize]){top:-8px}:host([action=s-resize]){bottom:-8px}:host([action=e-resize]),:host([action=w-resize]){cursor:ew-resize;height:100%;top:50%;transform:translateY(-50%)}:host([action=e-resize]){right:-8px}:host([action=w-resize]){left:-8px}:host([action=ne-resize]){cursor:nesw-resize;right:-8px;top:-8px}:host([action=nw-resize]){cursor:nwse-resize;left:-8px;top:-8px}:host([action=se-resize]){bottom:-8px;cursor:nwse-resize;right:-8px}:host([action=se-resize]):after{height:15px;width:15px}@media (pointer:coarse){:host([action=se-resize]):after{height:10px;width:10px}}@media (pointer:fine){:host([action=se-resize]):after{height:5px;width:5px}}:host([action=sw-resize]){bottom:-8px;cursor:nesw-resize;left:-8px}:host([plain]){background-color:transparent}';class ot extends M{constructor(){super(...arguments),this.$onCanvasCropEnd=null,this.$onCanvasCropStart=null,this.$style=Oe,this.action=D,this.plain=!1,this.slottable=!1,this.themeColor="rgba(51, 153, 255, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["action","plain"])}}ot.$name=re,ot.$version="2.0.0-rc.2";var Ne=':host{display:block;left:0;position:relative;right:0}:host([outlined]){outline:1px solid var(--theme-color)}:host([multiple]){outline:1px dashed hsla(0,0%,100%,.5)}:host([multiple]):after{bottom:0;content:"";cursor:pointer;display:block;left:0;position:absolute;right:0;top:0}:host([multiple][active]){outline-color:var(--theme-color);z-index:1}:host([multiple])>*{visibility:hidden}:host([multiple][active])>*{visibility:visible}:host([multiple][active]):after{display:none}';const Ut=new WeakMap;class rt extends M{constructor(){super(...arguments),this.$onCanvasAction=null,this.$onCanvasActionStart=null,this.$onCanvasActionEnd=null,this.$onDocumentKeyDown=null,this.$action="",this.$actionStartTarget=null,this.$changing=!1,this.$style=Ne,this.$initialSelection={x:0,y:0,width:0,height:0},this.x=0,this.y=0,this.width=0,this.height=0,this.aspectRatio=NaN,this.initialAspectRatio=NaN,this.initialCoverage=NaN,this.active=!1,this.linked=!1,this.dynamic=!1,this.movable=!1,this.resizable=!1,this.zoomable=!1,this.multiple=!1,this.keyboard=!1,this.outlined=!1,this.precise=!1}set $canvas(t){Ut.set(this,t)}get $canvas(){return Ut.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["active","aspect-ratio","dynamic","height","initial-aspect-ratio","initial-coverage","keyboard","linked","movable","multiple","outlined","precise","resizable","width","x","y","zoomable"])}$propertyChangedCallback(t,e,i){if(!Object.is(i,e))switch(super.$propertyChangedCallback(t,e,i),t){case"x":case"y":case"width":case"height":this.$changing||this.$nextTick(()=>{this.$change(this.x,this.y,this.width,this.height,this.aspectRatio,!0)});break;case"aspectRatio":case"initialAspectRatio":this.$nextTick(()=>{this.$initSelection()});break;case"initialCoverage":this.$nextTick(()=>{x(i)&&i<=1&&this.$initSelection(!0,!0)});break;case"keyboard":this.$nextTick(()=>{this.$canvas&&(i?this.$onDocumentKeyDown||(this.$onDocumentKeyDown=this.$handleKeyDown.bind(this),E(this.ownerDocument,Tt,this.$onDocumentKeyDown)):this.$onDocumentKeyDown&&(y(this.ownerDocument,Tt,this.$onDocumentKeyDown),this.$onDocumentKeyDown=null))});break;case"multiple":this.$nextTick(()=>{if(this.$canvas){const s=this.$getSelections();i?(s.forEach(n=>{n.active=!1}),this.active=!0,this.$emit(B,{x:this.x,y:this.y,width:this.width,height:this.height})):(this.active=!1,s.slice(1).forEach(n=>{this.$removeSelection(n)}))}});break;case"precise":this.$nextTick(()=>{this.$change(this.x,this.y)});break;case"linked":i&&(this.dynamic=!0);break}}connectedCallback(){super.connectedCallback();const t=this.closest(this.$getTagNameOf(j));t?(this.$canvas=t,this.$setStyles({position:"absolute",transform:`translate(${this.x}px, ${this.y}px)`}),this.hidden||this.$render(),this.$initSelection(!0),this.$onCanvasActionStart=this.$handleActionStart.bind(this),this.$onCanvasActionEnd=this.$handleActionEnd.bind(this),this.$onCanvasAction=this.$handleAction.bind(this),E(t,X,this.$onCanvasActionStart),E(t,W,this.$onCanvasActionEnd),E(t,L,this.$onCanvasAction)):this.$render()}disconnectedCallback(){const{$canvas:t}=this;t&&(this.$onCanvasActionStart&&(y(t,X,this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(y(t,W,this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onCanvasAction&&(y(t,L,this.$onCanvasAction),this.$onCanvasAction=null)),super.disconnectedCallback()}$getSelections(){let t=[];return this.parentElement&&(t=Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf(_)))),t}$initSelection(t=!1,e=!1){const{initialCoverage:i,parentElement:s}=this;if(x(i)&&s){const n=this.aspectRatio||this.initialAspectRatio;let h=(e?0:this.width)||s.offsetWidth*i,a=(e?0:this.height)||s.offsetHeight*i;x(n)&&({width:h,height:a}=tt({aspectRatio:n,width:h,height:a})),this.$change(this.x,this.y,h,a),t&&this.$center(),this.$initialSelection={x:this.x,y:this.y,width:this.width,height:this.height}}}$createSelection(){const t=this.cloneNode(!0);return this.hasAttribute("id")&&t.removeAttribute("id"),t.initialCoverage=NaN,this.active=!1,this.parentElement&&this.parentElement.insertBefore(t,this.nextSibling),t}$removeSelection(t=this){if(this.parentElement){const e=this.$getSelections();if(e.length>1){const i=e.indexOf(t),s=e[i+1]||e[i-1];s&&(t.active=!1,this.parentElement.removeChild(t),s.active=!0,s.$emit(B,{x:s.x,y:s.y,width:s.width,height:s.height}))}else this.$clear()}}$handleActionStart(t){var e,i;const s=(i=(e=t.detail)===null||e===void 0?void 0:e.relatedEvent)===null||i===void 0?void 0:i.target;this.$action="",this.$actionStartTarget=s,!this.hidden&&this.multiple&&!this.active&&s===this&&this.parentElement&&(this.$getSelections().forEach(n=>{n.active=!1}),this.active=!0,this.$emit(B,{x:this.x,y:this.y,width:this.width,height:this.height}))}$handleAction(t){const{currentTarget:e,detail:i}=t;if(!e||!i)return;const{relatedEvent:s}=i;let{action:n}=i;if(!n&&this.multiple&&(n=this.$action||(s==null?void 0:s.target.action),this.$action=n),!n||this.hidden&&n!==V||this.multiple&&!this.active&&n!==H)return;const h=i.endX-i.startX,a=i.endY-i.startY,{width:l,height:c}=this;let{aspectRatio:r}=this;switch(!x(r)&&s.shiftKey&&(r=x(l)&&x(c)?l/c:1),n){case V:if(h!==0&&a!==0){const{$canvas:u}=this,m=_t(e);(this.multiple&&!this.hidden?this.$createSelection():this).$change(i.startX-m.left,i.startY-m.top,Math.abs(h),Math.abs(a),r),h<0?a<0?n=Z:a>0&&(n=G):h>0&&(a<0?n=U:a>0&&(n=K)),u&&(u.$action=n)}break;case gt:this.movable&&(this.dynamic||this.$actionStartTarget&&this.contains(this.$actionStartTarget))&&this.$move(h,a);break;case H:if(s&&this.zoomable&&(this.dynamic||this.contains(s.target))){const u=_t(e);this.$zoom(i.scale,s.pageX-u.left,s.pageY-u.top)}break;default:this.$resize(n,h,a,r)}}$handleActionEnd(){this.$action="",this.$actionStartTarget=null}$handleKeyDown(t){if(this.hidden||!this.keyboard||this.multiple&&!this.active||t.defaultPrevented)return;const{activeElement:e}=document;if(!(e&&(["INPUT","TEXTAREA"].includes(e.tagName)||["true","plaintext-only"].includes(e.contentEditable))))switch(t.key){case"Backspace":t.metaKey&&(t.preventDefault(),this.$removeSelection());break;case"Delete":t.preventDefault(),this.$removeSelection();break;case"ArrowLeft":t.preventDefault(),this.$move(-1,0);break;case"ArrowRight":t.preventDefault(),this.$move(1,0);break;case"ArrowUp":t.preventDefault(),this.$move(0,-1);break;case"ArrowDown":t.preventDefault(),this.$move(0,1);break;case"+":t.preventDefault(),this.$zoom(.1);break;case"-":t.preventDefault(),this.$zoom(-.1);break}}$center(){const{parentElement:t}=this;if(!t)return this;const e=(t.offsetWidth-this.width)/2,i=(t.offsetHeight-this.height)/2;return this.$change(e,i)}$move(t,e=t){return this.$moveTo(this.x+t,this.y+e)}$moveTo(t,e=t){return this.movable?this.$change(t,e):this}$resize(t,e=0,i=0,s=this.aspectRatio){if(!this.resizable)return this;const n=x(s),{$canvas:h}=this;let{x:a,y:l,width:c,height:r}=this;switch(t){case bt:l+=i,r-=i,r<0&&(t=vt,r=-r,l-=r),n&&(e=i*s,a+=e/2,c-=e,c<0&&(c=-c,a-=c));break;case Ct:c+=e,c<0&&(t=yt,c=-c,a-=c),n&&(i=e/s,l-=i/2,r+=i,r<0&&(r=-r,l-=r));break;case vt:r+=i,r<0&&(t=bt,r=-r,l-=r),n&&(e=i*s,a-=e/2,c+=e,c<0&&(c=-c,a-=c));break;case yt:a+=e,c-=e,c<0&&(t=Ct,c=-c,a-=c),n&&(i=e/s,l+=i/2,r-=i,r<0&&(r=-r,l-=r));break;case U:n&&(i=-e/s),l+=i,r-=i,c+=e,c<0&&r<0?(t=G,c=-c,r=-r,a-=c,l-=r):c<0?(t=Z,c=-c,a-=c):r<0&&(t=K,r=-r,l-=r);break;case Z:n&&(i=e/s),a+=e,l+=i,c-=e,r-=i,c<0&&r<0?(t=K,c=-c,r=-r,a-=c,l-=r):c<0?(t=U,c=-c,a-=c):r<0&&(t=G,r=-r,l-=r);break;case K:n&&(i=e/s),c+=e,r+=i,c<0&&r<0?(t=Z,c=-c,r=-r,a-=c,l-=r):c<0?(t=G,c=-c,a-=c):r<0&&(t=U,r=-r,l-=r);break;case G:n&&(i=-e/s),a+=e,c-=e,r+=i,c<0&&r<0?(t=U,c=-c,r=-r,a-=c,l-=r):c<0?(t=K,c=-c,a-=c):r<0&&(t=Z,r=-r,l-=r);break}return h&&h.$setAction(t),this.$change(a,l,c,r)}$zoom(t,e,i){if(!this.zoomable||t===0)return this;t<0?t=1/(1-t):t+=1;const{width:s,height:n}=this,h=s*t,a=n*t;let l=this.x,c=this.y;return $(e)&&$(i)?(l-=(h-s)*((e-this.x)/s),c-=(a-n)*((i-this.y)/n)):(l-=(h-s)/2,c-=(a-n)/2),this.$change(l,c,h,a)}$change(t,e,i=this.width,s=this.height,n=this.aspectRatio,h=!1){return this.$changing||!$(t)||!$(e)||!$(i)||!$(s)||i<0||s<0?this:(x(n)&&({width:i,height:s}=tt({aspectRatio:n,width:i,height:s},"cover")),this.precise||(t=Math.round(t),e=Math.round(e),i=Math.round(i),s=Math.round(s)),t===this.x&&e===this.y&&i===this.width&&s===this.height&&Object.is(n,this.aspectRatio)&&!h?this:(this.hidden&&(this.hidden=!1),this.$emit(B,{x:t,y:e,width:i,height:s})===!1?this:(this.$changing=!0,this.x=t,this.y=e,this.width=i,this.height=s,this.$changing=!1,this.$render())))}$reset(){const{x:t,y:e,width:i,height:s}=this.$initialSelection;return this.$change(t,e,i,s)}$clear(){return this.$change(0,0,0,0,NaN,!0),this.hidden=!0,this}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height})}$toCanvas(t){return new Promise((e,i)=>{if(!this.isConnected){i(new Error("The current element is not connected to the DOM."));return}const s=document.createElement("canvas");let{width:n,height:h}=this,a=1;if(Q(t)&&(x(t.width)||x(t.height))&&({width:n,height:h}=tt({aspectRatio:n/h,width:t.width,height:t.height}),a=n/this.width),s.width=n,s.height=h,!this.$canvas){e(s);return}const l=this.$canvas.querySelector(this.$getTagNameOf(q));if(!l){e(s);return}l.$ready().then(c=>{const r=s.getContext("2d");if(r){const[u,m,p,f,A,w]=l.$getTransform(),g=-this.x,v=-this.y,b=(g*f-p*v)/(u*f-p*m),C=(v*u-m*g)/(u*f-p*m);let S=u*b+p*C+A,T=m*b+f*C+w,O=c.naturalWidth,N=c.naturalHeight;a!==1&&(S*=a,T*=a,O*=a,N*=a);const I=O/2,P=N/2;r.fillStyle="transparent",r.fillRect(0,0,n,h),Q(t)&&mt(t.beforeDraw)&&t.beforeDraw.call(this,r,s),r.save(),r.translate(I,P),r.transform(u,m,p,f,S,T),r.translate(-I,-P),r.drawImage(c,0,0,O,N),r.restore()}e(s)}).catch(i)})}}rt.$name=_,rt.$version="2.0.0-rc.2";var Re=":host{display:flex;flex-direction:column;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([bordered]){border:1px dashed var(--theme-color)}:host([covered]){bottom:0;left:0;position:absolute;right:0;top:0}:host>span{display:flex;flex:1}:host>span+span{border-top:1px dashed var(--theme-color)}:host>span>span{flex:1}:host>span>span+span{border-left:1px dashed var(--theme-color)}";class ht extends M{constructor(){super(...arguments),this.$style=Re,this.bordered=!1,this.columns=3,this.covered=!1,this.rows=3,this.slottable=!1,this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["bordered","columns","covered","rows"])}$propertyChangedCallback(t,e,i){Object.is(i,e)||(super.$propertyChangedCallback(t,e,i),(t==="rows"||t==="columns")&&this.$nextTick(()=>{this.$render()}))}connectedCallback(){super.connectedCallback(),this.$render()}$render(){const t=this.$getShadowRoot(),e=document.createDocumentFragment();for(let i=0;i<this.rows;i+=1){const s=document.createElement("span");s.setAttribute("role","row");for(let n=0;n<this.columns;n+=1){const h=document.createElement("span");h.setAttribute("role","gridcell"),s.appendChild(h)}e.appendChild(s)}t&&(t.innerHTML="",t.appendChild(e))}}ht.$name=oe,ht.$version="2.0.0-rc.2";var Ie=':host{display:inline-block;height:1em;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em}:host:after,:host:before{background-color:var(--theme-color);content:"";display:block;position:absolute}:host:before{height:1px;left:0;top:50%;transform:translateY(-50%);width:100%}:host:after{height:100%;left:50%;top:0;transform:translateX(-50%);width:1px}:host([centered]){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}';class ct extends M{constructor(){super(...arguments),this.$style=Ie,this.centered=!1,this.slottable=!1,this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["centered"])}}ct.$name=ae,ct.$version="2.0.0-rc.2";var Pe=":host{display:block;height:100%;overflow:hidden;position:relative;width:100%}";const Zt=new WeakMap,Kt=new WeakMap,Gt=new WeakMap,Ft=new WeakMap,Me="both",ze="horizontal",qt="vertical",_e="none";class lt extends M{constructor(){super(...arguments),this.$onSelectionChange=null,this.$onSourceImageLoad=null,this.$onSourceImageTransform=null,this.$scale=1,this.$style=Pe,this.resize=qt,this.selection="",this.slottable=!1}set $image(t){Kt.set(this,t)}get $image(){return Kt.get(this)}set $sourceImage(t){Ft.set(this,t)}get $sourceImage(){return Ft.get(this)}set $canvas(t){Zt.set(this,t)}get $canvas(){return Zt.get(this)}set $selection(t){Gt.set(this,t)}get $selection(){return Gt.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["resize","selection"])}connectedCallback(){super.connectedCallback();let t=null;if(this.selection?t=this.ownerDocument.querySelector(this.selection):t=this.closest(this.$getTagNameOf(_)),Nt(t)){this.$selection=t,this.$onSelectionChange=this.$handleSelectionChange.bind(this),E(t,B,this.$onSelectionChange);const e=t.closest(this.$getTagNameOf(j));if(e){this.$canvas=e;const i=e.querySelector(this.$getTagNameOf(q));i&&(this.$sourceImage=i,this.$image=i.cloneNode(!0),this.$getShadowRoot().appendChild(this.$image),this.$onSourceImageLoad=this.$handleSourceImageLoad.bind(this),this.$onSourceImageTransform=this.$handleSourceImageTransform.bind(this),E(i.$image,Y,this.$onSourceImageLoad),E(i,$t,this.$onSourceImageTransform))}this.$render()}}disconnectedCallback(){const{$selection:t,$sourceImage:e}=this;t&&this.$onSelectionChange&&(y(t,B,this.$onSelectionChange),this.$onSelectionChange=null),e&&this.$onSourceImageLoad&&(y(e.$image,Y,this.$onSourceImageLoad),this.$onSourceImageLoad=null),e&&this.$onSourceImageTransform&&(y(e,$t,this.$onSourceImageTransform),this.$onSourceImageTransform=null),super.disconnectedCallback()}$handleSelectionChange(t){this.$render(t.detail)}$handleSourceImageLoad(){const{$image:t,$sourceImage:e}=this,i=t.getAttribute("src"),s=e.getAttribute("src");s&&s!==i&&(t.setAttribute("src",s),t.$ready(()=>{setTimeout(()=>{this.$render()},50)}))}$handleSourceImageTransform(t){this.$render(void 0,t.detail.matrix)}$render(t,e){const{$canvas:i,$selection:s}=this;!t&&!s.hidden&&(t=s),(!t||t.x===0&&t.y===0&&t.width===0&&t.height===0)&&(t={x:0,y:0,width:i.offsetWidth,height:i.offsetHeight});const{x:n,y:h,width:a,height:l}=t,c={},{clientWidth:r,clientHeight:u}=this;let m=r,p=u,f=NaN;switch(this.resize){case Me:f=1,m=a,p=l,c.width=a,c.height=l;break;case ze:f=l>0?u/l:0,m=a*f,c.width=m;break;case qt:f=a>0?r/a:0,p=l*f,c.height=p;break;case _e:default:r>0?f=a>0?r/a:0:u>0&&(f=l>0?u/l:0)}this.$scale=f,this.$setStyles(c),this.$sourceImage&&this.$transformImageByOffset(e??this.$sourceImage.$getTransform(),-n,-h)}$transformImageByOffset(t,e,i){const{$image:s,$scale:n,$sourceImage:h}=this;if(h&&s&&n>=0){const[a,l,c,r,u,m]=t,p=(e*r-c*i)/(a*r-c*l),f=(i*a-l*e)/(a*r-c*l),A=a*p+c*f+u,w=l*p+r*f+m;s.$ready(g=>{this.$setStyles.call(s,{width:g.naturalWidth*n,height:g.naturalHeight*n})}),s.$setTransform(a,l,c,r,A*n,w*n)}}}lt.$name=ce,lt.$version="2.0.0-rc.2";/*! Cropper.js v2.0.0-rc.2 | (c) 2015-present Chen Fengyuan | MIT */st.$define(),ct.$define(),ht.$define(),ot.$define(),nt.$define(),rt.$define(),at.$define(),lt.$define();const Vt=d.defineComponent({__name:"CropperCanvas",props:{background:{type:Boolean,default:!1}},setup(o){st.$define();const t=d.h("cropper-canvas",{background:o.background,style:"height: 500px"});return(e,i)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(t)),null,{default:d.withCtx(()=>[d.renderSlot(e.$slots,"default")]),_:3}))}}),Jt=d.defineComponent({__name:"CropperImage",props:{src:{},alt:{},initialCenterSize:{default:"contain"},rotatable:{type:Boolean,default:!1},scalable:{type:Boolean,default:!1},skewable:{type:Boolean,default:!1},slottable:{type:Boolean,default:!1},translatable:{type:Boolean,default:!1}},setup(o){nt.$define();const t=d.h("cropper-image",{src:o.src,alt:o.alt,initialCenterSize:o.initialCenterSize,rotatable:o.rotatable,scalable:o.scalable,skewable:o.skewable,slottable:o.slottable,translatable:o.translatable});return(e,i)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(t))))}}),Qt=d.defineComponent({__name:"CropperShade",props:{x:{default:0},y:{default:0},width:{default:0},height:{default:0},slottable:{type:Boolean,default:!1},themeColor:{default:"rgba(0, 0, 0, 0.65)"},hidden:{type:Boolean,default:!1}},setup(o){at.$define();const t=d.h("cropper-shade",{x:o.x,y:o.y,width:o.width,height:o.height,slottable:o.slottable,themeColor:o.themeColor,hidden:o.hidden});return(e,i)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(t))))}}),te=d.defineComponent({__name:"CropperHandle",props:{action:{default:"none"},plain:{type:Boolean,default:!1},slottable:{type:Boolean,default:!1},themeColor:{default:"rgba(51, 153, 255, 0.5)"}},setup(o){ot.$define();const t=d.h("cropper-handle",{action:o.action,plain:o.plain,slottable:o.slottable,themeColor:o.themeColor});return(e,i)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(t))))}}),ee=d.defineComponent({__name:"CropperSelection",props:{x:{default:0},y:{default:0},width:{default:0},height:{default:0},aspectRatio:{},initialAspectRatio:{},initialCoverage:{},dynamic:{type:Boolean,default:!1},movable:{type:Boolean,default:!1},resizable:{type:Boolean,default:!1},zoomable:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},keyboard:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},precise:{type:Boolean,default:!1}},setup(o,{expose:t}){rt.$define();const e=d.h("cropper-selection",{x:o.x,y:o.y,width:o.width,height:o.height,aspectRatio:o.aspectRatio,initialAspectRatio:o.initialAspectRatio,initialCoverage:o.initialCoverage,dynamic:o.dynamic,movable:o.movable,resizable:o.resizable,zoomable:o.zoomable,multiple:o.multiple,keyboard:o.keyboard,outlined:o.outlined,precise:o.precise}),i=d.useTemplateRef("sel");return t({selection:i}),(s,n)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(e)),{ref:"sel"},{default:d.withCtx(()=>[d.renderSlot(s.$slots,"default")]),_:3},512))}}),ie=d.defineComponent({__name:"CropperCrosshair",props:{centered:{type:Boolean,default:!1}},setup(o){ct.$define();const t=d.h("cropper-crosshair",{centered:o.centered});return(e,i)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(t))))}}),se=d.defineComponent({__name:"CropperGrid",props:{role:{default:"grid"},covered:{type:Boolean,default:!1}},setup(o){ht.$define();const t=d.h("cropper-grid",{role:o.role,covered:o.covered});return(e,i)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(t))))}}),ne=d.defineComponent({__name:"CropperViewer",props:{resize:{default:"vertical"},selection:{default:""}},setup(o){lt.$define();const t=d.h("cropper-viewer",{resize:o.resize,selection:o.selection});return(e,i)=>(d.openBlock(),d.createBlock(d.resolveDynamicComponent(d.unref(t))))}}),De={install:o=>{o.component("CropperCanvas",Vt),o.component("CropperImage",Jt),o.component("CropperShade",Qt),o.component("CropperHandle",te),o.component("CropperSelection",ee),o.component("CropperCrosshair",ie),o.component("CropperGrid",se),o.component("CropperViewer",ne)}};k.CropperCanvas=Vt,k.CropperCrosshair=ie,k.CropperGrid=se,k.CropperHandle=te,k.CropperImage=Jt,k.CropperSelection=ee,k.CropperShade=Qt,k.CropperViewer=ne,k.default=De,Object.defineProperties(k,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cropperjs2",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "files": [
     "dist"