@anzusystems/common-admin 2.0.0-rc.1 → 2.0.0-rc.10

package/dist/vendor/@cropper/element-selection/dist/element-selection.esm.raw.js

@@ -1,44 +1,113 @@
-import { ACTION_MOVE as e, ACTION_RESIZE_EAST as t, ACTION_RESIZE_NORTH as n, ACTION_RESIZE_NORTHEAST as r, ACTION_RESIZE_NORTHWEST as i, ACTION_RESIZE_SOUTH as a, ACTION_RESIZE_SOUTHEAST as o, ACTION_RESIZE_SOUTHWEST as s, ACTION_RESIZE_WEST as c, ACTION_SCALE as l, ACTION_SELECT as u, ACTION_TRANSFORM as d, CROPPER_CANVAS as f, CROPPER_IMAGE as p, CROPPER_SELECTION as m, EVENT_ACTION as h, EVENT_ACTION_END as g, EVENT_ACTION_START as _, EVENT_CHANGE as v, EVENT_KEYDOWN as y, getAdjustedSizes as b, getComposedPathTarget as x, getOffset as S, isFunction as C, isNumber as w, isPlainObject as T, isPositiveNumber as E, off as D, on as O } from "../../utils/dist/utils.esm.raw.js";
-import k from "../../element/dist/element.esm.raw.js";
-//#region node_modules/@cropper/element-selection/dist/element-selection.esm.raw.js
-var A = ":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}", j = /* @__PURE__ */ new WeakMap(), M = class extends k {
+import e from "../../element/dist/element.esm.raw.js";
+import { ACTION_MOVE as t, ACTION_RESIZE_EAST as n, ACTION_RESIZE_NORTH as r, ACTION_RESIZE_NORTHEAST as i, ACTION_RESIZE_NORTHWEST as a, ACTION_RESIZE_SOUTH as o, ACTION_RESIZE_SOUTHEAST as s, ACTION_RESIZE_SOUTHWEST as c, ACTION_RESIZE_WEST as l, ACTION_SCALE as u, ACTION_SELECT as d, ACTION_TRANSFORM as f, CROPPER_CANVAS as p, CROPPER_IMAGE as m, CROPPER_SELECTION as h, EVENT_ACTION as g, EVENT_ACTION_END as _, EVENT_ACTION_START as v, EVENT_CHANGE as y, EVENT_KEYDOWN as b, exceedsInset as x, getAdjustedSizes as S, getComposedPathTarget as C, getOffset as w, isFunction as T, isNumber as E, isPlainObject as D, isPositiveNumber as O, off as k, on as A } from "../../utils/dist/utils.esm.raw.js";
+// node_modules/@cropper/element-selection/dist/element-selection.esm.raw.js
+function j(e, t, n, r) {
+	function i(e) {
+		return e instanceof n ? e : new n(function(t) {
+			t(e);
+		});
+	}
+	return new (n ||= Promise)(function(n, a) {
+		function o(e) {
+			try {
+				c(r.next(e));
+			} catch (e) {
+				a(e);
+			}
+		}
+		function s(e) {
+			try {
+				c(r.throw(e));
+			} catch (e) {
+				a(e);
+			}
+		}
+		function c(e) {
+			e.done ? n(e.value) : i(e.value).then(o, s);
+		}
+		c((r = r.apply(e, t || [])).next());
+	});
+}
+var M = ":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}", N = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap();
+function F(e, t, n) {
+	let r = parseFloat(e);
+	return Number.isNaN(r) ? 0 : e.trim().endsWith("%") ? r / 100 * t : r * n;
+}
+function I(e) {
+	let [t, n = t, r = t, i = n] = e;
+	return [
+		t,
+		n,
+		r,
+		i
+	];
+}
+function L(e, t, n, r) {
+	let [i, a = i] = e.split("/").map((e) => {
+		let t = e.trim().split(/\s+/).filter(Boolean).slice(0, 4);
+		return t.length > 0 ? t : ["0"];
+	}), o = I(i).map((e) => F(e, t, r)), s = I(a).map((e) => F(e, n, r)), c = o.map((e, t) => [Math.max(e, 0), Math.max(s[t], 0)]), [l, u, d, f] = c, p = Math.min(1, t / (l[0] + u[0] || 1), t / (f[0] + d[0] || 1), n / (l[1] + f[1] || 1), n / (u[1] + d[1] || 1));
+	return p < 1 ? c.map(([e, t]) => [e * p, t * p]) : c;
+}
+var R = class extends e {
 	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 = A, this.$initialSelection = {
+		super(...arguments), this.$onCanvasAction = null, this.$onCanvasActionStart = null, this.$onCanvasActionEnd = null, this.$onDocumentKeyDown = null, this.$action = "", this.$actionStartTarget = null, this.$resizeStart = null, this.$changing = !1, this.$insetRejected = !1, this.$style = M, 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;
+		}, this.$changingAroundCenter = !1, this.x = 0, this.y = 0, this.width = 0, this.height = 0, this.aspectRatio = NaN, this.borderRadius = "", this.initialAspectRatio = NaN, this.initialCoverage = NaN, this.active = !1, this.linked = !1, this.dynamic = !1, this.movable = !1, this.maxInset = "auto", this.minInset = "auto", this.resizable = !1, this.resizeAroundCenter = !1, this.zoomable = !1, this.zoomAroundCenter = !1, this.multiple = !1, this.keyboard = !1, this.outlined = !1, this.precise = !1;
 	}
 	set $canvas(e) {
-		j.set(this, e);
+		N.set(this, e);
 	}
 	get $canvas() {
-		return j.get(this);
+		return N.get(this);
+	}
+	set $image(e) {
+		P.set(this, e);
+	}
+	get $image() {
+		return P.get(this);
 	}
 	static get observedAttributes() {
 		return super.observedAttributes.concat([
 			"active",
 			"aspect-ratio",
+			"border-radius",
 			"dynamic",
 			"height",
 			"initial-aspect-ratio",
 			"initial-coverage",
 			"keyboard",
 			"linked",
+			"max-inset",
+			"min-inset",
 			"movable",
 			"multiple",
 			"outlined",
 			"precise",
 			"resizable",
+			"resize-around-center",
 			"width",
 			"x",
 			"y",
+			"zoom-around-center",
 			"zoomable"
 		]);
 	}
 	$propertyChangedCallback(e, t, n) {
 		if (!Object.is(n, t)) switch (super.$propertyChangedCallback(e, t, n), e) {
+			case "borderRadius":
+				this.$nextTick(() => {
+					this.$render(), this.$emit(y, {
+						x: this.x,
+						y: this.y,
+						width: this.width,
+						height: this.height
+					});
+				});
+				break;
 			case "x":
 			case "y":
 			case "width":
@@ -55,12 +124,12 @@ var A = ":host{display:block;left:0;position:relative;right:0}:host([outlined]){
 				break;
 			case "initialCoverage":
 				this.$nextTick(() => {
-					E(n) && n <= 1 && this.$initSelection(!0, !0);
+					O(n) && n <= 1 && this.$initSelection(!0, O(t));
 				});
 				break;
 			case "keyboard":
 				this.$nextTick(() => {
-					this.$canvas && (n ? this.$onDocumentKeyDown || (this.$onDocumentKeyDown = this.$handleKeyDown.bind(this), O(this.ownerDocument, y, this.$onDocumentKeyDown)) : this.$onDocumentKeyDown &&= (D(this.ownerDocument, y, this.$onDocumentKeyDown), null));
+					this.$canvas && (n ? this.$onDocumentKeyDown || (this.$onDocumentKeyDown = this.$handleKeyDown.bind(this), A(this.ownerDocument, b, this.$onDocumentKeyDown)) : this.$onDocumentKeyDown &&= (k(this.ownerDocument, b, this.$onDocumentKeyDown), null));
 				});
 				break;
 			case "multiple":
@@ -69,7 +138,7 @@ var A = ":host{display:block;left:0;position:relative;right:0}:host([outlined]){
 						let e = this.$getSelections();
 						n ? (e.forEach((e) => {
 							e.active = !1;
-						}), this.active = !0, this.$emit(v, {
+						}), this.active = !0, this.$emit(y, {
 							x: this.x,
 							y: this.y,
 							width: this.width,
@@ -90,35 +159,61 @@ var A = ":host{display:block;left:0;position:relative;right:0}:host([outlined]){
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		let e = this.closest(this.$getTagNameOf(f));
-		e ? (this.$canvas = e, 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), O(e, _, this.$onCanvasActionStart), O(e, g, this.$onCanvasActionEnd), O(e, h, this.$onCanvasAction)) : this.$render();
+		let e = this.closest(this.$getTagNameOf(p));
+		if (e) {
+			this.$canvas = e;
+			let t = e.querySelector(this.$getTagNameOf(m));
+			t && (this.$image = 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), A(e, v, this.$onCanvasActionStart), A(e, _, this.$onCanvasActionEnd), A(e, g, this.$onCanvasAction);
+		} else this.$render();
 	}
 	disconnectedCallback() {
 		let { $canvas: e } = this;
-		e && (this.$onCanvasActionStart &&= (D(e, _, this.$onCanvasActionStart), null), this.$onCanvasActionEnd &&= (D(e, g, this.$onCanvasActionEnd), null), this.$onCanvasAction &&= (D(e, h, this.$onCanvasAction), null)), super.disconnectedCallback();
+		e && (this.$onCanvasActionStart &&= (k(e, v, this.$onCanvasActionStart), null), this.$onCanvasActionEnd &&= (k(e, _, this.$onCanvasActionEnd), null), this.$onCanvasAction &&= (k(e, g, this.$onCanvasAction), null)), super.disconnectedCallback();
+	}
+	$exceedsInset(e, t, n, r) {
+		let { parentElement: i, maxInset: a, minInset: o } = this;
+		if (!i || n === 0 && r === 0 || a === "auto" && o === "auto") return !1;
+		let s = i.getBoundingClientRect();
+		return x([
+			t,
+			s.width - (e + n),
+			s.height - (t + r),
+			e
+		], a, o, i, s);
 	}
 	$getSelections() {
 		let e = [];
-		return this.parentElement && (e = Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf(m)))), e;
+		return this.parentElement && (e = Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf(h)))), e;
 	}
