[Question] How to trigger cancel automatically

[pichaya07]

Hi!

I would like to trigger a "cancel" event.
How can I trigger this event?

[Falke-Design]

with

map.pm.disableDraw('Line');

or

map.pm.Draw.disable();

you can force a cancel. The Event 'pm:drawend' is fired, but this only works with the drawing tools and not with the edit tools

To disable drawing if you don't know the active type or to disable drawing and edit tools, you can call

map.pm.enableDraw('Line');
map.pm.disableDraw('Line');

First you change the drawing type and then you disable now knowing the type.

[pate313373]

Very nice project! I really like it! :)

I have a HTML select element where the user should select the layerGroup he wants to draw in. If none is selected, I want the draw/edit operation to be cancled.

I tried as suggested:
mymap.on('pm:drawstart', ({ workingLayer }) => { if(typeof userLayers[$('#userLayers_sel').val()] === 'undefined'){ mymap.pm.enableDraw('Line'); mymap.pm.disableDraw('Line'); alert('No layer selected!'); } workingLayer.on('pm:vertexadded', e => { console.log(e); }); });

However, it seems the suggested code fails with "Uncaught RangeError: Maximum call stack size exceeded".

Is there any other way to fire a cancle directly? In my opinion it would be a way cleaner approach.

Thanks and best regards

[Falke-Design]

Hi @pate313373 you run into this error, because you create a loop. When you call map.pm.enableDraw('Line') the pm:drawstart event is called, and in the event listener you call again enableDraw.

The better version is:

map.on('pm:drawstart',(e)=>{
	const shape = map.pm.Draw.getActiveShape();
	if(shape){
		map.pm.disableDraw(shape)
	}
})

BUT we have a bug in the Library so I have to fix this first. The pm:drawstart is called to early.

Until them you have to use a workaround with setTimeout:

map.on('pm:drawstart',(e)=>{
	setTimeout(()=>{
		const shape = map.pm.Draw.getActiveShape();
		if(shape){
			map.pm.disableDraw(shape)
		}
	},1);
})

[pate313373]

Excellent, thx for the fast help! :)

[maximbroos]

How would i do the same for the Finish action?

[Falke-Design]

There is no public function to finish a shape. You can use the built in private functions, but they can change in the future.
You need to call map.pm.Draw.Line._finishShape()

leaflet-geoman/src/js/Draw/L.PM.Draw.Line.js

Lines 340 to 345 in 77b6545

	_finishShape() {
	// if self intersection is not allowed, do not finish the shape!
	if (!this.options.allowSelfIntersection) {
	this._handleSelfIntersection(false);
	if (this._doesSelfIntersect) {

[maximbroos]

Cool, that works for now! Thanks!

[LamprosPitsillos]

I am attempting something similar with no success.
I want when the selected shape is inserted the draw to stop.

            // LISTEN FOR EVENTS
            function _onCreate(e) {
             
                // map.pm.disableDraw();
                //
                // setTimeout(() => {
                //     map.pm.disableDraw();
                // }, 1000);
                //
                // map.pm.Draw.disable();
                //
                // map..pm.enableDraw('Line');
                // map.pm.disableDraw('Line');


            }
            map.value.on('pm:create', _onCreate)

None of the above work with the error :

 Uncaught TypeError: Cannot read properties of null (reading 'latLngToLayerPoint')
    at Proxy._updatePosition (leaflet.js?v=31cf3f06:6998:31)
    at NewClass.fire (leaflet.js?v=31cf3f06:387:20)
    at NewClass._move (leaflet.js?v=31cf3f06:2809:20)
    at NewClass._resetView (leaflet.js?v=31cf3f06:2784:53)
    at NewClass.setView (leaflet.js?v=31cf3f06:2072:16)
    at NewClass.setZoomAround (leaflet.js?v=31cf3f06:2104:23)
    at NewClass._performZoom (leaflet.js?v=31cf3f06:9295:17)