]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/map/Overlay.js
remove some useless svg groups
[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, height, onClick, page, width, x, y }) => {
9         const { viewer } = useOpenSeadragon();
10         const [element] = React.useState(document.createElement('div'));
11
12         React.useEffect(() => {
13                 if (!viewer) return;
14                 const add = () => {
15                         if (width && height) {
16                                 viewer.addOverlay(
17                                         element,
18                                         new OpenSeadragon.Rect(x, y, width, height),
19                                 );
20                         } else {
21                                 viewer.addOverlay(
22                                         element,
23                                         new OpenSeadragon.Point(x, y),
24                                         OpenSeadragon.Placement.CENTER,
25                                 );
26                         }
27                         if (onClick) {
28                                 new OpenSeadragon.MouseTracker({
29                                         element,
30                                         clickHandler: onClick,
31                                 });
32                         }
33                 };
34                 const addPage = () => {
35                         if (viewer.currentPage() === page) {
36                                 add();
37                         }
38                 };
39                 if (typeof page !== 'undefined') {
40                         viewer.addHandler('page', addPage);
41                         return () => {
42                                 viewer.removeHandler('page', addPage);
43                                 try {
44                                         viewer.removeOverlay(element);
45                                 } catch (e) {
46                                         // bug in OSD?
47                                         console.error(e);
48                                 }
49                         };
50                 }
51                 if (viewer.isOpen()) {
52                         add();
53                 } else {
54                         viewer.addHandler('open', add);
55                         return () => {
56                                 viewer.removeHandler('open', add);
57                                 try {
58                                         viewer.removeOverlay(element);
59                                 } catch (e) {
60                                         // bug in OSD?
61                                         console.error(e);
62                                 }
63                         };
64                 }
65         }, [onClick, height, page, viewer, width, x, y]);
66
67         return createPortal(children, element);
68 };
69
70 Overlay.propTypes = {
71         children: PropTypes.node,
72         height: PropTypes.number,
73         onClick: PropTypes.func,
74         page: PropTypes.number,
75         width: PropTypes.number,
76         x: PropTypes.number,
77         y: PropTypes.number,
78 };
79
80 export default Overlay;