12413830020

Committed 19 Dec 2024 01:39PM UTC coverage: 86.968% (-0.09%) from 87.055%

Build # 12413830020

Build Type

Pull #2469

github

Committed by

web-flow

Commit Message

Merge 18cc3eeda into b81e8e9ae

Pull Request Pull Request #2469: MapBox VectorTile: bug fixes using an official MapBox stream

Run Details

2783 of 3702 branches covered (75.18%)

Branch coverage included in aggregate %.

120 of 167 new or added lines in 7 files covered. (71.86%)

5 existing lines in 2 files now uncovered.

25044 of 28295 relevant lines covered (88.51%)

988.93 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

86.8

/src/Renderer/Label2DRenderer.js

import * as THREE from 'three';
import GlobeLayer from 'Core/Prefab/Globe/GlobeLayer';

function isIntersectedOrOverlaped(a, b) {
    return !(a.left > b.right || a.right < b.left
        || a.top > b.bottom || a.bottom < b.top);
}

const frustum = new THREE.Frustum();

// A grid to manage labels on the screen.
export class ScreenGrid {
    constructor(x = 12, y = 10, width, height) {
        this.x = x;
        this.y = y;

        this.grid = [];
        this.visible = [];

        this.resize();
        this.reset();

        this.width = width;
        this.height = height;
    }

    // Reset each cell and hidden and visible.
    reset() {
        for (let i = 0; i < this.x; i++) {
            for (let j = 0; j < this.y; j++) {
                // Splice is prefered to creating a new array, in term of memory
                this.grid[i][j].splice(0, this.grid[i][j].length);
            }
        }

        this.visible = [];
    }

    // Add rows if needed — but don't delete anything else. Columns are taken
    // care in reset().
    resize() {
        for (let i = 0; i < this.x; i++) {
            if (!this.grid[i]) {
                this.grid[i] = [];
            }

            for (let j = 0; j < this.y; j++) {
                if (!this.grid[i][j]) {
                    this.grid[i][j] = [];
                }
            }
        }
    }

    // Insert a label using its boundaries. It is either added to hidden or
    // visible, given the result. The grid is populated with true for every
    // filled cell.
    insert(obj) {
        const minx = Math.max(0, Math.floor(obj.boundaries.left / this.width * this.x));
        const maxx = Math.min(this.x - 1, Math.floor(obj.boundaries.right / this.width * this.x));
        const miny = Math.max(0, Math.floor(obj.boundaries.top / this.height * this.y));
        const maxy = Math.min(this.y - 1, Math.floor(obj.boundaries.bottom / this.height * this.y));

        for (let i = minx; i <= maxx; i++) {
            for (let j = miny; j <= maxy; j++) {
                if (this.grid[i][j].length > 0) {
                    if (this.grid[i][j].some(l => isIntersectedOrOverlaped(l.boundaries, obj.boundaries))) {
                        obj.visible = false;
                        return false;
                    }
                }
            }
        }

        for (let i = minx; i <= maxx; i++) {
            for (let j = miny; j <= maxy; j++) {
                this.grid[i][j].push(obj);
            }
        }

        return true;
    }
}

const worldPosition = new THREE.Vector3();

/**
 * This renderer is inspired by the
 * [`THREE.CSS2DRenderer`](https://threejs.org/docs/#examples/en/renderers/CSS2DRenderer).
 * It is instanciated in `c3DEngine`, as another renderer to handles Labels.
 */
class Label2DRenderer {
    constructor() {
        this.domElement = document.createElement('div');
        this.domElement.style.overflow = 'hidden';
        this.domElement.style.position = 'absolute';
        this.domElement.style.top = '0';
        this.domElement.style.height = '100%';
        this.domElement.style.width = '100%';
        this.domElement.style.zIndex = 1;

        // Used to destroy labels that are not added to the DOM
        this.garbage = document.createElement('div');
        this.garbage.style.display = 'none';
        this.domElement.appendChild(this.garbage);

        this.halfWidth = 0;
        this.halfHeight = 0;

        this.grid = new ScreenGrid();

        this.infoTileLayer = undefined;
    }

