mapbox-gl-draw
Version:
A drawing component for Mapbox GL JS
366 lines (365 loc) • 11.3 kB
HTML
<html lang="en">
<head>
<title>Code coverage report for mapbox-gl-draw/src/modes/draw_line_string.js</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../../../prettify.css" />
<link rel="stylesheet" href="../../../base.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type='text/css'>
.coverage-summary .sorter {
background-image: url(../../../sort-arrow-sprite.png);
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='pad1'>
<h1>
<a href="../../../index.html">all files</a> / <a href="index.html">mapbox-gl-draw/src/modes/</a> draw_line_string.js
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Statements</span>
<span class='fraction'>59/59</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Branches</span>
<span class='fraction'>20/20</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Functions</span>
<span class='fraction'>7/7</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Lines</span>
<span class='fraction'>52/52</span>
</div>
</div>
</div>
<div class='status-line high'></div>
<pre><table class="coverage">
<tr><td class="line-count quiet">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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101</td><td class="line-coverage quiet"><span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-yes">28×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">28×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">28×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">28×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">28×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">21×</span>
<span class="cline-any cline-yes">21×</span>
<span class="cline-any cline-yes">21×</span>
<span class="cline-any cline-yes">21×</span>
<span class="cline-any cline-yes">21×</span>
<span class="cline-any cline-yes">51×</span>
<span class="cline-any cline-yes">51×</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">21×</span>
<span class="cline-any cline-yes">34×</span>
<span class="cline-any cline-yes">3×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">31×</span>
<span class="cline-any cline-yes">31×</span>
<span class="cline-any cline-yes">31×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">21×</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">21×</span>
<span class="cline-any cline-yes">2×</span>
<span class="cline-any cline-yes">2×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">21×</span>
<span class="cline-any cline-yes">3×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">21×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">29×</span>
<span class="cline-any cline-yes">29×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">29×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">15×</span>
<span class="cline-any cline-yes">15×</span>
<span class="cline-any cline-yes">6×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">9×</span>
<span class="cline-any cline-yes">9×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">9×</span>
<span class="cline-any cline-yes">9×</span>
<span class="cline-any cline-yes">9×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">8×</span>
<span class="cline-any cline-yes">4×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">4×</span>
<span class="cline-any cline-yes">2×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">4×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">const CommonSelectors = require('../lib/common_selectors');
const LineString = require('../feature_types/line_string');
const isEventAtCoordinates = require('../lib/is_event_at_coordinates');
const doubleClickZoom = require('../lib/double_click_zoom');
const Constants = require('../constants');
const createVertex = require('../lib/create_vertex');
module.exports = function(ctx) {
const line = new LineString(ctx, {
type: Constants.geojsonTypes.FEATURE,
properties: {},
geometry: {
type: Constants.geojsonTypes.LINE_STRING,
coordinates: []
}
});
let currentVertexPosition = 0;
if (ctx._test) ctx._test.line = line;
ctx.store.add(line);
return {
start: function() {
ctx.store.clearSelected();
doubleClickZoom.disable(ctx);
ctx.ui.queueMapClasses({ mouse: Constants.cursors.ADD });
ctx.ui.setActiveButton(Constants.types.LINE);
this.on('mousemove', CommonSelectors.true, (e) => {
line.updateCoordinate(currentVertexPosition, e.lngLat.lng, e.lngLat.lat);
if (CommonSelectors.isVertex(e)) {
ctx.ui.queueMapClasses({ mouse: Constants.cursors.POINTER });
}
});
this.on('click', CommonSelectors.true, (e) => {
if (currentVertexPosition > 0 && isEventAtCoordinates(e, line.coordinates[currentVertexPosition - 1])) {
return ctx.events.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [line.id] });
}
ctx.ui.queueMapClasses({ mouse: Constants.cursors.ADD });
line.updateCoordinate(currentVertexPosition, e.lngLat.lng, e.lngLat.lat);
currentVertexPosition++;
});
this.on('click', CommonSelectors.isVertex, () => {
return ctx.events.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [line.id] });
});
this.on('keyup', CommonSelectors.isEscapeKey, () => {
ctx.store.delete([line.id], { silent: true });
ctx.events.changeMode(Constants.modes.SIMPLE_SELECT);
});
this.on('keyup', CommonSelectors.isEnterKey, () => {
ctx.events.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [line.id] });
});
ctx.events.actionable({
combineFeatures: false,
uncombineFeatures: false,
trash: true
});
},
stop() {
doubleClickZoom.enable(ctx);
ctx.ui.setActiveButton();
// check to see if we've deleted this feature
if (ctx.store.get(line.id) === undefined) return;
//remove last added coordinate
line.removeCoordinate(`${currentVertexPosition}`);
if (line.isValid()) {
ctx.map.fire(Constants.events.CREATE, {
features: [line.toGeoJSON()]
});
} else {
ctx.store.delete([line.id], { silent: true });
ctx.events.changeMode(Constants.modes.SIMPLE_SELECT, {}, { silent: true });
}
},
render(geojson, callback) {
const isActiveLine = geojson.properties.id === line.id;
geojson.properties.active = (isActiveLine) ? Constants.activeStates.ACTIVE : Constants.activeStates.INACTIVE;
if (!isActiveLine) return callback(geojson);
// Only render the line if it has at least one real coordinate
if (geojson.geometry.coordinates.length < 2) return;
geojson.properties.meta = Constants.meta.FEATURE;
if (geojson.geometry.coordinates.length >= 3) {
callback(createVertex(line.id, geojson.geometry.coordinates[geojson.geometry.coordinates.length - 2], `${geojson.geometry.coordinates.length - 2}`, false));
}
callback(geojson);
},
trash() {
ctx.store.delete([line.id], { silent: true });
ctx.events.changeMode(Constants.modes.SIMPLE_SELECT);
}
};
};
</pre></td></tr>
</table></pre>
<div class='push'></div><!-- for sticky footer -->
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Nov 17 2016 15:31:58 GMT-0500 (EST)
</div>
</div>
<script src="../../../prettify.js"></script>
<script>
window.onload = function () {
if (typeof prettyPrint === 'function') {
prettyPrint();
}
};
</script>
<script src="../../../sorter.js"></script>
</body>
</html>