@orbat-mapper/tactical-draw-adapter-maplibre 0.8.2 → 0.8.4

package/dist/index.d.mts

@@ -31,6 +31,12 @@ declare class PinResources {
   revision: number;
   private key;
   private resources;
+  /**
+   * Decoded SVGs by resource id. Decoding does not depend on scale or pixel
+   * ratio (the atlas scales on draw), so a roster change re-decodes only new
+   * icons. Pruned to the current roster in `setRoster`.
+   */
+  private readonly decoded;
   private pending?;
   private textures;
   private context?;
@@ -45,6 +51,7 @@ declare class PinResources {
    */
   setRoster(pins: readonly PinRender[], pixelRatio?: number): void;
   load(gl: WebGL2RenderingContext): Promise<PinResourceSnapshot | undefined>;
+  private decode;
   dispose(): void;
 }
 //#endregion
@@ -299,6 +306,8 @@ declare class MapLibreAdapter extends BaseMapAdapter<MapLibreLayerHandle, MapLib
   private map;
   private readonly viewChangeMode;
   private readonly pendingIconImages;
+  /** `icon-offset` per registered icon resource id, computed once per resource. */
+  private readonly iconOffsets;
   readonly scalesGroundPointSymbolsNatively = true;
   private terrainActive;
   private terrainBanding;
@@ -354,11 +363,12 @@ declare class MapLibreAdapter extends BaseMapAdapter<MapLibreLayerHandle, MapLib
   /**
    * Promote a source feature for MapLibre: stamp `_fid` (so data-driven paint
    * and picks can key on the caller's feature id) and, for a hatch-patterned
-   * Polygon, `_fillPatternImageId` (registering the tile image on demand). At
-   * most one object spread — a feature needing neither passes through
-   * untouched.
+   * Polygon, `_fillPatternImageId` (registering the tile image on demand), and
+   * for an icon point, `_iconOffset` (cached per resource). At most one object
+   * spread — a feature needing none of these passes through untouched.
    */
   private promoteFeature;
+  private resolveIconOffset;
   /**
    * Resolve a hatch-patterned Polygon's `style.fillPattern`/`fillColor` to its
    * hatch-tile image id, registering the image on demand. Returns `undefined`

package/dist/index.mjs

@@ -63,6 +63,12 @@ var PinResources = class {
 	revision = 0;
 	key = "";
 	resources = /* @__PURE__ */ new Map();
+	/**
+	* Decoded SVGs by resource id. Decoding does not depend on scale or pixel
+	* ratio (the atlas scales on draw), so a roster change re-decodes only new
+	* icons. Pruned to the current roster in `setRoster`.
+	*/
+	decoded = /* @__PURE__ */ new Map();
 	pending;
 	textures = [];
 	context;
@@ -97,6 +103,7 @@ var PinResources = class {
 		}
 		const key = JSON.stringify([...resources].map(([id, value]) => [id, value.scale]).sort(([a], [b]) => a.localeCompare(b)));
 		if (key === this.key) return;
+		for (const id of this.decoded.keys()) if (!resources.has(id)) this.decoded.delete(id);
 		this.key = key;
 		this.resources = resources;
 		this.revision++;
@@ -114,7 +121,7 @@ var PinResources = class {
 			const side = Math.max(256, Math.sqrt(area) * 1.3, ...sizes.flatMap((s) => [s.w, s.h]));
 			const atlas = new PinAtlas(Math.min(2048, gl.getParameter(gl.MAX_TEXTURE_SIZE), 2 ** Math.ceil(Math.log2(side))));
 			const icons = [...this.resources.values()];
-			const images = await Promise.all(icons.map(({ pin }) => decodeIcon(pin.resource)));
+			const images = await Promise.all(icons.map(({ pin }) => this.decode(pin.resource)));
 			if (this.disposed || revision !== this.revision) return;
 			icons.forEach(({ pin, scale }, i) => atlas.add(pin.resource, scale, images[i]));
 			const textures = [];
@@ -146,6 +153,17 @@ var PinResources = class {
 			};
 		})();
 	}
+	decode(resource) {
+		let image = this.decoded.get(resource.id);
+		if (!image) {
+			image = decodeIcon(resource);
+			image.catch(() => {
+				if (this.decoded.get(resource.id) === image) this.decoded.delete(resource.id);
+			});
+			this.decoded.set(resource.id, image);
+		}
+		return image;
+	}
 	dispose() {
 		this.disposed = true;
 		this.revision++;
@@ -154,6 +172,7 @@ var PinResources = class {
 		for (const texture of this.textures) this.context?.deleteTexture(texture);
 		this.textures = [];
 		this.resources.clear();
+		this.decoded.clear();
 		this.pending = void 0;
 	}
 };
