@farris/ui-vue/components/image-cropper/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { inject as Me, ref as o, onMounted as be, onUnmounted as et, watch as ee, defineComponent as we, createVNode as f, withModifiers as P } from "vue";
import { resolveAppearance as tt, createPropsResolver as at } from "../dynamic-resolver/index.esm.js";
import { useDesignerComponent as it } from "../designer-canvas/index.esm.js";
function lt(a, c, u) {
  return c;
}
const nt = /* @__PURE__ */ new Map([
  ["appearance", tt]
]), ut = "https://json-schema.org/draft/2020-12/schema", st = "https://farris-design.gitee.io/image-cropper.schema.json", ot = "image-cropper", rt = "A Farris Component", vt = "object", ct = {
  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
  }
}, ht = [
  "id",
  "type"
], ft = {
  $schema: ut,
  $id: st,
  title: ot,
  description: rt,
  type: vt,
  properties: ct,
  required: ht
}, dt = "image-cropper", gt = "A Farris Component", mt = "object", yt = {
  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"
      }
    }
  }
}, pt = {
  title: dt,
  description: gt,
  type: mt,
  categories: yt
}, he = {
  /** 输出图片格式 */
  format: { type: String, default: "png" },
  /** 保持长宽比例 */
  maintainAspectRatio: { type: Boolean, default: !0 },
  /** scale缩放 rotate旋转 flipH横向反转 flipV垂直翻转 执行变化 */
  transform: { type: Object, default: { scale: 0, rotate: 0, flipH: !1, flipV: !1 } },
  /** 宽高比例 width/height */
  aspectRatio: { type: Number, default: 1 },
  /** 裁剪后图片被调整为的宽度 */
  resizeToWidth: { type: Number, default: 0 },
  /** 裁剪后图片被调整为的高度 */
  resizeToHeight: { type: Number, default: 0 },
  /** 裁剪最小宽度 */
  cropperMinWidth: { type: Number, default: 0 },
  /** 裁剪最小高度 */
  cropperMinHeight: { type: Number, default: 0 },
  /** 旋转画布 1 = 90deg  */
  canvasRotation: { type: Number, default: 0 },
  /** 裁剪形状是否为圆形 */
  roundCropper: { type: Boolean, default: !0 },
  /** 启用这个选项将确保较小的图像不会被放大 */
  onlyScaleDown: { type: Boolean, default: !1 },
  /** 适用于使用jpeg或webp作为输出格式时。输入0到100之间的数字将决定输出图像的质量 */
  imageQuality: { type: Number, default: 92 },
  /** 是否每次修改cropper的位置或大小时，cropper都会发出一个图像 */
  autoCrop: { type: Boolean, default: !0 },
  /** 背景色 */
  backgroundColor: { type: String, default: "" },
  /** 是否在图像周围添加填充以使其适合长宽比 */
  containWithinAspectRatio: { type: Boolean, default: !1 },
  /** 隐藏 */
  hideResizeSquares: { type: Boolean, default: !1 },
  /** 图片加载错误的提示 */
  loadImageErrorText: { type: String, default: "图片加载错误" },
  /** 图片居中 */
  alignImage: { type: String, default: "center" },
  /** 是否禁用 */
  disabled: { type: Boolean, default: !1 },
  /** 图片路径 */
  imageURL: { type: String, default: "./src/assets/image01.png" },
  /** 图片事件变化 */
  imageChangedEvent: { type: Object, default: null },
  /** imageBase64 */
  imageBase64: { type: String, default: "" },
  /** imageFile */
  imageFile: { type: Object, default: null },
  /** 裁剪的坐标 */
  cropper: {
    type: Object,
    default: {
      x1: -100,
      y1: -100,
      x2: 1e4,
      y2: 1e4
    }
  }
}, Ie = at(he, ft, nt, lt, pt);
var ie = /* @__PURE__ */ ((a) => (a.Move = "move", a.Resize = "resize", a))(ie || {});
function xt() {
  function a(y) {
    switch (typeof y == "string" && (y = c(y)), y) {
      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 c(y) {
    const t = new DataView(u(y));
    if (t.getUint16(0, !1) !== 65496)
      return -2;
    const p = t.byteLength;
    let d = 2;
    for (; d < p; ) {
      if (t.getUint16(d + 2, !1) <= 8)
        return -1;
      const b = t.getUint16(d, !1);
      if (d += 2, b === 65505) {
        if (t.getUint32(d += 2, !1) !== 1165519206)
          return -1;
        const h = t.getUint16(d += 6, !1) === 18761;
        d += t.getUint32(d + 4, h);
        const D = t.getUint16(d, h);
        d += 2;
        for (let H = 0; H < D; H++)
          if (t.getUint16(d + H * 12, h) === 274)
            return t.getUint16(d + H * 12 + 8, h);
      } else {
        if ((b & 65280) !== 65280)
          break;
        d += t.getUint16(d, !1);
      }
    }
    return -1;
  }
  function u(y) {
    y = y.replace(/^data:([^;]+);base64,/gmi, "");
    const t = atob(y), p = t.length, d = new Uint8Array(p);
    for (let b = 0; b < p; b++)
      d[b] = t.charCodeAt(b);
    return d.buffer;
  }
  function N(y, t, p) {
    const d = y.width, b = y.height;
    t = Math.round(t), p = Math.round(p);
    const h = d / t, D = b / p, H = Math.ceil(h / 2), l = Math.ceil(D / 2), n = y.getContext("2d");
    if (n) {
      const C = n.getImageData(0, 0, d, b), g = n.createImageData(t, p), { data: _ } = C, $ = g.data;
      for (let R = 0; R < p; R++)
        for (let k = 0; k < t; k++) {
          const j = (k + R * t) * 4, A = R * D;
          let T = 0, v = 0, m = 0, q = 0, Q = 0, I = 0, M = 0;
          const L = Math.floor(k * h), z = Math.floor(R * D);
          let O = Math.ceil((k + 1) * h), G = Math.ceil((R + 1) * D);
          O = Math.min(O, d), G = Math.min(G, b);
          for (let S = z; S < G; S++) {
            const x = Math.abs(A - S) / l, le = k * h, te = x * x;
            for (let E = L; E < O; E++) {
              const U = Math.abs(le - E) / H, W = Math.sqrt(te + U * U);
              if (W >= 1)
                continue;
              T = 2 * W * W * W - 3 * W * W + 1;
              const F = 4 * (E + S * d);
              M += T * _[F + 3], m += T, _[F + 3] < 255 && (T = T * _[F + 3] / 250), q += T * _[F], Q += T * _[F + 1], I += T * _[F + 2], v += T;
            }
          }
          $[j] = q / v, $[j + 1] = Q / v, $[j + 2] = I / v, $[j + 3] = M / m;
        }
      y.width = t, y.height = p, n.putImageData(g, 0, 0);
    }
  }
  return {
    resizeCanvas: N,
    getTransformationsFromExifData: a
  };
}
function Mt(a, c, u, N) {
  function y(l, n) {
    a.value.x2 = a.value.x1 + (a.value.y2 - a.value.y1) * u.value, l = Math.max(a.value.x2 - c.value.width, 0), n = Math.max(0 - a.value.y1, 0), (l > 0 || n > 0) && (a.value.x2 -= n * u.value > l ? n * u.value : l, a.value.y1 += n * u.value > l ? n : l / u.value);
  }
  function t(l, n) {
    a.value.x2 = a.value.x1 + (a.value.y2 - a.value.y1) * u.value, l = Math.max(a.value.x2 - c.value.width, 0), n = Math.max(a.value.y2 - c.value.height, 0), (l > 0 || n > 0) && (a.value.x2 -= n * u.value > l ? n * u.value : l, a.value.y2 -= n * u.value > l ? n : l / u.value);
  }
  function p(l, n) {
    a.value.y1 = a.value.y2 - (a.value.x2 - a.value.x1) / u.value, l = Math.max(0 - a.value.x1, 0), n = Math.max(0 - a.value.y1, 0), (l > 0 || n > 0) && (a.value.x1 += n * u.value > l ? n * u.value : l, a.value.y1 += n * u.value > l ? n : l / u.value);
  }
  function d(l, n) {
    a.value.y1 = a.value.y2 - (a.value.x2 - a.value.x1) / u.value, l = Math.max(a.value.x2 - c.value.width, 0), n = Math.max(0 - a.value.y1, 0), (l > 0 || n > 0) && (a.value.x2 -= n * u.value > l ? n * u.value : l, a.value.y1 += n * u.value > l ? n : l / u.value);
  }
  function b(l, n) {
    a.value.y2 = a.value.y1 + (a.value.x2 - a.value.x1) / u.value, l = Math.max(a.value.x2 - c.value.width, 0), n = Math.max(a.value.y2 - c.value.height, 0), (l > 0 || n > 0) && (a.value.x2 -= n * u.value > l ? n * u.value : l, a.value.y2 -= n * u.value > l ? n : l / u.value);
  }
  function h(l, n) {
    a.value.y2 = a.value.y1 + (a.value.x2 - a.value.x1) / u.value, l = Math.max(0 - a.value.x1, 0), n = Math.max(a.value.y2 - c.value.height, 0), (l > 0 || n > 0) && (a.value.x1 += n * u.value > l ? n * u.value : l, a.value.y2 -= n * u.value > l ? n : l / u.value);
  }
  function D() {
    a.value.x2 = a.value.x1 + (a.value.y2 - a.value.y1) * u.value, a.value.y2 = a.value.y1 + (a.value.x2 - a.value.x1) / u.value;
    const l = Math.max(0 - a.value.x1, 0), n = Math.max(a.value.x2 - c.value.width, 0), C = Math.max(a.value.y2 - c.value.height, 0), g = Math.max(0 - a.value.y1, 0);
    (l > 0 || n > 0 || C > 0 || g > 0) && (a.value.x1 += C * u.value > l ? C * u.value : l, a.value.x2 -= g * u.value > n ? g * u.value : n, a.value.y1 += g * u.value > n ? g : n / u.value, a.value.y2 -= C * u.value > l ? C : l / u.value);
  }
  function H() {
    if (c.value.width && c.value.height)
      switch (N.position) {
        case "top":
          y(0, 0);
          break;
        case "bottom":
          t(0, 0);
          break;
        case "topleft":
          p(0, 0);
          break;
        case "topright":
          d(0, 0);
          break;
        case "right":
        case "bottomright":
          b(0, 0);
          break;
        case "left":
        case "bottomleft":
          h(0, 0);
          break;
        case "center":
          D();
          break;
      }
  }
  return { checkAspectRatio: H };
}
function Ce(a, c) {
  const { resizeCanvas: u, getTransformationsFromExifData: N } = xt(), y = Me("NotifyService"), t = o(a.cropper), p = o(a.transform), d = o(a.cropperMinWidth), b = o(a.maintainAspectRatio), h = o(a.aspectRatio), D = o(a.autoCrop), H = o(a.backgroundColor), l = o(a.resizeToWidth), n = o(a.onlyScaleDown), C = o(a.containWithinAspectRatio), g = o(a.canvasRotation), _ = o(a.format), $ = o(a.imageQuality), R = o(a.resizeToHeight), k = o(a.cropperMinHeight), j = o(""), A = o(!0), T = o(!0);
  let v, m, q = 0, Q, I, M;
  const L = o(null), z = o(""), O = o(""), G = o("0px"), S = o(), x = o({ width: 100, height: 100 }), le = ie;
  let te, E = 20, U = 20, W = !1, F = { rotate: 0, flip: !1 }, r = { active: !1, type: null, position: null, x1: 0, y1: 0, x2: 0, y2: 0, clientX: 0, clientY: 0 };
  const fe = o(a.imageChangedEvent), ne = o(a.imageURL), Ae = o(a.imageBase64), Te = o(a.imageFile);
  function ze() {
    O.value = "scaleX(" + (p.value.scale || 1) * (p.value.flipH ? -1 : 1) + ")scaleY(" + (p.value.scale || 1) * (p.value.flipV ? -1 : 1) + ")rotate(" + (p.value.rotate || 0) + "deg)";
  }
  function Y() {
    T.value = !1, S.value = null, j.value = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=", r = {
      active: !1,
      type: null,
      position: null,
      x1: 0,
      y1: 0,
      x2: 0,
      y2: 0,
      clientX: 0,
      clientY: 0
    }, x.value = {
      width: 0,
      height: 0
    }, v = {
      width: 0,
      height: 0
    }, m = {
      width: 0,
      height: 0
    }, t.value.x1 = -100, t.value.y1 = -100, t.value.x2 = 1e4, t.value.y2 = 1e4;
  }
  function Se(e) {
    return /image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(e);
  }
  function ke() {
    if (g.value += F.rotate, C.value && v.width && v.height) {
      if (g.value % 2) {
        const s = v.width * h.value, w = v.height / h.value;
        return {
          width: Math.max(v.height, s),
          height: Math.max(v.width, w)
        };
      }
      const e = v.height * h.value, i = v.width / h.value;
      return {
        width: Math.max(v.width, e),
        height: Math.max(v.height, i)
      };
    }
    return g.value % 2 ? {
      height: v.width,
      width: v.height
    } : {
      width: v.width,
      height: v.height
    };
  }
  function We() {
    g.value += F.rotate;
    const e = ke(), i = document.createElement("canvas");
    e.width && e.height && (i.width = e.width, i.height = e.height);
    const s = i.getContext("2d");
    return v.width && v.height && M && (s == null || s.setTransform(F.flip ? -1 : 1, 0, 0, 1, i.width / 2, i.height / 2), s == null || s.rotate(Math.PI * (g.value / 2)), s == null || s.drawImage(M, -v.width / 2, -v.height / 2)), i.toDataURL();
  }
  function Be(e) {
    return new Promise((i) => {
      te = e, j.value = e, S.value = new Image(), S.value.onload = () => {
        var s, w;
        m.width = (s = S.value) == null ? void 0 : s.naturalWidth, m.height = (w = S.value) == null ? void 0 : w.naturalHeight, i();
      }, S.value.src = te;
    });
  }
  function de() {
    if (!M || !M.complete || !F)
      return Promise.reject(new Error("No image loaded"));
    const e = We();
    return Be(e);
  }
  function ue(e) {
    const i = (s) => {
      y.show({
        showCloseButton: !1,
        timeout: 3e3,
        animate: "fadeIn",
        toasts: [{ type: "string", title: "提示", msg: "图片上传错误，请重试" }]
      }), A.value = !1, W = !0, c.emit("loadImageFailed"), M = null, z.value = "";
    };
    M = new Image(), M.onload = () => {
      z.value = e, F = N(e), v.width = M == null ? void 0 : M.naturalWidth, v.height = M == null ? void 0 : M.naturalHeight, de().then(() => {
        W = !1;
      }).catch(i);
    }, M.onerror = i, M.src = e;
  }
  function He(e, i) {
    Se(i) ? (W = !1, ue(e)) : (y.show({
      showCloseButton: !1,
      timeout: 3e3,
      animate: "fadeIn",
      toasts: [{ type: "string", title: "提示", msg: "图片类型不正确,请重试" }]
    }), A.value = !1, W = !0, c.emit("loadImageFailed"));
  }
  function ge(e) {
    const i = new FileReader();
    i.onload = (s) => He(s.target.result, e.type), i.readAsDataURL(e);
  }
  function me(e) {
    const i = new Image();
    i.onerror = () => {
      y.show({
        showCloseButton: !1,
        timeout: 3e3,
        animate: "fadeIn",
        toasts: [{ type: "string", title: "提示", msg: "图片加载错误，请重试" }]
      }), A.value = !1, W = !0, c.emit("loadImageFailed");
    }, i.onload = () => {
      W = !1;
      const s = document.createElement("canvas"), w = s.getContext("2d");
      s.width = i.width, s.height = i.height, w == null || w.drawImage(i, 0, 0), ue(s.toDataURL());
    }, i.crossOrigin = "anonymous", i.src = e;
  }
  function Le() {
    return L.value && L.value && L.value.offsetWidth > 0;
  }
  function se() {
    if (L.value) {
      const e = L.value;
      x.value.width = e.offsetWidth, x.value.height = e.offsetHeight, G.value = "calc(50% - " + x.value.width / 2 + "px)";
    }
  }
  function Ee() {
    S.value && x.value.width && (E = d.value > 0 ? Math.max(20, d.value / S.value.width * x.value.width) : 20);
  }
  function Ue() {
    b.value ? U = Math.max(20, E / h.value) : k.value > 0 && S.value && x.value.height ? U = Math.max(20, k.value / S.value.height * x.value.height) : U = 20;
  }
  function oe() {
    S.value ? (Ee(), Ue()) : (E = 20, U = 20);
  }
  function De() {
    const e = L.value, i = o({ x1: 0, x2: 0, y1: 0, y2: 0 });
    if (e && m.width && m.height) {
      const s = m.width / e.offsetWidth;
      i.value = {
        x1: Math.round(t.value.x1 * s),
        y1: Math.round(t.value.y1 * s),
        x2: Math.round(t.value.x2 * s),
        y2: Math.round(t.value.y2 * s)
      }, C.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, m.width), i.value.y2 = Math.min(i.value.y2, m.height));
    }
    return i.value;
  }
  function _e() {
    g.value += F.rotate;
    const e = L.value, i = o({ x1: 0, x2: 0, y1: 0, y2: 0 });
    if (e && m.height && m.width && v.height && v.width) {
      const s = m.width / e.offsetWidth;
      let w, B;
      g.value % 2 ? (w = (m.width - v.height) / 2, B = (m.height - v.width) / 2) : (w = (m.width - v.width) / 2, B = (m.height - v.height) / 2), i.value = {
        x1: Math.round(t.value.x1 * s) - w,
        y1: Math.round(t.value.y1 * s) - B,
        x2: Math.round(t.value.x2 * s) - w,
        y2: Math.round(t.value.y2 * s) - B
      }, C.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, m.width), i.value.y2 = Math.min(i.value.y2, m.height));
    }
    return i.value;
  }
  function $e(e, i) {
    if (l.value > 0) {
      if (!n.value || e > l.value)
        return l.value / e;
    } else if (R.value > 0 && (!n.value || i > R.value))
      return R.value / i;
    return 1;
  }
  function Re() {
    return Math.min(1, Math.max(0, $.value / 100));
  }
  function Fe(e) {
    return e.toDataURL("image/" + _.value, Re());
  }
  function Pe() {
    if (L.value && L.value && S.value != null) {
      const e = De(), i = e.x2 - e.x1, s = e.y2 - e.y1, w = document.createElement("canvas");
      w.width = i, w.height = s;
      const B = w.getContext("2d");
      if (B) {
        H.value != null && (B.fillStyle = H.value, B.fillRect(0, 0, i, s));
        const K = (p.value.scale || 1) * (p.value.flipH ? -1 : 1), J = (p.value.scale || 1) * (p.value.flipV ? -1 : 1);
        m.width && m.height && (B.setTransform(K, 0, 0, J, m.width / 2, m.height / 2), B.translate(-e.x1 / K, -e.y1 / J), B.rotate((p.value.rotate || 0) * Math.PI / 180), B.drawImage(S.value, -m.width / 2, -m.height / 2));
        const V = {
          width: i,
          height: s,
          imagePosition: e,
          cropperPosition: { ...t.value }
        };
        C.value && (V.offsetImagePosition = _e());
        const X = $e(i, s);
        return X !== 1 && (V.width = Math.round(i * X), V.height = b.value ? Math.round(V.width / h.value) : Math.round(s * X), u(w, V.width, V.height)), V.base64 = Fe(w), c.emit("imageCropped", V), V;
      }
    }
    return null;
  }
  function ae() {
    D.value && Pe();
  }
  function ye() {
    const e = L.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 / h.value < e.offsetHeight) {
        t.value.x1 = 0, t.value.x2 = e.offsetWidth;
        const i = e.offsetWidth / h.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 * h.value;
        t.value.x1 = (e.offsetWidth - i) / 2, t.value.x2 = t.value.x1 + i;
      }
      ae(), T.value = !0;
    }
  }
  function pe() {
    q > 40 ? (y.show({
      showCloseButton: !1,
      timeout: 3e3,
      animate: "fadeIn",
      toasts: [{ type: "string", title: "提示", msg: "图片加载超时，请重试" }]
    }), W = !0, A.value = !1, c.emit("loadImageFailed")) : Le() ? (W = !1, se(), oe(), ye(), c.emit("cropperReady", { ...x.value })) : (q++, setTimeout(() => pe(), 50));
  }
  function Ve() {
    S.value != null && (A.value = !1, c.emit("imageLoaded"), q = 0, setTimeout(() => pe()));
  }
  function je() {
    const e = L.value;
    (x.value.width !== (e == null ? void 0 : e.offsetWidth) || x.value.height !== (e == null ? void 0 : e.offsetHeight)) && x.value.width && x.value.height && e && (t.value.x1 = t.value.x1 * e.offsetWidth / x.value.width, t.value.x2 = t.value.x2 * e.offsetWidth / x.value.width, t.value.y1 = t.value.y1 * e.offsetHeight / x.value.height, t.value.y2 = t.value.y2 * e.offsetHeight / x.value.height);
  }
  const qe = () => {
    je(), se(), oe();
  }, xe = () => {
    clearTimeout(I), I = setTimeout(qe, 300);
  };
  be(() => {
    window.addEventListener("resize", xe), ne.value && (Y(), A.value = !0, me(ne.value));
  }), et(() => {
    window.removeEventListener("resize", xe);
  });
  function Ne() {
    r.active && (r.active = !1, ae());
  }
  function re(e) {
    return (e.touches && e.touches[0] ? e.touches[0].clientX : e.clientX) || 0;
  }
  function ve(e) {
    return (e.touches && e.touches[0] ? e.touches[0].clientY : e.clientY) || 0;
  }
  function Oe(e, i, s = null) {
    r && r.active || (e.preventDefault && e.preventDefault(), r = {
      active: !0,
      type: i,
      position: s,
      clientX: re(e),
      clientY: ve(e),
      ...t.value
    });
  }
  function ce(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 > x.value.width && (t.value.x1 -= e ? t.value.x2 - x.value.width : 0, t.value.x2 = x.value.width), t.value.y2 > x.value.height && (t.value.y1 -= e ? t.value.y2 - x.value.height : 0, t.value.y2 = x.value.height);
  }
  function Qe(e) {
    const i = re(e) - r.clientX, s = ve(e) - r.clientY;
    t.value.x1 = r.x1 + i, t.value.y1 = r.y1 + s, t.value.x2 = r.x2 + i, t.value.y2 = r.y2 + s;
  }
  const { checkAspectRatio: Ke } = Mt(t, x, h, r);
  function Ge(e) {
    const i = re(e) - r.clientX, s = ve(e) - r.clientY;
    switch (r.position) {
      case "left":
        t.value.x1 = Math.min(r.x1 + i, t.value.x2 - E);
        break;
      case "topleft":
        t.value.x1 = Math.min(r.x1 + i, t.value.x2 - E), t.value.y1 = Math.min(r.y1 + s, t.value.y2 - U);
        break;
      case "top":
        t.value.y1 = Math.min(r.y1 + s, t.value.y2 - U);
        break;
      case "topright":
        t.value.x2 = Math.max(r.x2 + i, t.value.x1 + E), t.value.y1 = Math.min(r.y1 + s, t.value.y2 - U);
        break;
      case "right":
        t.value.x2 = Math.max(r.x2 + i, t.value.x1 + E);
        break;
      case "bottomright":
        t.value.x2 = Math.max(r.x2 + i, t.value.x1 + E), t.value.y2 = Math.max(r.y2 + s, t.value.y1 + U);
        break;
      case "bottom":
        t.value.y2 = Math.max(r.y2 + s, t.value.y1 + U);
        break;
      case "bottomleft":
        t.value.x1 = Math.min(r.x1 + i, t.value.x2 - E), t.value.y2 = Math.max(r.y2 + s, t.value.y1 + U);
        break;
      case "center":
        const { scale: w } = e, B = Math.abs(r.x2 - r.x1) * w, K = Math.abs(r.y2 - r.y1) * w, { x1: J } = t.value, { y1: V } = t.value;
        t.value.x1 = Math.min(r.clientX - B / 2, t.value.x2 - E), t.value.y1 = Math.min(r.clientY - K / 2, t.value.y2 - U), t.value.x2 = Math.max(r.clientX + B / 2, J + E), t.value.y2 = Math.max(r.clientY + K / 2, V + U);
        break;
    }
    b.value && Ke();
  }
  function Je(e) {
    r && r.active && (e.stopPropagation && e.stopPropagation(), e.preventDefault && e.preventDefault(), clearTimeout(Q), Q = setTimeout(() => {
      r.type === ie.Move ? (Qe(e), ce(!0)) : r.type === ie.Resize && (Ge(e), ce(!1));
    }, 300));
  }
  return ee(fe, (e) => {
    Y(), e && e.target && e.target.files && e.target.files.length > 0 && (A.value = !0, ge(e.target.files[0]));
  }), ee(ne, (e) => {
    e ? (Y(), A.value = !0, me(e)) : (y.show({
      showCloseButton: !1,
      timeout: 3e3,
      animate: "fadeIn",
      toasts: [{ type: "string", title: "提示", msg: "图片路径为空" }]
    }), A.value = !1, W = !0);
  }), ee(Ae, (e) => {
    Y(), A.value = !0, ue(e);
  }), ee(Te, (e) => {
    Y(), e && (A.value = !0, ge(e));
  }), ee(
    () => [
      a.containWithinAspectRatio,
      a.canvasRotation,
      a.cropper,
      a.aspectRatio,
      a.transform,
      a.imageChangedEvent
    ],
    ([e, i, s, w, B, K], [J, V, X, Ze, Ye, Xe]) => {
      M && M.complete && F && (e !== J || i !== V) && de(), s !== X && (se(), oe(), ce(!1), ae()), w !== Ze && T.value && ye(), B !== Ye && (ze(), ae()), K !== Xe && (fe.value = K);
    }
  ), {
    uploadError: W,
    imageVisible: T,
    backgroundColor: H,
    sourceImage: L,
    safeImgDataUrl: j,
    safeTransformStyle: O,
    maxSize: x,
    cropper: t,
    marginLeft: G,
    moveTypes: le,
    isLoading: A,
    startMove: Oe,
    imageLoadedInView: Ve,
    moveStop: Ne,
    moveImg: Je
  };
}
const Z = /* @__PURE__ */ we({
  name: "FImageCropper",
  props: he,
  emits: ["imageCropped", "imageLoaded", "cropperReady", "loadImageFailed"],
  setup(a, c) {
    const u = o(a.alignImage), N = o(a.roundCropper), y = o(a.hideResizeSquares), t = o(a.loadImageErrorText), p = o(a.disabled), d = o(null), {
      uploadError: b,
      imageVisible: h,
      backgroundColor: D,
      sourceImage: H,
      safeImgDataUrl: l,
      safeTransformStyle: n,
      maxSize: C,
      cropper: g,
      marginLeft: _,
      moveTypes: $,
      isLoading: R,
      startMove: k,
      imageLoadedInView: j,
      moveStop: A,
      moveImg: T
    } = Ce(a, c);
    function v(I) {
      return f("span", {
        class: `farris-image-cropper-resize-bar ${I}`,
        onMousedown: P((M) => k(M, $.Resize, I), ["prevent"])
      }, null);
    }
    function m(I) {
      return f("div", null, [f("span", {
        class: `farris-image-cropper-resize-bar ${I}`,
        onMousedown: P((M) => k(M, $.Resize, I), ["prevent"])
      }, [f("span", {
        class: "farris-image-cropper-square"
      }, null)]), f("span", {
        class: "farris-image-cropper-resize top"
      }, [f("span", {
        class: "farris-image-cropper-square"
      }, null)])]);
    }
    const q = ["top", "right", "bottom", "left"].map((I) => v(I)), Q = ["topleft", "topright", "bottomright", "bottomleft"].map((I) => m(I));
    return () => f("div", {
      class: ["farris-image-cropper-frame", {
        "farris-image-cropper-disabled": p.value
      }],
      style: {
        "text-align": u.value
      },
      onMousemove: P((I) => T(I), ["prevent"]),
      onTouchmove: P((I) => T(I), ["prevent"]),
      onMouseup: P(() => A(), ["prevent"]),
      onTouchend: P(() => A(), ["prevent"])
    }, [!b && f("div", {
      ref: d,
      class: "farris-image-cropper",
      style: [{
        background: h.value ? D.value : ""
      }]
    }, [l.value && f("img", {
      title: "farris-source-image",
      ref: H,
      class: "farris-source-image",
      style: [{
        visibility: h.value ? "visible" : "hidden"
      }, {
        transform: n.value
      }],
      src: l.value,
      onLoad: () => j()
    }, null), C.value && f("div", {
      class: "farris-image-overlay",
      style: [{
        width: `${C.value.width || 0}px`
      }, {
        height: `${C.value.height || 0}px`
      }, {
        "margin-left": u.value === "center" ? _.value : ""
      }]
    }, null), h.value && f("div", {
      class: ["farris-image-cropper-wrapper", {
        "farris-image-cropper-rounded": N.value
      }],
      style: [{
        top: `${g.value.y1}px`
      }, {
        left: `${g.value.x1}px`
      }, {
        width: `${g.value.x2 - g.value.x1}px`
      }, {
        height: `${g.value.y2 - g.value.y1}px`
      }, {
        visibility: h.value ? "visible" : "hidden"
      }, {
        "margin-left": u.value === "center" ? _.value : ""
      }],
      tabindex: "0"
    }, [f("div", {
      class: "farris-image-cropper-move",
      onMousedown: P((I) => k(I, $.Move, "topleft"), ["prevent"])
    }, null), !y.value && f("div", null, [Q, q])])]), R.value && f("div", {
      class: "farris-image-cropper-loading"
    }, [f("div", {
      class: "farris-image-cropper-loading-spinner"
    }, null)]), b && f("div", {
      class: "farris-image-cropper-error"
    }, [t.value])]);
  }
}), bt = /* @__PURE__ */ we({
  name: "FImageCropperDesign",
  props: he,
  emits: ["imageCropped", "imageLoaded", "cropperReady", "loadImageFailed"],
  setup(a, c) {
    const u = o(a.alignImage), N = o(a.roundCropper), y = o(a.hideResizeSquares), t = o(a.loadImageErrorText), p = o(a.disabled), d = o(null), {
      uploadError: b,
      imageVisible: h,
      backgroundColor: D,
      sourceImage: H,
      safeImgDataUrl: l,
      safeTransformStyle: n,
      maxSize: C,
      cropper: g,
      marginLeft: _,
      moveTypes: $,
      isLoading: R,
      startMove: k,
      imageLoadedInView: j,
      moveStop: A,
      moveImg: T
    } = Ce(a, c), v = o(), m = Me("design-item-context"), q = it(v, m);
    be(() => {
      v.value.componentInstance = q;
    }), c.expose(q.value);
    function Q(z) {
      return f("span", {
        class: `farris-image-cropper-resize-bar ${z}`,
        onMousedown: P((O) => k(O, $.Resize, z), ["prevent"])
      }, null);
    }
    function I(z) {
      return f("div", null, [f("span", {
        class: `farris-image-cropper-resize-bar ${z}`,
        onMousedown: P((O) => k(O, $.Resize, z), ["prevent"])
      }, [f("span", {
        class: "farris-image-cropper-square"
      }, null)]), f("span", {
        class: "farris-image-cropper-resize top"
      }, [f("span", {
        class: "farris-image-cropper-square"
      }, null)])]);
    }
    const M = ["top", "right", "bottom", "left"].map((z) => Q(z)), L = ["topleft", "topright", "bottomright", "bottomleft"].map((z) => I(z));
    return () => f("div", {
      ref: v,
      class: ["farris-image-cropper-frame", {
        "farris-image-cropper-disabled": p.value
      }],
      style: {
        "text-align": u.value
      },
      onMousemove: P((z) => T(z), ["prevent"]),
      onTouchmove: P((z) => T(z), ["prevent"]),
      onMouseup: P(() => A(), ["prevent"]),
      onTouchend: P(() => A(), ["prevent"])
    }, [!b && f("div", {
      ref: d,
      class: "farris-image-cropper",
      style: [{
        background: h.value ? D.value : ""
      }]
    }, [l.value && f("img", {
      title: "farris-source-image",
      ref: H,
      class: "farris-source-image",
      style: [{
        visibility: h.value ? "visible" : "hidden"
      }, {
        transform: n.value
      }],
      src: l.value,
      onLoad: () => j()
    }, null), C.value && f("div", {
      class: "farris-image-overlay",
      style: [{
        width: `${C.value.width || 0}px`
      }, {
        height: `${C.value.height || 0}px`
      }, {
        "margin-left": u.value === "center" ? _.value : ""
      }]
    }, null), h.value && f("div", {
      class: ["farris-image-cropper-wrapper", {
        "farris-image-cropper-rounded": N.value
      }],
      style: [{
        top: `${g.value.y1}px`
      }, {
        left: `${g.value.x1}px`
      }, {
        width: `${g.value.x2 - g.value.x1}px`
      }, {
        height: `${g.value.y2 - g.value.y1}px`
      }, {
        visibility: h.value ? "visible" : "hidden"
      }, {
        "margin-left": u.value === "center" ? _.value : ""
      }],
      tabindex: "0"
    }, [f("div", {
      class: "farris-image-cropper-move",
      onMousedown: P((z) => k(z, $.Move, "topleft"), ["prevent"])
    }, null), !y.value && f("div", null, [L, M])])]), R.value && f("div", {
      class: "farris-image-cropper-loading"
    }, [f("div", {
      class: "farris-image-cropper-loading-spinner"
    }, null)]), b && f("div", {
      class: "farris-image-cropper-error"
    }, [t.value])]);
  }
});
Z.install = (a) => {
  a.component(Z.name, Z);
};
Z.register = (a, c, u, N) => {
  a["image-cropper"] = Z, c["image-cropper"] = Ie;
};
Z.registerDesigner = (a, c, u) => {
  a["image-cropper"] = bt, c["image-cropper"] = Ie;
};
export {
  Z as ImageCropper,
  Z as default,
  he as imageCropperProps,
  Ie as propsResolver
};