mirador/dist/WindowCanvasNavigationControls-DCJUThcV.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 { G as e, i as t, l as n, lt as r, mt as i, st as a, v as o } from "./getters-H0mV17lW.js";
import { L as s, M as c, a as l, bt as u, c as d, l as f, s as p, u as m } from "./canvases-CWytFm4k.js";
import { a as h, i as ee, r as g, t as _ } from "./css-ns-D71I6kc_.js";
import { r as v, t as y } from "./PluginHook-D2fBf7Jn.js";
import { t as b } from "./createSvgIcon-Cwt8YPfm.js";
import { i as x, n as S, r as C, t as w } from "./visuallyHidden-ClS3et6J.js";
import { t as T } from "./OpenSeadragonViewerContext-9z-1VHqt.js";
import { forwardRef as E, useContext as D } from "react";
import { jsx as O, jsxs as k } from "react/jsx-runtime";
import A from "@mui/material/Paper";
import { useTranslation as j } from "react-i18next";
import { alpha as M, styled as N } from "@mui/material/styles";
import P from "@mui/material/Typography";
import F from "@mui/material/SvgIcon";
import I from "@mui/material/Stack";
import L from "@mui/material/Divider";
//#region node_modules/@mui/icons-material/esm/AddCircleOutlineSharp.js
var R = /* @__PURE__ */ i(a(), 1), z = /* @__PURE__ */ i(v(), 1), B = C(), V = b(/*#__PURE__*/ O("path", { d: "M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" }), "AddCircleOutlineSharp"), H = b(/*#__PURE__*/ O("path", { d: "M7 11v2h10v-2zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" }), "RemoveCircleOutlineSharp");
//#endregion
//#region src/components/icons/RestoreZoomIcon.jsx
function U(e) {
	return /* @__PURE__ */ O(F, {
		...e,
		children: /* @__PURE__ */ k("svg", {
			xmlns: "http://www.w3.org/2000/svg",
			width: "24",
			height: "24",
			viewBox: "0 0 24 24",
			children: [/* @__PURE__ */ O("path", { d: "M6,15H9v3h2V13H6Zm9-6V6H13v5h5V9Z" }), /* @__PURE__ */ O("path", { d: "M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8,8,8,0,0,1-8,8Z" })]
		})
	});
}
//#endregion
//#region src/components/ZoomControls.jsx
var W = N("div")({
	display: "flex",
	flexDirection: "row",
	justifyContent: "center"
});
function G({ windowId: e = "", updateViewport: t = () => {}, viewer: n = {}, zoomToWorld: r }) {
	let { t: i } = j(), { viewport: a } = D(T)?.current || {}, { zoom: o, minZoom: s, maxZoom: c } = a ? {
		maxZoom: a.getMaxZoom(),
		minZoom: a.getMinZoom(),
		zoom: a.zoomSpring.target.value
	} : {}, l = o ?? n?.zoom;
	return /* @__PURE__ */ k(W, { children: [
		/* @__PURE__ */ O(x, {
			"aria-label": i("zoomIn"),
			onClick: () => {
				let n = l * 2;
				t(e, { zoom: c == null ? n : Math.min(n, c) });
			},
			disabled: c != null && l >= c,
			children: /* @__PURE__ */ O(V, {})
		}),
		/* @__PURE__ */ O(x, {
			"aria-label": i("zoomOut"),
			onClick: () => {
				let n = l / 2;
				t(e, { zoom: s == null ? n : Math.max(n, s) });
			},
			disabled: s != null && l <= s,
			children: /* @__PURE__ */ O(H, {})
		}),
		/* @__PURE__ */ O(x, {
			"aria-label": i("zoomReset"),
			onClick: () => r(!1),
			children: /* @__PURE__ */ O(U, {})
		})
	] });
}
G.propTypes = {
	updateViewport: R.default.func,
	viewer: R.default.shape({
		x: R.default.number,
		y: R.default.number,
		zoom: R.default.number
	}),
	windowId: R.default.string,
	zoomToWorld: R.default.func.isRequired
};
var K = e(r((e, { windowId: n }) => ({ viewer: t(e, { windowId: n }) }), { updateViewport: h }), o("ZoomControls"))(G), q = N("div")(({ theme: e }) => ({
	overflow: "hidden",
	boxSizing: "border-box",
	paddingBottom: .5,
	paddingLeft: e.spacing(2),
	paddingRight: e.spacing(2),
	textOverflow: "ellipsis",
	unicodeBidi: "plaintext",
	whiteSpace: "nowrap",
	width: "100%"
}));
function J({ canvasCount: e, canvasIndex: t, canvasLabel: n = void 0 }) {
	let { t: r } = j();
	return /* @__PURE__ */ k(q, {
		className: (0, z.default)(_("osd-info")),
		children: [/* @__PURE__ */ O(P, {
			variant: "caption",
			className: _("canvas-count"),
			role: "status",
			sx: { display: "inline" },
			children: r("pagination", {
				current: t + 1,
				total: e
			})
		}), /* @__PURE__ */ O(P, {
			variant: "caption",
			className: _("canvas-label"),
			role: "status",
			sx: { display: "inline" },
			children: n && ` • ${n}`
		})]
	});
}
J.propTypes = {
	canvasCount: R.default.number.isRequired,
	canvasIndex: R.default.number.isRequired,
	canvasLabel: R.default.string
};
var Y = e(r((e, t) => {
	let { windowId: n } = t, r = p(e, { windowId: n }), i = c(e, { windowId: n }), a = (d(e, { windowId: n }) || {}).id;
	return {
		canvasCount: r.length,
		canvasIndex: i,
		canvasLabel: l(e, {
			canvasId: a,
			windowId: n
		})
	};
}, null), o("ViewerInfo"))(J), X = b(/*#__PURE__*/ O("path", { d: "m10 16.5 6-4.5-6-4.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" }), "PlayCircleOutlineSharp");
//#endregion
//#region src/components/ViewerNavigation.jsx
function Z({ hasNextCanvas: e = !1, hasPreviousCanvas: t = !1, setNextCanvas: n = () => {}, setPreviousCanvas: r = () => {}, viewingDirection: i = "" }) {
	let { t: a } = j(), o = "ltr", s, c;
	switch (i) {
		case "top-to-bottom":
			s = { transform: "rotate(270deg)" }, c = { transform: "rotate(90deg)" };
			break;
		case "bottom-to-top":
			s = { transform: "rotate(90deg)" }, c = { transform: "rotate(270deg)" };
			break;
		case "right-to-left":
			o = "rtl", s = {}, c = { transform: "rotate(180deg)" };
			break;
		default: s = { transform: "rotate(180deg)" }, c = {};
	}
	return /* @__PURE__ */ k("div", {
		className: (0, z.default)(_("osd-navigation")),
		dir: o,
		children: [/* @__PURE__ */ O(x, {
			"aria-label": a("previousCanvas"),
			className: _("previous-canvas-button"),
			disabled: !t,
			onClick: () => {
				t && r();
			},
			children: /* @__PURE__ */ O(X, { style: s })
		}), /* @__PURE__ */ O(x, {
			"aria-label": a("nextCanvas"),
			className: _("next-canvas-button"),
			disabled: !e,
			onClick: () => {
				e && n();
			},
			children: /* @__PURE__ */ O(X, { style: c })
		})]
	});
}
Z.propTypes = {
	hasNextCanvas: R.default.bool,
	hasPreviousCanvas: R.default.bool,
	setNextCanvas: R.default.func,
	setPreviousCanvas: R.default.func,
	viewingDirection: R.default.string
};
var Q = e(r((e, { windowId: t }) => ({
	hasNextCanvas: !!f(e, { windowId: t }),
	hasPreviousCanvas: !!m(e, { windowId: t }),
	viewingDirection: s(e, { windowId: t })
}), (e, { windowId: t }) => ({
	setNextCanvas: (...n) => e(g(t)),
	setPreviousCanvas: (...n) => e(ee(t))
})), o("ViewerNavigation"))(Z), te = N(A, {
	name: "WindowCanvasNavigationControls",
	slot: "root"
})(({ theme: e }) => ({
	alignItems: "center",
	backgroundColor: M(e.palette.background.paper, .5),
	bottom: 0,
	cursor: "default",
	display: "flex",
	flexDirection: "column",
	flexWrap: "wrap",
	justifyContent: "center",
	position: "absolute",
	textAlign: "center",
	width: "100%",
	zIndex: 50
})), $ = E(({ showZoomControls: e = !1, visible: t = !0, windowId: n, zoomToWorld: r, ...i }, a) => {
	let [o, s] = (0, B.useElementSize)(), c = {
		showZoomControls: e,
		size: s,
		visible: t,
		windowId: n,
		...i
	}, l = s && s.width && s.width <= 253;
	return t ? /* @__PURE__ */ k(te, {
		square: !0,
		className: (0, z.default)(_("canvas-nav"), l ? _("canvas-nav-stacked") : null),
		elevation: 0,
		ref: S(a, o),
		children: [
			/* @__PURE__ */ k(I, {
				direction: l ? "column" : "row",
				divider: /* @__PURE__ */ O(L, {
					orientation: l ? "horizontal" : "vertical",
					variant: "middle",
					flexItem: !0
				}),
				spacing: 0,
				children: [/* @__PURE__ */ O(Q, { windowId: n }), e && /* @__PURE__ */ O(K, {
					windowId: n,
					zoomToWorld: r
				})]
			}),
			/* @__PURE__ */ O(Y, { windowId: n }),
			/* @__PURE__ */ O(y, {
				targetName: "WindowCanvasNavigationControls",
				...c
			})
		]
	}) : /* @__PURE__ */ O(P, {
		style: w,
		component: "div",
		children: /* @__PURE__ */ O(Y, { windowId: n })
	});
});
$.propTypes = {
	showZoomControls: R.default.bool,
	visible: R.default.bool,
	windowId: R.default.string.isRequired,
	zoomToWorld: R.default.func.isRequired
}, $.displayName = "WindowCanvasNavigationControls";
var ne = e(r((e, { windowId: t }) => ({
	showZoomControls: u(e),
	visible: n(e).focusedWindowId === t
})), o("WindowCanvasNavigationControls"))($);
//#endregion
export { Y as a, G as c, Z as i, U as l, $ as n, J as o, Q as r, K as s, ne as t };

//# sourceMappingURL=WindowCanvasNavigationControls-DCJUThcV.js.map