Merge pull request #817 from adroitwhiz/remove-extractdrawable

Remove extractDrawable

src/RenderWebGL.js

@@ -1132,114 +1132,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
@@ -2097,7 +1989,7 @@ class RenderWebGL extends EventEmitter {
 }
 
 // :3
-RenderWebGL.prototype.canHazPixels = RenderWebGL.prototype.extractDrawable;
+RenderWebGL.prototype.canHazPixels = RenderWebGL.prototype.extractDrawableScreenSpace;
 
 /**
  * Values for setUseGPU()

src/SVGSkin.js

@@ -1,7 +1,7 @@
 const twgl = require('twgl.js');
 
 const Skin = require('./Skin');
-const SvgRenderer = require('scratch-svg-renderer').SVGRenderer;
+const {loadSvgString, serializeSvgToString} = require('scratch-svg-renderer');
 const ShaderManager = require('./ShaderManager');
 
 const MAX_TEXTURE_DIMENSION = 2048;
@@ -28,8 +28,20 @@ class SVGSkin extends Skin {
         /** @type {RenderWebGL} */
         this._renderer = renderer;
 
-        /** @type {SvgRenderer} */
-        this._svgRenderer = new SvgRenderer();
+        /** @type {HTMLImageElement} */
+        this._svgImage = document.createElement('img');
+
+        /** @type {boolean} */
+        this._svgImageLoaded = false;
+
+        /** @type {Array<number>} */
+        this._size = [0, 0];
+
+        /** @type {HTMLCanvasElement} */
+        this._canvas = document.createElement('canvas');
+
+        /** @type {CanvasRenderingContext2D} */
+        this._context = this._canvas.getContext('2d');
 
         /** @type {Array<WebGLTexture>} */
         this._scaledMIPs = [];
@@ -56,7 +68,7 @@ class SVGSkin extends Skin {
      * @return {Array<number>} the natural size, in Scratch units, of this skin.
      */
     get size () {
-        return this._svgRenderer.size;
+        return [this._size[0], this._size[1]];
     }
 
     useNearest (scale, drawable) {
@@ -94,18 +106,27 @@ class SVGSkin extends Skin {
      * @return {SVGMIP} An object that handles creating and updating SVG textures.
      */
     createMIP (scale) {
-        this._svgRenderer.draw(scale);
+        const [width, height] = this._size;
+        this._canvas.width = width * scale;
+        this._canvas.height = height * scale;
+        if (
+            this._canvas.width <= 0 ||
+            this._canvas.height <= 0 ||
+            // Even if the canvas at the current scale has a nonzero size, the image's dimensions are floored
+            // pre-scaling; e.g. if an image has a width of 0.4 and is being rendered at 3x scale, the canvas will have
+            // a width of 1, but the image's width will be rounded down to 0 on some browsers (Firefox) prior to being
+            // drawn at that scale, resulting in an IndexSizeError if we attempt to draw it.
+            this._svgImage.naturalWidth <= 0 ||
+            this._svgImage.naturalHeight <= 0
+        ) return super.getTexture();
+        this._context.clearRect(0, 0, this._canvas.width, this._canvas.height);
+        this._context.setTransform(scale, 0, 0, scale, 0, 0);
+        this._context.drawImage(this._svgImage, 0, 0);
 
         // 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 one of the canvas dimensions is 0, set this MIP to an empty image texture.
-        // This avoids an IndexSizeError from attempting to getImageData when one of the dimensions is 0.
-        if (canvas.width === 0 || canvas.height === 0) return super.getTexture();
-
-        const context = canvas.getContext('2d');
-        const textureData = context.getImageData(0, 0, canvas.width, canvas.height);
+        const textureData = this._context.getImageData(0, 0, this._canvas.width, this._canvas.height);
 
         const textureOptions = {
             auto: false,
@@ -147,7 +168,7 @@ class SVGSkin extends Skin {
         // Can't use bitwise stuff here because we need to handle negative exponents
         const mipScale = Math.pow(2, mipLevel - INDEX_OFFSET);
 
-        if (this._svgRenderer.loaded && !this._scaledMIPs[mipLevel]) {
+        if (this._svgImageLoaded && !this._scaledMIPs[mipLevel]) {
             this._scaledMIPs[mipLevel] = this.createMIP(mipScale);
         }
 
@@ -156,9 +177,6 @@ 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));
@@ -169,17 +187,27 @@ 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.
+     * @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
      */
     setSVG (svgData, rotationCenter) {
-        this._svgRenderer.loadSVG(svgData, false, () => {
-            const svgSize = this._svgRenderer.size;
-            if (svgSize[0] === 0 || svgSize[1] === 0) {
+        const svgTag = loadSvgString(svgData);
+        const svgText = serializeSvgToString(svgTag, true /* shouldInjectFonts */);
+        this._svgImageLoaded = false;
+
+        // If there is another load already in progress, replace the old onload to effectively cancel the old load
+        this._svgImage.onload = () => {
+            const {x, y, width, height} = svgTag.viewBox.baseVal;
+            this._size[0] = width;
+            this._size[1] = height;
+
+            if (width === 0 || height === 0) {
                 super.setEmptyImageData();
                 return;
             }
 
-            const maxDimension = Math.ceil(Math.max(this.size[0], this.size[1]));
+            const maxDimension = Math.ceil(Math.max(width, height));
             let testScale = 2;
             for (testScale; maxDimension * testScale <= MAX_TEXTURE_DIMENSION; testScale *= 2) {
                 this._maxTextureScale = testScale;
@@ -188,12 +216,17 @@ class SVGSkin extends Skin {
             this.resetMIPs();
 
             if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
-            const viewOffset = this._svgRenderer.viewOffset;
-            this._rotationCenter[0] = rotationCenter[0] - viewOffset[0];
-            this._rotationCenter[1] = rotationCenter[1] - viewOffset[1];
+            // Compensate for viewbox offset.
+            // See https://github.com/LLK/scratch-render/pull/90.
+            this._rotationCenter[0] = rotationCenter[0] - x;
+            this._rotationCenter[1] = rotationCenter[1] - y;
+
+            this._svgImageLoaded = true;
 
             this.emit(Skin.Events.WasAltered);
-        });
+        };
+
+        this._svgImage.src = `data:image/svg+xml;utf8,${encodeURIComponent(svgText)}`;
     }
 
 }

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));
     }
 });
 

test/helper/page-util.js

@@ -14,7 +14,7 @@ window.waitForSVGSkinLoad = renderer => new Promise(resolve => {
         for (const skin of renderer._allSkins) {
             if (skin.constructor.name !== 'SVGSkin') continue;
             numSVGSkins++;
-            if (skin._svgRenderer.loaded) numLoadedSVGSkins++;
+            if (skin._svgImage.complete) numLoadedSVGSkins++;
         }
 
         if (numSVGSkins === numLoadedSVGSkins) {
@@ -47,7 +47,7 @@ window.initVM = render => {
 
     vm.attachStorage(storage);
     vm.attachRenderer(render);
-    vm.attachV2SVGAdapter(new ScratchSVGRenderer.SVGRenderer());
+    vm.attachV2SVGAdapter(ScratchSVGRenderer.V2SVGAdapter);
     vm.attachV2BitmapAdapter(new ScratchSVGRenderer.BitmapAdapter());
 
     return vm;