TypeError: this.rectDrawEnd is null

[GruianDavid]

Found the issue when i toggled the drawing button and sometimes on first click the marker didn't appear. On second try or third, one would eventually appear and work as expected. At first i thought it was something on my side but i managed to reproduce it on the demo site (https://bopen.github.io/leaflet-area-selection/).

How to reproduce: It does not happen every time so multiple tries are required. Step 1: Toggle draw button and click once on map. Step 2: Toggle draw button again to stop drawing. Step 3: Toggle draw button again and click once on map. Step 4: Repeat a few times and it will eventually throw the error. (3-5 times worked for me)

• could not reproduce it when i drew the polygon with drag option.

Error on demo site: TypeError: this.rectDrawEnd is null events.js:424:20 (function onDraggingRectEnd() ) C events.js:424 fire Events.js:190 f events.js:29 fire Events.js:190 m drawing-pane.js:29 m drawing-pane.js:31 onAdd control.js:76 addTo Control.js:70 addControl Control.js:137 index.js:75 u (index):1 main.a5a2d999.chunk.js:1 u (index):1 r (index):1 t (index):1 main.a5a2d999.chunk.js:1 events.js:424:20

Really appreciate the work put in on this repo. This has been my first issue opened on GitHub so if i need to provide more info on this issue, let me know :)

[keul]

@GruianDavid yep, reproduced too. Thanks for reporting this!

I'll take a look ASAP.

[GruianDavid]

After a few hours of digging i noticed that once in a while, the longer press of the button to create the first marker will trigger 2 types of events: one drag event (mousemove in this case) followed by a click event.

The drag event will access the function onMouseMove(event) which prepares the variables for an upcoming square but the drag event has only the starting position (latlong). To get the ending position there must be at least 2 sets of data(2 drag events).

Once the drag event actions finish, the click will trigger a new Point. On function onAddPoint(event) there is a validation to check if there was a square generation in progress (which was previously triggered). That validation passes and the generation of that square is taking place but since the coordinates are not yet set, an error will be thrown.

My Solution: Within function onAddPoint(event), the following code:

if (this.rectDrawing) {
  map.fire('as:dragging-rect-end');
  return;
 }

should be replaced with this

if (this.rectDrawing && this.rectDrawEnd !== null) {
    map.fire('as:dragging-rect-end');
    return;
}else{
    this.rectDrawing = false;
}
        

this.rectDrawEnd represents the end coords which always should have data this.rectDrawing = false; this.rectDrawing should be reset if the issue occurs as if not, the next time a new polygon is generated, a square will be created between the marker added in the first run and the marker added in the second run.

[GruianDavid]

I still seem to have issues with random squares generating when i click on a trackpad (easier to trigger drag event while clicking). I see that the else statement from my suggestion did not reach production (which was meant to fix this exact issue), any reason for that? Should i add a new issue or reopen this? If you need more details about this issue let me know.

[keul]

Let's reopen this. Your suggestion with the else clause gave me another issue (which I don't remember now 😢) so it has been closed with a different approach. See https://github.com/bopen/leaflet-area-selection/commit/2c4ccc94f31c7eabd4485c97b2548a973dcf1673