Firing an action if user clicks the trash control regardless of selection

[KayBeSee]

Mapbox GL Version: 0.45.0 Mapbox GL Draw Version: 1.0.9

Steps to Trigger Behavior

1. Click trash icon

Expected Behavior

Event to fire

Actual Behavior

No change or action fired

--

Hello --

I was wondering if an action fires when a user clicks the trash can icon when there is nothing selected.

I have a very simple mapbox draw component that users can draw a single polygon on. I am noticing that they are clicking the trash icon without selecting their polygon. I am wondering if an action fires when they click the trash (or how I can set one up) so that it will call deleteAll().

Either that or is there a way to modify the css of the trash icon when nothing is selected so I can make it look disabled?

Thanks!

[benderlidze]

Hi, did you find out how to do this?

[KayBeSee]

I ended up using React state and an updateMap function to keep track of if a polygon existed and if I had coordinates drawn on the map. If that was the case, I was able to use Draw.getAll() and then run delete.

 if (this._Draw && this._Draw.getAll().features.length > 0) {
        this._Draw.deleteAll();
        this.setState({ polygonSelected: false, currentPolygon: null });
      }

[dcdenu4]

@KayBeSee , did you end up bailing on using the Trash icon and draw.delete handler then? Did you roll your own trash button? I'm having the same issue of users wanting to "delete all" when nothing is selected and the Trash icon button not triggering any action.

[nc0325]

You can add custom trash button that looks same as mapboxdraw trash button by using same class name. Then, mapbox draw CSS will generate the same trash button with custom action.

  const polygonButton:any = document.querySelector('.mapbox-gl-draw_polygon');
  const trashButton = document.createElement('button');
  trashButton.className = 'mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_trash';
  trashButton.title = 'Delete All Features';

  // Add event listener to the trash button
  trashButton.addEventListener('click', function() {
    const ids:any = mapboxDraw.getAll().features.map(feature => feature.id);
    console.log("trash button clicked");

    mapboxDraw.delete(ids);
  });

  // Insert the trash button next to the polygon button
  polygonButton.parentNode.insertBefore(trashButton, polygonButton.nextSibling);