1 | var __extends = (this && this.__extends) || (function () {
|
2 | var extendStatics = function (d, b) {
|
3 | extendStatics = Object.setPrototypeOf ||
|
4 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
5 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
6 | return extendStatics(d, b);
|
7 | }
|
8 | return function (d, b) {
|
9 | extendStatics(d, b);
|
10 | function __() { this.constructor = d; }
|
11 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
12 | };
|
13 | })();
|
14 | var __assign = (this && this.__assign) || function () {
|
15 | __assign = Object.assign || function(t) {
|
16 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
17 | s = arguments[i];
|
18 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
19 | t[p] = s[p];
|
20 | }
|
21 | return t;
|
22 | };
|
23 | return __assign.apply(this, arguments);
|
24 | };
|
25 | import * as React from 'react';
|
26 | var isEqual = require('deep-equal');
|
27 | import diff from './util/diff';
|
28 | var eventToHandler = {
|
29 | touchstart: 'onTouchStart',
|
30 | touchend: 'onTouchEnd',
|
31 | touchcancel: 'onTouchCancel',
|
32 | mousemove: 'onMouseMove',
|
33 | mouseenter: 'onMouseEnter',
|
34 | mouseleave: 'onMouseLeave',
|
35 | mousedown: 'onMouseDown',
|
36 | mouseup: 'onMouseUp',
|
37 | click: 'onClick'
|
38 | };
|
39 | var Layer = (function (_super) {
|
40 | __extends(Layer, _super);
|
41 | function Layer() {
|
42 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
43 | _this.source = __assign({ type: 'geojson' }, _this.props.geoJSONSourceOptions, { data: {
|
44 | type: 'FeatureCollection',
|
45 | features: []
|
46 | } });
|
47 | _this.geometry = function (coordinates) {
|
48 | switch (_this.props.type) {
|
49 | case 'symbol':
|
50 | case 'circle':
|
51 | return {
|
52 | type: 'Point',
|
53 | coordinates: coordinates
|
54 | };
|
55 | case 'fill':
|
56 | if (Array.isArray(coordinates[0][0][0])) {
|
57 | return {
|
58 | type: 'MultiPolygon',
|
59 | coordinates: coordinates
|
60 | };
|
61 | }
|
62 | return {
|
63 | type: 'Polygon',
|
64 | coordinates: coordinates
|
65 | };
|
66 | case 'line':
|
67 | return {
|
68 | type: 'LineString',
|
69 | coordinates: coordinates
|
70 | };
|
71 | default:
|
72 | return {
|
73 | type: 'Point',
|
74 | coordinates: coordinates
|
75 | };
|
76 | }
|
77 | };
|
78 | _this.makeFeature = function (props, id) { return ({
|
79 | type: 'Feature',
|
80 | geometry: _this.geometry(props.coordinates),
|
81 | properties: __assign({}, props.properties, { id: id })
|
82 | }); };
|
83 | _this.initialize = function () {
|
84 | var _a = _this.props, type = _a.type, layout = _a.layout, paint = _a.paint, sourceId = _a.sourceId, before = _a.before, images = _a.images, id = _a.id, metadata = _a.metadata, sourceLayer = _a.sourceLayer, minZoom = _a.minZoom, maxZoom = _a.maxZoom, filter = _a.filter;
|
85 | var map = _this.props.map;
|
86 | var layer = {
|
87 | id: id,
|
88 | source: sourceId || id,
|
89 | type: type,
|
90 | layout: layout,
|
91 | paint: paint,
|
92 | metadata: metadata
|
93 | };
|
94 | if (sourceLayer) {
|
95 | layer['source-layer'] = sourceLayer;
|
96 | }
|
97 | if (minZoom) {
|
98 | layer.minzoom = minZoom;
|
99 | }
|
100 | if (maxZoom) {
|
101 | layer.maxzoom = maxZoom;
|
102 | }
|
103 | if (filter) {
|
104 | layer.filter = filter;
|
105 | }
|
106 | if (images) {
|
107 | var normalizedImages = !Array.isArray(images[0]) ? [images] : images;
|
108 | normalizedImages
|
109 | .filter(function (image) { return !map.hasImage(image[0]); })
|
110 | .forEach(function (image) {
|
111 | map.addImage(image[0], image[1], image[2]);
|
112 | });
|
113 | }
|
114 | if (!sourceId && !map.getSource(id)) {
|
115 | map.addSource(id, _this.source);
|
116 | }
|
117 | if (!map.getLayer(id)) {
|
118 | map.addLayer(layer, before);
|
119 | }
|
120 | Object.entries(eventToHandler).forEach(function (_a) {
|
121 | var event = _a[0], propName = _a[1];
|
122 | var handler = _this.props[propName];
|
123 | if (handler) {
|
124 | map.on(event, id, handler);
|
125 | }
|
126 | });
|
127 | };
|
128 | _this.onStyleDataChange = function () {
|
129 | if (!_this.props.map.getLayer(_this.props.id)) {
|
130 | _this.initialize();
|
131 | _this.forceUpdate();
|
132 | }
|
133 | };
|
134 | _this.getChildren = function () {
|
135 | var children = _this.props.children;
|
136 | if (!children) {
|
137 | return [];
|
138 | }
|
139 | if (Array.isArray(children)) {
|
140 | return children.reduce(function (arr, next) { return arr.concat(next); }, []);
|
141 | }
|
142 | return [children];
|
143 | };
|
144 | return _this;
|
145 | }
|
146 | Layer.prototype.componentDidMount = function () {
|
147 | var map = this.props.map;
|
148 | this.initialize();
|
149 | map.on('styledata', this.onStyleDataChange);
|
150 | };
|
151 | Layer.prototype.componentWillUnmount = function () {
|
152 | var _this = this;
|
153 | var map = this.props.map;
|
154 | var _a = this.props, images = _a.images, id = _a.id;
|
155 | if (!map || !map.getStyle()) {
|
156 | return;
|
157 | }
|
158 | map.off('styledata', this.onStyleDataChange);
|
159 | Object.entries(eventToHandler).forEach(function (_a) {
|
160 | var event = _a[0], propName = _a[1];
|
161 | var handler = _this.props[propName];
|
162 | if (handler) {
|
163 | map.off(event, id, handler);
|
164 | }
|
165 | });
|
166 | if (map.getLayer(id)) {
|
167 | map.removeLayer(id);
|
168 | }
|
169 | if (!this.props.sourceId) {
|
170 | map.removeSource(id);
|
171 | }
|
172 | if (images) {
|
173 | var normalizedImages = !Array.isArray(images[0]) ? [images] : images;
|
174 | normalizedImages
|
175 | .map(function (_a) {
|
176 | var key = _a[0], rest = _a.slice(1);
|
177 | return key;
|
178 | })
|
179 | .forEach(map.removeImage.bind(map));
|
180 | }
|
181 | };
|
182 | Layer.prototype.componentDidUpdate = function (prevProps) {
|
183 | var _this = this;
|
184 | var paint = prevProps.paint, layout = prevProps.layout, before = prevProps.before, filter = prevProps.filter, id = prevProps.id, minZoom = prevProps.minZoom, maxZoom = prevProps.maxZoom, map = prevProps.map;
|
185 | if (!isEqual(this.props.paint, paint)) {
|
186 | var paintDiff_1 = diff(paint, this.props.paint);
|
187 | Object.keys(paintDiff_1).forEach(function (key) {
|
188 | map.setPaintProperty(id, key, paintDiff_1[key]);
|
189 | });
|
190 | }
|
191 | if (!isEqual(this.props.layout, layout)) {
|
192 | var layoutDiff_1 = diff(layout, this.props.layout);
|
193 | Object.keys(layoutDiff_1).forEach(function (key) {
|
194 | map.setLayoutProperty(id, key, layoutDiff_1[key]);
|
195 | });
|
196 | }
|
197 | if (!isEqual(this.props.filter, filter)) {
|
198 | map.setFilter(id, this.props.filter);
|
199 | }
|
200 | if (before !== this.props.before) {
|
201 | map.moveLayer(id, this.props.before);
|
202 | }
|
203 | if (minZoom !== this.props.minZoom || maxZoom !== this.props.maxZoom) {
|
204 | map.setLayerZoomRange(id, this.props.minZoom, this.props.maxZoom);
|
205 | }
|
206 | Object.entries(eventToHandler).forEach(function (_a) {
|
207 | var event = _a[0], propName = _a[1];
|
208 | var oldHandler = prevProps[propName];
|
209 | var newHandler = _this.props[propName];
|
210 | if (oldHandler !== newHandler) {
|
211 | if (oldHandler) {
|
212 | map.off(event, id, oldHandler);
|
213 | }
|
214 | if (newHandler) {
|
215 | map.on(event, id, newHandler);
|
216 | }
|
217 | }
|
218 | });
|
219 | };
|
220 | Layer.prototype.render = function () {
|
221 | var _this = this;
|
222 | var map = this.props.map;
|
223 | var _a = this.props, sourceId = _a.sourceId, draggedChildren = _a.draggedChildren;
|
224 | var children = this.getChildren();
|
225 | if (draggedChildren) {
|
226 | var draggableChildrenIds_1 = draggedChildren.map(function (child) { return child.key; });
|
227 | children = children.map(function (child) {
|
228 | var indexChildren = draggableChildrenIds_1.indexOf(child.key);
|
229 | if (indexChildren !== -1) {
|
230 | return draggedChildren[indexChildren];
|
231 | }
|
232 | return child;
|
233 | });
|
234 | }
|
235 | var features = children
|
236 | .map(function (_a, id) {
|
237 | var props = _a.props;
|
238 | return _this.makeFeature(props, id);
|
239 | })
|
240 | .filter(Boolean);
|
241 | var source = map.getSource(sourceId || this.props.id);
|
242 | if (source && !sourceId && source.setData) {
|
243 | source.setData({
|
244 | type: 'FeatureCollection',
|
245 | features: features
|
246 | });
|
247 | }
|
248 | return null;
|
249 | };
|
250 | Layer.defaultProps = {
|
251 | type: 'symbol',
|
252 | layout: {},
|
253 | paint: {}
|
254 | };
|
255 | return Layer;
|
256 | }(React.Component));
|
257 | export default Layer;
|
258 |
|
\ | No newline at end of file |