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;