@sakuzu/maplibre-gl-draw 1.0.0

package/dist/view/ui/tentative.js

@@ -0,0 +1,320 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { destinationPoint } from '../../geometry/index.js';
+import { generateCirclePolygon } from '../../shared/math/index.js';
+import { FillShaderManager } from '../renderers/polygon/fill.js';
+/**
+ * The dotted pattern: an 8px line and a 6px gap
+ */
+const TENTATIVE_DASH_ARRAY = [8, 6];
+/**
+ * The Tentative rendering class
+ *
+ * Draws the tentative state while drawing (points, lines, polygons)
+ *
+ * @internal
+ */
+export class TentativeRenderer {
+    constructor(deps) {
+        Object.defineProperty(this, "sdfLineRenderer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "pointShapeRenderer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** The style of confirmed lines (solid) */
+        Object.defineProperty(this, "strokeStyle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** The style of unconfirmed lines (dotted) */
+        Object.defineProperty(this, "tentativeStrokeStyle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "vertexStyle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** The style of a highlighted vertex */
+        Object.defineProperty(this, "highlightedVertexStyle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** For Circle: the style of the center marker */
+        Object.defineProperty(this, "circleCenterMarkerStyle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** For Circle: the style of the radius change handle */
+        Object.defineProperty(this, "circleRadiusHandleStyle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "fillColor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "fillShaderManager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.sdfLineRenderer = deps.sdfLineRenderer;
+        this.pointShapeRenderer = deps.pointShapeRenderer;
+        this.strokeStyle = deps.tentativeStyle.stroke;
+        // The style of unconfirmed lines (the dotted pattern is set to match the specification)
+        this.tentativeStrokeStyle = {
+            ...deps.tentativeStyle.tentativeStroke,
+            dashArray: TENTATIVE_DASH_ARRAY,
+        };
+        this.vertexStyle = deps.tentativeStyle.vertex;
+        this.highlightedVertexStyle = deps.tentativeStyle.highlightedVertex;
+        this.circleCenterMarkerStyle = deps.tentativeStyle.circleCenterMarker;
+        this.circleRadiusHandleStyle = deps.tentativeStyle.circleRadiusHandle;
+        // The fill color for Tentative (translucent pink)
+        this.fillColor = [1.0, 0.176, 0.333, 0.2];
+        this.fillShaderManager = new FillShaderManager(deps.gl, deps.terrain);
+    }
+    /**
+     * Make sure the shader exists
+     */
+    ensureShader(shaderData) {
+        this.fillShaderManager.ensureShader(shaderData);
+    }
+    /**
+     * Set the uniforms for offset mode
+     */
+    setOffsetUniforms(uniforms) {
+        this.fillShaderManager.setOffsetUniforms(uniforms);
+    }
+    /**
+     * Draw only the lines and the fill of the Tentative (excluding the vertices)
+     *
+     * Used by the rendering that follows the layer order. The vertices are drawn separately
+     * in the foreground by drawVertices().
+     */
+    drawGeometry(tentative, projectionData, zoom) {
+        if (tentative.type === 'Point') {
+            // A Point is only vertices, so nothing is drawn for the geometry
+            return;
+        }
+        else if (tentative.type === 'LineString') {
+            this.drawLineStringGeometry(tentative, projectionData, zoom);
+        }
+        else if (tentative.type === 'Polygon') {
+            this.drawPolygonGeometry(tentative, projectionData, zoom);
+        }
+        else if (tentative.type === 'Circle') {
+            this.drawCircleGeometry(tentative, projectionData, zoom);
+        }
+        else if (tentative.type === 'Freehand') {
+            this.drawFreehandGeometry(tentative, projectionData, zoom);
+        }
+    }
+    /**
+     * Draw only the vertices of the Tentative
+     *
+     * Called after the selection UI so that they are shown in the foreground.
+     */
+    drawVertices(tentative, zoom) {
+        if (tentative.type === 'Point') {
+            const coord = tentative.coordinates;
+            this.drawPointShape(coord, this.vertexStyle, zoom);
+        }
+        else if (tentative.type === 'LineString') {
+            this.drawLineStringVertices(tentative, zoom);
+        }
+        else if (tentative.type === 'Polygon') {
+            this.drawPolygonVertices(tentative, zoom);
+        }
+        else if (tentative.type === 'Circle') {
+            this.drawCircleVertices(tentative, zoom);
+        }
+        else if (tentative.type === 'Freehand') {
+            // Freehand is lines only and does not draw vertices (the existing behavior is kept)
+        }
+    }
+    /**
+     * Draw a Point shape
+     */
+    drawPointShape(coord, style, zoom) {
+        this.pointShapeRenderer.draw(coord, style, zoom);
+    }
+    /**
+     * Tentative rendering of a LineString (lines only, no vertices)
+     */
+    drawLineStringGeometry(tentative, projectionData, zoom) {
+        const coords = tentative.coordinates;
+        const confirmedCount = tentative.confirmedCount ?? coords.length;
+        // Draw solid lines between the confirmed vertices
+        if (confirmedCount >= 2) {
+            const confirmedCoords = coords.slice(0, confirmedCount);
+            this.sdfLineRenderer.draw(confirmedCoords, this.strokeStyle, { widthUnit: 'pixels', closed: false }, zoom, projectionData);
+        }
+        // Draw a dotted line from the last confirmed vertex to the cursor position (GPU implementation)
+        if (confirmedCount >= 1 && coords.length > confirmedCount) {
+            const tentativeCoords = [
+                coords[confirmedCount - 1],
+                coords[coords.length - 1],
+            ];
+            this.sdfLineRenderer.draw(tentativeCoords, this.tentativeStrokeStyle, { widthUnit: 'pixels', closed: false }, zoom, projectionData);
+        }
+    }
+    /**
+     * Tentative rendering of the vertices of a LineString
+     */
+    drawLineStringVertices(tentative, zoom) {
+        const coords = tentative.coordinates;
+        const highlightedIndex = tentative.highlightedVertexIndex;
+        // Draw the vertices (the highlighted one has a different style)
+        for (let i = 0; i < coords.length; i++) {
+            const style = i === highlightedIndex ? this.highlightedVertexStyle : this.vertexStyle;
+            this.drawPointShape(coords[i], style, zoom);
+        }
+    }
+    /**
+     * Tentative rendering of a Polygon (lines and fill only, no vertices)
+     */
+    drawPolygonGeometry(tentative, projectionData, zoom) {
+        const rings = tentative.coordinates;
+        const outerRing = rings[0];
+        if (!outerRing || outerRing.length < 2) {
+            return;
+        }
+        // confirmedCount is the number of coordinates before closing (outerRing is a closed
+        // ring, so the first point is appended at the end)
+        const confirmedCount = tentative.confirmedCount ?? outerRing.length - 1;
+        // Fill from 3 points or more (4 points or more when closed)
+        if (outerRing.length >= 4) {
+            this.fillShaderManager.drawPolygon(outerRing, this.fillColor, projectionData, zoom);
+        }
+        // Draw solid lines between the confirmed vertices (when there are 2 or more of them)
+        if (confirmedCount >= 2) {
+            const confirmedCoords = outerRing.slice(0, confirmedCount);
+            this.sdfLineRenderer.draw(confirmedCoords, this.strokeStyle, { widthUnit: 'pixels', closed: false }, zoom, projectionData);
+        }
+        // Draw the unconfirmed lines dotted (GPU implementation)
+        // The last confirmed vertex (confirmedCount-1) -> the cursor position
+        // (confirmedCount) -> the first vertex (0)
+        if (confirmedCount >= 1 && outerRing.length > confirmedCount) {
+            // From the last confirmed vertex to the cursor position
+            const lastConfirmedToMouse = [
+                outerRing[confirmedCount - 1],
+                outerRing[confirmedCount],
+            ];
+            this.sdfLineRenderer.draw(lastConfirmedToMouse, this.tentativeStrokeStyle, { widthUnit: 'pixels', closed: false }, zoom, projectionData);
+            // The closing line from the cursor position to the first vertex
+            const mouseToFirst = [
+                outerRing[confirmedCount],
+                outerRing[0],
+            ];
+            this.sdfLineRenderer.draw(mouseToFirst, this.tentativeStrokeStyle, { widthUnit: 'pixels', closed: false }, zoom, projectionData);
+        }
+    }
+    /**
+     * Tentative rendering of the vertices of a Polygon
+     */
+    drawPolygonVertices(tentative, zoom) {
+        const rings = tentative.coordinates;
+        const outerRing = rings[0];
+        if (!outerRing || outerRing.length < 1) {
+            return;
+        }
+        // Draw the vertices (the closing point duplicates the first vertex, so it is excluded;
+        // the highlighted one has a different style)
+        const uniqueVertexCount = outerRing.length > 1 ? outerRing.length - 1 : outerRing.length;
+        const highlightedIndex = tentative.highlightedVertexIndex;
+        for (let i = 0; i < uniqueVertexCount; i++) {
+            const style = i === highlightedIndex ? this.highlightedVertexStyle : this.vertexStyle;
+            this.drawPointShape(outerRing[i], style, zoom);
+        }
+    }
+    /**
+     * Tentative rendering of a Circle (lines and fill only, no vertices)
+     */
+    drawCircleGeometry(tentative, projectionData, zoom) {
+        const center = tentative.coordinates;
+        const radiusMeters = tentative.radiusMeters ?? 0;
+        const radiusHandleAngle = tentative.radiusHandleAngle ?? 135;
+        // The circle and the radius line are drawn only when the radius is greater than 0
+        if (radiusMeters > 0) {
+            // The preview of the circle (the fill)
+            const circleCoords = generateCirclePolygon(center, radiusMeters);
+            if (circleCoords.length >= 4) {
+                this.fillShaderManager.drawPolygon(circleCoords, this.fillColor, projectionData, zoom);
+            }
+            // The stroke of the circle
+            this.sdfLineRenderer.draw(circleCoords, this.strokeStyle, { widthUnit: 'pixels', closed: true }, zoom, projectionData);
+            // Compute the position of the radius change handle (on the geodesic outline)
+            const handlePosition = destinationPoint(center, radiusMeters, radiusHandleAngle);
+            // Draw the radius line (dotted) (GPU implementation)
+            const radiusLine = [
+                center,
+                handlePosition,
+            ];
+            this.sdfLineRenderer.draw(radiusLine, this.tentativeStrokeStyle, { widthUnit: 'pixels', closed: false }, zoom, projectionData);
+        }
+    }
+    /**
+     * Tentative rendering of the vertices of a Circle
+     */
+    drawCircleVertices(tentative, zoom) {
+        const center = tentative.coordinates;
+        const radiusMeters = tentative.radiusMeters ?? 0;
+        const radiusHandleAngle = tentative.radiusHandleAngle ?? 135;
+        if (radiusMeters > 0) {
+            // Compute the position of the radius change handle (on the geodesic outline)
+            const handlePosition = destinationPoint(center, radiusMeters, radiusHandleAngle);
+            // Draw the center marker (shown below the radius change handle)
+            this.drawPointShape(center, this.circleCenterMarkerStyle, zoom);
+            // Draw the radius change handle (shown above the center marker)
+            this.drawPointShape(handlePosition, this.circleRadiusHandleStyle, zoom);
+        }
+        else {
+            // When the radius is 0, only the radius change handle is shown at the center position
+            this.drawPointShape(center, this.circleCenterMarkerStyle, zoom);
+            this.drawPointShape(center, this.circleRadiusHandleStyle, zoom);
+        }
+    }
+    /**
+     * Tentative rendering of a Freehand (lines only)
+     *
+     * Freehand does not draw vertices, so geometry and tentative are the same
+     */
+    drawFreehandGeometry(tentative, projectionData, zoom) {
+        const coords = tentative.coordinates;
+        if (coords.length < 2) {
+            return;
+        }
+        // Draw the line
+        this.sdfLineRenderer.draw(coords, this.strokeStyle, { widthUnit: 'pixels', closed: false }, zoom, projectionData);
+    }
+    /**
+     * Release the resources
+     */
+    dispose() {
+        this.fillShaderManager.dispose();
+    }
+}

package/dist/view/viewport.d.ts

@@ -0,0 +1,119 @@
+/**
+ * ViewportFilter
+ *
+ * Filters down to only the features inside the viewport.
+ * It uses an expanded viewport and the SpatialIndex as a performance optimization.
+ */
+import type { Map as MapLibreMap } from 'maplibre-gl';
+import type { SpatialIndex } from '../store/spatial/spatial-index.js';
+import type { BoundingBox } from '../store/types.js';
+/**
+ * The factor by which the render loop widens the viewport for rendering and culling: 2.
+ *
+ * To prevent flicker while panning and zooming, rendering and culling use the range
+ * obtained by widening the real viewport by this factor.
+ */
+export declare const DEFAULT_VIEWPORT_EXPANSION_FACTOR = 2;
+/**
+ * Dependencies of ViewportFilter
+ */
+export interface ViewportFilterDeps {
+    map: MapLibreMap;
+    spatialIndex: SpatialIndex;
+}
+export { nearestLongitude, wrapLongitude } from '../shared/math/longitude.js';
+/**
+ * One copy of the world that a view covers
+ *
+ * `lngShift` is how far the stored longitudes are moved to be drawn there (0 for the stored
+ * copy, 360 for the copy east of the antimeridian, -360 for the copy west of it), and
+ * `minX` / `maxX` is the view seen from that copy, in stored longitudes.
+ */
+export interface LongitudeCopy {
+    readonly lngShift: number;
+    readonly minX: number;
+    readonly maxX: number;
+}
+/**
+ * Splits an unwrapped longitude range into the copies of the world it covers
+ *
+ * The features are stored with longitudes in [-180, 180], while the view of the map is a
+ * continuous range that can run past the antimeridian (170 to 190, for example). Such a view
+ * covers two copies: the stored copy, and the copy moved by 360 degrees, which shows the
+ * stored longitudes -190 to -170 (that is, -180 to -170). Each copy is the whole view moved
+ * back by its shift, so a longitude falls in the view of at most one copy (the view is less
+ * than 360 degrees wide) and nothing is drawn twice; a longitude stored beyond ±180 is still
+ * found on the copy that shows it. A range 360 degrees wide or more is the regime of world
+ * copies, which are not replicated: it gives the stored copy, whole.
+ *
+ * @param west The west edge (unwrapped)
+ * @param east The east edge (unwrapped, at least west)
+ * @returns One or two copies, from the westmost shift
+ */
+export declare function splitLongitudeCopies(west: number, east: number): LongitudeCopy[];
+/**
+ * Splits an unwrapped longitude range into the ranges of stored longitudes it shows
+ *
+ * The ranges of `splitLongitudeCopies`, without the shift: the narrowing down by the
+ * spatial index queries each of them.
+ *
+ * @param west The west edge (unwrapped)
+ * @param east The east edge (unwrapped, at least west)
+ * @returns One or two ranges `[west, east]` (west <= east)
+ */
+export declare function splitLongitudeRange(west: number, east: number): Array<[number, number]>;
+/**
+ * The part of the view on one copy of the world (see `splitLongitudeCopies`)
+ */
+export interface ViewportCopy {
+    /** How far the stored longitudes are moved to be drawn on this copy */
+    readonly lngShift: number;
+    /** The part of the view on this copy, in stored longitudes */
+    readonly bounds: BoundingBox;
+}
+/**
+ * Computes the copies of the world the current viewport covers, expanded
+ *
+ * Away from the antimeridian this is the stored copy alone. A view across it gives two:
+ * the rendering draws the features of each copy with that copy's shift. When the expanded
+ * view is 360 degrees wide or more, the longitudes of the view itself are used; when those are
+ * still too wide, it is the regime of world copies and the stored copy is drawn alone.
+ *
+ * The latitudes keep the expansion in every case. On the globe the whole sphere is often in
+ * view, so the longitudes span 360 degrees, and the bounds maplibre reports fall short of the
+ * edge of the sphere by a degree or two: without the margin the points between the bounds and
+ * the edge were culled and vanished, while a line reaching there was kept by the rest of its
+ * box.
+ *
+ * @param map The MapLibre Map
+ * @param expansionFactor The expansion factor
+ */
+export declare function getViewportCopies(map: MapLibreMap, expansionFactor: number): ViewportCopy[];
+/**
+ * Computes the ranges of the current viewport, expanded (one, or two across the antimeridian)
+ *
+ * The narrowing down by the spatial index queries every range, so the features on both sides
+ * of the antimeridian are found.
+ *
+ * @param map The MapLibre Map
+ * @param expansionFactor The expansion factor
+ */
+export declare function getExpandedViewportRanges(map: MapLibreMap, expansionFactor: number): BoundingBox[];
+/**
+ * Returns the current viewport of a map widened by a factor, as one range in degrees.
+ *
+ * This gathers the way the render loop obtains the viewport into one place, so that
+ * the narrowing down of features (ViewportFilter) and the culling of
+ * datasets look at the same range.
+ *
+ * A single bbox cannot hold the two ranges of a view across the antimeridian, so it
+ * covers every longitude in that case (the thinning keeps everything in the latitude
+ * band; nothing on either side of the line is dropped). `getExpandedViewportRanges`
+ * gives the exact ranges.
+ *
+ * @param map The MapLibre Map
+ * @param expansionFactor The factor applied to the width and height of the viewport (1 = the
+ *   viewport itself)
+ * @returns The range in degrees (`minX` / `maxX` longitudes, `minY` / `maxY` latitudes)
+ */
+export declare function getExpandedViewportBounds(map: MapLibreMap, expansionFactor: number): BoundingBox;

package/dist/view/viewport.js

@@ -0,0 +1,254 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { LngLatBounds as LngLatBoundsClass } from 'maplibre-gl';
+/**
+ * The factor by which the render loop widens the viewport for rendering and culling: 2.
+ *
+ * To prevent flicker while panning and zooming, rendering and culling use the range
+ * obtained by widening the real viewport by this factor.
+ */
+export const DEFAULT_VIEWPORT_EXPANSION_FACTOR = 2.0;
+/**
+ * Expands LngLatBounds by the given factor
+ *
+ * To prevent flicker while panning and zooming, the viewport is expanded so that
+ * off-screen features are included in the render set in advance.
+ *
+ * Only the latitude is clamped (to -90..90). The longitude keeps the unwrapped values
+ * that maplibre returns: a view across the antimeridian has an east edge above 180 (or a
+ * west edge below -180), and clamping it would cut the other side of the line off.
+ * `splitLongitudeRange` turns the result into ranges of [-180, 180].
+ *
+ * @param bounds The original bounding box
+ * @param factor The expansion factor (2.0 = expand to twice the size)
+ * @returns The expanded bounding box
+ *
+ * @internal
+ */
+export function expandBounds(bounds, factor) {
+    const sw = bounds.getSouthWest();
+    const ne = bounds.getNorthEast();
+    const width = ne.lng - sw.lng;
+    const height = ne.lat - sw.lat;
+    const widthPadding = (width * (factor - 1)) / 2;
+    const heightPadding = (height * (factor - 1)) / 2;
+    const clampLat = (lat) => Math.max(-90, Math.min(90, lat));
+    return new LngLatBoundsClass([sw.lng - widthPadding, clampLat(sw.lat - heightPadding)], [ne.lng + widthPadding, clampLat(ne.lat + heightPadding)]);
+}
+// The longitude helpers are pure math, defined in shared/ (dispatcher/ and snapping/ use
+// them too); re-exported here for the existing imports
+export { nearestLongitude, wrapLongitude } from '../shared/math/longitude.js';
+/**
+ * Splits an unwrapped longitude range into the copies of the world it covers
+ *
+ * The features are stored with longitudes in [-180, 180], while the view of the map is a
+ * continuous range that can run past the antimeridian (170 to 190, for example). Such a view
+ * covers two copies: the stored copy, and the copy moved by 360 degrees, which shows the
+ * stored longitudes -190 to -170 (that is, -180 to -170). Each copy is the whole view moved
+ * back by its shift, so a longitude falls in the view of at most one copy (the view is less
+ * than 360 degrees wide) and nothing is drawn twice; a longitude stored beyond ±180 is still
+ * found on the copy that shows it. A range 360 degrees wide or more is the regime of world
+ * copies, which are not replicated: it gives the stored copy, whole.
+ *
+ * @param west The west edge (unwrapped)
+ * @param east The east edge (unwrapped, at least west)
+ * @returns One or two copies, from the westmost shift
+ */
+export function splitLongitudeCopies(west, east) {
+    if (!(east - west < 360))
+        return [{ lngShift: 0, minX: -180, maxX: 180 }];
+    const copies = [];
+    const first = Math.ceil((west - 180) / 360);
+    const last = Math.floor((east + 180) / 360);
+    for (let turn = first; turn <= last; turn++) {
+        // (+ 0 turns the -0 of Math.ceil into 0)
+        const shift = turn * 360 + 0;
+        const minX = west - shift;
+        const maxX = east - shift;
+        // A copy whose view only touches the stored range at its edge adds nothing
+        if (Math.min(maxX, 180) > Math.max(minX, -180) || (copies.length === 0 && turn === last)) {
+            copies.push({ lngShift: shift, minX, maxX });
+        }
+    }
+    return copies;
+}
+/**
+ * Splits an unwrapped longitude range into the ranges of stored longitudes it shows
+ *
+ * The ranges of `splitLongitudeCopies`, without the shift: the narrowing down by the
+ * spatial index queries each of them.
+ *
+ * @param west The west edge (unwrapped)
+ * @param east The east edge (unwrapped, at least west)
+ * @returns One or two ranges `[west, east]` (west <= east)
+ */
+export function splitLongitudeRange(west, east) {
+    return splitLongitudeCopies(west, east).map((copy) => [copy.minX, copy.maxX]);
+}
+/**
+ * Computes the copies of the world the current viewport covers, expanded
+ *
+ * Away from the antimeridian this is the stored copy alone. A view across it gives two:
+ * the rendering draws the features of each copy with that copy's shift. When the expanded
+ * view is 360 degrees wide or more, the longitudes of the view itself are used; when those are
+ * still too wide, it is the regime of world copies and the stored copy is drawn alone.
+ *
+ * The latitudes keep the expansion in every case. On the globe the whole sphere is often in
+ * view, so the longitudes span 360 degrees, and the bounds maplibre reports fall short of the
+ * edge of the sphere by a degree or two: without the margin the points between the bounds and
+ * the edge were culled and vanished, while a line reaching there was kept by the rest of its
+ * box.
+ *
+ * @param map The MapLibre Map
+ * @param expansionFactor The expansion factor
+ */
+export function getViewportCopies(map, expansionFactor) {
+    const view = map.getBounds();
+    const expanded = expandBounds(view, expansionFactor);
+    const tooWide = !(expanded.getEast() - expanded.getWest() < 360);
+    const west = tooWide ? view.getWest() : expanded.getWest();
+    const east = tooWide ? view.getEast() : expanded.getEast();
+    const minY = expanded.getSouth();
+    const maxY = expanded.getNorth();
+    return splitLongitudeCopies(west, east).map((copy) => ({
+        lngShift: copy.lngShift,
+        bounds: { minX: copy.minX, minY, maxX: copy.maxX, maxY },
+    }));
+}
+/**
+ * Computes the ranges of the current viewport, expanded (one, or two across the antimeridian)
+ *
+ * The narrowing down by the spatial index queries every range, so the features on both sides
+ * of the antimeridian are found.
+ *
+ * @param map The MapLibre Map
+ * @param expansionFactor The expansion factor
+ */
+export function getExpandedViewportRanges(map, expansionFactor) {
+    return getViewportCopies(map, expansionFactor).map((copy) => copy.bounds);
+}
+/**
+ * Returns the current viewport of a map widened by a factor, as one range in degrees.
+ *
+ * This gathers the way the render loop obtains the viewport into one place, so that
+ * the narrowing down of features (ViewportFilter) and the culling of
+ * datasets look at the same range.
+ *
+ * A single bbox cannot hold the two ranges of a view across the antimeridian, so it
+ * covers every longitude in that case (the thinning keeps everything in the latitude
+ * band; nothing on either side of the line is dropped). `getExpandedViewportRanges`
+ * gives the exact ranges.
+ *
+ * @param map The MapLibre Map
+ * @param expansionFactor The factor applied to the width and height of the viewport (1 = the
+ *   viewport itself)
+ * @returns The range in degrees (`minX` / `maxX` longitudes, `minY` / `maxY` latitudes)
+ */
+export function getExpandedViewportBounds(map, expansionFactor) {
+    return hullOf(getExpandedViewportRanges(map, expansionFactor));
+}
+/** The bbox of one or two ranges (two ranges together cover every stored longitude) */
+function hullOf(ranges) {
+    if (ranges.length === 1)
+        return ranges[0];
+    let minX = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    for (const range of ranges) {
+        minX = Math.min(minX, range.minX);
+        maxX = Math.max(maxX, range.maxX);
+    }
+    return { minX, minY: ranges[0].minY, maxX, maxY: ranges[0].maxY };
+}
+/**
+ * ViewportFilter
+ *
+ * The class that filters features down to those inside the viewport.
+ *
+ * @internal
+ */
+export class ViewportFilter {
+    /**
+     * @param deps The dependencies
+     * @param expansionFactor The viewport expansion factor (default: 2.0)
+     */
+    constructor(deps, expansionFactor = DEFAULT_VIEWPORT_EXPANSION_FACTOR) {
+        Object.defineProperty(this, "map", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "spatialIndex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "expansionFactor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.map = deps.map;
+        this.spatialIndex = deps.spatialIndex;
+        this.expansionFactor = expansionFactor;
+    }
+    /**
+     * Gets the Set of feature IDs that exist inside the current viewport
+     *
+     * @returns The Set of feature IDs inside the viewport
+     */
+    getVisibleIds() {
+        // Across the antimeridian the view is two ranges, and each is queried
+        const ids = new Set();
+        for (const range of getExpandedViewportRanges(this.map, this.expansionFactor)) {
+            for (const id of this.spatialIndex.findInBounds(range))
+                ids.add(id);
+        }
+        return ids;
+    }
+    /**
+     * Gets the copies of the world the current expanded viewport covers
+     *
+     * One copy (the stored one) away from the antimeridian, two across it
+     * (see getViewportCopies).
+     */
+    getCopies() {
+        return getViewportCopies(this.map, this.expansionFactor);
+    }
+    /**
+     * Gets the Set of feature IDs inside a range of stored longitudes (one copy of the view)
+     */
+    getVisibleIdsIn(bounds) {
+        return new Set(this.spatialIndex.findInBounds(bounds));
+    }
+    /**
+     * Gets the bbox of the current expanded viewport
+     *
+     * Across the antimeridian it covers every longitude (see getExpandedViewportBounds).
+     */
+    getBounds() {
+        return getExpandedViewportBounds(this.map, this.expansionFactor);
+    }
+    /**
+     * Filters an array of features down to those inside the viewport
+     *
+     * The filtering preserves the draw order.
+     *
+     * @param features The array of features to filter
+     * @returns The array of features inside the viewport
+     */
+    filter(features) {
+        const visibleIds = this.getVisibleIds();
+        return features.filter((f) => visibleIds.has(f.id));
+    }
+}
+/**
+ * Creates a ViewportFilter
+ *
+ * @internal
+ */
+export function createViewportFilter(deps, expansionFactor) {
+    return new ViewportFilter(deps, expansionFactor);
+}