import { useOpenSeadragon } from './OpenSeadragon';
-const Overlay = ({ children, onClick, x, y }) => {
+const Overlay = ({ children, height, onClick, page, width, x, y }) => {
const { viewer } = useOpenSeadragon();
const [element] = React.useState(document.createElement('div'));
React.useEffect(() => {
if (!viewer) return;
- viewer.addOverlay(
- element,
- new OpenSeadragon.Point(x, y),
- OpenSeadragon.Placement.CENTER,
- );
- if (onClick) {
- new OpenSeadragon.MouseTracker({
- element,
- clickHandler: onClick,
- });
+ const add = () => {
+ if (width && height) {
+ viewer.addOverlay(
+ element,
+ new OpenSeadragon.Rect(x, y, width, height),
+ );
+ } else {
+ viewer.addOverlay(
+ element,
+ new OpenSeadragon.Point(x, y),
+ OpenSeadragon.Placement.CENTER,
+ );
+ }
+ if (onClick) {
+ new OpenSeadragon.MouseTracker({
+ element,
+ clickHandler: onClick,
+ });
+ }
+ };
+ const addPage = () => {
+ if (viewer.currentPage() === page) {
+ add();
+ }
+ };
+ if (typeof page !== 'undefined') {
+ viewer.addHandler('page', addPage);
+ return () => {
+ viewer.removeHandler('page', addPage);
+ try {
+ viewer.removeOverlay(element);
+ } catch (e) {
+ // bug in OSD?
+ console.error(e);
+ }
+ };
}
- }, [onClick, viewer, x, y]);
+ if (viewer.isOpen()) {
+ add();
+ } else {
+ viewer.addHandler('open', add);
+ return () => {
+ viewer.removeHandler('open', add);
+ try {
+ viewer.removeOverlay(element);
+ } catch (e) {
+ // bug in OSD?
+ console.error(e);
+ }
+ };
+ }
+ }, [onClick, height, page, viewer, width, x, y]);
return createPortal(children, element);
};
Overlay.propTypes = {
children: PropTypes.node,
+ height: PropTypes.number,
onClick: PropTypes.func,
+ page: PropTypes.number,
+ width: PropTypes.number,
x: PropTypes.number,
y: PropTypes.number,
};