fix(tool): middleMouse

components/label/components/PaperContainer.tsx

@@ -518,7 +518,7 @@ const PaperContainer = (
     token: number
     imageName: string
   } | null>(null)
-  const renderModePanRef = useRef({
+  const middleMousePanRef = useRef({
     active: false,
     lastX: 0,
     lastY: 0,
@@ -2343,42 +2343,72 @@ const PaperContainer = (
     syncRenderModeVisuals,
   ])
 
-  const stopRenderModePan = useCallback(() => {
+  const hidePaperContextMenu = useCallback(() => {
-    renderModePanRef.current.active = false
+    useOtherToolsStore.getState().setShowContextMenu({
+      showContextMenu: false,
+      position: { top: 0, left: 0 },
+      imageId: "",
+      operationId: "",
+      id: 0,
+    })
   }, [])
 
+  const startMiddleMousePan = useCallback(
+    (clientX: number, clientY: number) => {
+      middleMousePanRef.current = {
+        active: true,
+        lastX: clientX,
+        lastY: clientY,
+      }
+    },
+    []
+  )
+
+  const stopMiddleMousePan = useCallback(() => {
+    middleMousePanRef.current.active = false
+  }, [])
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const handleMouseDownCapture = (event: MouseEvent) => {
+      if (event.button !== 1) return
+
+      const target = event.target as HTMLElement | null
+      if (target?.closest('[data-label-context-menu="true"]')) return
+
+      event.preventDefault()
+      event.stopPropagation()
+      hidePaperContextMenu()
+      startMiddleMousePan(event.clientX, event.clientY)
+    }
+
+    container.addEventListener("mousedown", handleMouseDownCapture, true)
+
+    return () => {
+      container.removeEventListener("mousedown", handleMouseDownCapture, true)
+      stopMiddleMousePan()
+    }
+  }, [hidePaperContextMenu, startMiddleMousePan, stopMiddleMousePan])
+
   const handleRenderModeOverlayMouseDown = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
       event.preventDefault()
       event.stopPropagation()
 
-      useOtherToolsStore.getState().setShowContextMenu({
+      hidePaperContextMenu()
-        showContextMenu: false,
-        position: { top: 0, left: 0 },
-        imageId: "",
-        operationId: "",
-        id: 0,
-      })
 
       if (event.button !== 1) return
 
-      renderModePanRef.current = {
+      startMiddleMousePan(event.clientX, event.clientY)
-        active: true,
-        lastX: event.clientX,
-        lastY: event.clientY,
-      }
     },
-    []
+    [hidePaperContextMenu, startMiddleMousePan]
   )
 
   useEffect(() => {
-    if (!renderMode) {
-      stopRenderModePan()
-      return
-    }
-
     const handleMouseMove = (event: MouseEvent) => {
-      const currentPan = renderModePanRef.current
+      const currentPan = middleMousePanRef.current
       if (!currentPan.active) return
 
       event.preventDefault()
@@ -2390,26 +2420,29 @@ const PaperContainer = (
       if (!deltaX && !deltaY) return
 
       group.position = group.position.add(new paper.Point(deltaX, deltaY))
-      renderModePanRef.current.lastX = event.clientX
+      middleMousePanRef.current.lastX = event.clientX
-      renderModePanRef.current.lastY = event.clientY
+      middleMousePanRef.current.lastY = event.clientY
     }
 
     const handleMouseUp = (event: MouseEvent) => {
       if (event.button === 1) {
         event.preventDefault()
       }
-      stopRenderModePan()
+
+      stopMiddleMousePan()
     }
 
     window.addEventListener("mousemove", handleMouseMove, { passive: false })
     window.addEventListener("mouseup", handleMouseUp, { passive: false })
+    window.addEventListener("blur", stopMiddleMousePan)
 
     return () => {
       window.removeEventListener("mousemove", handleMouseMove)
       window.removeEventListener("mouseup", handleMouseUp)
-      stopRenderModePan()
+      window.removeEventListener("blur", stopMiddleMousePan)
+      stopMiddleMousePan()
     }
-  }, [renderMode, stopRenderModePan])
+  }, [stopMiddleMousePan])
 
   const getTargetGroupPosition = useCallback(
     ({