@orbat-mapper/tactical-draw-adapter-maplibre 0.8.0 → 0.8.2

package/dist/index.d.mts

@@ -315,6 +315,12 @@ declare class MapLibreAdapter extends BaseMapAdapter<MapLibreLayerHandle, MapLib
    * (ADR-0057).
    */
   private insertionAnchor;
+  private unvalidatedStyle;
+  private addStyleSource;
+  private addStyleLayer;
+  private setStyleFilter;
+  private setStylePaint;
+  private setStyleLayout;
   private toContinuousLng;
   protected createLayer(layerId: LayerId, style?: StyleOptions): MapLibreLayerHandle;
   protected destroyLayer(handle: MapLibreLayerHandle): void;

package/dist/index.mjs

@@ -1486,6 +1486,12 @@ function buildIconSizing(props) {
 const FILL_PATTERN_IMAGE_ID_PROPERTY = "_fillPatternImageId";
 const DEFAULT_LINE_COLOR = "#000";
 const DEFAULT_LINE_WIDTH = 2;
+/**
+* MapLibre validates each style mutation against a fresh serialization of the
+* whole style, making bulk adds O(N²) (#569). The adapter builds every source,
+* layer, and property value itself, so it skips that validation.
+*/
+const UNVALIDATED = { validate: false };
 function isHatchPattern(value) {
 	return HATCH_PATTERNS.includes(value);
 }
@@ -2194,19 +2200,50 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 	insertionAnchor(handle, draped) {
 		return this.terrainActive && !draped ? handle.overlayAnchorId : handle.mlLayerIds[0];
 	}
+	unvalidatedStyle() {
+		const style = this.map.style;
+		return typeof style?.addSource === "function" && typeof style.addLayer === "function" && typeof this.map._update === "function" ? style : void 0;
+	}
+	addStyleSource(id, source) {
+		const style = this.unvalidatedStyle();
+		if (!style) {
+			this.map.addSource(id, source);
+			return;
+		}
+		style.addSource(id, source, UNVALIDATED);
+		this.map._update(true);
+	}
+	addStyleLayer(layer, beforeId) {
+		const style = this.unvalidatedStyle();
+		if (!style) {
+			this.map.addLayer(layer, beforeId);
+			return;
+		}
+		style.addLayer(layer, beforeId, UNVALIDATED);
+		this.map._update(true);
+	}
+	setStyleFilter(layerId, filter) {
+		this.map.setFilter(layerId, filter, UNVALIDATED);
+	}
+	setStylePaint(layerId, name, value) {
+		this.map.setPaintProperty(layerId, name, value, UNVALIDATED);
+	}
+	setStyleLayout(layerId, name, value) {
+		this.map.setLayoutProperty(layerId, name, value, UNVALIDATED);
+	}
 	toContinuousLng(lng) {
 		return nearestWorldCopyLng(lng, this.map.getCenter().lng);
 	}
 	createLayer(layerId, style) {
 		const sourceId = `${layerId}-src`;
-		this.map.addSource(sourceId, {
+		this.addStyleSource(sourceId, {
 			type: "geojson",
 			data: emptyFC(),
 			promoteId: "_fid"
 		});
 		const mlLayerIds = [];
 		const fillId = `${layerId}-fill`;
-		this.map.addLayer(hiddenLayer({
+		this.addStyleLayer(hiddenLayer({
 			id: fillId,
 			type: "fill",
 			source: sourceId,
@@ -2215,7 +2252,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		}));
 		mlLayerIds.push(fillId);
 		const fillPatternId = `${layerId}-fill-pattern`;
-		this.map.addLayer(hiddenLayer({
+		this.addStyleLayer(hiddenLayer({
 			id: fillPatternId,
 			type: "fill",
 			source: sourceId,
@@ -2224,7 +2261,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		}));
 		mlLayerIds.push(fillPatternId);
 		const lineId = `${layerId}-line`;
-		this.map.addLayer(hiddenLayer({
+		this.addStyleLayer(hiddenLayer({
 			id: lineId,
 			type: "line",
 			source: sourceId,
@@ -2249,7 +2286,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		}));
 		mlLayerIds.push(lineId);
 		const circleId = `${layerId}-circle`;
-		this.map.addLayer(hiddenLayer({
+		this.addStyleLayer(hiddenLayer({
 			id: circleId,
 			type: "circle",
 			source: sourceId,
@@ -2258,11 +2295,11 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		}));
 		mlLayerIds.push(circleId);
 		const iconId = `${layerId}-icon`;
-		this.map.addLayer(hiddenLayer(buildIconLayer(iconId, sourceId)));
+		this.addStyleLayer(hiddenLayer(buildIconLayer(iconId, sourceId)));
 		mlLayerIds.push(iconId);
 		if (style?.text) {
 			const symbolId = `${layerId}-symbol`;
-			this.map.addLayer(hiddenLayer(buildSymbolLayer(symbolId, sourceId, style.text)));
+			this.addStyleLayer(hiddenLayer(buildSymbolLayer(symbolId, sourceId, style.text)));
 			mlLayerIds.push(symbolId);
 		}
 		return {
@@ -2384,7 +2421,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 	}
 	createGroupBundle(layerId, handle) {
 		const sourceId = `${layerId}-group-${++handle.nextGroupBundleId}-src`;
-		this.map.addSource(sourceId, {
+		this.addStyleSource(sourceId, {
 			type: "geojson",
 			data: emptyFC(),
 			promoteId: "_fid"
@@ -2428,12 +2465,12 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 				const suffix = `${bundle.sourceId}-${encodeURIComponent(overlay.id)}`;
 				const sourceId = `${suffix}-image-src`;
 				const layerId = `${suffix}-image`;
-				this.map.addSource(sourceId, {
+				this.addStyleSource(sourceId, {
 					type: "image",
 					url,
 					coordinates: overlay.coordinates
 				});
-				this.map.addLayer({
+				this.addStyleLayer({
 					id: layerId,
 					type: "raster",
 					source: sourceId,
@@ -2459,7 +2496,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 				coordinates: overlay.coordinates.map((point) => [...point])
 			});
 			else if (coordinatesChanged) source?.setCoordinates?.(overlay.coordinates.map((point) => [...point]));
-			if (opacityChanged) this.map.setPaintProperty(existing.layerId, "raster-opacity", overlay.opacity);
+			if (opacityChanged) this.setStylePaint(existing.layerId, "raster-opacity", overlay.opacity);
 			existing.url = url;
 			existing.opacity = overlay.opacity;
 			existing.coordinates = overlay.coordinates;
@@ -2513,7 +2550,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 					featureId
 				]
 			};
-			this.map.addLayer(layer, this.insertionAnchor(handle, isDrapedChannel(channel)));
+			this.addStyleLayer(layer, this.insertionAnchor(handle, isDrapedChannel(channel)));
 			bundle.paintSurfaces.set(key, {
 				layerId,
 				channel,
@@ -2532,17 +2569,17 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		surface.sizingKey = sizingKey;
 		if (channel === "icon") {
 			const size = buildIconSizing(props);
-			if (size !== void 0) this.map.setLayoutProperty(surface.layerId, "icon-size", size);
+			if (size !== void 0) this.setStyleLayout(surface.layerId, "icon-size", size);
 			return;
 		}
 		const next = buildTextSizing(style.text, props);
 		const previous = surface.textSizing;
-		if (JSON.stringify(previous?.size) !== JSON.stringify(next.size)) this.map.setLayoutProperty(surface.layerId, "text-size", next.size);
+		if (JSON.stringify(previous?.size) !== JSON.stringify(next.size)) this.setStyleLayout(surface.layerId, "text-size", next.size);
 		for (const [key, property] of [
 			["haloWidth", "text-halo-width"],
 			["haloBlur", "text-halo-blur"],
 			["opacity", "text-opacity"]
-		]) if (JSON.stringify(previous?.[key]) !== JSON.stringify(next[key])) this.map.setPaintProperty(surface.layerId, property, next[key]);
+		]) if (JSON.stringify(previous?.[key]) !== JSON.stringify(next[key])) this.setStylePaint(surface.layerId, property, next[key]);
 		surface.textSizing = next;
 	}
 	buildGroupLayer(id, sourceId, channel, style, textSizing, iconSizing) {
@@ -2887,7 +2924,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		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(hiddenLayer(buildSymbolLayer(symbolId, handle.sourceId, resolvedStyle.text)));
+			this.addStyleLayer(hiddenLayer(buildSymbolLayer(symbolId, handle.sourceId, resolvedStyle.text)));
 			handle.mlLayerIds.push(symbolId);
 		}
 	}
@@ -2904,24 +2941,24 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		switch (channel) {
 			case "fill":
 				if (styleUpdate.fillColor === void 0) break;
-				this.map.setPaintProperty(layerId, "fill-color", buildFillPaint(resolvedStyle)["fill-color"]);
+				this.setStylePaint(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"]);
+				if (styleUpdate.strokeColor !== void 0) this.setStylePaint(layerId, "line-color", paint["line-color"]);
+				if (styleUpdate.strokeWidth !== void 0) this.setStylePaint(layerId, "line-width", paint["line-width"]);
+				if (styleUpdate.strokeDash !== void 0) this.setStylePaint(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, featureId === void 0 ? buildCirclePointFilter(resolvedStyle) : [
+				this.setStylePaint(layerId, "circle-radius", paint["circle-radius"]);
+				this.setStylePaint(layerId, "circle-color", paint["circle-color"]);
+				this.setStylePaint(layerId, "circle-stroke-color", paint["circle-stroke-color"]);
+				this.setStylePaint(layerId, "circle-stroke-width", paint["circle-stroke-width"]);
+				this.setStyleFilter(layerId, featureId === void 0 ? buildCirclePointFilter(resolvedStyle) : [
 					"==",
 					"_fid",
 					featureId
@@ -2931,13 +2968,13 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			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.text || styleUpdate.text.labelProperty) this.setStyleLayout(layerId, "text-field", buildTextFieldExpression(resolvedStyle.text));
+				if (styleUpdate.text.fillColor) this.setStylePaint(layerId, "text-color", resolvedStyle.text.fillColor);
+				if (styleUpdate.text.strokeColor) this.setStylePaint(layerId, "text-halo-color", buildTextHaloColorExpression(resolvedStyle.text));
 				if (featureId === void 0) {
 					const sizing = buildTextSizing(resolvedStyle.text, null);
-					this.map.setPaintProperty(layerId, "text-halo-width", sizing.haloWidth);
-					this.map.setPaintProperty(layerId, "text-halo-blur", sizing.haloBlur);
+					this.setStylePaint(layerId, "text-halo-width", sizing.haloWidth);
+					this.setStylePaint(layerId, "text-halo-blur", sizing.haloBlur);
 				}
 				break;
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbat-mapper/tactical-draw-adapter-maplibre",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "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.30.1",
-    "@orbat-mapper/tactical-draw": "^0.12.0"
+    "@orbat-mapper/control-measures": "^0.32.0",
+    "@orbat-mapper/tactical-draw": "^0.13.2"
   },
   "peerDependencies": {
     "maplibre-gl": ">=5.8.0 <7.0.0"