|
1 L.Edit = L.Edit || {}; |
|
2 /** |
|
3 * @class L.Edit.SimpleShape |
|
4 * @aka Edit.SimpleShape |
|
5 */ |
|
6 L.Edit.SimpleShape = L.Handler.extend({ |
|
7 options: { |
|
8 moveIcon: new L.DivIcon({ |
|
9 iconSize: new L.Point(8, 8), |
|
10 className: 'leaflet-div-icon leaflet-editing-icon leaflet-edit-move' |
|
11 }), |
|
12 resizeIcon: new L.DivIcon({ |
|
13 iconSize: new L.Point(8, 8), |
|
14 className: 'leaflet-div-icon leaflet-editing-icon leaflet-edit-resize' |
|
15 }), |
|
16 touchMoveIcon: new L.DivIcon({ |
|
17 iconSize: new L.Point(20, 20), |
|
18 className: 'leaflet-div-icon leaflet-editing-icon leaflet-edit-move leaflet-touch-icon' |
|
19 }), |
|
20 touchResizeIcon: new L.DivIcon({ |
|
21 iconSize: new L.Point(20, 20), |
|
22 className: 'leaflet-div-icon leaflet-editing-icon leaflet-edit-resize leaflet-touch-icon' |
|
23 }), |
|
24 }, |
|
25 |
|
26 // @method intialize(): void |
|
27 initialize: function (shape, options) { |
|
28 // if touch, switch to touch icon |
|
29 if (L.Browser.touch) { |
|
30 this.options.moveIcon = this.options.touchMoveIcon; |
|
31 this.options.resizeIcon = this.options.touchResizeIcon; |
|
32 } |
|
33 |
|
34 this._shape = shape; |
|
35 L.Util.setOptions(this, options); |
|
36 }, |
|
37 |
|
38 // @method addHooks(): void |
|
39 // Add listener hooks to this handler |
|
40 addHooks: function () { |
|
41 var shape = this._shape; |
|
42 if (this._shape._map) { |
|
43 this._map = this._shape._map; |
|
44 shape.setStyle(shape.options.editing); |
|
45 |
|
46 if (shape._map) { |
|
47 this._map = shape._map; |
|
48 if (!this._markerGroup) { |
|
49 this._initMarkers(); |
|
50 } |
|
51 this._map.addLayer(this._markerGroup); |
|
52 } |
|
53 } |
|
54 }, |
|
55 |
|
56 // @method removeHooks(): void |
|
57 // Remove listener hooks from this handler |
|
58 removeHooks: function () { |
|
59 var shape = this._shape; |
|
60 |
|
61 shape.setStyle(shape.options.original); |
|
62 |
|
63 if (shape._map) { |
|
64 this._unbindMarker(this._moveMarker); |
|
65 |
|
66 for (var i = 0, l = this._resizeMarkers.length; i < l; i++) { |
|
67 this._unbindMarker(this._resizeMarkers[i]); |
|
68 } |
|
69 this._resizeMarkers = null; |
|
70 |
|
71 this._map.removeLayer(this._markerGroup); |
|
72 delete this._markerGroup; |
|
73 } |
|
74 |
|
75 this._map = null; |
|
76 }, |
|
77 |
|
78 // @method updateMarkers(): void |
|
79 // Remove the edit markers from this layer |
|
80 updateMarkers: function () { |
|
81 this._markerGroup.clearLayers(); |
|
82 this._initMarkers(); |
|
83 }, |
|
84 |
|
85 _initMarkers: function () { |
|
86 if (!this._markerGroup) { |
|
87 this._markerGroup = new L.LayerGroup(); |
|
88 } |
|
89 |
|
90 // Create center marker |
|
91 this._createMoveMarker(); |
|
92 |
|
93 // Create edge marker |
|
94 this._createResizeMarker(); |
|
95 }, |
|
96 |
|
97 _createMoveMarker: function () { |
|
98 // Children override |
|
99 }, |
|
100 |
|
101 _createResizeMarker: function () { |
|
102 // Children override |
|
103 }, |
|
104 |
|
105 _createMarker: function (latlng, icon) { |
|
106 // Extending L.Marker in TouchEvents.js to include touch. |
|
107 var marker = new L.Marker.Touch(latlng, { |
|
108 draggable: true, |
|
109 icon: icon, |
|
110 zIndexOffset: 10 |
|
111 }); |
|
112 |
|
113 this._bindMarker(marker); |
|
114 |
|
115 this._markerGroup.addLayer(marker); |
|
116 |
|
117 return marker; |
|
118 }, |
|
119 |
|
120 _bindMarker: function (marker) { |
|
121 marker |
|
122 .on('dragstart', this._onMarkerDragStart, this) |
|
123 .on('drag', this._onMarkerDrag, this) |
|
124 .on('dragend', this._onMarkerDragEnd, this) |
|
125 .on('touchstart', this._onTouchStart, this) |
|
126 .on('touchmove', this._onTouchMove, this) |
|
127 .on('MSPointerMove', this._onTouchMove, this) |
|
128 .on('touchend', this._onTouchEnd, this) |
|
129 .on('MSPointerUp', this._onTouchEnd, this); |
|
130 }, |
|
131 |
|
132 _unbindMarker: function (marker) { |
|
133 marker |
|
134 .off('dragstart', this._onMarkerDragStart, this) |
|
135 .off('drag', this._onMarkerDrag, this) |
|
136 .off('dragend', this._onMarkerDragEnd, this) |
|
137 .off('touchstart', this._onTouchStart, this) |
|
138 .off('touchmove', this._onTouchMove, this) |
|
139 .off('MSPointerMove', this._onTouchMove, this) |
|
140 .off('touchend', this._onTouchEnd, this) |
|
141 .off('MSPointerUp', this._onTouchEnd, this); |
|
142 }, |
|
143 |
|
144 _onMarkerDragStart: function (e) { |
|
145 var marker = e.target; |
|
146 marker.setOpacity(0); |
|
147 |
|
148 this._shape.fire('editstart'); |
|
149 }, |
|
150 |
|
151 _fireEdit: function () { |
|
152 this._shape.edited = true; |
|
153 this._shape.fire('edit'); |
|
154 }, |
|
155 |
|
156 _onMarkerDrag: function (e) { |
|
157 var marker = e.target, |
|
158 latlng = marker.getLatLng(); |
|
159 |
|
160 if (marker === this._moveMarker) { |
|
161 this._move(latlng); |
|
162 } else { |
|
163 this._resize(latlng); |
|
164 } |
|
165 |
|
166 this._shape.redraw(); |
|
167 this._shape.fire('editdrag'); |
|
168 }, |
|
169 |
|
170 _onMarkerDragEnd: function (e) { |
|
171 var marker = e.target; |
|
172 marker.setOpacity(1); |
|
173 |
|
174 this._fireEdit(); |
|
175 }, |
|
176 |
|
177 _onTouchStart: function (e) { |
|
178 L.Edit.SimpleShape.prototype._onMarkerDragStart.call(this, e); |
|
179 |
|
180 if (typeof(this._getCorners) === 'function') { |
|
181 // Save a reference to the opposite point |
|
182 var corners = this._getCorners(), |
|
183 marker = e.target, |
|
184 currentCornerIndex = marker._cornerIndex; |
|
185 |
|
186 marker.setOpacity(0); |
|
187 |
|
188 // Copyed from Edit.Rectangle.js line 23 _onMarkerDragStart() |
|
189 // Latlng is null otherwise. |
|
190 this._oppositeCorner = corners[(currentCornerIndex + 2) % 4]; |
|
191 this._toggleCornerMarkers(0, currentCornerIndex); |
|
192 } |
|
193 |
|
194 this._shape.fire('editstart'); |
|
195 }, |
|
196 |
|
197 _onTouchMove: function (e) { |
|
198 var layerPoint = this._map.mouseEventToLayerPoint(e.originalEvent.touches[0]), |
|
199 latlng = this._map.layerPointToLatLng(layerPoint), |
|
200 marker = e.target; |
|
201 |
|
202 if (marker === this._moveMarker) { |
|
203 this._move(latlng); |
|
204 } else { |
|
205 this._resize(latlng); |
|
206 } |
|
207 |
|
208 this._shape.redraw(); |
|
209 |
|
210 // prevent touchcancel in IOS |
|
211 // e.preventDefault(); |
|
212 return false; |
|
213 }, |
|
214 |
|
215 _onTouchEnd: function (e) { |
|
216 var marker = e.target; |
|
217 marker.setOpacity(1); |
|
218 this.updateMarkers(); |
|
219 this._fireEdit(); |
|
220 }, |
|
221 |
|
222 _move: function () { |
|
223 // Children override |
|
224 }, |
|
225 |
|
226 _resize: function () { |
|
227 // Children override |
|
228 } |
|
229 }); |