mapbox / mapbox/mapbox-gl-draw
Customise / hook into "direct_select" mode
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 612
- Avg merge
- 8d 9h
- Merged PRs (30d)
- 5
Description
Hi, I have a specific case where I need to "highjack"
DirectSelect.onDrag = function(state, e) {
and pass custom data or at least change the "state" based on an application state. When the user selects a "feature" and drags a vertex around, the vertex needs to snap onto a grid (the coordinates (lngLat) need to be overwritten). Drawing based on a grid is working as I could create a "custom mode" for this. But when the user selects a "feature", "direct_select" mode becomes active and handles the drag via above.
I tried (in an react app, but my question is unrelated to react):
1. to hook into "onDrag" of DirectSelect
Overriding: https://github.com/mapbox/mapbox-gl-draw/blob/master/src/modes/direct_select.js
render(
const gridOn = state.gridOn;
const grid = props.grid;
DirectSelect.onDrag = (state, e) => {
// passing app state to mode
state.gridEnabled = gridOn;
state.grid = grid;
// use grid info and set coordinates...
}
return...
Above is not working because the scope is different.
2. overwrite "direct_select" with a custom "direct_select"
Example with react wrapper https://github.com/amaurymartiny/react-mapbox-gl-draw
render(
<DrawControl
modes={
Object.assign(MapboxDraw.modes, {
snap_poly_mode: SnapPolyMode,
custom_direct_select: DirectSelectMode
})
}
/>)
.
.
.
changeModeHandler = () => {
this.drawControl.draw.changeMode("custom_direct_select", gridDataOptions)
}
The problem here is that "selection" of a feature calls "direct_select" by default. There is no way to use a custom handler to set the draw mode manually.
Is there any other way to pass data / override/ hook into default mode "direct_select" ?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/modes/direct_select.js and the DirectSelect.onDrag entry point described in the issue, then trace how feature selection activates direct_select and how changeMode receives options. Done means establishing a supported way to pass application data or replace the default mode while preserving selection behavior; the issue does not name a test.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100