@sakuzu/maplibre-gl-draw 2.1.2 → 2.1.4

package/dist/view/shaders/initializer.d.ts

@@ -1,3 +1,4 @@
+import type { AnchoredOutlineRenderer } from '../renderers/anchored-outline.js';
 import type { FeatureDrawer } from '../renderers/drawer.js';
 import type { SDFLineRenderer } from '../renderers/line/sdf-line.js';
 import type { PointInstanceRenderer } from '../renderers/point/point-instance.js';
@@ -16,6 +17,8 @@ export interface ShaderInitializerRenderers {
     tentativeRenderer: TentativeRenderer | null;
     quadShader: QuadShader | null;
     strokeRenderer: StrokeRenderer | null;
+    /** The outlines laid on the screen around an anchor (the frames of points) */
+    outlineRenderer: AnchoredOutlineRenderer | null;
     pointShapeRenderer: PointShapeRenderer | null;
     pointInstanceRenderer: PointInstanceRenderer | null;
     sdfLineRenderer: SDFLineRenderer | null;

package/dist/view/shaders/initializer.js

@@ -23,7 +23,7 @@ export class ShaderInitializer {
      * Makes every renderer ensure its shader
      */
     ensureShaders(shaderData) {
-        const { featureDrawer, tentativeRenderer, quadShader, strokeRenderer, pointShapeRenderer, pointInstanceRenderer, sdfLineRenderer, polygonBatchRenderer, sdfPolygonRenderer, fillShaderManager, } = this.renderers;
+        const { featureDrawer, tentativeRenderer, quadShader, strokeRenderer, outlineRenderer, pointShapeRenderer, pointInstanceRenderer, sdfLineRenderer, polygonBatchRenderer, sdfPolygonRenderer, fillShaderManager, } = this.renderers;
         if (featureDrawer) {
             featureDrawer.ensureShader(shaderData);
         }
@@ -36,6 +36,9 @@ export class ShaderInitializer {
         if (strokeRenderer) {
             strokeRenderer.ensureShader(shaderData);
         }
+        if (outlineRenderer) {
+            outlineRenderer.ensureShader(shaderData);
+        }
         if (pointShapeRenderer) {
             pointShapeRenderer.ensureShader(shaderData);
         }
@@ -80,7 +83,7 @@ export class ShaderInitializer {
      * uniforms once per frame and applies them for each slot.
      */
     applyOffsetUniforms(uniforms) {
-        const { featureDrawer, tentativeRenderer, quadShader, strokeRenderer, pointShapeRenderer, pointInstanceRenderer, sdfLineRenderer, polygonBatchRenderer, sdfPolygonRenderer, fillShaderManager, } = this.renderers;
+        const { featureDrawer, tentativeRenderer, quadShader, strokeRenderer, outlineRenderer, pointShapeRenderer, pointInstanceRenderer, sdfLineRenderer, polygonBatchRenderer, sdfPolygonRenderer, fillShaderManager, } = this.renderers;
         if (featureDrawer) {
             featureDrawer.setOffsetUniforms(uniforms);
         }
@@ -93,6 +96,9 @@ export class ShaderInitializer {
         if (strokeRenderer) {
             strokeRenderer.setOffsetUniforms(uniforms);
         }
+        if (outlineRenderer) {
+            outlineRenderer.setOffsetUniforms(uniforms);
+        }
         if (pointShapeRenderer) {
             pointShapeRenderer.setOffsetUniforms(uniforms);
         }

package/dist/view/terrain/drape/renderer.js

@@ -207,6 +207,15 @@ float dashDistance(vec2 sa, vec2 sb, float start, float len, float dash, float p
     return best;
 }
 
+// The coverage of an outline of a half width at a screen distance from it. Below one
+// pixel of width the outline is drawn one pixel wide and fainter by its width, so the ink
+// per unit of length follows the width and goes to nothing with it (the rule of the
+// vertex path's line and outline shaders)
+float strokeCoverage(float halfWidth, float dist) {
+    float ink = clamp(2.0 * halfWidth, 0.0, 1.0);
+    return clamp(max(halfWidth, 0.5) + 0.5 - dist, 0.0, 1.0) * ink;
+}
+
 // Compose on top (premultiplied alpha)
 vec4 over(vec4 below, vec3 rgb, float a) {
     return vec4(rgb * a + below.rgb * (1.0 - a), a + below.a * (1.0 - a));
@@ -342,7 +351,7 @@ void main() {
         }
 
         if (paints && halfWidth > 0.0 && stroke.a > 0.0) {
-            float coverage = clamp(halfWidth + 0.5 - strokeDist, 0.0, 1.0);
+            float coverage = strokeCoverage(halfWidth, strokeDist);
             if (coverage > 0.0) acc = over(acc, stroke.rgb, stroke.a * coverage * factors.x);
         }
 
@@ -367,7 +376,7 @@ void main() {
             // for features that have no outline (the same as the immediate mode), and
             // it is solid under a dashed outline too
             float selHalf = halfWidth + u_selection_stroke_extra * 0.5;
-            selStroke = max(selStroke, clamp(selHalf + 0.5 - minDist, 0.0, 1.0) * factors.x);
+            selStroke = max(selStroke, strokeCoverage(selHalf, minDist) * factors.x);
         }
     }
 

package/dist/view/ui/selection-ui/renderer.d.ts

@@ -9,13 +9,14 @@ import type { ProjectionData } from 'maplibre-gl';
 import type { SelectionUIConfig } from '../../../shared/config/selection.js';
 import { type CoordinateTransform } from '../../../shared/math/index.js';
 import type { DragState, Feature } from '../../../store/types.js';
+import type { AnchoredOutlineRenderer } from '../../renderers/anchored-outline.js';
 import type { StrokeRenderer } from '../../renderers/stroke.js';
 import { TerrainContext } from '../../terrain/context.js';
 import type { SelectionExtensionRegistry } from './extension-registry.js';
 import type { BoundingBoxCoords } from './types.js';
 export declare class SelectionUIRenderer {
     #private;
-    constructor(strokeRenderer: StrokeRenderer, config: SelectionUIConfig, extensions: SelectionExtensionRegistry, terrain?: TerrainContext);
+    constructor(strokeRenderer: StrokeRenderer, outlineRenderer: AnchoredOutlineRenderer, config: SelectionUIConfig, extensions: SelectionExtensionRegistry, terrain?: TerrainContext);
     /** Compute the BoundingBox of a feature (also usable from outside) */
     computeFeatureBoundingBox(feature: Feature): BoundingBoxCoords | null;
     /** Compute the combined BoundingBox of several features (also usable from outside) */

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

@@ -11,20 +11,18 @@ 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_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;
+var _SelectionUIRenderer_instances, _SelectionUIRenderer_strokeRenderer, _SelectionUIRenderer_outlineRenderer, _SelectionUIRenderer_extensions, _SelectionUIRenderer_terrain, _SelectionUIRenderer_config, _SelectionUIRenderer_transform, _SelectionUIRenderer_projectionData, _SelectionUIRenderer_drawRotatingBoundingBox, _SelectionUIRenderer_drawIndividualBoundingBox, _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 { anchorGhostOpacity } from '../../terrain/occlusion.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, terrain = new TerrainContext()) {
+    constructor(strokeRenderer, outlineRenderer, config, extensions, terrain = new TerrainContext()) {
         _SelectionUIRenderer_instances.add(this);
         _SelectionUIRenderer_strokeRenderer.set(this, void 0);
+        /** Draws the frames of points, which are figures of the screen */
+        _SelectionUIRenderer_outlineRenderer.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) */
@@ -33,6 +31,7 @@ export class SelectionUIRenderer {
         _SelectionUIRenderer_transform.set(this, null);
         _SelectionUIRenderer_projectionData.set(this, null);
         __classPrivateFieldSet(this, _SelectionUIRenderer_strokeRenderer, strokeRenderer, "f");
+        __classPrivateFieldSet(this, _SelectionUIRenderer_outlineRenderer, outlineRenderer, "f");
         __classPrivateFieldSet(this, _SelectionUIRenderer_config, config, "f");
         __classPrivateFieldSet(this, _SelectionUIRenderer_extensions, extensions, "f");
         __classPrivateFieldSet(this, _SelectionUIRenderer_terrain, terrain, "f");
@@ -87,10 +86,10 @@ export class SelectionUIRenderer {
                 __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_drawIndividualBoundingBox).call(this, feature, zoom);
             }
         }
-        __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_drawCombinedBoundingBox).call(this, features, zoom);
+        __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_drawBoundingBoxWithMargin).call(this, features, zoom);
     }
 }
-_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) {
+_SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_outlineRenderer = 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)
@@ -115,99 +114,32 @@ _SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extens
     if (!bbox)
         return;
     __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokeBoundingBox).call(this, __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_applyMargin).call(this, bbox, zoom), zoom);
