@zzalai/leafer-point-annotation 1.1.3 → 1.1.5

package/src/App.vue

@@ -2,7 +2,7 @@
   <div class="app">
     <h1>LeaferJS Point Annotation Test</h1>
     
-    <div class="editor-container">
+    <div class="editor-container" :class="{ 'multi-instance': enableMultiInstance }">
       <PointAnnotation 
         ref="pointAnnotation"
         :imageSource="imageSource" 
@@ -14,6 +14,13 @@
         @loadError="handleLoadError"
         @update:currentLayer="handleLayerChange"
       />
+      <PointAnnotation 
+        v-if="enableMultiInstance"
+        ref="pointAnnotation2"
+        :imageSource="imageSource2" 
+        :options="editorOptions2"
+        @pointChange="handlePointChange2"
+      />
     </div>
     
     <div class="controls">
@@ -73,6 +80,7 @@
           <label><input type="checkbox" v-model="showToolbar" /> 显示组件工具栏</label>
           <label><input type="checkbox" v-model="showZoomController" /> 显示缩放控制器</label>
           <label><input type="checkbox" v-model="enableBrush" /> 启用笔刷功能</label>
+          <label><input type="checkbox" v-model="enableMultiInstance" /> 双实例测试（验证多实例快捷键不冲突）</label>
         </div>
         <div class="multi-layer-row">
           <label>背景色: <input type="color" v-model="canvasBackground" style="width: 40px; height: 28px; vertical-align: middle; margin-left: 6px;" /></label>
@@ -315,6 +323,36 @@ const canvasBackground = ref('#f6f6f6')
 const zoomMin = ref(0.2)
 const zoomMax = ref(4)
 const enableBrush = ref(true)
