mapbox-gl-draw
mapbox-gl-draw copied to clipboard
Allow the user to delete the last point while drawing a line or polygon.
Most drawing tools allow the user to delete the last point while actively drawing a line or polygon.
Currently the delete key and escape removes the entire line or polygon.
Ideally, this new feature would just use the delete key to remove the last point. If the delete key is repeatedly hit then each subsequent point would be removed until the whole drawing is removed.
This would then still leave the escape key to remove the entire drawing.
I'm locking functionality for v1.0.0, but I want to note that I view this as a BUG and not as an enhancement.
@mcwhittemore Just to confirm, is the escape key supposed to remove the entire drawing or do you consider this part of the bug?
We're using the boundlessgeo-sdk and are having trouble re-enabling drawing mode after escape was pressed.
@timotgl - esc should cancel drawing and delete the feature in progress. delete should delete the last coordinate added.
re-enabling drawing should be just a call to draw.changeMode.
@mcwhittemore Do you know if there is currently a workaround for this? I'd like to be able to use the delete key to remove the node. It seems that the only way around having delete remove the entire polygon is to provide a custom mode and override the onTrash() method, but there is no way to know what triggered trash(), so this isn't really helpful.
Each mode is responsible for building the shape of choice and hence would also need to be responsible for choosing how to handle an "undo the last point" type action. With only a little work you can extend an existing mode and add your custom flare.
Have a look at the current polygon mode:
DrawPolygon.onTrash = function(state) {
this.deleteFeature([state.polygon.id], { silent: true });
this.changeMode(Constants.modes.SIMPLE_SELECT);
};
onTrash is called when the delete button is clicked or when draw.trash() is called. You could modify the modes of your choosing to instead remove the last placed point. For example:
DrawPolygon.onTrash = function onTrash(state) {
if (state.currentVertexPosition <= 1) {
this.deleteFeature([state.polygon.id], { silent: true });
this.changeMode(Constants.modes.SIMPLE_SELECT);
} else {
const ring = state.polygon.coordinates[0];
if (ring) {
state.polygon.changed();
state.currentVertexPosition -= 1;
ring.splice(state.currentVertexPosition, 1);
}
}
};