improved underworld map navigation

diff --git a/resources/js/components/map/Item.js b/resources/js/components/map/Item.js
index a29443bac3bb8f2eda5bd391407ddc4505e10937..3fde3d1016ebcee6858d37e26fe1867545535f0d 100644 (file)
--- a/resources/js/components/map/Item.js
+++ b/resources/js/components/map/Item.js
@@ -1,4 +1,3 @@
-import OpenSeadragon from 'openseadragon';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Button } from 'react-bootstrap';

diff --git a/resources/js/components/map/OpenSeadragon.js b/resources/js/components/map/OpenSeadragon.js
index 3b670db8751ec4cd4c006afb80c93d7e5457b5a9..36ddec1ce4c0685ba471ce101b4913c04f503cf3 100644 (file)
--- a/resources/js/components/map/OpenSeadragon.js
+++ b/resources/js/components/map/OpenSeadragon.js
@@ -109,6 +109,13 @@ export const Provider = React.forwardRef(({ children }, ref) => {
                                }),
                        ],
                });
+               v.addHandler('canvas-nonprimary-press', e => {
+                       if (e.button === 3) {
+                               navigate(-1);
+                       } else if (e.button === 4) {
+                               navigate(1);
+                       }
+               });
                setViewer(v);
                return () => {
                        v.destroy();

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'}`}>