bbl-mapbox-react 0.0.34 → 0.0.35

package/dist/index.mjs

@@ -6329,13 +6329,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: 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 { 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), ft = useRef(null), pt = useRef(null), G = useRef(null), mt = useRef(null), K = useRef(null), ht = useRef([]), gt = useRef(null), _t = useRef(null), vt = useRef(null), yt = useRef([]), bt = useRef(null), xt = useRef(!1), [St, Ct] = useState([]), wt = useRef([]);
+	wt.current = St;
 	let q = useRef(null);
 	useEffect(() => {
 		nt(_);
 	}, [_]);
-	let Ct = useCallback((e) => {
+	let Tt = useCallback((e) => {
 		let t = R.current.get(e), n = z.current.get(e);
 		if (t && n) {
 			if (n.type === "radar" && t instanceof CanvasRadarRenderer) {
@@ -6352,7 +6352,7 @@ const Mapbox = forwardRef((e, c) => {
 				z.current.set(e, r), t.startAnimation();
 			}
 		}
-	}, []), wt = useCallback((e) => {
+	}, []), Et = useCallback((e) => {
 		let t = R.current.get(e), n = z.current.get(e);
 		if (t && n) {
 			if (n.type === "radar" && t instanceof CanvasRadarRenderer) {
@@ -6369,10 +6369,10 @@ const Mapbox = forwardRef((e, c) => {
 				z.current.set(e, r), t.stopAnimation();
 			}
 		}
-	}, []), Tt = useCallback((e) => {
+	}, []), Dt = useCallback((e) => {
 		let t = z.current.get(e);
-		t && (t.type === "radar" || t.type === "circle") && (t.type, t.isAnimating ? wt(e) : Ct(e));
-	}, [Ct, wt]), Et = useCallback((e) => {
+		t && (t.type === "radar" || t.type === "circle") && (t.type, t.isAnimating ? Et(e) : Tt(e));
+	}, [Tt, Et]), Ot = useCallback((e) => {
 		if (e === void 0) {
 			let e = !1;
 			for (let [, t] of R.current) if (t instanceof UnitRenderer) {
@@ -6388,7 +6388,7 @@ 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);
 		}
-	}, []), Dt = useCallback((e, t, n) => {
+	}, []), kt = 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 ?? Fe?.(r);
@@ -6406,18 +6406,18 @@ const Mapbox = forwardRef((e, c) => {
 		I,
 		Fe,
 		Re
-	]), Ot = useCallback((e) => {
+	]), At = useCallback((e) => {
 		B?.entityId === e && (Ke(null), ze?.(e));
-	}, [B, ze]), kt = useCallback(() => {
+	}, [B, ze]), jt = useCallback(() => {
 		Ke((e) => (e && ze?.(e.entityId), null));
-	}, [ze]), At = useCallback((e) => B?.entityId === e, [B]), jt = useCallback((e, t, n) => {
+	}, [ze]), Mt = useCallback((e) => B?.entityId === e, [B]), Nt = useCallback((e, t, n) => {
 		let r = L.current;
 		r && r.flyTo({
 			center: e,
 			zoom: t ?? r.getZoom(),
 			...n
 		});
-	}, []), Mt = useCallback((e) => {
+	}, []), Pt = useCallback((e) => {
 		if (e.length === 0) return null;
 		let t = Infinity, n = -Infinity, r = Infinity, i = -Infinity, a = !1;
 		for (let o of e) {
@@ -6428,10 +6428,10 @@ const Mapbox = forwardRef((e, c) => {
 			}
 		}
 		return a ? [(t + n) / 2, (r + i) / 2] : null;
-	}, []), Nt = useCallback((e, t, n) => {
+	}, []), Ft = useCallback((e, t, n) => {
 		let r = L.current;
 		if (!r || e.length === 0) return;
-		let i = Mt(e);
+		let i = Pt(e);
 		if (!i) return;
 		let a = [];
 		for (let t of e) {
@@ -6456,10 +6456,10 @@ const Mapbox = forwardRef((e, c) => {
 			pitch: n?.pitch ?? r.getPitch()
 		};
 		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(() => ({
+	}, [Pt]), It = useRef(null), Lt = useRef("display"), [Rt, zt] = useState({}), J = useMemo(() => ({
 		...y,
-		...It
-	}), [y, It]), Rt = useCallback((e) => {
+		...Rt
+	}), [y, Rt]), Bt = useCallback((e) => {
 		let t = L.current;
 		if (!t || !t.getContainer()) return;
 		let { showMarker: n = !0, markerColor: r = "#3388ff", name: i, nameConfig: a } = J;
@@ -6491,33 +6491,33 @@ const Mapbox = forwardRef((e, c) => {
 				anchor: "bottom"
 			}).setLngLat(e).addTo(t);
 		}
-	}, [J, O]), zt = useCallback(() => {
+	}, [J, O]), Vt = useCallback(() => {
 		at.current &&= (at.current.remove(), null);
-	}, []), Bt = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), Vt = useCallback((e) => {
+	}, []), Ht = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), Ut = useCallback((e) => {
 		let t = L.current;
-		if (He.current) if (vt.current &&= (vt.current.remove(), null), e && t) {
+		if (He.current) if (bt.current &&= (bt.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), vt.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), bt.current = n;
 			let a = (e) => {
-				vt.current && (vt.current.style.left = `${e.clientX}px`, vt.current.style.top = `${e.clientY}px`);
+				bt.current && (bt.current.style.left = `${e.clientX}px`, bt.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 (vt.current) {
-			let e = vt.current._cleanup;
-			e && e(), vt.current.remove(), vt.current = null;
+		if (bt.current) {
+			let e = bt.current._cleanup;
+			e && e(), bt.current.remove(), bt.current = null;
 		}
 		let e = L.current;
 		e && (e.getCanvas().style.cursor = "");
-	}, []), Ht = useCallback((e, t, n) => {
+	}, []), Wt = useCallback((e, t, n) => {
 		if (!e.getSource(t)) {
 			if (!e.getStyle().glyphs) {
 				let t = e.style, n = "/gis-fonts/{fontstack}/{range}.pbf";
@@ -6553,7 +6553,7 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			});
 		}
-	}, []), Ut = useCallback(() => {
+	}, []), Gt = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("rect-preview-source") || (e.addSource("rect-preview-source", {
 			type: "geojson",
@@ -6578,8 +6578,8 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Ht(e, "rect-preview-measure-source", "rect-preview-measure-label")));
-	}, [Ht]), Wt = useCallback((e, t) => {
+		}), Wt(e, "rect-preview-measure-source", "rect-preview-measure-label")));
+	}, [Wt]), Kt = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("rect-preview-source");
@@ -6599,11 +6599,11 @@ const Mapbox = forwardRef((e, c) => {
 			},
 			properties: {}
 		});
-		let l = ut.current, u = l?.strokeColor ?? "#3388ff", d = l?.strokeWidth ?? 2, f = l?.fillColor ?? "#3388ff", p = l?.fillOpacity ?? .1;
+		let l = ft.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 = Un.current, t = [], n = c[0], r = c[1], i = c[2];
+			let e = qn.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({
@@ -6640,7 +6640,7 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), Gt = useCallback(() => {
+	}, []), qt = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("rect-preview-source");
@@ -6654,8 +6654,8 @@ const Mapbox = forwardRef((e, c) => {
 			features: []
 		});
 	}, []), X = useCallback(() => {
-		lt(null), Gt();
-	}, [Gt]), Kt = useCallback(() => {
+		lt(null), qt();
+	}, [qt]), Jt = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("circle-preview-source") || (e.addSource("circle-preview-source", {
 			type: "geojson",
@@ -6680,7 +6680,7 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Ht(e, "circle-preview-measure-source", "circle-preview-measure-label"), e.getSource("circle-preview-radius-source") || (e.addSource("circle-preview-radius-source", {
+		}), Wt(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",
@@ -6697,22 +6697,22 @@ const Mapbox = forwardRef((e, c) => {
 				"line-dasharray": [4, 4]
 			}
 		}))));
-	}, [Ht]), qt = useCallback((e, t, n = 64) => {
+	}, [Wt]), Yt = 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;
-	}, []), Jt = useCallback((e, t) => {
+	}, []), Xt = 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)));
-	}, []), Yt = useCallback((e, t) => {
+	}, []), Zt = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("circle-preview-source");
 		if (!r) return;
