@orbat-mapper/tactical-draw-adapter-maplibre 0.2.0-alpha.19 → 0.2.0-alpha.20

package/dist/index.d.mts

@@ -1,14 +1,25 @@
-import { BaseMapAdapter, EditPointerDriver, FeatureOps, IconResource, LayerId, MapCursor, NativeEventEntry, PickHandler, PickOptions, PixelCoordinate, StyleOptions } from "@orbat-mapper/tactical-draw";
+import { BaseMapAdapter, EditPointerDriver, FeatureGroup, IconResource, LayerId, MapCursor, NativeEventEntry, PickHandler, PickOptions, PixelCoordinate, StyleOptions } from "@orbat-mapper/tactical-draw";
 import maplibregl from "maplibre-gl";
-import { Position } from "geojson";
+import { Feature, Position } from "geojson";
 
 //#region src/ml-adapter.d.ts
 interface MapLibreLayerHandle {
   sourceId: string;
   /** MapLibre layer ids created for this logical layer (fill, line, circle, symbol) */
   mlLayerIds: string[];
+  groupBundles: Map<string, MapLibreGroupBundle>;
+  groupOrder: string[];
+  nextGroupBundleId: number;
   style?: StyleOptions;
 }
+type PaintChannel = "fill" | "fill-pattern" | "line" | "circle" | "icon" | "text";
+interface MapLibreGroupBundle {
+  readonly sourceId: string;
+  readonly layerIds: Map<PaintChannel, string>;
+  features: readonly Feature[];
+  featureSignature: string;
+  requiredIconIds: ReadonlySet<string>;
+}
 type MapLibreEventToken = (e: any) => void;
 interface MapLibreViewToken {
   fn: () => void;
@@ -25,17 +36,21 @@ declare class MapLibreAdapter extends BaseMapAdapter<MapLibreLayerHandle, MapLib
   private map;
   private readonly viewChangeMode;
   private readonly pendingIconImages;
-  private readonly pendingLayerUpdates;
-  private readonly deferredLayerRemovals;
   readonly scalesGroundPointSymbolsNatively = true;
   constructor(map: maplibregl.Map, options?: MapLibreAdapterOptions);
   private toContinuousLng;
   protected createLayer(layerId: LayerId, style?: StyleOptions): MapLibreLayerHandle;
   protected destroyLayer(handle: MapLibreLayerHandle): void;
-  protected applyFeatureOps(layerId: LayerId, ops: FeatureOps): void;
-  private updateSourceData;
-  private flushDeferredLayerRemoval;
-  deferLayerRemovalUntilLayerUpdate(layerId: LayerId, updatedLayerId: LayerId): void;
+  protected applyFeatureGroups(layerId: LayerId, groups: readonly FeatureGroup[]): void;
+  private createGroupBundle;
+  private destroyGroupBundle;
+  private clearGroupBundles;
+  private requiredIconIds;
+  private reconcileGroupChannels;
+  private buildGroupLayer;
+  private updateGroupBundleSource;
+  private orderGroupBundles;
+  private nativeLayerIds;
   /**
    * Promote a source feature for MapLibre: stamp `_fid` (so data-driven paint
    * and picks can key on the caller's feature id) and, for a hatch-patterned
@@ -62,6 +77,8 @@ declare class MapLibreAdapter extends BaseMapAdapter<MapLibreLayerHandle, MapLib
   private viewChangeEvents;
   createEditPointerDriver(): EditPointerDriver;
   setLayerStyle(layerId: LayerId, style: StyleOptions): void;
+  private legacyPaintChannel;
+  private applyChannelStyle;
   toLonLat(coordinate: number[]): Position;
   fromLonLat(position: Position): number[];
   getPixelFromCoordinate(position: Position): PixelCoordinate | null;

package/dist/index.mjs

@@ -8,6 +8,57 @@ const DEFAULT_LINE_WIDTH = 2;
 function isHatchPattern(value) {
 	return HATCH_PATTERNS.includes(value);
 }
+const PAINT_CHANNELS = [
+	"fill",
+	"fill-pattern",
+	"line",
+	"circle",
+	"icon",
+	"text"
+];
+function firstBundleLayerId(bundle) {
+	for (const channel of PAINT_CHANNELS) {
+		const layerId = bundle.layerIds.get(channel);
+		if (layerId) return layerId;
+	}
+}
+/**
+* Find the largest subset of bundles whose relative order already matches the
+* desired stack. Reorders then move only the remaining bundles.
+*/
+function longestStableGroupIds(previousGroupIds, desiredGroupIds) {
+	const previousIndices = new Map(previousGroupIds.map((groupId, index) => [groupId, index]));
+	const sequence = desiredGroupIds.flatMap((groupId) => {
+		const previousIndex = previousIndices.get(groupId);
+		return previousIndex === void 0 ? [] : [{
+			groupId,
+			previousIndex
+		}];
+	});
+	const tails = [];
+	const tailSequenceIndices = [];
+	const predecessors = new Array(sequence.length).fill(-1);
+	for (let sequenceIndex = 0; sequenceIndex < sequence.length; sequenceIndex++) {
+		const previousIndex = sequence[sequenceIndex].previousIndex;
+		let low = 0;
+		let high = tails.length;
+		while (low < high) {
+			const middle = low + high >>> 1;
+			if (tails[middle] < previousIndex) low = middle + 1;
+			else high = middle;
+		}
+		if (low > 0) predecessors[sequenceIndex] = tailSequenceIndices[low - 1];
+		tails[low] = previousIndex;
+		tailSequenceIndices[low] = sequenceIndex;
+	}
+	const stableGroupIds = /* @__PURE__ */ new Set();
+	let sequenceIndex = tailSequenceIndices.at(-1);
+	while (sequenceIndex !== void 0 && sequenceIndex >= 0) {
+		stableGroupIds.add(sequence[sequenceIndex].groupId);
+		sequenceIndex = predecessors[sequenceIndex];
+	}
+	return stableGroupIds;
+}
 function isPromiseLike(value) {
 	return (typeof value === "object" || typeof value === "function") && value !== null && typeof value.then === "function";
 }
@@ -595,12 +646,46 @@ function buildLinePaint(style) {
 		]
 	};
 }
