@sakuzu/maplibre-gl-draw 2.1.0 → 2.1.2

package/dist/view/ui/selection-ui/renderer.js

@@ -11,21 +11,31 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _SelectionUIRenderer_instances, _SelectionUIRenderer_strokeRenderer, _SelectionUIRenderer_extensions, _SelectionUIRenderer_config, _SelectionUIRenderer_transform, _SelectionUIRenderer_projectionData, _SelectionUIRenderer_drawRotatingBoundingBox, _SelectionUIRenderer_drawIndividualBoundingBox, _SelectionUIRenderer_drawCombinedBoundingBox, _SelectionUIRenderer_drawBoundingBoxWithMargin, _SelectionUIRenderer_drawPointBoundingBox, _SelectionUIRenderer_applyMargin, _SelectionUIRenderer_strokeBoundingBox, _SelectionUIRenderer_strokePath;
-import { applyMarginToBoundingBox } from '../../../shared/math/index.js';
+var _SelectionUIRenderer_instances, _SelectionUIRenderer_strokeRenderer, _SelectionUIRenderer_extensions, _SelectionUIRenderer_terrain, _SelectionUIRenderer_config, _SelectionUIRenderer_transform, _SelectionUIRenderer_projectionData, _SelectionUIRenderer_drawRotatingBoundingBox, _SelectionUIRenderer_drawIndividualBoundingBox, _SelectionUIRenderer_drawCombinedBoundingBox, _SelectionUIRenderer_drawBoundingBoxWithMargin, _SelectionUIRenderer_drawPointBoundingBox, _SelectionUIRenderer_pointFrame, _SelectionUIRenderer_applyMargin, _SelectionUIRenderer_strokeBoundingBox, _SelectionUIRenderer_strokePath;
+import { applyMarginToBoundingBox, } from '../../../shared/math/index.js';
+import { anchorElevationMeters, isAnchorActive, projectAnchorAt } from '../../terrain/anchor.js';
+import { TerrainContext } from '../../terrain/context.js';
 import { computeBoundingBox, computeCombinedBoundingBox, hasZeroArea, rotateBoundingBox, } from './bounding-box.js';