+const enableMultiInstance = ref(false)
+
+const imageSource2 = computed(() => {
+  if (!imageUrl.value) return undefined
+  return { id: 'test-image-2', url: imageUrl.value }
+})
+
+const editorOptions2 = computed<OptionsSource>(() => {
+  return {
+    pointStyle: {
+      circleFill: '#00ff00',
+      circleStroke: '#fff',
+      selectedCircleFill: '#ff0',
+      selectedCircleStroke: '#000'
+    },
+    brushStyle: {
+      color: '#00ff00',
+      opacity: 0.55,
+      size: 100
+    },
+    showToolbar: true,
+    showZoomController: true,
+    enableBrush: enableBrush.value,
+    enableHotkeys: false
+  }
+})
+
+const handlePointChange2 = (points: any[]) => {
+  console.log('Editor 2 - Points changed:', points)
+}
 
 const editorOptions = computed<OptionsSource>(() => {
   if (useMultiLayer.value) {
@@ -327,7 +365,8 @@ const editorOptions = computed<OptionsSource>(() => {
       canvasBackground: canvasBackground.value,
       zoomMin: zoomMin.value,
       zoomMax: zoomMax.value,
-      enableBrush: enableBrush.value
+      enableBrush: enableBrush.value,
+      enableHotkeys: false
     }
   }
   return {
@@ -337,7 +376,8 @@ const editorOptions = computed<OptionsSource>(() => {
     canvasBackground: canvasBackground.value,
     zoomMin: zoomMin.value,
     zoomMax: zoomMax.value,
-    enableBrush: enableBrush.value
+    enableBrush: enableBrush.value,
+    enableHotkeys: false
   }
 })
 
@@ -757,6 +797,22 @@ h1 {
   margin-bottom: 30px;
 }
 
+.editor-container.multi-instance {
+  display: flex;
+  gap: 12px;
+  height: auto;
+}
+
+.editor-container.multi-instance > :deep(.point-annotation),
+.editor-container.multi-instance > .point-annotation {
+  flex: 1;
+  min-width: 0;
+  height: 600px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
 .controls {
   margin-bottom: 30px;
   padding: 20px;

package/src/components/PointAnnotation.vue

@@ -319,6 +319,7 @@ export interface OptionsSource {
   zoomMin?: number;
   zoomMax?: number;
   enableBrush?: boolean;
+  enableHotkeys?: boolean;
 }
 
 const props = defineProps({
@@ -524,6 +525,9 @@ const isDrawing = ref(false);
 // 撤销/重做管理器
 let commandManager: CommandManager | null = null;
 
+// 🔧 多实例支持：tinykeys 解绑函数（保存在组件作用域，避免多个实例互相覆盖 window.__pointAnnotationHotkeysUnsubscribe）
+let hotkeysUnsubscribe: (() => void) | null = null;
+
 // 根据配置强制【标注点】不跟随画布Scale变化
 const changePointScaleRelativeCanvas = (pointAnnotationLayer: Group | null) => {
   // 检查是否开启固定大小功能
@@ -1025,73 +1029,77 @@ onMounted(() => {
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("focusout", handleFocusOut);
 
-    const unsubscribe = tinykeys(window, {
-      v: (event: KeyboardEvent) => {
-        if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
-        event.preventDefault();
-        selectTool();
-      },
-      p: (event: KeyboardEvent) => {
-        if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
-        event.preventDefault();
-        pointTool();
-      },
-      b: (event: KeyboardEvent) => {
-        if (!effectiveEnableBrush.value) return;
-        if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
-        event.preventDefault();
-        brushTool();
-      },
-      e: (event: KeyboardEvent) => {
-        if (!effectiveEnableBrush.value) return;
-        if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
-        event.preventDefault();
-        eraserTool();
-      },
-      "$mod+KeyZ": (event: KeyboardEvent) => {
-        if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
-        event.preventDefault();
-        event.stopPropagation();
-        undo();
-      },
-      "$mod+KeyY": (event: KeyboardEvent) => {
-        if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
-        event.preventDefault();
-        event.stopPropagation();
-        redo();
-      },
-      Delete: (event: KeyboardEvent) => {
-        if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
-        event.preventDefault();
-        event.stopPropagation();
-        deleteSelected();
-      },
-      "$mod+Equal": (event: KeyboardEvent) => {
-        if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
-        event.preventDefault();
-        event.stopPropagation();
-        zoomIn();
-      },
-      "$mod+Minus": (event: KeyboardEvent) => {
-        if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
-        event.preventDefault();
-        event.stopPropagation();
-        zoomOut();
-      },
-      "$mod+0": (event: KeyboardEvent) => {
-        if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
-        event.preventDefault();
-        event.stopPropagation();
-        resetZoom();
-      },
-      Alt: (event: KeyboardEvent) => {
-        if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
-        event.preventDefault();
-        showHotkeys.value = !showHotkeys.value;
-      },
-    });
+    // 根据 enableHotkeys 配置决定是否注册热键（默认不启用，显式传 true 才启用）
+    if (props.options.enableHotkeys) {
+      const unsubscribe = tinykeys(window, {
+        v: (event: KeyboardEvent) => {
+          if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
+          event.preventDefault();
+          selectTool();
+        },
+        p: (event: KeyboardEvent) => {
+          if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
+          event.preventDefault();
+          pointTool();
+        },
+        b: (event: KeyboardEvent) => {
+          if (!effectiveEnableBrush.value) return;
+          if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
+          event.preventDefault();
+          brushTool();
+        },
+        e: (event: KeyboardEvent) => {
+          if (!effectiveEnableBrush.value) return;
+          if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
+          event.preventDefault();
+          eraserTool();
+        },
+        "$mod+KeyZ": (event: KeyboardEvent) => {
+          if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
+          event.preventDefault();
+          event.stopPropagation();
+          undo();
+        },
+        "$mod+KeyY": (event: KeyboardEvent) => {
+          if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
+          event.preventDefault();
+          event.stopPropagation();
+          redo();
+        },
+        Delete: (event: KeyboardEvent) => {
+          if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
+          event.preventDefault();
+          event.stopPropagation();
+          deleteSelected();
+        },
+        "$mod+Equal": (event: KeyboardEvent) => {
+          if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
+          event.preventDefault();
+          event.stopPropagation();
+          zoomIn();
+        },
+        "$mod+Minus": (event: KeyboardEvent) => {
+          if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
+          event.preventDefault();
+          event.stopPropagation();
+          zoomOut();
+        },
+        "$mod+0": (event: KeyboardEvent) => {
+          if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
+          event.preventDefault();
+          event.stopPropagation();
+          resetZoom();
+        },
+        Alt: (event: KeyboardEvent) => {
+          if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
+          event.preventDefault();
+          showHotkeys.value = !showHotkeys.value;
+        },
+      });
 
-    window.__pointAnnotationHotkeysUnsubscribe = unsubscribe;
+      // 🔧 多实例支持：unsubscribe 保存在当前组件作用域，不再使用全局 window 存储
+      hotkeysUnsubscribe = unsubscribe;
+    }
   });
 });
 
@@ -1179,9 +1187,10 @@ onUnmounted(() => {
   window.removeEventListener("mousemove", handleMouseMove);
   window.removeEventListener('focusout', handleFocusOut);
 
-  if (window.__pointAnnotationHotkeysUnsubscribe) {
-    window.__pointAnnotationHotkeysUnsubscribe();
-    delete window.__pointAnnotationHotkeysUnsubscribe;
+  // 🔧 多实例支持：调用当前实例自己的 unsubscribe，不再使用全局 window
+  if (hotkeysUnsubscribe) {
+    hotkeysUnsubscribe();
+    hotkeysUnsubscribe = null;
   }
 });