@scoova/mgl 1.0.0

package/src/style/style_layer_index.test.ts

@@ -0,0 +1,99 @@
+import {mapObject} from '../util/util';
+import {StyleLayerIndex} from './style_layer_index';
+
+describe('StyleLayerIndex', () => {
+    test('StyleLayerIndex#replace', () => {
+        const index = new StyleLayerIndex([
+            {id: '1', type: 'fill', source: 'source', 'source-layer': 'layer', paint: {'fill-color': 'red'}},
+            {id: '2', type: 'circle', source: 'source', 'source-layer': 'layer', paint: {'circle-color': 'green'}},
+            {id: '3', type: 'circle', source: 'source', 'source-layer': 'layer', paint: {'circle-color': 'blue'}}
+        ]);
+
+        const families = index.familiesBySource['source']['layer'];
+        expect(families).toHaveLength(2);
+        expect(families[0]).toHaveLength(1);
+        expect(families[0][0].id).toBe('1');
+        expect(families[1]).toHaveLength(2);
+        expect(families[1][0].id).toBe('2');
+        expect(families[1][1].id).toBe('3');
+
+        index.replace([]);
+        expect(index.familiesBySource).toEqual({});
+
+    });
+
+    test('StyleLayerIndex#update', () => {
+        const index = new StyleLayerIndex([
+            {id: '1', type: 'fill', source: 'foo', 'source-layer': 'layer', paint: {'fill-color': 'red'}},
+            {id: '2', type: 'circle', source: 'foo', 'source-layer': 'layer', paint: {'circle-color': 'green'}},
+            {id: '3', type: 'circle', source: 'foo', 'source-layer': 'layer', paint: {'circle-color': 'blue'}}
+        ]);
+
+        index.update([
+            {id: '1', type: 'fill', source: 'bar', 'source-layer': 'layer', paint: {'fill-color': 'cyan'}},
+            {id: '2', type: 'circle', source: 'bar', 'source-layer': 'layer', paint: {'circle-color': 'magenta'}},
+            {id: '3', type: 'circle', source: 'bar', 'source-layer': 'layer', paint: {'circle-color': 'yellow'}}
+        ], []);
+
+        const families = index.familiesBySource['bar']['layer'];
+        expect(families).toHaveLength(2);
+        expect(families[0]).toHaveLength(1);
+        expect(families[0][0].getPaintProperty('fill-color')).toBe('cyan');
+        expect(families[1]).toHaveLength(2);
+        expect(families[1][0].getPaintProperty('circle-color')).toBe('magenta');
+        expect(families[1][0].source).toBe('bar');
+        expect(families[1][1].getPaintProperty('circle-color')).toBe('yellow');
+        expect(families[1][1].source).toBe('bar');
+
+    });
+
+    test('StyleLayerIndex#familiesBySource', () => {
+        const index = new StyleLayerIndex([
+            {id: '0', type: 'fill', 'source': 'A', 'source-layer': 'foo'},
+            {id: '1', type: 'fill', 'source': 'A', 'source-layer': 'foo'},
+            {id: '2', type: 'fill', 'source': 'A', 'source-layer': 'foo', 'minzoom': 1},
+            {id: '3', type: 'fill', 'source': 'A', 'source-layer': 'bar'},
+            {id: '4', type: 'fill', 'source': 'B', 'source-layer': 'foo'},
+            {id: '5', type: 'fill', 'source': 'geojson'},
+            {id: '6', type: 'background'}
+        ]);
+
+        const ids = mapObject(index.familiesBySource, (bySource) => {
+            return mapObject(bySource, (families) => {
+                return families.map((family) => {
+                    return family.map((layer) => layer.id);
+                });
+            });
+        });
+
+        expect(ids).toEqual({
+            'A': {
+                'foo': [['0', '1'], ['2']],
+                'bar': [['3']]
+            },
+            'B': {
+                'foo': [['4']]
+            },
+            'geojson': {
+                '_geojsonTileLayer': [['5']]
+            },
+            '': {
+                '_geojsonTileLayer': [['6']]
+            }
+        });
+
+    });
+
+    test('StyleLayerIndex groups families even if layout key order differs', () => {
+        const index = new StyleLayerIndex([
+            {id: '0', type: 'line', 'source': 'source', 'source-layer': 'layer',
+                'layout': {'line-cap': 'butt', 'line-join': 'miter'}},
+            {id: '1', type: 'line', 'source': 'source', 'source-layer': 'layer',
+                'layout': {'line-join': 'miter', 'line-cap': 'butt'}}
+        ]);
+
+        const families = index.familiesBySource['source']['layer'];
+        expect(families[0]).toHaveLength(2);
+
+    });
+});

