Merge pull request #1883 from umap-project/remove-u-keys

chore: remove U.Keys, and refactor global shorcuts

docs-users/fr/support/faq.md

@@ -10,3 +10,30 @@
 * `Lien simple : [[http://example.com]]` → Lien simple : [http://example.com](http://example.com)
 * `Lien avec texte : [[http://exemple.fr|texte du lien]]` → Lien avec texte : [texte du lien](http://example.com)
 * `--- pour un séparateur horizontal` ⤵ <hr>
+
+## Quels sont les raccourcis clavier? {: #keyboard-shortcuts}
+
+Sur MacOS, utliser `Cmd` à la place de `Ctrl`.
+
+### Génériques
+
+* `Ctrl+F` → ouvre le panneau de recherche
+* `Ctrl+E` → bascule en mode édition
+* `Escape` → ferme le panneau ou la fenêtre dialogue ouverte
+* `Shift+drag` sur la carte → zoom vers cette zone
+* `Shift+click` sur les boutons de zoom → zoom ou dézoom de trois niveaux
+
+### En mode édition
+
+* `Ctrl+E` → retour à l'aperçu
+* `Ctrl+S` → sauvegarde la carte
+* `Ctrl+Z` → annule tous les changements depuis la dernière sauvegarde
+* `Ctrl+M` → ajouter un nouveau marqueur
+* `Ctrl+P` → commence un nouveau polygone
+* `Ctrl+L` → commence une nouvelle ligne
+* `Ctrl+I` → ouvre le panneau d'import de données
+* `Ctrl+O` → ouvre le panneau d'import et le navigateur de fichiers
+* `Ctrl++` → zoom
+* `Ctrl+-` → dézoome
+* `Shift+click` sur un élément → ouvre le panneau d'édition de cet élément
+* `Ctrl+Shift+click` sur un élément → ouvre le panneau d'édition du calque de cet élément

docs-users/support/faq.md

@@ -10,3 +10,31 @@
 * `Simple link: [[http://example.com]]` → Simple link: [http://example.com](http://example.com)
 * `Link with text: [[http://example.com|text of the link]]` → Link with text: [text of the link](http://example.com)
 * `--- for a horizontal rule` ⤵ <hr>
+
+## What are the available keyboard shortcuts? {: #keyboard-shortcuts}
+
+In MacOS, `Ctrl` is replaced by `Cmd`.
+
+### Globals
+
+* `Ctrl+F` → open search panel
+* `Ctrl+E` → switch to edit mode
+* `Escape` → close open panel or dialog
+* `Shift+drag` on the map → zoom to this map extent
+* `Shift+click` on the zoom buttons → zoom in/out by 3 levels
+
+### In edit mode
+
+* `Ctrl+E` → back to preview mode
+* `Ctrl+S` → save map
+* `Ctrl+Z` → undo all changes until last save
+* `Ctrl+M` → add a new marker
+* `Ctrl+P` → start a new polygon
+* `Ctrl+L` → start a new line
+* `Ctrl+I` → open importer panel
+* `Ctrl+O` → open importer panel and file browser
+* `Ctrl++` → zoom in
+* `Ctrl+-` → zoom out
+* `Shift+click` on a feature → edit this feature
+* `Ctrl+Shift+click` on a feature → edit this feature layer
+

umap/static/umap/js/modules/ui/panel.js

@@ -20,6 +20,10 @@ export class Panel {
     if (!this.mode) this.mode = mode
   }
 
+  isOpen() {
+    return this.container.classList.contains("on")
+  }
+
   open({ content, className, actions = [] } = {}) {
     this.container.className = `with-transition panel ${this.classname} ${this.mode || ''}`
     this.container.innerHTML = ''

umap/static/umap/js/umap.core.js

@@ -245,33 +245,6 @@ L.DomEvent.once = (el, types, fn, context) => {
   return L.DomEvent.on(el, types, fn, context).on(el, types, handler, context)
 }
 
-/*
- * Global events
- */
-U.Keys = {
-  LEFT: 37,
-  UP: 38,
-  RIGHT: 39,
-  DOWN: 40,
-  TAB: 9,
-  ENTER: 13,
-  ESC: 27,
-  APPLE: 91,
-  SHIFT: 16,
-  ALT: 17,
-  CTRL: 18,
-  E: 69,
-  F: 70,
-  H: 72,
-  I: 73,
-  L: 76,
-  M: 77,
-  O: 79,
-  P: 80,
-  S: 83,
-  Z: 90,
-}
-
 L.LatLng.prototype.isValid = function () {
   return (
     isFinite(this.lat) &&

umap/static/umap/js/umap.js

@@ -548,73 +548,81 @@ U.Map = L.Map.extend({
 
   initShortcuts: function () {
     const globalShortcuts = function (e) {
-      const key = e.keyCode
-      const hasModifier = (e.ctrlKey || e.metaKey) && !e.shiftKey
 
-      /* Generic shortcuts */
-      if (key === U.Keys.F && hasModifier) {
-        L.DomEvent.stop(e)
-        this.search()
-      } else if (e.keyCode === U.Keys.ESC) {
+     if (e.key === 'Escape') {
         if (this.dialog.visible) {
           this.dialog.close()
-        } else {
-          this.panel.close()
+        } else if (this.editEnabled && this.editTools.drawing()) {
+          this.editTools.stopDrawing()
+        } else if (this.measureTools.enabled()) {
+          this.measureTools.stopDrawing()
+        } else if (this.editPanel?.isOpen()) {
           this.editPanel?.close()
+        } else if (this.fullPanel?.isOpen()) {
           this.fullPanel?.close()
+        } else if (this.panel.isOpen()) {
+          this.panel.close()
         }
       }
 
-      if (!this.hasEditMode()) return
+      // From now on, only ctrl/meta shortcut
+      if (!(e.ctrlKey || e.metaKey) || e.shiftKey) return
 
-      /* Edit mode only shortcuts */
-      if (key === U.Keys.E && hasModifier && !this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.enableEdit()
-      } else if (key === U.Keys.E && hasModifier && this.editEnabled && !this.isDirty) {
+     if (e.key === 'f') {
         L.DomEvent.stop(e)
-        this.disableEdit()
+        this.search()
       }
-      if (key === U.Keys.S && hasModifier) {
-        L.DomEvent.stop(e)
-        if (this.isDirty) {
-          this.save()
+
+      /* Edit mode only shortcuts */
+      if (!this.hasEditMode()) return
+
+
+
+      // Edit mode Off
+      if (!this.editEnabled) {
+        switch (e.key) {
+          case 'e':
+            L.DomEvent.stop(e)
+            this.enableEdit()
+            break
         }
+        return
       }
-      if (key === U.Keys.Z && hasModifier && this.isDirty) {
-        L.DomEvent.stop(e)
-        this.askForReset()
-      }
-      if (key === U.Keys.M && hasModifier && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.editTools.startMarker()
-      }
-      if (key === U.Keys.P && hasModifier && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.editTools.startPolygon()
-      }
-      if (key === U.Keys.L && hasModifier && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.editTools.startPolyline()
-      }
-      if (key === U.Keys.I && hasModifier && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.importer.open()
-      }
-      if (key === U.Keys.O && hasModifier && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.importer.openFiles()
-      }
-      if (key === U.Keys.H && hasModifier && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.help.show('edit')
-      }
-      if (e.keyCode === U.Keys.ESC) {
-        if (this.editEnabled && this.editTools.drawing()) {
-          this.editTools.stopDrawing()
-        }
-        if (this.measureTools.enabled()) this.measureTools.stopDrawing()
+
+      // Edit mode on
+      let used = true
+      switch (e.key) {
+        case 'e':
+          if (!this.isDirty) this.disableEdit()
+          break
+        case 's':
+          if (this.isDirty) this.save()
+          break
+        case 'z':
+          if (this.isDirty) this.askForReset()
+          break
+        case 'm':
+          this.editTools.startMarker()
+          break
+        case 'p':
+          this.editTools.startPolygon()
+          break
+        case 'l':
+          this.editTools.startPolyline()
+          break
+        case 'i':
+          this.importer.open()
+          break
+        case 'o':
+          this.importer.openFiles()
+          break
+        case 'h':
+          this.help.show('edit')
+          break
+        default:
+          used = false
       }
+      if (used) L.DomEvent.stop(e)
     }
     L.DomEvent.addListener(document, 'keydown', globalShortcuts, this)
   },