#124 Editable Tower height

src/renderer/components/TowerEdit.vue

@@ -6,7 +6,7 @@
           <span class="label">Latitude :</span>
         </el-col>
         <el-col :span="17">
-          <el-input placeholder="Please input" v-model="latitude" :disabled="!editing"  
+          <el-input placeholder="Please input" v-model="latitude" :disabled="true"
           @focus="coordFocussed = true"
           @blur="coordFocussed = false"></el-input>
         </el-col>
@@ -16,7 +16,7 @@
           <span class="label">Longitude :</span>
         </el-col>
         <el-col :span="17">
-          <el-input placeholder="Please input" v-model="longitude" :disabled="!editing"  
+          <el-input placeholder="Please input" v-model="longitude" :disabled="true"
           @focus="coordFocussed = true"
           @blur="coordFocussed = false"></el-input>
         </el-col>
@@ -26,9 +26,9 @@
           <span class="label">Height :</span>
         </el-col>
         <el-col :span="17">
-          <el-input placeholder="Please input" v-model="height" :disabled="!editing"  
+          <el-input-number placeholder="Please input" @change="handleChange" v-model="height" :disabled="!editing" :step="0.01"
           @focus="coordFocussed = true"
-          @blur="coordFocussed = false"></el-input>
+          @blur="coordFocussed = false"></el-input-number>
         </el-col>
       </el-row>
     </div>
