调整画布拖拽交互仅保留鼠标中键

移除鼠标右键拖拽画布的交互处理

保留鼠标中键拖拽画布功能

同步更新相关交互测试

src/components/image-editor/useImageCanvasStageInteractions.test.tsx

@@ -920,4 +920,52 @@ describe('useImageCanvasStageInteractions', () => {
     expect(flushMinimapViewportDrag).toHaveBeenCalledTimes(1);
     expect(onViewportInteractionEnd).toHaveBeenCalledTimes(2);
   });
+
+  it('allows middle-button dragging and rejects right-button dragging', () => {
+    render(<StageInteractionsHarness />);
+
+    const viewport = screen.getByTestId('viewport');
+
+    act(() => {
+      fireEvent(
+        viewport, 
+        new MouseEvent('pointerdown',{
+          bubbles: true,
+          clientX: 100,
+          clientY: 100,
+          button: 1,
+          buttons: 4,
+        }),
+      );
+    });
+    expect(screen.getByTestId('panning').textContent).toBe('true');
+
+    act(() => {
+      fireEvent(
+        viewport, 
+        new MouseEvent('pointerup',{
+          bubbles: true,
+          clientX: 100,
+          clientY: 100,
+          button: 1,
+          buttons: 0,
+        }),
+      );
+    });
+    expect(screen.getByTestId('panning').textContent).toBe('false');
+
+    act(() => {
+      fireEvent(
+        viewport, 
+        new MouseEvent('pointerdown',{
+          bubbles: true,
+          clientX: 100,
+          clientY: 100,
+          button: 2,
+          buttons: 2,
+        }),
+      );
+    });
+    expect(screen.getByTestId('panning').textContent).toBe('false');
+  });
 });

src/components/image-editor/useImageCanvasStageInteractions.ts

@@ -239,7 +239,7 @@ export function useImageCanvasStageInteractions({
   const handleCanvasPointerDown = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
       const button = getPointerButton(event);
-      if (button !== 0 || effectiveTool === 'hand') {
+      if (button === 1 ||(button !== 2 && effectiveTool === 'hand')) {
         startPan(event);
         return;
       }