med-viewer-sdk 0.1.0

package/src/core/SelectionPlugin.ts

@@ -0,0 +1,252 @@
+import OpenSeadragon from "openseadragon";
+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", "Toggle Selection"); // 切换选择
+OpenSeadragon.setString("Tooltips.SelectionConfirm", "Confirm Selection"); // 确认选择
+OpenSeadragon.setString("Tooltips.SelectionCancel", "Cancel Selection"); // 取消选择
+
+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;
+  navImages?: {
+    selection: {
+      REST: string;
+      GROUP: string;
+      HOVER: string;
+      DOWN: string;
+    };
+    selectionConfirm: {
+      REST: string;
+      GROUP: string;
+      HOVER: string;
+      DOWN: string;
+    };
+    selectionCancel: {
+      REST: string;
+      GROUP: string;
+      HOVER: string;
+      DOWN: string;
+    };
+  };
+  borderStyle?: {
+    width: string;
+    color: string;
+  };
+  handleStyle?: {
+    top: string;
+    left: string;
+    width: string;
+    height: string;
+    margin: string;
+    background: string;
+    border: string;
+  };
+  cornersStyle?: {
+    width: string;
+    height: string;
+    background: string;
+    border: string;
+  };
+}
+
+export class SelectionPlugin {
+  private viewer: OpenSeadragon.Viewer;
+  private selection: any; // OpenSeadragonSelection instance
+  private options: SelectionOptions;
+
+  constructor(viewer: OpenSeadragon.Viewer, options: SelectionOptions = {}) {
+    this.viewer = viewer;
+    this.options = {
+      showSelectionControl: true,
+      showConfirmDenyButtons: true,
+      styleConfirmDenyButtons: true,
+      returnPixelCoordinates: true,
+      keyboardShortcut: "c",
+      allowRotation: true,
+      startRotated: false,
+      restrictToImage: false,
+      prefixUrl: "",
+      navImages: {
+        selection: {
+          REST: selectionRest,
+          GROUP: selectionGroup,
+          HOVER: selectionHover,
+          DOWN: selectionDown,
+        },
+        selectionConfirm: {
+          REST: selectionConfirmRest,
+          GROUP: selectionConfirmGroup,
+          HOVER: selectionConfirmHover,
+          DOWN: selectionConfirmDown,
+        },
+        selectionCancel: {
+          REST: selectionCancelRest,
+          GROUP: selectionCancelGroup,
+          HOVER: selectionCancelHover,
+          DOWN: selectionCancelDown,
+        },
+      },
+      borderStyle: {
+        width: "2px", // 稍微加粗，更有质感
+
+        color: "#4CAF50", // 使用经典的“激活蓝”
+      },
+
+      handleStyle: {
+        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",
+      },
+
+      ...options,
+    };
+
+    this.init();
+  }
+
+  private init(): void {
+    // 等待 viewer 初始化完成
+    this.viewer.addOnceHandler("open", () => {
+      this.setupSelection();
+    });
+  }
+  private setupSelection(): void {
+    try {
+      // 检查是否有 selection 插件
+      if (typeof (this.viewer as any).selection !== "function") {
+        console.warn(
+          "OpenSeadragonSelection plugin not found. Please include openseadragonselection.js",
+        );
+        return;
+      }
+
+      // 初始化 selection
+      this.selection = (this.viewer as any).selection(this.options);
+
+      console.log(
+        "[SelectionPlugin] Selection plugin initialized",
+        this.selection,
+      );
+    } catch (error) {
+      console.error(
+        "[SelectionPlugin] Failed to initialize selection plugin:",
+        error,
+      );
+    }
+  }
+
+  /**
+   * 启用选择模式
+   */
+  enable(): void {
+    if (this.selection) {
+      this.selection.enable();
+    }
+  }
+
+  /**
+   * 禁用选择模式
+   */
+  disable(): void {
+    if (this.selection) {
+      this.selection.disable();
+    }
+  }
+
+  /**
+   * 切换选择模式状态
+   */
+  toggleState(): void {
+    if (this.selection) {
+      this.selection.toggleState();
+    }
+  }
+
+  /**
+   * 获取当前选择区域
+   */
+  getSelection(): OpenSeadragon.Rect | null {
+    if (this.selection) {
+      return this.selection.getSelection();
+    }
+    return null;
+  }
+
+  /**
+   * 设置选择区域
+   */
+  setSelection(rect: OpenSeadragon.Rect): void {
+    if (this.selection) {
+      this.selection.setSelection(rect);
+    }
+  }
+
+  /**
+   * 清除选择
+   */
+  clearSelection(): void {
+    if (this.selection) {
+      this.selection.clearSelection();
+    }
+  }
+
+  /**
+   * 检查是否启用选择模式
+   */
+  isEnabled(): boolean {
+    if (this.selection) {
+      return this.selection.isEnabled();
+    }
+    return false;
+  }
+
+  /**
+   * 销毁插件
+   */
+  destroy(): void {
+    if (this.selection) {
+      this.selection.destroy();
+      this.selection = null;
+    }
+  }
+}

