@webority/ui-elements 0.34.0 → 0.35.1

package/dist/WuiImageCrop-1yaAONTk.js

@@ -0,0 +1,462 @@
+import { t as e } from "./elementBase-Bg1xpvup.js";
+var t = 4096, n = [
+	.92,
+	.8,
+	.65,
+	.5
+], r = .8, i = 8;
+function a(e) {
+	if (e == null || e === "" || e === "free") return null;
+	let t = typeof e == "number" ? e : Number(e);
+	return Number.isFinite(t) && t > 0 ? t : null;
+}
+function o(e, t, n) {
+	if (!n) return {
+		x: 0,
+		y: 0,
+		w: e,
+		h: t
+	};
+	let r = e, i = r / n;
+	return i > t && (i = t, r = i * n), {
+		x: (e - r) / 2,
+		y: (t - i) / 2,
+		w: r,
+		h: i
+	};
+}
+function s(e, t, n) {
+	return {
+		...e,
+		x: Math.min(Math.max(e.x, 0), Math.max(t - e.w, 0)),
+		y: Math.min(Math.max(e.y, 0), Math.max(n - e.h, 0))
+	};
+}
+function c(e, t, n, r, i) {
+	return s({
+		...e,
+		x: e.x + t,
+		y: e.y + n
+	}, r, i);
+}
+function l(e, t) {
+	return Math.min(32, e, t);
+}
+function u(e, t) {
+	return t.w / e.w;
+}
+function d(e, t) {
+	return Math.max(4, u(e, t));
+}
+function f(e, t, n, r, i) {
+	let a = Math.min(Math.max(n, 1), d(e, t)), o = e.h / e.w, c = Math.min(r, i / o), u = Math.min(Math.max(l(r, i), l(r, i) / o), c), f = Math.min(Math.max(t.w / a, u), c), p = f * o, m = e.x + e.w / 2, h = e.y + e.h / 2;
+	return s({
+		x: m - f / 2,
+		y: h - p / 2,
+		w: f,
+		h: p
+	}, r, i);
+}
+var p = [
+	"nw",
+	"ne",
+	"sw",
+	"se"
+];
+function m(e, t, n, r, i, a) {
+	let o = l(i, a), s = t.endsWith("w"), c = t.startsWith("n"), u = s ? e.x + e.w : e.x, d = c ? e.y + e.h : e.y, f = Math.min(Math.max(n, 0), i), p = Math.min(Math.max(r, 0), a);
+	return f = s ? Math.min(f, u - o) : Math.max(f, u + o), p = c ? Math.min(p, d - o) : Math.max(p, d + o), {
+		x: Math.min(f, u),
+		y: Math.min(p, d),
+		w: Math.abs(f - u),
+		h: Math.abs(p - d)
+	};
+}
+function h(e, n = t) {
+	let r = Math.min(1, n / Math.max(e.w, e.h));
+	return {
+		width: Math.max(1, Math.round(e.w * r)),
+		height: Math.max(1, Math.round(e.h * r))
+	};
+}
+function g(e, t) {
+	let n = t / Math.max(e.w, e.h);
+	return {
+		width: Math.max(1, Math.round(e.w * n)),
+		height: Math.max(1, Math.round(e.h * n))
+	};
+}
+function _(e, t, n) {
+	return n % 180 == 0 ? {
+		w: e,
+		h: t
+	} : {
+		w: t,
+		h: e
+	};
+}
+function v(e, t, n) {
+	return s({
+		x: n - (e.y + e.h),
+		y: e.x,
+		w: e.h,
+		h: e.w
+	}, n, t);
+}
+function y(e) {
+	return String(e || "").split(/[\s,]+/).map(Number).filter((e) => Number.isInteger(e) && e > 0);
+}
+var b = [
+	"image/png",
+	"image/jpeg",
+	"image/webp"
+], x = {
+	"image/png": ".png",
+	"image/jpeg": ".jpg",
+	"image/webp": ".webp"
+};
+function S(e) {
+	let t = String(e || "").toLowerCase();
+	return b.includes(t) ? t : "image/png";
+}
+function C(e, t) {
+	let n = String(e || "image"), r = x[t];
+	return (t === "image/jpeg" ? /\.jpe?g$/i.test(n) : n.toLowerCase().endsWith(r)) ? n : `${n.replace(/\.[^./\\]+$/, "") || "image"}${r}`;
+}
+async function w(e, { width: t, height: a, type: o, maxBytes: s }) {
+	let c = o, l = t, u = a, d = null;
+	for (let t = 0; t <= i; t++) {
+		let i = c === "image/png" ? [void 0] : t === 0 ? n : [n[1]];
+		for (let t of i) {
+			if (d = await e(l, u, c, t), !d || (d.type && d.type !== c && (c = d.type), !(s > 0) || d.size <= s)) return d;
+			if (c === "image/png") break;
+		}
+		l = Math.max(1, Math.round(l * r)), u = Math.max(1, Math.round(u * r));
+	}
+	return d;
+}
+//#endregion
+//#region src/WuiImageCrop.js
+var T = .05, E = .2, D = {
+	w: 320,
+	h: 240
+}, O = {
+	nw: "top left",
+	ne: "top right",
+	sw: "bottom left",
+	se: "bottom right"
+}, k = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\"/></svg>", A = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5v14\"/></svg>", j = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\"/><path d=\"M21 3v5h-5\"/></svg>", M = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"/><path d=\"M3 3v5h5\"/></svg>", N = (e, t) => Math.hypot(e.x - t.x, e.y - t.y), P = class extends e {
+	static get observedAttributes() {
+		return [
+			"src",
+			"aspect",
+			"round",
+			"rotatable",
+			"previews"
+		];
+	}
+	constructor() {
+		super(), this._rect = null, this._base = null, this._natural = null, this._source = null, this._rotation = 0, this._drag = null, this._pointers = /* @__PURE__ */ new Map(), this._pinch = null, this._previewPending = !1, this._resizeObserver = null;
+	}
+	get src() {
+		return this.getAttribute("src") || "";
+	}
+	set src(e) {
+		e == null || e === "" ? this.removeAttribute("src") : this.setAttribute("src", String(e));
+	}
+	get aspect() {
+		return a(this.getAttribute("aspect"));
+	}
+	set aspect(e) {
+		e == null || e === "" ? this.removeAttribute("aspect") : this.setAttribute("aspect", String(e));
+	}
+	get round() {
+		return this.hasAttribute("round");
+	}
+	set round(e) {
+		this.toggleAttribute("round", !!e);
+	}
+	get rotatable() {
+		return this.hasAttribute("rotatable");
+	}
+	set rotatable(e) {
+		this.toggleAttribute("rotatable", !!e);
+	}
+	get previews() {
+		return this.getAttribute("previews") || "";
+	}
+	set previews(e) {
+		e == null || e === "" ? this.removeAttribute("previews") : this.setAttribute("previews", Array.isArray(e) ? e.join(" ") : String(e));
+	}
+	get rect() {
+		return this._rect ? { ...this._rect } : null;
+	}
+	get rotation() {
+		return this._rotation;
+	}
+	set rotation(e) {
+		if (!this._rect) return;
+		let t = (Math.round(Number(e) / 90) * 90 % 360 + 360) % 360;
+		if (!Number.isNaN(t)) for (; this._rotation !== t;) this.rotate();
+	}
+	get zoom() {
+		return this._rect ? u(this._rect, this._base) : 1;
+	}
+	set zoom(e) {
+		this._rect && (this._rect = f(this._rect, this._base, Number(e) || 1, this._natural.w, this._natural.h), this._paint(), this._announce());
+	}
+	connectedCallback() {
+		if (!this._rendered) {
+			this.render();
+			return;
+		}
+		this._observe();
+	}
+	disconnectedCallback() {
+		this._resizeObserver?.disconnect(), this._resizeObserver = null;
+	}
+	attributeChangedCallback(e) {
+		this._rendered && (e === "src" ? this._loadImage() : e === "aspect" ? (this._rebuildHandles(), this._resetRect()) : e === "rotatable" ? this._tools.hidden = !this.rotatable : e === "previews" ? this._renderPreviews() : this._applyRound());
+	}
+	render() {
+		this.innerHTML = `<div>
+        <div class="wui-crop-stage" tabindex="0" role="group" aria-label="Crop area. Drag the frame or use the arrow keys to move it, and plus or minus to zoom.">
+          <img class="wui-crop-img" alt="" draggable="false">
+          <div class="wui-crop-frame"></div>
+        </div>
+        <div class="wui-crop-controls">
+          <button type="button" class="wui-crop-zoombtn" data-zoom="out" aria-label="Zoom out">${k}</button>
+          <input type="range" class="form-range wui-crop-zoom" min="1" max="4" step="0.01" value="1" aria-label="Zoom">
+          <button type="button" class="wui-crop-zoombtn" data-zoom="in" aria-label="Zoom in">${A}</button>
+        </div>
+        <div class="wui-crop-tools" hidden>
+          <button type="button" class="wui-crop-toolbtn" data-crop-action="rotate" aria-label="Rotate 90 degrees clockwise">${j}<span>Rotate</span></button>
+          <button type="button" class="wui-crop-toolbtn" data-crop-action="reset" aria-label="Reset the crop">${M}<span>Reset</span></button>
+        </div>
+        <div class="wui-crop-previews" aria-hidden="true" hidden></div>
+        <div class="visually-hidden" data-wui-crop-live aria-live="polite"></div>
+      </div>`, this._stage = this.querySelector(".wui-crop-stage"), this._img = this.querySelector(".wui-crop-img"), this._frame = this.querySelector(".wui-crop-frame"), this._slider = this.querySelector(".wui-crop-zoom"), this._tools = this.querySelector(".wui-crop-tools"), this._previewBox = this.querySelector(".wui-crop-previews"), this._live = this.querySelector("[data-wui-crop-live]"), this._rendered = !0, this._tools.hidden = !this.rotatable, this._applyRound(), this._rebuildHandles(), this._renderPreviews(), this._wire(), this._observe(), this._loadImage();
+	}
+	_applyRound() {
+		this._frame.classList.toggle("wui-crop-frame--round", this.round), this._previewBox.classList.toggle("wui-crop-previews--round", this.round);
+	}
+	_rebuildHandles() {
+		for (let e of this._frame.querySelectorAll(".wui-crop-handle")) e.remove();
+		if (!this.aspect) for (let e of p) {
+			let t = document.createElement("button");
+			t.type = "button", t.className = `wui-crop-handle wui-crop-handle--${e}`, t.dataset.handle = e, t.setAttribute("aria-label", `Resize ${O[e]} corner`), this._frame.appendChild(t);
+		}
+	}
+	_renderPreviews() {
+		let e = y(this.previews);
+		this._previewBox.replaceChildren(), this._previewBox.hidden = e.length === 0;
+		for (let t of e) {
+			let e = document.createElement("canvas");
+			e.className = "wui-crop-preview", e.dataset.size = String(t), e.style.width = `${t}px`, e.style.height = `${t}px`, this._previewBox.appendChild(e);
+		}
+		this._schedulePreviews();
+	}
+	_loadImage() {
+		this._rect = null, this._natural = null, this._source = null, this._rotation = 0, this._drag = null, this._pinch = null, this._pointers.clear();
+		let e = this.src;
+		this._img.hidden = !e, this._frame.hidden = !0, e && (this._img.onload = () => {
+			this._source = {
+				w: this._img.naturalWidth,
+				h: this._img.naturalHeight
+			}, this._natural = { ...this._source }, this._resetRect(), this.dispatchEvent(new Event("load"));
+		}, this._img.onerror = () => {
+			this._frame.hidden = !0, this.dispatchEvent(new Event("error"));
+		}, this._img.src = e);
+	}
+	_resetRect() {
+		this._natural && (this._base = o(this._natural.w, this._natural.h, this.aspect), this._rect = { ...this._base }, this._frame.hidden = !1, this._paint());
+	}
+	_observe() {
+		typeof ResizeObserver > "u" || this._resizeObserver || (this._resizeObserver = new ResizeObserver(() => this._paint()), this._resizeObserver.observe(this._stage));
+	}
+	_view() {
+		let e = this._stage.clientWidth || D.w, t = this._stage.clientHeight || D.h, n = Math.min(e / this._natural.w, t / this._natural.h), r = this._natural.w * n, i = this._natural.h * n;
+		return {
+			scale: n,
+			left: (e - r) / 2,
+			top: (t - i) / 2,
+			iw: r,
+			ih: i
+		};
+	}
+	_paint() {
+		if (!this._rect) return;
+		let e = this._view(), t = this._rotation % 180 != 0, n = t ? e.ih : e.iw, r = t ? e.iw : e.ih;
+		Object.assign(this._img.style, {
+			left: `${e.left + (e.iw - n) / 2}px`,
+			top: `${e.top + (e.ih - r) / 2}px`,
+			width: `${n}px`,
+			height: `${r}px`,
+			transform: this._rotation ? `rotate(${this._rotation}deg)` : ""
+		});
+		let i = this._rect;
+		Object.assign(this._frame.style, {
+			left: `${e.left + i.x * e.scale}px`,
+			top: `${e.top + i.y * e.scale}px`,
+			width: `${i.w * e.scale}px`,
+			height: `${i.h * e.scale}px`
+		});
+		let a = u(i, this._base), o = d(i, this._base);
+		this._slider.max = String(o), this._slider.value = String(Math.min(Math.max(a, 1), o)), this._slider.setAttribute("aria-valuetext", `${Math.round(a * 100)}%`), this._schedulePreviews();
+	}
+	_schedulePreviews() {
+		if (!this._rect || this._previewBox.hidden || this._previewPending) return;
+		this._previewPending = !0;
+		let e = () => {
+			this._previewPending = !1, this._drawPreviews();
+		};
+		typeof requestAnimationFrame == "function" ? requestAnimationFrame(e) : e();
+	}
+	_drawPreviews() {
+		if (!this._rect) return;
+		let e = s(this._rect, this._natural.w, this._natural.h), t = typeof window < "u" && window.devicePixelRatio || 1;
+		for (let n of this._previewBox.children) {
+			let r = Number(n.dataset.size), i = Math.max(1, Math.round(r * e.h / e.w));
+			n.style.width = `${r}px`, n.style.height = `${i}px`, n.width = Math.round(r * t), n.height = Math.round(i * t);
+			let a = n.getContext("2d");
+			a && this._drawCrop(a, e, n.width, n.height);
+		}
+	}
+	_drawCrop(e, t, n, r) {
+		if (!this._rotation) {
+			e.drawImage(this._img, t.x, t.y, t.w, t.h, 0, 0, n, r);
+			return;
+		}
+		let i = this._source;
+		e.save(), e.scale(n / t.w, r / t.h), e.translate(-t.x, -t.y), e.translate(this._natural.w / 2, this._natural.h / 2), e.rotate(this._rotation * Math.PI / 180), e.drawImage(this._img, -i.w / 2, -i.h / 2, i.w, i.h), e.restore();
+	}
+	_announce() {
+		this.dispatchEvent(new CustomEvent("change", {
+			bubbles: !0,
+			detail: this.rect
+		}));
+	}
+	_say() {
+		let e = this._rect, t = this._rotation ? `, turned ${this._rotation} degrees` : "", n = `Frame ${Math.round(e.w)} by ${Math.round(e.h)} pixels, ${Math.round(e.x)} from the left, ${Math.round(e.y)} from the top, zoom ${Math.round(u(e, this._base) * 100)}%${t}.`;
+		this._live.textContent = n === this._live.textContent ? `${n} ` : n;
+	}
+	rotate() {
+		if (!this._rect) return;
+		let e = v(this._rect, this._natural.w, this._natural.h);
+		this._rotation = (this._rotation + 90) % 360, this._natural = _(this._source.w, this._source.h, this._rotation), this._base = o(this._natural.w, this._natural.h, this.aspect);
+		let t = this.aspect;
+		this._rect = t && t !== 1 ? { ...this._base } : e, this._paint(), this._announce();
+	}
+	reset() {
+		this._source && (this._rotation = 0, this._natural = { ...this._source }, this._resetRect(), this._announce());
+	}
+	_wire() {
+		let e = this._stage;
+		e.addEventListener("pointerdown", (t) => {
+			if (!this._rect || t.button > 0) return;
+			if (this._pointers.set(t.pointerId, {
+				x: t.clientX,
+				y: t.clientY
+			}), e.setPointerCapture?.(t.pointerId), this._pointers.size === 2) {
+				let [e, n] = [...this._pointers.values()];
+				this._drag = null, this._pinch = {
+					distance: N(e, n) || 1,
+					zoom: this.zoom,
+					done: !1
+				}, t.preventDefault();
+				return;
+			}
+			if (this._pinch) return;
+			let n = t.target.closest?.(".wui-crop-handle");
+			this._drag = {
+				id: t.pointerId,
+				corner: n ? n.dataset.handle : null,
+				x: t.clientX,
+				y: t.clientY,
+				start: { ...this._rect }
+			}, n || e.focus(), t.preventDefault();
+		}), e.addEventListener("pointermove", (t) => {
+			if (this._pointers.has(t.pointerId) && this._pointers.set(t.pointerId, {
+				x: t.clientX,
+				y: t.clientY
+			}), this._pinch) {
+				if (this._pinch.done || this._pointers.size < 2 || !this._pointers.has(t.pointerId)) return;
+				let [e, n] = [...this._pointers.values()], r = this._pinch.zoom * N(e, n) / this._pinch.distance;
+				this._rect = f(this._rect, this._base, r, this._natural.w, this._natural.h), this._paint();
+				return;
+			}
+			let n = this._drag;
+			if (!n || n.id !== t.pointerId) return;
+			let r = this._view(), { w: i, h: a } = this._natural;
+			if (n.corner) {
+				let o = e.getBoundingClientRect(), s = (t.clientX - o.left - e.clientLeft - r.left) / r.scale, c = (t.clientY - o.top - e.clientTop - r.top) / r.scale;
+				this._rect = m(this._rect, n.corner, s, c, i, a);
+			} else this._rect = c(n.start, (t.clientX - n.x) / r.scale, (t.clientY - n.y) / r.scale, i, a);
+			this._paint();
+		});
+		let t = (t) => {
+			if (this._pointers.delete(t.pointerId) && e.releasePointerCapture?.(t.pointerId), this._pinch) {
+				!this._pinch.done && this._pointers.size < 2 && (this._pinch.done = !0, this._announce()), this._pointers.size === 0 && (this._pinch = null);
+				return;
+			}
+			let n = this._drag;
+			!n || n.id !== t.pointerId || (this._drag = null, this._announce());
+		};
+		e.addEventListener("pointerup", t), e.addEventListener("pointercancel", t), e.addEventListener("keydown", (e) => this._onKey(e)), e.addEventListener("wheel", (e) => {
+			!this._rect || !this.contains(document.activeElement) || (e.preventDefault(), this.zoom *= e.deltaY < 0 ? 1.1 : 1 / 1.1);
+		}, { passive: !1 });
+		for (let e of ["input", "change"]) this._slider.addEventListener(e, (e) => e.stopPropagation());
+		this._slider.addEventListener("input", () => {
+			this.zoom = Number(this._slider.value);
+		});
+		for (let e of this.querySelectorAll(".wui-crop-zoombtn")) e.addEventListener("click", () => {
+			this.zoom *= e.dataset.zoom === "in" ? 1.25 : .8;
+		});
+		this.querySelector("[data-crop-action=\"rotate\"]").addEventListener("click", () => this.rotate()), this.querySelector("[data-crop-action=\"reset\"]").addEventListener("click", () => this.reset());
+	}
+	_onKey(e) {
+		if (!this._rect || e.altKey || e.ctrlKey || e.metaKey) return;
+		let { w: t, h: n } = this._natural;
+		if (e.key === "+" || e.key === "=") this.zoom *= 1.25, this._say();
+		else if (e.key === "-" || e.key === "_") this.zoom *= .8, this._say();
+		else if ((e.key === "r" || e.key === "R") && this.rotatable) this.rotate(), this._say();
+		else if (e.key.startsWith("Arrow")) {
+			let r = e.shiftKey ? E : T, i = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0, a = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0, o = e.target.closest?.(".wui-crop-handle")?.dataset.handle;
+			if (o) {
+				let e = this._rect, s = (o.endsWith("w") ? e.x : e.x + e.w) + i * r * e.w, c = (o.startsWith("n") ? e.y : e.y + e.h) + a * r * e.h;
+				this._rect = m(e, o, s, c, t, n);
+			} else this._rect = c(this._rect, i * r * this._rect.w, a * r * this._rect.h, t, n);
+			this._paint(), this._announce(), this._say();
+		} else return;
+		e.preventDefault();
+	}
+	async toBlob({ type: e, maxBytes: t = 0, size: n = 0 } = {}) {
+		if (!this._rect) return null;
+		let r = S(e), i = s(this._rect, this._natural.w, this._natural.h), { width: a, height: o } = n > 0 ? g(i, n) : h(i);
+		return w((e, t, n, r) => new Promise((a) => {
+			let o = document.createElement("canvas");
+			o.width = e, o.height = t;
+			let s = o.getContext("2d");
+			if (!s) {
+				a(null);
+				return;
+			}
+			n === "image/jpeg" && (s.fillStyle = "#fff", s.fillRect(0, 0, e, t)), this._drawCrop(s, i, e, t), o.toBlob(a, n, r);
+		}), {
+			width: a,
+			height: o,
+			type: r,
+			maxBytes: t
+		});
+	}
+	async toFile({ name: e, type: t, maxBytes: n = 0, size: r = 0 } = {}) {
+		let i = await this.toBlob({
+			type: t,
+			maxBytes: n,
+			size: r
+		});
+		return i ? new File([i], C(e, i.type), { type: i.type }) : null;
+	}
+};
+//#endregion
+export { P as t };