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

package/dist/index.mjs

@@ -139,19 +139,29 @@ function buildTextSizeExpression(text) {
 		14
 	];
 	const sizeAtZoom = (zoom) => {
+		const groundPx = [
+			"*",
+			["get", "textSizeMeters"],
+			Math.pow(2, zoom + 9) / WEB_MERCATOR_CIRCUMFERENCE
+		];
 		return [
 			"case",
 			["has", "textSizeMeters"],
 			[
-				"min",
-				maxPx,
+				"case",
+				["has", "textMaxSizePixels"],
 				[
-					"max",
-					minPx,
+					"min",
+					["get", "textMaxSizePixels"],
+					groundPx
+				],
+				[
+					"min",
+					maxPx,
 					[
-						"*",
-						["get", "textSizeMeters"],
-						Math.pow(2, zoom + 9) / WEB_MERCATOR_CIRCUMFERENCE
+						"max",
+						minPx,
+						groundPx
 					]
 				]
 			],
@@ -166,6 +176,50 @@ function buildTextSizeExpression(text) {
 	];
 }
 /**
+* Companion to `buildTextSizeExpression` (ADR-0037): drives `text-opacity` to
+* 0 once a ground-anchored Text graphic's derived on-screen size exceeds its
+* `textMaxSizePixels` threshold, 1 otherwise (including every feature without
+* a threshold, e.g. amplifier labels). Layout properties like `text-size`
+* cannot represent "hidden", so hiding is a paint-property concern; `step`
+* (rather than `interpolate`) is enough since opacity only ever needs to
+* flip at a stop, evaluated at the same per-zoom granularity as the size
+* expression.
+*/
+const TEXT_OPACITY_EXPRESSION = (() => {
+	const opacityAtZoom = (zoom) => {
+		return [
+			"case",
+			[
+				"all",
+				["has", "textSizeMeters"],
+				["has", "textMaxSizePixels"]
+			],
+			[
+				"case",
+				[
+					">",
+					[
+						"*",
+						["get", "textSizeMeters"],
+						Math.pow(2, zoom + 9) / WEB_MERCATOR_CIRCUMFERENCE
+					],
+					["get", "textMaxSizePixels"]
+				],
+				0,
+				1
+			],
+			1
+		];
+	};
+	const stops = Array.from({ length: 25 }, (_, zoom) => zoom);
+	return [
+		"step",
+		["zoom"],
+		opacityAtZoom(0),
+		...stops.slice(1).flatMap((zoom) => [zoom, opacityAtZoom(zoom)])
+	];
+})();
+/**
 * Per-feature icon size, same zoom-stop scheme as `buildTextSizeExpression`:
 * a ground-sized point symbol carries `iconSizeMeters`/`iconOctagonSize` (and
 * optional `iconMinPixels`/`iconMaxPixels`), so the meters→pixels clamp is
@@ -224,6 +278,26 @@ function buildIconSizeExpression() {
 * `properties.style.fillColor` overlay. Mirrors `buildCirclePaint`.
 */
 /**
+* Per-feature `text-field` value: the layer's literal text, or the feature's
+* `labelProperty` value, uppercased when the feature's `textStyle` is
+* `"caps"`. Factored out of `buildSymbolLayer` so `setLayerStyle`'s
+* incremental `text-field` update (below) can reuse it instead of
+* regressing to a caps-unaware plain `["get", ...]`.
+*/
+function buildTextFieldExpression(text) {
+	const rawTextField = text.labelProperty ? ["get", text.labelProperty] : text.text ?? "";
+	return text.labelProperty ? [
+		"case",
+		[
+			"==",
+			["get", "textStyle"],
+			"caps"
+		],
+		["upcase", rawTextField],
+		rawTextField
+	] : rawTextField;
+}
+/**
 * Build the layout and paint objects for a symbol (text) layer.
 * Centralises the rotation convention so `createLayer` and `setLayerStyle`
 * stay in sync. Rotation follows the OpenLayers convention: `π − r` radians
@@ -256,6 +330,11 @@ function buildSymbolLayer(symbolId, sourceId, text) {
 		],
 		"#000"
 	];
+	const hasTextBackground = [
+		"boolean",
+		["get", "textBackground"],
+		false
+	];
 	const textAnchor = text.labelProperty ? [
 		"case",
 		[
@@ -272,16 +351,48 @@ function buildSymbolLayer(symbolId, sourceId, text) {
 		"right",
 		"center"
 	] : "center";
+	const textJustify = text.labelProperty ? [
+		"case",
+		[
+			"==",
+			["get", "textJustify"],
+			"left"
+		],
+		"left",
+		[
+			"==",
+			["get", "textJustify"],
+			"right"
+		],
+		"right",
+		"center"
+	] : "center";
 	return {
 		id: symbolId,
 		type: "symbol",
 		source: sourceId,
 		layout: {
-			"text-field": text.labelProperty ? ["get", text.labelProperty] : text.text ?? "",
-			"text-font": ["Open Sans Regular"],
+			"text-field": buildTextFieldExpression(text),
+			"text-font": text.labelProperty ? [
+				"case",
+				[
+					"==",
+					["get", "textStyle"],
+					"italic"
+				],
+				["literal", ["Open Sans Italic"]],
+				[
+					"==",
+					["get", "textStyle"],
+					"light"
+				],
+				["literal", ["Open Sans Light"]],
+				["literal", ["Open Sans Regular"]]
+			] : ["Open Sans Regular"],
 			"text-size": buildTextSizeExpression(text),
 			"text-rotate": textRotate,
 			"text-anchor": textAnchor,
+			"text-justify": textJustify,
 			"text-max-width": 9999,
 			"text-rotation-alignment": "map",
 			"text-pitch-alignment": "map",
@@ -289,10 +400,19 @@ function buildSymbolLayer(symbolId, sourceId, text) {
 		},
 		paint: {
 			"text-color": textColor,
-			...text.strokeColor ? {
-				"text-halo-color": text.strokeColor,
-				"text-halo-width": text.strokeWidth ?? 1
-			} : {}
+			"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-opacity": TEXT_OPACITY_EXPRESSION
 		}
 	};
 }
@@ -782,8 +902,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 				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) this.map.setLayoutProperty(mlId, "text-field", style.text.text);
-				else if (style.text.labelProperty) this.map.setLayoutProperty(mlId, "text-field", ["get", style.text.labelProperty]);
+				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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbat-mapper/tactical-draw-adapter-maplibre",
-  "version": "0.2.0-alpha.14",
+  "version": "0.2.0-alpha.16",
   "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.2.0-alpha.21",
-    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.29"
+    "@orbat-mapper/control-measures": "^0.2.0-alpha.24",
+    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.31"
   },
   "peerDependencies": {
     "maplibre-gl": ">=4.0.0 <6.0.0"