diff --git a/src/components/StudentManager.tsx b/src/components/StudentManager.tsx index 2975947..f9cca94 100644 --- a/src/components/StudentManager.tsx +++ b/src/components/StudentManager.tsx @@ -108,9 +108,7 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => { const [pointerDraggingStudentId, setPointerDraggingStudentId] = useState(null) const [pointerTargetGroup, setPointerTargetGroup] = useState(null) const [pointerDragStudentName, setPointerDragStudentName] = useState("") - const [pointerDragPosition, setPointerDragPosition] = useState<{ x: number; y: number } | null>( - null - ) + const pointerDragGhostRef = useRef(null) const pointerDragPositionRef = useRef<{ x: number; y: number } | null>(null) const pointerDragRafRef = useRef(null) const draggingStudentIdRef = useRef(null) @@ -510,7 +508,14 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => { setPointerDraggingStudentId(studentId) setPointerDragStudentName(studentName) pointerDragPositionRef.current = { x: e.clientX, y: e.clientY } - setPointerDragPosition({ x: e.clientX, y: e.clientY }) + requestAnimationFrame(() => { + if (!pointerDragPositionRef.current) return + const ghost = pointerDragGhostRef.current + if (!ghost) return + ghost.style.transform = `translate3d(${pointerDragPositionRef.current.x + 14}px, ${ + pointerDragPositionRef.current.y + 14 + }px, 0)` + }) setPointerTargetGroup(null) e.currentTarget.setPointerCapture(e.pointerId) console.debug("[GroupBoard] pointer drag start", { @@ -526,10 +531,11 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => { pointerDragRafRef.current = requestAnimationFrame(() => { pointerDragRafRef.current = null if (!pointerDragPositionRef.current) return - setPointerDragPosition({ - x: pointerDragPositionRef.current.x, - y: pointerDragPositionRef.current.y, - }) + const ghost = pointerDragGhostRef.current + if (!ghost) return + ghost.style.transform = `translate3d(${pointerDragPositionRef.current.x + 14}px, ${ + pointerDragPositionRef.current.y + 14 + }px, 0)` }) } @@ -570,8 +576,9 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => { } setPointerDraggingStudentId(null) setPointerDragStudentName("") - setPointerDragPosition(null) setPointerTargetGroup(null) + const ghost = pointerDragGhostRef.current + if (ghost) ghost.style.transform = "translate3d(-9999px, -9999px, 0)" } const readFileAsDataUrl = (file: File): Promise => { @@ -1411,9 +1418,15 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => { draggingStudentIdRef.current = null pointerDragSourceGroupRef.current = null pointerDragTargetGroupRef.current = null + pointerDragPositionRef.current = null + if (pointerDragRafRef.current != null) { + cancelAnimationFrame(pointerDragRafRef.current) + pointerDragRafRef.current = null + } + const ghost = pointerDragGhostRef.current + if (ghost) ghost.style.transform = "translate3d(-9999px, -9999px, 0)" setPointerDraggingStudentId(null) setPointerDragStudentName("") - setPointerDragPosition(null) setPointerTargetGroup(null) }} onOk={handleSaveGroupBoard} @@ -1530,8 +1543,9 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => { ) })} - {pointerDraggingStudentId != null && pointerDragPosition && ( + {pointerDraggingStudentId != null && (
= ({ canEdit }) => { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", - transform: `translate3d(${pointerDragPosition.x + 14}px, ${pointerDragPosition.y + 14}px, 0)`, + transform: "translate3d(-9999px, -9999px, 0)", willChange: "transform", }} >