npm - @versatiles/svg-renderer - Versions diffs - 0.2.0 → 0.4.0 - Mend

@versatiles/svg-renderer 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md CHANGED Viewed

@@ -64,18 +64,13 @@ document.body.innerHTML = svg;
 The package includes an `SVGExportControl` that adds an export button to any MapLibre GL JS map.
-```bash
-npm install @versatiles/svg-renderer maplibre-gl
-```
 ```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="…/svg-renderer/dist/maplibre.cjs"></script>
-		<style></style>
+		<script src="https://unpkg.com/@versatiles/svg-renderer/dist/maplibre.umd.js"></script>
 	</head>
 	<body>
 		<div id="map"></div>
@@ -86,7 +81,7 @@ npm install @versatiles/svg-renderer maplibre-gl
 				center: [13.4, 52.5],
 				zoom: 10,
 			});
-			map.addControl(new SVGExportControl(), 'top-right');
+			map.addControl(new VersaTilesSVG.SVGExportControl(), 'top-right');
 		</script>
 	</body>
 </html>
@@ -141,47 +136,55 @@ subgraph 0["src"]
 subgraph 3["lib"]
 4["geometry.ts"]
 7["color.ts"]
-B["style_layer.ts"]
+G["style_layer.ts"]
 end
 subgraph 5["processor"]
 6["render.ts"]
-8["raster.ts"]
-9["tiles.ts"]
-A["styles.ts"]
-C["vector.ts"]
-D["helper.ts"]
+subgraph 8["sources"]
+9["index.ts"]
+B["geojson.ts"]
+C["raster.ts"]
+D["tiles.ts"]
+E["vector.ts"]
+N["types.ts"]
+end
+A["helper.ts"]
+F["styles.ts"]
 end
-subgraph E["renderer"]
-F["renderer_svg.ts"]
+subgraph H["renderer"]
+I["renderer_svg.ts"]
 end
-subgraph G["maplibre"]
-H["control.ts"]
-I["styles.ts"]
-J["index.ts"]
+subgraph J["maplibre"]
+K["control.ts"]
+L["styles.ts"]
+M["index.ts"]
 end
-K["types.ts"]
+O["types.ts"]
 end
 1-->2
 2-->4
 2-->6
-2-->F
+2-->I
 6-->7
 6-->4
-6-->8
-6-->A
-6-->C
-8-->9
-A-->B
-C-->4
+6-->9
+6-->F
+9-->A
+9-->B
+9-->C
+9-->E
+A-->4
+B-->4
 C-->D
-C-->9
-D-->4
-F-->7
-H-->2
-H-->I
-J-->2
-J-->H
-class 0,3,5,E,G subgraphs;
+E-->4
+E-->D
+F-->G
+I-->7
+K-->2
+K-->L
+M-->2
+M-->K
+class 0,3,5,8,H,J subgraphs;
 classDef subgraphs fill-opacity:0.1, fill:#888, color:#888, stroke:#888;
 ```

package/dist/index.cjs CHANGED Viewed

@@ -9052,6 +9052,20 @@ class Color {
             return str.length < 2 ? '0' + str : str;
         }
     }
+    get rgb() {
+        return `#${d2h(this.values[0])}${d2h(this.values[1])}${d2h(this.values[2])}`;
+        function d2h(num) {
+            if (num < 0)
+                num = 0;
+            if (num > 255)
+                num = 255;
+            const str = Math.round(num).toString(16).toUpperCase();
+            return str.length < 2 ? '0' + str : str;
+        }
+    }
+    get opacity() {
+        return this.values[3] / 255;
+    }
     get alpha() {
         return this.values[3];
     }
