Merge pull request #1370 from umap-project/drag-n-drop

Add experimental drag and drop of file on the map container

umap/static/umap/base.css

@@ -813,6 +813,25 @@ input:invalid {
 }
 
 
+/* *********** */
+/*   Various   */
+/* *********** */
+
+.umap-dragover:before {
+    content:  ' ';
+    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="arcs">%3Cpath d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/>%3C/svg>');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: #323e56;
+    z-index: 401;
+    display: block;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    opacity: 0.5;
+}
+
+
 /* *********** */
 /*    Mobile   */
 /* *********** */

umap/static/umap/js/umap.controls.js

@@ -313,6 +313,54 @@ L.U.DrawToolbar = L.Toolbar.Control.extend({
   },
 })
 
+L.U.DropControl = L.Class.extend({
+
+  initialize: function (map) {
+    this.map = map
+    this.dropzone = map._container
+  },
+
+  enable: function () {
+    L.DomEvent.on(this.dropzone, "dragenter", this.dragenter, this)
+    L.DomEvent.on(this.dropzone, "dragover", this.dragover, this)
+    L.DomEvent.on(this.dropzone, "drop", this.drop, this)
+    L.DomEvent.on(this.dropzone, "dragleave", this.dragleave, this)
+  },
+
+  disable: function () {
+    L.DomEvent.off(this.dropzone, "dragenter", this.dragenter, this)
+    L.DomEvent.off(this.dropzone, "dragover", this.dragover, this)
+    L.DomEvent.off(this.dropzone, "drop", this.drop, this)
+    L.DomEvent.off(this.dropzone, "dragleave", this.dragleave, this)
+  },
+
+  dragenter: function (e) {
+    L.DomEvent.stop(e)
+    this.map.scrollWheelZoom.disable()
+    this.dropzone.classList.add('umap-dragover')
+  },
+
+  dragover: function (e) {
+    L.DomEvent.stop(e)
+  },
+
+  drop: function (e) {
+    this.map.scrollWheelZoom.enable()
+    this.dropzone.classList.remove('umap-dragover')
+    L.DomEvent.stop(e)
+    for (let i = 0, file; (file = e.dataTransfer.files[i]); i++) {
+      this.map.processFileToImport(file)
+    }
+    this.map.onceDataLoaded(this.map.fitDataBounds)
+  },
+
+  dragleave: function () {
+    this.map.scrollWheelZoom.enable()
+    this.dropzone.classList.remove('umap-dragover')
+  }
+
+})
+
 L.U.EditControl = L.Control.extend({
   options: {
     position: 'topright',

umap/static/umap/js/umap.js

@@ -340,6 +340,7 @@ L.U.Map.include({
     if (this.options.scrollWheelZoom) this.scrollWheelZoom.enable()
     else this.scrollWheelZoom.disable()
     this.browser = new L.U.Browser(this)
+    this.drop = new L.U.DropControl(this)
     this.renderControls()
   },
 
@@ -670,6 +671,12 @@ L.U.Map.include({
     }
   },
 
+  fitDataBounds: function () {
+    const bounds = this.getLayersBounds()
+    if (!this.hasData() || !bounds.isValid()) return false
+    this.fitBounds(bounds)
+  },
+
   initCenter: function () {
     if (this.options.hash && this._hash.parseHash(location.hash)) {
       // FIXME An invalid hash will cause the load to fail
@@ -679,12 +686,7 @@ L.U.Map.include({
       this._controls.locate.start()
     } else if (this.options.defaultView === 'data') {
       this.onceDataLoaded(() => {
-        const bounds = this.getLayersBounds()
-        if (!this.hasData() || !bounds.isValid()) {
-          this._setDefaultCenter()
-          return
-        }
-        this.fitBounds(bounds)
+        if (!this.fitDataBounds()) return this._setDefaultCenter()
       })
     } else if (this.options.defaultView === 'latest') {
       this.onceDataLoaded(() => {
@@ -1710,11 +1712,13 @@ L.U.Map.include({
   enableEdit: function () {
     L.DomUtil.addClass(document.body, 'umap-edit-enabled')
     this.editEnabled = true
+    this.drop.enable()
     this.fire('edit:enabled')
   },
 
   disableEdit: function () {
     if (this.isDirty) return
+    this.drop.disable()
     L.DomUtil.removeClass(document.body, 'umap-edit-enabled')
     this.editedFeature = null
     this.editEnabled = false