med-viewer-sdk 0.1.0

package/src/core/Engine.ts

@@ -0,0 +1,246 @@
+import OpenSeadragon from "openseadragon";
+
+import { KonvaAnnotator } from "./KonvaAnnotator";
+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';
+
+/**
+ * 引擎配置接口
+ */
+export interface MedEngineOptions {
+  element: HTMLElement; // 承载视图的 DOM 容器
+  tileSource: string | any; // DZI 路径、Tile 配置或 SVS 切片接口
+  navigatorBorderRadius?: number; // 导航器圆角半径
+  prefixUrl?: string; // OSD 图标资源路径
+  plugins?: {
+    konva?: boolean | any; // 是否启用 Konva 插件
+    annotorious?: boolean | any; // 是否启用 Annotorious 插件
+    toolbar?: boolean | ToolbarOptions; // 是否启用工具栏插件
+    colorAdjust?: boolean | ColorAdjustOptions; // 是否启用色彩调节插件
+    selection?: boolean | SelectionOptions; // 是否启用选择插件
+    scalebar?: boolean | ScalebarOptions; // 是否启用比例尺插件
+  };
+}
+
+/**
+ * 医学影像核心引擎
+ * 职责：初始化 OpenSeadragon，管理插件生命周期
+ */
+export class MedViewerEngine {
+  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;
+  private options: MedEngineOptions;
+
+  constructor(options: MedEngineOptions) {
+    // 合并默认配置
+    const openseadragonOptions = {
+      id: "osd-container",
+      crossOriginPolicy: "Anonymous",
+      prefixUrl: options.prefixUrl || '',
+      // --- Viewer 基础 ---
+      //useCanvas: true, // Canvas 渲染更稳定 //已经弃用了
+      drawer: [ "webgl","canvas"],
+      opacity: 1,
+      preload: false,
+      immediateRender: false,
+      defaultZoomLevel: 0,
+      degrees: 0,
+      flipped: false,
+
+      // --- 缩放控制 ---
+      minZoomImageRatio: 0.9, // 文档/病理混合场景最佳
+      maxZoomPixelRatio: 2.0, // 允许更高分辨率细节
+      smoothTileEdgesMinZoom: 1.1,
+      animationTime: 0.8, // 动画速度更自然
+      springStiffness: 10, // 更适合标注（减少漂移）
+      pixelsPerWheelLine: 120, // 标准滚轮灵敏度
+      minScrollDeltaTime: 20,
+
+      // --- 平移控制 ---
+      panHorizontal: true,
+      panVertical: true,
+      constrainDuringPan: true, // 必须开：Konva overlay 才不会漂移
+      visibilityRatio: 0.2, // 边缘可见比例
+
+      // --- 禁止 wrap（你现在的配置是错误的）---
+      wrapHorizontal: false,
+      wrapVertical: false,
+
+      // --- Navigator 小图 ---
+      showNavigator: true,
+      navigatorSizeRatio: 0.15,
+      navigatorPosition: "TOP_RIGHT",
+      navigatorAutoFade: false,
+      navigatorOpacity: 0.8,
+      navigatorBackground: "#fff",
+      navigatorBorderColor: "#aaa",
+      navigatorDisplayRegionColor: "#f21616",
+
+      // --- 控件 ---
+      showNavigationControl: false, // 你自己做 UI 更专业
+      rotationIncrement: 90,
+
+      // --- 性能 ---
+      maxTilesPerFrame: 3,
+      maxImageCacheCount: 200,
+
+      // --- 手势 ---
+      gestureSettingsMouse: {
+        dragToPan: true,
+        clickToZoom: false,
+        dblClickToZoom: false,
+        contextMenu: true,
+      },
+      gestureSettingsTouch: {
+        flickEnabled: false,
+        pinchToZoom: true,
+        panToNextImage: false,
+        contextMenu: true,
+      },
+      plugins: {
+        konva: false,
+        annotorious: false,
+        toolbar: false,
+        selection: false,
+      },
+      ...options,
+    };
+
+    this.options = openseadragonOptions;
+
+    // 1. 初始化 OpenSeadragon
+    this.viewer = OpenSeadragon(this.options);
+
+
+    this.viewer.addOnceHandler("open", () => {
+      // const isWebGL = this.viewer.drawer instanceof OpenSeadragon.WebGLDrawer;
+    });
+
+    // 2. 初始化插件
+    this.initPlugins();
+  }
+
+  /**
+   * 内部插件初始化逻辑
+   * 解决异步 DOM 挂载问题，防止 Annotorious 初始化时找不到 Canvas
+   */
+  private initPlugins(): void {
+    const { plugins } = this.options;
+    if (!plugins) return;
+
+    // --- Konva 插件初始化 ---
+    // Konva 依赖于容器尺寸，通常在 OSD 构造后即可初始化
+    if (plugins.konva) {
+      this.konva = new KonvaAnnotator(this);
+      console.log("[MedEngine] Konva 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 : {};
+
+      if (this.viewer.isOpen()) {
+        // 如果已经打开（极少见，除非 TileSource 是同步加载的本地对象）
+        this.mountAnnotorious(annoConfig);
+      } else {
+        // 推荐：监听 open 事件，确保 OSD 内部 DOM 结构完全就绪
+        this.viewer.addOnceHandler("open", () => {
+          this.mountAnnotorious(annoConfig);
+        });
+      }
+    }
+
+    // --- Toolbar 插件初始化 ---
+    if (plugins.toolbar) {
+      const toolbarConfig =
+        typeof plugins.toolbar === "object" ? plugins.toolbar : {};
+      this.toolbar = new MedToolbar(this, toolbarConfig);
+    }
+
+    // --- Selection 插件初始化 ---
+    if (plugins.selection) {
+      const selectionConfig =
+        typeof plugins.selection === "object" ? plugins.selection : {};
+      this.selection = new SelectionPlugin(this.viewer, selectionConfig);
+    }
+
+    // --- Scalebar 插件初始化 ---
+    if (plugins.scalebar) {
+      const scalebarConfig =
+        typeof plugins.scalebar === "object" ? plugins.scalebar : {};
+      this.scalebar = new ScalebarPlugin(this.viewer, scalebarConfig);
+    }
+
+    // --- ColorAdjust 插件初始化 ---
+    // --- ColorAdjust 插件初始化 ---
+    // if (plugins.colorAdjust) {
+    //   const adjustConfig =
+    //     typeof plugins.colorAdjust === "object" ? plugins.colorAdjust : {};
+    //   this.colorAdjust = new ColorAdjustPlugin(this, adjustConfig);
+    // }
+  }
+
+  /**
+   * 真正挂载 Annotorious 的私有方法
+   */
+  private mountAnnotorious(config: any): void {
+    try {
+      this.anno = new AnnoAnnotator(this, config);
+
+      console.log("[MedEngine] Annotorious plugin initialized.", this.anno);
+    } catch (error) {
+      console.error("[MedEngine] Failed to initialize Annotorious:", error);
+    }
+  }
+
+  /**
+   * 统一切换交互模式
+   * @param mode 'browse' | 'konva' | 'anno'
+   */
+  public setInteractionEffect(mode: "browse" | "konva" | "anno"): void {
+    // 先重置状态
+    this.konva?.setEnabled(false);
+    this.anno?.setEnabled(false);
+
+    switch (mode) {
+      case "konva":
+        this.konva?.setEnabled(true);
+        break;
+      case "anno":
+        this.anno?.setEnabled(true);
+        break;
+      case "browse":
+      default:
+        // 默认 OSD 导航已在上述 setEnabled(false) 中恢复
+        break;
+    }
+  }
+
+  /**
+   * 销毁引擎与所有插件
+   */
+  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.options.element.innerHTML = "";
+  }
+}

