From 0de85c7fe3aedb1bb617b94ced42e7525bb74860 Mon Sep 17 00:00:00 2001
From: Xiaoji Chen <cxiaoji@gmail.com>
Date: Mon, 26 Jul 2021 14:38:46 -0700
Subject: [PATCH] TextLayer supports backgroundPadding as vec4

---
 docs/api-reference/layers/text-layer.md                    | 7 +++++--
 .../text-background-layer-vertex.glsl.js                   | 6 +++---
 .../text-background-layer/text-background-layer.js         | 7 +++++--
 modules/layers/src/text-layer/text-layer.js                | 2 +-
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/docs/api-reference/layers/text-layer.md b/docs/api-reference/layers/text-layer.md
index 46c96277f6d..3a329a9314e 100644
--- a/docs/api-reference/layers/text-layer.md
+++ b/docs/api-reference/layers/text-layer.md
@@ -114,9 +114,12 @@ Whether to render background for the text blocks.
 
 ##### `backgroundPadding` (Array, optional)
 
-- Default `[0, 0]`
+- Default `[0, 0, 0, 0]`
 
-The padding of the background, `[padding_x, padding_y]` in pixels.
+The padding of the background, an array of either 2 or 4 numbers.
+
++ If an array of 2 is supplied, it is interpreted as `[padding_x, padding_y]` in pixels.
++ If an array of 4 is supplied, it is interpreted as `[padding_left, padding_top, padding_right, padding_bottom]` in pixels.
 
 ##### `fontFamily` (String, optional)
 
diff --git a/modules/layers/src/text-layer/text-background-layer/text-background-layer-vertex.glsl.js b/modules/layers/src/text-layer/text-background-layer/text-background-layer-vertex.glsl.js
index cf8b2597411..9195a6de225 100644
--- a/modules/layers/src/text-layer/text-background-layer/text-background-layer-vertex.glsl.js
+++ b/modules/layers/src/text-layer/text-background-layer/text-background-layer-vertex.glsl.js
@@ -19,7 +19,7 @@ uniform float opacity;
 uniform float sizeScale;
 uniform float sizeMinPixels;
 uniform float sizeMaxPixels;
-uniform vec2 padding;
+uniform vec4 padding;
 
 varying vec4 vFillColor;
 varying vec4 vLineColor;
@@ -50,9 +50,9 @@ void main(void) {
     sizeMinPixels, sizeMaxPixels
   );
 
-  dimensions = instanceRects.zw * sizePixels + padding;
+  dimensions = instanceRects.zw * sizePixels + padding.xy + padding.zw;
 
-  vec2 pixelOffset = (positions * instanceRects.zw + instanceRects.xy) * sizePixels + padding * (positions * 2.0 - 1.0);
+  vec2 pixelOffset = (positions * instanceRects.zw + instanceRects.xy) * sizePixels + mix(-padding.xy, padding.zw, positions);
   pixelOffset = rotate_by_angle(pixelOffset, instanceAngles);
   pixelOffset += instancePixelOffsets;
   pixelOffset.y *= -1.0;
diff --git a/modules/layers/src/text-layer/text-background-layer/text-background-layer.js b/modules/layers/src/text-layer/text-background-layer/text-background-layer.js
index 7510af606d3..ea7b3c267e8 100644
--- a/modules/layers/src/text-layer/text-background-layer/text-background-layer.js
+++ b/modules/layers/src/text-layer/text-background-layer/text-background-layer.js
@@ -12,7 +12,7 @@ const defaultProps = {
   sizeMinPixels: 0,
   sizeMaxPixels: Number.MAX_SAFE_INTEGER,
 
-  padding: {type: 'array', value: [0, 0]},
+  padding: {type: 'array', value: [0, 0, 0, 0]},
 
   getPosition: {type: 'accessor', value: x => x.position},
   getSize: {type: 'accessor', value: 1},
@@ -101,11 +101,14 @@ export default class TextBackgroundLayer extends Layer {
       sizeUnits,
       sizeMinPixels,
       sizeMaxPixels,
-      padding,
       getLineWidth
     } = this.props;
+    let {padding} = this.props;
 
     const sizeScaleMultiplier = sizeUnits === 'pixels' ? viewport.metersPerPixel : 1;
+    if (padding.length < 4) {
+      padding = [padding[0], padding[1], padding[0], padding[1]];
+    }
 
     this.state.model
       .setUniforms(uniforms)
diff --git a/modules/layers/src/text-layer/text-layer.js b/modules/layers/src/text-layer/text-layer.js
index 2f03a1b6792..5797dcd7700 100644
--- a/modules/layers/src/text-layer/text-layer.js
+++ b/modules/layers/src/text-layer/text-layer.js
@@ -71,7 +71,7 @@ const defaultProps = {
   getBackgroundColor: {type: 'accessor', value: [255, 255, 255, 255]},
   getBorderColor: {type: 'accessor', value: DEFAULT_COLOR},
   getBorderWidth: {type: 'accessor', value: 0},
-  backgroundPadding: {type: 'array', value: [0, 0]},
+  backgroundPadding: {type: 'array', value: [0, 0, 0, 0]},
 
   characterSet: {type: 'object', value: DEFAULT_CHAR_SET},
   fontFamily: DEFAULT_FONT_FAMILY,