bbl-mapbox-react 0.0.16 → 0.0.18

package/dist/index.mjs

@@ -408,7 +408,34 @@ var BaseCanvasRenderer = class {
 	destroy() {
 		this.isDestroyed = !0, this.map.getLayer(this.areaLayerId) && this.map.removeLayer(this.areaLayerId), this.map.getSource(this.areaSourceId) && this.map.removeSource(this.areaSourceId), this.map.getLayer(this.labelLayerId) && this.map.removeLayer(this.labelLayerId), this.map.getSource(this.labelSourceId) && this.map.removeSource(this.labelSourceId), this.map.getLayer(this.layerId) && this.map.removeLayer(this.layerId), this.map.getSource(this.sourceId) && this.map.removeSource(this.sourceId);
 	}
-};
+}, move_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1775030039452'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='24839'%20data-spm-anchor-id='a313x.search_index.0.i1.78953a81FCkAe0'%20width='64'%20height='64'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cpath%20d='M512%20938.666667l-170.666667-170.666667h341.333334l-170.666667%20170.666667z%20m0-853.333334l170.666667%20170.666667H341.333333l170.666667-170.666667z%20m0%20512a85.333333%2085.333333%200%201%201%200-170.666666%2085.333333%2085.333333%200%200%201%200%20170.666666zM85.333333%20512l170.666667-170.666667v341.333334l-170.666667-170.666667z%20m853.333334%200l-170.666667%20170.666667V341.333333l170.666667%20170.666667z'%20fill='%23ffffff'%20p-id='24840'%3e%3c/path%3e%3c/svg%3e";
+const MOVE_ICON_ID = "__edit-move-icon__";
+var _moveIconLoading = !1;
+function ensureMoveIcon(e) {
+	if (e.hasImage("__edit-move-icon__") || _moveIconLoading) return;
+	_moveIconLoading = !0;
+	let t = new Image();
+	t.onload = () => {
+		if (e.hasImage("__edit-move-icon__")) {
+			_moveIconLoading = !1;
+			return;
+		}
+		let n = document.createElement("canvas");
+		n.width = 28, n.height = 28;
+		let r = n.getContext("2d");
+		r.beginPath(), r.arc(28 / 2, 28 / 2, 28 / 2, 0, Math.PI * 2), r.fillStyle = "rgba(51,136,255,0.9)", r.fill();
+		let i = 28 * .6, a = (28 - i) / 2;
+		r.drawImage(t, a, a, i, i);
+		let o = r.getImageData(0, 0, 28, 28);
+		e.addImage(MOVE_ICON_ID, {
+			width: 28,
+			height: 28,
+			data: new Uint8Array(o.data.buffer)
+		}), _moveIconLoading = !1;
+	}, t.onerror = () => {
+		_moveIconLoading = !1;
+	}, t.src = move_default;
+}
 function calculateRadarBounds(e, t) {
 	let n = destinationPoint(e, t, 0), r = destinationPoint(e, t, 90), i = destinationPoint(e, t, 180), a = destinationPoint(e, t, 270)[0], o = r[0], s = i[1], c = n[1];
 	return [
@@ -420,7 +447,7 @@ function calculateRadarBounds(e, t) {
 }
 var CanvasRadarRenderer = class extends BaseCanvasRenderer {
 	constructor(e, t, n, r) {
-		super(e, t, "radar", n, r), this.animationFrameId = null, this.currentRotation = t.initialRotation ?? RADAR_DEFAULTS.initialRotation;
+		super(e, t, "radar", n, r), this.animationFrameId = null, this.isEditing = !1, this.editSourceId = "", this.editMoveLayerId = "", this.editSourceId = `radar-edit-source-${t.id}`, this.editMoveLayerId = `radar-edit-move-${t.id}`, this.currentRotation = t.initialRotation ?? RADAR_DEFAULTS.initialRotation;
 		let i = calculateRadarBounds(t.center, t.radius);
 		this.init(i), t.isAnimating && this.startAnimation();
 	}
@@ -480,7 +507,84 @@ var CanvasRadarRenderer = class extends BaseCanvasRenderer {
 		return Math.sqrt((r * a) ** 2 + (i * 110540) ** 2) <= n;
 	}
 	destroy() {
-		this.stopAnimation(), super.destroy();
+		this.removeEditLayers(), this.stopAnimation(), super.destroy();
+	}
+	getEditHandleGeoJSON(e) {
+		return {
+			type: "FeatureCollection",
+			features: [{
+				type: "Feature",
+				geometry: {
+					type: "Point",
+					coordinates: e ?? this.entity.center
+				},
+				properties: {
+					handleType: "move",
+					index: 0
+				}
+			}]
+		};
+	}
+	createEditLayers() {
+		this.map.getSource(this.editSourceId) || (ensureMoveIcon(this.map), this.map.addSource(this.editSourceId, {
+			type: "geojson",
+			data: this.getEditHandleGeoJSON()
+		}), this.map.addLayer({
+			id: this.editMoveLayerId,
+			type: "symbol",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"move"
+			],
+			layout: {
+				"icon-image": MOVE_ICON_ID,
+				"icon-allow-overlap": !0,
+				"icon-ignore-placement": !0
+			}
+		}));
+	}
+	removeEditLayers() {
+		this.map.getLayer(this.editMoveLayerId) && this.map.removeLayer(this.editMoveLayerId), this.map.getSource(this.editSourceId) && this.map.removeSource(this.editSourceId);
+	}
+	refreshEditHandles(e) {
+		let t = this.map.getSource(this.editSourceId);
+		t && t.setData(this.getEditHandleGeoJSON(e));
+	}
+	setEditing(e) {
+		this.isEditing !== e && (this.isEditing = e, e ? this.createEditLayers() : this.removeEditLayers());
+	}
+	getEditHandleAt(e, t) {
+		if (!this.isEditing) return null;
+		let n = this.entity.center, r = this.map.project(e), i = this.map.project(n), a = r.x - i.x, o = r.y - i.y;
+		return a * a + o * o <= 144 ? {
+			type: "move",
+			index: 0,
+			position: n
+		} : null;
+	}
+	applyHandleMove(e, t) {
+		let n = t[0] - e.position[0], r = t[1] - e.position[1], i = [this.entity.center[0] + n, this.entity.center[1] + r], a = {
+			...this.entity,
+			center: i
+		};
+		this.entity = a;
+		let o = calculateRadarBounds(i, this.entity.radius);
+		return this.updateSourceCoordinates(o), this.updateLabel(), this.refreshEditHandles(), a;
+	}
+	updateEditPreview(e, t) {
+		let n = t[0] - e.position[0], r = t[1] - e.position[1], i = [this.entity.center[0] + n, this.entity.center[1] + r], a = calculateRadarBounds(i, this.entity.radius);
+		this.updateSourceCoordinates(a);
+		let o = this.entity;
+		this.entity = {
+			...this.entity,
+			center: i
+		}, this.updateLabel(), this.entity = o, this.refreshEditHandles(i);
+	}
+	cancelEditPreview() {
+		let e = calculateRadarBounds(this.entity.center, this.entity.radius);
+		this.updateSourceCoordinates(e), this.updateLabel(), this.refreshEditHandles();
 	}
 };
 function calculateImageBounds(e, t, n) {
@@ -494,7 +598,7 @@ function calculateImageBounds(e, t, n) {
 }
 var CanvasImageRenderer = class extends BaseCanvasRenderer {
 	constructor(e, t, n, r) {
-		super(e, t, "image", n, r), this.loadedImage = null, this.imageLoaded = !1, this.currentSrc = "", this.imageAspectRatio = 1, this.loadImage(t.src, !0);
+		super(e, t, "image", n, r), this.loadedImage = null, this.imageLoaded = !1, this.currentSrc = "", this.imageAspectRatio = 1, this.isEditing = !1, this.editSourceId = "", this.editMoveLayerId = "", this.editSourceId = `image-edit-source-${t.id}`, this.editMoveLayerId = `image-edit-move-${t.id}`, this.loadImage(t.src, !0);
 	}
 	getSize() {
 		let { width: e } = this.entity, t = e / this.imageAspectRatio;
@@ -600,9 +704,89 @@ var CanvasImageRenderer = class extends BaseCanvasRenderer {
 		let { center: t } = this.entity, [n, r] = this.getSize(), i = e[0] - t[0], a = e[1] - t[1], o = 111320 * Math.cos(t[1] * Math.PI / 180), s = Math.abs(i * o), c = Math.abs(a * 110540);
 		return s <= n / 2 && c <= r / 2;
 	}
+	getEditHandleGeoJSON(e) {
+		return {
+			type: "FeatureCollection",
+			features: [{
+				type: "Feature",
+				geometry: {
+					type: "Point",
+					coordinates: e ?? this.entity.center
+				},
+				properties: {
+					handleType: "move",
+					index: 0
+				}
+			}]
+		};
+	}
+	createEditLayers() {
+		this.map.getSource(this.editSourceId) || (ensureMoveIcon(this.map), this.map.addSource(this.editSourceId, {
+			type: "geojson",
+			data: this.getEditHandleGeoJSON()
+		}), this.map.addLayer({
+			id: this.editMoveLayerId,
+			type: "symbol",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"move"
+			],
+			layout: {
+				"icon-image": MOVE_ICON_ID,
+				"icon-allow-overlap": !0,
+				"icon-ignore-placement": !0
+			}
+		}));
+	}
+	removeEditLayers() {
+		this.map.getLayer(this.editMoveLayerId) && this.map.removeLayer(this.editMoveLayerId), this.map.getSource(this.editSourceId) && this.map.removeSource(this.editSourceId);
+	}
+	refreshEditHandles(e) {
+		let t = this.map.getSource(this.editSourceId);
+		t && t.setData(this.getEditHandleGeoJSON(e));
+	}
+	setEditing(e) {
+		this.isEditing !== e && (this.isEditing = e, e ? this.createEditLayers() : this.removeEditLayers());
+	}
+	getEditHandleAt(e, t) {
+		if (!this.isEditing) return null;
+		let n = this.entity.center, r = this.map.project(e), i = this.map.project(n), a = r.x - i.x, o = r.y - i.y;
+		return a * a + o * o <= 144 ? {
+			type: "move",
+			index: 0,
+			position: n
+		} : null;
+	}
+	applyHandleMove(e, t) {
+		let n = t[0] - e.position[0], r = t[1] - e.position[1], i = [this.entity.center[0] + n, this.entity.center[1] + r], a = {
+			...this.entity,
+			center: i
+		};
+		this.entity = a;
+		let [o, s] = this.getSize(), c = calculateImageBounds(i, o, s);
+		return this.updateSourceCoordinates(c), this.updateLabel(), this.refreshEditHandles(), a;
+	}
+	updateEditPreview(e, t) {
+		let n = t[0] - e.position[0], r = t[1] - e.position[1], i = [this.entity.center[0] + n, this.entity.center[1] + r], [a, o] = this.getSize(), s = calculateImageBounds(i, a, o);
+		this.updateSourceCoordinates(s);
+		let c = this.entity;
+		this.entity = {
+			...this.entity,
+			center: i
+		}, this.updateLabel(), this.entity = c, this.refreshEditHandles(i);
+	}
+	cancelEditPreview() {
+		let [e, t] = this.getSize(), n = calculateImageBounds(this.entity.center, e, t);
+		this.updateSourceCoordinates(n), this.updateLabel(), this.refreshEditHandles();
+	}
+	destroy() {
+		this.removeEditLayers(), super.destroy();
+	}
 }, MarkerRenderer = class {
 	constructor(e, t, n, r) {
-		this.marker = null, this.markerElement = null, this.imageElement = null, this.labelElement = null, this.placeholderElement = null, this.isSelected = !1, this.imageAspectRatio = 1, this.imageLoaded = !1, this.destroyed = !1, this.map = e, this.entity = t, this.globalNameConfig = n, this.globalSelectNameConfig = r, this.loadImageAndCreateMarker(t.src);
+		this.marker = null, this.markerElement = null, this.imageElement = null, this.labelElement = null, this.placeholderElement = null, this.isSelected = !1, this.imageAspectRatio = 1, this.imageLoaded = !1, this.destroyed = !1, this.isEditing = !1, this.moveIconElement = null, this.map = e, this.entity = t, this.globalNameConfig = n, this.globalSelectNameConfig = r, this.loadImageAndCreateMarker(t.src);
 	}
 	loadImageAndCreateMarker(e) {
 		if (!e) {
@@ -674,7 +858,47 @@ var CanvasImageRenderer = class extends BaseCanvasRenderer {
 		(t.width !== e.width || t.rotation !== e.rotation || t.confidence !== e.confidence) && (this.imageElement.style.width = `${e.width}px`, this.imageElement.style.height = `${n}px`, this.imageElement.style.transform = `rotate(${r}deg)`, this.imageElement.style.opacity = `${i}`), t.name !== e.name && (e.name && !this.labelElement ? (this.labelElement = document.createElement("div"), this.labelElement.className = "mapbox-marker-label", this.labelElement.textContent = e.name, this.updateLabelStyle(), this.markerElement?.appendChild(this.labelElement), this.placeholderElement = document.createElement("div"), this.placeholderElement.className = "mapbox-marker-placeholder", this.placeholderElement.textContent = e.name, this.markerElement?.insertBefore(this.placeholderElement, this.markerElement.firstChild)) : !e.name && this.labelElement ? (this.labelElement.remove(), this.labelElement = null, this.placeholderElement?.remove(), this.placeholderElement = null) : this.labelElement && (this.labelElement.textContent = e.name || "", this.placeholderElement && (this.placeholderElement.textContent = e.name || ""))), t.confidence !== e.confidence && this.updateLabelStyle();
 	}
 	destroy() {
-		this.destroyed = !0, this.marker &&= (this.marker.remove(), null), this.markerElement = null, this.imageElement = null, this.labelElement = null, this.placeholderElement = null;
+		this.removeMoveIcon(), this.destroyed = !0, this.marker &&= (this.marker.remove(), null), this.markerElement = null, this.imageElement = null, this.labelElement = null, this.placeholderElement = null;
+	}
+	createMoveIcon() {
+		if (this.moveIconElement || !this.markerElement) return;
+		let e = document.createElement("div");
+		e.className = "mapbox-marker-move-icon", e.style.cssText = "width:28px;height:28px;border-radius:50%;background:rgba(51,136,255,0.9);display:flex;align-items:center;justify-content:center;cursor:move;position:absolute;left:50%;bottom:0;transform:translate(-50%,100%);pointer-events:none;";
+		let t = document.createElement("img");
+		t.src = move_default, t.style.cssText = "width:60%;height:60%;", e.appendChild(t), this.markerElement.appendChild(e), this.moveIconElement = e;
+	}
+	removeMoveIcon() {
+		this.moveIconElement &&= (this.moveIconElement.remove(), null);
+	}
+	setEditing(e) {
+		this.isEditing !== e && (this.isEditing = e, e ? this.createMoveIcon() : this.removeMoveIcon());
+	}
+	getEditHandleAt(e, t) {
+		if (!this.isEditing) return null;
+		let n = this.map.project(e);
+		if (this.moveIconElement) {
+			let t = this.moveIconElement.getBoundingClientRect(), r = this.map.getContainer().getBoundingClientRect(), i = t.left + t.width / 2 - r.left, a = t.top + t.height / 2 - r.top, o = n.x - i, s = n.y - a;
+			if (o * o + s * s <= 256) return {
+				type: "move",
+				index: 0,
+				position: e
+			};
+		}
+		return null;
+	}
+	applyHandleMove(e, t) {
+		let n = t[0] - e.position[0], r = t[1] - e.position[1], i = [this.entity.center[0] + n, this.entity.center[1] + r], a = {
+			...this.entity,
+			center: i
+		};
+		return this.entity = a, this.marker && this.marker.setLngLat(i), a;
+	}
+	updateEditPreview(e, t) {
+		let n = t[0] - e.position[0], r = t[1] - e.position[1], i = [this.entity.center[0] + n, this.entity.center[1] + r];
+		this.marker && this.marker.setLngLat(i);
+	}
+	cancelEditPreview() {
+		this.marker && this.marker.setLngLat(this.entity.center);
 	}
 }, UnitRenderer = class extends MarkerRenderer {
 	constructor(e, t, n, r) {
@@ -840,7 +1064,7 @@ var CanvasImageRenderer = class extends BaseCanvasRenderer {
 		};
 	}
 	constructor(e, t, n, r, i, a) {
-		this.isSelected = !1, this.initialized = !1, this.map = e, this.entity = t, this.globalNameConfig = n, this.globalSelectNameConfig = r, this.globalAreaConfig = i, this.globalLengthConfig = a, this.sourceId = `polygon-source-${t.id}`, this.fillLayerId = `polygon-fill-${t.id}`, this.strokeLayerId = `polygon-stroke-${t.id}`, this.labelLayerId = `polygon-label-${t.id}`, this.areaLayerId = `polygon-area-${t.id}`, this.lengthLayerId = `polygon-length-${t.id}`, this.initLayers();
+		this.isSelected = !1, this.initialized = !1, this.isEditing = !1, this.map = e, this.entity = t, this.globalNameConfig = n, this.globalSelectNameConfig = r, this.globalAreaConfig = i, this.globalLengthConfig = a, this.sourceId = `polygon-source-${t.id}`, this.fillLayerId = `polygon-fill-${t.id}`, this.strokeLayerId = `polygon-stroke-${t.id}`, this.labelLayerId = `polygon-label-${t.id}`, this.areaLayerId = `polygon-area-${t.id}`, this.lengthLayerId = `polygon-length-${t.id}`, this.editSourceId = `polygon-edit-source-${t.id}`, this.editHandleLayerId = `polygon-edit-handles-${t.id}`, this.editMidpointLayerId = `polygon-edit-midpoints-${t.id}`, this.editMoveLayerId = `polygon-edit-move-${t.id}`, this.initLayers();
 	}
 	get nameStyle() {
 		return resolveNameConfig(this.entity.nameConfig, this.globalNameConfig, DEFAULT_NAME_CONFIG);
@@ -1162,8 +1386,201 @@ var CanvasImageRenderer = class extends BaseCanvasRenderer {
 		}
 		(n.fillColor !== t.fillColor || n.fillOpacity !== t.fillOpacity || n.confidence !== t.confidence) && this.map.getLayer(this.fillLayerId) && (this.map.setPaintProperty(this.fillLayerId, "fill-color", t.fillColor ?? e.DEFAULTS.fillColor), this.map.setPaintProperty(this.fillLayerId, "fill-opacity", (t.fillOpacity ?? e.DEFAULTS.fillOpacity) * i)), (n.strokeColor !== t.strokeColor || n.strokeWidth !== t.strokeWidth || n.strokeOpacity !== t.strokeOpacity || n.confidence !== t.confidence) && this.map.getLayer(this.strokeLayerId) && (this.isSelected || this.map.setPaintProperty(this.strokeLayerId, "line-color", t.strokeColor ?? e.DEFAULTS.strokeColor), this.map.setPaintProperty(this.strokeLayerId, "line-width", t.strokeWidth ?? e.DEFAULTS.strokeWidth), this.map.setPaintProperty(this.strokeLayerId, "line-opacity", (t.strokeOpacity ?? e.DEFAULTS.strokeOpacity) * i)), n.confidence !== t.confidence && (this.map.getLayer(this.labelLayerId) && this.map.setPaintProperty(this.labelLayerId, "text-opacity", i), this.map.getLayer(this.areaLayerId) && this.map.setPaintProperty(this.areaLayerId, "text-opacity", i), this.map.getLayer(this.lengthLayerId) && this.map.setPaintProperty(this.lengthLayerId, "text-opacity", i));
 	}
+	getEditHandleGeoJSON(e) {
+		let t = e ?? this.entity.coordinates;
+		if (!t || t.length < 3) return {
+			type: "FeatureCollection",
+			features: []
+		};
+		let n = [];
+		for (let e = 0; e < t.length; e++) n.push({
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: t[e]
+			},
+			properties: {
+				handleType: "vertex",
+				index: e
+			}
+		});
+		for (let e = 0; e < t.length; e++) {
+			let r = t[e], i = t[(e + 1) % t.length];
+			n.push({
+				type: "Feature",
+				geometry: {
+					type: "Point",
+					coordinates: [(r[0] + i[0]) / 2, (r[1] + i[1]) / 2]
+				},
+				properties: {
+					handleType: "midpoint",
+					index: e
+				}
+			});
+		}
+		let r = 0, i = 0;
+		for (let e of t) r += e[0], i += e[1];
+		return r /= t.length, i /= t.length, n.push({
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: [r, i]
+			},
+			properties: {
+				handleType: "move",
+				index: 0
+			}
+		}), {
+			type: "FeatureCollection",
+			features: n
+		};
+	}
+	createEditLayers() {
+		this.map.getSource(this.editSourceId) || (ensureMoveIcon(this.map), this.map.addSource(this.editSourceId, {
+			type: "geojson",
+			data: this.getEditHandleGeoJSON()
+		}), this.map.addLayer({
+			id: this.editMidpointLayerId,
+			type: "circle",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"midpoint"
+			],
+			paint: {
+				"circle-radius": 4,
+				"circle-color": "#3388ff",
+				"circle-opacity": .5,
+				"circle-stroke-color": "#3388ff",
+				"circle-stroke-width": 1
+			}
+		}), this.map.addLayer({
+			id: this.editHandleLayerId,
+			type: "circle",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"vertex"
+			],
+			paint: {
+				"circle-radius": 6,
+				"circle-color": "#ffffff",
+				"circle-stroke-color": "#3388ff",
+				"circle-stroke-width": 2
+			}
+		}), this.map.addLayer({
+			id: this.editMoveLayerId,
+			type: "symbol",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"move"
+			],
+			layout: {
+				"icon-image": MOVE_ICON_ID,
+				"icon-allow-overlap": !0,
+				"icon-ignore-placement": !0
+			}
+		}));
+	}
+	removeEditLayers() {
+		this.map.getLayer(this.editMoveLayerId) && this.map.removeLayer(this.editMoveLayerId), this.map.getLayer(this.editHandleLayerId) && this.map.removeLayer(this.editHandleLayerId), this.map.getLayer(this.editMidpointLayerId) && this.map.removeLayer(this.editMidpointLayerId), this.map.getSource(this.editSourceId) && this.map.removeSource(this.editSourceId);
+	}
+	refreshEditHandles(e) {
+		let t = this.map.getSource(this.editSourceId);
+		t && t.setData(this.getEditHandleGeoJSON(e));
+	}
+	setEditing(e) {
+		this.isEditing !== e && (this.isEditing = e, this.initialized && (e ? this.createEditLayers() : this.removeEditLayers()));
+	}
+	getEditHandleAt(e, t) {
+		if (!this.isEditing) return null;
+		let n = this.entity.coordinates;
+		if (!n || n.length < 3) return null;
+		let r = this.map.project(e), i = 0, a = 0;
+		for (let e of n) i += e[0], a += e[1];
+		i /= n.length, a /= n.length;
+		let o = this.map.project([i, a]), s = r.x - o.x, c = r.y - o.y;
+		if (s * s + c * c <= 144) return {
+			type: "move",
+			index: 0,
+			position: [i, a]
+		};
+		for (let e = 0; e < n.length; e++) {
+			let t = this.map.project(n[e]), i = r.x - t.x, a = r.y - t.y;
+			if (i * i + a * a <= 100) return {
+				type: "vertex",
+				index: e,
+				position: n[e]
+			};
+		}
+		for (let e = 0; e < n.length; e++) {
+			let t = n[e], i = n[(e + 1) % n.length], a = [(t[0] + i[0]) / 2, (t[1] + i[1]) / 2], o = this.map.project(a), s = r.x - o.x, c = r.y - o.y;
+			if (s * s + c * c <= 100) return {
+				type: "midpoint",
+				index: e,
+				position: a
+			};
+		}
+		return null;
+	}
+	offsetCoordinates(e, t, n) {
+		let r = n[0] - t[0], i = n[1] - t[1];
+		return e.map((e) => [e[0] + r, e[1] + i]);
+	}
+	applyHandleMove(e, t) {
+		let n;
+		e.type === "move" ? n = this.offsetCoordinates(this.entity.coordinates, e.position, t) : (n = [...this.entity.coordinates], n[e.index] = t);
+		let r = {
+			...this.entity,
+			coordinates: n
+		};
+		this.entity = r;
+		let i = this.map.getSource(this.sourceId);
+		return i && i.setData(this.getGeoJSON()), this.refreshEditHandles(), r;
+	}
+	updateEditPreview(e, t) {
+		let n;
+		e.type === "move" ? n = this.offsetCoordinates(this.entity.coordinates, e.position, t) : (n = [...this.entity.coordinates], n[e.index] = t);
+		let r = this.entity;
+		this.entity = {
+			...this.entity,
+			coordinates: n
+		};
+		let i = this.map.getSource(this.sourceId);
+		i && i.setData(this.getGeoJSON()), this.entity = r, this.refreshEditHandles(n);
+	}
+	cancelEditPreview() {
+		let e = this.map.getSource(this.sourceId);
+		e && e.setData(this.getGeoJSON()), this.refreshEditHandles();
+	}
+	deleteVertex(e) {
+		let t = this.entity.coordinates;
+		if (!t || t.length <= 3) return null;
+		let n = t.filter((t, n) => n !== e), r = {
+			...this.entity,
+			coordinates: n
+		};
+		this.entity = r;
+		let i = this.map.getSource(this.sourceId);
+		return i && i.setData(this.getGeoJSON()), this.refreshEditHandles(), r;
+	}
+	addVertex(e, t) {
+		let n = [...this.entity.coordinates];
+		n.splice(e + 1, 0, t);
+		let r = {
+			...this.entity,
+			coordinates: n
+		};
+		this.entity = r;
+		let i = this.map.getSource(this.sourceId);
+		return i && i.setData(this.getGeoJSON()), this.refreshEditHandles(), r;
+	}
 	destroy() {
-		this.initialized &&= (this.map.getLayer(this.lengthLayerId) && this.map.removeLayer(this.lengthLayerId), this.map.getLayer(this.areaLayerId) && this.map.removeLayer(this.areaLayerId), this.map.getLayer(this.labelLayerId) && this.map.removeLayer(this.labelLayerId), this.map.getLayer(this.strokeLayerId) && this.map.removeLayer(this.strokeLayerId), this.map.getLayer(this.fillLayerId) && this.map.removeLayer(this.fillLayerId), this.map.getSource(this.sourceId) && this.map.removeSource(this.sourceId), !1);
+		this.initialized &&= (this.removeEditLayers(), this.map.getLayer(this.lengthLayerId) && this.map.removeLayer(this.lengthLayerId), this.map.getLayer(this.areaLayerId) && this.map.removeLayer(this.areaLayerId), this.map.getLayer(this.labelLayerId) && this.map.removeLayer(this.labelLayerId), this.map.getLayer(this.strokeLayerId) && this.map.removeLayer(this.strokeLayerId), this.map.getLayer(this.fillLayerId) && this.map.removeLayer(this.fillLayerId), this.map.getSource(this.sourceId) && this.map.removeSource(this.sourceId), !1);
 	}
 }, PolylineRenderer = class e {
 	static {
@@ -1176,7 +1593,7 @@ var CanvasImageRenderer = class extends BaseCanvasRenderer {
 		};
 	}
 	constructor(e, t, n, r, i) {
-		this.isSelected = !1, this.initialized = !1, this.map = e, this.entity = t, this.globalNameConfig = n, this.globalSelectNameConfig = r, this.globalLengthConfig = i, this.sourceId = `polyline-source-${t.id}`, this.lineLayerId = `polyline-stroke-${t.id}`, this.labelLayerId = `polyline-label-${t.id}`, this.lengthLayerId = `polyline-length-${t.id}`, this.initLayers();
+		this.isSelected = !1, this.initialized = !1, this.isEditing = !1, this.map = e, this.entity = t, this.globalNameConfig = n, this.globalSelectNameConfig = r, this.globalLengthConfig = i, this.sourceId = `polyline-source-${t.id}`, this.lineLayerId = `polyline-stroke-${t.id}`, this.labelLayerId = `polyline-label-${t.id}`, this.lengthLayerId = `polyline-length-${t.id}`, this.editSourceId = `polyline-edit-source-${t.id}`, this.editHandleLayerId = `polyline-edit-handles-${t.id}`, this.editMidpointLayerId = `polyline-edit-midpoints-${t.id}`, this.editMoveLayerId = `polyline-edit-move-${t.id}`, this.initLayers();
 	}
 	get nameStyle() {
 		return resolveNameConfig(this.entity.nameConfig, this.globalNameConfig, DEFAULT_NAME_CONFIG);
@@ -1423,8 +1840,201 @@ var CanvasImageRenderer = class extends BaseCanvasRenderer {
 		}
 		(n.strokeColor !== t.strokeColor || n.strokeWidth !== t.strokeWidth || n.strokeOpacity !== t.strokeOpacity || n.confidence !== t.confidence || n.dashArray !== t.dashArray) && this.map.getLayer(this.lineLayerId) && (this.isSelected || this.map.setPaintProperty(this.lineLayerId, "line-color", t.strokeColor ?? e.DEFAULTS.strokeColor), this.map.setPaintProperty(this.lineLayerId, "line-width", t.strokeWidth ?? e.DEFAULTS.strokeWidth), this.map.setPaintProperty(this.lineLayerId, "line-opacity", (t.strokeOpacity ?? e.DEFAULTS.strokeOpacity) * i), t.dashArray && this.map.setPaintProperty(this.lineLayerId, "line-dasharray", t.dashArray)), (n.lineCap !== t.lineCap || n.lineJoin !== t.lineJoin) && this.map.getLayer(this.lineLayerId) && (this.map.setLayoutProperty(this.lineLayerId, "line-cap", t.lineCap ?? e.DEFAULTS.lineCap), this.map.setLayoutProperty(this.lineLayerId, "line-join", t.lineJoin ?? e.DEFAULTS.lineJoin)), n.confidence !== t.confidence && this.map.getLayer(this.labelLayerId) && this.map.setPaintProperty(this.labelLayerId, "text-opacity", i), n.confidence !== t.confidence && this.map.getLayer(this.lengthLayerId) && this.map.setPaintProperty(this.lengthLayerId, "text-opacity", i);
 	}
+	getEditHandleGeoJSON(e) {
+		let t = e ?? this.entity.coordinates;
+		if (!t || t.length < 2) return {
+			type: "FeatureCollection",
+			features: []
+		};
+		let n = [];
+		for (let e = 0; e < t.length; e++) n.push({
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: t[e]
+			},
+			properties: {
+				handleType: "vertex",
+				index: e
+			}
+		});
+		for (let e = 0; e < t.length - 1; e++) {
+			let r = t[e], i = t[e + 1];
+			n.push({
+				type: "Feature",
+				geometry: {
+					type: "Point",
+					coordinates: [(r[0] + i[0]) / 2, (r[1] + i[1]) / 2]
+				},
+				properties: {
+					handleType: "midpoint",
+					index: e
+				}
+			});
+		}
+		let r = 0, i = 0;
+		for (let e of t) r += e[0], i += e[1];
+		return r /= t.length, i /= t.length, n.push({
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: [r, i]
+			},
+			properties: {
+				handleType: "move",
+				index: 0
+			}
+		}), {
+			type: "FeatureCollection",
+			features: n
+		};
+	}
+	createEditLayers() {
+		this.map.getSource(this.editSourceId) || (ensureMoveIcon(this.map), this.map.addSource(this.editSourceId, {
+			type: "geojson",
+			data: this.getEditHandleGeoJSON()
+		}), this.map.addLayer({
+			id: this.editMidpointLayerId,
+			type: "circle",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"midpoint"
+			],
+			paint: {
+				"circle-radius": 4,
+				"circle-color": "#3388ff",
+				"circle-opacity": .5,
+				"circle-stroke-color": "#3388ff",
+				"circle-stroke-width": 1
+			}
+		}), this.map.addLayer({
+			id: this.editHandleLayerId,
+			type: "circle",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"vertex"
+			],
+			paint: {
+				"circle-radius": 6,
+				"circle-color": "#ffffff",
+				"circle-stroke-color": "#3388ff",
+				"circle-stroke-width": 2
+			}
+		}), this.map.addLayer({
+			id: this.editMoveLayerId,
+			type: "symbol",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"move"
+			],
+			layout: {
+				"icon-image": MOVE_ICON_ID,
+				"icon-allow-overlap": !0,
+				"icon-ignore-placement": !0
+			}
+		}));
+	}
+	removeEditLayers() {
+		this.map.getLayer(this.editMoveLayerId) && this.map.removeLayer(this.editMoveLayerId), this.map.getLayer(this.editHandleLayerId) && this.map.removeLayer(this.editHandleLayerId), this.map.getLayer(this.editMidpointLayerId) && this.map.removeLayer(this.editMidpointLayerId), this.map.getSource(this.editSourceId) && this.map.removeSource(this.editSourceId);
+	}
+	refreshEditHandles(e) {
+		let t = this.map.getSource(this.editSourceId);
+		t && t.setData(this.getEditHandleGeoJSON(e));
+	}
+	setEditing(e) {
+		this.isEditing !== e && (this.isEditing = e, this.initialized && (e ? this.createEditLayers() : this.removeEditLayers()));
+	}
+	getEditHandleAt(e, t) {
+		if (!this.isEditing) return null;
+		let n = this.entity.coordinates;
+		if (!n || n.length < 2) return null;
+		let r = this.map.project(e), i = 0, a = 0;
+		for (let e of n) i += e[0], a += e[1];
+		i /= n.length, a /= n.length;
+		let o = this.map.project([i, a]), s = r.x - o.x, c = r.y - o.y;
+		if (s * s + c * c <= 144) return {
+			type: "move",
+			index: 0,
+			position: [i, a]
+		};
+		for (let e = 0; e < n.length; e++) {
+			let t = this.map.project(n[e]), i = r.x - t.x, a = r.y - t.y;
+			if (i * i + a * a <= 100) return {
+				type: "vertex",
+				index: e,
+				position: n[e]
+			};
+		}
+		for (let e = 0; e < n.length - 1; e++) {
+			let t = n[e], i = n[e + 1], a = [(t[0] + i[0]) / 2, (t[1] + i[1]) / 2], o = this.map.project(a), s = r.x - o.x, c = r.y - o.y;
+			if (s * s + c * c <= 100) return {
+				type: "midpoint",
+				index: e,
+				position: a
+			};
+		}
+		return null;
+	}
+	offsetCoordinates(e, t, n) {
+		let r = n[0] - t[0], i = n[1] - t[1];
+		return e.map((e) => [e[0] + r, e[1] + i]);
+	}
+	applyHandleMove(e, t) {
+		let n;
+		e.type === "move" ? n = this.offsetCoordinates(this.entity.coordinates, e.position, t) : (n = [...this.entity.coordinates], n[e.index] = t);
+		let r = {
+			...this.entity,
+			coordinates: n
+		};
+		this.entity = r;
+		let i = this.map.getSource(this.sourceId);
+		return i && i.setData(this.getGeoJSON()), this.refreshEditHandles(), r;
+	}
+	updateEditPreview(e, t) {
+		let n;
+		e.type === "move" ? n = this.offsetCoordinates(this.entity.coordinates, e.position, t) : (n = [...this.entity.coordinates], n[e.index] = t);
+		let r = this.entity;
+		this.entity = {
+			...this.entity,
+			coordinates: n
+		};
+		let i = this.map.getSource(this.sourceId);
+		i && i.setData(this.getGeoJSON()), this.entity = r, this.refreshEditHandles(n);
+	}
+	cancelEditPreview() {
+		let e = this.map.getSource(this.sourceId);
+		e && e.setData(this.getGeoJSON()), this.refreshEditHandles();
+	}
+	deleteVertex(e) {
+		let t = this.entity.coordinates;
+		if (!t || t.length <= 2) return null;
+		let n = t.filter((t, n) => n !== e), r = {
+			...this.entity,
+			coordinates: n
+		};
+		this.entity = r;
+		let i = this.map.getSource(this.sourceId);
+		return i && i.setData(this.getGeoJSON()), this.refreshEditHandles(), r;
+	}
+	addVertex(e, t) {
+		let n = [...this.entity.coordinates];
+		n.splice(e + 1, 0, t);
+		let r = {
+			...this.entity,
+			coordinates: n
+		};
+		this.entity = r;
+		let i = this.map.getSource(this.sourceId);
+		return i && i.setData(this.getGeoJSON()), this.refreshEditHandles(), r;
+	}
 	destroy() {
-		this.initialized &&= (this.map.getLayer(this.lengthLayerId) && this.map.removeLayer(this.lengthLayerId), this.map.getLayer(this.labelLayerId) && this.map.removeLayer(this.labelLayerId), this.map.getLayer(this.lineLayerId) && this.map.removeLayer(this.lineLayerId), this.map.getSource(this.sourceId) && this.map.removeSource(this.sourceId), !1);
+		this.initialized &&= (this.removeEditLayers(), this.map.getLayer(this.lengthLayerId) && this.map.removeLayer(this.lengthLayerId), this.map.getLayer(this.labelLayerId) && this.map.removeLayer(this.labelLayerId), this.map.getLayer(this.lineLayerId) && this.map.removeLayer(this.lineLayerId), this.map.getSource(this.sourceId) && this.map.removeSource(this.sourceId), !1);
 	}
 };
 function createCirclePolygon$1(e, t, n = 64) {
@@ -1452,7 +2062,7 @@ var CircleRenderer = class e {
 		};
 	}
 	constructor(e, t, n, r, i, a) {
-		this.isSelected = !1, this.initialized = !1, this.gradientLayerIds = [], this.gradientSourceIds = [], this.map = e, this.entity = t, this.globalNameConfig = n, this.globalSelectNameConfig = r, this.globalAreaConfig = i, this.globalCircleConfig = a, this.sourceId = `circle-source-${t.id}`, this.fillLayerId = `circle-fill-${t.id}`, this.strokeLayerId = `circle-stroke-${t.id}`, this.centerPointLayerId = `circle-center-${t.id}`, this.labelLayerId = `circle-label-${t.id}`, this.areaLayerId = `circle-area-${t.id}`, this.radiusLineLayerId = `circle-radius-line-${t.id}`, this.radiusLabelLayerId = `circle-radius-label-${t.id}`, this.initLayers();
+		this.isSelected = !1, this.initialized = !1, this.gradientLayerIds = [], this.gradientSourceIds = [], this.isEditing = !1, this.map = e, this.entity = t, this.globalNameConfig = n, this.globalSelectNameConfig = r, this.globalAreaConfig = i, this.globalCircleConfig = a, this.sourceId = `circle-source-${t.id}`, this.fillLayerId = `circle-fill-${t.id}`, this.strokeLayerId = `circle-stroke-${t.id}`, this.centerPointLayerId = `circle-center-${t.id}`, this.labelLayerId = `circle-label-${t.id}`, this.areaLayerId = `circle-area-${t.id}`, this.radiusLineLayerId = `circle-radius-line-${t.id}`, this.radiusLabelLayerId = `circle-radius-label-${t.id}`, this.editSourceId = `circle-edit-source-${t.id}`, this.editHandleLayerId = `circle-edit-handles-${t.id}`, this.editMoveLayerId = `circle-edit-move-${t.id}`, this.initLayers();
 	}
 	get nameStyle() {
 		return resolveNameConfig(this.entity.nameConfig, this.globalNameConfig, DEFAULT_NAME_CONFIG);
@@ -1872,9 +2482,146 @@ var CircleRenderer = class e {
 			this.map.getLayer(this.gradientLayerIds[n]) && (this.map.setPaintProperty(this.gradientLayerIds[n], "fill-color", `rgb(${i.r}, ${i.g}, ${i.b})`), this.map.setPaintProperty(this.gradientLayerIds[n], "fill-opacity", a));
 		}
 	}
