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

package/dist/index.mjs

@@ -1,5 +1,5 @@
 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, evaluatePickCandidates, fillPatternImageId, makeFillPatternImage, mergeNativeAndCachedPickFeatures, nearestWorldCopyLng, pickHitTolerance, pickPointerType } 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";
@@ -103,7 +103,8 @@ function buildIconLayer(id, source) {
 			"icon-rotation-alignment": "viewport",
 			"icon-pitch-alignment": "viewport",
 			"icon-allow-overlap": true,
-			"icon-ignore-placement": true
+			"icon-ignore-placement": true,
+			"symbol-z-order": "source"
 		},
 		paint: { "icon-opacity": [
 			"coalesce",
@@ -299,6 +300,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`
@@ -332,11 +401,6 @@ function buildSymbolLayer(symbolId, sourceId, text) {
 		],
 		"#000"
 	];
-	const hasTextBackground = [
-		"boolean",
-		["get", "textBackground"],
-		false
-	];
 	const textAnchor = text.labelProperty ? [
 		"case",
 		[
@@ -398,22 +462,13 @@ function buildSymbolLayer(symbolId, sourceId, text) {
 			"text-max-width": 9999,
 			"text-rotation-alignment": "map",
 			"text-pitch-alignment": "map",
-			"text-allow-overlap": true
+			"text-allow-overlap": true,
+			"symbol-z-order": "source"
 		},
 		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
 		}
 	};
@@ -490,14 +545,25 @@ 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 ?? 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"],
 		["literal", {}]
 	];
+	const dashExpr = [
+		"coalesce",
+		[
+			"get",
+			"strokeDash",
+			styleObj
+		],
+		["literal", dashDefault]
+	];
 	return {
 		"line-color": [
 			"coalesce",
@@ -517,7 +583,16 @@ function buildLinePaint(style) {
 			],
 			widthDefault
 		],
-		...style?.strokeDash ? { "line-dasharray": style.strokeDash } : {}
+		"line-dasharray": [
+			"case",
+			[
+				">",
+				["length", dashExpr],
+				0
+			],
+			dashExpr,
+			["literal", SOLID_LINE_DASH]
+		]
 	};
 }
 var MapLibreAdapter = class extends BaseMapAdapter {
@@ -890,12 +965,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"]);
@@ -906,8 +979,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"))) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbat-mapper/tactical-draw-adapter-maplibre",
-  "version": "0.2.0-alpha.17",
+  "version": "0.2.0-alpha.19",
   "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,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@orbat-mapper/control-measures": "^0.2.0-alpha.24",
-    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.32"
+    "@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",
+    "@maplibre/maplibre-gl-style-spec": "^24.10.0",
     "@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",