med-viewer-sdk 0.1.11 → 0.1.13

package/src/core/SelectionPlugin.ts

@@ -1,174 +1,169 @@
-import OpenSeadragon from "openseadragon";
-import { t } from "../i18n/i18n";
-import "../plugins/openseadragon-selection.js";
-import selectionRest from "@/assets/icons/selection_rest.png";
-import selectionGroup from "@/assets/icons/selection_grouphover.png";
-import selectionHover from "@/assets/icons/selection_hover.png";
-import selectionDown from "@/assets/icons/selection_pressed.png";
-import selectionConfirmRest from "@/assets/icons/selection_confirm_rest.png";
-import selectionConfirmGroup from "@/assets/icons/selection_confirm_grouphover.png";
-import selectionConfirmHover from "@/assets/icons/selection_confirm_hover.png";
-import selectionConfirmDown from "@/assets/icons/selection_confirm_pressed.png";
-import selectionCancelRest from "@/assets/icons/selection_cancel_rest.png";
-import selectionCancelGroup from "@/assets/icons/selection_cancel_grouphover.png";
-import selectionCancelHover from "@/assets/icons/selection_cancel_hover.png";
-import selectionCancelDown from "@/assets/icons/selection_cancel_pressed.png";
+import OpenSeadragon from 'openseadragon'
+import { t } from '../i18n/i18n'
+import '../plugins/openseadragon-selection.js'
+import selectionRest from '@/assets/icons/selection_rest.png'
+import selectionGroup from '@/assets/icons/selection_grouphover.png'
+import selectionHover from '@/assets/icons/selection_hover.png'
+import selectionDown from '@/assets/icons/selection_pressed.png'
+import selectionConfirmRest from '@/assets/icons/selection_confirm_rest.png'
+import selectionConfirmGroup from '@/assets/icons/selection_confirm_grouphover.png'
+import selectionConfirmHover from '@/assets/icons/selection_confirm_hover.png'
+import selectionConfirmDown from '@/assets/icons/selection_confirm_pressed.png'
+import selectionCancelRest from '@/assets/icons/selection_cancel_rest.png'
+import selectionCancelGroup from '@/assets/icons/selection_cancel_grouphover.png'
+import selectionCancelHover from '@/assets/icons/selection_cancel_hover.png'
+import selectionCancelDown from '@/assets/icons/selection_cancel_pressed.png'
 
 // 最简单的办法：直接向 OSD 的字符串库注入翻译