+	static {
+		this.EDGE_BEARINGS = [
+			0,
+			90,
+			180,
+			270
+		];
+	}
+	getEditHandlePositions(t, n) {
+		let r = t ?? this.entity.center, i = n ?? this.entity.radius, a = [];
+		for (let t = 0; t < e.EDGE_BEARINGS.length; t++) a.push({
+			type: "edge",
+			index: t,
+			position: destinationPoint(r, i, e.EDGE_BEARINGS[t])
+		});
+		return a.push({
+			type: "move",
+			index: 0,
+			position: r
+		}), a;
+	}
+	getEditHandleGeoJSON(e, t) {
+		return {
+			type: "FeatureCollection",
+			features: this.getEditHandlePositions(e, t).map((e) => ({
+				type: "Feature",
+				geometry: {
+					type: "Point",
+					coordinates: e.position
+				},
+				properties: {
+					handleType: e.type,
+					index: e.index
+				}
+			}))
+		};
+	}
+	createEditLayers() {
+		this.map.getSource(this.editSourceId) || (ensureMoveIcon(this.map), this.map.addSource(this.editSourceId, {
+			type: "geojson",
+			data: this.getEditHandleGeoJSON()
+		}), this.map.addLayer({
+			id: this.editHandleLayerId,
+			type: "circle",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"edge"
+			],
+			paint: {
+				"circle-radius": 6,
+				"circle-color": "#ffffff",
+				"circle-stroke-color": "#3388ff",
+				"circle-stroke-width": 2
+			}
+		}), this.map.addLayer({
+			id: this.editMoveLayerId,
+			type: "symbol",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"move"
+			],
+			layout: {
+				"icon-image": MOVE_ICON_ID,
+				"icon-allow-overlap": !0,
+				"icon-ignore-placement": !0
+			}
+		}));
+	}
+	removeEditLayers() {
+		this.map.getLayer(this.editMoveLayerId) && this.map.removeLayer(this.editMoveLayerId), this.map.getLayer(this.editHandleLayerId) && this.map.removeLayer(this.editHandleLayerId), this.map.getSource(this.editSourceId) && this.map.removeSource(this.editSourceId);
+	}
+	refreshEditHandles(e, t) {
+		let n = this.map.getSource(this.editSourceId);
+		n && n.setData(this.getEditHandleGeoJSON(e, t));
+	}
+	setEditing(e) {
+		this.isEditing !== e && (this.isEditing = e, this.initialized && (e ? this.createEditLayers() : this.removeEditLayers()));
+	}
+	getEditHandleAt(e, t) {
+		if (!this.isEditing) return null;
+		let n = this.map.project(e), r = this.getEditHandlePositions(), i = r.find((e) => e.type === "move");
+		if (i) {
+			let e = this.map.project(i.position), t = n.x - e.x, r = n.y - e.y;
+			if (t * t + r * r <= 144) return {
+				type: "move",
+				index: i.index,
+				position: i.position
+			};
+		}
+		for (let e of r) {
+			if (e.type === "move") continue;
+			let t = this.map.project(e.position), r = n.x - t.x, i = n.y - t.y;
+			if (r * r + i * i <= 100) return {
+				type: e.type,
+				index: e.index,
+				position: e.position
+			};
+		}
+		return null;
+	}
+	applyHandleMove(e, t) {
+		let n;
+		if (e.type === "move") n = {
+			...this.entity,
+			center: t
+		};
+		else {
+			let e = this.calculateDistance(this.entity.center, t);
+			n = {
+				...this.entity,
+				radius: e
+			};
+		}
+		this.entity = n;
+		let r = this.map.getSource(this.sourceId);
+		return r && r.setData(this.getGeoJSON()), this.refreshEditHandles(), n;
+	}
+	updateEditPreview(e, t) {
+		let n, r;
+		e.type === "move" ? (n = t, r = this.entity.radius) : (n = this.entity.center, r = this.calculateDistance(this.entity.center, t));
+		let i = this.entity;
+		this.entity = {
+			...this.entity,
+			center: n,
+			radius: r
+		};
+		let a = this.map.getSource(this.sourceId);
+		a && a.setData(this.getGeoJSON()), this.entity = i, this.refreshEditHandles(n, r);
+	}
+	cancelEditPreview() {
+		let e = this.map.getSource(this.sourceId);
+		e && e.setData(this.getGeoJSON()), this.refreshEditHandles();
+	}
 	destroy() {
 		if (this.initialized) {
-			this.map.getLayer(this.radiusLabelLayerId) && this.map.removeLayer(this.radiusLabelLayerId), this.map.getLayer(this.radiusLineLayerId) && this.map.removeLayer(this.radiusLineLayerId), this.map.getLayer(this.areaLayerId) && this.map.removeLayer(this.areaLayerId), this.map.getLayer(this.labelLayerId) && this.map.removeLayer(this.labelLayerId), this.map.getLayer(this.centerPointLayerId) && this.map.removeLayer(this.centerPointLayerId), this.map.getLayer(this.strokeLayerId) && this.map.removeLayer(this.strokeLayerId), this.map.getLayer(this.fillLayerId) && this.map.removeLayer(this.fillLayerId);
+			this.removeEditLayers(), this.map.getLayer(this.radiusLabelLayerId) && this.map.removeLayer(this.radiusLabelLayerId), this.map.getLayer(this.radiusLineLayerId) && this.map.removeLayer(this.radiusLineLayerId), this.map.getLayer(this.areaLayerId) && this.map.removeLayer(this.areaLayerId), this.map.getLayer(this.labelLayerId) && this.map.removeLayer(this.labelLayerId), this.map.getLayer(this.centerPointLayerId) && this.map.removeLayer(this.centerPointLayerId), this.map.getLayer(this.strokeLayerId) && this.map.removeLayer(this.strokeLayerId), this.map.getLayer(this.fillLayerId) && this.map.removeLayer(this.fillLayerId);
 			for (let e of this.gradientLayerIds) this.map.getLayer(e) && this.map.removeLayer(e);
 			for (let e of this.gradientSourceIds) this.map.getSource(e) && this.map.removeSource(e);
 			this.map.getSource(this.sourceId) && this.map.removeSource(this.sourceId), this.initialized = !1;
@@ -1901,9 +2648,17 @@ function calculateCircleBounds(e, t) {
 		[a, s]
 	];
 }
-var CanvasCircleRenderer = class extends BaseCanvasRenderer {
+var CanvasCircleRenderer = class e extends BaseCanvasRenderer {
+	static {
+		this.EDGE_BEARINGS = [
+			0,
+			90,
+			180,
+			270
+		];
+	}
 	constructor(e, t, n, r, i, a) {
-		super(e, t, "canvas-circle", n, r, i), this.animationFrameId = null, this.animationTime = 0, this.pulsePhase = 0, this.globalCircleConfig = a, this.radiusSourceId = `canvas-circle-radius-source-${String(t.id)}`, this.radiusLineLayerId = `canvas-circle-radius-line-${String(t.id)}`, this.radiusLabelLayerId = `canvas-circle-radius-label-${String(t.id)}`;
+		super(e, t, "canvas-circle", n, r, i), this.animationFrameId = null, this.animationTime = 0, this.pulsePhase = 0, this.isEditing = !1, this.editSourceId = "", this.editHandleLayerId = "", this.editMoveLayerId = "", this.globalCircleConfig = a, this.radiusSourceId = `canvas-circle-radius-source-${String(t.id)}`, this.radiusLineLayerId = `canvas-circle-radius-line-${String(t.id)}`, this.radiusLabelLayerId = `canvas-circle-radius-label-${String(t.id)}`, this.editSourceId = `canvas-circle-edit-source-${String(t.id)}`, this.editHandleLayerId = `canvas-circle-edit-handles-${String(t.id)}`, this.editMoveLayerId = `canvas-circle-edit-move-${String(t.id)}`;
 		let o = calculateCircleBounds(t.center, t.radius);
 		this.init(o), this.initRadiusLayer(), t.isAnimating && this.startAnimation();
 	}
@@ -2117,7 +2872,141 @@ var CanvasCircleRenderer = class extends BaseCanvasRenderer {
 		return Math.sqrt((r * a) ** 2 + (i * 110540) ** 2) <= n;
 	}
 	destroy() {
-		this.stopAnimation(), this.map.getLayer(this.radiusLabelLayerId) && this.map.removeLayer(this.radiusLabelLayerId), this.map.getLayer(this.radiusLineLayerId) && this.map.removeLayer(this.radiusLineLayerId), this.map.getSource(this.radiusSourceId) && this.map.removeSource(this.radiusSourceId), super.destroy();
+		this.removeEditLayers(), this.stopAnimation(), this.map.getLayer(this.radiusLabelLayerId) && this.map.removeLayer(this.radiusLabelLayerId), this.map.getLayer(this.radiusLineLayerId) && this.map.removeLayer(this.radiusLineLayerId), this.map.getSource(this.radiusSourceId) && this.map.removeSource(this.radiusSourceId), super.destroy();
+	}
+	getEditHandlePositions(t, n) {
+		let r = t ?? this.entity.center, i = n ?? this.entity.radius, a = [];
+		for (let t = 0; t < e.EDGE_BEARINGS.length; t++) a.push({
+			type: "edge",
+			index: t,
+			position: destinationPoint(r, i, e.EDGE_BEARINGS[t])
+		});
+		return a.push({
+			type: "move",
+			index: 0,
+			position: r
+		}), a;
+	}
+	getEditHandleGeoJSON(e, t) {
+		return {
+			type: "FeatureCollection",
+			features: this.getEditHandlePositions(e, t).map((e) => ({
+				type: "Feature",
+				geometry: {
+					type: "Point",
+					coordinates: e.position
+				},
+				properties: {
+					handleType: e.type,
+					index: e.index
+				}
+			}))
+		};
+	}
+	createEditLayers() {
+		this.map.getSource(this.editSourceId) || (ensureMoveIcon(this.map), this.map.addSource(this.editSourceId, {
+			type: "geojson",
+			data: this.getEditHandleGeoJSON()
+		}), this.map.addLayer({
+			id: this.editHandleLayerId,
+			type: "circle",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"edge"
+			],
+			paint: {
+				"circle-radius": 6,
+				"circle-color": "#ffffff",
+				"circle-stroke-color": "#3388ff",
+				"circle-stroke-width": 2
+			}
+		}), this.map.addLayer({
+			id: this.editMoveLayerId,
+			type: "symbol",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"move"
+			],
+			layout: {
+				"icon-image": MOVE_ICON_ID,
+				"icon-allow-overlap": !0,
+				"icon-ignore-placement": !0
+			}
+		}));
+	}
+	removeEditLayers() {
+		this.map.getLayer(this.editMoveLayerId) && this.map.removeLayer(this.editMoveLayerId), this.map.getLayer(this.editHandleLayerId) && this.map.removeLayer(this.editHandleLayerId), this.map.getSource(this.editSourceId) && this.map.removeSource(this.editSourceId);
+	}
+	refreshEditHandles(e, t) {
+		let n = this.map.getSource(this.editSourceId);
+		n && n.setData(this.getEditHandleGeoJSON(e, t));
+	}
+	setEditing(e) {
+		this.isEditing !== e && (this.isEditing = e, e ? this.createEditLayers() : this.removeEditLayers());
+	}
+	getEditHandleAt(e, t) {
+		if (!this.isEditing) return null;
+		let n = this.map.project(e), r = this.getEditHandlePositions(), i = r.find((e) => e.type === "move");
+		if (i) {
+			let e = this.map.project(i.position), t = n.x - e.x, r = n.y - e.y;
+			if (t * t + r * r <= 144) return {
+				type: "move",
+				index: i.index,
+				position: i.position
+			};
+		}
+		for (let e of r) {
+			if (e.type === "move") continue;
+			let t = this.map.project(e.position), r = n.x - t.x, i = n.y - t.y;
+			if (r * r + i * i <= 100) return {
+				type: e.type,
+				index: e.index,
+				position: e.position
+			};
+		}
+		return null;
+	}
+	applyHandleMove(e, t) {
+		let n;
+		if (e.type === "move") {
+			let r = t[0] - e.position[0], i = t[1] - e.position[1], a = [this.entity.center[0] + r, this.entity.center[1] + i];
+			n = {
+				...this.entity,
+				center: a
+			};
+		} else {
+			let e = distance(this.entity.center, t);
+			n = {
+				...this.entity,
+				radius: e
+			};
+		}
+		this.entity = n;
+		let r = calculateCircleBounds(n.center, n.radius);
+		return this.updateSourceCoordinates(r), this.updateLabel(), this.updateAreaLabel(), this.updateRadiusLayer(), this.refreshEditHandles(), n;
+	}
+	updateEditPreview(e, t) {
+		let n, r;
+		if (e.type === "move") {
+			let i = t[0] - e.position[0], a = t[1] - e.position[1];
+			n = [this.entity.center[0] + i, this.entity.center[1] + a], r = this.entity.radius;
+		} else n = this.entity.center, r = distance(this.entity.center, t);
+		let i = calculateCircleBounds(n, r);
+		this.updateSourceCoordinates(i);
+		let a = this.entity;
+		this.entity = {
+			...this.entity,
+			center: n,
+			radius: r
+		}, this.updateLabel(), this.entity = a, this.refreshEditHandles(n, r);
+	}
+	cancelEditPreview() {
+		let e = calculateCircleBounds(this.entity.center, this.entity.radius);
+		this.updateSourceCoordinates(e), this.updateLabel(), this.refreshEditHandles();
 	}
 };
 function createSquareCoordinates(e, t) {
@@ -2141,7 +3030,7 @@ var SquareRenderer = class e {
 		};
 	}
 	constructor(e, t, n, r, i, a) {
-		this.isSelected = !1, this.initialized = !1, this.map = e, this.entity = t, this.globalNameConfig = n, this.globalSelectNameConfig = r, this.globalAreaConfig = i, this.globalLengthConfig = a, this.sourceId = `square-source-${t.id}`, this.fillLayerId = `square-fill-${t.id}`, this.strokeLayerId = `square-stroke-${t.id}`, this.labelLayerId = `square-label-${t.id}`, this.areaLayerId = `square-area-${t.id}`, this.lengthLayerId = `square-length-${t.id}`, this.initLayers();
+		this.isSelected = !1, this.initialized = !1, this.isEditing = !1, this.map = e, this.entity = t, this.globalNameConfig = n, this.globalSelectNameConfig = r, this.globalAreaConfig = i, this.globalLengthConfig = a, this.sourceId = `square-source-${t.id}`, this.fillLayerId = `square-fill-${t.id}`, this.strokeLayerId = `square-stroke-${t.id}`, this.labelLayerId = `square-label-${t.id}`, this.areaLayerId = `square-area-${t.id}`, this.lengthLayerId = `square-length-${t.id}`, this.editSourceId = `square-edit-source-${t.id}`, this.editHandleLayerId = `square-edit-handles-${t.id}`, this.editMoveLayerId = `square-edit-move-${t.id}`, this.initLayers();
 	}
 	get nameStyle() {
 		return resolveNameConfig(this.entity.nameConfig, this.globalNameConfig, DEFAULT_NAME_CONFIG);
@@ -2440,8 +3329,142 @@ var SquareRenderer = class e {
 		}
 		(n.fillColor !== t.fillColor || n.fillOpacity !== t.fillOpacity || n.confidence !== t.confidence) && this.map.getLayer(this.fillLayerId) && (this.map.setPaintProperty(this.fillLayerId, "fill-color", t.fillColor ?? e.DEFAULTS.fillColor), this.map.setPaintProperty(this.fillLayerId, "fill-opacity", (t.fillOpacity ?? e.DEFAULTS.fillOpacity) * i)), (n.strokeColor !== t.strokeColor || n.strokeWidth !== t.strokeWidth || n.strokeOpacity !== t.strokeOpacity || n.confidence !== t.confidence) && this.map.getLayer(this.strokeLayerId) && (this.isSelected || this.map.setPaintProperty(this.strokeLayerId, "line-color", t.strokeColor ?? e.DEFAULTS.strokeColor), this.map.setPaintProperty(this.strokeLayerId, "line-width", t.strokeWidth ?? e.DEFAULTS.strokeWidth), this.map.setPaintProperty(this.strokeLayerId, "line-opacity", (t.strokeOpacity ?? e.DEFAULTS.strokeOpacity) * i)), n.confidence !== t.confidence && (this.map.getLayer(this.labelLayerId) && this.map.setPaintProperty(this.labelLayerId, "text-opacity", i), this.map.getLayer(this.areaLayerId) && this.map.setPaintProperty(this.areaLayerId, "text-opacity", i), this.map.getLayer(this.lengthLayerId) && this.map.setPaintProperty(this.lengthLayerId, "text-opacity", i));
 	}
