@rhino-design/vue 0.2.2 → 0.2.6

package/dist/components/XCropper.vue2.js

@@ -0,0 +1,525 @@
+import { defineComponent as qe, ref as d, reactive as Ue, computed as B, watch as P, nextTick as fe, onMounted as Ve, onBeforeUnmount as je, openBlock as L, createElementBlock as N, normalizeStyle as de, createElementVNode as O, withModifiers as he, normalizeClass as ve, mergeProps as Ge, createCommentVNode as V, Fragment as Je } from "vue";
+const Ke = ["src"], Qe = {
+  key: 2,
+  class: "x-cropper__placeholder"
+}, h = 40, tt = /* @__PURE__ */ qe({
+  __name: "XCropper",
+  props: {
+    src: {},
+    shape: { default: "rect" },
+    aspectRatio: {},
+    defaultAspectRatio: { default: 1 },
+    rotate: {},
+    zoom: {},
+    minZoom: { default: 0.1 },
+    maxZoom: { default: 3 },
+    zoomStep: { default: 0.1 },
+    fill: { default: "rgba(0, 0, 0, 0)" },
+    showResizeBox: { type: Boolean, default: !0 },
+    cropperBoxClassName: {},
+    cropperBoxStyle: {},
+    imgProps: {},
+    preview: {},
+    disabled: { type: Boolean, default: !1 },
+    width: { default: "100%" },
+    height: { default: 360 }
+  },
+  emits: ["update:zoom", "update:rotate", "change", "crop", "ready", "error"],
+  setup(me, { expose: xe, emit: ge }) {
+    const o = me, z = ge, S = d(null), j = d(null), v = d(!1), C = d(!1), E = d(0), I = d(0), c = d(400), p = d(300), b = d(0), R = d(0), x = d(0), g = d(0), m = d(1), _ = d(0), i = Ue({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    }), Z = d(null), ne = d(12);
+    let A = null, X = 0;
+    function M(e) {
+      return typeof e == "number" && Number.isFinite(e);
+    }
+    function s(e, t, a) {
+      return t > a ? e : Math.min(a, Math.max(t, e));
+    }
+    function ae(e, t) {
+      if (typeof e == "number" && Number.isFinite(e)) return e;
+      if (typeof e == "string") {
+        const a = Number.parseFloat(e);
+        if (Number.isFinite(a)) return a;
+      }
+      return t;
+    }
+    function oe(e, t) {
+      return e == null || e === "" ? t : typeof e == "number" ? `${e}px` : e;
+    }
+    const we = B(() => ({
+      width: oe(o.width, "100%"),
+      height: oe(o.height, "360px")
+    })), Y = B(() => {
+      const e = M(o.minZoom) ? o.minZoom : 0.1, t = M(o.maxZoom) ? o.maxZoom : 3;
+      return e <= t ? { min: e, max: t } : { min: t, max: e };
+    }), ye = B(() => o.zoomStep && o.zoomStep > 0 ? o.zoomStep : 0.1), G = B(() => !M(o.aspectRatio) || o.aspectRatio <= 0 ? null : o.aspectRatio), Be = B(() => G.value ? G.value : M(o.defaultAspectRatio) && o.defaultAspectRatio > 0 ? o.defaultAspectRatio : 1), F = B(() => !!o.disabled), Ce = B(() => [
+      "x-cropper__box",
+      o.shape === "round" ? "is-round" : "",
+      o.shape === "roundRect" ? "is-round-rect" : "",
+      o.cropperBoxClassName || ""
+    ]), Me = B(() => ({
+      left: `${i.x}px`,
+      top: `${i.y}px`,
+      width: `${i.width}px`,
+      height: `${i.height}px`
+    })), Pe = B(() => ({
+      width: `${b.value}px`,
+      height: `${R.value}px`,
+      transform: `translate(-50%, -50%) translate(${x.value}px, ${g.value}px) rotate(${_.value}deg) scale(${m.value})`
+    }));
+    function $(e) {
+      const t = e instanceof Error ? e : new Error(String(e));
+      z("error", t);
+    }
+    function be() {
+      const e = b.value * m.value, t = R.value * m.value, a = c.value / 2 + x.value, u = p.value / 2 + g.value;
+      return {
+        zoom: m.value,
+        rotate: _.value,
+        cropBox: {
+          x: i.x,
+          y: i.y,
+          width: i.width,
+          height: i.height
+        },
+        imageRect: {
+          x: a - e / 2,
+          y: u - t / 2,
+          width: e,
+          height: t
+        }
+      };
+    }
+    function W() {
+      if (typeof requestAnimationFrame > "u") {
+        ce();
+        return;
+      }
+      X && cancelAnimationFrame(X), X = requestAnimationFrame(() => {
+        X = 0, ce();
+      });
+    }
+    function w(e = !1) {
+      const t = be();
+      z("change", t), e && z("crop", t), W();
+    }
+    function ie(e) {
+      const t = s(e, Y.value.min, Y.value.max);
+      t !== m.value && (m.value = t, z("update:zoom", t), w(!1));
+    }
+    function Re(e) {
+      !M(e) || e === _.value || (_.value = e, z("update:rotate", e), w(!1));
+    }
+    function k() {
+      var r;
+      const e = (r = S.value) == null ? void 0 : r.getBoundingClientRect(), t = ae(o.width, 400), a = ae(o.height, 300), u = e && e.width > 0 ? e.width : t, n = e && e.height > 0 ? e.height : a;
+      c.value = Math.max(1, u), p.value = Math.max(1, n), re(), _e(), v.value && !C.value && (K(), C.value = !0);
+    }
+    function re() {
+      if (!v.value || E.value <= 0 || I.value <= 0) return;
+      const e = Math.min(
+        c.value / E.value,
+        p.value / I.value
+      );
+      b.value = E.value * e, R.value = I.value * e;
+    }
+    function J(e, t = !0) {
+      i.x = e.x, i.y = e.y, i.width = e.width, i.height = e.height, w(t);
+    }
+    function K() {
+      const e = Be.value, t = c.value * 0.68, a = p.value * 0.68;
+      let u = t, n = u / e;
+      n > a && (n = a, u = n * e), u = s(u, h, c.value), n = s(n, h, p.value), i.width = u, i.height = n, i.x = (c.value - u) / 2, i.y = (p.value - n) / 2;
+    }
+    function _e() {
+      if (i.width <= 0 || i.height <= 0) return;
+      const e = s(i.width, h, c.value), t = s(i.height, h, p.value), a = s(i.x, 0, Math.max(0, c.value - e)), u = s(i.y, 0, Math.max(0, p.value - t));
+      i.width = e, i.height = t, i.x = a, i.y = u;
+    }
+    function ze(e) {
+      if (!M(e) || e <= 0) return;
+      const t = i.x + i.width / 2, a = i.y + i.height / 2, u = Math.min(c.value, p.value * e), n = u / e;
+      let r = s(i.width, h, u), l = r / e;
+      l > n && (l = n, r = l * e);
+      const f = s(t - r / 2, 0, Math.max(0, c.value - r)), ee = s(a - l / 2, 0, Math.max(0, p.value - l));
+      J({
+        x: f,
+        y: ee,
+        width: r,
+        height: l
+      });
+    }
+    function Q(e) {
+      Z.value = e, window.addEventListener("pointermove", le), window.addEventListener("pointerup", q), window.addEventListener("pointercancel", q);
+    }
+    function ue() {
+      Z.value = null, window.removeEventListener("pointermove", le), window.removeEventListener("pointerup", q), window.removeEventListener("pointercancel", q);
+    }
+    function Se(e) {
+      F.value || !v.value || e.target.closest(".x-cropper__box") || (e.preventDefault(), Q({
+        type: "drag-image",
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        startOffsetX: x.value,
+        startOffsetY: g.value,
+        startCropBox: {
+          x: i.x,
+          y: i.y,
+          width: i.width,
+          height: i.height
+        }
+      }));
+    }
+    function Ee(e) {
+      F.value || !v.value || (e.preventDefault(), Q({
+        type: "drag-crop",
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        startOffsetX: x.value,
+        startOffsetY: g.value,
+        startCropBox: {
+          x: i.x,
+          y: i.y,
+          width: i.width,
+          height: i.height
+        }
+      }));
+    }
+    function D(e, t) {
+      F.value || !v.value || !o.showResizeBox || (t.preventDefault(), t.stopPropagation(), Q({
+        type: "resize",
+        pointerId: t.pointerId,
+        startX: t.clientX,
+        startY: t.clientY,
+        startOffsetX: x.value,
+        startOffsetY: g.value,
+        startCropBox: {
+          x: i.x,
+          y: i.y,
+          width: i.width,
+          height: i.height
+        },
+        handle: e
+      }));
+    }
+    function Ie(e, t, a, u) {
+      let n = e.x, r = e.y, l = e.width, f = e.height;
+      return t.includes("w") && (n = e.x + a, l = e.width - a), t.includes("e") && (l = e.width + a), t.includes("n") && (r = e.y + u, f = e.height - u), t.includes("s") && (f = e.height + u), l < h && (t.includes("w") && (n -= h - l), l = h), f < h && (t.includes("n") && (r -= h - f), f = h), n < 0 && (t.includes("w") && (l += n), n = 0), r < 0 && (t.includes("n") && (f += r), r = 0), n + l > c.value && (t.includes("e") ? l = c.value - n : n = c.value - l), r + f > p.value && (t.includes("s") ? f = p.value - r : r = p.value - f), l = s(l, h, c.value), f = s(f, h, p.value), n = s(n, 0, Math.max(0, c.value - l)), r = s(r, 0, Math.max(0, p.value - f)), { x: n, y: r, width: l, height: f };
+    }
+    function Xe(e, t, a, u, n) {
+      const r = (() => {
+        switch (t) {
+          case "nw":
+            return { x: e.x + e.width, y: e.y + e.height };
+          case "ne":
+            return { x: e.x, y: e.y + e.height };
+          case "sw":
+            return { x: e.x + e.width, y: e.y };
+          case "se":
+          default:
+            return { x: e.x, y: e.y };
+        }
+      })(), l = (() => {
+        switch (t) {
+          case "nw":
+            return { x: e.x + a, y: e.y + u };
+          case "ne":
+            return { x: e.x + e.width + a, y: e.y + u };
+          case "sw":
+            return { x: e.x + a, y: e.y + e.height + u };
+          case "se":
+          default:
+            return { x: e.x + e.width + a, y: e.y + e.height + u };
+        }
+      })(), f = Math.abs(r.x - l.x), ee = Math.abs(r.y - l.y) * n, te = Math.max(h, h * n);
+      let y = Math.max(f, ee, te);
+      const $e = (() => {
+        switch (t) {
+          case "nw":
+            return Math.min(r.x, r.y * n);
+          case "ne":
+            return Math.min(c.value - r.x, r.y * n);
+          case "sw":
+            return Math.min(r.x, (p.value - r.y) * n);
+          case "se":
+          default:
+            return Math.min(c.value - r.x, (p.value - r.y) * n);
+        }
+      })();
+      y = s(y, te, Math.max(te, $e));
+      const H = y / n, T = (() => {
+        switch (t) {
+          case "nw":
+            return { x: r.x - y, y: r.y - H, width: y, height: H };
+          case "ne":
+            return { x: r.x, y: r.y - H, width: y, height: H };
+          case "sw":
+            return { x: r.x - y, y: r.y, width: y, height: H };
+          case "se":
+          default:
+            return { x: r.x, y: r.y, width: y, height: H };
+        }
+      })(), ke = s(T.x, 0, Math.max(0, c.value - T.width)), De = s(T.y, 0, Math.max(0, p.value - T.height));
+      return {
+        x: ke,
+        y: De,
+        width: T.width,
+        height: T.height
+      };
+    }
+    function le(e) {
+      const t = Z.value;
+      if (!t || e.pointerId !== t.pointerId) return;
+      e.preventDefault();
+      const a = e.clientX - t.startX, u = e.clientY - t.startY;
+      if (t.type === "drag-image") {
+        x.value = t.startOffsetX + a, g.value = t.startOffsetY + u, w(!1);
+        return;
+      }
+      if (t.type === "drag-crop") {
+        const n = s(
+          t.startCropBox.x + a,
+          0,
+          Math.max(0, c.value - t.startCropBox.width)
+        ), r = s(
+          t.startCropBox.y + u,
+          0,
+          Math.max(0, p.value - t.startCropBox.height)
+        );
+        J({
+          x: n,
+          y: r,
+          width: t.startCropBox.width,
+          height: t.startCropBox.height
+        });
+        return;
+      }
+      if (t.type === "resize" && t.handle) {
+        const n = G.value, r = n ? Xe(t.startCropBox, t.handle, a, u, n) : Ie(t.startCropBox, t.handle, a, u);
+        J(r);
+      }
+    }
+    function q(e) {
+      Z.value && e.pointerId === Z.value.pointerId && ue();
+    }
+    function Ye(e, t, a, u) {
+      const n = Math.min(u, t / 2, a / 2);
+      e.beginPath(), e.moveTo(n, 0), e.lineTo(t - n, 0), e.quadraticCurveTo(t, 0, t, n), e.lineTo(t, a - n), e.quadraticCurveTo(t, a, t - n, a), e.lineTo(n, a), e.quadraticCurveTo(0, a, 0, a - n), e.lineTo(0, n), e.quadraticCurveTo(0, 0, n, 0), e.closePath();
+    }
+    function Fe(e, t, a) {
+      if (o.shape === "round") {
+        const u = Math.min(t, a) / 2;
+        e.beginPath(), e.arc(t / 2, a / 2, u, 0, Math.PI * 2), e.closePath();
+        return;
+      }
+      if (o.shape === "roundRect") {
+        Ye(e, t, a, ne.value);
+        return;
+      }
+      e.beginPath(), e.rect(0, 0, t, a), e.closePath();
+    }
+    function U() {
+      const e = Math.max(1, Math.round(i.width || 1)), t = Math.max(1, Math.round(i.height || 1)), a = typeof window > "u" ? 1 : Math.max(1, window.devicePixelRatio || 1), u = document.createElement("canvas");
+      u.width = Math.max(1, Math.round(e * a)), u.height = Math.max(1, Math.round(t * a)), u.style.width = `${e}px`, u.style.height = `${t}px`;
+      const n = u.getContext("2d");
+      if (!n) return u;
+      if (n.scale(a, a), n.save(), Fe(n, e, t), n.clip(), o.fill && (n.fillStyle = o.fill, n.fillRect(0, 0, e, t)), v.value && j.value && b.value > 0 && R.value > 0) {
+        const r = c.value / 2 + x.value - i.x, l = p.value / 2 + g.value - i.y;
+        n.translate(r, l), n.rotate(_.value * Math.PI / 180), n.scale(m.value, m.value), n.drawImage(
+          j.value,
+          -b.value / 2,
+          -R.value / 2,
+          b.value,
+          R.value
+        );
+      }
+      return n.restore(), u;
+    }
+    function He(e = "image/png", t = 0.92) {
+      try {
+        const a = U().toDataURL(e, t);
+        return typeof a == "string" ? a : "";
+      } catch (a) {
+        return $(a), "";
+      }
+    }
+    function Te(e = "image/png", t = 0.92) {
+      const a = U();
+      return new Promise((u) => {
+        try {
+          a.toBlob((n) => u(n), e, t);
+        } catch (n) {
+          $(n), u(null);
+        }
+      });
+    }
+    function Ze() {
+      x.value = 0, g.value = 0, K(), ie(o.zoom ?? 1), Re(o.rotate ?? 0), w(!0);
+    }
+    function Ae() {
+      x.value = 0, g.value = 0, re(), w(!1);
+    }
+    function se() {
+      if (!o.preview || typeof document > "u") return null;
+      if (typeof o.preview == "string")
+        return document.querySelector(o.preview);
+      if (typeof o.preview == "function") {
+        const e = o.preview();
+        if (e instanceof HTMLElement) return e;
+        if (e && typeof e == "object" && "value" in e) {
+          const t = e.value;
+          return t instanceof HTMLElement ? t : null;
+        }
+        return null;
+      }
+      return o.preview instanceof HTMLElement ? o.preview : null;
+    }
+    function ce() {
+      const e = se();
+      if (!e || !v.value) return;
+      const t = U();
+      t.setAttribute("data-x-cropper-preview", "true"), t.style.width = "100%", t.style.height = "100%", t.style.display = "block", e.innerHTML = "", e.appendChild(t);
+    }
+    function pe() {
+      const e = se();
+      if (!e) return;
+      const t = e.querySelector('[data-x-cropper-preview="true"]');
+      t && t.remove();
+    }
+    function We() {
+      if (!S.value) return;
+      const e = Number.parseFloat(getComputedStyle(S.value).getPropertyValue("--cx-cropper-round-rect-radius"));
+      Number.isFinite(e) && e >= 0 && (ne.value = e);
+    }
+    function Le(e) {
+      const t = e.target;
+      if (E.value = t.naturalWidth || 0, I.value = t.naturalHeight || 0, !E.value || !I.value) {
+        v.value = !1, C.value = !1, $(new Error("Image loaded but natural size is invalid."));
+        return;
+      }
+      v.value = !0, C.value = !1, x.value = 0, g.value = 0, k(), K(), C.value = !0, z("ready"), w(!0);
+    }
+    function Ne() {
+      v.value = !1, C.value = !1, pe(), $(new Error("Image failed to load."));
+    }
+    function Oe(e) {
+      if (F.value || !v.value) return;
+      const t = e.deltaY < 0 ? 1 : -1;
+      ie(m.value + t * ye.value);
+    }
+    return P(
+      () => o.src,
+      () => {
+        v.value = !1, C.value = !1, E.value = 0, I.value = 0, b.value = 0, R.value = 0, x.value = 0, g.value = 0, pe();
+      }
+    ), P(
+      () => o.zoom,
+      (e) => {
+        const t = s(e ?? 1, Y.value.min, Y.value.max);
+        t !== m.value && (m.value = t, w(!1));
+      },
+      { immediate: !0 }
+    ), P(
+      () => o.rotate,
+      (e) => {
+        const t = M(e) ? e : 0;
+        t !== _.value && (_.value = t, w(!1));
+      },
+      { immediate: !0 }
+    ), P(
+      () => [o.minZoom, o.maxZoom],
+      () => {
+        m.value = s(m.value, Y.value.min, Y.value.max), w(!1);
+      }
+    ), P(
+      () => o.aspectRatio,
+      (e) => {
+        !v.value || !C.value || !M(e) || e <= 0 || ze(e);
+      }
+    ), P(
+      () => o.preview,
+      () => W()
+    ), P(
+      () => [o.shape, o.fill, o.cropperBoxStyle, o.cropperBoxClassName],
+      () => W()
+    ), P(
+      () => [o.width, o.height],
+      async () => {
+        await fe(), k(), W();
+      }
+    ), Ve(() => {
+      fe(() => {
+        k(), We();
+      }), typeof ResizeObserver < "u" && (A = new ResizeObserver(() => {
+        k(), W();
+      }), S.value && A.observe(S.value));
+    }), je(() => {
+      ue(), X && typeof cancelAnimationFrame < "u" && cancelAnimationFrame(X), A && (A.disconnect(), A = null);
+    }), xe({
+      getCropperCanvas: U,
+      getCropDataURL: He,
+      getCropBlob: Te,
+      reset: Ze,
+      fitToContainer: Ae
+    }), (e, t) => (L(), N("div", {
+      class: "x-cropper",
+      style: de(we.value)
+    }, [
+      O("div", {
+        ref_key: "stageRef",
+        ref: S,
+        class: ve(["x-cropper__stage", { "is-disabled": F.value }]),
+        onPointerdown: Se,
+        onWheel: he(Oe, ["prevent"])
+      }, [
+        o.src ? (L(), N("img", Ge({
+          key: 0,
+          ref_key: "imageRef",
+          ref: j,
+          class: "x-cropper__image"
+        }, o.imgProps, {
+          src: o.src,
+          style: Pe.value,
+          draggable: "false",
+          onLoad: Le,
+          onError: Ne
+        }), null, 16, Ke)) : V("", !0),
+        v.value ? (L(), N("div", {
+          key: 1,
+          class: ve(Ce.value),
+          style: de([Me.value, o.cropperBoxStyle]),
+          onPointerdown: he(Ee, ["stop"])
+        }, [
+          o.showResizeBox && !F.value ? (L(), N(Je, { key: 0 }, [
+            O("span", {
+              class: "x-cropper__handle x-cropper__handle--nw",
+              onPointerdown: t[0] || (t[0] = (a) => D("nw", a))
+            }, null, 32),
+            O("span", {
+              class: "x-cropper__handle x-cropper__handle--ne",
+              onPointerdown: t[1] || (t[1] = (a) => D("ne", a))
+            }, null, 32),
+            O("span", {
+              class: "x-cropper__handle x-cropper__handle--sw",
+              onPointerdown: t[2] || (t[2] = (a) => D("sw", a))
+            }, null, 32),
+            O("span", {
+              class: "x-cropper__handle x-cropper__handle--se",
+              onPointerdown: t[3] || (t[3] = (a) => D("se", a))
+            }, null, 32)
+          ], 64)) : V("", !0)
+        ], 38)) : V("", !0),
+        o.src ? V("", !0) : (L(), N("div", Qe, "No image"))
+      ], 34)
+    ], 4));
+  }
+});
+export {
+  tt as default
+};