UW grid overlay

[alttp.git] / resources / js / components / map / Overlay.js

diff --git a/resources/js/components/map/Overlay.js b/resources/js/components/map/Overlay.js
index 4068bea92e5940b18abc9179357aa34ea06d2051..4ec503ac820bad275194eb7ac797128c54b49b7b 100644 (file)
--- a/resources/js/components/map/Overlay.js
+++ b/resources/js/components/map/Overlay.js
@@ -5,31 +5,64 @@ import { createPortal } from 'react-dom';
 
 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);
+                               viewer.removeOverlay(element);
+                       };
                }
-       }, [onClick, viewer, x, y]);
+               if (viewer.isOpen()) {
+                       add();
+               } else {
+                       viewer.addHandler('open', add);
+                       return () => {
+                               viewer.removeHandler('open', add);
+                               viewer.removeOverlay(element);
+                       };
+               }
+       }, [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,
 };