+	getCorners(e, t) {
+		return createSquareCoordinates(e ?? this.entity.center, t ?? this.entity.length).slice(0, 4);
+	}
+	getEditHandleGeoJSON(e, t) {
+		let n = this.getCorners(e, t).map((e, t) => ({
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: e
+			},
+			properties: {
+				handleType: "vertex",
+				index: t
+			}
+		})), r = e ?? this.entity.center;
+		return n.push({
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: r
+			},
+			properties: {
+				handleType: "move",
+				index: 0
+			}
+		}), {
+			type: "FeatureCollection",
+			features: n
+		};
+	}
+	createEditLayers() {
+		this.map.getSource(this.editSourceId) || (ensureMoveIcon(this.map), this.map.addSource(this.editSourceId, {
+			type: "geojson",
+			data: this.getEditHandleGeoJSON()
+		}), this.map.addLayer({
+			id: this.editHandleLayerId,
+			type: "circle",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"vertex"
+			],
+			paint: {
+				"circle-radius": 6,
+				"circle-color": "#ffffff",
+				"circle-stroke-color": "#3388ff",
+				"circle-stroke-width": 2
+			}
+		}), this.map.addLayer({
+			id: this.editMoveLayerId,
+			type: "symbol",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"move"
+			],
+			layout: {
+				"icon-image": MOVE_ICON_ID,
+				"icon-allow-overlap": !0,
+				"icon-ignore-placement": !0
+			}
+		}));
+	}
+	removeEditLayers() {
+		this.map.getLayer(this.editMoveLayerId) && this.map.removeLayer(this.editMoveLayerId), this.map.getLayer(this.editHandleLayerId) && this.map.removeLayer(this.editHandleLayerId), this.map.getSource(this.editSourceId) && this.map.removeSource(this.editSourceId);
+	}
+	refreshEditHandles(e, t) {
+		let n = this.map.getSource(this.editSourceId);
+		n && n.setData(this.getEditHandleGeoJSON(e, t));
+	}
+	setEditing(e) {
+		this.isEditing !== e && (this.isEditing = e, this.initialized && (e ? this.createEditLayers() : this.removeEditLayers()));
+	}
+	getEditHandleAt(e, t) {
+		if (!this.isEditing) return null;
+		let n = this.getCorners(), r = this.map.project(e), i = this.entity.center, a = this.map.project(i), o = r.x - a.x, s = r.y - a.y;
+		if (o * o + s * s <= 144) return {
+			type: "move",
+			index: 0,
+			position: i
+		};
+		for (let e = 0; e < n.length; e++) {
+			let t = this.map.project(n[e]), i = r.x - t.x, a = r.y - t.y;
+			if (i * i + a * a <= 100) return {
+				type: "vertex",
+				index: e,
+				position: n[e]
+			};
+		}
+		return null;
+	}
+	computeNewLength(e) {
+		return distance(this.entity.center, e) * Math.SQRT2;
+	}
+	applyHandleMove(e, t) {
+		let n;
+		if (e.type === "move") {
+			let r = t[0] - e.position[0], i = t[1] - e.position[1], a = [this.entity.center[0] + r, this.entity.center[1] + i];
+			n = {
+				...this.entity,
+				center: a
+			};
+		} else {
+			let e = this.computeNewLength(t);
+			n = {
+				...this.entity,
+				length: e
+			};
+		}
+		this.entity = n;
+		let r = this.map.getSource(this.sourceId);
+		return r && r.setData(this.getGeoJSON()), this.refreshEditHandles(), n;
+	}
+	updateEditPreview(e, t) {
+		let n, r;
+		if (e.type === "move") {
+			let i = t[0] - e.position[0], a = t[1] - e.position[1];
+			n = [this.entity.center[0] + i, this.entity.center[1] + a], r = this.entity.length;
+		} else n = this.entity.center, r = this.computeNewLength(t);
+		let i = this.entity;
+		this.entity = {
+			...this.entity,
+			center: n,
+			length: r
+		};
+		let a = this.map.getSource(this.sourceId);
+		a && a.setData(this.getGeoJSON()), this.entity = i, this.refreshEditHandles(n, r);
+	}
+	cancelEditPreview() {
+		let e = this.map.getSource(this.sourceId);
+		e && e.setData(this.getGeoJSON()), this.refreshEditHandles();
+	}
 	destroy() {
-		this.initialized &&= (this.map.getLayer(this.lengthLayerId) && this.map.removeLayer(this.lengthLayerId), this.map.getLayer(this.areaLayerId) && this.map.removeLayer(this.areaLayerId), this.map.getLayer(this.labelLayerId) && this.map.removeLayer(this.labelLayerId), this.map.getLayer(this.strokeLayerId) && this.map.removeLayer(this.strokeLayerId), this.map.getLayer(this.fillLayerId) && this.map.removeLayer(this.fillLayerId), this.map.getSource(this.sourceId) && this.map.removeSource(this.sourceId), !1);
+		this.initialized &&= (this.removeEditLayers(), this.map.getLayer(this.lengthLayerId) && this.map.removeLayer(this.lengthLayerId), this.map.getLayer(this.areaLayerId) && this.map.removeLayer(this.areaLayerId), this.map.getLayer(this.labelLayerId) && this.map.removeLayer(this.labelLayerId), this.map.getLayer(this.strokeLayerId) && this.map.removeLayer(this.strokeLayerId), this.map.getLayer(this.fillLayerId) && this.map.removeLayer(this.fillLayerId), this.map.getSource(this.sourceId) && this.map.removeSource(this.sourceId), !1);
 	}
 };
 function createRectangleCoordinates(e) {
@@ -2465,7 +3488,7 @@ var RectangleRenderer = class e {
 		};
 	}
 	constructor(e, t, n, r, i, a) {
-		this.isSelected = !1, this.initialized = !1, this.map = e, this.entity = t, this.globalNameConfig = n, this.globalSelectNameConfig = r, this.globalAreaConfig = i, this.globalLengthConfig = a, this.sourceId = `rectangle-source-${t.id}`, this.fillLayerId = `rectangle-fill-${t.id}`, this.strokeLayerId = `rectangle-stroke-${t.id}`, this.labelLayerId = `rectangle-label-${t.id}`, this.areaLayerId = `rectangle-area-${t.id}`, this.lengthLayerId = `rectangle-length-${t.id}`, this.initLayers();
+		this.isSelected = !1, this.initialized = !1, this.isEditing = !1, this.map = e, this.entity = t, this.globalNameConfig = n, this.globalSelectNameConfig = r, this.globalAreaConfig = i, this.globalLengthConfig = a, this.sourceId = `rectangle-source-${t.id}`, this.fillLayerId = `rectangle-fill-${t.id}`, this.strokeLayerId = `rectangle-stroke-${t.id}`, this.labelLayerId = `rectangle-label-${t.id}`, this.areaLayerId = `rectangle-area-${t.id}`, this.lengthLayerId = `rectangle-length-${t.id}`, this.editSourceId = `rectangle-edit-source-${t.id}`, this.editHandleLayerId = `rectangle-edit-handles-${t.id}`, this.editMoveLayerId = `rectangle-edit-move-${t.id}`, this.initLayers();
 	}
 	get nameStyle() {
 		return resolveNameConfig(this.entity.nameConfig, this.globalNameConfig, DEFAULT_NAME_CONFIG);
@@ -2775,10 +3798,137 @@ var RectangleRenderer = class e {
 				}
 			}) : n.showLength && !t.showLength && this.map.getLayer(this.lengthLayerId) && this.map.removeLayer(this.lengthLayerId);
 		}
-		(n.fillColor !== t.fillColor || n.fillOpacity !== t.fillOpacity || n.confidence !== t.confidence) && this.map.getLayer(this.fillLayerId) && (this.map.setPaintProperty(this.fillLayerId, "fill-color", t.fillColor ?? e.DEFAULTS.fillColor), this.map.setPaintProperty(this.fillLayerId, "fill-opacity", (t.fillOpacity ?? e.DEFAULTS.fillOpacity) * i)), (n.strokeColor !== t.strokeColor || n.strokeWidth !== t.strokeWidth || n.strokeOpacity !== t.strokeOpacity || n.confidence !== t.confidence) && this.map.getLayer(this.strokeLayerId) && (this.isSelected || this.map.setPaintProperty(this.strokeLayerId, "line-color", t.strokeColor ?? e.DEFAULTS.strokeColor), this.map.setPaintProperty(this.strokeLayerId, "line-width", t.strokeWidth ?? e.DEFAULTS.strokeWidth), this.map.setPaintProperty(this.strokeLayerId, "line-opacity", (t.strokeOpacity ?? e.DEFAULTS.strokeOpacity) * i)), n.confidence !== t.confidence && (this.map.getLayer(this.labelLayerId) && this.map.setPaintProperty(this.labelLayerId, "text-opacity", i), this.map.getLayer(this.areaLayerId) && this.map.setPaintProperty(this.areaLayerId, "text-opacity", i), this.map.getLayer(this.lengthLayerId) && this.map.setPaintProperty(this.lengthLayerId, "text-opacity", i));
+		(n.fillColor !== t.fillColor || n.fillOpacity !== t.fillOpacity || n.confidence !== t.confidence) && this.map.getLayer(this.fillLayerId) && (this.map.setPaintProperty(this.fillLayerId, "fill-color", t.fillColor ?? e.DEFAULTS.fillColor), this.map.setPaintProperty(this.fillLayerId, "fill-opacity", (t.fillOpacity ?? e.DEFAULTS.fillOpacity) * i)), (n.strokeColor !== t.strokeColor || n.strokeWidth !== t.strokeWidth || n.strokeOpacity !== t.strokeOpacity || n.confidence !== t.confidence) && this.map.getLayer(this.strokeLayerId) && (this.isSelected || this.map.setPaintProperty(this.strokeLayerId, "line-color", t.strokeColor ?? e.DEFAULTS.strokeColor), this.map.setPaintProperty(this.strokeLayerId, "line-width", t.strokeWidth ?? e.DEFAULTS.strokeWidth), this.map.setPaintProperty(this.strokeLayerId, "line-opacity", (t.strokeOpacity ?? e.DEFAULTS.strokeOpacity) * i)), n.confidence !== t.confidence && (this.map.getLayer(this.labelLayerId) && this.map.setPaintProperty(this.labelLayerId, "text-opacity", i), this.map.getLayer(this.areaLayerId) && this.map.setPaintProperty(this.areaLayerId, "text-opacity", i), this.map.getLayer(this.lengthLayerId) && this.map.setPaintProperty(this.lengthLayerId, "text-opacity", i));
+	}
+	getCorners(e) {
+		return createRectangleCoordinates(e ?? this.entity.bounds).slice(0, 4);
+	}
+	getEditHandleGeoJSON(e) {
+		let t = this.getCorners(e).map((e, t) => ({
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: e
+			},
+			properties: {
+				handleType: "vertex",
+				index: t
+			}
+		})), n = e ?? this.entity.bounds, r = (n[0][0] + n[1][0]) / 2, i = (n[0][1] + n[1][1]) / 2;
+		return t.push({
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: [r, i]
+			},
+			properties: {
+				handleType: "move",
+				index: 0
+			}
+		}), {
+			type: "FeatureCollection",
+			features: t
+		};
+	}
+	createEditLayers() {
+		this.map.getSource(this.editSourceId) || (ensureMoveIcon(this.map), this.map.addSource(this.editSourceId, {
+			type: "geojson",
+			data: this.getEditHandleGeoJSON()
+		}), this.map.addLayer({
+			id: this.editHandleLayerId,
+			type: "circle",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"vertex"
+			],
+			paint: {
+				"circle-radius": 6,
+				"circle-color": "#ffffff",
+				"circle-stroke-color": "#3388ff",
+				"circle-stroke-width": 2
+			}
+		}), this.map.addLayer({
+			id: this.editMoveLayerId,
+			type: "symbol",
+			source: this.editSourceId,
+			filter: [
+				"==",
+				["get", "handleType"],
+				"move"
+			],
+			layout: {
+				"icon-image": MOVE_ICON_ID,
+				"icon-allow-overlap": !0,
+				"icon-ignore-placement": !0
+			}
+		}));
+	}
+	removeEditLayers() {
+		this.map.getLayer(this.editMoveLayerId) && this.map.removeLayer(this.editMoveLayerId), this.map.getLayer(this.editHandleLayerId) && this.map.removeLayer(this.editHandleLayerId), this.map.getSource(this.editSourceId) && this.map.removeSource(this.editSourceId);
+	}
+	refreshEditHandles(e) {
+		let t = this.map.getSource(this.editSourceId);
+		t && t.setData(this.getEditHandleGeoJSON(e));
+	}
+	setEditing(e) {
+		this.isEditing !== e && (this.isEditing = e, this.initialized && (e ? this.createEditLayers() : this.removeEditLayers()));
+	}
+	getEditHandleAt(e, t) {
+		if (!this.isEditing) return null;
+		let n = this.getCorners(), r = this.map.project(e), i = this.calculateRectangleCenter(), a = this.map.project(i), o = r.x - a.x, s = r.y - a.y;
+		if (o * o + s * s <= 144) return {
+			type: "move",
+			index: 0,
+			position: i
+		};
+		for (let e = 0; e < n.length; e++) {
+			let t = this.map.project(n[e]), i = r.x - t.x, a = r.y - t.y;
+			if (i * i + a * a <= 100) return {
+				type: "vertex",
+				index: e,
+				position: n[e]
+			};
+		}
+		return null;
+	}
+	computeNewBounds(e, t) {
+		let n = this.getCorners(), r = (e + 2) % 4, i = n[r];
+		return [[Math.min(t[0], i[0]), Math.min(t[1], i[1])], [Math.max(t[0], i[0]), Math.max(t[1], i[1])]];
+	}
+	offsetBounds(e, t, n) {
+		let r = n[0] - t[0], i = n[1] - t[1];
+		return [[e[0][0] + r, e[0][1] + i], [e[1][0] + r, e[1][1] + i]];
+	}
+	applyHandleMove(e, t) {
+		let n;
+		n = e.type === "move" ? this.offsetBounds(this.entity.bounds, e.position, t) : this.computeNewBounds(e.index, t);
+		let r = {
+			...this.entity,
+			bounds: n
+		};
+		this.entity = r;
+		let i = this.map.getSource(this.sourceId);
+		return i && i.setData(this.getGeoJSON()), this.refreshEditHandles(), r;
+	}
+	updateEditPreview(e, t) {
+		let n;
+		n = e.type === "move" ? this.offsetBounds(this.entity.bounds, e.position, t) : this.computeNewBounds(e.index, t);
+		let r = this.entity;
+		this.entity = {
+			...this.entity,
+			bounds: n
+		};
+		let i = this.map.getSource(this.sourceId);
+		i && i.setData(this.getGeoJSON()), this.entity = r, this.refreshEditHandles(n);
+	}
+	cancelEditPreview() {
+		let e = this.map.getSource(this.sourceId);
+		e && e.setData(this.getGeoJSON()), this.refreshEditHandles();
 	}
 	destroy() {
-		this.initialized &&= (this.map.getLayer(this.lengthLayerId) && this.map.removeLayer(this.lengthLayerId), this.map.getLayer(this.areaLayerId) && this.map.removeLayer(this.areaLayerId), this.map.getLayer(this.labelLayerId) && this.map.removeLayer(this.labelLayerId), this.map.getLayer(this.strokeLayerId) && this.map.removeLayer(this.strokeLayerId), this.map.getLayer(this.fillLayerId) && this.map.removeLayer(this.fillLayerId), this.map.getSource(this.sourceId) && this.map.removeSource(this.sourceId), !1);
+		this.initialized &&= (this.removeEditLayers(), this.map.getLayer(this.lengthLayerId) && this.map.removeLayer(this.lengthLayerId), this.map.getLayer(this.areaLayerId) && this.map.removeLayer(this.areaLayerId), this.map.getLayer(this.labelLayerId) && this.map.removeLayer(this.labelLayerId), this.map.getLayer(this.strokeLayerId) && this.map.removeLayer(this.strokeLayerId), this.map.getLayer(this.fillLayerId) && this.map.removeLayer(this.fillLayerId), this.map.getSource(this.sourceId) && this.map.removeSource(this.sourceId), !1);
 	}
 };
 const EntityPopup = ({ popupState: e, onClose: r, portalContainer: i, popupRef: s }) => {
@@ -3505,61 +4655,65 @@ function clearAllPreviewSources(e) {
 		"polyline-vertices-source"
 	]) clearPreviewSource(e, `${PREVIEW_PREFIX}${t}`);
 }
