med-viewer-sdk 0.1.0 → 0.1.2

package/README.md

@@ -46,9 +46,9 @@ MedViewer SDK 是一个强大且灵活的医学图像查看 SDK，它基于 Open
 
 ```bash
 # 假设使用 npm 或 yarn 进行包管理
-npm install openseadragon konva # 根据需要添加其他依赖
+npm install openseadragon # 根据需要添加其他依赖
 # 或
-yarn add openseadragon konva
+yarn add openseadragon
 ```
 
 然后，在您的项目中引入 SDK：
@@ -165,6 +165,180 @@ const engine = new MedViewerEngine({
 });
 ```
 
+### 在 Vue 项目中使用
+
+`med-viewer-sdk` 可以在 Vue 2 或 Vue 3 项目中使用。由于 `vue` 是 `med-viewer-sdk` 的一个 `peerDependency`，您需要确保您的项目中已经安装了 `vue`。
+
+#### 1. 安装依赖
+
+在您的 Vue 项目中安装 `med-viewer-sdk` 及其 `peerDependencies`。
+
+```bash
+npm install med-viewer-sdk openseadragon vue # 根据您的 Vue 版本安装相应的 Vue 包
+# 或者使用 yarn
+yarn add med-viewer-sdk openseadragon vue
+```
+
+#### 2. 创建 Vue 组件
+
+创建一个 Vue 组件来封装 `MedViewerEngine` 的实例化和生命周期管理。
+
+**Vue 3 (Composition API):**
+
+```vue
+<template>
+  <div ref="viewerContainer" class="med-viewer-container"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { MedViewerEngine } from 'med-viewer-sdk';
+import OpenSeadragon from 'openseadragon'; // 如果需要 OpenSeadragon 类型
+
+const viewerContainer = ref<HTMLElement | null>(null);
+let medViewer: MedViewerEngine | null = null;
+
+onMounted(() => {
+  if (viewerContainer.value) {
+    medViewer = new MedViewerEngine({
+      element: viewerContainer.value,
+      viewerOptions: {
+        id: 'openseadragon-viewer',
+        prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
+        tileSources: {
+          type: 'image',
+          url: 'https://openseadragon.github.io/example-images/duomo/duomo.dzi'
+        },
+      },
+      plugins: {
+        toolbar: true,
+        selection: true,
+        scalebar: {
+          type: 'MICROSCOPY',
+          location: 'BOTTOM_LEFT',
+          color: 'rgb(255, 255, 255)',
+          fontColor: 'rgb(255, 255, 255)',
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        },
+        anno: true,
+        konva: true,
+        colorAdjust: {
+          initial: {
+            brightness: 1.2,
+            contrast: 0.8,
+            invert: true,
+          }
+        }
+      }
+    });
+
+    // 可以访问插件并进行操作
+    if (medViewer.selection) {
+      medViewer.selection.enable();
+      medViewer.selection.setSelectionMode('RECTANGLE');
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  if (medViewer) {
+    medViewer.destroy();
+    medViewer = null;
+  }
+});
+</script>
+
+<style scoped>
+.med-viewer-container {
+  width: 100%;
+  height: 80vh; /* 根据需要调整高度 */
+  background-color: #000;
+}
+</style>
+```
+
+**Vue 2 (Options API):**
+
+```vue
+<template>
+  <div ref="viewerContainer" class="med-viewer-container"></div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { MedViewerEngine } from 'med-viewer-sdk';
+import OpenSeadragon from 'openseadragon'; // 如果需要 OpenSeadragon 类型
+
+export default Vue.extend({
+  data() {
+    return {
+      medViewer: null as MedViewerEngine | null,
+    };
+  },
+  mounted() {
+    if (this.$refs.viewerContainer) {
+      this.medViewer = new MedViewerEngine({
+        element: this.$refs.viewerContainer as HTMLElement,
+        viewerOptions: {
+          id: 'openseadragon-viewer',
+          prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
+          tileSources: {
+            type: 'image',
+            url: 'https://openseadragon.github.io/example-images/duomo/duomo.dzi'
+          },
+        },
+        plugins: {
+          toolbar: true,
+          selection: true,
+          scalebar: {
+            type: 'MICROSCOPY',
+            location: 'BOTTOM_LEFT',
+            color: 'rgb(255, 255, 255)',
+            fontColor: 'rgb(255, 255, 255)',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          },
+          anno: true,
+          konva: true,
+          colorAdjust: {
+            initial: {
+              brightness: 1.2,
+              contrast: 0.8,
+              invert: true,
+            }
+          }
+        }
+      });
+
+      if (this.medViewer.selection) {
+        this.medViewer.selection.enable();
+        this.medViewer.selection.setSelectionMode('RECTANGLE');
+      }
+    }
+  },
+  beforeDestroy() { // Vue 2 使用 beforeDestroy
+    if (this.medViewer) {
+      this.medViewer.destroy();
+      this.medViewer = null;
+    }
+  },
+});
+</script>
+
+<style scoped>
+.med-viewer-container {
+  width: 100%;
+  height: 80vh; /* 根据需要调整高度 */
+  background-color: #000;
+}
+</style>
+```
+
+#### 3. 注意事项
+
+-   **CSS 导入**：如果 `med-viewer-sdk` 包含任何 CSS 样式，您可能需要在您的 Vue 项目的入口文件或相关组件中导入它。例如：`import 'med-viewer-sdk/dist/style.css';`
+-   **全局样式**：确保 `med-viewer-sdk` 的容器元素有足够的宽高，以便查看器能够正确渲染。
+-   **响应式数据**：`MedViewerEngine` 实例本身不是响应式的。如果您需要其内部状态在 Vue 中响应式，您可能需要手动将其属性或方法包装在 Vue 的响应式系统中。
+
 
 ## 引用方式
 

package/dist/core/Engine.d.ts

@@ -1,5 +1,4 @@
 import OpenSeadragon from "openseadragon";
-import { KonvaAnnotator } from "./KonvaAnnotator";
 import { AnnoAnnotator } from "./AnnoAnnotator";
 import { MedToolbar, type ToolbarOptions } from "./Toolbar";
 import { ColorAdjustPlugin, type ColorAdjustOptions } from "./ColorAdjustPlugin";
@@ -14,7 +13,6 @@ export interface MedEngineOptions {
     navigatorBorderRadius?: number;
     prefixUrl?: string;
     plugins?: {
-        konva?: boolean | any;
         annotorious?: boolean | any;
         toolbar?: boolean | ToolbarOptions;
         colorAdjust?: boolean | ColorAdjustOptions;
@@ -28,7 +26,6 @@ export interface MedEngineOptions {
  */
 export declare class MedViewerEngine {
     viewer: OpenSeadragon.Viewer;
-    konva: KonvaAnnotator | null;
     anno: AnnoAnnotator | null;
     toolbar: MedToolbar | null;
     colorAdjust: ColorAdjustPlugin | null;

package/dist/med-viewer-sdk.d.ts

@@ -1,6 +1,5 @@
 import { MedViewerEngine } from './core/Engine';
-import { KonvaAnnotator } from './core/KonvaAnnotator';
 import { AnnoAnnotator } from './core/AnnoAnnotator';
 import { MedToolbar } from './core/Toolbar';
 import { SelectionPlugin } from './core/SelectionPlugin';
-export { MedViewerEngine, KonvaAnnotator, AnnoAnnotator, MedToolbar, SelectionPlugin };
+export { MedViewerEngine, AnnoAnnotator, MedToolbar, SelectionPlugin };

package/dist/med-viewer-sdk.mjs

@@ -5,162 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import OpenSeadragon from "openseadragon";
-import Konva from "konva";
-class BaseAnnotator {
-  constructor(engine) {
-    __publicField(this, "engine");
-    __publicField(this, "isEnabled", false);
-    this.engine = engine;
-  }
-}
-class KonvaAnnotator extends BaseAnnotator {
-  constructor(engine) {
-    super(engine);
-    __publicField(this, "stage");
-    __publicField(this, "layer");
-    __publicField(this, "overlay");
-    // 内部绘图状态
-    __publicField(this, "isDrawing", false);
-    __publicField(this, "currentShape", null);
-    __publicField(this, "currentTool", null);
-    __publicField(this, "startPoint", { x: 0, y: 0 });
-    const viewerElement = this.engine.viewer.element;
-    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);
-    this.stage = new Konva.Stage({
-      container: this.overlay,
-      width: viewerElement.clientWidth,
-      height: viewerElement.clientHeight
-    });
-    this.layer = new Konva.Layer();
-    this.stage.add(this.layer);
-    this.initDrawingEvents();
-  }
-  /**
-   * 实现基类方法：启用/禁用标注层
-   */
-  setEnabled(enabled) {
-    this.isEnabled = enabled;
-    this.overlay.style.pointerEvents = enabled ? "auto" : "none";
-    this.engine.viewer.setMouseNavEnabled(!enabled);
-    if (enabled) {
-      this.stage.container().style.cursor = "crosshair";
-    } else {
-      this.stage.container().style.cursor = "default";
-      this.setTool(null);
-    }
-  }
-  /**
-   * 实现基类方法：设置工具
-   */
-  setTool(tool) {
-    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();
-  // }
-  /**
-   * 监听绘图相关的鼠标事件
-   */
-  initDrawingEvents() {
-    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;
-        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)空间的鼠标位置
-   */
-  getRelativePointerPosition() {
-    const transform = this.stage.getAbsoluteTransform().copy().invert();
-    const pos = this.stage.getPointerPosition() || { x: 0, y: 0 };
-    return transform.point(pos);
-  }
-  // --- 实现基类要求的其他数据方法 ---
-  getAnnotations() {
-    return this.layer.getChildren().map((node) => node.toObject());
-  }
-  setAnnotations(data) {
-    this.clear();
-    data.forEach((obj) => {
-      const node = Konva.Node.create(obj);
-      this.layer.add(node);
-    });
-    this.layer.draw();
-  }
-  clear() {
-    this.layer.destroyChildren();
-    this.layer.draw();
-  }
-  destroy() {
-    this.stage.destroy();
-    this.overlay.remove();
-  }
-}
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -12585,6 +12429,13 @@ var openseadragonAnnotorious_min = { exports: {} };
 var openseadragonAnnotorious_minExports = openseadragonAnnotorious_min.exports;
 const Annotorious = /* @__PURE__ */ getDefaultExportFromCjs(openseadragonAnnotorious_minExports);
 const annotorious_min = "";
+class BaseAnnotator {
+  constructor(engine) {
+    __publicField(this, "engine");
+    __publicField(this, "isEnabled", false);
+    this.engine = engine;
+  }
+}
 class AnnoAnnotator extends BaseAnnotator {
   constructor(engine, config = {}) {
     super(engine);
@@ -14065,7 +13916,7 @@ class ScalebarPlugin {
 class MedViewerEngine {
   constructor(options) {
     __publicField(this, "viewer");
-    __publicField(this, "konva", null);
+    // public konva: KonvaAnnotator | null = null;
     __publicField(this, "anno", null);
     __publicField(this, "toolbar", null);
     __publicField(this, "colorAdjust", null);
@@ -14138,7 +13989,6 @@ class MedViewerEngine {
         contextMenu: true
       },
       plugins: {
-        konva: false,
         annotorious: false,
         toolbar: false,
         selection: false
@@ -14159,10 +14009,6 @@ class MedViewerEngine {
     const { plugins } = this.options;
     if (!plugins)
       return;
-    if (plugins.konva) {
-      this.konva = new KonvaAnnotator(this);
-      console.log("[MedEngine] Konva plugin initialized.");
-    }
     if (plugins.annotorious) {
       const annoConfig = typeof plugins.annotorious === "object" ? plugins.annotorious : {};
       if (this.viewer.isOpen()) {
@@ -14202,15 +14048,11 @@ class MedViewerEngine {
    * @param mode 'browse' | 'konva' | 'anno'
    */
   setInteractionEffect(mode) {
-    var _a, _b, _c, _d;
-    (_a = this.konva) == null ? void 0 : _a.setEnabled(false);
-    (_b = this.anno) == null ? void 0 : _b.setEnabled(false);
+    var _a, _b;
+    (_a = this.anno) == null ? void 0 : _a.setEnabled(false);
     switch (mode) {
-      case "konva":
-        (_c = this.konva) == null ? void 0 : _c.setEnabled(true);
-        break;
       case "anno":
-        (_d = this.anno) == null ? void 0 : _d.setEnabled(true);
+        (_b = this.anno) == null ? void 0 : _b.setEnabled(true);
         break;
     }
   }
@@ -14218,13 +14060,12 @@ class MedViewerEngine {
    * 销毁引擎与所有插件
    */
   destroy() {
-    var _a, _b, _c, _d, _e, _f;
-    (_a = this.konva) == null ? void 0 : _a.destroy();
-    (_b = this.anno) == null ? void 0 : _b.destroy();
-    (_c = this.toolbar) == null ? void 0 : _c.destroy();
-    (_d = this.selection) == null ? void 0 : _d.destroy();
-    (_e = this.scalebar) == null ? void 0 : _e.destroy();
-    (_f = this.colorAdjust) == null ? void 0 : _f.destroy();
+    var _a, _b, _c, _d, _e;
+    (_a = this.anno) == null ? void 0 : _a.destroy();
+    (_b = this.toolbar) == null ? void 0 : _b.destroy();
+    (_c = this.selection) == null ? void 0 : _c.destroy();
+    (_d = this.scalebar) == null ? void 0 : _d.destroy();
+    (_e = this.colorAdjust) == null ? void 0 : _e.destroy();
     this.viewer.destroy();
     this.options.element.innerHTML = "";
   }
@@ -14232,7 +14073,6 @@ class MedViewerEngine {
 if (typeof window !== "undefined") {
   window.MedViewerSDK = {
     MedViewerEngine,
-    KonvaAnnotator,
     AnnoAnnotator,
     MedToolbar,
     SelectionPlugin
@@ -14241,7 +14081,6 @@ if (typeof window !== "undefined") {
 }
 export {
   AnnoAnnotator,
-  KonvaAnnotator,
   MedToolbar,
   MedViewerEngine,
   SelectionPlugin