@versatiles/svg-renderer 0.5.2 → 0.6.0

package/dist/maplibre.cjs

@@ -65,6 +65,10 @@ const PANEL_CSS = `
 }
 
 .svg-export-panel .panel-inputs {
+	margin-bottom: 12px;
+}
+
+.svg-export-panel .panel-inputs .grid {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	gap: 8px;
@@ -72,11 +76,15 @@ const PANEL_CSS = `
 }
 
 .svg-export-panel .panel-inputs label {
+	font-size: 12px;
+	color: #666;
+}
+
+.svg-export-panel .panel-inputs .grid label {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
-	font-size: 12px;
-	color: #666;
+	width: 100%;
 }
 
 .svg-export-panel .panel-inputs input {
@@ -84,7 +92,6 @@ const PANEL_CSS = `
 	border: 1px solid #ccc;
 	border-radius: 4px;
 	font-size: 13px;
-	width: 100%;
 	box-sizing: border-box;
 }
 
@@ -3002,6 +3009,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: {
@@ -3152,6 +3176,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 = {
@@ -3572,6 +3613,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,
@@ -6416,11 +6474,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;
     }
@@ -6445,6 +6504,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);
@@ -6457,12 +6525,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,
@@ -6479,6 +6548,9 @@ class NumberFormat {
         if (this.currency) {
             fn(this.currency);
         }
+        if (this.unit) {
+            fn(this.unit);
+        }
         if (this.minFractionDigits) {
             fn(this.minFractionDigits);
         }
@@ -8217,6 +8289,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],
@@ -9373,7 +9455,7 @@ class SVGRenderer {
         color.alpha *= style.opacity;
         this.#backgroundColor = color;
     }
-    drawPolygons(features) {
+    drawPolygons(id, features) {
         if (features.length === 0)
             return;
         const groups = new Map();
@@ -9397,12 +9479,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();
@@ -9451,13 +9535,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();
@@ -9489,13 +9575,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>');
     }
-    drawRasterTiles(tiles, style) {
+    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(id, tiles, style) {
         if (tiles.length === 0)
             return;
         if (style.opacity <= 0)
@@ -9511,7 +9692,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}>`);
@@ -9562,6 +9743,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
@@ -16110,6 +16342,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;
@@ -16270,6 +16561,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();
@@ -16280,9 +16577,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))
@@ -16303,6 +16603,7 @@ async function render(job) {
         function getLayout(key, feature) {
             return getStyleValue(layerStyle.layout, key, feature);
         }
+        const layerId = layerStyle.id;
         switch (layerStyle.type) {
             case 'background':
                 {
@@ -16322,7 +16623,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),
@@ -16342,7 +16643,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),
@@ -16361,7 +16662,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'),
@@ -16382,7 +16683,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),
@@ -16395,11 +16696,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));
@@ -16421,6 +16787,7 @@ async function renderToSVG(options) {
             center: [options.lon ?? 0, options.lat ?? 0],
             zoom: options.zoom ?? 2,
         },
+        renderLabels: options.renderLabels ?? false,
     });
 }
 
@@ -16516,11 +16883,14 @@ class SVGExportControl {
 			<div class="panel-notice">
 				Note:<br>
 				<span class="panel-attribution"></span><br>
-				Also export of symbols and texts is not supported yet, but you can improve me on <a href="https://github.com/versatiles-org/versatiles-svg-renderer" target="_blank" rel="noopener noreferrer">GitHub</a>.<br>
+				Text labels are rendered without collision detection, so labels may overlap. You can improve me on <a href="https://github.com/versatiles-org/versatiles-svg-renderer" target="_blank" rel="noopener noreferrer">GitHub</a>.<br>
 			</div>
 			<div class="panel-inputs">
-				<label>Width<input type="number" class="input-width" value="${String(this.options.defaultWidth)}" min="1" max="8192"></label>
-				<label>Height<input type="number" class="input-height" value="${String(this.options.defaultHeight)}" min="1" max="8192"></label>
+				<div class="grid">
+					<label>Width<input type="number" class="input-width" value="${String(this.options.defaultWidth)}" min="1" max="8192"></label>
+					<label>Height<input type="number" class="input-height" value="${String(this.options.defaultHeight)}" min="1" max="8192"></label>
+				</div>
+				<label class="label-checkbox"><input type="checkbox" class="input-labels"> Include labels and icons (buggy)</label>
 			</div>
 			<div class="preview-container">
 				<span class="preview-loading">Rendering preview\u2026</span>
@@ -16553,6 +16923,9 @@ class SVGExportControl {
             input.addEventListener('input', () => {
                 this.schedulePreview();
             });
+            input.addEventListener('change', () => {
+                this.schedulePreview();
+            });
         });
         querySelector(this.panel, '.btn-download').addEventListener('click', () => {
             this.downloadSVG();
@@ -16618,6 +16991,7 @@ class SVGExportControl {
         openBtn.disabled = true;
         const width = Number(querySelector(panel, '.input-width').value);
         const height = Number(querySelector(panel, '.input-height').value);
+        const renderLabels = querySelector(panel, '.input-labels').checked;
         if (!width || !height || width < 1 || height < 1) {
             previewContainer.innerHTML = '<span class="preview-loading">Invalid input values</span>';
             return;
@@ -16633,6 +17007,7 @@ class SVGExportControl {
                 lon: center.lng,
                 lat: center.lat,
                 zoom,
+                renderLabels,
             });
             if (this.renderGeneration !== generation)
                 return;