Custom functions for SAVE and CANCEL on Leaflet.draw edit control

Question

I have added an edit control on my map which is working fine (On the Frontend);

var editControls = new L.Control.Draw({
      draw: false,
      edit: {
        featureGroup: this.updateGeomLyr
      }
    }).addTo(this.map);

Now, when I save or cancel my changes, the event "draw:editstop" is called

this.map.on("draw:editstop", e => {
      this.updateGeomLyr.clearLayers();
      this.overlapLyr.clearLayers();

      //if saved;

      //if cancelled,
    });

But I want separate backend functions to be called on SAVE ad CANCEL. I couldn't find any attribute in the event "e" which shows if save is called or cancel.

Answer 1

Leaflet.draw plugin doesn't fire any event when editing is canceled. The only way to achieve this is to hack plugin by extending it. Since this requires taking part of the original code of plugin, tha downside of this is that it might now work with future versions of plugin.

getActions method of L.EditToolbar among other things sets callbacks for click events on edit toolbar buttons Save and Cancel. Callback for cancel (the second action) is now this.disable. This is replaced with new method _cancel, where first original action is called and then new draw:editcancel event fired.

L.EditToolbar.include({
  getActions: function (handler) {
    var actions = [
      {
        title: L.drawLocal.edit.toolbar.actions.save.title,
        text: L.drawLocal.edit.toolbar.actions.save.text,
        callback: this._save,
        context: this
      },
      {
        title: L.drawLocal.edit.toolbar.actions.cancel.title,
        text: L.drawLocal.edit.toolbar.actions.cancel.text,
//        callback: this.disable,  // --- original
        callback: this._cancel,    // --- changed
        context: this
      }
    ];

    if (handler.removeAllLayers) {
      actions.push({
        title: L.drawLocal.edit.toolbar.actions.clearAll.title,
        text: L.drawLocal.edit.toolbar.actions.clearAll.text,
        callback: this._clearAllLayers,
        context: this
      });
    }

    return actions;
  },

// --- new -----------------
  _cancel: function() {
    this.disable();
    this._map.fire('draw:editcancel');
  }  
});

function processCancel(e) {
  console.log('draw canceled');
}

map.on('draw:editcancel', processCancel);

Plugin extension has to be put at the very beginning of code.