fix stretchable collisions

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) {

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};
 }

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
+ }
+ }
+ ]
+}

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,