Separate each tool into its own file, starting with "toggleExport"

Currently all the different tools live in this file:

https://github.com/publiclab/Leaflet.DistortableImage/blob/main/src/edit/DistortableImage.Edit.js

I think it makes sense to create a new folder such as:

/src/edit/tools/

and have each tool be a separate file like:

/src/edit/tools/export.js /src/edit/tools/showToolbar.js

etc. However, this library is not compiled using browserify or webpack and so we can’t use require() to do this.

Is it:

1. to add the tool methods to a subobject of Leaflet, like L.DistortableImage.EditTools?
2. to refactor this library to start using require (a lot of work… maybe not worth it)

In either case, we’ll have to pass in some context to the tools; most ask for access to this, which in this case is the L.DistortableImage.Edit context. We could pass this in like so:

L.DistortableImage.EditTools = L.DistortableImage.EditTools || {};

L.DistortableImage.EditTools.Export = function(edit) {
  function tool() {
    // then we can call it as we had been using `this`:
    // so this: this._lockHandles = new L.LayerGroup();
    // becomes:
    edit._lockHandles = new L.LayerGroup();
  }
  return tool; 
}

Then back in the original DistortableImage.Edit.js file, we’d bind it back in like this:

_toggleExport: L.DistortableImage.EditTools.Export(this);

The only thing left is that we’d need to add each tool to the concatenation script here:

https://github.com/publiclab/Leaflet.DistortableImage/blob/a3dc6d10cc98716c6106261f47a8b9cee5be3c49/Gruntfile.js#L78-L81

This is a bit convoluted but should result in a simpler set of source files for the tools, where each file represents only a single function.

@rexagod @sashadev-sky what do you think of this?

[sashadev-sky]

@rexagod pinned!

[sashadev-sky]

This one is good to close now!