FGFS-4.1/flightgear-airports-old
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#124 Editable Tower height

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/renderer/components/EditBar.vue
View File

@ -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()

28
src/renderer/components/TowerEdit.vue
View File

@ -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);
}
}
}
}

24
src/renderer/components/TowerLayer.vue
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])
},
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)
}
})
}

55
src/renderer/loaders/Tower.js
View File

@ -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;
}

27
src/renderer/store/modules/Editable.js
View File

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