-		let i = Jt(e, t), a = qt(e, i);
+		let i = Xt(e, t), a = Yt(e, i);
 		r.setData({
 			type: "Feature",
 			geometry: {
@@ -6723,7 +6723,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 = Un.current, f = [], p = [];
+		let d = qn.current, f = [], p = [];
 		if (d?.showArea) {
 			let t = Math.PI * i * i;
 			f.push({
@@ -6763,7 +6763,7 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: p
 		});
-	}, [Jt, qt]), Xt = useCallback(() => {
+	}, [Xt, Yt]), Qt = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("circle-preview-source");
@@ -6781,9 +6781,9 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Zt = useCallback(() => {
-		ft.current = null, Xt();
-	}, [Xt]), Qt = useCallback(() => {
+	}, []), $t = useCallback(() => {
+		mt.current = null, Qt();
+	}, [Qt]), en = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("polygon-preview-source") || (e.addSource("polygon-preview-source", {
 			type: "geojson",
@@ -6824,8 +6824,8 @@ const Mapbox = forwardRef((e, c) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), Ht(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
-	}, [Ht]), $t = useCallback((e, t) => {
+		}), Wt(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
+	}, [Wt]), tn = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("polygon-preview-source"), i = n.getSource("polygon-vertices-source");
@@ -6867,7 +6867,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 = Un.current, t = [];
+			let e = qn.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];
@@ -6909,7 +6909,7 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), en = useCallback(() => {
+	}, []), nn = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("polygon-preview-source");
@@ -6927,9 +6927,9 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), tn = useCallback(() => {
-		pt.current = [], en();
-	}, [en]), nn = useCallback(() => {
+	}, []), rn = useCallback(() => {
+		ht.current = [], nn();
+	}, [nn]), an = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("square-preview-source") || (e.addSource("square-preview-source", {
 			type: "geojson",
@@ -6954,8 +6954,8 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Ht(e, "square-preview-measure-source", "square-preview-measure-label")));
-	}, [Ht]), rn = useCallback((e, t) => {
+		}), Wt(e, "square-preview-measure-source", "square-preview-measure-label")));
+	}, [Wt]), on = 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],
@@ -6964,12 +6964,12 @@ const Mapbox = forwardRef((e, c) => {
 			[n - s, r - o],
 			[n - s, r + o]
 		];
-	}, []), an = useCallback((e, t) => {
+	}, []), sn = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("square-preview-source");
 		if (!r) return;
-		let i = Jt(e, t) * 2, a = rn(e, i);
+		let i = Xt(e, t) * 2, a = on(e, i);
 		r.setData({
 			type: "Feature",
 			geometry: {
@@ -6978,11 +6978,11 @@ const Mapbox = forwardRef((e, c) => {
 			},
 			properties: {}
 		});
-		let o = mt.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
+		let o = gt.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 = Un.current, n = [];
+			let t = qn.current, n = [];
 			if (t?.showArea && n.push({
 				type: "Feature",
 				geometry: {
@@ -7006,7 +7006,7 @@ const Mapbox = forwardRef((e, c) => {
 				features: n
 			});
 		}
-	}, [Jt, rn]), on = useCallback(() => {
+	}, [Xt, on]), cn = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("square-preview-source");
@@ -7019,9 +7019,9 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), sn = useCallback(() => {
-		ht.current = null, on();
-	}, [on]), cn = useCallback(() => {
+	}, []), ln = useCallback(() => {
+		_t.current = null, cn();
+	}, [cn]), un = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("polyline-preview-source") || (e.addSource("polyline-preview-source", {
 			type: "geojson",
@@ -7054,8 +7054,8 @@ const Mapbox = forwardRef((e, c) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), Ht(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
-	}, [Ht]), ln = useCallback((e, t) => {
+		}), Wt(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
+	}, [Wt]), dn = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("polyline-preview-source"), i = n.getSource("polyline-vertices-source");
@@ -7082,11 +7082,11 @@ const Mapbox = forwardRef((e, c) => {
 				properties: {}
 			}))
 		});
