Skip to content

Enable rectangle drawing on drag #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AliceR wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Enable rectangle drawing on drag #6

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 48 additions & 26 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
const doubleClickZoom = {
const mapInteraction = {
enable: ctx => {
setTimeout(() => {
// First check we've got a map and some context.
if (
!ctx.map ||
!ctx.map.doubleClickZoom ||
!ctx.map.dragPan ||
!ctx._ctx ||
!ctx._ctx.store ||
!ctx._ctx.store.getInitialConfigValue
Expand All @@ -13,13 +14,15 @@ const doubleClickZoom = {
// Now check initial state wasn't false (we leave it disabled if so)
if (!ctx._ctx.store.getInitialConfigValue("doubleClickZoom")) return;
ctx.map.doubleClickZoom.enable();
ctx.map.dragPan.enable();
}, 0);
},
disable(ctx) {
setTimeout(() => {
if (!ctx.map || !ctx.map.doubleClickZoom) return;
if (!ctx.map || !ctx.map.doubleClickZoom || !ctx.map.dragPan) return;
// Always disable here, as it's necessary in some cases.
ctx.map.doubleClickZoom.disable();
ctx.map.dragPan.disable();
}, 0);
}
};
Expand All @@ -37,7 +40,7 @@ const DrawRectangle = {
});
this.addFeature(rectangle);
this.clearSelectedFeatures();
doubleClickZoom.disable(this);
mapInteraction.disable(this);
this.updateUIClasses({ mouse: "add" });
this.setActionableState({
trash: true
Expand Down Expand Up @@ -70,40 +73,35 @@ const DrawRectangle = {
const startPoint = [e.lngLat.lng, e.lngLat.lat];
state.startPoint = startPoint;
},
onMouseMove: function(state, e) {
onDrag: function(state, e) {
this.updateUIClasses({ mouse: 'add' });
// on first click, save clicked point coords as startpoint for rectangle
if (!state.startPoint) state.startPoint = [e.lngLat.lng, e.lngLat.lat];
if (state.startPoint) {
expandRectangle(state, e);
}
state.endPoint = [e.lngLat.lng, e.lngLat.lat];
},
onMouseUp: function(state, e) {
if (state.startPoint && state.endPoint) {
this.updateUIClasses({ mouse: "pointer" });
this.changeMode("simple_select", { featuresId: state.rectangle.id });
}
},
onMouseMove: function (state, e) {
// if startPoint, update the feature coordinates, using the bounding box concept
// we are simply using the startingPoint coordinates and the current Mouse Position
// coordinates to calculate the bounding box on the fly, which will be our rectangle
if (state.startPoint) {
state.rectangle.updateCoordinate(
"0.0",
state.startPoint[0],
state.startPoint[1]
); //minX, minY - the starting point
state.rectangle.updateCoordinate(
"0.1",
e.lngLat.lng,
state.startPoint[1]
); // maxX, minY
state.rectangle.updateCoordinate("0.2", e.lngLat.lng, e.lngLat.lat); // maxX, maxY
state.rectangle.updateCoordinate(
"0.3",
state.startPoint[0],
e.lngLat.lat
); // minX,maxY
state.rectangle.updateCoordinate(
"0.4",
state.startPoint[0],
state.startPoint[1]
); //minX,minY - ending point (equals to starting point)
expandRectangle(state, e);
}
},
// Whenever a user clicks on a key while focused on the map, it will be sent here
onKeyUp: function(state, e) {
if (e.keyCode === 27) return this.changeMode("simple_select");
},
onStop: function(state) {
doubleClickZoom.enable(this);
mapInteraction.enable(this);
this.updateUIClasses({ mouse: "none" });
this.activateUIButton();

Expand Down Expand Up @@ -137,3 +135,27 @@ const DrawRectangle = {
};

export default DrawRectangle;

function expandRectangle(state, e) {
state.rectangle.updateCoordinate(
'0.0',
state.startPoint[0],
state.startPoint[1]
); // minX, minY - the starting point
state.rectangle.updateCoordinate(
'0.1',
e.lngLat.lng,
state.startPoint[1]
); // maxX, minY
state.rectangle.updateCoordinate('0.2', e.lngLat.lng, e.lngLat.lat); // maxX, maxY
state.rectangle.updateCoordinate(
'0.3',
state.startPoint[0],
e.lngLat.lat
); // minX,maxY
state.rectangle.updateCoordinate(
'0.4',
state.startPoint[0],
state.startPoint[1]
);
}