mirador
Version:
An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.
322 lines (321 loc) • 10.2 kB
JavaScript
import { U as e, at as t, ct as n, ft as r, g as i, st as a } from "./getters-B4oepJRC.js";
import { B as o, dt as s, mt as c } from "./canvases-CeUwRIFA.js";
import { t as l } from "./FailedImageContext-CwSMbPf_.js";
import { t as u } from "./createSvgIcon-Cwt8YPfm.js";
import * as d from "react";
import { createContext as f, useContext as p, useEffect as m, useMemo as h, useState as g } from "react";
import { jsx as _, jsxs as v } from "react/jsx-runtime";
import { styled as y } from "@mui/material/styles";
//#region src/hooks/useThumbnailService.js
function b(e, t) {
return n((n) => s(n, e, t), [e, t]);
}
//#endregion
//#region node_modules/react-intersection-observer/dist/index.mjs
var x = /* @__PURE__ */ r(t(), 1), S = Object.defineProperty, C = (e, t, n) => t in e ? S(e, t, {
enumerable: !0,
configurable: !0,
writable: !0,
value: n
}) : e[t] = n, w = (e, t, n) => C(e, typeof t == "symbol" ? t : t + "", n), T = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new WeakMap(), D = 0, O;
function k(e) {
return e ? E.has(e) ? E.get(e) : (D += 1, E.set(e, D.toString()), E.get(e)) : "0";
}
function A(e) {
return Object.keys(e).sort().filter((t) => e[t] !== void 0).map((t) => `${t}_${t === "root" ? k(e.root) : e[t]}`).toString();
}
function j(e) {
let t = A(e), n = T.get(t);
if (!n) {
let r = /* @__PURE__ */ new Map(), i, a = new IntersectionObserver((t) => {
t.forEach((t) => {
let n = t.isIntersecting && i.some((e) => t.intersectionRatio >= e);
e.trackVisibility && t.isVisible === void 0 && (t.isVisible = n), [...r.get(t.target) ?? []].forEach((e) => {
e(n, t);
});
});
}, e);
i = a.thresholds || (Array.isArray(e.threshold) ? e.threshold : [e.threshold || 0]), n = {
id: t,
observer: a,
elements: r
}, T.set(t, n);
}
return n;
}
function M(e, t, n = {}, r = O) {
if (window.IntersectionObserver === void 0 && r !== void 0) {
let i = e.getBoundingClientRect();
return t(r, {
isIntersecting: r,
target: e,
intersectionRatio: typeof n.threshold == "number" ? n.threshold : 0,
time: 0,
boundingClientRect: i,
intersectionRect: i,
rootBounds: i
}), () => {};
}
let { id: i, observer: a, elements: o } = j(n), s = o.get(e) || [];
return o.has(e) || o.set(e, s), s.push(t), a.observe(e), function() {
s.splice(s.indexOf(t), 1), s.length === 0 && (o.delete(e), a.unobserve(e)), o.size === 0 && (a.disconnect(), T.delete(i));
};
}
function N(e) {
return typeof e.children != "function";
}
var P = class extends d.Component {
constructor(e) {
super(e), w(this, "node", null), w(this, "_unobserveCb", null), w(this, "lastInView"), w(this, "handleNode", (e) => {
this.node && (this.unobserve(), !e && !this.props.triggerOnce && !this.props.skip && (this.setState({
inView: !!this.props.initialInView,
entry: void 0
}), this.lastInView = this.props.initialInView)), this.node = e || null, this.observeNode();
}), w(this, "handleChange", (e, t) => {
let n = this.lastInView;
this.lastInView = e, !(n === void 0 && !e) && (e && this.props.triggerOnce && this.unobserve(), N(this.props) || this.setState({
inView: e,
entry: t
}), this.props.onChange && this.props.onChange(e, t));
}), this.state = {
inView: !!e.initialInView,
entry: void 0
}, this.lastInView = e.initialInView;
}
componentDidMount() {
this.unobserve(), this.observeNode();
}
componentDidUpdate(e) {
(e.rootMargin !== this.props.rootMargin || e.root !== this.props.root || e.threshold !== this.props.threshold || e.skip !== this.props.skip || e.trackVisibility !== this.props.trackVisibility || e.delay !== this.props.delay) && (this.unobserve(), this.observeNode());
}
componentWillUnmount() {
this.unobserve();
}
observeNode() {
if (!this.node || this.props.skip) return;
let { threshold: e, root: t, rootMargin: n, trackVisibility: r, delay: i, fallbackInView: a } = this.props;
this.lastInView === void 0 && (this.lastInView = this.props.initialInView), this._unobserveCb = M(this.node, this.handleChange, {
threshold: e,
root: t,
rootMargin: n,
trackVisibility: r,
delay: i
}, a);
}
unobserve() {
this._unobserveCb &&= (this._unobserveCb(), null);
}
render() {
let { children: e } = this.props;
if (typeof e == "function") {
let { inView: t, entry: n } = this.state;
return e({
inView: t,
entry: n,
ref: this.handleNode
});
}
let { as: t, triggerOnce: n, threshold: r, root: i, rootMargin: a, onChange: o, skip: s, trackVisibility: c, delay: l, initialInView: u, fallbackInView: f, ...p } = this.props;
return d.createElement(t || "div", {
ref: this.handleNode,
...p
}, e);
}
};
function F({ threshold: e, delay: t, trackVisibility: n, rootMargin: r, root: i, triggerOnce: a, skip: o, initialInView: s, fallbackInView: c, onChange: l } = {}) {
let [u, f] = d.useState(null), p = d.useRef(l), m = d.useRef(s), [h, g] = d.useState({
inView: !!s,
entry: void 0
});
p.current = l, d.useEffect(() => {
if (m.current === void 0 && (m.current = s), o || !u) return;
let l;
return l = M(u, (e, t) => {
let n = m.current;
m.current = e, !(n === void 0 && !e) && (g({
inView: e,
entry: t
}), p.current && p.current(e, t), t.isIntersecting && a && l && (l(), l = void 0));
}, {
root: i,
rootMargin: r,
threshold: e,
trackVisibility: n,
delay: t
}, c), () => {
l && l();
};
}, [
Array.isArray(e) ? e.toString() : e,
u,
i,
r,
a,
o,
n,
c,
t
]);
let _ = h.entry?.target, v = d.useRef(void 0);
!u && _ && !a && !o && v.current !== _ && (v.current = _, g({
inView: !!s,
entry: void 0
}), m.current = s);
let y = [
f,
h.inView,
h.entry
];
return y.ref = y[0], y.inView = y[1], y.entry = y[2], y;
}
("useInsertionEffect" in d ? d.useInsertionEffect : void 0) ?? d.useLayoutEffect ?? d.useEffect;
//#endregion
//#region src/contexts/LocaleContext.js
var I = f();
//#endregion
//#region src/components/IIIFResourceLabel.jsx
function L({ fallback: e, resource: t }) {
let r = p(I), i = n((e) => o(e, {}));
if (!t) return e;
let a = t.getLabel();
return a ? a.getValue(r || i || "") ?? (e || t.id) : e;
}
L.propTypes = {
fallback: x.default.string,
resource: x.default.object.isRequired
};
//#endregion
//#region src/components/IIIFThumbnail.jsx
var R = y("div", {
name: "IIIFThumbnail",
slot: "root"
})({}), z = y("span", {
name: "IIIFThumbnail",
slot: "label"
})(({ theme: e }) => ({ ...e.typography.caption })), B = y("img", {
name: "IIIFThumbnail",
slot: "image"
})(() => ({
height: "auto",
width: "auto"
})), V = ({ border: e = !1, placeholder: t, style: n = {}, thumbnail: r = null, resource: i, maxHeight: a = null, maxWidth: o = null, ...s }) => {
let { ref: c, inView: u } = F(), [d, f] = g(!1), [v, y] = g(!1), x = b(a, o), { notifyFailure: S, fallbackImage: C } = p(l);
m(() => {
d || !u || f(!0);
}, [u, d]);
let w = h(() => {
if (r) return r;
let e = x.get(i);
if (e && e.url) return e;
}, [
i,
r,
x
]), T = h(() => {
let e = {
height: void 0,
maxHeight: void 0,
maxWidth: void 0,
width: void 0
};
if (v && C) return {
...e,
...n,
maxWidth: o,
maxHeight: a,
objectFit: "contain"
};
if (!w) return {
...n,
height: a,
width: o
};
let { height: t, width: r } = w;
if (t && r) {
if (a && t > a || o && r > o) {
let n = r / t;
a && o ? o / a < n ? (e.height = Math.round(o / n), e.width = o) : (e.height = a, e.width = Math.round(a * n)) : a ? (e.height = a, e.maxWidth = Math.round(a * n)) : o && (e.width = o, e.maxHeight = Math.round(o / n));
} else e.width = r, e.height = t;
} else t && !r ? e.height = a : !t && r ? e.width = o : (e.width = o, e.height = a);
return {
...e,
...n
};
}, [
w,
o,
a,
n,
v,
C
]), { url: E = t } = d && (r || w) || {}, D = v ? C || t : E;
return /* @__PURE__ */ _(B, {
ownerState: { border: e },
ref: c,
alt: v ? "Thumbnail image unavailable" : "",
role: v ? void 0 : "presentation",
src: D,
style: T,
onError: () => {
y(!0), D && S(D);
},
...s
});
};
V.propTypes = {
border: x.default.bool,
maxHeight: x.default.number,
maxWidth: x.default.number,
placeholder: x.default.string.isRequired,
resource: x.default.object.isRequired,
style: x.default.object,
thumbnail: x.default.shape({
height: x.default.number,
url: x.default.string.isRequired,
width: x.default.number
})
};
var H = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mMMDQmtBwADgwF/Op8FmAAAAABJRU5ErkJggg==";
function U({ border: e = !1, children: t = null, imagePlaceholder: n = H, label: r = void 0, labelled: i = !1, maxHeight: a = null, maxWidth: o = null, resource: s, style: c = {}, thumbnail: l = null }) {
let u = arguments[0];
return /* @__PURE__ */ v(R, {
ownerState: u,
children: [
/* @__PURE__ */ _(V, {
placeholder: n,
thumbnail: l,
resource: s,
maxHeight: a,
maxWidth: o,
style: c,
border: e
}),
i && /* @__PURE__ */ _(z, {
ownerState: u,
children: r || /* @__PURE__ */ _(L, { resource: s })
}),
t
]
});
}
U.propTypes = {
border: x.default.bool,
children: x.default.node,
imagePlaceholder: x.default.string,
label: x.default.string,
labelled: x.default.bool,
maxHeight: x.default.number,
maxWidth: x.default.number,
resource: x.default.object.isRequired,
style: x.default.object,
thumbnail: x.default.shape({
height: x.default.number,
url: x.default.string.isRequired,
width: x.default.number
}),
variant: x.default.oneOf(["inside", "outside"])
};
var W = e(a((e) => ({ thumbnailsConfig: c(e).thumbnails })), i("IIIFThumbnail"))(U), G = u(/*#__PURE__*/ _("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14" }), "SearchSharp"), K = u(/*#__PURE__*/ _("path", { d: "M21.99 2H2v16h16l4 4zM18 14H6v-2h12zm0-3H6V9h12zm0-3H6V6h12z" }), "CommentSharp");
//#endregion
export { L as a, U as i, G as n, I as o, W as r, P as s, K as t };
//# sourceMappingURL=CommentSharp-D3pMyMsr.js.map