|
|
|
@ -1,4 +1,6 @@
|
|
|
|
|
/* eslint-disable */
|
|
|
|
|
const Vue = require('vue');
|
|
|
|
|
|
|
|
|
|
var L = require('leaflet');
|
|
|
|
|
const store = require('../store');
|
|
|
|
|
|
|
|
|
@ -12,14 +14,14 @@ exports.extendTaxiSegment = function (taxiwaySegment) {
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
taxiwaySegment.__proto__.updateEndVertex = function (latlng) {
|
|
|
|
|
if(this._latlngs[1].__vertex){
|
|
|
|
|
if (this._latlngs[1].__vertex) {
|
|
|
|
|
this._latlngs[1].__vertex.setLatLng(latlng);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
taxiwaySegment.__proto__.updateMiddle = function () {
|
|
|
|
|
this._latlngs.forEach(element => {
|
|
|
|
|
if(element.__vertex.middleMarker){
|
|
|
|
|
if (element.__vertex.middleMarker) {
|
|
|
|
|
element.__vertex.middleMarker.updateLatLng();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
@ -43,24 +45,24 @@ exports.extendTaxiSegment = function (taxiwaySegment) {
|
|
|
|
|
};
|
|
|
|
|
taxiwaySegment.__proto__.addListeners = function () {
|
|
|
|
|
this.on('click', function (event) {
|
|
|
|
|
event.target.setStyle({color : 'red'});
|
|
|
|
|
event.target.setStyle({ color: 'red' });
|
|
|
|
|
console.log("Click : " + event.target);
|
|
|
|
|
if (store.default.state.Editable.data.arc === undefined ||
|
|
|
|
|
store.default.state.Editable.data.arc !== event.target.options.attributes) {
|
|
|
|
|
if(event.target.options.attributes === undefined) {
|
|
|
|
|
if (event.target.options.attributes === undefined) {
|
|
|
|
|
event.target.options.attributes = {};
|
|
|
|
|
}
|
|
|
|
|
event.target.options.attributes.index = event.target._leaflet_id;
|
|
|
|
|
event.target.options.attributes.selected = true;
|
|
|
|
|
store.default.dispatch('setArc', event.target.options.attributes);
|
|
|
|
|
}
|
|
|
|
|
this.unwatch = store.default.watch(
|
|
|
|
|
function (state) {
|
|
|
|
|
this.unwatch = store.default.watch(
|
|
|
|
|
function (state) {
|
|
|
|
|
return state.Editable.data.arc;
|
|
|
|
|
},
|
|
|
|
|
() => {
|
|
|
|
|
},
|
|
|
|
|
(arc) => {
|
|
|
|
|
console.debug(arc);
|
|
|
|
|
// Reset colour
|
|
|
|
|
if(event.target instanceof L.Polyline &&
|
|
|
|
|
if (event.target instanceof L.Polyline &&
|
|
|
|
|
event.target.options.attributes &&
|
|
|
|
|
event.target.options.attributes.selected) {
|
|
|
|
|
event.target.options.attributes.selected = false;
|
|
|
|
@ -68,11 +70,12 @@ exports.extendTaxiSegment = function (taxiwaySegment) {
|
|
|
|
|
this.unwatch();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
,
|
|
|
|
|
{
|
|
|
|
|
deep: true //add this if u need to watch object properties change etc.
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
,
|
|
|
|
|
{
|
|
|
|
|
deep: true //add this if u need to watch object properties change etc.
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.on('editable:drawing:move', function (event) {
|
|
|
|
|
if (dragIndex >= 0) {
|
|
|
|
@ -85,45 +88,46 @@ exports.extendTaxiSegment = function (taxiwaySegment) {
|
|
|
|
|
// Find nearest node
|
|
|
|
|
let closest = this.editLayer.closestLayerSnap(event.latlng, 5)
|
|
|
|
|
let taxiwaySegment = event.latlng.__vertex.editor.feature;
|
|
|
|
|
if(taxiwaySegment.options.attributes === undefined) {
|
|
|
|
|
taxiwaySegment.options.attributes = {direction: 'bi-directional'};
|
|
|
|
|
if (taxiwaySegment.options.attributes === undefined) {
|
|
|
|
|
taxiwaySegment.options.attributes = { direction: 'bi-directional' };
|
|
|
|
|
}
|
|
|
|
|
taxiwaySegment.updateStyle();
|
|
|
|
|
// Glue to another node
|
|
|
|
|
if (closest) {
|
|
|
|
|
event.latlng['glueindex'] = Number(closest.glueindex);
|
|
|
|
|
event.latlng.__vertex.setLatLng(closest.latlng);
|
|
|
|
|
event.latlng.attributes = {index: event.latlng.glueindex, isOnRunway: 0};
|
|
|
|
|
// Push Vertex to lookup
|
|
|
|
|
this.editLayer.featureLookup[event.latlng.glueindex].push(event.latlng.__vertex);
|
|
|
|
|
if (taxiwaySegment.options.attributes.begin === undefined) {
|
|
|
|
|
taxiwaySegment.options.attributes.begin = event.latlng['glueindex']
|
|
|
|
|
} else {
|
|
|
|
|
taxiwaySegment.options.attributes.end = event.latlng['glueindex']
|
|
|
|
|
}
|
|
|
|
|
if(taxiwaySegment.getLatLngs().length===1) {
|
|
|
|
|
taxiwaySegment.begin = closest.glueindex;
|
|
|
|
|
}
|
|
|
|
|
taxiwaySegment.end = closest.glueindex;
|
|
|
|
|
console.log(`Closest : ${closest}`)
|
|
|
|
|
event.latlng['glueindex'] = Number(closest.glueindex);
|
|
|
|
|
event.latlng.__vertex.setLatLng(closest.latlng);
|
|
|
|
|
event.latlng.attributes = { index: event.latlng.glueindex, isOnRunway: 0 };
|
|
|
|
|
// Push Vertex to lookup
|
|
|
|
|
this.editLayer.featureLookup[event.latlng.glueindex].push(event.latlng.__vertex);
|
|
|
|
|
if (taxiwaySegment.options.attributes.begin === undefined) {
|
|
|
|
|
taxiwaySegment.options.attributes.begin = event.latlng['glueindex']
|
|
|
|
|
} else {
|
|
|
|
|
taxiwaySegment.options.attributes.end = event.latlng['glueindex']
|
|
|
|
|
}
|
|
|
|
|
if (taxiwaySegment.getLatLngs().length === 1) {
|
|
|
|
|
taxiwaySegment.begin = closest.glueindex;
|
|
|
|
|
}
|
|
|
|
|
taxiwaySegment.end = closest.glueindex;
|
|
|
|
|
console.log(`Closest : ${closest}`)
|
|
|
|
|
} else {
|
|
|
|
|
event.vertex.latlng['glueindex'] = ++this.editLayer.groundnetLayerGroup.maxId;
|
|
|
|
|
event.vertex.latlng.attributes = {index: event.vertex.latlng.glueindex, isOnRunway: 0};
|
|
|
|
|
this.editLayer.featureLookup[event.vertex.latlng.glueindex] = [];
|
|
|
|
|
this.editLayer.featureLookup[event.vertex.latlng.glueindex].push(event.vertex);
|
|
|
|
|
this.editLayer.featureLookup[event.vertex.latlng.glueindex].push(taxiwaySegment);
|
|
|
|
|
// taxiwaySegment.editor.refresh();
|
|
|
|
|
//taxiwaySegment.editor.reset();
|
|
|
|
|
if (taxiwaySegment.options.attributes.begin === undefined) {
|
|
|
|
|
taxiwaySegment.options.attributes.begin = event.vertex.latlng['glueindex']
|
|
|
|
|
taxiwaySegment.begin = event.vertex.latlng.glueindex;
|
|
|
|
|
} /*else if (taxiwaySegment.options.attributes.end === undefined ||
|
|
|
|
|
Number(taxiwaySegment.getLatLngs()[taxiwaySegment.getLatLngs().length-1].glueindex) !== taxiwaySegment.options.attributes.end ) {
|
|
|
|
|
taxiwaySegment.options.attributes.end = event.vertex.latlng['glueindex']
|
|
|
|
|
taxiwaySegment.end = event.vertex.latlng.glueindex;
|
|
|
|
|
}*/
|
|
|
|
|
event.vertex.latlng['glueindex'] = ++this.editLayer.groundnetLayerGroup.maxId;
|
|
|
|
|
event.vertex.latlng.attributes = { index: event.vertex.latlng.glueindex, isOnRunway: 0 };
|
|
|
|
|
this.editLayer.featureLookup[event.vertex.latlng.glueindex] = [];
|
|
|
|
|
this.editLayer.featureLookup[event.vertex.latlng.glueindex].push(event.vertex);
|
|
|
|
|
this.editLayer.featureLookup[event.vertex.latlng.glueindex].push(taxiwaySegment);
|
|
|
|
|
// taxiwaySegment.editor.refresh();
|
|
|
|
|
//taxiwaySegment.editor.reset();
|
|
|
|
|
if (taxiwaySegment.options.attributes.begin === undefined) {
|
|
|
|
|
taxiwaySegment.options.attributes.begin = event.vertex.latlng['glueindex']
|
|
|
|
|
taxiwaySegment.begin = event.vertex.latlng.glueindex;
|
|
|
|
|
} else if (taxiwaySegment.options.attributes.end === undefined ||
|
|
|
|
|
(taxiwaySegment.getLatLngs()[taxiwaySegment.getLatLngs().length - 1].glueindex &&
|
|
|
|
|
Number(taxiwaySegment.getLatLngs()[taxiwaySegment.getLatLngs().length - 1].glueindex) !== taxiwaySegment.options.attributes.end)) {
|
|
|
|
|
taxiwaySegment.options.attributes.end = event.vertex.latlng['glueindex']
|
|
|
|
|
taxiwaySegment.end = Number(event.vertex.latlng.glueindex);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
this.on('editable:vertex:deleted', event => {
|
|
|
|
|
console.log('editable:vertex:deleted' + event)
|
|
|
|
|
});
|
|
|
|
@ -133,51 +137,51 @@ exports.extendTaxiSegment = function (taxiwaySegment) {
|
|
|
|
|
});
|
|
|
|
|
this.on('editable:vertex:clicked', function (event) {
|
|
|
|
|
var parking = this.featureLookup[event.vertex.latlng.glueindex].filter(n => n instanceof L.ParkingSpot);
|
|
|
|
|
if(parking.length>0) {
|
|
|
|
|
parking[0].selectParking();
|
|
|
|
|
if (parking.length > 0) {
|
|
|
|
|
parking[0].selectParking();
|
|
|
|
|
} else {
|
|
|
|
|
this.editLayer.featureLookup[event.vertex.latlng.glueindex].forEach
|
|
|
|
|
store.default.dispatch('setNode', event.vertex.latlng)
|
|
|
|
|
if(event.vertex._icon!=null) {
|
|
|
|
|
if (event.vertex._icon != null) {
|
|
|
|
|
event.vertex._icon.style['background-color'] = 'red';
|
|
|
|
|
} else if(event.vertex.icon!=null ) {
|
|
|
|
|
if(event.vertex.icon.style!=null) {
|
|
|
|
|
} else if (event.vertex.icon != null) {
|
|
|
|
|
if (event.vertex.icon.style != null) {
|
|
|
|
|
event.vertex.icon.style['background-color'] = 'red';
|
|
|
|
|
} else {
|
|
|
|
|
event.vertex.setStyle({color : 'red'})
|
|
|
|
|
event.vertex.setStyle({ color: 'red' })
|
|
|
|
|
}
|
|
|
|
|
} else if(event.vertex.options.icon!=null ) {
|
|
|
|
|
if(event.vertex.options.icon.style!=null) {
|
|
|
|
|
} else if (event.vertex.options.icon != null) {
|
|
|
|
|
if (event.vertex.options.icon.style != null) {
|
|
|
|
|
event.vertex.options.icon.style['background-color'] = 'red';
|
|
|
|
|
} else {
|
|
|
|
|
event.vertex.options.icon._setIconStyles({color : 'red'})
|
|
|
|
|
event.vertex.options.icon._setIconStyles({ color: 'red' })
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.unwatch = store.default.watch(
|
|
|
|
|
function (state) {
|
|
|
|
|
return state.Editable.data.node;
|
|
|
|
|
return state.Editable.data.node;
|
|
|
|
|
},
|
|
|
|
|
(state) => {
|
|
|
|
|
if( state === undefined ||
|
|
|
|
|
state.index !== Number(event.vertex.latlng.glueindex)) {
|
|
|
|
|
if(event.vertex._icon!=null) {
|
|
|
|
|
event.vertex._icon.style['background-color'] = 'white';
|
|
|
|
|
} else if(event.vertex.icon!=null ) {
|
|
|
|
|
if(event.vertex.icon.style!=null) {
|
|
|
|
|
event.vertex.icon.style['background-color'] = 'white';
|
|
|
|
|
} else {
|
|
|
|
|
event.vertex.setStyle({color : 'white'})
|
|
|
|
|
}
|
|
|
|
|
} else if(event.vertex.options.icon!=null ) {
|
|
|
|
|
if(event.vertex.options.icon.style!=null) {
|
|
|
|
|
event.vertex.options.icon.style['background-color'] = 'white';
|
|
|
|
|
} else {
|
|
|
|
|
event.vertex.options.icon._setIconStyles({color : 'white'})
|
|
|
|
|
}
|
|
|
|
|
(state) => {
|
|
|
|
|
if (state === undefined ||
|
|
|
|
|
state.index !== Number(event.vertex.latlng.glueindex)) {
|
|
|
|
|
if (event.vertex._icon != null) {
|
|
|
|
|
event.vertex._icon.style['background-color'] = 'white';
|
|
|
|
|
} else if (event.vertex.icon != null) {
|
|
|
|
|
if (event.vertex.icon.style != null) {
|
|
|
|
|
event.vertex.icon.style['background-color'] = 'white';
|
|
|
|
|
} else {
|
|
|
|
|
event.vertex.setStyle({ color: 'white' })
|
|
|
|
|
}
|
|
|
|
|
} else if (event.vertex.options.icon != null) {
|
|
|
|
|
if (event.vertex.options.icon.style != null) {
|
|
|
|
|
event.vertex.options.icon.style['background-color'] = 'white';
|
|
|
|
|
} else {
|
|
|
|
|
event.vertex.options.icon._setIconStyles({ color: 'white' })
|
|
|
|
|
}
|
|
|
|
|
this.unwatch();
|
|
|
|
|
}
|
|
|
|
|
this.unwatch();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
,
|
|
|
|
|
{
|
|
|
|
|
deep: true //add this if u need to watch object properties change etc.
|
|
|
|
@ -190,8 +194,8 @@ exports.extendTaxiSegment = function (taxiwaySegment) {
|
|
|
|
|
console.log("Event Target : ", event.target);
|
|
|
|
|
console.log("Middle Marker : ", event.vertex == event.vertex.middleMarker);
|
|
|
|
|
console.log("Middle Marker : ", event.vertex.latlng.glueindex == undefined);
|
|
|
|
|
if(event.vertex.latlng.glueindex == undefined)
|
|
|
|
|
return;
|
|
|
|
|
if (event.vertex.latlng.glueindex == undefined)
|
|
|
|
|
return;
|
|
|
|
|
dragIndex = event.vertex.latlng.glueindex;
|
|
|
|
|
});
|
|
|
|
|
this.on('editable:vertex:dragend', function (event) {
|
|
|
|
@ -206,21 +210,24 @@ exports.extendTaxiSegment = function (taxiwaySegment) {
|
|
|
|
|
}
|
|
|
|
|
dragIndex = -1;
|
|
|
|
|
var parking = this.featureLookup[event.vertex.latlng.glueindex].filter(n => n instanceof L.ParkingSpot);
|
|
|
|
|
if(parking.length>0) {
|
|
|
|
|
parking[0].selectParking();
|
|
|
|
|
if (parking.length > 0) {
|
|
|
|
|
parking[0].selectParking();
|
|
|
|
|
} else {
|
|
|
|
|
store.default.dispatch('setNode', event.vertex.latlng)
|
|
|
|
|
Vue.default.nextTick(function () {
|
|
|
|
|
store.default.dispatch('setNode', event.vertex.latlng)
|
|
|
|
|
})
|
|
|
|
|
//
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
*/
|
|
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
taxiwaySegment.__proto__.follow = function (dragIndex, event) {
|
|
|
|
|
taxiwaySegment.__proto__.follow = function (dragIndex, event) {
|
|
|
|
|
this.featureLookup[dragIndex].forEach(element => {
|
|
|
|
|
if(element !== event.target){
|
|
|
|
|
if (element !== event.target) {
|
|
|
|
|
if (element instanceof L.RunwayNode) {
|
|
|
|
|
element.setLatLng(event.latlng);
|
|
|
|
|
}
|
|
|
|
@ -266,24 +273,24 @@ exports.extendTaxiSegment = function (taxiwaySegment) {
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
taxiwaySegment.__proto__.updateStyle = function() {
|
|
|
|
|
taxiwaySegment.__proto__.updateStyle = function () {
|
|
|
|
|
var style = {};
|
|
|
|
|
if(this.options.attributes.selected){
|
|
|
|
|
if (this.options.attributes.selected) {
|
|
|
|
|
style.color = 'red';
|
|
|
|
|
} else if (this.options.attributes.isPushBackRoute) {
|
|
|
|
|
style.color = 'magenta';
|
|
|
|
|
} else if (this.options.attributes.isPushBackRoute) {
|
|
|
|
|
style.color = 'magenta';
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
style.color = '#3388ff';
|
|
|
|
|
style.color = '#3388ff';
|
|
|
|
|
}
|
|
|
|
|
this.setStyle(style);
|
|
|
|
|
if (this.options.attributes.direction === 'forward') {
|
|
|
|
|
this.setText(null);
|
|
|
|
|
this.setText(' ⮞ ', {repeat: true, attributes: {fill: 'red', size: 30}})
|
|
|
|
|
this.setText(' ⮞ ', { repeat: true, attributes: { fill: 'red', size: 30 } })
|
|
|
|
|
} else if (this.options.attributes.direction === 'backward') {
|
|
|
|
|
this.setText(null);
|
|
|
|
|
this.setText(' ⮜ ', {repeat: true, attributes: {fill: 'red', size: 30}})
|
|
|
|
|
}else {
|
|
|
|
|
this.setText(' ⮜ ', { repeat: true, attributes: { fill: 'red', size: 30 } })
|
|
|
|
|
} else {
|
|
|
|
|
this.setText(null);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|