Merge develop

UI/Base/Combine.ts

@@ -1,7 +1,6 @@
 import {FixedUiElement} from "./FixedUiElement";
 import {Utils} from "../../Utils";
 import BaseUIElement from "../BaseUIElement";
-import Title from "./Title";
 
 export default class Combine extends BaseUIElement {
     private readonly uiElements: BaseUIElement[];
@@ -21,6 +20,13 @@ export default class Combine extends BaseUIElement {
         return this.uiElements.map(el => el.AsMarkdown()).join(this.HasClass("flex-col") ? "\n\n" : " ");
     }
 
+    Destroy() {
+        super.Destroy();
+        for (const uiElement of this.uiElements) {
+            uiElement.Destroy()
+        }
+    }
+
     protected InnerConstructElement(): HTMLElement {
         const el = document.createElement("span")
         try {

UI/Base/MinimapImplementation.ts

@@ -48,7 +48,7 @@ export default class MinimapImplementation extends BaseUIElement implements Mini
     public static initialize() {
         Minimap.createMiniMap = options => new MinimapImplementation(options)
     }
-
+    
     public installBounds(factor: number | BBox, showRange?: boolean) {
         this.leafletMap.addCallbackD(leaflet => {
             let bounds;
@@ -105,6 +105,15 @@ export default class MinimapImplementation extends BaseUIElement implements Mini
             }
         })
     }
+    
+    Destroy() {
+        super.Destroy();
+        console.warn("Decomissioning minimap", this._id)
+        const mp = this.leafletMap.data
+        this.leafletMap.setData(null)
+        mp.off()
+        mp.remove()
+    }
 
     public async TakeScreenshot() {
         const screenshotter = new SimpleMapScreenshoter();
@@ -125,6 +134,13 @@ export default class MinimapImplementation extends BaseUIElement implements Mini
         const self = this;
         // @ts-ignore
         const resizeObserver = new ResizeObserver(_ => {
+            if(wrapper.clientHeight === 0 || wrapper.clientWidth === 0){
+                return;
+            }
+            if(wrapper.offsetParent === null || window.getComputedStyle(wrapper).display === 'none'){
+                // Not visible
+                return;
+            }
             try {
                 self.InitMap();
                 self.leafletMap?.data?.invalidateSize()

UI/Base/ScrollableFullScreen.ts

@@ -49,24 +49,26 @@ export default class ScrollableFullScreen extends UIElement {
                 Hash.hash.setData(hashToShow)
                 self.Activate();
             } else {
-                self.clear();
+                // Some cleanup...
+                ScrollableFullScreen.empty.AttachTo("fullscreen")
+                const fs = document.getElementById("fullscreen");
+                ScrollableFullScreen._currentlyOpen?.isShown?.setData(false);
+                fs.classList.add("hidden")
             }
         })
 
-        Hash.hash.addCallback(hash => {
-            if (!isShown.data) {
-                return;
-            }
-            if (hash === undefined || hash === "" || hash !== hashToShow) {
-                isShown.setData(false)
-            }
-        })
     }
 
     InnerRender(): BaseUIElement {
         return this._component;
     }
 
+    Destroy() {
+        super.Destroy();
+        this._component.Destroy()
+        this._fullscreencomponent.Destroy()
+    }
+
     Activate(): void {
         this.isShown.setData(true)
         this._fullscreencomponent.AttachTo("fullscreen");
@@ -74,14 +76,6 @@ export default class ScrollableFullScreen extends UIElement {
         ScrollableFullScreen._currentlyOpen = this;
         fs.classList.remove("hidden")
     }
-
-    private clear() {
-        ScrollableFullScreen.empty.AttachTo("fullscreen")
-        const fs = document.getElementById("fullscreen");
-        ScrollableFullScreen._currentlyOpen?.isShown?.setData(false);
-        fs.classList.add("hidden")
-    }
-
     private BuildComponent(title: BaseUIElement, content: BaseUIElement, isShown: UIEventSource<boolean>) {
         const returnToTheMap =
             new Combine([
@@ -93,6 +87,7 @@ export default class ScrollableFullScreen extends UIElement {
 
         returnToTheMap.onClick(() => {
             isShown.setData(false)
+            Hash.hash.setData(undefined)
         })
 
         title.SetClass("block text-l sm:text-xl md:text-2xl w-full font-bold p-0 max-h-20vh overflow-y-auto")

UI/Base/VariableUIElement.ts

@@ -8,10 +8,19 @@ export class VariableUiElement extends BaseUIElement {
         super();
         this._contents = contents;
     }
+    
+    Destroy() {
+        super.Destroy();
+        this.isDestroyed = true;
+    }
 
     protected InnerConstructElement(): HTMLElement {
         const el = document.createElement("span");
+        const self = this;
         this._contents.addCallbackAndRun((contents) => {
+            if(self.isDestroyed){
+                return true;
+            }
             while (el.firstChild) {
                 el.removeChild(el.lastChild);
             }