From 4443f68e4991584498f60e08cd6b901567559861 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Thu, 12 Mar 2026 13:50:46 +0100
Subject: [PATCH 1/3] Enforces consistent trailing comma usage

---
 packages/tiffviewer/src/ui-manager.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/tiffviewer/src/ui-manager.ts b/packages/tiffviewer/src/ui-manager.ts
index 83ac3eca..d3c3b0f8 100644
--- a/packages/tiffviewer/src/ui-manager.ts
+++ b/packages/tiffviewer/src/ui-manager.ts
@@ -21,7 +21,7 @@ export class UIManager {
   constructor(
     tiffService: TIFFService,
     paletteManager: PaletteManager,
-    appElement: HTMLElement
+    appElement: HTMLElement,
   ) {
     this.tiffService = tiffService;
     this.paletteManager = paletteManager;
@@ -75,7 +75,7 @@ export class UIManager {
     const rgba = new Uint8ClampedArray(width * height * 4);
     if (samples === 1) {
       const palette = this.paletteManager.getPalette(
-        this.paletteManager.getCurrentPalette()
+        this.paletteManager.getCurrentPalette(),
       );
       for (let i = 0; i < width * height; i++) {
         const v = data[i];
@@ -172,7 +172,7 @@ export class UIManager {
     // Palette panel (SVG)
     const palettePanelBtn = document.createElement("button");
     palettePanelBtn.appendChild(
-      this.createIcon("palette", "Show Palette Selector")
+      this.createIcon("palette", "Show Palette Selector"),
     );
     palettePanelBtn.title = "Show Palette Selector";
     palettePanelBtn.type = "button";
@@ -312,7 +312,7 @@ export class UIManager {
     const rows = Object.entries(tags)
       .map(
         ([key, value]) =>
-          `<tr><td class='info-table-key'>${key}</td><td class='info-table-value'>${value}</td></tr>`
+          `<tr><td class='info-table-key'>${key}</td><td class='info-table-value'>${value}</td></tr>`,
       )
       .join("");
     return `

From b1ba3dad536b4349a6f6d89c825cb16a87c4fb1c Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Thu, 12 Mar 2026 13:50:47 +0100
Subject: [PATCH 2/3] Implements centered zoom functionality for UI buttons

---
 packages/tiffviewer/src/ui-manager.ts | 34 +++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/tiffviewer/src/ui-manager.ts b/packages/tiffviewer/src/ui-manager.ts
index d3c3b0f8..dae90904 100644
--- a/packages/tiffviewer/src/ui-manager.ts
+++ b/packages/tiffviewer/src/ui-manager.ts
@@ -149,13 +149,13 @@ export class UIManager {
     zoomInBtn.title = "Zoom In";
     zoomInBtn.type = "button";
     zoomInBtn.setAttribute("aria-label", "Zoom In");
-    zoomInBtn.onclick = () => this.panzoom.zoomIn();
+    zoomInBtn.onclick = () => this.zoomFromCenterByStep(1);
     const zoomOutBtn = document.createElement("button");
     zoomOutBtn.appendChild(this.createIcon("zoom-out", "Zoom Out"));
     zoomOutBtn.title = "Zoom Out";
     zoomOutBtn.type = "button";
     zoomOutBtn.setAttribute("aria-label", "Zoom Out");
-    zoomOutBtn.onclick = () => this.panzoom.zoomOut();
+    zoomOutBtn.onclick = () => this.zoomFromCenterByStep(-1);
     const resetZoomBtn = document.createElement("button");
     resetZoomBtn.appendChild(this.createIcon("reset", "Reset Zoom"));
     resetZoomBtn.title = "Reset Zoom";
@@ -253,6 +253,36 @@ export class UIManager {
     this.toolbar.appendChild(palettePanelBtn);
   }
 
+  private getCanvasCenterFocal(): { x: number; y: number } {
+    const rect = this.canvas.getBoundingClientRect();
+    return {
+      x: rect.left + rect.width / 2,
+      y: rect.top + rect.height / 2,
+    };
+  }
+
+  /**
+   * Use zoomToPoint to zoom from the container center by one wheel step.
+   * direction: +1 for zoom in, -1 for zoom out
+   */
+  private zoomFromCenterByStep(direction: 1 | -1) {
+    const options = this.panzoom.getOptions();
+    const step = Number(options.step ?? 0.3);
+    const minScale = Number(options.minScale ?? 0.1);
+    const maxScale = Number(options.maxScale ?? this.maxScale);
+    const currentScale = this.panzoom.getScale();
+    const wheelLikeStep = Math.exp(direction * step);
+    const targetScale = Math.min(
+      maxScale,
+      Math.max(minScale, currentScale * wheelLikeStep),
+    );
+    const focal = this.getCanvasCenterFocal();
+    this.panzoom.zoomToPoint(targetScale, {
+      clientX: focal.x,
+      clientY: focal.y,
+    });
+  }
+
   private createPageSelector() {
     let currentIndex = this.currentPageIndex;
     const select = document.createElement("select");

From 0254db365b323a934d90182e461237d86e5a5967 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Thu, 12 Mar 2026 13:58:43 +0100
Subject: [PATCH 3/3] Bumps tiffviewer package version

---
 packages/tiffviewer/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/tiffviewer/package.json b/packages/tiffviewer/package.json
index 42f8f7a2..a60739cf 100644
--- a/packages/tiffviewer/package.json
+++ b/packages/tiffviewer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@galaxyproject/tiffviewer",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A visualization for Tiff files based on GeoTIFF and PanZoom libraries.",
   "license": "MIT",
   "files": [