From ff5308abe6cdbc4058cfee2dd89333617dd2b871 Mon Sep 17 00:00:00 2001
From: aksylumoed <adityadndkr@gmail.com>
Date: Sun, 24 Mar 2024 17:48:22 +0530
Subject: [PATCH] Add configurable minZoomLevel

---
 artworks.ts  | 3 ++-
 constants.ts | 8 ++++++++
 style.css    | 9 ++++-----
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/artworks.ts b/artworks.ts
index 20814833..c0be4339 100644
--- a/artworks.ts
+++ b/artworks.ts
@@ -95,10 +95,11 @@ function displayDzi(index: number): void {
       prefixUrl: "images/", // Adjust the path to OpenSeadragon images
       tileSources: artwork.dziPath,
       defaultZoomLevel: 1.0,
-      minZoomLevel: 0.7,
+      minZoomLevel: artwork.minZoomLevel,
       zoomPerScroll: 1.05,
       zoomPerClick: 1.20,
       showNavigationControl: false,
+      visibilityRatio: 1.0,
       constrainDuringPan: true,
       subPixelRoundingForTransparency: OpenSeadragon.SUBPIXEL_ROUNDING_OCCURRENCES.ALWAYS
     });
diff --git a/constants.ts b/constants.ts
index da3bde31..9d1d279d 100644
--- a/constants.ts
+++ b/constants.ts
@@ -3,6 +3,7 @@ export interface Artwork {
   imagePath: string;
   description: string;
   dziPath: string;
+  minZoomLevel: number;
   maxWidthPercentage: string;
   maxWidthPercentageMobile: string;
 }
@@ -14,6 +15,7 @@ export const artworks: Artwork[] = [
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/8.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/8.dzi",
     description: `190cm x 190cm\naluminium dibond, direct print`,
+    minZoomLevel: 1.5,
     maxWidthPercentage: "45%",
     maxWidthPercentageMobile: "75%"
   },
@@ -23,6 +25,7 @@ export const artworks: Artwork[] = [
       // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/5.png",
       dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/5.dzi",
       description: `95.3cm x 190cm aluminium dibond, direct print`,
+      minZoomLevel: 1.5,
       maxWidthPercentage: "25%",
       maxWidthPercentageMobile: "50%"
   },
@@ -32,6 +35,7 @@ export const artworks: Artwork[] = [
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/4.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/4.dzi",
     description: `300cm x 90cm aluminium dibond, direct print`,
+    minZoomLevel: 1.5,
     maxWidthPercentage: "70%",
     maxWidthPercentageMobile: "80%"
   },
@@ -41,6 +45,7 @@ export const artworks: Artwork[] = [
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/2.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/2.dzi",
     description: `160cm x 90cm aluminium dibond, direct print`,
+    minZoomLevel: 1.5,
     maxWidthPercentage: "60%",
     maxWidthPercentageMobile: "80%"
   },
@@ -50,6 +55,7 @@ export const artworks: Artwork[] = [
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/3.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/3.dzi",
     description: `135cm x 90cm aluminium dibond, direct print`,
+    minZoomLevel: 1.5,
     maxWidthPercentage: "60%",
     maxWidthPercentageMobile: "80%"
   },
@@ -59,6 +65,7 @@ export const artworks: Artwork[] = [
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/6.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/6.dzi",
     description: `126.7cm x 190cm aluminium dibond, direct print`,
+    minZoomLevel: 1.5,
     maxWidthPercentage: "30%",
     maxWidthPercentageMobile: "65%"
   },
@@ -68,6 +75,7 @@ export const artworks: Artwork[] = [
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/1.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/1.dzi",
     description: `150cm x 100cm aluminium dibond, direct print`,
+    minZoomLevel: 1.5,
     maxWidthPercentage: "60%",
     maxWidthPercentageMobile: "75%"
   },
diff --git a/style.css b/style.css
index 688aad61..06ed2e04 100644
--- a/style.css
+++ b/style.css
@@ -50,11 +50,10 @@ body {
 
 .artwork-container {
   font-family: 'M PLUS Code Latin', monospace;
-  position: fixed; /* Or 'absolute' */
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  position: relative;
+  width: 80vw;  /* 80% of the viewport width */
+  height: 60vh; /* 60% of the viewport height */
+  margin: auto;
 }
 
 #closeViewer {