Add text bubble style customization

Supersedes #14

Author: GarboMuffin

src/TextBubbleSkin.js

@@ -3,25 +3,23 @@ const twgl = require('twgl.js');
 const CanvasMeasurementProvider = require('./util/canvas-measurement-provider');
 const Skin = require('./Skin');
 
-const BubbleStyle = {
-    MAX_LINE_WIDTH: 170, // Maximum width, in Scratch pixels, of a single line of text
-
-    MIN_WIDTH: 50, // Minimum width, in Scratch pixels, of a text bubble
-    STROKE_WIDTH: 4, // Thickness of the stroke around the bubble. Only half's visible because it's drawn under the fill
-    PADDING: 10, // Padding around the text area
-    CORNER_RADIUS: 16, // Radius of the rounded corners
-    TAIL_HEIGHT: 12, // Height of the speech bubble's "tail". Probably should be a constant.
-
-    FONT: 'Helvetica', // Font to render the text with
-    FONT_SIZE: 14, // Font size, in Scratch pixels
-    FONT_HEIGHT_RATIO: 0.9, // Height, in Scratch pixels, of the text, as a proportion of the font's size
-    LINE_HEIGHT: 16, // Spacing between each line of text
-
-    COLORS: {
-        BUBBLE_FILL: 'white',
-        BUBBLE_STROKE: 'rgba(0, 0, 0, 0.15)',
-        TEXT_FILL: '#575E75'
-    }
+const DEFAULT_BUBBLE_STYLE = {
+    maxLineWidth: 170, // Maximum width, in Scratch pixels, of a single line of text
+
+    minWidth: 50, // Minimum width, in Scratch pixels, of a text bubble
+    strokeWidth: 4, // Thickness of the stroke around the bubble. Only half's visible because it's drawn under the fill
+    padding: 10, // Padding around the text area
+    cornerRadius: 16, // Radius of the rounded corners
+    tailHeight: 12, // Height of the speech bubble's "tail". Probably should be a constant.
+
+    font: 'Helvetica', // Font to render the text with
+    fontSize: 14, // Font size, in Scratch pixels
+    fontHeightRatio: 0.9, // Height, in Scratch pixels, of the text, as a proportion of the font's size
+    lineHeight: 16, // Spacing between each line of text
+
+    bubbleFill: 'white',
+    bubbleStroke: 'rgba(0, 0, 0, 0.15)',
+    textFill: '#575E75'
 };
 
 const MAX_SCALE = 10;
@@ -64,6 +62,13 @@ class TextBubbleSkin extends Skin {
         /** @type {boolean} */
         this._textureDirty = true;
 
+        /**
+         * Use setStyle() instead of modfying directly.
+         * Supplied values are considered trusted and will not be further checked or sanitized.
+         * Updating skin style will not reposition drawables.
+         */
+        this._style = DEFAULT_BUBBLE_STYLE;
+
         this.measurementProvider = new CanvasMeasurementProvider(this._canvas.getContext('2d'));
         this.textWrapper = renderer.createTextWrapper(this.measurementProvider);
 
@@ -108,18 +113,33 @@ class TextBubbleSkin extends Skin {
         this.emitWasAltered();
     }
 
+    /**
+     * Change style used for rendering the bubble. Properties not specified will be unchanged.
+     * Given argument will be copied internally, so you can freely change it later without
+     * affecting the skin.
+     * @param {object} newStyle New styles to be applied.
+     */
+    setStyle (newStyle) {
+        this._style = Object.assign({}, this._style, newStyle);
+        this._restyleCanvas();
+        this._textDirty = true;
+        this._textureDirty = true;
+        this.emitWasAltered();
+    }
+
     /**
      * Re-style the canvas after resizing it. This is necessary to ensure proper text measurement.
      */
     _restyleCanvas () {
-        this._canvas.getContext('2d').font = `${BubbleStyle.FONT_SIZE}px ${BubbleStyle.FONT}, sans-serif`;
+        this.measurementProvider.clearCache();
+        this._canvas.getContext('2d').font = `${this._style.fontSize}px ${this._style.font}, sans-serif`;
     }
 
     /**
      * Update the array of wrapped lines and the text dimensions.
      */
     _reflowLines () {
-        this._lines = this.textWrapper.wrapText(BubbleStyle.MAX_LINE_WIDTH, this._text);
+        this._lines = this.textWrapper.wrapText(this._style.maxLineWidth, this._text);
 
         // Measure width of longest line to avoid extra-wide bubbles
         let longestLineWidth = 0;
@@ -128,14 +148,14 @@ class TextBubbleSkin extends Skin {
         }
 
         // Calculate the canvas-space sizes of the padded text area and full text bubble
-        const paddedWidth = Math.max(longestLineWidth, BubbleStyle.MIN_WIDTH) + (BubbleStyle.PADDING * 2);
-        const paddedHeight = (BubbleStyle.LINE_HEIGHT * this._lines.length) + (BubbleStyle.PADDING * 2);
+        const paddedWidth = Math.max(longestLineWidth, this._style.minWidth) + (this._style.padding * 2);
+        const paddedHeight = (this._style.lineHeight * this._lines.length) + (this._style.padding * 2);
 
         this._textAreaSize.width = paddedWidth;
         this._textAreaSize.height = paddedHeight;
 
-        this._size[0] = paddedWidth + BubbleStyle.STROKE_WIDTH;
-        this._size[1] = paddedHeight + BubbleStyle.STROKE_WIDTH + BubbleStyle.TAIL_HEIGHT;
+        this._size[0] = paddedWidth + this._style.strokeWidth;
+        this._size[1] = paddedHeight + this._style.strokeWidth + this._style.tailHeight;
 
         this._textDirty = false;
     }
@@ -158,14 +178,13 @@ class TextBubbleSkin extends Skin {
         // Resize the canvas to the correct screen-space size
         this._canvas.width = Math.ceil(this._size[0] * scale);
         this._canvas.height = Math.ceil(this._size[1] * scale);
-        this._restyleCanvas();
 
         // Reset the transform before clearing to ensure 100% clearage
         ctx.setTransform(1, 0, 0, 1, 0, 0);
         ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
 
         ctx.scale(scale, scale);
-        ctx.translate(BubbleStyle.STROKE_WIDTH * 0.5, BubbleStyle.STROKE_WIDTH * 0.5);
+        ctx.translate(this._style.strokeWidth * 0.5, this._style.strokeWidth * 0.5);
 
         // If the text bubble points leftward, flip the canvas
         ctx.save();
@@ -176,16 +195,16 @@ class TextBubbleSkin extends Skin {
 
         // Draw the bubble's rounded borders
         ctx.beginPath();
-        ctx.moveTo(BubbleStyle.CORNER_RADIUS, paddedHeight);
-        ctx.arcTo(0, paddedHeight, 0, paddedHeight - BubbleStyle.CORNER_RADIUS, BubbleStyle.CORNER_RADIUS);
-        ctx.arcTo(0, 0, paddedWidth, 0, BubbleStyle.CORNER_RADIUS);
-        ctx.arcTo(paddedWidth, 0, paddedWidth, paddedHeight, BubbleStyle.CORNER_RADIUS);
-        ctx.arcTo(paddedWidth, paddedHeight, paddedWidth - BubbleStyle.CORNER_RADIUS, paddedHeight,
-            BubbleStyle.CORNER_RADIUS);
+        ctx.moveTo(this._style.cornerRadius, paddedHeight);
+        ctx.arcTo(0, paddedHeight, 0, paddedHeight - this._style.cornerRadius, this._style.cornerRadius);
+        ctx.arcTo(0, 0, paddedWidth, 0, this._style.cornerRadius);
+        ctx.arcTo(paddedWidth, 0, paddedWidth, paddedHeight, this._style.cornerRadius);
+        ctx.arcTo(paddedWidth, paddedHeight, paddedWidth - this._style.cornerRadius, paddedHeight,
+            this._style.cornerRadius);
 
         // Translate the canvas so we don't have to do a bunch of width/height arithmetic
         ctx.save();
-        ctx.translate(paddedWidth - BubbleStyle.CORNER_RADIUS, paddedHeight);
+        ctx.translate(paddedWidth - this._style.cornerRadius, paddedHeight);
 
         // Draw the bubble's "tail"
         if (this._bubbleType === 'say') {
@@ -212,9 +231,9 @@ class TextBubbleSkin extends Skin {
         // Un-translate the canvas and fill + stroke the text bubble
         ctx.restore();
 
-        ctx.fillStyle = BubbleStyle.COLORS.BUBBLE_FILL;
-        ctx.strokeStyle = BubbleStyle.COLORS.BUBBLE_STROKE;
-        ctx.lineWidth = BubbleStyle.STROKE_WIDTH;
+        ctx.fillStyle = this._style.bubbleFill;
+        ctx.strokeStyle = this._style.bubbleStroke;
+        ctx.lineWidth = this._style.strokeWidth;
 
         ctx.stroke();
         ctx.fill();
@@ -223,16 +242,15 @@ class TextBubbleSkin extends Skin {
         ctx.restore();
 
         // Draw each line of text
-        ctx.fillStyle = BubbleStyle.COLORS.TEXT_FILL;
-        ctx.font = `${BubbleStyle.FONT_SIZE}px ${BubbleStyle.FONT}, sans-serif`;
+        ctx.fillStyle = this._style.textFill;
         const lines = this._lines;
         for (let lineNumber = 0; lineNumber < lines.length; lineNumber++) {
             const line = lines[lineNumber];
             ctx.fillText(
                 line,
-                BubbleStyle.PADDING,
-                BubbleStyle.PADDING + (BubbleStyle.LINE_HEIGHT * lineNumber) +
-                    (BubbleStyle.FONT_HEIGHT_RATIO * BubbleStyle.FONT_SIZE)
+                this._style.padding,
+                this._style.padding + (this._style.lineHeight * lineNumber) +
+                    (this._style.fontHeightRatio * this._style.fontSize)
             );
         }
 

src/util/canvas-measurement-provider.js

@@ -36,6 +36,13 @@ class CanvasMeasurementProvider {
         }
         return this._cache[text];
     }
+
+    /**
+     * Resets the internal cache. Call after the canvas's font changes.
+     */
+    clearCache () {
+        this._cache = {};
+    }
 }
 
 module.exports = CanvasMeasurementProvider;