Add an hook for circle draw event for mousemove after setting center

[ThomasG77]

I didn't found any event hook for getting mouse position coordinates after drawing the center. I'm only aware of a drawstart and a drawend but I want to get an event while drawing in order to get center and use it for returning radius and display it in a tooltip. This would be quite similar to existing Leaflet.draw (see screenshot)

IMO, the hook would be enough as it would not bloat the library: it would be the dev responsibility to care about distance calculation or tooltip.

I may miss the event. Otherwise, I've done a naive implementation for creation when moving only the radius (not done for edit level) in this branch https://github.com/ThomasG77/leaflet.pm/tree/hook-circle-move

To test it,

git clone https://github.com/ThomasG77/leaflet.pm.git && leaflet.pm
git checkout hook-circle-move
npm install
npm run build

Then open the modified existing demo, open the console and try to draw a circle on the first map map2

What is your opinion about this feature request? My naive implementation?

[codeofsumit]

hey @ThomasG77, I have to check this out in detail. I hope I can get back to you on this during the weekend! 👍

[codeofsumit]

hey @ThomasG77, how does this sound for you?

Use this code to get the center while it's being drawn/edited

// listen to the center of a circle being added
map.on('pm:drawstart', function(e) {
  var circle = e.workingLayer;

  // this fires only for circles
  circle.on('pm:centerplaced', function(e) {
    console.log(e);
  });
});

// listen to when the center of a circle is moved
map.on('pm:create', function(e) {
  var circle = e.layer;

  // this fires only for circles
  circle.on('pm:centerplaced', function(e) {
    console.log(e);
  });
});

and use regular mouse events to get the cursors position. It'll be added in the next release. Please let me know if this would work for you or not.

[ThomasG77]

From my understanding, your solution solves the issue for listening to center change, whereas what I want is listening when radius change (done in my branch although not the right way maybe). We would need to create another event with a signature like

circle.on('pm:radiuschanged', function(e) {
  console.log(e);
});

What you implemented is overall useful but do not solve the issue.

[codeofsumit]

@ThomasG77 if you want both changes, isn't pm:edit sufficient?

[ThomasG77]

You are right: I really missed the point here. Nothing is required on your side.

Thanks for your patience

[codeofsumit]

Awesome! Let me know if something else comes up 👍

[ThomasG77]

Sorry, I come back...

@ThomasG77 if you want both changes, isn't pm:edit sufficient?

Only if you edit the circle after creation. On first creation, I'm not able to listen to change. My branch was solving this behavior (see below GIF in action for demonstration, using my branch).

I want to confirm that I did not miss the point again before you may reopen.

[hamza-sabri5]

I am sorry but I read this page multiple times but it seems I am missing something but I don't know what!

I am creating a circle and I got its reference using the workingLayer from the event when start drawing, and I attached some event listeres with it like pm:snap, pm:unsnap, and pm:centerplaced and they worked as expected.

But I cannot attach pm:edit with it, to be more accurate I attached it but it isn't notified when I start drawing the circle could someone help, please!

or is there is a way to do it directly without the need to calculate the radius every time something like "pm:radiuschanged"???

[Falke-Design]

@hamza-sabri5 what exactly do you want to achive?

Do you search for something like this: https://github.com/geoman-io/leaflet-geoman/issues/660#issuecomment-688109856

[hamza-sabri5]

@Falke-Design thanks for your quick response. what I am trying to achieve is, I want to know the value of the radius while drawing the circle itself something like the first image on this page.

I want to be able to show the user the current radius while he is still drawing

[hamza-sabri5]

@Falke-Design @ThomasG77 @codeofsumit

I found that if I did the following circle.on("pm:centerplaced",()=>{ circle.on("pm:snapdrag",()=>{ console.log(circle._mRadius); }); });

I can then get notified every time the mouse moves after placing the center and then I can get the radius but is it the right way to do it? I mean it works but is it the best way?

[Falke-Design]

I recommand to use this:

const getCircleDrawRadius = ()=>{
  console.log(map.pm.Draw.Circle._layer.getRadius());
}

map.on('pm:drawstart',(e)=>{
  if(map.pm.Draw.Circle._hintMarker && e.shape === "Circle") {
    map.pm.Draw.Circle._hintMarker.on('move', getCircleDrawRadius);
  }
})
map.on('pm:drawend',(e)=>{
  if(map.pm.Draw.Circle._hintMarker) {
    map.pm.Draw.Circle._hintMarker.off('move', getCircleDrawRadius)
  }
})

[hamza-sabri5]

@Falke-Design Oh, didn't know that they have an event listener called "move". thanks

[hamza-sabri5]

@Falke-Design that's really good, but now I want to display that radius to the user while he is drawing. I know that the default tooltip is coming from "map.pm.Draw.Circle._hintMarker._tooltip._content" but how can I change it?

when making it equal a new value it just prints it but doesn't change it for the user.

in short, how can I change the default message "click to finish circle" into something else like "current radius is (x)"

[Falke-Design]

Set the tooltip content with: map.pm.Draw.Circle._hintMarker._tooltip.setContent("current radius is "+map.pm.Draw.Circle._layer.getRadius().toFixed(2));

[hamza-sabri5]

@Falke-Design thank you thank you thank you thank you..., thank you so much.

a great lib by the way thank you for your help and your contribution with the lib.