@orbat-mapper/tactical-draw-adapter-maplibre 0.3.1 → 0.3.3

package/README.md

@@ -5,6 +5,13 @@
 contract, so the draw/edit sessions, draw rules, gestures, and handle
 rendering from `tactical-draw` run unchanged on a MapLibre map.
 
+Each Graphic keeps one stable GeoJSON source and an ordered bundle of native
+paint surfaces. A surface represents one feature's fill, outline, point, icon,
+or text operation, which lets feature-array order remain authoritative across
+MapLibre's separate layer types. This costs up to one native layer per paint
+operation, while content updates reuse the source and surfaces and pure
+reorders move those layers without recreating unrelated Graphic bundles.
+
 `maplibre-gl` 5.8 or 6.x is a peer dependency — your app supplies the version. MapLibre 6
 applications must also follow MapLibre's
 [v5-to-v6 setup guidance](https://maplibre.org/maplibre-gl-js/docs/guides/v5-to-v6-migration-guide/),

package/dist/index.d.mts

@@ -15,7 +15,9 @@ interface MapLibreLayerHandle {
 type PaintChannel = "fill" | "fill-pattern" | "line" | "circle" | "icon" | "text";
 interface MapLibreGroupBundle {
   readonly sourceId: string;
-  readonly layerIds: Map<PaintChannel, string>;
+  readonly paintSurfaces: Map<string, MapLibrePaintSurface>;
+  paintOrder: string[];
+  nextPaintSurfaceId: number;
   features: readonly Feature[];
   /** Features most recently submitted to the native source, after MapLibre-specific promotion. */
   sourceFeatures: readonly Feature[];
@@ -34,6 +36,11 @@ interface MapLibreGroupBundle {
   requiredIconIds: ReadonlySet<string>;
   overlays: Map<string, MapLibreImageOverlayHandle>;
 }
+interface MapLibrePaintSurface {
+  readonly layerId: string;
+  readonly channel: PaintChannel;
+  readonly featureId: string | number;
+}
 /**
  * Last-applied scalar state for a rendered image overlay, used to skip
  * MapLibre's `ImageSource.updateImage` (which re-fetches and re-decodes the
@@ -73,7 +80,7 @@ declare class MapLibreAdapter extends BaseMapAdapter<MapLibreLayerHandle, MapLib
   private reconcileGroupImageOverlays;
   private clearGroupBundles;
   private requiredIconIds;
-  private reconcileGroupChannels;
+  private reconcileGroupPaintSurfaces;
   private buildGroupLayer;
   private updateGroupBundleSource;
   private orderGroupBundles;

package/dist/index.mjs

@@ -16,19 +16,11 @@ function coordinatesEqual(a, b) {
 	}
 	return true;
 }
-const PAINT_CHANNELS = [
-	"fill",
-	"fill-pattern",
-	"line",
-	"circle",
-	"icon",
-	"text"
-];
 function firstBundleLayerId(bundle) {
 	for (const overlay of bundle.overlays.values()) return overlay.layerId;
-	for (const channel of PAINT_CHANNELS) {
-		const layerId = bundle.layerIds.get(channel);
-		if (layerId) return layerId;
+	for (const key of bundle.paintOrder) {
+		const surface = bundle.paintSurfaces.get(key);
+		if (surface) return surface.layerId;
 	}
 }
 function sameOrder(a, b) {
@@ -771,22 +763,20 @@ 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");
+function featurePaintChannels(feature, style) {
+	const channels = [];
+	if (geometryIncludes(feature, POLYGON_GEOMETRIES)) {
+		const fillPattern = featureStyle(feature).fillPattern;
+		if (featureStyle(feature).fillColor !== void 0 || style?.fillColor !== void 0 || isHatchPattern(fillPattern)) channels.push(isHatchPattern(fillPattern) ? "fill-pattern" : "fill");
 	}
+	if (geometryIncludes(feature, LINE_GEOMETRIES)) channels.push("line");
+	if (!geometryIncludes(feature, POINT_GEOMETRIES)) return channels;
+	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.push("icon");
+	if (hasText) channels.push("text");
+	if (!hasIcon && !hasText) channels.push("circle");
 	return channels;
 }
 var MapLibreAdapter = class extends BaseMapAdapter {
@@ -917,7 +907,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			bundle.revision = group.revision;
 			bundle.requiredIconIds = requiredIconIds;
 			if (this.reconcileGroupImageOverlays(handle, bundle, group.imageOverlays ?? [])) bundlesNeedingOrder.add(group.id);
-			if (this.reconcileGroupChannels(handle, bundle, groupPaintChannels(group.features, handle.style))) bundlesNeedingOrder.add(group.id);
+			if (this.reconcileGroupPaintSurfaces(handle, bundle, group.features)) bundlesNeedingOrder.add(group.id);
 			if (contentChanged || resourcesChanged) this.updateGroupBundleSource(bundle);
 		}
 		handle.groupOrder = groups.map((group) => group.id);
@@ -932,7 +922,9 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		});
 		return {
 			sourceId,
-			layerIds: /* @__PURE__ */ new Map(),
+			paintSurfaces: /* @__PURE__ */ new Map(),
+			paintOrder: [],
+			nextPaintSurfaceId: 0,
 			features: [],
 			sourceFeatures: [],
 			sourceInitialized: false,
@@ -946,7 +938,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			if (this.map.getLayer(overlay.layerId)) this.map.removeLayer(overlay.layerId);
 			if (this.map.getSource(overlay.sourceId)) this.map.removeSource(overlay.sourceId);
 		}
-		for (const layerId of bundle.layerIds.values()) if (this.map.getLayer(layerId)) this.map.removeLayer(layerId);
+		for (const surface of bundle.paintSurfaces.values()) if (this.map.getLayer(surface.layerId)) this.map.removeLayer(surface.layerId);
 		if (this.map.getSource(bundle.sourceId)) this.map.removeSource(bundle.sourceId);
 	}
 	reconcileGroupImageOverlays(handle, bundle, overlays) {
@@ -1016,22 +1008,43 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		}));
 		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;
