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.

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

Dragging the map selects a region #47

Closed
crystalenka opened this issue Sep 1, 2021 · 7 comments
Closed

Dragging the map selects a region #47

crystalenka opened this issue Sep 1, 2021 · 7 comments
Labels
bug Something isn't working

Comments

@crystalenka
Copy link

Hi!

I am very grateful for this plugin, it's saved me a TON of time. I've just noticed a bug while I'm testing my map; if you click and drag the map with the mouse over a region, it selects the region.

Is there any way to disable or modify this behavior, besides disabling dragging? Is there an onDrag event or something? (Also asking because I'd like to change the cursor when it's dragging.)

Thank you!
Crystal

@themustafaomar themustafaomar pinned this issue Sep 1, 2021
@themustafaomar themustafaomar added the bug Something isn't working label Sep 1, 2021
@themustafaomar
Copy link
Owner

Thank you for reporting this bug!

I've just fixed the issue and released a new version please make sure to update to v1.3.3

As for dragging, unfortunately, there is no event fired when dragging the map.

However as a workaround you can do the following:

const jvm = new jsVectorMap({
  selector: "#map",
  map: "world_merc",
  regionsSelectable: true,
  onLoaded(map) {
    const container = map.container

    // When dragging the map from anywhere inside the container, even if it is not a region.
    // container.on('mousedown', () => {
    //   console.log('Dragging!!')
    // })
    // .on('mouseup', () => {
    //   console.log('Released!!')
    // })

    // OR -> when dragging the region/s itself.
    // Using built-in delegate method is recommended because
    // all event listeners wrapped within it are removed automatically when the map is destroyed.
    container.delegate(".jvm-region", "mousedown mouseup", (event) => {
      if (event.type === "mousedown") {
        console.log("Region is being dragged!!")
      } else {
        console.log("Region released!!")
      }
    })
  }
})

Demo: https://codepen.io/themustafaomar/pen/VwWagKV

Regards.

@themustafaomar themustafaomar unpinned this issue Sep 3, 2021
@crystalenka
Copy link
Author

Amazing, thank you so much for your fast response and help!! I really appreciate it!

@crystalenka
Copy link
Author

So I just tested the fix, and it fixes it a little too well! 😅 I use a trackpad and if I accidentally drag by like a pixel when trying to select a region, it no longer does it. I think this might also be an issue on touch devices although I haven't tried it yet.

Is there way to add (or set) a threshold for dragging vs selecting action when both these options are enabled? Like if it drags more than, say, 10 or 20 pixels probably it's intentional, but under that might just be a sloppy click.

@themustafaomar
Copy link
Owner

Sorry for the very late response.

Although this isn't considered a big issue, I mean it's very difficult to move the cursor 1px or even 5px and very rare condition, but I'll see what I can do.

@crystalenka
Copy link
Author

crystalenka commented Sep 30, 2021 via email

@themustafaomar
Copy link
Owner

Thank you for the kind words! It'll be fixed it as soon as possible.

@crystalenka
Copy link
Author

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants