@orbat-mapper/tactical-draw-adapter-maplibre 0.2.0-alpha.16 → 0.2.0-alpha.18

package/dist/index.mjs

@@ -1,8 +1,10 @@
 import { project, unproject } from "@orbat-mapper/control-measures";
-import { BaseMapAdapter, DEFAULT_TEXT_SIZE_MAX_PIXELS, DEFAULT_TEXT_SIZE_MIN_PIXELS, HATCH_PATTERNS, PointerCallbackHub, TOUCH_HIT_TOLERANCE_PX, bindAbortable, fillPatternImageId, makeFillPatternImage, nearestWorldCopyLng, pickHitTolerance, tryControlMeasureIdFromFeature } from "@orbat-mapper/tactical-draw";
+import { BaseMapAdapter, DEFAULT_TEXT_SIZE_MAX_PIXELS, DEFAULT_TEXT_SIZE_MIN_PIXELS, HATCH_PATTERNS, PointerCallbackHub, TEXT_HALO_COLOR, TOUCH_HIT_TOLERANCE_PX, bindAbortable, evaluatePickCandidates, fillPatternImageId, makeFillPatternImage, mergeNativeAndCachedPickFeatures, nearestWorldCopyLng, pickHitTolerance, pickPointerType } from "@orbat-mapper/tactical-draw";
 //#region src/ml-adapter.ts
 /** Feature property key for the resolved hatch-pattern image id (see `promoteFeature`). */
 const FILL_PATTERN_IMAGE_ID_PROPERTY = "_fillPatternImageId";
+const DEFAULT_LINE_COLOR = "#000";
+const DEFAULT_LINE_WIDTH = 2;
 function isHatchPattern(value) {
 	return HATCH_PATTERNS.includes(value);
 }
@@ -297,6 +299,74 @@ function buildTextFieldExpression(text) {
 		rawTextField
 	] : rawTextField;
 }
