|
|
|
@ -25,10 +25,10 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
if (this.direction === undefined ) {
|
|
|
|
if (this.direction === undefined ) {
|
|
|
|
var center = this._latlng;
|
|
|
|
var center = this._latlng;
|
|
|
|
var options = { units: 'kilometers' };
|
|
|
|
var options = { units: 'kilometers' };
|
|
|
|
|
|
|
|
|
|
|
|
var start = turf.destination([center.lng, center.lat], this.options.attributes.radius / 1000, this.normalizeAngle(this.options.attributes.heading+180), options);
|
|
|
|
var start = turf.destination([center.lng, center.lat], this.options.attributes.radius / 1000, this.normalizeAngle(this.options.attributes.heading+180), options);
|
|
|
|
var end = turf.destination([center.lng, center.lat], this.options.attributes.radius / 1000, this.normalizeAngle(this.options.attributes.heading), options);
|
|
|
|
var end = turf.destination([center.lng, center.lat], this.options.attributes.radius / 1000, this.normalizeAngle(this.options.attributes.heading), options);
|
|
|
|
// Resize, since leaflet is wrong
|
|
|
|
// Resize, since leaflet is wrong
|
|
|
|
var rad2 = center.distanceTo(this.turfToLatLng(end), options);
|
|
|
|
var rad2 = center.distanceTo(this.turfToLatLng(end), options);
|
|
|
|
console.debug('Dist ', center, [center.lng, center.lat], end.geometry.coordinates, this.options.attributes.radius, rad2);
|
|
|
|
console.debug('Dist ', center, [center.lng, center.lat], end.geometry.coordinates, this.options.attributes.radius, rad2);
|
|
|
|
this.setRadius(rad2);
|
|
|
|
this.setRadius(rad2);
|
|
|
|
@ -53,7 +53,7 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
console.debug("Update Middle ", this.editor.editLayer._layers[0]);
|
|
|
|
console.debug("Update Middle ", this.editor.editLayer._layers[0]);
|
|
|
|
var o = this.editor.editLayer._layers;
|
|
|
|
var o = this.editor.editLayer._layers;
|
|
|
|
|
|
|
|
|
|
|
|
console.debug(o);
|
|
|
|
console.debug(o);
|
|
|
|
for (var key in o) {
|
|
|
|
for (var key in o) {
|
|
|
|
if (o.hasOwnProperty(key)) {
|
|
|
|
if (o.hasOwnProperty(key)) {
|
|
|
|
@ -63,7 +63,7 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
console.debug(o[key] == this.direction);
|
|
|
|
console.debug(o[key] == this.direction);
|
|
|
|
if (this.editor._resizeLatLng.__vertex!=o[key] &&
|
|
|
|
if (this.editor._resizeLatLng.__vertex!=o[key] &&
|
|
|
|
o[key] != this.direction &&
|
|
|
|
o[key] != this.direction &&
|
|
|
|
o[key] != this.frontWheel &&
|
|
|
|
o[key] != this.frontWheel &&
|
|
|
|
o[key] != this.box) {
|
|
|
|
o[key] != this.box) {
|
|
|
|
o[key].setLatLng(this.getLatLng());
|
|
|
|
o[key].setLatLng(this.getLatLng());
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -72,9 +72,9 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
//Object.values(o);
|
|
|
|
//Object.values(o);
|
|
|
|
/*
|
|
|
|
/*
|
|
|
|
.forEach(vertex => {
|
|
|
|
.forEach(vertex => {
|
|
|
|
console.debug(this.editor._resizeLatLng.__vertex==vertex);
|
|
|
|
console.debug(this.editor._resizeLatLng.__vertex==vertex);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
} catch (error) {
|
|
|
|
} catch (error) {
|
|
|
|
console.error(error);
|
|
|
|
console.error(error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -85,15 +85,15 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
},
|
|
|
|
},
|
|
|
|
updateHeading(heading) {
|
|
|
|
updateHeading(heading) {
|
|
|
|
this.options.attributes.heading = heading;
|
|
|
|
this.options.attributes.heading = heading;
|
|
|
|
this.updateVertexFromDirection();
|
|
|
|
this.updateVertexFromDirection();
|
|
|
|
this.updateWheelPos();
|
|
|
|
this.updateWheelPos();
|
|
|
|
this.updateBox();
|
|
|
|
this.updateBox();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
updateRadius(radius) {
|
|
|
|
updateRadius(radius) {
|
|
|
|
this._mRadius = radius;
|
|
|
|
this._mRadius = radius;
|
|
|
|
this.updateDirectionFromVertex();
|
|
|
|
this.updateDirectionFromVertex();
|
|
|
|
this.updateVertexFromDirection();
|
|
|
|
this.updateVertexFromDirection();
|
|
|
|
this.updateWheelPos();
|
|
|
|
this.updateWheelPos();
|
|
|
|
this.updateBox();
|
|
|
|
this.updateBox();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// Update the direction vertex from the direction
|
|
|
|
// Update the direction vertex from the direction
|
|
|
|
@ -131,14 +131,15 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
updateWheelPos() {
|
|
|
|
updateWheelPos() {
|
|
|
|
var start = this._latlng;
|
|
|
|
var start = this._latlng;
|
|
|
|
var options = { units: 'kilometers' };
|
|
|
|
var options = { units: 'kilometers' };
|
|
|
|
const parkingSize = validRadii.indexOf(this.options.attributes.radius);
|
|
|
|
const parkingSize = validRadii.indexOf(this.options.attributes.radius);
|
|
|
|
if (parkingSize>=0) {
|
|
|
|
if (parkingSize>=0) {
|
|
|
|
var frontWheelEnd = turf.destination([start.lng, start.lat], validN2M[parkingSize] / 1000, this.options.attributes.heading, options);
|
|
|
|
var frontWheelEnd = turf.destination([start.lng, start.lat], validN2M[parkingSize] / 1000, this.options.attributes.heading, options);
|
|
|
|
|
|
|
|
|
|
|
|
if(this.frontWheel!==undefined) {
|
|
|
|
if(this.frontWheel!==undefined) {
|
|
|
|
this.frontWheel.setLatLng(this.turfToLatLng(frontWheelEnd));
|
|
|
|
this.frontWheel.setLatLng(this.turfToLatLng(frontWheelEnd));
|
|
|
|
|
|
|
|
return this.turfToLatLng(frontWheelEnd);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
updateBox() {
|
|
|
|
updateBox() {
|
|
|
|
var start = [this._latlng.lng, this._latlng.lat];
|
|
|
|
var start = [this._latlng.lng, this._latlng.lat];
|
|
|
|
@ -176,7 +177,7 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
var latlngs = [leftBack, rightBack, rightMiddle, rightIntermediate, rightFront, leftFront, leftIntermediate, leftMiddle].map(l => this.turfToLatLng(l));
|
|
|
|
var latlngs = [leftBack, rightBack, rightMiddle, rightIntermediate, rightFront, leftFront, leftIntermediate, leftMiddle].map(l => this.turfToLatLng(l));
|
|
|
|
this.box = L.polygon(latlngs);
|
|
|
|
this.box = L.polygon(latlngs);
|
|
|
|
//this.box.addTo(this.editor.editLayer);
|
|
|
|
//this.box.addTo(this.editor.editLayer);
|
|
|
|
this.box._parkingSpot = this;
|
|
|
|
this.box._parkingSpot = this;
|
|
|
|
this.box.on('click', function (event) {
|
|
|
|
this.box.on('click', function (event) {
|
|
|
|
console.debug("Click Parking Box : " + event.target);
|
|
|
|
console.debug("Click Parking Box : " + event.target);
|
|
|
|
if (Number(store.default.state.Editable.index) >= 0 &&
|
|
|
|
if (Number(store.default.state.Editable.index) >= 0 &&
|
|
|
|
@ -188,7 +189,7 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
event.target._parkingSpot.select();
|
|
|
|
event.target._parkingSpot.select();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
if(this.editor && this.editor.editLayer) {
|
|
|
|
if(this.editor && this.editor.editLayer) {
|
|
|
|
this.box.addTo(this.editor.editLayer);
|
|
|
|
this.box.addTo(this.editor.editLayer);
|
|
|
|
@ -199,7 +200,7 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
console.debug(latlngs);
|
|
|
|
console.debug(latlngs);
|
|
|
|
this.box.setLatLngs(latlngs);
|
|
|
|
this.box.setLatLngs(latlngs);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
normalizeAngle( angle ) {
|
|
|
|
normalizeAngle( angle ) {
|
|
|
|
if(angle >= 180) {
|
|
|
|
if(angle >= 180) {
|
|
|
|
@ -217,21 +218,25 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
style['color'] = 'red';
|
|
|
|
style['color'] = 'red';
|
|
|
|
this.setStyle(style);
|
|
|
|
this.setStyle(style);
|
|
|
|
if(this.direction) {
|
|
|
|
if(this.direction) {
|
|
|
|
this.direction.setStyle(style);
|
|
|
|
this.direction.setStyle(style);
|
|
|
|
this.frontWheel.setStyle(style);
|
|
|
|
this.frontWheel.setStyle(style);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.updateWheelPos();
|
|
|
|
var wheelPos = this.updateWheelPos();
|
|
|
|
|
|
|
|
if(wheelPos) {
|
|
|
|
|
|
|
|
store.default.dispatch('setParkingNoseCoords', wheelPos.lat.toFixed(6) + ' ' + wheelPos.lng.toFixed(6));
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
this.updateBox();
|
|
|
|
this.updateBox();
|
|
|
|
if(this.box) {
|
|
|
|
if(this.box) {
|
|
|
|
this.box.setStyle(style);
|
|
|
|
this.box.setStyle(style);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
deselect() {
|
|
|
|
deselect() {
|
|
|
|
var style = {};
|
|
|
|
var style = {};
|
|
|
|
style['color'] = '#3388ff';
|
|
|
|
style['color'] = '#3388ff';
|
|
|
|
this.setStyle(style);
|
|
|
|
this.setStyle(style);
|
|
|
|
if(this.direction) {
|
|
|
|
if(this.direction) {
|
|
|
|
this.direction.setStyle(style);
|
|
|
|
this.direction.setStyle(style);
|
|
|
|
this.frontWheel.setStyle(style);
|
|
|
|
this.frontWheel.setStyle(style);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.updateWheelPos();
|
|
|
|
this.updateWheelPos();
|
|
|
|
@ -267,11 +272,11 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
event.target.updateVertexFromDirection();
|
|
|
|
event.target.updateVertexFromDirection();
|
|
|
|
event.target.updateWheelPos();
|
|
|
|
event.target.updateWheelPos();
|
|
|
|
event.target.updateBox();
|
|
|
|
event.target.updateBox();
|
|
|
|
this.follow(event.target.id, event);
|
|
|
|
this.follow(event.target.id, event);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
else if(event.target.editor._resizeLatLng.__vertex._icon === event.sourceTarget._element) {
|
|
|
|
else if(event.target.editor._resizeLatLng.__vertex._icon === event.sourceTarget._element) {
|
|
|
|
event.target.updateDirectionFromVertex();
|
|
|
|
event.target.updateDirectionFromVertex();
|
|
|
|
event.target.updateVertexFromDirection();
|
|
|
|
event.target.updateVertexFromDirection();
|
|
|
|
event.target.updateWheelPos();
|
|
|
|
event.target.updateWheelPos();
|
|
|
|
event.target.updateBox();
|
|
|
|
event.target.updateBox();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -290,14 +295,15 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
event.target.box.removeFrom(event.target._map);
|
|
|
|
event.target.box.removeFrom(event.target._map);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.on('editable:vertex:drag', function (event) {
|
|
|
|
this.on('editable:vertex:drag', function (event) {
|
|
|
|
console.debug("Drag Parking : ", event);
|
|
|
|
console.debug("Drag Parking : ", event);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.on('editable:vertex:dragend', function (event) {
|
|
|
|
this.on('editable:vertex:dragend', function (event) {
|
|
|
|
console.debug("DragEnd Parking : ", event);
|
|
|
|
console.debug("DragEnd Parking : ", event);
|
|
|
|
store.default.dispatch('setParking', event.target.options.attributes);
|
|
|
|
store.default.dispatch('setParking', event.target.options.attributes);
|
|
|
|
store.default.dispatch('setParkingCoords', event.target.getLatLng().lat.toFixed(6) + ' ' + event.target.getLatLng().lng.toFixed(6));
|
|
|
|
store.default.dispatch('setParkingCoords', event.target.getLatLng().lat.toFixed(6) + ' ' + event.target.getLatLng().lng.toFixed(6));
|
|
|
|
event.target.updateWheelPos();
|
|
|
|
var wheelPos = event.target.updateWheelPos();
|
|
|
|
|
|
|
|
store.default.dispatch('setParkingNoseCoords', wheelPos.lat.toFixed(6) + ' ' + wheelPos.lng.toFixed(6));
|
|
|
|
event.target.updateBox();
|
|
|
|
event.target.updateBox();
|
|
|
|
/*
|
|
|
|
/*
|
|
|
|
store.default.dispatch('setParkingHeading', this.options.attributes.heading)
|
|
|
|
store.default.dispatch('setParkingHeading', this.options.attributes.heading)
|
|
|
|
@ -314,8 +320,8 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
event.target.select();
|
|
|
|
event.target.select();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.on('editable:vertex:clicked', function (event) {
|
|
|
|
this.on('editable:vertex:clicked', function (event) {
|
|
|
|
console.debug(this.featureLookup[event.vertex.glueindex]);
|
|
|
|
console.debug(this.featureLookup[event.vertex.glueindex]);
|
|
|
|
if (Number(store.default.state.Editable.index) >= 0 &&
|
|
|
|
if (Number(store.default.state.Editable.index) >= 0 &&
|
|
|
|
@ -330,14 +336,14 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
if(event.target.editor._resizeLatLng.__vertex._icon !== event.sourceTarget._element){
|
|
|
|
if(event.target.editor._resizeLatLng.__vertex._icon !== event.sourceTarget._element){
|
|
|
|
event.vertex._icon.style['background-color'] = 'red';
|
|
|
|
event.vertex._icon.style['background-color'] = 'red';
|
|
|
|
store.default.dispatch('setParking', event.target.options.attributes);
|
|
|
|
store.default.dispatch('setParking', event.target.options.attributes);
|
|
|
|
this.select();
|
|
|
|
this.select();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
this.on('editable:disable', function (event) {
|
|
|
|
this.on('editable:disable', function (event) {
|
|
|
|
event.target.removeDirection();
|
|
|
|
event.target.removeDirection();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
updateStyle: function () {
|
|
|
|
updateStyle: function () {
|
|
|
|
|
|
|
|
|
|
|
|
@ -357,14 +363,14 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
return {lat: turfPoint.geometry.coordinates[1], lng: turfPoint.geometry.coordinates[0]};
|
|
|
|
return {lat: turfPoint.geometry.coordinates[1], lng: turfPoint.geometry.coordinates[0]};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
extensions: function (editLayer) {
|
|
|
|
extensions: function (editLayer) {
|
|
|
|
this.createDirection();
|
|
|
|
this.createDirection();
|
|
|
|
if (typeof this.featureLookup[this.id] === 'undefined') {
|
|
|
|
if (typeof this.featureLookup[this.id] === 'undefined') {
|
|
|
|
this.featureLookup[this.id] = [];
|
|
|
|
this.featureLookup[this.id] = [];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.featureLookup[this.id].push(this);
|
|
|
|
this.featureLookup[this.id].push(this);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
follow (dragIndex, event) {
|
|
|
|
follow (dragIndex, event) {
|
|
|
|
@ -410,7 +416,7 @@ L.ParkingSpot = L.Circle.extend({
|
|
|
|
});
|
|
|
|
});
|
|
|
|
element.editor.feature.setLatLngs(element.latlngs);
|
|
|
|
element.editor.feature.setLatLngs(element.latlngs);
|
|
|
|
element.editor.feature.updateMiddle();
|
|
|
|
element.editor.feature.updateMiddle();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -445,21 +451,21 @@ lat="N44 52.799"
|
|
|
|
lon="W93 11.947"
|
|
|
|
lon="W93 11.947"
|
|
|
|
heading="-147.51"
|
|
|
|
heading="-147.51"
|
|
|
|
radius="18"
|
|
|
|
radius="18"
|
|
|
|
pushBackRoute="541"
|
|
|
|
pushBackRoute="541"
|
|
|
|
airlineCodes="VIR,KAL,DAL,KLM" />
|
|
|
|
airlineCodes="VIR,KAL,DAL,KLM" />
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
//circle.attributes = { type: n.attr('type'), name: n.attr('name'), radius: Number(n.attr('radius')), airlineCodes: n.attr('airlineCodes'), heading: Number(n.attr('heading')) };
|
|
|
|
//circle.attributes = { type: n.attr('type'), name: n.attr('name'), radius: Number(n.attr('radius')), airlineCodes: n.attr('airlineCodes'), heading: Number(n.attr('heading')) };
|
|
|
|
|
|
|
|
|
|
|
|
$.each( n.attrs, function( key, value ) {
|
|
|
|
$.each( n.attrs, function( key, value ) {
|
|
|
|
console.debug( '$', circle.id, key , value);
|
|
|
|
console.debug( '$', circle.id, key , value);
|
|
|
|
|
|
|
|
|
|
|
|
if(isNaN(value))
|
|
|
|
if(isNaN(value))
|
|
|
|
circle.options.attributes[ key ] = value;
|
|
|
|
circle.options.attributes[ key ] = value;
|
|
|
|
else
|
|
|
|
else
|
|
|
|
circle.options.attributes[ key ] = Number( value);
|
|
|
|
circle.options.attributes[ key ] = Number( value);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
circle.addListeners();
|
|
|
|
circle.addListeners();
|
|
|
|
|
|
|
|
|
|
|
|
circle.addTo(layerGroup);
|
|
|
|
circle.addTo(layerGroup);
|
|
|
|
return circle;
|
|
|
|
return circle;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
Keith Paterson
4 years ago