package/src/core/KonvaAnnotator.ts

@@ -0,0 +1,185 @@
+import Konva from 'konva';
+import { MedViewerEngine } from './Engine';
+import { BaseAnnotator } from './BaseAnnotator';
+
+export class KonvaAnnotator extends BaseAnnotator {
+  public stage: Konva.Stage;
+  public layer: Konva.Layer;
+  private overlay: HTMLDivElement;
+  
+  // 内部绘图状态
+  private isDrawing: boolean = false;
+  private currentShape: Konva.Rect | Konva.Arrow | null = null;
+  private currentTool: 'rect' | 'arrow' | null = null;
+  private startPoint: { x: number; y: number } = { x: 0, y: 0 };
+
+  constructor(engine: MedViewerEngine) {
+    super(engine);
+    
+    const viewerElement = this.engine.viewer.element;
+
+    // 1. 创建覆盖层
+    this.overlay = document.createElement('div');
+    this.overlay.className = 'konva-annotator-overlay';
+    this.overlay.style.cssText = `
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      pointer-events: none;
+      z-index: 10;
+    `;
+    viewerElement.appendChild(this.overlay);
+
+    // 2. 初始化 Konva Stage
+    this.stage = new Konva.Stage({
+      container: this.overlay,
+      width: viewerElement.clientWidth,
+      height: viewerElement.clientHeight
+    });
+
+    this.layer = new Konva.Layer();
+    this.stage.add(this.layer);
+
+    // 3. 开启同步与事件监听
+    // this.initSync();
+    this.initDrawingEvents();
+  }
+
+  /**
+   * 实现基类方法：启用/禁用标注层
+   */
+  public setEnabled(enabled: boolean): void {
+    this.isEnabled = enabled;
+    this.overlay.style.pointerEvents = enabled ? 'auto' : 'none';
+    this.engine.viewer.setMouseNavEnabled(!enabled); // 绘图时禁用 OSD 拖拽
+    
+    if (enabled) {
+      this.stage.container().style.cursor = 'crosshair';
+    } else {
+      this.stage.container().style.cursor = 'default';
+      this.setTool(null);
+    }
+  }
+
+  /**
+   * 实现基类方法：设置工具
+   */
+  public setTool(tool: 'rect' | 'arrow' | null): void {
+    this.currentTool = tool;
+  }
+
+  /**
+   * 核心同步逻辑：保持 Canvas 与 OSD 图片位置重合
+   */
+  // private initSync(): void {
+  //   const sync = () => {
+  //     const viewport = this.engine.viewer.viewport;
+  //     const zoom = viewport.getZoom(true);
+  //     const containerWidth = viewport.getContainerSize().x;
+  //     const pixelPos = viewport.pixelFromPoint(new Konva.util.Point(0, 0), true);
+      
+  //     const konvaScale = zoom * containerWidth;
+
+  //     this.stage.position({ x: pixelPos.x, y: pixelPos.y });
+  //     this.stage.scale({ x: konvaScale, y: konvaScale });
+  //     this.stage.batchDraw();
+  //   };
+
+  //   this.engine.viewer.addHandler('animation', sync);
+  //   this.engine.viewer.addHandler('canvas-drag', sync);
+  //   this.engine.viewer.addHandler('viewport-change', sync);
+    
+  //   this.engine.viewer.addHandler('resize', () => {
+  //     const el = this.engine.viewer.element;
+  //     this.stage.width(el.clientWidth);
+  //     this.stage.height(el.clientHeight);
+  //     sync();
+  //   });
+
+  //   sync();
+  // }
+
+  /**
+   * 监听绘图相关的鼠标事件
+   */
+  private initDrawingEvents(): void {
+    this.stage.on('mousedown touchstart', (e) => {
+      if (!this.isEnabled || !this.currentTool) return;
+
+      this.isDrawing = true;
+      const pos = this.getRelativePointerPosition();
+      this.startPoint = pos;
+
+      if (this.currentTool === 'rect') {
+        this.currentShape = new Konva.Rect({
+          x: pos.x,
+          y: pos.y,
+          width: 0,
+          height: 0,
+          stroke: '#00ff00',
+          strokeWidth: 2,
+          strokeScaleEnabled: false, // 关键：保证缩放时线宽不变
+          draggable: true
+        });
+      }
+      
+      if (this.currentShape) {
+        this.layer.add(this.currentShape);
+      }
+    });
+
+    this.stage.on('mousemove touchmove', () => {
+      if (!this.isDrawing || !this.currentShape) return;
+
+      const pos = this.getRelativePointerPosition();
+      
+      if (this.currentTool === 'rect') {
+        const shape = this.currentShape as Konva.Rect;
+        shape.width(pos.x - this.startPoint.x);
+        shape.height(pos.y - this.startPoint.y);
+      }
+
+      this.layer.batchDraw();
+    });
+
+    this.stage.on('mouseup touchend', () => {
+      this.isDrawing = false;
+      this.currentShape = null;
+    });
+  }
+
+  /**
+   * 工具方法：获取相对于图像(0~1)空间的鼠标位置
+   */
+  private getRelativePointerPosition() {
+    const transform = this.stage.getAbsoluteTransform().copy().invert();
+    const pos = this.stage.getPointerPosition() || { x: 0, y: 0 };
+    return transform.point(pos);
+  }
+
+  // --- 实现基类要求的其他数据方法 ---
+
+  public getAnnotations(): any[] {
+    // 导出为简单 JSON 数组
+    return this.layer.getChildren().map(node => node.toObject());
+  }
+
+  public setAnnotations(data: any[]): void {
+    this.clear();
+    data.forEach(obj => {
+      const node = Konva.Node.create(obj);
+      this.layer.add(node);
+    });
+    this.layer.draw();
+  }
+
+  public clear(): void {
+    this.layer.destroyChildren();
+    this.layer.draw();
+  }
+
+  public destroy(): void {
+    this.stage.destroy();
+    this.overlay.remove();
+  }
+}

