Selection

This commit is contained in:
portree_kid 2020-06-11 22:18:02 +02:00
parent 3f9183439f
commit d4c0e59779
5 changed files with 96 additions and 95 deletions

View File

@ -371,22 +371,20 @@
element.updateWheelPos();
}
else if (element instanceof L.Polyline) {
if (Number(element.begin) === Number(index)) {
element.getLatLngs()[0].update(latlng);
element._latlngs.forEach((e1, index1) => {
if (e1.attributes.index===index && (
latlng.lat !== element.getLatLngs()[index1].lat ||
latlng.lng !== element.getLatLngs()[index1].lng
)
) {
element.getLatLngs()[index1].update(latlng);
element.setLatLngs(element.getLatLngs());
element.updateBeginVertex(latlng);
element.editor.refresh();
element.editor.reset();
element.updateMiddle();
}
if (Number(element.end) === Number(index)) {
element.getLatLngs()[element.getLatLngs().length - 1].update(latlng);
element.setLatLngs(element.getLatLngs());
element.updateEndVertex(latlng);
element.editor.refresh();
element.editor.reset();
element.updateMiddle();
}
})
} else if (element instanceof L.Editable.VertexMarker) {
/*
console.log(element);
@ -693,7 +691,6 @@
element._latlngs.forEach(element => {
if(element.__vertex && Number(element.glueindex) === Number(nIndex)){
if (this.$store.state.Editable.data.node.coords) {
console.log('Cords : ' + this.$store.state.Editable.data.node.coords);
this.setPointCoords(this.$store.state.Editable.index, this.$store.state.Editable.data.node.coords)
var position = new Coordinates(this.$store.state.Editable.data.node.coords);
latlng = {lat: position.latitude, lng: position.longitude };

View File

@ -7,6 +7,12 @@ const store = require('../store');
var $ = require('jquery');
L.HoldNode = L.Marker.extend({
select() {
this._icon.childNodes[0].style['background-color'] = 'red';
},
deselect() {
this._icon.childNodes[0].style['background-color'] = '#4838cc';
},
addListeners: function () {
this.on('editable:drawing:move', function (event) {
console.log("Move : ", event);

View File

@ -159,27 +159,17 @@ L.ParkingSpot = L.Circle.extend({
});
this.on('click', function (event) {
console.debug("Click Parking : " + event.target);
if (Number(store.default.state.Editable.index) >= 0 &&
this.featureLookup[store.default.state.Editable.index]!==undefined) {
this.featureLookup[store.default.state.Editable.index].forEach(element => {
if(element.deselect !== undefined) {
element.deselect();
}
});
}
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;
},
(state) => {
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.
}
);
});
this.on('editable:vertex:clicked', function (event) {
console.debug(this.featureLookup[event.vertex.glueindex]);

View File

@ -15,6 +15,12 @@ L.RunwayNode = L.Marker.extend({
});
this.on('click', function (event) {
console.log("Click Runway : ", event);
if (Number(store.default.state.Editable.index) >= 0 &&
this.featureLookup[store.default.state.Editable.index]!==undefined) {
this.featureLookup[store.default.state.Editable.index].forEach(element => {
element.deselect();
});
}
event.target.options.attributes.selected = true;
if (store.default.state.Editable.index !== event.target.options.attributes.index) {
store.default.dispatch('setRunway', event.target.options.attributes);

View File

@ -43,9 +43,61 @@ exports.extendTaxiSegment = function (taxiwaySegment) {
this.featureLookup[this.end].push(this);
this.bidirectional = true;
};
taxiwaySegment.__proto__.select = function () {
this.options.attributes.selected = true;
this.updateStyle();
};
taxiwaySegment.__proto__.selectVertex = function () {
this.getLatLngs().forEach( element => {
if (Number(element.glueindex) === store.default.state.Editable.index) {
if (element.__vertex._icon != null) {
element.__vertex._icon.style.setProperty('background-color','red');
element.__vertex._icon.style.setProperty('color','red');
} else if (element.__vertex !== undefined && element.__vertex.icon != null) {
if (element.__vertex.icon.style != null) {
element.__vertex.icon.style['background-color'] = 'red';
} else {
element.__vertex.setStyle({ color: 'red' })
}
} else if (element.__vertex.options.icon != null) {
if (element.__vertex.options.icon.style != null) {
element.__vertex.options.icon.style['background-color'] = 'red';
} else {
element.__vertex.options.icon._setIconStyles({ color: 'red' })
}
}
}
});
};
taxiwaySegment.__proto__.deselect = function () {
this.options.attributes.selected = false;
this.updateStyle();
this.getLatLngs().forEach( element => {
if (element.__vertex._icon != null) {
element.__vertex._icon.style['background-color'] = 'white';
} else if (element.vertex.icon != null) {
if (element.__vertex.icon.style != null) {
element.__vertex.icon.style['background-color'] = 'white';
} else {
element.__vertex.setStyle({ color: 'white' })
}
} else if (element.__vertex.options.icon != null) {
if (element.__vertex.options.icon.style != null) {
element.__vertex.options.icon.style['background-color'] = 'white';
} else {
element.__vertex.options.icon._setIconStyles({ color: 'white' })
}
}
});
};
taxiwaySegment.__proto__.addListeners = function () {
this.on('click', function (event) {
event.target.setStyle({ color: 'red' });
if (Number(store.default.state.Editable.index) >= 0) {
this.featureLookup[store.default.state.Editable.index].forEach(element => {
element.deselect();
});
}
event.target.select();
console.log("Click : " + event.target);
if (store.default.state.Editable.data.arc === undefined ||
store.default.state.Editable.data.arc !== event.target.options.attributes) {
@ -53,28 +105,11 @@ exports.extendTaxiSegment = function (taxiwaySegment) {
event.target.options.attributes = {};
}
event.target.options.attributes.index = event.target._leaflet_id;
this.editLayer.featureLookup[event.target._leaflet_id] = [];
this.featureLookup[event.target._leaflet_id].push(this);
event.target.options.attributes.selected = true;
store.default.dispatch('setArc', event.target.options.attributes);
this.unwatch = store.default.watch(
function (state) {
return state.Editable.data.arc;
},
(arc) => {
console.debug(arc);
// Reset colour
if (event.target instanceof L.Polyline &&
event.target.options.attributes &&
event.target.options.attributes.selected) {
event.target.options.attributes.selected = false;
event.target.updateStyle();
this.unwatch();
}
}
,
{
deep: true //add this if u need to watch object properties change etc.
}
);
}
});
this.on('editable:drawing:move', function (event) {
@ -136,57 +171,24 @@ exports.extendTaxiSegment = function (taxiwaySegment) {
console.log(event)
});
this.on('editable:vertex:clicked', function (event) {
if (Number(store.default.state.Editable.index) >= 0) {
this.featureLookup[store.default.state.Editable.index].forEach(element => {
if(element.deselect !== undefined) {
element.deselect();
}
});
}
var hold = this.featureLookup[event.vertex.latlng.glueindex].filter(n => n instanceof L.HoldNode);
if (hold.length > 0) {
hold[0].select();
}
var parking = this.featureLookup[event.vertex.latlng.glueindex].filter(n => n instanceof L.ParkingSpot);
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) {
event.vertex._icon.style['background-color'] = 'red';
} 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' })
}
} 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' })
}
}
this.unwatch = store.default.watch(
function (state) {
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' })
}
}
this.unwatch();
}
}
,
{
deep: true //add this if u need to watch object properties change etc.
}
);
this.selectVertex()
}
});
var dragIndex = -1;