-		let o = gt.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2;
+		let o = vt.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 = Un.current, t = [];
+			let e = qn.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({
@@ -7103,7 +7103,7 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), un = useCallback(() => {
+	}, []), fn = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("polyline-preview-source");
@@ -7122,158 +7122,162 @@ const Mapbox = forwardRef((e, c) => {
 			features: []
 		});
 	}, []), Z = useCallback(() => {
-		_t.current = [], un();
-	}, [un]), dn = useCallback((e) => {
-		H(e), Vt(e), e ? (U("marker"), X(), Zt(), tn(), sn(), Z()) : U(null);
+		yt.current = [], fn();
+	}, [fn]), pn = useCallback((e) => {
+		H(e), Ut(e), e ? (U("marker"), X(), $t(), rn(), ln(), Z()) : U(null);
 	}, [
-		Vt,
+		Ut,
 		X,
-		Zt,
-		tn,
-		sn,
+		$t,
+		rn,
+		ln,
 		Z
-	]), fn = useCallback((e) => {
+	]), mn = useCallback((e) => {
 		if (U(e), e === "rectangle") {
-			H(null), Y(), Zt(), tn(), sn(), Z();
+			H(null), Y(), $t(), rn(), ln(), Z();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "circle") {
-			H(null), Y(), X(), tn(), sn(), Z();
+			H(null), Y(), X(), rn(), ln(), Z();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polygon") {
-			H(null), Y(), X(), Zt(), sn(), Z();
+			H(null), Y(), X(), $t(), ln(), Z();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "square") {
-			H(null), Y(), X(), Zt(), tn(), Z();
+			H(null), Y(), X(), $t(), rn(), Z();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polyline") {
-			H(null), Y(), X(), Zt(), tn(), sn();
+			H(null), Y(), X(), $t(), rn(), ln();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
-		} else e === "marker" ? (X(), Zt(), tn(), sn(), Z()) : (H(null), Y(), X(), Zt(), tn(), sn(), Z());
+		} else e === "marker" ? (X(), $t(), rn(), ln(), Z()) : (H(null), Y(), X(), $t(), rn(), ln(), Z());
 	}, [
 		Y,
 		X,
-		Zt,
-		tn,
-		sn,
+		$t,
+		rn,
+		ln,
 		Z
-	]), pn = useCallback((e) => {
+	]), hn = useCallback((e) => {
 		if (e !== "picker") {
 			let e = J.value && isFinite(J.value.lng) && isFinite(J.value.lat), t = J.showMarker !== !1;
-			(!e || !t) && zt(), it(null);
+			(!e || !t) && Vt(), it(null);
 		}
 		e !== "edit" && (H(null), U(null), X(), Z(), Y()), nt(e);
 	}, [
-		zt,
+		Vt,
 		Y,
 		X,
 		Z
-	]), 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]);
+	]), gn = useCallback(() => V, [V]), _n = useCallback(() => rt, [rt]), vn = useCallback(() => {
+		Vt(), it(null);
+	}, [Vt]), yn = useCallback((e = {}) => (It.current &&= (It.current(null), null), new Promise((t) => {
+		It.current = t, Lt.current = Hn.current, zt(e), hn("picker");
+	})), [hn]);
 	useEffect(() => {
 		if (!et) return;
 		let e = J.value;
 		if (e && isFinite(e.lng) && isFinite(e.lat)) {
 			let t = [e.lng, e.lat];
-			it(e), Rt(t);
+			it(e), Bt(t);
 		}
 	}, [
 		J.value,
-		Rt,
+		Bt,
 		et
 	]);
-	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({
+	let bn = (e) => "mode" in e, xn = useCallback((e, t = !0) => (dt.current &&= (dt.current("cancelled: new drawing started"), ut.current = null, null), new Promise((n, r) => {
+		if (ut.current = n, dt.current = r, t && (Vt(), it(null)), W.current = !0, bn(e)) {
+			if (e.mode === "marker") e.markerStyle ? (pt.current = e.markerStyle, ft.current = null, G.current = null, K.current = null, gt.current = null, vt.current = null, H(null), U("marker"), e.markerStyle.src && e.markerStyle.width ? Ut({
 				id: "custom",
 				name: e.markerStyle.name || "Marker",
 				icon: e.markerStyle.src,
 				width: e.markerStyle.width
-			}) : 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));
+			}) : Y()) : e.template && (pt.current = null, ft.current = null, G.current = null, K.current = null, gt.current = null, vt.current = null, H(e.template), U("marker"), Ut(e.template));
 			else if (e.mode === "rectangle") {
-				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();
+				ft.current = e.rectangleStyle || null, pt.current = null, G.current = null, K.current = null, gt.current = null, vt.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, ut.current = null, dt.current = null, K.current = null, mt.current = null, gt.current = null, H(null), U("circle"), Y();
+				G.current = e.circleStyle || null, ft.current = null, pt.current = null, K.current = null, gt.current = null, vt.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, ut.current = null, dt.current = null, G.current = null, mt.current = null, gt.current = null, H(null), U("polygon"), Y();
+				K.current = e.polygonStyle || null, ft.current = null, pt.current = null, G.current = null, gt.current = null, vt.current = null, H(null), U("polygon"), Y();
 				let t = L.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "square") {
-				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();
+				gt.current = e.squareStyle || null, ft.current = null, pt.current = null, G.current = null, K.current = null, vt.current = null, H(null), U("square"), Y();
 				let t = L.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "polyline") {
-				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();
+				vt.current = e.polylineStyle || null, ft.current = null, pt.current = null, G.current = null, K.current = null, gt.current = null, H(null), U("polyline"), Y();
 				let t = L.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			}
-		} 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;
-	}, [
-		zt,
+		} else H(e), U("marker"), Ut(e), ft.current = null, pt.current = null, G.current = null, K.current = null, gt.current = null, vt.current = null;
+	})), [
 		Vt,
+		Ut,
 		Y
-	]);
+	]), Sn = useCallback((e) => {
+		ut.current && (ut.current(e), ut.current = null, dt.current = null);
+	}, []), Cn = useCallback((e) => {
+		dt.current &&= (dt.current(e), ut.current = null, null);
+	}, []);
 	useImperativeHandle(c, () => ({
-		startAnimation: Ct,
-		stopAnimation: wt,
-		toggleAnimation: Tt,
+		startAnimation: Tt,
+		stopAnimation: Et,
+		toggleAnimation: Dt,
 		getMap: () => L.current,
-		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,
+		openPopup: (e) => kt(e, "programmatic"),
+		closePopup: At,
+		closeAllPopups: jt,
+		isPopupOpen: Mt,
+		toggleUnitTrajectory: Ot,
+		flyTo: Nt,
+		getCenterByIds: Pt,
+		flyToEntities: Ft,
+		getMode: gn,
+		setMode: hn,
+		getPickedLocation: _n,
+		clearPickedLocation: vn,
+		startDrawing: xn,
 		getRenderer: (e) => R.current.get(e),
 		setEditingEntities: (e) => {
-			for (let t of St.current) e.map(String).includes(String(t)) || R.current.get(t)?.setEditing?.(!1);
+			for (let t of wt.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), xt(e);
+			q.current &&= (R.current.get(q.current.entityId)?.cancelEditPreview?.(), null), Ct(e);
 		},
-		getEditingEntities: () => St.current,
-		startPicking: _n,
+		getEditingEntities: () => wt.current,
+		startPicking: yn,
 		startRoutePlanning: (e) => {
 			Ue.current?.startPlanning(e);
 		},
 		getRoadHighlightControl: () => We.current
 	}), [
-		Ct,
-		wt,
 		Tt,
+		Et,
 		Dt,
-		Ot,
 		kt,
 		At,
-		Et,
 		jt,
 		Mt,
+		Ot,
 		Nt,
-		mn,
-		pn,
-		hn,
+		Pt,
+		Ft,
 		gn,
-		yn,
-		_n
+		hn,
+		_n,
+		vn,
+		xn,
+		yn
 	]);
