@farris/ui-vue 1.7.0-beta.4 → 1.7.0

package/designer/image-cropper/index.esm.js

@@ -0,0 +1,765 @@
+import Ye, { imageCropperProps as pe } from "../../components/image-cropper/index.esm.js";
+import { inject as Me, ref as r, onMounted as be, onUnmounted as Xe, watch as X, defineComponent as et, createVNode as U, withModifiers as O } from "vue";
+import { useDesignerComponent as tt } from "../../components/designer-canvas/index.esm.js";
+import { resolveAppearance as at, createPropsResolver as it } from "../../components/dynamic-resolver/index.esm.js";
+var ae = /* @__PURE__ */ ((a) => (a.Move = "move", a.Resize = "resize", a))(ae || {});
+function lt() {
+  function a(m) {
+    switch (typeof m == "string" && (m = h(m)), m) {
+      case 2:
+        return { rotate: 0, flip: !0 };
+      case 3:
+        return { rotate: 2, flip: !1 };
+      case 4:
+        return { rotate: 2, flip: !0 };
+      case 5:
+        return { rotate: 1, flip: !0 };
+      case 6:
+        return { rotate: 1, flip: !1 };
+      case 7:
+        return { rotate: 3, flip: !0 };
+      case 8:
+        return { rotate: 3, flip: !1 };
+      default:
+        return { rotate: 0, flip: !1 };
+    }
+  }
+  function h(m) {
+    const t = new DataView(s(m));
+    if (t.getUint16(0, !1) !== 65496)
+      return -2;
+    const y = t.byteLength;
+    let c = 2;
+    for (; c < y; ) {
+      if (t.getUint16(c + 2, !1) <= 8)
+        return -1;
+      const b = t.getUint16(c, !1);
+      if (c += 2, b === 65505) {
+        if (t.getUint32(c += 2, !1) !== 1165519206)
+          return -1;
+        const g = t.getUint16(c += 6, !1) === 18761;
+        c += t.getUint32(c + 4, g);
+        const B = t.getUint16(c, g);
+        c += 2;
+        for (let D = 0; D < B; D++)
+          if (t.getUint16(c + D * 12, g) === 274)
+            return t.getUint16(c + D * 12 + 8, g);
+      } else {
+        if ((b & 65280) !== 65280)
+          break;
+        c += t.getUint16(c, !1);
+      }
+    }
+    return -1;
+  }
+  function s(m) {
+    m = m.replace(/^data:([^;]+);base64,/gmi, "");
+    const t = atob(m), y = t.length, c = new Uint8Array(y);
+    for (let b = 0; b < y; b++)
+      c[b] = t.charCodeAt(b);
+    return c.buffer;
+  }
+  function R(m, t, y) {
+    const c = m.width, b = m.height;
+    t = Math.round(t), y = Math.round(y);
+    const g = c / t, B = b / y, D = Math.ceil(g / 2), n = Math.ceil(B / 2), l = m.getContext("2d");
+    if (l) {
+      const W = l.getImageData(0, 0, c, b), p = l.createImageData(t, y), { data: P } = W, $ = p.data;
+      for (let F = 0; F < y; F++)
+        for (let L = 0; L < t; L++) {
+          const V = (L + F * t) * 4, I = F * B;
+          let A = 0, v = 0, f = 0, q = 0, Q = 0, K = 0, M = 0;
+          const z = Math.floor(L * g), w = Math.floor(F * B);
+          let j = Math.ceil((L + 1) * g), G = Math.ceil((F + 1) * B);
+          j = Math.min(j, c), G = Math.min(G, b);
+          for (let C = w; C < G; C++) {
+            const d = Math.abs(I - C) / n, ie = L * g, ee = d * d;
+            for (let H = z; H < j; H++) {
+              const _ = Math.abs(ie - H) / D, T = Math.sqrt(ee + _ * _);
+              if (T >= 1)
+                continue;
+              A = 2 * T * T * T - 3 * T * T + 1;
+              const E = 4 * (H + C * c);
+              M += A * P[E + 3], f += A, P[E + 3] < 255 && (A = A * P[E + 3] / 250), q += A * P[E], Q += A * P[E + 1], K += A * P[E + 2], v += A;
+            }
+          }
+          $[V] = q / v, $[V + 1] = Q / v, $[V + 2] = K / v, $[V + 3] = M / f;
+        }
+      m.width = t, m.height = y, l.putImageData(p, 0, 0);
+    }
+  }
+  return {
+    resizeCanvas: R,
+    getTransformationsFromExifData: a
+  };
+}
+function nt(a, h, s, R) {
+  function m(n, l) {
+    a.value.x2 = a.value.x1 + (a.value.y2 - a.value.y1) * s.value, n = Math.max(a.value.x2 - h.value.width, 0), l = Math.max(0 - a.value.y1, 0), (n > 0 || l > 0) && (a.value.x2 -= l * s.value > n ? l * s.value : n, a.value.y1 += l * s.value > n ? l : n / s.value);
+  }
+  function t(n, l) {
+    a.value.x2 = a.value.x1 + (a.value.y2 - a.value.y1) * s.value, n = Math.max(a.value.x2 - h.value.width, 0), l = Math.max(a.value.y2 - h.value.height, 0), (n > 0 || l > 0) && (a.value.x2 -= l * s.value > n ? l * s.value : n, a.value.y2 -= l * s.value > n ? l : n / s.value);
+  }
+  function y(n, l) {
+    a.value.y1 = a.value.y2 - (a.value.x2 - a.value.x1) / s.value, n = Math.max(0 - a.value.x1, 0), l = Math.max(0 - a.value.y1, 0), (n > 0 || l > 0) && (a.value.x1 += l * s.value > n ? l * s.value : n, a.value.y1 += l * s.value > n ? l : n / s.value);
+  }
+  function c(n, l) {
+    a.value.y1 = a.value.y2 - (a.value.x2 - a.value.x1) / s.value, n = Math.max(a.value.x2 - h.value.width, 0), l = Math.max(0 - a.value.y1, 0), (n > 0 || l > 0) && (a.value.x2 -= l * s.value > n ? l * s.value : n, a.value.y1 += l * s.value > n ? l : n / s.value);
+  }
+  function b(n, l) {
+    a.value.y2 = a.value.y1 + (a.value.x2 - a.value.x1) / s.value, n = Math.max(a.value.x2 - h.value.width, 0), l = Math.max(a.value.y2 - h.value.height, 0), (n > 0 || l > 0) && (a.value.x2 -= l * s.value > n ? l * s.value : n, a.value.y2 -= l * s.value > n ? l : n / s.value);
+  }
+  function g(n, l) {
+    a.value.y2 = a.value.y1 + (a.value.x2 - a.value.x1) / s.value, n = Math.max(0 - a.value.x1, 0), l = Math.max(a.value.y2 - h.value.height, 0), (n > 0 || l > 0) && (a.value.x1 += l * s.value > n ? l * s.value : n, a.value.y2 -= l * s.value > n ? l : n / s.value);
+  }
+  function B() {
+    a.value.x2 = a.value.x1 + (a.value.y2 - a.value.y1) * s.value, a.value.y2 = a.value.y1 + (a.value.x2 - a.value.x1) / s.value;
+    const n = Math.max(0 - a.value.x1, 0), l = Math.max(a.value.x2 - h.value.width, 0), W = Math.max(a.value.y2 - h.value.height, 0), p = Math.max(0 - a.value.y1, 0);
+    (n > 0 || l > 0 || W > 0 || p > 0) && (a.value.x1 += W * s.value > n ? W * s.value : n, a.value.x2 -= p * s.value > l ? p * s.value : l, a.value.y1 += p * s.value > l ? p : l / s.value, a.value.y2 -= W * s.value > n ? W : n / s.value);
+  }
+  function D() {
+    if (h.value.width && h.value.height)
+      switch (R.position) {
+        case "top":
+          m(0, 0);
+          break;
+        case "bottom":
+          t(0, 0);
+          break;
+        case "topleft":
+          y(0, 0);
+          break;
+        case "topright":
+          c(0, 0);
+          break;
+        case "right":
+        case "bottomright":
+          b(0, 0);
+          break;
+        case "left":
+        case "bottomleft":
+          g(0, 0);
+          break;
+        case "center":
+          B();
+          break;
+      }
+  }
+  return { checkAspectRatio: D };
+}
+function ut(a, h) {
+  const { resizeCanvas: s, getTransformationsFromExifData: R } = lt(), m = Me("NotifyService"), t = r(a.cropper), y = r(a.transform), c = r(a.cropperMinWidth), b = r(a.maintainAspectRatio), g = r(a.aspectRatio), B = r(a.autoCrop), D = r(a.backgroundColor), n = r(a.resizeToWidth), l = r(a.onlyScaleDown), W = r(a.containWithinAspectRatio), p = r(a.canvasRotation), P = r(a.format), $ = r(a.imageQuality), F = r(a.resizeToHeight), L = r(a.cropperMinHeight), V = r(""), I = r(!0), A = r(!0);
+  let v, f, q = 0, Q, K, M;
+  const z = r(null), w = r(""), j = r(""), G = r("0px"), C = r(), d = r({ width: 100, height: 100 }), ie = ae;
+  let ee, H = 20, _ = 20, T = !1, E = { rotate: 0, flip: !1 }, o = { active: !1, type: null, position: null, x1: 0, y1: 0, x2: 0, y2: 0, clientX: 0, clientY: 0 };
+  const ce = r(a.imageChangedEvent), le = r(a.imageURL), Ce = r(a.imageBase64), Ie = r(a.imageFile);
+  function Ae() {
+    j.value = "scaleX(" + (y.value.scale || 1) * (y.value.flipH ? -1 : 1) + ")scaleY(" + (y.value.scale || 1) * (y.value.flipV ? -1 : 1) + ")rotate(" + (y.value.rotate || 0) + "deg)";
+  }
+  function Z() {
+    A.value = !1, C.value = null, V.value = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=", o = {
+      active: !1,
+      type: null,
+      position: null,
+      x1: 0,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+      clientX: 0,
+      clientY: 0
+    }, d.value = {
+      width: 0,
+      height: 0
+    }, v = {
+      width: 0,
+      height: 0
+    }, f = {
+      width: 0,
+      height: 0
+    }, t.value.x1 = -100, t.value.y1 = -100, t.value.x2 = 1e4, t.value.y2 = 1e4;
+  }
+  function Te(e) {
+    return /image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(e);
+  }
+  function ke() {
+    if (p.value += E.rotate, W.value && v.width && v.height) {
+      if (p.value % 2) {
+        const u = v.width * g.value, x = v.height / g.value;
+        return {
+          width: Math.max(v.height, u),
+          height: Math.max(v.width, x)
+        };
+      }
+      const e = v.height * g.value, i = v.width / g.value;
+      return {
+        width: Math.max(v.width, e),
+        height: Math.max(v.height, i)
+      };
+    }
+    return p.value % 2 ? {
+      height: v.width,
+      width: v.height
+    } : {
+      width: v.width,
+      height: v.height
+    };
+  }
+  function We() {
+    p.value += E.rotate;
+    const e = ke(), i = document.createElement("canvas");
+    e.width && e.height && (i.width = e.width, i.height = e.height);
+    const u = i.getContext("2d");
+    return v.width && v.height && M && (u == null || u.setTransform(E.flip ? -1 : 1, 0, 0, 1, i.width / 2, i.height / 2), u == null || u.rotate(Math.PI * (p.value / 2)), u == null || u.drawImage(M, -v.width / 2, -v.height / 2)), i.toDataURL();
+  }
+  function ze(e) {
+    return new Promise((i) => {
+      ee = e, V.value = e, C.value = new Image(), C.value.onload = () => {
+        var u, x;
+        f.width = (u = C.value) == null ? void 0 : u.naturalWidth, f.height = (x = C.value) == null ? void 0 : x.naturalHeight, i();
+      }, C.value.src = ee;
+    });
+  }
+  function fe() {
+    if (!M || !M.complete || !E)
+      return Promise.reject(new Error("No image loaded"));
+    const e = We();
+    return ze(e);
+  }
+  function ne(e) {
+    const i = (u) => {
+      m.show({
+        showCloseButton: !1,
+        timeout: 3e3,
+        animate: "fadeIn",
+        toasts: [{ type: "string", title: "提示", msg: "图片上传错误，请重试" }]
+      }), I.value = !1, T = !0, h.emit("loadImageFailed"), M = null, w.value = "";
+    };
+    M = new Image(), M.onload = () => {
+      w.value = e, E = R(e), v.width = M == null ? void 0 : M.naturalWidth, v.height = M == null ? void 0 : M.naturalHeight, fe().then(() => {
+        T = !1;
+      }).catch(i);
+    }, M.onerror = i, M.src = e;
+  }
+  function He(e, i) {
+    Te(i) ? (T = !1, ne(e)) : (m.show({
+      showCloseButton: !1,
+      timeout: 3e3,
+      animate: "fadeIn",
+      toasts: [{ type: "string", title: "提示", msg: "图片类型不正确,请重试" }]
+    }), I.value = !1, T = !0, h.emit("loadImageFailed"));
+  }
+  function de(e) {
+    const i = new FileReader();
+    i.onload = (u) => He(u.target.result, e.type), i.readAsDataURL(e);
+  }
+  function ge(e) {
+    const i = new Image();
+    i.onerror = () => {
+      m.show({
+        showCloseButton: !1,
+        timeout: 3e3,
+        animate: "fadeIn",
+        toasts: [{ type: "string", title: "提示", msg: "图片加载错误，请重试" }]
+      }), I.value = !1, T = !0, h.emit("loadImageFailed");
+    }, i.onload = () => {
+      T = !1;
+      const u = document.createElement("canvas"), x = u.getContext("2d");
+      u.width = i.width, u.height = i.height, x == null || x.drawImage(i, 0, 0), ne(u.toDataURL());
+    }, i.crossOrigin = "anonymous", i.src = e;
+  }
+  function Ue() {
+    return z.value && z.value && z.value.offsetWidth > 0;
+  }
+  function ue() {
+    if (z.value) {
+      const e = z.value;
+      d.value.width = e.offsetWidth, d.value.height = e.offsetHeight, G.value = "calc(50% - " + d.value.width / 2 + "px)";
+    }
+  }
+  function _e() {
+    C.value && d.value.width && (H = c.value > 0 ? Math.max(20, c.value / C.value.width * d.value.width) : 20);
+  }
+  function De() {
+    b.value ? _ = Math.max(20, H / g.value) : L.value > 0 && C.value && d.value.height ? _ = Math.max(20, L.value / C.value.height * d.value.height) : _ = 20;
+  }
+  function se() {
+    C.value ? (_e(), De()) : (H = 20, _ = 20);
+  }
+  function Ee() {
+    const e = z.value, i = r({ x1: 0, x2: 0, y1: 0, y2: 0 });
+    if (e && f.width && f.height) {
+      const u = f.width / e.offsetWidth;
+      i.value = {
+        x1: Math.round(t.value.x1 * u),
+        y1: Math.round(t.value.y1 * u),
+        x2: Math.round(t.value.x2 * u),
+        y2: Math.round(t.value.y2 * u)
+      }, W.value || (i.value.x1 = Math.max(i.value.x1, 0), i.value.y1 = Math.max(i.value.y1, 0), i.value.x2 = Math.min(i.value.x2, f.width), i.value.y2 = Math.min(i.value.y2, f.height));
+    }
+    return i.value;
+  }
+  function Le() {
+    p.value += E.rotate;
+    const e = z.value, i = r({ x1: 0, x2: 0, y1: 0, y2: 0 });
+    if (e && f.height && f.width && v.height && v.width) {
+      const u = f.width / e.offsetWidth;
+      let x, k;
+      p.value % 2 ? (x = (f.width - v.height) / 2, k = (f.height - v.width) / 2) : (x = (f.width - v.width) / 2, k = (f.height - v.height) / 2), i.value = {
+        x1: Math.round(t.value.x1 * u) - x,
+        y1: Math.round(t.value.y1 * u) - k,
+        x2: Math.round(t.value.x2 * u) - x,
+        y2: Math.round(t.value.y2 * u) - k
+      }, W.value || (i.value.x1 = Math.max(i.value.x1, 0), i.value.y1 = Math.max(i.value.y1, 0), i.value.x2 = Math.min(i.value.x2, f.width), i.value.y2 = Math.min(i.value.y2, f.height));
+    }
+    return i.value;
+  }
+  function Se(e, i) {
+    if (n.value > 0) {
+      if (!l.value || e > n.value)
+        return n.value / e;
+    } else if (F.value > 0 && (!l.value || i > F.value))
+      return F.value / i;
+    return 1;
+  }
+  function Be() {
+    return Math.min(1, Math.max(0, $.value / 100));
+  }
+  function Fe(e) {
+    return e.toDataURL("image/" + P.value, Be());
+  }
+  function Pe() {
+    if (z.value && z.value && C.value != null) {
+      const e = Ee(), i = e.x2 - e.x1, u = e.y2 - e.y1, x = document.createElement("canvas");
+      x.width = i, x.height = u;
+      const k = x.getContext("2d");
+      if (k) {
+        D.value != null && (k.fillStyle = D.value, k.fillRect(0, 0, i, u));
+        const N = (y.value.scale || 1) * (y.value.flipH ? -1 : 1), J = (y.value.scale || 1) * (y.value.flipV ? -1 : 1);
+        f.width && f.height && (k.setTransform(N, 0, 0, J, f.width / 2, f.height / 2), k.translate(-e.x1 / N, -e.y1 / J), k.rotate((y.value.rotate || 0) * Math.PI / 180), k.drawImage(C.value, -f.width / 2, -f.height / 2));
+        const S = {
+          width: i,
+          height: u,
+          imagePosition: e,
+          cropperPosition: { ...t.value }
+        };
+        W.value && (S.offsetImagePosition = Le());
+        const Y = Se(i, u);
+        return Y !== 1 && (S.width = Math.round(i * Y), S.height = b.value ? Math.round(S.width / g.value) : Math.round(u * Y), s(x, S.width, S.height)), S.base64 = Fe(x), h.emit("imageCropped", S), S;
+      }
+    }
+    return null;
+  }
+  function te() {
+    B.value && Pe();
+  }
+  function me() {
+    const e = z.value;
+    if (e) {
+      if (!b.value)
+        t.value.x1 = 0, t.value.x2 = e.offsetWidth, t.value.y1 = 0, t.value.y2 = e.offsetHeight;
+      else if (e.offsetWidth / g.value < e.offsetHeight) {
+        t.value.x1 = 0, t.value.x2 = e.offsetWidth;
+        const i = e.offsetWidth / g.value;
+        t.value.y1 = (e.offsetHeight - i) / 2, t.value.y2 = t.value.y1 + i;
+      } else {
+        t.value.y1 = 0, t.value.y2 = e.offsetHeight;
+        const i = e.offsetHeight * g.value;
+        t.value.x1 = (e.offsetWidth - i) / 2, t.value.x2 = t.value.x1 + i;
+      }
+      te(), A.value = !0;
+    }
+  }
+  function ye() {
+    q > 40 ? (m.show({
+      showCloseButton: !1,
+      timeout: 3e3,
+      animate: "fadeIn",
+      toasts: [{ type: "string", title: "提示", msg: "图片加载超时，请重试" }]
+    }), T = !0, I.value = !1, h.emit("loadImageFailed")) : Ue() ? (T = !1, ue(), se(), me(), h.emit("cropperReady", { ...d.value })) : (q++, setTimeout(() => ye(), 50));
+  }
+  function $e() {
+    C.value != null && (I.value = !1, h.emit("imageLoaded"), q = 0, setTimeout(() => ye()));
+  }
+  function Ve() {
+    const e = z.value;
+    (d.value.width !== (e == null ? void 0 : e.offsetWidth) || d.value.height !== (e == null ? void 0 : e.offsetHeight)) && d.value.width && d.value.height && e && (t.value.x1 = t.value.x1 * e.offsetWidth / d.value.width, t.value.x2 = t.value.x2 * e.offsetWidth / d.value.width, t.value.y1 = t.value.y1 * e.offsetHeight / d.value.height, t.value.y2 = t.value.y2 * e.offsetHeight / d.value.height);
+  }
+  const je = () => {
+    Ve(), ue(), se();
+  }, xe = () => {
+    clearTimeout(K), K = setTimeout(je, 300);
+  };
+  be(() => {
+    window.addEventListener("resize", xe), le.value && (Z(), I.value = !0, ge(le.value));
+  }), Xe(() => {
+    window.removeEventListener("resize", xe);
+  });
+  function qe() {
+    o.active && (o.active = !1, te());
+  }
+  function oe(e) {
+    return (e.touches && e.touches[0] ? e.touches[0].clientX : e.clientX) || 0;
+  }
+  function re(e) {
+    return (e.touches && e.touches[0] ? e.touches[0].clientY : e.clientY) || 0;
+  }
+  function Re(e, i, u = null) {
+    o && o.active || (e.preventDefault && e.preventDefault(), o = {
+      active: !0,
+      type: i,
+      position: u,
+      clientX: oe(e),
+      clientY: re(e),
+      ...t.value
+    });
+  }
+  function ve(e = !1) {
+    t.value.x1 < 0 && (t.value.x2 -= e ? t.value.x1 : 0, t.value.x1 = 0), t.value.y1 < 0 && (t.value.y2 -= e ? t.value.y1 : 0, t.value.y1 = 0), t.value.x2 > d.value.width && (t.value.x1 -= e ? t.value.x2 - d.value.width : 0, t.value.x2 = d.value.width), t.value.y2 > d.value.height && (t.value.y1 -= e ? t.value.y2 - d.value.height : 0, t.value.y2 = d.value.height);
+  }
+  function Ne(e) {
+    const i = oe(e) - o.clientX, u = re(e) - o.clientY;
+    t.value.x1 = o.x1 + i, t.value.y1 = o.y1 + u, t.value.x2 = o.x2 + i, t.value.y2 = o.y2 + u;
+  }
+  const { checkAspectRatio: Qe } = nt(t, d, g, o);
+  function Ke(e) {
+    const i = oe(e) - o.clientX, u = re(e) - o.clientY;
+    switch (o.position) {
+      case "left":
+        t.value.x1 = Math.min(o.x1 + i, t.value.x2 - H);
+        break;
+      case "topleft":
+        t.value.x1 = Math.min(o.x1 + i, t.value.x2 - H), t.value.y1 = Math.min(o.y1 + u, t.value.y2 - _);
+        break;
+      case "top":
+        t.value.y1 = Math.min(o.y1 + u, t.value.y2 - _);
+        break;
+      case "topright":
+        t.value.x2 = Math.max(o.x2 + i, t.value.x1 + H), t.value.y1 = Math.min(o.y1 + u, t.value.y2 - _);
+        break;
+      case "right":
+        t.value.x2 = Math.max(o.x2 + i, t.value.x1 + H);
+        break;
+      case "bottomright":
+        t.value.x2 = Math.max(o.x2 + i, t.value.x1 + H), t.value.y2 = Math.max(o.y2 + u, t.value.y1 + _);
+        break;
+      case "bottom":
+        t.value.y2 = Math.max(o.y2 + u, t.value.y1 + _);
+        break;
+      case "bottomleft":
+        t.value.x1 = Math.min(o.x1 + i, t.value.x2 - H), t.value.y2 = Math.max(o.y2 + u, t.value.y1 + _);
+        break;
+      case "center":
+        const { scale: x } = e, k = Math.abs(o.x2 - o.x1) * x, N = Math.abs(o.y2 - o.y1) * x, { x1: J } = t.value, { y1: S } = t.value;
+        t.value.x1 = Math.min(o.clientX - k / 2, t.value.x2 - H), t.value.y1 = Math.min(o.clientY - N / 2, t.value.y2 - _), t.value.x2 = Math.max(o.clientX + k / 2, J + H), t.value.y2 = Math.max(o.clientY + N / 2, S + _);
+        break;
+    }
+    b.value && Qe();
+  }
+  function Oe(e) {
+    o && o.active && (e.stopPropagation && e.stopPropagation(), e.preventDefault && e.preventDefault(), clearTimeout(Q), Q = setTimeout(() => {
+      o.type === ae.Move ? (Ne(e), ve(!0)) : o.type === ae.Resize && (Ke(e), ve(!1));
+    }, 300));
+  }
+  return X(ce, (e) => {
+    Z(), e && e.target && e.target.files && e.target.files.length > 0 && (I.value = !0, de(e.target.files[0]));
+  }), X(le, (e) => {
+    e ? (Z(), I.value = !0, ge(e)) : (m.show({
+      showCloseButton: !1,
+      timeout: 3e3,
+      animate: "fadeIn",
+      toasts: [{ type: "string", title: "提示", msg: "图片路径为空" }]
+    }), I.value = !1, T = !0);
+  }), X(Ce, (e) => {
+    Z(), I.value = !0, ne(e);
+  }), X(Ie, (e) => {
+    Z(), e && (I.value = !0, de(e));
+  }), X(
+    () => [
+      a.containWithinAspectRatio,
+      a.canvasRotation,
+      a.cropper,
+      a.aspectRatio,
+      a.transform,
+      a.imageChangedEvent
+    ],
+    ([e, i, u, x, k, N], [J, S, Y, Ge, Je, Ze]) => {
+      M && M.complete && E && (e !== J || i !== S) && fe(), u !== Y && (ue(), se(), ve(!1), te()), x !== Ge && A.value && me(), k !== Je && (Ae(), te()), N !== Ze && (ce.value = N);
+    }
+  ), {
+    uploadError: T,
+    imageVisible: A,
+    backgroundColor: D,
+    sourceImage: z,
+    safeImgDataUrl: V,
+    safeTransformStyle: j,
+    maxSize: d,
+    cropper: t,
+    marginLeft: G,
+    moveTypes: ie,
+    isLoading: I,
+    startMove: Re,
+    imageLoadedInView: $e,
+    moveStop: qe,
+    moveImg: Oe
+  };
+}
+const he = /* @__PURE__ */ et({
+  name: "FImageCropperDesign",
+  props: pe,
+  emits: ["imageCropped", "imageLoaded", "cropperReady", "loadImageFailed"],
+  setup(a, h) {
+    const s = r(a.alignImage), R = r(a.roundCropper), m = r(a.hideResizeSquares), t = r(a.loadImageErrorText), y = r(a.disabled), c = r(null), {
+      uploadError: b,
+      imageVisible: g,
+      backgroundColor: B,
+      sourceImage: D,
+      safeImgDataUrl: n,
+      safeTransformStyle: l,
+      maxSize: W,
+      cropper: p,
+      marginLeft: P,
+      moveTypes: $,
+      isLoading: F,
+      startMove: L,
+      imageLoadedInView: V,
+      moveStop: I,
+      moveImg: A
+    } = ut(a, h), v = r(), f = Me("design-item-context"), q = tt(v, f);
+    be(() => {
+      v.value.componentInstance = q;
+    }), h.expose(q.value);
+    function Q(w) {
+      return U("span", {
+        class: `farris-image-cropper-resize-bar ${w}`,
+        onMousedown: O((j) => L(j, $.Resize, w), ["prevent"])
+      }, null);
+    }
+    function K(w) {
+      return U("div", null, [U("span", {
+        class: `farris-image-cropper-resize-bar ${w}`,
+        onMousedown: O((j) => L(j, $.Resize, w), ["prevent"])
+      }, [U("span", {
+        class: "farris-image-cropper-square"
+      }, null)]), U("span", {
+        class: "farris-image-cropper-resize top"
+      }, [U("span", {
+        class: "farris-image-cropper-square"
+      }, null)])]);
+    }
+    const M = ["top", "right", "bottom", "left"].map((w) => Q(w)), z = ["topleft", "topright", "bottomright", "bottomleft"].map((w) => K(w));
+    return () => U("div", {
+      ref: v,
+      class: ["farris-image-cropper-frame", {
+        "farris-image-cropper-disabled": y.value
+      }],
+      style: {
+        "text-align": s.value
+      },
+      onMousemove: O((w) => A(w), ["prevent"]),
+      onTouchmove: O((w) => A(w), ["prevent"]),
+      onMouseup: O(() => I(), ["prevent"]),
+      onTouchend: O(() => I(), ["prevent"])
+    }, [!b && U("div", {
+      ref: c,
+      class: "farris-image-cropper",
+      style: [{
+        background: g.value ? B.value : ""
+      }]
+    }, [n.value && U("img", {
+      title: "farris-source-image",
+      ref: D,
+      class: "farris-source-image",
+      style: [{
+        visibility: g.value ? "visible" : "hidden"
+      }, {
+        transform: l.value
+      }],
+      src: n.value,
+      onLoad: () => V()
+    }, null), W.value && U("div", {
+      class: "farris-image-overlay",
+      style: [{
+        width: `${W.value.width || 0}px`
+      }, {
+        height: `${W.value.height || 0}px`
+      }, {
+        "margin-left": s.value === "center" ? P.value : ""
+      }]
+    }, null), g.value && U("div", {
+      class: ["farris-image-cropper-wrapper", {
+        "farris-image-cropper-rounded": R.value
+      }],
+      style: [{
+        top: `${p.value.y1}px`
+      }, {
+        left: `${p.value.x1}px`
+      }, {
+        width: `${p.value.x2 - p.value.x1}px`
+      }, {
+        height: `${p.value.y2 - p.value.y1}px`
+      }, {
+        visibility: g.value ? "visible" : "hidden"
+      }, {
+        "margin-left": s.value === "center" ? P.value : ""
+      }],
+      tabindex: "0"
+    }, [U("div", {
+      class: "farris-image-cropper-move",
+      onMousedown: O((w) => L(w, $.Move, "topleft"), ["prevent"])
+    }, null), !m.value && U("div", null, [z, M])])]), F.value && U("div", {
+      class: "farris-image-cropper-loading"
+    }, [U("div", {
+      class: "farris-image-cropper-loading-spinner"
+    }, null)]), b && U("div", {
+      class: "farris-image-cropper-error"
+    }, [t.value])]);
+  }
+});
+function st(a, h, s) {
+  return h;
+}
+const ot = /* @__PURE__ */ new Map([
+  ["appearance", at]
+]), rt = "https://json-schema.org/draft/2020-12/schema", vt = "https://farris-design.gitee.io/image-cropper.schema.json", ht = "image-cropper", ct = "A Farris Component", ft = "object", dt = {
+  id: {
+    description: "The unique identifier for image-cropper",
+    type: "string"
+  },
+  type: {
+    description: "The type string of image-cropper",
+    type: "string",
+    default: "image-cropper"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  binding: {
+    description: "",
+    type: "object",
+    default: {}
+  },
+  disable: {
+    type: "string",
+    default: !1
+  },
+  editable: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  placeholder: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  readonly: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  require: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  tabindex: {
+    description: "",
+    type: "number",
+    default: -1
+  },
+  visible: {
+    description: "",
+    type: "boolean",
+    default: !0
+  }
+}, gt = [
+  "id",
+  "type"
+], mt = {
+  $schema: rt,
+  $id: vt,
+  title: ht,
+  description: ct,
+  type: ft,
+  properties: dt,
+  required: gt
+}, yt = "image-cropper", xt = "A Farris Component", pt = "object", Mt = {
+  basic: {
+    description: "Basic Infomation",
+    title: "基本信息",
+    properties: {
+      id: {
+        description: "组件标识",
+        title: "标识",
+        type: "string",
+        readonly: !0
+      },
+      type: {
+        description: "组件类型",
+        title: "控件类型",
+        type: "select",
+        editor: {
+          type: "waiting for modification",
+          enum: []
+        }
+      }
+    }
+  },
+  behavior: {
+    description: "Basic Infomation",
+    title: "行为",
+    properties: {
+      readonly: {
+        description: "",
+        title: "只读",
+        type: "string"
+      },
+      required: {
+        description: "",
+        title: "必填",
+        type: "boolean"
+      },
+      visible: {
+        description: "",
+        title: "可见",
+        type: "boolean"
+      },
+      placeholder: {
+        description: "",
+        title: "提示文本",
+        type: "string"
+      },
+      tabindex: {
+        description: "",
+        title: "tab索引",
+        type: "number"
+      }
+    }
+  }
+}, bt = {
+  title: yt,
+  description: xt,
+  type: pt,
+  categories: Mt
+}, we = it(pe, mt, ot, st, bt);
+he.register = (a, h, s, R) => {
+  a["image-cropper"] = Ye, h["image-cropper"] = we;
+};
+he.registerDesigner = (a, h, s) => {
+  a["image-cropper"] = he, h["image-cropper"] = we;
+};
+export {
+  he as ImageCropperDesign,
+  he as default,
+  we as propsResolver
+};