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.
239 lines (238 loc) • 7.94 kB
JavaScript
import { U as e, at as t, ft as n, g as r, i, l as a, st as o } from "./getters-B4oepJRC.js";
import { I as s, M as c, a as l, c as u, l as d, s as f, u as p, yt as m } from "./canvases-CeUwRIFA.js";
import { i as h, n as g, r as _ } from "./canvas-DYtXsw9j.js";
import { i as v, r as y, t as b } from "./PluginHook-CsLe05K9.js";
import { t as x } from "./createSvgIcon-Cwt8YPfm.js";
import { i as S, n as C, r as w, t as T } from "./visuallyHidden-D8sxji69.js";
import { forwardRef as E } from "react";
import { jsx as D, jsxs as O } from "react/jsx-runtime";
import k from "@mui/material/Paper";
import { useTranslation as A } from "react-i18next";
import { alpha as j, styled as M } from "@mui/material/styles";
import N from "@mui/material/Typography";
import P from "@mui/material/SvgIcon";
import F from "@mui/material/Stack";
import I from "@mui/material/Divider";
//#region node_modules/@mui/icons-material/esm/AddCircleOutlineSharp.js
var L = /* @__PURE__ */ n(t(), 1), R = /* @__PURE__ */ n(v(), 1), z = w(), B = x(/*#__PURE__*/ D("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"), V = x(/*#__PURE__*/ D("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 H(e) {
return /* @__PURE__ */ D(P, {
...e,
children: /* @__PURE__ */ O("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: [/* @__PURE__ */ D("path", { d: "M6,15H9v3h2V13H6Zm9-6V6H13v5h5V9Z" }), /* @__PURE__ */ D("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 U = M("div")({
display: "flex",
flexDirection: "row",
justifyContent: "center"
});
function W({ windowId: e = "", updateViewport: t = () => {}, viewer: n = {}, zoomToWorld: r }) {
let { t: i } = A();
return /* @__PURE__ */ O(U, { children: [
/* @__PURE__ */ D(S, {
"aria-label": i("zoomIn"),
onClick: () => {
t(e, { zoom: n.zoom * 2 });
},
children: /* @__PURE__ */ D(B, {})
}),
/* @__PURE__ */ D(S, {
"aria-label": i("zoomOut"),
onClick: () => {
t(e, { zoom: n.zoom / 2 });
},
children: /* @__PURE__ */ D(V, {})
}),
/* @__PURE__ */ D(S, {
"aria-label": i("zoomReset"),
onClick: () => r(!1),
children: /* @__PURE__ */ D(H, {})
})
] });
}
W.propTypes = {
updateViewport: L.default.func,
viewer: L.default.shape({
x: L.default.number,
y: L.default.number,
zoom: L.default.number
}),
windowId: L.default.string,
zoomToWorld: L.default.func.isRequired
};
var G = e(o((e, { windowId: t }) => ({ viewer: i(e, { windowId: t }) }), { updateViewport: h }), r("ZoomControls"))(W), K = M("div")(() => ({
overflow: "hidden",
paddingBottom: .5,
textOverflow: "ellipsis",
unicodeBidi: "plaintext",
whiteSpace: "nowrap",
width: "100%"
}));
function q({ canvasCount: e, canvasIndex: t, canvasLabel: n = void 0 }) {
let { t: r } = A();
return /* @__PURE__ */ O(K, {
className: (0, R.default)(y("osd-info")),
children: [/* @__PURE__ */ D(N, {
display: "inline",
variant: "caption",
className: y("canvas-count"),
role: "status",
children: r("pagination", {
current: t + 1,
total: e
})
}), /* @__PURE__ */ D(N, {
display: "inline",
variant: "caption",
className: y("canvas-label"),
role: "status",
children: n && ` • ${n}`
})]
});
}
q.propTypes = {
canvasCount: L.default.number.isRequired,
canvasIndex: L.default.number.isRequired,
canvasLabel: L.default.string
};
var J = e(o((e, t) => {
let { windowId: n } = t, r = f(e, { windowId: n }), i = c(e, { windowId: n }), a = (u(e, { windowId: n }) || {}).id;
return {
canvasCount: r.length,
canvasIndex: i,
canvasLabel: l(e, {
canvasId: a,
windowId: n
})
};
}, null), r("ViewerInfo"))(q), Y = x(/*#__PURE__*/ D("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 X({ hasNextCanvas: e = !1, hasPreviousCanvas: t = !1, setNextCanvas: n = () => {}, setPreviousCanvas: r = () => {}, viewingDirection: i = "" }) {
let { t: a } = A(), 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__ */ O("div", {
className: (0, R.default)(y("osd-navigation")),
dir: o,
children: [/* @__PURE__ */ D(S, {
"aria-label": a("previousCanvas"),
className: y("previous-canvas-button"),
disabled: !t,
onClick: () => {
t && r();
},
children: /* @__PURE__ */ D(Y, { style: s })
}), /* @__PURE__ */ D(S, {
"aria-label": a("nextCanvas"),
className: y("next-canvas-button"),
disabled: !e,
onClick: () => {
e && n();
},
children: /* @__PURE__ */ D(Y, { style: c })
})]
});
}
X.propTypes = {
hasNextCanvas: L.default.bool,
hasPreviousCanvas: L.default.bool,
setNextCanvas: L.default.func,
setPreviousCanvas: L.default.func,
viewingDirection: L.default.string
};
var Z = e(o((e, { windowId: t }) => ({
hasNextCanvas: !!d(e, { windowId: t }),
hasPreviousCanvas: !!p(e, { windowId: t }),
viewingDirection: s(e, { windowId: t })
}), (e, { windowId: t }) => ({
setNextCanvas: (...n) => e(g(t)),
setPreviousCanvas: (...n) => e(_(t))
})), r("ViewerNavigation"))(X), Q = M(k, {
name: "WindowCanvasNavigationControls",
slot: "root"
})(({ theme: e }) => ({
alignItems: "center",
backgroundColor: j(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, z.useElementSize)(), c = {
showZoomControls: e,
size: s,
visible: t,
windowId: n,
...i
}, l = s && s.width && s.width <= 253;
return t ? /* @__PURE__ */ O(Q, {
square: !0,
className: (0, R.default)(y("canvas-nav"), l ? y("canvas-nav-stacked") : null),
elevation: 0,
ref: C(a, o),
children: [
/* @__PURE__ */ O(F, {
direction: l ? "column" : "row",
divider: /* @__PURE__ */ D(I, {
orientation: l ? "horizontal" : "vertical",
variant: "middle",
flexItem: !0
}),
spacing: 0,
children: [e && /* @__PURE__ */ D(G, {
windowId: n,
zoomToWorld: r
}), /* @__PURE__ */ D(Z, { windowId: n })]
}),
/* @__PURE__ */ D(J, { windowId: n }),
/* @__PURE__ */ D(b, {
targetName: "WindowCanvasNavigationControls",
...c
})
]
}) : /* @__PURE__ */ D(N, {
style: T,
component: "div",
children: /* @__PURE__ */ D(J, { windowId: n })
});
});
$.propTypes = {
showZoomControls: L.default.bool,
visible: L.default.bool,
windowId: L.default.string.isRequired,
zoomToWorld: L.default.func.isRequired
}, $.displayName = "WindowCanvasNavigationControls";
var ee = e(o((e, { windowId: t }) => ({
showZoomControls: m(e),
visible: a(e).focusedWindowId === t
})), r("WindowCanvasNavigationControls"))($);
//#endregion
export { J as a, W as c, X as i, H as l, $ as n, q as o, Z as r, G as s, ee as t };
//# sourceMappingURL=WindowCanvasNavigationControls-DHHogzDd.js.map