@sakuzu/maplibre-gl-draw 2.1.0 → 2.1.2

package/CHANGELOG.md

@@ -6,6 +6,51 @@ the project follows semantic versioning.
 
 ## [Unreleased]
 
+## [2.1.2] - 2026-10-02
+
+Three fixes: a plugin's fill, the click that finishes a plugin's
+exclusive interaction, and the selection frame of a point on the
+terrain. Nothing else changes.
+
+### Fixed
+
+- A plugin's `fill.draw` drew nothing: the fill shared with the render
+  context of custom feature renderers was never given its shader, so a
+  renderer that filled an area with it left the area empty. It is now
+  prepared each frame with the other renderers.
+- A click outside the element of a plugin's exclusive interaction
+  finished the interaction and did nothing else, so it took a second
+  click to select a feature. It now goes on as an ordinary click after
+  `finish()`: it selects the feature under it, or clears the selection
+  on the empty map. A click on the feature already selected does not
+  call `onFeatureClick`, so it does not start another interaction.
+- With the terrain on and the camera pitched, the selection frame of a
+  point was stretched into a tall rectangle. It now lies flat at the
+  elevation of the point and keeps the size of the marker and the margin
+  ([#12](https://github.com/sakuzu/maplibre-gl-draw/issues/12)).
+
+## [2.1.1] - 2026-10-02
+
+Three fixes to the lines drawn on the terrain: their thickness on a
+high-DPI display, their thickness between the vertices, and dashed lines
+that sank into the ground. Nothing else changes.
+
+### Fixed in 2.1.1
+
+- With the terrain on, a solid line or the outline of a polygon was drawn
+  half as thick on a high-DPI display (a device pixel ratio of 2) as
+  without the terrain, when its width follows the zoom. It is now as
+  thick with the terrain as without it.
+- With the terrain on and the camera pitched, a solid line looked like a
+  string of beads: it was thinner between its vertices than at them, and
+  the outline of a polygon was thinner along its edges. Its thickness is
+  now the same all along.
+- With the terrain on and the camera pitched, a dashed or dotted line,
+  and the dashed outline of a polygon, sank into the ground on the side
+  towards the camera and showed a jagged edge. They are now painted on
+  the ground like solid lines, with the same dashes as without the
+  terrain.
+
 ## [2.1.0] - 2026-10-01
 
 The standard UI package, the documentation site with twenty examples and
@@ -1146,5 +1191,9 @@ available from Kasika, Inc.
 - A read-only mode and an interaction lock.
 - Plugins, custom modes and custom feature types.
 
+[Unreleased]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.2...HEAD
+[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
 [2.0.0]: https://github.com/sakuzu/maplibre-gl-draw/compare/v1.0.0...v2.0.0
 [1.0.0]: https://github.com/sakuzu/maplibre-gl-draw/releases/tag/v1.0.0

package/dist/dataset/retained.js

@@ -324,8 +324,8 @@ export function isEmptyChunkBatches(batches) {
  * @param isExternallyRenderedPoint Predicate that returns whether a point is drawn by an external
  *   renderer (every point is pushed when omitted). A point for which it is true goes neither onto
  *   a batch nor into fallback
- * @param skipDrapedFills Do not push the solid polygons and lines (a frame where the analytic
- *   drape draws them as ground pixels)
+ * @param skipDrapedFills Do not push the polygons and lines, solid or dashed (a frame where the
+ *   analytic drape draws them as ground pixels)
  * @returns The batches that were built. When the GPU resources could not be created (the shaders
  *          are not initialized) null is returned and the caller rebuilds them on the next frame
  *
@@ -739,7 +739,7 @@ export function isDrapedGeometry(feature) {
  * @internal
  */
 export function collectFeature(feature, draft, styles, isExternallyRenderedPoint, skipDrapedFills = false) {
-    const skipSolid = skipDrapedFills && isDrapedGeometry(feature);
+    const skipDraped = skipDrapedFills && isDrapedGeometry(feature);
     switch (feature.type) {
         case 'Point':
             collectPoint(feature, coordinatesOf(feature), draft, styles, isExternallyRenderedPoint);
@@ -753,20 +753,20 @@ export function collectFeature(feature, draft, styles, isExternallyRenderedPoint
             return;
         case 'LineString':
         case 'Freehand':
-            collectLine(feature, coordinatesOf(feature), draft, styles, skipSolid);
+            collectLine(feature, coordinatesOf(feature), draft, styles, skipDraped);
             return;
         case 'MultiLineString':
             for (const coords of coordinatesOf(feature)) {
-                collectLine(feature, coords, draft, styles, skipSolid);
+                collectLine(feature, coords, draft, styles, skipDraped);
             }
             return;
         case 'Polygon':
-            collectPolygon(feature, coordinatesOf(feature), draft, styles, 0, skipSolid);
+            collectPolygon(feature, coordinatesOf(feature), draft, styles, 0, skipDraped);
             return;
         case 'MultiPolygon': {
             const parts = coordinatesOf(feature);
             for (let i = 0; i < parts.length; i++) {
-                collectPolygon(feature, parts[i], draft, styles, i, skipSolid);
+                collectPolygon(feature, parts[i], draft, styles, i, skipDraped);
             }
             return;
         }
@@ -827,18 +827,19 @@ function collectPoint(feature, coord, draft, styles, isExternallyRenderedPoint)
  * Pushes a line (a dashed line is sent to immediate mode because its CPU-side splitting depends
  * on the zoom)
  */
-function collectLine(feature, coords, draft, styles, skipSolid = false) {
+function collectLine(feature, coords, draft, styles, skipDraped = false) {
     if (coords.length < 2)
         return;
     const strokeStyle = styles.getLineStringStrokeStyle(feature);
+    // A line, solid or dashed, is drawn by the analytic drape as ground pixels (in this frame
+    // only)
+    if (skipDraped && strokeStyle.opacity > 0 && strokeStyle.width > 0)
+        return;
     if (strokeStyle.lineStyle !== 'solid') {
         // The path that goes to immediate mode is not multiplied by the factors of zoomScale
         pushFallback(draft, feature);
         return;
     }
-    // A solid line is drawn by the analytic drape as ground pixels (in this frame only)
-    if (skipSolid && strokeStyle.opacity > 0 && strokeStyle.width > 0)
-        return;
     const createdZoom = getCreatedZoom(feature);
     const target = createdZoom === undefined ? draft.fixedLines : draft.scaledLines;
     const item = toLineBatchItem(coords, feature.id, strokeStyle, createdZoom ?? FIXED_WIDTH_ZOOM);
@@ -856,23 +857,23 @@ function collectLine(feature, coords, draft, styles, skipSolid = false) {
  * A fill-only polygon is also pushed as an SDFPolygon without an outline (immediate mode uses
  * PolygonBatchRenderer, but the appearance of the fill is the same).
  */
-function collectPolygon(feature, rings, draft, styles, partIndex = 0, skipSolid = false) {
+function collectPolygon(feature, rings, draft, styles, partIndex = 0, skipDraped = false) {
     const outerRing = rings[0];
     if (!outerRing || outerRing.length < 3)
         return;
     const { fillColor, strokeStyle } = styles.getPolygonStyles(feature);
     const hasStroke = strokeStyle.opacity > 0 && strokeStyle.width > 0;
+    if (!hasStroke && fillColor[3] <= 0)
+        return;
+    // The fill and the outline, solid or dashed, are drawn by the analytic drape as ground pixels
+    // (in this frame only)
+    if (skipDraped)
+        return;
     if (hasStroke && strokeStyle.lineStyle !== 'solid') {
         // The path that goes to immediate mode is not multiplied by the factors of zoomScale
         pushFallback(draft, feature);
         return;
     }
-    if (!hasStroke && fillColor[3] <= 0)
-        return;
-    // The solid fill and outline are drawn by the analytic drape as ground pixels (in this frame
-    // only)
-    if (skipSolid)
-        return;
     const createdZoom = getCreatedZoom(feature);
     const target = createdZoom === undefined ? draft.fixedPolygons : draft.scaledPolygons;
     // A fixed line width is declared by the negative convention (the same reason as collectLine).

package/dist/dataset/selection.d.ts

@@ -6,8 +6,8 @@ import type { RetainedStyleResolver } from '../view/renderers/retained.js';
  * It is paired with `collectDataset` in `view/terrain/drape/pass.ts`. Changing only one of
  * them would show the selection highlight twice or in neither of them.
  *
- * A dashed outline does not go onto the drape (solving the accumulated distance along the outline
- * from the pixels is not implemented, so drawing it as a solid line would change the appearance).
- * For what does not go onto it, the immediate-mode path draws the highlight as before.
+ * Dashed lines and dashed outlines go onto the drape like solid ones (the drape lays the pattern
+ * out along the path). For what does not go onto it, the immediate-mode path draws the highlight
+ * as before.
  */
 export declare function isHandedToDrape(feature: Feature, styles: RetainedStyleResolver): boolean;

package/dist/dataset/selection.js

@@ -150,24 +150,20 @@ export function sameFeatureIds(a, b) {
  * It is paired with `collectDataset` in `view/terrain/drape/pass.ts`. Changing only one of
  * them would show the selection highlight twice or in neither of them.
  *
- * A dashed outline does not go onto the drape (solving the accumulated distance along the outline
- * from the pixels is not implemented, so drawing it as a solid line would change the appearance).
- * For what does not go onto it, the immediate-mode path draws the highlight as before.
+ * Dashed lines and dashed outlines go onto the drape like solid ones (the drape lays the pattern
+ * out along the path). For what does not go onto it, the immediate-mode path draws the highlight
+ * as before.
  */
 export function isHandedToDrape(feature, styles) {
     if (feature.type === 'Polygon' || feature.type === 'MultiPolygon') {
         const { fillColor, strokeStyle } = styles.getPolygonStyles(feature);
         const hasStroke = strokeStyle.opacity > 0 && strokeStyle.width > 0;
-        if (hasStroke && strokeStyle.lineStyle !== 'solid')
-            return false;
         return hasStroke || fillColor[3] > 0;
     }
     if (feature.type === 'LineString' ||
         feature.type === 'MultiLineString' ||
         feature.type === 'Freehand') {
         const strokeStyle = styles.getLineStringStrokeStyle(feature);
-        if (strokeStyle.lineStyle !== 'solid')
-            return false;
         return strokeStyle.opacity > 0 && strokeStyle.width > 0;
     }
     return false;

package/dist/dataset/table-source.js

@@ -329,7 +329,8 @@ export class TableSource {
     }
     collector(rows, context) {
         const table = this.table;
-        // Whether the solid lines and polygons of each child are left to the analytic drape
+        // Whether the lines and polygons (solid or dashed) of each child are left to the analytic
+        // drape
         const skipDraped = table.children.map((column) => context.skipDrapedFills === true && isDraped(column.type));
         const createdZoom = table.columns[CREATED_ZOOM_COLUMN];
         let next = 0;
@@ -497,18 +498,19 @@ class RowCollector {
      * A line over the coordinates `[start, end)` of the geometry column of the row (a dashed line
      * goes to immediate mode)
      */
-    line(row, column, start, end, createdZoom, skipSolid) {
+    line(row, column, start, end, createdZoom, skipDraped) {
         if (end - start < 2)
             return;
         const slot = this.slots.line(column.type, this.slots.ruleColorOf(row));
         const stroke = slot.stroke;
+        // A line, solid or dashed, is drawn by the analytic drape as ground pixels (in this frame
+        // only)
+        if (skipDraped && stroke.opacity > 0 && stroke.width > 0)
+            return;
         if (stroke.lineStyle !== 'solid') {
             this.fallback(row);
             return;
         }
-        // A solid line is drawn by the analytic drape as ground pixels (in this frame only)
-        if (skipSolid && stroke.opacity > 0 && stroke.width > 0)
-            return;
         const draft = this.draft;
         const fixed = createdZoom === undefined;
         let builder = fixed ? draft.packedFixedLines : draft.packedScaledLines;
@@ -528,21 +530,21 @@ class RowCollector {
      *
      * @param ringOffsets The offsets from a ring to its coordinates
      */
-    polygon(row, column, ringStart, ringEnd, ringOffsets, partIndex, createdZoom, skipSolid) {
+    polygon(row, column, ringStart, ringEnd, ringOffsets, partIndex, createdZoom, skipDraped) {
         if (ringEnd <= ringStart)
             return;
         if (ringOffsets[ringStart + 1] - ringOffsets[ringStart] < 3)
             return;
         const slot = this.slots.polygon(column.type, this.slots.ruleColorOf(row));
+        if (!slot.hasStroke && slot.fillColor[3] <= 0)
+            return;
+        // The fill and the outline, solid or dashed, are drawn by the analytic drape as ground pixels
+        if (skipDraped)
+            return;
         if (slot.hasStroke && slot.strokeStyle.lineStyle !== 'solid') {
             this.fallback(row);
             return;
         }
-        if (!slot.hasStroke && slot.fillColor[3] <= 0)
-            return;
-        // The solid fill and outline are drawn by the analytic drape as ground pixels
-        if (skipSolid)
-            return;
         const rings = new Array(ringEnd - ringStart);
         for (let r = ringStart; r < ringEnd; r++) {
             rings[r - ringStart] = column.positions(ringOffsets[r], ringOffsets[r + 1]);

package/dist/modes/select/click-handler.d.ts

@@ -3,7 +3,10 @@
  *
  * Single click: the priority order is plugin intercept -> vertex click -> feature selection
  *   1. While a plugin is interacting, clicks inside its container are consumed; anything else
- *      finishes it
+ *      finishes it and then goes on as an ordinary click (it selects the feature under it, or
+ *      clears the selection on the empty map), except that re-clicking the selected feature is
+ *      not delegated to plugins.handleFeatureClick (the click that finished an interaction does
+ *      not start another)
  *   2. A click on a vertex handle of a singly selected feature that supports vertex editing
  *      (LineString / Polygon / the Multi types) -> vertex selection
  *   3. Unified z traversal (hitTestTopmost) -> if it is a Store feature, the selection is

package/dist/modes/select/click-handler.js

@@ -11,7 +11,8 @@ import { getSelectedFeatures } from '../../view/ui/helper.js';
  * The main logic of onClick
  */
 export function handleSelectClick(event, context, config) {
-    if (handlePluginInteractionClick(event, context)) {
+    const interaction = handlePluginInteractionClick(event, context);
+    if (interaction === 'inside') {
         return;
     }
     const { store } = context;
@@ -21,7 +22,7 @@ export function handleSelectClick(event, context, config) {
         return;
     }
     store.setSelectedVertices(null);
-    handleFeatureClick(event, selection, selectedIds, context);
+    handleFeatureClick(event, selection, selectedIds, context, interaction === 'finished');
 }
 /**
  * The main logic of onDoubleClick
@@ -48,21 +49,21 @@ export function handleSelectDoubleClick(event, context) {
 /**
  * Click handling during a plugin interaction
  *
- * @returns true when the click was consumed (= the caller skips the rest of the handling)
+ * Only `inside` consumes the click; after `finished` the caller handles it as an ordinary click.
  */
 function handlePluginInteractionClick(event, context) {
     const pm = context.plugins;
     if (!pm?.isPluginInteracting())
-        return false;
+        return 'none';
     const container = pm.getPluginInteractionContainer();
     if (container) {
         const target = event.originalEvent.target;
         if (container.contains(target)) {
-            return true;
+            return 'inside';
         }
     }
     pm.finishPluginInteraction();
-    return true;
+    return 'finished';
 }
 /**
  * Click handling for vertex handles
@@ -108,8 +109,11 @@ function handleVertexClick(event, selectedIds, context, config) {
 }
 /**
  * Feature selection handling
+ *
+ * @param finishedInteraction The click finished a plugin interaction: re-clicking the selected
+ *   feature is not delegated to the plugins
  */
-function handleFeatureClick(event, selection, selectedIds, context) {
+function handleFeatureClick(event, selection, selectedIds, context, finishedInteraction) {
     const { store } = context;
     const orderedFeatures = getDisplayFeatures(store);
     let top = context.hitTestTopmost(event.point, { orderedFeatures });
@@ -134,8 +138,12 @@ function handleFeatureClick(event, selection, selectedIds, context) {
         return;
     }
     const feature = top.feature;
-    // Re-clicking an already selected feature -> delegate to the plugins
-    if (!event.modifiers.shift && selectedIds.length === 1 && selectedIds.includes(feature.id)) {
+    // Re-clicking an already selected feature -> delegate to the plugins (not when the click
+    // finished an interaction)
+    if (!finishedInteraction &&
+        !event.modifiers.shift &&
+        selectedIds.length === 1 &&
+        selectedIds.includes(feature.id)) {
         if (context.plugins?.handleFeatureClick(feature.id, event)) {
             return;
         }

package/dist/view/layer/custom-layer.js

@@ -1,6 +1,6 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
-import { resolvePixelRatio } from '../../shared/utils/pixel-ratio.js';
+import { resolveContentPixelRatio, resolvePixelRatio } from '../../shared/utils/pixel-ratio.js';
 import { updateGlobeSubdivision } from '../globe-subdivision.js';
 import { beginRenderFrame } from '../shaders/frame.js';
 import { installAnchorProjector, uninstallAnchorProjector } from '../terrain/anchor.js';
@@ -350,6 +350,7 @@ export function createCustomLayer(deps) {
             zoom,
             rawZoom,
             dpr,
+            contentDpr: resolveContentPixelRatio(pixelRatio),
             terrainState,
             retainedAvailable: engine.storeRetainedCache !== null,
             overlayRenderers: dynamicOverlayRenderers,

package/dist/view/layer/drape-planner.d.ts

@@ -119,7 +119,10 @@ export interface DrapeFrameInput {
     resolveStyles: () => RetainedStyleResolver;
     /** The terrain of the map (null when the terrain state of the frame is inactive) */
     mapTerrain: MapTerrain;
+    /** The rendering pixel ratio, for widths fixed in screen pixels (the rendering scale included) */
     dpr: number;
+    /** The rendering pixel ratio for widths that follow the zoom (the rendering scale not applied) */
+    contentDpr: number;
     /** The style zoom (what the rendering reads) */
     zoom: number;
     /** The real zoom of the camera (the band is decided with it) */

package/dist/view/layer/drape-planner.js

@@ -281,7 +281,7 @@ export class DrapePlanner {
      */
     planFrame(input) {
         const { terrain } = this.deps;
-        const { mapTerrain, dpr, zoom, rawZoom } = input;
+        const { mapTerrain, dpr, contentDpr, zoom, rawZoom } = input;
         let drapeUsable = false;
         this.pendingWork = false;
         // The analytic drape is used even in a wide band when building the index is light. Cutting
@@ -297,10 +297,10 @@ export class DrapePlanner {
         // cost has to be known first). The collected result is folded behind a key, so there is no
         // cost as long as the contents do not change
         if (mapTerrain !== null)
-            this.collect(input.resolveStyles, dpr, zoom);
+            this.collect(input.resolveStyles, dpr, contentDpr, zoom);
         const analyticBand = rawZoom > TERRAIN_ANALYTIC_MIN_ZOOM || this.lightEnough;
         if (mapTerrain !== null && analyticBand) {
-            drapeUsable = this.prepare(input.gl, mapTerrain, input.resolveStyles, dpr, zoom);
+            drapeUsable = this.prepare(input.gl, mapTerrain, input.resolveStyles, dpr, contentDpr, zoom);
         }
         else if (mapTerrain !== null) {
             // A wide band is handled by the vertex displacement path (no index is built either)
@@ -447,6 +447,7 @@ export class DrapePlanner {
                             cellOffset: item.plan.cellOffset,
                             grid: item.plan.grid,
                             groundMeters: item.plan.groundMeters,
+                            tileZ: item.plan.tile.z,
                             edges,
                         },
                         projection: item.projection,
@@ -500,12 +501,13 @@ export class DrapePlanner {
      * "polygons are not drawn at low zooms"). The collected result is folded behind a key, so from
      * the second time on nothing happens as long as the contents do not change.
      */
-    collect(resolveStyles, dpr, zoom) {
+    collect(resolveStyles, dpr, contentDpr, zoom) {
         const { store, datasets: manager } = this.deps;
         const datasets = manager?.listInternal() ?? [];
         const key = [
             this.revision,
             dpr,
+            contentDpr,
             marginZoom(zoom),
             store.getLayerOrder().join('/'),
             datasets.map((c) => `${c.id}:${c.drapeRevision}:${c.visible ? 1 : 0}:${c.order}`).join(','),
@@ -513,7 +515,7 @@ export class DrapePlanner {
         ].join('|');
         let collected = this.collected;
         if (key !== this.collectKey || !collected) {
-            collected = collectDrapeElements(store, resolveStyles(), dpr, datasets);
+            collected = collectDrapeElements(store, resolveStyles(), dpr, contentDpr, datasets);
             this.collectKey = key;
             this.collected = collected;
             this.lightEnough = collected.edgeCount <= DRAPE_WIDE_EDGE_BUDGET;
@@ -529,14 +531,14 @@ export class DrapePlanner {
      * not collected again just because the view moved (collecting them again would mean rebuilding
      * the whole index).
      */
-    prepare(gl, terrain, resolveStyles, dpr, zoom) {
+    prepare(gl, terrain, resolveStyles, dpr, contentDpr, zoom) {
         const { map, datasets: manager } = this.deps;
         const context = this.deps.terrain;
         const tiles = getRenderableTerrainTiles(terrain);
         if (tiles.length === 0)
             return false;
         const datasets = manager?.listInternal() ?? [];
-        const collected = this.collect(resolveStyles, dpr, zoom);
+        const collected = this.collect(resolveStyles, dpr, contentDpr, zoom);
         // The factors per source (which follow the zoom) are rewritten every frame, because baking
         // them into the elements would mean rebuilding the index on every zoom movement
         const drapeSourceFactors = this.sourceFactors;

package/dist/view/layer/frame-render.js

@@ -107,9 +107,8 @@ function drawDrapeSegment(deps, f, index) {
         drawSegment(paintCursor, to, last);
     }
     f.restoreBlendState();
-    // Back to the depth state of the layer rendering. What the drape could not paint (dashed
-    // lines, polygons with a dashed outline, the geometry being drawn, the features of
-    // extensions) is drawn next, by the vertex displacement path, and the terrain must hide it
+    // Back to the depth state of the layer rendering. What the drape could not paint (the
+    // geometry being drawn, the features of extensions) is drawn next, by the vertex displacement path, and the terrain must hide it
     // as it does in a frame without the drape. Symbols switch the depth test off themselves.
     applySegmentDepthState(gl, deps.terrainContext, f);
 }

package/dist/view/layer/frame-state.d.ts

@@ -111,7 +111,10 @@ export interface FrameBuildInput {
     zoom: number;
     /** The real zoom of the camera */
     rawZoom: number;
+    /** The rendering pixel ratio, for sizes fixed in screen pixels (the rendering scale included) */
     dpr: number;
+    /** The rendering pixel ratio for sizes that follow the zoom (the rendering scale not applied) */
+    contentDpr: number;
     /** The terrain state of the frame (already set on the terrain context) */
     terrainState: TerrainRenderState;
     /** Whether the retained batches of the Store rendering exist */

package/dist/view/layer/frame-state.js

@@ -139,7 +139,7 @@ function sameCameraPosition(a, b) {
  */
 export function buildFrameState(input) {
     const { gl, renderers: r, map, store, terrainContext, drape, renderOptions } = input;
-    const { zoom, rawZoom, dpr, terrainState } = input;
+    const { zoom, rawZoom, dpr, contentDpr, terrainState } = input;
     const { shaderData, defaultProjectionData } = renderOptions;
     const mapTerrain = terrainState.active ? getMapTerrain(map) : null;
     // Shader initialization
@@ -193,6 +193,7 @@ export function buildFrameState(input) {
         resolveStyles: () => r.batchManager.getRetainedRenderers()?.styles ?? r.featureDrawer,
         mapTerrain,
         dpr,
+        contentDpr,
         zoom,
         rawZoom,
     });

package/dist/view/layer/gl-state.d.ts

@@ -34,9 +34,8 @@ export declare function applySegmentGlState(gl: WebGL2RenderingContext, terrainC
  * `applySegmentGlState` sets it at the start of a slot, and the drape of the segment, which
  * changes the depth function and the offset, hands it back with this before the layers are
  * drawn. The layers are therefore drawn in one depth state whether or not the drape was used.
- * What the drape cannot paint (dashed lines, polygons with a dashed outline, the geometry being
- * drawn, the features of extensions, the datasets not handed over to it) is
- * drawn after it by the vertex displacement path and must be hidden by the terrain in the same
+ * What the drape cannot paint (the geometry being drawn, the features of extensions, the datasets
+ * not handed over to it) is drawn after it by the vertex displacement path and must be hidden by the terrain in the same
  * way. Symbols switch the depth test off themselves (`drawBillboardsWithoutDepth`).
  */
 export declare function applySegmentDepthState(gl: WebGL2RenderingContext, terrainContext: TerrainContext, f: Pick<SegmentGlFrame, 'terrainState' | 'wideFallback'>): void;

package/dist/view/layer/gl-state.js

@@ -33,9 +33,8 @@ export function applySegmentGlState(gl, terrainContext, f) {
  * `applySegmentGlState` sets it at the start of a slot, and the drape of the segment, which
  * changes the depth function and the offset, hands it back with this before the layers are
  * drawn. The layers are therefore drawn in one depth state whether or not the drape was used.
- * What the drape cannot paint (dashed lines, polygons with a dashed outline, the geometry being
- * drawn, the features of extensions, the datasets not handed over to it) is
- * drawn after it by the vertex displacement path and must be hidden by the terrain in the same
+ * What the drape cannot paint (the geometry being drawn, the features of extensions, the datasets
+ * not handed over to it) is drawn after it by the vertex displacement path and must be hidden by the terrain in the same
  * way. Symbols switch the depth test off themselves (`drawBillboardsWithoutDepth`).
  */
 export function applySegmentDepthState(gl, terrainContext, f) {

package/dist/view/layer/renderers.js

@@ -35,7 +35,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);
+    const selectionUIRenderer = new SelectionUIRenderer(strokeRenderer, 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);
@@ -79,6 +79,7 @@ export function initRenderers(deps) {
         sdfLineRenderer,
         polygonBatchRenderer,
         sdfPolygonRenderer,
+        fillShaderManager,
     });
     const batchManager = new BatchManager({
         gl,

package/dist/view/renderers/line/dash.d.ts

@@ -18,6 +18,33 @@ export interface DashSegment {
  * @returns The dashes, in order along the line. An empty array for fewer than 2 positions
  */
 export declare function splitIntoDashes(coords: Coordinate[], dashLength: number, gapLength: number, zoom: number): DashSegment[];
+/**
+ * The coefficients of a dash pattern
+ *
+ * The dash is `max(a, b * w)` and the gap `max(w + 1, c * w)` for a line `w` pixels wide (the
+ * smallest gap, `w + 1`, keeps the round caps of two dashes apart). This table is the one
+ * source of the patterns: the subdividing path computes them here on the CPU, and the analytic
+ * drape hands the same coefficients to its shader, which evaluates the same two formulas.
+ */
+export interface DashCoefficients {
+    /** The shortest dash (px) */
+    readonly a: number;
+    /** The dash per pixel of width */
+    readonly b: number;
+    /** The gap per pixel of width */
+    readonly c: number;
+}
+/**
+ * The coefficients of each line style that is not solid
+ *
+ * Dashed: dashes 4 times the width (12 px at least) and gaps twice the width. Dotted: short,
+ * nearly round dots and gaps about the width.
+ */
+export declare const DASH_COEFFICIENTS: Readonly<Record<'dashed' | 'dotted', DashCoefficients>>;
+/**
+ * The coefficients of a line style, or null for a solid line
+ */
+export declare function dashCoefficientsOf(lineStyle: 'solid' | 'dashed' | 'dotted'): DashCoefficients | null;
 /**
  * Returns the dash and gap lengths in px that suit a line style at a line width.
  *

package/dist/view/renderers/line/dash.js

@@ -126,6 +126,22 @@ export function splitIntoDashes(coords, dashLength, gapLength, zoom) {
     }
     return segments;
 }
+/**
+ * The coefficients of each line style that is not solid
+ *
+ * Dashed: dashes 4 times the width (12 px at least) and gaps twice the width. Dotted: short,
+ * nearly round dots and gaps about the width.
+ */
+export const DASH_COEFFICIENTS = {
+    dashed: { a: 12, b: 4, c: 2 },
+    dotted: { a: 1, b: 0.5, c: 1.2 },
+};
+/**
+ * The coefficients of a line style, or null for a solid line
+ */
+export function dashCoefficientsOf(lineStyle) {
+    return lineStyle === 'dashed' || lineStyle === 'dotted' ? DASH_COEFFICIENTS[lineStyle] : null;
+}
 /**
  * Returns the dash and gap lengths in px that suit a line style at a line width.
  *
@@ -137,16 +153,11 @@ export function splitIntoDashes(coords, dashLength, gapLength, zoom) {
  * @returns [dashLength, gapLength], or null (for a solid line)
  */
 export function getStrokeDashPattern(lineStyle, strokeWidth = 2) {
-    // The minimum gap at which round caps do not overlap
-    const minGap = strokeWidth + 1;
-    switch (lineStyle) {
-        case 'dashed':
-            // Dashed: longer dashes (4x the line width), moderate gaps (2x the line width)
-            return [Math.max(12, strokeWidth * 4), Math.max(minGap, strokeWidth * 2)];
-        case 'dotted':
-            // Dotted: short dots (nearly round), short gaps (about the line width)
-            return [Math.max(1, strokeWidth * 0.5), Math.max(minGap, strokeWidth * 1.2)];
-        default:
-            return null;
-    }
+    const coefficients = dashCoefficientsOf(lineStyle);
+    if (!coefficients)
+        return null;
+    return [
+        Math.max(coefficients.a, coefficients.b * strokeWidth),
+        Math.max(strokeWidth + 1, coefficients.c * strokeWidth),
+    ];
 }

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

@@ -3,6 +3,7 @@ import type { SDFLineRenderer } from '../renderers/line/sdf-line.js';
 import type { PointInstanceRenderer } from '../renderers/point/point-instance.js';
 import type { PointShapeRenderer } from '../renderers/point/point-shape.js';
 import type { PolygonBatchRenderer } from '../renderers/polygon/batch.js';
+import type { FillShaderManager } from '../renderers/polygon/fill.js';
 import type { SDFPolygonRenderer } from '../renderers/polygon/sdf-polygon.js';
 import type { StrokeRenderer } from '../renderers/stroke.js';
 import type { TentativeRenderer } from '../ui/tentative.js';
@@ -20,6 +21,8 @@ export interface ShaderInitializerRenderers {
     sdfLineRenderer: SDFLineRenderer | null;
     polygonBatchRenderer: PolygonBatchRenderer | null;
     sdfPolygonRenderer: SDFPolygonRenderer | null;
+    /** The fill shared with the render context of custom feature renderers */
+    fillShaderManager: FillShaderManager | null;
 }
 /**
  * Creates a ShaderInitializer