import { resolveDirective as ce, openBlock as m, createElementBlock as v, normalizeStyle as P, createElementVNode as f, normalizeClass as B, renderSlot as x, createCommentVNode as L, withDirectives as N, vShow as U, Fragment as Z, renderList as K, toDisplayString as se, withModifiers as E, pushScopeId as Q, popScopeId as ee, resolveComponent as S, createVNode as Y, withCtx as I, createBlock as j, createTextVNode as ye } from "vue";
const de = new IntersectionObserver(
(e) => {
for (const t of e)
if (t.isIntersecting) {
const o = t.target;
o && o.dataset && (o.src = o.dataset.src, o.dispatchEvent(new Event("startLoad")), de.unobserve(o));
}
},
{
threshold: [0]
}
), we = {
mounted(e, t) {
if (!t.value)
return;
const { src: o, active: n } = t.value;
n ? (e.dataset.src = o, de.observe(e)) : e && (e.src = o, e.dispatchEvent(new Event("startLoad")));
}
};
const C = (e, t) => {
const o = e.__vccOpts || e;
for (const [n, i] of t)
o[n] = i;
return o;
}, be = {
directives: {
lazyLoad: we
},
props: {
src: { type: String, default: "" },
aspectRatio: { type: Number, default: 0 },
fit: { type: String, default: "" },
lazy: { type: Boolean, default: !1 },
bgColor: { type: String, default: "black" },
alt: { type: String, default: "" },
referrerPolicy: { type: String, default: "" }
},
data() {
return {
loading: !1,
failure: !1,
success: !1
};
},
computed: {
imgRatioWrapStyle() {
const { bgColor: e, aspectRatio: t } = this, o = {
position: "relative"
};
return o.backgroundColor = e, t ? (o.width = "100%", o.paddingBottom = `${t * 100}%`) : (o.width = "100%", o.height = "100%"), o;
}
},
methods: {
onStartLoad(e) {
this.loading = !0, this.failure = !1, this.$emit("startLoad", e);
},
onLoaded(e) {
this.loading = !1, this.failure = !1, this.success = !0, this.$emit("load", e);
},
onError(e) {
this.loading = !1, this.failure = !0, this.success = !1, this.$emit("error", e);
},
handleImageClick(e) {
this.$emit("click", e);
}
}
}, _e = {
key: 0,
class: "v3iv-status-slot"
}, xe = {
key: 1,
class: "v3iv-status-slot"
}, ke = { class: "v3iv-slot-footer" }, Me = ["alt", "referrer-policy"];
function ze(e, t, o, n, i, r) {
const s = ce("lazy-load");
return m(), v("div", {
style: P(r.imgRatioWrapStyle),
onClick: t[3] || (t[3] = (...a) => r.handleImageClick && r.handleImageClick(...a))
}, [
f("div", {
class: B(["v3iv-img-wrap", {
"v3iv-fix-ratio": o.aspectRatio,
"v3iv-loading": i.loading,
"v3iv-failure": i.failure
}])
}, [
i.failure ? (m(), v("div", _e, [
x(e.$slots, "error", {}, void 0, !0)
])) : L("", !0),
i.loading ? (m(), v("div", xe, [
x(e.$slots, "loading", {}, void 0, !0)
])) : L("", !0),
f("div", ke, [
x(e.$slots, "footer", {}, void 0, !0)
]),
N((m(), v("img", {
class: B(["v3iv-image", {
"object-fit-style": !!o.fit
}]),
style: P({ objectFit: o.fit }),
alt: o.alt,
"referrer-policy": o.referrerPolicy,
onLoad: t[0] || (t[0] = (...a) => r.onLoaded && r.onLoaded(...a)),
onError: t[1] || (t[1] = (...a) => r.onError && r.onError(...a)),
"on:startLoad": t[2] || (t[2] = (...a) => r.onStartLoad && r.onStartLoad(...a)),
key: o.src
}, null, 46, Me)), [
[s, {
src: o.src,
active: o.lazy
}]
])
], 2)
], 4);
}
const Se = /* @__PURE__ */ C(be, [["render", ze], ["__scopeId", "data-v-111e47d2"]]);
const Ie = {
inject: ["jointUrl", "closePreview"],
props: {
preload: {
type: Array || Boolean,
default() {
return [0, 2];
}
},
images: {
type: Array,
default() {
return [];
}
},
curIndex: {
type: Number,
default: 0
},
loop: { type: Boolean, default: !1 }
},
data() {
return {
loading: !1,
failure: !1,
success: !1
};
},
watch: {
src: {
handler(e) {
this.loading = !0, this.failure = !1, this.success = !1;
},
immediate: !0
}
},
computed: {
src() {
return this.currentItem.url || "";
},
currentItem() {
const { images: e, curIndex: t } = this;
return e[t] || {};
},
preloadList() {
const { images: e, preload: t, curIndex: o } = this;
if (!t)
return [];
const n = e.length, i = o, r = t[0], s = t[1], a = Math.max(i - r, 0), l = Math.min(i + s, n - 1);
return e.slice(a, l + 1).map((u) => u.url);
}
},
methods: {
onPreviewKeydown(e) {
e.code === "Escape" && this.closePreview(!0), (e.code === "ArrowLeft" || e.code === "KeyA") && this.handleSwitch(-1), (e.code === "ArrowRight" || e.code === "KeyD") && this.handleSwitch(1);
},
handleSwitch(e) {
if (!this.switchClickable(e))
return;
const { loop: t, curIndex: o, images: n } = this;
let i = o + e;
const r = n.length - 1;
t ? (i < 0 && (i = r), i > r && (i = 0)) : (i = Math.max(0, i), i = Math.min(r, i)), this.$emit("switch", i);
},
switchClickable(e) {
const { loop: t, curIndex: o, images: n } = this;
if (t)
return !0;
if (e == -1 && !o)
return !1;
const i = n.length - 1;
return !(e == 1 && o == i);
},
getPreloadKey(e, t) {
return `${e}-${t}`;
},
onPreviewLoad() {
this.loading = !1, this.failure = !1, this.success = !0;
},
onPreviewError() {
this.loading = !1, this.failure = !0, this.success = !1;
}
}
}, te = (e) => (Q("data-v-c45b7d24"), e = e(), ee(), e), Le = { class: "v3iv-image-preview" }, Ee = {
key: 0,
class: "v3iv-preview-error"
}, Ce = {
key: 1,
class: "v3iv-preview-loading"
}, Re = ["src"], Be = ["src"], He = { class: "v3iv-img-append" }, De = { class: "v3iv-title" }, We = { class: "v3iv-desc" }, Pe = /* @__PURE__ */ te(() => /* @__PURE__ */ f("i", { class: "zlhiconfont v3iv-icon icon-v3iv-guanbi" }, null, -1)), Xe = [
Pe
], Ye = /* @__PURE__ */ te(() => /* @__PURE__ */ f("i", { class: "zlhiconfont v3iv-icon icon-v3iv-left-arrow" }, null, -1)), Te = [
Ye
], Ae = /* @__PURE__ */ te(() => /* @__PURE__ */ f("i", { class: "zlhiconfont v3iv-icon icon-v3iv-right-arrow" }, null, -1)), Ne = [
Ae
];
function Oe(e, t, o, n, i, r) {
return m(), v("div", Le, [
f("div", {
class: B(["v3iv-preview-center", {
"v3iv-loading": i.loading,
"v3iv-failure": i.failure
}])
}, [
i.failure ? (m(), v("div", Ee, [
x(e.$slots, "error", {}, void 0, !0)
])) : L("", !0),
i.loading ? (m(), v("div", Ce, [
x(e.$slots, "loading", {}, void 0, !0)
])) : L("", !0),
N(f("img", {
class: "v3iv-preview-img",
onLoad: t[0] || (t[0] = (...s) => r.onPreviewLoad && r.onPreviewLoad(...s)),
onError: t[1] || (t[1] = (...s) => r.onPreviewError && r.onPreviewError(...s)),
src: r.src
}, null, 40, Re), [
[U, !i.loading && !i.failure]
]),
(m(!0), v(Z, null, K(r.preloadList, (s, a) => N((m(), v("div", {
key: r.getPreloadKey(s, a)
}, [
f("img", {
src: r.jointUrl(s)
}, null, 8, Be)
])), [
[U, !1]
])), 128)),
f("div", He, [
f("div", De, se(r.currentItem.title), 1),
f("div", We, se(r.currentItem.desc), 1)
])
], 2),
f("div", {
class: "v3iv-preview-close",
onClick: t[2] || (t[2] = E((s) => r.closePreview(!0), ["stop"]))
}, Xe),
f("div", {
class: "v3iv-preview-sl",
onClick: t[3] || (t[3] = E((s) => r.handleSwitch(-1), ["stop"]))
}, Te),
f("div", {
class: "v3iv-preview-sr",
onClick: t[4] || (t[4] = E((s) => r.handleSwitch(1), ["stop"]))
}, Ne)
]);
}
const Fe = /* @__PURE__ */ C(Ie, [["render", Oe], ["__scopeId", "data-v-c45b7d24"]]);
const je = {
emits: ["switch", "close", "load", "error"],
provide() {
return {
jointUrl: this.jointUrl,
closePreview: this.closePreview
};
},
components: {
Image: Se,
Preview: Fe
},
props: {
base: { type: String, default: "" },
src: { type: String, default: "" },
token: { type: String, default: "" },
width: { type: String, default: "" },
height: { type: String, default: "" },
fit: { type: String, default: "cover" },
aspectRatio: { type: Number },
lazy: { type: Boolean },
bgColor: { type: String },
alt: { type: String },
referrerPolicy: { type: String },
hideOnClickModal: { type: Boolean, default: !1 },
images: {
type: Array,
default() {
return [];
}
},
loop: { type: Boolean, default: !1 },
preload: {
type: Array || Boolean,
default() {
return [0, 2];
}
},
initialIndex: { type: Number, default: 0 },
preview: { type: Boolean, default: !1 }
},
data() {
return {
previewVisible: !1,
previewIndex: this.initialIndex
};
},
computed: {
wrapStyle() {
const { width: e, height: t } = this, o = {};
return e && (o.width = e), t && (o.height = t), o;
},
_src() {
const { src: e } = this;
return this.jointUrl(e);
}
},
methods: {
handleSwitch(e) {
this.previewIndex = e, this.$emit("switch", e);
},
closePreview(e) {
e && (this.$emit("close"), this.previewVisible = !1);
},
onLoaded(e) {
this.$emit("load", e);
},
onError(e) {
this.$emit("error", e);
},
handleImageClick() {
!this.preview || (this.previewVisible = !0, this.previewIndex = this.initialIndex);
},
jointUrl(e) {
if (!e)
return "";
const { base: t, token: o } = this, n = o ? `?token=${o}` : "";
return e.startsWith("data:") || e.startsWith("http:") || e.startsWith("https:") || e.startsWith("blob:") ? `${e}${n}` : `${t}${e}${n}`;
}
}
};
function Ve(e, t, o, n, i, r) {
const s = S("Image"), a = S("Preview");
return m(), v("div", {
style: P(r.wrapStyle),
class: B(["v3iv-image-wrap", {
"v3iv-preview-active": i.previewVisible
}])
}, [
Y(s, {
src: r._src,
aspectRatio: o.aspectRatio,
fit: o.fit,
lazy: o.lazy,
bgColor: o.bgColor,
alt: o.alt,
referrerPolicy: o.referrerPolicy,
onClick: r.handleImageClick,
onLoad: r.onLoaded,
onError: r.onError,
style: { "{\r\n cursor": `preview ? 'pointer' : 'default',\r
}` },
class: B({ "v3iv-clickable": o.preview })
}, {
loading: I(() => [
x(e.$slots, "loading", {}, void 0, !0)
]),
error: I(() => [
x(e.$slots, "error", {}, void 0, !0)
]),
footer: I(() => [
x(e.$slots, "footer", {}, void 0, !0)
]),
_: 3
}, 8, ["src", "aspectRatio", "fit", "lazy", "bgColor", "alt", "referrerPolicy", "onClick", "onLoad", "onError", "class"]),
i.previewVisible ? (m(), j(a, {
key: 0,
class: B({ "v3iv-clickable": o.hideOnClickModal }),
onClick: t[0] || (t[0] = (l) => r.closePreview(o.hideOnClickModal)),
preload: o.preload,
images: o.images,
curIndex: i.previewIndex,
loop: o.loop,
onSwitch: r.handleSwitch
}, {
loading: I(() => [
x(e.$slots, "loading", {}, void 0, !0)
]),
error: I(() => [
x(e.$slots, "error", {}, void 0, !0)
]),
_: 3
}, 8, ["class", "preload", "images", "curIndex", "loop", "onSwitch"])) : L("", !0)
], 6);
}
const oe = /* @__PURE__ */ C(je, [["render", Ve], ["__scopeId", "data-v-5031655d"]]);
const $e = {
inject: ["getMarkStyle"],
props: {
drawable: { type: Boolean, default: !1 },
drawMark: { type: Object, default: () => ({}) }
},
computed: {
drawStyle() {
const { drawable: e, drawMark: t } = this;
return !e || !t.active ? {
display: "none"
} : this.getMarkStyle(t, "lightpink");
}
}
};
function Ze(e, t, o, n, i, r) {
return m(), v("div", {
class: "v3iv-draw-mark",
style: P(r.drawStyle)
}, null, 4);
}
const Ke = /* @__PURE__ */ C($e, [["render", Ze], ["__scopeId", "data-v-8723b5c7"]]), z = {
minSize: -1 / 0,
maxSize: 1 / 0,
disabled: !1,
enabled: !0
}, p = 2;
let V = [], G = !1, T = null;
class qe {
constructor() {
}
init(t) {
if (!t.initialized)
return this.addAnchors(t);
}
addAnchors(t) {
const n = Object.keys(re).map((i) => {
const r = it(i);
return r.key = i, r;
});
for (const i of n)
ot(i), t.appendChild(i);
return t.initialized = !0, n;
}
}
const Ue = new qe();
let H = null, X = null;
const M = { startX: 0, startY: 0, target: null, started: !1 }, J = 5, W = "DeepPink", Ge = "icondrag1", A = 10, O = J / 2, re = {
lt: {
dirX: -1,
dirY: -1,
fixed: 1,
style: {
left: `-${p}px`,
top: `-${p}px`,
cursor: "se-resize",
zIndex: 50
}
},
mt: {
dirX: 0,
dirY: -1,
fixed: 1,
style: {
left: "50%",
transform: `translateX(-${O}px)`,
top: `-${p}px`,
cursor: "s-resize",
zIndex: 50
}
},
rt: {
dirX: 1,
dirY: -1,
fixed: 1,
style: {
right: `-${p}px`,
top: `-${p}px`,
cursor: "sw-resize",
zIndex: 50
}
},
lm: {
dirX: -1,
dirY: 0,
fixed: 1,
style: {
left: `-${p}px`,
top: "50%",
transform: `translateY(-${O}px)`,
cursor: "e-resize",
zIndex: 50
}
},
rm: {
dirX: 1,
dirY: 0,
fixed: 1,
style: {
right: `-${p}px`,
top: "50%",
transform: `translateY(-${O}px)`,
cursor: "w-resize",
zIndex: 50
}
},
lb: {
dirX: -1,
dirY: 1,
fixed: 1,
style: {
left: `-${p}px`,
bottom: `-${p}px`,
cursor: "ne-resize",
zIndex: 50
}
},
mb: {
dirX: 0,
dirY: 1,
fixed: 1,
style: {
left: "50%",
transform: `translateX(-${O}px)`,
bottom: `-${p}px`,
cursor: "n-resize",
zIndex: 50
}
},
rb: {
dirX: 1,
dirY: 1,
fixed: 1,
style: {
right: `-${p}px`,
bottom: `-${p}px`,
cursor: "nw-resize",
zIndex: 50
}
},
mm: {
dirX: -1,
dirY: -1,
fixed: 0,
style: {
left: "50%",
top: "50%",
transform: `translate(-${A / 2}px,-${A / 2}px)`,
cursor: "move",
zIndex: 50,
backgroundColor: W,
borderRadius: "1px"
}
}
}, Je = [
{
height: "100%",
width: `${p}px`,
left: `-${p}px`,
top: 0,
bottom: 0
},
{
height: "100%",
width: `${p}px`,
right: `-${p}px`,
top: 0,
bottom: 0
},
{
width: "100%",
height: `${p}px`,
left: 0,
top: `-${p}px`,
right: 0
},
{
width: "100%",
height: `${p}px`,
left: 0,
bottom: `-${p}px`,
right: 0
}
], F = "gray";
function Qe(e) {
const t = e.querySelectorAll(".v3iv-drag-border");
for (const n of t)
e.initialized = !1, fe(n), e.removeChild(n);
const o = e.querySelectorAll(".v3iv-drag-anchor");
for (const n of o)
he(n), e.removeChild(n);
}
function q() {
if ($(), !!V.length) {
if (G) {
G = !1;
return;
}
V = V.filter((e) => {
ue(e);
const t = e.querySelectorAll(".v3iv-drag-anchor");
for (const n of t)
he(n), e.removeChild(n);
const o = e.querySelector(".v3iv-mark-delete");
return o && (o.style.display = "block"), !1;
});
}
}
function ue(e) {
const t = [];
for (const o of Je) {
const { width: n, height: i, left: r, right: s, top: a, bottom: l } = o, c = document.createElement("DIV");
c.style.width = n, c.style.height = i, c.style.opacity = 0.5, c.style.position = "absolute", c.style.cursor = "move", c.style.userSelect = "none", c.style.touchAction = "none", c.style.pointerEvents = "auto", c.classList.add("v3iv-drag-border"), r !== void 0 && (c.style.left = r), s !== void 0 && (c.style.right = s), a !== void 0 && (c.style.top = a), l !== void 0 && (c.style.bottom = l), t.push(c);
}
for (const o of t)
rt(o), e.appendChild(o);
}
function et() {
!H || (H.addEventListener("mousewheel", k), H.addEventListener("click", k), document.addEventListener("mousemove", ge, { passive: !1 }), document.addEventListener("mouseup", pe));
}
function tt() {
!H || (H.removeEventListener("mousewheel", k), H.removeEventListener("click", k), document.removeEventListener("mousemove", ge), document.removeEventListener("mouseup", pe));
}
function ot(e) {
e.addEventListener("mousewheel", k), e.addEventListener("mousedown", k), e.addEventListener("mousedown", ve);
}
function he(e) {
e.removeEventListener("mousewheel", k), e.removeEventListener("mousedown", k), e.removeEventListener("mousedown", ve);
}
function rt(e) {
e.addEventListener("click", me), e.addEventListener("mousewheel", k), e.addEventListener("mousedown", k);
}
function fe(e) {
e.removeEventListener("click", me), e.removeEventListener("mousewheel", k), e.removeEventListener("mousedown", k);
}
function me(e) {
e.stopPropagation(), e.preventDefault();
const t = e.target.parentNode;
Ue.init(t);
const o = t.querySelectorAll(".v3iv-drag-border");
for (const i of o)
t.initialized = !1, fe(i), t.removeChild(i);
const n = t.querySelector(".v3iv-mark-delete");
n && (n.style.display = "none"), V.push(t);
}
function k(e) {
e.stopPropagation(), e.preventDefault();
}
function ve(e) {
const { which: t } = e;
if (t != 1)
return;
e.stopPropagation(), e.preventDefault();
const o = e.target, n = o.parentNode, i = new CustomEvent("resize-start");
n.dispatchEvent(i), H = n.parentNode, et(), e.preventDefault(), e.stopPropagation(), X && (X.style.zIndex = 30), X = n, X.style.zIndex = 40, M.started = !0, M.target = o, M.startX = e.pageX, M.startY = e.pageY;
}
function ge(e) {
T || (T = setTimeout(() => {
if (!M.started) {
$();
return;
}
e.preventDefault(), e.stopPropagation();
const { key: t } = M.target, { dirX: o, dirY: n } = re[t], i = o * (e.pageX - M.startX), r = n * (e.pageY - M.startY), s = ["lt", "lm", "lb"], a = ["lt", "mt", "rt"], l = ["rt", "rm", "rb"], c = ["lb", "mb", "rb"];
let u = 0, h = 0, d = 0, g = 0;
s.includes(t) && (u = -i), a.includes(t) && (h = -r), l.includes(t) && (d = i), c.includes(t) && (g = r), t === "mm" && (u = -i, d = -i, h = -r, g = -r);
const _ = new CustomEvent("resize-move", {
detail: {
left: u,
top: h,
right: d,
bottom: g,
key: t
}
});
X.dispatchEvent(_), $();
}, 20));
}
function $() {
T && (clearTimeout(T), T = null);
}
function pe(e) {
if (e.preventDefault(), e.stopPropagation(), !M.started)
return;
$(), M.started = !1, M.target = null, G = !0;
const t = new CustomEvent("resize-end");
X.dispatchEvent(t), tt(), H = null;
}
function it(e) {
const { style: t, fixed: o } = re[e], n = document.createElement("DIV");
n.style.height = `${J}px`, n.style.width = `${J}px`, n.style.backgroundColor = W, n.style.position = "absolute", n.style.userSelect = "none", n.style.touchAction = "none", n.style.pointerEvents = "auto", n.classList.add("v3iv-drag-anchor"), o || (n.classList.add("zlhiconfont", Ge), n.style.height = `${A}px`, n.style.width = `${A}px`, n.style.fontSize = `${A}px`, n.style.color = W, n.style.backgroundColor = "transparent");
for (const i of Object.keys(t)) {
const r = t[i];
n.style[i] = r;
}
return n;
}
function ae(e, t) {
t ? (e.style.pointerEvents = "none", e.style.backgroundColor = e.style.backgroundColor == W && F, e.style.color = e.style.color == W && F, e.style.display = "none") : (e.style.pointerEvents = "auto", e.style.backgroundColor = e.style.backgroundColor == F && W, e.style.color = e.style.color == F && W, e.style.display = "block");
}
function le(e) {
const t = e.value || {}, {
maxSize: o = z.maxSize,
minSize: n = z.minSize,
disabled: i = z.disabled,
enabled: r = z.enabled
} = t;
z.maxSize = o, z.minSize = n, z.disabled = i, z.enabled = r;
}
const nt = {
mounted(e, t) {
if (e) {
le(t);
const { enabled: o } = z;
if (!o)
return;
ue(e), document.addEventListener("click", q);
}
},
unmounted(e, t) {
q(), Qe(e), document.removeEventListener("click", q);
},
updated(e, t) {
le(t);
const { disabled: o, enabled: n } = z;
if (!n)
return;
const i = e.querySelectorAll(".v3iv-drag-anchor"), r = e.querySelectorAll(".v3iv-drag-border");
for (const s of i)
ae(s, o);
for (const s of r)
ae(s, o);
}
};
const st = {
inject: ["getMarkStyle", "getMarkLRTBWH"],
emits: ["resize", "delete"],
directives: {
dragResize: nt
},
props: {
marks: { type: Array, default: () => [] },
drawing: { type: Boolean, default: !1 },
focus: { type: Boolean, default: !1 },
deleteable: { type: Boolean, default: !1 },
location: { type: Object, default: () => ({}) },
renderRecord: { type: Object, default: () => ({}) }
},
data() {
return {};
},
computed: {},
watch: {},
created() {
},
mounted() {
},
methods: {
getMarkKey(e, t) {
return `${e.id}-${t}`;
},
resizeStart(e) {
},
resizeMove(e, t) {
let {
left: o,
top: n,
right: i,
bottom: r,
key: s
} = t.detail;
const { curScale: a } = this.location, { scale: l } = this.renderRecord;
o = o / a / l, n = n / a / l, i = i / a / l, r = r / a / l;
const [c, u, h, d] = e.storage, { trueImgW: g, trueImgH: _ } = this.renderRecord;
let y = c + o, w = u + n, b = h + i, R = d + r;
if (s === "mm") {
const ie = e.right - e.left, ne = e.bottom - e.top;
y > 0 && b < g ? (e.left = y, e.right = b) : y < 0 ? (e.left = 0, e.right = ie) : b > g && (e.left = g - ie, e.right = g), w > 0 && R < _ ? (e.top = w, e.bottom = R) : w < 0 ? (e.top = 0, e.bottom = ne) : R > _ && (e.top = _ - ne, e.bottom = _);
return;
}
y = Math.max(0, y), w = Math.max(0, w), b = Math.max(0, b), R = Math.max(0, R), y = Math.min(g, y), w = Math.min(_, w), b = Math.min(g, b), R = Math.min(_, R), e.left = y, e.top = w, e.right = b, e.bottom = R;
},
resizeEnd(e) {
const t = this.getMarkLRTBWH(e), { left: o, top: n, right: i, bottom: r } = t, { target: s } = e;
e.left = o, e.top = n, e.right = i, e.bottom = r, e.storage = [o, n, i, r], this.$emit("resize", {
target: s,
detail: t
});
},
deleteMark(e) {
this.$emit("delete", e);
}
}
}, at = (e) => (Q("data-v-e199aa50"), e = e(), ee(), e), lt = ["onResizeStart", "onResizeMove", "onResizeEnd"], ct = ["onClick"], dt = /* @__PURE__ */ at(() => /* @__PURE__ */ f("svg", {
t: "1655567649321",
class: "icon",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"p-id": "17221",
width: "16",
height: "16"
}, [
/* @__PURE__ */ f("path", {
d: "M512 1255.489906",
"p-id": "17222",
fill: "#ffffff"
}),
/* @__PURE__ */ f("path", {
d: "M718.519288 688.227064 543.827304 513.637418l174.180292-174.180292c8.801119-8.801119 8.801119-23.128523 0-31.827304-8.801119-8.801119-23.128523-8.801119-31.827304 0L512 481.810114 337.819708 307.629822c-8.801119-8.801119-23.230861-8.596442-31.929642 0.102339l0.102339-0.102339c-8.801119 8.801119-8.698781 23.026184 0.102339 31.827304l174.180292 174.180292L305.58305 688.227064c-8.801119 8.801119-8.801119 23.128523 0 31.827304 8.801119 8.801119 23.128523 8.801119 31.827304 0L512 545.464721 686.691985 720.054367c8.801119 8.801119 22.923846 8.903458 31.724965 0.102339l0.102339-0.102339C727.218069 711.355587 727.218069 697.028183 718.519288 688.227064z",
"p-id": "17223",
fill: "#ffffff"
})
], -1)), ut = [
dt
];
function ht(e, t, o, n, i, r) {
const s = ce("drag-resize");
return m(!0), v(Z, null, K(o.marks, (a, l) => N((m(), v("div", {
class: "v3iv-mark-item",
key: r.getMarkKey(a, l),
style: P(r.getMarkStyle(a)),
onResizeStart: (c) => r.resizeStart(a),
onResizeMove: (c) => {
r.resizeMove(a, c);
},
onResizeEnd: (c) => r.resizeEnd(a)
}, [
o.deleteable && !o.focus ? (m(), v("div", {
key: 0,
class: "v3iv-mark-delete",
onMousewheel: t[0] || (t[0] = E(() => {
}, ["stop"])),
onMousedown: t[1] || (t[1] = E(() => {
}, ["stop"])),
onClick: (c) => r.deleteMark(a)
}, ut, 40, ct)) : L("", !0)
], 44, lt)), [
[s, {
disabled: o.drawing || o.focus
}]
])), 128);
}
const ft = /* @__PURE__ */ C(st, [["render", ht], ["__scopeId", "data-v-e199aa50"]]);
const mt = {
components: {
Image: oe
},
props: {
currentIndex: {
type: Number,
default: 0
},
images: {
type: Array,
default: () => []
},
base: {
type: String,
default: ""
},
token: {
type: String,
default: ""
}
},
data() {
return {};
},
computed: {
drawerStyle() {
return {
"margin-left": `-${this.currentIndex * 30 + 15}px`
};
}
},
methods: {
switchIndex(e) {
this.$emit("switch", e);
},
getKey(e, t) {
return `${e.thumbnail}-v3iv-thumbnail-${t}`;
}
}
}, vt = (e) => (Q("data-v-5a273606"), e = e(), ee(), e), gt = { class: "v3iv-navigation-bar" }, pt = ["onClick"], yt = /* @__PURE__ */ vt(() => /* @__PURE__ */ f("i", { class: "zlhiconfont icon-v3iv-error" }, null, -1));
function wt(e, t, o, n, i, r) {
const s = S("Image");
return m(), v("div", gt, [
f("div", {
class: "v3iv-navigation-drawer",
style: P(r.drawerStyle)
}, [
(m(!0), v(Z, null, K(o.images, (a, l) => (m(), v("div", {
class: B(["v3iv-navigation-item", { "v3iv-active": l == o.currentIndex }]),
key: r.getKey(a, l),
onClick: (c) => r.switchIndex(l),
onMousedown: t[0] || (t[0] = E(() => {
}, ["stop"])),
onMousewheel: t[1] || (t[1] = E(() => {
}, ["stop"]))
}, [
Y(s, {
height: "100%",
width: "100%",
base: o.base,
src: a.thumbnail,
token: o.token,
fit: "cover",
lazy: ""
}, {
loading: I(() => [
ye(" ... ")
]),
error: I(() => [
yt
]),
_: 2
}, 1032, ["base", "src", "token"])
], 42, pt))), 128))
], 4)
]);
}
const bt = /* @__PURE__ */ C(mt, [["render", wt], ["__scopeId", "data-v-5a273606"]]);
const _t = {
emits: ["switchMode", "prev", "zoomOut", "zoomIn", "next", "reset"],
props: {
fitMode: {
type: Object,
default: () => ({})
},
scaleFit: {
type: Number,
default: 1
},
imgRecord: {
type: Object,
default: () => ({})
}
},
methods: {
containOrCover() {
this.$emit("switchMode");
},
prev() {
this.$emit("prev");
},
zoomOut() {
this.$emit("zoomOut");
},
zoomIn() {
this.$emit("zoomIn");
},
next() {
this.$emit("next");
},
reset() {
this.$emit("reset");
},
download() {
const { trueSrc: e } = this.imgRecord, t = document.createElement("a");
t.href = e, name || (name = e.split("/").pop() || "download"), t.setAttribute("target", "_blank"), t.setAttribute("download", name), document.body.appendChild(t), t.click(), document.body.removeChild(t);
}
}
}, xt = { class: "v3iv-toolbar" }, kt = {
key: 0,
class: "icon-v3iv-quanping"
}, Mt = {
key: 1,
class: "icon-v3iv-fullfill"
};
function zt(e, t, o, n, i, r) {
return m(), v("div", xt, [
x(e.$slots, "toolbar", {}, () => [
f("div", {
onClick: t[0] || (t[0] = (...s) => r.containOrCover && r.containOrCover(...s)),
class: "zlhiconfont"
}, [
o.scaleFit == o.fitMode.contain ? (m(), v("span", kt)) : (m(), v("span", Mt))
]),
f("div", {
onClick: t[1] || (t[1] = (...s) => r.prev && r.prev(...s)),
class: "zlhiconfont icon-v3iv-zhixiang-zuo"
}),
f("div", {
onClick: t[2] || (t[2] = (...s) => r.zoomOut && r.zoomOut(...s)),
class: "zlhiconfont icon-v3iv-jian"
}),
f("div", {
onClick: t[3] || (t[3] = (...s) => r.zoomIn && r.zoomIn(...s)),
class: "zlhiconfont icon-v3iv-jia"
}),
f("div", {
onClick: t[4] || (t[4] = (...s) => r.next && r.next(...s)),
class: "zlhiconfont icon-v3iv-zhixiang-you"
}),
f("div", {
onClick: t[5] || (t[5] = (...s) => r.reset && r.reset(...s)),
class: "zlhiconfont icon-v3iv-zhongzhi-circle"
}),
f("div", {
onClick: t[6] || (t[6] = (s) => r.download()),
class: "zlhiconfont icon-v3iv-xiazai"
})
], !0)
]);
}
const St = /* @__PURE__ */ C(_t, [["render", zt], ["__scopeId", "data-v-649125f0"]]), It = {
components: {
Image: oe
},
props: {
base: {
type: String,
default: ""
},
token: {
type: String,
default: ""
},
preload: {
type: Array,
default: () => [0, 2]
},
images: {
type: Array,
default: () => []
},
currentIndex: {
type: Number,
default: 0
}
},
computed: {
preloadList() {
const { preload: e, images: t, currentIndex: o } = this;
if (!e)
return [];
const n = t.length, i = e[0], r = e[1], s = Math.max(o - i, 0), a = Math.min(o + r, n - 1);
return t.slice(s, a + 1).map((c) => c ? c.url : "");
}
},
methods: {
getKey(e, t) {
return `${e}-v3iv-preload-${t}`;
}
}
};
function Lt(e, t, o, n, i, r) {
const s = S("Image");
return m(!0), v(Z, null, K(r.preloadList, (a, l) => N((m(), v("div", {
key: r.getKey(a, l)
}, [
Y(s, {
base: o.base,
src: a,
token: o.token
}, null, 8, ["base", "src", "token"])
])), [
[U, !1]
])), 128);
}
const Et = /* @__PURE__ */ C(It, [["render", Lt]]);
const D = {
contain: 1,
cover: 2
}, Ct = {
emits: ["resize", "delete", "load", "drawEnd", "zoom", "error", "switch"],
provide() {
return {
getMarkStyle: this.getMarkStyle,
getMarkLRTBWH: this.getMarkLRTBWH
};
},
components: {
Image: oe,
DrawRect: Ke,
ImgMarks: ft,
Navigation: bt,
ToolBar: St,
Preload: Et
},
props: {
base: { type: String, default: "" },
token: { type: String, default: "" },
fit: { type: String, default: "contain" },
loop: { type: Boolean, default: !1 },
initialIndex: { type: Number, default: 0 },
preload: { type: Array || Boolean, default: [0, 2] },
scaleMax: { type: Number, default: 15 },
scaleMin: { type: Number, default: 1 },
scaleStep: { type: Number, default: 1.2 },
initialScale: { type: Number, default: 1 },
imageList: { type: Array, default: null },
markList: { type: Array, default: null },
navigation: { type: Boolean, default: !1 },
toolbar: { type: Boolean, default: !1 },
keyboard: {
type: Array,
default: ["A", "D", "Space", "Esc"]
},
fixed: { type: Boolean, default: !1 },
focus: { type: Boolean, default: !1 },
drawable: { type: Boolean, default: !1 },
deleteable: { type: Boolean, default: !1 },
image: { type: Object, default: null },
mark: { type: Object, default: null }
},
data() {
return {
fitMode: D,
loadStatus: {
loading: !1,
failure: !1,
success: !1
},
currentIndex: this.initialIndex,
focusIndex: 0,
drawing: !1,
drag: {
dragPreX: 0,
dragPreY: 0,
active: !1
},
location: {
translateX: 0,
translateY: 0,
curScale: this.initialScale
},
imgRecord: {
wrapW: 0,
wrapH: 0,
imgSizeW: 0,
imgSizeH: 0,
trueSrc: ""
},
drawMark: {
left: 0,
right: 0,
top: 0,
bottom: 0,
active: !1
},
scaleFit: D.contain,
resizeTimer: null,
marksFormat: []
};
},
computed: {
URL() {
const { current: e } = this;
return e.url;
},
currentMarks() {
const { current: e } = this;
return e.marks || [];
},
images() {
const { imageList: e, image: t } = this;
return e || (t ? [t] : []);
},
marks() {
const { markList: e, mark: t, currentMarks: o } = this;
return e || (t ? [t] : o || []);
},
wrapStyle() {
let { translateX: e, translateY: t, curScale: o } = this.location;
return {
transform: `translate(${e}px,${t}px) scale(${o})`
};
},
mouseActive() {
const { drawing: e } = this, { active: t } = this.drag;
return e || t;
},
current() {
const { images: e, currentIndex: t } = this;
return e[t] || {};
},
renderRecord() {
const { imgSizeW: e, imgSizeH: t, wrapW: o, wrapH: n } = this.imgRecord;
if (!e || !t || !o || !n)
return null;
const { imgW: i, imgH: r } = this.current, s = i || e, a = r || t, l = {
TDEdge: 0,
LREdge: 0,
imgW: 0,
imgH: 0,
scale: 0,
containScale: 0,
trueImgW: s,
trueImgH: a
}, c = a / s, u = n / o;
return c > u ? (l.scale = this.toFixed(n / a, 5), l.imgH = n, l.imgW = Math.round(l.imgH / c), l.LREdge = (o - l.imgW) / 2, l.containScale = this.toFixed(o / (l.imgW - 1), 5)) : (l.scale = this.toFixed(o / s, 5), l.imgW = o, l.imgH = Math.round(l.imgW * c), l.TDEdge = (n - l.imgH) / 2, l.containScale = this.toFixed(n / (l.imgH - 1), 5)), l;
}
},
watch: {
marks: {
handler(e) {
this.marksFormat = e.map((t) => {
const { left: o, top: n, width: i, height: r, id: s } = t, a = o, l = n, c = o + i, u = n + r;
return {
id: s,
storage: [a, l, c, u],
left: a,
top: l,
right: c,
bottom: u,
target: t
};
});
},
immediate: !0,
deep: !0
},
URL: {
handler() {
this.loadStatus = {
loading: !0,
failure: !1,
success: !1
};
},
immediate: !0
},
drawable() {
this.drawMark.active = !1, this.drawing = !1;
},
"location.curScale"(e) {
e !== this.renderRecord.containScale && (this.scaleFit = D.contain);
},
currentIndex() {
this.onReset();
}
},
mounted() {
window.addEventListener("keyup", this.handleKeyboard), window.addEventListener("resize", this.handleResize);
},
beforeUnmount() {
window.removeEventListener("keyup", this.handleKeyboard), window.removeEventListener("resize", this.handleResize);
},
methods: {
zoomOut() {
this.onZoomOut();
},
zoomIn() {
this.onZoomIn();
},
onMarkDelete(e) {
this.$emit("delete", e);
},
onMarkResize(e) {
this.$emit("resize", e);
},
handleResize() {
this.resizeTimer || (this.resizeTimer = setTimeout(() => {
this.freshWrapWH(), this.resizeTimer = null;
}, 100));
},
handleKeyboard(e) {
const { code: t } = e, { keyboard: o } = this;
switch (o.includes("Space") && t === "Space" && e.preventDefault(), o.includes("Esc") && t === "Escape" && e.preventDefault(), t) {
case "Space":
o.includes("Space") && this.focusMark();
break;
case "Escape":
o.includes("Esc") && this.unFocusMark();
break;
case "KeyA":
o.includes("A") && this.onPrev();
break;
case "KeyD":
o.includes("D") && this.onNext();
break;
}
},
getMarkStyle(e, t = "lightblue") {
this.focus && this.focusMark();
const { width: o, height: n, left: i, top: r } = this.getRenderMark(e);
let { translateX: s, translateY: a, curScale: l } = this.location;
const { wrapW: c, wrapH: u } = this.imgRecord, h = c / 2, d = u / 2, g = h - l * h + l * i, _ = d - l * d + l * r;
return {
width: `${o * l}px`,
height: `${n * l}px`,
border: `2px solid ${t}`,
left: `${g}px`,
top: `${_}px`,
transform: `translate(${s}px,${a}px)`
};
},
getRenderMark(e) {
let { left: t, top: o, width: n, height: i } = this.getMarkLRTBWH(e);
const { scale: r, TDEdge: s, LREdge: a } = this.renderRecord || {};
return n = n * r, i = i * r, t = t * r + a, o = o * r + s, { left: t, top: o, width: n, height: i };
},
toFixed(e, t) {
const o = Math.pow(10, t);
return Math.round(e * o) / o;
},
limitBoundary(e, t) {
e = this.toFixed(e, 2);
const { wrapW: o, wrapH: n } = this.imgRecord, { curScale: i } = this.location;
let r = 0;
return t === "horizontal" && (r = o * (i - 1) / 2), t === "vertical" && (r = n * (i - 1) / 2), r = Math.abs(r), e = Math.max(-r, e), e = Math.min(r, e), e;
},
getMarkLRTBWH(e) {
const { left: t, right: o, top: n, bottom: i } = e, r = Math.floor(Math.min(t, o)), s = Math.floor(Math.min(n, i)), a = Math.floor(Math.max(t, o)), l = Math.floor(Math.max(n, i)), c = a - r, u = l - s;
return { left: r, top: s, right: a, bottom: l, width: c, height: u };
},
unFocusMark() {
this.onReset();
},
focusMark(e) {
if (!this.loadStatus.success)
return;
e !== void 0 && (this.focusIndex = e);
const t = this.marksFormat[this.focusIndex] || null;
if (!t || !this.renderRecord)
return;
this.focusIndex >= this.marksFormat.length - 1 ? this.focusIndex = 0 : this.focusIndex++;
const { width: o, height: n, left: i, top: r } = this.getRenderMark(t), { wrapW: s, wrapH: a } = this.imgRecord, { imgW: l, imgH: c, TDEdge: u, LREdge: h } = this.renderRecord, d = a / s;
let g = i + o / 2, _ = r + n / 2, y = 0;
if (n / o < d) {
let w = i, b = r - (o * d - n) / 2;
o * 1.1 < l ? (y = s / (o * 1.1), w = i - o * 0.05, b = r - d * o * 0.05) : y = s / o, w < h && (g = g - w + h), b < u && (_ = _ - b + u);
} else {
let w = i - (n / d - o) / 2, b = r;
n * 1.1 < c ? (y = a / (n * 1.1), w = w - n * 0.05 / d, b = b - n * 0.05) : y = a / n, w < h && (g = g - w + h), b < u && (_ = _ - b + u);
}
y = Math.min(y, this.scaleMax), this.centerScale(g, _, y);
},
centerScale(e, t, o) {
const { wrapW: n, wrapH: i } = this.imgRecord, r = n / 2, s = i / 2;
let a = r - e, l = s - t;
a = a * o, l = l * o, this.location.curScale = o, this.location.translateX = this.limitBoundary(a, "horizontal"), this.location.translateY = this.limitBoundary(l, "vertical");
},
onDrawStart(e) {
e.preventDefault();
const { drawable: t, focus: o } = this, { which: n } = e;
if (n != 3 || !t || o)
return;
const { trueImgW: i, trueImgH: r } = this.renderRecord, { layerX: s, layerY: a } = e, { x: l, y: c } = this.convertCoords(s, a);
l < 0 || l > i || c < 0 || c > r || (this.drawMark = {
left: l,
right: l,
top: c,
bottom: c,
active: !0
}, this.drawing = !0);
},
onDrawMove(e) {
if (!this.drawing)
return;
const { trueImgW: t, trueImgH: o } = this.renderRecord, { layerX: n, layerY: i } = e, { x: r, y: s } = this.convertCoords(n, i);
r < 0 || r > t || s < 0 || s > o || (this.drawMark.right = r, this.drawMark.bottom = s);
},
onDrawEnd(e) {
if (e.preventDefault(), !this.drawing)
return;
this.drawing = !1;
const t = this.getMarkLRTBWH(this.drawMark);
this.$emit("drawEnd", t), this.clearDraw();
},
clearDraw() {
this.drawMark.active = !1, this.drawing = !1;
},
convertCoords(e, t) {
const { wrapW: o, wrapH: n } = this.imgRecord, { scale: i, TDEdge: r, LREdge: s } = this.renderRecord, { translateX: a, translateY: l, curScale: c } = this.location, u = o * (c - 1) / 2 - a + e - s * c, h = n * (c - 1) / 2 - l + t - r * c, d = u / c / i, g = h / c / i;
return {
x: d,
y: g
};
},
onMousedown(e) {
if (e.preventDefault(), this.fixed || this.focus)
return;
const { which: t, layerX: o, layerY: n } = e;
t == 1 && (this.drag.dragPreX = o, this.drag.dragPreY = n, this.drag.active = !0);
},
onMousemove(e) {
const { active: t, dragPreX: o, dragPreY: n } = this.drag;
if (!t)
return;
const { layerX: i, layerY: r } = e, { translateX: s, translateY: a } = this.location;
let l = i - o, c = r - n;
this.drag.dragPreX = i, this.drag.dragPreY = r, l = s + l, c = a + c, this.location.translateX = this.limitBoundary(l, "horizontal"), this.location.translateY = this.limitBoundary(c, "vertical");
},
onMouseup(e) {
this.drag.active = !1;
},
onMouseleave(e) {
this.drag.active = !1;
},
toggleFit() {
this.onSwitchMode();
},
prev() {
this.onPrev();
},
next() {
this.onNext();
},
reset() {
this.onReset();
},
download() {
this.$refs.toolbar.download();
},
onSwitchMode() {
this.location.translateX = 0, this.location.translateY = 0, this.scaleFit === D.contain ? (this.scaleFit = D.cover, this.renderRecord && (this.location.curScale = this.renderRecord.containScale)) : (this.location.curScale = this.initialScale, this.scaleFit = D.contain);
},
onPrev() {
this.switchIndex(this.currentIndex - 1);
},
onNext() {
this.switchIndex(this.currentIndex + 1);
},
onZoomIn() {
const e = this.handleZoom(1), { wrapW: t, wrapH: o } = this.imgRecord;
this.flollowTheMouse(t / 2, o / 2, e);
},
onZoomOut() {
const e = this.handleZoom(-1), { wrapW: t, wrapH: o } = this.imgRecord;
this.flollowTheMouse(t / 2, o / 2, e);
},
onReset() {
this.location.translateX = 0, this.location.translateY = 0, this.location.curScale = this.initialScale, this.scaleFit = D.contain, this.focusIndex = 0, this.drawMark.active = !1;
},
switchIndex(e) {
const { images: t } = this, o = t.length - 1;
this.loop ? (e < 0 && (e = o), e > o && (e = 0)) : (e = Math.max(0, e), e = Math.min(o, e)), this.$emit("switch", e), this.currentIndex = e;
},
flollowTheMouse(e, t, o) {
const { wrapW: n, wrapH: i } = this.imgRecord, { translateX: r, translateY: s, curScale: a } = this.location, l = n / 2 + r, c = i / 2 + s;
let u = l - e, h = c - t;
u = u / a, h = h / a, u = u * (o - a), h = h * (o - a), u = r + u, h = s + h, this.location.curScale = o, this.location.translateX = this.limitBoundary(u, "horizontal"), this.location.translateY = this.limitBoundary(h, "vertical");
},
handleZoom(e) {
const { scaleMax: t, scaleMin: o, scaleStep: n } = this;
let i = this.location.curScale;
return e > 0 ? i = i * n : i = i / n, i = Math.min(i, t), i = Math.max(i, o), i = this.toFixed(i, 3), this.$emit("zoom", i), Number(i);
},
onWheel(e) {
if (!this.loadStatus.success || this.fixed || this.focus)
return;
e.preventDefault(), e.stopPropagation();
const { wheelDelta: t, layerX: o, layerY: n } = e;
let i = this.location.curScale;
t > 0 ? i = this.handleZoom(1) : i = this.handleZoom(-1), this.flollowTheMouse(o, n, i);
},
onLoad(e) {
const { naturalWidth: t, naturalHeight: o, src: n } = e.target;
this.loadStatus = {
loading: !1,
failure: !1,
success: !0
}, this.imgRecord.imgSizeW = t, this.imgRecord.imgSizeH = o, this.imgRecord.trueSrc = n, this.$nextTick(() => {
this.freshWrapWH(), this.imageLoaded();
}), this.$emit("load", e);
},
onError(e) {
this.loadStatus = {
loading: !1,
failure: !0,
success: !1
}, this.$emit("error", e);
},
freshWrapWH() {
const e = this.$refs.clipper;
if (e) {
const { clientWidth: t, clientHeight: o } = e;
this.imgRecord.wrapW = t, this.imgRecord.wrapH = o;
} else
console.error("DOM not found");
},
imageLoaded() {
this.focus && this.focusMark();
}
}
}, Rt = {
class: "v3iv-viewer-clip",
ref: "clipper"
};
function Bt(e, t, o, n, i, r) {
const s = S("Image"), a = S("DrawRect"), l = S("ImgMarks"), c = S("Navigation"), u = S("ToolBar"), h = S("Preload");
return m(), v("div", {
class: B(["v3iv-viewer", { "v3iv-has-toolbar": o.toolbar, "v3iv-mousedown": r.mouseActive }]),
onMousewheel: t[1] || (t[1] = (...d) => r.onWheel && r.onWheel(...d)),
onMousedown: t[2] || (t[2] = (...d) => r.onMousedown && r.onMousedown(...d)),
onMouseup: t[3] || (t[3] = (...d) => r.onMouseup && r.onMouseup(...d)),
onMousemove: t[4] || (t[4] = (...d) => r.onMousemove && r.onMousemove(...d)),
onMouseleave: t[5] || (t[5] = (...d) => r.onMouseleave && r.onMouseleave(...d)),
onContextmenu: t[6] || (t[6] = E(() => {
}, ["stop", "prevent"]))
}, [
f("div", Rt, [
f("div", {
class: "v3iv-viewer-img-wrap",
style: P(r.wrapStyle)
}, [
Y(s, {
height: "100%",
width: "100%",
base: o.base,
src: r.URL,
token: o.token,
onMousedown: r.onDrawStart,
onMouseup: r.onDrawEnd,
onMousemove: r.onDrawMove,
onMouseleave: r.onDrawEnd,
onContextmenu: t[0] || (t[0] = E(() => {
}, ["stop", "prevent"])),
onLoad: r.onLoad,
onError: r.onError,
fit: o.fit
}, {
loading: I(() => [
x(e.$slots, "loading", {}, void 0, !0)
]),
error: I(() => [
x(e.$slots, "error", {}, void 0, !0)
]),
_: 3
}, 8, ["base", "src", "token", "onMousedown", "onMouseup", "onMousemove", "onMouseleave", "onLoad", "onError", "fit"])
], 4),
Y(a, {
drawable: o.drawable,
drawMark: i.drawMark
}, null, 8, ["drawable", "drawMark"]),
i.loadStatus.success ? (m(), j(l, {
key: 0,
marks: i.marksFormat,
drawing: i.drawing,
focus: o.focus,
deleteable: o.deleteable,
location: i.location,
renderRecord: r.renderRecord,
onResize: r.onMarkResize,
onDelete: r.onMarkDelete
}, null, 8, ["marks", "drawing", "focus", "deleteable", "location", "renderRecord", "onResize", "onDelete"])) : L("", !0),
o.navigation ? (m(), j(c, {
key: 1,
currentIndex: i.currentIndex,
images: r.images,
base: o.base,
token: o.token,
onSwitch: r.switchIndex
}, null, 8, ["currentIndex", "images", "base", "token", "onSwitch"])) : L("", !0)
], 512),
o.toolbar ? (m(), j(u, {
key: 0,
fitMode: i.fitMode,
scaleFit: i.scaleFit,
imgRecord: i.imgRecord,
onSwitchMode: r.onSwitchMode,
onPrev: r.onPrev,
onNext: r.onNext,
onZoomOut: r.onZoomOut,
onZoomIn: r.onZoomIn,
onReset: r.onReset,
ref: "toolbar"
}, null, 8, ["fitMode", "scaleFit", "imgRecord", "onSwitchMode", "onPrev", "onNext", "onZoomOut", "onZoomIn", "onReset"])) : L("", !0),
Y(h, {
base: o.base,
token: o.token,
preload: o.preload,
images: r.images,
currentIndex: i.currentIndex
}, null, 8, ["base", "token", "preload", "images", "currentIndex"])
], 34);
}
const Dt = /* @__PURE__ */ C(Ct, [["render", Bt], ["__scopeId", "data-v-bcd88bb2"]]);
window._iconfont_svg_string_3113478 = '', function(e) {
var o = (o = document.getElementsByTagName("script"))[o.length - 1], t = o.getAttribute("data-injectcss"), o = o.getAttribute("data-disable-injectsvg");
if (!o) {
var n, i, r, s, a, l = function(h, d) {
d.parentNode.insertBefore(h, d);
};
if (t && !e.__iconfont__svg__cssinject__) {
e.__iconfont__svg__cssinject__ = !0;
try {
document.write("");
} catch (h) {
console && console.log(h);
}
}
n = function() {
var h, d = document.createElement("div");
d.innerHTML = e._iconfont_svg_string_3113478, (d = d.getElementsByTagName("svg")[0]) && (d.setAttribute("aria-hidden", "true"), d.style.position = "absolute", d.style.width = 0, d.style.height = 0, d.style.overflow = "hidden", d = d, (h = document.body).firstChild ? l(d, h.firstChild) : h.appendChild(d));
}, document.addEventListener ? ~["complete", "loaded", "interactive"].indexOf(document.readyState) ? setTimeout(n, 0) : (i = function() {
document.removeEventListener("DOMContentLoaded", i, !1), n();
}, document.addEventListener("DOMContentLoaded", i, !1)) : document.attachEvent && (r = n, s = e.document, a = !1, u(), s.onreadystatechange = function() {
s.readyState == "complete" && (s.onreadystatechange = null, c());
});
}
function c() {
a || (a = !0, r());
}
function u() {
try {
s.documentElement.doScroll("left");
} catch {
return void setTimeout(u, 50);
}
c();
}
}(window);
export {
oe as Image,
Dt as Viewer
};