@sakuzu/maplibre-gl-draw 1.0.0 → 2.0.0

package/dist/view/layer/store-retained-coord-patch.js

@@ -1,5 +1,14 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * Incremental update of the coordinate texture of a retained line chunk
+ *
+ * A vertex drag moves only a few vertices. Rebuilding a line chunk with many vertices every frame
+ * would overflow the frame, so the diff of the vertices that moved is queued on the chunk and,
+ * right before drawing, only the corresponding texels of the coordinate texture are rewritten
+ * (see SDFLineRenderer.patchRetainedBatchCoords).
+ */
+import { coordinatesOf } from '../../shared/utils/coordinates.js';
 import { expandBBox } from './store-retained-bbox.js';
 /**
  * Upper limit of the number of vertices that one update may put into the incremental update of
@@ -71,14 +80,14 @@ export function computeLineCoordSlots(features) {
     let offset = 0;
     for (const feature of features) {
         if (feature.type === 'MultiLineString') {
-            for (const part of feature.coordinates ?? []) {
+            for (const part of coordinatesOf(feature) ?? []) {
                 if (!part || part.length < 2)
                     continue;
                 offset += part.length;
             }
             continue;
         }
-        const coords = feature.coordinates;
+        const coords = coordinatesOf(feature);
         if (!coords || coords.length < 2)
             continue;
         if (feature.type === 'LineString' || feature.type === 'Freehand') {
@@ -122,12 +131,12 @@ export function queueCoordPatch(chunk, feature, previous, line) {
     const slot = chunk.lineOffsets.get(feature.id);
     if (!slot)
         return false;
-    const coords = feature.coordinates;
+    const coords = coordinatesOf(feature);
     // If the vertex count differs from when the index table was built, the positions of the
     // following features are off as well
     if (!Array.isArray(coords) || coords.length !== slot.count)
         return false;
-    const changed = computeCoordinateDiff(previous.coordinates, coords, MAX_PATCHED_VERTICES);
+    const changed = computeCoordinateDiff(coordinatesOf(previous), coords, MAX_PATCHED_VERTICES);
     if (!changed)
         return false;
     // An update where no vertex moved (a change of locked, for example) is not treated as a diff;

package/dist/view/layer/store-retained-immediate.d.ts

@@ -6,7 +6,7 @@
  * as the layer loop of render.ts.
  */
 import type { ProjectionData } from 'maplibre-gl';
-import type { CustomFeatureHandler, CustomRendererDrawContext } from '../../extension/index.js';
+import type { FeatureTypeHandler, FrameDrawContext } from '../../extension/index.js';
 import type { Store } from '../../store/store.js';
 import type { Feature, Layer } from '../../store/types.js';
 import { type FeatureCompanionRegistry } from '../feature-companion.js';
