1 import axios from 'axios';
2 import OpenSeadragon from 'openseadragon';
3 import PropTypes from 'prop-types';
4 import React from 'react';
6 export const Context = React.createContext({});
8 export const useOpenSeadragon = () => React.useContext(Context);
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);
15 React.useEffect(() => {
16 if (!ref.current) return;
18 const v = OpenSeadragon({
20 preserveViewport: true,
23 showNavigationControl: false,
24 showSequenceControl: false,
26 new OpenSeadragon.DziTileSource({
33 tilesUrl: '/media/alttp/map/lw_files/',
35 }), new OpenSeadragon.DziTileSource({
42 tilesUrl: '/media/alttp/map/dw_files/',
44 }), new OpenSeadragon.DziTileSource({
51 tilesUrl: '/media/alttp/map/sp_files/',
53 }), new OpenSeadragon.DziTileSource({
60 tilesUrl: '/media/alttp/map/uw_files/',
71 React.useEffect(() => {
87 const controller = new AbortController();
88 axios.get(`/api/markers/${activeMap}`, {
89 signal: controller.signal,
91 setPins(response.data || []);
93 if (!axios.isCancel(e)) {
100 }, [activeMap, viewer]);
102 return <Context.Provider value={{ activeMap, setActiveMap, pins, viewer }}>
107 Provider.displayName = 'OpenSeadragonProvider';
109 Provider.propTypes = {
110 children: PropTypes.node,
113 export default Provider;