Removing layer dependency from geolayers and refactoring maps.
This commit is contained in:
+159
-82
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user