package/src/core/Scalebar.ts

@@ -0,0 +1,87 @@
+import OpenSeadragon from "openseadragon";
+import "../plugins/openseadragon-scalebar.js";
+
+export enum ScalebarType {
+  NONE = 0,
+  MICROSCOPY = 1,
+  MAP = 2,
+}
+
+export enum ScalebarLocation {
+  NONE = 0,
+  TOP_LEFT = 1,
+  TOP_RIGHT = 2,
+  BOTTOM_RIGHT = 3,
+  BOTTOM_LEFT = 4,
+}
+
+export interface ScalebarOptions {
+  type?: ScalebarType;
+  pixelsPerMeter?: number;
+  xOffset?: number;
+  yOffset?: number;
+  stayInsideImage?: boolean;
+  color?: string;
+  fontColor?: string;
+  backgroundColor?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  barThickness?: number;
+  minWidth?: string;
+  location?: ScalebarLocation;
+  referenceItemIdx?: number;
+  sizeAndTextRenderer?: (
+    ppm: number,
+    minSize: number,
+  ) => { size: number; text: string };
+}
+
+export class ScalebarPlugin {
+  private viewer: OpenSeadragon.Viewer;
+  private options: ScalebarOptions;
+  private scalebar: any; // OpenSeadragonScalebar instance
+  constructor(viewer: OpenSeadragon.Viewer, options: ScalebarOptions = {}) {
+    this.viewer = viewer;
+    //type传入字符串时，转换为枚举类型
+    if (typeof options.type === "string") {
+      options.type = ScalebarType[options.type as keyof typeof ScalebarType];
+    }
+    //location传入字符串时，转换为枚举类型
+    if (typeof options.location === "string") {
+      options.location =
+        ScalebarLocation[options.location as keyof typeof ScalebarLocation];
+    }
+    this.options = {
+      type: ScalebarType.MAP,
+      pixelsPerMeter: 1,
+      xOffset: 10,
+      yOffset: 10,
+      stayInsideImage: true,
+      color: "rgb(0, 0, 0)",
+      fontColor: "rgb(0, 0, 0)",
+      fontSize: "14px",
+      fontFamily: "sans-serif",
+      barThickness: 1.5,
+      minWidth: "75px",
+      location: ScalebarLocation.NONE,
+      referenceItemIdx: 0,
+      ...options,
+    };
+    console.log(this.options);
+
+    this.init();
+  }
+
+  private init(): void {
+    // Cast viewer to any to access the scalebar method added by the plugin
+    (this.viewer as any).scalebar(this.options);
+  }
+
+  public destroy(): void {
+    // Cleanup if necessary
+    if (this.scalebar && typeof this.scalebar.destroy === "function") {
+      this.scalebar.destroy();
+    }
+    this.scalebar = null;
+  }
+}