fix(renderer): Prevent Renderer Crash on Texture Update by Preloading Assets

src/renderer.js

@@ -50,6 +50,7 @@
     this.context = context;
     this.layers = [];
     this.layerMap = new Map();
+    this.frameRequested = {};
   }
 
   /**
@@ -92,8 +93,6 @@
     this.layerMap.set(layer.name, layer);
     this.layers.sort((a, b) => a.zIndex - b.zIndex);
 
-    this.frameRequested = {};
-
     return layer.context;
   }
 
@@ -303,12 +302,16 @@
     this.urls.texturesAtlas = texturesAtlasUrl;
 
     return new Promise((resolve, reject) => {
-      this.textures = new TexturePack(
+      const tempTextures = new TexturePack(
         texturesIndexUrl,
         texturesAtlasUrl,
         (error) => {
-          if (error) reject(error);
-          else resolve();
+          if (error) {
+            reject(error);
+          } else {
+            this.textures = tempTextures;
+            resolve();
+          }
         },
       );
     });
@@ -1319,7 +1322,7 @@
    */
   _renderPreviewingPiecePositions(context) {
     for (const [index, value] of this._previewingPositions) {
       const [_, piece, fillColor = DEFAULT_PREVIEW_FILL_COLOR] = value;
       this._renderPreviewPiece(context, index, piece, fillColor);
     }
   }
@@ -1883,10 +1886,10 @@
       this._layersManager.clear('pieces');
       this._renderPlacedPieces(context);
     });
     this._layersManager.requestAnimationFrame('preview-pieces', (context) => {
       this._layersManager.clear('preview-pieces');
     });
     this._layersManager.requestAnimationFrame('preview-hexagons', (context) => {
       this._layersManager.clear('preview-hexagons');
     });
   }
@@ -1954,14 +1957,14 @@
     if (this._resizeObserver) {
       try {
         this._resizeObserver.disconnect();
       } catch (e) {}
       this._resizeObserver = null;
     }
 
     if (this._mutationObserver) {
       try {
         this._mutationObserver.disconnect();
       } catch (e) {}
       this._mutationObserver = null;
     }
 
@@ -2019,7 +2022,7 @@
     ) {
       try {
         this._container.removeChild(this._canvas);
       } catch (e) {}
     }
     this._canvas = null;
     this._context = null;