From 7432cd186aa889aa2bc3adaf997cf8b59db5a464 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 5 May 2023 17:46:48 +0100
Subject: [PATCH] Scale thumbnails to fill space

---
 src/Thumbnail.jsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/Thumbnail.jsx b/src/Thumbnail.jsx
index 690aee0..08dec7c 100644
--- a/src/Thumbnail.jsx
+++ b/src/Thumbnail.jsx
@@ -10,12 +10,14 @@ import {
   getDefaultColors,
 } from "./util";
 
+const MAX_LENGTH = 100;
+
 export default function Thumbnail({ source, attrs }) {
   // const [r, setChunk] = React.useState();
 
   const [canvasSize, setCanvasSize] = React.useState({
-    width: 100,
-    height: 100,
+    width: MAX_LENGTH,
+    height: MAX_LENGTH,
   });
 
   const canvas = React.useRef();
@@ -75,10 +77,15 @@ export default function Thumbnail({ source, attrs }) {
 
       let rbgData = renderTo8bitArray(ndChunks, minMaxValues, colors);
 
-      // setChunk(data);
-      let width = shape.at(-1);
-      let height = shape.at(-2);
-      setCanvasSize({ width, height });
+      const width = shape.at(-1);
+      const height = shape.at(-2);
+      let scale = width / MAX_LENGTH;
+      if (height > width) {
+        scale = height / MAX_LENGTH;
+      }
+      const cssWidth = width / scale;
+      const cssHeight = height / scale;
+      setCanvasSize({ width, height, cssWidth, cssHeight });
 
       const ctx = canvas.current.getContext("2d");
       ctx.putImageData(new ImageData(rbgData, width, height), 0, 0);
@@ -89,7 +96,7 @@ export default function Thumbnail({ source, attrs }) {
 
   return (
       <canvas
-        style={{ maxWidth: 100, maxHeight: 100, backgroundColor: 'lightgrey' }}
+        style={{ width: canvasSize.cssWidth, height: canvasSize.cssHeight, maxWidth: 100, maxHeight: 100, backgroundColor: 'lightgrey' }}
         ref={canvas}
         height={canvasSize.height}
         width={canvasSize.width}