Edit.Rectangle.js 3.2 KB

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