X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fmap%2FOverlay.js;h=4ec503ac820bad275194eb7ac797128c54b49b7b;hb=939bf6d3ab44e3ce08116c2e9fdab160c35e894b;hp=4068bea92e5940b18abc9179357aa34ea06d2051;hpb=f17b9f3b6f7f9e678c681c719eea6fb5c41a387f;p=alttp.git

diff --git a/resources/js/components/map/Overlay.js b/resources/js/components/map/Overlay.js
index 4068bea..4ec503a 100644
--- 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,
 };