From f989e82940b761a6d026221abbc52bac7cc08a2f Mon Sep 17 00:00:00 2001
From: florent <flavelle@neogeo.fr>
Date: Thu, 28 Apr 2022 11:44:48 +0200
Subject: [PATCH] fix drawing on mobile
---
src/assets/styles/base.css | 1 +
src/assets/styles/openlayers-custom.css | 7 ---
src/components/Map/EditingToolbar.vue | 57 ++++++++++++++++++++-----
src/services/edition-service.js | 2 +-
4 files changed, 48 insertions(+), 19 deletions(-)
diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css
index df8db274..5383b368 100644
--- a/src/assets/styles/base.css
+++ b/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 {
diff --git a/src/assets/styles/openlayers-custom.css b/src/assets/styles/openlayers-custom.css
index 34f063f7..13cc3441 100644
--- a/src/assets/styles/openlayers-custom.css
+++ b/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;
}
diff --git a/src/components/Map/EditingToolbar.vue b/src/components/Map/EditingToolbar.vue
index 3ea23915..3465c628 100644
--- a/src/components/Map/EditingToolbar.vue
+++ b/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;
diff --git a/src/services/edition-service.js b/src/services/edition-service.js
index fdb63c61..1595d4f6 100644
--- a/src/services/edition-service.js
+++ b/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();
}
--
GitLab