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

Closes #352

package.json

@@ -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",
-    "twgl.js": "4.4.0"
+    "scratch-svg-renderer": "0.2.0-prerelease.20191104164753",
+    "twgl.js": "4.14.1"
   }
 }

src/Drawable.js

@@ -461,7 +461,9 @@ class Drawable {
 
         const localPosition = getLocalPosition(this, vec);
 
-        if (this.useNearest) {
+        // We're not passing in a scale to useNearest, but that's okay because "touching" queries
+        // happen at the "native" size anyway.
+        if (this.useNearest()) {
             return this.skin.isTouchingNearest(localPosition);
         }
         return this.skin.isTouchingLinear(localPosition);
@@ -469,8 +471,10 @@ class Drawable {
 
     /**
      * Should the drawable use NEAREST NEIGHBOR or LINEAR INTERPOLATION mode
+     * @param {?Array<Number>} scale Optionally, the screen-space scale of the drawable.
+     * @return {boolean} True if the drawable should use nearest-neighbor interpolation.
      */
-    get useNearest () {
+    useNearest (scale = this.scale) {
         // Raster skins (bitmaps) should always prefer nearest neighbor
         if (this.skin.isRaster) {
             return true;
@@ -492,8 +496,8 @@ class Drawable {
         }
 
         // 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) {
+        if (Math.abs(scale[0]) > 99 && Math.abs(scale[0]) < 101 &&
+            Math.abs(scale[1]) > 99 && Math.abs(scale[1]) < 101) {
             return true;
         }
         return false;
@@ -685,7 +689,7 @@ class Drawable {
         }
         const textColor =
         // commenting out to only use nearest for now
-        // drawable.useNearest ?
+        // drawable.useNearest() ?
              drawable.skin._silhouette.colorAtNearest(localPosition, dst);
         // : drawable.skin._silhouette.colorAtLinear(localPosition, dst);
         return EffectTransform.transformColor(drawable, textColor, textColor);

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();
@@ -1735,7 +1733,7 @@ class RenderWebGL extends EventEmitter {
 
             if (uniforms.u_skin) {
                 twgl.setTextureParameters(
-                    gl, uniforms.u_skin, {minMag: drawable.useNearest ? gl.NEAREST : gl.LINEAR}
+                    gl, uniforms.u_skin, {minMag: drawable.useNearest(drawableScale) ? gl.NEAREST : gl.LINEAR}
                 );
             }
 

src/SVGMIP.js

@@ -0,0 +1,56 @@
+const twgl = require('twgl.js');
+
+class SVGMIP {
+    /**
+    * Create a new SVG MIP for a given scale.
+    * @param {RenderWebGL} renderer - The renderer which this MIP's skin uses.
+    * @param {SvgRenderer} svgRenderer - The svg renderer which this MIP's skin uses.
+    * @param {number} scale - The relative size of the MIP
+    * @param {function} callback - A callback that should always fire after draw()
+    * @constructor
+    */
+    constructor (renderer, svgRenderer, scale, callback) {
+        this._renderer = renderer;
+        this._svgRenderer = svgRenderer;
+        this._scale = scale;
+        this._texture = null;
+        this._callback = callback;
+
+        this.draw();
+    }
+
+    draw () {
+        this._svgRenderer._draw(this._scale, () => {
+            const textureData = this._getTextureData();
+            const textureOptions = {
+                auto: false,
+                wrap: this._renderer.gl.CLAMP_TO_EDGE,
+                src: textureData
+            };
+
+            this._texture = twgl.createTexture(this._renderer.gl, textureOptions);
+            this._callback(textureData);
+        });
+    }
+
+    dispose () {
+        this._renderer.gl.deleteTexture(this.getTexture());
+    }
+
+    getTexture () {
+        return this._texture;
+    }
+
+    _getTextureData () {
+        // Pull out the ImageData from the canvas. ImageData speeds up
+        // updating Silhouette and is better handled by more browsers in
+        // regards to memory.
+        const canvas = this._svgRenderer.canvas;
+        const context = canvas.getContext('2d');
+        const textureData = context.getImageData(0, 0, canvas.width, canvas.height);
+
+        return textureData;
+    }
+}
+
+module.exports = SVGMIP;

src/SVGSkin.js

@@ -1,9 +1,16 @@
-const twgl = require('twgl.js');
-
 const Skin = require('./Skin');
+const SVGMIP = require('./SVGMIP');
 const SvgRenderer = require('scratch-svg-renderer').SVGRenderer;
 
 const MAX_TEXTURE_DIMENSION = 2048;
+const MIN_TEXTURE_SCALE = 1 / 256;
+/**
+ * All scaled renderings of the SVG are stored in an array. The 1.0 scale of
+ * the SVG is stored at the 8th index. The smallest possible 1 / 256 scale
+ * rendering is stored at the 0th index.
+ * @const {number}
+ */
+const INDEX_OFFSET = 8;
 
 class SVGSkin extends Skin {
     /**
@@ -25,11 +32,14 @@ class SVGSkin extends Skin {
         /** @type {WebGLTexture} */
         this._texture = null;
 
-        /** @type {number} */
-        this._textureScale = 1;
+        /** @type {Array.<SVGMIPs>} */
+        this._scaledMIPs = [];
 
-        /** @type {Number} */
-        this._maxTextureScale = 0;
+        /**
+        * Ratio of the size of the SVG and the max size of the WebGL texture
+        * @type {Number}
+        */
+        this._maxTextureScale = 1;
     }
 
     /**
@@ -37,8 +47,13 @@ class SVGSkin extends Skin {
      */
     dispose () {
         if (this._texture) {
-            this._renderer.gl.deleteTexture(this._texture);
+            for (const mip of this._scaledMIPs) {
+                if (mip) {
+                    mip.dispose();
+                }
+            }
             this._texture = null;
+            this._scaledMIPs.length = 0;
         }
         super.dispose();
     }
@@ -60,11 +75,33 @@ class SVGSkin extends Skin {
         super.setRotationCenter(x - viewOffset[0], y - viewOffset[1]);
     }
 
+    /**
+     * Create a MIP for a given scale and pass it a callback for updating
+     * state when switching between scales and MIPs.
+     * @param {number} scale - The relative size of the MIP
+     * @param {function} resetCallback - this is a callback for doing a hard reset
+     * of MIPs and a reset of the rotation center. Only passed in if the MIP scale is 1.
+     * @return {SVGMIP} An object that handles creating and updating SVG textures.
+     */
+    createMIP (scale, resetCallback) {
+        const textureCallback = textureData => {
+            if (resetCallback) resetCallback();
+            // Check if we have the largest MIP
+            // eslint-disable-next-line no-use-before-define
+            if (!this._scaledMIPs.length || this._scaledMIPs[this._scaledMIPs.length - 1]._scale <= scale) {
+                // Currently silhouette only gets scaled up
+                this._silhouette.update(textureData);
+            }
+        };
+        const mip = new SVGMIP(this._renderer, this._svgRenderer, scale, textureCallback);
+
+        return mip;
+    }
+
     /**
      * @param {Array<number>} scale - The scaling factors to be used, each in the [0,100] range.
      * @return {WebGLTexture} The GL texture representation of this skin when drawing at the given scale.
      */
-    // eslint-disable-next-line no-unused-vars
     getTexture (scale) {
         if (!this._svgRenderer.canvas.width || !this._svgRenderer.canvas.height) {
             return super.getTexture();
@@ -73,80 +110,70 @@ class SVGSkin extends Skin {
         // 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);
-        let newScale = this._textureScale;
-        while ((newScale < this._maxTextureScale) && (requestedScale >= 1.5 * newScale)) {
-            newScale *= 2;
-        }
-        if (this._textureScale !== newScale) {
-            this._textureScale = newScale;
-            this._svgRenderer._draw(this._textureScale, () => {
-                if (this._textureScale === newScale) {
-                    const canvas = this._svgRenderer.canvas;
-                    const context = canvas.getContext('2d');
-                    const textureData = context.getImageData(0, 0, canvas.width, canvas.height);
+        let newScale = 1;
+        let textureIndex = 0;
 
-                    const gl = this._renderer.gl;
-                    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);
-                }
-            });
+        if (requestedScale < 1) {
+            while ((newScale > MIN_TEXTURE_SCALE) && (requestedScale <= newScale * .75)) {
+                newScale /= 2;
+                textureIndex -= 1;
+            }
+        } else {
+            while ((newScale < this._maxTextureScale) && (requestedScale >= 1.5 * newScale)) {
+                newScale *= 2;
+                textureIndex += 1;
+            }
         }
 
-        return this._texture;
+        if (!this._scaledMIPs[textureIndex + INDEX_OFFSET]) {
+            this._scaledMIPs[textureIndex + INDEX_OFFSET] = this.createMIP(newScale);
+        }
+
+        return this._scaledMIPs[textureIndex + INDEX_OFFSET].getTexture();
+    }
+
+    /**
+     * Do a hard reset of the existing MIPs by calling dispose(), setting a new
+     * scale 1 MIP in this._scaledMIPs, and finally updating the rotationCenter.
+     * @param {SVGMIPs} mip - An object that handles creating and updating SVG textures.
+     * @param {Array<number>} [rotationCenter] - Optional rotation center for the SVG. If not supplied, it will be
+     * calculated from the bounding box
+    * @fires Skin.event:WasAltered
+     */
+    resetMIPs (mip, rotationCenter) {
+        this._scaledMIPs.forEach(oldMIP => oldMIP.dispose());
+        this._scaledMIPs.length = 0;
+
+        // Set new scale 1 MIP after outdated MIPs have been disposed
+        this._texture = this._scaledMIPs[INDEX_OFFSET] = mip;
+
+        if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
+        this.setRotationCenter.apply(this, rotationCenter);
+        this.emit(Skin.Events.WasAltered);
     }
 
     /**
      * Set the contents of this skin to a snapshot of the provided SVG data.
      * @param {string} svgData - new SVG to use.
-     * @param {Array<number>} [rotationCenter] - Optional rotation center for the SVG. If not supplied, it will be
-     * calculated from the bounding box
-     * @fires Skin.event:WasAltered
+     * @param {Array<number>} [rotationCenter] - Optional rotation center for the SVG.
      */
     setSVG (svgData, rotationCenter) {
-        this._svgRenderer.fromString(svgData, 1, () => {
-            const gl = this._renderer.gl;
-            this._textureScale = this._maxTextureScale = 1;
+        this._svgRenderer.loadString(svgData);
 
-            // Pull out the ImageData from the canvas. ImageData speeds up
-            // updating Silhouette and is better handled by more browsers in
-            // regards to memory.
-            const canvas = this._svgRenderer.canvas;
+        if (!this._svgRenderer.canvas.width || !this._svgRenderer.canvas.height) {
+            super.setEmptyImageData();
+            return;
+        }
 
-            if (!canvas.width || !canvas.height) {
-                super.setEmptyImageData();
-                return;
-            }
+        const maxDimension = Math.ceil(Math.max(this.size[0], this.size[1]));
+        let testScale = 2;
+        for (testScale; maxDimension * testScale <= MAX_TEXTURE_DIMENSION; testScale *= 2) {
+            this._maxTextureScale = testScale;
+        }
 
-            const context = canvas.getContext('2d');
-            const textureData = context.getImageData(0, 0, canvas.width, canvas.height);
-
-            if (this._texture) {
-                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);
-            } else {
-                // TODO: mipmaps?
-                const textureOptions = {
-                    auto: true,
-                    wrap: gl.CLAMP_TO_EDGE,
-                    src: textureData
-                };
-
-                this._texture = twgl.createTexture(gl, textureOptions);
-                this._silhouette.update(textureData);
-            }
-
-            const maxDimension = Math.max(this._svgRenderer.canvas.width, this._svgRenderer.canvas.height);
-            let testScale = 2;
-            for (testScale; maxDimension * testScale <= MAX_TEXTURE_DIMENSION; testScale *= 2) {
-                this._maxTextureScale = testScale;
-            }
-
-            if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
-            this.setRotationCenter.apply(this, rotationCenter);
-            this.emit(Skin.Events.WasAltered);
-        });
+        // Create the 1.0 scale MIP at INDEX_OFFSET.
+        const textureScale = 1;
+        const mip = this.createMIP(textureScale, () => this.resetMIPs(mip, rotationCenter));
     }
 
 }

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>
-`