@@ -59,12 +59,15 @@
       save () {
         var o = {latitude: this.latitude, longitude: this.longitude, height: this.height};
         writeTowerXML(this.$store.state.Settings.settings.airportsDirectory, this.$parent.$parent.$parent.icao, o)
+      },
+      handleChange (newValue) {
+          this.$store.dispatch('setTowerHeight', newValue);
       }
     },
     computed: {
       editing: {
         get: function () {
-          return false //this.$parent.$parent.$parent.$refs.editLayer.editing 
+          return this.$parent.$parent.$parent.$refs.editLayer.editing
         }
       },
       tower: function () {
@@ -77,8 +80,13 @@
       longitude: function () {
         return this.$store.state.Editable.data.tower.coords.longitude;
       },
-      height: function () {
+      height: {
-        return this.$store.state.Editable.data.tower.coords.height;
+        get: function () {
+          return this.$store.state.Editable.data.tower.height;
+        },
+        set: function (newValue) {
+          this.$store.dispatch('setTowerHeight', newValue);
+        }
       }
     }
   }

src/renderer/components/TowerLayer.vue

@@ -25,7 +25,16 @@ You should have received a copy of the GNU General Public License along with FG
       console.debug([LMap, LMarker, L, LEdit])
     },
     mounted () {
-
+      this.$store.watch(
+        function (state) {
+          return state.Editable.data.tower
+        },
+        () => { this.editedTower() }
+        ,
+        {
+          deep: true
+        }
+      )
     },
     beforeDestroy () {
       this.remove()
@@ -35,6 +44,15 @@ You should have received a copy of the GNU General Public License along with FG
       }
     },
     methods: {
+      editedTower () {
+        if (this.$store.state.Editable.data.tower) {
+          this.layerGroup.eachLayer(l => {
+            if (l instanceof L.TowerMarker) {
+              l.setTowerHeight(this.$store.state.Editable.data.tower.height)
+            }
+          })
+        }
+      },
       getLayer () {
         return this.layerGroup
       },
@@ -71,7 +89,7 @@ You should have received a copy of the GNU General Public License along with FG
         if (this.layerGroup) {
           this.layerGroup.eachLayer(l => {
             if (l instanceof L.TowerMarker) {
-              l.enableEdit(this.$parent.mapObject)
+              l.setInteractive(true)
             }
           })
         }
@@ -80,7 +98,7 @@ You should have received a copy of the GNU General Public License along with FG
         if (this.layerGroup) {
           this.layerGroup.eachLayer(l => {
             if (l instanceof L.TowerMarker) {
-              l.enableEdit(this.$parent.mapObject)
+              l.setInteractive(false)
             }
           })
         }

src/renderer/loaders/Tower.js

@@ -21,7 +21,7 @@ const store = require('../store');
 
 L.TowerMarker = L.Marker.extend({
     options: {
-        zIndexOffset: 10000,
+        zIndexOffset: 10000, draggable: 'true'
     },
     stripSVG: function(fName) {
         var rx = /<\s*svg[^>]*>([\s\S]*)<\s*\/svg[^>]*>/gm;
@@ -44,6 +44,7 @@ L.TowerMarker = L.Marker.extend({
                     className: 'threshold-marker-icon',
                     html: `<div style=\'transform: translateX(${offset}px) translateY(${offset}px) scale(${scale}); border: 1px red\'>${this.svg}</div>`,
                 }));
+                this.setInteractive(this.interactive);
 
                 this.update(this.getLatLng());
                 console.debug();
@@ -52,6 +53,18 @@ L.TowerMarker = L.Marker.extend({
             }
         }
     },
+    setInteractive(interactive) {
+        if (interactive) {
+            if(this._icon) {
+              L.DomUtil.addClass(this._icon, 'leaflet-interactive');
+            }
+        } else {
+            if(this._icon) {
+                L.DomUtil.removeClass(this._icon, 'leaflet-interactive');
+            }
+        }
+        this.interactive = interactive;
+    },
     metersPerPixel: function (latitude, zoomLevel) {
         var earthCircumference = 40075017;
         var latitudeRadians = latitude * (Math.PI / 180);
@@ -61,11 +74,21 @@ L.TowerMarker = L.Marker.extend({
     pixelValue: function (latitude, meters, zoomLevel) {
         return meters / metersPerPixel(latitude, zoomLevel);
     },
+    setTowerHeight: function (height) {
+        this.elev_m = height;
+    }
 });
 
 L.TowerMarker.addInitHook(function(){
     this.svg = this.stripSVG('tower.svg');
     this.iconSize = 32;
+    this.on('click', function (event) {
+        store.default.dispatch('setTowerCoords',
+        event.target.getLatLng().lat.toFixed(6) + ' ' +
+        event.target.getLatLng().lng.toFixed(6) + ' ' +
+        event.target.elev_m);
+        store.default.dispatch('setTowerHeight', event.target.elev_m );
+    });
     this.on('dragstart', function (event) {
         console.debug("Drag Tower : ", event);
     });
@@ -75,6 +98,10 @@ L.TowerMarker.addInitHook(function(){
         event.target.getLatLng().lat.toFixed(6) + ' ' +
         event.target.getLatLng().lng.toFixed(6) + ' ' +
         event.target.elev_m);
+        store.default.dispatch('setTowerHeight', event.target.elev_m );
+    });
+    this.on('add', function (event) {
+        event.target.setInteractive(false);
     });
 });
 

src/renderer/store/modules/Editable.js

@@ -16,7 +16,7 @@ const state = {
   type: 'none',
   index: 'none',
   editing: false,
-  data: {airports: {}, parking: {}, arc: {}, multiarc: {}, node: {}, runway: {}, threshold: {}}
+  data: {airports: {}, parking: {}, arc: {}, multiarc: {}, node: {}, runway: {}, threshold: {}, tower: {}}
 }
 
 const SET_EDIT_AIRPORT = 'SET_EDIT_AIRPORT'
@@ -38,7 +38,6 @@ const mutations = {
     state.type = 'airport'
   },
   SET_EDIT_PARKING (state, parking) {
-    Vue.set(state, 'data', {})
     var p = Object.assign({}, parking)
     Vue.set(state.data, 'parking', p)
     Vue.set(state, 'index', p.index)
@@ -48,15 +47,11 @@ const mutations = {
     if (node === undefined) {
       return
     }
-    if (!state.data || state.type !== 'node') {
-      Vue.set(state, 'data', {})
-    }
     Vue.set(state.data, 'node', node)
     Vue.set(state, 'index', node.index)
     Vue.set(state, 'type', 'node')
   },
   SET_EDIT_RUNWAY (state, runway) {
-    Vue.set(state, 'data', {})
     Vue.set(state.data, 'node', runway)
     Vue.set(state, 'index', runway.index)
     Vue.set(state, 'type', 'runway')
@@ -65,9 +60,6 @@ const mutations = {
     if (arc === undefined) {
       return
     }
-    if (!state.data || state.type !== 'arc') {
-      Vue.set(state, 'data', {})
-    }
     Vue.set(state.data, 'arc', arc)
     if (state.data.arc.name === undefined) {
       Vue.set(state.data.arc, 'name', '')
@@ -79,9 +71,6 @@ const mutations = {
     if (arc === undefined) {
       return
     }
-    if (!state.data || state.type !== 'multiarc') {
-      Vue.set(state, 'data', {multiarc: {}})
-    }
     Vue.set(state.data.multiarc, 'isPushBackRoute', arc.isPushBackRoute)
     Vue.set(state.data.multiarc, 'direction', arc.direction)
     if (state.data.multiarc.name === undefined) {
@@ -163,10 +152,17 @@ const mutations = {
   },
   'SET_EDIT_TOWER_COORDS' (state, coords) {
     state.type = 'tower'
-    state.data.tower = { coords: {} }
+    if (!state.data.tower) {
+      state.data.tower = {}
+    }
+    if (!state.data.tower.coords) {
+      state.data.tower.coords = {}
+    }
     Vue.set(state.data.tower.coords, 'latitude', coords.split(' ')[0])
     Vue.set(state.data.tower.coords, 'longitude', coords.split(' ')[1])
-    Vue.set(state.data.tower.coords, 'height', coords.split(' ')[2])
+  },
+  'SET_EDIT_TOWER_HEIGHT' (state, height) {
+    Vue.set(state.data.tower, 'height', height)
   },
   'SET_EDIT_THRESHOLD_COORDS' (state, threshold) {
     state.type = 'threshold'
@@ -219,6 +215,9 @@ const actions = {
   async setTowerCoords (context, node) {
     context.commit('SET_EDIT_TOWER_COORDS', node)
   },
+  async setTowerHeight (context, height) {
+    context.commit('SET_EDIT_TOWER_HEIGHT', height)
+  },
   async setThreshold (context, node) {
     context.commit('SET_EDIT_THRESHOLD_COORDS', node)
   },