Add support for padding in all 4 directions.

mapbox · Jun 13, 2016 · 6002373 · 6002373
1 parent 4d63193
commit 6002373
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 17 deletions.
diff --git a/js/symbol/quads.js b/js/symbol/quads.js
@@ -77,16 +77,18 @@ function getIconQuads(anchor, shapedIcon, boxScale, line, layout, alongLine, sha
             textBottom = shapedText.bottom * size,
             textWidth = textRight - textLeft,
             textHeight = textBottom - textTop,
-            padX = layout['icon-text-fit-padding'][0],
-            padY = layout['icon-text-fit-padding'][1],
+            padT = layout['icon-text-fit-padding'][0],
+            padR = layout['icon-text-fit-padding'][1],
+            padB = layout['icon-text-fit-padding'][2],
+            padL = layout['icon-text-fit-padding'][3],
             offsetY = layout['icon-text-fit'] === 'width' ? (textHeight - iconHeight) * 0.5 : 0,
             offsetX = layout['icon-text-fit'] === 'height' ? (textWidth - iconWidth) * 0.5 : 0,
             width = layout['icon-text-fit'] === 'width' || layout['icon-text-fit'] === 'both' ? textWidth : iconWidth,
             height = layout['icon-text-fit'] === 'height' || layout['icon-text-fit'] === 'both' ? textHeight : iconHeight;
-        tl = new Point(textLeft + offsetX - padX,         textTop + offsetY - padY);
-        tr = new Point(textLeft + offsetX + padX + width, textTop + offsetY - padY);
-        br = new Point(textLeft + offsetX + padX + width, textTop + offsetY + padY + height);
-        bl = new Point(textLeft + offsetX - padX,         textTop + offsetY + padY + height);
+        tl = new Point(textLeft + offsetX - padL,         textTop + offsetY - padT);
+        tr = new Point(textLeft + offsetX + padR + width, textTop + offsetY - padT);
+        br = new Point(textLeft + offsetX + padR + width, textTop + offsetY + padB + height);
+        bl = new Point(textLeft + offsetX - padL,         textTop + offsetY + padB + height);
     // Normal icon size mode
     } else {
         tl = new Point(left, top);

diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "mapbox-gl-function": "^1.2.1",
     "mapbox-gl-js-supported": "^1.1.0",
     "mapbox-gl-shaders": "mapbox/mapbox-gl-shaders#09ee512cd59a8fb1a241c78833b7c8022bf4f263",
-    "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#ed8e5db07a2c5fa5b7826fd4b0fc8dbb81d56853",
+    "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#b19dd370b02dfb58cc02820fba0ad6dac3bf78a0",
     "minifyify": "^7.0.1",
     "pbf": "^1.3.2",
     "pngjs": "^2.2.0",

diff --git a/test/js/symbol/quads.test.js b/test/js/symbol/quads.test.js
@@ -95,7 +95,7 @@ test('getIconQuads text-fit', function(t) {
         var quads = getIconQuads(anchor, fakeShapedIcon, 2, [], {
             'text-size': 24,
             'icon-text-fit': 'width',
-            'icon-text-fit-padding': [ 0, 0 ]
+            'icon-text-fit-padding': [ 0, 0, 0, 0 ]
         }, false, fakeShapedText);
         t.deepEqual(quads[0].tl, { x: -60, y: 0 });
         t.deepEqual(quads[0].tr, { x: 20, y: 0 });
@@ -110,7 +110,7 @@ test('getIconQuads text-fit', function(t) {
         var quads = getIconQuads(anchor, fakeShapedIcon, 2, [], {
             'text-size': 12,
             'icon-text-fit': 'width',
-            'icon-text-fit-padding': [ 0, 0 ]
+            'icon-text-fit-padding': [ 0, 0, 0, 0 ]
         }, false, fakeShapedText);
         t.deepEqual(quads[0].tl, { x: -30, y: -5 });
         t.deepEqual(quads[0].tr, { x: 10, y: -5 });
@@ -126,7 +126,7 @@ test('getIconQuads text-fit', function(t) {
         var quads = getIconQuads(anchor, fakeShapedIcon, 2, [], {
             'text-size': 12,
             'icon-text-fit': 'width',
-            'icon-text-fit-padding': [ 10, 5 ]
+            'icon-text-fit-padding': [ 5, 10, 5, 10 ]
         }, false, fakeShapedText);
         t.deepEqual(quads[0].tl, { x: -40, y: -10 });
         t.deepEqual(quads[0].tr, { x: 20, y: -10 });
@@ -141,7 +141,7 @@ test('getIconQuads text-fit', function(t) {
         var quads = getIconQuads(anchor, fakeShapedIcon, 2, [], {
             'text-size': 24,
             'icon-text-fit': 'height',
-            'icon-text-fit-padding': [ 0, 0 ]
+            'icon-text-fit-padding': [ 0, 0, 0, 0 ]
         }, false, fakeShapedText);
         t.deepEqual(quads[0].tl, { x: -30, y: -10 });
         t.deepEqual(quads[0].tr, { x: -10, y: -10 });
@@ -156,7 +156,7 @@ test('getIconQuads text-fit', function(t) {
         var quads = getIconQuads(anchor, fakeShapedIcon, 2, [], {
             'text-size': 12,
             'icon-text-fit': 'height',
-            'icon-text-fit-padding': [ 0, 0 ]
+            'icon-text-fit-padding': [ 0, 0, 0, 0 ]
         }, false, fakeShapedText);
         t.deepEqual(quads[0].tl, { x: -20, y: -5 });
         t.deepEqual(quads[0].tr, { x: 0, y: -5 });
@@ -172,7 +172,7 @@ test('getIconQuads text-fit', function(t) {
         var quads = getIconQuads(anchor, fakeShapedIcon, 2, [], {
             'text-size': 12,
             'icon-text-fit': 'height',
-            'icon-text-fit-padding': [ 10, 5 ]
+            'icon-text-fit-padding': [ 5, 10, 5, 10 ]
         }, false, fakeShapedText);
         t.deepEqual(quads[0].tl, { x: -30, y: -10 });
         t.deepEqual(quads[0].tr, { x: 10, y: -10 });
@@ -186,7 +186,7 @@ test('getIconQuads text-fit', function(t) {
         var quads = getIconQuads(anchor, fakeShapedIcon, 2, [], {
             'text-size': 24,
             'icon-text-fit': 'both',
-            'icon-text-fit-padding': [ 0, 0 ]
+            'icon-text-fit-padding': [ 0, 0, 0, 0 ]
         }, false, fakeShapedText);
         t.deepEqual(quads[0].tl, { x: -60, y: -10 });
         t.deepEqual(quads[0].tr, { x: 20, y: -10 });
@@ -200,7 +200,7 @@ test('getIconQuads text-fit', function(t) {
         var quads = getIconQuads(anchor, fakeShapedIcon, 2, [], {
             'text-size': 12,
             'icon-text-fit': 'both',
-            'icon-text-fit-padding': [ 0, 0 ]
+            'icon-text-fit-padding': [ 0, 0, 0, 0 ]
         }, false, fakeShapedText);
         t.deepEqual(quads[0].tl, { x: -30, y: -5 });
         t.deepEqual(quads[0].tr, { x: 10, y: -5 });
@@ -209,13 +209,13 @@ test('getIconQuads text-fit', function(t) {
         t.end();
     });
 
-    t.test('icon-text-fit: both, x textSize', function(t) {
+    t.test('icon-text-fit: both, x textSize, + padding', function(t) {
         // - Uses text width + height (adjusted for textSize)
         // - Applies padding x, padding y
         var quads = getIconQuads(anchor, fakeShapedIcon, 2, [], {
             'text-size': 12,
             'icon-text-fit': 'both',
-            'icon-text-fit-padding': [ 10, 5 ]
+            'icon-text-fit-padding': [ 5, 10, 5, 10 ]
         }, false, fakeShapedText);
         t.deepEqual(quads[0].tl, { x: -40, y: -10 });
         t.deepEqual(quads[0].tr, { x: 20, y: -10 });
@@ -224,6 +224,21 @@ test('getIconQuads text-fit', function(t) {
         t.end();
     });
 
+    t.test('icon-text-fit: both, padding t/r/b/l', function(t) {
+        // - Uses text width + height (adjusted for textSize)
+        // - Applies padding t/r/b/l
+        var quads = getIconQuads(anchor, fakeShapedIcon, 2, [], {
+            'text-size': 12,
+            'icon-text-fit': 'both',
+            'icon-text-fit-padding': [ 0, 5, 10, 15 ]
+        }, false, fakeShapedText);
+        t.deepEqual(quads[0].tl, { x: -45, y: -5 });
+        t.deepEqual(quads[0].tr, { x: 15, y: -5 });
+        t.deepEqual(quads[0].bl, { x: -45, y: 25 });
+        t.deepEqual(quads[0].br, { x: 15, y: 25 });
+        t.end();
+    });
+
     t.end();
 });