@solibo/solibo-ui 0.3.28 → 0.3.30

package/dist/components/_croppable/index.js

@@ -1,244 +1,323 @@
-import { jsxs as gt, jsx as p } from "react/jsx-runtime";
-import { t as nt } from "../../classix-DG18itHa.js";
-import { useRef as l, useState as L, useEffect as O } from "react";
-import { Figure as wt } from "../figure/index.js";
+import { jsxs as J, jsx as w } from "react/jsx-runtime";
+import { t as rt } from "../../classix-DG18itHa.js";
+import { useRef as y, useState as S, useEffect as E } from "react";
+import { Button as wt } from "../button/index.js";
+import { Figure as yt } from "../figure/index.js";
 import { Icon as xt } from "../icon/index.js";
-import '../../assets/index23.css';const yt = "_croppable_1mlwb_1", bt = "_viewport_1mlwb_21", zt = "_media_1mlwb_34", Mt = "_draggable_1mlwb_45", _t = "_dragging_1mlwb_49", Rt = "_inner_1mlwb_53", z = {
-  croppable: yt,
-  viewport: bt,
-  media: zt,
-  draggable: Mt,
-  dragging: _t,
-  inner: Rt
-}, It = 192, X = {
+import '../../assets/index22.css';const Pt = "_croppable_1ykk4_1", Yt = "_empty_1ykk4_14", Xt = "_media_1ykk4_22", At = "_overlay_1ykk4_33", Dt = "_viewport_1ykk4_41", Wt = "_draggable_1ykk4_53", Ht = "_dragging_1ykk4_57", St = "_inner_1ykk4_61", Zt = "_standalone_1ykk4_77", M = {
+  croppable: Pt,
+  empty: Yt,
+  media: Xt,
+  overlay: At,
+  viewport: Dt,
+  draggable: Wt,
+  dragging: Ht,
+  inner: St,
+  standalone: Zt
+}, jt = 192, $ = {
   offset: {
     x: 0,
     y: 0
   },
   zoom: 1
-}, M = 10, W = 0.1, d = (v, Y, E) => Math.min(E, Math.max(Y, v)), Ut = ({
-  children: v,
-  fill: Y = "none",
-  height: E,
-  onCroppableChange: Z,
-  onFileChange: g,
-  onTransformChange: A,
-  transform: h
+}, bt = "Select image", I = 10, Z = 0.1, Bt = 0.92, d = (u, p, _) => Math.min(_, Math.max(p, u)), Nt = (u) => new Promise((p, _) => {
+  const h = URL.createObjectURL(u), s = new globalThis.Image();
+  s.onload = () => {
+    URL.revokeObjectURL(h), p(s);
+  }, s.onerror = () => {
+    URL.revokeObjectURL(h), _(new Error("croppable-image-load-failed"));
+  }, s.src = h;
+}), $t = async ({
+  file: u,
+  fill: p,
+  transform: _,
+  viewport: h
 }) => {
-  const _ = l(null), w = l(null), a = l(null), $ = l(null), x = l(null), P = l(null), R = l(null), D = l(/* @__PURE__ */ new Map()), i = l(X), S = l(null), [u, k] = L(null), [q, G] = L(null), [K, j] = L(!1), [ot, V] = L(X), [f, ct] = L({
+  const s = await Nt(u), P = h.width / s.naturalWidth, k = h.height / s.naturalHeight, x = Math.max(P, k), j = s.naturalWidth * x, R = s.naturalHeight * x, C = p === "width" ? Math.max(Z, P / x) : p === "height" ? Math.max(Z, k / x) : Z, L = d(_.zoom, C, I), g = x * L, b = j * L, F = R * L, m = (h.width - b) / 2 + _.offset.x, T = (h.height - F) / 2 + _.offset.y, Y = d((0 - m) / g, 0, s.naturalWidth), v = d((0 - T) / g, 0, s.naturalHeight), U = d(h.width / g, 1, Math.max(1, s.naturalWidth - Y)), c = d(h.height / g, 1, Math.max(1, s.naturalHeight - v)), z = document.createElement("canvas"), a = z.getContext("2d");
+  if (!a)
+    throw new Error("croppable-image-context-missing");
+  z.width = Math.max(1, Math.round(U)), z.height = Math.max(1, Math.round(c)), a.drawImage(s, Y, v, U, c, 0, 0, z.width, z.height);
+  const X = u.type.startsWith("image/") ? u.type : "image/jpeg", A = await new Promise((G) => {
+    z.toBlob(G, X, Bt);
+  });
+  if (!A)
+    throw new Error("croppable-image-export-failed");
+  return new globalThis.File([A], u.name, {
+    lastModified: Date.now(),
+    type: A.type || X
+  });
+}, Ct = ({
+  children: u,
+  fill: p = "none",
+  height: _,
+  image: h,
+  label: s,
+  onCroppableChange: P,
+  onFileChange: k,
+  onImageChange: x,
+  onTransformChange: j,
+  transform: R,
+  standalone: C
+}) => {
+  const L = y(null), g = y(null), b = y(null), F = y(null), m = y(x), T = y(null), Y = y(null), v = y(null), U = y(/* @__PURE__ */ new Map()), c = y($), z = y(null), [a, X] = S(null), [A, G] = S(null), [ot, tt] = S(!1), [zt, ct] = S($), [q, it] = S(null), [f, Mt] = S({
     width: 0,
     height: 0
-  }), I = (() => {
-    const t = f.width, e = f.height;
-    if (!t || !e) return {
+  }), B = (() => {
+    const t = f.width, n = f.height;
+    if (!t || !n) return {
       width: 0,
       height: 0,
-      minZoom: W
+      minZoom: Z
     };
-    if (!u) return {
+    if (!a) return {
       width: t,
-      height: e,
-      minZoom: W
+      height: n,
+      minZoom: Z
     };
-    const n = t / u.width, r = e / u.height, o = Math.max(n, r), c = Y === "width" ? n / o : Y === "height" ? r / o : 0;
+    const r = t / a.width, e = n / a.height, o = Math.max(r, e), i = p === "width" ? r / o : p === "height" ? e / o : 0;
     return {
-      width: u.width * o,
-      height: u.height * o,
-      minZoom: Math.max(W, c)
+      width: a.width * o,
+      height: a.height * o,
+      minZoom: Math.max(Z, i)
     };
-  })(), y = I.minZoom, B = h ?? ot, T = d(B.zoom, y, M), J = v ?? (q ? /* @__PURE__ */ p("img", { draggable: !1, onLoad: (t) => {
-    const e = t.currentTarget;
-    e.naturalWidth && e.naturalHeight && k({
-      width: e.naturalWidth,
-      height: e.naturalHeight
+  })(), D = B.minZoom, N = R ?? zt, W = d(N.zoom, D, I), K = A ?? h ?? null, st = !u && !!h && !A && !q, Q = !st, at = u ?? (K ? /* @__PURE__ */ w("img", { alt: "", draggable: !1, onLoad: (t) => {
+    const n = t.currentTarget;
+    n.naturalWidth && n.naturalHeight && X({
+      width: n.naturalWidth,
+      height: n.naturalHeight
     });
-  }, src: q }) : null), b = J == null, N = (t, e) => {
+  }, src: K }) : null), H = at == null, et = (t, n) => {
     const {
-      maxX: n,
-      maxY: r
-    } = F(e);
+      maxX: r,
+      maxY: e
+    } = ut(n);
     return {
-      x: d(t.x, -n, n),
-      y: d(t.y, -r, r)
+      x: d(t.x, -r, r),
+      y: d(t.y, -e, e)
     };
-  }, Q = (t, e) => {
-    const n = S.current;
-    if (!n) return null;
-    const r = n.getBoundingClientRect(), o = t - r.left - r.width / 2, c = e - r.top - r.height / 2;
+  }, lt = (t, n) => {
+    const r = z.current;
+    if (!r) return null;
+    const e = r.getBoundingClientRect(), o = t - e.left - e.width / 2, i = n - e.top - e.height / 2;
     return {
       x: o,
-      y: c
+      y: i
     };
-  }, it = (t, e, n, r) => {
-    const o = d(e, y, M), c = d(n, y, M);
+  }, _t = (t, n, r, e) => {
+    const o = d(n, D, I), i = d(r, D, I);
     if (o === 0) return t;
-    const s = c / o;
+    const l = i / o;
     return {
-      x: (1 - s) * r.x + s * t.x,
-      y: (1 - s) * r.y + s * t.y
+      x: (1 - l) * e.x + l * t.x,
+      y: (1 - l) * e.y + l * t.y
     };
-  }, st = (t, e, n) => {
-    const r = i.current.zoom, o = d(t, y, M), c = i.current.offset, s = n ? it(c, r, o, n) : e, m = N(s, o);
-    i.current = {
+  }, kt = (t, n, r) => {
+    const e = c.current.zoom, o = d(t, D, I), i = c.current.offset, l = r ? _t(i, e, o, r) : n, O = et(l, o);
+    c.current = {
       zoom: o,
-      offset: m
-    }, h || V({
+      offset: O
+    }, R || ct({
       zoom: o,
-      offset: m
-    }), A == null || A({
+      offset: O
+    }), j == null || j({
       zoom: o,
-      offset: m
+      offset: O
     });
-  }, U = (t, e, n) => {
-    P.current = {
+  }, V = (t, n, r) => {
+    Y.current = {
       zoom: t,
-      offset: e,
-      anchor: n ?? null
-    }, w.current == null && (w.current = window.requestAnimationFrame(() => {
-      w.current = null;
-      const r = P.current;
-      P.current = null;
-      const o = (r == null ? void 0 : r.zoom) ?? i.current.zoom, c = (r == null ? void 0 : r.offset) ?? i.current.offset, s = (r == null ? void 0 : r.anchor) ?? null;
-      st(o, c, s);
+      offset: n,
+      anchor: r ?? null
+    }, g.current == null && (g.current = window.requestAnimationFrame(() => {
+      g.current = null;
+      const e = Y.current;
+      Y.current = null;
+      const o = (e == null ? void 0 : e.zoom) ?? c.current.zoom, i = (e == null ? void 0 : e.offset) ?? c.current.offset, l = (e == null ? void 0 : e.anchor) ?? null;
+      kt(o, i, l);
     }));
+  }, Rt = (t) => {
+    if (H || !Q) return;
+    const n = t.ctrlKey ? 1e-3 : 25e-5, r = c.current.zoom * Math.exp(-t.deltaY * n), e = lt(t.clientX, t.clientY);
+    V(r, c.current.offset, e);
   }, ut = (t) => {
-    if (b) return;
-    const e = t.ctrlKey ? 1e-3 : 25e-5, n = i.current.zoom * Math.exp(-t.deltaY * e), r = Q(t.clientX, t.clientY);
-    U(n, i.current.offset, r);
-  }, F = (t) => {
-    const e = f.width, n = f.height;
-    if (!e || !n) return {
+    const n = f.width, r = f.height;
+    if (!n || !r) return {
       maxX: 0,
       maxY: 0
     };
-    const r = d(t, y, M), o = I.width * r, c = I.height * r, s = Math.max(0, (o - e) / 2), m = Math.max(0, (c - n) / 2);
+    const e = d(t, D, I), o = B.width * e, i = B.height * e, l = Math.max(0, (o - n) / 2), O = Math.max(0, (i - r) / 2);
     return {
-      maxX: s,
-      maxY: m
+      maxX: l,
+      maxY: O
     };
-  }, lt = (t) => {
+  }, Lt = (t) => {
     var o;
-    const e = t.target, n = ((o = e.files) == null ? void 0 : o[0]) ?? null;
-    if (x.current && (URL.revokeObjectURL(x.current), x.current = null), !n) {
-      G(null), g == null || g(null), e.value = "";
+    const n = t.target, r = ((o = n.files) == null ? void 0 : o[0]) ?? null;
+    if (T.current && (URL.revokeObjectURL(T.current), T.current = null), !r) {
+      G(null), it(null), k == null || k(null), n.value = "";
       return;
     }
-    const r = URL.createObjectURL(n);
-    x.current = r, G(r), k(null), U(X.zoom, X.offset), i.current = X, g == null || g(n), e.value = "";
-  }, at = (t) => {
-    if (!(b || t.pointerType === "mouse" && t.button !== 0)) {
+    const e = URL.createObjectURL(r);
+    T.current = e, G(e), X(null), it(r), V($.zoom, $.offset), c.current = $, k == null || k(r), n.value = "";
+  }, Tt = (t) => {
+    if (!(H || !Q || t.pointerType === "mouse" && t.button !== 0)) {
       if (t.currentTarget.setPointerCapture(t.pointerId), t.pointerType === "touch") {
-        const e = D.current;
-        if (e.set(t.pointerId, {
+        const n = U.current;
+        if (n.set(t.pointerId, {
           x: t.clientX,
           y: t.clientY
-        }), e.size === 2) {
-          a.current = null, _.current = null, j(!1);
-          const [n, r] = Array.from(e.values());
-          R.current = Math.hypot(n.x - r.x, n.y - r.y);
+        }), n.size === 2) {
+          b.current = null, L.current = null, tt(!1);
+          const [r, e] = Array.from(n.values());
+          v.current = Math.hypot(r.x - e.x, r.y - e.y);
           return;
         }
       }
-      _.current = t.pointerId, a.current = {
+      L.current = t.pointerId, b.current = {
         x: t.clientX,
         y: t.clientY,
-        originX: i.current.offset.x,
-        originY: i.current.offset.y
+        originX: c.current.offset.x,
+        originY: c.current.offset.y
       };
     }
-  }, ft = (t) => {
-    if (b) return;
+  }, vt = (t) => {
+    if (H || !Q) return;
     if (t.pointerType === "touch") {
-      const o = D.current;
+      const o = U.current;
       if (!o.has(t.pointerId)) return;
       if (o.set(t.pointerId, {
         x: t.clientX,
         y: t.clientY
       }), o.size === 2) {
-        const [c, s] = Array.from(o.values()), m = c.x - s.x, dt = c.y - s.y, et = Math.hypot(m, dt), rt = {
-          x: (c.x + s.x) / 2,
-          y: (c.y + s.y) / 2
+        const [i, l] = Array.from(o.values()), O = i.x - l.x, Et = i.y - l.y, pt = Math.hypot(O, Et), gt = {
+          x: (i.x + l.x) / 2,
+          y: (i.y + l.y) / 2
         };
-        if (R.current) {
-          const ht = et / R.current, mt = i.current.zoom * ht, pt = Q(rt.x, rt.y);
-          U(mt, i.current.offset, pt);
+        if (v.current) {
+          const Ut = pt / v.current, Ot = c.current.zoom * Ut, It = lt(gt.x, gt.y);
+          V(Ot, c.current.offset, It);
         }
-        R.current = et;
+        v.current = pt;
         return;
       }
     }
-    if (_.current !== t.pointerId || !a.current || !H) return;
-    const e = t.clientX - a.current.x, n = t.clientY - a.current.y, r = Math.abs(e) + Math.abs(n);
-    !K && r > 2 && j(!0), !(r <= 1) && U(i.current.zoom, {
-      x: a.current.originX + e,
-      y: a.current.originY + n
+    if (L.current !== t.pointerId || !b.current || !nt) return;
+    const n = t.clientX - b.current.x, r = t.clientY - b.current.y, e = Math.abs(n) + Math.abs(r);
+    !ot && e > 2 && tt(!0), !(e <= 1) && V(c.current.zoom, {
+      x: b.current.originX + n,
+      y: b.current.originY + r
     });
-  }, C = (t) => {
-    t.pointerType === "touch" && (D.current.delete(t.pointerId), D.current.size < 2 && (R.current = null)), _.current === t.pointerId && (_.current = null, a.current = null, j(!1));
+  }, ht = (t) => {
+    t.pointerType === "touch" && (U.current.delete(t.pointerId), U.current.size < 2 && (v.current = null)), L.current === t.pointerId && (L.current = null, b.current = null, tt(!1));
   };
-  O(() => {
-    if (!h) return;
-    const t = d(h.zoom, y, M);
-    i.current = {
+  E(() => {
+    if (!R) return;
+    const t = d(R.zoom, D, I);
+    c.current = {
       zoom: t,
-      offset: N(h.offset, t)
+      offset: et(R.offset, t)
     };
-  }, [h, f.width, f.height, u == null ? void 0 : u.width, u == null ? void 0 : u.height]), O(() => () => {
-    x.current && URL.revokeObjectURL(x.current);
-  }, []), O(() => {
-    const t = S.current;
+  }, [R, f.width, f.height, a == null ? void 0 : a.width, a == null ? void 0 : a.height]), E(() => () => {
+    T.current && URL.revokeObjectURL(T.current);
+  }, []), E(() => {
+    const t = z.current;
     if (!t) return;
-    const e = () => {
+    const n = () => {
       const o = t.getBoundingClientRect();
-      ct((c) => c.width === o.width && c.height === o.height ? c : {
+      Mt((i) => i.width === o.width && i.height === o.height ? i : {
         width: o.width,
         height: o.height
-      }), Z && Z(o);
+      }), P && P(o);
     };
-    e();
-    const n = () => e();
-    if (window.addEventListener("scroll", n, !0), typeof ResizeObserver > "u") {
-      const o = () => e();
+    n();
+    const r = () => n();
+    if (window.addEventListener("scroll", r, !0), typeof ResizeObserver > "u") {
+      const o = () => n();
       return window.addEventListener("resize", o), () => {
-        window.removeEventListener("resize", o), window.removeEventListener("scroll", n, !0);
+        window.removeEventListener("resize", o), window.removeEventListener("scroll", r, !0);
       };
     }
-    const r = new ResizeObserver(() => e());
-    return r.observe(t), () => {
-      r.disconnect(), window.removeEventListener("scroll", n, !0);
+    const e = new ResizeObserver(() => n());
+    return e.observe(t), () => {
+      e.disconnect(), window.removeEventListener("scroll", r, !0);
     };
-  }, [Z]), O(() => {
-    if (h) return;
-    const t = i.current.offset, e = N(t, T);
-    t.x === e.x && t.y === e.y || (i.current = {
-      zoom: i.current.zoom,
-      offset: e
-    }, V((n) => ({
-      ...n,
-      offset: e
+  }, [P]), E(() => {
+    if (R) return;
+    const t = c.current.offset, n = et(t, W);
+    t.x === n.x && t.y === n.y || (c.current = {
+      zoom: c.current.zoom,
+      offset: n
+    }, ct((r) => ({
+      ...r,
+      offset: n
     })));
-  }, [T, u, f.width, f.height]), O(() => () => {
-    w.current != null && (window.cancelAnimationFrame(w.current), w.current = null);
+  }, [W, a, f.width, f.height]), E(() => {
+    K || X(null);
+  }, [K]), E(() => {
+    m.current = x;
+  }, [x]), E(() => {
+    var r;
+    if (!x) return;
+    if (!q || !f.width || !f.height || u) {
+      (r = m.current) == null || r.call(m, null);
+      return;
+    }
+    let t = !0;
+    const n = window.setTimeout(() => {
+      $t({
+        file: q,
+        fill: p,
+        transform: {
+          zoom: W,
+          offset: N.offset
+        },
+        viewport: f
+      }).then((e) => {
+        var o;
+        t && ((o = m.current) == null || o.call(m, e));
+      }).catch(() => {
+        var e;
+        t && ((e = m.current) == null || e.call(m, null));
+      });
+    }, 75);
+    return () => {
+      t = !1, window.clearTimeout(n);
+    };
+  }, [u, W, N.offset, p, q, f]), E(() => () => {
+    g.current != null && (window.cancelAnimationFrame(g.current), g.current = null);
   }, []);
-  const tt = F(T), H = !b && (tt.maxX > 0 || tt.maxY > 0);
-  return /* @__PURE__ */ gt("div", { className: z.croppable, onClick: () => {
+  const dt = ut(W), nt = !H && Q && (dt.maxX > 0 || dt.maxY > 0), mt = () => {
     var t;
-    b && ((t = $.current) == null || t.click());
+    return (t = F.current) == null ? void 0 : t.click();
+  }, ft = (t) => {
+    t.preventDefault(), t.stopPropagation(), mt();
+  };
+  return /* @__PURE__ */ J("div", { className: rt(M.croppable, C && M.standalone), onClick: () => {
+    H && mt();
   }, "data-component": "croppable", children: [
-    /* @__PURE__ */ p("input", { accept: "image/*", onChange: lt, ref: $, type: "file" }),
-    /* @__PURE__ */ p("div", { className: z.viewport, ref: S, onDragStart: (t) => t.preventDefault(), onPointerDown: at, onPointerMove: ft, onPointerUp: C, onPointerCancel: C, onWheel: ut, style: {
-      "--croppable-height": `${E ?? It}px`,
-      "--croppable-zoom": T,
-      "--croppable-x": `${B.offset.x}px`,
-      "--croppable-y": `${B.offset.y}px`,
-      ...u ? {
-        "--croppable-image-width": `${I.width}px`,
-        "--croppable-image-height": `${I.height}px`
+    /* @__PURE__ */ w("input", { accept: "image/*", onChange: Lt, ref: F, type: "file" }),
+    /* @__PURE__ */ w("div", { className: M.viewport, ref: z, onDragStart: (t) => t.preventDefault(), onPointerDown: Tt, onPointerMove: vt, onPointerUp: ht, onPointerCancel: ht, onWheel: Rt, style: {
+      "--croppable-height": `${_ ?? jt}px`,
+      "--croppable-zoom": W,
+      "--croppable-x": `${N.offset.x}px`,
+      "--croppable-y": `${N.offset.y}px`,
+      ...a ? {
+        "--croppable-image-width": `${B.width}px`,
+        "--croppable-image-height": `${B.height}px`
       } : null
-    }, children: b ? /* @__PURE__ */ p(wt, { children: /* @__PURE__ */ p(xt, { name: "image" }) }) : /* @__PURE__ */ p("div", { className: nt(z.media, H && z.draggable, H && K && z.dragging), children: /* @__PURE__ */ p("div", { className: nt(z.inner), children: J }) }) })
+    }, children: H ? /* @__PURE__ */ J("div", { className: M.empty, children: [
+      /* @__PURE__ */ w(yt, { children: /* @__PURE__ */ w(xt, { name: "image", size: "large" }) }),
+      /* @__PURE__ */ w(wt, { onClick: ft, children: s ?? bt })
+    ] }) : /* @__PURE__ */ J("div", { className: rt(M.media, nt && M.draggable, nt && ot && M.dragging), children: [
+      /* @__PURE__ */ w("div", { className: rt(M.inner), children: at }),
+      st && /* @__PURE__ */ w("div", { className: M.overlay, children: /* @__PURE__ */ J("div", { className: M.empty, children: [
+        /* @__PURE__ */ w(yt, { children: /* @__PURE__ */ w(xt, { name: "image", size: "large" }) }),
+        /* @__PURE__ */ w(wt, { onClick: ft, children: s ?? bt })
+      ] }) })
+    ] }) })
   ] });
 };
 export {
-  Ut as Croppable
+  Ct as Croppable
 };
 //# sourceMappingURL=index.js.map