chore(package): update tap to version 14.6.9

Closes #289

package.json

@@ -37,8 +37,8 @@
     "gh-pages": "^1.0.0",
     "jsdoc": "^3.5.5",
     "json": "^9.0.4",
-    "scratch-vm": "0.2.0-prerelease.20190213162739",
-    "tap": "^11.0.0",
+    "scratch-vm": "0.2.0-prerelease.20190207224121",
+    "tap": "^14.6.9",
     "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.20191104164753",
-    "twgl.js": "4.14.0"
+    "scratch-svg-renderer": "0.2.0-prerelease.20190822202608",
+    "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 || super.getTexture();
+        return this._texture;
     }
 
     /**
@@ -78,10 +78,6 @@ 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/Drawable.js

@@ -183,99 +183,56 @@ class Drawable {
         return this._visible;
     }
 
-    /**
-     * Update the position if it is different. Marks the transform as dirty.
-     * @param {Array.<number>} position A new position.
-     */
-    updatePosition (position) {
-        if (this._position[0] !== position[0] ||
-            this._position[1] !== position[1]) {
-            this._position[0] = Math.round(position[0]);
-            this._position[1] = Math.round(position[1]);
-            this.setTransformDirty();
-        }
-    }
-
-    /**
-     * Update the direction if it is different. Marks the transform as dirty.
-     * @param {number} direction A new direction.
-     */
-    updateDirection (direction) {
-        if (this._direction !== direction) {
-            this._direction = direction;
-            this._rotationTransformDirty = true;
-            this.setTransformDirty();
-        }
-    }
-
-    /**
-     * Update the scale if it is different. Marks the transform as dirty.
-     * @param {Array.<number>} scale A new scale.
-     */
-    updateScale (scale) {
-        if (this._scale[0] !== scale[0] ||
-            this._scale[1] !== scale[1]) {
-            this._scale[0] = scale[0];
-            this._scale[1] = scale[1];
-            this._rotationCenterDirty = true;
-            this._skinScaleDirty = true;
-            this.setTransformDirty();
-        }
-    }
-
-    /**
-     * Update visibility if it is different. Marks the convex hull as dirty.
-     * @param {boolean} visible A new visibility state.
-     */
-    updateVisible (visible) {
-        if (this._visible !== visible) {
-            this._visible = visible;
-            this.setConvexHullDirty();
-        }
-    }
-
-    /**
-     * Update an effect. Marks the convex hull as dirty if the effect changes shape.
-     * @param {string} effectName The name of the effect.
-     * @param {number} rawValue A new effect value.
-     */
-    updateEffect (effectName, rawValue) {
-        const effectInfo = ShaderManager.EFFECT_INFO[effectName];
-        if (rawValue) {
-            this._effectBits |= effectInfo.mask;
-        } else {
-            this._effectBits &= ~effectInfo.mask;
-        }
-        const converter = effectInfo.converter;
-        this._uniforms[effectInfo.uniformName] = converter(rawValue);
-        if (effectInfo.shapeChanges) {
-            this.setConvexHullDirty();
-        }
-    }
-
     /**
      * Update the position, direction, scale, or effect properties of this Drawable.
-     * @deprecated Use specific update* methods instead.
      * @param {object.<string,*>} properties The new property values to set.
      */
     updateProperties (properties) {
-        if ('position' in properties) {
-            this.updatePosition(properties.position);
+        let dirty = false;
+        if ('position' in properties && (
+            this._position[0] !== properties.position[0] ||
+            this._position[1] !== properties.position[1])) {
+            this._position[0] = Math.round(properties.position[0]);
+            this._position[1] = Math.round(properties.position[1]);
+            dirty = true;
         }
-        if ('direction' in properties) {
-            this.updateDirection(properties.direction);
+        if ('direction' in properties && this._direction !== properties.direction) {
+            this._direction = properties.direction;
+            this._rotationTransformDirty = true;
+            dirty = true;
         }
-        if ('scale' in properties) {
-            this.updateScale(properties.scale);
+        if ('scale' in properties && (
+            this._scale[0] !== properties.scale[0] ||
+            this._scale[1] !== properties.scale[1])) {
+            this._scale[0] = properties.scale[0];
+            this._scale[1] = properties.scale[1];
+            this._rotationCenterDirty = true;
+            this._skinScaleDirty = true;
+            dirty = true;
         }
         if ('visible' in properties) {
-            this.updateVisible(properties.visible);
+            this._visible = properties.visible;
+            this.setConvexHullDirty();
+        }
+        if (dirty) {
+            this.setTransformDirty();
         }
         const numEffects = ShaderManager.EFFECTS.length;
         for (let index = 0; index < numEffects; ++index) {
             const effectName = ShaderManager.EFFECTS[index];
             if (effectName in properties) {
-                this.updateEffect(effectName, properties[effectName]);
+                const rawValue = properties[effectName];
+                const effectInfo = ShaderManager.EFFECT_INFO[effectName];
+                if (rawValue) {
+                    this._effectBits |= effectInfo.mask;
+                } else {
+                    this._effectBits &= ~effectInfo.mask;
+                }
+                const converter = effectInfo.converter;
+                this._uniforms[effectInfo.uniformName] = converter(rawValue);
+                if (effectInfo.shapeChanges) {
+                    this.setConvexHullDirty();
+                }
             }
         }
     }
@@ -461,9 +418,7 @@ class Drawable {
 
         const localPosition = getLocalPosition(this, vec);
 
-        // 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()) {
+        if (this.useNearest) {
             return this.skin.isTouchingNearest(localPosition);
         }
         return this.skin.isTouchingLinear(localPosition);
@@ -471,10 +426,8 @@ 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.
      */
-    useNearest (scale = this.scale) {
+    get useNearest () {
         // Raster skins (bitmaps) should always prefer nearest neighbor
         if (this.skin.isRaster) {
             return true;
@@ -496,8 +449,8 @@ class Drawable {
         }
 
         // If the scale of the skin is very close to 100 (0.99999 variance is okay I guess)
-        if (Math.abs(scale[0]) > 99 && Math.abs(scale[0]) < 101 &&
-            Math.abs(scale[1]) > 99 && Math.abs(scale[1]) < 101) {
+        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) {
             return true;
         }
         return false;
@@ -577,6 +530,7 @@ class Drawable {
      * @return {!Rectangle} Bounds for the Drawable.
      */
     getFastBounds (result) {
+        this.updateMatrix();
         if (!this.needsConvexHullPoints()) {
             return this.getBounds(result);
         }
@@ -689,7 +643,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/PenSkin.js

@@ -332,7 +332,8 @@ class PenSkin extends Skin {
 
         const uniforms = {
             u_skin: this._texture,
-            u_projectionMatrix: projection
+            u_projectionMatrix: projection,
+            u_fudge: 0
         };
 
         twgl.setUniforms(currentShader, uniforms);
@@ -473,7 +474,8 @@ class PenSkin extends Skin {
                     0
                 ), __modelScalingMatrix),
                 __modelMatrix
-            )
+            ),
+            u_fudge: 0
         };
 
         twgl.setTextureParameters(gl, texture, {minMag: gl.NEAREST});

src/RenderWebGL.js

@@ -394,6 +394,8 @@ class RenderWebGL extends EventEmitter {
         for (const drawable of this._allDrawables) {
             if (drawable && drawable.skin === oldSkin) {
                 drawable.skin = newSkin;
+                drawable.setConvexHullDirty();
+                drawable.setTransformDirty();
             }
         }
         oldSkin.dispose();
@@ -1312,122 +1314,9 @@ class RenderWebGL extends EventEmitter {
         }, null);
     }
 
-    /**
-     * Update a drawable's skin.
-     * @param {number} drawableID The drawable's id.
-     * @param {number} skinId The skin to update to.
-     */
-    updateDrawableSkinId (drawableID, skinId) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.skin = this._allSkins[skinId];
-    }
-
-    /**
-     * Update a drawable's skin rotation center.
-     * @param {number} drawableID The drawable's id.
-     * @param {Array.<number>} rotationCenter The rotation center for the skin.
-     */
-    updateDrawableRotationCenter (drawableID, rotationCenter) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.skin.setRotationCenter(rotationCenter[0], rotationCenter[1]);
-    }
-
-    /**
-     * Update a drawable's skin and rotation center together.
-     * @param {number} drawableID The drawable's id.
-     * @param {number} skinId The skin to update to.
-     * @param {Array.<number>} rotationCenter The rotation center for the skin.
-     */
-    updateDrawableSkinIdRotationCenter (drawableID, skinId, rotationCenter) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.skin = this._allSkins[skinId];
-        drawable.skin.setRotationCenter(rotationCenter[0], rotationCenter[1]);
-    }
-
-    /**
-     * Update a drawable's position.
-     * @param {number} drawableID The drawable's id.
-     * @param {Array.<number>} position The new position.
-     */
-    updateDrawablePosition (drawableID, position) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.updatePosition(position);
-    }
-
-    /**
-     * Update a drawable's direction.
-     * @param {number} drawableID The drawable's id.
-     * @param {number} direction A new direction.
-     */
-    updateDrawableDirection (drawableID, direction) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.updateDirection(direction);
-    }
-
-    /**
-     * Update a drawable's scale.
-     * @param {number} drawableID The drawable's id.
-     * @param {Array.<number>} scale A new scale.
-     */
-    updateDrawableScale (drawableID, scale) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.updateScale(scale);
-    }
-
-    /**
-     * Update a drawable's direction and scale together.
-     * @param {number} drawableID The drawable's id.
-     * @param {number} direction A new direction.
-     * @param {Array.<number>} scale A new scale.
-     */
-    updateDrawableDirectionScale (drawableID, direction, scale) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.updateDirection(direction);
-        drawable.updateScale(scale);
-    }
-
-    /**
-     * Update a drawable's visibility.
-     * @param {number} drawableID The drawable's id.
-     * @param {boolean} visible Will the drawable be visible?
-     */
-    updateDrawableVisible (drawableID, visible) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.updateVisible(visible);
-    }
-
-    /**
-     * Update a drawable's visual effect.
-     * @param {number} drawableID The drawable's id.
-     * @param {string} effectName The effect to change.
-     * @param {number} value A new effect value.
-     */
-    updateDrawableEffect (drawableID, effectName, value) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.updateEffect(effectName, value);
-    }
 
     /**
      * Update the position, direction, scale, or effect properties of this Drawable.
-     * @deprecated Use specific updateDrawable* methods instead.
      * @param {int} drawableID The ID of the Drawable to update.
      * @param {object.<string,*>} properties The new property values to set.
      */
