@orbat-mapper/tactical-draw-adapter-maplibre 0.2.0-alpha.1 → 0.2.0-alpha.10

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { BaseMapAdapter, EditPointerDriver, FeatureOps, LayerId, MapCursor, NativeEventEntry, PickHandler, PickOptions, PixelCoordinate, StyleOptions } from "@orbat-mapper/tactical-draw";
+import { BaseMapAdapter, EditPointerDriver, FeatureOps, IconResource, LayerId, MapCursor, NativeEventEntry, PickHandler, PickOptions, PixelCoordinate, StyleOptions } from "@orbat-mapper/tactical-draw";
 import maplibregl from "maplibre-gl";
 import { Position } from "geojson";
 
@@ -13,21 +13,37 @@ type MapLibreEventToken = (e: any) => void;
 interface MapLibreViewToken {
   fn: () => void;
 }
+interface MapLibreAdapterOptions {
+  /**
+   * How view changes propagate to view-state refits. "continuous" (default)
+   * refits on every frame of an animated zoom/rotate/pitch; "settle" defers
+   * the refit until the animation ends.
+   */
+  viewChangeMode?: "continuous" | "settle";
+}
 declare class MapLibreAdapter extends BaseMapAdapter<MapLibreLayerHandle, MapLibreEventToken, MapLibreViewToken> {
   private map;
-  constructor(map: maplibregl.Map);
+  private readonly viewChangeMode;
+  private readonly pendingIconImages;
+  readonly scalesGroundPointSymbolsNatively = true;
+  constructor(map: maplibregl.Map, options?: MapLibreAdapterOptions);
+  private toContinuousLng;
   protected createLayer(layerId: LayerId, style?: StyleOptions): MapLibreLayerHandle;
   protected destroyLayer(handle: MapLibreLayerHandle): void;
   protected applyFeatureOps(layerId: LayerId, ops: FeatureOps): void;
+  protected applyIconResources(resources: readonly IconResource[]): void;
+  protected removeIconResource(id: string): void;
   protected attachNativeEvent(type: "click" | "pointermove" | "dblclick", onEvent: (lonLat: Position, pixel: PixelCoordinate, originalEvent: unknown) => void): NativeEventEntry<MapLibreEventToken>;
   protected detachNativeEvent(entry: NativeEventEntry<MapLibreEventToken>): void;
   protected attachViewChange(handler: () => void): MapLibreViewToken;
   protected detachViewChange(token: MapLibreViewToken): void;
+  private viewChangeEvents;
   createEditPointerDriver(): EditPointerDriver;
   setLayerStyle(layerId: LayerId, style: StyleOptions): void;
   toLonLat(coordinate: number[]): Position;
   fromLonLat(position: Position): number[];
   getPixelFromCoordinate(position: Position): PixelCoordinate | null;
+  getCoordinateFromPixel(pixel: PixelCoordinate): Position | null;
   getViewportSize(): {
     width: number;
     height: number;
@@ -39,8 +55,9 @@ declare class MapLibreAdapter extends BaseMapAdapter<MapLibreLayerHandle, MapLib
   setDoubleClickZoomEnabled(enabled: boolean): void;
   getResolution(): number | undefined;
   getZoom(): number | undefined;
+  getBearing(): number;
   onPick(layerId: LayerId, handler: PickHandler, opts?: PickOptions): () => void;
   setGlobeMode(enabled: boolean): void;
 }
 //#endregion
-export { MapLibreAdapter };
+export { MapLibreAdapter, type MapLibreAdapterOptions };

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { project, unproject } from "@orbat-mapper/control-measures";
-import { BaseMapAdapter, PointerCallbackHub, TOUCH_HIT_TOLERANCE_PX, bindAbortable, pickHitTolerance, tryControlMeasureIdFromFeature } from "@orbat-mapper/tactical-draw";
+import { BaseMapAdapter, DEFAULT_TEXT_SIZE_MAX_PIXELS, DEFAULT_TEXT_SIZE_MIN_PIXELS, PointerCallbackHub, TOUCH_HIT_TOLERANCE_PX, bindAbortable, nearestWorldCopyLng, pickHitTolerance, tryControlMeasureIdFromFeature } from "@orbat-mapper/tactical-draw";
 //#region src/ml-adapter.ts
 function emptyFC() {
 	return {
@@ -52,51 +52,163 @@ function buildCirclePointFilter(style) {
 			"$type",
 			"Point"
 		],
+		["!has", "iconId"],
 		["!has", style.text.labelProperty]
 	] : [
-		"==",
-		"$type",
-		"Point"
+		"all",
+		[
+			"==",
+			"$type",
+			"Point"
+		],
+		["!has", "iconId"]
 	];
 }
-function buildTextSizeExpression() {
-	const size = [
+function buildIconLayer(id, source) {
+	return {
+		id,
+		type: "symbol",
+		source,
+		filter: [
+			"all",
+			[
+				"==",
+				"$type",
+				"Point"
+			],
+			["has", "iconId"]
+		],
+		layout: {
+			"icon-image": ["get", "iconId"],
+			"icon-size": buildIconSizeExpression(),
+			"icon-rotate": [
+				"*",
+				[
+					"coalesce",
+					["get", "iconRotation"],
+					0
+				],
+				180 / Math.PI
+			],
+			"icon-rotation-alignment": "viewport",
+			"icon-pitch-alignment": "viewport",
+			"icon-allow-overlap": true,
+			"icon-ignore-placement": true
+		},
+		paint: { "icon-opacity": [
+			"coalesce",
+			["get", "iconOpacity"],
+			1
+		] }
+	};
+}
+function centeredSvg(resource) {
+	const halfWidth = Math.max(resource.anchor[0], resource.width - resource.anchor[0]);
+	const halfHeight = Math.max(resource.anchor[1], resource.height - resource.anchor[1]);
+	const width = halfWidth * 2;
+	const height = halfHeight * 2;
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><g transform="translate(${halfWidth - resource.anchor[0]} ${halfHeight - resource.anchor[1]})">${resource.svg}</g></svg>`;
+}
+/** Web Mercator world circumference in meters (2π × 6378137). */
+const WEB_MERCATOR_CIRCUMFERENCE = 40075016.686;
+/**
+* Per-feature text size (ADR-0028): a ground-anchored label carries
+* `textSizeMeters` and renders at `textSizeMeters / resolution`, clamped to
+* the layer's `textSizeMinPixels`/`textSizeMaxPixels` band; a screen-anchored
+* one carries `textSizePixels` and renders at that constant; neither renders
+* the 14px engine default. Layout properties only take zoom as an
+* `interpolate`/`step` input, so the ground conversion is evaluated at every
+* integer zoom stop (resolution = world circumference / 512·2^zoom pixels,
+* matching `getResolution`); the linear ramp between stops approximates the
+* exponential exactly closely enough at 1-zoom granularity.
+*/
+function buildTextSizeExpression(text) {
+	const minPx = text.textSizeMinPixels ?? DEFAULT_TEXT_SIZE_MIN_PIXELS;
+	const maxPx = text.textSizeMaxPixels ?? DEFAULT_TEXT_SIZE_MAX_PIXELS;
+	const screenOrDefault = [
 		"coalesce",
 		["get", "textSizePixels"],
 		14
 	];
-	const referenceZoom = [
+	const sizeAtZoom = (zoom) => {
+		return [
+			"case",
+			["has", "textSizeMeters"],
+			[
+				"min",
+				maxPx,
+				[
+					"max",
+					minPx,
+					[
+						"*",
+						["get", "textSizeMeters"],
+						Math.pow(2, zoom + 9) / WEB_MERCATOR_CIRCUMFERENCE
+					]
+				]
+			],
+			screenOrDefault
+		];
+	};
+	return [
+		"interpolate",
+		["linear"],
+		["zoom"],
+		...Array.from({ length: 25 }, (_, zoom) => [zoom, sizeAtZoom(zoom)]).flat()
+	];
+}
+/**
+* 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
+* evaluated inside the style layer at every integer zoom stop and the symbol
+* scales smoothly through animated zooms. Anything else falls back to the
+* host-computed `iconScale` snapshot.
+*/
+function buildIconSizeExpression() {
+	const minExpr = [
 		"coalesce",
-		["get", "textSizeZoom"],
+		["get", "iconMinPixels"],
 		0
 	];
-	const sizeAtZoom = (zoom) => [
-		"min",
-		254,
-		[
+	const maxExpr = [
+		"coalesce",
+		["get", "iconMaxPixels"],
+		1e9
+	];
+	const scaleAtZoom = (zoom) => {
+		return [
 			"case",
-			["has", "textSizeZoom"],
+			["has", "iconSizeMeters"],
 			[
-				"*",
-				size,
+				"/",
 				[
-					"^",
-					2,
+					"max",
+					minExpr,
 					[
-						"-",
-						zoom,
-						referenceZoom
+						"min",
+						maxExpr,
+						[
+							"*",
+							["get", "iconSizeMeters"],
+							Math.pow(2, zoom + 9) / WEB_MERCATOR_CIRCUMFERENCE
+						]
 					]
-				]
+				],
+				["get", "iconOctagonSize"]
 			],
-			size
-		]
-	];
+			[
+				"coalesce",
+				["get", "iconScale"],
+				1
+			]
+		];
+	};
 	return [
 		"interpolate",
 		["linear"],
 		["zoom"],
-		...Array.from({ length: 25 }, (_, zoom) => [zoom, sizeAtZoom(zoom)]).flat()
+		...Array.from({ length: 25 }, (_, zoom) => [zoom, scaleAtZoom(zoom)]).flat()
 	];
 }
 /**
@@ -136,6 +248,22 @@ function buildSymbolLayer(symbolId, sourceId, text) {
 		],
 		"#000"
 	];
+	const textAnchor = text.labelProperty ? [
+		"case",
+		[
+			"==",
+			["get", "textAnchor"],
+			"start"
+		],
+		"left",
+		[
+			"==",
+			["get", "textAnchor"],
+			"end"
+		],
+		"right",
+		"center"
+	] : "center";
 	return {
 		id: symbolId,
 		type: "symbol",
@@ -143,8 +271,9 @@ function buildSymbolLayer(symbolId, sourceId, text) {
 		layout: {
 			"text-field": text.labelProperty ? ["get", text.labelProperty] : text.text ?? "",
 			"text-font": ["Open Sans Regular"],
-			"text-size": buildTextSizeExpression(),
+			"text-size": buildTextSizeExpression(text),
 			"text-rotate": textRotate,
+			"text-anchor": textAnchor,
 			"text-rotation-alignment": "map",
 			"text-pitch-alignment": "map",
 			"text-allow-overlap": true
@@ -208,9 +337,16 @@ function buildLinePaint(style) {
 }
 var MapLibreAdapter = class extends BaseMapAdapter {
 	map;
-	constructor(map) {
+	viewChangeMode;
+	pendingIconImages = /* @__PURE__ */ new Set();
+	scalesGroundPointSymbolsNatively = true;
+	constructor(map, options = {}) {
 		super();
 		this.map = map;
+		this.viewChangeMode = options.viewChangeMode ?? "continuous";
+	}
+	toContinuousLng(lng) {
+		return nearestWorldCopyLng(lng, this.map.getCenter().lng);
 	}
 	createLayer(layerId, style) {
 		const sourceId = `${layerId}-src`;
@@ -267,6 +403,9 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			paint: buildCirclePaint(style)
 		});
 		mlLayerIds.push(circleId);
+		const iconId = `${layerId}-icon`;
+		this.map.addLayer(buildIconLayer(iconId, sourceId));
+		mlLayerIds.push(iconId);
 		if (style?.text) {
 			const symbolId = `${layerId}-symbol`;
 			this.map.addLayer(buildSymbolLayer(symbolId, sourceId, style.text));
@@ -299,10 +438,29 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			features
 		});
 	}
+	applyIconResources(resources) {
+		if (typeof Image === "undefined") return;
+		for (const resource of resources) {
+			if (this.map.hasImage(resource.id) || this.pendingIconImages.has(resource.id)) continue;
+			this.pendingIconImages.add(resource.id);
+			const image = new Image();
+			image.onload = () => {
+				if (!this.pendingIconImages.has(resource.id)) return;
+				this.pendingIconImages.delete(resource.id);
+				if (!this.map.hasImage(resource.id)) this.map.addImage(resource.id, image);
+			};
+			image.onerror = () => this.pendingIconImages.delete(resource.id);
+			image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(centeredSvg(resource))}`;
+		}
+	}
+	removeIconResource(id) {
+		this.pendingIconImages.delete(id);
+		if (this.map.hasImage(id)) this.map.removeImage(id);
+	}
 	attachNativeEvent(type, onEvent) {
 		const mlEvent = type === "pointermove" ? "mousemove" : type === "dblclick" ? "dblclick" : "click";
 		const fn = (e) => {
-			onEvent([e.lngLat.lng, e.lngLat.lat], [e.point.x, e.point.y], e);
+			onEvent([this.toContinuousLng(e.lngLat.lng), e.lngLat.lat], [e.point.x, e.point.y], e);
 		};
 		this.map.on(mlEvent, fn);
 		return {
@@ -315,26 +473,32 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 	}
 	attachViewChange(handler) {
 		const fn = () => handler();
-		this.map.on("zoom", fn);
-		this.map.on("rotate", fn);
-		this.map.on("pitch", fn);
-		this.map.on("moveend", fn);
+		for (const event of this.viewChangeEvents()) this.map.on(event, fn);
 		return { fn };
 	}
 	detachViewChange(token) {
-		this.map.off("zoom", token.fn);
-		this.map.off("rotate", token.fn);
-		this.map.off("pitch", token.fn);
-		this.map.off("moveend", token.fn);
+		for (const event of this.viewChangeEvents()) this.map.off(event, token.fn);
+	}
+	viewChangeEvents() {
+		return this.viewChangeMode === "settle" ? ["moveend"] : [
+			"zoom",
+			"rotate",
+			"pitch",
+			"moveend"
+		];
 	}
 	createEditPointerDriver() {
 		const map = this.map;
+		const toContinuousLng = (lng) => this.toContinuousLng(lng);
 		const hub = new PointerCallbackHub();
 		let dragPanWasEnabled = false;
 		let disposed = false;
 		let touchDragActive = false;
 		let multiTouchCancelled = false;
-		const TOUCH_INFO = { hitTolerance: TOUCH_HIT_TOLERANCE_PX };
+		const touchInfo = (e) => ({
+			hitTolerance: TOUCH_HIT_TOLERANCE_PX,
+			native: e.originalEvent
+		});
 		const preventMapEventDefaults = (e) => {
 			e.preventDefault();
 			e.originalEvent.preventDefault?.();
@@ -342,22 +506,32 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		};
 		const onDown = (e) => {
 			const px = [e.point.x, e.point.y];
-			const info = { altKey: e.originalEvent.altKey };
+			const info = {
+				altKey: e.originalEvent.altKey,
+				shiftKey: e.originalEvent.shiftKey,
+				native: e.originalEvent
+			};
 			hub.fireDown(px, info);
 		};
 		const onMove = (e) => {
 			const px = [e.point.x, e.point.y];
-			hub.fireMove(px);
+			hub.fireMove(px, {
+				shiftKey: e.originalEvent.shiftKey,
+				native: e.originalEvent
+			});
 		};
 		const onUp = (e) => {
 			const px = [e.point.x, e.point.y];
-			hub.fireUp(px);
+			hub.fireUp(px, {
+				shiftKey: e.originalEvent.shiftKey,
+				native: e.originalEvent
+			});
 		};
 		const onTouchStart = (e) => {
 			if (e.points.length !== 1) return;
 			const before = dragPanWasEnabled;
 			const px = [e.point.x, e.point.y];
-			hub.fireDown(px, TOUCH_INFO);
+			hub.fireDown(px, touchInfo(e));
 			touchDragActive = dragPanWasEnabled !== before;
 			if (touchDragActive) preventMapEventDefaults(e);
 		};
@@ -366,20 +540,20 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			const px = [e.point.x, e.point.y];
 			if (touchCount > 1 && touchDragActive && !multiTouchCancelled) {
 				multiTouchCancelled = true;
-				hub.fireUp(px, TOUCH_INFO);
+				hub.fireUp(px, touchInfo(e));
 				touchDragActive = false;
 				preventMapEventDefaults(e);
 				return;
 			}
 			if (touchCount > 1) return;
 			if (touchCount === 1) multiTouchCancelled = false;
-			hub.fireMove(px, TOUCH_INFO);
+			hub.fireMove(px, touchInfo(e));
 			if (touchDragActive) preventMapEventDefaults(e);
 		};
 		const onTouchEnd = (e) => {
 			multiTouchCancelled = false;
 			const px = [e.point.x, e.point.y];
-			hub.fireUp(px, TOUCH_INFO);
+			hub.fireUp(px, touchInfo(e));
 			touchDragActive = false;
 		};
 		map.on("mousedown", onDown);
@@ -403,12 +577,12 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 				}
 			},
 			toPixel(lonLat) {
-				const p = map.project(lonLat);
+				const p = map.project([toContinuousLng(lonLat[0]), lonLat[1]]);
 				return [p.x, p.y];
 			},
 			fromPixel(pixel) {
 				const ll = map.unproject(pixel);
-				return [ll.lng, ll.lat];
+				return [toContinuousLng(ll.lng), ll.lat];
 			},
 			dispose() {
 				if (disposed) return;
@@ -472,9 +646,13 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		return project(position[0], position[1]);
 	}
 	getPixelFromCoordinate(position) {
-		const point = this.map.project(position);
+		const point = this.map.project([this.toContinuousLng(position[0]), position[1]]);
 		return [point.x, point.y];
 	}
+	getCoordinateFromPixel(pixel) {
+		const coordinate = this.map.unproject(pixel);
+		return [this.toContinuousLng(coordinate.lng), coordinate.lat];
+	}
 	getViewportSize() {
 		const container = this.map.getContainer();
 		return {
@@ -504,13 +682,14 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		else this.map.doubleClickZoom.disable();
 	}
 	getResolution() {
-		const zoom = this.map.getZoom();
-		const center = this.map.getCenter();
-		return 40075016.686 * Math.cos(center.lat * Math.PI / 180) / Math.pow(2, zoom + 8);
+		return WEB_MERCATOR_CIRCUMFERENCE / Math.pow(2, this.map.getZoom() + 9);
 	}
 	getZoom() {
 		return this.map.getZoom();
 	}
+	getBearing() {
+		return this.map.getBearing() * (Math.PI / 180);
+	}
 	onPick(layerId, handler, opts) {
 		const onMlClick = (e) => {
 			const handle = this.layers.get(layerId);
@@ -534,7 +713,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 				id: cmId,
 				feature: geojson,
 				pixel: [x, y],
-				coordinate: [e.lngLat.lng, e.lngLat.lat],
+				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.1",
+  "version": "0.2.0-alpha.10",
   "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.6",
-    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.5"
+    "@orbat-mapper/control-measures": "^0.2.0-alpha.16",
+    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.25"
   },
   "peerDependencies": {
     "maplibre-gl": ">=4.0.0 <6.0.0"