Selection
This commit is contained in:
parent
3f9183439f
commit
d4c0e59779
@ -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 };
|
||||
|
@ -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);
|
||||
|
@ -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]);
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user