Merge branch 'main' into 1174-v1

publiclab · Jan 28, 2023 · c95dc13 · c95dc13
2 parents a24699f + 9ec3d46
commit c95dc13
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 19 deletions.
diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js
diff --git a/examples/archive.html b/examples/archive.html
@@ -65,9 +65,11 @@ <h2 class="modal-title">Welcome to MapKnitter Lite</h2>
 
   <div class="offcanvas offcanvas-end" data-bs-backdrop="false" data-bs-keyboard="false" tabindex="1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
       <div class="offcanvas-header">
-        <h3 id="offcanvasRightLabel">Images</h3>
-        <button type="button" id="restoreWelcomeModalBtn" class="btn btn-primary btn-sm" data-bs-dismiss="offcanvas" aria-label="Close">Get Image</button>
-        <button type="button" class="btn btn-primary btn-sm" data-bs-dismiss="offcanvas" aria-label="Close">View Map</button>
+        <button type="button" id="restoreWelcomeModalBtn" class="btn btn-primary btn-md" data-bs-dismiss="offcanvas" aria-label="Close" title="Import images from collection URL">Import</button>
+        <button id="saveMap" type="button" class="btn btn-sm" aria-label="Save map" title="Save map in JSON format" >
+          <i class="fa fa-save fa-" style="font-size:24px" ></i>
+        </button>
+       <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" title="Close Sidebar" ></button>
       </div>
       <hr>
       <div class="offcanvas-body">
@@ -76,10 +78,11 @@ <h3 id="offcanvasRightLabel">Images</h3>
       </div>
         <hr>
       <div class="offcanvas-footer d-flex justify-content-evenly align-items-center">
+        <h3 id="offcanvasRightLabel">Images</h3>
        <button title="Previous" id="prevBtn" style="all: unset; cursor: pointer;">
         <i class=" fa fa-regular fa-chevron-left"></i>
        </button>
-        <p style="margin: 5px;" id="range">1-50 of 200</p>
+        <p style="margin: 5px;" id="range">0-0 of 0</p>
        <button title="Next" id="nextBtn" style="all: unset; cursor: pointer;">
         <i  class=" fa fa-regular fa-chevron-right"></i>
        </button>

diff --git a/examples/js/archive.js b/examples/js/archive.js
@@ -171,8 +171,8 @@ tileMap.addEventListener('click', (event) => {
 });
 
 function getImageName(imageURL) {
-  startIndex = imageURL.lastIndexOf('/') + 1;
-  endIndex = imageURL.lastIndexOf('.');
+  const startIndex = imageURL.lastIndexOf('/') + 1;
+  const endIndex = imageURL.lastIndexOf('.');
   const imageName = imageURL.substring(startIndex, endIndex);
 
   return imageName;
@@ -190,3 +190,17 @@ document.addEventListener('click', (event) => {
     map.imgGroup.addLayer(image);
   }
 });
+
+// download JSON
+saveMap.addEventListener('click', () => {
+  const jsonImages = map.imgGroup.generateExportJson(true).images;
+    // a check to prevent download of empty file
+    if (jsonImages.length) {
+      const encodedFile = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(jsonImages));
+      const a = document.createElement('a');
+      a.href = 'data:' + encodedFile;
+      const fileName = prompt('Use this file to recover your map’s saved state. Enter filename:');
+      a.download = fileName ? fileName + '.json' : 'MapknitterLite.json';
+      a.click();
+    }
+})
diff --git a/examples/js/index.js b/examples/js/index.js
@@ -1,10 +1,10 @@
 let map;
 
-(function() {
+(() => {
   map = L.map('map').setView([51.505, -0.09], 13);
   map.addGoogleMutant();
 
-  map.whenReady(function() {
+  map.whenReady(() => {
     img = L.distortableImageOverlay('example.jpg', {
       selected: true,
       fullResolutionSrc: 'large.jpg',

diff --git a/src/DistortableCollection.js b/src/DistortableCollection.js
@@ -212,12 +212,12 @@ L.DistortableCollection = L.FeatureGroup.extend({
     return false;
   },
 
-  generateExportJson() {
+  generateExportJson(allImages = false) {
     const json = {};
     json.images = [];
 
     this.eachLayer(function(layer) {
-      if (this.isCollected(layer)) {
+      if (allImages || this.isCollected(layer)) {
         const sections = layer._image.src.split('/');
         const filename = sections[sections.length-1];
         const zc = layer.getCorners();
@@ -241,7 +241,6 @@ L.DistortableCollection = L.FeatureGroup.extend({
 
     json.images = json.images.reverse();
     json.avg_cm_per_pixel = this._getAvgCmPerPixel(json.images);
-
     return json;
   },
 });

diff --git a/src/edit/DistortableCollection.Edit.js b/src/edit/DistortableCollection.Edit.js
@@ -207,7 +207,6 @@ L.DistortableCollection.Edit = L.Handler.extend({
     const map = group._map;
 
     if (group.options.suppressToolbar || this.toolbar) { return; }
-
     this.toolbar = L.distortableImage.controlBar({
       actions: this.editActions,
       position: 'topleft',

diff --git a/test/SpecHelper.js b/test/SpecHelper.js
@@ -17,7 +17,7 @@ chai.simulateEvent = function simulateEventFn(el, type, params) {
     bubbles: type != 'mouseleave' && type != 'mouseeenter',
     cancelable: type != 'mousemove' && type != 'mouseleave' && type != 'mouseeenter',
   };
-  var e = new MouseEvent(type, params);
+  let e = new MouseEvent(type, params);
   return el.dispatchEvent(e);
 };
 
@@ -30,17 +30,17 @@ chai.simulateEvent = function simulateEventFn(el, type, params) {
  *     > true
  */
 chai.use(function(chai, utils) {
-  var Assertion = chai.Assertion;
+  let Assertion = chai.Assertion;
   Assertion.addMethod('closeToLatLng', function(actual, delta, message) {
-    var obj = utils.flag(this, 'object');
+    let obj = utils.flag(this, 'object');
 
     delta = delta || 1e-4;
 
     expect(obj).to.have.property('lat');
     expect(obj).to.have.property('lng');
 
-    var lat = new Assertion(obj.lat);
-    var lng = new Assertion(obj.lng);
+    let lat = new Assertion(obj.lat);
+    let lng = new Assertion(obj.lng);
 
     utils.transferFlags(this, lat, false);
     utils.transferFlags(this, lng, false);