    setSize(width, height) {
        this.domElement.style.width = `${width}`;
        this.domElement.style.height = `${height}`;

        this.halfWidth = width / 2;
        this.halfHeight = height / 2;

        this.grid.width = width;
        this.grid.height = height;
        this.grid.x = Math.ceil(width / 20);
        this.grid.y = Math.ceil(height / 20);

        this.grid.resize();
    }

    registerLayer(layer) {
        this.domElement.appendChild(layer.domElement.dom);
    }

    render(scene, camera) {
        const labelLayers = this.infoTileLayer && this.infoTileLayer.layer.attachedLayers.filter(l => l.isLabelLayer && l.visible);
        if (labelLayers.length == 0) { return; }
        this.grid.reset();

        // set camera frustum
        frustum.setFromProjectionMatrix(camera.projectionMatrix);

        labelLayers.forEach((labelLayer) => {
            labelLayer.submittedLabelNodes.forEach(
                (labelsNode) => {
                    labelsNode.labels.forEach(
                        (label) => {
                            labelsNode.updatePosition(label);

                            this.culling(label, camera);
                        });
                    labelsNode.domElements.labels.show();
                    labelsNode.needsUpdate = false;
                });
        });

        // sort by order, then by visibility inside those subsets
        // https://docs.mapbox.com/help/troubleshooting/optimize-map-label-placement/#label-hierarchy
        this.grid.visible.sort((a, b) => {
            const r = b.order - a.order;
            if (r == 0) {
                if (!a.visible && b.visible) {
                    return 1;
                } else { return -1; }
            } else {
                return r;
            }
        });
        this.grid.visible.forEach((l) => {
            if (this.grid.insert(l)) {
                l.visible = true;
                l.updateCSSPosition();
            } else {
                l.visible = false;
            }
        });

        labelLayers.forEach((labelLayer) => {
            labelLayer.toHide.children.forEach(labelsNode => labelsNode.domElements?.labels.hide());
            labelLayer.toHide.clear();
        });
    }

    culling(label, camera) {
        label.getWorldPosition(worldPosition);
        // Check if the frustum contains tle label
        if (!frustum.containsPoint(worldPosition.applyMatrix4(camera.matrixWorldInverse)) ||
        // Check if globe horizon culls the label
        // Do some horizon culling (if possible) if the tiles level is small enough.
            label.horizonCullingPoint && GlobeLayer.horizonCulling(label.horizonCullingPoint)
            // Why do we might need this part ?
            // || // Check if content isn't present in visible labels
            // this.grid.visible.some((l) => {
            //     // TODO for icon without text filter by position
            //     const textContent = label.content.textContent;
            //     return textContent !== '' && l.content.textContent.toLowerCase() == textContent.toLowerCase();
            // })
        ) {
            label.visible = false;
        } else {
            // projecting world position label
            worldPosition.applyMatrix4(camera.projectionMatrix);

            label.updateProjectedPosition(worldPosition.x * this.halfWidth + this.halfWidth, -worldPosition.y * this.halfHeight + this.halfHeight);

            this.grid.visible.push(label);
        }
    }

    removeLabelDOM(label) {
        this.garbage.appendChild(label.content);
        this.garbage.innerHTML = '';
    }
}

export default Label2DRenderer;

