@versatiles/svg-renderer 0.3.0 → 0.4.0

package/README.md

@@ -136,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
-subgraph E["renderer"]
-F["renderer_svg.ts"]
+A["helper.ts"]
+F["styles.ts"]
 end
-subgraph G["maplibre"]
-H["control.ts"]
-I["styles.ts"]
-J["index.ts"]
+subgraph H["renderer"]
+I["renderer_svg.ts"]
 end
-K["types.ts"]
+subgraph J["maplibre"]
+K["control.ts"]
+L["styles.ts"]
+M["index.ts"]
+end
+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

@@ -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':