-	let bn = useCallback(() => {
+	let wn = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = new Set(T.map((e) => e.id)), n = new Set(R.current.keys());
@@ -7301,10 +7305,10 @@ const Mapbox = forwardRef((e, c) => {
 			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) : 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));
+				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))), wt.current.map(String).includes(String(n.id)) && t.setEditing?.(!0));
 			}
 		}
-		for (let e of St.current) {
+		for (let e of wt.current) {
 			let t = R.current.get(e);
 			t && t.setEditing?.(!0);
 		}
@@ -7317,10 +7321,10 @@ const Mapbox = forwardRef((e, c) => {
 		j,
 		M,
 		N
-	]), xn = useCallback(() => {
+	]), Tn = useCallback(() => {
 		for (let e of R.current.values()) e.destroy();
 		R.current.clear();
-	}, []), Sn = useCallback((e) => {
+	}, []), En = useCallback((e) => {
 		let t = e.getStyle();
 		if (!t?.layers) return;
 		let n = [
@@ -7336,10 +7340,10 @@ const Mapbox = forwardRef((e, c) => {
 			"attack-direction-"
 		];
 		for (let e of t.layers) if (n.some((t) => e.id.startsWith(t))) return e.id;
-	}, []), Cn = useCallback((e) => {
+	}, []), Dn = 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]), wn = useCallback((e, t) => {
+	}, [C]), On = useCallback((e, t) => {
 		let n = `base-layer-source-${t.id}`, r = `base-layer-${t.id}`, i = {
 			type: "raster",
 			tiles: [t.url],
@@ -7349,19 +7353,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 = Sn(e);
+		let a = En(e);
 		e.addLayer({
 			id: r,
 			type: "raster",
 			source: n,
-			paint: Cn(t),
+			paint: Dn(t),
 			layout: { visibility: t.visible === !1 ? "none" : "visible" }
 		}, a);
-	}, [Sn, Cn]), Tn = useCallback(async (e, t) => {
+	}, [En, Dn]), kn = 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 (!Ge.current.has(t.id)) return;
-			let a = n.format === "pbf" || n.vector_layers, o = Sn(e);
+			let a = n.format === "pbf" || n.vector_layers, o = En(e);
 			if (a) {
 				let t = {
 					type: "vector",
@@ -7382,13 +7386,13 @@ const Mapbox = forwardRef((e, c) => {
 				id: i,
 				type: "raster",
 				source: r,
-				paint: Cn(t),
+				paint: Dn(t),
 				layout: { visibility: t.visible === !1 ? "none" : "visible" }
 			}, o);
 		} catch (e) {
 			console.error(`Failed to load TileJSON from ${t.url}:`, e);
 		}
-	}, [Sn, Cn]), En = useCallback(async (e, t) => {
+	}, [En, Dn]), An = useCallback(async (e, t) => {
 		try {
 			let n = await (await fetch(t.url)).json();
 			if (!Ge.current.has(t.id)) return;
@@ -7396,7 +7400,7 @@ const Mapbox = forwardRef((e, c) => {
 				let n = `base-layer-source-${t.id}-${r}`;
 				e.getSource(n) || e.addSource(n, i);
 			}
-			let r = Sn(e);
+			let r = En(e);
 			if (n.layers) for (let i of n.layers) {
 				let n = `base-layer-${t.id}-${i.id}`;
 				if (e.getLayer(n)) continue;
@@ -7407,7 +7411,7 @@ const Mapbox = forwardRef((e, c) => {
 				};
 				i.type === "raster" && (a.paint = {
 					...a.paint,
-					...Cn(t)
+					...Dn(t)
 				}), t.visible === !1 && (a.layout = {
 					...a.layout,
 					visibility: "none"
@@ -7420,50 +7424,50 @@ const Mapbox = forwardRef((e, c) => {
 		} catch (e) {
 			console.error(`Failed to load Style JSON from ${t.url}:`, e);
 		}
-	}, [Sn, Cn]), Dn = useCallback((e, t) => {
+	}, [En, Dn]), jn = 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);
-	}, []), On = useCallback((e) => {
+	}, []), Mn = useCallback((e) => {
 		let t = L.current;
 		if (!t) return;
 		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 e of r) n.has(e) || (jn(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 = Cn(n);
+				let r = Dn(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":
-				wn(t, n);
+				On(t, n);
 				break;
 			case "tilejson":
-				Tn(t, n);
+				kn(t, n);
 				break;
 			case "style":
-				En(t, n);
+				An(t, n);
 				break;
 			default: {
 				let e = n;
-				e.url && wn(t, {
+				e.url && On(t, {
 					...e,
 					type: "raster"
 				});
 			}
 		}
 	}, [
-		wn,
-		Tn,
-		En,
-		Dn,
-		Cn
-	]), kn = useCallback((e) => {
+		On,
+		kn,
+		An,
+		jn,
+		Dn
+	]), Nn = useCallback((e) => {
 		let t = e;
 		for (; t;) {
 			let e = t.getAttribute?.("data-entity-id");
@@ -7471,140 +7475,140 @@ const Mapbox = forwardRef((e, c) => {
 			t = t.parentElement;
 		}
 		return null;
-	}, []), An = useCallback((e) => {
+	}, []), Pn = useCallback((e) => {
 		let t = [e.lngLat.lng, e.lngLat.lat], n = {
 			x: e.point.x,
 			y: e.point.y
-		}, r = Rn.current;
+		}, r = Hn.current;
 		if (r === "picker") {
 			let e = {
 				lng: t[0],
 				lat: t[1]
 			};
-			it(e), Rt(t), zn.current?.(e), Pt.current && (Pt.current(e), Pt.current = null, Lt({}), zt(), it(null), pn(Ft.current));
+			it(e), Bt(t), Un.current?.(e), It.current && (It.current(e), It.current = null, zt({}), Vt(), it(null), hn(Lt.current));
 			return;
 		}
-		if (yt.current) return;
-		if (r === "edit") {
-			let e = Vn.current;
+		if (xt.current) return;
+		if (r === "edit" || W.current) {
+			let e = Gn.current;
 			if (e === "rectangle") {
-				let e = Hn.current;
+				let e = Kn.current;
 				if (!e) lt(t);
 				else {
-					let n = ut.current, r = applyEntityConfig({
+					let n = ft.current, r = applyEntityConfig({
 						...n,
-						id: n?.id ?? Bt(),
+						id: n?.id ?? Ht(),
 						type: "rectangle",
 						bounds: [e, t]
 					}, D);
-					Gt();
+					qt();
 					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), lt(null), ut.current = null, W.current && (W.current = !1, U(null), i && (i.getCanvas().style.cursor = ""));
+					Q.current.onRectangleAdd?.(r), Sn(r), lt(null), ft.current = null, W.current && (W.current = !1, U(null), i && (i.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "circle") {
-				let e = ft.current;
-				if (!e) ft.current = { center: t };
+				let e = mt.current;
+				if (!e) mt.current = { center: t };
 				else {
-					let n = Jt(e.center, t), r = G.current, i = applyEntityConfig({
+					let n = Xt(e.center, t), r = G.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? Bt(),
+						id: r?.id ?? Ht(),
 						type: "circle",
 						center: e.center,
 						radius: n
 					}, D);
-					Xt();
+					Qt();
 					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), ft.current = null, G.current = null, W.current && (W.current = !1, U(null), a && (a.getCanvas().style.cursor = ""));
+					Q.current.onCircleAdd?.(i), Sn(i), mt.current = null, G.current = null, W.current && (W.current = !1, U(null), a && (a.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "polygon") {
-				let e = pt.current;
+				let e = ht.current;
 				if (e.length >= 3) {
 					let n = e[0];
-					if (Jt(n, t) < 20) {
+					if (Xt(n, t) < 20) {
 						let t = K.current, n = applyEntityConfig({
 							...t,
-							id: t?.id ?? Bt(),
+							id: t?.id ?? Ht(),
 							type: "polygon",
 							coordinates: [...e]
 						}, D);
-						en();
+						nn();
 						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), pt.current = [], K.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
+						Q.current.onPolygonAdd?.(n), Sn(n), ht.current = [], K.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
 						return;
 					}
 				}
-				pt.current = [...e, t];
+				ht.current = [...e, t];
 				return;
 			}
 			if (e === "square") {
-				let e = ht.current;
-				if (!e) ht.current = { center: t };
+				let e = _t.current;
+				if (!e) _t.current = { center: t };
 				else {
-					let n = Jt(e.center, t) * 2, r = mt.current, i = applyEntityConfig({
+					let n = Xt(e.center, t) * 2, r = gt.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? Bt(),
+						id: r?.id ?? Ht(),
 						type: "square",
 						center: e.center,
 						length: n
 					}, D);
-					on();
+					cn();
 					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), ht.current = null, mt.current = null, W.current && (W.current = !1, U(null), a && (a.getCanvas().style.cursor = ""));
+					Q.current.onSquareAdd?.(i), Sn(i), _t.current = null, gt.current = null, W.current && (W.current = !1, U(null), a && (a.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "polyline") {
-				_t.current = [..._t.current, t];
+				yt.current = [...yt.current, t];
 				return;
 			}
-			let n = dt.current;
+			let n = pt.current;
 			if (n && n.src && n.width) {
 				let e = {
 					...n,
-					id: n.id ?? Bt(),
+					id: n.id ?? Ht(),
 					type: "marker",
 					center: t,
 					src: n.src,
 					width: n.width
 				};
-				Q.current.onMarkerAdd?.(e), H(null), U(null), Y(), dt.current = null, W.current = !1;
+				Q.current.onMarkerAdd?.(e), Sn(e), H(null), U(null), Y(), pt.current = null, W.current = !1;
 				return;
 			}
-			let r = Bn.current;
+			let r = Wn.current;
 			if (r) {
 				let e = {
-					id: Bt(),
+					id: Ht(),
 					type: "marker",
 					name: r.name,
 					center: t,
 					src: r.icon,
 					width: r.size || r.width || 32
 				};
-				r.customData !== void 0 && (e.customData = r.customData), Q.current.onMarkerAdd?.(e), H(null), U(null), Y(), W.current = !1;
+				r.customData !== void 0 && (e.customData = r.customData), Q.current.onMarkerAdd?.(e), Sn(e), H(null), U(null), Y(), W.current = !1;
 				return;
 			}
 		}
-		if (St.current.length > 0) {
+		if (wt.current.length > 0) {
 			let e = L.current?.getZoom() ?? 12;
 			if (q.current) {
 				let { entityId: e, activeHandle: n } = q.current, r = R.current.get(e);
@@ -7615,7 +7619,7 @@ const Mapbox = forwardRef((e, c) => {
 				q.current = null;
 				return;
 			}
-			for (let n of St.current) {
+			for (let n of wt.current) {
 				let r = R.current.get(n);
 				if (!r?.getEditHandleAt) continue;
 				let i = r.getEditHandleAt(t, e);
@@ -7638,7 +7642,7 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}
 		}
-		let i = Fn.current, a = In.current, o = Ln.current, s = kn(e.originalEvent.target);
+		let i = zn.current, a = Bn.current, o = Vn.current, s = Nn(e.originalEvent.target);
 		if (s) {
 			let e = i.find((e) => String(e.id) === s);
 			if (e) {
@@ -7675,25 +7679,25 @@ const Mapbox = forwardRef((e, c) => {
 	}, [
 		I,
 		Fe,
-		kn
-	]), jn = useCallback((e) => {
+		Nn
+	]), Fn = 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 = 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;
+		let n = Gn.current, r = Kn.current;
+		n === "rectangle" && r && Kt(r, t);
+		let i = mt.current;
+		n === "circle" && i && Zt(i.center, t);
+		let a = ht.current;
+		n === "polygon" && a.length > 0 && tn(a, t);
+		let o = _t.current;
+		n === "square" && o && sn(o.center, t);
+		let s = yt.current;
+		n === "polyline" && s.length > 0 && dn(s, t);
+		let c = zn.current, l = Vn.current;
 		for (let [e, n] of R.current) if (n.isPointInEntity(t)) {
 			let t = c.find((t) => t.id === e);
 			if (!t?.popup) continue;
@@ -7709,32 +7713,32 @@ const Mapbox = forwardRef((e, c) => {
 		}
 		if (Ye.current &&= (clearTimeout(Ye.current), null), B?.openedBy === "hover") {
 			let e = R.current.get(B.entityId);
-			e && !e.isPointInEntity(t) && Ot(B.entityId);
+			e && !e.isPointInEntity(t) && At(B.entityId);
 		}
 	}, [
 		I,
 		Fe,
 		B,
-		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);
+		At,
+		Kt,
+		Zt,
+		tn,
+		sn,
+		dn
+	]), In = useCallback((e) => {
+		if (e.preventDefault(), It.current) {
+			It.current(null), It.current = null, zt({}), Vt(), it(null), hn(Lt.current);
 			return;
 		}
-		if (yt.current) return;
-		if (St.current.length > 0) {
+		if (xt.current) return;
+		if (wt.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 St.current) {
+			for (let e of wt.current) {
 				let r = R.current.get(e);
 				if (!r?.getEditHandleAt || !r.deleteVertex) continue;
 				let i = r.getEditHandleAt(t, n);
@@ -7745,14 +7749,13 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}
 		}
-		if (Rn.current !== "edit") return;
-		if (Bn.current) {
+		if (Wn.current) {
 			H(null), U(null), Y();
 			return;
 		}
-		let t = Vn.current;
+		let t = Gn.current;
 		if (t === "rectangle") {
-			if (Hn.current) lt(null), Gt();
+			if (Kn.current) lt(null), qt();
 			else {
 				U(null);
 				let e = L.current;
@@ -7761,7 +7764,7 @@ const Mapbox = forwardRef((e, c) => {
 			return;
 		}
 		if (t === "circle") {
-			if (ft.current) ft.current = null, Xt();
+			if (mt.current) mt.current = null, Qt();
 			else {
 				U(null);
 				let e = L.current;
@@ -7770,22 +7773,22 @@ const Mapbox = forwardRef((e, c) => {
 			return;
 		}
 		if (t === "polygon") {
-			let e = pt.current;
+			let e = ht.current;
 			if (e.length >= 3) {
 				let t = K.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? Bt(),
+					id: t?.id ?? Ht(),
 					type: "polygon",
 					coordinates: [...e]
 				}, D);
-				en();
+				nn();
 				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), 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();
+				Q.current.onPolygonAdd?.(n), Sn(n), ht.current = [], K.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
+			} else if (e.length > 0) W.current &&= (Cn("cancelled: insufficient points for polygon"), !1), ht.current = [], nn();
 			else {
 				U(null);
 				let e = L.current;
@@ -7794,7 +7797,7 @@ const Mapbox = forwardRef((e, c) => {
 			return;
 		}
 		if (t === "square") {
-			if (ht.current) ht.current = null, on();
+			if (_t.current) _t.current = null, cn();
 			else {
 				U(null);
 				let e = L.current;
@@ -7803,22 +7806,22 @@ const Mapbox = forwardRef((e, c) => {
 			return;
 		}
 		if (t === "polyline") {
-			let e = _t.current;
+			let e = yt.current;
 			if (e.length >= 2) {
-				let t = gt.current, n = applyEntityConfig({
+				let t = vt.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? Bt(),
+					id: t?.id ?? Ht(),
 					type: "polyline",
 					coordinates: [...e]
 				}, D);
-				un();
+				fn();
 				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), _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();
+				Q.current.onPolylineAdd?.(n), Sn(n), yt.current = [], vt.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
+			} else if (e.length > 0) W.current &&= (Cn("cancelled: insufficient points for polyline"), !1), yt.current = [], fn();
 			else {
 				U(null);
 				let e = L.current;
@@ -7829,11 +7832,11 @@ const Mapbox = forwardRef((e, c) => {
 		let n = [e.lngLat.lng, e.lngLat.lat], r = {
 			x: e.point.x,
 			y: e.point.y
-		}, i = Fn.current, a = kn(e.originalEvent.target);
+		}, i = zn.current, a = Nn(e.originalEvent.target);
 		if (a) {
 			let e = i.find((e) => String(e.id) === a);
 			if (e) {
-				Nn(e, r, n);
+				Ln(e, r, n);
 				return;
 			}
 		}
@@ -7842,7 +7845,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) {
-					Nn(e, r, n);
+					Ln(e, r, n);
 					return;
 				}
 			}
@@ -7850,19 +7853,19 @@ 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) {
-				Nn(t, r, n);
+				Ln(t, r, n);
 				return;
 			}
 		}
 	}, [
-		kn,
+		Nn,
 		Y,
-		Gt,
-		Xt,
-		en,
-		on,
-		un
-	]), Nn = useCallback((e, t, n) => {
+		qt,
+		Qt,
+		nn,
+		cn,
+		fn
+	]), Ln = useCallback((e, t, n) => {
 		let r = He.current?.getBoundingClientRect(), i = r ? {
 			x: t.x + r.left,
 			y: t.y + r.top
@@ -7887,7 +7890,7 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}]
 		});
-	}, []), Pn = useCallback(() => {
+	}, []), Rn = useCallback(() => {
 		Ze(null);
 	}, []);
 	useEffect(() => {
@@ -7917,57 +7920,57 @@ const Mapbox = forwardRef((e, c) => {
 			document.body.contains(e) && document.body.removeChild(e);
 		};
 	}, [I?.zIndex]);
-	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 zn = useRef(T);
+	zn.current = T;
+	let Bn = useRef(Le);
+	Bn.current = Le;
+	let Vn = useRef(kt);
+	Vn.current = kt;
+	let Hn = useRef(V);
+	Hn.current = V;
+	let Un = useRef(b);
+	Un.current = b;
+	let Wn = useRef(ot);
+	Wn.current = ot;
+	let Gn = useRef(st);
+	Gn.current = st;
+	let Kn = useRef(ct);
+	Kn.current = ct;
 	let Q = useRef(v);
 	Q.current = v;
-	let Un = useRef(D);
-	Un.current = D, useEffect(() => {
+	let qn = useRef(D);
+	qn.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 (ot && (H(null), U(null), Y()), st === "rectangle") if (ct) lt(null), Gt();
+			if (e.key === "Escape" && (V === "edit" || W.current)) {
+				if (W.current &&= (Cn("cancelled: escape"), !1), ot && (H(null), U(null), Y()), st === "rectangle") if (ct) lt(null), qt();
 				else {
 					U(null);
 					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (st === "circle") if (ft.current) ft.current = null, Xt();
+				if (st === "circle") if (mt.current) mt.current = null, Qt();
 				else {
 					U(null);
 					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (st === "polygon") if (pt.current.length > 0) pt.current = [], en();
+				if (st === "polygon") if (ht.current.length > 0) ht.current = [], nn();
 				else {
 					U(null);
 					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (st === "square") if (ht.current) ht.current = null, on();
+				if (st === "square") if (_t.current) _t.current = null, cn();
 				else {
 					U(null);
 					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (st === "polyline") if (_t.current.length > 0) _t.current = [], un();
+				if (st === "polyline") if (yt.current.length > 0) yt.current = [], fn();
 				else {
 					U(null);
 					let e = L.current;
@@ -7984,18 +7987,19 @@ const Mapbox = forwardRef((e, c) => {
 		st,
 		ct,
 		Y,
-		Gt,
-		Xt,
-		en,
-		on,
-		un
+		qt,
+		Qt,
+		nn,
+		cn,
+		fn,
+		Cn
 	]), useEffect(() => {
 		let e = L.current;
 		if (!e || !B) return;
 		let t = B.entityId, n = B.config, r = () => {
-			let r = Fn.current.find((e) => e.id === t);
+			let r = zn.current.find((e) => e.id === t);
 			if (!r) {
-				kt();
+				jt();
 				return;
 			}
 			let { position: i } = calculatePopupPosition(r, n, e, void 0, Je.current);
@@ -8006,13 +8010,13 @@ const Mapbox = forwardRef((e, c) => {
 		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, kt]), useEffect(() => {
+	}, [B?.entityId, jt]), 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) {
-				Pn();
+				Rn();
 				return;
 			}
 			let o = t.getBoundingClientRect(), s = r.x + o.left, c = r.y + o.top;
@@ -8021,7 +8025,7 @@ const Mapbox = forwardRef((e, c) => {
 		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);
 		};
-	}, [Xe?.lngLat, Pn]), useEffect(() => {
+	}, [Xe?.lngLat, Rn]), useEffect(() => {
 		if (!He.current) return;
 		let e = {
 			version: 8,
@@ -8062,9 +8066,9 @@ const Mapbox = forwardRef((e, c) => {
 			}
 			z.current.clear(), T.forEach((e) => {
 				z.current.set(e.id, e);
-			}), 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;
+			}), Mn(S), wn(), Gt(), Jt(), en(), an(), un(), tt(_), Ie?.(_);
+		}), _.on("click", Pn), _.on("mousemove", Fn), _.on("contextmenu", In), () => {
+			_.off("click", Pn), _.off("mousemove", Fn), _.off("contextmenu", In), Tn(), Vt(), Y(), X(), Z(), _.remove(), L.current = null;
 		};
 	}, []), useEffect(() => {
 		if (L.current) {
@@ -8072,53 +8076,53 @@ const Mapbox = forwardRef((e, c) => {
 				L.current.once("load", () => {
 					z.current.clear(), T.forEach((e) => {
 						z.current.set(e.id, e);
-					}), bn();
+					}), wn();
 				});
 				return;
 			}
 			z.current.clear(), T.forEach((e) => {
 				z.current.set(e.id, e);
-			}), bn();
+			}), wn();
 		}
-	}, [T, bn]), useEffect(() => {
-		!L.current || !L.current.isStyleLoaded() || (xn(), bn());
+	}, [T, wn]), useEffect(() => {
+		!L.current || !L.current.isStyleLoaded() || (Tn(), wn());
 	}, [
 		O,
 		k,
 		j,
 		M,
 		N,
-		xn,
-		bn
+		Tn,
+		wn
 	]), useEffect(() => {
 		if (L.current) {
 			if (!L.current.isStyleLoaded()) {
 				L.current.once("load", () => {
-					On(S);
+					Mn(S);
 				});
 				return;
 			}
-			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(() => {
+			Mn(S);
+		}
+	}, [S, Mn]);
+	let Jn = useRef(void 0), Yn = useRef(!0), Xn = useRef(S);
+	Xn.current = S;
+	let Zn = useRef(Mn);
+	Zn.current = Mn;
+	let Qn = useRef(Tn);
+	Qn.current = Tn;
+	let $n = useRef(wn);
+	$n.current = wn;
+	let er = useRef(Gt);
+	er.current = Gt;
+	let tr = useRef(Jt);
+	tr.current = Jt;
+	let nr = useRef(en);
+	nr.current = en;
+	let rr = useRef(an);
+	rr.current = an;
+	let ir = useRef(un);
+	ir.current = un, useEffect(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = p || {
@@ -8126,27 +8130,27 @@ const Mapbox = forwardRef((e, c) => {
 			sources: {},
 			layers: []
 		};
-		if (Gn.current) {
-			Gn.current = !1, Wn.current = p;
+		if (Yn.current) {
+			Yn.current = !1, Jn.current = p;
 			return;
 		}
-		Wn.current !== p && (Wn.current = p, e.setStyle(t), e.once("style.load", () => {
+		Jn.current !== p && (Jn.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);
 			}
-			Ge.current.clear(), qn.current(Kn.current), Jn.current(), Yn.current(), Xn.current(), Zn.current(), Qn.current(), $n.current(), er.current();
+			Ge.current.clear(), Zn.current(Xn.current), Qn.current(), $n.current(), er.current(), tr.current(), nr.current(), rr.current(), ir.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 tr = useRef({});
+	let ar = useRef({});
 	useEffect(() => {
 		let e = L.current;
 		if (!e) return;
-		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 = {
+		let t = ar.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 || (ar.current = {
 			center: l,
 			zoom: u,
 			pitch: d,
@@ -8163,7 +8167,7 @@ const Mapbox = forwardRef((e, c) => {
 		d,
 		f
 	]);
-	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)(), $ = (() => {
+	let or = (() => we === !1 ? null : we === !0 ? { enabled: !0 } : we)(), sr = (() => P === !1 ? null : P === !0 ? { enabled: !0 } : P)(), cr = (() => Te === !1 ? null : Te === !0 ? { enabled: !0 } : Te)(), $ = (() => {
 		if (Ee === !1) return null;
 		let e, t, n;
 		if (S && S.length > 0) {
@@ -8188,7 +8192,7 @@ const Mapbox = forwardRef((e, c) => {
 			sourceLayer: Ee.sourceLayer || t,
 			classField: Ee.classField || n
 		};
-	})(), ar = (() => F ? F === !0 ? { enabled: !0 } : F : null)(), or = (() => Oe ? Oe === !0 ? { enabled: !0 } : Oe : null)(), sr = (() => Me || null)(), cr = useMemo(() => {
+	})(), lr = (() => F ? F === !0 ? { enabled: !0 } : F : null)(), ur = (() => Oe ? Oe === !0 ? { enabled: !0 } : Oe : null)(), dr = (() => Me || null)(), fr = useMemo(() => {
 		let e = [];
 		for (let t of S) if (t.applyRasterPaint) if (t.type === "style") {
 			let n = L.current;
@@ -8198,7 +8202,7 @@ const Mapbox = forwardRef((e, c) => {
 			}
 		} else e.push(`base-layer-${t.id}`);
 		return e;
-	}, [S, et]), lr = useMemo(() => {
+	}, [S, et]), pr = useMemo(() => {
 		if (V !== "picker") return;
 		let e = J.cursorImage;
 		if (!e) return;
@@ -8233,13 +8237,13 @@ const Mapbox = forwardRef((e, c) => {
 				break;
 		}
 		return `url(${e.url}) ${i} ${a}, crosshair`;
-	}, [V, J.cursorImage]), ur = useMemo(() => lr ? {
+	}, [V, J.cursorImage]), mr = useMemo(() => pr ? {
 		...Ve,
-		"--mapbox-picker-cursor": lr
-	} : Ve, [Ve, lr]);
+		"--mapbox-picker-cursor": pr
+	} : Ve, [Ve, pr]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: `comp-mapbox ${V === "picker" ? "comp-mapbox--picker-mode" : ""} ${Be}`,
-		style: ur,
+		style: mr,
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				ref: He,
@@ -8256,14 +8260,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 || sr && sr.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 || dr && dr.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: ot,
-						onTemplateSelect: dn,
+						onTemplateSelect: pn,
 						drawMode: st,
-						onDrawModeChange: fn,
+						onDrawModeChange: mn,
 						showRectangleTool: v.showRectangleTool,
 						showCircleTool: v.showCircleTool,
 						showPolygonTool: v.showPolygonTool,
@@ -8283,75 +8287,75 @@ const Mapbox = forwardRef((e, c) => {
 						className: $?.className,
 						style: $?.style
 					}),
-					sr && sr.enabled !== !1 && /* @__PURE__ */ jsx(RoutePlanningControl, {
+					dr && dr.enabled !== !1 && /* @__PURE__ */ jsx(RoutePlanningControl, {
 						ref: Ue,
 						map: et,
-						pointCount: sr.pointCount,
-						showPointCountInput: sr.showPointCountInput,
-						visualType: sr.visualType,
-						onSelectFinished: sr.onSelectFinished
+						pointCount: dr.pointCount,
+						showPointCountInput: dr.showPointCountInput,
+						visualType: dr.visualType,
+						onSelectFinished: dr.onSelectFinished
 					})
 				]
 			}),
-			(nr?.enabled !== !1 || rr?.enabled !== !1 || ir?.enabled !== !1 || ar && ar.enabled !== !1 || or && or.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
+			(or?.enabled !== !1 || sr?.enabled !== !1 || cr?.enabled !== !1 || lr && lr.enabled !== !1 || ur && ur.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__controls",
 				children: [
-					nr && nr.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
+					or && or.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
 						map: et,
-						precision: nr.precision,
-						className: nr.className,
-						style: nr.style
+						precision: or.precision,
+						className: or.className,
+						style: or.style
 					}),
-					rr && rr.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
+					sr && sr.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
 						map: et,
-						maxWidth: rr.maxWidth,
-						unit: rr.unit,
-						className: rr.className,
-						style: rr.style
+						maxWidth: sr.maxWidth,
+						unit: sr.unit,
+						className: sr.className,
+						style: sr.style
 					}),
-					ar && ar.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
+					lr && lr.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
 						map: et,
 						entityConfig: D,
 						onDrawModeChange: (e) => {
-							yt.current = e;
+							xt.current = e;
 						},
-						className: ar.className,
-						style: ar.style
+						className: lr.className,
+						style: lr.style
 					}),
-					or && or.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
+					ur && ur.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
 						map: et,
 						value: C,
 						onChange: Ne,
-						rasterPaintLayerIds: cr,
-						className: or.className,
-						style: or.style
+						rasterPaintLayerIds: fr,
+						className: ur.className,
+						style: ur.style
 					}),
-					ir && ir.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
+					cr && cr.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
 						map: et,
 						initialCenter: l,
 						initialZoom: u,
 						initialPitch: d,
 						initialBearing: f,
-						duration: ir.duration,
-						className: ir.className,
-						style: ir.style
+						duration: cr.duration,
+						className: cr.className,
+						style: cr.style
 					})
 				]
 			}),
-			!(sr && sr.enabled !== !1) && /* @__PURE__ */ jsx(RoutePlanningControl, {
+			!(dr && dr.enabled !== !1) && /* @__PURE__ */ jsx(RoutePlanningControl, {
 				ref: Ue,
 				map: et,
 				showButton: !1
 			}),
 			B && qe.current && /* @__PURE__ */ jsx(EntityPopup, {
 				popupState: B,
-				onClose: () => Ot(B.entityId),
+				onClose: () => At(B.entityId),
 				portalContainer: qe.current,
 				popupRef: Je
 			}),
 			Xe && Qe.current && /* @__PURE__ */ jsx(ContextMenu, {
 				menuState: Xe,
-				onClose: Pn,
+				onClose: Rn,
 				portalContainer: Qe.current,
 				menuRef: $e
 			})