mirador/dist/GalleryView-BtSE8_Gf.js

An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.

import { U as e, at as t, dt as n, ft as r, g as i, st as a } from "./getters-B4oepJRC.js";
import { At as o, I as s, Ut as c, c as l, mt as u, s as d } from "./canvases-CeUwRIFA.js";
import { O as f, h as p, s as m } from "./FailedImageContext-CwSMbPf_.js";
import { l as h } from "./window-COQOIAli.js";
import { t as g } from "./canvas-DYtXsw9j.js";
import { n as _, r as v, s as y, t as b } from "./CommentSharp-D3pMyMsr.js";
import { useEffect as x, useRef as S, useState as C } from "react";
import { jsx as w, jsxs as T } from "react/jsx-runtime";
import E from "@mui/material/Paper";
import { styled as D } from "@mui/material/styles";
import O from "@mui/material/Chip";
//#region src/components/GalleryViewThumbnail.jsx
var k = /* @__PURE__ */ r(c(), 1), A = /* @__PURE__ */ r(t(), 1), j = D("div", {
	name: "GalleryView",
	slot: "thumbnail"
})(({ ownerState: e, theme: t }) => ({
	"&:focus": { outline: "none" },
	"&:hover": { backgroundColor: t.palette.action.hover },
	border: "2px solid transparent",
	...e.selected && { borderColor: t.palette.primary.main },
	...!e.selected && e.searchAnnotationsCount > 0 && { borderColor: t.palette.action.selected },
	cursor: "pointer",
	display: "inline-block",
	margin: t.spacing(1, .5),
	maxHeight: e.config.height + 45,
	minWidth: "60px",
	overflow: "hidden",
	padding: t.spacing(.5),
	position: "relative",
	width: "min-content"
})), M = D("div", {
	name: "GalleryView",
	slot: "chipArea"
})(({ theme: e }) => ({
	display: "flex",
	flexDirection: "column",
	gap: e.spacing(.25),
	position: "absolute",
	right: 0,
	top: 0
})), N = D(O, {
	name: "GalleryView",
	slot: "chip"
})(({ theme: e }) => ({
	backgroundColor: e.palette.annotations.chipBackground,
	opacity: .875,
	textAlign: "right"
}));
function P({ canvas: e, selected: t = !1, setCanvas: n, focusOnCanvas: r, annotationsCount: i = void 0, requestCanvasAnnotations: a = () => {}, searchAnnotationsCount: o = 0, config: s = {
	height: 100,
	width: null
} }) {
	let c = S(), [l, u] = C(!1);
	return x(() => {
		t && c.current?.scrollIntoView({ block: "nearest" });
	}, [t]), /* @__PURE__ */ w(y, {
		onChange: (e, { isIntersecting: t }) => {
			!t || i === void 0 || i > 0 || l || (u(!0), a());
		},
		children: /* @__PURE__ */ w(j, {
			ownerState: {
				annotationsCount: i,
				canvas: e,
				config: s,
				searchAnnotationsCount: o,
				selected: t
			},
			className: t ? "selected" : "",
			onClick: () => {
				t ? r() : n(e.id);
			},
			onKeyUp: (t) => {
				let i = {
					enter: "Enter",
					space: " "
				}, a = {
					enter: 13,
					space: 32
				};
				t.key === i.enter || t.which === a.enter || t.key === i.space || t.which === a.space ? r() : n(e.id);
			},
			ref: c,
			role: "button",
			tabIndex: 0,
			children: /* @__PURE__ */ w(v, {
				resource: e,
				labelled: !0,
				variant: "outside",
				maxHeight: s.height,
				maxWidth: s.width,
				children: /* @__PURE__ */ T(M, { children: [o > 0 && /* @__PURE__ */ w(N, {
					icon: /* @__PURE__ */ w(_, { fontSize: "small" }),
					label: o,
					size: "small"
				}), i > 0 && /* @__PURE__ */ w(N, {
					icon: /* @__PURE__ */ w(b, { fontSize: "small" }),
					label: i,
					size: "small"
				})] })
			})
		}, e.id || e.index)
	});
}
P.propTypes = {
	annotationsCount: A.default.number,
	canvas: A.default.object.isRequired,
	config: A.default.shape({
		height: A.default.number,
		width: A.default.number
	}),
	focusOnCanvas: A.default.func.isRequired,
	requestCanvasAnnotations: A.default.func,
	searchAnnotationsCount: A.default.number,
	selected: A.default.bool,
	setCanvas: A.default.func.isRequired
};
var F = e(a((e, { canvas: t, windowId: n }) => {
	let r = l(e, { windowId: n }), i = p(e, { windowId: n }), a = (0, k.default)(i.map((e) => e.resources)).filter((e) => e.targetId === t.id), s = o(e, {
		content: "annotations",
		windowId: n
	}).length > 0;
	return {
		annotationsCount: (() => {
			if (s) return f(e, { canvasId: t.id }).reduce((e, n) => e + n.resources.filter((e) => e.targetId === t.id).length, 0);
		})(),
		config: u(e).galleryView,
		searchAnnotationsCount: a.length,
		selected: r && r.id === t.id
	};
}, (e, { canvas: t, id: n, windowId: r }) => ({
	focusOnCanvas: () => e(h(r, "single")),
	requestCanvasAnnotations: () => e(m(r, t.id)),
	setCanvas: (...t) => e(g(r, ...t))
})))(P), I = D(E, {
	name: "GalleryView",
	slot: "root"
})(({ theme: e }) => ({
	alignItems: "flex-start",
	display: "flex",
	flexDirection: "row",
	flexWrap: "wrap",
	overflowX: "hidden",
	overflowY: "scroll",
	padding: "50px 0 50px 20px",
	width: "100%"
}));
function L({ canvases: e, viewingDirection: t = "", windowId: n }) {
	return /* @__PURE__ */ w(I, {
		component: "section",
		"aria-label": "gallery section",
		dir: t === "right-to-left" ? "rtl" : "ltr",
		square: !0,
		elevation: 0,
		id: `${n}-gallery`,
		children: e.map((e) => /* @__PURE__ */ w(F, {
			windowId: n,
			canvas: e
		}, e.id))
	});
}
L.propTypes = {
	canvases: A.default.array.isRequired,
	viewingDirection: A.default.string,
	windowId: A.default.string.isRequired
};
//#endregion
//#region src/containers/GalleryView.js
var R = /* @__PURE__ */ n({ default: () => z }), z = e(a((e, { windowId: t }) => ({
	canvases: d(e, { windowId: t }),
	viewingDirection: s(e, { windowId: t })
})), i("GalleryView"))(L);
//#endregion
export { P as a, F as i, R as n, L as r, z as t };

//# sourceMappingURL=GalleryView-BtSE8_Gf.js.map