bbl-mapbox-react 0.0.30 → 0.0.32

package/dist/index.mjs

@@ -1582,6 +1582,371 @@ var CanvasImageRenderer = class extends BaseCanvasRenderer {
 	destroy() {
 		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 bezierPoint(e, t, n, r) {
+	let i = 1 - r;
+	return [i * i * e[0] + 2 * i * r * t[0] + r * r * n[0], i * i * e[1] + 2 * i * r * t[1] + r * r * n[1]];
+}
+function bezierTangentBearing(e, t, n, r) {
+	let i = .001, a = Math.max(0, r - i), o = Math.min(1, r + i);
+	return bearing(bezierPoint(e, t, n, a), bezierPoint(e, t, n, o));
+}
+function generateArrowShape(e, t, n, r, i = 64) {
+	let a = .92, o = r / 6, s = o * 3, c = [], l = [], u = Math.round(i * a);
+	for (let i = 0; i <= u; i++) {
+		let s = i / u * a, d = bezierPoint(e, t, n, s), f = bezierTangentBearing(e, t, n, s), p = 1 - s / a, m = (o + (r - o) * p * p) / 2;
+		c.push(destinationPoint(d, m, f + 90)), l.push(destinationPoint(d, m, f - 90));
+	}
+	let d = bezierPoint(e, t, n, 1), f = c[c.length - 1], p = l[l.length - 1], m = a - .01, h = bezierPoint(e, t, n, m), g = bezierTangentBearing(e, t, n, m), _ = destinationPoint(h, s / 2, g + 90), v = destinationPoint(h, s / 2, g - 90), y = [...l].reverse(), b = [
+		...c,
+		_,
+		d,
+		v,
+		...y,
+		c[0]
+	], x = [
+		[...c],
+		[...l],
+		[
+			f,
+			_,
+			d,
+			v,
+			p
+		]
+	];
+	return {
+		polygon: b,
+		strokes: x
+	};
+}
+var AttackDirectionRenderer = class e {
+	static {
+		this.DEFAULTS = {
+			strokeColor: "#FF0000",
+			strokeWidth: 2,
+			strokeOpacity: 1,
+			fillColor: "#FF0000",
+			fillOpacity: .35,
+			tailWidthRatio: .18
+		};
+	}
+	constructor(e, t, n, r) {
+		this.isSelected = !1, this.initialized = !1, this.cachedPolygon = [], this.isEditing = !1, this.map = e, this.entity = t, this.globalNameConfig = n, this.globalSelectNameConfig = r, this.sourceId = `attack-direction-source-${t.id}`, this.fillLayerId = `attack-direction-fill-${t.id}`, this.strokeLayerId = `attack-direction-stroke-${t.id}`, this.labelLayerId = `attack-direction-label-${t.id}`, this.editSourceId = `attack-direction-edit-source-${t.id}`, this.editHandleLayerId = `attack-direction-edit-handles-${t.id}`, this.editMoveLayerId = `attack-direction-edit-move-${t.id}`, this.initLayers();
+	}
+	resolveTailWidth(t) {
+		let n = t ?? this.entity.coordinates;
+		return this.entity.tailWidthRatio == null ? this.entity.tailWidth == null ? distance(n[0], n[2]) * e.DEFAULTS.tailWidthRatio : this.entity.tailWidth : distance(n[0], n[2]) * this.entity.tailWidthRatio;
+	}
+	get nameStyle() {
+		return resolveNameConfig(this.entity.nameConfig, this.globalNameConfig, DEFAULT_NAME_CONFIG);
+	}
+	get selectNameStyle() {
+		return resolveNameConfig(this.entity.selectNameConfig, this.globalSelectNameConfig, DEFAULT_SELECT_NAME_CONFIG);
+	}
+	initLayers() {
+		if (!this.initialized) try {
+			let t = this.getGeoJSON();
+			this.map.addSource(this.sourceId, {
+				type: "geojson",
+				data: t
+			});
+			let n = this.entity.confidence ?? 1, r = confidenceToOpacity(n);
+			this.map.addLayer({
+				id: this.fillLayerId,
+				type: "fill",
+				source: this.sourceId,
+				filter: [
+					"==",
+					"$type",
+					"Polygon"
+				],
+				paint: {
+					"fill-color": this.entity.fillColor ?? e.DEFAULTS.fillColor,
+					"fill-opacity": (this.entity.fillOpacity ?? e.DEFAULTS.fillOpacity) * r
+				}
+			}), this.map.addLayer({
+				id: this.strokeLayerId,
+				type: "line",
+				source: this.sourceId,
+				filter: [
+					"==",
+					"$type",
+					"LineString"
+				],
+				layout: {
+					"line-join": "round",
+					"line-cap": "round"
+				},
+				paint: {
+					"line-color": this.isSelected ? "#ffcc00" : this.entity.strokeColor ?? e.DEFAULTS.strokeColor,
+					"line-width": this.entity.strokeWidth ?? e.DEFAULTS.strokeWidth,
+					"line-opacity": (this.entity.strokeOpacity ?? e.DEFAULTS.strokeOpacity) * r
+				}
+			}), this.entity.name && this.map.addLayer({
+				id: this.labelLayerId,
+				type: "symbol",
+				source: this.sourceId,
+				filter: [
+					"==",
+					["get", "pointType"],
+					"label"
+				],
+				layout: {
+					"text-field": ["get", "name"],
+					"text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
+					"text-size": 14,
+					"text-anchor": "top",
+					"text-offset": [0, .8],
+					"text-allow-overlap": !0
+				},
+				paint: {
+					"text-color": this.isSelected ? this.selectNameStyle.fillColor : this.nameStyle.fillColor,
+					"text-halo-color": this.isSelected ? this.selectNameStyle.strokeColor : this.nameStyle.strokeColor,
+					"text-halo-width": this.isSelected ? this.selectNameStyle.strokeWidth : this.nameStyle.strokeWidth,
+					"text-opacity": r
+				}
+			}), this.initialized = !0;
+		} catch {
+			this.map.once("idle", () => this.initLayers());
+		}
+	}
+	getGeoJSON(e) {
+		let t = e ?? this.entity.coordinates;
+		if (!t || t.length < 3) return {
+			type: "FeatureCollection",
+			features: []
+		};
+		let n = this.resolveTailWidth(t), r = generateArrowShape(t[0], t[1], t[2], n);
+		this.cachedPolygon = r.polygon;
+		let i = [{
+			type: "Feature",
+			geometry: {
+				type: "Polygon",
+				coordinates: [r.polygon]
+			},
+			properties: {}
+		}, ...r.strokes.map((e, t) => ({
+			type: "Feature",
+			geometry: {
+				type: "LineString",
+				coordinates: e
+			},
+			properties: { strokeIndex: t }
+		}))];
+		return this.entity.name && i.push({
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: t[0]
+			},
+			properties: {
+				pointType: "label",
+				name: this.entity.name
+			}
+		}), {
+			type: "FeatureCollection",
+			features: i
+		};
+	}
+	getEntityId() {
+		return this.entity.id;
+	}
+	getCenter() {
+		if (this.entity.center) return this.entity.center;
+		let e = this.entity.coordinates;
+		return [(e[0][0] + e[1][0] + e[2][0]) / 3, (e[0][1] + e[1][1] + e[2][1]) / 3];
+	}
+	getBounds() {
+		let e = this.cachedPolygon;
+		if (!e || e.length === 0) {
+			let e = this.getCenter();
+			return [e, e];
+		}
+		let t = Infinity, n = -Infinity, r = Infinity, i = -Infinity;
+		for (let a of e) t = Math.min(t, a[0]), n = Math.max(n, a[0]), r = Math.min(r, a[1]), i = Math.max(i, a[1]);
+		return [[t, r], [n, i]];
+	}
+	getLayerId() {
+		return this.fillLayerId;
+	}
+	getLabelLayerId() {
+		return this.entity.name ? this.labelLayerId : null;
+	}
+	setSelected(t) {
+		this.isSelected !== t && (this.isSelected = t, this.initialized && (this.map.getLayer(this.strokeLayerId) && this.map.setPaintProperty(this.strokeLayerId, "line-color", t ? "#ffcc00" : this.entity.strokeColor ?? e.DEFAULTS.strokeColor), this.map.getLayer(this.labelLayerId) && (this.map.setPaintProperty(this.labelLayerId, "text-color", t ? this.selectNameStyle.fillColor : this.nameStyle.fillColor), this.map.setPaintProperty(this.labelLayerId, "text-halo-color", t ? this.selectNameStyle.strokeColor : this.nameStyle.strokeColor), this.map.setPaintProperty(this.labelLayerId, "text-halo-width", t ? this.selectNameStyle.strokeWidth : this.nameStyle.strokeWidth))));
+	}
+	isPointInEntity(e) {
+		return !this.cachedPolygon || this.cachedPolygon.length < 3 ? !1 : this.pointInPolygon(e, this.cachedPolygon);
+	}
+	pointInPolygon(e, t) {
+		let [n, r] = e, i = !1;
+		for (let e = 0, a = t.length - 1; e < t.length; a = e++) {
+			let [o, s] = t[e], [c, l] = t[a];
+			s > r != l > r && n < (c - o) * (r - s) / (l - s) + o && (i = !i);
+		}
+		return i;
+	}
+	update(t) {
+		let n = this.entity;
+		if (this.entity = t, !this.initialized) return;
+		let r = t.confidence ?? 1, i = confidenceToOpacity(r);
+		if (n.coordinates !== t.coordinates || n.tailWidth !== t.tailWidth || n.shape !== t.shape || n.name !== t.name) {
+			let e = this.map.getSource(this.sourceId);
+			e && e.setData(this.getGeoJSON()), !n.name && t.name && !this.map.getLayer(this.labelLayerId) ? this.map.addLayer({
+				id: this.labelLayerId,
+				type: "symbol",
+				source: this.sourceId,
+				filter: [
+					"==",
+					["get", "pointType"],
+					"label"
+				],
+				layout: {
+					"text-field": ["get", "name"],
+					"text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
+					"text-size": 14,
+					"text-anchor": "top",
+					"text-offset": [0, .8],
+					"text-allow-overlap": !0
+				},
+				paint: {
+					"text-color": this.isSelected ? this.selectNameStyle.fillColor : this.nameStyle.fillColor,
+					"text-halo-color": this.isSelected ? this.selectNameStyle.strokeColor : this.nameStyle.strokeColor,
+					"text-halo-width": this.isSelected ? this.selectNameStyle.strokeWidth : this.nameStyle.strokeWidth,
+					"text-opacity": i
+				}
+			}) : n.name && !t.name && this.map.getLayer(this.labelLayerId) && this.map.removeLayer(this.labelLayerId);
+		}
+		(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);
+	}
+	getEditHandleGeoJSON(e) {
+		let t = e ?? this.entity.coordinates, n = [];
+		for (let e = 0; e < 3; e++) n.push({
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: t[e]
+			},
+			properties: {
+				handleType: "vertex",
+				index: e
+			}
+		});
+		let r = bezierTangentBearing(t[0], t[1], t[2], 0) + 90, i = this.resolveTailWidth(e), a = destinationPoint(t[0], i * .6, r);
+		return n.push({
+			type: "Feature",
+			geometry: {
+				type: "Point",
+				coordinates: a
+			},
+			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) {
+		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, r = this.map.project(e), i = bezierTangentBearing(n[0], n[1], n[2], 0) + 90, a = this.resolveTailWidth(), o = destinationPoint(n[0], a * .6, i), s = this.map.project(o), c = r.x - s.x, l = r.y - s.y;
+		if (c * c + l * l <= 144) return {
+			type: "move",
+			index: 0,
+			position: o
+		};
+		for (let e = 0; e < 3; 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;
+	}
+	applyHandleMove(e, t) {
+		let n;
+		if (e.type === "move") {
+			let r = t[0] - e.position[0], i = t[1] - e.position[1];
+			n = this.entity.coordinates.map((e) => [e[0] + r, e[1] + i]);
+		} else 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;
+		if (e.type === "move") {
+			let r = t[0] - e.position[0], i = t[1] - e.position[1];
+			n = this.entity.coordinates.map((e) => [e[0] + r, e[1] + i]);
+		} else 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(n)), 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.removeEditLayers(), 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 {
 		this.DEFAULTS = {
@@ -4187,7 +4552,7 @@ function detectVectorSource(e) {
 	return null;
 }
 const RoadHighlightControl = forwardRef(({ map: e, highlightWidth: i = 3, defaultRoadTypes: c = [], defaultMinWidth: l = 0, source: u, sourceLayer: d, classField: _ = "class", className: v = "", style: y, showButton: b = !0 }, x) => {
-	let [S, C] = useState(!1), [w, ve] = useState(c), [T, E] = useState(!1), [D, ye] = useState(null), be = useRef(!1), k = useRef(null), xe = useRef(null), A = useRef(null), Se = useCallback((e, t, n) => {
+	let [S, C] = useState(!1), [w, ye] = useState(c), [T, E] = useState(!1), [D, be] = useState(null), xe = useRef(!1), k = useRef(null), Se = useRef(null), A = useRef(null), Ce = useCallback((e, t, n) => {
 		if (!e.isStyleLoaded() || !e.getSource(t)) return !1;
 		let r = !0;
 		return ROAD_TYPE_OPTIONS.forEach((a) => {
@@ -4223,13 +4588,13 @@ const RoadHighlightControl = forwardRef(({ map: e, highlightWidth: i = 3, defaul
 				let r = detectVectorSource(e);
 				r && (console.log("Auto-detected vector source:", r), t ||= r.source, n ||= r.sourceLayer);
 			}
-			t && n ? Se(e, t, n) && (be.current = !0, E(!0)) : console.warn("No vector source found for road highlighting");
+			t && n ? Ce(e, t, n) && (xe.current = !0, E(!0)) : console.warn("No vector source found for road highlighting");
 		};
 		e.isStyleLoaded() ? t() : e.once("load", t);
 		let n = () => {
 			e.isStyleLoaded() && t();
 		}, r = () => {
-			be.current || t();
+			xe.current || t();
 		};
 		return e.on("styledata", n), e.on("sourcedata", r), () => {
 			if (e) try {
@@ -4240,7 +4605,7 @@ const RoadHighlightControl = forwardRef(({ map: e, highlightWidth: i = 3, defaul
 		e,
 		u,
 		d,
-		Se
+		Ce
 	]), useEffect(() => {
 		!e || !T || ROAD_TYPE_OPTIONS.forEach((t) => {
 			let n = `${LAYER_ID_PREFIX}${t.class}`;
@@ -4258,7 +4623,7 @@ const RoadHighlightControl = forwardRef(({ map: e, highlightWidth: i = 3, defaul
 	]), useEffect(() => {
 		if (!S) return;
 		let e = (e) => {
-			k.current && !k.current.contains(e.target) && xe.current && !xe.current.contains(e.target) && C(!1);
+			k.current && !k.current.contains(e.target) && Se.current && !Se.current.contains(e.target) && C(!1);
 		}, t = setTimeout(() => {
 			document.addEventListener("mousedown", e);
 		}, 0);
@@ -4358,10 +4723,10 @@ const RoadHighlightControl = forwardRef(({ map: e, highlightWidth: i = 3, defaul
 		M
 	]);
 	let N = (e, t) => {
-		ve((n) => t ? [...n, e] : n.filter((t) => t !== e));
-	}, Ce = (e) => {
-		ve(e ? ROAD_TYPE_OPTIONS.map((e) => e.class) : []);
-	}, P = w.length > 0, we = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		ye((n) => t ? [...n, e] : n.filter((t) => t !== e));
+	}, we = (e) => {
+		ye(e ? ROAD_TYPE_OPTIONS.map((e) => e.class) : []);
+	}, P = w.length > 0, Te = () => /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: "mapbox-road-highlight-control__panel-header",
 			children: [/* @__PURE__ */ jsx("span", {
@@ -4370,7 +4735,7 @@ const RoadHighlightControl = forwardRef(({ map: e, highlightWidth: i = 3, defaul
 			}), /* @__PURE__ */ jsx(Checkbox, {
 				checked: w.length === ROAD_TYPE_OPTIONS.length,
 				indeterminate: w.length > 0 && w.length < ROAD_TYPE_OPTIONS.length,
-				onChange: Ce,
+				onChange: we,
 				style: {
 					"--color-text-1": "#fff",
 					"--color-border-2": "rgba(255, 255, 255, 0.3)"
@@ -4421,11 +4786,11 @@ const RoadHighlightControl = forwardRef(({ map: e, highlightWidth: i = 3, defaul
 			children: "正在初始化图层..."
 		})
 	] });
-	return useImperativeHandle(x, () => ({ setPortalContainer: ye })), /* @__PURE__ */ jsxs(Fragment, { children: [b && /* @__PURE__ */ jsxs("div", {
+	return useImperativeHandle(x, () => ({ setPortalContainer: be })), /* @__PURE__ */ jsxs(Fragment, { children: [b && /* @__PURE__ */ jsxs("div", {
 		className: `mapbox-road-highlight-control ${v}`,
 		style: y,
 		children: [/* @__PURE__ */ jsxs("button", {
-			ref: xe,
+			ref: Se,
 			className: `mapbox-control-btn mapbox-road-highlight-control__btn ${P ? "mapbox-road-highlight-control__btn--active" : ""}`,
 			onClick: () => C(!S),
 			title: `路网高亮${w.length > 0 ? ` (已选 ${w.length})` : ""}`,
@@ -4437,9 +4802,9 @@ const RoadHighlightControl = forwardRef(({ map: e, highlightWidth: i = 3, defaul
 		}), S && /* @__PURE__ */ jsx("div", {
 			ref: k,
 			className: "mapbox-road-highlight-control__panel",
-			children: we()
+			children: Te()
 		})]
-	}), D && createPortal(we(), D)] });
+	}), D && createPortal(Te(), D)] });
 });
 RoadHighlightControl.displayName = "RoadHighlightControl";
 var measure_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='1773733446763'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='1802'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='128'%20height='128'%3e%3cpath%20d='M110.34624%20352.01024a30.72%2030.72%200%201%200%2061.44%200v-38.46144h680.42752v38.5024a30.72%2030.72%200%200%200%2061.44%200V213.72928a30.72%2030.72%200%200%200-61.44%200v38.33856H171.78624v-38.33856a30.72%2030.72%200%200%200-61.44%200v138.28096z%20m34.816%20127.22176a34.816%2034.816%200%200%200-34.816%2034.816v312.60672c0%2019.2512%2015.5648%2034.816%2034.816%2034.816h733.5936c19.2512%200%2034.816-15.5648%2034.816-34.816V514.048a34.816%2034.816%200%200%200-34.816-34.816H145.2032z%20m26.624%20320.79872V540.672h680.3456v259.35872H171.8272z'%20fill='white'%20p-id='1804'%3e%3c/path%3e%3c/svg%3e", square_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3crect%20x='192'%20y='192'%20width='640'%20height='640'%20rx='32'%20ry='32'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'/%3e%3c/svg%3e", rectangle_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3crect%20x='160'%20y='240'%20width='704'%20height='544'%20rx='32'%20ry='32'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'/%3e%3c/svg%3e", circle_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3ccircle%20cx='512'%20cy='512'%20r='384'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'/%3e%3c/svg%3e", polygon_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3cpolygon%20points='512,128%20864,384%20736,800%20288,800%20160,384'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'%20stroke-linejoin='round'/%3e%3c/svg%3e", polyline_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3cpolyline%20points='160,768%20384,256%20640,576%20864,192'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'%20stroke-linejoin='round'%20stroke-linecap='round'/%3e%3c/svg%3e", delete_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='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", SHAPE_LABELS = {
@@ -4693,23 +5058,23 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 		showRadius: r.showRadius ?? !0
 	} : _, [x, S] = useState([]), C = useRef(/* @__PURE__ */ new Map()), w = useRef(0), T = useRef(null), E = useRef(null), D = useRef(null), O = useRef(null), k = useRef(null), j = useRef([]), M = useRef([]), N = useRef(b);
 	N.current = b;
-	let Ce = useRef(f);
-	Ce.current = f;
+	let we = useRef(f);
+	we.current = f;
 	let P = useCallback(() => `measure-${++w.current}`, []);
 	useEffect(() => {
 		s?.(f !== null);
 	}, [f, s]);
-	let we = useRef(!1), Te = useCallback(() => {
-		!e || !e.isStyleLoaded() || (initAllPreviewLayers(e), we.current = !0);
+	let Te = useRef(!1), Ee = useCallback(() => {
+		!e || !e.isStyleLoaded() || (initAllPreviewLayers(e), Te.current = !0);
 	}, [e]);
 	useEffect(() => {
 		if (!e) return;
 		let t = () => {
-			initAllPreviewLayers(e), we.current = !0;
+			initAllPreviewLayers(e), Te.current = !0;
 		};
 		e.isStyleLoaded() ? t() : e.once("load", t);
 		let n = () => {
-			we.current = !1;
+			Te.current = !1;
 		};
 		return e.on("style.load", n), () => {
 			if (e) try {
@@ -4735,12 +5100,12 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 			};
 			S((t) => [...t, e]);
 		}
-	}, [e]), Ee = useCallback((e) => {
+	}, [e]), De = 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(() => {
+	}, []), Oe = useCallback(() => {
 		C.current.forEach((e) => e.destroy()), C.current.clear(), S([]);
-	}, []), Oe = useCallback((t) => {
+	}, []), ke = useCallback((t) => {
 		if (!e) return;
 		let n = C.current.get(t);
 		if (!n) return;
@@ -4750,7 +5115,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 			maxZoom: 18,
 			duration: 1e3
 		});
-	}, [e]), ke = useCallback((e, t) => {
+	}, [e]), Ae = useCallback((e, t) => {
 		let n = {
 			...N.current,
 			[e]: t
@@ -4764,7 +5129,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 				entity: i
 			};
 		}));
-	}, [y, i]), Ae = useCallback((t, n) => {
+	}, [y, i]), je = useCallback((t, n) => {
 		if (!e) return;
 		let [r, i] = t, [a, o] = n, s = [
 			[Math.min(r, a), Math.max(i, o)],
@@ -4814,7 +5179,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 				features: t
 			});
 		}
-	}, [e]), je = useCallback((t, n) => {
+	}, [e]), Me = 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({
@@ -4861,7 +5226,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 			type: "FeatureCollection",
 			features: c
 		});
-	}, [e]), Me = useCallback((t, n) => {
+	}, [e]), Ne = 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({
@@ -4975,7 +5340,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 				features: t
 			});
 		}
-	}, [e]), Ne = useCallback((t, n) => {
+	}, [e]), Pe = useCallback((t, n) => {
 		if (!e) return;
 		let r = [...t, n], i = e.getSource(`${PREVIEW_PREFIX}polyline-preview-source`);
 		i && (r.length >= 2 ? i.setData({
@@ -5023,9 +5388,9 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 	}, [e]);
 	useEffect(() => {
 		if (!e || !f) return;
-		Te(), e.getCanvas().style.cursor = "crosshair";
+		Ee(), e.getCanvas().style.cursor = "crosshair";
 		let t = (t) => {
-			let n = [t.lngLat.lng, t.lngLat.lat], r = Ce.current;
+			let n = [t.lngLat.lng, t.lngLat.lat], r = we.current;
 			if (r === "rectangle") {
 				let t = D.current;
 				if (!t) D.current = n;
@@ -5075,20 +5440,20 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 				j.current = [...t, n];
 			} else r === "polyline" && (M.current = [...M.current, n]);
 		}, n = (e) => {
-			let t = [e.lngLat.lng, e.lngLat.lat], n = Ce.current;
-			if (n === "rectangle" && D.current) Ae(D.current, t);
-			else if (n === "circle" && O.current) je(O.current.center, t);
-			else if (n === "square" && k.current) Me(k.current.center, t);
+			let t = [e.lngLat.lng, e.lngLat.lat], n = we.current;
+			if (n === "rectangle" && D.current) je(D.current, t);
+			else if (n === "circle" && O.current) Me(O.current.center, t);
+			else if (n === "square" && k.current) Ne(k.current.center, t);
 			else if (n === "polygon") {
 				let e = j.current;
 				e.length > 0 && I(e, t);
 			} else if (n === "polyline") {
 				let e = M.current;
-				e.length > 0 && Ne(e, t);
+				e.length > 0 && Pe(e, t);
 			}
 		}, r = (t) => {
 			t.preventDefault();
-			let n = Ce.current;
+			let n = we.current;
 			if (n === "polygon") {
 				let t = j.current;
 				if (t.length >= 3) {
@@ -5114,7 +5479,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 			t.key === "Escape" && (D.current = null, O.current = null, k.current = null, j.current = [], M.current = [], clearAllPreviewSources(e), p(null));
 		}, a = (t) => {
 			t.preventDefault();
-			let n = Ce.current;
+			let n = we.current;
 			if (n === "polygon") {
 				let t = j.current;
 				if (t.length >= 3) {
@@ -5147,16 +5512,16 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 		f,
 		P,
 		F,
-		Te,
-		Ae,
+		Ee,
 		je,
 		Me,
+		Ne,
 		I,
-		Ne
+		Pe
 	]), useEffect(() => () => {
 		C.current.forEach((e) => e.destroy()), C.current.clear();
 	}, []);
-	let Pe = useCallback((t) => {
+	let Fe = useCallback((t) => {
 		p((e) => e === t ? null : t), D.current = null, O.current = null, k.current = null, j.current = [], M.current = [], e && clearAllPreviewSources(e);
 	}, [e]);
 	return e ? /* @__PURE__ */ jsxs("div", {
@@ -5193,17 +5558,17 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 					children: [
 						/* @__PURE__ */ jsx(Checkbox, {
 							checked: b.showArea,
-							onChange: (e) => ke("showArea", e),
+							onChange: (e) => Ae("showArea", e),
 							children: "面积"
 						}),
 						/* @__PURE__ */ jsx(Checkbox, {
 							checked: b.showLength,
-							onChange: (e) => ke("showLength", e),
+							onChange: (e) => Ae("showLength", e),
 							children: "长度"
 						}),
 						/* @__PURE__ */ jsx(Checkbox, {
 							checked: b.showRadius,
-							onChange: (e) => ke("showRadius", e),
+							onChange: (e) => Ae("showRadius", e),
 							children: "半径"
 						})
 					]
@@ -5216,7 +5581,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 					className: "mapbox-measure-control__tools",
 					children: [DRAW_TOOLS.map((e) => /* @__PURE__ */ jsx("button", {
 						className: `mapbox-measure-control__tool-btn ${f === e.mode ? "mapbox-measure-control__tool-btn--active" : ""}`,
-						onClick: () => Pe(e.mode),
+						onClick: () => Fe(e.mode),
 						title: e.label,
 						children: /* @__PURE__ */ jsx("img", {
 							src: e.icon,
@@ -5224,7 +5589,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 						})
 					}, e.mode)), x.length > 0 && /* @__PURE__ */ jsx("button", {
 						className: "mapbox-measure-control__tool-btn mapbox-measure-control__tool-btn--danger",
-						onClick: De,
+						onClick: Oe,
 						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",
@@ -5244,7 +5609,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 							/* @__PURE__ */ jsx("th", {})
 						] }) }), /* @__PURE__ */ jsx("tbody", { children: x.map((e) => /* @__PURE__ */ jsxs("tr", {
 							className: "mapbox-measure-control__table-row",
-							onClick: () => Oe(e.entity.id),
+							onClick: () => ke(e.entity.id),
 							children: [
 								/* @__PURE__ */ jsx("td", { children: e.shapeLabel }),
 								/* @__PURE__ */ jsx("td", { children: String(e.entity.id) }),
@@ -5253,7 +5618,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 								/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("button", {
 									className: "mapbox-measure-control__delete-btn",
 									onClick: (t) => {
-										t.stopPropagation(), Ee(e.entity.id);
+										t.stopPropagation(), De(e.entity.id);
 									},
 									title: "删除",
 									children: /* @__PURE__ */ jsx("img", {
@@ -5348,7 +5713,7 @@ function RasterPaintControl({ map: e, value: r, onChange: s, rasterPaintLayerIds
 		x,
 		p,
 		C
-	]), ve = useCallback(() => {
+	]), ye = useCallback(() => {
 		b ? s?.({ ...DEFAULT_CONFIG }) : (g({ ...DEFAULT_CONFIG }), C({ ...DEFAULT_CONFIG }));
 	}, [
 		b,
@@ -5403,7 +5768,7 @@ function RasterPaintControl({ map: e, value: r, onChange: s, rasterPaintLayerIds
 				]
 			}, e)), /* @__PURE__ */ jsx("button", {
 				className: "mapbox-raster-paint-control__reset",
-				onClick: ve,
+				onClick: ye,
 				children: "重置"
 			})]
 		})]
@@ -5432,13 +5797,13 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 		i === "polyline" ? s(null) : (r(null), s("polyline"));
 	}, w = () => {
 		(i === "rectangle" || i === "circle" || i === "polygon" || i === "square" || i === "polyline") && s(null), g(!p);
-	}, ve = (e) => e.size ? {
+	}, ye = (e) => e.size ? {
 		width: e.size,
 		height: e.size
 	} : {
 		width: e.width || 32,
 		height: e.height || 32
-	}, T = p || t, E = i === "rectangle", D = i === "circle", O = i === "polygon", ye = i === "square", be = i === "polyline";
+	}, T = p || t, E = i === "rectangle", D = i === "circle", O = i === "polygon", be = i === "square", xe = i === "polyline";
 	return /* @__PURE__ */ jsxs("div", {
 		ref: _,
 		className: "mapbox-edit-control",
@@ -5460,7 +5825,7 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 					}), /* @__PURE__ */ jsx("span", { children: t ? t.name : "Marker" })]
 				}),
 				d && /* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${ye ? "mapbox-control-btn--active" : ""}`,
+					className: `mapbox-control-btn ${be ? "mapbox-control-btn--active" : ""}`,
 					onClick: S,
 					title: "绘制正方形",
 					children: [/* @__PURE__ */ jsx("img", {
@@ -5500,7 +5865,7 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 					}), /* @__PURE__ */ jsx("span", { children: "多边形" })]
 				}),
 				f && /* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${be ? "mapbox-control-btn--active" : ""}`,
+					className: `mapbox-control-btn ${xe ? "mapbox-control-btn--active" : ""}`,
 					onClick: C,
 					title: "绘制折线",
 					children: [/* @__PURE__ */ jsx("img", {
@@ -5518,7 +5883,7 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 			}), /* @__PURE__ */ jsx("div", {
 				className: "mapbox-edit-control__template-list",
 				children: e.map((e) => {
-					let n = ve(e), r = t?.id === e.id;
+					let n = ye(e), r = t?.id === e.id;
 					return /* @__PURE__ */ jsxs("div", {
 						className: `mapbox-edit-control__template-item ${r ? "mapbox-edit-control__template-item--selected" : ""}`,
 						onClick: () => v(e),
@@ -5590,7 +5955,7 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 };
 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 [p, g] = useState("idle"), [_, v] = useState(0), [y, b] = useState(i), [x, S] = useState(!1), C = useRef(null), w = useRef(null), ve = useRef([]), T = useRef([]), E = useRef("idle"), D = useRef(null), O = useRef("");
+	let [p, g] = useState("idle"), [_, v] = useState(0), [y, b] = useState(i), [x, S] = useState(!1), C = useRef(null), w = useRef(null), ye = useRef([]), T = useRef([]), E = useRef("idle"), D = useRef(null), O = useRef("");
 	useEffect(() => {
 		E.current = p;
 	}, [p]), useEffect(() => {
@@ -5606,12 +5971,12 @@ const RoutePlanningControl = forwardRef(({ map: e, pointCount: i = 2, showPointC
 			clearTimeout(t), document.removeEventListener("mousedown", e);
 		};
 	}, [x]);
-	let ye = useCallback(() => {
+	let be = useCallback(() => {
 		for (let e of T.current) e.remove();
 		T.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]), be = useCallback(() => {
+	}, [e]), xe = useCallback(() => {
 		if (!e) return;
-		let t = ve.current, n = {
+		let t = ye.current, n = {
 			type: "FeatureCollection",
 			features: [{
 				type: "Feature",
@@ -5667,18 +6032,18 @@ const RoutePlanningControl = forwardRef(({ map: e, pointCount: i = 2, showPointC
 		let { visualType: n } = D.current;
 		if (n === "marker") {
 			let n = document.createElement("div");
-			n.className = "route-planning-temp-marker", n.textContent = String(ve.current.length);
+			n.className = "route-planning-temp-marker", n.textContent = String(ye.current.length);
 			let r = new mapboxgl.Marker({ element: n }).setLngLat(t).addTo(e);
 			T.current.push(r);
-		} else be();
-	}, [e, be]), xe = useCallback(() => {
-		if (ye(), ve.current = [], D.current = null, v(0), g("idle"), e) try {
+		} else xe();
+	}, [e, xe]), Se = useCallback(() => {
+		if (be(), ye.current = [], D.current = null, v(0), g("idle"), e) try {
 			e.getCanvas().style.cursor = O.current;
 		} catch {}
-	}, [ye, e]), A = useCallback(async () => {
-		let e = D.current, t = [...ve.current];
+	}, [be, e]), A = useCallback(async () => {
+		let e = D.current, t = [...ye.current];
 		if (!e || t.length < 2) {
-			xe();
+			Se();
 			return;
 		}
 		g("planning");
@@ -5687,48 +6052,48 @@ const RoutePlanningControl = forwardRef(({ map: e, pointCount: i = 2, showPointC
 		} catch (e) {
 			console.error("Route planning onSelectFinished failed:", e);
 		} finally {
-			xe();
+			Se();
 		}
-	}, [xe]), Se = useCallback((e) => {
+	}, [Se]), Ce = useCallback((e) => {
 		if (E.current !== "selecting" || !D.current) return;
 		let t = [e.lngLat.lng, e.lngLat.lat];
-		ve.current.push(t);
-		let n = ve.current.length;
+		ye.current.push(t);
+		let n = ye.current.length;
 		v(n), k(t), n >= D.current.pointCount && A();
 	}, [k, A]), j = useCallback((e) => {
-		E.current === "selecting" && (e.preventDefault(), xe());
-	}, [xe]);
+		E.current === "selecting" && (e.preventDefault(), Se());
+	}, [Se]);
 	useEffect(() => {
-		if (e && p === "selecting") return e.on("click", Se), e.on("contextmenu", j), () => {
+		if (e && p === "selecting") return e.on("click", Ce), e.on("contextmenu", j), () => {
 			if (e) try {
-				e.off("click", Se), e.off("contextmenu", j);
+				e.off("click", Ce), e.off("contextmenu", j);
 			} catch {}
 		};
 	}, [
 		e,
 		p,
-		Se,
+		Ce,
 		j
 	]);
 	let M = useCallback((t) => {
 		if (!e) return;
-		E.current !== "idle" && xe();
+		E.current !== "idle" && Se();
 		let n = Math.max(2, t.pointCount ?? i), r = t.visualType ?? l;
 		D.current = {
 			pointCount: n,
 			visualType: r,
 			onSelectFinished: t.onSelectFinished
-		}, ve.current = [], v(0), b(n), S(!1), O.current = e.getCanvas().style.cursor, e.getCanvas().style.cursor = "crosshair", g("selecting");
+		}, ye.current = [], v(0), b(n), S(!1), O.current = e.getCanvas().style.cursor, e.getCanvas().style.cursor = "crosshair", g("selecting");
 	}, [
 		e,
 		i,
 		l,
-		xe
+		Se
 	]);
 	useImperativeHandle(f, () => ({ startPlanning: M }), [M]);
 	let N = () => {
-		p === "idle" ? S((e) => !e) : p === "selecting" && xe();
-	}, Ce = () => {
+		p === "idle" ? S((e) => !e) : p === "selecting" && Se();
+	}, we = () => {
 		u && M({
 			pointCount: Math.max(2, y),
 			visualType: l,
@@ -5737,7 +6102,7 @@ const RoutePlanningControl = forwardRef(({ map: e, pointCount: i = 2, showPointC
 	}, P = (e) => {
 		let t = parseInt(e.target.value, 10);
 		!isNaN(t) && t >= 2 ? b(t) : e.target.value === "" && b(2);
-	}, we = () => {
+	}, Te = () => {
 		if (p === "planning") return /* @__PURE__ */ jsx("span", { children: "规划中..." });
 		if (p === "selecting") {
 			let e = D.current?.pointCount ?? y;
@@ -5748,12 +6113,12 @@ const RoutePlanningControl = forwardRef(({ map: e, pointCount: i = 2, showPointC
 			] });
 		}
 		return "路径规划";
-	}, Te = p === "selecting", F = p === "planning";
+	}, Ee = p === "selecting", F = p === "planning";
 	return !d && p === "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" : ""}`,
+			className: `mapbox-control-btn mapbox-route-planning-control__btn${Ee ? " 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: p === "idle" ? "路径规划" : p === "selecting" ? "取消选点" : "规划中...",
@@ -5761,7 +6126,7 @@ const RoutePlanningControl = forwardRef(({ map: e, pointCount: i = 2, showPointC
 				src: route_planning_default,
 				alt: "route",
 				className: "mapbox-route-planning-control__btn-icon"
-			}), we()]
+			}), Te()]
 		}), x && p === "idle" && /* @__PURE__ */ jsxs("div", {
 			ref: w,
 			className: "mapbox-route-planning-control__panel",
@@ -5796,7 +6161,7 @@ const RoutePlanningControl = forwardRef(({ map: e, pointCount: i = 2, showPointC
 					}),
 					/* @__PURE__ */ jsx("button", {
 						className: "mapbox-route-planning-control__panel-start",
-						onClick: Ce,
+						onClick: we,
 						disabled: !u,
 						children: "开始规划"
 					})
@@ -5832,7 +6197,17 @@ function calculatePopupPosition(e, t, n, r, i) {
 		let [[t, n], [r, i]] = e.bounds;
 		o = [(t + r) / 2, (n + i) / 2];
 	}
-	else o = e.center;
+	else if (e.type === "attack-direction") {
+		let t = e.coordinates;
+		o = e.center ?? [(t[0][0] + t[1][0] + t[2][0]) / 3, (t[0][1] + t[1][1] + t[2][1]) / 3];
+	} else o = e.center;
+	if (!o) return {
+		position: {
+			x: 0,
+			y: 0
+		},
+		actualPosition: t.position
+	};
 	let s = n.project(o);
 	a = {
 		x: s.x,
@@ -5953,13 +6328,13 @@ 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: p = "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: j, circleConfig: M, lengthConfig: N, showCoordinates: Ce = !0, showScale: P = !0, showResetView: we = !0, showRoadHighlight: Te = !1, showMeasure: F = !1, showRasterPaint: De = !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), Ue = useRef(null), L = useRef(null), R = useRef(/* @__PURE__ */ new Map()), z = useRef(/* @__PURE__ */ new Map()), We = useRef(/* @__PURE__ */ new Set()), [B, Ge] = useState(null), Ke = useRef(null), qe = useRef(null), Je = useRef(null), [Ye, Xe] = useState(null), Ze = useRef(null), Qe = useRef(null), [$e, et] = useState(null), [V, tt] = useState(_), [nt, rt] = useState(null), it = useRef(null), [at, H] = useState(null), [ot, U] = useState(null), [st, ct] = useState(null), W = useRef(!1), lt = useRef(null), ut = useRef(null), G = useRef(null), dt = useRef(null), K = useRef(null), ft = useRef([]), pt = useRef(null), mt = useRef(null), ht = useRef(null), gt = useRef([]), _t = useRef(null), vt = useRef(!1), [yt, bt] = useState([]), xt = useRef([]);
-	xt.current = yt;
+	let { center: l = [116.4074, 39.9042], zoom: u = 12, pitch: d = 0, bearing: f = 0, style: p = "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: j, circleConfig: M, lengthConfig: N, showCoordinates: we = !0, showScale: P = !0, showResetView: Te = !0, showRoadHighlight: Ee = !1, showMeasure: F = !1, showRasterPaint: Oe = !1, showRoutePlanning: Me, onRasterPaintChange: Ne, popupDefaults: I, renderPopup: Fe, onMapLoad: Ie, onEntityClick: Le, onPopupOpen: Re, onPopupClose: ze, className: Be = "", containerStyle: Ve } = e, He = useRef(null), Ue = useRef(null), We = useRef(null), L = useRef(null), R = useRef(/* @__PURE__ */ new Map()), z = useRef(/* @__PURE__ */ new Map()), Ge = useRef(/* @__PURE__ */ new Set()), [B, Ke] = useState(null), qe = useRef(null), Je = useRef(null), Ye = useRef(null), [Xe, Ze] = useState(null), Qe = useRef(null), $e = useRef(null), [et, tt] = useState(null), [V, nt] = useState(_), [rt, it] = useState(null), at = useRef(null), [ot, H] = useState(null), [st, U] = useState(null), [ct, lt] = useState(null), W = useRef(!1), ut = useRef(null), dt = useRef(null), G = useRef(null), ft = useRef(null), K = useRef(null), pt = useRef([]), mt = useRef(null), ht = useRef(null), gt = useRef(null), _t = useRef([]), vt = useRef(null), yt = useRef(!1), [bt, xt] = useState([]), St = useRef([]);
+	St.current = bt;
 	let q = useRef(null);
 	useEffect(() => {
-		tt(_);
+		nt(_);
 	}, [_]);
-	let St = useCallback((e) => {
+	let Ct = useCallback((e) => {
 		let t = R.current.get(e), n = z.current.get(e);
 		if (t && n) {
 			if (n.type === "radar" && t instanceof CanvasRadarRenderer) {
@@ -5976,7 +6351,7 @@ const Mapbox = forwardRef((e, c) => {
 				z.current.set(e, r), t.startAnimation();
 			}
 		}
-	}, []), Ct = useCallback((e) => {
+	}, []), wt = useCallback((e) => {
 		let t = R.current.get(e), n = z.current.get(e);
 		if (t && n) {
 			if (n.type === "radar" && t instanceof CanvasRadarRenderer) {
@@ -5993,10 +6368,10 @@ const Mapbox = forwardRef((e, c) => {
 				z.current.set(e, r), t.stopAnimation();
 			}
 		}
-	}, []), wt = useCallback((e) => {
+	}, []), Tt = useCallback((e) => {
 		let t = z.current.get(e);
-		t && (t.type === "radar" || t.type === "circle") && (t.type, t.isAnimating ? Ct(e) : St(e));
-	}, [St, Ct]), Tt = useCallback((e) => {
+		t && (t.type === "radar" || t.type === "circle") && (t.type, t.isAnimating ? wt(e) : Ct(e));
+	}, [Ct, wt]), Et = useCallback((e) => {
 		if (e === void 0) {
 			let e = !1;
 			for (let [, t] of R.current) if (t instanceof UnitRenderer) {
@@ -6012,76 +6387,88 @@ const Mapbox = forwardRef((e, c) => {
 			let t = new Set(e.map(String));
 			for (let [e, n] of R.current) n instanceof UnitRenderer && n.setShowTrajectory(t.has(String(e)) ? "all" : 0);
 		}
-	}, []), Et = useCallback((e, t, n) => {
+	}, []), Dt = useCallback((e, t, n) => {
 		let r = T.find((t) => String(t.id) === String(e));
 		if (!r?.popup || !L.current) return;
-		let i = r.popup.content ?? Pe?.(r);
+		let i = r.popup.content ?? Fe?.(r);
 		if (!i) return;
 		let a = mergePopupConfig(r.popup, I, i), { position: o, actualPosition: s } = calculatePopupPosition(r, a, L.current, n);
-		Ge({
+		Ke({
 			entityId: e,
 			position: o,
 			config: a,
 			openedBy: t,
 			actualPosition: s
-		}), Le?.(e);
+		}), Re?.(e);
 	}, [
 		T,
 		I,
-		Pe,
-		Le
-	]), Dt = useCallback((e) => {
-		B?.entityId === e && (Ge(null), Re?.(e));
-	}, [B, Re]), Ot = useCallback(() => {
-		Ge((e) => (e && Re?.(e.entityId), null));
-	}, [Re]), kt = useCallback((e) => B?.entityId === e, [B]), At = useCallback((e, t, n) => {
+		Fe,
+		Re
+	]), Ot = useCallback((e) => {
+		B?.entityId === e && (Ke(null), ze?.(e));
+	}, [B, ze]), kt = useCallback(() => {
+		Ke((e) => (e && ze?.(e.entityId), null));
+	}, [ze]), At = useCallback((e) => B?.entityId === e, [B]), jt = useCallback((e, t, n) => {
 		let r = L.current;
 		r && r.flyTo({
 			center: e,
 			zoom: t ?? r.getZoom(),
 			...n
 		});
-	}, []), jt = useCallback((e, t, n) => {
+	}, []), Mt = useCallback((e) => {
+		if (e.length === 0) return null;
+		let t = Infinity, n = -Infinity, r = Infinity, i = -Infinity, a = !1;
+		for (let o of e) {
+			let e = R.current.get(o);
+			if (e) {
+				let [[o, s], [c, l]] = e.getBounds();
+				t = Math.min(t, o), n = Math.max(n, c), r = Math.min(r, s), i = Math.max(i, l), a = !0;
+			}
+		}
+		return a ? [(t + n) / 2, (r + i) / 2] : null;
+	}, []), Nt = useCallback((e, t, n) => {
 		let r = L.current;
 		if (!r || e.length === 0) return;
-		let i = [];
+		let i = Mt(e);
+		if (!i) return;
+		let a = [];
 		for (let t of e) {
 			let e = R.current.get(t);
-			e && i.push(e.getBounds());
+			e && a.push(e.getBounds());
 		}
-		if (i.length === 0) return;
-		let a = Infinity, o = -Infinity, s = Infinity, c = -Infinity;
-		for (let [[e, t], [n, r]] of i) a = Math.min(a, e), o = Math.max(o, n), s = Math.min(s, t), c = Math.max(c, r);
-		let l = (a + o) / 2, u = (s + c) / 2, d = a === o && s === c;
-		if (i.length === 1 || d) {
+		let o = Infinity, s = -Infinity, c = Infinity, l = -Infinity;
+		for (let [[e, t], [n, r]] of a) o = Math.min(o, e), s = Math.max(s, n), c = Math.min(c, t), l = Math.max(l, r);
+		let u = o === s && c === l;
+		if (a.length === 1 || u) {
 			let e = {
-				center: [l, u],
+				center: i,
 				zoom: t ?? r.getZoom()
 			};
 			n?.duration !== void 0 && (e.duration = n.duration), n?.pitch !== void 0 && (e.pitch = n.pitch), n?.bearing !== void 0 && (e.bearing = n.bearing), n?.essential !== void 0 && (e.essential = n.essential), r.flyTo(e);
 			return;
 		}
-		let f = [[a, s], [o, c]], p = {
+		let d = [[o, c], [s, l]], f = {
 			padding: n?.padding ?? 50,
 			duration: n?.duration ?? 1e3,
 			bearing: n?.bearing ?? r.getBearing(),
 			pitch: n?.pitch ?? r.getPitch()
 		};
-		t !== void 0 && (p.maxZoom = t), n?.essential !== void 0 && (p.essential = n.essential), r.fitBounds(f, p);
-	}, []), Mt = useRef(null), Nt = useRef("display"), [Pt, Ft] = useState({}), J = useMemo(() => ({
+		t !== void 0 && (f.maxZoom = t), n?.essential !== void 0 && (f.essential = n.essential), r.fitBounds(d, f);
+	}, [Mt]), Pt = useRef(null), Ft = useRef("display"), [It, Lt] = useState({}), J = useMemo(() => ({
 		...y,
-		...Pt
-	}), [y, Pt]), It = useCallback((e) => {
+		...It
+	}), [y, It]), Rt = useCallback((e) => {
 		let t = L.current;
 		if (!t || !t.getContainer()) return;
 		let { showMarker: n = !0, markerColor: r = "#3388ff", name: i, nameConfig: a } = J;
 		if (!n) {
-			it.current &&= (it.current.remove(), null);
+			at.current &&= (at.current.remove(), null);
 			return;
 		}
-		if (it.current) {
-			it.current.setLngLat(e);
-			let t = it.current.getElement(), n = t.querySelector(".marker-label");
+		if (at.current) {
+			at.current.setLngLat(e);
+			let t = at.current.getElement(), n = t.querySelector(".marker-label");
 			if (i) {
 				let e = resolveNameConfig(a, O);
 				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`;
@@ -6098,38 +6485,38 @@ const Mapbox = forwardRef((e, c) => {
 				let e = resolveNameConfig(a, O), 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);
 			}
-			it.current = new mapboxgl.Marker({
+			at.current = new mapboxgl.Marker({
 				element: n,
 				anchor: "bottom"
 			}).setLngLat(e).addTo(t);
 		}
-	}, [J, O]), Lt = useCallback(() => {
-		it.current &&= (it.current.remove(), null);
-	}, []), Rt = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), zt = useCallback((e) => {
+	}, [J, O]), zt = useCallback(() => {
+		at.current &&= (at.current.remove(), null);
+	}, []), Bt = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), Vt = useCallback((e) => {
 		let t = L.current;
-		if (Ve.current) if (_t.current &&= (_t.current.remove(), null), e && t) {
+		if (He.current) if (vt.current &&= (vt.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), _t.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), vt.current = n;
 			let a = (e) => {
-				_t.current && (_t.current.style.left = `${e.clientX}px`, _t.current.style.top = `${e.clientY}px`);
+				vt.current && (vt.current.style.left = `${e.clientX}px`, vt.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 (_t.current) {
-			let e = _t.current._cleanup;
-			e && e(), _t.current.remove(), _t.current = null;
+		if (vt.current) {
+			let e = vt.current._cleanup;
+			e && e(), vt.current.remove(), vt.current = null;
 		}
 		let e = L.current;
 		e && (e.getCanvas().style.cursor = "");
-	}, []), Bt = useCallback((e, t, n) => {
+	}, []), Ht = useCallback((e, t, n) => {
 		if (!e.getSource(t)) {
 			if (!e.getStyle().glyphs) {
 				let t = e.style, n = "/gis-fonts/{fontstack}/{range}.pbf";
@@ -6165,7 +6552,7 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			});
 		}
-	}, []), Vt = useCallback(() => {
+	}, []), Ut = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("rect-preview-source") || (e.addSource("rect-preview-source", {
 			type: "geojson",
@@ -6190,8 +6577,8 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Bt(e, "rect-preview-measure-source", "rect-preview-measure-label")));
-	}, [Bt]), Ht = useCallback((e, t) => {
+		}), Ht(e, "rect-preview-measure-source", "rect-preview-measure-label")));
+	}, [Ht]), Wt = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("rect-preview-source");
@@ -6211,11 +6598,11 @@ const Mapbox = forwardRef((e, c) => {
 			},
 			properties: {}
 		});
-		let l = lt.current, u = l?.strokeColor ?? "#3388ff", d = l?.strokeWidth ?? 2, f = l?.fillColor ?? "#3388ff", p = l?.fillOpacity ?? .1;
+		let l = ut.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 = Vn.current, t = [], n = c[0], r = c[1], i = c[2];
+			let e = Un.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({
@@ -6252,7 +6639,7 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), Ut = useCallback(() => {
+	}, []), Gt = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("rect-preview-source");
@@ -6266,8 +6653,8 @@ const Mapbox = forwardRef((e, c) => {
 			features: []
 		});
 	}, []), X = useCallback(() => {
-		ct(null), Ut();
-	}, [Ut]), Wt = useCallback(() => {
+		lt(null), Gt();
+	}, [Gt]), Kt = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("circle-preview-source") || (e.addSource("circle-preview-source", {
 			type: "geojson",
@@ -6292,7 +6679,7 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Bt(e, "circle-preview-measure-source", "circle-preview-measure-label"), e.getSource("circle-preview-radius-source") || (e.addSource("circle-preview-radius-source", {
+		}), Ht(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",
@@ -6309,22 +6696,22 @@ const Mapbox = forwardRef((e, c) => {
 				"line-dasharray": [4, 4]
 			}
 		}))));
-	}, [Bt]), Gt = useCallback((e, t, n = 64) => {
+	}, [Ht]), qt = 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;
-	}, []), Kt = useCallback((e, t) => {
+	}, []), Jt = 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)));
-	}, []), qt = useCallback((e, t) => {
+	}, []), Yt = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("circle-preview-source");
 		if (!r) return;
-		let i = Kt(e, t), a = Gt(e, i);
+		let i = Jt(e, t), a = qt(e, i);
 		r.setData({
 			type: "Feature",
 			geometry: {
@@ -6335,7 +6722,7 @@ const Mapbox = forwardRef((e, c) => {
 		});
 		let o = G.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 = Vn.current, f = [], p = [];
+		let d = Un.current, f = [], p = [];
 		if (d?.showArea) {
 			let t = Math.PI * i * i;
 			f.push({
@@ -6375,7 +6762,7 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: p
 		});
-	}, [Kt, Gt]), Jt = useCallback(() => {
+	}, [Jt, qt]), Xt = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("circle-preview-source");
@@ -6393,9 +6780,9 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Yt = useCallback(() => {
-		dt.current = null, Jt();
-	}, [Jt]), Xt = useCallback(() => {
+	}, []), Zt = useCallback(() => {
+		ft.current = null, Xt();
+	}, [Xt]), Qt = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("polygon-preview-source") || (e.addSource("polygon-preview-source", {
 			type: "geojson",
@@ -6436,8 +6823,8 @@ const Mapbox = forwardRef((e, c) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), Bt(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
-	}, [Bt]), Zt = useCallback((e, t) => {
+		}), Ht(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
+	}, [Ht]), $t = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("polygon-preview-source"), i = n.getSource("polygon-vertices-source");
@@ -6479,7 +6866,7 @@ const Mapbox = forwardRef((e, c) => {
 		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 = Vn.current, t = [];
+			let e = Un.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];
@@ -6521,7 +6908,7 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), Qt = useCallback(() => {
+	}, []), en = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("polygon-preview-source");
@@ -6539,9 +6926,9 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), $t = useCallback(() => {
-		ft.current = [], Qt();
-	}, [Qt]), en = useCallback(() => {
+	}, []), tn = useCallback(() => {
+		pt.current = [], en();
+	}, [en]), nn = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("square-preview-source") || (e.addSource("square-preview-source", {
 			type: "geojson",
@@ -6566,8 +6953,8 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Bt(e, "square-preview-measure-source", "square-preview-measure-label")));
-	}, [Bt]), tn = useCallback((e, t) => {
+		}), Ht(e, "square-preview-measure-source", "square-preview-measure-label")));
+	}, [Ht]), rn = 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],
@@ -6576,12 +6963,12 @@ const Mapbox = forwardRef((e, c) => {
 			[n - s, r - o],
 			[n - s, r + o]
 		];
-	}, []), nn = useCallback((e, t) => {
+	}, []), an = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("square-preview-source");
 		if (!r) return;
-		let i = Kt(e, t) * 2, a = tn(e, i);
+		let i = Jt(e, t) * 2, a = rn(e, i);
 		r.setData({
 			type: "Feature",
 			geometry: {
@@ -6590,11 +6977,11 @@ const Mapbox = forwardRef((e, c) => {
 			},
 			properties: {}
 		});
-		let o = pt.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
+		let o = mt.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 = Vn.current, n = [];
+			let t = Un.current, n = [];
 			if (t?.showArea && n.push({
 				type: "Feature",
 				geometry: {
@@ -6618,7 +7005,7 @@ const Mapbox = forwardRef((e, c) => {
 				features: n
 			});
 		}
-	}, [Kt, tn]), rn = useCallback(() => {
+	}, [Jt, rn]), on = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("square-preview-source");
@@ -6631,9 +7018,9 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), an = useCallback(() => {
-		mt.current = null, rn();
-	}, [rn]), on = useCallback(() => {
+	}, []), sn = useCallback(() => {
+		ht.current = null, on();
+	}, [on]), cn = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("polyline-preview-source") || (e.addSource("polyline-preview-source", {
 			type: "geojson",
@@ -6666,8 +7053,8 @@ const Mapbox = forwardRef((e, c) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), Bt(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
-	}, [Bt]), sn = useCallback((e, t) => {
+		}), Ht(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
+	}, [Ht]), ln = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("polyline-preview-source"), i = n.getSource("polyline-vertices-source");
@@ -6694,11 +7081,11 @@ const Mapbox = forwardRef((e, c) => {
 				properties: {}
 			}))
 		});
-		let o = ht.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2;
+		let o = gt.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 = Vn.current, t = [];
+			let e = Un.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({
@@ -6715,7 +7102,7 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), cn = useCallback(() => {
+	}, []), un = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("polyline-preview-source");
@@ -6734,156 +7121,158 @@ const Mapbox = forwardRef((e, c) => {
 			features: []
 		});
 	}, []), Z = useCallback(() => {
-		gt.current = [], cn();
-	}, [cn]), ln = useCallback((e) => {
-		H(e), zt(e), e ? (U("marker"), X(), Yt(), $t(), an(), Z()) : U(null);
+		_t.current = [], un();
+	}, [un]), dn = useCallback((e) => {
+		H(e), Vt(e), e ? (U("marker"), X(), Zt(), tn(), sn(), Z()) : U(null);
 	}, [
-		zt,
+		Vt,
 		X,
-		Yt,
-		$t,
-		an,
+		Zt,
+		tn,
+		sn,
 		Z
-	]), un = useCallback((e) => {
+	]), fn = useCallback((e) => {
 		if (U(e), e === "rectangle") {
-			H(null), Y(), Yt(), $t(), an(), Z();
+			H(null), Y(), Zt(), tn(), sn(), Z();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "circle") {
-			H(null), Y(), X(), $t(), an(), Z();
+			H(null), Y(), X(), tn(), sn(), Z();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polygon") {
-			H(null), Y(), X(), Yt(), an(), Z();
+			H(null), Y(), X(), Zt(), sn(), Z();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "square") {
-			H(null), Y(), X(), Yt(), $t(), Z();
+			H(null), Y(), X(), Zt(), tn(), Z();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polyline") {
-			H(null), Y(), X(), Yt(), $t(), an();
+			H(null), Y(), X(), Zt(), tn(), sn();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
-		} else e === "marker" ? (X(), Yt(), $t(), an(), Z()) : (H(null), Y(), X(), Yt(), $t(), an(), Z());
+		} else e === "marker" ? (X(), Zt(), tn(), sn(), Z()) : (H(null), Y(), X(), Zt(), tn(), sn(), Z());
 	}, [
 		Y,
 		X,
-		Yt,
-		$t,
-		an,
+		Zt,
+		tn,
+		sn,
 		Z
-	]), dn = useCallback((e) => {
+	]), pn = useCallback((e) => {
 		if (e !== "picker") {
 			let e = J.value && isFinite(J.value.lng) && isFinite(J.value.lat), t = J.showMarker !== !1;
-			(!e || !t) && Lt(), rt(null);
+			(!e || !t) && zt(), it(null);
 		}
-		e !== "edit" && (H(null), U(null), X(), Z(), Y()), tt(e);
+		e !== "edit" && (H(null), U(null), X(), Z(), Y()), nt(e);
 	}, [
-		Lt,
+		zt,
 		Y,
 		X,
 		Z
-	]), fn = useCallback(() => V, [V]), pn = useCallback(() => nt, [nt]), mn = useCallback(() => {
-		Lt(), rt(null);
-	}, [Lt]), hn = useCallback((e = {}) => (Mt.current &&= (Mt.current(null), null), new Promise((t) => {
-		Mt.current = t, Nt.current = In.current, Ft(e), dn("picker");
-	})), [dn]);
+	]), mn = useCallback(() => V, [V]), hn = useCallback(() => rt, [rt]), gn = useCallback(() => {
+		zt(), it(null);
+	}, [zt]), _n = useCallback((e = {}) => (Pt.current &&= (Pt.current(null), null), new Promise((t) => {
+		Pt.current = t, Ft.current = Rn.current, Lt(e), pn("picker");
+	})), [pn]);
 	useEffect(() => {
-		if (!$e) return;
+		if (!et) return;
 		let e = J.value;
 		if (e && isFinite(e.lng) && isFinite(e.lat)) {
 			let t = [e.lng, e.lat];
-			rt(e), It(t);
+			it(e), Rt(t);
 		}
 	}, [
 		J.value,
-		It,
-		$e
+		Rt,
+		et
 	]);
-	let gn = (e) => "mode" in e, _n = useCallback((e, t = !0) => {
-		if (tt("edit"), t && (Lt(), rt(null)), W.current = !0, gn(e)) {
-			if (e.mode === "marker") e.markerStyle ? (ut.current = e.markerStyle, lt.current = null, G.current = null, K.current = null, pt.current = null, ht.current = null, H(null), U("marker"), e.markerStyle.src && e.markerStyle.width ? zt({
+	let vn = (e) => "mode" in e, yn = useCallback((e, t = !0) => {
+		if (nt("edit"), t && (zt(), it(null)), W.current = !0, vn(e)) {
+			if (e.mode === "marker") e.markerStyle ? (dt.current = e.markerStyle, ut.current = null, G.current = null, K.current = null, mt.current = null, gt.current = null, H(null), U("marker"), e.markerStyle.src && e.markerStyle.width ? Vt({
 				id: "custom",
 				name: e.markerStyle.name || "Marker",
 				icon: e.markerStyle.src,
 				width: e.markerStyle.width
-			}) : Y()) : e.template && (ut.current = null, lt.current = null, G.current = null, K.current = null, pt.current = null, ht.current = null, H(e.template), U("marker"), zt(e.template));
+			}) : Y()) : e.template && (dt.current = null, ut.current = null, G.current = null, K.current = null, mt.current = null, gt.current = null, H(e.template), U("marker"), Vt(e.template));
 			else if (e.mode === "rectangle") {
-				lt.current = e.rectangleStyle || null, ut.current = null, G.current = null, K.current = null, pt.current = null, ht.current = null, H(null), U("rectangle"), Y();
+				ut.current = e.rectangleStyle || null, dt.current = null, G.current = null, K.current = null, mt.current = null, gt.current = null, H(null), U("rectangle"), Y();
 				let t = L.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "circle") {
-				G.current = e.circleStyle || null, lt.current = null, ut.current = null, K.current = null, pt.current = null, ht.current = null, H(null), U("circle"), Y();
+				G.current = e.circleStyle || null, ut.current = null, dt.current = null, K.current = null, mt.current = null, gt.current = null, H(null), U("circle"), Y();
 				let t = L.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "polygon") {
-				K.current = e.polygonStyle || null, lt.current = null, ut.current = null, G.current = null, pt.current = null, ht.current = null, H(null), U("polygon"), Y();
+				K.current = e.polygonStyle || null, ut.current = null, dt.current = null, G.current = null, mt.current = null, gt.current = null, H(null), U("polygon"), Y();
 				let t = L.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "square") {
-				pt.current = e.squareStyle || null, lt.current = null, ut.current = null, G.current = null, K.current = null, ht.current = null, H(null), U("square"), Y();
+				mt.current = e.squareStyle || null, ut.current = null, dt.current = null, G.current = null, K.current = null, gt.current = null, H(null), U("square"), Y();
 				let t = L.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "polyline") {
-				ht.current = e.polylineStyle || null, lt.current = null, ut.current = null, G.current = null, K.current = null, pt.current = null, H(null), U("polyline"), Y();
+				gt.current = e.polylineStyle || null, ut.current = null, dt.current = null, G.current = null, K.current = null, mt.current = null, H(null), U("polyline"), Y();
 				let t = L.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			}
-		} else H(e), U("marker"), zt(e), lt.current = null, ut.current = null, G.current = null, K.current = null, pt.current = null, ht.current = null;
+		} else H(e), U("marker"), Vt(e), ut.current = null, dt.current = null, G.current = null, K.current = null, mt.current = null, gt.current = null;
 	}, [
-		Lt,
 		zt,
+		Vt,
 		Y
 	]);
 	useImperativeHandle(c, () => ({
-		startAnimation: St,
-		stopAnimation: Ct,
-		toggleAnimation: wt,
+		startAnimation: Ct,
+		stopAnimation: wt,
+		toggleAnimation: Tt,
 		getMap: () => L.current,
-		openPopup: (e) => Et(e, "programmatic"),
-		closePopup: Dt,
-		closeAllPopups: Ot,
-		isPopupOpen: kt,
-		toggleUnitTrajectory: Tt,
-		flyTo: At,
-		flyToEntities: jt,
-		getMode: fn,
-		setMode: dn,
-		getPickedLocation: pn,
-		clearPickedLocation: mn,
-		startDrawing: _n,
+		openPopup: (e) => Dt(e, "programmatic"),
+		closePopup: Ot,
+		closeAllPopups: kt,
+		isPopupOpen: At,
+		toggleUnitTrajectory: Et,
+		flyTo: jt,
+		getCenterByIds: Mt,
+		flyToEntities: Nt,
+		getMode: mn,
+		setMode: pn,
+		getPickedLocation: hn,
+		clearPickedLocation: gn,
+		startDrawing: yn,
 		getRenderer: (e) => R.current.get(e),
 		setEditingEntities: (e) => {
-			for (let t of xt.current) e.map(String).includes(String(t)) || R.current.get(t)?.setEditing?.(!1);
+			for (let t of St.current) e.map(String).includes(String(t)) || R.current.get(t)?.setEditing?.(!1);
 			for (let t of e) R.current.get(t)?.setEditing?.(!0);
-			q.current &&= (R.current.get(q.current.entityId)?.cancelEditPreview?.(), null), bt(e);
+			q.current &&= (R.current.get(q.current.entityId)?.cancelEditPreview?.(), null), xt(e);
 		},
-		getEditingEntities: () => xt.current,
-		startPicking: hn,
+		getEditingEntities: () => St.current,
+		startPicking: _n,
 		startRoutePlanning: (e) => {
-			He.current?.startPlanning(e);
+			Ue.current?.startPlanning(e);
 		},
-		getRoadHighlightControl: () => Ue.current
+		getRoadHighlightControl: () => We.current
 	}), [
-		St,
 		Ct,
 		wt,
-		Et,
+		Tt,
 		Dt,
 		Ot,
 		kt,
-		Tt,
 		At,
+		Et,
 		jt,
-		fn,
-		dn,
-		pn,
+		Mt,
+		Nt,
 		mn,
-		_n,
-		hn
+		pn,
+		hn,
+		gn,
+		yn,
+		_n
 	]);
-	let vn = useCallback(() => {
+	let bn = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = new Set(T.map((e) => e.id)), n = new Set(R.current.keys());
@@ -6908,13 +7297,13 @@ const Mapbox = forwardRef((e, c) => {
 				let t = new CircleRenderer(e, n, O, k, 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 (n.type === "square" && i instanceof SquareRenderer || n.type === "rectangle" && i instanceof RectangleRenderer || n.type === "polyline" && i instanceof PolylineRenderer || n.type === "attack-direction" && i instanceof AttackDirectionRenderer) && 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, j, N) : n.type === "circle" ? t = n.fillType === "radial-gradient" ? new CanvasCircleRenderer(e, n, O, k, j, M) : new CircleRenderer(e, n, O, k, j, M) : n.type === "square" ? t = new SquareRenderer(e, n, O, k, j, N) : n.type === "rectangle" ? t = new RectangleRenderer(e, n, O, k, j, N) : n.type === "polyline" && (t = new PolylineRenderer(e, n, O, k, N)), t && (R.current.set(n.id, t), t.setSelected(r.has(String(n.id))), xt.current.map(String).includes(String(n.id)) && t.setEditing?.(!0));
+				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, j, N) : n.type === "circle" ? t = n.fillType === "radial-gradient" ? new CanvasCircleRenderer(e, n, O, k, j, M) : new CircleRenderer(e, n, O, k, j, M) : n.type === "square" ? t = new SquareRenderer(e, n, O, k, j, N) : n.type === "rectangle" ? t = new RectangleRenderer(e, n, O, k, j, N) : n.type === "polyline" ? t = new PolylineRenderer(e, n, O, k, N) : n.type === "attack-direction" && (t = new AttackDirectionRenderer(e, n, O, k)), t && (R.current.set(n.id, t), t.setSelected(r.has(String(n.id))), St.current.map(String).includes(String(n.id)) && t.setEditing?.(!0));
 			}
 		}
-		for (let e of xt.current) {
+		for (let e of St.current) {
 			let t = R.current.get(e);
 			t && t.setEditing?.(!0);
 		}
@@ -6927,10 +7316,10 @@ const Mapbox = forwardRef((e, c) => {
 		j,
 		M,
 		N
-	]), yn = useCallback(() => {
+	]), xn = useCallback(() => {
 		for (let e of R.current.values()) e.destroy();
 		R.current.clear();
-	}, []), bn = useCallback((e) => {
+	}, []), Sn = useCallback((e) => {
 		let t = e.getStyle();
 		if (!t?.layers) return;
 		let n = [
@@ -6942,13 +7331,14 @@ const Mapbox = forwardRef((e, c) => {
 			"radar-",
 			"image-",
 			"unit-",
-			"marker-"
+			"marker-",
+			"attack-direction-"
 		];
 		for (let e of t.layers) if (n.some((t) => e.id.startsWith(t))) return e.id;
-	}, []), xn = useCallback((e) => {
+	}, []), Cn = 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;
 		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]), Sn = useCallback((e, t) => {
+	}, [C]), wn = useCallback((e, t) => {
 		let n = `base-layer-source-${t.id}`, r = `base-layer-${t.id}`, i = {
 			type: "raster",
 			tiles: [t.url],
@@ -6958,19 +7348,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 = bn(e);
+		let a = Sn(e);
 		e.addLayer({
 			id: r,
 			type: "raster",
 			source: n,
-			paint: xn(t),
+			paint: Cn(t),
 			layout: { visibility: t.visible === !1 ? "none" : "visible" }
 		}, a);
-	}, [bn, xn]), Cn = useCallback(async (e, t) => {
+	}, [Sn, Cn]), Tn = 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 (!We.current.has(t.id)) return;
-			let a = n.format === "pbf" || n.vector_layers, o = bn(e);
+			if (!Ge.current.has(t.id)) return;
+			let a = n.format === "pbf" || n.vector_layers, o = Sn(e);
 			if (a) {
 				let t = {
 					type: "vector",
@@ -6991,21 +7381,21 @@ const Mapbox = forwardRef((e, c) => {
 				id: i,
 				type: "raster",
 				source: r,
-				paint: xn(t),
+				paint: Cn(t),
 				layout: { visibility: t.visible === !1 ? "none" : "visible" }
 			}, o);
 		} catch (e) {
 			console.error(`Failed to load TileJSON from ${t.url}:`, e);
 		}
-	}, [bn, xn]), wn = useCallback(async (e, t) => {
+	}, [Sn, Cn]), En = useCallback(async (e, t) => {
 		try {
 			let n = await (await fetch(t.url)).json();
-			if (!We.current.has(t.id)) return;
+			if (!Ge.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 = bn(e);
+			let r = Sn(e);
 			if (n.layers) for (let i of n.layers) {
 				let n = `base-layer-${t.id}-${i.id}`;
 				if (e.getLayer(n)) continue;
@@ -7016,7 +7406,7 @@ const Mapbox = forwardRef((e, c) => {
 				};
 				i.type === "raster" && (a.paint = {
 					...a.paint,
-					...xn(t)
+					...Cn(t)
 				}), t.visible === !1 && (a.layout = {
 					...a.layout,
 					visibility: "none"
@@ -7029,50 +7419,50 @@ const Mapbox = forwardRef((e, c) => {
 		} catch (e) {
 			console.error(`Failed to load Style JSON from ${t.url}:`, e);
 		}
-	}, [bn, xn]), Tn = useCallback((e, t) => {
+	}, [Sn, Cn]), Dn = 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);
-	}, []), En = useCallback((e) => {
+	}, []), On = useCallback((e) => {
 		let t = L.current;
 		if (!t) return;
-		let n = new Set(e.map((e) => e.id)), r = We.current;
-		for (let e of r) n.has(e) || (Tn(t, e), r.delete(e));
+		let n = new Set(e.map((e) => e.id)), r = Ge.current;
+		for (let e of r) n.has(e) || (Dn(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 = xn(n);
+				let r = Cn(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":
-				Sn(t, n);
+				wn(t, n);
 				break;
 			case "tilejson":
-				Cn(t, n);
+				Tn(t, n);
 				break;
 			case "style":
-				wn(t, n);
+				En(t, n);
 				break;
 			default: {
 				let e = n;
-				e.url && Sn(t, {
+				e.url && wn(t, {
 					...e,
 					type: "raster"
 				});
 			}
 		}
 	}, [
-		Sn,
-		Cn,
 		wn,
 		Tn,
-		xn
-	]), Dn = useCallback((e) => {
+		En,
+		Dn,
+		Cn
+	]), kn = useCallback((e) => {
 		let t = e;
 		for (; t;) {
 			let e = t.getAttribute?.("data-entity-id");
@@ -7080,129 +7470,129 @@ const Mapbox = forwardRef((e, c) => {
 			t = t.parentElement;
 		}
 		return null;
-	}, []), On = useCallback((e) => {
+	}, []), An = useCallback((e) => {
 		let t = [e.lngLat.lng, e.lngLat.lat], n = {
 			x: e.point.x,
 			y: e.point.y
-		}, r = In.current;
+		}, r = Rn.current;
 		if (r === "picker") {
 			let e = {
 				lng: t[0],
 				lat: t[1]
 			};
-			rt(e), It(t), Ln.current?.(e), Mt.current && (Mt.current(e), Mt.current = null, Ft({}), Lt(), rt(null), dn(Nt.current));
+			it(e), Rt(t), zn.current?.(e), Pt.current && (Pt.current(e), Pt.current = null, Lt({}), zt(), it(null), pn(Ft.current));
 			return;
 		}
-		if (vt.current) return;
+		if (yt.current) return;
 		if (r === "edit") {
-			let e = zn.current;
+			let e = Vn.current;
 			if (e === "rectangle") {
-				let e = Bn.current;
-				if (!e) ct(t);
+				let e = Hn.current;
+				if (!e) lt(t);
 				else {
-					let n = lt.current, r = applyEntityConfig({
+					let n = ut.current, r = applyEntityConfig({
 						...n,
-						id: n?.id ?? Rt(),
+						id: n?.id ?? Bt(),
 						type: "rectangle",
 						bounds: [e, t]
 					}, D);
-					Ut();
+					Gt();
 					let i = L.current;
 					if (i && !R.current.has(r.id)) {
 						let e = new RectangleRenderer(i, r, O, k, j, N);
 						R.current.set(r.id, e);
 					}
-					Q.current.onRectangleAdd?.(r), ct(null), lt.current = null, W.current && (W.current = !1, U(null), i && (i.getCanvas().style.cursor = ""));
+					Q.current.onRectangleAdd?.(r), lt(null), ut.current = null, W.current && (W.current = !1, U(null), i && (i.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "circle") {
-				let e = dt.current;
-				if (!e) dt.current = { center: t };
+				let e = ft.current;
+				if (!e) ft.current = { center: t };
 				else {
-					let n = Kt(e.center, t), r = G.current, i = applyEntityConfig({
+					let n = Jt(e.center, t), r = G.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? Rt(),
+						id: r?.id ?? Bt(),
 						type: "circle",
 						center: e.center,
 						radius: n
 					}, D);
-					Jt();
+					Xt();
 					let a = L.current;
 					if (a && !R.current.has(i.id)) {
 						let e = new CircleRenderer(a, i, O, k, j, M);
 						R.current.set(i.id, e);
 					}
-					Q.current.onCircleAdd?.(i), dt.current = null, G.current = null, W.current && (W.current = !1, U(null), a && (a.getCanvas().style.cursor = ""));
+					Q.current.onCircleAdd?.(i), ft.current = null, G.current = null, W.current && (W.current = !1, U(null), a && (a.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "polygon") {
-				let e = ft.current;
+				let e = pt.current;
 				if (e.length >= 3) {
 					let n = e[0];
-					if (Kt(n, t) < 20) {
+					if (Jt(n, t) < 20) {
 						let t = K.current, n = applyEntityConfig({
 							...t,
-							id: t?.id ?? Rt(),
+							id: t?.id ?? Bt(),
 							type: "polygon",
 							coordinates: [...e]
 						}, D);
-						Qt();
+						en();
 						let r = L.current;
 						if (r && !R.current.has(n.id)) {
 							let e = new PolygonRenderer(r, n, O, k, j, N);
 							R.current.set(n.id, e);
 						}
-						Q.current.onPolygonAdd?.(n), ft.current = [], K.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
+						Q.current.onPolygonAdd?.(n), pt.current = [], K.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
 						return;
 					}
 				}
-				ft.current = [...e, t];
+				pt.current = [...e, t];
 				return;
 			}
 			if (e === "square") {
-				let e = mt.current;
-				if (!e) mt.current = { center: t };
+				let e = ht.current;
+				if (!e) ht.current = { center: t };
 				else {
-					let n = Kt(e.center, t) * 2, r = pt.current, i = applyEntityConfig({
+					let n = Jt(e.center, t) * 2, r = mt.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? Rt(),
+						id: r?.id ?? Bt(),
 						type: "square",
 						center: e.center,
 						length: n
 					}, D);
-					rn();
+					on();
 					let a = L.current;
 					if (a && !R.current.has(i.id)) {
 						let e = new SquareRenderer(a, i, O, k, j, N);
 						R.current.set(i.id, e);
 					}
-					Q.current.onSquareAdd?.(i), mt.current = null, pt.current = null, W.current && (W.current = !1, U(null), a && (a.getCanvas().style.cursor = ""));
+					Q.current.onSquareAdd?.(i), ht.current = null, mt.current = null, W.current && (W.current = !1, U(null), a && (a.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "polyline") {
-				gt.current = [...gt.current, t];
+				_t.current = [..._t.current, t];
 				return;
 			}
-			let n = ut.current;
+			let n = dt.current;
 			if (n && n.src && n.width) {
 				let e = {
 					...n,
-					id: n.id ?? Rt(),
+					id: n.id ?? Bt(),
 					type: "marker",
 					center: t,
 					src: n.src,
 					width: n.width
 				};
-				Q.current.onMarkerAdd?.(e), H(null), U(null), Y(), ut.current = null, W.current = !1;
+				Q.current.onMarkerAdd?.(e), H(null), U(null), Y(), dt.current = null, W.current = !1;
 				return;
 			}
-			let r = Rn.current;
+			let r = Bn.current;
 			if (r) {
 				let e = {
-					id: Rt(),
+					id: Bt(),
 					type: "marker",
 					name: r.name,
 					center: t,
@@ -7213,7 +7603,7 @@ const Mapbox = forwardRef((e, c) => {
 				return;
 			}
 		}
-		if (xt.current.length > 0) {
+		if (St.current.length > 0) {
 			let e = L.current?.getZoom() ?? 12;
 			if (q.current) {
 				let { entityId: e, activeHandle: n } = q.current, r = R.current.get(e);
@@ -7224,7 +7614,7 @@ const Mapbox = forwardRef((e, c) => {
 				q.current = null;
 				return;
 			}
-			for (let n of xt.current) {
+			for (let n of St.current) {
 				let r = R.current.get(n);
 				if (!r?.getEditHandleAt) continue;
 				let i = r.getEditHandleAt(t, e);
@@ -7247,12 +7637,12 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}
 		}
-		let i = Nn.current, a = Pn.current, o = Fn.current, s = Dn(e.originalEvent.target);
+		let i = Fn.current, a = In.current, o = Ln.current, s = kn(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);
+					let t = e.popup.content ?? Fe?.(e);
 					t && mergePopupConfig(e.popup, I, t).trigger === "click" && o(s, "click", n);
 				}
 				return;
@@ -7264,7 +7654,7 @@ const Mapbox = forwardRef((e, c) => {
 				let e = i.find((e) => e.id === t);
 				if (e) {
 					if (a?.(e), e.popup) {
-						let r = e.popup.content ?? Pe?.(e);
+						let r = e.popup.content ?? Fe?.(e);
 						r && mergePopupConfig(e.popup, I, r).trigger === "click" && o(t, "click", n);
 					}
 					return;
@@ -7275,7 +7665,7 @@ const Mapbox = forwardRef((e, c) => {
 			let t = i.find((t) => t.id === e);
 			if (t) {
 				if (a?.(t), t.popup) {
-					let r = t.popup.content ?? Pe?.(t);
+					let r = t.popup.content ?? Fe?.(t);
 					r && mergePopupConfig(t.popup, I, r).trigger === "click" && o(e, "click", n);
 				}
 				return;
@@ -7283,67 +7673,67 @@ const Mapbox = forwardRef((e, c) => {
 		}
 	}, [
 		I,
-		Pe,
-		Dn
-	]), kn = useCallback((e) => {
+		Fe,
+		kn
+	]), jn = useCallback((e) => {
 		let t = [e.lngLat.lng, e.lngLat.lat];
 		if (q.current) {
 			let { entityId: e, activeHandle: n } = q.current;
 			R.current.get(e)?.updateEditPreview?.(n, t);
 			return;
 		}
-		let n = zn.current, r = Bn.current;
-		n === "rectangle" && r && Ht(r, t);
-		let i = dt.current;
-		n === "circle" && i && qt(i.center, t);
-		let a = ft.current;
-		n === "polygon" && a.length > 0 && Zt(a, t);
-		let o = mt.current;
-		n === "square" && o && nn(o.center, t);
-		let s = gt.current;
-		n === "polyline" && s.length > 0 && sn(s, t);
-		let c = Nn.current, l = Fn.current;
+		let n = Vn.current, r = Hn.current;
+		n === "rectangle" && r && Wt(r, t);
+		let i = ft.current;
+		n === "circle" && i && Yt(i.center, t);
+		let a = pt.current;
+		n === "polygon" && a.length > 0 && $t(a, t);
+		let o = ht.current;
+		n === "square" && o && an(o.center, t);
+		let s = _t.current;
+		n === "polyline" && s.length > 0 && ln(s, t);
+		let c = Fn.current, l = Ln.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);
+			let n = t.popup.content ?? Fe?.(t);
 			if (!n) continue;
 			let r = mergePopupConfig(t.popup, I, n);
 			if (r.trigger === "hover") {
-				Je.current && clearTimeout(Je.current), Je.current = window.setTimeout(() => {
+				Ye.current && clearTimeout(Ye.current), Ye.current = window.setTimeout(() => {
 					l(e, "hover");
 				}, r.hoverDelay);
 				return;
 			}
 		}
-		if (Je.current &&= (clearTimeout(Je.current), null), B?.openedBy === "hover") {
+		if (Ye.current &&= (clearTimeout(Ye.current), null), B?.openedBy === "hover") {
 			let e = R.current.get(B.entityId);
-			e && !e.isPointInEntity(t) && Dt(B.entityId);
+			e && !e.isPointInEntity(t) && Ot(B.entityId);
 		}
 	}, [
 		I,
-		Pe,
+		Fe,
 		B,
-		Dt,
-		Ht,
-		qt,
-		Zt,
-		nn,
-		sn
-	]), An = useCallback((e) => {
-		if (e.preventDefault(), Mt.current) {
-			Mt.current(null), Mt.current = null, Ft({}), Lt(), rt(null), dn(Nt.current);
+		Ot,
+		Wt,
+		Yt,
+		$t,
+		an,
+		ln
+	]), Mn = useCallback((e) => {
+		if (e.preventDefault(), Pt.current) {
+			Pt.current(null), Pt.current = null, Lt({}), zt(), it(null), pn(Ft.current);
 			return;
 		}
-		if (vt.current) return;
-		if (xt.current.length > 0) {
+		if (yt.current) return;
+		if (St.current.length > 0) {
 			let t = [e.lngLat.lng, e.lngLat.lat];
 			if (q.current) {
 				R.current.get(q.current.entityId)?.cancelEditPreview?.(), q.current = null;
 				return;
 			}
 			let n = L.current?.getZoom() ?? 12;
-			for (let e of xt.current) {
+			for (let e of St.current) {
 				let r = R.current.get(e);
 				if (!r?.getEditHandleAt || !r.deleteVertex) continue;
 				let i = r.getEditHandleAt(t, n);
@@ -7354,14 +7744,14 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}
 		}
-		if (In.current !== "edit") return;
-		if (Rn.current) {
+		if (Rn.current !== "edit") return;
+		if (Bn.current) {
 			H(null), U(null), Y();
 			return;
 		}
-		let t = zn.current;
+		let t = Vn.current;
 		if (t === "rectangle") {
-			if (Bn.current) ct(null), Ut();
+			if (Hn.current) lt(null), Gt();
 			else {
 				U(null);
 				let e = L.current;
@@ -7370,7 +7760,7 @@ const Mapbox = forwardRef((e, c) => {
 			return;
 		}
 		if (t === "circle") {
-			if (dt.current) dt.current = null, Jt();
+			if (ft.current) ft.current = null, Xt();
 			else {
 				U(null);
 				let e = L.current;
@@ -7379,22 +7769,22 @@ const Mapbox = forwardRef((e, c) => {
 			return;
 		}
 		if (t === "polygon") {
-			let e = ft.current;
+			let e = pt.current;
 			if (e.length >= 3) {
 				let t = K.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? Rt(),
+					id: t?.id ?? Bt(),
 					type: "polygon",
 					coordinates: [...e]
 				}, D);
-				Qt();
+				en();
 				let r = L.current;
 				if (r && !R.current.has(n.id)) {
 					let e = new PolygonRenderer(r, n, O, k, j, N);
 					R.current.set(n.id, e);
 				}
-				Q.current.onPolygonAdd?.(n), ft.current = [], K.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
-			} else if (e.length > 0) ft.current = [], Qt();
+				Q.current.onPolygonAdd?.(n), pt.current = [], K.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
+			} else if (e.length > 0) pt.current = [], en();
 			else {
 				U(null);
 				let e = L.current;
@@ -7403,7 +7793,7 @@ const Mapbox = forwardRef((e, c) => {
 			return;
 		}
 		if (t === "square") {
-			if (mt.current) mt.current = null, rn();
+			if (ht.current) ht.current = null, on();
 			else {
 				U(null);
 				let e = L.current;
@@ -7412,22 +7802,22 @@ const Mapbox = forwardRef((e, c) => {
 			return;
 		}
 		if (t === "polyline") {
-			let e = gt.current;
+			let e = _t.current;
 			if (e.length >= 2) {
-				let t = ht.current, n = applyEntityConfig({
+				let t = gt.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? Rt(),
+					id: t?.id ?? Bt(),
 					type: "polyline",
 					coordinates: [...e]
 				}, D);
-				cn();
+				un();
 				let r = L.current;
 				if (r && !R.current.has(n.id)) {
 					let e = new PolylineRenderer(r, n, O, k, N);
 					R.current.set(n.id, e);
 				}
-				Q.current.onPolylineAdd?.(n), gt.current = [], ht.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
-			} else if (e.length > 0) gt.current = [], cn();
+				Q.current.onPolylineAdd?.(n), _t.current = [], gt.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
+			} else if (e.length > 0) _t.current = [], un();
 			else {
 				U(null);
 				let e = L.current;
@@ -7438,11 +7828,11 @@ const Mapbox = forwardRef((e, c) => {
 		let n = [e.lngLat.lng, e.lngLat.lat], r = {
 			x: e.point.x,
 			y: e.point.y
-		}, i = Nn.current, a = Dn(e.originalEvent.target);
+		}, i = Fn.current, a = kn(e.originalEvent.target);
 		if (a) {
 			let e = i.find((e) => String(e.id) === a);
 			if (e) {
-				jn(e, r, n);
+				Nn(e, r, n);
 				return;
 			}
 		}
@@ -7451,7 +7841,7 @@ const Mapbox = forwardRef((e, c) => {
 			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) {
-					jn(e, r, n);
+					Nn(e, r, n);
 					return;
 				}
 			}
@@ -7459,24 +7849,24 @@ const Mapbox = forwardRef((e, c) => {
 		for (let [e, t] of R.current) if (t.isPointInEntity(n)) {
 			let t = i.find((t) => t.id === e);
 			if (t) {
-				jn(t, r, n);
+				Nn(t, r, n);
 				return;
 			}
 		}
 	}, [
-		Dn,
+		kn,
 		Y,
-		Ut,
-		Jt,
-		Qt,
-		rn,
-		cn
-	]), jn = useCallback((e, t, n) => {
-		let r = Ve.current?.getBoundingClientRect(), i = r ? {
+		Gt,
+		Xt,
+		en,
+		on,
+		un
+	]), Nn = useCallback((e, t, n) => {
+		let r = He.current?.getBoundingClientRect(), i = r ? {
 			x: t.x + r.left,
 			y: t.y + r.top
 		} : t;
-		Xe({
+		Ze({
 			position: i,
 			lngLat: n,
 			items: [{
@@ -7496,8 +7886,8 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}]
 		});
-	}, []), Mn = useCallback(() => {
-		Xe(null);
+	}, []), Pn = useCallback(() => {
+		Ze(null);
 	}, []);
 	useEffect(() => {
 		let e = document.createElement("div");
@@ -7509,7 +7899,7 @@ const Mapbox = forwardRef((e, c) => {
 			pointer-events: none;
 			height: 100%;
 			z-index: ${I?.zIndex ?? 1e3};
-		`, document.body.appendChild(e), Ke.current = e, () => {
+		`, document.body.appendChild(e), qe.current = e, () => {
 			document.body.contains(e) && document.body.removeChild(e);
 		};
 	}, [I?.zIndex]), useEffect(() => {
@@ -7522,61 +7912,61 @@ const Mapbox = forwardRef((e, c) => {
 			pointer-events: none;
 			height: 100%;
 			z-index: ${(I?.zIndex ?? 1e3) + 100};
-		`, document.body.appendChild(e), Ze.current = e, () => {
+		`, document.body.appendChild(e), Qe.current = e, () => {
 			document.body.contains(e) && document.body.removeChild(e);
 		};
 	}, [I?.zIndex]);
-	let Nn = useRef(T);
-	Nn.current = T;
-	let Pn = useRef(Ie);
-	Pn.current = Ie;
-	let Fn = useRef(Et);
-	Fn.current = Et;
-	let In = useRef(V);
-	In.current = V;
-	let Ln = useRef(b);
-	Ln.current = b;
-	let Rn = useRef(at);
-	Rn.current = at;
-	let zn = useRef(ot);
-	zn.current = ot;
-	let Bn = useRef(st);
-	Bn.current = st;
+	let Fn = useRef(T);
+	Fn.current = T;
+	let In = useRef(Le);
+	In.current = Le;
+	let Ln = useRef(Dt);
+	Ln.current = Dt;
+	let Rn = useRef(V);
+	Rn.current = V;
+	let zn = useRef(b);
+	zn.current = b;
+	let Bn = useRef(ot);
+	Bn.current = ot;
+	let Vn = useRef(st);
+	Vn.current = st;
+	let Hn = useRef(ct);
+	Hn.current = ct;
 	let Q = useRef(v);
 	Q.current = v;
-	let Vn = useRef(D);
-	Vn.current = D, useEffect(() => {
+	let Un = useRef(D);
+	Un.current = D, useEffect(() => {
 		let e = (e) => {
 			if (e.key === "Escape" && q.current) {
 				R.current.get(q.current.entityId)?.cancelEditPreview?.(), q.current = null;
 				return;
 			}
 			if (e.key === "Escape" && V === "edit") {
-				if (at && (H(null), U(null), Y()), ot === "rectangle") if (st) ct(null), Ut();
+				if (ot && (H(null), U(null), Y()), st === "rectangle") if (ct) lt(null), Gt();
 				else {
 					U(null);
 					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (ot === "circle") if (dt.current) dt.current = null, Jt();
+				if (st === "circle") if (ft.current) ft.current = null, Xt();
 				else {
 					U(null);
 					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (ot === "polygon") if (ft.current.length > 0) ft.current = [], Qt();
+				if (st === "polygon") if (pt.current.length > 0) pt.current = [], en();
 				else {
 					U(null);
 					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (ot === "square") if (mt.current) mt.current = null, rn();
+				if (st === "square") if (ht.current) ht.current = null, on();
 				else {
 					U(null);
 					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (ot === "polyline") if (gt.current.length > 0) gt.current = [], cn();
+				if (st === "polyline") if (_t.current.length > 0) _t.current = [], un();
 				else {
 					U(null);
 					let e = L.current;
@@ -7589,55 +7979,55 @@ const Mapbox = forwardRef((e, c) => {
 		};
 	}, [
 		V,
-		at,
 		ot,
 		st,
+		ct,
 		Y,
-		Ut,
-		Jt,
-		Qt,
-		rn,
-		cn
+		Gt,
+		Xt,
+		en,
+		on,
+		un
 	]), useEffect(() => {
 		let e = L.current;
 		if (!e || !B) return;
 		let t = B.entityId, n = B.config, r = () => {
-			let r = Nn.current.find((e) => e.id === t);
+			let r = Fn.current.find((e) => e.id === t);
 			if (!r) {
-				Ot();
+				kt();
 				return;
 			}
-			let { position: i } = calculatePopupPosition(r, n, e, void 0, qe.current);
-			qe.current && (qe.current.style.left = `${i.x}px`, qe.current.style.top = `${i.y}px`);
+			let { position: i } = calculatePopupPosition(r, n, e, void 0, Je.current);
+			Je.current && (Je.current.style.left = `${i.x}px`, Je.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);
 		};
-	}, [B?.entityId, Ot]), useEffect(() => {
-		let e = L.current, t = Ve.current;
-		if (!e || !Ye || !t) return;
-		let n = Ye.lngLat, r = () => {
+	}, [B?.entityId, kt]), useEffect(() => {
+		let e = L.current, t = He.current;
+		if (!e || !Xe || !t) return;
+		let n = Xe.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) {
-				Mn();
+				Pn();
 				return;
 			}
 			let o = t.getBoundingClientRect(), s = r.x + o.left, c = r.y + o.top;
-			Qe.current && (Qe.current.style.left = `${s}px`, Qe.current.style.top = `${c}px`);
+			$e.current && ($e.current.style.left = `${s}px`, $e.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);
 		};
-	}, [Ye?.lngLat, Mn]), useEffect(() => {
-		if (!Ve.current) return;
+	}, [Xe?.lngLat, Pn]), useEffect(() => {
+		if (!He.current) return;
 		let e = {
 			version: 8,
 			sources: {},
 			layers: []
 		}, { dragPan: t = !0, scrollZoom: n = !0, doubleClickZoom: r = !0, touchZoomRotate: i = !0, keyboard: a = !0, dragRotate: o = !0, pitchWithRotate: c = !0, touchPitch: m = !0, boxZoom: h = !0 } = x, _ = new mapboxgl.Map({
-			container: Ve.current,
+			container: He.current,
 			style: p || e,
 			center: l,
 			zoom: u,
@@ -7671,9 +8061,9 @@ const Mapbox = forwardRef((e, c) => {
 			}
 			z.current.clear(), T.forEach((e) => {
 				z.current.set(e.id, e);
-			}), En(S), vn(), Vt(), Wt(), Xt(), en(), on(), et(_), Fe?.(_);
-		}), _.on("click", On), _.on("mousemove", kn), _.on("contextmenu", An), () => {
-			_.off("click", On), _.off("mousemove", kn), _.off("contextmenu", An), yn(), Lt(), Y(), X(), Z(), _.remove(), L.current = null;
+			}), On(S), bn(), Ut(), Kt(), Qt(), nn(), cn(), tt(_), Ie?.(_);
+		}), _.on("click", An), _.on("mousemove", jn), _.on("contextmenu", Mn), () => {
+			_.off("click", An), _.off("mousemove", jn), _.off("contextmenu", Mn), xn(), zt(), Y(), X(), Z(), _.remove(), L.current = null;
 		};
 	}, []), useEffect(() => {
 		if (L.current) {
@@ -7681,53 +8071,53 @@ const Mapbox = forwardRef((e, c) => {
 				L.current.once("load", () => {
 					z.current.clear(), T.forEach((e) => {
 						z.current.set(e.id, e);
-					}), vn();
+					}), bn();
 				});
 				return;
 			}
 			z.current.clear(), T.forEach((e) => {
 				z.current.set(e.id, e);
-			}), vn();
+			}), bn();
 		}
-	}, [T, vn]), useEffect(() => {
-		!L.current || !L.current.isStyleLoaded() || (yn(), vn());
+	}, [T, bn]), useEffect(() => {
+		!L.current || !L.current.isStyleLoaded() || (xn(), bn());
 	}, [
 		O,
 		k,
 		j,
 		M,
 		N,
-		yn,
-		vn
+		xn,
+		bn
 	]), useEffect(() => {
 		if (L.current) {
 			if (!L.current.isStyleLoaded()) {
 				L.current.once("load", () => {
-					En(S);
+					On(S);
 				});
 				return;
 			}
-			En(S);
-		}
-	}, [S, En]);
-	let Hn = useRef(void 0), Un = useRef(!0), Wn = useRef(S);
-	Wn.current = S;
-	let Gn = useRef(En);
-	Gn.current = En;
-	let Kn = useRef(yn);
-	Kn.current = yn;
-	let qn = useRef(vn);
-	qn.current = vn;
-	let Jn = useRef(Vt);
-	Jn.current = Vt;
-	let Yn = useRef(Wt);
-	Yn.current = Wt;
-	let Xn = useRef(Xt);
-	Xn.current = Xt;
-	let Zn = useRef(en);
-	Zn.current = en;
-	let Qn = useRef(on);
-	Qn.current = on, useEffect(() => {
+			On(S);
+		}
+	}, [S, On]);
+	let Wn = useRef(void 0), Gn = useRef(!0), Kn = useRef(S);
+	Kn.current = S;
+	let qn = useRef(On);
+	qn.current = On;
+	let Jn = useRef(xn);
+	Jn.current = xn;
+	let Yn = useRef(bn);
+	Yn.current = bn;
+	let Xn = useRef(Ut);
+	Xn.current = Ut;
+	let Zn = useRef(Kt);
+	Zn.current = Kt;
+	let Qn = useRef(Qt);
+	Qn.current = Qt;
+	let $n = useRef(nn);
+	$n.current = nn;
+	let er = useRef(cn);
+	er.current = cn, useEffect(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = p || {
@@ -7735,27 +8125,27 @@ const Mapbox = forwardRef((e, c) => {
 			sources: {},
 			layers: []
 		};
-		if (Un.current) {
-			Un.current = !1, Hn.current = p;
+		if (Gn.current) {
+			Gn.current = !1, Wn.current = p;
 			return;
 		}
-		Hn.current !== p && (Hn.current = p, e.setStyle(t), e.once("style.load", () => {
+		Wn.current !== p && (Wn.current = p, 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);
 			}
-			We.current.clear(), Gn.current(Wn.current), Kn.current(), qn.current(), Jn.current(), Yn.current(), Xn.current(), Zn.current(), Qn.current();
+			Ge.current.clear(), qn.current(Kn.current), Jn.current(), Yn.current(), Xn.current(), Zn.current(), Qn.current(), $n.current(), er.current();
 		}));
 	}, [p]), useEffect(() => {
 		let e = new Set(E.map(String));
 		for (let [t, n] of R.current) n.setSelected(e.has(String(t)));
 	}, [E]);
-	let $n = useRef({});
+	let tr = useRef({});
 	useEffect(() => {
 		let e = L.current;
 		if (!e) return;
-		let t = $n.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 || ($n.current = {
+		let t = tr.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 || (tr.current = {
 			center: l,
 			zoom: u,
 			pitch: d,
@@ -7772,8 +8162,8 @@ const Mapbox = forwardRef((e, c) => {
 		d,
 		f
 	]);
-	let er = (() => Ce === !1 ? null : Ce === !0 ? { enabled: !0 } : Ce)(), tr = (() => P === !1 ? null : P === !0 ? { enabled: !0 } : P)(), nr = (() => we === !1 ? null : we === !0 ? { enabled: !0 } : we)(), $ = (() => {
-		if (Te === !1) return null;
+	let nr = (() => we === !1 ? null : we === !0 ? { enabled: !0 } : we)(), rr = (() => P === !1 ? null : P === !0 ? { enabled: !0 } : P)(), ir = (() => Te === !1 ? null : Te === !0 ? { enabled: !0 } : Te)(), $ = (() => {
+		if (Ee === !1) return null;
 		let e, t, n;
 		if (S && S.length > 0) {
 			let r = S.find((e) => e.hasRoadNetwork === !0) || S[0];
@@ -7786,18 +8176,18 @@ const Mapbox = forwardRef((e, c) => {
 			} else e = `base-layer-source-${r.id}`;
 			t = r.roadNetworkSourceLayer || "road", n = r.roadNetworkClassField;
 		}
-		return Te === !0 ? {
+		return Ee === !0 ? {
 			enabled: !0,
 			source: e,
 			sourceLayer: t,
 			classField: n
 		} : {
-			...Te,
-			source: Te.source || e,
-			sourceLayer: Te.sourceLayer || t,
-			classField: Te.classField || n
+			...Ee,
+			source: Ee.source || e,
+			sourceLayer: Ee.sourceLayer || t,
+			classField: Ee.classField || n
 		};
-	})(), rr = (() => F ? F === !0 ? { enabled: !0 } : F : null)(), ir = (() => De ? De === !0 ? { enabled: !0 } : De : null)(), ar = (() => je || null)(), or = useMemo(() => {
+	})(), ar = (() => F ? F === !0 ? { enabled: !0 } : F : null)(), or = (() => Oe ? Oe === !0 ? { enabled: !0 } : Oe : null)(), sr = (() => Me || null)(), cr = useMemo(() => {
 		let e = [];
 		for (let t of S) if (t.applyRasterPaint) if (t.type === "style") {
 			let n = L.current;
@@ -7807,7 +8197,7 @@ const Mapbox = forwardRef((e, c) => {
 			}
 		} else e.push(`base-layer-${t.id}`);
 		return e;
-	}, [S, $e]), sr = useMemo(() => {
+	}, [S, et]), lr = useMemo(() => {
 		if (V !== "picker") return;
 		let e = J.cursorImage;
 		if (!e) return;
@@ -7842,16 +8232,16 @@ const Mapbox = forwardRef((e, c) => {
 				break;
 		}
 		return `url(${e.url}) ${i} ${a}, crosshair`;
-	}, [V, J.cursorImage]), cr = useMemo(() => sr ? {
-		...Be,
-		"--mapbox-picker-cursor": sr
-	} : Be, [Be, sr]);
+	}, [V, J.cursorImage]), ur = useMemo(() => lr ? {
+		...Ve,
+		"--mapbox-picker-cursor": lr
+	} : Ve, [Ve, lr]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: `comp-mapbox ${V === "picker" ? "comp-mapbox--picker-mode" : ""} ${ze}`,
-		style: cr,
+		className: `comp-mapbox ${V === "picker" ? "comp-mapbox--picker-mode" : ""} ${Be}`,
+		style: ur,
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				ref: Ve,
+				ref: He,
 				className: "comp-mapbox__map"
 			}),
 			V === "picker" && J.showCrosshair === !0 && /* @__PURE__ */ jsxs("div", {
@@ -7865,14 +8255,14 @@ const Mapbox = forwardRef((e, c) => {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: `comp-mapbox__edit-controls${V === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) || $ && $.enabled !== !1 || ar && ar.enabled !== !1 ? "" : " comp-mapbox__edit-controls--hidden"}`,
+				className: `comp-mapbox__edit-controls${V === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) || $ && $.enabled !== !1 || sr && sr.enabled !== !1 ? "" : " comp-mapbox__edit-controls--hidden"}`,
 				children: [
 					V === "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: at,
-						onTemplateSelect: ln,
-						drawMode: ot,
-						onDrawModeChange: un,
+						selectedTemplate: ot,
+						onTemplateSelect: dn,
+						drawMode: st,
+						onDrawModeChange: fn,
 						showRectangleTool: v.showRectangleTool,
 						showCircleTool: v.showCircleTool,
 						showPolygonTool: v.showPolygonTool,
@@ -7880,8 +8270,8 @@ const Mapbox = forwardRef((e, c) => {
 						showPolylineTool: v.showPolylineTool
 					}),
 					/* @__PURE__ */ jsx(RoadHighlightControl, {
-						ref: Ue,
-						map: $e,
+						ref: We,
+						map: et,
 						showButton: !!($ && $.enabled !== !1),
 						highlightWidth: $?.highlightWidth,
 						defaultRoadTypes: $?.defaultRoadTypes,
@@ -7892,80 +8282,80 @@ const Mapbox = forwardRef((e, c) => {
 						className: $?.className,
 						style: $?.style
 					}),
-					ar && ar.enabled !== !1 && /* @__PURE__ */ jsx(RoutePlanningControl, {
-						ref: He,
-						map: $e,
-						pointCount: ar.pointCount,
-						showPointCountInput: ar.showPointCountInput,
-						visualType: ar.visualType,
-						onSelectFinished: ar.onSelectFinished
+					sr && sr.enabled !== !1 && /* @__PURE__ */ jsx(RoutePlanningControl, {
+						ref: Ue,
+						map: et,
+						pointCount: sr.pointCount,
+						showPointCountInput: sr.showPointCountInput,
+						visualType: sr.visualType,
+						onSelectFinished: sr.onSelectFinished
 					})
 				]
 			}),
-			(er?.enabled !== !1 || tr?.enabled !== !1 || nr?.enabled !== !1 || rr && rr.enabled !== !1 || ir && ir.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
+			(nr?.enabled !== !1 || rr?.enabled !== !1 || ir?.enabled !== !1 || ar && ar.enabled !== !1 || or && or.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__controls",
 				children: [
-					er && er.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
-						map: $e,
-						precision: er.precision,
-						className: er.className,
-						style: er.style
+					nr && nr.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
+						map: et,
+						precision: nr.precision,
+						className: nr.className,
+						style: nr.style
 					}),
-					tr && tr.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
-						map: $e,
-						maxWidth: tr.maxWidth,
-						unit: tr.unit,
-						className: tr.className,
-						style: tr.style
+					rr && rr.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
+						map: et,
+						maxWidth: rr.maxWidth,
+						unit: rr.unit,
+						className: rr.className,
+						style: rr.style
 					}),
-					rr && rr.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
-						map: $e,
+					ar && ar.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
+						map: et,
 						entityConfig: D,
 						onDrawModeChange: (e) => {
-							vt.current = e;
+							yt.current = e;
 						},
-						className: rr.className,
-						style: rr.style
+						className: ar.className,
+						style: ar.style
 					}),
-					ir && ir.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
-						map: $e,
+					or && or.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
+						map: et,
 						value: C,
-						onChange: Me,
-						rasterPaintLayerIds: or,
-						className: ir.className,
-						style: ir.style
+						onChange: Ne,
+						rasterPaintLayerIds: cr,
+						className: or.className,
+						style: or.style
 					}),
-					nr && nr.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
-						map: $e,
+					ir && ir.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
+						map: et,
 						initialCenter: l,
 						initialZoom: u,
 						initialPitch: d,
 						initialBearing: f,
-						duration: nr.duration,
-						className: nr.className,
-						style: nr.style
+						duration: ir.duration,
+						className: ir.className,
+						style: ir.style
 					})
 				]
 			}),
-			!(ar && ar.enabled !== !1) && /* @__PURE__ */ jsx(RoutePlanningControl, {
-				ref: He,
-				map: $e,
+			!(sr && sr.enabled !== !1) && /* @__PURE__ */ jsx(RoutePlanningControl, {
+				ref: Ue,
+				map: et,
 				showButton: !1
 			}),
-			B && Ke.current && /* @__PURE__ */ jsx(EntityPopup, {
+			B && qe.current && /* @__PURE__ */ jsx(EntityPopup, {
 				popupState: B,
-				onClose: () => Dt(B.entityId),
-				portalContainer: Ke.current,
-				popupRef: qe
+				onClose: () => Ot(B.entityId),
+				portalContainer: qe.current,
+				popupRef: Je
 			}),
-			Ye && Ze.current && /* @__PURE__ */ jsx(ContextMenu, {
-				menuState: Ye,
-				onClose: Mn,
-				portalContainer: Ze.current,
-				menuRef: Qe
+			Xe && Qe.current && /* @__PURE__ */ jsx(ContextMenu, {
+				menuState: Xe,
+				onClose: Pn,
+				portalContainer: Qe.current,
+				menuRef: $e
 			})
 		]
 	});
 });
 Mapbox.displayName = "Mapbox";
-export { BaseCanvasRenderer, COLOR_SCHEMES, CanvasCircleRenderer, CanvasImageRenderer, CanvasRadarRenderer, CircleRenderer, ContextMenu, CoordinateDisplay, DEFAULT_NAME_CONFIG, DEFAULT_SELECT_NAME_CONFIG, EditControl, EntityPopup, Mapbox, MarkerRenderer, POPUP_DEFAULTS, PolygonRenderer, PolylineRenderer, RADAR_DEFAULTS, ROAD_TYPE_OPTIONS, RectangleRenderer, ResetViewControl, RoadHighlightControl, ScaleControl, SquareRenderer, UnitRenderer, bearing, calculatePopupPosition, confidenceToOpacity, destinationPoint, distance, mergePopupConfig, resolveNameConfig };
+export { AttackDirectionRenderer, BaseCanvasRenderer, COLOR_SCHEMES, CanvasCircleRenderer, CanvasImageRenderer, CanvasRadarRenderer, CircleRenderer, ContextMenu, CoordinateDisplay, DEFAULT_NAME_CONFIG, DEFAULT_SELECT_NAME_CONFIG, EditControl, EntityPopup, Mapbox, MarkerRenderer, POPUP_DEFAULTS, PolygonRenderer, PolylineRenderer, RADAR_DEFAULTS, ROAD_TYPE_OPTIONS, RectangleRenderer, ResetViewControl, RoadHighlightControl, ScaleControl, SquareRenderer, UnitRenderer, bearing, calculatePopupPosition, confidenceToOpacity, destinationPoint, distance, mergePopupConfig, resolveNameConfig };