@@ -28,9 +28,9 @@ export interface StoreRetainedDrawDeps {
     /** Immediate-mode draw target that draws the features which cannot be retained */
     batchManager: StoreImmediateTarget;
     /** Renderers of the custom feature types (type name → renderer) */
-    customRenderers: Map<string, CustomFeatureHandler['renderer']>;
+    customRenderers: Map<string, FeatureTypeHandler['renderer']>;
     /** Draw context passed to a custom renderer */
-    customRendererContext: CustomRendererDrawContext;
+    customRendererContext: FrameDrawContext;
     /** Providers of companion drawing and companion hits (those of this draw instance) */
     companions: FeatureCompanionRegistry;
     /**

package/dist/view/layer/store-retained-immediate.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 import { isLocallyHidden } from '../../store/local-visibility.js';
 import { drawFeatureCompanionsInFrame, } from '../feature-companion.js';
+import { customRendererOf } from './store-retained-classify.js';
 /**
  * Draws a list of features in immediate mode
  *
@@ -25,18 +26,12 @@ export function drawFeaturesImmediate(store, featureIds, layer, projectionData,
         // immediate chunk, so going through here makes the z order in retained mode identical to
         // immediate mode.
         drawFeatureCompanionsInFrame(deps.companions, feature, batchManager, projectionData, zoom, layer, customRendererContext, deps.restoreBlendState);
-        const customRenderer = customRenderers.get(feature.type);
+        const customRenderer = customRendererOf(customRenderers, feature);
         if (customRenderer) {
             // To keep the draw order (painter's algorithm), the core batch that has accumulated is
             // flushed first and only then the custom feature is drawn immediately.
             batchManager.endFrame();
-            customRenderer.draw({
-                id: feature.id,
-                type: feature.type,
-                coordinates: feature.coordinates,
-                properties: feature.properties,
-                style: feature.style,
-            }, projectionData, zoom, customRendererContext);
+            customRenderer.draw(feature, projectionData, zoom, customRendererContext);
             // Re-establish the blend state that the external renderer may have rewritten
             deps.restoreBlendState?.();
             batchManager.beginFrame(projectionData, zoom, layer);

package/dist/view/layer/store-retained-invalidation.d.ts

@@ -5,7 +5,7 @@
  * hidden features (updated in place), the registry of companion drawing and the generations of
  * the terrain. They are checked once per frame, and any change discards the whole cache.
  */
-import type { Layer, StateChanges } from '../../store/types.js';
+import type { Layer, StoreChange } from '../../store/types.js';
 import type { FeatureCompanionRegistry } from '../feature-companion.js';
 import type { TerrainContext } from '../terrain/context.js';
 /**
@@ -93,4 +93,4 @@ export declare function isOpacityOnlyLayerChange(previous: Layer, layer: Layer):
  * Whether a change of the layers consists only of opacity updates (nothing created, deleted or
  * reordered, and every update is {@link isOpacityOnlyLayerChange})
  */
-export declare function isOpacityOnlyLayersChange(layers: NonNullable<StateChanges['layers']>): boolean;
+export declare function isOpacityOnlyLayersChange(layers: NonNullable<StoreChange['layers']>): boolean;

package/dist/view/layer/store-retained.d.ts

@@ -38,7 +38,7 @@
  */
 import type { ProjectionData } from 'maplibre-gl';
 import type { Store } from '../../store/store.js';
-import type { BoundingBox, Layer, StateChanges } from '../../store/types.js';
+import type { BoundingBox, Layer, StoreChange } from '../../store/types.js';
 import type { FeatureCompanionRegistry } from '../feature-companion.js';
 import type { RetainedRendererSet } from '../renderers/retained.js';
 import { TerrainContext } from '../terrain/context.js';
@@ -116,7 +116,7 @@ export declare class StoreRetainedCache {
      * The decisions are conservative (rebuilding too much still renders correctly; rebuilding too
      * little leaves a stale picture).
      */
-    applyChanges(changes: StateChanges): void;
+    applyChanges(changes: StoreChange): void;
     /**
      * Discards the cache of every layer (the GPU resources are released as well)
      */

package/dist/view/layer/store-retained.js

@@ -96,7 +96,7 @@ export class StoreRetainedCache {
         this.frame++;
         this.featuresByLayer = null;
         // Every watch is advanced on every frame (no short circuit), so each keeps its snapshot
-        const hiddenChanged = this.watch.locallyHiddenChanged(this.store.getLocallyHidden());
+        const hiddenChanged = this.watch.locallyHiddenChanged(this.store.listHidden());
         const companionsChanged = this.watch.companionsChanged(companions);
         const terrainChanged = this.watch.terrainChanged(this.terrain);
         if (hiddenChanged || companionsChanged || terrainChanged)

package/dist/view/renderers/batch-manager.js

@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
 import { generateCirclePolygon } from '../../shared/math/index.js';
+import { coordinatesOf } from '../../shared/utils/coordinates.js';
 import { getCircleRadius, getCreatedZoom } from '../../shared/utils/property.js';
 import { densifyPathForGlobe } from '../globe-subdivision.js';
 import { TerrainContext } from '../terrain/context.js';
@@ -371,7 +372,7 @@ export class BatchManager {
     }
     // === Point processing ===
     processPoint(feature) {
-        this.processPointCoord(feature, feature.coordinates);
+        this.processPointCoord(feature, coordinatesOf(feature));
     }
     /**
      * Add a MultiPoint to the point batch, part by part
@@ -380,7 +381,7 @@ export class BatchManager {
      * feature, so it is shared across all parts.
      */
     processMultiPoint(feature) {
-        const parts = feature.coordinates;
+        const parts = coordinatesOf(feature);
         for (const coord of parts) {
             this.processPointCoord(feature, coord);
         }
@@ -440,7 +441,7 @@ export class BatchManager {
     }
     // === LineString processing ===
     processLineString(feature) {
-        this.processLineCoords(feature, feature.coordinates);
+        this.processLineCoords(feature, coordinatesOf(feature));
     }
     /**
      * Add a MultiLineString to the line batch, part by part
@@ -448,7 +449,7 @@ export class BatchManager {
      * The coordinates are `Coordinate[][]` (a part = one polyline).
      */
     processMultiLineString(feature) {
-        const parts = feature.coordinates;
+        const parts = coordinatesOf(feature);
         for (const coords of parts) {
             if (coords.length < 2)
                 continue;
@@ -534,7 +535,7 @@ export class BatchManager {
     }
     // === Polygon processing ===
     processPolygon(feature) {
-        const rings = feature.coordinates;
+        const rings = coordinatesOf(feature);
         const outerRing = rings[0];
         if (!outerRing || outerRing.length < 3)
             return;
@@ -548,7 +549,7 @@ export class BatchManager {
      * The key of the earcut cache includes the part index as well.
      */
     processMultiPolygon(feature) {
-        const parts = feature.coordinates;
+        const parts = coordinatesOf(feature);
         for (let partIndex = 0; partIndex < parts.length; partIndex++) {
             const rings = parts[partIndex];
             const outerRing = rings?.[0];
@@ -559,7 +560,7 @@ export class BatchManager {
     }
     // === Circle processing ===
     processCircle(feature) {
-        const center = feature.coordinates;
+        const center = coordinatesOf(feature);
         const radiusMeters = getCircleRadius(feature);
         if (!radiusMeters || radiusMeters <= 0)
             return;

package/dist/view/renderers/drawer.js

@@ -1,7 +1,8 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
+import { toColor } from '../../shared/color.js';
 import { generateCirclePolygon } from '../../shared/math/index.js';
-import { hexToColor } from '../../shared/utils/color.js';
+import { coordinatesOf } from '../../shared/utils/coordinates.js';
 import { getCircleRadius, getCreatedZoom } from '../../shared/utils/property.js';
 import { StyleRuleCache } from '../cache/style-rule.js';
 import { applyRuleColor } from '../style-rule.js';
@@ -87,25 +88,25 @@ export class FeatureDrawer {
     drawFeature(feature, projectionData, zoom, layer) {
         const opacity = layerDrawFactors(layer).opacity;
         if (feature.type === 'Point') {
-            const coord = feature.coordinates;
+            const coord = coordinatesOf(feature);
             const pointStyle = pointWithOpacity(this.getPointStyle(feature, layer), opacity);
             this.drawPointShape(coord, pointStyle, zoom, feature.id);
         }
         else if (feature.type === 'LineString') {
-            const coords = feature.coordinates;
+            const coords = coordinatesOf(feature);
             const createdZoom = getCreatedZoom(feature) ?? zoom;
             const strokeStyle = strokeWithOpacity(this.getLineStringStrokeStyle(feature, layer), opacity);
             this.drawLineStringStroke(coords, strokeStyle, projectionData, zoom, createdZoom, feature.id);
         }
         else if (feature.type === 'Polygon') {
-            const rings = feature.coordinates;
+            const rings = coordinatesOf(feature);
             const createdZoom = getCreatedZoom(feature) ?? zoom;
             const { fillColor, strokeStyle } = polygonWithOpacity(this.getPolygonStyles(feature, layer), opacity);
             this.drawPolygonWithStroke(rings, fillColor, strokeStyle, projectionData, zoom, createdZoom, feature.id);
         }
         else if (feature.type === 'MultiPoint') {
             // Draw a point for each part (the style is shared across the feature)
-            const parts = feature.coordinates;
+            const parts = coordinatesOf(feature);
             const pointStyle = pointWithOpacity(this.getPointStyle(feature, layer), opacity);
             for (const coord of parts) {
                 this.drawPointShape(coord, pointStyle, zoom, feature.id);
@@ -113,7 +114,7 @@ export class FeatureDrawer {
         }
         else if (feature.type === 'MultiLineString') {
             // Draw a line for each part
-            const parts = feature.coordinates;
+            const parts = coordinatesOf(feature);
             const createdZoom = getCreatedZoom(feature) ?? zoom;
             const strokeStyle = strokeWithOpacity(this.getLineStringStrokeStyle(feature, layer), opacity);
             for (let i = 0; i < parts.length; i++) {
@@ -122,7 +123,7 @@ export class FeatureDrawer {
         }
         else if (feature.type === 'MultiPolygon') {
             // Draw a hole-aware polygon for each part
-            const parts = feature.coordinates;
+            const parts = coordinatesOf(feature);
             const createdZoom = getCreatedZoom(feature) ?? zoom;
             const { fillColor, strokeStyle } = polygonWithOpacity(this.getPolygonStyles(feature, layer), opacity);
             for (let i = 0; i < parts.length; i++) {
@@ -130,14 +131,16 @@ export class FeatureDrawer {
             }
         }
         else if (feature.type === 'Image') {
-            this.imageRenderer.draw(feature, projectionData, zoom, () => this.map.triggerRepaint(), opacity);
+            // An image without an opacity of its own takes the one of the instance
+            const imageOpacity = feature.style.imageOpacity === undefined ? (this.featureStyle.image?.opacity ?? 1) : 1;
+            this.imageRenderer.draw(feature, projectionData, zoom, () => this.map.triggerRepaint(), opacity * imageOpacity);
         }
         else if (feature.type === 'Circle') {
             this.drawCircle(feature, projectionData, zoom, layer, opacity);
         }
         else if (feature.type === 'Freehand') {
             // Freehand uses the same rendering logic as LineString
-            const coords = feature.coordinates;
+            const coords = coordinatesOf(feature);
             const createdZoom = getCreatedZoom(feature) ?? zoom;
             const strokeStyle = strokeWithOpacity(this.getLineStringStrokeStyle(feature, layer), opacity);
             this.drawLineStringStroke(coords, strokeStyle, projectionData, zoom, createdZoom, feature.id);
@@ -185,7 +188,7 @@ export class FeatureDrawer {
         // Apply strokeOpacity when it is specified, even if strokeColor is not set
         // strokeOpacity is set directly rather than multiplied into the default alpha value
         const color = style.strokeColor
-            ? hexToColor(style.strokeColor, style.strokeOpacity ?? 1)
+            ? toColor(style.strokeColor, style.strokeOpacity ?? 1)
             : style.strokeOpacity !== undefined
                 ? [defaultStyle.color[0], defaultStyle.color[1], defaultStyle.color[2], style.strokeOpacity]
                 : defaultStyle.color;
@@ -208,8 +211,11 @@ export class FeatureDrawer {
      * @param layer The layer it belongs to (used to evaluate style rules; no rules when omitted)
      */
     getPolygonStyles(feature, layer) {
-        const defaultFillColor = this.featureStyle.polygon.fill.color;
-        const defaultStrokeStyle = this.featureStyle.polygon.stroke;
+        const look = feature?.type === 'Circle' && this.featureStyle.circle
+            ? this.featureStyle.circle
+            : this.featureStyle.polygon;
+        const defaultFillColor = look.fill.color;
+        const defaultStrokeStyle = look.stroke;
         const style = this.resolveStyle(feature, layer, 'fill');
         if (!style) {
             return { fillColor: defaultFillColor, strokeStyle: defaultStrokeStyle };
@@ -220,14 +226,14 @@ export class FeatureDrawer {
         // So that a feature with only fillColor specified does not become opaque (alpha 1),
         // it follows the alpha component of the default color rather than a hardcoded 1.
         const fillColor = style.fillColor
-            ? hexToColor(style.fillColor, style.fillOpacity ?? defaultFillColor[3])
+            ? toColor(style.fillColor, style.fillOpacity ?? defaultFillColor[3])
             : style.fillOpacity !== undefined
                 ? [defaultFillColor[0], defaultFillColor[1], defaultFillColor[2], style.fillOpacity]
                 : defaultFillColor;
         // Apply strokeOpacity when it is specified, even if strokeColor is not set
         // strokeOpacity is set directly rather than multiplied into the default alpha value
         const strokeColor = style.strokeColor
-            ? hexToColor(style.strokeColor, style.strokeOpacity ?? 1)
+            ? toColor(style.strokeColor, style.strokeOpacity ?? 1)
             : style.strokeOpacity !== undefined
                 ? [
                     defaultStrokeStyle.color[0],
@@ -292,7 +298,7 @@ export class FeatureDrawer {
      * Draw a Circle
      */
     drawCircle(feature, projectionData, zoom, layer, opacity = 1) {
-        const center = feature.coordinates;
+        const center = coordinatesOf(feature);
         const radiusMeters = getCircleRadius(feature);
         if (!radiusMeters || radiusMeters <= 0)
             return;

package/dist/view/renderers/image.js

@@ -1,20 +1,10 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
 import { getMetersPerPixel, metersToDegreesLat, metersToDegreesLng, } from '../../shared/math/index.js';
+import { coordinatesOf } from '../../shared/utils/coordinates.js';
 import { getTileSize } from '../../shared/utils/map.js';
 import { getImageProperties } from '../../shared/utils/property.js';
 import { computeQuadVertices } from '../shaders/quad.js';
-/**
- * The default image style
- * width/height: 0 = use the original size
- */
-const DEFAULT_IMAGE_STYLE = {
-    width: 0,
-    height: 0,
-    rotation: 0,
-    opacity: 1.0,
-    imageOpacity: 1,
-};
 /**
  * ImageRenderer
  *
@@ -99,9 +89,8 @@ export class ImageRenderer {
         // its file), so the feature is drawn without its image and nothing is logged.
         if (!fileData)
             return;
-        const coord = feature.coordinates;
+        const coord = coordinatesOf(feature);
         const latitude = coord[1];
-        const style = this.getImageStyle(feature.style);
         // The texture is keyed by the dataURL. While the image is decoding nothing is drawn; the
         // decode (shared per dataURL) requests a redraw when it finishes, and that frame uploads it
         const imageFileId = properties.imageFileId;
@@ -117,12 +106,9 @@ export class ImageRenderer {
             this.noteMissingImage(feature.id, src);
             return;
         }
-        // Determine the size (use the size stored in ImageProperties)
-        const imageWidth = properties.imageWidth || textureInfo.width;
-        const imageHeight = properties.imageHeight || textureInfo.height;
-        // Use the size specified by the style, or the original size
-        const displayWidth = style.width || imageWidth;
-        const displayHeight = style.height || imageHeight;
+        // The size in pixels at the created zoom: the size of the feature, or else of the image
+        const displayWidth = properties.imageWidth || textureInfo.width;
+        const displayHeight = properties.imageHeight || textureInfo.height;
         // Scale relative to how it is displayed at createdZoom
         // At createdZoom the image is displayed at its original pixel size
         const createdZoom = properties.createdZoom || zoom;
@@ -136,16 +122,13 @@ export class ImageRenderer {
         const widthDeg = metersToDegreesLng(widthMeters, latitude);
         const heightDeg = metersToDegreesLat(heightMeters);
         // Rotation angle (degrees -> radians)
-        const rotationRad = (((style.rotation || 0) + (properties.rotation || 0)) * Math.PI) / 180;
+        const rotationRad = ((properties.rotation || 0) * Math.PI) / 180;
         // Compute the quad vertices
         const vertices = computeQuadVertices(coord[0], coord[1], widthDeg, heightDeg, rotationRad);
-        // Draw (imageOpacity takes precedence; otherwise opacity is used)
-        const opacity = (style.imageOpacity ?? style.opacity ?? 1.0) * opacityFactor;
+        // Draw
+        const opacity = (feature.style.imageOpacity ?? 1.0) * opacityFactor;
         this.quadShader.draw(vertices, textureInfo.texture, opacity, projectionData, zoom);
     }
-    /**
-     * Merge the image style
-     */
     /**
      * Records a feature whose image is not drawn: reports it at once when the image has failed,
      * otherwise waits for the decode (the cache tells only the caller that started it)
@@ -177,12 +160,6 @@ export class ImageRenderer {
         this.reportedFailures.set(featureId, src);
         this.onError?.(featureId, error);
     }
-    getImageStyle(style) {
-        return {
-            ...DEFAULT_IMAGE_STYLE,
-            ...style,
-        };
-    }
     /**
      * Compute the bounding box of an image (in degrees)
      *
@@ -196,14 +173,11 @@ export class ImageRenderer {
         const properties = getImageProperties(feature);
         if (!properties.imageFileId)
             return null;
-        const coord = feature.coordinates;
+        const coord = coordinatesOf(feature);
         const latitude = coord[1];
-        const style = this.getImageStyle(feature.style);
-        // Determine the size
-        const imageWidth = properties.imageWidth || style.width;
-        const imageHeight = properties.imageHeight || style.height;
-        const displayWidth = style.width || imageWidth;
-        const displayHeight = style.height || imageHeight;
+        // The size in pixels at the created zoom
+        const displayWidth = properties.imageWidth;
+        const displayHeight = properties.imageHeight;
         // Scale relative to how it is displayed at createdZoom
         const createdZoom = properties.createdZoom || zoom;
         const scale = properties.scale || 1;
@@ -216,7 +190,7 @@ export class ImageRenderer {
         const widthDeg = metersToDegreesLng(widthMeters, latitude);
         const heightDeg = metersToDegreesLat(heightMeters);
         // Rotation angle
-        const rotationRad = (((style.rotation || 0) + (properties.rotation || 0)) * Math.PI) / 180;
+        const rotationRad = ((properties.rotation || 0) * Math.PI) / 180;
         // Compute the quad vertices
         const vertices = computeQuadVertices(coord[0], coord[1], widthDeg, heightDeg, rotationRad);
         // Compute the bounding box

package/dist/view/renderers/line/line-types.d.ts

@@ -6,12 +6,12 @@
  */
 import type { Color, LineStyle } from '../../../shared/types/style.js';
 export type { Color, LineStyle };
-/** The style of a line drawn by {@link SDFLineRenderer}. */
+/** The style of a line drawn by the shared line renderer. */
 export interface SDFStrokeStyle {
     /** The line width in CSS px (at `createdZoom` when the options give one) */
     width: number;
     /** The color as `[r, g, b, a]`, each 0..1 */
-    color: Color;
+    color: [number, number, number, number];
     /** The opacity, 0..1, multiplied into the color */
     opacity: number;
     /** Solid, dashed or dotted */
@@ -27,7 +27,7 @@ export interface SDFStrokeStyle {
  * zoom and the latitude.
  */
 export type WidthUnit = 'pixels' | 'meters';
-/** The options of one {@link SDFLineRenderer.draw} call. */
+/** The options of one `draw` call of the shared line renderer. */
 export interface SDFStrokeOptions {
     /** The unit of the width. The renderer draws `width` in CSS px */
     widthUnit: WidthUnit;

package/dist/view/renderers/line/sdf-line.js

@@ -141,7 +141,9 @@ export class SDFLineRenderer {
         this.terrain = terrain;
         this.uniforms = new LineUniforms(gl);
         this.immCoordTexture = new ImmediateCoordTexture(gl);
-        this.projectionUniformManager = new ProjectionUniformManager(gl, { surface: true, terrain });
+        this.projectionUniformManager = new ProjectionUniformManager(gl, {
+            surface: true,
+        }).useTerrainState(terrain);
         this.initBuffers();
     }
     /**

package/dist/view/renderers/point/billboard-depth.js

@@ -17,7 +17,7 @@
  * Billboards are not drawn in a single place. Both the instanced billboard (point-instance) and
  * the per-point shapes (point-shape: triangle, star, icon, and the degenerate path for the
  * default circle) draw billboards. Wrapping only the instanced side leaves hand-drawn points as
- * half circles. A hand-drawn Point may be taken over by a registered CustomFeatureRenderer,
+ * half circles. A hand-drawn Point may be taken over by a registered FeatureTypeRenderer,
  * and then never goes through the instanced path at all. That is why this function is shared
  * by every renderer that draws billboards. SDF glyphs laid flat on the map plane (text that is
  * not painted into a ground quad) go through here for the same reason.

package/dist/view/renderers/point/point-instance.js

@@ -474,7 +474,7 @@ void main() {
             opacity: gl.getUniformLocation(program, 'u_opacity'),
             shape: gl.getUniformLocation(program, 'u_shape'),
         };
-        const projection = new ProjectionUniformManager(gl, { terrain: this.terrain });
+        const projection = new ProjectionUniformManager(gl).useTerrainState(this.terrain);
         projection.getLocations(program);
         const state = { locs, memo: createPointMemo(), projection };
         this.programStates.set(program, state);

package/dist/view/renderers/point/point-shape.js

@@ -236,7 +236,7 @@ export class PointShapeRenderer {
         this.gl = gl;
         this.pixelRatio = pixelRatio;
         this.terrain = terrain;
-        this.projectionUniformManager = new ProjectionUniformManager(gl, { terrain });
+        this.projectionUniformManager = new ProjectionUniformManager(gl).useTerrainState(terrain);
         this.bufferCache = new BufferCache(gl);
     }
     /**
@@ -385,7 +385,7 @@ void main() {
             gl.uniform1f(this.anchorElevationLoc, elevationMeters ?? anchorElevationMeters(this.terrain, lng, lat));
         }
         // Billboards are drawn without the depth test (see the note in billboard-depth.ts). A
-        // hand-drawn Point can arrive here through a CustomFeatureRenderer, so wrapping only the
+        // hand-drawn Point can arrive here through a FeatureTypeRenderer, so wrapping only the
         // instanced side would leave the points of this path as half circles.
         drawBillboardsWithoutDepth(gl, () => {
             // Draw the fill

package/dist/view/renderers/point/point-style.js

@@ -9,7 +9,7 @@
  * datasets. The shape in particular decides which run and which batch a point
  * goes on, so resolving it anywhere else would split the z-order of the paths.
  */
-import { hexToColor } from '../../../shared/utils/color.js';
+import { toColor } from '../../../shared/color.js';
 /** The shapes a feature may name (`'icon'` belongs to the defaults of an extension) */
 const FEATURE_POINT_SHAPES = new Set(['circle', 'square', 'triangle', 'star']);
 /**
@@ -22,12 +22,30 @@ function featurePointShape(style) {
     const shape = style.pointShape;
     return shape !== undefined && FEATURE_POINT_SHAPES.has(shape) ? shape : undefined;
 }
+/**
+ * The opacity of the marker a feature names, from 0 to 1 (1 when it names none or a value
+ * outside the range)
+ */
+function featurePointOpacity(style) {
+    const opacity = style.pointOpacity;
+    return typeof opacity === 'number' && opacity >= 0 && opacity <= 1 ? opacity : 1;
+}
+/**
+ * The width of the outline of the marker a feature names, or undefined when it names none or
+ * a value that is not a finite number of 0 or more
+ */
+function featurePointStrokeWidth(style) {
+    const width = style.pointStrokeWidth;
+    return typeof width === 'number' && Number.isFinite(width) && width >= 0 ? width : undefined;
+}
 /**
  * Merges the style of a point feature (already carrying the rule color) into the default
  *
  * The keys of the feature win key by key: `pointColor` becomes the fill, `pointRadius` the
- * size (a diameter), `pointShape` the shape. A key left unset (or a shape that is not one of
- * the four a feature may name) keeps the default.
+ * size (a diameter), `pointShape` the shape, `pointStrokeColor` and `pointStrokeWidth` the
+ * outline. `pointOpacity` is multiplied into the opacity of the fill and of the outline of the
+ * marker. A key left unset (or a shape that is not one of the four a feature may name, an
+ * opacity outside 0 to 1, or a negative width) keeps the default.
  *
  * @param style The style of the feature (undefined when it has none)
  * @param defaults The point style of the `style` option of the instance
@@ -37,10 +55,36 @@ function featurePointShape(style) {
 export function resolvePointStyle(style, defaults) {
     if (!style)
         return defaults;
+    const opacity = featurePointOpacity(style);
     return {
         ...defaults,
         shape: featurePointShape(style) ?? defaults.shape,
-        fillColor: style.pointColor ? hexToColor(style.pointColor, 1) : defaults.fillColor,
+        fillColor: style.pointColor ? toColor(style.pointColor, 1) : defaults.fillColor,
         size: style.pointRadius ? style.pointRadius * 2 : defaults.size,
+        fillOpacity: defaults.fillOpacity * opacity,
+        strokeColor: style.pointStrokeColor ? toColor(style.pointStrokeColor, 1) : defaults.strokeColor,
+        strokeWidth: featurePointStrokeWidth(style) ?? defaults.strokeWidth,
+        strokeOpacity: defaults.strokeOpacity * opacity,
     };
 }
+/**
+ * How far the marker of a point reaches from its position, in CSS pixels: the radius the
+ * marker is drawn with plus its outline when the outline is drawn
+ *
+ * It reads the keys `resolvePointStyle` reads for the size and the outline, without building
+ * the merged style, so the hit test can ask it of every point on every move of the pointer.
+ *
+ * @param style The style of the feature (undefined when it has none)
+ * @param defaults The point style of the `style` option of the instance
+ *
+ * @internal
+ */
+export function pointMarkerReachPx(style, defaults) {
+    const radius = style?.pointRadius ? style.pointRadius : defaults.size / 2;
+    const strokeOpacity = defaults.strokeOpacity * (style ? featurePointOpacity(style) : 1);
+    const stroke = strokeOpacity > 0
+        ? ((style ? featurePointStrokeWidth(style) : undefined) ?? defaults.strokeWidth)
+        : 0;
+    const reach = radius + stroke;
+    return Number.isFinite(reach) && reach > 0 ? reach : 0;
+}

package/dist/view/renderers/polygon/batch.js

@@ -92,8 +92,7 @@ export class PolygonBatchRenderer {
         this.earcutCache = scope.earcut ?? new EarcutCache();
         this.projectionUniformManager = new ProjectionUniformManager(gl, {
             surface: true,
-            terrain: this.terrain,
-        });
+        }).useTerrainState(this.terrain);
         this.vertexBuffer = gl.createBuffer();
         this.indexBuffer = gl.createBuffer();
         this.vao = gl.createVertexArray();

package/dist/view/renderers/polygon/fill.js

@@ -83,7 +83,9 @@ export class FillShaderManager {
             value: null
         });
         this.gl = gl;
-        this.projectionUniformManager = new ProjectionUniformManager(gl, { surface: true, terrain });
+        this.projectionUniformManager = new ProjectionUniformManager(gl, {
+            surface: true,
+        }).useTerrainState(terrain);
         this.vertexBuffer = gl.createBuffer();
         this.indexBuffer = gl.createBuffer();
         this.vao = gl.createVertexArray();

package/dist/view/renderers/polygon/sdf-polygon.js

@@ -210,8 +210,7 @@ export class SDFPolygonRenderer {
         this.earcutCache = scope.earcut ?? new EarcutCache();
         this.projectionUniformManager = new ProjectionUniformManager(gl, {
             surface: true,
-            terrain: this.terrain,
-        });
+        }).useTerrainState(this.terrain);
         this.vertexBuffer = gl.createBuffer();
         this.indexBuffer = gl.createBuffer();
         this.vao = gl.createVertexArray();
@@ -550,7 +549,7 @@ void main() {
      * the cache used by the drawing of the Store must not be polluted with the features
      * of datasets). However, when options.triangulator is passed, both the caching and the
      * time slicing of the triangulation become its responsibility
-     * (display/triangulation.ts).
+     * (dataset/triangulation.ts).
      *
      * @returns The built batch. null when the shader is not initialized or there are no
      *   vertices