@versatiles/svg-renderer 0.5.2 → 0.6.0

package/README.md

@@ -135,7 +135,7 @@ subgraph 0["src"]
 2["index.ts"]
 subgraph 3["pipeline"]
 4["render.ts"]
-D["style_layer.ts"]
+E["style_layer.ts"]
 end
 subgraph 5["sources"]
 6["index.ts"]
@@ -143,43 +143,46 @@ subgraph 5["sources"]
 9["merge.ts"]
 A["raster.ts"]
 B["tiles.ts"]
-C["vector.ts"]
+C["sprite.ts"]
+D["vector.ts"]
 end
 8["geometry.ts"]
-subgraph E["renderer"]
-F["svg.ts"]
-G["color.ts"]
-H["svg_path.ts"]
-M["types.ts"]
+subgraph F["renderer"]
+G["svg.ts"]
+H["color.ts"]
+I["svg_path.ts"]
+N["types.ts"]
 end
-subgraph I["maplibre"]
-J["control.ts"]
-K["panel_css.ts"]
-L["index.ts"]
+subgraph J["maplibre"]
+K["control.ts"]
+L["panel_css.ts"]
+M["index.ts"]
 end
 end
 1-->2
 2-->4
-2-->F
+2-->G
 4-->6
-4-->D
+4-->C
+4-->E
 6-->7
 6-->9
 6-->A
 6-->C
+6-->D
 7-->8
 9-->8
 A-->B
 B-->8
