Geographics placements working again.

lib/pixi/maps/mapapp.js

@@ -1,11 +1,12 @@
 import PIXIApp from '../app.js'
 import { CoordinateDisplay } from '../../../../js/display.js'
 import { DOMLayer, PIXILayer } from '../../../../src/layers/js/layer.js'
-import { MapLayer, MapList } from './geolayer.js'
+import { MapLayer } from './geolayer.js'
 import { RigidScatterContainer } from './scatter.js'
 import { EventHandler } from './utils.js'
 import { Points } from '../../utils.js'
 import Logging from '../../logging.js'
+import { MapList } from './maplist.js'
 
 /**
  * MapApp is responsible for showing fullscreen
@@ -21,7 +22,8 @@ export default class MapApp extends PIXIApp {
             {
                 debug: false,
                 maps: {}, //required
-                view: null,
+                view: null, //required
+                wrapper: null, // Required if you want to use DOM Overlays.
                 startmap: null,
                 coordsLogging: false,
                 overlays: {},
@@ -49,6 +51,7 @@ export default class MapApp extends PIXIApp {
         this.overlays = opts.overlays
         this.focus = opts.focus
         this.zoom = opts.zoom
+        this.wrapper = opts.wrapper
 
         this.onMapChanged = new EventHandler('mapChanged', {
             listeners: opts.onMapChanged
@@ -114,25 +117,16 @@ export default class MapApp extends PIXIApp {
             container: this.scene
         })
 
-        this.domLayer = new DOMLayer({
-            name: 'DOM Root',
-            container: document.body
-        })
-
         this._setupMapLayer()
-        this.pixiLayer.place(this.mapContainer)
 
-        this.pixiUiLayer = new PIXILayer({ name: 'Pixi UI' })
-        this.pixiLayer.placeLayer(this.pixiUiLayer)
+        this.ui = new PIXI.Container()
+        this.scene.addChild(this.ui)
 
-        this.domUiLayer = new DOMLayer({ name: 'DOM UI' })
-        this.domLayer.placeLayer(this.domUiLayer)
-
-        if (this.fpsLogging && fpsDisplay) this.pixiUiLayer.place(fpsDisplay)
+        if (this.fpsLogging && fpsDisplay) this.ui.addChild(fpsDisplay)
 
         if (this.coordsLogging) {
             this.coordsDisplay = new CoordinateDisplay(this)
-            this.pixiUiLayer.place(this.coordsDisplay)
+            this.ui.addChild(this.coordsDisplay)
         }
 
         this.__dragging = false
@@ -150,6 +144,29 @@ export default class MapApp extends PIXIApp {
         return this
     }
 
+    /**
+     * You can add Dom elements directly to the app's DomLayer by calling
+     * appendChild(). The elements will be forced to use an absolute positioning.
+     * This shall prevent unwanted sideeffects with the app.
+     *
+     * @param {HTMLElement} element - Element to add to DOMRoot.
+     * @memberof MapApp
+     */
+    appendChild(element) {
+        if (!this.wrapper)
+            console.error(
+                `When using DOMElements on ${this.constructor.name} you must specify a wrapper in the constructor.`
+            )
+        if (!(element instanceof HTMLElement))
+            console.error(
+                'You can only append HTMLElements to DOM. If you want to add PIXI elements to the scene call app.scene.addChild(element).'
+            )
+        else {
+            Object.assign(element.style, { position: 'absolute' })
+            this.wrapper.appendChild(element)
+        }
+    }
+
     layout(width, height) {
         this.scene.resize(width, height)
         this.mapLayer.mapview.update()
@@ -167,8 +184,9 @@ export default class MapApp extends PIXIApp {
     }
 
     selectMap(key) {
-        this.mapList.select(key)
-        if (this.mapLayer) {
+        let result = this.mapList.select(key)
+        console.log('Select map', key, result)
+        if (result && this.mapLayer) {
             this.mapLayer.changeMap(this.mapList.map)
         }
     }
@@ -225,6 +243,13 @@ export default class MapApp extends PIXIApp {
 
         this.transformed()
         this.onMapChanged.call(this, this.map)
+
+        if (this.ui && this.ui.parent) {
+            const parent = this.ui.parent
+            parent.removeChild(this.ui)
+            parent.addChild(this.ui)
+            console.log('BRING TO FRONT!')
+        }
     }
 
     _doesOverlayElementExist(layer, type, name) {