add support for multiple image deletion

publiclab · Apr 22, 2019 · 49a0d58 · 49a0d58
1 parent 889aace
commit 49a0d58
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 26 deletions.
diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js
@@ -923,8 +923,16 @@ L.DistortableCollection = L.FeatureGroup.extend({
     return L.DomUtil.hasClass(overlay.getElement(), "selected");
   },
 
+  confirmMultiDelete: function(count) {
+    var string = count === 1 ? " image" : " images";
+
+    return window.confirm("Are you sure you want to delete " + count + string + "?");
+  },
+
   _toggleMultiSelect: function(event, edit) {
-    if (edit._mode === "lock") { return; }
+    if (edit._mode === "lock") {
+      return;
+    }
 
     if (event.metaKey || event.ctrlKey) {
       L.DomUtil.toggleClass(event.target, "selected");
@@ -965,24 +973,19 @@ L.DistortableCollection = L.FeatureGroup.extend({
   _onKeyDown: function(e) {
     if (e.key === "Escape") {
       this._deselectAll(e);
-    } 
+    }
     if (e.key === "Backspace") {
-      this.eachLayer(function(layer) {
-        var edit = layer.editing;
-        if (edit._selected) {
-          var choice = edit.confirmDelete();
-          if (choice) { this.removeLayer(layer); }
-          return;
-        }
-      }, this);
+      this._removeMultiOverlays(e);
     }
   },
 
   _dragStartMultiple: function(event) {
     var overlay = event.target,
       i;
 
-    if (!this.isSelected(overlay)) { return; }
+    if (!this.isSelected(overlay)) {
+      return;
+    }
 
     this.eachLayer(function(layer) {
       var edit = layer.editing;
@@ -1001,7 +1004,9 @@ L.DistortableCollection = L.FeatureGroup.extend({
       map = this._map,
       i;
 
-    if (!this.isSelected(overlay)) { return; }
+    if (!this.isSelected(overlay)) {
+      return;
+    }
 
     overlay._dragPoints = {};
 
@@ -1024,6 +1029,32 @@ L.DistortableCollection = L.FeatureGroup.extend({
     L.DomEvent.stopPropagation(event);
   },
 
+  _removeMultiOverlays: function(event) {
+    var layersToRemove = [];
+
+    this.eachLayer(function(layer) {
+      if (this.isSelected(layer)) {
+        layersToRemove.push(layer);
+      }
+    }, this);
+
+    var count = layersToRemove.length;
+
+    if (count === 0) { return; }
+
+    var choice = this.confirmMultiDelete(count);
+
+    if (choice) {
+      layersToRemove.forEach(function(layer) {
+        L.DomUtil.removeClass(layer.getElement(), "selected");
+        this.removeLayer(layer);
+      }, this);
+    } else {
+      L.DomEvent.stopPropagation(event);
+      return;
+    }
+  },
+
   /**
    * images in 'lock' mode are included in this feature group collection for functionalities
    * such as export, but are filtered out for editing / dragging here
@@ -1577,7 +1608,7 @@ L.DistortableImage.Edit = L.Handler.extend({
     this._showToolbar();
     this._showMarkers();
 
-    L.DomEvent.stopPropagation(event);
+    if (event) { L.DomEvent.stopPropagation(event); }
   },
 
   _deselect: function() {

diff --git a/src/DistortableCollection.js b/src/DistortableCollection.js
@@ -41,8 +41,16 @@ L.DistortableCollection = L.FeatureGroup.extend({
     return L.DomUtil.hasClass(overlay.getElement(), "selected");
   },
 
+  confirmMultiDelete: function(count) {
+    var string = count === 1 ? " image" : " images";
+
+    return window.confirm("Are you sure you want to delete " + count + string + "?");
+  },
+
   _toggleMultiSelect: function(event, edit) {
-    if (edit._mode === "lock") { return; }
+    if (edit._mode === "lock") {
+      return;
+    }
 
     if (event.metaKey || event.ctrlKey) {
       L.DomUtil.toggleClass(event.target, "selected");
@@ -83,24 +91,19 @@ L.DistortableCollection = L.FeatureGroup.extend({
   _onKeyDown: function(e) {
     if (e.key === "Escape") {
       this._deselectAll(e);
-    } 
+    }
     if (e.key === "Backspace") {
-      this.eachLayer(function(layer) {
-        var edit = layer.editing;
-        if (edit._selected) {
-          var choice = edit.confirmDelete();
-          if (choice) { this.removeLayer(layer); }
-          return;
-        }
-      }, this);
+      this._removeMultiOverlays(e);
     }
   },
 
   _dragStartMultiple: function(event) {
     var overlay = event.target,
       i;
 
-    if (!this.isSelected(overlay)) { return; }
+    if (!this.isSelected(overlay)) {
+      return;
+    }
 
     this.eachLayer(function(layer) {
       var edit = layer.editing;
@@ -119,7 +122,9 @@ L.DistortableCollection = L.FeatureGroup.extend({
       map = this._map,
       i;
 
-    if (!this.isSelected(overlay)) { return; }
+    if (!this.isSelected(overlay)) {
+      return;
+    }
 
     overlay._dragPoints = {};
 
@@ -142,6 +147,32 @@ L.DistortableCollection = L.FeatureGroup.extend({
     L.DomEvent.stopPropagation(event);
   },
 
+  _removeMultiOverlays: function(event) {
+    var layersToRemove = [];
+
+    this.eachLayer(function(layer) {
+      if (this.isSelected(layer)) {
+        layersToRemove.push(layer);
+      }
+    }, this);
+
+    var count = layersToRemove.length;
+
+    if (count === 0) { return; }
+
+    var choice = this.confirmMultiDelete(count);
+
+    if (choice) {
+      layersToRemove.forEach(function(layer) {
+        L.DomUtil.removeClass(layer.getElement(), "selected");
+        this.removeLayer(layer);
+      }, this);
+    } else {
+      L.DomEvent.stopPropagation(event);
+      return;
+    }
+  },
+
   /**
    * images in 'lock' mode are included in this feature group collection for functionalities
    * such as export, but are filtered out for editing / dragging here

diff --git a/src/edit/DistortableImage.Edit.js b/src/edit/DistortableImage.Edit.js
@@ -323,7 +323,7 @@ L.DistortableImage.Edit = L.Handler.extend({
     this._showToolbar();
     this._showMarkers();
 
-    L.DomEvent.stopPropagation(event);
+    if (event) { L.DomEvent.stopPropagation(event); }
   },
 
   _deselect: function() {