Feat: Add backgroundBorderRadius to TextLayer (#9447)

Author: CANEVETGASPARD

docs/api-reference/layers/text-layer.md

@@ -198,6 +198,16 @@ If `true`, the text always faces camera. Otherwise the text faces up (z).
 
 Whether to render background for the text blocks.
 
+#### `backgroundBorderRadius` (number | number[4], optional) {#backgroundBorderRadius}
+
+- Default `0`
+
+The border-radius of the background, a number or an array of 4 numbers.
+
++ If a number is supplied, it is the same border radius in pixel for all corners.
++ If an array of 4 is supplied, it is interpreted as `[bottom_right_corner, top_right_corner, bottom_left_corner, top_left_corner]` border radius in pixel.
+
+
 #### `backgroundPadding` (number[4], optional) {#backgroundpadding}
 
 - Default `[0, 0, 0, 0]`

examples/layer-browser/src/examples/core-layers.js

@@ -391,6 +391,15 @@ const TextLayerExample = {
       onUpdate: (newValue, newSettings, change) => {
         change('backgroundPadding', [newValue, newValue]);
       }
+    },
+    backgroundBorderRadius: {type: 'compound', elements: ['borderRadius']},
+    borderRadius: {
+      type: 'number',
+      min: 0,
+      max: 100,
+      onUpdate: (newValue, newSettings, change) => {
+        change('backgroundBorderRadius', newValue);
+      }
     }
   },
   props: {

modules/layers/src/text-layer/text-background-layer/text-background-layer-fragment.glsl.ts

@@ -16,21 +16,54 @@ in vec2 dimensions;
 
 out vec4 fragColor;
 
+float round_rect(vec2 p, vec2 size, vec4 radii) {
+  // Convert p and size to center-based coordinates [-0.5, 0.5]
+  vec2 pixelPositionCB = (p - 0.5) * size;
+  vec2 sizeCB = size * 0.5;
+
+  float maxBorderRadius = min(size.x, size.y) * 0.5;
+  vec4 borderRadius = vec4(min(radii, maxBorderRadius));
+
+  // from https://www.shadertoy.com/view/4llXD7
+  borderRadius.xy =
+      (pixelPositionCB.x > 0.0) ? borderRadius.xy : borderRadius.zw;
+  borderRadius.x = (pixelPositionCB.y > 0.0) ? borderRadius.x : borderRadius.y;
+  vec2 q = abs(pixelPositionCB) - sizeCB + borderRadius.x;
+  return -(min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - borderRadius.x);
+}
+
+float rect(vec2 p, vec2 size) {
+  vec2 pixelPosition = p * size;
+  return min(min(pixelPosition.x, size.x - pixelPosition.x),
+             min(pixelPosition.y, size.y - pixelPosition.y));
+}
+
+vec4 get_stroked_fragColor(float dist) {
+  float isBorder = smoothedge(dist, vLineWidth);
+  return mix(vFillColor, vLineColor, isBorder);
+}
+
 void main(void) {
   geometry.uv = uv;
 
-  vec2 pixelPosition = uv * dimensions;
-  if (textBackground.stroked) {
-    float distToEdge = min(
-      min(pixelPosition.x, dimensions.x - pixelPosition.x),
-      min(pixelPosition.y, dimensions.y - pixelPosition.y)
-    );
-    float isBorder = smoothedge(distToEdge, vLineWidth);
-    fragColor = mix(vFillColor, vLineColor, isBorder);
+  if (textBackground.borderRadius != vec4(0.0)) {
+    float distToEdge = round_rect(uv, dimensions, textBackground.borderRadius);
+    if (textBackground.stroked) {
+      fragColor = get_stroked_fragColor(distToEdge);
+    } else {
+      fragColor = vFillColor;
+    }
+    // add border radius
+    float shapeAlpha = smoothedge(-distToEdge, 0.0);
+    fragColor.a *= shapeAlpha;
   } else {
-    fragColor = vFillColor;
+    if (textBackground.stroked) {
+      float distToEdge = rect(uv, dimensions);
+      fragColor = get_stroked_fragColor(distToEdge);
+    } else {
+      fragColor = vFillColor;
+    }
   }
-
   DECKGL_FILTER_COLOR(fragColor, geometry);
 }
 `;

modules/layers/src/text-layer/text-background-layer/text-background-layer-uniforms.ts

@@ -10,6 +10,7 @@ uniform textBackgroundUniforms {
   float sizeScale;
   float sizeMinPixels;
   float sizeMaxPixels;
+  vec4 borderRadius;
   vec4 padding;
   highp int sizeUnits;
   bool stroked;
@@ -21,6 +22,7 @@ export type TextBackgroundProps = {
   sizeScale: number;
   sizeMinPixels: number;
   sizeMaxPixels: number;
+  borderRadius: [number, number, number, number];
   padding: [number, number, number, number];
   sizeUnits: number;
   stroked: boolean;
@@ -35,6 +37,7 @@ export const textBackgroundUniforms = {
     sizeScale: 'f32',
     sizeMinPixels: 'f32',
     sizeMaxPixels: 'f32',
+    borderRadius: 'vec4<f32>',
     padding: 'vec4<f32>',
     sizeUnits: 'i32',
     stroked: 'f32'

modules/layers/src/text-layer/text-background-layer/text-background-layer.ts

@@ -29,6 +29,7 @@ type _TextBackgroundLayerProps<DataT> = {
   sizeMinPixels?: number;
   sizeMaxPixels?: number;
 
+  borderRadius?: number | [number, number, number, number];
   padding?: [number, number] | [number, number, number, number];
 
   getPosition?: Accessor<DataT, Position>;
@@ -51,6 +52,7 @@ const defaultProps: DefaultProps<TextBackgroundLayerProps> = {
   sizeMinPixels: 0,
   sizeMaxPixels: Number.MAX_SAFE_INTEGER,
 
+  borderRadius: {type: 'object', value: 0},
   padding: {type: 'array', value: [0, 0, 0, 0]},
 
   getPosition: {type: 'accessor', value: (x: any) => x.position},
@@ -142,16 +144,21 @@ export default class TextBackgroundLayer<DataT = any, ExtraPropsT extends {} = {
   draw({uniforms}) {
     const {billboard, sizeScale, sizeUnits, sizeMinPixels, sizeMaxPixels, getLineWidth} =
       this.props;
-    let {padding} = this.props;
+    let {padding, borderRadius} = this.props;
 
     if (padding.length < 4) {
       padding = [padding[0], padding[1], padding[0], padding[1]];
     }
 
+    if (!Array.isArray(borderRadius)) {
+      borderRadius = [borderRadius, borderRadius, borderRadius, borderRadius];
+    }
+
     const model = this.state.model!;
     const textBackgroundProps: TextBackgroundProps = {
       billboard,
       stroked: Boolean(getLineWidth),
+      borderRadius,
       padding: padding as [number, number, number, number],
       sizeUnits: UNIT[sizeUnits],
       sizeScale,

modules/layers/src/text-layer/text-layer.ts

@@ -87,6 +87,12 @@ type _TextLayerProps<DataT> = {
    * @default 0
    */
   getBorderWidth?: Accessor<DataT, number>;
+  /** The border radius of the background.
+   * If a number is supplied, it is the same border radius in pixel for all corners.
+   * If an array of 4 is supplied, it is interpreted as `[bottom_right_corner, top_right_corner, bottom_left_corner, top_left_corner]` border radius in pixel.
+   * @default 0
+   */
+  backgroundBorderRadius?: number | [number, number, number, number];
   /**
    * The padding of the background..
    * If an array of 2 is supplied, it is interpreted as `[padding_x, padding_y]` in pixels.
@@ -194,6 +200,7 @@ const defaultProps: DefaultProps<TextLayerProps> = {
   getBackgroundColor: {type: 'accessor', value: [255, 255, 255, 255]},
   getBorderColor: {type: 'accessor', value: DEFAULT_COLOR},
   getBorderWidth: {type: 'accessor', value: 0},
+  backgroundBorderRadius: {type: 'object', value: 0},
   backgroundPadding: {type: 'array', value: [0, 0, 0, 0]},
 
   characterSet: {type: 'object', value: DEFAULT_FONT_SETTINGS.characterSet},
@@ -478,6 +485,7 @@ export default class TextLayer<DataT = any, ExtraPropsT extends {} = {}> extends
       getBackgroundColor,
       getBorderColor,
       getBorderWidth,
+      backgroundBorderRadius,
       backgroundPadding,
       background,
       billboard,
@@ -503,6 +511,7 @@ export default class TextLayer<DataT = any, ExtraPropsT extends {} = {}> extends
             getFillColor: getBackgroundColor,
             getLineColor: getBorderColor,
             getLineWidth: getBorderWidth,
+            borderRadius: backgroundBorderRadius,
             padding: backgroundPadding,
 
             // props shared with characters layer