X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fmap%2FOpenSeadragon.js;h=3b670db8751ec4cd4c006afb80c93d7e5457b5a9;hb=22ba8bff0adc15aa70c35314f8b7f75e749fa5eb;hp=b6158a5aea79ca3a03f964deb4f5dc413cfa52c0;hpb=f17b9f3b6f7f9e678c681c719eea6fb5c41a387f;p=alttp.git

diff --git a/resources/js/components/map/OpenSeadragon.js b/resources/js/components/map/OpenSeadragon.js
index b6158a5..3b670db 100644
--- a/resources/js/components/map/OpenSeadragon.js
+++ b/resources/js/components/map/OpenSeadragon.js
@@ -2,16 +2,54 @@ import axios from 'axios';
 import OpenSeadragon from 'openseadragon';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { createSearchParams, useSearchParams } from 'react-router-dom';
 
 export const Context = React.createContext({});
 
 export const useOpenSeadragon = () => React.useContext(Context);
 
 export const Provider = React.forwardRef(({ children }, ref) => {
-	const [activeMap, setActiveMap] = React.useState('lw');
+	const { activeMap } = useParams();
+	const navigate = useNavigate();
+	const [searchParams, setSearchParams] = useSearchParams();
 	const [pins, setPins] = React.useState([]);
 	const [viewer, setViewer] = React.useState(null);
 
+	const storePosition = React.useCallback(() => {
+		if (!viewer || !viewer.viewport) return;
+		const center = viewer.viewport.getCenter();
+		const zoom = viewer.viewport.getZoom();
+		setSearchParams({ x: center.x, y: center.y, z: zoom }, { replace: true });
+	}, [setSearchParams, viewer]);
+
+	const setActiveMap = React.useCallback(map => {
+		if (viewer && viewer.viewport) {
+			const center = viewer.viewport.getCenter();
+			const zoom = viewer.viewport.getZoom();
+			const params = { x: center.x, y: center.y, z: zoom };
+			navigate(
+				{ pathname: `../${map}`, search: `?${createSearchParams(params)}` },
+				{ replace: true },
+			);
+		} else {
+			navigate(`../${map}`, { replace: true });
+		}
+	}, [navigate, viewer]);
+
+	React.useEffect(() => {
+		if (!viewer || !viewer.viewport) return;
+		if (searchParams.has('x') && searchParams.has('y')) {
+			viewer.viewport.panTo(new OpenSeadragon.Point(
+				parseFloat(searchParams.get('x')),
+				parseFloat(searchParams.get('y')),
+			));
+		}
+		if (searchParams.has('z')) {
+			viewer.viewport.zoomTo(parseFloat(searchParams.get('z')));
+		}
+	}, [searchParams, viewer]);
+
 	React.useEffect(() => {
 		if (!ref.current) return;
 
@@ -59,6 +97,15 @@ export const Provider = React.forwardRef(({ children }, ref) => {
 					maxLevel: 14,
 					tilesUrl: '/media/alttp/map/uw_files/',
 					fileFormat: 'png',
+				}), new OpenSeadragon.DziTileSource({
+					width: 16384,
+					height: 3072,
+					tileSize: 256,
+					tileOverlap: 0,
+					minLevel: 8,
+					maxLevel: 14,
+					tilesUrl: '/media/alttp/map/uw2_files/',
+					fileFormat: 'png',
 				}),
 			],
 		});
@@ -83,6 +130,9 @@ export const Provider = React.forwardRef(({ children }, ref) => {
 			case 'uw':
 				viewer.goToPage(3);
 				break;
+			case 'uw2':
+				viewer.goToPage(4);
+				break;
 		}
 		const controller = new AbortController();
 		axios.get(`/api/markers/${activeMap}`, {
@@ -99,7 +149,7 @@ export const Provider = React.forwardRef(({ children }, ref) => {
 		};
 	}, [activeMap, viewer]);
 
-	return <Context.Provider value={{ activeMap, setActiveMap, pins, viewer }}>
+	return <Context.Provider value={{ activeMap, pins, setActiveMap, storePosition, viewer }}>
 		{children}
 	</Context.Provider>;
 });