@@ -9097,7 +9111,7 @@ class SVGRenderer {
             const key = style.color.hex + translate;
             let group = groups.get(key);
             if (!group) {
-                group = { segments: [], attrs: `fill="${style.color.hex}"${translate}` };
+                group = { segments: [], attrs: `${fillAttr(style.color)}${translate}` };
                 groups.set(key, group);
             }
             feature.geometry.forEach((ring) => {
@@ -9138,8 +9152,7 @@ class SVGRenderer {
                     segments: [],
                     attrs: [
                         'fill="none"',
-                        `stroke="${style.color.hex}"`,
-                        `stroke-width="${roundedWidth}"`,
+                        strokeAttr(style.color, roundedWidth),
                         `stroke-linecap="${style.cap}"`,
                         `stroke-linejoin="${style.join}"`,
                         `stroke-miterlimit="${String(style.miterLimit)}"`,
@@ -9158,6 +9171,43 @@ class SVGRenderer {
         }
         this.#svg.push('</g>');
     }
+    drawCircles(features, opacity) {
+        if (features.length === 0)
+            return;
+        if (opacity <= 0)
+            return;
+        this.#svg.push(`<g opacity="${String(opacity)}">`);
+        const groups = new Map();
+        features.forEach(([feature, style]) => {
+            if (style.radius <= 0 || style.color.alpha <= 0)
+                return;
+            const translate = style.translate.isZero()
+                ? ''
+                : ` transform="translate(${formatPoint(style.translate, this.#scale)})"`;
+            const roundedRadius = roundValue(style.radius, this.#scale);
+            const strokeAttrs = style.strokeWidth > 0
+                ? ` ${strokeAttr(style.strokeColor, roundValue(style.strokeWidth, this.#scale))}`
+                : '';
+            const key = [style.color.hex, roundedRadius, strokeAttrs, translate].join('\0');
+            let group = groups.get(key);
+            if (!group) {
+                group = {
+                    points: [],
+                    attrs: `r="${roundedRadius}" ${fillAttr(style.color)}${strokeAttrs}${translate}`,
+                };
+                groups.set(key, group);
+            }
+            feature.geometry.forEach((ring) => {
+                group.points.push(roundXY(ring[0], this.#scale));
+            });
+        });
+        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) {
         if (tiles.length === 0)
             return;
@@ -9190,13 +9240,32 @@ class SVGRenderer {
         this.#svg.push('</g>');
     }
     getString() {
-        return [
-            `<svg viewBox="0 0 ${String(this.width)} ${String(this.height)}" width="${String(this.width)}" height="${String(this.height)}" xmlns="http://www.w3.org/2000/svg" style="background-color:${this.#backgroundColor.hex}">`,
-            ...this.#svg,
-            '</svg>',
-        ].join('\n');
+        const w = this.width.toFixed(0);
+        const h = this.height.toFixed(0);
+        const parts = [
+            `<svg viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" xmlns="http://www.w3.org/2000/svg">`,
+            `<defs><clipPath id="vb"><rect width="${w}" height="${h}"/></clipPath></defs>`,
+            `<g clip-path="url(#vb)">`,
+        ];
+        if (this.#backgroundColor.alpha > 0) {
+            parts.push(`<rect x="-1" y="-1" width="${(this.width + 2).toFixed(0)}" height="${(this.height + 2).toFixed(0)}" ${fillAttr(this.#backgroundColor)} />`);
+        }
+        parts.push(...this.#svg, '</g>', '</svg>');
+        return parts.join('\n');
     }
 }
+function fillAttr(color) {
+    let attr = `fill="${color.rgb}"`;
+    if (color.alpha < 255)
+        attr += ` fill-opacity="${color.opacity.toFixed(3)}"`;
+    return attr;
+}
+function strokeAttr(color, width) {
+    let attr = `stroke="${color.rgb}" stroke-width="${width}"`;
+    if (color.alpha < 255)
+        attr += ` stroke-opacity="${color.opacity.toFixed(3)}"`;
+    return attr;
+}
 function roundValue(v, scale) {
     return (v * scale).toFixed(3);
 }
@@ -9307,77 +9376,6 @@ function formatNum(tenths) {
     return (negative ? '-' : '') + String(whole) + '.' + String(frac);
 }
-class Point2D {
-    x;
-    y;
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
-    }
-    isZero() {
-        return this.x === 0 && this.y === 0;
-    }
-    scale(factor) {
-        this.x *= factor;
-        this.y *= factor;
-        return this;
-    }
-    translate(offset) {
-        this.x += offset.x;
-        this.y += offset.y;
-        return this;
-    }
-    getProject2Pixel() {
-        const s = Math.sin((this.y * Math.PI) / 180.0);
-        return new Point2D(this.x / 360.0 + 0.5, 0.5 - (0.25 * Math.log((1 + s) / (1 - s))) / Math.PI);
-    }
-}
-class Feature {
-    type;
-    id;
-    properties;
-    patterns;
-    geometry;
-    constructor(opt) {
-        this.type = opt.type;
-        this.id = opt.id;
-        this.properties = opt.properties;
-        this.patterns = opt.patterns;
-        this.geometry = opt.geometry;
-    }
-    getBbox() {
-        let xMin = Infinity;
-        let yMin = Infinity;
-        let xMax = -Infinity;
-        let yMax = -Infinity;
-        this.geometry.forEach((ring) => {
-            ring.forEach((point) => {
-                if (xMin > point.x)
-                    xMin = point.x;
-                if (yMin > point.y)
-                    yMin = point.y;
-                if (xMax < point.x)
-                    xMax = point.x;
-                if (yMax < point.y)
-                    yMax = point.y;
-            });
-        });
-        return [xMin, yMin, xMax, yMax];
-    }
-    doesOverlap(bbox) {
-        const featureBbox = this.getBbox();
-        if (featureBbox[0] > bbox[2])
-            return false;
-        if (featureBbox[1] > bbox[3])
-            return false;
-        if (featureBbox[2] < bbox[0])
-            return false;
-        if (featureBbox[3] < bbox[1])
-            return false;
-        return true;
-    }
-}
 /*
  *      bignumber.js v9.3.1
  *      A JavaScript library for arbitrary-precision arithmetic.
@@ -14009,6 +14007,77 @@ function union2(features, options = {}) {
   else return multiPolygon(unioned, options.properties);
 }
+class Point2D {
+    x;
+    y;
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+    isZero() {
+        return this.x === 0 && this.y === 0;
+    }
+    scale(factor) {
+        this.x *= factor;
+        this.y *= factor;
+        return this;
+    }
+    translate(offset) {
+        this.x += offset.x;
+        this.y += offset.y;
+        return this;
+    }
+    getProject2Pixel() {
+        const s = Math.sin((this.y * Math.PI) / 180.0);
+        return new Point2D(this.x / 360.0 + 0.5, 0.5 - (0.25 * Math.log((1 + s) / (1 - s))) / Math.PI);
+    }
+}
+class Feature {
+    type;
+    id;
+    properties;
+    patterns;
+    geometry;
+    constructor(opt) {
+        this.type = opt.type;
+        this.id = opt.id;
+        this.properties = opt.properties;
+        this.patterns = opt.patterns;
+        this.geometry = opt.geometry;
+    }
+    getBbox() {
+        let xMin = Infinity;
+        let yMin = Infinity;
+        let xMax = -Infinity;
+        let yMax = -Infinity;
+        this.geometry.forEach((ring) => {
+            ring.forEach((point) => {
+                if (xMin > point.x)
+                    xMin = point.x;
+                if (yMin > point.y)
+                    yMin = point.y;
+                if (xMax < point.x)
+                    xMax = point.x;
+                if (yMax < point.y)
+                    yMax = point.y;
+            });
+        });
+        return [xMin, yMin, xMax, yMax];
+    }
+    doesOverlap(bbox) {
+        const featureBbox = this.getBbox();
+        if (featureBbox[0] > bbox[2])
+            return false;
+        if (featureBbox[1] > bbox[3])
+            return false;
+        if (featureBbox[2] < bbox[0])
+            return false;
+        if (featureBbox[3] < bbox[1])
+            return false;
+        return true;
+    }
+}
 function geojsonToFeature(id, polygonFeature) {
     const geometry = polygonFeature.geometry.coordinates.map((ring) => {
         return ring.map((coord) => new Point2D(coord[0], coord[1]));
@@ -14042,15 +14111,13 @@ function mergePolygons(featureList) {
         const turfFeatures = [];
         features.forEach((f) => {
             const rings = f.geometry.map((ring) => ring.map((p) => [p.x, p.y]));
-            rings.forEach((ring) => {
-                turfFeatures.push({
-                    type: 'Feature',
-                    geometry: {
-                        type: 'Polygon',
-                        coordinates: [ring],
-                    },
-                    properties: f.properties,
-                });
+            turfFeatures.push({
+                type: 'Feature',
+                geometry: {
+                    type: 'Polygon',
+                    coordinates: rings,
+                },
+                properties: f.properties,
             });
         });
         const merged = union2({
@@ -15659,24 +15726,16 @@ function writeUtf8(buf, str, pos) {
 }
 const TILE_EXTENT = 4096;
-async function getLayerFeatures(job) {
+async function loadVectorSource(source, job, layerFeatures) {
+    const tiles = source.tiles;
+    if (!tiles)
+        return;
     const { width, height } = job.renderer;
     const { zoom, center } = job.view;
-    const { sources } = job.style;
-    const source = sources['versatiles-shortbread'];
-    if (!source)
-        return new Map();
-    if (source.type !== 'vector' || !source.tiles) {
-        console.error('Invalid source configuration. Expected a vector source with tile URLs.');
-        console.error('Source config:', source);
-        throw Error('Invalid source');
-    }
-    const sourceUrl = source.tiles[0];
     const { zoomLevel, tileSize, tiles: tileCoordinates, } = calculateTileGrid(width, height, center, zoom, source.maxzoom);
-    const layerFeatures = new Map();
     await Promise.all(tileCoordinates.map(async ({ x, y, offsetX, offsetY }) => {
         const offset = new Point2D(offsetX, offsetY);
-        const tile = await getTile(sourceUrl, zoomLevel, x, y);
+        const tile = await getTile(tiles[0], zoomLevel, x, y);
         if (!tile)
             return;
         const vectorTile = new VectorTile(new Pbf(tile.buffer));
@@ -15720,14 +15779,108 @@ async function getLayerFeatures(job) {
             }
         }
     }));
-    for (const [name, features] of layerFeatures) {
-        layerFeatures.set(name, {
-            points: features.points,
-            linestrings: features.linestrings,
-            polygons: mergePolygons(features.polygons),
-        });
+}
+function loadGeoJSONSource(sourceName, data, width, height, zoom, center, layerFeatures) {
+    const existing = layerFeatures.get(sourceName);
+    const features = existing ?? { points: [], linestrings: [], polygons: [] };
+    if (!existing)
+        layerFeatures.set(sourceName, features);
+    const worldSize = 512 * 2 ** zoom;
+    const centerMercator = center.getProject2Pixel();
+    function projectCoord(coord) {
+        const mercator = new Point2D(coord[0], coord[1]).getProject2Pixel();
+        return new Point2D((mercator.x - centerMercator.x) * worldSize + width / 2, (mercator.y - centerMercator.y) * worldSize + height / 2);
+    }
+    function makeFeature(type, geometry, id, properties) {
+        const feature = new Feature({ type, geometry, id, properties });
+        if (!feature.doesOverlap([0, 0, width, height]))
+            return null;
+        return feature;
+    }
+    function extractPoints(geometry) {
+        return geometry.flatMap((ring) => ring.map((p) => [p]));
+    }
+    function addFeature(type, geometry, id, properties) {
+        switch (type) {
+            case 'Point': {
+                const f = makeFeature('Point', geometry, id, properties);
+                if (f)
+                    features.points.push(f);
+                break;
+            }
+            case 'LineString': {
+                const f = makeFeature('LineString', geometry, id, properties);
+                if (f) {
+                    features.linestrings.push(f);
+                    features.points.push(new Feature({ type: 'Point', geometry: extractPoints(geometry), id, properties }));
+                }
+                break;
+            }
+            case 'Polygon': {
+                geometry.forEach((ring, ringIndex) => {
+                    const needsCW = ringIndex === 0;
+                    let area = 0;
+                    for (let i = 0; i < ring.length; i++) {
+                        const j = (i + 1) % ring.length;
+                        area += ring[i].x * ring[j].y;
+                        area -= ring[j].x * ring[i].y;
+                    }
+                    if (area < 0 !== needsCW)
+                        ring.reverse();
+                });
+                const f = makeFeature('Polygon', geometry, id, properties);
+                if (f) {
+                    features.polygons.push(f);
+                    features.linestrings.push(new Feature({ type: 'LineString', geometry, id, properties }));
+                    features.points.push(new Feature({ type: 'Point', geometry: extractPoints(geometry), id, properties }));
+                }
+                break;
+            }
+        }
+    }
+    function processGeometry(geom, id, properties) {
+        const coords = geom.coordinates;
+        switch (geom.type) {
+            case 'Point':
+                addFeature('Point', [[projectCoord(coords)]], id, properties);
+                break;
+            case 'MultiPoint':
+                addFeature('Point', coords.map((c) => [projectCoord(c)]), id, properties);
+                break;
+            case 'LineString':
+                addFeature('LineString', [coords.map((c) => projectCoord(c))], id, properties);
+                break;
+            case 'MultiLineString':
+                addFeature('LineString', coords.map((line) => line.map((c) => projectCoord(c))), id, properties);
+                break;
+            case 'Polygon':
+                addFeature('Polygon', coords.map((ring) => ring.map((c) => projectCoord(c))), id, properties);
+                break;
+            case 'MultiPolygon':
+                addFeature('Polygon', coords.flatMap((polygon) => polygon.map((ring) => ring.map((c) => projectCoord(c)))), id, properties);
+                break;
+            case 'GeometryCollection':
+                for (const g of geom.geometries) {
+                    processGeometry(g, id, properties);
+                }
+                break;
+        }
+    }
+    const geojson = data;
+    switch (geojson.type) {
+        case 'FeatureCollection':
+            for (const f of geojson.features) {
+                processGeometry(f.geometry, f.id, (f.properties ?? {}));
+            }
+            break;
+        case 'Feature':
+            processGeometry(geojson.geometry, geojson.id, (geojson.properties ?? {}));
+            break;
+        default:
+            processGeometry(geojson, undefined, {});
+            break;
     }
-    return layerFeatures;
 }
 async function getRasterTiles(job, sourceName) {
@@ -15758,6 +15911,34 @@ async function getRasterTiles(job, sourceName) {
     return rasterTiles.filter((tile) => tile !== null);
 }
+async function getLayerFeatures(job) {
+    const { width, height } = job.renderer;
+    const { zoom, center } = job.view;
+    const { sources } = job.style;
+    const layerFeatures = new Map();
+    for (const [sourceName, sourceSpec] of Object.entries(sources)) {
+        const source = sourceSpec;
+        switch (source.type) {
+            case 'vector':
+                await loadVectorSource(source, job, layerFeatures);
+                break;
+            case 'geojson':
+                if (source.data) {
+                    loadGeoJSONSource(sourceName, source.data, width, height, zoom, center, layerFeatures);
+                }
+                break;
+        }
+    }
+    for (const [name, features] of layerFeatures) {
+        layerFeatures.set(name, {
+            points: features.points,
+            linestrings: features.linestrings,
+            polygons: mergePolygons(features.polygons),
+        });
+    }
+    return layerFeatures;
+}
 /**
  * Wraps a source/composite expression for per-feature evaluation.
  */
@@ -15923,7 +16104,7 @@ async function render(job) {
                 continue;
             case 'fill':
                 {
-                    const polygons = layerFeatures.get(layerStyle.sourceLayer)?.polygons;
+                    const polygons = (layerFeatures.get(layerStyle.sourceLayer) ?? layerFeatures.get(layerStyle.source))?.polygons;
                     if (!polygons || polygons.length === 0)
                         continue;
                     const filter = featureFilter(layerStyle.filter);
@@ -15941,7 +16122,7 @@ async function render(job) {
                 continue;
             case 'line':
                 {
-                    const lineStrings = layerFeatures.get(layerStyle.sourceLayer)?.linestrings;
+                    const lineStrings = (layerFeatures.get(layerStyle.sourceLayer) ?? layerFeatures.get(layerStyle.source))?.linestrings;
                     if (!lineStrings || lineStrings.length === 0)
                         continue;
                     const filter = featureFilter(layerStyle.filter);
@@ -15981,6 +16162,27 @@ async function render(job) {
                 }
                 continue;
             case 'circle':
+                {
+                    const points = (layerFeatures.get(layerStyle.sourceLayer) ?? layerFeatures.get(layerStyle.source))?.points;
+                    if (!points || points.length === 0)
+                        continue;
+                    const filter = featureFilter(layerStyle.filter);
+                    const pointFeatures = points.filter((feature) => filter.filter({ zoom }, feature));
+                    if (pointFeatures.length === 0)
+                        continue;
+                    renderer.drawCircles(pointFeatures.map((feature) => [
+                        feature,
+                        {
+                            color: new Color(getPaint('circle-color', feature)),
+                            radius: getPaint('circle-radius', feature),
+                            blur: getPaint('circle-blur', feature),
+                            translate: new Point2D(...getPaint('circle-translate', feature)),
+                            strokeWidth: getPaint('circle-stroke-width', feature),
+                            strokeColor: new Color(getPaint('circle-stroke-color', feature)),
+                        },
+                    ]), getPaint('circle-opacity', pointFeatures[0]));
+                }
+                continue;
             case 'color-relief':
             case 'fill-extrusion':
             case 'heatmap':