resources/js/components/map/Viewer.js

   1 import OpenSeadragon from 'openseadragon';
   2 import React from 'react';
   3 import { Button } from 'react-bootstrap';
   4 import { useTranslation } from 'react-i18next';
   5
   6 const Viewer = () => {
   7         const [viewer, setViewer] = React.useState(null);
   8
   9         const container = React.useRef();
  10         const { t } = useTranslation();
  11
  12         React.useEffect(() => {
  13                 if (!container.current) return;
  14
  15                 const v = OpenSeadragon({
  16                         element: container.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: 8192,
  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         }, [container.current]);
  67
  68         const goToPage = React.useCallback((p) => {
  69                 if (viewer) viewer.goToPage(p);
  70         }, [viewer]);
  71
  72         return <>
  73                 <div className="d-flex align-items-center justify-content-between">
  74                         <div className="button-bar">
  75                                 <Button
  76                                         onClick={() => goToPage(0)}
  77                                         title={t('map.lwLong')}
  78                                         variant="outline-secondary"
  79                                 >
  80                                         {t('map.lwShort')}
  81                                 </Button>
  82                                 <Button
  83                                         onClick={() => goToPage(1)}
  84                                         title={t('map.dwLong')}
  85                                         variant="outline-secondary"
  86                                 >
  87                                         {t('map.dwShort')}
  88                                 </Button>
  89                                 <Button
  90                                         onClick={() => goToPage(2)}
  91                                         title={t('map.spLong')}
  92                                         variant="outline-secondary"
  93                                 >
  94                                         {t('map.spShort')}
  95                                 </Button>
  96                                 <Button
  97                                         onClick={() => goToPage(3)}
  98                                         title={t('map.uwLong')}
  99                                         variant="outline-secondary"
 100                                 >
 101                                         {t('map.uwShort')}
 102                                 </Button>
 103                         </div>
 104                 </div>
 105                 <div ref={container} style={{ height: '80vh' }} />
 106         </>;
 107 };
 108
 109 export default Viewer;