Add a hard reset of MIPs and simplify logic

Author: ktbee

src/SVGMIP.js

@@ -15,46 +15,29 @@ class SVGMIP {
         this._scale = scale;
         this._texture = null;
         this._callback = callback;
-        this.dirty = false;
 
         this.draw();
     }
 
     draw () {
-        if (this._texture) {
-            this._svgRenderer._draw(this._scale, () => {
-                const gl = this._renderer.gl;
-                const textureData = this._getTextureData();
-
-                gl.bindTexture(gl.TEXTURE_2D, this._texture);
-                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
-                this._callback(textureData);
-            });
-        } else {
-            this._svgRenderer._draw(this._scale, () => {
-                const textureData = this._getTextureData();
-                const textureOptions = {
-                    auto: false,
-                    wrap: this._renderer.gl.CLAMP_TO_EDGE,
-                    src: textureData
-                };
-
-                this._texture = twgl.createTexture(this._renderer.gl, textureOptions);
-                this._callback(textureData);
-            });
-        }
+        this._svgRenderer._draw(this._scale, () => {
+            const textureData = this._getTextureData();
+            const textureOptions = {
+                auto: false,
+                wrap: this._renderer.gl.CLAMP_TO_EDGE,
+                src: textureData
+            };
+
+            this._texture = twgl.createTexture(this._renderer.gl, textureOptions);
+            this._callback(textureData);
+        });
     }
 
     dispose () {
         this._renderer.gl.deleteTexture(this.getTexture());
     }
 
     getTexture () {
-        if (this.dirty) {
-            this.draw();
-            this.dirty = false;
-        }
-
         return this._texture;
     }
 

src/SVGSkin.js

@@ -35,11 +35,11 @@ class SVGSkin extends Skin {
         /** @type {Array.<SVGMIPs>} */
         this._scaledMIPs = [];
 
-        /** @type {Number} */
+        /**
+        * Ratio of the size of the SVG and the max size of the WebGL texture
+        * @type {Number}
+        */
         this._maxTextureScale = 1;
-
-        /** @type {Number} */
-        this._largestTextureScale = 1;
     }
 
     /**
@@ -54,7 +54,6 @@ class SVGSkin extends Skin {
             }
             this._texture = null;
             this._scaledMIPs.length = 0;
-            this._largestTextureScale = 1;
         }
         super.dispose();
     }
@@ -80,26 +79,22 @@ class SVGSkin extends Skin {
      * Create a MIP for a given scale and pass it a callback for updating
      * state when switching between scales and MIPs.
      * @param {number} scale - The relative size of the MIP
+     * @param {function} resetCallback - this is a callback for doing a hard reset
+     * of MIPs and a reset of the rotation center. Only passed in if the MIP scale is 1.
      * @return {SVGMIP} An object that handles creating and updating SVG textures.
      */
-    createMIP (scale) {
-        const callback = textureData => {
-            if (scale > this._largestTextureScale) {
-                this._largestTextureScale = scale;
+    createMIP (scale, resetCallback) {
+        const textureCallback = textureData => {
+            // Check if we have the largest MIP
+            // eslint-disable-next-line no-use-before-define
+            if (this._scaledMIPs[this._scaledMIPs.length - 1] === mip) {
                 // Currently silhouette only gets scaled up
                 this._silhouette.update(textureData);
             }
 
-            if (scale === 1) {
-                const maxDimension = Math.max(textureData.width, textureData.height);
-                let testScale = 2;
-                for (testScale; maxDimension * testScale <= MAX_TEXTURE_DIMENSION; testScale *= 2) {
-                    this._maxTextureScale = testScale;
-                }
-                this._silhouette.update(textureData);
-            }
+            if (resetCallback) resetCallback();
         };
-        const mip = new SVGMIP(this._renderer, this._svgRenderer, scale, callback);
+        const mip = new SVGMIP(this._renderer, this._svgRenderer, scale, textureCallback);
 
         return mip;
     }
@@ -108,7 +103,6 @@ class SVGSkin extends Skin {
      * @param {Array<number>} scale - The scaling factors to be used, each in the [0,100] range.
      * @return {WebGLTexture} The GL texture representation of this skin when drawing at the given scale.
      */
-    // eslint-disable-next-line no-unused-vars
     getTexture (scale) {
         // The texture only ever gets uniform scale. Take the larger of the two axes.
         const scaleMax = scale ? Math.max(Math.abs(scale[0]), Math.abs(scale[1])) : 100;
@@ -136,34 +130,44 @@ 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.
+     * Do a hard reset of the existing MIPs by calling dispose(), setting a new
+     * scale 1 MIP in this._scaledMIPs, and finally updating the rotationCenter.
+     * @param {SVGMIPs} mip - An object that handles creating and updating SVG textures.
      * @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
+    * @fires Skin.event:WasAltered
      */
-    setSVG (svgData, rotationCenter) {
-        this._svgRenderer.loadString(svgData);
+    resetMIPs (mip, rotationCenter) {
+        this._scaledMIPs.forEach(oldMIP => oldMIP.dispose());
+        this._scaledMIPs.length = 0;
 
-        if (this._texture) {
-            this._texture = this._scaledMIPs[INDEX_OFFSET];
-            this._texture.draw();
-
-            for (const index in this._scaledMIPs) {
-                if (index !== INDEX_OFFSET) {
-                    this._scaledMIPs[index].dirty = true;
-                }
-            }
-        } else {
-            const textureScale = 1;
-            this._texture = this._scaledMIPs[INDEX_OFFSET] = this.createMIP(textureScale);
-        }
+        // Set new scale 1 MIP after outdated MIPs have been disposed
+        this._texture = this._scaledMIPs[INDEX_OFFSET] = mip;
 
         if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
         this.setRotationCenter.apply(this, rotationCenter);
         this.emit(Skin.Events.WasAltered);
     }
 
+    /**
+     * 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.
+     */
+    setSVG (svgData, rotationCenter) {
+        this._svgRenderer.loadString(svgData);
+
+        const maxDimension = Math.ceil(Math.max(this.size[0], this.size[1]));
+        let testScale = 2;
+        for (testScale; maxDimension * testScale <= MAX_TEXTURE_DIMENSION; testScale *= 2) {
+            this._maxTextureScale = testScale;
+        }
+
+        // Create the 1.0 scale MIP at INDEX_OFFSET.
+        const textureScale = 1;
+        const mip = this.createMIP(textureScale, () => this.resetMIPs(mip, rotationCenter));
+    }
+
 }
 
 module.exports = SVGSkin;