|
1 L.Edit = L.Edit || {}; |
|
2 /** |
|
3 * @class L.Edit.Rectangle |
|
4 * @aka Edit.Rectangle |
|
5 * @inherits L.Edit.SimpleShape |
|
6 */ |
|
7 L.Edit.Rectangle = L.Edit.SimpleShape.extend({ |
|
8 _createMoveMarker: function () { |
|
9 var bounds = this._shape.getBounds(), |
|
10 center = bounds.getCenter(); |
|
11 |
|
12 this._moveMarker = this._createMarker(center, this.options.moveIcon); |
|
13 }, |
|
14 |
|
15 _createResizeMarker: function () { |
|
16 var corners = this._getCorners(); |
|
17 |
|
18 this._resizeMarkers = []; |
|
19 |
|
20 for (var i = 0, l = corners.length; i < l; i++) { |
|
21 this._resizeMarkers.push(this._createMarker(corners[i], this.options.resizeIcon)); |
|
22 // Monkey in the corner index as we will need to know this for dragging |
|
23 this._resizeMarkers[i]._cornerIndex = i; |
|
24 } |
|
25 }, |
|
26 |
|
27 _onMarkerDragStart: function (e) { |
|
28 L.Edit.SimpleShape.prototype._onMarkerDragStart.call(this, e); |
|
29 |
|
30 // Save a reference to the opposite point |
|
31 var corners = this._getCorners(), |
|
32 marker = e.target, |
|
33 currentCornerIndex = marker._cornerIndex; |
|
34 |
|
35 this._oppositeCorner = corners[(currentCornerIndex + 2) % 4]; |
|
36 |
|
37 this._toggleCornerMarkers(0, currentCornerIndex); |
|
38 }, |
|
39 |
|
40 _onMarkerDragEnd: function (e) { |
|
41 var marker = e.target, |
|
42 bounds, center; |
|
43 |
|
44 // Reset move marker position to the center |
|
45 if (marker === this._moveMarker) { |
|
46 bounds = this._shape.getBounds(); |
|
47 center = bounds.getCenter(); |
|
48 |
|
49 marker.setLatLng(center); |
|
50 } |
|
51 |
|
52 this._toggleCornerMarkers(1); |
|
53 |
|
54 this._repositionCornerMarkers(); |
|
55 |
|
56 L.Edit.SimpleShape.prototype._onMarkerDragEnd.call(this, e); |
|
57 }, |
|
58 |
|
59 _move: function (newCenter) { |
|
60 var latlngs = this._shape._defaultShape ? this._shape._defaultShape() : this._shape.getLatLngs(), |
|
61 bounds = this._shape.getBounds(), |
|
62 center = bounds.getCenter(), |
|
63 offset, newLatLngs = []; |
|
64 |
|
65 // Offset the latlngs to the new center |
|
66 for (var i = 0, l = latlngs.length; i < l; i++) { |
|
67 offset = [latlngs[i].lat - center.lat, latlngs[i].lng - center.lng]; |
|
68 newLatLngs.push([newCenter.lat + offset[0], newCenter.lng + offset[1]]); |
|
69 } |
|
70 |
|
71 this._shape.setLatLngs(newLatLngs); |
|
72 |
|
73 // Reposition the resize markers |
|
74 this._repositionCornerMarkers(); |
|
75 |
|
76 this._map.fire(L.Draw.Event.EDITMOVE, { layer: this._shape }); |
|
77 }, |
|
78 |
|
79 _resize: function (latlng) { |
|
80 var bounds; |
|
81 |
|
82 // Update the shape based on the current position of this corner and the opposite point |
|
83 this._shape.setBounds(L.latLngBounds(latlng, this._oppositeCorner)); |
|
84 |
|
85 // Reposition the move marker |
|
86 bounds = this._shape.getBounds(); |
|
87 this._moveMarker.setLatLng(bounds.getCenter()); |
|
88 |
|
89 this._map.fire(L.Draw.Event.EDITRESIZE, { layer: this._shape }); |
|
90 }, |
|
91 |
|
92 _getCorners: function () { |
|
93 var bounds = this._shape.getBounds(), |
|
94 nw = bounds.getNorthWest(), |
|
95 ne = bounds.getNorthEast(), |
|
96 se = bounds.getSouthEast(), |
|
97 sw = bounds.getSouthWest(); |
|
98 |
|
99 return [nw, ne, se, sw]; |
|
100 }, |
|
101 |
|
102 _toggleCornerMarkers: function (opacity) { |
|
103 for (var i = 0, l = this._resizeMarkers.length; i < l; i++) { |
|
104 this._resizeMarkers[i].setOpacity(opacity); |
|
105 } |
|
106 }, |
|
107 |
|
108 _repositionCornerMarkers: function () { |
|
109 var corners = this._getCorners(); |
|
110 |
|
111 for (var i = 0, l = this._resizeMarkers.length; i < l; i++) { |
|
112 this._resizeMarkers[i].setLatLng(corners[i]); |
|
113 } |
|
114 } |
|
115 }); |
|
116 |
|
117 L.Rectangle.addInitHook(function () { |
|
118 if (L.Edit.Rectangle) { |
|
119 this.editing = new L.Edit.Rectangle(this); |
|
120 |
|
121 if (this.options.editable) { |
|
122 this.editing.enable(); |
|
123 } |
|
124 } |
|
125 }); |