fix(package): update twgl.js to version 4.7.0

Closes #352

package.json

@@ -38,7 +38,7 @@
     "jsdoc": "^3.5.5",
     "json": "^9.0.4",
     "scratch-vm": "0.2.0-prerelease.20181024204838",
-    "tap": "^12.1.0",
+    "tap": "^11.0.0",
     "travis-after-all": "^1.4.4",
     "uglifyjs-webpack-plugin": "^1.2.5",
     "webpack": "^4.8.0",
@@ -53,7 +53,7 @@
     "minilog": "3.1.0",
     "raw-loader": "^0.5.1",
     "scratch-storage": "^1.0.0",
-    "scratch-svg-renderer": "0.2.0-prerelease.20181024192149",
-    "twgl.js": "4.4.0"
+    "scratch-svg-renderer": "0.2.0-prerelease.20181220183040",
+    "twgl.js": "4.7.0"
   }
 }

src/Drawable.js

@@ -536,13 +536,15 @@ class Drawable {
     _getTransformedHullPoints () {
         const projection = twgl.m4.ortho(-1, 1, -1, 1, -1, 1);
         const skinSize = this.skin.size;
+        const halfXPixel = 1 / skinSize[0] / 2;
+        const halfYPixel = 1 / skinSize[1] / 2;
         const tm = twgl.m4.multiply(this._uniforms.u_modelMatrix, projection);
         const transformedHullPoints = [];
         for (let i = 0; i < this._convexHullPoints.length; i++) {
             const point = this._convexHullPoints[i];
             const glPoint = twgl.v3.create(
-                0.5 + (-point[0] / skinSize[0]),
-                (point[1] / skinSize[1]) - 0.5,
+                0.5 + (-point[0] / skinSize[0]) - halfXPixel,
+                (point[1] / skinSize[1]) - 0.5 + halfYPixel,
                 0
             );
             twgl.m4.transformPoint(tm, glPoint, glPoint);

src/util/svg-text-bubble.js

@@ -145,11 +145,16 @@ class SVGTextBubble {
             </g>`;
     }
 
-
-    _getTextSize () {
-        const svgString = this._wrapSvgFragment(this._textFragment);
+    _getTextSize (textFragment) {
+        const svgString = this._wrapSvgFragment(textFragment);
         if (!this._textSizeCache[svgString]) {
             this._textSizeCache[svgString] = this.svgRenderer.measure(svgString);
+            if (this._textSizeCache[svgString].height === 0) {
+                // The speech bubble is empty, so use the height of a single line with content (or else it renders
+                // weirdly, see issue #302).
+                const dummyFragment = this._buildTextFragment('X');
+                this._textSizeCache[svgString] = this._getTextSize(dummyFragment);
+            }
         }
         return this._textSizeCache[svgString];
     }
@@ -183,7 +188,7 @@ class SVGTextBubble {
         let fragment = '';
 
         const radius = 16;
-        const {x, y, width, height} = this._getTextSize();
+        const {x, y, width, height} = this._getTextSize(this._textFragment);
         const padding = 10;
         const fullWidth = Math.max(MIN_WIDTH, width) + (2 * padding);
         const fullHeight = height + (2 * padding);