@@ -1484,6 +1503,8 @@ function buildIconSizing(props) {
 //#region src/ml-adapter.ts
 /** Feature property key for the resolved hatch-pattern image id (see `promoteFeature`). */
 const FILL_PATTERN_IMAGE_ID_PROPERTY = "_fillPatternImageId";
+/** Feature property key for a point symbol's `icon-offset` (see `promoteFeature`). */
+const ICON_OFFSET_PROPERTY = "_iconOffset";
 const DEFAULT_LINE_COLOR = "#000";
 const DEFAULT_LINE_WIDTH = 2;
 /**
@@ -1765,6 +1786,11 @@ function buildIconLayer(id, source, iconSize = buildIconSizeExpression()) {
 				],
 				180 / Math.PI
 			],
+			"icon-offset": [
+				"coalesce",
+				["get", ICON_OFFSET_PROPERTY],
+				["literal", [0, 0]]
+			],
 			"icon-rotation-alignment": "viewport",
 			"icon-pitch-alignment": "viewport",
 			"icon-allow-overlap": true,
@@ -1778,12 +1804,14 @@ function buildIconLayer(id, source, iconSize = buildIconSizeExpression()) {
 		] }
 	};
 }
-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>`;
+/** The icon image: the resource's own canvas, no padding (see `iconOffset`). */
+function iconSvg(resource) {
+	const { width, height } = resource;
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${resource.svg}</svg>`;
+}
+/** `icon-offset` placing a cropped icon's `resource.anchor` on the point (image px). */
+function iconOffset(resource) {
+	return [resource.width / 2 - resource.anchor[0], resource.height / 2 - resource.anchor[1]];
 }
 /**
 * Per-feature icon size, using integer zoom stops:
@@ -2164,6 +2192,8 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 	map;
 	viewChangeMode;
 	pendingIconImages = /* @__PURE__ */ new Set();
+	/** `icon-offset` per registered icon resource id, computed once per resource. */
+	iconOffsets = /* @__PURE__ */ new Map();
 	scalesGroundPointSymbolsNatively = true;
 	terrainActive = false;
 	terrainBanding;
@@ -2696,15 +2726,17 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 	/**
 	* Promote a source feature for MapLibre: stamp `_fid` (so data-driven paint
 	* and picks can key on the caller's feature id) and, for a hatch-patterned
-	* Polygon, `_fillPatternImageId` (registering the tile image on demand). At
-	* most one object spread — a feature needing neither passes through
-	* untouched.
+	* Polygon, `_fillPatternImageId` (registering the tile image on demand), and
+	* for an icon point, `_iconOffset` (cached per resource). At most one object
+	* spread — a feature needing none of these passes through untouched.
 	*/
 	promoteFeature(feature) {
 		const extra = {};
 		if (feature.id !== void 0) extra._fid = feature.id;
 		const imageId = this.resolveFillPatternImage(feature);
 		if (imageId !== void 0) extra[FILL_PATTERN_IMAGE_ID_PROPERTY] = imageId;
+		const offset = this.resolveIconOffset(feature);
+		if (offset !== void 0) extra[ICON_OFFSET_PROPERTY] = offset;
 		if (Object.keys(extra).length === 0) return feature;
 		return {
 			...feature,
@@ -2714,6 +2746,18 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			}
 		};
 	}
+	resolveIconOffset(feature) {
+		const iconId = feature.properties?.iconId;
+		if (typeof iconId !== "string") return void 0;
+		let offset = this.iconOffsets.get(iconId);
+		if (offset === void 0) {
+			const resource = this.getIconResource(iconId);
+			if (!resource) return void 0;
+			offset = iconOffset(resource);
+			this.iconOffsets.set(iconId, offset);
+		}
+		return offset;
+	}
 	/**
 	* Resolve a hatch-patterned Polygon's `style.fillPattern`/`fillColor` to its
 	* hatch-tile image id, registering the image on demand. Returns `undefined`
@@ -2748,11 +2792,12 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 				for (const handle of this.layers.values()) for (const bundle of handle.groupBundles.values()) if (bundle.requiredIconIds.has(resource.id)) this.updateGroupBundleSource(bundle);
 			};
 			image.onerror = () => this.pendingIconImages.delete(resource.id);
-			image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(centeredSvg(resource))}`;
+			image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(iconSvg(resource))}`;
 		}
 	}
 	removeIconResource(id) {
 		this.pendingIconImages.delete(id);
+		this.iconOffsets.delete(id);
 		if (this.map.hasImage(id)) this.map.removeImage(id);
 	}
 	attachNativeEvent(type, onEvent) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbat-mapper/tactical-draw-adapter-maplibre",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "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.32.0",
-    "@orbat-mapper/tactical-draw": "^0.13.2"
+    "@orbat-mapper/tactical-draw": "^0.14.0",
+    "@orbat-mapper/control-measures": "^0.32.0"
   },
   "peerDependencies": {
     "maplibre-gl": ">=5.8.0 <7.0.0"