-			}
+	reconcileGroupPaintSurfaces(handle, bundle, features) {
+		const desired = features.flatMap((feature) => featurePaintChannels(feature, handle.style).map((channel) => ({
+			key: `${typeof feature.id}:${JSON.stringify(feature.id)}:${channel}`,
+			featureId: feature.id,
+			channel
+		})));
+		const desiredKeys = new Set(desired.map(({ key }) => key));
+		let structureChanged = false;
+		for (const [key, surface] of bundle.paintSurfaces) {
+			if (desiredKeys.has(key)) continue;
+			if (this.map.getLayer(surface.layerId)) this.map.removeLayer(surface.layerId);
+			bundle.paintSurfaces.delete(key);
+			structureChanged = true;
 		}
-		return changed;
+		for (const { key, featureId, channel } of desired) {
+			if (bundle.paintSurfaces.has(key)) continue;
+			const layerId = `${bundle.sourceId}-surface-${++bundle.nextPaintSurfaceId}-${channel}`;
+			const layer = {
+				...this.buildGroupLayer(layerId, bundle.sourceId, channel, handle.style),
+				filter: [
+					"==",
+					"_fid",
+					featureId
+				]
+			};
+			this.map.addLayer(layer, handle.mlLayerIds[0]);
+			bundle.paintSurfaces.set(key, {
+				layerId,
+				channel,
+				featureId
+			});
+			structureChanged = true;
+		}
+		const desiredOrder = desired.map(({ key }) => key);
+		const orderChanged = !sameOrder(bundle.paintOrder, desiredOrder);
+		bundle.paintOrder = desiredOrder;
+		return structureChanged || orderChanged;
 	}
 	buildGroupLayer(id, sourceId, channel, style) {
 		switch (channel) {
@@ -1107,9 +1120,9 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			if (!bundle) continue;
 			if (forcedGroupIds.has(groupId) || stableGroupIds !== null && !stableGroupIds.has(groupId)) {
 				for (const overlay of bundle.overlays.values()) if (this.map.getLayer(overlay.layerId)) this.map.moveLayer(overlay.layerId, beforeId);
-				for (const channel of PAINT_CHANNELS) {
-					const layerId = bundle.layerIds.get(channel);
-					if (layerId && this.map.getLayer(layerId)) this.map.moveLayer(layerId, beforeId);
+				for (const key of bundle.paintOrder) {
+					const surface = bundle.paintSurfaces.get(key);
+					if (surface && this.map.getLayer(surface.layerId)) this.map.moveLayer(surface.layerId, beforeId);
 				}
 			}
 			beforeId = firstBundleLayerId(bundle) ?? beforeId;
@@ -1118,7 +1131,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 	nativeLayerIds(handle) {
 		return [
 			...handle.mlLayerIds,
-			...[...handle.groupBundles.values()].flatMap((bundle) => [...bundle.layerIds.values()]),
+			...[...handle.groupBundles.values()].flatMap((bundle) => [...bundle.paintSurfaces.values()].map((surface) => surface.layerId)),
 			...[...handle.groupBundles.values()].flatMap((bundle) => [...bundle.overlays.values()].map((overlay) => overlay.layerId))
 		];
 	}
@@ -1346,9 +1359,9 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			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);
+		for (const [groupId, bundle] of handle.groupBundles) if (this.reconcileGroupPaintSurfaces(handle, bundle, bundle.features)) 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);
+		for (const bundle of handle.groupBundles.values()) for (const surface of bundle.paintSurfaces.values()) this.applyChannelStyle(surface.layerId, surface.channel, style, resolvedStyle, surface.featureId);
 		if (style.text && !handle.mlLayerIds.some((id) => id.endsWith("-symbol"))) {
 			const symbolId = `${layerId}-symbol`;
 			this.map.addLayer(buildSymbolLayer(symbolId, handle.sourceId, resolvedStyle.text));
@@ -1363,7 +1376,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		if (layerId.endsWith("-icon")) return "icon";
 		if (layerId.endsWith("-symbol")) return "text";
 	}
-	applyChannelStyle(layerId, channel, styleUpdate, resolvedStyle) {
+	applyChannelStyle(layerId, channel, styleUpdate, resolvedStyle, featureId) {
 		if (!this.map.getLayer(layerId)) return;
 		switch (channel) {
 			case "fill":
@@ -1385,7 +1398,11 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 				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));
+				this.map.setFilter(layerId, featureId === void 0 ? buildCirclePointFilter(resolvedStyle) : [
+					"==",
+					"_fid",
+					featureId
+				]);
 				break;
 			}
 			case "icon": break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbat-mapper/tactical-draw-adapter-maplibre",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "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",
@@ -37,8 +37,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@orbat-mapper/control-measures": "^0.6.0",
-    "@orbat-mapper/tactical-draw": "^0.4.0"
+    "@orbat-mapper/control-measures": "^0.8.0",
+    "@orbat-mapper/tactical-draw": "^0.4.2"
   },
   "peerDependencies": {
     "maplibre-gl": ">=5.8.0 <7.0.0"