med-viewer-sdk 0.1.0

package/dist/style.css

@@ -0,0 +1 @@
+.r6o-editor{top:0;left:0;margin-left:-19px}.a9s-annotationlayer{position:absolute;top:0;left:0;width:100%;height:100%;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.a9s-annotationlayer.no-cursor,.a9s-annotationlayer.no-cursor *{cursor:none!important}.a9s-crosshair line{stroke-width:1px;stroke:#00000080;pointer-events:none;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}.a9s-selection-mask{stroke:none;fill:transparent;pointer-events:none}.a9s-annotation rect,.a9s-annotation circle,.a9s-annotation ellipse,.a9s-annotation path,.a9s-annotation polygon,.a9s-annotation line,.a9s-selection rect,.a9s-selection circle,.a9s-selection ellipse,.a9s-selection path,.a9s-selection polygon,.a9s-selection line{fill:transparent;cursor:pointer;vector-effect:non-scaling-stroke}.a9s-annotation .a9s-inner,.a9s-selection .a9s-inner{stroke:#fff;stroke-width:1px;fill:transparent}.a9s-annotation .a9s-inner:hover,.a9s-selection .a9s-inner:hover{stroke:#fff000}.a9s-annotation .a9s-outer,.a9s-selection .a9s-outer{stroke:#000000b3;stroke-width:3px;fill:none}.a9s-annotation .a9s-formatter-el,.a9s-selection .a9s-formatter-el{overflow:visible}.a9s-annotation.a9s-point .a9s-inner{display:none}.a9s-annotation.a9s-point .a9s-outer{stroke:#5a5a5a;stroke-width:1.5px;fill:#ffffff80}.a9s-annotation.a9s-point .a9s-outer:hover{fill:#fff000}.a9s-annotation.selected .a9s-inner,.a9s-selection .a9s-inner{stroke:#fff000}.a9s-annotation.editable .a9s-inner{stroke:#fff000;cursor:move!important}.a9s-annotation.editable .a9s-inner:hover{fill:#fff0001a}.a9s-handle{cursor:move}.a9s-handle .a9s-handle-inner{stroke:#fff000;fill:#000}.a9s-handle .a9s-handle-outer{stroke:#000;fill:#fff}.a9s-handle:hover .a9s-handle-inner{fill:#fff000}.r6o-btn{background-color:#4483c4;border:1px solid #4483c4;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-size:14px;margin:0;outline:none;text-decoration:none;white-space:nowrap;padding:6px 18px;min-width:70px;vertical-align:middle;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.r6o-btn *{vertical-align:middle;cursor:pointer}.r6o-btn .r6o-icon{margin-right:4px}.r6o-btn:disabled{border-color:#a3c2e2!important;background-color:#a3c2e2!important}.r6o-btn:hover{background-color:#4f92d7;border-color:#4f92d7}.r6o-btn.outline{border:1px solid #4483c4;color:#4483c4;background-color:transparent;text-shadow:none}.r6o-autocomplete{display:inline;position:relative}.r6o-autocomplete div[role=combobox]{display:inline}.r6o-autocomplete input{outline:none;border:none;width:80px;height:100%;line-height:14px;white-space:pre;box-sizing:border-box;background-color:transparent;font-size:14px;color:#3f3f3f}.r6o-autocomplete ul{position:absolute;margin:0;padding:0;list-style-type:none;background-color:#fff;border-radius:3px;border:1px solid #d6d7d9;box-sizing:border-box;box-shadow:0 0 20px #00000040}.r6o-autocomplete ul:empty{display:none}.r6o-autocomplete li{box-sizing:border-box;padding:2px 12px;width:100%;cursor:pointer}.r6o-editable-text{max-height:120px;overflow:auto;outline:none;min-height:2em;font-size:14px;font-family:Lato,sans-serif}.r6o-editable-text:empty:not(:focus):before{content:attr(data-placeholder);color:#c2c2c2}.r6o-widget.comment{font-size:14px;min-height:3em;background-color:#fff;position:relative}.r6o-widget.comment .r6o-editable-text,.r6o-widget.comment .r6o-readonly-comment{padding:10px;width:100%;box-sizing:border-box;outline:none;border:none;background-color:transparent;resize:none}.r6o-widget.comment .r6o-readonly-comment{white-space:pre-line}.r6o-widget.comment .r6o-editable-text::-webkit-input-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text::-moz-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text:-moz-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text:-ms-input-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-lastmodified{border:1px solid #e5e5e5;display:inline-block;border-radius:2px;margin:0 10px 8px;padding:4px 5px;line-height:100%;font-size:12px}.r6o-widget.comment .r6o-lastmodified .r6o-lastmodified-at{color:#757575;padding-left:3px}.r6o-widget.comment .r6o-arrow-down{position:absolute;height:20px;width:20px;top:9px;right:9px;line-height:22px;background-color:#fff;text-align:center;-webkit-font-smoothing:antialiased;border:1px solid #e5e5e5;cursor:pointer;-webkit-border-radius:1px;-khtml-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.r6o-widget.comment .r6o-arrow-down.r6o-menu-open{border-color:#4483c4}.r6o-widget.comment .r6o-comment-dropdown-menu{position:absolute;top:32px;right:8px;background-color:#fff;border:1px solid #e5e5e5;list-style-type:none;margin:0;padding:5px 0;z-index:9999;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);-moz-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px #0003}.r6o-widget.comment .r6o-comment-dropdown-menu li{padding:0 15px;cursor:pointer}.r6o-widget.comment .r6o-comment-dropdown-menu li:hover{background-color:#ecf0f1}.r6o-widget.comment .r6o-purposedropdown{position:relative;z-index:2}.r6o-widget.comment.editable{background-color:#ecf0f1}.r6o-widget.r6o-tag:empty{display:none}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.r6o-widget.tag .r6o-taglist li{height:27px}.r6o-widget.tag .r6o-taglist li .r6o-delete-wrapper .r6o-delete{position:relative;top:-4px}}.r6o-widget.r6o-tag{background-color:#ecf0f1;border-bottom:1px solid #e5e5e5;padding:1px 3px;display:flex}.r6o-widget.r6o-tag ul{margin:0;padding:0;list-style-type:none;z-index:1}.r6o-widget.r6o-tag ul.r6o-taglist{flex:0;white-space:nowrap}.r6o-widget.r6o-tag ul.r6o-taglist li{display:inline-block;margin:1px 1px 1px 0;padding:0;vertical-align:middle;overflow:hidden;font-size:12px;background-color:#fff;border:1px solid #d6d7d9;cursor:pointer;position:relative;line-height:180%;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 4px rgba(0,0,0,.1);-moz-box-shadow:0 0 4px rgba(0,0,0,.1);box-shadow:0 0 4px #0000001a}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-label{padding:2px 8px;display:inline-block}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper{display:inline-block;padding:2px 0;color:#fff;width:0;height:100%;background-color:#4483c4;-webkit-border-top-right-radius:2px;-webkit-border-bottom-right-radius:2px;-khtml-border-radius-topright:2px;-khtml-border-radius-bottomright:2px;-moz-border-radius-topright:2px;-moz-border-radius-bottomright:2px;border-top-right-radius:2px;border-bottom-right-radius:2px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper .r6o-delete{padding:2px 6px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper svg{vertical-align:text-top}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-enter-active{width:24px;transition:width .2s}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-enter-done,.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-exit{width:24px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-exit-active{width:0;transition:width .2s}.r6o-widget.r6o-tag .r6o-autocomplete{flex:1;position:relative}.r6o-widget.r6o-tag .r6o-autocomplete li{font-size:14px}.r6o-widget.r6o-tag input{width:100%;padding:0 3px;min-width:80px;outline:none;border:none;line-height:170%;background-color:transparent;color:#3f3f3f}.r6o-widget.r6o-tag input::-webkit-input-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input::-moz-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input:-moz-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input:-ms-input-placeholder{color:#c2c2c2}.r6o-editor{position:absolute;z-index:99999;width:400px;color:#3f3f3f;opacity:0;font-family:Lato,sans-serif;font-size:17px;line-height:27px;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;transition:opacity .2s ease-in}.r6o-editor .r6o-arrow{position:absolute;overflow:hidden;top:-12px;left:12px;width:28px;height:12px;display:none}.r6o-editor .r6o-arrow:after{content:"";position:absolute;top:5px;left:5px;width:18px;height:18px;background-color:#fff;-webkit-backface-visibility:hidden;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.r6o-editor .r6o-editor-inner{background-color:#fff;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:2px 2px 42px rgba(0,0,0,.4);-moz-box-shadow:2px 2px 42px rgba(0,0,0,.4);box-shadow:2px 2px 42px #0006}.r6o-editor .r6o-editor-inner .r6o-widget:first-child{-webkit-border-top-left-radius:2px;-webkit-border-top-right-radius:2px;-khtml-border-radius-topleft:2px;-khtml-border-radius-topright:2px;-moz-border-radius-topleft:2px;-moz-border-radius-topright:2px;border-top-left-radius:2px;border-top-right-radius:2px}.r6o-editor .r6o-editor-inner .r6o-widget{border-bottom:1px solid #e5e5e5}.r6o-editor .r6o-footer{position:relative;text-align:right;padding:8px 0}.r6o-editor .r6o-footer .r6o-btn{margin-right:8px}.r6o-editor .r6o-footer .r6o-btn.delete-annotation{position:absolute;top:7px;left:7px;background-color:transparent;border:none;color:#4483c4;width:32px;height:32px;min-width:0;border-radius:100%;padding:0;display:flex;justify-content:center;align-items:center;-webkit-transition:all .1s ease-in;-moz-transition:all .1s ease-in;-o-transition:all .1s ease-in;transition:all .1s ease-in}.r6o-editor .r6o-footer .r6o-btn.delete-annotation:hover{color:#fff;background-color:#ef352c}@media (max-width: 640px){.r6o-editor{width:260px}}.r6o-editor.r6o-arrow-top .r6o-arrow{display:block}.r6o-editor.r6o-arrow-right{margin-left:8px}.r6o-editor.r6o-arrow-right .r6o-arrow{left:auto;right:12px}.r6o-editor.r6o-arrow-bottom .r6o-arrow{display:block;top:auto;bottom:-12px}.r6o-editor.r6o-arrow-bottom .r6o-arrow:after{top:-11px;box-shadow:none}.r6o-editor.pushed .r6o-arrow,.r6o-editor.dragged .r6o-arrow{display:none}.r6o-editor .r6o-draggable{cursor:move}.r6o-purposedropdown{width:150px;display:inline-block}.r6o-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.a9s-annotation.hover .a9s-inner{stroke:#fff000}.a9s-annotation:not(.hover):hover .a9s-inner{stroke:#fff}.a9s-osd-crosshair-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "med-viewer-sdk",
+  "version": "0.1.0",
+  "main": "dist/med-viewer-sdk.umd.js",
+  "module": "dist/med-viewer-sdk.mjs",
+  "types": "dist/med-viewer-sdk.d.ts",
+  "files": ["dist", "README.md", "src"],
+  "scripts": {
+    "build": "npx vite build && tsc -p tsconfig.dts.json && powershell -Command \"if (Test-Path -Path 'dist\\med-viewer-sdk.d.ts') { Remove-Item -Path 'dist\\med-viewer-sdk.d.ts' } ; Move-Item -Path 'dist\\index.d.ts' -Destination 'dist\\med-viewer-sdk.d.ts'\"",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "konva": ">=8.0.0",
+    "openseadragon": "^3.1.0",
+    "vue": ">=2.7.0 || >=3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.2.0",
+    "@types/openseadragon": "^5.0.1",
+    "terser": "^5.46.0",
+    "typescript": "^5.0.0",
+    "vite": "^4.0.0",
+    "vue-demi": "*"
+  },
+  "volta": {
+    "node": "22.21.1"
+  },
+  "dependencies": {
+    "@picturae/openseadragonselection": "^2.1.0",
+    "@silence_top/annotorious-openseadragon-ld": "^1.0.7",
+    "annotorious-openseadragon-ld": "^2.7.19",
+    "openseadragonselection": "^1.8.0"
+  }
+}

package/src/adapters/vue/MedViewer.ts

@@ -0,0 +1,37 @@
+// 渲染函数写的通用组件
+import { defineComponent, h, onBeforeUnmount, onMounted, shallowRef } from 'vue-demi';
+import type { MedEngineOptions } from '../../core/Engine';
+import { MedViewerEngine } from '../../core/Engine';
+
+export default defineComponent({
+  name: 'MedViewer',
+  props: {
+    options: {
+      type: Object as () => Omit<MedEngineOptions, 'element'>,
+      required: true
+    }
+  },
+  emits: ['ready'],
+  setup(props, { slots, expose, emit }) {
+    const containerRef = shallowRef<HTMLElement | null>(null);
+    const engineRef = shallowRef<MedViewerEngine | null>(null);
+
+    onMounted(() => {
+      if (!containerRef.value) return;
+      engineRef.value = new MedViewerEngine({
+        element: containerRef.value,
+        ...props.options
+      });
+      emit('ready', engineRef.value);
+    });
+
+    onBeforeUnmount(() => {
+      engineRef.value?.destroy();
+      engineRef.value = null;
+    });
+
+    expose({ engine: engineRef });
+
+    return () => h('div', { class: 'med-viewer', ref: containerRef }, slots.default?.());
+  }
+});

package/src/adapters/vue/index.ts

@@ -0,0 +1,4 @@
+// 插件入口
+import MedViewer from './MedViewer';
+
+export default MedViewer;

package/src/core/AnnoAnnotator.ts

@@ -0,0 +1,102 @@
+// 使用本地下载的 Annotorious v2.7.17 文件
+import Annotorious from "@silence_top/annotorious-openseadragon-ld";
+import "annotorious-openseadragon-ld/dist/annotorious.min.css";
+import { MedViewerEngine } from "./Engine";
+import { BaseAnnotator } from "./BaseAnnotator";
+
+// // 全局类型声明
+// declare global {
+//   interface Window {
+//     Annotorious: any;
+//   }
+// }
+
+export class AnnoAnnotator extends BaseAnnotator {
+  public anno: any;
+
+  constructor(engine: MedViewerEngine, config: any = {}) {
+    super(engine);
+
+    console.log(
+      "[AnnoAnnotator] Initializing Annotorious v2.7.17...",
+      Annotorious,
+    );
+
+    // 使用 v2.7.17 的 Annotorious (全局变量)
+    this.anno = Annotorious(this.engine.viewer, {
+      ...config,
+      // 可以在此配置样式、偏好等
+    });
+    console.log("[AnnoAnnotator] Annotorious v2.7.17 initialized.", this.anno);
+    console.log("tools", this.anno.listDrawingTools());
+
+    this.injectStyles();
+    this.initEvents();
+  }
+
+  public setEnabled(enabled: boolean): void {
+    this.anno.setDrawingEnabled(enabled);
+  }
+
+  public setTool(
+    tool:
+      | "rect"
+      | "polygon"
+      | "line"
+      | "point"
+      | "circle"
+      | "ellipse"
+      | "freehand"
+      | null,
+    color?: string,
+  ): void {
+    if (!tool) {
+      this.setEnabled(false);
+    } else {
+      this.anno.setDrawingTool(tool, color);
+      this.setEnabled(true);
+    }
+  }
+
+  public getAnnotations(): any[] {
+    // 获取当前所有标注
+    return this.anno.getAnnotations();
+  }
+
+  public setAnnotations(data: any[]): void {
+    this.anno.setAnnotations(data);
+  }
+
+  public clear(): void {
+    this.anno.clearAnnotations();
+  }
+
+  public destroy(): void {
+    this.anno.destroy();
+  }
+
+  private initEvents() {
+    this.anno.on("createAnnotation", (anno: any) => {
+      console.log("新标注已创建:", anno);
+    });
+  }
+
+  private injectStyles() {
+    // 适配医学影像的样式（v2.7.17 默认样式有时在深色背景下不明显）
+    const styleId = "med-anno-v2-7-17-overrides";
+    if (document.getElementById(styleId)) return;
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.innerHTML = `
+      .a9s-handle .a9s-handle-inner {
+          stroke: #FFEB3B;
+          fill: #FF9800;
+      }
+      .a9s-handle .a9s-handle-outer {
+          stroke: #000;
+          fill: #fff;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}

package/src/core/BaseAnnotator.ts

@@ -0,0 +1,43 @@
+import { MedViewerEngine } from './Engine';
+
+/**
+ * 标注插件的基类
+ */
+export abstract class BaseAnnotator {
+    protected engine: MedViewerEngine;
+    protected isEnabled: boolean = false;
+
+    constructor(engine: MedViewerEngine) {
+        this.engine = engine;
+    }
+
+    /**
+     * 启用/禁用标注功能
+     */
+    public abstract setEnabled(enabled: boolean): void;
+
+    /**
+     * 设置当前的工具模式 (例如：矩形、箭头、多边形)
+     */
+    public abstract setTool(tool: string | null): void;
+
+    /**
+     * 获取所有标注数据 (建议在此处进行格式标准化)
+     */
+    public abstract getAnnotations(): any[];
+
+    /**
+     * 加载标注数据
+     */
+    public abstract setAnnotations(data: any[]): void;
+
+    /**
+     * 清除所有标注
+     */
+    public abstract clear(): void;
+
+    /**
+     * 销毁插件，移除事件监听
+     */
+    public abstract destroy(): void;
+}

package/src/core/ColorAdjustPlugin.ts

@@ -0,0 +1,256 @@
+import type { MedViewerEngine } from "./Engine";
+import OpenSeadragon from "openseadragon";
+
+export interface ColorAdjustments {
+  brightness?: number;     // 0.0 ~ 2.0
+  contrast?: number;       // 0.0 ~ 2.0
+  saturation?: number;     // 0.0 ~ 3.0
+  gamma?: number;          // 0.1 ~ 3.0
+  sharpen?: number;        // 0.0 ~ 1.0
+  edgeEnhance?: number;    // 0.0 ~ 1.0
+  pseudoColor?: boolean;   // 伪彩色
+  invert?: boolean;        // 反色
+}
+
+export interface ColorAdjustOptions {
+  initial?: ColorAdjustments;
+}
+
+export class ColorAdjustPlugin {
+  private engine: MedViewerEngine;
+  private adjustments: ColorAdjustments;
+  private options: ColorAdjustOptions;
+
+  constructor(engine: MedViewerEngine, options: ColorAdjustOptions = {}) {
+    this.engine = engine;
+    this.options = options;
+    this.adjustments = options.initial ?? {};
+
+    engine.viewer.addOnceHandler("open", () => {
+      const isWebGL = this.isWebGLRenderer();
+      console.log("当前渲染模式:", isWebGL ? "WebGL" : "Canvas");
+      
+      // 强制使用 WebGL 渲染器
+      if (!isWebGL) {
+        console.warn("ColorAdjustPlugin 需要 WebGL 渲染器，尝试切换...");
+        this.forceWebGLRenderer();
+      }
+      
+      this.apply(this.adjustments, true); // 强制走 WebGL 路径
+    });
+  }
+
+  public setAdjustments(adjustments: ColorAdjustments): void {
+    this.adjustments = { ...this.adjustments, ...adjustments };
+    this.apply(this.adjustments, true); // 强制走 WebGL 路径
+  }
+
+  public getAdjustments(): ColorAdjustments {
+    return { ...this.adjustments };
+  }
+
+  public destroy(): void {
+    this.adjustments = {};
+  }
+
+  private apply(adjustments: ColorAdjustments, isWebGL: boolean = true): void {
+    if (!isWebGL) {
+      console.warn("Canvas 模式不支持色彩调节，请使用 WebGL 渲染器");
+      return;
+    }
+
+    console.log("apply color adjustments:", adjustments);
+
+    // WebGL 模式：直接实现 Shader 调整逻辑
+    this.applyWebGLFilters(adjustments);
+  }
+
+  private isWebGLRenderer(): boolean {
+    const drawer = (this.engine.viewer as any)?.drawer;
+    return drawer?.constructor?.name === "WebGLDrawer";
+  }
+
+  private forceWebGLRenderer(): void {
+    // 尝试重新初始化 viewer 强制使用 WebGL
+    const viewer = this.engine.viewer;
+    const currentSource = (viewer as any).source;
+    const currentOptions = currentSource ? {
+      tileSource: currentSource,
+      drawer: ["webgl"], // 强制只使用 WebGL
+    } : {};
+
+    // 如果已经有图像，重新打开
+    if (currentSource) {
+      viewer.open(currentOptions);
+    }
+  }
+
+  private applyWebGLFilters(adjustments: ColorAdjustments): void {
+    const viewer = this.engine.viewer;
+    const drawer = (viewer as any).drawer;
+    
+    if (!drawer) {
+      console.warn("WebGL drawer not available");
+      return;
+    }
+
+    // 尝试设置 WebGL Shader uniforms
+    // 这里需要根据 OpenSeadragon 5.0 的具体 API 来实现
+    // 可能的 API（需要查阅文档确认）：
+    
+    try {
+      console.log("applyWebGLFilters", drawer);
+    console.log("drawer keys:", Object.keys(drawer));
+    console.log("drawer._gl:", drawer._gl);
+    console.log("drawer.canvas:", drawer.canvas);
+      // 方法1：直接设置 shader uniforms
+      if (drawer.setShaderUniforms) {
+        drawer.setShaderUniforms({
+          uBrightness: adjustments.brightness ?? 1.0,
+          uContrast: adjustments.contrast ?? 1.0,
+          uSaturation: adjustments.saturation ?? 1.0,
+          uGamma: adjustments.gamma ?? 1.0,
+          uSharpen: adjustments.sharpen ?? 0.0,
+          uEdgeEnhance: adjustments.edgeEnhance ?? 0.0,
+          uPseudoColor: adjustments.pseudoColor ?? false,
+          uInvert: adjustments.invert ?? false,
+        });
+      }
+      // 方法2：通过 WebGL context 直接操作
+      else if (drawer._gl) {
+        this.setupCustomShader(drawer._gl, adjustments);
+      }
+      // 方法2.5：尝试从 canvas 获取 WebGL context
+      else if (drawer.canvas) {
+        const gl = drawer.canvas.getContext('webgl') || drawer.canvas.getContext('experimental-webgl');
+        if (gl) {
+          this.setupCustomShader(gl as WebGLRenderingContext, adjustments);
+        }
+      }
+      // 方法3：通过滤镜 API
+      else if ((viewer as any).setFilterOptions) {
+        (viewer as any).setFilterOptions({
+          brightness: adjustments.brightness,
+          contrast: adjustments.contrast,
+          saturation: adjustments.saturation,
+          // ... 其他参数
+        });
+      }
+      else {
+        console.warn("No WebGL shader API found, filters not applied");
+      }
+    } catch (error) {
+      console.error("Error applying WebGL filters:", error);
+    }
+  }
+
+  private setupCustomShader(gl: WebGLRenderingContext, adjustments: ColorAdjustments): void {
+    // 自定义 Shader 实现
+    console.log("Setting up custom WebGL shader with adjustments:", adjustments);
+    
+    // 顶点着色器（简单的传递纹理坐标）
+    const vertexShaderSource = `
+      attribute vec2 a_position;
+      attribute vec2 a_texCoord;
+      varying vec2 v_texCoord;
+      
+      void main() {
+        gl_Position = vec4(a_position, 0.0, 1.0);
+        v_texCoord = a_texCoord;
+      }
+    `;
+    
+    // 片段着色器（实现色彩调节）
+    const fragmentShaderSource = `
+      precision mediump float;
+      
+      uniform sampler2D u_texture;
+      uniform float u_brightness;
+      uniform float u_contrast;
+      uniform float u_saturation;
+      uniform float u_gamma;
+      uniform bool u_invert;
+      
+      varying vec2 v_texCoord;
+      
+      void main() {
+        vec4 color = texture2D(u_texture, v_texCoord);
+        
+        // 亮度调节
+        color.rgb += u_brightness;
+        
+        // 对比度调节
+        color.rgb = (color.rgb - 0.5) * u_contrast + 0.5;
+        
+        // 饱和度调节
+        float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
+        color.rgb = mix(vec3(gray), color.rgb, u_saturation);
+        
+        // 伽马校正
+        color.rgb = pow(color.rgb, vec3(1.0 / u_gamma));
+        
+        // 反色
+        if (u_invert) {
+          color.rgb = 1.0 - color.rgb;
+        }
+        
+        gl_FragColor = color;
+      }
+    `;
+    
+    try {
+      // 创建和编译着色器
+      const vertexShader = this.createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
+      const fragmentShader = this.createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
+      
+      // 创建程序
+      const program = gl.createProgram();
+      gl.attachShader(program, vertexShader);
+      gl.attachShader(program, fragmentShader);
+      gl.linkProgram(program);
+      
+      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        throw new Error('Failed to link shader program: ' + gl.getProgramInfoLog(program));
+      }
+      
+      // 设置 uniform 值
+      gl.useProgram(program);
+      
+      // 设置纹理
+      gl.uniform1i(gl.getUniformLocation(program, 'u_texture'), 0);
+      
+      // 设置调节参数
+      gl.uniform1f(gl.getUniformLocation(program, 'u_brightness'), (adjustments.brightness ?? 1.0) - 1.0);
+      gl.uniform1f(gl.getUniformLocation(program, 'u_contrast'), adjustments.contrast ?? 1.0);
+      gl.uniform1f(gl.getUniformLocation(program, 'u_saturation'), adjustments.saturation ?? 1.0);
+      gl.uniform1f(gl.getUniformLocation(program, 'u_gamma'), adjustments.gamma ?? 1.0);
+      gl.uniform1i(gl.getUniformLocation(program, 'u_invert'), (adjustments.invert ?? false) ? 1 : 0);
+      
+      // 保存程序引用以便后续使用
+      (gl as any)._colorAdjustProgram = program;
+      
+      console.log('WebGL shader setup completed');
+      
+    } catch (error) {
+      console.error('Error setting up WebGL shader:', error);
+    }
+  }
+  
+  private createShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader {
+    const shader = gl.createShader(type);
+    if (!shader) {
+      throw new Error('Failed to create shader');
+    }
+    
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      const info = gl.getShaderInfoLog(shader);
+      gl.deleteShader(shader);
+      throw new Error('Failed to compile shader: ' + info);
+    }
+    
+    return shader;
+  }
+}

package/src/core/Coords.ts

@@ -0,0 +1,9 @@
+// 坐标算法 (Image to Screen)
+export class Coords {
+  static imageToScreen(imageX: number, imageY: number, scale: number): { x: number; y: number } {
+    return {
+      x: imageX * scale,
+      y: imageY * scale
+    };
+  }
+}