Merge pull request #712 from LLK/dependabot/npm_and_yarn/scratch-svg-renderer-0.2.0-prerelease.20201019174008

Bump scratch-svg-renderer from 0.2.0-prerelease.20201016121710 to 0.2.0-prerelease.20201019174008

package.json

@@ -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.20201014145347",
+    "scratch-svg-renderer": "0.2.0-prerelease.20201019174008",
     "twgl.js": "4.4.0"
   }
 }

src/Drawable.js

@@ -117,6 +117,12 @@ class Drawable {
         this._convexHullPoints = null;
         this._convexHullDirty = true;
 
+        // The precise bounding box will be from the transformed convex hull points,
+        // so initialize the array of transformed hull points in setConvexHullPoints.
+        // Initializing it once per convex hull recalculation avoids unnecessary creation of twgl.v3 objects.
+        this._transformedHullPoints = null;
+        this._transformedHullDirty = true;
+
         this._skinWasAltered = this._skinWasAltered.bind(this);
 
         this.isTouching = this._isTouchingNever;
@@ -137,6 +143,7 @@ class Drawable {
     setTransformDirty () {
         this._transformDirty = true;
         this._inverseTransformDirty = true;
+        this._transformedHullDirty = true;
     }
 
     /**
@@ -457,6 +464,14 @@ class Drawable {
     setConvexHullPoints (points) {
         this._convexHullPoints = points;
         this._convexHullDirty = false;
+
+        // Re-create the "transformed hull points" array.
+        // We only do this when the hull points change to avoid unnecessary allocations and GC.
+        this._transformedHullPoints = [];
+        for (let i = 0; i < points.length; i++) {
+            this._transformedHullPoints.push(twgl.v3.create());
+        }
+        this._transformedHullDirty = true;
     }
 
     /**
@@ -611,23 +626,27 @@ class Drawable {
      * @private
      */
     _getTransformedHullPoints () {
+        if (!this._transformedHullDirty) {
+            return this._transformedHullPoints;
+        }
+
         const projection = twgl.m4.ortho(-1, 1, -1, 1, -1, 1);
         const skinSize = this.skin.size;
         const halfXPixel = 1 / skinSize[0] / 2;
         const halfYPixel = 1 / skinSize[1] / 2;
         const tm = twgl.m4.multiply(this._uniforms.u_modelMatrix, projection);
-        const transformedHullPoints = [];
         for (let i = 0; i < this._convexHullPoints.length; i++) {
             const point = this._convexHullPoints[i];
-            const glPoint = twgl.v3.create(
-                0.5 + (-point[0] / skinSize[0]) - halfXPixel,
-                (point[1] / skinSize[1]) - 0.5 + halfYPixel,
-                0
-            );
-            twgl.m4.transformPoint(tm, glPoint, glPoint);
-            transformedHullPoints.push(glPoint);
+            const dstPoint = this._transformedHullPoints[i];
+
+            dstPoint[0] = 0.5 + (-point[0] / skinSize[0]) - halfXPixel;
+            dstPoint[1] = (point[1] / skinSize[1]) - 0.5 + halfYPixel;
+            twgl.m4.transformPoint(tm, dstPoint, dstPoint);
         }
-        return transformedHullPoints;
+
+        this._transformedHullDirty = false;
+
+        return this._transformedHullPoints;
     }
 
     /**

src/RenderWebGL.js

@@ -350,13 +350,12 @@ class RenderWebGL extends EventEmitter {
      * @param {!string} svgData - new SVG to use.
      * @param {?Array<number>} rotationCenter Optional: rotation center of the skin. If not supplied, the center of the
      * skin will be used
-     * @param {function} [onSkinReady] - Optional: if present, will be called after the skin loads
      * @returns {!int} the ID for the new skin.
      */
-    createSVGSkin (svgData, rotationCenter, onSkinReady) {
+    createSVGSkin (svgData, rotationCenter) {
         const skinId = this._nextSkinId++;
         const newSkin = new SVGSkin(skinId, this);
-        newSkin.setSVG(svgData, rotationCenter, onSkinReady);
+        newSkin.setSVG(svgData, rotationCenter);
         this._allSkins[skinId] = newSkin;
         return skinId;
     }
@@ -394,7 +393,6 @@ class RenderWebGL extends EventEmitter {
      * @param {!string} svgData - new SVG to use.
      * @param {?Array<number>} rotationCenter Optional: rotation center of the skin. If not supplied, the center of the
      * skin will be used
-     * @returns {Promise} - a promise which resolves after the skin has updated
      */
     updateSVGSkin (skinId, svgData, rotationCenter) {
         if (this._allSkins[skinId] instanceof SVGSkin) {
@@ -403,9 +401,8 @@ class RenderWebGL extends EventEmitter {
         }
 
         const newSkin = new SVGSkin(skinId, this);
-        return newSkin.setSVG(svgData, rotationCenter).then(() => {
-            this._reskin(skinId, newSkin);
-        });
+        newSkin.setSVG(svgData, rotationCenter);
+        this._reskin(skinId, newSkin);
     }
 
     /**

src/SVGSkin.js

@@ -140,15 +140,13 @@ 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 {function} [onSkinReady] - Optional: if present, will be called after the skin loads
-     * @returns {Promise} - a promise which resolves after the SVG is loaded and ready
      */
-    setSVG (svgData, rotationCenter, onSkinReady) {
-        return this._svgRenderer.loadSVG(svgData, false, () => {
+    setSVG (svgData, rotationCenter) {
+        this._svgRenderer.loadSVG(svgData, false, () => {
             const svgSize = this._svgRenderer.size;
             if (svgSize[0] === 0 || svgSize[1] === 0) {
                 super.setEmptyImageData();
-                return onSkinReady && onSkinReady();
+                return;
             }
 
             const maxDimension = Math.ceil(Math.max(this.size[0], this.size[1]));
@@ -165,9 +163,6 @@ class SVGSkin extends Skin {
             this._rotationCenter[1] = rotationCenter[1] - viewOffset[1];
 
             this.emit(Skin.Events.WasAltered);
-            if (onSkinReady) {
-                onSkinReady();
-            }
         });
     }