@@ -1435,16 +1324,17 @@ class RenderWebGL extends EventEmitter {
         const drawable = this._allDrawables[drawableID];
         if (!drawable) {
             /**
-             * @todo(https://github.com/LLK/scratch-vm/issues/2288) fix whatever's wrong in the VM which causes this, then add a warning or throw here.
+             * @todo fix whatever's wrong in the VM which causes this, then add a warning or throw here.
              * Right now this happens so much on some projects that a warning or exception here can hang the browser.
              */
             return;
         }
         if ('skinId' in properties) {
-            this.updateDrawableSkinId(drawableID, properties.skinId);
+            drawable.skin = this._allSkins[properties.skinId];
         }
         if ('rotationCenter' in properties) {
-            this.updateDrawableRotationCenter(drawableID, properties.rotationCenter);
+            const newRotationCenter = properties.rotationCenter;
+            drawable.skin.setRotationCenter(newRotationCenter[0], newRotationCenter[1]);
         }
         drawable.updateProperties(properties);
     }
@@ -1461,7 +1351,7 @@ class RenderWebGL extends EventEmitter {
 
         const drawable = this._allDrawables[drawableID];
         if (!drawable) {
-            // @todo(https://github.com/LLK/scratch-vm/issues/2288) fix whatever's wrong in the VM which causes this, then add a warning or throw here.
+            // TODO: fix whatever's wrong in the VM which causes this, then add a warning or throw here.
             // Right now this happens so much on some projects that a warning or exception here can hang the browser.
             return [x, y];
         }
@@ -1718,7 +1608,8 @@ class RenderWebGL extends EventEmitter {
                 gl.useProgram(currentShader.program);
                 twgl.setBuffersAndAttributes(gl, currentShader, this._bufferInfo);
                 Object.assign(uniforms, {
-                    u_projectionMatrix: projection
+                    u_projectionMatrix: projection,
+                    u_fudge: window.fudge || 0
                 });
             }
 
@@ -1733,7 +1624,7 @@ class RenderWebGL extends EventEmitter {
 
             if (uniforms.u_skin) {
                 twgl.setTextureParameters(
-                    gl, uniforms.u_skin, {minMag: drawable.useNearest(drawableScale) ? gl.NEAREST : gl.LINEAR}
+                    gl, uniforms.u_skin, {minMag: drawable.useNearest ? gl.NEAREST : gl.LINEAR}
                 );
             }
 

src/SVGSkin.js

@@ -66,10 +66,6 @@ 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);
@@ -112,12 +108,6 @@ 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 this._emptyImageTexture;
+        return null;
     }
 
     /**
@@ -171,38 +171,6 @@ 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 = [];
 
-        /** @type {object} */
+        this._textSize = {width: 0, height: 0};
         this._textAreaSize = {width: 0, height: 0};
 
         /** @type {string} */
