fix(title): 拖拽时用ref直接改DOM避免React重渲染导致换行

handleTitlePointerMove 每次 mousemove 都调用 onTitlePositionChange 触发 React 频繁重渲染，wordBreak:break-word 导致标题文字换行。修复：拖拽过程中用 titleDragRef 直接修改 DOM style.left/top，不触发 React 渲染；只在 handleTitlePointerUp（拖拽结束）时调用 onTitlePositionChange 保存最终位置。
2026-09-01 14:32:19 +08:00
parent adf6b517fb
commit 89413d6822
1 changed files with 35 additions and 20 deletions
@@ -141,6 +141,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({

  // ── 拖拽状态（用 ref 避免在每帧渲染中触发重渲染）──
  const draggingTitleRef = useRef(false)
+  const titleDragRef = useRef<HTMLDivElement>(null)
  const handleTitlePointerDown = useCallback(
    (e: React.PointerEvent<HTMLDivElement>) => {
      if (!onTitlePositionChange || !playerContainerRef.current) return
@@ -152,32 +153,45 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
    },
    [onTitlePositionChange],
  )
-  const handleTitlePointerMove = useCallback(
-    (e: React.PointerEvent<HTMLDivElement>) => {
-      if (!draggingTitleRef.current || !onTitlePositionChange || !playerContainerRef.current) return
-      e.preventDefault()
-      e.stopPropagation()
+  const handleTitlePointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!draggingTitleRef.current || !playerContainerRef.current) return
+    e.preventDefault()
+    e.stopPropagation()
+    // 拖拽过程中直接修改 DOM，不触发 React 渲染（避免频繁重渲染导致换行）
+    if (titleDragRef.current) {
      const rect = playerContainerRef.current.getBoundingClientRect()
      const relX = Math.max(0, Math.min(rect.width, e.clientX - rect.left))
      const relY = Math.max(0, Math.min(rect.height, e.clientY - rect.top))
-      const posX = Math.round((relX / rect.width) * playRes.width)
-      const posY = Math.round((relY / rect.height) * playRes.height)
-      onTitlePositionChange(posX, posY)
+      const xpct = (relX / rect.width) * 100
+      const ypct = (relY / rect.height) * 100
+      titleDragRef.current.style.left = `${xpct}%`
+      titleDragRef.current.style.top = `${ypct}%`
+    }
+  }, [])
+  const handleTitlePointerUp = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!draggingTitleRef.current) return
+      draggingTitleRef.current = false
+      // 拖拽结束时才调用 onTitlePositionChange 保存最终位置
+      if (onTitlePositionChange && playerContainerRef.current) {
+        const rect = playerContainerRef.current.getBoundingClientRect()
+        const relX = Math.max(0, Math.min(rect.width, e.clientX - rect.left))
+        const relY = Math.max(0, Math.min(rect.height, e.clientY - rect.top))
+        const posX = Math.round((relX / rect.width) * playRes.width)
+        const posY = Math.round((relY / rect.height) * playRes.height)
+        onTitlePositionChange(posX, posY)
+      }
+      ;(e.currentTarget as HTMLDivElement).style.cursor = "grab"
+      try {
+        if ((e.currentTarget as Element).hasPointerCapture(e.pointerId)) {
+          ;(e.currentTarget as Element).releasePointerCapture(e.pointerId)
+        }
+      } catch {
+        /* ignore */
+      }
    },
    [onTitlePositionChange, playRes.width, playRes.height],
  )
-  const handleTitlePointerUp = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    if (!draggingTitleRef.current) return
-    draggingTitleRef.current = false
-    ;(e.currentTarget as HTMLDivElement).style.cursor = "grab"
-    try {
-      if ((e.currentTarget as Element).hasPointerCapture(e.pointerId)) {
-        ;(e.currentTarget as Element).releasePointerCapture(e.pointerId)
-      }
-    } catch {
-      /* ignore */
-    }
-  }, [])

  const playerContainerRef = useRef<HTMLDivElement>(null)
  const [containerHeight, setContainerHeight] = useState(0)
@@ -602,6 +616,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
              padding: "8px 12px",
              boxShadow: "inset 0 0 0 16px transparent",
            }}
+            ref={titleDragRef}
            onPointerDown={handleTitlePointerDown}
            onPointerMove={handleTitlePointerMove}
            onPointerUp={handleTitlePointerUp}