1 import OpenSeadragon from 'openseadragon';
2 import PropTypes from 'prop-types';
3 import React from 'react';
5 export const Context = React.createContext({});
7 export const useOpenSeadragon = () => React.useContext(Context);
9 export const Provider = React.forwardRef(({ children }, ref) => {
10 const [viewer, setViewer] = React.useState(null);
12 React.useEffect(() => {
13 if (!ref.current) return;
15 const v = OpenSeadragon({
17 preserveViewport: true,
20 showNavigationControl: false,
21 showSequenceControl: false,
23 new OpenSeadragon.DziTileSource({
30 tilesUrl: '/media/alttp/map/lw_files/',
32 }), new OpenSeadragon.DziTileSource({
39 tilesUrl: '/media/alttp/map/dw_files/',
41 }), new OpenSeadragon.DziTileSource({
48 tilesUrl: '/media/alttp/map/sp_files/',
50 }), new OpenSeadragon.DziTileSource({
57 tilesUrl: '/media/alttp/map/uw_files/',
68 return <Context.Provider value={{ viewer }}>
73 Provider.displayName = 'OpenSeadragonProvider';
75 Provider.propTypes = {
76 children: PropTypes.node,
79 export default Provider;