https://dubaienergy.netlify.app/src/edit/handler/Edit.SimpleShape.js

1L.Edit = L.Edit || {};
2/**
3 * @class L.Edit.SimpleShape
4 * @aka Edit.SimpleShape
5 */
6L.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;