Extend ScrollableImages to view tiffs

.storybook/main.ts

@@ -18,6 +18,7 @@ const config: StorybookConfig = {
       },
     },
   },
+  staticDirs: ["../src/public/"],
   swc: () => ({
     jsc: {
       transform: {

package.json

@@ -25,7 +25,9 @@
     "storybook:publish": "gh-pages -b storybook/publish -d storybook-static"
   },
   "dependencies": {
-    "react-icons": "^5.3.0"
+    "@types/utif": "^3.0.5",
+    "react-icons": "^5.3.0",
+    "utif": "^3.1.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.13.3",

src/components/controls/ScrollableImages.stories.tsx

@@ -24,6 +24,13 @@ const imagesList: ImageInfo[] = [
   { src: shanghai, alt: "Shanghai" },
 ];
 
+const tiffImage: ImageInfo[] = [
+  {
+    src: "/images/multi-page-tiff.tiff",
+    alt: "Tiff",
+  },
+];
+
 export const All: Story = {
   args: { images: imagesList, width: 300, height: 300 },
 };
@@ -84,3 +91,7 @@ export const DynamicImages: StoryObj = {
     );
   },
 };
+
+export const TiffImage: Story = {
+  args: { images: tiffImage },
+};

src/components/controls/ScrollableImages.tsx

@@ -1,7 +1,8 @@
 import { Box, Button, Slider, Stack } from "@mui/material";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { extractFramesFromTiff, isTiff } from "../../utils/TiffUtils";
 
 interface ScrollableImagesProps {
   images: ImageInfo | ImageInfo[];
@@ -16,6 +17,7 @@ interface ScrollableImagesProps {
 
 interface ImageInfo {
   src: string;
+  type?: string;
   alt?: string;
 }
 
@@ -29,21 +31,42 @@ const ScrollableImages = ({
   numeration = true,
   backgroundColor = "#eee",
 }: ScrollableImagesProps) => {
-  const imageList = (Array.isArray(images) ? images : [images]).map(
-    (img, i) => (
-      <img
-        key={i}
-        src={img.src}
-        alt={img.alt ?? `Image ${i + 1}`}
-        style={{
-          width: "100%",
-          height: "100%",
-          objectFit: "contain",
-          display: "block",
-        }}
-      />
-    ),
-  );
+  const [extractedImages, setExtractedImages] = useState<ImageInfo[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      const inputImages = Array.isArray(images) ? images : [images];
+      let result: ImageInfo[] = [];
+      let index = 1;
+      for (const image of inputImages) {
+        if (isTiff(image)) {
+          const frames: ImageInfo[] = await extractFramesFromTiff({
+            src: image.src,
+            alt: image.alt ?? `TIFF ${index}`,
+          });
+          result = result.concat(frames);
+        } else {
+          result.push(image);
+        }
+        index++;
+      }
+      setExtractedImages(result);
+    })();
+  }, [images]);
+
+  const imageList = extractedImages.map((img, i) => (
+    <img
+      key={i}
+      src={img.src}
+      alt={img.alt ?? `Image ${String(i + 1)}`}
+      style={{
+        width: "100%",
+        height: "100%",
+        objectFit: "contain",
+        display: "block",
+      }}
+    />
+  ));
 
   const imageListLength = imageList.length;
   const renderButtons = buttons && imageListLength > 1;
@@ -59,21 +82,21 @@ const ScrollableImages = ({
     setNumberValue((index + 1).toString());
   };
 
-  const handlePrev = () => {
+  const handlePrev = useCallback(() => {
     const newIndex = wrapAround
       ? (currentIndex - 1 + imageListLength) % imageListLength
       : Math.max(0, currentIndex - 1);
     setCurrentIndexWrapper(newIndex);
-  };
+  }, [currentIndex, imageListLength, wrapAround]);
 
-  const handleNext = () => {
+  const handleNext = useCallback(() => {
     const newIndex = wrapAround
       ? (currentIndex + 1) % imageListLength
       : Math.min(currentIndex + 1, imageListLength - 1);
     setCurrentIndexWrapper(newIndex);
-  };
+  }, [currentIndex, imageListLength, wrapAround]);
 
-  const handleSliderChange = (event: Event, newIndex: number | number[]) => {
+  const handleSliderChange = (_event: Event, newIndex: number | number[]) => {
     setCurrentIndexWrapper(Number(newIndex));
   };
 
@@ -213,7 +236,6 @@ const ScrollableImages = ({
               component="input"
               type="number"
               value={numberValue}
-              defaultValue={""}
               onChange={handleNumberChange}
               onKeyDown={handleNumberEnter}
               sx={{
@@ -238,7 +260,7 @@ const ScrollableImages = ({
             <Box
               sx={{ fontFamily: "inherit", fontSize: "1rem", color: "inherit" }}
             >
-              {`/${imageListLength}`}
+              {`/${String(imageListLength)}`}
             </Box>
           </Box>
         )}

src/utils/TiffUtils.ts

@@ -0,0 +1,49 @@
+import * as UTIF from "utif";
+import { ImageInfo } from "../components/controls/ScrollableImages";
+
+export async function extractFramesFromTiff(
+  /** Splits a multi-frame Tiff into a list of png images.*/
+  tiffImage: ImageInfo,
+): Promise<ImageInfo[]> {
+  const response = await fetch(tiffImage.src);
+  const arrayBuffer = await response.arrayBuffer();
+  const frames = UTIF.decode(arrayBuffer);
+
+  const images: ImageInfo[] = [];
+
+  let index = 1;
+  for (const frame of frames) {
+    UTIF.decodeImage(arrayBuffer, frame);
+    const rgba = UTIF.toRGBA8(frame);
+
+    const canvas = document.createElement("canvas");
+    canvas.width = frame.width;
+    canvas.height = frame.height;
+    const context = canvas.getContext("2d");
+    if (!context) continue;
+    const imageData = context.createImageData(frame.width, frame.height);
+    imageData.data.set(rgba);
+    context.putImageData(imageData, 0, 0);
+
+    const blob = await new Promise<Blob | null>((resolve) =>
+      canvas.toBlob((b) => resolve(b), "image/png"),
+    );
+    if (!blob) continue;
+    const url = URL.createObjectURL(blob);
+    images.push({
+      src: url,
+      alt: tiffImage.alt ? `${tiffImage.alt} ${index}` : `TIFF Image ${index}`,
+      type: "image/png",
+    });
+    index++;
+  }
+  return images;
+}
+
+export const isTiff = (image: ImageInfo): boolean => {
+  return (
+    image.type?.includes("tif") ||
+    image.src.endsWith(".tiff") ||
+    image.src.endsWith(".tif")
+  );
+};