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                                 viewer.removeOverlay(element);
  44                         };
  45                 }
  46                 if (viewer.isOpen()) {
  47                         add();
  48                 } else {
  49                         viewer.addHandler('open', add);
  50                         return () => {
  51                                 viewer.removeHandler('open', add);
  52                                 viewer.removeOverlay(element);
  53                         };
  54                 }
  55         }, [onClick, height, page, viewer, width, x, y]);
  56
  57         return createPortal(children, element);
  58 };
  59
  60 Overlay.propTypes = {
  61         children: PropTypes.node,
  62         height: PropTypes.number,
  63         onClick: PropTypes.func,
  64         page: PropTypes.number,
  65         width: PropTypes.number,
  66         x: PropTypes.number,
  67         y: PropTypes.number,
  68 };
  69
  70 export default Overlay;