fix(deps): update dependency ify-loader to v1.1.0

chore(deps): pin dependency json to v9.0.6 [security]

.gitattributes

@@ -14,6 +14,7 @@
 *.js text eol=lf
 *.js.map text eol=lf
 *.json text eol=lf
+*.json5 text eol=lf
 *.md text eol=lf
 *.vert text eol=lf
 *.xml text eol=lf

.travis.yml

@@ -19,10 +19,6 @@ cache:
 jobs:
   include:
     - stage: test
-      script:
-      - npm run lint
-      - npm run docs
-      - npm run tap
     - stage: deploy
       node_js: 10
       script: npm run build

package.json

@@ -24,36 +24,40 @@
     "watch": "webpack --progress --colors --watch --watch-poll"
   },
   "devDependencies": {
-    "babel-core": "^6.23.1",
-    "babel-eslint": "^10.1.0",
-    "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",
-    "gh-pages": "^1.0.0",
-    "jsdoc": "^3.6.0",
-    "json": "^9.0.4",
-    "playwright-chromium": "^1.0.1",
+    "babel-core": "6.26.3",
+    "babel-eslint": "10.1.0",
+    "babel-loader": "7.1.5",
+    "babel-polyfill": "6.26.0",
+    "babel-preset-env": "1.7.0",
+    "copy-webpack-plugin": "4.6.0",
+    "docdash": "0.4.0",
+    "eslint": "7.31.0",
+    "eslint-config-scratch": "6.0.0",
+    "gh-pages": "1.2.0",
+    "jsdoc": "3.6.7",
+    "json": "9.0.6",
+    "playwright-chromium": "1.13.0",
+    "scratch-render-fonts": "1.0.0-prerelease.20210401210003",
     "scratch-vm": "0.2.0-prerelease.20201125065300",
-    "tap": "^11.0.0",
-    "travis-after-all": "^1.4.4",
-    "uglifyjs-webpack-plugin": "^1.2.5",
-    "webpack": "^4.8.0",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.4"
+    "tap": "11.1.5",
+    "travis-after-all": "1.4.5",
+    "uglifyjs-webpack-plugin": "1.3.0",
+    "webpack": "4.46.0",
+    "webpack-cli": "3.3.12",
+    "webpack-dev-server": "3.11.2"
+  },
+  "peerDependencies": {
+    "scratch-render-fonts": "^1.0.0-prerelease"
   },
   "dependencies": {
     "grapheme-breaker": "0.3.2",
     "hull.js": "0.2.10",
-    "ify-loader": "1.0.4",
+    "ify-loader": "1.1.0",
     "linebreak": "0.3.0",
     "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.20210511195415",
     "twgl.js": "4.4.0"
   }
 }

renovate.json5

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+
+  "extends": [
+    "github>LLK/scratch-renovate-config:conservative"
+  ],
+
+  "packageRules": [
+    // Don't auto-merge scratch-vm since that will cause a never-ending cycle of dependency updates. Ideally, updating
+    // scratch-vm in scratch-render shouldn't make a scratch-render release. Once that's true we can remove this rule.
+    {
+      "matchPackageNames": ["scratch-vm"],
+      "automerge": false
+    }
+  ]
+}

src/RenderWebGL.js

