@scoova/mgl 1.0.0

package/src/symbol/get_anchors.test.ts

@@ -0,0 +1,113 @@
+import Point from '@mapbox/point-geometry';
+import {getAnchors, getCenterAnchor} from './get_anchors';
+import {PositionedIcon, Shaping} from './shaping';
+
+const TILE_EXTENT = 4096;
+
+describe('getAnchors', () => {
+    const nonContinuedLine = [];
+    for (let i = 1; i < 11; i++) {
+        nonContinuedLine.push(new Point(1, i));
+    }
+
+    const continuedLine = [];
+    for (let j = 0; j < 10; j++) {
+        continuedLine.push(new Point(1, j));
+    }
+
+    const smallSpacing = 2;
+    const bigSpacing = 3;
+
+    const shapedText = {left: -1, right: 1, top: -0.5, bottom: 0.5} as Shaping;
+    const shapedIcon = {left: -0.5, right: 0.5, top: -0.25, bottom: 0.25} as PositionedIcon;
+    const labelLength = Math.max(
+        shapedText ? shapedText.right - shapedText.left : 0,
+        shapedIcon ? shapedIcon.right - shapedIcon.left : 0);
+
+    const glyphSize = 0.1;
+
+    test('non-continued line with short labels', () => {
+        const anchors = getAnchors(nonContinuedLine, bigSpacing, Math.PI, shapedText, shapedIcon, glyphSize, 1, 1, TILE_EXTENT);
+
+        expect(anchors).toEqual([
+            {x: 1, y: 2, angle: 1.5707963267948966, segment: 1},
+            {x: 1, y: 5, angle: 1.5707963267948966, segment: 4},
+            {x: 1, y: 8, angle: 1.5707963267948966, segment: 7}]);
+
+        expect(
+            labelLength / 2 + 1 <= anchors[0].y && anchors[0].y < labelLength / 2 + 3 * glyphSize + 1
+        ).toBeTruthy();
+
+    });
+
+    test('non-continued line with long labels', () => {
+        const anchors = getAnchors(nonContinuedLine, smallSpacing, Math.PI, shapedText, shapedIcon, glyphSize, 1, 1, TILE_EXTENT);
+
+        expect(anchors).toEqual([
+            {x: 1, y: 2, angle: 1.5707963267948966, segment: 1},
+            {x: 1, y: 5, angle: 1.5707963267948966, segment: 3},
+            {x: 1, y: 7, angle: 1.5707963267948966, segment: 6}]);
+
+    });
+
+    test('continued line with short labels', () => {
+        const anchors = getAnchors(continuedLine, bigSpacing, Math.PI, shapedText, shapedIcon, glyphSize, 1, 1, TILE_EXTENT);
+
+        expect(anchors).toEqual([
+            {x: 1, y: 2, angle: 1.5707963267948966, segment: 1},
+            {x: 1, y: 5, angle: 1.5707963267948966, segment: 4},
+            {x: 1, y: 8, angle: 1.5707963267948966, segment: 7}]);
+
+    });
+
+    test('continued line with long labels', () => {
+        const anchors = getAnchors(continuedLine, smallSpacing, Math.PI, shapedText, shapedIcon, glyphSize, 1, 1, TILE_EXTENT);
+
+        expect(anchors).toEqual([
+            {x: 1, y: 1, angle: 1.5707963267948966, segment: 1},
+            {x: 1, y: 4, angle: 1.5707963267948966, segment: 3},
+            {x: 1, y: 6, angle: 1.5707963267948966, segment: 6}]);
+
+    });
+
+    test('overscaled anchors contain all anchors in parent', () => {
+        const anchors = getAnchors(nonContinuedLine, bigSpacing, Math.PI, shapedText, shapedIcon, glyphSize, 1, 1, TILE_EXTENT);
+        const childAnchors = getAnchors(nonContinuedLine, bigSpacing / 2, Math.PI, shapedText, shapedIcon, glyphSize, 0.5, 2, TILE_EXTENT);
+        for (let i = 0; i < anchors.length; i++) {
+            const anchor = anchors[i];
+            let found = false;
+            for (let k = 0; k < childAnchors.length; k++) {
+                if (anchor.equals(childAnchors[k])) {
+                    found = true;
+                    break;
+                }
+            }
+            expect(found).toBeTruthy();
+        }
+    });
+
+    test('use middle point as a fallback position for short non-continued lines', () => {
+        const line = [new Point(1, 1), new Point(1, 3.1)];
+        const anchors = getAnchors(line, 2, Math.PI, shapedText, shapedIcon, glyphSize, 1, 1, TILE_EXTENT);
+        expect(anchors).toEqual([
+            {x: 1, y: 2, angle: 1.5707963267948966, segment: 0}]);
+    });
+
+    test('getCenterAnchor', () => {
+        const line = [new Point(1, 1), new Point(1, 3.1), new Point(3, 6), new Point(4, 7)];
+        const anchor = getCenterAnchor(line, Math.PI, shapedText, shapedIcon, glyphSize, 1);
+        expect(anchor).toEqual({x: 2, y: 4, angle: 0.9670469933974603, segment: 1});
+    });
+
+    test('getCenterAnchor with center outside tile bounds', () => {
+        const line = [new Point(-10, -10), new Point(5, 5)];
+        const anchor = getCenterAnchor(line, Math.PI, shapedText, shapedIcon, glyphSize, 1);
+        expect(anchor).toEqual({x: -2, y: -2, angle: 0.7853981633974483, segment: 0});
+    });
+
+    test('getCenterAnchor failing maxAngle test', () => {
+        const line = [new Point(1, 1), new Point(1, 3), new Point(3, 3)];
+        const anchor = getCenterAnchor(line, Math.PI / 4, shapedText, shapedIcon, glyphSize, 1);
+        expect(anchor).toBeFalsy();
+    });
+});

