@file-viewer/vue3 2.2.6 → 2.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/fit.js +498 -1
- package/dist/components/image.js +174 -1
- package/dist/components/messages.js +1430 -1
- package/dist/components/print-mask.js +213 -1
- package/dist/components/printMask.js +66 -1
- package/dist/index.mjs +5728 -1
- package/package.json +2 -2
package/dist/components/image.js
CHANGED
|
@@ -1 +1,174 @@
|
|
|
1
|
-
|
|
1
|
+
import { i as e, t } from "./messages.js";
|
|
2
|
+
import { d as n, i as r, p as i, r as a } from "./fit.js";
|
|
3
|
+
//#region ../../core/dist/renderers/image.js
|
|
4
|
+
var o = {
|
|
5
|
+
avif: "image/avif",
|
|
6
|
+
bmp: "image/bmp",
|
|
7
|
+
gif: "image/gif",
|
|
8
|
+
heic: "image/heic",
|
|
9
|
+
heif: "image/heif",
|
|
10
|
+
ico: "image/x-icon",
|
|
11
|
+
jxl: "image/jxl",
|
|
12
|
+
jpg: "image/jpeg",
|
|
13
|
+
jpeg: "image/jpeg",
|
|
14
|
+
png: "image/png",
|
|
15
|
+
svg: "image/svg+xml",
|
|
16
|
+
tif: "image/tiff",
|
|
17
|
+
tiff: "image/tiff",
|
|
18
|
+
webp: "image/webp"
|
|
19
|
+
}, s = "\n.image-viewer{position:relative;width:100%;height:100%;overflow:auto;background:var(--file-viewer-render-surface-background,#eef1f4);box-sizing:border-box}\n.image-stage{min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}\n.image-stage img{display:block;width:auto;max-width:none;margin:0 auto;border:0;box-shadow:0 18px 48px rgba(15,23,42,.16);background:#fff;cursor:zoom-in}\n.image-stage img:focus-visible{outline:3px solid #2563eb;outline-offset:4px}\n.image-lightbox{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(15,23,42,.9);box-sizing:border-box;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s linear .18s}\n.image-lightbox[data-open='true']{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}\n.image-lightbox img{display:block;max-width:100%;max-height:100%;object-fit:contain;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.4);cursor:default;transform:scale(.985);transition:transform .18s ease}\n.image-lightbox[data-open='true'] img{transform:scale(1)}\n.image-lightbox button{position:absolute;top:16px;right:16px;display:grid;width:40px;height:40px;place-items:center;padding:0;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(255,255,255,.96);color:#172033;font:400 27px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.24);transition:background-color .14s ease,transform .14s ease}\n.image-lightbox button:hover{background:#fff;transform:scale(1.04)}\n.image-lightbox button:focus-visible{outline:3px solid #60a5fa;outline-offset:2px}\n[data-viewer-theme='dark'] .image-viewer{background:var(--file-viewer-render-surface-background,#101820)}\n@media (prefers-color-scheme:dark){[data-viewer-theme='system'] .image-viewer{background:var(--file-viewer-render-surface-background,#101820)}}\n@media (max-width:767px){.image-stage{padding:12px}.image-lightbox{padding:16px}.image-lightbox button{top:12px;right:12px}}\n@media (prefers-reduced-motion:reduce){.image-lightbox,.image-lightbox img,.image-lightbox button{transition:none}}\n", c = (e) => {
|
|
20
|
+
let t = e.createElement("style");
|
|
21
|
+
return t.textContent = s, t;
|
|
22
|
+
}, l = (e) => o[(e || "").trim().toLowerCase()] || "image/*", u = function() {
|
|
23
|
+
var t = e(function* (e) {
|
|
24
|
+
return yield new Promise((t, n) => {
|
|
25
|
+
let r = new FileReader();
|
|
26
|
+
r.onload = (e) => {
|
|
27
|
+
var r;
|
|
28
|
+
let i = (r = e.target) == null ? void 0 : r.result;
|
|
29
|
+
if (typeof i == "string") {
|
|
30
|
+
t(i);
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
n(/* @__PURE__ */ Error("Unable to read image data URL."));
|
|
34
|
+
}, r.onerror = () => n(r.error || /* @__PURE__ */ Error("Unable to read image data URL.")), r.readAsDataURL(e);
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
return function(e) {
|
|
38
|
+
return t.apply(this, arguments);
|
|
39
|
+
};
|
|
40
|
+
}(), d = function() {
|
|
41
|
+
var t = e(function* (e, t) {
|
|
42
|
+
let n = (t || "").trim().toLowerCase();
|
|
43
|
+
if (n === "heic" || n === "heif") throw Error("HEIC/HEIF image conversion has moved out of @file-viewer/core. Install and pass @file-viewer/renderer-image, or use @file-viewer/preset-all.");
|
|
44
|
+
return u(new Blob([e], { type: l(n) }));
|
|
45
|
+
});
|
|
46
|
+
return function(e, n) {
|
|
47
|
+
return t.apply(this, arguments);
|
|
48
|
+
};
|
|
49
|
+
}(), f = (e) => Number(e.toFixed(3)), p = (e, t, n) => {
|
|
50
|
+
let r = e.createElement("div");
|
|
51
|
+
r.className = "image-lightbox", r.dataset.open = "false", r.setAttribute("role", "dialog"), r.setAttribute("aria-modal", "true"), r.setAttribute("aria-hidden", "true");
|
|
52
|
+
let i = e.createElement("img");
|
|
53
|
+
i.alt = n("image.lightbox.alt"), i.src = t;
|
|
54
|
+
let a = e.createElement("button");
|
|
55
|
+
a.type = "button", a.setAttribute("aria-label", n("image.lightbox.close")), a.textContent = "×";
|
|
56
|
+
let o = null, s = () => {
|
|
57
|
+
r.dataset.open === "true" && (r.dataset.open = "false", r.setAttribute("aria-hidden", "true"), o != null && o.isConnected && o.focus({ preventScroll: !0 }), o = null);
|
|
58
|
+
}, c = (e) => {
|
|
59
|
+
e.key === "Escape" && r.dataset.open === "true" && (e.preventDefault(), s());
|
|
60
|
+
};
|
|
61
|
+
return a.addEventListener("click", s), r.addEventListener("click", (e) => {
|
|
62
|
+
e.target === r && s();
|
|
63
|
+
}), e.addEventListener("keydown", c), r.append(i, a), {
|
|
64
|
+
element: r,
|
|
65
|
+
open(t) {
|
|
66
|
+
o = t || (e.activeElement instanceof HTMLElement ? e.activeElement : null), r.dataset.open = "true", r.setAttribute("aria-hidden", "false"), a.focus({ preventScroll: !0 });
|
|
67
|
+
},
|
|
68
|
+
destroy() {
|
|
69
|
+
a.removeEventListener("click", s), e.removeEventListener("keydown", c), r.remove();
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
function m(e, t, n, r) {
|
|
74
|
+
return h.apply(this, arguments);
|
|
75
|
+
}
|
|
76
|
+
function h() {
|
|
77
|
+
return h = e(function* (e, o, s, u) {
|
|
78
|
+
var m, h;
|
|
79
|
+
let g = t(u == null ? void 0 : u.options), _ = o.ownerDocument || document, v = yield d(e, s);
|
|
80
|
+
(m = u == null ? void 0 : u.registerThumbnailAdapter) == null || m.call(u, { capture: () => new Blob([e], { type: l(s) }) });
|
|
81
|
+
let y = 1, b = 1, x = 1, S = 0, C = r(), w = _.createElement("div");
|
|
82
|
+
w.className = "image-viewer", w.dataset.viewerZoomProvider = "image";
|
|
83
|
+
let T = _.createElement("div");
|
|
84
|
+
T.className = "image-stage";
|
|
85
|
+
let E = _.createElement("img");
|
|
86
|
+
E.alt = g("image.alt"), E.src = v, E.tabIndex = 0, E.setAttribute("role", "button"), E.setAttribute("aria-haspopup", "dialog"), T.append(E), w.append(T);
|
|
87
|
+
let D = p(_, v, g), O = () => D.open(E), k = (e) => {
|
|
88
|
+
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), D.open(E));
|
|
89
|
+
};
|
|
90
|
+
E.addEventListener("click", O), E.addEventListener("keydown", k);
|
|
91
|
+
let A = () => Math.min(.1, b || .1), j = (e) => {
|
|
92
|
+
let t = A();
|
|
93
|
+
return Math.min(5, Math.max(t, f(e)));
|
|
94
|
+
}, M = () => {
|
|
95
|
+
let e = E.naturalWidth || 0, t = E.naturalHeight || 0;
|
|
96
|
+
if (!e || !t) return 1;
|
|
97
|
+
let n = Math.max((w.clientWidth || 0) - 48, 1), r = Math.max((w.clientHeight || S || 0) - 48, 1);
|
|
98
|
+
return Math.min(1, n / e, r / t);
|
|
99
|
+
}, N = () => {
|
|
100
|
+
if (b = M(), x = j(b * y), E.naturalWidth && E.naturalHeight) {
|
|
101
|
+
E.style.width = `${Math.max(1, Math.round(E.naturalWidth * x))}px`, E.style.height = `${Math.max(1, Math.round(E.naturalHeight * x))}px`;
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
E.style.width = "auto", E.style.height = S > 0 ? `${Math.max(1, Math.round(S * y))}px` : `${y * 100}%`;
|
|
105
|
+
}, P = () => {
|
|
106
|
+
S = w.clientHeight || 0, N(), C.emit();
|
|
107
|
+
}, F = new ResizeObserver(P);
|
|
108
|
+
F.observe(w), E.addEventListener("load", P);
|
|
109
|
+
let I = () => ({
|
|
110
|
+
scale: x,
|
|
111
|
+
label: `${Math.round(x * 100)}%`,
|
|
112
|
+
canZoomIn: x < 5,
|
|
113
|
+
canZoomOut: x > A(),
|
|
114
|
+
canReset: Math.abs(y - 1) > .001,
|
|
115
|
+
minScale: A(),
|
|
116
|
+
maxScale: 5
|
|
117
|
+
}), L = (e) => (y = j(e) / Math.max(b, .001), N(), C.emit(), I());
|
|
118
|
+
return n(w, {
|
|
119
|
+
zoomIn: () => L(x + .15),
|
|
120
|
+
zoomOut: () => L(x - .15),
|
|
121
|
+
resetZoom: () => (y = 1, N(), C.emit(), I()),
|
|
122
|
+
setZoom: L,
|
|
123
|
+
fit: (e) => {
|
|
124
|
+
var t, n;
|
|
125
|
+
let r = E.naturalWidth || 0, i = E.naturalHeight || 0;
|
|
126
|
+
if (!r || !i) return {
|
|
127
|
+
applied: !1,
|
|
128
|
+
mode: e.mode,
|
|
129
|
+
resize: e.resize,
|
|
130
|
+
source: e.source,
|
|
131
|
+
reason: "image-not-ready",
|
|
132
|
+
provider: "zoom"
|
|
133
|
+
};
|
|
134
|
+
let o = a({
|
|
135
|
+
mode: e.mode === "auto" ? "scale-down" : e.mode,
|
|
136
|
+
viewportWidth: Math.max(1, e.viewportWidth || w.clientWidth || 0),
|
|
137
|
+
viewportHeight: Math.max(1, e.viewportHeight || w.clientHeight || S || 0),
|
|
138
|
+
contentWidth: r,
|
|
139
|
+
contentHeight: i,
|
|
140
|
+
currentScale: x,
|
|
141
|
+
minScale: (t = e.minScale) == null ? A() : t,
|
|
142
|
+
maxScale: (n = e.maxScale) == null ? 5 : n
|
|
143
|
+
});
|
|
144
|
+
if (!o) return {
|
|
145
|
+
applied: !1,
|
|
146
|
+
mode: e.mode,
|
|
147
|
+
resize: e.resize,
|
|
148
|
+
source: e.source,
|
|
149
|
+
reason: "unmeasurable",
|
|
150
|
+
provider: "zoom"
|
|
151
|
+
};
|
|
152
|
+
let s = L(o);
|
|
153
|
+
return {
|
|
154
|
+
applied: !0,
|
|
155
|
+
mode: e.mode,
|
|
156
|
+
resize: e.resize,
|
|
157
|
+
scale: s.scale,
|
|
158
|
+
source: e.source,
|
|
159
|
+
provider: "zoom"
|
|
160
|
+
};
|
|
161
|
+
},
|
|
162
|
+
getState: I,
|
|
163
|
+
subscribe: C.subscribe
|
|
164
|
+
}), o.replaceChildren(c(_), w), (((h = u == null ? void 0 : u.surface) == null ? void 0 : h.shadowRoot) || o).append(D.element), P(), {
|
|
165
|
+
$el: o,
|
|
166
|
+
unmount() {
|
|
167
|
+
var e;
|
|
168
|
+
(e = u == null ? void 0 : u.registerThumbnailAdapter) == null || e.call(u, null), i(w), F.disconnect(), E.removeEventListener("load", P), E.removeEventListener("click", O), E.removeEventListener("keydown", k), D.destroy(), o.replaceChildren();
|
|
169
|
+
}
|
|
170
|
+
};
|
|
171
|
+
}), h.apply(this, arguments);
|
|
172
|
+
}
|
|
173
|
+
//#endregion
|
|
174
|
+
export { m as default };
|