feat: destroy method on Controller (#404)

- fix bug in PixiLayer onUnmount
- change class name in createLayerContainer, class name was also used in LayerManager
- implement destroy method on Controller to remove overlay and layers from DOM, unmount layers and unset references

.storybook/src/utils/elements.ts

@@ -11,7 +11,7 @@ export const createRootContainer = (width: number) => {
 
 export const createLayerContainer = (width: number, height: number) => {
   const container = document.createElement('div');
-  container.className = 'layer-container';
+  container.className = 'story-layer-container';
   container.setAttribute('style', `height: ${height}px; width: ${width}px;background-color: #eee;`);
   container.setAttribute('height', `${height}`);
   container.setAttribute('width', `${width}`);

src/control/LayerManager.ts

@@ -89,19 +89,30 @@ export class LayerManager {
   }
 
   /**
-   * Remove layer from manager, and unmounts it
+   * Remove and unmount layer from manager
    * @param layerId name of layer
    */
   removeLayer(layerId: string): LayerManager {
-    const idx = this.layers.findIndex((l) => l.id === layerId);
-    if (idx !== -1) {
-      this.layers[idx].onUnmount();
-      this.layers.splice(idx, 1);
+    const layer = this.layers.find((l) => l.id === layerId);
+    if (layer) {
+      layer.onUnmount();
+      this.layers = this.layers.filter((l) => l.id !== layerId);
     }
 
     return this;
   }
 
+  /**
+   * Remove and unmount all layers from manager
+   */
+  removeAllLayers(): LayerManager {
+    const { layers } = this;
+    layers.forEach((layer) => {
+      this.removeLayer(layer.id);
+    });
+    return this;
+  }
+
   getLayer(layerId: string): Layer {
     return this.layers.find((l) => l.id === layerId);
   }
@@ -225,6 +236,20 @@ export class LayerManager {
     return this;
   }
 
+  destroy(): LayerManager {
+    this.clearAllData(true);
+    this.removeAllLayers();
+    this.layerContainer.remove();
+    this.layerContainer = undefined;
+    this.container = undefined;
+    this.layers = undefined;
+    this._zoomPanHandler = undefined;
+    this._axis = undefined;
+    this._svgContainer = undefined;
+
+    return this;
+  }
+
   get zoomPanHandler(): ZoomPanHandler {
     return this._zoomPanHandler;
   }

src/control/MainController.ts

@@ -86,14 +86,22 @@ export class Controller {
   }
 
   /**
-   * Remove layer from list
+   * Remove and unmount layer from list
    * @param layerId string id
    */
   removeLayer(layerId: string): Controller {
     this.layerManager.removeLayer(layerId);
     return this;
   }
 
+  /**
+   * Remove and unmount all layers from list
+   */
+  removeAllLayers(): Controller {
+    this.layerManager.removeAllLayers();
+    return this;
+  }
+
   /**
    * Find first layer with given id, returns undefined if none are found
    * @param layerId string id
@@ -243,6 +251,19 @@ export class Controller {
     return this;
   }
 
+  /**
+   * Destroy Controller
+   * Convenience method for removing from DOM and clearing references
+   */
+  destroy(): Controller {
+    this.layerManager.destroy();
+    this._overlay.destroy();
+    this._referenceSystem = undefined;
+    this.layerManager = undefined;
+    this._overlay = undefined;
+    return this;
+  }
+
   private getHighestZIndex(layers: Layer[]): number {
     const highestZIndex = layers.length > 0 ? layers.reduce((max, layers) => (max.order > layers.order ? max : layers)).order : 1;
     return highestZIndex;

src/control/overlay.ts

@@ -109,6 +109,10 @@ class Overlay {
   setZIndex(zIndex: number): void {
     this.elm.style('z-index', zIndex);
   }
+
+  destroy(): void {
+    this.source.remove();
+  }
 }
 
 const overlay = (caller: any, container: HTMLElement): Overlay => new Overlay(caller, container);

src/layers/CasingLayer.ts

@@ -57,7 +57,7 @@ export class CasingLayer extends WellboreBaseComponentLayer {
     const casingWallWidth = Math.abs(casing.diameter - casing.innerDiameter);
 
     // Pixi.js-legacy handles SimpleRope and advanced render methods poorly
-    if (this.renderType === RENDERER_TYPE.CANVAS) {
+    if (this.renderType() === RENDERER_TYPE.CANVAS) {
       this.drawBigPolygon(polygon, solidColor);
     } else {
       this.drawRope(

src/layers/CementLayer.ts

@@ -48,7 +48,7 @@ export class CementLayer extends WellboreBaseComponentLayer {
     const texture: Texture = this.createTexture();
 
     cementShapes.forEach((cementShape: CementShape) => {
-      if (this.renderType === RENDERER_TYPE.CANVAS) {
+      if (this.renderType() === RENDERER_TYPE.CANVAS) {
         this.drawBigTexturedPolygon(cementShape.leftPolygon, texture);
         this.drawBigTexturedPolygon(cementShape.rightPolygon, texture);
       } else {

src/layers/HoleSizeLayer.ts

@@ -62,7 +62,7 @@ export class HoleSizeLayer extends WellboreBaseComponentLayer {
     }
 
     const polygonCoords = makeTubularPolygon(leftPath, rightPath);
-    if (this.renderType === RENDERER_TYPE.CANVAS) {
+    if (this.renderType() === RENDERER_TYPE.CANVAS) {
       this.drawBigPolygon(polygonCoords, firstColor);
     } else {
       this.drawRope(

src/layers/base/PixiLayer.ts

@@ -41,6 +41,8 @@ export abstract class PixiLayer extends Layer {
   onUnmount(event?: OnUnmountEvent): void {
     super.onUnmount(event);
 
+    // Get renderType and clContext before we destroy the renderer
+    const renderType = this.renderType();
     const glContext = this.ctx.renderer?.gl;
 
     this.ctx.stop();
@@ -52,7 +54,7 @@ export abstract class PixiLayer extends Layer {
      *
      * Cleaning up our self since it still seems to work and fix issue with lingering contexts
      */
-    if (this.renderType === RENDERER_TYPE.WEBGL) {
+    if (renderType === RENDERER_TYPE.WEBGL) {
       glContext?.getExtension('WEBGL_lose_context')?.loseContext();
     }
 
@@ -114,7 +116,7 @@ export abstract class PixiLayer extends Layer {
     }
   }
 
-  get renderType(): RENDERER_TYPE {
+  renderType(): RENDERER_TYPE {
     return this.ctx.renderer.type;
   }
 }