chore(package): update docdash to version 1.0.3

Closes #335

package.json

@@ -31,11 +31,11 @@
     "babel-preset-env": "^1.6.1",
     "chromeless": "^1.5.1",
     "copy-webpack-plugin": "^4.5.1",
-    "docdash": "^0.4.0",
+    "docdash": "^1.0.3",
     "eslint": "^4.6.1",
     "eslint-config-scratch": "^5.0.0",
     "gh-pages": "^1.0.0",
-    "jsdoc": "^3.6.0",
+    "jsdoc": "^3.5.5",
     "json": "^9.0.4",
     "scratch-vm": "0.2.0-prerelease.20190207224121",
     "tap": "^11.0.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.20190419183947",
+    "scratch-svg-renderer": "0.2.0-prerelease.20190125192231",
     "twgl.js": "4.4.0"
   }
 }

src/BitmapSkin.js

@@ -79,31 +79,20 @@ class BitmapSkin extends Skin {
     setBitmap (bitmapData, costumeResolution, rotationCenter) {
         const gl = this._renderer.gl;
 
-        // Preferably bitmapData is ImageData. ImageData speeds up updating
-        // Silhouette and is better handled by more browsers in regards to
-        // memory.
-        let textureData = bitmapData;
-        if (bitmapData instanceof HTMLCanvasElement) {
-            // Given a HTMLCanvasElement get the image data to pass to webgl and
-            // Silhouette.
-            const context = bitmapData.getContext('2d');
-            textureData = context.getImageData(0, 0, bitmapData.width, bitmapData.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);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, bitmapData);
+            this._silhouette.update(bitmapData);
         } else {
             // TODO: mipmaps?
             const textureOptions = {
                 auto: true,
                 wrap: gl.CLAMP_TO_EDGE,
-                src: textureData
+                src: bitmapData
             };
 
             this._texture = twgl.createTexture(gl, textureOptions);
-            this._silhouette.update(textureData);
+            this._silhouette.update(bitmapData);
         }
 
         // Do these last in case any of the above throws an exception

src/Drawable.js

@@ -36,10 +36,8 @@ const getLocalPosition = (drawable, vec) => {
     // localPosition matches that transformation.
     localPosition[0] = 0.5 - (((v0 * m[0]) + (v1 * m[4]) + m[12]) / d);
     localPosition[1] = (((v0 * m[1]) + (v1 * m[5]) + m[13]) / d) + 0.5;
-    // Apply texture effect transform if the localPosition is within the drawable's space.
-    if ((localPosition[0] >= 0 && localPosition[0] < 1) && (localPosition[1] >= 0 && localPosition[1] < 1)) {
-        EffectTransform.transformPoint(drawable, localPosition, localPosition);
-    }
+    // Apply texture effect transform.
+    EffectTransform.transformPoint(drawable, localPosition, localPosition);
     return localPosition;
 };
 

src/PenSkin.js

@@ -154,13 +154,6 @@ class PenSkin extends Skin {
         return true;
     }
 
-    /**
-     * @returns {boolean} true if alpha is premultiplied, false otherwise
-     */
-    get hasPremultipliedAlpha () {
-        return true;
-    }
-
     /**
      * @return {Array<number>} the "native" size, in texels, of this skin. [width, height]
      */
@@ -188,9 +181,8 @@ class PenSkin extends Skin {
     clear () {
         const gl = this._renderer.gl;
         twgl.bindFramebufferInfo(gl, this._framebuffer);
-        
-        /* Reset framebuffer to transparent black */
-        gl.clearColor(0, 0, 0, 0);
+
+        gl.clearColor(1, 1, 1, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
         const ctx = this._canvas.getContext('2d');
@@ -606,7 +598,7 @@ class PenSkin extends Skin {
             this._silhouetteBuffer = twgl.createFramebufferInfo(gl, [{format: gl.RGBA}], width, height);
         }
 
-        gl.clearColor(0, 0, 0, 0);
+        gl.clearColor(1, 1, 1, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
         this._silhouetteDirty = true;

src/RenderWebGL.js

@@ -1620,14 +1620,7 @@ class RenderWebGL extends EventEmitter {
             }
 
             twgl.setUniforms(currentShader, uniforms);
-            
-            /* adjust blend function for this skin */
-            if (drawable.skin.hasPremultipliedAlpha){
-                gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-            } else {
-                gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-            }
-            
+
             twgl.drawBufferInfo(gl, this._bufferInfo, gl.TRIANGLES);
         }
 

src/SVGSkin.js

@@ -77,14 +77,10 @@ class SVGSkin extends Skin {
             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);
-
                     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);
+                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._svgRenderer.canvas);
+                    this._silhouette.update(this._svgRenderer.canvas);
                 }
             });
         }
