How to programatically chain drawing points in mapbox-gl-draw

Question

I am using a pretty basic implementation of the mapbox-gl-draw library, and I can successfully draw a point with the example below.

mapObject.drawing = new MapboxDraw({
  styles: MAPBOX_DRAW_STYLES,
  displayControlsDefault: false,
  controls: {
    trash: true
  }
});
mapObject.map.addControl(mapObject.drawing);
mapObject.drawing.changeMode('draw_point');

I am then able to capture the feature in the on 'draw.create' event

this.mapObject.map.on('draw.create', e => {
  console.log(e.features[0]);
});

It is in this event, that I want to be able to set the mode back to draw point so that the user can draw multiple points. I have tried many iterations of the below;

this.mapObject.map.on('draw.create', e => {
  console.log(e.features[0]);
  mapObject.drawing.getMode(); // draw_point
  mapObject.drawing.changeMode('simple_select');
  mapObject.drawing.getMode(); // simple_select
  mapObject.drawing.changeMode('draw_point');
  mapObject.drawing.getMode(); // draw_point
});

It seems like the drawing of the point has not finished. The documentation leads me to believe that it should default back to simple_select - Draw is in simple_select mode by default, and will automatically transition into simple_select mode again every time the user finishes drawing a feature or exits direct_select mode.

How do I enable the drawing of additional points immediately after each other?

https://plnkr.co/x3R0TtHsNGzxPxAOL7HH

Answer 1

I posted this to the Github repo and it was confirmed as a bug - https://github.com/mapbox/mapbox-gl-draw/issues/793#issuecomment-394568205

The suggested workaround is to use the draw.modechange event.

map.on('draw.modechange', e => {
    drawing.changeMode('draw_point');
});