@versatiles/png-renderer 2.4.0 → 2.4.1

package/dist/index.d.ts

@@ -2741,6 +2741,12 @@ declare class Feature implements Feature$1 {
      * clipped edges along the tile border are not part of the outline.
      */
     readonly outline?: Geometry;
+    /**
+     * The polygon as an opaque fill draws it — when it differs from the polygon's rings, i.e.
+     * when the polygon was clipped to its tile: clipped a little beyond the tile instead, so
+     * that it overlaps its continuation in the next tile, and no seam shows between them.
+     */
+    readonly fillGeometry?: Geometry;
     /**
      * For each line of the geometry, how far along the line in its tile it starts, in pixels
      * — where the line was clipped to its tile, which cut off its start. A dash pattern
@@ -2754,6 +2760,7 @@ declare class Feature implements Feature$1 {
         patterns?: Patterns;
         geometry: Geometry;
         outline?: Geometry;
+        fillGeometry?: Geometry;
         lineStarts?: number[];
     });
     getBbox(): Bbox;

package/dist/index.js

@@ -119,6 +119,12 @@ class Feature {
      * clipped edges along the tile border are not part of the outline.
      */
     outline;
+    /**
+     * The polygon as an opaque fill draws it — when it differs from the polygon's rings, i.e.
+     * when the polygon was clipped to its tile: clipped a little beyond the tile instead, so
+     * that it overlaps its continuation in the next tile, and no seam shows between them.
+     */
+    fillGeometry;
     /**
      * For each line of the geometry, how far along the line in its tile it starts, in pixels
      * — where the line was clipped to its tile, which cut off its start. A dash pattern
@@ -133,6 +139,7 @@ class Feature {
         this.patterns = opt.patterns;
         this.geometry = opt.geometry;
         this.outline = opt.outline;
+        this.fillGeometry = opt.fillGeometry;
         this.lineStarts = opt.lineStarts;
     }
     getBbox() {
@@ -2090,20 +2097,28 @@ function readUtf8$1(buf, pos, end) {
  */
 /** Whether any point lies outside of the square [min, max]². */
 function exceedsSquare(rings, min, max) {
-    return rings.some((ring) => ring.some(({ x, y }) => x < min || x > max || y < min || y > max));
+    return exceedsBox(rings, [min, min, max, max]);
+}
+/** Whether any point lies outside of the box. */
+function exceedsBox(rings, [minX, minY, maxX, maxY]) {
+    return rings.some((ring) => ring.some(({ x, y }) => x < minX || x > maxX || y < minY || y > maxY));
 }
 /**
  * Clips the rings of a polygon to the square [min, max]² (Sutherland–Hodgman). Rings that
  * vanish are dropped.
  */
 function clipPolygon(rings, min, max) {
+    return clipPolygonToBox(rings, [min, min, max, max]);
+}
+/** Clips the rings of a polygon to the box, like `clipPolygon`. */
+function clipPolygonToBox(rings, [minX, minY, maxX, maxY]) {
     const result = [];
     for (const ring of rings) {
         let points = ring;
-        points = clipAgainst(points, (p) => p.x >= min, (a, b) => lerpAtX(a, b, min));
-        points = clipAgainst(points, (p) => p.x <= max, (a, b) => lerpAtX(a, b, max));
-        points = clipAgainst(points, (p) => p.y >= min, (a, b) => lerpAtY(a, b, min));
-        points = clipAgainst(points, (p) => p.y <= max, (a, b) => lerpAtY(a, b, max));
+        points = clipAgainst(points, (p) => p.x >= minX, (a, b) => lerpAtX(a, b, minX));
+        points = clipAgainst(points, (p) => p.x <= maxX, (a, b) => lerpAtX(a, b, maxX));
+        points = clipAgainst(points, (p) => p.y >= minY, (a, b) => lerpAtY(a, b, minY));
+        points = clipAgainst(points, (p) => p.y <= maxY, (a, b) => lerpAtY(a, b, maxY));
         if (points.length >= 3)
             result.push(points);
     }
@@ -7276,7 +7291,7 @@ function decodeVectorTile(buffer, encoding) {
     return new VectorTile(new PbfReader(buffer)).layers;
 }
 /** Adds the features of one vector tile's layers, projected to the screen. */
-function addTileFeatures(layers, { project, clipToTile, pixelsPerUnit }, layerFeatures, width, height) {
+function addTileFeatures(layers, { project, clipToTile, pixelsPerUnit, fillBox }, layerFeatures, width, height) {
     for (const [name, layer] of Object.entries(layers)) {
         // Geometry is in units of the layer's extent, which MapLibre scales to its own.
         const scale = layer.extent > 0 ? TILE_EXTENT / layer.extent : 1;
@@ -7309,12 +7324,16 @@ function addTileFeatures(layers, { project, clipToTile, pixelsPerUnit }, layerFe
             if (scale !== 1)
                 rings = rings.map((ring) => ring.map((p) => ({ x: p.x * scale, y: p.y * scale })));
             let outline;
+            let fillGeometry;
             let lineStarts;
             // Clip polygons and lines to the tile, like MapLibre's stencil clipping: otherwise
             // the parts in the tile buffer are drawn twice, which shows when translucent.
             if (clipToTile && type !== 'Point' && exceedsSquare(rings, 0, TILE_EXTENT)) {
                 if (type === 'Polygon') {
                     outline = project('LineString', clipPolygonOutline(rings, 0, TILE_EXTENT));
+                    if (fillBox) {
+                        fillGeometry = project('Polygon', exceedsBox(rings, fillBox) ? clipPolygonToBox(rings, fillBox) : rings);
+                    }
                     rings = clipPolygon(rings, 0, TILE_EXTENT);
                 }
                 else {
@@ -7346,6 +7365,7 @@ function addTileFeatures(layers, { project, clipToTile, pixelsPerUnit }, layerFe
                     type,
                     geometry,
                     outline,
+                    fillGeometry,
                     lineStarts,
                     id: featureSrc.id,
                     properties: featureSrc.properties,
@@ -7396,19 +7416,59 @@ function getTileProjections(source, job) {
     return tiles.map(({ x, y, offsetX, offsetY }) => {
         const offset = new Point2D(offsetX + (width - covered.width) / 2, offsetY + (height - covered.height) / 2);
         const scale = tileSize / TILE_EXTENT;
+        const project = (_type, rings) => rings.map((ring) => ring.map((point) => {
+            const p = new Point2D(point.x, point.y).scale(scale).translate(offset);
+            return moved ? moved.fromNorthUp(p.x, p.y) : p;
+        }));
         return {
             x,
             y,
             z: zoomLevel,
             clipToTile: true,
             pixelsPerUnit: scale,
-            project: (_type, rings) => rings.map((ring) => ring.map((point) => {
-                const p = new Point2D(point.x, point.y).scale(scale).translate(offset);
-                return moved ? moved.fromNorthUp(p.x, p.y) : p;
-            })),
+            fillBox: pixelAlignedBox(project),
+            project,
         };
     });
 }
+/**
+ * The tile, widened to whole pixels on the screen, in tile units, or undefined where that is
+ * the tile itself, or where the tile is turned on the screen.
+ *
+ * Opaque fills are clipped to this box instead of the tile. Where a polygon goes on in the
+ * next tile, a fill clipped to the tile ends within a pixel: it covers part of the pixel,
+ * and so does every other fill ending there, e.g. a land polygon over a sea polygon, both
+ * covering the whole tile. Each is antialiased, so what is below shows through a little, and
+ * the tile border shows as a faint line. MapLibre fills the inside of a polygon without
+ * antialiasing, so it shows none. Ending on a pixel border, a fill covers each pixel entirely
+ * or not at all; the next tile, drawn later, covers the pixels the two tiles share.
+ */
+function pixelAlignedBox(project) {
+    const [corners] = project('LineString', [
+        [
+            { x: 0, y: 0 },
+            { x: TILE_EXTENT, y: 0 },
+            { x: 0, y: TILE_EXTENT },
+        ],
+    ]);
+    const [origin, right, down] = corners;
+    // The tile's x axis must be the screen's, and its y axis the screen's.
+    const epsilon = 1e-6;
+    if (Math.abs(right.y - origin.y) > epsilon || Math.abs(down.x - origin.x) > epsilon) {
+        return undefined;
+    }
+    const toTile = (screen, start, end) => ((screen - start) / (end - start)) * TILE_EXTENT;
+    const widen = (start, end) => {
+        const a = toTile(Math.floor(Math.min(start, end)), start, end);
+        const b = toTile(Math.ceil(Math.max(start, end)), start, end);
+        return [Math.min(a, b), Math.max(a, b)];
+    };
+    const [minX, maxX] = widen(origin.x, right.x);
+    const [minY, maxY] = widen(origin.y, down.y);
+    if (minX === 0 && minY === 0 && maxX === TILE_EXTENT && maxY === TILE_EXTENT)
+        return undefined;
+    return [minX, minY, maxX, maxY];
+}
 
 //#region src/reference/v8.json
 var v8_default = {
@@ -20274,7 +20334,13 @@ class SVGRenderer {
                     currentFillKey = translucent ? undefined : key;
                 }
                 const group = fillGroups[fillGroups.length - 1];
-                for (const ring of rings)
+                // An opaque color fills a polygon clipped to its tile a little beyond the tile, so
+                // that it overlaps its continuation in the next tile without a seam. What is drawn
+                // twice there must not show: not with a translucent fill, nor with a pattern.
+                const fillRings = feature.fillGeometry && !translucent && !patternPaint
+                    ? feature.fillGeometry.map((ring) => ring.map((p) => roundXY(p.x, p.y)))
+                    : rings;
+                for (const ring of fillRings)
                     group.segments.push(ring);
             }
             // fill-antialias outline, in fill-outline-color or else the fill color. For an
@@ -21711,9 +21777,13 @@ class CanvasRenderer {
                 });
             }
             else if (color.alpha > 0) {
+                // An opaque color fills a polygon clipped to its tile a little beyond the tile, so
+                // that it overlaps its continuation in the next tile without a seam. What is drawn
+                // twice there must not show: not with a translucent fill, nor with a pattern.
+                const geometry = (translucent ? undefined : feature.fillGeometry) ?? feature.geometry;
                 this.#paint(this.ctx, style.translate, style.opacity, (ctx) => {
                     ctx.fillStyle = color.hex;
-                    this.#trace(ctx, toSegments(feature.geometry), true);
+                    this.#trace(ctx, toSegments(geometry), true);
                     ctx.fill();
                 });
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versatiles/png-renderer",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Renders MapLibre styles as PNG (and SVG) in Node.js.",
   "keywords": [
     "png",