mirador/dist/GalleryView-D4GEjZKP.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-DPoFra9X.js";
import { At as o, I as s, c, mt as l, s as u } from "./canvases-xKdr7cbX.js";
import { O as d, h as f, s as p } from "./FailedImageContext-BPhlsq3Z.js";
import { l as m } from "./window-QrrPJPF0.js";
import { n as h, t as g } from "./css-ns-CcpadD-C.js";
import { n as _, r as v, s as y, t as b } from "./CommentSharp-DboCbTHD.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(t(), 1), A = 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"
})), j = D("div", {
	name: "GalleryView",
	slot: "chipArea"
})(({ theme: e }) => ({
	display: "flex",
	flexDirection: "column",
	gap: e.spacing(.25),
	position: "absolute",
	right: 0,
	top: 0
})), M = D(O, {
	name: "GalleryView",
	slot: "chip"
})(({ theme: e }) => ({
	backgroundColor: e.palette.annotations.chipBackground,
	opacity: .875,
	textAlign: "right"
}));
function N({ 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(A, {
			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(j, { children: [o > 0 && /* @__PURE__ */ w(M, {
					icon: /* @__PURE__ */ w(_, { fontSize: "small" }),
					label: o,
					size: "small"
				}), i > 0 && /* @__PURE__ */ w(M, {
					icon: /* @__PURE__ */ w(b, { fontSize: "small" }),
					label: i,
					size: "small"
				})] })
			})
		}, e.id || e.index)
	});
}
N.propTypes = {
	annotationsCount: k.default.number,
	canvas: k.default.object.isRequired,
	config: k.default.shape({
		height: k.default.number,
		width: k.default.number
	}),
	focusOnCanvas: k.default.func.isRequired,
	requestCanvasAnnotations: k.default.func,
	searchAnnotationsCount: k.default.number,
	selected: k.default.bool,
	setCanvas: k.default.func.isRequired
};
var P = e(a((e, { canvas: t, windowId: n }) => {
	let r = c(e, { windowId: n }), i = f(e, { windowId: n }).flatMap((e) => e.resources).filter((e) => e.targetId === t.id), a = o(e, {
		content: "annotations",
		windowId: n
	}).length > 0;
	return {
		annotationsCount: (() => {
			if (a) return d(e, { canvasId: t.id }).reduce((e, n) => e + n.resources.filter((e) => e.targetId === t.id).length, 0);
		})(),
		config: l(e).galleryView,
		searchAnnotationsCount: i.length,
		selected: r && r.id === t.id
	};
}, (e, { canvas: t, id: n, windowId: r }) => ({
	focusOnCanvas: () => e(m(r, "single")),
	requestCanvasAnnotations: () => e(p(r, t.id)),
	setCanvas: (...t) => e(h(r, ...t))
})))(N), F = D(E, {
	name: "GalleryView",
	slot: "root"
})(({ theme: e }) => ({
	alignItems: "flex-start",
	alignContent: "flex-start",
	display: "flex",
	flexDirection: "row",
	flexWrap: "wrap",
	overflowX: "hidden",
	overflowY: "scroll",
	padding: "50px 0 50px 20px",
	width: "100%"
}));
function I({ canvases: e, viewingDirection: t = "", windowId: n }) {
	return /* @__PURE__ */ w(F, {
		component: "section",
		"aria-label": "gallery section",
		dir: t === "right-to-left" ? "rtl" : "ltr",
		square: !0,
		elevation: 0,
		id: `${n}-gallery`,
		className: g("gallery-view"),
		children: e.map((e) => /* @__PURE__ */ w(P, {
			windowId: n,
			canvas: e
		}, e.id))
	});
}
I.propTypes = {
	canvases: k.default.array.isRequired,
	viewingDirection: k.default.string,
	windowId: k.default.string.isRequired
};
//#endregion
//#region src/containers/GalleryView.js
var L = /* @__PURE__ */ n({ default: () => R }), R = e(a((e, { windowId: t }) => ({
	canvases: u(e, { windowId: t }),
	viewingDirection: s(e, { windowId: t })
})), i("GalleryView"))(I);
//#endregion
export { N as a, P as i, L as n, I as r, R as t };

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