Merge pull request #745 from adroitwhiz/remove-svgrenderer-dependency

Move SVG renderer logic back into SVGSkin

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

src/EffectTransform.js

@@ -6,6 +6,7 @@
 
 const twgl = require('twgl.js');
 
+const {rgbToHsv, hsvToRgb} = require('./util/color-conversions');
 const ShaderManager = require('./ShaderManager');
 
 /**
@@ -26,102 +27,6 @@ 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/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/util/color-conversions.js

@@ -0,0 +1,97 @@
+/**
+ * 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

@@ -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;

test/unit/ColorConversionTests.js

@@ -0,0 +1,48 @@
+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();
+});