Как отключить выбор средней точки, перетаскивая для типов LineString (режим draw_line_string)

Question

Как отключить возможность для пользователя выбирать (direct_select) среднюю точку LineString в mapbox-gl-draw? У меня есть пользовательский режим для "аннотаций", который должен разрешать только LineStrings с 2 вершинами.

Я пробовал некоторые из ловушек жизненного цикла в пользовательских режимах ( https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/MODES.md), специально для draw_line_string, в том числе onDrag. Моя проблема в том, что я не хочу, чтобы точка перетаскивания вообще существовала (это потребовало бы, чтобы пользователь увидел среднюю точку, перетащил эту вершину, а затем увидел, что она вернулась назад).

Я также попытался разобраться со стилями рисования, но они являются общими для всех средних точек (включая полигоны).

Третий способ может заключаться в том, чтобы аннулировать это за пределами mapbox-gl-draw в моей структуре, но я бы хотел вообще избежать возможности выбора средней точки.

Answer 1

You can achieve that by creating a custom mode from direct_select mode:

import * as MapboxDraw from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw';
import createSupplementaryPoints from '@mapbox/mapbox-gl-draw/src/lib/create_supplementary_points';
import Constants from '@mapbox/mapbox-gl-draw/src/constants';

const DirectSelectWithoutMiddleVertexMode = MapboxDraw.modes.direct_select;

DirectSelectWithoutMiddleVertexMode.toDisplayFeatures = function (state, geojson, push) {
  if (state.featureId === geojson.properties.id) {
    geojson.properties.active = Constants.activeStates.ACTIVE;
    push(geojson);
    createSupplementaryPoints(geojson, {
      map: this.map,
      midpoints: false,
      selectedPaths: state.selectedCoordPaths
    }).forEach(push);
  } else {
    geojson.properties.active = Constants.activeStates.INACTIVE;
    push(geojson);
  }
  this.fireActionable(state);
};

export default DirectSelectWithoutMiddleVertexMode;

The only thing to do is to set the midpoints property to false that avoids the midpoint creation.

After that, use the custom mode to override direct_select mode in the draw options:

import DirectSelectWithoutMiddleVertexMode from './DirectSelectWithoutMiddleVertexMode';

const drawOptions = {
    modes: Object.assign({
        direct_select: DirectSelectWithoutMiddleVertexMode
    }, MapboxDraw.modes)
};

const draw = new MapboxDraw(drawOptions);