make text background box width configurable

tangrams · Jul 11, 2020 · 6cf2090 · 6cf2090
1 parent 894c8ed
commit 6cf2090
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/src/styles/text/text_canvas.js b/src/styles/text/text_canvas.js
@@ -131,7 +131,7 @@ export default class TextCanvas {
 
     // Computes width and height of text based on current font style
     // Includes word wrapping, returns size info for whole text block and individual lines
-    textSize(style, text, { transform, text_wrap, max_lines, stroke_width = 0, background_color, background_stroke_width = 0, underline_width = 0, supersample }) {
+    textSize(style, text, { transform, text_wrap, max_lines, stroke_width = 0, background_color, background_stroke_width = 0, background_width, underline_width = 0, supersample }) {
         // Check cache first
         TextCanvas.cache.text[style] = TextCanvas.cache.text[style] || {};
         if (TextCanvas.cache.text[style][text]) {
@@ -147,7 +147,10 @@ export default class TextCanvas {
         const ctx = this.context;
         const vertical_buffer = this.vertical_text_buffer * dpr;
         const horizontal_buffer = (stroke_width + this.horizontal_text_buffer) * dpr;
-        const background_size = (background_color || background_stroke_width) ? (this.background_size + background_stroke_width) * dpr : 0;
+
+        background_width = background_width != null ? background_width : this.background_size; // apply default background width
+        const background_size = (background_color || background_stroke_width) ? (background_width + background_stroke_width) * dpr : 0;
+
         const leading = (2 + underline_width + (underline_width ? (stroke_width + 1) : 0)) * dpr; // adjust for underline and text stroke
         const line_height = this.px_size + leading; // px_size already in device pixels
 

diff --git a/src/styles/text/text_labels.js b/src/styles/text/text_labels.js
@@ -293,6 +293,7 @@ export const TextLabels = {
         if (draw.font.background) {
             draw.font.background.color = StyleParser.createPropertyCache(draw.font.background.color);
             draw.font.background.alpha = StyleParser.createPropertyCache(draw.font.background.alpha);
+            draw.font.background.width = StyleParser.createPropertyCache(draw.font.background.width, StyleParser.parsePositiveNumber);
             if (draw.font.background.stroke) {
                 draw.font.background.stroke.color = StyleParser.createPropertyCache(draw.font.background.stroke.color);
                 draw.font.background.stroke.alpha = StyleParser.createPropertyCache(draw.font.background.stroke.alpha);

diff --git a/src/styles/text/text_settings.js b/src/styles/text/text_settings.js
@@ -18,6 +18,7 @@ const TextSettings = {
             settings.underline_color,
             settings.underline_width,
             settings.background_color,
+            settings.background_width,
             settings.background_stroke_color,
             settings.background_stroke_width,
             settings.transform,
@@ -75,6 +76,9 @@ const TextSettings = {
             // Background fill
             style.background_color = StyleParser.evalCachedColorPropertyWithAlpha(draw.font.background.color, draw.font.background.alpha, context);
             style.background_color = Utils.toCSSColor(style.background_color); // convert to CSS for Canvas
+            if (style.background_color) {
+                style.background_width = StyleParser.evalCachedProperty(draw.font.background.width, context);
+            }
 
             // Background stroke
             style.background_stroke_color =