diff --git a/client/src/components/rack/RackPlanner.tsx b/client/src/components/rack/RackPlanner.tsx index c7d29df..ba16f5e 100644 --- a/client/src/components/rack/RackPlanner.tsx +++ b/client/src/components/rack/RackPlanner.tsx @@ -79,6 +79,10 @@ function resolveSlotFromPoint(clientX: number, clientY: number): HoverSlot | nul return { rackId, uPosition: uPos }; } +const POINTER_SENSOR_OPTIONS = { + activationConstraint: { distance: 6 }, +}; + export function RackPlanner() { const { racks, loading, fetchRacks, moveModule } = useRackStore(); const canvasRef = useRef(null); @@ -105,7 +109,7 @@ export function RackPlanner() { } const sensors = useSensors( - useSensor(PointerSensor, { activationConstraint: { distance: 6 } }) + useSensor(PointerSensor, POINTER_SENSOR_OPTIONS) ); useEffect(() => { @@ -122,8 +126,12 @@ export function RackPlanner() { function onPointerMove(e: PointerEvent) { if (!isDraggingAnyRef.current) return; const slot = resolveSlotFromPoint(e.clientX, e.clientY); - hoverSlotRef.current = slot; - setHoverSlot(slot); + + const prev = hoverSlotRef.current; + if (prev?.rackId !== slot?.rackId || prev?.uPosition !== slot?.uPosition) { + hoverSlotRef.current = slot; + setHoverSlot(slot); + } } // Capture phase so we get the event before any element can stop propagation.