@@ -127,14 +127,17 @@ 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 longestLineWidth = 0;
+        let longestLine = 0;
         for (const line of this._lines) {
-            longestLineWidth = Math.max(longestLineWidth, this.measurementProvider.measureText(line));
+            longestLine = Math.max(longestLine, 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(longestLineWidth, BubbleStyle.MIN_WIDTH) + (BubbleStyle.PADDING * 2);
-        const paddedHeight = (BubbleStyle.LINE_HEIGHT * this._lines.length) + (BubbleStyle.PADDING * 2);
+        const paddedWidth = Math.max(this._textSize.width, BubbleStyle.MIN_WIDTH) + (BubbleStyle.PADDING * 2);
+        const paddedHeight = this._textSize.height + (BubbleStyle.PADDING * 2);
 
         this._textAreaSize.width = paddedWidth;
         this._textAreaSize.height = paddedHeight;
@@ -180,7 +183,6 @@ 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);
@@ -265,13 +267,14 @@ class TextBubbleSkin extends Skin {
 
             if (this._texture === null) {
                 const textureOptions = {
-                    auto: false,
-                    wrap: gl.CLAMP_TO_EDGE
+                    auto: true,
+                    wrap: gl.CLAMP_TO_EDGE,
+                    src: textureData
                 };
 
                 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);

src/shaders/sprite.frag

@@ -1,5 +1,7 @@
 precision mediump float;
 
+uniform float u_fudge;
+
 #ifdef DRAW_MODE_silhouette
 uniform vec4 u_silhouetteColor;
 #else // DRAW_MODE_silhouette

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

@@ -0,0 +1,10 @@
+/* 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>
+`