From 21e27bf9132b1cd9c30a70c420c5412c12df0b2a Mon Sep 17 00:00:00 2001 From: Keith Paterson Date: Wed, 14 Apr 2021 16:56:30 +0200 Subject: [PATCH] #124 Editable Tower height --- src/renderer/components/EditBar.vue | 12 +++--- src/renderer/components/TowerEdit.vue | 28 ++++++++----- src/renderer/components/TowerLayer.vue | 24 +++++++++-- src/renderer/loaders/Tower.js | 55 +++++++++++++++++++------- src/renderer/store/modules/Editable.js | 27 ++++++------- 5 files changed, 99 insertions(+), 47 deletions(-) diff --git a/src/renderer/components/EditBar.vue b/src/renderer/components/EditBar.vue index f4aa8d6..a87a84b 100644 --- a/src/renderer/components/EditBar.vue +++ b/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() diff --git a/src/renderer/components/TowerEdit.vue b/src/renderer/components/TowerEdit.vue index 316751a..6878f67 100644 --- a/src/renderer/components/TowerEdit.vue +++ b/src/renderer/components/TowerEdit.vue @@ -6,8 +6,8 @@ Latitude : - @@ -16,8 +16,8 @@ Longitude : - @@ -26,9 +26,9 @@ Height : - + @@ -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); + } } } } diff --git a/src/renderer/components/TowerLayer.vue b/src/renderer/components/TowerLayer.vue index 07e9f0a..fd13e54 100644 --- a/src/renderer/components/TowerLayer.vue +++ b/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) } }) } diff --git a/src/renderer/loaders/Tower.js b/src/renderer/loaders/Tower.js index d43514a..057ccc4 100644 --- a/src/renderer/loaders/Tower.js +++ b/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: `
${this.svg}
`, - })); + })); + 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; } diff --git a/src/renderer/store/modules/Editable.js b/src/renderer/store/modules/Editable.js index 8622a44..7f5a076 100644 --- a/src/renderer/store/modules/Editable.js +++ b/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) },