images-viewer-vue3/dist/es/hooks/toolbar.js

A lightweight image viewer for Vue3

import H from "../utils/ViewerCore.js";
import { downloadExe as K } from "../utils/index.js";
import { ref as n, nextTick as O } from "vue";
import { useFullscreen as P } from "../node_modules/.pnpm/@vueuse_core@11.2.0_vue@3.4.29_typescript@5.7.2_/node_modules/@vueuse/core/index.js";
const N = (c, x) => {
  const s = n(null), t = n(null), u = n(""), i = n(!0), o = H.getInStance(), a = n(-1), p = n(-1), f = n(""), d = n({
    naturalRatio: "",
    renderRatio: "",
    size: "",
    fixedAspectRatio: ""
  }), h = n(c.length > 0);
  function y(e) {
    o.horizontalInvert();
  }
  function w(e) {
    o.verticalInvert();
  }
  function R(e) {
    o.zoomIn();
  }
  function z(e) {
    o.zoomOut();
  }
  function S(e) {
    o.rotate("+");
  }
  function $(e) {
    o.rotate("-");
  }
  const W = (e) => {
    o.onWheel(e);
  }, V = (e) => {
    var l;
    const r = (l = t.value) == null ? void 0 : l.src;
    K(r);
  }, k = () => {
    s.value = null, t.value = null, u.value = "", i.value = !0, a.value = -1, p.value = -1, o.destroyed();
  }, E = () => {
    o.removeStyleProperty();
  }, T = (e) => {
    o.setImage(t.value);
    const r = new Image();
    r.src = t.value && t.value.src;
    const { width: l, height: v, naturalWidth: m, naturalHeight: g } = r;
    t.value && s.value && (t.value.style.transform = "", t.value.style.removeProperty("position"), t.value.style.maxHeight = "100%", t.value.style.maxWidth = "100%"), u.value = "", i.value = !1;
    const F = Number(m * g / 1024).toFixed(2);
    d.value = {
      naturalRatio: `${m} x ${g} px`,
      renderRatio: `${l} x ${v} px`,
      size: `${F} KB`,
      fixedAspectRatio: `${m}:${g}`
    };
  }, b = (e) => {
    i.value = !1, u.value = "加载图片失败，请仔细检测图片访问路径！";
  }, A = () => {
    a.value !== c.length - 1 && (a.value++, I());
  }, B = () => {
    a.value !== 0 && (a.value--, I());
  }, I = () => {
    if (!t.value) return;
    const e = c[a.value];
    e && (f.value = t.value.src = e, x({ image: t.value.src, index: a.value }));
  }, C = () => {
    const e = document.querySelector(".image-viewer-vue3__root"), { enter: r, exit: l, toggle: v } = P(e);
    v();
  };
  return O(() => {
  }), {
    updateImageSrc: f,
    isMultipleImage: h,
    onWheelListener: W,
    imageInfo: d,
    nextImage: A,
    previousImage: B,
    destroyedExe: k,
    resetStyle: E,
    downloads: V,
    loadImageErrorText: u,
    loading: i,
    errorImage: b,
    loadImage: T,
    imageRef: t,
    imageVieverWidgetRef: s,
    inevrtY: y,
    inevrtX: w,
    zoomIn: R,
    zoomOut: z,
    clockwise: S,
    counterclockwise: $,
    currentIndex: a,
    fullScreen: C
  };
};
export {
  N as useToolbar
};