Eventhandlers

[semihsahin]

Scope: API

Description: I couldn't find how we can check the occurrence of certain events. I want to do some operation when an image is rotated, scaled or dragged. Example:

img.on('rotate, rotateend', function (e){ //... })

[welcome[bot]]

Thanks for opening your first issue here! Please follow the issue template to help us help you 👍🎉😄 If you have screenshots to share demonstrating the issue, that's really helpful! 📸 You can make a gif too!

[tadiraman]

Can we get some clarity on @semihsahin comment? I am searching for the same. How do i subscribe to the image events like distort, scale etc. ?

[jywarren]

Hi, sorry for slow reply here, rotation and scaling events are managed within the "handles" since that's what you actually drag:

https://github.com/publiclab/Leaflet.DistortableImage/blob/00ceec2d7332e39cac1abf0e7ff25ffd11b3e063/src/edit/handles/EditHandle.js#L46-L52

However dragging the image itself is managed through the image Edit class, here:

https://github.com/publiclab/Leaflet.DistortableImage/blob/5d0468d000aec5a87f0fd364d4693dbbbf4c1918/src/edit/DistortableImage.Edit.js#L287-L314

You should be able to subscribe to an instance of L.DistortableImage.Edit like:

distortableImageEdit.on('drag', () => {
  // do something here
});

You can access the Editable subobject of a distortable image like distortableImage.editing, so distortableImage.editing.on('drag'...

[jywarren]

I'm going to close this but please re-open if that doesn't work or if you have other questions!

[bencote]

@jywarren : I tried to use your example for attaching to handle events without success...

distortableImage.editing.on('drag', (e) => { console.log("image handle drag ended:" + e); });

gives the error: distortableImage.editing.on is not a function...

Inspecting with debug tools shows there is no _events collection on the editing subclass.

[jywarren]

Ah, my mistake - well, i was able to do:

map.imgGroup._layers[136].on('drag', (e) => {console.log('drag')})

Directly in https://publiclab.github.io/Leaflet.DistortableImage/examples/archive - although I had to manually find the image within map.imgGroup._layers by inspecting it first.

To get around that step, you can do this but probably you won't have to if you have your own image constructor code:

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

Hope that helps!