Initialize new openseadragon instance once. (#208)

src/components/Image/OSD/OSD.tsx

@@ -4,7 +4,7 @@ import {
  Wrapper,
 } from "src/components/Image/Image.styled";
 import OpenSeadragon, { Options } from "openseadragon";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import Controls from "src/components/Image/Controls/Controls";
 import { OpenSeadragonImageTypes } from "src/types/open-seadragon";
@@ -30,8 +30,14 @@ const OSD: React.FC<OSDProps> = ({
  const [osdUri, setOsdUri] = useState<string>();
  const [openSeadragon, setOpenSeadragon] = useState<OpenSeadragon.Viewer>();
 
+ const initializeOSD = useRef(false);
+
  useEffect(() => {
- if (!openSeadragon) setOpenSeadragon(OpenSeadragon(config));
+ if (!initializeOSD.current) {
+ initializeOSD.current = true;
+
+ if (!openSeadragon) setOpenSeadragon(OpenSeadragon(config));
+ }
 
  return () => openSeadragon?.destroy();
  }, []);
@@ -43,7 +49,7 @@ const OSD: React.FC<OSDProps> = ({
 
  useEffect(() => {
  if (openSeadragon && uri !== osdUri) {
- openSeadragon.forceRedraw();
+ openSeadragon?.forceRedraw();
  setOsdUri(uri);
  }
  }, [openSeadragon, osdUri, uri]);
@@ -52,7 +58,7 @@ const OSD: React.FC<OSDProps> = ({
  if (osdUri && openSeadragon) {
  switch (imageType) {
  case "simpleImage":
- openSeadragon.addSimpleImage({
+ openSeadragon?.addSimpleImage({
  url: osdUri,
  });
  break;
@@ -62,23 +68,23 @@ const OSD: React.FC<OSDProps> = ({
  if (!tileSource)
  throw new Error(`No tile source found for ${osdUri}`);
 
- openSeadragon.addTiledImage({
- tileSource: tileSource,
+ openSeadragon?.addTiledImage({
+ tileSource,
  });
  } catch (e) {
  console.error(e);
  }
  });
  break;
  default:
- openSeadragon.close();
+ openSeadragon?.close();
  console.warn(
  `Unable to render ${osdUri} in OpenSeadragon as type: "${imageType}"`,
  );
  break;
  }
  }
- }, [imageType, osdUri, openSeadragon]);
+ }, [imageType, osdUri]);
 
  return (
  <Wrapper