vue-select-avatar/dist/index.js

基于 vue 选择头像

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