Bump scratch-svg-renderer

package.json

@@ -25,19 +25,19 @@
   },
   "devDependencies": {
     "babel-core": "^6.23.1",
-    "babel-eslint": "^10.1.0",
+    "babel-eslint": "^8.2.1",
     "babel-loader": "^7.1.4",
     "babel-polyfill": "^6.22.0",
     "babel-preset-env": "^1.6.1",
     "copy-webpack-plugin": "^4.5.1",
     "docdash": "^0.4.0",
-    "eslint": "^7.13.0",
-    "eslint-config-scratch": "^6.0.0",
+    "eslint": "^4.6.1",
+    "eslint-config-scratch": "^5.0.0",
     "gh-pages": "^1.0.0",
     "jsdoc": "^3.6.0",
     "json": "^9.0.4",
     "playwright-chromium": "^1.0.1",
-    "scratch-vm": "0.2.0-prerelease.20201125065300",
+    "scratch-vm": "0.2.0-prerelease.20200622143012",
     "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.20210317184701",
+    "scratch-svg-renderer": "0.2.0-prerelease.20201016121710",
     "twgl.js": "4.4.0"
   }
 }

src/BitmapSkin.js

@@ -33,6 +33,13 @@ class BitmapSkin extends Skin {
         super.dispose();
     }
 
+    /**
+     * @returns {boolean} true for a raster-style skin (like a BitmapSkin), false for vector-style (like SVGSkin).
+     */
+    get isRaster () {
+        return true;
+    }
+
     /**
      * @return {Array<number>} the "native" size, in texels, of this skin.
      */

src/Drawable.js

@@ -504,6 +504,40 @@ class Drawable {
         return this.skin.isTouchingLinear(getLocalPosition(this, vec));
     }
 
+    /**
+     * 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) {
+        // Raster skins (bitmaps) should always prefer nearest neighbor
+        if (this.skin.isRaster) {
+            return true;
+        }
+
+        // If the effect bits for mosaic, pixelate, whirl, or fisheye are set, use linear
+        if ((this.enabledEffects & (
+            ShaderManager.EFFECT_INFO.fisheye.mask |
+            ShaderManager.EFFECT_INFO.whirl.mask |
+            ShaderManager.EFFECT_INFO.pixelate.mask |
+            ShaderManager.EFFECT_INFO.mosaic.mask
+        )) !== 0) {
+            return false;
+        }
+
+        // We can't use nearest neighbor unless we are a multiple of 90 rotation
+        if (this._direction % 90 !== 0) {
+            return false;
+        }
+
+        // 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) {
+            return true;
+        }
+        return false;
+    }
+
     /**
      * Get the precise bounds for a Drawable.
      * This function applies the transform matrix to the known convex hull,
@@ -645,7 +679,7 @@ class Drawable {
         if (this.skin) {
             this.skin.updateSilhouette(this._scale);
 
-            if (this.skin.useNearest(this._scale, this)) {
+            if (this.useNearest()) {
                 this.isTouching = this._isTouchingNearest;
             } else {
                 this.isTouching = this._isTouchingLinear;
@@ -719,10 +753,10 @@ class Drawable {
             dst[3] = 0;
             return dst;
         }
-
+        
         const textColor =
         // commenting out to only use nearest for now
-        // drawable.skin.useNearest(drawable._scale, drawable) ?
+        // drawable.useNearest() ?
              drawable.skin._silhouette.colorAtNearest(localPosition, dst);
         // : drawable.skin._silhouette.colorAtLinear(localPosition, dst);
 

src/EffectTransform.js

@@ -6,7 +6,6 @@
 
 const twgl = require('twgl.js');
 
-const {rgbToHsv, hsvToRgb} = require('./util/color-conversions');
 const ShaderManager = require('./ShaderManager');
 
 /**
@@ -27,6 +26,102 @@ const CENTER_Y = 0.5;
  */
 const __hsv = [0, 0, 0];
 
