mapbox / mapbox/mapbox-gl-draw

Customise / hook into "direct_select" mode

Open
#848 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

feature ui
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.