-C-->8
-C-->B
-F-->G
-F-->H
-J-->2
-J-->K
-L-->2
-L-->J
-
-class 0,3,5,E,I subgraphs;
+D-->8
+D-->B
+G-->H
+G-->I
+K-->2
+K-->L
+M-->2
+M-->K
+
+class 0,3,5,F,J subgraphs;
 classDef subgraphs fill-opacity:0.1, fill:#888, color:#888, stroke:#888;
 ```

package/dist/index.cjs

@@ -2828,6 +2828,23 @@ var paint_raster = {
 		},
 		"property-type": "data-constant"
 	},
+	resampling: {
+		type: "enum",
+		values: {
+			linear: {
+			},
+			nearest: {
+			}
+		},
+		"default": "linear",
+		expression: {
+			interpolated: false,
+			parameters: [
+				"zoom"
+			]
+		},
+		"property-type": "data-constant"
+	},
 	"raster-resampling": {
 		type: "enum",
 		values: {
@@ -2978,6 +2995,23 @@ var paint_hillshade = {
 			]
 		},
 		"property-type": "data-constant"
+	},
+	resampling: {
+		type: "enum",
+		values: {
+			linear: {
+			},
+			nearest: {
+			}
+		},
+		"default": "linear",
+		expression: {
+			interpolated: false,
+			parameters: [
+				"zoom"
+			]
+		},
+		"property-type": "data-constant"
 	}
 };
 var paint_background = {
@@ -3398,6 +3432,23 @@ var v8Spec = {
 			]
 		},
 		"property-type": "color-ramp"
+	},
+	resampling: {
+		type: "enum",
+		values: {
+			linear: {
+			},
+			nearest: {
+			}
+		},
+		"default": "linear",
+		expression: {
+			interpolated: false,
+			parameters: [
+				"zoom"
+			]
+		},
+		"property-type": "data-constant"
 	}
 },
 	paint_background: paint_background,
@@ -6242,11 +6293,12 @@ class CollatorExpression {
 }
 
 class NumberFormat {
-    constructor(number, locale, currency, minFractionDigits, maxFractionDigits) {
+    constructor(number, locale, currency, unit, minFractionDigits, maxFractionDigits) {
         this.type = StringType;
         this.number = number;
         this.locale = locale;
         this.currency = currency;
+        this.unit = unit;
         this.minFractionDigits = minFractionDigits;
         this.maxFractionDigits = maxFractionDigits;
     }
@@ -6271,6 +6323,15 @@ class NumberFormat {
             if (!currency)
                 return null;
         }
+        let unit = null;
+        if (options['unit']) {
+            unit = context.parse(options['unit'], 1, StringType);
+            if (!unit)
+                return null;
+        }
+        if (currency && unit) {
+            return context.error('NumberFormat options `currency` and `unit` are mutually exclusive');
+        }
         let minFractionDigits = null;
         if (options['min-fraction-digits']) {
             minFractionDigits = context.parse(options['min-fraction-digits'], 1, NumberType);
@@ -6283,12 +6344,13 @@ class NumberFormat {
             if (!maxFractionDigits)
                 return null;
         }
-        return new NumberFormat(number, locale, currency, minFractionDigits, maxFractionDigits);
+        return new NumberFormat(number, locale, currency, unit, minFractionDigits, maxFractionDigits);
     }
     evaluate(ctx) {
         return new Intl.NumberFormat(this.locale ? this.locale.evaluate(ctx) : [], {
-            style: this.currency ? 'currency' : 'decimal',
+            style: this.currency ? 'currency' : this.unit ? 'unit' : 'decimal',
             currency: this.currency ? this.currency.evaluate(ctx) : undefined,
+            unit: this.unit ? this.unit.evaluate(ctx) : undefined,
             minimumFractionDigits: this.minFractionDigits
                 ? this.minFractionDigits.evaluate(ctx)
                 : undefined,
@@ -6305,6 +6367,9 @@ class NumberFormat {
         if (this.currency) {
             fn(this.currency);
         }
+        if (this.unit) {
+            fn(this.unit);
+        }
         if (this.minFractionDigits) {
             fn(this.minFractionDigits);
         }
@@ -8043,6 +8108,16 @@ CompoundExpression.register(expressions$1, {
         varargs(ValueType),
         (ctx, args) => args.map((arg) => valueToString(arg.evaluate(ctx))).join('')
     ],
+    split: [
+        array(StringType),
+        [StringType, StringType],
+        (ctx, [s, delim]) => s.evaluate(ctx).split(delim.evaluate(ctx))
+    ],
+    join: [
+        StringType,
+        [array(StringType), StringType],
+        (ctx, [arr, delim]) => arr.value.join(delim.evaluate(ctx))
+    ],
     'resolved-locale': [
         StringType,
         [CollatorType],
@@ -9199,7 +9274,7 @@ class SVGRenderer {
         color.alpha *= style.opacity;
         this.#backgroundColor = color;
     }
-    drawPolygons(features) {
+    drawPolygons(id, features) {
         if (features.length === 0)
             return;
         const groups = new Map();
@@ -9223,12 +9298,14 @@ class SVGRenderer {
                 group.segments.push(ring.map((p) => roundXY(p.x, p.y)));
             });
         });
+        this.#svg.push(`<g id="${escapeXml(id)}">`);
         for (const { segments, attrs } of groups.values()) {
             const d = segmentsToPath(segments, true);
             this.#svg.push(`<path d="${d}" ${attrs} />`);
         }
+        this.#svg.push('</g>');
     }
-    drawLineStrings(features) {
+    drawLineStrings(id, features) {
         if (features.length === 0)
             return;
         const groups = new Map();
@@ -9277,13 +9354,15 @@ class SVGRenderer {
                 group.segments.push(line.map((p) => roundXY(p.x, p.y)));
             });
         });
+        this.#svg.push(`<g id="${escapeXml(id)}">`);
         for (const { segments, attrs } of groups.values()) {
             const chains = chainSegments(segments);
             const d = segmentsToPath(chains);
             this.#svg.push(`<path d="${d}" ${attrs} />`);
         }
+        this.#svg.push('</g>');
     }
-    drawCircles(features) {
+    drawCircles(id, features) {
         if (features.length === 0)
             return;
         const groups = new Map();
@@ -9315,13 +9394,108 @@ class SVGRenderer {
                     group.points.push(roundXY(p.x, p.y));
             });
         });
+        this.#svg.push(`<g id="${escapeXml(id)}">`);
         for (const { points, attrs } of groups.values()) {
             for (const [x, y] of points) {
                 this.#svg.push(`<circle cx="${formatNum(x)}" cy="${formatNum(y)}" ${attrs} />`);
             }
         }
+        this.#svg.push('</g>');
+    }
+    drawLabels(id, features) {
+        if (features.length === 0)
+            return;
+        this.#svg.push(`<g id="${escapeXml(id)}">`);
+        for (const [feature, style] of features) {
+            if (style.opacity <= 0 || !style.text)
+                continue;
+            const color = new Color(style.color);
+            if (color.alpha <= 0)
+                continue;
+            const ring = feature.geometry[0];
+            if (!ring || ring.length === 0)
+                continue;
+            const point = ring[Math.floor(ring.length / 2)];
+            const [px, py] = roundXY(point.x, point.y);
+            const fontSize = formatScaled(style.size);
+            const fontFamily = style.font.join(', ') + ', Helvetica, Arial, sans-serif';
+            const [svgAnchor, baseline] = mapTextAnchor(style.anchor);
+            const offsetX = style.offset[0] * style.size;
+            const offsetY = style.offset[1] * style.size;
+            const [dx, dy] = roundXY(offsetX, offsetY);
+            const attrs = [
+                `x="${formatNum(px)}"`,
+                `y="${formatNum(py)}"`,
+                `font-family="${escapeXml(fontFamily)}"`,
+                `font-size="${fontSize}"`,
+                `text-anchor="${svgAnchor}"`,
+                `dominant-baseline="${baseline}"`,
+            ];
+            if (dx !== 0)
+                attrs.push(`dx="${formatNum(dx)}"`);
+            if (dy !== 0)
+                attrs.push(`dy="${formatNum(dy)}"`);
+            if (style.rotate !== 0) {
+                attrs.push(`transform="rotate(${String(style.rotate)},${formatNum(px)},${formatNum(py)})"`);
+            }
+            const haloColor = new Color(style.haloColor);
+            if (style.haloWidth > 0 && haloColor.alpha > 0) {
+                const haloWidth = formatScaled(style.haloWidth);
+                attrs.push('paint-order="stroke fill"', `stroke="${haloColor.rgb}"`, `stroke-width="${haloWidth}"`, 'stroke-linejoin="round"');
+                if (haloColor.alpha < 255)
+                    attrs.push(`stroke-opacity="${haloColor.opacity.toFixed(3)}"`);
+            }
+            attrs.push(fillAttr(color));
+            if (style.opacity < 1)
+                attrs.push(`opacity="${style.opacity.toFixed(3)}"`);
+            this.#svg.push(`<text ${attrs.join(' ')}>${escapeXml(style.text)}</text>`);
+        }
+        this.#svg.push('</g>');
+    }
+    drawIcons(id, features, spriteAtlas) {
+        if (features.length === 0)
+            return;
+        this.#svg.push(`<g id="${escapeXml(id)}">`);
+        for (const [feature, style] of features) {
+            if (style.opacity <= 0)
+                continue;
+            const sprite = spriteAtlas.get(style.image);
+            if (!sprite)
+                continue;
+            const ring = feature.geometry[0];
+            if (!ring || ring.length === 0)
+                continue;
+            const point = ring[Math.floor(ring.length / 2)];
+            const scale = style.size / sprite.pixelRatio;
+            const iconW = sprite.width * scale;
+            const iconH = sprite.height * scale;
+            const [anchorDx, anchorDy] = mapIconAnchor(style.anchor, iconW, iconH);
+            const ox = style.offset[0] * style.size + anchorDx;
+            const oy = style.offset[1] * style.size + anchorDy;
+            const x = point.x + ox;
+            const y = point.y + oy;
+            const [sx, sy] = roundXY(x, y);
+            const [sw, sh] = roundXY(iconW, iconH);
+            const viewBox = `${String(sprite.x)} ${String(sprite.y)} ${String(sprite.width)} ${String(sprite.height)}`;
+            const attrs = [
+                `x="${formatNum(sx)}"`,
+                `y="${formatNum(sy)}"`,
+                `width="${formatNum(sw)}"`,
+                `height="${formatNum(sh)}"`,
+            ];
+            if (style.opacity < 1)
+                attrs.push(`opacity="${style.opacity.toFixed(3)}"`);
+            if (style.rotate !== 0) {
+                const [cx, cy] = roundXY(point.x + style.offset[0] * style.size, point.y + style.offset[1] * style.size);
+                attrs.push(`transform="rotate(${String(style.rotate)},${formatNum(cx)},${formatNum(cy)})"`);
+            }
+            this.#svg.push(`<svg ${attrs.join(' ')} viewBox="${viewBox}" xmlns="http://www.w3.org/2000/svg">` +
+                `<image width="${String(sprite.sheetWidth)}" height="${String(sprite.sheetHeight)}" href="${sprite.sheetDataUri}" />` +
+                `</svg>`);
+        }
+        this.#svg.push('</g>');
     }
-    drawRasterTiles(tiles, style) {
+    drawRasterTiles(id, tiles, style) {
         if (tiles.length === 0)
             return;
         if (style.opacity <= 0)
@@ -9337,7 +9511,7 @@ class SVGRenderer {
             const brightness = (style.brightnessMin + style.brightnessMax) / 2;
             filters.push(`brightness(${String(brightness)})`);
         }
-        let gAttrs = `opacity="${String(style.opacity)}"`;
+        let gAttrs = `id="${escapeXml(id)}" opacity="${String(style.opacity)}"`;
         if (filters.length > 0)
             gAttrs += ` filter="${filters.join(' ')}"`;
         this.#svg.push(`<g ${gAttrs}>`);
@@ -9388,6 +9562,57 @@ function formatPoint(p) {
     const [x, y] = roundXY(p[0], p[1]);
     return formatNum(x) + ',' + formatNum(y);
 }
+function mapTextAnchor(anchor) {
+    switch (anchor) {
+        case 'left':
+            return ['start', 'central'];
+        case 'right':
+            return ['end', 'central'];
+        case 'top':
+            return ['middle', 'text-before-edge'];
+        case 'bottom':
+            return ['middle', 'text-after-edge'];
+        case 'top-left':
+            return ['start', 'text-before-edge'];
+        case 'top-right':
+            return ['end', 'text-before-edge'];
+        case 'bottom-left':
+            return ['start', 'text-after-edge'];
+        case 'bottom-right':
+            return ['end', 'text-after-edge'];
+        default:
+            return ['middle', 'central'];
+    }
+}
+function mapIconAnchor(anchor, w, h) {
+    switch (anchor) {
+        case 'left':
+            return [0, -h / 2];
+        case 'right':
+            return [-w, -h / 2];
+        case 'top':
+            return [-w / 2, 0];
+        case 'bottom':
+            return [-w / 2, -h];
+        case 'top-left':
+            return [0, 0];
+        case 'top-right':
+            return [-w, 0];
+        case 'bottom-left':
+            return [0, -h];
+        case 'bottom-right':
+            return [-w, -h];
+        default:
+            return [-w / 2, -h / 2];
+    }
+}
+function escapeXml(s) {
+    return s
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
 
 /*
  *      bignumber.js v9.3.1
@@ -15936,6 +16161,65 @@ async function getRasterTiles(job, sourceName) {
     return rasterTiles.filter((tile) => tile !== null);
 }
 
+async function loadSpriteAtlas(style) {
+    const atlas = new Map();
+    const sprite = style.sprite;
+    if (!sprite)
+        return atlas;
+    const sources = [];
+    if (typeof sprite === 'string') {
+        sources.push({ id: 'default', url: sprite });
+    }
+    else if (Array.isArray(sprite)) {
+        for (const s of sprite) {
+            sources.push({
+                id: s.id,
+                url: s.url,
+            });
+        }
+    }
+    await Promise.all(sources.map(async ({ id, url }) => {
+        try {
+            const [jsonResponse, imageResponse] = await Promise.all([
+                fetch(`${url}.json`),
+                fetch(`${url}.png`),
+            ]);
+            if (!jsonResponse.ok || !imageResponse.ok)
+                return;
+            const json = (await jsonResponse.json());
+            const imageBuffer = await imageResponse.arrayBuffer();
+            const base64 = typeof Buffer !== 'undefined'
+                ? Buffer.from(imageBuffer).toString('base64')
+                : btoa(String.fromCharCode(...new Uint8Array(imageBuffer)));
+            const sheetDataUri = `data:image/png;base64,${base64}`;
+            // Estimate sheet dimensions from sprite entries
+            let sheetWidth = 0;
+            let sheetHeight = 0;
+            for (const entry of Object.values(json)) {
+                sheetWidth = Math.max(sheetWidth, entry.x + entry.width);
+                sheetHeight = Math.max(sheetHeight, entry.y + entry.height);
+            }
+            const prefix = id === 'default' ? '' : `${id}:`;
+            for (const [name, entry] of Object.entries(json)) {
+                atlas.set(`${prefix}${name}`, {
+                    width: entry.width,
+                    height: entry.height,
+                    x: entry.x,
+                    y: entry.y,
+                    pixelRatio: entry.pixelRatio ?? 1,
+                    sheetDataUri,
+                    sheetWidth,
+                    sheetHeight,
+                });
+            }
+        }
+        catch {
+            // Silently skip failed sprite loads
+        }
+    }));
+    return atlas;
+}
+
 async function getLayerFeatures(job) {
     const { width, height } = job.renderer;
     const { zoom, center } = job.view;
@@ -16096,6 +16380,12 @@ function getLayerStyles(layers) {
     return layers.map(createStyleLayer);
 }
 
+function resolveTokens(text, properties) {
+    return text.replace(/\{([^}]+)\}/g, (_, key) => {
+        const value = properties[key];
+        return value != null ? String(value) : '';
+    });
+}
 async function renderMap(job) {
     await render(job);
     return job.renderer.getString();
@@ -16106,9 +16396,12 @@ function getFeatures(layerFeatures, layerStyle) {
 async function render(job) {
     const { renderer } = job;
     const { zoom } = job.view;
-    const layerFeatures = await getLayerFeatures(job);
+    const [layerFeatures, spriteAtlas] = await Promise.all([
+        getLayerFeatures(job),
+        job.renderLabels ? loadSpriteAtlas(job.style) : Promise.resolve(new Map()),
+    ]);
     const layerStyles = getLayerStyles(job.style.layers);
-    const availableImages = [];
+    const availableImages = [...spriteAtlas.keys()];
     const featureState = {};
     for (const layerStyle of layerStyles) {
         if (layerStyle.isHidden(zoom))
@@ -16129,6 +16422,7 @@ async function render(job) {
         function getLayout(key, feature) {
             return getStyleValue(layerStyle.layout, key, feature);
         }
+        const layerId = layerStyle.id;
         switch (layerStyle.type) {
             case 'background':
                 {
@@ -16148,7 +16442,7 @@ async function render(job) {
                         : polygons;
                     if (polygonFeatures.length === 0)
                         continue;
-                    renderer.drawPolygons(polygonFeatures.map((feature) => [
+                    renderer.drawPolygons(layerId, polygonFeatures.map((feature) => [
                         feature,
                         {
                             color: getPaint('fill-color', feature),
@@ -16168,7 +16462,7 @@ async function render(job) {
                         : lineStrings;
                     if (lineStringFeatures.length === 0)
                         continue;
-                    renderer.drawLineStrings(lineStringFeatures.map((feature) => [
+                    renderer.drawLineStrings(layerId, lineStringFeatures.map((feature) => [
                         feature,
                         {
                             color: getPaint('line-color', feature),
@@ -16187,7 +16481,7 @@ async function render(job) {
             case 'raster':
                 {
                     const tiles = await getRasterTiles(job, layerStyle.source);
-                    renderer.drawRasterTiles(tiles, {
+                    renderer.drawRasterTiles(layerId, tiles, {
                         opacity: getPaint('raster-opacity'),
                         hueRotate: getPaint('raster-hue-rotate'),
                         brightnessMin: getPaint('raster-brightness-min'),
@@ -16208,7 +16502,7 @@ async function render(job) {
                         : points;
                     if (pointFeatures.length === 0)
                         continue;
-                    renderer.drawCircles(pointFeatures.map((feature) => [
+                    renderer.drawCircles(layerId, pointFeatures.map((feature) => [
                         feature,
                         {
                             color: getPaint('circle-color', feature),
@@ -16221,11 +16515,76 @@ async function render(job) {
                     ]));
                 }
                 continue;
+            case 'symbol':
+                {
+                    if (!job.renderLabels)
+                        continue;
+                    const features = getFeatures(layerFeatures, layerStyle);
+                    const allFeatures = [
+                        ...(features?.points ?? []),
+                        ...(features?.linestrings ?? []),
+                        ...(features?.polygons ?? []),
+                    ];
+                    if (allFeatures.length === 0)
+                        continue;
+                    const symbolFeatures = layerStyle.filterFn
+                        ? allFeatures.filter((feature) => layerStyle.filterFn.filter({ zoom }, feature))
+                        : allFeatures;
+                    if (symbolFeatures.length === 0)
+                        continue;
+                    // Render icons first (underneath text)
+                    renderer.drawIcons(`${layerId}-icons`, symbolFeatures.flatMap((feature) => {
+                        const iconImage = getLayout('icon-image', feature);
+                        const iconName = iconImage != null
+                            ? resolveTokens(iconImage.toString(), feature.properties)
+                            : '';
+                        if (!iconName || !spriteAtlas.has(iconName))
+                            return [];
+                        return [
+                            [
+                                feature,
+                                {
+                                    image: iconName,
+                                    size: getLayout('icon-size', feature),
+                                    anchor: getLayout('icon-anchor', feature),
+                                    offset: getLayout('icon-offset', feature),
+                                    rotate: getLayout('icon-rotate', feature),
+                                    opacity: getPaint('icon-opacity', feature),
+                                },
+                            ],
+                        ];
+                    }), spriteAtlas);
+                    // Render text labels on top
+                    renderer.drawLabels(`${layerId}-labels`, symbolFeatures.flatMap((feature) => {
+                        const textField = getLayout('text-field', feature);
+                        const textRaw = textField != null ? textField.toString() : '';
+                        const text = resolveTokens(textRaw, feature.properties);
+                        if (!text)
+                            return [];
+                        return [
+                            [
+                                feature,
+                                {
+                                    text,
+                                    size: getLayout('text-size', feature),
+                                    font: getLayout('text-font', feature),
+                                    anchor: getLayout('text-anchor', feature),
+                                    offset: getLayout('text-offset', feature),
+                                    rotate: getLayout('text-rotate', feature),
+                                    color: getPaint('text-color', feature),
+                                    opacity: getPaint('text-opacity', feature),
+                                    haloColor: getPaint('text-halo-color', feature),
+                                    haloWidth: getPaint('text-halo-width', feature),
+                                },
+                            ],
+                        ];
+                    }));
+                }
+                continue;
             case 'color-relief':
             case 'fill-extrusion':
             case 'heatmap':
             case 'hillshade':
-            case 'symbol':
                 continue;
             default:
                 throw Error('layerStyle.type: ' + String(layerStyle.type));
@@ -16247,6 +16606,7 @@ async function renderToSVG(options) {
             center: [options.lon ?? 0, options.lat ?? 0],
             zoom: options.zoom ?? 2,
         },
+        renderLabels: options.renderLabels ?? false,
     });
 }