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;