]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/map/Overlay.js
4068bea92e5940b18abc9179357aa34ea06d2051
[alttp.git] / resources / js / components / map / Overlay.js
1 import OpenSeadragon from 'openseadragon';
2 import PropTypes from 'prop-types';
3 import React from 'react';
4 import { createPortal } from 'react-dom';
5
6 import { useOpenSeadragon } from './OpenSeadragon';
7
8 const Overlay = ({ children, onClick, x, y }) => {
9         const { viewer } = useOpenSeadragon();
10         const [element] = React.useState(document.createElement('div'));
11
12         React.useEffect(() => {
13                 if (!viewer) return;
14                 viewer.addOverlay(
15                         element,
16                         new OpenSeadragon.Point(x, y),
17                         OpenSeadragon.Placement.CENTER,
18                 );
19                 if (onClick) {
20                         new OpenSeadragon.MouseTracker({
21                                 element,
22                                 clickHandler: onClick,
23                         });
24                 }
25         }, [onClick, viewer, x, y]);
26
27         return createPortal(children, element);
28 };
29
30 Overlay.propTypes = {
31         children: PropTypes.node,
32         onClick: PropTypes.func,
33         x: PropTypes.number,
34         y: PropTypes.number,
35 };
36
37 export default Overlay;