@versatiles/svg-renderer 0.5.1 → 0.5.2

package/dist/maplibre.d.ts

@@ -4,7 +4,6 @@ import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
 interface SVGExportControlOptions {
     defaultWidth?: number;
     defaultHeight?: number;
-    defaultScale?: number;
 }
 declare class SVGExportControl implements IControl {
     private map;
@@ -30,7 +29,6 @@ declare class SVGExportControl implements IControl {
 declare function renderToSVG(options: {
     width?: number;
     height?: number;
-    scale?: number;
     style: StyleSpecification;
     lon?: number;
     lat?: number;

package/dist/maplibre.js

@@ -64,7 +64,7 @@ const PANEL_CSS = `
 
 .svg-export-panel .panel-inputs {
 	display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-columns: 1fr 1fr;
 	gap: 8px;
 	margin-bottom: 12px;
 }
@@ -9359,13 +9359,11 @@ class SVGRenderer {
     width;
     height;
     #svg;
-    #scale;
     #backgroundColor;
     constructor(opt) {
         this.width = opt.width;
         this.height = opt.height;
         this.#svg = [];
-        this.#scale = opt.scale;
         this.#backgroundColor = Color.transparent;
     }
     drawBackgroundFill(style) {
@@ -9385,7 +9383,7 @@ class SVGRenderer {
                 return;
             const translate = style.translate[0] === 0 && style.translate[1] === 0
                 ? ''
-                : ` transform="translate(${formatPoint(style.translate, this.#scale)})"`;
+                : ` transform="translate(${formatPoint(style.translate)})"`;
             const opacityAttr = style.opacity < 1 ? ` opacity="${style.opacity.toFixed(3)}"` : '';
             const key = color.hex + translate + opacityAttr;
             let group = groups.get(key);
@@ -9394,7 +9392,7 @@ class SVGRenderer {
                 groups.set(key, group);
             }
             feature.geometry.forEach((ring) => {
-                group.segments.push(ring.map((p) => roundXY(p.x, p.y, this.#scale)));
+                group.segments.push(ring.map((p) => roundXY(p.x, p.y)));
             });
         });
         for (const { segments, attrs } of groups.values()) {
@@ -9414,10 +9412,10 @@ class SVGRenderer {
                 return;
             const translate = style.translate[0] === 0 && style.translate[1] === 0
                 ? ''
-                : ` transform="translate(${formatPoint(style.translate, this.#scale)})"`;
-            const roundedWidth = formatScaled(style.width, this.#scale);
+                : ` transform="translate(${formatPoint(style.translate)})"`;
+            const roundedWidth = formatScaled(style.width);
             const dasharrayStr = style.dasharray
-                ? style.dasharray.map((v) => formatScaled(v * style.width, this.#scale)).join(',')
+                ? style.dasharray.map((v) => formatScaled(v * style.width)).join(',')
                 : '';
             const opacityAttr = style.opacity < 1 ? ` opacity="${style.opacity.toFixed(3)}"` : '';
             const key = [
@@ -9448,7 +9446,7 @@ class SVGRenderer {
                 groups.set(key, group);
             }
             feature.geometry.forEach((line) => {
-                group.segments.push(line.map((p) => roundXY(p.x, p.y, this.#scale)));
+                group.segments.push(line.map((p) => roundXY(p.x, p.y)));
             });
         });
         for (const { segments, attrs } of groups.values()) {
@@ -9469,12 +9467,10 @@ class SVGRenderer {
                 return;
             const translate = style.translate[0] === 0 && style.translate[1] === 0
                 ? ''
-                : ` transform="translate(${formatPoint(style.translate, this.#scale)})"`;
-            const roundedRadius = formatScaled(style.radius, this.#scale);
+                : ` transform="translate(${formatPoint(style.translate)})"`;
+            const roundedRadius = formatScaled(style.radius);
             const strokeColor = new Color(style.strokeColor);
-            const strokeAttrs = style.strokeWidth > 0
-                ? ` ${strokeAttr(strokeColor, formatScaled(style.strokeWidth, this.#scale))}`
-                : '';
+            const strokeAttrs = style.strokeWidth > 0 ? ` ${strokeAttr(strokeColor, formatScaled(style.strokeWidth))}` : '';
             const opacityAttr = style.opacity < 1 ? ` opacity="${style.opacity.toFixed(3)}"` : '';
             const key = [color.hex, roundedRadius, strokeAttrs, opacityAttr, translate].join('\0');
             let group = groups.get(key);
@@ -9488,7 +9484,7 @@ class SVGRenderer {
             feature.geometry.forEach((ring) => {
                 const p = ring[0];
                 if (p)
-                    group.points.push(roundXY(p.x, p.y, this.#scale));
+                    group.points.push(roundXY(p.x, p.y));
             });
         });
         for (const { points, attrs } of groups.values()) {
@@ -9520,8 +9516,7 @@ class SVGRenderer {
         const pixelated = style.resampling === 'nearest';
         for (const tile of tiles) {
             const overlap = Math.min(tile.width, tile.height) / 10000; // slight overlap to prevent sub-pixel gaps between tiles
-            const s = this.#scale;
-            let attrs = `x="${formatScaled(tile.x - overlap, s)}" y="${formatScaled(tile.y - overlap, s)}" width="${formatScaled(tile.width + overlap * 2, s)}" height="${formatScaled(tile.height + overlap * 2, s)}" href="${tile.dataUri}"`;
+            let attrs = `x="${formatScaled(tile.x - overlap)}" y="${formatScaled(tile.y - overlap)}" width="${formatScaled(tile.width + overlap * 2)}" height="${formatScaled(tile.height + overlap * 2)}" href="${tile.dataUri}"`;
             if (pixelated)
                 attrs += ' style="image-rendering:pixelated"';
             this.#svg.push(`<image ${attrs} />`);
@@ -9555,14 +9550,14 @@ function strokeAttr(color, width) {
         attr += ` stroke-opacity="${color.opacity.toFixed(3)}"`;
     return attr;
 }
-function formatScaled(v, scale) {
-    return formatNum(Math.round(v * scale * 10));
+function formatScaled(v) {
+    return formatNum(Math.round(v * 10));
 }
-function roundXY(x, y, scale) {
-    return [Math.round(x * scale * 10), Math.round(y * scale * 10)];
+function roundXY(x, y) {
+    return [Math.round(x * 10), Math.round(y * 10)];
 }
-function formatPoint(p, scale) {
-    const [x, y] = roundXY(p[0], p[1], scale);
+function formatPoint(p) {
+    const [x, y] = roundXY(p[0], p[1]);
     return formatNum(x) + ',' + formatNum(y);
 }
 
@@ -16413,15 +16408,12 @@ async function render(job) {
 async function renderToSVG(options) {
     const width = options.width ?? 1024;
     const height = options.height ?? 1024;
-    const scale = options.scale ?? 1;
     if (width <= 0)
         throw new Error('width must be positive');
     if (height <= 0)
         throw new Error('height must be positive');
-    if (scale <= 0)
-        throw new Error('scale must be positive');
     return await renderMap({
-        renderer: new SVGRenderer({ width, height, scale }),
+        renderer: new SVGRenderer({ width, height }),
         style: options.style,
         view: {
             center: [options.lon ?? 0, options.lat ?? 0],
@@ -16482,7 +16474,6 @@ class SVGExportControl {
         this.options = {
             defaultWidth: options?.defaultWidth ?? 1024,
             defaultHeight: options?.defaultHeight ?? 1024,
-            defaultScale: options?.defaultScale ?? 1,
         };
     }
     onAdd(map) {
@@ -16528,7 +16519,6 @@ class SVGExportControl {
 			<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>
-				<label>Scale<input type="number" class="input-scale" value="${String(this.options.defaultScale)}" min="0.1" max="10" step="0.1"></label>
 			</div>
 			<div class="preview-container">
 				<span class="preview-loading">Rendering preview\u2026</span>
@@ -16626,8 +16616,7 @@ class SVGExportControl {
         openBtn.disabled = true;
         const width = Number(querySelector(panel, '.input-width').value);
         const height = Number(querySelector(panel, '.input-height').value);
-        const scale = Number(querySelector(panel, '.input-scale').value);
-        if (!width || !height || !scale || width < 1 || height < 1 || scale < 0.1) {
+        if (!width || !height || width < 1 || height < 1) {
             previewContainer.innerHTML = '<span class="preview-loading">Invalid input values</span>';
             return;
         }
@@ -16638,7 +16627,6 @@ class SVGExportControl {
             const svg = await renderToSVG({
                 width,
                 height,
-                scale,
                 style,
                 lon: center.lng,
                 lat: center.lat,