1	import * as THREE from 'three';	1✔
2	import GlobeLayer from 'Core/Prefab/Globe/GlobeLayer';	1✔
3		1✔
4	function isIntersectedOrOverlaped(a, b) {	×
5	return !(a.left > b.right \|\| a.right < b.left	×
6	\|\| a.top > b.bottom \|\| a.bottom < b.top);	×
7	}	×
8		1✔
9	const frustum = new THREE.Frustum();	1✔
10		1✔
11	// A grid to manage labels on the screen.	1✔
12	export class ScreenGrid {	1✔
13	constructor(x = 12, y = 10, width, height) {	1!
14	this.x = x;	48✔
15	this.y = y;	48✔
16		48✔
17	this.grid = [];	48✔
18	this.visible = [];	48✔
19		48✔
20	this.resize();	48✔
21	this.reset();	48✔
22		48✔
23	this.width = width;	48✔
24	this.height = height;	48✔
25	}	48✔
26		1✔
27	// Reset each cell and hidden and visible.	1✔
28	reset() {	1✔
29	for (let i = 0; i < this.x; i++) {	50✔
30	for (let j = 0; j < this.y; j++) {	608✔
31	// Splice is prefered to creating a new array, in term of memory	6,180✔
32	this.grid[i][j].splice(0, this.grid[i][j].length);	6,180✔
33	}	6,180✔
34	}	608✔
35		50✔
36	this.visible = [];	50✔
37	}	50✔
38		1✔
39	// Add rows if needed — but don't delete anything else. Columns are taken	1✔
40	// care in reset().	1✔
41	resize() {	1✔
42	for (let i = 0; i < this.x; i++) {	93✔
43	if (!this.grid[i]) {	1,461✔
44	this.grid[i] = [];	928✔
45	}	928✔
46		1,461✔
47	for (let j = 0; j < this.y; j++) {	1,461✔
48	if (!this.grid[i][j]) {	19,010✔
49	this.grid[i][j] = [];	13,680✔
50	}	13,680✔
51	}	19,010✔
52	}	1,461✔
53	}	93✔
54		1✔
55	// Insert a label using its boundaries. It is either added to hidden or	1✔
56	// visible, given the result. The grid is populated with true for every	1✔
57	// filled cell.	1✔
58	insert(obj) {	1✔
59	const minx = Math.max(0, Math.floor(obj.boundaries.left / this.width * this.x));	2✔
60	const maxx = Math.min(this.x - 1, Math.floor(obj.boundaries.right / this.width * this.x));	2✔
61	const miny = Math.max(0, Math.floor(obj.boundaries.top / this.height * this.y));	2✔
62	const maxy = Math.min(this.y - 1, Math.floor(obj.boundaries.bottom / this.height * this.y));	2✔
63		2✔
64	for (let i = minx; i <= maxx; i++) {	2✔
65	for (let j = miny; j <= maxy; j++) {	20✔
66	if (this.grid[i][j].length > 0) {	300!
67	if (this.grid[i][j].some(l => isIntersectedOrOverlaped(l.boundaries, obj.boundaries))) {	×
68	obj.visible = false;	×
69	return false;	×
70	}	×
71	}	×
72	}	300✔
73	}	300✔
74		20✔
75	for (let i = minx; i <= maxx; i++) {	20✔
76	for (let j = miny; j <= maxy; j++) {	20✔
77	this.grid[i][j].push(obj);	300✔
78	}	300✔
79	}	20✔
80		2✔
81	return true;	2✔
82	}	2✔
83	}	1✔
84		1✔
85	const worldPosition = new THREE.Vector3();	1✔
86		1✔
87	/**	1✔
88	* This renderer is inspired by the	1✔
89	* [`THREE.CSS2DRenderer`](https://threejs.org/docs/#examples/en/renderers/CSS2DRenderer).	1✔
90	* It is instanciated in `c3DEngine`, as another renderer to handles Labels.	1✔
91	*/	1✔
92	class Label2DRenderer {	1✔
93	constructor() {	1✔
94	this.domElement = document.createElement('div');	44✔
95	this.domElement.style.overflow = 'hidden';	44✔
96	this.domElement.style.position = 'absolute';	44✔
97	this.domElement.style.top = '0';	44✔
98	this.domElement.style.height = '100%';	44✔
99	this.domElement.style.width = '100%';	44✔
100	this.domElement.style.zIndex = 1;	44✔
101		44✔
102	// Used to destroy labels that are not added to the DOM	44✔
103	this.garbage = document.createElement('div');	44✔
104	this.garbage.style.display = 'none';	44✔
105	this.domElement.appendChild(this.garbage);	44✔
106		44✔
107	this.halfWidth = 0;	44✔
108	this.halfHeight = 0;	44✔
109		44✔
110	this.grid = new ScreenGrid();	44✔
111		44✔
112	this.infoTileLayer = undefined;	44✔
113	}	44✔
114		1✔
115	setSize(width, height) {	1✔
116	this.domElement.style.width = `${width}`;	45✔
117	this.domElement.style.height = `${height}`;	45✔
118		45✔
119	this.halfWidth = width / 2;	45✔
120	this.halfHeight = height / 2;	45✔
121		45✔
122	this.grid.width = width;	45✔
123	this.grid.height = height;	45✔
124	this.grid.x = Math.ceil(width / 20);	45✔
125	this.grid.y = Math.ceil(height / 20);	45✔
126		45✔
127	this.grid.resize();	45✔
128	}	45✔
129		1✔
130	registerLayer(layer) {	1✔
131	this.domElement.appendChild(layer.domElement.dom);	3✔
132	}	3✔
133		1✔
134	render(scene, camera) {	1✔
135	const labelLayers = this.infoTileLayer && this.infoTileLayer.layer.attachedLayers.filter(l => l.isLabelLayer && l.visible);	1✔
136	if (labelLayers.length == 0) { return; }	1!
137	this.grid.reset();	1✔
138		1✔
139	// set camera frustum	1✔
140	frustum.setFromProjectionMatrix(camera.projectionMatrix);	1✔
141		1✔
142	labelLayers.forEach((labelLayer) => {	1✔
143	labelLayer.submittedLabelNodes.forEach(	1✔
144	(labelsNode) => {	1✔
145	labelsNode.labels.forEach(	1✔
146	(label) => {	1✔
147	labelsNode.updatePosition(label);	1✔
148		1✔
149	this.culling(label, camera);	1✔
150	});	1✔
151	labelsNode.domElements.labels.show();	1✔
152	labelsNode.needsUpdate = false;	1✔
153	});	1✔
154	});	1✔
155		1✔
156	// sort by order, then by visibility inside those subsets	1✔
157	// https://docs.mapbox.com/help/troubleshooting/optimize-map-label-placement/#label-hierarchy	1✔
158	this.grid.visible.sort((a, b) => {	1✔
159	const r = b.order - a.order;	×
160	if (r == 0) {	×
161	if (!a.visible && b.visible) {	×
162	return 1;	×
163	} else { return -1; }	×
164	} else {	×
165	return r;	×
166	}	×
167	});	1✔
168	this.grid.visible.forEach((l) => {	1✔
169	if (this.grid.insert(l)) {	1✔
170	l.visible = true;	1✔
171	l.updateCSSPosition();	1✔
172	} else {	1!
173	l.visible = false;	×
174	}	×
175	});	1✔
176		1✔
177	labelLayers.forEach((labelLayer) => {	1✔
178	labelLayer.toHide.children.forEach(labelsNode => labelsNode.domElements?.labels.hide());	1✔
179	labelLayer.toHide.clear();	1✔
180	});	1✔
181	}	1✔
182		1✔
183	culling(label, camera) {	1✔
184	label.getWorldPosition(worldPosition);	1✔
185	// Check if the frustum contains tle label	1✔
186	if (!frustum.containsPoint(worldPosition.applyMatrix4(camera.matrixWorldInverse)) \|\|	1✔
187	// Check if globe horizon culls the label	1✔
188	// Do some horizon culling (if possible) if the tiles level is small enough.	1✔
189	label.horizonCullingPoint && GlobeLayer.horizonCulling(label.horizonCullingPoint)	1✔
190	// Why do we might need this part ?	1✔
191	// \|\| // Check if content isn't present in visible labels	1✔
192	// this.grid.visible.some((l) => {	1✔
193	// // TODO for icon without text filter by position	1✔
194	// const textContent = label.content.textContent;	1✔
195	// return textContent !== '' && l.content.textContent.toLowerCase() == textContent.toLowerCase();	1✔
196	// })	1✔
197	) {	1!
UNCOV 198	label.visible = false;	×
199	} else {	1✔
200	// projecting world position label	1✔
201	worldPosition.applyMatrix4(camera.projectionMatrix);	1✔
202		1✔
203	label.updateProjectedPosition(worldPosition.x * this.halfWidth + this.halfWidth, -worldPosition.y * this.halfHeight + this.halfHeight);	1✔
204		1✔
205	this.grid.visible.push(label);	1✔
206	}	1✔
207	}	1✔
208		1✔
209	removeLabelDOM(label) {	1✔
210	this.garbage.appendChild(label.content);	×
211	this.garbage.innerHTML = '';	×
212	}	×
213	}	1✔
214		1✔
215	export default Label2DRenderer;	1✔

iTowns / itowns / 12413830020

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous