Allow backspace key to remove last point while editing

c2corg · Mar 16, 2021 · d3274a6 · d3274a6
1 parent 1ccabc3
commit d3274a6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/src/components/yeti/SubPanelCourse.vue b/src/components/yeti/SubPanelCourse.vue
@@ -63,12 +63,19 @@
         </div>
       </div>
       <div class="yetiform-note mt-5">
-        <p>Astuces</p>
+        <p>Astuces de dessin</p>
         <ul class="content-ul">
           <li><strong>Dessinez</strong> de nouvelles portions de lignes</li>
+          <li><strong>Supprimez</strong> le dernier point avec la touche <kbd>Backspace</kbd></li>
+        </ul>
+        <p>Sur une ligne dessinée</p>
+        <ul class="content-ul">
           <li><strong>Éditez</strong> les points en les déplaçant</li>
           <li><strong>Créez</strong> un nouveau point sur une ligne existante</li>
-          <li><strong>Supprimez un point</strong> avec Alt + clic</li>
+          <li><strong>Supprimez un point</strong> avec <kbd>Alt + clic</kbd></li>
+        </ul>
+        <p>Depuis l’interface</p>
+        <ul class="content-ul">
           <li><strong>Supprimez une portion de ligne</strong></li>
           <li><strong>Supprimez la trace</strong> pour en charger une nouvelle</li>
         </ul>

diff --git a/src/components/yeti/YetiMap.vue b/src/components/yeti/YetiMap.vue
@@ -295,6 +295,7 @@ export default {
       this.snapInteraction = new ol.interaction.Snap({ source });
       this.map.addInteraction(this.snapInteraction);
 
+      this.drawInteraction.on('drawstart', this.onDrawStart);
       this.drawInteraction.on('drawend', this.onDrawEnd);
       this.modifyInteraction.on('modifyend', this.onModifyEnd);
 
@@ -442,10 +443,28 @@ export default {
       }
     },
 
+    onDrawStart() {
+      document.addEventListener('keydown', this.onKeyWhileDrawing);
+      document.addEventListener('keypress', this.onKeyWhileDrawing);
+    },
+
+    onDrawEnd() {
+      document.removeEventListener('keydown', this.onKeyWhileDrawing);
+      document.removeEventListener('keypress', this.onKeyWhileDrawing);
+    },
+
     onModifyEnd() {
       this.emitFeaturesEvent();
     },
 
+    onKeyWhileDrawing(event) {
+      event.preventDefault();
+      // backspace key
+      if (event.key === 'Backspace') {
+        this.drawInteraction.removeLastPoint();
+      }
+    },
+
     drawYetiImage() {
       const xml = new DOMParser().parseFromString(this.computedData, 'application/xml');
       const imageBase64 = xml.getElementsByTagName('wps:ComplexData')[0].textContent;