bbl-mapbox-react 0.0.25 → 0.0.27

package/dist/index.mjs

@@ -5937,11 +5937,11 @@ 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: M, circleConfig: N, lengthConfig: P, showCoordinates: Se = !0, showScale: F = !0, showResetView: Ce = !0, showRoadHighlight: we = !1, showMeasure: I = !1, showRasterPaint: Ee = !1, showRoutePlanning: Ae, onRasterPaintChange: je, popupDefaults: L, renderPopup: Ne, onMapLoad: Pe, onEntityClick: Fe, onPopupOpen: Ie, onPopupClose: Le, className: Re = "", containerStyle: ze } = e, Be = useRef(null), Ve = useRef(null), He = useRef(null), R = useRef(null), z = useRef(/* @__PURE__ */ new Map()), B = useRef(/* @__PURE__ */ new Map()), Ue = useRef(/* @__PURE__ */ new Set()), [V, We] = useState(null), Ge = useRef(null), Ke = useRef(null), qe = useRef(null), [Je, Ye] = useState(null), Xe = useRef(null), Ze = useRef(null), [H, Qe] = useState(null), [$e, et] = useState(_), [tt, nt] = useState(null), rt = useRef(null), [it, U] = useState(null), [at, W] = useState(null), [ot, st] = useState(null), G = useRef(!1), ct = useRef(null), lt = useRef(null), K = useRef(null), ut = useRef(null), q = useRef(null), dt = useRef([]), ft = useRef(null), pt = useRef(null), mt = useRef(null), ht = useRef([]), gt = useRef(null), _t = useRef(!1), [vt, yt] = useState([]), bt = useRef([]);
+	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: M, circleConfig: N, lengthConfig: P, showCoordinates: Se = !0, showScale: F = !0, showResetView: Ce = !0, showRoadHighlight: we = !1, showMeasure: I = !1, showRasterPaint: Ee = !1, showRoutePlanning: Ae, onRasterPaintChange: je, popupDefaults: L, renderPopup: Ne, onMapLoad: Pe, onEntityClick: Fe, onPopupOpen: Ie, onPopupClose: Le, className: Re = "", containerStyle: ze } = e, Be = useRef(null), Ve = useRef(null), He = useRef(null), R = useRef(null), z = useRef(/* @__PURE__ */ new Map()), B = useRef(/* @__PURE__ */ new Map()), Ue = useRef(/* @__PURE__ */ new Set()), [V, We] = useState(null), Ge = useRef(null), Ke = useRef(null), qe = useRef(null), [Je, Ye] = useState(null), Xe = useRef(null), Ze = useRef(null), [Qe, $e] = useState(null), [et, tt] = useState(_), [nt, rt] = useState(null), it = useRef(null), [at, H] = useState(null), [ot, U] = useState(null), [st, ct] = useState(null), W = useRef(!1), G = useRef(null), lt = useRef(null), K = useRef(null), ut = useRef(null), q = useRef(null), dt = useRef([]), ft = useRef(null), pt = useRef(null), mt = useRef(null), ht = useRef([]), gt = useRef(null), _t = useRef(!1), [vt, yt] = useState([]), bt = useRef([]);
 	bt.current = vt;
 	let J = useRef(null);
 	useEffect(() => {
-		et(_);
+		tt(_);
 	}, [_]);
 	let xt = useCallback((e) => {
 		let t = z.current.get(e), n = B.current.get(e);
@@ -6057,12 +6057,12 @@ const Mapbox = forwardRef((e, c) => {
 		if (!t || !t.getContainer()) return;
 		let { showMarker: n = !0, markerColor: r = "#3388ff", name: i, nameConfig: a } = y;
 		if (!n) {
-			rt.current &&= (rt.current.remove(), null);
+			it.current &&= (it.current.remove(), null);
 			return;
 		}
-		if (rt.current) {
-			rt.current.setLngLat(e);
-			let t = rt.current.getElement(), n = t.querySelector(".marker-label");
+		if (it.current) {
+			it.current.setLngLat(e);
+			let t = it.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`;
@@ -6079,13 +6079,13 @@ 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);
 			}
-			rt.current = new mapboxgl.Marker({
+			it.current = new mapboxgl.Marker({
 				element: n,
 				anchor: "bottom"
 			}).setLngLat(e).addTo(t);
 		}
 	}, [y, O]), Mt = useCallback(() => {
-		rt.current &&= (rt.current.remove(), null);
+		it.current &&= (it.current.remove(), null);
 	}, []), Nt = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), Pt = useCallback((e) => {
 		let t = R.current;
 		if (Be.current) if (gt.current &&= (gt.current.remove(), null), e && t) {
@@ -6192,11 +6192,11 @@ const Mapbox = forwardRef((e, c) => {
 			},
 			properties: {}
 		});
-		let l = ct.current, u = l?.strokeColor ?? "#3388ff", d = l?.strokeWidth ?? 2, f = l?.fillColor ?? "#3388ff", p = l?.fillOpacity ?? .1;
+		let l = G.current, u = l?.strokeColor ?? "#3388ff", d = l?.strokeWidth ?? 2, f = l?.fillColor ?? "#3388ff", p = l?.fillOpacity ?? .1;
 		n.getLayer("rect-preview-line") && (n.setPaintProperty("rect-preview-line", "line-color", u), n.setPaintProperty("rect-preview-line", "line-width", d)), n.getLayer("rect-preview-fill") && (n.setPaintProperty("rect-preview-fill", "fill-color", f), n.setPaintProperty("rect-preview-fill", "fill-opacity", p));
 		let m = n.getSource("rect-preview-measure-source");
 		if (m) {
-			let e = Fn.current, t = [], n = c[0], r = c[1], i = c[2];
+			let e = zn.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({
@@ -6247,7 +6247,7 @@ const Mapbox = forwardRef((e, c) => {
 			features: []
 		});
 	}, []), X = useCallback(() => {
-		st(null), Rt();
+		ct(null), Rt();
 	}, [Rt]), zt = useCallback(() => {
 		let e = R.current;
 		e && (e.getSource("circle-preview-source") || (e.addSource("circle-preview-source", {
@@ -6316,7 +6316,7 @@ const Mapbox = forwardRef((e, c) => {
 		});
 		let o = K.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
 		n.getLayer("circle-preview-line") && (n.setPaintProperty("circle-preview-line", "line-color", s), n.setPaintProperty("circle-preview-line", "line-width", c)), n.getLayer("circle-preview-fill") && (n.setPaintProperty("circle-preview-fill", "fill-color", l), n.setPaintProperty("circle-preview-fill", "fill-opacity", u));
-		let d = Fn.current, f = [], p = [];
+		let d = zn.current, f = [], p = [];
 		if (d?.showArea) {
 			let t = Math.PI * i * i;
 			f.push({
@@ -6460,7 +6460,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 = Fn.current, t = [];
+			let e = zn.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];
@@ -6575,7 +6575,7 @@ const Mapbox = forwardRef((e, c) => {
 		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 = Fn.current, n = [];
+			let t = zn.current, n = [];
 			if (t?.showArea && n.push({
 				type: "Feature",
 				geometry: {
@@ -6679,7 +6679,7 @@ const Mapbox = forwardRef((e, c) => {
 		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 = Fn.current, t = [];
+			let e = zn.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({
@@ -6717,7 +6717,7 @@ const Mapbox = forwardRef((e, c) => {
 	}, []), Z = useCallback(() => {
 		ht.current = [], nn();
 	}, [nn]), rn = useCallback((e) => {
-		U(e), Pt(e), e ? (W("marker"), X(), Wt(), Jt(), $t(), Z()) : W(null);
+		H(e), Pt(e), e ? (U("marker"), X(), Wt(), Jt(), $t(), Z()) : U(null);
 	}, [
 		Pt,
 		X,
@@ -6726,27 +6726,27 @@ const Mapbox = forwardRef((e, c) => {
 		$t,
 		Z
 	]), an = useCallback((e) => {
-		if (W(e), e === "rectangle") {
-			U(null), Y(), Wt(), Jt(), $t(), Z();
+		if (U(e), e === "rectangle") {
+			H(null), Y(), Wt(), Jt(), $t(), Z();
 			let e = R.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "circle") {
-			U(null), Y(), X(), Jt(), $t(), Z();
+			H(null), Y(), X(), Jt(), $t(), Z();
 			let e = R.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polygon") {
-			U(null), Y(), X(), Wt(), $t(), Z();
+			H(null), Y(), X(), Wt(), $t(), Z();
 			let e = R.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "square") {
-			U(null), Y(), X(), Wt(), Jt(), Z();
+			H(null), Y(), X(), Wt(), Jt(), Z();
 			let e = R.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polyline") {
-			U(null), Y(), X(), Wt(), Jt(), $t();
+			H(null), Y(), X(), Wt(), Jt(), $t();
 			let e = R.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
-		} else e === "marker" ? (X(), Wt(), Jt(), $t(), Z()) : (U(null), Y(), X(), Wt(), Jt(), $t(), Z());
+		} else e === "marker" ? (X(), Wt(), Jt(), $t(), Z()) : (H(null), Y(), X(), Wt(), Jt(), $t(), Z());
 	}, [
 		Y,
 		X,
@@ -6757,59 +6757,61 @@ const Mapbox = forwardRef((e, c) => {
 	]), on = useCallback((e) => {
 		if (e !== "picker") {
 			let e = y.value && isFinite(y.value.lng) && isFinite(y.value.lat), t = y.showMarker !== !1;
-			(!e || !t) && Mt(), nt(null);
+			(!e || !t) && Mt(), rt(null);
 		}
-		e !== "edit" && (U(null), W(null), X(), Z(), Y()), et(e);
+		e !== "edit" && (H(null), U(null), X(), Z(), Y()), tt(e);
 	}, [
 		Mt,
 		Y,
 		X,
 		Z
-	]), sn = useCallback(() => $e, [$e]), cn = useCallback(() => tt, [tt]), ln = useCallback(() => {
-		Mt(), nt(null);
-	}, [Mt]);
+	]), sn = useCallback(() => et, [et]), cn = useCallback(() => nt, [nt]), ln = useCallback(() => {
+		Mt(), rt(null);
+	}, [Mt]), un = useRef(null), dn = useRef("display"), fn = useRef({}), pn = useCallback((e = {}) => (un.current &&= (un.current(null), null), new Promise((t) => {
+		un.current = t, dn.current = Pn.current, fn.current = e, on("picker");
+	})), [on]);
 	useEffect(() => {
-		if (!H) return;
+		if (!Qe) return;
 		let e = y.value;
 		if (e && isFinite(e.lng) && isFinite(e.lat)) {
 			let t = [e.lng, e.lat];
-			nt(e), jt(t);
+			rt(e), jt(t);
 		}
 	}, [
 		y.value,
 		jt,
-		H
+		Qe
 	]);
-	let un = (e) => "mode" in e, dn = useCallback((e) => {
-		if (et("edit"), Mt(), nt(null), G.current = !0, un(e)) {
-			if (e.mode === "marker") e.markerStyle ? (lt.current = e.markerStyle, ct.current = null, K.current = null, q.current = null, ft.current = null, mt.current = null, U(null), W("marker"), e.markerStyle.src && e.markerStyle.width ? Pt({
+	let mn = (e) => "mode" in e, hn = useCallback((e, t = !0) => {
+		if (tt("edit"), t && (Mt(), rt(null)), W.current = !0, mn(e)) {
+			if (e.mode === "marker") e.markerStyle ? (lt.current = e.markerStyle, G.current = null, K.current = null, q.current = null, ft.current = null, mt.current = null, H(null), U("marker"), e.markerStyle.src && e.markerStyle.width ? Pt({
 				id: "custom",
 				name: e.markerStyle.name || "Marker",
 				icon: e.markerStyle.src,
 				width: e.markerStyle.width
-			}) : Y()) : e.template && (lt.current = null, ct.current = null, K.current = null, q.current = null, ft.current = null, mt.current = null, U(e.template), W("marker"), Pt(e.template));
+			}) : Y()) : e.template && (lt.current = null, G.current = null, K.current = null, q.current = null, ft.current = null, mt.current = null, H(e.template), U("marker"), Pt(e.template));
 			else if (e.mode === "rectangle") {
-				ct.current = e.rectangleStyle || null, lt.current = null, K.current = null, q.current = null, ft.current = null, mt.current = null, U(null), W("rectangle"), Y();
+				G.current = e.rectangleStyle || null, lt.current = null, K.current = null, q.current = null, ft.current = null, mt.current = null, H(null), U("rectangle"), Y();
 				let t = R.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "circle") {
-				K.current = e.circleStyle || null, ct.current = null, lt.current = null, q.current = null, ft.current = null, mt.current = null, U(null), W("circle"), Y();
+				K.current = e.circleStyle || null, G.current = null, lt.current = null, q.current = null, ft.current = null, mt.current = null, H(null), U("circle"), Y();
 				let t = R.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "polygon") {
-				q.current = e.polygonStyle || null, ct.current = null, lt.current = null, K.current = null, ft.current = null, mt.current = null, U(null), W("polygon"), Y();
+				q.current = e.polygonStyle || null, G.current = null, lt.current = null, K.current = null, ft.current = null, mt.current = null, H(null), U("polygon"), Y();
 				let t = R.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "square") {
-				ft.current = e.squareStyle || null, ct.current = null, lt.current = null, K.current = null, q.current = null, mt.current = null, U(null), W("square"), Y();
+				ft.current = e.squareStyle || null, G.current = null, lt.current = null, K.current = null, q.current = null, mt.current = null, H(null), U("square"), Y();
 				let t = R.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "polyline") {
-				mt.current = e.polylineStyle || null, ct.current = null, lt.current = null, K.current = null, q.current = null, ft.current = null, U(null), W("polyline"), Y();
+				mt.current = e.polylineStyle || null, G.current = null, lt.current = null, K.current = null, q.current = null, ft.current = null, H(null), U("polyline"), Y();
 				let t = R.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			}
-		} else U(e), W("marker"), Pt(e), ct.current = null, lt.current = null, K.current = null, q.current = null, ft.current = null, mt.current = null;
+		} else H(e), U("marker"), Pt(e), G.current = null, lt.current = null, K.current = null, q.current = null, ft.current = null, mt.current = null;
 	}, [
 		Mt,
 		Pt,
@@ -6831,7 +6833,7 @@ const Mapbox = forwardRef((e, c) => {
 		setMode: on,
 		getPickedLocation: cn,
 		clearPickedLocation: ln,
-		startDrawing: dn,
+		startDrawing: hn,
 		getRenderer: (e) => z.current.get(e),
 		setEditingEntities: (e) => {
 			for (let t of bt.current) e.map(String).includes(String(t)) || z.current.get(t)?.setEditing?.(!1);
@@ -6839,6 +6841,7 @@ const Mapbox = forwardRef((e, c) => {
 			J.current &&= (z.current.get(J.current.entityId)?.cancelEditPreview?.(), null), yt(e);
 		},
 		getEditingEntities: () => bt.current,
+		startPicking: pn,
 		startRoutePlanning: (e) => {
 			Ve.current?.startPlanning(e);
 		},
@@ -6858,9 +6861,10 @@ const Mapbox = forwardRef((e, c) => {
 		on,
 		cn,
 		ln,
-		dn
+		hn,
+		pn
 	]);
-	let fn = useCallback(() => {
+	let gn = useCallback(() => {
 		let e = R.current;
 		if (!e) return;
 		let t = new Set(T.map((e) => e.id)), n = new Set(z.current.keys());
@@ -6904,10 +6908,10 @@ const Mapbox = forwardRef((e, c) => {
 		M,
 		N,
 		P
-	]), pn = useCallback(() => {
+	]), _n = useCallback(() => {
 		for (let e of z.current.values()) e.destroy();
 		z.current.clear();
-	}, []), mn = useCallback((e) => {
+	}, []), vn = useCallback((e) => {
 		let t = e.getStyle();
 		if (!t?.layers) return;
 		let n = [
@@ -6922,10 +6926,10 @@ const Mapbox = forwardRef((e, c) => {
 			"marker-"
 		];
 		for (let e of t.layers) if (n.some((t) => e.id.startsWith(t))) return e.id;
-	}, []), hn = useCallback((e) => {
+	}, []), yn = 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]), gn = useCallback((e, t) => {
+	}, [C]), bn = useCallback((e, t) => {
 		let n = `base-layer-source-${t.id}`, r = `base-layer-${t.id}`, i = {
 			type: "raster",
 			tiles: [t.url],
@@ -6935,19 +6939,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 = mn(e);
+		let a = vn(e);
 		e.addLayer({
 			id: r,
 			type: "raster",
 			source: n,
-			paint: hn(t),
+			paint: yn(t),
 			layout: { visibility: t.visible === !1 ? "none" : "visible" }
 		}, a);
-	}, [mn, hn]), _n = useCallback(async (e, t) => {
+	}, [vn, yn]), xn = 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 (!Ue.current.has(t.id)) return;
-			let a = n.format === "pbf" || n.vector_layers, o = mn(e);
+			let a = n.format === "pbf" || n.vector_layers, o = vn(e);
 			if (a) {
 				let t = {
 					type: "vector",
@@ -6968,13 +6972,13 @@ const Mapbox = forwardRef((e, c) => {
 				id: i,
 				type: "raster",
 				source: r,
-				paint: hn(t),
+				paint: yn(t),
 				layout: { visibility: t.visible === !1 ? "none" : "visible" }
 			}, o);
 		} catch (e) {
 			console.error(`Failed to load TileJSON from ${t.url}:`, e);
 		}
-	}, [mn, hn]), vn = useCallback(async (e, t) => {
+	}, [vn, yn]), Sn = useCallback(async (e, t) => {
 		try {
 			let n = await (await fetch(t.url)).json();
 			if (!Ue.current.has(t.id)) return;
@@ -6982,7 +6986,7 @@ const Mapbox = forwardRef((e, c) => {
 				let n = `base-layer-source-${t.id}-${r}`;
 				e.getSource(n) || e.addSource(n, i);
 			}
-			let r = mn(e);
+			let r = vn(e);
 			if (n.layers) for (let i of n.layers) {
 				let n = `base-layer-${t.id}-${i.id}`;
 				if (e.getLayer(n)) continue;
@@ -6993,7 +6997,7 @@ const Mapbox = forwardRef((e, c) => {
 				};
 				i.type === "raster" && (a.paint = {
 					...a.paint,
-					...hn(t)
+					...yn(t)
 				}), t.visible === !1 && (a.layout = {
 					...a.layout,
 					visibility: "none"
@@ -7006,50 +7010,50 @@ const Mapbox = forwardRef((e, c) => {
 		} catch (e) {
 			console.error(`Failed to load Style JSON from ${t.url}:`, e);
 		}
-	}, [mn, hn]), yn = useCallback((e, t) => {
+	}, [vn, yn]), Cn = 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);
-	}, []), bn = useCallback((e) => {
+	}, []), wn = useCallback((e) => {
 		let t = R.current;
 		if (!t) return;
 		let n = new Set(e.map((e) => e.id)), r = Ue.current;
-		for (let e of r) n.has(e) || (yn(t, e), r.delete(e));
+		for (let e of r) n.has(e) || (Cn(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 = hn(n);
+				let r = yn(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":
-				gn(t, n);
+				bn(t, n);
 				break;
 			case "tilejson":
-				_n(t, n);
+				xn(t, n);
 				break;
 			case "style":
-				vn(t, n);
+				Sn(t, n);
 				break;
 			default: {
 				let e = n;
-				e.url && gn(t, {
+				e.url && bn(t, {
 					...e,
 					type: "raster"
 				});
 			}
 		}
 	}, [
-		gn,
-		_n,
-		vn,
-		yn,
-		hn
-	]), xn = useCallback((e) => {
+		bn,
+		xn,
+		Sn,
+		Cn,
+		yn
+	]), Tn = useCallback((e) => {
 		let t = e;
 		for (; t;) {
 			let e = t.getAttribute?.("data-entity-id");
@@ -7057,27 +7061,27 @@ const Mapbox = forwardRef((e, c) => {
 			t = t.parentElement;
 		}
 		return null;
-	}, []), Sn = useCallback((e) => {
+	}, []), En = useCallback((e) => {
 		let t = [e.lngLat.lng, e.lngLat.lat], n = {
 			x: e.point.x,
 			y: e.point.y
-		}, r = An.current;
+		}, r = Pn.current;
 		if (r === "picker") {
 			let e = {
 				lng: t[0],
 				lat: t[1]
 			};
-			nt(e), jt(t), jn.current?.(e);
+			rt(e), jt(t), Fn.current?.(e), un.current && (un.current(e), un.current = null, Mt(), rt(null), on(dn.current));
 			return;
 		}
 		if (_t.current) return;
 		if (r === "edit") {
-			let e = Nn.current;
+			let e = Ln.current;
 			if (e === "rectangle") {
-				let e = Pn.current;
-				if (!e) st(t);
+				let e = Rn.current;
+				if (!e) ct(t);
 				else {
-					let n = ct.current, r = applyEntityConfig({
+					let n = G.current, r = applyEntityConfig({
 						...n,
 						id: n?.id ?? Nt(),
 						type: "rectangle",
@@ -7089,7 +7093,7 @@ const Mapbox = forwardRef((e, c) => {
 						let e = new RectangleRenderer(i, r, O, k, M, P);
 						z.current.set(r.id, e);
 					}
-					Q.current.onRectangleAdd?.(r), st(null), ct.current = null, G.current && (G.current = !1, W(null), i && (i.getCanvas().style.cursor = ""));
+					Q.current.onRectangleAdd?.(r), ct(null), G.current = null, W.current && (W.current = !1, U(null), i && (i.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
@@ -7110,7 +7114,7 @@ const Mapbox = forwardRef((e, c) => {
 						let e = new CircleRenderer(a, i, O, k, M, N);
 						z.current.set(i.id, e);
 					}
-					Q.current.onCircleAdd?.(i), ut.current = null, K.current = null, G.current && (G.current = !1, W(null), a && (a.getCanvas().style.cursor = ""));
+					Q.current.onCircleAdd?.(i), ut.current = null, K.current = null, W.current && (W.current = !1, U(null), a && (a.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
@@ -7131,7 +7135,7 @@ const Mapbox = forwardRef((e, c) => {
 							let e = new PolygonRenderer(r, n, O, k, M, P);
 							z.current.set(n.id, e);
 						}
-						Q.current.onPolygonAdd?.(n), dt.current = [], q.current = null, G.current && (G.current = !1, W(null), r && (r.getCanvas().style.cursor = ""));
+						Q.current.onPolygonAdd?.(n), dt.current = [], q.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
 						return;
 					}
 				}
@@ -7155,7 +7159,7 @@ const Mapbox = forwardRef((e, c) => {
 						let e = new SquareRenderer(a, i, O, k, M, P);
 						z.current.set(i.id, e);
 					}
-					Q.current.onSquareAdd?.(i), pt.current = null, ft.current = null, G.current && (G.current = !1, W(null), a && (a.getCanvas().style.cursor = ""));
+					Q.current.onSquareAdd?.(i), pt.current = null, ft.current = null, W.current && (W.current = !1, U(null), a && (a.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
@@ -7173,10 +7177,10 @@ const Mapbox = forwardRef((e, c) => {
 					src: n.src,
 					width: n.width
 				};
-				Q.current.onMarkerAdd?.(e), U(null), W(null), Y(), lt.current = null, G.current = !1;
+				Q.current.onMarkerAdd?.(e), H(null), U(null), Y(), lt.current = null, W.current = !1;
 				return;
 			}
-			let r = Mn.current;
+			let r = In.current;
 			if (r) {
 				let e = {
 					id: Nt(),
@@ -7186,7 +7190,7 @@ const Mapbox = forwardRef((e, c) => {
 					src: r.icon,
 					width: r.size || r.width || 32
 				};
-				r.customData !== void 0 && (e.customData = r.customData), Q.current.onMarkerAdd?.(e), U(null), W(null), Y(), G.current = !1;
+				r.customData !== void 0 && (e.customData = r.customData), Q.current.onMarkerAdd?.(e), H(null), U(null), Y(), W.current = !1;
 				return;
 			}
 		}
@@ -7224,7 +7228,7 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}
 		}
-		let i = Dn.current, a = On.current, o = kn.current, s = xn(e.originalEvent.target);
+		let i = jn.current, a = Mn.current, o = Nn.current, s = Tn(e.originalEvent.target);
 		if (s) {
 			let e = i.find((e) => String(e.id) === s);
 			if (e) {
@@ -7261,15 +7265,15 @@ const Mapbox = forwardRef((e, c) => {
 	}, [
 		L,
 		Ne,
-		xn
-	]), Cn = useCallback((e) => {
+		Tn
+	]), Dn = useCallback((e) => {
 		let t = [e.lngLat.lng, e.lngLat.lat];
 		if (J.current) {
 			let { entityId: e, activeHandle: n } = J.current;
 			z.current.get(e)?.updateEditPreview?.(n, t);
 			return;
 		}
-		let n = Nn.current, r = Pn.current;
+		let n = Ln.current, r = Rn.current;
 		n === "rectangle" && r && Lt(r, t);
 		let i = ut.current;
 		n === "circle" && i && Ht(i.center, t);
@@ -7279,7 +7283,7 @@ const Mapbox = forwardRef((e, c) => {
 		n === "square" && o && Zt(o.center, t);
 		let s = ht.current;
 		n === "polyline" && s.length > 0 && tn(s, t);
-		let c = Dn.current, l = kn.current;
+		let c = jn.current, l = Nn.current;
 		for (let [e, n] of z.current) if (n.isPointInEntity(t)) {
 			let t = c.find((t) => t.id === e);
 			if (!t?.popup) continue;
@@ -7307,8 +7311,12 @@ const Mapbox = forwardRef((e, c) => {
 		Kt,
 		Zt,
 		tn
-	]), wn = useCallback((e) => {
-		if (e.preventDefault(), _t.current) return;
+	]), On = useCallback((e) => {
+		if (e.preventDefault(), un.current) {
+			un.current(null), un.current = null, Mt(), rt(null), on(dn.current);
+			return;
+		}
+		if (_t.current) return;
 		if (bt.current.length > 0) {
 			let t = [e.lngLat.lng, e.lngLat.lat];
 			if (J.current) {
@@ -7327,16 +7335,16 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}
 		}
-		if (An.current !== "edit") return;
-		if (Mn.current) {
-			U(null), W(null), Y();
+		if (Pn.current !== "edit") return;
+		if (In.current) {
+			H(null), U(null), Y();
 			return;
 		}
-		let t = Nn.current;
+		let t = Ln.current;
 		if (t === "rectangle") {
-			if (Pn.current) st(null), Rt();
+			if (Rn.current) ct(null), Rt();
 			else {
-				W(null);
+				U(null);
 				let e = R.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
@@ -7345,7 +7353,7 @@ const Mapbox = forwardRef((e, c) => {
 		if (t === "circle") {
 			if (ut.current) ut.current = null, Ut();
 			else {
-				W(null);
+				U(null);
 				let e = R.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
@@ -7366,10 +7374,10 @@ const Mapbox = forwardRef((e, c) => {
 					let e = new PolygonRenderer(r, n, O, k, M, P);
 					z.current.set(n.id, e);
 				}
-				Q.current.onPolygonAdd?.(n), dt.current = [], q.current = null, G.current && (G.current = !1, W(null), r && (r.getCanvas().style.cursor = ""));
+				Q.current.onPolygonAdd?.(n), dt.current = [], q.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
 			} else if (e.length > 0) dt.current = [], qt();
 			else {
-				W(null);
+				U(null);
 				let e = R.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
@@ -7378,7 +7386,7 @@ const Mapbox = forwardRef((e, c) => {
 		if (t === "square") {
 			if (pt.current) pt.current = null, Qt();
 			else {
-				W(null);
+				U(null);
 				let e = R.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
@@ -7399,10 +7407,10 @@ const Mapbox = forwardRef((e, c) => {
 					let e = new PolylineRenderer(r, n, O, k, P);
 					z.current.set(n.id, e);
 				}
-				Q.current.onPolylineAdd?.(n), ht.current = [], mt.current = null, G.current && (G.current = !1, W(null), r && (r.getCanvas().style.cursor = ""));
+				Q.current.onPolylineAdd?.(n), ht.current = [], mt.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
 			} else if (e.length > 0) ht.current = [], nn();
 			else {
-				W(null);
+				U(null);
 				let e = R.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
@@ -7411,11 +7419,11 @@ const Mapbox = forwardRef((e, c) => {
 		let n = [e.lngLat.lng, e.lngLat.lat], r = {
 			x: e.point.x,
 			y: e.point.y
-		}, i = Dn.current, a = xn(e.originalEvent.target);
+		}, i = jn.current, a = Tn(e.originalEvent.target);
 		if (a) {
 			let e = i.find((e) => String(e.id) === a);
 			if (e) {
-				Tn(e, r, n);
+				kn(e, r, n);
 				return;
 			}
 		}
@@ -7424,7 +7432,7 @@ const Mapbox = forwardRef((e, c) => {
 			if (o && R.current?.getLayer(o) && R.current.queryRenderedFeatures(e.point, { layers: [o] }).length > 0) {
 				let e = i.find((e) => e.id === t);
 				if (e) {
-					Tn(e, r, n);
+					kn(e, r, n);
 					return;
 				}
 			}
@@ -7432,19 +7440,19 @@ const Mapbox = forwardRef((e, c) => {
 		for (let [e, t] of z.current) if (t.isPointInEntity(n)) {
 			let t = i.find((t) => t.id === e);
 			if (t) {
-				Tn(t, r, n);
+				kn(t, r, n);
 				return;
 			}
 		}
 	}, [
-		xn,
+		Tn,
 		Y,
 		Rt,
 		Ut,
 		qt,
 		Qt,
 		nn
-	]), Tn = useCallback((e, t, n) => {
+	]), kn = useCallback((e, t, n) => {
 		let r = Be.current?.getBoundingClientRect(), i = r ? {
 			x: t.x + r.left,
 			y: t.y + r.top
@@ -7469,7 +7477,7 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}]
 		});
-	}, []), En = useCallback(() => {
+	}, []), An = useCallback(() => {
 		Ye(null);
 	}, []);
 	useEffect(() => {
@@ -7499,59 +7507,59 @@ const Mapbox = forwardRef((e, c) => {
 			document.body.contains(e) && document.body.removeChild(e);
 		};
 	}, [L?.zIndex]);
-	let Dn = useRef(T);
-	Dn.current = T;
-	let On = useRef(Fe);
-	On.current = Fe;
-	let kn = useRef(Tt);
-	kn.current = Tt;
-	let An = useRef($e);
-	An.current = $e;
-	let jn = useRef(b);
-	jn.current = b;
-	let Mn = useRef(it);
-	Mn.current = it;
-	let Nn = useRef(at);
-	Nn.current = at;
-	let Pn = useRef(ot);
-	Pn.current = ot;
+	let jn = useRef(T);
+	jn.current = T;
+	let Mn = useRef(Fe);
+	Mn.current = Fe;
+	let Nn = useRef(Tt);
+	Nn.current = Tt;
+	let Pn = useRef(et);
+	Pn.current = et;
+	let Fn = useRef(b);
+	Fn.current = b;
+	let In = useRef(at);
+	In.current = at;
+	let Ln = useRef(ot);
+	Ln.current = ot;
+	let Rn = useRef(st);
+	Rn.current = st;
 	let Q = useRef(v);
 	Q.current = v;
-	let Fn = useRef(D);
-	Fn.current = D, useEffect(() => {
+	let zn = useRef(D);
+	zn.current = D, useEffect(() => {
 		let e = (e) => {
 			if (e.key === "Escape" && J.current) {
 				z.current.get(J.current.entityId)?.cancelEditPreview?.(), J.current = null;
 				return;
 			}
-			if (e.key === "Escape" && $e === "edit") {
-				if (it && (U(null), W(null), Y()), at === "rectangle") if (ot) st(null), Rt();
+			if (e.key === "Escape" && et === "edit") {
+				if (at && (H(null), U(null), Y()), ot === "rectangle") if (st) ct(null), Rt();
 				else {
-					W(null);
+					U(null);
 					let e = R.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (at === "circle") if (ut.current) ut.current = null, Ut();
+				if (ot === "circle") if (ut.current) ut.current = null, Ut();
 				else {
-					W(null);
+					U(null);
 					let e = R.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (at === "polygon") if (dt.current.length > 0) dt.current = [], qt();
+				if (ot === "polygon") if (dt.current.length > 0) dt.current = [], qt();
 				else {
-					W(null);
+					U(null);
 					let e = R.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (at === "square") if (pt.current) pt.current = null, Qt();
+				if (ot === "square") if (pt.current) pt.current = null, Qt();
 				else {
-					W(null);
+					U(null);
 					let e = R.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (at === "polyline") if (ht.current.length > 0) ht.current = [], nn();
+				if (ot === "polyline") if (ht.current.length > 0) ht.current = [], nn();
 				else {
-					W(null);
+					U(null);
 					let e = R.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
@@ -7561,10 +7569,10 @@ const Mapbox = forwardRef((e, c) => {
 			document.removeEventListener("keydown", e);
 		};
 	}, [
-		$e,
-		it,
+		et,
 		at,
 		ot,
+		st,
 		Y,
 		Rt,
 		Ut,
@@ -7575,7 +7583,7 @@ const Mapbox = forwardRef((e, c) => {
 		let e = R.current;
 		if (!e || !V) return;
 		let t = V.entityId, n = V.config, r = () => {
-			let r = Dn.current.find((e) => e.id === t);
+			let r = jn.current.find((e) => e.id === t);
 			if (!r) {
 				Dt();
 				return;
@@ -7594,7 +7602,7 @@ const Mapbox = forwardRef((e, c) => {
 		let n = Je.lngLat, r = () => {
 			let r = e.project(n), i = t.clientWidth, a = t.clientHeight;
 			if (r.x < 0 || r.x > i || r.y < 0 || r.y > a) {
-				En();
+				An();
 				return;
 			}
 			let o = t.getBoundingClientRect(), s = r.x + o.left, c = r.y + o.top;
@@ -7603,7 +7611,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);
 		};
-	}, [Je?.lngLat, En]), useEffect(() => {
+	}, [Je?.lngLat, An]), useEffect(() => {
 		if (!Be.current) return;
 		let e = {
 			version: 8,
@@ -7644,9 +7652,9 @@ const Mapbox = forwardRef((e, c) => {
 			}
 			B.current.clear(), T.forEach((e) => {
 				B.current.set(e.id, e);
-			}), bn(S), fn(), It(), zt(), Gt(), Yt(), en(), Qe(_), Pe?.(_);
-		}), _.on("click", Sn), _.on("mousemove", Cn), _.on("contextmenu", wn), () => {
-			_.off("click", Sn), _.off("mousemove", Cn), _.off("contextmenu", wn), pn(), Mt(), Y(), X(), Z(), _.remove(), R.current = null;
+			}), wn(S), gn(), It(), zt(), Gt(), Yt(), en(), $e(_), Pe?.(_);
+		}), _.on("click", En), _.on("mousemove", Dn), _.on("contextmenu", On), () => {
+			_.off("click", En), _.off("mousemove", Dn), _.off("contextmenu", On), _n(), Mt(), Y(), X(), Z(), _.remove(), R.current = null;
 		};
 	}, []), useEffect(() => {
 		if (R.current) {
@@ -7654,53 +7662,53 @@ const Mapbox = forwardRef((e, c) => {
 				R.current.once("load", () => {
 					B.current.clear(), T.forEach((e) => {
 						B.current.set(e.id, e);
-					}), fn();
+					}), gn();
 				});
 				return;
 			}
 			B.current.clear(), T.forEach((e) => {
 				B.current.set(e.id, e);
-			}), fn();
+			}), gn();
 		}
-	}, [T, fn]), useEffect(() => {
-		!R.current || !R.current.isStyleLoaded() || (pn(), fn());
+	}, [T, gn]), useEffect(() => {
+		!R.current || !R.current.isStyleLoaded() || (_n(), gn());
 	}, [
 		O,
 		k,
 		M,
 		N,
 		P,
-		pn,
-		fn
+		_n,
+		gn
 	]), useEffect(() => {
 		if (R.current) {
 			if (!R.current.isStyleLoaded()) {
 				R.current.once("load", () => {
-					bn(S);
+					wn(S);
 				});
 				return;
 			}
-			bn(S);
-		}
-	}, [S, bn]);
-	let In = useRef(void 0), Ln = useRef(!0), Rn = useRef(S);
-	Rn.current = S;
-	let zn = useRef(bn);
-	zn.current = bn;
-	let Bn = useRef(pn);
-	Bn.current = pn;
-	let Vn = useRef(fn);
-	Vn.current = fn;
-	let Hn = useRef(It);
-	Hn.current = It;
-	let Un = useRef(zt);
-	Un.current = zt;
-	let Wn = useRef(Gt);
-	Wn.current = Gt;
-	let Gn = useRef(Yt);
-	Gn.current = Yt;
-	let Kn = useRef(en);
-	Kn.current = en, useEffect(() => {
+			wn(S);
+		}
+	}, [S, wn]);
+	let Bn = useRef(void 0), Vn = useRef(!0), Hn = useRef(S);
+	Hn.current = S;
+	let Un = useRef(wn);
+	Un.current = wn;
+	let Wn = useRef(_n);
+	Wn.current = _n;
+	let Gn = useRef(gn);
+	Gn.current = gn;
+	let Kn = useRef(It);
+	Kn.current = It;
+	let qn = useRef(zt);
+	qn.current = zt;
+	let Jn = useRef(Gt);
+	Jn.current = Gt;
+	let Yn = useRef(Yt);
+	Yn.current = Yt;
+	let Xn = useRef(en);
+	Xn.current = en, useEffect(() => {
 		let e = R.current;
 		if (!e) return;
 		let t = p || {
@@ -7708,27 +7716,27 @@ const Mapbox = forwardRef((e, c) => {
 			sources: {},
 			layers: []
 		};
-		if (Ln.current) {
-			Ln.current = !1, In.current = p;
+		if (Vn.current) {
+			Vn.current = !1, Bn.current = p;
 			return;
 		}
-		In.current !== p && (In.current = p, e.setStyle(t), e.once("style.load", () => {
+		Bn.current !== p && (Bn.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);
 			}
-			Ue.current.clear(), zn.current(Rn.current), Bn.current(), Vn.current(), Hn.current(), Un.current(), Wn.current(), Gn.current(), Kn.current();
+			Ue.current.clear(), Un.current(Hn.current), Wn.current(), Gn.current(), Kn.current(), qn.current(), Jn.current(), Yn.current(), Xn.current();
 		}));
 	}, [p]), useEffect(() => {
 		let e = new Set(E.map(String));
 		for (let [t, n] of z.current) n.setSelected(e.has(String(t)));
 	}, [E]);
-	let qn = useRef({});
+	let Zn = useRef({});
 	useEffect(() => {
 		let e = R.current;
 		if (!e) return;
-		let t = qn.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 || (qn.current = {
+		let t = Zn.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 || (Zn.current = {
 			center: l,
 			zoom: u,
 			pitch: d,
@@ -7745,7 +7753,7 @@ const Mapbox = forwardRef((e, c) => {
 		d,
 		f
 	]);
-	let Jn = (() => Se === !1 ? null : Se === !0 ? { enabled: !0 } : Se)(), Yn = (() => F === !1 ? null : F === !0 ? { enabled: !0 } : F)(), Xn = (() => Ce === !1 ? null : Ce === !0 ? { enabled: !0 } : Ce)(), $ = (() => {
+	let Qn = (() => Se === !1 ? null : Se === !0 ? { enabled: !0 } : Se)(), $n = (() => F === !1 ? null : F === !0 ? { enabled: !0 } : F)(), er = (() => Ce === !1 ? null : Ce === !0 ? { enabled: !0 } : Ce)(), $ = (() => {
 		if (we === !1) return null;
 		let e, t, n;
 		if (S && S.length > 0) {
@@ -7770,7 +7778,7 @@ const Mapbox = forwardRef((e, c) => {
 			sourceLayer: we.sourceLayer || t,
 			classField: we.classField || n
 		};
-	})(), Zn = (() => I ? I === !0 ? { enabled: !0 } : I : null)(), Qn = (() => Ee ? Ee === !0 ? { enabled: !0 } : Ee : null)(), $n = (() => Ae || null)(), er = useMemo(() => {
+	})(), tr = (() => I ? I === !0 ? { enabled: !0 } : I : null)(), nr = (() => Ee ? Ee === !0 ? { enabled: !0 } : Ee : null)(), rr = (() => Ae || null)(), ir = useMemo(() => {
 		let e = [];
 		for (let t of S) if (t.applyRasterPaint) if (t.type === "style") {
 			let n = R.current;
@@ -7780,16 +7788,16 @@ const Mapbox = forwardRef((e, c) => {
 			}
 		} else e.push(`base-layer-${t.id}`);
 		return e;
-	}, [S, H]);
+	}, [S, Qe]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: `comp-mapbox ${$e === "picker" ? "comp-mapbox--picker-mode" : ""} ${Re}`,
+		className: `comp-mapbox ${et === "picker" ? "comp-mapbox--picker-mode" : ""} ${Re}`,
 		style: ze,
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				ref: Be,
 				className: "comp-mapbox__map"
 			}),
-			$e === "picker" && y.showCrosshair === !0 && /* @__PURE__ */ jsxs("div", {
+			et === "picker" && y.showCrosshair === !0 && /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__crosshair",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "comp-mapbox__crosshair-h",
@@ -7800,13 +7808,13 @@ const Mapbox = forwardRef((e, c) => {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: `comp-mapbox__edit-controls${$e === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) || $ && $.enabled !== !1 || $n && $n.enabled !== !1 ? "" : " comp-mapbox__edit-controls--hidden"}`,
+				className: `comp-mapbox__edit-controls${et === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) || $ && $.enabled !== !1 || rr && rr.enabled !== !1 ? "" : " comp-mapbox__edit-controls--hidden"}`,
 				children: [
-					$e === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) && /* @__PURE__ */ jsx(EditControl, {
+					et === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) && /* @__PURE__ */ jsx(EditControl, {
 						markerTemplates: v.markerTemplates || [],
-						selectedTemplate: it,
+						selectedTemplate: at,
 						onTemplateSelect: rn,
-						drawMode: at,
+						drawMode: ot,
 						onDrawModeChange: an,
 						showRectangleTool: v.showRectangleTool,
 						showCircleTool: v.showCircleTool,
@@ -7816,7 +7824,7 @@ const Mapbox = forwardRef((e, c) => {
 					}),
 					/* @__PURE__ */ jsx(RoadHighlightControl, {
 						ref: He,
-						map: H,
+						map: Qe,
 						showButton: !!($ && $.enabled !== !1),
 						highlightWidth: $?.highlightWidth,
 						defaultRoadTypes: $?.defaultRoadTypes,
@@ -7827,64 +7835,64 @@ const Mapbox = forwardRef((e, c) => {
 						className: $?.className,
 						style: $?.style
 					}),
-					$n && $n.enabled !== !1 && /* @__PURE__ */ jsx(RoutePlanningControl, {
+					rr && rr.enabled !== !1 && /* @__PURE__ */ jsx(RoutePlanningControl, {
 						ref: Ve,
-						map: H,
-						pointCount: $n.pointCount,
-						showPointCountInput: $n.showPointCountInput,
-						visualType: $n.visualType,
-						onSelectFinished: $n.onSelectFinished
+						map: Qe,
+						pointCount: rr.pointCount,
+						showPointCountInput: rr.showPointCountInput,
+						visualType: rr.visualType,
+						onSelectFinished: rr.onSelectFinished
 					})
 				]
 			}),
-			(Jn?.enabled !== !1 || Yn?.enabled !== !1 || Xn?.enabled !== !1 || Zn && Zn.enabled !== !1 || Qn && Qn.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
+			(Qn?.enabled !== !1 || $n?.enabled !== !1 || er?.enabled !== !1 || tr && tr.enabled !== !1 || nr && nr.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__controls",
 				children: [
-					Jn && Jn.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
-						map: H,
-						precision: Jn.precision,
-						className: Jn.className,
-						style: Jn.style
+					Qn && Qn.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
+						map: Qe,
+						precision: Qn.precision,
+						className: Qn.className,
+						style: Qn.style
 					}),
-					Yn && Yn.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
-						map: H,
-						maxWidth: Yn.maxWidth,
-						unit: Yn.unit,
-						className: Yn.className,
-						style: Yn.style
+					$n && $n.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
+						map: Qe,
+						maxWidth: $n.maxWidth,
+						unit: $n.unit,
+						className: $n.className,
+						style: $n.style
 					}),
-					Zn && Zn.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
-						map: H,
+					tr && tr.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
+						map: Qe,
 						entityConfig: D,
 						onDrawModeChange: (e) => {
 							_t.current = e;
 						},
-						className: Zn.className,
-						style: Zn.style
+						className: tr.className,
+						style: tr.style
 					}),
-					Qn && Qn.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
-						map: H,
+					nr && nr.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
+						map: Qe,
 						value: C,
 						onChange: je,
-						rasterPaintLayerIds: er,
-						className: Qn.className,
-						style: Qn.style
+						rasterPaintLayerIds: ir,
+						className: nr.className,
+						style: nr.style
 					}),
-					Xn && Xn.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
-						map: H,
+					er && er.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
+						map: Qe,
 						initialCenter: l,
 						initialZoom: u,
 						initialPitch: d,
 						initialBearing: f,
-						duration: Xn.duration,
-						className: Xn.className,
-						style: Xn.style
+						duration: er.duration,
+						className: er.className,
+						style: er.style
 					})
 				]
 			}),
-			!($n && $n.enabled !== !1) && /* @__PURE__ */ jsx(RoutePlanningControl, {
+			!(rr && rr.enabled !== !1) && /* @__PURE__ */ jsx(RoutePlanningControl, {
 				ref: Ve,
-				map: H,
+				map: Qe,
 				showButton: !1
 			}),
 			V && Ge.current && /* @__PURE__ */ jsx(EntityPopup, {
@@ -7895,7 +7903,7 @@ const Mapbox = forwardRef((e, c) => {
 			}),
 			Je && Xe.current && /* @__PURE__ */ jsx(ContextMenu, {
 				menuState: Je,
-				onClose: En,
+				onClose: An,
 				portalContainer: Xe.current,
 				menuRef: Ze
 			})