resources/js/components/map/OpenSeadragon.js

   1 import OpenSeadragon from 'openseadragon';
   2 import PropTypes from 'prop-types';
   3 import React from 'react';
   4
   5 export const Context = React.createContext({});
   6
   7 export const useOpenSeadragon = () => React.useContext(Context);
   8
   9 export const Provider = React.forwardRef(({ children }, ref) => {
  10         const [viewer, setViewer] = React.useState(null);
  11
  12         React.useEffect(() => {
  13                 if (!ref.current) return;
  14
  15                 const v = OpenSeadragon({
  16                         element: ref.current,
  17                         preserveViewport: true,
  18                         sequenceMode: true,
  19                         showNavigator: true,
  20                         showNavigationControl: false,
  21                         showSequenceControl: false,
  22                         tileSources: [
  23                                 new OpenSeadragon.DziTileSource({
  24                                         width: 8192,
  25                                         height: 8192,
  26                                         tileSize: 256,
  27                                         tileOverlap: 0,
  28                                         minLevel: 8,
  29                                         maxLevel: 13,
  30                                         tilesUrl: '/media/alttp/map/lw_files/',
  31                                         fileFormat: 'png',
  32                                 }), new OpenSeadragon.DziTileSource({
  33                                         width: 8192,
  34                                         height: 8192,
  35                                         tileSize: 256,
  36                                         tileOverlap: 0,
  37                                         minLevel: 8,
  38                                         maxLevel: 13,
  39                                         tilesUrl: '/media/alttp/map/dw_files/',
  40                                         fileFormat: 'png',
  41                                 }), new OpenSeadragon.DziTileSource({
  42                                         width: 8192,
  43                                         height: 4096,
  44                                         tileSize: 256,
  45                                         tileOverlap: 0,
  46                                         minLevel: 8,
  47                                         maxLevel: 13,
  48                                         tilesUrl: '/media/alttp/map/sp_files/',
  49                                         fileFormat: 'png',
  50                                 }), new OpenSeadragon.DziTileSource({
  51                                         width: 16384,
  52                                         height: 16384,
  53                                         tileSize: 256,
  54                                         tileOverlap: 0,
  55                                         minLevel: 8,
  56                                         maxLevel: 14,
  57                                         tilesUrl: '/media/alttp/map/uw_files/',
  58                                         fileFormat: 'png',
  59                                 }),
  60                         ],
  61                 });
  62                 setViewer(v);
  63                 return () => {
  64                         v.destroy();
  65                 };
  66         }, [ref.current]);
  67
  68         return <Context.Provider value={{ viewer }}>
  69                 {children}
  70         </Context.Provider>;
  71 });
  72
  73 Provider.displayName = 'OpenSeadragonProvider';
  74
  75 Provider.propTypes = {
  76         children: PropTypes.node,
  77 };
  78
  79 export default Provider;