haze-ui 1.32.0 → 1.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +87 -1210
- package/dist/coi-serviceworker.LICENSE +21 -0
- package/dist/coi-serviceworker.js +118 -0
- package/dist/components/Countdown/Countdown.js +49 -0
- package/dist/components/Countdown/index.js +3 -0
- package/dist/components/HoverCard/HoverCard.js +63 -43
- package/dist/components/ImageCrop/ImageCrop.js +188 -0
- package/dist/components/ImageCrop/image-crop-geometry.js +81 -0
- package/dist/components/ImageCrop/index.js +3 -0
- package/dist/components/LocaleProvider/ar-sa.js +6 -0
- package/dist/components/LocaleProvider/de-de.js +6 -0
- package/dist/components/LocaleProvider/es-es.js +6 -0
- package/dist/components/LocaleProvider/fr-fr.js +6 -0
- package/dist/components/LocaleProvider/it-it.js +6 -0
- package/dist/components/LocaleProvider/ja-jp.js +6 -0
- package/dist/components/LocaleProvider/ko-kr.js +6 -0
- package/dist/components/LocaleProvider/locale.js +6 -0
- package/dist/components/LocaleProvider/pt-br.js +6 -0
- package/dist/components/LocaleProvider/ru-ru.js +6 -0
- package/dist/components/LocaleProvider/zh-cn.js +6 -0
- package/dist/components/Resizable/index.js +1 -1
- package/dist/components/Splitter/Splitter.js +199 -0
- package/dist/components/Splitter/index.js +3 -0
- package/dist/css/countdown.css +4 -0
- package/dist/css/image-crop.css +4 -0
- package/dist/css/splitter.css +4 -0
- package/dist/css-manifest.json +4 -3
- package/dist/haze-ui.css +12 -0
- package/dist/hooks/useHotkeys.js +78 -24
- package/dist/index.js +277 -274
- package/dist/mcp-docs.json +210 -9
- package/dist/registry.json +71 -5
- package/dist/robots.txt +4 -0
- package/dist/sitemap.xml +160 -0
- package/dist/types/components/ConfigProvider/ConfigContext.d.ts +2 -1
- package/dist/types/components/Countdown/Countdown.d.ts +30 -0
- package/dist/types/components/Countdown/index.d.ts +2 -0
- package/dist/types/components/HoverCard/HoverCard.d.ts +18 -1
- package/dist/types/components/ImageCrop/ImageCrop.d.ts +67 -0
- package/dist/types/components/ImageCrop/image-crop-geometry.d.ts +65 -0
- package/dist/types/components/ImageCrop/index.d.ts +3 -0
- package/dist/types/components/LocaleProvider/locale.d.ts +6 -0
- package/dist/types/components/Resizable/index.d.ts +0 -2
- package/dist/types/components/Splitter/Splitter.d.ts +33 -0
- package/dist/types/components/Splitter/index.d.ts +2 -0
- package/dist/types/headless/index.d.ts +7 -6
- package/dist/types/hooks/useHotkeys.d.ts +16 -4
- package/dist/types/index.d.ts +7 -2
- package/package.json +23 -4
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Guido Zuidhof
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/*! coi-serviceworker v0.1.7 - Guido Zuidhof and contributors, licensed under MIT */
|
|
2
|
+
let coepCredentialless = false;
|
|
3
|
+
if (typeof window === 'undefined') {
|
|
4
|
+
self.addEventListener("install", () => self.skipWaiting());
|
|
5
|
+
self.addEventListener("activate", (event) => event.waitUntil(self.clients.claim()));
|
|
6
|
+
|
|
7
|
+
self.addEventListener("message", (ev) => {
|
|
8
|
+
if (!ev.data) {
|
|
9
|
+
return;
|
|
10
|
+
} else if (ev.data.type === "deregister") {
|
|
11
|
+
self.registration
|
|
12
|
+
.unregister()
|
|
13
|
+
.then(() => {
|
|
14
|
+
return self.clients.matchAll();
|
|
15
|
+
})
|
|
16
|
+
.then(clients => {
|
|
17
|
+
clients.forEach((client) => client.navigate(client.url));
|
|
18
|
+
});
|
|
19
|
+
} else if (ev.data.type === "coepCredentialless") {
|
|
20
|
+
coepCredentialless = ev.data.value;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
self.addEventListener("fetch", function (event) {
|
|
25
|
+
const r = event.request;
|
|
26
|
+
if (r.cache === "only-if-cached" && r.mode !== "same-origin") {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
const request = (coepCredentialless && r.mode === "no-cors")
|
|
31
|
+
? new Request(r, {
|
|
32
|
+
credentials: "omit",
|
|
33
|
+
})
|
|
34
|
+
: r;
|
|
35
|
+
event.respondWith(
|
|
36
|
+
fetch(request)
|
|
37
|
+
.then((response) => {
|
|
38
|
+
if (response.status === 0) {
|
|
39
|
+
return response;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const newHeaders = new Headers(response.headers);
|
|
43
|
+
newHeaders.set("Cross-Origin-Embedder-Policy",
|
|
44
|
+
coepCredentialless ? "credentialless" : "require-corp"
|
|
45
|
+
);
|
|
46
|
+
if (!coepCredentialless) {
|
|
47
|
+
newHeaders.set("Cross-Origin-Resource-Policy", "cross-origin");
|
|
48
|
+
}
|
|
49
|
+
newHeaders.set("Cross-Origin-Opener-Policy", "same-origin");
|
|
50
|
+
|
|
51
|
+
return new Response(response.body, {
|
|
52
|
+
status: response.status,
|
|
53
|
+
statusText: response.statusText,
|
|
54
|
+
headers: newHeaders,
|
|
55
|
+
});
|
|
56
|
+
})
|
|
57
|
+
.catch((e) => console.error(e))
|
|
58
|
+
);
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
} else {
|
|
62
|
+
(() => {
|
|
63
|
+
// You can customize the behavior of this script through a global `coi` variable.
|
|
64
|
+
const coi = {
|
|
65
|
+
shouldRegister: () => true,
|
|
66
|
+
shouldDeregister: () => false,
|
|
67
|
+
coepCredentialless: () => !(window.chrome || window.netscape),
|
|
68
|
+
doReload: () => window.location.reload(),
|
|
69
|
+
quiet: false,
|
|
70
|
+
...window.coi
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
const n = navigator;
|
|
74
|
+
|
|
75
|
+
if (n.serviceWorker && n.serviceWorker.controller) {
|
|
76
|
+
n.serviceWorker.controller.postMessage({
|
|
77
|
+
type: "coepCredentialless",
|
|
78
|
+
value: coi.coepCredentialless(),
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
if (coi.shouldDeregister()) {
|
|
82
|
+
n.serviceWorker.controller.postMessage({ type: "deregister" });
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// If we're already coi: do nothing. Perhaps it's due to this script doing its job, or COOP/COEP are
|
|
87
|
+
// already set from the origin server. Also if the browser has no notion of crossOriginIsolated, just give up here.
|
|
88
|
+
if (window.crossOriginIsolated !== false || !coi.shouldRegister()) return;
|
|
89
|
+
|
|
90
|
+
if (!window.isSecureContext) {
|
|
91
|
+
!coi.quiet && console.log("COOP/COEP Service Worker not registered, a secure context is required.");
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// In some environments (e.g. Chrome incognito mode) this won't be available
|
|
96
|
+
if (n.serviceWorker) {
|
|
97
|
+
n.serviceWorker.register(window.document.currentScript.src).then(
|
|
98
|
+
(registration) => {
|
|
99
|
+
!coi.quiet && console.log("COOP/COEP Service Worker registered", registration.scope);
|
|
100
|
+
|
|
101
|
+
registration.addEventListener("updatefound", () => {
|
|
102
|
+
!coi.quiet && console.log("Reloading page to make use of updated COOP/COEP Service Worker.");
|
|
103
|
+
coi.doReload();
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
// If the registration is active, but it's not controlling the page
|
|
107
|
+
if (registration.active && !n.serviceWorker.controller) {
|
|
108
|
+
!coi.quiet && console.log("Reloading page to make use of COOP/COEP Service Worker.");
|
|
109
|
+
coi.doReload();
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
(err) => {
|
|
113
|
+
!coi.quiet && console.error("COOP/COEP Service Worker failed to register:", err);
|
|
114
|
+
}
|
|
115
|
+
);
|
|
116
|
+
}
|
|
117
|
+
})();
|
|
118
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
|
|
2
|
+
"use client";
|
|
3
|
+
import { classnames as e } from "../../utils/classnames.js";
|
|
4
|
+
/* empty css */
|
|
5
|
+
import { useEffect as t, useRef as n, useState as r } from "react";
|
|
6
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
7
|
+
//#region src/lib/components/Countdown/Countdown.tsx
|
|
8
|
+
var a = "haze-Countdown__base", o = (e) => String(e).padStart(2, "0");
|
|
9
|
+
function s({ days: e, hours: t, minutes: n, seconds: r }) {
|
|
10
|
+
let i = `${o(t)}:${o(n)}:${o(r)}`;
|
|
11
|
+
return e > 0 ? `${e}d ${i}` : i;
|
|
12
|
+
}
|
|
13
|
+
var c = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`;
|
|
14
|
+
function l({ days: e, hours: t, minutes: n, seconds: r }) {
|
|
15
|
+
let i = [];
|
|
16
|
+
return e > 0 && i.push(c(e, "day")), (e > 0 || t > 0) && i.push(c(t, "hour")), i.push(c(n, "minute"), c(r, "second")), `${i.join(", ")} remaining`;
|
|
17
|
+
}
|
|
18
|
+
function u({ value: o, onFinish: c, format: u, render: d, className: f, ...p }) {
|
|
19
|
+
let m = typeof o == "number" ? o : o.getTime(), [h, g] = r(() => Date.now()), _ = n(!1), v = n(c);
|
|
20
|
+
t(() => {
|
|
21
|
+
v.current = c;
|
|
22
|
+
}, [c]), t(() => {
|
|
23
|
+
let e = m - h;
|
|
24
|
+
if (e <= 0) {
|
|
25
|
+
_.current || (_.current = !0, g(m), v.current?.());
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
_.current = !1;
|
|
29
|
+
let t = e % 1e3, n = setTimeout(() => g(Date.now()), t === 0 ? 1e3 : t);
|
|
30
|
+
return () => clearTimeout(n);
|
|
31
|
+
}, [m, h]);
|
|
32
|
+
let y = Math.max(0, m - h), b = Math.ceil(y / 1e3), x = {
|
|
33
|
+
totalSeconds: b,
|
|
34
|
+
days: Math.floor(b / 86400),
|
|
35
|
+
hours: Math.floor(b % 86400 / 3600),
|
|
36
|
+
minutes: Math.floor(b % 3600 / 60),
|
|
37
|
+
seconds: b % 60,
|
|
38
|
+
finished: y === 0
|
|
39
|
+
}, S = u ? u(x) : l(x);
|
|
40
|
+
return /* @__PURE__ */ i("span", {
|
|
41
|
+
"data-slot": "countdown",
|
|
42
|
+
"aria-label": S,
|
|
43
|
+
...p,
|
|
44
|
+
className: e([a, f]),
|
|
45
|
+
children: d ? d(x) : u ? u(x) : s(x)
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
//#endregion
|
|
49
|
+
export { u as default };
|
|
@@ -2,56 +2,76 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import { useConfigDefaults as e } from "../ConfigProvider/useConfigDefaults.js";
|
|
4
4
|
import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
|
|
5
|
+
import { getTabbables as r } from "../../utils/focus.js";
|
|
5
6
|
/* empty css */
|
|
6
|
-
import { useEffect as
|
|
7
|
-
import { jsx as
|
|
8
|
-
import { useControl as
|
|
7
|
+
import { useEffect as i, useId as a, useMemo as o, useRef as s } from "react";
|
|
8
|
+
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
9
|
+
import { useControl as u } from "react-use-control";
|
|
9
10
|
//#region src/lib/components/HoverCard/HoverCard.tsx
|
|
10
|
-
var
|
|
11
|
-
function
|
|
12
|
-
let
|
|
13
|
-
open:
|
|
14
|
-
setOpen:
|
|
15
|
-
triggerRef:
|
|
16
|
-
panelRef:
|
|
11
|
+
var d = "haze-HoverCard__container", f = "haze-HoverCard__panelVisuals", p = 200, m = 120, h = 300;
|
|
12
|
+
function g({ content: g, openDelay: _, closeDelay: v, interactive: y = !1, placement: b = "bottom-span", open: x, collisionPadding: S, className: C, children: w }) {
|
|
13
|
+
let T = e("HoverCard"), E = _ ?? T.openDelay ?? p, D = v ?? T.closeDelay ?? (y ? h : m), [O, k] = u(x, !1), A = a(), j = s(null), M = s(null), N = o(() => S === void 0 ? void 0 : { collisionPadding: S }, [S]), P = n({
|
|
14
|
+
open: O,
|
|
15
|
+
setOpen: k,
|
|
16
|
+
triggerRef: j,
|
|
17
|
+
panelRef: M,
|
|
17
18
|
animated: !0,
|
|
18
|
-
collision:
|
|
19
|
-
}),
|
|
20
|
-
|
|
21
|
-
window.clearTimeout(
|
|
19
|
+
collision: N
|
|
20
|
+
}), F = s(0), I = s(0);
|
|
21
|
+
i(() => () => {
|
|
22
|
+
window.clearTimeout(F.current), window.clearTimeout(I.current);
|
|
22
23
|
}, []);
|
|
23
|
-
let
|
|
24
|
-
window.clearTimeout(
|
|
25
|
-
},
|
|
26
|
-
|
|
27
|
-
},
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
|
|
24
|
+
let L = () => {
|
|
25
|
+
window.clearTimeout(F.current), window.clearTimeout(I.current);
|
|
26
|
+
}, R = () => {
|
|
27
|
+
L(), !O && (F.current = window.setTimeout(() => k(!0), E));
|
|
28
|
+
}, z = () => {
|
|
29
|
+
L(), O && (I.current = window.setTimeout(() => k(!1), D));
|
|
30
|
+
}, B = () => {
|
|
31
|
+
y && M.current !== null && document.activeElement instanceof Node && M.current.contains(document.activeElement) || z();
|
|
32
|
+
}, V = (e) => {
|
|
33
|
+
let t = e.relatedTarget;
|
|
34
|
+
if (t instanceof Node && e.currentTarget.contains(t)) {
|
|
35
|
+
L();
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
z();
|
|
39
|
+
}, H = s(!1);
|
|
40
|
+
return i(() => {
|
|
41
|
+
let e = H.current;
|
|
42
|
+
if (H.current = O, !y || !e || O) return;
|
|
43
|
+
let t = M.current, n = document.activeElement;
|
|
44
|
+
if (!t || !(n instanceof Node) || !t.contains(n)) return;
|
|
45
|
+
let i = j.current;
|
|
46
|
+
if (!i) return;
|
|
47
|
+
let a = r(i)[0] ?? i;
|
|
48
|
+
a === i && i.getAttribute("tabindex") === null && (i.tabIndex = -1), a.focus();
|
|
49
|
+
}, [O, y]), /* @__PURE__ */ l("span", {
|
|
31
50
|
"data-slot": "hover-card",
|
|
32
|
-
className:
|
|
33
|
-
|
|
34
|
-
|
|
51
|
+
className: d,
|
|
52
|
+
onBlur: y ? V : void 0,
|
|
53
|
+
children: [/* @__PURE__ */ c("span", {
|
|
54
|
+
ref: j,
|
|
35
55
|
"data-slot": "trigger",
|
|
36
|
-
style:
|
|
37
|
-
"aria-describedby":
|
|
38
|
-
onMouseEnter:
|
|
39
|
-
onMouseLeave:
|
|
40
|
-
onFocus:
|
|
41
|
-
onBlur:
|
|
42
|
-
children:
|
|
43
|
-
}), /* @__PURE__ */
|
|
44
|
-
ref:
|
|
45
|
-
behavior:
|
|
46
|
-
placement:
|
|
47
|
-
id:
|
|
48
|
-
visualClass:
|
|
49
|
-
className:
|
|
50
|
-
onMouseEnter:
|
|
51
|
-
onMouseLeave:
|
|
52
|
-
children:
|
|
56
|
+
style: P.triggerStyle,
|
|
57
|
+
"aria-describedby": A,
|
|
58
|
+
onMouseEnter: R,
|
|
59
|
+
onMouseLeave: y ? B : z,
|
|
60
|
+
onFocus: R,
|
|
61
|
+
onBlur: y ? void 0 : z,
|
|
62
|
+
children: w
|
|
63
|
+
}), /* @__PURE__ */ c(t, {
|
|
64
|
+
ref: M,
|
|
65
|
+
behavior: P,
|
|
66
|
+
placement: b,
|
|
67
|
+
id: A,
|
|
68
|
+
visualClass: f,
|
|
69
|
+
className: C,
|
|
70
|
+
onMouseEnter: L,
|
|
71
|
+
onMouseLeave: y ? B : z,
|
|
72
|
+
children: g
|
|
53
73
|
})]
|
|
54
74
|
});
|
|
55
75
|
}
|
|
56
76
|
//#endregion
|
|
57
|
-
export {
|
|
77
|
+
export { g as default };
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
|
|
2
|
+
"use client";
|
|
3
|
+
import { classnames as e } from "../../utils/classnames.js";
|
|
4
|
+
import { KEYBOARD_STEP as t, defaultRect as n, moveRect as r, normalizeRect as i, pointerToNormalized as a, resizeFromAnchor as o, resizeRect as s } from "./image-crop-geometry.js";
|
|
5
|
+
/* empty css */
|
|
6
|
+
import { useCallback as c, useEffect as l, useId as u, useImperativeHandle as d, useRef as f, useState as p } from "react";
|
|
7
|
+
import { jsx as m, jsxs as h } from "react/jsx-runtime";
|
|
8
|
+
import { useControl as g } from "react-use-control";
|
|
9
|
+
//#region src/lib/components/ImageCrop/ImageCrop.tsx
|
|
10
|
+
var _ = [
|
|
11
|
+
"nw",
|
|
12
|
+
"ne",
|
|
13
|
+
"sw",
|
|
14
|
+
"se"
|
|
15
|
+
], ee = "haze-ImageCrop__root", v = "haze-ImageCrop__sourceClass", y = "haze-ImageCrop__frame", b = "haze-ImageCrop__canvasClass", te = "haze-ImageCrop__loading", ne = "haze-ImageCrop__cropBox", re = "haze-ImageCrop__cropCircle", ie = "haze-ImageCrop__handleBase", ae = {
|
|
16
|
+
nw: "haze-ImageCrop__nw",
|
|
17
|
+
ne: "haze-ImageCrop__ne",
|
|
18
|
+
sw: "haze-ImageCrop__sw",
|
|
19
|
+
se: "haze-ImageCrop__se"
|
|
20
|
+
}, x = "haze-ImageCrop__notice", S = "haze-ImageCrop__srOnly", C = (e) => `${Math.round(e * 1e4) / 100}%`;
|
|
21
|
+
function w({ src: w, alt: oe, value: T, onChange: E, aspect: D, shape: O = "rect", cropLabel: se = "Crop region", unsupportedLabel: ce = "Image cropping is not supported in this browser.", errorLabel: le = "Failed to load the image.", disabled: k = !1, crossOrigin: ue, className: A, ref: j, ...M }) {
|
|
22
|
+
let [N, P] = g(T, void 0), [F, I] = p(null), [L, R] = p(!1), [z, B] = p(!1), V = f(null), H = f(null), U = f(null), W = f(null), G = u();
|
|
23
|
+
l(() => {
|
|
24
|
+
I(null), R(!1);
|
|
25
|
+
}, [w]);
|
|
26
|
+
let K = F === null ? void 0 : i(N ?? n(D, F), D, F), q = f(void 0);
|
|
27
|
+
l(() => {
|
|
28
|
+
q.current = K;
|
|
29
|
+
}, [K]);
|
|
30
|
+
let J = c((e) => {
|
|
31
|
+
(K?.x !== e.x || K.y !== e.y || K.width !== e.width || K.height !== e.height) && (P(e), E?.(e));
|
|
32
|
+
}, [
|
|
33
|
+
K,
|
|
34
|
+
P,
|
|
35
|
+
E
|
|
36
|
+
]);
|
|
37
|
+
l(() => {
|
|
38
|
+
if (F === null) return;
|
|
39
|
+
let e = H.current, t = V.current;
|
|
40
|
+
if (e === null || t === null) return;
|
|
41
|
+
e.width = F.width, e.height = F.height;
|
|
42
|
+
let n = e.getContext("2d");
|
|
43
|
+
B(n === null), n !== null && n.drawImage(t, 0, 0, F.width, F.height);
|
|
44
|
+
}, [F]);
|
|
45
|
+
let de = () => {
|
|
46
|
+
let e = V.current;
|
|
47
|
+
if (e === null) return;
|
|
48
|
+
let t = {
|
|
49
|
+
width: e.naturalWidth,
|
|
50
|
+
height: e.naturalHeight
|
|
51
|
+
};
|
|
52
|
+
if (t.width === 0 || t.height === 0) {
|
|
53
|
+
R(!0);
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
I(t), R(!1);
|
|
57
|
+
}, fe = () => R(!0), pe = (e) => {
|
|
58
|
+
if (k || K === void 0 || F === null) return;
|
|
59
|
+
let { key: n, shiftKey: i } = e, a = n === "ArrowRight" ? t : n === "ArrowLeft" ? -t : 0, o = n === "ArrowDown" ? t : n === "ArrowUp" ? -t : 0;
|
|
60
|
+
(a !== 0 || o !== 0) && (e.preventDefault(), J(i ? s(K, a, o, D, F) : r(K, a, o)));
|
|
61
|
+
}, Y = (e, t) => {
|
|
62
|
+
if (k || K === void 0 || e.button !== 0) return;
|
|
63
|
+
let n = U.current?.getBoundingClientRect();
|
|
64
|
+
if (n === void 0) return;
|
|
65
|
+
e.preventDefault(), e.stopPropagation(), W.current = {
|
|
66
|
+
pointerId: e.pointerId,
|
|
67
|
+
mode: t,
|
|
68
|
+
start: K,
|
|
69
|
+
origin: a(e.clientX, e.clientY, n)
|
|
70
|
+
};
|
|
71
|
+
let r = e.currentTarget;
|
|
72
|
+
if (typeof r.setPointerCapture == "function") try {
|
|
73
|
+
r.setPointerCapture(e.pointerId);
|
|
74
|
+
} catch {}
|
|
75
|
+
}, X = (e) => {
|
|
76
|
+
let t = W.current;
|
|
77
|
+
if (t?.pointerId !== e.pointerId || F === null) return;
|
|
78
|
+
let n = U.current?.getBoundingClientRect();
|
|
79
|
+
if (n === void 0) return;
|
|
80
|
+
let i = a(e.clientX, e.clientY, n);
|
|
81
|
+
J(t.mode === "move" ? r(t.start, i.x - t.origin.x, i.y - t.origin.y) : o(t.start, t.mode, i, D, F));
|
|
82
|
+
}, Z = (e) => {
|
|
83
|
+
if (W.current?.pointerId !== e.pointerId) return;
|
|
84
|
+
W.current = null;
|
|
85
|
+
let t = e.currentTarget;
|
|
86
|
+
if (typeof t.releasePointerCapture == "function") try {
|
|
87
|
+
t.releasePointerCapture(e.pointerId);
|
|
88
|
+
} catch {}
|
|
89
|
+
}, Q = (e) => e.target === e.currentTarget, $ = c(() => {
|
|
90
|
+
let e = V.current;
|
|
91
|
+
if (e === null || F === null) return null;
|
|
92
|
+
let t = q.current ?? i(n(D, F), D, F), r = t.x * F.width, a = t.y * F.height, o = t.width * F.width, s = t.height * F.height, c = Math.max(1, Math.round(o)), l = Math.max(1, Math.round(s)), u = document.createElement("canvas");
|
|
93
|
+
u.width = c, u.height = l;
|
|
94
|
+
let d = u.getContext("2d");
|
|
95
|
+
return d === null ? null : (d.drawImage(e, r, a, o, s, 0, 0, c, l), u);
|
|
96
|
+
}, [D, F]);
|
|
97
|
+
d(j, () => ({ getCroppedCanvas: $ }), [$]);
|
|
98
|
+
let me = K === void 0 ? void 0 : {
|
|
99
|
+
left: C(K.x),
|
|
100
|
+
top: C(K.y),
|
|
101
|
+
width: C(K.width),
|
|
102
|
+
height: C(K.height)
|
|
103
|
+
};
|
|
104
|
+
return /* @__PURE__ */ h("div", {
|
|
105
|
+
"data-slot": "image-crop",
|
|
106
|
+
...M,
|
|
107
|
+
className: e([ee, A]),
|
|
108
|
+
children: [/* @__PURE__ */ m("img", {
|
|
109
|
+
ref: V,
|
|
110
|
+
"data-slot": "source",
|
|
111
|
+
src: w,
|
|
112
|
+
alt: "",
|
|
113
|
+
"aria-hidden": "true",
|
|
114
|
+
draggable: !1,
|
|
115
|
+
crossOrigin: ue,
|
|
116
|
+
onLoad: de,
|
|
117
|
+
onError: fe,
|
|
118
|
+
className: e([v])
|
|
119
|
+
}), L ? /* @__PURE__ */ m("div", {
|
|
120
|
+
"data-slot": "error-notice",
|
|
121
|
+
role: "status",
|
|
122
|
+
className: e([x]),
|
|
123
|
+
children: le
|
|
124
|
+
}) : z ? /* @__PURE__ */ m("div", {
|
|
125
|
+
"data-slot": "unsupported-notice",
|
|
126
|
+
role: "status",
|
|
127
|
+
className: e([x]),
|
|
128
|
+
children: ce
|
|
129
|
+
}) : F === null ? /* @__PURE__ */ m("div", {
|
|
130
|
+
"data-slot": "loading",
|
|
131
|
+
"aria-hidden": "true",
|
|
132
|
+
className: e([te])
|
|
133
|
+
}) : /* @__PURE__ */ h("div", {
|
|
134
|
+
ref: U,
|
|
135
|
+
"data-slot": "crop-frame",
|
|
136
|
+
className: e([y]),
|
|
137
|
+
children: [
|
|
138
|
+
/* @__PURE__ */ m("canvas", {
|
|
139
|
+
ref: H,
|
|
140
|
+
"data-slot": "canvas",
|
|
141
|
+
role: "img",
|
|
142
|
+
"aria-label": oe,
|
|
143
|
+
className: e([b])
|
|
144
|
+
}),
|
|
145
|
+
/* @__PURE__ */ m("div", {
|
|
146
|
+
"data-slot": "crop-box",
|
|
147
|
+
"data-shape": O,
|
|
148
|
+
role: "group",
|
|
149
|
+
"aria-label": se,
|
|
150
|
+
"aria-describedby": G,
|
|
151
|
+
"aria-disabled": k || void 0,
|
|
152
|
+
tabIndex: k ? -1 : 0,
|
|
153
|
+
style: me,
|
|
154
|
+
onKeyDown: pe,
|
|
155
|
+
onPointerDown: (e) => Y(e, "move"),
|
|
156
|
+
onPointerMove: (e) => {
|
|
157
|
+
Q(e) && X(e);
|
|
158
|
+
},
|
|
159
|
+
onPointerUp: (e) => {
|
|
160
|
+
Q(e) && Z(e);
|
|
161
|
+
},
|
|
162
|
+
onPointerCancel: (e) => {
|
|
163
|
+
Q(e) && Z(e);
|
|
164
|
+
},
|
|
165
|
+
className: e([ne, O === "circle" && re]),
|
|
166
|
+
children: _.map((t) => /* @__PURE__ */ m("span", {
|
|
167
|
+
"data-slot": "crop-handle",
|
|
168
|
+
"data-corner": t,
|
|
169
|
+
"aria-hidden": "true",
|
|
170
|
+
onPointerDown: (e) => Y(e, t),
|
|
171
|
+
onPointerMove: X,
|
|
172
|
+
onPointerUp: Z,
|
|
173
|
+
onPointerCancel: Z,
|
|
174
|
+
className: e([ie, ae[t]])
|
|
175
|
+
}, t))
|
|
176
|
+
}),
|
|
177
|
+
/* @__PURE__ */ m("span", {
|
|
178
|
+
"data-slot": "crop-description",
|
|
179
|
+
id: G,
|
|
180
|
+
className: e([S]),
|
|
181
|
+
children: K === void 0 ? "" : `Crop starts ${Math.round(K.x * 100)}% from the left and ${Math.round(K.y * 100)}% from the top, covering ${Math.round(K.width * 100)}% of the width and ${Math.round(K.height * 100)}% of the height. Arrow keys move the crop. Shift and arrow keys resize it.`
|
|
182
|
+
})
|
|
183
|
+
]
|
|
184
|
+
})]
|
|
185
|
+
});
|
|
186
|
+
}
|
|
187
|
+
//#endregion
|
|
188
|
+
export { w as default };
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
//#region src/lib/components/ImageCrop/image-crop-geometry.ts
|
|
3
|
+
var e = .05, t = .01, n = (e) => Math.round(e * 1e6) / 1e6, r = (e, t, n) => Math.min(n, Math.max(e, t)), i = (e) => e !== void 0 && e > 0, a = (e, t) => t.width / (e * t.height);
|
|
4
|
+
function o(t, i, o) {
|
|
5
|
+
let s = a(i, o), c = r(t.width, e, 1), l = c * s, u = c;
|
|
6
|
+
return l > 1 && (l = 1, u = r(1 / s, e, 1)), {
|
|
7
|
+
x: n(r(t.x, 0, 1 - u)),
|
|
8
|
+
y: n(r(t.y, 0, 1 - l)),
|
|
9
|
+
width: n(u),
|
|
10
|
+
height: n(l)
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
function s(t, a, s) {
|
|
14
|
+
if (i(a)) return o(t, a, s);
|
|
15
|
+
let c = r(t.width, e, 1), l = r(t.height, e, 1);
|
|
16
|
+
return {
|
|
17
|
+
x: n(r(t.x, 0, 1 - c)),
|
|
18
|
+
y: n(r(t.y, 0, 1 - l)),
|
|
19
|
+
width: n(c),
|
|
20
|
+
height: n(l)
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
function c(e, t) {
|
|
24
|
+
let r = s({
|
|
25
|
+
x: .1,
|
|
26
|
+
y: .1,
|
|
27
|
+
width: .8,
|
|
28
|
+
height: .8
|
|
29
|
+
}, e, t);
|
|
30
|
+
return {
|
|
31
|
+
x: n((1 - r.width) / 2),
|
|
32
|
+
y: n((1 - r.height) / 2),
|
|
33
|
+
width: r.width,
|
|
34
|
+
height: r.height
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
function l(e, t, i) {
|
|
38
|
+
return {
|
|
39
|
+
x: n(r(e.x + t, 0, 1 - e.width)),
|
|
40
|
+
y: n(r(e.y + i, 0, 1 - e.height)),
|
|
41
|
+
width: e.width,
|
|
42
|
+
height: e.height
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
function u(t, s, c, l, u) {
|
|
46
|
+
if (i(l)) {
|
|
47
|
+
let n = a(l, u), i = r(t.width + s + c / n, e, 1);
|
|
48
|
+
return o({
|
|
49
|
+
...t,
|
|
50
|
+
width: i
|
|
51
|
+
}, l, u);
|
|
52
|
+
}
|
|
53
|
+
let d = r(t.width + s, e, 1), f = r(t.height + c, e, 1);
|
|
54
|
+
return {
|
|
55
|
+
x: n(r(t.x, 0, 1 - d)),
|
|
56
|
+
y: n(r(t.y, 0, 1 - f)),
|
|
57
|
+
width: n(d),
|
|
58
|
+
height: n(f)
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
function d(t, o, s, c, l) {
|
|
62
|
+
let u = o === "nw" || o === "sw" ? t.x + t.width : t.x, d = o === "nw" || o === "ne" ? t.y + t.height : t.y, f = o === "nw" || o === "sw" ? u : 1 - u, p = o === "nw" || o === "ne" ? d : 1 - d, m = r(Math.abs(s.x - u), Math.min(e, f), f), h = r(Math.abs(s.y - d), Math.min(e, p), p);
|
|
63
|
+
if (i(c)) {
|
|
64
|
+
let t = a(c, l);
|
|
65
|
+
h = m * t, h > p && (h = p, m = r(h / t, Math.min(e, f), f));
|
|
66
|
+
}
|
|
67
|
+
return {
|
|
68
|
+
x: n(o === "nw" || o === "sw" ? u - m : u),
|
|
69
|
+
y: n(o === "nw" || o === "ne" ? d - h : d),
|
|
70
|
+
width: n(m),
|
|
71
|
+
height: n(h)
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
function f(e, t, n) {
|
|
75
|
+
return {
|
|
76
|
+
x: (e - n.left) / Math.max(n.width, 1),
|
|
77
|
+
y: (t - n.top) / Math.max(n.height, 1)
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
//#endregion
|
|
81
|
+
export { t as KEYBOARD_STEP, e as MIN_CROP, c as defaultRect, o as fitAspect, l as moveRect, s as normalizeRect, f as pointerToNormalized, d as resizeFromAnchor, u as resizeRect };
|
|
@@ -184,6 +184,12 @@ var e = {
|
|
|
184
184
|
moreTags: "+{count}"
|
|
185
185
|
},
|
|
186
186
|
spinner: { loading: "جارٍ التحميل" },
|
|
187
|
+
splitter: {
|
|
188
|
+
collapseLead: "طيّ اللوحة الأمامية",
|
|
189
|
+
expandLead: "توسيع اللوحة الأمامية",
|
|
190
|
+
collapseTrail: "طيّ اللوحة الخلفية",
|
|
191
|
+
expandTrail: "توسيع اللوحة الخلفية"
|
|
192
|
+
},
|
|
187
193
|
sources: {
|
|
188
194
|
label: "المصادر",
|
|
189
195
|
expand: "إظهار المقتطف",
|
|
@@ -184,6 +184,12 @@ var e = {
|
|
|
184
184
|
moreTags: "+{count}"
|
|
185
185
|
},
|
|
186
186
|
spinner: { loading: "Lädt" },
|
|
187
|
+
splitter: {
|
|
188
|
+
collapseLead: "Führenden Bereich einklappen",
|
|
189
|
+
expandLead: "Führenden Bereich ausklappen",
|
|
190
|
+
collapseTrail: "Nachfolgenden Bereich einklappen",
|
|
191
|
+
expandTrail: "Nachfolgenden Bereich ausklappen"
|
|
192
|
+
},
|
|
187
193
|
sources: {
|
|
188
194
|
label: "Quellen",
|
|
189
195
|
expand: "Auszug anzeigen",
|
|
@@ -184,6 +184,12 @@ var e = {
|
|
|
184
184
|
moreTags: "+{count}"
|
|
185
185
|
},
|
|
186
186
|
spinner: { loading: "Cargando" },
|
|
187
|
+
splitter: {
|
|
188
|
+
collapseLead: "Contraer el panel anterior",
|
|
189
|
+
expandLead: "Expandir el panel anterior",
|
|
190
|
+
collapseTrail: "Contraer el panel siguiente",
|
|
191
|
+
expandTrail: "Expandir el panel siguiente"
|
|
192
|
+
},
|
|
187
193
|
sources: {
|
|
188
194
|
label: "Fuentes",
|
|
189
195
|
expand: "Mostrar extracto",
|
|
@@ -184,6 +184,12 @@ var e = {
|
|
|
184
184
|
moreTags: "+{count}"
|
|
185
185
|
},
|
|
186
186
|
spinner: { loading: "Chargement" },
|
|
187
|
+
splitter: {
|
|
188
|
+
collapseLead: "Réduire le panneau précédent",
|
|
189
|
+
expandLead: "Développer le panneau précédent",
|
|
190
|
+
collapseTrail: "Réduire le panneau suivant",
|
|
191
|
+
expandTrail: "Développer le panneau suivant"
|
|
192
|
+
},
|
|
187
193
|
sources: {
|
|
188
194
|
label: "Sources",
|
|
189
195
|
expand: "Afficher l’extrait",
|
|
@@ -184,6 +184,12 @@ var e = {
|
|
|
184
184
|
moreTags: "+{count}"
|
|
185
185
|
},
|
|
186
186
|
spinner: { loading: "Caricamento" },
|
|
187
|
+
splitter: {
|
|
188
|
+
collapseLead: "Comprimi il pannello precedente",
|
|
189
|
+
expandLead: "Espandi il pannello precedente",
|
|
190
|
+
collapseTrail: "Comprimi il pannello successivo",
|
|
191
|
+
expandTrail: "Espandi il pannello successivo"
|
|
192
|
+
},
|
|
187
193
|
sources: {
|
|
188
194
|
label: "Fonti",
|
|
189
195
|
expand: "Mostra stralcio",
|
|
@@ -184,6 +184,12 @@ var e = {
|
|
|
184
184
|
moreTags: "+{count}"
|
|
185
185
|
},
|
|
186
186
|
spinner: { loading: "読み込み中" },
|
|
187
|
+
splitter: {
|
|
188
|
+
collapseLead: "前のペインを折りたたむ",
|
|
189
|
+
expandLead: "前のペインを展開する",
|
|
190
|
+
collapseTrail: "後ろのペインを折りたたむ",
|
|
191
|
+
expandTrail: "後ろのペインを展開する"
|
|
192
|
+
},
|
|
187
193
|
sources: {
|
|
188
194
|
label: "引用元",
|
|
189
195
|
expand: "抜粋を表示",
|