Bidirectional Binding Parking/Heading

This commit is contained in:
portree_kid 2020-06-02 12:02:37 +02:00
parent 66687bb35f
commit 3aea131727
5 changed files with 80 additions and 37 deletions

View File

@ -388,7 +388,7 @@
latlng1.update(latlng);
}
});
element.editor.feature.setLatLngs(latlngs);
element.editor.feature.setLatLngs(element.latlngs);
element.editor.feature.updateMiddle();
}
});
@ -549,13 +549,13 @@
})
},
editedParking() {
console.log('Edited Parking : ' + this.$store.state.Editable.data.parking)
if (this.$store.state.Editable.index === undefined ||
this.$store.state.Editable.data.parking === undefined ||
this.featureLookup===undefined) {
return
}
this.$store.dispatch('updatedParking', this.$store.state.Editable.data.parking);
console.log('Edited Parking : ' + this.$store.state.Editable.data.parking)
//Notify list
if (this.featureLookup[this.$store.state.Editable.index]===undefined) {
return
}
@ -565,6 +565,9 @@
element.updateVertexFromDirection();
}
})
if (this.$store.state.Editable.data.parking.coords) {
this.setPointCoords(this.$store.state.Editable.index, this.$store.state.Editable.data.parking.coords)
}
},
editedParkings() {
if (this.featureLookup===undefined) {

View File

@ -72,7 +72,7 @@
if (newValue==='unknown') {
}
this.$store.commit('SET_EDIT_COORDS', newValue)
this.$store.commit('SET_EDIT_NODE_COORDS', newValue)
}
},
isOnRunway: {

View File

@ -88,7 +88,7 @@
<span class="label">Heading :</span>
</el-col>
<el-col :span="17">
<el-input-number v-model="heading" :min="-1" :max="361" :step="0.1" :precision="1" :disabled="!editing"></el-input-number>
<el-input-number v-model="heading" :min="-361" :max="720" :step="0.1" :precision="1" :disabled="!editing"></el-input-number>
</el-col>
</el-row>
<el-row>
@ -157,9 +157,11 @@
// {value: 'forward', label: 'forward'},
// {value: 'backward', label: 'backward'}
// ]
storedairlineCodes.forEach(element => {
airlineCodes.push({value: element, label: element});
});
if(storedairlineCodes) {
storedairlineCodes.forEach(element => {
airlineCodes.push({value: element, label: element});
});
}
return airlineCodes
},
airlineCodes: {
@ -204,15 +206,15 @@
// getter
get: function () {
if(this.$store.state.Editable.index!==undefined) {
var ret = this.$parent.$parent.$parent.$refs.editLayer.getPointCoords(this.$store.state.Editable.index)
return ret[0].lat + " " + ret[0].lng
return this.$store.state.Editable.data.parking.coords;
}
},
// setter
set: function (newValue) {
var position = new Coordinates(newValue);
console.log(position);
this.$parent.$parent.$parent.$refs.editLayer.setPointCoords(this.$store.state.Editable.index, position)
if (newValue==='unknown') {
}
this.$store.commit('SET_EDIT_PARKING_COORDS', newValue)
}
},
heading: {
@ -222,13 +224,15 @@
},
// setter
set: function (newValue) {
if (newValue>=360) {
while (newValue>=360) {
newValue -= 360
}
if (newValue<0) {
while (newValue<0) {
newValue += 360
}
this.$store.commit('SET_EDIT_PARKING_HEADING', newValue)
if (Number(this.$store.state.Editable.data.parking.heading) !== newValue) {
this.$store.commit('SET_EDIT_PARKING_HEADING', newValue)
}
}
},
wingspan: {

View File

@ -72,11 +72,11 @@ L.ParkingSpot = L.Circle.extend({
}
}
},
removeDirection: function () {
removeDirection() {
this.direction = undefined;
},
// Update the direction vertex from the direction
updateVertexFromDirection: function () {
updateVertexFromDirection() {
if (this.editEnabled()) {
var start = this._latlng;
var options = { units: 'kilometers' };
@ -91,13 +91,12 @@ L.ParkingSpot = L.Circle.extend({
}
},
// Update the direction from the moved direction vertex
updateDirectionFromVertex: function () {
updateDirectionFromVertex() {
if (this.editEnabled()) {
var start = this._latlng;
var end = this.editor._resizeLatLng.__vertex.getLatLng();
var heading = turf.bearing([start.lng, start.lat], [end.lng, end.lat]);
this.options.attributes.heading = heading;
const output = validRadii.reduce((prev, curr) => Math.abs(curr - this._mRadius) < Math.abs(prev - this._mRadius) ? curr : prev);
console.debug('Found radius ' + output);
@ -121,6 +120,7 @@ L.ParkingSpot = L.Circle.extend({
var style = {};
style['color'] = 'red';
this.setStyle(style);
element.updateWheelPos();
},
deselect() {
var style = {};
@ -144,23 +144,34 @@ L.ParkingSpot = L.Circle.extend({
event.target.updateWheelPos();
}
});
/*
this.on('editable:vertex:drag', function (event) {
console.debug("Drag : ", event);
console.debug("Drag Parking : ", event);
});
*/
this.on('click', function (event) {
console.debug("Click : " + event.target);
this.on('editable:vertex:dragend', function (event) {
console.debug("DragEnd Parking : ", event);
store.default.dispatch('setParking', event.target.options.attributes);
store.default.dispatch('setParkingCoords', event.target.getLatLng().lat.toFixed(5) + ' ' + event.target.getLatLng().lng.toFixed(5));
/*
store.default.dispatch('setParkingHeading', this.options.attributes.heading)
store.default.dispatch('setParkingRadius', this.options.attributes.radius)
*/
});
this.on('click', function (event) {
console.debug("Click Parking : " + event.target);
store.default.dispatch('setParking', event.target.options.attributes);
store.default.dispatch('setParkingCoords', event.target.getLatLng().lat.toFixed(5) + ' ' + event.target.getLatLng().lng.toFixed(5));
this.select();
this.unwatch = store.default.watch(
function (state) {
return state.Editable.data.parking;
},
() => {
if (event.target instanceof L.ParkingSpot) {
event.target.setStyle({color : '#3388ff'});
this.unwatch();
(state) => {
if(state === undefined ||
state.index !== Number(event.target.glueindex)) {
if (event.target instanceof L.ParkingSpot) {
this.deselect();
this.unwatch();
}
}
}
,
@ -180,9 +191,14 @@ L.ParkingSpot = L.Circle.extend({
return state.Editable.data.parking;
},
() => {
event.target.setStyle({color : '#3388ff'});
this.unwatch();
}
if(state === undefined ||
state.index !== Number(event.target.glueindex)) {
if (event.target instanceof L.ParkingSpot) {
this.deselect();
this.unwatch();
}
}
}
,
{
deep: true //add this if u need to watch object properties change etc.
@ -230,6 +246,7 @@ L.ParkingSpot = L.Circle.extend({
// element.extensions();
element.updateMiddleMarker();
element.updateVertexFromDirection();
element.updateWheelPos();
}
else if (element instanceof L.TaxiwaySegment) {
if (element.begin === dragIndex) {

View File

@ -59,6 +59,13 @@ const mutations = {
Vue.set(state.data.parking, 'number', parkingName)
},
'SET_EDIT_PARKING_HEADING' (state, heading) {
while (heading >= 360) {
heading -= 360
}
while (heading < 0) {
heading += 360
}
Vue.set(state.data.parking, 'heading', heading)
},
'SET_EDIT_PARKING_AIRLINES' (state, airlineCodes) {
@ -70,6 +77,9 @@ const mutations = {
'SET_EDIT_PARKING_RADIUS' (state, radius) {
Vue.set(state.data.parking, 'radius', radius)
},
'SET_EDIT_PARKING_COORDS' (state, coords) {
Vue.set(state.data.parking, 'coords', coords)
},
'SET_EDIT_ARC_NAME' (state, arcName) {
Vue.set(state.data.arc, 'name', arcName)
},
@ -82,7 +92,7 @@ const mutations = {
'SET_EDIT_HOLDPOINTTYPE' (state, holdPointType) {
Vue.set(state.data.node, 'holdPointType', holdPointType)
},
'SET_EDIT_COORDS' (state, coords) {
'SET_EDIT_NODE_COORDS' (state, coords) {
Vue.set(state.data.node, 'coords', coords)
},
'SET_EDIT_ISONRUNWAY' (state, isOnRunway) {
@ -100,12 +110,21 @@ const actions = {
async setParking (context, parking) {
context.commit(SET_EDIT_PARKING, parking)
},
async setParkingRadius (context, radius) {
context.commit('SET_EDIT_PARKING_RADIUS', radius)
},
async setParkingHeading (context, heading) {
context.commit('SET_EDIT_PARKING_HEADING', heading)
},
async setParkingCoords (context, coords) {
context.commit('SET_EDIT_PARKING_COORDS', coords)
},
async setArc (context, arc) {
context.commit(SET_EDIT_ARC, arc)
},
async setNode (context, node) {
context.commit('SET_EDIT_NODE', node.attributes)
context.commit('SET_EDIT_COORDS', node.lat.toFixed(5) + ' ' + node.lng.toFixed(5))
context.commit('SET_EDIT_NODE_COORDS', node.lat.toFixed(5) + ' ' + node.lng.toFixed(5))
}
}