package/src/style/style_layer_index.ts

@@ -0,0 +1,78 @@
+import {StyleLayer} from './style_layer';
+import {createStyleLayer} from './create_style_layer';
+
+import {featureFilter, groupByLayout} from '@maplibre/maplibre-gl-style-spec';
+
+import type {TypedStyleLayer} from './style_layer/typed_style_layer';
+import type {LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
+
+export type LayerConfigs = {[_: string]: LayerSpecification};
+export type Family<Layer extends TypedStyleLayer> = Array<Layer>;
+
+export class StyleLayerIndex {
+    familiesBySource: {
+        [source: string]: {
+            [sourceLayer: string]: Array<Family<any>>;
+        };
+    };
+    keyCache: {[source: string]: string};
+
+    _layerConfigs: LayerConfigs;
+    _layers: {[_: string]: StyleLayer};
+
+    constructor(layerConfigs?: Array<LayerSpecification> | null) {
+        this.keyCache = {};
+        if (layerConfigs) {
+            this.replace(layerConfigs);
+        }
+    }
+
+    replace(layerConfigs: Array<LayerSpecification>) {
+        this._layerConfigs = {};
+        this._layers = {};
+        this.update(layerConfigs, []);
+    }
+
+    update(layerConfigs: Array<LayerSpecification>, removedIds: Array<string>) {
+        for (const layerConfig of layerConfigs) {
+            this._layerConfigs[layerConfig.id] = layerConfig;
+
+            const layer = this._layers[layerConfig.id] = createStyleLayer(layerConfig);
+            layer._featureFilter = featureFilter(layer.filter);
+            if (this.keyCache[layerConfig.id])
+                delete this.keyCache[layerConfig.id];
+        }
+        for (const id of removedIds) {
+            delete this.keyCache[id];
+            delete this._layerConfigs[id];
+            delete this._layers[id];
+        }
+
+        this.familiesBySource = {};
+
+        const groups = groupByLayout(Object.values(this._layerConfigs), this.keyCache);
+
+        for (const layerConfigs of groups) {
+            const layers = layerConfigs.map((layerConfig) => this._layers[layerConfig.id]);
+
+            const layer = layers[0];
+            if (layer.visibility === 'none') {
+                continue;
+            }
+
+            const sourceId = layer.source || '';
+            let sourceGroup = this.familiesBySource[sourceId];
+            if (!sourceGroup) {
+                sourceGroup = this.familiesBySource[sourceId] = {};
+            }
+
+            const sourceLayerId = layer.sourceLayer || '_geojsonTileLayer';
+            let sourceLayerFamilies = sourceGroup[sourceLayerId];
+            if (!sourceLayerFamilies) {
+                sourceLayerFamilies = sourceGroup[sourceLayerId] = [];
+            }
+
+            sourceLayerFamilies.push(layers);
+        }
+    }
+}

package/src/style/validate_style.ts

@@ -0,0 +1,53 @@
+import {validateStyleMin} from '@maplibre/maplibre-gl-style-spec';
+import {ErrorEvent} from '../util/evented';
+
+import type {Evented} from '../util/evented';
+
+type ValidationError = {
+    message: string;
+    line: number;
+    identifier?: string;
+};
+
+export type Validator = (a: any) => ReadonlyArray<ValidationError>;
+
+type ValidateStyle = {
+    source: Validator;
+    sprite: Validator;
+    glyphs: Validator;
+    layer: Validator;
+    light: Validator;
+    sky: Validator;
+    terrain: Validator;
+    filter: Validator;
+    paintProperty: Validator;
+    layoutProperty: Validator;
+    (b: any, a?: any | null): ReadonlyArray<ValidationError>;
+};
+
+export const validateStyle = (validateStyleMin as unknown as ValidateStyle);
+
+export const validateSource = validateStyle.source;
+export const validateLight = validateStyle.light;
+export const validateSky = validateStyle.sky;
+export const validateTerrain = validateStyle.terrain;
+export const validateFilter = validateStyle.filter;
+export const validatePaintProperty = validateStyle.paintProperty;
+export const validateLayoutProperty = validateStyle.layoutProperty;
+
+export function emitValidationErrors(
+    emitter: Evented,
+    errors?: ReadonlyArray<{
+        message: string;
+        identifier?: string;
+    }> | null
+): boolean {
+    let hasErrors = false;
+    if (errors && errors.length) {
+        for (const error of errors) {
+            emitter.fire(new ErrorEvent(new Error(error.message)));
+            hasErrors = true;
+        }
+    }
+    return hasErrors;
+}

package/src/style/zoom_history.ts

@@ -0,0 +1,40 @@
+export class ZoomHistory {
+    lastZoom: number;
+    lastFloorZoom: number;
+    lastIntegerZoom: number;
+    lastIntegerZoomTime: number;
+    first: boolean;
+
+    constructor() {
+        this.first = true;
+    }
+
+    update(z: number, now: number) {
+        const floorZ = Math.floor(z);
+
+        if (this.first) {
+            this.first = false;
+            this.lastIntegerZoom = floorZ;
+            this.lastIntegerZoomTime = 0;
+            this.lastZoom = z;
+            this.lastFloorZoom = floorZ;
+            return true;
+        }
+
+        if (this.lastFloorZoom > floorZ) {
+            this.lastIntegerZoom = floorZ + 1;
+            this.lastIntegerZoomTime = now;
+        } else if (this.lastFloorZoom < floorZ) {
+            this.lastIntegerZoom = floorZ;
+            this.lastIntegerZoomTime = now;
+        }
+
+        if (z !== this.lastZoom) {
+            this.lastZoom = z;
+            this.lastFloorZoom = floorZ;
+            return true;
+        }
+
+        return false;
+    }
+}

package/src/symbol/anchor.test.ts

@@ -0,0 +1,14 @@
+import {Anchor} from './anchor';
+
+describe('Anchor', () => {
+    test('#constructor', () => {
+        expect(new Anchor(0, 0, 0) instanceof Anchor).toBeTruthy();
+        expect(new Anchor(0, 0, 0, 0) instanceof Anchor).toBeTruthy();
+    });
+    test('#clone', () => {
+        const a = new Anchor(1, 2, 3);
+        const b = new Anchor(1, 2, 3);
+        expect(a.clone()).toEqual(b);
+        expect(a.clone()).toEqual(a);
+    });
+});

package/src/symbol/anchor.ts

@@ -0,0 +1,22 @@
+import Point from '@mapbox/point-geometry';
+
+import {register} from '../util/web_worker_transfer';
+
+export class Anchor extends Point {
+    angle: any;
+    segment?: number;
+
+    constructor(x: number, y: number, angle: number, segment?: number) {
+        super(x, y);
+        this.angle = angle;
+        if (segment !== undefined) {
+            this.segment = segment;
+        }
+    }
+
+    clone() {
+        return new Anchor(this.x, this.y, this.angle, this.segment);
+    }
+}
+
+register('Anchor', Anchor);

package/src/symbol/check_max_angle.test.ts

@@ -0,0 +1,54 @@
+import Point from '@mapbox/point-geometry';
+import {checkMaxAngle} from './check_max_angle';
+import {Anchor} from './anchor';
+
+describe('checkMaxAngle', () => {
+    test('line with no sharp angles', () => {
+        const line = [new Point(0, 0), new Point(20, -1), new Point(40, 1), new Point(60, 0)];
+        const anchor = new Anchor(30, 0, 0, 1);
+        expect(checkMaxAngle(line, anchor, 25, 20, Math.PI / 8)).toBeTruthy();
+        expect(checkMaxAngle(line, anchor, 25, 20, 0)).toBeFalsy();
+    });
+
+    test('one sharp corner', () => {
+        const line = [new Point(0, 0), new Point(0, 10), new Point(10, 10)];
+        const anchor = new Anchor(0, 10, 0, 1);
+        expect(checkMaxAngle(line, anchor, 10, 5, Math.PI / 2)).toBeTruthy();
+        expect(checkMaxAngle(line, anchor, 10, 5, Math.PI / 2 - 0.01)).toBeFalsy();
+    });
+
+    test('many small corners close together', () => {
+        const line = [
+            new Point(0, 0), new Point(10, 0), new Point(11, 0.1),
+            new Point(12, 0.3), new Point(13, 0.6), new Point(14, 1), new Point(13.9, 10)];
+        const anchor = new Anchor(12, 0.3, 0, 3);
+        expect(checkMaxAngle(line, anchor, 10, 5, Math.PI / 2)).toBeFalsy();
+        expect(checkMaxAngle(line, anchor, 10, 2, Math.PI / 2)).toBeTruthy();
+    });
+
+    test('label appears on the first line segment', () => {
+        const line = [new Point(0, 0), new Point(100, 0)];
+        const anchor = new Anchor(50, 0, 0, 0);
+        expect(checkMaxAngle(line, anchor, 30, 5, Math.PI / 2)).toBeTruthy();
+    });
+
+    test('not enough space before the end of the line', () => {
+        const line = [new Point(0, 0), new Point(10, 0), new Point(20, 0), new Point(30, 0)];
+        const anchor = new Anchor(5, 0, 0, 0);
+        expect(checkMaxAngle(line, anchor, 11, 5, Math.PI)).toBeFalsy();
+        expect(checkMaxAngle(line, anchor, 10, 5, Math.PI)).toBeTruthy();
+    });
+
+    test('not enough space after the beginning of the line', () => {
+        const line = [new Point(0, 0), new Point(10, 0), new Point(20, 0), new Point(30, 0)];
+        const anchor = new Anchor(25, 0, 0, 2);
+        expect(checkMaxAngle(line, anchor, 11, 5, Math.PI)).toBeFalsy();
+        expect(checkMaxAngle(line, anchor, 10, 5, Math.PI)).toBeTruthy();
+    });
+
+    test('one segment and label length is 0', () => {
+        const line = [new Point(0, 0), new Point(10, 0)];
+        const anchor = new Anchor(5, 0, 0, 0);
+        expect(checkMaxAngle(line, anchor, 0, 5, Math.PI)).toBeTruthy();
+    });
+});

package/src/symbol/check_max_angle.ts

@@ -0,0 +1,76 @@
+import type Point from '@mapbox/point-geometry';
+import type {Anchor} from './anchor';
+
+/**
+ * Labels placed around really sharp angles aren't readable. Check if any
+ * part of the potential label has a combined angle that is too big.
+ *
+ * @param line - The line to check
+ * @param anchor - The point on the line around which the label is anchored.
+ * @param labelLength - The length of the label in geometry units.
+ * @param windowSize - The check fails if the combined angles within a part of the line that is `windowSize` long is too big.
+ * @param maxAngle - The maximum combined angle that any window along the label is allowed to have.
+ *
+ * @returns whether the label should be placed
+ */
+export function checkMaxAngle(line: Array<Point>, anchor: Anchor, labelLength: number, windowSize: number, maxAngle: number) {
+
+    // horizontal labels and labels with length 0 always pass
+    if (anchor.segment === undefined || labelLength === 0) return true;
+
+    let p = anchor;
+    let index = anchor.segment + 1;
+    let anchorDistance = 0;
+
+    // move backwards along the line to the first segment the label appears on
+    while (anchorDistance > -labelLength / 2) {
+        index--;
+
+        // there isn't enough room for the label after the beginning of the line
+        if (index < 0) return false;
+
+        anchorDistance -= line[index].dist(p);
+        p = line[index];
+    }
+
+    anchorDistance += line[index].dist(line[index + 1]);
+    index++;
+
+    // store recent corners and their total angle difference
+    const recentCorners = [];
+    let recentAngleDelta = 0;
+
+    // move forwards by the length of the label and check angles along the way
+    while (anchorDistance < labelLength / 2) {
+        const prev = line[index - 1];
+        const current = line[index];
+        const next = line[index + 1];
+
+        // there isn't enough room for the label before the end of the line
+        if (!next) return false;
+
+        let angleDelta = prev.angleTo(current) - current.angleTo(next);
+        // restrict angle to -pi..pi range
+        angleDelta = Math.abs(((angleDelta + 3 * Math.PI) % (Math.PI * 2)) - Math.PI);
+
+        recentCorners.push({
+            distance: anchorDistance,
+            angleDelta
+        });
+        recentAngleDelta += angleDelta;
+
+        // remove corners that are far enough away from the list of recent anchors
+        while (anchorDistance - recentCorners[0].distance > windowSize) {
+            recentAngleDelta -= recentCorners.shift().angleDelta;
+        }
+
+        // the sum of angles within the window area exceeds the maximum allowed value. check fails.
+        if (recentAngleDelta > maxAngle) return false;
+
+        index++;
+        anchorDistance += current.dist(next);
+    }
+
+    // no part of the line had an angle greater than the maximum allowed. check passes.
+    return true;
+}

package/src/symbol/clip_line.test.ts

@@ -0,0 +1,154 @@
+import Point from '@mapbox/point-geometry';
+import {clipLine} from './clip_line';
+
+describe('clipLines', () => {
+
+    const minX = -300;
+    const maxX = 300;
+    const minY = -200;
+    const maxY = 200;
+
+    const clipLineTest = (lines) => {
+        return clipLine(lines, minX, minY, maxX, maxY);
+    };
+
+    test('Single line fully inside', () => {
+        const line = [
+            new Point(-100, -100),
+            new Point(-40, -100),
+            new Point(200, 0),
+            new Point(-80, 195)
+        ];
+
+        expect(clipLineTest([line])).toEqual([line]);
+    });
+
+    test('Multiline fully inside', () => {
+        const line0 = [
+            new Point(-250, -150),
+            new Point(-250, 150),
+            new Point(-10, 150),
+            new Point(-10, -150)
+        ];
+
+        const line1 = [
+            new Point(250, -150),
+            new Point(250, 150),
+            new Point(10, 150),
+            new Point(10, -150)
+        ];
+
+        const lines = [line0, line1];
+
+        expect(clipLineTest(lines)).toEqual(lines);
+    });
+
+    test('Lines fully outside', () => {
+        const line0 = [
+            new Point(-400, -300),
+            new Point(-350, 0),
+            new Point(-300, 300)
+        ];
+
+        const line1 = [
+            new Point(1000, 210),
+            new Point(10000, 500)
+        ];
+
+        expect(clipLineTest([line0, line1])).toEqual([]);
+    });
+
+    test('Intersect with single border', () => {
+        const line0 = [
+            new Point(-400, 0),
+            new Point(0, 0)
+        ];
+
+        const result0 = [
+            new Point(minX, 0),
+            new Point(0, 0)
+        ];
+
+        const line1 = [
+            new Point(250, -50),
+            new Point(350, 50)
+        ];
+
+        const result1 = [
+            new Point(250, -50),
+            new Point(maxX, 0)
+        ];
+
+        expect(clipLineTest([line0, line1])).toEqual([result0, result1]);
+    });
+
+    test('Intersect with multiple borders', () => {
+        const line0 = [
+            new Point(-350, -100),
+            new Point(-200, -250)
+        ];
+
+        const line1 = [
+            new Point(-100, 250),
+            new Point(0, 150),
+            new Point(100, 250)
+        ];
+
+        const result0 = [
+            new Point(minX, -150),
+            new Point(-250, minY)
+        ];
+
+        const result1 = [
+            new Point(-50, maxY),
+            new Point(0, 150),
+            new Point(50, maxY)
+        ];
+
+        expect(clipLineTest([line0, line1])).toEqual([result0, result1]);
+    });
+
+    test('Single line can be split into multiple segments', () => {
+        const line = [
+            new Point(-80, 150),
+            new Point(-80, 350),
+            new Point(120, 1000),
+            new Point(120, 0)
+        ];
+
+        const result0 = [
+            new Point(-80, 150),
+            new Point(-80, maxY),
+        ];
+
+        const result1 = [
+            new Point(120, maxY),
+            new Point(120, 0),
+        ];
+
+        expect(clipLineTest([line])).toEqual([result0, result1]);
+    });
+
+    test('Non-clipped points are bit exact', () => {
+        const line = [
+            new Point(-500, -200),
+            new Point(131.2356763, 0.956732)
+        ];
+
+        expect(clipLineTest([line])[1]).toEqual(line[0][1]);
+    });
+
+    test('Clipped points are rounded to the nearest integer', () => {
+        const line = [
+            new Point(310, 2.9),
+            new Point(290, 2.5)
+        ];
+
+        const result = [
+            new Point(maxX, 3),
+            new Point(290, 2.5)
+        ];
+
+        expect(clipLineTest([line])).toEqual([result]);
+    });
+});

package/src/symbol/clip_line.ts

@@ -0,0 +1,66 @@
+import Point from '@mapbox/point-geometry';
+
+/**
+ * Returns the part of a multiline that intersects with the provided rectangular box.
+ *
+ * @param lines - the lines to check
+ * @param x1 - the left edge of the box
+ * @param y1 - the top edge of the box
+ * @param x2 - the right edge of the box
+ * @param y2 - the bottom edge of the box
+ * @returns lines
+ */
+export function clipLine(lines: Array<Array<Point>>, x1: number, y1: number, x2: number, y2: number): Array<Array<Point>> {
+    const clippedLines = [];
+
+    for (let l = 0; l < lines.length; l++) {
+        const line = lines[l];
+        let clippedLine;
+
+        for (let i = 0; i < line.length - 1; i++) {
+            let p0 = line[i];
+            let p1 = line[i + 1];
+
+            if (p0.x < x1 && p1.x < x1) {
+                continue;
+            } else if (p0.x < x1) {
+                p0 = new Point(x1, p0.y + (p1.y - p0.y) * ((x1 - p0.x) / (p1.x - p0.x)))._round();
+            } else if (p1.x < x1) {
+                p1 = new Point(x1, p0.y + (p1.y - p0.y) * ((x1 - p0.x) / (p1.x - p0.x)))._round();
+            }
+
+            if (p0.y < y1 && p1.y < y1) {
+                continue;
+            } else if (p0.y < y1) {
+                p0 = new Point(p0.x + (p1.x - p0.x) * ((y1 - p0.y) / (p1.y - p0.y)), y1)._round();
+            } else if (p1.y < y1) {
+                p1 = new Point(p0.x + (p1.x - p0.x) * ((y1 - p0.y) / (p1.y - p0.y)), y1)._round();
+            }
+
+            if (p0.x >= x2 && p1.x >= x2) {
+                continue;
+            } else if (p0.x >= x2) {
+                p0 = new Point(x2, p0.y + (p1.y - p0.y) * ((x2 - p0.x) / (p1.x - p0.x)))._round();
+            } else if (p1.x >= x2) {
+                p1 = new Point(x2, p0.y + (p1.y - p0.y) * ((x2 - p0.x) / (p1.x - p0.x)))._round();
+            }
+
+            if (p0.y >= y2 && p1.y >= y2) {
+                continue;
+            } else if (p0.y >= y2) {
+                p0 = new Point(p0.x + (p1.x - p0.x) * ((y2 - p0.y) / (p1.y - p0.y)), y2)._round();
+            } else if (p1.y >= y2) {
+                p1 = new Point(p0.x + (p1.x - p0.x) * ((y2 - p0.y) / (p1.y - p0.y)), y2)._round();
+            }
+
+            if (!clippedLine || !p0.equals(clippedLine[clippedLine.length - 1])) {
+                clippedLine = [p0];
+                clippedLines.push(clippedLine);
+            }
+
+            clippedLine.push(p1);
+        }
+    }
+
+    return clippedLines;
+}