fix collisions for stretchable images with a content area (#9041)

mapbox · Nov 28, 2019 · 3418cd1 · 3418cd1
1 parent 5255736
commit 3418cd1
Show file tree

Hide file tree

Showing 5 changed files with 193 additions and 2 deletions.
diff --git a/src/symbol/collision_feature.js b/src/symbol/collision_feature.js
@@ -43,6 +43,14 @@ class CollisionFeature {
         let x1 = shaped.left * boxScale - padding;
         let x2 = shaped.right * boxScale + padding;
 
+        const collisionPadding = shaped.collisionPadding;
+        if (collisionPadding) {
+            x1 -= collisionPadding[0] * boxScale;
+            y1 -= collisionPadding[1] * boxScale;
+            x2 += collisionPadding[2] * boxScale;
+            y2 += collisionPadding[3] * boxScale;
+        }
+
         this.boxStartIndex = collisionBoxArray.length;
 
         if (alignLine) {

diff --git a/src/symbol/shaping.js b/src/symbol/shaping.js
@@ -745,7 +745,8 @@ export type PositionedIcon = {
     top: number,
     bottom: number,
     left: number,
-    right: number
+    right: number,
+    collisionPadding?: [number, number, number, number]
 };
 
 function shapeIcon(image: ImagePosition, iconOffset: [number, number], iconAnchor: SymbolAnchor): PositionedIcon {
@@ -769,6 +770,18 @@ function fitIconToText(shapedIcon: PositionedIcon, shapedText: Shaping,
 
     const image = shapedIcon.image;
 
+    let collisionPadding;
+    if (image.content) {
+        const content = image.content;
+        const pixelRatio = image.pixelRatio || 1;
+        collisionPadding = [
+            content[0] / pixelRatio,
+            content[1] / pixelRatio,
+            image.displaySize[0] - content[2] / pixelRatio,
+            image.displaySize[1] - content[3] / pixelRatio
+        ];
+    }
+
     // We don't respect the icon-anchor, because icon-text-fit is set. Instead,
     // the icon will be centered on the text, then stretched in the given
     // dimensions.
@@ -799,5 +812,5 @@ function fitIconToText(shapedIcon: PositionedIcon, shapedText: Shaping,
         bottom = top + image.displaySize[1];
     }
 
-    return {image, top, right, bottom, left};
+    return {image, top, right, bottom, left, collisionPadding};
 }
diff --git a/...ion/render-tests/icon-text-fit/stretch-nine-part-content-collision/expected.png b/...ion/render-tests/icon-text-fit/stretch-nine-part-content-collision/expected.png
diff --git a/test/integration/render-tests/icon-text-fit/stretch-nine-part-content-collision/style.json b/test/integration/render-tests/icon-text-fit/stretch-nine-part-content-collision/style.json
@@ -0,0 +1,156 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 200,
+      "height": 150
+    }
+  },
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": "local://geojson/anchors.json"
+    }
+  },
+  "sprite": "local://sprites/stretch",
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "anchor-center",
+      "type": "symbol",
+      "source": "geojson",
+      "filter": ["==", "anchor", "center"],
+      "layout": {
+        "text-field": "ABC",
+        "text-size": 20,
+        "text-anchor": "center",
+        "text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
+        "icon-image": "nine-part-content",
+        "icon-text-fit": "both"
+      }
+    },
+    {
+      "id": "anchor-left",
+      "type": "symbol",
+      "source": "geojson",
+      "filter": ["==", "anchor", "left"],
+      "layout": {
+        "text-field": "ABC",
+        "text-size": 20,
+        "text-anchor": "left",
+        "text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
+        "icon-image": "nine-part-content",
+        "icon-text-fit": "both"
+      }
+    },
+    {
+      "id": "anchor-top-left",
+      "type": "symbol",
+      "source": "geojson",
+      "filter": ["==", "anchor", "top-left"],
+      "layout": {
+        "text-field": "ABC",
+        "text-size": 20,
+        "text-anchor": "top-left",
+        "text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
+        "icon-image": "nine-part-content",
+        "icon-text-fit": "both"
+      }
+    },
+    {
+      "id": "anchor-top",
+      "type": "symbol",
+      "source": "geojson",
+      "filter": ["==", "anchor", "top"],
+      "layout": {
+        "text-field": "ABC",
+        "text-size": 20,
+        "text-anchor": "top",
+        "text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
+        "icon-image": "nine-part-content",
+        "icon-text-fit": "both"
+      }
+    },
+    {
+      "id": "anchor-top-right",
+      "type": "symbol",
+      "source": "geojson",
+      "filter": ["==", "anchor", "top-right"],
+      "layout": {
+        "text-field": "ABC",
+        "text-size": 20,
+        "text-anchor": "top-right",
+        "text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
+        "icon-image": "nine-part-content",
+        "icon-text-fit": "both"
+      }
+    },
+    {
+      "id": "anchor-right",
+      "type": "symbol",
+      "source": "geojson",
+      "filter": ["==", "anchor", "right"],
+      "layout": {
+        "text-field": "ABC",
+        "text-size": 20,
+        "text-anchor": "right",
+        "text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
+        "icon-image": "nine-part-content",
+        "icon-text-fit": "both"
+      }
+    },
+    {
+      "id": "anchor-bottom-left",
+      "type": "symbol",
+      "source": "geojson",
+      "filter": ["==", "anchor", "bottom-left"],
+      "layout": {
+        "text-field": "ABC",
+        "text-size": 20,
+        "text-anchor": "bottom-left",
+        "text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
+        "icon-image": "nine-part-content",
+        "icon-text-fit": "both"
+      }
+    },
+    {
+      "id": "anchor-bottom",
+      "type": "symbol",
+      "source": "geojson",
+      "filter": ["==", "anchor", "bottom"],
+      "layout": {
+        "text-field": "ABC",
+        "text-size": 20,
+        "text-anchor": "bottom",
+        "text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
+        "icon-image": "nine-part-content",
+        "icon-text-fit": "both"
+      }
+    },
+    {
+      "id": "anchor-bottom-right",
+      "type": "symbol",
+      "source": "geojson",
+      "filter": ["==", "anchor", "bottom-right"],
+      "layout": {
+        "text-field": "ABC",
+        "text-size": 20,
+        "text-anchor": "bottom-right",
+        "text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
+        "icon-image": "nine-part-content",
+        "icon-text-fit": "both"
+      }
+    },
+    {
+      "id": "anchors",
+      "type": "circle",
+      "source": "geojson",
+      "paint": {
+        "circle-radius": 2,
+        "circle-color": "green",
+        "circle-stroke-color": "white",
+        "circle-stroke-width": 1
+      }
+    }
+  ]
+}
diff --git a/test/unit/symbol/shaping.test.js b/test/unit/symbol/shaping.test.js
@@ -216,6 +216,7 @@ test('fitIconToText', (t) => {
         bottom: 10,
         left: -10,
         right: 10,
+        collisionPadding: undefined,
         image: Object.freeze({
             pixelRatio: 1,
             displaySize: [ 20, 20 ],
@@ -233,6 +234,7 @@ test('fitIconToText', (t) => {
     t.test('icon-text-fit: width', (t) => {
         t.deepEqual(shaping.fitIconToText(shapedIcon, shapedText, 'width', [0, 0, 0, 0], [0, 0], 24 / glyphSize), {
             image: shapedIcon.image,
+            collisionPadding: undefined,
             top: 0,
             right: 20,
             bottom: 20,
@@ -241,6 +243,7 @@ test('fitIconToText', (t) => {
 
         t.deepEqual(shaping.fitIconToText(shapedIcon, shapedText, 'width', [0, 0, 0, 0], [3, 7], 24 / glyphSize), {
             image: shapedIcon.image,
+            collisionPadding: undefined,
             top: 7,
             right: 23,
             bottom: 27,
@@ -249,6 +252,7 @@ test('fitIconToText', (t) => {
 
         t.deepEqual(shaping.fitIconToText(shapedIcon, shapedText, 'width', [0, 0, 0, 0], [0, 0], 12 / glyphSize), {
             image: shapedIcon.image,
+            collisionPadding: undefined,
             top: -5,
             right: 10,
             bottom: 15,
@@ -258,6 +262,7 @@ test('fitIconToText', (t) => {
         // Ignores padding for top/bottom, since the icon is only stretched to the text's width but not height
         t.deepEqual(shaping.fitIconToText(shapedIcon, shapedText, 'width', [ 5, 10, 5, 10 ], [0, 0], 12 / glyphSize), {
             image: shapedIcon.image,
+            collisionPadding: undefined,
             top: -5,
             right: 20,
             bottom: 15,
@@ -270,6 +275,7 @@ test('fitIconToText', (t) => {
     t.test('icon-text-fit: height', (t) => {
         t.deepEqual(shaping.fitIconToText(shapedIcon, shapedText, 'height', [0, 0, 0, 0], [0, 0], 24 / glyphSize), {
             image: shapedIcon.image,
+            collisionPadding: undefined,
             top: -10,
             right: -10,
             bottom: 30,
@@ -278,6 +284,7 @@ test('fitIconToText', (t) => {
 
         t.deepEqual(shaping.fitIconToText(shapedIcon, shapedText, 'height', [0, 0, 0, 0], [3, 7], 24 / glyphSize), {
             image: shapedIcon.image,
+            collisionPadding: undefined,
             top: -3,
             right: -7,
             bottom: 37,
@@ -286,6 +293,7 @@ test('fitIconToText', (t) => {
 
         t.deepEqual(shaping.fitIconToText(shapedIcon, shapedText, 'height', [0, 0, 0, 0], [0, 0], 12 / glyphSize), {
             image: shapedIcon.image,
+            collisionPadding: undefined,
             top: -5,
             right: 0,
             bottom: 15,
@@ -295,6 +303,7 @@ test('fitIconToText', (t) => {
         // Ignores padding for left/right, since the icon is only stretched to the text's height but not width
         t.deepEqual(shaping.fitIconToText(shapedIcon, shapedText, 'height', [ 5, 10, 5, 10 ], [0, 0], 12 / glyphSize), {
             image: shapedIcon.image,
+            collisionPadding: undefined,
             top: -10,
             right: 0,
             bottom: 20,
@@ -307,6 +316,7 @@ test('fitIconToText', (t) => {
     t.test('icon-text-fit: both', (t) => {
         t.deepEqual(shaping.fitIconToText(shapedIcon, shapedText, 'both', [0, 0, 0, 0], [0, 0], 24 / glyphSize), {
             image: shapedIcon.image,
+            collisionPadding: undefined,
             top: -10,
             right: 20,
             bottom: 30,
@@ -315,6 +325,7 @@ test('fitIconToText', (t) => {
 
         t.deepEqual(shaping.fitIconToText(shapedIcon, shapedText, 'both', [0, 0, 0, 0], [3, 7], 24 / glyphSize), {
             image: shapedIcon.image,
+            collisionPadding: undefined,
             top: -3,
             right: 23,
             bottom: 37,
@@ -323,6 +334,7 @@ test('fitIconToText', (t) => {
 
         t.deepEqual(shaping.fitIconToText(shapedIcon, shapedText, 'both', [0, 0, 0, 0], [0, 0], 12 / glyphSize), {
             image: shapedIcon.image,
+            collisionPadding: undefined,
             top: -5,
             right: 10,
             bottom: 15,
@@ -331,6 +343,7 @@ test('fitIconToText', (t) => {
 
         t.deepEqual(shaping.fitIconToText(shapedIcon, shapedText, 'both', [ 5, 10, 5, 10 ], [0, 0], 12 / glyphSize), {
             image: shapedIcon.image,
+            collisionPadding: undefined,
             top: -10,
             right: 20,
             bottom: 20,
@@ -339,6 +352,7 @@ test('fitIconToText', (t) => {
 
         t.deepEqual(shaping.fitIconToText(shapedIcon, shapedText, 'both', [ 0, 5, 10, 15 ], [0, 0], 12 / glyphSize), {
             image: shapedIcon.image,
+            collisionPadding: undefined,
             top: -5,
             right: 15,
             bottom: 25,