chore(package): update webpack-dev-server to version 3.1.3

Closes #241

package.json

@@ -42,12 +42,12 @@
     "json": "^9.0.4",
     "linebreak": "0.3.0",
     "raw-loader": "^0.5.1",
-    "scratch-svg-renderer": "0.1.0-prerelease.20180124054052",
+    "scratch-svg-renderer": "0.1.0-prerelease.20180329174139",
     "tap": "^11.0.0",
     "travis-after-all": "^1.4.4",
     "twgl.js": "4.4.0",
     "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.8.2",
+    "webpack-dev-server": "^3.1.3",
     "xml-escape": "1.1.0"
   }
 }

src/Drawable.js

@@ -428,28 +428,34 @@ class Drawable {
         if (this._transformDirty) {
             this._calculateTransform();
         }
-        // First, transform all the convex hull points by the current Drawable's
-        // transform. This allows us to skip recalculating the convex hull
-        // for many Drawable updates, including translation, rotation, scaling.
-        const projection = twgl.m4.ortho(-1, 1, -1, 1, -1, 1);
-        const skinSize = this.skin.size;
-        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]),
-                0.5 + (-point[1] / skinSize[1]),
-                0
-            );
-            twgl.m4.transformPoint(tm, glPoint, glPoint);
-            transformedHullPoints.push(glPoint);
-        }
+        const transformedHullPoints = this._getTransformedHullPoints();
         // Search through transformed points to generate box on axes.
         const bounds = new Rectangle();
         bounds.initFromPointsAABB(transformedHullPoints);
         return bounds;
     }
+    /**
+     * Get the precise bounds for the upper 8px slice of the Drawable.
+     * Used for calculating where to position a text bubble.
+     * Before calling this, ensure the renderer has updated convex hull points.
+     * @return {!Rectangle} Bounds for a tight box around a slice of the Drawable.
+     */
+    getBoundsForBubble () {
+        if (this.needsConvexHullPoints()) {
+            throw new Error('Needs updated convex hull points before bubble bounds calculation.');
+        }
+        if (this._transformDirty) {
+            this._calculateTransform();
+        }
+        const slice = 8; // px, how tall the top slice to measure should be.
+        const transformedHullPoints = this._getTransformedHullPoints();
+        const maxY = Math.max.apply(null, transformedHullPoints.map(p => p[1]));
+        const filteredHullPoints = transformedHullPoints.filter(p => p[1] > maxY - slice);
+        // Search through filtered points to generate box on axes.
+        const bounds = new Rectangle();
+        bounds.initFromPointsAABB(filteredHullPoints);
+        return bounds;
+    }
 
     /**
      * Get the rough axis-aligned bounding box for the Drawable.
@@ -488,6 +494,31 @@ class Drawable {
         return this.getAABB();
     }
 
+    /**
+     * Transform all the convex hull points by the current Drawable's
+     * transform. This allows us to skip recalculating the convex hull
+     * for many Drawable updates, including translation, rotation, scaling.
+     * @return {!Array.<!Array.number>} Array of glPoints which are Array<x, y>
+     * @private
+     */
+    _getTransformedHullPoints () {
+        const projection = twgl.m4.ortho(-1, 1, -1, 1, -1, 1);
+        const skinSize = this.skin.size;
+        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
+            );
+            twgl.m4.transformPoint(tm, glPoint, glPoint);
+            transformedHullPoints.push(glPoint);
+        }
+        return transformedHullPoints;
+    }
+
     /**
      * Respond to an internal change in the current Skin.
      * @private

src/RenderWebGL.js

@@ -440,6 +440,39 @@ class RenderWebGL extends EventEmitter {
         return bounds;
     }
 
+    /**
+     * Get the precise bounds for a Drawable around the top slice.
+     * Used for positioning speech bubbles more closely to the sprite.
+     * @param {int} drawableID ID of Drawable to get bubble bounds for.
+     * @return {object} Bounds for a tight box around the Drawable top slice.
+     */
+    getBoundsForBubble (drawableID) {
+        const drawable = this._allDrawables[drawableID];
+        // Tell the Drawable about its updated convex hull, if necessary.
+        if (drawable.needsConvexHullPoints()) {
+            const points = this._getConvexHullPointsForDrawable(drawableID);
+            drawable.setConvexHullPoints(points);
+        }
+        const bounds = drawable.getBoundsForBubble();
+        // In debug mode, draw the bounds.
+        if (this._debugCanvas) {
+            const gl = this._gl;
+            this._debugCanvas.width = gl.canvas.width;
+            this._debugCanvas.height = gl.canvas.height;
+            const context = this._debugCanvas.getContext('2d');
+            context.drawImage(gl.canvas, 0, 0);
+            context.strokeStyle = '#FF0000';
+            const pr = window.devicePixelRatio;
+            context.strokeRect(
+                pr * (bounds.left + (this._nativeSize[0] / 2)),
+                pr * (-bounds.top + (this._nativeSize[1] / 2)),
+                pr * (bounds.right - bounds.left),
+                pr * (-bounds.bottom + bounds.top)
+            );
+        }
+        return bounds;
+    }
+
     /**
      * Get the current skin (costume) size of a Drawable.
      * @param {int} drawableID The ID of the Drawable to measure.