From f88b5574ec90653f571275bf398587b00618faf3 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Mon, 2 Sep 2024 14:49:10 +0200
Subject: [PATCH] repair OSD ref

---
 resources/js/components/map/OpenSeadragon.js | 11 ++++++-----
 resources/js/pages/Map.js                    |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/map/OpenSeadragon.js b/resources/js/components/map/OpenSeadragon.js
index 36ddec1..55e9638 100644
--- a/resources/js/components/map/OpenSeadragon.js
+++ b/resources/js/components/map/OpenSeadragon.js
@@ -9,7 +9,7 @@ export const Context = React.createContext({});
 
 export const useOpenSeadragon = () => React.useContext(Context);
 
-export const Provider = React.forwardRef(({ children }, ref) => {
+export const Provider = ({ children, containerRef }) => {
 	const { activeMap } = useParams();
 	const navigate = useNavigate();
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -51,10 +51,10 @@ export const Provider = React.forwardRef(({ children }, ref) => {
 	}, [searchParams, viewer]);
 
 	React.useEffect(() => {
-		if (!ref.current) return;
+		if (!containerRef.current) return;
 
 		const v = OpenSeadragon({
-			element: ref.current,
+			element: containerRef.current,
 			preserveViewport: true,
 			sequenceMode: true,
 			showNavigator: true,
@@ -120,7 +120,7 @@ export const Provider = React.forwardRef(({ children }, ref) => {
 		return () => {
 			v.destroy();
 		};
-	}, [ref.current]);
+	}, [containerRef.current]);
 
 	React.useEffect(() => {
 		if (!viewer) return;
@@ -159,12 +159,13 @@ export const Provider = React.forwardRef(({ children }, ref) => {
 	return <Context.Provider value={{ activeMap, pins, setActiveMap, storePosition, viewer }}>
 		{children}
 	</Context.Provider>;
-});
+};
 
 Provider.displayName = 'OpenSeadragonProvider';
 
 Provider.propTypes = {
 	children: PropTypes.node,
+	containerRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
 };
 
 export default Provider;
diff --git a/resources/js/pages/Map.js b/resources/js/pages/Map.js
index cd3d96d..1ffd45a 100644
--- a/resources/js/pages/Map.js
+++ b/resources/js/pages/Map.js
@@ -24,7 +24,7 @@ export const Component = () => {
 			<meta name="description" content={t('map.description')} />
 		</Helmet>
 		<CanonicalLinks base={`/map/${activeMap}`} />
-		<OpenSeadragon ref={container}>
+		<OpenSeadragon containerRef={container}>
 			<div className="d-flex align-items-start justify-content-between">
 				<h1>{t('map.heading')} - {t(`map.${activeMap}Long`)}</h1>
 				<Buttons setUWOverlay={setUWOverlay} uwOverlay={uwOverlay} />
-- 
2.39.2