all files / mapbox-gl-draw/src/modes/ draw_point.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
1×
1×
1×
 
1×
 
19×
 
 
 
 
 
 
 
 
19×
 
19×
 
 
5×
5×
 
 
 
3×
3×
3×
 
 
3×
 
 
19×
 
14×
14×
14×
14×
14×
14×
14×
 
 
 
 
 
 
 
15×
15×
11×
 
 
 
 
3×
3×
3×
 
 
 
 
1×
 
 
 
 
const CommonSelectors = require('../lib/common_selectors');
const Point = require('../feature_types/point');
const Constants = require('../constants');
 
module.exports = function(ctx) {
 
  const point = new Point(ctx, {
    type: Constants.geojsonTypes.FEATURE,
    properties: {},
    geometry: {
      type: Constants.geojsonTypes.POINT,
      coordinates: []
    }
  });
 
  if (ctx._test) ctx._test.point = point;
 
  ctx.store.add(point);
 
  function stopDrawingAndRemove() {
    ctx.events.changeMode(Constants.modes.SIMPLE_SELECT);
    ctx.store.delete([point.id], { silent: true });
  }
 
  function handleClick(e) {
    ctx.ui.queueMapClasses({ mouse: Constants.cursors.MOVE });
    point.updateCoordinate('', e.lngLat.lng, e.lngLat.lat);
    ctx.map.fire(Constants.events.CREATE, {
      features: [point.toGeoJSON()]
    });
    ctx.events.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [point.id] });
  }
 
  return {
    start() {
      ctx.store.clearSelected();
      ctx.ui.queueMapClasses({ mouse: Constants.cursors.ADD });
      ctx.ui.setActiveButton(Constants.types.POINT);
      this.on('click', CommonSelectors.true, handleClick);
      this.on('keyup', CommonSelectors.isEscapeKey, stopDrawingAndRemove);
      this.on('keyup', CommonSelectors.isEnterKey, stopDrawingAndRemove);
      ctx.events.actionable({
        combineFeatures: false,
        uncombineFeatures: false,
        trash: true
      });
    },
 
    stop() {
      ctx.ui.setActiveButton();
      if (!point.getCoordinate().length) {
        ctx.store.delete([point.id], { silent: true });
      }
    },
 
    render(geojson, callback) {
      const isActivePoint = geojson.properties.id === point.id;
      geojson.properties.active = (isActivePoint) ? Constants.activeStates.ACTIVE : Constants.activeStates.INACTIVE;
      if (!isActivePoint) return callback(geojson);
      // Never render the point we're drawing
    },
 
    trash() {
      stopDrawingAndRemove();
    }
  };
};