+/**
+ * Converts an RGB color value to HSV. Conversion formula
+ * adapted from http://lolengine.net/blog/2013/01/13/fast-rgb-to-hsv.
+ * Assumes r, g, and b are in the range [0, 255] and
+ * returns h, s, and v in the range [0, 1].
+ *
+ * @param   {Array<number>} rgb   The RGB color value
+ * @param   {number}        rgb.r The red color value
+ * @param   {number}        rgb.g The green color value
+ * @param   {number}        rgb.b The blue color value
+ * @param   {Array<number>} dst   The array to store the RGB values in
+ * @return  {Array<number>}       The `dst` array passed in
+ */
+const rgbToHsv = ([r, g, b], dst) => {
+    let K = 0.0;
+
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    let tmp = 0;
+
+    if (g < b) {
+        tmp = g;
+        g = b;
+        b = tmp;
+
+        K = -1;
+    }
+
+    if (r < g) {
+        tmp = r;
+        r = g;
+        g = tmp;
+
+        K = (-2 / 6) - K;
+    }
+
+    const chroma = r - Math.min(g, b);
+    const h = Math.abs(K + ((g - b) / ((6 * chroma) + Number.EPSILON)));
+    const s = chroma / (r + Number.EPSILON);
+    const v = r;
+
+    dst[0] = h;
+    dst[1] = s;
+    dst[2] = v;
+
+    return dst;
+};
+
+/**
+ * Converts an HSV color value to RGB. Conversion formula
+ * adapted from https://gist.github.com/mjackson/5311256.
+ * Assumes h, s, and v are contained in the set [0, 1] and
+ * returns r, g, and b in the set [0, 255].
+ *
+ * @param   {Array<number>}                hsv The HSV color value
+ * @param   {number}                       hsv.h     The hue
+ * @param   {number}                       hsv.s     The saturation
+ * @param   {number}                       hsv.v     The value
+ * @param   {Uint8Array|Uint8ClampedArray} dst The array to store the RGB values in
+ * @return  {Uint8Array|Uint8ClampedArray}     The `dst` array passed in
+ */
+const hsvToRgb = ([h, s, v], dst) => {
+    if (s === 0) {
+        dst[0] = dst[1] = dst[2] = (v * 255) + 0.5;
+        return dst;
+    }
+
+    // keep hue in [0,1) so the `switch(i)` below only needs 6 cases (0-5)
+    h %= 1;
+    const i = (h * 6) | 0;
+    const f = (h * 6) - i;
+    const p = v * (1 - s);
+    const q = v * (1 - (s * f));
+    const t = v * (1 - (s * (1 - f)));
+
+    let r = 0;
+    let g = 0;
+    let b = 0;
+
+    switch (i) {
+    case 0: r = v; g = t; b = p; break;
+    case 1: r = q; g = v; b = p; break;
+    case 2: r = p; g = v; b = t; break;
+    case 3: r = p; g = q; b = v; break;
+    case 4: r = t; g = p; b = v; break;
+    case 5: r = v; g = p; b = q; break;
+    }
+
+    // Add 0.5 in order to round. Setting integer TypedArray elements implicitly floors.
+    dst[0] = (r * 255) + 0.5;
+    dst[1] = (g * 255) + 0.5;
+    dst[2] = (b * 255) + 0.5;
+    return dst;
+};
+
 class EffectTransform {
 
     /**

src/PenSkin.js

@@ -3,6 +3,7 @@ const twgl = require('twgl.js');
 const RenderConstants = require('./RenderConstants');
 const Skin = require('./Skin');
 
+const Rectangle = require('./Rectangle');
 const ShaderManager = require('./ShaderManager');
 
 /**
@@ -30,6 +31,44 @@ const DefaultPenAttributes = {
  */
 const __premultipliedColor = [0, 0, 0, 0];
 
+
+/**
+ * Reused memory location for projection matrices.
+ * @type {FloatArray}
+ */
+const __projectionMatrix = twgl.m4.identity();
+
+/**
+ * Reused memory location for translation matrix for building a model matrix.
+ * @type {FloatArray}
+ */
+const __modelTranslationMatrix = twgl.m4.identity();
+
+
+/**
+ * Reused memory location for scaling matrix for building a model matrix.
+ * @type {FloatArray}
+ */
+const __modelScalingMatrix = twgl.m4.identity();
+
+/**
+ * Reused memory location for a model matrix.
+ * @type {FloatArray}
+ */
+const __modelMatrix = twgl.m4.identity();
+
+/**
+ * Reused memory location for a vector to create a translation matrix from.
+ * @type {FloatArray}
+ */
+const __modelTranslationVector = twgl.v3.create();
+
+/**
+ * Reused memory location for a vector to create a scaling matrix from.
+ * @type {FloatArray}
+ */
+const __modelScalingVector = twgl.v3.create();
+
 class PenSkin extends Skin {
     /**
      * Create a Skin which implements a Scratch pen layer.
@@ -47,12 +86,21 @@ class PenSkin extends Skin {
          */
         this._renderer = renderer;
 
-        /** @type {Array<number>} */
-        this._size = null;
+        /** @type {HTMLCanvasElement} */
+        this._canvas = document.createElement('canvas');
+
+        /** @type {WebGLTexture} */
+        this._exportTexture = null;
 
         /** @type {WebGLFramebuffer} */
         this._framebuffer = null;
 
+        /** @type {WebGLFramebuffer} */
+        this._silhouetteBuffer = null;
+
+        /** @type {boolean} */
+        this._canvasDirty = false;
+
         /** @type {boolean} */
         this._silhouetteDirty = false;
 
@@ -69,30 +117,23 @@ class PenSkin extends Skin {
         };
 
         /** @type {object} */
-        this._usePenBufferDrawRegionId = {
-            enter: () => this._enterUsePenBuffer(),
-            exit: () => this._exitUsePenBuffer()
+        this._toBufferDrawRegionId = {
+            enter: () => this._enterDrawToBuffer(),
+            exit: () => this._exitDrawToBuffer()
         };
 
         /** @type {twgl.BufferInfo} */
-        this._lineBufferInfo = twgl.createBufferInfoFromArrays(this._renderer.gl, {
-            a_position: {
-                numComponents: 2,
-                data: [
-                    1, 0,
-                    0, 0,
-                    1, 1,
-                    1, 1,
-                    0, 0,
-                    0, 1
-                ]
-            }
-        });
+        this._lineBufferInfo = null;
 
         const NO_EFFECTS = 0;
+        /** @type {twgl.ProgramInfo} */
+        this._stampShader = this._renderer._shaderManager.getShader(ShaderManager.DRAW_MODE.default, NO_EFFECTS);
+
         /** @type {twgl.ProgramInfo} */
         this._lineShader = this._renderer._shaderManager.getShader(ShaderManager.DRAW_MODE.line, NO_EFFECTS);
 
+        this._createLineGeometry();
+
         this.onNativeSizeChanged = this.onNativeSizeChanged.bind(this);
         this._renderer.on(RenderConstants.Events.NativeSizeChanged, this.onNativeSizeChanged);
 
@@ -105,43 +146,53 @@ class PenSkin extends Skin {
     dispose () {
         this._renderer.removeListener(RenderConstants.Events.NativeSizeChanged, this.onNativeSizeChanged);
         this._renderer.gl.deleteTexture(this._texture);
+        this._renderer.gl.deleteTexture(this._exportTexture);
         this._texture = null;
         super.dispose();
     }
 
+    /**
+     * @returns {boolean} true for a raster-style skin (like a BitmapSkin), false for vector-style (like SVGSkin).
+     */
+    get isRaster () {
+        return true;
+    }
+
     /**
      * @return {Array<number>} the "native" size, in texels, of this skin. [width, height]
      */
     get size () {
-        return this._size;
-    }
-
-    useNearest (scale) {
-        // Use nearest-neighbor interpolation when scaling up the pen skin-- this matches Scratch 2.0.
-        // When scaling it down, use linear interpolation to avoid giving pen lines a "dashed" appearance.
-        return Math.max(scale[0], scale[1]) >= 100;
+        return [this._canvas.width, this._canvas.height];
     }
 
     /**
-     * @param {Array<number>} scale The X and Y scaling factors to be used, as percentages of this skin's "native" size.
      * @return {WebGLTexture} The GL texture representation of this skin when drawing at the given size.
+     * @param {int} pixelsWide - The width that the skin will be rendered at, in GPU pixels.
+     * @param {int} pixelsTall - The height that the skin will be rendered at, in GPU pixels.
      */
     // eslint-disable-next-line no-unused-vars
-    getTexture (scale) {
-        return this._texture;
+    getTexture (pixelsWide, pixelsTall) {
+        if (this._canvasDirty) {
+            this._drawToBuffer();
+        }
+
+        return this._exportTexture;
     }
 
     /**
      * Clear the pen layer.
      */
     clear () {
-        this._renderer.enterDrawRegion(this._usePenBufferDrawRegionId);
+        const gl = this._renderer.gl;
+        twgl.bindFramebufferInfo(gl, this._framebuffer);
 
         /* Reset framebuffer to transparent black */
-        const gl = this._renderer.gl;
         gl.clearColor(0, 0, 0, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
+        const ctx = this._canvas.getContext('2d');
+        ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+
         this._silhouetteDirty = true;
     }
 
@@ -152,6 +203,7 @@ class PenSkin extends Skin {
      * @param {number} y - the Y coordinate of the point to draw.
      */
     drawPoint (penAttributes, x, y) {
+        // Canvas renders a zero-length line as two end-caps back-to-back, which is what we want.
         this.drawLine(penAttributes, x, y, x, y);
     }
 
@@ -178,23 +230,48 @@ class PenSkin extends Skin {
         this._silhouetteDirty = true;
     }
 
+    /**
+     * Create 2D geometry for drawing lines to a framebuffer.
+     */
+    _createLineGeometry () {
+        const quads = {
+            a_position: {
+                numComponents: 2,
+                data: [
+                    1, 0,
+                    0, 0,
+                    1, 1,
+                    1, 1,
+                    0, 0,
+                    0, 1
+                ]
+            }
+        };
+
+        this._lineBufferInfo = twgl.createBufferInfoFromArrays(this._renderer.gl, quads);
+    }
+
     /**
      * Prepare to draw lines in the _lineOnBufferDrawRegionId region.
      */
     _enterDrawLineOnBuffer () {
         const gl = this._renderer.gl;
 
+        const bounds = this._bounds;
+        const currentShader = this._lineShader;
+        const projection = twgl.m4.ortho(0, bounds.width, 0, bounds.height, -1, 1, __projectionMatrix);
+
         twgl.bindFramebufferInfo(gl, this._framebuffer);
 
-        gl.viewport(0, 0, this._size[0], this._size[1]);
+        gl.viewport(0, 0, bounds.width, bounds.height);
 
-        const currentShader = this._lineShader;
         gl.useProgram(currentShader.program);
+
         twgl.setBuffersAndAttributes(gl, currentShader, this._lineBufferInfo);
 
         const uniforms = {
             u_skin: this._texture,
-            u_stageSize: this._size
+            u_projectionMatrix: projection
         };
 
         twgl.setUniforms(currentShader, uniforms);
@@ -209,20 +286,6 @@ class PenSkin extends Skin {
         twgl.bindFramebufferInfo(gl, null);
     }
 
-    /**
-     * Prepare to do things with this PenSkin's framebuffer
-     */
-    _enterUsePenBuffer () {
-        twgl.bindFramebufferInfo(this._renderer.gl, this._framebuffer);
-    }
-
-    /**
-     * Return to a base state
-     */
-    _exitUsePenBuffer () {
-        twgl.bindFramebufferInfo(this._renderer.gl, null);
-    }
-
     /**
      * Draw a line on the framebuffer.
      * Note that the point coordinates are in the following coordinate space:
@@ -260,7 +323,8 @@ class PenSkin extends Skin {
             u_lineColor: __premultipliedColor,
             u_lineThickness: penAttributes.diameter || DefaultPenAttributes.diameter,
             u_lineLength: lineLength,
-            u_penPoints: [x0, -y0, lineDiffX, -lineDiffY]
+            u_penPoints: [x0, -y0, lineDiffX, -lineDiffY],
+            u_stageSize: this.size
         };
 
         twgl.setUniforms(currentShader, uniforms);
@@ -270,6 +334,136 @@ class PenSkin extends Skin {
         this._silhouetteDirty = true;
     }
 
+    /**
+     * Stamp an image onto the pen layer.
+     * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} stampElement - the element to use as the stamp.
+     * @param {number} x - the X coordinate of the stamp to draw.
+     * @param {number} y - the Y coordinate of the stamp to draw.
+     */
+    drawStamp (stampElement, x, y) {
+        const ctx = this._canvas.getContext('2d');
+
+        ctx.drawImage(stampElement, this._rotationCenter[0] + x, this._rotationCenter[1] - y);
+
+        this._canvasDirty = true;
+        this._silhouetteDirty = true;
+    }
+
+    /**
+     * Enter a draw region to draw a rectangle.
+     *
+     * Multiple calls with the same regionId skip the callback reducing the
+     * amount of GL state changes.
+     * @param {twgl.ProgramInfo} currentShader - program info to draw rectangle
+     *   with
+     * @param {Rectangle} bounds - viewport bounds to draw in
+     *   region
+     */
+    _drawRectangleRegionEnter (currentShader, bounds) {
+        const gl = this._renderer.gl;
+
+        gl.viewport(0, 0, bounds.width, bounds.height);
+
+        gl.useProgram(currentShader.program);
+        twgl.setBuffersAndAttributes(gl, currentShader, this._renderer._bufferInfo);
+    }
+
+    /**
+     * Draw a rectangle.
+     * @param {twgl.ProgramInfo} currentShader - program info to draw rectangle
+     *   with
+     * @param {WebGLTexture} texture - texture to draw
+     * @param {Rectangle} bounds - bounded area to draw in
+     * @param {number} x - centered at x
+     * @param {number} y - centered at y
+     */
+    _drawRectangle (currentShader, texture, bounds, x = -this._canvas.width / 2, y = this._canvas.height / 2) {
+        const gl = this._renderer.gl;
+
+        const projection = twgl.m4.ortho(
+            bounds.left, bounds.right, bounds.top, bounds.bottom, -1, 1,
+            __projectionMatrix
+        );
+
+        const uniforms = {
+            u_skin: texture,
+            u_projectionMatrix: projection,
+            u_modelMatrix: twgl.m4.multiply(
+                twgl.m4.translation(twgl.v3.create(
+                    -x - (bounds.width / 2),
+                    -y + (bounds.height / 2),
+                    0
+                ), __modelTranslationMatrix),
+                twgl.m4.scaling(twgl.v3.create(
+                    bounds.width,
+                    bounds.height,
+                    0
+                ), __modelScalingMatrix),
+                __modelMatrix
+            )
+        };
+
+        twgl.setTextureParameters(gl, texture, {minMag: gl.NEAREST});
+        twgl.setUniforms(currentShader, uniforms);
+
+        twgl.drawBufferInfo(gl, this._renderer._bufferInfo, gl.TRIANGLES);
+    }
+
+    /**
+     * Prepare to draw a rectangle in the _toBufferDrawRegionId region.
+     */
+    _enterDrawToBuffer () {
+        const gl = this._renderer.gl;
+
+        twgl.bindFramebufferInfo(gl, this._framebuffer);
+
+        this._drawRectangleRegionEnter(this._stampShader, this._bounds);
+    }
+
+    /**
+     * Return to a base state from _toBufferDrawRegionId.
+     */
+    _exitDrawToBuffer () {
+        const gl = this._renderer.gl;
+
+        twgl.bindFramebufferInfo(gl, null);
+    }
+
+    /**
+     * Draw the input texture to the framebuffer.
+     * @param {WebGLTexture} texture - input texture to draw
+     * @param {number} x - texture centered at x
+     * @param {number} y - texture centered at y
+     */
+    _drawToBuffer (texture = this._texture, x = -this._canvas.width / 2, y = this._canvas.height / 2) {
+        if (texture !== this._texture && this._canvasDirty) {
+            this._drawToBuffer();
+        }
+
+        const gl = this._renderer.gl;
+
+        // If the input texture is the one that represents the pen's canvas
+        // layer, update the texture with the canvas data.
+        if (texture === this._texture) {
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._canvas);
+
+            const ctx = this._canvas.getContext('2d');
+            ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+
+            this._canvasDirty = false;
+        }
+
+        const currentShader = this._stampShader;
+        const bounds = this._bounds;
+
+        this._renderer.enterDrawRegion(this._toBufferDrawRegionId);
+
+        this._drawRectangle(currentShader, texture, bounds, x, y);
+
+        this._silhouetteDirty = true;
+    }
+
     /**
      * React to a change in the renderer's native size.
      * @param {object} event - The change event.
@@ -286,15 +480,31 @@ class PenSkin extends Skin {
     _setCanvasSize (canvasSize) {
         const [width, height] = canvasSize;
 
-        this._size = canvasSize;
+        const gl = this._renderer.gl;
+
+        this._bounds = new Rectangle();
+        this._bounds.initFromBounds(width / 2, width / -2, height / 2, height / -2);
+
+        this._canvas.width = width;
+        this._canvas.height = height;
         this._rotationCenter[0] = width / 2;
         this._rotationCenter[1] = height / 2;
 
-        const gl = this._renderer.gl;
-
         this._texture = twgl.createTexture(
             gl,
             {
+                auto: true,
+                mag: gl.NEAREST,
+                min: gl.NEAREST,
+                wrap: gl.CLAMP_TO_EDGE,
+                src: this._canvas
+            }
+        );
+
+        this._exportTexture = twgl.createTexture(
+            gl,
+            {
+                auto: true,
                 mag: gl.NEAREST,
                 min: gl.NEAREST,
                 wrap: gl.CLAMP_TO_EDGE,
@@ -306,36 +516,66 @@ class PenSkin extends Skin {
         const attachments = [
             {
                 format: gl.RGBA,
-                attachment: this._texture
+                attachment: this._exportTexture
             }
         ];
         if (this._framebuffer) {
             twgl.resizeFramebufferInfo(gl, this._framebuffer, attachments, width, height);
+            twgl.resizeFramebufferInfo(gl, this._silhouetteBuffer, [{format: gl.RGBA}], width, height);
         } else {
             this._framebuffer = twgl.createFramebufferInfo(gl, attachments, width, height);
+            this._silhouetteBuffer = twgl.createFramebufferInfo(gl, [{format: gl.RGBA}], width, height);
         }
 
         gl.clearColor(0, 0, 0, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
         this._silhouettePixels = new Uint8Array(Math.floor(width * height * 4));
-        this._silhouetteImageData = new ImageData(width, height);
+        this._silhouetteImageData = this._canvas.getContext('2d').createImageData(width, height);
 
         this._silhouetteDirty = true;
     }
 
+    /**
+     * Set context state to match provided pen attributes.
+     * @param {CanvasRenderingContext2D} context - the canvas rendering context to be modified.
+     * @param {PenAttributes} penAttributes - the pen attributes to be used.
+     * @private
+     */
+    _setAttributes (context, penAttributes) {
+        penAttributes = penAttributes || DefaultPenAttributes;
+        const color4f = penAttributes.color4f || DefaultPenAttributes.color4f;
+        const diameter = penAttributes.diameter || DefaultPenAttributes.diameter;
+
+        const r = Math.round(color4f[0] * 255);
+        const g = Math.round(color4f[1] * 255);
+        const b = Math.round(color4f[2] * 255);
+        const a = color4f[3]; // Alpha is 0 to 1 (not 0 to 255 like r,g,b)
+
+        context.strokeStyle = `rgba(${r},${g},${b},${a})`;
+        context.lineCap = 'round';
+        context.lineWidth = diameter;
+    }
+
     /**
      * If there have been pen operations that have dirtied the canvas, update
      * now before someone wants to use our silhouette.
      */
     updateSilhouette () {
         if (this._silhouetteDirty) {
-            this._renderer.enterDrawRegion(this._usePenBufferDrawRegionId);
-            // Sample the framebuffer's pixels into the silhouette instance
+            if (this._canvasDirty) {
+                this._drawToBuffer();
+            }
+
+            // Render export texture to another framebuffer
             const gl = this._renderer.gl;
+
+            this._renderer.enterDrawRegion(this._toBufferDrawRegionId);
+
+            // Sample the framebuffer's pixels into the silhouette instance
             gl.readPixels(
                 0, 0,
-                this._size[0], this._size[1],
+                this._canvas.width, this._canvas.height,
                 gl.RGBA, gl.UNSIGNED_BYTE, this._silhouettePixels
             );
 

src/RenderWebGL.js

@@ -472,7 +472,7 @@ class RenderWebGL extends EventEmitter {
      * @returns {int} The ID of the new Drawable.
      */
     createDrawable (group) {
-        if (!group || !Object.prototype.hasOwnProperty.call(this._layerGroups, group)) {
+        if (!group || !this._layerGroups.hasOwnProperty(group)) {
             log.warn('Cannot create a drawable without a known layer group');
             return;
         }
@@ -542,7 +542,7 @@ class RenderWebGL extends EventEmitter {
      * @param {string} group Group name that the drawable belongs to
      */
     destroyDrawable (drawableID, group) {
-        if (!group || !Object.prototype.hasOwnProperty.call(this._layerGroups, group)) {
+        if (!group || !this._layerGroups.hasOwnProperty(group)) {
             log.warn('Cannot destroy drawable without known layer group.');
             return;
         }
@@ -596,7 +596,7 @@ class RenderWebGL extends EventEmitter {
      * @return {?number} New order if changed, or null.
      */
     setDrawableOrder (drawableID, order, group, optIsRelative, optMin) {
-        if (!group || !Object.prototype.hasOwnProperty.call(this._layerGroups, group)) {
+        if (!group || !this._layerGroups.hasOwnProperty(group)) {
             log.warn('Cannot set the order of a drawable without a known layer group.');
             return;
         }
@@ -650,7 +650,7 @@ class RenderWebGL extends EventEmitter {
 
         twgl.bindFramebufferInfo(gl, null);
         gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
-        gl.clearColor(...this._backgroundColor4f);
+        gl.clearColor.apply(gl, this._backgroundColor4f);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
         this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, this._projection);
@@ -800,8 +800,6 @@ class RenderWebGL extends EventEmitter {
         const color = __touchingColor;
         const hasMask = Boolean(mask3b);
 
-        drawable.updateCPURenderAttributes();
-
         // Masked drawable ignores ghost effect
         const effectMask = ~ShaderManager.EFFECT_INFO.ghost.mask;
 
@@ -971,8 +969,6 @@ class RenderWebGL extends EventEmitter {
         const drawable = this._allDrawables[drawableID];
         const point = __isTouchingDrawablesPoint;
 
-        drawable.updateCPURenderAttributes();
-
         // This is an EXTREMELY brute force collision detector, but it is
         // still faster than asking the GPU to give us the pixels.
         for (let x = bounds.left; x <= bounds.right; x++) {
@@ -1124,7 +1120,7 @@ class RenderWebGL extends EventEmitter {
 
         let hit = RenderConstants.ID_NONE;
         for (const hitID in hits) {
-            if (Object.prototype.hasOwnProperty.call(hits, hitID) && (hits[hitID] > hits[hit])) {
+            if (hits.hasOwnProperty(hitID) && (hits[hitID] > hits[hit])) {
                 hit = hitID;
             }
         }
@@ -1379,7 +1375,7 @@ class RenderWebGL extends EventEmitter {
         gl.viewport(0, 0, bounds.width, bounds.height);
         const projection = twgl.m4.ortho(bounds.left, bounds.right, bounds.top, bounds.bottom, -1, 1);
 
-        gl.clearColor(...this._backgroundColor4f);
+        gl.clearColor.apply(gl, this._backgroundColor4f);
         gl.clear(gl.COLOR_BUFFER_BIT);
         this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, projection);
 
@@ -1427,6 +1423,8 @@ class RenderWebGL extends EventEmitter {
         /** @todo remove this once URL-based skin setting is removed. */
         if (!drawable.skin || !drawable.skin.getTexture([100, 100])) return null;
 
+
+        drawable.updateCPURenderAttributes();
         const bounds = drawable.getFastBounds();
 
         // Limit queries to the stage size.
@@ -1873,7 +1871,7 @@ class RenderWebGL extends EventEmitter {
             const uniforms = {};
 
             let effectBits = drawable.enabledEffects;
-            effectBits &= Object.prototype.hasOwnProperty.call(opts, 'effectMask') ? opts.effectMask : effectBits;
+            effectBits &= opts.hasOwnProperty('effectMask') ? opts.effectMask : effectBits;
             const newShader = this._shaderManager.getShader(drawMode, effectBits);
 
             // Manually perform region check. Do not create functions inside a
@@ -1901,9 +1899,7 @@ class RenderWebGL extends EventEmitter {
 
             if (uniforms.u_skin) {
                 twgl.setTextureParameters(
-                    gl, uniforms.u_skin, {
-                        minMag: drawable.skin.useNearest(drawableScale, drawable) ? gl.NEAREST : gl.LINEAR
-                    }
+                    gl, uniforms.u_skin, {minMag: drawable.useNearest(drawableScale) ? gl.NEAREST : gl.LINEAR}
                 );
             }
 
@@ -1923,14 +1919,14 @@ class RenderWebGL extends EventEmitter {
     _getConvexHullPointsForDrawable (drawableID) {
         const drawable = this._allDrawables[drawableID];
 
+        drawable.updateCPURenderAttributes();
+
         const [width, height] = drawable.skin.size;
         // No points in the hull if invisible or size is 0.
         if (!drawable.getVisible() || width === 0 || height === 0) {
             return [];
         }
 
-        drawable.updateCPURenderAttributes();
-
         /**
          * Return the determinant of two vectors, the vector from A to B and the vector from A to C.
          *

src/SVGSkin.js

@@ -2,7 +2,6 @@ const twgl = require('twgl.js');
 
 const Skin = require('./Skin');
 const SvgRenderer = require('scratch-svg-renderer').SVGRenderer;
-const ShaderManager = require('./ShaderManager');
 
 const MAX_TEXTURE_DIMENSION = 2048;
 
@@ -59,35 +58,6 @@ class SVGSkin extends Skin {
         return this._svgRenderer.size;
     }
 
-    useNearest (scale, drawable) {
-        // If the effect bits for mosaic, pixelate, whirl, or fisheye are set, use linear
-        if ((drawable.enabledEffects & (
-            ShaderManager.EFFECT_INFO.fisheye.mask |
-            ShaderManager.EFFECT_INFO.whirl.mask |
-            ShaderManager.EFFECT_INFO.pixelate.mask |
-            ShaderManager.EFFECT_INFO.mosaic.mask
-        )) !== 0) {
-            return false;
-        }
-
-        // We can't use nearest neighbor unless we are a multiple of 90 rotation
-        if (drawable._direction % 90 !== 0) {
-            return false;
-        }
-
-        // Because SVG skins' bounding boxes are currently not pixel-aligned, the idea here is to hide blurriness
-        // by using nearest-neighbor scaling if one screen-space pixel is "close enough" to one texture pixel.
-        // If the scale of the skin is very close to 100 (0.99999 variance is okay I guess)
-        // TODO: Make this check more precise. We should use nearest if there's less than one pixel's difference
-        // between the screen-space and texture-space sizes of the skin. Mipmaps make this harder because there are
-        // multiple textures (and hence multiple texture spaces) and we need to know which one to choose.
-        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;
-    }
-
     /**
      * Create a MIP for a given scale.
      * @param {number} scale - The relative size of the MIP
@@ -156,6 +126,9 @@ class SVGSkin extends Skin {
 
     /**
      * Do a hard reset of the existing MIPs by deleting them.
+     * @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 () {
         this._scaledMIPs.forEach(oldMIP => this._renderer.gl.deleteTexture(oldMIP));
@@ -166,9 +139,7 @@ class SVGSkin extends Skin {
     /**
      * 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.loadSVG(svgData, false, () => {

src/ShaderManager.js

@@ -16,7 +16,7 @@ class ShaderManager {
          */
         this._shaderCache = {};
         for (const modeName in ShaderManager.DRAW_MODE) {
-            if (Object.prototype.hasOwnProperty.call(ShaderManager.DRAW_MODE, modeName)) {
+            if (ShaderManager.DRAW_MODE.hasOwnProperty(modeName)) {
                 this._shaderCache[modeName] = [];
             }
         }

src/Skin.js

@@ -59,6 +59,13 @@ class Skin extends EventEmitter {
         this._id = RenderConstants.ID_NONE;
     }
 
+    /**
+     * @returns {boolean} true for a raster-style skin (like a BitmapSkin), false for vector-style (like SVGSkin).
+     */
+    get isRaster () {
+        return false;
+    }
+
     /**
      * @return {int} the unique ID for this Skin.
      */
@@ -81,19 +88,6 @@ class Skin extends EventEmitter {
         return [0, 0];
     }
 
-    /**
-     * Should this skin's texture be filtered with nearest-neighbor or linear interpolation at the given scale?
-     * @param {?Array<Number>} scale The screen-space X and Y scaling factors at which this skin's texture will be
-     * displayed, as percentages (100 means 1 "native size" unit is 1 screen pixel; 200 means 2 screen pixels, etc).
-     * @param {Drawable} drawable The drawable that this skin's texture will be applied to.
-     * @return {boolean} True if this skin's texture, as returned by {@link getTexture}, should be filtered with
-     * nearest-neighbor interpolation.
-     */
-    // eslint-disable-next-line no-unused-vars
-    useNearest (scale, drawable) {
-        return true;
-    }
-
     /**
      * Get the center of the current bounding box
      * @return {Array<number>} the center of the current bounding box

src/playground/playground.js

@@ -37,7 +37,7 @@ image.src = 'https://cdn.assets.scratch.mit.edu/internalapi/asset/7e24c99c1b853e
 
 // SVG (cat 1-a)
 const xhr = new XMLHttpRequest();
-xhr.addEventListener('load', () => {
+xhr.addEventListener('load', function () {
     const skinId = renderer.createSVGSkin(xhr.responseText);
     if (wantedSkin === WantedSkinType.vector) {
         renderer.updateDrawableProperties(drawableID2, {
@@ -56,10 +56,10 @@ if (wantedSkin === WantedSkinType.pen) {
     });
 
     canvas.addEventListener('click', event => {
-        const rect = canvas.getBoundingClientRect();
+        let rect = canvas.getBoundingClientRect();
 
-        const x = event.clientX - rect.left;
-        const y = event.clientY - rect.top;
+        let x = event.clientX - rect.left;
+        let y = event.clientY - rect.top;
 
         renderer.penLine(penSkinID, {
             color4f: [Math.random(), Math.random(), Math.random(), 1],
@@ -184,7 +184,7 @@ canvas.addEventListener('mousemove', event => {
 canvas.addEventListener('click', event => {
     const mousePos = getMousePosition(event, canvas);
     const pickID = renderer.pick(mousePos.x, mousePos.y);
-    console.log(`You clicked on ${(pickID < 0 ? 'nothing' : `ID# ${pickID}`)}`);
+    console.log('You clicked on ' + (pickID < 0 ? 'nothing' : 'ID# ' + pickID));
     if (pickID >= 0) {
         console.dir(renderer.extractDrawable(pickID, mousePos.x, mousePos.y));
     }

src/playground/queryPlayground.js

@@ -92,9 +92,9 @@ renderCanvas.addEventListener('click', event => {
     }
 });
 
-const rgb2fillStyle = rgb => (
-    `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`
-);
+const rgb2fillStyle = (rgb) => {
+    return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
+};
 
 const makeCursorImage = () => {
     const canvas = document.createElement('canvas');

src/util/color-conversions.js

@@ -1,97 +0,0 @@
-/**
- * Converts an RGB color value to HSV. Conversion formula
- * adapted from http://lolengine.net/blog/2013/01/13/fast-rgb-to-hsv.
- * Assumes r, g, and b are in the range [0, 255] and
- * returns h, s, and v in the range [0, 1].
- *
- * @param   {Array<number>} rgb   The RGB color value
- * @param   {number}        rgb.r The red color value
- * @param   {number}        rgb.g The green color value
- * @param   {number}        rgb.b The blue color value
- * @param   {Array<number>} dst   The array to store the HSV values in
- * @return  {Array<number>}       The `dst` array passed in
- */
-const rgbToHsv = ([r, g, b], dst) => {
-    let K = 0.0;
-
-    r /= 255;
-    g /= 255;
-    b /= 255;
-    let tmp = 0;
-
-    if (g < b) {
-        tmp = g;
-        g = b;
-        b = tmp;
-
-        K = -1;
-    }
-
-    if (r < g) {
-        tmp = r;
-        r = g;
-        g = tmp;
-
-        K = (-2 / 6) - K;
-    }
-
-    const chroma = r - Math.min(g, b);
-    const h = Math.abs(K + ((g - b) / ((6 * chroma) + Number.EPSILON)));
-    const s = chroma / (r + Number.EPSILON);
-    const v = r;
-
-    dst[0] = h;
-    dst[1] = s;
-    dst[2] = v;
-
-    return dst;
-};
-
-/**
- * Converts an HSV color value to RGB. Conversion formula
- * adapted from https://gist.github.com/mjackson/5311256.
- * Assumes h, s, and v are contained in the set [0, 1] and
- * returns r, g, and b in the set [0, 255].
- *
- * @param   {Array<number>}                hsv The HSV color value
- * @param   {number}                       hsv.h     The hue
- * @param   {number}                       hsv.s     The saturation
- * @param   {number}                       hsv.v     The value
- * @param   {Uint8Array|Uint8ClampedArray} dst The array to store the RGB values in
- * @return  {Uint8Array|Uint8ClampedArray}     The `dst` array passed in
- */
-const hsvToRgb = ([h, s, v], dst) => {
-    if (s === 0) {
-        dst[0] = dst[1] = dst[2] = (v * 255) + 0.5;
-        return dst;
-    }
-
-    // keep hue in [0,1) so the `switch(i)` below only needs 6 cases (0-5)
-    h %= 1;
-    const i = (h * 6) | 0;
-    const f = (h * 6) - i;
-    const p = v * (1 - s);
-    const q = v * (1 - (s * f));
-    const t = v * (1 - (s * (1 - f)));
-
-    let r = 0;
-    let g = 0;
-    let b = 0;
-
-    switch (i) {
-    case 0: r = v; g = t; b = p; break;
-    case 1: r = q; g = v; b = p; break;
-    case 2: r = p; g = v; b = t; break;
-    case 3: r = p; g = q; b = v; break;
-    case 4: r = t; g = p; b = v; break;
-    case 5: r = v; g = p; b = q; break;
-    }
-
-    // Add 0.5 in order to round. Setting integer TypedArray elements implicitly floors.
-    dst[0] = (r * 255) + 0.5;
-    dst[1] = (g * 255) + 0.5;
-    dst[2] = (b * 255) + 0.5;
-    return dst;
-};
-
-module.exports = {rgbToHsv, hsvToRgb};

test/helper/page-util.js

@@ -1,4 +1,4 @@
-/* global VirtualMachine, ScratchStorage, ScratchSVGRenderer */
+/* global window, VirtualMachine, ScratchStorage, ScratchSVGRenderer */
 /* eslint-env browser */
 
 // Wait for all SVG skins to be loaded.

test/integration/pick-tests.js

@@ -1,4 +1,4 @@
-/* global vm, render */
+/* global vm, render, Promise */
 const {chromium} = require('playwright-chromium');
 const test = require('tap').test;
 const path = require('path');

test/integration/scratch-tests.js

@@ -1,4 +1,4 @@
-/* global vm */
+/* global vm, Promise */
 const {chromium} = require('playwright-chromium');
 const test = require('tap').test;
 const path = require('path');

test/unit/ColorConversionTests.js

@@ -1,48 +0,0 @@
-const {test, Test} = require('tap');
-
-const {rgbToHsv, hsvToRgb} = require('../../src/util/color-conversions');
-
-Test.prototype.addAssert('colorsAlmostEqual', 2, function (found, wanted, message, extra) {
-    /* eslint-disable no-invalid-this */
-    message += `: found ${JSON.stringify(Array.from(found))}, wanted ${JSON.stringify(Array.from(wanted))}`;
-
-    // should always return another assert call, or
-    // this.pass(message) or this.fail(message, extra)
-    if (found.length !== wanted.length) {
-        return this.fail(message, extra);
-    }
-
-    for (let i = 0; i < found.length; i++) {
-        // smallest meaningful difference--detects changes in hue value after rounding
-        if (Math.abs(found[i] - wanted[i]) >= 0.5 / 360) {
-            return this.fail(message, extra);
-        }
-    }
-
-    return this.pass(message);
-    /* eslint-enable no-invalid-this */
-});
-
-test('RGB to HSV', t => {
-    const dst = [0, 0, 0];
-    t.colorsAlmostEqual(rgbToHsv([255, 255, 255], dst), [0, 0, 1], 'white');
-    t.colorsAlmostEqual(rgbToHsv([0, 0, 0], dst), [0, 0, 0], 'black');
-    t.colorsAlmostEqual(rgbToHsv([127, 127, 127], dst), [0, 0, 0.498], 'grey');
-    t.colorsAlmostEqual(rgbToHsv([255, 255, 0], dst), [0.167, 1, 1], 'yellow');
-    t.colorsAlmostEqual(rgbToHsv([1, 0, 0], dst), [0, 1, 0.00392], 'dark red');
-
-    t.end();
-});
-
-test('HSV to RGB', t => {
-    const dst = new Uint8ClampedArray(3);
-    t.colorsAlmostEqual(hsvToRgb([0, 1, 1], dst), [255, 0, 0], 'red');
-    t.colorsAlmostEqual(hsvToRgb([1, 1, 1], dst), [255, 0, 0], 'red (hue of 1)');
-    t.colorsAlmostEqual(hsvToRgb([0.5, 1, 1], dst), [0, 255, 255], 'cyan');
-    t.colorsAlmostEqual(hsvToRgb([1.5, 1, 1], dst), [0, 255, 255], 'cyan (hue of 1.5)');
-    t.colorsAlmostEqual(hsvToRgb([0, 0, 0], dst), [0, 0, 0], 'black');
-    t.colorsAlmostEqual(hsvToRgb([0.5, 1, 0], dst), [0, 0, 0], 'black (with hue and saturation)');
-    t.colorsAlmostEqual(hsvToRgb([0, 1, 0.00392], dst), [1, 0, 0], 'dark red');
-
-    t.end();
-});