@sakuzu/maplibre-gl-draw 1.0.0

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

@@ -0,0 +1,504 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { RENDERING_DEFAULTS } from '../../../shared/math/index.js';
+import { resolvePixelRatio } from '../../../shared/utils/pixel-ratio.js';
+import { BufferCache } from '../../cache/buffer.js';
+import { calculateLngLatOffset, createProgram, getProjectionTransitionUniform, OFFSET_MODE_GLSL, } from '../../shaders/helpers.js';
+import { ProjectionUniformManager } from '../../shaders/projection.js';
+import { anchorElevationMeters } from '../../terrain/anchor.js';
+import { TerrainContext } from '../../terrain/context.js';
+import { drawBillboardsWithoutDepth } from './billboard-depth.js';
+import { samplePointShapeRings } from './point-sdf.js';
+// Number of segments that approximate a circle
+const CIRCLE_SEGMENTS = RENDERING_DEFAULTS.CIRCLE_SEGMENTS;
+/**
+ * Generates the vertices of a normalized circle (for TRIANGLE_FAN)
+ * A shape centered at (0,0) with radius 1
+ */
+function generateNormalizedCircleVertices(segments) {
+    const vertices = [];
+    // Center point
+    vertices.push({ x: 0, y: 0 });
+    // Points on the outer edge
+    for (let i = 0; i <= segments; i++) {
+        const angle = (i / segments) * Math.PI * 2;
+        vertices.push({
+            x: Math.cos(angle),
+            y: Math.sin(angle),
+        });
+    }
+    return vertices;
+}
+/**
+ * Generates the stroke vertices of a normalized circle (for TRIANGLE_STRIP)
+ * Uses an inner radius and an outer radius
+ */
+function generateNormalizedCircleStrokeVertices(innerRadius, outerRadius, segments) {
+    const vertices = [];
+    for (let i = 0; i <= segments; i++) {
+        const angle = (i / segments) * Math.PI * 2;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        // Outside
+        vertices.push({
+            x: cos * outerRadius,
+            y: sin * outerRadius,
+        });
+        // Inside
+        vertices.push({
+            x: cos * innerRadius,
+            y: sin * innerRadius,
+        });
+    }
+    return vertices;
+}
+/**
+ * Generates the vertices of a normalized square (for TRIANGLE_FAN)
+ */
+function generateNormalizedSquareVertices() {
+    return [
+        { x: 0, y: 0 }, // center
+        { x: -1, y: -1 }, // top-left
+        { x: 1, y: -1 }, // top-right
+        { x: 1, y: 1 }, // bottom-right
+        { x: -1, y: 1 }, // bottom-left
+        { x: -1, y: -1 }, // top-left (closing)
+    ];
+}
+/**
+ * Generates the stroke vertices of a normalized square
+ */
+function generateNormalizedSquareStrokeVertices(innerRadius, outerRadius) {
+    const vertices = [];
+    const corners = [
+        { x: -1, y: -1 }, // top-left
+        { x: 1, y: -1 }, // top-right
+        { x: 1, y: 1 }, // bottom-right
+        { x: -1, y: 1 }, // bottom-left
+    ];
+    for (let i = 0; i <= 4; i++) {
+        const corner = corners[i % 4];
+        vertices.push({ x: corner.x * outerRadius, y: corner.y * outerRadius });
+        vertices.push({ x: corner.x * innerRadius, y: corner.y * innerRadius });
+    }
+    return vertices;
+}
+/**
+ * Generates the fill vertices of a shape normalized to the radius 1 (for TRIANGLE_FAN)
+ *
+ * The circle and the square fill the radius. The triangle and the star are inscribed in the
+ * outer edge (`outerRatio`) and fill the inside of the stroke band, the same boundaries the
+ * instanced renderer draws with its distance function. `'icon'` is drawn as a circle.
+ */
+function generateFillVertices(shape, outerRatio) {
+    switch (shape) {
+        case 'square':
+            return generateNormalizedSquareVertices();
+        case 'triangle':
+        case 'star': {
+            const { inner } = samplePointShapeRings(shape, outerRatio, outerRatio - 1);
+            const ring = inner.map(([x, y]) => ({ x, y }));
+            return [{ x: 0, y: 0 }, ...ring, ring[0]];
+        }
+        default:
+            return generateNormalizedCircleVertices(CIRCLE_SEGMENTS);
+    }
+}
+/**
+ * Generates the stroke vertices of a shape normalized to the radius 1 (for TRIANGLE_STRIP)
+ *
+ * The stroke is the band between the radius and the outer edge (`outerRatio`); for the triangle
+ * and the star, the band of the stroke width inside the outer edge.
+ */
+function generateStrokeVertices(shape, outerRatio) {
+    switch (shape) {
+        case 'square':
+            return generateNormalizedSquareStrokeVertices(1, outerRatio);
+        case 'triangle':
+        case 'star': {
+            const rings = samplePointShapeRings(shape, outerRatio, outerRatio - 1);
+            const vertices = [];
+            for (let i = 0; i <= rings.outer.length; i++) {
+                const j = i % rings.outer.length;
+                vertices.push({ x: rings.outer[j][0], y: rings.outer[j][1] });
+                vertices.push({ x: rings.inner[j][0], y: rings.inner[j][1] });
+            }
+            return vertices;
+        }
+        default:
+            return generateNormalizedCircleStrokeVertices(1, outerRatio, CIRCLE_SEGMENTS);
+    }
+}
+/** Packs vertices into an interleaved Float32Array (x, y) */
+function toVertexData(vertices) {
+    const data = new Float32Array(vertices.length * 2);
+    for (let i = 0; i < vertices.length; i++) {
+        data[i * 2] = vertices[i].x;
+        data[i * 2 + 1] = vertices[i].y;
+    }
+    return data;
+}
+/**
+ * The point renderer core uses for point markers (circles, squares, triangles and stars; the
+ * shape `'icon'` is drawn as a circle), shared with custom feature renderers.
+ *
+ * Draws a billboard of a size in CSS px at a `[lng, lat]` position in degrees, converting to
+ * clip space on the GPU. Call `ensureShader`, `setOffsetUniforms` and `setProjectionData`
+ * before drawing.
+ */
+export class PointShapeRenderer {
+    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, "bufferCache", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // Projection uniform management
+        Object.defineProperty(this, "projectionUniformManager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // Uniform locations (specific to this renderer)
+        Object.defineProperty(this, "colorLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "pointLngLatLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        /** Uniform for the ground elevation of the anchor (meters) */
+        Object.defineProperty(this, "anchorElevationLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "sizeClipLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        // ProjectionData
+        Object.defineProperty(this, "projectionData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        // Stores the uniforms for the offset mode
+        Object.defineProperty(this, "offsetUniforms", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        /** Injected device pixel ratio (when not injected, it is read from window each time) */
+        Object.defineProperty(this, "pixelRatio", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** The terrain state of the draw instance this renderer belongs to */
+        Object.defineProperty(this, "terrain", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.gl = gl;
+        this.pixelRatio = pixelRatio;
+        this.terrain = terrain;
+        this.projectionUniformManager = new ProjectionUniformManager(gl, { terrain });
+        this.bufferCache = new BufferCache(gl);
+    }
+    /**
+     * Ensures the shader exists (recreating it when necessary)
+     */
+    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;
+        // Get the projection uniform locations
+        this.projectionUniformManager.getLocations(this.program);
+        // Get the uniform locations specific to this renderer
+        this.colorLoc = this.gl.getUniformLocation(this.program, 'u_color');
+        this.pointLngLatLoc = this.gl.getUniformLocation(this.program, 'u_point_offset');
+        this.anchorElevationLoc = this.gl.getUniformLocation(this.program, 'u_anchor_elevation_m');
+        this.sizeClipLoc = this.gl.getUniformLocation(this.program, 'u_size_clip');
+    }
+    /**
+     * Sets the uniforms for the offset mode
+     */
+    setOffsetUniforms(uniforms) {
+        this.offsetUniforms = uniforms;
+    }
+    /**
+     * Creates the shader program (offset mode)
+     */
+    createShaderProgram(prelude, define) {
+        const projTransitionUniform = getProjectionTransitionUniform(prelude);
+        // Vertex shader:
+        // - a_offset: the normalized offset (a vertex of the shape)
+        // - u_point_offset: the relative coordinates of the point (the offset from the center,
+        //   computed with 64-bit precision on the CPU side)
+        // - u_size_clip: the size in clip space
+        const vertexSource = `#version 300 es
+${prelude}
+${define}
+${projTransitionUniform}${OFFSET_MODE_GLSL}
+in vec2 a_offset;
+uniform vec2 u_point_offset;
+uniform vec2 u_size_clip;
+// Ground elevation of the anchor (meters). It comes from the same source as hit testing (CPU)
+uniform float u_anchor_elevation_m;
+void main() {
+    // The elevation is not sampled from the DEM atlas; the value passed by the CPU is used as is
+    // (two sources make the drawn position and the hit area disagree)
+    g_anchor_elevation_m = u_anchor_elevation_m;
+    g_anchor_elevation_on = 1.0;
+
+    // Offset mode: uses the relative coordinates computed with 64-bit precision on the CPU side
+    vec4 centerClip = project_position_to_clipspace_from_offset(u_point_offset, u_projection_matrix);
+
+    // Convert to NDC coordinates and then apply the offset
+    vec3 centerNDC = centerClip.xyz / centerClip.w;
+
+    // Scale the offset by the size in clip space (applied in NDC space)
+    vec2 offsetNDC = a_offset * u_size_clip;
+
+    // Center + offset (in NDC space, w=1)
+    gl_Position = vec4(centerNDC.xy + offsetNDC, centerNDC.z, 1.0);
+}`;
+        const fragmentSource = `#version 300 es
+precision highp float;
+uniform vec4 u_color;
+out vec4 fragColor;
+void main() {
+    fragColor = u_color;
+}`;
+        return createProgram(this.gl, vertexSource, fragmentSource);
+    }
+    /**
+     * Sets the projection uniforms (supporting the offset mode and the globe mode)
+     * @param zoom The current zoom level (used to switch the offset mode)
+     */
+    setProjectionUniforms(zoom) {
+        if (!this.projectionData)
+            return;
+        this.projectionUniformManager.setUniforms(this.projectionData, zoom, this.offsetUniforms);
+    }
+    /**
+     * Converts a size in pixels to a size in clip space
+     *
+     * CSS pixels are converted to device pixels first, and then to clip space. The viewport covers
+     * the drawing buffer (in device pixels), so the pixel ratio has to be taken into account.
+     */
+    pixelsToClipSize(pixels) {
+        // Convert CSS pixels to device pixels
+        const dpr = resolvePixelRatio(this.pixelRatio);
+        const physicalPixels = pixels * dpr;
+        // Convert device pixels to clip space (the drawing buffer is what the viewport covers)
+        return {
+            x: (physicalPixels / this.gl.drawingBufferWidth) * 2,
+            y: (physicalPixels / this.gl.drawingBufferHeight) * 2,
+        };
+    }
+    /**
+     * Sets the ProjectionData
+     */
+    setProjectionData(projectionData) {
+        this.projectionData = projectionData;
+    }
+    /**
+     * Draws a point
+     * @param coord The coordinates [lng, lat]
+     * @param style The point style
+     * @param zoom The current zoom level
+     * @param featureId The feature ID (optional)
+     */
+    draw(coord, style, zoom, featureId, 
+    /**
+     * The elevation to place it at (meters). When omitted, the ground elevation is used
+     *
+     * The four corners of the selection box and the rotation handle are placed at the same
+     * single height as the box. Picking up the ground height for each of them makes them look as
+     * if they float above or sink below the box (billboard).
+     */
+    elevationMeters) {
+        if (!this.program || !this.projectionData)
+            return;
+        const gl = this.gl;
+        const [lng, lat] = coord;
+        // Convert the size to clip space
+        const radiusClip = this.pixelsToClipSize(style.size / 2);
+        // Ratio of the outer edge (radius + stroke width) to the radius. The vertices are normalized
+        // to the radius, and the outer edge is the circumradius of the shape
+        const radiusPx = style.size / 2;
+        const outerRatio = radiusPx > 0 ? (radiusPx + Math.max(0, style.strokeWidth)) / radiusPx : 1;
+        gl.useProgram(this.program);
+        // Set the projection uniforms
+        this.setProjectionUniforms(zoom);
+        // Compute the relative coordinates on the CPU side (offset mode: 64-bit precision)
+        const centerLngLat = this.offsetUniforms?.centerLngLat ?? [0, 0];
+        const pointOffset = calculateLngLatOffset([lng, lat], centerLngLat);
+        // Set the relative coordinates
+        if (this.pointLngLatLoc) {
+            gl.uniform2f(this.pointLngLatLoc, pointOffset[0], pointOffset[1]);
+        }
+        // Ground elevation of the anchor. It is taken from the same function that hit testing
+        // (createCoordinateTransform) goes through, so the drawn position and the hit area match
+        // structurally. When terrain is disabled it returns 0, giving the same result as before
+        // terrain was introduced.
+        if (this.anchorElevationLoc) {
+            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
+        // instanced side would leave the points of this path as half circles.
+        drawBillboardsWithoutDepth(gl, () => {
+            // Draw the fill
+            if (style.fillOpacity > 0) {
+                this.drawFill(radiusClip.x, radiusClip.y, outerRatio, style, featureId);
+            }
+            // Draw the stroke
+            if (style.strokeOpacity > 0 && style.strokeWidth > 0) {
+                this.drawStroke(radiusClip.x, radiusClip.y, outerRatio, style, featureId);
+            }
+        });
+    }
+    /**
+     * Draws the fill
+     * The shape geometry is normalized, so it can be cached by shape type (and, for the triangle
+     * and the star, whose fill is the inside of the stroke band, by the outer ratio)
+     */
+    drawFill(radiusX, radiusY, outerRatio, style, featureId) {
+        const gl = this.gl;
+        // Set the size
+        if (this.sizeClipLoc) {
+            gl.uniform2f(this.sizeClipLoc, radiusX, radiusY);
+        }
+        // Set the color
+        const color = [
+            style.fillColor[0],
+            style.fillColor[1],
+            style.fillColor[2],
+            style.fillColor[3] * style.fillOpacity,
+        ];
+        if (this.colorLoc) {
+            gl.uniform4fv(this.colorLoc, color);
+        }
+        const insetShape = style.shape === 'triangle' || style.shape === 'star';
+        const outerRatioKey = Math.round(outerRatio * 100);
+        // Cache key: the shape type only (the shape is normalized, so it does not depend on the
+        // position or the size), plus the outer ratio for the shapes whose fill depends on it
+        const geometryHash = insetShape ? `${style.shape}:${outerRatioKey}` : style.shape;
+        const cacheKey = featureId ? `point:fill:${geometryHash}` : null;
+        this.drawShapeGeometry(cacheKey, geometryHash, gl.TRIANGLE_FAN, (ratio) => generateFillVertices(style.shape, ratio), featureId ? outerRatioKey / 100 : outerRatio);
+    }
+    /**
+     * Draws the stroke
+     * The stroke geometry depends on outerRatio, so it is cached by shape type + outerRatio
+     */
+    drawStroke(radiusX, radiusY, outerRatio, style, featureId) {
+        const gl = this.gl;
+        // Set the size (uses the same radius as the fill)
+        if (this.sizeClipLoc) {
+            gl.uniform2f(this.sizeClipLoc, radiusX, radiusY);
+        }
+        // Set the color
+        const color = [
+            style.strokeColor[0],
+            style.strokeColor[1],
+            style.strokeColor[2],
+            style.strokeColor[3] * style.strokeOpacity,
+        ];
+        if (this.colorLoc) {
+            gl.uniform4fv(this.colorLoc, color);
+        }
+        // Cache key: the shape type + outerRatio (rounded to two decimal places)
+        const outerRatioKey = Math.round(outerRatio * 100);
+        const geometryHash = `${style.shape}:${outerRatioKey}`;
+        const cacheKey = featureId ? `point:stroke:${geometryHash}` : null;
+        this.drawShapeGeometry(cacheKey, geometryHash, gl.TRIANGLE_STRIP, (ratio) => generateStrokeVertices(style.shape, ratio), featureId ? outerRatioKey / 100 : outerRatio);
+    }
+    /**
+     * Draws normalized shape vertices, through the buffer cache when a cache key is given and with
+     * a transient buffer otherwise
+     */
+    drawShapeGeometry(cacheKey, geometryHash, drawMode, build, outerRatio) {
+        const gl = this.gl;
+        if (cacheKey) {
+            const geometry = this.bufferCache.getOrCreate(cacheKey, geometryHash, () => {
+                const vertices = build(outerRatio);
+                return {
+                    vertices: toVertexData(vertices),
+                    vertexCount: vertices.length,
+                    drawMode,
+                    stride: 8,
+                    attributes: [{ index: 0, size: 2, offset: 0 }],
+                };
+            });
+            gl.bindVertexArray(geometry.vao);
+            gl.drawArrays(geometry.drawMode, 0, geometry.vertexCount);
+            gl.bindVertexArray(null);
+            return;
+        }
+        // No cache (a transient draw)
+        const vertices = build(outerRatio);
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        const buffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, toVertexData(vertices), gl.STATIC_DRAW);
+        gl.enableVertexAttribArray(0);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+        gl.drawArrays(drawMode, 0, vertices.length);
+        gl.bindVertexArray(null);
+        gl.deleteBuffer(buffer);
+        gl.deleteVertexArray(vao);
+    }
+    /**
+     * Disposes of the resources
+     *
+     * @internal
+     */
+    dispose() {
+        if (this.program) {
+            this.gl.deleteProgram(this.program);
+            this.program = null;
+        }
+        this.bufferCache.dispose();
+    }
+}

package/dist/view/renderers/point/point-style.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,46 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * Resolution of the style of a point marker
+ *
+ * The only place that merges the style of a point feature into the default of the instance.
+ * Every built-in path reads a point through it (via `FeatureDrawer.getPointStyle`): the
+ * immediate batches, the classification of the retained runs, the retained chunks and the
+ * 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';
+/** The shapes a feature may name (`'icon'` belongs to the defaults of an extension) */
+const FEATURE_POINT_SHAPES = new Set(['circle', 'square', 'triangle', 'star']);
+/**
+ * The shape a feature names, or undefined when it names none or a value it may not name
+ *
+ * A style that did not come through an import (set through the API or applied by a replaced
+ * store) is not validated, so a stray value falls back to the default here.
+ */
+function featurePointShape(style) {
+    const shape = style.pointShape;
+    return shape !== undefined && FEATURE_POINT_SHAPES.has(shape) ? shape : 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.
+ *
+ * @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 resolvePointStyle(style, defaults) {
+    if (!style)
+        return defaults;
+    return {
+        ...defaults,
+        shape: featurePointShape(style) ?? defaults.shape,
+        fillColor: style.pointColor ? hexToColor(style.pointColor, 1) : defaults.fillColor,
+        size: style.pointRadius ? style.pointRadius * 2 : defaults.size,
+    };
+}

package/dist/view/renderers/polygon/batch.d.ts

@@ -0,0 +1,26 @@
+import type { Coordinate } from '../../../store/types.js';
+import { EarcutCache } from '../../cache/earcut.js';
+import { TerrainContext } from '../../terrain/context.js';
+/** The color type */
+export type Color = [number, number, number, number];
+/** Polygon data for a batch */
+export interface PolygonBatchData {
+    coordinates: Coordinate[][];
+    color: Color;
+    featureId?: string;
+    /** The part number used for caching (a part of a MultiPolygon; omitted = 0 for a
+     * single polygon) */
+    partIndex?: number;
+}
+/**
+ * PolygonBatchRenderer
+ */
+/**
+ * The state of the draw instance a polygon renderer belongs to
+ */
+export interface PolygonRendererScope {
+    /** The terrain state (an inactive one draws flat) */
+    terrain?: TerrainContext;
+    /** Triangulation results keyed by feature id (a private cache when omitted) */
+    earcut?: EarcutCache;
+}