-}, _SelectionUIRenderer_drawCombinedBoundingBox = function _SelectionUIRenderer_drawCombinedBoundingBox(features, zoom) {
-    if (!__classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f")) {
-        // The fallback when there is no transform (without a margin)
-        const bbox = computeCombinedBoundingBox(features, __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f"));
-        if (bbox)
-            __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokeBoundingBox).call(this, bbox, zoom);
-        return;
-    }
-    const margin = __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.margin;
-    const transform = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f");
-    let minLng = Number.POSITIVE_INFINITY;
-    let maxLng = Number.NEGATIVE_INFINITY;
-    let minLat = Number.POSITIVE_INFINITY;
-    let maxLat = Number.NEGATIVE_INFINITY;
-    for (const feature of features) {
-        const bbox = computeBoundingBox(feature, __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f"));
-        if (!bbox)
-            continue;
-        // A single-coordinate feature (such as Point) is computed from the extent of the
-        // 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 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;
-        }
-        const marginedBbox = applyMarginToBoundingBox(bbox, margin, transform, zoom);
-        const corners = [
-            marginedBbox.topLeft,
-            marginedBbox.topRight,
-            marginedBbox.bottomRight,
-            marginedBbox.bottomLeft,
-        ];
-        for (const corner of corners) {
-            minLng = Math.min(minLng, corner[0]);
-            maxLng = Math.max(maxLng, corner[0]);
-            minLat = Math.min(minLat, corner[1]);
-            maxLat = Math.max(maxLat, corner[1]);
-        }
-    }
-    if (!Number.isFinite(minLng))
-        return;
-    const coords = [
-        [minLng, maxLat],
-        [maxLng, maxLat],
-        [maxLng, minLat],
-        [minLng, minLat],
-        [minLng, maxLat],
-    ];
-    __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokePath).call(this, coords, zoom);
 }, _SelectionUIRenderer_drawBoundingBoxWithMargin = function _SelectionUIRenderer_drawBoundingBoxWithMargin(features, zoom) {
     const bbox = computeCombinedBoundingBox(features, __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f"));
     if (!bbox)
         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) {
-    const frame = __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_pointFrame).call(this, feature, coord, zoom);
-    if (!frame)
+    const frame = __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_pointFrame).call(this, feature, coord);
+    const projectionData = __classPrivateFieldGet(this, _SelectionUIRenderer_projectionData, "f");
+    if (!frame || !projectionData)
         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 { x, y } = frame.center;
+    __classPrivateFieldGet(this, _SelectionUIRenderer_outlineRenderer, "f").draw([coord[0], coord[1]], frame.elevationMeters, frame.corners.map((corner) => ({ x: corner.x - x, y: corner.y - y })), __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.stroke, anchorGhostOpacity(__classPrivateFieldGet(this, _SelectionUIRenderer_terrain, "f"), coord[0], coord[1]), zoom, projectionData);
+}, _SelectionUIRenderer_pointFrame = function _SelectionUIRenderer_pointFrame(feature, coord) {
     const transform = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f");
     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);
+    const center = isAnchorActive(terrain)
+        ? projectAnchorAt(terrain, coord[0], coord[1], elevationMeters)
+        : transform.project(coord);
     if (!center)
         return null;
     const margin = __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.margin;
     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]);
-    return { coords, elevationMeters };
+    return { anchor: coord, elevationMeters, center, corners };
 }, _SelectionUIRenderer_applyMargin = function _SelectionUIRenderer_applyMargin(bbox, zoom) {
     if (!__classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f"))
         return bbox;
@@ -219,49 +151,6 @@ _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, placement = { followTerrain: true }) {
-    __classPrivateFieldGet(this, _SelectionUIRenderer_strokeRenderer, "f").draw(coords, __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.stroke, {
-        widthUnit: 'pixels',
-        closed: true,
-        followTerrain: placement.followTerrain,
-        ...(placement.elevationMeters !== undefined && {
-            elevationMeters: placement.elevationMeters,
-        }),
-    }, zoom, __classPrivateFieldGet(this, _SelectionUIRenderer_projectionData, "f") ?? undefined);
+}, _SelectionUIRenderer_strokePath = function _SelectionUIRenderer_strokePath(coords, zoom) {
+    __classPrivateFieldGet(this, _SelectionUIRenderer_strokeRenderer, "f").draw(coords, __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.stroke, { widthUnit: 'pixels', closed: true, followTerrain: true }, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakuzu/maplibre-gl-draw",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "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",