IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Geographics placements working again.

Browse Source
This commit is contained in:
Severin Opel
2019-11-05 11:07:36 +01:00
parent ff0606d0a7
commit 87727d28b9
8 changed files with 297 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pixi/bundle.js
+4 -2
View File
@@ -93,10 +93,9 @@ window.RigidContainer = RigidContainer
window.CompactScatter = CompactScatter
window.CoverScatter = CoverScatter
import { GeoLayer, MapLayer, MapList } from './maps/geolayer.js'
import { GeoLayer, MapLayer } from './maps/geolayer.js'
window.GeoLayer = GeoLayer
window.MapLayer = MapLayer
window.MapList = MapList
import { GeoGraphics, GeoPoint, GeoLine, GeoShape, GeoMultiShape } from './maps/geographics.js'
@@ -109,3 +108,6 @@ window.GeoMultiShape = GeoMultiShape
import Overlay from './maps/overlay.js'
window.Overlay = Overlay
import { MapList } from './maps/maplist.js'
window.MapList = MapList
lib/pixi/maps/geographics.html
+3 -4
View File
@@ -88,9 +88,8 @@
function enableSwitch(button, app) {
button.addEventListener("click", () => {
let next = (app.activeMapKey == "osm") ? "wiki" : "osm"
console.log("CLICKED")
let next = app.mapList.next()
console.log(app.mapList)
app.selectMap(next)
})
}
@@ -292,4 +291,4 @@
</section>-->
</body>
</html>
</html>
lib/pixi/maps/geolayer.js
+33 -88
View File
@@ -21,20 +21,20 @@ export class GeoLayer {
)
return null
} else {
this.geographics = []
displayObject.map = this
this.displayObject = displayObject
this.layers = []
this.geographics = []
let pixiAddChild = displayObject.addChild.bind(displayObject)
this.pixiAddChild = displayObject.addChild.bind(displayObject)
displayObject.addChild = (...elements) => {
elements.forEach(element => {
if (element instanceof GeoGraphics) {
this.geographics.push(element)
pixiAddChild(element.graphics)
this.pixiAddChild(element.graphics)
} else {
pixiAddChild(element)
this.pixiAddChild(element)
}
})
}
@@ -112,59 +112,6 @@ export class GeoLayer {
// }
}
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.`)
}
}
return map
}
add(key, map) {
if (this.maps[key] != null) consol.warn('Key already in mapList. The existing key was overwritten.')
this.maps[key] = map
}
get map() {
console.log(this.maps, this.active)
return this.maps[this.active]
}
}
export class MapLayer extends GeoLayer {
constructor(
scatterContainer,
@@ -249,27 +196,6 @@ export class MapLayer extends GeoLayer {
// }
// }
placeMap(map) {
if (map instanceof GeoMap) {
this.scatterContainer.addChild(map.image)
this.map.onTransform.add(this.transformed.bind(this))
this.mapview.update(this.map)
this.adapt()
} else {
console.error("Could not set map, it's not of type GeoMap.", map)
}
}
placeElement(elem) {
if (elem instanceof PIXI.DisplayObject) {
this.map.image.addChild(elem)
this.elements.push(elem)
} else {
console.error('Element need to be of type PIXI.DisplayObject.', elem)
}
}
transformed(e) {
this.mapview.transformed(this.map)
this.transformHandler.call(this)
@@ -294,18 +220,39 @@ export class MapLayer extends GeoLayer {
return mapLayerClone
}
/**
* Changes the map to the specified one, keeping the position and the zoom of the old map.
*
* @public
* @param {GeoMap} map
* @memberof MapLayer
*/
changeMap(
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.
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.*/
) {
let oldMap = map
this._map = map
if (map instanceof GeoMap) {
let oldMap = this.map
if (oldMap) oldMap.unload()
if (oldMap) oldMap.unload()
map.load()
this._map = map
this.changeHandler.call(this, map, oldMap)
this.placeMap(map)
this.map.load()
this.scatterContainer.addChild(this.map.image)
map.image.addChild(this.displayObject)
this.mapview.update(this.map)
// A geolayer's displayObject is on the parent layer.
// A maplayer's displayobject is always the child of the map.
this.adapt()
this.changeHandler.call(this, map, oldMap)
this.map.onTransform.add(this.transformed.bind(this))
} else {
console.error("Could not set map, it's not of type GeoMap.", map)
}
/*Logging.log(`Map change: ${key}`)
@@ -372,8 +319,6 @@ export class MapLayer extends GeoLayer {
get mapLayer() {
return this
}
}
MapLayer.idx = 0
lib/pixi/maps/map.js
+7 -3
View File
@@ -130,8 +130,13 @@ export class GeoMap {
}
unload() {
console.log('unload', this, this.image)
if (this.image) {
if (this.image.parent) this.image.parent.removeChild(this.image)
console.log('removeScatter')
if (this.image.parent) {
console.log('Remove from parent')
this.image.parent.removeChild(this.image)
}
this.image.scatter = null
}
}
@@ -143,6 +148,7 @@ export class GeoMap {
* @param {ScatterEvent}[e] - Contains informations on how the element was transformed.
*/
transformed(e) {
console.log(this.name)
this.onTransform.call(this, e)
}
@@ -496,8 +502,6 @@ export class GeoMap {
return null
}
}
}
GeoMap.counter = 0
lib/pixi/maps/mapapp.js
+42 -17
View File
@@ -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) {
lib/pixi/maps/maplist.js
+62
View File
@@ -0,0 +1,62 @@
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.`)
}
}
return map
}
add(key, map) {
if (this.maps[key] != null) consol.warn('Key already in mapList. The existing key was overwritten.')
map.name = key
this.maps[key] = map
}
get map() {
console.log(this.maps, this.active)
return this.maps[this.active]
}
next() {
let keys = Object.keys(this.maps)
let idx = keys.indexOf(this.active)
let next = idx + 1 < key.length ? keys[idx + 1] : keys[0]
console.log(keys, idx, next)
return next
}
}
lib/pixi/maps/mapview.js
+1
View File
@@ -32,6 +32,7 @@ export default class MapView {
}
transformed(map) {
console.log('MAPVIEW RECEIVED TRANSFORM')
this.updateZoom(map)
this.updateFocusPoint(map)
}