Fix memory leaks when removing layers

src/data/PointsReader.ts

@@ -57,6 +57,14 @@ export abstract class PointsReader<T_SRC, T_TGT> {
         configureVAO(this.sourceVAO, this.sourceVBO, types, typesInfo);
     }
 
+    public destroy(): void {
+        this.dataView = null;
+        this.dataBuffer = null;
+        if (this.dataDrawCall) {
+            this.dataDrawCall = null;
+        }
+    }
+
     protected initializeTargetBuffers(context: App, dataLength: number): void {
         const targetTypes = this.getGLTargetTypes();
         const stride = glDataTypesInfo(targetTypes).stride;

src/grafer/GraferController.ts

@@ -277,6 +277,9 @@ export class GraferController extends EventEmitter {
     public removeLayerByIndex(index: number): void {
         const {layers} = this._viewport.graph;
         if (index >= 0 && index < layers.length) {
+            if (layers[index]) {
+                layers[index].destroy();
+            }
             layers.splice(index, 1);
         }
     }

src/graph/Layer.ts

@@ -140,6 +140,18 @@ export class Layer extends EventEmitter implements GraphRenderable {
         }
     }
 
+    public destroy(): void {
+        if (this._nodes) {
+            this._nodes.destroy();
+        }
+        if (this._edges) {
+            this._edges.destroy();
+        }
+        if (this._labels) {
+            this._labels.destroy();
+        }
+    }
+
     public render(context: App, mode: RenderMode, uniforms: RenderUniforms | RenderUniforms[], index: number = 0): void {
         const offset = index * -3;
 

src/graph/LayerRenderable.ts

@@ -130,5 +130,4 @@ export abstract class LayerRenderable<T_SRC, T_TGT> extends PointsReaderEmitter<
         }
     }
 
-    public abstract destroy(): void;
 }

src/graph/edges/Edges.ts

@@ -96,4 +96,10 @@ export abstract class Edges<T_SRC extends BasicEdgeData, T_TGT> extends LayerRen
             this.idArray.push(entry.id);
         };
     }
+
+    public destroy(): void {
+        if (this.idArray) {
+            this.idArray = null;
+        }
+    }
 }

src/graph/edges/straight/Straight.ts

@@ -81,7 +81,9 @@ export class Straight extends Edges<BasicEdgeData, GLStraightEdgeTypes> {
     }
 
     public destroy(): void {
-        // TODO: Implement destroy method
+        this.pickingManager.off(PickingManager.events.hoverOn, this.pickingHandler);
+        this.pickingManager.off(PickingManager.events.hoverOff, this.pickingHandler);
+        this.pickingManager.off(PickingManager.events.click, this.pickingHandler);
     }
 
     public render(context:App, mode: RenderMode, uniforms: RenderUniforms): void {

src/graph/labels/point/PointLabel.ts

@@ -70,6 +70,7 @@ export class PointLabel extends Nodes<LabelNodeData, GLLabelNodeTypes> {
     protected labelAtlas: LabelAtlas;
 
     protected _labelPlacement: unknown = PointLabelPlacement.CENTER;
+    private _pixelRatio: PixelRatioObserver;
 
     public get labelPlacement(): PointLabelPlacement | unknown {
         return this._labelPlacement;
@@ -157,7 +158,7 @@ export class PointLabel extends Nodes<LabelNodeData, GLLabelNodeTypes> {
             this.labelAtlas = labelAtlas;
         } else {
             this.labelAtlas = new LabelAtlas(context, data, mappings as Partial<DataMappings<LabelData>>, font, bold, charSpacing);
-            new PixelRatioObserver(() => {
+            this._pixelRatio = new PixelRatioObserver(() => {
                 this.labelAtlas = new LabelAtlas(context, data, mappings as Partial<DataMappings<LabelData>>, font, bold, charSpacing);
                 super.initialize(context, points, data, mappings, pickingManager);
 
@@ -221,7 +222,20 @@ export class PointLabel extends Nodes<LabelNodeData, GLLabelNodeTypes> {
     }
 
     public destroy(): void {
-        //
+        super.destroy();
+        this.pickingManager.off(PickingManager.events.hoverOn, this.pickingHandler);
+        this.pickingManager.off(PickingManager.events.hoverOff, this.pickingHandler);
+        this.pickingManager.off(PickingManager.events.click, this.pickingHandler);
+
+        if (this._pixelRatio) {
+            this._pixelRatio.disconnect();
+        }
+        this.labelAtlas = null;
+        this._pixelRatio = null;
+        this.pickingColors = null;
+        this.pickingHandler = null;
+        this.drawCall = null;
+        this.pickingDrawCall = null;
     }
 
     public render(context: App, mode: RenderMode, uniforms: RenderUniforms): void {

src/graph/nodes/Nodes.ts

@@ -65,6 +65,17 @@ export abstract class Nodes<T_SRC extends BasicNodeData, T_TGT> extends LayerRen
         });
     }
 
+    public destroy(): void {
+        if (this.map) {
+            this.map.clear();
+            this.map = null;
+        }
+
+        if (this.idArray) {
+            this.idArray = null;
+        }
+    }
+
     protected computeMappings(mappings: Partial<DataMappings<T_SRC>>): DataMappings<T_SRC> {
         const nodesMappings = Object.assign({}, kBasicNodeMappings, mappings);
 

src/graph/nodes/circle/Circle.ts

@@ -100,7 +100,12 @@ export class Circle extends Nodes<BasicNodeData, GLCircleNodeTypes> {
     }
 
     public destroy(): void {
-        // TODO: Implement destroy method
+        this.pickingManager.off(PickingManager.events.hoverOn, this.pickingHandler);
+        this.pickingManager.off(PickingManager.events.hoverOff, this.pickingHandler);
+        this.pickingManager.off(PickingManager.events.click, this.pickingHandler);
+
+        this.pickingHandler = null;
+        this.pickingColors = null;
     }
 
     public render(context:App, mode: RenderMode, uniforms: RenderUniforms): void {

src/renderer/PixelRatioObserver.ts

@@ -25,10 +25,11 @@ export class PixelRatioObserver {
             this.devicePixelRatio = pixelRatio;
             callback(pixelRatio);
         };
-        subscriberSet.add(callback);
+        subscriberSet.add(this.callback);
     }
 
     public disconnect(): void {
         subscriberSet.delete(this.callback);
+        this.callback = null;
     }
-}
+}