Skip to content

Commit 159c46b

Browse files
mpulkki-mapboxmpulkki-mapbox
committed
Reduce bundle size
1 parent 63414b0 commit 159c46b

File tree

2 files changed

+47
-127
lines changed

2 files changed

+47
-127
lines changed

‎src/render/draw_collision_debug.js‎

Lines changed: 37 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,56 @@ import IndexBuffer from '../gl/index_buffer';
1919

2020
export default drawCollisionDebug;
2121

22+
type TileBatch = {
23+
circleArray: Array<number>,
24+
circleOffset: number,
25+
transform: mat4,
26+
invTransform: mat4
27+
};
28+
2229
let quadTriangles: ?QuadTriangleArray;
2330

2431
function drawCollisionDebug(painter: Painter, sourceCache: SourceCache, layer: StyleLayer, coords: Array<OverscaledTileID>, translate: [number, number], translateAnchor: 'map' | 'viewport', isText: boolean) {
2532
const context = painter.context;
2633
const gl = context.gl;
2734
const program = painter.useProgram('collisionBox');
35+
const tileBatches: Array<TileBatch> = [];
36+
let circleCount = 0;
37+
let circleOffset = 0;
2838

2939
for (let i = 0; i < coords.length; i++) {
3040
const coord = coords[i];
3141
const tile = sourceCache.getTile(coord);
3242
const bucket: ?SymbolBucket = (tile.getBucket(layer): any);
3343
if (!bucket) continue;
34-
const buffers = isText ? bucket.textCollisionBox : bucket.iconCollisionBox;
35-
if (!buffers) continue;
3644
let posMatrix = coord.posMatrix;
3745
if (translate[0] !== 0 || translate[1] !== 0) {
3846
posMatrix = painter.translatePosMatrix(coord.posMatrix, tile, translate, translateAnchor);
3947
}
48+
const buffers = isText ? bucket.textCollisionBox : bucket.iconCollisionBox;
49+
// Get collision circle data of this bucket
50+
const circleArray: Array<number> = bucket.collisionCircleArray;
51+
if (circleArray.length > 0) {
52+
// We need to know the projection matrix that was used for projecting collision circles to the screen.
53+
// This might vary between buckets as the symbol placement is a continous process. This matrix is
54+
// required for transforming points from previous screen space to the current one
55+
const invTransform = mat4.create();
56+
const transform = posMatrix;
57+
58+
mat4.mul(invTransform, bucket.placementInvProjMatrix, painter.transform.glCoordMatrix);
59+
mat4.mul(invTransform, invTransform, bucket.placementViewportMatrix);
60+
61+
tileBatches.push({
62+
circleArray,
63+
circleOffset,
64+
transform,
65+
invTransform
66+
});
67+
68+
circleCount += circleArray.length / 4; // 4 values per circle
69+
circleOffset = circleCount;
70+
}
71+
if (!buffers) continue;
4072
program.draw(context, gl.LINES,
4173
DepthMode.disabled, StencilMode.disabled,
4274
painter.colorModeForRenderPass(),
@@ -50,65 +82,11 @@ function drawCollisionDebug(painter: Painter, sourceCache: SourceCache, layer: S
5082
buffers.collisionVertexBuffer);
5183
}
5284

53-
if (isText)
54-
drawCollisionCircles(painter, sourceCache, layer, coords, translate, translateAnchor);
55-
}
56-
57-
type TileBatch = {
58-
circleArray: Array<number>,
59-
circleOffset: number,
60-
transform: mat4,
61-
invTransform: mat4
62-
};
63-
64-
function drawCollisionCircles(painter: Painter, sourceCache: SourceCache, layer: StyleLayer, coords: Array<OverscaledTileID>, translate: [number, number], translateAnchor: 'map' | 'viewport') {
65-
66-
const tileBatches: Array<TileBatch> = [];
67-
let circleCount = 0;
68-
let circleOffset = 0;
69-
70-
for (let i = 0; i < coords.length; i++) {
71-
const coord = coords[i];
72-
const tile = sourceCache.getTile(coord);
73-
const bucket: ?SymbolBucket = (tile.getBucket(layer): any);
74-
if (!bucket) continue;
75-
76-
const circleArray: Array<number> = bucket.collisionCircleArray;
77-
78-
if (!circleArray.length)
79-
continue;
80-
81-
let posMatrix = coord.posMatrix;
82-
83-
if (translate[0] !== 0 || translate[1] !== 0) {
84-
posMatrix = painter.translatePosMatrix(coord.posMatrix, tile, translate, translateAnchor);
85-
}
86-
87-
// We need to know the projection matrix that was used for projecting collision circles to the screen.
88-
// This might vary between buckets as the symbol placement is a continous process. This matrix is
89-
// required for transforming points from previous screen space to the current one
90-
const invTransform = mat4.create();
91-
const transform = posMatrix;
92-
93-
mat4.mul(invTransform, bucket.placementInvProjMatrix, painter.transform.glCoordMatrix);
94-
mat4.mul(invTransform, invTransform, bucket.placementViewportMatrix);
95-
96-
tileBatches.push({
97-
circleArray,
98-
circleOffset,
99-
transform,
100-
invTransform
101-
});
102-
103-
circleCount += circleArray.length / 4; // 4 values per circle
104-
circleOffset = circleCount;
105-
}
106-
107-
if (!tileBatches.length)
85+
if (!isText || !tileBatches.length) {
10886
return;
87+
}
10988

110-
const context = painter.context;
111-
const gl = context.gl;
89+
// Render collision circles
11290
const circleProgram = painter.useProgram('collisionCircle');
11391

11492
// Construct vertex data

‎src/symbol/collision_index.js‎

Lines changed: 10 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ class CollisionIndex {
173173
// Quickly check if the path is fully inside or outside of the padded collision region.
174174
// For overlapping paths we'll only create collision circles for the visible segments
175175
const minPoint = projectedPath[0].clone();
176-
const maxPoint = projectedPath[1].clone();
176+
const maxPoint = projectedPath[0].clone();
177177

178178
for (let i = 1; i < projectedPath.length; i++) {
179179
minPoint.x = Math.min(minPoint.x, projectedPath[i].x);
@@ -182,13 +182,16 @@ class CollisionIndex {
182182
maxPoint.y = Math.max(maxPoint.y, projectedPath[i].y);
183183
}
184184

185-
const region = computeRectClipRegion(minPoint, maxPoint, screenPlaneMin, screenPlaneMax);
186-
187-
// 0 == fully visible, -1 == partly visible, >= 1 not visble at all
188-
if (region === 0) {
185+
if (minPoint.x >= screenPlaneMin.x && maxPoint.x <= screenPlaneMax.x &&
186+
minPoint.y >= screenPlaneMin.y && maxPoint.y <= screenPlaneMax.y) {
187+
// Quad fully visible
189188
segments = [projectedPath];
190-
} else if (region < 0) {
191-
segments = clipLine([projectedPath], screenPlaneMin.x, screenPlaneMin.x, screenPlaneMax.x, screenPlaneMax.y);
189+
} else if (maxPoint.x < screenPlaneMin.x || minPoint.x > screenPlaneMax.x ||
190+
maxPoint.y < screenPlaneMin.y || minPoint.y > screenPlaneMax.y) {
191+
// Not visible
192+
segments = [];
193+
} else {
194+
segments = clipLine([projectedPath], screenPlaneMin.x, screenPlaneMin.y, screenPlaneMax.x, screenPlaneMax.y);
192195
}
193196
}
194197

@@ -331,15 +334,6 @@ class CollisionIndex {
331334
}
332335
}
333336

334-
projectPoint(posMatrix: mat4, x: number, y: number) {
335-
const p = [x, y, 0, 1];
336-
projection.xyTransformMat4(p, p, posMatrix);
337-
return new Point(
338-
(((p[0] / p[3] + 1) / 2) * this.transform.width) + viewportPadding,
339-
(((-p[1] / p[3] + 1) / 2) * this.transform.height) + viewportPadding
340-
);
341-
}
342-
343337
projectAndGetPerspectiveRatio(posMatrix: mat4, x: number, y: number) {
344338
const p = [x, y, 0, 1];
345339
projection.xyTransformMat4(p, p, posMatrix);
@@ -376,56 +370,4 @@ class CollisionIndex {
376370
}
377371
}
378372

379-
/*
380-
* Computes a region code for a point in a rectangular area using Cohen–Sutherland clipping algorithm
381-
*/
382-
function computePointClipRegion(point: Point, minBoundary: Point, maxBoundary: Point) {
383-
const LEFT = 1 << 0;
384-
const RIGHT = 1 << 1;
385-
const BOTTOM = 1 << 2;
386-
const TOP = 1 << 3;
387-
388-
const min = minBoundary;
389-
const max = maxBoundary;
390-
let region = 0;
391-
392-
if (point.x < min.x) {
393-
region |= LEFT;
394-
}
395-
if (point.x > max.x) {
396-
region |= RIGHT;
397-
}
398-
if (point.y < min.y) {
399-
region |= TOP;
400-
}
401-
if (point.y > max.y) {
402-
region |= BOTTOM;
403-
}
404-
405-
return region;
406-
}
407-
408-
/*
409-
* Computes a region code for a rect in a rectangular area using Cohen–Sutherland clipping algorithm.
410-
* A rectangle inside a single region is not overlapping with any of the borders.
411-
*
412-
* Returns a negative value if the rect is overlapping with multiple regions
413-
*/
414-
function computeRectClipRegion(minPoint: Point, maxPoint: Point, minBoundary: Point, maxBoundary: Point) {
415-
const p0 = new Point(minPoint.x, minPoint.y);
416-
const p1 = new Point(minPoint.x, maxPoint.y);
417-
const p2 = new Point(maxPoint.x, maxPoint.y);
418-
const p3 = new Point(maxPoint.x, minPoint.y);
419-
420-
const region = computePointClipRegion(p0, minBoundary, maxBoundary);
421-
if (region !== computePointClipRegion(p1, minBoundary, maxBoundary))
422-
return -1;
423-
else if (region !== computePointClipRegion(p2, minBoundary, maxBoundary))
424-
return -1;
425-
else if (region !== computePointClipRegion(p3, minBoundary, maxBoundary))
426-
return -1;
427-
428-
return region;
429-
}
430-
431373
export default CollisionIndex;

0 commit comments

Comments
 (0)