Removing layer dependency from geolayers and refactoring maps.

This commit is contained in:
2019-11-04 18:20:32 +01:00
parent 938b3e2f3c
commit ff0606d0a7
12 changed files with 1519 additions and 1340 deletions
+159 -82
View File
@@ -4,6 +4,7 @@ import { EventHandler } from './utils.js'
import { PIXILayer } from '../../../../src/layers/js/layer.js'
import Logging from '../../logging.js'
import { GeoGraphics } from './geographics.js'
//import { GeoGraphics } from "../pixi/geographics.js"
/**
@@ -11,18 +12,33 @@ import Logging from '../../logging.js'
* GeoGraphics. The layer can be adapted to a map and notifies all Geo-Children
* of the Adaption.
*/
export class GeoLayer extends PIXILayer {
constructor(opts = {}) {
super(opts)
export class GeoLayer {
constructor(displayObject) {
if (displayObject == null || !(displayObject instanceof PIXI.DisplayObject)) {
console.error(
`You need to provide a displayObject to make a ${this.constructor.name} out of it.`,
displayObject
)
return null
} else {
displayObject.map = this
this.displayObject = displayObject
/**
* When setting the map and mapLayer with the options paramter.
* The GeoLayer becomes a RootLayer, when the root layer should not be a MapLayer.
*/
if (opts.map) this._map = opts.map
if (opts.map) this._mapLayer = opts.mapLayer
this.layers = []
this.geographics = []
this.geographics = []
let pixiAddChild = displayObject.addChild.bind(displayObject)
displayObject.addChild = (...elements) => {
elements.forEach(element => {
if (element instanceof GeoGraphics) {
this.geographics.push(element)
pixiAddChild(element.graphics)
} else {
pixiAddChild(element)
}
})
}
}
}
/**
@@ -43,18 +59,19 @@ export class GeoLayer extends PIXILayer {
} else console.error('There was no map specified.', this)
}
place(geographic) {
if (geographic.constructor.name.startsWith('Geo') && geographic.graphics) {
// Fix to remove the rollupjs circular dependency
//if (geographic instanceof GeoGraphics) {
this.geographics.push(geographic)
super.place(geographic.graphics)
} else super.place(geographic)
}
// place(geographic) {
// if (geographic.constructor.name.startsWith('Geo') && geographic.graphics) {
// // Fix to remove the rollupjs circular dependency
// //if (geographic instanceof GeoGraphics) {
// this.geographics.push(geographic)
// super.place(geographic.graphics)
// } else super.place(geographic)
// }
placeLayer(layer) {
addLayer(layer) {
if (layer instanceof GeoLayer || layer instanceof MapLayer) {
super.placeLayer(layer)
this.layers.push(layer)
this.displayObject.addChild(layer.displayObject)
if (this.map) layer.geographics.forEach(geographics => geographics.adaptTo(this.map))
} else
console.error('Could not place layer. Only MapLayer and GeoLayers can be child layers of GeoLayers.', layer)
@@ -63,74 +80,126 @@ export class GeoLayer extends PIXILayer {
//GeoLayers have to be children of a map layer,
// therefore we can recursively get the map.
get map() {
return this._map ? this._map : this.parent.map
return this._mapLayer.map
}
get mapLayer() {
return this._mapLayer ? this._mapLayer : this.parent.mapLayer
}
clone(mapLayerClone) {
const opts = {
mapLayer: mapLayerClone,
map: mapLayerClone.map
// clone(mapLayerClone) {
// const opts = {
// mapLayer: mapLayerClone,
// map: mapLayerClone.map
// }
// let geoLayerClone = new GeoLayer(opts)
// this.layers.forEach(layer => {
// let layerClone = layer.clone(opts)
// if (layerClone) {
// geoLayerClone.placeLayer(layerClone)
// }
// })
// this.geographics.forEach(geographics => {
// let clone = geographics.clone()
// if (clone) {
// geoLayerClone.place(clone)
// }
// })
// return geoLayerClone
// }
}
export class MapList {
constructor(active, maps) {
this.maps = maps
this.active = active
if (Object.keys(maps).length > 0) this.select(active)
}
/**
* Selects a map from the map list.
*
* @param {string} active - Name of the map to select.
* @returns
* @memberof MapList
*/
select(active) {
let map = null
if (active !== this.active) {
let keys = Object.keys(this.maps)
if (keys.length > 0) {
if (this.maps[active] == null) {
let altActive = keys[0]
console.warn(
`The MapList does not contain the provided active key '${active}'. Used '${altActive}' as fallback.`
)
active = altActive
}
if (this.active !== active) {
this.active = active
map = this.maps[active]
}
} else {
console.error(`Could not provide a fallback map! The map object is empty.`)
}
}
let geoLayerClone = new GeoLayer(opts)
this.layers.forEach(layer => {
let layerClone = layer.clone(opts)
if (layerClone) {
geoLayerClone.placeLayer(layerClone)
}
})
return map
}
this.geographics.forEach(geographics => {
let clone = geographics.clone()
if (clone) {
geoLayerClone.place(clone)
}
})
add(key, map) {
if (this.maps[key] != null) consol.warn('Key already in mapList. The existing key was overwritten.')
this.maps[key] = map
}
return geoLayerClone
get map() {
console.log(this.maps, this.active)
return this.maps[this.active]
}
}
/**
* TODO: It may be a good idea to inherit maplayer from geo layer.
*/
export class MapLayer extends PIXILayer {
constructor(active, maps, scatterContainer, opts = {}) {
super(
Object.assign(
{
container: new PIXI.Container()
},
opts
)
)
export class MapLayer extends GeoLayer {
constructor(
scatterContainer,
displayObject,
{ onTransform = null, onChange = null, focus = null, zoom = null, viewport = null } = {}
) {
super(displayObject)
this.opts = opts
this.transformHandler = new EventHandler('onTransform', {
listeners: () => {
let onTransformListeners = [
() => {
this.labelVisibility()
}
]
if (onTransform) onTransformListeners.push(onTransform)
this.transformHandler = new EventHandler('onTransform', {
listeners: onTransformListeners
})
this.scatterContainer = scatterContainer
if (!maps[active]) console.error('No map was set!')
else opts.map = maps[active]
this.mapview = new MapView(opts)
this.changeHandler = new EventHandler('onChange', {
listeners: opts.onChange
listeners: onChange
})
//TODO Implement error handling here.
this.maps = maps
this.changeMap(active)
if (opts.map) this.placeMap(opts.map)
this.mapview = new MapView({
zoom,
focus,
viewport
})
this._map = null
// //TODO Implement error handling here.
// this.maps = maps
// if (opts.map) this.placeMap(opts.map)
this.dynamicElements = new Map()
}
@@ -173,20 +242,18 @@ export class MapLayer extends PIXILayer {
})
}
placeLayer(layer) {
super.placeLayer(layer)
if (layer instanceof GeoLayer && this.map) {
layer.adapt(this.map)
}
}
// placeLayer(layer) {
// super.placeLayer(layer)
// if (layer instanceof GeoLayer && this.map) {
// layer.adapt(this.map)
// }
// }
placeMap(map) {
if (map instanceof GeoMap) {
this.scatterContainer.addChild(map.image)
this.map.onTransform.add(this.transformed.bind(this))
this.mapview.setMap(this.map)
this.map.image.addChild(this.container)
this.mapview.update(this.map)
this.adapt()
} else {
@@ -204,7 +271,7 @@ export class MapLayer extends PIXILayer {
}
transformed(e) {
this.mapview.transformed(e)
this.mapview.transformed(this.map)
this.transformHandler.call(this)
}
@@ -228,12 +295,19 @@ export class MapLayer extends PIXILayer {
}
changeMap(
key,
{
useScatterAsContainer = true // If set to false, the normal container is used. This is necessary when using submaps and the container need to be a RigidContainer.
} = {}
map,
useScatterAsContainer = true // If set to false, the normal container is used. This is necessary when using submaps and the container need to be a RigidContainer.
) {
Logging.log(`Map change: ${key}`)
let oldMap = map
this._map = map
if (oldMap) oldMap.unload()
map.load()
this.changeHandler.call(this, map, oldMap)
this.placeMap(map)
/*Logging.log(`Map change: ${key}`)
if (this.active !== key) {
if (this.maps.hasOwnProperty(key)) {
@@ -265,9 +339,10 @@ export class MapLayer extends PIXILayer {
*
* -SO
*/
/*
if (old) old.unload()
this.changeHandler.call(this, old)
} else {
let keys = Object.keys(this.maps)
@@ -282,7 +357,7 @@ export class MapLayer extends PIXILayer {
})
}
}
}
}*/
}
get map() {
@@ -297,6 +372,8 @@ export class MapLayer extends PIXILayer {
get mapLayer() {
return this
}
}
MapLayer.idx = 0