Bidirectional Binding Parking/Heading
This commit is contained in:
parent
66687bb35f
commit
3aea131727
@ -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) {
|
||||
|
@ -72,7 +72,7 @@
|
||||
if (newValue==='unknown') {
|
||||
|
||||
}
|
||||
this.$store.commit('SET_EDIT_COORDS', newValue)
|
||||
this.$store.commit('SET_EDIT_NODE_COORDS', newValue)
|
||||
}
|
||||
},
|
||||
isOnRunway: {
|
||||
|
@ -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: {
|
||||
|
@ -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) {
|
||||
|
@ -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))
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user