-OpenSeadragon.setString("Tooltips.SelectionToggle", t("selection.toggle")); // 切换选择
-OpenSeadragon.setString("Tooltips.SelectionConfirm", t("selection.confirm")); // 确认选择
-OpenSeadragon.setString("Tooltips.SelectionCancel", t("selection.cancel")); // 取消选择
+OpenSeadragon.setString('Tooltips.SelectionToggle', t('selection.toggle')) // 切换选择
+OpenSeadragon.setString('Tooltips.SelectionConfirm', t('selection.confirm')) // 确认选择
+OpenSeadragon.setString('Tooltips.SelectionCancel', t('selection.cancel')) // 取消选择
 
 export interface SelectionOptions {
-  element?: HTMLElement | null;
-  showSelectionControl?: boolean;
-  toggleButton?: HTMLElement | null;
-  showConfirmDenyButtons?: boolean;
-  styleConfirmDenyButtons?: boolean;
-  returnPixelCoordinates?: boolean;
-  keyboardShortcut?: string;
-  rect?: OpenSeadragon.Rect | null;
-  allowRotation?: boolean;
-  startRotated?: boolean;
-  startRotatedHeight?: number;
-  restrictToImage?: boolean;
-  onSelection?: (rect: OpenSeadragon.Rect) => void;
-  onSelectionCanceled?: () => void;
-  onSelectionChange?: (rect: OpenSeadragon.Rect) => void;
-  onSelectionToggled?: (state: { enabled: boolean }) => void;
-  prefixUrl?: string | null;
+  element?: HTMLElement | null
+  showSelectionControl?: boolean
+  toggleButton?: HTMLElement | null
+  showConfirmDenyButtons?: boolean
+  styleConfirmDenyButtons?: boolean
+  returnPixelCoordinates?: boolean
+  keyboardShortcut?: string
+  rect?: OpenSeadragon.Rect | null
+  allowRotation?: boolean
+  startRotated?: boolean
+  startRotatedHeight?: number
+  restrictToImage?: boolean
+  onSelection?: (rect: OpenSeadragon.Rect) => void
+  onSelectionCanceled?: () => void
+  onSelectionChange?: (rect: OpenSeadragon.Rect) => void
+  onSelectionToggled?: (state: { enabled: boolean }) => void
+  prefixUrl?: string | null
   navImages?: {
     selection: {
-      REST: string;
-      GROUP: string;
-      HOVER: string;
-      DOWN: string;
-    };
+      REST: string
+      GROUP: string
+      HOVER: string
+      DOWN: string
+    }
     selectionConfirm: {
-      REST: string;
-      GROUP: string;
-      HOVER: string;
-      DOWN: string;
-    };
+      REST: string
+      GROUP: string
+      HOVER: string
+      DOWN: string
+    }
     selectionCancel: {
-      REST: string;
-      GROUP: string;
-      HOVER: string;
-      DOWN: string;
-    };
-  };
+      REST: string
+      GROUP: string
+      HOVER: string
+      DOWN: string
+    }
+  }
   borderStyle?: {
-    width: string;
-    color: string;
-  };
+    width: string
+    color: string
+  }
   handleStyle?: {
-    top: string;
-    left: string;
-    width: string;
-    height: string;
-    margin: string;
-    background: string;
-    border: string;
-  };
+    top: string
+    left: string
+    width: string
+    height: string
+    margin: string
+    background: string
+    border: string
+  }
   cornersStyle?: {
-    width: string;
-    height: string;
-    background: string;
-    border: string;
-  };
+    width: string
+    height: string
+    background: string
+    border: string
+  }
 }
 
 export class SelectionPlugin {
-  private viewer: OpenSeadragon.Viewer;
-  private selection: any; // OpenSeadragonSelection instance
-  private options: SelectionOptions;
+  private viewer: OpenSeadragon.Viewer
+  private selection: any // OpenSeadragonSelection instance
+  private options: SelectionOptions
 
   constructor(viewer: OpenSeadragon.Viewer, options: SelectionOptions = {}) {
-    this.viewer = viewer;
+    this.viewer = viewer
     this.options = {
       showSelectionControl: true,
       showConfirmDenyButtons: true,
       styleConfirmDenyButtons: true,
       returnPixelCoordinates: true,
-      keyboardShortcut: "c",
+      keyboardShortcut: 'c',
       allowRotation: true,
       startRotated: false,
       restrictToImage: false,
-      prefixUrl: "",
+      prefixUrl: '',
       navImages: {
         selection: {
           REST: selectionRest,
           GROUP: selectionGroup,
           HOVER: selectionHover,
-          DOWN: selectionDown,
+          DOWN: selectionDown
         },
         selectionConfirm: {
           REST: selectionConfirmRest,
           GROUP: selectionConfirmGroup,
           HOVER: selectionConfirmHover,
-          DOWN: selectionConfirmDown,
+          DOWN: selectionConfirmDown
         },
         selectionCancel: {
           REST: selectionCancelRest,
           GROUP: selectionCancelGroup,
           HOVER: selectionCancelHover,
-          DOWN: selectionCancelDown,
-        },
+          DOWN: selectionCancelDown
+        }
       },
       borderStyle: {
-        width: "2px", // 稍微加粗，更有质感
+        width: '2px', // 稍微加粗，更有质感
 
-        color: "#4CAF50", // 使用经典的“激活蓝”
+        color: '#4CAF50' // 使用经典的“激活蓝”
       },
 
       handleStyle: {
-        top: "50%",
-        left: "50%",
-        width: "10px", // 增大触点，方便鼠标点击
-        height: "10px",
-        margin: "-6px 0 0 -6px",
-        background: "#4CAF50", // 白色背景
-        border: "2px solid #4CAF50", // 蓝色边框
+        top: '50%',
+        left: '50%',
+        width: '10px', // 增大触点，方便鼠标点击
+        height: '10px',
+        margin: '-6px 0 0 -6px',
+        background: '#4CAF50', // 白色背景
+        border: '2px solid #4CAF50' // 蓝色边框
       },
-      
 
       cornersStyle: {
-        width: "12px", // 角部手柄稍微比边部大一点
-        height: "12px",
-        background: "#4CAF50",
-        border: "2px solid #4CAF50",
+        width: '12px', // 角部手柄稍微比边部大一点
+        height: '12px',
+        background: '#4CAF50',
+        border: '2px solid #4CAF50'
       },
 
-      ...options,
-    };
+      ...options
+    }
 
