fix drawing on mobile

src/assets/styles/base.css

@@ -36,6 +36,7 @@ body {
   width: 100%;
   height: 100%;
   min-height: 250px;
+  touch-action: none; /* workaround for modifying feature on mobile */
 }
 
 #app-footer {

src/assets/styles/openlayers-custom.css

@@ -34,13 +34,6 @@
   background-color: #ebebeb;
 }
 
-.editionToolbar {
-  border: 2px solid rgba(0,0,0,.2);
-  background-clip: padding-box;
-  padding: 0;
-  right: 5px;
-}
-
 /* .leaflet-bar {
   box-shadow: none !important;
 }

src/components/Map/EditingToolbar.vue

@@ -3,7 +3,7 @@
     <div v-if="showDrawTool">
       <div class="leaflet-bar">
         <a
-          class="leaflet-draw-draw-polygon"
+          class="leaflet-draw-draw-polygon active"
           title="Dessiner un polygone"
         >
           <img
@@ -26,12 +26,20 @@
     </div>
     <div v-if="!showDrawTool">
       <div class="leaflet-bar">
-        <a @click="update">
+        <a
+          :class="{ active: isEditing }"
+          @click="update"
+        >
           <i class="edit outline icon" />
-          <span class="sr-only">Modifier l'objet</span></a>
-        <a @click="deleteObj">
+          <span class="sr-only">Modifier l'objet</span>
+        </a>
+        <a
+          :class="{ active: isDeleting }"
+          @click="deleteObj"
+        >
           <i class="trash alternate outline icon" />
-          <span class="sr-only">Supprimer l'objet</span></a>
+          <span class="sr-only">Supprimer l'objet</span>
+        </a>
       </div>
     </div>
   </div>
@@ -47,21 +55,35 @@ export default {
   data() {
     return {
       editionService: editionService,
+      isEditing: false,
+      isDeleting: false
     };
   },
 
   computed: {
     showDrawTool() {
       return this.editionService && this.editionService.editing_feature === undefined;
+    },
+  },
+
+  watch: {
+    showDrawTool(newValue) {
+      if (!newValue && !this.isEditing && !this.isDeleting) {
+        this.isEditing = true;
+      }
     }
   },
 
   methods: {
-    update(){
+    update() {
       editionService.activeUpdateFeature();
+      this.isDeleting = false;
+      this.isEditing = true;
     },
-    deleteObj(){
+    deleteObj() {
       editionService.activeDeleteFeature();
+      this.isEditing = false;
+      this.isDeleting = true;
     },
 
   }
@@ -73,13 +95,13 @@ export default {
 .editionToolbar{
   position: absolute;
   top: 80px;
-  right: 5px;
-}
-.leaflet-bar {
+  right: 6px;
   border: 2px solid rgba(0,0,0,.2);
+  border-radius: 4px;
   background-clip: padding-box;
   padding: 0;
-  border-radius: 2px;
+}
+.leaflet-bar {
 
   a:first-child {
     border-top-left-radius: 2px;
@@ -112,6 +134,19 @@ export default {
     }
   }
 
+  .active {
+    background-color: rgba(255, 145, 0, 0.904);
+    color: #fff;
+
+    i {
+      font-weight: bold;
+    }
+
+    img {
+      filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(282deg) brightness(105%) contrast(100%);
+    }
+  }
+
   .list-image-type {
     height: 20px;
     vertical-align: middle;

src/services/edition-service.js

@@ -124,7 +124,7 @@ const editionService = {
 
     // On mobile stop drawing when selecting a drawn point
     if (isMobile) {
-      this.selectForUpdate.once('select', () => {
+      this.selectForUpdate.on('select', () => {
         if (this.draw.getActive() && this.draw.sketchCoords_.length > 2) {
           this.draw.finishDrawing();
         }