I am trying to rewrite a MapboxDraw.modes.draw_line_string.clickAnywhere function to allow deletion of a previous point with the SHIFT key in draw_line_string mode. It works, but when it removes the previous point it creates a new one on the new place.
- Draw a line
- Hold shift and click on any previous point
- Will delete the old one create a new one
I want to delete the old point and continue adding new points An example is here https://jsfiddle.net/benderlio/5fxwhkdp/7/
MapboxDraw.modes.draw_line_string.clickAnywhere = function (state, e) {
if (e.originalEvent.shiftKey) {
const line = state.line.coordinates;
const lastClick = line[line.length - 1]
const a = map.project(lastClick)
const res = line.map((i, index) => {
const b = map.project(i)
const d = distance(a, b)
return {
index,
distance: d
};
}).find(i => i.distance < 5 && i.distance > 0)
console.log('res', res);
if (res) {
//state.line.removeCoordinate(res.index)
state.line.coordinates = state.line.coordinates.filter((i, index) => index !== res.index)
}
} else {
console.log('NO SHiFT');
if (state.currentVertexPosition > 0 && isEventAtCoordinates(e, state.line.coordinates[state.currentVertexPosition - 1]) ||
state.direction === 'backwards' && isEventAtCoordinates(e, state.line.coordinates[state.currentVertexPosition + 1])) {
return this.changeMode('simple_select', { featureIds: [state.line.id] });
}
this.updateUIClasses({ mouse: 'add' });
state.line.updateCoordinate(state.currentVertexPosition, e.lngLat.lng, e.lngLat.lat);
if (state.direction === 'forward') {
state.currentVertexPosition++;
state.line.updateCoordinate(state.currentVertexPosition, e.lngLat.lng, e.lngLat.lat);
} else {
state.line.addCoordinate(0, e.lngLat.lng, e.lngLat.lat);
}
}
};
UPD: ok, the point is to set currentVertexPosition
state.line.coordinates.splice(res.index,1)
state.currentVertexPosition = state.currentVertexPosition - 1