@@ -103,28 +99,20 @@ class SVGSkin extends Skin {
         this._svgRenderer.fromString(svgData, 1, () => {
             const gl = this._renderer.gl;
             this._textureScale = this._maxTextureScale = 1;
-
-            // 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);
-
             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);
+                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._svgRenderer.canvas);
+                this._silhouette.update(this._svgRenderer.canvas);
             } else {
                 // TODO: mipmaps?
                 const textureOptions = {
                     auto: true,
                     wrap: gl.CLAMP_TO_EDGE,
-                    src: textureData
+                    src: this._svgRenderer.canvas
                 };
 
                 this._texture = twgl.createTexture(gl, textureOptions);
-                this._silhouette.update(textureData);
+                this._silhouette.update(this._svgRenderer.canvas);
             }
 
             const maxDimension = Math.max(this._svgRenderer.canvas.width, this._svgRenderer.canvas.height);

src/Silhouette.js

@@ -19,12 +19,12 @@ let __SilhouetteUpdateCanvas;
  * @param {number} y - y
  * @return {number} Alpha value for x/y position
  */
-const getPoint = ({_width: width, _height: height, _colorData: data}, x, y) => {
+const getPoint = ({_width: width, _height: height, _data: data}, x, y) => {
     // 0 if outside bouds, otherwise read from data.
     if (x >= width || y >= height || x < 0 || y < 0) {
         return 0;
     }
-    return data[(((y * width) + x) * 4) + 3];
+    return data[(y * width) + x];
 };
 
 /**
@@ -76,6 +76,7 @@ class Silhouette {
          * The data representing a skin's silhouette shape.
          * @type {Uint8ClampedArray}
          */
+        this._data = null;
         this._colorData = null;
 
         this.colorAtNearest = this.colorAtLinear = (_, dst) => dst.fill(0);
@@ -87,33 +88,28 @@ class Silhouette {
      * rendering can be queried from.
      */
     update (bitmapData) {
-        let imageData;
-        if (bitmapData instanceof ImageData) {
-            // If handed ImageData directly, use it directly.
-            imageData = bitmapData;
-            this._width = bitmapData.width;
-            this._height = bitmapData.height;
-        } else {
-            // Draw about anything else to our update canvas and poll image data
-            // from that.
-            const canvas = Silhouette._updateCanvas();
-            const width = this._width = canvas.width = bitmapData.width;
-            const height = this._height = canvas.height = bitmapData.height;
-            const ctx = canvas.getContext('2d');
+        const canvas = Silhouette._updateCanvas();
+        const width = this._width = canvas.width = bitmapData.width;
+        const height = this._height = canvas.height = bitmapData.height;
+        const ctx = canvas.getContext('2d');
 
-            if (!(width && height)) {
-                return;
-            }
-            ctx.clearRect(0, 0, width, height);
-            ctx.drawImage(bitmapData, 0, 0, width, height);
-            imageData = ctx.getImageData(0, 0, width, height);
+        if (!(width && height)) {
+            return;
         }
+        ctx.clearRect(0, 0, width, height);
+        ctx.drawImage(bitmapData, 0, 0, width, height);
+        const imageData = ctx.getImageData(0, 0, width, height);
 
+        this._data = new Uint8ClampedArray(imageData.data.length / 4);
         this._colorData = imageData.data;
         // delete our custom overriden "uninitalized" color functions
         // let the prototype work for itself
         delete this.colorAtNearest;
         delete this.colorAtLinear;
+
+        for (let i = 0; i < imageData.data.length; i += 4) {
+            this._data[i / 4] = imageData.data[i + 3];
+        }
     }
 
     /**
@@ -170,7 +166,7 @@ class Silhouette {
      * @return {boolean} If the nearest pixel has an alpha value.
      */
     isTouchingNearest (vec) {
-        if (!this._colorData) return;
+        if (!this._data) return;
         return getPoint(
             this,
             Math.floor(vec[0] * (this._width - 1)),
@@ -185,7 +181,7 @@ class Silhouette {
      * @return {boolean} Any of the pixels have some alpha.
      */
     isTouchingLinear (vec) {
-        if (!this._colorData) return;
+        if (!this._data) return;
         const x = Math.floor(vec[0] * (this._width - 1));
         const y = Math.floor(vec[1] * (this._height - 1));
         return getPoint(this, x, y) > 0 ||

src/Skin.js

@@ -76,13 +76,6 @@ class Skin extends EventEmitter {
         return false;
     }
 
-    /**
-     * @returns {boolean} true if alpha is premultiplied, false otherwise
-     */
-    get hasPremultipliedAlpha () {
-        return false;
-    }
-
     /**
      * @return {int} the unique ID for this Skin.
      */

src/shaders/sprite.frag

@@ -194,6 +194,12 @@ void main()
 		discard;
 	}
 	#endif // DRAW_MODE_colorMask
+
+	// WebGL defaults to premultiplied alpha
+	#ifndef DRAW_MODE_stamp
+	gl_FragColor.rgb *= gl_FragColor.a;
+	#endif // DRAW_MODE_stamp
+
 	#endif // DRAW_MODE_silhouette
 
 	#else // DRAW_MODE_lineSample