#124 Editable Tower height

This commit is contained in:
Keith Paterson 2021-04-14 16:56:30 +02:00
parent 92a39591b5
commit 21e27bf913
5 changed files with 99 additions and 47 deletions

View File

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

View File

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

View File

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

View File

@ -21,7 +21,7 @@ const store = require('../store');
L.TowerMarker = L.Marker.extend({ L.TowerMarker = L.Marker.extend({
options: { options: {
zIndexOffset: 10000, zIndexOffset: 10000, draggable: 'true'
}, },
stripSVG: function(fName) { stripSVG: function(fName) {
var rx = /<\s*svg[^>]*>([\s\S]*)<\s*\/svg[^>]*>/gm; 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()); var metersPP = this.metersPerPixel(map.getCenter().lat, map.getZoom());
console.debug('Old Meters per pixel ' + this._metersPP); console.debug('Old Meters per pixel ' + this._metersPP);
console.debug('New Meters per pixel ' + metersPP); console.debug('New Meters per pixel ' + metersPP);
if(this._metersPP != metersPP) { if(this._metersPP != metersPP) {
var pixelSize = this.iconSize / metersPP; var pixelSize = this.iconSize / metersPP;
var scale = pixelSize/this.iconSize; var scale = pixelSize/this.iconSize;
var offset = 0;//-(this.iconSize/2); var offset = 0;//-(this.iconSize/2);
this.setIcon(L.divIcon({ this.setIcon(L.divIcon({
iconSize: 32, iconSize: 32,
className: 'threshold-marker-icon', className: 'threshold-marker-icon',
html: `<div style=\'transform: translateX(${offset}px) translateY(${offset}px) scale(${scale}); border: 1px red\'>${this.svg}</div>`, 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()); this.update(this.getLatLng());
console.debug(); console.debug();
@ -51,38 +52,64 @@ L.TowerMarker = L.Marker.extend({
this._metersPP = metersPP; 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) { metersPerPixel: function (latitude, zoomLevel) {
var earthCircumference = 40075017; var earthCircumference = 40075017;
var latitudeRadians = latitude * (Math.PI / 180); var latitudeRadians = latitude * (Math.PI / 180);
return earthCircumference * Math.cos(latitudeRadians) / Math.pow(2, zoomLevel + 8); return earthCircumference * Math.cos(latitudeRadians) / Math.pow(2, zoomLevel + 8);
}, },
pixelValue: function (latitude, meters, zoomLevel) { pixelValue: function (latitude, meters, zoomLevel) {
return meters / metersPerPixel(latitude, zoomLevel); return meters / metersPerPixel(latitude, zoomLevel);
}, },
setTowerHeight: function (height) {
this.elev_m = height;
}
}); });
L.TowerMarker.addInitHook(function(){ L.TowerMarker.addInitHook(function(){
this.svg = this.stripSVG('tower.svg'); this.svg = this.stripSVG('tower.svg');
this.iconSize = 32; 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); console.debug("Drag Tower : ", event);
}); });
this.on('dragend', function (event) { this.on('dragend', function (event) {
console.debug("DragEnd Tower : ", event); console.debug("DragEnd Tower : ", event);
store.default.dispatch('setTowerCoords', store.default.dispatch('setTowerCoords',
event.target.getLatLng().lat.toFixed(6) + ' ' + event.target.getLatLng().lat.toFixed(6) + ' ' +
event.target.getLatLng().lng.toFixed(6) + ' ' + event.target.getLatLng().lng.toFixed(6) + ' ' +
event.target.elev_m); 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 //Builds a marker for a ai or multiplayer aircraft
var tower = function (n, options) { var tower = function (n, options) {
var latlon = convert(n.find('lat/text()').text() + " " + n.find('lon/text()').text()); 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'}); var marker = new L.TowerMarker([latlon.decimalLatitude, latlon.decimalLongitude], {pane: 'tower-pane'});
marker.elev_m = n.find('elev-m/text()').text(); marker.elev_m = n.find('elev-m/text()').text();
return marker; return marker;
} }

View File

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