package/src/core/Toolbar.ts

@@ -0,0 +1,370 @@
+import type { MedViewerEngine } from "./Engine";
+import buttonAnno from "@/assets/icons/tool_anno.png";
+import buttonSelection from "@/assets/icons/tool_selection.png";
+
+export type ToolbarPosition =
+  | "TOP_LEFT" | "TOP_CENTER" | "TOP_RIGHT"
+  | "BOTTOM_LEFT" | "BOTTOM_CENTER" | "BOTTOM_RIGHT"
+  | "MIDDLE_LEFT" | "MIDDLE_RIGHT";
+
+export interface ToolbarButton {
+  id: string;
+  label?: string;
+  icon?: string;
+  dropdownContent?: (engine: MedViewerEngine, hide: () => void) => HTMLElement;
+  onClick?: (engine: MedViewerEngine, hide: () => void) => void;
+}
+
+export interface ToolbarOptions {
+  position?: ToolbarPosition;
+  buttons?: ToolbarButton[];
+}
+
+/**
+ * 预设：标注工具下拉内容生成器
+ */
+const createAnnoDropdownContent = (engine: MedViewerEngine, hide: () => void): HTMLElement => {
+  const container = document.createElement("div");
+  container.className = "med-toolbar-dropdown-inner";
+
+  let selectedColor = "#ff0000";
+  const colorSection = document.createElement("div");
+  colorSection.innerHTML = `<div class="med-toolbar-section-title">标注颜色</div>`;
+  const colorGrid = document.createElement("div");
+  colorGrid.className = "med-color-grid";
+
+  const colors = ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#00ffff", "#ffffff"];
+  colors.forEach((c) => {
+    const dot = document.createElement("div");
+    dot.className = "med-color-item";
+    dot.style.backgroundColor = c;
+    dot.onclick = () => {
+      selectedColor = c;
+      colorGrid.querySelectorAll(".med-color-item").forEach((el) => el.classList.remove("active"));
+      dot.classList.add("active");
+    };
+    colorGrid.appendChild(dot);
+  });
+  colorSection.appendChild(colorGrid);
+  container.appendChild(colorSection);
+
+  const toolSection = document.createElement("div");
+  toolSection.innerHTML = `<div class="med-toolbar-section-title">标注形状</div>`;
+  const toolGrid = document.createElement("div");
+  toolGrid.className = "med-tool-grid";
+
+  const tools = [
+    { id: "rect", label: "矩形" }, { id: "polygon", label: "多边形" },
+    { id: "circle", label: "圆形" }, { id: "ellipse", label: "椭圆" },
+    { id: "line", label: "线段" }, { id: "freehand", label: "手绘" },
+  ];
+
+  tools.forEach((t) => {
+    const btn = document.createElement("button");
+    btn.className = "med-tool-item";
+    btn.textContent = t.label;
+    btn.onclick = () => {
+      engine.setInteractionEffect("anno");
+      if (engine.anno) engine.anno.setTool(t.id as any, selectedColor);
+      hide();
+    };
+    toolGrid.appendChild(btn);
+  });
+  toolSection.appendChild(toolGrid);
+  container.appendChild(toolSection);
+
+  return container;
+};
+
+/**
+ * 默认按钮配置
+ */
+const DEFAULT_BUTTONS: ToolbarButton[] = [
+  { id: "anno", icon: buttonAnno, dropdownContent: createAnnoDropdownContent, label: "标注设置" },
+  { id: "selection", icon: buttonSelection, label: "截图设置",
+    onClick: (engine: MedViewerEngine, hide: () => void) => {
+      engine.selection?.toggleState();
+      hide();
+    },
+  },
+];
+
+const STYLE_ID = "med-toolbar-styles";
+
+/**
+ * MedToolbar 主类
+ */
+export class MedToolbar {
+  private engine: MedViewerEngine;
+  private options: ToolbarOptions;
+  private element: HTMLDivElement;
+  private dropdownElement: HTMLDivElement | null = null;
+  private outsideClickHandler: ((e: MouseEvent) => void) | null = null;
+
+  constructor(engine: MedViewerEngine, options: ToolbarOptions = {}) {
+    this.engine = engine;
+    this.options = options;
+    this.element = document.createElement("div");
+    this.element.className = this.getClassName();
+
+    this.injectStyles();
+    this.render();
+    this.mount();
+  }
+
+  public destroy(): void {
+    this.closeDropdown(true); // 销毁时强制立即移除
+    this.element.remove();
+    (this.engine as any) = null;
+  }
+
+  private render(): void {
+    this.element.innerHTML = "";
+    const defaultButtonMap = new Map(DEFAULT_BUTTONS.map((btn) => [btn.id, btn]));
+    const mergedButtons: ToolbarButton[] = [];
+
+    // 合并配置：用户自定义优先
+    if (this.options.buttons) {
+      this.options.buttons.forEach((userBtn) => {
+        const defaultBtn = defaultButtonMap.get(userBtn.id);
+        if (defaultBtn) {
+          mergedButtons.push({ ...defaultBtn, ...userBtn });
+          defaultButtonMap.delete(userBtn.id);
+        } else {
+          mergedButtons.push(userBtn);
+        }
+      });
+    }
+    mergedButtons.push(...Array.from(defaultButtonMap.values()));
+
+    mergedButtons.forEach((btnConfig) => {
+      const wrapper = document.createElement("div");
+      wrapper.className = "med-toolbar-item-wrapper";
+
+      const btn = document.createElement("button");
+      btn.className = "med-main-btn";
+
+      if (btnConfig.icon) {
+        const img = document.createElement("img");
+        img.src = btnConfig.icon;
+        img.alt = btnConfig.label || btnConfig.id;
+        btn.appendChild(img);
+      } else if (btnConfig.label) {
+        btn.textContent = btnConfig.label;
+      }
+
+      btn.onclick = (e) => {
+        e.stopPropagation();
+        // 如果当前点击的按钮对应的下拉框已打开，则关闭它
+        if (this.dropdownElement && this.dropdownElement.parentElement === wrapper) {
+          this.closeDropdown();
+          return;
+        }
+        
+        // 先尝试关闭现有下拉框
+        this.closeDropdown();
+
+        if (btnConfig.onClick) {
+          btnConfig.onClick(this.engine, () => this.closeDropdown());
+        } else if (btnConfig.dropdownContent) {
+          this.showDropdown(wrapper, btnConfig);
+        }
+      };
+
+      wrapper.appendChild(btn);
+      this.element.appendChild(wrapper);
+    });
+  }
+
+  private showDropdown(parent: HTMLElement, config: ToolbarButton) {
+    this.dropdownElement = document.createElement("div");
+    this.dropdownElement.className = "med-toolbar-dropdown";
+    
+    const content = config.dropdownContent!(this.engine, () => this.closeDropdown());
+    this.dropdownElement.appendChild(content);
+    parent.appendChild(this.dropdownElement);
+
+    // 1. 边界检查调整位置
+    this.adjustDropdownPosition();
+
+    // 2. 触发动画 (下一帧添加 show 类)
+    requestAnimationFrame(() => {
+      this.dropdownElement?.classList.add("show");
+    });
+
+    // 3. 点击外部关闭
+    this.outsideClickHandler = (e: MouseEvent) => {
+      if (this.dropdownElement && !this.dropdownElement.contains(e.target as Node)) {
+        this.closeDropdown();
+      }
+    };
+    setTimeout(() => document.addEventListener("click", this.outsideClickHandler!), 0);
+  }
+
+  private adjustDropdownPosition() {
+    if (!this.dropdownElement) return;
+
+    const rect = this.dropdownElement.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const padding = 12;
+
+    // 检查右边缘
+    if (rect.right > viewportWidth) {
+      this.dropdownElement.style.left = "auto";
+      this.dropdownElement.style.right = "0";
+      this.dropdownElement.style.transform = "translateX(0) translateY(10px)";
+      this.dropdownElement.setAttribute('data-adjusted', 'true');
+    }
+    // 检查左边缘
+    else if (rect.left < 0) {
+      this.dropdownElement.style.left = "0";
+      this.dropdownElement.style.transform = "translateX(0) translateY(10px)";
+      this.dropdownElement.setAttribute('data-adjusted', 'true');
+    }
+
+    // 针对顶部位置调整动画起始点
+    const isTop = (this.options.position || "").includes("TOP");
+    if (isTop) {
+        const currentTransform = this.dropdownElement.style.transform;
+        this.dropdownElement.style.transform = currentTransform.replace("translateY(10px)", "translateY(-10px)");
+    }
+  }
+
+  private closeDropdown(immediate = false) {
+    if (this.dropdownElement) {
+      const el = this.dropdownElement;
+      this.dropdownElement = null; // 立即清除引用防止重复触发
+
+      if (immediate) {
+        el.remove();
+      } else {
+        el.classList.remove("show");
+        // 等待 CSS 过渡动画结束后移除元素
+        setTimeout(() => el.remove(), 200);
+      }
+    }
+    if (this.outsideClickHandler) {
+      document.removeEventListener("click", this.outsideClickHandler);
+      this.outsideClickHandler = null;
+    }
+  }
+
+  private mount(): void {
+    const container = this.engine.viewer?.element;
+    if (container) container.appendChild(this.element);
+  }
+
+  private getClassName(): string {
+    const pos = this.options.position || "BOTTOM_CENTER";
+    return `med-toolbar med-toolbar--${pos}`;
+  }
+
+  private injectStyles(): void {
+    if (document.getElementById(STYLE_ID)) return;
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = `
+      .med-toolbar {
+        position: absolute;
+        display: flex;
+        gap: 12px;
+        padding: 10px;
+        z-index: 100;
+        background: rgba(24, 28, 36, 0.85);
+        border-radius: 12px;
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255,255,255,0.1);
+        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+      }
+
+      /* 定位 */
+      .med-toolbar--TOP_LEFT { top: 18px; left: 18px; }
+      .med-toolbar--TOP_CENTER { top: 18px; left: 50%; transform: translateX(-50%); }
+      .med-toolbar--TOP_RIGHT { top: 18px; right: 18px; }
+      .med-toolbar--BOTTOM_LEFT { bottom: 18px; left: 18px; }
+      .med-toolbar--BOTTOM_CENTER { bottom: 18px; left: 50%; transform: translateX(-50%); }
+      .med-toolbar--BOTTOM_RIGHT { bottom: 18px; right: 18px; }
+      .med-toolbar--MIDDLE_LEFT { top: 50%; left: 18px; transform: translateY(-50%); flex-direction: column; }
+      .med-toolbar--MIDDLE_RIGHT { top: 50%; right: 18px; transform: translateY(-50%); flex-direction: column; }
+
+      .med-toolbar-item-wrapper { position: relative; }
+      
+      /* 按钮及动画 */
+      .med-main-btn {
+        background: rgba(255,255,255,0.08);
+        color: #f2f5f8;
+        border: none;
+        padding: 8px 16px;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .med-main-btn:hover { background: rgba(49, 208, 170, 0.2); }
+      .med-main-btn:active { transform: scale(0.9); }
+      .med-main-btn img { width: 24px; height: 24px; }
+
+      /* 下拉框基础及进场动画 */
+      .med-toolbar-dropdown {
+        position: absolute;
+        bottom: calc(100% + 12px); 
+        left: 50%;
+        background: #181c24;
+        border: 1px solid rgba(255,255,255,0.1);
+        border-radius: 12px;
+        padding: 16px;
+        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+        min-width: 220px;
+        z-index: 101;
+        
+        /* 初始动画状态 */
+        opacity: 0;
+        pointer-events: none;
+        transform: translateX(-50%) translateY(10px);
+        transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+      }
+
+      /* 动画显示状态 */
+      .med-toolbar-dropdown.show {
+        opacity: 1;
+        pointer-events: auto;
+        transform: translateX(-50%) translateY(0) !important;
+      }
+      
+      /* 边界修正后的显示状态 */
+      .med-toolbar-dropdown[data-adjusted="true"].show {
+        transform: translateX(0) translateY(0) !important;
+      }
+
+      /* 顶部位置下拉动画修正 */
+      [class*="med-toolbar--TOP"] .med-toolbar-dropdown {
+        bottom: auto;
+        top: calc(100% + 12px);
+        transform: translateX(-50%) translateY(-10px);
+      }
+
+      /* 侧边位置逻辑 */
+      .med-toolbar--MIDDLE_LEFT .med-toolbar-dropdown {
+        left: calc(100% + 12px); top: 0; bottom: auto; transform: translateX(-10px);
+      }
+      .med-toolbar--MIDDLE_LEFT .med-toolbar-dropdown.show { transform: translateX(0) !important; }
+
+      .med-toolbar--MIDDLE_RIGHT .med-toolbar-dropdown {
+        left: auto; right: calc(100% + 12px); top: 0; bottom: auto; transform: translateX(10px);
+      }
+      .med-toolbar--MIDDLE_RIGHT .med-toolbar-dropdown.show { transform: translateX(0) !important; }
+
+      /* 内容样式 */
+      .med-toolbar-section-title { font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 10px; letter-spacing: 1px; }
+      .med-color-grid { display: flex; gap: 10px; margin-bottom: 20px; }
+      .med-color-item { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: 0.2s; }
+      .med-color-item.active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 10px rgba(255,255,255,0.3); }
+      .med-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+      .med-tool-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05); color: #fff; padding: 8px 4px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: 0.2s; }
+      .med-tool-item:hover { background: rgba(49, 208, 170, 0.2); border-color: rgba(49, 208, 170, 0.4); }
+    `;
+    document.head.appendChild(style);
+  }
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+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';
+// import { ColorAdjustPlugin } from './core/ColorAdjustPlugin';
+
+// 1. 导出供模块化开发使用 (Vue/React/Vite)
+export { MedViewerEngine, KonvaAnnotator, AnnoAnnotator, MedToolbar, SelectionPlugin }; // , ColorAdjustPlugin };
+
+// 2. 导出供原生 HTML 全局变量使用 (window.MedViewerSDK)
+if (typeof window !== 'undefined') {
+  (window as any).MedViewerSDK = {
+    MedViewerEngine,
+    KonvaAnnotator,
+    AnnoAnnotator,
+    MedToolbar,
+    SelectionPlugin,
+    // ColorAdjustPlugin
+  };
+}