Fix: prevent flickering while dragging on high zoom levels#42
Open
mislavivanda wants to merge 1 commit intoekymo:masterfrom
Open
Fix: prevent flickering while dragging on high zoom levels#42mislavivanda wants to merge 1 commit intoekymo:masterfrom
mislavivanda wants to merge 1 commit intoekymo:masterfrom
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🐞Current Issue
Dragging at high zoom-out levels causes flickering and does not behave as intended.
✅Test Steps
🛠️How Dragging Works
The drag logic is based on calculating the horizontal and vertical distances between two points:
pox,poy- set inside_MOUSEDOWNat the start of the dragsnap.xMouse,snap.YMouse- updated with the current cursor positionThese distances (
distX,distY) are then used to adjust theviewBoxorigin of the main SVG element. For example:distX) subtractsdistXfrom theviewBox’sxorigin, causing all SVG elements to shift right, which creates a visual drag-left effect.❗Why Flickering Happens
At high zoom-out levels, the zoom
factorbecomes greater than 1. This amplifiesdistXanddistY, leading to exaggerated changes to theviewBoxorigin. As a result:pox,poy) and the current cursor position keeps increasing disproportionately.viewBoxjumps, 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 todistX/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
distXanddistYby the zoomfactorvalue.The purpose of
distXanddistYis 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.