diff --git a/src/symbol/projection.js b/src/symbol/projection.js index 1b46a8a13fb..0a8643eea0b 100644 --- a/src/symbol/projection.js +++ b/src/symbol/projection.js @@ -161,6 +161,8 @@ function updateLineLabels(bucket: SymbolBucket, const lineVertexArray = bucket.lineVertexArray; const placedSymbols = isText ? bucket.placedGlyphArray : bucket.placedIconArray; + const aspectRatio = painter.transform.width / painter.transform.height; + let useVertical = false; for (let s = 0; s < placedSymbols.length; s++) { @@ -197,14 +199,14 @@ function updateLineLabels(bucket: SymbolBucket, const projectionCache = {}; const placeUnflipped: any = placeGlyphsAlongLine(symbol, pitchScaledFontSize, false /*unflipped*/, keepUpright, posMatrix, labelPlaneMatrix, glCoordMatrix, - bucket.glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, tileAnchorPoint, projectionCache); + bucket.glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, tileAnchorPoint, projectionCache, aspectRatio); useVertical = placeUnflipped.useVertical; if (placeUnflipped.notEnoughRoom || useVertical || (placeUnflipped.needsFlipping && placeGlyphsAlongLine(symbol, pitchScaledFontSize, true /*flipped*/, keepUpright, posMatrix, labelPlaneMatrix, glCoordMatrix, - bucket.glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, tileAnchorPoint, projectionCache).notEnoughRoom)) { + bucket.glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, tileAnchorPoint, projectionCache, aspectRatio).notEnoughRoom)) { hideGlyphs(symbol.numGlyphs, dynamicLayoutVertexArray); } } @@ -237,7 +239,7 @@ function placeFirstAndLastGlyph(fontScale: number, glyphOffsetArray: any, lineOf return { first: firstPlacedGlyph, last: lastPlacedGlyph }; } -function placeGlyphsAlongLine(symbol, fontSize, flip, keepUpright, posMatrix, labelPlaneMatrix, glCoordMatrix, glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, tileAnchorPoint, projectionCache) { +function placeGlyphsAlongLine(symbol, fontSize, flip, keepUpright, posMatrix, labelPlaneMatrix, glCoordMatrix, glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, tileAnchorPoint, projectionCache, aspectRatio) { const fontScale = fontSize / 24; const lineOffsetX = symbol.lineOffsetX * fontSize; const lineOffsetY = symbol.lineOffsetY * fontSize; @@ -263,7 +265,9 @@ function placeGlyphsAlongLine(symbol, fontSize, flip, keepUpright, posMatrix, la // vertical glyphs. We can't just filter out vertical glyphs in the horizontal range because the horizontal // and vertical versions can have slightly different projections which could lead to angles where both or // neither showed. - if (Math.abs(lastPoint.y - firstPoint.y) > Math.abs(lastPoint.x - firstPoint.x)) { + const rise = Math.abs(lastPoint.y - firstPoint.y); + const run = Math.abs(lastPoint.x - firstPoint.x) * aspectRatio; + if (rise > run) { return { useVertical: true }; } } diff --git a/test/integration/render-tests/regressions/mapbox-gl-js#5546/expected.png b/test/integration/render-tests/regressions/mapbox-gl-js#5546/expected.png new file mode 100644 index 00000000000..10dfc8efa51 Binary files /dev/null and b/test/integration/render-tests/regressions/mapbox-gl-js#5546/expected.png differ diff --git a/test/integration/render-tests/regressions/mapbox-gl-js#5546/style.json b/test/integration/render-tests/regressions/mapbox-gl-js#5546/style.json new file mode 100644 index 00000000000..670042770ca --- /dev/null +++ b/test/integration/render-tests/regressions/mapbox-gl-js#5546/style.json @@ -0,0 +1,183 @@ +{ + "version": 8, + "metadata": { + "test": { + "height": 256, + "width": 1024 + } + }, + "zoom": 2, + "center": [-14.41400, 45], + "sources": { + "mapbox": { + "type": "geojson", + "data": { + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "properties": { + "name": "氣到身什戰只白質位歡" + }, + "geometry": { + "type": "LineString", + "coordinates": [ + [ + -14.4195556640625, + 39.091699613104595 + ], + [ + 102.3046875, + 39.36827914916014 + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "name": "電局今情再夜面造" + }, + "geometry": { + "type": "LineString", + "coordinates": [ + [ + -14.403076171875, + 39.10022600175347 + ], + [ + 103.35937499999999, + 65.80277639340238 + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "name": "有究往極他生血通育" + }, + "geometry": { + "type": "LineString", + "coordinates": [ + [ + -14.414062499999998, + 39.091699613104595 + ], + [ + -14.765625, + 82.21421714106776 + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "name": "不示有電親界因來終" + }, + "geometry": { + "type": "LineString", + "coordinates": [ + [ + -14.408569335937498, + 39.091699613104595 + ], + [ + -130.78125, + 39.095962936305476 + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "name": "有下人費也家了清,黨光她保過每心" + }, + "geometry": { + "type": "LineString", + "coordinates": [ + [ + -14.4195556640625, + 39.10022600175347 + ], + [ + -130.4296875, + 64.47279382008166 + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "name": "醫公藝說就公和有" + }, + "geometry": { + "type": "LineString", + "coordinates": [ + [ + -14.4195556640625, + 39.0831721934762 + ], + [ + 33.75, + 81.87364125482827 + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "name": "光中輪的態指那差車" + }, + "geometry": { + "type": "LineString", + "coordinates": [ + [ + -14.447021484374998, + 39.104488809440475 + ], + [ + -66.4453125, + 82.26169873683153 + ] + ] + } + } + ] + } + } + }, + "glyphs": "local://glyphs/{fontstack}/{range}.pbf", + "layers": [ + { + "id": "background", + "type": "background", + "paint": { + "background-color": "white" + } + }, + { + "id": "lines-symbol", + "type": "symbol", + "source": "mapbox", + "layout": { + "text-field": "{name}", + "symbol-placement": "line", + "symbol-spacing": 100, + "text-allow-overlap": true, + "text-font": [ "NotoCJK" ] + } + }, { + "id": "lines", + "type": "line", + "source": "mapbox", + "paint": { + "line-opacity": 0.25 + } + } + ] +}