Removing layer dependency from geolayers and refactoring maps.
This commit is contained in:
parent
938b3e2f3c
commit
ff0606d0a7
25
dist/iwmlib.js
vendored
25
dist/iwmlib.js
vendored
@ -2540,6 +2540,25 @@
|
||||
result[id] = this.getPosition(event);
|
||||
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
|
||||
}
|
||||
@ -5635,6 +5654,8 @@
|
||||
let bottom = parseFloat(this.element.style.bottom);
|
||||
this.element.style.bottom = bottom - delta.y + 'px';
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
//console.log("onResize", this.onResize)
|
||||
if (this.onResize) {
|
||||
@ -6057,6 +6078,8 @@
|
||||
x = bbRight;
|
||||
if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2;
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
@ -6112,6 +6135,8 @@
|
||||
x += this.notchSize * 2;
|
||||
x += this.posOffset;
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
this.placeOrigin(x, y);
|
||||
}
|
||||
|
2309
dist/iwmlib.pixi.js
vendored
2309
dist/iwmlib.pixi.js
vendored
File diff suppressed because it is too large
Load Diff
@ -93,9 +93,10 @@ window.RigidContainer = RigidContainer
|
||||
window.CompactScatter = CompactScatter
|
||||
window.CoverScatter = CoverScatter
|
||||
|
||||
import { GeoLayer, MapLayer } from './maps/geolayer.js'
|
||||
import { GeoLayer, MapLayer, MapList } from './maps/geolayer.js'
|
||||
window.GeoLayer = GeoLayer
|
||||
window.MapLayer = MapLayer
|
||||
window.MapList = MapList
|
||||
|
||||
import { GeoGraphics, GeoPoint, GeoLine, GeoShape, GeoMultiShape } from './maps/geographics.js'
|
||||
|
||||
@ -105,7 +106,6 @@ window.GeoLine = GeoLine
|
||||
window.GeoShape = GeoShape
|
||||
window.GeoMultiShape = GeoMultiShape
|
||||
|
||||
|
||||
import Overlay from "./maps/overlay.js"
|
||||
import Overlay from './maps/overlay.js'
|
||||
|
||||
window.Overlay = Overlay
|
||||
|
@ -38,6 +38,10 @@
|
||||
tokio: { x: 35.696278, y: 139.731366 }
|
||||
}
|
||||
|
||||
window.apps = [
|
||||
|
||||
]
|
||||
|
||||
function createApp(view) {
|
||||
let app = new MapApp({
|
||||
view,
|
||||
@ -52,6 +56,7 @@
|
||||
const wikimedia = "../assets/maps/wikimedia-world-robinson/2000px-BlankMap-World.png"
|
||||
|
||||
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
reject("Creating app timed out.")
|
||||
@ -69,13 +74,12 @@
|
||||
cover: false
|
||||
})
|
||||
|
||||
console.log(wikimediaMap)
|
||||
|
||||
app.addMaps({
|
||||
"osm": osmMap, "wiki": wikimediaMap
|
||||
})
|
||||
app.selectMap("osm")
|
||||
app.setup().run()
|
||||
window.apps.push(app)
|
||||
resolve(app)
|
||||
}, { resolutionDependent: false })
|
||||
|
||||
@ -127,7 +131,9 @@
|
||||
|
||||
; (function () {
|
||||
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) {
|
||||
let capitalPoint = new GeoPoint(capitals[key], {
|
||||
|
||||
@ -145,18 +151,20 @@
|
||||
this.graphics.endFill()
|
||||
}
|
||||
})
|
||||
capitalLayer.place(capitalPoint)
|
||||
capitalContainer.addChild(capitalPoint)
|
||||
}
|
||||
|
||||
enableSwitch(geopoint_switch, app)
|
||||
|
||||
app.mapLayer.place(capitalLayer)
|
||||
// app.mapLayer.place(capitalLayer)
|
||||
|
||||
app.mapLayer.addLayer(capitalLayer)
|
||||
}).catch(console.error)
|
||||
})()
|
||||
|
||||
</script>
|
||||
</section>
|
||||
<section id="geoline">
|
||||
<!-- <section id="geoline">
|
||||
<h2>GeoLine</h2>
|
||||
<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>
|
||||
@ -281,7 +289,7 @@
|
||||
})()
|
||||
|
||||
</script>
|
||||
</section>
|
||||
</section>-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
@ -1,7 +1,6 @@
|
||||
import { Points } from '../../utils.js'
|
||||
import { EventHandler } from './utils.js'
|
||||
import { FlagPolygon } from '../graphics/label.js'
|
||||
import { GeoLayer, MapLayer } from './geolayer.js'
|
||||
import { DeepZoomMap } from './map.js'
|
||||
|
||||
/**
|
||||
@ -97,10 +96,9 @@ export class GeoGraphics {
|
||||
this.draw()
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Redraws the graphics.
|
||||
*
|
||||
*
|
||||
* This should be only called if you require an redraw independent of an adapt.
|
||||
*
|
||||
* @memberof GeoGraphics
|
||||
@ -127,23 +125,23 @@ export class GeoGraphics {
|
||||
return this._position
|
||||
}
|
||||
|
||||
get map() {
|
||||
if (
|
||||
this.graphics.layer &&
|
||||
(this.graphics.layer instanceof GeoLayer || this.graphics.layer instanceof MapLayer)
|
||||
) {
|
||||
return this.graphics.layer.map
|
||||
} else return null
|
||||
}
|
||||
// get map() {
|
||||
// if (
|
||||
// this.graphics.layer &&
|
||||
// (this.graphics.layer instanceof GeoLayer || this.graphics.layer instanceof MapLayer)
|
||||
// ) {
|
||||
// return this.graphics.layer.map
|
||||
// } else return null
|
||||
// }
|
||||
|
||||
get mapLayer() {
|
||||
if (
|
||||
this.graphics.layer &&
|
||||
(this.graphics.layer instanceof GeoLayer || this.graphics.layer instanceof MapLayer)
|
||||
) {
|
||||
return this.graphics.layer.mapLayer
|
||||
} else return null
|
||||
}
|
||||
// get mapLayer() {
|
||||
// if (
|
||||
// this.graphics.layer &&
|
||||
// (this.graphics.layer instanceof GeoLayer || this.graphics.layer instanceof MapLayer)
|
||||
// ) {
|
||||
// return this.graphics.layer.mapLayer
|
||||
// } else return null
|
||||
// }
|
||||
|
||||
/**
|
||||
* Prepare draw is a private function, that prepares the graphics
|
||||
@ -204,8 +202,8 @@ export class GeoPoint extends GeoGraphics {
|
||||
_adaptCoordinates(map) {
|
||||
let scale = 1
|
||||
|
||||
if (this.mapLayer.map instanceof DeepZoomMap) {
|
||||
scale = this.mapLayer.map.image.scale.x
|
||||
if (map instanceof DeepZoomMap) {
|
||||
scale = map.image.scale.x
|
||||
}
|
||||
|
||||
scale = scale / 4
|
||||
|
@ -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
|
||||
|
@ -130,8 +130,10 @@ export class GeoMap {
|
||||
}
|
||||
|
||||
unload() {
|
||||
this.image.parent.removeChild(this.image)
|
||||
this.image.scatter = null
|
||||
if (this.image) {
|
||||
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.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
|
||||
}
|
||||
|
||||
// /**
|
||||
// * 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() {
|
||||
return this.image.scatter.width / this.image.scatter.scale
|
||||
}
|
||||
@ -498,6 +496,8 @@ export class GeoMap {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
GeoMap.counter = 0
|
||||
@ -763,6 +763,7 @@ export class ImageMap extends GeoMap {
|
||||
|
||||
load(container = null, scatter = null) {
|
||||
super.load(this.sprite, container, scatter)
|
||||
console.log('LOADED')
|
||||
this.image.alpha = this.alpha
|
||||
this.image.interactive = true
|
||||
}
|
||||
|
@ -83,8 +83,6 @@
|
||||
|
||||
// Finally apply the map to the MapApp
|
||||
app.setMap('europe', imageMap)
|
||||
console.error("IMAGE MAP SET!")
|
||||
|
||||
|
||||
// The app requires a map before beeing able to run.
|
||||
// So start the app here.
|
||||
|
@ -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() {
|
||||
|
@ -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.
|
||||
* The MapView will prioritize a full scale app, than displaying the demanded zoom factor
|
||||
*/
|
||||
constructor({
|
||||
map = null,
|
||||
focus = null,
|
||||
zoom = null,
|
||||
viewport = { min: { x: -85, y: -180 }, max: { x: 85, y: 180 } }
|
||||
} = {}) {
|
||||
constructor({ focus = null, zoom = null, viewport = { min: { x: -85, y: -180 }, max: { x: 85, y: 180 } } } = {}) {
|
||||
this.viewport = viewport
|
||||
this._focus = focus
|
||||
this._zoom = zoom
|
||||
this._map = map
|
||||
this.referenceHeight = 256
|
||||
}
|
||||
|
||||
@ -33,66 +27,53 @@ export default class MapView {
|
||||
return this._zoom
|
||||
}
|
||||
|
||||
get map() {
|
||||
return this._map
|
||||
update(map) {
|
||||
map.moveTo(this._focus, this._zoom)
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the map to the given focuspoint and zoom factor.
|
||||
*/
|
||||
setMap(map) {
|
||||
this._map = map
|
||||
this.update()
|
||||
return true
|
||||
transformed(map) {
|
||||
this.updateZoom(map)
|
||||
this.updateFocusPoint(map)
|
||||
}
|
||||
|
||||
update() {
|
||||
this.map.moveTo(this._focus, this._zoom)
|
||||
applyCameraPosition(map) {
|
||||
this.updateFocusPoint(map)
|
||||
this.updateZoom(map)
|
||||
}
|
||||
|
||||
transformed(e) {
|
||||
this.updateZoom()
|
||||
this.updateFocusPoint()
|
||||
updateFocusPoint(map) {
|
||||
const frame = map.getFrame()
|
||||
this._focus = this.coordinatesFromWindowPoint(map, frame.localCenter)
|
||||
}
|
||||
|
||||
applyCameraPosition() {
|
||||
this.updateFocusPoint()
|
||||
this.updateZoom()
|
||||
}
|
||||
|
||||
updateFocusPoint() {
|
||||
const frame = this.map.getFrame()
|
||||
this._focus = this.coordinatesFromWindowPoint(frame.localCenter)
|
||||
}
|
||||
|
||||
updateZoom() {
|
||||
updateZoom(map) {
|
||||
/**
|
||||
* TODO: This relies on the fact, that all maps have the same tileSize,
|
||||
* 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 {
|
||||
this._zoom = this.map.zoom
|
||||
console.warn('Zoom is not yet correctly implemented in this Map type: ' + this.map)
|
||||
this._zoom = map.zoom
|
||||
console.warn('Zoom is not yet correctly implemented in this Map type: ' + map)
|
||||
}
|
||||
}
|
||||
|
||||
mapPointToWindowPoint(point) {
|
||||
let container = this.map.image.parent
|
||||
mapPointToWindowPoint(map, point) {
|
||||
let container = map.image.parent
|
||||
|
||||
let _point = new PIXI.Point(
|
||||
this.map.scatter.position.x + this.map.scatter.scale * point.x,
|
||||
this.map.scatter.position.y + this.map.scatter.scale * point.y
|
||||
map.scatter.position.x + map.scatter.scale * point.x,
|
||||
map.scatter.position.y + map.scatter.scale * point.y
|
||||
)
|
||||
|
||||
return container.toGlobal(_point)
|
||||
}
|
||||
|
||||
windowPointToMapPoint(point) {
|
||||
let offset = this.map.image.parent.toGlobal({ x: 0, y: 0 })
|
||||
windowPointToMapPoint(map, point) {
|
||||
let offset = map.image.parent.toGlobal({ x: 0, y: 0 })
|
||||
let _point = new PIXI.Point(
|
||||
(point.x - this.map.scatter.position.x - offset.x) / this.map.scatter.scale,
|
||||
(point.y - this.map.scatter.position.y - offset.y) / this.map.scatter.scale
|
||||
(point.x - map.scatter.position.x - offset.x) / map.scatter.scale,
|
||||
(point.y - map.scatter.position.y - offset.y) / map.scatter.scale
|
||||
)
|
||||
|
||||
return _point
|
||||
@ -105,18 +86,18 @@ export default class MapView {
|
||||
* @returns {{x,y}} Coordinates on the map of the provided position.
|
||||
* @memberof MapView
|
||||
*/
|
||||
coordinatesFromWindowPoint(point) {
|
||||
coordinatesFromWindowPoint(map, point) {
|
||||
let position = {
|
||||
x: point.x - this.map.scatter.position.x,
|
||||
y: point.y - this.map.scatter.position.y
|
||||
x: point.x - map.scatter.position.x,
|
||||
y: point.y - map.scatter.position.y
|
||||
}
|
||||
|
||||
let normalized = {
|
||||
x: position.x / (this.map.width * this.map.scatter.scale),
|
||||
y: position.y / (this.map.height * this.map.scatter.scale)
|
||||
x: position.x / (map.width * 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
|
||||
}
|
||||
|
@ -196,7 +196,7 @@ export default class Overlay {
|
||||
|
||||
item.overlay = this
|
||||
let graphics = this.createItem(item, informationCallback)
|
||||
geoLayer.place(graphics)
|
||||
geoLayer.addChild(graphics)
|
||||
}
|
||||
})
|
||||
return geoLayer
|
||||
|
@ -526,13 +526,14 @@ export class MapObjectScatter extends CoverScatter {
|
||||
},
|
||||
opts
|
||||
)
|
||||
super(displayObject, renderer, opts)
|
||||
|
||||
|
||||
if (!renderer) {
|
||||
console.error('Renderer was not set!')
|
||||
return
|
||||
}
|
||||
|
||||
super(displayObject, renderer, opts)
|
||||
this.cover = opts.cover
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user