@versatiles/svg-renderer 0.8.0 → 1.1.0

package/README.md

@@ -64,13 +64,23 @@ document.body.innerHTML = svg;
 
 The package includes an `SVGExportControl` that adds an export button to any MapLibre GL JS map.
 
+With a bundler, import it from the `/maplibre` subpath:
+
+```typescript
+import { SVGExportControl } from '@versatiles/svg-renderer/maplibre';
+
+map.addControl(new SVGExportControl(), 'top-right');
+```
+
+Or load it directly in the browser via the UMD bundle, which exposes a `VersaTilesSVG` global:
+
 ```html
 <!DOCTYPE html>
 <html>
 	<head>
 		<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.css" />
 		<script src="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.js"></script>
-		<script src="https://unpkg.com/@versatiles/svg-renderer/dist/maplibre.umd.js"></script>
+		<script src="https://unpkg.com/@versatiles/svg-renderer/dist/maplibre-svg-export.umd.js"></script>
 	</head>
 	<body>
 		<div id="map"></div>
@@ -87,7 +97,7 @@ The package includes an `SVGExportControl` that adds an export button to any Map
 </html>
 ```
 
-The control opens a panel where the user can set width, height, and scale, preview the SVG, download it, or open it in a new tab. Map interactions are disabled while the panel is open.
+The control opens a panel where the user can set width and height, preview the SVG, download it, or open it in a new tab. Map interactions are disabled while the panel is open.
 
 Options:
 
