Fix issue #5546: cutoff angle for using vertical/horizontal glyphs sh…

…ouldn't be affected by viewport aspect ratio.
mapbox · Nov 1, 2017 · 4a45fed · 4a45fed
1 parent 25e5f1d
commit 4a45fed
Show file tree

Hide file tree

Showing 3 changed files with 191 additions and 4 deletions.
diff --git 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
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
@@ -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
+      }
+    }
+  ]
+}