-function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, className: s = "", style: c }) {
-	let [l, u] = useState(!1), [d, f] = useState(null), [g, _] = useState({
+function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDrawModeChange: s, className: c = "", style: l }) {
+	let [u, d] = useState(!1), [f, g] = useState(null), [_, v] = useState({
 		showArea: !0,
 		showLength: !0,
 		showRadius: !0
-	}), v = r !== void 0, y = v ? {
+	}), y = r !== void 0, b = y ? {
 		showArea: r.showArea ?? !0,
 		showLength: r.showLength ?? !0,
 		showRadius: r.showRadius ?? !0
-	} : g, [b, x] = useState([]), S = useRef(/* @__PURE__ */ new Map()), C = useRef(0), T = useRef(null), E = useRef(null), D = useRef(null), O = useRef(null), k = useRef(null), A = useRef([]), j = useRef([]), M = useRef(y);
-	M.current = y;
-	let be = useRef(d);
-	be.current = d;
-	let xe = useCallback(() => `measure-${++C.current}`, []), Se = useRef(!1), Ce = useCallback(() => {
-		!e || !e.isStyleLoaded() || (initAllPreviewLayers(e), Se.current = !0);
+	} : _, [x, S] = useState([]), C = useRef(/* @__PURE__ */ new Map()), T = useRef(0), E = useRef(null), D = useRef(null), O = useRef(null), k = useRef(null), A = useRef(null), j = useRef([]), M = useRef([]), N = useRef(b);
+	N.current = b;
+	let Ce = useRef(f);
+	Ce.current = f;
+	let P = useCallback(() => `measure-${++T.current}`, []);
+	useEffect(() => {
+		s?.(f !== null);
+	}, [f, s]);
+	let we = useRef(!1), Te = useCallback(() => {
+		!e || !e.isStyleLoaded() || (initAllPreviewLayers(e), we.current = !0);
 	}, [e]);
 	useEffect(() => {
 		if (!e) return;
 		let t = () => {
-			initAllPreviewLayers(e), Se.current = !0;
+			initAllPreviewLayers(e), we.current = !0;
 		};
 		e.isStyleLoaded() ? t() : e.once("load", t);
 		let n = () => {
-			Se.current = !1;
+			we.current = !1;
 		};
 		return e.on("style.load", n), () => {
 			e.off("style.load", n);
 		};
 	}, [e]), useEffect(() => {
 		let e = (e) => {
-			T.current && !T.current.contains(e.target) && E.current && !E.current.contains(e.target) && u(!1);
+			E.current && !E.current.contains(e.target) && D.current && !D.current.contains(e.target) && d(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []);
-	let we = useCallback((t) => {
+	let F = useCallback((t) => {
 		if (!e) return;
-		let n = applyEntityConfig(t, M.current), r = null;
+		let n = applyEntityConfig(t, N.current), r = null;
 		if (n.type === "circle" ? r = new CircleRenderer(e, n) : n.type === "square" ? r = new SquareRenderer(e, n) : n.type === "rectangle" ? r = new RectangleRenderer(e, n) : n.type === "polygon" ? r = new PolygonRenderer(e, n) : n.type === "polyline" && (r = new PolylineRenderer(e, n)), r) {
-			S.current.set(n.id, r);
+			C.current.set(n.id, r);
 			let e = {
 				entity: n,
 				shapeLabel: SHAPE_LABELS[n.type] || n.type,
 				area: computeEntityArea(n),
 				lengthOrRadius: computeEntityLengthOrRadius(n)
 			};
-			x((t) => [...t, e]);
-		}
-	}, [e]), Te = useCallback((e) => {
-		let t = S.current.get(e);
-		t && (t.destroy(), S.current.delete(e)), x((t) => t.filter((t) => t.entity.id !== e));
-	}, []), Ee = useCallback(() => {
-		S.current.forEach((e) => e.destroy()), S.current.clear(), x([]);
-	}, []), De = useCallback((t) => {
+			S((t) => [...t, e]);
+		}
+	}, [e]), Ee = useCallback((e) => {
+		let t = C.current.get(e);
+		t && (t.destroy(), C.current.delete(e)), S((t) => t.filter((t) => t.entity.id !== e));
+	}, []), De = useCallback(() => {
+		C.current.forEach((e) => e.destroy()), C.current.clear(), S([]);
+	}, []), Oe = useCallback((t) => {
 		if (!e) return;
-		let n = S.current.get(t);
+		let n = C.current.get(t);
 		if (!n) return;
 		let r = n.getBounds();
 		e.fitBounds(r, {
@@ -3567,21 +4721,21 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 			maxZoom: 18,
 			duration: 1e3
 		});
-	}, [e]), Oe = useCallback((e, t) => {
+	}, [e]), ke = useCallback((e, t) => {
 		let n = {
-			...M.current,
+			...N.current,
 			[e]: t
 		};
-		v ? i?.({ ...n }) : _(n), x((t) => t.map((t) => {
+		y ? i?.({ ...n }) : v(n), S((t) => t.map((t) => {
 			let r = { ...t.entity };
 			r[e] = void 0;
-			let i = applyEntityConfig(r, n), a = S.current.get(t.entity.id);
+			let i = applyEntityConfig(r, n), a = C.current.get(t.entity.id);
 			return a && a.update(i), {
 				...t,
 				entity: i
 			};
 		}));
-	}, [v, i]), ke = useCallback((t, n) => {
+	}, [y, i]), Ae = useCallback((t, n) => {
 		if (!e) return;
 		let [r, i] = t, [a, o] = n, s = [
 			[Math.min(r, a), Math.max(i, o)],
@@ -3600,7 +4754,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 		});
 		let l = e.getSource(`${PREVIEW_PREFIX}rect-preview-measure-source`);
 		if (l) {
-			let e = M.current, t = [], n = s[0], r = s[1], i = s[2];
+			let e = N.current, t = [], n = s[0], r = s[1], i = s[2];
 			if (e?.showArea) {
 				let e = distance(n, r), a = distance(r, i);
 				t.push({
@@ -3631,7 +4785,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 				features: t
 			});
 		}
-	}, [e]), Ae = useCallback((t, n) => {
+	}, [e]), je = useCallback((t, n) => {
 		if (!e) return;
 		let r = calculateDistance(t, n), i = createCirclePolygon(t, r), a = e.getSource(`${PREVIEW_PREFIX}circle-preview-source`);
 		a && a.setData({
@@ -3642,7 +4796,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 			},
 			properties: {}
 		});
-		let o = M.current, s = [], c = [];
+		let o = N.current, s = [], c = [];
 		if (o?.showArea && s.push({
 			type: "Feature",
 			geometry: {
@@ -3678,7 +4832,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 			type: "FeatureCollection",
 			features: c
 		});
-	}, [e]), je = useCallback((t, n) => {
+	}, [e]), Me = useCallback((t, n) => {
 		if (!e) return;
 		let r = calculateDistance(t, n) * 2, i = createSquareCoords(t, r), a = e.getSource(`${PREVIEW_PREFIX}square-preview-source`);
 		a && a.setData({
@@ -3691,7 +4845,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 		});
 		let o = e.getSource(`${PREVIEW_PREFIX}square-preview-measure-source`);
 		if (o) {
-			let e = M.current, n = [];
+			let e = N.current, n = [];
 			if (e?.showArea && n.push({
 				type: "Feature",
 				geometry: {
@@ -3715,7 +4869,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 				features: n
 			});
 		}
-	}, [e]), Me = useCallback((t, n) => {
+	}, [e]), Ne = useCallback((t, n) => {
 		if (!e) return;
 		let r = [...t, n], i = e.getSource(`${PREVIEW_PREFIX}polygon-preview-source`);
 		i && (r.length >= 3 ? i.setData({
@@ -3750,7 +4904,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 		});
 		let o = e.getSource(`${PREVIEW_PREFIX}polygon-preview-measure-source`);
 		if (o) {
-			let e = M.current, t = [];
+			let e = N.current, t = [];
 			if (e?.showArea && r.length >= 3) {
 				let e = polygonArea([...r, r[0]]), n = 0, i = 0;
 				for (let e of r) n += e[0], i += e[1];
@@ -3792,7 +4946,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 				features: t
 			});
 		}
-	}, [e]), N = useCallback((t, n) => {
+	}, [e]), I = useCallback((t, n) => {
 		if (!e) return;
 		let r = [...t, n], i = e.getSource(`${PREVIEW_PREFIX}polyline-preview-source`);
 		i && (r.length >= 2 ? i.setData({
@@ -3820,7 +4974,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 		});
 		let o = e.getSource(`${PREVIEW_PREFIX}polyline-preview-measure-source`);
 		if (o) {
-			let e = M.current, t = [];
+			let e = N.current, t = [];
 			if (e?.showLength && r.length >= 2) for (let e = 0; e < r.length - 1; e++) {
 				let n = r[e], i = r[e + 1];
 				t.push({
@@ -3839,118 +4993,118 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 		}
 	}, [e]);
 	useEffect(() => {
-		if (!e || !d) return;
-		Ce(), e.getCanvas().style.cursor = "crosshair";
+		if (!e || !f) return;
+		Te(), e.getCanvas().style.cursor = "crosshair";
 		let t = (t) => {
-			let n = [t.lngLat.lng, t.lngLat.lat], r = be.current;
+			let n = [t.lngLat.lng, t.lngLat.lat], r = Ce.current;
 			if (r === "rectangle") {
-				let t = D.current;
-				if (!t) D.current = n;
+				let t = O.current;
+				if (!t) O.current = n;
 				else {
 					let r = {
-						id: xe(),
+						id: P(),
 						type: "rectangle",
 						bounds: [t, n]
 					};
-					we(r), D.current = null, clearAllPreviewSources(e), f(null);
+					F(r), O.current = null, clearAllPreviewSources(e), g(null);
 				}
 			} else if (r === "circle") {
-				let t = O.current;
-				if (!t) O.current = { center: n };
+				let t = k.current;
+				if (!t) k.current = { center: n };
 				else {
 					let r = calculateDistance(t.center, n), i = {
-						id: xe(),
+						id: P(),
 						type: "circle",
 						center: t.center,
 						radius: r
 					};
-					we(i), O.current = null, clearAllPreviewSources(e), f(null);
+					F(i), k.current = null, clearAllPreviewSources(e), g(null);
 				}
 			} else if (r === "square") {
-				let t = k.current;
-				if (!t) k.current = { center: n };
+				let t = A.current;
+				if (!t) A.current = { center: n };
 				else {
 					let r = calculateDistance(t.center, n) * 2, i = {
-						id: xe(),
+						id: P(),
 						type: "square",
 						center: t.center,
 						length: r
 					};
-					we(i), k.current = null, clearAllPreviewSources(e), f(null);
+					F(i), A.current = null, clearAllPreviewSources(e), g(null);
 				}
 			} else if (r === "polygon") {
-				let t = A.current;
+				let t = j.current;
 				if (t.length >= 3 && calculateDistance(t[0], n) < 20) {
 					let n = {
-						id: xe(),
+						id: P(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					we(n), A.current = [], clearAllPreviewSources(e), f(null);
+					F(n), j.current = [], clearAllPreviewSources(e), g(null);
 					return;
 				}
-				A.current = [...t, n];
-			} else r === "polyline" && (j.current = [...j.current, n]);
+				j.current = [...t, n];
+			} else r === "polyline" && (M.current = [...M.current, n]);
 		}, n = (e) => {
-			let t = [e.lngLat.lng, e.lngLat.lat], n = be.current;
-			if (n === "rectangle" && D.current) ke(D.current, t);
-			else if (n === "circle" && O.current) Ae(O.current.center, t);
-			else if (n === "square" && k.current) je(k.current.center, t);
+			let t = [e.lngLat.lng, e.lngLat.lat], n = Ce.current;
+			if (n === "rectangle" && O.current) Ae(O.current, t);
+			else if (n === "circle" && k.current) je(k.current.center, t);
+			else if (n === "square" && A.current) Me(A.current.center, t);
 			else if (n === "polygon") {
-				let e = A.current;
-				e.length > 0 && Me(e, t);
-			} else if (n === "polyline") {
 				let e = j.current;
-				e.length > 0 && N(e, t);
+				e.length > 0 && Ne(e, t);
+			} else if (n === "polyline") {
+				let e = M.current;
+				e.length > 0 && I(e, t);
 			}
 		}, r = (t) => {
 			t.preventDefault();
-			let n = be.current;
+			let n = Ce.current;
 			if (n === "polygon") {
-				let t = A.current;
+				let t = j.current;
 				if (t.length >= 3) {
 					let n = {
-						id: xe(),
+						id: P(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					we(n), A.current = [], clearAllPreviewSources(e), f(null);
-				} else A.current = [], clearAllPreviewSources(e);
+					F(n), j.current = [], clearAllPreviewSources(e), g(null);
+				} else j.current = [], clearAllPreviewSources(e);
 			} else if (n === "polyline") {
-				let t = j.current;
+				let t = M.current;
 				if (t.length >= 2) {
 					let n = {
-						id: xe(),
+						id: P(),
 						type: "polyline",
 						coordinates: [...t]
 					};
-					we(n), j.current = [], clearAllPreviewSources(e), f(null);
-				} else j.current = [], clearAllPreviewSources(e);
+					F(n), M.current = [], clearAllPreviewSources(e), g(null);
+				} else M.current = [], clearAllPreviewSources(e);
 			}
 		}, i = (t) => {
-			t.key === "Escape" && (D.current = null, O.current = null, k.current = null, A.current = [], j.current = [], clearAllPreviewSources(e), f(null));
+			t.key === "Escape" && (O.current = null, k.current = null, A.current = null, j.current = [], M.current = [], clearAllPreviewSources(e), g(null));
 		}, a = (t) => {
 			t.preventDefault();
-			let n = be.current;
+			let n = Ce.current;
 			if (n === "polygon") {
-				let t = A.current;
+				let t = j.current;
 				if (t.length >= 3) {
 					let n = {
-						id: xe(),
+						id: P(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					we(n), A.current = [], clearAllPreviewSources(e), f(null);
+					F(n), j.current = [], clearAllPreviewSources(e), g(null);
 				}
 			} else if (n === "polyline") {
-				let t = j.current;
+				let t = M.current;
 				if (t.length >= 2) {
 					let n = {
-						id: xe(),
+						id: P(),
 						type: "polyline",
 						coordinates: [...t]
 					};
-					we(n), j.current = [], clearAllPreviewSources(e), f(null);
+					F(n), M.current = [], clearAllPreviewSources(e), g(null);
 				}
 			}
 		};
@@ -3959,28 +5113,28 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 		};
 	}, [
 		e,
-		d,
-		xe,
-		we,
-		Ce,
-		ke,
+		f,
+		P,
+		F,
+		Te,
 		Ae,
 		je,
 		Me,
-		N
+		Ne,
+		I
 	]), useEffect(() => () => {
-		S.current.forEach((e) => e.destroy()), S.current.clear();
+		C.current.forEach((e) => e.destroy()), C.current.clear();
 	}, []);
-	let Ne = useCallback((t) => {
-		f((e) => e === t ? null : t), D.current = null, O.current = null, k.current = null, A.current = [], j.current = [], e && clearAllPreviewSources(e);
+	let Pe = useCallback((t) => {
+		g((e) => e === t ? null : t), O.current = null, k.current = null, A.current = null, j.current = [], M.current = [], e && clearAllPreviewSources(e);
 	}, [e]);
 	return e ? /* @__PURE__ */ jsxs("div", {
-		className: `mapbox-measure-control ${s}`,
-		style: c,
+		className: `mapbox-measure-control ${c}`,
+		style: l,
 		children: [/* @__PURE__ */ jsxs("button", {
-			ref: E,
-			className: `mapbox-control-btn mapbox-measure-control__btn ${l ? "mapbox-measure-control__btn--active" : ""}`,
-			onClick: () => u(!l),
+			ref: D,
+			className: `mapbox-control-btn mapbox-measure-control__btn ${u ? "mapbox-measure-control__btn--active" : ""}`,
+			onClick: () => d(!u),
 			title: "测量",
 			children: [
 				/* @__PURE__ */ jsx("img", {
@@ -3989,14 +5143,14 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 					className: "mapbox-measure-control__btn-icon"
 				}),
 				/* @__PURE__ */ jsx("span", { children: "测量" }),
-				b.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
+				x.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
 					"(",
-					b.length,
+					x.length,
 					")"
 				] })
 			]
-		}), l && /* @__PURE__ */ jsxs("div", {
-			ref: T,
+		}), u && /* @__PURE__ */ jsxs("div", {
+			ref: E,
 			className: "mapbox-measure-control__panel",
 			children: [
 				/* @__PURE__ */ jsx("div", {
@@ -4007,18 +5161,18 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 					className: "mapbox-measure-control__settings",
 					children: [
 						/* @__PURE__ */ jsx(Checkbox, {
-							checked: y.showArea,
-							onChange: (e) => Oe("showArea", e),
+							checked: b.showArea,
+							onChange: (e) => ke("showArea", e),
 							children: "面积"
 						}),
 						/* @__PURE__ */ jsx(Checkbox, {
-							checked: y.showLength,
-							onChange: (e) => Oe("showLength", e),
+							checked: b.showLength,
+							onChange: (e) => ke("showLength", e),
 							children: "长度"
 						}),
 						/* @__PURE__ */ jsx(Checkbox, {
-							checked: y.showRadius,
-							onChange: (e) => Oe("showRadius", e),
+							checked: b.showRadius,
+							onChange: (e) => ke("showRadius", e),
 							children: "半径"
 						})
 					]
@@ -4030,16 +5184,16 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 				/* @__PURE__ */ jsxs("div", {
 					className: "mapbox-measure-control__tools",
 					children: [DRAW_TOOLS.map((e) => /* @__PURE__ */ jsx("button", {
-						className: `mapbox-measure-control__tool-btn ${d === e.mode ? "mapbox-measure-control__tool-btn--active" : ""}`,
-						onClick: () => Ne(e.mode),
+						className: `mapbox-measure-control__tool-btn ${f === e.mode ? "mapbox-measure-control__tool-btn--active" : ""}`,
+						onClick: () => Pe(e.mode),
 						title: e.label,
 						children: /* @__PURE__ */ jsx("img", {
 							src: e.icon,
 							alt: e.label
 						})
-					}, e.mode)), b.length > 0 && /* @__PURE__ */ jsx("button", {
+					}, e.mode)), x.length > 0 && /* @__PURE__ */ jsx("button", {
 						className: "mapbox-measure-control__tool-btn mapbox-measure-control__tool-btn--danger",
-						onClick: Ee,
+						onClick: De,
 						title: "清除全部",
 						children: /* @__PURE__ */ jsx("img", {
 							src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1769394652565'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='6483'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='128'%20height='128'%3e%3cpath%20d='M841.385637%20288.639098a36.479886%2036.479886%200%200%201%2072.74644%207.679976l6.613312%20629.544699A109.866323%20109.866323%200%200%201%20810.665733%201023.9968H222.507571a109.652991%20109.652991%200%200%201-109.012992-98.133027l-3.626656-629.544699a36.479886%2036.479886%200%200%201%2072.74644-7.679976L186.241018%20917.330467a36.479886%2036.479886%200%200%200%2036.266553%2032.639898H810.665733A36.479886%2036.479886%200%200%200%20847.99895%20917.330467z%20m-219.732646%20113.706311a36.479886%2036.479886%200%200%201%2036.693218%2036.479886v255.9992a36.693219%2036.693219%200%201%201-73.173104%200v-255.9992a36.479886%2036.479886%200%200%201%2036.479886-36.479886z%20m-219.305982%200a36.479886%2036.479886%200%200%201%2036.479886%2036.479886v255.9992a36.693219%2036.693219%200%201%201-73.173104%200v-255.9992a36.479886%2036.479886%200%200%201%2036.693218-36.479886z%20m-36.693218-255.9992h292.692418V91.519714a18.346609%2018.346609%200%200%200-18.346609-18.346609H384.0004a18.346609%2018.346609%200%200%200-18.346609%2018.346609z%20m-73.173105%200V73.173105A73.173105%2073.173105%200%200%201%20365.653791%200h292.692418a73.386437%2073.386437%200%200%201%2073.173105%2073.173105v73.173104h255.9992a36.693219%2036.693219%200%200%201%200%2073.173105H36.481486a36.693219%2036.693219%200%200%201%200-73.173105z'%20fill='%23EB6865'%20p-id='6484'%3e%3c/path%3e%3c/svg%3e",
@@ -4047,7 +5201,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 						})
 					})]
 				}),
-				b.length > 0 ? /* @__PURE__ */ jsx("div", {
+				x.length > 0 ? /* @__PURE__ */ jsx("div", {
 					className: "mapbox-measure-control__list",
 					children: /* @__PURE__ */ jsxs("table", {
 						className: "mapbox-measure-control__table",
@@ -4057,9 +5211,9 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 							/* @__PURE__ */ jsx("th", { children: "面积" }),
 							/* @__PURE__ */ jsx("th", { children: "长度/半径" }),
 							/* @__PURE__ */ jsx("th", {})
-						] }) }), /* @__PURE__ */ jsx("tbody", { children: b.map((e) => /* @__PURE__ */ jsxs("tr", {
+						] }) }), /* @__PURE__ */ jsx("tbody", { children: x.map((e) => /* @__PURE__ */ jsxs("tr", {
 							className: "mapbox-measure-control__table-row",
-							onClick: () => De(e.entity.id),
+							onClick: () => Oe(e.entity.id),
 							children: [
 								/* @__PURE__ */ jsx("td", { children: e.shapeLabel }),
 								/* @__PURE__ */ jsx("td", { children: String(e.entity.id) }),
@@ -4068,7 +5222,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 								/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("button", {
 									className: "mapbox-measure-control__delete-btn",
 									onClick: (t) => {
-										t.stopPropagation(), Te(e.entity.id);
+										t.stopPropagation(), Ee(e.entity.id);
 									},
 									title: "删除",
 									children: /* @__PURE__ */ jsx("img", {
@@ -4403,6 +5557,220 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 	});
 	return createPortal(d, i);
 };
+var route_planning_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1775031767174'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='30653'%20data-spm-anchor-id='a313x.search_index.0.i6.78953a81FCkAe0'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='64'%20height='64'%3e%3cpath%20d='M322.24%20479.210667l-42.453333-42.432%20198.826666-198.826667c53.397333-53.376%20139.306667-53.568%20191.914667-0.981333%2052.608%2052.608%2052.416%20138.517333-0.981333%20191.914666L455.722667%20642.709333l-42.432-42.453333%20213.824-213.802667a74.773333%2074.773333%200%200%200-0.341334-105.728%2074.773333%2074.773333%200%200%200-105.728-0.341333l-198.826666%20198.826667z'%20fill='%23ffffff'%20p-id='30654'%3e%3c/path%3e%3cpath%20d='M699.093333%20613.333333l42.453334%2042.432-169.429334%20169.408c-48.341333%2048.341333-129.28%2042.282667-181.248-9.664-51.968-51.968-58.026667-132.906667-9.664-181.248l234.346667-234.346666%2042.432%2042.410666L423.616%20676.693333c-22.250667%2022.250667-19.050667%2065.024%2011.008%2095.061334%2030.037333%2030.058667%2072.810667%2033.258667%2095.061333%2010.986666l169.429334-169.408zM187.989333%20571.029333c-38.933333-38.933333-38.805333-102.613333%200.853334-142.293333%2039.68-39.68%20103.381333-39.808%20142.293333-0.853333%2038.954667%2038.912%2038.826667%20102.613333-0.853333%20142.293333-39.68%2039.658667-103.381333%2039.786667-142.293334%200.853333z%20m43.733334-43.733333c15.744%2015.744%2040.874667%2015.68%2056.128%200.426667%2015.253333-15.232%2015.296-40.362667-0.426667-56.106667-15.765333-15.744-40.896-15.701333-56.149333-0.448-15.232%2015.232-15.296%2040.384%200.448%2056.106667z'%20fill='%23ffffff'%20p-id='30655'%3e%3c/path%3e%3cpath%20d='M846.144%20489.728l-31.466667%20198.784-56.96-101.461333-104.042666-38.506667z'%20fill='%23ffffff'%20p-id='30656'%3e%3c/path%3e%3c/svg%3e", SOURCE_ID = "route-planning-temp-line", LINE_LAYER_ID = "route-planning-temp-line-layer", POINT_LAYER_ID = "route-planning-temp-point-layer";
+const RoutePlanningControl = forwardRef(({ map: e, pointCount: i = 2, showPointCountInput: c = !1, visualType: l = "marker", onSelectFinished: u, showButton: d = !0 }, f) => {
+	let [h, g] = useState("idle"), [_, v] = useState(0), [y, b] = useState(i), [x, S] = useState(!1), C = useRef(null), w = useRef(null), T = useRef([]), E = useRef([]), D = useRef("idle"), O = useRef(null), ve = useRef("");
+	useEffect(() => {
+		D.current = h;
+	}, [h]), useEffect(() => {
+		b(i);
+	}, [i]), useEffect(() => {
+		if (!x) return;
+		let e = (e) => {
+			w.current && !w.current.contains(e.target) && C.current && !C.current.contains(e.target) && S(!1);
+		}, t = setTimeout(() => {
+			document.addEventListener("mousedown", e);
+		}, 0);
+		return () => {
+			clearTimeout(t), document.removeEventListener("mousedown", e);
+		};
+	}, [x]);
+	let ye = useCallback(() => {
+		for (let e of E.current) e.remove();
+		E.current = [], e && (e.getLayer(LINE_LAYER_ID) && e.removeLayer(LINE_LAYER_ID), e.getLayer(POINT_LAYER_ID) && e.removeLayer(POINT_LAYER_ID), e.getSource(SOURCE_ID) && e.removeSource(SOURCE_ID));
+	}, [e]), k = useCallback(() => {
+		if (!e) return;
+		let t = T.current, n = {
+			type: "FeatureCollection",
+			features: [{
+				type: "Feature",
+				properties: {},
+				geometry: {
+					type: "LineString",
+					coordinates: t.length >= 2 ? t : []
+				}
+			}, ...t.map((e, t) => ({
+				type: "Feature",
+				properties: { index: t },
+				geometry: {
+					type: "Point",
+					coordinates: e
+				}
+			}))]
+		}, r = e.getSource(SOURCE_ID);
+		r ? r.setData(n) : (e.addSource(SOURCE_ID, {
+			type: "geojson",
+			data: n
+		}), e.addLayer({
+			id: LINE_LAYER_ID,
+			type: "line",
+			source: SOURCE_ID,
+			filter: [
+				"==",
+				"$type",
+				"LineString"
+			],
+			paint: {
+				"line-color": "#4A90D9",
+				"line-width": 3,
+				"line-dasharray": [2, 2]
+			}
+		}), e.addLayer({
+			id: POINT_LAYER_ID,
+			type: "circle",
+			source: SOURCE_ID,
+			filter: [
+				"==",
+				"$type",
+				"Point"
+			],
+			paint: {
+				"circle-radius": 6,
+				"circle-color": "#4A90D9",
+				"circle-stroke-width": 2,
+				"circle-stroke-color": "#fff"
+			}
+		}));
+	}, [e]), be = useCallback((t) => {
+		if (!e || !O.current) return;
+		let { visualType: n } = O.current;
+		if (n === "marker") {
+			let n = document.createElement("div");
+			n.className = "route-planning-temp-marker", n.textContent = String(T.current.length);
+			let r = new mapboxgl.Marker({ element: n }).setLngLat(t).addTo(e);
+			E.current.push(r);
+		} else k();
+	}, [e, k]), xe = useCallback(() => {
+		ye(), T.current = [], O.current = null, v(0), g("idle"), e && (e.getCanvas().style.cursor = ve.current);
+	}, [ye, e]), Se = useCallback(async () => {
+		let e = O.current, t = [...T.current];
+		if (!e || t.length < 2) {
+			xe();
+			return;
+		}
+		g("planning");
+		try {
+			await e.onSelectFinished(t);
+		} catch (e) {
+			console.error("Route planning onSelectFinished failed:", e);
+		} finally {
+			xe();
+		}
+	}, [xe]), A = useCallback((e) => {
+		if (D.current !== "selecting" || !O.current) return;
+		let t = [e.lngLat.lng, e.lngLat.lat];
+		T.current.push(t);
+		let n = T.current.length;
+		v(n), be(t), n >= O.current.pointCount && Se();
+	}, [be, Se]), j = useCallback((e) => {
+		D.current === "selecting" && (e.preventDefault(), xe());
+	}, [xe]);
+	useEffect(() => {
+		if (e && h === "selecting") return e.on("click", A), e.on("contextmenu", j), () => {
+			e.off("click", A), e.off("contextmenu", j);
+		};
+	}, [
+		e,
+		h,
+		A,
+		j
+	]);
+	let M = useCallback((t) => {
+		if (!e) return;
+		D.current !== "idle" && xe();
+		let n = Math.max(2, t.pointCount ?? i), r = t.visualType ?? l;
+		O.current = {
+			pointCount: n,
+			visualType: r,
+			onSelectFinished: t.onSelectFinished
+		}, T.current = [], v(0), b(n), S(!1), ve.current = e.getCanvas().style.cursor, e.getCanvas().style.cursor = "crosshair", g("selecting");
+	}, [
+		e,
+		i,
+		l,
+		xe
+	]);
+	useImperativeHandle(f, () => ({ startPlanning: M }), [M]);
+	let N = () => {
+		h === "idle" ? S((e) => !e) : h === "selecting" && xe();
+	}, Ce = () => {
+		u && M({
+			pointCount: Math.max(2, y),
+			visualType: l,
+			onSelectFinished: u
+		});
+	}, P = (e) => {
+		let t = parseInt(e.target.value, 10);
+		!isNaN(t) && t >= 2 ? b(t) : e.target.value === "" && b(2);
+	}, we = () => {
+		if (h === "planning") return /* @__PURE__ */ jsx("span", { children: "规划中..." });
+		if (h === "selecting") {
+			let e = O.current?.pointCount ?? y;
+			return /* @__PURE__ */ jsxs("span", { children: [
+				_,
+				"/",
+				e
+			] });
+		}
+		return "路径规划";
+	}, Te = h === "selecting", F = h === "planning";
+	return !d && h === "idle" ? null : /* @__PURE__ */ jsxs("div", {
+		className: `mapbox-route-planning-control${d ? "" : " mapbox-route-planning-control--floating"}`,
+		children: [/* @__PURE__ */ jsxs("button", {
+			ref: C,
+			className: `mapbox-control-btn mapbox-route-planning-control__btn${Te ? " mapbox-route-planning-control__btn--active" : ""}${F ? " mapbox-route-planning-control__btn--planning" : ""}${x ? " mapbox-route-planning-control__btn--active" : ""}`,
+			onClick: N,
+			disabled: F,
+			title: h === "idle" ? "路径规划" : h === "selecting" ? "取消选点" : "规划中...",
+			children: [/* @__PURE__ */ jsx("img", {
+				src: route_planning_default,
+				alt: "route",
+				className: "mapbox-route-planning-control__btn-icon"
+			}), we()]
+		}), x && h === "idle" && /* @__PURE__ */ jsxs("div", {
+			ref: w,
+			className: "mapbox-route-planning-control__panel",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "mapbox-route-planning-control__panel-header",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "mapbox-route-planning-control__panel-title",
+					children: "路径规划"
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "mapbox-route-planning-control__panel-body",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "mapbox-route-planning-control__panel-row",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "mapbox-route-planning-control__panel-label",
+							children: "选点数量"
+						}), c ? /* @__PURE__ */ jsx("input", {
+							type: "number",
+							className: "mapbox-route-planning-control__panel-input",
+							value: y,
+							min: 2,
+							onChange: P
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "mapbox-route-planning-control__panel-value",
+							children: y
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "mapbox-route-planning-control__panel-tip",
+						children: "左键点击地图选点，右键取消"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						className: "mapbox-route-planning-control__panel-start",
+						onClick: Ce,
+						disabled: !u,
+						children: "开始规划"
+					})
+				]
+			})]
+		})]
+	});
+});
+RoutePlanningControl.displayName = "RoutePlanningControl";
 function mergePopupConfig(e, t, n) {
 	return {
 		content: e.content ?? n ?? null,
@@ -4550,51 +5918,53 @@ function adjustPopupForBounds(e, t) {
 	return r.x + t.width + 10 > n.width && (r.x = n.width - t.width - 10), r.x < 10 && (r.x = 10), r.y + t.height + 10 > n.height && (r.y = n.height - t.height - 10), r.y < 10 && (r.y = 10), r;
 }
 const Mapbox = forwardRef((e, c) => {
-	let { center: l = [116.4074, 39.9042], zoom: u = 12, pitch: d = 0, bearing: f = 0, style: h = "mapbox://styles/mapbox/dark-v11", maxBounds: g, mode: _ = "display", editConfig: v = {}, pickerConfig: y = {}, onPick: b, interactive: x = {}, layers: S = [], rasterPaint: C, entities: T = [], selectedIds: E = [], entityConfig: D, nameConfig: O, selectNameConfig: k, areaConfig: A, circleConfig: j, lengthConfig: M, showCoordinates: be = !0, showScale: Se = !0, showResetView: Ee = !0, showRoadHighlight: De = !1, showMeasure: Oe = !1, showRasterPaint: Ae = !1, onRasterPaintChange: je, popupDefaults: N, renderPopup: Pe, onMapLoad: Fe, onEntityClick: Ie, onPopupOpen: Le, onPopupClose: Re, className: ze = "", containerStyle: Be } = e, Ve = useRef(null), P = useRef(null), F = useRef(/* @__PURE__ */ new Map()), I = useRef(/* @__PURE__ */ new Map()), He = useRef(/* @__PURE__ */ new Set()), [L, Ue] = useState(null), We = useRef(null), Ge = useRef(null), Ke = useRef(null), [qe, Je] = useState(null), Ye = useRef(null), Xe = useRef(null), [Ze, Qe] = useState(null), [R, $e] = useState(_), [et, tt] = useState(null), nt = useRef(null), [rt, z] = useState(null), [it, B] = useState(null), [at, ot] = useState(null), V = useRef(!1), H = useRef(null), U = useRef(null), W = useRef(null), st = useRef(null), G = useRef(null), ct = useRef([]), K = useRef(null), lt = useRef(null), q = useRef(null), ut = useRef([]), J = useRef(null);
+	let { center: l = [116.4074, 39.9042], zoom: u = 12, pitch: d = 0, bearing: f = 0, style: h = "mapbox://styles/mapbox/dark-v11", maxBounds: g, mode: _ = "display", editConfig: v = {}, pickerConfig: y = {}, onPick: b, interactive: x = {}, layers: S = [], rasterPaint: T, entities: E = [], selectedIds: D = [], entityConfig: O, nameConfig: k, selectNameConfig: A, areaConfig: j, circleConfig: M, lengthConfig: N, showCoordinates: Ce = !0, showScale: P = !0, showResetView: we = !0, showRoadHighlight: Te = !1, showMeasure: Ee = !1, showRasterPaint: Ae = !1, showRoutePlanning: je, onRasterPaintChange: Me, popupDefaults: I, renderPopup: Pe, onMapLoad: Fe, onEntityClick: Ie, onPopupOpen: Le, onPopupClose: Re, className: ze = "", containerStyle: Be } = e, Ve = useRef(null), He = useRef(null), L = useRef(null), R = useRef(/* @__PURE__ */ new Map()), z = useRef(/* @__PURE__ */ new Map()), Ue = useRef(/* @__PURE__ */ new Set()), [B, We] = useState(null), Ge = useRef(null), Ke = useRef(null), qe = useRef(null), [Je, Ye] = useState(null), Xe = useRef(null), Ze = useRef(null), [V, Qe] = useState(null), [$e, et] = useState(_), [tt, nt] = useState(null), rt = useRef(null), [it, H] = useState(null), [at, U] = useState(null), [ot, st] = useState(null), W = useRef(!1), G = useRef(null), ct = useRef(null), K = useRef(null), lt = useRef(null), q = useRef(null), ut = useRef([]), J = useRef(null), dt = useRef(null), ft = useRef(null), pt = useRef([]), mt = useRef(null), ht = useRef(!1), [gt, _t] = useState([]), vt = useRef([]);
+	vt.current = gt;
+	let Y = useRef(null);
 	useEffect(() => {
-		$e(_);
+		et(_);
 	}, [_]);
-	let dt = useCallback((e) => {
-		let t = F.current.get(e), n = I.current.get(e);
+	let yt = useCallback((e) => {
+		let t = R.current.get(e), n = z.current.get(e);
 		if (t && n) {
 			if (n.type === "radar" && t instanceof CanvasRadarRenderer) {
 				let r = {
 					...n,
 					isAnimating: !0
 				};
-				I.current.set(e, r), t.startAnimation();
+				z.current.set(e, r), t.startAnimation();
 			} else if (n.type === "circle" && t instanceof CanvasCircleRenderer) {
 				let r = {
 					...n,
 					isAnimating: !0
 				};
-				I.current.set(e, r), t.startAnimation();
+				z.current.set(e, r), t.startAnimation();
 			}
 		}
-	}, []), ft = useCallback((e) => {
-		let t = F.current.get(e), n = I.current.get(e);
+	}, []), bt = useCallback((e) => {
+		let t = R.current.get(e), n = z.current.get(e);
 		if (t && n) {
 			if (n.type === "radar" && t instanceof CanvasRadarRenderer) {
 				let r = {
 					...n,
 					isAnimating: !1
 				};
-				I.current.set(e, r), t.stopAnimation();
+				z.current.set(e, r), t.stopAnimation();
 			} else if (n.type === "circle" && t instanceof CanvasCircleRenderer) {
 				let r = {
 					...n,
 					isAnimating: !1
 				};
-				I.current.set(e, r), t.stopAnimation();
+				z.current.set(e, r), t.stopAnimation();
 			}
 		}
-	}, []), pt = useCallback((e) => {
-		let t = I.current.get(e);
-		t && (t.type === "radar" || t.type === "circle") && (t.type, t.isAnimating ? ft(e) : dt(e));
-	}, [dt, ft]), mt = useCallback((e) => {
+	}, []), xt = useCallback((e) => {
+		let t = z.current.get(e);
+		t && (t.type === "radar" || t.type === "circle") && (t.type, t.isAnimating ? bt(e) : yt(e));
+	}, [yt, bt]), St = useCallback((e) => {
 		if (e === void 0) {
 			let e = !1;
-			for (let [, t] of F.current) if (t instanceof UnitRenderer) {
+			for (let [, t] of R.current) if (t instanceof UnitRenderer) {
 				let n = t.getShowTrajectory();
 				if (n === "all" || typeof n == "number" && n > 0) {
 					e = !0;
@@ -4602,18 +5972,18 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}
 			let t = e ? 0 : "all";
-			for (let [, e] of F.current) e instanceof UnitRenderer && e.setShowTrajectory(t);
+			for (let [, e] of R.current) e instanceof UnitRenderer && e.setShowTrajectory(t);
 		} else {
 			let t = new Set(e.map(String));
-			for (let [e, n] of F.current) n instanceof UnitRenderer && n.setShowTrajectory(t.has(String(e)) ? "all" : 0);
+			for (let [e, n] of R.current) n instanceof UnitRenderer && n.setShowTrajectory(t.has(String(e)) ? "all" : 0);
 		}
-	}, []), ht = useCallback((e, t, n) => {
-		let r = T.find((t) => String(t.id) === String(e));
-		if (!r?.popup || !P.current) return;
+	}, []), Ct = useCallback((e, t, n) => {
+		let r = E.find((t) => String(t.id) === String(e));
+		if (!r?.popup || !L.current) return;
 		let i = r.popup.content ?? Pe?.(r);
 		if (!i) return;
-		let a = mergePopupConfig(r.popup, N, i), { position: o, actualPosition: s } = calculatePopupPosition(r, a, P.current, n);
-		Ue({
+		let a = mergePopupConfig(r.popup, I, i), { position: o, actualPosition: s } = calculatePopupPosition(r, a, L.current, n);
+		We({
 			entityId: e,
 			position: o,
 			config: a,
@@ -4621,27 +5991,27 @@ const Mapbox = forwardRef((e, c) => {
 			actualPosition: s
 		}), Le?.(e);
 	}, [
-		T,
-		N,
+		E,
+		I,
 		Pe,
 		Le
-	]), gt = useCallback((e) => {
-		L?.entityId === e && (Ue(null), Re?.(e));
-	}, [L, Re]), _t = useCallback(() => {
-		Ue((e) => (e && Re?.(e.entityId), null));
-	}, [Re]), vt = useCallback((e) => L?.entityId === e, [L]), yt = useCallback((e, t, n) => {
-		let r = P.current;
+	]), wt = useCallback((e) => {
+		B?.entityId === e && (We(null), Re?.(e));
+	}, [B, Re]), Tt = useCallback(() => {
+		We((e) => (e && Re?.(e.entityId), null));
+	}, [Re]), Et = useCallback((e) => B?.entityId === e, [B]), Dt = useCallback((e, t, n) => {
+		let r = L.current;
 		r && r.flyTo({
 			center: e,
 			zoom: t ?? r.getZoom(),
 			...n
 		});
-	}, []), bt = useCallback((e, t, n) => {
-		let r = P.current;
+	}, []), Ot = useCallback((e, t, n) => {
+		let r = L.current;
 		if (!r || e.length === 0) return;
 		let i = [];
 		for (let t of e) {
-			let e = F.current.get(t);
+			let e = R.current.get(t);
 			e && i.push(e.getBounds());
 		}
 		if (i.length === 0) return;
@@ -4663,51 +6033,65 @@ const Mapbox = forwardRef((e, c) => {
 			pitch: n?.pitch ?? r.getPitch()
 		};
 		t !== void 0 && (p.maxZoom = t), n?.essential !== void 0 && (p.essential = n.essential), r.fitBounds(f, p);
-	}, []), xt = useCallback((e) => {
-		let t = P.current;
+	}, []), kt = useCallback((e) => {
+		let t = L.current;
 		if (!t || !t.getContainer()) return;
-		let { showMarker: n = !0, markerColor: r = "#3388ff" } = y;
+		let { showMarker: n = !0, markerColor: r = "#3388ff", name: i, nameConfig: a } = y;
 		if (!n) {
-			nt.current &&= (nt.current.remove(), null);
+			rt.current &&= (rt.current.remove(), null);
 			return;
 		}
-		if (nt.current) nt.current.setLngLat(e);
-		else {
+		if (rt.current) {
+			rt.current.setLngLat(e);
+			let t = rt.current.getElement(), n = t.querySelector(".marker-label");
+			if (i) {
+				let e = resolveNameConfig(a, k);
+				if (n) n.textContent = i, n.style.color = e.fillColor, n.style.opacity = String(e.fillOpacity), n.style.webkitTextStrokeColor = e.strokeColor, n.style.webkitTextStrokeWidth = `${e.strokeWidth}px`;
+				else {
+					let n = document.createElement("div");
+					n.className = "marker-label", n.textContent = i, n.style.color = e.fillColor, n.style.opacity = String(e.fillOpacity), n.style.webkitTextStrokeColor = e.strokeColor, n.style.webkitTextStrokeWidth = `${e.strokeWidth}px`, t.appendChild(n);
+				}
+			} else n && n.remove();
+		} else {
 			let n = document.createElement("div");
 			n.className = "mapbox-picker-marker";
-			let i = document.createElement("div");
-			i.className = "marker-inner", i.style.background = r, n.appendChild(i), nt.current = new mapboxgl.Marker({
+			let o = document.createElement("div");
+			if (o.className = "marker-inner", o.style.background = r, n.appendChild(o), i) {
+				let e = resolveNameConfig(a, k), t = document.createElement("div");
+				t.className = "marker-label", t.textContent = i, t.style.color = e.fillColor, t.style.opacity = String(e.fillOpacity), t.style.webkitTextStrokeColor = e.strokeColor, t.style.webkitTextStrokeWidth = `${e.strokeWidth}px`, n.appendChild(t);
+			}
+			rt.current = new mapboxgl.Marker({
 				element: n,
 				anchor: "bottom"
 			}).setLngLat(e).addTo(t);
 		}
-	}, [y]), St = useCallback(() => {
-		nt.current &&= (nt.current.remove(), null);
-	}, []), Ct = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), wt = useCallback((e) => {
-		let t = P.current;
-		if (Ve.current) if (J.current &&= (J.current.remove(), null), e && t) {
+	}, [y, k]), At = useCallback(() => {
+		rt.current &&= (rt.current.remove(), null);
+	}, []), jt = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), Mt = useCallback((e) => {
+		let t = L.current;
+		if (Ve.current) if (mt.current &&= (mt.current.remove(), null), e && t) {
 			t.getCanvas().style.cursor = "none";
 			let n = document.createElement("div");
 			n.className = "mapbox-custom-cursor";
 			let r = e.size || e.width || 32;
 			n.style.cssText = "\n				position: fixed;\n				pointer-events: none;\n				z-index: 9999;\n				transform: translate(-50%, -50%);\n				opacity: 0.8;\n			";
 			let i = document.createElement("img");
-			i.src = e.icon, i.style.width = `${r}px`, i.style.height = `${e.size || e.height || r}px`, i.style.objectFit = "contain", n.appendChild(i), document.body.appendChild(n), J.current = n;
+			i.src = e.icon, i.style.width = `${r}px`, i.style.height = `${e.size || e.height || r}px`, i.style.objectFit = "contain", n.appendChild(i), document.body.appendChild(n), mt.current = n;
 			let a = (e) => {
-				J.current && (J.current.style.left = `${e.clientX}px`, J.current.style.top = `${e.clientY}px`);
+				mt.current && (mt.current.style.left = `${e.clientX}px`, mt.current.style.top = `${e.clientY}px`);
 			};
 			document.addEventListener("mousemove", a), n.dataset.cleanup = "true", n._cleanup = () => {
 				document.removeEventListener("mousemove", a);
 			};
 		} else t && (t.getCanvas().style.cursor = "");
-	}, []), Y = useCallback(() => {
-		if (J.current) {
-			let e = J.current._cleanup;
-			e && e(), J.current.remove(), J.current = null;
+	}, []), X = useCallback(() => {
+		if (mt.current) {
+			let e = mt.current._cleanup;
+			e && e(), mt.current.remove(), mt.current = null;
 		}
-		let e = P.current;
+		let e = L.current;
 		e && (e.getCanvas().style.cursor = "");
-	}, []), X = useCallback((e, t, n) => {
+	}, []), Nt = useCallback((e, t, n) => {
 		if (!e.getSource(t)) {
 			if (!e.getStyle().glyphs) {
 				let t = e.style, n = "/gis-fonts/{fontstack}/{range}.pbf";
@@ -4743,8 +6127,8 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			});
 		}
-	}, []), Tt = useCallback(() => {
-		let e = P.current;
+	}, []), Pt = useCallback(() => {
+		let e = L.current;
 		e && (e.getSource("rect-preview-source") || (e.addSource("rect-preview-source", {
 			type: "geojson",
 			data: {
@@ -4768,9 +6152,9 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), X(e, "rect-preview-measure-source", "rect-preview-measure-label")));
-	}, [X]), Et = useCallback((e, t) => {
-		let n = P.current;
+		}), Nt(e, "rect-preview-measure-source", "rect-preview-measure-label")));
+	}, [Nt]), Ft = useCallback((e, t) => {
+		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("rect-preview-source");
 		if (!r) return;
@@ -4789,11 +6173,11 @@ const Mapbox = forwardRef((e, c) => {
 			},
 			properties: {}
 		});
-		let l = H.current, u = l?.strokeColor ?? "#3388ff", d = l?.strokeWidth ?? 2, f = l?.fillColor ?? "#3388ff", p = l?.fillOpacity ?? .1;
+		let l = G.current, u = l?.strokeColor ?? "#3388ff", d = l?.strokeWidth ?? 2, f = l?.fillColor ?? "#3388ff", p = l?.fillOpacity ?? .1;
 		n.getLayer("rect-preview-line") && (n.setPaintProperty("rect-preview-line", "line-color", u), n.setPaintProperty("rect-preview-line", "line-width", d)), n.getLayer("rect-preview-fill") && (n.setPaintProperty("rect-preview-fill", "fill-color", f), n.setPaintProperty("rect-preview-fill", "fill-opacity", p));
 		let m = n.getSource("rect-preview-measure-source");
 		if (m) {
-			let e = Tn.current, t = [], n = c[0], r = c[1], i = c[2];
+			let e = Nn.current, t = [], n = c[0], r = c[1], i = c[2];
 			if (e?.showArea) {
 				let e = [(n[0] + i[0]) / 2, (n[1] + i[1]) / 2], a = distance(n, r), o = distance(r, i);
 				t.push({
@@ -4830,8 +6214,8 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), Dt = useCallback(() => {
-		let e = P.current;
+	}, []), It = useCallback(() => {
+		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("rect-preview-source");
 		t && t.setData({
@@ -4844,9 +6228,9 @@ const Mapbox = forwardRef((e, c) => {
 			features: []
 		});
 	}, []), Z = useCallback(() => {
-		ot(null), Dt();
-	}, [Dt]), Ot = useCallback(() => {
-		let e = P.current;
+		st(null), It();
+	}, [It]), Lt = useCallback(() => {
+		let e = L.current;
 		e && (e.getSource("circle-preview-source") || (e.addSource("circle-preview-source", {
 			type: "geojson",
 			data: {
@@ -4870,7 +6254,7 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), X(e, "circle-preview-measure-source", "circle-preview-measure-label"), e.getSource("circle-preview-radius-source") || (e.addSource("circle-preview-radius-source", {
+		}), Nt(e, "circle-preview-measure-source", "circle-preview-measure-label"), e.getSource("circle-preview-radius-source") || (e.addSource("circle-preview-radius-source", {
 			type: "geojson",
 			data: {
 				type: "FeatureCollection",
@@ -4887,22 +6271,22 @@ const Mapbox = forwardRef((e, c) => {
 				"line-dasharray": [4, 4]
 			}
 		}))));
-	}, [X]), kt = useCallback((e, t, n = 64) => {
+	}, [Nt]), Rt = useCallback((e, t, n = 64) => {
 		let [r, i] = e, a = [], o = t / 6371e3, s = i * Math.PI / 180;
 		for (let e = 0; e <= n; e++) {
 			let t = e / n * 2 * Math.PI, c = o * Math.cos(t), l = o * Math.sin(t) / Math.cos(s), u = i + c * 180 / Math.PI, d = r + l * 180 / Math.PI;
 			a.push([d, u]);
 		}
 		return a;
-	}, []), At = useCallback((e, t) => {
+	}, []), zt = useCallback((e, t) => {
 		let [n, r] = e, [i, a] = t, o = (a - r) * Math.PI / 180, s = (i - n) * Math.PI / 180, c = Math.sin(o / 2) * Math.sin(o / 2) + Math.cos(r * Math.PI / 180) * Math.cos(a * Math.PI / 180) * Math.sin(s / 2) * Math.sin(s / 2);
 		return 6371e3 * (2 * Math.atan2(Math.sqrt(c), Math.sqrt(1 - c)));
-	}, []), jt = useCallback((e, t) => {
-		let n = P.current;
+	}, []), Bt = useCallback((e, t) => {
+		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("circle-preview-source");
 		if (!r) return;
-		let i = At(e, t), a = kt(e, i);
+		let i = zt(e, t), a = Rt(e, i);
 		r.setData({
 			type: "Feature",
 			geometry: {
@@ -4911,9 +6295,9 @@ const Mapbox = forwardRef((e, c) => {
 			},
 			properties: {}
 		});
-		let o = W.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
+		let o = K.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
 		n.getLayer("circle-preview-line") && (n.setPaintProperty("circle-preview-line", "line-color", s), n.setPaintProperty("circle-preview-line", "line-width", c)), n.getLayer("circle-preview-fill") && (n.setPaintProperty("circle-preview-fill", "fill-color", l), n.setPaintProperty("circle-preview-fill", "fill-opacity", u));
-		let d = Tn.current, f = [], p = [];
+		let d = Nn.current, f = [], p = [];
 		if (d?.showArea) {
 			let t = Math.PI * i * i;
 			f.push({
@@ -4926,7 +6310,7 @@ const Mapbox = forwardRef((e, c) => {
 			});
 		}
 		if (d?.showRadius) {
-			let t = W.current?.radiusAngle ?? 90, n = destinationPoint(e, i, t), r = [(e[0] + n[0]) / 2, (e[1] + n[1]) / 2];
+			let t = K.current?.radiusAngle ?? 90, n = destinationPoint(e, i, t), r = [(e[0] + n[0]) / 2, (e[1] + n[1]) / 2];
 			p.push({
 				type: "Feature",
 				geometry: {
@@ -4953,8 +6337,8 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: p
 		});
-	}, [At, kt]), Mt = useCallback(() => {
-		let e = P.current;
+	}, [zt, Rt]), Vt = useCallback(() => {
+		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("circle-preview-source");
 		t && t.setData({
@@ -4971,10 +6355,10 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Nt = useCallback(() => {
-		st.current = null, Mt();
-	}, [Mt]), Pt = useCallback(() => {
-		let e = P.current;
+	}, []), Ht = useCallback(() => {
+		lt.current = null, Vt();
+	}, [Vt]), Ut = useCallback(() => {
+		let e = L.current;
 		e && (e.getSource("polygon-preview-source") || (e.addSource("polygon-preview-source", {
 			type: "geojson",
 			data: {
@@ -5014,9 +6398,9 @@ const Mapbox = forwardRef((e, c) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), X(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
-	}, [X]), Ft = useCallback((e, t) => {
-		let n = P.current;
+		}), Nt(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
+	}, [Nt]), Wt = useCallback((e, t) => {
+		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("polygon-preview-source"), i = n.getSource("polygon-vertices-source");
 		if (!r || !i) return;
@@ -5053,11 +6437,11 @@ const Mapbox = forwardRef((e, c) => {
 				properties: {}
 			}))
 		});
-		let o = G.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
+		let o = q.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
 		n.getLayer("polygon-preview-line") && (n.setPaintProperty("polygon-preview-line", "line-color", s), n.setPaintProperty("polygon-preview-line", "line-width", c)), n.getLayer("polygon-preview-fill") && (n.setPaintProperty("polygon-preview-fill", "fill-color", l), n.setPaintProperty("polygon-preview-fill", "fill-opacity", u)), n.getLayer("polygon-vertices") && n.setPaintProperty("polygon-vertices", "circle-color", s);
 		let d = n.getSource("polygon-preview-measure-source");
 		if (d) {
-			let e = Tn.current, t = [];
+			let e = Nn.current, t = [];
 			if (e?.showArea && a.length >= 3) {
 				let e = [...a, a[0]], n = polygonArea(e), r = 0, i = 0;
 				for (let e of a) r += e[0], i += e[1];
@@ -5099,8 +6483,8 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), It = useCallback(() => {
-		let e = P.current;
+	}, []), Gt = useCallback(() => {
+		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("polygon-preview-source");
 		t && t.setData({
@@ -5117,10 +6501,10 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Lt = useCallback(() => {
-		ct.current = [], It();
-	}, [It]), Rt = useCallback(() => {
-		let e = P.current;
+	}, []), Kt = useCallback(() => {
+		ut.current = [], Gt();
+	}, [Gt]), qt = useCallback(() => {
+		let e = L.current;
 		e && (e.getSource("square-preview-source") || (e.addSource("square-preview-source", {
 			type: "geojson",
 			data: {
@@ -5144,8 +6528,8 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), X(e, "square-preview-measure-source", "square-preview-measure-label")));
-	}, [X]), zt = useCallback((e, t) => {
+		}), Nt(e, "square-preview-measure-source", "square-preview-measure-label")));
+	}, [Nt]), Jt = useCallback((e, t) => {
 		let [n, r] = e, i = t / 2 / 6371e3, a = r * Math.PI / 180, o = i * 180 / Math.PI, s = i * 180 / Math.PI / Math.cos(a);
 		return [
 			[n - s, r + o],
@@ -5154,12 +6538,12 @@ const Mapbox = forwardRef((e, c) => {
 			[n - s, r - o],
 			[n - s, r + o]
 		];
-	}, []), Bt = useCallback((e, t) => {
-		let n = P.current;
+	}, []), Yt = useCallback((e, t) => {
+		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("square-preview-source");
 		if (!r) return;
-		let i = At(e, t) * 2, a = zt(e, i);
+		let i = zt(e, t) * 2, a = Jt(e, i);
 		r.setData({
 			type: "Feature",
 			geometry: {
@@ -5168,11 +6552,11 @@ const Mapbox = forwardRef((e, c) => {
 			},
 			properties: {}
 		});
-		let o = K.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
+		let o = J.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
 		n.getLayer("square-preview-line") && (n.setPaintProperty("square-preview-line", "line-color", s), n.setPaintProperty("square-preview-line", "line-width", c)), n.getLayer("square-preview-fill") && (n.setPaintProperty("square-preview-fill", "fill-color", l), n.setPaintProperty("square-preview-fill", "fill-opacity", u));
 		let d = n.getSource("square-preview-measure-source");
 		if (d) {
-			let t = Tn.current, n = [];
+			let t = Nn.current, n = [];
 			if (t?.showArea && n.push({
 				type: "Feature",
 				geometry: {
@@ -5196,8 +6580,8 @@ const Mapbox = forwardRef((e, c) => {
 				features: n
 			});
 		}
-	}, [At, zt]), Vt = useCallback(() => {
-		let e = P.current;
+	}, [zt, Jt]), Xt = useCallback(() => {
+		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("square-preview-source");
 		t && t.setData({
@@ -5209,10 +6593,10 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Ht = useCallback(() => {
-		lt.current = null, Vt();
-	}, [Vt]), Ut = useCallback(() => {
-		let e = P.current;
+	}, []), Zt = useCallback(() => {
+		dt.current = null, Xt();
+	}, [Xt]), Qt = useCallback(() => {
+		let e = L.current;
 		e && (e.getSource("polyline-preview-source") || (e.addSource("polyline-preview-source", {
 			type: "geojson",
 			data: {
@@ -5244,9 +6628,9 @@ const Mapbox = forwardRef((e, c) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), X(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
-	}, [X]), Wt = useCallback((e, t) => {
-		let n = P.current;
+		}), Nt(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
+	}, [Nt]), $t = useCallback((e, t) => {
+		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("polyline-preview-source"), i = n.getSource("polyline-vertices-source");
 		if (!r || !i) return;
@@ -5272,11 +6656,11 @@ const Mapbox = forwardRef((e, c) => {
 				properties: {}
 			}))
 		});
-		let o = q.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2;
+		let o = ft.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2;
 		n.getLayer("polyline-preview-line") && (n.setPaintProperty("polyline-preview-line", "line-color", s), n.setPaintProperty("polyline-preview-line", "line-width", c)), n.getLayer("polyline-vertices") && n.setPaintProperty("polyline-vertices", "circle-color", s);
 		let l = n.getSource("polyline-preview-measure-source");
 		if (l) {
-			let e = Tn.current, t = [];
+			let e = Nn.current, t = [];
 			if (e?.showLength && a.length >= 2) for (let e = 0; e < a.length - 1; e++) {
 				let n = a[e], r = a[e + 1], i = [(n[0] + r[0]) / 2, (n[1] + r[1]) / 2];
 				t.push({
@@ -5293,8 +6677,8 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), Gt = useCallback(() => {
-		let e = P.current;
+	}, []), en = useCallback(() => {
+		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("polyline-preview-source");
 		t && t.setData({
@@ -5312,145 +6696,158 @@ const Mapbox = forwardRef((e, c) => {
 			features: []
 		});
 	}, []), Q = useCallback(() => {
-		ut.current = [], Gt();
-	}, [Gt]), Kt = useCallback((e) => {
-		z(e), wt(e), e ? (B("marker"), Z(), Nt(), Lt(), Ht(), Q()) : B(null);
+		pt.current = [], en();
+	}, [en]), tn = useCallback((e) => {
+		H(e), Mt(e), e ? (U("marker"), Z(), Ht(), Kt(), Zt(), Q()) : U(null);
 	}, [
-		wt,
+		Mt,
 		Z,
-		Nt,
-		Lt,
 		Ht,
+		Kt,
+		Zt,
 		Q
-	]), qt = useCallback((e) => {
-		if (B(e), e === "rectangle") {
-			z(null), Y(), Nt(), Lt(), Ht(), Q();
-			let e = P.current;
+	]), nn = useCallback((e) => {
+		if (U(e), e === "rectangle") {
+			H(null), X(), Ht(), Kt(), Zt(), Q();
+			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "circle") {
-			z(null), Y(), Z(), Lt(), Ht(), Q();
-			let e = P.current;
+			H(null), X(), Z(), Kt(), Zt(), Q();
+			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polygon") {
-			z(null), Y(), Z(), Nt(), Ht(), Q();
-			let e = P.current;
+			H(null), X(), Z(), Ht(), Zt(), Q();
+			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "square") {
-			z(null), Y(), Z(), Nt(), Lt(), Q();
-			let e = P.current;
+			H(null), X(), Z(), Ht(), Kt(), Q();
+			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polyline") {
-			z(null), Y(), Z(), Nt(), Lt(), Ht();
-			let e = P.current;
+			H(null), X(), Z(), Ht(), Kt(), Zt();
+			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
-		} else e === "marker" ? (Z(), Nt(), Lt(), Ht(), Q()) : (z(null), Y(), Z(), Nt(), Lt(), Ht(), Q());
+		} else e === "marker" ? (Z(), Ht(), Kt(), Zt(), Q()) : (H(null), X(), Z(), Ht(), Kt(), Zt(), Q());
 	}, [
-		Y,
+		X,
 		Z,
-		Nt,
-		Lt,
 		Ht,
+		Kt,
+		Zt,
 		Q
-	]), Jt = useCallback((e) => {
-		e !== "picker" && (St(), tt(null)), e !== "edit" && (z(null), B(null), Z(), Q(), Y()), $e(e);
+	]), rn = useCallback((e) => {
+		if (e !== "picker") {
+			let e = y.value && isFinite(y.value.lng) && isFinite(y.value.lat), t = y.showMarker !== !1;
+			(!e || !t) && At(), nt(null);
+		}
+		e !== "edit" && (H(null), U(null), Z(), Q(), X()), et(e);
 	}, [
-		St,
-		Y,
+		At,
+		X,
 		Z,
 		Q
-	]), Yt = useCallback(() => R, [R]), Xt = useCallback(() => et, [et]), Zt = useCallback(() => {
-		St(), tt(null);
-	}, [St]);
+	]), an = useCallback(() => $e, [$e]), on = useCallback(() => tt, [tt]), sn = useCallback(() => {
+		At(), nt(null);
+	}, [At]);
 	useEffect(() => {
-		if (!Ze) return;
+		if (!V) return;
 		let e = y.value;
 		if (e && isFinite(e.lng) && isFinite(e.lat)) {
 			let t = [e.lng, e.lat];
-			tt(e), xt(t);
+			nt(e), kt(t);
 		}
 	}, [
 		y.value,
-		xt,
-		Ze
+		kt,
+		V
 	]);
-	let Qt = (e) => "mode" in e, $t = useCallback((e) => {
-		if ($e("edit"), St(), tt(null), V.current = !0, Qt(e)) {
-			if (e.mode === "marker") e.markerStyle ? (U.current = e.markerStyle, H.current = null, W.current = null, G.current = null, K.current = null, q.current = null, z(null), B("marker"), e.markerStyle.src && e.markerStyle.width ? wt({
+	let cn = (e) => "mode" in e, ln = useCallback((e) => {
+		if (et("edit"), At(), nt(null), W.current = !0, cn(e)) {
+			if (e.mode === "marker") e.markerStyle ? (ct.current = e.markerStyle, G.current = null, K.current = null, q.current = null, J.current = null, ft.current = null, H(null), U("marker"), e.markerStyle.src && e.markerStyle.width ? Mt({
 				id: "custom",
 				name: e.markerStyle.name || "Marker",
 				icon: e.markerStyle.src,
 				width: e.markerStyle.width
-			}) : Y()) : e.template && (U.current = null, H.current = null, W.current = null, G.current = null, K.current = null, q.current = null, z(e.template), B("marker"), wt(e.template));
+			}) : X()) : e.template && (ct.current = null, G.current = null, K.current = null, q.current = null, J.current = null, ft.current = null, H(e.template), U("marker"), Mt(e.template));
 			else if (e.mode === "rectangle") {
-				H.current = e.rectangleStyle || null, U.current = null, W.current = null, G.current = null, K.current = null, q.current = null, z(null), B("rectangle"), Y();
-				let t = P.current;
+				G.current = e.rectangleStyle || null, ct.current = null, K.current = null, q.current = null, J.current = null, ft.current = null, H(null), U("rectangle"), X();
+				let t = L.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "circle") {
-				W.current = e.circleStyle || null, H.current = null, U.current = null, G.current = null, K.current = null, q.current = null, z(null), B("circle"), Y();
-				let t = P.current;
+				K.current = e.circleStyle || null, G.current = null, ct.current = null, q.current = null, J.current = null, ft.current = null, H(null), U("circle"), X();
+				let t = L.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "polygon") {
-				G.current = e.polygonStyle || null, H.current = null, U.current = null, W.current = null, K.current = null, q.current = null, z(null), B("polygon"), Y();
-				let t = P.current;
+				q.current = e.polygonStyle || null, G.current = null, ct.current = null, K.current = null, J.current = null, ft.current = null, H(null), U("polygon"), X();
+				let t = L.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "square") {
-				K.current = e.squareStyle || null, H.current = null, U.current = null, W.current = null, G.current = null, q.current = null, z(null), B("square"), Y();
-				let t = P.current;
+				J.current = e.squareStyle || null, G.current = null, ct.current = null, K.current = null, q.current = null, ft.current = null, H(null), U("square"), X();
+				let t = L.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "polyline") {
-				q.current = e.polylineStyle || null, H.current = null, U.current = null, W.current = null, G.current = null, K.current = null, z(null), B("polyline"), Y();
-				let t = P.current;
+				ft.current = e.polylineStyle || null, G.current = null, ct.current = null, K.current = null, q.current = null, J.current = null, H(null), U("polyline"), X();
+				let t = L.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			}
-		} else z(e), B("marker"), wt(e), H.current = null, U.current = null, W.current = null, G.current = null, K.current = null, q.current = null;
+		} else H(e), U("marker"), Mt(e), G.current = null, ct.current = null, K.current = null, q.current = null, J.current = null, ft.current = null;
 	}, [
-		St,
-		wt,
-		Y
+		At,
+		Mt,
+		X
 	]);
 	useImperativeHandle(c, () => ({
-		startAnimation: dt,
-		stopAnimation: ft,
-		toggleAnimation: pt,
-		getMap: () => P.current,
-		openPopup: (e) => ht(e, "programmatic"),
-		closePopup: gt,
-		closeAllPopups: _t,
-		isPopupOpen: vt,
-		toggleUnitTrajectory: mt,
-		flyTo: yt,
-		flyToEntities: bt,
-		getMode: Yt,
-		setMode: Jt,
-		getPickedLocation: Xt,
-		clearPickedLocation: Zt,
-		startDrawing: $t,
-		getRenderer: (e) => F.current.get(e)
+		startAnimation: yt,
+		stopAnimation: bt,
+		toggleAnimation: xt,
+		getMap: () => L.current,
+		openPopup: (e) => Ct(e, "programmatic"),
+		closePopup: wt,
+		closeAllPopups: Tt,
+		isPopupOpen: Et,
+		toggleUnitTrajectory: St,
+		flyTo: Dt,
+		flyToEntities: Ot,
+		getMode: an,
+		setMode: rn,
+		getPickedLocation: on,
+		clearPickedLocation: sn,
+		startDrawing: ln,
+		getRenderer: (e) => R.current.get(e),
+		setEditingEntities: (e) => {
+			for (let t of vt.current) e.map(String).includes(String(t)) || R.current.get(t)?.setEditing?.(!1);
+			for (let t of e) R.current.get(t)?.setEditing?.(!0);
+			Y.current &&= (R.current.get(Y.current.entityId)?.cancelEditPreview?.(), null), _t(e);
+		},
+		getEditingEntities: () => vt.current,
+		startRoutePlanning: (e) => {
+			He.current?.startPlanning(e);
+		}
 	}), [
-		dt,
-		ft,
-		pt,
-		ht,
-		gt,
-		_t,
-		vt,
-		mt,
 		yt,
 		bt,
-		Yt,
-		Jt,
-		Xt,
-		Zt,
-		$t
+		xt,
+		Ct,
+		wt,
+		Tt,
+		Et,
+		St,
+		Dt,
+		Ot,
+		an,
+		rn,
+		on,
+		sn,
+		ln
 	]);
-	let en = useCallback(() => {
-		let e = P.current;
+	let un = useCallback(() => {
+		let e = L.current;
 		if (!e) return;
-		let t = new Set(T.map((e) => e.id)), n = new Set(F.current.keys());
-		for (let e of n) t.has(e) || (F.current.get(e)?.destroy(), F.current.delete(e));
-		let r = new Set(E.map(String));
-		for (let t of T) {
-			let n = applyEntityConfig(t, D), i = F.current.get(n.id);
+		let t = new Set(E.map((e) => e.id)), n = new Set(R.current.keys());
+		for (let e of n) t.has(e) || (R.current.get(e)?.destroy(), R.current.delete(e));
+		let r = new Set(D.map(String));
+		for (let t of E) {
+			let n = applyEntityConfig(t, O), i = R.current.get(n.id);
 			if (i) if (n.type === "radar" && i instanceof CanvasRadarRenderer) i.update(n);
 			else if (n.type === "image" && i instanceof CanvasImageRenderer) i.update(n);
 			else if (n.type === "marker" && i instanceof MarkerRenderer) i.update(n);
@@ -5459,34 +6856,38 @@ const Mapbox = forwardRef((e, c) => {
 			else if (n.type === "circle") if (n.fillType === "radial-gradient") if (i instanceof CanvasCircleRenderer) i.update(n);
 			else {
 				i.destroy();
-				let t = new CanvasCircleRenderer(e, n, O, k, A, j);
-				F.current.set(n.id, t), t.setSelected(r.has(String(n.id)));
+				let t = new CanvasCircleRenderer(e, n, k, A, j, M);
+				R.current.set(n.id, t), t.setSelected(r.has(String(n.id)));
 			}
 			else if (i instanceof CircleRenderer) i.update(n);
 			else {
 				i.destroy();
-				let t = new CircleRenderer(e, n, O, k, A, j);
-				F.current.set(n.id, t), t.setSelected(r.has(String(n.id)));
+				let t = new CircleRenderer(e, n, k, A, j, M);
+				R.current.set(n.id, t), t.setSelected(r.has(String(n.id)));
 			}
 			else (n.type === "square" && i instanceof SquareRenderer || n.type === "rectangle" && i instanceof RectangleRenderer || n.type === "polyline" && i instanceof PolylineRenderer) && i.update(n);
 			else {
 				let t = null;
-				n.type === "radar" ? t = new CanvasRadarRenderer(e, n, O, k) : n.type === "image" ? t = new CanvasImageRenderer(e, n, O, k) : n.type === "marker" ? t = new MarkerRenderer(e, n, O, k) : n.type === "unit" ? t = new UnitRenderer(e, n, O, k) : n.type === "polygon" ? t = new PolygonRenderer(e, n, O, k, A, M) : n.type === "circle" ? t = n.fillType === "radial-gradient" ? new CanvasCircleRenderer(e, n, O, k, A, j) : new CircleRenderer(e, n, O, k, A, j) : n.type === "square" ? t = new SquareRenderer(e, n, O, k, A, M) : n.type === "rectangle" ? t = new RectangleRenderer(e, n, O, k, A, M) : n.type === "polyline" && (t = new PolylineRenderer(e, n, O, k, M)), t && (F.current.set(n.id, t), t.setSelected(r.has(String(n.id))));
+				n.type === "radar" ? t = new CanvasRadarRenderer(e, n, k, A) : n.type === "image" ? t = new CanvasImageRenderer(e, n, k, A) : n.type === "marker" ? t = new MarkerRenderer(e, n, k, A) : n.type === "unit" ? t = new UnitRenderer(e, n, k, A) : n.type === "polygon" ? t = new PolygonRenderer(e, n, k, A, j, N) : n.type === "circle" ? t = n.fillType === "radial-gradient" ? new CanvasCircleRenderer(e, n, k, A, j, M) : new CircleRenderer(e, n, k, A, j, M) : n.type === "square" ? t = new SquareRenderer(e, n, k, A, j, N) : n.type === "rectangle" ? t = new RectangleRenderer(e, n, k, A, j, N) : n.type === "polyline" && (t = new PolylineRenderer(e, n, k, A, N)), t && (R.current.set(n.id, t), t.setSelected(r.has(String(n.id))), vt.current.map(String).includes(String(n.id)) && t.setEditing?.(!0));
 			}
 		}
+		for (let e of vt.current) {
+			let t = R.current.get(e);
+			t && t.setEditing?.(!0);
+		}
 	}, [
-		T,
 		E,
 		D,
 		O,
 		k,
 		A,
 		j,
-		M
-	]), tn = useCallback(() => {
-		for (let e of F.current.values()) e.destroy();
-		F.current.clear();
-	}, []), nn = useCallback((e) => {
+		M,
+		N
+	]), dn = useCallback(() => {
+		for (let e of R.current.values()) e.destroy();
+		R.current.clear();
+	}, []), fn = useCallback((e) => {
 		let t = e.getStyle();
 		if (!t?.layers) return;
 		let n = [
@@ -5501,10 +6902,10 @@ const Mapbox = forwardRef((e, c) => {
 			"marker-"
 		];
 		for (let e of t.layers) if (n.some((t) => e.id.startsWith(t))) return e.id;
-	}, []), rn = useCallback((e) => {
-		let t = C, n = { "raster-opacity": e.opacity ?? 1 }, r = e.brightness ?? t?.brightness, i = e.saturation ?? t?.saturation, a = e.contrast ?? t?.contrast, o = e.hueRotate ?? t?.hueRotate;
+	}, []), pn = useCallback((e) => {
+		let t = T, n = { "raster-opacity": e.opacity ?? 1 }, r = e.brightness ?? t?.brightness, i = e.saturation ?? t?.saturation, a = e.contrast ?? t?.contrast, o = e.hueRotate ?? t?.hueRotate;
 		return r !== void 0 && (n["raster-brightness-min"] = 0, n["raster-brightness-max"] = r), i !== void 0 && (n["raster-saturation"] = i), a !== void 0 && (n["raster-contrast"] = a), o !== void 0 && (n["raster-hue-rotate"] = o), n;
-	}, [C]), an = useCallback((e, t) => {
+	}, [T]), mn = useCallback((e, t) => {
 		let n = `base-layer-source-${t.id}`, r = `base-layer-${t.id}`, i = {
 			type: "raster",
 			tiles: [t.url],
@@ -5514,19 +6915,19 @@ const Mapbox = forwardRef((e, c) => {
 			scheme: t.scheme ?? "xyz"
 		};
 		t.bounds && (i.bounds = t.bounds), t.attribution && (i.attribution = t.attribution), e.addSource(n, i);
-		let a = nn(e);
+		let a = fn(e);
 		e.addLayer({
 			id: r,
 			type: "raster",
 			source: n,
-			paint: rn(t),
+			paint: pn(t),
 			layout: { visibility: t.visible === !1 ? "none" : "visible" }
 		}, a);
-	}, [nn, rn]), on = useCallback(async (e, t) => {
+	}, [fn, pn]), hn = useCallback(async (e, t) => {
 		try {
 			let n = await (await fetch(t.url)).json(), r = `base-layer-source-${t.id}`, i = `base-layer-${t.id}`;
-			if (!He.current.has(t.id)) return;
-			let a = n.format === "pbf" || n.vector_layers, o = nn(e);
+			if (!Ue.current.has(t.id)) return;
+			let a = n.format === "pbf" || n.vector_layers, o = fn(e);
 			a ? (e.addSource(r, {
 				type: "vector",
 				tiles: n.tiles,
@@ -5546,21 +6947,21 @@ const Mapbox = forwardRef((e, c) => {
 				id: i,
 				type: "raster",
 				source: r,
-				paint: rn(t),
+				paint: pn(t),
 				layout: { visibility: t.visible === !1 ? "none" : "visible" }
 			}, o));
 		} catch (e) {
 			console.error(`Failed to load TileJSON from ${t.url}:`, e);
 		}
-	}, [nn, rn]), sn = useCallback(async (e, t) => {
+	}, [fn, pn]), gn = useCallback(async (e, t) => {
 		try {
 			let n = await (await fetch(t.url)).json();
-			if (!He.current.has(t.id)) return;
+			if (!Ue.current.has(t.id)) return;
 			if (n.sources) for (let [r, i] of Object.entries(n.sources)) {
 				let n = `base-layer-source-${t.id}-${r}`;
 				e.getSource(n) || e.addSource(n, i);
 			}
-			let r = nn(e);
+			let r = fn(e);
 			if (n.layers) for (let i of n.layers) {
 				let n = `base-layer-${t.id}-${i.id}`;
 				if (e.getLayer(n)) continue;
@@ -5571,7 +6972,7 @@ const Mapbox = forwardRef((e, c) => {
 				};
 				i.type === "raster" && (a.paint = {
 					...a.paint,
-					...rn(t)
+					...pn(t)
 				}), t.visible === !1 && (a.layout = {
 					...a.layout,
 					visibility: "none"
@@ -5584,50 +6985,50 @@ const Mapbox = forwardRef((e, c) => {
 		} catch (e) {
 			console.error(`Failed to load Style JSON from ${t.url}:`, e);
 		}
-	}, [nn, rn]), cn = useCallback((e, t) => {
+	}, [fn, pn]), _n = useCallback((e, t) => {
 		let n = e.getStyle();
 		if (!n) return;
 		let r = `base-layer-${t}`, i = n.layers?.filter((e) => e.id.startsWith(r)) ?? [];
 		for (let t of i) e.getLayer(t.id) && e.removeLayer(t.id);
 		let a = `base-layer-source-${t}`, o = n.sources ?? {};
 		for (let t of Object.keys(o)) t.startsWith(a) && e.getSource(t) && e.removeSource(t);
-	}, []), ln = useCallback((e) => {
-		let t = P.current;
+	}, []), vn = useCallback((e) => {
+		let t = L.current;
 		if (!t) return;
-		let n = new Set(e.map((e) => e.id)), r = He.current;
-		for (let e of r) n.has(e) || (cn(t, e), r.delete(e));
+		let n = new Set(e.map((e) => e.id)), r = Ue.current;
+		for (let e of r) n.has(e) || (_n(t, e), r.delete(e));
 		for (let n of e) if (r.has(n.id)) {
 			let e = `base-layer-${n.id}`;
 			if (t.getLayer(e)) {
-				let r = rn(n);
+				let r = pn(n);
 				for (let [n, i] of Object.entries(r)) t.setPaintProperty(e, n, i);
 				t.setLayoutProperty(e, "visibility", n.visible === !1 ? "none" : "visible");
 			}
 		} else switch (r.add(n.id), n.type) {
 			case "raster":
-				an(t, n);
+				mn(t, n);
 				break;
 			case "tilejson":
-				on(t, n);
+				hn(t, n);
 				break;
 			case "style":
-				sn(t, n);
+				gn(t, n);
 				break;
 			default: {
 				let e = n;
-				e.url && an(t, {
+				e.url && mn(t, {
 					...e,
 					type: "raster"
 				});
 			}
 		}
 	}, [
-		an,
-		on,
-		sn,
-		cn,
-		rn
-	]), un = useCallback((e) => {
+		mn,
+		hn,
+		gn,
+		_n,
+		pn
+	]), yn = useCallback((e) => {
 		let t = e;
 		for (; t;) {
 			let e = t.getAttribute?.("data-entity-id");
@@ -5635,293 +7036,353 @@ const Mapbox = forwardRef((e, c) => {
 			t = t.parentElement;
 		}
 		return null;
-	}, []), dn = useCallback((e) => {
+	}, []), bn = useCallback((e) => {
 		let t = [e.lngLat.lng, e.lngLat.lat], n = {
 			x: e.point.x,
 			y: e.point.y
-		}, r = yn.current;
+		}, r = On.current;
 		if (r === "picker") {
 			let e = {
 				lng: t[0],
 				lat: t[1]
 			};
-			tt(e), xt(t), bn.current?.(e);
+			nt(e), kt(t), kn.current?.(e);
 			return;
 		}
+		if (ht.current) return;
 		if (r === "edit") {
-			let e = Sn.current;
+			let e = jn.current;
 			if (e === "rectangle") {
-				let e = Cn.current;
-				if (!e) ot(t);
+				let e = Mn.current;
+				if (!e) st(t);
 				else {
-					let n = H.current, r = applyEntityConfig({
+					let n = G.current, r = applyEntityConfig({
 						...n,
-						id: n?.id ?? Ct(),
+						id: n?.id ?? jt(),
 						type: "rectangle",
 						bounds: [e, t]
-					}, D);
-					Dt();
-					let i = P.current;
-					if (i && !F.current.has(r.id)) {
-						let e = new RectangleRenderer(i, r, O, k, A, M);
-						F.current.set(r.id, e);
+					}, O);
+					It();
+					let i = L.current;
+					if (i && !R.current.has(r.id)) {
+						let e = new RectangleRenderer(i, r, k, A, j, N);
+						R.current.set(r.id, e);
 					}
-					wn.current.onRectangleAdd?.(r), ot(null), H.current = null, V.current && (V.current = !1, B(null), i && (i.getCanvas().style.cursor = ""));
+					$.current.onRectangleAdd?.(r), st(null), G.current = null, W.current && (W.current = !1, U(null), i && (i.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "circle") {
-				let e = st.current;
-				if (!e) st.current = { center: t };
+				let e = lt.current;
+				if (!e) lt.current = { center: t };
 				else {
-					let n = At(e.center, t), r = W.current, i = applyEntityConfig({
+					let n = zt(e.center, t), r = K.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? Ct(),
+						id: r?.id ?? jt(),
 						type: "circle",
 						center: e.center,
 						radius: n
-					}, D);
-					Mt();
-					let a = P.current;
-					if (a && !F.current.has(i.id)) {
-						let e = new CircleRenderer(a, i, O, k, A, j);
-						F.current.set(i.id, e);
+					}, O);
+					Vt();
+					let a = L.current;
+					if (a && !R.current.has(i.id)) {
+						let e = new CircleRenderer(a, i, k, A, j, M);
+						R.current.set(i.id, e);
 					}
-					wn.current.onCircleAdd?.(i), st.current = null, W.current = null, V.current && (V.current = !1, B(null), a && (a.getCanvas().style.cursor = ""));
+					$.current.onCircleAdd?.(i), lt.current = null, K.current = null, W.current && (W.current = !1, U(null), a && (a.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "polygon") {
-				let e = ct.current;
+				let e = ut.current;
 				if (e.length >= 3) {
 					let n = e[0];
-					if (At(n, t) < 20) {
-						let t = G.current, n = applyEntityConfig({
+					if (zt(n, t) < 20) {
+						let t = q.current, n = applyEntityConfig({
 							...t,
-							id: t?.id ?? Ct(),
+							id: t?.id ?? jt(),
 							type: "polygon",
 							coordinates: [...e]
-						}, D);
-						It();
-						let r = P.current;
-						if (r && !F.current.has(n.id)) {
-							let e = new PolygonRenderer(r, n, O, k, A, M);
-							F.current.set(n.id, e);
+						}, O);
+						Gt();
+						let r = L.current;
+						if (r && !R.current.has(n.id)) {
+							let e = new PolygonRenderer(r, n, k, A, j, N);
+							R.current.set(n.id, e);
 						}
-						wn.current.onPolygonAdd?.(n), ct.current = [], G.current = null, V.current && (V.current = !1, B(null), r && (r.getCanvas().style.cursor = ""));
+						$.current.onPolygonAdd?.(n), ut.current = [], q.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
 						return;
 					}
 				}
-				ct.current = [...e, t];
+				ut.current = [...e, t];
 				return;
 			}
 			if (e === "square") {
-				let e = lt.current;
-				if (!e) lt.current = { center: t };
+				let e = dt.current;
+				if (!e) dt.current = { center: t };
 				else {
-					let n = At(e.center, t) * 2, r = K.current, i = applyEntityConfig({
+					let n = zt(e.center, t) * 2, r = J.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? Ct(),
+						id: r?.id ?? jt(),
 						type: "square",
 						center: e.center,
 						length: n
-					}, D);
-					Vt();
-					let a = P.current;
-					if (a && !F.current.has(i.id)) {
-						let e = new SquareRenderer(a, i, O, k, A, M);
-						F.current.set(i.id, e);
+					}, O);
+					Xt();
+					let a = L.current;
+					if (a && !R.current.has(i.id)) {
+						let e = new SquareRenderer(a, i, k, A, j, N);
+						R.current.set(i.id, e);
 					}
-					wn.current.onSquareAdd?.(i), lt.current = null, K.current = null, V.current && (V.current = !1, B(null), a && (a.getCanvas().style.cursor = ""));
+					$.current.onSquareAdd?.(i), dt.current = null, J.current = null, W.current && (W.current = !1, U(null), a && (a.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "polyline") {
-				ut.current = [...ut.current, t];
+				pt.current = [...pt.current, t];
 				return;
 			}
-			let n = U.current;
+			let n = ct.current;
 			if (n && n.src && n.width) {
 				let e = {
 					...n,
-					id: n.id ?? Ct(),
+					id: n.id ?? jt(),
 					type: "marker",
 					center: t,
 					src: n.src,
 					width: n.width
 				};
-				wn.current.onMarkerAdd?.(e), z(null), B(null), Y(), U.current = null, V.current = !1;
+				$.current.onMarkerAdd?.(e), H(null), U(null), X(), ct.current = null, W.current = !1;
 				return;
 			}
-			let r = xn.current;
+			let r = An.current;
 			if (r) {
 				let e = {
-					id: Ct(),
+					id: jt(),
 					type: "marker",
 					name: r.name,
 					center: t,
 					src: r.icon,
 					width: r.size || r.width || 32
 				};
-				r.customData !== void 0 && (e.customData = r.customData), wn.current.onMarkerAdd?.(e), z(null), B(null), Y(), V.current = !1;
+				r.customData !== void 0 && (e.customData = r.customData), $.current.onMarkerAdd?.(e), H(null), U(null), X(), W.current = !1;
+				return;
+			}
+		}
+		if (vt.current.length > 0) {
+			let e = L.current?.getZoom() ?? 12;
+			if (Y.current) {
+				let { entityId: e, activeHandle: n } = Y.current, r = R.current.get(e);
+				if (r?.applyHandleMove) {
+					let e = r.applyHandleMove(n, t);
+					$.current.onEntityEdit?.(e);
+				}
+				Y.current = null;
 				return;
 			}
+			for (let n of vt.current) {
+				let r = R.current.get(n);
+				if (!r?.getEditHandleAt) continue;
+				let i = r.getEditHandleAt(t, e);
+				if (i) {
+					if (i.type === "midpoint" && r.addVertex) {
+						let e = r.addVertex(i.index, i.position);
+						$.current.onEntityEdit?.(e), Y.current = {
+							entityId: n,
+							activeHandle: {
+								type: "vertex",
+								index: i.index + 1,
+								position: i.position
+							}
+						};
+					} else Y.current = {
+						entityId: n,
+						activeHandle: i
+					};
+					return;
+				}
+			}
 		}
-		let i = gn.current, a = _n.current, o = vn.current, s = un(e.originalEvent.target);
+		let i = Tn.current, a = En.current, o = Dn.current, s = yn(e.originalEvent.target);
 		if (s) {
 			let e = i.find((e) => String(e.id) === s);
 			if (e) {
 				if (a?.(e), e.popup) {
 					let t = e.popup.content ?? Pe?.(e);
-					t && mergePopupConfig(e.popup, N, t).trigger === "click" && o(s, "click", n);
+					t && mergePopupConfig(e.popup, I, t).trigger === "click" && o(s, "click", n);
 				}
 				return;
 			}
 		}
-		for (let [t, r] of F.current) {
+		for (let [t, r] of R.current) {
 			let s = r.getLabelLayerId();
-			if (s && P.current?.getLayer(s) && P.current.queryRenderedFeatures(e.point, { layers: [s] }).length > 0) {
+			if (s && L.current?.getLayer(s) && L.current.queryRenderedFeatures(e.point, { layers: [s] }).length > 0) {
 				let e = i.find((e) => e.id === t);
 				if (e) {
 					if (a?.(e), e.popup) {
 						let r = e.popup.content ?? Pe?.(e);
-						r && mergePopupConfig(e.popup, N, r).trigger === "click" && o(t, "click", n);
+						r && mergePopupConfig(e.popup, I, r).trigger === "click" && o(t, "click", n);
 					}
 					return;
 				}
 			}
 		}
-		for (let [e, r] of F.current) if (r.isPointInEntity(t)) {
+		for (let [e, r] of R.current) if (r.isPointInEntity(t)) {
 			let t = i.find((t) => t.id === e);
 			if (t) {
 				if (a?.(t), t.popup) {
 					let r = t.popup.content ?? Pe?.(t);
-					r && mergePopupConfig(t.popup, N, r).trigger === "click" && o(e, "click", n);
+					r && mergePopupConfig(t.popup, I, r).trigger === "click" && o(e, "click", n);
 				}
 				return;
 			}
 		}
 	}, [
-		N,
+		I,
 		Pe,
-		un
-	]), fn = useCallback((e) => {
-		let t = [e.lngLat.lng, e.lngLat.lat], n = Sn.current, r = Cn.current;
-		n === "rectangle" && r && Et(r, t);
-		let i = st.current;
-		n === "circle" && i && jt(i.center, t);
-		let a = ct.current;
-		n === "polygon" && a.length > 0 && Ft(a, t);
-		let o = lt.current;
-		n === "square" && o && Bt(o.center, t);
-		let s = ut.current;
-		n === "polyline" && s.length > 0 && Wt(s, t);
-		let c = gn.current, l = vn.current;
-		for (let [e, n] of F.current) if (n.isPointInEntity(t)) {
+		yn
+	]), xn = useCallback((e) => {
+		let t = [e.lngLat.lng, e.lngLat.lat];
+		if (Y.current) {
+			let { entityId: e, activeHandle: n } = Y.current;
+			R.current.get(e)?.updateEditPreview?.(n, t);
+			return;
+		}
+		let n = jn.current, r = Mn.current;
+		n === "rectangle" && r && Ft(r, t);
+		let i = lt.current;
+		n === "circle" && i && Bt(i.center, t);
+		let a = ut.current;
+		n === "polygon" && a.length > 0 && Wt(a, t);
+		let o = dt.current;
+		n === "square" && o && Yt(o.center, t);
+		let s = pt.current;
+		n === "polyline" && s.length > 0 && $t(s, t);
+		let c = Tn.current, l = Dn.current;
+		for (let [e, n] of R.current) if (n.isPointInEntity(t)) {
 			let t = c.find((t) => t.id === e);
 			if (!t?.popup) continue;
 			let n = t.popup.content ?? Pe?.(t);
 			if (!n) continue;
-			let r = mergePopupConfig(t.popup, N, n);
+			let r = mergePopupConfig(t.popup, I, n);
 			if (r.trigger === "hover") {
-				Ke.current && clearTimeout(Ke.current), Ke.current = window.setTimeout(() => {
+				qe.current && clearTimeout(qe.current), qe.current = window.setTimeout(() => {
 					l(e, "hover");
 				}, r.hoverDelay);
 				return;
 			}
 		}
-		if (Ke.current &&= (clearTimeout(Ke.current), null), L?.openedBy === "hover") {
-			let e = F.current.get(L.entityId);
-			e && !e.isPointInEntity(t) && gt(L.entityId);
+		if (qe.current &&= (clearTimeout(qe.current), null), B?.openedBy === "hover") {
+			let e = R.current.get(B.entityId);
+			e && !e.isPointInEntity(t) && wt(B.entityId);
 		}
 	}, [
-		N,
+		I,
 		Pe,
-		L,
-		gt,
-		Et,
-		jt,
+		B,
+		wt,
 		Ft,
 		Bt,
-		Wt
-	]), pn = useCallback((e) => {
-		if (e.preventDefault(), yn.current !== "edit") return;
-		if (xn.current) {
-			z(null), B(null), Y();
+		Wt,
+		Yt,
+		$t
+	]), Sn = useCallback((e) => {
+		if (e.preventDefault(), ht.current) return;
+		if (vt.current.length > 0) {
+			let t = [e.lngLat.lng, e.lngLat.lat];
+			if (Y.current) {
+				R.current.get(Y.current.entityId)?.cancelEditPreview?.(), Y.current = null;
+				return;
+			}
+			let n = L.current?.getZoom() ?? 12;
+			for (let e of vt.current) {
+				let r = R.current.get(e);
+				if (!r?.getEditHandleAt || !r.deleteVertex) continue;
+				let i = r.getEditHandleAt(t, n);
+				if (i && i.type === "vertex") {
+					let e = r.deleteVertex(i.index);
+					e && $.current.onEntityEdit?.(e);
+					return;
+				}
+			}
+		}
+		if (On.current !== "edit") return;
+		if (An.current) {
+			H(null), U(null), X();
 			return;
 		}
-		let t = Sn.current;
+		let t = jn.current;
 		if (t === "rectangle") {
-			if (Cn.current) ot(null), Dt();
+			if (Mn.current) st(null), It();
 			else {
-				B(null);
-				let e = P.current;
+				U(null);
+				let e = L.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
 		}
 		if (t === "circle") {
-			if (st.current) st.current = null, Mt();
+			if (lt.current) lt.current = null, Vt();
 			else {
-				B(null);
-				let e = P.current;
+				U(null);
+				let e = L.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
 		}
 		if (t === "polygon") {
-			let e = ct.current;
+			let e = ut.current;
 			if (e.length >= 3) {
-				let t = G.current, n = applyEntityConfig({
+				let t = q.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? Ct(),
+					id: t?.id ?? jt(),
 					type: "polygon",
 					coordinates: [...e]
-				}, D);
-				It();
-				let r = P.current;
-				if (r && !F.current.has(n.id)) {
-					let e = new PolygonRenderer(r, n, O, k, A, M);
-					F.current.set(n.id, e);
+				}, O);
+				Gt();
+				let r = L.current;
+				if (r && !R.current.has(n.id)) {
+					let e = new PolygonRenderer(r, n, k, A, j, N);
+					R.current.set(n.id, e);
 				}
-				wn.current.onPolygonAdd?.(n), ct.current = [], G.current = null, V.current && (V.current = !1, B(null), r && (r.getCanvas().style.cursor = ""));
-			} else if (e.length > 0) ct.current = [], It();
+				$.current.onPolygonAdd?.(n), ut.current = [], q.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
+			} else if (e.length > 0) ut.current = [], Gt();
 			else {
-				B(null);
-				let e = P.current;
+				U(null);
+				let e = L.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
 		}
 		if (t === "square") {
-			if (lt.current) lt.current = null, Vt();
+			if (dt.current) dt.current = null, Xt();
 			else {
-				B(null);
-				let e = P.current;
+				U(null);
+				let e = L.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
 		}
 		if (t === "polyline") {
-			let e = ut.current;
+			let e = pt.current;
 			if (e.length >= 2) {
-				let t = q.current, n = applyEntityConfig({
+				let t = ft.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? Ct(),
+					id: t?.id ?? jt(),
 					type: "polyline",
 					coordinates: [...e]
-				}, D);
-				Gt();
-				let r = P.current;
-				if (r && !F.current.has(n.id)) {
-					let e = new PolylineRenderer(r, n, O, k, M);
-					F.current.set(n.id, e);
+				}, O);
+				en();
+				let r = L.current;
+				if (r && !R.current.has(n.id)) {
+					let e = new PolylineRenderer(r, n, k, A, N);
+					R.current.set(n.id, e);
 				}
-				wn.current.onPolylineAdd?.(n), ut.current = [], q.current = null, V.current && (V.current = !1, B(null), r && (r.getCanvas().style.cursor = ""));
-			} else if (e.length > 0) ut.current = [], Gt();
+				$.current.onPolylineAdd?.(n), pt.current = [], ft.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
+			} else if (e.length > 0) pt.current = [], en();
 			else {
-				B(null);
-				let e = P.current;
+				U(null);
+				let e = L.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
@@ -5929,45 +7390,45 @@ const Mapbox = forwardRef((e, c) => {
 		let n = [e.lngLat.lng, e.lngLat.lat], r = {
 			x: e.point.x,
 			y: e.point.y
-		}, i = gn.current, a = un(e.originalEvent.target);
+		}, i = Tn.current, a = yn(e.originalEvent.target);
 		if (a) {
 			let e = i.find((e) => String(e.id) === a);
 			if (e) {
-				mn(e, r, n);
+				Cn(e, r, n);
 				return;
 			}
 		}
-		for (let [t, a] of F.current) {
+		for (let [t, a] of R.current) {
 			let o = a.getLabelLayerId();
-			if (o && P.current?.getLayer(o) && P.current.queryRenderedFeatures(e.point, { layers: [o] }).length > 0) {
+			if (o && L.current?.getLayer(o) && L.current.queryRenderedFeatures(e.point, { layers: [o] }).length > 0) {
 				let e = i.find((e) => e.id === t);
 				if (e) {
-					mn(e, r, n);
+					Cn(e, r, n);
 					return;
 				}
 			}
 		}
-		for (let [e, t] of F.current) if (t.isPointInEntity(n)) {
+		for (let [e, t] of R.current) if (t.isPointInEntity(n)) {
 			let t = i.find((t) => t.id === e);
 			if (t) {
-				mn(t, r, n);
+				Cn(t, r, n);
 				return;
 			}
 		}
 	}, [
-		un,
-		Y,
-		Dt,
-		Mt,
+		yn,
+		X,
 		It,
 		Vt,
-		Gt
-	]), mn = useCallback((e, t, n) => {
+		Gt,
+		Xt,
+		en
+	]), Cn = useCallback((e, t, n) => {
 		let r = Ve.current?.getBoundingClientRect(), i = r ? {
 			x: t.x + r.left,
 			y: t.y + r.top
 		} : t;
-		Je({
+		Ye({
 			position: i,
 			lngLat: n,
 			items: [{
@@ -5983,12 +7444,12 @@ const Mapbox = forwardRef((e, c) => {
 				}),
 				danger: !0,
 				onClick: () => {
-					wn.current.onEntityDelete?.(e);
+					$.current.onEntityDelete?.(e);
 				}
 			}]
 		});
-	}, []), hn = useCallback(() => {
-		Je(null);
+	}, []), wn = useCallback(() => {
+		Ye(null);
 	}, []);
 	useEffect(() => {
 		let e = document.createElement("div");
@@ -5999,11 +7460,11 @@ const Mapbox = forwardRef((e, c) => {
 			width: 100%;
 			pointer-events: none;
 			height: 100%;
-			z-index: ${N?.zIndex ?? 1e3};
-		`, document.body.appendChild(e), We.current = e, () => {
+			z-index: ${I?.zIndex ?? 1e3};
+		`, document.body.appendChild(e), Ge.current = e, () => {
 			document.body.contains(e) && document.body.removeChild(e);
 		};
-	}, [N?.zIndex]), useEffect(() => {
+	}, [I?.zIndex]), useEffect(() => {
 		let e = document.createElement("div");
 		return e.id = `mapbox-context-menu-container-${Date.now()}`, e.style.cssText = `
 			position: fixed;
@@ -6012,61 +7473,65 @@ const Mapbox = forwardRef((e, c) => {
 			width: 100%;
 			pointer-events: none;
 			height: 100%;
-			z-index: ${(N?.zIndex ?? 1e3) + 100};
-		`, document.body.appendChild(e), Ye.current = e, () => {
+			z-index: ${(I?.zIndex ?? 1e3) + 100};
+		`, document.body.appendChild(e), Xe.current = e, () => {
 			document.body.contains(e) && document.body.removeChild(e);
 		};
-	}, [N?.zIndex]);
-	let gn = useRef(T);
-	gn.current = T;
-	let _n = useRef(Ie);
-	_n.current = Ie;
-	let vn = useRef(ht);
-	vn.current = ht;
-	let yn = useRef(R);
-	yn.current = R;
-	let bn = useRef(b);
-	bn.current = b;
-	let xn = useRef(rt);
-	xn.current = rt;
-	let Sn = useRef(it);
-	Sn.current = it;
-	let Cn = useRef(at);
-	Cn.current = at;
-	let wn = useRef(v);
-	wn.current = v;
-	let Tn = useRef(D);
-	Tn.current = D, useEffect(() => {
+	}, [I?.zIndex]);
+	let Tn = useRef(E);
+	Tn.current = E;
+	let En = useRef(Ie);
+	En.current = Ie;
+	let Dn = useRef(Ct);
+	Dn.current = Ct;
+	let On = useRef($e);
+	On.current = $e;
+	let kn = useRef(b);
+	kn.current = b;
+	let An = useRef(it);
+	An.current = it;
+	let jn = useRef(at);
+	jn.current = at;
+	let Mn = useRef(ot);
+	Mn.current = ot;
+	let $ = useRef(v);
+	$.current = v;
+	let Nn = useRef(O);
+	Nn.current = O, useEffect(() => {
 		let e = (e) => {
-			if (e.key === "Escape" && R === "edit") {
-				if (rt && (z(null), B(null), Y()), it === "rectangle") if (at) ot(null), Dt();
+			if (e.key === "Escape" && Y.current) {
+				R.current.get(Y.current.entityId)?.cancelEditPreview?.(), Y.current = null;
+				return;
+			}
+			if (e.key === "Escape" && $e === "edit") {
+				if (it && (H(null), U(null), X()), at === "rectangle") if (ot) st(null), It();
 				else {
-					B(null);
-					let e = P.current;
+					U(null);
+					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (it === "circle") if (st.current) st.current = null, Mt();
+				if (at === "circle") if (lt.current) lt.current = null, Vt();
 				else {
-					B(null);
-					let e = P.current;
+					U(null);
+					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (it === "polygon") if (ct.current.length > 0) ct.current = [], It();
+				if (at === "polygon") if (ut.current.length > 0) ut.current = [], Gt();
 				else {
-					B(null);
-					let e = P.current;
+					U(null);
+					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (it === "square") if (lt.current) lt.current = null, Vt();
+				if (at === "square") if (dt.current) dt.current = null, Xt();
 				else {
-					B(null);
-					let e = P.current;
+					U(null);
+					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (it === "polyline") if (ut.current.length > 0) ut.current = [], Gt();
+				if (at === "polyline") if (pt.current.length > 0) pt.current = [], en();
 				else {
-					B(null);
-					let e = P.current;
+					U(null);
+					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
 			}
@@ -6075,49 +7540,49 @@ const Mapbox = forwardRef((e, c) => {
 			document.removeEventListener("keydown", e);
 		};
 	}, [
-		R,
-		rt,
+		$e,
 		it,
 		at,
-		Y,
-		Dt,
-		Mt,
+		ot,
+		X,
 		It,
 		Vt,
-		Gt
+		Gt,
+		Xt,
+		en
 	]), useEffect(() => {
-		let e = P.current;
-		if (!e || !L) return;
-		let t = L.entityId, n = L.config, r = () => {
-			let r = gn.current.find((e) => e.id === t);
+		let e = L.current;
+		if (!e || !B) return;
+		let t = B.entityId, n = B.config, r = () => {
+			let r = Tn.current.find((e) => e.id === t);
 			if (!r) {
-				_t();
+				Tt();
 				return;
 			}
-			let { position: i } = calculatePopupPosition(r, n, e, void 0, Ge.current);
-			Ge.current && (Ge.current.style.left = `${i.x}px`, Ge.current.style.top = `${i.y}px`);
+			let { position: i } = calculatePopupPosition(r, n, e, void 0, Ke.current);
+			Ke.current && (Ke.current.style.left = `${i.x}px`, Ke.current.style.top = `${i.y}px`);
 		}, i = setTimeout(() => {
 			r();
 		}, 50);
 		return e.on("move", r), e.on("zoom", r), e.on("rotate", r), e.on("pitch", r), () => {
 			clearTimeout(i), e.off("move", r), e.off("zoom", r), e.off("rotate", r), e.off("pitch", r);
 		};
-	}, [L?.entityId, _t]), useEffect(() => {
-		let e = P.current, t = Ve.current;
-		if (!e || !qe || !t) return;
-		let n = qe.lngLat, r = () => {
+	}, [B?.entityId, Tt]), useEffect(() => {
+		let e = L.current, t = Ve.current;
+		if (!e || !Je || !t) return;
+		let n = Je.lngLat, r = () => {
 			let r = e.project(n), i = t.clientWidth, a = t.clientHeight;
 			if (r.x < 0 || r.x > i || r.y < 0 || r.y > a) {
-				hn();
+				wn();
 				return;
 			}
 			let o = t.getBoundingClientRect(), s = r.x + o.left, c = r.y + o.top;
-			Xe.current && (Xe.current.style.left = `${s}px`, Xe.current.style.top = `${c}px`);
+			Ze.current && (Ze.current.style.left = `${s}px`, Ze.current.style.top = `${c}px`);
 		};
 		return e.on("move", r), e.on("zoom", r), e.on("rotate", r), e.on("pitch", r), () => {
 			e.off("move", r), e.off("zoom", r), e.off("rotate", r), e.off("pitch", r);
 		};
-	}, [qe?.lngLat, hn]), useEffect(() => {
+	}, [Je?.lngLat, wn]), useEffect(() => {
 		if (!Ve.current) return;
 		let e = {
 			version: 8,
@@ -6151,98 +7616,98 @@ const Mapbox = forwardRef((e, c) => {
 				return { url: e };
 			}
 		});
-		return P.current = _, _.on("load", () => {
+		return L.current = _, _.on("load", () => {
 			if (!_.getStyle().glyphs) {
 				let e = _.style, t = "/gis-fonts/{fontstack}/{range}.pbf";
 				e.glyphs = t, e.stylesheet && (e.stylesheet.glyphs = t);
 			}
-			I.current.clear(), T.forEach((e) => {
-				I.current.set(e.id, e);
-			}), ln(S), en(), Tt(), Ot(), Pt(), Rt(), Ut(), Qe(_), Fe?.(_);
-		}), _.on("click", dn), _.on("mousemove", fn), _.on("contextmenu", pn), () => {
-			_.off("click", dn), _.off("mousemove", fn), _.off("contextmenu", pn), tn(), St(), Y(), Z(), Q(), _.remove(), P.current = null;
+			z.current.clear(), E.forEach((e) => {
+				z.current.set(e.id, e);
+			}), vn(S), un(), Pt(), Lt(), Ut(), qt(), Qt(), Qe(_), Fe?.(_);
+		}), _.on("click", bn), _.on("mousemove", xn), _.on("contextmenu", Sn), () => {
+			_.off("click", bn), _.off("mousemove", xn), _.off("contextmenu", Sn), dn(), At(), X(), Z(), Q(), _.remove(), L.current = null;
 		};
 	}, []), useEffect(() => {
-		if (P.current) {
-			if (!P.current.isStyleLoaded()) {
-				P.current.once("load", () => {
-					I.current.clear(), T.forEach((e) => {
-						I.current.set(e.id, e);
-					}), en();
+		if (L.current) {
+			if (!L.current.isStyleLoaded()) {
+				L.current.once("load", () => {
+					z.current.clear(), E.forEach((e) => {
+						z.current.set(e.id, e);
+					}), un();
 				});
 				return;
 			}
-			I.current.clear(), T.forEach((e) => {
-				I.current.set(e.id, e);
-			}), en();
+			z.current.clear(), E.forEach((e) => {
+				z.current.set(e.id, e);
+			}), un();
 		}
-	}, [T, en]), useEffect(() => {
-		!P.current || !P.current.isStyleLoaded() || (tn(), en());
+	}, [E, un]), useEffect(() => {
+		!L.current || !L.current.isStyleLoaded() || (dn(), un());
 	}, [
-		O,
 		k,
 		A,
 		j,
 		M,
-		tn,
-		en
+		N,
+		dn,
+		un
 	]), useEffect(() => {
-		if (P.current) {
-			if (!P.current.isStyleLoaded()) {
-				P.current.once("load", () => {
-					ln(S);
+		if (L.current) {
+			if (!L.current.isStyleLoaded()) {
+				L.current.once("load", () => {
+					vn(S);
 				});
 				return;
 			}
-			ln(S);
-		}
-	}, [S, ln]);
-	let En = useRef(void 0), Dn = useRef(!0), On = useRef(S);
-	On.current = S;
-	let kn = useRef(ln);
-	kn.current = ln;
-	let An = useRef(tn);
-	An.current = tn;
-	let jn = useRef(en);
-	jn.current = en;
-	let Mn = useRef(Tt);
-	Mn.current = Tt;
-	let Nn = useRef(Ot);
-	Nn.current = Ot;
-	let Pn = useRef(Pt);
-	Pn.current = Pt;
-	let Fn = useRef(Rt);
-	Fn.current = Rt;
-	let In = useRef(Ut);
-	In.current = Ut, useEffect(() => {
-		let e = P.current;
+			vn(S);
+		}
+	}, [S, vn]);
+	let Pn = useRef(void 0), Fn = useRef(!0), In = useRef(S);
+	In.current = S;
+	let Ln = useRef(vn);
+	Ln.current = vn;
+	let Rn = useRef(dn);
+	Rn.current = dn;
+	let zn = useRef(un);
+	zn.current = un;
+	let Bn = useRef(Pt);
+	Bn.current = Pt;
+	let Vn = useRef(Lt);
+	Vn.current = Lt;
+	let Hn = useRef(Ut);
+	Hn.current = Ut;
+	let Un = useRef(qt);
+	Un.current = qt;
+	let Wn = useRef(Qt);
+	Wn.current = Qt, useEffect(() => {
+		let e = L.current;
 		if (!e) return;
 		let t = h || {
 			version: 8,
 			sources: {},
 			layers: []
 		};
-		if (Dn.current) {
-			Dn.current = !1, En.current = h;
+		if (Fn.current) {
+			Fn.current = !1, Pn.current = h;
 			return;
 		}
-		En.current !== h && (En.current = h, e.setStyle(t), e.once("style.load", () => {
+		Pn.current !== h && (Pn.current = h, e.setStyle(t), e.once("style.load", () => {
 			if (!e.getStyle().glyphs) {
 				let t = e.style, n = "/gis-fonts/{fontstack}/{range}.pbf";
 				t.glyphs = n, t.stylesheet && (t.stylesheet.glyphs = n);
 			}
-			He.current.clear(), kn.current(On.current), An.current(), jn.current(), Mn.current(), Nn.current(), Pn.current(), Fn.current(), In.current();
+			Ue.current.clear(), Ln.current(In.current), Rn.current(), zn.current(), Bn.current(), Vn.current(), Hn.current(), Un.current(), Wn.current();
 		}));
 	}, [h]), useEffect(() => {
-		let e = new Set(E.map(String));
-		for (let [t, n] of F.current) n.setSelected(e.has(String(t)));
-	}, [E]);
-	let Ln = useRef({});
+		let e = new Set(D.map(String));
+		for (let [t, n] of R.current) n.setSelected(e.has(String(t)));
+	}, [D]);
+	let Gn = useRef({});
 	useEffect(() => {
-		let e = P.current;
+		let e = L.current;
 		if (!e) return;
-		let t = Ln.current, n = l && (t.center?.[0] !== l[0] || t.center?.[1] !== l[1]), r = t.zoom !== u, i = t.pitch !== d, a = t.bearing !== f;
-		!n && !r && !i && !a || (Ln.current = {
+		let t = Gn.current, n = l && (t.center?.[0] !== l[0] || t.center?.[1] !== l[1]), r = t.zoom !== u, i = t.pitch !== d, a = t.bearing !== f;
+		!n && !r && !i && !a || (Gn.current = {
 			center: l,
 			zoom: u,
 			pitch: d,
@@ -6259,13 +7724,13 @@ const Mapbox = forwardRef((e, c) => {
 		d,
 		f
 	]);
-	let Rn = (() => be === !1 ? null : be === !0 ? { enabled: !0 } : be)(), zn = (() => Se === !1 ? null : Se === !0 ? { enabled: !0 } : Se)(), Bn = (() => Ee === !1 ? null : Ee === !0 ? { enabled: !0 } : Ee)(), $ = (() => {
-		if (De === !1) return null;
+	let Kn = (() => Ce === !1 ? null : Ce === !0 ? { enabled: !0 } : Ce)(), qn = (() => P === !1 ? null : P === !0 ? { enabled: !0 } : P)(), Jn = (() => we === !1 ? null : we === !0 ? { enabled: !0 } : we)(), Yn = (() => {
+		if (Te === !1) return null;
 		let e, t;
 		if (S && S.length > 0) {
 			let n = S.find((e) => e.hasRoadNetwork === !0) || S[0];
 			if (n.type === "style") {
-				let t = P.current?.getStyle();
+				let t = L.current?.getStyle();
 				if (t?.sources) {
 					let r = `base-layer-source-${n.id}-`, i = Object.keys(t.sources).find((e) => e.startsWith(r));
 					i && (e = i);
@@ -6273,35 +7738,35 @@ const Mapbox = forwardRef((e, c) => {
 			} else e = `base-layer-source-${n.id}`;
 			t = n.roadNetworkSourceLayer || "road";
 		}
-		return De === !0 ? {
+		return Te === !0 ? {
 			enabled: !0,
 			source: e,
 			sourceLayer: t
 		} : {
-			...De,
-			source: De.source || e,
-			sourceLayer: De.sourceLayer || t
+			...Te,
+			source: Te.source || e,
+			sourceLayer: Te.sourceLayer || t
 		};
-	})(), Vn = (() => Oe ? Oe === !0 ? { enabled: !0 } : Oe : null)(), Hn = (() => Ae ? Ae === !0 ? { enabled: !0 } : Ae : null)(), Un = useMemo(() => {
+	})(), Xn = (() => Ee ? Ee === !0 ? { enabled: !0 } : Ee : null)(), Zn = (() => Ae ? Ae === !0 ? { enabled: !0 } : Ae : null)(), Qn = (() => je || null)(), $n = useMemo(() => {
 		let e = [];
 		for (let t of S) if (t.applyRasterPaint) if (t.type === "style") {
-			let n = P.current;
+			let n = L.current;
 			if (n) {
 				let r = `base-layer-${t.id}-`, i = n.getStyle();
 				if (i?.layers) for (let t of i.layers) t.id.startsWith(r) && t.type === "raster" && e.push(t.id);
 			}
 		} else e.push(`base-layer-${t.id}`);
 		return e;
-	}, [S, Ze]);
+	}, [S, V]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: `comp-mapbox ${R === "picker" ? "comp-mapbox--picker-mode" : ""} ${ze}`,
+		className: `comp-mapbox ${$e === "picker" ? "comp-mapbox--picker-mode" : ""} ${ze}`,
 		style: Be,
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				ref: Ve,
 				className: "comp-mapbox__map"
 			}),
-			R === "picker" && y.showCrosshair === !0 && /* @__PURE__ */ jsxs("div", {
+			$e === "picker" && y.showCrosshair === !0 && /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__crosshair",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "comp-mapbox__crosshair-h",
@@ -6311,83 +7776,102 @@ const Mapbox = forwardRef((e, c) => {
 					style: y.crosshairColor ? { backgroundColor: y.crosshairColor } : void 0
 				})]
 			}),
-			R === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) || $ && $.enabled !== !1 ? /* @__PURE__ */ jsxs("div", {
+			$e === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) || Yn && Yn.enabled !== !1 || Qn && Qn.enabled !== !1 ? /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__edit-controls",
-				children: [R === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) && /* @__PURE__ */ jsx(EditControl, {
-					markerTemplates: v.markerTemplates || [],
-					selectedTemplate: rt,
-					onTemplateSelect: Kt,
-					drawMode: it,
-					onDrawModeChange: qt,
-					showRectangleTool: v.showRectangleTool,
-					showCircleTool: v.showCircleTool,
-					showPolygonTool: v.showPolygonTool,
-					showSquareTool: v.showSquareTool,
-					showPolylineTool: v.showPolylineTool
-				}), $ && $.enabled !== !1 && /* @__PURE__ */ jsx(RoadHighlightControl, {
-					map: Ze,
-					highlightWidth: $.highlightWidth,
-					defaultRoadTypes: $.defaultRoadTypes,
-					defaultMinWidth: $.defaultMinWidth,
-					source: $.source,
-					sourceLayer: $.sourceLayer,
-					className: $.className,
-					style: $.style
-				})]
+				children: [
+					$e === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) && /* @__PURE__ */ jsx(EditControl, {
+						markerTemplates: v.markerTemplates || [],
+						selectedTemplate: it,
+						onTemplateSelect: tn,
+						drawMode: at,
+						onDrawModeChange: nn,
+						showRectangleTool: v.showRectangleTool,
+						showCircleTool: v.showCircleTool,
+						showPolygonTool: v.showPolygonTool,
+						showSquareTool: v.showSquareTool,
+						showPolylineTool: v.showPolylineTool
+					}),
+					Yn && Yn.enabled !== !1 && /* @__PURE__ */ jsx(RoadHighlightControl, {
+						map: V,
+						highlightWidth: Yn.highlightWidth,
+						defaultRoadTypes: Yn.defaultRoadTypes,
+						defaultMinWidth: Yn.defaultMinWidth,
+						source: Yn.source,
+						sourceLayer: Yn.sourceLayer,
+						className: Yn.className,
+						style: Yn.style
+					}),
+					Qn && Qn.enabled !== !1 && /* @__PURE__ */ jsx(RoutePlanningControl, {
+						ref: He,
+						map: V,
+						pointCount: Qn.pointCount,
+						showPointCountInput: Qn.showPointCountInput,
+						visualType: Qn.visualType,
+						onSelectFinished: Qn.onSelectFinished
+					})
+				]
 			}) : null,
-			(Rn?.enabled !== !1 || zn?.enabled !== !1 || Bn?.enabled !== !1 || Vn && Vn.enabled !== !1 || Hn && Hn.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
+			(Kn?.enabled !== !1 || qn?.enabled !== !1 || Jn?.enabled !== !1 || Xn && Xn.enabled !== !1 || Zn && Zn.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__controls",
 				children: [
-					Rn && Rn.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
-						map: Ze,
-						precision: Rn.precision,
-						className: Rn.className,
-						style: Rn.style
+					Kn && Kn.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
+						map: V,
+						precision: Kn.precision,
+						className: Kn.className,
+						style: Kn.style
 					}),
-					zn && zn.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
-						map: Ze,
-						maxWidth: zn.maxWidth,
-						unit: zn.unit,
-						className: zn.className,
-						style: zn.style
+					qn && qn.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
+						map: V,
+						maxWidth: qn.maxWidth,
+						unit: qn.unit,
+						className: qn.className,
+						style: qn.style
 					}),
-					Vn && Vn.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
-						map: Ze,
-						entityConfig: D,
-						className: Vn.className,
-						style: Vn.style
+					Xn && Xn.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
+						map: V,
+						entityConfig: O,
+						onDrawModeChange: (e) => {
+							ht.current = e;
+						},
+						className: Xn.className,
+						style: Xn.style
 					}),
-					Hn && Hn.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
-						map: Ze,
-						value: C,
-						onChange: je,
-						rasterPaintLayerIds: Un,
-						className: Hn.className,
-						style: Hn.style
+					Zn && Zn.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
+						map: V,
+						value: T,
+						onChange: Me,
+						rasterPaintLayerIds: $n,
+						className: Zn.className,
+						style: Zn.style
 					}),
-					Bn && Bn.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
-						map: Ze,
+					Jn && Jn.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
+						map: V,
 						initialCenter: l,
 						initialZoom: u,
 						initialPitch: d,
 						initialBearing: f,
-						duration: Bn.duration,
-						className: Bn.className,
-						style: Bn.style
+						duration: Jn.duration,
+						className: Jn.className,
+						style: Jn.style
 					})
 				]
 			}),
-			L && We.current && /* @__PURE__ */ jsx(EntityPopup, {
-				popupState: L,
-				onClose: () => gt(L.entityId),
-				portalContainer: We.current,
-				popupRef: Ge
+			!(Qn && Qn.enabled !== !1) && /* @__PURE__ */ jsx(RoutePlanningControl, {
+				ref: He,
+				map: V,
+				showButton: !1
+			}),
+			B && Ge.current && /* @__PURE__ */ jsx(EntityPopup, {
+				popupState: B,
+				onClose: () => wt(B.entityId),
+				portalContainer: Ge.current,
+				popupRef: Ke
 			}),
-			qe && Ye.current && /* @__PURE__ */ jsx(ContextMenu, {
-				menuState: qe,
-				onClose: hn,
-				portalContainer: Ye.current,
-				menuRef: Xe
+			Je && Xe.current && /* @__PURE__ */ jsx(ContextMenu, {
+				menuState: Je,
+				onClose: wn,
+				portalContainer: Xe.current,
+				menuRef: Ze
 			})
 		]
 	});