+function geometryIncludes(feature, geometryTypes) {
+	const geometry = feature.geometry;
+	if (!geometry) return false;
+	if (geometry.type === "GeometryCollection") return geometry.geometries.some((candidate) => geometryTypes.has(candidate.type));
+	return geometryTypes.has(geometry.type);
+}
+const POLYGON_GEOMETRIES = new Set(["Polygon", "MultiPolygon"]);
+const LINE_GEOMETRIES = new Set([
+	"LineString",
+	"MultiLineString",
+	"Polygon",
+	"MultiPolygon"
+]);
+const POINT_GEOMETRIES = new Set(["Point", "MultiPoint"]);
+function featureStyle(feature) {
+	const style = feature.properties?.style;
+	return style && typeof style === "object" ? style : {};
+}
+function groupPaintChannels(features, style) {
+	const channels = /* @__PURE__ */ new Set();
+	for (const feature of features) {
+		if (geometryIncludes(feature, POLYGON_GEOMETRIES)) {
+			const fillPattern = featureStyle(feature).fillPattern;
+			if (featureStyle(feature).fillColor !== void 0 || style?.fillColor !== void 0 || isHatchPattern(fillPattern)) channels.add(isHatchPattern(fillPattern) ? "fill-pattern" : "fill");
+		}
+		if (geometryIncludes(feature, LINE_GEOMETRIES)) channels.add("line");
+		if (!geometryIncludes(feature, POINT_GEOMETRIES)) continue;
+		const properties = feature.properties ?? {};
+		const hasIcon = properties.iconId != null;
+		const hasText = style?.text !== void 0 && (style.text.labelProperty ? properties[style.text.labelProperty] != null : style.text.text !== void 0);
+		if (hasIcon) channels.add("icon");
+		if (hasText) channels.add("text");
+		if (!hasIcon && !hasText) channels.add("circle");
+	}
+	return channels;
+}
 var MapLibreAdapter = class extends BaseMapAdapter {
 	map;
 	viewChangeMode;
 	pendingIconImages = /* @__PURE__ */ new Set();
-	pendingLayerUpdates = /* @__PURE__ */ new Map();
-	deferredLayerRemovals = /* @__PURE__ */ new Map();
 	scalesGroundPointSymbolsNatively = true;
 	constructor(map, options = {}) {
 		super();
@@ -681,71 +766,176 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		return {
 			sourceId,
 			mlLayerIds,
+			groupBundles: /* @__PURE__ */ new Map(),
+			groupOrder: [],
+			nextGroupBundleId: 0,
 			style
 		};
 	}
 	destroyLayer(handle) {
-		for (const [layerId, layerHandle] of this.layers) {
-			if (layerHandle !== handle) continue;
-			this.pendingLayerUpdates.get(layerId)?.cancel();
-			this.pendingLayerUpdates.delete(layerId);
-			this.deferredLayerRemovals.delete(layerId);
-			break;
-		}
+		this.clearGroupBundles(handle);
 		for (const mlId of handle.mlLayerIds) if (this.map.getLayer(mlId)) this.map.removeLayer(mlId);
 		if (this.map.getSource(handle.sourceId)) this.map.removeSource(handle.sourceId);
 	}
-	applyFeatureOps(layerId, ops) {
-		const deferred = this.deferredLayerRemovals.get(layerId);
-		const isPureRemoval = ops.adds.length === 0 && ops.updates.length === 0 && (ops.removes?.length ?? 0) > 0;
-		if (deferred && isPureRemoval) {
-			deferred.after.then(() => this.flushDeferredLayerRemoval(layerId, deferred), () => this.flushDeferredLayerRemoval(layerId, deferred));
-			return;
-		}
-		if (deferred) this.deferredLayerRemovals.delete(layerId);
-		this.updateSourceData(layerId, ops.full);
-	}
-	updateSourceData(layerId, features) {
+	applyFeatureGroups(layerId, groups) {
 		const handle = this.layers.get(layerId);
 		if (!handle) return;
-		const source = this.map.getSource(handle.sourceId);
-		if (!source) return;
-		const promotedFeatures = features.map((f) => this.promoteFeature(f));
-		let resolveSourceData;
-		const sourceDataCompletion = new Promise((resolve) => {
-			resolveSourceData = resolve;
+		const desiredGroupIds = new Set(groups.map((group) => group.id));
+		const previousGroupOrder = handle.groupOrder.filter((groupId) => desiredGroupIds.has(groupId));
+		const bundlesNeedingOrder = /* @__PURE__ */ new Set();
+		for (const [groupId, bundle] of handle.groupBundles) {
+			if (desiredGroupIds.has(groupId)) continue;
+			this.destroyGroupBundle(bundle);
+			handle.groupBundles.delete(groupId);
+		}
+		for (const group of groups) {
+			let bundle = handle.groupBundles.get(group.id);
+			const isNewBundle = bundle === void 0;
+			if (!bundle) {
+				bundle = this.createGroupBundle(layerId, handle);
+				handle.groupBundles.set(group.id, bundle);
+				bundlesNeedingOrder.add(group.id);
+			}
+			const featureSignature = JSON.stringify(group.features);
+			const contentChanged = isNewBundle || bundle.featureSignature !== featureSignature;
+			const requiredIconIds = this.requiredIconIds(group);
+			const resourcesChanged = bundle.requiredIconIds.size !== requiredIconIds.size || [...bundle.requiredIconIds].some((id) => !requiredIconIds.has(id));
+			bundle.features = group.features;
+			bundle.featureSignature = featureSignature;
+			bundle.requiredIconIds = requiredIconIds;
+			if (this.reconcileGroupChannels(handle, bundle, groupPaintChannels(group.features, handle.style))) bundlesNeedingOrder.add(group.id);
+			if (contentChanged || resourcesChanged) this.updateGroupBundleSource(bundle);
+		}
+		handle.groupOrder = groups.map((group) => group.id);
+		this.orderGroupBundles(handle, previousGroupOrder, handle.groupOrder, bundlesNeedingOrder);
+	}
+	createGroupBundle(layerId, handle) {
+		const sourceId = `${layerId}-group-${++handle.nextGroupBundleId}-src`;
+		this.map.addSource(sourceId, {
+			type: "geojson",
+			data: emptyFC(),
+			promoteId: "_fid"
 		});
-		const onSourceData = (event) => {
-			if (event.sourceDataType !== "content") return;
-			source.off("data", onSourceData);
-			resolveSourceData();
+		return {
+			sourceId,
+			layerIds: /* @__PURE__ */ new Map(),
+			features: [],
+			featureSignature: "[]",
+			requiredIconIds: /* @__PURE__ */ new Set()
 		};
-		source.on("data", onSourceData);
+	}
+	destroyGroupBundle(bundle) {
+		for (const layerId of bundle.layerIds.values()) if (this.map.getLayer(layerId)) this.map.removeLayer(layerId);
+		if (this.map.getSource(bundle.sourceId)) this.map.removeSource(bundle.sourceId);
+	}
+	clearGroupBundles(handle) {
+		for (const bundle of handle.groupBundles.values()) this.destroyGroupBundle(bundle);
+		handle.groupBundles.clear();
+		handle.groupOrder = [];
+	}
+	requiredIconIds(group) {
+		const referenced = new Set(group.features.flatMap((feature) => {
+			const iconId = feature.properties?.iconId;
+			return typeof iconId === "string" ? [iconId] : [];
+		}));
+		return new Set(group.iconResources.map((resource) => resource.id).filter((resourceId) => referenced.has(resourceId)));
+	}
+	reconcileGroupChannels(handle, bundle, desiredChannels) {
+		let changed = false;
+		for (const channel of PAINT_CHANNELS) {
+			const layerId = bundle.layerIds.get(channel);
+			if (layerId && !desiredChannels.has(channel)) {
+				if (this.map.getLayer(layerId)) this.map.removeLayer(layerId);
+				bundle.layerIds.delete(channel);
+				changed = true;
+			} else if (!layerId && desiredChannels.has(channel)) {
+				const nextLayerId = `${bundle.sourceId}-${channel}`;
+				this.map.addLayer(this.buildGroupLayer(nextLayerId, bundle.sourceId, channel, handle.style), handle.mlLayerIds[0]);
+				bundle.layerIds.set(channel, nextLayerId);
+				changed = true;
+			}
+		}
+		return changed;
+	}
+	buildGroupLayer(id, sourceId, channel, style) {
+		switch (channel) {
+			case "fill": return {
+				id,
+				type: "fill",
+				source: sourceId,
+				filter: buildFillFilter(false),
+				paint: buildFillPaint(style)
+			};
+			case "fill-pattern": return {
+				id,
+				type: "fill",
+				source: sourceId,
+				filter: buildFillFilter(true),
+				paint: FILL_PATTERN_PAINT
+			};
+			case "line": return {
+				id,
+				type: "line",
+				source: sourceId,
+				filter: [
+					"any",
+					[
+						"==",
+						"$type",
+						"LineString"
+					],
+					[
+						"==",
+						"$type",
+						"Polygon"
+					]
+				],
+				paint: buildLinePaint(style),
+				layout: {
+					"line-cap": "round",
+					"line-join": "round"
+				}
+			};
+			case "circle": return {
+				id,
+				type: "circle",
+				source: sourceId,
+				filter: buildCirclePointFilter(style),
+				paint: buildCirclePaint(style)
+			};
+			case "icon": return buildIconLayer(id, sourceId);
+			case "text":
+				if (!style?.text) throw new Error("Cannot create a MapLibre text channel without text style");
+				return buildSymbolLayer(id, sourceId, style.text);
+		}
+	}
+	updateGroupBundleSource(bundle) {
+		const source = this.map.getSource(bundle.sourceId);
+		if (!source) return;
+		const features = [...bundle.requiredIconIds].every((id) => this.map.hasImage(id)) ? bundle.features.map((feature) => this.promoteFeature(feature)) : [];
 		const result = source.setData({
 			type: "FeatureCollection",
-			features: promotedFeatures
+			features
 		}, true);
-		const supportsCompletionPromise = isPromiseLike(result);
-		if (supportsCompletionPromise) source.off("data", onSourceData);
-		const completion = supportsCompletionPromise ? Promise.resolve(result) : sourceDataCompletion;
-		const pending = {
-			completion,
-			cancel() {
-				source.off("data", onSourceData);
-			}
-		};
-		this.pendingLayerUpdates.set(layerId, pending);
-		completion.catch(() => {});
+		if (isPromiseLike(result)) Promise.resolve(result).catch(() => {});
 	}
-	flushDeferredLayerRemoval(layerId, deferred) {
-		if (this.deferredLayerRemovals.get(layerId) !== deferred) return;
-		this.deferredLayerRemovals.delete(layerId);
-		this.updateSourceData(layerId, this.getLayerFeatures(layerId));
+	orderGroupBundles(handle, previousGroupIds, desiredGroupIds, forcedGroupIds) {
+		let beforeId = handle.mlLayerIds[0];
+		if (!beforeId) return;
+		const stableGroupIds = longestStableGroupIds(previousGroupIds, desiredGroupIds);
+		for (let index = desiredGroupIds.length - 1; index >= 0; index--) {
+			const groupId = desiredGroupIds[index];
+			const bundle = handle.groupBundles.get(groupId);
+			if (!bundle) continue;
+			if (!stableGroupIds.has(groupId) || forcedGroupIds.has(groupId)) for (const channel of PAINT_CHANNELS) {
+				const layerId = bundle.layerIds.get(channel);
+				if (layerId && this.map.getLayer(layerId)) this.map.moveLayer(layerId, beforeId);
+			}
+			beforeId = firstBundleLayerId(bundle) ?? beforeId;
+		}
 	}
-	deferLayerRemovalUntilLayerUpdate(layerId, updatedLayerId) {
-		const pending = this.pendingLayerUpdates.get(updatedLayerId);
-		if (!pending || !this.layers.has(layerId)) return;
-		this.deferredLayerRemovals.set(layerId, { after: pending.completion });
+	nativeLayerIds(handle) {
+		return [...handle.mlLayerIds, ...[...handle.groupBundles.values()].flatMap((bundle) => [...bundle.layerIds.values()])];
 	}
 	/**
 	* Promote a source feature for MapLibre: stamp `_fid` (so data-driven paint
@@ -799,6 +989,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 				if (!this.pendingIconImages.has(resource.id)) return;
 				this.pendingIconImages.delete(resource.id);
 				if (!this.map.hasImage(resource.id)) this.map.addImage(resource.id, image);
+				for (const handle of this.layers.values()) for (const bundle of handle.groupBundles.values()) if (bundle.requiredIconIds.has(resource.id)) this.updateGroupBundleSource(bundle);
 			};
 			image.onerror = () => this.pendingIconImages.delete(resource.id);
 			image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(centeredSvg(resource))}`;
@@ -956,39 +1147,72 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 	setLayerStyle(layerId, style) {
 		const handle = this.layers.get(layerId);
 		if (!handle) return;
-		handle.style = style;
+		const resolvedStyle = {
+			...handle.style,
+			...style,
+			...style.text ? { text: {
+				...handle.style?.text,
+				...style.text
+			} } : {}
+		};
+		handle.style = resolvedStyle;
 		for (const mlId of handle.mlLayerIds) {
-			const layer = this.map.getLayer(mlId);
-			if (!layer) continue;
-			const type = layer.type;
-			if (type === "fill") {
-				if (mlId.endsWith("-fill-pattern")) continue;
-				this.map.setPaintProperty(mlId, "fill-color", buildFillPaint(style)["fill-color"]);
-			} else if (type === "line") {
-				const paint = buildLinePaint(style);
-				if (style.strokeColor !== void 0) this.map.setPaintProperty(mlId, "line-color", paint["line-color"]);
-				if (style.strokeWidth !== void 0) this.map.setPaintProperty(mlId, "line-width", paint["line-width"]);
-				if (style.strokeDash !== void 0) this.map.setPaintProperty(mlId, "line-dasharray", paint["line-dasharray"]);
-			} else if (type === "circle") {
-				const paint = buildCirclePaint(style);
-				this.map.setPaintProperty(mlId, "circle-radius", paint["circle-radius"]);
-				this.map.setPaintProperty(mlId, "circle-color", paint["circle-color"]);
-				this.map.setPaintProperty(mlId, "circle-stroke-color", paint["circle-stroke-color"]);
-				this.map.setPaintProperty(mlId, "circle-stroke-width", paint["circle-stroke-width"]);
-				this.map.setFilter(mlId, buildCirclePointFilter(style));
-			} else if (type === "symbol" && style.text) {
-				if (style.text.text || style.text.labelProperty) this.map.setLayoutProperty(mlId, "text-field", buildTextFieldExpression(style.text));
-				if (style.text.fillColor) this.map.setPaintProperty(mlId, "text-color", style.text.fillColor);
-				if (style.text.strokeColor) this.map.setPaintProperty(mlId, "text-halo-color", buildTextHaloColorExpression(style.text));
-				if (style.text.strokeWidth !== void 0) this.map.setPaintProperty(mlId, "text-halo-width", buildTextHaloWidthExpression(style.text));
-			}
+			const channel = this.legacyPaintChannel(mlId);
+			if (channel) this.applyChannelStyle(mlId, channel, style, resolvedStyle);
 		}
+		const bundlesNeedingOrder = /* @__PURE__ */ new Set();
+		for (const [groupId, bundle] of handle.groupBundles) if (this.reconcileGroupChannels(handle, bundle, groupPaintChannels(bundle.features, resolvedStyle))) bundlesNeedingOrder.add(groupId);
+		this.orderGroupBundles(handle, handle.groupOrder, handle.groupOrder, bundlesNeedingOrder);
+		for (const bundle of handle.groupBundles.values()) for (const [channel, mlId] of bundle.layerIds) this.applyChannelStyle(mlId, channel, style, resolvedStyle);
 		if (style.text && !handle.mlLayerIds.some((id) => id.endsWith("-symbol"))) {
 			const symbolId = `${layerId}-symbol`;
-			this.map.addLayer(buildSymbolLayer(symbolId, handle.sourceId, style.text));
+			this.map.addLayer(buildSymbolLayer(symbolId, handle.sourceId, resolvedStyle.text));
 			handle.mlLayerIds.push(symbolId);
 		}
 	}
+	legacyPaintChannel(layerId) {
+		if (layerId.endsWith("-fill-pattern")) return "fill-pattern";
+		if (layerId.endsWith("-fill")) return "fill";
+		if (layerId.endsWith("-line")) return "line";
+		if (layerId.endsWith("-circle")) return "circle";
+		if (layerId.endsWith("-icon")) return "icon";
+		if (layerId.endsWith("-symbol")) return "text";
+	}
+	applyChannelStyle(layerId, channel, styleUpdate, resolvedStyle) {
+		if (!this.map.getLayer(layerId)) return;
+		switch (channel) {
+			case "fill":
+				if (styleUpdate.fillColor === void 0) break;
+				this.map.setPaintProperty(layerId, "fill-color", buildFillPaint(resolvedStyle)["fill-color"]);
+				break;
+			case "fill-pattern": break;
+			case "line": {
+				const paint = buildLinePaint(resolvedStyle);
+				if (styleUpdate.strokeColor !== void 0) this.map.setPaintProperty(layerId, "line-color", paint["line-color"]);
+				if (styleUpdate.strokeWidth !== void 0) this.map.setPaintProperty(layerId, "line-width", paint["line-width"]);
+				if (styleUpdate.strokeDash !== void 0) this.map.setPaintProperty(layerId, "line-dasharray", paint["line-dasharray"]);
+				break;
+			}
+			case "circle": {
+				if (!(styleUpdate.pointRadius !== void 0 || styleUpdate.pointFillColor !== void 0 || styleUpdate.fillColor !== void 0 || styleUpdate.strokeColor !== void 0 || styleUpdate.strokeWidth !== void 0 || styleUpdate.text !== void 0)) break;
+				const paint = buildCirclePaint(resolvedStyle);
+				this.map.setPaintProperty(layerId, "circle-radius", paint["circle-radius"]);
+				this.map.setPaintProperty(layerId, "circle-color", paint["circle-color"]);
+				this.map.setPaintProperty(layerId, "circle-stroke-color", paint["circle-stroke-color"]);
+				this.map.setPaintProperty(layerId, "circle-stroke-width", paint["circle-stroke-width"]);
+				this.map.setFilter(layerId, buildCirclePointFilter(resolvedStyle));
+				break;
+			}
+			case "icon": break;
+			case "text":
+				if (!styleUpdate.text || !resolvedStyle.text) break;
+				if (styleUpdate.text.text || styleUpdate.text.labelProperty) this.map.setLayoutProperty(layerId, "text-field", buildTextFieldExpression(resolvedStyle.text));
+				if (styleUpdate.text.fillColor) this.map.setPaintProperty(layerId, "text-color", resolvedStyle.text.fillColor);
+				if (styleUpdate.text.strokeColor) this.map.setPaintProperty(layerId, "text-halo-color", buildTextHaloColorExpression(resolvedStyle.text));
+				if (styleUpdate.text.strokeWidth !== void 0) this.map.setPaintProperty(layerId, "text-halo-width", buildTextHaloWidthExpression(resolvedStyle.text));
+				break;
+		}
+	}
 	toLonLat(coordinate) {
 		return unproject(coordinate[0], coordinate[1]);
 	}
@@ -1048,7 +1272,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			const tol = pickHitTolerance(originalEvent);
 			const { x, y } = e.point;
 			const bbox = [[x - tol, y - tol], [x + tol, y + tol]];
-			const relevantFeatures = mergeNativeAndCachedPickFeatures(this.map.queryRenderedFeatures(bbox, { layers: handle.mlLayerIds }).map((feature) => ({
+			const relevantFeatures = mergeNativeAndCachedPickFeatures(this.map.queryRenderedFeatures(bbox, { layers: this.nativeLayerIds(handle) }).map((feature) => ({
 				type: "Feature",
 				id: feature.id,
 				geometry: feature.geometry,
@@ -1058,10 +1282,12 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			const candidate = evaluatePickCandidates(relevantFeatures.map(({ feature, nativeHit, visualOrder }) => {
 				const iconId = feature.properties?.iconId;
 				const icon = typeof iconId === "string" ? this.getIconResource(iconId) : void 0;
+				const featureGroupOrder = this.getFeatureGroupOrder(layerId, feature.id);
 				return {
 					feature,
 					visualOrder,
 					nativeHit,
+					...featureGroupOrder !== void 0 ? { featureGroupOrder } : {},
 					...icon ? { icon } : {},
 					layerStyle: {
 						...handle.style,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbat-mapper/tactical-draw-adapter-maplibre",
-  "version": "0.2.0-alpha.19",
+  "version": "0.2.0-alpha.20",
   "description": "MapLibre GL JS engine adapter for @orbat-mapper/tactical-draw. Draw and edit tactical control measures (MIL-STD-2525 / APP-6) on a MapLibre map.",
   "license": "MIT",
   "author": "Orbat Mapper",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@orbat-mapper/control-measures": "^0.2.0-alpha.25",
-    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.34"
+    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.35"
   },
   "peerDependencies": {
     "maplibre-gl": ">=5.8.0 <6.0.0"