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
Add an hook for circle draw event for mousemove after setting center #251
Comments
hey @ThomasG77, I have to check this out in detail. I hope I can get back to you on this during the weekend! 👍 |
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. |
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
What you implemented is overall useful but do not solve the issue. |
@ThomasG77 if you want both changes, isn't |
You are right: I really missed the point here. Thanks for your patience |
Awesome! Let me know if something else comes up 👍 |
Sorry, I come back...
Only if you edit the circle after creation. On first creation, I'm not able to listen to change. I want to confirm that I did not miss the point again before you may reopen. |
* Fire Circle Edit Event * added start script * removal button now respects pmIgnore, fixes #172 * add babel polyfill * added polyfill to build config as well * wops, forgot it here 🤔 * added polyfill to fix #173 * removed babel-polyfill * * More polyfills for IE: - Object.assign() is needed for snapping - Element.remove() is needed when removing control buttons * demo.js dumbed down for IE11: - IE doesn't understand thoose fancy lambdy style expressions - object literals always need a key * increased version * 0.17.1 * link to new demo page * fix #179 * fix #180 * version bump * 0.17.2 * fixed manual install desc * fix #182 * removed uncessary if statement * used setLatlngs to update LInes and Polygons. Hopefully fixes #181 * fixed coord diff from line and poly * clarified function name * removed console.log * added circle toolbar option * check map drag state before changing it - fix #189 * fix #185 * another demo test * thing * updated version * 0.17.3 * markers are correctly created * updated gif * continued * cursorMarker: true is now default * Change the source map and minimise the source * Should be const not var * fixed the middlemarker position problem * you can now add markers * markers can now be removed * cleanup * snapping works again 🎉 * Dragging now supports holes * cleanup * minor cleanup * basic drawing works 🎉💪 * map drag fix * removed test console log * better comments * removed console logs * properly removing cutting events * prevent pm:remove event from being fired * splitting polygons works now * updated demo tiles * made first map more demo friendly * handle toolbar button correctly * fixed typos * updated leaflet * updated readme * 0.18.0 * removed console.log * FIXED: Vertex Removal removes layer or hole (patch) (#209) * ADDED: `pm:cut` event (minor) (#211) * added cut to layerGroup * fire cut event on map and layer * updated with cut event info * added some code comments * added cutPolygon button to toolbar options * minor things * ADDED: Rectangle Support for Drawing and Editing (#196) * IMPROVED: Rearranged Toolbar and renamed some buttons (patch) (#212) * rename toolbar buttons, rearrange them, add backwards compatibility * updated options * added backwards compatibility with toggleButton * FIXED: marker edit respects draggable option now (patch) (Fixes #213) * updated version and added rect desc * 0.19.0 * updated URL to new demo page * Make HintMarker more visible (#220) (PATCH) * hopefully fix #226 * added marker index information to markerdrag events. Fixes #225 (PATCH) * Removed sourcemaps from prod build. Fixes #222 (PATCH) * add workingLayer to pm:drawstart (#221) (PATCH) * add workingLayer to pm:drawstart * update documentation and demo according to feedback on PR * minor wording fix * nothing * minor webpack optimization * Added Vertex Events (#227) (MINOR) * added first demo case * added pm:vertexadded event to drawing lines and polygons * added vertexadded and vertexremoved events to Edit class of Line and Polygon * added documentation * added syntax highlighting to markdown js 🙄 * Fix error when removing a layer during snappable drawing; fixes #208 (MINOR) * version bump to 0.20.0 * 0.20.0 * centerMarker is not draggable anymore during Circle Draw. Fixes #230 (patch) * removed console.log * removed cdnjs button * - remove extra script tag from demo (#232) * Added `finishOn` option to pass events on which to finish drawing (#233) (minor) * add option to pass event name to perform finish of polygon * update docs * fix demo example, no event for finishOn * test * properly unbind optional listener * added fallback for finishOnDoubleClick * added finishOn example * removed test * fixed bug in fallback * prevent zoom when dblclick finishes shape * added example how options can be passed to toolbar buttons * fixed encoding error * stopped the stupid thing of manually entering the versions into the CDN links 🤦♂️ * 0.21.0 * Create CODE_OF_CONDUCT.md * Create CONTRIBUTING.md * Create LICENSE * remove license in favor of LICENCE.MD * Create ISSUE_TEMPLATE.md * Update ISSUE_TEMPLATE.md * Update README.md * better code syntax highlighting * updated turf and webpack * Fix 🐛 for switching drawing modes, fixes #242 and other problems (patch) (#240) * ADDED: `allowSelfIntersection` option (minor) (#241) * started on it * kinda works * nothing * ok works for drawing * lots of stuff is working now * invalid style is resetted on disable * hasSelfIntersection now works without edit mode * added code comments * added README docs * style is now handled by css class * fix when vertex removal causes valid poly * changed invalid style to just stroke * fixed toolbar bug * vertexremoved event is now only listened to when allowSelfIntersection is true * intersection for the cutting polygon is now forbidden * invalid class is now correctly removed on disable * handle error when cutting self-intersecting polygons * resulting layer of cutting now properly inherits options * just more comments * added pm:intersect event * removed console.log * made cut button snappable by default * 0.22.0 * added jsfiddle starting point * fixed some example errors * added fire, markerdragend and markerdragstart pm events to rectangle. Fixes #245 * removed a console.log * Added global edit mode toggled event. Fixes #246 (MINOR) * Added pm:update event. Fixes #229. (MINOR) * set default _globalRemovalMode to false as promised in #247 * rectangle helpers are hidden when not needed. Fixes #252 (PATCH) * fix rectangle drawing color bug (#253) (patch) * Feature/bump deps (#255) (PATCH) * bump dependencies * bump dependencies, fix webpack build * added pm:centerplaced event, fired when the center of a Circle is placed or moved. Fixes #251. (MINOR) * 0.23.0 * enable babel predets, fix #261 🤞 * minor stuff * 0.23.1 * added missing step, closes #283 * pm:edit on circles fires after edit, not during. Fixes #285 * hintline style is properly reset after showing error style, fixes #275 * dont start drag on right click, fixes #260 * Redundant coordinate when finish polygon with double click (#281) * Fixes #147: Redundant coordinate when finish polygon with double click * Do not remove last vertex on touch interactions since double tap doesn't create an extra vertex. * demo looks better on mobile now * minor changes to last PR merge * add option to disable marker removal during edit. Fixes #258 * eslint fix * added option to prevent vertex editing in edit mode. Fixes #274 * updated some deps * Support preferCanvas (#286) * Added fixes to various modules to account for preferCanvas being set to true on a Leaflet map. * minor adjustments * removed comment * 0.24.0
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 or is there is a way to do it directly without the need to calculate the radius every time something like "pm:radiuschanged"??? |
@hamza-sabri5 what exactly do you want to achive? Do you search for something like this: #660 (comment) |
@Falke-Design thanks for your quick response. I want to be able to show the user the current radius while he is still drawing |
@Falke-Design I found that if I did the following 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? |
I recommand to use this:
|
@Falke-Design |
@Falke-Design 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)" |
Set the tooltip content with: |
@Falke-Design a great lib by the way thank you for your help and your contribution with the lib. |
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,
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?
The text was updated successfully, but these errors were encountered: