修复右键按下时不再触发画布平移

src/components/image-editor/ImageCanvasStageInteractionModel.ts

@@ -30,10 +30,13 @@ type PointerSource = {
   };
 };
 
-type CanvasRectLike = {
-  left?: number;
-  top?: number;
-} | null | undefined;
+type CanvasRectLike =
+  | {
+      left?: number;
+      top?: number;
+    }
+  | null
+  | undefined;
 
 const CANVAS_GENERATION_DIALOG_MODES = new Set([
   'generate',
@@ -64,12 +67,22 @@ function hasCanvasGenerationDialogMode(
 
 export function getPointerButton(event: PointerSource) {
   const nativeButtons = Number(event.nativeEvent?.buttons);
-  if (Number.isFinite(nativeButtons) && (nativeButtons & 4) === 4) {
-    return 1;
+  if (Number.isFinite(nativeButtons)) {
+    if ((nativeButtons & 2) === 2) {
+      return 2;
+    }
+    if ((nativeButtons & 4) === 4) {
+      return 1;
+    }
   }
   const syntheticButtons = Number(event.buttons);
-  if (Number.isFinite(syntheticButtons) && (syntheticButtons & 4) === 4) {
-    return 1;
+  if (Number.isFinite(syntheticButtons)) {
+    if ((syntheticButtons & 2) === 2) {
+      return 2;
+    }
+    if ((syntheticButtons & 4) === 4) {
+      return 1;
+    }
   }
   const syntheticButton = Number(event.button);
   if (Number.isFinite(syntheticButton)) {
@@ -200,9 +213,8 @@ export function createLayerDragStart({
     isMultiSelectGesture,
   });
   const selectedCanvasLayerIds = getSelectedLayerIds(nextSelectedLayerIds);
-  const selectedGenerationDialogIds = getSelectedGenerationDialogIds(
-    nextSelectedLayerIds,
-  );
+  const selectedGenerationDialogIds =
+    getSelectedGenerationDialogIds(nextSelectedLayerIds);
   const dragLayerIds = selectedCanvasLayerIds.includes(layer.id)
     ? selectedCanvasLayerIds
     : [layer.id];
@@ -300,9 +312,8 @@ export function createGenerationFrameSelectionStart({
     selectedIds: selectedLayerIds,
     isMultiSelectGesture,
   });
-  const selectedGenerationDialogIds = getSelectedGenerationDialogIds(
-    nextSelectedLayerIds,
-  );
+  const selectedGenerationDialogIds =
+    getSelectedGenerationDialogIds(nextSelectedLayerIds);
   const selectedCanvasLayerIds = getSelectedLayerIds(nextSelectedLayerIds);
   const dragDialogIds = selectedGenerationDialogIds.includes(dialog.id)
     ? selectedGenerationDialogIds

src/components/image-editor/useImageCanvasStageInteractions.ts

@@ -92,9 +92,7 @@ type UseImageCanvasStageInteractionsOptions = {
   pickUiDesignSpecFromLayer: (layer: CanvasLayer) => void;
   pickPublicationReferenceFromLayer: (layer: CanvasLayer) => void;
   openLayerGenerationDialog?: (layer: CanvasLayer) => boolean;
-  activateCanvasGenerationDialog: (
-    dialog: CanvasGenerationDialogState,
-  ) => void;
+  activateCanvasGenerationDialog: (dialog: CanvasGenerationDialogState) => void;
   updateCanvasGenerationDialogById: (
     dialogId: string,
     updater: (
@@ -216,6 +214,15 @@ export function useImageCanvasStageInteractions({
     }
   }, [finishViewportInteraction, flushMinimapViewportDrag]);
 
+  const rejectRightButtonInteraction = useCallback(
+    (event: ReactPointerEvent<HTMLElement | HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      clearActiveInteraction();
+    },
+    [clearActiveInteraction],
+  );
+
   const setShiftPressed = useCallback((pressed: boolean) => {
     isShiftPressedRef.current = pressed;
   }, []);
@@ -239,12 +246,17 @@ export function useImageCanvasStageInteractions({
   const handleCanvasPointerDown = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
       const button = getPointerButton(event);
-      if (button === 1 ||(button !== 2 && effectiveTool === 'hand')) {
+      if (button === 2) {
+        rejectRightButtonInteraction(event);
+        return;
+      }
+      if (button === 1 || (button === 0 && effectiveTool === 'hand')) {
         startPan(event);
         return;
       }
 
       if (button !== 0) {
+        event.preventDefault();
         return;
       }
       const target = event.target as HTMLElement;
@@ -275,12 +287,17 @@ export function useImageCanvasStageInteractions({
   const handleLayerPointerDown = useCallback(
     (event: ReactPointerEvent<HTMLElement>, layer: CanvasLayer) => {
       const button = getPointerButton(event);
-      if (button === 1 || effectiveTool === 'hand') {
+      if (button === 2) {
+        rejectRightButtonInteraction(event);
+        return;
+      }
+      if (button === 1 || (button === 0 && effectiveTool === 'hand')) {
         event.stopPropagation();
         startPan(event);
         return;
       }
       if (button !== 0) {
+        event.preventDefault();
         event.stopPropagation();
         return;
       }
@@ -481,12 +498,18 @@ export function useImageCanvasStageInteractions({
         return;
       }
       const button = getPointerButton(event);
-      if (button === 1 || effectiveTool === 'hand') {
+      if (button === 2) {
+        rejectRightButtonInteraction(event);
+        return;
+      }
+      if (button === 1 || (button === 0 && effectiveTool === 'hand')) {
         event.stopPropagation();
         startPan(event);
         return;
       }
       if (button !== 0) {
+        event.preventDefault();
+        event.stopPropagation();
         return;
       }
 
@@ -554,6 +577,9 @@ export function useImageCanvasStageInteractions({
 
   const handlePointerMove = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
+      if ((event.buttons & 2) !== 0 && (event.buttons & (1 | 4)) === 0) {
+        return;
+      }
       if (canvasMarquee && canvasMarquee.pointerId === event.pointerId) {
         event.preventDefault();
         const rect = canvasViewportRef.current?.getBoundingClientRect();