vue-select-avatar/dist/index.js

基于 vue 选择头像

var fe = Object.defineProperty;
var pe = (a, e, i) => e in a ? fe(a, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : a[e] = i;
var le = (a, e, i) => pe(a, typeof e != "symbol" ? e + "" : e, i);
import { defineComponent as ve, reactive as P, ref as p, computed as G, watch as j, onUnmounted as Q, createElementBlock as U, openBlock as H, normalizeStyle as C, normalizeClass as re, createCommentVNode as J, watchEffect as ae, onMounted as ue, unref as f, createElementVNode as W, renderSlot as Z } from "vue";
const Se = "image/jpeg, image/png, image/webp, image/bmp, image/svg+xml, image/avif, image/tiff", we = () => ({
  viewportWidth: 0,
  viewportHeight: 0,
  viewX: 0,
  viewY: 0,
  viewSize: 0,
  imageX: 0,
  imageY: 0,
  imageWidth: 0,
  imageHeight: 0,
  imageScale: 1
});
class k extends Error {
  constructor(i) {
    super(i);
    le(this, "code");
    this.name = "SelectAvatarError", this.code = i;
  }
}
const ye = {
  UNKNOWN: "未知错误",
  CANCEL: "取消",
  NOT_IMAGE_FILE: "非图片文件",
  IMAGE_FILE_TOO_LARGE: "图片文件过大",
  IMAGE_TOO_SMALL: "图片尺寸过小",
  IMAGE_TOO_LARGE: "图片尺寸过大",
  IMAGE_LOAD_FAILED: "图片加载失败",
  CANVAS_TO_BLOB_FAILED: "canvas 转 blob 失败",
  BLOB_TO_BASE64_FAILED: "blob 转 base64 失败",
  CANVAS_CONTEXT_NOT_DEFINED: "canvas context 未定义",
  NO_IMAGE_SELECTED: "未选择图片"
}, We = (a) => a instanceof k && a.code === "CANCEL", Ue = (a, e = ye) => a instanceof k ? e[a.code] : a instanceof Error ? a.message : e.UNKNOWN, xe = (a) => new Promise((e, i) => {
  const { accept: t, multiple: n } = a || {}, l = document.createElement("input");
  l.type = "file", t && (l.accept = t), n && (l.multiple = n), l.onchange = () => {
    const v = Array.from(l.files || []);
    v.length > 0 ? e(v) : i(new k("CANCEL"));
  }, l.oncancel = () => i(new k("CANCEL")), l.onerror = (v, w, c, s, r) => i(r || new k("UNKNOWN")), l.click();
}), Xe = async (a) => {
  const {
    accept: e = Se,
    maxFileSize: i = 2 * 1024 * 1024,
    minSize: t,
    maxSize: n = 5e3,
    resizeToMax: l = !1,
    compress: v = !1,
    quality: w = 0.8
  } = a || {};
  let [c] = await xe({ accept: e });
  if (!c.type.startsWith("image/"))
    throw new k("NOT_IMAGE_FILE");
  if (c.size > i)
    throw new k("IMAGE_FILE_TOO_LARGE");
  let s = await ze(c);
  if (typeof t == "number" && Math.min(s.width, s.height) < t)
    throw new k("IMAGE_TOO_SMALL");
  if (Math.max(s.width, s.height) > n) {
    if (!l)
      throw new k("IMAGE_TOO_LARGE");
    const r = n / Math.max(s.width, s.height);
    s = {
      width: Math.floor(s.width * r),
      height: Math.floor(s.height * r)
    };
  }
  return Ye(c, v) ? c = await te(c, s, "image/png", w) : l ? c = await te(c, s, "image/png") : c.type !== "image/png" && (c = await te(c, s, "image/png")), { file: c, ...s };
}, ze = async (a) => {
  const e = await ne(URL.createObjectURL(a), !0);
  return { width: e.width, height: e.height };
}, Ye = (a, e) => typeof e == "number" ? a.size > e : !!e, te = async (a, e, i, t) => {
  const n = await ne(URL.createObjectURL(a), !0), l = document.createElement("canvas");
  l.width = e.width, l.height = e.height;
  const v = l.getContext("2d");
  if (!v) throw new k("CANVAS_CONTEXT_NOT_DEFINED");
  v.drawImage(n, 0, 0, e.width, e.height);
  const w = await me(l, i || a.type, t);
  return new File([w], a.name, { type: a.type });
}, ne = async (a, e = !1) => new Promise((i, t) => {
  const n = new Image();
  n.onload = () => {
    e && URL.revokeObjectURL(n.src), i(n);
  }, n.onerror = () => {
    e && URL.revokeObjectURL(n.src), t(new k("IMAGE_LOAD_FAILED"));
  }, n.src = a;
}), me = (a, e, i) => new Promise((t, n) => {
  a.toBlob(
    (l) => {
      l ? t(l) : n(new k("CANVAS_TO_BLOB_FAILED"));
    },
    e,
    i
  );
}), Ee = (a) => new Promise((e, i) => {
  const t = new FileReader();
  t.onload = () => {
    typeof t.result == "string" ? e(t.result) : i(new k("BLOB_TO_BASE64_FAILED"));
  }, t.onerror = (n) => {
    i(n);
  }, t.readAsDataURL(a);
}), Le = async (a, e, i) => {
  const {
    format: t = "file",
    size: n,
    type: l = "image/png",
    quality: v = 1,
    filename: w,
    maxSize: c,
    useOriginSize: s = !0,
    backgroundColor: r = "#ffffff"
  } = i || {};
  let m = a.url, X = !1;
  m || (m = URL.createObjectURL(a.file), X = !0);
  const S = await ne(m);
  X && URL.revokeObjectURL(m);
  const E = document.createElement("canvas"), y = E.getContext("2d");
  if (!y) throw new k("CANVAS_CONTEXT_NOT_DEFINED");
  let u = e.viewSize / e.imageScale;
  const I = (e.viewX - e.imageX) / e.imageScale, L = (e.viewY - e.imageY) / e.imageScale, z = e.viewSize / e.imageScale;
  typeof n == "number" ? (u > n || !s) && (u = n) : typeof c == "number" && u > c && (u = c), E.width = u, E.height = u, l === "image/jpeg" && r && (y.fillStyle = r, y.fillRect(0, 0, u, u)), y.drawImage(S, I, L, z, z, 0, 0, u, u);
  const M = await me(E, l, v);
  return t === "file" ? new File([M], w || a.file.name, { type: l }) : await Ee(M);
}, be = () => "clipPath" in document.createElement("div").style, ge = (a, e, i) => {
  const t = { x: 0, y: 0 };
  switch (i) {
    case "top-left":
      t.x += a.x - e.viewX, t.y += a.y - e.viewY;
      break;
    case "top-right":
      t.x += a.x - (e.viewX + e.viewSize), t.y += a.y - e.viewY;
      break;
    case "bottom-left":
      t.x += a.x - e.viewX, t.y += a.y - (e.viewY + e.viewSize);
      break;
    case "bottom-right":
      t.x += a.x - (e.viewX + e.viewSize), t.y += a.y - (e.viewY + e.viewSize);
      break;
  }
  return t;
}, ke = ["src"], Ie = /* @__PURE__ */ ve({
  __name: "Preview",
  props: {
    size: { default: 180 },
    viewportRef: {},
    round: { type: Boolean },
    bg: {}
  },
  setup(a) {
    const e = a, i = P(we()), t = p(), n = G(() => {
      var r;
      return (r = e.viewportRef) == null ? void 0 : r.backing;
    }), l = G(() => ({
      width: `${e.size}px`,
      height: `${e.size}px`,
      "--bg": e.bg
    })), v = G(() => {
      const r = e.size / (i.viewSize / i.imageScale), m = (i.imageX - i.viewX) / i.imageScale * r, X = (i.imageY - i.viewY) / i.imageScale * r;
      return {
        watch: `${i.imageWidth}px`,
        height: `${i.imageHeight}px`,
        transform: `translate3d(${m}px, ${X}px, 0px) scale(${r})`
      };
    }), w = (r) => {
      t.value = r.detail;
    }, c = (r) => {
      Object.assign(i, r.detail);
    };
    let s = () => {
    };
    return j(
      () => e.viewportRef,
      (r) => {
        r && (r.elEmitter.addEventListener("broadcast:info", w), r.elEmitter.addEventListener("broadcast:pos", c), s = () => {
          r.elEmitter.removeEventListener("broadcast:info", w), r.elEmitter.removeEventListener("broadcast:pos", c);
        });
      }
    ), Q(s), (r, m) => {
      var X;
      return H(), U("div", {
        class: re(["preview", { backing: n.value, round: r.round }]),
        style: C(l.value)
      }, [
        (X = t.value) != null && X.url ? (H(), U("img", {
          key: 0,
          class: "image",
          src: t.value.url,
          alt: "image",
          style: C(v.value)
        }, null, 12, ke)) : J("", !0)
      ], 6);
    };
  }
}), de = (a, e) => {
  const i = a.__vccOpts || a;
  for (const [t, n] of e)
    i[t] = n;
  return i;
}, He = /* @__PURE__ */ de(Ie, [["__scopeId", "data-v-ea39dbca"]]), Me = (a) => {
  const { pos: e, showViewLayer: i, props: t } = a, n = P({}), l = P({}), v = P({}), w = P({}), c = P({}), s = P({});
  return ae(() => {
    n.width = `${e.viewportWidth}px`, n.height = `${e.viewportHeight}px`, v.width = `${e.viewSize}px`, v.height = `${e.viewSize}px`, v.transform = `translate3d(${e.viewX}px, ${e.viewY}px, 0px)`, w.width = `${e.imageWidth}px`, w.height = `${e.imageHeight}px`, w.transform = `translate3d(${e.imageX}px, ${e.imageY}px, 0px) scale(${e.imageScale})`, s.width = `${e.viewSize + 2}px`, s.height = `${e.viewSize + 2}px`, s.transform = `translate3d(${e.viewX - 1}px, ${e.viewY - 1}px, 0px)`, t.forceDoubleLayer ? l.clipPath = void 0 : l.clipPath = `polygon(0% 0%, 0% 100%, ${e.viewX}px 100%, ${e.viewX}px ${e.viewY}px, ${e.viewX + e.viewSize}px ${e.viewY}px, ${e.viewX + e.viewSize}px ${e.viewY + e.viewSize}px, ${e.viewX}px ${e.viewY + e.viewSize}px, ${e.viewX}px 100%, 100% 100%, 100% 0%)`, i.value && (c.width = `${e.imageWidth}px`, c.height = `${e.imageHeight}px`, c.transform = `translate3d(${e.imageX - e.viewX}px, ${e.imageY - e.viewY}px, 0px) scale(${e.imageScale})`);
  }), { viewportStyle: n, maskStyle: l, viewStyle: v, imageStyle: w, innerImageStyle: c, consolesStyle: s };
}, Ae = (a) => {
  const { imageMoving: e } = a, i = p(!1), t = () => {
    i.value = !1;
  };
  return j(e, (n) => {
    n && (i.value = !1);
  }), { backing: i, handleTransitionEnd: t };
}, ce = (a) => {
  const e = p(!1), i = (n) => {
    n.key === a && (e.value = !0);
  }, t = (n) => {
    n.key === a && (e.value = !1);
  };
  return ue(() => {
    window.addEventListener("keydown", i), window.addEventListener("keyup", t);
  }), Q(() => {
    window.removeEventListener("keydown", i), window.removeEventListener("keyup", t);
  }), e;
}, ee = (a) => {
  const { props: e, info: i, pos: t, backing: n } = a;
  return { checkImageBack: (v = !0) => {
    if (!i.value || e.fixedImage) return;
    const w = t.imageWidth * t.imageScale, c = t.imageHeight * t.imageScale;
    let s = t.imageX;
    s > t.viewX ? s = t.viewX : s < t.viewX + t.viewSize - w && (s = t.viewX + t.viewSize - w);
    let r = t.imageY;
    r > t.viewY ? r = t.viewY : r < t.viewY + t.viewSize - c && (r = t.viewY + t.viewSize - c), (s !== t.imageX || r !== t.imageY) && (t.imageX = s, t.imageY = r, n.value = v);
  } };
}, oe = (a) => {
  const { pos: e, info: i } = a;
  return { checkViewPosition: () => {
    i.value && (e.viewX < e.imageX && (e.viewX = e.imageX), e.viewY < e.imageY && (e.viewY = e.imageY), e.viewX + e.viewSize > e.imageX + e.imageWidth * e.imageScale && (e.viewX = e.imageX + e.imageWidth * e.imageScale - e.viewSize), e.viewY + e.viewSize > e.imageY + e.imageHeight * e.imageScale && (e.viewY = e.imageY + e.imageHeight * e.imageScale - e.viewSize));
  } };
}, he = (a) => {
  const { pos: e, pointPosition: i, props: t, info: n } = a;
  return { resizeView: (v) => {
    switch (i.value) {
      case "top-left":
        const w = v.x - e.viewX, c = v.y - e.viewY;
        let s = w;
        v.x >= e.viewX + c && v.x <= e.viewX + e.viewSize + c && (s = c), e.viewX += s, e.viewY += s, e.viewSize -= s, e.viewSize < t.minViewSize && (e.viewX += e.viewSize - t.minViewSize, e.viewY += e.viewSize - t.minViewSize, e.viewSize = t.minViewSize), n.value && e.viewX < e.imageX && (e.viewSize -= e.imageX - e.viewX, e.viewY += e.imageX - e.viewX, e.viewX = e.imageX), n.value && e.viewY < e.imageY && (e.viewSize -= e.imageY - e.viewY, e.viewX += e.imageY - e.viewY, e.viewY = e.imageY);
        break;
      case "top-right":
        const r = v.x - (e.viewX + e.viewSize), m = v.y - e.viewY;
        v.x >= e.viewX && v.x <= e.viewX + e.viewSize - m ? (e.viewY += m, e.viewSize -= m, e.viewSize < t.minViewSize && (e.viewY += e.viewSize - t.minViewSize, e.viewSize = t.minViewSize)) : (e.viewY -= r, e.viewSize += r, e.viewSize < t.minViewSize && (e.viewY += e.viewSize - t.minViewSize, e.viewSize = t.minViewSize)), n.value && e.viewY < e.imageY && (e.viewSize -= e.imageY - e.viewY, e.viewY = e.imageY), n.value && e.viewX + e.viewSize > e.imageX + e.imageWidth * e.imageScale && (e.viewY -= e.imageX + e.imageWidth * e.imageScale - (e.viewX + e.viewSize), e.viewSize = e.imageX + e.imageWidth * e.imageScale - e.viewX);
        break;
      case "bottom-left":
        const X = v.x - e.viewX, S = v.y - (e.viewY + e.viewSize);
        v.x >= e.viewX - S && v.x <= e.viewX - S + (e.viewSize + S) ? (e.viewX -= S, e.viewSize += S, e.viewSize < t.minViewSize && (e.viewX = e.viewX + e.viewSize - t.minViewSize, e.viewSize = t.minViewSize)) : (e.viewX += X, e.viewSize -= X, e.viewSize < t.minViewSize && (e.viewX = e.viewX + e.viewSize - t.minViewSize, e.viewSize = t.minViewSize)), n.value && e.viewX < e.imageX && (e.viewSize -= e.imageX - e.viewX, e.viewX = e.imageX), n.value && e.viewY + e.viewSize > e.imageY + e.imageHeight * e.imageScale && (e.viewX -= e.imageY + e.imageHeight * e.imageScale - (e.viewY + e.viewSize), e.viewSize = e.imageY + e.imageHeight * e.imageScale - e.viewY);
        break;
      case "bottom-right":
        const E = v.x - (e.viewX + e.viewSize), y = v.y - (e.viewY + e.viewSize);
        v.x >= e.viewX && v.x <= e.viewX + e.viewSize + y ? e.viewSize += y : e.viewSize += E, e.viewSize < t.minViewSize && (e.viewSize = t.minViewSize), n.value && e.viewX + e.viewSize > e.imageX + e.imageWidth * e.imageScale && (e.viewSize = e.imageX + e.imageWidth * e.imageScale - e.viewX), n.value && e.viewY + e.viewSize > e.imageY + e.imageHeight * e.imageScale && (e.viewSize = e.imageY + e.imageHeight * e.imageScale - e.viewY);
        break;
    }
  } };
}, Te = (a) => {
  const { imageMoving: e, viewMoving: i, viewResizing: t, info: n, pos: l, props: v, viewportRef: w, pointPosition: c } = a, s = p({ x: 0, y: 0 }), r = p({ x: 0, y: 0 }), m = p({ x: 0, y: 0 }), X = p({ x: 0, y: 0 }), S = p({ x: 0, y: 0 }), { checkImageBack: E } = ee(a), { resizeView: y } = he(a), { checkViewPosition: u } = oe(a), I = (g) => {
    !n.value || v.fixedImage || (g.preventDefault(), g.stopPropagation(), s.value.x = g.clientX, s.value.y = g.clientY, e.value = !0, document.addEventListener("mousemove", L), document.addEventListener("mouseup", z));
  }, L = (g) => {
    g.preventDefault(), g.stopPropagation(), l.imageX += g.clientX - s.value.x, l.imageY += g.clientY - s.value.y, s.value.x = g.clientX, s.value.y = g.clientY;
  }, z = () => {
    e.value = !1, document.removeEventListener("mousemove", L), document.removeEventListener("mouseup", z), E();
  }, M = (g, A) => {
    if (!w.value) return;
    g.preventDefault(), g.stopPropagation(), t.value = !0, c.value = A;
    const { left: B, top: D } = w.value.getBoundingClientRect();
    X.value.x = B, X.value.y = D, s.value.x = g.clientX - B, s.value.y = g.clientY - D, S.value = ge(s.value, l, A), s.value.x -= S.value.x, s.value.y -= S.value.y, document.addEventListener("mousemove", O), document.addEventListener("mouseup", Y);
  }, O = (g) => {
    if (!w.value) return;
    g.preventDefault(), g.stopPropagation();
    const A = { x: g.clientX - X.value.x, y: g.clientY - X.value.y };
    A.x -= S.value.x, A.y -= S.value.y, y(A), s.value = A;
  }, Y = () => {
    t.value = !1, c.value = void 0, document.removeEventListener("mousemove", O), document.removeEventListener("mouseup", Y);
  }, F = (g) => {
    !v.fixedImage || !w.value || (g.preventDefault(), g.stopPropagation(), i.value = !0, r.value.x = g.clientX, r.value.y = g.clientY, m.value.x = l.viewX, m.value.y = l.viewY, document.addEventListener("mousemove", _), document.addEventListener("mouseup", $));
  }, _ = (g) => {
    g.preventDefault(), g.stopPropagation(), l.viewX = g.clientX - r.value.x + m.value.x, l.viewY = g.clientY - r.value.y + m.value.y, u();
  }, $ = () => {
    i.value = !1, document.removeEventListener("mousemove", _), document.removeEventListener("mouseup", $);
  };
  return { handleMouseDown: I, handlePointMouseDown: M, handleViewMouseDown: F };
}, Ve = (a) => {
  const {
    props: e,
    imageMoving: i,
    pos: t,
    viewportRef: n,
    info: l,
    minImageScale: v,
    pressCtrl: w,
    pressShift: c,
    step: s,
    ctrlStep: r,
    shiftStep: m
  } = a, X = (y = -1) => {
    let u = s.value;
    return e.shiftScaleStep > 0 && c.value ? u = m.value : e.ctrlScaleStep > 0 && w.value && (u = r.value), y > 0 && (u = -u), e.wheelReverse && (u = -u), u;
  }, { checkImageBack: S } = ee(a);
  return { handleWheel: (y) => {
    if (!l.value || i.value || e.fixedImage) return;
    y.preventDefault(), y.stopPropagation();
    const I = n.value.getBoundingClientRect(), L = y.clientX - I.left, z = y.clientY - I.top, M = t.imageScale, O = X(y.deltaY), Y = Math.max(v.value, M + O);
    t.imageX = L - (L - t.imageX) * (Y / M), t.imageY = z - (z - t.imageY) * (Y / M), t.imageScale = Y, S(!1);
  } };
}, Oe = (a) => {
  const {
    info: e,
    imageMoving: i,
    pos: t,
    minImageScale: n,
    viewportRef: l,
    pointPosition: v,
    viewResizing: w,
    props: c,
    viewMoving: s
  } = a, { checkImageBack: r } = ee(a), { resizeView: m } = he(a), { checkViewPosition: X } = oe(a), S = p(), E = p(), y = p(!1), u = p({ x: 0, y: 0 }), I = p({ x: 0, y: 0 }), L = p({ x: 0, y: 0 }), z = p({ x: 0, y: 0 }), M = (o) => {
    if (!(!e.value || c.fixedImage)) {
      if (o.preventDefault(), o.stopPropagation(), o.touches.length === 1) {
        const x = o.touches[0];
        S.value = { x: x.clientX, y: x.clientY }, y.value = !1;
      } else o.touches.length >= 2 && (y.value = !0, u.value = {
        x: (o.touches[0].clientX + o.touches[1].clientX) / 2,
        y: (o.touches[0].clientY + o.touches[1].clientY) / 2
      }, E.value = Math.hypot(
        o.touches[0].clientX - o.touches[1].clientX,
        o.touches[0].clientY - o.touches[1].clientY
      ));
      i.value = !0, document.addEventListener("touchmove", O, { passive: !1 }), document.addEventListener("touchend", Y), document.addEventListener("touchcancel", Y);
    }
  }, O = (o) => {
    if (!(!e.value || !i.value))
      if (o.preventDefault(), o.stopPropagation(), y.value) {
        if (o.touches.length >= 2) {
          const x = Math.hypot(
            o.touches[0].clientX - o.touches[1].clientX,
            o.touches[0].clientY - o.touches[1].clientY
          ), T = {
            x: (o.touches[0].clientX + o.touches[1].clientX) / 2,
            y: (o.touches[0].clientY + o.touches[1].clientY) / 2
          }, V = T.x - u.value.x, q = T.y - u.value.y;
          if (t.imageX += V, t.imageY += q, u.value = T, E.value) {
            const ie = x / E.value, K = Math.max(n.value, t.imageScale * ie), d = l.value.getBoundingClientRect(), h = u.value.x - d.left, se = u.value.y - d.top;
            t.imageX = h - (h - t.imageX) * (K / t.imageScale), t.imageY = se - (se - t.imageY) * (K / t.imageScale), t.imageScale = K, E.value = x;
          }
        }
      } else {
        const x = o.touches[0];
        if (S.value) {
          const T = x.clientX - S.value.x, V = x.clientY - S.value.y;
          t.imageX += T, t.imageY += V, S.value = { x: x.clientX, y: x.clientY };
        }
      }
  }, Y = (o) => {
    if (i.value) {
      if (o.touches.length === 1) {
        const x = o.touches[0];
        S.value = { x: x.clientX, y: x.clientY }, y.value = !1;
      }
      o.touches.length > 0 || (S.value = void 0, E.value = void 0, y.value = !1, i.value = !1, r(), document.removeEventListener("touchmove", O), document.removeEventListener("touchend", Y), document.removeEventListener("touchcancel", F));
    }
  }, F = (o) => {
    Y(o);
  }, _ = (o, x) => {
    if (!l.value) return;
    o.preventDefault(), o.stopPropagation(), w.value = !0, v.value = x;
    const { left: T, top: V } = l.value.getBoundingClientRect();
    I.value.x = T, I.value.y = V, u.value.x = o.touches[0].clientX - T, u.value.y = o.touches[0].clientY - V, z.value = ge(u.value, t, x), u.value.x -= z.value.x, u.value.y -= z.value.y, document.addEventListener("touchmove", $, { passive: !1 }), document.addEventListener("touchend", g), document.addEventListener("touchcancel", A);
  }, $ = (o) => {
    if (!l.value) return;
    o.preventDefault(), o.stopPropagation();
    const x = {
      x: o.touches[0].clientX - I.value.x,
      y: o.touches[0].clientY - I.value.y
    };
    x.x -= z.value.x, x.y -= z.value.y, m(x), u.value = x;
  }, g = (o) => {
    o.touches.length > 0 || (w.value = !1, v.value = void 0, document.removeEventListener("touchmove", $), document.removeEventListener("touchend", g), document.removeEventListener("touchcancel", A));
  }, A = (o) => {
    g(o);
  }, B = (o) => {
    !c.fixedImage || !l.value || (o.preventDefault(), o.stopPropagation(), s.value = !0, u.value.x = o.touches[0].clientX, u.value.y = o.touches[0].clientY, L.value.x = t.viewX, L.value.y = t.viewY, document.addEventListener("touchmove", D, { passive: !1 }), document.addEventListener("touchend", N), document.addEventListener("touchcancel", R));
  }, D = (o) => {
    o.preventDefault(), o.stopPropagation(), t.viewX = o.touches[0].clientX - u.value.x + L.value.x, t.viewY = o.touches[0].clientY - u.value.y + L.value.y, X();
  }, N = (o) => {
    o.touches.length > 0 || (s.value = !1, document.removeEventListener("touchmove", D), document.removeEventListener("touchend", N), document.removeEventListener("touchcancel", R));
  }, R = (o) => {
    N(o);
  };
  return { handleTouchStart: M, handlePointTouchStart: _, handleViewTouchStart: B };
}, De = () => {
  const a = p();
  let e;
  return Q(() => {
    var i;
    (i = a.value) != null && i.url && URL.revokeObjectURL(a.value.url);
  }), ae(() => {
    var i, t;
    e && e !== ((i = a.value) == null ? void 0 : i.url) && URL.revokeObjectURL(e), e = (t = a.value) == null ? void 0 : t.url;
  }), a;
}, Pe = (a) => {
  const { props: e, pos: i, info: t, minImageScale: n, step: l, ctrlStep: v, shiftStep: w, elEmitter: c } = a;
  let s = !0;
  j(
    () => e,
    () => {
      i.viewportWidth = e.width ?? e.size ?? 0, i.viewportHeight = e.height ?? e.size ?? 0, (!e.fixedImage || s) && (i.viewSize = e.viewSize ?? 0, i.viewX = (i.viewportWidth - i.viewSize) / 2, i.viewY = (i.viewportHeight - i.viewSize) / 2), s = !1;
    },
    { deep: !0, immediate: !0 }
  ), j(
    () => e.fixedImage,
    () => {
      t.value && r(t.value);
    }
  );
  const r = (m) => {
    t.value = m, t.value.url = URL.createObjectURL(m.file), c.dispatchEvent(new CustomEvent("broadcast:info", { detail: { ...t.value } })), i.imageWidth = m.width, i.imageHeight = m.height, e.fixedImage ? (i.imageScale = Math.abs(m.width - i.viewportWidth) > Math.abs(m.height - i.viewportHeight) ? (i.viewportWidth - e.imagePadding * 2) / m.width : (i.viewportHeight - e.imagePadding * 2) / m.height, i.imageX = (i.viewportWidth - m.width * i.imageScale) / 2, i.imageY = (i.viewportHeight - m.height * i.imageScale) / 2, i.viewSize = Math.min(i.imageWidth, i.imageHeight) * i.imageScale, i.viewX = (i.viewportWidth - i.viewSize) / 2, i.viewY = (i.viewportHeight - i.viewSize) / 2) : (i.imageScale = Math.max(i.viewSize / m.width, i.viewSize / m.height), i.imageX = (i.viewportWidth - m.width * i.imageScale) / 2, i.imageY = (i.viewportHeight - m.height * i.imageScale) / 2, n.value = i.imageScale, l.value = n.value * (e.scaleStep / i.viewSize), v.value = n.value * (e.ctrlScaleStep / i.viewSize), w.value = n.value * (e.shiftScaleStep / i.viewSize));
  };
  return ae(
    () => c.dispatchEvent(new CustomEvent("broadcast:pos", { detail: { ...i } }))
  ), { initPosition: r };
}, Ce = (a) => {
  const { props: e, pos: i, info: t } = a, { checkImageBack: n } = ee(a), { checkViewPosition: l } = oe(a), v = (c) => {
    if (e.fixedImage) {
      if (e.directionKey)
        switch (c.key) {
          case "ArrowUp":
            i.viewY -= 1;
            break;
          case "ArrowRight":
            i.viewX += 1;
            break;
          case "ArrowDown":
            i.viewY += 1;
            break;
          case "ArrowLeft":
            i.viewX -= 1;
            break;
        }
      if (e.wasdKey)
        switch (c.key) {
          case "w":
            i.viewY -= 1;
            break;
          case "d":
            i.viewX += 1;
            break;
          case "s":
            i.viewY += 1;
            break;
          case "a":
            i.viewX -= 1;
            break;
        }
      l();
    } else {
      if (!t.value) return;
      if (e.directionKey)
        switch (c.key) {
          case "ArrowUp":
            i.imageY -= 1;
            break;
          case "ArrowRight":
            i.imageX += 1;
            break;
          case "ArrowDown":
            i.imageY += 1;
            break;
          case "ArrowLeft":
            i.imageX -= 1;
            break;
        }
      if (e.wasdKey)
        switch (c.key) {
          case "w":
            i.imageY -= 1;
            break;
          case "d":
            i.imageX += 1;
            break;
          case "s":
            i.imageY += 1;
            break;
          case "a":
            i.imageX -= 1;
            break;
        }
      n();
    }
  };
  let w;
  j(
    [() => e.wasdKey, () => e.directionKey],
    () => {
      const c = e.wasdKey || e.directionKey;
      c !== w && (w = c, c ? document.addEventListener("keydown", v) : document.removeEventListener("keydown", v));
    },
    { immediate: !0 }
  ), Q(() => {
    document.removeEventListener("keydown", v);
  });
}, $e = ["src"], Re = ["src"], _e = /* @__PURE__ */ ve({
  __name: "Viewport",
  props: {
    size: { default: 300 },
    width: {},
    height: {},
    info: {},
    viewSize: { default: 180 },
    grid: { type: Boolean, default: !1 },
    scaleStep: { default: 10 },
    ctrlScaleStep: { default: 5 },
    shiftScaleStep: { default: 1 },
    wheelReverse: { type: Boolean, default: !1 },
    fixedImage: { type: Boolean, default: !1 },
    minViewSize: { default: 10 },
    imagePadding: { default: 10 },
    directionKey: { type: Boolean, default: !0 },
    wasdKey: { type: Boolean, default: !0 },
    forceDoubleLayer: { type: Boolean, default: !1 },
    showSize: { type: Boolean }
  },
  setup(a, { expose: e }) {
    const i = a, t = P(we()), n = De(), l = G(() => {
      var b;
      return (b = n.value) == null ? void 0 : b.url;
    }), v = p(!1), w = p(!1), c = p(!1), s = p(), r = p(0), m = p(0), X = p(0), S = p(0), E = ce("Control"), y = ce("Shift"), u = p(be()), I = p(), L = G(
      () => i.forceDoubleLayer || !!l.value && !u.value
    ), { backing: z, handleTransitionEnd: M } = Ae({ imageMoving: v }), O = document.createElement("div"), Y = {
      props: i,
      pos: t,
      info: n,
      imageMoving: v,
      viewMoving: w,
      viewResizing: c,
      viewportRef: s,
      minImageScale: r,
      step: m,
      ctrlStep: X,
      shiftStep: S,
      pressCtrl: E,
      pressShift: y,
      pointPosition: I,
      backing: z,
      elEmitter: O,
      showViewLayer: L
    }, { viewportStyle: F, maskStyle: _, viewStyle: $, imageStyle: g, innerImageStyle: A, consolesStyle: B } = Me(Y), { initPosition: D } = Pe(Y), { handleMouseDown: N, handlePointMouseDown: R, handleViewMouseDown: o } = Te(Y), { handleWheel: x } = Ve(Y), { handleTouchStart: T, handlePointTouchStart: V, handleViewTouchStart: q } = Oe(Y);
    Ce(Y);
    const ie = async (b) => {
      const d = await Xe(b);
      D(d);
    }, K = async (b) => {
      if (!n.value) throw new k("NO_IMAGE_SELECTED");
      return Le(n.value, t, b);
    };
    return ue(() => {
      i.info && D(i.info);
    }), e({ select: ie, cropper: K, initPosition: D, elEmitter: O, backing: z }), (b, d) => (H(), U("div", {
      class: re(["viewport", [
        {
          grid: b.grid,
          backing: f(z),
          "image-moving": v.value,
          "view-moving": w.value,
          "view-resizing": c.value,
          "fixed-image": b.fixedImage
        },
        I.value
      ]]),
      style: C(f(F)),
      ref_key: "viewportRef",
      ref: s,
      onMousedown: d[11] || (d[11] = //@ts-ignore
      (...h) => f(N) && f(N)(...h)),
      onWheel: d[12] || (d[12] = //@ts-ignore
      (...h) => f(x) && f(x)(...h)),
      onTouchstart: d[13] || (d[13] = //@ts-ignore
      (...h) => f(T) && f(T)(...h))
    }, [
      l.value ? (H(), U("img", {
        key: 0,
        class: "image",
        src: l.value,
        alt: "image",
        style: C(f(g)),
        onTransitionend: d[0] || (d[0] = //@ts-ignore
        (...h) => f(M) && f(M)(...h))
      }, null, 44, $e)) : J("", !0),
      W("div", {
        class: "mask",
        style: C(f(_))
      }, null, 4),
      L.value ? (H(), U("div", {
        key: 1,
        class: "view",
        style: C(f($))
      }, [
        W("img", {
          class: "inner-image",
          src: l.value,
          alt: "inner-image",
          style: C(f(A))
        }, null, 12, Re)
      ], 4)) : J("", !0),
      b.fixedImage ? (H(), U("div", {
        key: 2,
        class: "consoles",
        style: C(f(B)),
        onMousedown: d[9] || (d[9] = //@ts-ignore
        (...h) => f(o) && f(o)(...h)),
        onTouchstart: d[10] || (d[10] = //@ts-ignore
        (...h) => f(q) && f(q)(...h))
      }, [
        W("div", {
          class: "point top-left",
          onMousedown: d[1] || (d[1] = (h) => f(R)(h, "top-left")),
          onTouchstart: d[2] || (d[2] = (h) => f(V)(h, "top-left"))
        }, [
          Z(b.$slots, "point-top-left", {}, void 0, !0)
        ], 32),
        W("div", {
          class: "point top-right",
          onMousedown: d[3] || (d[3] = (h) => f(R)(h, "top-right")),
          onTouchstart: d[4] || (d[4] = (h) => f(V)(h, "top-right"))
        }, [
          Z(b.$slots, "point-top-right", {}, void 0, !0)
        ], 32),
        W("div", {
          class: "point bottom-left",
          onMousedown: d[5] || (d[5] = (h) => f(R)(h, "bottom-left")),
          onTouchstart: d[6] || (d[6] = (h) => f(V)(h, "bottom-left"))
        }, [
          Z(b.$slots, "point-bottom-left", {}, void 0, !0)
        ], 32),
        W("div", {
          class: "point bottom-right",
          onMousedown: d[7] || (d[7] = (h) => f(R)(h, "bottom-right")),
          onTouchstart: d[8] || (d[8] = (h) => f(V)(h, "bottom-right"))
        }, [
          Z(b.$slots, "point-bottom-right", {}, void 0, !0)
        ], 32)
      ], 36)) : J("", !0)
    ], 38));
  }
}), Fe = /* @__PURE__ */ de(_e, [["__scopeId", "data-v-79ced8d8"]]);
export {
  He as Preview,
  k as SelectAvatarError,
  Fe as Viewport,
  Se as accept,
  Ee as blobToBase64,
  me as canvasToBlob,
  Le as cropper,
  ye as errorMessageMap,
  we as getDefaultPosition,
  Ue as getErrorMessage,
  ze as getImageDimensions,
  be as getIsClipPathSupported,
  ge as getPointOffset,
  We as isCancelError,
  ne as loadImage,
  te as resizeImage,
  xe as selectFile,
  Xe as selectImage
};