Removing layer dependency from geolayers and refactoring maps.

lib/pixi/maps/mapapp.js

@@ -1,7 +1,7 @@
 import PIXIApp from '../app.js'
 import { CoordinateDisplay } from '../../../../js/display.js'
 import { DOMLayer, PIXILayer } from '../../../../src/layers/js/layer.js'
-import { MapLayer } from './geolayer.js'
+import { MapLayer, MapList } from './geolayer.js'
 import { RigidScatterContainer } from './scatter.js'
 import { EventHandler } from './utils.js'
 import { Points } from '../../utils.js'
@@ -39,7 +39,6 @@ export default class MapApp extends PIXIApp {
                 alpha: 0.5
             }
         )
-
         this.submaps = []
         this.overlayElements = new Map()
         this.debug = opts.debug
@@ -47,9 +46,7 @@ export default class MapApp extends PIXIApp {
         this.showHotkeys = opts.showHotkeys
         this.keycodes = this._extractKeyCodes(opts.keycodes)
         this.coordsLogging = opts.coordsLogging
-        this.startmap = opts.startmap
         this.overlays = opts.overlays
-        this.maps = opts.maps
         this.focus = opts.focus
         this.zoom = opts.zoom
 
@@ -83,9 +80,24 @@ export default class MapApp extends PIXIApp {
             this.drawMode = this.DRAW_MODES.PIXI_POINT
             this.drawData = []
         }
-        this._setupKeyboardUtils()
 
-        Logging.log('Application start')
+        this.mapList = new MapList(opts.startmap ? opts.startmap : null, opts.maps ? opts.maps : {})
+        console.log(this.mapList)
+
+        this._setupKeyboardUtils()
+    }
+
+    _setupMapLayer() {
+        this.mapContainer = new PIXI.Container()
+        this.mapLayer = new MapLayer(this.scene, this.mapContainer, {
+            name: 'Map Layer',
+            focus: this.focus,
+            zoom: this.zoom
+        })
+
+        this.mapLayer.changeHandler.add(this._mapChanged.bind(this))
+
+        if (this.mapList.map) this.mapLayer.changeMap(this.mapList.map)
     }
 
     setup() {
@@ -107,26 +119,8 @@ export default class MapApp extends PIXIApp {
             container: document.body
         })
 
-        if (!this.startmap) {
-            let firstMap = Object.keys(this.maps)[0]
-            if (firstMap != null) this.startmap = firstMap
-            else {
-                console.error('No map was set. Set a map first, before running the setup command!')
-                return
-            }
-        }
-
-        //console.log('startup', this.startmap, this.maps)
-
-        this.mapLayer = new MapLayer(this.startmap, this.maps, this.scene, {
-            name: 'Map Layer',
-            focus: this.focus,
-            zoom: this.zoom
-        })
-
-        this.mapLayer.changeHandler.add(this._mapChanged.bind(this))
-        this.pixiLayer.place(this.mapLayer)
-        this._mapChanged(null)
+        this._setupMapLayer()
+        this.pixiLayer.place(this.mapContainer)
 
         this.pixiUiLayer = new PIXILayer({ name: 'Pixi UI' })
         this.pixiLayer.placeLayer(this.pixiUiLayer)
@@ -172,27 +166,36 @@ export default class MapApp extends PIXIApp {
         })
     }
 
-    addMaps(maps) {
-        for (let key in maps) {
-            this.addMap(key, maps[key])
-        }
-    }
-
     selectMap(key) {
-        if (this.maps[key]) {
-            if (this.mapLayer) this.mapLayer.changeMap(key)
-        } else {
-            console.error(`Selected map ("${key}") was not (yet) added to the mapapp.`)
+        this.mapList.select(key)
+        if (this.mapLayer) {
+            this.mapLayer.changeMap(this.mapList.map)
         }
     }
 
+    /**
+     * Adds and sets a map to the mapapp.
+     *
+     * @param {string} key - Name of the map.
+     * @param {GeoMap} map - Map to add.
+     * @memberof MapApp
+     */
     setMap(key, map) {
         this.addMap(key, map)
         this.selectMap(key)
     }
 
     addMap(key, map) {
-        this.maps[key] = map
+        if (this.mapLayer != null) this.mapLayer.mapList.add(key, map)
+        if (this.mapList) this.mapList.add(key, map)
+        //This is necessary as there is a state, when the mapList
+        else console.error('Cannot access mapLayer. It was not initialized yet.')
+    }
+
+    addMaps(mapObject) {
+        for (let [key, val] of Object.entries(mapObject)) {
+            this.addMap(key, val)
+        }
     }
 
     transformed(event) {
@@ -210,14 +213,16 @@ export default class MapApp extends PIXIApp {
          * Here we guarantee, that the layer order is as it
          * is defined in the layers.
          */
-        this.pixiLayer.layers.forEach(layer => {
-            if (layer !== this.mapLayer) {
-                layer.parent.container.removeChild(layer.container)
-                layer.parent.container.addChild(layer.container)
-            }
-        })
+        // this.pixiLayer.layers.forEach(layer => {
+        //     if (layer !== this.mapLayer) {
+        //         layer.parent.container.removeChild(layer.container)
+        //         layer.parent.container.addChild(layer.container)
+        //     }
+        // })
 
+        console.log(this.map)
         this.map.onTransform.add(this.transformed.bind(this))
+
         this.transformed()
         this.onMapChanged.call(this, this.map)
     }
@@ -295,7 +300,7 @@ export default class MapApp extends PIXIApp {
     }
 
     get map() {
-        return this.mapLayer.map
+        return this.mapList.map
     }
 
     get activeMapKey() {