improved underworld map navigation

[alttp.git] / resources / js / components / map / UWSuperTiles.js

diff --git a/resources/js/components/map/UWSuperTiles.js b/resources/js/components/map/UWSuperTiles.js
index 2d7afda8b53f544d80581c7ef84d60db3f6504f4..83404ac89564ef7f832032e9735a815996b9a901 100644 (file)
--- a/resources/js/components/map/UWSuperTiles.js
+++ b/resources/js/components/map/UWSuperTiles.js
@@ -1,6 +1,6 @@
-import OpenSeadragon from 'openseadragon';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import Overlay from './Overlay';
 import { useOpenSeadragon } from './OpenSeadragon';
@@ -460,7 +460,8 @@ const getClassName = key => {
 };
 
 const UWSuperTiles = ({ show }) => {
-       const { viewer } = useOpenSeadragon();
+       const { storePosition, viewer } = useOpenSeadragon();
+       const [, setSearchParams] = useSearchParams();
 
        const onClick = React.useCallback(e => {
                if (e.originalTarget.tagName !== 'A') return;
@@ -470,11 +471,11 @@ const UWSuperTiles = ({ show }) => {
                const x = (parseInt(key[1], 16) + 0.5) / 16;
                const y = (parseInt(key[0], 16) + 0.5) / 16;
                if (viewer && viewer.viewport) {
-                       viewer.viewport.panTo(new OpenSeadragon.Point(x, y));
-                       viewer.viewport.zoomTo(4);
+                       storePosition();
+                       setSearchParams({ x, y, z: 4 });
                        viewer.element.scrollIntoView();
                }
-       }, [viewer]);
+       }, [storePosition, viewer]);
 
        return <Overlay onClick={onClick} page={3} x={0} y={0} width={1} height={1}>
                <div className={`uw-super-tiles ${show ? '' : 'd-none'}`}>