Google Code-in

Problem

LDI provides the ability to export multiple images.

Demo it here: https://publiclab.github.io/Leaflet.DistortableImage/examples/select.html by

• ctrl + clicking on one or more images.
• A single toolbar for all of them will appear in the topleft corner.
• Click the top icon to begin export
• Open your developer console to see updates on the status
• While the export is in progress a spinner icon appears.

The problem now is that once the export starts - there is no way to cancel it (make it stop) besides reloading the page.

We would like to add this capability.

Solution

1) Add a #cancelExport method to the following file, (where you can also find #startExport): https://github.com/publiclab/Leaflet.DistortableImage/blob/978c33915620d241eaee70c224966e7d52205d50/src/edit/DistortableCollection.Edit.js#L194-L257

• Note you may need to refactor #startExport to be able to access and clear the interval early

2) Add a red X icon that will appear when you hover over the spinner icon during export. On clicking this icon, you will trigger #cancelExport.

Additional Information

Relevant code links paired with line-by-line explanations of exiting code can be found on the linked issue, as well as the SVG asset you will need for the task.

Thank you 😊