+const HAS_TEXT_HALO = [
+	"boolean",
+	["get", "textHalo"],
+	false
+];
+const HAS_TEXT_BACKGROUND = [
+	"boolean",
+	["get", "textBackground"],
+	false
+];
+/**
+* Per-feature `text-halo-color` value: `textHalo` wins over both the layer's
+* `text.strokeColor` and the `textBackground` halo, matching the OL/Leaflet
+* adapters' precedence. Factored out so `setLayerStyle`'s incremental
+* `text-halo-color` update (below) can reuse it instead of dropping the
+* `textHalo` case.
+*/
+function buildTextHaloColorExpression(text) {
+	const fallback = text.strokeColor ? text.strokeColor : [
+		"case",
+		HAS_TEXT_BACKGROUND,
+		"#ffffff",
+		"rgba(255,255,255,0)"
+	];
+	return [
+		"case",
+		HAS_TEXT_HALO,
+		[
+			"coalesce",
+			["get", "textHaloColor"],
+			TEXT_HALO_COLOR
+		],
+		fallback
+	];
+}
+/**
+* Per-feature `text-halo-width` value, mirroring
+* `buildTextHaloColorExpression`'s precedence. MapLibre's `text-halo-width`
+* already extends outward from the glyph edge, matching
+* `resolveTextHaloWidth`'s own outward-depth semantics, so the `textHalo`
+* case uses its formula directly (unlike OpenLayers's straddling canvas
+* stroke, which must double it).
+*/
+function buildTextHaloWidthExpression(text) {
+	return [
+		"case",
+		HAS_TEXT_HALO,
+		[
+			"max",
+			1.5,
+			[
+				"/",
+				[
+					"coalesce",
+					["get", "textSizePixels"],
+					24
+				],
+				8
+			]
+		],
+		text.strokeColor ? text.strokeWidth ?? 1 : [
+			"case",
+			HAS_TEXT_BACKGROUND,
+			3,
+			0
+		]
+	];
+}
 /**
 * Build the layout and paint objects for a symbol (text) layer.
 * Centralises the rotation convention so `createLayer` and `setLayerStyle`
@@ -330,11 +400,6 @@ function buildSymbolLayer(symbolId, sourceId, text) {
 		],
 		"#000"
 	];
-	const hasTextBackground = [
-		"boolean",
-		["get", "textBackground"],
-		false
-	];
 	const textAnchor = text.labelProperty ? [
 		"case",
 		[
@@ -400,18 +465,8 @@ function buildSymbolLayer(symbolId, sourceId, text) {
 		},
 		paint: {
 			"text-color": textColor,
-			"text-halo-color": text.strokeColor ? text.strokeColor : [
-				"case",
-				hasTextBackground,
-				"#ffffff",
-				"rgba(255,255,255,0)"
-			],
-			"text-halo-width": text.strokeColor ? text.strokeWidth ?? 1 : [
-				"case",
-				hasTextBackground,
-				3,
-				0
-			],
+			"text-halo-color": buildTextHaloColorExpression(text),
+			"text-halo-width": buildTextHaloWidthExpression(text),
 			"text-opacity": TEXT_OPACITY_EXPRESSION
 		}
 	};
@@ -488,9 +543,11 @@ const FILL_PATTERN_PAINT = {
 	"fill-pattern": ["get", FILL_PATTERN_IMAGE_ID_PROPERTY],
 	"fill-opacity": 1
 };
+const SOLID_LINE_DASH = [1, 0];
 function buildLinePaint(style) {
-	const colorDefault = style?.strokeColor ?? "#000";
-	const widthDefault = style?.strokeWidth ?? 2;
+	const colorDefault = style?.strokeColor ?? DEFAULT_LINE_COLOR;
+	const widthDefault = style?.strokeWidth ?? DEFAULT_LINE_WIDTH;
+	const dashDefault = style?.strokeDash?.length ? [...style.strokeDash] : SOLID_LINE_DASH;
 	const styleObj = [
 		"coalesce",
 		["get", "style"],
@@ -515,7 +572,15 @@ function buildLinePaint(style) {
 			],
 			widthDefault
 		],
-		...style?.strokeDash ? { "line-dasharray": style.strokeDash } : {}
+		"line-dasharray": [
+			"coalesce",
+			[
+				"get",
+				"strokeDash",
+				styleObj
+			],
+			["literal", dashDefault]
+		]
 	};
 }
 var MapLibreAdapter = class extends BaseMapAdapter {
@@ -888,12 +953,10 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 				if (mlId.endsWith("-fill-pattern")) continue;
 				this.map.setPaintProperty(mlId, "fill-color", buildFillPaint(style)["fill-color"]);
 			} else if (type === "line") {
-				if (style.strokeColor !== void 0 || style.strokeWidth !== void 0) {
-					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) this.map.setPaintProperty(mlId, "line-dasharray", style.strokeDash);
+				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"]);
@@ -904,8 +967,8 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			} 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", style.text.strokeColor);
-				if (style.text.strokeWidth !== void 0) this.map.setPaintProperty(mlId, "text-halo-width", style.text.strokeWidth);
+				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));
 			}
 		}
 		if (style.text && !handle.mlLayerIds.some((id) => id.endsWith("-symbol"))) {
@@ -973,20 +1036,46 @@ 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 features = this.map.queryRenderedFeatures(bbox, { layers: handle.mlLayerIds });
-			if (features.length === 0) return;
-			const f = features[0];
-			const geojson = {
+			const relevantFeatures = mergeNativeAndCachedPickFeatures(this.map.queryRenderedFeatures(bbox, { layers: handle.mlLayerIds }).map((feature) => ({
 				type: "Feature",
-				id: f.id,
-				geometry: f.geometry,
-				properties: f.properties
-			};
-			const cmId = tryControlMeasureIdFromFeature(geojson);
+				id: feature.id,
+				geometry: feature.geometry,
+				properties: feature.properties
+			})), this.featureCache.get(layerId) ?? []);
+			const size = this.getViewportSize();
+			const candidate = evaluatePickCandidates(relevantFeatures.map(({ feature, nativeHit, visualOrder }) => {
+				const iconId = feature.properties?.iconId;
+				const icon = typeof iconId === "string" ? this.getIconResource(iconId) : void 0;
+				return {
+					feature,
+					visualOrder,
+					nativeHit,
+					...icon ? { icon } : {},
+					layerStyle: {
+						...handle.style,
+						strokeColor: handle.style?.strokeColor ?? DEFAULT_LINE_COLOR,
+						strokeWidth: handle.style?.strokeWidth ?? DEFAULT_LINE_WIDTH
+					}
+				};
+			}), {
+				pixel: [x, y],
+				pointerType: pickPointerType(originalEvent),
+				tolerance: tol,
+				toPixel: (position) => this.getPixelFromCoordinate(position),
+				viewport: {
+					minX: 0,
+					minY: 0,
+					maxX: size.width,
+					maxY: size.height
+				},
+				bearing: this.getBearing()
+			});
+			if (!candidate) return;
+			const cmId = candidate.graphicId;
 			if (cmId == null) return;
 			handler({
 				id: cmId,
-				feature: geojson,
+				feature: candidate.feature,
 				pixel: [x, y],
 				coordinate: [this.toContinuousLng(e.lngLat.lng), e.lngLat.lat],
 				originalEvent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbat-mapper/tactical-draw-adapter-maplibre",
-  "version": "0.2.0-alpha.16",
+  "version": "0.2.0-alpha.18",
   "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,17 +37,17 @@
     "access": "public"
   },
   "dependencies": {
-    "@orbat-mapper/control-measures": "^0.2.0-alpha.24",
-    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.31"
+    "@orbat-mapper/control-measures": "^0.2.0-alpha.25",
+    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.34"
   },
   "peerDependencies": {
-    "maplibre-gl": ">=4.0.0 <6.0.0"
+    "maplibre-gl": ">=5.8.0 <6.0.0"
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18.3",
     "@types/geojson": "^7946.0.16",
     "jsdom": "^27.4.0",
-    "maplibre-gl": "^5.18.0",
+    "maplibre-gl": "^5.24.0",
     "publint": "^0.3.21",
     "tsdown": "^0.22.2",
     "typescript": "~5.9.3",