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 | import { generateID } from './util/uid';
|
27 | export function layerMouseTouchEvents(WrappedComponent) {
|
28 | return (function (_super) {
|
29 | __extends(EnhancedLayer, _super);
|
30 | function EnhancedLayer() {
|
31 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
32 | _this.hover = [];
|
33 | _this.draggedChildren = undefined;
|
34 | _this.id = _this.props.id || "layer-" + generateID();
|
35 | _this.getChildren = function () {
|
36 | return []
|
37 | .concat(_this.props.children)
|
38 | .filter(function (el) {
|
39 | return typeof el !== 'undefined';
|
40 | });
|
41 | };
|
42 | _this.getChildFromId = function (children, id) { return children[id]; };
|
43 | _this.areFeaturesDraggable = function (children, featureIds) {
|
44 | if (featureIds === void 0) { featureIds = _this.hover; }
|
45 | return !!featureIds
|
46 | .map(function (id) {
|
47 | return _this.getChildFromId(children, id)
|
48 | ? _this.getChildFromId(children, id).props.draggable
|
49 | : false;
|
50 | })
|
51 | .filter(Boolean).length;
|
52 | };
|
53 | _this.onClick = function (evt) {
|
54 | var features = evt.features;
|
55 | var children = _this.getChildren();
|
56 | var map = _this.props.map;
|
57 | if (features) {
|
58 | features.forEach(function (feature) {
|
59 | var id = feature.properties.id;
|
60 | if (children) {
|
61 | var child = _this.getChildFromId(children, id);
|
62 | var onClick = child && child.props.onClick;
|
63 | if (onClick) {
|
64 | onClick(__assign({}, evt, { feature: feature, map: map }));
|
65 | }
|
66 | }
|
67 | });
|
68 | }
|
69 | };
|
70 | _this.onMouseEnter = function (evt) {
|
71 | var children = _this.getChildren();
|
72 | var map = _this.props.map;
|
73 | _this.hover = [];
|
74 | evt.features.forEach(function (feature) {
|
75 | var id = feature.properties.id;
|
76 | var child = _this.getChildFromId(children, id);
|
77 | _this.hover.push(id);
|
78 | var onMouseEnter = child && child.props.onMouseEnter;
|
79 | if (onMouseEnter) {
|
80 | onMouseEnter(__assign({}, evt, { feature: feature, map: map }));
|
81 | }
|
82 | });
|
83 | if (_this.areFeaturesDraggable(children)) {
|
84 | map.dragPan.disable();
|
85 | }
|
86 | };
|
87 | _this.onMouseLeave = function (evt) {
|
88 | var children = _this.getChildren();
|
89 | var map = _this.props.map;
|
90 | if (_this.areFeaturesDraggable(children)) {
|
91 | map.dragPan.enable();
|
92 | }
|
93 | _this.hover.forEach(function (id) {
|
94 | var child = _this.getChildFromId(children, id);
|
95 | var onMouseLeave = child && child.props.onMouseLeave;
|
96 | if (onMouseLeave) {
|
97 | onMouseLeave(__assign({}, evt, { map: map }));
|
98 | }
|
99 | });
|
100 | if (!_this.draggedChildren) {
|
101 | _this.hover = [];
|
102 | }
|
103 | };
|
104 | _this.onMouseDown = function () {
|
105 | if (_this.hover.length) {
|
106 | _this.onFeatureDown('mousedown');
|
107 | }
|
108 | };
|
109 | _this.onTouchStart = function (evt) {
|
110 | _this.hover = evt.features.map(function (feature) { return feature.properties.id; });
|
111 | if (_this.hover.length) {
|
112 | _this.onFeatureDown('touchstart');
|
113 | }
|
114 | };
|
115 | _this.onFeatureDown = function (startEvent) {
|
116 | var moveEvent = startEvent === 'mousedown' ? 'mousemove' : 'touchmove';
|
117 | var endEvent = startEvent === 'mousedown' ? 'mouseup' : 'touchend';
|
118 | var map = _this.props.map;
|
119 | map.once(moveEvent, _this.onFeatureDragStart);
|
120 | map.on(moveEvent, _this.onFeatureDrag);
|
121 | map.once(endEvent, function (evt) {
|
122 | map.off(moveEvent, _this.onFeatureDragStart);
|
123 | map.off(moveEvent, _this.onFeatureDrag);
|
124 | _this.onFeatureDragEnd(evt);
|
125 | });
|
126 | };
|
127 | _this.onFeatureDragStart = function (evt) {
|
128 | var map = _this.props.map;
|
129 | var children = _this.getChildren();
|
130 | _this.hover.forEach(function (id) {
|
131 | var child = _this.getChildFromId(children, id);
|
132 | if (child && !child.props.draggable) {
|
133 | return;
|
134 | }
|
135 | var onDragStart = child && child.props.onDragStart;
|
136 | if (onDragStart) {
|
137 | onDragStart(__assign({}, evt, { map: map }));
|
138 | }
|
139 | });
|
140 | };
|
141 | _this.onFeatureDrag = function (evt) {
|
142 | var children = _this.getChildren();
|
143 | var map = _this.props.map;
|
144 | var _a = evt.lngLat, lng = _a.lng, lat = _a.lat;
|
145 | _this.draggedChildren = [];
|
146 | _this.hover.forEach(function (id) {
|
147 | var child = _this.getChildFromId(children, id);
|
148 | var onDrag = child && child.props.onDrag;
|
149 | if (child && child.props.draggable) {
|
150 | _this.draggedChildren.push(React.cloneElement(child, {
|
151 | coordinates: [lng, lat]
|
152 | }));
|
153 | if (onDrag) {
|
154 | onDrag(__assign({}, evt, { map: map }));
|
155 | }
|
156 | }
|
157 | });
|
158 | _this.forceUpdate();
|
159 | };
|
160 | _this.onFeatureDragEnd = function (evt) {
|
161 | var map = _this.props.map;
|
162 | var children = _this.getChildren();
|
163 | _this.hover.forEach(function (id) {
|
164 | var child = _this.getChildFromId(children, id);
|
165 | var onDragEnd = child && child.props.onDragEnd;
|
166 | if (onDragEnd && child.props.draggable && _this.draggedChildren) {
|
167 | onDragEnd(__assign({}, evt, { map: map }));
|
168 | }
|
169 | });
|
170 | _this.draggedChildren = undefined;
|
171 | };
|
172 | return _this;
|
173 | }
|
174 | EnhancedLayer.prototype.componentDidMount = function () {
|
175 | var map = this.props.map;
|
176 | map.on('click', this.id, this.onClick);
|
177 | map.on('mouseenter', this.id, this.onMouseEnter);
|
178 | map.on('mouseleave', this.id, this.onMouseLeave);
|
179 | map.on('mousedown', this.id, this.onMouseDown);
|
180 | map.on('touchstart', this.id, this.onTouchStart);
|
181 | };
|
182 | EnhancedLayer.prototype.componentWillUnmount = function () {
|
183 | var map = this.props.map;
|
184 | map.off('click', this.onClick);
|
185 | map.off('mouseenter', this.onMouseEnter);
|
186 | map.off('mouseleave', this.onMouseLeave);
|
187 | map.off('mousedown', this.onMouseDown);
|
188 | map.off('touchstart', this.onTouchStart);
|
189 | };
|
190 | EnhancedLayer.prototype.render = function () {
|
191 | return (React.createElement(WrappedComponent, __assign({}, this.props, { id: this.id, map: this.props.map, draggedChildren: this.draggedChildren })));
|
192 | };
|
193 | return EnhancedLayer;
|
194 | }(React.Component));
|
195 | }
|
196 | export default layerMouseTouchEvents;
|
197 |
|
\ | No newline at end of file |