tei/MapLibreParticleLab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add textFitWidth and textFitHeight Properties to Sprites (#2780)

Browse Source 
Co-authored-by: Xiaolian Qin <xiaoq@microsoft.com>
This commit is contained in:
qqz003
2024-09-13 21:02:02 +08:00
committed by GitHub
parent 814e1015a8
commit cb38119451
58 changed files with 2116 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
metrics/integration/geojson/grid-tall.json Normal file
View File

@@ -0,0 +1,85 @@
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"cell": "top-left"
},
"geometry": {
"type": "Point",
"coordinates": [ -70, 60 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "top-middle"
},
"geometry": {
"type": "Point",
"coordinates": [ 0, 60 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "top-right"
},
"geometry": {
"type": "Point",
"coordinates": [ 70, 60 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "middle-left"
},
"geometry": {
"type": "Point",
"coordinates": [ -70, 0 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "middle-middle"
},
"geometry": {
"type": "Point",
"coordinates": [ 0, 0 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "middle-right"
},
"geometry": {
"type": "Point",
"coordinates": [ 70, 0 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "bottom-left"
},
"geometry": {
"type": "Point",
"coordinates": [ -70, -60 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "bottom-middle"
},
"geometry": {
"type": "Point",
"coordinates": [ 0, -60 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "bottom-right"
},
"geometry": {
"type": "Point",
"coordinates": [ 70, -60 ]
}
}]
}

85
metrics/integration/geojson/grid.json Normal file
View File

@@ -0,0 +1,85 @@
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"cell": "top-left"
},
"geometry": {
"type": "Point",
"coordinates": [ -70, 35 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "top-middle"
},
"geometry": {
"type": "Point",
"coordinates": [ 0, 35 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "top-right"
},
"geometry": {
"type": "Point",
"coordinates": [ 70, 35 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "middle-left"
},
"geometry": {
"type": "Point",
"coordinates": [ -70, 0 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "middle-middle"
},
"geometry": {
"type": "Point",
"coordinates": [ 0, 0 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "middle-right"
},
"geometry": {
"type": "Point",
"coordinates": [ 70, 0 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "bottom-left"
},
"geometry": {
"type": "Point",
"coordinates": [ -70, -35 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "bottom-middle"
},
"geometry": {
"type": "Point",
"coordinates": [ 0, -35 ]
}
}, {
"type": "Feature",
"properties": {
"cell": "bottom-right"
},
"geometry": {
"type": "Point",
"coordinates": [ 70, -35 ]
}
}]
}

BIN
metrics/integration/render-tests/icon-text-fit/textFit-anchors-long/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

193
metrics/integration/render-tests/icon-text-fit/textFit-anchors-long/style.json Normal file
View File

@@ -0,0 +1,193 @@
{
"version": 8,
"metadata": {
"test": {
"width": 200,
"height": 150,
"description": "This an adaptation of stretch-nine-part-content but with a long enough text content to stretch beyond aspect ratio."
}
},
"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": "123456",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-left",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "left"],
"layout": {
"text-field": "123456",
"text-size": 20,
"text-anchor": "left",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-top-left",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "top-left"],
"layout": {
"text-field": "123456",
"text-size": 20,
"text-anchor": "top-left",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-top",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "top"],
"layout": {
"text-field": "123456",
"text-size": 20,
"text-anchor": "top",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-top-right",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "top-right"],
"layout": {
"text-field": "123456",
"text-size": 20,
"text-anchor": "top-right",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-right",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "right"],
"layout": {
"text-field": "123456",
"text-size": 20,
"text-anchor": "right",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-bottom-left",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "bottom-left"],
"layout": {
"text-field": "123456",
"text-size": 20,
"text-anchor": "bottom-left",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-bottom",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "bottom"],
"layout": {
"text-field": "123456",
"text-size": 20,
"text-anchor": "bottom",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-bottom-right",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "bottom-right"],
"layout": {
"text-field": "123456",
"text-size": 20,
"text-anchor": "bottom-right",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchors",
"type": "circle",
"source": "geojson",
"paint": {
"circle-radius": 2,
"circle-color": "green",
"circle-stroke-color": "white",
"circle-stroke-width": 1
}
}
]
}

BIN
metrics/integration/render-tests/icon-text-fit/textFit-anchors-short/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

193
metrics/integration/render-tests/icon-text-fit/textFit-anchors-short/style.json Normal file
View File

@@ -0,0 +1,193 @@
{
"version": 8,
"metadata": {
"test": {
"width": 200,
"height": 150,
"description": "This an adaptation of stretch-nine-part-content but with '1' as the text and textFitWidth=stretchOnly and textFitHeight=proportional. Because of this, the aspect ratio of the content won't get more narrow than the starting content aspect ratio."
}
},
"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": "1",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-left",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "left"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "left",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-top-left",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "top-left"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "top-left",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-top",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "top"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "top",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-top-right",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "top-right"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "top-right",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-right",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "right"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "right",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-bottom-left",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "bottom-left"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "bottom-left",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-bottom",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "bottom"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "bottom",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchor-bottom-right",
"type": "symbol",
"source": "geojson",
"filter": ["==", "anchor", "bottom-right"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "bottom-right",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "anchors",
"type": "circle",
"source": "geojson",
"paint": {
"circle-radius": 2,
"circle-color": "green",
"circle-stroke-color": "white",
"circle-stroke-width": 1
}
}
]
}

BIN
metrics/integration/render-tests/icon-text-fit/textFit-collision/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

99
metrics/integration/render-tests/icon-text-fit/textFit-collision/style.json Normal file
View File

@@ -0,0 +1,99 @@
{
"version": 8,
"metadata": {
"test": {
"width": 64,
"height": 64
}
},
"sources": {
"geojson": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"order": "no-match"
},
"geometry": {
"type": "Point",
"coordinates": [-6.6, 12]
}
}, {
"type": "Feature",
"properties": {
"order": "no-match"
},
"geometry": {
"type": "Point",
"coordinates": [6.6, 12]
}
}, {
"type": "Feature",
"properties": {
"order": "match"
},
"geometry": {
"type": "Point",
"coordinates": [-6.6, -11.5]
}
}, {
"type": "Feature",
"properties": {
"order": "match"
},
"geometry": {
"type": "Point",
"coordinates": [6.6, -11.5]
}
}]
}
}
},
"sprite": "local://sprites/stretch",
"glyphs": "local://glyphs/{fontstack}/{range}.pbf",
"layers": [
{
"id": "symbol",
"type": "symbol",
"source": "geojson",
"filter": ["==", "order", "no-match"],
"layout": {
"text-field": "I",
"text-font": [
"Open Sans Semibold",
"Arial Unicode MS Bold"
],
"icon-image": "nine-part-content",
"icon-text-fit": "both"
}
},
{
"id": "symbol_with_offset",
"type": "symbol",
"source": "geojson",
"filter": ["==", "order", "match"],
"layout": {
"text-field": "I",
"text-font": [
"Open Sans Semibold",
"Arial Unicode MS Bold"
],
"icon-image": "nine-part-textfit-wh-stretchOnly-proportional",
"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
}
}
]
}

BIN
metrics/integration/render-tests/icon-text-fit/textFit-grid-long-vertical/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

191
metrics/integration/render-tests/icon-text-fit/textFit-grid-long-vertical/style.json Normal file
View File

@@ -0,0 +1,191 @@
{
"version": 8,
"metadata": {
"test": {
"width": 360,
"height": 360,
"description": "This draws the matrix of all possible combinations of textFitWidth (columns) and textFitHeight (rows) where they proceed from the top-left in the order stretchOrShrink, stretchOnly, and proportional. This version shows the effect of a long string with a wider aspect ratio than the source image."
}
},
"sources": {
"geojson": {
"type": "geojson",
"data": "local://geojson/grid-tall.json"
}
},
"sprite": "local://sprites/textFit",
"glyphs": "local://glyphs/{fontstack}/{range}.pbf",
"layers": [
{
"id": "wh-stretchOrShrink-stretchOrShrink",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "top-left"],
"layout": {
"text-field": "一二三四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOrShrink-stretchOrShrink",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOnly-stretchOrShrink",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "top-middle"],
"layout": {
"text-field": "一二三四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOnly-stretchOrShrink",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-proportional-stretchOrShrink",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "top-right"],
"layout": {
"text-field": "一二三四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-proportional-stretchOrShrink",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOrShrink-stretchOnly",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "middle-left"],
"layout": {
"text-field": "一二三四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOrShrink-stretchOnly",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOnly-stretchOnly",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "middle-middle"],
"layout": {
"text-field": "一二三四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOnly-stretchOnly",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-proportional-stretchOnly",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "middle-right"],
"layout": {
"text-field": "一二三四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-proportional-stretchOnly",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOrShrink-proportional",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "bottom-left"],
"layout": {
"text-field": "一二三四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOrShrink-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOnly-proportional",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "bottom-middle"],
"layout": {
"text-field": "一二三四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-proportional-proportional",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "bottom-right"],
"layout": {
"text-field": "一二三四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-proportional-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
}
]
}

BIN
metrics/integration/render-tests/icon-text-fit/textFit-grid-long/expected-mac.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
metrics/integration/render-tests/icon-text-fit/textFit-grid-long/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
metrics/integration/render-tests/icon-text-fit/textFit-grid-long/expected_Alt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

182
metrics/integration/render-tests/icon-text-fit/textFit-grid-long/style.json Normal file
View File

@@ -0,0 +1,182 @@
{
"version": 8,
"metadata": {
"test": {
"width": 360,
"height": 180,
"description": "This draws the matrix of all possible combinations of textFitWidth (columns) and textFitHeight (rows) where they proceed from the top-left in the order stretchOrShrink, stretchOnly, and proportional. This version shows the effect of a long string with a wider aspect ratio than the source image."
}
},
"sources": {
"geojson": {
"type": "geojson",
"data": "local://geojson/grid.json"
}
},
"sprite": "local://sprites/textFit",
"glyphs": "local://glyphs/{fontstack}/{range}.pbf",
"layers": [
{
"id": "wh-stretchOrShrink-stretchOrShrink",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "top-left"],
"layout": {
"text-field": "12345",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOrShrink-stretchOrShrink",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOnly-stretchOrShrink",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "top-middle"],
"layout": {
"text-field": "12345",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOnly-stretchOrShrink",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-proportional-stretchOrShrink",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "top-right"],
"layout": {
"text-field": "12345",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-proportional-stretchOrShrink",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOrShrink-stretchOnly",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "middle-left"],
"layout": {
"text-field": "12345",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOrShrink-stretchOnly",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOnly-stretchOnly",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "middle-middle"],
"layout": {
"text-field": "12345",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOnly-stretchOnly",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-proportional-stretchOnly",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "middle-right"],
"layout": {
"text-field": "12345",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-proportional-stretchOnly",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOrShrink-proportional",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "bottom-left"],
"layout": {
"text-field": "12345",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOrShrink-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOnly-proportional",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "bottom-middle"],
"layout": {
"text-field": "12345",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-proportional-proportional",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "bottom-right"],
"layout": {
"text-field": "12345",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-proportional-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
}
]
}

BIN
metrics/integration/render-tests/icon-text-fit/textFit-grid-short-vertical/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

191
metrics/integration/render-tests/icon-text-fit/textFit-grid-short-vertical/style.json Normal file
View File

@@ -0,0 +1,191 @@
{
"version": 8,
"metadata": {
"test": {
"width": 360,
"height": 360,
"description": "This draws the matrix of all possible combinations of textFitWidth (columns) and textFitHeight (rows) where they proceed from the top-left in the order stretchOrShrink, stretchOnly, and proportional. This version shows the effect of a long string with a wider aspect ratio than the source image."
}
},
"sources": {
"geojson": {
"type": "geojson",
"data": "local://geojson/grid-tall.json"
}
},
"sprite": "local://sprites/textFit",
"glyphs": "local://glyphs/{fontstack}/{range}.pbf",
"layers": [
{
"id": "wh-stretchOrShrink-stretchOrShrink",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "top-left"],
"layout": {
"text-field": "四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOrShrink-stretchOrShrink",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOnly-stretchOrShrink",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "top-middle"],
"layout": {
"text-field": "四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOnly-stretchOrShrink",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-proportional-stretchOrShrink",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "top-right"],
"layout": {
"text-field": "四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-proportional-stretchOrShrink",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOrShrink-stretchOnly",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "middle-left"],
"layout": {
"text-field": "四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOrShrink-stretchOnly",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOnly-stretchOnly",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "middle-middle"],
"layout": {
"text-field": "四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOnly-stretchOnly",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-proportional-stretchOnly",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "middle-right"],
"layout": {
"text-field": "四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-proportional-stretchOnly",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOrShrink-proportional",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "bottom-left"],
"layout": {
"text-field": "四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOrShrink-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOnly-proportional",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "bottom-middle"],
"layout": {
"text-field": "四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-proportional-proportional",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "bottom-right"],
"layout": {
"text-field": "四",
"text-size": 20,
"text-anchor": "center",
"text-writing-mode": ["vertical"],
"text-font": [ "NotoCJK" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-proportional-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
}
]
}

BIN
metrics/integration/render-tests/icon-text-fit/textFit-grid-short/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

182
metrics/integration/render-tests/icon-text-fit/textFit-grid-short/style.json Normal file
View File

@@ -0,0 +1,182 @@
{
"version": 8,
"metadata": {
"test": {
"width": 360,
"height": 180,
"description": "This draws the matrix of all possible combinations of textFitWidth (columns) and textFitHeight (rows) where they proceed from the top-left in the order stretchOrShrink, stretchOnly, and proportional. This version shows the effect of a short string with a narrower aspect ratio than the source image."
}
},
"sources": {
"geojson": {
"type": "geojson",
"data": "local://geojson/grid.json"
}
},
"sprite": "local://sprites/textFit",
"glyphs": "local://glyphs/{fontstack}/{range}.pbf",
"layers": [
{
"id": "wh-stretchOrShrink-stretchOrShrink",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "top-left"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOrShrink-stretchOrShrink",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOnly-stretchOrShrink",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "top-middle"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOnly-stretchOrShrink",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-proportional-stretchOrShrink",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "top-right"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-proportional-stretchOrShrink",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOrShrink-stretchOnly",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "middle-left"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOrShrink-stretchOnly",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOnly-stretchOnly",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "middle-middle"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOnly-stretchOnly",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-proportional-stretchOnly",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "middle-right"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-proportional-stretchOnly",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOrShrink-proportional",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "bottom-left"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOrShrink-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-stretchOnly-proportional",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "bottom-middle"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-stretchOnly-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
},
{
"id": "wh-proportional-proportional",
"type": "symbol",
"source": "geojson",
"filter": ["==", "cell", "bottom-right"],
"layout": {
"text-field": "1",
"text-size": 20,
"text-anchor": "center",
"text-font": [ "Open Sans Semibold", "Arial Unicode MS Bold" ],
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-image": "textFit-wh-proportional-proportional",
"icon-text-fit": "both",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
}
]
}

13
metrics/integration/sprites/stretch.json
View File

@@ -20,6 +20,19 @@
"sdf": false,
"content": [10, 10, 30, 30]
},
"nine-part-textfit-wh-stretchOnly-proportional": {
"x": 0,
"y": 0,
"width": 40,
"height": 40,
"pixelRatio": 2,
"stretchX": [[10, 30]],
"stretchY": [[10, 30]],
"sdf": false,
"content": [10, 10, 30, 30],
"textFitWidth": "stretchOnly",
"textFitHeight": "proportional"
},
"fifteen-part": {
"x": 50,
"y": 0,

119
metrics/integration/sprites/textFit.json Normal file
View File

@@ -0,0 +1,119 @@
{
"textFit-wh-stretchOrShrink-stretchOrShrink": {
"x": 0,
"y": 0,
"width": 100,
"height": 70,
"pixelRatio": 1,
"stretchX": [[9, 91]],
"stretchY": [[9, 61]],
"sdf": false,
"content": [9, 9, 91, 61],
"textFitWidth": "stretchOrShrink",
"textFitHeight": "stretchOrShrink"
},
"textFit-wh-stretchOnly-stretchOrShrink": {
"x": 0,
"y": 0,
"width": 100,
"height": 70,
"pixelRatio": 1,
"stretchX": [[9, 91]],
"stretchY": [[9, 61]],
"sdf": false,
"content": [9, 9, 91, 61],
"textFitWidth": "stretchOnly",
"textFitHeight": "stretchOrShrink"
},
"textFit-wh-proportional-stretchOrShrink": {
"x": 0,
"y": 0,
"width": 100,
"height": 70,
"pixelRatio": 1,
"stretchX": [[9, 91]],
"stretchY": [[9, 61]],
"sdf": false,
"content": [9, 9, 91, 61],
"textFitWidth": "proportional",
"textFitHeight": "stretchOrShrink"
},
"textFit-wh-stretchOrShrink-stretchOnly": {
"x": 0,
"y": 0,
"width": 100,
"height": 70,
"pixelRatio": 1,
"stretchX": [[9, 91]],
"stretchY": [[9, 61]],
"sdf": false,
"content": [9, 9, 91, 61],
"textFitWidth": "stretchOrShrink",
"textFitHeight": "stretchOnly"
},
"textFit-wh-stretchOnly-stretchOnly": {
"x": 0,
"y": 0,
"width": 100,
"height": 70,
"pixelRatio": 1,
"stretchX": [[9, 91]],
"stretchY": [[9, 61]],
"sdf": false,
"content": [9, 9, 91, 61],
"textFitWidth": "stretchOnly",
"textFitHeight": "stretchOnly"
},
"textFit-wh-proportional-stretchOnly": {
"x": 0,
"y": 0,
"width": 100,
"height": 70,
"pixelRatio": 1,
"stretchX": [[9, 91]],
"stretchY": [[9, 61]],
"sdf": false,
"content": [9, 9, 91, 61],
"textFitWidth": "proportional",
"textFitHeight": "stretchOnly"
},
"textFit-wh-stretchOrShrink-proportional": {
"x": 0,
"y": 0,
"width": 100,
"height": 70,
"pixelRatio": 1,
"stretchX": [[9, 91]],
"stretchY": [[9, 61]],
"sdf": false,
"content": [9, 9, 91, 61],
"textFitWidth": "stretchOrShrink",
"textFitHeight": "proportional"
},
"textFit-wh-stretchOnly-proportional": {
"x": 0,
"y": 0,
"width": 100,
"height": 70,
"pixelRatio": 1,
"stretchX": [[9, 91]],
"stretchY": [[9, 61]],
"sdf": false,
"content": [9, 9, 91, 61],
"textFitWidth": "stretchOnly",
"textFitHeight": "proportional"
},
"textFit-wh-proportional-proportional": {
"x": 0,
"y": 0,
"width": 100,
"height": 70,
"pixelRatio": 1,
"stretchX": [[9, 91]],
"stretchY": [[9, 61]],
"sdf": false,
"content": [9, 9, 91, 61],
"textFitWidth": "proportional",
"textFitHeight": "proportional"
}
}

BIN
metrics/integration/sprites/textFit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 421 B