Add drawing mode

- User needs to explicitly enable/disable drawing mode to draw/edit a route - It's now possible to draw on map even if first tab is active - When simplify tool is active, drawing mode is temporarily disabled
c2corg · Dec 9, 2021 · 810a684 · 810a684
1 parent c3a82bf
commit 810a684
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 42 deletions.
diff --git a/src/components/yeti/SimplifyTool.vue b/src/components/yeti/SimplifyTool.vue
@@ -65,9 +65,6 @@ export default {
     };
   },
   computed: {
-    activeTab() {
-      return Yetix.activeTab;
-    },
     features() {
       return Yetix.features;
     },
@@ -86,22 +83,19 @@ export default {
     },
   },
   watch: {
-    activeTab() {
-      // reset simplify tool when user switches tab
-      if (this.activeTab !== 1) {
-        this.initialize();
-      }
-    },
     toleranceDistance() {
-      this.enableDisableInteractions();
-    },
-    validToleranceDistance() {
-      this.$emit('validTolerance', this.validToleranceDistance);
+      if (this.validToleranceDistance) {
+        Yetix.setValidSimplifyTolerance(true);
+      } else {
+        Yetix.setValidSimplifyTolerance(false);
+      }
     },
   },
   destroyed() {
-    // force map interactions
-    this.enableDisableInteractions();
+    // set validSimplifyTolerance to false
+    // go back to normal case for simplify tool
+    // and retrieve default value for drawing mode
+    Yetix.setValidSimplifyTolerance(false);
   },
   methods: {
     onPreviewSimplify() {
@@ -116,13 +110,6 @@ export default {
       this.toleranceDistance = 0;
       this.onPreviewSimplify();
     },
-    enableDisableInteractions() {
-      if (this.toleranceDistance === 0 && this.activeTab === 1) {
-        Yetix.$emit('enableInteractions');
-      } else {
-        Yetix.$emit('disableInteractions');
-      }
-    },
   },
 };
 </script>
diff --git a/src/components/yeti/SubPanelCourse.vue b/src/components/yeti/SubPanelCourse.vue
@@ -39,7 +39,7 @@
         <p class="is-size-7 is-italic mb-1 has-text-grey" v-translate>Lines chunks</p>
         <features-list :features="features" />
       </div>
-      <simplify-tool ref="simplifyTool" @validTolerance="onValidTolerance" />
+      <simplify-tool ref="simplifyTool" />
       <info type="help">
         <p v-translate>Drawing tips</p>
         <ul class="content-ul">
@@ -111,7 +111,10 @@
           <input ref="gpxFileInput" type="file" @change="uploadGpx" accept=".gpx" />
         </div>
         <info type="help" class="mt-5">
-          <p><strong v-translate>Draw right on the map</strong> <span v-translate>to start a new route</span></p>
+          <p>
+            <strong v-translate>To draw (and edit) directly on the map</strong>
+            <span v-translate>you need to activate drawing mode</span>
+          </p>
         </info>
       </div>
     </div>
