med-viewer-sdk 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "med-viewer-sdk",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "main": "dist/med-viewer-sdk.umd.js",
   "module": "dist/med-viewer-sdk.mjs",
   "types": "dist/med-viewer-sdk.d.ts",

package/src/core/Engine.ts

@@ -1,62 +1,65 @@
-import OpenSeadragon from "openseadragon";
-import type OpenSeadragonType from "openseadragon";
-
-import {
-  ShapeLabelsFormatter,
-  injectShapeLabelStyles,
-} from "@/plugins/ShapeLabelsFormatter";
-
-import { AnnoAnnotator } from "./AnnoAnnotator";
-import { MedToolbar, type ToolbarOptions } from "./Toolbar";
-import {
-  ColorAdjustPlugin,
-  type ColorAdjustOptions,
-} from "./ColorAdjustPlugin";
-import { SelectionPlugin, type SelectionOptions } from "./SelectionPlugin";
-import { ScalebarPlugin, type ScalebarOptions } from "./Scalebar";
-import {
-  MagnificationPlugin,
-  type MagnificationOptions,
-} from "./Magnification";
-
-import { Locale, setLocale } from "../i18n/i18n";
+import type OpenSeadragonType from 'openseadragon'
+import OpenSeadragon from 'openseadragon'
+
+import { ShapeLabelsFormatter, injectShapeLabelStyles } from '@/plugins/ShapeLabelsFormatter'
+
+import { AnnoAnnotator } from './AnnoAnnotator'
+import { ColorAdjustPlugin, type ColorAdjustOptions } from './ColorAdjustPlugin'
+import { MagnificationPlugin, type MagnificationOptions } from './Magnification'
+import { ScalebarPlugin, type ScalebarOptions } from './Scalebar'
+import { SelectionPlugin, type SelectionOptions } from './SelectionPlugin'
+import { MedToolbar, type ToolbarOptions } from './Toolbar'
+
+import { Locale, setLocale } from '../i18n/i18n'
 /**
  * 引擎配置接口
  */
 export interface MedEngineOptions {
-  osdOptions: OpenSeadragonType.Options;
-  locale?: Locale; // 国际化语言设置
+  osdOptions: OpenSeadragonType.Options
+  locale?: Locale // 国际化语言设置
   plugins?: {
-    annotorious?: boolean | any; // 是否启用 Annotorious 插件
-    toolbar?: boolean | ToolbarOptions; // 是否启用工具栏插件
-    colorAdjust?: boolean | ColorAdjustOptions; // 是否启用色彩调节插件
-    selection?: boolean | SelectionOptions; // 是否启用选择插件
-    scalebar?: boolean | ScalebarOptions; // 是否启用比例尺插件
-    magnification?: boolean | MagnificationOptions; // 是否启用放大镜插件
-  };
+    annotorious?: boolean | any // 是否启用 Annotorious 插件
+    toolbar?: boolean | ToolbarOptions // 是否启用工具栏插件
+    colorAdjust?: boolean | ColorAdjustOptions // 是否启用色彩调节插件
+    selection?: boolean | SelectionOptions // 是否启用选择插件
+    scalebar?: boolean | ScalebarOptions // 是否启用比例尺插件
+    magnification?: boolean | MagnificationOptions // 是否启用放大镜插件
+  }
 }
 
 export interface AiBoxRectLabel {
-  label: string;
-  value: string;
+  label: string
+  value: string
   style?: {
-    color: string;
-    fontSize: number;
-    [key: string]: any; // 允许任意扩展
-  };
+    color: string
+    fontSize: number
+    [key: string]: any // 允许任意扩展
+  }
 }
 
 export interface AiBoxRect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
