Skip to content

Feature: enable zoom scalable dragging#43

Open
mislavivanda wants to merge 1 commit intoekymo:masterfrom
mislavivanda:zoom-scalable-dragging
Open

Feature: enable zoom scalable dragging#43
mislavivanda wants to merge 1 commit intoekymo:masterfrom
mislavivanda:zoom-scalable-dragging

Conversation

@mislavivanda
Copy link
Copy Markdown

🌐What Is Zoom Scalable Dragging?

Zoom-scalable dragging adjusts the drag speed based on the current zoom level. For example:

  • At high zoom-out, dragging moves faster allowing you to traverse more of the floorplan area with the same mouse movement. This can be especially useful when navigating large floorplans.
  • At high zoom-in, dragging becomes slower enabling more precise control and finer adjustments which can again be useful for detailed layouts.

🔗Relation to Previous Dragging Fix(PR#42)

The code changes in this PR address the same flickering issue described in the previously mentioned PR#42.
The key difference is in how drag speed is handled:

  • PR#42 resolves the flickering while keeping drag speed consistent and independent of the zoom level.
  • This PR also resolves the flickering, but introduces zoom-based variability in drag speed enabling faster movement when zoomed out and more precise control when zoomed in.

⚙️How it works

The original drag flickering issue is caused by scaling the distX and distY values using the zoom factor. This scaling is unnecessary because both (pox, poy) - the drag start point - and (snap.xMouse, snap.yMouse) - the current cursor position - are already computed relative to the current zoom level.
When scaling is applied:

  • On zoom out, the distance (distX, distY) becomes larger than it actually is.
  • On zoom in, the distance becomes smaller.

As a result, the viewBox origin is adjusted more than it should be, and the updated origin does not align the view such that (snap.xMouse, snap.yMouse) overlaps with (pox, poy).
This misalignment leads to a feedback loop: the discrepancy between the two points keeps growing, resulting in larger and larger distX/distY values being applied which causes the erratic flickering behavior.

✅The Fix

To fix this, we ensure that applying the drag delta correctly shifts the view so that the starting drag point (pox, poy) moves to the current cursor position (snap.xMouse, snap.yMouse).
We achieve this by setting:

pox = snap.xMouse - distX
poy = snap.yMouse - distY

This offsets (pox, poy) by distX and distY in the direction opposite to the cursor movement, relative to the current mouse position (snap.xMouse, snap.yMouse). Then, when the drag action updates the viewBox origin using those same distX/distY values, the view shifts accordingly bringing (pox, poy) into alignment with the cursor at (snap.xMouse, snap.yMouse).
This ensures stable and predictable drag behavior, matching the intended and expected outcome.

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