@@ -137,7 +140,6 @@ export default {
       loading: false,
       formats: ['GPX', 'KML'],
       format: 'GPX',
-      validSimplifyTolerance: false,
     };
   },
   computed: {
@@ -147,6 +149,9 @@ export default {
     featuresTitle() {
       return Yetix.featuresTitle;
     },
+    validSimplifyTolerance() {
+      return Yetix.validSimplifyTolerance;
+    },
     hasFeaturesTitle() {
       return !(!this.featuresTitle.length && !this.newFeaturesTitle);
     },
@@ -217,9 +222,6 @@ export default {
     setFilename(ext) {
       return format(new Date(), 'yyyy-MM-dd_HH-mm-ss') + ext;
     },
-    onValidTolerance(validSimplifyTolerance) {
-      this.validSimplifyTolerance = validSimplifyTolerance;
-    },
   },
 };
 </script>

diff --git a/src/components/yeti/Tabs.vue b/src/components/yeti/Tabs.vue
@@ -13,7 +13,14 @@
           @click.prevent="setActiveTab(i)"
           @keydown="setActiveTabKeyboard($event, i)"
         >
-          {{ tab }} <fa-icon icon="check-circle" v-if="i === 1 && hasFeatures" class="ml-1" />
+          {{ tab }}
+          <fa-icon icon="check-circle" v-if="i === 1 && hasFeatures && !validSimplifyTolerance" class="ml-1" />
+          <fa-icon
+            icon="exclamation-circle"
+            v-if="i === 1 && validSimplifyTolerance"
+            class="has-text-danger ml-1"
+            :title="$gettext('Not simplified yet')"
+          />
         </a>
       </li>
     </ul>
@@ -37,6 +44,9 @@ export default {
     hasFeatures() {
       return Yetix.hasFeatures;
     },
+    validSimplifyTolerance() {
+      return Yetix.validSimplifyTolerance;
+    },
   },
   methods: {
     setActiveTab(index) {

diff --git a/src/components/yeti/YetiMap.vue b/src/components/yeti/YetiMap.vue
@@ -64,6 +64,19 @@
           </li>
         </ul>
       </div>
+
+      <div ref="drawingMode" class="ol-control ol-control-drawing-mode" :class="{ 'is-primary': drawingMode }">
+        <div class="ol-control-drawing-mode-inner">
+          <input-checkbox @input="onDrawingMode" :value="drawingMode" :disabled="validSimplifyTolerance">
+            <span v-translate title="Enable drawing and editing features on map">Drawing mode</span>
+            <span class="yeti-tag">
+              <span v-if="validSimplifyTolerance" v-translate>DISABLED</span>
+              <span v-else-if="drawingMode">ON</span>
+              <span v-else>OFF</span>
+            </span>
+          </input-checkbox>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -121,6 +134,12 @@ export default {
     showAreas() {
       return Yetix.showAreas;
     },
+    drawingMode() {
+      return Yetix.drawingMode;
+    },
+    validSimplifyTolerance() {
+      return Yetix.validSimplifyTolerance;
+    },
     yetiLayers() {
       return [
         {
@@ -187,6 +206,7 @@ export default {
       new ol.control.FullScreen({ source: this.$el, tipLabel: this.$gettext('Toggle full-screen', 'Map Controls') }),
       new ol.control.Control({ element: this.$refs.layerSwitcherButton }),
       new ol.control.Control({ element: this.$refs.layerSwitcher }),
+      new ol.control.Control({ element: this.$refs.drawingMode }),
       new ol.control.Control({ element: this.$refs.recenterOnControl }),
       new ol.control.Control({ element: this.$refs.recenterOnPropositions }),
     ];
@@ -269,6 +289,9 @@ export default {
     onShowAreas() {
       Yetix.setShowAreas(!this.showAreas);
     },
+    onDrawingMode() {
+      Yetix.setDrawingMode(!this.drawingMode);
+    },
   },
 };
 </script>
@@ -309,6 +332,14 @@ $control-margin: 0.5em;
 .ol-control-recenter-on {
   top: $control-margin;
   left: 3em;
+  background: $white;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+
+  input {
+    border: none;
+    padding: 0.3rem;
+    border-radius: 2px;
+  }
 }
 
 .ol-control-recenter-on-propositions {
@@ -359,10 +390,74 @@ $yeti-height: calc(
     }
   }
 }
+
+.ol-control-drawing-mode {
+  top: $control-margin;
+  left: 18.75rem;
+  padding: 0;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+
+  .ol-control-drawing-mode-inner {
+    padding: 0.15rem 0.25rem 0;
+    border-radius: 4px;
+    background: $white;
+  }
+
+  &.is-primary .ol-control-drawing-mode-inner {
+    background: $primary;
+    color: $white;
+  }
+
+  .yeti-tag {
+    font-size: 0.8em;
+    background: rgba(0, 0, 0, 0.25);
+    padding: 0.25em;
+    border-radius: 2px;
+    margin-left: 0.5rem;
+    vertical-align: text-top;
+  }
+
+  &.is-primary .yeti-tag {
+    color: $white;
+  }
+}
+
+@media screen and (max-width: $widescreen) {
+  .ol-control-drawing-mode {
+    top: 3rem;
+    left: 3rem;
+  }
+}
+
+.icon-notification {
+  color: $primary;
+}
 </style>
 
-<style>
-.ol-attribution {
-  max-width: 75%;
+<style lang="scss">
+.yeti-app {
+  .ol-control {
+    background: $white;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+  }
+  .ol-control button {
+    background: $grey-dark;
+
+    &:hover,
+    &:focus {
+      background: $grey;
+    }
+  }
+
+  .ol-attribution {
+    max-width: 75%;
+  }
+
+  .ol-control-drawing-mode {
+    .is-checkradio[type='checkbox'] + label {
+      font-size: 0.95em;
+      margin-right: 0;
+    }
+  }
 }
 </style>
diff --git a/src/components/yeti/Yetix.vue b/src/components/yeti/Yetix.vue
@@ -49,6 +49,9 @@ let defaultState = {
   showAvalancheBulletins: false,
 
   mapZoom: 0,
+  drawingMode: false,
+
+  validSimplifyTolerance: false,
 };
 
 /**
@@ -114,6 +117,12 @@ export default new Vue({
     mapZoom() {
       return state.mapZoom;
     },
+    drawingMode() {
+      return state.drawingMode;
+    },
+    validSimplifyTolerance() {
+      return state.validSimplifyTolerance;
+    },
   },
   methods: {
     // mutations
@@ -159,6 +168,26 @@ export default new Vue({
     setMapZoom(mapZoom) {
       state.mapZoom = mapZoom;
     },
+    setDrawingMode(drawingMode) {
+      state.drawingMode = drawingMode;
+    },
+    setValidSimplifyTolerance(validSimplifyTolerance) {
+      state.validSimplifyTolerance = validSimplifyTolerance;
+      // when validSimplifyTolerance is OK
+      // check state for drawingMode:
+      // if it's on, store it (tmp), and retrieve state later
+      if (validSimplifyTolerance) {
+        if (state.drawingMode) {
+          state.tmpDrawingMode = true;
+          this.setDrawingMode(false);
+        }
+      } else {
+        if (state.tmpDrawingMode) {
+          this.setDrawingMode(true);
+          delete state.tmpDrawingMode;
+        }
+      }
+    },
     setDefault() {
       // revert all state properties to default
       for (let i in state) {

diff --git a/src/components/yeti/map-layers/AvalancheBulletinsLayer.vue b/src/components/yeti/map-layers/AvalancheBulletinsLayer.vue
@@ -245,6 +245,9 @@ export default {
     bulletinsLoaded() {
       return Yetix.bulletinsLoaded;
     },
+    drawingMode() {
+      return Yetix.drawingMode;
+    },
     overlayOrientations() {
       // return truthy orientations, in uppercase
       return Object.keys(this.overlayData.orientations)
@@ -371,7 +374,8 @@ export default {
     },
     onMapClick(evt) {
       // this will set bulletins overlay, only when showAvalancheBulletins is true
-      if (this.showAvalancheBulletins) {
+      // and drawing mode is off
+      if (this.showAvalancheBulletins && !this.drawingMode) {
         this.setBulletinsOverlay(evt);
       }
     },

diff --git a/src/components/yeti/map-layers/RouteLayer.vue b/src/components/yeti/map-layers/RouteLayer.vue
@@ -60,9 +60,6 @@ export default {
     };
   },
   computed: {
-    activeTab() {
-      return Yetix.activeTab;
-    },
     features() {
       return Yetix.features;
     },
@@ -72,10 +69,13 @@ export default {
     validMinimumMapZoom() {
       return Yetix.VALID_MINIMUM_MAP_ZOOM;
     },
+    drawingMode() {
+      return Yetix.drawingMode;
+    },
   },
   watch: {
-    activeTab() {
-      if (this.activeTab === 0) {
+    drawingMode() {
+      if (!this.drawingMode) {
         this.disableInteractions();
       } else {
         this.enableInteractions();
@@ -124,8 +124,6 @@ export default {
     Yetix.$on('gpx', this.addFeaturesFromGpx);
     Yetix.$on('previewSimplify', this.previewSimplify);
     Yetix.$on('simplify', this.simplify);
-    Yetix.$on('enableInteractions', this.enableInteractions);
-    Yetix.$on('disableInteractions', this.disableInteractions);
   },
   methods: {
     addInteractions() {

diff --git a/src/components/yeti/map-layers/YetiLayer.vue b/src/components/yeti/map-layers/YetiLayer.vue
@@ -230,11 +230,11 @@ export default {
     margin: 1px;
     width: 1.375em;
     padding: 1rem 0;
-    background: rgba(0, 60, 136, 0.5);
+    background: $grey-dark;
     border-radius: 2px;
 
     &:hover {
-      background: rgba(0, 60, 136, 0.7);
+      background: $grey;
     }
   }