Skip to content

Commit

Permalink
Fix vertical orientation for single-glyph CJK labels.
Browse files Browse the repository at this point in the history 
Fixes issue #5544.
  • Loading branch information
@ChrisLoer
ChrisLoer committed Nov 1, 2017
1 parent 2d43cb7 commit ff2e050
Show file tree
Hide file tree
Showing 3 changed files with 230 additions and 18 deletions.
46 changes: 28 additions & 18 deletions src/symbol/projection.js
View file
Expand Up @@ -239,6 +239,27 @@ function placeFirstAndLastGlyph(fontScale: number, glyphOffsetArray: any, lineOf
return { first: firstPlacedGlyph, last: lastPlacedGlyph };
}

function requiresOrientationChange(writingMode, firstPoint, lastPoint, aspectRatio) {
if (writingMode === WritingMode.horizontal) {
// On top of choosing whether to flip, choose whether to render this version of the glyphs or the alternate
// 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.
const rise = Math.abs(lastPoint.y - firstPoint.y);
const run = Math.abs(lastPoint.x - firstPoint.x) * aspectRatio;
if (rise > run) {
return { useVertical: true };
}
}

if (writingMode === WritingMode.vertical ? firstPoint.y < lastPoint.y : firstPoint.x > lastPoint.x) {
// Includes "horizontalOnly" case for labels without vertical glyphs
return { needsFlipping: true };
}

return null;
}

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;
Expand All @@ -260,23 +281,10 @@ function placeGlyphsAlongLine(symbol, fontSize, flip, keepUpright, posMatrix, la
const lastPoint = project(firstAndLastGlyph.last.point, glCoordMatrix).point;

if (keepUpright && !flip) {
if (symbol.writingMode === WritingMode.horizontal) {
// On top of choosing whether to flip, choose whether to render this version of the glyphs or the alternate
// 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.
const rise = Math.abs(lastPoint.y - firstPoint.y);
const run = Math.abs(lastPoint.x - firstPoint.x) * aspectRatio;
if (rise > run) {
return { useVertical: true };
}
}

if (symbol.writingMode === WritingMode.vertical ? firstPoint.y < lastPoint.y : firstPoint.x > lastPoint.x) {
// Includes "horizontalOnly" case for labels without vertical glyphs
return { needsFlipping: true };
const orientationChange = requiresOrientationChange(symbol.writingMode, firstPoint, lastPoint, aspectRatio);
if (orientationChange) {
return orientationChange;
}

}

placedGlyphs = [firstAndLastGlyph.first];
Expand All @@ -303,8 +311,10 @@ function placeGlyphsAlongLine(symbol, fontSize, flip, keepUpright, posMatrix, la
projectedVertex.point :
projectTruncatedLineSegment(tileAnchorPoint, tileSegmentEnd, a, 1, posMatrix);

if (symbol.vertical ? b.y > a.y : b.x < a.x) {
return { needsFlipping: true };

const orientationChange = requiresOrientationChange(symbol.writingMode, a, b, aspectRatio);
if (orientationChange) {
return orientationChange;
}
}
// $FlowFixMe
Expand Down
Binary file added test/integration/render-tests/regressions/mapbox-gl-js#5544/expected.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
202 changes: 202 additions & 0 deletions test/integration/render-tests/regressions/mapbox-gl-js#5544/style.json
View file
@@ -0,0 +1,202 @@
{
"version": 8,
"metadata": {
"test": {
"height": 512,
"width": 512
}
},
"zoom": 2,
"center": [-14.41400, 39.09187],
"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.414062499999998,
39.095962936305476
],
[
-16.5234375,
-58.81374171570779
]
]
}
},
{
"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
}
}
]
}

0 comments on commit ff2e050

Please sign in to comment.