-    this.init();
+    this.init()
   }
 
   private init(): void {
     // 等待 viewer 初始化完成
-    this.viewer.addOnceHandler("open", () => {
-      this.setupSelection();
-    });
+    this.viewer.addOnceHandler('open', () => {
+      this.setupSelection()
+    })
   }
   private setupSelection(): void {
     try {
       // 检查是否有 selection 插件
-      if (typeof (this.viewer as any).selection !== "function") {
+      if (typeof (this.viewer as any).selection !== 'function') {
         console.warn(
-          "OpenSeadragonSelection plugin not found. Please include openseadragonselection.js",
-        );
-        return;
+          'OpenSeadragonSelection plugin not found. Please include openseadragonselection.js'
+        )
+        return
       }
 
       // 初始化 selection
-      this.selection = (this.viewer as any).selection(this.options);
-
+      this.selection = (this.viewer as any).selection(this.options)
     } catch (error) {
-      console.error(
-        "[SelectionPlugin] Failed to initialize selection plugin:",
-        error,
-      );
+      console.error('[SelectionPlugin] Failed to initialize selection plugin:', error)
     }
   }
 
@@ -177,7 +172,7 @@ export class SelectionPlugin {
    */
   enable(): void {
     if (this.selection) {
-      this.selection.enable();
+      this.selection.enable()
     }
   }
 
@@ -186,7 +181,7 @@ export class SelectionPlugin {
    */
   disable(): void {
     if (this.selection) {
-      this.selection.disable();
+      this.selection.disable()
     }
   }
 
@@ -195,7 +190,7 @@ export class SelectionPlugin {
    */
   toggleState(): void {
     if (this.selection) {
-      this.selection.toggleState();
+      this.selection.toggleState()
     }
   }
 
@@ -204,9 +199,9 @@ export class SelectionPlugin {
    */
   getSelection(): OpenSeadragon.Rect | null {
     if (this.selection) {
-      return this.selection.getSelection();
+      return this.selection.getSelection()
     }
-    return null;
+    return null
   }
 
   /**
@@ -214,7 +209,7 @@ export class SelectionPlugin {
    */
   setSelection(rect: OpenSeadragon.Rect): void {
     if (this.selection) {
-      this.selection.setSelection(rect);
+      this.selection.setSelection(rect)
     }
   }
 
@@ -223,7 +218,7 @@ export class SelectionPlugin {
    */
   clearSelection(): void {
     if (this.selection) {
-      this.selection.clearSelection();
+      this.selection.clearSelection()
     }
   }
 
@@ -232,9 +227,9 @@ export class SelectionPlugin {
    */
   isEnabled(): boolean {
     if (this.selection) {
-      return this.selection.isEnabled();
+      return this.selection.isEnabled()
     }
-    return false;
+    return false
   }
 
   /**
@@ -242,8 +237,7 @@ export class SelectionPlugin {
    */
   destroy(): void {
     if (this.selection) {
-      this.selection.destroy();
-      this.selection = null;
+      this.selection = null
     }
   }
 }

package/src/i18n/i18n.ts

@@ -1,7 +1,7 @@
-export type Locale = 'zh-CN' | 'en-US';
+export type Locale = 'zh-CN' | 'en-US'
 
 export interface I18nDict {
-  [key: string]: string | I18nDict;
+  [key: string]: string | I18nDict
 }
 
 const dicts: Record<Locale, I18nDict> = {
@@ -20,19 +20,18 @@ const dicts: Record<Locale, I18nDict> = {
       colorAdjust: '颜色调整',
       screenshot: '截图设置',
       brightness: '亮度',
-        contrast: '对比度',
-        saturation: '饱和度',
-        gamma: '伽马',
-        hue: '色相',
-        invert: '反色',
-        sepia: '怀旧',
-        greyscale: '灰度',
-
+      contrast: '对比度',
+      saturation: '饱和度',
+      gamma: '伽马',
+      hue: '色相',
+      invert: '反色',
+      sepia: '怀旧',
+      greyscale: '灰度'
     },
     selection: {
       toggle: '切换选择',
       confirm: '确认选择',
-      cancel: '取消选择',
+      cancel: '取消选择'
     },
     annotation: {
       length: '长度',
@@ -43,9 +42,8 @@ const dicts: Record<Locale, I18nDict> = {
       remark: '备注',
       radius: '半径',
       majorAxis: '长轴',
-      minorAxis: '短轴',
-
-    },
+      minorAxis: '短轴'
+    }
   },
   'en-US': {
     toolbar: {
@@ -61,19 +59,19 @@ const dicts: Record<Locale, I18nDict> = {
       annoSettings: 'Annotation Settings',
       colorAdjust: 'Color Adjust',
       screenshot: 'Screenshot Settings',
-        brightness: 'Brightness',
-        contrast: 'Contrast',
-        saturation: 'Saturation',
-        gamma: 'Gamma',
-        hue: 'Hue',
-        invert: 'Invert',
-        sepia: 'Sepia',
-        greyscale: 'Greyscale',
+      brightness: 'Brightness',
+      contrast: 'Contrast',
+      saturation: 'Saturation',
+      gamma: 'Gamma',
+      hue: 'Hue',
+      invert: 'Invert',
+      sepia: 'Sepia',
+      greyscale: 'Greyscale'
     },
     selection: {
       toggle: 'Toggle Selection',
       confirm: 'Confirm Selection',
-      cancel: 'Cancel Selection',
+      cancel: 'Cancel Selection'
     },
     annotation: {
       length: 'Length',
@@ -84,23 +82,23 @@ const dicts: Record<Locale, I18nDict> = {
       remark: 'Remark',
       radius: 'Radius',
       majorAxis: 'Major Axis',
-      minorAxis: 'Minor Axis',
-    },
-  },
-};
+      minorAxis: 'Minor Axis'
+    }
+  }
+}
 
-let currentLocale: Locale = 'zh-CN';
+let currentLocale: Locale = 'zh-CN'
 
 export function setLocale(locale: Locale) {
-  currentLocale = locale;
+  currentLocale = locale
 }
 
 export function t(path: string): string {
-  const keys = path.split('.');
-  let value: any = dicts[currentLocale];
+  const keys = path.split('.')
+  let value: any = dicts[currentLocale]
   for (const k of keys) {
-    value = value?.[k];
-    if (!value) return path;
+    value = value?.[k]
+    if (!value) return path
   }
-  return typeof value === 'string' ? value : path;
+  return typeof value === 'string' ? value : path
 }

package/src/index.ts

@@ -1,52 +1,45 @@
-import { MedViewerEngine, type MedEngineOptions } from "./core/Engine";
-import {
-  type ScalebarOptions,
-  ScalebarType,
-  ScalebarLocation
-} from "./core/Scalebar";
-import { AnnoAnnotator } from "./core/AnnoAnnotator";
-import { MedToolbar, ToolbarPosition, type ToolbarOptions } from "./core/Toolbar";
-import { SelectionPlugin, type SelectionOptions } from "./core/SelectionPlugin";
-import {
-  ColorAdjustPlugin,
-  type ColorAdjustOptions,
-} from "./core/ColorAdjustPlugin";
+import { AnnoAnnotator } from './core/AnnoAnnotator'
+import { ColorAdjustPlugin, type ColorAdjustOptions } from './core/ColorAdjustPlugin'
+import { MedViewerEngine, type MedEngineOptions } from './core/Engine'
 import {
   MagnificationPlugin,
   MagnificationPosition,
   MagnificationType,
-  type MagnificationOptions,
-} from "./core/Magnification";
+  type MagnificationOptions
+} from './core/Magnification'
+import { ScalebarLocation, ScalebarType, type ScalebarOptions } from './core/Scalebar'
+import { SelectionPlugin, type SelectionOptions } from './core/SelectionPlugin'
+import { MedToolbar, ToolbarPosition, type ToolbarOptions } from './core/Toolbar'
 
 // 1. 导出供模块化开发使用 (Vue/React/Vite)
 export {
-  MedViewerEngine,
-  type MedEngineOptions,
   AnnoAnnotator,
-  MedToolbar,
-  ToolbarPosition,
-  type ToolbarOptions,
-  SelectionPlugin,
-  type SelectionOptions,
   ColorAdjustPlugin,
-  type ColorAdjustOptions,
   MagnificationPlugin,
   MagnificationPosition,
   MagnificationType,
+  MedToolbar,
+  MedViewerEngine,
+  ScalebarLocation,
+  ScalebarType,
+  SelectionPlugin,
+  ToolbarPosition,
+  type ColorAdjustOptions,
   type MagnificationOptions,
+  type MedEngineOptions,
   type ScalebarOptions,
-  ScalebarType,
-  ScalebarLocation,
-};
+  type SelectionOptions,
+  type ToolbarOptions
+}
 
 // 2. 导出供原生 HTML 全局变量使用 (window.MedViewerSDK)
-if (typeof window !== "undefined") {
-  (window as any).MedViewerSDK = {
+if (typeof window !== 'undefined') {
+  ;(window as any).MedViewerSDK = {
     MedViewerEngine,
     AnnoAnnotator,
     MedToolbar,
     SelectionPlugin,
     ColorAdjustPlugin,
-    MagnificationPlugin,
-  };
+    MagnificationPlugin
+  }
 }