chore(package): update babel-loader to version 8.0.5

Closes #342

package.json

@@ -26,7 +26,7 @@
   "devDependencies": {
     "babel-core": "^6.23.1",
     "babel-eslint": "^8.2.1",
-    "babel-loader": "^7.1.4",
+    "babel-loader": "^8.0.5",
     "babel-polyfill": "^6.22.0",
     "babel-preset-env": "^1.6.1",
     "chromeless": "^1.5.1",
@@ -38,7 +38,7 @@
     "jsdoc": "^3.5.5",
     "json": "^9.0.4",
     "scratch-vm": "0.2.0-prerelease.20181024204838",
-    "tap": "^12.0.2",
+    "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",
+    "scratch-svg-renderer": "0.2.0-prerelease.20181220183040",
     "twgl.js": "4.4.0"
   }
 }

src/Drawable.js

@@ -426,16 +426,16 @@ class Drawable {
      * Should the drawable use NEAREST NEIGHBOR or LINEAR INTERPOLATION mode
      */
     get useNearest () {
-        // We can't use nearest neighbor unless we are a multiple of 90 rotation
-        if (this._direction % 90 !== 0) {
-            return false;
-        }
-
         // Raster skins (bitmaps) should always prefer nearest neighbor
         if (this.skin.isRaster) {
             return true;
         }
 
+        // We can't use nearest neighbor unless we are a multiple of 90 rotation
+        if (this._direction % 90 !== 0) {
+            return false;
+        }
+
         // If the scale of the skin is very close to 100 (0.99999 variance is okay I guess)
         if (Math.abs(this.scale[0]) > 99 && Math.abs(this.scale[0]) < 101 &&
             Math.abs(this.scale[1]) > 99 && Math.abs(this.scale[1]) < 101) {
@@ -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);