-	$initSelection(e = !1, t = !1) {
-		let { initialCoverage: n, parentElement: r } = this;
-		if (E(n) && r) {
-			let i = this.aspectRatio || this.initialAspectRatio, a = (t ? 0 : this.width) || r.offsetWidth * n, o = (t ? 0 : this.height) || r.offsetHeight * n;
-			E(i) && ({width: a, height: o} = b({
-				aspectRatio: i,
-				width: a,
-				height: o
-			})), this.$change(this.x, this.y, a, o), e && this.$center(), this.$initialSelection = {
-				x: this.x,
-				y: this.y,
-				width: this.width,
-				height: this.height
-			};
-		}
+	$initSelection() {
+		return j(this, arguments, void 0, function* (e = !1, t = !1) {
+			let { initialCoverage: n, parentElement: r } = this;
+			if (O(n) && r) {
+				let { $canvas: i } = this, a = this.$image || null;
+				if (a) {
+					try {
+						yield a.$ready();
+					} catch {
+						a = null;
+					}
+					if (this.parentElement !== r || this.initialCoverage !== n) return;
+				}
+				let o = (a || i || r).getBoundingClientRect(), s = (i || r).getBoundingClientRect(), c = a ? o.left - s.left : 0, l = a ? o.top - s.top : 0, u = this.aspectRatio || this.initialAspectRatio, d = (t ? 0 : this.width) || o.width * n, f = (t ? 0 : this.height) || o.height * n;
+				O(u) && ({width: d, height: f} = S({
+					aspectRatio: u,
+					width: d,
+					height: f
+				})), e ? this.$change(c + (o.width - d) / 2, l + (o.height - f) / 2, d, f) : this.$change(this.x, this.y, d, f), this.$initialSelection = {
+					x: this.x,
+					y: this.y,
+					width: this.width,
+					height: this.height
+				};
+			}
+		});
 	}
 	$createSelection() {
 		let e = this.cloneNode(!0);
@@ -129,7 +224,7 @@ var A = ":host{display:block;left:0;position:relative;right:0}:host([outlined]){
 			let t = this.$getSelections();
 			if (t.length > 1) {
 				let n = t.indexOf(e), r = t[n + 1] || t[n - 1];
-				r && (e.active = !1, this.parentElement.removeChild(e), r.active = !0, r.$emit(v, {
+				r && (e.active = !1, this.parentElement.removeChild(e), r.active = !0, r.$emit(y, {
 					x: r.x,
 					y: r.y,
 					width: r.width,
@@ -140,45 +235,69 @@ var A = ":host{display:block;left:0;position:relative;right:0}:host([outlined]){
 	}
 	$handleActionStart(e) {
 		if (e.defaultPrevented) return;
-		let t = e.detail?.relatedEvent?.target;
-		this.$action = "", this.$actionStartTarget = t, !this.hidden && this.multiple && !this.active && t === this && this.parentElement && (this.$getSelections().forEach((e) => {
+		let { action: t, relatedEvent: n } = e.detail || {}, r = n?.target;
+		if (this.$action = "", this.$actionStartTarget = r, this.$resizeStart = typeof t == "string" && t.endsWith("-resize") && n ? {
+			action: t,
+			pageX: n.pageX,
+			pageY: n.pageY,
+			x: this.x,
+			y: this.y,
+			width: this.width,
+			height: this.height
+		} : null, t === "select" && !this.resizable && (!this.multiple || this.active) && O(this.width) && O(this.height) && n && e.currentTarget) {
+			let t = w(e.currentTarget);
+			(this.multiple && !this.hidden ? this.$createSelection() : this).$change(n.pageX - t.left, n.pageY - t.top, this.width, this.height);
+		}
+		!this.hidden && this.multiple && !this.active && r === this && this.parentElement && (this.$getSelections().forEach((e) => {
 			e.active = !1;
-		}), this.active = !0, this.$emit(v, {
+		}), this.active = !0, this.$emit(y, {
 			x: this.x,
 			y: this.y,
 			width: this.width,
 			height: this.height
 		}));
 	}
-	$handleAction(t) {
-		let { currentTarget: n, detail: a } = t;
-		if (t.defaultPrevented || !n || !a) return;
-		let { relatedEvent: c } = a, { action: f } = a, p = c ? x(c) : null;
-		if (!f && this.multiple && (f = this.$action || p?.action, this.$action = f), !f || this.hidden && f !== "select" || this.multiple && !this.active && f !== "scale") return;
-		let { width: m, height: h } = this, g = a.endX - a.startX, _ = a.endY - a.startY, { aspectRatio: v } = this;
-		switch (!E(v) && c.shiftKey && (v = E(m) && E(h) ? m / h : 1), f) {
-			case u:
+	$handleAction(e) {
+		let { currentTarget: n, detail: r } = e;
+		if (e.defaultPrevented || !n || !r) return;
+		let { relatedEvent: o } = r, { action: l } = r, p = o ? C(o) : null;
+		if (!l && this.multiple && (l = this.$action || p?.action, this.$action = l), !l || this.hidden && l !== "select" || this.multiple && !this.active && l !== "scale") return;
+		let { width: m, height: h } = this, g = r.endX - r.startX, _ = r.endY - r.startY, { aspectRatio: v } = this, y = null;
+		if (this.$resizeStart && l.endsWith("-resize")) {
+			let e = this.$resizeStart;
+			l = e.action, g = r.endX - e.pageX, _ = r.endY - e.pageY, y = e;
+		}
+		if (!O(v) && o.shiftKey) {
+			let e = y?.width ?? m, t = y?.height ?? h;
+			v = O(e) && O(t) ? e / t : 1;
+		}
+		switch (l) {
+			case d:
+				if (!this.resizable && O(this.width) && O(this.height)) break;
 				if (g !== 0 || _ !== 0) {
 					g === 0 ? g = _ : _ === 0 && (_ = g);
-					let { $canvas: e } = this, t = S(n);
-					(this.multiple && !this.hidden ? this.$createSelection() : this).$change(a.startX - t.left, a.startY - t.top, Math.abs(g), Math.abs(_), v), g < 0 ? _ < 0 ? f = i : _ > 0 && (f = s) : g > 0 && (_ < 0 ? f = r : _ > 0 && (f = o)), e && (e.$action = f);
+					let { $canvas: e } = this, t = w(n);
+					(this.multiple && !this.hidden ? this.$createSelection() : this).$change(r.startX - t.left, r.startY - t.top, Math.abs(g), Math.abs(_), v), g < 0 ? _ < 0 ? l = a : _ > 0 && (l = c) : g > 0 && (_ < 0 ? l = i : _ > 0 && (l = s)), e && (e.$action = l);
 				}
 				break;
-			case e:
+			case t:
 				this.movable && (this.dynamic || this.$actionStartTarget && this.contains(this.$actionStartTarget)) && this.$move(g, _);
 				break;
-			case l:
-			case d:
-				if (c && this.zoomable && (this.dynamic || this.contains(c.target))) {
-					let e = S(n);
-					this.$zoom(a.scale, c.pageX - e.left, c.pageY - e.top);
+			case u:
+			case f:
+				if (o && this.zoomable && (this.dynamic || this.contains(o.target))) {
+					if (this.zoomAroundCenter) this.$zoom(r.scale);
+					else {
+						let e = w(n);
+						this.$zoom(r.scale, o.pageX - e.left, o.pageY - e.top);
+					}
 				}
 				break;
-			default: this.$resize(f, g, _, v);
+			default: this.$resize(l, g, _, v);
 		}
 	}
 	$handleActionEnd() {
-		this.$action = "", this.$actionStartTarget = null;
+		this.$action = "", this.$actionStartTarget = null, this.$resizeStart = null;
 	}
 	$handleKeyDown(e) {
 		if (e.defaultPrevented || this.hidden || !this.keyboard || this.multiple && !this.active) return;
@@ -218,54 +337,74 @@ var A = ":host{display:block;left:0;position:relative;right:0}:host([outlined]){
 		return this.$moveTo(this.x + e, this.y + t);
 	}
 	$moveTo(e, t = e) {
-		return this.movable ? this.$change(e, t) : this;
+		return this.movable && (this.$change(e, t), this.$insetRejected && e !== this.x && t !== this.y && (this.$change(e, this.y), this.$change(this.x, t))), this;
 	}
-	$resize(e, l = 0, u = 0, d = this.aspectRatio) {
+	$resize(e, t = 0, u = 0, d = this.aspectRatio) {
 		if (!this.resizable) return this;
-		let f = E(d), { $canvas: p } = this, { x: m, y: h, width: g, height: _ } = this;
+		let f = O(d), { $canvas: p } = this, { x: m, y: h, width: g, height: _ } = this.$resizeStart || this;
 		switch (e) {
-			case n:
-				h += u, _ -= u, _ < 0 && (e = a, _ = -_, h -= _), f && (l = u * d, m += l / 2, g -= l, g < 0 && (g = -g, m -= g));
-				break;
-			case t:
-				g += l, g < 0 && (e = c, g = -g, m -= g), f && (u = l / d, h -= u / 2, _ += u, _ < 0 && (_ = -_, h -= _));
+			case r:
+				h += u, _ -= u, _ < 0 && (e = o, _ = -_, h -= _), f && (t = u * d, m += t / 2, g -= t, g < 0 && (g = -g, m -= g));
 				break;
-			case a:
-				_ += u, _ < 0 && (e = n, _ = -_, h -= _), f && (l = u * d, m -= l / 2, g += l, g < 0 && (g = -g, m -= g));
+			case n:
+				g += t, g < 0 && (e = l, g = -g, m -= g), f && (u = t / d, h -= u / 2, _ += u, _ < 0 && (_ = -_, h -= _));
 				break;
-			case c:
-				m += l, g -= l, g < 0 && (e = t, g = -g, m -= g), f && (u = l / d, h += u / 2, _ -= u, _ < 0 && (_ = -_, h -= _));
+			case o:
+				_ += u, _ < 0 && (e = r, _ = -_, h -= _), f && (t = u * d, m -= t / 2, g += t, g < 0 && (g = -g, m -= g));
 				break;
-			case r:
-				f && (u = -l / d), h += u, _ -= u, g += l, g < 0 && _ < 0 ? (e = s, g = -g, _ = -_, m -= g, h -= _) : g < 0 ? (e = i, g = -g, m -= g) : _ < 0 && (e = o, _ = -_, h -= _);
+			case l:
+				m += t, g -= t, g < 0 && (e = n, g = -g, m -= g), f && (u = t / d, h += u / 2, _ -= u, _ < 0 && (_ = -_, h -= _));
 				break;
 			case i:
-				f && (u = l / d), m += l, h += u, g -= l, _ -= u, g < 0 && _ < 0 ? (e = o, g = -g, _ = -_, m -= g, h -= _) : g < 0 ? (e = r, g = -g, m -= g) : _ < 0 && (e = s, _ = -_, h -= _);
+				f && (u = -t / d), h += u, _ -= u, g += t, g < 0 && _ < 0 ? (e = c, g = -g, _ = -_, m -= g, h -= _) : g < 0 ? (e = a, g = -g, m -= g) : _ < 0 && (e = s, _ = -_, h -= _);
 				break;
-			case o:
-				f && (u = l / d), g += l, _ += u, g < 0 && _ < 0 ? (e = i, g = -g, _ = -_, m -= g, h -= _) : g < 0 ? (e = s, g = -g, m -= g) : _ < 0 && (e = r, _ = -_, h -= _);
+			case a:
+				f && (u = t / d), m += t, h += u, g -= t, _ -= u, g < 0 && _ < 0 ? (e = s, g = -g, _ = -_, m -= g, h -= _) : g < 0 ? (e = i, g = -g, m -= g) : _ < 0 && (e = c, _ = -_, h -= _);
+				break;
+			case s:
+				f && (u = t / d), g += t, _ += u, g < 0 && _ < 0 ? (e = a, g = -g, _ = -_, m -= g, h -= _) : g < 0 ? (e = c, g = -g, m -= g) : _ < 0 && (e = i, _ = -_, h -= _);
 				break;
-			case s: f && (u = -l / d), m += l, g -= l, _ += u, g < 0 && _ < 0 ? (e = r, g = -g, _ = -_, m -= g, h -= _) : g < 0 ? (e = o, g = -g, m -= g) : _ < 0 && (e = i, _ = -_, h -= _);
+			case c: f && (u = -t / d), m += t, g -= t, _ += u, g < 0 && _ < 0 ? (e = i, g = -g, _ = -_, m -= g, h -= _) : g < 0 ? (e = s, g = -g, m -= g) : _ < 0 && (e = a, _ = -_, h -= _);
+		}
+		p && p.$setAction(e);
+		let v = this.$changingAroundCenter;
+		this.$changingAroundCenter = this.resizeAroundCenter || v;
+		try {
+			return this.$change(m, h, g, _);
+		} finally {
+			this.$changingAroundCenter = v;
 		}
-		return p && p.$setAction(e), this.$change(m, h, g, _);
 	}
 	$zoom(e, t, n) {
 		if (!this.zoomable || e === 0) return this;
 		e < 0 ? e = 1 / (1 - e) : e += 1;
 		let { width: r, height: i } = this, a = r * e, o = i * e, s = this.x, c = this.y;
-		return w(t) && w(n) ? (s -= (a - r) * ((t - this.x) / r), c -= (o - i) * ((n - this.y) / i)) : (s -= (a - r) / 2, c -= (o - i) / 2), this.$change(s, c, a, o);
+		E(t) && E(n) ? (s -= (a - r) * ((t - this.x) / r), c -= (o - i) * ((n - this.y) / i)) : (s -= (a - r) / 2, c -= (o - i) / 2);
+		let l = this.$changingAroundCenter;
+		this.$changingAroundCenter = this.zoomAroundCenter && !(E(t) && E(n)) || l;
+		try {
+			return this.$change(s, c, a, o);
+		} finally {
+			this.$changingAroundCenter = l;
+		}
 	}
 	$change(e, t, n = this.width, r = this.height, i = this.aspectRatio, a = !1) {
-		return this.$changing || !w(e) || !w(t) || !w(n) || !w(r) || n < 0 || r < 0 || (E(i) && ({width: n, height: r} = b({
+		if (this.$insetRejected = !1, this.$changing || !E(e) || !E(t) || !E(n) || !E(r) || n < 0 || r < 0) return this;
+		if (O(i) && ({width: n, height: r} = S({
 			aspectRatio: i,
 			width: n,
 			height: r
-		}, "cover")), this.precise || (e = Math.round(e), t = Math.round(t), n = Math.round(n), r = Math.round(r)), e === this.x && t === this.y && n === this.width && r === this.height && Object.is(i, this.aspectRatio) && !a) || (this.hidden &&= !1, this.$emit("change", {
+		}, "cover")), this.$changingAroundCenter) {
+			this.precise || (n = Math.round(n), r = Math.round(r), (n - this.width) % 2 != 0 && (n += n < this.width ? -1 : 1), (r - this.height) % 2 != 0 && (r += r < this.height ? -1 : 1));
+			let i = this.$resizeStart || this;
+			e = i.x + (i.width - n) / 2, t = i.y + (i.height - r) / 2;
+		} else this.precise || (n = Math.round(n), r = Math.round(r), e = Math.round(e), t = Math.round(t));
+		return e === this.x && t === this.y && n === this.width && r === this.height && Object.is(i, this.aspectRatio) && !a ? this : this.$exceedsInset(e, t, n, r) ? (this.$insetRejected = !0, this) : (this.hidden &&= !1, this.$emit("change", {
 			x: e,
 			y: t,
 			width: n,
 			height: r
-		}) === !1) ? this : (this.$changing = !0, this.x = e, this.y = t, this.width = n, this.height = r, this.$changing = !1, this.$render());
+		}) === !1 ? this : (this.$changing = !0, this.x = e, this.y = t, this.width = n, this.height = r, this.$changing = !1, this.$render()));
 	}
 	$reset() {
 		let { x: e, y: t, width: n, height: r } = this.$initialSelection;
@@ -278,7 +417,8 @@ var A = ":host{display:block;left:0;position:relative;right:0}:host([outlined]){
 		return this.$setStyles({
 			transform: `translate(${this.x}px, ${this.y}px)`,
 			width: this.width,
-			height: this.height
+			height: this.height,
+			borderRadius: this.borderRadius
 		});
 	}
 	$toCanvas(e) {
@@ -288,7 +428,7 @@ var A = ":host{display:block;left:0;position:relative;right:0}:host([outlined]){
 				return;
 			}
 			let r = document.createElement("canvas"), { width: i, height: a } = this, o = 1;
-			if (T(e) && (E(e.width) || E(e.height)) && ({width: i, height: a} = b({
+			if (D(e) && (O(e.width) || O(e.height)) && ({width: i, height: a} = S({
 				aspectRatio: i / a,
 				width: e.width,
 				height: e.height
@@ -296,22 +436,27 @@ var A = ":host{display:block;left:0;position:relative;right:0}:host([outlined]){
 				t(r);
 				return;
 			}
-			let s = this.$canvas.querySelector(this.$getTagNameOf(p));
+			let { $image: s } = this;
 			s ? s.$ready().then((n) => {
 				let c = r.getContext("2d");
 				if (c) {
 					let [t, l, u, d, f, p] = s.$getTransform(), m = -this.x, h = -this.y, g = (m * d - u * h) / (t * d - u * l), _ = (h * t - l * m) / (t * d - u * l), v = t * g + u * _ + f, y = l * g + d * _ + p, b = n.naturalWidth, x = n.naturalHeight;
 					o !== 1 && (v *= o, y *= o, b *= o, x *= o);
-					let S = b / 2, w = x / 2;
-					c.fillStyle = "transparent", c.fillRect(0, 0, i, a), T(e) && C(e.beforeDraw) && e.beforeDraw.call(this, c, r), c.save(), c.translate(S, w), c.transform(t, l, u, d, v, y), c.translate(-S, -w), c.drawImage(n, 0, 0, b, x), c.restore();
+					let S = b / 2, C = x / 2;
+					c.fillStyle = "transparent", c.fillRect(0, 0, i, a), D(e) && T(e.beforeDraw) && e.beforeDraw.call(this, c, r), c.save();
+					let w = L(this.borderRadius, i, a, o);
+					if (w.some(([e, t]) => e > 0 && t > 0)) {
+						let [[e, t], [n, r], [o, s], [l, u]] = w, d = Math.PI / 2;
+						c.beginPath(), c.moveTo(e, 0), c.lineTo(i - n, 0), c.ellipse(i - n, r, n, r, 0, -d, 0), c.lineTo(i, a - s), c.ellipse(i - o, a - s, o, s, 0, 0, d), c.lineTo(l, a), c.ellipse(l, a - u, l, u, 0, d, Math.PI), c.lineTo(0, t), c.ellipse(e, t, e, t, 0, Math.PI, Math.PI + d), c.closePath(), c.clip();
+					}
+					c.translate(S, C), c.transform(t, l, u, d, v, y), c.translate(-S, -C), c.drawImage(n, 0, 0, b, x), c.restore();
 				}
 				t(r);
 			}).catch(n) : t(r);
 		});
 	}
 };
-M.$name = m, M.$version = "2.2.0";
-//#endregion
-export { M as default };
+R.$name = h, R.$version = "2.3.1";
+export { R as default };
 
 //# sourceMappingURL=element-selection.esm.raw.js.map