jason/rack-planner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(rack): memoize dnd-kit sensors and prevent pointermove state thrashing

Browse Source
This commit is contained in:
jason
2026-03-22 11:29:02 -05:00
parent 2e2b182844
commit df04bb2c78
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/rack/RackPlanner.tsx
View File

@@ -79,6 +79,10 @@ function resolveSlotFromPoint(clientX: number, clientY: number): HoverSlot | nul
return { rackId, uPosition: uPos }; return { rackId, uPosition: uPos };
} }
const POINTER_SENSOR_OPTIONS = {
activationConstraint: { distance: 6 },
};
export function RackPlanner() { export function RackPlanner() {
const { racks, loading, fetchRacks, moveModule } = useRackStore(); const { racks, loading, fetchRacks, moveModule } = useRackStore();
const canvasRef = useRef<HTMLDivElement>(null); const canvasRef = useRef<HTMLDivElement>(null);
@@ -105,7 +109,7 @@ export function RackPlanner() {
} }
const sensors = useSensors( const sensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 6 } }) useSensor(PointerSensor, POINTER_SENSOR_OPTIONS)
); );
useEffect(() => { useEffect(() => {
@@ -122,8 +126,12 @@ export function RackPlanner() {
function onPointerMove(e: PointerEvent) { function onPointerMove(e: PointerEvent) {
if (!isDraggingAnyRef.current) return; if (!isDraggingAnyRef.current) return;
const slot = resolveSlotFromPoint(e.clientX, e.clientY); 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. // Capture phase so we get the event before any element can stop propagation.