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

Removing layer dependency from geolayers and refactoring maps.

Browse Source
This commit is contained in:
Severin Opel 2019-11-04 18:20:32 +01:00
parent 938b3e2f3c
commit ff0606d0a7
12 changed files with 1519 additions and 1340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
dist/iwmlib.js vendored
View File

@ -2540,6 +2540,25 @@
result[id] = this.getPosition(event); result[id] = this.getPosition(event);
break break
} }
// case 'TouchEvent':
// // Needs to be observed: Perhaps changedTouches are all we need. If so
// // we can remove the touchEventKey default parameter
// if (touchEventKey == 'all') {
// for(let t of event.targetTouches) {
// result[t.identifier.toString()] = this.getPosition(t)
// }
// for(let t of event.changedTouches) {
// result[t.identifier.toString()] = this.getPosition(t)
// }
// }
// else {
// for(let t of event.changedTouches) {
// result[t.identifier.toString()] = this.getPosition(t)
// }
// }
// break
default:
break
} }
return result return result
} }
@ -5635,6 +5654,8 @@
let bottom = parseFloat(this.element.style.bottom); let bottom = parseFloat(this.element.style.bottom);
this.element.style.bottom = bottom - delta.y + 'px'; this.element.style.bottom = bottom - delta.y + 'px';
break break
default:
break
} }
//console.log("onResize", this.onResize) //console.log("onResize", this.onResize)
if (this.onResize) { if (this.onResize) {
@ -6057,6 +6078,8 @@
x = bbRight; x = bbRight;
if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2; if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2;
break break
default:
break
} }
} }
@ -6112,6 +6135,8 @@
x += this.notchSize * 2; x += this.notchSize * 2;
x += this.posOffset; x += this.posOffset;
break break
default:
break
} }
this.placeOrigin(x, y); this.placeOrigin(x, y);
} }

2309
dist/iwmlib.pixi.js vendored
View File

File diff suppressed because it is too large Load Diff

6
lib/pixi/bundle.js
View File

@ -93,9 +93,10 @@ window.RigidContainer = RigidContainer
window.CompactScatter = CompactScatter window.CompactScatter = CompactScatter
window.CoverScatter = CoverScatter window.CoverScatter = CoverScatter
import { GeoLayer, MapLayer } from './maps/geolayer.js' import { GeoLayer, MapLayer, MapList } from './maps/geolayer.js'
window.GeoLayer = GeoLayer window.GeoLayer = GeoLayer
window.MapLayer = MapLayer window.MapLayer = MapLayer
window.MapList = MapList
import { GeoGraphics, GeoPoint, GeoLine, GeoShape, GeoMultiShape } from './maps/geographics.js' import { GeoGraphics, GeoPoint, GeoLine, GeoShape, GeoMultiShape } from './maps/geographics.js'
@ -105,7 +106,6 @@ window.GeoLine = GeoLine
window.GeoShape = GeoShape window.GeoShape = GeoShape
window.GeoMultiShape = GeoMultiShape window.GeoMultiShape = GeoMultiShape
import Overlay from './maps/overlay.js'
import Overlay from "./maps/overlay.js"
window.Overlay = Overlay window.Overlay = Overlay

22
lib/pixi/maps/geographics.html
View File