@@ -95,7 +105,6 @@ Options:
 new SVGExportControl({
 	defaultWidth: 1024, // default: 1024
 	defaultHeight: 1024, // default: 1024
-	defaultScale: 1, // default: 1
 });
 ```
 
@@ -145,53 +154,54 @@ 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"]
 7["geojson.ts"]
 9["raster.ts"]
-A["tiles.ts"]
-B["sprite.ts"]
-C["vector.ts"]
-N["merge.ts"]
+A["base64.ts"]
+B["tiles.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-->B
-4-->D
+4-->C
+4-->E
 6-->7
 6-->9
-6-->B
 6-->C
+6-->D
 7-->8
 9-->A
-A-->8
-C-->8
+9-->B
+B-->8
 C-->A
-F-->G
-F-->H
-J-->2
-J-->K
-L-->2
-L-->J
-N-->8
-
-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

@@ -449,19 +449,28 @@ var v8_default = {
 		},
 		"property-type": "data-constant"
 	} },
-	"layout_fill-extrusion": { "visibility": {
-		"type": "enum",
-		"values": {
-			"visible": {},
-			"none": {}
-		},
-		"default": "visible",
-		"expression": {
-			"interpolated": false,
-			"parameters": ["global-state"]
+	"layout_fill-extrusion": {
+		"visibility": {
+			"type": "enum",
+			"values": {
+				"visible": {},
+				"none": {}
+			},
+			"default": "visible",
+			"expression": {
+				"interpolated": false,
+				"parameters": ["global-state"]
+			},
+			"property-type": "data-constant"
 		},
-		"property-type": "data-constant"
-	} },
+		"fill-extrusion-rounded-corner-distance": {
+			"type": "number",
+			"default": 0,
+			"minimum": 0,
+			"units": "meters",
+			"property-type": "constant"
+		}
+	},
 	layout_line: {
 		"line-cap": {
 			"type": "enum",
@@ -4499,7 +4508,11 @@ var Coercion = class Coercion {
 			}
 			case "formatted": return Formatted.fromString(valueToString(this.args[0].evaluate(ctx)));
 			case "resolvedImage": return ResolvedImage.fromString(valueToString(this.args[0].evaluate(ctx)));
-			case "projectionDefinition": return this.args[0].evaluate(ctx);
+			case "projectionDefinition": {
+				const input = this.args[0].evaluate(ctx);
+				if (ProjectionDefinition.parse(input)) return input;
+				throw new RuntimeError(`Could not parse projectionDefinition from value '${typeof input === "string" ? input : JSON.stringify(input)}'`, this.key);
+			}
 			default: return valueToString(this.args[0].evaluate(ctx));
 		}
 	}
@@ -4602,7 +4615,11 @@ var ParsingContext = class ParsingContext {
 					const expected = this.expectedType;
 					const actual = parsed.type;
 					if ((expected.kind === "string" || expected.kind === "number" || expected.kind === "boolean" || expected.kind === "object" || expected.kind === "array") && actual.kind === "value") parsed = annotate(parsed, expected, options.typeAnnotation || "assert");
-					else if ("projectionDefinition" === expected.kind && ["string", "array"].includes(actual.kind) || [
+					else if ("projectionDefinition" === expected.kind && [
+						"string",
+						"array",
+						"value"
+					].includes(actual.kind) || [
 						"color",
 						"formatted",
 						"resolvedImage"
@@ -10027,6 +10044,34 @@ function loadGeoJSONSource(options) {
     }
 }
 
+/**
+ * Base64-encode an ArrayBuffer (standard alphabet, with padding).
+ *
+ * Three paths, all producing identical output:
+ *  1. `Uint8Array.prototype.toBase64` — the native method (Node 22+, modern
+ *     browsers). Fastest and simplest; used when present.
+ *  2. Node's `Buffer` — for Node versions without the native method.
+ *  3. Chunked `btoa(String.fromCharCode(...))` — the browser fallback. It must
+ *     chunk: spreading a whole tile/sprite PNG at once passes one argument per
+ *     byte, overflowing the engine's argument-count limit (Safari ~64K, V8
+ *     higher but finite) and throwing `RangeError: Maximum call stack size
+ *     exceeded` for buffers above ~64 KB. 32 KB slices stay well under the limit.
+ */
+function arrayBufferToBase64(buffer) {
+    const bytes = new Uint8Array(buffer);
+    const toBase64 = bytes.toBase64;
+    if (typeof toBase64 === 'function')
+        return toBase64.call(bytes);
+    if (typeof Buffer !== 'undefined')
+        return Buffer.from(buffer).toString('base64');
+    const CHUNK_SIZE = 0x8000; // 32 KB, well below the argument-count limit
+    let binary = '';
+    for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
+        binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK_SIZE));
+    }
+    return btoa(binary);
+}
+
 async function getRasterTiles(job, sourceName) {
     const { width, height } = job.renderer;
     const { zoom, center } = job.view;
@@ -10040,10 +10085,7 @@ async function getRasterTiles(job, sourceName) {
         const tile = await getTile(sourceUrl, zoomLevel, x, y);
         if (!tile)
             return null;
-        const base64 = typeof Buffer !== 'undefined'
-            ? Buffer.from(tile.buffer).toString('base64')
-            : btoa(String.fromCharCode(...new Uint8Array(tile.buffer)));
-        const dataUri = `data:${tile.contentType};base64,${base64}`;
+        const dataUri = `data:${tile.contentType};base64,${arrayBufferToBase64(tile.buffer)}`;
         return {
             x: offsetX,
             y: offsetY,
@@ -10089,10 +10131,7 @@ async function loadSpriteAtlas(style) {
             const { jsonResponse, imageResponse } = spritePair;
             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}`;
+            const sheetDataUri = `data:image/png;base64,${arrayBufferToBase64(imageBuffer)}`;
             // Estimate sheet dimensions from sprite entries
             let sheetWidth = 0;
             let sheetHeight = 0;

package/dist/index.js

@@ -447,19 +447,28 @@ var v8_default = {
 		},
 		"property-type": "data-constant"
 	} },
