#124 Editable Tower height

src/renderer/components/EditBar.vue

@@ -145,7 +145,7 @@ You should have received a copy of the GNU General Public License along with FG
     },
     methods: {
       cancel () {
-        this.centerDialogVisible = false        
+        this.centerDialogVisible = false
       },
       zoomout() {
         this.$parent.$parent.$refs.editLayer.stopDrawing()
@@ -195,7 +195,7 @@ You should have received a copy of the GNU General Public License along with FG
         this.$parent.$parent.$refs.towerLayer.disableEdit()
         this.$parent.$parent.$refs.thresholdLayer.disableEdit()
         this.rescanCurrentGroundnet()
-        Vue.set(this, 'saveDialogVisible', false)              
+        Vue.set(this, 'saveDialogVisible', false)
       },
       save () {
         Vue.set(this, 'saveDialogVisible', true)
@@ -209,7 +209,7 @@ You should have received a copy of the GNU General Public License along with FG
         this.$parent.$parent.$refs.towerLayer.save()
         this.$parent.$parent.$refs.thresholdLayer.save()
         this.rescanCurrentGroundnet()
-        Vue.set(this, 'saveDialogVisible', false)              
+        Vue.set(this, 'saveDialogVisible', false)
       },
       rescanCurrentGroundnet () {
         try {
@@ -220,7 +220,7 @@ You should have received a copy of the GNU General Public License along with FG
 
           var icao = this.$parent.$parent.$refs.editLayer.icao
           const worker = new Worker(winURL)
-          
+
           var aptDir = path.join(this.$store.state.Settings.settings.airportsDirectory, icao[0], icao[1], icao[2]);
           worker.postMessage(['scan', aptDir ])
           // the reply
@@ -276,7 +276,7 @@ You should have received a copy of the GNU General Public License along with FG
 
           const worker = new Worker(winURL)
           worker.onerror = function(e) {
-            worker.terminate() 
+            worker.terminate()
             worker.view.max = 0
             worker.view.checkDialogVisible = false
             e.preventDefault(); // <-- "Hey browser, I handled it!"
@@ -302,7 +302,7 @@ You should have received a copy of the GNU General Public License along with FG
             console.log(l)
             pavement.push(l)
           })
-          var features2 = pavement.map(mapper.checkMapper).filter(n => n)          
+          var features2 = pavement.map(mapper.checkMapper).filter(n => n)
 
           worker.postMessage(['check', features.concat(features2) ] )
           this.pollData()

src/renderer/components/TowerEdit.vue

@@ -6,8 +6,8 @@
           <span class="label">Latitude :</span>
         </el-col>
         <el-col :span="17">
-          <el-input placeholder="Please input" v-model="latitude" :disabled="!editing"  
-          @focus="coordFocussed = true" 
+          <el-input placeholder="Please input" v-model="latitude" :disabled="true"
+          @focus="coordFocussed = true"
           @blur="coordFocussed = false"></el-input>
         </el-col>
       </el-row>
@@ -16,8 +16,8 @@
           <span class="label">Longitude :</span>
         </el-col>
         <el-col :span="17">
-          <el-input placeholder="Please input" v-model="longitude" :disabled="!editing"  
-          @focus="coordFocussed = true" 
+          <el-input placeholder="Please input" v-model="longitude" :disabled="true"
+          @focus="coordFocussed = true"
           @blur="coordFocussed = false"></el-input>
         </el-col>
       </el-row>
@@ -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"  
-          @focus="coordFocussed = true" 
-          @blur="coordFocussed = false"></el-input>
+          <el-input-number placeholder="Please input" @change="handleChange" v-model="height" :disabled="!editing" :step="0.01"
+          @focus="coordFocussed = true"
+          @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 () {
-        return this.$store.state.Editable.data.tower.coords.height;
+      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;
@@ -35,15 +35,16 @@ L.TowerMarker = L.Marker.extend({
             var metersPP = this.metersPerPixel(map.getCenter().lat, map.getZoom());
             console.debug('Old Meters per pixel ' + this._metersPP);
             console.debug('New Meters per pixel ' + metersPP);
-            if(this._metersPP != metersPP) {                
+            if(this._metersPP != metersPP) {
                 var pixelSize = this.iconSize / metersPP;
                 var scale = pixelSize/this.iconSize;
-                var offset = 0;//-(this.iconSize/2);                
+                var offset = 0;//-(this.iconSize/2);
                 this.setIcon(L.divIcon({
                     iconSize: 32,
                     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();
@@ -51,38 +52,64 @@ L.TowerMarker = L.Marker.extend({
                 this._metersPP = metersPP;
             }
         }
-    },    
+    },
+    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);
         return earthCircumference * Math.cos(latitudeRadians) / Math.pow(2, zoomLevel + 8);
     },
-    
+
     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('dragstart', function (event) { 
+    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);
     });
     this.on('dragend', function (event) {
         console.debug("DragEnd Tower : ", event);
-        store.default.dispatch('setTowerCoords', 
-        event.target.getLatLng().lat.toFixed(6) + ' ' + 
-        event.target.getLatLng().lng.toFixed(6) + ' ' + 
+        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('add', function (event) {
+        event.target.setInteractive(false);
     });
 });
 
 //Builds a marker for a ai or multiplayer aircraft
-var tower = function (n, options) {    
-    var latlon = convert(n.find('lat/text()').text() + " " + n.find('lon/text()').text());    
-    var marker = new L.TowerMarker([latlon.decimalLatitude, latlon.decimalLongitude], {pane: 'tower-pane'}); 
-    marker.elev_m = n.find('elev-m/text()').text(); 
+var tower = function (n, options) {
+    var latlon = convert(n.find('lat/text()').text() + " " + n.find('lon/text()').text());
+    var marker = new L.TowerMarker([latlon.decimalLatitude, latlon.decimalLongitude], {pane: 'tower-pane'});
+    marker.elev_m = n.find('elev-m/text()').text();
     return marker;
 }
 

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)
   },