There is a noticeable visual "flicker" when dragging a quantum operation across the boundary between two adjacent valid drop zones. For a few milliseconds, the UI acts as if the operation is over an invalid area: the cursor changes to the "forbidden" sign, and the drop placeholder might briefly disappear before snapping to the next cell.
Steps to Reproduce
Start dragging a gate (either from the library or the circuit).
Move the mouse slowly from one valid drop zone (Cell A) to an adjacent valid drop zone (Cell B).
Observe the cursor and the hover placeholder at the exact moment the cursor crosses the border between the two cells.
Actual Behavior
Even though there is no physical gap between the cells, the system momentarily enters a "no-hover" state. This causes the cursor to flicker and the visual feedback (dummy gate/placeholder) to stutter.
Technical Analysis
This issue is likely caused by the execution order of HTML5 Drag-and-Drop events:
When leaving Cell A, onDragLeave is fired, which currently triggers setHoverPos(null).
A few milliseconds later, onDragOver or onDragEnter is fired for Cell B, which calls setHoverPos(...) with the new coordinates.
Because React state updates and subsequent re-renders take a tiny amount of time, there is a "dead zone" where the state is null. Even if the transition is fast, the browser's UI thread reflects the "forbidden" drop state during this gap.
Potential Solutions
The goal is to prevent the state from being reset to null if the cursor is moving directly into another valid drop zone.
-
Debounced Reset: Introduce a tiny delay (e.g., via setTimeout or a requestAnimationFrame) before setting hoverPos to null on dragLeave. If a dragOver event occurs on another cell within that timeframe, the reset is canceled.
-
Check Related Target: Use the relatedTarget property of the drag event to see if the element being entered is another valid drop zone before clearing the current state.
-
Global Drag Over: Instead of individual listeners on every cell, use a single onDragOver listener on the parent container and calculate the target cell based on the mouse coordinates.
There is a noticeable visual "flicker" when dragging a quantum operation across the boundary between two adjacent valid drop zones. For a few milliseconds, the UI acts as if the operation is over an invalid area: the cursor changes to the "forbidden" sign, and the drop placeholder might briefly disappear before snapping to the next cell.
Steps to Reproduce
Start dragging a gate (either from the library or the circuit).
Move the mouse slowly from one valid drop zone (Cell A) to an adjacent valid drop zone (Cell B).
Observe the cursor and the hover placeholder at the exact moment the cursor crosses the border between the two cells.
Actual Behavior
Even though there is no physical gap between the cells, the system momentarily enters a "no-hover" state. This causes the cursor to flicker and the visual feedback (dummy gate/placeholder) to stutter.
Technical Analysis
This issue is likely caused by the execution order of HTML5 Drag-and-Drop events:
When leaving Cell A, onDragLeave is fired, which currently triggers setHoverPos(null).
A few milliseconds later, onDragOver or onDragEnter is fired for Cell B, which calls setHoverPos(...) with the new coordinates.
Because React state updates and subsequent re-renders take a tiny amount of time, there is a "dead zone" where the state is null. Even if the transition is fast, the browser's UI thread reflects the "forbidden" drop state during this gap.
Potential Solutions
The goal is to prevent the state from being reset to null if the cursor is moving directly into another valid drop zone.
Debounced Reset: Introduce a tiny delay (e.g., via setTimeout or a requestAnimationFrame) before setting hoverPos to null on dragLeave. If a dragOver event occurs on another cell within that timeframe, the reset is canceled.
Check Related Target: Use the relatedTarget property of the drag event to see if the element being entered is another valid drop zone before clearing the current state.
Global Drag Over: Instead of individual listeners on every cell, use a single onDragOver listener on the parent container and calculate the target cell based on the mouse coordinates.