+/**
+ * How far the positions differ that the scale of the screen around a point is measured
+ * between, in pixels at the zoom of the frame
+ */
+const POINT_FRAME_PROBE_PX = 4;
 export class SelectionUIRenderer {
-    constructor(strokeRenderer, config, extensions) {
+    constructor(strokeRenderer, config, extensions, terrain = new TerrainContext()) {
         _SelectionUIRenderer_instances.add(this);
         _SelectionUIRenderer_strokeRenderer.set(this, void 0);
         /** The Selection UI extension points of the draw instance this renderer belongs to */
         _SelectionUIRenderer_extensions.set(this, void 0);
+        /** The terrain state of the draw instance (an inactive one projects with the map) */
+        _SelectionUIRenderer_terrain.set(this, void 0);
         _SelectionUIRenderer_config.set(this, void 0);
         _SelectionUIRenderer_transform.set(this, null);
         _SelectionUIRenderer_projectionData.set(this, null);
         __classPrivateFieldSet(this, _SelectionUIRenderer_strokeRenderer, strokeRenderer, "f");
         __classPrivateFieldSet(this, _SelectionUIRenderer_config, config, "f");
         __classPrivateFieldSet(this, _SelectionUIRenderer_extensions, extensions, "f");
+        __classPrivateFieldSet(this, _SelectionUIRenderer_terrain, terrain, "f");
     }
     /** Compute the BoundingBox of a feature (also usable from outside) */
     computeFeatureBoundingBox(feature) {
@@ -80,7 +90,7 @@ export class SelectionUIRenderer {
         __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_drawCombinedBoundingBox).call(this, features, zoom);
     }
 }
-_SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extensions = new WeakMap(), _SelectionUIRenderer_config = new WeakMap(), _SelectionUIRenderer_transform = new WeakMap(), _SelectionUIRenderer_projectionData = new WeakMap(), _SelectionUIRenderer_instances = new WeakSet(), _SelectionUIRenderer_drawRotatingBoundingBox = function _SelectionUIRenderer_drawRotatingBoundingBox(features, zoom, dragState) {
+_SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extensions = new WeakMap(), _SelectionUIRenderer_terrain = new WeakMap(), _SelectionUIRenderer_config = new WeakMap(), _SelectionUIRenderer_transform = new WeakMap(), _SelectionUIRenderer_projectionData = new WeakMap(), _SelectionUIRenderer_instances = new WeakSet(), _SelectionUIRenderer_drawRotatingBoundingBox = function _SelectionUIRenderer_drawRotatingBoundingBox(features, zoom, dragState) {
     // When dragState.operation === 'rotate', rotateInfo always exists
     const rotateInfo = dragState.rotateInfo;
     if (!rotateInfo)
@@ -124,17 +134,16 @@ _SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extens
         if (!bbox)
             continue;
         // A single-coordinate feature (such as Point) is computed from the extent of the
-        // point frame + the margin. The coordinate used is the center of the bbox (features
-        // other than Point can be zero-area too, e.g. a MultiPoint with a single point, so
-        // coordinates must not be treated as a Coordinate)
+        // point frame + the margin, as its own frame is (#pointFrame). The coordinate used is
+        // the center of the bbox (features other than Point can be zero-area too, e.g. a
+        // MultiPoint with a single point, so coordinates must not be treated as a Coordinate)
         if (hasZeroArea(bbox)) {
-            const center = transform.project(bbox.center);
-            for (const corner of __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f").resolvePointFrameCorners(feature, center, margin)) {
-                const at = transform.unproject(corner);
-                minLng = Math.min(minLng, at.lng);
-                maxLng = Math.max(maxLng, at.lng);
-                minLat = Math.min(minLat, at.lat);
-                maxLat = Math.max(maxLat, at.lat);
+            const frame = __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_pointFrame).call(this, feature, bbox.center, zoom);
+            for (const [lng, lat] of frame?.coords ?? []) {
+                minLng = Math.min(minLng, lng);
+                maxLng = Math.max(maxLng, lng);
+                minLat = Math.min(minLat, lat);
+                maxLat = Math.max(maxLat, lat);
             }
             continue;
         }
@@ -168,19 +177,37 @@ _SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extens
         return;
     __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokeBoundingBox).call(this, __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_applyMargin).call(this, bbox, zoom), zoom);
 }, _SelectionUIRenderer_drawPointBoundingBox = function _SelectionUIRenderer_drawPointBoundingBox(feature, coord, zoom) {
-    if (!__classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f"))
+    const frame = __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_pointFrame).call(this, feature, coord, zoom);
+    if (!frame)
         return;
+    __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokePath).call(this, frame.coords, zoom, {
+        elevationMeters: frame.elevationMeters,
+        followTerrain: false,
+    });
+}, _SelectionUIRenderer_pointFrame = function _SelectionUIRenderer_pointFrame(feature, coord, zoom) {
     const transform = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f");
-    const center = transform.project(coord);
+    if (!transform)
+        return null;
+    const terrain = __classPrivateFieldGet(this, _SelectionUIRenderer_terrain, "f");
+    const elevationMeters = anchorElevationMeters(terrain, coord[0], coord[1]);
+    const anchored = isAnchorActive(terrain);
+    const project = (at) => anchored ? projectAnchorAt(terrain, at[0], at[1], elevationMeters) : transform.project(at);
+    const center = project(coord);
+    if (!center)
+        return null;
     const margin = __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.margin;
-    const coords = __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f")
-        .resolvePointFrameCorners(feature, center, margin)
-        .map((corner) => {
+    const corners = __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f").resolvePointFrameCorners(feature, center, margin);
+    const toPosition = anchored ? screenToPlane(project, coord, center, zoom) : null;
+    const coords = corners.map((corner) => {
+        const position = toPosition?.(corner);
+        if (position)
+            return position;
+        // No terrain, or the plane seen edge on: the corner is cast onto the map
         const at = transform.unproject(corner);
         return [at.lng, at.lat];
     });
     coords.push(coords[0]);
-    __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokePath).call(this, coords, zoom);
+    return { coords, elevationMeters };
 }, _SelectionUIRenderer_applyMargin = function _SelectionUIRenderer_applyMargin(bbox, zoom) {
     if (!__classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f"))
         return bbox;
@@ -192,13 +219,49 @@ _SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extens
 }, _SelectionUIRenderer_strokeBoundingBox = function _SelectionUIRenderer_strokeBoundingBox(bbox, zoom) {
     const corners = [bbox.topLeft, bbox.topRight, bbox.bottomRight, bbox.bottomLeft];
     __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokePath).call(this, [...corners, bbox.topLeft], zoom);
-}, _SelectionUIRenderer_strokePath = function _SelectionUIRenderer_strokePath(coords, zoom) {
+}, _SelectionUIRenderer_strokePath = function _SelectionUIRenderer_strokePath(coords, zoom, placement = { followTerrain: true }) {
     __classPrivateFieldGet(this, _SelectionUIRenderer_strokeRenderer, "f").draw(coords, __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.stroke, {
         widthUnit: 'pixels',
         closed: true,
-        // The frame follows the ground. The elevation comes from the same function as the
-        // handles, so the corners of the frame always match the corner handles and never
-        // drift from the position that can be grabbed
-        followTerrain: true,
+        followTerrain: placement.followTerrain,
+        ...(placement.elevationMeters !== undefined && {
+            elevationMeters: placement.elevationMeters,
+        }),
     }, zoom, __classPrivateFieldGet(this, _SelectionUIRenderer_projectionData, "f") ?? undefined);
 };
+/**
+ * The inverse of a projection around a point, to the first order: a point of the screen near
+ * `center` to the position whose projection it is
+ *
+ * The scale of the screen along the longitude and the latitude is measured by projecting
+ * positions a few pixels to either side of `coord`.
+ *
+ * @returns null when the projection is degenerate there (seen edge on, or a probe behind the
+ *   camera)
+ */
+function screenToPlane(project, coord, center, zoom) {
+    const [lng, lat] = coord;
+    // Degrees of longitude per pixel at the zoom on a 512 px world, a few pixels' worth
+    const step = (360 / (512 * 2 ** zoom)) * POINT_FRAME_PROBE_PX;
+    const latStep = Math.min(step, Math.max(1e-9, (89.9 - Math.abs(lat)) / 2));
+    const east = project([lng + step, lat]);
+    const west = project([lng - step, lat]);
+    const north = project([lng, lat + latStep]);
+    const south = project([lng, lat - latStep]);
+    if (!east || !west || !north || !south)
+        return null;
+    // The screen per degree of longitude (a, c) and of latitude (b, d)
+    const a = (east.x - west.x) / (2 * step);
+    const c = (east.y - west.y) / (2 * step);
+    const b = (north.x - south.x) / (2 * latStep);
+    const d = (north.y - south.y) / (2 * latStep);
+    const det = a * d - b * c;
+    const scale = Math.max(Math.abs(a), Math.abs(b), Math.abs(c), Math.abs(d));
+    if (!Number.isFinite(det) || Math.abs(det) <= 1e-12 * scale * scale)
+        return null;
+    return (point) => {
+        const dx = point.x - center.x;
+        const dy = point.y - center.y;
+        return [lng + (d * dx - b * dy) / det, lat + (a * dy - c * dx) / det];
+    };
+}

package/dist/view/ui/selection-ui-drawer.js

@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
 import { THINNING_VIEWPORT_MARGIN_PX } from '../../shared/config/selection.js';
+import { createCoordinateTransform } from '../../shared/math/index.js';
 import { supportsVertexEditing } from '../../shared/utils/coordinates.js';
 import { isGlobeProjection } from '../../shared/utils/map.js';
 import { isLocallyHidden } from '../../store/local-visibility.js';
@@ -25,14 +26,9 @@ isLocked = false) {
     if (pointInstanceRenderer) {
         pointInstanceRenderer.setProjectionData(projectionData);
     }
-    // Set the coordinate transform
-    const coordinateTransform = {
-        project: (lngLat) => map.project([lngLat[0], lngLat[1]]),
-        unproject: (point) => {
-            const ll = map.unproject([point.x, point.y]);
-            return { lng: ll.lng, lat: ll.lat };
-        },
-    };
+    // Set the coordinate transform: the projection the markers are drawn with and the hit
+    // testing uses (the anchor projection while the terrain is on, the map's otherwise)
+    const coordinateTransform = createCoordinateTransform(map);
     selectionUIRenderer.setTransform(coordinateTransform);
     selectionUIRenderer.setProjectionData(projectionData);
     selectionHandlesRenderer.setTransform(coordinateTransform);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakuzu/maplibre-gl-draw",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "WebGL2 drawing and editing engine for MapLibre GL JS: points, lines, and polygons rendered in a custom layer, with selection, hit testing, and geometry utilities.",
   "keywords": [
     "maplibre",