@l1yp/file-viewer 0.1.2 → 0.1.3

package/dist/components/PdfViewer.vue_vue_type_script_setup_true_lang.js

@@ -1,116 +1,178 @@
-import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, onBeforeUnmount as i, onMounted as a, openBlock as o, ref as s, toDisplayString as c, watch as l } from "vue";
-import * as u from "pdfjs-dist";
-import d from "pdfjs-dist/build/pdf.worker.min.mjs?url";
+import e from "./PdfNavigationPane.js";
+import { loadPdfNavigation as t } from "../lib/pdfNavigation.js";
+import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, onBeforeUnmount as s, onMounted as c, openBlock as l, shallowRef as u, toDisplayString as d, useTemplateRef as f, watch as p } from "vue";
+import * as m from "pdfjs-dist";
+import h from "pdfjs-dist/build/pdf.worker.min.mjs?url";
 //#region src/components/PdfViewer.vue?vue&type=script&setup=true&lang.ts
-var f = { class: "pf" }, p = {
+var g = { class: "pf" }, _ = { class: "pf__stage" }, v = {
 	key: 0,
 	class: "pf__overlay"
-}, m = {
+}, y = {
 	key: 1,
 	class: "pf__overlay"
-}, h = { class: "pf__msg pf__msg--error" }, g = 2, _ = /*@__PURE__*/ r({
+}, b = { class: "pf__msg pf__msg--error" }, x = 2, S = 24, C = 104, w = /*@__PURE__*/ o({
 	__name: "PdfViewer",
 	props: {
 		url: {},
 		name: {},
 		size: {}
 	},
-	setup(r) {
-		u.GlobalWorkerOptions.workerSrc = d;
-		let _ = r, v = s("loading"), y = s(""), b = s(0), x = s(null), S = null, C = [], w = 0;
-		function T() {
-			for (let e of C) try {
+	setup(o) {
+		m.GlobalWorkerOptions.workerSrc = h;
+		let w = o, T = u("loading"), E = u(""), D = u(0), O = u(1), k = u([]), A = u([]), j = u([]), M = u(!1), N = u("outline"), P = f("docEl"), F = null, I = [], L = 0, R, z = "", B = null, V = 0;
+		function H() {
+			for (let e of I) try {
 				e.cancel();
 			} catch {}
-			C = [];
+			I = [];
 		}
-		function E() {
-			if (T(), S) {
+		function U() {
+			if (H(), F) {
 				try {
-					S.destroy();
+					F.destroy();
 				} catch {}
-				S = null;
+				F = null;
 			}
 		}
-		async function D() {
-			let e = x.value, t = S;
+		function W(e) {
+			if (!e.width || !e.height) return null;
+			try {
+				let t = document.createElement("canvas");
+				t.width = C, t.height = Math.max(1, Math.round(C * (e.height / e.width)));
+				let n = t.getContext("2d");
+				return n ? (n.fillStyle = "#fff", n.fillRect(0, 0, t.width, t.height), n.drawImage(e, 0, 0, t.width, t.height), t.toDataURL("image/jpeg", .78)) : null;
+			} catch {
+				return null;
+			}
+		}
+		function G(e, t = "smooth") {
+			let n = P.value, r = n?.querySelector(`[data-page-number="${e}"]`);
+			if (!n || !r) return;
+			O.value = e;
+			let i = n.getBoundingClientRect(), a = r.getBoundingClientRect(), o = Number.parseFloat(getComputedStyle(n).paddingTop);
+			n.scrollTo({
+				top: n.scrollTop + a.top - i.top - o,
+				behavior: t
+			});
+		}
+		function K() {
+			V ||= window.requestAnimationFrame(() => {
+				V = 0;
+				let e = P.value;
+				if (!e) return;
+				let t = e.getBoundingClientRect().top + Math.min(e.clientHeight * .36, 220), n = O.value, r = Infinity;
+				for (let i of e.querySelectorAll("[data-page-number]")) {
+					let e = i.getBoundingClientRect(), a = Math.min(Math.max(t, e.top), e.bottom), o = Math.abs(t - a);
+					o >= r || (r = o, n = Number(i.dataset.pageNumber) || n);
+				}
+				O.value = n;
+			});
+		}
+		async function q() {
+			let e = P.value, t = F;
 			if (!e || !t) return;
-			let n = ++w;
-			T(), e.innerHTML = "";
-			let r = getComputedStyle(e), i = parseFloat(r.paddingLeft) + parseFloat(r.paddingRight), a = Math.max(120, e.clientWidth - i), o = Math.min(typeof window < "u" && window.devicePixelRatio || 1, g);
-			for (let r = 1; r <= t.numPages; r++) {
+			let n = ++L, r = O.value, i = e.scrollTop > 0;
+			H(), e.innerHTML = "";
+			let a = getComputedStyle(e), o = Number.parseFloat(a.paddingLeft) + Number.parseFloat(a.paddingRight), s = Number.parseFloat(a.paddingTop) + Number.parseFloat(a.paddingBottom), c = Math.max(120, e.clientWidth - o - S), l = Math.max(160, e.clientHeight - s - S), u = Math.min(window.devicePixelRatio || 1, x), d = Array(t.numPages).fill(null);
+			for (let r = 1; r <= t.numPages; r += 1) {
 				let i;
 				try {
 					i = await t.getPage(r);
 				} catch {
-					if (n !== w) return;
+					if (n !== L) return;
 					continue;
 				}
-				if (n !== w) return;
-				let s = i.getViewport({ scale: 1 }), c = a / s.width, l = i.getViewport({ scale: c * o }), u = document.createElement("canvas");
-				if (u.className = "pf__page", u.width = Math.ceil(l.width), u.height = Math.ceil(l.height), u.style.width = `${Math.round(a)}px`, u.style.height = `${Math.round(a * (s.height / s.width))}px`, !u.getContext("2d")) continue;
-				e.appendChild(u);
-				let d = i.render({
-					canvas: u,
-					viewport: l
+				if (n !== L) return;
+				let a = i.getViewport({ scale: 1 }), o = Math.min(c / a.width, l / a.height), s = Math.round(a.width * o), f = Math.round(a.height * o), p = i.getViewport({ scale: o * u }), m = document.createElement("div");
+				m.className = "pf__page-wrap", m.dataset.pageNumber = `${r}`;
+				let h = document.createElement("canvas");
+				if (h.className = "pf__page", h.width = Math.ceil(p.width), h.height = Math.ceil(p.height), h.style.width = `${s}px`, h.style.height = `${f}px`, h.setAttribute("aria-label", `PDF 第 ${r} 页`), !h.getContext("2d")) continue;
+				m.appendChild(h), e.appendChild(m);
+				let g = i.render({
+					canvas: h,
+					viewport: p
 				});
-				C.push(d);
+				I.push(g);
+				let _ = !0;
 				try {
-					await d.promise;
+					await g.promise;
 				} catch {
-					if (n !== w) return;
+					if (n !== L) return;
+					_ = !1;
 				}
-				if (n !== w) return;
+				if (n !== L) return;
+				_ && (d[r - 1] = W(h));
 			}
+			j.value = d, i && G(r, "auto"), K();
 		}
-		async function O() {
-			let e = x.value;
-			if (!_.url || !e) return;
-			v.value = "loading", y.value = "", E(), e.innerHTML = "";
-			let t = _.url;
+		async function J() {
+			let e = P.value;
+			if (!w.url || !e) return;
+			T.value = "loading", E.value = "", k.value = [], A.value = [], j.value = [], U(), e.innerHTML = "";
+			let n = w.url;
 			try {
-				let n = await fetch(t);
-				if (!n.ok) throw Error(`HTTP ${n.status}`);
-				let r = await n.arrayBuffer();
-				if (_.url !== t || x.value !== e) return;
-				let i = await u.getDocument({ data: new Uint8Array(r) }).promise;
-				if (_.url !== t || x.value !== e) {
-					try {
-						i.destroy();
-					} catch {}
+				let r = await fetch(n);
+				if (!r.ok) throw Error(`HTTP ${r.status}`);
+				let i = new Uint8Array(await r.arrayBuffer());
+				if (w.url !== n || P.value !== e) return;
+				let a = await m.getDocument({ data: i }).promise;
+				if (w.url !== n || P.value !== e) {
+					a.destroy();
 					return;
 				}
-				if (S = i, b.value = i.numPages, await D(), _.url !== t || x.value !== e) return;
-				v.value = "ready";
+				F = a, D.value = a.numPages, O.value = 1;
+				let o = await t(a);
+				if (w.url !== n || P.value !== e || (k.value = o.outline, A.value = o.pageLabels, N.value = o.outline.length ? "outline" : "pages", await q(), w.url !== n || P.value !== e)) return;
+				T.value = "ready";
 			} catch (e) {
-				y.value = e instanceof Error ? e.message : String(e), v.value = "error";
+				E.value = e instanceof Error ? e.message : String(e), T.value = "error";
 			}
 		}
-		let k, A = 0, j = null;
-		function M() {
-			let e = x.value;
-			if (!e || !S) return;
-			let t = e.clientWidth;
-			Math.abs(t - A) < 8 || (A = t, clearTimeout(k), k = setTimeout(() => {
-				S && D();
+		function Y() {
+			let e = P.value;
+			if (!e || !F) return;
+			let t = `${e.clientWidth}x${e.clientHeight}`;
+			!e.clientWidth || !e.clientHeight || t === z || (z = t, clearTimeout(R), R = setTimeout(() => {
+				F && q();
 			}, 180));
 		}
-		return a(() => {
-			O(), typeof ResizeObserver < "u" && x.value && (A = x.value.clientWidth, j = new ResizeObserver(M), j.observe(x.value));
-		}), l(() => _.url, O), i(() => {
-			clearTimeout(k), j?.disconnect(), w++, E(), x.value && (x.value.innerHTML = "");
-		}), (r, i) => (o(), t("div", f, [n("div", {
+		return c(() => {
+			J(), typeof ResizeObserver < "u" && P.value && (z = `${P.value.clientWidth}x${P.value.clientHeight}`, B = new ResizeObserver(Y), B.observe(P.value));
+		}), p(() => w.url, J), s(() => {
+			clearTimeout(R), B?.disconnect(), V && window.cancelAnimationFrame(V), L += 1, U(), P.value && (P.value.innerHTML = "");
+		}), (t, o) => (l(), i("div", g, [T.value === "ready" ? (l(), n(e, {
+			key: 0,
+			collapsed: M.value,
+			"onUpdate:collapsed": o[0] ||= (e) => M.value = e,
+			view: N.value,
+			"onUpdate:view": o[1] ||= (e) => N.value = e,
+			"outline-items": k.value,
+			"page-count": D.value,
+			"page-labels": A.value,
+			"page-thumbnails": j.value,
+			"active-page": O.value,
+			onNavigate: G
+		}, null, 8, [
+			"collapsed",
+			"view",
+			"outline-items",
+			"page-count",
+			"page-labels",
+			"page-thumbnails",
+			"active-page"
+		])) : r("", !0), a("div", _, [a("div", {
 			ref_key: "docEl",
-			ref: x,
-			class: "pf__doc"
-		}, null, 512), v.value === "loading" ? (o(), t("div", p, [...i[0] ||= [n("p", { class: "pf__msg" }, "正在渲染 PDF…", -1)]])) : v.value === "error" ? (o(), t("div", m, [n("div", h, [n("p", null, "渲染失败：" + c(y.value), 1), n("button", {
+			ref: P,
+			class: "pf__doc",
+			onScrollPassive: K
+		}, null, 544), T.value === "loading" ? (l(), i("div", v, [...o[2] ||= [a("p", { class: "pf__msg" }, "正在渲染 PDF…", -1)]])) : T.value === "error" ? (l(), i("div", y, [a("div", b, [a("p", null, "渲染失败：" + d(E.value), 1), a("button", {
 			type: "button",
 			class: "pf__retry",
-			onClick: O
-		}, "重试")])])) : e("", !0)]));
+			onClick: J
+		}, "重试")])])) : r("", !0)])]));
 	}
 });
 //#endregion
-export { _ as default };
+export { w as default };
 
 //# sourceMappingURL=PdfViewer.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/PdfViewer.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"PdfViewer.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/PdfViewer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport * as pdfjsLib from 'pdfjs-dist'\nimport type { PDFDocumentProxy, RenderTask } from 'pdfjs-dist'\n// pdfjs runs its parser/rasterizer in a web worker. Vite's `?url` emits the real worker asset and returns a\n// servable URL (root-relative in the same-origin prod build, a dev URL under `pnpm dev`); we point pdfjs at\n// it. The `.mjs` is served as text/javascript by Ktor (see AGENTS.md) so the module worker loads in prod.\nimport pdfWorkerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url'\n\npdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorkerUrl\n\n/**\n * Side-viewer PDF (`.pdf`) renderer. Fetches the document bytes from the download URL and rasterizes each\n * page to a <canvas> entirely in-browser via pdfjs-dist (https://github.com/mozilla/pdf.js) — a vertically\n * scrollable list of pages (white sheets on a neutral \"desk\", like the docx/pptx viewers). No CDN / network\n * beyond the file fetch: pdfjs bundles its own worker, fetched lazily as a same-origin asset (see above).\n *\n * Two entry shapes mirror the other viewers (docx/xlsx/pptx/zip): a real download URL for a held attachment,\n * or a blob URL minted by the archive browsers from already-extracted bytes. Pages re-rasterize when the pane\n * is resized (debounced) so text stays crisp at the new width.\n */\nconst props = defineProps<{\n  /** Download/blob URL of the .pdf bytes. */\n  url?: string\n  name: string\n  size?: number\n}>()\n\ntype Status = 'loading' | 'ready' | 'error'\nconst status = ref<Status>('loading')\nconst errorMsg = ref('')\nconst pageCount = ref(0)\n// The scroll container the page canvases render into. Always mounted (the loading/error states overlay it).\nconst docEl = ref<HTMLElement | null>(null)\n\n// Live document proxy + in-flight render tasks — torn down on re-render / unmount (the worker and page\n// rasterizers don't GC on their own).\nlet pdfDoc: PDFDocumentProxy | null = null\nlet renderTasks: RenderTask[] = []\n// Bumped on every (re)render so a stale async pass (older file, or a superseded resize) can bail out.\nlet renderToken = 0\n// Cap the backing-store resolution: device pixels × this, clamped, keeps big/high-DPI pages from minting\n// multi-hundred-MB canvases while staying crisp.\nconst MAX_SCALE = 2\n\nfunction cancelRenders(): void {\n  for (const t of renderTasks) {\n    try {\n      t.cancel()\n    } catch {\n      /* already settled — ignore */\n    }\n  }\n  renderTasks = []\n}\n\nfunction disposeDoc(): void {\n  cancelRenders()\n  if (pdfDoc) {\n    try {\n      pdfDoc.destroy()\n    } catch {\n      /* already torn down — ignore */\n    }\n    pdfDoc = null\n  }\n}\n\n// Rasterize every page of the live document into the container at its current width. Called on load and on\n// resize; guarded by `renderToken` so an outdated pass (file switched, or a newer resize started) stops early.\nasync function renderPages(): Promise<void> {\n  const el = docEl.value\n  const doc = pdfDoc\n  if (!el || !doc) return\n  const token = ++renderToken\n  cancelRenders()\n  el.innerHTML = ''\n  // Available CSS width for a page (minus the container's horizontal padding). Floor at a sane minimum so a\n  // momentarily-zero clientWidth (not yet laid out) doesn't render a 0-px canvas.\n  const style = getComputedStyle(el)\n  const padX = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight)\n  const cssWidth = Math.max(120, el.clientWidth - padX)\n  const dpr = Math.min(typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1, MAX_SCALE)\n  for (let n = 1; n <= doc.numPages; n++) {\n    let page\n    try {\n      page = await doc.getPage(n)\n    } catch {\n      if (token !== renderToken) return\n      continue // skip an unreadable page rather than failing the whole doc\n    }\n    if (token !== renderToken) return\n    const base = page.getViewport({ scale: 1 })\n    const cssScale = cssWidth / base.width\n    const viewport = page.getViewport({ scale: cssScale * dpr })\n    const canvas = document.createElement('canvas')\n    canvas.className = 'pf__page'\n    canvas.width = Math.ceil(viewport.width)\n    canvas.height = Math.ceil(viewport.height)\n    // Display at the CSS width; the extra backing-store pixels (× dpr) make text sharp on HiDPI screens.\n    canvas.style.width = `${Math.round(cssWidth)}px`\n    canvas.style.height = `${Math.round(cssWidth * (base.height / base.width))}px`\n    if (!canvas.getContext('2d')) continue // no 2D context available — skip rather than crash the render\n    el.appendChild(canvas)\n    // Pass `canvas` (the preferred param in pdfjs v5); it derives the 2D context itself.\n    const task = page.render({ canvas, viewport })\n    renderTasks.push(task)\n    try {\n      await task.promise\n    } catch {\n      // RenderingCancelledException on supersede/unmount is expected — only a live token cares about failures.\n      if (token !== renderToken) return\n    }\n    if (token !== renderToken) return\n  }\n}\n\nasync function load(): Promise<void> {\n  const el = docEl.value\n  if (!props.url || !el) return\n  status.value = 'loading'\n  errorMsg.value = ''\n  disposeDoc()\n  el.innerHTML = ''\n  const url = props.url\n  try {\n    const res = await fetch(url)\n    if (!res.ok) throw new Error(`HTTP ${res.status}`)\n    const buf = await res.arrayBuffer()\n    // Stale guard: a newer load may have started while we awaited the fetch.\n    if (props.url !== url || docEl.value !== el) return\n    const doc = await pdfjsLib.getDocument({ data: new Uint8Array(buf) }).promise\n    if (props.url !== url || docEl.value !== el) {\n      try {\n        doc.destroy()\n      } catch {\n        /* ignore */\n      }\n      return\n    }\n    pdfDoc = doc\n    pageCount.value = doc.numPages\n    await renderPages()\n    if (props.url !== url || docEl.value !== el) return\n    status.value = 'ready'\n  } catch (e) {\n    errorMsg.value = e instanceof Error ? e.message : String(e)\n    status.value = 'error'\n  }\n}\n\n// Re-rasterize on width changes (debounced) so pages stay crisp as the pane is dragged wider/narrower. Only\n// the width matters; height changes don't affect page scale.\nlet resizeTimer: ReturnType<typeof setTimeout> | undefined\nlet lastWidth = 0\nlet ro: ResizeObserver | null = null\nfunction onResize(): void {\n  const el = docEl.value\n  if (!el || !pdfDoc) return\n  const w = el.clientWidth\n  if (Math.abs(w - lastWidth) < 8) return // ignore sub-pixel / negligible jitter\n  lastWidth = w\n  clearTimeout(resizeTimer)\n  resizeTimer = setTimeout(() => {\n    if (pdfDoc) void renderPages()\n  }, 180)\n}\n\nonMounted(() => {\n  load()\n  if (typeof ResizeObserver !== 'undefined' && docEl.value) {\n    lastWidth = docEl.value.clientWidth\n    ro = new ResizeObserver(onResize)\n    ro.observe(docEl.value)\n  }\n})\nwatch(() => props.url, load)\nonBeforeUnmount(() => {\n  clearTimeout(resizeTimer)\n  ro?.disconnect()\n  renderToken++ // invalidate any in-flight render pass\n  disposeDoc()\n  if (docEl.value) docEl.value.innerHTML = ''\n})\n</script>\n\n<template>\n  <div class=\"pf\">\n    <!-- Always mounted so the renderer has a sized, scrollable container; states overlay it. -->\n    <div ref=\"docEl\" class=\"pf__doc\" />\n    <div v-if=\"status === 'loading'\" class=\"pf__overlay\">\n      <p class=\"pf__msg\">正在渲染 PDF…</p>\n    </div>\n    <div v-else-if=\"status === 'error'\" class=\"pf__overlay\">\n      <div class=\"pf__msg pf__msg--error\">\n        <p>渲染失败：{{ errorMsg }}</p>\n        <button type=\"button\" class=\"pf__retry\" @click=\"load\">重试</button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.pf {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--surface);\n}\n/* Scroll region holding the rendered pages — white sheets on a neutral \"desk\", like the docx/pptx viewers. */\n.pf__doc {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  background: var(--surface-2);\n  padding: 18px 16px 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n/* Each page canvas: a white sheet with a soft shadow. Width is set inline (the rasterized CSS width); the\n * canvas paints its own white, so no background needed here. */\n.pf__doc :deep(.pf__page) {\n  display: block;\n  max-width: 100%;\n  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);\n  border-radius: 2px;\n  background: #fff;\n}\n/* Overlay covers the (empty) container while loading or on error, without unmounting it. */\n.pf__overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  background: var(--surface);\n}\n.pf__msg {\n  padding: 20px 16px;\n  color: var(--muted);\n  font-size: 13px;\n}\n.pf__msg--error {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 10px;\n  color: var(--danger);\n}\n.pf__retry {\n  font-family: inherit;\n  font-size: 12.5px;\n  color: var(--text);\n  background: var(--surface);\n  border: 1px solid var(--border-2);\n  border-radius: 8px;\n  padding: 5px 12px;\n  cursor: pointer;\n}\n.pf__retry:hover {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n</style>\n"],"mappings":";;;;;;;;;;4CA2CM,IAAY;;;;;;;;EAlClB,EAAS,oBAAoB,YAAY;EAYzC,IAAM,IAAQ,GAQR,IAAS,EAAY,SAAS,GAC9B,IAAW,EAAI,EAAE,GACjB,IAAY,EAAI,CAAC,GAEjB,IAAQ,EAAwB,IAAI,GAItC,IAAkC,MAClC,IAA4B,CAAC,GAE7B,IAAc;EAKlB,SAAS,IAAsB;GAC7B,KAAK,IAAM,KAAK,GACd,IAAI;IACF,EAAE,OAAO;GACX,QAAQ,CAER;GAEF,IAAc,CAAC;EACjB;EAEA,SAAS,IAAmB;GAE1B,IADA,EAAc,GACV,GAAQ;IACV,IAAI;KACF,EAAO,QAAQ;IACjB,QAAQ,CAER;IACA,IAAS;GACX;EACF;EAIA,eAAe,IAA6B;GAC1C,IAAM,IAAK,EAAM,OACX,IAAM;GACZ,IAAI,CAAC,KAAM,CAAC,GAAK;GACjB,IAAM,IAAQ,EAAE;GAEhB,AADA,EAAc,GACd,EAAG,YAAY;GAGf,IAAM,IAAQ,iBAAiB,CAAE,GAC3B,IAAO,WAAW,EAAM,WAAW,IAAI,WAAW,EAAM,YAAY,GACpE,IAAW,KAAK,IAAI,KAAK,EAAG,cAAc,CAAI,GAC9C,IAAM,KAAK,IAAI,OAAO,SAAW,OAAc,OAAO,oBAAwB,GAAG,CAAS;GAChG,KAAK,IAAI,IAAI,GAAG,KAAK,EAAI,UAAU,KAAK;IACtC,IAAI;IACJ,IAAI;KACF,IAAO,MAAM,EAAI,QAAQ,CAAC;IAC5B,QAAQ;KACN,IAAI,MAAU,GAAa;KAC3B;IACF;IACA,IAAI,MAAU,GAAa;IAC3B,IAAM,IAAO,EAAK,YAAY,EAAE,OAAO,EAAE,CAAC,GACpC,IAAW,IAAW,EAAK,OAC3B,IAAW,EAAK,YAAY,EAAE,OAAO,IAAW,EAAI,CAAC,GACrD,IAAS,SAAS,cAAc,QAAQ;IAO9C,IANA,EAAO,YAAY,YACnB,EAAO,QAAQ,KAAK,KAAK,EAAS,KAAK,GACvC,EAAO,SAAS,KAAK,KAAK,EAAS,MAAM,GAEzC,EAAO,MAAM,QAAQ,GAAG,KAAK,MAAM,CAAQ,EAAE,KAC7C,EAAO,MAAM,SAAS,GAAG,KAAK,MAAM,KAAY,EAAK,SAAS,EAAK,MAAM,EAAE,KACvE,CAAC,EAAO,WAAW,IAAI,GAAG;IAC9B,EAAG,YAAY,CAAM;IAErB,IAAM,IAAO,EAAK,OAAO;KAAE;KAAQ;IAAS,CAAC;IAC7C,EAAY,KAAK,CAAI;IACrB,IAAI;KACF,MAAM,EAAK;IACb,QAAQ;KAEN,IAAI,MAAU,GAAa;IAC7B;IACA,IAAI,MAAU,GAAa;GAC7B;EACF;EAEA,eAAe,IAAsB;GACnC,IAAM,IAAK,EAAM;GACjB,IAAI,CAAC,EAAM,OAAO,CAAC,GAAI;GAIvB,AAHA,EAAO,QAAQ,WACf,EAAS,QAAQ,IACjB,EAAW,GACX,EAAG,YAAY;GACf,IAAM,IAAM,EAAM;GAClB,IAAI;IACF,IAAM,IAAM,MAAM,MAAM,CAAG;IAC3B,IAAI,CAAC,EAAI,IAAI,MAAU,MAAM,QAAQ,EAAI,QAAQ;IACjD,IAAM,IAAM,MAAM,EAAI,YAAY;IAElC,IAAI,EAAM,QAAQ,KAAO,EAAM,UAAU,GAAI;IAC7C,IAAM,IAAM,MAAM,EAAS,YAAY,EAAE,MAAM,IAAI,WAAW,CAAG,EAAE,CAAC,CAAC,CAAC;IACtE,IAAI,EAAM,QAAQ,KAAO,EAAM,UAAU,GAAI;KAC3C,IAAI;MACF,EAAI,QAAQ;KACd,QAAQ,CAER;KACA;IACF;IAIA,IAHA,IAAS,GACT,EAAU,QAAQ,EAAI,UACtB,MAAM,EAAY,GACd,EAAM,QAAQ,KAAO,EAAM,UAAU,GAAI;IAC7C,EAAO,QAAQ;GACjB,SAAS,GAAG;IAEV,AADA,EAAS,QAAQ,aAAa,QAAQ,EAAE,UAAU,OAAO,CAAC,GAC1D,EAAO,QAAQ;GACjB;EACF;EAIA,IAAI,GACA,IAAY,GACZ,IAA4B;EAChC,SAAS,IAAiB;GACxB,IAAM,IAAK,EAAM;GACjB,IAAI,CAAC,KAAM,CAAC,GAAQ;GACpB,IAAM,IAAI,EAAG;GACT,KAAK,IAAI,IAAI,CAAS,IAAI,MAC9B,IAAY,GACZ,aAAa,CAAW,GACxB,IAAc,iBAAiB;IAC7B,AAAI,KAAQ,EAAiB;GAC/B,GAAG,GAAG;EACR;SAEA,QAAgB;GAEd,AADA,EAAK,GACD,OAAO,iBAAmB,OAAe,EAAM,UACjD,IAAY,EAAM,MAAM,aACxB,IAAK,IAAI,eAAe,CAAQ,GAChC,EAAG,QAAQ,EAAM,KAAK;EAE1B,CAAC,GACD,QAAY,EAAM,KAAK,CAAI,GAC3B,QAAsB;GAKpB,AAJA,aAAa,CAAW,GACxB,GAAI,WAAW,GACf,KACA,EAAW,GACP,EAAM,UAAO,EAAM,MAAM,YAAY;EAC3C,CAAC,mBAIC,EAYM,OAZN,GAYM,CAVJ,EAAmC,OAAA;YAA1B;GAAJ,KAAI;GAAQ,OAAM;iBACZ,EAAA,UAAM,aAAA,EAAA,GAAjB,EAEM,OAFN,GAEM,CAAA,GAAA,AAAA,EAAA,OAAA,CADJ,EAAgC,KAAA,EAA7B,OAAM,UAAS,GAAC,aAAS,EAAA,CAAA,CAAA,CAAA,KAEd,EAAA,UAAM,WAAA,EAAA,GAAtB,EAKM,OALN,GAKM,CAJJ,EAGM,OAHN,GAGM,CAFJ,EAA0B,KAAA,MAAvB,UAAK,EAAG,EAAA,KAAQ,GAAA,CAAA,GACnB,EAAiE,UAAA;GAAzD,MAAK;GAAS,OAAM;GAAa,SAAO;KAAM,IAAE,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"PdfViewer.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/PdfViewer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, shallowRef, useTemplateRef, watch } from 'vue'\nimport * as pdfjsLib from 'pdfjs-dist'\nimport type { PDFDocumentProxy, RenderTask } from 'pdfjs-dist'\n// pdfjs runs its parser/rasterizer in a web worker. Vite's `?url` emits the real worker asset and returns a\n// servable URL (root-relative in the same-origin prod build, a dev URL under `pnpm dev`).\nimport pdfWorkerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url'\n\nimport PdfNavigationPane from './PdfNavigationPane.vue'\nimport { loadPdfNavigation, type PdfNavigationItem } from '../lib/pdfNavigation'\n\npdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorkerUrl\n\nconst props = defineProps<{\n  url?: string\n  name: string\n  size?: number\n}>()\n\ntype Status = 'loading' | 'ready' | 'error'\nconst status = shallowRef<Status>('loading')\nconst errorMsg = shallowRef('')\nconst pageCount = shallowRef(0)\nconst activePage = shallowRef(1)\nconst outlineItems = shallowRef<PdfNavigationItem[]>([])\nconst pageLabels = shallowRef<string[]>([])\nconst pageThumbnails = shallowRef<Array<string | null>>([])\nconst navigationCollapsed = shallowRef(false)\nconst navigationView = shallowRef<'outline' | 'pages'>('outline')\nconst docEl = useTemplateRef<HTMLElement>('docEl')\n\nlet pdfDoc: PDFDocumentProxy | null = null\nlet renderTasks: RenderTask[] = []\nlet renderToken = 0\nlet resizeTimer: ReturnType<typeof setTimeout> | undefined\nlet lastSize = ''\nlet resizeObserver: ResizeObserver | null = null\nlet scrollFrame = 0\nconst MAX_SCALE = 2\nconst PAGE_GUTTER = 24\nconst THUMBNAIL_WIDTH = 104\n\nfunction cancelRenders(): void {\n  for (const task of renderTasks) {\n    try {\n      task.cancel()\n    } catch {\n      // The task may already have settled.\n    }\n  }\n  renderTasks = []\n}\n\nfunction disposeDoc(): void {\n  cancelRenders()\n  if (!pdfDoc) return\n  try {\n    pdfDoc.destroy()\n  } catch {\n    // The worker may already have been torn down.\n  }\n  pdfDoc = null\n}\n\nfunction createPageThumbnail(canvas: HTMLCanvasElement): string | null {\n  if (!canvas.width || !canvas.height) return null\n  try {\n    const thumbnail = document.createElement('canvas')\n    thumbnail.width = THUMBNAIL_WIDTH\n    thumbnail.height = Math.max(1, Math.round(THUMBNAIL_WIDTH * (canvas.height / canvas.width)))\n    const context = thumbnail.getContext('2d')\n    if (!context) return null\n    context.fillStyle = '#fff'\n    context.fillRect(0, 0, thumbnail.width, thumbnail.height)\n    context.drawImage(canvas, 0, 0, thumbnail.width, thumbnail.height)\n    return thumbnail.toDataURL('image/jpeg', 0.78)\n  } catch {\n    return null\n  }\n}\n\nfunction scrollToPage(pageNumber: number, behavior: ScrollBehavior = 'smooth'): void {\n  const el = docEl.value\n  const target = el?.querySelector<HTMLElement>(`[data-page-number=\"${pageNumber}\"]`)\n  if (!el || !target) return\n  activePage.value = pageNumber\n  const rootRect = el.getBoundingClientRect()\n  const targetRect = target.getBoundingClientRect()\n  const paddingTop = Number.parseFloat(getComputedStyle(el).paddingTop)\n  el.scrollTo({\n    top: el.scrollTop + targetRect.top - rootRect.top - paddingTop,\n    behavior,\n  })\n}\n\nfunction syncActivePage(): void {\n  if (scrollFrame) return\n  scrollFrame = window.requestAnimationFrame(() => {\n    scrollFrame = 0\n    const el = docEl.value\n    if (!el) return\n    const rootRect = el.getBoundingClientRect()\n    const targetY = rootRect.top + Math.min(el.clientHeight * 0.36, 220)\n    let nearestPage = activePage.value\n    let nearestDistance = Number.POSITIVE_INFINITY\n    for (const page of el.querySelectorAll<HTMLElement>('[data-page-number]')) {\n      const rect = page.getBoundingClientRect()\n      const pageTarget = Math.min(Math.max(targetY, rect.top), rect.bottom)\n      const distance = Math.abs(targetY - pageTarget)\n      if (distance >= nearestDistance) continue\n      nearestDistance = distance\n      nearestPage = Number(page.dataset.pageNumber) || nearestPage\n    }\n    activePage.value = nearestPage\n  })\n}\n\nasync function renderPages(): Promise<void> {\n  const el = docEl.value\n  const doc = pdfDoc\n  if (!el || !doc) return\n  const token = ++renderToken\n  const preservedPage = activePage.value\n  const preserveScroll = el.scrollTop > 0\n  cancelRenders()\n  el.innerHTML = ''\n\n  const style = getComputedStyle(el)\n  const padX = Number.parseFloat(style.paddingLeft) + Number.parseFloat(style.paddingRight)\n  const padY = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom)\n  const availableWidth = Math.max(120, el.clientWidth - padX - PAGE_GUTTER)\n  const availableHeight = Math.max(160, el.clientHeight - padY - PAGE_GUTTER)\n  const outputScale = Math.min(window.devicePixelRatio || 1, MAX_SCALE)\n  const thumbnails = Array<string | null>(doc.numPages).fill(null)\n\n  for (let pageNumber = 1; pageNumber <= doc.numPages; pageNumber += 1) {\n    let page\n    try {\n      page = await doc.getPage(pageNumber)\n    } catch {\n      if (token !== renderToken) return\n      continue\n    }\n    if (token !== renderToken) return\n\n    const base = page.getViewport({ scale: 1 })\n    const cssScale = Math.min(availableWidth / base.width, availableHeight / base.height)\n    const cssWidth = Math.round(base.width * cssScale)\n    const cssHeight = Math.round(base.height * cssScale)\n    const viewport = page.getViewport({ scale: cssScale * outputScale })\n\n    const pageWrap = document.createElement('div')\n    pageWrap.className = 'pf__page-wrap'\n    pageWrap.dataset.pageNumber = `${pageNumber}`\n    const canvas = document.createElement('canvas')\n    canvas.className = 'pf__page'\n    canvas.width = Math.ceil(viewport.width)\n    canvas.height = Math.ceil(viewport.height)\n    canvas.style.width = `${cssWidth}px`\n    canvas.style.height = `${cssHeight}px`\n    canvas.setAttribute('aria-label', `PDF 第 ${pageNumber} 页`)\n    if (!canvas.getContext('2d')) continue\n    pageWrap.appendChild(canvas)\n    el.appendChild(pageWrap)\n\n    const task = page.render({ canvas, viewport })\n    renderTasks.push(task)\n    let rendered = true\n    try {\n      await task.promise\n    } catch {\n      if (token !== renderToken) return\n      rendered = false\n    }\n    if (token !== renderToken) return\n    if (rendered) thumbnails[pageNumber - 1] = createPageThumbnail(canvas)\n  }\n\n  pageThumbnails.value = thumbnails\n  if (preserveScroll) scrollToPage(preservedPage, 'auto')\n  syncActivePage()\n}\n\nasync function load(): Promise<void> {\n  const el = docEl.value\n  if (!props.url || !el) return\n  status.value = 'loading'\n  errorMsg.value = ''\n  outlineItems.value = []\n  pageLabels.value = []\n  pageThumbnails.value = []\n  disposeDoc()\n  el.innerHTML = ''\n  const url = props.url\n\n  try {\n    const response = await fetch(url)\n    if (!response.ok) throw new Error(`HTTP ${response.status}`)\n    const bytes = new Uint8Array(await response.arrayBuffer())\n    if (props.url !== url || docEl.value !== el) return\n\n    const document = await pdfjsLib.getDocument({ data: bytes }).promise\n    if (props.url !== url || docEl.value !== el) {\n      document.destroy()\n      return\n    }\n    pdfDoc = document\n    pageCount.value = document.numPages\n    activePage.value = 1\n    const navigation = await loadPdfNavigation(document)\n    if (props.url !== url || docEl.value !== el) return\n    outlineItems.value = navigation.outline\n    pageLabels.value = navigation.pageLabels\n    navigationView.value = navigation.outline.length ? 'outline' : 'pages'\n    await renderPages()\n    if (props.url !== url || docEl.value !== el) return\n    status.value = 'ready'\n  } catch (cause) {\n    errorMsg.value = cause instanceof Error ? cause.message : String(cause)\n    status.value = 'error'\n  }\n}\n\nfunction onResize(): void {\n  const el = docEl.value\n  if (!el || !pdfDoc) return\n  const size = `${el.clientWidth}x${el.clientHeight}`\n  if (!el.clientWidth || !el.clientHeight || size === lastSize) return\n  lastSize = size\n  clearTimeout(resizeTimer)\n  resizeTimer = setTimeout(() => {\n    if (pdfDoc) void renderPages()\n  }, 180)\n}\n\nonMounted(() => {\n  void load()\n  if (typeof ResizeObserver !== 'undefined' && docEl.value) {\n    lastSize = `${docEl.value.clientWidth}x${docEl.value.clientHeight}`\n    resizeObserver = new ResizeObserver(onResize)\n    resizeObserver.observe(docEl.value)\n  }\n})\nwatch(() => props.url, load)\nonBeforeUnmount(() => {\n  clearTimeout(resizeTimer)\n  resizeObserver?.disconnect()\n  if (scrollFrame) window.cancelAnimationFrame(scrollFrame)\n  renderToken += 1\n  disposeDoc()\n  if (docEl.value) docEl.value.innerHTML = ''\n})\n</script>\n\n<template>\n  <div class=\"pf\">\n    <PdfNavigationPane\n      v-if=\"status === 'ready'\"\n      v-model:collapsed=\"navigationCollapsed\"\n      v-model:view=\"navigationView\"\n      :outline-items=\"outlineItems\"\n      :page-count=\"pageCount\"\n      :page-labels=\"pageLabels\"\n      :page-thumbnails=\"pageThumbnails\"\n      :active-page=\"activePage\"\n      @navigate=\"scrollToPage\"\n    />\n    <div class=\"pf__stage\">\n      <div ref=\"docEl\" class=\"pf__doc\" @scroll.passive=\"syncActivePage\" />\n      <div v-if=\"status === 'loading'\" class=\"pf__overlay\">\n        <p class=\"pf__msg\">正在渲染 PDF…</p>\n      </div>\n      <div v-else-if=\"status === 'error'\" class=\"pf__overlay\">\n        <div class=\"pf__msg pf__msg--error\">\n          <p>渲染失败：{{ errorMsg }}</p>\n          <button type=\"button\" class=\"pf__retry\" @click=\"load\">重试</button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.pf {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex: 1 1 auto;\n  overflow: hidden;\n  container-type: inline-size;\n  background: var(--surface);\n}\n\n.pf__stage {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex: 1 1 0;\n  overflow: hidden;\n}\n\n.pf__doc {\n  width: 100%;\n  min-width: 0;\n  min-height: 0;\n  flex: 1 1 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  padding: 24px 20px 42px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  box-sizing: border-box;\n  background: var(--surface-2);\n  scrollbar-color: #555961 transparent;\n  scrollbar-width: thin;\n}\n\n.pf__doc :deep(.pf__page-wrap) {\n  max-width: 100%;\n  display: flex;\n  flex: none;\n  justify-content: center;\n}\n\n.pf__doc :deep(.pf__page) {\n  max-width: 100%;\n  display: block;\n  background: #fff;\n  border-radius: 2px;\n  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);\n}\n\n.pf__overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  background: var(--surface);\n}\n\n.pf__msg {\n  padding: 20px 16px;\n  color: var(--muted);\n  font-size: 13px;\n}\n\n.pf__msg--error {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 10px;\n  color: var(--danger);\n}\n\n.pf__retry {\n  padding: 5px 12px;\n  color: var(--text);\n  font-family: inherit;\n  font-size: 12.5px;\n  cursor: pointer;\n  background: var(--surface);\n  border: 1px solid var(--border-2);\n  border-radius: 8px;\n}\n\n.pf__retry:hover {\n  color: var(--accent);\n  border-color: var(--accent);\n}\n</style>\n"],"mappings":"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"}

package/dist/components/ZoomImage.js

@@ -2,7 +2,7 @@ import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./ZoomImage.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                          */
 //#region src/components/ZoomImage.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-96f5f467"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-dc19394f"]]);
 //#endregion
 export { n as default };
 

package/dist/components/ZoomImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomImage.js","names":[],"sources":["../../src/components/ZoomImage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\n/**\n * A pan + zoom image stage, shared by the full-screen {@link ImageLightbox} and the in-archive image preview\n * ({@link ZipBrowser}/{@link SevenZipBrowser}/{@link ArchiveBrowser}). Fills its parent (which must give it a\n * size). Wheel zooms toward the cursor, drag pans, double-click toggles fit↔2×, and a bottom toolbar offers\n * −/百分比/+. Initial fit is \"contain\" for a normal image, or fill-width-top-aligned for a `long` one (a tall\n * screenshot) so it reads top-down and pans vertically. A no-drag click on empty area emits `emptyClick` (the\n * lightbox closes on it; the archive preview ignores it).\n *\n * Exposes `zoomIn`/`zoomOut`/`fit` so a host can wire keyboard shortcuts to them.\n */\nconst props = withDefaults(defineProps<{ src: string; alt?: string; long?: boolean }>(), {\n  alt: '',\n  long: false,\n})\nconst emit = defineEmits<{ emptyClick: [] }>()\n\nconst stageEl = ref<HTMLElement | null>(null)\nconst imgEl = ref<HTMLImageElement | null>(null)\nconst natW = ref(0)\nconst natH = ref(0)\nconst scale = ref(1) // CSS px per image px (1 = 100%)\nconst tx = ref(0) // translate of the image's top-left within the stage\nconst ty = ref(0)\nconst fitScale = ref(1) // scale that \"contains\" the image in the stage\nconst ready = ref(false) // image measured → show it (avoids a pre-fit flash)\n\nconst percent = ref(100)\nfunction syncPercent(): void {\n  percent.value = Math.round(scale.value * 100)\n}\n\nfunction stageSize(): { w: number; h: number } {\n  const el = stageEl.value\n  if (el && el.clientWidth) return { w: el.clientWidth, h: el.clientHeight }\n  return { w: 1024, h: 768 }\n}\nfunction minScale(): number {\n  return Math.max(0.05, Math.min(fitScale.value, 1) * 0.5)\n}\nfunction maxScale(): number {\n  return Math.max(fitScale.value, 1) * 8\n}\n\n// Keep the image within the stage: center an axis whose content is smaller than the stage, otherwise clamp so\n// its edges can't be dragged inside the viewport. `topAlign` pins a too-tall image to its top (initial long view).\nfunction clampView(topAlign = false): void {\n  const { w, h } = stageSize()\n  const cw = natW.value * scale.value\n  const ch = natH.value * scale.value\n  tx.value = cw <= w ? (w - cw) / 2 : Math.min(0, Math.max(w - cw, tx.value))\n  if (ch <= h) ty.value = (h - ch) / 2\n  else if (topAlign) ty.value = 0\n  else ty.value = Math.min(0, Math.max(h - ch, ty.value))\n  syncPercent()\n}\n\n// (Re)fit the measured image: contain it, or — for a long image — fill the width and pin to the top.\nfunction fitView(): void {\n  if (!natW.value || !natH.value) return\n  const { w, h } = stageSize()\n  fitScale.value = Math.min(w / natW.value, h / natH.value)\n  scale.value = props.long ? (w * 0.98) / natW.value : Math.min(fitScale.value, 1)\n  clampView(props.long)\n}\n\nfunction clampScale(s: number): number {\n  return Math.min(maxScale(), Math.max(minScale(), s))\n}\n\n// Zoom keeping the image point under (cx, cy) — stage-relative coords — fixed in place.\nfunction zoomAt(cx: number, cy: number, factor: number): void {\n  const next = clampScale(scale.value * factor)\n  if (next === scale.value) return\n  const ix = (cx - tx.value) / scale.value\n  const iy = (cy - ty.value) / scale.value\n  scale.value = next\n  tx.value = cx - ix * next\n  ty.value = cy - iy * next\n  clampView(false)\n}\nfunction zoomCenter(factor: number): void {\n  const { w, h } = stageSize()\n  zoomAt(w / 2, h / 2, factor)\n}\n\nfunction onWheel(e: WheelEvent): void {\n  const rect = stageEl.value?.getBoundingClientRect()\n  const cx = rect ? e.clientX - rect.left : e.clientX\n  const cy = rect ? e.clientY - rect.top : e.clientY\n  zoomAt(cx, cy, e.deltaY < 0 ? 1.15 : 1 / 1.15)\n}\nfunction onDblClick(e: MouseEvent): void {\n  const rect = stageEl.value?.getBoundingClientRect()\n  const cx = rect ? e.clientX - rect.left : e.clientX\n  const cy = rect ? e.clientY - rect.top : e.clientY\n  // Near the fit scale → zoom in toward the cursor; otherwise snap back to fit.\n  if (scale.value <= fitScale.value * 1.05)\n    zoomAt(cx, cy, Math.max(2, 1 / Math.max(fitScale.value, 0.001)))\n  else fitView()\n}\n\n// Pointer drag → pan (covers mouse + touch). A no-move pointerup on empty area emits `emptyClick`.\nlet dragging = false\nlet moved = false\nlet lastX = 0\nlet lastY = 0\nlet downTarget: EventTarget | null = null\n\nfunction onPointerDown(e: PointerEvent): void {\n  if (e.button !== 0) return\n  dragging = true\n  moved = false\n  lastX = e.clientX\n  lastY = e.clientY\n  downTarget = e.target\n  stageEl.value?.setPointerCapture(e.pointerId)\n}\nfunction onPointerMove(e: PointerEvent): void {\n  if (!dragging) return\n  const dx = e.clientX - lastX\n  const dy = e.clientY - lastY\n  if (!moved && Math.abs(dx) + Math.abs(dy) > 3) moved = true\n  lastX = e.clientX\n  lastY = e.clientY\n  tx.value += dx\n  ty.value += dy\n  clampView(false)\n}\nfunction onPointerUp(e: PointerEvent): void {\n  if (!dragging) return\n  dragging = false\n  try {\n    stageEl.value?.releasePointerCapture(e.pointerId)\n  } catch {\n    /* capture already released — ignore */\n  }\n  if (!moved && downTarget !== imgEl.value) emit('emptyClick')\n}\n\nfunction onImgLoad(): void {\n  const img = imgEl.value\n  if (!img) return\n  natW.value = img.naturalWidth || 1\n  natH.value = img.naturalHeight || 1\n  fitView()\n  ready.value = true\n}\n\n// Re-fit when the container is resized (the side panel's drag splitter, or the window).\nlet ro: ResizeObserver | null = null\nfunction onResize(): void {\n  if (ready.value) fitView()\n}\n\n// Reset for a new source; the transform is recomputed on the <img>'s load.\nwatch(\n  () => props.src,\n  () => {\n    ready.value = false\n    natW.value = 0\n    natH.value = 0\n    scale.value = 1\n    tx.value = 0\n    ty.value = 0\n    fitScale.value = 1\n    syncPercent()\n  },\n)\n\nonMounted(() => {\n  if (typeof ResizeObserver !== 'undefined' && stageEl.value) {\n    ro = new ResizeObserver(onResize)\n    ro.observe(stageEl.value)\n  }\n})\nonBeforeUnmount(() => ro?.disconnect())\n\ndefineExpose({\n  zoomIn: () => zoomCenter(1.2),\n  zoomOut: () => zoomCenter(1 / 1.2),\n  fit: () => fitView(),\n})\n</script>\n\n<template>\n  <div\n    ref=\"stageEl\"\n    class=\"zi\"\n    :class=\"{ 'zi--grab': scale > fitScale }\"\n    @wheel.prevent=\"onWheel\"\n    @pointerdown=\"onPointerDown\"\n    @pointermove=\"onPointerMove\"\n    @pointerup=\"onPointerUp\"\n    @pointercancel=\"onPointerUp\"\n    @dblclick=\"onDblClick\"\n  >\n    <img\n      ref=\"imgEl\"\n      class=\"zi__img\"\n      :class=\"{ 'zi__img--ready': ready }\"\n      :src=\"src\"\n      :alt=\"alt\"\n      draggable=\"false\"\n      :style=\"{ transform: `translate(${tx}px, ${ty}px) scale(${scale})` }\"\n      @load=\"onImgLoad\"\n      @dragstart.prevent\n    />\n    <div class=\"zi__toolbar\" @pointerdown.stop @dblclick.stop @wheel.stop>\n      <button type=\"button\" class=\"zi__tool\" title=\"缩小 (-)\" @click=\"zoomCenter(1 / 1.2)\">\n        −\n      </button>\n      <button type=\"button\" class=\"zi__pct\" title=\"适应窗口 (0)\" @click=\"fitView()\">\n        {{ percent }}%\n      </button>\n      <button type=\"button\" class=\"zi__tool\" title=\"放大 (+)\" @click=\"zoomCenter(1.2)\">+</button>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.zi {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  cursor: zoom-out;\n  touch-action: none;\n}\n.zi--grab {\n  cursor: grab;\n}\n.zi--grab:active {\n  cursor: grabbing;\n}\n.zi__img {\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform-origin: 0 0;\n  will-change: transform;\n  user-select: none;\n  -webkit-user-drag: none;\n  opacity: 0;\n}\n.zi__img--ready {\n  opacity: 1;\n}\n.zi__toolbar {\n  position: absolute;\n  bottom: 14px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  padding: 4px;\n  border-radius: 12px;\n  background: rgba(28, 28, 30, 0.82);\n  backdrop-filter: blur(8px);\n  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);\n}\n.zi__tool {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 32px;\n  border: none;\n  border-radius: 9px;\n  background: transparent;\n  color: #fff;\n  font-size: 19px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.zi__tool:hover {\n  background: rgba(255, 255, 255, 0.16);\n}\n.zi__pct {\n  min-width: 56px;\n  height: 32px;\n  padding: 0 8px;\n  border: none;\n  border-radius: 9px;\n  background: transparent;\n  color: #fff;\n  font-family: inherit;\n  font-size: 12.5px;\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.zi__pct:hover {\n  background: rgba(255, 255, 255, 0.16);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ZoomImage.js","names":[],"sources":["../../src/components/ZoomImage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, shallowRef, useTemplateRef, watch } from 'vue'\n\n/**\n * A pan + zoom image stage, shared by the full-screen {@link ImageLightbox} and the in-archive image preview\n * ({@link ZipBrowser}/{@link SevenZipBrowser}/{@link ArchiveBrowser}). Fills its parent (which must give it a\n * size). Wheel zooms toward the cursor, drag pans, double-click toggles fit↔2×, and a bottom toolbar offers\n * −/百分比/+. Initial fit is \"contain\" for a normal image, or fill-width-top-aligned for a `long` one (a tall\n * screenshot) so it reads top-down and pans vertically. A no-drag click on empty area emits `emptyClick` (the\n * lightbox closes on it; the archive preview ignores it).\n *\n * Exposes `zoomIn`/`zoomOut`/`fit` so a host can wire keyboard shortcuts to them.\n */\nconst props = withDefaults(defineProps<{ src: string; alt?: string; long?: boolean }>(), {\n  alt: '',\n  long: false,\n})\nconst emit = defineEmits<{ emptyClick: [] }>()\n\nconst stageEl = useTemplateRef<HTMLElement>('stageEl')\nconst imgEl = useTemplateRef<HTMLImageElement>('imgEl')\nconst natW = shallowRef(0)\nconst natH = shallowRef(0)\nconst scale = shallowRef(1) // CSS px per image px (1 = 100%)\nconst tx = shallowRef(0) // translate of the image's top-left within the stage\nconst ty = shallowRef(0)\nconst fitScale = shallowRef(1) // scale that \"contains\" the image in the stage\nconst ready = shallowRef(false) // image measured → show it (avoids a pre-fit flash)\n\nconst percent = shallowRef(100)\nconst FIT_PADDING = 24\nfunction syncPercent(): void {\n  percent.value = Math.round(scale.value * 100)\n}\n\nfunction stageSize(): { w: number; h: number } {\n  const el = stageEl.value\n  if (el && el.clientWidth) return { w: el.clientWidth, h: el.clientHeight }\n  return { w: 1024, h: 768 }\n}\nfunction minScale(): number {\n  return Math.max(0.05, Math.min(fitScale.value, 1) * 0.5)\n}\nfunction maxScale(): number {\n  return Math.max(fitScale.value, 1) * 8\n}\n\n// Keep the image within the stage: center an axis whose content is smaller than the stage, otherwise clamp so\n// its edges can't be dragged inside the viewport. `topAlign` pins a too-tall image to its top (initial long view).\nfunction clampView(topAlign = false): void {\n  const { w, h } = stageSize()\n  const cw = natW.value * scale.value\n  const ch = natH.value * scale.value\n  tx.value = cw <= w ? (w - cw) / 2 : Math.min(0, Math.max(w - cw, tx.value))\n  if (ch <= h) ty.value = (h - ch) / 2\n  else if (topAlign) ty.value = 0\n  else ty.value = Math.min(0, Math.max(h - ch, ty.value))\n  syncPercent()\n}\n\n// (Re)fit the measured image: contain it, or — for a long image — fill the width and pin to the top.\nfunction fitView(): void {\n  if (!natW.value || !natH.value) return\n  const { w, h } = stageSize()\n  const padding = props.long ? 0 : FIT_PADDING * 2\n  const availableWidth = Math.max(1, w - padding)\n  const availableHeight = Math.max(1, h - padding)\n  fitScale.value = Math.min(availableWidth / natW.value, availableHeight / natH.value)\n  scale.value = props.long ? (w * 0.98) / natW.value : Math.min(fitScale.value, 1)\n  clampView(props.long)\n}\n\nfunction clampScale(s: number): number {\n  return Math.min(maxScale(), Math.max(minScale(), s))\n}\n\n// Zoom keeping the image point under (cx, cy) — stage-relative coords — fixed in place.\nfunction zoomAt(cx: number, cy: number, factor: number): void {\n  const next = clampScale(scale.value * factor)\n  if (next === scale.value) return\n  const ix = (cx - tx.value) / scale.value\n  const iy = (cy - ty.value) / scale.value\n  scale.value = next\n  tx.value = cx - ix * next\n  ty.value = cy - iy * next\n  clampView(false)\n}\nfunction zoomCenter(factor: number): void {\n  const { w, h } = stageSize()\n  zoomAt(w / 2, h / 2, factor)\n}\n\nfunction onWheel(e: WheelEvent): void {\n  const rect = stageEl.value?.getBoundingClientRect()\n  const cx = rect ? e.clientX - rect.left : e.clientX\n  const cy = rect ? e.clientY - rect.top : e.clientY\n  zoomAt(cx, cy, e.deltaY < 0 ? 1.15 : 1 / 1.15)\n}\nfunction onDblClick(e: MouseEvent): void {\n  const rect = stageEl.value?.getBoundingClientRect()\n  const cx = rect ? e.clientX - rect.left : e.clientX\n  const cy = rect ? e.clientY - rect.top : e.clientY\n  // Near the fit scale → zoom in toward the cursor; otherwise snap back to fit.\n  if (scale.value <= fitScale.value * 1.05)\n    zoomAt(cx, cy, Math.max(2, 1 / Math.max(fitScale.value, 0.001)))\n  else fitView()\n}\n\n// Pointer drag → pan (covers mouse + touch). A no-move pointerup on empty area emits `emptyClick`.\nlet dragging = false\nlet moved = false\nlet lastX = 0\nlet lastY = 0\nlet downTarget: EventTarget | null = null\n\nfunction onPointerDown(e: PointerEvent): void {\n  if (e.button !== 0) return\n  dragging = true\n  moved = false\n  lastX = e.clientX\n  lastY = e.clientY\n  downTarget = e.target\n  stageEl.value?.setPointerCapture(e.pointerId)\n}\nfunction onPointerMove(e: PointerEvent): void {\n  if (!dragging) return\n  const dx = e.clientX - lastX\n  const dy = e.clientY - lastY\n  if (!moved && Math.abs(dx) + Math.abs(dy) > 3) moved = true\n  lastX = e.clientX\n  lastY = e.clientY\n  tx.value += dx\n  ty.value += dy\n  clampView(false)\n}\nfunction onPointerUp(e: PointerEvent): void {\n  if (!dragging) return\n  dragging = false\n  try {\n    stageEl.value?.releasePointerCapture(e.pointerId)\n  } catch {\n    /* capture already released — ignore */\n  }\n  if (!moved && downTarget !== imgEl.value) emit('emptyClick')\n}\n\nfunction onImgLoad(): void {\n  const img = imgEl.value\n  if (!img) return\n  natW.value = img.naturalWidth || 1\n  natH.value = img.naturalHeight || 1\n  fitView()\n  ready.value = true\n}\n\n// Re-fit when the container is resized (the side panel's drag splitter, or the window).\nlet ro: ResizeObserver | null = null\nfunction onResize(): void {\n  if (ready.value) fitView()\n}\n\n// Reset for a new source; the transform is recomputed on the <img>'s load.\nwatch(\n  () => props.src,\n  () => {\n    ready.value = false\n    natW.value = 0\n    natH.value = 0\n    scale.value = 1\n    tx.value = 0\n    ty.value = 0\n    fitScale.value = 1\n    syncPercent()\n  },\n)\n\nonMounted(() => {\n  if (typeof ResizeObserver !== 'undefined' && stageEl.value) {\n    ro = new ResizeObserver(onResize)\n    ro.observe(stageEl.value)\n  }\n})\nonBeforeUnmount(() => ro?.disconnect())\n\ndefineExpose({\n  zoomIn: () => zoomCenter(1.2),\n  zoomOut: () => zoomCenter(1 / 1.2),\n  fit: () => fitView(),\n})\n</script>\n\n<template>\n  <div\n    ref=\"stageEl\"\n    class=\"zi\"\n    :class=\"{ 'zi--grab': scale > fitScale }\"\n    @wheel.prevent=\"onWheel\"\n    @pointerdown=\"onPointerDown\"\n    @pointermove=\"onPointerMove\"\n    @pointerup=\"onPointerUp\"\n    @pointercancel=\"onPointerUp\"\n    @dblclick=\"onDblClick\"\n  >\n    <img\n      ref=\"imgEl\"\n      class=\"zi__img\"\n      :class=\"{ 'zi__img--ready': ready }\"\n      :src=\"src\"\n      :alt=\"alt\"\n      draggable=\"false\"\n      :style=\"{ transform: `translate(${tx}px, ${ty}px) scale(${scale})` }\"\n      @load=\"onImgLoad\"\n      @dragstart.prevent\n    />\n    <div class=\"zi__toolbar\" @pointerdown.stop @dblclick.stop @wheel.stop>\n      <button type=\"button\" class=\"zi__tool\" title=\"缩小 (-)\" @click=\"zoomCenter(1 / 1.2)\">\n        −\n      </button>\n      <button type=\"button\" class=\"zi__pct\" title=\"适应窗口 (0)\" @click=\"fitView()\">\n        {{ percent }}%\n      </button>\n      <button type=\"button\" class=\"zi__tool\" title=\"放大 (+)\" @click=\"zoomCenter(1.2)\">+</button>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.zi {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n  cursor: zoom-out;\n  touch-action: none;\n}\n.zi--grab {\n  cursor: grab;\n}\n.zi--grab:active {\n  cursor: grabbing;\n}\n.zi__img {\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform-origin: 0 0;\n  will-change: transform;\n  user-select: none;\n  -webkit-user-drag: none;\n  opacity: 0;\n}\n.zi__img--ready {\n  opacity: 1;\n}\n.zi__toolbar {\n  position: absolute;\n  bottom: 14px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  padding: 4px;\n  border-radius: 12px;\n  background: rgba(28, 28, 30, 0.82);\n  backdrop-filter: blur(8px);\n  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);\n}\n.zi__tool {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 32px;\n  border: none;\n  border-radius: 9px;\n  background: transparent;\n  color: #fff;\n  font-size: 19px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.zi__tool:hover {\n  background: rgba(255, 255, 255, 0.16);\n}\n.zi__pct {\n  min-width: 56px;\n  height: 32px;\n  padding: 0 8px;\n  border: none;\n  border-radius: 9px;\n  background: transparent;\n  color: #fff;\n  font-family: inherit;\n  font-size: 12.5px;\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.zi__pct:hover {\n  background: rgba(255, 255, 255, 0.16);\n}\n</style>\n"],"mappings":""}

package/dist/components/ZoomImage.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
-import { createElementBlock as e, createElementVNode as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, onBeforeUnmount as a, onMounted as o, openBlock as s, ref as c, toDisplayString as l, watch as u, withModifiers as d } from "vue";
+import { createElementBlock as e, createElementVNode as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, onBeforeUnmount as a, onMounted as o, openBlock as s, shallowRef as c, toDisplayString as l, useTemplateRef as u, watch as d, withModifiers as f } from "vue";
 //#region src/components/ZoomImage.vue?vue&type=script&setup=true&lang.ts
-var f = ["src", "alt"], p = /*@__PURE__*/ n({
+var p = ["src", "alt"], m = 24, h = /*@__PURE__*/ n({
 	__name: "ZoomImage",
 	props: {
 		src: {},
@@ -11,13 +11,13 @@ var f = ["src", "alt"], p = /*@__PURE__*/ n({
 		}
 	},
 	emits: ["emptyClick"],
-	setup(n, { expose: p, emit: m }) {
-		let h = n, g = m, _ = c(null), v = c(null), y = c(0), b = c(0), x = c(1), S = c(0), C = c(0), w = c(1), T = c(!1), E = c(100);
-		function D() {
-			E.value = Math.round(x.value * 100);
+	setup(n, { expose: h, emit: g }) {
+		let _ = n, v = g, y = u("stageEl"), b = u("imgEl"), x = c(0), S = c(0), C = c(1), w = c(0), T = c(0), E = c(1), D = c(!1), O = c(100);
+		function k() {
+			O.value = Math.round(C.value * 100);
 		}
-		function O() {
-			let e = _.value;
+		function A() {
+			let e = y.value;
 			return e && e.clientWidth ? {
 				w: e.clientWidth,
 				h: e.clientHeight
@@ -26,124 +26,124 @@ var f = ["src", "alt"], p = /*@__PURE__*/ n({
 				h: 768
 			};
 		}
-		function k() {
-			return Math.max(.05, Math.min(w.value, 1) * .5);
-		}
-		function A() {
-			return Math.max(w.value, 1) * 8;
-		}
-		function j(e = !1) {
-			let { w: t, h: n } = O(), r = y.value * x.value, i = b.value * x.value;
-			S.value = r <= t ? (t - r) / 2 : Math.min(0, Math.max(t - r, S.value)), i <= n ? C.value = (n - i) / 2 : e ? C.value = 0 : C.value = Math.min(0, Math.max(n - i, C.value)), D();
+		function j() {
+			return Math.max(.05, Math.min(E.value, 1) * .5);
 		}
 		function M() {
-			if (!y.value || !b.value) return;
-			let { w: e, h: t } = O();
-			w.value = Math.min(e / y.value, t / b.value), x.value = h.long ? e * .98 / y.value : Math.min(w.value, 1), j(h.long);
+			return Math.max(E.value, 1) * 8;
 		}
-		function N(e) {
-			return Math.min(A(), Math.max(k(), e));
+		function N(e = !1) {
+			let { w: t, h: n } = A(), r = x.value * C.value, i = S.value * C.value;
+			w.value = r <= t ? (t - r) / 2 : Math.min(0, Math.max(t - r, w.value)), i <= n ? T.value = (n - i) / 2 : e ? T.value = 0 : T.value = Math.min(0, Math.max(n - i, T.value)), k();
 		}
-		function P(e, t, n) {
-			let r = N(x.value * n);
-			if (r === x.value) return;
-			let i = (e - S.value) / x.value, a = (t - C.value) / x.value;
-			x.value = r, S.value = e - i * r, C.value = t - a * r, j(!1);
+		function P() {
+			if (!x.value || !S.value) return;
+			let { w: e, h: t } = A(), n = _.long ? 0 : m * 2, r = Math.max(1, e - n), i = Math.max(1, t - n);
+			E.value = Math.min(r / x.value, i / S.value), C.value = _.long ? e * .98 / x.value : Math.min(E.value, 1), N(_.long);
 		}
 		function F(e) {
-			let { w: t, h: n } = O();
-			P(t / 2, n / 2, e);
+			return Math.min(M(), Math.max(j(), e));
 		}
-		function I(e) {
-			let t = _.value?.getBoundingClientRect();
-			P(t ? e.clientX - t.left : e.clientX, t ? e.clientY - t.top : e.clientY, e.deltaY < 0 ? 1.15 : 1 / 1.15);
+		function I(e, t, n) {
+			let r = F(C.value * n);
+			if (r === C.value) return;
+			let i = (e - w.value) / C.value, a = (t - T.value) / C.value;
+			C.value = r, w.value = e - i * r, T.value = t - a * r, N(!1);
 		}
 		function L(e) {
-			let t = _.value?.getBoundingClientRect(), n = t ? e.clientX - t.left : e.clientX, r = t ? e.clientY - t.top : e.clientY;
-			x.value <= w.value * 1.05 ? P(n, r, Math.max(2, 1 / Math.max(w.value, .001))) : M();
+			let { w: t, h: n } = A();
+			I(t / 2, n / 2, e);
 		}
-		let R = !1, z = !1, B = 0, V = 0, H = null;
-		function U(e) {
-			e.button === 0 && (R = !0, z = !1, B = e.clientX, V = e.clientY, H = e.target, _.value?.setPointerCapture(e.pointerId));
+		function R(e) {
+			let t = y.value?.getBoundingClientRect();
+			I(t ? e.clientX - t.left : e.clientX, t ? e.clientY - t.top : e.clientY, e.deltaY < 0 ? 1.15 : 1 / 1.15);
 		}
-		function W(e) {
-			if (!R) return;
-			let t = e.clientX - B, n = e.clientY - V;
-			!z && Math.abs(t) + Math.abs(n) > 3 && (z = !0), B = e.clientX, V = e.clientY, S.value += t, C.value += n, j(!1);
+		function z(e) {
+			let t = y.value?.getBoundingClientRect(), n = t ? e.clientX - t.left : e.clientX, r = t ? e.clientY - t.top : e.clientY;
+			C.value <= E.value * 1.05 ? I(n, r, Math.max(2, 1 / Math.max(E.value, .001))) : P();
 		}
+		let B = !1, V = !1, H = 0, U = 0, W = null;
 		function G(e) {
-			if (R) {
-				R = !1;
+			e.button === 0 && (B = !0, V = !1, H = e.clientX, U = e.clientY, W = e.target, y.value?.setPointerCapture(e.pointerId));
+		}
+		function K(e) {
+			if (!B) return;
+			let t = e.clientX - H, n = e.clientY - U;
+			!V && Math.abs(t) + Math.abs(n) > 3 && (V = !0), H = e.clientX, U = e.clientY, w.value += t, T.value += n, N(!1);
+		}
+		function q(e) {
+			if (B) {
+				B = !1;
 				try {
-					_.value?.releasePointerCapture(e.pointerId);
+					y.value?.releasePointerCapture(e.pointerId);
 				} catch {}
-				!z && H !== v.value && g("emptyClick");
+				!V && W !== b.value && v("emptyClick");
 			}
 		}
-		function K() {
-			let e = v.value;
-			e && (y.value = e.naturalWidth || 1, b.value = e.naturalHeight || 1, M(), T.value = !0);
-		}
-		let q = null;
 		function J() {
-			T.value && M();
+			let e = b.value;
+			e && (x.value = e.naturalWidth || 1, S.value = e.naturalHeight || 1, P(), D.value = !0);
+		}
+		let Y = null;
+		function X() {
+			D.value && P();
 		}
-		return u(() => h.src, () => {
-			T.value = !1, y.value = 0, b.value = 0, x.value = 1, S.value = 0, C.value = 0, w.value = 1, D();
+		return d(() => _.src, () => {
+			D.value = !1, x.value = 0, S.value = 0, C.value = 1, w.value = 0, T.value = 0, E.value = 1, k();
 		}), o(() => {
-			typeof ResizeObserver < "u" && _.value && (q = new ResizeObserver(J), q.observe(_.value));
-		}), a(() => q?.disconnect()), p({
-			zoomIn: () => F(1.2),
-			zoomOut: () => F(1 / 1.2),
-			fit: () => M()
+			typeof ResizeObserver < "u" && y.value && (Y = new ResizeObserver(X), Y.observe(y.value));
+		}), a(() => Y?.disconnect()), h({
+			zoomIn: () => L(1.2),
+			zoomOut: () => L(1 / 1.2),
+			fit: () => P()
 		}), (a, o) => (s(), e("div", {
 			ref_key: "stageEl",
-			ref: _,
-			class: r(["zi", { "zi--grab": x.value > w.value }]),
-			onWheel: d(I, ["prevent"]),
-			onPointerdown: U,
-			onPointermove: W,
-			onPointerup: G,
-			onPointercancel: G,
-			onDblclick: L
+			ref: y,
+			class: r(["zi", { "zi--grab": C.value > E.value }]),
+			onWheel: f(R, ["prevent"]),
+			onPointerdown: G,
+			onPointermove: K,
+			onPointerup: q,
+			onPointercancel: q,
+			onDblclick: z
 		}, [t("img", {
 			ref_key: "imgEl",
-			ref: v,
-			class: r(["zi__img", { "zi__img--ready": T.value }]),
+			ref: b,
+			class: r(["zi__img", { "zi__img--ready": D.value }]),
 			src: n.src,
 			alt: n.alt,
 			draggable: "false",
-			style: i({ transform: `translate(${S.value}px, ${C.value}px) scale(${x.value})` }),
-			onLoad: K,
-			onDragstart: o[0] ||= d(() => {}, ["prevent"])
-		}, null, 46, f), t("div", {
+			style: i({ transform: `translate(${w.value}px, ${T.value}px) scale(${C.value})` }),
+			onLoad: J,
+			onDragstart: o[0] ||= f(() => {}, ["prevent"])
+		}, null, 46, p), t("div", {
 			class: "zi__toolbar",
-			onPointerdown: o[4] ||= d(() => {}, ["stop"]),
-			onDblclick: o[5] ||= d(() => {}, ["stop"]),
-			onWheel: o[6] ||= d(() => {}, ["stop"])
+			onPointerdown: o[4] ||= f(() => {}, ["stop"]),
+			onDblclick: o[5] ||= f(() => {}, ["stop"]),
+			onWheel: o[6] ||= f(() => {}, ["stop"])
 		}, [
 			t("button", {
 				type: "button",
 				class: "zi__tool",
 				title: "缩小 (-)",
-				onClick: o[1] ||= (e) => F(1 / 1.2)
+				onClick: o[1] ||= (e) => L(1 / 1.2)
 			}, " − "),
 			t("button", {
 				type: "button",
 				class: "zi__pct",
 				title: "适应窗口 (0)",
-				onClick: o[2] ||= (e) => M()
-			}, l(E.value) + "% ", 1),
+				onClick: o[2] ||= (e) => P()
+			}, l(O.value) + "% ", 1),
 			t("button", {
 				type: "button",
 				class: "zi__tool",
 				title: "放大 (+)",
-				onClick: o[3] ||= (e) => F(1.2)
+				onClick: o[3] ||= (e) => L(1.2)
 			}, "+")
 		], 32)], 34));
 	}
 });
 //#endregion
-export { p as default };
+export { h as default };
 
 //# sourceMappingURL=ZoomImage.vue_vue_type_script_setup_true_lang.js.map