Add a new mode for drawing a circle #4
Conversation
| const Constants = require('@mapbox/mapbox-gl-draw/src/constants'); | ||
| const circle = require('@turf/circle'); | ||
|
|
||
| describe('CircleMode tests', () => { |
There was a problem hiding this comment.
Rename the mode to ScaleCircleMode
lib/modes/ScaleCircleMode.js
Outdated
| ScaleCircleMode.onSetup = function () { | ||
| const polygon = this.newFeature({ | ||
| type: Constants.geojsonTypes.FEATURE, | ||
| properties: { |
There was a problem hiding this comment.
add the radius too, to the properties.
lib/modes/ScaleCircleMode.js
Outdated
|
|
||
| // Compute circle attributes | ||
| const radius = turf.distance(startPoint, currentPoint) / 2; | ||
| const midPoint = turf.midpoint(startPoint, currentPoint); |
There was a problem hiding this comment.
usability issue: better to have midpoint as the center of the circle and radius as just the distance between the current point and the start point
lib/modes/ScaleCircleMode.js
Outdated
|
|
||
| // Reset circle | ||
| state.polygon.incomingCoords(circleFeature.geometry.coordinates); | ||
| state.polygon.properties.center = midPoint.geometry.coordinates; |
There was a problem hiding this comment.
compute the radius in kms and add it to the properties
lib/modes/ScaleCircleMode.js
Outdated
|
|
||
| ScaleCircleMode.onClick = function (state, e) { | ||
| // First click | ||
| if (state.currentVertexPosition === 0) { |
There was a problem hiding this comment.
usability: better to add this in onMouseDown
| if (state.currentVertexPosition === 0) { | |
| ScaleCircleMode.onMouseDown = ScaleCircleMode.onTouchStart = function (state, e) { | |
| if (state.currentVertexPosition === 0) { |
lib/modes/ScaleCircleMode.js
Outdated
| } | ||
| // Second click | ||
| else { | ||
| return this.changeMode(Constants.modes.SIMPLE_SELECT, {featureIds: [state.polygon.id]}); |
There was a problem hiding this comment.
move this to onMouseUp
| return this.changeMode(Constants.modes.SIMPLE_SELECT, {featureIds: [state.polygon.id]}); | |
| ScaleCircleMode.onMouseUp = ScaleCircleMode.onTouchEnd = function (state, e) { | |
| return this.changeMode(Constants.modes.SIMPLE_SELECT, {featureIds: [state.polygon.id]}); | |
| } |
lib/modes/ScaleCircleMode.js
Outdated
| }; | ||
|
|
||
| ScaleCircleMode.onMouseMove = function (state, e) { | ||
| if (state.currentVertexPosition === 0) { |
There was a problem hiding this comment.
move all this processing to dragMove and touchmove
| if (state.currentVertexPosition === 0) { | |
| ScaleCircleMode.dragMove = ScaleCircleMode.onTouchMove = function (state, e) { | |
| if (state.currentVertexPosition === 0) { |
package.json
Outdated
| @@ -22,7 +22,8 @@ | |||
| "@turf/circle": "^6.0.1", | |||
| "@turf/distance": "^6.0.1", | |||
| "@turf/helpers": "^6.1.4", | |||
| "@turf/length": "^6.0.2" | |||
| "@turf/length": "^6.0.2", | |||
| "@turf/turf": "^5.1.6" | |||
There was a problem hiding this comment.
import the modules that are necessary, turf is a huge library which increases the build size significantly. revert the package-lock.json file and the package.json before adding the dependencies.
Summary
I just make a new circle mode (ScaleCircleMode) for drawing a circle by moving cursor. Here's the gif demo: