@sakuzu/maplibre-gl-draw 2.1.2 → 2.1.3

package/CHANGELOG.md

@@ -6,6 +6,33 @@ the project follows semantic versioning.
 
 ## [Unreleased]
 
+## [2.1.3] - 2026-10-04
+
+Two fixes: the snap indicator that stayed after its input, and the
+selection frame of a point on the globe and on the terrain at a high
+pitch.
+
+### Fixed in 2.1.3
+
+- The snap indicator stayed after the input that made it: after leaving
+  the drawing mode, turning snapping off, Escape, or a pan, it went on
+  showing the last result, and `snap.changed` did not report the end of
+  the snap. The engine now clears the snap result when the mode changes,
+  when snapping (or a kind of it) is turned off, when a mode declines to
+  snap an input, and on cancel, and `snap.changed` reports `null` once
+  ([#22](https://github.com/sakuzu/maplibre-gl-draw/issues/22)).
+- The select mode snapped every input, so hovering near a vertex drew
+  the indicator, against the guide ("only while drawing and while moving
+  a vertex"). It now snaps its drags only. A select-mode plugin that
+  read `event.snapped` on a hover or a click receives the raw position
+  ([#22](https://github.com/sakuzu/maplibre-gl-draw/issues/22)).
+- The selection frame of a point is drawn as a figure of the screen,
+  like the mark: it keeps the size of the mark and the margin on the
+  terrain at any pitch and at the edge of the globe, and a point on the
+  far side of the globe gets no frame. The frame of a selection of
+  several features is drawn on the box of its handles
+  ([#12](https://github.com/sakuzu/maplibre-gl-draw/issues/12)).
+
 ## [2.1.2] - 2026-10-02
 
 Three fixes: a plugin's fill, the click that finishes a plugin's
@@ -1192,6 +1219,7 @@ available from Kasika, Inc.
 - Plugins, custom modes and custom feature types.
 
 [Unreleased]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.2...HEAD
+[2.1.3]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.2...v2.1.3
 [2.1.2]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.1...v2.1.2
 [2.1.1]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.0...v2.1.1
 [2.1.0]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.0.0...v2.1.0

package/dist/api/impl/engine.js

@@ -196,6 +196,12 @@ export function createEngine(map, options = {}, build = {}) {
     const repaintOnSnapChange = () => map.triggerRepaint();
     eventEmitter.on('snap.change', repaintOnSnapChange);
     teardown.add(() => eventEmitter.off('snap.change', repaintOnSnapChange));
+    // A snap belongs to the input of the mode that made it: leaving the mode clears it (any
+    // mode, built-in or added), so neither the indicator nor snap.changed keeps a stale target
+    teardown.add(store.subscribe((changes) => {
+        if (changes.mode)
+            snapService.clear();
+    }));
     // 4. Create the RenderCoordinator (triggers a repaint automatically when the
     // Store changes)
     const renderCoordinator = createRenderCoordinator({ map, store });

package/dist/api/impl/extension-host.js

@@ -83,7 +83,9 @@ export function createExtensionHost(deps) {
             install: (name, factory) => modeManager.registerMode(name, () => {
                 const handle = createModeContext(modeServices, screen);
                 try {
-                    return bridgeMode(name, factory(handle.context), handle.dispose, handle.entering);
+                    return bridgeMode(name, factory(handle.context), handle.dispose, handle.entering, 
+                    // An interrupted mode leaves no snap behind (leaving it is cleared by the engine)
+                    () => context.snapService.clear());
                 }
                 catch (error) {
                     handle.dispose();

package/dist/api/impl/input.js

@@ -83,9 +83,10 @@ const BRIDGED = Symbol('extension mode');
  * @param onExit - Called after the mode was left, to end what its context holds
  * @param entering - Runs the entering of the mode, so that its context knows the cursor the
  *   mode sets then
+ * @param onCancelled - Called after the mode was interrupted, to clear what its input left
  * @internal
  */
-export function bridgeMode(name, handler, onExit, entering = (run) => run()) {
+export function bridgeMode(name, handler, onExit, entering = (run) => run(), onCancelled = () => { }) {
     const bridged = {
         [BRIDGED]: handler,
         modeName: name,
@@ -102,7 +103,15 @@ export function bridgeMode(name, handler, onExit, entering = (run) => run()) {
             }
         },
         onExternalStateChange() {
-            handler.onCancel?.();
+            bridged.cancel();
+        },
+        cancel() {
+            try {
+                handler.onCancel?.();
+            }
+            finally {
+                onCancelled();
+            }
         },
         undoVertex: () => handler.onUndoVertex?.() === true,
         redoVertex: () => handler.onRedoVertex?.() === true,
@@ -136,7 +145,7 @@ export function routeToMode(handler, event, snapped, snap) {
         return undefined;
     const consumed = deliver(mode, event, snapped, snap);
     if (!consumed && event.type === 'keydown' && event.key === 'Escape' && mode.onCancel) {
-        mode.onCancel();
+        handler.cancel();
         return true;
     }
     return consumed;

package/dist/dispatcher/input-router.js

@@ -123,12 +123,14 @@ export function createInputRouter(deps) {
      *
      * Whether snapping is wanted is asked of the current mode per input type
      * (isSnapEnabledFor). A mode that does not declare it snaps for every input type
-     * (as before).
+     * (as before). An input that is not snapped clears the previous result, so the
+     * indicator of an earlier snap does not stay behind it.
      */
     function applySnap(event, inputType) {
-        if (!snapService || event.snap === false)
+        if (!snapService)
             return { event, result: null };
-        if (modeManager.getHandler()?.isSnapEnabledFor?.(inputType) === false) {
+        if (event.snap === false || modeManager.getHandler()?.isSnapEnabledFor?.(inputType) === false) {
+            snapService.clear();
             return { event, result: null };
         }
         const result = snapService.resolve(event.lngLat, event.point, buildSnapContext(event.modifiers));

package/dist/modes/select/mode.js

@@ -80,6 +80,14 @@ export class SelectMode {
             store.setSelection(null, []);
         }, 'silent');
     }
+    /**
+     * Snapping applies only while a vertex or a feature is dragged: a click or a hover in
+     * select is not snapped (and draws no indicator). A mode of the contract that wants the
+     * snapped position of a point asks `snap` of its ModeContext.
+     */
+    isSnapEnabledFor(inputType) {
+        return inputType === 'dragstart' || inputType === 'dragmove' || inputType === 'dragend';
+    }
     /**
      * Called after a state change from the outside (a change applied from outside the mode).
      * Resets the mode's internal state to keep it consistent.

package/dist/snapping/service.js

@@ -110,6 +110,17 @@ export function createSnapService(deps = {}) {
         }
         return result;
     }
+    /**
+     * Drops the result when it holds a target, emitting the change once without a target (the
+     * same event as a snap that comes off). A result without a target is left as it is.
+     */
+    function clear() {
+        if (!lastResult?.target)
+            return;
+        const { lngLat } = lastResult;
+        lastResult = null;
+        deps.eventEmitter?.emit('snap.change', { lngLat });
+    }
     /**
      * Evaluates a single candidate and updates best
      *
@@ -248,7 +259,10 @@ export function createSnapService(deps = {}) {
         },
         setEnabled(value) {
             enabled = value;
+            if (!value)
+                clear();
         },
+        clear,
         setTolerance(px) {
             options.tolerancePx = px;
         },
@@ -260,6 +274,8 @@ export function createSnapService(deps = {}) {
         },
         setKindEnabled(kind, value) {
             options.kinds[kind] = value;
+            if (!value)
+                clear();
         },
         isKindEnabled(kind) {
             return options.kinds[kind];

package/dist/view/layer/renderers.d.ts

@@ -12,6 +12,7 @@ import type { PixelRatioInput } from '../../shared/utils/pixel-ratio.js';
 import type { SpatialIndex } from '../../store/spatial/spatial-index.js';
 import type { Store } from '../../store/store.js';
 import { TextureCache } from '../cache/texture.js';
+import { AnchoredOutlineRenderer } from '../renderers/anchored-outline.js';
 import { BatchManager } from '../renderers/batch-manager.js';
 import { FeatureDrawer } from '../renderers/drawer.js';
 import { type ImageErrorFn, ImageRenderer } from '../renderers/image.js';
@@ -37,6 +38,8 @@ export interface Renderers {
     quadShader: QuadShader;
     imageRenderer: ImageRenderer;
     strokeRenderer: StrokeRenderer;
+    /** The outlines laid on the screen around an anchor (the frames of points) */
+    outlineRenderer: AnchoredOutlineRenderer;
     sdfLineRenderer: SDFLineRenderer;
     pointShapeRenderer: PointShapeRenderer;
     pointInstanceRenderer: PointInstanceRenderer;

package/dist/view/layer/renderers.js

@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
 import { TextureCache } from '../cache/texture.js';
+import { AnchoredOutlineRenderer } from '../renderers/anchored-outline.js';
 import { BatchManager } from '../renderers/batch-manager.js';
 import { FeatureDrawer } from '../renderers/drawer.js';
 import { ImageRenderer } from '../renderers/image.js';
@@ -27,6 +28,7 @@ export function initRenderers(deps) {
     const quadShader = new QuadShader(gl).useTerrainState(terrain);
     const imageRenderer = new ImageRenderer(mapInstance, gl, textureCache, quadShader, (fileId) => store.getFile(fileId), onImageError);
     const strokeRenderer = new StrokeRenderer(mapInstance, gl, pixelRatio, terrain);
+    const outlineRenderer = new AnchoredOutlineRenderer(mapInstance, gl, pixelRatio, terrain);
     const sdfLineRenderer = new SDFLineRenderer(mapInstance, gl, pixelRatio, terrain);
     const pointShapeRenderer = new PointShapeRenderer(mapInstance, gl, pixelRatio, terrain);
     const pointInstanceRenderer = new PointInstanceRenderer(mapInstance, gl, pixelRatio, terrain);
@@ -35,7 +37,7 @@ export function initRenderers(deps) {
     const sdfPolygonRenderer = new SDFPolygonRenderer(gl, pixelRatio, polygonScope);
     const fillShaderManager = new FillShaderManager(gl, terrain);
     const selectionExtensions = scope.selection.extensions;
-    const selectionUIRenderer = new SelectionUIRenderer(strokeRenderer, selectionConfig, selectionExtensions, terrain);
+    const selectionUIRenderer = new SelectionUIRenderer(strokeRenderer, outlineRenderer, selectionConfig, selectionExtensions, terrain);
     // The tile size of this instance's map (read by the custom bounding box calculators)
     const tileSize = mapInstance.transform?.tileSize ?? 512;
     selectionExtensions.setTileSize(tileSize);
@@ -74,6 +76,7 @@ export function initRenderers(deps) {
         tentativeRenderer,
         quadShader,
         strokeRenderer,
+        outlineRenderer,
         pointShapeRenderer,
         pointInstanceRenderer,
         sdfLineRenderer,
@@ -95,6 +98,7 @@ export function initRenderers(deps) {
         quadShader,
         imageRenderer,
         strokeRenderer,
+        outlineRenderer,
         sdfLineRenderer,
         pointShapeRenderer,
         pointInstanceRenderer,
@@ -125,6 +129,7 @@ const GPU_OWNERS = [
     'textureCache',
     'quadShader',
     'strokeRenderer',
+    'outlineRenderer',
     'pointShapeRenderer',
     'pointInstanceRenderer',
     'sdfLineRenderer',

package/dist/view/renderers/anchored-outline.d.ts

@@ -0,0 +1,5 @@
+/** A point of the screen relative to the anchor, in CSS px (y points down) */
+export interface OutlineOffset {
+    x: number;
+    y: number;
+}

package/dist/view/renderers/anchored-outline.js

@@ -0,0 +1,352 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { getDashPattern, RENDERING_DEFAULTS } from '../../shared/math/index.js';
+import { resolvePixelRatio } from '../../shared/utils/pixel-ratio.js';
+import { calculateLngLatOffset, createProgram, getProjectionTransitionUniform, OFFSET_MODE_GLSL, } from '../shaders/helpers.js';
+import { ProjectionUniformManager } from '../shaders/projection.js';
+import { TerrainContext } from '../terrain/context.js';
+import { drawBillboardsWithoutDepth } from './point/billboard-depth.js';
+/** Floats per vertex: the offset (x, y in device px), the signed distance across, the distance along */
+const FLOATS_PER_VERTEX = 4;
+const STRIDE = FLOATS_PER_VERTEX * 4;
+/**
+ * The vertices of a closed outline as a triangle strip: two per corner (the two sides of the
+ * line) and the first corner again at the end
+ *
+ * Each vertex is the corner moved along the miter of its two edges by half the width plus one
+ * pixel (the band the HHAA coverage fades in), the same join as StrokeRenderer: a miter longer
+ * than the limit becomes a bevel along the edge that arrives. The distance along the outline is
+ * in CSS px, the unit of the dash patterns.
+ *
+ * @param corners The corners relative to the anchor, in CSS px, in order (not closed)
+ * @param widthPx The width of the line in device px
+ * @param pixelRatio Device px per CSS px
+ * @param miterLimit The longest miter, in half widths
+ * @returns The interleaved vertices (x, y, signed distance, distance), empty for fewer than two
+ *   distinct corners
+ * @internal
+ */
+export function buildOutlineStrip(corners, widthPx, pixelRatio, miterLimit = RENDERING_DEFAULTS.MITER_LIMIT) {
+    // Repeated corners make no edge
+    const ring = corners.filter((corner, i) => {
+        const next = corners[(i + 1) % corners.length];
+        return corners.length === 1 || corner.x !== next.x || corner.y !== next.y;
+    });
+    const n = ring.length;
+    if (n < 2)
+        return new Float32Array(0);
+    const expanded = widthPx / 2 + 1;
+    const unit = (from, to) => {
+        const dx = to.x - from.x;
+        const dy = to.y - from.y;
+        const length = Math.hypot(dx, dy);
+        return { x: dx / length, y: dy / length };
+    };
+    const data = new Float32Array((n + 1) * 2 * FLOATS_PER_VERTEX);
+    let along = 0;
+    for (let i = 0; i <= n; i++) {
+        const corner = ring[i % n];
+        if (i > 0) {
+            const before = ring[i - 1];
+            along += Math.hypot(corner.x - before.x, corner.y - before.y);
+        }
+        const arriving = unit(ring[(i + n - 1) % n], corner);
+        const leaving = unit(corner, ring[(i + 1) % n]);
+        const n1 = { x: -arriving.y, y: arriving.x };
+        const n2 = { x: -leaving.y, y: leaving.x };
+        let normal = n1;
+        let scale = 1;
+        const sum = { x: n1.x + n2.x, y: n1.y + n2.y };
+        const sumLength = Math.hypot(sum.x, sum.y);
+        if (sumLength > 0.001) {
+            const miter = { x: sum.x / sumLength, y: sum.y / sumLength };
+            const cosHalf = miter.x * n1.x + miter.y * n1.y;
+            if (cosHalf > 0.001 && 1 / cosHalf <= miterLimit) {
+                normal = miter;
+                scale = 1 / cosHalf;
+            }
+        }
+        for (const side of [1, -1]) {
+            const base = (i * 2 + (side === 1 ? 0 : 1)) * FLOATS_PER_VERTEX;
+            data[base] = corner.x * pixelRatio + normal.x * side * expanded * scale;
+            data[base + 1] = corner.y * pixelRatio + normal.y * side * expanded * scale;
+            data[base + 2] = side * expanded;
+            data[base + 3] = along;
+        }
+    }
+    return data;
+}
+/**
+ * Draws closed outlines laid in pixels around an anchor projected like a marker
+ *
+ * @internal
+ */
+export class AnchoredOutlineRenderer {
+    constructor(_map, gl, pixelRatio, terrain = new TerrainContext()) {
+        Object.defineProperty(this, "gl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "program", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "variantName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "projectionUniformManager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "offsetUniforms", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        /** The injected device pixel ratio (read from window each time when not injected) */
+        Object.defineProperty(this, "pixelRatio", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "colorLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "widthLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "pixelToClipLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "anchorOffsetLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "anchorElevationLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "dashArrayLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "dashEnabledLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "vao", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "vertexBuffer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.gl = gl;
+        this.pixelRatio = pixelRatio;
+        // An outline around an anchor is a symbol: it keeps the height of its anchor on the frames
+        // that lay the surfaces flat, as the marker does
+        this.projectionUniformManager = new ProjectionUniformManager(gl).useTerrainState(terrain);
+        this.vertexBuffer = gl.createBuffer();
+        this.vao = gl.createVertexArray();
+        gl.bindVertexArray(this.vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+        gl.enableVertexAttribArray(0);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, STRIDE, 0); // a_offset
+        gl.enableVertexAttribArray(1);
+        gl.vertexAttribPointer(1, 1, gl.FLOAT, false, STRIDE, 8); // a_side_dist
+        gl.enableVertexAttribArray(2);
+        gl.vertexAttribPointer(2, 1, gl.FLOAT, false, STRIDE, 12); // a_distance
+        gl.bindVertexArray(null);
+    }
+    /** Makes sure the shader of the projection variant exists */
+    ensureShader(shaderData) {
+        if (this.variantName === shaderData.variantName)
+            return;
+        if (this.program)
+            this.gl.deleteProgram(this.program);
+        this.program = this.createShaderProgram(shaderData.vertexShaderPrelude, shaderData.define);
+        this.variantName = shaderData.variantName;
+        this.projectionUniformManager.getLocations(this.program);
+        const gl = this.gl;
+        this.colorLoc = gl.getUniformLocation(this.program, 'u_color');
+        this.widthLoc = gl.getUniformLocation(this.program, 'u_width');
+        this.pixelToClipLoc = gl.getUniformLocation(this.program, 'u_pixel_to_clip');
+        this.anchorOffsetLoc = gl.getUniformLocation(this.program, 'u_anchor_offset');
+        this.anchorElevationLoc = gl.getUniformLocation(this.program, 'u_anchor_elevation_m');
+        this.dashArrayLoc = gl.getUniformLocation(this.program, 'u_dashArray');
+        this.dashEnabledLoc = gl.getUniformLocation(this.program, 'u_dashEnabled');
+    }
+    /** Sets the uniforms of the offset mode (the camera of the copy of the world being drawn) */
+    setOffsetUniforms(uniforms) {
+        this.offsetUniforms = uniforms;
+    }
+    createShaderProgram(prelude, define) {
+        const projTransitionUniform = getProjectionTransitionUniform(prelude);
+        const vertexSource = `#version 300 es
+${prelude}
+${define}
+${projTransitionUniform}${OFFSET_MODE_GLSL}
+layout(location = 0) in vec2 a_offset;     // the vertex around the anchor (device px, y down)
+layout(location = 1) in float a_side_dist; // the signed distance across the line (device px)
+layout(location = 2) in float a_distance;  // the distance along the outline (CSS px)
+
+uniform vec2 u_anchor_offset;       // the anchor relative to the center (64-bit on the CPU)
+uniform float u_anchor_elevation_m; // the height of the anchor, from the CPU as for a marker
+uniform vec2 u_pixel_to_clip;       // device px to clip space
+uniform float u_width;              // the width of the line (device px)
+
+out float v_dist;
+out float v_width;
+out float v_distance;
+
+void main() {
+    // The height comes from the CPU, the source hit testing and the marker use
+    g_anchor_elevation_m = u_anchor_elevation_m;
+    g_anchor_elevation_on = 1.0;
+    vec4 centerClip = project_position_to_clipspace_from_offset(u_anchor_offset, u_projection_matrix);
+    // The depth of the anchor for every vertex: the far side of the globe clips the outline
+    // with its anchor, as it clips a marker
+    gl_Position = vec4(
+        centerClip.xy / centerClip.w + vec2(a_offset.x, -a_offset.y) * u_pixel_to_clip,
+        centerClip.z / centerClip.w,
+        1.0
+    );
+    v_dist = a_side_dist;
+    v_width = u_width / 2.0;
+    v_distance = a_distance;
+}`;
+        const fragmentSource = `#version 300 es
+precision highp float;
+
+uniform vec4 u_color;
+uniform vec4 u_dashArray; // [dashLength, gapLength, patternLength, 0]
+uniform float u_dashEnabled;
+
+in float v_dist;
+in float v_width;
+in float v_distance;
+
+out vec4 fragColor;
+
+// HHAA: the part of the pixel on the inner side of a half plane
+float pixelLine(float x) {
+    return clamp(x + 0.5, 0.0, 1.0);
+}
+
+void main() {
+    if (u_dashEnabled > 0.5) {
+        float patternLength = u_dashArray.z;
+        if (patternLength > 0.0 && mod(v_distance, patternLength) > u_dashArray.x) discard;
+    }
+    float coverage = pixelLine(v_dist + v_width) - pixelLine(v_dist - v_width);
+    // Blending is non-premultiplied, so the coverage goes to the alpha only
+    fragColor = vec4(u_color.rgb, u_color.a * coverage);
+}`;
+        return createProgram(this.gl, vertexSource, fragmentSource);
+    }
+    /**
+     * Draws a closed outline around an anchor
+     *
+     * @param anchor The position the outline is laid around, `[lng, lat]`
+     * @param elevationMeters The height of the anchor (the height its marker is drawn at)
+     * @param corners The corners relative to the anchor's point on the screen, in CSS px
+     * @param style The line (its width is in CSS px)
+     * @param opacity A factor on the opacity of the line (the terrain's ghost of the marker)
+     * @param zoom The zoom of the frame
+     * @param projectionData The projection of the copy of the world being drawn
+     */
+    draw(anchor, elevationMeters, corners, style, opacity, zoom, projectionData) {
+        if (!this.program)
+            return;
+        const gl = this.gl;
+        const pixelRatio = resolvePixelRatio(this.pixelRatio);
+        const widthPx = style.width * pixelRatio;
+        const data = buildOutlineStrip(corners, widthPx, pixelRatio);
+        if (data.length === 0)
+            return;
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW);
+        gl.bindVertexArray(this.vao);
+        gl.useProgram(this.program);
+        this.projectionUniformManager.setUniforms(projectionData, zoom, this.offsetUniforms);
+        const center = this.offsetUniforms?.centerLngLat ?? [0, 0];
+        const offset = calculateLngLatOffset([anchor[0], anchor[1]], center);
+        if (this.anchorOffsetLoc)
+            gl.uniform2f(this.anchorOffsetLoc, offset[0], offset[1]);
+        if (this.anchorElevationLoc)
+            gl.uniform1f(this.anchorElevationLoc, elevationMeters);
+        if (this.pixelToClipLoc) {
+            gl.uniform2f(this.pixelToClipLoc, 2 / gl.drawingBufferWidth, 2 / gl.drawingBufferHeight);
+        }
+        if (this.widthLoc)
+            gl.uniform1f(this.widthLoc, widthPx);
+        if (this.colorLoc) {
+            gl.uniform4fv(this.colorLoc, [
+                style.color[0],
+                style.color[1],
+                style.color[2],
+                style.color[3] * style.opacity * opacity,
+            ]);
+        }
+        const dashPattern = style.dashArray ?? getDashPattern(style.lineStyle);
+        const dashed = style.lineStyle !== 'solid' && dashPattern.length >= 2;
+        if (this.dashEnabledLoc)
+            gl.uniform1f(this.dashEnabledLoc, dashed ? 1 : 0);
+        if (dashed && this.dashArrayLoc) {
+            const [dash, gap] = dashPattern;
+            gl.uniform4fv(this.dashArrayLoc, [dash, gap, dash + gap, 0]);
+        }
+        drawBillboardsWithoutDepth(gl, () => {
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, data.length / FLOATS_PER_VERTEX);
+        });
+        gl.bindVertexArray(null);
+    }
+    /** Releases the GPU resources */
+    dispose() {
+        if (this.program) {
+            this.gl.deleteProgram(this.program);
+            this.program = null;
+        }
+        if (this.vao) {
+            this.gl.deleteVertexArray(this.vao);
+            this.vao = null;
+        }
+        if (this.vertexBuffer) {
+            this.gl.deleteBuffer(this.vertexBuffer);
+            this.vertexBuffer = null;
+        }
+    }
+}

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/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.3",
   "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",