Skip to content

Fix: prevent flickering while dragging on high zoom levels#42

Open
mislavivanda wants to merge 1 commit intoekymo:masterfrom
mislavivanda:prevent-drag-flickering
Open

Fix: prevent flickering while dragging on high zoom levels#42
mislavivanda wants to merge 1 commit intoekymo:masterfrom
mislavivanda:prevent-drag-flickering

Conversation

@mislavivanda
Copy link
Copy Markdown

@mislavivanda mislavivanda commented Jun 29, 2025

🐞Current Issue

Dragging at high zoom-out levels causes flickering and does not behave as intended.

✅Test Steps

  1. Start the app
  2. Create a basic square floorplan from initial modal
  3. Zoom out to the maximum level
  4. Attempt to drag around - flickering should occur

🛠️How Dragging Works

The drag logic is based on calculating the horizontal and vertical distances between two points:

  • pox, poy - set inside _MOUSEDOWN at the start of the drag
  • snap.xMouse, snap.YMouse - updated with the current cursor position

These distances (distX, distY) are then used to adjust the viewBox origin of the main SVG element. For example:

  • Moving mouse to the right (increasing distX) subtracts distX from the viewBox’s x origin, causing all SVG elements to shift right, which creates a visual drag-left effect.

❗Why Flickering Happens

At high zoom-out levels, the zoom factor becomes greater than 1. This amplifies distX and distY, leading to exaggerated changes to the viewBox origin. As a result:

  • The distance between the initial drag point (pox, poy) and the current cursor position keeps increasing disproportionately.
  • This creates increasingly large viewBox jumps, leading to flickering and eventually moving out of the visible SVG area (i.e. no grid visible).

This issue doesn’t occur at the default zoom level (factor = 1), where no scaling is applied to distX/distY.
At high zoom-in levels, dragging becomes slower due to downscaled distX/distY, but it's still stable and usable - unlike during zoom-out.

✅Proposed fix

The root cause is the unnecessary scaling of distX and distY by the zoom factor value.
The purpose of distX and distY is to represent the difference in coordinates between the current cursor position(snap.xMouse, snap.yMouse) and the drag starting point(pox, poy). Since both of these positions are determined on the same zoom level, their subtraction already reflects the correct difference and relative movement. Scaling these values distorts that relationship and introduces afore mentioned instability. Removing the scaling restores their intended use and ensures consistent drag behavior across zoom levels.

🔄Alternative Fix with Zoom-Scalable Dragging

If you're interested in fixing the flickering issue while also enabling zoom-scalable dragging, check out PR#43.
It proposes an alternative approach that resolves the bug and introduces drag behavior that adapts to the current zoom level.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant