Edit.Rectangle.js 3.0 KB

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