From b5bf1396f3f79f5dd22a0db7213533037f360687 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Fri, 13 Oct 2023 11:53:04 +0200 Subject: [PATCH 1/3] 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 From eda14bd742911797e7d5cc74f5002bba7145c2b3 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Fri, 13 Oct 2023 17:02:08 +0200 Subject: [PATCH 2/3] Add affordance to drag-n-drop file onto the map --- umap/static/umap/base.css | 19 +++++++++++++++++++ umap/static/umap/js/umap.controls.js | 22 ++++++++++++---------- 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index 12cd7d39..81e51c30 100644 --- a/umap/static/umap/base.css +++ b/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 */ /* *********** */ diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 87dbac6c..f24bdf69 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -317,26 +317,27 @@ L.U.DropControl = L.Class.extend({ initialize: function (map) { this.map = map - this.dropbox = map._container + this.dropzone = 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) + 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.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) + 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) { @@ -344,8 +345,8 @@ L.U.DropControl = L.Class.extend({ }, drop: function (e) { + this.dropzone.classList.remove('umap-dragover') L.DomEvent.stop(e) - this.map.scrollWheelZoom.enable() for (let i = 0, file; (file = e.dataTransfer.files[i]); i++) { this.map.processFileToImport(file) } @@ -354,6 +355,7 @@ L.U.DropControl = L.Class.extend({ dragleave: function () { this.map.scrollWheelZoom.enable() + this.dropzone.classList.remove('umap-dragover') } }) From c50e21e395a6f46fa4da31e82cbcecfb2d9f1365 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 17 Oct 2023 21:15:47 +0200 Subject: [PATCH 3/3] Release scroll wheel zoom on drop --- umap/static/umap/js/umap.controls.js | 1 + 1 file changed, 1 insertion(+) diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index f24bdf69..d1ab87db 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -345,6 +345,7 @@ L.U.DropControl = L.Class.extend({ }, 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++) {