]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/map/Viewer.js
tracker layout
[alttp.git] / 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;