From a3e76ae254757313145f1fd2672bf93e42d96a0d Mon Sep 17 00:00:00 2001
From: Fabian Stoehr <stoehr@ub.uni-leipzig.de>
Date: Tue, 11 Jun 2024 16:43:15 +0200
Subject: [PATCH 1/3] feat: allow shown thumbnails to be limited

---
 src/components/ThumbnailNavigation.js | 52 +++++++++++++++++++--------
 src/config/settings.js                |  2 ++
 2 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js
index 1a4ce20cf..f46aaca0b 100644
--- a/src/components/ThumbnailNavigation.js
+++ b/src/components/ThumbnailNavigation.js
@@ -19,6 +19,7 @@ export class ThumbnailNavigation extends Component {
     this.scrollbarSize = 15;
     this.spacing = 8; // 2 * (2px margin + 2px border + 2px padding + 2px padding)
     this.calculateScaledSize = this.calculateScaledSize.bind(this);
+    this.calculateForItems = this.calculateForItems.bind(this);
     this.itemCount = this.itemCount.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.nextCanvas = this.nextCanvas.bind(this);
@@ -94,6 +95,21 @@ export class ThumbnailNavigation extends Component {
     }
   }
 
+  /**
+ * This function sums up n thumbnails and adds a fixed spacing.
+ *
+ * @param {number} n - The number of thumbnail items
+ * @returns {number} - The total width of n items plus the spacing.
+ */
+  calculateForItems(n) {
+    let total = 0;
+    for (let i = 0; i < n; i += 1) {
+      total += this.calculateScaledSize(i);
+    }
+
+    return total + this.spacing;
+  }
+
   /** */
   calculatingWidth(canvasesLength) {
     const { thumbnailNavigation } = this.props;
@@ -133,6 +149,7 @@ export class ThumbnailNavigation extends Component {
     }
   }
 
+  // {(position === 'far-bottom') ? this.areaHeight(height) : this.calculateForItems(thumbnailNavigation.count)}
   /** */
   areaHeight(height) {
     const { position, thumbnailNavigation } = this.props;
@@ -184,6 +201,7 @@ export class ThumbnailNavigation extends Component {
     if (position === 'off') {
       return null;
     }
+
     const htmlDir = viewingDirection === 'right-to-left' ? 'rtl' : 'ltr';
     const itemData = {
       canvasGroupings,
@@ -215,20 +233,26 @@ export class ThumbnailNavigation extends Component {
             defaultHeight={100}
             defaultWidth={400}
           >
-            {({ height, width }) => (
-              <List
-                direction={htmlDir}
-                height={this.areaHeight(height)}
-                itemCount={this.itemCount()}
-                itemSize={this.calculateScaledSize}
-                width={width}
-                layout={(position === 'far-bottom') ? 'horizontal' : 'vertical'}
-                itemData={itemData}
-                ref={this.gridRef}
-              >
-                {ThumbnailCanvasGrouping}
-              </List>
-            )}
+            {({ height, width }) => {
+              const calculatedHeight = (position === 'far-bottom') ? this.areaHeight(height) : this.calculateForItems(thumbnailNavigation.count ?? 1);
+              const calculatedWidth = (position === 'far-bottom') ? this.calculateForItems(thumbnailNavigation.count ?? 1) : width;
+              const layout = (position === 'far-bottom') ? 'horizontal' : 'vertical';
+
+              return (
+                <List
+                  direction={htmlDir}
+                  height={thumbnailNavigation.limit ? calculatedHeight : this.areaHeight(height)}
+                  itemCount={this.itemCount()}
+                  itemSize={this.calculateScaledSize}
+                  width={thumbnailNavigation.limit ? calculatedWidth : width}
+                  layout={layout}
+                  itemData={itemData}
+                  ref={this.gridRef}
+                >
+                  {ThumbnailCanvasGrouping}
+                </List>
+              );
+            }}
           </AutoSizer>
         </div>
       </Paper>
diff --git a/src/config/settings.js b/src/config/settings.js
index cfcf232db..0ae9b0fc8 100644
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -511,6 +511,8 @@ export default {
     preferredFormats: ['jpg', 'png', 'webp', 'tif'],
   },
   thumbnailNavigation: {
+    counts: 5, // The amount of thumbnails to be shown
+    limit: false, // Limits the shown thumbnails in the thumbnail navigation
     defaultPosition: 'off', // Which position for the thumbnail navigation to be be displayed. Other possible values are "far-bottom" or "far-right"
     displaySettings: true, // Display the settings for this in WindowTopMenu
     height: 130, // height of entire ThumbnailNavigation area when position is "far-bottom"

From eea13de1654ff0b454923f9e53696c3b9fc26df2 Mon Sep 17 00:00:00 2001
From: Fabian Stoehr <stoehr@ub.uni-leipzig.de>
Date: Tue, 11 Jun 2024 16:44:24 +0200
Subject: [PATCH 2/3] chore: remove debugging comment

---
 src/components/ThumbnailNavigation.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js
index f46aaca0b..f85eae6ce 100644
--- a/src/components/ThumbnailNavigation.js
+++ b/src/components/ThumbnailNavigation.js
@@ -149,7 +149,6 @@ export class ThumbnailNavigation extends Component {
     }
   }
 
-  // {(position === 'far-bottom') ? this.areaHeight(height) : this.calculateForItems(thumbnailNavigation.count)}
   /** */
   areaHeight(height) {
     const { position, thumbnailNavigation } = this.props;

From 3fab1c44ff8bf7a9832add3f315e4e38f2ca40de Mon Sep 17 00:00:00 2001
From: Fabian Stoehr <stoehr@ub.uni-leipzig.de>
Date: Tue, 11 Jun 2024 16:57:26 +0200
Subject: [PATCH 3/3] fix: typo

---
 src/config/settings.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/settings.js b/src/config/settings.js
index 0ae9b0fc8..d58d71de9 100644
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -511,7 +511,7 @@ export default {
     preferredFormats: ['jpg', 'png', 'webp', 'tif'],
   },
   thumbnailNavigation: {
-    counts: 5, // The amount of thumbnails to be shown
+    count: 5, // The amount of thumbnails to be shown
     limit: false, // Limits the shown thumbnails in the thumbnail navigation
     defaultPosition: 'off', // Which position for the thumbnail navigation to be be displayed. Other possible values are "far-bottom" or "far-right"
     displaySettings: true, // Display the settings for this in WindowTopMenu