From aeaeaafae928186db4ad4cf3fac86688dadf8e4d Mon Sep 17 00:00:00 2001
From: Benoit Simard <contact@bsimard.com>
Date: Tue, 19 Nov 2024 16:55:23 +0100
Subject: [PATCH] [sigma,layer-leaflet/maplibre] using `killLayer` to properly
 remove map container

Change the `killLayer` to allow removing none canvas/webgl layers which
can be created by `createLayer`.

Using it in map layer in the clean function.
---
 packages/layer-leaflet/src/index.ts  |  6 ++++--
 packages/layer-maplibre/src/index.ts |  6 ++++--
 packages/sigma/src/sigma.ts          | 12 ++++++------
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/layer-leaflet/src/index.ts b/packages/layer-leaflet/src/index.ts
index ff23aaf47..ca66194b9 100644
--- a/packages/layer-leaflet/src/index.ts
+++ b/packages/layer-leaflet/src/index.ts
@@ -26,7 +26,8 @@ export default function bindLeafletLayer(
   const prevSigmaSettings = sigma.getSettings();
 
   // Creating map container
-  const mapContainer = sigma.createLayer("layer-leaflet", "div", {
+  const mapLayerName = "layer-leaflet";
+  const mapContainer = sigma.createLayer(mapLayerName, "div", {
     style: { position: "absolute", inset: "0", zIndex: "0" },
     // 'edges' is the first sigma layer
     beforeLayer: "edges",
@@ -118,7 +119,8 @@ export default function bindLeafletLayer(
       isKilled = true;
 
       map.remove();
-      mapContainer.remove();
+
+      sigma.killLayer(mapLayerName);
 
       sigma.off("afterRender", fnSyncMapWithSigma);
       sigma.off("resize", fnOnResize);
diff --git a/packages/layer-maplibre/src/index.ts b/packages/layer-maplibre/src/index.ts
index cdaf05088..076237536 100644
--- a/packages/layer-maplibre/src/index.ts
+++ b/packages/layer-maplibre/src/index.ts
@@ -24,7 +24,8 @@ export default function bindMaplibreLayer(
   const prevSigmaSettings = sigma.getSettings();
 
   // Creating map container
-  const mapContainer = sigma.createLayer("layer-leaflet", "div", {
+  const mapLayerName = "layer-maplibre";
+  const mapContainer = sigma.createLayer(mapLayerName, "div", {
     style: { position: "absolute", inset: "0" },
     // 'edges' is the first sigma layer
     beforeLayer: "edges",
@@ -100,7 +101,8 @@ export default function bindMaplibreLayer(
 
       map.off("moveend", fnSyncSigmaWithMap);
       map.remove();
-      mapContainer.remove();
+
+      sigma.killLayer(mapLayerName);
 
       sigma.off("afterRender", fnSyncMapWithSigma);
       sigma.off("resize", fnOnResize);
diff --git a/packages/sigma/src/sigma.ts b/packages/sigma/src/sigma.ts
index bd0fce6e1..10c61ed97 100644
--- a/packages/sigma/src/sigma.ts
+++ b/packages/sigma/src/sigma.ts
@@ -1645,26 +1645,26 @@ export default class Sigma<
   }
 
   /**
-   * Function used to properly kill a canvas layer.
+   * Function used to properly kill a layer.
    *
    * @param  {string} id - Layer id.
    * @return {Sigma}
    */
   killLayer(id: string): this {
-    const canvas = this.elements[id];
+    const element = this.elements[id];
 
-    if (!canvas) throw new Error(`Sigma: cannot kill layer ${id}, which does not exist`);
+    if (!element) throw new Error(`Sigma: cannot kill layer ${id}, which does not exist`);
 
     if (this.webGLContexts[id]) {
       const gl = this.webGLContexts[id];
       gl.getExtension("WEBGL_lose_context")?.loseContext();
       delete this.webGLContexts[id];
-    } else {
+    } else if (this.canvasContexts[id]) {
       delete this.canvasContexts[id];
     }
 
-    // Delete canvas:
-    canvas.remove();
+    // Delete layer element
+    element.remove();
     delete this.elements[id];
 
     return this;