@ -38,6 +38,10 @@
tokio: { x: 35.696278, y: 139.731366 } tokio: { x: 35.696278, y: 139.731366 }
} }
window.apps = [
]
function createApp(view) { function createApp(view) {
let app = new MapApp({ let app = new MapApp({
view, view,
@ -52,6 +56,7 @@
const wikimedia = "../assets/maps/wikimedia-world-robinson/2000px-BlankMap-World.png" const wikimedia = "../assets/maps/wikimedia-world-robinson/2000px-BlankMap-World.png"
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
setTimeout(() => { setTimeout(() => {
reject("Creating app timed out.") reject("Creating app timed out.")
@ -69,13 +74,12 @@
cover: false cover: false
}) })
console.log(wikimediaMap)
app.addMaps({ app.addMaps({
"osm": osmMap, "wiki": wikimediaMap "osm": osmMap, "wiki": wikimediaMap
}) })
app.selectMap("osm") app.selectMap("osm")
app.setup().run() app.setup().run()
window.apps.push(app)
resolve(app) resolve(app)
}, { resolutionDependent: false }) }, { resolutionDependent: false })
@ -127,7 +131,9 @@
; (function () { ; (function () {
createApp(geopoint_canvas).then(app => { createApp(geopoint_canvas).then(app => {
let capitalLayer = new GeoLayer({ name: "Capital Overlay" })
let capitalContainer = new PIXI.Container()
let capitalLayer = new GeoLayer(capitalContainer)
for (key in capitals) { for (key in capitals) {
let capitalPoint = new GeoPoint(capitals[key], { let capitalPoint = new GeoPoint(capitals[key], {
@ -145,18 +151,20 @@
this.graphics.endFill() this.graphics.endFill()
} }
}) })
capitalLayer.place(capitalPoint) capitalContainer.addChild(capitalPoint)
} }
enableSwitch(geopoint_switch, app) enableSwitch(geopoint_switch, app)
app.mapLayer.place(capitalLayer) // app.mapLayer.place(capitalLayer)
app.mapLayer.addLayer(capitalLayer)
}).catch(console.error) }).catch(console.error)
})() })()
</script> </script>
</section> </section>
<section id="geoline"> <!-- <section id="geoline">
<h2>GeoLine</h2> <h2>GeoLine</h2>
<p>Geo line is a set of points, that are rendered as a line and can be updated individually.</p> <p>Geo line is a set of points, that are rendered as a line and can be updated individually.</p>
<canvas id="geoline_canvas"></canvas> <canvas id="geoline_canvas"></canvas>
@ -281,7 +289,7 @@
})() })()
</script> </script>
</section> </section>-->
</body> </body>
</html> </html>

38
lib/pixi/maps/geographics.js
View File