+  x: number
+  y: number
+  width: number
+  height: number
+  style: {
+    border: string
+    fontSize: number
+    [key: string]: any // 允许任意扩展
+  }
+  labels: Array<AiBoxRectLabel>
+}
+
+export interface SelectionBox {
+  x: number
+  y: number
+  width: number
+  height: number
   style: {
-    border: string;
-    fontSize: number;
-    [key: string]: any; // 允许任意扩展
-  };
-  labels: Array<AiBoxRectLabel>;
+    border: string
+    fontSize: number
+    [key: string]: any // 允许任意扩展
+  }
 }
 
 /**
@@ -64,32 +67,31 @@ export interface AiBoxRect {
  * 职责：初始化 OpenSeadragon，管理插件生命周期
  */
 export class MedViewerEngine {
-  public viewer: OpenSeadragon.Viewer;
+  public viewer: OpenSeadragon.Viewer
   // public konva: KonvaAnnotator | null = null;
-  public anno: AnnoAnnotator | null = null;
-  public toolbar: MedToolbar | null = null;
-  public colorAdjust: ColorAdjustPlugin | null = null;
-  public selection: SelectionPlugin | null = null;
-  public scalebar: ScalebarPlugin | null = null;
-  public magnification: MagnificationPlugin | null = null;
-  private options: MedEngineOptions;
-  private events: Map<string, Set<Function>> = new Map();
-
+  public anno: AnnoAnnotator | null = null
+  public toolbar: MedToolbar | null = null
+  public colorAdjust: ColorAdjustPlugin | null = null
+  public selection: SelectionPlugin | null = null
+  public scalebar: ScalebarPlugin | null = null
+  public magnification: MagnificationPlugin | null = null
+  private options: MedEngineOptions
+  private events: Map<string, Set<Function>> = new Map()
 
   constructor(options: MedEngineOptions) {
     if (!options.osdOptions) {
-      throw new Error("osdOptions is required");
+      throw new Error('osdOptions is required')
     }
 
     if (options.locale) {
-      setLocale(options.locale);
+      setLocale(options.locale)
     }
 
     // 合并默认配置
     const osdOptions: OpenSeadragonType.Options = {
-      id: "osd-container",
-      crossOriginPolicy: "Anonymous",
-      prefixUrl: options.osdOptions?.prefixUrl || "",
+      id: 'osd-container',
+      crossOriginPolicy: 'Anonymous',
+      prefixUrl: options.osdOptions?.prefixUrl || '',
       opacity: 1,
       preload: false,
       immediateRender: false,
@@ -119,12 +121,12 @@ export class MedViewerEngine {
       // --- Navigator 小图 ---
       showNavigator: true,
       navigatorSizeRatio: 0.15,
-      navigatorPosition: "TOP_RIGHT",
+      navigatorPosition: 'TOP_RIGHT',
       navigatorAutoFade: false,
       navigatorOpacity: 0.8,
-      navigatorBackground: "#fff",
-      navigatorBorderColor: "#aaa",
-      navigatorDisplayRegionColor: "#f21616",
+      navigatorBackground: '#fff',
+      navigatorBorderColor: '#aaa',
+      navigatorDisplayRegionColor: '#f21616',
 
       // --- 控件 ---
       showNavigationControl: false, // 你自己做 UI 更专业
@@ -138,22 +140,22 @@ export class MedViewerEngine {
       gestureSettingsMouse: {
         dragToPan: true,
         clickToZoom: false,
-        dblClickToZoom: false,
+        dblClickToZoom: false
       },
       gestureSettingsTouch: {
         flickEnabled: false,
-        pinchToZoom: true,
+        pinchToZoom: true
       },
 
-      ...options.osdOptions,
-    };
-    options.osdOptions = osdOptions;
+      ...options.osdOptions
+    }
+    options.osdOptions = osdOptions
 
-    this.options = options;
+    this.options = options
 
     // 1. 初始化 OpenSeadragon
 
-    this.viewer = OpenSeadragon(osdOptions);
+    this.viewer = OpenSeadragon(osdOptions)
 
     // this.viewer.addOnceHandler("open", () => {
     //   this.viewer.viewport && this.viewer.viewport.resize();
@@ -161,20 +163,11 @@ export class MedViewerEngine {
     //   // const isWebGL = this.viewer.drawer instanceof OpenSeadragon.WebGLDrawer;
     // });
 
-    this.viewer.addOnceHandler("open", () => {
+    this.viewer.addOnceHandler('open', () => {
       // this.viewer.viewport && this.viewer.viewport.resize();
-      this.viewer.viewport.goHome();
-      this.emit("ready");
-      // 3. 加载AI标注
-      // if (this.options?.aiMarks?.aiBoxes) {
-      //   this.loadAIMarks(
-      //     this.options?.aiMarks?.aiBoxes || [],
-      //     this.options?.aiMarks?.showLabel || false,
-      //   );
-      // }
-      console.log(
-        "[MedViewerEngine] First tile loaded, refreshing viewer layout.",
-      );
+      this.viewer.viewport.goHome()
+      this.emit('ready')
+      console.log('[MedViewerEngine] First tile loaded, refreshing viewer layout.')
       // console.log(this.viewer.viewport.getBoundsNoRotate());
 
       // setTimeout(() => {
@@ -183,13 +176,10 @@ export class MedViewerEngine {
       //   console.log("[MedViewerEngine] Viewer layout refreshed after tile load.");
       // })
       // this.viewer.viewport.resize();
-    });
+    })
 
     // 2. 初始化插件
-    this.initPlugins();
-
-
-
+    this.initPlugins()
 
     // 优化：强制刷新 OSD 布局，确保显示完整
   }
@@ -199,81 +189,66 @@ export class MedViewerEngine {
    * 解决异步 DOM 挂载问题，防止 Annotorious 初始化时找不到 Canvas
    */
   private initPlugins(): void {
-    const { plugins } = this.options;
-    if (!plugins) return;
+    const { plugins } = this.options
+    if (!plugins) return
     // --- Scalebar 插件初始化 ---
     if (plugins.scalebar) {
-      const scalebarConfig =
-        typeof plugins.scalebar === "object" ? plugins.scalebar : {};
-      this.scalebar = new ScalebarPlugin(this.viewer, scalebarConfig);
-      console.log("[MedEngine] Scalebar plugin initialized.");
+      const scalebarConfig = typeof plugins.scalebar === 'object' ? plugins.scalebar : {}
+      this.scalebar = new ScalebarPlugin(this.viewer, scalebarConfig)
+      console.log('[MedEngine] Scalebar plugin initialized.')
     }
 
     // --- Annotorious 插件初始化 ---
     // 关键：解决 "Cannot set properties of undefined (setting 'display')"
     // Annotorious v3 必须等待 OSD 的 Canvas 元素创建并挂载后才能初始化
     if (plugins.annotorious) {
-      const annoConfig =
-        typeof plugins.annotorious === "object" ? plugins.annotorious : {};
+      const annoConfig = typeof plugins.annotorious === 'object' ? plugins.annotorious : {}
       if (!annoConfig.locale) {
-        annoConfig.locale = this.options.locale || "zh-CN";
+        annoConfig.locale = this.options.locale || 'zh-CN'
       }
 
       // 如果formatter为对象，则渲染默认格式化，需要添加样式
-      if (typeof annoConfig.options?.formatter === "object") {
-        const pixelsPerMeter =
-          annoConfig.options?.formatter?.pixelsPerMeter || 1;
-        const showMeasure = annoConfig.options?.formatter?.showMeasure || false;
-        injectShapeLabelStyles();
-        annoConfig.formatter = ShapeLabelsFormatter(
-          pixelsPerMeter,
-          showMeasure,
-        );
+      if (typeof annoConfig.options?.formatter === 'object') {
+        const pixelsPerMeter = annoConfig.options?.formatter?.pixelsPerMeter || 1
+        const showMeasure = annoConfig.options?.formatter?.showMeasure || false
+        injectShapeLabelStyles()
+        annoConfig.formatter = ShapeLabelsFormatter(pixelsPerMeter, showMeasure)
       }
       if (this.viewer.isOpen()) {
-        console.log(
-          "[MedEngine] Viewer is already open, mounting Annotorious.",
-          annoConfig,
-        );
+        console.log('[MedEngine] Viewer is already open, mounting Annotorious.', annoConfig)
         // 如果已经打开（极少见，除非 TileSource 是同步加载的本地对象）
-        this.mountAnnotorious(annoConfig);
+        this.mountAnnotorious(annoConfig)
       } else {
         // 推荐：监听 open 事件，确保 OSD 内部 DOM 结构完全就绪
-        this.viewer.addOnceHandler("open", () => {
-          console.log(
-            "[MedEngine] Viewer is already open, mounting Annotorious.",
-            annoConfig,
-          );
-          this.mountAnnotorious(annoConfig);
-        });
+        this.viewer.addOnceHandler('open', () => {
+          console.log('[MedEngine] Viewer is already open, mounting Annotorious.', annoConfig)
+          this.mountAnnotorious(annoConfig)
+        })
       }
     }
 
     // --- Toolbar 插件初始化 ---
     if (plugins.toolbar) {
-      const toolbarConfig =
-        typeof plugins.toolbar === "object" ? plugins.toolbar : {};
-      this.toolbar = new MedToolbar(this, toolbarConfig);
-      console.log("[MedEngine] Toolbar plugin initialized.");
+      const toolbarConfig = typeof plugins.toolbar === 'object' ? plugins.toolbar : {}
+      this.toolbar = new MedToolbar(this, toolbarConfig)
+      console.log('[MedEngine] Toolbar plugin initialized.')
     }
 
     // --- Selection 插件初始化 ---
     if (plugins.selection) {
-      const selectionConfig =
-        typeof plugins.selection === "object" ? plugins.selection : {};
-      this.selection = new SelectionPlugin(this.viewer, selectionConfig);
-      console.log("[MedEngine] Selection plugin initialized.");
+      const selectionConfig = typeof plugins.selection === 'object' ? plugins.selection : {}
+      this.selection = new SelectionPlugin(this.viewer, selectionConfig)
+      console.log('[MedEngine] Selection plugin initialized.')
     }
 
     // --- ColorAdjust 插件初始化 ---
     if (plugins.colorAdjust) {
       // 1. 显式提取配置对象，如果是 boolean 则给空对象
-      const config: any =
-        typeof plugins.colorAdjust === "object" ? plugins.colorAdjust : {};
+      const config: any = typeof plugins.colorAdjust === 'object' ? plugins.colorAdjust : {}
 
       // 2. 传入配置
-      this.colorAdjust = new ColorAdjustPlugin(this.viewer, config);
-      console.log("[MedEngine] ColorAdjust plugin initialized.");
+      this.colorAdjust = new ColorAdjustPlugin(this.viewer, config)
+      console.log('[MedEngine] ColorAdjust plugin initialized.')
       // if(this.viewer.isOpen()){
 
       // }
@@ -287,10 +262,9 @@ export class MedViewerEngine {
 
     // --- Magnification 插件初始化 ---
     if (plugins.magnification) {
-      const config: any =
-        typeof plugins.magnification === "object" ? plugins.magnification : {};
-      this.magnification = new MagnificationPlugin(this.viewer, config);
-      console.log("[MedEngine] Magnification plugin initialized.");
+      const config: any = typeof plugins.magnification === 'object' ? plugins.magnification : {}
+      this.magnification = new MagnificationPlugin(this.viewer, config)
+      console.log('[MedEngine] Magnification plugin initialized.')
     }
   }
 
@@ -299,111 +273,129 @@ export class MedViewerEngine {
    */
   private mountAnnotorious(config: any): void {
     try {
-      this.anno = new AnnoAnnotator(this, config);
-      console.log(
-        "[MedEngine] Annotorious plugin initialized. version: 2.7.17",
-      );
+      this.anno = new AnnoAnnotator(this, config)
+      console.log('[MedEngine] Annotorious plugin initialized. version: 2.7.17')
     } catch (error) {
-      console.error("[MedEngine] Failed to initialize Annotorious:", error);
+      console.error('[MedEngine] Failed to initialize Annotorious:', error)
     }
   }
 
   public loadAIMarks(aiBoxes: AiBoxRect[] = [], showLabel = false) {
- 
     // 清理旧的标注（如果需要）
-    this.clearAIMarks();
+    this.clearAIMarks()
     aiBoxes.forEach((box: AiBoxRect) => {
-      var elt = document.createElement("div");
-      elt.classList.add("ld_ai-box");
+      var elt = document.createElement('div')
+      elt.classList.add('ld-ai-box')
       if (box.style) {
-        Object.assign(elt.style, box.style);
+        Object.assign(elt.style, box.style)
       }
       if (showLabel) {
-        let text = document.createElement("div");
-        text.className = "celltext";
-        text.style.position = "absolute";
+        let text = document.createElement('div')
+        text.className = 'celltext'
+        text.style.position = 'absolute'
         // text.style.display = "none";
-        text.style.right = "102%";
-        text.style.top = "0";
-        text.style.color = "#333";
-        text.style.background = "#F5F5F5";
-        text.style.opacity = "0.7";
-        text.style.width = "max-content";
-        text.style.padding = "5px";
-        text.style.borderRadius = "8px";
+        text.style.right = '102%'
+        text.style.top = '0'
+        text.style.color = '#333'
+        text.style.background = '#F5F5F5'
+        text.style.opacity = '0.7'
+        text.style.width = 'max-content'
+        text.style.padding = '5px'
+        text.style.borderRadius = '8px'
         box.labels.forEach((label: AiBoxRectLabel) => {
-          const labelStyle = label.style || {};
-          text.innerHTML += `<div style="${Object.entries(labelStyle).map(([key, value]) => `${key}:${value}`).join(';')}">${label.label}&nbsp;:&nbsp;${label.value}</div>`;
-        });
-        elt.appendChild(text);
+          const labelStyle = label.style || {}
+          text.innerHTML += `<div style="${Object.entries(labelStyle)
+            .map(([key, value]) => `${key}:${value}`)
+            .join(';')}">${label.label}&nbsp;:&nbsp;${label.value}</div>`
+        })
+        elt.appendChild(text)
       }
-      const img = this.viewer.world.getItemAt(0);
-      const size = img.getContentSize(); // { x: 10240, y: 10240 }
+      const img = this.viewer.world.getItemAt(0)
+      const size = img.getContentSize() // { x: 10240, y: 10240 }
 
-      const x = box.x / size.x;
-      const y = box.y / size.y;
-      const w = box.width / size.x;
-      const h = box.height / size.y;
+      const x = box.x / size.x
+      const y = box.y / size.y
+      const w = box.width / size.x
+      const h = box.height / size.y
       this.viewer.addOverlay({
         element: elt,
-        location: new OpenSeadragon.Rect(
-          x,
-          y,
-          w,
-          h
-        )
-      });
-    });
-
+        location: new OpenSeadragon.Rect(x, y, w, h)
+      })
+    })
   }
+
   updateAIMarks(aiBoxes: AiBoxRect[] = [], showLabel = false) {
-    this.loadAIMarks(aiBoxes, showLabel);
+    this.loadAIMarks(aiBoxes, showLabel)
   }
 
   public clearAIMarks() {
     const aiBoxesList = Array.from(
-      document.getElementsByClassName("ld_ai-box") as HTMLCollectionOf<HTMLDivElement>
-    );
+      document.getElementsByClassName('ld-ai-box') as HTMLCollectionOf<HTMLDivElement>
+    )
     // 删除所有 overlay
-    aiBoxesList.forEach(box => {
-      this.viewer.removeOverlay(box);
-    });
+    aiBoxesList.forEach((box) => {
+      this.viewer.removeOverlay(box)
+    })
+  }
+  public loadSelectionBox(selections: SelectionBox[] = []) {
+    const aiBoxesList = Array.from(
+      document.getElementsByClassName('ld-selection-box') as HTMLCollectionOf<HTMLDivElement>
+    )
+    // 删除所有 overlay
+    aiBoxesList.forEach((box) => {
+      this.viewer.removeOverlay(box)
+    })
+    selections.forEach((selection: SelectionBox) => {
+      let elt = document.createElement('div')
+      elt.classList.add('ld-selection-box')
+      if (selection.style) {
+        Object.assign(elt.style, selection.style)
+      }
+      const img = this.viewer.world.getItemAt(0)
+      const size = img.getContentSize() // { x: 10240, y: 10240 }
+      const x = selection.x / size.x
+      const y = selection.y / size.y
+      const w = selection.width / size.x
+      const h = selection.height / size.y
+      this.viewer.addOverlay({
+        element: elt,
+        location: new OpenSeadragon.Rect(x, y, w, h)
+      })
+    })
   }
-
   public addHandler(event: string, handler: Function) {
     if (!this.events.has(event)) {
-      this.events.set(event, new Set());
+      this.events.set(event, new Set())
     }
-    this.events.get(event)!.add(handler);
+    this.events.get(event)!.add(handler)
   }
 
   public addOnceHandler(event: string, handler: Function) {
     const wrapper = (...args: any[]) => {
-      handler(...args);
-      this.removeHandler(event, wrapper);
-    };
-    this.addHandler(event, wrapper);
+      handler(...args)
+      this.removeHandler(event, wrapper)
+    }
+    this.addHandler(event, wrapper)
   }
 
   public removeHandler(event: string, handler: Function) {
-    this.events.get(event)?.delete(handler);
+    this.events.get(event)?.delete(handler)
   }
 
   private emit(event: string, payload?: any) {
-    this.events.get(event)?.forEach(fn => fn(payload));
+    this.events.get(event)?.forEach((fn) => fn(payload))
   }
 
-
   /**
    * 销毁引擎与所有插件
    */
   public destroy(): void {
     // this.konva?.destroy();
-    this.anno?.destroy();
-    this.toolbar?.destroy();
-    this.selection?.destroy();
-    this.scalebar?.destroy();
-    this.colorAdjust?.destroy();
-    this.viewer.destroy();
+    this.anno?.destroy()
+    this.toolbar?.destroy()
+    this.selection?.destroy()
+    this.scalebar?.destroy()
+    this.colorAdjust?.destroy()
+    this.viewer.destroy()
   }
 }

