@orbat-mapper/tactical-draw-adapter-maplibre 0.4.3 → 0.5.0

package/dist/index.d.mts

@@ -62,6 +62,20 @@ declare class PinLayer implements CustomLayerInterface {
   private atlas;
   private pins;
   private ranges;
+  private instanceData;
+  private sortedData;
+  private paintOrder;
+  private gpuOffsets;
+  private depths;
+  private sortMatrix;
+  private sortGlobeMatrix;
+  private sortTransition;
+  private sortWorld;
+  private sortDirty;
+  /** View-wide far-to-near paint order; `false` restores canonical layer order. */
+  private depthSorted;
+  /** Hoisted out of the per-frame sort so no comparator is allocated while panning. */
+  private comparePaintOrder;
   private version;
   private resourceRevision;
   private needsDepth;
@@ -98,6 +112,8 @@ declare class PinLayer implements CustomLayerInterface {
   private buildPin;
   private rebuild;
   render(context: WebGLRenderingContext | WebGL2RenderingContext, input: CustomRenderMethodInput): void;
+  /** Reorder existing instances only when camera/data changes, preserving atlas batches. */
+  private updatePaintOrder;
   private draw;
   /** On-demand GPU pick shares the visual shader including alpha and terrain mask. */
   pick(pixel: PixelCoordinate, tolerance?: number): string | null;

package/dist/index.mjs

@@ -327,6 +327,12 @@ const PIN_GLOBE_RADIUS = EARTH_RADIUS;
 function pinMercator(position) {
 	return MercatorCoordinate.fromLngLat([position[0], Math.max(-89.999999, Math.min(89.999999, position[1]))]);
 }
+/** Scratch sphere position reused by the per-pin, per-frame depth() path. */
+const depthSphere = [
+	0,
+	0,
+	0
+];
 const multiply = (m, v) => [
 	0,
 	1,
@@ -367,6 +373,34 @@ var PinProjection = class {
 			this.matrix[12 + row] = fallback[12 + row] + fallback[row] * xyScale * origin[0] * world + fallback[4 + row] * xyScale * origin[1] * world;
 		}
 	}
+	/**
+	* Globe-sphere position for a world/elevation anchor, written into `out` so the
+	* per-pin depth path stays allocation-free. Single source of the sphere maths
+	* shared with project().
+	*/
+	sphere(worldX, worldY, elevation, out) {
+		const angle = (worldX / this.world + this.origin[0]) * Math.PI * 2 + Math.PI;
+		const t = Math.exp(Math.PI - (worldY / this.world + this.origin[1]) * Math.PI * 2);
+		const scale = 1 + elevation / PIN_GLOBE_RADIUS;
+		out[0] = Math.sin(angle) * 2 * t / (t * t + 1) * scale;
+		out[1] = (t * t - 1) / (t * t + 1) * scale;
+		out[2] = Math.cos(angle) * 2 * t / (t * t + 1) * scale;
+		return out;
+	}
+	/** Allocation-free depth-only projection for sorting large pin batches. */
+	depth(worldX, worldY, elevation) {
+		const m = this.matrix;
+		let z = m[2] * worldX + m[6] * worldY + m[10] * elevation + m[14];
+		let w = m[3] * worldX + m[7] * worldY + m[11] * elevation + m[15];
+		if (this.transition !== 0) {
+			const s = this.sphere(worldX, worldY, elevation, depthSphere);
+			const g = this.globeMatrix;
+			const blend = this.transition;
+			z = z * (1 - blend) + (g[2] * s[0] + g[6] * s[1] + g[10] * s[2] + g[14]) * blend;
+			w = w * (1 - blend) + (g[3] * s[0] + g[7] * s[1] + g[11] * s[2] + g[15]) * blend;
+		}
+		return z / w;
+	}
 	project(worldX, worldY, elevation) {
 		const flat = multiply(this.matrix, [
 			worldX,
@@ -378,16 +412,11 @@ var PinProjection = class {
 			clip: flat,
 			horizon: 1
 		};
-		const x = worldX / this.world + this.origin[0];
-		const y = worldY / this.world + this.origin[1];
-		const angle = x * Math.PI * 2 + Math.PI;
-		const t = Math.exp(Math.PI - y * Math.PI * 2);
-		const scale = 1 + elevation / PIN_GLOBE_RADIUS;
-		const sphere = [
-			Math.sin(angle) * 2 * t / (t * t + 1),
-			(t * t - 1) / (t * t + 1),
-			Math.cos(angle) * 2 * t / (t * t + 1)
-		].map((n) => n * scale);
+		const sphere = this.sphere(worldX, worldY, elevation, [
+			0,
+			0,
+			0
+		]);
 		const globe = multiply(this.globeMatrix, [...sphere, 1]);
 		const horizon = 1 - (1 - sphere.reduce((sum, n, i) => sum + n * this.clippingPlane[i], this.clippingPlane[3])) * Math.max(0, (this.transition - .2) / .8);
 		return {
@@ -439,22 +468,34 @@ function shader(gl, type, source) {
 	}
 	return s;
 }
+/** Copies `source` into `cache`, reporting whether any element differed. */
+function cacheChanged(cache, source) {
+	let changed = false;
+	for (let i = 0; i < cache.length; i++) {
+		if (cache[i] !== source[i]) changed = true;
+		cache[i] = source[i];
+	}
+	return changed;
+}
 const elevationOrSeaLevel = (value) => Number.isFinite(value) ? value : 0;
 /**
 * Appends one instance's worth of vertex-shader input to `data` and extends `ranges`
 * accordingly. Hoisted out of rebuild()'s per-pin loop (ADR n/a) so pushing 10k+ pins
 * never allocates a fresh closure per pin — every varying value is an explicit param.
 */
-function appendPinInstance(data, ranges, image, highlightOnly, instanceId, occlusionTerrain, kind, shape, color, a, target, mode) {
-	if (highlightOnly && kind !== PIN_KIND.HIGHLIGHT) return;
-	const first = data.length / STRIDE;
+/** Extends the trailing draw range when it shares an atlas page, else starts a new one. */
+function pushRange(ranges, page, first, count) {
 	const previous = ranges[ranges.length - 1];
-	if (previous?.page === image.page) previous.count++;
+	if (previous?.page === page) previous.count += count;
 	else ranges.push({
-		page: image.page,
+		page,
 		first,
-		count: 1
+		count
 	});
+}
+function appendPinInstance(data, ranges, image, highlightOnly, instanceId, occlusionTerrain, kind, shape, color, a, target, mode) {
+	if (highlightOnly && kind !== PIN_KIND.HIGHLIGHT) return;
+	pushRange(ranges, image.page, data.length / STRIDE, 1);
 	data.push(...a, ...target, ...shape, ...color, ...image.uv, kind, mode, occlusionTerrain, instanceId);
 }
 /**
@@ -493,6 +534,20 @@ var PinLayer = class {
 	atlas = new PinAtlas();
 	pins = [];
 	ranges = [];
+	instanceData = new Float32Array(0);
+	sortedData = new Float32Array(0);
+	paintOrder = [];
+	gpuOffsets = [];
+	depths = new Float64Array(0);
+	sortMatrix = new Float64Array(16).fill(NaN);
+	sortGlobeMatrix = new Float64Array(16).fill(NaN);
+	sortTransition = NaN;
+	sortWorld = NaN;
+	sortDirty = true;
+	/** View-wide far-to-near paint order; `false` restores canonical layer order. */
+	depthSorted = false;
+	/** Hoisted out of the per-frame sort so no comparator is allocated while panning. */
+	comparePaintOrder = (a, b) => (this.depthSorted ? this.depths[b] - this.depths[a] : 0) || a - b;
 	version = 0;
 	resourceRevision = -1;
 	needsDepth = false;
@@ -525,21 +580,25 @@ var PinLayer = class {
 		const key = `${position[0]}/${position[1]}`;
 		const cached = this.elevationCache.get(key);
 		if (cached !== void 0) return cached;
-		const terrain = this.map.terrain;
-		const manager = terrain.tileManager ?? terrain.sourceCache;
-		const source = terrain.tileManager ? terrain.tileManager.getSource() : terrain.sourceCache.sourceCache.getSource();
-		const { tileID, mercatorX, mercatorY } = terrain._getOverscaledTileIDFromLngLatZoom(new LngLat(position[0], position[1]), Math.min(manager.maxzoom, source.maxzoom + manager.deltaZoom));
-		const x = mercatorX % 8192;
-		const y = mercatorY % 8192;
-		const getSampler = terrain.getElevationSampler ?? terrain._getElevationSampler;
 		let value;
-		if (getSampler) {
-			const sampler = getSampler.call(terrain, tileID);
-			if (!sampler) return NaN;
-			value = sampler(x, y, 8192) * terrain.exaggeration;
-		} else {
-			if (!manager.getSourceTile(tileID, true)?.dem) return NaN;
-			value = terrain.getElevation(tileID, x, y, 8192);
+		try {
+			const terrain = this.map.terrain;
+			const manager = terrain.tileManager ?? terrain.sourceCache;
+			const source = terrain.tileManager ? terrain.tileManager.getSource() : terrain.sourceCache.sourceCache.getSource();
+			const { tileID, mercatorX, mercatorY } = terrain._getOverscaledTileIDFromLngLatZoom(new LngLat(position[0], position[1]), Math.min(manager.maxzoom, source.maxzoom + manager.deltaZoom));
+			const x = mercatorX % 8192;
+			const y = mercatorY % 8192;
+			const getSampler = terrain.getElevationSampler ?? terrain._getElevationSampler;
+			if (getSampler) {
+				const sampler = getSampler.call(terrain, tileID);
+				if (!sampler) return NaN;
+				value = sampler(x, y, 8192) * terrain.exaggeration;
+			} else {
+				if (!manager.getSourceTile(tileID, true)?.dem) return NaN;
+				value = terrain.getElevation(tileID, x, y, 8192);
+			}
+		} catch {
+			return NaN;
 		}
 		this.elevationCache.set(key, value);
 		return value;
@@ -642,6 +701,7 @@ var PinLayer = class {
 		}
 		this.pins = pins;
 		this.prioritizesSelection = pins[0]?.presentation.prioritizePins ?? false;
+		this.depthSorted = pins[0]?.presentation.depthSort ?? false;
 		if (this.elevationCache.size > pins.length * 60 + 1e3) this.elevationCache.clear();
 		if (!this.program) {
 			this.onStatus?.({
@@ -813,6 +873,7 @@ var PinLayer = class {
 	}
 	rebuild() {
 		if (!this.ready) return;
+		this.sortDirty = true;
 		if (!this.dirty) {
 			const previousPending = new Set(this.pendingElevation);
 			const center = {
@@ -829,8 +890,10 @@ var PinLayer = class {
 					this.dirty = true;
 					break;
 				}
+				const patch = new Float32Array(data);
+				this.instanceData.set(patch, slice.offset);
 				this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
-				this.gl.bufferSubData(this.gl.ARRAY_BUFFER, slice.offset * Float32Array.BYTES_PER_ELEMENT, new Float32Array(data));
+				this.gl.bufferSubData(this.gl.ARRAY_BUFFER, this.gpuOffsets[i] * Float32Array.BYTES_PER_ELEMENT, patch);
 			}
 			if (!this.dirty) {
 				this.changedPins.clear();
@@ -870,7 +933,11 @@ var PinLayer = class {
 		});
 		this.ranges = ranges;
 		gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.DYNAMIC_DRAW);
+		this.instanceData = new Float32Array(data);
+		this.paintOrder = this.pins.map((_, i) => i);
+		this.gpuOffsets = this.slices.map((slice) => slice.offset);
+		this.depths = new Float64Array(this.pins.length);
+		gl.bufferData(gl.ARRAY_BUFFER, this.instanceData, gl.DYNAMIC_DRAW);
 		this.dirty = false;
 		this.changedPins.clear();
 	}
@@ -889,8 +956,52 @@ var PinLayer = class {
 		if (this.status.status !== "supported") return;
 		this.frame = input;
 		this.projection.update(input, this.origin, this.map.getCenter(), 512 * 2 ** this.map.getZoom(), this.map.getProjection()?.type === "globe");
+		this.updatePaintOrder();
 		this.draw(context, false);
 	}
+	/** Reorder existing instances only when camera/data changes, preserving atlas batches. */
+	updatePaintOrder() {
+		const sorted = this.depthSorted;
+		let changed = this.sortDirty;
+		if (sorted) {
+			if (cacheChanged(this.sortMatrix, this.matrix)) changed = true;
+			if (cacheChanged(this.sortGlobeMatrix, this.projection.globeMatrix)) changed = true;
+			if (this.sortTransition !== this.projection.transition) changed = true;
+			if (this.sortWorld !== this.projection.world) changed = true;
+			this.sortTransition = this.projection.transition;
+			this.sortWorld = this.projection.world;
+		}
+		if (!changed) return;
+		this.sortDirty = false;
+		if (sorted) for (let i = 0; i < this.pins.length; i++) {
+			const offset = this.slices[i].offset;
+			const data = this.instanceData;
+			const depth = this.projection.depth(data[offset] * this.projection.world, data[offset + 1] * this.projection.world, this.elevations[i]);
+			this.depths[i] = Number.isFinite(depth) ? depth : -Infinity;
+		}
+		const compare = this.comparePaintOrder;
+		let ordered = true;
+		for (let i = 1; i < this.paintOrder.length; i++) if (compare(this.paintOrder[i - 1], this.paintOrder[i]) > 0) {
+			ordered = false;
+			break;
+		}
+		if (ordered) return;
+		this.paintOrder.sort(compare);
+		if (this.sortedData.length !== this.instanceData.length) this.sortedData = new Float32Array(this.instanceData.length);
+		const ranges = [];
+		let offset = 0;
+		for (const i of this.paintOrder) {
+			const slice = this.slices[i];
+			this.sortedData.set(this.instanceData.subarray(slice.offset, slice.offset + slice.length), offset);
+			this.gpuOffsets[i] = offset;
+			const count = slice.length / STRIDE;
+			if (count) pushRange(ranges, slice.page, offset / STRIDE, count);
+			offset += slice.length;
+		}
+		this.ranges = ranges;
+		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
+		this.gl.bufferSubData(this.gl.ARRAY_BUFFER, 0, this.sortedData);
+	}
 	draw(gl, pick) {
 		const u = this.uniforms ?? this.resolveUniforms(gl);
 		gl.useProgram(this.program);
@@ -981,7 +1092,10 @@ var PinLayer = class {
 		const pixels = new Uint8Array(rw * rh * 4);
 		gl.readPixels(x, y, rw, rh, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
 		let id = 0;
-		for (let i = 0; i < pixels.length; i += 4) id = Math.max(id, pixels[i] + pixels[i + 1] * 256 + pixels[i + 2] * 65536);
+		for (let i = 0; i < pixels.length; i += 4) {
+			const candidate = pixels[i] + pixels[i + 1] * 256 + pixels[i + 2] * 65536;
+			if (candidate && (!id || this.gpuOffsets[candidate - 1] > this.gpuOffsets[id - 1])) id = candidate;
+		}
 		gl.disable(gl.SCISSOR_TEST);
 		gl.bindFramebuffer(gl.FRAMEBUFFER, previous);
 		this.map.painter.context.setDirty();
@@ -1893,8 +2007,14 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		if (this.map.getSource(handle.sourceId)) this.map.removeSource(handle.sourceId);
 	}
 	applyFeatureGroups(layerId, input) {
+		const depthSorted = input.find((group) => group.pin)?.pin.presentation.depthSort ?? false;
+		const sortedPins = [];
 		const groups = [];
 		for (const group of input) if (group.pin && this.getPinPresentationCapability().status !== "unsupported") {
+			if (depthSorted) {
+				sortedPins.push(group.pin);
+				continue;
+			}
 			const previous = groups[groups.length - 1];
 			if (previous?.pinBatch) previous.pinBatch.push(group.pin);
 			else groups.push({
@@ -1907,6 +2027,12 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			...group,
 			id: `ordinary:${group.id}`
 		});
+		if (sortedPins.length) groups.push({
+			id: "pin-depth-sorted",
+			features: [],
+			iconResources: [],
+			pinBatch: sortedPins
+		});
 		const handle = this.layers.get(layerId);
 		if (!handle) return;
 		const allPins = groups.flatMap((group) => group.pinBatch ?? []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbat-mapper/tactical-draw-adapter-maplibre",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "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.27.0",
-    "@orbat-mapper/tactical-draw": "^0.9.2"
+    "@orbat-mapper/tactical-draw": "^0.10.0"
   },
   "peerDependencies": {
     "maplibre-gl": ">=5.8.0 <7.0.0"