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,15 +2343,7 @@ const PaperContainer = (
     syncRenderModeVisuals,
   ])
 
-  const stopRenderModePan = useCallback(() => {
-    renderModePanRef.current.active = false
-  }, [])
-
-  const handleRenderModeOverlayMouseDown = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      event.preventDefault()
-      event.stopPropagation()
-
+  const hidePaperContextMenu = useCallback(() => {
     useOtherToolsStore.getState().setShowContextMenu({
       showContextMenu: false,
       position: { top: 0, left: 0 },
@@ -2359,26 +2351,64 @@ const PaperContainer = (
       operationId: "",
       id: 0,
     })
+  }, [])
 
-      if (event.button !== 1) return
-
-      renderModePanRef.current = {
+  const startMiddleMousePan = useCallback(
+    (clientX: number, clientY: number) => {
+      middleMousePanRef.current = {
         active: true,
-        lastX: event.clientX,
-        lastY: event.clientY,
+        lastX: clientX,
+        lastY: clientY,
       }
     },
     []
   )
 
+  const stopMiddleMousePan = useCallback(() => {
+    middleMousePanRef.current.active = false
+  }, [])
+
   useEffect(() => {
-    if (!renderMode) {
-      stopRenderModePan()
-      return
+    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()
+
+      hidePaperContextMenu()
+
+      if (event.button !== 1) return
+
+      startMiddleMousePan(event.clientX, event.clientY)
+    },
+    [hidePaperContextMenu, startMiddleMousePan]
+  )
+
+  useEffect(() => {
     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
-      renderModePanRef.current.lastY = event.clientY
+      middleMousePanRef.current.lastX = event.clientX
+      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(
     ({