3873: feat configure number of thumbnails

src/components/ThumbnailNavigation.js

@@ -83,6 +83,16 @@ export function ThumbnailNavigation({
     }
   };
 
+  /** */
+  const calculateForItems = (n) => {
+    let total = 0;
+    for (let i = 0; i < n; i += 1) {
+      total += calculateScaledSize(i);
+    }
+
+    return total + spacing;
+  };
+
   /** */
   const calculatingWidth = (canvasesLength) => {
     if (canvasesLength === 1) {
@@ -172,20 +182,26 @@ export function ThumbnailNavigation({
           defaultHeight={100}
           defaultWidth={400}
         >
-          {({ height, width }) => (
-            <List
-              direction={htmlDir}
-              height={areaHeight(height)}
-              itemCount={itemCount()}
-              itemSize={calculateScaledSize}
-              width={width}
-              layout={(position === 'far-bottom') ? 'horizontal' : 'vertical'}
-              itemData={itemData}
-              ref={gridRef}
-            >
-              {ThumbnailCanvasGrouping}
-            </List>
-          )}
+          {({ height, width }) => {
+            const calculatedHeight = (position === 'far-bottom') ? areaHeight(height) : calculateForItems(thumbnailNavigation.maxNumberOfThumbnails ?? 1);
+            const calculatedWidth = (position === 'far-bottom') ? calculateForItems(thumbnailNavigation.maxNumberOfThumbnails ?? 1) : width;
+            const layout = (position === 'far-bottom') ? 'horizontal' : 'vertical';
+
+            return (
+              <List
+                direction={htmlDir}
+                height={thumbnailNavigation.maxNumberOfThumbnails ? calculatedHeight : areaHeight(height)}
+                itemCount={itemCount()}
+                itemSize={calculateScaledSize}
+                width={thumbnailNavigation.maxNumberOfThumbnails ? calculatedWidth : width}
+                layout={layout}
+                itemData={itemData}
+                ref={gridRef}
+              >
+                {ThumbnailCanvasGrouping}
+              </List>
+            );
+          } }
         </AutoSizer>
         )}
       </div>

src/config/settings.js

@@ -515,6 +515,7 @@ export default {
     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"
+    maxNumberOfThumbnails: 5, // If set to value > 0, shown thumbnails are limited
     width: 100, // width of one canvas (doubled for book view) in ThumbnailNavigation area when position is "far-right"
   },
   workspace: {