Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix stretchable collisions #9041

Merged
merged 2 commits into from
Nov 28, 2019
Merged

fix stretchable collisions #9041

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
58de6e5
fix stretchable collisions
ansis Nov 28, 2019
2c4278d
fix tests
ansis Nov 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/symbol/collision_feature.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
17 changes: 15 additions & 2 deletions src/symbol/shaping.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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.
Expand Down Expand Up @@ -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};
}
Binary file added ...ion/render-tests/icon-text-fit/stretch-nine-part-content-collision/expected.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
156 changes: 156 additions & 0 deletions test/integration/render-tests/icon-text-fit/stretch-nine-part-content-collision/style.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
}
]
}
14 changes: 14 additions & 0 deletions test/unit/symbol/shaping.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,7 @@ test('fitIconToText', (t) => {
bottom: 10,
left: -10,
right: 10,
collisionPadding: undefined,
image: Object.freeze({
pixelRatio: 1,
displaySize: [ 20, 20 ],
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down