resources/js/components/map/OpenSeadragon.js

   1 import axios from 'axios';
   2 import OpenSeadragon from 'openseadragon';
   3 import PropTypes from 'prop-types';
   4 import React from 'react';
   5
   6 export const Context = React.createContext({});
   7
   8 export const useOpenSeadragon = () => React.useContext(Context);
   9
  10 export const Provider = React.forwardRef(({ children }, ref) => {
  11         const [activeMap, setActiveMap] = React.useState('lw');
  12         const [pins, setPins] = React.useState([]);
  13         const [viewer, setViewer] = React.useState(null);
  14
  15         React.useEffect(() => {
  16                 if (!ref.current) return;
  17
  18                 const v = OpenSeadragon({
  19                         element: ref.current,
  20                         preserveViewport: true,
  21                         sequenceMode: true,
  22                         showNavigator: true,
  23                         showNavigationControl: false,
  24                         showSequenceControl: false,
  25                         tileSources: [
  26                                 new OpenSeadragon.DziTileSource({
  27                                         width: 8192,
  28                                         height: 8192,
  29                                         tileSize: 256,
  30                                         tileOverlap: 0,
  31                                         minLevel: 8,
  32                                         maxLevel: 13,
  33                                         tilesUrl: '/media/alttp/map/lw_files/',
  34                                         fileFormat: 'png',
  35                                 }), new OpenSeadragon.DziTileSource({
  36                                         width: 8192,
  37                                         height: 8192,
  38                                         tileSize: 256,
  39                                         tileOverlap: 0,
  40                                         minLevel: 8,
  41                                         maxLevel: 13,
  42                                         tilesUrl: '/media/alttp/map/dw_files/',
  43                                         fileFormat: 'png',
  44                                 }), new OpenSeadragon.DziTileSource({
  45                                         width: 8192,
  46                                         height: 4096,
  47                                         tileSize: 256,
  48                                         tileOverlap: 0,
  49                                         minLevel: 8,
  50                                         maxLevel: 13,
  51                                         tilesUrl: '/media/alttp/map/sp_files/',
  52                                         fileFormat: 'png',
  53                                 }), new OpenSeadragon.DziTileSource({
  54                                         width: 16384,
  55                                         height: 16384,
  56                                         tileSize: 256,
  57                                         tileOverlap: 0,
  58                                         minLevel: 8,
  59                                         maxLevel: 14,
  60                                         tilesUrl: '/media/alttp/map/uw_files/',
  61                                         fileFormat: 'png',
  62                                 }),
  63                         ],
  64                 });
  65                 setViewer(v);
  66                 return () => {
  67                         v.destroy();
  68                 };
  69         }, [ref.current]);
  70
  71         React.useEffect(() => {
  72                 if (!viewer) return;
  73                 switch (activeMap) {
  74                         case 'lw':
  75                                 viewer.goToPage(0);
  76                                 break;
  77                         case 'dw':
  78                                 viewer.goToPage(1);
  79                                 break;
  80                         case 'sp':
  81                                 viewer.goToPage(2);
  82                                 break;
  83                         case 'uw':
  84                                 viewer.goToPage(3);
  85                                 break;
  86                 }
  87                 const controller = new AbortController();
  88                 axios.get(`/api/markers/${activeMap}`, {
  89                         signal: controller.signal,
  90                 }).then(response => {
  91                         setPins(response.data || []);
  92                 }).catch(e => {
  93                         if (!axios.isCancel(e)) {
  94                                 console.error(e);
  95                         }
  96                 });
  97                 return () => {
  98                         controller.abort();
  99                 };
 100         }, [activeMap, viewer]);
 101
 102         return <Context.Provider value={{ activeMap, setActiveMap, pins, viewer }}>
 103                 {children}
 104         </Context.Provider>;
 105 });
 106
 107 Provider.displayName = 'OpenSeadragonProvider';
 108
 109 Provider.propTypes = {
 110         children: PropTypes.node,
 111 };
 112
 113 export default Provider;