package/src/symbol/get_anchors.ts

@@ -0,0 +1,167 @@
+import {interpolates} from '@maplibre/maplibre-gl-style-spec';
+
+import {Anchor} from '../symbol/anchor';
+import {checkMaxAngle} from './check_max_angle';
+
+import type Point from '@mapbox/point-geometry';
+import type {Shaping, PositionedIcon} from './shaping';
+
+export {getAnchors, getCenterAnchor};
+
+function getLineLength(line: Array<Point>): number {
+    let lineLength = 0;
+    for (let k = 0; k < line.length - 1; k++) {
+        lineLength += line[k].dist(line[k + 1]);
+    }
+    return lineLength;
+}
+
+function getAngleWindowSize(
+    shapedText: Shaping,
+    glyphSize: number,
+    boxScale: number
+): number {
+    return shapedText ?
+        3 / 5 * glyphSize * boxScale :
+        0;
+}
+
+function getShapedLabelLength(shapedText?: Shaping | null, shapedIcon?: PositionedIcon | null): number {
+    return Math.max(
+        shapedText ? shapedText.right - shapedText.left : 0,
+        shapedIcon ? shapedIcon.right - shapedIcon.left : 0);
+}
+
+function getCenterAnchor(line: Array<Point>,
+    maxAngle: number,
+    shapedText: Shaping,
+    shapedIcon: PositionedIcon,
+    glyphSize: number,
+    boxScale: number) {
+    const angleWindowSize = getAngleWindowSize(shapedText, glyphSize, boxScale);
+    const labelLength = getShapedLabelLength(shapedText, shapedIcon) * boxScale;
+
+    let prevDistance = 0;
+    const centerDistance = getLineLength(line) / 2;
+
+    for (let i = 0; i < line.length - 1; i++) {
+
+        const a = line[i],
+            b = line[i + 1];
+
+        const segmentDistance = a.dist(b);
+
+        if (prevDistance + segmentDistance > centerDistance) {
+            // The center is on this segment
+            const t = (centerDistance - prevDistance) / segmentDistance,
+                x = interpolates.number(a.x, b.x, t),
+                y = interpolates.number(a.y, b.y, t);
+
+            const anchor = new Anchor(x, y, b.angleTo(a), i);
+            anchor._round();
+            if (!angleWindowSize || checkMaxAngle(line, anchor, labelLength, angleWindowSize, maxAngle)) {
+                return anchor;
+            } else {
+                return;
+            }
+        }
+
+        prevDistance += segmentDistance;
+    }
+}
+
+function getAnchors(line: Array<Point>,
+    spacing: number,
+    maxAngle: number,
+    shapedText: Shaping,
+    shapedIcon: PositionedIcon,
+    glyphSize: number,
+    boxScale: number,
+    overscaling: number,
+    tileExtent: number) {
+
+    // Resample a line to get anchor points for labels and check that each
+    // potential label passes text-max-angle check and has enough room to fit
+    // on the line.
+
+    const angleWindowSize = getAngleWindowSize(shapedText, glyphSize, boxScale);
+    const shapedLabelLength = getShapedLabelLength(shapedText, shapedIcon);
+    const labelLength = shapedLabelLength * boxScale;
+
+    // Is the line continued from outside the tile boundary?
+    const isLineContinued = line[0].x === 0 || line[0].x === tileExtent || line[0].y === 0 || line[0].y === tileExtent;
+
+    // Is the label long, relative to the spacing?
+    // If so, adjust the spacing so there is always a minimum space of `spacing / 4` between label edges.
+    if (spacing - labelLength < spacing / 4) {
+        spacing = labelLength + spacing / 4;
+    }
+
+    // Offset the first anchor by:
+    // Either half the label length plus a fixed extra offset if the line is not continued
+    // Or half the spacing if the line is continued.
+
+    // For non-continued lines, add a bit of fixed extra offset to avoid collisions at T intersections.
+    const fixedExtraOffset = glyphSize * 2;
+
+    const offset = !isLineContinued ?
+        ((shapedLabelLength / 2 + fixedExtraOffset) * boxScale * overscaling) % spacing :
+        (spacing / 2 * overscaling) % spacing;
+
+    return resample(line, offset, spacing, angleWindowSize, maxAngle, labelLength, isLineContinued, false, tileExtent);
+}
+
+function resample(line, offset, spacing, angleWindowSize, maxAngle, labelLength, isLineContinued, placeAtMiddle, tileExtent) {
+
+    const halfLabelLength = labelLength / 2;
+    const lineLength = getLineLength(line);
+
+    let distance = 0,
+        markedDistance = offset - spacing;
+
+    let anchors = [];
+
+    for (let i = 0; i < line.length - 1; i++) {
+
+        const a = line[i],
+            b = line[i + 1];
+
+        const segmentDist = a.dist(b),
+            angle = b.angleTo(a);
+
+        while (markedDistance + spacing < distance + segmentDist) {
+            markedDistance += spacing;
+
+            const t = (markedDistance - distance) / segmentDist,
+                x = interpolates.number(a.x, b.x, t),
+                y = interpolates.number(a.y, b.y, t);
+
+            // Check that the point is within the tile boundaries and that
+            // the label would fit before the beginning and end of the line
+            // if placed at this point.
+            if (x >= 0 && x < tileExtent && y >= 0 && y < tileExtent &&
+                    markedDistance - halfLabelLength >= 0 &&
+                    markedDistance + halfLabelLength <= lineLength) {
+                const anchor = new Anchor(x, y, angle, i);
+                anchor._round();
+
+                if (!angleWindowSize || checkMaxAngle(line, anchor, labelLength, angleWindowSize, maxAngle)) {
+                    anchors.push(anchor);
+                }
+            }
+        }
+
+        distance += segmentDist;
+    }
+
+    if (!placeAtMiddle && !anchors.length && !isLineContinued) {
+        // The first attempt at finding anchors at which labels can be placed failed.
+        // Try again, but this time just try placing one anchor at the middle of the line.
+        // This has the most effect for short lines in overscaled tiles, since the
+        // initial offset used in overscaled tiles is calculated to align labels with positions in
+        // parent tiles instead of placing the label as close to the beginning as possible.
+        anchors = resample(line, distance / 2, spacing, angleWindowSize, maxAngle, labelLength, isLineContinued, true, tileExtent);
+    }
+
+    return anchors;
+}