package/src/core/Magnification.ts

@@ -45,7 +45,6 @@ export class MagnificationPlugin {
     this.viewer = viewer;
     this.options = options;
 
-
     this.init();
   }
 
@@ -99,24 +98,22 @@ export class MagnificationPlugin {
 
   // 修改 updateMagnificationDisplay 方法
   private updateMagnificationDisplay = (): void => {
-
     if (this.options.type === "LD") {
       const tiledImage = this.viewer.world.getItemAt(0);
       if (!this.magnificationDisplay || !tiledImage) return;
-      const source =
-        ((this.viewer as any).source as any);
+      const source = (this.viewer as any).source as any;
       const width = (source as any).width;
       const height = (source as any).height;
-      const pixelsPerMeter = this.options.pixelsPerMeter || ((this.viewer as any).scalebarInstance?.pixelsPerMeter || 96);
+      const pixelsPerMeter =
+        this.options.pixelsPerMeter ||
+        (this.viewer as any).scalebarInstance?.pixelsPerMeter ||
+        96;
       const currentZoom = this.viewer.viewport.getZoom();
       // const len = Math.max(width, height);
       const conversionFactor = (20 * 0.0011 * pixelsPerMeter) / width;
       const magnification = conversionFactor * currentZoom;
 
       this.magnificationDisplay.innerHTML = `<span>${magnification.toFixed(2)}X</span>`;
-
-
-
     } else {
       const tiledImage = this.viewer.world.getItemAt(0);
       if (!this.magnificationDisplay || !tiledImage) return;
@@ -136,28 +133,57 @@ export class MagnificationPlugin {
       this.magnificationDisplay.innerHTML = `<span>${magnification.toFixed(2)}X</span>`;
     }
   };
+  public getMagnification(): number {
+    const tiledImage = this.viewer.world.getItemAt(0);
+    if (!tiledImage) return 0;
+
+    if (this.options.type === "LD") {
+      const source = (this.viewer as any).source as any;
+      const width = source?.width;
+      const pixelsPerMeter =
+        this.options.pixelsPerMeter ||
+        (this.viewer as any).scalebarInstance?.pixelsPerMeter ||
+        96;
+
+      const currentZoom = this.viewer.viewport.getZoom();
+      const conversionFactor = (20 * 0.0011 * pixelsPerMeter) / width;
+
+      return conversionFactor * currentZoom;
+    }
+
+    // --- OSD 模式 ---
+    const currentZoom = this.viewer.viewport.viewportToImageZoom(
+      this.viewer.viewport.getZoom(),
+    );
+
+    const baseMag =
+      ((this.viewer as any).source as any)?.max_magnification || 40;
+
+    return currentZoom * baseMag;
+  }
 
   // 修改 setMagnification 方法
   private setMagnification(mag: number): void {
     if (this.options.type === "LD") {
-
       const tiledImage = this.viewer.world.getItemAt(0);
       if (!this.magnificationDisplay || !tiledImage) return;
-      const source =
-        ((this.viewer as any).source as any);
+      const source = (this.viewer as any).source as any;
       const width = (source as any).width;
       const height = (source as any).height;
-      const pixelsPerMeter = this.options.pixelsPerMeter || ((this.viewer as any).scalebarInstance?.pixelsPerMeter || 96);
+      const pixelsPerMeter =
+        this.options.pixelsPerMeter ||
+        (this.viewer as any).scalebarInstance?.pixelsPerMeter ||
+        96;
       const currentZoom = this.viewer.viewport.getZoom();
       // const len = Math.max(width, height);
       const conversionFactor = (20 * 0.0011 * pixelsPerMeter) / width;
       const targetZoom = mag / conversionFactor;
-      this.viewer.viewport.zoomTo(targetZoom, this.viewer.viewport.getCenter(), false);
+      this.viewer.viewport.zoomTo(
+        targetZoom,
+        this.viewer.viewport.getCenter(),
+        false,
+      );
       this.updateMagnificationDisplay();
-
-
-
-
     } else {
       const tiledImage = this.viewer.world.getItemAt(0);
       if (!tiledImage) return;