@ -1,7 +1,6 @@
import { Points } from '../../utils.js' import { Points } from '../../utils.js'
import { EventHandler } from './utils.js' import { EventHandler } from './utils.js'
import { FlagPolygon } from '../graphics/label.js' import { FlagPolygon } from '../graphics/label.js'
import { GeoLayer, MapLayer } from './geolayer.js'
import { DeepZoomMap } from './map.js' import { DeepZoomMap } from './map.js'
/** /**
@ -97,7 +96,6 @@ export class GeoGraphics {
this.draw() this.draw()
} }
/** /**
* Redraws the graphics. * Redraws the graphics.
* *
@ -127,23 +125,23 @@ export class GeoGraphics {
return this._position return this._position
} }
get map() { // get map() {
if ( // if (
this.graphics.layer && // this.graphics.layer &&
(this.graphics.layer instanceof GeoLayer || this.graphics.layer instanceof MapLayer) // (this.graphics.layer instanceof GeoLayer || this.graphics.layer instanceof MapLayer)
) { // ) {
return this.graphics.layer.map // return this.graphics.layer.map
} else return null // } else return null
} // }
get mapLayer() { // get mapLayer() {
if ( // if (
this.graphics.layer && // this.graphics.layer &&
(this.graphics.layer instanceof GeoLayer || this.graphics.layer instanceof MapLayer) // (this.graphics.layer instanceof GeoLayer || this.graphics.layer instanceof MapLayer)
) { // ) {
return this.graphics.layer.mapLayer // return this.graphics.layer.mapLayer
} else return null // } else return null
} // }
/** /**
* Prepare draw is a private function, that prepares the graphics * Prepare draw is a private function, that prepares the graphics
@ -204,8 +202,8 @@ export class GeoPoint extends GeoGraphics {
_adaptCoordinates(map) { _adaptCoordinates(map) {
let scale = 1 let scale = 1
if (this.mapLayer.map instanceof DeepZoomMap) { if (map instanceof DeepZoomMap) {
scale = this.mapLayer.map.image.scale.x scale = map.image.scale.x
} }
scale = scale / 4 scale = scale / 4

241
lib/pixi/maps/geolayer.js
View File

@ -4,6 +4,7 @@ import { EventHandler } from './utils.js'
import { PIXILayer } from '../../../../src/layers/js/layer.js' import { PIXILayer } from '../../../../src/layers/js/layer.js'
import Logging from '../../logging.js' import Logging from '../../logging.js'
import { GeoGraphics } from './geographics.js'
//import { GeoGraphics } from "../pixi/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 * GeoGraphics. The layer can be adapted to a map and notifies all Geo-Children
* of the Adaption. * of the Adaption.
*/ */
export class GeoLayer extends PIXILayer { export class GeoLayer {
constructor(opts = {}) { constructor(displayObject) {
super(opts) 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
/** this.layers = []
* When setting the map and mapLayer with the options paramter. this.geographics = []
* 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.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) } else console.error('There was no map specified.', this)
} }
place(geographic) { // place(geographic) {
if (geographic.constructor.name.startsWith('Geo') && geographic.graphics) { // if (geographic.constructor.name.startsWith('Geo') && geographic.graphics) {
// Fix to remove the rollupjs circular dependency // // Fix to remove the rollupjs circular dependency
//if (geographic instanceof GeoGraphics) { // //if (geographic instanceof GeoGraphics) {
this.geographics.push(geographic) // this.geographics.push(geographic)
super.place(geographic.graphics) // super.place(geographic.graphics)
} else super.place(geographic) // } else super.place(geographic)
} // }
placeLayer(layer) { addLayer(layer) {
if (layer instanceof GeoLayer || layer instanceof MapLayer) { 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)) if (this.map) layer.geographics.forEach(geographics => geographics.adaptTo(this.map))
} else } else
console.error('Could not place layer. Only MapLayer and GeoLayers can be child layers of GeoLayers.', layer) 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, //GeoLayers have to be children of a map layer,
// therefore we can recursively get the map. // therefore we can recursively get the map.
get map() { get map() {
return this._map ? this._map : this.parent.map return this._mapLayer.map
} }
get mapLayer() { get mapLayer() {
return this._mapLayer ? this._mapLayer : this.parent.mapLayer return this._mapLayer ? this._mapLayer : this.parent.mapLayer
} }
clone(mapLayerClone) { // clone(mapLayerClone) {
const opts = { // const opts = {
mapLayer: mapLayerClone, // mapLayer: mapLayerClone,
map: mapLayerClone.map // 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 => { return map
let layerClone = layer.clone(opts) }
if (layerClone) {
geoLayerClone.placeLayer(layerClone)
}
})
this.geographics.forEach(geographics => { add(key, map) {
let clone = geographics.clone() if (this.maps[key] != null) consol.warn('Key already in mapList. The existing key was overwritten.')
if (clone) { this.maps[key] = map
geoLayerClone.place(clone) }
}
})
return geoLayerClone get map() {
console.log(this.maps, this.active)
return this.maps[this.active]
} }
} }
/** export class MapLayer extends GeoLayer {
* TODO: It may be a good idea to inherit maplayer from geo layer. constructor(
*/ scatterContainer,
export class MapLayer extends PIXILayer { displayObject,
constructor(active, maps, scatterContainer, opts = {}) { { onTransform = null, onChange = null, focus = null, zoom = null, viewport = null } = {}
super( ) {
Object.assign( super(displayObject)
{
container: new PIXI.Container()
},
opts
)
)
this.opts = opts let onTransformListeners = [
() => {
this.transformHandler = new EventHandler('onTransform', {
listeners: () => {
this.labelVisibility() this.labelVisibility()
} }
]
if (onTransform) onTransformListeners.push(onTransform)
this.transformHandler = new EventHandler('onTransform', {
listeners: onTransformListeners
}) })
this.scatterContainer = scatterContainer 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', { this.changeHandler = new EventHandler('onChange', {
listeners: opts.onChange listeners: onChange
}) })
//TODO Implement error handling here. this.mapview = new MapView({
this.maps = maps zoom,
this.changeMap(active) focus,
if (opts.map) this.placeMap(opts.map) viewport
})
this._map = null
// //TODO Implement error handling here.
// this.maps = maps
// if (opts.map) this.placeMap(opts.map)
this.dynamicElements = new Map() this.dynamicElements = new Map()
} }
@ -173,20 +242,18 @@ export class MapLayer extends PIXILayer {
}) })
} }
placeLayer(layer) { // placeLayer(layer) {
super.placeLayer(layer) // super.placeLayer(layer)
if (layer instanceof GeoLayer && this.map) { // if (layer instanceof GeoLayer && this.map) {
layer.adapt(this.map) // layer.adapt(this.map)
} // }
} // }
placeMap(map) { placeMap(map) {
if (map instanceof GeoMap) { if (map instanceof GeoMap) {
this.scatterContainer.addChild(map.image) this.scatterContainer.addChild(map.image)
this.map.onTransform.add(this.transformed.bind(this)) this.map.onTransform.add(this.transformed.bind(this))
this.mapview.setMap(this.map) this.mapview.update(this.map)
this.map.image.addChild(this.container)
this.adapt() this.adapt()
} else { } else {
@ -204,7 +271,7 @@ export class MapLayer extends PIXILayer {
} }
transformed(e) { transformed(e) {
this.mapview.transformed(e) this.mapview.transformed(this.map)
this.transformHandler.call(this) this.transformHandler.call(this)
} }
@ -228,12 +295,19 @@ export class MapLayer extends PIXILayer {
} }
changeMap( changeMap(
key, 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.
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.active !== key) {
if (this.maps.hasOwnProperty(key)) { if (this.maps.hasOwnProperty(key)) {
@ -265,9 +339,10 @@ export class MapLayer extends PIXILayer {
* *
* -SO * -SO
*/ */
/*
if (old) old.unload() if (old) old.unload()
this.changeHandler.call(this, old)
} else { } else {
let keys = Object.keys(this.maps) let keys = Object.keys(this.maps)
@ -282,7 +357,7 @@ export class MapLayer extends PIXILayer {
}) })
} }
} }
} }*/
} }
get map() { get map() {
@ -297,6 +372,8 @@ export class MapLayer extends PIXILayer {
get mapLayer() { get mapLayer() {
return this return this
} }
} }
MapLayer.idx = 0 MapLayer.idx = 0

35
lib/pixi/maps/map.js
View File

@ -130,8 +130,10 @@ export class GeoMap {
} }
unload() { unload() {
this.image.parent.removeChild(this.image) if (this.image) {
this.image.scatter = null if (this.image.parent) this.image.parent.removeChild(this.image)
this.image.scatter = null
}
} }
/** /**
@ -181,6 +183,17 @@ export class GeoMap {
this.image.scatter = scatter == null ? this.scatter : scatter this.image.scatter = scatter == null ? this.scatter : scatter
this.onLoad.call(this) this.onLoad.call(this)
// Object.assign(this.image, {
// set scatter (value) {
// console.trace("Scatter set.")
// this._scatter = value
// },
// get scatter (){
// console.trace("Get Scatter.")
// return this._scatter
// }
// })
} }
/** /**
@ -264,21 +277,6 @@ export class GeoMap {
return _point return _point
} }
// /**
// * Appends the object to a PIXI container. This is important,
// * to notify the map, that it's parent has changed.
// *
// * If you want to use PIXI's addChild, make sure you call
// * appended right afterwards.
// *
// * @param {PIXI.Container} container
// * @returns Returns the map object to allow chaining.
// */
// appendTo(container) {
// container.addChild(this.image)
// return this.appended(container)
// }
get width() { get width() {
return this.image.scatter.width / this.image.scatter.scale return this.image.scatter.width / this.image.scatter.scale
} }
@ -498,6 +496,8 @@ export class GeoMap {
return null return null
} }
} }
} }
GeoMap.counter = 0 GeoMap.counter = 0
@ -763,6 +763,7 @@ export class ImageMap extends GeoMap {
load(container = null, scatter = null) { load(container = null, scatter = null) {
super.load(this.sprite, container, scatter) super.load(this.sprite, container, scatter)
console.log('LOADED')
this.image.alpha = this.alpha this.image.alpha = this.alpha
this.image.interactive = true this.image.interactive = true
} }

2
lib/pixi/maps/mapapp.html
View File

@ -83,8 +83,6 @@
// Finally apply the map to the MapApp // Finally apply the map to the MapApp
app.setMap('europe', imageMap) app.setMap('europe', imageMap)
console.error("IMAGE MAP SET!")
// The app requires a map before beeing able to run. // The app requires a map before beeing able to run.
// So start the app here. // So start the app here.

93
lib/pixi/maps/mapapp.js
View File

@ -1,7 +1,7 @@
import PIXIApp from '../app.js' import PIXIApp from '../app.js'
import { CoordinateDisplay } from '../../../../js/display.js' import { CoordinateDisplay } from '../../../../js/display.js'
import { DOMLayer, PIXILayer } from '../../../../src/layers/js/layer.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 { RigidScatterContainer } from './scatter.js'
import { EventHandler } from './utils.js' import { EventHandler } from './utils.js'
import { Points } from '../../utils.js' import { Points } from '../../utils.js'
@ -39,7 +39,6 @@ export default class MapApp extends PIXIApp {
alpha: 0.5 alpha: 0.5
} }
) )
this.submaps = [] this.submaps = []
this.overlayElements = new Map() this.overlayElements = new Map()
this.debug = opts.debug this.debug = opts.debug
@ -47,9 +46,7 @@ export default class MapApp extends PIXIApp {
this.showHotkeys = opts.showHotkeys this.showHotkeys = opts.showHotkeys
this.keycodes = this._extractKeyCodes(opts.keycodes) this.keycodes = this._extractKeyCodes(opts.keycodes)
this.coordsLogging = opts.coordsLogging this.coordsLogging = opts.coordsLogging
this.startmap = opts.startmap
this.overlays = opts.overlays this.overlays = opts.overlays
this.maps = opts.maps
this.focus = opts.focus this.focus = opts.focus
this.zoom = opts.zoom this.zoom = opts.zoom
@ -83,9 +80,24 @@ export default class MapApp extends PIXIApp {
this.drawMode = this.DRAW_MODES.PIXI_POINT this.drawMode = this.DRAW_MODES.PIXI_POINT
this.drawData = [] 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() { setup() {
@ -107,26 +119,8 @@ export default class MapApp extends PIXIApp {
container: document.body container: document.body
}) })
if (!this.startmap) { this._setupMapLayer()
let firstMap = Object.keys(this.maps)[0] this.pixiLayer.place(this.mapContainer)
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.pixiUiLayer = new PIXILayer({ name: 'Pixi UI' }) this.pixiUiLayer = new PIXILayer({ name: 'Pixi UI' })
this.pixiLayer.placeLayer(this.pixiUiLayer) 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) { selectMap(key) {
if (this.maps[key]) { this.mapList.select(key)
if (this.mapLayer) this.mapLayer.changeMap(key) if (this.mapLayer) {
} else { this.mapLayer.changeMap(this.mapList.map)
console.error(`Selected map ("${key}") was not (yet) added to the mapapp.`)
} }
} }
/**
* 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) { setMap(key, map) {
this.addMap(key, map) this.addMap(key, map)
this.selectMap(key) this.selectMap(key)
} }
addMap(key, map) { 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) { transformed(event) {
@ -210,14 +213,16 @@ export default class MapApp extends PIXIApp {
* Here we guarantee, that the layer order is as it * Here we guarantee, that the layer order is as it
* is defined in the layers. * is defined in the layers.
*/ */
this.pixiLayer.layers.forEach(layer => { // this.pixiLayer.layers.forEach(layer => {
if (layer !== this.mapLayer) { // if (layer !== this.mapLayer) {
layer.parent.container.removeChild(layer.container) // layer.parent.container.removeChild(layer.container)
layer.parent.container.addChild(layer.container) // layer.parent.container.addChild(layer.container)
} // }
}) // })
console.log(this.map)
this.map.onTransform.add(this.transformed.bind(this)) this.map.onTransform.add(this.transformed.bind(this))
this.transformed() this.transformed()
this.onMapChanged.call(this, this.map) this.onMapChanged.call(this, this.map)
} }
@ -295,7 +300,7 @@ export default class MapApp extends PIXIApp {
} }
get map() { get map() {
return this.mapLayer.map return this.mapList.map
} }
get activeMapKey() { get activeMapKey() {

79
lib/pixi/maps/mapview.js
View File

@ -13,16 +13,10 @@ export default class MapView {
* @param {number} [zoom = 0] - Defines the startup zoom of the app. Note that this is just a request. * @param {number} [zoom = 0] - Defines the startup zoom of the app. Note that this is just a request.
* The MapView will prioritize a full scale app, than displaying the demanded zoom factor * The MapView will prioritize a full scale app, than displaying the demanded zoom factor
*/ */
constructor({ constructor({ focus = null, zoom = null, viewport = { min: { x: -85, y: -180 }, max: { x: 85, y: 180 } } } = {}) {
map = null,
focus = null,
zoom = null,
viewport = { min: { x: -85, y: -180 }, max: { x: 85, y: 180 } }
} = {}) {
this.viewport = viewport this.viewport = viewport
this._focus = focus this._focus = focus
this._zoom = zoom this._zoom = zoom
this._map = map
this.referenceHeight = 256 this.referenceHeight = 256
} }
@ -33,66 +27,53 @@ export default class MapView {
return this._zoom return this._zoom
} }
get map() { update(map) {
return this._map map.moveTo(this._focus, this._zoom)
} }
/** transformed(map) {
* Sets the map to the given focuspoint and zoom factor. this.updateZoom(map)
*/ this.updateFocusPoint(map)
setMap(map) {
this._map = map
this.update()
return true
} }
update() { applyCameraPosition(map) {
this.map.moveTo(this._focus, this._zoom) this.updateFocusPoint(map)
this.updateZoom(map)
} }
transformed(e) { updateFocusPoint(map) {
this.updateZoom() const frame = map.getFrame()
this.updateFocusPoint() this._focus = this.coordinatesFromWindowPoint(map, frame.localCenter)
} }
applyCameraPosition() { updateZoom(map) {
this.updateFocusPoint()
this.updateZoom()
}
updateFocusPoint() {
const frame = this.map.getFrame()
this._focus = this.coordinatesFromWindowPoint(frame.localCenter)
}
updateZoom() {
/** /**
* TODO: This relies on the fact, that all maps have the same tileSize, * TODO: This relies on the fact, that all maps have the same tileSize,
* if a set would have a smaller tileSize. Improve that. * if a set would have a smaller tileSize. Improve that.
*/ */
if (this.map instanceof DeepZoomMap) this._zoom = this.map.floatingLevelForScale(this.map.image.scatter.scale) if (map instanceof DeepZoomMap) this._zoom = map.floatingLevelForScale(map.image.scatter.scale)
else { else {
this._zoom = this.map.zoom this._zoom = map.zoom
console.warn('Zoom is not yet correctly implemented in this Map type: ' + this.map) console.warn('Zoom is not yet correctly implemented in this Map type: ' + map)
} }
} }
mapPointToWindowPoint(point) { mapPointToWindowPoint(map, point) {
let container = this.map.image.parent let container = map.image.parent
let _point = new PIXI.Point( let _point = new PIXI.Point(
this.map.scatter.position.x + this.map.scatter.scale * point.x, map.scatter.position.x + map.scatter.scale * point.x,
this.map.scatter.position.y + this.map.scatter.scale * point.y map.scatter.position.y + map.scatter.scale * point.y
) )
return container.toGlobal(_point) return container.toGlobal(_point)
} }
windowPointToMapPoint(point) { windowPointToMapPoint(map, point) {
let offset = this.map.image.parent.toGlobal({ x: 0, y: 0 }) let offset = map.image.parent.toGlobal({ x: 0, y: 0 })
let _point = new PIXI.Point( let _point = new PIXI.Point(
(point.x - this.map.scatter.position.x - offset.x) / this.map.scatter.scale, (point.x - map.scatter.position.x - offset.x) / map.scatter.scale,
(point.y - this.map.scatter.position.y - offset.y) / this.map.scatter.scale (point.y - map.scatter.position.y - offset.y) / map.scatter.scale
) )
return _point return _point
@ -105,18 +86,18 @@ export default class MapView {
* @returns {{x,y}} Coordinates on the map of the provided position. * @returns {{x,y}} Coordinates on the map of the provided position.
* @memberof MapView * @memberof MapView
*/ */
coordinatesFromWindowPoint(point) { coordinatesFromWindowPoint(map, point) {
let position = { let position = {
x: point.x - this.map.scatter.position.x, x: point.x - map.scatter.position.x,
y: point.y - this.map.scatter.position.y y: point.y - map.scatter.position.y
} }
let normalized = { let normalized = {
x: position.x / (this.map.width * this.map.scatter.scale), x: position.x / (map.width * map.scatter.scale),
y: position.y / (this.map.height * this.map.scatter.scale) y: position.y / (map.height * map.scatter.scale)
} }
let coordinates = this.map.mapdata.toCoordinates(normalized) let coordinates = map.mapdata.toCoordinates(normalized)
return coordinates return coordinates
} }

2
lib/pixi/maps/overlay.js
View File

@ -196,7 +196,7 @@ export default class Overlay {
item.overlay = this item.overlay = this
let graphics = this.createItem(item, informationCallback) let graphics = this.createItem(item, informationCallback)
geoLayer.place(graphics) geoLayer.addChild(graphics)
} }
}) })
return geoLayer return geoLayer

3
lib/pixi/maps/scatter.js
View File

@ -526,13 +526,14 @@ export class MapObjectScatter extends CoverScatter {
}, },
opts opts
) )
super(displayObject, renderer, opts)
if (!renderer) { if (!renderer) {
console.error('Renderer was not set!') console.error('Renderer was not set!')
return return
} }
super(displayObject, renderer, opts)
this.cover = opts.cover this.cover = opts.cover
} }