@orbat-mapper/tactical-draw-adapter-maplibre 0.2.0-alpha.7 → 0.2.0-alpha.9

package/dist/index.d.mts

@@ -13,10 +13,20 @@ 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;
+  private readonly viewChangeMode;
   private readonly pendingIconImages;
-  constructor(map: maplibregl.Map);
+  readonly scalesGroundPointSymbolsNatively = true;
+  constructor(map: maplibregl.Map, options?: MapLibreAdapterOptions);
   private toContinuousLng;
   protected createLayer(layerId: LayerId, style?: StyleOptions): MapLibreLayerHandle;
   protected destroyLayer(handle: MapLibreLayerHandle): void;
@@ -27,6 +37,7 @@ declare class MapLibreAdapter extends BaseMapAdapter<MapLibreLayerHandle, MapLib
   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;
@@ -48,4 +59,4 @@ declare class MapLibreAdapter extends BaseMapAdapter<MapLibreLayerHandle, MapLib
   setGlobeMode(enabled: boolean): void;
 }
 //#endregion
-export { MapLibreAdapter };
+export { MapLibreAdapter, type MapLibreAdapterOptions };

package/dist/index.mjs

@@ -80,11 +80,7 @@ function buildIconLayer(id, source) {
 		],
 		layout: {
 			"icon-image": ["get", "iconId"],
-			"icon-size": [
-				"coalesce",
-				["get", "iconScale"],
-				1
-			],
+			"icon-size": buildIconSizeExpression(),
 			"icon-rotate": [
 				"*",
 				[
@@ -162,6 +158,60 @@ function buildTextSizeExpression(text) {
 	];
 }
 /**
+* 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", "iconMinPixels"],
+		0
+	];
+	const maxExpr = [
+		"coalesce",
+		["get", "iconMaxPixels"],
+		1e9
+	];
+	const scaleAtZoom = (zoom) => {
+		return [
+			"case",
+			["has", "iconSizeMeters"],
+			[
+				"/",
+				[
+					"max",
+					minExpr,
+					[
+						"min",
+						maxExpr,
+						[
+							"*",
+							["get", "iconSizeMeters"],
+							Math.pow(2, zoom + 9) / WEB_MERCATOR_CIRCUMFERENCE
+						]
+					]
+				],
+				["get", "iconOctagonSize"]
+			],
+			[
+				"coalesce",
+				["get", "iconScale"],
+				1
+			]
+		];
+	};
+	return [
+		"interpolate",
+		["linear"],
+		["zoom"],
+		...Array.from({ length: 25 }, (_, zoom) => [zoom, scaleAtZoom(zoom)]).flat()
+	];
+}
+/**
 * Build the paint expression for a fill layer with per-feature
 * `properties.style.fillColor` overlay. Mirrors `buildCirclePaint`.
 */
@@ -287,10 +337,13 @@ function buildLinePaint(style) {
 }
 var MapLibreAdapter = class extends BaseMapAdapter {
 	map;
+	viewChangeMode;
 	pendingIconImages = /* @__PURE__ */ new Set();
-	constructor(map) {
+	scalesGroundPointSymbolsNatively = true;
+	constructor(map, options = {}) {
 		super();
 		this.map = map;
+		this.viewChangeMode = options.viewChangeMode ?? "continuous";
 	}
 	toContinuousLng(lng) {
 		return nearestWorldCopyLng(lng, this.map.getCenter().lng);
@@ -420,17 +473,19 @@ 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;
@@ -440,7 +495,10 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		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?.();
@@ -450,23 +508,30 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			const px = [e.point.x, e.point.y];
 			const info = {
 				altKey: e.originalEvent.altKey,
-				shiftKey: e.originalEvent.shiftKey
+				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, { shiftKey: e.originalEvent.shiftKey });
+			hub.fireMove(px, {
+				shiftKey: e.originalEvent.shiftKey,
+				native: e.originalEvent
+			});
 		};
 		const onUp = (e) => {
 			const px = [e.point.x, e.point.y];
-			hub.fireUp(px, { shiftKey: e.originalEvent.shiftKey });
+			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);
 		};
@@ -475,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbat-mapper/tactical-draw-adapter-maplibre",
-  "version": "0.2.0-alpha.7",
+  "version": "0.2.0-alpha.9",
   "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",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@orbat-mapper/control-measures": "^0.2.0-alpha.15",
-    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.22"
+    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.24"
   },
   "peerDependencies": {
     "maplibre-gl": ">=4.0.0 <6.0.0"