chore(package): update copy-webpack-plugin to version 5.0.5

Closes #416

package.json

@@ -30,14 +30,14 @@
     "babel-polyfill": "^6.22.0",
     "babel-preset-env": "^1.6.1",
     "chromeless": "^1.5.1",
-    "copy-webpack-plugin": "^4.5.1",
+    "copy-webpack-plugin": "^5.0.5",
     "docdash": "^0.4.0",
     "eslint": "^4.6.1",
     "eslint-config-scratch": "^5.0.0",
     "gh-pages": "^1.0.0",
     "jsdoc": "^3.5.5",
     "json": "^9.0.4",
-    "scratch-vm": "0.2.0-prerelease.20190207224121",
+    "scratch-vm": "0.2.0-prerelease.20190213162739",
     "tap": "^11.0.0",
     "travis-after-all": "^1.4.4",
     "uglifyjs-webpack-plugin": "^1.2.5",
@@ -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.20190822202608",
+    "scratch-svg-renderer": "0.2.0-prerelease.20191104164753",
     "twgl.js": "4.4.0"
   }
 }

src/BitmapSkin.js

@@ -56,7 +56,7 @@ class BitmapSkin extends Skin {
      */
     // eslint-disable-next-line no-unused-vars
     getTexture (scale) {
-        return this._texture;
+        return this._texture || super.getTexture();
     }
 
     /**
@@ -78,6 +78,10 @@ class BitmapSkin extends Skin {
      * @fires Skin.event:WasAltered
      */
     setBitmap (bitmapData, costumeResolution, rotationCenter) {
+        if (!bitmapData.width || !bitmapData.height) {
+            super.setEmptyImageData();
+            return;
+        }
         const gl = this._renderer.gl;
 
         // Preferably bitmapData is ImageData. ImageData speeds up updating

src/RenderWebGL.js

@@ -394,8 +394,6 @@ class RenderWebGL extends EventEmitter {
         for (const drawable of this._allDrawables) {
             if (drawable && drawable.skin === oldSkin) {
                 drawable.skin = newSkin;
-                drawable.setConvexHullDirty();
-                drawable.setTransformDirty();
             }
         }
         oldSkin.dispose();

src/SVGSkin.js

@@ -66,6 +66,10 @@ class SVGSkin extends Skin {
      */
     // eslint-disable-next-line no-unused-vars
     getTexture (scale) {
+        if (!this._svgRenderer.canvas.width || !this._svgRenderer.canvas.height) {
+            return super.getTexture();
+        }
+
         // The texture only ever gets uniform scale. Take the larger of the two axes.
         const scaleMax = scale ? Math.max(Math.abs(scale[0]), Math.abs(scale[1])) : 100;
         const requestedScale = Math.min(scaleMax / 100, this._maxTextureScale);
@@ -108,6 +112,12 @@ class SVGSkin extends Skin {
             // updating Silhouette and is better handled by more browsers in
             // regards to memory.
             const canvas = this._svgRenderer.canvas;
+
+            if (!canvas.width || !canvas.height) {
+                super.setEmptyImageData();
+                return;
+            }
+
             const context = canvas.getContext('2d');
             const textureData = context.getImageData(0, 0, canvas.width, canvas.height);
 

src/Skin.js

@@ -140,7 +140,7 @@ class Skin extends EventEmitter {
      */
     // eslint-disable-next-line no-unused-vars
     getTexture (scale) {
-        return null;
+        return this._emptyImageTexture;
     }
 
     /**
@@ -171,6 +171,38 @@ class Skin extends EventEmitter {
      */
     updateSilhouette () {}
 
+    /**
+     * Set the contents of this skin to an empty skin.
+     * @fires Skin.event:WasAltered
+     */
+    setEmptyImageData () {
+        // Free up the current reference to the _texture
+        this._texture = null;
+
+        if (!this._emptyImageData) {
+            // Create a transparent pixel
+            this._emptyImageData = new ImageData(1, 1);
+
+            // Create a new texture and update the silhouette
+            const gl = this._renderer.gl;
+
+            const textureOptions = {
+                auto: true,
+                wrap: gl.CLAMP_TO_EDGE,
+                src: this._emptyImageData
+            };
+
+            // Note: we're using _emptyImageTexture here instead of _texture
+            // so that we can cache this empty texture for later use as needed.
+            // this._texture can get modified by other skins (e.g. BitmapSkin
+            // and SVGSkin, so we can't use that same field for caching)
+            this._emptyImageTexture = twgl.createTexture(gl, textureOptions);
+        }
+
+        this._silhouette.update(this._emptyImageData);
+        this.emit(Skin.Events.WasAltered);
+    }
+
     /**
      * Does this point touch an opaque or translucent point on this skin?
      * Nearest Neighbor version

src/TextBubbleSkin.js

@@ -54,7 +54,7 @@ class TextBubbleSkin extends Skin {
         /** @type {Array<string>} */
         this._lines = [];
 
-        this._textSize = {width: 0, height: 0};
+        /** @type {object} */
         this._textAreaSize = {width: 0, height: 0};
 
         /** @type {string} */
@@ -127,17 +127,14 @@ class TextBubbleSkin extends Skin {
         this._lines = this.textWrapper.wrapText(BubbleStyle.MAX_LINE_WIDTH, this._text);
 
         // Measure width of longest line to avoid extra-wide bubbles
-        let longestLine = 0;
+        let longestLineWidth = 0;
         for (const line of this._lines) {
-            longestLine = Math.max(longestLine, this.measurementProvider.measureText(line));
+            longestLineWidth = Math.max(longestLineWidth, this.measurementProvider.measureText(line));
         }
 
-        this._textSize.width = longestLine;
-        this._textSize.height = BubbleStyle.LINE_HEIGHT * this._lines.length;
-
         // Calculate the canvas-space sizes of the padded text area and full text bubble
-        const paddedWidth = Math.max(this._textSize.width, BubbleStyle.MIN_WIDTH) + (BubbleStyle.PADDING * 2);
-        const paddedHeight = this._textSize.height + (BubbleStyle.PADDING * 2);
+        const paddedWidth = Math.max(longestLineWidth, BubbleStyle.MIN_WIDTH) + (BubbleStyle.PADDING * 2);
+        const paddedHeight = (BubbleStyle.LINE_HEIGHT * this._lines.length) + (BubbleStyle.PADDING * 2);
 
         this._textAreaSize.width = paddedWidth;
         this._textAreaSize.height = paddedHeight;
@@ -183,6 +180,7 @@ 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);
@@ -267,14 +265,13 @@ class TextBubbleSkin extends Skin {
 
             if (this._texture === null) {
                 const textureOptions = {
-                    auto: true,
-                    wrap: gl.CLAMP_TO_EDGE,
-                    src: textureData
+                    auto: false,
+                    wrap: gl.CLAMP_TO_EDGE
                 };
 
                 this._texture = twgl.createTexture(gl, textureOptions);
             }
-    
+
             gl.bindTexture(gl.TEXTURE_2D, this._texture);
             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
             this._silhouette.update(textureData);

tap-snapshots/test-integration-scratch-tests.js-TAP.test.js

@@ -1,10 +0,0 @@
-/* IMPORTANT
- * This snapshot file is auto-generated, but designed for humans.
- * It should be checked into source control and tracked carefully.
- * Re-generate by setting TAP_SNAPSHOT=1 and running tests.
- * Make sure to inspect the output below.  Do not ignore changes!
- */
-'use strict'
-exports[`test/integration/scratch-tests.js TAP bubble snapshot > bubble-text-snapshot 1`] = `
-<text xmlns="http://www.w3.org/2000/svg" alignment-baseline="text-before-edge" font-size="14" fill="#575E75" font-family="Helvetica"><tspan x="0" dy="1.2em">&lt;e*&amp;%$&amp;^$&gt;&lt;/!abc'&gt;</tspan></text>
-`