From b5bf1396f3f79f5dd22a0db7213533037f360687 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Fri, 13 Oct 2023 11:53:04 +0200 Subject: [PATCH] Experimental drag and drop of file on the map container --- umap/static/umap/js/umap.controls.js | 45 ++++++++++++++++++++++++++++ umap/static/umap/js/umap.js | 16 ++++++---- 2 files changed, 55 insertions(+), 6 deletions(-) diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 75a8371c..87dbac6c 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -313,6 +313,51 @@ L.U.DrawToolbar = L.Toolbar.Control.extend({ }, }) +L.U.DropControl = L.Class.extend({ + + initialize: function (map) { + this.map = map + this.dropbox = map._container + }, + + enable: function () { + L.DomEvent.on(this.dropbox, "dragenter", this.dragenter, this) + L.DomEvent.on(this.dropbox, "dragover", this.dragover, this) + L.DomEvent.on(this.dropbox, "drop", this.drop, this) + L.DomEvent.on(this.dropbox, "dragleave", this.dragleave, this) + }, + + disable: function () { + L.DomEvent.off(this.dropbox, "dragenter", this.dragenter, this) + L.DomEvent.off(this.dropbox, "dragover", this.dragover, this) + L.DomEvent.off(this.dropbox, "drop", this.drop, this) + L.DomEvent.off(this.dropbox, "dragleave", this.dragleave, this) + }, + + dragenter: function (e) { + L.DomEvent.stop(e) + this.map.scrollWheelZoom.disable() + }, + + dragover: function (e) { + L.DomEvent.stop(e) + }, + + drop: function (e) { + L.DomEvent.stop(e) + this.map.scrollWheelZoom.enable() + 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() + } + +}) + L.U.EditControl = L.Control.extend({ options: { position: 'topright', diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index e762db14..6cdabc40 100644 --- a/umap/static/umap/js/umap.js +++ b/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