From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Mon, 17 Jul 2023 13:20:57 +0000 (+0200)
Subject: improved underworld map navigation
X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;h=6bc8cf8ce3ddc1592c56d2d414a5b9b7215eff6d;p=alttp.git

improved underworld map navigation
---

diff --git a/resources/js/components/map/Item.js b/resources/js/components/map/Item.js
index a29443b..3fde3d1 100644
--- 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 3b670db..36ddec1 100644
--- 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 2d7afda..83404ac 100644
--- 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'}`}>