-	"layout_fill-extrusion": { "visibility": {
-		"type": "enum",
-		"values": {
-			"visible": {},
-			"none": {}
-		},
-		"default": "visible",
-		"expression": {
-			"interpolated": false,
-			"parameters": ["global-state"]
+	"layout_fill-extrusion": {
+		"visibility": {
+			"type": "enum",
+			"values": {
+				"visible": {},
+				"none": {}
+			},
+			"default": "visible",
+			"expression": {
+				"interpolated": false,
+				"parameters": ["global-state"]
+			},
+			"property-type": "data-constant"
 		},
-		"property-type": "data-constant"
-	} },
+		"fill-extrusion-rounded-corner-distance": {
+			"type": "number",
+			"default": 0,
+			"minimum": 0,
+			"units": "meters",
+			"property-type": "constant"
+		}
+	},
 	layout_line: {
 		"line-cap": {
 			"type": "enum",
@@ -4497,7 +4506,11 @@ var Coercion = class Coercion {
 			}
 			case "formatted": return Formatted.fromString(valueToString(this.args[0].evaluate(ctx)));
 			case "resolvedImage": return ResolvedImage.fromString(valueToString(this.args[0].evaluate(ctx)));
-			case "projectionDefinition": return this.args[0].evaluate(ctx);
+			case "projectionDefinition": {
+				const input = this.args[0].evaluate(ctx);
+				if (ProjectionDefinition.parse(input)) return input;
+				throw new RuntimeError(`Could not parse projectionDefinition from value '${typeof input === "string" ? input : JSON.stringify(input)}'`, this.key);
+			}
 			default: return valueToString(this.args[0].evaluate(ctx));
 		}
 	}
@@ -4600,7 +4613,11 @@ var ParsingContext = class ParsingContext {
 					const expected = this.expectedType;
 					const actual = parsed.type;
 					if ((expected.kind === "string" || expected.kind === "number" || expected.kind === "boolean" || expected.kind === "object" || expected.kind === "array") && actual.kind === "value") parsed = annotate(parsed, expected, options.typeAnnotation || "assert");
-					else if ("projectionDefinition" === expected.kind && ["string", "array"].includes(actual.kind) || [
+					else if ("projectionDefinition" === expected.kind && [
+						"string",
+						"array",
+						"value"
+					].includes(actual.kind) || [
 						"color",
 						"formatted",
 						"resolvedImage"
@@ -10025,6 +10042,34 @@ function loadGeoJSONSource(options) {
     }
 }
 
+/**
+ * Base64-encode an ArrayBuffer (standard alphabet, with padding).
+ *
+ * Three paths, all producing identical output:
+ *  1. `Uint8Array.prototype.toBase64` — the native method (Node 22+, modern
+ *     browsers). Fastest and simplest; used when present.
+ *  2. Node's `Buffer` — for Node versions without the native method.
+ *  3. Chunked `btoa(String.fromCharCode(...))` — the browser fallback. It must
+ *     chunk: spreading a whole tile/sprite PNG at once passes one argument per
+ *     byte, overflowing the engine's argument-count limit (Safari ~64K, V8
+ *     higher but finite) and throwing `RangeError: Maximum call stack size
+ *     exceeded` for buffers above ~64 KB. 32 KB slices stay well under the limit.
+ */
+function arrayBufferToBase64(buffer) {
+    const bytes = new Uint8Array(buffer);
+    const toBase64 = bytes.toBase64;
+    if (typeof toBase64 === 'function')
+        return toBase64.call(bytes);
+    if (typeof Buffer !== 'undefined')
+        return Buffer.from(buffer).toString('base64');
+    const CHUNK_SIZE = 0x8000; // 32 KB, well below the argument-count limit
+    let binary = '';
+    for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
+        binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK_SIZE));
+    }
+    return btoa(binary);
+}
+
 async function getRasterTiles(job, sourceName) {
     const { width, height } = job.renderer;
     const { zoom, center } = job.view;
@@ -10038,10 +10083,7 @@ async function getRasterTiles(job, sourceName) {
         const tile = await getTile(sourceUrl, zoomLevel, x, y);
         if (!tile)
             return null;
-        const base64 = typeof Buffer !== 'undefined'
-            ? Buffer.from(tile.buffer).toString('base64')
-            : btoa(String.fromCharCode(...new Uint8Array(tile.buffer)));
-        const dataUri = `data:${tile.contentType};base64,${base64}`;
+        const dataUri = `data:${tile.contentType};base64,${arrayBufferToBase64(tile.buffer)}`;
         return {
             x: offsetX,
             y: offsetY,
@@ -10087,10 +10129,7 @@ async function loadSpriteAtlas(style) {
             const { jsonResponse, imageResponse } = spritePair;
             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}`;
+            const sheetDataUri = `data:image/png;base64,${arrayBufferToBase64(imageBuffer)}`;
             // Estimate sheet dimensions from sprite entries
             let sheetWidth = 0;
             let sheetHeight = 0;

package/dist/{maplibre.d.ts → maplibre-svg-export.d.ts}

@@ -2,7 +2,9 @@ import { IControl, Map } from 'maplibre-gl';
 import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
 
 interface SVGExportControlOptions {
+    /** Initial export width in px. Defaults to the current map viewport width. */
     defaultWidth?: number;
+    /** Initial export height in px. Defaults to the current map viewport height. */
     defaultHeight?: number;
 }
 declare class SVGExportControl implements IControl {

package/dist/{maplibre.js → maplibre-svg-export.js}

@@ -628,19 +628,28 @@ var v8_default = {
 		},
 		"property-type": "data-constant"
 	} },
-	"layout_fill-extrusion": { "visibility": {
-		"type": "enum",
-		"values": {
-			"visible": {},
-			"none": {}
-		},
-		"default": "visible",
-		"expression": {
-			"interpolated": false,
-			"parameters": ["global-state"]
+	"layout_fill-extrusion": {
+		"visibility": {
+			"type": "enum",
+			"values": {
+				"visible": {},
+				"none": {}
+			},
+			"default": "visible",
+			"expression": {
+				"interpolated": false,
+				"parameters": ["global-state"]
+			},
+			"property-type": "data-constant"
 		},
-		"property-type": "data-constant"
-	} },
+		"fill-extrusion-rounded-corner-distance": {
+			"type": "number",
+			"default": 0,
+			"minimum": 0,
+			"units": "meters",
+			"property-type": "constant"
+		}
+	},
 	layout_line: {
 		"line-cap": {
 			"type": "enum",
@@ -4678,7 +4687,11 @@ var Coercion = class Coercion {
 			}
 			case "formatted": return Formatted.fromString(valueToString(this.args[0].evaluate(ctx)));
 			case "resolvedImage": return ResolvedImage.fromString(valueToString(this.args[0].evaluate(ctx)));
-			case "projectionDefinition": return this.args[0].evaluate(ctx);
+			case "projectionDefinition": {
+				const input = this.args[0].evaluate(ctx);
+				if (ProjectionDefinition.parse(input)) return input;
+				throw new RuntimeError(`Could not parse projectionDefinition from value '${typeof input === "string" ? input : JSON.stringify(input)}'`, this.key);
+			}
 			default: return valueToString(this.args[0].evaluate(ctx));
 		}
 	}
@@ -4781,7 +4794,11 @@ var ParsingContext = class ParsingContext {
 					const expected = this.expectedType;
 					const actual = parsed.type;
 					if ((expected.kind === "string" || expected.kind === "number" || expected.kind === "boolean" || expected.kind === "object" || expected.kind === "array") && actual.kind === "value") parsed = annotate(parsed, expected, options.typeAnnotation || "assert");
-					else if ("projectionDefinition" === expected.kind && ["string", "array"].includes(actual.kind) || [
+					else if ("projectionDefinition" === expected.kind && [
+						"string",
+						"array",
+						"value"
+					].includes(actual.kind) || [
 						"color",
 						"formatted",
 						"resolvedImage"
@@ -10206,6 +10223,34 @@ function loadGeoJSONSource(options) {
     }
 }
 
+/**
+ * Base64-encode an ArrayBuffer (standard alphabet, with padding).
+ *
+ * Three paths, all producing identical output:
+ *  1. `Uint8Array.prototype.toBase64` — the native method (Node 22+, modern
+ *     browsers). Fastest and simplest; used when present.
+ *  2. Node's `Buffer` — for Node versions without the native method.
+ *  3. Chunked `btoa(String.fromCharCode(...))` — the browser fallback. It must
+ *     chunk: spreading a whole tile/sprite PNG at once passes one argument per
+ *     byte, overflowing the engine's argument-count limit (Safari ~64K, V8
+ *     higher but finite) and throwing `RangeError: Maximum call stack size
+ *     exceeded` for buffers above ~64 KB. 32 KB slices stay well under the limit.
+ */
+function arrayBufferToBase64(buffer) {
+    const bytes = new Uint8Array(buffer);
+    const toBase64 = bytes.toBase64;
+    if (typeof toBase64 === 'function')
+        return toBase64.call(bytes);
+    if (typeof Buffer !== 'undefined')
+        return Buffer.from(buffer).toString('base64');
+    const CHUNK_SIZE = 0x8000; // 32 KB, well below the argument-count limit
+    let binary = '';
+    for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
+        binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK_SIZE));
+    }
+    return btoa(binary);
+}
+
 async function getRasterTiles(job, sourceName) {
     const { width, height } = job.renderer;
     const { zoom, center } = job.view;
@@ -10219,10 +10264,7 @@ async function getRasterTiles(job, sourceName) {
         const tile = await getTile(sourceUrl, zoomLevel, x, y);
         if (!tile)
             return null;
-        const base64 = typeof Buffer !== 'undefined'
-            ? Buffer.from(tile.buffer).toString('base64')
-            : btoa(String.fromCharCode(...new Uint8Array(tile.buffer)));
-        const dataUri = `data:${tile.contentType};base64,${base64}`;
+        const dataUri = `data:${tile.contentType};base64,${arrayBufferToBase64(tile.buffer)}`;
         return {
             x: offsetX,
             y: offsetY,
@@ -10268,10 +10310,7 @@ async function loadSpriteAtlas(style) {
             const { jsonResponse, imageResponse } = spritePair;
             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}`;
+            const sheetDataUri = `data:image/png;base64,${arrayBufferToBase64(imageBuffer)}`;
             // Estimate sheet dimensions from sprite entries
             let sheetWidth = 0;
             let sheetHeight = 0;
@@ -10725,7 +10764,12 @@ const ALLOWED_TAGS = new Set(['a', 'b', 'i', 'em', 'strong', 'span']);
 function sanitizeHTML(html) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(html, 'text/html');
-    return sanitizeNode(doc.body).textContent ?? '';
+    // Serialize the sanitized tree back to HTML so allowed tags and safe links
+    // survive. The result is later assigned via innerHTML; every text node is
+    // re-escaped by the serializer, so it is safe to concatenate and inject.
+    const container = document.createElement('div');
+    container.append(sanitizeNode(doc.body));
+    return container.innerHTML;
 }
 function sanitizeNode(node) {
     if (node.nodeType === Node.TEXT_NODE) {
@@ -10764,10 +10808,7 @@ class SVGExportControl {
     renderGeneration = 0;
     options;
     constructor(options) {
-        this.options = {
-            defaultWidth: options?.defaultWidth ?? 1024,
-            defaultHeight: options?.defaultHeight ?? 1024,
-        };
+        this.options = { ...options };
     }
     onAdd(map) {
         this.map = map;
@@ -10797,6 +10838,12 @@ class SVGExportControl {
         if (this.panel || !this.map)
             return;
         const mapContainer = this.map.getContainer();
+        // Seed the size inputs from the current map viewport so the default export
+        // matches what the user sees on screen. Explicit constructor options win;
+        // the 1024 fallback covers environments that report no layout size
+        // (clientWidth 0). Inputs stay independent — the user can change either.
+        const defaultWidth = this.options.defaultWidth ?? (mapContainer.clientWidth || 1024);
+        const defaultHeight = this.options.defaultHeight ?? (mapContainer.clientHeight || 1024);
         this.panel = document.createElement('div');
         this.panel.className = 'svg-export-panel';
         this.panel.innerHTML = `
@@ -10811,8 +10858,8 @@ class SVGExportControl {
 			</div>
 			<div class="panel-inputs">
 				<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>
+					<label>Width<input type="number" class="input-width" value="${String(defaultWidth)}" min="1" max="8192"></label>
+					<label>Height<input type="number" class="input-height" value="${String(defaultHeight)}" min="1" max="8192"></label>
 				</div>
 				<label class="label-checkbox"><input type="checkbox" class="input-labels"> Include labels and icons (buggy)</label>
 			</div>
@@ -10978,4 +11025,4 @@ class SVGExportControl {
 }
 
 export { SVGExportControl, renderToSVG };
-//# sourceMappingURL=maplibre.js.map
+//# sourceMappingURL=maplibre-svg-export.js.map