publiclab / Leaflet.DistortableImage

A Leaflet extension to distort or "rubber sheet" images
https://publiclab.github.io/Leaflet.DistortableImage/examples/
BSD 2-Clause "Simplified" License
265 stars 284 forks source link

Rotate Event Callback #1384

Closed bencote closed 1 year ago

bencote commented 1 year ago

I cannot find how to wire up an event callback for rotation events.

Please describe the desired behavior. one of the other issues described wiring up an on.('drag') event to the editing subclass but that did not work. the issue was #980. I commented there but it was a closed issue.

Additional context (optional)

welcome[bot] commented 1 year ago

Thanks for opening your first issue here! This space is protected by our Code of Conduct - and we're here to help. Please follow the issue template to help us help you 👍🎉😄 If you have screenshots or a gif to share demonstrating the issue, that's really helpful! 📸 You can make a gif too! Do join our Gitter channel for some brainstorming discussions.

jywarren commented 1 year ago

Redirecting into https://github.com/publiclab/Leaflet.DistortableImage/issues/980, thank you for finding that!!

jywarren commented 1 year ago

Ah, and noticing that the 'rotate' event doesn't work with the technique I tested in #980, so modifying a bit for rotation:

Here, we'd have to attach the event to all four corner handles, for the "free rotate" or "rotate" handles:

Object.values(map.imgGroup._layers)[0].editing._handles.freeRotate._layers[132].on('drag', (e) => {console.log('drag handles')})

See the different types of handles here: Object.values(map.imgGroup._layers)[0].editing._handles

I'm not sure how easy it is to just listen to everything, but this is at least a way to listen for very specific types of rotation/free rotation. Hope that helps -- I tested the above code and one of the four handles does output log messages, in https://publiclab.github.io/Leaflet.DistortableImage/examples/archive