Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update DOM.mousePos() with Leaflet code #2276

Closed
wants to merge 1 commit into from
Closed

Update DOM.mousePos() with Leaflet code #2276

wants to merge 1 commit into from

Conversation

IvanSanchez
Copy link
Contributor

@IvanSanchez IvanSanchez commented Mar 15, 2023 •
edited
Loading

This partially fixes #1160, by using an adaptation of Leaflet's L.DOMEvent.getMousePosition() (see https://github.com/Leaflet/Leaflet/blob/18d703176bec040a06f233702d3eec141e95daaf/src/dom/DomEvent.js#L245-L262).

The DOM.touchPos() static method should still display the bug.

Launch Checklist

  • Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
  • Briefly describe the changes in this PR.
  • Link to related issues.
  • Include before/after visuals or gifs if this PR includes visual changes.
  • Write tests for all new functionality.
  • Document any changes to public APIs.
  • Post benchmark scores.
  • Add an entry to CHANGELOG.md under the ## main section.

@IvanSanchez
Copy link
Contributor Author

See also Leaflet/Leaflet#6055 - this specific bit of code dates back to 2018.

@IvanSanchez
Update DOM.mousePos() with Leaflet code
17f5572 
This **partially** fixes maplibre#1160, by using an adaptation of Leaflet's
`L.DOMEvent.getMousePosition()`.

The `DOM.touchPos()` static method should still display the bug.

Signed-off-by: Iván Sánchez Ortega <[email protected]>
HarelM
HarelM reviewed Mar 15, 2023
View reviewed changes
src/util/dom.ts
@@ -84,12 +84,32 @@ export default class DOM {
}, 0);
}

public static mousePos(el: HTMLElement, e: MouseEvent | Touch) {
const rect = el.getBoundingClientRect();
public static getScale(element: HTMLElement) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add a return type here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TBH I've never done any typescript, so I don't know how to specify "an object containing two Numbers and one DomRect" 😕

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can easily google it or look in other places in the code.
Here's an exmaple:

type ScaleValue {
    x: number;
    y: number;
    boundingClientRect: Rect;
}

HarelM
HarelM reviewed Mar 15, 2023
View reviewed changes
src/util/dom.ts
}

const scale = DOM.getScale(el),
offset = scale.boundingClientRect; // left and top values are in page scale (like the event clientX/Y)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would be better to define another variable here.
Also since getScale is a method you wrote, you can use a different name for boundingClientRect or change the offset variable name to boundingClientRect. In general, it would make sense that they have the same name I think.

@HarelM
Copy link
Collaborator

HarelM commented Mar 15, 2023

Thanks for taking the time to open this PR!
I would recommend adding test to make sure this is working as expected, for example the browser tests is a good candidate for this.
Also please add a changelog entry.
It would be supper if you fix the touchpos as well.
THANKS!

@HarelM
Copy link
Collaborator

HarelM commented Jun 28, 2023

@IvanSanchez what's the status of this PR?

@dubiety
Copy link

dubiety commented Jul 21, 2023

Hi @HarelM and @IvanSanchez , any update on this PR?
It would be very helpful if we can have the PR merged. Much apprecated!

@HarelM
Copy link
Collaborator

HarelM commented Jul 21, 2023

I haven't heard back, your best approach would be to take the code in this PR and create another one with the relevant fix along side tests so I'll be able to merge it.

@HarelM
Copy link
Collaborator

HarelM commented Aug 20, 2023

@IvanSanchez, any updates on your PRs? There are two waiting for code review changes.
Can you push them forward?

@HarelM HarelM mentioned this pull request Dec 3, 2023
Merged
8 tasks
@HarelM
Copy link
Collaborator

HarelM commented Dec 3, 2023

I have created another PR with the relevant fix: #3437
It also addressed the touch event.
This PR is also not addressing the y axis properly due to an issue with the canvas height, see the attached image in the above linked PR.

@HarelM HarelM closed this Dec 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@HarelM HarelM HarelM left review comments

Assignees
No one assigned
Labels
waiting for code review fixes
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Mouse events are shifted after a css transform scale on the map container
3 participants
@IvanSanchez @HarelM @dubiety