@@ -653,7 +653,10 @@ class RenderWebGL extends EventEmitter {
         gl.clearColor(...this._backgroundColor4f);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
-        this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, this._projection);
+        this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, this._projection, {
+            framebufferWidth: gl.canvas.width,
+            framebufferHeight: gl.canvas.height
+        });
         if (this._snapshotCallbacks.length > 0) {
             const snapshot = gl.canvas.toDataURL();
             this._snapshotCallbacks.forEach(cb => cb(snapshot));
@@ -1132,114 +1135,6 @@ class RenderWebGL extends EventEmitter {
         return Number(hit);
     }
 
-    /**
-     * @typedef DrawableExtractionOld
-     * @property {Uint8Array} data Raw pixel data for the drawable
-     * @property {int} width Drawable bounding box width
-     * @property {int} height Drawable bounding box height
-     * @property {Array<number>} scratchOffset [x, y] offset in Scratch coordinates
-     * from the drawable position to the client x, y coordinate
-     * @property {int} x The x coordinate relative to drawable bounding box
-     * @property {int} y The y coordinate relative to drawable bounding box
-     */
-
-    /**
-     * Return drawable pixel data and picking coordinates relative to the drawable bounds
-     * @param {int} drawableID The ID of the drawable to get pixel data for
-     * @param {int} x The client x coordinate of the picking location.
-     * @param {int} y The client y coordinate of the picking location.
-     * @return {?DrawableExtractionOld} Data about the picked drawable
-     * @deprecated Use {@link extractDrawableScreenSpace} instead.
-     */
-    extractDrawable (drawableID, x, y) {
-        this._doExitDrawRegion();
-
-        const drawable = this._allDrawables[drawableID];
-        if (!drawable) return null;
-
-        // Convert client coordinates into absolute scratch units
-        const scratchX = this._nativeSize[0] * ((x / this._gl.canvas.clientWidth) - 0.5);
-        const scratchY = this._nativeSize[1] * ((y / this._gl.canvas.clientHeight) - 0.5);
-
-        const gl = this._gl;
-
-        const bounds = drawable.getFastBounds();
-        bounds.snapToInt();
-
-        // Set a reasonable max limit width and height for the bufferInfo bounds
-        const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
-        const clampedWidth = Math.min(2048, bounds.width, maxTextureSize);
-        const clampedHeight = Math.min(2048, bounds.height, maxTextureSize);
-
-        // Make a new bufferInfo since this._queryBufferInfo is limited to 480x360
-        const attachments = [
-            {format: gl.RGBA},
-            {format: gl.DEPTH_STENCIL}
-        ];
-        const bufferInfo = twgl.createFramebufferInfo(gl, attachments, clampedWidth, clampedHeight);
-
-        try {
-            // If the new bufferInfo is invalid, fall back to using the smaller _queryBufferInfo
-            twgl.bindFramebufferInfo(gl, bufferInfo);
-            if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
-                twgl.bindFramebufferInfo(gl, this._queryBufferInfo);
-            }
-
-            // Translate to scratch units relative to the drawable
-            const pickX = scratchX - bounds.left;
-            const pickY = scratchY + bounds.top;
-
-            // Limit size of viewport to the bounds around the target Drawable,
-            // and create the projection matrix for the draw.
-            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(0, 0, 0, 0);
-            gl.clear(gl.COLOR_BUFFER_BIT);
-            try {
-                gl.disable(gl.BLEND);
-                // ImageData objects store alpha un-premultiplied, so draw with the `straightAlpha` draw mode.
-                this._drawThese([drawableID], ShaderManager.DRAW_MODE.straightAlpha, projection,
-                    {effectMask: ~ShaderManager.EFFECT_INFO.ghost.mask});
-            } finally {
-                gl.enable(gl.BLEND);
-            }
-
-            const data = new Uint8Array(Math.floor(bounds.width * bounds.height * 4));
-            gl.readPixels(0, 0, bounds.width, bounds.height, gl.RGBA, gl.UNSIGNED_BYTE, data);
-
-            if (this._debugCanvas) {
-                this._debugCanvas.width = bounds.width;
-                this._debugCanvas.height = bounds.height;
-                const ctx = this._debugCanvas.getContext('2d');
-                const imageData = ctx.createImageData(bounds.width, bounds.height);
-                imageData.data.set(data);
-                ctx.putImageData(imageData, 0, 0);
-                ctx.beginPath();
-                ctx.arc(pickX, pickY, 3, 0, 2 * Math.PI, false);
-                ctx.fillStyle = 'white';
-                ctx.fill();
-                ctx.lineWidth = 1;
-                ctx.strokeStyle = 'black';
-                ctx.stroke();
-            }
-
-            return {
-                data: data,
-                width: bounds.width,
-                height: bounds.height,
-                scratchOffset: [
-                    -scratchX + drawable._position[0],
-                    -scratchY - drawable._position[1]
-                ],
-                x: pickX,
-                y: pickY
-            };
-        } finally {
-            gl.deleteFramebuffer(bufferInfo.framebuffer);
-        }
-    }
-
     /**
      * @typedef DrawableExtraction
      * @property {ImageData} data Raw pixel data for the drawable
@@ -1317,9 +1212,15 @@ class RenderWebGL extends EventEmitter {
 
             gl.clearColor(0, 0, 0, 0);
             gl.clear(gl.COLOR_BUFFER_BIT);
-            // Don't apply the ghost effect. TODO: is this an intentional design decision?
             this._drawThese([drawableID], ShaderManager.DRAW_MODE.straightAlpha, projection,
-                {effectMask: ~ShaderManager.EFFECT_INFO.ghost.mask});
+                {
+                    // Don't apply the ghost effect. TODO: is this an intentional design decision?
+                    effectMask: ~ShaderManager.EFFECT_INFO.ghost.mask,
+                    // We're doing this in screen-space, so the framebuffer dimensions should be those of the canvas in
+                    // screen-space. This is used to ensure SVG skins are rendered at the proper resolution.
+                    framebufferWidth: canvas.width,
+                    framebufferHeight: canvas.height
+                });
 
             const data = new Uint8Array(Math.floor(clampedWidth * clampedHeight * 4));
             gl.readPixels(0, 0, clampedWidth, clampedHeight, gl.RGBA, gl.UNSIGNED_BYTE, data);
@@ -1821,18 +1722,6 @@ class RenderWebGL extends EventEmitter {
         this._regionId = null;
     }
 
-    /**
-     * Get the screen-space scale of a drawable, as percentages of the drawable's "normal" size.
-     * @param {Drawable} drawable The drawable whose screen-space scale we're fetching.
-     * @returns {Array<number>} The screen-space X and Y dimensions of the drawable's scale, as percentages.
-     */
-    _getDrawableScreenSpaceScale (drawable) {
-        return [
-            drawable.scale[0] * this._gl.canvas.width / this._nativeSize[0],
-            drawable.scale[1] * this._gl.canvas.height / this._nativeSize[1]
-        ];
-    }
-
     /**
      * Draw a set of Drawables, by drawable ID
      * @param {Array<int>} drawables The Drawable IDs to draw, possibly this._drawList.
@@ -1843,6 +1732,8 @@ class RenderWebGL extends EventEmitter {
      * @param {object.<string,*>} opts.extraUniforms Extra uniforms for the shaders.
      * @param {int} opts.effectMask Bitmask for effects to allow
      * @param {boolean} opts.ignoreVisibility Draw all, despite visibility (e.g. stamping, touching color)
+     * @param {int} opts.framebufferWidth The width of the framebuffer being drawn onto. Defaults to "native" width
+     * @param {int} opts.framebufferHeight The height of the framebuffer being drawn onto. Defaults to "native" height
      * @private
      */
     _drawThese (drawables, drawMode, projection, opts = {}) {
@@ -1850,6 +1741,11 @@ class RenderWebGL extends EventEmitter {
         const gl = this._gl;
         let currentShader = null;
 
+        const framebufferSpaceScaleDiffers = (
+            'framebufferWidth' in opts && 'framebufferHeight' in opts &&
+            opts.framebufferWidth !== this._nativeSize[0] && opts.framebufferHeight !== this._nativeSize[1]
+        );
+
         const numDrawables = drawables.length;
         for (let drawableIndex = 0; drawableIndex < numDrawables; ++drawableIndex) {
             const drawableID = drawables[drawableIndex];
@@ -1864,8 +1760,13 @@ class RenderWebGL extends EventEmitter {
             // the ignoreVisibility flag is used (e.g. for stamping or touchingColor).
             if (!drawable.getVisible() && !opts.ignoreVisibility) continue;
 
-            // Combine drawable scale with the native vs. backing pixel ratio
-            const drawableScale = this._getDrawableScreenSpaceScale(drawable);
+            // drawableScale is the "framebuffer-pixel-space" scale of the drawable, as percentages of the drawable's
+            // "native size" (so 100 = same as skin's "native size", 200 = twice "native size").
+            // If the framebuffer dimensions are the same as the stage's "native" size, there's no need to calculate it.
+            const drawableScale = framebufferSpaceScaleDiffers ? [
+                drawable.scale[0] * opts.framebufferWidth / this._nativeSize[0],
+                drawable.scale[1] * opts.framebufferHeight / this._nativeSize[1]
+            ] : drawable.scale;
 
             // If the skin or texture isn't ready yet, skip it.
             if (!drawable.skin || !drawable.skin.getTexture(drawableScale)) continue;
@@ -2097,7 +1998,7 @@ class RenderWebGL extends EventEmitter {
 }
 
 // :3
-RenderWebGL.prototype.canHazPixels = RenderWebGL.prototype.extractDrawable;
+RenderWebGL.prototype.canHazPixels = RenderWebGL.prototype.extractDrawableScreenSpace;
 
 /**
  * Values for setUseGPU()

src/playground/playground.js

@@ -186,7 +186,7 @@ canvas.addEventListener('click', event => {
     const pickID = renderer.pick(mousePos.x, mousePos.y);
     console.log(`You clicked on ${(pickID < 0 ? 'nothing' : `ID# ${pickID}`)}`);
     if (pickID >= 0) {
-        console.dir(renderer.extractDrawable(pickID, mousePos.x, mousePos.y));
+        console.dir(renderer.extractDrawableScreenSpace(pickID, mousePos.x, mousePos.y));
     }
 });