Handle *-rotate for point-placed symbols.

Fixes issue #6075. Does not fix collision detection for point symbols with *-rotation-alignment: map, or for line-placed symbols with *-offset set.
mapbox · May 7, 2018 · 5b6ea5c · 5b6ea5c
1 parent f3d7e5b
commit 5b6ea5c
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 8 deletions.
diff --git a/src/symbol/collision_feature.js b/src/symbol/collision_feature.js
@@ -1,7 +1,7 @@
 // @flow
 
 import type {CollisionBoxArray} from '../data/array_types';
-import type Point from '@mapbox/point-geometry';
+import Point from '@mapbox/point-geometry';
 import type Anchor from './anchor';
 
 /**
@@ -36,11 +36,12 @@ class CollisionFeature {
                 boxScale: number,
                 padding: number,
                 alignLine: boolean,
-                overscaling: number) {
-        const y1 = shaped.top * boxScale - padding;
-        const y2 = shaped.bottom * boxScale + padding;
-        const x1 = shaped.left * boxScale - padding;
-        const x2 = shaped.right * boxScale + padding;
+                overscaling: number,
+                rotate: number) {
+        let y1 = shaped.top * boxScale - padding;
+        let y2 = shaped.bottom * boxScale + padding;
+        let x1 = shaped.left * boxScale - padding;
+        let x2 = shaped.right * boxScale + padding;
 
         this.boxStartIndex = collisionBoxArray.length;
 
@@ -57,6 +58,31 @@ class CollisionFeature {
             }
 
         } else {
+            if (rotate) {
+                // Account for *-rotate in point collision boxes
+                // See https://github.com/mapbox/mapbox-gl-js/issues/6075
+                // Doesn't account for icon-text-fit
+
+                const tl = new Point(x1, y1);
+                const tr = new Point(x2, y1);
+                const bl = new Point(x1, y2);
+                const br = new Point(x2, y2);
+
+                const rotateRadians = rotate * Math.PI / 180;
+
+                tl._rotate(rotateRadians);
+                tr._rotate(rotateRadians);
+                bl._rotate(rotateRadians);
+                br._rotate(rotateRadians);
+
+                // Collision features require an "on-axis" geometry,
+                // so take the envelope of the rotated geometry
+                // (may be quite large for wide labels rotated 45 degrees)
+                x1 = Math.min(tl.x, tr.x, bl.x, br.x);
+                x2 = Math.max(tl.x, tr.x, bl.x, br.x);
+                y1 = Math.min(tl.y, tr.y, bl.y, br.y);
+                y2 = Math.max(tl.y, tr.y, bl.y, br.y);
+            }
             collisionBoxArray.emplaceBack(anchor.x, anchor.y, x1, y1, x2, y2, featureIndex, sourceLayerIndex, bucketIndex,
                 0, 0);
         }

diff --git a/src/symbol/symbol_layout.js b/src/symbol/symbol_layout.js
@@ -338,7 +338,8 @@ function addSymbol(bucket: SymbolBucket,
     if (shapedTextOrientations.horizontal) {
         // As a collision approximation, we can use either the vertical or the horizontal version of the feature
         // We're counting on the two versions having similar dimensions
-        textCollisionFeature = new CollisionFeature(collisionBoxArray, line, anchor, featureIndex, sourceLayerIndex, bucketIndex, shapedTextOrientations.horizontal, textBoxScale, textPadding, textAlongLine, bucket.overscaling);
+        const textRotate = layer.layout.get('text-rotate').evaluate(feature);
+        textCollisionFeature = new CollisionFeature(collisionBoxArray, line, anchor, featureIndex, sourceLayerIndex, bucketIndex, shapedTextOrientations.horizontal, textBoxScale, textPadding, textAlongLine, bucket.overscaling, textRotate);
         numGlyphVertices += addTextVertices(bucket, anchor, shapedTextOrientations.horizontal, layer, textAlongLine, feature, textOffset, lineArray, shapedTextOrientations.vertical ? WritingMode.horizontal : WritingMode.horizontalOnly, placedTextSymbolIndices, glyphPositionMap, sizes);
 
         if (shapedTextOrientations.vertical) {
@@ -353,7 +354,8 @@ function addSymbol(bucket: SymbolBucket,
         const iconQuads = getIconQuads(anchor, shapedIcon, layer,
                             iconAlongLine, shapedTextOrientations.horizontal,
                             feature);
-        iconCollisionFeature = new CollisionFeature(collisionBoxArray, line, anchor, featureIndex, sourceLayerIndex, bucketIndex, shapedIcon, iconBoxScale, iconPadding, /*align boxes to line*/false, bucket.overscaling);
+        const iconRotate = layer.layout.get('icon-rotate').evaluate(feature);
+        iconCollisionFeature = new CollisionFeature(collisionBoxArray, line, anchor, featureIndex, sourceLayerIndex, bucketIndex, shapedIcon, iconBoxScale, iconPadding, /*align boxes to line*/false, bucket.overscaling, iconRotate);
 
         numIconVertices = iconQuads.length * 4;
 

diff --git a/test/integration/render-tests/icon-rotate/with-offset/expected.png b/test/integration/render-tests/icon-rotate/with-offset/expected.png
diff --git a/test/integration/render-tests/icon-rotate/with-offset/style.json b/test/integration/render-tests/icon-rotate/with-offset/style.json
@@ -0,0 +1,57 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "width": 128,
+            "height": 256,
+            "collisionDebug": true
+        }
+    },
+    "sources": {
+        "geojson": {
+            "type": "geojson",
+            "data": {
+                "type": "Point",
+                "coordinates": [
+                    0,
+                    0
+                ]
+            }
+        }
+    },
+    "sprite": "local://sprites/sprite",
+    "layers": [
+        {
+            "id": "background",
+            "type": "background",
+            "paint": {
+                "background-color": "white"
+            }
+        },
+        {
+            "id": "offset",
+            "type": "symbol",
+            "source": "geojson",
+            "layout": {
+                "symbol-placement": "point",
+                "icon-image": "oneway",
+                "icon-rotate": 45,
+                "icon-offset": [
+                    40,
+                    50
+                ],
+                "icon-allow-overlap": true
+            }
+        },
+        {
+            "id": "base",
+            "type": "symbol",
+            "source": "geojson",
+            "layout": {
+                "symbol-placement": "point",
+                "icon-image": "restaurant-12",
+                "icon-allow-overlap": true
+            }
+        }
+    ]
+}
diff --git a/test/integration/render-tests/text-rotate/with-offset/expected.png b/test/integration/render-tests/text-rotate/with-offset/expected.png
diff --git a/test/integration/render-tests/text-rotate/with-offset/style.json b/test/integration/render-tests/text-rotate/with-offset/style.json
@@ -0,0 +1,49 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "width": 128,
+            "height": 256,
+            "collisionDebug": true
+        }
+    },
+    "sources": {
+        "geojson": {
+            "type": "geojson",
+            "data": {
+                "type": "Point",
+                "coordinates": [
+                    0,
+                    0
+                ]
+            }
+        }
+    },
+    "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+    "layers": [
+        {
+            "id": "background",
+            "type": "background",
+            "paint": {
+                "background-color": "white"
+            }
+        },
+        {
+            "id": "symbol",
+            "type": "symbol",
+            "source": "geojson",
+            "layout": {
+                "text-field": "Test",
+                "text-font": [
+                    "Open Sans Semibold",
+                    "Arial Unicode MS Bold"
+                ],
+                "text-rotate": 45,
+                "text-offset": [
+                    3,
+                    6
+                ]
+            }
+        }
+    ]
+}