package/src/symbol/grid_index.test.ts

@@ -0,0 +1,75 @@
+import {GridIndex} from './grid_index';
+import type {GridKey} from './grid_index';
+
+describe('GridIndex', () => {
+
+    test('indexes features', () => {
+        const grid = new GridIndex(100, 100, 10);
+        grid.insert(0 as GridKey, 4, 10, 6, 30);
+        grid.insert(1 as GridKey, 4, 10, 30, 12);
+        grid.insert(2 as GridKey, -10, 30, 5, 35);
+
+        expect(grid.query(4, 10, 5, 11).map(x => x.key).sort()).toEqual([0, 1]);
+        expect(grid.query(24, 10, 25, 11).map(x => x.key).sort()).toEqual([1]);
+        expect(grid.query(40, 40, 100, 100).map(x => x.key)).toEqual([]);
+        expect(grid.query(-6, 0, 3, 100).map(x => x.key)).toEqual([2]);
+        expect(
+            grid.query(-Infinity, -Infinity, Infinity, Infinity).map(x => x.key).sort()
+        ).toEqual([0, 1, 2]);
+    });
+
+    test('returns multiple copies of a key if multiple boxes were inserted with the same key', () => {
+        const grid = new GridIndex(100, 100, 10);
+        const key = 123 as GridKey;
+        grid.insert(key, 3, 3, 4, 4);
+        grid.insert(key, 13, 13, 14, 14);
+        grid.insert(key, 23, 23, 24, 24);
+        expect(grid.query(0, 0, 30, 30).map(x => x.key)).toEqual([key, key, key]);
+    });
+
+    test('circle-circle intersection', () => {
+        const grid = new GridIndex(100, 100, 10);
+        grid.insertCircle(0 as GridKey, 50, 50, 10);
+        grid.insertCircle(1 as GridKey, 60, 60, 15);
+        grid.insertCircle(2 as GridKey, -10, 110, 20);
+
+        expect(grid.hitTestCircle(55, 55, 2, 'never')).toBeTruthy();
+        expect(grid.hitTestCircle(10, 10, 10, 'never')).toBeFalsy();
+        expect(grid.hitTestCircle(0, 100, 10, 'never')).toBeTruthy();
+        expect(grid.hitTestCircle(80, 60, 10, 'never')).toBeTruthy();
+    });
+
+    test('circle-rectangle intersection', () => {
+        const grid = new GridIndex(100, 100, 10);
+        grid.insertCircle(0 as GridKey, 50, 50, 10);
+        grid.insertCircle(1 as GridKey, 60, 60, 15);
+        grid.insertCircle(2 as GridKey, -10, 110, 20);
+
+        expect(grid.query(45, 45, 55, 55).map(x => x.key)).toEqual([0, 1]);
+        expect(grid.query(0, 0, 30, 30).map(x => x.key)).toEqual([]);
+        expect(grid.query(0, 80, 20, 100).map(x => x.key)).toEqual([2]);
+    });
+
+    test('overlap mode', () => {
+        const grid = new GridIndex(100, 100, 10);
+        grid.insert({overlapMode: 'never'}, 10, 10, 20, 20);
+        grid.insert({overlapMode: 'always'}, 30, 10, 40, 20);
+        grid.insert({overlapMode: 'cooperative'}, 50, 10, 60, 20);
+
+        // 'never' can't overlap anything
+        expect(grid.hitTest(15, 15, 25, 25, 'never')).toBeTruthy();
+        expect(grid.hitTest(35, 15, 45, 25, 'never')).toBeTruthy();
+        expect(grid.hitTest(55, 15, 65, 25, 'never')).toBeTruthy();
+
+        // 'always' can overlap everything
+        expect(grid.hitTest(15, 15, 25, 25, 'always')).toBeFalsy();
+        expect(grid.hitTest(35, 15, 45, 25, 'always')).toBeFalsy();
+        expect(grid.hitTest(55, 15, 65, 25, 'always')).toBeFalsy();
+
+        // 'cooperative' can overlap 'always' and 'cooperative'
+        expect(grid.hitTest(15, 15, 25, 25, 'cooperative')).toBeTruthy();
+        expect(grid.hitTest(35, 15, 45, 25, 'cooperative')).toBeFalsy();
+        expect(grid.hitTest(55, 15, 65, 25, 'cooperative')).toBeFalsy();
+    });
+
+});