TextLayer supports backgroundPadding as vec4

visgl · Jul 26, 2021 · 0de85c7 · 0de85c7
1 parent 8e2167c
commit 0de85c7
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,